/* ==========================================================================
   SCI Signal — editorial theme for seocompanyinindia.net
   Newsprint paper, ink, one signal colour. Newsreader for reading,
   Schibsted Grotesk for the interface.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--paper: #f3efe6;
	--paper-2: #ebe5d8;
	--paper-3: #e1d9c8;
	--card: #fbf9f4;
	--ink: #15140f;
	--ink-2: #45423a;
	--ink-3: #736e62;
	--rule: #d6cdb9;
	--rule-2: #c3b8a0;
	--signal: #e0401a;
	--signal-2: #b8320f;
	--on-signal: #fffaf2;
	--go: #0d7a4d;
	--stop: #b3261e;
	--mark: #ffe46b;
	--mark-soft: #fff3b8;
	--inv-bg: #15140f;
	--inv-ink: #f3efe6;
	--inv-ink-2: #b5ae9e;
	--inv-rule: #34322b;
	--shadow: 0 1px 0 rgba(21, 20, 15, .06), 0 10px 30px -12px rgba(21, 20, 15, .22);

	--f-read: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--f-ui: "Schibsted Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
	--f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--wrap: 1240px;
	--gut: 16px;
	--measure: 68ch;
	--r: 4px;
	--r-lg: 10px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--head-h: 64px;
	color-scheme: light;
}

@media (min-width: 700px) {
	:root { --gut: 28px; }
}

:root[data-theme="dark"] {
	--paper: #121210;
	--paper-2: #1a1916;
	--paper-3: #23221e;
	--card: #181815;
	--ink: #eee9de;
	--ink-2: #c4bdad;
	--ink-3: #918a7b;
	--rule: #2e2c27;
	--rule-2: #3d3a33;
	--signal: #ff6a3d;
	--signal-2: #ff8a63;
	--on-signal: #160c07;
	--go: #3ccf8e;
	--stop: #ff7a70;
	--mark: rgba(255, 214, 64, .30);
	--mark-soft: rgba(255, 214, 64, .10);
	--inv-bg: #1f1e1a;
	--inv-ink: #eee9de;
	--inv-ink-2: #a39c8c;
	--inv-rule: #34322b;
	--shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #121210;
		--paper-2: #1a1916;
		--paper-3: #23221e;
		--card: #181815;
		--ink: #eee9de;
		--ink-2: #c4bdad;
		--ink-3: #918a7b;
		--rule: #2e2c27;
		--rule-2: #3d3a33;
		--signal: #ff6a3d;
		--signal-2: #ff8a63;
		--on-signal: #160c07;
		--go: #3ccf8e;
		--stop: #ff7a70;
		--mark: rgba(255, 214, 64, .30);
		--mark-soft: rgba(255, 214, 64, .10);
		--inv-bg: #1f1e1a;
		--inv-ink: #eee9de;
		--inv-ink-2: #a39c8c;
		--inv-rule: #34322b;
		--shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .7);
		color-scheme: dark;
	}
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.55 var(--f-ui);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
/* Paper grain — a 2 KB SVG noise, no request. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { opacity: .12; }
body > * { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mark); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
kbd { font: 600 .78em var(--f-mono); padding: .1em .4em; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 4px; background: var(--card); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r);
	font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- 3. Small UI atoms ---------- */
.eyebrow, .kicker, .rule-h, .toc__h, .rail__h {
	font: 700 .72rem/1.2 var(--f-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.eyebrow { color: var(--ink-3); margin: 0 0 .6rem; }
.kicker { display: inline-block; color: var(--signal); text-decoration: none; margin-bottom: .55rem; }
a.kicker:hover { text-decoration: underline; }
.rule-h { margin: 0 0 1.1rem; padding-top: .7rem; border-top: 3px solid var(--ink); color: var(--ink); }

.btn {
	--b: var(--ink); --c: var(--paper);
	display: inline-flex; align-items: center; gap: .5em;
	padding: .72em 1.15em; border-radius: 999px; border: 1.5px solid var(--b);
	background: var(--b); color: var(--c);
	font: 650 .92rem/1 var(--f-ui); text-decoration: none; white-space: nowrap;
	transition: transform .15s var(--ease), background .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--b); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--signal { --b: var(--signal); --c: var(--on-signal); }
.btn--ink { --b: var(--ink); --c: var(--paper); }
.btn--sm { font-size: .82rem; padding: .6em .95em; }

.icon-btn {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px; border-radius: 999px;
	border: 1px solid transparent; background: transparent; color: var(--ink);
	transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--rule); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
	display: inline-flex; gap: .45em; align-items: center;
	padding: .5em .9em; border: 1px solid var(--rule-2); border-radius: 999px;
	font: 550 .88rem/1 var(--f-ui); text-decoration: none; background: var(--card);
	transition: border-color .15s, background .15s, color .15s;
}
.chips a span { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: .8em; }
.chips a:hover { border-color: var(--ink); }
.chips a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips a[aria-current="page"] span { color: var(--inv-ink-2); }

/* ---------- 4. Ticker ---------- */
.ticker {
	display: flex; align-items: center; gap: 14px;
	height: 34px; padding-inline: var(--gut);
	background: var(--ink); color: var(--paper);
	font: 500 .8rem/1 var(--f-ui); overflow: hidden;
}
:root[data-theme="dark"] .ticker { background: #000; color: var(--ink); }
.ticker__label {
	flex: none; background: var(--signal); color: var(--on-signal);
	padding: 5px 8px; border-radius: 3px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem;
}
.ticker__track { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ticker__list { display: flex; gap: 42px; margin: 0; padding: 0; list-style: none; width: max-content; animation: tick 70s linear infinite; }
.ticker__list li { white-space: nowrap; position: relative; }
.ticker__list li::after { content: "◆"; position: absolute; right: -27px; font-size: .55em; top: .35em; opacity: .5; }
.ticker__list a { text-decoration: none; opacity: .88; }
.ticker__list a:hover { opacity: 1; text-decoration: underline; }
.ticker:hover .ticker__list, .ticker:focus-within .ticker__list { animation-play-state: paused; }
.ticker__date { flex: none; opacity: .6; font-variant: small-caps; letter-spacing: .04em; display: none; }
@media (min-width: 900px) { .ticker__date { display: block; } }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 5. Masthead ---------- */
.masthead {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; gap: 20px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__img { max-height: 40px; width: auto; }
.brand__mark {
	width: 26px; height: 26px; border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--paper) 0 26%, transparent 27%), var(--signal);
	box-shadow: inset 0 0 0 4px var(--signal), inset 0 0 0 6px var(--paper);
}
.brand__word { display: flex; flex-direction: column; line-height: .95; }
.brand__word b { font: 800 1.12rem/1 var(--f-ui); letter-spacing: -.02em; }
.brand__word i { font: italic 500 1.02rem/1 var(--f-read); color: var(--ink-2); margin-top: 1px; }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
	display: block; padding: 8px 12px; border-radius: 999px;
	font: 550 .92rem/1 var(--f-ui); text-decoration: none; color: var(--ink-2); white-space: nowrap;
	transition: color .15s, background .15s;
}
.nav-list a:hover, .nav-list .current-menu-item > a, .nav-list .current-menu-ancestor > a { color: var(--ink); background: var(--paper-2); }
.masthead__tools { display: flex; align-items: center; gap: 4px; }
.nav__cta-m { display: none; }

.js-theme .i-moon { display: none; }
:root[data-theme="dark"] .js-theme .i-sun { display: none; }
:root[data-theme="dark"] .js-theme .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .js-theme .i-sun { display: none; }
	:root:not([data-theme="light"]) .js-theme .i-moon { display: block; }
}
.nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }

