/* ═══════════════════════════════════════════════════
   template.css — Compiled CSS for compare templates
   No Tailwind CDN needed. Font: system-ui stack.
   ═══════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  line-height:1.5;
  tab-size:4;
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#fff;
  color:#0a0a0a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* padding-top is handled by site-chrome.css via body { padding-top: 64px !important } */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;border:none;background:none}
table{border-collapse:collapse;width:100%}
/* Hard containment — nothing escapes the viewport horizontally */
article{max-width:100%;overflow-x:hidden}

/* ── DESIGN TOKENS (light) ── */
:root{
  --bg:#ffffff;--fg:#0a0a0a;
  --card:#ffffff;--card-fg:#0a0a0a;
  --muted:#f5f5f5;--muted-fg:#737373;
  --border:#e5e5e5;
  --emerald-50:#ecfdf5;--emerald-200:#a7f3d0;--emerald-500:#10b981;--emerald-600:#059669;--emerald-700:#047857;
  --amber-50:#fffbeb;--amber-200:#fde68a;--amber-400:#fbbf24;--amber-700:#b45309;
  --orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;
  --radius:0.5rem;
}

/* ── UTILITY CLASSES ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto}
.max-w-5xl{max-width:64rem;margin-left:auto;margin-right:auto}
.max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.text-balance{text-wrap:balance}

/* ── BREADCRUMB ── */
.breadcrumb-nav{border-bottom:1px solid var(--border);background:rgba(245,245,245,.3);padding:.625rem 0}
.breadcrumb-nav ol{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;list-style:none;font-size:.875rem;color:var(--muted-fg)}
.breadcrumb-nav li{display:flex;align-items:center;gap:.25rem} /* ensures SVG separator stays inline with text */
.breadcrumb-nav a{transition:color .15s}
.breadcrumb-nav a:hover{color:var(--fg)}
.breadcrumb-nav .separator{width:.875rem;height:.875rem;margin:0 .125rem;color:rgba(115,115,115,.5);flex-shrink:0;display:block} /* display:block OK because li is flex */
.breadcrumb-nav .current{color:var(--fg);font-weight:500}

/* ── HERO ── */
.hero-header{background:linear-gradient(to bottom,rgba(245,245,245,.4),var(--bg));padding:2rem 0}
@media(min-width:768px){.hero-header{padding:2.5rem 0}}
.hero-header > div{width:100%} /* inner div always full width before max-w clamps it */
.hero-header h1{font-size:1.875rem;font-weight:700;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
@media(min-width:768px){.hero-header h1{font-size:2.25rem}}
@media(min-width:1024px){.hero-header h1{font-size:3rem}}
.hero-header .subtitle{font-size:1.125rem;color:var(--muted-fg);line-height:1.6}
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:.75rem;border-top:1px solid var(--border);font-size:.875rem;color:var(--muted-fg)}
.hero-meta span{display:flex;align-items:center;gap:.375rem}

/* ── MAIN LAYOUT ── */
/* Mobile: single column stack. Desktop (1280px+): side-by-side flex with sidebar */
.main-layout{display:flex;flex-direction:column;gap:2rem;padding-bottom:4rem}
@media(min-width:1280px){.main-layout{flex-direction:row}}

/* ── STICKY SIDEBAR ── */
.sticky-nav{display:none;width:14rem;flex-shrink:0}
@media(min-width:1280px){.sticky-nav{display:block}}
.sticky-inner{
  position:sticky;
  top:80px; /* 64px header + 16px breathing room */
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg);cursor:pointer;min-height:44px}
.nav-toggle .chevron{width:.875rem;height:.875rem;transition:transform .2s;color:var(--muted-fg)}
.nav-toggle:hover .chevron{color:var(--fg)}
.nav-toggle[aria-expanded="false"] .chevron{transform:rotate(-90deg)}
.nav-links{display:flex;flex-direction:column;gap:.25rem}
.nav-links.collapsed{display:none}
.nav-link{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.375rem;font-size:.875rem;color:var(--muted-fg);transition:all .2s;min-height:44px}
.nav-link:hover{color:var(--fg);background:var(--muted)}
.nav-link.active{background:var(--fg);color:var(--bg);font-weight:600}
.nav-link svg,.nav-link i{width:.875rem;height:.875rem;flex-shrink:0}

