/* =====================================================================
   MSP Influencer — "5 MSP Takeaways" listicle
   Palette pulled straight from the logo SVG:
     navy  #2B3F56   ·   blue #0C6DB2   ·   green #019147
   ===================================================================== */
.mspi-listicle{
  --navy:#2B3F56;          /* logo wordmark */
  --ink:#192635;           /* darkened navy for hero/footer/now-bar */
  --blue:#0C6DB2;          /* logo blue */
  --blue-dk:#055a96;
  --green:#019147;         /* logo green — the signature accent */
  --green-br:#02ad55;
  --cream:#eef0ee;
  --paper:#eef1f4;
  --card:#fff;
  --line:#e1e6ec;
  --muted:#69788a;
  --head:'Schibsted Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --wrap:1400px; --read:740px;
  /* --hdr = height of the SITE's sticky header. Sticky TOC, now-bar and
     scroll-margins offset by this. 0 if the theme header isn't sticky;
     set to the real header height (e.g. 80px) when wiring into the template. */
  --hdr:0px; --read-h:46px;
}
.mspi-listicle *{box-sizing:border-box}
html{scroll-behavior:smooth}
.mspi-listicle{margin:0;background:var(--paper);font-family:var(--body);color:#27313d;line-height:1.7;-webkit-font-smoothing:antialiased}
.mspi-listicle img{display:block;max-width:100%}
.mspi-listicle a{color:inherit;text-decoration:none}

/* break out of Astra's content container so the hero is full-bleed.
   Astra sets .site-content .ast-container{display:flex} (two-container/sidebar
   layout) which leaves a white flex gap on the right — force block + full width. */
body.mspi-listicle-page #content,
body.mspi-listicle-page #content .ast-container,
body.mspi-listicle-page #primary,
body.mspi-listicle-page .entry-content{max-width:none;width:100%;margin:0;padding:0;background:transparent}
body.mspi-listicle-page #content .ast-container{display:block!important}
body.mspi-listicle-page #primary{flex:1 1 100%;border:0;float:none}
body.mspi-listicle-page .site-content{background:transparent}
/* hide Astra's sidebar slot if the layout still outputs one */
body.mspi-listicle-page #secondary{display:none}

/* offset fixed bars below the WP admin bar (logged-in only, desktop) */
body.admin-bar .mspi-listicle .progress{top:32px}
body.admin-bar .mspi-listicle .now{top:calc(var(--hdr) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .mspi-listicle .progress{top:46px}
  body.admin-bar .mspi-listicle .now{top:calc(var(--hdr) + 46px)}
}

/* ---------- reading progress scrubber ---------- */
.mspi-listicle .progress{position:fixed;inset:0 0 auto 0;height:3px;background:transparent;z-index:120}
.mspi-listicle .progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));box-shadow:0 0 10px rgba(1,145,71,.5)}

/* ---------- now-reading bar ---------- */
.mspi-listicle .now{position:fixed;left:0;right:0;top:var(--hdr);z-index:99;background:rgba(25,38,53,.97);color:#fff;
  transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.7,.2,1);backdrop-filter:saturate(1.4) blur(4px)}
