/* The docs layout: a sidebar and a reading column. Content lifted from the product pages
   keeps its classes (section, card, grid, steps, code…) from styles.css; the rules here only
   take the marketing air out of them — left-aligned, narrower, no full-width bands. */
.docs{display:grid; grid-template-columns:250px minmax(0,1fr); gap:2.5rem; max-width:var(--maxw); margin:0 auto; padding:1.6rem clamp(1rem,4vw,2rem) 3rem}
.docs-nav-wrap{align-self:start; position:sticky; top:72px}
.docs-nav-wrap > summary{display:none}
.docs-nav{position:static; top:72px; align-self:start; max-height:calc(100vh - 90px); overflow:auto; font-size:.9rem; padding-right:.5rem}
.docs-nav .docs-home{display:block; color:var(--ink); font-weight:700; font-size:1rem; margin:0 0 .8rem}
.docs-nav .dg{color:var(--dim); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:1rem 0 .3rem}
.docs-nav a{display:block; color:var(--dim); padding:.28rem .5rem; margin-left:-.5rem; border-radius:6px; line-height:1.35}
.docs-nav a:hover{color:var(--ink); text-decoration:none; background:var(--hover)}
.docs-nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 3px 0 0 var(--accent2); background:var(--hover)}
.docs-nav a.ext{color:var(--dim); font-size:.86rem}
.docs-body{min-width:0; max-width:820px}
.docs-body .crumb{color:var(--dim); font-size:.85rem; margin:0 0 .6rem}
.docs-body > h1{font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); margin:0 0 .6rem}
.docs-body > .lede{color:var(--dim); font-size:1.05rem; margin:0 0 1.4rem; line-height:1.6}
/* sections read as chapters, not bands */
.docs-body .section,.docs-body .section-alt{max-width:none; margin:0; padding:1.6rem 0 .4rem; background:none; border:0; border-top:1px solid var(--border)}
.docs-body .section-alt > *{max-width:none}
.docs-body .sec-head{text-align:left; max-width:none; margin:0 0 1.1rem}
.docs-body .sec-head h2,.docs-body .section > h2,.docs-body h2{font-size:1.35rem; font-weight:700; text-align:left; margin:0 0 .7rem}
.docs-body .sec-head p{font-size:1rem; margin-top:.4rem}
.docs-body .grid{grid-template-columns:1fr 1fr; gap:.9rem}
.docs-body .card{padding:1.1rem 1.2rem}
.docs-body .steps{justify-content:flex-start; gap:.9rem}
.docs-body .steps li{flex-basis:calc(50% - .45rem); padding:1.1rem 1.2rem}
.docs-body .fine,.docs-body .privacy-card p{max-width:none; text-align:left; margin-left:0; margin-right:0}
.docs-body .hero-cta{justify-content:flex-start}
.docs-body img,.docs-body video{max-width:100%; height:auto}
.docs-body .privacy-card{display:flex; gap:1rem; align-items:flex-start}
.docs-body .privacy-card .ico-lg{font-size:2rem}
/* the docs home */
.docs-home-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem}
.docs-home-grid .card h2{font-size:1.05rem; margin:0 0 .5rem; color:var(--ink)}
.docs-home-grid .card a{display:block; color:var(--dim); font-size:.92rem; padding:.18rem 0}
.docs-home-grid .card a:hover{color:var(--ink); text-decoration:none}
@media (max-width:860px){
  .docs{grid-template-columns:1fr; gap:1.2rem}
  .docs-nav-wrap{position:static; border:1px solid var(--border); border-radius:10px; padding:.5rem .9rem}
  .docs-nav-wrap > summary{display:list-item; cursor:pointer; color:var(--ink); font-weight:600}
  .docs-nav-wrap:not([open]) .docs-nav{display:none}
  .docs-nav{position:static; max-height:none; display:flex; flex-wrap:wrap; gap:.2rem .6rem; padding:.6rem 0 .2rem}
  .docs-nav .dg{width:100%; margin:.6rem 0 .1rem}
  .docs-nav a{display:inline-block; margin:0}
  .docs-nav .docs-home{display:none}
  .docs-body .grid{grid-template-columns:1fr} .docs-body .steps li{flex-basis:100%}
}