/* ===== HERO (Threaded Mosaic) ===== */
.hero {
	padding: 48px 0 32px;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 1.2fr;
	gap: 28px;
	align-items: center;
}
.hero-copy .kicker {
	color: var(--accent-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 8px 0 10px;
}
.hero-copy .lede {
	margin: 0 0 14px;
	color: var(--text);
}
.cta-row {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	flex-wrap: wrap;
}

/* Mosaic grid of <=350px tiles */
.hero-mosaic {
	display: grid;
	grid-template-columns: repeat(3, minmax(120px, 1fr));
	gap: 10px;
	perspective: 800px;
}
.swatch {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 8px 26px var(--shadow);
	transform-style: preserve-3d;
	transition: transform 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease, background-color 0.25s ease;
}
.swatch img {
	width: 100%;
	height: 120px; /* контролируем высоту тайла */
	max-width: 350px; /* глобальное ограничение также действует */
	border-radius: 10px;
}
.swatch.wide img {
	height: 100px;
}
.swatch.tall img {
	height: 160px;
}

/* Hover micro-tilt */
.swatch:hover {
	transform: translateY(-3px) rotateX(2deg) rotateY(-2deg);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

/* Enter reveal */
.hero-copy,
.swatch {
	opacity: 0;
	transform: translateY(12px);
}
.hero-copy.in-view,
.swatch.in-view {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Responsive for hero */
@media (max-width: 1100px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.hero-mosaic {
		order: 2;
	}
	.hero-copy {
		order: 1;
	}
}
@media (max-width: 860px) {
	.hero-mosaic {
		grid-template-columns: repeat(4, minmax(110px, 1fr));
	}
}
@media (max-width: 640px) {
	.hero {
		padding-top: 36px;
	}
	.hero-mosaic {
		grid-template-columns: repeat(3, minmax(100px, 1fr));
		gap: 8px;
	}
	.swatch img {
		height: 110px;
	}
	.swatch.tall img {
		height: 140px;
	}
	.swatch.wide img {
		height: 96px;
	}
}
@media (max-width: 420px) {
	.hero-mosaic {
		grid-template-columns: repeat(2, minmax(100px, 1fr));
	}
	.swatch img {
		height: 104px;
	}
}
@media (max-width: 320px) {
	.swatch img {
		height: 96px;
	}
}
/* ===== SECTION 2: Shape Lab ===== */
.shape-lab {
	padding: 36px 0;
}
.shape-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.section-title {
	margin: 0 0 8px;
}
.section-lede {
	margin: 0 0 14px;
	color: var(--text);
}
.shape-notes {
	display: flex;
	gap: 14px;
	padding: 0;
	margin: 8px 0 0;
	list-style: none;
	color: var(--muted);
}
.dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	display: inline-block;
	margin-right: 6px;
	vertical-align: -1px;
}
.dot-air {
	background: var(--accent-2);
}
.dot-shade {
	background: var(--accent);
}
.dot-pack {
	background: #46c29f;
}

.shape-rail {
	position: relative;
}
.shape-rail .rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(160px, 3fr);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
}
.shape-rail .rail::-webkit-scrollbar {
	height: 8px;
}
.shape-rail .rail::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
}

.shape-rail .snap {
	scroll-snap-align: center;
	list-style: none;
}
.shape {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease;
	box-shadow: 0 8px 26px var(--shadow);
}
.shape img {
	width: 100%;
	max-width: 350px;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
}
.shape figcaption {
	text-align: center;
	color: var(--muted);
	margin-top: 8px;
}
.shape:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}

.rail-hint {
	position: absolute;
	right: 8px;
	bottom: -2px;
	font-size: 12px;
	color: var(--muted);
	opacity: 0.7;
}

/* Responsive */
@media (max-width: 1040px) {
	.shape-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 3: Weave Atlas ===== */
.weave-atlas {
	padding: 36px 0;
}
.weave-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.weave-legend {
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
	color: var(--muted);
}
.chip {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 6px;
}
.chip-cool {
	background: #26b0ff;
}
.chip-mild {
	background: #ffa93b;
}
.chip-cold {
	background: #9cc2ff;
}

.weave-wall {
	--tile: 150px;
	display: grid;
	grid-template-columns: repeat(4, var(--tile));
	gap: 12px;
	justify-content: center;
}
.diamond {
	width: var(--tile);
	height: var(--tile);
	transform: rotate(45deg);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease, background-color 0.25s ease;
	box-shadow: 0 8px 26px var(--shadow);
}
.diamond img {
	width: 100%;
	height: 100%;
	max-width: 350px;
	object-fit: cover;
	transform: rotate(-45deg) scale(1.15);
}
.diamond:hover {
	transform: rotate(45deg) translateY(-4px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
}

/* Responsive */
@media (max-width: 1100px) {
	.weave-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 780px) {
	.weave-wall {
		--tile: 130px;
		grid-template-columns: repeat(3, var(--tile));
	}
}
@media (max-width: 520px) {
	.weave-wall {
		--tile: 120px;
		grid-template-columns: repeat(2, var(--tile));
	}
}

/* ===== SECTION 4: Climate Drape Lab ===== */
.drape-lab {
	padding: 36px 0;
}
.drape-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.compare {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 8px 26px var(--shadow);
	width: 350px;
	margin: 0 auto;
}
.compare-media {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	--split: 50%;
}
.compare-media .base,
.compare-media .top {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.compare-media .top {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0, var(--split) 0, var(--split) 100%, 0 100%);
}
.compare-media .handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--split) - 1.5px);
	width: 3px;
	background: color-mix(in oklab, var(--accent) 70%, #fff 30%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.compare-slider {
	width: 100%;
	margin-top: 10px;
	appearance: none;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}
