/* ============================================================
   BeBuzz Blog, shared styles
   Built on top of styles.css (gradient + glassmorphism brand
   system) but optimized for reading: lighter type weight, more
   line-height, narrower content column, structured comparison
   tables.
   ============================================================ */

/* Use the marketing site's typography stack so the brand stays
   consistent across landing pages, blog and dashboard. */
body{
  font-family:'TalktoFont','Inter',sans-serif;
  background:#000;color:#E6E6F0;
  -webkit-font-smoothing:antialiased;
}

/* ────────── BLOG SHELL ────────── */
.bl-shell{position:relative;z-index:2;padding-top:74px /* nav height */}
.bl-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bl-bg__blob{
  position:absolute;border-radius:50%;
  filter:blur(140px);opacity:.16;
}
.bl-bg__blob--1{
  width:520px;height:520px;left:-180px;top:-150px;
  background:radial-gradient(circle,#FE00F2 0%,transparent 70%);
}
.bl-bg__blob--2{
  width:580px;height:580px;right:-220px;top:300px;
  background:radial-gradient(circle,#00D4FE 0%,transparent 70%);
}

/* ────────── BLOG HOMEPAGE ────────── */
.bl-hero{
  max-width:1240px;margin:0 auto;
  padding:80px 28px 40px;
  text-align:center;
}
.bl-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(254,0,242,0.32);
  background:rgba(254,0,242,0.10);
  color:#FE00F2;
  margin-bottom:24px;
}
.bl-hero h1{
  font-size:clamp(40px,5vw,68px);font-weight:900;
  letter-spacing:-0.035em;line-height:1.02;
  margin:0 0 22px;color:#fff;
}
.bl-hero h1 .grad{
  background:linear-gradient(110deg,#00D4FE 0%,#C084FC 50%,#FE00F2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bl-hero__sub{
  max-width:680px;margin:0 auto;
  font-size:18px;line-height:1.5;
  color:rgba(255,255,255,0.65);
}

/* ────────── CATEGORY TABS ────────── */
.bl-cats{
  max-width:1240px;margin:0 auto;
  padding:20px 28px 0;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.bl-cat{
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.65);
  font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.bl-cat:hover{color:#fff;background:rgba(255,255,255,0.08)}
.bl-cat.is-active{
  color:#fff;
  background:linear-gradient(110deg,rgba(0,212,254,0.22),rgba(254,0,242,0.22));
  border-color:rgba(255,255,255,0.18);
}

/* ────────── FEATURED MONEY-PAGES STRIP ────────── */
.bl-featured{
  max-width:1240px;margin:0 auto;
  padding:48px 28px 0;
}
.bl-featured__head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:22px;
}
.bl-featured__head h2{
  font-size:24px;font-weight:900;letter-spacing:-0.02em;
  margin:0;color:#fff;
}
.bl-featured__head h2 .grad{
  background:linear-gradient(110deg,#00D4FE 0%,#FE00F2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bl-featured__head a{
  color:rgba(255,255,255,0.55);font-size:13px;font-weight:600;
  text-decoration:none;transition:color .2s;
}
.bl-featured__head a:hover{color:#fff}

.bl-featured__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.bl-money{
  position:relative;
  padding:24px 22px 22px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  border:1px solid rgba(255,255,255,0.10);
  text-decoration:none;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .25s ease, border-color .25s ease;
  overflow:hidden;
}
.bl-money::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(0,212,254,0.45),rgba(254,0,242,0.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;pointer-events:none;
}
.bl-money:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.20)}
.bl-money__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;
  color:#FE00F2;
}
.bl-money__tag::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#FE00F2;box-shadow:0 0 8px rgba(254,0,242,0.7);
}
.bl-money h3{
  font-size:19px;font-weight:800;letter-spacing:-0.02em;
  line-height:1.25;margin:0;color:#fff;
}
.bl-money__sub{
  font-size:13px;line-height:1.5;
  color:rgba(255,255,255,0.55);
  margin:0;flex:1;
}
.bl-money__cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;
  color:rgba(0,212,254,0.95);
  margin-top:6px;
}
.bl-money__cta svg{transition:transform .25s ease}
.bl-money:hover .bl-money__cta svg{transform:translateX(4px)}