/* ── AD CARD ── */
.ad-card{border-radius:var(--radius);border:1px dashed var(--border);background:rgba(245,245,245,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:100%;min-height:250px}
.ad-card .ad-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(115,115,115,.4);font-weight:600;margin-bottom:.375rem}
.ad-card .ad-divider{width:2rem;height:1px;background:var(--border);margin-bottom:.5rem}
.ad-card .ad-slot{font-size:.75rem;color:rgba(115,115,115,.3)}
.ad-card .ad-size{font-size:10px;color:rgba(115,115,115,.25);margin-top:.25rem}

/* ── CONTENT COLUMN ── */
.content-col{flex:1;min-width:0;max-width:64rem;width:100%}

/* ── SECTION HEADERS ── */
.section-header{border-bottom:2px solid var(--border);padding-bottom:.75rem;margin-bottom:1.5rem}
.section-header h2{font-size:1.5rem;font-weight:700}
@media(min-width:768px){.section-header h2{font-size:1.875rem}}
.section-intro{color:var(--muted-fg);margin-bottom:1.5rem;line-height:1.6;font-size:1rem}

/* ── TL;DR BOX ── */
.tldr-box{background:rgba(245,245,245,.4);border:1px solid var(--border);border-left:4px solid var(--fg);
  border-radius:var(--radius);padding:1.25rem;margin:2rem 0}
.tldr-box .label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg);margin-bottom:.5rem}
.tldr-box .winner-line{font-size:1.125rem;font-weight:600;color:var(--fg);margin-bottom:.25rem}
.tldr-box .summary{font-size:.875rem;color:var(--muted-fg);line-height:1.6;margin-bottom:1rem}
.tldr-actions{display:flex;flex-direction:column;gap:.5rem}
@media(min-width:640px){.tldr-actions{flex-direction:row}}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.875rem;font-weight:600;padding:.5rem 1rem;border-radius:var(--radius);
  transition:all .2s;cursor:pointer;min-height:44px;
}
.btn-outline{border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.btn-outline:hover{background:var(--muted)}
.btn-cta{background:var(--orange-500);color:#fff;font-weight:700;border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.1);text-decoration:none}
.btn-cta:hover{background:var(--orange-600);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-cta:active{background:var(--orange-700)}
.btn-cta svg,.btn-cta i{width:1rem;height:1rem}
.btn-full{
  width:100%;
  white-space:normal;
  word-break:break-word;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  height:auto;
}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}

/* ── CARD BASE ── */
.card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);position:relative;display:flex;flex-direction:column}
.card-winner{border-color:var(--emerald-500);box-shadow:0 0 0 3px rgba(16,185,129,.1)}
.winner-badge{position:absolute;top:-.875rem;left:50%;transform:translateX(-50%);z-index:10;
  display:inline-flex;align-items:center;gap:.375rem;background:var(--emerald-600);color:#fff;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.25rem 1rem;border-radius:9999px;white-space:nowrap}
.winner-badge svg,.winner-badge i{width:.75rem;height:.75rem}

/* ── PRODUCT CARD ── */
.product-card-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1.5rem .75rem}
.product-img{width:100%;max-width:180px;height:120px;object-fit:contain;background:rgba(245,245,245,.4);border-radius:var(--radius);padding:.75rem;margin:0 auto}
.product-info{margin-top:1rem;display:flex;flex-direction:column;gap:.25rem}
.product-info h3{font-size:1.25rem;font-weight:700}
.product-info .tagline{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.rating-row{display:flex;align-items:center;justify-content:center;gap:.5rem;padding-top:.25rem;flex-wrap:wrap}
.stars{display:flex;align-items:center;gap:2px;flex-shrink:0}
.stars svg,.stars i{width:1rem;height:1rem}
.star-filled{color:var(--amber-400);fill:var(--amber-400)}
.star-empty{color:var(--border)}
.rating-num{font-size:.875rem;font-weight:600}
.review-count{font-size:.75rem;color:var(--muted-fg)}
.product-card-body{padding:.75rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem;flex:1}

/* ── KEY SPECS ── */
.specs-box{background:rgba(245,245,245,.4);border-radius:var(--radius);padding:1rem}
.specs-box .specs-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg);margin-bottom:.75rem}
.specs-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.spec-row{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--bg);border-radius:.25rem;padding:.375rem .5rem;gap:.5rem;overflow:hidden}
.spec-row .spec-label{color:var(--muted-fg);flex-shrink:0;min-width:0}
.spec-row .spec-value{font-weight:600;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.spec-row .spec-value.highlight{color:var(--emerald-600)}

/* ── CARD CTAs ── */
.card-ctas{display:flex;flex-direction:column;gap:.5rem;margin-top:auto}

/* ── VS DIVIDER ── */
.vs-divider{display:none;align-items:center;justify-content:center;align-self:stretch}
@media(min-width:768px){.vs-divider{display:flex}}
.vs-col{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.vs-line{width:1px;flex:1;background:var(--border)}
.vs-text{font-size:1.5rem;font-weight:700;color:rgba(115,115,115,.4);padding:0 .5rem}

/* ── HEAD-TO-HEAD GRID ── */
.h2h-grid{display:grid;gap:1rem;align-items:start;grid-template-columns:1fr} /* single column on mobile */
@media(min-width:768px){.h2h-grid{grid-template-columns:1fr auto 1fr}}
.h2h-grid > .card{min-width:0} /* prevent card content from blowing out grid columns */
.h2h-badge-row{margin-top:1.5rem;text-align:center}
.trust-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--muted);color:var(--fg);
  font-size:.875rem;padding:.5rem 1rem;border-radius:var(--radius);border:1px solid var(--border)}
