:root {
  --bg-primary: #0B0F1A;
  --bg-secondary: #111827;
  --bg-card: #151C2C;
  --bg-card-hover: #1A2236;
  --bg-accent: rgba(99,179,237,0.06);
  --text-primary: #E8ECF4;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent: #63B3ED;
  --accent-bright: #90CDF4;
  --accent-glow: rgba(99,179,237,0.15);
  --gold: #F6C76B;
  --gold-glow: rgba(246,199,107,0.12);
  --green: #68D391;
  --red: #FC8181;
  --purple: #B794F4;
  --purple-glow: rgba(183,148,244,0.12);
  --border: rgba(148,163,184,0.08);
  --border-accent: rgba(99,179,237,0.2);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 40px rgba(99,179,237,0.08);
  --font-display: 'Instrument Serif',Georgia,serif;
  --font-body: 'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;
  --max-width: 820px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.article-container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.breadcrumb{padding:20px 0 0;font-size:13px;color:var(--text-muted);font-weight:500;letter-spacing:0.02em}
.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color var(--transition)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{margin:0 8px;opacity:0.4}
.article-hero{padding:48px 0 40px;border-bottom:1px solid var(--border);margin-bottom:40px}
.article-hero .category-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:var(--accent-glow);border:1px solid var(--border-accent);border-radius:100px;font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:20px}
.article-hero h1{font-family:var(--font-display);font-size:clamp(34px,5vw,50px);line-height:1.12;font-weight:400;color:var(--text-primary);margin-bottom:18px;letter-spacing:-0.02em}
.article-hero h1 em{font-style:italic;color:var(--accent-bright)}
.article-hero .subtitle{font-size:18px;color:var(--text-secondary);line-height:1.6;max-width:640px}
.article-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--text-muted)}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article-meta a{color:var(--accent);text-decoration:none}
.transparency-note{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--text-muted);border-radius:var(--radius-sm);padding:16px 20px;font-size:14px;color:var(--text-secondary);line-height:1.65;margin-bottom:40px}
.transparency-note a{color:var(--accent);text-decoration:none}
.rating-banner{background:linear-gradient(135deg,rgba(246,199,107,0.08),rgba(99,179,237,0.06));border:1px solid rgba(246,199,107,0.18);border-radius:var(--radius);padding:32px;text-align:center;margin-bottom:48px;position:relative;overflow:hidden}
.rating-banner::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:linear-gradient(90deg,var(--gold),var(--accent),var(--gold));border-radius:var(--radius) var(--radius) 0 0}
.rating-banner .score-icon{font-size:32px;margin-bottom:8px}
.rating-banner .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold);margin-bottom:8px}
.rating-banner h2{font-family:var(--font-display);font-size:26px;font-weight:400;color:var(--text-primary);margin-bottom:6px}
.rating-banner .score{font-size:42px;font-weight:700;color:var(--gold);font-family:var(--font-body);margin-bottom:16px;letter-spacing:-0.02em}
.rating-banner .cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:linear-gradient(135deg,var(--accent),#4299E1);color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;border:none;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:all var(--transition);box-shadow:0 4px 16px rgba(99,179,237,0.3)}
.rating-banner .cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(99,179,237,0.4);color:#fff;text-decoration:none}
.tldr-box{background:var(--bg-card);border:1px solid var(--border-accent);border-radius:var(--radius);padding:28px 32px;margin:32px 0 48px;position:relative}
.tldr-box::before{content:'\26A1';position:absolute;top:-14px;left:24px;background:var(--bg-card);padding:2px 10px;font-size:20px}
.tldr-box .tldr-title{font-family:var(--font-body);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--accent);margin-bottom:12px}
.tldr-box p{font-size:16px;line-height:1.7;color:var(--text-secondary);margin-bottom:0}
.tldr-box p strong{color:var(--text-primary)}
.toc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin:0 0 40px}
.toc-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;padding:0}
.toc li{counter-increment:toc;padding:6px 0}
.toc li::before{content:counter(toc, decimal-leading-zero);color:var(--text-muted);font-size:12px;font-weight:600;margin-right:12px;opacity:0.6}
.toc a{color:var(--text-secondary);text-decoration:none;font-size:15px;font-weight:500;transition:color var(--transition)}
.toc a:hover{color:var(--accent)}
.specs-table-wrap{overflow-x:auto;margin:32px -24px;padding:0 24px;-webkit-overflow-scrolling:touch}
.specs-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.specs-table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:middle}
.specs-table tbody tr:last-child td{border-bottom:none}
.specs-table tbody tr:hover{background:var(--bg-card)}
.specs-table .spec-label{font-weight:600;color:var(--text-primary);white-space:nowrap;width:200px;background:var(--bg-card)}
.specs-table .spec-value{color:var(--text-secondary)}
.specs-table .highlight-value{color:var(--accent-bright);font-weight:600}
.methodology-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;margin:40px 0}
.methodology-box h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-top:0;margin-bottom:14px;color:var(--text-primary)}
.methodology-box p{font-size:15px;line-height:1.7;margin-bottom:0}
h2{font-family:var(--font-display);font-size:clamp(26px,3.5vw,34px);font-weight:400;color:var(--text-primary);margin:56px 0 20px;letter-spacing:-0.01em;line-height:1.2}
h3{font-family:var(--font-body);font-size:20px;font-weight:700;color:var(--text-primary);margin:36px 0 12px;letter-spacing:-0.01em}
h4{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text-secondary);margin:28px 0 10px;text-transform:uppercase;letter-spacing:0.04em}
p{margin-bottom:18px;color:var(--text-secondary)}
p strong{color:var(--text-primary);font-weight:600}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-bright);text-decoration:underline}
.section-divider{font-family:var(--font-display);font-size:clamp(22px,3vw,28px);font-weight:400;color:var(--text-primary);margin:56px 0 8px;padding-bottom:16px;border-bottom:2px solid var(--border-accent);letter-spacing:-0.01em;line-height:1.2}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin:48px 0;overflow:hidden;transition:border-color var(--transition);box-shadow:var(--shadow-card)}
.review-card:hover{border-color:rgba(148,163,184,0.14)}
.review-card-header{padding:28px 32px 24px;border-bottom:1px solid var(--border);position:relative}
.review-card-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.badge-gold{background:var(--gold-glow);border:1px solid rgba(246,199,107,0.25);color:var(--gold)}
.badge-blue{background:var(--accent-glow);border:1px solid var(--border-accent);color:var(--accent)}
.badge-green{background:rgba(104,211,145,0.08);border:1px solid rgba(104,211,145,0.2);color:var(--green)}
.badge-purple{background:var(--purple-glow);border:1px solid rgba(183,148,244,0.25);color:var(--purple)}
.review-card-header h2{font-family:var(--font-display);font-size:28px;margin:0 0 6px;line-height:1.2}
.review-card-header .rating-line{font-size:14px;color:var(--text-muted);margin-bottom:0}
.review-card-header .rating-score{font-weight:700;color:var(--accent-bright);font-size:16px}
.review-card-body{padding:28px 32px}
.review-card-body p{font-size:16px}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:600px){.pros-cons{grid-template-columns:1fr}}
.pros-list,.cons-list{background:var(--bg-secondary);border-radius:var(--radius-sm);padding:20px 22px}
.pros-list{border:1px solid rgba(104,211,145,0.12)}
.cons-list{border:1px solid rgba(252,129,129,0.12)}
.pros-cons-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.pros-list .pros-cons-title{color:var(--green)}
.cons-list .pros-cons-title{color:var(--red)}
.pros-cons ul{list-style:none;padding:0}
.pros-cons li{padding:6px 0 6px 22px;position:relative;font-size:14.5px;color:var(--text-secondary);line-height:1.55}
.pros-list li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:700;font-size:13px}
.cons-list li::before{content:'\2717';position:absolute;left:0;color:var(--red);font-weight:700;font-size:13px}
.pricing-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin:20px 0;font-size:14px}
.pricing-table thead th{background:rgba(99,179,237,0.05);padding:12px 16px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.pricing-table tbody td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.pricing-table tbody tr:last-child td{border-bottom:none}
.pricing-table .price{font-weight:600;color:var(--text-primary)}
.hidden-costs{background:rgba(246,199,107,0.04);border:1px solid rgba(246,199,107,0.12);border-radius:var(--radius-sm);padding:18px 22px;margin:20px 0;font-size:14.5px;line-height:1.65}
.hidden-costs strong{color:var(--gold)}
.cta-group{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 8px;padding-top:20px;border-top:1px solid var(--border)}
.cta-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,var(--accent),#4299E1);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;border:none;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:all var(--transition);box-shadow:0 4px 16px rgba(99,179,237,0.25)}
.cta-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(99,179,237,0.35);color:#fff;text-decoration:none}
.cta-secondary{display:inline-flex;align-items:center;gap:6px;padding:13px 24px;background:transparent;color:var(--accent);font-family:var(--font-body);font-size:14px;font-weight:600;border:1px solid var(--border-accent);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:all var(--transition)}
.cta-secondary:hover{background:var(--accent-glow);color:var(--accent-bright);text-decoration:none}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:600px){.audience-grid{grid-template-columns:1fr}}
.audience-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 22px}
.audience-box h4{margin:0 0 10px}
.audience-box.for-box h4{color:var(--green)}
.audience-box.skip-box h4{color:var(--red)}
.audience-box p{font-size:14.5px;line-height:1.6;color:var(--text-secondary);margin-bottom:0}
.benchmark-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;margin:24px 0}
.benchmark-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}
@media(max-width:600px){.benchmark-grid{grid-template-columns:repeat(2,1fr)}}
.benchmark-item{text-align:center;padding:16px;background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border)}
.benchmark-item .bm-value{font-size:28px;font-weight:700;color:var(--accent-bright);margin-bottom:4px;letter-spacing:-0.02em}
.benchmark-item .bm-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.benchmark-item.gold .bm-value{color:var(--gold)}
.score-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
@media(max-width:600px){.score-breakdown{grid-template-columns:1fr}}
.score-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border)}
.score-item .score-cat{font-size:14px;font-weight:600;color:var(--text-primary)}
.score-item .score-val{font-size:16px;font-weight:700;color:var(--accent-bright)}
.feature-highlight{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin:24px 0}
.feature-highlight h4{margin-top:0;color:var(--accent);text-transform:none;font-size:15px;letter-spacing:0}
.feature-highlight p{font-size:15px;margin-bottom:0}
.framework-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;margin:40px 0}
.framework-section h3{margin-top:0;color:var(--accent-bright)}
.framework-item{margin:20px 0;padding-left:18px;border-left:2px solid var(--border-accent)}
.framework-item strong{color:var(--text-primary);display:block;margin-bottom:4px}
.framework-item p{font-size:15px;color:var(--text-secondary);margin-bottom:0}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
@media(max-width:600px){.compare-grid{grid-template-columns:1fr}}
.compare-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;text-decoration:none;transition:all var(--transition);display:block}
.compare-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.compare-card .vs-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);margin-bottom:6px}
.compare-card .vs-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.compare-card .vs-desc{font-size:13px;color:var(--text-muted)}
.faq-section{margin:48px 0}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-question{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;width:100%;text-align:left;padding:0;line-height:1.4}
.faq-question::after{content:'+';font-size:22px;font-weight:300;color:var(--text-muted);flex-shrink:0;transition:transform var(--transition)}
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease}
.faq-item.open .faq-answer{max-height:500px;padding-top:14px}
.faq-answer p{font-size:15.5px;line-height:1.7;color:var(--text-secondary)}
.bottom-line{background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));border:1px solid var(--border-accent);border-radius:var(--radius);padding:36px 32px;margin:48px 0;text-align:center}
.bottom-line h2{margin-top:0;margin-bottom:16px}
.bottom-line p{max-width:640px;margin:0 auto 24px;font-size:16px}
.bottom-line .cta-group{justify-content:center;border-top:none;padding-top:0}
.updated-note{text-align:center;padding:32px 0 64px;font-size:13px;color:var(--text-muted)}
.updated-note a{color:var(--text-muted)}
.updated-note a:hover{color:var(--accent)}
hr{border:none;border-top:1px solid var(--border);margin:48px 0}
@media(max-width:768px){
  .article-container{padding:0 18px}
  .review-card-header,.review-card-body{padding:22px 20px}
  .rating-banner,.framework-section,.bottom-line,.tldr-box,.methodology-box{padding:22px 20px}
  .benchmark-card{padding:22px 20px}
}