/* GetMyCert redesign — blog articles, blog index, compare pages (injected after inline styles) */

:root {
  --primary: #0D9488;
  --primary-light: #E6F7F3;
  --text: #1B2434;
  --text-light: #5B6779;
  --bg: #FBFCFE;
  --gmc-ink: #070B14;
  --gmc-mint: #2DE3B7;
  --gmc-cyan: #4CC9F0;
  --gmc-violet: #8B7CFF;
  --gmc-grad: linear-gradient(90deg, #2DE3B7, #4CC9F0 55%, #8B7CFF);
  --gmc-grad-light: linear-gradient(90deg, #0D9488, #0E7490 55%, #6D5BD0);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif !important; letter-spacing: -0.02em; }

.gmc-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--gmc-grad); z-index: 200; border-radius: 0 3px 3px 0;
}

/* ---------- header (articles use .blog-header, index/compare use .header) ---------- */
.blog-header, .header {
  background: rgba(7, 11, 20, 0.92) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(232, 237, 247, 0.08);
  padding: 14px 0 !important;
  position: sticky !important; top: 0; z-index: 120;
}
.blog-header a, .header a { color: #E8EDF7 !important; }
.blog-header > .container > a:first-child, .header > .container > a:first-child {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important;
}
.blog-header nav, .header nav { display: flex; align-items: center; gap: 22px; }
.blog-header nav a, .header nav a {
  color: #9AA7BD !important; font-weight: 500 !important; font-size: 14.5px !important;
  display: inline-flex !important; margin-left: 0 !important;
}
.blog-header nav a:hover, .header nav a:hover { color: #E8EDF7 !important; text-decoration: none !important; }

/* ---------- hero ---------- */
.hero-section, .hero, .page-title {
  background:
    radial-gradient(720px 420px at 88% -20%, rgba(139, 124, 255, 0.28), transparent 65%),
    radial-gradient(820px 500px at -8% 130%, rgba(45, 227, 183, 0.18), transparent 65%),
    radial-gradient(420px 320px at 72% 110%, rgba(76, 201, 240, 0.13), transparent 65%),
    #070B14 !important;
  position: relative;
  overflow: hidden;
}
.hero-section::before, .hero::before, .page-title::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(232,237,247,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(232,237,247,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(700px 420px at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(700px 420px at 50% 40%, #000 25%, transparent 78%);
}
.hero-section > *, .hero > *, .page-title > * { position: relative; }
.hero-section h1, .hero h1, .page-title h1 {
  color: #E8EDF7 !important;
  font-weight: 700 !important;
  font-size: clamp(1.9rem, 4vw, 2.9rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
}
.hero-section .meta, .hero p, .page-title p, .last-updated { color: #9AA7BD !important; opacity: 1 !important; }

/* ---------- article reading surface ---------- */
/* .content and .blog-grid pull up over the hero with negative margins; the hero
   is position:relative for its aurora layers, so these need explicit stacking */
.content, .blog-grid, .related-posts, .comparison-cards {
  position: relative; z-index: 2;
}
.content {
  border: 1px solid #E7ECF4;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -36px rgba(11, 18, 32, 0.25) !important;
  font-size: 16.5px;
  line-height: 1.75;
}
.content h2 {
  color: #0B1220 !important;
  font-weight: 700 !important;
  font-size: 1.65em !important;
  border-bottom: none !important;
  position: relative;
  padding-bottom: 12px !important;
}
.content h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3.5px; border-radius: 3px; background: var(--gmc-grad-light);
}
.content h3 { color: #0B1220 !important; font-weight: 600 !important; }
.content p, .content li { color: #3D495C !important; }
.content strong { color: #0B1220 !important; }
.content a { color: #0D9488 !important; text-decoration-color: rgba(13, 148, 136, 0.35); text-underline-offset: 3px; }
.content a:hover { text-decoration-color: #0D9488; }

.content blockquote {
  border-left: none !important;
  border-image: none !important;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.06), rgba(109, 91, 208, 0.05)) !important;
  border-radius: 14px !important;
  position: relative;
  padding: 18px 22px 18px 26px !important;
  font-style: normal !important;
}
.content blockquote::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 4px; background: var(--gmc-grad-light);
}

.content table {
  border: 1px solid #E7ECF4 !important;
  border-radius: 14px !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  overflow: hidden;
  box-shadow: 0 10px 26px -20px rgba(11, 18, 32, 0.2);
}
.content th {
  background: #0B1120 !important; color: #E8EDF7 !important;
  border: none !important; border-bottom: 1px solid #E7ECF4 !important;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600 !important;
}
.content td { border: none !important; border-bottom: 1px solid #EEF2F8 !important; }
.content tr:last-child td { border-bottom: none !important; }
.content tr:nth-child(even) td { background: #F8FAFD; }

/* cta box → midnight aurora panel */
.cta-box {
  background:
    radial-gradient(440px 260px at 85% -30%, rgba(139, 124, 255, 0.32), transparent 65%),
    radial-gradient(480px 300px at 0% 140%, rgba(45, 227, 183, 0.24), transparent 65%),
    #0B1120 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(232, 237, 247, 0.07);
}
.cta-box h3 { color: #E8EDF7 !important; }
.cta-box p { color: #9AA7BD !important; }
.cta-box a {
  background: var(--gmc-grad) !important; color: #04110D !important;
  border-radius: 999px !important; font-weight: 700 !important;
  box-shadow: 0 12px 32px -12px rgba(45, 227, 183, 0.55) !important;
  transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s !important;
}
.cta-box a:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 42px -12px rgba(76, 201, 240, 0.6) !important; background: var(--gmc-grad) !important; }

.tag {
  background: rgba(13, 148, 136, 0.08) !important; color: #0D9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.22); border-radius: 999px !important;
}
.breadcrumb a { color: #0D9488 !important; }

/* related posts (articles) */
.related-posts h3 { color: #0B1220; }
.related-posts a { color: #0D9488; }

/* ---------- blog index cards ---------- */
.blog-grid { gap: 20px !important; }
.blog-card {
  border: 1px solid #E7ECF4 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -22px rgba(11, 18, 32, 0.2) !important;
  transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s, border-color .25s !important;
}
.blog-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
  box-shadow: 0 22px 44px -22px rgba(13, 148, 136, 0.28) !important;
}
.blog-card h3 a:hover { color: #0D9488 !important; }
.blog-card-category {
  background: rgba(13, 148, 136, 0.08) !important; color: #0D9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.22); border-radius: 999px !important;
}

/* ---------- compare pages ---------- */
.comparison-table th { background: #0B1120 !important; color: #E8EDF7 !important; }
.comparison-table { border-radius: 14px !important; overflow: hidden; }
.feature-card, .comparison-card, .pros-cons {
  border: 1px solid #E7ECF4 !important; border-radius: 16px !important;
  box-shadow: 0 10px 28px -20px rgba(11, 18, 32, 0.18) !important;
}
.cta a, a.cta {
  border-radius: 999px !important;
}

/* ---------- faq.html (bare <header> + .header-container, img logo) ---------- */
body > header {
  background: rgba(7, 11, 20, 0.92) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(232, 237, 247, 0.08);
  position: sticky; top: 0; z-index: 120;
}
body > header a { color: #E8EDF7 !important; }
body > header nav a, .header-container nav a { color: #9AA7BD !important; font-weight: 500; }
body > header nav a:hover { color: #E8EDF7 !important; }
a.logo img { display: none; }
.faq-section h2 { color: #0B1220 !important; border-color: #E7ECF4 !important; }
.faq-item {
  border: 1px solid #E7ECF4 !important; border-radius: 16px !important;
  background: #fff !important; overflow: hidden;
  box-shadow: 0 8px 24px -18px rgba(11, 18, 32, 0.14) !important;
}
.faq-question { color: #0B1220 !important; }
.faq-answer { color: #3D495C !important; }

/* ---------- footer ---------- */
footer { background: #070B14 !important; color: #6B7890 !important; border-top: 1px solid rgba(232, 237, 247, 0.07); }
footer a { color: #2DE3B7 !important; }

/* ---------- reveals (gated behind .gmc-anim set by JS) ---------- */
.gmc-anim .gmc-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1); }
.gmc-anim .gmc-rv.gmc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gmc-anim .gmc-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 768px) {
  .content { border-radius: 16px !important; }
  .blog-header .container, .header .container { gap: 14px; }
  .blog-header > .container > a:first-child, .header > .container > a:first-child { font-size: 17px !important; flex-shrink: 0; }
  .blog-header nav, .header nav { gap: 13px; flex-wrap: wrap; justify-content: flex-end; }
  .blog-header nav a, .header nav a { font-size: 13px !important; white-space: nowrap; }
}