.trust-badge svg,.trust-badge i{width:1rem;height:1rem}

/* ── COMPARISON TABLE ── */
.comparison-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.comparison-table{width:100%;border-collapse:collapse;font-size:.875rem}
.comparison-table thead tr{background:rgba(245,245,245,.5)}
.comparison-table th{text-align:left;padding:.75rem 1rem;font-weight:600;color:var(--fg);border-bottom:1px solid var(--border)}
.comparison-table th:first-child{width:35%}
.comparison-table tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
.comparison-table tbody tr:last-child{border-bottom:none}
.comparison-table tbody tr:hover{background:rgba(245,245,245,.3)}
.comparison-table td{padding:.75rem 1rem}
.comparison-table td:first-child{font-weight:600;color:var(--fg)}
.cell-val{display:flex;align-items:center;gap:.5rem}
.cell-val.winner{color:var(--emerald-600);font-weight:600}
.cell-val.loser{color:var(--muted-fg)}
.cell-val svg,.cell-val i{width:1rem;height:1rem;flex-shrink:0}
.cell-val .check-icon{color:var(--emerald-500)}
.cell-val .x-icon{color:rgba(115,115,115,.4)}
.cell-note{font-size:.75rem;color:var(--muted-fg);margin-top:2px}

/* ── VERDICT BOXES ── */
.verdict-box{margin-top:1.5rem;padding:1rem;border-radius:var(--radius);background:rgba(245,245,245,.4);border:1px solid var(--border);font-size:.875rem;line-height:1.6;color:var(--muted-fg)}
.verdict-box strong{color:var(--fg)}
.value-insight-box{margin-top:1.5rem;padding:1rem;border-radius:var(--radius);background:rgba(10,10,10,.02);
  border:1px solid var(--border);border-left:4px solid var(--fg);font-size:.875rem;line-height:1.6;color:var(--muted-fg)}
.value-insight-box strong{color:var(--fg)}