@media (max-width: 1179px) {
	.nav-toggle { display: inline-grid; }
	.nav__cta { display: none; }
	.masthead__tools { margin-left: auto; }
	.nav {
		position: fixed; inset: var(--head-h) 0 auto 0; margin: 0;
		background: var(--paper); border-bottom: 1px solid var(--rule);
		padding: 10px var(--gut) 22px;
		box-shadow: var(--shadow);
		transform: translateY(-8px); opacity: 0; visibility: hidden;
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
		max-height: calc(100dvh - var(--head-h)); overflow: auto;
	}
	.nav-open .nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
	.nav-open .nav-toggle .i-open { display: none; }
	.nav-open .nav-toggle .i-close { display: block; }
	.nav-list { flex-direction: column; gap: 0; }
	.nav-list a { white-space: normal; padding: 15px 4px; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.1rem; color: var(--ink); }
	.nav-list a:hover { background: none; }
	.nav__cta-m { display: inline-flex; margin-top: 18px; width: 100%; justify-content: center; }
}

/* ---------- 6. Search dialog ---------- */
.search-dlg {
	width: min(680px, calc(100% - 2 * var(--gut)));
	margin: 12vh auto auto; padding: 0;
	border: 1px solid var(--rule-2); border-radius: var(--r-lg);
	background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.search-dlg::backdrop { background: rgba(21, 20, 15, .45); backdrop-filter: blur(3px); }
.search-dlg[open] { animation: pop .22s var(--ease); }
.search-dlg__form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--rule); }
.search-dlg__form > .ico { color: var(--ink-3); flex: none; }
.search-dlg input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 1.25rem/1.4 var(--f-read); padding: 12px 0; outline: none; }
.search-dlg__hint { margin: 0; padding: 10px 18px; font-size: .78rem; color: var(--ink-3); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* ---------- 7. Post cards ---------- */
.pc { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc__media {
	display: block; overflow: hidden; border-radius: var(--r);
	aspect-ratio: 16 / 9; background: var(--paper-2);
}
.pc__media > * { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pc:hover .pc__media > * { transform: scale(1.03); }
.pc__body { display: flex; flex-direction: column; }
.pc__title { margin: 0 0 .4rem; font: 600 1.28rem/1.18 var(--f-read); letter-spacing: -.005em; text-wrap: balance; }
.pc__title a { text-decoration: none; background: linear-gradient(var(--mark), var(--mark)) 0 88% / 0 .32em no-repeat; transition: background-size .35s var(--ease); }
.pc__title a:hover { background-size: 100% .32em; }
.pc__dek { margin: 0 0 .7rem; color: var(--ink-2); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pc__by { color: var(--ink-2); font-weight: 600; }

.pc--lead .pc__media { aspect-ratio: 16 / 9; border-radius: var(--r); }
.pc--lead .pc__title { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); line-height: 1.02; font-weight: 600; letter-spacing: -.02em; margin-bottom: .8rem; max-width: 20ch; }
.pc--lead .pc__dek { font: 400 1.18rem/1.5 var(--f-read); color: var(--ink-2); -webkit-line-clamp: 4; max-width: 60ch; }

.pc--row { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) {
	.pc--row { grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
	.pc--row .pc__title { font-size: 1.55rem; }
}

/* Generated covers */
.cover-svg { width: 100%; height: 100%; }
.cover-svg .cv-label { font: 800 22px var(--f-ui); letter-spacing: .14em; fill: currentColor; }
.cover-svg .cv-dot { fill: var(--signal); }
.tone-a { color: #f3efe6; } .tone-a .cv-bg { fill: #1d1c18; }
.tone-b { color: #fff6ee; } .tone-b .cv-bg { fill: #d7421c; } .tone-b .cv-dot { fill: #15140f; }
.tone-c { color: #e9f3ea; } .tone-c .cv-bg { fill: #0f5a40; }
.tone-d { color: #2a2008; } .tone-d .cv-bg { fill: #dcae3f; } .tone-d .cv-dot { fill: #15140f; }
.tone-e { color: #e8eef6; } .tone-e .cv-bg { fill: #2c4766; }
.tone-f { color: #f7ece9; } .tone-f .cv-bg { fill: #6a3646; }

/* ---------- 8. Section heads & grids ---------- */
.sec-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
	padding-top: 14px; border-top: 3px solid var(--ink); margin-bottom: 28px;
}
.sec-head__h { margin: 0; font: 600 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.05 var(--f-read); letter-spacing: -.015em; }
.sec-head__sub { margin: 0; color: var(--ink-3); font-size: .92rem; flex: 1 1 260px; }
.sec-head__more { margin-left: auto; font: 650 .88rem var(--f-ui); text-decoration: none; color: var(--signal); white-space: nowrap; }
.sec-head__more:hover { text-decoration: underline; }
.sec-head--inv { border-color: var(--inv-ink); }
.sec-head--inv .sec-head__sub { color: var(--inv-ink-2); }

.grid-3, .grid-4 { display: grid; gap: 34px 26px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-4 .pc__title { font-size: 1.15rem; }

/* ---------- 9. Home ---------- */
.home-top { display: grid; gap: 34px; padding-top: 30px; padding-bottom: 56px; }
@media (min-width: 1000px) {
	.home-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding-top: 44px; }
	.home-top__latest { border-left: 1px solid var(--rule); padding-left: 36px; }
}
.numbered { list-style: none; margin: 0; padding: 0; }
.numbered li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.numbered li:first-child { padding-top: 4px; }
.numbered__n { font: italic 500 2.3rem/1 var(--f-read); color: var(--signal); font-variant-numeric: lining-nums; }
.numbered .kicker { font-size: .66rem; margin-bottom: .3rem; }
.numbered__t { display: block; font: 600 1.08rem/1.25 var(--f-read); text-decoration: none; }
.numbered__t:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.numbered__m { display: block; margin-top: 5px; font-size: .76rem; color: var(--ink-3); }

.h2h { background: var(--inv-bg); color: var(--inv-ink); padding: 56px 0 64px; margin-bottom: 64px; }
.h2h__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .h2h__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .h2h__grid { grid-template-columns: repeat(4, 1fr); } }
.vs-card {
	display: flex; flex-direction: column; gap: 12px;
	padding: 22px; border: 1px solid var(--inv-rule); border-radius: var(--r-lg);
	text-decoration: none; background: rgba(255, 255, 255, .02);
	transition: border-color .2s, transform .2s var(--ease), background .2s;
}
.vs-card:hover { border-color: var(--signal); transform: translateY(-3px); background: rgba(255, 255, 255, .04); }
.vs-card__logos { display: flex; align-items: center; gap: 10px; }
.vs-card__vs { font: italic 600 1.1rem var(--f-read); color: var(--signal); }
.vs-card__title { font: 600 1.3rem/1.15 var(--f-read); text-wrap: balance; }
.vs-card__verdict { font-size: .88rem; color: var(--inv-ink-2); line-height: 1.5; }
.vs-card__go { margin-top: auto; font: 700 .8rem var(--f-ui); color: var(--signal); letter-spacing: .02em; }
.h2h__grid--light { margin-bottom: 40px; }
.h2h__grid--light .vs-card { border-color: var(--rule); background: var(--card); }
.h2h__grid--light .vs-card__verdict { color: var(--ink-2); }
.h2h__grid--light .vs-card:hover { border-color: var(--ink); }

.topic, .board { margin-bottom: 64px; }
.topics-all { margin-bottom: 72px; }

/* Load-in */
.reveal { animation: rise .7s var(--ease) both; }
.reveal + .reveal { animation-name: fade; animation-delay: .12s; }
@keyframes rise { from { transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 10. Article ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: .8rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.article__head { padding-top: 34px; padding-bottom: 30px; }
.article__head > * { max-width: 860px; }
@media (min-width: 1240px) {
	/* Same column template as .article__grid so the headline aligns with the text column. */
	.article__head { display: grid; grid-template-columns: 220px minmax(0, var(--measure)) 220px; justify-content: space-between; column-gap: 40px; }
	.article__head > * { grid-column: 2 / 4; }
}
.article__title {
	margin: 0 0 18px;
	font: 600 clamp(2.1rem, 1.3rem + 3.4vw, 3.7rem)/1.03 var(--f-read);
	letter-spacing: -.022em; text-wrap: balance;
	animation: rise .6s var(--ease) both;
}
.article__dek { margin: 0 0 26px; font: italic 400 clamp(1.15rem, 1rem + .6vw, 1.42rem)/1.45 var(--f-read); color: var(--ink-2); max-width: 62ch; animation: rise .6s .08s var(--ease) both; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .88rem; }
.byline__who { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.byline__img { border-radius: 50%; width: 44px; height: 44px; filter: grayscale(.2); }
.byline__label { color: var(--ink-3); display: block; font-size: .74rem; }
.byline__facts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.byline__facts .ico { width: 15px; height: 15px; display: inline; vertical-align: -2px; }
.byline .meta-date { font-weight: 600; color: var(--ink); }
.byline .sep { color: var(--rule-2); }
.disclose { margin: 16px 0 0; padding: 10px 14px; font-size: .8rem; color: var(--ink-2); background: var(--paper-2); border-radius: var(--r); border-left: 3px solid var(--ink-3); max-width: 80ch; }
.disclose a { font-weight: 600; }

.article__hero { margin: 0 auto 40px; }
.article__img { width: 100%; border-radius: var(--r); aspect-ratio: 16 / 9; object-fit: cover; }
.article__hero figcaption { font-size: .8rem; color: var(--ink-3); margin-top: 8px; }

.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 72px; }
@media (min-width: 1000px) { .article__grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; } .article__grid.no-toc { grid-template-columns: minmax(0, 1fr) 220px; } }
@media (min-width: 1240px) {
	.article__grid { grid-template-columns: 220px minmax(0, var(--measure)) 220px; justify-content: space-between; gap: 40px; }
	.article__grid.no-toc { grid-template-columns: 220px minmax(0, var(--measure)) 220px; }
	.article__grid.no-toc .article__main { grid-column: 2; }
	.article__grid.no-toc .rail--side { grid-column: 3; }
}
.article__main { min-width: 0; max-width: var(--measure); }
.page .article__grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
.page .article__head { display: block; margin-inline: auto; max-width: calc(var(--measure) + 2 * var(--gut)); }

.rail { display: none; }
@media (min-width: 1240px) { .rail--toc { display: block; } }
@media (min-width: 1000px) { .rail--side { display: block; } }
.rail--toc .toc, .rail__sticky { position: sticky; top: calc(var(--head-h) + 28px); }
.toc__h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--ink-3); }
.toc__h .ico { width: 16px; height: 16px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; border-left: 1px solid var(--rule); max-height: calc(100vh - 200px); overflow: auto; }
.toc li { counter-increment: t; }
.toc a {
	display: grid; grid-template-columns: 26px 1fr; padding: 7px 0 7px 14px; margin-left: -1px;
	font-size: .84rem; line-height: 1.35; color: var(--ink-3); text-decoration: none;
	border-left: 2px solid transparent; transition: color .15s, border-color .15s;
}
.toc a::before { content: counter(t, decimal-leading-zero); font-variant-numeric: tabular-nums; font-size: .74rem; opacity: .7; padding-top: 1px; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--signal); font-weight: 600; }
.toc a.is-done { color: var(--ink-2); }

.toc-m { margin-bottom: 30px; border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--card); }
@media (min-width: 1240px) { .toc-m { display: none; } }
.toc-m summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font: 700 .9rem var(--f-ui); cursor: pointer; list-style: none; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary span { margin-left: auto; font-weight: 500; color: var(--ink-3); font-size: .8rem; }
.toc-m summary::after { content: "+"; font: 400 1.3rem/1 var(--f-ui); color: var(--ink-3); }
.toc-m[open] summary::after { content: "–"; }
.toc-m ol { margin: 0; padding: 4px 16px 16px 40px; font-size: .95rem; }
.toc-m li { padding: 5px 0; }
.toc-m a { text-decoration: none; }
.toc-m a:hover { text-decoration: underline; }

.rail__h { color: var(--ink-3); margin: 0 0 10px; }
.share { display: flex; gap: 6px; }
.share a, .share button {
	position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
	border: 1px solid var(--rule-2); border-radius: 999px; background: var(--card); color: var(--ink-2);
	transition: color .15s, border-color .15s, background .15s;
}
.share a:hover, .share button:hover { color: var(--ink); border-color: var(--ink); }
.share .ico { width: 18px; height: 18px; }
.copy-ok { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: .7rem; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.rail-cta { margin-top: 30px; padding: 18px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--rule); }
.rail-cta__brand { margin: 0 0 6px; font: 800 .7rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.rail-cta__title { margin: 0 0 14px; font: 600 1.1rem/1.25 var(--f-read); }

/* ---------- 11. Prose (the reading experience) ---------- */
.prose { font: 400 1.125rem/1.72 var(--f-read); color: var(--ink); font-optical-sizing: auto; counter-reset: h2; }
@media (min-width: 700px) { .prose { font-size: 1.235rem; } }
.prose > * { margin-block: 0 1.25em; }
.prose p { hanging-punctuation: first; }
.prose a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .2em; transition: background .15s; }
.prose a:hover { background: var(--mark-soft); }
.prose strong { font-weight: 650; }
.prose h2, .prose h3, .prose h4 { font-family: var(--f-read); color: var(--ink); text-wrap: balance; }
.prose h2 {
	counter-increment: h2; position: relative;
	margin: 2.2em 0 .7em; padding-top: .9em; border-top: 1px solid var(--rule);
	font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem); line-height: 1.12; font-weight: 600; letter-spacing: -.015em;
}
.prose h2::before {
	content: counter(h2, decimal-leading-zero);
	display: block; margin-bottom: .55em;
	font: 700 .7rem/1 var(--f-ui); letter-spacing: .16em; color: var(--signal);
}
.prose h3 { margin: 1.8em 0 .5em; font-size: 1.32em; line-height: 1.2; font-weight: 600; }
.prose h4 { margin: 1.5em 0 .4em; font: 700 .95rem/1.3 var(--f-ui); letter-spacing: .02em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; padding-left: .2em; }
.prose ul > li::marker { color: var(--signal); content: "■  "; font-size: .62em; }
.prose ol > li::marker { color: var(--signal); font: 700 .8em var(--f-ui); }
.prose img { border-radius: var(--r); }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-caption-text { margin-top: .6em; font: 400 .82rem/1.45 var(--f-ui); color: var(--ink-3); }
.prose blockquote {
	margin: 2em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--signal);
	font: italic 400 1.28em/1.45 var(--f-read); color: var(--ink);
}
.prose blockquote p:last-child { margin: 0; }
.prose blockquote cite { display: block; margin-top: .6em; font: normal 600 .78rem var(--f-ui); color: var(--ink-3); }
.prose code { font: .86em var(--f-mono); background: var(--paper-2); padding: .12em .38em; border-radius: 4px; }
.prose pre { overflow: auto; padding: 1.1em 1.2em; border-radius: var(--r-lg); background: var(--inv-bg); color: var(--inv-ink); font: .82rem/1.6 var(--f-mono); }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { margin: 2.6em auto; width: 120px; border-top: 3px dotted var(--rule-2); }
.prose mark { background: var(--mark); color: inherit; padding: 0 .15em; }

/* Answer-first box from the autoblog (.sci-tldr) or any "TL;DR" paragraph */
.prose .sci-tldr, .prose .tldr {
	position: relative; margin: 0 0 1.8em; padding: 1.15em 1.3em 1.15em 1.3em;
	background: var(--mark-soft); border: 1px solid color-mix(in srgb, var(--mark) 70%, var(--rule)); border-radius: var(--r-lg);
	font-size: 1.04em; line-height: 1.6;
}
.prose .sci-tldr p { margin: 0; }
.prose .sci-tldr p > strong:first-child {
	display: block; margin-bottom: .45em;
	font: 800 .7rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--signal);
}
.prose .sci-takeaways { margin: 0 0 2em; padding: 1.2em 1.3em .4em; border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--card); }
.prose .sci-takeaways h2 { margin: 0 0 .7em; padding: 0; border: 0; font: 800 .72rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); counter-increment: none; }
.prose .sci-takeaways h2::before { content: none; }
.prose .sci-takeaways ul { list-style: none; padding: 0; }
.prose .sci-takeaways li { position: relative; padding-left: 1.7em; font-size: .97em; }
.prose .sci-takeaways li::marker { content: none; }
.prose .sci-takeaways li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 1em; height: 1em; border-radius: 50%;
	background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/80% no-repeat;
}

