/* Article / Insights styling — builds on styles.css (aurora design system).
   Used by every generated insights/<slug>.html page and the insights index. */

/* ---- shared layout ---- */
.art-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.art-narrow{max-width:760px;margin-inline:auto}

/* ---- hero (two-column: copy left, "by the numbers" panel right) ---- */
.art-hero{padding:46px 0 8px}
.art-hero-grid{display:grid;grid-template-columns:1.5fr .92fr;gap:42px;align-items:start}
@media(max-width:900px){.art-hero-grid{grid-template-columns:1fr;gap:26px}}
.art-hero-main{min-width:0}
.art-hero-side{position:relative;display:flex;flex-direction:column;gap:15px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:20px;padding:26px;overflow:hidden;margin-top:38px}
.art-hero-side::before{content:"";position:absolute;inset:-45% -25% auto auto;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,oklch(0.62 0.18 290/.32),transparent 64%);filter:blur(22px);pointer-events:none}
.art-hero-side .lbl{position:relative;font-family:var(--fmono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.hs-stat{position:relative;border-top:1px solid var(--border);padding-top:14px}
.hs-stat.first{border-top:0;padding-top:0}
.hs-stat b{display:block;font-size:2.05rem;line-height:1;letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-stat span{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:6px}
@media(max-width:900px){.art-hero-side{margin-top:4px}}
.art-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--fmono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.art-hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.025em;margin:16px 0 0;max-width:18ch}
.art-dek{color:var(--muted);font-size:1.18rem;line-height:1.55;max-width:60ch;margin:20px 0 0}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px;color:var(--faint);font-size:.9rem}
.art-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.art-figure{margin:34px 0 0;border-radius:20px;overflow:hidden;border:1px solid var(--border);position:relative;aspect-ratio:21/9;background:var(--bg-2)}
.art-figure img{width:100%;height:100%;object-fit:cover;display:block}
.art-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,oklch(0.12 0.016 275/.5))}

/* ---- body: sticky TOC sidebar + prose column ---- */
.art-body{padding:16px 0 30px}
.art-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:48px;align-items:start;max-width:1024px;margin-inline:auto}
@media(max-width:900px){.art-layout{grid-template-columns:1fr;gap:0}.art-toc{display:none}}
.art-prose{min-width:0;max-width:724px}
.art-toc{position:sticky;top:90px;align-self:start}
.art-toc .tlbl{font-family:var(--fmono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.art-toc a.tlink{display:block;color:var(--muted);font-size:.85rem;line-height:1.35;padding:7px 0 7px 13px;border-left:2px solid var(--border);transition:color .15s,border-color .15s}
.art-toc a.tlink:hover,.art-toc a.tlink.active{color:var(--text);border-color:var(--teal)}
.art-toc .tblock{margin-top:20px;border-top:1px solid var(--border);padding-top:16px}
.art-toc .tblock .h{font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.art-toc .tblock a{display:block;color:var(--muted);font-size:.84rem;padding:3px 0}
.art-toc .tblock a:hover{color:var(--teal)}
.art-toc .tshare{display:flex;gap:8px}
.art-toc .tshare a{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-size:.8rem}
.art-toc .tshare a:hover{color:var(--text);border-color:var(--border-2)}
.art-body h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;line-height:1.15;margin:46px 0 0;scroll-margin-top:92px}
.art-body p{color:var(--text);opacity:.92;font-size:1.075rem;line-height:1.75;margin:18px 0 0}
.art-body p.lead{font-size:1.32rem;line-height:1.6;opacity:1;color:var(--text);margin-top:30px}
.art-body strong{color:var(--text);font-weight:600}
.art-body em{color:var(--muted)}
.art-body a.inline{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

/* ---- stat band ---- */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0}
.statband .stat{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:18px;padding:22px 22px 18px}
.statband .stat b{display:block;font-size:2.2rem;letter-spacing:-.02em;line-height:1;background:var(--grad-text,linear-gradient(100deg,var(--violet),var(--teal)));-webkit-background-clip:text;background-clip:text;color:transparent}
.statband .stat span{display:block;color:var(--muted);font-size:.92rem;line-height:1.45;margin-top:10px}
.statband .stat cite{display:block;color:var(--faint);font-style:normal;font-size:.72rem;margin-top:8px}
@media(max-width:680px){.statband{grid-template-columns:1fr}}

/* ---- charts ---- */
.art-chart{margin:34px 0 0;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:20px;padding:26px 26px 20px}
.art-chart h4{font-size:1.05rem;letter-spacing:-.01em;margin:0}
.art-chart .cap{color:var(--muted);font-size:.92rem;line-height:1.5;margin:8px 0 18px;max-width:62ch}
.art-chart svg{width:100%;height:auto;display:block;overflow:visible}
.art-chart .src{color:var(--faint);font-family:var(--fmono);font-size:.7rem;margin-top:16px}
.art-chart .axlabel{fill:var(--faint);font-size:11px;font-family:var(--fbody)}
.art-chart .barval{fill:var(--text);font-size:12px;font-weight:600;font-family:var(--fbody)}
.art-chart .barlbl{fill:var(--muted);font-size:11px;font-family:var(--fbody)}
.art-chart .grid{stroke:var(--border)}
.art-chart .dot{fill:var(--teal)}

/* ---- pull quote ---- */
.art-quote{margin:42px 0 0;padding:6px 0 6px 26px;border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--violet),var(--teal)) 1;font-size:1.5rem;line-height:1.4;letter-spacing:-.015em;color:var(--text)}
.art-quote cite{display:block;font-size:.95rem;color:var(--muted);font-style:normal;margin-top:12px}

