.guide-detail-page {
    color: #0b1d40;
}

.guide-detail-page .guide-detail-hero {
    padding-bottom: 48px;
}

.guide-reading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 18px;
    color: #536789;
    font-size: 13px;
}

.guide-reading-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.guide-reading-meta span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1769e8;
    content: "";
}

.guide-detail-page .guide-detail-layout {
    align-items: start;
}

.guide-toc {
    display: grid;
    gap: 3px;
    margin-bottom: 26px;
    padding: 16px;
    border: 1px solid #d8e4f4;
    border-radius: 8px;
    background: #f7faff;
}

.guide-toc strong {
    margin-bottom: 6px;
    color: #0b1d40;
    font-size: 14px;
}

.guide-toc a {
    padding: 7px 8px;
    border-radius: 6px;
    color: #536789;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
    background: #eaf2ff;
    color: #1769e8;
}

.guide-article > section {
    scroll-margin-top: 92px;
}

.guide-prose {
    display: grid;
    gap: 14px;
    max-width: 780px;
}

.guide-prose p {
    margin: 0;
    color: #3f5477;
    font-size: 16px;
    line-height: 1.75;
}

.guide-use-cases {
    margin-top: 26px;
    padding: 22px 24px;
    border-left: 4px solid #1f70ed;
    background: #f5f9ff;
}

.guide-use-cases h3 {
    margin: 0 0 13px;
    color: #0b1d40;
    font-size: 17px;
    font-weight: 600;
}

.guide-use-cases ul,
.guide-checklist,
.guide-mistakes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-use-cases ul {
    display: grid;
    gap: 10px;
}

.guide-use-cases li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #344b70;
    font-size: 14px;
    line-height: 1.5;
}

.guide-use-cases .icon-check,
.guide-checklist .icon-check {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #12aa64;
}

.guide-screenshot {
    margin: 0;
}

.guide-screenshot-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 8 / 5;
    border: 1px solid #cbdaf0;
    border-radius: 8px;
    background: #edf3fb;
    box-shadow: 0 20px 45px rgba(31, 70, 130, .12);
}

.guide-screenshot-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.guide-screenshot figcaption {
    margin-top: 12px;
    color: #647594;
    font-size: 13px;
    line-height: 1.5;
}

.guide-marker {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #1769e8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 16px rgba(4, 45, 110, .3);
}

.guide-marker.is-sidebar { left: 7%; top: 30%; }
.guide-marker.is-sidebar-purchases,
.guide-marker.is-sidebar-sales { left: 8%; top: 40%; }
.guide-marker.is-topbar { right: 10%; top: 4%; }
.guide-marker.is-page-title { left: 23%; top: 11%; }
.guide-marker.is-metrics { left: 39%; top: 22%; }
.guide-marker.is-charts { left: 60%; top: 50%; }
.guide-marker.is-table-tools { right: 8%; top: 61%; }
.guide-marker.is-table { left: 50%; top: 78%; }
.guide-marker.is-table-actions { right: 5%; top: 79%; }
.guide-marker.is-panel-top { left: 52%; top: 23%; }
.guide-marker.is-panel-list { left: 54%; top: 53%; }
.guide-marker.is-modal-tabs { left: 22%; top: 31%; }
.guide-marker.is-modal-form { left: 48%; top: 42%; }
.guide-marker.is-modal-results { right: 13%; top: 39%; }
.guide-marker.is-settings-nav { left: 28%; top: 28%; }
.guide-marker.is-settings-main { left: 57%; top: 39%; }
.guide-marker.is-settings-save { right: 9%; bottom: 12%; }
.guide-marker.is-catalog-filter { left: 47%; top: 28%; }
.guide-marker.is-catalog-list { left: 57%; top: 64%; }
.guide-marker.is-security-profile { left: 51%; top: 35%; }
.guide-marker.is-security-mfa { left: 60%; top: 65%; }

.guide-callout-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.guide-callout-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fff;
}

.guide-callout-list > li > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #1769e8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.guide-callout-list strong {
    display: block;
    color: #0b1d40;
    font-size: 14px;
    font-weight: 600;
}

.guide-callout-list p {
    margin: 5px 0 0;
    color: #5b6e8d;
    font-size: 13px;
    line-height: 1.45;
}

.guide-checklist {
    display: grid;
    gap: 10px;
    counter-reset: checklist;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #dbe5f3;
    color: #344b70;
    font-size: 14px;
    line-height: 1.5;
}

.guide-concept-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.guide-concept-grid > div {
    min-width: 0;
    padding: 18px;
    border-top: 3px solid #1769e8;
    background: #f7faff;
}

.guide-concept-grid dt {
    margin-bottom: 8px;
    color: #0b1d40;
    font-size: 15px;
    font-weight: 600;
}

.guide-concept-grid dd {
    margin: 0;
    color: #536789;
    font-size: 13px;
    line-height: 1.55;
}

.guide-mistakes {
    display: grid;
    gap: 10px;
}

.guide-mistakes li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ffd6d2;
    border-radius: 8px;
    background: #fff8f7;
    color: #674445;
    font-size: 14px;
    line-height: 1.5;
}

.guide-mistakes li > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #ffebe8;
    color: #da392f;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .guide-callout-list,
    .guide-concept-grid {
        grid-template-columns: 1fr;
    }

    .guide-callout-list li {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    .guide-detail-page .guide-detail-hero {
        padding-bottom: 34px;
    }

    .guide-reading-meta {
        gap: 8px 14px;
    }

    .guide-toc {
        display: none;
    }

    .guide-prose p {
        font-size: 15px;
        line-height: 1.65;
    }

    .guide-use-cases {
        padding: 18px;
    }

    .guide-screenshot-frame {
        aspect-ratio: 4 / 3;
    }

    .guide-screenshot-frame img {
        object-fit: cover;
        object-position: top left;
    }

    .guide-marker {
        width: 27px;
        height: 27px;
        border-width: 2px;
        font-size: 12px;
    }

    .guide-callout-list {
        gap: 8px;
    }

    .guide-checklist li,
    .guide-mistakes li {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-toc a {
        scroll-behavior: auto;
    }
}

.guide-restricted-preview {
    display: grid;
    align-content: center;
    min-height: 100%;
    padding: clamp(24px, 5vw, 64px);
    background: linear-gradient(145deg, #f8fbff 0%, #edf4ff 100%);
}

.guide-restricted-preview__intro {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    max-width: 680px;
    margin: 0 auto 30px;
}

.guide-restricted-preview__intro > span {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-color: #1769e8;
}

.guide-restricted-preview__intro strong {
    display: block;
    color: #0d2347;
    font-size: clamp(20px, 2.4vw, 28px);
}

.guide-restricted-preview__intro p,
.guide-restricted-preview__areas p {
    margin: 6px 0 0;
    color: #5f7190;
    line-height: 1.55;
}

.guide-restricted-preview__areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.guide-restricted-preview__areas > div {
    position: relative;
    min-width: 0;
    padding: 22px 18px 18px;
    border: 1px solid #cfddf2;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
}

.guide-restricted-preview__areas > div > span {
    position: absolute;
    top: -13px;
    left: 16px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #1769e8;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.guide-restricted-preview__areas strong {
    color: #0d2347;
}

@media (max-width: 720px) {
    .guide-restricted-preview {
        padding: 24px 18px;
    }

    .guide-restricted-preview__intro {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .guide-restricted-preview__intro > span {
        width: 44px;
        height: 44px;
    }

    .guide-restricted-preview__areas {
        grid-template-columns: 1fr;
    }
}