/* Sealed docs (/docs): a Read surface on the landing's tokens and nav. */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); width: min(1180px, 100% - var(--gutter) * 2); margin: 0 auto; padding: calc(var(--nav-h) + 48px) 0 96px; }
.docs__side { position: relative; }
.docs__toc { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 2px; }
.docs__toc-h { margin-bottom: 8px; padding-left: 14px; font-size: 14px; font-weight: 650; color: var(--ink); }
.docs__toc a { position: relative; padding: 8px 14px; border-radius: 12px; font-size: 15px; color: var(--mute); text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.docs__toc a.is-on { color: var(--ink); font-weight: 650; background: var(--paper); }
.docs__toc a.is-on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--blue); }
@media (hover: hover) and (pointer: fine) { .docs__toc a:hover { color: var(--ink); } }
.docs__body { min-width: 0; max-width: 720px; }
.docs__h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.docs__head { padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.docs__body section { padding-top: 48px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.docs__body h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 850; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
.docs__body p { color: #2E3456; max-width: 68ch; }
.docs__body p + p { margin-top: 14px; }
.docs__body a { color: var(--blue); text-underline-offset: 3px; }
.docs__body code { padding: 2px 7px; border-radius: 7px; background: var(--paper); font-size: 0.86em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.docs__note { margin-top: 18px !important; padding: 14px 18px; border-radius: 16px; background: var(--blue-50); color: var(--ink) !important; font-size: 15.5px; }
.docs__steps { display: grid; gap: 14px; counter-reset: s; }
.docs__steps li { position: relative; padding-left: 46px; color: #2E3456; counter-increment: s; }
.docs__steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 750; }
.docs__steps b { color: var(--ink); }
.docs__fig { margin: 26px 0 0; }
.docs__flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 24px 18px; border-radius: 24px; background: var(--paper); }
.docs__node { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 14px; }
.docs__node img { width: 64px; height: 64px; object-fit: contain; }
.docs__node b { font-weight: 650; }
.docs__arrow { width: 26px; height: 2px; background: var(--line-strong); position: relative; }
.docs__arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line-strong); }
.docs__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--mute); }
.docs__table { display: grid; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.docs__tr { display: grid; grid-template-columns: 1fr 0.8fr 1.6fr 1.4fr; gap: 12px; padding: 14px 18px; font-size: 15px; color: #2E3456; }
.docs__tr + .docs__tr { border-top: 1px solid var(--line); }
.docs__tr--h { background: var(--paper); font-size: 13.5px; font-weight: 650; color: var(--mute); }
.docs__tr b { color: var(--ink); }
.docs__dl { display: grid; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.docs__dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 18px; }
.docs__dl > div + div { border-top: 1px solid var(--line); }
.docs__dl dt { font-weight: 650; }
.docs__dl dd { color: #2E3456; min-width: 0; }
.docs__fns, .docs__list { display: grid; gap: 10px; margin-top: 4px; }
.docs__fns li, .docs__list li { color: #2E3456; padding-left: 18px; position: relative; }
.docs__fns li::before, .docs__list li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.docs__fns + p { margin-top: 16px; }
.docs__list b { color: var(--ink); }
#faq .qa:first-of-type { border-top: 1px solid var(--line); }
.docs__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding: 26px 28px; border-radius: 26px; background: var(--blue); color: #fff; }
.docs__cta p { color: #fff !important; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.docs__cta .btn--blue { background: #fff; color: var(--ink); box-shadow: none; }
.docs__cta .btn--blue .btn__arrow { background: var(--blue-50); color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .docs__cta .btn--blue:hover { background: var(--blue-50); } }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 28px); }
  .docs__side { display: none; }
  .docs__tr { grid-template-columns: 1fr 1fr; }
  .docs__tr--h { display: none; }
  .docs__tr span:nth-child(3) { grid-column: 1 / -1; color: var(--mute); }
  .docs__tr span:nth-child(4) { grid-column: 1 / -1; }
  .docs__flow { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .docs__arrow { display: none; }
  .docs__dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* 404 */
.lost { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 100svh; padding: calc(var(--nav-h) + 40px) var(--gutter) 80px; text-align: center; }
.lost__art { width: min(520px, 90vw); margin-bottom: 10px; }
.lost__h { font-size: clamp(36px, 5vw, 64px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; max-width: 16ch; }
.lost .lead { margin: 0 auto; }
.lost__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }