/* QRtool — global styles (StoneWallRM-Pattern, dark editorial) */
:root {
	--bg: #0A0A0F;
	--bg-soft: #14141C;
	--surface: #1A1A24;
	--ink: #EDEBE4;
	--ink-dim: #A6A3B4;
	--ink-faint: #6B687A;
	--border: #2A2A36;
	--border-strong: #3A3A4A;
	--accent: #7C5CFF;
	--accent-soft: #1F1638;
	--accent-bright: #9D82FF;
	--ok: #4ADE80;
	--warn: #FBBF24;
	--danger: #F87171;

	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
	--shadow: 0 4px 16px rgba(0,0,0,.35);
	--shadow-lg: 0 24px 48px -12px rgba(0,0,0,.5);

	--container: 1240px;
	--gutter: clamp(20px, 4vw, 48px);

	--font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display: "Space Grotesk", var(--font-sans);
	--font-serif: "Instrument Serif", Georgia, serif;
	--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-bright); }
button { font-family: inherit; cursor: pointer; }

/* ============ i18n visibility ============ */
[data-lang] { display: none; }
[data-lang].is-active { display: inline; }
h1 [data-lang].is-active,
h2 [data-lang].is-active,
h3 [data-lang].is-active,
h4 [data-lang].is-active,
p [data-lang].is-active,
li [data-lang].is-active,
span[data-lang].is-active,
a [data-lang].is-active,
button [data-lang].is-active,
.eyebrow [data-lang].is-active,
strong[data-lang].is-active { display: inline; }
p[data-lang].is-active, h1[data-lang].is-active, h2[data-lang].is-active, h3[data-lang].is-active, h4[data-lang].is-active, div[data-lang].is-active { display: block; }

/* ============ Typography ============ */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 .5em;
	font-weight: 600;
	text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
h4 { font-size: 17px; }
p { margin: 0 0 1em; color: var(--ink-dim); text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-dim); line-height: 1.5; max-width: 60ch; }
small, .small { font-size: 13px; color: var(--ink-faint); }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-bright); }
strong { color: var(--ink); }
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent-bright);
	background: var(--accent-soft);
	padding: 6px 12px; border-radius: 99px;
	margin-bottom: 18px;
}

/* ============ Layout ============ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.section--surface { background: var(--bg-soft); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2 { margin: 0 auto; max-width: 24ch; }
.section-head p { margin: 16px auto 0; max-width: 56ch; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 900px) {
	.grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ============ Buttons ============ */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius);
	font-weight: 600; font-size: 15px;
	border: 1px solid transparent;
	transition: all .15s ease;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;
	font-family: var(--font-sans);
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-bright); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--accent); }
.btn--link { padding: 0; background: none; color: var(--accent); border: 0; font-weight: 600; }
.btn--link:hover { color: var(--accent-bright); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--sm { padding: 8px 14px; font-size: 14px; }

/* ============ Cards ============ */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: all .2s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.card--soft { background: var(--bg-soft); }
.feature-icon {
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent-bright);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
}
.feature-icon svg { width: 22px; height: 22px; }

/* ============ Header ============ */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10,10,15,.85);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
}
.site-header__inner {
	display: flex; align-items: center; gap: 32px;
	height: 72px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.site-header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink); }
.site-header__logo svg, .site-header__logo img,
.site-header__logo .custom-logo {
	display: block;
	height: 36px !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
}

.site-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.site-nav a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	font-size: 14.5px; font-weight: 500;
	color: var(--ink-dim);
	border-radius: 8px;
}
.site-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.site-nav a.is-active { color: var(--accent-bright); }

.site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang-switch {
	display: inline-flex;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: 99px;
	padding: 3px;
}
.lang-switch button {
	background: transparent;
	border: 0;
	color: var(--ink-faint);
	padding: 5px 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	border-radius: 99px;
}
.lang-switch button.is-active { background: var(--accent); color: #fff; }

.hamburger {
	display: none;
	width: 40px; height: 40px;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--ink);
	align-items: center; justify-content: center;
}