.compare-slider::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #000;
	box-shadow: 0 2px 8px var(--ring);
	cursor: pointer;
}
.compare-caption {
	margin: 8px 0 0;
	color: var(--muted);
}

.climate-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 0;
	margin: 6px 0 0;
	list-style: none;
}
.climate-badges figure {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease;
}
.climate-badges img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
}
.climate-badges figcaption {
	margin-top: 8px;
	color: var(--muted);
}
.climate-badges figure:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Responsive */
@media (max-width: 900px) {
	.climate-badges {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 5: Brim Physics ===== */
.brim-physics {
	padding: 36px 0;
}
.brim-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.brim-points {
	margin: 10px 0 0;
	padding: 0 0 0 18px;
	color: var(--muted);
}
.brim-lab {
	display: grid;
	gap: 14px;
}
.lab-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.lab-field {
	display: grid;
	gap: 6px;
}
.lab-field span {
	color: var(--muted);
	font-size: 0.95rem;
}
.lab-field input[type='range'] {
	width: 100%;
	appearance: none;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}
.lab-field input[type='range']::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #000;
	box-shadow: 0 2px 8px var(--ring);
	cursor: pointer;
}
.ticks {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--muted);
	opacity: 0.8;
}
.ticks b {
	font-weight: 400;
}

.brim-canvas {
	position: relative;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: 0 8px 26px var(--shadow);
	padding: 14px;
}
.hat {
	position: relative;
	height: 220px;
	display: grid;
	place-items: center;
}
.hat .crown,
.hat .brim,
.hat .shade,
.hat .air {
	position: absolute;
	border-radius: 999px;
}

/* Crown & brim base shapes (sizes via CSS vars from class presets) */
.brim-canvas {
	--crown-h: 56px;
	--crown-w: 120px;
	--brim-w: 160px;
	--tilt: 0deg;
}
.hat .crown {
	width: var(--crown-w);
	height: var(--crown-h);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.18),
		rgba(255, 255, 255, 0.06)
	);
	box-shadow: 0 6px 16px var(--shadow) inset, 0 6px 20px var(--shadow);
	transform: translateY(-18px) rotate(var(--tilt));
}
.hat .brim {
	width: var(--brim-w);
	height: 18px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 6px 20px var(--shadow);
	transform: translateY(40px) rotate(var(--tilt));
}
.hat .shade {
	width: calc(var(--brim-w) * 1.15);
	height: 28px;
	background: rgba(239, 127, 26, 0.15);
	filter: blur(10px);
	transform: translateY(66px) rotate(var(--tilt));
	opacity: 0.85;
}
.hat .air {
	width: calc(var(--crown-w) * 0.9);
	height: calc(var(--crown-h) * 0.3);
	background: radial-gradient(
		closest-side,
		rgba(71, 103, 255, 0.35),
		transparent 70%
	);
	transform: translateY(10px) rotate(var(--tilt));
	filter: blur(6px);
}

/* Legend */
.legend {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 8px;
	color: var(--muted);
	font-size: 0.9rem;
}
.legend .l {
	padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
}
.l-shade {
	background: rgba(239, 127, 26, 0.08);
}
.l-air {
	background: rgba(71, 103, 255, 0.08);
}

/* Preset classes (NO inline styles): width, crown, tilt */
.brim-canvas.bw-0 {
	--brim-w: 120px;
}
.brim-canvas.bw-1 {
	--brim-w: 140px;
}
.brim-canvas.bw-2 {
	--brim-w: 160px;
}
.brim-canvas.bw-3 {
	--brim-w: 180px;
}
.brim-canvas.bw-4 {
	--brim-w: 200px;
}

