/* Long-form doc shell for /guides and /blog — sits on top of brand.css tokens. */

.doc-wrap{
  position:relative;
  max-width:720px;
  width:min(720px, calc(100% - 44px));
  margin:0 auto;
  padding:0 0 96px;
}

.doc-hero{padding:44px 0 34px}

.doc-eyebrow{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}

.doc-wrap h1{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  font-size:clamp(38px,8vw,58px);
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-top:16px;
}

.doc-wrap .subtitle{font-size:18px;color:var(--muted);margin-top:18px;max-width:60ch}

.metarow{display:flex;align-items:center;gap:13px;margin-top:24px;flex-wrap:wrap}

.pill{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tan);
  border:1px solid var(--line-strong);
  padding:6px 12px;
  border-radius:4px;
}

.meta-note{font-size:13.5px;color:var(--ash)}

.toc{
  position:relative;
  background:var(--carbon-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 28px;
  margin:8px 0 56px;
}

.toc h3{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--orange);
  margin-bottom:14px;
}

.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;padding:9px 0;border-bottom:1px solid var(--line);font-weight:500;display:flex;gap:14px}
.toc li:last-child{border-bottom:none}
.toc li::before{content:counter(t,decimal-leading-zero);color:var(--tan);font-family:"DM Mono",monospace;font-size:13px}

.doc-wrap section{margin-bottom:52px}

.secnum{display:flex;align-items:center;gap:16px;margin-bottom:18px;border-top:1px solid var(--line);padding-top:16px}
.secnum span{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);white-space:nowrap}
.secnum .line{height:1px;background:var(--line);flex:1}

.doc-wrap h2{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  font-size:clamp(26px,5vw,34px);
  text-transform:uppercase;
  margin-bottom:14px;
  line-height:1.04;
}

.doc-wrap p{margin-bottom:16px;font-size:16.5px;color:var(--soft)}

.callout{
  position:relative;
  background:var(--carbon-2);
  border:1px solid var(--line);
  border-left:3px solid var(--tan);
  border-radius:10px;
  padding:16px 20px;
  margin:22px 0;
  font-size:15.5px;
  color:var(--bone);
}

.callout strong{
  display:block;
  margin-bottom:5px;
  font-family:"DM Mono",monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--tan);
}

.c-amber{border-left-color:var(--orange)} .c-amber strong{color:var(--orange)}
.c-green{border-left-color:#7AB948} .c-green strong{color:#7AB948}
.c-blue{border-left-color:var(--tan)} .c-blue strong{color:var(--tan)}
.c-red{border-left-color:#9C4A3A} .c-red strong{color:#D86B5C}

.doc-wrap pre{
  background:var(--obsidian);
  border:1px solid var(--line);
  color:var(--bone);
  border-radius:10px;
  padding:18px 20px;
  overflow-x:auto;
  margin:20px 0;
  font-family:"DM Mono",monospace;
  font-size:14px;
  line-height:1.7;
  white-space:pre-wrap;
}

.doc-wrap code{
  font-family:"DM Mono",monospace;
  font-size:.9em;
  background:rgba(194,168,120,.1);
  padding:2px 6px;
  border-radius:4px;
  color:var(--tan);
}

.download{
  position:relative;
  background:var(--carbon-2);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:34px 32px;
  margin:64px 0 40px;
  overflow:hidden;
}

.download::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange)}
.download .doc-eyebrow{color:var(--orange)}
.download h2{margin-top:10px}
.download p{color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 28px}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

.gp{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 14px;
  font-size:12.5px;
  color:var(--muted);
  font-family:"DM Mono",monospace;
}
.gp b{color:var(--orange)}

.dlbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--orange);
  color:#160A05;
  font-weight:700;
  font-size:16px;
  padding:14px 26px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  min-height:48px;
  transition:background .2s ease,transform .2s ease;
}
.dlbtn:hover{background:var(--orange-hot);transform:translateY(-1px)}
.dlbtn:focus-visible{outline:2px solid var(--tan);outline-offset:3px}

.dl-success{display:none;margin-top:18px;color:#7AB948;font-size:14px;font-weight:500;font-family:"DM Mono",monospace}
.dl-success.visible{display:block}

@media(max-width:520px){
  .doc-hero{padding:30px 0 22px}
  .toc,.callout,.download{padding:20px}
}

/* case-study stat row */
.cs-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:8px 0 56px;
}

.cs-stat{
  background:var(--carbon-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}

.cs-stat b{
  display:block;
  font-family:"Barlow Condensed",sans-serif;
  font-size:38px;
  font-weight:900;
  color:var(--orange);
  line-height:.9;
}

.cs-stat span{display:block;margin-top:8px;color:var(--muted);font-size:12.5px}
.cs-stat .draft-tag{margin-top:10px}

@media(max-width:640px){.cs-stats{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.cs-stats{grid-template-columns:1fr}}