.guide-contents {
    display: grid;
    gap: 16px;
}

.guide-page > article a:not(.landing-button) {
    color: var(--color-accent);
    text-underline-offset: 3px;
}

.guide-page a:focus-visible,
.guide-code:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 4px;
}

.guide-page .comparison-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
}

.guide-table {
    min-width: 620px;
}

.guide-table caption {
    padding: var(--padding-small);
    text-align: left;
}

.guide-prose {
    margin-top: 28px;
    max-width: 860px;
}

.guide-prose h3 {
    color: var(--color-text-primary);
    margin-block: 32px 18px;
}

.guide-prose li + li {
    margin-top: 14px;
}

.guide-page code {
    overflow-wrap: anywhere;
}

.guide-code {
    max-width: 100%;
    margin-block: 24px;
    padding: var(--padding-medium);
    overflow-x: auto;
    border: var(--border-default) var(--color-card-border);
    border-radius: var(--radius-popup);
    background: var(--color-card-surface);
}

.guide-code .hljs {
    color: var(--color-text-primary);
}

.guide-code .hljs-keyword,
.guide-code .hljs-literal {
    color: var(--color-accent-hover);
}

.guide-code .hljs-string,
.guide-code .hljs-char {
    color: var(--color-status-active-text);
}

.guide-code .hljs-title,
.guide-code .hljs-type,
.guide-code .hljs-number {
    color: var(--color-warning-text);
}

.guide-code .hljs-comment,
.guide-code .hljs-meta {
    color: var(--color-text-placeholder);
}

.guide-funnel {
    max-width: 860px;
    margin: 0;
    padding: var(--padding-medium);
    border: var(--border-default) var(--color-card-border);
    border-radius: var(--radius-popup);
    background: var(--color-card-surface);
}

.guide-funnel ol {
    display: grid;
    gap: 22px;
    padding: 0;
    list-style: none;
}

.guide-funnel li > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.guide-funnel meter {
    width: 100%;
    height: 18px;
}

.guide-funnel meter::-webkit-meter-bar {
    border: 0;
    background: var(--color-control-surface);
}

.guide-funnel meter::-webkit-meter-optimum-value {
    background: var(--color-accent);
}

@media (max-width: 980px) {
    .guide-page .comparison-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .guide-funnel,
    .guide-code {
        padding: var(--padding-small);
    }
}