/* GetLeadz guides — article layout on top of /shared.css.
   Every colour is a shared token with a fallback, so a guide still reads
   correctly if a token is ever renamed in shared.css. */

/* ---- hero: label pill, headline, pitch, CTA and trust line above the fold ---- */
.hero{
  text-align:center;padding:18px 0 8px;margin:0 0 30px;
  background:radial-gradient(60% 70% at 50% 0%,var(--tint-lav,#efe4fb) 0%,transparent 70%);
}
.hero .crumbs{justify-content:center;margin-bottom:22px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--brand-deep,#7e2eb8);background:var(--surface,var(--bg,#fff));border:1px solid var(--border,#e9e5f0);
}
.pill svg{width:14px;height:14px}
.hero .page-title{margin:18px auto 14px;max-width:24ch;font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.08}
.hero .page-title em{font-style:normal;color:var(--brand,#9b3fd6)}
.hero .lede{max-width:60ch;margin:0 auto 24px;font-size:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 20px}
.btn-lg{padding:14px 28px;font-size:1.02rem;border-radius:999px}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;list-style:none;padding:0;margin:0 0 16px;font-size:.88rem;color:var(--ink-2,#463a5c)}
.trust li::before{content:"✓";margin-right:7px;font-weight:800;color:var(--ok,#12a150)}
.hero .byline{margin:0}
@media (max-width:560px){.hero-actions .btn{width:100%;justify-content:center}}

.crumbs{font-size:.84rem;color:var(--ink-3,#736b85);margin:0 0 14px}
.crumbs a{color:inherit}
.crumbs a:hover{color:var(--secondary,#7e2eb8)}
.crumbs span{margin:0 6px;opacity:.6}

.kicker{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-deep,#7e2eb8);margin:0 0 10px}
.lede{font-size:1.16rem;line-height:1.6;color:var(--ink-2,#463a5c);margin:0 0 26px}
.prose .lede{font-size:1.16rem}

/* numbered method / step cards */
.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 28px}
.steps>li{
  counter-increment:step;position:relative;padding:18px 18px 18px 62px;margin:0 0 12px;
  border:1px solid var(--border,#e9e5f0);border-radius:var(--r-lg,16px);background:var(--surface,var(--bg,#fff));
}
.steps>li::before{
  content:counter(step);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff;background:var(--brand,#9b3fd6);
}
.steps h3{margin:0 0 6px;font-size:1.05rem}
.steps p{margin:0 0 8px}
.steps p:last-child{margin:0}
.steps .verdict{font-size:.86rem;color:var(--ink-3,#736b85)}
.steps .verdict b{color:var(--ink,#1a1030)}

/* call to action */
.cta{
  margin:34px 0;padding:26px 26px 24px;border-radius:var(--r-lg,16px);
  background:var(--tint-lav,#efe4fb);border:1px solid var(--border,#e9e5f0);
  display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:center;
}
.cta h2,.cta h3{margin:0 0 6px;font-size:1.25rem}
.cta p{margin:0;color:var(--ink-2,#463a5c);font-size:.98rem}
.cta .btn{white-space:nowrap}
.cta small{display:block;margin-top:8px;font-size:.8rem;color:var(--ink-3,#736b85)}
@media (max-width:640px){.cta{grid-template-columns:1fr}.cta .btn{justify-self:start}}

/* FAQ */
.faq{margin:0 0 30px}
.faq details{border-top:1px solid var(--border,#e9e5f0);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--border,#e9e5f0)}
.faq summary{cursor:pointer;font-weight:700;font-size:1rem;color:var(--ink,#1a1030);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--ink-3,#736b85)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--ink-2,#463a5c)}

/* related guides / hub cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 30px;padding:0;list-style:none}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.cards li{margin:0}
.cards a{
  display:block;height:100%;padding:18px 20px;border-radius:var(--r-lg,16px);text-decoration:none;
  border:1px solid var(--border,#e9e5f0);background:var(--surface,var(--bg,#fff));color:inherit;transition:border-color .15s,transform .15s;
}
.cards a:hover{border-color:var(--brand,#9b3fd6);transform:translateY(-1px)}
.cards .kicker{margin-bottom:6px}
.cards h3{margin:0 0 6px;font-size:1.05rem;color:var(--ink,#1a1030)}
.cards p{margin:0;font-size:.9rem;color:var(--ink-2,#463a5c)}

/* comparison table tweaks */
.table-wrap{margin:0 0 26px}
td .yes{color:var(--ok,#12a150);font-weight:700}
td .no{color:var(--ink-3,#736b85)}
td .part{color:var(--brand-deep,#7e2eb8);font-weight:700}

/* pull-out fact */
.fact{
  margin:22px 0;padding:14px 18px;border-left:4px solid var(--brand,#9b3fd6);
  background:var(--soft,#faf8fc);border-radius:0 var(--r,12px) var(--r,12px) 0;color:var(--ink-2,#463a5c);
}
.fact b{color:var(--ink,#1a1030)}

/* permissions list on the extension page */
.perm{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;margin:0 0 26px;font-size:.95rem}
.perm dt{font-weight:700;color:var(--ink,#1a1030)}
.perm dt code{font-size:.85em}
.perm dd{margin:0;color:var(--ink-2,#463a5c)}
@media (max-width:560px){.perm{grid-template-columns:1fr}.perm dd{margin-bottom:8px}}

.byline{font-size:.86rem;color:var(--ink-3,#736b85);margin:0 0 26px}