.brim-canvas.ch-0 {
	--crown-h: 44px;
	--crown-w: 112px;
}
.brim-canvas.ch-1 {
	--crown-h: 50px;
	--crown-w: 116px;
}
.brim-canvas.ch-2 {
	--crown-h: 56px;
	--crown-w: 120px;
}
.brim-canvas.ch-3 {
	--crown-h: 64px;
	--crown-w: 124px;
}
.brim-canvas.ch-4 {
	--crown-h: 72px;
	--crown-w: 128px;
}

.brim-canvas.tt-0 {
	--tilt: -6deg;
}
.brim-canvas.tt-1 {
	--tilt: 0deg;
}
.brim-canvas.tt-2 {
	--tilt: 6deg;
}

/* Responsive */
@media (max-width: 1050px) {
	.brim-grid {
		grid-template-columns: 1fr;
	}
	.lab-controls {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 6: Wrap Chorus ===== */
.wrap-chorus {
	padding: 36px 0;
}
.wrap-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.wrap-steps {
	display: grid;
	gap: 12px;
}
.wrap-item {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: 0 8px 26px var(--shadow);
	overflow: hidden;
}
.wrap-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background-color 0.2s ease;
}
.wrap-item > summary::marker {
	display: none;
}
.wrap-item > summary:hover {
	background: rgba(255, 255, 255, 0.05);
}
.wrap-item[open] > summary {
	background: rgba(255, 255, 255, 0.06);
}
.wrap-item .wrap-body {
	padding: 0 14px 14px;
	color: var(--muted);
}
.wrap-item ol {
	margin: 8px 0 0 18px;
}
.tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(71, 103, 255, 0.12);
	color: #cfe1ff;
	font-size: 0.8rem;
	border: 1px solid rgba(71, 103, 255, 0.25);
}

/* Responsive */
@media (max-width: 1050px) {
	.wrap-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 7: City Heatmap ===== */
.city-heatmap {
	padding: 36px 0;
}
.heat-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.heat-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}
.heat-card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	background: radial-gradient(
			30% 40% at 0% 0%,
			rgba(255, 255, 255, 0.05),
			transparent 60%
		),
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.06),
			rgba(255, 255, 255, 0.02)
		);
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease,
		background-color 0.2s ease;
}
.heat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.heat-card h3 {
	margin: 0 0 4px;
}
.heat-card p {
	margin: 4px 0;
	color: var(--muted);
}

/* Color hints by climate */
.h-hot {
	box-shadow: 0 8px 26px rgba(255, 140, 0, 0.15);
}
.h-warm {
	box-shadow: 0 8px 26px rgba(255, 193, 7, 0.15);
}
.h-cool {
	box-shadow: 0 8px 26px rgba(33, 150, 243, 0.15);
}
.h-humid {
	box-shadow: 0 8px 26px rgba(76, 175, 80, 0.15);
}
.h-hill {
	box-shadow: 0 8px 26px rgba(156, 39, 176, 0.15);
}

/* Responsive */
@media (max-width: 1050px) {
	.heat-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 8: Craft Ledger ===== */
.craft-ledger {
	padding: 36px 0;
}
.ledger-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.ledger-sticky {
	position: sticky;
	top: 72px;
	align-self: start;
}
.ledger-steps {
	margin: 10px 0 0;
	color: var(--muted);
}
.ledger-flow {
	display: grid;
	gap: 12px;
}
.ledger-card {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease,
		background-color 0.2s ease;
}
.ledger-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.l-head {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}
.l-tag {
	font-size: 0.75rem;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--muted);
}
.l-fig img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
}

@media (max-width: 1050px) {
	.ledger-grid {
		grid-template-columns: 1fr;
	}
	.ledger-sticky {
		position: static;
	}
}

/* ===== SECTION 9: Fit Diagnostics ===== */
.fit-diagnostics {
	padding: 36px 0;
}
.fit-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.fit-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.fit-chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	transition: transform 0.2s ease, background-color 0.2s ease,
		border-color 0.2s ease;
}
.fit-chip:hover {
	transform: translateY(-2px);
}
.fit-chip.is-active {
	background: rgba(71, 103, 255, 0.15);
	border-color: rgba(71, 103, 255, 0.35);
}
.fit-stage {
	display: grid;
	gap: 12px;
}
.fit-panel {
	display: none;
	color: var(--muted);
}
.fit-panel.is-active {
	display: block;
}
.fit-figs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.fit-figs img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
}