.mspi-listicle .now.show{transform:none}
.mspi-listicle .now__in{max-width:var(--wrap);margin:0 auto;height:var(--read-h);padding:0 26px;display:flex;align-items:center;gap:16px}
.mspi-listicle .now__dot{width:8px;height:8px;border-radius:50%;background:var(--green-br);box-shadow:0 0 0 0 rgba(2,173,85,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(2,173,85,.55)}70%{box-shadow:0 0 0 7px rgba(2,173,85,0)}100%{box-shadow:0 0 0 0 rgba(2,173,85,0)}}
.mspi-listicle .now__kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#86a7c6}
.mspi-listicle .now__title{font-family:var(--head);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mspi-listicle .now__pct{margin-left:auto;font-family:var(--mono);font-size:12px;color:#a6bace}
.mspi-listicle .now__cta{font-family:var(--head);font-weight:700;font-size:12.5px;background:var(--blue);color:#fff;padding:7px 14px;border-radius:999px;white-space:nowrap}
.mspi-listicle .now__cta:hover{background:var(--green);color:#fff}
@media(max-width:620px){.mspi-listicle .now__title{display:none}}

/* ---------- hero ---------- */
.mspi-listicle .hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#284057 0%,var(--navy) 42%,var(--ink) 100%)}
.mspi-listicle .hero::before{content:"";position:absolute;inset:0;background:
   radial-gradient(90% 120% at 88% -10%,rgba(12,109,178,.45),transparent 55%),
   radial-gradient(70% 90% at 6% 110%,rgba(1,145,71,.30),transparent 55%)}
.mspi-listicle .hero__in{position:relative;max-width:var(--wrap);margin:0 auto;padding:58px 26px 52px}
.mspi-listicle .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
@media(max-width:920px){.mspi-listicle .hero__grid{grid-template-columns:1fr;gap:30px}}

/* featured-image panel (right) */
.mspi-listicle .hero__fig{margin:0;position:relative}
.mspi-listicle .hero__fig img{width:100%;object-fit:contain;border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
@media(max-width:920px){.mspi-listicle .hero__fig{order:-1}.mspi-listicle .hero__fig img{aspect-ratio:16/9}}
/* breadcrumb */
.mspi-listicle .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9fb6cf;margin:0 0 16px}
.mspi-listicle .crumb a{color:#cbd8e5;transition:color .15s}
.mspi-listicle .crumb a:hover{color:var(--green-br)}
.mspi-listicle .crumb__sep{color:#5f7da0}

.mspi-listicle .hero__kick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#bcd4e8}
.mspi-listicle .hero__kick .seg{width:22px;height:1px;background:var(--green-br)}
.mspi-listicle .hero__kick a{color:#bcd4e8;transition:color .15s}
.mspi-listicle .hero__kick a:hover{color:var(--green-br)}
.mspi-listicle .hero__kick-sep{color:#5f7da0}
.mspi-listicle .hero__h1{font-family:var(--head);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.06;margin:20px 0 0;font-size:clamp(32px,4.6vw,56px);max-width:16ch}
.mspi-listicle .hero__sub{margin:18px 0 0;max-width:60ch;font-size:18px;color:#cbd8e5;line-height:1.6}
.mspi-listicle .hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:26px;font-size:13.5px;color:#a6bace}
.mspi-listicle .hero__av{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--head);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.mspi-listicle .hero__by{display:flex;align-items:center;gap:9px}
.mspi-listicle .hero__by b{color:#fff;font-weight:600}
.mspi-listicle .hero__tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1px solid #3a566f;border-radius:999px;padding:4px 11px;color:#bcd4e8}

/* ---------- layout ---------- */
.mspi-listicle .shell{max-width:var(--wrap);margin:0 auto;padding:34px 26px 60px;
  display:grid;grid-template-columns:248px minmax(0,1fr) 308px;gap:40px;align-items:start}
@media(max-width:1180px){.mspi-listicle .shell{grid-template-columns:228px minmax(0,1fr)}.mspi-listicle .adrail{display:none}}
@media(max-width:920px){.mspi-listicle .shell{grid-template-columns:1fr;gap:22px}.mspi-listicle .lcol{position:static!important;order:-1}.mspi-listicle .toc__ad{display:none}}

/* page template: 2-column (article + right rail, no TOC) */
.mspi-listicle .shell--no-lcol{grid-template-columns:minmax(0,1fr) 308px}
@media(max-width:1180px){.mspi-listicle .shell--no-lcol{grid-template-columns:minmax(0,1fr);}.mspi-listicle .shell--no-lcol .adrail{display:flex}}
@media(max-width:768px){.mspi-listicle .shell--no-lcol{grid-template-columns:1fr}.mspi-listicle .shell--no-lcol .adrail{display:none}}
/* page content can use full column width (Elementor manages its own widths) */
.mspi-listicle .article--page{max-width:none}

/* ================================================================
   PAGE TEMPLATE — Elementor content styling
   ================================================================ */

/* ---- H1 heading ---- */
.mspi-listicle .article--page .elementor-widget-heading h1.elementor-heading-title{
  font-family:var(--head)!important;
  font-weight:900!important;
  color:var(--ink)!important;
  font-size:clamp(32px,4.2vw,54px)!important;
  letter-spacing:-.03em!important;
  line-height:1.1!important}

/* ---- H2 heading: left green bar + subtle tint background ---- */
.mspi-listicle .article--page .elementor-widget-heading h2.elementor-heading-title{
  font-family:var(--head)!important;
  font-weight:800!important;
  color:var(--navy)!important;
  font-size:clamp(22px,2.8vw,34px)!important;
  letter-spacing:-.025em!important;
  line-height:1.2!important;
  padding:18px 20px 16px!important;
  margin:0!important;
  border-left:5px solid var(--green)!important;
  background:linear-gradient(135deg,rgba(1,145,71,.07) 0%,rgba(12,109,178,.04) 100%)!important;
  border-radius:0 10px 10px 0!important}

/* ---- H3 heading: accent underline ---- */
.mspi-listicle .article--page .elementor-widget-heading h3.elementor-heading-title{
  font-family:var(--head)!important;
  font-weight:700!important;
  color:var(--navy)!important;
  font-size:clamp(18px,2.2vw,26px)!important;
  letter-spacing:-.02em!important;
  line-height:1.25!important;
  padding-bottom:10px!important;
  border-bottom:2px solid var(--line)!important}

/* ---- H4 heading ---- */
.mspi-listicle .article--page .elementor-widget-heading h4.elementor-heading-title{
  font-family:var(--head)!important;
  font-weight:700!important;
  color:var(--blue)!important;
  font-size:clamp(16px,1.8vw,20px)!important;
  letter-spacing:-.01em!important}

/* ---- Text editor: base ---- */
.mspi-listicle .article--page .elementor-widget-text-editor{
  font-family:var(--body)!important;
  -webkit-font-smoothing:antialiased}

/* Paragraphs */
.mspi-listicle .article--page .elementor-widget-text-editor p{
  font-size:17px!important;
  line-height:1.82!important;
  color:#2b3744!important;
  margin:0 0 22px!important}
.mspi-listicle .article--page .elementor-widget-text-editor p:last-child{margin-bottom:0!important}

/* Lead paragraph — first <p> in each text widget */
.mspi-listicle .article--page .elementor-widget-text-editor p:first-of-type{
  font-size:18px!important;
  color:#1c2b3a!important;
  font-weight:500!important}

/* Inline emphasis */
.mspi-listicle .article--page .elementor-widget-text-editor strong,
.mspi-listicle .article--page .elementor-widget-text-editor b{
  color:var(--navy)!important;font-weight:700!important}
.mspi-listicle .article--page .elementor-widget-text-editor em,
.mspi-listicle .article--page .elementor-widget-text-editor i{color:var(--blue)!important}

/* Links */
.mspi-listicle .article--page .elementor-widget-text-editor a{
  color:var(--blue)!important;font-weight:600!important;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(12,109,178,.4)}
.mspi-listicle .article--page .elementor-widget-text-editor a:hover{
  color:var(--green)!important;text-decoration-color:var(--green)}

/* Lists */
.mspi-listicle .article--page .elementor-widget-text-editor :is(ul,ol){
  font-size:17px!important;color:#2b3744!important;
  margin:0 0 22px!important;padding-left:26px!important;line-height:1.75!important}
.mspi-listicle .article--page .elementor-widget-text-editor li{margin-bottom:10px!important}
.mspi-listicle .article--page .elementor-widget-text-editor ul li::marker{color:var(--green)!important}
.mspi-listicle .article--page .elementor-widget-text-editor ol li::marker{
  color:var(--blue)!important;font-weight:700!important}

/* Blockquotes */
.mspi-listicle .article--page .elementor-widget-text-editor blockquote{
  border-left:4px solid var(--blue)!important;
  margin:26px 0!important;padding:16px 22px!important;
  background:rgba(12,109,178,.05)!important;border-radius:0 8px 8px 0!important;
  font-size:18px!important;font-style:italic!important;color:var(--navy)!important}

/* Divider widget */
.mspi-listicle .article--page .elementor-widget-divider .elementor-divider-separator{
  border-color:var(--line)!important}

/* ---- In-content 728x90 ads injected by JS ---- */
.mspi-listicle .article--page .mspi-ad--inline{
  margin:32px 0;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center}
.mspi-listicle .article--page .mspi-ad--inline .mspi-ad__lab{
  display:block;margin-bottom:8px}

/* ---------- left column (TOC + ad) ----------
   Sticky offset clears the fixed now-reading bar (var(--read-h)) so the TOC
   isn't hidden under it; +32px more when the WP admin bar is present. */
.mspi-listicle .lcol{position:sticky;top:calc(var(--hdr) + var(--read-h) + 22px);align-self:start}
body.admin-bar .mspi-listicle .lcol{top:calc(var(--hdr) + var(--read-h) + 22px + 32px)}
.mspi-listicle .toc__ad{margin-top:26px;display:flex;flex-direction:column;gap:22px}

/* ---------- TOC / takeaways rail ---------- */
.mspi-listicle .toc{align-self:start}
.mspi-listicle .toc__hd{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.mspi-listicle .toc__hd .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.mspi-listicle .toc__list{list-style:none;margin:0;padding:0;position:relative}
.mspi-listicle .toc__list::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.mspi-listicle .toc__fill{position:absolute;left:13px;top:8px;width:2px;height:0;background:linear-gradient(180deg,var(--blue),var(--green));border-radius:2px;transition:height .15s linear}
.mspi-listicle .toc__a{position:relative;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:9px 0;color:var(--muted);font-size:13.5px;line-height:1.35;transition:color .15s}
.mspi-listicle .toc__n{font-family:var(--mono);font-size:11px;width:27px;height:27px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);z-index:1;transition:.18s}
.mspi-listicle .toc__a:hover{color:var(--navy)}
.mspi-listicle .toc__a.active{color:var(--navy);font-weight:600}
.mspi-listicle .toc__a.active .toc__n{border-color:var(--blue);background:var(--blue);color:#fff}
.mspi-listicle .toc__a.done .toc__n{border-color:var(--green);color:var(--green)}

/* ---------- article ---------- */
.mspi-listicle .article{min-width:100%;max-width:var(--read)}
.mspi-listicle .article p{font-size:17px;margin:0 0 18px;color:#2b3744}
.mspi-listicle .lead{font-size:19.5px;line-height:1.62;color:var(--navy)}
.mspi-listicle .note{font-size:15.5px;color:var(--muted);font-style:italic;border-left:3px solid var(--line);padding-left:14px;margin:0 0 18px}

.mspi-listicle .tk{padding-top:34px;margin-top:34px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + var(--read-h) + 18px)}
.mspi-listicle .tk:first-of-type{border-top:0;margin-top:8px;padding-top:8px}
.mspi-listicle .tk__row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.mspi-listicle .tk__no{flex:none;font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.1em}
.mspi-listicle .tk__bar{flex:1;height:1px;background:var(--line)}
.mspi-listicle .tk__chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.mspi-listicle .tk__h{font-family:var(--head);font-weight:700;color:var(--navy);font-size:clamp(22px,2.4vw,28px);line-height:1.18;letter-spacing:-.01em;margin:4px 0 14px}

/* MSP Action — signature directive block */
.mspi-listicle .action{position:relative;margin:20px 0 4px;background:linear-gradient(180deg,#fff,#fafcfb);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px 18px 58px;box-shadow:0 1px 0 rgba(25,38,53,.03)}
.mspi-listicle .action::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:14px 0 0 14px;background:linear-gradient(180deg,var(--blue),var(--green))}
.mspi-listicle .action__ico{position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:7px;background:var(--navy);color:var(--green-br);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.mspi-listicle .action__lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500}
.mspi-listicle .action__txt{margin:5px 0 0;font-size:16px;color:var(--navy);font-weight:500;line-height:1.55}

/* in-content ad (real WPAdCenter markup) */
.mspi-listicle .article p:has(> a[id="wpadcenter_ad"]){margin:34px 0;text-align:center}
.mspi-listicle .article p:has(> a[id="wpadcenter_ad"])::before{content:"Advertisement";display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mspi-listicle .article a[id="wpadcenter_ad"]{display:inline-block;max-width:100%}
.mspi-listicle .article a[id="wpadcenter_ad"] img{max-width:100%;height:auto;border-radius:10px;margin:0 auto}

/* our own injected in-content ad slot (.mspi-inad) */
.mspi-listicle .mspi-inad{margin:34px 0;text-align:center}
.mspi-listicle .mspi-inad__lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mspi-listicle .mspi-inad a{display:inline-block;max-width:100%}
.mspi-listicle .mspi-inad img{max-width:100%;height:auto;border-radius:10px;margin:0 auto;display:block}

/* ---------- native post-content tags (WP the_content output) ----------
   Scoped with :not([class]) so it styles real post markup without ever
   overriding the static-preview custom classes (.tk__h, .lead, .note…). */
.mspi-listicle .article :is(h2,h3,h4):not([class]){
  font-family:var(--head);font-weight:700;color:var(--navy);
  font-size:clamp(21px,2.3vw,27px);line-height:1.2;letter-spacing:-.01em;
  margin:34px 0 14px;padding-top:30px;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr) + var(--read-h) + 18px)}
.mspi-listicle .article > :is(h2,h3,h4):not([class]):first-child{border-top:0;padding-top:0;margin-top:4px}
.mspi-listicle .article h5:not([class]), .mspi-listicle .article h6:not([class]){
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin:20px 0 2px}
.mspi-listicle .article hr{border:0;border-top:1px solid var(--line);margin:0;display:none}
.mspi-listicle .article :is(ul,ol):not([class]){font-size:17px;color:#2b3744;margin:0 0 18px;padding-left:22px}
.mspi-listicle .article :is(ul,ol):not([class]) li{margin:0 0 8px}
.mspi-listicle .article ul:not([class]) li::marker{color:var(--blue)}
.mspi-listicle .article a:not([class]):not([id]){color:var(--blue);font-weight:600}
.mspi-listicle .article a:not([class]):not([id]):hover{color:var(--blue-dk);text-decoration:underline}
.mspi-listicle .article img:not([class]){border-radius:12px;margin:8px auto}
.mspi-listicle .article strong{color:var(--navy)}
/* "MSP Action:" paragraphs (Doug-style: a bold lead-in) → cream callout */
.mspi-listicle .article p:has(> strong:first-child){
  background:var(--cream);border-left:4px solid var(--green);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:16px 0 0;font-size:16px;color:var(--navy);font-weight:500;line-height:1.55}
.mspi-listicle .article p:has(> strong:first-child) strong{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);display:inline-block;margin-right:4px}

/* conclusion */
.mspi-listicle .wrapup{margin-top:40px;background:var(--ink);color:#fff;border-radius:18px;padding:30px 32px;position:relative;overflow:hidden}
.mspi-listicle .wrapup::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(1,145,71,.40),transparent 70%)}
.mspi-listicle .wrapup__lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#86a7c6}
.mspi-listicle .wrapup__h{font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.01em;margin:8px 0 12px}
.mspi-listicle .wrapup p{color:#cbd8e5;font-size:16.5px;margin:0;position:relative;max-width:62ch}

/* share + related */
.mspi-listicle .share{display:flex;align-items:center;gap:11px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.mspi-listicle .share__lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mspi-listicle .share a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:.15s}
.mspi-listicle .share a svg{width:16px;height:16px;display:block}
.mspi-listicle .share a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.mspi-listicle .related{margin-top:34px}
.mspi-listicle .related__h{font-family:var(--head);font-weight:800;color:var(--navy);font-size:19px;letter-spacing:-.01em;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.mspi-listicle .related__h .pip{width:5px;height:19px;background:var(--green);border-radius:3px}
.mspi-listicle .related__grid{display:grid;gap:12px}
.mspi-listicle .relcard{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 17px;transition:.15s}
.mspi-listicle .relcard:hover{border-color:var(--blue);transform:translateY(-1px)}
.mspi-listicle .relcard__n{font-family:var(--mono);font-size:11px;color:var(--blue);padding-top:3px}
.mspi-listicle .relcard__t{font-family:var(--head);font-weight:600;color:var(--navy);font-size:15.5px;line-height:1.3}

/* ---------- ad rail ---------- */
.mspi-listicle .adrail{display:flex;flex-direction:column;gap:22px}

/* ---------- unified ad unit (.mspi-ad) — all 3 formats ---------- */
.mspi-listicle .mspi-ad{text-align:center;margin:0 auto}
.mspi-listicle .mspi-ad--inline{margin:34px auto}            /* in-content leaderboard */
.mspi-listicle .mspi-ad__lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mspi-listicle .mspi-ad a{display:inline-block;max-width:100%;line-height:0}
.mspi-listicle .mspi-ad img{max-width:100%;height:auto;border-radius:10px;margin:0 auto;display:block;box-shadow:0 1px 2px rgba(25,38,53,.06)}
/* WPAdCenter shortcode wrappers sometimes float/align — neutralize inside our slots */
.mspi-listicle .mspi-ad .wpadcenter-ad-container, .mspi-listicle .mspi-ad .ad-placement, .mspi-listicle .mspi-ad .aligncenter{float:none!important;margin:0 auto!important;display:inline-block;max-width:100%}
.mspi-listicle .mspi-ad .wpadcenter-ad-container img{border-radius:10px}

/* sized placeholder (shown until real ads exist for a size) */
.mspi-listicle .mspi-ad.is-placeholder .mspi-ad__ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:var(--w);max-width:100%;height:var(--h);margin:0 auto;
  border:1px dashed #b9c4d2;border-radius:12px;background:
   repeating-linear-gradient(135deg,#fbfcfd,#fbfcfd 10px,#f3f6f9 10px,#f3f6f9 20px);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#8090a2}
.mspi-listicle .mspi-ad.is-placeholder .mspi-ad__ph small{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#aab6c4}
.mspi-listicle .panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}
.mspi-listicle .panel__h{font-family:var(--head);font-weight:800;color:var(--navy);font-size:15px;margin:0 0 11px;display:flex;align-items:center;gap:8px}
.mspi-listicle .panel__h .pip{width:5px;height:16px;background:var(--green);border-radius:3px}
.mspi-listicle .panel a{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:#2b3744;line-height:1.35}
.mspi-listicle .panel a:first-of-type{border-top:0}
.mspi-listicle .panel a .ar{color:var(--green);font-weight:800}
.mspi-listicle .panel a:hover{color:var(--blue)}
.mspi-listicle .sub{background:var(--ink);border-radius:14px;padding:20px;color:#fff}
.mspi-listicle .sub__h{font-family:var(--head);font-weight:800;font-size:16px;margin:0 0 4px}
.mspi-listicle .sub p{font-size:13px;color:#a6bace;margin:0 0 12px;line-height:1.45}
.mspi-listicle .sub input{width:100%;border:0;border-radius:9px;padding:11px 12px;font-family:inherit;font-size:14px;margin-bottom:9px;outline:none}
.mspi-listicle .sub button{width:100%;background:var(--green);color:#fff;border:0;border-radius:9px;padding:11px;font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer}
.mspi-listicle .sub button:hover{background:var(--green-br)}

/* hide the "Advertisement" label above every ad */
.mspi-listicle .mspi-ad__lab{display:none}

/* ---------- rail filler blocks ---------- */
.mspi-listicle .rail-item{margin:0}
/* newsletter */
.mspi-listicle .rail-sub{background:var(--ink);border-radius:14px;padding:26px 22px 24px;color:#fff}
.mspi-listicle .rail-sub__h{font-family:var(--head);font-weight:800;color:#fff;font-size:17px;line-height:1.25;margin:0 0 7px}
.mspi-listicle .rail-sub p{font-size:13px;color:#a6bace;margin:0 0 12px;line-height:1.45}
.mspi-listicle .rail-sub input{width:100%;border:0;border-radius:9px;padding:11px 12px;font-family:inherit;font-size:14px;margin-bottom:9px;outline:none}
.mspi-listicle .rail-sub button{width:100%;background:var(--green);color:#fff;border:0;border-radius:9px;padding:11px;font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer}
.mspi-listicle .rail-sub button:hover{background:var(--green-br)}
/* podcast CTA */
.mspi-listicle .rail-cta{display:flex;align-items:center;gap:13px;background:var(--navy);color:#fff;border-radius:14px;padding:17px 18px}
.mspi-listicle .rail-cta:hover{background:var(--ink)}
.mspi-listicle .rail-cta__ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.mspi-listicle .rail-cta__t{font-family:var(--head);font-weight:700;font-size:14px;line-height:1.25}
.mspi-listicle .rail-cta__t small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:#a6bace;margin-top:3px}
.mspi-listicle .rail-cta__go{margin-left:auto;color:var(--green-br);font-weight:800}
/* social follow */
.mspi-listicle .rail-soc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}
.mspi-listicle .rail-soc__h{font-family:var(--head);font-weight:800;color:var(--navy);font-size:15px;margin:0 0 12px}
.mspi-listicle .rail-soc__row{display:flex;gap:9px}
.mspi-listicle .rail-soc__row a{flex:1;height:38px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:12px;color:var(--navy);transition:.15s}
.mspi-listicle .rail-soc__row a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mspi-listicle .now, .mspi-listicle .toc__fill, .mspi-listicle .progress__bar{transition:none}
  .mspi-listicle .now__dot{animation:none}
}