/* SEO guide pages (landing/guides/*), loaded only by those pages. Builds on article-v2.css (.ar-body h2/h3/p/ul/table). */

/* contents box with jump links */
.ar-body .gd-toc {
    margin: 8px 0 28px;
    padding: 18px 22px;
    border: 1px solid rgba(124, 92, 255, 0.18);
    border-radius: 16px;
    background: rgba(124, 92, 255, 0.04);
}
.ar-body .gd-toc strong { display: block; margin-bottom: 8px; }
.ar-body .gd-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.ar-body .gd-toc li { margin: 4px 0; break-inside: avoid; }
@media (max-width: 767.98px) { .ar-body .gd-toc ol { columns: 1; } }

/* illustration (inline SVG or screenshot) with caption */
.ar-body .gd-figure { margin: 24px 0; text-align: center; }
.ar-body .gd-figure svg,
.ar-body .gd-figure img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border-radius: 16px; }
.ar-body .gd-figure img { border: 1px solid #ece9f5; }
.ar-body .gd-figure figcaption { margin-top: 8px; font-size: 14px; color: #6b6880; }

/* numbered steps */
.ar-body .gd-steps { counter-reset: gd-step; list-style: none; padding-left: 0; }
.ar-body .gd-steps > li { counter-increment: gd-step; position: relative; padding: 4px 0 12px 48px; }
.ar-body .gd-steps > li::before {
    content: counter(gd-step);
    position: absolute; left: 0; top: 2px;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7c5cff, #e8559f);
}

/* highlighted note */
.ar-body .gd-callout {
    margin: 20px 0; padding: 14px 18px;
    border-left: 4px solid #7c5cff; border-radius: 12px;
    background: #f7f5ff;
}

/* wide tables scroll on phones instead of breaking the layout */
.ar-body .gd-table-wrap { overflow-x: auto; margin: 16px 0; }
.ar-body .gd-table-wrap table { min-width: 560px; margin: 0; }

/* inline call to action, 2-3 per guide (landing/partials/f2h-guide-cta) */
.ar-body .gd-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin: 32px 0; padding: 22px 26px;
    border-radius: 18px;
    background: var(--pv-soft, #F4F3FF); border: 1px solid var(--pv-soft-border, #E9E3FD);
}
.ar-body .gd-cta__copy { flex: 1 1 320px; }
.ar-body .gd-cta__title { display: block; font-size: 19px; line-height: 26px; font-weight: 700; color: var(--f2h-ink, #1d1b2f); }
.ar-body .gd-cta p { margin: 4px 0 0; font-size: 14.5px; line-height: 21px; color: var(--f2h-muted, #6b6880); }
.ar-body .gd-cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ar-body .gd-cta__link { font-size: 14px; font-weight: 600; color: #6941C6; padding: 0 6px; white-space: nowrap; }
@media (max-width: 767.98px) {
    .ar-body .gd-cta { padding: 18px 16px; }
    .ar-body .gd-cta__actions { width: 100%; }
    .ar-body .gd-cta__actions .f2h-btn { flex: 1 1 auto; justify-content: center; }
    .ar-body .gd-cta__link { flex: 1 1 100%; text-align: center; padding-top: 4px; }
}

/* related guides list at the end of the article */
.ar-body .gd-related { margin-top: 32px; padding-top: 20px; border-top: 1px solid #ece9f5; }
.ar-body .gd-related ul { columns: 2; column-gap: 32px; }
@media (max-width: 767.98px) { .ar-body .gd-related ul { columns: 1; } }

/* scenes: same look as the product pages' illustrations (white cards on a glass panel, see product-v3.css .pv-scene) */
.ar-body .gd-scene { padding: 24px 28px 18px; border-radius: var(--f2h-radius, 23px); background: var(--f2h-glass, rgba(255, 255, 255, 0.8)); border: 1px solid #EEF0F4; }
.ar-body .gd-scene .pv-scene { max-width: 100%; margin: 0 auto; border-radius: 0; border: 0; }
.ar-body .gd-scene figcaption { margin-top: 12px; }
.ar-body .gd-scene--phone { max-width: 320px; margin-left: auto; margin-right: auto; padding: 18px 18px 14px; }
.ar-body .gd-scene--phone .pv-scene { max-width: 260px; }
@media (max-width: 767.98px) { .ar-body .gd-scene { padding: 16px 12px 12px; } }