/* =========================
   Base overrides for Bold Icon
   ========================= */
:root{
  --bg:#0b1020;            /* midnight blue */
  --text:#ffffff;
  --muted:#d2d6e1;
  --card:#111737;
  --card2:#0f1530;
  --accent:#c0c6d9;        /* silver accent (default accent) */
  --accent-ink:#0a0f1f;    /* dark ink against silver UI */
  --radius:18px;
  --maxw:1100px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.container{max-width:var(--maxw);margin:0 auto;padding:32px 20px}
h1,h2,h3{line-height:1.15;margin:0 0 12px}
p{color:var(--muted)}
ul{margin:0;padding-left:18px}
a{color:inherit;text-decoration:none}

/* ========== Hero ========== */
.hero{
  padding:48px 24px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(192,198,217,.15), transparent);
}
.hero .sub{font-size:1.2rem;margin-top:8px;color:var(--muted)}

/* ========== Feature highlights ========== */
.highlights{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:22px
}
.highlights li{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  padding:14px;border-radius:12px;
  position:relative;list-style:none;
  padding-left:44px; /* room for bolt */
}
.highlights li::before{
  content:"";
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  background:url('https://core.boldicon.com/images/favicon.svg') no-repeat center center;
  background-size:contain;
  /* render as #28a745 green with reduced glow */
  filter:brightness(1) saturate(80%) invert(44%) sepia(96%) saturate(808%) hue-rotate(85deg) brightness(85%) contrast(85%);
}

/* ========== Panels / Cards / Grids ========== */
.panel{margin-top:42px;padding:28px;border-radius:var(--radius);background:var(--card)}
.panel.alt{background:var(--card2)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding:18px;border-radius:12px
}

/* ========== Comparison ========== */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.compare-col{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding:18px;border-radius:12px
}
.compare-col.featured{
  border:1px solid var(--accent);
  box-shadow:0 0 0 4px rgba(192,198,217,.12)
}

/* ========== Checklists ========== */
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:26px;margin:10px 0}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700
}

/* ========== Buttons / CTAs ========== */
.cta-row{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);font-weight:700
}
/* Default accent (silver) used for secondary buttons */
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-lg{padding:16px 22px;font-size:1.1rem}