@media (max-width: 900px) {
	.fit-grid {
		grid-template-columns: 1fr;
	}
	.fit-figs {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 10: Monsoon Field Tests ===== */
.field-tests {
	padding: 36px 0;
}
.tests-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.tests-matrix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.test-card {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.test-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.test-card header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.badge {
	font-size: 0.75rem;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--muted);
}
.test-fig img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 12px;
}

/* simple animated bar via CSS var set from data attribute */
.bar {
	--w: 0%;
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	margin-top: 8px;
	overflow: hidden;
}
.bar::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--w);
	background: linear-gradient(
		90deg,
		color-mix(in oklab, var(--accent) 80%, #fff 20%),
		var(--accent)
	);
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.bar .val {
	position: absolute;
	right: 8px;
	top: -22px;
	font-size: 0.8rem;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.tests-grid {
		grid-template-columns: 1fr;
	}
	.tests-matrix {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 11: Care Lab ===== */
.care-lab {
	padding: 36px 0;
}
.care-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: start;
}
.care-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.care-card {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.care-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.care-card figure img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
}
.care-list {
	margin: 8px 0 0 18px;
	color: var(--muted);
}

@media (max-width: 900px) {
	.care-grid {
		grid-template-columns: 1fr;
	}
	.care-cards {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 12: Retail Notes (India) ===== */
.retail-notes {
	padding: 36px 0;
}
.retail-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 28px;
	align-items: start;
}
.retail-copy {
	display: grid;
	gap: 12px;
}
.note-card {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease,
		background-color 0.2s ease;
}
.note-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.note-fig img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
}

.retail-faq {
	display: grid;
	gap: 12px;
}
.faq-item {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: 0 8px 26px var(--shadow);
	overflow: hidden;
}
.faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	transition: background-color 0.2s ease;
}
.faq-item > summary:hover {
	background: rgba(255, 255, 255, 0.05);
}
.faq-item[open] > summary {
	background: rgba(255, 255, 255, 0.06);
}
.faq-item p {
	margin: 0;
	padding: 0 14px 12px;
	color: var(--muted);
}

@media (max-width: 1050px) {
	.retail-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 13: FAQ & Micro Demos ===== */
.faq-demos {
	padding: 36px 0;
}
.demos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.demo-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.demo-card {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.demo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.demo-card figure img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 12px;
}

.demos-qa {
	display: grid;
	gap: 12px;
}
.qa-item {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: 0 8px 26px var(--shadow);
	overflow: hidden;
}
.qa-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	transition: background-color 0.2s ease;
}
.qa-item > summary:hover {
	background: rgba(255, 255, 255, 0.05);
}
.qa-item[open] > summary {
	background: rgba(255, 255, 255, 0.06);
}
.qa-item p {
	margin: 0;
	padding: 0 14px 12px;
	color: var(--muted);
}

@media (max-width: 1000px) {
	.demo-cards {
		grid-template-columns: 1fr;
	}
}
/* ===== CONTACT FORM ===== */
.contact-form {
	padding: 36px 0;
}
.contact-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 14px;
}
.contact-header h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	margin: 0 0 6px;
}
.contact-header p {
	margin: 0;
	color: var(--muted);
}

.form-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	max-width: 820px;
	margin: 14px auto 0;
}
.form-wrapper input[type='text'],
.form-wrapper input[type='email'],
.form-wrapper textarea {
	width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		rgba(255, 255, 255, 0.02)
	);
	color: var(--text);
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.25s ease,
		background-color 0.2s ease;
}
.form-wrapper textarea {
	grid-column: 1 / -1;
	min-height: 140px;
	resize: vertical;
}
.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder {
	color: color-mix(in oklab, var(--muted) 85%, #fff 15%);
}

.form-wrapper input:focus,
.form-wrapper textarea:focus {
	outline: none;
	border-color: color-mix(in oklab, var(--accent) 40%, #fff 60%);
	box-shadow: 0 0 0 3px var(--ring);
}

/* checkbox */
.form-checkbox {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 0.95rem;
}
.form-checkbox input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--accent);
}

/* button reuses brand look */
.cta-button {
	justify-self: end;
	align-self: center;
	padding: 12px 16px;
	border-radius: 14px;
	border: 1px solid color-mix(in oklab, var(--accent) 55%, #000 45%);
	background: linear-gradient(
		180deg,
		color-mix(in oklab, var(--accent) 85%, #fff 15%),
		var(--accent)
	);
	color: #191919;
	box-shadow: 0 6px 16px var(--ring);
	transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
	cursor: not-allowed;
	opacity: 0.6;
}
.cta-button.enabled {
	cursor: pointer;
	opacity: 1;
}
.cta-button.enabled:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px var(--ring);
}

.contact-note {
	margin: 10px auto 0;
	text-align: center;
	color: var(--muted);
}

/* responsive */
@media (max-width: 820px) {
	.form-wrapper {
		grid-template-columns: 1fr;
	}
	.cta-button {
		justify-self: start;
	}
}
/* tiny shake for invalid focus */
@keyframes shakeX {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-4px);
	}
	75% {
		transform: translateX(4px);
	}
}
.shake {
	animation: shakeX 0.28s ease;
}