/* ============================================================
   Automatrix blog: light article theme
   Loaded after each post's inline <style>, so it overrides it.
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --bg-2:#F4F5FB;
  --panel:#FFFFFF;
  --panel-2:#F7F7FC;
  --ink:#0D0F14;
  --ink-dim:#454C5E;
  --ink-soft:#79808F;
  --accent:#A319FF;
  --accent-2:#8210D6;
  --accent-3:#C77BFF;
  --accent-soft:#F4E9FF;
  --accent-glow:rgba(163,25,255,.22);
  --border:rgba(13,15,20,.10);
  --border-2:rgba(13,15,20,.18);
  --border-accent:rgba(163,25,255,.30);
  --ok:#0E9C63;
  --warn:#C77A12;
  --danger:#D63B4A;
  --shadow-sm:0 1px 2px rgba(13,15,20,.04), 0 4px 14px rgba(13,15,20,.05);
  --shadow-md:0 2px 6px rgba(13,15,20,.05), 0 14px 38px rgba(13,15,20,.09);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-size:17.5px;
  line-height:1.75;
}
/* kill the dark ambient gradients + orbs */
body::before{
  background:
    radial-gradient(ellipse at 12% 0%, rgba(163,25,255,.07), transparent 55%),
    radial-gradient(ellipse at 90% 12%, rgba(163,25,255,.05), transparent 50%) !important;
  animation:none !important;
}
.orb{display:none !important;}

/* ---------- Top bar ---------- */
.topbar{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border) !important;
}
.blog-logo{display:flex;align-items:center;gap:10px;}
/* white mark needs a dark chip to sit on, like the reference's boxed logo */
.blog-logo-img{
  height:34px !important;width:34px !important;padding:5px;box-sizing:border-box;
  background:var(--ink);border-radius:9px;object-fit:contain;
}
.topbar-link{color:var(--ink-dim) !important;}
.topbar-link:hover{color:var(--accent) !important;}
.topbar-cta{
  background:var(--accent) !important;color:#fff !important;
  box-shadow:0 6px 18px rgba(163,25,255,.28);
}
.topbar-cta:hover{box-shadow:0 10px 26px rgba(163,25,255,.4) !important;}
.progress-bar{background:var(--accent) !important;}

