.usage-guide .prose {
    max-width: none;
    min-width: 0;
    margin: 0;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.usage-guide section[id] {
    scroll-margin-top: 100px;
}

.usage-guide .prose > section {
    margin-bottom: 42px;
}

.usage-guide .guide-sidebar {
    max-height: calc(100vh - 116px);
    overflow-y: auto;
}

.usage-guide li {
    margin-bottom: 12px;
}

.guide-draft,
.guide-note {
    margin: 20px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--sts-accent);
    border-radius: 8px;
    background: rgba(79, 140, 255, 0.1);
}

.guide-draft {
    border-left-color: #e7b85b;
    background: rgba(231, 184, 91, 0.08);
}

.guide-draft p:last-child,
.guide-note p:last-child {
    margin-bottom: 0;
}

.usage-guide .screenshot-card {
    margin: 26px 0;
}

.usage-guide .screenshot-card a {
    display: block;
}

.usage-guide .screenshot-card img {
    height: auto;
}

.guide-index-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 24px 0;
}

.guide-checklist {
    width: 100%;
    border-collapse: collapse;
}

.guide-checklist th,
.guide-checklist td {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
    vertical-align: top;
}

.guide-table-scroll {
    overflow-x: auto;
}

.usage-guide a:focus-visible,
.usage-index a:focus-visible {
    outline: 2px solid #bcd0ff;
    outline-offset: 4px;
}

@media (max-width: 860px) {
    .usage-guide .navbar .container,
    .usage-index .navbar .container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .usage-guide .nav-links,
    .usage-index .nav-links {
        display: flex;
        gap: 12px;
        font-size: 0.85rem;
    }

    .usage-guide .guide-sidebar {
        grid-row: 1;
        max-height: none;
        overflow: visible;
    }

    .usage-guide .guide-sidebar a {
        display: inline-block;
        margin-right: 18px;
    }

    .usage-guide .policy-hero h1,
    .usage-index .policy-hero h1 {
        font-size: 2rem;
        overflow-wrap: anywhere;
    }
}