/* FAQ: h2#faq followed by h3 + answer pairs */
.prose #faq ~ h3 {
	position: relative; margin: 1.4em 0 .35em; padding-left: 1.6em; font-size: 1.12em;
}
.prose #faq ~ h3::before { content: "Q"; position: absolute; left: 0; top: .05em; font: 800 .78em var(--f-ui); color: var(--signal); }
.prose #faq ~ h3 + p { padding-left: 1.45em; color: var(--ink-2); }
/* Rank Math FAQ block */
.prose .rank-math-list-item { padding: 1em 0; border-top: 1px solid var(--rule); }
.prose .rank-math-question { margin: 0 0 .3em; font-size: 1.12em; }
.prose .rank-math-answer p { margin: 0; color: var(--ink-2); }

/* Tables */
.table-wrap, .scc-tablewrap, .prose .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--card); }
.table-wrap:focus-visible, .scc-tablewrap:focus-visible { outline-offset: 2px; }
.prose table, .scc-table { width: 100%; border-collapse: collapse; font: 400 .9rem/1.45 var(--f-ui); }
.prose .wp-block-table table { margin: 0; }
.prose th, .prose td, .scc-table th, .scc-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose thead th, .scc-table thead th { background: var(--paper-2); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.prose tbody tr:last-child > *, .scc-table tbody tr:last-child > * { border-bottom: 0; }
.prose tbody tr:hover, .scc-table tbody tr:hover { background: var(--mark-soft); }
.prose table caption, .scc-table caption { caption-side: top; text-align: left; padding: 12px 14px; font: 700 .8rem var(--f-ui); color: var(--ink-3); border-bottom: 1px solid var(--rule); }

/* Mid-article service card */
.cta-inline {
	margin: 2.4em 0; padding: 26px 26px 24px; border-radius: var(--r-lg);
	background: var(--inv-bg); color: var(--inv-ink); font-family: var(--f-ui);
	position: relative; overflow: hidden;
}
.cta-inline::after {
	content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
	border: 26px solid var(--signal); opacity: .9;
}
@media (max-width: 699px) { .cta-inline::after { top: auto; bottom: -110px; right: -90px; } }
.cta-inline > * { position: relative; z-index: 1; max-width: 46ch; }
.cta-inline__brand { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font: 800 .74rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.cta-inline__brand small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--inv-ink-2); font-size: .78rem; }
.cta-inline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 30%, transparent); }
.cta-inline__title { margin: 0 0 8px; font: 600 1.55rem/1.15 var(--f-read); }
.cta-inline__text { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: var(--inv-ink-2); }
.prose .cta-inline a { color: var(--on-signal); text-decoration: none; background: var(--signal); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; padding: 0; }
.tags a { font-size: .82rem; color: var(--ink-2); text-decoration: none; padding: 5px 10px; background: var(--paper-2); border-radius: 999px; }
.tags a:hover { color: var(--ink); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 34px 0; padding: 18px 0; border-block: 1px solid var(--rule); font-weight: 600; font-size: .92rem; }