/* ---- product cards ---- */
.art-prod{display:flex;gap:18px;align-items:flex-start;margin:18px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;transition:border-color .18s,transform .18s;backdrop-filter:blur(10px)}
.art-prod:hover{border-color:var(--border-2);transform:translateY(-2px)}
.art-prod .pmark{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-family:var(--fmono);font-weight:600;font-size:.85rem;color:#fff;background:linear-gradient(135deg,var(--violet),var(--teal))}
.art-prod h3{font-size:1.12rem;margin:0;letter-spacing:-.01em}
.art-prod .ptag{font-family:var(--fmono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:3px 0 0}
.art-prod p{color:var(--muted);font-size:.98rem;line-height:1.6;margin:10px 0 0}
.art-prod .plink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--text);font-weight:500;font-size:.92rem}
.art-prod .plink:hover{color:var(--teal)}

/* ---- CTA ---- */
.art-cta{margin:48px 0 0;text-align:center;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:24px;padding:48px 32px}
.art-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin:0 auto;max-width:22ch}
.art-cta p{color:var(--muted);font-size:1.08rem;margin:14px auto 26px;max-width:50ch}
.art-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- references ---- */
.art-refs{margin:48px 0 0;border-top:1px solid var(--border);padding-top:26px}
.art-refs h2{font-size:1.15rem;margin:0 0 14px}
.art-refs ol{margin:0;padding-left:1.2em;color:var(--muted);font-size:.92rem;line-height:1.55}
.art-refs li{margin:9px 0}
.art-refs a{color:var(--teal);word-break:break-word}

/* ---- product chips under hero ---- */
.art-products{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.art-products .chip{font-family:var(--fmono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:6px 12px}

/* ---- insights index ---- */
.ins-head{padding:56px 0 8px;text-align:center}
.ins-head h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.025em;margin:14px 0 0}
.ins-head p{color:var(--muted);font-size:1.15rem;max-width:56ch;margin:16px auto 0}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;padding:40px 0 64px}
.ins-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:border-color .18s,transform .18s;backdrop-filter:blur(10px)}
.ins-card:hover{border-color:var(--border-2);transform:translateY(-3px)}
.ins-card .thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--bg-2)}
.ins-card .thumb img{width:100%;height:100%;object-fit:cover}
.ins-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.ins-card .k{font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.ins-card h2{font-size:1.28rem;line-height:1.22;letter-spacing:-.015em;margin:10px 0 0}
.ins-card p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:10px 0 0;flex:1}
.ins-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--text);font-weight:500;font-size:.92rem}
.ins-card:hover .more{color:var(--teal)}
.ins-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}

