/*
Theme Name: SEOSage Child
Template: generatepress
Description: SEOSage site pages. Light, framed layout with a tabbed product showcase.
Version: 3.261.0
*/

@font-face { font-family: "Caveat"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/caveat-600.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/selawik-400.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/selawik-600.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/selawik-700.woff2") format("woff2"); }

:root {
	--accent: #05A5FE;
	--accent-text: #0069AD;
	--ink: #171717;
	--ink-hover: #3A3A3A;
	--bg: #FFFFFF;
	--soft: #F6F6F7;
	--card: #FFFFFF;
	--hover: #F1F1F3;
	--line: #E7E7EA;
	--text: #171717;
	--text-2: #626268;
	--error: #dc2626;
	--warning: #B36B00;
	--ok: #15803d;
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(0, 0, 0, .10);
	--shadow-lg: 0 2px 4px rgba(0, 0, 0, .04), 0 30px 60px -20px rgba(0, 0, 0, .22);
	--ui: "Selawik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
}

/* GeneratePress frame: remove its boxes so sections run full width */
body.ss-page {
	background: var(--bg);
	color: var(--text);
	font-family: var(--ui);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.ss-page .grid-container { max-width: none; }
body.ss-page .site-content { display: block; }
body.ss-page .content-area { width: 100%; }
body.ss-page .site-main { margin: 0; }
body.ss-page a { color: var(--accent-text); }

/* GeneratePress's own header and footer are hidden when ours (parts/header.php, parts/footer.php) is on the page */
body.ss-page:has(.ss-hdr) .site-header,
body.ss-page:has(.ss-hdr) #site-navigation,
body.ss-page:has(.ss-ftr) .site-footer { display: none; }
/* Only one skip link: ours (.ss-skip) replaces GeneratePress's */
body.ss-page:has(.ss-skip) .skip-link { display: none; }
html { scroll-padding-top: 76px; }

/* Header: logo left, links centred, one black button right (like the Dub page) */
.ss-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff !important; padding: 10px 14px; border-radius: var(--r-sm); }
.ss-skip:focus { left: 8px; }
.ss-hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ss-hdr-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ss-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) !important; }
.ss-mark { width: 30px; height: 30px; border-radius: 8px; background: #171717 url("img/icon-180.png") center / cover no-repeat; color: transparent; display: grid; place-items: center; font-weight: 600; font-size: 16px; line-height: 1; }
.ss-word { font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
.ss-nav { display: contents; }
.ss-links { display: flex; gap: 2px; grid-column: 2; }
.ss-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.ss-links a:hover, .ss-links a[aria-current="page"] { background: var(--hover); }
.ss-acts { grid-column: 3; justify-self: end; }
.ss-btn.ss-btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.ss-burger { display: none; }
@media (min-width: 901px) { #ss-nav-toggle { display: none; } }
.ss-links a:focus-visible, .ss-brand:focus-visible, .ss-ftr a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Footer: brand column, then link columns with small coloured icons (like the Dub page) */
.ss-ftr { background: var(--bg); border-top: 1px solid var(--line); }
.ss-in.ss-ftr-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 48px; }
.ss-ftr-brand p { margin: 16px 0 20px; color: var(--text-2); font-size: 14px; max-width: 26em; }
.ss-ftr-col h2, .ss-ftr-col h3 { font-family: var(--ui); font-size: 13px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.ss-ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-ftr-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--text-2) !important; font-size: 14px; text-decoration: none; transition: color .15s; }
.ss-ftr-col a:hover { color: var(--ink) !important; }
.ss-ftr-col i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.ss-ftr-col i svg { width: 12px; height: 12px; }
.ss-in.ss-ftr-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; padding-left: 24px; padding-right: 24px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }

@media (max-width: 900px) {
	.ss-hdr-in { grid-template-columns: 1fr auto; grid-template-rows: 64px auto; height: auto; }
	.ss-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; align-items: center; cursor: pointer; border-radius: var(--r-sm); }
	.ss-burger i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); }
	.ss-burger:hover { background: var(--hover); }
	#ss-nav-toggle:focus-visible + .ss-burger { outline: 2px solid var(--accent-text); outline-offset: 2px; }
	.ss-nav { display: none; grid-column: 1 / -1; padding: 8px 0 16px; border-top: 1px solid var(--line); max-height: calc(100vh - 80px); overflow-y: auto; }
	#ss-nav-toggle:checked ~ .ss-nav { display: block; }
	.ss-links { flex-direction: column; gap: 0; }
	.ss-links a { height: 48px; padding: 0 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--line); }
	.ss-acts { margin-top: 16px; justify-self: stretch; }
	.ss-acts .ss-btn { width: 100%; min-height: 44px; }
	.ss-in.ss-ftr-in { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
	.ss-ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.ss-in.ss-ftr-in { grid-template-columns: 1fr; }
	.ss-ftr-col ul { gap: 0; }
	.ss-ftr-col a { min-height: 40px; }
}

/* Framed layout: thin vertical lines on both sides, thin lines between sections */
.ss-main > section { border-bottom: 1px solid var(--line); }
.ss-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ss-narrow > * { max-width: 720px; }
.ss-section > .ss-in { padding-top: 88px; padding-bottom: 88px; }
.ss-soft { background: var(--soft); }

/* Hero with faint grid */
.ss-hero { padding: 0; position: relative; }
.ss-hero .ss-in { position: relative; text-align: center; padding-top: 72px; padding-bottom: 72px; }
.ss-hero .ss-in::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 75%);
	opacity: .7;
}
.ss-hero .ss-in > * { position: relative; z-index: 1; }
.ss-hero-simple .ss-in { text-align: left; padding-top: 64px; padding-bottom: 40px; }

/* Announcement pill */
.ss-announce { display: inline-flex; align-items: stretch; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; overflow: hidden; }
.ss-announce span { padding: 6px 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ss-announce a { white-space: nowrap; padding: 6px 14px; border-left: 1px solid var(--line); color: var(--text-2); text-decoration: none; background: var(--soft); }
.ss-announce a:hover { color: var(--ink); background: var(--hover); }

/* Type */
.ss-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; }
.ss-main h1 { font-family: var(--ui); font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.06; letter-spacing: -0.04em; font-weight: 400; margin: 0 auto 20px; max-width: 15em; color: var(--ink); text-wrap: balance; }
.ss-hero-simple h1 { margin-left: 0; max-width: none; }
.ss-main h2 { font-family: var(--ui); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 400; margin: 0 0 12px; color: var(--ink); text-wrap: balance; }
.ss-main h3 { font-family: var(--ui); font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.ss-lead { font-size: 1.2rem; color: var(--text-2); max-width: 34em; margin: 0 auto 32px; }
.ss-hero-simple .ss-lead { margin-left: 0; }
.ss-sub { color: var(--text-2); max-width: 36em; margin: 0 0 32px; font-size: 1.05rem; }
.ss-muted { color: var(--text-2); font-size: 0.9rem; }
.ss-note { color: var(--text-2); font-size: 0.9rem; margin: 16px 0 0; }

/* Buttons: colour changes only. They never move or resize. */
.ss-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; justify-content: center; }
.ss-hero-simple .ss-actions { justify-content: flex-start; }
.ss-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	box-sizing: border-box; min-height: 44px; padding: 0 22px; border-radius: var(--r-sm);
	background: var(--ink); color: #fff !important;
	font-family: var(--ui); font-weight: 600; font-size: 15px; text-decoration: none;
	border: 1px solid var(--ink); transition: background-color .15s, border-color .15s;
}
.ss-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ss-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.ss-btn:focus-visible, .ss-faq summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-btn-quiet { background: var(--card); color: var(--ink) !important; border-color: var(--line); box-shadow: var(--shadow); }
.ss-btn-quiet:hover { background: var(--hover); border-color: #CFCFD4; }

/* Cards */
.ss-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 28px; box-shadow: none; }
.ss-tile p { margin: 0; color: var(--text-2); }
.ss-tile ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
.ss-tile li { margin: 4px 0; }
.ss-ico { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); margin-bottom: 16px; display: block; box-sizing: border-box; }
.ss-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ss-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .ss-grid-2 { grid-template-columns: 1fr; } }

/* Cells: a grid with hairlines between items */
.ss-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); gap: 1px; }
.ss-cells > * { background: var(--card); padding: 28px; }
.ss-cells p { margin: 0; color: var(--text-2); }

