.doc-hero{
  position:relative;
  overflow-x:clip;
  border-bottom:1px solid var(--color-line);
  background:var(--color-canvas);
}
.doc-hero::before{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  background-image:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(90deg,transparent,var(--color-ink),transparent);
  opacity:.5;
}
.doc-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
  gap:clamp(48px,8vw,112px);
  align-items:center;
  min-height:calc(100svh - var(--header-height));
  padding-top:clamp(64px,8vw,112px);
  padding-bottom:clamp(64px,8vw,112px);
}
.doc-hero-copy{min-width:0}
.doc-hero-copy h1{max-width:720px}
.doc-hero-copy .lead{margin-bottom:30px}
.doc-hero-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:34px;
}
.doc-scope{
  display:grid;
  gap:10px;
  margin:0;
  padding:22px 0 0;
  border-top:1px solid var(--color-line);
  list-style:none;
}
.doc-scope li{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:16px;
  color:var(--color-ink-soft);
  font-size:13px;
}
.doc-scope span{
  color:var(--color-signal);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
}
.diagnostic-plate{
  min-width:0;
  padding:clamp(22px,4vw,42px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-paper-warm);
  box-shadow:var(--shadow-menu);
}
.diagnostic-axis,
.diagnostic-labels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.diagnostic-axis{
  padding-bottom:16px;
  border-bottom:1px solid var(--color-line);
  color:var(--color-ink-soft);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
}
.diagnostic-svg{
  width:100%;
  margin-block:10px;
  color:var(--color-ink-soft);
}
.diagnostic-svg path{
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.diagnostic-svg circle{
  fill:var(--color-canvas);
  stroke:var(--color-ink);
  stroke-width:1.5;
}
.diagnostic-svg .diagnostic-signal{
  fill:var(--color-signal);
  stroke:var(--color-signal);
}
.diagnostic-svg .diagnostic-check{
  stroke:var(--color-white);
  stroke-width:2;
}
.diagnostic-labels{
  color:var(--color-ink);
  font-size:11px;
}
.diagnostic-caption{
  margin:26px 0 0;
  padding-top:16px;
  border-top:1px solid var(--color-line);
  color:var(--color-ink-soft);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
}
.doc-article{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-top:clamp(72px,8vw,112px);
  padding-bottom:clamp(72px,8vw,112px);
}
.doc-section{
  display:grid;
  grid-template-columns:minmax(130px,.28fr) minmax(0,1fr);
  gap:clamp(36px,7vw,96px);
  padding-top:clamp(64px,8vw,104px);
  padding-bottom:clamp(64px,8vw,104px);
  border-top:1px solid var(--color-line);
}
.doc-section:first-child{padding-top:0;border-top:0}
.doc-section-mark{
  position:sticky;
  top:calc(var(--header-height) + 72px);
  align-self:start;
  display:grid;
  gap:8px;
  color:var(--color-ink-soft);
  font-family:var(--font-mono);
}
.doc-section-mark span{
  color:var(--color-signal);
  font-size:9px;
  letter-spacing:.16em;
}
.doc-section-mark strong{
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
}
.doc-prose{
  max-width:var(--reading-max);
  min-width:0;
}
.doc-prose h2{
  margin-bottom:34px;
  text-wrap:balance;
}
.doc-prose h3{
  margin-top:44px;
  margin-bottom:16px;
  padding-top:18px;
  border-top:1px solid var(--color-line);
  font-size:clamp(21px,2.5vw,28px);
}
.doc-prose p{
  margin-bottom:20px;
  line-height:1.9;
}
.doc-prose .callout{line-height:1.85}
.doc-prose .table-scroll{margin-block:34px}
.doc-prose pre{
  margin-block:24px;
  font-size:13px;
  line-height:1.7;
}
.doc-article > .promo-block{
  max-width:calc(var(--reading-max) + 240px);
  margin-inline:auto;
}
@media (max-width:1080px){
  .doc-hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .diagnostic-plate{max-width:760px}
}
@media (max-width:768px){
  .doc-hero::before{display:none}
  .doc-hero-grid{
    gap:42px;
    padding-top:52px;
    padding-bottom:58px;
  }
  .doc-section{
    grid-template-columns:1fr;
    gap:24px;
  }
  .doc-section-mark{
    position:static;
    grid-template-columns:auto auto;
    justify-content:start;
    align-items:center;
  }
  .doc-prose h3{margin-top:38px}
}
@media (max-width:640px){
  .doc-hero-links .btn{flex:1 1 150px}
  .diagnostic-plate{padding:18px}
  .diagnostic-axis,
  .diagnostic-labels{
    gap:6px;
  }
  .diagnostic-axis{font-size:8px}
  .diagnostic-labels{font-size:9px}
  .doc-scope li{
    grid-template-columns:76px minmax(0,1fr);
    gap:10px;
  }
  .doc-article{
    padding-top:64px;
    padding-bottom:64px;
  }
  .doc-section{
    padding-top:64px;
    padding-bottom:64px;
  }
}
@media (max-width:390px){
  .diagnostic-axis span,
  .diagnostic-labels span{
    overflow-wrap:anywhere;
  }
}