/* ---- inline image figure ---- */
.art-imgfig{margin:36px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--border);position:relative}
.art-imgfig img{width:100%;display:block}
.art-imgfig figcaption{color:var(--faint);font-size:.82rem;line-height:1.5;padding:11px 2px 0}

/* ---- callout / key takeaways ---- */
.callout{margin:34px 0 0;display:flex;gap:16px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--violet),var(--teal)) 1;border-radius:0 16px 16px 0;padding:22px 24px}
.callout .ci{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--teal));color:#fff}
.callout h4{margin:0 0 9px;font-size:1.05rem;letter-spacing:-.01em}
.callout ul{margin:0;padding-left:1.1em;color:var(--muted);line-height:1.7;font-size:1rem}
.callout ul li{margin:5px 0}
.callout p{margin:0;color:var(--muted);line-height:1.65}

/* ---- rich contact pre-footer ---- */
.art-contact{margin:66px 0 0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:26px;padding:46px clamp(24px,4vw,52px);display:grid;grid-template-columns:1.3fr .92fr;gap:38px;align-items:center}
.art-contact::before{content:"";position:absolute;inset:auto auto -55% -12%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,oklch(0.6 0.18 290/.26),transparent 64%);filter:blur(32px);pointer-events:none}
.art-contact::after{content:"";position:absolute;inset:-50% -10% auto auto;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,oklch(0.74 0.13 200/.18),transparent 64%);filter:blur(30px);pointer-events:none}
@media(max-width:820px){.art-contact{grid-template-columns:1fr;gap:26px;padding:34px 26px}}
.art-contact .cl{position:relative}
.art-contact .ceyebrow{font-family:var(--fmono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.art-contact h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.1;margin:12px 0 0;max-width:20ch}
.art-contact p{color:var(--muted);font-size:1.06rem;line-height:1.55;margin:14px 0 0;max-width:46ch}
.art-contact .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.art-contact .chan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 20px;backdrop-filter:blur(8px)}
.art-contact .chan a{display:flex;align-items:center;gap:13px;padding:14px 0;color:var(--text);font-weight:500;border-bottom:1px solid var(--border)}
.art-contact .chan a:last-child{border-bottom:0}
.art-contact .chan a:hover .ico{transform:translateY(-2px)}
.art-contact .chan a:hover{color:var(--teal)}
.art-contact .chan .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--teal));color:#fff;flex:0 0 auto;transition:transform .18s}
.art-contact .chan small{display:block;color:var(--faint);font-weight:400;font-size:.78rem;margin-top:2px}

/* ---- ending: products mentioned + read next ---- */
.art-ending{margin:44px 0 0}
.art-ending .seg{border-top:1px solid var(--border);padding-top:26px;margin-top:26px}
.art-ending .h{font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:15px}
.endprods{display:flex;flex-wrap:wrap;gap:10px}
.endprods a{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 15px 8px 9px;color:var(--text);font-weight:500;font-size:.9rem;transition:border-color .16s,transform .16s}
.endprods a:hover{border-color:var(--border-2);transform:translateY(-2px);color:var(--teal)}
.endprods a .m{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:var(--fmono);font-size:.62rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--violet),var(--teal))}
.readnext{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}

/* breathing room before the footer */
.art-tail{padding-bottom:84px}

/* article nav: show a plain Products link on mobile, where the hover mega is hidden */
.nav-prod-m{display:none}
@media(max-width:920px){.nav-prod-m{display:inline-block}}
@media(min-width:921px){.nav-prod-m{display:none}}