.author-box { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--rule); }
.author-box__img { width: 72px; height: 72px; border-radius: 50%; }
.author-box__name { margin: 0 0 6px; font: 600 1.3rem var(--f-read); }
.author-box__name a { text-decoration: none; }
.author-box p { margin: 0 0 8px; font-size: .92rem; color: var(--ink-2); }
.author-box__link { font-size: .85rem; font-weight: 600; }

/* ---------- 12. Related & Up next ---------- */
.related { padding: 56px 0 72px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.upnext {
	position: fixed; right: 16px; bottom: 16px; z-index: 40;
	width: min(340px, calc(100% - 32px));
	padding: 14px 44px 14px 16px; border-radius: var(--r-lg);
	background: var(--card); border: 1px solid var(--rule-2); box-shadow: var(--shadow);
	transform: translateY(16px); opacity: 0; transition: transform .35s var(--ease), opacity .35s;
}
.upnext.is-in { transform: none; opacity: 1; }
.upnext__label { margin: 0 0 4px; font: 800 .66rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.upnext__link { text-decoration: none; display: block; }
.upnext__title { display: block; font: 600 1.02rem/1.25 var(--f-read); }
.upnext__link:hover .upnext__title { text-decoration: underline; }
.upnext__meta { display: block; margin-top: 6px; font-size: .76rem; color: var(--ink-3); }
.upnext__x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); border-radius: 50%; }
.upnext__x:hover { background: var(--paper-2); color: var(--ink); }
.upnext__x .ico { width: 16px; height: 16px; }