/* Pills: colour always means the same thing */
.ss-pill { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.ss-bad { color: var(--error); background: color-mix(in srgb, var(--error) 10%, #fff); border-color: color-mix(in srgb, var(--error) 28%, transparent); }
.ss-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 11%, #fff); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.ss-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, #fff); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.ss-idle { color: var(--text-2); background: var(--soft); border-color: var(--line); }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ss-chip svg { width: 14px; height: 14px; color: var(--accent-text); }

/* Showcase: tabs (no JavaScript) + product window */
.ss-showcase .ss-in { padding-top: 40px; padding-bottom: 72px; }
.ss-sr { position: absolute; opacity: 0; pointer-events: none; }
.ss-tabbar { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.ss-tabbar label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--soft); color: var(--text-2); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ss-tabbar label:hover { color: var(--ink); background: var(--hover); }
.ss-tabbar label i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; }
#ss-t1:checked ~ .ss-tabbar label[for="ss-t1"],
#ss-t2:checked ~ .ss-tabbar label[for="ss-t2"],
#ss-t3:checked ~ .ss-tabbar label[for="ss-t3"] { background: var(--card); color: var(--ink); border-color: #CFCFD4; box-shadow: var(--shadow); }
#ss-t1:focus-visible ~ .ss-tabbar label[for="ss-t1"],
#ss-t2:focus-visible ~ .ss-tabbar label[for="ss-t2"],
#ss-t3:focus-visible ~ .ss-tabbar label[for="ss-t3"] { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-shots { height: 660px; overflow-y: auto; }
.ss-tp { display: none; }
#ss-t1:checked ~ .ss-win .ss-tp1,
#ss-t2:checked ~ .ss-win .ss-tp2,
#ss-t3:checked ~ .ss-win .ss-tp3 { display: block; }
.ss-tryit { text-align: center; color: var(--text-2); font-size: 14px; margin: -8px 0 18px; }

.ss-win { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.ss-win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.ss-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D4D8; }
.ss-win-bar span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ss-win-img { display: block; width: 100%; height: auto; }
/* White-label pages: real screenshots and exports */
.ss-win-hint { display: none; margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-2); }
/* Phones: keep the app screens at a readable size and let them scroll sideways, and give small text links a bigger tap area */
@media (max-width: 640px) {
	.ss-win-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ss-win-wide .ss-win-bar { position: sticky; left: 0; }
	.ss-win-wide .ss-win-img { width: 900px; max-width: none; }
	.ss-win-wide .ss-win-hint { display: block; }
	.ft-hero .ss-note a, .ss-tile h3 a { display: inline-block; padding: 5px 0; }
}
.wl-fig { margin: 0; }
.wl-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); background: #fff; }
.wl-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.wl-cols { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.wl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-tag { display: inline-block; margin-bottom: 10px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--text-2); font-size: 13px; font-weight: 600; }
.wl-tag-us { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ss-in .wl-mt { margin-top: 44px; }
@media (max-width: 820px) { .wl-cols, .wl-cols-3 { grid-template-columns: 1fr; } }
.ss-bar { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.ss-bar i { display: block; height: 100%; border-radius: 3px; }

/* Manifesto */
.ss-manifesto .ss-in { position: relative; text-align: center; padding-top: 96px; padding-bottom: 96px; overflow: hidden; background-image: radial-gradient(#D9D9DE 1px, transparent 1px); background-size: 14px 14px; }
.ss-manifesto p { position: relative; z-index: 1; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); max-width: 20em; margin: 0 auto 1em; }
.ss-manifesto p:last-child { margin-bottom: 0; }
.ss-inline { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 6px; vertical-align: -0.12em; margin: 0 .1em; color: #fff; }
.ss-inline svg { width: .7em; height: .7em; }
.ss-float { position: absolute; z-index: 0; width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 12px; text-align: left; }
.ss-float strong { display: block; font-size: 13px; }
.ss-float .ss-bar { margin-top: 8px; }
.ss-f1 { left: 2%; top: 22%; transform: rotate(-5deg); }
.ss-f2 { left: 6%; bottom: 14%; transform: rotate(3deg); }
.ss-f3 { right: 2%; top: 18%; transform: rotate(4deg); }
.ss-f4 { right: 6%; bottom: 16%; transform: rotate(-3deg); }
@media (max-width: 1240px) { .ss-float { display: none; } }

/* Feature rows: label, heading, text, product stage */
.ss-feature .ss-in { padding-top: 72px; padding-bottom: 72px; }

/* Home page video: poster first, no autoplay */
.ss-video .ss-in { padding-top: 24px; padding-bottom: 72px; text-align: center; }
.ss-video h2 { margin: 0 0 28px; }
.ss-video-frame { max-width: 960px; margin: 0 auto; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: clamp(8px, 1.6vw, 14px); box-shadow: var(--shadow-lg); }
.ss-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #EEEEF1; }
.ss-video-tx { max-width: 960px; margin: 18px auto 0; text-align: left; color: var(--text-2); font-size: 0.95rem; }
.ss-video-tx summary { cursor: pointer; display: inline-block; padding: 6px 2px; color: var(--text-2); }
.ss-video-tx summary { position: relative; }
.ss-video-tx summary::after { content: ""; position: absolute; inset: -4px 0; }
.ss-video-tx summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.ss-video-tx p { margin: 8px 0 0; max-width: 46em; }
.ss-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.ss-tag i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.ss-tag svg { width: 13px; height: 13px; }
.ss-more { display: inline-block; margin-top: -8px; font-weight: 600; text-decoration: none; }
.ss-more::after { content: " \2192"; }
.ss-stage { margin-top: 48px; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 5vw, 56px); }
.ss-stage .ss-win { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* Steps: a real sequence, so numbers are honest */
.ss-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; }
.ss-steps li { counter-increment: step; background: var(--card); padding: 28px; }
.ss-steps li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.ss-steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.ss-steps span { color: var(--text-2); }

/* Comparison */
.ss-compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ss-compare .ss-tile.ss-us { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.ss-compare h3 span { color: var(--text-2); font-weight: 400; }

/* FAQ: native details, no JavaScript */
.ss-faq { display: grid; gap: 10px; max-width: 760px; margin-left: auto; margin-right: auto; }
#faq h2 { text-align: center; }
.ss-faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px; }
.ss-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after { content: "+"; font-family: var(--mono); color: var(--text-2); }
.ss-faq details[open] summary::after { content: "\2212"; }
.ss-faq details p { margin: 0 0 16px; color: var(--text-2); }

.ss-final .ss-in { text-align: center; padding-top: 96px; padding-bottom: 96px; position: relative; }
.ss-final .ss-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 70%); opacity: .7; }
.ss-final .ss-in > * { position: relative; }
.ss-final .ss-sub { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
	.ss-btn, .ss-tabbar label { transition: none; }
}

/* App look: HTML copies of SEOSage screens (flat cards, thin borders, black main button) */
.ap { --a-line: #e4e4e7; --a-mut: #686872; --a-err: #c62d33; --a-warn: #a84a07; --a-info: #0a6ebd; --a-ok: #15803d; --a-ink: #18181b;
	padding: 22px 24px 26px; font-size: 13px; line-height: 1.4; color: var(--a-ink); text-align: left; background: #fff; }
.ap .ap { padding: 0; }
.ap-i { width: 16px; height: 16px; flex-shrink: 0; }
.ap-e { color: var(--a-err); } .ap-w { color: var(--a-warn); } .ap-b { color: var(--a-info); }
.ap-okc { color: var(--a-ok); }
.ap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ap-ht { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; gap: 1px; }
.ap-ht strong { font-weight: 400; font-size: 15px; }
.ap-ht span { color: var(--a-mut); font-size: 13px; }
.ap-big { display: flex; align-items: center; gap: 8px; font-size: 16px !important; }
.ap-logo { width: 40px; height: 40px; border-radius: 10px; background: #f4f4f5; display: grid; place-items: center; font-weight: 700; font-style: italic; color: #2E8CF0; font-size: 18px; flex-shrink: 0; }
.ap-logo img { display: block; border-radius: 3px; }
.ap-logo.sm { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.ap-red { background: #FDECEA; }
.ap-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0.5px solid var(--a-line); border-radius: 8px; background: #fff; font-size: 13px; white-space: nowrap; }
.ap-btn .ap-i { width: 14px; height: 14px; }
.ap-pri { background: #18181b; border-color: #18181b; color: #f4f4f5; }
.ap-sel { background: #f4f4f5; }
.ap-cards2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; margin-bottom: 20px; }
.ap-cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ap-cards5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.ap-cards6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ap-card { border: 0.5px solid var(--a-line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.ap-lab { display: inline-flex; align-items: center; gap: 6px; color: var(--a-mut); font-size: 12px; }
.ap-num { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ap-sub { color: var(--a-mut); font-size: 12px; }
.ap-p { color: var(--a-mut); }
.ap-ul { margin: 6px 0 0; padding: 0; list-style: none; color: var(--ink); }
.ap-ul li { margin: 3px 0; padding-left: 20px; position: relative; }
.ap-ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--a-info); }
.ap-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ap-chips span, .ap-chips button { display: inline-flex; gap: 6px; height: 31px; align-items: center; padding: 0 12px; border: 0.5px solid var(--a-line); border-radius: 8px; color: var(--a-mut); font-size: 12px; background: #fff; font-family: inherit; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ap-chips button:hover { background: #f4f4f5; }
.ap-chips span.on, .ap-chips button.on { background: #18181b; border-color: #18181b; color: #f4f4f5; }
.ap-chips i { font-style: normal; opacity: .7; }
.ap-list { border: 0.5px solid var(--a-line); border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
.ap-lh { display: flex; justify-content: space-between; padding: 11px 16px; color: var(--a-mut); font-size: 12px; border-bottom: 0.5px solid var(--a-line); }
.ap-grp { padding: 9px 16px; color: var(--a-mut); font-size: 12px; border-bottom: 0.5px solid var(--a-line); }
.ap-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--a-line); }
.ap-row:last-child { border-bottom: 0; }
.ap-ri { display: grid; place-items: center; }
.ap-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-rt strong { font-weight: 400; font-size: 13px; }
.ap-rt span { color: var(--a-mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-n { font-weight: 400; font-size: 14px; font-variant-numeric: tabular-nums; }
.ap-n em { font-style: normal; color: var(--a-mut); font-size: 11px; margin-left: 8px; }
.ap-arr { color: var(--a-mut); }
.ap-scroll { overflow-x: auto; border: 0.5px solid var(--a-line); border-radius: 10px; }
.ap-table, .ap-table th, .ap-table td { border: 0; }
.ap-table { width: 100%; margin: 0; border-collapse: collapse; min-width: 640px; }
.ap-table th { text-align: left; font-weight: 400; font-size: 12px; color: var(--a-mut); background: #f6f6f7; padding: 10px 14px; border-bottom: 0.5px solid var(--a-line); white-space: nowrap; }
.ap-table td { padding: 10px 14px; border-top: 0.5px solid var(--a-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-table tr:nth-child(2) td { border-top: 0; }
.ap-table td:first-child { max-width: 260px; }
.ap-table td strong, .ap-table td span.ap-u { max-width: 250px; }
.ap-td th, .ap-td td { padding: 10px 8px; }
.ap-td { min-width: 0; }
.ap-table td strong { display: block; font-weight: 400; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ap-table td span { display: block; color: var(--a-mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.ap-pill { font-weight: 400; font-size: 12px; padding: 1px 8px; border-radius: 6px; }
.ap-g { color: #137334; background: #e8f5ec; } .ap-r { color: var(--a-err); background: #fdecec; }
.ap-tag { font-weight: 400; font-size: 12px; padding: 1px 7px; border-radius: 6px; background: #f4f4f5; color: var(--a-mut); }
.ap-ring { --v: 53; --c: var(--a-warn); width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), #ececee 0); }
.ap-ring b { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 400; color: var(--c); }
.ap-ring.md { width: 84px; height: 84px; } .ap-ring.md b { width: 70px; height: 70px; font-size: 26px; }
.ap-hero { display: flex; align-items: center; gap: 22px; border: 0.5px solid var(--a-line); border-radius: 10px; padding: 20px 24px; margin-bottom: 16px; }
.ap-lab2 { color: var(--a-mut); margin: 6px 0 10px; }
.ap-back { color: var(--a-mut); margin-bottom: 8px; }
.ap-proj { border: 0.5px solid var(--a-line); border-radius: 10px; overflow: hidden; margin: 22px 24px; background: #fff; }
.ap-ph { display: flex; align-items: center; gap: 12px; padding: 16px 20px 6px; flex-wrap: wrap; }
.ap-act { color: var(--a-mut); font-size: 13px; }
.ap-pb { display: grid; gap: 18px; padding: 10px 20px 20px; }
.ap-hs { display: flex; align-items: center; gap: 16px; }
.ap-chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ap-chip2 { padding: 4px 10px; border-radius: 8px; background: #f4f4f5; color: var(--a-mut); font-size: 12px; }
.ap-chip2 b { font-weight: 400; color: var(--a-ink); } .ap-chip2 b.ap-e { color: var(--a-err); }
@media (max-width: 720px) {
	.ap { padding: 16px; }
	.ap-hero { flex-direction: column; align-items: flex-start; }
}

/* Clickable parts of the app screens: colour changes only, nothing moves or resizes */
.ap [hidden] { display: none !important; }
.ap button { font-family: inherit; }
.ap button:focus-visible { outline: 2px solid var(--a-info); outline-offset: -2px; }
button.ap-row { width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 0.5px solid var(--a-line); color: var(--a-ink); cursor: pointer; transition: background-color .15s; font-size: 13px; }
button.ap-row:hover { background: #fafafa; }
button.ap-row:hover .ap-arr { color: var(--a-ink); }
.ap-hint { font-style: normal; margin-left: 10px; font-size: 12px; }
.ap-more { display: block; margin: 14px auto 0; height: 32px; padding: 0 16px; border: 0.5px solid var(--a-line); border-radius: 8px; background: #fff; color: var(--a-ink); font-size: 13px; cursor: pointer; transition: background-color .15s; }
.ap-more:hover { background: #f4f4f5; }
button.ap-backbtn { background: none; border: 0; padding: 0; color: var(--a-mut); font-size: 13px; cursor: pointer; }
button.ap-backbtn:hover { color: var(--a-ink); }
.ap-morenote { margin: 8px 0 0; color: var(--a-mut); font-size: 12px; }
.ap-amb { background: #fbeee2; } .ap-blu { background: #e6f0fa; }
.ap-o { color: var(--a-warn); background: #fbeee2; }

/* Claude section: the app's PowerPoint dialog, in HTML */
.ss-h3 { margin: 56px 0 16px !important; font-size: 1.15rem !important; }
.ss-cells-sm > * { padding: 22px 24px; }
.ss-cells-sm h3 { margin-bottom: 4px; }
.ap-dlg { overflow: visible; }
.ap-dh { margin-bottom: 16px; }
.ap-cl { display: flex; align-items: center; gap: 14px; border: 0.5px solid var(--a-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ap-cli { width: 40px; height: 40px; border-radius: 8px; background: var(--a-info); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ap-cli .ap-i { width: 18px; height: 18px; }
.ap-blk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 250px; height: 40px; border: 0; border-radius: 8px; background: #18181b; color: #f4f4f5; font-size: 13px; cursor: pointer; transition: background-color .15s; flex-shrink: 0; }
.ap-blk:hover { background: #3a3a40; }
.ap-blk span { display: inline-flex; align-items: center; gap: 6px; }
.ap-blk .ap-i { width: 14px; height: 14px; }
.ap-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ap-tpl { border: 0.5px solid var(--a-line); border-radius: 10px; overflow: hidden; background: #fff; padding-bottom: 12px; }
.ap-tpl strong { display: block; font-weight: 400; font-size: 13px; padding: 10px 14px 2px; }
.ap-tpl > span { display: block; color: var(--a-mut); font-size: 12px; padding: 0 14px; }
.ap-tpli { padding: 0; }
.ap-thumb { --tb: #fff; --pan: transparent; --pw: 0%; --st: transparent; --stw: 0%; --top: transparent; --bd: transparent; position: relative; display: block; aspect-ratio: 16 / 9; background: var(--tb); overflow: hidden; }
.ap-thumb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--stw); background: var(--st); }
.ap-thumb::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pw); background: var(--pan); }
.ap-thumb > i, .ap-thumb > span { position: absolute; z-index: 1; }
.ap-thumb .b1 { left: 14%; top: 31%; width: 44%; height: 8%; border-radius: 3px; background: var(--bar); }
.ap-thumb .b2 { left: 14%; top: 43%; width: 28%; height: 3.5%; border-radius: 2px; background: var(--sub); }
.ap-thumb .bxs { left: 14%; top: 54%; width: 42%; height: 18%; display: flex; gap: 4%; }
.ap-thumb .bxs i { flex: 1; border-radius: 3px; background: var(--bx); border: 0.5px solid var(--bd, transparent); position: relative; }
.ap-thumb .bxs i::after { content: ""; position: absolute; left: 22%; top: 24%; width: 56%; height: 14%; border-radius: 2px; background: var(--bxb); }
.ap-thumb .dn { right: 9%; top: 38%; width: 17%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#cf4a4a 0 62%, var(--ring) 0); }
.ap-thumb .dn::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: var(--hole); }
.ap-thumb::before { z-index: 0; } .ap-thumb::after { z-index: 0; }
.ap-thumb[style*="--top"]::before { }
.ap-custom { background: #f4f4f5; display: grid; place-items: center; }
.ap-custom .sw { display: flex; gap: 8px; position: static; }
.ap-custom .sw i { width: 22px; height: 22px; border-radius: 6px; position: static; border: 0.5px solid rgba(0,0,0,.1); }
.ap-custom em { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; color: var(--a-mut); }
@media (max-width: 720px) { .ap-blk { width: 100%; } }

/* Phones */
@media (max-width: 720px) {
	.ss-hero .ss-in { padding-top: 40px; padding-bottom: 48px; }
	.ss-section > .ss-in { padding-top: 56px; padding-bottom: 56px; }
	.ss-manifesto .ss-in { padding-top: 56px; padding-bottom: 56px; }
	.ss-feature .ss-in { padding-top: 48px; padding-bottom: 48px; }
	.ss-final .ss-in { padding-top: 64px; padding-bottom: 64px; }
	.ss-showcase .ss-in { padding-top: 28px; padding-bottom: 40px; }
	.ss-announce { font-size: 12px; }
	.ss-announce span, .ss-announce a { padding: 6px 12px; }
	.ss-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
	.ss-actions .ss-btn { width: 100%; }
	.ss-tabbar { flex-wrap: nowrap; gap: 6px; }
	.ss-tabbar label { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 6px; height: 44px; font-size: 13px; gap: 6px; }
	.ss-tryit { font-size: 13px; }
	.ss-stage { margin-top: 32px; padding: 14px 10px; border-radius: 16px; }
	/* A small box with its own scroll for long lists. It passes the scroll to the page at its ends, and the box is
	   only about half a screen tall, so there is always page beside and below it to scroll with. */
	.ss-shots, .ap-dlg { box-sizing: border-box; }
	.ss-shots { height: min(380px, 50vh); overflow-y: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; }
	.ap-dlg { max-height: none; }
	.ss-shots::after, .ap-dlg::after { content: ""; display: block; position: sticky; bottom: 0; height: 32px; margin-top: -32px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
	.ap-tgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ap-tgrid:not(.open) .ap-tpl:nth-child(n+5) { display: none; }
	.ap-tmore { display: block; }
	.ap-tpl strong { padding: 8px 10px 2px; }
	.ap-tpl > span { padding: 0 10px; }
	.ap-hint { display: none; }
	.ap-cards3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.ap-cards3 .ap-card { padding: 10px; }
	.ap-cards3 .ap-num { font-size: 20px; }
	.ap-cards3 .ap-lab { font-size: 11px; }
	.ap-cards3 .ap-lab .ap-i { display: inline-block; width: 12px; height: 12px; }
	.ap-cards3 .ap-sub { font-size: 11px; }
	.ap-chips button { height: 36px; }
	.ap-more { height: 40px; }
	.ss-more, .ss-note a { display: inline-flex; align-items: center; min-height: 44px; }
	.ss-faq summary { min-height: 44px; align-items: center; }
	.ss-h3 { margin-top: 40px !important; }

	/* The app screens keep the app's own look and density, fitted to a narrow screen */
	.ss-win-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
	.ap { padding: 14px 12px 18px; }
	.ap-hide-m { display: none !important; }
	.ap-head { gap: 10px; margin-bottom: 14px; }
	.ap-head .ap-btns { flex: 1 1 100%; flex-wrap: wrap; }
	.ap-logo { width: 36px; height: 36px; }
	div.ap-back { display: none; }
	.ap-cards3 .ap-sub { display: none; }
	.ap-cards3 { gap: 6px; margin-bottom: 12px; }
	.ap-cards3 .ap-card { padding: 10px 10px 8px; }
	.ap-cards3 .ap-lab { gap: 4px; }
	.ap-chips { flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 2px; }
	.ap-chips::-webkit-scrollbar { display: none; }
	.ap-chips button, .ap-chips span { flex: 0 0 auto; }
	.ap-row { padding: 10px 12px; gap: 10px; }
	.ap-rt span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.ap-lh, .ap-grp { padding-left: 12px; padding-right: 12px; }
	.ap-cards6 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.ap-cards6 .ap-card { padding: 10px; }
	.ap-cards6 .ap-num { font-size: 18px; }
	.ap-cards5 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.ap-cards5 .ap-card { padding: 10px; }
	.ap-cards5 .ap-num { font-size: 20px; }
	.ap-hero { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
	.ap-hero .ap-ring { width: 72px; height: 72px; }
	.ap-hero .ap-ring b { width: 58px; height: 58px; font-size: 22px; }
	.ap-btns .ap-btn { height: 32px; padding: 0 10px; font-size: 12px; }
	.ap-cards2 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
	.ap-imp { padding: 10px 12px; }
	.ap-proj { margin: 12px; }
	.ap-ph { padding: 12px 14px 4px; }
	.ap-pb { padding: 8px 14px 14px; }
	.ap-tgrid { gap: 8px; }
	/* fewer table columns, so nothing needs sideways scrolling */
	.ap-table { min-width: 0; }
	.ap-table th, .ap-table td { padding: 9px 10px; }
	.ap-table td:first-child { max-width: 125px; }
	.ap-tp th:nth-child(3), .ap-tp td:nth-child(3), .ap-tp th:nth-child(5), .ap-tp td:nth-child(5),
	.ap-tp th:nth-child(6), .ap-tp td:nth-child(6), .ap-tp th:nth-child(7), .ap-tp td:nth-child(7),
	.ap-tp th:nth-child(8), .ap-tp td:nth-child(8), .ap-tp th:nth-child(9), .ap-tp td:nth-child(9) { display: none; }
	.ap-td th:nth-child(3), .ap-td td:nth-child(3), .ap-td th:nth-child(5), .ap-td td:nth-child(5), .ap-td th:nth-child(6), .ap-td td:nth-child(6),
	.ap-td th:nth-child(7), .ap-td td:nth-child(7), .ap-td th:nth-child(8), .ap-td td:nth-child(8) { display: none; }
	.ap-toolbtns { display: none; }
}

/* No visible scrollbars on the app screens (the app hides its own too). Scrolling still works. */
.ss-shots, .ap-dlg, .ap-scroll, .ap-chips { scrollbar-width: none; -ms-overflow-style: none; }
.ss-shots::-webkit-scrollbar, .ap-dlg::-webkit-scrollbar, .ap-scroll::-webkit-scrollbar, .ap-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Phones: every app screen on the page is the same kind of small box (about half a screen at most), and scrolls inside if it is longer */
@media (max-width: 720px) {
	.ss-stage .ss-win > .ap { box-sizing: border-box; max-height: min(380px, 50vh); overflow: hidden; }
	.ss-stage .ss-win > .ap::-webkit-scrollbar { display: none; width: 0; height: 0; }
	.ss-stage .ss-win > .ap::after { content: ""; display: block; position: sticky; bottom: 0; height: 32px; margin-top: -32px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
}

/* Claude connector card (the app's Settings card, in HTML) */
.ss-step { display: flex; align-items: center; gap: 10px; margin: 36px 0 12px; font-weight: 600; color: var(--ink); }
.ss-step b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; }
.ss-step em { font-style: normal; font-weight: 400; color: var(--text-2); font-size: 14px; }
.ap-conn { border: 0.5px solid var(--a-line); border-radius: 16px; padding: 20px; background: #fff; box-shadow: var(--shadow); }
.ap-connh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ap-connh .ap-ht { flex: 1 1 320px; }
.ap-connh .ap-big { font-size: 15px !important; }
.ap-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #137334; background: #e8f5ec; border-radius: 999px; padding: 2px 8px; font-weight: 400; }
.ap-badge .ap-i { width: 12px; height: 12px; }
.ap-bluebtn { box-sizing: border-box; width: 170px; height: 40px; border: 0; border-radius: 12px; background: var(--a-info); color: #fff; font-size: 13.5px; cursor: pointer; transition: background-color .15s; flex-shrink: 0; }
.ap-bluebtn:hover { background: #085a97; }
.ap-bluebtn:disabled { opacity: .65; cursor: default; }
.ap-done { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; border: 0.5px solid var(--a-line); border-radius: 12px; background: #f4f4f5; padding: 12px 14px; font-size: 12.5px; color: var(--a-ink); }
.ap-done .ap-i { color: var(--a-ok); margin-top: 1px; }
.ap-tools { border: 0.5px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.ap-tool { display: flex; gap: 14px; padding: 10px 14px; border-top: 0.5px solid var(--a-line); font-size: 12.5px; align-items: baseline; }
.ap-tool:first-child { border-top: 0; }
.ap-tool code { font-family: var(--mono); font-size: 12px; color: var(--a-ink); flex: 0 0 120px; }
.ap-tool span { color: var(--a-mut); }
.ap-foot { margin: 12px 0 0; color: var(--a-mut); font-size: 12px; }
@media (max-width: 720px) {
	.ss-step { flex-wrap: wrap; row-gap: 2px; }
	.ss-step em { flex: 1 1 100%; margin-left: 36px; }
	.ap-bluebtn { width: 100%; }
	.ap-tool { flex-direction: column; gap: 2px; }
	.ap-tool code { flex: none; }
}

/* Changelog page */
.ss-cl .ss-in { padding-top: 0; padding-bottom: 0; }
.ss-rel { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 48px 0; border-top: 1px solid var(--line); }
.ss-rel:first-child { border-top: 0; }
.ss-rel-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: start; position: sticky; top: 88px; }
.ss-ver { display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; }
.ss-rel-body h2 { font-size: 1.5rem !important; line-height: 1.2; margin: 0 0 16px !important; }
.ss-month { font-size: 13px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2) !important; margin: 0 !important; padding: 28px 0 0; }
.ss-cl .ss-month + .ss-rel { border-top: 0; }
.ss-rel-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ss-rel-body li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; color: var(--text); font-size: 16px; }
.ss-rel-body li b { justify-self: start; font-weight: 600; font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid transparent; }
.ss-rel-meta time { color: var(--text-2); font-size: 14px; }
.ss-tag-new { color: #137334; background: color-mix(in srgb, var(--ok) 10%, #fff); border-color: color-mix(in srgb, var(--ok) 28%, transparent) !important; }
.ss-tag-improved { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, #fff); border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.ss-tag-small { color: var(--text-2); background: var(--soft); border-color: var(--line) !important; }
@media (max-width: 720px) {
	.ss-rel { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
	.ss-rel-meta { position: static; flex-direction: row; align-items: center; gap: 12px; }
	.ss-rel-body h2 { font-size: 1.25rem !important; }
	.ss-rel-body li { display: block; font-size: 15px; }
	.ss-rel-body li b { display: inline-block; margin-right: 8px; vertical-align: 1px; }
}

/* Cards whose title is an H2 (proper heading order under the H1) look like the H3 cards */
.ss-main .ss-tile > h2 { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; font-weight: 600; margin: 0 0 6px; }

/* Text pages (About, Privacy policy) */
.ss-prose > * { max-width: 720px; }
.ss-prose h2 { margin: 40px 0 12px !important; font-size: 1.5rem !important; }
.ss-prose h2:first-child { margin-top: 0 !important; }
.ss-prose p, .ss-prose li { color: var(--text); font-size: 17px; line-height: 1.65; }
.ss-prose ul { margin: 0 0 16px; padding-left: 1.2em; }
.ss-prose ol { margin: 0 0 16px; padding-left: 1.5em; }
.ss-prose li { margin: 6px 0; }
.ss-prose strong { font-weight: 600; }

/* Issue detail toolbar and table columns, as in the app */
.ap-tbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.ap-tbar .ap-lab2 { margin: 0; }
.ap-toolbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; width: 190px; padding: 0 12px; border: 0.5px solid var(--a-line); border-radius: 8px; color: var(--a-mut); font-size: 13px; background: #fff; }
.ap-search .ap-i, .ap-toolbtns .ap-btn .ap-i { width: 14px; height: 14px; }
.ap-cnt { font-style: normal; font-size: 12px; background: #f1f1f3; border-radius: 6px; padding: 0 6px; color: var(--a-mut); }
.ap-link, .ap-table td span.ap-link { color: var(--a-info); }
.ap-rf { display: inline-grid; place-items: center; color: var(--a-mut); }
.ap-rf .ap-i { width: 15px; height: 15px; }
.ap-table td:nth-child(n+2) { text-align: left; }

@media (min-width: 721px) and (max-width: 1180px) {
	.ap-td th:nth-child(3), .ap-td td:nth-child(3), .ap-td th:nth-child(5), .ap-td td:nth-child(5) { display: none; }
}
/* Template list: one row first, with a button for the rest (keeps the screen a sensible height) */
.ap-tgrid:not(.open) .ap-tpl:nth-child(n+5) { display: none; }
.ap-tmore { display: block; }

/* Home: merged sections (v3.13.0) */
.ss-section .ss-in h2.ss-h2b{margin-top:96px}
.ss-compare{margin-top:8px}

/* Bigger tap area for two small links, no layout change (v3.13.1) */
.ss-announce a,.ss-cells article p a{position:relative}
.ss-announce a::after,.ss-cells article p a::after{content:"";position:absolute;inset:-12px -8px}

/* Home: less repetition (v3.14.0) */
@media (min-width:721px){.ss-cells-2{grid-template-columns:repeat(2,1fr)}}
/* Benchmarks page (v3.129.1): three cards across on wide screens, one column on narrow ones, so no empty cell is left over */
.ss-cells-3{grid-template-columns:1fr}
@media (min-width:900px){.ss-cells-3{grid-template-columns:repeat(3,1fr)}}
.ss-cmp{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.ss-cmp table{width:100%;border-collapse:collapse;font-size:15px}
.ss-cmp th,.ss-cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--text-2);font-weight:400}
.ss-cmp thead th{border-top:0;background:#f6f6f7;color:var(--ink);font-weight:600}
.ss-cmp tbody th{color:var(--ink);font-weight:600}
.ss-cmp .ss-us{color:var(--ink);font-weight:600;background:#fafafa}
.ss-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:720px){.ss-cmp table{font-size:13px}.ss-cmp th,.ss-cmp td{padding:10px 8px}}

/* Features page (v3.15.0) */
.ss-why{margin:0 0 12px !important;color:var(--text) !important;font-size:15px}
.ss-hero-simple .ss-note a{color:inherit}

/* Download page (v3.16.0) */
.ss-os > input{position:absolute;opacity:0;pointer-events:none}
.ss-os-tabs{display:flex;gap:8px;margin:16px 0 24px}
.ss-os-tabs label{padding:10px 22px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;color:var(--text-2);background:var(--card)}
#os-mac:checked ~ .ss-os-tabs label[for="os-mac"],#os-win:checked ~ .ss-os-tabs label[for="os-win"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#os-mac:focus-visible ~ .ss-os-tabs label[for="os-mac"],#os-win:focus-visible ~ .ss-os-tabs label[for="os-win"]{outline:2px solid var(--ink);outline-offset:2px}
.ss-os-pane{display:none}
#os-mac:checked ~ .ss-os-mac,#os-win:checked ~ .ss-os-win{display:block}
.ss-os-pane ol{margin-left:0;padding-left:1.5em}
.ss-os-pane pre{margin:8px 0 0;padding:14px 16px;background:#f6f6f7;border:1px solid var(--line);border-radius:10px;overflow-x:auto;font-size:14px}

/* Features page rows (v3.17.0) */
.ss-frs{margin-top:32px;border-top:1px solid var(--line)}
.ss-fr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:36px 0;border-bottom:1px solid var(--line)}
.ss-fr-h{position:relative;padding-left:56px}
.ss-fr-n{position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:12px;background:#f6f6f7;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text-2)}
.ss-fr-h h2,.ss-fr-h h3{margin:0 0 8px;font-size:1.35rem;line-height:1.25}
.ss-fr-h .ss-why{margin:0 !important}
.ss-fr-l{list-style:none;margin:0;padding:0}
.ss-fr-l li{position:relative;padding:9px 0 9px 30px;color:var(--text);font-size:16px;line-height:1.5}
.ss-fr-l li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:11px;border:solid #15803d;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:720px){.ss-fr{grid-template-columns:1fr;gap:12px;padding:28px 0}}

/* Pricing page (v3.18.0) */
.ss-price{background:var(--card);border:1px solid var(--ink);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-lg)}
.ss-price h2{margin:0 0 8px}
.ss-price-n{margin:0 !important;color:var(--text-2)}
.ss-price-n strong{font-size:3rem;line-height:1;color:var(--ink);font-weight:700}
.ss-price-y{margin:4px 0 20px !important;color:var(--text-2)}
.ss-price .ss-actions{justify-content:flex-start;margin-top:20px}

/* Blog page (v3.20.0) */
.ss-posts h2{font-size:1.25rem;margin:4px 0 8px}
.ss-posts h2 a{color:var(--ink);text-decoration:none}
.ss-posts h2 a:hover{text-decoration:underline}
.ss-empty{max-width:640px}

/* Blog post page (v3.21.0) */
.ss-post-hero .ss-in{padding-bottom:24px}
.ss-post-hero h1{max-width:820px;font-size:clamp(2rem,5vw,3rem);line-height:1.15}
.ss-post-back{margin:0 0 16px !important;font-size:15px}
.ss-post-meta{margin:16px 0 0 !important;color:var(--text-2);font-size:15px}
.ss-post > *{max-width:720px}
.ss-post p,.ss-post li{font-size:18px;line-height:1.7}
.ss-post h2{margin:44px 0 12px !important;font-size:1.6rem !important;line-height:1.25}
.ss-post h3{margin:32px 0 8px;font-size:1.25rem;line-height:1.3}
.ss-post img,.ss-post figure{max-width:100%;height:auto;border-radius:12px}
.ss-post figure{margin:28px 0}
.ss-post figcaption{margin-top:8px;color:var(--text-2);font-size:14px}
.ss-post blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--ink);color:var(--text-2);font-size:1.15rem}
.ss-post code{padding:2px 6px;background:#f6f6f7;border:1px solid var(--line);border-radius:6px;font-size:.9em}
.ss-post pre{padding:16px;background:#f6f6f7;border:1px solid var(--line);border-radius:10px;overflow-x:auto;font-size:14px}
.ss-post pre code{padding:0;border:0;background:none}
.ss-post table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:16px}
.ss-post th,.ss-post td{padding:10px 14px;border:1px solid var(--line);text-align:left}
.ss-post a{color:#0a6ebd}
.ss-post-cta h2{margin-top:0}
.ss-story{margin:44px 0}
.ss-story-list{display:grid;gap:16px;max-width:880px}
.ss-story-h{margin:0 0 14px !important;font-size:1.6rem !important;line-height:1.25;color:var(--text) !important}
.ss-story-card{display:flex;gap:24px;align-items:stretch;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:inherit}
.ss-story-pic{flex:none;align-self:flex-start;display:block}
.ss-story-card img{display:block;flex:none;align-self:flex-start;width:150px;height:auto;aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line)}
.ss-post h2#sources + ul a,.ss-post h2#recommended + ul a{text-decoration:none}
.ss-post h2#sources + ul a:hover,.ss-post h2#recommended + ul a:hover,.ss-post h2#sources + ul a:focus-visible,.ss-post h2#recommended + ul a:focus-visible{text-decoration:underline}
.ss-story-body{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.ss-story-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ss-story-label span{background:#FFE27A;color:#171717;padding:2px 7px;border-radius:4px}
.ss-story-body strong{font-size:1.25rem;line-height:1.3;font-weight:600}
.ss-story-meta{font-size:14px;color:var(--text-2)}
.ss-story-ex{font-size:16px;line-height:1.55;color:var(--text-2)}
.ss-story-body strong a,.ss-post .ss-story-body strong a{color:var(--text);text-decoration:none}
.ss-story-body strong a:hover{text-decoration:underline}
.ss-story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.ss-story-watch,.ss-post .ss-story-watch{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;background:#FFE27A;color:#171717 !important;border:1px solid #171717;box-shadow:2px 2px 0 #171717;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;transition:background .15s}
.ss-story-watch:hover{background:#ffd84d}
.ss-story-read,.ss-post .ss-story-read{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 4px;color:var(--text) !important;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;border-bottom:2px solid transparent;transition:border-color .15s}
.ss-story-read:hover{border-bottom-color:currentColor}
.ss-story-watch svg,.ss-story-read svg{flex:none}
.ss-post .ss-story-card .ss-story-ex,.ss-post .ss-story-card .ss-story-meta,.ss-post .ss-story-card .ss-story-label{color:var(--text-2)}
@media (max-width:560px){.ss-story-card{gap:14px;padding:12px}.ss-story-card img{width:96px}.ss-story-ex{display:none}}
.ss-post-cta .ss-actions{justify-content:flex-start}

/* Accessibility fixes (v3.21.1) */
.ap-chips i{opacity:1}

/* Feature request form (v3.24.0) */
.ss-form label{display:block;margin:22px 0 8px;font-weight:600;color:var(--ink)}
.ss-form label span{font-weight:400;color:var(--text-2)}
.ss-form input[type=text],.ss-form input[type=email],.ss-form textarea,.ss-form select{display:block;width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px}
.ss-form textarea{resize:vertical;min-height:110px}
.ss-form input:focus-visible,.ss-form textarea:focus-visible,.ss-form select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ss-form .ss-note{margin:20px 0 !important}
.ss-form button.ss-btn{border:0;cursor:pointer;font:inherit;font-weight:600}
.ss-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ss-form-msg{margin:0 0 24px !important;padding:14px 16px;border-radius:10px;font-weight:600}
.ss-form-ok{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}
.ss-form-err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.ss-form-msg[hidden]{display:none}

/* Cropped, doodled product shots (v3.26.0) */
.ss-doodled{position:relative;overflow:visible}
.ss-crop{position:relative;overflow:hidden;transform:rotate(-1deg);max-height:340px}
.ss-crop .ss-win-bar{display:none}
.ss-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.ss-d-fix .ss-crop{max-height:560px;transform:rotate(.8deg)}
.ss-d-report .ss-crop{max-height:360px}
.ss-dd{position:absolute;fill:none;stroke:#ff5b3a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.ss-hand{position:absolute;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:26px;line-height:1.05;color:#cc3314;transform:rotate(-4deg);pointer-events:none;white-space:nowrap}
/* circles and underlines are drawn on the app elements themselves */
.ss-d-crawl .ap-ring,.ss-d-crawl .ap-chip2:last-child,.ss-d-report .ap-pri,.ss-d-fix .ap-cards2 .ap-card:first-child strong{position:relative}
.ss-d-crawl .ap-ring::after{content:"";position:absolute;inset:-14px -14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-crawl .ap-chip2:last-child::after{content:"";position:absolute;inset:-10px -14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-report .ap-pri::after{content:"";position:absolute;inset:-12px -16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-fix .ap-cards2 .ap-card:first-child strong{display:table}
.ss-d-fix .ap-cards2 .ap-card:first-child strong::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-10px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C20 2 30 14 50 8S80 2 98 8' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
@media (min-width:1100px){
	.ss-ah{width:110px;height:37px}
	.ss-hand{text-align:left}
	/* crawl: labels sit in the left gutter and the empty space next to the chips */
	.ss-hand.k3{left:22px;top:96px}
	.ss-dd.k2{left:112px;top:150px}
	.ss-hand.k5{left:745px;top:192px}
	.ss-dd.k4{left:668px;top:222px;width:76px;transform:scaleX(-1)}
	/* fix: labels in the left gutter */
	.ss-hand.f2{left:40px;top:150px}
	.ss-dd.f1{left:176px;top:190px;width:130px}
	.ss-hand.f4{left:60px;top:398px}
	.ss-dd.f3{left:176px;top:392px;width:110px}
	/* report: label in the right gutter */
	.ss-hand.r2{right:60px;top:56px}
	.ss-dd.r1{right:170px;top:86px;width:80px;transform:scaleX(-1)}
}
@media (min-width:721px) and (max-width:1099px){
	.ss-dd{display:none}
	.ss-hand{position:static;display:block;margin:14px 6px 0;transform:none;font-size:24px;text-align:center;white-space:normal}
	.ss-hand + .ss-hand{margin-top:12px}
	.ss-doodled .ss-crop,.ss-d-crawl .ss-crop,.ss-d-fix .ss-crop{width:100%;margin-left:0}
}
@media (min-width:721px){
	.ss-doodled .ss-crop{width:76%}
	.ss-d-crawl .ss-crop{margin-left:14%}
	.ss-d-fix .ss-crop{margin-left:24%}
}
@media (max-width:720px){
	.ss-dd{display:none}
	.ss-hand{position:static;display:block;margin:14px 6px 0;transform:none;font-size:24px;text-align:center;white-space:normal}
	.ss-hand + .ss-hand{margin-top:12px}
	.ss-crop{transform:none;max-height:300px}
	.ss-d-crawl .ss-crop{max-height:400px}
	.ss-d-crawl .ap-ring::after,.ss-d-crawl .ap-chip2:last-child::after,.ss-d-report .ap-pri::after{inset:-8px -10px}
}

/* Personality: hero scribbles, tab nudge, Claude joke (v3.27.0) */
.ss-scrib{position:relative;white-space:nowrap}
.ss-scrib::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.24em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C20 2 30 14 50 8S80 2 98 8' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-hero .ss-actions,.ss-step,.ss-showcase .ss-in{position:relative}
@media (min-width:1100px){
	/* The hero doodle hangs off the left edge of the button row (fit-content), so it still points at Download SEOSage when a second button sits beside it */
	.ss-hero:not(.ss-hero-simple) .ss-actions{width:fit-content;margin-left:auto;margin-right:auto}
	.ss-hand.h1{right:calc(100% + 70px);top:-22px;text-align:right}
	.ss-dd.h2{right:calc(100% + 22px);top:16px;width:70px;height:23px}
	.ss-dd.t1{left:calc(50% + 176px);top:14px;width:84px;height:28px;transform:scaleX(-1)}
	.ss-hand.t2{left:calc(50% + 270px);top:-8px}
}
@media (max-width:1099px){
	.ss-hero .ss-hand.h1{margin:8px 0 0;text-align:center}
	.ss-hand.t2{margin:10px 0 0}
}

/* Placement fixes (v3.27.1) */
.ss-d-claude{position:relative}
.ss-d-claude .ss-win{margin-bottom:0}
@media (min-width:1100px){
	.ss-d-report .ss-crop{width:100%}
}

/* Claude note follows the Build with Claude button (v3.27.2) */
.ss-d-claude .ap-cl{position:relative}
.ss-sm-only{display:none}
@media (min-width:1100px){
	.ss-d-claude .ss-hand.c3{position:absolute;right:16px;top:calc(100% + 2px);font-size:22px;text-align:right;transform:rotate(-2deg);white-space:nowrap;z-index:2}
	.ss-d-claude .ap-cl{margin-bottom:56px}
	.ss-d-claude .ss-dd.c2{position:absolute;right:210px;top:calc(100% - 4px);width:56px;height:19px;transform:rotate(-100deg)}
}
@media (max-width:1099px){
	.ss-lg-only{display:none !important}
	.ss-sm-only{display:block;text-align:center}
}

/* Report note follows the PowerPoint button, tighter frame (v3.27.4) */
.ss-d-report .ap-btns{position:relative}
.ss-d-report .ap-hero{padding-top:20px;padding-bottom:20px}
@media (min-width:1100px){
	.ss-d-report .ss-crop{width:94%;margin-left:3%}
	.ss-d-report .ss-hand.r3{position:absolute;right:6px;top:calc(100% + 40px);font-size:22px;text-align:right;transform:rotate(-2deg);white-space:nowrap;z-index:2}
	.ss-d-report .ss-dd.r1{position:absolute;right:60px;top:calc(100% + 6px);width:56px;height:19px;transform:rotate(-90deg)}
}

/* Feature request page redesign (v3.28.0) */
.frq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.frq-card,.frq-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px}
.frq-card{box-shadow:var(--shadow-lg)}
.frq-form h2,.frq-done h2{margin:0 0 4px;font-size:1.5rem}
.frq-side{display:grid;gap:16px;position:sticky;top:96px}
.frq-panel{padding:24px}
.frq-panel h2{margin:0 0 14px;font-size:1.1rem}
.frq-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.frq-steps li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);line-height:1.5}
.frq-steps b{flex:0 0 28px;height:28px;border-radius:50%;background:#f6f6f7;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink)}
.frq-steps strong{color:var(--ink)}
.frq-ship{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.frq-ship li{color:var(--text);line-height:1.5}
.frq-ship em{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:999px;background:#f6f6f7;border:1px solid var(--line);font-style:normal;font-size:12px;color:var(--text-2)}
.frq-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--text-2)}
.frq-chip{font:inherit;font-size:13px;padding:3px 10px;margin:2px 4px 2px 0;background:#f6f6f7;border:1px solid var(--line);border-radius:999px;color:var(--ink);cursor:pointer}
.frq-chip:hover{background:#ececee}
.frq-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.frq-count{white-space:nowrap}
.frq-imp{border:0;margin:22px 0 0;padding:0}
.frq-imp legend{padding:0;margin:0 0 8px;font-weight:600;color:var(--ink)}
.frq-pills{display:flex;gap:8px;flex-wrap:wrap}
.frq-pills input{position:absolute;opacity:0;pointer-events:none}
.ss-form .frq-pills label{display:inline-block;margin:0;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:500;color:var(--text-2);cursor:pointer}
.frq-pills input:checked + label{background:var(--ink);border-color:var(--ink);color:#fff}
.frq-pills input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px}
.frq-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.ss-form .frq-send .ss-note{margin:0 !important;flex:1 1 240px;font-size:13px}
.frq-done{text-align:center;padding:24px 0}
.frq-done[hidden],.frq-form[hidden]{display:none}
.frq-done .ss-actions{justify-content:center;margin-top:20px}
.frq-check{display:inline-flex;width:56px;height:56px;border-radius:50%;background:#ecfdf3;color:#15803d;align-items:center;justify-content:center;margin-bottom:12px}
.frq-check svg{width:28px;height:28px}
@media (max-width:900px){
	.frq-grid{grid-template-columns:1fr}
	.frq-side{position:static}
	.frq-card{padding:22px}
}
.ss-section:has(.frq-grid){padding-top:32px}

/* Feature request note beside the page title (v3.28.1) */
.frq-title{position:relative;display:inline-block;max-width:100%;margin-bottom:14px}
.frq-title h1{margin-bottom:0}
@media (min-width:1100px){
	.frq-title .frq-hand{left:calc(100% + 76px);top:18px;font-size:34px;transform:rotate(-4deg)}
	.frq-title .frq-arr{left:calc(100% + 8px);top:34px;width:70px;height:23px;transform:scaleX(-1)}
}
@media (max-width:1099px){
	.frq-title .frq-hand{position:static;display:block;margin:6px 0 10px;text-align:left;font-size:28px;transform:rotate(-2deg)}
}

/* Cookie notice (v3.30.0) */
.ss-cc{position:fixed;left:16px;bottom:16px;z-index:60;width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px 18px}
.ss-cc[hidden]{display:none}
.ss-cc p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--text-2)}
.ss-cc p strong{color:var(--ink)}
.ss-cc-btns{display:flex;gap:8px;margin-top:12px}
.ss-cc-btns button{flex:1;height:38px;font:inherit;font-size:14px;font-weight:600;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.ss-cc-btns .ss-cc-yes{background:var(--ink);border-color:var(--ink);color:#fff}
.ss-cc-btns button:focus-visible,.ss-cc-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ss-cc-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}

/* Features page redesign (v3.31.0) */
.ftr-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:36px 0}
.ftr-row + .ftr-row{border-top:1px solid var(--line)}
.ftr-rev .ftr-txt{order:2}
.ftr-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ftr-rev .ftr-vis{order:1}
.ftr-txt .ss-sub{margin:10px 0 16px}
.ftr-txt .ss-fr-l{margin-bottom:12px}
.ftr-stage{margin-top:0;padding:clamp(20px,4vw,44px)}
.ftr-crop{transform:rotate(-1deg);max-height:none}
.ftr-crop::after{display:none}
.ftr-rev .ftr-crop{transform:rotate(1deg)}
.fm{padding:20px 22px;font-size:14px;color:var(--a-ink)}
.fm-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.fm-head strong{font-weight:600;font-size:16px}
.fm-head span,.fm-eg{color:var(--a-mut);font-size:12px}
.fm-tbl,.fm-set{border:0.5px solid var(--a-line);border-radius:10px;overflow:hidden}
.fm-row,.fm-srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:0.5px solid var(--a-line)}
.fm-row:first-child,.fm-srow:first-child{border-top:0}
.fm-h{background:#f6f6f7;color:var(--a-mut);font-size:12px}
.fm-chip{position:relative;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.fm-chip.ok{background:#ecfdf3;color:#166534}
.fm-chip.warn{background:#fff7ed;color:#a84a07}
.fm-chip.mute{background:#f4f4f5;color:#52525b}
.fm-chip.err{background:#fdecea;color:#c62d33}
.fm-bar{display:inline-flex;align-items:center;gap:8px}
.fm-bt{display:block;width:72px;height:6px;border-radius:3px;background:#f4f4f5;overflow:hidden}
.fm-bt i{display:block;height:100%;border-radius:3px}
.fm-bt i.ok{background:#15803d}
.fm-bt i.mid{background:#0a6ebd}
.fm-bt i.low{background:#a84a07}
.fm-sum{margin:0 0 12px}
.fm-foot{display:flex;justify-content:flex-end;margin-top:14px}
.fm-btn{padding:7px 14px;border:0.5px solid var(--a-line);border-radius:8px;font-size:13px;background:#fff}
.fm-chat{display:grid;gap:12px}
.fm-you{justify-self:end;max-width:82%;background:#18181b;color:#f4f4f5;padding:10px 14px;border-radius:14px 14px 4px 14px}
.fm-tool{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--a-mut)}
.fm-tool code{background:#f4f4f5;border:0.5px solid var(--a-line);border-radius:6px;padding:2px 8px;color:var(--a-ink);font-size:12px}
.fm-ai{max-width:88%;border:0.5px solid var(--a-line);padding:10px 14px;border-radius:14px 14px 14px 4px;line-height:1.5}
.fm-eg{margin:14px 0 0}
.fm-srow b{font-weight:600}
.fm-tg{position:relative;width:36px;height:20px;border-radius:999px;background:#d4d4d8;flex:0 0 auto}
.fm-tg::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.fm-tg.on{background:#18181b}
.fm-tg.on::after{left:18px}
.fm-ring::after,.fm-ring2 b::after{content:"";position:absolute;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.fm-ring::after{inset:-9px -12px}
.fm-ring2 b{position:relative}
.fm-ring2 b::after{inset:-9px -14px}
.ftr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin-top:28px}
.ftr-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ftr-grp h3{margin:0 0 4px;font-size:1.1rem}
.ftr-grp .ss-why{margin:0 0 6px !important}
.ftr-grp .ss-fr-l li{font-size:15px;padding:6px 0 6px 28px}
.ftr-grp .ss-fr-l li::before{top:12px}
.ftr-stage{padding-bottom:72px;position:relative}
.ftr-note{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) rotate(-2deg);font-size:26px;white-space:nowrap;display:flex;align-items:flex-end;gap:8px}
.ftr-up{width:22px;height:30px;fill:none;stroke:#ff5b3a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media (max-width:480px){.ftr-note{font-size:22px;white-space:normal;text-align:left;width:calc(100% - 32px);transform:translateX(-50%)}}
@media (max-width:900px){
	.ftr-row,.ftr-rev{grid-template-columns:1fr;gap:24px;padding:28px 0}
	.ftr-rev .ftr-txt,.ftr-rev .ftr-vis{order:0}
	.ftr-grid,.ftr-grid3{grid-template-columns:1fr}
}

.ftr-crop,.ftr-crop .ap{max-height:none !important;height:auto !important;overflow:visible}
.ftr-crop{overflow:hidden}

/* Pricing page redesign (v3.32.0) */
.pr-wrap{max-width:980px;position:relative}
.pr-wrap > input{position:absolute;opacity:0;pointer-events:none}
.pr-tg{position:relative;display:flex;justify-content:center;margin:0 auto 28px;width:max-content;padding:4px;background:#f0f0f2;border-radius:999px;gap:2px}
.pr-tg label{padding:9px 24px;border-radius:999px;font-weight:600;color:var(--text-2);cursor:pointer}
#bill-m:checked ~ .pr-tg label[for="bill-m"],#bill-y:checked ~ .pr-tg label[for="bill-y"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#bill-m:focus-visible ~ .pr-tg label[for="bill-m"],#bill-y:focus-visible ~ .pr-tg label[for="bill-y"]{outline:2px solid var(--ink);outline-offset:2px}
.pr-hand{position:absolute;left:calc(100% + 66px);top:-2px;font-size:28px;transform:rotate(-4deg)}
.pr-arr{position:absolute;left:calc(100% + 6px);top:6px;width:60px;height:20px;transform:scaleX(-1)}
.pr-plan{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--card);border:1px solid var(--ink);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
.pr-left{padding:40px;background:#fafafa;border-right:1px solid var(--line);text-align:left}
.pr-left h2{margin:0 0 6px;font-size:1.4rem}
.pr-price{margin:0 !important;color:var(--text-2)}
.pr-price strong{font-size:3.6rem;line-height:1;color:var(--ink);font-weight:700}
.pr-sub{margin:6px 0 24px !important;color:var(--text-2)}
.pr-left .ss-actions{justify-content:flex-start}
.pr-left .ss-note{margin:12px 0 0 !important}
#bill-m:checked ~ .pr-plan .pr-y,#bill-y:checked ~ .pr-plan .pr-m{display:none}
.pr-right{padding:40px}
.pr-right h3{margin:0 0 12px;font-size:1.1rem}
.pr-list li{font-size:16px;padding:8px 0 8px 30px}
.pr-list li::before{top:14px}
.pr-assure{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pr-assure li{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px}
.pr-assure strong{color:var(--ink)}
.pr-assure span{color:var(--text-2);font-size:15px;line-height:1.5}
@media (max-width:900px){
	.pr-plan{grid-template-columns:1fr}
	.pr-left{border-right:0;border-bottom:1px solid var(--line);padding:28px}
	.pr-right{padding:28px}
	.pr-assure{grid-template-columns:1fr;gap:16px}
	.pr-hand{position:static;display:block;text-align:center;margin:8px 0 0;transform:none}
	.pr-tg{flex-wrap:wrap;justify-content:center;width:max-content;max-width:100%}
}
@media (max-width:1099px){.pr-hand{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%) rotate(-2deg);white-space:nowrap}.pr-sec .pr-tg{margin-bottom:52px}}

.pr-sec{padding-top:20px}
.pr-left{display:flex;flex-direction:column;justify-content:flex-start}

/* Pricing: whole plan fits on one screen (v3.32.1) */
.pr-hero .ss-in{padding-top:36px;padding-bottom:8px}
.pr-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:10px}
.pr-hero .ss-lead{margin-bottom:0}
.pr-sec{padding-top:8px;padding-bottom:40px}
.pr-tg{margin-bottom:22px}
.pr-left{padding:30px 32px}
.pr-price strong{font-size:3.2rem}
.pr-sub{margin:4px 0 16px !important}
.pr-right{padding:26px 32px}
.pr-right h3{margin-bottom:6px}
.pr-list{column-count:2;column-gap:24px}
.pr-list li{break-inside:avoid}
.pr-list li{font-size:15px;padding:6px 0 6px 28px}
.pr-list li::before{top:12px}
.pr-assure{margin-top:20px}
@media (max-width:900px){.pr-list{column-count:1}.pr-left{padding:24px}.pr-right{padding:22px 24px}}

.pr-sec .pr-wrap{padding-top:12px;padding-bottom:0;max-width:1080px}
.pr-plan{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.pr-hero .ss-lead{max-width:none}
@media (max-width:900px){.pr-plan{grid-template-columns:1fr}}

/* Pricing top: normal spacing, page frame lines stay straight (v3.32.2) */
.pr-hero .ss-in{padding-top:56px;padding-bottom:20px}
.pr-sec .pr-wrap{max-width:none;padding-top:8px}
.pr-plan,.pr-assure{max-width:1040px;margin-left:auto;margin-right:auto}
.pr-assure{margin-top:20px}

.pr-sec .pr-wrap{max-width:1120px}

/* Features top: a feature is visible without scrolling (v3.33.0) */
.ft-hero .ss-in{padding-top:44px;padding-bottom:22px}
.ft-hero h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:8px}
.ft-hero .ss-lead{max-width:none;margin-bottom:16px}
.ft-hero .ss-actions{display:inline-flex;vertical-align:middle;margin-right:22px}
.ft-hero .ss-note{display:inline-block;vertical-align:middle;margin:0 !important}
#fix.ss-section{padding-top:0}
#fix .ftr-row:first-child{padding-top:24px;padding-bottom:24px}
@media (max-width:720px){.ft-hero .ss-actions{display:flex;margin:0 0 12px}.ft-hero .ss-note{display:block}}

#fix > .ss-in{padding-top:0}

/* Features top: more breathing room, first feature still visible (v3.33.1) */
.ft-hero .ss-in{padding-top:64px;padding-bottom:44px}
.ft-hero h1{margin-bottom:16px}
.ft-hero .ss-lead{margin-bottom:28px}
#fix .ftr-row:first-child{padding-top:36px;padding-bottom:24px}
#fix .ftr-row:first-child .ftr-stage{padding-top:26px;padding-bottom:64px}

/* Every check in one crawl: tabbed explorer (v3.34.0) */
.xa{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;margin-top:32px;box-shadow:var(--shadow-lg)}
.xa > input{position:absolute;opacity:0;pointer-events:none}
.xa-tabs{background:#fafafa;border-right:1px solid var(--line);padding:14px;display:grid;gap:4px;align-content:start}
.xa-tab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;font-weight:600;color:var(--text-2);font-size:16px;cursor:pointer}
.xa-tab:hover{background:#f0f0f2}
.xa-tab em{font-style:normal;font-size:13px;background:#ececee;border-radius:99px;padding:1px 9px;color:var(--text-2);font-weight:600}
.xa-panels{display:grid;position:relative}
.xa-panel{grid-area:1/1;visibility:hidden;padding:40px 48px}
.xa-panel h3{margin:0 0 8px;font-size:1.6rem}
.xa-why{margin:0 0 18px !important;color:var(--text-2) !important;font-size:17px;max-width:560px}
.xa-l li{font-size:17px;padding:10px 0 10px 32px}
.xa-l li::before{top:17px}
.xa-wrap{position:relative}
.xa-hand{left:70px;bottom:18px;transform:rotate(-3deg);font-size:26px;pointer-events:none}
.xa-arr{left:34px;bottom:22px;width:30px;height:46px;transform:rotate(180deg)}
@media (min-width:901px){.xa-tabs{padding-bottom:64px}}
#xa-1:checked ~ .xa-tabs label[for="xa-1"]{background:#171717;color:#fff}
#xa-1:checked ~ .xa-tabs label[for="xa-1"] em{background:#3a3a3a;color:#fff}
#xa-1:checked ~ .xa-panels .xa-p1{visibility:visible}
#xa-1:focus-visible ~ .xa-tabs label[for="xa-1"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-2:checked ~ .xa-tabs label[for="xa-2"]{background:#171717;color:#fff}
#xa-2:checked ~ .xa-tabs label[for="xa-2"] em{background:#3a3a3a;color:#fff}
#xa-2:checked ~ .xa-panels .xa-p2{visibility:visible}
#xa-2:focus-visible ~ .xa-tabs label[for="xa-2"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-3:checked ~ .xa-tabs label[for="xa-3"]{background:#171717;color:#fff}
#xa-3:checked ~ .xa-tabs label[for="xa-3"] em{background:#3a3a3a;color:#fff}
#xa-3:checked ~ .xa-panels .xa-p3{visibility:visible}
#xa-3:focus-visible ~ .xa-tabs label[for="xa-3"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-4:checked ~ .xa-tabs label[for="xa-4"]{background:#171717;color:#fff}
#xa-4:checked ~ .xa-tabs label[for="xa-4"] em{background:#3a3a3a;color:#fff}
#xa-4:checked ~ .xa-panels .xa-p4{visibility:visible}
#xa-4:focus-visible ~ .xa-tabs label[for="xa-4"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-5:checked ~ .xa-tabs label[for="xa-5"]{background:#171717;color:#fff}
#xa-5:checked ~ .xa-tabs label[for="xa-5"] em{background:#3a3a3a;color:#fff}
#xa-5:checked ~ .xa-panels .xa-p5{visibility:visible}
#xa-5:focus-visible ~ .xa-tabs label[for="xa-5"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-6:checked ~ .xa-tabs label[for="xa-6"]{background:#171717;color:#fff}
#xa-6:checked ~ .xa-tabs label[for="xa-6"] em{background:#3a3a3a;color:#fff}
#xa-6:checked ~ .xa-panels .xa-p6{visibility:visible}
#xa-6:focus-visible ~ .xa-tabs label[for="xa-6"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-7:checked ~ .xa-tabs label[for="xa-7"]{background:#171717;color:#fff}
#xa-7:checked ~ .xa-tabs label[for="xa-7"] em{background:#3a3a3a;color:#fff}
#xa-7:checked ~ .xa-panels .xa-p7{visibility:visible}
#xa-7:focus-visible ~ .xa-tabs label[for="xa-7"]{outline:2px solid var(--ink);outline-offset:2px}
#xa-8:checked ~ .xa-tabs label[for="xa-8"]{background:#171717;color:#fff}
#xa-8:checked ~ .xa-tabs label[for="xa-8"] em{background:#3a3a3a;color:#fff}
#xa-8:checked ~ .xa-panels .xa-p8{visibility:visible}
#xa-8:focus-visible ~ .xa-tabs label[for="xa-8"]{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:900px){
	.xa{grid-template-columns:1fr}
	.xa-tabs{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;scrollbar-width:none}
	.xa-tabs::-webkit-scrollbar{display:none}
	.xa-tab{flex:0 0 auto;white-space:nowrap;padding:10px 14px;font-size:15px}
	.xa-panel{padding:24px}
	.xa-hand{display:none}
}

.xa-hand,.xa-arr{z-index:3}

/* Feature request: early tester option (v3.36.0) */
.ss-form .frq-test{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fafafa;cursor:pointer;font-weight:400}
.frq-test input{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto}
.frq-test span{color:var(--text-2);line-height:1.5}
.frq-test strong{color:var(--ink);font-weight:600}
.frq-test em{font-style:normal;display:block;font-size:14px}
.frq-test:has(input:checked){border-color:var(--ink);background:#fff}
.frq-test:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.frq-test input{accent-color:#171717}

/* Cookie policy table (v3.37.0) */
.ss-table-wrap{overflow-x:auto;margin:8px 0 20px;border:1px solid var(--line);border-radius:12px}
.ss-prose table{width:100%;border-collapse:collapse;font-size:15px}
.ss-prose th,.ss-prose td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--text);line-height:1.5}
.ss-prose thead th{border-top:0;background:#f6f6f7;font-weight:600;color:var(--ink);white-space:nowrap}
.ss-prose td code{font-size:.9em;background:#f6f6f7;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.ss-prose td em{font-style:normal;color:var(--text-2);font-size:13px}

/* Contact page (v3.38.0) */
.ct-mail{margin:0 0 6px !important;font-size:1.25rem;font-weight:600}
.frq-side .frq-ship li{line-height:1.5}
.ss-section:has(.frq-grid) > .ss-in{padding-top:12px}

/* Features highlights: a different doodle for each (v3.41.0) */
.ftr-stage .ftr-note{display:none}
.ftr-stamp{position:absolute;right:26px;top:14px;transform:rotate(9deg);font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:38px;line-height:1;color:#ff5b3a;border:3px solid #ff5b3a;border-radius:12px;padding:4px 14px 6px;background:rgba(255,255,255,.75);z-index:3;pointer-events:none}
.ftr-stamp::after{content:"";position:absolute;inset:3px;border:1.5px dashed #ff5b3a;border-radius:8px;opacity:.55}
.ftr-cap1{left:34px;bottom:16px;font-size:26px;transform:rotate(-2deg);z-index:3;pointer-events:none}
.ftr-spark{position:absolute;fill:none;stroke:#ff5b3a;stroke-width:2.6;stroke-linejoin:round;pointer-events:none;z-index:3}
.ftr-spark.sp1{left:16px;top:18px;width:38px;height:38px;transform:rotate(-8deg)}
.ftr-spark.sp2{right:22px;top:30px;width:26px;height:26px;transform:rotate(10deg)}
.ftr-spark.sp3{right:70px;top:8px;width:16px;height:16px}
.ftr-bubble{position:absolute;right:30px;bottom:12px;z-index:3;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:25px;line-height:1.05;color:#ff5b3a;border:2.6px solid #ff5b3a;border-radius:22px;padding:8px 18px 10px;background:#fff;transform:rotate(-2deg);text-align:center;pointer-events:none}
.ftr-bubble::before{content:"";position:absolute;left:26px;top:-13px;width:18px;height:18px;background:#fff;border-left:2.6px solid #ff5b3a;border-top:2.6px solid #ff5b3a;transform:rotate(45deg) skew(8deg,8deg)}
.ftr-postit{position:absolute;right:20px;bottom:10px;z-index:3;width:196px;padding:22px 16px 16px;background:#fff1a6;color:#4a3b00;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:26px;line-height:1.05;text-align:center;transform:rotate(4deg);box-shadow:0 6px 14px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.12);pointer-events:none}
.ftr-postit i{position:absolute;left:50%;top:-10px;width:70px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,91,58,.45)}
.ftr-stage:has(.ftr-cap1),.ftr-stage:has(.ftr-bubble),.ftr-stage:has(.ftr-postit){padding-bottom:88px}
@media (max-width:720px){
	.ftr-spark{display:none}
	.ftr-stamp{font-size:28px;right:14px;top:8px}
	.ftr-cap1{left:18px;font-size:22px}
	.ftr-bubble{position:absolute;right:14px;font-size:21px;color:#cc3416}
	.ftr-postit{width:170px;font-size:22px;right:12px}
}

/* Phone polish (v3.42.0) */
@media (max-width:600px){
	/* slimmer cookie notice */
	.ss-cc{left:8px;right:8px;bottom:8px;width:auto;padding:12px 14px;border-radius:12px}
	.ss-cc #ss-cc-t{display:none}
	.ss-cc p{font-size:13px;margin:0}
	.ss-cc-btns{margin-top:8px}
	.ss-cc-btns button{height:38px;font-size:14px}
	/* readable top pill and hint notes */
	.ss-announce span,.ss-announce a{font-size:13px}
	.ss-hand.t2{margin-bottom:8px}
	.ss-form .frq-send .ss-note{line-height:1.5}
	.frq-chip{padding:7px 12px;font-size:13px}
}
/* bigger invisible tap areas, no change to layout */
.ss-cc-open,.ss-brand,.ss-announce a{position:relative}
.ss-cc-open::after,.ss-brand::after,.ss-announce a::after{content:"";position:absolute;inset:-10px -6px}

/* Contact page: email compose window (v3.43.0) */
.ct-hero .ss-in{padding-top:48px;padding-bottom:20px}
.ct-title{position:relative;display:inline-block;max-width:100%}
.ct-title h1{margin:0}
.ct-hand{position:absolute;left:calc(100% + 30px);top:14px;font-size:34px;transform:rotate(-4deg);white-space:nowrap}
.ct-hero .ss-lead{margin-top:14px}
.ct-sec{padding-top:8px}
.ct-stage{margin-top:8px;padding:clamp(16px,4vw,48px)}
.xc2{max-width:840px;margin:0 auto;border-radius:16px}
.xc2-body{padding:6px 28px 26px;background:#fff}
.xc2-r{display:flex;align-items:center;gap:14px;padding:13px 0;border:0;border-bottom:1px solid var(--line);margin:0;min-width:0}
.xc2-r em{font-style:normal;color:var(--text-2);width:56px;flex:0 0 56px;font-size:14px}
.xc2-r legend{padding:0;float:left;width:70px;margin:0}
.xc2-about{display:flex}
.xc2-chip{background:#f0f0f2;border-radius:999px;padding:5px 14px;font-weight:600}
.ss-form.xc2-body .xc2-r input[type=text],.ss-form.xc2-body .xc2-r input[type=email]{flex:1;min-width:0;border:0;padding:8px 0;background:transparent;border-radius:0;font-size:16px}
.ss-form.xc2-body .xc2-r input[type=text]:focus-visible,.ss-form.xc2-body .xc2-r input[type=email]:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.ss-form.xc2-body textarea{border:0;border-radius:0;padding:18px 0;font-size:17px;resize:none;min-height:190px;background:transparent}
.ss-form.xc2-body textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.xc2 .frq-pills{margin:0}
.ss-form.xc2-body .frq-pills label{margin:0;padding:7px 14px;font-size:15px}
.xc2-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.ss-form.xc2-body .xc2-foot .ss-note{margin:0 !important;font-size:13px;flex:1 1 220px}
.xc2-foot .frq-count{margin-left:auto}
.xc2-done{padding:36px 28px;background:#fff}
.xc2-err{margin:16px 28px 0 !important}
.ct-links{list-style:none;margin:28px auto 0;padding:0;max-width:840px;display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--text-2);font-size:15px}
.ct-links strong{color:var(--ink);font-weight:600}
@media (max-width:1099px){.ct-hand{position:static;display:block;margin:6px 0 0;transform:rotate(-2deg)}}
@media (max-width:600px){
	.xc2-body{padding:4px 16px 20px}
	.xc2-r{flex-wrap:wrap;gap:6px}
	.xc2-r em{width:100%;flex-basis:100%}
	.xc2-from input{flex:1 1 100% !important;border-bottom:1px solid var(--line) !important}
	.xc2-about legend{float:none;width:100%}
	.ss-form.xc2-body textarea{min-height:170px}
}
.ct-sec > .ss-in{padding-top:0}

/* Contact fixes (v3.43.1) */
.ss-form.xc2-body textarea{margin-bottom:14px}
.ss-form.xc2-body textarea:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:6px}
.xc2-foot{margin-top:0}
.ct-links{margin-top:22px;max-width:none;justify-content:center;gap:6px 26px;font-size:14.5px;text-align:center}
@media (max-width:600px){.ct-links{justify-content:flex-start;text-align:left}}

/* Feature deep-dive pages (v3.44.0) */
.ss-crumb{margin:0 0 10px !important;font-size:14px;color:var(--text-2)}
.ss-crumb a{color:var(--text-2)}
.seoc-list{columns:2;column-gap:40px}
.seoc-list li{break-inside:avoid}
.ss-d-wl .ap-tpl:last-child{position:relative}
.ss-d-wl .ap-tpl:last-child .ap-tpli{position:relative}
.ss-d-wl .ap-tpl:last-child .ap-tpli::after{content:"";position:absolute;inset:-4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}

.wl-cap{position:static}
@media (max-width:900px){.seoc-list{columns:1}}
@media (max-width:1099px){}

.ss-d-cr2 .ap-ring,.ss-d-cr2 .ap-chip2:last-child{position:relative}
.ss-d-cr2 .ap-ring::after{content:"";position:absolute;inset:-14px -14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-cr2 .ap-chip2:last-child::after{content:"";position:absolute;inset:-10px -14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}

.ss-d-wl .ap-tgrid{position:relative}
.ss-d-wl .wl-note{position:absolute;right:9%;bottom:64px;font-size:30px;line-height:1.05;color:#ff5b3a;transform:rotate(-4deg);white-space:nowrap;pointer-events:none;z-index:3}

/* Features dropdown in the header, wider footer (v3.45.0) */
.ss-hasmenu{position:relative;display:flex}
.ss-chev{width:12px;height:12px;margin-left:5px;flex:0 0 auto;opacity:.6}
.ss-mega{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);padding-top:12px;z-index:60}
.ss-mega-in{width:min(700px,92vw);box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:18px;display:grid;grid-template-columns:1.3fr 1fr;gap:6px 24px;text-align:left}
.ss-hasmenu:hover .ss-mega,.ss-hasmenu:focus-within .ss-mega{display:block}
.ss-mcol .ss-mh{margin:0 0 8px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.ss-links .ss-mega a{height:auto;font-weight:500}
.ss-links .ss-mi{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:10px;font-size:14px}
.ss-mi i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ss-mi i svg{width:15px;height:15px}
.ss-mi b{display:block;font-weight:600;color:var(--ink)}
.ss-mi em{display:block;font-style:normal;font-size:13px;font-weight:400;color:var(--text-2);line-height:1.4}
.ss-links .ss-mchecks a{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;font-size:14px}
.ss-links .ss-mega a:hover{background:var(--hover)}
.ss-mega-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.ss-links .ss-mega-foot a{display:inline-flex;align-items:center;height:36px;padding:0 10px;font-weight:600;font-size:14px;border-radius:8px}
.ss-links .ss-mega a:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
/* Footer (v3.50.3): brand on its own top row, then all five link columns side by side */
.ss-in.ss-ftr-in{grid-template-columns:repeat(4,1fr);gap:32px;align-items:start}
.ss-ftr-brand{grid-column:1/-1;display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ss-ftr-brand p{margin:0;flex:1 1 320px;max-width:36em}
.ss-ftr-col a{align-items:flex-start;line-height:1.35;padding:6px 0}
.ss-ftr-col .ss-ftr-h{font-family:var(--ui);font-size:13px;font-weight:600;margin:0 0 14px;color:var(--ink);line-height:1.3}
.ss-ftr-legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{color:var(--text-2) !important;text-decoration:none;font-size:13px}
.ss-ftr-legal a:hover,.ss-ftr-legal .ss-cc-open:hover{color:var(--ink) !important}
@media (max-width:900px){.ss-ftr-legal{gap:0 14px}.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{display:inline-flex;align-items:center;min-height:44px}}
@media (max-width:1000px){.ss-in.ss-ftr-in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
	.ss-hasmenu{display:block}
	.ss-hasmenu > a{width:100%}
	.ss-chev{display:none}
	.ss-mega{display:block;position:static;transform:none;padding:0}
	.ss-mega-in{width:auto;box-shadow:none;border:0;border-radius:0;padding:0 0 4px 12px;grid-template-columns:1fr;display:block}
	.ss-mchecks,.ss-mcol .ss-mh,.ss-mi i,.ss-mi em,.ss-mega-foot{display:none !important}
	.ss-links .ss-mega a.ss-mi{padding:0 4px;height:44px;align-items:center;border-bottom:1px solid var(--line);border-radius:0;font-size:15px}
	.ss-links .ss-mi b{font-weight:500;color:var(--text-2)}
	.ss-in.ss-ftr-in{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.ss-in.ss-ftr-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.ss-ftr-col a{padding:0;min-height:40px;align-items:center}}

/* Square mock-up frames (v3.46.0): every mock-up sits in a square and long ones are cropped to the useful part */
.ss-stage.ss-sq{box-sizing:border-box;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(18px,5vw,44px);overflow:hidden;position:relative;margin-top:0}
.ss-sq > .ss-win{width:100%;max-width:100%;max-height:100%;margin:0;overflow:hidden;position:relative}
.ss-sq > .ss-win.ss-crop{width:100%;margin-left:0}
.ss-sq .ftr-note{display:none}
/* the PowerPoint export: show the last four templates so Custom / White-label is in view */
.ss-d-wl.ss-sq .ap-cl{display:none}
.ss-d-wl.ss-sq .ap-tgrid .ap-tpl:nth-child(-n+7){display:none}
.ss-d-wl.ss-sq .ap-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:721px){.ss-d-wl.ss-sq .ap-tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ss-d-wl.ss-sq .wl-note{display:none}
.ss-d-wl .wl-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;display:block;font-size:28px;transform:rotate(-2deg)}
.ss-d-wl.ss-sq{padding-bottom:64px}
.ss-d-report.ss-sq .ss-hand.r2{position:absolute;left:0;right:0;bottom:10px;text-align:center;margin:0}

.ss-stage.ss-d-wl.ss-sq{max-width:660px;margin-left:auto;margin-right:auto}

/* Features dropdown: third column (v3.47.0) */
.ss-mega-in{grid-template-columns:1.2fr 1.2fr 1fr 1fr;width:min(1120px,94vw)}
.ss-links .ss-mmore a{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;font-size:14px}
@media (max-width:900px){.ss-mmore{display:none !important}}

/* Phone menu (v3.129.2): the wide desktop width above beat the mobile width, so the menu was wider than its panel and scrolled sideways.
   Show the first six features and a link to all of them, and hide the scrollbar (the menu still scrolls by touch). */
@media (max-width:900px){
	.ss-mega-in{width:auto;max-width:100%;box-sizing:border-box}
	.ss-hasmenu > a{box-sizing:border-box}
	.ss-mega-in > .ss-mcol:nth-child(2){display:none}
	.ss-links .ss-mega-foot{display:block !important;border-top:0;margin:0;padding:0}
	.ss-links .ss-mega-foot a{display:flex;align-items:center;width:100%;box-sizing:border-box;height:44px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink)}
	.ss-nav{scrollbar-width:none;-ms-overflow-style:none}
	.ss-nav::-webkit-scrollbar{display:none}
}

/* Dropdown lines up with the page grid (v3.47.1) */
.ss-hdr-in{position:relative}
@media (min-width:901px){
	.ss-hasmenu{position:static}
	.ss-mega{left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);transform:none;padding-top:0}
	.ss-mega-in{width:auto;margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0;box-shadow:0 18px 40px rgba(0,0,0,.10)}
	.ss-mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
}

@media (max-width:720px){.ss-d-wl.ss-sq .ap-tgrid .ap-tpl:nth-child(-n+9){display:none}}

.ftr-row > *,.ftr-vis{min-width:0}
.ss-stage.ss-sq{max-width:100%;min-width:0}
.ss-sq > .ss-win{min-width:0}
.ss-sq .ap{min-width:0;max-width:100%}
@media (max-width:720px){.ss-sq .ap-chips2{flex-wrap:wrap}}

/* captions stay pinned inside square frames on every screen size */
.ss-sq > .ftr-cap1{position:absolute;left:18px;right:18px;bottom:14px;margin:0;text-align:left;white-space:normal}

/* real project-settings replica (crawl-controls page) */
.ps{font-size:13px}
.ps-lab{margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--a-mut)}
.ps .fm-head{margin-bottom:0}
.ps .fm-srow{padding:9px 12px;font-size:13px}
.ps .fm-srow > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ps small{font-size:11px;color:var(--a-mut);font-weight:400;line-height:1.35}
.ps-sel,.ps-num,.ps-in,.ps-code,.ps-area{border:0.5px solid var(--a-line);border-radius:8px;background:#fff;padding:5px 10px;font-weight:500;position:relative}
.ps-num{min-width:52px;text-align:center}
.ps-code{font-family:ui-monospace,Menlo,monospace;font-size:11px;text-align:left;font-weight:400}
.ps-help{margin:0 0 6px;font-size:11px;color:var(--a-mut)}
.ps-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps-in{color:var(--a-mut);font-weight:400}
.ps-area{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:400}
.ps-seg{display:grid;grid-template-columns:repeat(4,1fr);border:0.5px solid var(--a-line);border-radius:8px;overflow:hidden;text-align:center}
.ps-seg span{padding:7px 0}
.ps-seg .on{background:#18181b;color:#fff;font-weight:600}

/* free tools */
.tl-sec{padding-top:8px}
.tl{max-width:860px;margin:0 auto}
.tl-form{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.tl-form label{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.tl-row{display:flex;gap:10px}
.tl-form input[type=text],.tl-form select{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:16px;color:var(--text)}
.tl-form input[type=text]:focus,.tl-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.tl-row .ss-btn{flex:0 0 auto;height:48px;padding:0 22px;white-space:nowrap}
.tl-row .ss-btn[disabled]{opacity:.65;cursor:wait}
.tl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tl-fine{margin:12px 0 0;font-size:13px;color:var(--text-2)}
.tl-out{margin-top:22px}
.tl-wait{color:var(--text-2);margin:0}
.tl-verdict{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);font-weight:600}
.tl-verdict.tl-ok{background:#ecfdf3;border-color:#bbf7d0;color:#166534}
.tl-verdict.tl-warn{background:#fff7ed;border-color:#fed7aa;color:#9a4d06}
.tl-verdict.tl-bad{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.tl-verdict code{font-family:var(--mono);font-size:.92em;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:4px}
.tl-card2{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:20px;margin-bottom:16px}
.tl-card2 h3{margin:0 0 12px;font-size:17px}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tl-i{display:flex;gap:12px;align-items:flex-start}
.tl-i strong{font-weight:600}
.tl-i p{margin:2px 0 0;color:var(--text-2);font-size:14px;overflow-wrap:anywhere}
.tl-badge{flex:0 0 auto;min-width:54px;text-align:center;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tl-i.tl-ok .tl-badge{background:#ecfdf3;color:#166534}
.tl-i.tl-warn .tl-badge{background:#fff7ed;color:#9a4d06}
.tl-i.tl-bad .tl-badge{background:#fef2f2;color:#b91c1c}
.tl-i.tl-info .tl-badge{background:#eff6ff;color:#1d4ed8}
.tl-scroll{overflow-x:auto}
.tl-tbl{width:100%;border-collapse:collapse;border:0;font-size:14px}
.tl-tbl th{text-align:left;font-weight:600;color:var(--text-2);font-size:12px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);white-space:nowrap}
.tl-tbl td{padding:9px 10px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.tl-tbl tr:last-child td{border-bottom:0}
.tl-scroll + p{margin-top:18px}
.tl-u{overflow-wrap:anywhere;word-break:break-word;min-width:180px}
.tl-dim{color:var(--text-2);font-size:12px}
.tl-st{display:inline-block;min-width:38px;text-align:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tl-st.tl-ok{background:#ecfdf3;color:#166534}
.tl-st.tl-warn{background:#fff7ed;color:#9a4d06}
.tl-st.tl-bad{background:#fef2f2;color:#b91c1c}
.tl-badtxt{color:#b91c1c}
.tl-plain{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.tl-pre{margin:0;max-height:320px;overflow:auto;background:var(--soft);border-radius:var(--r-sm);padding:14px;font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tl-snip{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px;display:grid;gap:3px;max-width:640px}
.tl-snip-u{font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.tl-snip-t{font-size:20px;color:#1a0dab;line-height:1.3}
.tl-snip-d{font-size:14px;color:#4d5156;line-height:1.5}
.tl-og{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;max-width:560px}
.tl-og img,.tl-og-none{flex:0 0 38%;max-width:38%;aspect-ratio:1.91/1;object-fit:cover;background:var(--soft)}
.tl-og-none{display:grid;place-items:center;color:var(--text-2);font-size:13px}
.tl-og>div:last-child{padding:12px 14px;display:grid;gap:3px;align-content:center;min-width:0}
.tl-og-d{font-size:12px;color:var(--text-2);text-transform:uppercase}
.tl-og strong{font-size:15px}
.tl-og span:last-child{font-size:13px;color:var(--text-2)}
.tl-next{margin:18px 0 0;color:var(--text-2);font-size:14px}
.tl-h3{font-size:20px;margin:0 0 12px}
.tl-about{margin:0 0 12px}
.tl-links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.tl-links a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fff;color:var(--text)}
.tl-links a:hover{border-color:var(--accent)}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tl-card{display:block;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--card);color:var(--text)}
.tl-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tl-card i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#fff;margin-bottom:12px}
.tl-card i svg{width:20px;height:20px}
.tl-card h2{margin:0 0 6px;font-size:18px}
.tl-card p{margin:0;color:var(--text-2);font-size:14px}
@media (max-width:860px){.tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
	.tl-grid,.tl-two{grid-template-columns:1fr}
	.tl-row{flex-direction:column}
	.tl-row .ss-btn{width:100%}
	.tl-og{flex-direction:column}
	.tl-og img,.tl-og-none{flex:none;max-width:100%;width:100%}
}
.tl-i strong{font-size:15px}
.tl-i>div{min-width:0;font-size:15px}
.tl-card,.tl-card:hover,.tl-card *{text-decoration:none !important}
.tl-card h2{color:var(--text)}
.tl-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tl-two>div{min-width:0}
.tl-form select{display:block}
.tl-links a{text-decoration:none}
.tl-probs strong{font-weight:600}
.tl-more{margin-top:14px}

/* SEO audit checklist and template pages (v3.52.0) */
.ck-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px;max-width:860px}
.ck-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.ck-box{width:20px;height:20px;border:2px solid var(--line);border-radius:6px;margin-top:2px;background:var(--bg)}
.ck-list strong{display:block;font-size:16px;line-height:1.35;color:var(--ink)}
.ck-list p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.ck-list .ck-how a{color:var(--accent-text);font-weight:600;display:inline-block;padding:10px 4px;margin:-6px 0}
.ck-pri{font-size:12px;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;background:var(--soft);color:var(--text-2)}
.ck-pri.ck-high{background:#FDECEC;color:#B42318}
.ck-pri.ck-medium{background:#FFF4E0;color:#8A5300}
.ck-steps{margin:24px 0;padding:0 0 0 22px;display:grid;gap:12px;max-width:760px;color:var(--text-2);font-size:15px;line-height:1.5}
.ck-steps strong{color:var(--ink)}
.ck-pre{margin:12px 0 0;padding:16px 18px;max-width:760px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);font:13px/1.55 var(--mono);color:var(--ink);white-space:pre}
.ck-pre:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
@media (max-width:560px){.ck-list li{grid-template-columns:22px minmax(0,1fr);padding:14px}.ck-pri{grid-column:2;justify-self:start}}

/* about: maker card */
.ab-maker{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--soft);padding:20px;margin:12px 0 8px}
.ab-maker img{flex:0 0 auto;width:56px;height:56px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.ab-maker p{margin:0 0 10px}
.ab-maker p:last-child{margin-bottom:0}
@media (max-width:560px){.ab-maker{flex-direction:column}}
.ab-id{display:flex;gap:14px;align-items:center;margin:4px 0 18px}
.ab-id img{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff}
.ab-id div{display:grid;gap:2px}
.ab-id strong{font-size:18px}
.ab-id span{color:var(--text-2);font-size:14px}

.tl-miss{color:#B42318;font-weight:600}
/* Tool pages keep the roomy top. After a check the page scrolls to the search box instead (v3.54.3) */
.tl-form input[type=text],.tl-form select{box-sizing:border-box}

/* Home: "More than an SEO crawler" as tabs (brand colours only) */
.ss-tabs{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.ss-tabs-l{display:flex;flex-direction:column;background:var(--soft);border-right:1px solid var(--line)}
.ss-tabs-l button{appearance:none;text-align:left;font:inherit;font-size:16px;font-weight:500;color:var(--text-2);background:transparent;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line);padding:16px 20px;cursor:pointer;transition:background-color .15s,color .15s}
.ss-tabs-l button:last-child{border-bottom:0}
.ss-tabs-l button:hover{color:var(--ink);background:var(--hover)}
.ss-tabs-l button[aria-selected="true"]{color:var(--ink);background:var(--card);border-left-color:var(--accent)}
.ss-tabs-l button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ss-tabs-r{display:grid;padding:32px}
.ss-tabs-r > div{grid-area:1/1;visibility:hidden}
.ss-tabs-r > div.on{visibility:visible}
.ss-tabs-r h3{margin:0 0 8px}
.ss-tabs-r p{margin:0;color:var(--text-2)}
@media (max-width:720px){.ss-tabs{grid-template-columns:1fr}.ss-tabs-l{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}.ss-tabs-l button:last-child:nth-child(odd){grid-column:1/-1}.ss-tabs-l button{white-space:normal;text-align:center;border-left:0;border-bottom:3px solid transparent;border-right:0;padding:14px 10px;line-height:1.3}.ss-tabs-l button[aria-selected="true"]{border-bottom-color:var(--accent)}.ss-tabs-r{padding:22px}}

/* HTML sitemap page */
.ss-map h2 { font-size: 1.1rem; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; }
.ss-map h2 span { font-size: .8rem; font-weight: 600; color: var(--text-2); background: var(--soft); border-radius: 999px; padding: 2px 10px; }
.ss-map ul { list-style: none; padding: 0; margin: 0; }
.ss-map li { margin: 0; border-top: 1px solid var(--line); }
.ss-map li a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; }
.ss-map li a:hover { color: var(--text-2); }
.ss-map-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

/* Mock app screens: This week's fixes (Dashboard) and Backup */
.wk{padding:18px 20px}.wk-grp{margin:12px 0 4px;padding:5px 8px;background:#f4f4f5;border-radius:4px;font-size:11.5px;color:var(--a-mut)}
.wk-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:0.5px solid var(--a-line);font-size:13px}
.wk-t{flex:1;min-width:0;display:flex;flex-direction:column}.wk-t small{color:var(--a-mut);font-size:11.5px}
.wk-cb{width:16px;height:16px;border:1px solid #a1a1aa;border-radius:4px;flex:none;background:#fff}.wk-cb.on{background:var(--a-ok);border-color:var(--a-ok);box-shadow:inset 0 0 0 3px #fff}
.wk-tag{font-size:11px;padding:2px 8px;border-radius:5px;background:#f4f4f5;color:var(--a-mut);white-space:nowrap}
.wk-tag.wk-med{background:#fbeee3;color:var(--a-warn)}.wk-tag.wk-hi{background:#fde8e8;color:var(--a-err)}.wk-tag.wk-ok{background:#e8f5ec;color:#14753a}.wk-tag.wk-info{background:#e6f2fb;color:var(--a-info)}
.wk-bar{height:5px;background:#e4e4e7;border-radius:3px;margin-top:14px;overflow:hidden}.wk-bar i{display:block;height:100%;background:var(--a-ok)}
.bk{padding:18px 20px}.bk-card{border:0.5px solid var(--a-line);border-radius:8px;padding:12px 14px;margin-top:10px;background:#fff;display:flex;flex-direction:column;gap:4px;font-size:13px}
.bk-card small{color:var(--a-mut);font-size:11.5px;line-height:1.45}.bk-card p{margin:6px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.bk-btn{font-size:12px;padding:6px 12px;border:0.5px solid var(--a-line);border-radius:6px;background:#fff;color:var(--a-ink)}.bk-btn.dark{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}

/* Feature-page screens: aligned columns, circled highlight, handwritten notes (v3.66.0) */
.fm-tbl.c2 .fm-row{display:grid;grid-template-columns:1.6fr 1fr;justify-content:normal}
.fm-tbl.c3 .fm-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;justify-content:normal}
.fm-tbl.c3.wide .fm-row{grid-template-columns:1fr 1.2fr 1fr}
.fm-tbl .fm-row > span{min-width:0;text-align:left}
.fm-tbl .fm-row > span:last-child:not(:first-child){text-align:left}
.fm .ss-circ{position:relative;display:inline-block}
.fm .ss-circ::after{content:"";position:absolute;inset:-12px -16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-report.ss-sq .ss-hand.r2.ss-note-d{top:auto;font-size:28px;transform:rotate(-2deg)}
.ss-d-report.ss-sq .ss-dd.r4{display:block;position:absolute;left:50%;bottom:50px;width:46px;height:40px;margin-left:-23px}
@media (max-width:1099px){.ss-d-report.ss-sq .ss-dd.r4{display:none}}
@media (max-width:720px){
.fm-tbl .fm-row{gap:8px !important;padding:10px !important}
.fm-tbl .fm-row > span{font-size:12px;overflow-wrap:anywhere}
.fm .ss-circ::after{display:none}
.ss-d-report.ss-sq{padding-bottom:56px}
}

/* Different doodle per page (v3.67.0) */
.fm .ss-uline{position:relative;display:inline-block}
.fm .ss-uline::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-9px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C20 2 30 14 50 8S80 2 98 8' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.fm .ss-rect{position:relative;display:inline-block}
.fm .ss-rect::after{content:"";position:absolute;inset:-9px -12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M6 10C40 4 80 6 114 6C118 20 117 32 114 44C80 48 40 46 6 45C3 32 3 20 6 10Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.fm .ss-scrib{position:relative;display:inline-block}
.fm .ss-scrib::after{content:"";position:absolute;inset:-12px -18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z M16 30C30 10 80 6 108 22c10 14-14 36-52 36C24 58 8 46 16 30Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.fm .ss-pop{position:relative;display:inline-block}
.fm .ss-pop::after{content:"";position:absolute;inset:-16px -20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M20 44L6 30 M40 36L36 8 M64 42L84 22 M70 60L96 62' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-report.ss-sq .ss-hand.r2.cap-t{top:14px;bottom:auto}
.ss-d-report.ss-sq .ss-hand.r2.cap-r{left:auto;right:22px;text-align:right}
.ss-d-report.ss-sq .ss-hand.r2.cap-l{right:auto;left:22px;text-align:left}
.ss-d-report.ss-sq .ss-dd.ar{display:block;position:absolute;width:56px;height:56px;margin:0}
.ss-d-report.ss-sq .ss-dd.ar-2{right:70px;bottom:46px}
.ss-d-report.ss-sq .ss-dd.ar-3{left:80px;bottom:46px}
.ss-d-report.ss-sq .ss-dd.ar-4{right:90px;top:46px}
.ss-d-report.ss-sq .ss-dd.ar-5{right:60px;bottom:46px}
.ss-d-report.ss-sq .ss-dd.ar-6{left:70px;top:44px}
@media (max-width:1099px){.ss-d-report.ss-sq .ss-dd.ar{display:none}.ss-d-report.ss-sq .ss-hand.r2.cap-t,.ss-d-report.ss-sq .ss-hand.r2.cap-r,.ss-d-report.ss-sq .ss-hand.r2.cap-l{top:auto;left:0;right:0;text-align:center}}
@media (max-width:720px){.fm .ss-uline::after,.fm .ss-rect::after,.fm .ss-scrib::after,.fm .ss-pop::after{display:none}}

/* Call to action under a free-tool result */
.tl-cta{margin:24px 0 0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:var(--text)}
.tl-cta p{margin:0 0 12px;color:var(--text-2)}
.tl-cta .tl-fine{margin:10px 0 0}

/* Home page: Homebrew install box with a copy button */
.ss-brew{margin:28px auto 0;max-width:560px;text-align:center}
.ss-brew-l{display:block;margin:0 0 10px;font-size:.9rem;color:var(--text-2)}
.ss-brew-box{display:flex;align-items:stretch;background:var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow);text-align:left;overflow:hidden}
.ss-brew-code{flex:1 1 auto;min-width:0;margin:0;padding:16px 18px;display:flex;align-items:center;overflow-x:auto;background:transparent;border:0;border-radius:0;color:#c9c9cf;font:13px/1.75 var(--mono);white-space:pre}
.ss-brew-code code{font:inherit;color:inherit;background:transparent;padding:0}
.ss-brew-code b{color:#fff;font-weight:600}
.ss-brew-code .d{color:var(--accent);user-select:none}
.ss-brew-copy{flex:0 0 56px;display:grid;place-items:center;margin:0;padding:0;border:0;border-left:1px solid #3a3a3f;border-radius:0;background:transparent;color:#e7e7ea;cursor:pointer}
.ss-brew-copy:hover{background:#26262a}
.ss-brew-copy:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.ss-brew-copy svg{width:20px;height:20px;grid-area:1/1}
.ss-brew-copy .c2{opacity:0;color:#4ade80}
.ss-brew-copy.ok .c1{opacity:0}
.ss-brew-copy.ok .c2{opacity:1}
.ss-brew-s{display:block;min-height:1.4em;margin-top:6px;font-size:.85rem;color:var(--text-2)}
@media (max-width:640px){.ss-brew-code{font-size:12px;padding:14px;white-space:pre-wrap;word-break:break-all;overflow-x:hidden}}

.ss-demo .ss-video{background:var(--soft)}
.ss-demo .ss-video .ss-in{padding-bottom:32px}
.ss-demo .ss-showcase .ss-in{padding-top:20px}
.ss-subblock{margin-top:72px}
.ss-subblock .ss-h3{margin-top:0 !important}
@media (max-width:720px){.ss-subblock{margin-top:48px}}
.ss-video-sub{max-width:40em;margin:-8px auto 28px}
/* phone and tablet: hand-drawn notes become tidy captions (same size, even gaps, never touching the text next to them) */
@media (max-width:1099px){
	.ss-main .ss-hand{font-size:22px;line-height:1.2;margin:12px auto 0;max-width:15em}
	.ss-main .ss-hand + .ss-hand{margin-top:4px}
	.ss-hero .ss-hand.h1{margin:0 auto 12px}
	.ss-main .ss-hand.t2{margin:4px auto 16px}
}
/* phone and tablet: each note gets its own small arrow, stacked with the note and pointing at the picture or button it talks about */
@media (max-width:1099px){
	.ss-demo .ss-dd.t1{transform:rotate(90deg) !important;margin-top:14px !important}
	.ss-hero .ss-dd.h2,.ss-demo .ss-dd.t1,.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{display:block;position:static;width:54px;height:18px;margin:26px auto 20px;transform:rotate(-90deg)}
	.ss-demo .ss-hand.t2,.ss-d-fix .ss-hand.f2,.ss-d-report .ss-hand.r2,.ss-d-claude .ss-hand.c1{margin-top:0}
	.ss-hero .ss-actions{display:flex;flex-direction:column;align-items:center}
	.ss-hero .ss-hand.h1{order:1;margin:0 auto}
	.ss-hero .ss-dd.h2{order:2;transform:rotate(90deg);margin:22px auto 24px}
	.ss-hero .ss-actions .ss-btn{order:3}
}
@media (max-width:720px){.ss-hero .ss-actions{align-items:stretch}.ss-hero .ss-dd.h2{align-self:center}}
/* play button over the home page video: shown only when the script runs, hidden while playing */
.ss-video-frame{position:relative}
.ss-video-play{position:absolute;inset:0;margin:auto;width:max-content;height:64px;display:inline-flex;align-items:center;gap:10px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 17px/1 var(--ui);cursor:pointer;box-shadow:var(--shadow-lg)}
.ss-video-play[hidden]{display:none}
.ss-video-play svg{width:20px;height:20px;flex:none}
.ss-video-play:hover{background:#34343a}
.ss-video-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (max-width:640px){.ss-video-play{height:56px;padding:0 22px;font-size:16px}}
/* Features page on phones: keep room under each picture so the hand-drawn note sits below it, not on top of the text */
@media (max-width:720px){
	.ftr-stage.ss-sq:has(.ftr-cap1){padding-bottom:68px}
	.ftr-stage.ss-sq:has(.ftr-bubble){padding-bottom:92px}
}
/* phone and tablet: smaller arrows and one-line notes so the hand-drawn bits take little height */
@media (max-width:1099px){
	.ss-hero .ss-dd.h2,.ss-demo .ss-dd.t1,.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{width:40px;height:14px;margin:14px auto}
	.ss-hero .ss-actions{gap:12px 10px}   /* room between the two download buttons; the doodle keeps its old spacing through the negative margin below */
	.ss-hero .ss-hand.h1{margin-bottom:-12px}
	.ss-hero .ss-dd.h2{margin-bottom:2px}
	.ss-hero .ss-hand.h1 br,.ss-d-fix .ss-hand br,.ss-d-report .ss-hand.r2 br{display:none}
}
/* feature pages on phones: keep room under square pictures so hand-drawn captions sit below the picture, not on top of its text */
@media (max-width:720px){
	.ss-stage.ss-sq:has(> .ss-hand:not(.ss-lg-only)){padding-bottom:68px}
}
@media (max-width:720px){
	.ftr-stage.ss-sq > .ftr-crop{height:100% !important;max-height:100% !important}
}
@media (max-width:720px){
	/* the Claude conversation keeps its full "example conversation" label on phones */
	.ftr-stage.ss-sq:has(.ftr-bubble){aspect-ratio:auto}
	.ftr-stage.ss-sq:has(.ftr-bubble) > .ftr-crop{height:auto !important;max-height:none !important}
}
@media (max-width:1099px){
	/* captions that sit at the top or side of a picture on desktop go under the picture on phones and tablets (they floated over its text) */
	.ss-d-report.ss-sq .ss-hand.r2.cap-t,.ss-d-report.ss-sq .ss-hand.r2.cap-r,.ss-d-report.ss-sq .ss-hand.r2.cap-l{top:auto;bottom:12px}
}
/* play button over the videos: icon only, round (the aria-label still says "Play ... with sound") */
.ss-video-play{width:92px;height:92px;padding:0;justify-content:center;gap:0;border-radius:50%}
.ss-video-play svg{width:38px;height:38px;margin-left:5px}
@media (max-width:640px){.ss-video-play{width:76px;height:76px;padding:0}.ss-video-play svg{width:32px;height:32px}}
.ss-video-play{width:68px;height:68px}
.ss-video-play svg{width:28px;height:28px;margin-left:4px}
@media (max-width:640px){.ss-video-play{width:56px;height:56px}.ss-video-play svg{width:23px;height:23px;margin-left:3px}}
.ss-video-play{width:52px;height:52px}
.ss-video-play svg{width:21px;height:21px;margin-left:3px}
@media (max-width:640px){.ss-video-play{width:44px;height:44px}.ss-video-play svg{width:18px;height:18px;margin-left:2px}}
/* centre: the play triangle's own centre of mass already sits in the middle of its box, so no extra nudge */
.ss-video-play svg,.ss-video-play svg{margin:0}
@media (max-width:640px){.ss-video-play svg{margin:0}}

/* Pricing: custom plan row; toggle no longer stretches on tablet and phone (site v0.104.0) */
.pr-custom{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1040px;margin:20px auto 0;padding:20px 28px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.pr-custom h3{margin:0 0 4px;font-size:1.1rem}
.pr-custom p{margin:0;color:var(--text-2);font-size:15px;line-height:1.5}
.pr-custom .ss-btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){.pr-custom{flex-direction:column;align-items:stretch;padding:20px}.pr-custom .ss-btn{width:100%}}
/* Download page on phone and tablet: buttons get a gap and a steady width, and note links stay inside their line instead of breaking it */
@media (max-width:1099px){
	.ss-hero-simple .ss-actions{gap:12px;align-items:stretch;max-width:420px;margin:0}
	.ss-hero-simple .ss-actions .ss-btn{width:100%}
	.ss-hero-simple .ss-note{line-height:1.6}
	.ss-hero-simple .ss-note a{display:inline;min-height:0}
}
@media (max-width:720px){.ss-hero-simple .ss-actions{max-width:none}}
/* Phone and desktop check (site 0.123.0) */
/* Links inside note text stay on their line instead of dropping to their own line with a big gap */
@media (max-width:720px){
	.ss-note a, p:not(.ss-actions) > .ss-more { display: inline; min-height: 0; }
	.ss-note { line-height: 1.6; }
	.ss-os-pane pre { white-space: pre-wrap; overflow-wrap: anywhere; }
	.ss-table-wrap table { min-width: 780px; }
	.tl-tbl-wide { min-width: 680px; }
	.tl-links a { padding: 11px 16px; }
}
.ss-os-pane pre { margin-bottom: 16px; }
.ss-prose ol { margin-left: 0; }
/* Tool pages: section titles use the size they were designed with, so "Common problems and fixes" fits on one line */
.ss-main .tl-h3 { font-size: 1.5rem; line-height: 1.2; }
/* FAQ titles: room above the first question, and centred over the list on pages with a narrow column */
h2:has(+ .ss-faq) { margin-bottom: 24px; }
.ss-narrow:has(> .ss-faq) > h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Free tools hub: the download button and link line up with the text above */
.ss-actions-left { justify-content: flex-start; align-items: center; gap: 12px 24px; margin: 0; }
@media (max-width:720px){ .ss-actions-left { align-items: stretch; max-width: none; } .ss-actions-left .ss-more { justify-content: center; } }
/* Pricing: the page frame lines run to the bottom of the three promises */
.pr-sec { padding-bottom: 0; }
.pr-sec .pr-wrap { padding-bottom: 40px; }
/* Drop-down lists: same arrow and spacing as the rest of the form */
.tl-form select, .ss-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b6b73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
/* Footer social icons (v3.108.0): small black rounded squares beside the copyright, same look as the footer link icons */
.ss-ftr-copy{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.ss-ftr-soc{display:flex;gap:8px}
.ss-ftr-soc a{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#1c1c1e;box-shadow:inset 0 0 0 1px #2e2e31;color:#fff !important;transition:background .15s}
.ss-ftr-soc a:hover{background:#2c2c2f}
.ss-ftr-soc svg{width:13px;height:13px}
@media (max-width:900px){.ss-ftr-soc a{width:44px;height:44px;border-radius:12px}.ss-ftr-soc svg{width:22px;height:22px}}
.ss-in.ss-ftr-base{align-items:center}
@media (min-width:901px){.ss-in.ss-ftr-base{display:flex;align-items:center}.ss-ftr-copy{white-space:nowrap}.ss-ftr-soc{margin:0 auto}.ss-ftr-base .ss-ftr-legal{justify-content:flex-end;gap:4px 10px;flex-wrap:nowrap}.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{font-size:inherit}}
@media (max-width:900px){
	.ss-in.ss-ftr-base{flex-direction:column;align-items:center;text-align:center;gap:4px;padding-top:24px}
	.ss-ftr-soc{order:1;gap:12px}
	.ss-ftr-base .ss-ftr-legal{order:2;justify-content:flex-start}
	.ss-ftr-copy{order:3;justify-content:center;padding-bottom:4px}
}
/* Small tidy-ups from the phone check (site 0.128.0) */
.frq-ship li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.frq-ship em { margin-right: 0; }
/* Sitemap page: cards flow in columns so there are no big empty areas, and link rows are easy to tap on phones */
.ss-map-grid { display: block; column-count: 3; column-gap: 18px; }
.ss-map-grid > .ss-map { break-inside: avoid; margin: 0 0 18px; }
@media (max-width:1000px){ .ss-map-grid { column-count: 2; } }
@media (max-width:640px){ .ss-map-grid { column-count: 1; } .ss-map li a { padding: 12px 0; } }
/* Closing call-to-action: room between the heading and its button */
.ss-final h2 + .ss-actions { margin-top: 12px; }
/* Footer brand row (v3.113.0): a soft grey band, logo and text on the left, Download button on the right */
.ss-ftr-brand{background:var(--soft);border:0;border-radius:var(--r-md);padding:20px 24px;justify-content:flex-start}
.ss-ftr-brand .ss-btn{margin-left:auto}
@media (max-width:560px){.ss-ftr-brand{padding:20px}.ss-ftr-brand .ss-btn{margin-left:0}}

.ss-final.ss-mid .ss-in{padding-top:56px;padding-bottom:56px}

/* Check pages (v3.120.0): issue tables stack on phones */
@media (max-width:720px){.fm-tbl.fm-stack .fm-row.fm-h{display:none !important}.fm-tbl.fm-stack .fm-row{display:block !important}.fm-tbl.fm-stack .fm-row > span:last-child{display:block;margin-top:6px}.fm-bar{white-space:nowrap}}
.ss-stage.ss-fit{aspect-ratio:auto}
.ss-stage.ss-fit .ss-win,.ss-stage.ss-fit .ss-win.ss-crop{max-height:none;height:auto}
.ss-stage.ss-fit .ss-win.ss-crop::after{display:none}
.ss-stage.ss-fit .ss-win > .ap::after{display:none}
@media (max-width:720px){.fm-tbl.fm-c3m .fm-row{grid-template-columns:var(--m-cols) !important;font-size:12px;padding:9px 8px !important;gap:6px !important}.fm-c3m .fm-row > span{overflow-wrap:anywhere}.fm-c3m .fm-bt{width:34px}.fm-c3m .fm-bar{gap:5px}}
@media (max-width:900px){#screen .ftr-row{padding-bottom:0}}

/* Blog post "In this article" box and "#" section links (v3.137.0). Tokens only, so dark mode follows.
   Narrow screens: one slim closed bar after the first paragraph. Wide screens (1200px+): a floating list in the empty space
   to the right of the text that stays in view while you read and marks the section you are in (js/post-toc.js). */
.ss-post h2,.ss-post h3{scroll-margin-top:88px}
.ss-toc{max-width:720px;margin:0 0 28px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md)}
.ss-toc summary{cursor:pointer;list-style:none}
.ss-toc summary::-webkit-details-marker{display:none}
.ss-toc > details > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.ss-toc summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);margin-top:-3px;flex:none}
.ss-toc details[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.ss-toc summary:focus-visible,.ss-toc a:focus-visible,a.ss-anchor:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:4px}
.ss-toc ol{margin:0;padding:0 14px 12px;list-style:none;counter-reset:toc}
.ss-toc > details > ol{columns:2;column-gap:20px}
.ss-toc > details > ol > li{counter-increment:toc;break-inside:avoid}
.ss-toc li{margin:0;padding:0;font-size:15px;line-height:1.4}
.ss-toc li > a,.ss-toc li > details > summary{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-radius:8px}
.ss-toc > details > ol > li > a::before,.ss-toc > details > ol > li > details > summary a::before{content:counter(toc);flex:none;min-width:1.2em;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.ss-toc li > details > summary{justify-content:space-between;align-items:center}
.ss-toc li > details > summary a{display:flex;gap:8px;flex:1}
.ss-toc li > details > summary::after{width:40px;height:32px;margin:-4px -6px -4px 0;border:0;transform:none;background:var(--text-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ss-toc li > details[open] > summary::after{margin:-4px -6px -4px 0;transform:rotate(180deg)}
.ss-toc li > details > ol{padding:0 0 4px 34px}
.ss-toc li li{font-size:14px}
.ss-post .ss-toc a{color:var(--ink);text-decoration:none}
.ss-post .ss-toc a:hover{color:var(--accent-text)}
.ss-toc li > a:hover,.ss-toc li > details > summary:hover{background:var(--hover)}
.ss-post .ss-toc a[aria-current]{color:var(--accent-text);font-weight:inherit;box-shadow:inset 2px 0 0 var(--accent-text);padding-left:6px;margin-left:2px}
.ss-post a.ss-anchor{margin-left:.35em;font-weight:400;text-decoration:none;color:var(--text-2);opacity:0}
.ss-post h2:hover a.ss-anchor,.ss-post h3:hover a.ss-anchor,.ss-post a.ss-anchor:focus-visible{opacity:1}
@media (hover:none){.ss-post a.ss-anchor{opacity:.5}}
@media (max-width:640px){.ss-toc > details > ol{columns:1}.ss-toc li > a,.ss-toc li > details > summary{padding-top:11px;padding-bottom:11px}.ss-toc li li > a{padding-top:9px;padding-bottom:9px}}
@media (min-width:1200px){
	.ss-post .ss-toc{float:right;position:sticky;top:96px;width:240px;max-width:240px;margin:0 0 0 24px;max-height:calc(100vh - 120px);overflow-y:auto;background:none;border:0;border-radius:0}
	.ss-toc > details > summary{padding:0 8px 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
	.ss-toc > details > summary::after{display:none}
	.ss-toc > details > ol{columns:1;padding:0}
	.ss-toc li{font-size:14px}
}

/* Blog post pictures, tables and quotes stay in the text column (v3.137.2); quotes are upright, not italic */
.ss-post > figure,.ss-post > table{max-width:720px}
.ss-post figure img{display:block;width:100%;height:auto}
.ss-post blockquote{font-style:normal}

/* Blog list, category pages and author box (v3.138.0). Tokens only, so dark mode follows. */
.ss-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.ss-cats .ss-chip{text-decoration:none;min-height:36px;padding:6px 14px;font-size:14px;transition:background-color .15s,border-color .15s,color .15s}
.ss-cats .ss-chip,.ss-pcard-meta .ss-chip{color:var(--ink)}
.ss-cats .ss-chip:hover{background:var(--hover)}
.ss-cats .ss-chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ss-reel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 28px;align-items:start}
.ss-reel-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:30px}
.ss-reel-item:nth-child(even){margin-top:44px}
.ss-reel-no{position:absolute;top:-6px;left:-2px;font-size:3.4rem;font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--text-2);opacity:.5;z-index:0}
.ss-reel-top{margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.ss-reel-top:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ss-reel-pinned{display:grid;grid-template-columns:1.15fr 1fr;gap:10px 34px;align-items:center;padding-top:0;grid-column:1/-1}
.ss-reel-pinned .ss-reel-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ss-reel-item.ss-reel-pinned h2{font-size:1.9rem !important;font-weight:400;letter-spacing:-.035em}
.ss-reel-pinned .ss-reel-desc{font-size:16px !important}
.ss-reel-pin{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--bg);padding:2px 8px;border-radius:4px}
.ss-reel-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ss-reel-pic{position:relative;z-index:1;align-self:stretch}
.ss-reel-pic>a:first-child{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft)}
.ss-reel-pic img{display:block;width:100%;height:auto;aspect-ratio:127/76;object-fit:cover}
.ss-reel-pic .ss-reel-play{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;z-index:2}
.ss-reel-kick{margin:6px 0 0 !important;font-size:12px !important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2) !important}
.ss-reel-kick a{background:#FFE27A;color:#171717;padding:2px 7px;border-radius:4px;text-decoration:none}
.ss-reel-item h2{margin:0 !important;font-size:1.2rem !important;line-height:1.3;letter-spacing:-.02em}
.ss-reel-item h2 a{color:var(--text);text-decoration:none}
.ss-reel-item h2 a:hover{text-decoration:underline}
.ss-reel-desc{margin:0 !important;font-size:15px !important;line-height:1.5 !important;color:var(--text-2)}
.ss-reel-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 0 !important}
@media (max-width:860px){.ss-reel-pinned{grid-template-columns:1fr}}
@media (max-width:700px){.ss-reel{grid-template-columns:1fr;gap:34px}.ss-reel-item,.ss-reel-item:nth-child(even){margin-top:0}}
.ss-bbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;background:#FFE27A;color:#171717 !important;border:1px solid #171717;box-shadow:2px 2px 0 #171717;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;transition:background .15s}
.ss-bbtn:hover{background:#ffd84d}
.ss-blink{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 4px;color:var(--text) !important;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;border-bottom:2px solid transparent;transition:border-color .15s}
.ss-blink:hover{border-bottom-color:currentColor}
.ss-bbtn svg,.ss-blink svg{flex:none}
.navigation.pagination{margin-top:40px}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.navigation.pagination a,.navigation.pagination span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px}
.navigation.pagination .current{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ss-abox{display:flex;gap:22px;align-items:flex-start;margin-top:48px;padding:26px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.ss-post .ss-abox-photo{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;background:transparent;border:0}
.ss-abox-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.ss-post .ss-abox h3{margin:2px 0 0;font-size:1.25rem}
.ss-post .ss-abox p{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
.ss-post .ss-abox .ss-abox-role{color:var(--ink);font-weight:600;margin-top:2px}
.ss-post .ss-abox .ss-abox-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ss-post .ss-abox .ss-abox-links a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);transition:background-color .15s,border-color .15s}
.ss-post .ss-abox .ss-abox-links a:hover{background:var(--hover);border-color:var(--text-2)}
.ss-post .ss-abox .ss-abox-links a:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.ss-post .ss-abox .ss-abox-links svg{width:20px;height:20px}
@media (max-width:560px){.ss-abox{flex-direction:column;padding:22px}.ss-abox-photo{width:72px;height:72px}}

/* Breadcrumbs and category tag on articles (v3.139.0) */
.ss-bc{margin:0 0 16px;font-size:14px;color:var(--text-2)}
.ss-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;padding:0;list-style:none}
.ss-bc li{margin:0;display:flex;align-items:center;min-width:0}
.ss-bc li+li::before{content:"/";margin:0 8px;color:var(--line)}
body.ss-page .ss-bc a{color:var(--text-2);text-decoration:none;padding:4px 0}
body.ss-page .ss-bc a:hover{color:var(--ink);text-decoration:underline}
.ss-bc li[aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60ch,70vw)}
.ss-post-meta .ss-chip{margin-right:8px;text-decoration:none;color:var(--ink);font-size:13px;padding:2px 10px}
.ss-post-meta .ss-chip:hover{background:var(--hover)}

/* ===== DARK MODE (v3.125.0) =====
   The app's dark colours (bg #141413, cards #1f1e1d, text #faf9f5, accent #74abe2). Switched by html[data-theme="dark"],
   which parts/theme-init.php sets before paint and parts/theme-toggle.php flips. The block after the tokens was generated from
   the rules above: light backgrounds, borders and dark text were remapped. New rules should use the :root tokens so they follow. */
html[data-theme="dark"] { color-scheme: dark; --accent-text: #74abe2; --ink: #faf9f5; --ink-hover: #e4e2da; --bg: #141413; --soft: #1a1918; --card: #1f1e1d; --hover: #262624; --line: #33322f; --text: #faf9f5; --text-2: #c2c0b6; --error: #fe8181; --warning: #e0a24a; --ok: #65bb30; --shadow: none; --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .ss-skip{color:#141413 !important}
html[data-theme="dark"] .ss-hdr{background:rgba(31,30,29,.92)}
html[data-theme="dark"] .ss-mark{color:transparent;box-shadow:0 0 0 1px rgba(250,249,245,.16)}
html[data-theme="dark"] .ss-btn{color:#141413 !important}
html[data-theme="dark"] .ss-btn-quiet:hover{border-color:#33322f}
html[data-theme="dark"] .ss-bad{background:color-mix(in srgb, var(--error) 10%, #1f1e1d)}
html[data-theme="dark"] .ss-warn{background:color-mix(in srgb, var(--warning) 11%, #1f1e1d)}
html[data-theme="dark"] .ss-ok{background:color-mix(in srgb, var(--ok) 10%, #1f1e1d)}
html[data-theme="dark"] #ss-t1:checked ~ .ss-tabbar label[for="ss-t1"], html[data-theme="dark"] #ss-t2:checked ~ .ss-tabbar label[for="ss-t2"], html[data-theme="dark"] #ss-t3:checked ~ .ss-tabbar label[for="ss-t3"]{border-color:#33322f}
html[data-theme="dark"] .ss-win-bar i{background:#262624}
html[data-theme="dark"] .ss-manifesto .ss-in{background-image:radial-gradient(#262624 1px, transparent 1px)}
html[data-theme="dark"] .ss-video-frame video{background:#262624}
html[data-theme="dark"] .ap{--a-line:#33322f;--a-mut:#c2c0b6;--a-err:#e17c80;--a-warn:#fab482;--a-info:#7ac0f8;--a-ok:#9aeeb9;--a-ink:#faf9f5;background:#1f1e1d}
html[data-theme="dark"] .ap-logo{background:#262624}
html[data-theme="dark"] .ap-red{background:#461813}
html[data-theme="dark"] .ap-btn{background:#1f1e1d}
html[data-theme="dark"] .ap-pri{background:#faf9f5;border-color:#faf9f5;color:#141413}
html[data-theme="dark"] .ap-sel{background:#262624}
html[data-theme="dark"] .ap-card{background:#1f1e1d}
html[data-theme="dark"] .ap-chips span, html[data-theme="dark"] .ap-chips button{background:#1f1e1d}
html[data-theme="dark"] .ap-chips button:hover{background:#262624}
html[data-theme="dark"] .ap-chips span.on, html[data-theme="dark"] .ap-chips button.on{background:#faf9f5;border-color:#faf9f5;color:#141413}
html[data-theme="dark"] .ap-table th{background:#1a1918}
html[data-theme="dark"] .ap-g{color:#9fefbb;background:#262624}
html[data-theme="dark"] .ap-r{background:#441313}
html[data-theme="dark"] .ap-tag{background:#262624}
html[data-theme="dark"] .ap-ring{background:conic-gradient(var(--c) calc(var(--v) * 1%), #262624 0)}
html[data-theme="dark"] .ap-ring b{background:#1f1e1d}
html[data-theme="dark"] .ap-proj{background:#1f1e1d}
html[data-theme="dark"] .ap-chip2{background:#262624}
html[data-theme="dark"] button.ap-row{background:#1f1e1d}
html[data-theme="dark"] button.ap-row:hover{background:#1a1918}
html[data-theme="dark"] .ap-more{background:#1f1e1d}
html[data-theme="dark"] .ap-more:hover{background:#262624}
html[data-theme="dark"] .ap-amb{background:#4d3118}
html[data-theme="dark"] .ap-blu{background:#1a3147}
html[data-theme="dark"] .ap-o{background:#4d3118}
html[data-theme="dark"] .ap-blk{background:#faf9f5;color:#141413}
html[data-theme="dark"] .ap-tpl{background:#1f1e1d}
html[data-theme="dark"] .ap-thumb{--tb:#1f1e1d}
html[data-theme="dark"] .ap-thumb .dn{background:conic-gradient(#cb8585 0 62%, var(--ring) 0)}
html[data-theme="dark"] .ap-custom{background:#262624}
html[data-theme="dark"] .ap-conn{background:#1f1e1d}
html[data-theme="dark"] .ap-badge{color:#9fefbb;background:#262624}
html[data-theme="dark"] .ap-done{background:#262624}
html[data-theme="dark"] .ss-ver{color:#141413}
html[data-theme="dark"] .ss-tag-new{color:#9fefbb;background:color-mix(in srgb, var(--ok) 10%, #1f1e1d)}
html[data-theme="dark"] .ss-tag-improved{background:color-mix(in srgb, var(--accent) 10%, #1f1e1d)}
html[data-theme="dark"] .ap-search{background:#1f1e1d}
html[data-theme="dark"] .ap-cnt{background:#262624}
html[data-theme="dark"] .ss-cmp thead th{background:#1a1918}
html[data-theme="dark"] .ss-cmp .ss-us{background:#1a1918}
html[data-theme="dark"] #os-mac:checked ~ .ss-os-tabs label[for="os-mac"], html[data-theme="dark"] #os-win:checked ~ .ss-os-tabs label[for="os-win"]{color:#141413}
html[data-theme="dark"] .ss-os-pane pre{background:#1a1918}
html[data-theme="dark"] .ss-fr-n{background:#1a1918}
html[data-theme="dark"] .ss-post code{background:#1a1918}
html[data-theme="dark"] .ss-post pre{background:#1a1918}
html[data-theme="dark"] .ss-post a{color:#7ac0f8}
html[data-theme="dark"] .ss-form-ok{background:#134427;color:#a8ecc2;border:1px solid #227640}
html[data-theme="dark"] .ss-form-err{background:#1a1918;color:#eb8f8f;border:1px solid #691515}
html[data-theme="dark"] .ss-crop::after{background:linear-gradient(rgba(31,30,29,0),#1f1e1d)}
html[data-theme="dark"] .ss-hand{color:#f18a75}
html[data-theme="dark"] .frq-steps b{background:#1a1918}
html[data-theme="dark"] .frq-ship em{background:#1a1918}
html[data-theme="dark"] .frq-chip{background:#1a1918}
html[data-theme="dark"] .frq-chip:hover{background:#262624}
html[data-theme="dark"] .frq-pills input:checked + label{color:#141413}
html[data-theme="dark"] .frq-check{background:#134427;color:#9aeeb9}
html[data-theme="dark"] .ss-cc-btns .ss-cc-yes{color:#141413}
html[data-theme="dark"] .fm-h{background:#1a1918}
html[data-theme="dark"] .fm-chip.ok{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .fm-chip.warn{background:#462d0c;color:#fab482}
html[data-theme="dark"] .fm-chip.mute{background:#262624;color:#c2c0b6}
html[data-theme="dark"] .fm-chip.err{background:#461813;color:#e17c80}
html[data-theme="dark"] .fm-bt{background:#262624}
html[data-theme="dark"] .fm-btn{background:#1f1e1d}
html[data-theme="dark"] .fm-you{background:#262624}
html[data-theme="dark"] .fm-tool code{background:#262624}
html[data-theme="dark"] .fm-tg{background:#262624}
html[data-theme="dark"] .fm-tg::after{background:#1f1e1d}
html[data-theme="dark"] .fm-tg.on{background:#faf9f5}
html[data-theme="dark"] .pr-tg{background:#262624}
html[data-theme="dark"] .pr-left{background:#1a1918}
html[data-theme="dark"] .xa-tabs{background:#1a1918}
html[data-theme="dark"] .xa-tab:hover{background:#262624}
html[data-theme="dark"] .xa-tab em{background:#262624}
html[data-theme="dark"] #xa-1:checked ~ .xa-tabs label[for="xa-1"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-2:checked ~ .xa-tabs label[for="xa-2"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-3:checked ~ .xa-tabs label[for="xa-3"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-4:checked ~ .xa-tabs label[for="xa-4"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-5:checked ~ .xa-tabs label[for="xa-5"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-6:checked ~ .xa-tabs label[for="xa-6"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-7:checked ~ .xa-tabs label[for="xa-7"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] #xa-8:checked ~ .xa-tabs label[for="xa-8"]{background:#faf9f5;color:#141413}
html[data-theme="dark"] .ss-form .frq-test{background:#1a1918}
html[data-theme="dark"] .frq-test:has(input:checked){background:#1f1e1d}
html[data-theme="dark"] .ss-prose thead th{background:#1a1918}
html[data-theme="dark"] .ss-prose td code{background:#1a1918}
html[data-theme="dark"] .ftr-stamp{border:3px solid #df634a;background:rgba(31,30,29,.75)}
html[data-theme="dark"] .ftr-stamp::after{border:1.5px dashed #df634a}
html[data-theme="dark"] .ftr-bubble{border:2.6px solid #df634a;background:#1f1e1d}
html[data-theme="dark"] .ftr-bubble::before{background:#1f1e1d;border-left:2.6px solid #df634a;border-top:2.6px solid #df634a}
html[data-theme="dark"] .ftr-postit{background:#8f7c19;color:#ffeeab}
html[data-theme="dark"] .xc2-body{background:#1f1e1d}
html[data-theme="dark"] .xc2-chip{background:#262624}
html[data-theme="dark"] .xc2-done{background:#1f1e1d}
html[data-theme="dark"] .ss-mega-in{background:#1f1e1d}
html[data-theme="dark"] .ps-sel, html[data-theme="dark"] .ps-num, html[data-theme="dark"] .ps-in, html[data-theme="dark"] .ps-code, html[data-theme="dark"] .ps-area{background:#1f1e1d}
html[data-theme="dark"] .ps-seg .on{background:#faf9f5;color:#141413}
html[data-theme="dark"] .tl-form input[type=text], html[data-theme="dark"] .tl-form select, html[data-theme="dark"] .tl-ta{background:#1f1e1d}
html[data-theme="dark"] .tl-verdict.tl-ok{background:#134427;border-color:#227640;color:#a8ecc2}
html[data-theme="dark"] .tl-verdict.tl-warn{background:#462d0c;border-color:#8a561a;color:#fabf89}
html[data-theme="dark"] .tl-verdict.tl-bad{background:#1a1918;border-color:#691515;color:#ec7f7f}
html[data-theme="dark"] .tl-i.tl-ok .tl-badge{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .tl-i.tl-warn .tl-badge{background:#462d0c;color:#fabf89}
html[data-theme="dark"] .tl-i.tl-bad .tl-badge{background:#1a1918;color:#ec7f7f}
html[data-theme="dark"] .tl-i.tl-info .tl-badge{background:#0c2544;color:#7191ec}
html[data-theme="dark"] .tl-st.tl-ok{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .tl-st.tl-warn{background:#462d0c;color:#fabf89}
html[data-theme="dark"] .tl-st.tl-bad{background:#1a1918;color:#ec7f7f}
html[data-theme="dark"] .tl-badtxt{color:#ec7f7f}
html[data-theme="dark"] .tl-snip-t{color:#8c83f6}
html[data-theme="dark"] .tl-snip-d{color:#c2c0b6}
html[data-theme="dark"] .tl-links a{background:#1f1e1d}
html[data-theme="dark"] .ck-pri.ck-high{background:#441313;color:#ee8981}
html[data-theme="dark"] .ck-pri.ck-medium{background:#543b0f;color:#ffd28e}
html[data-theme="dark"] .ab-maker img{background:#1f1e1d}
html[data-theme="dark"] .ab-id img{background:#1f1e1d}
html[data-theme="dark"] .tl-miss{color:#ee8981}
html[data-theme="dark"] .wk-grp{background:#262624}
html[data-theme="dark"] .wk-cb{border:1px solid #33322f;background:#1f1e1d}
html[data-theme="dark"] .wk-tag{background:#262624}
html[data-theme="dark"] .wk-tag.wk-med{background:#4c3018}
html[data-theme="dark"] .wk-tag.wk-hi{background:#481313}
html[data-theme="dark"] .wk-tag.wk-ok{background:#262624}
html[data-theme="dark"] .wk-tag.wk-info{background:#183348}
html[data-theme="dark"] .wk-bar{background:#262624}
html[data-theme="dark"] .bk-card{background:#1f1e1d}
html[data-theme="dark"] .bk-btn{background:#1f1e1d}
html[data-theme="dark"] .ss-brew-box{background:#262624}
html[data-theme="dark"] .ss-brew-copy:hover{background:#33322f}
html[data-theme="dark"] .ss-video-play{background:#262624}
html[data-theme="dark"] .ss-video-play:focus-visible{outline:3px solid #33322f}
html[data-theme="dark"] .ss-ftr-soc a{background:#262624;box-shadow:inset 0 0 0 1px #3a3936}
html[data-theme="dark"] .ss-ftr-soc a:hover{background:#33322f}
@media (max-width: 720px){
html[data-theme="dark"] .ss-shots::after, html[data-theme="dark"] .ap-dlg::after{background:linear-gradient(rgba(31,30,29,0), #1f1e1d)}
html[data-theme="dark"] .ss-stage .ss-win > .ap::after{background:linear-gradient(rgba(31,30,29,0), #1f1e1d)}
}

html[data-theme="dark"] .ss-hdr { background: rgba(20, 20, 19, .92); }
html[data-theme="dark"] .ss-btn-quiet { color: var(--ink) !important; }
html[data-theme="dark"] .ap-bluebtn { color: #10202f; }
html[data-theme="dark"] .ss-btn-quiet:hover { border-color: #4a4945; }
html[data-theme="dark"] img[src*="favicon-marketingly"] { background: #f4f3ee; border-radius: 6px; }

/* Floating light/dark button: same size and place in every state */
.ss-theme { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); cursor: pointer; }
.ss-theme:hover { background: var(--ink-hover); }
.ss-theme:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-theme svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.ss-theme .ss-sun, html[data-theme="dark"] .ss-theme .ss-moon { display: none; }
html[data-theme="dark"] .ss-theme .ss-sun { display: block; }
@media (max-width: 560px) { body:has(.ss-cc:not([hidden])) .ss-theme { display: none; } }
@media (max-width: 900px) { .ss-in.ss-ftr-base { padding-bottom: 76px; } }

/* No empty slot in the last row of card and step grids (v3.129.3). These grids choose their column count by width, so a last card that would
   sit beside an empty slot stretches across the row instead. The widths are where each grid switches column count. */
@media (min-width:560px) and (max-width:819px){.ss-steps > :last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:640px) and (max-width:939px){.ss-cells > :last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:820px) and (max-width:1069px){.ss-steps > :last-child:nth-child(3n+1){grid-column:1/-1}}
@media (min-width:940px){.ss-cells > :last-child:nth-child(3n+1){grid-column:1/-1}}

/* Hint above tables that scroll sideways on phones (the box scrolls, the hint stays at the left edge). */
@media (max-width: 760px) {
	.ss-table-wrap::before, .tl-scroll::before { content: "Swipe sideways to see the whole table"; display: block; position: sticky; left: 0; width: max-content; max-width: 100%; padding: 8px 12px 0; font-size: 12px; color: var(--text-2); }
}

/* Benchmarks page: key numbers, bar rows and the "what happened at a million pages" note (site 0.160.0) */
.bm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.bm-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;text-align:left}
.bm-stat b{display:block;font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.bm-stat span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--text-2)}
.bm-bars{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:8px 22px}
.bm-bar{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.bm-bar:first-child{border-top:0}
.bm-bar>span:first-child{font-size:15px;font-weight:600;color:var(--text)}
.bm-track{height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.bm-track i{display:block;height:100%;border-radius:6px;background:var(--text)}
.bm-bar:last-child>span:first-child,.bm-bar:last-child>span:last-child{color:var(--text);font-weight:600}
.bm-bar>span:last-child{font-size:14px;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.bm-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.bm-story ul{margin:14px 0 0;padding-left:20px;color:var(--text-2);line-height:1.6}
.bm-note{border-left:3px solid var(--text);padding:2px 0 2px 16px;margin-top:18px;color:var(--text-2)}
/* Footer icons that were near-black vanished on the dark footer: flip them to light with a dark glyph in dark mode. */
.ss-ink-i{background:#171717}
html[data-theme="dark"] .ss-ink-i{background:#faf9f5;color:#141413}
/* Page status checker (site 0.197.0): a plain box for the list. The answer uses the shared tool table. */
.tl-ta{display:block;width:100%;min-height:150px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:16px;line-height:1.5;color:var(--text);resize:vertical;box-sizing:border-box}
.tl-ta:focus{outline:2px solid var(--accent);outline-offset:1px}
.tl-tabar{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.tl-count{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.tl-count.tl-over{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tl-ex{padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tl-tabar .ss-btn{margin-left:auto;height:48px;padding:0 22px;white-space:nowrap}
.tl-tabar .ss-btn[disabled]{opacity:.65;cursor:wait}
@media (max-width:760px){.tl-tabar .ss-btn{margin-left:0;width:100%}}
/* Free tool pages: the tool sits higher, right under the title, so it is visible without scrolling. */
.tl-hero .ss-in{padding-bottom:10px}
.tl-hero .ss-lead{margin-bottom:0}
.tl-sec .ss-in{padding-top:22px}
@media (max-width:720px){.tl-sec .ss-in{padding-top:18px}}

/* Share row: a few icons, right above the results. A saved result opens from its link with a banner; Check again makes a new one. */
.tl-sharebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;margin:0 0 14px}
.tl-sharelab{font-size:14px;font-weight:600}
.tl-shareicons{display:flex;gap:8px}
.tl-ico{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--text);cursor:pointer}
.tl-ico svg{width:17px;height:17px}
.tl-ico:hover{border-color:var(--text)}
.tl-ico:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.tl-sharemsg{font-size:13px;font-weight:600;color:var(--ok)}
.tl-sharemsg:empty{display:none}
html[data-theme="dark"] .tl-ico{background:#1f1e1d}
@media (max-width:720px){.tl-sharebar{flex-direction:column;align-items:center;gap:8px}.tl-sharelab{order:1}.tl-shareicons{order:2;justify-content:flex-start}.tl-sharemsg{order:3;text-align:center}}
.tl-saved{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.tl-saved p{margin:0;flex:1 1 260px}
.tl-saved .tl-sharebar{flex:0 1 auto;flex-direction:row;justify-content:flex-end;margin:0 0 0 auto;gap:6px 8px}
.tl-saved .tl-sharelab{display:none}
.tl-saved .tl-shareicons{gap:5px}
.tl-saved .tl-ico{width:32px;height:32px}
.tl-saved .tl-ico svg{width:15px;height:15px}
.tl-saved .tl-sharemsg{order:3;flex-basis:100%;text-align:right}

/* Human check card: sits in the results area under the button, with room reserved for the Cloudflare box so nothing jumps. */
.tl-verify{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.tl-verify-ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--text);color:var(--card)}
.tl-verify-ic svg{width:22px;height:22px}
.tl-verify-tx{flex:1 1 auto;min-width:0}
.tl-verify h3{margin:0 0 4px;font-size:18px}
.tl-verify-msg{margin:0;color:var(--text-2)}
.tl-verify-msg.tl-verify-bad{color:var(--text);font-weight:600}
.tl-verify-box{margin-top:16px;min-height:65px;max-width:100%}
.tl-verify-fine{margin:12px 0 0;font-size:13px;color:var(--text-2)}
@media (max-width:560px){.tl-verify{flex-direction:column;gap:12px;padding:18px}}
/* Benchmarks (site 0.196.0): mixed-up pile of findings sorted into the issue list, and the project screen with room to breathe. Ink, white, greys and the yellow marker only. */
.bm-hand{margin:0;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:clamp(24px,3vw,30px);line-height:1.1;color:#171717;background:#FFE27A;display:inline;padding:1px 9px 3px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bm-proj{margin:0;min-width:0}
.bm-proj .ss-win{min-width:0}
.bm-proj figcaption{margin-top:30px;text-align:center}
.bm-sort{display:grid;grid-template-columns:minmax(0,5fr) 72px minmax(0,7fr);align-items:center;margin-top:36px}
.bm-mess{min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.bm-chips{display:flex;flex-wrap:wrap;gap:10px 8px;padding:6px 4px 14px}
.bm-chips span{display:inline-block;max-width:100%;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:14px;line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.06);transform:rotate(var(--r,0deg)) translateY(var(--y,0px))}
.bm-chips span:nth-child(6n+1){--r:-5deg;--y:4px}
.bm-chips span:nth-child(6n+2){--r:3deg;--y:-5px}
.bm-chips span:nth-child(6n+3){--r:-2deg;--y:6px}
.bm-chips span:nth-child(6n+4){--r:6deg;--y:-2px}
.bm-chips span:nth-child(6n+5){--r:-6deg;--y:2px}
.bm-chips span:nth-child(6n){--r:2deg;--y:-6px}
.bm-arrow{width:64px;height:40px;justify-self:center;fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bm-sorted{min-width:0}
.bm-sorted .ss-win{min-width:0}
.bm-sorted .ap{min-width:0}
.bm-sorted .ap-rt::after{content:"";display:block;height:6px;margin-top:9px;border-radius:3px;background:linear-gradient(var(--a-ink),var(--a-ink)) left/var(--w) 100% no-repeat,var(--a-line)}
.bm-sorted .ap-n{min-width:92px;text-align:right}
.bm-sorted .ap-rt span{white-space:normal}
html[data-theme="dark"] .bm-sorted .ap-rt::after{background:linear-gradient(var(--a-ink),var(--a-ink)) left/var(--w) 100% no-repeat,#33322f}
.bm-legend{margin:14px 0 0;display:flex;align-items:center;gap:10px}
.bm-legend i{flex:0 0 auto;width:28px;height:6px;border-radius:3px;background:var(--text)}
html[data-theme="dark"] .bm-chips span{box-shadow:none}
@media (min-width:901px){.bm-proj .ss-win{transform:rotate(-1deg)}}
@media (max-width:1000px){
	.bm-sort{grid-template-columns:minmax(0,1fr);row-gap:0}
	.bm-arrow{transform:rotate(90deg);margin:18px 0 22px}
}
@media (max-width:340px){.bm-stats{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){.bm-proj .ap-cards5{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-proj .ap-chips2{flex-wrap:wrap}.bm-proj .ap-lab{white-space:normal}.bm-sorted .ap-n em,.bm-sorted .ap-arr{display:none}.bm-sorted .ap-n{min-width:46px}.bm-sorted .ap-row{gap:8px}}
@media (max-width:560px){
	.bm-chips span{font-size:13px;padding:6px 12px}
	.bm-sort{margin-top:28px}
}
@media (max-width:900px){.bm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-story{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.bm-bar{grid-template-columns:76px minmax(0,1fr);row-gap:6px}.bm-bar>span:last-child{grid-column:1 / -1;text-align:left}}

/* Alternative pages (site 0.161.0): at-a-glance tiles, comparison table, pick cards. Colours come from the theme tokens, so dark mode follows. */
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.vs-wrap:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.vs-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .98rem; }
.vs-table th, .vs-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.vs-table thead th { font-size: .85rem; color: var(--text-2); font-weight: 600; background: var(--soft); }
.vs-table thead th.vs-us { color: var(--ink); background: var(--card); }
.vs-table tbody th[scope="row"] { font-weight: 600; color: var(--ink); width: 30%; }
.vs-table .vs-group th { background: var(--soft); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 10px 18px; }
.vs-table td.vs-us { background: var(--card); }
.vs-table td:not(.vs-us) { background: var(--soft); }
.vs-table tr:last-child th, .vs-table tr:last-child td { border-bottom: 0; }
.vs-table small { display: block; color: var(--text-2); font-size: .82rem; margin-top: 2px; }
.vs-y, .vs-n { font-weight: 600; }
.vs-y::before, .vs-n::before { display: inline-block; width: 1.2em; font-weight: 700; }
.vs-y { color: var(--ok); }
.vs-y::before { content: "\2713"; }
.vs-n { color: var(--text-2); }
.vs-n::before { content: "\2013"; }

/* Alternative pages (site 0.164.0): partial marker, legend, and a stacked table on phones so both tools show without sideways scrolling. */
.vs-p { font-weight: 600; color: var(--ink); }
.vs-p::before { content: "\25D0"; display: inline-block; width: 1.2em; font-weight: 700; color: var(--warning); }
.vs-legend { margin: 0 0 12px; }
@media (max-width: 640px) {
	.vs-table { min-width: 0; }
	.vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; }
	.vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.vs-table tbody tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
	.vs-table tbody tr.vs-group { padding: 0; }
	.vs-table tbody th[scope="row"] { width: auto; padding: 8px 16px 2px; border: 0; }
	.vs-table td { position: relative; padding: 6px 16px 6px 8.5em; border: 0; }
	.vs-table td::before { content: attr(data-label); position: absolute; left: 16px; top: 8px; width: 7em; font-size: .8rem; color: var(--text-2); }
	.vs-table td.vs-us { background: var(--card); }
.vs-table td:not(.vs-us) { background: var(--soft); }
	.vs-table tr:last-child th, .vs-table tr:last-child td { border-bottom: 0; }
}
.vs-head { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.vs-head .ss-mark { flex: none; }

/* Redesigned alternative page (site 0.165.0): face-off cards, who-should-pick panels, shared-feature chips, collapsed full table. */
.vs-face-sec > .ss-in { padding-top: 24px; padding-bottom: 56px; }
.vs-face { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-bottom: 24px; }
.vs-fc { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; background: var(--soft); }
.vs-fc.vs-us { background: var(--card); box-shadow: var(--shadow); }
.vs-fc-head { display: flex; align-items: center; gap: 12px; }
.vs-fc-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.vs-fc-head .ss-mark { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; flex: none; }
.vs-logo { width: 40px; height: 40px; border-radius: 10px; flex: none; display: block; }
.vs-fc-tag { margin: 4px 0 14px; color: var(--text-2); }
.vs-price { margin: 0 0 14px; font-size: 1.05rem; color: var(--text-2); }
.vs-price strong { font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.vs-price span { display: block; margin-top: 4px; font-size: .95rem; }
.vs-facts { margin: 0 0 8px; border-top: 1px solid var(--line); }
.vs-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vs-facts dt { color: var(--text-2); }
.vs-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.vs-fc .ss-actions { margin-top: auto; padding-top: 14px; justify-content: flex-start; }
.vs-badge { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
.vs-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.vs-dp { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; background: var(--soft); }
.vs-dp.vs-us { background: var(--card); }
.vs-dp h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 1.15rem; color: var(--ink); }
.vs-dp h3 .ss-mark { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; flex: none; }
.vs-dp h3 .vs-logo { width: 32px; height: 32px; border-radius: 8px; }
.vs-dp ul { list-style: none; margin: 0; padding: 0; }
.vs-dp li { padding: 14px 0; border-top: 1px solid var(--line); }
.vs-dp li:first-child { border-top: 0; }
.vs-dp li strong { display: block; color: var(--ink); }
.vs-dp li small { display: block; margin-top: 2px; color: var(--text-2); font-size: .9rem; }
.vs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vs-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .95rem; }
.vs-chips li::before { content: "\2713"; color: var(--ok); font-weight: 700; }
.vs-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.vs-more > summary::-webkit-details-marker { display: none; }
.vs-more > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--text-2); }
.vs-more[open] > summary::after { content: "\2013"; }
.vs-more > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.vs-more[open] > summary { margin-bottom: 16px; }
@media (max-width: 760px) {
	.vs-face, .vs-diff { grid-template-columns: 1fr; }
	.vs-badge { justify-self: center; width: 44px; height: 44px; }
}
#table > .ss-in { padding-top: 40px; padding-bottom: 40px; }
.vs-why { list-style: none; margin: 0 0 20px; padding: 0; max-width: 46em; }
.vs-why li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.vs-why li:first-child { border-top: 0; }
.vs-why strong { color: var(--ink); }

/* Alternatives hub and home page card (site 0.166.0). The card is one link; hover changes only the border colour, nothing moves. */
.vs-list { display: grid; gap: 12px; }
.vs-home { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); text-decoration: none; }
.vs-home:hover { border-color: var(--ink); }
.vs-home:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.vs-home-logos { display: flex; align-items: center; gap: 10px; flex: none; }
.vs-home-logos em { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.vs-home-logos .ss-mark { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
.vs-home-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vs-home-text strong { font-size: 1.1rem; color: var(--ink); }
.vs-home-text small { color: var(--text-2); font-size: .95rem; }
.vs-home-go { flex: none; font-weight: 600; color: var(--accent-text); }
.vs-home-go::after { content: " \2192"; }
@media (max-width: 640px) { .vs-home { flex-wrap: wrap; } .vs-home-text { flex-basis: 100%; order: 3; } .vs-home-go { margin-left: auto; } }
.vs-initial { display: grid; place-items: center; background: var(--hover); color: var(--ink); font-weight: 700; font-size: 20px; line-height: 1; border: 1px solid var(--line); }
.vs-dp h3 .vs-initial { font-size: 16px; }
.vs-head .vs-logo { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }

/* Table fixes (site 0.167.1): equal column widths, header and section rows follow the column colours, group rows never leave a gap. */
.vs-table { table-layout: fixed; }
.vs-c1 { width: 26%; }
.vs-c2, .vs-c3 { width: 37%; }
.vs-table thead th { background: var(--card); }
.vs-table thead th:last-child { background: var(--soft); }
.vs-table .vs-group th { background: var(--card); color: var(--text-2); }
.vs-table .vs-group td { padding: 0; }
@media (max-width: 640px) { .vs-table .vs-group td { display: none; } .vs-table .vs-group th { background: var(--soft); } }

/* Section rows span the full width as a light band (site 0.171.0), so no empty cells show under the column headings. */
.vs-table .vs-group th { background: var(--soft); color: var(--text-2); }

/* Heading row and section bands (site 0.173.1): a line under the column headings and a band shade of its own, so the grey column heading no longer melts into the band below it. */
.vs-table thead th { border-bottom: 1px solid var(--line); }
.vs-table .vs-group th { background: var(--hover); }
@media (max-width: 640px) { .vs-table .vs-group th { background: var(--hover); } }
.vs-table .vs-group th { background: color-mix(in srgb, var(--ink) 7%, var(--card)); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .vs-table .vs-group th { background: color-mix(in srgb, var(--ink) 7%, var(--card)); } }

/* Careers page (v3.136.1) */
.cr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px !important}
.ss-cells .ss-fr-l li:first-child{padding-top:0}
.ss-cells .ss-fr-l li:first-child::before{top:6px}

/* Offer bar above the header (not sticky, scrolls away with the page) */
.ss-promo { position: relative; cursor: pointer; background: var(--ink); color: var(--bg); text-align: center; padding: 9px 16px; font-size: 14px; line-height: 1.4; }
.ss-promo p { margin: 0; }
.ss-promo-code { font-family: var(--mono); font-weight: 700; letter-spacing: .03em; padding: 1px 8px; margin: 0 2px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 16%, transparent); }
.ss-promo a { color: var(--bg) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; white-space: nowrap; }
.ss-promo a::after { content: ""; position: absolute; inset: 0; } /* the whole bar is the link's click area (v3.255.0) */
.ss-promo:hover a { text-decoration-thickness: 2px; }
.ss-promo a:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
@media (max-width: 560px) { .ss-promo { font-size: 13px; padding: 8px 12px; } .ss-promo a { display: inline-block; margin: 2px 0 0; } }

/* "New" tag for features of the next release (v3.142.0). Yellow marker with ink text, brand colours only. */
.ss-new { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 8px; padding: 0; background: none; color: var(--text, #171717); font-size: .85em; font-weight: 600; line-height: 1.4; letter-spacing: .01em; text-transform: none; white-space: nowrap; }
.ss-new:before { content: ""; width: 1.15em; height: 1.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFE27A' stroke='%23A67C00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16%2018a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202m0%20-12a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202m-7%2012a6%206%200%200%201%206%20-6a6%206%200%200%201%20-6%20-6a6%206%200%200%201%20-6%206a6%206%200%200%201%206%206'/%3E%3C/svg%3E") center / contain no-repeat; }   /* yellow sparkle with a thin outline + New */
.ss-soon { color: var(--text-2); font-size: 14px; font-weight: 600; }

/* Page not found: the missing address shown as an issue from a SEOSage crawl. */
.ss-nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: center; }
.ss-nf-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.ss-nf-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); padding: 20px; }
.ss-nf-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ss-nf-sev { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; }
.ss-nf-type { font-size: 15px; font-weight: 600; }
.ss-nf-code { margin-left: auto; font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ss-nf-rows { margin: 0; }
.ss-nf-rows > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ss-nf-rows dt { font-size: 14px; color: var(--text-2); }
.ss-nf-rows dd { margin: 0; font-size: 15px; font-weight: 600; min-width: 0; }
.ss-nf-rows code { display: inline; padding: 2px 6px; border-radius: 4px; background: #FFE27A; color: #171717; font-family: var(--mono); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ss-nf-fixlabel { margin: 16px 0 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.ss-nf-fix { margin: 0; padding: 0; list-style: none; }
.ss-nf-fix li + li { border-top: 1px solid var(--line); }
.ss-nf-card .ss-nf-fix a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; }
.ss-nf-fix a::after { content: "\2192"; color: var(--text-2); }
.ss-nf-card .ss-nf-fix a:hover { background: var(--hover); color: var(--text); }
.ss-nf-fix a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-nf-note { margin: 16px 0 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 820px) { .ss-nf-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Compare page mock (two crawls side by side), the Reports Ask Claude button and menu mock (site 0.189.0) */
.cv-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch}
.cv-card{border:0.5px solid var(--a-line);border-radius:14px;padding:14px;min-width:0}
.cv-lab{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--a-mut)}
.cv-pick{display:block;border:0.5px solid var(--a-line);border-radius:8px;padding:6px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-score{display:flex;align-items:flex-end;gap:8px;margin-top:12px}
.cv-score b{font-size:34px;line-height:1;font-weight:600}
.cv-score span{padding-bottom:3px;font-size:12px;color:var(--a-mut)}
.cv-score em{margin-left:auto;padding-bottom:3px;font-style:normal;font-size:12px;font-weight:600;color:var(--a-ok)}
.cv-stats{display:flex;justify-content:space-between;gap:4px;margin-top:12px;padding-top:10px;border-top:0.5px solid var(--a-line)}
.cv-stats b{display:block;font-size:14px;font-weight:600}
.cv-stats span{font-size:10.5px;color:var(--a-mut)}
.cv-mid{display:flex;align-items:center;justify-content:flex-start}
.cv-mid i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0.5px solid var(--a-line);border-radius:50%;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--a-mut)}
.cv-line{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:12px 0 14px}
.cv-line p{flex:1 1 220px;margin:0;font-size:12.5px;line-height:1.45}
.cv-exp{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
.cv-exp .ap-btn{height:30px}
.cv-menu{margin-top:6px;border:0.5px solid var(--a-line);border-radius:10px;padding:4px 0;font-size:12.5px;background:var(--a-bg,#fff)}
.cv-menu span{display:block;padding:5px 14px;white-space:nowrap}
.cv-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.cv-box{border:0.5px solid var(--a-line);border-radius:12px;padding:10px 12px;min-width:0}
.cv-box .cv-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px;font-size:13px;font-weight:600}
.cv-box strong{display:block;font-size:12px;font-weight:500;line-height:1.35}
.cv-box small{display:block;font-size:11px;color:var(--a-mut)}
.ap-cmpl{display:inline-flex;align-items:center;font-size:13px;color:var(--a-mut)}
.ap-ask{background:rgba(255,226,122,.35);border-color:#FFE27A}
.ap-askm{width:max-content;max-width:100%;margin:8px 0 0 auto;border:0.5px solid var(--a-line);border-radius:12px;padding:6px 0;font-size:12.5px}
.ap-askm p{margin:0;padding:3px 14px 7px;font-size:11.5px;color:var(--a-mut)}
.ap-askm span{display:block;padding:5px 14px}
.ap-askm span small{display:block;font-size:11.5px;color:var(--a-mut)}
.fm-head .ap-btn{color:var(--a-ink);font-size:13px}
html[data-theme="dark"] .ap-ask{background:rgba(255,226,122,.16)}
html[data-theme="dark"] .cv-menu{background:#1f1e1d}
@media (max-width:560px){
	.cv-vs{grid-template-columns:minmax(0,1fr)}
	.cv-3{grid-template-columns:minmax(0,1fr)}
	.cv-exp{margin-left:0;align-items:flex-start}
}
button.ss-chip{font-family:inherit;cursor:pointer}

.ap-miss{opacity:.6}
.ap-ask{position:relative}
.ap-ask .ap-askm{position:absolute;left:0;width:320px;max-width:calc(100vw - 72px);top:calc(100% + 6px);z-index:3;margin:0;text-align:left;white-space:normal;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
html[data-theme="dark"] .ap-ask .ap-askm{background:#2a2928;box-shadow:0 10px 30px rgba(0,0,0,.5)}
@media (max-width:720px){.ap-ask{position:static}.ap-btns:has(.ap-ask){position:relative}.ap-ask .ap-askm{left:0;top:46px;width:min(320px,100%);max-width:100%}}
@media (max-width:1099px){
	.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{width:40px;height:14px;margin:16px auto 12px}
	.ss-stage.ss-doodled{padding-bottom:10px}
}
@media (max-width:1099px){
	.ss-d-claude > .ss-sm-only{display:none !important}
	/* The note sits on the picture's own gap under the Build with Claude button. It takes no room, so nothing in the picture moves. */
	.ss-d-claude .ap-cl .ss-dd.c2{display:block !important;position:absolute;left:8px;top:calc(100% + 5px);width:22px;height:8px;margin:0;transform:rotate(-90deg);z-index:2}
	.ss-d-claude .ap-cl .ss-hand.c3{display:block !important;position:absolute;left:0;right:0;top:100%;margin:0;padding-left:36px;text-align:left;font-size:16px;line-height:1;transform:none;white-space:nowrap;z-index:2}
}
@media (max-width:1099px){.ss-d-claude .ap-cl .ss-hand.c3 br{display:none}}
@media (max-width:720px){.ss-tabs-l button:last-child{border-bottom:3px solid transparent}.ss-tabs-l button[aria-selected="true"]:last-child{border-bottom-color:var(--accent)}}

/* Notify me about new releases: same size in every state (the bell swaps to a tick, the label never changes) */
button.ss-notify{cursor:pointer;font:inherit;font-weight:600}
button.ss-notify[aria-pressed="true"]{cursor:default}
/* Never turns dark or grey: same white button when subscribed, on hover, on click and when focused */
button.ss-notify,button.ss-notify:hover,button.ss-notify:active,button.ss-notify:focus,button.ss-notify[aria-pressed="true"],button.ss-notify[aria-pressed="true"]:hover,button.ss-notify[aria-pressed="true"]:active{background:var(--card);border-color:var(--line);color:var(--ink) !important;opacity:1}
button.ss-notify:hover{background:var(--hover);border-color:#CFCFD4}
html[data-theme="dark"] button.ss-notify:hover{border-color:#4a4945}
button.ss-notify[aria-pressed="true"]:hover{background:var(--card);border-color:var(--line)}
/* Both labels sit in the same spot, so the button is the same size either way; only one is visible */
.ss-nlab{display:inline-grid}
.ss-nlab>span{grid-area:1/1;text-align:center;white-space:nowrap}
.ss-notify .ss-n-on,.ss-notify[aria-pressed="true"] .ss-n-off{visibility:hidden}
.ss-notify[aria-pressed="true"] .ss-n-on{visibility:visible}
.ss-notify-status{min-height:1.6em;margin-top:8px}

/* Doodles for Connect once and Ask Claude from the Reports page (v3.159.6) */
.ss-d-conn,.ss-d-ask{position:relative}
.ss-d-conn .ss-win,.ss-d-ask .ss-win{margin-bottom:0}
.ss-dn .ss-dd{position:static;flex:none;width:56px;height:19px;transform:scaleX(-1)}
.ss-dn .ss-hand{position:static;font-size:22px;transform:rotate(-2deg);text-align:left}
@media (min-width:1100px){
	.ss-dn{position:absolute;display:flex;align-items:center;gap:6px;z-index:2;pointer-events:none}
	.ss-d-ask .ss-dn{left:575px;top:270px}
}
@media (max-width:1099px){
	.ss-d-conn .ss-dd.n1m,.ss-d-ask .ss-dd.a1m{display:block;position:static;width:40px;height:14px;margin:16px auto 12px;transform:rotate(-90deg)}
	.ss-d-conn .ss-hand.n3,.ss-d-ask .ss-hand.a3{margin-top:0}
}

/* Anchored doodles (v3.161.0). The arrow and the handwriting are attached to the thing they point at, so they follow it at every width
   (the PowerPoint button, the Connect to Claude button, the Ask Claude menu) instead of sitting at a guessed spot in the picture. */
.ss-anc{position:absolute;z-index:4;display:flex;gap:6px;pointer-events:none;white-space:nowrap;font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.ss-anc svg{flex:none;fill:none;stroke:#ff5b3a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ss-anc-v{width:21px;height:44px}
.ss-anc-h{width:56px;height:19px;transform:scaleX(-1)}
.ss-ink{display:block;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:22px;line-height:1.05;color:#cc3314;text-align:right;transform:rotate(-3deg);font-style:normal}
html[data-theme="dark"] .ss-ink{color:#f18a75}
/* under a button: arrow pointing up at it, handwriting to the left of the arrow; the space below the row is reserved so nothing overlaps */
.ss-anc-ppt,.ss-anc-conn{right:2px;top:calc(100% + 8px);flex-direction:row-reverse;align-items:flex-start}
.ss-anc-ppt .ss-ink,.ss-anc-conn .ss-ink{margin-top:14px}
.ss-ppt .ap-head{margin-bottom:84px}
.ss-d-conn .ap-connh{margin-bottom:84px}
.ss-connwrap{position:relative;display:block;flex:none;width:170px}
@media (max-width:720px){.ss-connwrap{width:100%}}
/* beside the Ask Claude menu (desktop; on small screens the caption under the picture is used) */
.ss-anc-ask{left:calc(100% + 12px);top:44px;align-items:center}
.ss-anc-ask .ss-ink{text-align:left}

/* Desktop only: the three home-page screens (Reports, Connect, Ask Claude) use the whole width of their frame, a wide app window instead of a narrow one (v3.161.1) */
@media (min-width:1100px){
	.ss-ppt .ss-crop{width:100%;margin-left:0;max-height:420px}
}

/* Tablet and small laptop widths (721 to 1099px): the Reports and Fix screens use the full width of their frame again. The 76% width and 24% left margin meant for wide desktops came later in the file and beat the 100% rule written for this range, which left a narrow screen with an empty strip beside it (v3.162.2) */
@media (min-width:721px) and (max-width:1099px){
	.ss-d-report .ss-crop,.ss-d-fix .ss-crop{width:100%;margin-left:0}
}
/* from tablet up the three home-page Claude screens use a wider frame, and the Reports toolbar keeps its six buttons on one row */
@media (min-width:721px){
	.ss-ppt,.ss-d-conn,.ss-d-ask{padding:28px 24px}
	.ss-ppt .ap-btns{gap:6px}
	.ss-ppt .ap-btns .ap-btn{padding:0 9px;gap:5px}
}

/* Fix screen at 721 to 1099px: the two captions sit inside the empty part of the "Why it matters" card instead of hanging below the picture (v3.162.4). Wider desktops keep the captions beside the picture, phones keep them under it. */
.ss-anc-why{display:none}
@media (min-width:721px) and (max-width:1099px){
	.ss-d-fix .ss-anc-why{position:static;display:block;margin-top:14px;white-space:normal;pointer-events:none}
	.ss-d-fix .ss-anc-why .ss-ink{text-align:left;font-size:19px;line-height:1.12;margin:0;transform:rotate(-2deg)}
	.ss-d-fix .ss-why-row{display:flex;align-items:center;gap:10px}
	.ss-d-fix .ss-why-arrow{width:15px;height:32px;margin-top:-4px}
	.ss-d-fix .ss-why-down{transform:rotate(180deg);margin-top:4px}
	.ss-d-fix > .ss-hand,.ss-d-fix > .ss-dd{display:none !important}
}


/* Pricing: three plans by number of computers */
.pr-hero .ss-actions{margin-top:24px}
.pr-hero .ss-in{padding-bottom:40px}
.pr-founder{max-width:1040px;margin:0 auto 24px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft);text-align:center;color:var(--text-2);line-height:1.5}
.pr-founder strong{color:var(--ink)}
.pr-code{font-family:var(--mono);font-weight:700;letter-spacing:.03em;padding:1px 8px;border-radius:var(--r-sm);background:var(--hover);color:var(--ink)}
.pr-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1040px;margin:0 auto}
.pr-card{display:flex;flex-direction:column;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);text-align:left}
.pr-card.pr-hi{border-color:var(--ink);box-shadow:var(--shadow-lg)}
.pr-card h2{margin:0 0 4px;font-size:1.3rem}
.pr-pcs{margin:0 0 16px !important;color:var(--text-2);font-weight:600}
.pr-card .pr-price strong{font-size:2.8rem}
.pr-card .pr-sub{margin:4px 0 20px !important}
.pr-card .ss-actions{margin-top:auto;justify-content:flex-start}
#bill-m:checked ~ .pr-plans .pr-y,#bill-y:checked ~ .pr-plans .pr-m{display:none}
.pr-all{max-width:1040px;margin:28px auto 0;padding:26px 32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);text-align:left}
.pr-all h3{margin:0 0 6px;font-size:1.1rem}
@media (max-width:900px){.pr-plans{grid-template-columns:1fr}.pr-all{padding:22px 24px}}
/* Start-trial page (site 0.232.0): our own free-trial form. Fields and the button keep their size in every state. */
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
.st-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.st-list li{position:relative;padding-left:28px;line-height:1.5;color:var(--text)}
.st-list li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.st-nb{white-space:nowrap}
.st .st-h{margin:36px 0 12px;font-size:1.1rem}
.st-next{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--text-2);line-height:1.55}
.st-card{display:flex;flex-direction:column;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.st-label{margin:0 0 6px;font-size:.9rem;font-weight:600;color:var(--text)}
.st-opt{font-weight:400;color:var(--text-2)}
.st-input{width:100%;box-sizing:border-box;height:48px;margin:0 0 18px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--text);font-family:var(--ui);font-size:16px}
.st-input::placeholder{color:#9A9AA2}
.st-input.is-invalid{border-color:var(--error)}
.st-check{display:flex;gap:10px;align-items:flex-start;margin:2px 0 18px;font-size:.92rem;line-height:1.45;color:var(--text);cursor:pointer}
.st-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.st-linkbtn{padding:0;border:0;background:none;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer}
.st-input:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px;border-color:var(--accent-text)}
.st-select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.st-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-go{width:100%;min-height:48px;margin-top:4px;border-radius:var(--r-md);font-size:16px}
.st-go[disabled]{opacity:.55;cursor:default}
.st-msg{margin:12px 0 0;min-height:3.4em;font-size:.92rem;line-height:1.5;color:var(--text-2)}
.st-msg.is-bad{color:var(--error)}
.st-msg a{color:var(--accent-text);text-decoration:underline}
.st-fine{margin:6px 0 0;font-size:.8rem;line-height:1.5;color:var(--text-2)}
.st-fine a{color:inherit;text-decoration:underline}
@media (max-width:860px){
	.st-grid{grid-template-columns:minmax(0,1fr);gap:32px}
	.st-card{order:-1;padding:22px 18px}
}

/* Checkout page (site 0.232.0): plan and billing choice before Polar's card step. */
.pk-set{margin:26px 0 0;padding:0;border:0;min-width:0}
.pk-legend{padding:0;margin:0 0 10px;font-size:.9rem;font-weight:600;color:var(--text)}
.pk-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pk-plan,.pk-opt{position:relative;display:block;cursor:pointer}
.pk-plan input,.pk-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pk-box{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;box-sizing:border-box;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .15s,background-color .15s}
.pk-box strong{grid-column:1;grid-row:1;font-size:1.05rem}
.pk-sub{grid-column:1;grid-row:2;font-size:.85rem;color:var(--text-2)}
.pk-price{grid-column:2;grid-row:1 / span 2;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap}
.pk-plan input:checked + .pk-box{border-color:var(--ink);background:var(--soft);box-shadow:0 0 0 1px var(--ink)}
.pk-plan input:focus-visible + .pk-box,.pk-opt input:focus-visible + span{outline:2px solid var(--accent-text);outline-offset:2px}
.pk-bill{display:inline-grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.pk-opt span{display:block;box-sizing:border-box;min-width:110px;padding:10px 18px;text-align:center;font-weight:600;font-size:.95rem;color:var(--text-2)}
.pk-opt input:checked + span{background:var(--ink);color:#fff}
.pk-offer{margin:22px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--soft);font-size:.92rem;line-height:1.5;color:var(--text)}
.pk-summary{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.5;color:var(--text-2);min-height:3em}

.pk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;grid-template-areas:"head card" "choose card" "info card";align-items:start}
.pk-head{grid-area:head}
.pk-choose{grid-area:choose}
.pk-card{grid-area:card}
.pk-info{grid-area:info}
@media (max-width:860px){
	.pk-grid{grid-template-columns:minmax(0,1fr);column-gap:0;grid-template-areas:"head" "choose" "card" "info"}
	.pk-card{order:0;margin-top:26px}
	.pk-info{margin-top:6px}
	.ck-has-plan .pk-choose{display:none}
	.ck-has-plan .pk-grid{grid-template-areas:"head" "card" "info"}
}

/* Download page (site 0.236.0): three steps, the four download buttons in an even grid, "notify me" set apart below. */
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dl-grid .ss-btn{width:100%;text-align:center}
.dl-notify{max-width:760px;margin:22px 0 0;padding:0 4px}
.dl-notify .ss-actions{margin:0}
.dl-notify .ss-note{margin:8px 0 0}
@media (max-width:640px){.dl-grid{grid-template-columns:minmax(0,1fr)}}

.ss-msico{width:16px;height:16px;flex-shrink:0}
p a > .ss-msico,li a > .ss-msico{display:inline-block;vertical-align:-3px;margin-right:6px}
.ty-step{min-width:0}
.ty-step .ss-brew{margin:16px 0 0;max-width:none;min-width:0;text-align:left}
.ty-step .ss-brew-box{min-width:0}
.ty-step .ss-brew-l{margin-bottom:8px}
/* Thank-you page (site 0.231.0): three numbered steps; the licence key and its Copy button keep their size in every state. */
.ty-steps{counter-reset:ty;list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:760px}
.ty-steps[hidden]{display:none}
.ty-step{counter-increment:ty;position:relative;padding:22px 26px 22px 80px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.ty-step[hidden]{display:none}
.ty-step::before{content:counter(ty);position:absolute;left:26px;top:20px;width:36px;height:36px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:15px}
.ty-step h2{margin:0 0 12px;font-size:1.2rem;line-height:36px}
.ty-step .ss-actions{margin:0}
.ty-step .ss-note,.ty-step .ty-text{margin:12px 0 0}
.ty-step .ty-text{color:var(--text-2);line-height:1.6}
.ty-keyrow{display:flex;gap:12px;align-items:stretch}
.ty-keyrow code{flex:1;min-width:0;display:flex;align-items:center;min-height:52px;box-sizing:border-box;padding:10px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--soft);font-family:var(--mono);font-size:1rem;font-weight:600;word-break:break-all;user-select:all}
.ty-copy{flex:0 0 auto;width:140px;min-height:52px;border-radius:var(--r-md)}
.ty-keybox[data-state="loading"] code{color:var(--text-2);font-family:var(--ui);font-weight:400;user-select:none;word-break:normal}
.ty-keybox[data-state="loading"] .ty-copy{opacity:.45;pointer-events:none}
.ty-keybox[data-state="fallback"] code{font-family:var(--ui);font-weight:400;font-size:.95rem;line-height:1.5;color:var(--text-2);user-select:none;word-break:normal}
.ty-keybox[data-state="fallback"] .ty-copy{display:none}
@media (max-width:560px){
	.ty-step{padding:20px 18px 20px 18px}
	.ty-step::before{position:static;margin-bottom:10px}
	.ty-step h2{line-height:1.3}
	.ty-keyrow{flex-direction:column}
	.ty-copy{width:100%}
}

/* ===== White-label reports page, redesign v2 (site 0.230.0) ===== */
/* Design v5e, "From crawl to client, in one scroll".
   Macrostructure: sticky stage + five scroll steps. Tone: calm, precise, a little cinematic. Motion only where it explains a change.
   Site tokens for the page. A named "paper" palette (--p-*) and one example accent (--nw, our own brand, Marketingly) for the drawn example documents only.
   Wide screen + no reduced motion + JS: the pictures move into one sticky stage (class .is-stage on .wl6-story). Otherwise each picture sits with its step. */

.wl6 {
	--p-paper: #FFFFFF; --p-ink: #1D1D1F; --p-mute: #62626A; --p-line: #E3E3E8;
	--sage: #05A5FE; --sage-text: #0069AD;
	--nw: #00A6FE; --nw-text: #0069A8; --nw-tint: #E8F6FF;   /* Marketingly's own blue, deep blue and tint (marketingly.org theme) */
	--H: max(440px, min(560px, calc(100svh - 120px)));
}

.wl6 a:focus-visible, .wl6 summary:focus-visible, .wl6 button:focus-visible, .wl6 input:focus-visible, .wl6 video:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.wl6 figure { margin: 0; }
.wl6 .ss-in, .wl6 .ss-in h2, .wl6 .ss-in h3 { text-align: left; }
.wl6 img { max-width: 100%; height: auto; }

/* ---------- Hero ---------- */
.wl6 .wl6-hero .ss-in { padding-top: 40px; padding-bottom: 32px; }
.wl6 .wl6-hero h1 { max-width: 16em; }
.wl6 .wl6-hero .ss-lead { max-width: 34em; margin-bottom: 24px; }
.wl6-kicker { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }

.wl6-index { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.wl6-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wl6-index a { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); text-decoration: none; font-size: .875rem; font-weight: 600; transition: background-color .15s ease-out, border-color .15s ease-out; }
.wl6-index a b { font-family: var(--mono); font-weight: 600; color: var(--accent-text); }
.wl6-index a:hover { background: var(--hover); border-color: var(--text-2); }
.wl6-index a:active { background: var(--soft); }

/* ---------- Story ---------- */
.wl6 .wl6-story-sec > .ss-in { padding-top: 48px; padding-bottom: 48px; }
.wl6 .wl6-story-sec .ss-sub { margin-bottom: 24px; }
.wl6-story { --stagew: 0px; }

/* Default (phones, reduced motion, no script): each step is a picture above its text. */
.wl6-step { padding: 24px 0; border-top: 1px solid var(--line); }
.wl6-step:first-child { border-top: 0; padding-top: 0; }
.wl6 figure.wl6-scene { margin: 0 0 16px; }
.wl6-scene figcaption { margin-top: 12px; color: var(--text-2); font-size: .875rem; line-height: 1.5; max-width: 50ch; }

.wl6-txt { max-width: 50ch; }
.wl6-num { margin: 0 0 12px; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wl6-num b { color: var(--accent-text); font-weight: 600; }
.wl6-opt { padding: 2px 8px; border: 1px solid var(--text-2); border-radius: var(--r-xs); font-size: .75rem; letter-spacing: .04em; text-transform: none; color: var(--text-2); }
.wl6 .wl6-txt h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; margin: 0 0 12px; }
.wl6-txt p { margin: 0 0 12px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.wl6-txt .ss-fr-l { margin-bottom: 12px; }
.wl6-txt .ss-fr-l li { padding-top: 4px; padding-bottom: 4px; }
.wl6-txt .ss-fr-l li::before { top: 9px; }
.wl6-txt .ss-actions { justify-content: flex-start; margin-top: 16px; }
.wl6-txt .ss-note { margin-top: 12px; }
.wl6-more { margin: 0; }
.wl6-txt p a { color: var(--accent-text); }
.wl6-more a, .wl6-txt .ss-note a { display: inline-flex; align-items: center; min-height: 44px; }
.wl6-more a { color: var(--accent-text); font-weight: 600; }

/* Pictures that are plain screenshots */
.wl6-fit img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow); }

/* Scene 2: the switch and the drawn cover */
.wl6-s2 { --rep-accent: var(--nw); --rep-mark: transparent; --rep-pill: var(--nw-text); --rep-tint: var(--nw-tint); --rep-font: var(--ui); }
.wl6-s2:has(.wl6-sw input:not(:checked)) { --rep-accent: var(--p-ink); --rep-mark: var(--p-ink); --rep-pill: var(--p-ink); --rep-tint: #F0F0F3; --rep-font: var(--ui); }
.wl6-mk { display: block; width: 100%; height: 100%; }
.wl6 .on-sage { display: none; }
.wl6-s2:has(.wl6-sw input:not(:checked)) .on-sage { display: inline; }
.wl6-s2:has(.wl6-sw input:not(:checked)) .on-brand { display: none; }

.wl6-sw { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 8px; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ink); }
.wl6-sw input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wl6-sw-ui { position: relative; flex: none; width: 44px; height: 24px; box-sizing: border-box; border: 1px solid var(--text-2); border-radius: 999px; background: transparent; transition: background-color .2s ease-out, border-color .2s ease-out; }
.wl6-sw-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform .2s ease-out, background-color .2s ease-out; }
.wl6-sw:hover .wl6-sw-ui { border-color: var(--ink); }
.wl6-sw:active .wl6-sw-ui::after { width: 20px; }
.wl6-sw input:checked + .wl6-sw-ui { background: var(--ink); border-color: var(--ink); }
.wl6-sw input:checked + .wl6-sw-ui::after { background: var(--bg); transform: translateX(20px); }
.wl6-sw input:checked:active + .wl6-sw-ui::after { transform: translateX(16px); }
.wl6-sw input:focus-visible + .wl6-sw-ui { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.wl6-slide { container-type: inline-size; box-sizing: border-box; display: flex; flex-direction: column; aspect-ratio: 16 / 9; background: var(--p-paper); color: var(--p-ink); font-family: var(--rep-font); border: 1px solid var(--p-line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
.wl6-slide > * { margin-left: 4.2cqw; margin-right: 4.2cqw; }
.wl6-top { display: flex; align-items: center; justify-content: space-between; margin-top: 3.2cqw; }
.wl6-brand { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.wl6-mark { display: grid; place-items: center; flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: .8cqw; background: var(--rep-mark); color: var(--p-paper); font-size: max(10px, 2.6cqw); font-weight: 600; line-height: 1; transition: background-color .25s ease-out; }
.wl6-bname { font-size: max(10px, 2.8cqw); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wl6-contact { font-size: max(9px, 1.9cqw); font-weight: 600; color: var(--rep-pill); white-space: nowrap; transition: color .25s ease-out; }
.wl6-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; min-height: 0; }
.wl6-left { min-width: 0; }
.wl6-pill { display: inline-block; padding: .5cqw 1.8cqw; border-radius: 999px; background: var(--rep-tint); color: var(--rep-pill); font-size: max(9px, 1.9cqw); font-weight: 600; transition: background-color .25s ease-out, color .25s ease-out; }
.wl6-title { margin: 1.4cqw 0 0; font-size: max(22px, 7.4cqw); line-height: 1.05; letter-spacing: -.03em; font-weight: 400; }
.wl6-site { margin: .8cqw 0 0; font-size: max(11px, 2.6cqw); color: var(--p-mute); }
.wl6-date { margin: .2cqw 0 0; font-size: max(9px, 1.9cqw); color: var(--p-mute); }
.wl6-stats { display: flex; gap: 3.2cqw; margin-top: 2.4cqw; }
.wl6-stats small { display: block; font-size: max(9px, 1.7cqw); color: var(--p-mute); }
.wl6-stats b { display: block; font-size: max(14px, 4.2cqw); font-weight: 400; line-height: 1.1; }
.wl6-score { position: relative; flex: none; width: 21cqw; height: 21cqw; }
.wl6-score svg { display: block; width: 100%; height: 100%; }
.wl6-ring-bg { fill: none; stroke: var(--p-line); stroke-width: 8; }
.wl6-ring { fill: none; stroke: var(--rep-accent); stroke-width: 8; stroke-linecap: round; transition: stroke .25s ease-out; }
.wl6-score-in { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; }
.wl6-score-in b { font-size: max(20px, 7.4cqw); font-weight: 400; line-height: 1; }
.wl6-score-in small { font-size: max(8px, 1.6cqw); color: var(--p-mute); }
.wl6-foot { margin-top: 0; margin-bottom: 0; padding: 1.6cqw 0 2.4cqw; border-top: 1px solid var(--p-line); font-size: max(9px, 1.8cqw); color: var(--p-mute); }

/* Scene 3: four typographic file tiles */
.wl6-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wl6-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--nw); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); min-height: 152px; }
.wl6-ext { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--text-2); font-weight: 600; }
.wl6-tile strong { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.wl6-tile > span:not(.wl6-ext) { font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.wl6-tile em { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ink); }
.wl6-tile em i { width: 8px; height: 8px; border-radius: 2px; background: var(--nw); }

/* Scene 4: the Claude deck and its filmstrip */
.wl6-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wl6-strip a { display: block; position: relative; box-sizing: border-box; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; background: var(--card); transition: border-color .15s ease-out, opacity .15s ease-out; }
.wl6-strip a img { display: block; width: 100%; height: 100%; min-height: 44px; object-fit: cover; aspect-ratio: 16 / 9; }
.wl6-strip a:hover { border-color: var(--text-2); }
.wl6-strip a:active { opacity: .75; }
.wl6-strip a[aria-current="true"] { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: transparent; }
.wl6-strip a:focus-visible { outline-offset: 2px; }

/* Scene 5: the real Compare screenshot, cropped to its numbers, and a plain-type summary */
.wl6-crop { position: relative; overflow: hidden; aspect-ratio: 1720 / 872; border: 1px solid var(--line); border-radius: var(--r-sm); background: #FFFFFF; box-shadow: var(--shadow); }
.wl6-crop img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.wl6-mark-row { position: absolute; left: 2.2%; right: 2.2%; top: 10.6%; height: 10.4%; border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); transition: opacity .3s ease-out .25s, transform .3s ease-out .25s; }
.wl6-delta { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 8px; }
.wl6-delta li { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font-size: .875rem; color: var(--text-2); }
.wl6-d-score b { color: var(--ok); }
.wl6-delta b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 400; color: var(--ink); }

/* ---------- Wide screens, no reduced motion, script on: the sticky stage ---------- */
.wl6-story.is-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: stretch; }
.wl6-story.is-stage .wl6-step { display: flex; align-items: center; min-height: 340px; box-sizing: border-box; padding: 16px 0; border-top: 0; opacity: .62; transition: opacity .2s ease-out; }
.wl6-story.is-stage .wl6-step.is-active { opacity: 1; }
.wl6-stagecol { min-width: 0; }
.wl6-stage { position: sticky; top: 96px; display: flex; flex-direction: column; height: var(--H); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.wl6-stagehead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.wl6-count { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl6-rail { flex: none; display: flex; gap: 4px; }
.wl6-rail i { width: 24px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .2s ease-out; }
.wl6-rail i.is-done { background: var(--text-2); }
.wl6-rail i.is-now { background: var(--accent-text); }
.wl6-screen { position: relative; flex: 1; min-height: 0; background-color: var(--soft); background-image: radial-gradient(var(--line) 1px, transparent 1.4px); background-size: 16px 16px; }

.wl6-stage .wl6-scene { position: absolute; inset: 0; margin: 0; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease-out, transform .25s ease-out, visibility 0s linear .25s; }
.wl6-stage .wl6-scene.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wl6-stage .wl6-scene figcaption { margin-top: 12px; }
.wl6-stage .wl6-fit { display: grid; justify-items: center; min-height: 0; }
.wl6-stage .wl6-s1 .wl6-fit img { max-height: calc(var(--H) - 150px); width: auto; }
.wl6-stage .wl6-s4 .wl6-fit img { max-height: calc(var(--H) - 210px); width: auto; }
.wl6-stage .wl6-s2 { align-items: stretch; }
.wl6-stage .wl6-s2 .wl6-sw { align-self: flex-start; }

/* Motion that explains: the tiles fan out from one stack, the filmstrip lays out one slide at a time, the changed row lights up */
.wl6-stage .wl6-tile { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.86); transition: transform .3s ease-out, opacity .3s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-tile { opacity: 1; transform: none; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(2) { transition-delay: .06s; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(3) { transition-delay: .12s; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(4) { transition-delay: .18s; }
.wl6-stage .wl6-strip a { opacity: 0; transform: translateY(8px); transition: opacity .25s ease-out, transform .25s ease-out, border-color .15s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-strip a { opacity: 1; transform: none; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(2) { transition-delay: .05s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(3) { transition-delay: .1s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(4) { transition-delay: .15s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(5) { transition-delay: .2s; }
.wl6-stage .wl6-mark-row { opacity: 0; transform: scale(.98); }
.wl6-stage .wl6-scene.is-on .wl6-mark-row { opacity: 1; transform: none; }

/* Not in stage mode, but wide (reduced motion, or no script): text left, picture right, one row per step */
@media (min-width: 960px) {
	.wl6-story:not(.is-stage) .wl6-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px 0; }
	.wl6-story:not(.is-stage) .wl6-step:first-child { padding-top: 16px; }
	.wl6-story:not(.is-stage) .wl6-scene { order: 2; margin: 0; }
	.wl6-story:not(.is-stage) .wl6-txt { order: 1; }
}

/* ---------- Fit, cost and questions ---------- */
.wl6 .wl6-ask > .ss-in { padding-top: 48px; padding-bottom: 48px; }
.wl6-ask-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.wl6 .wl6-ask h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
.wl6-fitcol h3 { margin: 0 0 8px; }
.wl6-yes, .wl6-no, .wl6-cost { padding: 16px 0; border-top: 1px solid var(--line); }
.wl6-cost p { margin: 0; color: var(--text-2); line-height: 1.55; }
.wl6-cost a { display: inline; padding: 12px 0; color: var(--accent-text); font-weight: 600; }
.wl6-nolist { list-style: none; margin: 0; padding: 0; }
.wl6-nolist li { position: relative; padding: 4px 0 4px 32px; color: var(--text); font-size: 1rem; line-height: 1.5; }
.wl6-nolist li::before { content: "\00d7"; position: absolute; left: 4px; top: 2px; font-size: 1.25rem; line-height: 1.5; color: var(--text-2); font-weight: 600; }
.wl6-nolist a { color: var(--accent-text); }
.wl6-faqcol .ss-faq { margin: 0; max-width: none; gap: 8px; }
.wl6-faqcol .ss-faq summary { min-height: 44px; align-items: center; padding: 8px 0; }
@media (min-width: 960px) {
	.wl6-ask-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}

/* ---------- Video and close ---------- */
.wl6 .wl6-close > .ss-in { padding-top: 48px; padding-bottom: 32px; }
.wl6-close-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.wl6-close-txt .ss-sub { margin-bottom: 24px; }
.wl6-close-txt .ss-actions { justify-content: flex-start; }
.wl6-vid .ss-video-frame { max-width: none; margin: 0; padding: 8px; border-radius: var(--r-md); }
.wl6-vid .ss-video-frame video { border-radius: var(--r-sm); }
.wl6-vcap { margin: 12px 0 0; color: var(--text-2); font-size: .875rem; }
.wl6-vcap strong { color: var(--ink); }
.wl6-vid .ss-video-tx { margin: 4px 0 0; font-size: .875rem; }
.wl6-vid .ss-video-tx summary { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.wl6-rel { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .875rem; line-height: 1.8; }
.wl6-rel a { display: inline-block; padding: 8px 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.wl6-rel a:hover { color: var(--ink); }
@media (min-width: 960px) {
	.wl6-close-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
}

/* Between phone and desktop, keep the stacked pictures from getting huge */
@media (min-width: 481px) and (max-width: 959px) {
	.wl6 figure.wl6-scene { max-width: 560px; }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
	.wl6 .wl6-hero .ss-in { padding-top: 32px; padding-bottom: 32px; }
	.wl6-index, .wl6-hero .ss-btn-quiet { display: none; }
	.wl6-step { padding: 16px 0; }
	.wl6-tile em, .wl6-close-txt .ss-sub { display: none; }
	.wl6-delta { gap: 4px; }
	.wl6-delta li { padding: 8px; }
	.wl6-delta b { font-size: 1.125rem; }
	.wl6 .wl6-story-sec > .ss-in, .wl6 .wl6-ask > .ss-in { padding-top: 48px; padding-bottom: 48px; }
	.wl6-tile { padding: 12px 12px 12px 16px; min-height: 0; }
	.wl6-tile strong { font-size: 1.25rem; }
	.wl6-actions-note { margin-top: 12px; }
	.wl6 .wl6-close > .ss-in { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.wl6 *, .wl6 *::before, .wl6 *::after { transition: none !important; animation: none !important; }
}

/* v6 hero: the before and after divider, decluttered. One stage, one divider, one name field, one colour row.
   The example report is HTML in the site font, on a fixed "paper" palette (--rep-*) so it looks the same in light and dark mode. It scales with container query units (cqw). */

.wl6h a:focus-visible, .wl6h .ss-btn:focus-visible, .wl6h button:focus-visible, .wl6h input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.wl6 .wl6h-hero .ss-in { padding-top: 32px; padding-bottom: 32px; text-align: center; }
.wl6 .wl6h-hero h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); max-width: 17em; margin: 0 auto 12px; }
.wl6 .wl6h-hero .ss-lead { text-wrap: balance; max-width: 40em; margin: 0 auto 24px; font-size: 1.125rem; }
.wl6 .wl6h-hero .ss-note { margin: 16px 0 0; text-align: center; }

.wl6h-lab { margin-top: 32px; text-align: left; }
.wl6 .wl6h-hero .ss-actions { justify-content: center; }
.wl6h-lab *, .wl6h-lab *::before, .wl6h-lab *::after { box-sizing: border-box; }

/* The stage. --pos is the divider, set by the script. Everything right of it is the version in your name. */
.wl6h-stage {
	--pos: 58%;
	--rep-accent: #00A6FE; --rep-paper: #FFFFFF; --rep-ink: #1D1D1F; --rep-mute: #6B6B73; --rep-line: #E3E3E8; --rep-soft: #F4F4F6; --rep-grey: #C9C9CF; --rep-focus: #0069AD; --rep-ok: #2E7D32;
	position: relative; container-type: inline-size; aspect-ratio: 2 / 1; max-width: 840px; margin: 0 auto;
	border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--rep-paper); box-shadow: var(--shadow-lg);
	user-select: none; -webkit-user-select: none;
}
.wl6h-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.wl6h-stage.is-tween .wl6h-clip { transition: clip-path .28s ease-out; }
.wl6h-stage.is-tween .wl6h-handle { transition: left .28s ease-out; }

.wl6h-doc { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqw 5cqw 0; background: var(--rep-paper); color: var(--rep-ink); font-family: var(--ui); }
.wl6h-doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1cqw; background: var(--rep-grey); }
.wl6h-doc-own::before { background: var(--rep-accent); }

.wl6h-top { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.wl6h-mark { display: grid; place-items: center; flex: none; width: 4cqw; height: 4cqw; border-radius: .8cqw; background: var(--rep-ink); color: #FFFFFF; font-size: max(10px, 2.3cqw); font-weight: 600; line-height: 1; }
.wl6h-doc-own .wl6h-mark { background: var(--rep-accent); color: #0B0C0E; }
.wl6h-logo { display: none; width: 4cqw; height: 4cqw; flex: none; }
.wl6h-doc-own.is-mk .wl6h-logo { display: block; }
.wl6h-doc-own.is-mk .wl6h-mark { display: none; }
.wl6h-bname { font-size: max(12px, 2.5cqw); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wl6h-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 26cqw; gap: 4cqw; align-items: center; min-height: 0; }
.wl6h-title { margin: 0; font-size: max(28px, 9.6cqw); line-height: 1.05; font-weight: 400; letter-spacing: -.035em; }
.wl6h-bar { display: block; width: 7cqw; height: .9cqw; margin: 2cqw 0 1.8cqw; border-radius: 1cqw; background: var(--rep-grey); }
.wl6h-doc-own .wl6h-bar { background: var(--rep-accent); }
.wl6h-site { margin: 0; font-size: max(12px, 2.2cqw); color: var(--rep-mute); }

.wl6h-score { position: relative; display: grid; justify-items: center; justify-self: center; width: 100%; padding: 2.4cqw 1cqw 2.6cqw; border: 1px solid var(--rep-line); border-top: .8cqw solid var(--rep-grey); border-radius: 1.4cqw; background: var(--rep-soft); }
.wl6h-doc-own .wl6h-score { border-top-color: var(--rep-accent); }
.wl6h-score svg { width: 18cqw; height: 18cqw; }
.wl6h-ringbg { fill: none; stroke: var(--rep-line); stroke-width: 7; }
.wl6h-ring { fill: none; stroke: var(--rep-ok); stroke-width: 7; stroke-linecap: round; }
.wl6h-scorein { position: absolute; top: 3.2cqw; left: 0; right: 0; height: 18cqw; display: grid; align-content: center; justify-items: center; }
.wl6h-scorein b { font-size: max(20px, 6.2cqw); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.wl6h-scorein small { font-size: max(9px, 1.4cqw); color: var(--rep-mute); }

.wl6h-foot { margin: 0; padding: 2cqw 0 3cqw; border-top: 1px solid var(--rep-line); text-align: right; font-size: max(11px, 2cqw); font-weight: 600; color: var(--rep-mute); }
.wl6h-doc-own .wl6h-foot { color: var(--rep-ink); text-align: left; }

/* The divider: one hairline and a small grip */
.wl6h-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.wl6h-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--rep-ink); }
.wl6h-grip { position: absolute; top: 50%; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: var(--rep-ink); color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF; transition: transform .15s ease-out; }
.wl6h-range:hover ~ .wl6h-handle .wl6h-grip { transform: scale(1.1); }
.wl6h-range:active ~ .wl6h-handle .wl6h-grip { transform: scale(.94); }
.wl6h-range:focus-visible ~ .wl6h-handle .wl6h-grip { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--rep-focus); }

/* The range input fills the stage and is invisible: a drag anywhere moves the divider. Vertical swipes still scroll the page. */
.wl6h-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.wl6h-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.wl6h-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; background: transparent; border: 0; }
.wl6h-range::-moz-range-track { height: 100%; background: transparent; }
.wl6h-range::-moz-range-thumb { width: 1px; height: 100%; background: transparent; border: 0; }
.wl6h-lab:not(.js) .wl6h-range, .wl6h-lab:not(.js) .wl6h-handle, .wl6h-lab:not(.js) .wl6h-dock { display: none; }

/* Under the stage: one row, no box */
.wl6h-dock { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px 32px; max-width: 840px; margin: 16px auto 0; }
.wl6h-ctl { min-width: 0; }
.wl6h-ctl:first-child { flex: 1 1 240px; max-width: 360px; }
.wl6h-ctl label, .wl6h-lbl { display: block; margin: 0 0 8px; font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.wl6h-ctl input[type="text"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--text-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .15s ease-out; }
.wl6h-ctl input[type="text"]::placeholder { color: var(--text-2); opacity: 1; }
.wl6h-ctl input[type="text"]:hover, .wl6h-ctl input[type="text"]:focus-visible { border-color: var(--ink); }
.wl6h-sw { display: flex; gap: 8px; }
.wl6h-sw button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--text-2); border-radius: var(--r-sm); background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 3px var(--bg); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.wl6h-sw button:hover { border-color: var(--ink); }
.wl6h-sw button:active { box-shadow: inset 0 0 0 5px var(--bg); }
.wl6h-sw button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 1px var(--ink); }
.wl6 .wl6h-cap { max-width: 840px; margin: 16px auto 0; color: var(--text-2); font-size: .875rem; line-height: 1.5; text-align: center; }

@media (max-width: 640px) {
	.wl6h-hero .ss-in { padding-top: 24px; padding-bottom: 24px; }
	.wl6h-hero .ss-actions .ss-btn-quiet { display: none; }
	.wl6h-stage { aspect-ratio: 1 / .78; }
	.wl6h-main { grid-template-columns: minmax(0, 1fr) 30cqw; gap: 3cqw; }
	.wl6h-title { font-size: max(24px, 9.2cqw); }
	.wl6h-site { font-size: max(12px, 3.6cqw); }
	.wl6h-logo { width: 7cqw; height: 7cqw; }
	.wl6h-mark { width: 7cqw; height: 7cqw; border-radius: 1.4cqw; font-size: max(11px, 4cqw); }
	.wl6h-bname { font-size: max(13px, 4.2cqw); }
	.wl6h-score svg { width: 20cqw; height: 20cqw; }
	.wl6h-scorein { top: 3.6cqw; height: 20cqw; }
	.wl6h-scorein b { font-size: max(20px, 7cqw); }
	.wl6h-scorein small { display: none; }
	.wl6h-foot { font-size: max(12px, 3.4cqw); padding: 3cqw 0 4cqw; }
	.wl6h-grip { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
	.wl6h-sw button { flex: 1 1 0; }
	.wl6h-dock { gap: 12px; }
	.wl6h-ctl { flex: 1 1 100%; max-width: none; }
}

/* Phones: trim repeats so the page stays short. The hero and the closing section still carry the Download button. */
@media (max-width: 480px) {
	.wl6 #step-1 figcaption, .wl6 .wl6-rel, .wl6 #step-3 .wl6-more { display: none; }
	.wl6 .wl6-story-sec > .ss-in, .wl6 .wl6-ask > .ss-in, .wl6 .wl6-close > .ss-in { padding-top: 32px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.wl6h-grip, .wl6h-clip, .wl6h-handle, .wl6h-sw button, .wl6h-ctl input[type="text"] { transition: none !important; }
}

/* Story: keep every step at full contrast; mark the active one with a rule instead of fading the others */
.wl6-story.is-stage .wl6-step { opacity: 1; border-left: 2px solid var(--line); padding-left: 24px; transition: border-color .2s ease-out; }
.wl6-story.is-stage .wl6-step.is-active { border-left-color: var(--ink); }

/* ===== Round 2 (critic loop) ===== */
.wl6 { --ctl-line: color-mix(in srgb, var(--text-2) 78%, var(--bg)); }   /* 3:1 or better in light and dark; the site's --line is 1.2:1 */
.wl6 .ss-btn-quiet { border-color: var(--ctl-line); }

/* Hero: more air above the headline, a wider stage, one soft shadow, the difference visible on both halves */
.wl6 .wl6h-hero .ss-in { padding-top: 96px; }
.wl6h-stage { max-width: 960px; box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6h-doc-plain .wl6h-top { justify-content: flex-end; }
.wl6h-grip { background: #FFFFFF; color: var(--rep-ink); box-shadow: 0 0 0 2px var(--rep-ink); }
.wl6h-range:focus-visible ~ .wl6h-handle .wl6h-grip { box-shadow: 0 0 0 2px var(--rep-ink), 0 0 0 5px var(--rep-focus); }
.wl6h-dock { max-width: 960px; margin-top: 24px; }
.wl6 .wl6h-cap { max-width: 50ch; margin-top: 16px; }
.wl6 .wl6h-hero .ss-note { font-size: 1rem; max-width: 50ch; margin-left: auto; margin-right: auto; }

/* Story: centred heading like the hero, flat stage (no dot grid, one soft shadow), real controls on borders */
.wl6 .wl6-story-sec .ss-in > h2, .wl6 .wl6-story-sec .ss-in > .ss-sub { text-align: center; margin-left: auto; margin-right: auto; }
.wl6 .wl6-screen { background-image: none; }
.wl6 .wl6-stage, .wl6 .wl6-tile, .wl6 .wl6-fit img, .wl6 .wl6-slide { box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6 .wl6-tile { padding: 16px 16px 16px 24px; }
.wl6 .wl6-opt { padding: 4px 8px; }
.wl6 .wl6-strip a { border-color: var(--ctl-line); }
.wl6 .wl6-more a, .wl6 .wl6-more-a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; }
.wl6 .wl6-more { margin: 0 0 12px; }

/* Fit, cost and questions: the cost row first, calm FAQ rules instead of boxes */
.wl6 .wl6-ask-h { margin: 0 0 24px; font-size: clamp(1.5rem, 3vw, 2rem); text-align: left; }
.wl6-cost3 { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; border-top: 1px solid var(--ctl-line); }
.wl6-cost3 li { padding-top: 24px; }
.wl6-cost3 strong { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
.wl6-cost3 span { display: block; margin-top: 8px; max-width: 28em; color: var(--text-2); line-height: 1.5; }
.wl6-cost3 .wl6-more-a { margin-top: 4px; }
@media (max-width: 800px) { .wl6-cost3 { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; } }
.wl6 .wl6-faqcol .ss-faq details { background: transparent; border: 0; border-bottom: 1px solid var(--ctl-line); border-radius: 0; padding: 0; }
.wl6 .wl6-faqcol .ss-faq details:first-child { border-top: 1px solid var(--ctl-line); }
.wl6 .wl6-yes, .wl6 .wl6-no { border-top-color: var(--ctl-line); }

/* Close: one centred stack; the video sits quietly under the button */
.wl6 .wl6-close .ss-in, .wl6 .wl6-close h2, .wl6 .wl6-close .wl6-vcap { text-align: center; }
.wl6-close-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.wl6-close-txt .ss-actions { justify-content: center; }
.wl6-close-txt .ss-sub { margin-left: auto; margin-right: auto; }
.wl6 .wl6-vid { width: 100%; max-width: 720px; margin: 8px auto 0; }
.wl6-vcap strong { font-weight: 600; }
.wl6 .wl6-vid .ss-video-tx { text-align: left; }
@media (min-width: 960px) { .wl6-close-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Phones and narrow screens: each picture sits under its own step heading */
@media (max-width: 959px) {
	.wl6-story:not(.is-stage) .wl6-step { display: flex; flex-direction: column; }
	.wl6-story:not(.is-stage) .wl6-txt { order: -1; }
	.wl6-story:not(.is-stage) figure.wl6-scene { margin: 12px 0 0; }
}
@media (max-width: 480px) {
	.wl6 .wl6h-hero .ss-in { padding-top: 48px; }
	.wl6 #step-5 figcaption { display: block; }
	.wl6 #step-5 .ss-actions, .wl6 #step-5 .ss-note { display: none; }
}
.wl6-stage .wl6-s2 .wl6-fit img { max-height: calc(var(--H) - 150px); width: auto; }
.wl6 .wl6-vid { max-width: 600px; }
.wl6h-stage { aspect-ratio: 2.15 / 1; }
@media (max-width: 640px) { .wl6h-stage { aspect-ratio: 1 / .78; } }

/* ===== Round 3 (critic loop) ===== */
.wl6h-doc::before { display: none; }                       /* no bar across the top: colour stays inside the report */
.wl6h-title { font-size: max(28px, 5.4cqw); }              /* the page headline is the biggest word, not the sample client's name */
.wl6h-bar { width: 5cqw; height: .7cqw; margin: 1.6cqw 0 1.4cqw; }
.wl6 .wl6h-try { margin: 0 auto 16px; max-width: 50ch; text-align: center; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
@media (max-width: 640px) { .wl6h-title { font-size: max(24px, 9.2cqw); } }
.wl6 .wl6-costnote { margin: -24px 0 48px; color: var(--text-2); font-size: .875rem; max-width: 50ch; }
@media (max-width: 800px) { .wl6 .wl6-costnote { margin: -16px 0 32px; } }

/* One rhythm for both checklists */
.wl6 .wl6-yes .ss-fr-l li, .wl6 .wl6-nolist li { font-size: 1rem; line-height: 1.5; padding: 8px 0 8px 32px; }
.wl6 .wl6-yes .ss-fr-l li::before { top: 14px; }
.wl6 .wl6-nolist li::before { top: 8px; font-size: 1.125rem; }
/* The closing band: no site grid running through the headline */
.wl6 .wl6-close .ss-in::before { display: none; }

/* ===== Round 3b (system critic, round 2 findings) ===== */
/* Line length: "ch" is the width of a zero, wider than an average letter, so 50ch is about 65 characters of real text */
.wl6 .wl6h-hero .ss-lead { max-width: 52ch; }
.wl6 .wl6h-hero .ss-note { max-width: 40ch; }
.wl6 .wl6-close-txt .ss-sub { max-width: 30em; }
.wl6 .wl6-faqcol .ss-faq details p { max-width: 50ch; }
.wl6 .wl6-ask-grid p, .wl6 .wl6-txt p { max-width: 50ch; }
/* Radius and spacing scale */
.wl6-rail i, .wl6-tile em i { border-radius: var(--r-xs); }
.wl6 .ss-actions { gap: 12px; }
.wl6 .ss-fr-l li { padding: 8px 0 8px 32px; }
.wl6 .ss-fr-l li::before { top: 14px; }
.wl6 .wl6-nolist li::before { top: 4px; }
/* Motion: 150 to 300ms in total, staggers included */
.wl6-stage .wl6-tile { transition: transform .2s ease-out, opacity .2s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(2) { transition-delay: .03s; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(3) { transition-delay: .06s; }
.wl6-stage .wl6-scene.is-on .wl6-tile:nth-child(4) { transition-delay: .09s; }
.wl6-stage .wl6-strip a { transition: opacity .2s ease-out, transform .2s ease-out, border-color .15s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(2) { transition-delay: .02s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(3) { transition-delay: .04s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(4) { transition-delay: .06s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(5) { transition-delay: .08s; }
.wl6-stage .wl6-mark-row { transition: opacity .2s ease-out .1s, transform .2s ease-out .1s; }
/* Small print is 16px: captions, notes and tile text */
.wl6-scene figcaption, .wl6-vcap, .wl6 .wl6h-cap, .wl6 .wl6h-try, .wl6 .wl6-costnote, .wl6-rel, .wl6-vid .ss-video-tx, .wl6-tile > span, .wl6-delta li, .wl6 .ss-note { font-size: 1rem; }
/* Targets and states for links and FAQ rows */
.wl6-rel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.wl6 .wl6-more a:hover, .wl6 .wl6-more-a:hover, .wl6 .wl6-txt p a:hover, .wl6 .wl6-rel a:hover { color: var(--ink); }
.wl6 .wl6-more a:active, .wl6 .wl6-more-a:active, .wl6 .wl6-txt p a:active, .wl6 .wl6-rel a:active { opacity: .7; }
.wl6 .ss-faq summary:hover { background: var(--hover); }
.wl6 .ss-faq summary:active { background: var(--soft); }
.wl6-strip a[aria-current="true"] { border-color: var(--ink); }

/* ===== v7: a real multi-slide deck behind the divider ===== */
.wl6h-doc { padding: 0; }
.wl6h-stage { aspect-ratio: 16 / 9; max-width: 880px; }
.wl6h-dock { max-width: 880px; }
.wl6h-ctl:first-child { flex: none; max-width: none; }
.wl6h-ctl-name { flex: 1 1 220px; max-width: 300px; }
.wl6 .wl6h-hero .ss-note { max-width: none; font-size: 1rem; }
.wl6 .wl6h-hero .ss-lead { max-width: 52ch; }
.wl6 .wl6h-hero .ss-in::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 62%); }
.wl6h-ring { stroke: #B36B00; }

.wl6h-sl { display: none; position: absolute; inset: 0; flex-direction: column; padding: 4.2cqw 5cqw 0; }
.wl6h-stage[data-slide="1"] .wl6h-sl1, .wl6h-stage[data-slide="2"] .wl6h-sl2, .wl6h-stage[data-slide="3"] .wl6h-sl3, .wl6h-stage[data-slide="4"] .wl6h-sl4 { display: flex; }
.wl6h-eyebrow { margin: 0 0 1.4cqw; font: 600 max(11px, 1.4cqw) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rep-mute); }
.wl6h-chip { margin-top: 1.4cqw; padding: .4cqw 2cqw; border-radius: .6cqw; font-size: max(11px, 1.4cqw); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wl6h-chip-w { background: #FFF1D6; color: #8A5200; }
.wl6h-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 1cqw 0; }
.wl6h-h { margin: 0; font-size: max(22px, 3.8cqw); line-height: 1.1; font-weight: 400; letter-spacing: -.03em; }
.wl6h-body .wl6h-bar { margin: 1.4cqw 0 2cqw; }
.wl6h-lede { margin: 0 0 2.6cqw; max-width: 28em; font-size: max(15px, 2.4cqw); line-height: 1.4; }
.wl6h-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; }
.wl6h-stats div { padding: 1.8cqw 2cqw; border: 1px solid var(--rep-line); border-radius: 1.2cqw; background: var(--rep-soft); }
.wl6h-stats small { display: block; font-size: max(11px, 1.3cqw); letter-spacing: .08em; text-transform: uppercase; color: var(--rep-mute); }
.wl6h-stats b { display: block; margin-top: .4cqw; font-size: max(20px, 4.4cqw); font-weight: 400; line-height: 1.1; }
.wl6h-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: max(12px, 1.95cqw); }
.wl6h-table th { padding: .6cqw .8cqw; text-align: left; font-size: max(11px, 1.3cqw); letter-spacing: .08em; text-transform: uppercase; color: var(--rep-mute); font-weight: 600; border-bottom: 1px solid var(--rep-line); }
.wl6h-table td { padding: .85cqw .8cqw; border-bottom: 1px solid var(--rep-line); }
.wl6h-table th:last-child, .wl6h-table td:last-child { text-align: right; }
.wl6h-sev { display: inline-block; padding: .3cqw 1.2cqw; border-radius: .6cqw; font-style: normal; font-size: max(11px, 1.5cqw); font-weight: 600; }
.wl6h-sev-e { background: #FDECEA; color: #A12B1C; }
.wl6h-sev-w { background: #FFF1D6; color: #8A5200; }
.wl6h-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.wl6h-col { padding: 1.8cqw 2cqw 2cqw; border: 1px solid var(--rep-line); border-top: .7cqw solid var(--rep-grey); border-radius: 1.2cqw; background: var(--rep-soft); }
.wl6h-doc-own .wl6h-col { border-top-color: var(--rep-accent); }
.wl6h-col small { display: block; font: 600 max(11px, 1.4cqw) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rep-mute); }
.wl6h-col p { margin: 1cqw 0 0; font-size: max(13px, 1.95cqw); line-height: 1.35; }
.wl6h-foot { margin-top: 0; }

/* The slide picker: a four-button group */
.wl6h-seg { display: flex; }
.wl6h-seg button { min-height: 44px; padding: 0 16px; border: 1px solid var(--text-2); background: var(--bg); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.wl6h-seg button + button { margin-left: -1px; }
.wl6h-seg button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.wl6h-seg button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wl6h-seg button:hover { background: var(--hover); }
.wl6h-seg button:active { background: var(--soft); }
.wl6h-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); position: relative; z-index: 1; }

/* Cost row: four columns, the Claude note is one of them */
.wl6-cost3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
@media (max-width: 1000px) { .wl6-cost3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wl6-cost3 { grid-template-columns: minmax(0, 1fr); } }

/* Story: the text sits at the top of its step so it lines up with the panel */
.wl6-story.is-stage .wl6-step { align-items: flex-start; padding-top: 40px; }

@media (max-width: 640px) {
	.wl6h-stage { aspect-ratio: 1 / .96; }
	.wl6h-sl { padding-top: 5cqw; }
	.wl6h-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2cqw; }
	.wl6h-stats div { padding: 2cqw 2.4cqw; }
	.wl6h-stats b { font-size: max(20px, 6cqw); }
	.wl6h-h { font-size: max(20px, 5.6cqw); }
	.wl6h-lede { font-size: max(14px, 3.6cqw); }
	.wl6h-table { font-size: max(12px, 3.3cqw); }
	.wl6h-table td { padding: 1.2cqw 1cqw; }
	.wl6h-cols { grid-template-columns: minmax(0, 1fr); gap: 1.6cqw; }
	.wl6h-col { padding: 1.4cqw 2.4cqw 1.6cqw; }
	.wl6h-col p { font-size: max(12px, 3.2cqw); margin-top: .4cqw; }
	.wl6h-seg { width: 100%; }
	.wl6h-seg button { flex: 1 1 0; padding: 0 4px; }
	.wl6h-ctl-name { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 640px) {
	.wl6h-ctl:first-child { flex: 1 1 100%; }
	.wl6h-seg button { white-space: nowrap; font-size: .875rem; }
}

/* ===== v7b: arrows, a stacked-deck look and richer slides ===== */
.wl6h-wrap { position: relative; max-width: 880px; margin: 24px auto 0; }
.wl6h-wrap .wl6h-stage { margin: 0; z-index: 1; }
/* two slide edges peeking out behind the stage: this is a deck with more slides */
.wl6h-wrap::before, .wl6h-wrap::after { content: ""; position: absolute; border: 1px solid var(--ctl-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--card); z-index: 0; }
.wl6h-wrap::before { left: 24px; right: 24px; top: -10px; height: 24px; }
.wl6h-wrap::after { left: 48px; right: 48px; top: -20px; height: 24px; }

.wl6h-nav { position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ctl-line); border-radius: var(--r-md); background: var(--bg); color: var(--ink); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out; }
.wl6h-prev { left: -68px; }
.wl6h-next { right: -68px; }
.wl6h-nav:hover { background: var(--hover); border-color: var(--ink); }
.wl6h-nav:active { background: var(--soft); transform: scale(.96); }
.wl6h-count { display: none; margin: 0; text-align: center; font-size: 1rem; color: var(--text-2); }
.wl6h-count b { color: var(--ink); font-weight: 600; margin-right: 8px; }
.wl6h-lab:not(.js) .wl6h-nav, .wl6h-lab:not(.js) .wl6h-count { display: none; }
@media (max-width: 1100px) {
	.wl6h-prev { left: 8px; }
	.wl6h-next { right: 8px; }
	.wl6h-nav { background: var(--bg); box-shadow: 0 1px 2px rgba(11, 12, 14, .12); }
}
@media (max-width: 640px) {
	.wl6h-wrap { padding-bottom: 56px; }
	.wl6h-nav { top: auto; bottom: 0; margin-top: 0; box-shadow: none; }
	.wl6h-prev { left: 0; }
	.wl6h-next { right: 0; }
	.wl6h-count { display: block; position: absolute; left: 56px; right: 56px; bottom: 0; line-height: 48px; }
	.wl6h-ctl-seg { display: none; }
	.wl6h-wrap::before { left: 16px; right: 16px; }
	.wl6h-wrap::after { left: 32px; right: 32px; }
}
.wl6h-grip { border-radius: var(--r-md); }
.wl6h-ctl label, .wl6h-lbl { font-size: 1rem; }
.wl6h-doc-own .wl6h-mark { color: var(--rep-on, #0B0C0E); }
.wl6h-stage { --rep-bad: #C5321F; --rep-note-c: #9A9AA2; }

/* slide anatomy */
.wl6h-sl { padding: 4cqw 5cqw 0 5.4cqw; }
.wl6h-sl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1cqw; background: var(--rep-grey); }
.wl6h-doc-own .wl6h-sl::before { background: var(--rep-accent); }
.wl6h-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.wl6h-foot em { font-style: normal; font-weight: 400; color: var(--rep-mute); }
.wl6h-chips { list-style: none; margin: 2.4cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.wl6h-chips li { display: inline-flex; align-items: center; gap: .8cqw; padding: .7cqw 1.6cqw; border: 1px solid var(--rep-line); border-radius: 1cqw; background: var(--rep-soft); font-size: max(12px, 1.7cqw); color: var(--rep-mute); }
.wl6h-chips li::before { content: ""; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--rep-grey); }
.wl6h-doc-own .wl6h-chips li::before { background: var(--rep-accent); }
.wl6h-chips b { font-weight: 600; color: var(--rep-ink); }

.wl6h-stats div { border-top: .7cqw solid var(--rep-grey); }
.wl6h-doc-own .wl6h-stats div { border-top-color: var(--rep-accent); }
.wl6h-stats { margin-bottom: 2.4cqw; }
.wl6h-share { display: flex; gap: .5cqw; height: 1.8cqw; border-radius: .9cqw; overflow: hidden; }
.wl6h-share i { display: block; }
.wl6h-sh-e { background: var(--rep-bad); }
.wl6h-sh-w { background: #B36B00; }
.wl6h-sh-n { background: var(--rep-note-c); }
.wl6h-legend { list-style: none; margin: 1.2cqw 0 0; padding: 0; display: flex; gap: 3cqw; font-size: max(12px, 1.6cqw); color: var(--rep-mute); }
.wl6h-legend li { display: inline-flex; align-items: center; gap: .9cqw; }
.wl6h-legend span { width: 1.2cqw; height: 1.2cqw; border-radius: .3cqw; }

.wl6h-pg { display: flex; align-items: center; justify-content: flex-end; gap: 1.2cqw; }
.wl6h-pg i { display: block; flex: 0 1 12cqw; height: .9cqw; border-radius: .5cqw; background: var(--rep-grey); transform-origin: left; }
.wl6h-doc-own .wl6h-pg i { background: var(--rep-accent); }
.wl6h-pg b { min-width: 3cqw; text-align: right; font-weight: 600; }
.wl6h-table th:last-child { text-align: right; }

.wl6h-colh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6cqw; }
.wl6h-colh small { font: 600 max(12px, 1.5cqw) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rep-ink); }
.wl6h-colh span { font-size: max(11px, 1.3cqw); color: var(--rep-mute); }
.wl6h-col p { display: flex; align-items: center; gap: 1.2cqw; margin: 1.2cqw 0 0; padding: 1.2cqw 1.2cqw; border-radius: 1cqw; background: var(--rep-paper); border: 1px solid var(--rep-line); font-size: max(12px, 1.75cqw); line-height: 1.25; }
.wl6h-col p u { text-decoration: none; flex: none; display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--rep-ink); color: #FFFFFF; font-size: max(11px, 1.5cqw); font-weight: 600; }
.wl6h-doc-own .wl6h-col p u { background: var(--rep-accent); color: var(--rep-on, #0B0C0E); }
.wl6h-col p span { flex: 1; min-width: 0; }
.wl6h-col p em { flex: none; font-style: normal; font-size: max(10px, 1.2cqw); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rep-mute); }

/* fixes from the system critic */
.wl6-crop, .ss-video-frame { box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6 .wl6-vid .ss-video-tx p { max-width: 50ch; }
.wl6-tile em { font-size: .875rem; }
.wl6 .ss-fr-l li::before { border-color: var(--ok); top: 12px; }
.wl6 .wl6-yes .ss-fr-l li::before { top: 12px; }
.wl6-txt .wl6-strip { max-width: 420px; margin-top: 16px; }
.wl6-txt .wl6-strip a { opacity: 1; transform: none; }

@media (max-width: 640px) {
	.wl6h-sl { padding-top: 5cqw; }
	.wl6h-chips li { font-size: max(12px, 3.2cqw); padding: 1cqw 2.2cqw; }
	.wl6h-legend { gap: 2cqw; flex-wrap: wrap; font-size: max(12px, 3cqw); }
	.wl6h-pg i { flex-basis: 14cqw; }
	.wl6h-col p { font-size: max(12px, 3.1cqw); padding: 1cqw 1.8cqw; margin-top: .8cqw; }
	.wl6h-col p u { width: 5cqw; height: 5cqw; font-size: max(11px, 2.8cqw); }
	.wl6h-col p em { font-size: max(10px, 2.4cqw); }
}

/* ===== v7c: two different fonts, so the difference between SEOSage and your brand shows =====
   SEOSage reports default to Calibri (Carlito is its open, same-size stand-in). Your brand can use any font you own in a deck; this example uses Proxima Nova
   (licensed, so only shown if installed) with Figtree, an open font, as the stand-in everyone else sees. */
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/carlito-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/carlito-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-var-latin.woff2) format("woff2"); }
.wl6h-doc-plain { font-family: Calibri, "Carlito", "Segoe UI", Arial, sans-serif; }
.wl6h-doc-own { font-family: "Proxima Nova", "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.wl6h-doc-plain .wl6h-title, .wl6h-doc-plain .wl6h-h { letter-spacing: -.01em; }
/* the small caps labels follow the slide font, so the font difference shows everywhere */
.wl6h-eyebrow, .wl6h-colh small { font-family: inherit; }
.wl6h-ftag { font-size: max(11px, 1.4cqw); font-weight: 400; color: var(--rep-mute); letter-spacing: .02em; padding: .3cqw 1.2cqw; border: 1px solid var(--rep-line); border-radius: .8cqw; background: var(--rep-soft); white-space: nowrap; }
.wl6h-doc-own .wl6h-ftag { margin-left: 1.2cqw; }
.wl6h-doc-plain .wl6h-top { gap: 1.4cqw; }
.wl6h-doc-plain .wl6h-ftag { margin-right: 1cqw; }

/* ===== v7d: arrows are just the icons, no box and no border ===== */
.wl6h-nav, .wl6h-nav:hover, .wl6h-nav:active { border: 0; background: transparent; box-shadow: none; }
.wl6h-nav { color: var(--ink); transition: color .15s ease-out, transform .15s ease-out; }
.wl6h-nav svg { width: 28px; height: 28px; }
.wl6h-nav:hover { color: var(--accent-text); transform: scale(1.12); }
.wl6h-nav:active { color: var(--ink); transform: scale(.92); }
/* arrows stay beside the stage, centred; where there is no room outside, they sit just inside its edges with a soft white halo so the icon stays readable */
@media (max-width: 1100px) {
	.wl6h-prev { left: 4px; }
	.wl6h-next { right: 4px; }
	.wl6h-nav { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff); }
}
@media (max-width: 640px) {
	.wl6h-wrap { padding-bottom: 56px; }
	.wl6h-nav { top: auto; bottom: 0; margin-top: 0; filter: none; }
	.wl6h-prev { left: 0; }
	.wl6h-next { right: 0; }
	.wl6h-count { display: block; position: absolute; left: 56px; right: 56px; bottom: 0; line-height: 48px; }
}

/* ===== v7e: cleaner deck edges and header row ===== */
.wl6h-wrap { margin-top: 48px; }
/* two soft paper edges behind the stage, no outlines, so it reads as a stack of slides */
.wl6h-wrap::before, .wl6h-wrap::after { border: 0; background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-radius: var(--r-md) var(--r-md) 0 0; }
.wl6h-wrap::before { left: 20px; right: 20px; top: -8px; height: 16px; }
.wl6h-wrap::after { left: 40px; right: 40px; top: -16px; height: 16px; background: color-mix(in srgb, var(--ink) 3.5%, var(--bg)); }
@media (max-width: 640px) {
	.wl6h-wrap::before { left: 12px; right: 12px; }
	.wl6h-wrap::after { left: 24px; right: 24px; }
}

/* the slide header: logo and name, then air, then the slide title */
.wl6h-sl { padding-top: 3.4cqw; }
.wl6h-top { margin-bottom: 2.4cqw; }
.wl6h-sl1 .wl6h-top { margin-bottom: 0; }
.wl6h-ftag { padding: 0; border: 0; background: none; font-size: max(11px, 1.4cqw); color: var(--rep-mute); letter-spacing: .01em; }
.wl6h-ftag::before { content: "Aa"; margin-right: .7cqw; font-weight: 600; color: var(--rep-ink); }
.wl6h-doc-own .wl6h-ftag { margin-left: 1.4cqw; padding-left: 1.4cqw; border-left: 1px solid var(--rep-line); }
.wl6h-doc-plain .wl6h-ftag { margin-right: 1.4cqw; padding-right: 1.4cqw; border-right: 1px solid var(--rep-line); }
/* a little less height in the slides that carry the most, to make room for the header air */
.wl6h-h { font-size: max(22px, 3.5cqw); }
.wl6h-body .wl6h-bar { margin: 1.2cqw 0 1.8cqw; }
.wl6h-table td { padding: .7cqw .8cqw; }
.wl6h-lede { margin-bottom: 2cqw; }
.wl6h-stats { margin-bottom: 2cqw; }
.wl6h-stats div { padding: 1.5cqw 2cqw; }
.wl6h-col p { margin-top: 1cqw; }
.wl6h-ftag { border-radius: 0; }

/* ===== v7f: the next slide comes out from behind the stack ===== */
@keyframes wl6h-rise { from { opacity: 0; transform: translateY(-20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wl6h-edge1 { from { transform: translateY(12px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes wl6h-edge2 { from { transform: translateY(24px); opacity: .2; } to { transform: none; opacity: 1; } }
.wl6h-stage.is-anim .wl6h-sl { transform-origin: 50% 0; animation: wl6h-rise .26s ease-out both; }
.wl6h-wrap.is-flip::before { animation: wl6h-edge1 .26s ease-out both; }
.wl6h-wrap.is-flip::after { animation: wl6h-edge2 .3s ease-out both; }
@media (prefers-reduced-motion: reduce) {
	.wl6h-stage.is-anim .wl6h-sl, .wl6h-wrap.is-flip::before, .wl6h-wrap.is-flip::after { animation: none; }
}

/* ===== v7g: a clean progress bar replaces the grey edges ===== */
.wl6h-wrap::before, .wl6h-wrap::after { display: none; }
.wl6h-wrap { margin-top: 0; }
.wl6h-pager { display: flex; justify-content: center; gap: 4px; max-width: 880px; margin: 24px auto 0; }
.wl6h-pager button { position: relative; width: 72px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.wl6h-pager button::before, .wl6h-pager button::after { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.wl6h-pager button::before { right: 0; background: var(--ctl-line); transition: background-color .15s ease-out; }
.wl6h-pager button::after { width: 0; background: var(--ink); }
.wl6h-pager button:hover::before { background: var(--text-2); }
.wl6h-pager button[aria-pressed="true"]::after { width: 100%; animation: wl6h-fill .26s ease-out; }
@keyframes wl6h-fill { from { width: 0; } to { width: 100%; } }
.wl6h-lab:not(.js) .wl6h-pager { display: none; }
@media (prefers-reduced-motion: reduce) { .wl6h-pager button[aria-pressed="true"]::after { animation: none; } }
@media (max-width: 640px) { .wl6h-pager button { width: 25%; max-width: 72px; } }
.wl6h-pager button::before { background: color-mix(in srgb, var(--text-2) 38%, var(--bg)); }   /* a light track, so the dark active segment stands out */
.wl6h-pager button:hover::before { background: color-mix(in srgb, var(--text-2) 62%, var(--bg)); }

/* ===== v7h: the price, fit and questions section, redesigned as cards ===== */
.wl6 .wl6-ask > .ss-in { padding-top: 64px; padding-bottom: 64px; }
.wl6 .wl6-ask-h { margin: 0 0 32px; }
.wl6-pc { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border: 0; }
.wl6-pc li { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--ctl-line); border-radius: var(--r-md); background: var(--card); }
.wl6-pc .wl6-pc-k { display: block; margin: 0 0 24px; font: 600 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--text-2); }
.wl6-pc strong { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.wl6-pc span { display: block; margin-top: 12px; color: var(--text-2); line-height: 1.5; font-size: 1rem; max-width: 24em; }
.wl6-pc .wl6-more-a { margin-top: auto; padding-top: 12px; }
.wl6-pc .wl6-pc-main { background: var(--ink); border-color: var(--ink); }
.wl6-pc .wl6-pc-main .wl6-pc-k, .wl6-pc .wl6-pc-main strong { color: var(--bg); }
.wl6-pc .wl6-pc-main span { color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.wl6-pc .wl6-pc-main .wl6-more-a { color: var(--bg); text-decoration: underline; text-underline-offset: 4px; }
.wl6-pc .wl6-pc-main .wl6-more-a:hover { color: var(--bg); opacity: .8; }
@media (max-width: 1000px) { .wl6-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; } }
@media (max-width: 560px) { .wl6-pc { grid-template-columns: minmax(0, 1fr); } .wl6-pc .wl6-pc-k { margin-bottom: 16px; } }

.wl6-ask-grid { align-items: stretch; gap: 32px 48px; }
.wl6 .wl6-fitcol, .wl6 .wl6-faqcol { display: flex; flex-direction: column; }
.wl6 .wl6-fitcol h2, .wl6 .wl6-faqcol h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.wl6-card { flex: 1; border: 1px solid var(--ctl-line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.wl6-fitcol .wl6-card { padding: 8px 32px 24px; }
.wl6 .wl6-yes, .wl6 .wl6-no { padding: 24px 0 0; border-top: 0; }
.wl6 .wl6-no { margin-top: 24px; border-top: 1px solid var(--line); }
.wl6 .wl6-yes h3, .wl6 .wl6-no h3 { margin: 0 0 12px; font: 600 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.wl6 .wl6-yes .ss-fr-l, .wl6 .wl6-nolist { margin: 0; padding: 0; list-style: none; }
.wl6 .wl6-yes .ss-fr-l li, .wl6 .wl6-nolist li { position: relative; padding: 8px 0 8px 40px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.wl6 .wl6-yes .ss-fr-l li::before, .wl6 .wl6-nolist li::before { content: "\2713"; position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); font: 600 .8125rem var(--ui); transform: none; }
.wl6 .wl6-nolist li::before { content: "\00d7"; background: color-mix(in srgb, var(--text-2) 14%, var(--card)); color: var(--text-2); font-size: 1.125rem; }
.wl6 .wl6-no .wl6-more { margin: 8px 0 0 40px; }

.wl6 .wl6-faqcol .ss-faq.wl6-card { display: block; max-width: none; margin: 0; padding: 0; gap: 0; }
.wl6 .wl6-faqcol .ss-faq details, .wl6 .wl6-faqcol .ss-faq details:first-child { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.wl6 .wl6-faqcol .ss-faq details:last-child { border-bottom: 0; }
.wl6 .wl6-faqcol .ss-faq summary { min-height: 64px; align-items: center; padding: 16px 24px; }
.wl6 .wl6-faqcol .ss-faq summary::after { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--soft); font-size: 1.125rem; line-height: 1; transition: background-color .15s ease-out; }
.wl6 .wl6-faqcol .ss-faq summary:hover { background: var(--hover); }
.wl6 .wl6-faqcol .ss-faq details[open] { background: var(--soft); }
.wl6 .wl6-faqcol .ss-faq details[open] summary::after { background: var(--card); }
.wl6 .wl6-faqcol .ss-faq details p { margin: 0; padding: 0 24px 24px; max-width: 50ch; }

/* ===== v8: the closing card ===== */
.wl6 .wl6-close > .ss-in { padding-top: 64px; padding-bottom: 64px; }
.wl6 .wl6-close .ss-in, .wl6 .wl6-close h2, .wl6 .wl6-close .wl6-vcap { text-align: left; }
.wl6-cta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); }
.wl6-cta-k { margin: 0 0 16px; font: 600 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 72%, var(--ink)); }
.wl6 .wl6-cta h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 400; color: var(--bg); text-align: left; }
.wl6-cta-sub { margin: 0 0 32px; max-width: 28em; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.wl6-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 16px; }
.wl6 .wl6-cta-btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.wl6 .wl6-cta-btn:hover { background: var(--bg); color: var(--ink); opacity: .9; }
.wl6 .wl6-cta-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.wl6 .wl6-cta-link:hover { opacity: .8; }
.wl6-cta-note { margin: 0; color: color-mix(in srgb, var(--bg) 72%, var(--ink)); font-size: 1rem; }
.wl6 .wl6-cta a:focus-visible, .wl6 .wl6-cta button:focus-visible, .wl6 .wl6-cta summary:focus-visible { outline-color: var(--bg); }

.wl6-cta-vid { min-width: 0; }
.wl6-player { position: relative; overflow: hidden; border-radius: var(--r-md); background: #0B0C0E; aspect-ratio: 16 / 9; }
.wl6-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wl6-play { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: flex-start; gap: 0; padding: 0; border: 0; background: linear-gradient(to top, rgba(11, 12, 14, .55), rgba(11, 12, 14, 0) 45%); color: #FFFFFF; cursor: pointer; }
.wl6-player.js .wl6-play { display: block; }
.wl6-player.is-playing .wl6-play { display: none; }
.wl6-play-ic { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: #FFFFFF; color: #0B0C0E; transition: transform .2s ease-out; }
.wl6-play-ic svg { margin-left: 3px; }
.wl6-play:hover .wl6-play-ic { transform: scale(1.08); }
.wl6-play:active .wl6-play-ic { transform: scale(.96); }
.wl6-play-t { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(11, 12, 14, .72); font-size: 1rem; font-weight: 600; }
.wl6-play:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.wl6-cta .ss-video-tx { max-width: none; margin: 8px 0 0; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.wl6-cta .ss-video-tx summary { color: var(--bg); min-height: 44px; display: inline-flex; align-items: center; }
.wl6-cta .ss-video-tx p { max-width: 50ch; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); font-size: 1rem; }

.wl6-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.wl6-keep p { margin: 0; font: 600 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.wl6-keep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wl6-keep a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ctl-line); border-radius: var(--r-sm); color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color .15s ease-out, border-color .15s ease-out; }
.wl6-keep a:hover { background: var(--hover); border-color: var(--ink); }
.wl6-keep a:active { background: var(--soft); }

@media (max-width: 960px) {
	.wl6-cta { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
}
@media (max-width: 480px) {
	.wl6-cta { padding: 24px; }
	.wl6-cta-sub { margin-bottom: 24px; }
	.wl6-play-t { left: 12px; bottom: 12px; padding: 4px 8px; font-size: .875rem; }
	.wl6 .wl6-rel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wl6-play-ic { transition: none; } }

/* ===== v8: name the two sides and say "example" on the picture ===== */
.wl6h-notch { position: absolute; z-index: 6; top: -16px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border: 1px solid var(--ctl-line); border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: .875rem; line-height: 1.5; white-space: nowrap; }
.wl6h-sidelabel { position: absolute; z-index: 6; top: -44px; display: inline-flex; align-items: center; gap: 8px; font: 600 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.wl6h-sidelabel::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rep-accent, #00A6FE); }
.wl6h-sl-l { left: 0; }
.wl6h-sl-r { right: 0; }
.wl6h-sl-r::before { background: var(--ink); }
.wl6h-wrap { margin-top: 0; }
.wl6h-pager { margin-top: 8px; margin-bottom: 40px; }
@media (max-width: 640px) {
	.wl6h-notch { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); border-radius: var(--r-md); }
	.wl6h-sidelabel { top: -36px; font-size: .6875rem; }
	.wl6h-pager { margin-bottom: 36px; }
}
/* the site's button and link colours are set with !important, so these must be too */
.wl6 .wl6-cta a.wl6-cta-btn, .wl6 .wl6-cta a.wl6-cta-btn:hover { background: var(--bg) !important; color: var(--ink) !important; border-color: var(--bg) !important; }
.wl6 .wl6-cta a.wl6-cta-link { color: var(--bg) !important; }
.wl6 .wl6-keep a { color: var(--ink) !important; }

/* ===== v8b: craft-critic fixes ===== */
/* hero rhythm: every gap at least 24px, a wider picture, and the grid fades before the picture */
.wl6 .wl6h-hero h1 { margin-bottom: 24px; }
.wl6 .wl6h-hero .ss-note { margin-top: 24px; }
.wl6h-lab { margin-top: 0; }
.wl6h-wrap, .wl6h-dock, .wl6h-cap { max-width: 920px; }
.wl6h-wrap { margin-top: 72px; }
.wl6 .wl6h-hero .ss-in::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 18%, transparent 46%); mask-image: linear-gradient(to bottom, #000 0, #000 18%, transparent 46%); }
/* the switcher sits in a notch cut into the picture's top edge */
.wl6h-notch { top: -24px; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 16px; border: 1px solid var(--ctl-line); border-radius: 999px; background: var(--bg); white-space: nowrap; }
.wl6h-notch-t { font-size: .875rem; color: var(--text-2); }
.wl6h-notch .wl6h-pager { display: flex; gap: 0; max-width: none; margin: 0; padding-left: 8px; border-left: 1px solid var(--line); }
.wl6h-notch .wl6h-pager button { width: 40px; height: 44px; }
.wl6h-notch .wl6h-pager button::before, .wl6h-notch .wl6h-pager button::after { left: 6px; }
.wl6h-notch .wl6h-pager button::before { right: 6px; }
.wl6h-notch .wl6h-pager button[aria-pressed="true"]::after { width: calc(100% - 12px); }
.wl6h-sidelabel { top: -40px; }
@media (max-width: 480px) { .wl6h-notch-t { display: none; } .wl6h-notch { padding-left: 8px; } .wl6h-notch .wl6h-pager { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .wl6h-wrap { margin-top: 64px; } .wl6h-notch { width: auto; max-width: none; white-space: nowrap; border-radius: 999px; } }
.wl6h-lab:not(.js) .wl6h-notch .wl6h-pager { display: none; }

/* the story panel: the picture and its frame are one surface, no dead grey above and below */
.wl6 { --H: max(420px, min(520px, calc(100svh - 120px))); }
.wl6 .wl6-screen { background-color: var(--card); }

/* price section: more air under the heading */
.wl6 .wl6-ask-h { margin-bottom: 40px; }
.wl6h-wrap .wl6h-stage { max-width: none; }

/* ===== v8c: system-critic fixes (round 4) ===== */
/* pager: a track you can see (3:1), 8px between targets, an active state */
.wl6h-pager button::before { background: var(--ctl-line); }
.wl6h-pager button:hover::before { background: var(--text-2); }
.wl6h-pager button:active::before { background: var(--ink); }
.wl6h-notch .wl6h-pager { gap: 8px; }
.wl6h-notch .wl6h-pager button { width: 36px; }
.wl6h-notch .wl6h-pager button::before, .wl6h-notch .wl6h-pager button::after { left: 4px; }
.wl6h-notch .wl6h-pager button::before { right: 4px; }
.wl6h-notch .wl6h-pager button[aria-pressed="true"]::after { width: calc(100% - 8px); }
/* step 3 tile text is body text: 16px (this beats the .875rem rule in wl6.css) */
.wl6 .wl6-tile > span:not(.wl6-ext) { font-size: 1rem; }
/* FAQ: the focus ring sits inside the row so the card edge cannot clip it */
.wl6 .wl6-faqcol .ss-faq summary:focus-visible { outline-offset: -4px; }
/* shapes and spacing on the scale */
.wl6 .wl6-yes .ss-fr-l li::before, .wl6 .wl6-nolist li::before { border-radius: var(--r-sm); }
.wl6 .wl6-yes .ss-fr-l li, .wl6 .wl6-nolist li { padding-left: 48px; }
.wl6 .wl6-no .wl6-more { margin-left: 48px; }
.wl6-story.is-stage .wl6-step { padding-top: 48px; }
.wl6h-grip { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
/* the story track: visible in both modes */
.wl6-story.is-stage .wl6-step { border-left-color: var(--ctl-line); }
.wl6-story.is-stage .wl6-step.is-active { border-left-color: var(--ink); }
.wl6-rail i:not(.is-now):not(.is-done) { background: var(--ctl-line); }
/* tablet widths: the arrows get their own gutters outside the stage, so they never sit on the slide */
@media (max-width: 1100px) {
	.wl6h-wrap { padding: 0 56px; }
	.wl6h-prev { left: 0; }
	.wl6h-next { right: 0; }
	.wl6h-nav { filter: none; }
}
@media (max-width: 640px) {
	.wl6h-wrap { padding: 0 0 64px; }
	.wl6h-count { left: 64px; right: 64px; }
}

/* ===== v8d: a light closing card and a light video, no black ===== */
.wl6-cta { background: var(--soft); color: var(--ink); border: 1px solid var(--ctl-line); }
.wl6-cta-k, .wl6-cta-note, .wl6-cta-sub { color: var(--text-2); }
.wl6 .wl6-cta h2 { color: var(--ink); }
.wl6 .wl6-cta a.wl6-cta-btn, .wl6 .wl6-cta a.wl6-cta-btn:hover { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.wl6 .wl6-cta a.wl6-cta-link { color: var(--ink) !important; }
.wl6 .wl6-cta a:focus-visible, .wl6 .wl6-cta button:focus-visible, .wl6 .wl6-cta summary:focus-visible { outline-color: var(--accent-text); }
.wl6-player { background: var(--card); border: 1px solid var(--ctl-line); }
.wl6-play { background: none; color: var(--ink); }
.wl6-play-ic { background: var(--ink); color: var(--bg); }
.wl6-play-t { background: var(--bg); color: var(--ink); border: 1px solid var(--ctl-line); }
.wl6-play:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -4px; }
.wl6-cta .ss-video-tx, .wl6-cta .ss-video-tx p { color: var(--text-2); }
.wl6-cta .ss-video-tx summary { color: var(--ink); }
/* the play button sits bottom-left beside its label, so it never covers the poster's title or picture */
.wl6-play-ic { left: 16px; top: auto; bottom: 16px; width: 48px; height: 48px; margin: 0; }
.wl6-play-ic svg { width: 22px; height: 22px; }
.wl6-play-t { left: 72px; bottom: 16px; height: 48px; display: flex; align-items: center; padding: 0 16px; }
@media (max-width: 480px) { .wl6-play-ic { left: 12px; bottom: 12px; } .wl6-play-t { left: 68px; bottom: 12px; padding: 0 12px; font-size: .875rem; } }

/* v8e: the fit card and the FAQ card start at the same height and fill the same space */
@media (min-width: 960px) {
	.wl6 .wl6-fitcol h2, .wl6 .wl6-faqcol h2 { display: flex; align-items: flex-end; min-height: 2.4em; }
}
.wl6 .wl6-faqcol .ss-faq.wl6-card { display: flex; flex-direction: column; }
.wl6 .wl6-faqcol .ss-faq details { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.wl6 .wl6-faqcol .ss-faq details[open] { justify-content: flex-start; }
.wl6 .wl6-faqcol .ss-faq details[open] summary { flex: none; }

/* v8f: when the questions card grows (an answer is open), the fit card spreads its rows instead of leaving a hole at the bottom */
.wl6 .wl6-fitcol .wl6-card { display: flex; flex-direction: column; }
.wl6 .wl6-fitcol .wl6-yes, .wl6 .wl6-fitcol .wl6-no { flex: 1 1 auto; display: flex; flex-direction: column; }
.wl6 .wl6-fitcol .wl6-yes .ss-fr-l, .wl6 .wl6-fitcol .wl6-nolist { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; }

/* v8g: phones. The switcher sits fully above the picture (never on its logo row), the two side labels get their own line, and the font tags step aside. */
@media (max-width: 640px) {
	.wl6h-wrap { margin-top: 112px; }
	.wl6h-sidelabel { top: -92px; font-size: .6875rem; letter-spacing: .04em; gap: 6px; }
	.wl6h-sidelabel::before { width: 8px; height: 8px; }
	.wl6h-notch { top: -60px; height: 44px; padding: 0 4px; }
	.wl6h-notch { padding: 0 8px 0 12px; }
	.wl6h-notch .wl6h-pager { padding-left: 4px; border-left: 1px solid var(--line); }
	.wl6h-notch-t { display: block; font-size: .8125rem; }
	.wl6h-ftag { display: none; }
}
/* v8h: the switcher pill has no outline and no inner line; it just cuts into the picture's edge */
.wl6h-notch, .wl6h-notch .wl6h-pager { border: 0; }

/* v8i: a calmer phone page. Screens too small to read are left to the text, the price cards sit two across, one switcher in the hero, and the footer carries the links. */
@media (max-width: 640px) {
	.wl6h-notch .wl6h-pager { display: none; }
	.wl6h-notch { padding: 0 16px; }
	.wl6 #step-1 .wl6-scene, .wl6 #step-2 .wl6-scene, .wl6 #step-5 .wl6-crop { display: none; }
	.wl6-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
	.wl6-pc li { padding: 16px; }
	.wl6-pc .wl6-pc-main, .wl6-pc li:last-child { grid-column: 1 / -1; }
	.wl6-pc .wl6-pc-k { margin-bottom: 12px; }
	.wl6-pc strong { font-size: 2rem; }
	.wl6-keep { display: none; }
}

/* White label SEO software page (wls): same look as the white-label reports page, shorter */
.wls .ss-section > .ss-in { padding-top: 64px; padding-bottom: 64px; }
.wls-hero .ss-in { padding-top: 72px; padding-bottom: 0; }
.wls-hero h1 { max-width: 15em; }
.wls-hero .ss-lead { text-wrap: balance; }
.wls-hero .ss-note { margin: 16px 0 0; }
.wls-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; list-style: none; margin: 28px 0 44px; padding: 0; font-size: 14px; color: var(--text-2); }
.wls-facts li { display: block; text-align: center; }
.wls-facts li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.wls-facts strong { color: var(--ink); font-weight: 600; }
.wls-peek { position: relative; max-width: 1000px; margin: 0 auto; }
.wls-peek .ss-win { max-height: 520px; text-align: left; }
.wls-peek::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 150px; border-radius: 0 0 13px 13px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.wls-kinds { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wls-kind { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.wls-kind h3 { margin: 14px 0 8px; }
.wls-kind p { margin: 0; color: var(--text-2); font-size: 15px; }
.wls-kind .wls-t { margin-top: auto; padding-top: 14px; font-size: 14px; }
.wls-kind p:not(.wls-t) { margin-bottom: 14px; }
.wls-kind .wls-t { border-top: 1px dashed var(--line); }
.wls-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--text-2); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.wls-us { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: 0 0 0 1px var(--accent); }
.wls-us .wls-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.wls-us p strong { color: var(--accent-text); }
.wls-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: wlsq; }
.wls-q li { counter-increment: wlsq; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text-2); font-size: 15px; }
.wls-q li::before { content: counter(wlsq, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--accent-text); }
.wls-q strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.wls-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 18px; }
.wls-you { margin: 0; padding: 12px 16px; max-width: 30em; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px 16px 16px 16px; background: var(--soft); color: var(--ink); font-size: 15px; }
.wls-you:nth-child(2) { margin-left: 24px; }
.wls-you:nth-child(3) { margin-left: 48px; }
.wls-steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: wlss; }
.wls-steps li { counter-increment: wlss; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.wls-steps li::before { content: counter(wlss); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
.wls-steps strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.wls-steps span { color: var(--text-2); font-size: 15px; }
.wls-plans { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 24px; }
.wls-plan { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.wls-plan span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.wls-plan strong { display: block; margin: 4px 0 2px; font-size: 2.4rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); }
.wls-plan em { font-style: normal; font-size: 14px; color: var(--text-2); }
.wls-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.wls-links span { flex: 0 0 100%; font-size: 14px; color: var(--text-2); }
.wls-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.wls-links a:hover { color: var(--ink); background: var(--hover); }
.wls-links a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 1000px) {
	.wls-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wls-q { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.wls .ss-section > .ss-in { padding-top: 48px; padding-bottom: 48px; }
	.wls-hero .ss-in { padding-top: 48px; }
	.wls-facts { display: block; max-width: 20em; margin: 24px auto 32px; }
	.wls-facts li { position: relative; padding: 5px 0 5px 20px; text-align: left; }
	.wls-facts li::before { position: absolute; left: 0; top: 14px; margin: 0; }
	.wls-peek .ss-win { max-height: 300px; }
	.wls-peek::after { height: 90px; }
	.wls-kinds, .wls-q, .wls-steps, .wls-plans { grid-template-columns: 1fr; }
	.wls-you:nth-child(2), .wls-you:nth-child(3) { margin-left: 0; }
}
.wls-hand { font-family: "Caveat", "Bradley Hand", cursive; font-weight: 600; font-size: 26px; line-height: 1.05; color: #cc3314; transform: rotate(-3deg); }
.wls-hero .wls-hand { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 6px; }
.wls-arrow { flex: none; width: 64px; height: 46px; margin: 2px 0 0 28px; fill: none; stroke: #ff5b3a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(3deg); }
.wls-tag { position: absolute; top: -18px; right: 14px; padding: 2px 10px; background: var(--bg); transform: rotate(4deg); }
.wls-credit { margin: 4px 0 18px; display: inline-block; }
.wls-hero { background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.wls-hero .ss-scrib::after { height: .3em; }
@media (max-width: 720px) { .wls-hand { font-size: 24px; } .wls-tag { top: -16px; } }

/* ---- AppSumo redemption page (/appsumo/). Uses the site tokens, so light and dark both follow. ---- */
.as-card{border-top:3px solid var(--accent)}   /* the thin accent stripe on panels */
.as-panel{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow)}
.st .as-panel .as-h{margin:0 0 12px;font-size:1.05rem;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--ink)}
.as-table{width:100%;border-collapse:collapse;font-size:.98rem}
.as-table th,.as-table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line);color:var(--text)}
.as-table thead th{font-size:.8rem;font-weight:600;color:var(--text-2);text-transform:none}
.as-table tbody tr:last-child th,.as-table tbody tr:last-child td{border-bottom:0}
.as-num{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:600}
.as-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.as-set{margin:0 0 4px;padding:0;min-width:0}
.as-sethead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.as-sethead .st-label{margin:0}
.as-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.02em;text-transform:uppercase}
.as-code::placeholder{text-transform:none}
.as-coderow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.as-remove,.as-copy{min-height:48px;margin:0 0 18px;border-radius:var(--r-md);white-space:nowrap}
.as-add{min-height:44px;margin:-10px -6px -10px 0;padding:0 6px;border-radius:var(--r-md);white-space:nowrap}   /* sits above the code boxes, so adding a box never moves it */
/* A text-style button on the label row: no box or shadow to crowd the code box below. The negative margins keep the 44px tap area
   while the row stays as tall as the label (the tap area ends 2px above the code box). Hover only underlines, so nothing moves. */
.as-sethead .as-add,.as-sethead .as-add:hover{background:transparent;border-color:transparent;box-shadow:none;color:var(--accent-text) !important;font-size:.9rem}
.as-sethead .as-add:hover{text-decoration:underline}
.as-add[disabled]{opacity:.55;cursor:default}
.as-sethead .as-add[disabled]:hover{text-decoration:none}
html[data-theme="dark"] .as-sethead .as-add,html[data-theme="dark"] .as-sethead .as-add:hover{background:transparent;border-color:transparent;box-shadow:none;color:var(--accent-text) !important}   /* beats the dark .ss-btn-quiet colour and hover border */
.as-hint{margin:-10px 0 14px}
.as-more{margin:0 0 18px}
.as-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--accent-text)}
.as-more summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--r-md)}
.as-keyin,.as-keyout{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.as-result{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--r-md);background:var(--soft)}
.as-result[hidden]{display:none}
.as-result-text{margin:0 0 12px;color:var(--text)}
.as-keyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.as-friend{margin:18px 0 0;font-size:.95rem;color:var(--text-2)}
.as-friend a{color:var(--accent-text);font-weight:600;text-decoration:underline;display:inline-block;padding:10px 2px;margin:-10px 0}
@media (max-width:640px){.as-coderow,.as-keyrow{grid-template-columns:minmax(0,1fr)}.as-remove,.as-copy{width:100%;margin-top:-8px}}
@media (max-width:860px){.as-grid{grid-template-areas:"head" "card" "choose" "info"}.as-ladder{margin-top:26px}}

/* Gentle scroll animation (js/motion.js adds .ss-rv only to blocks below the first screen). Buttons and links keep their own behaviour. */
.ss-rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.ss-rv.ss-rv-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .ss-rv { opacity: 1; transform: none; } }

/* Blog post "Run your own SEO audit" box: air between the text and the button, and the button fills the box on phones. */
.ss-post-cta h2 { margin-bottom: 10px; }
.ss-post-cta .ss-actions { margin-top: 22px; }
@media (max-width: 720px) { .ss-post-cta .ss-actions { max-width: none; } }

/* Footer: keep clear of the fixed dark-mode button */
.ss-ftr-legal a,.ss-cc-open{-webkit-tap-highlight-color:transparent}
.ss-cc-open{-webkit-user-select:none;user-select:none}
.ss-cc-open::after{background:transparent}
@media (min-width:901px){.ss-in.ss-ftr-base{padding-right:76px}}
@media (max-width:900px){.ss-in.ss-ftr-base{padding-bottom:76px}}

/* Blog pager: the dots between page numbers */
.navigation.pagination .dots{border:0;min-width:20px;padding:6px 2px;justify-content:center;color:var(--text-2);background:none}