/* Product showcase (e.g. Core SEO): rich product page with built, animated product views.
   Animations follow the Jellix theme: icons draw themselves, float and pulse; the views come
   alive when they scroll into view (.is-in from the theme's reveal script). */

.sc { --sc-good: var(--mint); --sc-ok: var(--amber); --sc-bad: var(--red); }

/* ---------- Hero ---------- */
.sc-hero { position: relative; overflow: hidden; padding-block: clamp(16px, 2vw, 24px) clamp(28px, 4vw, 56px); } /* top as .page-hero--bar */
.sc-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sc-hero__title { margin: 14px 0 18px; font-family: var(--f-display); font-size: var(--fs-hero); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* "Try the live demo" link next to the buttons, with a pulsing "live" dot */
.sc-hero__actions { display: inline-grid; grid-template-columns: repeat(2, auto); }
.sc-demo { grid-column: 1 / -1; justify-content: center; gap: 10px; }
.sc-demo small { color: var(--muted); font-size: .8rem; font-weight: 500; }
.sc-demo__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.sc-demo__dot::after { position: absolute; inset: 0; border-radius: inherit; background: var(--mint); content: ""; animation: sc-live 1.8s ease-out infinite; }
@keyframes sc-live { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.sc-hero__notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .92rem; }
.sc-hero__notes li::before { margin-right: 8px; color: var(--mint); content: "✓"; }

/* The Google result with pixel meters */
.sc-serp { position: relative; padding: 0 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: rgba(13, 15, 30, .82); box-shadow: var(--shadow-float); backdrop-filter: blur(12px); }
/* Deck: both cards in one grid cell, the back one peeks out above the front one. */
.sc-visual { position: relative; }
/* Black in the video blends away ("screen"): only the glowing screen adds light behind the cards. */
.sc-visual__video { position: absolute; top: 50%; right: -14%; z-index: 0; width: 270%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; mix-blend-mode: screen; transform: translateY(-50%); pointer-events: none;
	-webkit-mask-image: radial-gradient(31% 60% at 68% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(31% 60% at 68% 50%, #000 50%, transparent 100%); }
.sc-hero__grid > :first-child { position: relative; z-index: 2; } /* The text stays above the video. */
.sc-visual > .sc-deck { position: relative; z-index: 1; }
.sc-deck { display: grid; padding-top: 22px; animation: sc-float 7s ease-in-out infinite; }
.sc-deck > .sc-serp { background: #0f1122; grid-area: 1 / 1; align-self: start; transform-origin: 50% 0; transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); }
.sc-deck > .is-front { z-index: 2; transform: none; }
.sc-deck > .is-back { z-index: 1; transform: translateY(-22px) scale(.93); opacity: .55; filter: saturate(.6); }
.sc-deck > .is-leaving { animation: sc-deck-out .95s var(--ease); }
.sc-deck > .is-coming { animation: sc-deck-in .95s var(--ease); }
@keyframes sc-deck-out {
	0% { z-index: 3; transform: none; opacity: 1; filter: none; }
	45% { z-index: 3; transform: translate(-11%, 10px) rotate(-4deg) scale(.97); opacity: 1; }
	55% { z-index: 0; }
	100% { z-index: 0; transform: translateY(-22px) scale(.93); opacity: .55; filter: saturate(.6); }
}
@keyframes sc-deck-in {
	0% { z-index: 1; transform: translateY(-22px) scale(.93); opacity: .55; filter: saturate(.6); }
	100% { z-index: 1; transform: none; opacity: 1; filter: none; }
}
.sc-serp__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.sc-serp__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.sc-serp__bar > span:nth-child(2) { background: var(--amber); }
.sc-serp__bar > span:nth-child(3) { background: var(--green, #37c45b); }
.sc-serp__bar b { margin-left: 10px; color: var(--muted); font-weight: 600; }
.sc-serp__bar em { margin-left: auto; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--muted); font-style: normal; transition: color .3s; }
.sc-serp__result { margin: 16px; padding: 18px 20px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #e8eaed; font-family: Arial, sans-serif; transition: max-width .6s var(--ease); }
.sc-serp.is-mobile .sc-serp__result { max-width: 340px; }
.sc-serp.is-mobile .sc-serp__title { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 18px; }
.sc-serp.is-mobile .sc-serp__desc { -webkit-line-clamp: 3; }
.sc-serp__site { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; line-height: 1.3; }
.sc-serp__site > span:last-child { display: grid; }
.sc-serp__site small { color: #9aa0a6; font-size: 12px; }
.sc-serp__fav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #303134; color: #fff; font-weight: 800; font-size: 13px; }
.sc-serp__title { overflow: hidden; margin: 0 0 4px; color: #99c3ff; font-size: 20px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.sc-serp__desc { display: -webkit-box; overflow: hidden; margin: 0; color: #bdc1c6; font-size: 14px; line-height: 1.58; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sc-meter { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; margin: 10px 16px 0; font-size: .82rem; color: var(--muted); }
.sc-meter i { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.sc-meter i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #2fd6a3); transition: width 1.6s var(--ease) .3s; }
.sc-serp.is-in .sc-meter i b { width: var(--w); }
.sc-meter em { font-style: normal; font-variant-numeric: tabular-nums; }
.sc-serp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 16px 0; }
.sc-chip { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); font-size: .8rem; }
.sc-chip.is-good { border-color: rgba(69, 227, 166, .4); color: var(--mint); }

/* ---------- Sections ---------- */
.sc .sc-section { position: relative; overflow-x: clip; padding-block: clamp(44px, 5.5vw, 84px); }
.sc-section--premium, .sc-section--lift { background: #1e1e2e; border-radius: 32px; transform-origin: 50% 0; will-change: transform; }
.sc .sc-section--tight { padding-block: clamp(16px, 2vw, 28px); }
/* Works-with logos and three facts, between the hero and the free features */
.sc .sc-trust + .sc-section { padding-top: clamp(36px, 4vw, 60px); }
.sc .sc-trust { margin-top: clamp(-40px, -3vw, -12px); padding-block: 0 clamp(8px, 2vw, 16px); }
.sc-trust__label { margin: 0 0 6px; color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.sc-trust .logo-item { opacity: .75; }
.sc-trust .logo-item:hover { opacity: 1; }
.sc-trust .logo-item img.is-wide { height: 30px; }
.sc-trust__name { color: var(--star); font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(20px, 3vw, 36px); }
.sc-stat { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); text-align: center; }
.sc-stat__num { display: inline-block; margin: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sc-stat__label { margin: 6px 0 0; color: var(--muted); }
.sc-grid { position: relative; display: grid; gap: 18px; }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Soft colour blobs that drift slowly behind the free features and the health card, like the Jellix theme. */
.sc-grid--3::before, .sc-grid--3::after, .sc-health::before, .sc-health::after, .sc-chat::before, .sc-chat::after, .sc-writer::before, .sc-writer::after, .sc-crawl::before, .sc-crawl::after { position: absolute; z-index: -1; width: clamp(360px, 46vw, 740px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0, transparent 100%); opacity: .5; translate: -50% -50%; content: ""; pointer-events: none; animation: sc-blob 24s ease-in-out infinite alternate; }
.sc-grid--3::before { --c: rgba(124, 92, 255, .8); left: 16%; top: 30%; }
.sc-grid--3::after { --c: rgba(47, 214, 230, .5); left: 86%; top: 72%; animation-duration: 30s; animation-delay: -9s; }
.sc-health::before { --c: rgba(69, 227, 166, .7); opacity: .7; left: 22%; top: 40%; width: clamp(300px, 34vw, 560px); }
.sc-health::after { --c: rgba(139, 110, 255, .95); opacity: .75; left: 82%; top: 70%; width: clamp(300px, 36vw, 600px); animation-duration: 29s; animation-delay: -7s; }
.sc-chat, .sc-writer, .sc-crawl { position: relative; }
.sc-chat::before { --c: rgba(139, 110, 255, .95); opacity: .75; left: 75%; top: 30%; width: clamp(300px, 34vw, 560px); }
.sc-chat::after { --c: rgba(47, 214, 230, .6); opacity: .6; left: 18%; top: 78%; width: clamp(280px, 30vw, 500px); animation-duration: 31s; animation-delay: -5s; }
.sc-writer::before { --c: rgba(47, 214, 230, .6); opacity: .65; left: 20%; top: 35%; width: clamp(300px, 34vw, 560px); animation-delay: -12s; }
.sc-writer::after { --c: rgba(139, 110, 255, .95); opacity: .7; left: 82%; top: 72%; width: clamp(280px, 32vw, 520px); animation-duration: 27s; animation-delay: -3s; }
/* Smaller glow behind the crawl */
.sc-crawl::before { --c: rgba(69, 227, 166, .6); opacity: .55; left: 78%; top: 30%; width: clamp(200px, 22vw, 360px); animation-delay: -8s; }
.sc-crawl::after { --c: rgba(139, 110, 255, .85); opacity: .55; left: 22%; top: 75%; width: clamp(200px, 22vw, 360px); animation-duration: 30s; animation-delay: -14s; }
/* Premium flows into Compare: Premium fades out at the bottom, Compare fades in at the top, so there is no hard edge between them. */
.sc-section--premium:has(+ .sc-section--lift) { background: linear-gradient(180deg, #1e1e2e 0, #1e1e2e calc(100% - 240px), rgba(30, 30, 46, 0) 100%); border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* Compare slides 240px up over the fade, so one colour cross-fades into the other. */
.sc .sc-section--premium + .sc-section--lift { margin-top: -240px; padding-top: calc(clamp(44px, 5.5vw, 84px) + 240px); background: linear-gradient(180deg, rgba(30, 30, 46, 0) 0, #1e1e2e 240px, #1e1e2e 100%); }
/* A soft blob behind every centred section heading */
.sc .section-head--center { position: relative; }
.sc .section-head--center::before { position: absolute; top: 50%; left: 50%; z-index: -1; width: clamp(320px, 42vw, 640px); aspect-ratio: 1.6; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .55), rgba(47, 214, 230, .12) 60%, transparent 100%); opacity: .6; translate: -50% -50%; content: ""; pointer-events: none; animation: sc-blob 26s ease-in-out infinite alternate; }
@keyframes sc-blob { from { transform: none; } to { transform: translate(4%, 5%) scale(1.14); } }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }

/* Feature cards with icons that draw themselves (Jellix) */
.sc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); transition: border-color .3s, transform .3s var(--ease); }
.sc-card:hover { border-color: rgba(139, 123, 255, .45); transform: translateY(-3px); }
.sc-card h3 { margin: 6px 0 0; font-size: 1.15rem; }
.sc-card p { margin: 0; color: var(--muted); }
.sc-card--small { padding: 22px; }
.sc-card--small h3 { font-size: 1.02rem; }
.sc-card--small p { font-size: .93rem; }
.sc-card__icon { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(139, 123, 255, .14); color: var(--cyan); animation: sc-icon-float 6s ease-in-out infinite; transition: background .3s, color .3s; }
.sc-card__icon::after { position: absolute; inset: 0; border: 1px solid rgba(47, 214, 230, .45); border-radius: inherit; content: ""; opacity: 0; animation: sc-icon-ring 3.6s ease-out infinite; }
.sc-grid > :nth-child(2) .sc-card__icon { animation-delay: -1.2s; }
.sc-grid > :nth-child(3) .sc-card__icon { animation-delay: -2.4s; }
.sc-grid > :nth-child(4) .sc-card__icon { animation-delay: -3.6s; }
.sc-grid > :nth-child(5) .sc-card__icon { animation-delay: -.6s; }
.sc-grid > :nth-child(6) .sc-card__icon { animation-delay: -1.8s; }
.sc-grid > :nth-child(2) .sc-card__icon::after { animation-delay: .9s; }
.sc-grid > :nth-child(3) .sc-card__icon::after { animation-delay: 1.8s; }
.sc-grid > :nth-child(4) .sc-card__icon::after { animation-delay: 2.7s; }
.sc-ico * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js [data-reveal]:not(.is-in) .sc-ico * { stroke-dashoffset: 1; }
[data-reveal].is-in .sc-ico * { animation: sc-draw 1.1s cubic-bezier(.65, 0, .35, 1) .15s backwards; }
.sc-card:hover .sc-ico * { animation: sc-draw .9s cubic-bezier(.65, 0, .35, 1) backwards; }
.sc-card:hover .sc-card__icon { background: var(--grad); color: #fff; }

/* Rows: copy beside a built product view */
.sc-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 96px); }
.sc-row--flip .sc-row__copy { order: 2; }
/* "Your own AI key" note under the assistant copy */
.sc-key { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(69, 227, 166, .3); border-radius: var(--r-md); background: rgba(69, 227, 166, .07); }
.sc-key__icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(69, 227, 166, .16); color: var(--mint); }
.sc-key__icon svg { width: 20px; height: 20px; }
.sc-row__copy .sc-key p { font-size: .94rem; line-height: 1.55; }
.sc-key b { display: block; margin-bottom: 3px; color: var(--star); font-size: 1rem; }
.sc-row__copy h3 { margin: 18px 0 12px; font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.sc-row__copy p { margin: 0; color: var(--muted); font-size: var(--fs-lede); }
.sc-ui { padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(139, 123, 255, .1), rgba(13, 15, 30, .9) 55%); box-shadow: var(--shadow-float); }
.sc-ui button { padding: 5px 13px; border: 1px solid var(--line-strong); border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--star); font: inherit; font-size: .8rem; font-weight: 700; pointer-events: none; }
.sc-ui button.is-primary { border-color: transparent; background: var(--grad) border-box; }
/* One-click fixes: green, so it is clear they can be fixed right away. */
.sc-ui button.is-fix { border-color: transparent; background: var(--mint); color: #062a1d; box-shadow: 0 6px 18px -8px rgba(69, 227, 166, .8); }

/* Health score */
@property --sc-p { syntax: "<number>"; inherits: false; initial-value: 0; }
.sc-health { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px 26px; align-items: center; }
.sc-health__ring { --sc-p: 0; position: relative; display: grid; place-content: center; width: 128px; height: 128px; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--sc-p) * 1%), rgba(255, 255, 255, .08) 0); text-align: center; transition: --sc-p 1.8s var(--ease) .2s; }
.sc-health__ring::before { position: absolute; inset: 11px; border-radius: 50%; background: #10132a; content: ""; }
.sc-health__ring b, .sc-health__ring small { position: relative; line-height: 1; }
.sc-health__ring b { font-family: var(--f-display); font-size: 2.3rem; font-weight: 600; }
.sc-health__ring small { color: var(--muted); font-size: .8rem; }
[data-reveal].is-in .sc-health__ring { --sc-p: 84; }
.sc-health__trend p { display: flex; justify-content: space-between; margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.sc-health__trend em { color: var(--mint); font-style: normal; font-weight: 700; }
.sc-health__trend svg { display: block; width: 100%; height: 70px; }
.sc-health__trend path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) .4s; vector-effect: non-scaling-stroke; }
[data-reveal].is-in .sc-health__trend path { stroke-dashoffset: 0; }
.sc-tasks { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-tasks li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); font-size: .92rem; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.sc-tasks li button { margin-left: auto; }
[data-reveal].is-in .sc-tasks li { opacity: 1; transform: none; }
[data-reveal].is-in .sc-tasks li:nth-child(1) { transition-delay: .9s; }
[data-reveal].is-in .sc-tasks li:nth-child(2) { transition-delay: 1.1s; }
[data-reveal].is-in .sc-tasks li:nth-child(3) { transition-delay: 1.3s; }
.sc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-good); animation: sc-pulse 2.4s ease-in-out infinite; }
.sc-dot.is-ok { background: var(--sc-ok); }
.sc-dot.is-bad { background: var(--sc-bad); }

/* Assistant chat */
.sc-chat { display: grid; gap: 12px; }
.sc-chat__msg { max-width: 86%; margin: 0; padding: 11px 15px; border-radius: 16px; font-size: .94rem; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease); }
.sc-chat__msg.is-user { justify-self: end; border-bottom-right-radius: 5px; background: var(--grad); color: #fff; }
.sc-chat__msg.is-ai { border-bottom-left-radius: 5px; background: rgba(255, 255, 255, .07); }
.sc-chat__card { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(139, 123, 255, .4); border-radius: var(--r-md); background: rgba(139, 123, 255, .08); font-size: .9rem; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease); }
.sc-chat__card p { display: grid; grid-template-columns: 58px 1fr; gap: 10px; margin: 0; }
.sc-chat__card p span { color: var(--faint); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sc-chat__card del { color: var(--faint); }
.sc-chat__card ins { color: var(--mint); text-decoration: none; }
.sc-chat__card div { display: flex; gap: 8px; }
[data-reveal].is-in .sc-chat__msg, [data-reveal].is-in .sc-chat__card { opacity: 1; transform: none; }
[data-reveal].is-in .sc-chat__msg.is-ai { transition-delay: .9s; }
[data-reveal].is-in .sc-chat__card { transition-delay: 1.6s; }

/* AI writer */
.sc-writer__head { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: .92rem; }
.sc-writer__head em { color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.sc-writer__bar { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(139, 123, 255, .16); }
.sc-writer__bar b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, var(--cyan)); transition: width 2.6s cubic-bezier(.45, 0, .2, 1) .3s; }
[data-reveal].is-in .sc-writer__bar b { width: 100%; }
.sc-writer ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.sc-writer li { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); font-size: .88rem; opacity: 0; transition: opacity .5s; }
.sc-writer li span { color: var(--muted); }
[data-reveal].is-in .sc-writer li { opacity: 1; }
[data-reveal].is-in .sc-writer li:nth-child(1) { transition-delay: 1s; }
[data-reveal].is-in .sc-writer li:nth-child(2) { transition-delay: 1.7s; }
[data-reveal].is-in .sc-writer li:nth-child(3) { transition-delay: 2.4s; }
.sc-writer__done { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 181, 71, .12); color: var(--amber); font-size: .88rem; font-weight: 700; opacity: 0; transition: opacity .5s 3s; }
[data-reveal].is-in .sc-writer__done { opacity: 1; }

/* Site crawl */
.sc-crawl__head { display: flex; gap: 28px; margin: 0 0 14px; color: var(--muted); }
.sc-crawl__head b { color: var(--star); font-family: var(--f-display); font-size: 1.5rem; }
.sc-crawl ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-crawl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); font-size: .86rem; opacity: 0; transform: translateX(14px); transition: opacity .45s, transform .45s var(--ease); }
.sc-crawl li code { overflow: hidden; color: var(--star); text-overflow: ellipsis; white-space: nowrap; }
.sc-crawl li em { color: var(--muted); font-style: normal; }
[data-reveal].is-in .sc-crawl li { opacity: 1; transform: none; }
[data-reveal].is-in .sc-crawl li:nth-child(2) { transition-delay: .2s; }
[data-reveal].is-in .sc-crawl li:nth-child(3) { transition-delay: .4s; }
[data-reveal].is-in .sc-crawl li:nth-child(4) { transition-delay: .6s; }
.sc-code { padding: 2px 8px; border-radius: 6px; background: rgba(69, 227, 166, .14); color: var(--mint); font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-code.is-ok { background: rgba(255, 181, 71, .14); color: var(--amber); }
.sc-code.is-bad { background: rgba(254, 91, 96, .14); color: var(--red); }

/* Compare */
.sc-compare { max-width: 880px; margin-inline: auto; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.sc-compare table { width: 100%; border-collapse: collapse; }
.sc-compare th, .sc-compare td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.sc-compare th:first-child, .sc-compare td:first-child { text-align: left; }
.sc-compare tbody tr:last-child td { border-bottom: 0; }
.sc-compare th { font-family: var(--f-display); font-size: 1.05rem; }
/* The Compare heading has no glow; the table gets it instead (the table itself scrolls, so the glow sits on a wrapper). */
#compare .section-head--center::before { display: none; }
.sc-compare-wrap { position: relative; }
.sc-compare-wrap::before, .sc-compare-wrap::after { position: absolute; z-index: -1; width: clamp(340px, 44vw, 700px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0, transparent 100%); translate: -50% -50%; content: ""; pointer-events: none; animation: sc-blob 26s ease-in-out infinite alternate; }
.sc-compare-wrap::before { --c: rgba(139, 110, 255, .95); opacity: .6; left: 72%; top: 28%; }
.sc-compare-wrap::after { --c: rgba(47, 214, 230, .6); opacity: .5; left: 26%; top: 74%; animation-duration: 31s; animation-delay: -10s; }
.sc-compare thead th:first-child { color: var(--muted); font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: bottom; }
.sc-compare th small { display: block; color: var(--muted); font-family: var(--f-body); font-size: .82rem; font-weight: 500; }
.sc-compare .is-premium { background: rgba(139, 123, 255, .08); }
.sc-yes { color: var(--mint); font-weight: 800; }
.sc-no { color: var(--faint); }

/* Plans */
.sc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.sc-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.sc-plan.is-featured { border-color: rgba(139, 123, 255, .6); background: radial-gradient(120% 60% at 50% 0%, rgba(139, 123, 255, .25), transparent 70%), var(--panel); box-shadow: 0 40px 80px -40px rgba(139, 123, 255, .6); }
.sc-plan h3 { margin: 0; font-size: 1.3rem; }
.sc-plan > p:not(.sc-plan__price):not(.plan__flag) { flex: 1; margin: 0; color: var(--muted); }
.sc-plan__price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.sc-plan__price b { font-family: var(--f-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.sc-plan__price span { color: var(--muted); }

/* Changelog + closing band */
/* Switching from Yoast or Rank Math */
.sc-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 880px; margin: 28px auto 0; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(90% 120% at 0% 0%, rgba(47, 214, 230, .1), transparent 60%), var(--panel); }
.sc-switch__head h3 { margin: 16px 0 8px; font-size: 1.3rem; }
.sc-switch__head p { margin: 0; color: var(--muted); }
.sc-switch__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; padding: 0; list-style: none; }
.sc-switch__list li { position: relative; padding-left: 30px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.sc-switch__list li::before { position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(69, 227, 166, .16); color: var(--mint); font-size: .72rem; font-weight: 800; content: "✓"; }
.sc-switch__list b { display: block; margin-bottom: 2px; color: var(--star); font-size: .98rem; }

/* Changelog: a timeline of releases, the newest first */
.sc-changelog { max-width: 880px; margin-inline: auto; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.sc-changelog h2 { margin: 0 0 20px; }
.sc-log { margin: 0; padding: 0; list-style: none; }
.sc-log__item { position: relative; padding: 0 0 22px 28px; }
.sc-log__item:last-child { padding-bottom: 0; }
.sc-log__item::before { position: absolute; top: 6px; left: 0; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--panel); content: ""; }
.sc-log__item.is-latest::before { border-color: transparent; background: var(--mint); box-shadow: 0 0 0 4px rgba(69, 227, 166, .18); }
.sc-log__item:not(:last-child)::after { position: absolute; top: 22px; bottom: 4px; left: 5px; width: 2px; background: var(--line); content: ""; }
.sc-log__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; color: var(--muted); font-size: .88rem; }
.sc-log__ver { padding: 2px 10px; border-radius: 99px; background: var(--grad); color: #fff; font-family: var(--f-display); font-size: .85rem; font-weight: 700; }
.sc-log__new { padding: 2px 9px; border-radius: 99px; background: rgba(69, 227, 166, .14); color: var(--mint); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Newest version only: download the latest free plugin, Premium from the account */
.sc-log__item.is-latest { padding-right: 230px; }
.sc-log__get { position: absolute; top: -4px; right: 0; display: grid; gap: 8px; justify-items: end; }
.sc-log__account { color: var(--muted); font-size: .82rem; }
.sc-log__account:hover { color: var(--star); }
.sc-log__text { margin: 10px 0 0; color: var(--star); font-weight: 600; }
.sc-log__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sc-log__chips li { padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: .84rem; }
.sc .sc-band { padding-block: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 96px); }
.sc-band__inner { max-width: 860px; margin-inline: auto; padding: clamp(36px, 5vw, 64px); border: 1px solid rgba(139, 123, 255, .35); border-radius: var(--r-xl); background: radial-gradient(90% 120% at 50% 0%, rgba(139, 123, 255, .28), transparent 70%), var(--panel); text-align: center; }
.sc-band__docs { margin: 22px 0 0; }
.sc-band__docs a { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; text-decoration: none; }
.sc-band__docs a:hover { color: var(--star); }
.sc-band__inner .lede { max-width: 640px; margin-inline: auto; }
.sc-band__inner .h2 { margin-bottom: 18px; }
.sc-band__sub { display: block; margin-top: 12px; color: var(--muted); font-family: var(--f-body); font-size: .5em; font-weight: 400; letter-spacing: 0; }
.sc-band__inner .lede { font-size: 1.12rem; }
.sc-band__inner .sc-hero__actions { justify-content: center; }

/* ---------- Motion ---------- */
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-icon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes sc-icon-ring { 0% { scale: .85; opacity: .55; } 100% { scale: 1.55; opacity: 0; } }
@keyframes sc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sc-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
	.sc *, .sc *::after { animation: none !important; transition: none !important; }
	.sc .sc-ico *, .sc .sc-health__trend path { stroke-dashoffset: 0 !important; }
	.sc .sc-meter i b { width: var(--w); }
	.sc .sc-health__ring { --sc-p: 84; }
	.sc .sc-tasks li, .sc .sc-chat__msg, .sc .sc-chat__card, .sc .sc-writer li, .sc .sc-writer__done, .sc .sc-crawl li { opacity: 1; transform: none; }
	.sc .sc-writer__bar b { width: 100%; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
	.sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.sc-hero__grid, .sc-row { grid-template-columns: minmax(0, 1fr); }
	.sc-row--flip .sc-row__copy { order: 0; }
	.sc-grid--3, .sc-plans { grid-template-columns: minmax(0, 1fr); }
	.sc-plans { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 600px) {
	.sc-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.sc-health { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.sc-meter { grid-template-columns: 74px 1fr; }
	.sc-meter em { display: none; }
	.sc-crawl li { grid-template-columns: auto minmax(0, 1fr); }
	.sc-crawl li em { grid-column: 2; }
	.sc-compare th, .sc-compare td { padding: 12px; font-size: .9rem; }
	.sc-switch, .sc-switch__list { grid-template-columns: 1fr; }
	.sc-visual__video { display: none; } /* Phones: no video, saves data. */
	.sc-log__item.is-latest { padding-right: 0; }
	.sc-log__get { position: static; justify-items: start; margin: 14px 0 0; }
	.sc-hero__actions { display: grid; grid-template-columns: 1fr; }
	.sc-stats { gap: 8px; }
	.sc-stat { padding: 16px 8px; }
	.sc-stat__num { font-size: 1.5rem; }
	.sc-stat__label { font-size: .78rem; line-height: 1.35; }
	.sc-band__inner .lede br { display: none; }
}

/* ---------- JobCore showcase ---------- */

/* Screenshots as the hero's card deck */
.sc-shot { padding-bottom: 12px; }
.sc-shot img { display: block; width: calc(100% - 24px); height: auto; margin: 12px 12px 0; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: #fff; }

/* "See it in action": the theme's gallery (lightbox), with captions under the thumbnails */
.sc-gallery { max-width: 1120px; margin-inline: auto; }
.sc-gallery .gallery__stage img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.sc-gallery .gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; overflow: visible; }
.sc-gallery .gallery__thumb { opacity: 1; display: grid; gap: 8px; width: auto; height: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--muted); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.sc-gallery .gallery__thumb img { width: 100%; height: auto; border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.sc-gallery .gallery__thumb.is-on, .sc-gallery .gallery__thumb:hover { border-color: rgba(139, 123, 255, .6); background: rgba(139, 123, 255, .1); color: var(--star); }
.sc-gallery__cap { font-size: .84rem; line-height: 1.35; }

/* Add-ons: seven cards and the bundle */
.sc-addons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sc-addon { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
.sc-addon:hover { transform: translateY(-3px); border-color: rgba(139, 123, 255, .5); }
.sc-addon p { flex: 1; }
.sc-addon__foot { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.sc-addon__foot b { color: var(--star); font-family: var(--f-display); font-size: 1.25rem; }
.sc-addon__foot em { margin-left: auto; color: var(--cyan); font-style: normal; font-weight: 600; }
.sc-addons__all { justify-content: space-between; }
.sc-switch__list a { color: var(--cyan); }
@media (max-width: 1100px) { .sc-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.sc-addons { grid-template-columns: minmax(0, 1fr); }
	.sc-gallery .gallery__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* News.: the design picker (a tab per design, the screenshot, its text and the demo link) */
.sc-styles { max-width: 1120px; margin-inline: auto; }
.sc-styles__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.sc-styles__tab { padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .03); color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sc-styles__tab:hover { border-color: rgba(139, 123, 255, .5); color: var(--star); }
.sc-styles__tab.is-on { border-color: transparent; background: var(--grad); color: #fff; }
.sc-styles__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sc-styles__stage { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.sc-styles__stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: #fff; transition: opacity .25s; }
.sc-styles__stage img.is-loading { opacity: .35; }
.sc-styles__cap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--line); }
.sc-styles__cap p { flex: 1 1 320px; margin: 0; color: var(--muted); }
.sc-styles__cap b { margin-right: 6px; color: var(--star); }
.sc-switch + .sc-switch { margin-top: 20px; }
@media (max-width: 600px) {
	/* Phones: the tabs scroll sideways in one row. */
	.sc-styles__tabs { flex-wrap: nowrap; justify-content: flex-start; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
	.sc-styles__tabs::-webkit-scrollbar { display: none; }
	.sc-styles__tab { flex: none; }
	.sc-styles__cap { padding: 14px 16px; }
	.sc-styles__cap .btn { width: 100%; justify-content: center; }
}