.mobile-nav {
	display: none;
	position: fixed;
	inset: 72px 0 auto 0;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	padding: 16px var(--gutter);
	z-index: 49;
}
.mobile-nav.is-open { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { padding: 14px 0; color: var(--ink); border-bottom: 1px solid var(--border); font-size: 16px; }

@media (max-width: 960px) {
	.site-nav { display: none; }
	.hamburger { display: inline-flex; }
}

/* ============ Hero ============ */
.hero {
	padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 60% at 20% 30%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%),
		radial-gradient(40% 40% at 80% 20%, color-mix(in oklab, var(--accent-bright) 18%, transparent), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero--small { padding: 64px 0 32px; }
.hero__inner { max-width: 880px; }
.hero h1 { margin-bottom: 24px; }
.hero p.lead { margin-bottom: 32px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ Footer ============ */
.site-footer {
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
	padding: 64px 0 32px;
	margin-top: 96px;
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--border);
}
.site-footer__brand p { max-width: 280px; font-size: 14px; line-height: 1.55; }
.site-footer__logo { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.02em; }
.site-footer h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 16px; font-weight: 500; }
.site-footer a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-dim); }
.site-footer a:hover { color: var(--accent-bright); }
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-top: 24px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--ink-faint);
	flex-wrap: wrap;
}
.site-footer__bottom .row a { display: inline; padding: 0; color: var(--ink-faint); }
.site-footer__bottom .row a:hover { color: var(--accent-bright); }
@media (max-width: 1100px) { .site-footer__top { grid-template-columns: 1fr 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }

/* ============ Pillar / num ============ */
.pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-bright); }

/* ============ CTA banner ============ */
.cta-banner {
	background: linear-gradient(135deg, var(--accent-soft), var(--bg-soft));
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 64px 48px;
	text-align: center;
}
.cta-banner h2 { margin-bottom: 16px; }
.cta-banner p { max-width: 56ch; margin: 0 auto 32px; }

/* ============ Tool-grid (CPT archive) ============ */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tool-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); transition: all .2s; }
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.tool-card h3 { font-size: 20px; margin: 0; }

/* ============ Prose ============ */
.prose { font-size: 17px; line-height: 1.7; }
.prose p { color: var(--ink); margin-bottom: 1.2em; }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 24px; }
.prose ul li, .prose ol li { margin-bottom: 8px; color: var(--ink); }
.prose ul li::marker { color: var(--accent); }
.prose strong { color: var(--ink); }
.prose a { border-bottom: 1px solid var(--accent); }
.prose .callout { background: var(--bg-soft); border-left: 3px solid var(--accent); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 32px 0; }
.prose dl.kv { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px 32px; margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prose dl.kv dt { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.prose dl.kv dd { margin: 0; color: var(--ink); }
@media (max-width: 640px) { .prose dl.kv { grid-template-columns: 1fr; gap: 4px 0; } }

/* ============ Ecosystem grid ============ */
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 32px 0; }
.eco-card { padding: 24px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; }
.eco-card.is-self { background: var(--accent-soft); border-color: var(--accent); }
.eco-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.eco-role { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--accent-bright); }
.eco-line { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }


/* ============ Tool cards (archive) ============ */
.tool-card { position: relative; }
.tool-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tool-card__head h3 { margin: 0; font-size: 20px; flex: 1; }
.tool-score-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px;
	background: var(--accent); color: #fff;
	font-family: var(--font-display); font-weight: 700;
	font-size: 15px; border-radius: 99px;
	padding: 0 10px; flex-shrink: 0;
}
.tool-vendor { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin: 0; letter-spacing: .04em; }
.tool-card__foot { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.tool-cat {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	background: var(--bg-soft); color: var(--ink-dim);
	padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border);
}
.gdpr-pill {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 99px; border: 1px solid;
}
.gdpr-pill.is-yes { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); }
.gdpr-pill.is-partial { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, transparent); background: color-mix(in oklab, var(--warn) 12%, transparent); }
.gdpr-pill.is-no { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); background: color-mix(in oklab, var(--danger) 12%, transparent); }

