/* ==========================================================================
   Open-Path Reading · KD Digital blog stylesheet · v1
   ========================================================================== */

:root {
  /* Brand palette */
  --navy:   #0B1340;
  --red:    #ef4444;
  --gold:   #fcd873;
  --slate:  #1e293b;
  --muted-blue: #475569;

  /* Page */
  --ink:    #1a1a1a;
  --muted:  #5b5b6b;
  --soft:   #f4f4f7;
  --line:   #e5e7eb;
  --bg:     #ffffff;

  /* Code */
  --code-bg:  #0e1530;
  --code-ink: #e6edf3;

  /* Persona band tints (10% opacity) */
  --persona-panicked:       #ef4444;
  --persona-migration-lead: #0B1340;
  --persona-founder:        #d4a017;
  --persona-developer:      #1e293b;
  --persona-researcher:     #475569;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

  /* Sizing */
  --content-max:  760px;
  --gutter:       24px;
  --radius:       8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

html {
  /* Horizontal-overflow guardrail. `overflow-x: clip` on html is a paint-only
     constraint that does NOT create a scroll container, so descendants'
     `position: sticky` keeps anchoring to the document scroll as expected. */
  overflow-x: clip;
  max-width: 100%;
}
/* Force body to keep default `overflow: visible`, so the document/html is the
   scroll context. The site-wide `kd-base-layout.css` sets `body { overflow-x: hidden }`
   which (per CSS spec) forces `overflow-y: auto`, making body a scroll container
   that silently breaks `position: sticky` on every descendant — including the
   article's right-rail TOC. We override here using `html body` (specificity 0,0,2)
   to beat the plain `body` rule (specificity 0,0,1) without needing !important.
   `overflow-x: clip` on html still prevents any horizontal page scroll. */
html body {
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, audio { max-width: 100%; height: auto; }

.skip-to-content {
  position: absolute;
  left: -9999px;
}
.skip-to-content:focus {
  position: fixed; top: 8px; left: 8px;
  background: var(--navy); color: #fff;
  padding: 8px 16px; z-index: 1000;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- announce bar */

.announce-bar {
  background: linear-gradient(90deg, var(--navy) 0%, #1a2560 100%);
  color: #ffffff;
  font-size: 12.5px;
  border-bottom: 1px solid var(--gold);
}
.announce-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.announce-bar__icon { color: var(--gold); }
.announce-bar__text { letter-spacing: 0.01em; opacity: 0.92; }
@media (max-width: 720px) {
  .announce-bar { font-size: 11.5px; }
  .announce-bar__inner { padding: 6px 12px; }
}

/* --------------------------------------------------------------------- header */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--navy);
  flex-shrink: 0;
}
.site-header__logo-mark {
  width: 38px; height: 38px;
  background: var(--navy);
  color: var(--gold);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(11, 19, 64, 0.15);
}
.site-header__logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-header__logo-name {
  font-weight: 800; font-size: 16px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.site-header__logo-tagline {
  font-weight: 500; font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.site-header__nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; justify-content: center;
}
.site-header__nav .nav-link,
.site-header__nav details summary.nav-link {
  color: var(--ink);
  text-decoration: none;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 120ms, color 120ms;
  cursor: pointer;
  list-style: none;
}
.site-header__nav .nav-link::-webkit-details-marker { display: none; }
.site-header__nav .nav-link:hover {
  background: var(--soft);
  color: var(--navy);
}
.site-header__nav .nav-link--current {
  color: var(--red);
  font-weight: 700;
}
.site-header__nav .nav-arrow {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.6;
  transition: transform 200ms;
}
.nav-dropdown[open] .nav-arrow { transform: rotate(180deg); opacity: 1; }

.nav-dropdown { position: relative; }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  min-width: 280px;
  box-shadow: 0 12px 36px rgba(11, 19, 64, 0.16);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 35;
}
.nav-dropdown__menu a {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  border: 0;
}
.nav-dropdown__menu a:hover {
  background: var(--soft);
  color: var(--navy);
}
.nav-dropdown__hint {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
  letter-spacing: 0.01em;
}

.site-header__cta {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.btn-cta {
  display: inline-flex; align-items: center;
  background: var(--navy);
  color: var(--gold);
  text-decoration: none;
  border: 0;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 160ms, transform 120ms, box-shadow 160ms;
}
.btn-cta:hover {
  background: #1a2560;
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 19, 64, 0.25);
}

.site-header__hamburger {
  display: none;
  background: none; border: 0;
  width: 38px; height: 38px;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
}
.site-header__hamburger span {
  display: block;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 200ms, opacity 160ms;
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .site-header__nav { display: none; }
  .site-header__hamburger { display: block; }
  .site-header__cta .btn-cta { display: none; }
  .site-header__logo-tagline { display: none; }
}

/* Mobile nav (off-canvas) */
.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 80vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  padding: 80px 24px 32px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 25;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(11, 19, 64, 0.16);
}
.mobile-nav[data-open="true"] { transform: translateX(0); }
.mobile-nav__link {
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  border: 0;
}
.mobile-nav__link:hover { background: var(--soft); color: var(--navy); }
.mobile-nav__cta {
  margin-top: 16px;
  background: var(--navy);
  color: var(--gold) !important;
  text-align: center;
  font-weight: 700;
  border-radius: 999px;
}
.mobile-nav__group {
  margin: 12px 0 8px;
  padding: 12px 14px 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.mobile-nav__group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.mobile-nav__sublink {
  padding: 8px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  border: 0;
}
.mobile-nav__sublink:hover { color: var(--red); }

/* --------------------------------------------------------------------- post layout */

.post-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
  /* Belt-and-braces: explicit width + min-width inside a grid track ensures
     the item respects its parent's track size (312px on mobile single-col grid). */
  width: 100%;
  min-width: 0;
}

.post {}

/* --------------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1 {
  font-size: 42px;
  margin: 0 0 16px;
  border-bottom: 4px solid var(--red);
  padding-bottom: 14px;
}
h2 {
  font-size: 30px;
  margin: 56px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 32px;
}
h3 {
  font-size: 22px;
  margin: 32px 0 10px;
}
h4 { font-size: 18px; margin: 22px 0 8px; }

p { margin: 0 0 16px; }
strong { color: var(--navy); }

a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px dashed var(--red);
}
a:hover { background: #fff3f3; }

ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin: 6px 0; }

hr {
  border: none;
  border-top: 2px dashed var(--line);
  margin: 36px 0;
}

blockquote {
  margin: 18px 0;
  padding: 16px 22px;
  border-left: 4px solid var(--gold);
  background: var(--soft);
  color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote strong { color: var(--navy); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: #f1f1f5;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--navy);
}
pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 18px 20px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
  margin: 18px 0;
  position: relative;
}
pre code { background: transparent; color: inherit; padding: 0; }

/* Copy-to-clipboard button (injected by JS) */
.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(252, 216, 115, 0.12);
  color: var(--gold);
  border: 1px solid rgba(252, 216, 115, 0.3);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms, background 160ms;
  z-index: 2;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover  { background: rgba(252, 216, 115, 0.2); }
.copy-btn:focus  { opacity: 1; outline: 2px solid var(--gold); outline-offset: 1px; }
.copy-btn--ok    { background: rgba(34, 197, 94, 0.2); color: #86efac; border-color: rgba(34, 197, 94, 0.4); }

/* Prism.js syntax highlighting overrides — match brand palette */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #7d8590; font-style: italic; }
.token.punctuation { color: #c9d1d9; }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #ff7b72; }
.token.boolean, .token.number { color: #79c0ff; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #ff7b72; }
.token.atrule, .token.attr-value, .token.keyword { color: #fcd873; font-weight: 600; }
.token.function, .token.class-name { color: #d2a8ff; }
.token.regex, .token.important, .token.variable { color: #ffa657; }

/* Tables — wrapped in a horizontally-scrolling container on mobile */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
  display: block;          /* enable horizontal-scroll fallback on narrow viewports */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
}
@media (min-width: 720px) {
  table { display: table; overflow-x: visible; }  /* desktop: full table flow */
}
th, td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
@media (max-width: 720px) {
  th, td { padding: 8px 10px; font-size: 13.5px; min-width: 110px; }
}
th { background: var(--soft); color: var(--navy); font-weight: 700; }

/* --------------------------------------------------------------------- trust strip */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 0;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #fafafe 0%, #f1f1f5 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.trust-chip strong { color: var(--navy); font-weight: 800; }
.trust-chip .chip-icon { font-size: 14px; line-height: 1; }
.trust-chip--award { background: linear-gradient(135deg, #fff7e0 0%, #ffe9a8 100%); border-color: #f1c750; }
.trust-chip--rating { background: linear-gradient(135deg, #fffaf0 0%, #fff0d0 100%); border-color: #f1c750; }

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--soft);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.reading-time-badge::before { content: "⏱"; font-size: 13px; }

/* --------------------------------------------------------------------- figures */

figure {
  margin: 32px 0;
}
figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--soft);
}
figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
figure.feature-image {
  margin: 18px 0 32px;
}
figure.feature-image img {
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(11, 19, 64, 0.14);
  max-height: 380px;     /* keeps TL;DR above the 900px desktop fold */
  width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px) {
  figure.feature-image img {
    max-height: 260px;   /* on mobile, keep the fork visible by limiting crop */
    object-position: center 30%;  /* favour upper portion (face + cards) */
  }
}
figure.inline-figure {
  margin: 36px 0;
}
figure.inline-figure img {
  border: 1px solid var(--line);
}

/* SVG animate-on-scroll: subtle fade-in + slight rise */
figure.inline-figure[data-animated="false"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
figure.inline-figure[data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  figure.inline-figure[data-animated="false"],
  figure.inline-figure[data-animated="true"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------- persona picker */

.persona-picker {
  background: linear-gradient(180deg, #fafafe 0%, #f4f4f7 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px 24px;
  margin: 36px 0 48px;
}
.persona-picker__heading {
  margin: 0 0 8px;
  font-size: 22px;
  border: 0;
  padding: 0;
}
.persona-picker__sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14.5px;
}
.persona-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.persona-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.persona-card::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: left 600ms ease;
  pointer-events: none;
}
.persona-card:hover,
.persona-card:focus-visible {
  border-color: var(--navy);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 19, 64, 0.14);
}
.persona-card:hover::after { left: 100%; }
.persona-card__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(11, 19, 64, 0.08));
}
.persona-card__label {
  font-weight: 800; color: var(--navy);
  font-size: 15px; line-height: 1.3;
  margin-bottom: 4px;
}
.persona-card__hint {
  color: var(--muted); font-size: 13px; line-height: 1.4;
}
.persona-card--default {
  border-style: dashed;
  background: transparent;
}
.persona-card--default .persona-card__icon { font-size: 24px; }

/* Selected persona card highlight */
html[data-persona-active="panicked"]       .persona-card[data-pick="panicked"],
html[data-persona-active="migration-lead"] .persona-card[data-pick="migration-lead"],
html[data-persona-active="founder"]        .persona-card[data-pick="founder"],
html[data-persona-active="developer"]      .persona-card[data-pick="developer"],
html[data-persona-active="researcher"]     .persona-card[data-pick="researcher"] {
  border-color: var(--navy);
  background: var(--navy);
}
html[data-persona-active] .persona-card[data-pick]:not([data-pick="all"]).is-active .persona-card__label,
html[data-persona-active="panicked"]       .persona-card[data-pick="panicked"]       .persona-card__label,
html[data-persona-active="migration-lead"] .persona-card[data-pick="migration-lead"] .persona-card__label,
html[data-persona-active="founder"]        .persona-card[data-pick="founder"]        .persona-card__label,
html[data-persona-active="developer"]      .persona-card[data-pick="developer"]      .persona-card__label,
html[data-persona-active="researcher"]     .persona-card[data-pick="researcher"]     .persona-card__label {
  color: var(--gold);
}
html[data-persona-active="panicked"]       .persona-card[data-pick="panicked"]       .persona-card__hint,
html[data-persona-active="migration-lead"] .persona-card[data-pick="migration-lead"] .persona-card__hint,
html[data-persona-active="founder"]        .persona-card[data-pick="founder"]        .persona-card__hint,
html[data-persona-active="developer"]      .persona-card[data-pick="developer"]      .persona-card__hint,
html[data-persona-active="researcher"]     .persona-card[data-pick="researcher"]     .persona-card__hint {
  color: #c9d3ff;
}

/* Generic active-card highlight — works for any blog's persona ids without
   needing the legacy hardcoded id list above. JS adds .is-active to the
   clicked card and removes from siblings (see setActiveCard in funneled-blog.js). */
.persona-card.is-active {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: 0 6px 20px rgba(11, 19, 64, 0.18);
}
.persona-card.is-active .persona-card__icon { transform: scale(1.05); }
.persona-card.is-active .persona-card__label { color: var(--gold); }
.persona-card.is-active .persona-card__hint  { color: #c9d3ff; }

/* "Reading as: X · Show all sections" feedback pill rendered by JS just under
   the picker grid. Sits above the fold so user gets immediate confirmation
   that the click did something (collapsed sections are typically below fold). */
.persona-active-pill {
  display: none;
  margin: 18px 0 4px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #fff7e6 0%, #fffaf0 100%);
  border: 1px solid #f5c64d;
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
}
.persona-active-pill[data-visible="true"] { display: flex; }
.persona-active-pill__label strong { color: var(--navy); margin-left: 4px; }
.persona-active-pill__clear {
  background: var(--navy);
  color: var(--gold);
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}
.persona-active-pill__clear:hover { background: #1a2a6c; }

/* --------------------------------------------------------------------- persona band */

.persona-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 48px 0 -8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--soft) 0%, #fafafe 100%);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink);
}
.persona-band .band-label {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--navy);
}
.persona-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.persona-tag .persona-emoji { font-size: 13px; }
.persona-tag--secondary { opacity: 0.65; font-weight: 500; }

/* Persona-specific accent borders on bands when matching that persona */
.persona-band[data-primary~="panicked"]       { border-left-color: var(--persona-panicked); }
.persona-band[data-primary~="migration-lead"] { border-left-color: var(--persona-migration-lead); }
.persona-band[data-primary~="founder"]        { border-left-color: var(--persona-founder); }
.persona-band[data-primary~="developer"]      { border-left-color: var(--persona-developer); }
.persona-band[data-primary~="researcher"]     { border-left-color: var(--persona-researcher); }

/* When a persona is active, highlight relevant bands and dim irrelevant H2s */
html[data-persona-active] .persona-band[data-primary] { background: #fff7e6; border-left-color: var(--gold); }
html[data-persona-active="panicked"]       .persona-band:not([data-primary~="panicked"]):not([data-secondary~="panicked"])             + h2 ~ * { /* fallback: do nothing here, JS handles section collapse */ }

/* --------------------------------------------------------------------- mode toggle */

.mode-toggle {
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.mode-toggle__buttons {
  display: flex;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.mode-toggle__btn {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--line);
  transition: background 120ms, color 120ms;
}
.mode-toggle__btn:last-child { border-right: 0; }
.mode-toggle__btn:hover { background: rgba(11, 19, 64, 0.04); color: var(--navy); }
.mode-toggle__btn[data-active="true"] {
  background: var(--navy);
  color: var(--gold);
}
.mode-toggle__panel { padding: 18px 22px; display: none; }
.mode-toggle__panel[data-active="true"] { display: block; }

/* --------------------------------------------------------------------- code accordion */

.code-accordion {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.code-accordion__summary {
  cursor: pointer;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  background: var(--soft);
  border-radius: var(--radius) var(--radius) 0 0;
  list-style: none;
}
.code-accordion__summary::-webkit-details-marker { display: none; }
.code-accordion__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 200ms;
  color: var(--red);
}
.code-accordion[open] .code-accordion__summary::before { transform: rotate(90deg); }
.code-accordion__body { padding: 6px 16px 16px; }
.code-accordion__body pre { margin: 12px 0 6px; }

/* --------------------------------------------------------------------- persona CTA */

.persona-cta {
  /* Hidden by default; revealed when matching persona is active */
  display: none;
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, #1a2560 100%);
  color: #fff;
  border-left: 5px solid var(--gold);
}
.persona-cta p { color: #e6ebff; }
.persona-cta strong { color: var(--gold); }
.persona-cta a {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 700;
}
.persona-cta a:hover { background: rgba(252, 216, 115, 0.15); }

html[data-persona-active="panicked"]       .persona-cta[data-persona="panicked"],
html[data-persona-active="migration-lead"] .persona-cta[data-persona="migration-lead"],
html[data-persona-active="founder"]        .persona-cta[data-persona="founder"],
html[data-persona-active="developer"]      .persona-cta[data-persona="developer"],
html[data-persona-active="researcher"]     .persona-cta[data-persona="researcher"] {
  display: block;
}

/* Persona-specific accent color on CTA border */
.persona-cta[data-persona="panicked"]       { border-left-color: var(--persona-panicked); }
.persona-cta[data-persona="migration-lead"] { border-left-color: var(--gold); }
.persona-cta[data-persona="founder"]        { border-left-color: var(--gold); }
.persona-cta[data-persona="developer"]      { border-left-color: var(--gold); }
.persona-cta[data-persona="researcher"]     { border-left-color: var(--gold); }

/* --------------------------------------------------------------------- section collapse (persona-driven) */

/* When a persona is active, irrelevant sections collapse to a one-line H2.
   JS marks each individual content sibling with [data-collapsed-content="true"]
   so collapse stops at the next H2 (no greedy ~ selector). */
h2[data-collapsed="true"] {
  cursor: pointer;
  font-size: 18px;
  margin-top: 36px;
  padding-top: 12px;
  color: var(--muted);
  font-weight: 600;
  border-top: 1px dashed var(--line);
  position: relative;
}
h2[data-collapsed="true"]::after {
  content: "  +  click to expand";
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  margin-left: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}
[data-collapsed-content="true"] { display: none !important; }

/* --------------------------------------------------------------------- emergency action card (above-fold) */

.emergency-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 24px;
  padding: 14px 18px 14px 22px;
  background: linear-gradient(135deg, #fff4f4 0%, #ffe8e8 100%);
  border: 2px solid var(--red);
  border-left-width: 6px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.18);
}
.emergency-card__pulse {
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background: var(--red);
  border-radius: 50%;
  animation: emergency-pulse 1.6s ease-in-out infinite;
}
@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .emergency-card__pulse { animation: none; }
}
.emergency-card__main { flex: 1 1 auto; min-width: 0; }
.emergency-card__label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.emergency-card__body {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.emergency-card__body code {
  background: rgba(239, 68, 68, 0.1);
  color: var(--navy);
  font-size: 0.92em;
}
.emergency-card__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: var(--red);
  color: #ffffff;
  text-decoration: none;
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 160ms, transform 120ms;
}
.emergency-card__btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
  color: #ffffff;
}
@media (max-width: 720px) {
  .emergency-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .emergency-card__btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------- downloads card */

.downloads-card {
  margin: 28px 0;
  padding: 22px 24px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff4d0 100%);
  border: 1px solid #f1c750;
  border-radius: 12px;
}
.downloads-card__heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.downloads-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.downloads-card__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1.5px solid #f1c750;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.downloads-card__item:hover {
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 19, 64, 0.12);
}
.downloads-card__item-icon {
  font-size: 22px; flex-shrink: 0;
}
.downloads-card__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.downloads-card__item-title {
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  line-height: 1.3;
}
.downloads-card__item-meta {
  font-size: 11.5px; color: var(--muted);
}
.downloads-card__item--btn { background: #fff8e1; }

/* ---- alternate markup the 5 newer blogs use: a.download-card with
        .download-card__icon + .download-card__body > strong + span.
        Style identically to .downloads-card__item so the visual is
        consistent across all 7 blogs without requiring a markdown rewrite. */

/* When .downloads-card has direct .download-card children (no inner __grid
   wrapper) auto-grid them in the same way. */
.downloads-card:has(> .download-card) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  /* heading must span the full row */
}
.downloads-card:has(> .download-card) > .downloads-card__heading {
  grid-column: 1 / -1;
}
@media (min-width: 720px) {
  .downloads-card:has(> .download-card) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Three markup variants exist for download cards across the 7 blogs:
     A. .downloads-card__item with nested __text wrapper (used by 301 blog)
     B. a.download-card with .download-card__body wrapper (best-seo-tools)
     C. a.download-card with FLAT __title + __meta children (gmb, geo, etc.)
   Unified grid layout below handles B and C with a single rule set:
   icon spans both rows on the left; title goes top-right; meta goes
   bottom-right. display:contents on the body wrapper lets its strong/span
   children participate in the parent grid directly. */
a.download-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 3px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #f1c750;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
  text-align: left;
}
a.download-card:hover {
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 19, 64, 0.12);
}
.download-card__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  font-size: 22px;
  line-height: 1.2;
  align-self: start;
  margin-top: 2px;
}
/* Pattern B: body wrapper — display:contents lets its children become grid items */
.download-card__body { display: contents; }
.download-card__body strong,
.download-card__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.download-card__body span,
.download-card__meta {
  grid-column: 2;
  grid-row: 2;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Fallback for browsers without :has() (Safari < 15.4 / older Firefox).
   Without :has() the parent stays block-level and cards stack as before,
   but each card is still styled correctly. */
@supports not selector(:has(*)) {
  .downloads-card { display: block; }
  .downloads-card a.download-card { margin-top: 10px; }
}

/* --------------------------------------------------------------------- tool cards (decision tool, cost calculator) */

.tool-card {
  margin: 36px 0;
  background: #ffffff;
  border: 2px solid var(--navy);
  border-radius: 14px;
  overflow: hidden;
}
.tool-card__header {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2560 100%);
  color: #ffffff;
  padding: 20px 24px;
  border-bottom: 4px solid var(--gold);
}
.tool-card__badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.tool-card__title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
}
.tool-card__sub { color: #c9d3ff; font-size: 14px; margin: 0; }
.tool-card__body { padding: 24px; }

/* Decision tool */
.tool-step { display: none; }
.tool-step[data-active="true"] { display: block; animation: tool-step-in 240ms ease-out; }
@keyframes tool-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tool-step__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.tool-step__question {
  font-size: 18px; font-weight: 700; color: var(--navy);
  margin-bottom: 6px;
}
.tool-step__hint {
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
  line-height: 1.5;
}
.tool-step__choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tool-step__choices--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tool-choice {
  background: #ffffff;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 140ms, transform 120ms, background 140ms;
  display: flex; flex-direction: column;
}
.tool-choice:hover {
  border-color: var(--gold);
  background: #fffbeb;
  transform: translateX(2px);
}
.tool-choice__main {
  font-size: 14.5px; font-weight: 700; color: var(--navy);
  margin-bottom: 2px;
}
.tool-choice__hint {
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
}
.tool-choice--platform {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  padding: 10px 12px;
}
.tool-choice--platform:hover { color: var(--navy); }

/* Decision result */
.tool-step--result { padding: 4px 0; }
.tool-result__verdict {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.tool-result__code-label {
  font-size: 13px; color: var(--muted); margin-bottom: 6px;
}
.tool-result__code {
  font-size: 64px; font-weight: 900;
  color: var(--gold);
  line-height: 1;
  background: var(--navy);
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.tool-result__reasoning {
  font-size: 14px;
  color: var(--ink);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}
.tool-result__snippet-label {
  font-size: 12px; color: var(--muted);
  font-weight: 600; margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.tool-result__snippet-label span { color: var(--navy); font-weight: 800; }
.tool-result__snippet-code {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 14px 16px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  margin: 0 0 16px;
}
.tool-result__actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.tool-result__restart {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.tool-result__restart:hover { border-color: var(--navy); color: var(--navy); }
.tool-result__more {
  color: var(--red);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  border-bottom: 1px dashed var(--red);
  padding-bottom: 1px;
}

/* Quiz widget */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.quiz-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.quiz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  width: 14%;
  transition: width 320ms ease-out;
}
.quiz-progress__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.quiz-progress__label span:first-child {
  color: var(--navy);
  font-size: 14px;
}

.quiz-step { display: none; }
.quiz-step[data-active="true"] { display: block; animation: tool-step-in 240ms ease-out; }
.quiz-step__question {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.4;
}
.quiz-step__choices {
  display: flex; flex-direction: column; gap: 8px;
}
.quiz-choice {
  background: #ffffff;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: border-color 140ms, transform 120ms, background 140ms;
  position: relative;
}
.quiz-choice:hover:not(:disabled) {
  border-color: var(--navy);
  background: #f8f9ff;
  transform: translateX(2px);
}
.quiz-choice code {
  background: var(--soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  color: var(--navy);
}
.quiz-choice:disabled { cursor: default; }
.quiz-choice[data-state="correct"] {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #14532d;
}
.quiz-choice[data-state="correct"]::after {
  content: "✓";
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  background: #22c55e;
  color: #ffffff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.quiz-choice[data-state="incorrect"] {
  border-color: var(--red);
  background: #fef2f2;
  color: #7f1d1d;
}
.quiz-choice[data-state="incorrect"]::after {
  content: "✗";
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  background: var(--red);
  color: #ffffff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.quiz-choice[data-state="dimmed"] {
  opacity: 0.45;
  cursor: default;
}

.quiz-step__feedback {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--soft);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.quiz-step__feedback[data-visible="true"] {
  display: block;
  animation: tool-step-in 200ms ease-out;
}
.quiz-step__feedback-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.quiz-step__feedback-text strong { color: var(--navy); }

.quiz-step__next {
  display: inline-flex;
  background: var(--navy);
  color: var(--gold);
  border: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
}
.quiz-step__next:hover { background: #1a2560; }

/* Quiz result */
.quiz-result {
  text-align: center;
  padding: 12px 0 22px;
}
.quiz-result__score-label {
  font-size: 13px; color: var(--muted); margin-bottom: 6px;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
.quiz-result__score {
  font-size: 56px; font-weight: 900;
  color: var(--gold); line-height: 1;
  background: var(--navy);
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.quiz-result__verdict {
  font-size: 18px; font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.quiz-result__cta {
  font-size: 14px; color: var(--ink);
  max-width: 480px; margin: 0 auto;
  line-height: 1.55;
}
.quiz-result__cta a {
  color: var(--red); font-weight: 700;
  border-bottom: 1px dashed var(--red);
  text-decoration: none;
}
.quiz-result__actions {
  display: flex; gap: 12px;
  justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}

/* --------------------------------------------------------------------- audio player */

.audio-card {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 18px 0 32px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a2560 100%);
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(11, 19, 64, 0.18);
  border-left: 5px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.audio-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at top right, rgba(252, 216, 115, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.audio-card__cover {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--code-bg);
  position: relative;
}
.audio-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.audio-card__cover-badge {
  position: absolute;
  top: 4px; left: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  padding: 2px 6px;
  border-radius: 3px;
}

.audio-card__main { flex: 1 1 auto; min-width: 0; }

.audio-card__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.audio-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.audio-card__chapter-label {
  font-size: 12.5px;
  color: #c9d3ff;
  margin-bottom: 8px;
  min-height: 1em;
}

.audio-card__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.audio-btn {
  background: var(--gold);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  padding: 0;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  transition: transform 120ms, box-shadow 120ms;
}
.audio-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(252, 216, 115, 0.2); }
.audio-btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  width: 36px; height: 36px;
}
.audio-btn--secondary:hover { background: rgba(255, 255, 255, 0.18); }
.audio-btn svg { width: 16px; height: 16px; fill: currentColor; }

.audio-card__progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #c9d3ff;
  font-variant-numeric: tabular-nums;
}
.audio-card__progress-wrap > span { flex-shrink: 0; }
.audio-card__progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: visible;
}
.audio-card__progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #ffe9a8);
  border-radius: 3px;
  width: 0%;
}
.audio-card__chapter-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 1px;
  pointer-events: none;
}

.audio-card__speed {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.audio-card__speed:hover { background: rgba(255, 255, 255, 0.2); }

.audio-card__track-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 10px;
}
.audio-card__track-btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #c9d3ff;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.audio-card__track-btn:hover { color: #ffffff; }
.audio-card__track-btn[data-active="true"] {
  background: var(--gold);
  color: var(--navy);
}

@media (max-width: 720px) {
  .audio-card { flex-direction: column; align-items: stretch; padding: 14px; }
  .audio-card__cover { width: 100%; height: 120px; }
  .audio-card__cover img { object-position: center 30%; }
}

/* --------------------------------------------------------------------- hover-glossary */

abbr.glossary {
  text-decoration: none;
  border-bottom: 1.5px dotted var(--gold);
  cursor: help;
  padding-bottom: 1px;
  position: relative;
  transition: color 120ms;
}
abbr.glossary:hover { color: var(--navy); border-bottom-color: var(--red); }

/* JS-driven custom tooltip (replaces native title= which is slow + ugly) */
.glossary-tooltip {
  position: absolute;
  z-index: 60;
  background: var(--navy);
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.005em;
  box-shadow: 0 12px 28px rgba(11, 19, 64, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms, transform 140ms;
}
.glossary-tooltip[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
.glossary-tooltip__term {
  display: block;
  font-weight: 800;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------- table of contents */

/* Wrapper that holds main + ToC side-by-side on wide viewports */
.post-with-toc {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  /* minmax(0, 1fr) lets the track shrink below intrinsic content size,
     preventing overflow when wide flex/inline content is present. */
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  /* IMPORTANT: do NOT set overflow-x: clip here. Any non-`visible` overflow
     on this container creates a scroll-context that breaks `position: sticky`
     on its grandchildren (the right-rail TOC + extras). The horizontal-scroll
     guardrail is enforced at body-level instead via `overflow-x: hidden` on
     the html/body wrapper, plus per-element scroll containers (.post table,
     .audio-card__progress, etc.) for any naturally-wide content. */
}
.post-with-toc > * { min-width: 0; }
@media (min-width: 1100px) {
  .post-with-toc {
    grid-template-columns: minmax(0, var(--content-max)) 300px;
    align-items: start;
    justify-content: space-between;        /* push rail to right edge */
  }
  .post-with-toc .post-main {
    max-width: var(--content-max);
    padding-left: 0;
    padding-right: 0;
  }
}

.toc-panel {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Right rail = a SINGLE sticky container that holds the ToC + the extras
   cards. Stays pinned just below the site header during scroll, with
   internal overflow:auto if its content is taller than the viewport.
   This is the Healthline / NYT / Medium pattern — way more robust than
   stacking two separate sticky panes (which is fragile when grandchildren
   sticky-positioning interacts with grid + overflow ancestors).

   `align-self: start` is critical: sticky in a grid cell only works when
   the cell does NOT stretch to fill the row. With stretch, the cell takes
   the full row height and there's no scroll-room for the sticky element. */

.right-rail {
  font-family: var(--font-sans);
}
@media (min-width: 1100px) {
  .right-rail {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 88px;                  /* clear of the sticky site header (urgency-bar + header ≈ 80px) */
    align-self: start;          /* grid cell shrinks to content; sticky has room to scroll */
    max-height: calc(100vh - 110px);  /* leave a 22px gap to viewport bottom */
    overflow-y: auto;           /* internal scroll if rail content > viewport */
    overscroll-behavior: contain;     /* don't scroll the page when rail-end reached */
    padding-right: 4px;
  }
  .right-rail::-webkit-scrollbar { width: 6px; }
  .right-rail::-webkit-scrollbar-track { background: transparent; }
  .right-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .right-rail::-webkit-scrollbar-thumb:hover { background: var(--muted); }
}

.toc-column {
  font-family: var(--font-sans);
}
@media (min-width: 1100px) {
  .toc-column {
    /* No sticky here anymore — the parent .right-rail handles stickiness.
       Just lay out the toc-panel naturally. */
    flex-shrink: 0;
  }
  .toc-panel {
    padding: 18px 16px 18px 18px;
    border-left: 2px solid var(--line);
    /* No internal scroll on the toc-panel itself; the parent .right-rail
       provides one container-level scroll if everything overflows together. */
  }
}

@media (max-width: 1099px) {
  .right-rail { margin: 16px auto 24px; max-width: var(--content-max); display: flex; flex-direction: column; gap: 16px; }
  .toc-panel {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
  }
  .toc-mini-cta { display: none; }
  .right-rail-extras { display: none; }   /* secondary cards desktop-only */
}

/* --------------------------------------------------------------------- right-rail extras (cards stack inside the parent sticky .right-rail) */

@media (min-width: 1100px) {
  .right-rail-extras {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 18px;
    border-left: 2px solid var(--line);
    flex-shrink: 0;
    /* No own sticky positioning — parent .right-rail is the sticky container. */
  }
}

.rail-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
.rail-card__pre-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.rail-card__title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 5px;
  line-height: 1.25;
}
.rail-card__icon {
  display: inline-block;
  font-size: 19px;
  margin-bottom: 4px;
}
.rail-card__body {
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 12px;
}
.rail-card__link {
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--red);
  padding-bottom: 1px;
}
.rail-card__link:hover { background: #fff3f3; }
.rail-card__link--cta {
  display: inline-flex;
  background: var(--navy);
  color: var(--gold);
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 4px;
}
.rail-card__link--cta:hover {
  background: #1a2560;
  color: var(--gold);
  border-bottom-color: transparent;
  background: #1a2560;
}

/* Variant: listen card (gold accent) */
.rail-card--listen {
  background: linear-gradient(135deg, #fff8e1 0%, #fff4d0 100%);
  border-color: #f1c750;
}
.rail-card--listen .rail-card__title { color: var(--navy); }

/* Variant: brand spine pull-quote (navy + gold) */
.rail-card--quote {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2560 100%);
  color: #ffffff;
  border-color: var(--gold);
  border-left-width: 4px;
  padding: 14px 14px;
  text-align: center;
}
.rail-card--quote .rail-card__quote-mark {
  font-size: 30px;
  font-family: Georgia, serif;
  color: var(--gold);
  line-height: 0.6;
  margin-bottom: 3px;
}
.rail-card--quote .rail-card__quote {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.rail-card--quote .rail-card__quote-meta {
  font-size: 11px;
  color: #c9d3ff;
  line-height: 1.4;
}

/* Variant: methodology card */
.rail-card--methodology .rail-card__title {
  font-size: 15px;
  color: var(--red);
}

/* Variant: author micro-card */
.rail-card--author {
  background: linear-gradient(180deg, #fafafe 0%, #ffffff 100%);
}
.rail-card--author .rail-card__author-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.rail-card--author .rail-card__author-photo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.rail-card--author .rail-card__author-meta { flex: 1; min-width: 0; }
.rail-card--author .rail-card__author-name {
  font-size: 13.5px; font-weight: 800; color: var(--navy);
  line-height: 1.2;
}
.rail-card--author .rail-card__author-title {
  font-size: 11.5px; color: var(--muted); margin-top: 1px;
}

/* Variant: newsletter mini */
.rail-card--newsletter {
  background: linear-gradient(135deg, #f4f4f7 0%, #fafafe 100%);
}
.rail-card--newsletter .rail-card__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.rail-card--newsletter input {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: #ffffff;
}
.rail-card--newsletter input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(252, 216, 115, 0.25);
}
.rail-card--newsletter button {
  background: var(--navy);
  color: var(--gold);
  border: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.rail-card--newsletter button:hover { background: #1a2560; }

.toc-panel__heading {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.toc-panel__heading::before {
  content: "↓";
  margin-right: 8px;
  color: var(--red);
  font-size: 13px;
  transition: transform 200ms;
}
.toc-panel[data-collapsed="true"] .toc-panel__heading::before { transform: rotate(-90deg); }
.toc-panel__toggle {
  background: none;
  border: 0;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
}

.toc-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
@media (min-width: 1100px) { .toc-panel__list { border-left: 0; } }

.toc-panel[data-collapsed="true"] .toc-panel__list { display: none; }

.toc-panel__item {
  margin: 0;
  padding: 0;
}
.toc-panel__link {
  display: block;
  padding: 6px 12px 6px 14px;
  margin-left: -1px;
  color: var(--muted);
  text-decoration: none;
  border: 0;
  border-left: 2px solid transparent;
  transition: color 120ms, border-color 120ms, background 120ms;
  line-height: 1.4;
}
.toc-panel__link:hover {
  color: var(--navy);
  background: rgba(11, 19, 64, 0.04);
  border-left-color: var(--gold);
}
.toc-panel__link[data-active="true"] {
  color: var(--navy);
  font-weight: 700;
  border-left-color: var(--red);
}
.toc-panel__link--h3 {
  padding-left: 28px;
  font-size: 13px;
  color: #6b6b7d;
}

.toc-panel__progress {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-panel__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.toc-panel__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  width: 0%;
  transition: width 120ms ease-out;
}

/* --------------------------------------------------------------------- ToC mini-CTA (right rail filler) */

.toc-mini-cta {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2560 100%);
  color: #ffffff;
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 4px solid var(--gold);
  box-shadow: 0 4px 14px rgba(11, 19, 64, 0.12);
}
.toc-mini-cta__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.toc-mini-cta__title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 6px;
}
.toc-mini-cta__body {
  font-size: 13px;
  color: #c9d3ff;
  line-height: 1.45;
  margin-bottom: 12px;
}
.toc-mini-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  border: 0;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: transform 120ms, box-shadow 120ms;
}
.toc-mini-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(252, 216, 115, 0.4);
  background: #ffe9a8;
}
.toc-mini-cta__arrow {
  transition: transform 200ms ease;
}
.toc-mini-cta__btn:hover .toc-mini-cta__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------- sticky mini audio player (docks at top after scroll-past) */

.audio-mini {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 28;
  background: rgba(11, 19, 64, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border-bottom: 2px solid var(--gold);
  padding: 8px 0;
  transform: translateY(-100%);
  transition: transform 240ms ease-out;
  box-shadow: 0 4px 18px rgba(11, 19, 64, 0.22);
}
.audio-mini[data-visible="true"] { transform: translateY(0); }
.audio-mini__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 14px;
}
.audio-mini__btn {
  background: var(--gold); color: var(--navy);
  border: 0; border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.audio-mini__btn:hover { background: #ffe9a8; }
.audio-mini__btn svg { width: 14px; height: 14px; fill: currentColor; }
.audio-mini__title {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-mini__chapter {
  font-size: 12px;
  color: #c9d3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.audio-mini__progress {
  flex: 0 0 220px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
@media (max-width: 720px) {
  .audio-mini__progress { flex-basis: 100px; }
  .audio-mini__title { display: none; }
}
.audio-mini__progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--gold);
  border-radius: 2px;
  width: 0;
}
.audio-mini__time {
  font-size: 11px;
  color: #c9d3ff;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.audio-mini__close {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.audio-mini__close:hover { background: rgba(255, 255, 255, 0.16); }

/* When mini player is visible, move site header down to avoid overlap */
body[data-audio-mini-visible="true"] .site-header { top: 50px; }

/* --------------------------------------------------------------------- floating left rail (share + bookmark + back-to-top) */

.left-rail {
  position: fixed;
  /* Anchored to the body whitespace LEFT of the centered .post-with-toc (max-width 1240px).
     Formula: page-left-edge - button-width - 16px breathing room. */
  left: calc((100vw - 1240px) / 2 - 56px);
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 4px;
  z-index: 22;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease-out;
}
.left-rail[data-visible="true"] { opacity: 1; pointer-events: auto; }

.left-rail__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  transition: background 140ms, transform 140ms, border-color 140ms;
  position: relative;
}
.left-rail__btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
  transform: translateX(2px);
}
.left-rail__btn svg { width: 18px; height: 18px; fill: currentColor; }
.left-rail__btn[data-active="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.left-rail__label {
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--navy); color: #ffffff;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms;
}
.left-rail__btn:hover .left-rail__label { opacity: 1; }

.left-rail__separator {
  height: 1px; background: var(--line);
  margin: 4px 4px;
}

.left-rail__time {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  padding: 6px 4px;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Hide the floating rail on viewports where there's no safe whitespace LEFT
   of .post-with-toc (1240px wide + 40px button + 16px gap = needs >= 1352px). */
@media (max-width: 1380px) {
  .left-rail { display: none; }
}

/* --------------------------------------------------------------------- floating WhatsApp button */

.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(11, 19, 64, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(11, 19, 64, 0.16);
  background: #1FB855;
}
.whatsapp-float .wa-icon {
  width: 18px; height: 18px;
  fill: #ffffff;
}
.whatsapp-float .wa-label-full { display: inline; }
.whatsapp-float .wa-label-short { display: none; }
@media (max-width: 720px) {
  .whatsapp-float { padding: 12px 14px; bottom: 14px; right: 14px; }
  .whatsapp-float .wa-label-full { display: none; }
  .whatsapp-float .wa-label-short { display: inline; }
}

/* --------------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy);
  color: #c9d3ff;
  font-size: 14px;
  margin-top: 80px;
}
.site-footer a {
  color: #c9d3ff;
  text-decoration: none;
  border: 0;
  transition: color 120ms;
}
.site-footer a:hover { color: var(--gold); background: transparent; }

.site-footer__top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 48px;
}
@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
}

.site-footer__brand-block { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.site-footer__logo-mark {
  width: 44px; height: 44px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px;
}
.site-footer__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.site-footer__brand-name {
  color: #ffffff; font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em;
}
.site-footer__brand-tag {
  color: #8a96c5; font-size: 12.5px; font-weight: 500;
  margin-top: 2px;
}
.site-footer__brand-spine {
  color: var(--gold);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.01em;
}
.site-footer__credentials {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0;
}
.site-footer__cred-pill {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(252, 216, 115, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 920px) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}
.site-footer__col {
  display: flex; flex-direction: column; gap: 8px;
}
.site-footer__col-heading {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.site-footer__col a {
  font-size: 13.5px;
  font-weight: 500;
  padding: 2px 0;
}

.site-footer__col--contact { gap: 12px; }
.site-footer__contact-item {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 0;
}
.site-footer__contact-icon { font-size: 18px; }
.site-footer__contact-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a96c5;
}
.site-footer__contact-value {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.site-footer__contact-cta {
  margin-top: 8px;
  display: inline-flex; align-items: center;
  background: var(--gold);
  color: var(--navy) !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  align-self: flex-start;
}
.site-footer__contact-cta:hover { background: #ffe9a8; color: var(--navy) !important; }

.site-footer__newsletter {
  background: rgba(252, 216, 115, 0.06);
  border-top: 1px solid rgba(252, 216, 115, 0.18);
  border-bottom: 1px solid rgba(252, 216, 115, 0.18);
}
.site-footer__newsletter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.site-footer__newsletter-text {
  color: #ffffff;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 300px;
}
.site-footer__newsletter-text strong { color: var(--gold); font-weight: 700; }
.site-footer__newsletter-text span { font-size: 13px; color: #c9d3ff; }
.site-footer__newsletter-form {
  display: flex; gap: 8px;
  flex: 1 1 320px;
  max-width: 480px;
}
.site-footer__newsletter-form input {
  flex: 1;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(252, 216, 115, 0.3);
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
}
.site-footer__newsletter-form input::placeholder { color: #8a96c5; }
.site-footer__newsletter-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}
.site-footer__newsletter-form button {
  background: var(--gold);
  color: var(--navy);
  border: 0;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms;
}
.site-footer__newsletter-form button:hover { background: #ffe9a8; }

.site-footer__bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-size: 12.5px;
  color: #8a96c5;
}
.site-footer__copyright { margin: 0; }
.site-footer__legal { display: flex; gap: 16px; }
.site-footer__legal a { font-size: 12.5px; }
.site-footer__social { display: flex; gap: 8px; }
.site-footer__social a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}
.site-footer__social a:hover {
  background: var(--gold);
  color: var(--navy);
}

/* --------------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .post-main { padding: 32px 18px 96px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  body { font-size: 16px; }
  .persona-picker__grid { grid-template-columns: 1fr; }
  .site-header__nav a { margin-left: 12px; font-size: 14px; }
}

/* --------------------------------------------------------------------- print stylesheet */

@media print {
  /* Strip UI chrome — keep only content */
  .announce-bar,
  .site-header,
  .mobile-nav,
  .persona-picker,
  .persona-cta,
  .toc-column,
  .toc-panel,
  .toc-mini-cta,
  .audio-card,
  .whatsapp-float,
  .copy-btn,
  .mode-toggle__buttons,
  .site-footer__newsletter,
  .site-footer__contact-cta,
  .site-footer__social {
    display: none !important;
  }

  /* Show all mode-toggle panels (don't hide content based on persona) */
  .mode-toggle__panel { display: block !important; }
  .mode-toggle { border: 0 !important; }
  .mode-toggle__panel + .mode-toggle__panel {
    border-top: 1px solid #ccc;
    padding-top: 12px;
    margin-top: 12px;
  }

  /* Open all code accordions on print */
  .code-accordion { border: 0 !important; }
  details { display: block !important; }
  details > * { display: block !important; }
  .code-accordion__summary { font-weight: 700; padding: 0 0 6px 0; background: transparent !important; }
  .code-accordion__summary::before { display: none; }

  /* Single-column layout (collapse the sticky ToC grid) */
  .post-with-toc { grid-template-columns: 1fr !important; }

  /* Typography for print */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  h1 { font-size: 22pt; page-break-after: avoid; }
  h2 { font-size: 16pt; page-break-after: avoid; margin-top: 18pt; }
  h3 { font-size: 13pt; page-break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }

  /* Code blocks: print-friendly colours */
  pre {
    background: #f3f3f3 !important;
    color: #111111 !important;
    border: 1px solid #ddd;
    page-break-inside: avoid;
    font-size: 9pt;
    line-height: 1.4;
  }
  pre code, pre .token { color: #111111 !important; }

  /* Tables: full width, no scroll */
  table { display: table !important; overflow: visible !important; page-break-inside: avoid; }

  /* Figures: don't break across pages */
  figure { page-break-inside: avoid; }
  figure img { max-width: 80% !important; }

  /* Add URL after links so the printed version is referenceable */
  article.post a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* But not for inline-formatted code */
  article.post a[href^="http"] code::after { content: ""; }

  /* Footer: only show brand line + URL */
  .site-footer { background: transparent !important; color: #000 !important; padding: 12pt 0 !important; }
  .site-footer__top, .site-footer__cols, .site-footer__credentials,
  .site-footer__contact-item, .site-footer__newsletter, .site-footer__legal { display: none !important; }
  .site-footer__bottom {
    display: block !important;
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 8pt !important;
  }
  .site-footer__brand-spine {
    display: block !important;
    text-align: center;
    color: #000 !important;
    font-style: italic;
  }

  /* Page setup */
  @page {
    margin: 0.6in;
    size: letter;
  }
  @page :first { margin-top: 0.4in; }
}

/* --------------------------------------------------------------------- share-bar (end of article) */

.share-bar {
  margin: 48px auto 32px;
  max-width: var(--content-max);
  padding: 24px 28px;
  background: linear-gradient(135deg, #fefce8 0%, #fff8e1 100%);
  border: 1px solid #f1c750;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(252, 216, 115, 0.18);
}
.share-bar__heading {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.share-bar__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 140ms, box-shadow 140ms, background 140ms;
  color: #ffffff;
  background: var(--navy);
}
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  text-decoration: none;
}
.share-btn svg { flex-shrink: 0; }

.share-btn--whatsapp { background: #25D366; }
.share-btn--telegram { background: #229ED9; }
.share-btn--x        { background: #000000; }
.share-btn--linkedin { background: #0A66C2; }
.share-btn--facebook { background: #1877F2; }
.share-btn--reddit   { background: #FF4500; }
.share-btn--email    { background: #6b7280; }
.share-btn--copy     { background: var(--navy); }
.share-btn--copy.is-copied { background: #16a34a; }
.share-btn--native   { background: var(--gold); color: var(--navy); font-weight: 800; }

.share-bar__hint {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* On mobile, hide all per-platform buttons except WhatsApp + the native-share
   button (which opens the OS share sheet — covers everything else cleanly). */
@media (max-width: 600px) {
  .share-btn--telegram,
  .share-btn--x,
  .share-btn--linkedin,
  .share-btn--facebook,
  .share-btn--reddit,
  .share-btn--email,
  .share-btn--copy {
    display: none;
  }
  .share-btn--native[hidden] { display: none; }
  .share-btn span { font-size: 14px; }
}

/* --------------------------------------------------------------------- language switcher (header) */

.lang-switcher {
  position: relative;
  margin-right: 12px;
  font-family: var(--font-sans);
}
.lang-switcher__current {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  transition: background 140ms;
}
.lang-switcher__current::-webkit-details-marker { display: none; }
.lang-switcher__current::marker { display: none; }
.lang-switcher__current:hover {
  background: var(--soft);
}
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  padding: 6px 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.lang-switcher__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background 120ms;
}
.lang-switcher__option:last-child { border-bottom: 0; }
.lang-switcher__option:hover {
  background: var(--soft);
  text-decoration: none;
}
.lang-switcher__option.current {
  background: rgba(252, 216, 115, 0.18);
  font-weight: 700;
}
.lang-switcher__native {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.lang-switcher__english {
  font-size: 11.5px;
  color: var(--muted);
}

/* Mobile language switcher: keep visible but compact (icon-only summary).
   On mobile the user still needs a way to switch language — hiding it
   strands non-EN readers who landed here from a Google SERP in their
   own language. Compact form: globe icon + ISO code, dropdown menu
   on tap. */
@media (max-width: 900px) {
  .lang-switcher {
    margin-left: 4px;
    margin-right: 4px;
  }
  .lang-switcher__current {
    padding: 6px 10px;
    font-size: 13px;
  }
  /* Hide the long native language name on mobile, keep just the globe + ISO */
  .lang-switcher__current::before {
    content: "🌐";
    margin-right: 2px;
  }
  /* Truncate the visible label to first 4 chars of native + chevron */
  .lang-switcher__current {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Drop the inline globe emoji from the summary text since we have ::before */
  .lang-switcher__current { font-size: 13px; }
  /* Dropdown menu spans wider on mobile for tap targets */
  .lang-switcher__menu {
    right: 0;
    left: auto;
    min-width: 180px;
  }
  html[dir="rtl"] .lang-switcher__menu {
    right: auto;
    left: 0;
  }
}

/* =====================================================================
   HEALTHLINE-STYLE EDITORIAL LAYER
   ===================================================================== */

/* ---------- Byline strip (after H1, before trust strip) ---------- */
.kd-byline {
  margin: 12px 0 22px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fafbff 0%, #f3f6fb 100%);
  border: 1px solid #e3e8f3;
  border-left: 4px solid var(--gold, #fcd873);
  border-radius: 12px;
  font-size: 14px;
  color: #2c3754;
}
.kd-byline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.kd-byline__row--primary {
  border-bottom: 1px dashed #d8dfee;
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.kd-byline__row--secondary {
  font-size: 13px;
  color: #5a6680;
}
.kd-byline__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kd-byline__by {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6680;
  font-weight: 600;
  margin-right: 4px;
}
.kd-byline__author-name {
  color: var(--navy, #0b1340);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted rgba(11,19,64,0.4);
}
.kd-byline__author-name:hover {
  border-bottom-color: var(--gold, #fcd873);
}
.kd-byline__author-meta {
  font-size: 12px;
  color: #5a6680;
  margin-top: 1px;
}
.kd-byline__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}
.kd-byline__date,
.kd-byline__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.kd-byline__date svg,
.kd-byline__read svg {
  flex-shrink: 0;
  opacity: 0.65;
}
.kd-byline__date strong,
.kd-byline__read strong {
  color: var(--navy, #0b1340);
}
.kd-byline__date--updated {
  color: #1f5430;
  background: #ddf5e3;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.kd-byline__date--updated svg { opacity: 0.85; }
.kd-byline__date--updated strong { color: #1f5430; }
.kd-byline__date--orig small {
  font-size: 12px;
  color: #5a6680;
  opacity: 0.85;
}
.kd-byline__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-left: auto;
}
.kd-byline__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #d8dfee;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  color: var(--navy, #0b1340);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.15s ease;
}
.kd-byline__link:hover {
  background: var(--navy, #0b1340);
  color: #fff;
  border-color: var(--navy, #0b1340);
}
.kd-byline__link svg { opacity: 0.7; }
.kd-byline__link:hover svg { opacity: 1; }

/* RTL support for Arabic */
html[lang^="ar"] .kd-byline {
  border-left: none;
  border-right: 4px solid var(--gold, #fcd873);
}
html[lang^="ar"] .kd-byline__meta,
html[lang^="ar"] .kd-byline__links {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 720px) {
  .kd-byline__row { gap: 8px 12px; }
  .kd-byline__meta { margin-left: 0; width: 100%; }
  .kd-byline__links { margin-left: 0; width: 100%; }
}

/* ---------- Editorial footer (Sources + History tabs) ---------- */
.kd-editorial-footer {
  margin: 40px 0 28px;
  background: #fafbff;
  border-radius: 0 0 14px 14px;
  border: 1px solid #e3e8f3;
  border-top: 3px solid var(--gold, #fcd873);
}
.kd-editorial-footer__tabs {
  display: flex;
  border-bottom: 1px solid #e3e8f3;
  background: #fff;
}
.kd-editorial-footer__tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #5a6680;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  transition: all 0.15s ease;
}
.kd-editorial-footer__tab:hover {
  color: var(--navy, #0b1340);
  background: #f3f6fb;
}
.kd-editorial-footer__tab[aria-selected="true"] {
  color: var(--navy, #0b1340);
  border-bottom-color: var(--gold, #fcd873);
  background: #fafbff;
}
.kd-editorial-footer__count {
  margin-left: 4px;
  color: #8593b3;
  font-weight: 500;
}
.kd-editorial-footer__panel {
  padding: 22px 24px 26px;
}
.kd-editorial-footer__panel[hidden] { display: none; }
.kd-editorial-footer__intro {
  font-size: 13.5px;
  color: #4a5470;
  margin: 0 0 18px;
  font-style: italic;
  line-height: 1.55;
}

/* ---------- Sources list ---------- */
.kd-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: kdsource;
}
.kd-sources__item {
  position: relative;
  padding: 14px 16px 14px 50px;
  background: #fff;
  border: 1px solid #e3e8f3;
  border-radius: 10px;
  counter-increment: kdsource;
}
.kd-sources__item::before {
  content: counter(kdsource);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy, #0b1340);
  color: var(--gold, #fcd873);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-sources__title {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 4px;
}
.kd-sources__title a {
  color: var(--navy, #0b1340);
  text-decoration: none;
  border-bottom: 1px dotted rgba(11,19,64,0.3);
}
.kd-sources__title a:hover {
  border-bottom-color: var(--gold, #fcd873);
}
.kd-sources__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: #5a6680;
  margin-bottom: 6px;
}
.kd-sources__publisher { font-weight: 600; }
.kd-sources__kind {
  background: #eef2fa;
  color: #4a5470;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
}
.kd-sources__why {
  font-size: 13px;
  line-height: 1.55;
  color: #3a4360;
}

/* ---------- History list ---------- */
.kd-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kd-history__item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e3e8f3;
  border-radius: 10px;
}
.kd-history__date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy, #0b1340);
  border-right: 2px solid var(--gold, #fcd873);
  padding-right: 14px;
  align-self: start;
}
.kd-history__summary { font-size: 14px; margin-bottom: 5px; }
.kd-history__rationale { font-size: 13px; line-height: 1.55; color: #3a4360; margin-bottom: 6px; }
.kd-history__by { font-size: 11.5px; color: #5a6680; font-style: italic; }

@media (max-width: 600px) {
  .kd-history__item { grid-template-columns: 1fr; }
  .kd-history__date {
    border-right: none;
    border-bottom: 2px solid var(--gold, #fcd873);
    padding-right: 0;
    padding-bottom: 6px;
  }
}

/* ---------- Modals (Review Process / Author / Why Updated) ---------- */
.kd-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kd-modal[hidden] { display: none; }
.kd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,19,64,0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.kd-modal__dialog {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  border: 1px solid #e3e8f3;
  border-top: 4px solid var(--gold, #fcd873);
  animation: kdModalIn 0.18s ease-out;
}
@keyframes kdModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.kd-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 1px solid #e3e8f3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--navy, #0b1340);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.kd-modal__close:hover {
  background: var(--navy, #0b1340);
  color: #fff;
  border-color: var(--navy, #0b1340);
}
.kd-modal__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--navy, #0b1340);
  margin: 0 0 14px;
  padding-right: 40px;
  line-height: 1.25;
}
.kd-modal__intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: #3a4360;
  margin: 0 0 18px;
}
.kd-modal__cta {
  display: inline-block;
  margin-top: 14px;
  background: var(--navy, #0b1340);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  transition: background 0.15s ease;
}
.kd-modal__cta:hover { background: #161e52; }

/* Review Process stages */
.kd-modal__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kd-modal__stage {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: #fafbff;
  border: 1px solid #e3e8f3;
  border-radius: 10px;
}
.kd-modal__stage-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold, #fcd873);
  color: var(--navy, #0b1340);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-modal__stage-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy, #0b1340);
  margin-bottom: 3px;
}
.kd-modal__stage-body {
  font-size: 13px;
  line-height: 1.55;
  color: #3a4360;
}

/* Author Bio modal */
.kd-modal__author-card {
  background: linear-gradient(180deg, #fafbff 0%, #eef2fa 100%);
  border: 1px solid #e3e8f3;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.kd-modal__author-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy, #0b1340);
  margin-bottom: 2px;
}
.kd-modal__author-title {
  font-size: 13px;
  color: #5a6680;
  margin-bottom: 8px;
}
.kd-modal__author-creds {
  font-size: 12.5px;
  color: #3a4360;
  line-height: 1.5;
  font-style: italic;
}
.kd-modal__author-bio {
  font-size: 14px;
  line-height: 1.65;
  color: #2c3754;
  margin: 0 0 16px;
}
.kd-modal__author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kd-modal__author-link {
  background: #fafbff;
  border: 1px solid #d8dfee;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy, #0b1340);
  text-decoration: none;
}
.kd-modal__author-link:hover {
  background: var(--navy, #0b1340);
  color: #fff;
  border-color: var(--navy, #0b1340);
}

/* Why Updated modal — revision list */
.kd-modal__revs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kd-modal__rev {
  padding: 12px 14px;
  background: #fafbff;
  border: 1px solid #e3e8f3;
  border-radius: 10px;
  border-left: 3px solid var(--gold, #fcd873);
}
.kd-modal__rev-date {
  font-size: 11.5px;
  font-weight: 700;
  color: #5a6680;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kd-modal__rev-summary {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--navy, #0b1340);
}
.kd-modal__rev-rationale {
  font-size: 13px;
  line-height: 1.55;
  color: #3a4360;
  margin-bottom: 5px;
}
.kd-modal__rev-by {
  font-size: 11.5px;
  color: #5a6680;
  font-style: italic;
}

/* RTL support for modals */
html[lang^="ar"] .kd-modal__close { right: auto; left: 14px; }
html[lang^="ar"] .kd-modal__title { padding-right: 0; padding-left: 40px; }
html[lang^="ar"] .kd-modal__rev { border-left: none; border-right: 3px solid var(--gold, #fcd873); }

/* Lock body scroll when any modal is open */
body.kd-modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .kd-modal__dialog { padding: 24px 20px 20px; max-height: 92vh; }
  .kd-modal__title { font-size: 20px; }
}