/* ────────── REGULAR ARTICLE GRID ────────── */
.bl-grid{
  max-width:1240px;margin:0 auto;
  padding:56px 28px 80px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;
}
.bl-card{
  display:flex;flex-direction:column;
  border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;text-decoration:none;
  transition:transform .25s, border-color .25s;
}
.bl-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.18)}
.bl-card__cover{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#0a0512,#1a0a28);
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.bl-card__cover svg{width:54%;height:auto;opacity:.85}
.bl-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-card__cat{
  font-size:10.5px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(0,212,254,0.85);
}
.bl-card h3{
  font-size:16px;font-weight:800;letter-spacing:-0.015em;
  line-height:1.3;margin:0;color:#fff;
}
.bl-card__excerpt{
  font-size:13px;line-height:1.5;
  color:rgba(255,255,255,0.55);margin:0;flex:1;
}
.bl-card__meta{
  display:flex;gap:14px;
  font-size:11.5px;color:rgba(255,255,255,0.40);
  font-family:'JetBrains Mono',monospace;
  margin-top:auto;
}

/* ────────── ARTICLE PAGE ────────── */
.bl-article{
  max-width:760px;margin:0 auto;
  padding:60px 24px 80px;
  color:rgba(255,255,255,0.85);
  font-size:17px;line-height:1.72;
}
.bl-article__crumb{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:rgba(255,255,255,0.40);
  margin-bottom:20px;
  font-family:'JetBrains Mono',monospace;
}
.bl-article__crumb a{color:rgba(0,212,254,0.85);text-decoration:none}
.bl-article__crumb a:hover{color:#fff}
.bl-article__category{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:#FE00F2;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(254,0,242,0.32);
  background:rgba(254,0,242,0.10);
  margin-bottom:20px;
}
.bl-article h1{
  font-size:clamp(34px,4.4vw,52px);
  font-weight:900;letter-spacing:-0.03em;line-height:1.05;
  margin:0 0 22px;color:#fff;
}
.bl-article__lede{
  font-size:21px;line-height:1.5;
  color:rgba(255,255,255,0.78);
  margin:0 0 32px;
}
.bl-article__byline{
  display:flex;align-items:center;gap:14px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:36px;
  font-size:13.5px;
}
.bl-article__avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#FE00F2,#A855F7,#00D4FE);
  display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:14px;
  flex-shrink:0;
}
.bl-article__byline-name{color:#fff;font-weight:600}
.bl-article__byline-meta{color:rgba(255,255,255,0.50);font-size:12px}
.bl-article__byline-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,0.30);
  margin:0 4px;
}
.bl-article__times{
  margin-left:auto;
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,0.50);font-size:12px;
  font-family:'JetBrains Mono',monospace;
}

