/* /guides and /guides/{slug}. Loads after social-sellers.css and reuses its .ss-page tokens; px only (20px theme root). */

.ss-g-hero { padding: 48px 0 40px; background: var(--ss-wash); }
@media (min-width: 992px) { .ss-g-hero { padding: 64px 0 56px; } }
.ss-g-title { max-width: 24ch; font-size: clamp(32px, 4.4vw, 46px); }
.ss-g-meta { margin-top: 18px; font-size: 14px; color: var(--ss-muted); }

.ss-g-body { padding: 48px 0 72px; }
@media (min-width: 992px) { .ss-g-body { padding: 64px 0 96px; } }
.ss-g-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 992px) { .ss-g-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }

/* Direct answer, first thing in the article (AEO) */
.ss-g-answer { margin-bottom: 32px; padding: 20px 22px; background: var(--ss-wash); border-left: 4px solid var(--ss-orange); border-radius: 0 var(--ss-radius-lg) var(--ss-radius-lg) 0; }
.ss-g-answer__lab { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ss-orange-text); }
.ss-page .ss-g-answer p:last-child { font-size: 17px; color: var(--ss-ink); }

/* Table of contents: inline on phones and tablets, sticky sidebar on desktop */
.ss-g-side { display: grid; gap: 24px; }
@media (min-width: 992px) { .ss-g-side { position: sticky; top: 24px; } }
.ss-g-toc { font-size: 14px; }
.ss-g-toc ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: ss-toc; }
.ss-g-toc li { padding: 6px 0; border-top: 1px solid var(--ss-line); }
.ss-g-toc li:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-page .ss-g-toc a { font-weight: 600; color: var(--ss-slate); text-decoration: none; }
.ss-page .ss-g-toc a:hover { color: var(--ss-orange-text); text-decoration: underline; }
.ss-g-toc__title,
.ss-g-toc summary { font-size: 13px; font-weight: 700; color: var(--ss-slate); }
.ss-g-toc--inline { margin-bottom: 32px; padding: 14px 16px; background: var(--ss-mist); border-radius: var(--ss-radius-lg); }
.ss-g-toc--inline summary { cursor: pointer; }
.ss-g-side .ss-g-toc { display: none; }
@media (min-width: 992px) {
	.ss-g-toc--inline { display: none; }
	.ss-g-side .ss-g-toc { display: block; }
}

.ss-g-card { padding: 20px; background: var(--ss-mist); border-radius: var(--ss-radius-lg); }
.ss-g-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ss-slate); }
.ss-g-card > p:not(.ss-g-card__title) { margin-top: 6px; font-size: 14px; }
.ss-g-card .ss-signup { flex-wrap: wrap; margin-top: 16px; }
.ss-g-card .ss-input,
.ss-g-card .ss-btn { flex: 1 1 100%; }

/* Article typography */
.ss-prose { max-width: 70ch; font-size: 17px; line-height: 1.7; }
.ss-prose h2 { margin: 48px 0 14px; font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--ss-slate); text-wrap: balance; scroll-margin-top: 24px; }
.ss-prose h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 700; color: var(--ss-slate); }
.ss-prose p { margin: 0 0 16px; text-wrap: pretty; }
.ss-prose ul,
.ss-prose ol { margin: 0 0 18px; padding-left: 22px; }
.ss-prose li { margin-bottom: 8px; padding-left: 4px; }
.ss-prose li::marker { color: var(--ss-orange-text); }
.ss-prose strong { color: var(--ss-ink); }
.ss-prose code { padding: 2px 6px; font-size: 15px; color: var(--ss-ink); background: var(--ss-mist); border-radius: 4px; }
.ss-prose blockquote { margin: 0 0 20px; padding: 16px 20px; color: var(--ss-ink); background: var(--ss-mist); border-radius: var(--ss-radius-lg); }
.ss-prose blockquote p:last-child { margin: 0; }
.ss-callout { margin: 8px 0 24px; padding: 18px 20px; font-size: 16px; border: 1px solid var(--ss-wash-2); background: var(--ss-wash); border-radius: var(--ss-radius-lg); }
.ss-callout p:last-child { margin: 0; }

.ss-table-wrap { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--ss-line); border-radius: var(--ss-radius-lg); }
.ss-table-wrap:focus-visible { outline: 2px solid var(--ss-orange); outline-offset: 2px; }
.ss-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.ss-prose th,
.ss-prose td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ss-line); }
.ss-prose thead th { font-size: 13px; color: var(--ss-slate); background: var(--ss-mist); }
.ss-prose tbody th { font-weight: 700; color: var(--ss-slate); }
.ss-prose tbody tr:last-child th,
.ss-prose tbody tr:last-child td { border-bottom: 0; }

/* Hub */
.ss-g-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ss-g-list { grid-template-columns: 1fr 1fr; gap: 20px; } }
.ss-g-item { position: relative; padding: 24px; background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-lg); transition: border-color 150ms var(--ss-ease); }
.ss-g-item:hover { border-color: var(--ss-slate); }
.ss-g-item h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.ss-page .ss-g-item h3 a { color: var(--ss-slate); text-decoration: none; }
.ss-page .ss-g-item h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ss-radius-lg); }
.ss-page .ss-g-item:hover h3 a { color: var(--ss-orange-text); }
.ss-page .ss-g-item h3 a:focus-visible { outline: 0; }
.ss-page .ss-g-item:has(a:focus-visible) { outline: 2px solid var(--ss-orange); outline-offset: 3px; }
.ss-g-item p { margin-top: 8px; font-size: 15px; }
.ss-g-item .ss-g-item__meta { font-size: 13px; color: var(--ss-muted); }
.ss-g-tools__title { margin: 56px 0 20px; }
.ss-g-list--tools .ss-g-item { background: var(--ss-mist); border-color: var(--ss-mist); }
.ss-g-help { margin-top: 32px; font-size: 15px; }
.ss-g-next li { padding: 6px 0; }

@media (prefers-reduced-motion: reduce) {
	.ss-g-item { transition: none; }
}