/* Hero primary CTA override: cherry red */
.hero .cta-row{display:flex;justify-content:center;margin-top:24px}
.hero .btn-accent{
  background:#c0142a; color:#fff; border:none;
  box-shadow:0 6px 18px rgba(192,20,42,0.4);
  transition:background .2s ease
}
.hero .btn-accent:hover{background:#a71124}

/* Final section + primary CTA override: cherry red */
.final-cta{
  margin:56px 0 30px;text-align:center;
  padding:36px;border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(192,198,217,.12), transparent)
}
.final-cta .btn-accent{
  background:#c0142a;color:#fff;border:none;
  padding:16px 32px;border-radius:14px;
  box-shadow:0 6px 18px rgba(192,20,42,0.35);
  transition:background .2s ease
}
.final-cta .btn-accent:hover{background:#a71124}

.tiny-note{font-size:.9rem;color:var(--muted)}

/* ========== Responsive ========== */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .highlights{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
}

/* Global primary CTA — force cherry red everywhere */
body main a.btn.btn-accent,
body main button.btn.btn-accent{
  background:#c0142a !important;   /* cherry red */
  color:#ffffff !important;
  border:none !important;
  font-weight:700;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(192,20,42,0.35);
  transition:background .2s ease, transform .05s ease;
}
body main a.btn.btn-accent:hover,
body main button.btn.btn-accent:hover{ background:#a71124 !important; }
body main a.btn.btn-accent:active,
body main button.btn.btn-accent:active{ transform:translateY(1px); }

/* Trust microcopy under hero CTA */
.hero .trust-row{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:12px;
  color:var(--muted);
  font-size:.95rem;
  flex-wrap:wrap;
}
.hero .trust-row span{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Final CTA trust note */
.final-cta .trust-note{
  margin-top:10px;
  color:var(--muted);
  font-size:.95rem;
}
/* ===== Bolt glow + pulse (scale the bolt itself) ===== */
/* ===== Bolt glow + pulse (scale the bolt itself) ===== */
:root{
  --red:#28a745;            /* green */
  --silver:#c0c6d9;         /* silver tint */
  --bolt-size:22px;
}

.highlights li{
  position:relative;
  padding-left:46px;        /* room for bolt */
  list-style:none;
}

.highlights li::before{
  content:"";
  position:absolute;
  left:14px; top:50%;
  width:var(--bolt-size); height:var(--bolt-size);
  transform:translateY(-50%) scale(1);
  transform-origin:center;
  background:url('https://core.boldicon.com/images/favicon.svg') no-repeat center / contain;
  /* GREEN tone #28a745 with reduced glow */
  filter:
    brightness(0) saturate(100%)
    invert(48%) sepia(100%) saturate(1200%) hue-rotate(90deg) brightness(75%) contrast(80%)
    drop-shadow(0 0 3px rgba(40,167,69,.25));
  animation:boltScale 2.8s ease-in-out infinite;
}

.highlights li::after{
  content:"";
  position:absolute;
  left:12px; top:50%;
  width:calc(var(--bolt-size) + 8px);
  height:calc(var(--bolt-size) + 8px);
  transform:translateY(-50%) scale(1);
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,
             rgba(40,167,69,.35) 0,
             rgba(40,167,69,.15) 40%,
             rgba(40,167,69,0) 70%);
  animation:boltHalo 1.9s ease-in-out infinite;
}

@keyframes boltScale{
  0%,100%{ transform:translateY(-50%) scale(1); }
  50%    { transform:translateY(-50%) scale(1.18); }
}
@keyframes boltHalo{
  0%,100%{ transform:translateY(-50%) scale(1); opacity:.45; }
  50%    { transform:translateY(-50%) scale(1.35); opacity:.25; }
}

/* Accessibility: stop motion if requested */
@media (prefers-reduced-motion: reduce){
  .highlights li::before,
  .highlights li::after{ animation:none; }
}

/* Accessibility: stop motion if requested */
@media (prefers-reduced-motion: reduce){
  .highlights li::before,
  .highlights li::after{ animation:none; }
}

/* ===== Featured comparison card glow (“Bold Icon Base”) ===== */
.compare-col.featured{
  position:relative;
  border:1px solid var(--silver);
  box-shadow:
    0 0 0 2px rgba(192,198,217,.18),     /* crisp outer ring */
    0 12px 28px rgba(0,0,0,.25);         /* lift */
}

.compare-col.featured::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:12px;                     /* match card radius */
  pointer-events:none;
  box-shadow:
    0 0 18px rgba(192,20,42,.25),
    0 0 48px rgba(192,20,42,.12);
  animation:cardPulse 3s ease-in-out infinite;
}

@keyframes cardPulse{
  0%,100%{ box-shadow:0 0 36px rgba(192,20,42,.25), 0 0 72px rgba(192,20,42,.12); }
  50%    { box-shadow:0 0 52px rgba(192,20,42,.45), 0 0 110px rgba(192,20,42,.18); }
}

@media (prefers-reduced-motion: reduce){
  .compare-col.featured::after{ animation:none; }
}
/* Modern green checks using the typed ✓ character */
:root { --ok: #22c55e; } /* fresh green */

.trust-row span { position: relative; }

/* color/weight/size only the first character (the ✓) */
.trust-row span:not(.secure)::first-letter{
  color: var(--ok);
  font-weight: 800;
  font-size: 1.1em;      /* subtle size bump so it reads like an icon */
}

/* keep the lock neutral if your lock item has .secure */
.trust-row .secure::first-letter{
  color: inherit;
  font-weight: inherit;
  font-size: 1em;
}