/* ---------- 13. SCI Compare components ---------- */
.scc-eyebrow { margin: 0 0 4px; font: 700 .7rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.scc-logo { border-radius: 10px; object-fit: contain; background: #fff; flex: none; border: 1px solid var(--rule); }
.scc-logo--mono {
	display: inline-grid; place-items: center; border: 0;
	background: hsl(var(--h) 42% 90%); color: hsl(var(--h) 55% 26%);
	font: 800 .9rem/1 var(--f-ui); letter-spacing: -.02em;
}
:root[data-theme="dark"] .scc-logo--mono { background: hsl(var(--h) 25% 22%); color: hsl(var(--h) 60% 82%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scc-logo--mono { background: hsl(var(--h) 25% 22%); color: hsl(var(--h) 60% 82%); } }

.scc-rating { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.scc-rating b { font: 700 1rem var(--f-ui); }
.scc-meter { position: relative; width: 64px; height: 6px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.scc-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--go); border-radius: inherit; }
.scc-rating--lg { flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.scc-rating--lg b { font: 600 2.6rem/1 var(--f-read); }
.scc-rating--lg b::after { content: "/5"; font: 500 .9rem var(--f-ui); color: var(--ink-3); margin-left: 2px; }
.scc-rating--lg .scc-meter { width: 90px; }

.scc-badge { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 99px; font: 700 .68rem/1.4 var(--f-ui); letter-spacing: .02em; }
.scc-badge--ours { background: var(--mark); color: #2a2008; }

.scc-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: .62em 1em; border-radius: 99px;
	background: var(--ink); color: var(--paper) !important; text-decoration: none !important;
	font: 650 .86rem/1 var(--f-ui); white-space: nowrap; transition: transform .15s, background .15s;
}
.scc-btn:hover { background: var(--signal); color: var(--on-signal) !important; transform: translateY(-1px); }

.scc-card { border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--card); overflow: hidden; margin-bottom: 2rem; }
.scc-scorecard__id { display: flex; align-items: center; gap: 16px; padding: 22px; border-bottom: 1px solid var(--rule); }
@media (max-width: 559px) {
	.scc-scorecard__id { flex-wrap: wrap; }
	.scc-scorecard__id > div { flex: 1 1 180px; }
	.scc-rating--lg { flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: flex-start; margin: 4px 0 0; gap: 14px; }
}
.scc-tagline { margin: 0; font: 500 1.02rem/1.4 var(--f-read); color: var(--ink-2); }
.scc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; }
.scc-facts > div { padding: 16px 22px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.scc-facts dt { font: 700 .68rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.scc-facts dd { margin: 0; font-weight: 600; }
.scc-facts small, .scc-table small { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-3); }
.scc-scorecard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--paper-2); }
.scc-tested { font-size: .8rem; color: var(--ink-3); }

.scc-verdict { margin-bottom: 1.6rem; padding: 22px 24px; border-radius: var(--r-lg); background: var(--mark-soft); border: 1px solid color-mix(in srgb, var(--mark) 70%, var(--rule)); }
.scc-verdict .scc-eyebrow { color: var(--signal); }
.scc-verdict__winner { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .95rem; }
.scc-verdict__winner .scc-logo { border-radius: 6px; }
.scc-verdict__text { margin: 0; font: 400 1.18rem/1.55 var(--f-read); }
.scc-choose { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .scc-choose { grid-template-columns: repeat(var(--n), 1fr); } }
.scc-choose__item { padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); }
.scc-choose__item p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.scc-choose__h { font-weight: 700; color: var(--ink) !important; margin-bottom: 4px !important; }