/* ---- donut chart ---- */
.donut-wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.donut{width:230px;height:230px;flex:0 0 auto}
.donut .dnum{fill:var(--text);font-family:var(--fdisp);font-weight:600;font-size:30px;letter-spacing:-.02em}
.donut .dlbl{fill:var(--faint);font-family:var(--fmono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.donut-legend{list-style:none;margin:0;padding:0;flex:1;min-width:200px;display:flex;flex-direction:column;gap:11px}
.donut-legend li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem}
.donut-legend .sw{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.donut-legend b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}

/* ---- image gallery (2–3 across) ---- */
.art-gallery{margin:36px 0 0;display:grid;gap:12px}
.art-gallery.cols2{grid-template-columns:1fr 1fr}
.art-gallery.cols3{grid-template-columns:1fr 1fr 1fr}
.art-gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid var(--border);aspect-ratio:1/1}
.art-gallery figcaption{grid-column:1/-1;color:var(--faint);font-size:.82rem;line-height:1.5;padding-top:2px}
@media(max-width:600px){.art-gallery.cols3{grid-template-columns:1fr 1fr}}

/* ---- big-number callout ---- */
.art-bignum{margin:40px 0 0;display:flex;gap:28px;align-items:center;background:linear-gradient(120deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-radius:22px;padding:32px 30px;position:relative;overflow:hidden}
.art-bignum::before{content:"";position:absolute;inset:-50% auto auto -10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,oklch(0.6 0.18 290/.22),transparent 65%);filter:blur(26px);pointer-events:none}
.art-bignum b{position:relative;font-size:clamp(3rem,8vw,5rem);line-height:.9;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto}
.art-bignum .bn-side{position:relative}
.art-bignum p{color:var(--text);opacity:.92;font-size:1.1rem;line-height:1.55;margin:0}
.art-bignum cite{display:block;color:var(--faint);font-style:normal;font-size:.78rem;font-family:var(--fmono);margin-top:10px}
@media(max-width:560px){.art-bignum{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---- image + text split (alternating) ---- */
.art-split{margin:38px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.art-split .sp-img{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.art-split .sp-img img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.art-split .sp-img figcaption{color:var(--faint);font-size:.8rem;padding:9px 12px;background:var(--bg-2)}
.art-split .sp-text h3{font-size:1.3rem;letter-spacing:-.015em;margin:0 0 10px}
.art-split .sp-text p{color:var(--muted);font-size:1.03rem;line-height:1.65;margin:0}
@media(max-width:700px){.art-split{grid-template-columns:1fr;gap:16px}.art-split .sp-img{order:-1}}

/* ============================================================
   LIGHT THEME overrides for articles/insights (see styles.css).
   ============================================================ */
[data-theme="light"] .art-hero-side{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.62));backdrop-filter:blur(12px) saturate(1.3);box-shadow:var(--glow-card)}
[data-theme="light"] .art-hero-side::before{background:radial-gradient(circle,oklch(0.60 0.18 290/.15),transparent 64%)}
[data-theme="light"] .art-hero-side::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:var(--hairline);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
[data-theme="light"] .statband .stat,[data-theme="light"] .art-chart{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));box-shadow:var(--glow-card)}
[data-theme="light"] .ins-card,[data-theme="light"] .art-prod{box-shadow:var(--glow-card)}
[data-theme="light"] .ins-card:hover,[data-theme="light"] .art-prod:hover{box-shadow:var(--glow-card-hover)}
[data-theme="light"] .art-cta{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));box-shadow:var(--glow-card)}
[data-theme="light"] .art-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--hairline);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
[data-theme="light"] .callout{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58))}
[data-theme="light"] .art-contact{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.66));box-shadow:var(--glow-card)}
[data-theme="light"] .art-contact::before{background:radial-gradient(circle,oklch(0.58 0.18 290/.14),transparent 64%)}
[data-theme="light"] .art-contact::after{background:radial-gradient(circle,oklch(0.62 0.13 200/.12),transparent 64%)}
[data-theme="light"] .art-bignum{background:linear-gradient(120deg,rgba(255,255,255,.85),rgba(255,255,255,.6));box-shadow:var(--glow-card)}
[data-theme="light"] .art-bignum::before{background:radial-gradient(circle,oklch(0.58 0.18 290/.13),transparent 65%)}
[data-theme="light"] .donut svg{filter:saturate(1.1) brightness(.93)}