/* ============ Tool single ============ */
.tool-single { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .tool-single { grid-template-columns: 1fr; } }
.tool-sidebar {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px;
	position: sticky;
	top: 88px;
}
@media (max-width: 880px) { .tool-sidebar { position: static; } }
.tool-score-big { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.tool-score-big .num {
	font-family: var(--font-display); font-weight: 700; font-size: 72px;
	color: var(--accent-bright); line-height: 1; margin-bottom: 4px;
}
.tool-score-big .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.tool-scores { margin-bottom: 24px; }
.score-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-bottom: 12px; align-items: center; }
.score-label { font-size: 13px; color: var(--ink-dim); grid-column: 1; }
.score-num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: 13px; grid-column: 2; }
.score-bar { grid-column: 1 / -1; height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius: 3px; }
.tool-meta { margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: 12px 0; }
.tool-meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.tool-meta dd { margin: 0 0 12px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.tool-meta dd:last-child { margin-bottom: 0; }
.tool-body { padding-top: 8px; }
.tool-body .callout { background: var(--accent-soft); border-left-color: var(--accent); }
.tool-pros li::marker, .tool-cons li::marker { font-weight: 700; }
.tool-pros li::marker { color: var(--ok); }
.tool-cons li::marker { color: var(--danger); }


/* ============ Posts (tutorials) ============ */
.post-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--ink-faint); margin-top: 16px; display: inline-flex; gap: 8px; align-items: center; }
.post-tags { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tag-list a { font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 99px; color: var(--ink-dim); }
.tag-list a:hover { color: var(--accent-bright); border-color: var(--accent); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.post-card {
	display: flex; flex-direction: column; gap: 12px;
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	color: var(--ink);
	transition: all .2s ease;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.post-card__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.post-card h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.post-card p { color: var(--ink-dim); font-size: 14px; margin: 0; }
.post-card__foot { margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); display: flex; gap: 8px; align-items: center; }

/* Prose extras for tutorials */
.prose pre { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; margin: 24px 0; }
.prose code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.92em; color: var(--accent-bright); }
.prose pre code { background: transparent; padding: 0; color: var(--ink); }
.prose ol { padding-left: 24px; margin: 0 0 1.2em; }
.prose ol li { margin-bottom: 8px; color: var(--ink); }
.prose ol li::marker { color: var(--accent); font-weight: 600; }


/* ============ Lang/Theme toggle fixes ============ */
.lang-switch button[data-lang-btn] { display: inline-flex !important; }
.theme-toggle {
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: 8px;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink-dim);
	transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--accent-bright); border-color: var(--accent); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============ Light theme tokens ============ */
html[data-theme="light"] {
	--bg: #FAFAF7;
	--bg-soft: #F0F0EB;
	--surface: #FFFFFF;
	--ink: #14141A;
	--ink-dim: #4A4A55;
	--ink-faint: #7A7A85;
	--border: #E4E4DD;
	--border-strong: #C8C8C0;
	--accent: #5B3DFF;
	--accent-soft: #ECE6FF;
	--accent-bright: #4A2DEC;
}
html[data-theme="light"] body { background: var(--bg); color: var(--ink); }
html[data-theme="light"] .site-header { background: rgba(250,250,247,.85); }
html[data-theme="light"] .btn--accent { color: #fff; }


/* ============ Rich Home (StoneWallRM-inspired) ============ */
.hero--rich { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.hero-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-areas:
		"meta meta"
		"title side"
		"stats stats"
		"ticker ticker";
	gap: 32px 48px;
	align-items: start;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "side" "stats" "ticker"; gap: 24px; } }
.hero-meta { grid-area: meta; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-meta .pill {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--accent-bright); background: var(--accent-soft);
	padding: 6px 12px; border-radius: 99px;
}
.pill-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero-breadcrumb { font-size: 11px; color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; }
.hero-title {
	grid-area: title;
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(42px, 6vw, 84px);
	letter-spacing: -0.035em; line-height: 1.02;
	margin: 0; text-wrap: balance;
}
.hero-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-bright); }
.hero-side { grid-area: side; display: flex; flex-direction: column; gap: 24px; align-self: end; }
.hero-side .lead { max-width: none; margin: 0; }
.hero-stats {
	grid-area: stats;
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
	padding: 24px 0;
	margin-top: 8px;
}
@media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
.hero-stat { padding: 0 8px; border-right: 1px solid var(--border); }
.hero-stat:last-child { border-right: 0; }
@media (max-width: 640px) { .hero-stat { border-right: 0; } }
.hero-stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 48px); color: var(--ink); line-height: 1; margin-bottom: 6px; }
.hero-stat .num-sm { font-size: 20px; color: var(--ink-dim); }
.hero-stat .mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hero-ticker {
	grid-area: ticker;
	display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
	font-size: 11px; color: var(--ink-dim);
	padding-top: 8px;
}
.hero-ticker strong { color: var(--ink); }