.scc-matrix { margin: 0 0 2.2rem; }
.scc-table { min-width: calc(160px + var(--cols, 2) * 150px); }
.scc-table thead th { vertical-align: bottom; text-align: left; white-space: normal; padding-top: 18px; position: relative; }
.scc-table thead th .scc-logo { margin-bottom: 8px; }
.scc-table thead th a { display: block; font: 700 1rem var(--f-ui); text-decoration: none; }
.scc-table thead th.is-winner { background: color-mix(in srgb, var(--go) 12%, var(--paper-2)); box-shadow: inset 0 3px 0 var(--go); }
.scc-crown { position: absolute; top: 8px; right: 10px; font: 800 .62rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--go); }
.scc-table tbody th { font-weight: 600; color: var(--ink-2); width: 160px; background: var(--card); position: sticky; left: 0; z-index: 1; }
.scc-table .scc-corner { background: var(--paper-2); position: sticky; left: 0; z-index: 2; }
.scc-table thead th:first-of-type { }
.scc-row-cta td { background: var(--paper-2); }
.scc-v { display: inline-flex; align-items: center; gap: 4px; }
.scc-v--yes::before, .scc-v--no::before { content: ""; width: 20px; height: 20px; border-radius: 50%; }
.scc-v--yes::before { background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/70% no-repeat; }
.scc-v--no::before { background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23736e62' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E") center/70% no-repeat; }
.scc-v--part { font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--mark-soft); border: 1px solid var(--mark); }
.scc-v--na { color: var(--ink-3); }

.scc-subscores ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.scc-subscores li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 40px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 500 .95rem var(--f-ui); }
.scc-subscores b { text-align: right; font-variant-numeric: tabular-nums; }
.scc-bar { height: 8px; border-radius: 99px; background: var(--paper-3); position: relative; overflow: hidden; }
.scc-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--ink); border-radius: inherit; }
.scc-subscores h2, .scc-features h2, .scc-related h2 { font: 600 clamp(1.45rem, 1.2rem + .8vw, 1.85rem)/1.15 var(--f-read); margin: 2.4rem 0 1rem; padding-top: .8rem; border-top: 1px solid var(--rule); }

