/* ============================================================
   Blog Post A — Editorial Trust
   /blog/[slug]/ · Long-form editorial reading experience.
   BEM. Mobile-first. Breakpoints: 768, 1024, 1280.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy:        #0A2A61;
  --navy-2:      #0A2A61;
  --ink:         #1A1A2E;
  --ink-2:       #3A4252;
  --ink-3:       #5B6478;
  --line:        #E3E6EC;
  --paper:       #FFFFFF;
  --paper-tint:  #EFEFEF;
  --accent:      #4eb21e;
  --gold:        #4eb21e;
  --ok:          #4eb21e;
  --white:       #FFFFFF;

  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  --gutter-mobile: 20px;
  --gutter-tablet: 32px;
  --gutter-desk:   56px;

  --reading-max:  none;
  --layout-max:   none;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Reading progress bar --------------------------------------------------- */
/**
#ssd-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  transition: width 100ms linear;
  pointer-events: none;
}
**/

/* ---------- Eyebrow ---------- */
.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--gold   { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 14px 22px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, border-color 160ms;
  text-align: center;
}
.btn--uppercase     { text-transform: uppercase; }
.btn--accent        { background: var(--accent); color: var(--white); }
.btn--accent:hover  { background: #4eb21e; }
.btn--block         { display: block; width: 100%; }

/* ---------- Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
  width: 100%;
  /* background: var(--white);
  border-bottom: 1px solid var(--line); */
  padding: 13px 0;  /* horizontal padding from .ssd-page-wrap */
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb__link {
  color: var(--ink-2);
  text-decoration: none;
}
.breadcrumb__link:hover { color: var(--accent); }
.breadcrumb__sep {
  margin: 0 8px;
  color: #B7BCC6;
  font-size: 11px;
}
.breadcrumb__current {
  color: var(--ink);
  font-weight: 600;
}

/* breadcrumb horizontal padding is handled by .ssd-page-wrap class */

/* ---------- Article wrapper ---------- */
.post { background: var(--paper); }

/* ---------- 2 · Post header (H1 + byline) ---------- */
.post__header {
  padding: 48px 0 32px;
}
.post__category {
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.post__category-rule { width: 28px; height: 1px; background: currentColor; display: inline-block; }
.post__category a    { color: inherit; text-decoration: none; }
.post__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.post__excerpt {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Byline — .ba-byline matches eeat-byline-blog-a.php */
.ssd-wrap .ba-byline {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column; /* always column — dates sit below people */
  gap: 16px;
}

/* People row — authors and reviewers side by side */
.ba-byline__people {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Single person row: badge + meta */
.ba-byline__person {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Initials badge */
.ba-byline__badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 3px;
}

/* Meta: label + name + title */
.ba-byline__meta   { line-height: 1.3; }
.ba-byline__label  {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-2);
  font-weight: 700;
}
.ba-byline__label--legal { color: var(--accent); }
.ba-byline__name   {
  display: block;
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.ba-byline__name:hover { border-bottom-color: var(--accent); color: var(--accent); }
.ba-byline__title  { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ba-byline__bar    {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}

/* Dates column */
.ba-byline__dates      { font-size: 12.5px; color: var(--ink-2); }
.ba-byline__published  { margin: 0 0 4px; }
.ba-byline__updated    { margin: 0 0 4px; color: var(--ink); }
.ba-byline__readtime   { margin: 0; }

@media (min-width: 768px) {
  .post__header      { padding: 56px 0 32px; }
  .post__title       { font-size: 44px; }
  /* byline stays column — people become a row, dates sit below */
  .ba-byline         { flex-direction: column; gap: 16px; }
  .ba-byline__people { flex-direction: row; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
  /* dates below people — left-aligned, separated by a faint line */
  .ba-byline__dates  {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 12px;
    /* border-top: 1px solid var(--line); */
    text-align: left;
  }
  .ba-byline__published { margin: 0; }
  .ba-byline__updated   { margin: 0; }
  .ba-byline__readtime  { margin: 0; }
}
@media (min-width: 1280px) {
  .post__header { padding: 64px 0 40px; }
  .post__title  { font-size: 52px; letter-spacing: -0.035em; }
  .post__excerpt{ font-size: 19px; }
}

/* ---------- 2b · Featured image ---------- */
.post__featured {
  margin: 0;
  padding: 0 0 32px;
}
.post__featured-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
}
.post__featured-caption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: 12.5px;
  color: var(--ink-2);
  font-style: italic;
}

@media (min-width: 768px)  { .post__featured { padding: 0 0 40px; } }
@media (min-width: 1280px) { .post__featured { padding: 0 0 40px; } }

/* ---------- 3 · Key Takeaways (.ssd-key-facts — output by key-facts.php) ---------- */
section.ssd-key-facts {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgb(255, 255, 255); /** #F4F6FA; **/
  padding: 28px 26px 28px 30px;
  max-width: 100%;
  margin: 0 0 32px;
  position: relative;
}
/* Short accent mark — top-left only, not full height */
section.ssd-key-facts::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 4px;
  height: 48px;
  background: var(--accent);
  border-radius: 4px 0 0 0;
}
section.ssd-key-facts h2 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--navy);
}
section.ssd-key-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
section.ssd-key-facts ul li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
  counter-increment: key-facts-counter;
}
section.ssd-key-facts ul {
  counter-reset: key-facts-counter;
}
/* Numbered navy square box — white number, no border-radius */
section.ssd-key-facts ul li::before {
  content: counter(key-facts-counter);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: rgb(11, 31, 61);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  border-radius: 0;
  margin-top: 1px;
}

