/* ============================================================
   DOCUMENTATION PAGE
   Breaks from the single centered-card layout on purpose: a sticky
   sidebar nav on the left, content pane on the right, both sitting
   inside one white shell — same fonts/colors/accent purple as the
   rest of the site.
   ============================================================ */

.docs-page{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  padding: 160px 24px 120px;
}

.docs-shell{
  width:100%;
  max-width:1040px;
  display:flex;
  align-items:flex-start;
  gap:0;
  background:#ffffff;
  border-radius:28px;
  box-shadow: 0 30px 80px rgba(20,20,50,0.10), 0 4px 14px rgba(20,20,50,0.05);
  overflow:hidden;
}

.docs-sidebar{
  width:240px;
  flex-shrink:0;
  padding: 44px 22px;
  border-right:1px solid rgba(20,20,60,0.08);
  position:sticky;
  top:120px;
  align-self:flex-start;
}

.docs-sidebar-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--ink-soft);
  opacity:0.6;
  padding: 0 12px 14px;
}

.docs-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.docs-nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color: var(--ink-soft);
  padding: 11px 12px;
  border-radius:10px;
  transition: background 160ms ease, color 160ms ease;
}
.docs-nav-item:hover{
  background: rgba(46,59,193,0.06);
  color: var(--ink);
}
.docs-nav-item.is-active{
  background: rgba(46,59,193,0.09);
  color: #2E3BC1;
}

.docs-soon{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: var(--ink-soft);
  background: rgba(20,20,60,0.08);
  padding: 3px 7px;
  border-radius:100px;
}

.docs-content{
  flex:1;
  min-width:0;
  padding: 56px 60px 64px;
}

.docs-pane{ display:none; }
.docs-pane.is-active{ display:block; }

.docs-content h1{
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight:800;
  letter-spacing:-0.01em;
  color: var(--ink);
  margin-bottom:16px;
}
.docs-content h2{
  margin-top:38px;
  margin-bottom:12px;
  font-size:18px;
  font-weight:700;
  color: var(--ink);
}
.docs-content p{
  font-size:15px;
  line-height:1.7;
  color: var(--ink-soft);
  margin-bottom:14px;
}
.docs-content ul{
  margin: 0 0 14px 20px;
}
.docs-content li{
  font-size:15px;
  line-height:1.7;
  color: var(--ink-soft);
  margin-bottom:8px;
}
.docs-content a{
  color: var(--brand);
  text-decoration:underline;
  text-underline-offset:2px;
}
.docs-content strong{ color: var(--ink); }

.docs-status-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#8a6d00;
  background:#fff3cd;
  padding: 5px 11px;
  border-radius:100px;
  margin-bottom:18px;
}

@media (max-width: 860px){
  .docs-shell{ flex-direction:column; border-radius:22px; }
  .docs-sidebar{
    width:100%;
    position:relative;
    top:0;
    border-right:none;
    border-bottom:1px solid rgba(20,20,60,0.08);
    padding: 26px 22px 14px;
  }
  .docs-nav{ flex-direction:row; flex-wrap:wrap; }
  .docs-content{ padding: 40px 24px 48px; }
}

@media (max-width: 640px){
  .docs-page{ padding: 130px 16px 90px; }
}