.scc-proscons { display: grid; gap: 14px; margin: 2rem 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .scc-proscons { grid-template-columns: 1fr 1fr; } }
.scc-pc { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--card); }
.scc-pc h3 { margin: 0 0 10px; font: 800 .74rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.scc-pc--pro h3 { color: var(--go); }
.scc-pc--con h3 { color: var(--stop); }
.scc-pc ul { list-style: none; margin: 0; padding: 0; }
.scc-pc li { position: relative; padding: 6px 0 6px 22px; font-size: .95rem; line-height: 1.45; }
.scc-pc li::before { position: absolute; left: 0; top: 5px; font: 800 1rem var(--f-ui); }
.scc-pc--pro li::before { content: "+"; color: var(--go); }
.scc-pc--con li::before { content: "−"; color: var(--stop); }
.scc-table--single { min-width: 0; }
.scc-table--single th { width: 50%; position: static; }

.scc-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.scc-list--board { grid-template-columns: 1fr; }
@media (min-width: 900px) { .scc-list--board { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.scc-mini { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.scc-mini__meta { grid-column: 3; display: flex; align-items: center; gap: 14px; }
@media (min-width: 560px) {
	.scc-mini { grid-template-columns: auto auto 1fr auto; }
	.scc-mini__meta { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
}
.scc-rank { font: italic 500 1.7rem/1 var(--f-read); color: var(--signal); width: 34px; text-align: center; font-variant-numeric: lining-nums; }
.scc-mini h3 { margin: 0 0 3px; font: 700 1.05rem/1.25 var(--f-ui); }
.scc-mini h3 a { text-decoration: none; }
.scc-mini h3 a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.scc-mini h3 .scc-badge { margin: 0 0 0 6px; vertical-align: 2px; }
.scc-mini p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.scc-price { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.scc-list--dir { margin-bottom: 40px; }

.vs-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-links a { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); text-decoration: none; font: 600 1rem var(--f-read); transition: border-color .15s; }
.vs-links a:hover { border-color: var(--ink); }
.vs-links span { color: var(--signal); }

.vs-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; animation: rise .6s var(--ease) both; }
.vs-hero__item { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--f-ui); }
.vs-hero__vs { font: italic 600 1.6rem var(--f-read); color: var(--signal); }

/* ---------- 14. Archive / search / 404 ---------- */
.arch-head { padding-top: 44px; padding-bottom: 30px; }
.arch-head__h { margin: 0 0 14px; font: 600 clamp(2.2rem, 1.4rem + 3vw, 3.8rem)/1.02 var(--f-read); letter-spacing: -.022em; max-width: 22ch; text-wrap: balance; }
.arch-head__desc { max-width: 66ch; font: 400 1.15rem/1.6 var(--f-read); color: var(--ink-2); margin-bottom: 20px; }
.arch-head__desc p { margin: 0 0 .8em; }
.arch-head__count { margin: 0; font-size: .8rem; color: var(--ink-3); }
.arch-head .chips { margin-top: 20px; }
.arch-author { display: flex; align-items: center; gap: 22px; }
.arch-author__img { border-radius: 50%; width: 96px; height: 96px; }
.arch-list { padding-bottom: 72px; }
.arch-list > .pc--lead { padding-bottom: 34px; }
@media (min-width: 1000px) {
	.arch-list > .pc--lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
	.arch-list > .pc--lead .pc__title { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); }
}
.dir { padding-bottom: 72px; }

.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 40px 0 0; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pager .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager a:hover { border-color: var(--ink); }

.searchform { display: flex; gap: 8px; max-width: 560px; }
.searchform input { flex: 1; min-width: 0; padding: .8em 1.1em; border: 1px solid var(--rule-2); border-radius: 99px; background: var(--card); }
.searchform input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.empty { color: var(--ink-2); font-size: 1.05rem; }

.e404 { padding-top: 40px; padding-bottom: 80px; }
.e404__n { margin: 0; font: italic 600 clamp(7rem, 4rem + 14vw, 15rem)/.85 var(--f-read); color: var(--signal); letter-spacing: -.05em; }
.e404__grid { margin-top: 56px; }

/* ---------- 15. CTA band & footer ---------- */
.band { padding: 64px 0; border-top: 1px solid var(--rule); }
.band__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .band__grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; align-items: stretch; } }
.band__h { margin: 0; font: 600 clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem)/1.05 var(--f-read); letter-spacing: -.02em; max-width: 14ch; }
.band__card {
	display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-lg);
	text-decoration: none; border: 1px solid var(--rule-2); background: var(--card);
	transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.band__card:first-of-type { background: var(--inv-bg); color: var(--inv-ink); border-color: var(--inv-bg); }
.band__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--signal); }
.band__brand { font: 800 .72rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.band__title { font: 600 1.35rem/1.2 var(--f-read); }
.band__text { font-size: .9rem; line-height: 1.5; opacity: .78; }
.band__go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font: 700 .9rem var(--f-ui); }
.band__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.band__card:hover .band__go .ico { transform: translateX(4px); }

.footer { background: var(--inv-bg); color: var(--inv-ink); padding: 56px 0 24px; font-size: .92rem; }
:root[data-theme="dark"] .footer { background: #0b0b0a; }
.footer__grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer .brand__word i { color: var(--inv-ink-2); }
.footer .brand__mark { box-shadow: inset 0 0 0 4px var(--signal), inset 0 0 0 6px var(--inv-bg); background: radial-gradient(circle, var(--inv-bg) 0 26%, transparent 27%), var(--signal); }
.footer p { color: var(--inv-ink-2); line-height: 1.6; max-width: 46ch; }
.footer__disc { font-size: .8rem; }
.footer__disc a { color: var(--inv-ink); }
.foot-h { margin: 0 0 14px; font: 800 .7rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-ink-2); }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 9px; }
.foot-list a, .footer .widget a { text-decoration: none; color: var(--inv-ink); opacity: .86; }
.foot-list a:hover { opacity: 1; text-decoration: underline; }
.foot-brand { display: block; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--inv-rule); border-radius: var(--r); text-decoration: none; transition: border-color .15s; }
.foot-brand:hover { border-color: var(--signal); }
.foot-brand b { display: block; font: 700 1rem var(--f-ui); }
.foot-brand span { font-size: .8rem; color: var(--inv-ink-2); }
.footer__base { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--inv-rule); font-size: .8rem; color: var(--inv-ink-2); }
.totop { text-decoration: none; }