/* ── WINNER VERDICT CARD ── */
.winner-card{border:2px solid var(--emerald-500);box-shadow:0 0 0 3px rgba(16,185,129,.08);border-radius:var(--radius);background:var(--card)}
.winner-card-header{text-align:center;padding:1.5rem 1.5rem .5rem}
.winner-card-header .title-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.25rem}
.winner-card-header .title-row svg,.winner-card-header .title-row i{width:1.5rem;height:1.5rem;color:var(--emerald-600)}
.winner-card-header h2{font-size:1.5rem;font-weight:700}
@media(min-width:768px){.winner-card-header h2{font-size:1.875rem}}
.winner-card-header .sub{font-size:.875rem;color:var(--muted-fg)}
.winner-card-body{padding:.75rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem}

/* Winner block (green) */
.winner-block{border-radius:var(--radius);background:var(--emerald-50);border:1px solid var(--emerald-200);padding:1.25rem}
.winner-block h3{font-size:1.125rem;font-weight:700;color:var(--emerald-700);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.winner-block h3 svg,.winner-block h3 i{width:1.25rem;height:1.25rem}
.winner-block .desc{font-size:.875rem;color:var(--muted-fg);line-height:1.6;margin-bottom:1rem}
.winner-reasons{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.winner-reasons li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem}
.winner-reasons li svg,.winner-reasons li i{width:1rem;height:1rem;color:var(--emerald-500);flex-shrink:0;margin-top:2px}

/* Runner-up block (amber) */
.runnerup-block{border-radius:var(--radius);background:var(--amber-50);border:1px solid var(--amber-200);padding:1.25rem}
.runnerup-block h4{font-size:1rem;font-weight:700;color:var(--amber-700);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.runnerup-block h4 svg,.runnerup-block h4 i{width:1rem;height:1rem}
.runnerup-block .desc{font-size:.875rem;color:var(--muted-fg);line-height:1.6;margin-bottom:1rem}

/* Use-case picker */
.usecase-box{border-radius:var(--radius);background:rgba(245,245,245,.4);border:1px solid var(--border);padding:1.25rem}
.usecase-box h4{font-size:.875rem;font-weight:700;text-align:center;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}
.usecase-row{display:flex;align-items:center;gap:.75rem;font-size:.875rem;padding:.375rem 0}
.usecase-row .label{color:var(--muted-fg);flex:1}
.usecase-row .label strong{color:var(--fg);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.usecase-row .pick{display:flex;align-items:center;gap:.25rem;font-weight:600;color:var(--fg);white-space:nowrap}
.usecase-row .pick svg,.usecase-row .pick i{width:.875rem;height:.875rem;color:var(--emerald-500)}

/* ── FAQ ACCORDION ── */
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem;
  font-size:.875rem;font-weight:600;text-align:left;background:none;transition:background .15s;cursor:pointer;min-height:44px}
.faq-trigger:hover{background:rgba(245,245,245,.4)}
.faq-trigger .chevron{width:1rem;height:1rem;transition:transform .2s;flex-shrink:0;color:var(--muted-fg)}
.faq-item.open .faq-trigger .chevron{transform:rotate(180deg)}
.faq-answer{display:none;padding:0 1rem 1rem;font-size:.875rem;color:var(--muted-fg);line-height:1.6}
.faq-item.open .faq-answer{display:block}

/* ── CONCLUSION ── */
.conclusion-body{display:flex;flex-direction:column;gap:1rem}
.conclusion-body p{color:var(--muted-fg);line-height:1.6}
.conclusion-body .final{color:var(--fg);font-weight:600}

/* ── EXPLORE OTHER CATEGORIES ── */
.explore-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.explore-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.explore-grid{grid-template-columns:repeat(3,1fr)}}
.explore-card{display:flex;flex-direction:column;border-radius:.75rem;border:1px solid var(--border);background:var(--bg);padding:1.25rem;transition:all .2s}
.explore-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06);border-color:rgba(10,10,10,.25)}
.explore-pill{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  background:var(--muted);color:var(--muted-fg);border-radius:9999px;padding:.25rem .75rem;margin-bottom:.75rem}
.explore-card h3{font-weight:700;font-size:.9375rem;line-height:1.35;color:var(--fg);margin-bottom:.5rem;text-wrap:balance}
.explore-card .excerpt{font-size:.875rem;color:var(--muted-fg);line-height:1.6;flex:1}
.explore-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.explore-card .card-footer .discover{font-weight:700;font-size:.875rem;color:var(--fg)}
.explore-card .card-footer svg,.explore-card .card-footer i{width:1rem;height:1rem;color:var(--fg);transition:transform .2s}
.explore-card:hover .card-footer svg,.explore-card:hover .card-footer i{transform:translateX(2px)}

