/* AI Data Analytics Blog — shared stylesheet */
:root{
  --ink:#0F1729;--body:#5A6479;--muted:#8A93A6;
  --page:#F6F7FB;--card:#FFFFFF;--line:#E7E9F2;--line-2:#D5D9E6;
  --green:#00893E;--lime:#3EE07F;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-mark{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.brand-mark svg{display:block;width:25px;height:25px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.brand-text i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:3px}

/* ---------- header ---------- */
.masthead{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.nav{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.nav a{padding:8px 14px;border-radius:8px;color:var(--body)}
.nav a:hover{background:var(--page);color:var(--ink)}

/* ---------- home hero ---------- */
.hero{background:var(--card);border-bottom:1px solid var(--line);text-align:center;padding:84px 0 76px}
.hero h1{margin:0 auto 20px;max-width:15em;font-size:clamp(34px,5.6vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.04em}
.hero p{margin:0 auto;max-width:31em;font-size:clamp(17px,2.1vw,20px);line-height:1.5;color:var(--body);font-weight:500}

/* ---------- category hero ---------- */
.cat-hero{background:var(--card);border-bottom:1px solid var(--line);padding:44px 0 52px}
.cat-hero h1{margin:0 0 14px;font-size:clamp(30px,4.6vw,44px);line-height:1.06;font-weight:800;letter-spacing:-.038em}
.cat-hero p{margin:0;max-width:46em;font-size:17.5px;line-height:1.6;color:var(--body);font-weight:500}
.crumbs{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:13px;font-weight:600;color:var(--muted)}
.crumbs a:hover{color:var(--green)}
.crumbs span{color:var(--line-2)}

/* ---------- bands and cards ---------- */
.band{padding:52px 0 8px}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 22px}
.band-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.025em}
.band-head a{font-size:14px;font-weight:600;color:var(--body)}
.band-head a:hover{color:var(--green)}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;transition:border-color .15s ease}
.card:hover{border-color:var(--line-2)}
.card h3{margin:0 0 14px;font-size:22px;line-height:1.18;font-weight:800;letter-spacing:-.032em}
.card h3 a:hover{color:var(--green)}
.card p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--body)}
.byline{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);font-weight:500}
.avatar{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.empty{margin:0;padding:26px;background:var(--card);border:1px dashed var(--line-2);border-radius:16px;color:var(--muted);font-weight:500}

/* section cards on the homepage */
.sec-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:border-color .15s ease}
.sec-card:hover{border-color:var(--line-2)}
.sec-card h3{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.028em}
.sec-card:hover h3{color:var(--green)}
.sec-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}

