/* Pairpop docs: quiet reading layout on the existing theme tokens. */
.doc{max-width:1080px;margin:0 auto;padding:150px 28px 90px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:46px;align-items:start}
.doc-head{grid-column:1/-1;margin-bottom:6px}
.doc-head .eyebrow{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.doc-head h1{font-size:52px;line-height:1.04;letter-spacing:-.035em;margin:0 0 14px}
.doc-head p{margin:0;max-width:60ch;color:var(--muted);font-size:14px}
.doc-toc{position:sticky;top:132px;display:flex;flex-direction:column;gap:2px;padding:16px 14px;border-radius:20px;
  background:var(--rail);border:1px solid var(--line);backdrop-filter:blur(16px)}
.doc-toc strong{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.doc-toc a{font-size:11.5px;color:var(--muted);padding:6px 9px;border-radius:10px;transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)}
.doc-toc a:hover{background:var(--panel);color:var(--ink);transform:translateX(2px)}
.doc-body{display:flex;flex-direction:column;gap:14px}
.doc-sec{padding:26px 28px;border-radius:24px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 6px 26px rgba(28,92,143,.05);opacity:0;transform:translateY(14px);animation:docrise 620ms var(--ease) forwards}
.doc-sec:nth-child(2){animation-delay:40ms}.doc-sec:nth-child(3){animation-delay:80ms}
.doc-sec:nth-child(4){animation-delay:120ms}.doc-sec:nth-child(5){animation-delay:160ms}
.doc-sec:nth-child(n+6){animation-delay:200ms}
@keyframes docrise{to{opacity:1;transform:none}}
.doc-sec h2{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;font-size:22px;letter-spacing:-.025em}
.doc-sec h2 span{font-size:10px;color:var(--blue);letter-spacing:1.4px}
.doc-sec p{margin:0 0 11px;font-size:13.5px;line-height:1.72;color:var(--muted)}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec strong{color:var(--ink);font-weight:600}
.doc-sec ul{margin:0 0 11px;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.72}
.doc-sec li{margin-bottom:5px}
.doc-sec pre{margin:0 0 11px;padding:14px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line);overflow:auto}
.doc-sec code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink)}
.doc-note{padding:14px 16px;border-radius:16px;background:rgba(43,143,230,.07);border:1px solid rgba(43,143,230,.2);
  font-size:12.5px;line-height:1.65;color:var(--ink)}
.doc-foot{grid-column:1/-1;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}
.doc-foot a{border-bottom:1px solid var(--line);transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.doc-foot a:hover{color:var(--blue);border-bottom-color:var(--blue)}
@media(max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr);gap:24px;padding:132px 20px 70px}
  .doc-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .doc-toc strong{width:100%;margin-bottom:4px}
  .doc-head h1{font-size:38px}
}
@media(max-width:600px){.doc-sec{padding:20px 18px;border-radius:20px}.doc-head h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){.doc-sec{opacity:1;transform:none;animation:none}.doc-toc a:hover{transform:none}}

/* Hero readability: keep the doc above the cloud wash and use full-strength ink. */
.cloudscape{z-index:0}
.doc{position:relative;z-index:1}
.doc-head h1{color:var(--ink);opacity:1}
.doc-head p{color:#3a4756;font-size:14.5px;line-height:1.7;opacity:1}
body[data-theme=dark] .doc-head p{color:#c3d5e6}
.doc-link{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 40%,transparent);
  font-weight:500;transition:border-color 160ms var(--ease)}
.doc-link:hover{border-bottom-color:var(--blue)}