/* Key takeaways box, both human + LLM extractable */
.bl-takeaways{
  padding:24px 26px;
  border-radius:16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,212,254,0.10), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(254,0,242,0.10), transparent 60%),
    rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  margin:0 0 36px;
}
.bl-takeaways__head{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;
  color:#00D4FE;
  margin-bottom:12px;
}
.bl-takeaways__head svg{flex-shrink:0}
.bl-takeaways ul{margin:0;padding-left:20px;color:rgba(255,255,255,0.85)}
.bl-takeaways li{margin:6px 0;line-height:1.5;font-size:15.5px}
.bl-takeaways li b{color:#fff;font-weight:700}

/* Table of contents (above-the-fold for human + AI) */
.bl-toc{
  margin:0 0 36px;
  padding:18px 22px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.bl-toc__head{
  font-size:11px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:10px;
}
.bl-toc ol{margin:0;padding-left:22px;color:rgba(255,255,255,0.75);font-size:14.5px}
.bl-toc li{margin:4px 0;line-height:1.5}
.bl-toc a{color:inherit;text-decoration:none}
.bl-toc a:hover{color:#fff;text-decoration:underline}

/* Article body typography */
.bl-article h2{
  font-size:30px;font-weight:900;letter-spacing:-0.025em;
  line-height:1.18;margin:50px 0 18px;color:#fff;
  scroll-margin-top:90px;
}
.bl-article h3{
  font-size:21px;font-weight:800;letter-spacing:-0.015em;
  line-height:1.25;margin:34px 0 12px;color:#fff;
  scroll-margin-top:90px;
}
.bl-article p{margin:0 0 18px}
.bl-article a{color:#00D4FE;text-decoration:underline;text-decoration-color:rgba(0,212,254,0.3);text-underline-offset:3px}
.bl-article a:hover{text-decoration-color:#00D4FE}
.bl-article strong{color:#fff;font-weight:700}
.bl-article em{color:rgba(255,255,255,0.92)}
.bl-article blockquote{
  margin:24px 0;padding:18px 22px;
  border-left:3px solid #FE00F2;
  background:rgba(254,0,242,0.05);
  border-radius:0 12px 12px 0;
  color:rgba(255,255,255,0.85);
  font-style:italic;font-size:16px;
}
.bl-article ul,.bl-article ol{padding-left:24px;margin:0 0 20px;color:rgba(255,255,255,0.85)}
.bl-article li{margin:6px 0}

/* ════════════════════════════════════════════════════════════════
   Comparison tables, the heart of the money-page articles.
   Deliberately oversized typography, dramatic winner row, and a
   staggered scroll-in animation. The table is the conclusion of
   the argument so it gets premium visual treatment.
   ════════════════════════════════════════════════════════════════ */

.bl-compare{
  position:relative;
  margin:48px 0;
  /* Allow vertical overflow for the winner badge etc., but never scroll
     horizontally: everything fits inside the article column. */
  overflow:visible;
  border-radius:22px;
  background:
    /* BeBuzz brand-color halos baked into the table card */
    radial-gradient(circle at 0% 0%, rgba(0,212,254,0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(254,0,242,0.24), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(168,85,247,0.16), transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012));
  box-shadow:
    /* Bigger outer aura, no offset, so the table sits in a pool of color */
    0 0 90px -10px rgba(0,212,254,0.32),
    0 0 70px -10px rgba(254,0,242,0.30),
    0 35px 90px -30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Vivid gradient border */
.bl-compare::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg,
    rgba(0,212,254,0.95) 0%,
    rgba(168,85,247,0.65) 40%,
    rgba(254,0,242,0.95) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:1;
}
.bl-compare table{
  /* No min-width and table-layout:fixed → everything always fits, no scroll. */
  width:100%;
  table-layout:fixed;
  border-collapse:separate;border-spacing:0;
  font-size:13px;
  position:relative;
  z-index:1;
}

/* Header row, with a visible gradient underline */
.bl-compare th{
  padding:14px 10px;
  text-align:left;
  font-size:9.5px;font-weight:800;letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
  background:linear-gradient(180deg,
    rgba(0,212,254,0.08) 0%,
    rgba(254,0,242,0.06) 50%,
    rgba(255,255,255,0.02) 100%);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,
    rgba(0,212,254,0.6) 0%,
    rgba(168,85,247,0.5) 50%,
    rgba(254,0,242,0.6) 100%) 1;
  white-space:normal;
  word-break:keep-all;
  line-height:1.25;
  vertical-align:bottom;
}
.bl-compare th:first-child{padding-left:24px;border-top-left-radius:22px}
.bl-compare th:last-child {padding-right:18px;border-top-right-radius:22px;text-align:right}

/* Body cells, default */
.bl-compare td{
  padding:14px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  vertical-align:middle;
  color:rgba(255,255,255,0.85);
  line-height:1.4;
  word-break:normal;
  transition:background .25s ease, color .25s ease;
}
.bl-compare td:first-child{
  position:relative;
  padding-left:24px;
  font-weight:700;color:#fff;font-size:13.5px;
}
.bl-compare td:last-child {
  padding-right:18px;text-align:right;
  font-family:'JetBrains Mono',monospace;
  font-size:13.5px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}

/* Per-row left accent bar in the first cell. Each approach gets
   its own vibe so the table is scannable at a glance. */
.bl-compare tbody td:first-child::before{
  content:"";
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  width:5px;height:34px;
  border-radius:4px;
  background:rgba(255,255,255,0.20);
  transition:height .25s ease, box-shadow .25s ease;
}
.bl-compare tbody tr:nth-child(1) td:first-child::before{
  background:linear-gradient(180deg,#EF4444,#DC2626);
  box-shadow:0 0 14px rgba(239,68,68,0.45);
}
.bl-compare tbody tr:nth-child(2) td:first-child::before{
  background:linear-gradient(180deg,#FBBF24,#F59E0B);
  box-shadow:0 0 14px rgba(251,191,36,0.40);
}
.bl-compare tbody tr:nth-child(3) td:first-child::before{
  background:linear-gradient(180deg,#60A5FA,#3B82F6);
  box-shadow:0 0 14px rgba(59,130,246,0.40);
}
.bl-compare tbody tr:nth-child(4) td:first-child::before{
  background:linear-gradient(180deg,#F472B6,#EC4899);
  box-shadow:0 0 14px rgba(244,114,182,0.40);
}
.bl-compare tbody tr.is-winner td:first-child::before{
  background:linear-gradient(180deg,#00D4FE 0%,#A855F7 50%,#FE00F2 100%);
  box-shadow:
    0 0 16px rgba(0,212,254,0.55),
    0 0 24px rgba(254,0,242,0.45);
  width:6px;height:44px;
}

/* Soft zebra striping */
.bl-compare tbody tr:nth-child(even) td{background:rgba(255,255,255,0.018)}
.bl-compare tbody tr:last-child td{border-bottom:0}
.bl-compare tbody tr:last-child td:first-child{border-bottom-left-radius:22px}
.bl-compare tbody tr:last-child td:last-child {border-bottom-right-radius:22px}

/* Row hover */
.bl-compare tbody tr:hover td{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.95);
}
.bl-compare tbody tr:hover td:first-child::before{
  height:42px;
}

/* ───── Cell value chips, filled pills with icons ─────
   Solid colored pill backgrounds so the cell value pops as
   a single visual block, not just colored text. */
.bl-compare td.cell-good,
.bl-compare td.cell-warn,
.bl-compare td.cell-bad{
  font-weight:600;
}
.bl-compare td.cell-good > *,
.bl-compare td.cell-warn > *,
.bl-compare td.cell-bad > *{position:relative;z-index:1}

/* The icon badge sits INSIDE the cell content, before the text */
.bl-compare td.cell-good,
.bl-compare td.cell-warn,
.bl-compare td.cell-bad{
  position:relative;
}
.bl-compare td.cell-good::before,
.bl-compare td.cell-warn::before,
.bl-compare td.cell-bad::before{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:900;
  margin-right:10px;vertical-align:-4px;
  font-family:'JetBrains Mono',monospace;
  box-shadow:inset 0 0 0 1px currentColor;
}
.bl-compare td.cell-good{color:#34D399}
.bl-compare td.cell-good::before{
  content:"✓";
  background:linear-gradient(135deg,rgba(52,211,153,0.30),rgba(16,185,129,0.18));
  color:#34D399;
}
.bl-compare td.cell-warn{color:#FBBF24}
.bl-compare td.cell-warn::before{
  content:"!";
  background:linear-gradient(135deg,rgba(251,191,36,0.30),rgba(245,158,11,0.18));
  color:#FBBF24;
}
.bl-compare td.cell-bad{color:#FCA5A5}
.bl-compare td.cell-bad::before{
  content:"✕";
  background:linear-gradient(135deg,rgba(252,165,165,0.30),rgba(239,68,68,0.18));
  color:#FCA5A5;
}

/* ───── WINNER ROW, dramatic finale with animated shimmer ───── */
.bl-compare tr.is-winner td{
  background:linear-gradient(90deg,
    rgba(0,212,254,0.18) 0%,
    rgba(168,85,247,0.22) 50%,
    rgba(254,0,242,0.18) 100%) !important;
  background-size:200% 100% !important;
  color:#fff;
  font-weight:600;
  animation:blWinShimmer 6s ease-in-out infinite;
}
@keyframes blWinShimmer{
  0%,100%{background-position:0% 50%}
  50%   {background-position:100% 50%}
}
.bl-compare tr.is-winner:hover td{
  background:linear-gradient(90deg,
    rgba(0,212,254,0.28) 0%,
    rgba(168,85,247,0.32) 50%,
    rgba(254,0,242,0.28) 100%) !important;
  background-size:200% 100% !important;
}
.bl-compare tr.is-winner td:first-child{
  font-size:14px;color:#fff;
}
.bl-compare tr.is-winner td:last-child{
  font-size:17px;font-weight:800;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(110deg,#00D4FE 0%,#C084FC 50%,#FE00F2 100%);
  filter:drop-shadow(0 2px 14px rgba(254,0,242,0.4));
}
.bl-compare tr.is-winner td:last-child strong{
  background:inherit;-webkit-background-clip:inherit;background-clip:inherit;
  -webkit-text-fill-color:inherit;
}

/* "Best value" pill, lives BELOW the row name */
.bl-compare tr.is-winner td:first-child::after{
  content:"Best value";
  display:block;width:fit-content;
  margin-top:10px;
  font-size:10px;font-weight:900;letter-spacing:0.16em;
  text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:linear-gradient(110deg,#00D4FE 0%,#FE00F2 100%);
  color:#fff;
  box-shadow:
    0 6px 18px rgba(254,0,242,0.50),
    inset 0 1px 0 rgba(255,255,255,0.40);
  animation:blWinPulse 2.4s ease-in-out infinite;
}
@keyframes blWinPulse{
  0%,100%{
    box-shadow:0 6px 18px rgba(254,0,242,0.50),inset 0 1px 0 rgba(255,255,255,0.40);
    transform:scale(1);
  }
  50%{
    box-shadow:0 6px 26px rgba(0,212,254,0.60),inset 0 1px 0 rgba(255,255,255,0.55);
    transform:scale(1.04);
  }
}

/* ───── Staggered scroll-in animation ───── */
.bl-compare tbody tr{
  opacity:0;
  transform:translateY(10px);
}
.bl-compare.is-revealed tbody tr{
  opacity:1;
  transform:translateY(0);
  transition:opacity .55s ease, transform .55s ease;
}
.bl-compare.is-revealed tbody tr:nth-child(1){transition-delay:.05s}
.bl-compare.is-revealed tbody tr:nth-child(2){transition-delay:.13s}
.bl-compare.is-revealed tbody tr:nth-child(3){transition-delay:.21s}
.bl-compare.is-revealed tbody tr:nth-child(4){transition-delay:.29s}
.bl-compare.is-revealed tbody tr:nth-child(5){transition-delay:.37s}
.bl-compare.is-revealed tbody tr:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion: reduce){
  .bl-compare tbody tr{opacity:1;transform:none}
}

/* Mobile, tighter padding only. No sticky first column needed since
   table-layout:fixed + word-wrap means the table always fits inside
   the article column without horizontal scroll. */
@media (max-width:980px){
  .bl-compare table{font-size:12px}
  .bl-compare th,.bl-compare td{padding:11px 8px}
  .bl-compare th{font-size:9px;letter-spacing:0.08em}
  .bl-compare th:first-child,
  .bl-compare td:first-child{padding-left:18px}
  .bl-compare th:last-child,
  .bl-compare td:last-child{padding-right:14px}
  .bl-compare td:last-child{font-size:13px}
  .bl-compare tbody td:first-child::before{left:8px;width:4px;height:26px}
  .bl-compare tr.is-winner td:last-child{font-size:15px}
  .bl-compare tr.is-winner td:first-child{font-size:13px}
}

/* In-article callout box */
.bl-callout{
  margin:32px 0;padding:22px 24px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
}
.bl-callout__head{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:#00D4FE;
  margin-bottom:10px;
}

/* FAQ section, structured for featured snippets + LLM extraction */
.bl-faq{
  margin:48px 0 24px;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:36px;
}
.bl-faq h2{margin-top:0}
.bl-faq__item{
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:18px 0;
}
.bl-faq__q{
  font-size:17px;font-weight:700;color:#fff;
  margin:0 0 8px;
  display:flex;align-items:flex-start;gap:8px;
}
.bl-faq__q::before{
  content:"Q.";color:#00D4FE;font-family:'JetBrains Mono',monospace;
  font-weight:800;flex-shrink:0;
}
.bl-faq__a{
  font-size:15.5px;line-height:1.6;
  color:rgba(255,255,255,0.75);
  padding-left:30px;margin:0;
}

/* CTA box at end of article */
.bl-cta{
  margin:60px 0 0;padding:36px 32px;
  border-radius:20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,212,254,0.15), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(254,0,242,0.15), transparent 60%),
    rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  text-align:center;
}
.bl-cta h3{
  font-size:26px;font-weight:900;letter-spacing:-0.02em;
  margin:0 0 10px;color:#fff;
}
.bl-cta h3 .grad{
  background:linear-gradient(110deg,#00D4FE 0%,#FE00F2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bl-cta p{
  max-width:520px;margin:0 auto 22px;
  font-size:15px;color:rgba(255,255,255,0.65);
  line-height:1.5;
}
.bl-cta__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:12px;
  background:linear-gradient(110deg,#00D4FE 0%,#C084FC 45%,#FE00F2 100%);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  text-decoration:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 12px 30px -8px rgba(254,0,242,0.55),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform .2s, filter .2s;
}
.bl-cta__btn:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* Related articles */
.bl-related{
  margin:60px 0 0;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:36px;
}
.bl-related h2{font-size:22px;font-weight:800;color:#fff;margin:0 0 22px}
.bl-related__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.bl-related a{
  display:block;
  padding:18px 18px;border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  text-decoration:none;
  transition:border-color .25s, transform .25s;
}
.bl-related a:hover{border-color:rgba(255,255,255,0.18);transform:translateY(-2px)}
.bl-related__cat{
  font-size:10.5px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(0,212,254,0.85);
  margin-bottom:6px;
}
.bl-related__title{
  font-size:14.5px;font-weight:700;color:#fff;
  line-height:1.35;margin:0;
}

/* Sources / footnotes */
.bl-sources{
  margin:36px 0 0;
  padding:18px 22px;
  border-radius:14px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);
  font-size:13px;line-height:1.5;
  color:rgba(255,255,255,0.55);
}
.bl-sources h4{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,0.50);
  margin:0 0 8px;
}
.bl-sources ol{margin:0;padding-left:22px}
.bl-sources li{margin:4px 0}
.bl-sources a{color:rgba(0,212,254,0.85);text-decoration:none}
.bl-sources a:hover{text-decoration:underline}

/* Article footer / author bio */
.bl-author-bio{
  margin:48px 0 0;padding:24px;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  display:flex;gap:16px;align-items:flex-start;
}
.bl-author-bio__avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#FE00F2,#A855F7,#00D4FE);
  display:grid;place-items:center;flex-shrink:0;
  font-weight:800;font-size:18px;color:#fff;
}
.bl-author-bio__name{font-size:15px;font-weight:700;color:#fff;margin:0 0 2px}
.bl-author-bio__title{font-size:12.5px;color:rgba(0,212,254,0.85);margin:0 0 8px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.bl-author-bio__body{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.62);margin:0}

@media (max-width:980px){
  .bl-hero{padding:54px 20px 24px}
  .bl-article{padding:40px 20px 60px;font-size:16.5px}
  .bl-article h1{font-size:32px}
  .bl-article__lede{font-size:18px}
  .bl-takeaways{padding:18px 20px}
  .bl-compare{margin:24px -20px;border-radius:0;border-left:0;border-right:0}
}