/* Tool + use-case pages: short copy beside one demo, three one-line steps, FAQ. Builds on site.css tokens. */
.sx-hero { display: grid; gap: 36px; align-items: center; padding-block: 28px 56px; }
@media (min-width: 1024px) { .sx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; padding-block: 48px 88px; } }
.sx-copy { min-width: 0; }
.sx-hero h1 { margin-top: 12px; font-size: 2.5rem; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 1024px) { .sx-hero h1 { font-size: 3.5rem; } }
.sx-hero .lede { margin-top: 18px; max-width: 32rem; font-size: 1.125rem; }
.seo-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.seo-link { font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--text-4); text-underline-offset: 4px; transition: color 150ms var(--ease-out-soft), text-decoration-color 150ms var(--ease-out-soft); }
.seo-link:hover { color: var(--text-1); text-decoration-color: var(--accent); }
.seo-meta { margin-top: 16px; font-size: 13px; color: var(--text-3); }

/* the demo: the homepage tool card, big, with its own glow */
.sx-demo { position: relative; min-width: 0; width: 100%; max-width: 560px; justify-self: center; }
.sx-demo::before { content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 45%, rgba(255, 143, 180, 0.22), transparent 70%); filter: blur(30px); pointer-events: none; }
.sx-demo .sx-card { padding: 6px; border-radius: 28px; pointer-events: none; }
.sx-demo .sx-card:hover { transform: none; }
.sx-demo .tprev { border-radius: 22px; }

.sx-steps { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 768px) { .sx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.sx-steps li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.sx-steps .n { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 999px; border: 1px solid var(--border-accent); color: var(--accent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-steps h3 { font-size: 16px; font-weight: 600; }
.sx-steps p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.sx-steps a, .seo .faq-a a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--text-4); text-underline-offset: 3px; }
.seo .faq { margin-top: 24px; }
/* demo fixes */
/* Clip to carousel: at hero size the tail of the yellow slide's title peeks past the cover as a stray glyph; show the back slides as plain coloured cards. */
.sx-demo .tcard[href$="carousel.html"] .tv-sl:not([style*="--i:0"]) > * { visibility: hidden; }