.doc-hero{
  position:relative;
  padding-top:clamp(72px,9vw,124px);
  padding-bottom:clamp(72px,9vw,120px);
  background:
    radial-gradient(circle at 84% 18%,var(--cyan-glow),transparent 32%),
    radial-gradient(circle at 8% 82%,var(--white-glow),transparent 28%),
    linear-gradient(145deg,var(--deep-top),var(--deep-bottom));
  color:var(--hero-text);
  overflow:hidden;
}
.doc-hero::before{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--hero-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
  background-size:52px 52px;
  content:"";
  opacity:.18;
  pointer-events:none;
}
.doc-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  gap:clamp(40px,7vw,92px);
  align-items:center;
}
.doc-hero-copy{
  min-width:0;
}
.doc-hero h1{
  max-width:780px;
  margin-bottom:24px;
  color:var(--hero-text);
  font-size:clamp(34px,4.2vw,48px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.doc-hero .section-kicker{
  color:var(--accent);
}
.doc-lead{
  max-width:720px;
  margin-bottom:26px;
  color:var(--hero-text-soft);
  font-size:clamp(17px,2vw,21px);
}
.doc-meta{
  margin-bottom:30px;
}
.doc-meta .chip{
  border:1px solid var(--hero-chip-border);
  background:var(--hero-chip);
  color:var(--hero-text-soft);
  font-family:var(--font-mono);
}
.doc-hero .btn-secondary{
  border-color:var(--glass-border);
  background:var(--glass);
  color:var(--hero-text);
}
.doc-hero .btn-secondary:hover{
  border-color:var(--accent);
  background:var(--hero-chip);
  color:var(--hero-text);
}
.doc-map{
  position:relative;
  min-width:0;
  padding:clamp(24px,4vw,38px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  background:var(--glass);
  box-shadow:0 28px 70px var(--deep-shadow);
  backdrop-filter:blur(12px);
}
.doc-map::before{
  position:absolute;
  inset:-1px;
  border:1px solid var(--hero-chip-border);
  border-radius:inherit;
  content:"";
  transform:translate(12px,12px);
  pointer-events:none;
}
.doc-map-label{
  margin-bottom:22px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}
.doc-map ol{
  display:grid;
  gap:0;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}
.doc-map li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  min-height:52px;
  border-bottom:1px solid var(--hero-chip-border);
  color:var(--hero-text-soft);
}
.doc-map li span{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:12px;
}
.doc-map li strong{
  color:var(--hero-text);
  font-size:14px;
}
.doc-map pre{
  position:relative;
  margin:0;
  border:1px solid var(--hero-chip-border);
  background:var(--phone-screen-b);
  box-shadow:none;
  font-size:12px;
}
.doc-intro{
  margin-bottom:28px;
}
.doc-guide-title{
  font-size:clamp(28px,3.4vw,40px);
}
.doc-toc{
  position:relative;
  top:auto;
  margin-bottom:28px;
}
.doc-article{
  background:var(--bg);
}
.doc-chapter{
  scroll-margin-top:18px;
}
.doc-chapter .prose{
  max-width:980px;
}
.doc-chapter .prose>*{
  max-width:820px;
}
.doc-chapter .prose>.table-wrap,
.doc-chapter .prose>pre,
.doc-chapter .prose>.callout,
.doc-chapter .prose>.doc-next{
  max-width:980px;
}
.doc-chapter h2{
  margin-top:0;
  margin-bottom:30px;
  font-size:clamp(34px,4.5vw,52px);
}
.doc-chapter h3{
  margin-top:1.9em;
  font-size:clamp(21px,2.5vw,27px);
}
.doc-chapter p{
  font-size:17px;
}
.doc-chapter pre{
  margin-top:26px;
  margin-bottom:28px;
  border:1px solid var(--hero-chip-border);
  box-shadow:0 18px 44px var(--soft-shadow);
}
.doc-chapter .table-wrap{
  margin-top:30px;
  margin-bottom:30px;
  background:var(--bg);
  box-shadow:0 16px 38px var(--soft-shadow);
}
.doc-chapter .callout{
  margin-top:34px;
  margin-bottom:0;
}
.doc-next{
  margin-top:58px;
  padding:clamp(24px,4vw,38px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg);
  box-shadow:0 20px 48px var(--soft-shadow);
}
.doc-next h3{
  margin-top:0;
}
.doc-next p:last-child{
  margin-bottom:0;
}
@media (max-width:900px){
  .doc-hero-grid{
    grid-template-columns:1fr;
  }
  .doc-map{
    max-width:680px;
  }
}
@media (max-width:640px){
  .doc-hero{
    padding-top:52px;
    padding-bottom:68px;
  }
  .doc-hero h1{
    margin-bottom:18px;
    font-size:clamp(24px,7.5vw,30px);
    letter-spacing:-.01em;
  }
  .doc-lead{
    font-size:16px;
  }
  .doc-meta{
    gap:8px;
  }
  .doc-map{
    padding:22px;
    border-radius:var(--radius-lg);
  }
  .doc-map::before{
    display:none;
  }
  .doc-map pre{
    padding:16px 14px;
  }
  .doc-chapter p{
    font-size:15px;
  }
  .doc-chapter h2{
    font-size:clamp(29px,9vw,36px);
  }
  .doc-chapter .table-wrap{
    margin-inline:0;
  }
}