.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; max-width: 1152px; margin: auto; padding: 2.5rem 1.5rem 4rem; }
.docs-sidebar { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 112px); overflow-y: auto; font-size: .875rem; }
.docs-nav-title { font-weight: 700; color: #1d1f50; margin: 0 0 1rem; }
.docs-sidebar a { display: block; padding: .4rem .5rem; border-radius: .375rem; color: #475569; }
.docs-sidebar a:hover { background: #e0f2fe; color: #02477a; }
.docs-sidebar summary { cursor: pointer; padding: .6rem .5rem; font-weight: 600; }
.docs-sidebar details a { font-size: .8rem; padding-left: 1rem; }
.webhook-guide { min-width: 0; line-height: 1.75; color: #334155; }
.docs-eyebrow { color: #0369a1; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.webhook-guide h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; color: #1d1f50; margin: .5rem 0 1rem; }
.docs-lead { font-size: 1.125rem; color: #64748b; }
.webhook-guide h2 { font-size: 1.5rem; line-height: 1.35; font-weight: 700; color: #1d1f50; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.webhook-guide h3 { font-size: 1.15rem; font-weight: 600; color: #02477a; margin: 2rem 0 .75rem; overflow-wrap: anywhere; }
.webhook-guide h1, .webhook-guide h2, .webhook-guide h3 { scroll-margin-top: 90px; }
.webhook-guide p { margin: 1rem 0; }
.webhook-guide ul, .webhook-guide ol { padding-left: 1.5rem; margin: 1rem 0; }
.webhook-guide ul { list-style: disc; } .webhook-guide ol { list-style: decimal; }
.webhook-guide li { margin: .5rem 0; }
.webhook-guide code { font-size: .85em; background: #f1f5f9; border-radius: .25rem; padding: .15rem .3rem; overflow-wrap: anywhere; }
.webhook-guide pre { background: #0f172a; color: #e2e8f0; padding: 1.25rem; border-radius: .75rem; overflow-x: auto; margin: 1.25rem 0; font-size: .875rem; }
.webhook-guide pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; overflow-wrap: normal; }
.webhook-guide table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .875rem; margin: 1.25rem 0; }
.webhook-guide th, .webhook-guide td { border: 1px solid #e2e8f0; padding: .75rem; text-align: left; vertical-align: top; min-width: 130px; }
.webhook-guide th { background: #f8fafc; font-weight: 600; }
.webhook-guide a, .docs-footer a { color: #0369a1; text-decoration: underline; }
.docs-footer { border-top: 1px solid #e2e8f0; padding: 2rem 1.5rem; color: #64748b; font-size: .875rem; text-align: center; }
a:focus-visible, summary:focus-visible { outline: 2px solid #7671f9; outline-offset: 3px; }
@media (max-width: 767px) { .docs-layout { display: block; padding-top: 1.5rem; } .docs-sidebar { position: static; max-height: none; border-bottom: 1px solid #e2e8f0; padding-bottom: 1.5rem; margin-bottom: 2rem; } .webhook-guide h1 { font-size: 2rem; } }