/* ── MORE COMPARISONS ── */
.more-grid{display:grid;gap:1rem}
@media(min-width:640px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.more-grid{grid-template-columns:repeat(3,1fr)}}
.more-card{display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);padding:1rem;transition:all .2s}
.more-card:hover{border-color:rgba(10,10,10,.3);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.more-badge{display:inline-block;font-size:.75rem;background:var(--muted);color:var(--fg);border-radius:var(--radius);padding:.125rem .5rem;margin-bottom:.75rem;font-weight:500;border:1px solid var(--border)}
.more-card h3{font-weight:600;font-size:.875rem;line-height:1.35;margin-bottom:.375rem;color:var(--fg)}
.more-card .excerpt{font-size:.75rem;color:var(--muted-fg);line-height:1.6;margin-bottom:.75rem}
.more-card .readmore{font-size:.75rem;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:.25rem}
.more-card .readmore svg,.more-card .readmore i{width:.75rem;height:.75rem}

/* ── SHARE BOX ── */
.share-box{border-radius:var(--radius);border:1px solid var(--border);background:rgba(245,245,245,.3);
  padding:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center}
@media(min-width:640px){.share-box{flex-direction:row;justify-content:space-between}}
.share-box .share-text p:first-child{font-weight:600;color:var(--fg)}
.share-box .share-text p:last-child{font-size:.875rem;color:var(--muted-fg);margin-top:.125rem}
.btn-share{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(10,10,10,.3);background:var(--bg);
  color:var(--fg);font-weight:600;padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;transition:all .2s;flex-shrink:0;min-height:44px}
.btn-share:hover{background:var(--fg);color:var(--bg)}
.btn-share svg,.btn-share i{width:1rem;height:1rem}

/* ── RESEARCH SOURCES ── */
.sources-grid{display:grid;gap:1rem;margin-bottom:1.5rem}
@media(min-width:640px){.sources-grid{grid-template-columns:repeat(3,1fr)}}
.source-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.source-badge{display:inline-block;font-size:.75rem;background:var(--muted);color:var(--fg);border-radius:var(--radius);padding:.125rem .5rem;align-self:flex-start;font-weight:500;border:1px solid var(--border)}
.source-card h3{font-weight:700;font-size:.875rem;color:var(--fg)}
.source-card .desc{font-size:.75rem;color:var(--muted-fg);line-height:1.6;flex:1}
.source-card .visit{font-size:.75rem;font-weight:700;color:var(--fg);display:flex;align-items:center;gap:.25rem}
.source-card .visit:hover{text-decoration:underline}
.source-card .visit svg,.source-card .visit i{width:.75rem;height:.75rem}

/* ── STATS STRIP ── */
.stats-strip{border-radius:var(--radius);border:1px solid var(--border);background:rgba(245,245,245,.2);padding:1.25rem 1.5rem}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;text-align:center}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--fg)}
.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin-top:.25rem}

