/*
Theme Name: Weight Loss Injections
Theme URI: https://weightlossinjections.com
Author: Weight Loss Injections
Author URI: https://weightlossinjections.com
Description: Informational WordPress theme for WeightLossInjections.com — an editorial authority on GLP-1 medications and telehealth providers. Features a Top10-style provider ranking on the homepage, two-column article layout, sticky compare bar, lightbox images, category archive with filter tabs, pre-footer CTA band with newsletter signup, and a Customizer-driven Top N provider list.
Version: 2.2.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wli
Tags: two-columns, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style, news
*/

/* Shared styles — WeightLossInjections.com informational site */
:root {
  --teal: #3BA5B8;
  --teal-dark: #2E8A9A;
  --teal-soft: #EAF4F7;
  --slate: #1F2D3A;
  --slate-2: #2C3E50;
  --ink: #0F1B24;
  --muted: #6B7A85;
  --muted-2: #94A3B0;
  --line: #E5EAEF;
  --line-2: #EEF2F5;
  --bg: #FFFFFF;
  --bg-soft: #F7FAFB;
  --bg-tint: #F4F8FA;
  --yellow: #FFC629;
  --yellow-dark: #E8AE10;
  --green: #2DAA6A;
  --amber: #E8912A;
  --danger: #D4574A;
  --star: #F4B41A;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15,27,36,.04), 0 6px 24px rgba(15,27,36,.06);
  --shadow-lg: 0 2px 4px rgba(15,27,36,.05), 0 20px 50px rgba(15,27,36,.10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* ============ Announcement bar ============ */
.announce {
  background: var(--slate);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: 8px 0;
  text-align: center;
}
.announce a { color: #fff; text-decoration: underline; }

/* ============ Header ============ */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  gap: 24px;
}
.site-logo-img { height: 44px; max-width: 340px; width: auto; }
.main-nav { display: flex; gap: 28px; align-items: center; }

/* The <ul> WordPress emits inside .primary-nav-wrap — force horizontal, no bullets */
.primary-nav-wrap .primary-nav,
.primary-nav-wrap ul.menu,
.primary-nav-wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav-wrap .primary-nav > li,
.primary-nav-wrap ul.menu > li,
.primary-nav-wrap ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.primary-nav-wrap .primary-nav > li::before,
.primary-nav-wrap ul > li::before,
.primary-nav-wrap ul > li::marker {
  content: none;
  display: none;
}
.main-nav a {
  color: var(--slate); font-weight: 500; font-size: .95rem;
  text-decoration: none;
}
.main-nav a:hover { color: var(--teal-dark); }
.main-nav a.active { color: var(--teal-dark); }
.nav-actions { display: flex; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.btn-primary { background: var(--yellow); color: var(--slate); }
.btn-primary:hover { background: var(--yellow-dark); text-decoration: none; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); text-decoration: none; }
.btn-outline { background: #fff; color: var(--slate); border-color: var(--line); }
.btn-outline:hover { border-color: var(--slate); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: .85rem; }
.btn .short-label { display: none; }
.btn .full-label { display: inline; }
.btn-block { display: flex; justify-content: center; width: 100%; }

/* ============ Editorial trust bar ============ */
.trust-bar {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
  color: var(--muted);
}
.trust-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 10px 0; flex-wrap: wrap;
}
.trust-bar strong { color: var(--slate); font-weight: 600; }
.trust-bar .dot { color: var(--muted-2); }

/* ============ Hero ============ */
.hero {
  padding: 56px 0 40px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-tint) 100%);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: .8rem; color: var(--muted);
  font-weight: 500;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(45,170,106,.15);
}
.hero h1 {
  font-size: 3rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--slate);
  margin: 18px 0 14px;
  font-weight: 800;
}
.hero h1 .accent { color: var(--teal-dark); }
.hero-sub {
  font-size: 1.15rem; color: var(--muted); line-height: 1.55;
  max-width: 720px; margin: 0 0 22px;
}
.hero-meta {
  display: flex; align-items: center; gap: 18px;
  font-size: .85rem; color: var(--muted);
  margin-top: 6px;
}
.hero-meta .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display: inline-block;
}
.hero-meta strong { color: var(--slate); font-weight: 600; }

/* ============ Section shells ============ */
section { padding: 56px 0; }
.section-eyebrow {
  color: var(--teal-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.section-h2 {
  font-size: 2.1rem; line-height: 1.15; color: var(--slate);
  letter-spacing: -.01em; font-weight: 800;
  margin: 0 0 12px;
}
.section-lede {
  color: var(--muted); font-size: 1.05rem;
  max-width: 720px; margin: 0 0 32px;
}

/* ============ Top 3 comparison — hero cards ============ */
.top3 { padding-top: 20px; padding-bottom: 60px; background: var(--bg-tint); }
.top3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
/* Cap at max 5 columns on very wide screens */
@media (min-width: 1200px) {
  .top3-grid.count-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .top3-grid.count-5 .rank-card { padding: 20px 18px; }
  .top3-grid.count-5 .rank-card h3 { font-size: 1.1rem; }
  .top3-grid.count-5 .score-num { font-size: 2rem; }
  .top3-grid.count-5 .brand-mark { width: 44px; height: 44px; font-size: .92rem; }
  .top3-grid.count-5 .rank-features li { font-size: .84rem; padding: 3px 0; }
  .top3-grid.count-5 .rank-price .amt { font-size: 1.3rem; }
  .top3-grid.count-5 .btn { padding: 10px 14px; font-size: .88rem; }
  .top3-grid.count-5 .rank-tagline { font-size: .82rem; }
  .top3-grid.count-5 .stars { font-size: .82rem; }
  .top3-grid.count-5 .stars .review-count { font-size: .72rem; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .top3-grid.count-5 { grid-template-columns: repeat(3, 1fr); }
}
.rank-card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative;
  display: flex; flex-direction: column;
}
.rank-card.featured { border: 2px solid var(--teal); box-shadow: var(--shadow-lg); }
.rank-badge {
  position: absolute; top: -12px; left: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal); color: #fff;
  border-radius: 999px; padding: 6px 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.rank-badge.gold { background: var(--slate); }
.rank-badge.silver { background: var(--muted); }
.rank-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
}
.brand-mark {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--bg-tint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--slate);
  font-size: 1.15rem; letter-spacing: -.02em;
  border: 1px solid var(--line);
}
.brand-mark.hers { background: #FDF0EA; color: #C0523E; }
.brand-mark.ro { background: #F4EFE7; color: #6E5A2F; }
.brand-mark.medvi { background: #EEF6F7; color: var(--teal-dark); }
.brand-mark.mochi { background: #FAF3E8; color: #7A5A20; }
.brand-mark.henry { background: #F0F3F6; color: var(--slate); }
.rank-score {
  text-align: right;
}
.score-num {
  font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--teal-dark);
  letter-spacing: -.02em;
}
.score-label {
  font-size: .72rem; color: var(--green);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  margin-top: 2px;
}
.rank-card h3 {
  font-size: 1.35rem; color: var(--slate); margin: 0 0 4px;
  font-weight: 700; letter-spacing: -.01em;
}
.rank-tagline { color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.stars { color: var(--star); font-size: .95rem; letter-spacing: 1px; }
.stars .review-count { color: var(--muted); font-size: .82rem; margin-left: 6px; letter-spacing: 0; }
.rank-features { list-style: none; padding: 0; margin: 16px 0; }
.rank-features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: .92rem; color: var(--ink);
}
.rank-features li::before {
  content: "✓"; color: var(--green); font-weight: 800; flex-shrink: 0;
  margin-top: 1px;
}
.rank-price {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 0; margin-top: auto;
  border-top: 1px solid var(--line-2);
}
.rank-price .from { color: var(--muted); font-size: .82rem; }
.rank-price .amt { font-size: 1.6rem; font-weight: 800; color: var(--slate); letter-spacing: -.02em; }
.rank-price .per { color: var(--muted); font-size: .88rem; }
.rank-cta { display: flex; flex-direction: column; gap: 8px; }
.rank-cta .btn { justify-content: center; }
.rank-cta .eligibility {
  text-align: center; font-size: .82rem; color: var(--muted);
}
.rank-cta .eligibility a { color: var(--teal-dark); font-weight: 600; }

/* ============ Comparison table ============ */
.cmp-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp-table th, .cmp-table td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line-2);
  font-size: .92rem;
}
.cmp-table th {
  background: var(--bg-tint); color: var(--muted);
  font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .brand-cell { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--slate); }
.cmp-table .brand-mark { width: 36px; height: 36px; font-size: .78rem; border-radius: 8px; }
.cmp-table .score {
  font-weight: 800; color: var(--teal-dark); font-size: 1.05rem;
}
.cmp-table td.center { text-align: center; }
.cmp-table .yes { color: var(--green); font-weight: 700; }
.cmp-table .no { color: var(--muted-2); font-weight: 700; }
.cmp-table .btn { padding: 8px 16px; font-size: .82rem; }

/* ============ Callouts ============ */
.callout {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(90deg, var(--teal-soft), #fff);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin: 32px 0;
}
.callout-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800;
  flex-shrink: 0;
}
.callout-label {
  font-size: .78rem; color: var(--teal-dark); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.callout-body { color: var(--slate); font-size: 1.05rem; }
.callout-body strong { color: var(--slate); }
.callout-body .src { font-size: .82rem; color: var(--muted); margin-left: 6px; }

/* ============ Info grid ============ */
.info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 20px;
}
.info-card {
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.info-card .num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-bottom: 14px;
}
.info-card h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--slate); font-weight: 700; }
.info-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ============ FAQ ============ */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-q {
  font-weight: 700; color: var(--slate); font-size: 1.08rem;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.faq-q .chev { color: var(--muted); font-weight: 400; }
.faq-a { color: var(--muted); margin-top: 10px; font-size: .98rem; line-height: 1.65; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }

/* ============ Pre-footer CTA band ============ */
.pre-footer {
  background: linear-gradient(135deg, #1F2D3A 0%, #2C3E50 60%, #2E8A9A 130%);
  color: #fff;
  padding: 56px 0;
}
.pre-footer-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 60px; align-items: center;
}
.pre-footer .pf-eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7); font-weight: 700;
  margin-bottom: 10px;
}
.pre-footer h2 {
  font-size: 2rem; line-height: 1.2; color: #fff;
  margin: 0 0 14px; font-weight: 800; letter-spacing: -.01em;
}
.pre-footer p {
  color: rgba(255,255,255,.82); font-size: 1rem;
  margin: 0 0 22px; line-height: 1.55;
  max-width: 460px;
}
.pre-footer .pf-ranks {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.pre-footer .pf-ranks .r {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.pre-footer .pf-ranks .r .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--slate);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .74rem; flex-shrink: 0;
}
.pre-footer .pf-ranks .r .nm {
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pre-footer .newsletter-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 30px;
  backdrop-filter: blur(6px);
}
.pre-footer .newsletter-card h3 {
  color: #fff; font-size: 1.35rem; margin: 0 0 8px;
  font-weight: 800; letter-spacing: -.01em;
}
.pre-footer .newsletter-card p {
  color: rgba(255,255,255,.82); font-size: .95rem;
  margin: 0 0 18px;
}
.pre-footer .newsletter-form {
  display: flex; gap: 8px;
}
.pre-footer .newsletter-form input {
  flex: 1; min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff; border-radius: 999px;
  font-family: inherit; font-size: .95rem;
  outline: none;
}
.pre-footer .newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.pre-footer .newsletter-form input:focus {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.14);
}
.pre-footer .newsletter-form .btn { flex-shrink: 0; }
.pre-footer .nl-trust {
  margin-top: 12px; color: rgba(255,255,255,.6);
  font-size: .8rem;
  display: flex; align-items: center; gap: 8px;
}