/* ---------- pills ---------- */
.pill{align-self:flex-start;display:inline-block;margin:0 0 16px;padding:6px 11px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pill-fundamentals{background:var(--ink);color:#fff}
.pill-guides{background:var(--lime);color:#053D20}
.pill-tools{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- article ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:44px;align-items:start;padding:40px 0 0}
.paper{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:46px 56px 52px}
.paper.narrow{max-width:820px}
.paper h1{margin:0 0 20px;font-size:clamp(30px,4.4vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.038em}
.paper .byline{margin:0 0 32px;padding:0 0 26px;border-top:0;border-bottom:1px solid var(--line)}

.prose{font-size:17px;line-height:1.68;color:#2C3446;max-width:68ch}
.prose > p{margin:0 0 20px}
.prose h2{margin:46px 0 16px;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.03em;color:var(--ink);scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:34px 0 12px;font-size:19px;line-height:1.28;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin-bottom:9px;padding-left:3px}
.prose li::marker{color:var(--green);font-weight:700}
.prose strong{font-weight:700;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:14px;background:var(--page);border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:#124F35}
.prose a{color:var(--green);font-weight:600;border-bottom:1px solid rgba(0,137,62,.3)}
.prose a:hover{border-bottom-color:var(--green)}

/* callouts */
.tldr{margin:0 0 38px;padding:26px 28px 22px;background:#F2FBF5;border:1px solid #CBEDD8;border-left:4px solid var(--green);border-radius:14px}
.tldr > p:first-child{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.tldr ul{margin:0;padding-left:20px}
.tldr li{font-size:15.5px;line-height:1.55;margin-bottom:10px;color:#2C3446}
.tldr li:last-child{margin-bottom:0}
.example{margin:0 0 24px;padding:18px 22px;background:var(--page);border-left:3px solid var(--line-2);border-radius:0 10px 10px 0}
.example p{margin:0;font-size:15.5px;line-height:1.6;color:#3A4356}
.example code{background:#fff}

/* contents rail */
.rail{position:sticky;top:98px}
.rail-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px}
.rail-box h2{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail-box ol{list-style:none;margin:0;padding:0}
.rail-box li{margin-bottom:11px}
.rail-box a{display:block;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--body);padding-left:14px;border-left:2px solid var(--line)}
.rail-box a:hover{color:var(--green);border-left-color:var(--green)}

/* read next */
.next{padding:56px 0 0}
.next h2{margin:0 0 20px;font-size:20px;font-weight:800;letter-spacing:-.025em}
.next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.next .card p{margin:0}

/* ---------- footer ---------- */
.foot{background:var(--card);border-top:1px solid var(--line);margin-top:64px}
.foot-inner{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:48px 0 40px}
.foot-brand{max-width:30em}
.foot-brand p{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
.foot-nav{display:flex;gap:60px}
.foot-nav h2{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-nav ul{list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:600}
.foot-nav li{margin-bottom:10px}
.foot-nav a{color:var(--body)}
.foot-nav a:hover{color:var(--green)}
.foot-base{border-top:1px solid var(--line);padding:20px 0 30px;font-size:13px;color:var(--muted);font-weight:500}

@media (max-width:1000px){
  .shell{grid-template-columns:1fr;gap:0}
  .rail{display:none}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .wrap{padding:0 16px}
  .hero{padding:56px 0 50px}
  .grid-2,.grid-3,.next-grid{grid-template-columns:1fr}
  .paper{padding:30px 22px 36px;border-radius:16px}
  .prose{font-size:16.5px}
  .prose h2{font-size:22px;margin-top:38px}
  .nav{gap:2px;font-size:13.5px}
  .nav a{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- tools roundup ---------- */
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin:20px 0 0;font-size:13px;font-weight:600;color:var(--muted)}
.hero-meta span{position:relative}
.hero-meta span+span::before{content:"";position:absolute;left:-10px;top:8px;width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.band-title{margin:52px 0 6px;font-size:24px;font-weight:800;letter-spacing:-.03em;scroll-margin-top:96px}
.band-sub{margin:0 0 22px;font-size:16px;color:var(--body);font-weight:500}

/* methodology */
.method{margin:28px 0 0;padding:26px 28px 22px;background:var(--page);border:1px solid var(--line);border-radius:14px}
.method h2{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.method ol{margin:0;padding-left:20px;font-size:15.5px;line-height:1.6;color:#2C3446}
.method li{margin-bottom:9px}
.method li::marker{color:var(--green);font-weight:700}
.method-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.6;color:var(--body)}

/* top picks */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 8px}
.pick{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px}
.pick:first-child{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.pick-rank{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:14px}
.pick:first-child .pick-rank{background:var(--green);color:#fff}
.pick h3{margin:0 0 10px;font-size:20px;font-weight:800;letter-spacing:-.03em}
.pick-standout{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--body)}
.pick-best{margin:0 0 18px;font-size:14px;line-height:1.5;color:#2C3446}
.pick-best strong{font-weight:700}
.pick-link{margin-top:auto;font-size:14px;font-weight:700;color:var(--green)}
.pick-link:hover{border-bottom:1px solid var(--green)}

/* comparison table */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:16px}
.cmp{width:100%;min-width:820px;border-collapse:collapse;font-size:14.5px}
.cmp th{text-align:left;padding:16px 18px;background:var(--page);border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:#2C3446;line-height:1.45}
.cmp tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:#FAFBFE}
.t-rank{font-weight:800;color:var(--muted);width:36px}
.t-name{white-space:nowrap}
.t-name a{font-weight:800;letter-spacing:-.02em;display:block}
.t-name a:hover{color:var(--green)}
.t-kind{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:5px;background:var(--page);border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--body)}
.t-best{min-width:220px}

/* jump list */
.jumps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 8px;padding:0}
.jumps a{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700;letter-spacing:-.015em}
.jumps a:hover{border-color:var(--green);color:var(--green)}
.jumps span{flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--page);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}

/* reviews */
.reviews{margin:34px 0 0;display:flex;flex-direction:column;gap:22px}
.review{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 34px 28px;scroll-margin-top:96px}
.review-head{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.review-rank{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.review-head h3{margin:0 0 5px;font-size:24px;font-weight:800;letter-spacing:-.032em}
.review-kind{display:inline-block;padding:4px 9px;border-radius:5px;background:var(--page);border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--body)}
.standout{padding:18px 20px;margin:0 0 22px;background:#F2FBF5;border:1px solid #CBEDD8;border-radius:12px}
.standout-label{display:block;margin-bottom:6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.standout p{margin:0;font-size:15.5px;line-height:1.55;color:#1F3A2A;font-weight:500}
.review-body p{margin:0 0 16px;font-size:16.5px;line-height:1.65;color:#2C3446;max-width:70ch}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:24px 0 0}
.pc-col{padding:20px 22px;border-radius:12px;background:var(--page)}
.pc-col h4{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.pc-pro h4{color:var(--green)}
.pc-con h4{color:#A6521C}
.pc-col ul{list-style:none;margin:0;padding:0}
.pc-col li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.5px;line-height:1.5;color:#2C3446}
.pc-col li:last-child{margin-bottom:0}
.pc-pro li::before{content:"+";position:absolute;left:0;top:-1px;color:var(--green);font-weight:800}
.pc-con li::before{content:"–";position:absolute;left:0;top:-1px;color:#A6521C;font-weight:800}
.review-best{margin:24px 0 18px;padding:14px 18px;background:var(--page);border-left:3px solid var(--ink);border-radius:0 10px 10px 0;font-size:15px;line-height:1.5;color:#2C3446}
.review-visit{display:inline-block;padding:11px 20px;border-radius:9px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:700}
.review-visit:hover{background:#1C2740}

@media (max-width:1000px){
  .picks{grid-template-columns:1fr}
  .jumps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .review{padding:24px 20px 22px;border-radius:14px}
  .pc{grid-template-columns:1fr;gap:14px}
  .review-body p{font-size:16px}
  .jumps{grid-template-columns:1fr}
  .method{padding:20px 20px 18px}
}