/* ── SPACING UTILITIES ── */
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.gap-2{gap:.5rem}.gap-4{gap:1rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-4>*+*{margin-top:1rem}

/* ── PROS/CONS ── */
.pros-cons{display:flex;flex-direction:column;gap:1rem}
.pros-list,.cons-list{list-style:none;display:flex;flex-direction:column;gap:.375rem}
.pros-list li,.cons-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem}
.pros-list li svg,.pros-list li i{width:1rem;height:1rem;color:var(--emerald-500);flex-shrink:0;margin-top:2px}
.cons-list li svg,.cons-list li i{width:1rem;height:1rem;color:var(--muted-fg);opacity:.4;flex-shrink:0;margin-top:2px}
.pros-heading,.cons-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.pros-heading{color:var(--emerald-700)}
.cons-heading{color:var(--muted-fg)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY NAV BAR
   Only visible below xl breakpoint. Slides in once hero scrolls out.
   ═══════════════════════════════════════════════════════════════ */
.mobile-toc-bar{
  position:fixed;
  top:64px; /* sits directly below fixed site header */
  left:0;right:0;
  z-index:9998;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transform:translateY(-100%);
  transition:transform 250ms ease;
}
.mobile-toc-bar.visible{transform:translateY(0)}
@media(min-width:1280px){.mobile-toc-bar{display:none}} /* desktop only shows sidebar */
.mobile-toc-trigger{
  width:100%;display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:var(--fg);
  background:none;border:none;cursor:pointer;min-height:44px;
}
.mobile-toc-trigger:hover{background:rgba(245,245,245,.5)}
.mobile-toc-trigger span{flex:1;text-align:left}
.mobile-toc-chevron{transition:transform 200ms ease;color:var(--muted-fg)}
.mobile-toc-dropdown{
  border-top:1px solid var(--border);
  background:var(--bg);
  max-height:60vh;
  overflow-y:auto;
}
.mobile-toc-link{
  display:flex;align-items:center;gap:.625rem;
  padding:.75rem 1rem;font-size:.875rem;color:var(--muted-fg);
  border-bottom:1px solid rgba(229,229,229,.5);
  min-height:44px;transition:background .15s;
}
.mobile-toc-link:hover,.mobile-toc-link:active{background:rgba(245,245,245,.5);color:var(--fg)}
.mobile-toc-link svg,.mobile-toc-link i{flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════
   SWITCHER REALITY SECTION
   ═══════════════════════════════════════════════════════════════ */
.section-header .section-sub{font-size:.9rem;color:var(--muted-fg);margin-top:.375rem}
.switcher-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1rem}
@media(min-width:640px){.switcher-grid{grid-template-columns:1fr 1fr}}
.switcher-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.875rem;min-width:0;overflow:hidden}
.switcher-direction{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.from-badge{font-size:.75rem;font-weight:600;background:rgba(100,116,139,.12);color:var(--fg);padding:.25rem .625rem;border-radius:99px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.to-badge{font-size:.75rem;font-weight:600;background:rgba(16,185,129,.12);color:var(--emerald-600);padding:.25rem .625rem;border-radius:99px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.switcher-stat{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;min-width:0}
.switcher-stat .pct{font-size:1.75rem;font-weight:700;color:var(--primary);line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.switcher-stat .pct-label{font-size:.8125rem;color:var(--muted-fg);flex-shrink:1}
.switcher-reason{font-size:.875rem;line-height:1.6;color:var(--muted-fg);margin:0}
.switcher-miss{display:flex;align-items:flex-start;gap:.5rem;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);border-radius:.375rem;padding:.625rem .75rem;font-size:.8125rem;color:var(--fg);line-height:1.5}
.switcher-insight-box{display:flex;align-items:flex-start;gap:.875rem;background:rgba(37,99,235,.05);border:1px solid rgba(37,99,235,.15);border-radius:var(--radius);padding:1rem 1.25rem}
.switcher-insight-box p{font-size:.9375rem;line-height:1.6;color:var(--fg);margin:0}

/* ═══════════════════════════════════════════════════════════════
   LIFECYCLE SECTION
   ═══════════════════════════════════════════════════════════════ */
.lifecycle-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:1rem}
.lifecycle-table{width:100%;border-collapse:collapse;font-size:.875rem}
.lifecycle-table thead{background:linear-gradient(to right,var(--primary),#1d4ed8)}
.lifecycle-table thead th{color:#fff;font-weight:600;padding:.875rem 1rem;text-align:left}
.lifecycle-table thead th.period-col{width:120px;white-space:nowrap}
.lifecycle-table thead th.product-col{min-width:160px}
.lifecycle-table tbody tr:nth-child(odd){background:rgba(245,245,245,.3)}
.lifecycle-table tbody tr:nth-child(even){background:var(--card)}
.lifecycle-table td{padding:.875rem 1rem;vertical-align:top;line-height:1.6;color:var(--muted-fg)}
.lifecycle-table td:first-child{color:var(--fg);font-weight:600}
.period-cell{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.lifecycle-verdict{display:flex;align-items:flex-start;gap:.875rem;background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2);border-radius:var(--radius);padding:1rem 1.25rem}
.lifecycle-verdict p{font-size:.9375rem;line-height:1.6;color:var(--fg);margin:0}

/* ═══════════════════════════════════════════════════════════════
   DECISION HELPER
   ═══════════════════════════════════════════════════════════════ */
.decision-helper{background:var(--card);border:2px solid var(--primary);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;display:flex;flex-direction:column;gap:1.25rem}
.decision-header{display:flex;align-items:flex-start;gap:.875rem}
.decision-title{font-weight:700;font-size:1rem;margin-bottom:.125rem}
.decision-sub{font-size:.875rem;color:var(--muted-fg)}
.decision-step{display:flex;flex-direction:column;gap:.875rem}
.decision-q{font-size:.9375rem;font-weight:600;color:var(--fg)}
.decision-choices{display:flex;gap:.75rem;flex-wrap:wrap}
.decision-btn{display:inline-flex;align-items:center;gap:.375rem;background:var(--bg);border:1px solid var(--border);border-radius:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;min-height:44px}
.decision-btn:hover{background:rgba(37,99,235,.06);border-color:var(--primary)}
.decision-result{display:flex;align-items:flex-start;gap:.875rem;background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2);border-radius:.5rem;padding:1.125rem}
.result-pick{font-size:1rem;font-weight:600;margin-bottom:.375rem}
.result-reason{font-size:.875rem;color:var(--muted-fg);line-height:1.6;margin-bottom:.875rem}
.decision-reset{display:none;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--muted-fg);background:none;border:none;cursor:pointer;padding:.25rem 0;width:fit-content}
.decision-reset:hover{color:var(--fg)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — < 768px
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){

  /* Reduce hero text on small screens */
  .hero-header h1{font-size:1.5rem}
  .hero-header .subtitle{font-size:1rem}

  /* TL;DR actions always stacked on small mobile */
  .tldr-actions{flex-direction:column}

  /* Product cards full width, sufficient padding */
  .product-card-header{padding:1.25rem 1rem .5rem}
  .product-card-body{padding:.5rem 1rem 1.25rem}

  /* Comparison tables: allow horizontal scroll, don't clip */
  .comparison-table-wrap{-webkit-overflow-scrolling:touch}
  .comparison-table th,.comparison-table td{padding:.5rem .75rem}

  /* Winner card padding reduced */
  .winner-card-header{padding:1rem 1rem .5rem}
  .winner-card-body{padding:.5rem 1rem 1rem}
  .winner-block,.runnerup-block,.usecase-box{padding:1rem}

  /* Stats: always 2 columns on small mobile */
  .stats-grid{grid-template-columns:repeat(2,1fr)}

  /* Sources: stack on small mobile */
  .sources-grid{grid-template-columns:1fr}

  /* Explore and more grids: single column */
  .explore-grid,.more-grid{grid-template-columns:1fr}

  /* Share box: stack */
  .share-box{flex-direction:column;align-items:flex-start}

  /* Ensure max-w containers don't add overflow */
  .max-w-7xl,.max-w-5xl,.max-w-3xl{width:100%}

}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB — hide on mobile, kept for structured data
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1023px){
  .page-breadcrumb{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════
   TOUCH & INTERACTION
   ═══════════════════════════════════════════════════════════════ */
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print{
  .sticky-nav,.mobile-toc-bar,.ad-card,.btn-share,header nav{display:none !important}
  .card{page-break-inside:avoid;box-shadow:none}
  a[href]:after{content:none}
  body{font-size:12pt}
}

/* ── OPTIONAL SECTIONS HIDE ── */
[data-optional="true"][style*="display:none"]{display:none !important}
[data-optional="true"][data-field*="{{"]{display:none !important}

/* ── OPTIONAL SECTION LOCK ── */
[data-optional="true"][style*="display:none"],
[data-optional="true"][style*="display: none"] {
  display: none !important;
}