/* ============================================================
   Article (blog post) + Money (conversion landing) components.
   Built on seostdmc tokens; loaded after styles.css + pillar.css.
   ============================================================ */

/* ========== ARTICLE ========== */
.art{background:var(--bg);color:var(--white);font-family:var(--body)}
.arthero{position:relative;padding:clamp(120px,15vw,172px) 0 clamp(30px,5vw,46px);
  background:radial-gradient(110% 80% at 85% 0%,rgba(41,171,226,.18),transparent 58%),linear-gradient(180deg,#0a0c20,var(--bg))}
.arthero .wrap{max-width:860px}
.achip{display:inline-block;font-family:var(--disp);font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-size:.68rem;color:var(--cyan-hi);
  background:rgba(41,171,226,.1);border:1px solid rgba(41,171,226,.28);border-radius:999px;padding:6px 13px;margin:0 0 18px}
.arthero h1{font-family:var(--disp);font-weight:900;line-height:1.04;letter-spacing:-.015em;font-size:clamp(2.1rem,5vw,3.5rem);margin:0}
.arthero .dek{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:clamp(1.12rem,2.1vw,1.42rem);line-height:1.42;margin:18px 0 0}
.artmeta{display:flex;align-items:center;gap:13px;margin-top:26px;flex-wrap:wrap}
.artmeta img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan)}
.artmeta b{font-weight:700}.artmeta .sub{color:var(--mute);font-size:.84rem}
.artmeta .sep{color:var(--line)}
.artmeta .rt{color:var(--cyan-hi);font-size:.84rem;font-weight:600}

.artwrap{max-width:860px;margin-inline:auto;padding-inline:var(--gut)}
.artbody{padding:clamp(34px,5vw,56px) 0 clamp(50px,7vw,86px)}

/* prose typography */
.prose{font-size:1.1rem;line-height:1.78;color:#d9dcf0}
.prose > *{max-width:72ch}
.prose h2{font-family:var(--disp);font-weight:800;color:var(--white);font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:2.2em 0 .6em;letter-spacing:-.01em}
.prose h2::before{content:"";display:block;width:46px;height:3px;background:var(--cyan);border-radius:2px;margin-bottom:18px}
.prose h3{font-family:var(--disp);font-weight:700;color:var(--white);font-size:clamp(1.2rem,2.2vw,1.45rem);margin:1.7em 0 .5em}
.prose p{margin:0 0 1.2em}
.prose a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(41,171,226,.4)}
.prose a:hover{color:#fff}
.prose strong{color:#fff;font-weight:700}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3em;display:grid;gap:.5em}
.prose li{padding-left:.3em}.prose li::marker{color:var(--cyan)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--cyan);
  font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.5;color:#fff}
.prose img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:1.4em 0}
.prose figure{margin:1.6em 0}.prose figcaption{color:var(--gray);font-size:.84rem;margin-top:8px;text-align:center}
.prose code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
/* key-takeaways / callout box usable inside posts */
.prose .keybox{max-width:none;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:14px;padding:22px 24px;margin:1.6em 0}
.prose .keybox h4{font-family:var(--disp);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--cyan-hi);margin:0 0 12px}
.prose .keybox ul{margin:0}