/* ---------- 16. Core blocks (block-library CSS is dequeued) ---------- */
.prose .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.prose .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.prose .aligncenter { margin-inline: auto; }
@media (min-width: 1240px) {
	.prose .alignwide { margin-inline: -60px; max-width: none; }
}
.prose .wp-block-image img { margin-inline: auto; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.prose .wp-block-button__link { display: inline-block; padding: .7em 1.2em; border-radius: 99px; background: var(--ink); color: var(--paper); text-decoration: none; font: 650 .92rem var(--f-ui); }
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5em; }
.prose .wp-block-column { flex: 1 1 240px; min-width: 0; }
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--rule); }
.prose .wp-block-pullquote { padding: 1.4em 0; border-block: 3px solid var(--ink); text-align: center; font: italic 400 1.4em/1.4 var(--f-read); }
.prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.prose .wp-embed-aspect-16-9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose iframe { max-width: 100%; border-radius: var(--r); }
.prose .wp-block-details { border: 1px solid var(--rule); border-radius: var(--r); padding: .8em 1em; }
.prose .wp-block-details summary { cursor: pointer; font-weight: 600; }
.prose .has-text-align-center { text-align: center; }
.comments { margin-top: 48px; font-family: var(--f-ui); }
.comment-list { padding-left: 1.2em; }
.comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea { width: 100%; padding: .7em .9em; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--card); }

/* ---------- 17. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.ticker__list { animation: none; }
}
@media print {
	.ticker, .masthead, .rail, .toc-m, .progress, .band, .footer, .related, .upnext, .share-row, .cta-inline { display: none !important; }
	body { background: #fff; color: #000; }
	body::before { display: none; }
	.article__grid { display: block; }
	.prose a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------- 18. Free-tool pages (SCI Free Tools plugin) ---------- */
.sct-page .article__grid, .sct-page.page .article__grid { grid-template-columns: minmax(0, 880px); justify-content: center; }
.sct-page .article__main { max-width: 880px; }
.sct-page .article__head { max-width: calc(880px + 2 * var(--gut)); }
.sct-page .prose > .sct, .sct-page .prose > .sct-hub { margin-bottom: 3rem; }
.sct-page .article__grid .article__main { grid-column: auto; }
.sct-page .article__head { display: block; margin-inline: auto; }
.sct-page .article__head > * { max-width: none; }

/* ---------- 19. Automatic internal links ---------- */
.prose a.auto-link { text-decoration-style: solid; }
.next-card { margin: 2.2em 0; border: 1px solid var(--rule-2); border-left: 4px solid var(--signal); border-radius: var(--r-lg); background: var(--card); font-family: var(--f-ui); overflow: hidden; }
.next-card--tool { border-left-color: var(--go); }
.next-card__label { display: block; padding: 12px 20px 0; font: 800 .68rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.next-card--tool .next-card__label { color: var(--go); }
.prose .next-card__link { display: grid; gap: 4px; padding: 6px 20px 16px; text-decoration: none; color: var(--ink); }
.prose .next-card__link:hover { background: var(--mark-soft); }
.next-card__title { font: 600 1.2rem/1.25 var(--f-read); }
.next-card__link:hover .next-card__title { text-decoration: underline; text-decoration-color: var(--signal); }
.next-card__text { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.next-card__go { margin-top: 4px; font-weight: 700; font-size: .85rem; color: var(--signal); }
.next-card--tool .next-card__go { color: var(--go); }
.footer__base { flex-wrap: wrap; align-items: center; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer__legal a { color: var(--inv-ink-2); text-decoration: none; }
.footer__legal a:hover { color: var(--inv-ink); text-decoration: underline; }

/* ---------- 20. Auto-collapse: long menus switch to the hamburger at any width ---------- */
.nav-collapse .nav-toggle { display: inline-grid; }
.nav-collapse .nav__cta { display: none; }
.nav-collapse .masthead__tools { margin-left: auto; }
.nav-collapse .nav {
	position: fixed; inset: var(--head-h) 0 auto 0; margin: 0;
	background: var(--paper); border-bottom: 1px solid var(--rule);
	padding: 10px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 22px;
	box-shadow: var(--shadow);
	transform: translateY(-8px); opacity: 0; visibility: hidden;
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
	max-height: calc(100dvh - var(--head-h)); overflow: auto;
}
.nav-collapse.nav-open .nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-collapse.nav-open .nav-toggle .i-open { display: none; }
.nav-collapse.nav-open .nav-toggle .i-close { display: block; }
.nav-collapse .nav-list { flex-direction: column; gap: 0; }
.nav-collapse .nav-list a { white-space: normal; padding: 15px 4px; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.1rem; color: var(--ink); }
.nav-collapse .nav-list a:hover { background: none; }
.nav-collapse .nav__cta-m { display: inline-flex; margin-top: 18px; width: 100%; justify-content: center; }

/* ---------- 21. Hub child-page cards ([scc_child_pages]) ---------- */
.scc-children { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 1.2em 0 2em; font-family: var(--f-ui); }
@media (min-width: 700px) { .scc-children { grid-template-columns: 1fr 1fr; } }
.prose .scc-children__card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.prose .scc-children__card:hover { border-color: var(--signal); transform: translateY(-2px); background: var(--card); }
.scc-children__title { font: 600 1.05rem/1.3 var(--f-read); }
.scc-children__text { font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.nav-measuring .nav, .nav-measuring .nav * { transition: none !important; }