/* ============ Marquee ============ */
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; background: var(--bg-soft); }
.marquee-track {
	display: flex; gap: 32px; align-items: center;
	width: max-content;
	animation: marquee 60s linear infinite;
	font-family: var(--font-display); font-weight: 500; font-size: 16px;
	color: var(--ink-dim);
}
.marquee-track i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Section label ============ */
.section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 24px; }

/* ============ Tool of the week ============ */
.tow-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .tow-grid { grid-template-columns: 1fr; gap: 32px; } }
.tow-visual {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(80% 60% at 30% 30%, color-mix(in oklab, var(--accent-bright) 35%, transparent), transparent),
		radial-gradient(60% 60% at 70% 70%, color-mix(in oklab, var(--accent) 50%, transparent), transparent),
		linear-gradient(135deg, var(--accent-soft), var(--surface));
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	overflow: hidden;
}
.tow-visual-label { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; background: var(--bg); border-radius: 99px; color: var(--ink); border: 1px solid var(--border); }
.tow-visual-badge { position: absolute; bottom: 16px; right: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--ink-dim); }
.tow-visual-badge strong { color: var(--ink); display: block; font-size: 14px; }
.tow-content { display: flex; flex-direction: column; gap: 16px; }
.tow-brand { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tow-content h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); }
.tow-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 8px 0; }
.tow-meta .mono { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tow-meta .val { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin-top: 4px; }

/* ============ Directory preview ============ */
.dir-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.dir-head h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); }
.dir-head em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-bright); }
@media (max-width: 720px) { .dir-head { flex-direction: column; align-items: flex-start; } }
.dir-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) { .dir-categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dir-categories { grid-template-columns: 1fr; } }
.dir-cat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all .2s ease; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.dir-cat:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.dir-cat-count { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.dir-cat-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.dir-cat-tools { font-size: 12px; color: var(--ink-dim); letter-spacing: .02em; }

/* ============ CS (How QRtool works) ============ */
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-grid h2 { margin: 0 0 16px; }
.cs-list { list-style: none; padding: 0; margin: 24px 0 32px; }
.cs-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cs-list .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-bright); letter-spacing: .08em; }
.cs-list .name { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.cs-list .dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.cs-visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; }
.cs-visual-pillar { display: flex; flex-direction: column; gap: 14px; }
.cs-dimension { display: grid; grid-template-columns: 1fr 140px; gap: 12px; align-items: center; font-size: 13px; color: var(--ink); }
.cs-dim-bar { height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; }
.cs-dim-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
.cs-visual-overlay { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* ============ Newsletter ============ */
.nl-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .nl-grid { grid-template-columns: 1fr; } }
.nl-grid h2 { margin: 0 0 16px; }
.nl-grid em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-bright); }
.nl-samples { display: flex; flex-direction: column; gap: 12px; }
.nl-sample { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.nl-sample .mono { font-size: 10px; letter-spacing: .1em; color: var(--accent-bright); margin-bottom: 6px; text-transform: uppercase; }
.nl-sample-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }


/* ============ A11y skip-link ============ */
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--accent); color: #fff;
	padding: 12px 20px; z-index: 100;
	font-family: var(--font-mono); font-size: 13px;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; outline: 3px solid var(--accent-bright); color: #fff; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text:focus { position: static; clip: auto; width: auto; height: auto; }

/* ============ Print styles ============ */
@media print {
	.site-header, .site-footer, .marquee, .hero__cta, .btn { display: none !important; }
	body { background: #fff; color: #000; }
	.prose { font-size: 11pt; }
	.prose a { color: #000; text-decoration: underline; }
	.prose a::after { content: " (" attr(href) ")"; font-size: 9pt; opacity: 0.7; }
}


/* ============ Tool comparison table (shortcode) ============ */
.qrtool-compare { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.qrtool-compare table { width: 100%; border-collapse: collapse; min-width: 600px; }
.qrtool-compare th, .qrtool-compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.qrtool-compare th { background: var(--bg-soft); font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.qrtool-compare th a { color: var(--accent-bright); text-decoration: none; }
.qrtool-compare th a:hover { text-decoration: underline; }
.qrtool-compare tbody td:first-child { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.qrtool-compare-score { display: flex; align-items: center; gap: 10px; }
.qrtool-compare-score .bar { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; min-width: 60px; }
.qrtool-compare-score .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
.qrtool-compare-score .num { font-family: var(--font-mono); font-weight: 700; color: var(--ink); min-width: 22px; }