/* ---------- Hero ---------- */
.hero{background:transparent;padding-top:44px;}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-soft) !important;border:1px solid var(--border-accent) !important;
  color:var(--accent-2) !important;font-weight:700;letter-spacing:.08em;
  padding:7px 15px;border-radius:999px;
}
.kicker-dot{background:var(--accent) !important;}
/* the dark template clips a light gradient into the h1; re-point it for light bg */
h1,.hero h1{
  color:var(--ink) !important;
  background:linear-gradient(170deg,#0D0F14 0%,#3B1B5C 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing:-.035em;font-weight:800;
  font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.06;
}
/* reference-style underline on the emphasised phrase */
.hero h1 em{
  font-style:normal;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 4px;background-repeat:no-repeat;background-position:0 92%;
  padding-bottom:2px;
}
.dek{color:var(--ink-dim) !important;font-size:1.12rem;line-height:1.7;}
.meta{border-top:1px solid var(--border) !important;color:var(--ink-soft) !important;}
.meta strong{color:var(--ink) !important;}
.meta a{color:var(--accent-2) !important;}

/* ---------- Hero image ---------- */
.post-hero{
  border:1px solid var(--border) !important;
  border-radius:20px !important;
  box-shadow:var(--shadow-md) !important;
  background:var(--bg-2) !important;
}
.post-hero::after{display:none !important;}

/* ---------- Stat strip ---------- */
.stats{
  background:var(--bg-2);border:1px solid var(--border);border-radius:18px;
  padding:26px 20px;gap:0;
}
.stat{border-color:var(--border) !important;}
.stat-num{color:var(--accent) !important;font-weight:800;}
.stat-label{color:var(--ink-soft) !important;}

/* ---------- Typography ---------- */
article h2{
  color:var(--ink) !important;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.18;margin-top:64px;
}
article h2::after{background:var(--accent) !important;}
article h3{color:var(--ink) !important;font-weight:700;}
article p{color:#3B4252 !important;}
article strong{color:var(--ink) !important;}
article a{color:var(--accent-2) !important;}
article a:hover{color:var(--accent) !important;}
article h2 .num,.num{
  display:table !important;width:auto;
  color:var(--accent-2) !important;background:var(--accent-soft);
  border-radius:999px;padding:5px 12px;font-size:10.5px;letter-spacing:.14em;font-weight:800;
  margin-bottom:16px;
}
sup a{color:var(--accent-2) !important;}

/* ---------- Table of contents ---------- */
.toc{
  background:var(--bg-2) !important;border:1px solid var(--border) !important;
  border-radius:18px !important;
}
.toc-title{color:var(--ink) !important;}
.toc a{color:var(--ink-dim) !important;}
.toc a:hover{color:var(--accent) !important;}
.toc ol{color:var(--ink-soft);}

/* ---------- Generic cards ---------- */
.callout,.tool-card,.compare-card,.step,.check-item,.key,.stat-box{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-sm);
}
.callout{background:var(--accent-soft) !important;border-color:var(--border-accent) !important;color:#3B4252 !important;}
.callout-label{color:var(--accent-2) !important;}
.step-title,.tool-name,.check-text strong{color:var(--ink) !important;}
.step-desc,.tool-desc,.check-text{color:#3B4252 !important;}
.check-box{
  background:var(--accent-soft) !important;color:var(--accent-2) !important;
  border:1px solid var(--border-accent) !important;font-weight:800;
}
.stat-highlight .big{color:var(--accent) !important;}
.stat-highlight .label{color:var(--ink) !important;}
.stat-highlight .source{color:var(--ink-soft) !important;}
.ref-num{color:var(--accent-2) !important;}

/* ---------- Price tiers ---------- */
.tier{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-sm);
}
.tier:hover{border-color:var(--border-accent) !important;box-shadow:var(--shadow-md) !important;}
.tier.featured{
  background:var(--panel) !important;
  border:2px solid var(--accent) !important;
  box-shadow:0 10px 40px rgba(163,25,255,.18) !important;
}
.tier-name{color:var(--ink-soft) !important;}
.tier-price{color:var(--ink) !important;font-weight:800;}
.tier-sub{color:var(--ink-soft) !important;}
.tier li{color:#3B4252 !important;}
.tier li.no{color:var(--ink-soft) !important;}
.tier li::before{color:var(--ok) !important;}
.tier li.no::before{color:var(--danger) !important;}
.tier-verdict{border-top:1px solid var(--border) !important;color:var(--ink-dim) !important;}
.tier-verdict b{color:var(--ink) !important;}
.tier-flag{background:var(--accent) !important;box-shadow:0 4px 14px rgba(163,25,255,.35);}

/* ---------- Answer box ---------- */
.answer-box{
  background:var(--accent-soft) !important;
  border:1px solid var(--border-accent) !important;
  border-radius:20px !important;
  box-shadow:var(--shadow-sm);
}
.answer-box .ab-label{color:var(--accent-2) !important;}
.answer-box p{color:#3B4252 !important;}
.answer-box strong{color:var(--ink) !important;}

/* ---------- Comparison table ---------- */
.cmp-wrap{
  border:1px solid var(--border) !important;border-radius:18px !important;
  background:var(--panel);box-shadow:var(--shadow-sm);
}
table.cmp th,table.cmp td{border-bottom:1px solid var(--border) !important;}
table.cmp thead th{background:var(--bg-2) !important;color:var(--ink-soft) !important;}
table.cmp thead th:nth-child(3){background:var(--accent-soft) !important;color:var(--accent-2) !important;}
table.cmp td:nth-child(3){background:rgba(163,25,255,.035) !important;}
table.cmp td{color:#3B4252;}
table.cmp td:first-child{color:var(--ink) !important;}
table.cmp tbody tr:hover{background:rgba(163,25,255,.05) !important;}
table.cmp .y{color:var(--ok) !important;}
table.cmp .n{color:var(--danger) !important;}
table.cmp .m{color:var(--warn) !important;}

/* ---------- Key takeaways ---------- */
.key-n{background:var(--accent-soft) !important;color:var(--accent-2) !important;font-weight:800;}
.key p{color:#3B4252 !important;}
.key p b{color:var(--ink) !important;}

/* ---------- Pull quote ---------- */
.pull{
  border-left:4px solid var(--accent) !important;
  color:var(--ink) !important;font-weight:700;
}

/* ---------- Calculator ---------- */
.calc{
  background:var(--bg-2) !important;border:1px solid var(--border) !important;
  border-radius:20px !important;box-shadow:var(--shadow-sm);
}
.calc h4{color:var(--ink) !important;}
.calc .hint{color:var(--ink-soft) !important;}
.calc-row label{color:#3B4252 !important;}
.calc-row input{
  background:#fff !important;border:1px solid var(--border-2) !important;
  color:var(--ink) !important;box-shadow:var(--shadow-sm);
}
.calc-row input:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(163,25,255,.15) !important;}
.calc-out{border-top:1px solid var(--border) !important;}
.calc-out .big{color:var(--accent) !important;}
.calc-out .lbl{color:var(--ink-soft) !important;}

/* ---------- Inline CTA ---------- */
.cta-inline{
  background:var(--accent-soft) !important;
  border:1px solid var(--border-accent) !important;
  border-radius:20px !important;
}
.cta-inline p{color:#3B4252 !important;}
.cta-inline p b{color:var(--ink) !important;}
.cta-inline a{background:var(--accent) !important;box-shadow:0 8px 22px rgba(163,25,255,.3);}

/* ---------- Closing CTA: dark anchor panel, like the reference footer band ---------- */
.cta-block{
  background:linear-gradient(135deg,#16101F 0%,#241238 55%,#3A0F63 100%) !important;
  border:0 !important;border-radius:24px !important;color:#fff !important;
  box-shadow:0 20px 60px rgba(163,25,255,.22);
}
.cta-block::before{display:none !important;}
.cta-block h3{color:#fff !important;}
.cta-block p{color:#D6CCE6 !important;}
.cta-eyebrow{color:var(--accent-3) !important;}
.cta-eyebrow::before,.cta-eyebrow::after{background:rgba(255,255,255,.22) !important;}
.cta-btn{background:var(--accent) !important;color:#fff !important;}
.cta-btn-ghost{border-color:rgba(255,255,255,.3) !important;color:#fff !important;}
.cta-btn-ghost:hover{background:rgba(255,255,255,.1) !important;color:#fff !important;border-color:#fff !important;}

/* ---------- Floating widgets ---------- */
.reading-time{
  background:#fff !important;border:1px solid var(--border) !important;
  color:var(--ink-dim) !important;box-shadow:var(--shadow-md);
}
.reading-time span{color:var(--accent) !important;}
.back-to-top{
  background:var(--accent) !important;color:#fff !important;
  box-shadow:0 8px 24px rgba(163,25,255,.35);
}

/* ---------- Footer stays dark as the brand anchor ---------- */
.site-footer{
  background:#0D0F14 !important;color:#B4BCC8 !important;
  border-top:0 !important;margin-top:72px;padding:48px 24px;
}
.site-footer a{color:#B4BCC8 !important;}
.site-footer a:hover{color:var(--accent-3) !important;}
.footer-brand{color:#fff !important;}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  body{font-size:16.5px;}
  article h2{margin-top:48px;}
  .stats{padding:18px 14px;}
}