/* inline CTA inside an article */
.artcta{max-width:none!important;background:radial-gradient(90% 140% at 12% 20%,rgba(41,171,226,.22),transparent 55%),linear-gradient(120deg,var(--navy),#15163a);
  border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin:2em 0;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.artcta b{font-family:var(--disp);font-weight:800;font-size:1.2rem;display:block}
.artcta span{color:#cfd3ee;font-size:.92rem}

/* related guides */
.related{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg2));padding:clamp(44px,6vw,72px) 0}

/* ========== MONEY (conversion landing) ========== */
.money{background:var(--bg);color:var(--white);font-family:var(--body)}
.mhero{position:relative;min-height:88vh;display:flex;align-items:center;padding:clamp(130px,14vw,180px) 0 clamp(60px,8vw,96px);overflow:hidden}
.mhero__bg{position:absolute;inset:0;z-index:0}
.mhero__bg img{width:100%;height:100%;object-fit:cover}
.mhero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,28,.96) 10%,rgba(8,10,28,.72) 55%,rgba(8,10,28,.55)),linear-gradient(0deg,var(--bg),transparent 40%)}
.mhero .wrap{position:relative;z-index:1}
.mhero__in{max-width:720px}
.mbadge{display:inline-flex;gap:9px;align-items:center;font-family:var(--disp);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--cyan-hi);background:rgba(41,171,226,.12);border:1px solid rgba(41,171,226,.34);border-radius:999px;padding:8px 15px;margin:0 0 22px}
.mhero h1{font-family:var(--disp);font-weight:900;line-height:.98;letter-spacing:-.02em;font-size:clamp(2.7rem,7vw,5.2rem);margin:0}
.mhero h1 .cy{color:var(--cyan)}
.mhero__sub{font-family:var(--serif);font-style:italic;color:#d4d8f1;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.4;margin:22px 0 0;max-width:42ch}
.mhero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.mtrust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.mtrust span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.84rem;color:#dfe2f3}
.mtrust span b{color:var(--cyan-hi);font-weight:800}

.msec{padding:clamp(56px,8vw,100px) 0}
.msec--alt{background:linear-gradient(180deg,var(--bg),var(--bg2));border-block:1px solid var(--line)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.bgrid{grid-template-columns:1fr}}
.bcard{background:linear-gradient(165deg,var(--panel),#0d1026);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.bcard__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(41,171,226,.12);border:1px solid rgba(41,171,226,.3);margin-bottom:14px}
.bcard__ic svg{width:24px;height:24px;color:var(--cyan);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bcard h3{font-family:var(--disp);font-weight:800;font-size:1.14rem;margin:0 0 8px}
.bcard p{color:var(--mute);line-height:1.6;font-size:.95rem;margin:0}

.audience{display:flex;flex-wrap:wrap;gap:10px}
.audience span{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 16px;font-weight:600;font-size:.95rem}
.audience span i{color:var(--cyan);font-style:normal;margin-right:8px}

/* ===== SITEWIDE: centered money hero ===== */
.mhero .wrap{text-align:center}
.mhero__in{margin-inline:auto}
.mhero h1{margin-inline:auto;max-width:18ch}
.mhero__sub{margin-inline:auto}
.mhero__cta,.mtrust{justify-content:center}
.mbadge{margin-inline:auto}

/* ===== ARTICLE: centered hero w/ image + centered headings ===== */
.arthero{position:relative;overflow:hidden;padding:clamp(130px,15vw,188px) 0 clamp(34px,5vw,52px)}
.arthero__bg{position:absolute;inset:0;z-index:0}
.arthero__bg img{width:100%;height:100%;object-fit:cover}
.arthero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,rgba(41,171,226,.2),transparent 55%),
  linear-gradient(180deg,rgba(8,10,28,.80),rgba(8,10,28,.93) 72%,var(--bg))}
.arthero .wrap{position:relative;z-index:1;text-align:center}
.arthero .breadcrumb{justify-content:center}
.arthero .achip{margin-inline:auto;display:inline-block}
/* article hero uses the silo watermark too (no stock photos) */
.arthero__bg{display:none}
.arthero__wm{position:absolute;top:clamp(70px,10vw,130px);right:clamp(12px,5vw,80px);z-index:0;margin:0;font-family:var(--anton);font-weight:400;
  line-height:.78;letter-spacing:-.03em;font-size:clamp(110px,18vw,300px);white-space:nowrap;pointer-events:none;user-select:none;
  color:rgba(244,245,251,.045);-webkit-text-stroke:2px rgba(41,171,226,.11);animation:wmfloat 10s var(--ease) infinite}
.arthero h1{margin-inline:auto;max-width:20ch}
.arthero .dek{margin-inline:auto}
.artmeta{justify-content:center}

/* center article body headings (operator rule) */
.prose h2{text-align:center}
.prose h2::before{margin-left:auto;margin-right:auto}
.prose h3{text-align:center}

/* ===== ARTICLE VISUAL BREAKS (infographics/bands) ===== */
/* alternating full-bleed band wrapper used inside posts */
.artband{max-width:none!important;margin:2.4em calc(50% - 50vw);padding:clamp(34px,5vw,60px) 0;
  background:linear-gradient(180deg,var(--bg2),#0a0c20);border-block:1px solid var(--line)}
.artband--cyan{background:radial-gradient(90% 140% at 50% 0%,rgba(41,171,226,.14),transparent 60%),linear-gradient(180deg,var(--panel),#0b0e24)}
.artband__in{max-width:860px;margin-inline:auto;padding-inline:var(--gut);text-align:center}
.artband h3{margin-top:0}

/* numbered steps infographic */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;background:linear-gradient(165deg,var(--panel),#0d1026);border:1px solid var(--line);border-radius:14px;padding:26px 20px 22px;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:rgba(41,171,226,.14);border:1px solid var(--cyan);color:var(--cyan);font-family:var(--anton);font-size:1.3rem}
.steps b{display:block;font-family:var(--disp);font-weight:800;font-size:1.02rem;margin-bottom:6px;color:#fff}
.steps span{color:var(--mute);font-size:.9rem;line-height:1.5}

/* stat callout row */
.statcall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
@media(max-width:620px){.statcall{grid-template-columns:1fr}}
.statcall b{display:block;font-family:var(--anton);font-size:clamp(2rem,4.5vw,3rem);color:var(--cyan);line-height:1}
.statcall span{display:block;color:var(--mute);font-size:.92rem;margin-top:8px;line-height:1.45}

/* do / don't comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
@media(max-width:620px){.vs{grid-template-columns:1fr}}
.vs__col{border:1px solid var(--line);border-radius:14px;padding:22px 22px;background:var(--panel)}
.vs__col--do{border-color:rgba(41,171,226,.4)}
.vs__col--no{border-color:rgba(168,48,47,.4)}
.vs__h{font-family:var(--disp);font-weight:800;font-size:1rem;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.vs__col--do .vs__h{color:var(--cyan-hi)}.vs__col--no .vs__h{color:#e08a89}
.vs ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.vs li{color:var(--mute);font-size:.94rem;line-height:1.5;padding-left:20px;position:relative}
.vs li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px}
.vs__col--do li::before{background:var(--cyan)}.vs__col--no li::before{background:#a8302f}