/* ============ Sidebar newsletter block ============ */
.sidebar-newsletter {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.sidebar-newsletter::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark), var(--yellow));
}
.sidebar-newsletter .nl-eyebrow {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-dark); font-weight: 700;
  margin-bottom: 8px;
}
.sidebar-newsletter h3 {
  font-size: 1.1rem; color: var(--slate);
  margin: 0 0 8px; font-weight: 700; line-height: 1.3;
}
.sidebar-newsletter p {
  color: var(--muted); font-size: .88rem;
  margin: 0 0 14px; line-height: 1.5;
}
.sidebar-newsletter form { display: flex; flex-direction: column; gap: 8px; }
.sidebar-newsletter input {
  padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 999px; font-family: inherit;
  font-size: .92rem; outline: none;
}
.sidebar-newsletter input:focus { border-color: var(--teal); }
.sidebar-newsletter .btn { width: 100%; justify-content: center; }
.sidebar-newsletter .nl-trust {
  margin-top: 8px; color: var(--muted); font-size: .74rem;
  display: flex; align-items: center; gap: 6px;
}

/* ============ More Articles (below article body) ============ */
.more-articles {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  padding: 60px 0;
  margin-top: 40px;
}
.more-articles .header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px;
}
.more-articles h2 {
  font-size: 1.8rem; color: var(--slate);
  margin: 0; font-weight: 800; letter-spacing: -.01em;
}
.more-articles .see-all {
  color: var(--teal-dark); font-weight: 600; font-size: .92rem;
}
.more-articles-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.more-articles-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ============ Footer ============ */
.site-footer {
  background: var(--slate);
  color: #C4CFD8;
  padding: 60px 0 24px;
  margin-top: 60px;
}
.footer-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 40px;
  border-bottom: 1px solid #2A3A48;
}
.footer-brand p { color: #94A3B0; font-size: .92rem; margin: 14px 0 20px; max-width: 320px; }
.footer-col h4 {
  font-size: .78rem; color: #fff;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 16px; font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 8px 0; }
.footer-col a { color: #C4CFD8; text-decoration: none; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: #7C8B98;
  flex-wrap: wrap; gap: 10px;
}
.medical-disclaimer {
  background: #172530; border: 1px solid #2A3A48;
  border-radius: var(--radius-sm);
  padding: 16px 20px; color: #94A3B0;
  font-size: .82rem; margin: 30px 0 0;
}
.medical-disclaimer strong { color: #fff; }

/* ============ Two-column article layout ============ */
.article-wrap {
  padding: 40px 0 60px;
}
.article-grid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: stretch; /* v2.1.1 — sidebar column matches article height so sticky CTA can float the full article */
}
.breadcrumbs {
  font-size: .82rem; color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--teal-dark); }
.breadcrumbs .sep { margin: 0 8px; color: var(--muted-2); }

.article-header .cat-pill {
  display: inline-block; background: var(--teal-soft); color: var(--teal-dark);
  padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.article-header h1 {
  font-size: 2.4rem; line-height: 1.15;
  color: var(--slate); margin: 14px 0 12px;
  letter-spacing: -.01em; font-weight: 800;
}
.article-meta {
  display: flex; gap: 16px; align-items: center;
  color: var(--muted); font-size: .88rem;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.article-meta .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
}
.article-meta strong { color: var(--slate); }
.medical-review {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-tint); border-radius: 999px;
  padding: 4px 10px; color: var(--slate);
  font-size: .78rem; font-weight: 600;
}
.medical-review::before {
  content: "✓"; color: var(--green); font-weight: 800;
}

.article-body p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); margin: 0 0 20px; }
.article-body h2 { font-size: 1.65rem; color: var(--slate); margin: 32px 0 14px; letter-spacing: -.01em; font-weight: 700; }
.article-body h3 { font-size: 1.25rem; color: var(--slate); margin: 26px 0 10px; font-weight: 700; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin: 8px 0; font-size: 1.02rem; color: var(--ink); }
.article-body blockquote {
  border-left: 4px solid var(--teal);
  padding: 4px 20px; margin: 24px 0;
  color: var(--slate); font-style: italic;
  background: var(--teal-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body .key-takeaway {
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px; margin: 24px 0;
}
.article-body .key-takeaway h4 {
  font-size: .82rem; color: var(--teal-dark);
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 10px; font-weight: 700;
}
.article-body .key-takeaway p { margin: 0; font-size: .98rem; }

.article-body .inline-cta {
  background: linear-gradient(135deg, var(--slate) 0%, var(--slate-2) 100%);
  color: #fff; border-radius: var(--radius);
  padding: 28px 30px; margin: 32px 0;
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
}
.article-body .inline-cta .txt h3 { color: #fff; margin: 0 0 6px; font-size: 1.2rem; }
.article-body .inline-cta .txt p { color: #C4CFD8; margin: 0; font-size: .95rem; }
.article-body .inline-cta .btn { flex-shrink: 0; }

.article-tags {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.tag {
  background: var(--bg-tint); color: var(--slate);
  border-radius: 999px; padding: 6px 14px;
  font-size: .82rem; font-weight: 500;
}

/* Sidebar */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;      /* prevent overflow inside the grid column */
  align-self: stretch; /* force full column height so sticky CTA has full travel */
  height: 100%;        /* redundant safety net for the same */
}
.article-sidebar > * + * { margin-top: 0; } /* gap handles spacing now */
.sidebar-block {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.sidebar-cta {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #fff; border-radius: var(--radius);
  padding: 24px;
  position: sticky; top: 92px;
}
.sidebar-cta .eyebrow {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); font-weight: 700;
  margin-bottom: 8px;
}
.sidebar-cta h3 {
  font-size: 1.35rem; line-height: 1.25; margin: 0 0 8px;
  color: #fff; font-weight: 800; letter-spacing: -.01em;
}
.sidebar-cta p {
  color: rgba(255,255,255,.9); font-size: .92rem;
  margin: 0 0 16px;
}
.sidebar-cta .mini-rank {
  background: rgba(255,255,255,.12); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-cta .mini-rank .m {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem;
}
.sidebar-cta .mini-rank .name { flex: 1; font-weight: 600; font-size: .92rem; }
.sidebar-cta .mini-rank .s { font-weight: 800; font-size: .92rem; }
.sidebar-cta .btn { margin-top: 14px; width: 100%; justify-content: center; }

.toc h4 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 12px;
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.toc li { counter-increment: t; padding: 6px 0; font-size: .92rem; }
.toc li a { color: var(--slate); text-decoration: none; }
.toc li a:hover { color: var(--teal-dark); }
.toc li::before {
  content: counter(t, decimal-leading-zero);
  color: var(--muted-2); font-weight: 700; margin-right: 8px; font-size: .82rem;
}

.related h4 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 14px;
}
.related-item {
  display: flex; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line-2);
}
.related-item:first-of-type { border-top: none; padding-top: 0; }
.related-item .thumb {
  width: 64px; height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, var(--teal-soft), #fff);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.related-item .txt h5 {
  font-size: .92rem; color: var(--slate); margin: 0 0 4px;
  line-height: 1.35; font-weight: 600;
}
.related-item .txt .r-meta { color: var(--muted); font-size: .78rem; }

/* ============ Article images (click to expand) ============ */
.article-body .figure {
  margin: 30px 0;
  cursor: zoom-in;
  position: relative;
}
.article-body .figure .img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.article-body .figure:hover .img-wrap {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.article-body .figure img,
.article-body .figure svg,
.article-body .figure object {
  display: block;
  width: 100%;
  height: auto;
}
.article-body .figure .expand-hint {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(15,27,36,.72);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.article-body .figure:hover .expand-hint { opacity: 1; }
.article-body .figure figcaption {
  color: var(--muted);
  font-size: .88rem;
  margin-top: 10px;
  padding: 0 4px;
  font-style: normal;
}
.article-body .figure figcaption strong { color: var(--slate); }

.hero-figure {
  margin: 24px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-tint);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-figure .expand-hint {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(15,27,36,.7);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  opacity: .85;
}

/* Lightbox overlay */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(15,27,36,.92);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox .lb-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff; border: none; cursor: pointer;
  font-size: 1.4rem;
}
.lightbox .lb-caption {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.85);
  font-size: .95rem;
}
.lightbox img, .lightbox object {
  max-width: min(1100px, 92vw); max-height: 82vh;
  border-radius: var(--radius);
  background: #fff;
}

/* ============ Sticky Compare bar (desktop + mobile) ============ */
.sticky-compare {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), #fff);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,27,36,.10);
  padding: 12px 0;
  z-index: 90;
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform .25s ease;
}
.sticky-compare-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.sticky-compare .sc-left {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.sticky-compare .sc-avatars {
  display: flex;
}
.sticky-compare .sc-avatars .a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff;
}
.sticky-compare .sc-avatars .a:first-child { margin-left: 0; }
.sticky-compare .sc-avatars .a.a1 { background: linear-gradient(135deg,#E9736B,#C0523E); }
.sticky-compare .sc-avatars .a.a2 { background: linear-gradient(135deg,#3BA5B8,#2E8A9A); }
.sticky-compare .sc-avatars .a.a3 { background: linear-gradient(135deg,#8A6E3E,#6E5A2F); }
.sticky-compare .sc-avatars .a.a4 { background: linear-gradient(135deg,#4C6273,#2C3E50); }
.sticky-compare .sc-avatars .a.a5 { background: linear-gradient(135deg,#7A5A20,#5A4318); font-size: .68rem; }
.sticky-compare .sc-text {
  min-width: 0;
}
.sticky-compare .sc-title {
  font-weight: 700; color: var(--slate); font-size: 1rem;
  line-height: 1.3;
}
.sticky-compare .sc-sub {
  color: var(--muted); font-size: .82rem;
  margin-top: 2px;
}
.sticky-compare .sc-cta { flex-shrink: 0; }

/* Give article bottom padding so sticky bar doesn't cover content */
body.has-sticky-compare .article-wrap { padding-bottom: 120px; }
body.has-sticky-compare .site-footer { margin-bottom: 0; padding-bottom: 90px; }

/* ============ Category archive ============ */
.cat-hero {
  padding: 60px 0 30px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-tint) 100%);
  border-bottom: 1px solid var(--line);
}
.cat-hero .breadcrumbs { margin-bottom: 20px; }
.cat-hero .cat-eyebrow {
  display: inline-block;
  background: var(--teal-soft); color: var(--teal-dark);
  padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.cat-hero h1 {
  font-size: 2.6rem; color: var(--slate);
  margin: 14px 0 12px;
  letter-spacing: -.015em; font-weight: 800;
  line-height: 1.15;
}
.cat-hero p.lede {
  color: var(--muted); font-size: 1.1rem;
  max-width: 760px; margin: 0 0 20px;
}
.cat-hero .cat-meta {
  color: var(--muted); font-size: .88rem;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.cat-hero .cat-meta strong { color: var(--slate); }

/* Category filter tabs */
.cat-tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky; top: 76px; z-index: 50;
}
.cat-tabs-inner {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 12px 0;
}
.cat-tabs a {
  flex-shrink: 0;
  padding: 8px 16px; border-radius: 999px;
  font-size: .9rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cat-tabs a:hover { background: var(--bg-tint); color: var(--slate); }
.cat-tabs a.active {
  background: var(--slate); color: #fff;
}

/* Featured post (top of category) */
.featured-post {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  background: #fff; border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 40px;
  box-shadow: var(--shadow);
}
.featured-post .thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--teal-soft), #D3E7EC);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
}
.featured-post .thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-post .txt { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-post .cat-pill { display: inline-block; align-self: flex-start; margin-bottom: 12px; background: var(--teal-soft); color: var(--teal-dark); padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.featured-post h2 { font-size: 1.85rem; color: var(--slate); line-height: 1.2; margin: 0 0 12px; font-weight: 800; letter-spacing: -.01em; }
.featured-post .excerpt { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0 0 18px; }
.featured-post .meta { color: var(--muted); font-size: .85rem; display: flex; gap: 12px; align-items: center; }
.featured-post .meta strong { color: var(--slate); }

/* Post grid */
.post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin-bottom: 40px;
}
.post-card {
  background: #fff; border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card .thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--teal-soft), #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
}
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card .cat-pill { display: inline-block; align-self: flex-start; margin-bottom: 10px; background: var(--bg-tint); color: var(--slate); padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.post-card h3 { font-size: 1.1rem; line-height: 1.3; color: var(--slate); margin: 0 0 8px; font-weight: 700; }
.post-card .excerpt { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }
.post-card .meta { color: var(--muted); font-size: .8rem; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); }

.category-list {
  background: var(--bg-tint);
  padding: 60px 0;
  border-top: 1px solid var(--line);
}
.category-list h3 { font-size: 1.25rem; color: var(--slate); margin: 0 0 20px; font-weight: 700; }
.cat-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cat-chips a {
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px;
  font-size: .88rem; color: var(--slate);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.cat-chips a:hover { border-color: var(--teal); color: var(--teal-dark); }
.cat-chips a .count { color: var(--muted); font-size: .78rem; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .top3-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-sidebar { margin-top: 40px; }
  .sidebar-cta { position: static; }
  .hero h1 { font-size: 2.2rem; }
  .section-h2 { font-size: 1.65rem; }
}
@media (max-width: 960px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post .txt { padding: 26px; }
  .featured-post h2 { font-size: 1.5rem; }
  .post-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cat-hero h1 { font-size: 2rem; }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .info-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 30px; }
  .hero h1 { font-size: 1.9rem; }
  .hero-sub { font-size: 1rem; }
  section { padding: 40px 0; }
  .rank-card { padding: 22px; }
  .article-header h1 { font-size: 1.85rem; }
  .article-body .inline-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .article-body .inline-cta .btn { width: 100%; justify-content: center; }
  .footer-cols { grid-template-columns: 1fr; }
  .trust-bar-inner { gap: 12px; font-size: .78rem; }
  .nav-actions .btn { padding: 9px 12px; font-size: .8rem; white-space: nowrap; }
  .nav-actions .btn .arrow { display: none; }
  .nav-actions .btn .full-label { display: none; }
  .nav-actions .btn .short-label { display: inline; }
  .site-logo-img { height: 34px; }
  .nav-inner { gap: 10px; }

  .post-grid { grid-template-columns: 1fr; }
  .cat-hero { padding: 30px 0 20px; }
  .cat-hero h1 { font-size: 1.7rem; }
  .cat-hero p.lede { font-size: 1rem; }

  /* Sticky compare shrinks on mobile */
  .sticky-compare { padding: 10px 0; }
  .sticky-compare .sc-avatars { display: none; }
  .sticky-compare .sc-title { font-size: .92rem; }
  .sticky-compare .sc-sub { font-size: .74rem; }
  .sticky-compare .sc-cta .btn { padding: 10px 16px; font-size: .85rem; }
  body.has-sticky-compare .article-wrap { padding-bottom: 100px; }

  .lightbox { padding: 20px; }

  .pre-footer { padding: 40px 0; }
  .pre-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .pre-footer h2 { font-size: 1.5rem; }
  .pre-footer .newsletter-card { padding: 22px; }
  .pre-footer .newsletter-form { flex-direction: column; }
  .pre-footer .newsletter-form .btn { justify-content: center; }

  .more-articles-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .more-articles h2 { font-size: 1.4rem; }
}
@media (max-width: 960px) {
  .pre-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .more-articles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   WordPress Core Utilities
   ========================================================================== */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%);
  clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto !important; -webkit-clip-path: none; clip-path: none;
  color: var(--slate); display: block; font-size: 14px; font-weight: 700; height: auto;
  left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px;
  width: auto; z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { position: absolute; left: 6px; top: 6px; z-index: 100001; background: #fff; padding: 10px 14px; border-radius: 8px; }

/* Custom logo */
.custom-logo-link img,
.site-logo .custom-logo { max-height: 40px; width: auto; display: block; }

/* Nav menu items from WP menu */
.primary-nav .menu-item > a,
.primary-nav li > a { color: var(--slate); text-decoration: none; font-weight: 600; }
.primary-nav .current-menu-item > a { color: var(--teal); }

/* Alignment / block support */
.alignleft  { float: left;  margin: 6px 24px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide,
.alignfull  { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 6px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 20px 0; }
.gallery-item img { width: 100%; height: auto; border-radius: 8px; }
.sticky, .bypostauthor { }
img { max-width: 100%; height: auto; }

/* Blocks color palette (mirror editor palette) */
.has-slate-color   { color: var(--slate); }
.has-teal-color    { color: var(--teal); }
.has-slate-background-color { background-color: var(--slate); }
.has-teal-background-color  { background-color: var(--teal); }
.has-light-background-color { background-color: #F4F8FA; }
.has-sky-background-color   { background-color: #D4E7EE; }

/* Comments */
.comments-area { margin-top: 40px; }
.comment-list { list-style: none; padding: 0; }
.comment-body { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; background: #fff; }
.comment-metadata { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.comment-author .fn { font-weight: 700; color: var(--slate); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 1rem; background: #fff;
}
.comment-form textarea { min-height: 130px; }
.comment-form label { display: block; margin: 12px 0 6px; font-weight: 600; color: var(--slate); font-size: .9rem; }

/* Pagination */
.pagination, .nav-links { display: flex; justify-content: center; gap: 6px; margin: 30px 0; flex-wrap: wrap; }
.pagination .page-numbers,
.nav-links .page-numbers { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--slate); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current { background: var(--slate); color: #fff; border-color: var(--slate); }
.pagination .page-numbers:hover { border-color: var(--teal); color: var(--teal); }

/* Widget generic */
.widget { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin-bottom: 20px; }
.widget-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin: 0 0 12px; }

/* Search form */
.search-form { display: flex; gap: 8px; }
.search-form .search-field {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-family: inherit; font-size: 1rem; background: #fff;
}
.search-form .search-submit {
  background: var(--slate); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 16px; font-weight: 700; cursor: pointer;
}

/* WP-generated post pagination in single */
.post-navigation, .posts-navigation {
  margin: 30px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.post-navigation .nav-links { display: contents; }
.post-navigation .nav-previous a,
.post-navigation .nav-next a { color: var(--slate); font-weight: 700; text-decoration: none; }
.post-navigation .nav-next { text-align: right; }

/* Mobile nav toggle (WP header) */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--slate); border-radius: 2px; }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top:  7px; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-block; }
  .primary-nav-wrap { display: none; }
  .primary-nav-wrap.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--line); padding: 14px 20px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .primary-nav-wrap.is-open .primary-nav { flex-direction: column; gap: 14px; }
  .site-header { position: relative; }
}

/* ============ v2.0.1 — Row layout for Top N providers ============ */
.top-rows {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 8px;
}
.top-rows .rank-card.rank-row {
  display: grid;
  grid-template-columns: 132px 1fr 140px 200px;
  align-items: center;
  gap: 24px;
  padding: 20px 26px 20px 22px;
  position: relative;
}
.top-rows .rank-card.rank-row.featured {
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(90deg, #fff 0%, #F6FAFB 100%);
}
.top-rows .rank-card.rank-row .rank-badge {
  top: -14px; left: 20px;
}
.rank-row .row-rank {
  display: flex; align-items: center; gap: 14px;
}
.rank-row .row-rank-num {
  font-size: 1.75rem; font-weight: 800; color: var(--muted);
  min-width: 42px; text-align: center; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rank-row.featured .row-rank-num { color: var(--teal-dark); }
.rank-row .brand-mark {
  width: 66px; height: 66px; font-size: 1.05rem; flex-shrink: 0;
}
.rank-row .row-info { min-width: 0; }
.rank-row .row-info h3 {
  font-size: 1.2rem; margin: 0 0 4px; color: var(--slate); font-weight: 700;
  letter-spacing: -.01em;
}
.rank-row .rank-tagline {
  margin: 0 0 8px; color: var(--muted); font-size: .9rem;
}
.rank-row .rank-features {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 8px 0 0; padding: 0; list-style: none;
}
.rank-row .rank-features li {
  font-size: .84rem; padding: 0; color: var(--ink);
}
.rank-row .row-score { text-align: center; padding: 0 8px; }
.rank-row .row-score .score-num {
  font-size: 2.2rem; line-height: 1;
}
.rank-row .row-score .score-label {
  margin: 4px 0 10px;
}
.rank-row .row-price {
  padding: 0; margin: 0; border: 0;
  justify-content: center;
}
.rank-row .row-price .amt { font-size: 1.2rem; }
.rank-row .row-cta {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
}
.rank-row .row-cta .btn { justify-content: center; white-space: nowrap; }
.rank-row .row-cta-secondary {
  text-align: center; font-size: .82rem; color: var(--teal-dark);
  text-decoration: none; font-weight: 600;
}
.rank-row .row-cta-secondary:hover { text-decoration: underline; }

/* Row layout responsive collapse */
@media (max-width: 900px) {
  .top-rows .rank-card.rank-row {
    grid-template-columns: 88px 1fr 130px;
    grid-template-areas:
      "rank info score"
      "rank info cta"
      "cta cta cta";
    row-gap: 14px;
    padding: 22px 20px 20px;
  }
  .rank-row .row-rank { grid-area: rank; flex-direction: column; gap: 8px; align-items: center; }
  .rank-row .row-rank-num { font-size: 1.4rem; min-width: 0; }
  .rank-row .brand-mark { width: 56px; height: 56px; font-size: .9rem; }
  .rank-row .row-info { grid-area: info; }
  .rank-row .row-score { grid-area: score; padding: 0; }
  .rank-row .row-score .score-num { font-size: 1.8rem; }
  .rank-row .row-cta { grid-area: cta; flex-direction: row; align-items: center; justify-content: space-between; }
  .rank-row .row-cta .btn { flex: 1; }
}
@media (max-width: 560px) {
  .top-rows .rank-card.rank-row {
    grid-template-columns: 1fr 90px;
    grid-template-areas:
      "rank score"
      "info info"
      "cta cta";
    gap: 14px;
  }
  .rank-row .row-rank { flex-direction: row; justify-content: flex-start; }
  .rank-row .rank-features { gap: 4px 14px; }
  .rank-row .row-cta { flex-direction: column; }
}

/* ============ v2.0.1 — Eyebrow tooltip (affiliate disclosure) ============ */
.eyebrow-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted-2); color: #fff;
  font-size: .68rem; font-weight: 800; font-style: normal;
  margin-left: 6px; cursor: help; vertical-align: 2px;
  position: relative; transition: background .15s ease;
}
.eyebrow-info:hover, .eyebrow-info:focus {
  background: var(--teal); outline: none;
}
.eyebrow-info-tip {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 300px; max-width: 80vw;
  background: var(--slate); color: #fff;
  padding: 12px 14px; border-radius: 8px;
  font-size: .8rem; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  text-align: left;
}
.eyebrow-info-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--slate);
}
.eyebrow-info:hover .eyebrow-info-tip,
.eyebrow-info:focus .eyebrow-info-tip {
  opacity: 1; visibility: visible;
}
@media (max-width: 560px) {
  .eyebrow-info-tip { width: 240px; left: 0; transform: none; }
  .eyebrow-info-tip::after { left: 9px; transform: none; }
}

/* ============ v2.0.1 — Affiliate disclosure (footer) ============ */
.affiliate-disclosure {
  background: transparent; border: 1px solid #2A3A48;
  border-radius: var(--radius-sm);
  padding: 14px 20px; color: #94A3B0;
  font-size: .78rem; margin: 12px 0 0;
  line-height: 1.55;
}
.affiliate-disclosure strong { color: #C4D0DA; }

/* ============ v2.0.1 — Inline mid-page Top 3 CTA ============ */
.inline-top3 {
  background: var(--bg-tint);
  padding: 44px 0;
  margin: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.inline-top3-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 24px;
}
.inline-top3-head .section-eyebrow,
.inline-top3-head .section-h2,
.inline-top3-head .section-lede { margin-bottom: 6px; }
.inline-top3-head .section-lede { margin-bottom: 0; }
.inline-top3-foot { text-align: center; margin-top: 22px; }
.inline-top3-link {
  color: var(--teal-dark); font-weight: 700; text-decoration: none;
  font-size: .95rem;
}
.inline-top3-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .inline-top3-head { flex-direction: column; align-items: flex-start; }
  .inline-top3-head .btn { align-self: stretch; text-align: center; }
}

/* ============ v2.0.1 — Btn outline variant ============ */
.btn-outline {
  background: transparent; color: var(--teal-dark);
  border: 1.5px solid var(--teal); padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-weight: 700; font-size: .9rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s ease, color .18s ease;
}
.btn-outline:hover { background: var(--teal); color: #fff; }

/* ============ v2.0.1 — Mobile nav dropdown fix ============ */
/* Diagnosis: mobile dropdown had no z-index/backdrop, floating over hero.
   Fix: add z-index, backdrop overlay, and body scroll-lock class. */
@media (max-width: 960px) {
  .primary-nav-wrap.main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 84vw);
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
    padding: 72px 24px 24px;
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.85,.35,1);
    display: block !important;
    visibility: hidden;
  }
  .primary-nav-wrap.main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .primary-nav-wrap.main-nav .primary-nav,
  .primary-nav-wrap.main-nav ul.menu,
  .primary-nav-wrap.main-nav ul {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .primary-nav-wrap.main-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .primary-nav-wrap.main-nav li::before,
  .primary-nav-wrap.main-nav li::marker {
    content: none;
    display: none;
  }
  .primary-nav-wrap.main-nav li a {
    display: block; padding: 14px 8px;
    border-bottom: 1px solid var(--line-2);
    font-size: 1rem; font-weight: 600; color: var(--slate);
    text-decoration: none;
  }
  .primary-nav-wrap.main-nav li a:hover {
    color: var(--teal-dark);
  }
  /* Backdrop */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(15, 23, 32, .55);
    z-index: 1000;
    opacity: 1; transition: opacity .28s ease;
  }
  body.nav-open { overflow: hidden; }
  /* Nav toggle stays above backdrop */
  .nav-toggle { position: relative; z-index: 1002; }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block; width: 22px; height: 2px;
    background: var(--slate); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span { position: relative; }
  .nav-toggle span::before { content: ""; position: absolute; top: -7px; left: 0; }
  .nav-toggle span::after  { content: ""; position: absolute; top:  7px; left: 0; }
  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { transform: rotate(45deg) translate(5px, 5px); }
  body.nav-open .nav-toggle span::after  { transform: rotate(-45deg) translate(5px, -5px); }
}

/* ============================================================
   GUIDE TABS — Homepage GLP-1 tabbed content section (v2.0.2)
   ============================================================ */
.guide-tabs-section {
  padding: 56px 0 64px;
  background: linear-gradient(180deg, #f6fbfa 0%, #ffffff 100%);
  border-top: 1px solid var(--wli-border, #e5eaef);
  border-bottom: 1px solid var(--wli-border, #e5eaef);
}
.guide-tabs-section .section-eyebrow { color: var(--wli-brand, #0e9488); }
.guide-tabs-section .section-h2      { margin: 6px 0 10px; }
.guide-tabs-section .section-lede    { max-width: 720px; margin-bottom: 28px; color: var(--wli-muted, #57616b); }

/* Tabs bar */
.guide-tabs {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--wli-border, #e5eaef);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 32, .04);
}
.guide-tab {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 0; background: transparent;
  border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 14px;
  color: var(--wli-muted, #57616b);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.guide-tab:hover  { color: var(--wli-ink, #0f1720); background: #f2f6f8; }
.guide-tab:focus-visible { outline: 2px solid var(--wli-brand, #0e9488); outline-offset: 2px; }
.guide-tab.active {
  background: var(--wli-brand, #0e9488);
  color: #fff;
  box-shadow: 0 6px 14px rgba(14, 148, 136, .25);
}
.guide-tab.active .guide-tab-icon svg { color: #fff; }
.guide-tab-icon { display: inline-flex; color: var(--wli-brand, #0e9488); }
.guide-tab-icon svg { display: block; }

/* Panels */
.guide-panels { position: relative; }
.guide-panel { display: none; animation: fadeIn .18s ease; }
.guide-panel.active { display: block; }
.guide-panel[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.guide-panel-intro {
  font-size: 17px; color: var(--wli-ink, #0f1720); margin: 0 0 20px;
  max-width: 780px;
}

.guide-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.guide-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--wli-border, #e5eaef);
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15, 23, 32, .10);
  border-color: #cfe6e2;
}
.guide-card-thumb { aspect-ratio: 16 / 9; background: #eef4f5; overflow: hidden; }
.guide-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card-thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #d1eae6 0%, #a5d8d1 100%);
}
.guide-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.guide-card .cat-pill {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: #e7f4f2; color: #0e9488;
}
.guide-card h3 { font-size: 18px; line-height: 1.32; margin: 0; font-weight: 700; }
.guide-card-excerpt { color: var(--wli-muted, #57616b); font-size: 14.5px; line-height: 1.55; margin: 0; }
.guide-card-meta   { color: #7a8590; font-size: 12.5px; margin-top: auto; padding-top: 6px; }

.guide-panel-foot {
  margin-top: 22px;
  display: flex; justify-content: center;
}
.guide-panel-foot .btn { min-width: 220px; }

.guide-panel-empty {
  padding: 40px 24px; text-align: center;
  border: 1px dashed var(--wli-border, #e5eaef);
  border-radius: 12px; background: #fff;
  color: var(--wli-muted, #57616b);
}

/* Responsive */
@media (max-width: 960px) {
  .guide-panel-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .guide-tabs::-webkit-scrollbar { display: none; }
  .guide-tab { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .guide-panel-grid { grid-template-columns: 1fr; }
  .guide-tabs-section { padding: 40px 0 48px; }
  .guide-tab { padding: 9px 12px; font-size: 13.5px; }
}

/* ============================================================
   v2.0.3 — Hide 2-letter brand-mark circles everywhere and
   tighten spacing on containers that used to hold them.
   ============================================================ */
.brand-mark,
.sc-avatars,
.pf-avatars,
.mini-rank .m + .m-avatar {
  display: none !important;
}

/* Rank rows previously had grid columns 132px 1fr 140px 200px with brand-mark
   inside .row-rank; make .row-rank narrower and remove circle-related spacing. */
.top-rows .rank-card.rank-row {
  grid-template-columns: 80px 1fr 140px 200px;
}
.top-rows .rank-card.rank-row .row-rank {
  gap: 0;
  justify-content: center;
}
@media (max-width: 900px) {
  .top-rows .rank-card.rank-row {
    grid-template-columns: 70px 1fr 120px;
  }
  .top-rows .rank-card.rank-row .row-cta {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .top-rows .rank-card.rank-row {
    grid-template-columns: 1fr;
  }
}

/* Homepage Top-5 CARD variant: rank-card-head previously had brand-mark on the
   left and rank-score on the right. Now show only the score, right-aligned. */
.rank-card .rank-card-head {
  justify-content: flex-end;
}

/* Comparison table brand-cell no longer has a circle; remove the gap. */
.cmp-table .brand-cell {
  gap: 0;
}

/* v2.0.3 — sidebar CTA no longer shows numbered ranks; give the button
   room to breathe now that it directly follows the description. */
.sidebar-cta .btn { margin-top: 20px; }
.sidebar-cta .mini-rank { display: none !important; }

/* ============================================================
   v2.0.4 — Compact inline Top 3 for article columns + logo support
   ============================================================ */

/* Provider LOGO — replaces the removed brand-mark circle */
.row-logo,
.row-logo-inline,
.rank-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.row-logo img,
.row-logo-inline img,
.rank-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Row variant logo: shows on WIDE containers as a proper column-2 logo */
.row-logo {
  width: 96px;
  height: 56px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--line, #e5eaef);
  border-radius: 10px;
  margin-top: 8px;
}
/* Inline logo (small, next to h3) shows only on NARROW containers */
.row-logo-inline { display: none; }
.row-logo-inline img { max-height: 32px; }

/* Card variant logo (homepage grid card) */
.rank-logo {
  width: 88px;
  height: 44px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--line, #e5eaef);
  border-radius: 8px;
}

/* ---- Inline Top 3 in narrow ARTICLE column: reshape to compact card ---- */
/* Use CSS container queries where supported, media queries as fallback. */
.inline-top3 { container-type: inline-size; container-name: it3; }

@container it3 (max-width: 720px) {
  .inline-top3 .top-rows .rank-card.rank-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "rank info"
      "score score"
      "cta cta";
    gap: 12px 14px;
    padding: 18px;
    position: relative;
  }
  .inline-top3 .top-rows .rank-card.rank-row .row-rank    { grid-area: rank; flex-direction: column; align-items: flex-start; gap: 0; }
  .inline-top3 .top-rows .rank-card.rank-row .row-rank-num{ font-size: 30px; line-height: 1; margin: 0; }
  .inline-top3 .top-rows .rank-card.rank-row .row-logo    { display: none; }  /* Hide the big logo; use inline instead */
  .inline-top3 .top-rows .rank-card.rank-row .row-logo-inline { display: inline-flex; height: 26px; margin-bottom: 6px; }
  .inline-top3 .top-rows .rank-card.rank-row .row-info    { grid-area: info; min-width: 0; }
  .inline-top3 .top-rows .rank-card.rank-row .row-info h3 { font-size: 18px; margin: 0 0 4px; }
  .inline-top3 .top-rows .rank-card.rank-row .rank-tagline { font-size: 13.5px; margin: 0 0 8px; }
  .inline-top3 .top-rows .rank-card.rank-row .rank-features { margin: 8px 0 0; }
  .inline-top3 .top-rows .rank-card.rank-row .rank-features li { font-size: 13.5px; padding: 3px 0; }

  .inline-top3 .top-rows .rank-card.rank-row .row-score {
    grid-area: score;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line, #e5eaef);
    border-bottom: 1px solid var(--line, #e5eaef);
  }
  .inline-top3 .top-rows .rank-card.rank-row .score-num {
    font-size: 26px; line-height: 1;
  }
  .inline-top3 .top-rows .rank-card.rank-row .score-label {
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  }
  .inline-top3 .top-rows .rank-card.rank-row .rank-price.row-price {
    margin-left: auto;
    font-size: 14px;
  }
  .inline-top3 .top-rows .rank-card.rank-row .rank-price.row-price .amt { font-size: 18px; font-weight: 700; }

  .inline-top3 .top-rows .rank-card.rank-row .row-cta {
    grid-area: cta;
    display: flex; flex-direction: column; gap: 8px;
  }
  .inline-top3 .top-rows .rank-card.rank-row .row-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15.5px;
  }
  .inline-top3 .top-rows .rank-card.rank-row .row-cta-secondary {
    text-align: center; font-size: 13px;
  }

  /* Featured row keeps the teal accent but no oversized layout */
  .inline-top3 .top-rows .rank-card.rank-row.featured { border-width: 2px; }
  .inline-top3 .top-rows .rank-card.rank-row .rank-badge {
    top: -10px; left: 12px; font-size: 10.5px; padding: 4px 10px;
  }

  .inline-top3-head { text-align: left; }
  .inline-top3-head .btn-outline { display: none; }
}

/* Fallback for browsers WITHOUT container-query support (very old) */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .inline-top3 .top-rows .rank-card.rank-row {
      grid-template-columns: 56px 1fr !important;
      grid-template-areas:
        "rank info"
        "score score"
        "cta cta" !important;
    }
    .inline-top3 .top-rows .rank-card.rank-row .row-logo { display: none; }
    .inline-top3 .top-rows .rank-card.rank-row .row-logo-inline { display: inline-flex; height: 26px; }
    .inline-top3 .top-rows .rank-card.rank-row .row-cta { flex-direction: column; }
    .inline-top3 .top-rows .rank-card.rank-row .row-cta .btn { width: 100%; justify-content: center; }
  }
}

/* When there's no logo (default install), suppress the logo boxes */
.row-logo:empty, .row-logo-inline:empty, .rank-logo:empty { display: none; }

/* ============================================================
   v2.0.5 — Inline Medical Disclaimer styling
   ============================================================ */
.med-disclaimer-inline,
.article-body .med-disclaimer-inline,
.entry-content .med-disclaimer-inline {
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--muted, #6b7480);
  background: #f6f8f9;
  border-left: 3px solid #d5dde3;
  padding: 14px 18px;
  margin: 24px 0;
  border-radius: 6px;
}
.med-disclaimer-inline strong {
  color: #4a5560;
  font-weight: 700;
}
.med-disclaimer-inline a {
  color: var(--teal, #0e9488);
  text-decoration: underline;
}

/* ============================================================
   v2.0.6 — Nav dropdown submenus (hover on desktop, tap on mobile)
   ============================================================ */

/* Position parents so submenu can absolutely position */
.primary-nav-wrap .primary-nav > li,
.primary-nav-wrap .menu > li {
  position: relative;
}

/* Chevron on parent items */
.primary-nav-wrap .primary-nav > li.menu-item-has-children > a::after,
.primary-nav-wrap .primary-nav > li.has-submenu > a::after,
.primary-nav-wrap .menu > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
  opacity: .7;
}
.primary-nav-wrap .primary-nav > li.menu-item-has-children:hover > a::after,
.primary-nav-wrap .primary-nav > li.menu-item-has-children:focus-within > a::after {
  transform: translateY(0) rotate(225deg);
  opacity: 1;
}

/* ================================================================
   v2.1.1 — Mega menu + hover intent
   Top-level submenus become full-width mega panels anchored to the
   header. A transparent hover bridge closes the gap between the
   trigger and the panel so hover-out doesn't fire mid-move.
   ================================================================ */

/* Position anchor: the header row is the reference so the panel can
   span the full container width regardless of which <li> triggered it. */
.primary-nav-wrap { position: relative; }

/* The submenu panel (top-level) — full width mega */
.primary-nav-wrap > ul > li > .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1120px, calc(100vw - 40px));
  max-width: 100vw;
  padding: 24px 28px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line, #e5eaef);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8, 22, 40, 0.14), 0 6px 18px rgba(8, 22, 40, 0.06);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 200;
  pointer-events: none;
}

/* Invisible hover bridge — fills the gap between the trigger row and
   the mega panel so the mouse never leaves "hover" mid-move. */
.primary-nav-wrap > ul > li > .sub-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Reveal on hover / focus / .is-open (JS-driven hover-intent) */
.primary-nav-wrap > ul > li:hover > .sub-menu,
.primary-nav-wrap > ul > li:focus-within > .sub-menu,
.primary-nav-wrap > ul > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* Give the parent LI a padding bridge too so :hover survives the descent */
.primary-nav-wrap > ul > li.menu-item-has-children,
.primary-nav-wrap > ul > li.has-submenu {
  padding-bottom: 14px;
  margin-bottom: -14px; /* offset the bridge so it doesn't push the nav taller */
}

/* Mega-menu link cells */
.primary-nav-wrap > ul > li > .sub-menu li { margin: 0; }
.primary-nav-wrap > ul > li > .sub-menu > li > a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #142033);
  text-decoration: none;
  line-height: 1.35;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  white-space: normal;
  border: 1px solid transparent;
}
.primary-nav-wrap > ul > li > .sub-menu > li > a:hover,
.primary-nav-wrap > ul > li > .sub-menu > li > a:focus {
  background: var(--surface, #f4f7f9);
  color: var(--teal, #0e9488);
  border-color: var(--line, #e5eaef);
  transform: translateY(-1px);
}

/* If a mega-menu link has a description (via 'menu-description' or a <span>),
   render it small underneath */
.primary-nav-wrap > ul > li > .sub-menu > li > a .menu-desc,
.primary-nav-wrap > ul > li > .sub-menu > li > a small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted, #6b7480);
  line-height: 1.4;
}

/* -------- Nested (3rd level) submenus INSIDE the mega panel:
   render inline as a plain child list under the parent link. -------- */
.primary-nav-wrap > ul > li > .sub-menu .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  display: block;
  padding: 4px 0 8px 6px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  min-width: 0;
  transition: none;
}
.primary-nav-wrap > ul > li > .sub-menu .sub-menu a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted, #6b7480);
  text-decoration: none;
  line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}
.primary-nav-wrap > ul > li > .sub-menu .sub-menu a:hover,
.primary-nav-wrap > ul > li > .sub-menu .sub-menu a:focus {
  background: var(--surface, #f4f7f9);
  color: var(--teal, #0e9488);
}
.primary-nav-wrap > ul > li > .sub-menu li.menu-item-has-children > a::after,
.primary-nav-wrap > ul > li > .sub-menu li.has-submenu > a::after {
  content: none; /* no chevron inside mega menu — child list is already visible */
}

/* -------- Fewer than 4 items? Fall back to a compact panel (auto-sized) -------- */
.primary-nav-wrap > ul > li > .sub-menu.wli-mega-compact {
  width: min(560px, calc(100vw - 40px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.primary-nav-wrap > ul > li > .sub-menu.wli-mega-tiny {
  width: auto;
  min-width: 260px;
  grid-template-columns: 1fr;
  padding: 12px;
}

/* --------- MOBILE DRAWER: stack submenus vertically, tap to expand --------- */
@media (max-width: 900px) {
  .primary-nav-wrap.main-nav .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line, #e5eaef);
    border-radius: 0;
    padding: 4px 0 4px 14px;
    margin: 4px 0 8px 12px;
    min-width: 0;
    max-width: none;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .primary-nav-wrap.main-nav .sub-menu::before { display: none; }
  .primary-nav-wrap.main-nav li.has-submenu.is-open > .sub-menu,
  .primary-nav-wrap.main-nav li.menu-item-has-children.is-open > .sub-menu {
    max-height: 1000px;
  }
  .primary-nav-wrap.main-nav .sub-menu a {
    padding: 10px 8px;
    font-size: 15px;
    color: var(--muted, #6b7480);
  }
  .primary-nav-wrap.main-nav li.menu-item-has-children > a::after,
  .primary-nav-wrap.main-nav li.has-submenu > a::after {
    float: right;
    margin-top: 8px;
    transition: transform .2s ease;
  }
  .primary-nav-wrap.main-nav li.is-open > a::after {
    transform: rotate(225deg);
  }
  /* Nested on mobile: no fly-out */
  .primary-nav-wrap.main-nav .sub-menu .sub-menu {
    left: 0;
    top: 0;
  }
}

/* ============================================================
   v2.0.7 — Concept 02 provider row (rcv2)
   Overrides earlier .rank-card.rank-row layout entirely.
   ============================================================ */

/* v2.0.7 Concept 02 layout is scoped to .rank-row-v2 (used only inside
   articles/pages via wli_render_inline_top3). The homepage keeps the
   original .rank-row visual. */
.rank-card.rank-row-v2 {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  gap: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #fafcfc 0%, #ffffff 100%);
  border: 1px solid var(--line, #e5eaef);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 22, 40, 0.03);
  transition: box-shadow .2s ease, transform .2s ease;
}
.rank-card.rank-row-v2:hover {
  box-shadow: 0 8px 24px rgba(8, 22, 40, 0.08);
}

/* Featured row keeps 2px teal accent */
.rank-card.rank-row-v2.featured {
  border: 2px solid var(--teal, #0e9488);
}

/* ---- Top strip: circle num · info · score ---- */
.rcv2-top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  padding: 18px 20px 14px;
  align-items: flex-start;
}

.rcv2-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal, #0e9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(14, 148, 136, 0.25);
}

.rcv2-info { min-width: 0; }

.rcv2-badgerow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rcv2-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
}
/* If it's the top-ranked ("Best Overall" / editor's-pick) badge, use teal */
.rank-card.rank-row-v2.featured .rcv2-badge {
  background: rgba(14, 148, 136, 0.12);
  color: var(--teal-dark, #0b7a70);
}

.rcv2-logo-inline {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
}
.rcv2-logo-inline img {
  max-height: 24px;
  max-width: 90px;
  object-fit: contain;
  display: block;
}

.rcv2-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  line-height: 1.25;
  color: var(--ink, #142033);
}

.rcv2-tag {
  font-size: 13px;
  color: var(--muted, #6b7480);
  margin: 0;
  line-height: 1.45;
}

/* Score sits to the right with a soft vertical divider */
.rcv2-score {
  flex-shrink: 0;
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid var(--line, #e5eaef);
  margin-top: 4px;
  min-width: 78px;
}
.rcv2-score-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--teal, #0e9488);
  line-height: 1;
}
.rcv2-score-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--teal, #0e9488);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---- Features in 2-column grid ---- */
.rcv2-features {
  padding: 0 20px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
.rcv2-feat {
  font-size: 13px;
  color: var(--ink, #142033);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
.rcv2-check {
  color: #10b981;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 13px;
}

/* ---- Footer strip ---- */
.rcv2-footer {
  background: var(--surface, #f4f7f9);
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line, #e5eaef);
}
.rcv2-price {
  font-size: 13px;
  color: var(--muted, #6b7480);
  flex-shrink: 0;
}
.rcv2-price strong {
  color: var(--ink, #142033);
  font-size: 16px;
  font-weight: 800;
  margin: 0 2px;
}
.rcv2-per { color: var(--muted, #6b7480); font-size: 12px; }

.rcv2-cta {
  margin-left: auto;
  background: var(--teal, #0e9488) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.rcv2-cta:hover { background: var(--teal-dark, #0b7a70) !important; transform: translateY(-1px); }
.rcv2-cta .arrow { display: inline-block; }

/* ---- Narrow container (article column, mobile) ---- */
@container it3 (max-width: 640px) {
  .rcv2-top {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "num info"
      "score score";
    gap: 10px;
    padding: 14px 14px 12px;
  }
  .rcv2-num { grid-area: num; width: 36px; height: 36px; font-size: 14px; }
  .rcv2-info { grid-area: info; }
  .rcv2-name { font-size: 16px !important; }
  .rcv2-tag { font-size: 12px; }
  .rcv2-score {
    grid-area: score;
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--line, #e5eaef);
    padding-left: 0;
    padding-top: 10px;
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .rcv2-score-num { font-size: 22px; }
  .rcv2-score-lbl { margin-top: 0; }

  .rcv2-features {
    grid-template-columns: 1fr;
    padding: 0 14px 12px;
    gap: 5px;
  }
  .rcv2-feat { font-size: 12.5px; }

  .rcv2-footer { padding: 12px 14px; }
  .rcv2-cta { padding: 8px 14px !important; font-size: 12.5px !important; }
  .rcv2-price { font-size: 12px; }
  .rcv2-price strong { font-size: 14px; }
}

/* Media-query fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .rcv2-top {
      grid-template-columns: 36px 1fr;
      grid-template-areas:
        "num info"
        "score score";
      gap: 10px;
      padding: 14px 14px 12px;
    }
    .rcv2-num { grid-area: num; width: 36px; height: 36px; font-size: 14px; }
    .rcv2-info { grid-area: info; }
    .rcv2-name { font-size: 16px !important; }
    .rcv2-score {
      grid-area: score;
      text-align: left;
      border-left: none;
      border-top: 1px solid var(--line, #e5eaef);
      padding-left: 0;
      padding-top: 10px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .rcv2-score-num { font-size: 22px; }
    .rcv2-score-lbl { margin-top: 0; }
    .rcv2-features { grid-template-columns: 1fr; padding: 0 14px 12px; }
    .rcv2-footer { padding: 12px 14px; }
    .rcv2-cta { padding: 8px 14px !important; font-size: 12.5px !important; }
  }
}

/* Nuke the mid-post/article compact override from v2.0.4 that fought this design */
@container it3 (max-width: 720px) {
  .inline-top3 .top-rows .rank-card.rank-row-v2 {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
}

/* ============================================================
   v2.0.8 — Sidebar hierarchy (Newsletter → TOC → CTA)
   v2.1.1 — CTA now truly floats along the entire article
            because .article-grid uses align-items: stretch
            and .article-sidebar is flex-column, giving the
            sticky wrap a full-article-height track.
   ============================================================ */

/* Reset any leftover sticky/stacking on the individual sidebar-cta */
.article-sidebar .sidebar-cta {
  position: static !important;
  top: auto !important;
  z-index: auto;
  margin: 0;
}

/* The sticky wrapper — sticks 92px from viewport top.
   Because .article-sidebar is stretched to full article height, this wrap
   has room to slide down the entire article, keeping the CTA visible for
   as long as the reader is on the page. It sits at its natural position
   in the flex column (right after Newsletter + TOC) and stays glued to
   `top: 92px` all the way to the bottom of the article. */
.article-sidebar .sidebar-sticky-wrap {
  position: sticky;
  position: -webkit-sticky;
  top: 92px;
  z-index: 5;
  align-self: start; /* don't stretch — stay at natural height */
  /* NO margin-top:auto: that would push the CTA to the bottom and defeat sticky. */
}

/* Each sibling of the article sidebar gets clean stacking, no z-index conflicts */
.article-sidebar > * {
  position: relative;
  z-index: 1;
}
.article-sidebar > .sidebar-sticky-wrap {
  z-index: 5;
}

/* Newsletter no longer needs its own sticky/hover: reset defensively */
.article-sidebar .sidebar-newsletter {
  position: relative;    /* keeps ::before decoration in place */
  z-index: 2;
  top: auto;
  margin: 0;
  flex-shrink: 0;
}
.article-sidebar .sidebar-block.toc { flex-shrink: 0; }

/* Mobile / narrow: unstick + stack normally, kill the flex column */
@media (max-width: 960px) {
  .article-sidebar {
    display: block;
  }
  .article-sidebar > * + * { margin-top: 24px; }
  .article-sidebar .sidebar-sticky-wrap {
    position: static;
    top: auto;
    margin-top: 0;
  }
}

/* ============================================================
   v2.1.1 — FAQ Accordion
   Auto-generated by inc/faq-accordion.php from H3 Q&A pairs
   that follow an H2 titled "FAQ"
   ============================================================ */
.wli-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 40px;
}
.wli-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wli-faq-item:hover {
  border-color: color-mix(in srgb, var(--brand, #178a90) 25%, var(--line));
  box-shadow: 0 2px 12px rgba(23, 138, 144, 0.06);
}
.wli-faq-item.is-open {
  border-color: color-mix(in srgb, var(--brand, #178a90) 50%, var(--line));
  box-shadow: 0 6px 24px rgba(23, 138, 144, 0.10);
}
.wli-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text, #0f1c1d);
  line-height: 1.4;
  transition: color .2s ease, background-color .2s ease;
}
.wli-faq-q:hover,
.wli-faq-q:focus-visible {
  color: var(--brand, #178a90);
  outline: none;
}
.wli-faq-q:focus-visible {
  background: rgba(23, 138, 144, 0.04);
}
.wli-faq-q-text {
  flex: 1;
  min-width: 0;
}
.wli-faq-q-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(23, 138, 144, 0.08);
  color: var(--brand, #178a90);
  transition: transform .28s cubic-bezier(.4,0,.2,1), background-color .2s ease;
}
.wli-faq-item.is-open .wli-faq-q-icon {
  transform: rotate(180deg);
  background: rgba(23, 138, 144, 0.14);
}
.wli-faq-a {
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  max-height: 0;
}
.wli-faq-a[hidden] {
  display: block !important; /* keep in flow so we can animate; JS toggles state */
  max-height: 0;
}
.wli-faq-item.is-open .wli-faq-a {
  max-height: 2000px; /* generous upper bound */
}
.wli-faq-a-inner {
  padding: 0 22px 22px;
  color: var(--muted, #5a6a6b);
  font-size: 0.98rem;
  line-height: 1.65;
}
.wli-faq-a-inner p:first-child { margin-top: 0; }
.wli-faq-a-inner p:last-child  { margin-bottom: 0; }
.wli-faq-a-inner a {
  color: var(--brand, #178a90);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wli-faq-a-inner strong { color: var(--text, #0f1c1d); }
.wli-faq-a-inner ul, .wli-faq-a-inner ol {
  padding-left: 22px;
  margin: 10px 0;
}
.wli-faq-a-inner li + li { margin-top: 6px; }

@media (max-width: 640px) {
  .wli-faq-q { padding: 16px 16px; font-size: 0.98rem; }
  .wli-faq-a-inner { padding: 0 16px 18px; font-size: 0.94rem; }
  .wli-faq-q-icon { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wli-faq-item,
  .wli-faq-q-icon,
  .wli-faq-a { transition: none; }
}

/* ============================================================
   v2.1.1 — Timed Pop-up
   Appears 5s after page load, once per session
   ============================================================ */
.wli-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 29, 0.55);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wli-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.wli-popup {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  border-radius: 20px;
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(15, 28, 29, 0.35);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.wli-popup-overlay.is-visible .wli-popup {
  transform: translateY(0) scale(1);
}
.wli-popup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand, #178a90), #f4c542);
}
.wli-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(15, 28, 29, 0.06);
  color: var(--text, #0f1c1d);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .2s ease;
}
.wli-popup-close:hover,
.wli-popup-close:focus-visible {
  background: rgba(15, 28, 29, 0.12);
  transform: rotate(90deg);
  outline: none;
}
.wli-popup-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand, #178a90);
  margin-bottom: 12px;
}
.wli-popup-title {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text, #0f1c1d);
  margin: 0 0 12px;
}
.wli-popup-body {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted, #5a6a6b);
  margin: 0 0 22px;
}
.wli-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #f4c542;
  color: #0f1c1d;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wli-popup-cta:hover {
  background: #f0b820;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(244, 197, 66, 0.35);
}
.wli-popup-cta:focus-visible { outline: 2px solid var(--brand, #178a90); outline-offset: 3px; }
.wli-popup-footnote {
  display: block;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted, #5a6a6b);
}
.wli-popup-footnote a { color: inherit; text-decoration: underline; }

@media (max-width: 480px) {
  .wli-popup { padding: 32px 22px 24px; border-radius: 16px; }
  .wli-popup-title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wli-popup-overlay,
  .wli-popup,
  .wli-popup-cta,
  .wli-popup-close { transition: none; }
}