*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.sc-jZzfwj{max-width:1100px;margin:0 auto;padding:0 24px}
.sc-YsbkqA{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.sc-YsbkqA h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sc-YsbkqA p{font-size:16px;opacity:.8;font-style:italic}
.sc-YsbkqA .sc-HlWkXw{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.sc-TVkYim{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.sc-SwNoZN{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.sc-SwNoZN:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.sc-SwNoZN h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.sc-SwNoZN h2 a{color:#2c3e50;text-decoration:none}
.sc-SwNoZN .sc-CJlRhK{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.sc-SwNoZN p{font-size:15px;color:#555;margin-bottom:14px}
.sc-sPTcQN{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sc-WLSoMi{max-width:780px;margin:0 auto;padding:0 24px 60px}
.sc-WLSoMi h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.sc-WLSoMi .sc-CJlRhK{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.sc-WLSoMi h2{font-size:24px;margin:36px 0 14px}
.sc-WLSoMi h3{font-size:19px;margin:28px 0 10px}
.sc-WLSoMi p{margin-bottom:18px;font-size:17px}
.sc-WLSoMi ul,.sc-WLSoMi ol{margin:0 0 18px 28px}
.sc-WLSoMi a{color:#e74c3c}
.sc-WLSoMi img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.sc-bbDMtK{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.sc-bbDMtK a{color:#888}
.sc-QsCubH{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.sc-olhesi{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.sc-jjAPOR{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sc-CRKaHd{margin:0 0 28px}
.sc-cCREIa{width:100%;height:auto;border-radius:4px}
.sc-DMOWZA{margin:28px 0}
.sc-NhbGyn{width:100%;height:auto;border-radius:4px}
.sc-QDVBPv{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.sc-QDVBPv h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#2D3748;background:#F7FAFC}
.sc-YsbkqA{background:#1A202C;color:#fff}
.sc-YsbkqA h1{font-family:'Space Grotesk',serif;color:#fff}
.sc-YsbkqA p{color:rgba(255,255,255,.75)}
.sc-YsbkqA a{color:#fff;text-decoration:none}
.card h2{font-family:'Space Grotesk',serif}
.card h2 a{color:#1A202C}
.card h2 a:hover{color:#00D1FF}
.read-more{color:#00D1FF}
.article-content h1{font-family:'Space Grotesk',serif}
.article-content h2{font-family:'Space Grotesk',serif}
.article-content a{color:#00D1FF}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* it-code-fr — IBM Plex palette, graphite-navy + teal + rust */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --color-primary:        #1C3A57;
  --color-accent:         #0D9E9B;
  --color-accent-warm:    #D9601A;
  --color-bg:             #F6F8FA;
  --color-bg-alt:         #EBF0F6;
  --color-bg-dark:        #1C3A57;
  --color-text:           #1B1F2A;
  --color-text-muted:     #556070;
  --color-text-on-dark:   #ECF1F7;
  --color-heading:        #1C3A57;
  --color-link:           #0A7C7A;
  --color-link-hover:     #D9601A;
  --color-border:         #C8D4E0;
  --color-bq-bg:          #EBF0F6;
  --color-bq-border:      #0D9E9B;

  --font-heading:         'IBM Plex Sans', system-ui, sans-serif;
  --font-body:            'IBM Plex Serif', Georgia, serif;

  --size-base:            17px;
  --size-h1:              2.25rem;
  --size-h2:              1.75rem;
  --size-h3:              1.35rem;
  --weight-heading:       700;
  --lh-body:              1.75;
  --lh-heading:           1.25;
  --max-width:            68ch;
  --radius:               6px;
  --space-section:        3rem;
  --space-block:          1.5rem;
}

/* ─── BASE ────────────────────────────────────────────────────────── */
:root body {
  font-family:  var(--font-body);
  font-size:    var(--size-base);
  line-height:  var(--lh-body);
  color:        var(--color-text);
  background:   var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

:root *,
:root *::before,
:root *::after {
  box-sizing: border-box;
}

/* ─── HEADINGS ────────────────────────────────────────────────────── */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family:  var(--font-heading);
  font-weight:  var(--weight-heading);
  line-height:  var(--lh-heading);
  color:        var(--color-heading);
  margin-top:   var(--space-section);
  margin-bottom: 0.6em;
}

:root h1 { font-size: var(--size-h1); margin-top: 0; }
:root h2 { font-size: var(--size-h2); }
:root h3 { font-size: var(--size-h3); }
:root h4 { font-size: 1.1rem; font-weight: 600; }

/* ─── BODY TEXT ───────────────────────────────────────────────────── */
:root p {
  max-width:    var(--max-width);
  margin-top:   0;
  margin-bottom: var(--space-block);
}

:root ul,
:root ol {
  max-width:    var(--max-width);
  margin-bottom: var(--space-block);
  padding-left: 1.5em;
}

:root li {
  margin-bottom: 0.4em;
}

:root li::marker {
  color: var(--color-accent);
}

/* ─── LINKS ───────────────────────────────────────────────────────── */
:root a {
  color:           var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:      color 0.18s ease;
}

:root a:hover {
  color: var(--color-link-hover);
}

/* ─── BLOCKQUOTE ──────────────────────────────────────────────────── */
:root blockquote {
  background:   var(--color-bq-bg);
  border-left:  4px solid var(--color-bq-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin:       var(--space-block) 0;
  padding:      1rem 1.25rem;
  max-width:    var(--max-width);
  font-style:   italic;
  color:        var(--color-text);
}

:root blockquote p {
  margin-bottom: 0;
}

:root blockquote cite {
  display:    block;
  margin-top: 0.5em;
  font-size:  0.875rem;
  font-style: normal;
  color:      var(--color-text-muted);
}

/* ─── CODE & PRE ──────────────────────────────────────────────────── */
:root code {
  font-family:  'IBM Plex Mono', 'Fira Code', monospace;
  font-size:    0.875em;
  background:   var(--color-bg-alt);
  color:        var(--color-primary);
  padding:      0.15em 0.4em;
  border-radius: 3px;
}

:root pre {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  border-radius: var(--radius);
  padding:      1.25rem;
  overflow-x:   auto;
  font-size:    0.875rem;
  line-height:  1.6;
  margin-bottom: var(--space-block);
}

:root pre code {
  background:  none;
  color:       inherit;
  padding:     0;
  font-size:   inherit;
}

/* ─── TABLES (course comparisons) ────────────────────────────────── */
:root table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
  margin-bottom:   var(--space-block);
}

:root th {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  font-family:  var(--font-heading);
  font-weight:  600;
  font-size:    0.875rem;
  text-align:   left;
  padding:      0.65rem 0.875rem;
  letter-spacing: 0.02em;
}

:root td {
  padding:      0.6rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  color:        var(--color-text);
  vertical-align: top;
}

:root tbody tr:nth-child(even) td {
  background: var(--color-bg-alt);
}

:root tbody tr:hover td {
  background: #E0EAF3;
}

/* ─── MAGAZINE HEADER ─────────────────────────────────────────────── */
:root .sc-YsbkqA {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  padding:      1.75rem 1.5rem;
}

:root .sc-YsbkqA h1 {
  font-family:  var(--font-heading);
  color:        var(--color-text-on-dark);
  font-size:    1.5rem;
  margin:       0 0 0.25rem;
  letter-spacing: -0.01em;
}

:root .sc-YsbkqA p {
  color:   rgba(236, 241, 247, 0.78);
  margin:  0;
  font-size: 0.9375rem;
}

:root .sc-YsbkqA a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
}

:root .sc-YsbkqA a:hover {
  color: var(--color-accent);
}

/* ─── CARDS ───────────────────────────────────────────────────────── */
:root .card {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem;
  transition:    box-shadow 0.18s ease;
}

:root .card:hover {
  box-shadow: 0 4px 16px rgba(28, 58, 87, 0.1);
}

:root .card h2 {
  font-family: var(--font-heading);
  font-size:   1.2rem;
  margin-top:  0;
  margin-bottom: 0.4em;
}

:root .card h2 a {
  color:           var(--color-heading);
  text-decoration: none;
}

:root .card h2 a:hover {
  color: var(--color-accent-warm);
}

:root .card .card-meta {
  font-size:  0.8125rem;
  color:      var(--color-text-muted);
  margin-bottom: 0.6rem;
  font-family:   var(--font-heading);
  font-weight:   500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

:root .read-more {
  font-family:  var(--font-heading);
  font-weight:  600;
  font-size:    0.875rem;
  color:        var(--color-accent);
  text-decoration: none;
}

:root .read-more:hover {
  color: var(--color-accent-warm);
}

/* ─── ARTICLE CONTENT ─────────────────────────────────────────────── */
:root .article-content h1 { font-family: var(--font-heading); }
:root .article-content h2 { font-family: var(--font-heading); }
:root .article-content h3 { font-family: var(--font-heading); }

:root .article-content a {
  color: var(--color-link);
}

:root .article-content a:hover {
  color: var(--color-link-hover);
}

:root .article-content img {
  max-width:    100%;
  height:       auto;
  border-radius: var(--radius);
  display:      block;
  margin:       var(--space-block) 0;
}

/* ─── VERDICT / RATING BADGE ──────────────────────────────────────── */
:root .verdict-badge {
  display:       inline-block;
  background:    var(--color-accent);
  color:         #fff;
  font-family:   var(--font-heading);
  font-weight:   700;
  font-size:     0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:       0.25em 0.65em;
  border-radius: var(--radius);
}

:root .verdict-badge.verdict-warm {
  background: var(--color-accent-warm);
}

/* ─── NOTICE / TIP BOX ────────────────────────────────────────────── */
:root .tip-box {
  background:   var(--color-bg-alt);
  border-left:  4px solid var(--color-accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:      1rem 1.25rem;
  margin-bottom: var(--space-block);
  max-width:    var(--max-width);
}

:root .tip-box p {
  margin-bottom: 0;
}

/* ─── NAV / TAG PILLS ─────────────────────────────────────────────── */
:root .tag-pill {
  display:       inline-block;
  background:    var(--color-bg-alt);
  color:         var(--color-primary);
  font-family:   var(--font-heading);
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:       0.2em 0.6em;
  border-radius: 3px;
  text-decoration: none;
}

:root .tag-pill:hover {
  background: var(--color-accent);
  color:      #fff;
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */
:root .site-footer {
  background:  var(--color-bg-alt);
  border-top:  2px solid var(--color-border);
  padding:     var(--space-section) 1.5rem;
  font-size:   0.875rem;
  color:       var(--color-text-muted);
}

:root .site-footer a {
  color: var(--color-text-muted);
}

:root .site-footer a:hover {
  color: var(--color-link-hover);
}

/* ─── UTILITIES ───────────────────────────────────────────────────── */
:root .text-muted  { color: var(--color-text-muted); }
:root .text-accent { color: var(--color-accent); }
:root .text-warm   { color: var(--color-accent-warm); }