/* ============================================================
   Autometa AI — Pillar Guides stylesheet
   Loaded ON TOP of /case-studies/case-studies.css for nav/footer
   ============================================================ */

/* ---------- Article wrapper ---------- */
.guide-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap:64px;
  align-items:start;
  margin-top:48px;
}
@media (max-width: 980px){
  .guide-wrap{ grid-template-columns: 1fr; gap:32px; }
  .guide-toc{ position:static !important; order:-1; }
}

/* ---------- TOC sidebar ---------- */
.guide-toc{
  position:sticky; top:96px;
  background:var(--surface-alt, #F5F6F7);
  border:1px solid var(--border, #E5E9ED);
  border-radius:14px;
  padding:24px 24px 22px;
  font-size:14px;
}
.guide-toc h6{
  margin:0 0 14px; font-family:'Inter',sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-mute, #8A94A2);
}
.guide-toc ol{
  list-style:none; padding:0; margin:0;
  counter-reset: toc;
}
.guide-toc li{
  counter-increment: toc;
  padding:7px 0; line-height:1.45;
  border-bottom:1px solid rgba(229,233,237,0.6);
}
.guide-toc li:last-child{ border-bottom:none; }
.guide-toc li::before{
  content: counter(toc, decimal-leading-zero);
  display:inline-block; width:26px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--ink-mute, #8A94A2);
}
.guide-toc a{
  color:var(--ink, #0E1116); font-weight:500;
}
.guide-toc a:hover{ color:var(--primary, #0B4A3A); }

/* ---------- Article body ---------- */
.guide-body{
  font-size:18px; line-height:1.7;
  color:var(--ink, #0E1116);
  max-width:740px;
}
.guide-body h2{
  font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em;
  font-size:clamp(28px, 3.2vw, 38px); line-height:1.15;
  margin:56px 0 18px; scroll-margin-top:96px;
}
.guide-body h2:first-child{ margin-top:0; }
.guide-body h3{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:24px; line-height:1.25;
  margin:36px 0 14px; scroll-margin-top:96px;
}
.guide-body h4{
  font-family:'Inter',sans-serif; font-weight:600;
  font-size:17px; letter-spacing:0;
  margin:28px 0 10px;
}
.guide-body p{ margin:0 0 18px; }
.guide-body p strong{ color:var(--ink, #0E1116); font-weight:600; }
.guide-body ul, .guide-body ol{
  margin:0 0 22px; padding-left:24px;
}
.guide-body li{ margin:0 0 9px; }
.guide-body a{
  color:var(--primary, #0B4A3A);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.guide-body a:hover{ color:var(--primary-hover, #083327); }

/* ---------- Callouts ---------- */
.callout{
  background:linear-gradient(180deg, #F0F6F3, #FFFFFF);
  border:1px solid #CFE3DA;
  border-left:3px solid var(--primary, #0B4A3A);
  border-radius:10px;
  padding:18px 22px;
  margin:28px 0;
  font-size:16px; line-height:1.6;
}
.callout-tag{
  display:block; font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--primary, #0B4A3A);
  margin-bottom:6px;
}
.callout--accent{
  background:linear-gradient(180deg, #FDF0EA, #FFFFFF);
  border-color:#FAD9CA;
  border-left-color:var(--accent, #D4623E);
}
.callout--accent .callout-tag{ color:var(--accent, #D4623E); }

/* ---------- Comparison tables ---------- */
.cmp-table{
  width:100%; border-collapse:collapse;
  margin:28px 0; font-size:15px;
  border:1px solid var(--border, #E5E9ED);
  border-radius:10px; overflow:hidden;
}
.cmp-table th, .cmp-table td{
  padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--border, #E5E9ED);
  vertical-align:top;
}
.cmp-table th{
  background:#F5F6F7; font-weight:600;
  font-size:13px; letter-spacing:0.02em;
  color:var(--ink, #0E1116);
}
.cmp-table tr:last-child td{ border-bottom:none; }
.cmp-table td strong{ color:var(--ink, #0E1116); }
.cmp-table .y{ color:#2E7D5B; font-weight:600; }
.cmp-table .n{ color:#B43E2C; font-weight:600; }
.cmp-table .m{ color:#8A6A2C; font-weight:600; }

@media (max-width: 700px){
  .cmp-table{ font-size:14px; }
  .cmp-table th, .cmp-table td{ padding:10px 10px; }
}

/* ---------- FAQ ---------- */
.faq{ margin-top:28px; }
.faq details{
  border-bottom:1px solid var(--border, #E5E9ED);
  padding:18px 0;
}
.faq details:last-child{ border-bottom:none; }
.faq summary{
  cursor:pointer; list-style:none;
  font-weight:600; font-size:17px;
  color:var(--ink, #0E1116);
  padding-right:32px; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:-2px;
  font-size:22px; color:var(--ink-mute, #8A94A2);
  transition:transform 0.2s;
}
.faq details[open] summary::after{ content:"−"; }
.faq details > div{
  padding-top:12px; color:var(--ink-soft, #3E4855);
  font-size:16px; line-height:1.65;
}

/* ---------- Hero header ---------- */
.guide-head{
  padding:80px 0 32px;
  background:linear-gradient(180deg, #F0F6F3 0%, #FFFFFF 100%);
}
.guide-head .crumb{ margin-bottom:24px; }
.guide-head .eyebrow{
  display:inline-block;
  font-size:12px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--primary, #0B4A3A);
  background:#CFE3DA;
  padding:5px 11px; border-radius:999px;
  margin-bottom:18px;
}
.guide-head h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(36px, 4.6vw, 54px); line-height:1.1;
  letter-spacing:-0.01em; margin:0 0 18px; max-width:880px;
}
.guide-head .lede{
  font-size:20px; line-height:1.55;
  color:var(--ink-soft, #3E4855); max-width:760px;
  margin:0 0 24px;
}
.guide-meta{
  display:flex; gap:18px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-mute, #8A94A2);
  padding-top:18px; border-top:1px solid var(--border, #E5E9ED);
}
.guide-meta strong{ color:var(--ink, #0E1116); font-weight:600; }

/* ---------- Inline chip / pill list ---------- */
.pill-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:18px 0 26px;
}
.pill-row .pill{
  display:inline-flex; align-items:center;
  background:#F5F6F7; border:1px solid var(--border, #E5E9ED);
  padding:6px 11px; border-radius:999px;
  font-size:13px; font-weight:500;
  color:var(--ink-soft, #3E4855);
}

/* ---------- Bottom CTA ---------- */
.guide-cta{
  margin:64px 0 80px;
  background:linear-gradient(135deg, #0B4A3A 0%, #083327 100%);
  border-radius:18px;
  padding:44px 40px;
  color:#FFF;
}
.guide-cta h3{
  color:#FFF; font-family:'Fraunces',serif;
  font-size:clamp(24px, 2.6vw, 32px); margin:0 0 12px;
}
.guide-cta p{
  color:rgba(255,255,255,0.82); margin:0 0 20px;
  font-size:16px; line-height:1.55; max-width:560px;
}
.guide-cta .btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#FFF; color:var(--primary, #0B4A3A);
  padding:12px 22px; border-radius:8px;
  font-weight:600; font-size:15px;
  transition:transform 0.15s;
}
.guide-cta .btn:hover{ transform:translateY(-1px); }

/* ---------- Related guides strip ---------- */
.related-guides{
  margin-top:48px; padding-top:36px;
  border-top:1px solid var(--border, #E5E9ED);
}
.related-guides h4{
  font-family:'Inter',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-mute, #8A94A2);
  margin:0 0 16px;
}
.related-guides .grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:700px){
  .related-guides .grid{ grid-template-columns:1fr; }
}
.related-guides a{
  display:block; padding:18px 20px;
  background:#F5F6F7; border:1px solid var(--border, #E5E9ED);
  border-radius:12px;
  color:var(--ink, #0E1116);
  text-decoration:none;
  transition:border-color 0.15s, transform 0.15s;
}
.related-guides a:hover{
  border-color:var(--primary, #0B4A3A);
  transform:translateY(-2px);
}
.related-guides .rg-tag{
  display:block; font-size:11px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--primary, #0B4A3A); margin-bottom:6px;
}
.related-guides .rg-title{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:18px; line-height:1.25;
}