@media (min-width: 768px) {
  section.ssd-key-facts { padding: 32px 40px 32px 36px; }
  section.ssd-key-facts h2 { font-size: 13px; }
  section.ssd-key-facts ul li { font-size: 15px; }
}
@media (min-width: 1280px) {
  section.ssd-key-facts { margin-bottom: 40px; }
}

/* ---------- 4 · Table of Contents (.ssd-toc — output by toc.php) ---------- */
.ssd-toc {
  background:#EFEFEF;/** #F4F6FA; **/
  border: 1px solid #C8D4E8;
  border-radius: 4px;
  padding: 22px 24px;
  max-width: 100%;
  margin: 0 0 32px;
  position: relative;
}
/* Short navy accent mark — top-left only */
.ssd-toc::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 4px;
  height: 48px;
  /* background: var(--navy); */
  border-radius: 4px 0 0 0;
}
.ssd-toc__eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ssd-toc__list,
.ssd-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ssd-toc__item {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.ssd-toc__num {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  min-width: 0;
  padding: 0;
}
.ssd-toc__link {
  font-size: 14.5px;
  color: var(--navy-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  line-height: 1.45;
}
.ssd-toc__link:hover { border-bottom-color: var(--accent); color: var(--accent); }

@media (min-width: 768px) {
  .ssd-toc { padding: 24px 30px; margin-bottom: 40px; }
}
@media (min-width: 1280px) {
  .ssd-toc { margin-bottom: 48px; }
}

/* ---------- 5 · Pillar CTA (.ssd-pillar-cta — output by pillar-cta-blog-a.php) ----- */
.ssd-pillar-cta {
  padding: 0 0 40px;
}
.ssd-pillar-cta__inner {
  background: var(--navy);
  color: var(--white);
  padding: 28px 26px;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ssd-pillar-cta__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.ssd-pillar-cta__lede {
  margin: 0;
  font-size: 15px;
  color: #D8DDE8;
  line-height: 1.6;
}
.ssd-pillar-cta__copy { flex: 1; }
.ssd-pillar-cta__btn {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 13px 24px;
  /* white-space: nowrap; */
  align-self: flex-start;
  transition: background 150ms;
}
.ssd-pillar-cta__btn:hover { background: #4eb21e; color: var(--white); }

@media (min-width: 768px) {
  .ssd-pillar-cta { padding: 0 0 48px; }
  .ssd-pillar-cta__inner { padding: 32px 36px 28px; }
  .ssd-pillar-cta__lede  { font-size: 16px; margin-bottom: 22px; }
  /* keep flex-direction: column — button stays bottom-right */
}
@media (min-width: 1280px) { .ssd-pillar-cta { padding: 0 0 48px; } }

/* ---------- 6 · Body (rich-text) ---------- */
.post__body {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 48px 0;
  max-width: 100%;
  margin: 0;
  /* Item 5: horizontal padding inside body column */
  padding-left: 0;
  padding-right: 0;
}
.rich-text {
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.7;
}
.rich-text > :first-child { margin-top: 0; }
.rich-text > p:first-child { font-size: 18px; color: var(--ink); margin-bottom: 24px; }
.rich-text h2 { margin: 36px 0 14px; font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; line-height: 1.2; padding-top: 12px; border-top: 1px solid var(--line); }
.rich-text h2:first-of-type { border-top: none; padding-top: 0; }
.rich-text h3 { margin: 24px 0 10px; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.rich-text p  { margin: 14px 0; }
.rich-text a  { color: var(--navy-2); border-bottom: 1px solid var(--line); text-decoration: none; }
.rich-text a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.rich-text ul, .rich-text ol { padding-left: 0; list-style: none; margin: 16px 0; }
.rich-text ul li, .rich-text ol li {
  position: relative;
  padding-left: 32px;
  margin: 10px 0;
}
.rich-text ul li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.rich-text ol { counter-reset: post-counter; }
.rich-text ol li { counter-increment: post-counter; }
.rich-text ol li::before {
  content: counter(post-counter);
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.rich-text figure  { margin: 32px 0; }
.rich-text figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.rich-text figcaption { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--gold); font-size: 13px; color: var(--ink-2); font-style: italic; }
.rich-text blockquote { margin: 24px 0; padding: 4px 20px; border-left: 4px solid var(--navy); font-style: italic; font-size: 17px; color: var(--ink); }
.rich-text table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0; }
.rich-text thead tr { background: var(--paper-tint); border-bottom: 2px solid var(--navy); }
.rich-text th, .rich-text td { padding: 10px 14px; text-align: left; color: var(--ink); }
.rich-text tbody tr { border-bottom: 1px solid var(--line); }

@media (min-width: 768px)  { .post__body { padding: 56px 0; } .rich-text h2 { font-size: 30px; } }
@media (min-width: 1280px) { .post__body { padding: 64px 0; } .rich-text h2 { font-size: 32px; letter-spacing: -0.035em; } .rich-text { font-size: 16.5px; } .rich-text > p:first-child { font-size: 19px; } }

/* ---------- Mid-article CTA (rendered by shortcode in body) ---------- */
.mid-cta {
  margin: 32px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  position: relative;
}
.mid-cta__accent  { position: absolute; top: -1px; left: -1px; width: 4px; height: 60px; background: var(--gold); }
.mid-cta__eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.mid-cta__row     { display: flex; flex-direction: column; gap: 14px; }
.mid-cta__copy    { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; flex: 1; }
.mid-cta__btn {
  font-size: 12.5px;
  padding: 12px 22px;
  white-space: nowrap;
  align-self: flex-start;
  background: var(--accent);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  display: inline-block;
  transition: background 150ms, color 150ms;
}
.mid-cta__btn:hover,
.mid-cta__btn:focus {
  background: #4eb21e; /* darker accent on hover */
  color: #ffffff !important;
}

@media (min-width: 768px) { .mid-cta { padding: 24px 28px; } .mid-cta__row { flex-direction: row; align-items: center; gap: 24px; } .mid-cta__btn { align-self: auto; } }

/* ---------- 7 · Author bios ---------- */
.bios {
  background: var(--paper-tint);
  border-top: 1px solid var(--line);
  padding: 48px var(--gutter-mobile);
}
.bios__head  { max-width: none; margin: 0 0 24px; }
.bios__title { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.bios__grid  { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }

.bio         {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 24px 22px;
  display: flex; gap: 18px;
}
.bio__photo  {
  flex-shrink: 0;
  width: 80px; height: 100px;
  background: var(--tone, #3D4A7A);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.bio__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bio__photo-initials { font-size: 32px; font-weight: 800; color: rgba(255, 255, 255, 0.25); letter-spacing: -0.025em; }
.bio__photo-tag {
  position: absolute; bottom: 6px; left: 6px;
  font-size: 9px; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
}

.bio__body   { flex: 1; }
.bio__role   { margin: 0; font-size: 10px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; }
.bio__name   { margin: 4px 0 4px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.012em; }
.bio__title  { margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.bio__creds  { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.bio__blurb  { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.bio__link   {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--navy-2); font-weight: 700;
  border-bottom: 1px solid var(--navy-2);
  padding-bottom: 1px;
  text-decoration: none;
}

@media (min-width: 768px)  { .bios { padding: 56px var(--gutter-tablet); } .bios__title { font-size: 28px; } .bio { padding: 28px 30px; gap: 20px; } .bio__photo { width: 100px; height: 120px; } .bio__photo-initials { font-size: 44px; } }
@media (min-width: 1024px) { .bios__grid { grid-template-columns: 1fr 1fr; gap: 20px; } .bios__title { font-size: 30px; } }
@media (min-width: 1280px) { .bios { padding: 64px var(--gutter-desk); } }

/* ---------- 8 · FAQ (.ssd-faq — output by faq-editorial.php) ---------- */
.ssd-faq {
  background: var(--white);
  padding: 48px 0;
  max-width: 100%;
  margin: 0;
}
.ssd-faq-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ssd-faq h2 {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Bootstrap accordion overrides */
.ssd-faq .accordion-item {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0 !important;
  background: transparent;
}
.ssd-faq .accordion-item:first-of-type {
  border-top: 1px solid var(--line);
}
.ssd-faq .accordion-button {
  background: var(--white);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  padding: 18px 0;
  box-shadow: none;
  border-radius: 0 !important;
}
.ssd-faq .accordion-button:not(.collapsed) {
  background: var(--white);
  color: var(--accent);
  box-shadow: none;
}
.ssd-faq .accordion-button::after {
  filter: none;
  background-size: 16px;
  color: var(--accent);
}
.ssd-faq .accordion-button:not(.collapsed)::after {
  filter: none;
}
.ssd-faq .accordion-body {
  padding: 0 0 18px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.ssd-faq .accordion-collapse {
  border: none;
}

@media (min-width: 768px)  { .ssd-faq { padding: 56px 0; } .ssd-faq h2 { font-size: 28px; } .ssd-faq .accordion-button { font-size: 16.5px; } }
@media (min-width: 1280px) { .ssd-faq { padding: 64px 0; } .ssd-faq h2 { font-size: 30px; } }

/* ---------- 9 · Conversion ---------- */
.conversion {
  background: var(--navy);
  color: var(--white);
  padding: 56px var(--gutter-mobile);
}
.conversion__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
.conversion__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.conversion__lede  { margin: 18px 0 0; font-size: 15.5px; color: #C9D2E3; line-height: 1.65; max-width: 480px; }
.conversion__phone { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.conversion__phone-label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: #9DA9C2; font-weight: 700; }
.conversion__phone-num   { font-size: 26px; font-weight: 800; color: var(--white); text-decoration: none; letter-spacing: -0.02em; }

.form {
  background: var(--white);
  color: var(--ink);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 700; }
.form__req   { color: var(--accent); }
.form__input {
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 15px;
  background: var(--paper);
  width: 100%;
}
.form__input--textarea { resize: none; }
.form__input:focus     { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.form__submit { margin-top: 4px; border: none; }
.form__legal  { margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }

@media (min-width: 768px)  { .conversion { padding: 64px var(--gutter-tablet); } .form { padding: 32px; } }
@media (min-width: 1024px) { .conversion__inner { grid-template-columns: 1fr 1fr; column-gap: 56px; } .conversion__title { font-size: 30px; } .conversion__phone-num { font-size: 30px; } }
@media (min-width: 1280px) { .conversion { padding: 72px var(--gutter-desk); } .conversion__title { font-size: 34px; letter-spacing: -0.035em; } }

/* ---------- 10 · Related Insights (.ssd-related — output by related-posts.php) ---------- */
.ssd-related {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 3.5rem var(--gutter-mobile);
}
.ssd-related__inner   { max-width: none; margin: 0; }
.ssd-related__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.ssd-related__heading {
  margin: 0 0 28px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ssd-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ssd-related__card {
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 150ms, box-shadow 150ms;
}
.ssd-related__card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(11,31,61,.08);
}
.ssd-related__card-link {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  gap: 8px;
}
.ssd-related__cat {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ssd-related__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 1;
}
.ssd-related__excerpt {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.ssd-related__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ssd-related__time { font-size: 12px; color: var(--ink-3); }
.ssd-related__cta  { font-size: 12px; font-weight: 700; color: var(--navy-2); }
.ssd-related__card:hover .ssd-related__cta { color: var(--accent); }

@media (min-width: 576px) { .ssd-related__grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 768px)  { .ssd-related { padding: 56px var(--gutter-tablet); } .ssd-related__heading { font-size: 26px; } }
@media (min-width: 1024px) { .ssd-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ssd-related { padding: 60px var(--gutter-desk); } }

/* ---------- Legal disclaimer bar --------------------------------------------------- */
.ssd-disclaimer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 16px var(--gutter-mobile);
}
.ssd-disclaimer__inner {
  max-width: none;
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
}
.ssd-disclaimer__inner strong { color: var(--ink); }

@media (min-width: 768px)  { .ssd-disclaimer { padding: 16px var(--gutter-tablet); } }
@media (min-width: 1280px) { .ssd-disclaimer { padding: 16px var(--gutter-desk); } }

/* ---------- Sticky mobile CTA bar -------------------------------------------------- */
.ssd-sticky-cta {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: 56px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.ssd-sticky-cta__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.15);
  transition: background 150ms;
}
.ssd-sticky-cta__call:hover { background: var(--navy-2); color: var(--white); }
.ssd-sticky-cta__review {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1.4;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 150ms;
}
.ssd-sticky-cta__review:hover { background: #4eb21e; color: var(--white); }

/* Hide sticky bar on desktop — it's mobile/tablet only */
@media (min-width: 1024px) {
  .ssd-sticky-cta { display: none; }
}
/* Add bottom padding to page on mobile so sticky bar doesn't cover content */
@media (max-width: 1023px) {
  body { padding-bottom: 56px; }
}

/* ============================================================
   Full-width page wrapper
   Aligns all content edges using the same gutter padding on all sides
   ============================================================ */

.ssd-page-wrap {
  width: 100%;
  /* padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile); */
}
@media (min-width: 1024px) {
  .ssd-page-wrap {
    /* padding-left: var(--gutter-tablet);
    padding-right: var(--gutter-tablet); */
  }
}
@media (min-width: 1280px) {
  .ssd-page-wrap {
    /* padding-left: var(--gutter-desk);
    padding-right: var(--gutter-desk); */
  }
}

/* ============================================================
   Two-column post layout
   Left (main): 65%  Right (sidebar): 35% sticky TOC
   Header is removed so sticky offset is from top of viewport
   ============================================================ */

.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "sidebar";
  gap: 0;
}

.post-layout__main    { grid-area: main; min-width: 0; }
.post-layout__sidebar { grid-area: sidebar; }

/* Sticky TOC — no header, so top: 24px from viewport */
.post-layout__sidebar-inner {
  /* inner div handles overflow scroll only — stickiness is on .post-layout__sidebar */
  max-height: calc(100vh - var(--header-h, 60px) - 32px);
  overflow-y: auto;
  padding: 0 4px 0 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.post-layout__sidebar-inner::-webkit-scrollbar { width: 4px; }
.post-layout__sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.post-layout__sidebar-inner::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* On desktop, activate two-column layout */
@media (min-width: 1024px) {
  .post-layout {
    grid-template-columns: 65% 35%;
    grid-template-areas: "main sidebar";
    gap: 0 32px;
    /* align-items must be stretch so the sidebar column is as tall as main */
    align-items: stretch;
  }

  /* The sidebar COLUMN is position:sticky — this is the key fix.
     align-self:start + position:sticky on a grid child works correctly.
     The column stretches to full row height but sticks at the top. */
  .post-layout__sidebar {
    position: sticky;
    top: calc(var(--header-h, 60px) + 16px);
    align-self: start;
    padding-top: 48px;
    border-left: 1px solid var(--line);
    padding-left: 16px;
    padding-right: 8px;
    /* height must not be constrained — let content determine it */
  }
}

@media (min-width: 1280px) {
  .post-layout {
    gap: 0 48px;
  }
  .post-layout__sidebar {
    top: calc(var(--header-h, 60px) + 16px);
    padding-top: 64px;
    padding-left: 20px;
    padding-right: 12px;
  }
}

/* ============================================================
   Article body padding (item 5)
   Add horizontal padding to content inside the main column
   ============================================================ */

.post-layout__main .post__body {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .post-layout__main .post__body {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (min-width: 1024px) {
  .post-layout__main .post__body {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   Pillar CTA alignment fix (item 4)
   Full bleed inside column but flush with text
   ============================================================ */

.post-layout__main .ssd-pillar-cta {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   Sticky TOC sidebar — items 1 & 2
   - padding-right on box so content doesn't touch the edge
   - reduced left-padding on the sidebar column
   - sticky fully functional (position:sticky on .sidebar-inner)
   - links use <a> with proper href so browser handles scroll
   ============================================================ */

.post-layout__sidebar .ssd-toc {
  margin-bottom: 0;
  border: 1px solid #C8D4E8;
  /* item 1: generous right padding, tight left */
  padding: 20px 20px 20px 16px;
  position: relative; /* needed for ::before accent mark */
}

/* Force all TOC links to be real anchor elements — no pointer-events blocking */
.post-layout__sidebar .ssd-toc a,
.post-layout__sidebar .ssd-toc__link {
  display: block;
  text-decoration: none;
  color: var(--navy-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  line-height: 1.5;
  font-size: 13px;
  transition: color 150ms, border-color 150ms;
  /* item 2: ensure clicks register */
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
.post-layout__sidebar .ssd-toc a:hover,
.post-layout__sidebar .ssd-toc__link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Single-column TOC list */
.post-layout__sidebar .ssd-toc__list,
.post-layout__sidebar .ssd-toc ol {
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* TOC past boundary — JS adds this class when post-layout scrolls out of view.
   Removes sticky from the sidebar column so TOC travels with normal flow. */
.post-layout__sidebar.toc-past-boundary {
  position: static !important;
  top: auto !important;
}

/* Hide sidebar on mobile */
@media (max-width: 1023px) {
  .post-layout__sidebar { display: none; }
}

.post_body_bg {
  background-color: #ffffff;
  /* item 3: padding left/right for the article body section */
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media (min-width: 1024px) {
  .post_body_bg {
    padding-left: var(--gutter-tablet);
    padding-right: var(--gutter-tablet);
  }
}
@media (min-width: 1280px) {
  .post_body_bg {
    padding-left: var(--gutter-desk);
    padding-right: var(--gutter-desk);
  }
}
.faq_body_bg {background-color: #ffffff;}


/* ============================================================
   AUTHOR PROFILE PAGE  (single-ssd_author.php)
   ============================================================ */

.ssd-author-page {
  padding-top: 48px;
  padding-bottom: 64px;
}

/* ── Profile card ────────────────────────────────────────────────────────── */
.author-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 48px;
  margin-bottom: 56px;
}

@media (min-width: 768px) {
  .author-profile {
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
  }
}

/* Left column */
.author-profile__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

@media (min-width: 768px) {
  .author-profile__left { align-items: flex-start; text-align: left; }
}

.author-profile__photo {
  width: 160px;
  height: 160px;
  border-radius: 6px; /* square badge — matches blog bios style */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.author-profile__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.author-profile__photo-initials {
  font-size: 52px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75); /* semi-transparent like Image 2 */
  letter-spacing: -0.02em;
  line-height: 1;
}

.author-profile__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.25;
}

.author-profile__position {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0;
}

.author-profile__bar {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  font-style: italic;
}

.author-profile__url {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-top: 4px;
}
.author-profile__url:hover { text-decoration: underline; }

/* Right column */
.author-profile__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.author-profile__role-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
  background: var(--navy);
  padding: 4px 12px;
  border-radius: 2px;
  margin: 0;
  align-self: flex-start;
}

.author-profile__bio {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.author-profile__bio p { margin: 0 0 12px; }
.author-profile__bio p:last-child { margin-bottom: 0; }

/* ── Posts grid ──────────────────────────────────────────────────────────── */
.author-posts__heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.author-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px)  { .author-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .author-posts__grid { grid-template-columns: repeat(3, 1fr); } }

.author-post-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: box-shadow 160ms;
}
.author-post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.author-post-card__thumb-link { display: block; flex-shrink: 0; }
.author-post-card__thumb {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.author-post-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.author-post-card__cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.author-post-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}
.author-post-card__title a {
  color: var(--navy);
  text-decoration: none;
}
.author-post-card__title a:hover { color: var(--accent); }

.author-post-card__excerpt {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

.author-post-card__meta {
  font-size: 12px;
  color: var(--ink-2);
  opacity: .7;
  margin-top: 4px;
}

/* ── Badge image inside byline (when Author has profile photo) ───────────── */
.ba-byline__badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── TOC left layout for blog-a ── */
@media (min-width: 1024px) {
    .post-layout {
        grid-template-columns: 30% 70% !important;
        grid-template-areas: "sidebar main" !important;
    }

    .post-layout__sidebar {
        border-left: none !important;
        border-right: 1px solid var(--line) !important;
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
    }

    .post-layout__main {
        padding-left: 1.5rem !important;
    }
}

/* ── TOC left, body right — desktop only ── */
@media (min-width: 1024px) {
    .post-layout {
        grid-template-columns: 30% 65% !important;
        grid-template-areas: "sidebar main" !important;
    }
    .post-layout__sidebar {
        border-left: none !important;
        border-right: 1px solid var(--line) !important;
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
        padding-top: .5rem !important;
    }
    .post-layout__main {
        padding-left: 1.5rem !important;
    }
}

/* ── Full width header ── */
.ssd-post-header {
    width: 100% !important;
    padding-top: 2rem !important;
}

.wraper_header_main {
    box-shadow: none !important;
}
/* ── Featured image — shorter, not full viewport ── */
.post__featured {
    padding-bottom: 24px !important;
}
.post__featured-img {
    aspect-ratio: unset !important;
    width: 100% !important;
    max-height: 380px !important;
    height: 380px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
}
@media (max-width: 767px) {
    .post__featured-img {
        height: 220px !important;
        max-height: 220px !important;
    }
}

/* ============================================================
   BA-BYLINE — E-E-A-T Byline  (Blog A Layout)
   Root tokens: --navy --accent --ink --ink-2 --ink-3
                --line --paper --paper-tint --white --font-sans
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.ssd-wrap .ba-byline {
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     center !important;
    flex-wrap:       nowrap !important;
    gap:             0 !important;
    padding:         20px 24px !important;
    background:      var(--paper-tint) !important;
    border-left:     3px solid var(--accent) !important;
    border-radius:   0 8px 8px 0 !important;
    font-family:     var(--font-sans) !important;
    margin-block:    28px !important;
    width:           100% !important;
    box-sizing:      border-box !important;
    text-align:      left !important;
    justify-content: flex-start !important;
}

/* ── People group ── */
.ba-byline__people {
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     center !important;
    flex-wrap:       wrap !important;
    gap:             20px 24px !important;
    flex:            1 1 auto !important;
    min-width:       0 !important;
    padding-right:   24px !important;
    text-align:      left !important;
    justify-content: flex-start !important;
    margin:          0 !important;
    padding-top:     0 !important;
    padding-bottom:  0 !important;
    padding-left:    0 !important;
}

/* ── Vertical divider ── */
.ba-byline__divider {
    display:         block !important;
    width:           1px !important;
    min-height:      48px !important;
    background:      var(--line) !important;
    align-self:      stretch !important;
    flex-shrink:     0 !important;
    border:          none !important;
    margin:          0 !important;
    padding:         0 !important;
}

/* ── Dates column ── */
.ba-byline__dates {
    flex:            0 0 auto !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    gap:             5px !important;
    padding-left:    24px !important;
    padding-right:   0 !important;
    padding-top:     0 !important;
    padding-bottom:  0 !important;
    min-width:       160px !important;
    text-align:      left !important;
    margin:          0 !important;
}

/* ── Person card ── */
.ba-byline__person {
    display:         flex !important;
    align-items:     center !important;
    gap:             12px !important;
    flex-shrink:     0 !important;
    margin:          0 !important;
    padding:         0 !important;
    position:        static !important; /* popover uses meta as anchor */
}

/* ── Avatar badge ── */
.ba-byline__badge {
    flex-shrink:     0 !important;
    width:           48px !important;
    height:          48px !important;
    border-radius:   50% !important;
    background:      var(--navy) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       13px !important;
    font-weight:     700 !important;
    color:           var(--white) !important;
    letter-spacing:  .02em !important;
    overflow:        hidden !important;
    border:          2px solid var(--white) !important;
    box-shadow:      0 0 0 1.5px var(--line) !important;
    margin:          0 !important;
    padding:         0 !important;
    line-height:     1 !important;
    text-align:      center !important;
}
.ba-byline__badge--reviewer {
    box-shadow:      0 0 0 2px var(--accent) !important;
}
.ba-byline__badge-img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover !important;
    display:         block !important;
    border-radius:   0 !important;
    margin:          0 !important;
    padding:         0 !important;
}

/* ── Meta block — position:relative so popover anchors here ── */
.ba-byline__meta {
    display:         flex !important;
    flex-direction:  column !important;
    gap:             1px !important;
    min-width:       0 !important;
    margin:          0 !important;
    padding:         0 !important;
    text-align:      left !important;
    position:        relative !important; /* ← popover anchor */
}

.ba-byline__label {
    display:         block !important;
    margin:          0 !important;
    padding:         0 !important;
    font-size:       11px !important;
    font-weight:     500 !important;
    text-transform:  uppercase !important;
    letter-spacing:  .07em !important;
    color:           var(--ink-3) !important;
    line-height:     1.2 !important;
    font-family:     var(--font-sans) !important;
}
.ba-byline__label--legal {
    color:           var(--accent) !important;
}

/* ── Name — styled as a clickable text link (no box) ── */
.ba-byline__name-trigger {
    display:         inline !important;
    background:      none !important;
    border:          none !important;
    padding:         0 !important;
    margin:          0 !important;
    font-size:       14px !important;
    font-weight:     700 !important;
    color:           var(--navy) !important;
    line-height:     1.3 !important;
    font-family:     var(--font-sans) !important;
    cursor:          pointer !important;
    text-decoration: underline !important;
    text-decoration-color: transparent !important;
    text-underline-offset: 2px !important;
    transition:      color 0.15s, text-decoration-color 0.15s !important;
    white-space:     nowrap !important;
    text-align: left !important;
}
.ba-byline__name-trigger:hover,
.ba-byline__name-trigger:focus-visible,
.ba-byline__name-trigger[aria-expanded="true"] {
    color:                  var(--accent) !important;
    text-decoration-color:  var(--accent) !important;
    outline:                none !important;
}

.ba-byline__title {
    display:         block !important;
    margin:          0 !important;
    padding:         0 !important;
    font-size:       12px !important;
    color:           var(--ink-2) !important;
    line-height:     1.3 !important;
    white-space:     nowrap !important;
    font-family:     var(--font-sans) !important;
}
.ba-byline__bar {
    display:         inline !important;
    font-size:       11px !important;
    color:           var(--ink-3) !important;
    margin-left:     4px !important;
}

/* ── Dates ── */
.ba-byline__published,
.ba-byline__updated,
.ba-byline__readtime {
    display:         block !important;
    margin:          0 !important;
    padding:         0 !important;
    font-size:       12px !important;
    color:           var(--ink-2) !important;
    line-height:     1.4 !important;
    white-space:     nowrap !important;
    font-family:     var(--font-sans) !important;
    text-align:      left !important;
}
.ba-byline__published time,
.ba-byline__updated  time { color: var(--ink) !important; font-weight: 600 !important; }
.ba-byline__updated strong { color: var(--ink) !important; font-weight: 600 !important; margin-right: 3px !important; }
.ba-byline__readtime {
    margin-top:      4px !important;
    padding-top:     6px !important;
    border-top:      1px solid var(--line) !important;
    font-size:       11px !important;
    color:           var(--ink-3) !important;
    text-transform:  uppercase !important;
    letter-spacing:  .05em !important;
}

/* ============================================================
   POPOVER  .ba-pop
   Anchored below .ba-byline__name-trigger via .ba-byline__meta
   No backdrop — just a card that drops down
   ============================================================ */

.ba-pop {
    display:         none !important;          /* hidden by default */
    position:        absolute !important;
    top:             calc(100% + 10px) !important;  /* just below the meta block */
    left:            0 !important;
    z-index:         9990 !important;
    width:           300px !important;
    background:      var(--paper) !important;
    border:          1px solid var(--line) !important;
    border-top:      3px solid var(--accent) !important;
    border-radius:   0 0 10px 10px !important;
    box-shadow:      0 6px 32px rgba(10,42,97,0.14) !important;
    font-family:     var(--font-sans) !important;
    padding:         16px !important;
    box-sizing:      border-box !important;
    /* entrance animation */
    opacity:         0 !important;
    transform:       translateY(-4px) !important;
    transition:      opacity 0.15s ease, transform 0.15s ease !important;
}

/* Shown state */
.ba-pop.is-open {
    display:         block !important;
    opacity:         1 !important;
    transform:       translateY(0) !important;
}

/* Flip upward variant */
.ba--pop--up {
    top:             auto !important;
    bottom:          calc(100% + 10px) !important;
    border-top:      1px solid var(--line) !important;
    border-bottom:   3px solid var(--accent) !important;
    border-radius:   10px 10px 0 0 !important;
    transform:       translateY(4px) !important;
}
.ba-pop--up.is-open {
    transform:       translateY(0) !important;
}

/* Small caret notch */
.ba-pop__arrow {
    position:        absolute !important;
    top:             -7px !important;
    left:            20px !important;
    width:           12px !important;
    height:          12px !important;
    background:      var(--paper) !important;
    border-left:     1px solid var(--line) !important;
    border-top:      1px solid var(--line) !important;
    transform:       rotate(45deg) !important;
    margin:          0 !important;
    padding:         0 !important;
}
.ba-pop--up .ba-pop__arrow {
    top:             auto !important;
    bottom:          -7px !important;
    border-left:     none !important;
    border-top:      none !important;
    border-right:    1px solid var(--line) !important;
    border-bottom:   1px solid var(--line) !important;
}

/* Head: avatar + name/role */
.ba-pop__head {
    display:         flex !important;
    align-items:     flex-start !important;
    gap:             12px !important;
    margin-bottom:   12px !important;
    padding-bottom:  12px !important;
    border-bottom:   1px solid var(--line) !important;
}
.ba-pop__avatar {
    flex-shrink:     0 !important;
    width:           56px !important;
    height:          56px !important;
    border-radius:   6px !important;  /* square-ish like Investopedia */
    background:      var(--navy) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       16px !important;
    font-weight:     700 !important;
    color:           var(--white) !important;
    overflow:        hidden !important;
    margin:          0 !important;
    padding:         0 !important;
    line-height:     1 !important;
}
.ba-pop__avatar img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover !important;
    display:         block !important;
    border-radius:   0 !important;
}
.ba-pop__head-text {
    display:         flex !important;
    flex-direction:  column !important;
    gap:             2px !important;
    min-width:       0 !important;
}
.ba-pop__role {
    font-size:       10px !important;
    font-weight:     600 !important;
    text-transform:  uppercase !important;
    letter-spacing:  .07em !important;
    color:           var(--accent) !important;
    line-height:     1.2 !important;
}
.ba-pop__name {
    font-size:       15px !important;
    font-weight:     700 !important;
    color:           var(--navy) !important;
    line-height:     1.25 !important;
    font-family:     var(--font-sans) !important;
}
.ba-pop__position {
    font-size:       11.5px !important;
    color:           var(--ink-3) !important;
    line-height:     1.3 !important;
    font-family:     var(--font-sans) !important;
}

/* Bio */
.ba-pop__bio {
    margin:          0 0 12px !important;
    padding:         0 !important;
    font-size:       13px !important;
    color:           var(--ink-2) !important;
    line-height:     1.65 !important;
    font-family:     var(--font-sans) !important;
}

/* Facts */
.ba-pop__facts {
    list-style:      none !important;
    margin:          0 0 12px !important;
    padding:         0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             6px !important;
}
.ba-pop__fact {
    display:         flex !important;
    align-items:     flex-start !important;
    gap:             7px !important;
    font-size:       12px !important;
    color:           var(--ink-2) !important;
    list-style:      none !important;
    margin:          0 !important;
    padding:         0 !important;
}
.ba-pop__fact-icon {
    flex-shrink:     0 !important;
    width:           14px !important;
    height:          14px !important;
    color:           var(--accent) !important;
    margin-top:      1px !important;
}
.ba-pop__fact strong {
    color:           var(--ink) !important;
    font-weight:     600 !important;
    margin-right:    3px !important;
}

/* Empty state */
.ba-pop__empty {
    font-size:       12px !important;
    color:           var(--ink-3) !important;
    font-style:      italic !important;
    margin:          0 0 12px !important;
    padding:         0 !important;
    font-family:     var(--font-sans) !important;
}

/* "Full Bio >" link — plain text, accent color, like Investopedia */
.ba-pop__cta {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             4px !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    color:           var(--accent) !important;
    text-decoration: none !important;
    font-family:     var(--font-sans) !important;
    padding:         0 !important;
    background:      none !important;
    border:          none !important;
    margin:          0 !important;
    transition:      color 0.15s !important;
}
.ba-pop__cta:hover {
    color:           var(--navy) !important;
    text-decoration: underline !important;
}
.ba-pop__cta svg {
    width:           12px !important;
    height:          12px !important;
}

/* ============================================================
   RESPONSIVE — Tablet ≤ 700px
   ============================================================ */
@media (max-width: 700px) {
    .ssd-wrap .ba-byline {
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            16px !important;
        padding:        16px !important;
    }
    .ba-byline__people {
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            14px !important;
        padding-right:  0 !important;
        width:          100% !important;
    }
    .ba-byline__divider {
        width:          100% !important;
        height:         1px !important;
        min-height:     0 !important;
        align-self:     auto !important;
    }
    .ba-byline__dates {
        padding-left:   0 !important;
        flex-direction: row !important;
        flex-wrap:      wrap !important;
        gap:            6px 18px !important;
        align-items:    center !important;
        min-width:      0 !important;
        width:          100% !important;
    }
    .ba-byline__readtime {
        border-top:     none !important;
        padding-top:    0 !important;
        margin-top:     0 !important;
        border-left:    1px solid var(--line) !important;
        padding-left:   12px !important;
    }
    .ba-pop {
        width:          280px !important;
        left:           0 !important;
        right:          auto !important;
    }
}

/* ============================================================
   RESPONSIVE — Mobile ≤ 460px
   ============================================================ */
@media (max-width: 460px) {
    .ssd-wrap .ba-byline { padding: 14px !important; gap: 14px !important; }
    .ba-byline__people { gap: 12px !important; }
    .ba-byline__badge { width: 40px !important; height: 40px !important; font-size: 12px !important; }
    .ba-byline__name-trigger,
    .ba-byline__title { white-space: normal !important; }
    .ba-byline__dates { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
    .ba-byline__readtime {
        border-left:    none !important;
        padding-left:   0 !important;
        border-top:     1px solid var(--line) !important;
        padding-top:    6px !important;
        margin-top:     2px !important;
    }
    /* on very small screens let popover go full width */
    .ba-pop {
        width:          calc(100vw - 32px) !important;
        left:           50% !important;
        transform:      translateX(-50%) translateY(-4px) !important;
    }
    .ba-pop.is-open {
        transform:      translateX(-50%) translateY(0) !important;
    }
}

/* ============================================================
   TOC — full ruleset  (replace all existing .ssd-toc__* rules)
   ============================================================ */

/* Wrapper */
.ssd-toc {
    background:      var(--paper-tint) !important;
    border-left:     3px solid var(--accent) !important;
    border-radius:   0 8px 8px 0 !important;
    padding:         16px 18px !important;
    position:        relative !important;
    z-index:         1 !important;
    pointer-events:  auto !important;
}

.ssd-toc__eyebrow {
    font-size:       10px !important;
    font-weight:     700 !important;
    text-transform:  uppercase !important;
    letter-spacing:  .08em !important;
    color:           var(--accent) !important;
    margin:          0 0 10px !important;
    padding:         0 !important;
    font-family:     var(--font-sans) !important;
}

/* Top-level list */
.ssd-toc__list {
    list-style:      none !important;
    margin:          0 !important;
    padding:         0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             0 !important;
}

/* H2 block — full width, stacks vertically */
.ssd-toc__item--h2 {
    display:         flex !important;
    flex-direction:  column !important;
    gap:             0 !important;
    padding:         8px 0 !important;
    border-bottom:   1px solid var(--line) !important;
    list-style:      none !important;
}
.ssd-toc__item--h2:last-child {
    border-bottom:   none !important;
}

/* H2 number + link on one row */
.ssd-toc__h2-row {
    display:         flex !important;
    align-items:     baseline !important;
    gap:             8px !important;
}

.ssd-toc__num {
    flex-shrink:     0 !important;
    font-size:       12px !important;
    font-weight:     700 !important;
    color:           var(--accent) !important;
    min-width:       24px !important;
    font-family:     var(--font-sans) !important;
    line-height:     1.4 !important;
}

/* All links — reset everything the parent theme might override */
.ssd-toc__link {
    display:         inline !important;
    font-family:     var(--font-sans) !important;
    text-decoration: none !important;
    line-height:     1.4 !important;
    cursor:          pointer !important;
    pointer-events:  auto !important;
    position:        relative !important;
    z-index:         10 !important;
    /* reset parent theme common overrides */
    border:          none !important;
    background:      none !important;
    box-shadow:      none !important;
    opacity:         1 !important;
}

.ssd-toc__link--h2 {
    font-size:       13.5px !important;
    font-weight:     600 !important;
    color:           var(--navy) !important;
}
.ssd-toc__link--h2:hover,
.ssd-toc__link--h2:focus {
    color:           var(--accent) !important;
    text-decoration: underline !important;
    outline:         none !important;
}

/* H3 sub-list — indented below H2 */
.ssd-toc__sub-list {
    list-style:      none !important;
    margin:          6px 0 0 32px !important;
    padding:         0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             4px !important;
}

.ssd-toc__item--h3 {
    display:         flex !important;
    align-items:     baseline !important;
    gap:             7px !important;
    position:        relative !important;
    list-style:      none !important;
}

/* Vertical connector line */
.ssd-toc__item--h3::before {
    content:         '' !important;
    position:        absolute !important;
    left:            -14px !important;
    top:             0 !important;
    bottom:          0 !important;
    width:           1px !important;
    background:      var(--line) !important;
}

.ssd-toc__sub-num {
    flex-shrink:     0 !important;
    font-size:       11px !important;
    font-weight:     500 !important;
    color:           var(--ink-3) !important;
    min-width:       24px !important;
    font-family:     var(--font-sans) !important;
    line-height:     1.4 !important;
}

.ssd-toc__link--h3 {
    font-size:       12.5px !important;
    font-weight:     400 !important;
    color:           var(--ink-2) !important;
}
.ssd-toc__link--h3:hover,
.ssd-toc__link--h3:focus {
    color:           var(--accent) !important;
    text-decoration: underline !important;
    outline:         none !important;
}


/* ── H3 click fix — force pointer events through on sub-list and all children ── */
.ssd-toc__sub-list,
.ssd-toc__sub-list *,
.ssd-toc__item--h3,
.ssd-toc__item--h3 * {
    pointer-events:  auto !important;
    cursor:          pointer !important;
    position:        relative !important;
    z-index:         20 !important;
}

.ssd-toc__link--h3 {
    display:         block !important;   /* larger hit area vs inline */
    pointer-events:  auto !important;
    cursor:          pointer !important;
    position:        relative !important;
    z-index:         20 !important;
}