/* Landing styles for zna4ki.ru wholesale page */
/* Palette: porcelain background, ink text, raspberry accent; badge colors live in illustrations only */
:root {
	--paper: #F2F4F8;
	--card: #FFFFFF;
	--ink: #171A21;
	--steel: #5A6472;
	--muted: #6C7481;
	--line: #E1E6EE;
	--accent: #E3032E;
	--accent-dark: #B80125;
	--accent-soft: #FFE9ED;
	--b-yellow: #FFC53D;
	--b-blue: #37B6FF;
	--b-violet: #8C5BFF;
	--b-coral: #FF7A59;
	--b-green: #43C56E;
	--b-metal-1: #E8ECF2;
	--b-metal-2: #B7C0CC;
	--radius: 22px;
	--font-display: 'Unbounded', 'Arial Black', sans-serif;
	--font-body: 'Golos Text', 'Segoe UI', Arial, sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

section[id],
div[id] {
	scroll-margin-top: 86px;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--accent);
}

a:hover {
	color: var(--accent-dark);
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(242, 244, 248, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}

/* Keeps the CTA at its intrinsic width instead of stretching across its grid column */
.header-cta {
	justify-self: end;
}

.header-cta .cta-short {
	display: none;
}

.logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

/* Padding rather than height: gives the header logo a finger-sized hit area */
.site-header .logo {
	display: inline-block;
	padding: 8px 0;
}

.logo .logo-dot {
	color: var(--accent);
}

.main-nav {
	text-align: center;
}

.main-nav a {
	display: inline-block;
	color: var(--steel);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	margin: 0 12px;
	padding: 6px 2px;
}

.main-nav a:hover {
	color: var(--ink);
}

/* ---------- Mobile nav toggle ---------- */
/* Shaped like the badges the page is made of, so the control belongs to the same set */

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: radial-gradient(circle at 32% 28%, #FF5A6E, var(--accent) 62%, #9E0020);
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, 0.6),
		inset 0 -5px 10px rgba(0, 0, 0, 0.2);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: #FFFFFF;
	transform: translateX(-50%);
	transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease;
}

.nav-toggle-icon {
	top: 50%;
	margin-top: -1px;
}

.nav-toggle-icon::before {
	content: '';
	top: -6px;
}

.nav-toggle-icon::after {
	content: '';
	top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary {
	background: var(--accent);
	color: #FFFFFF;
	padding: 15px 32px;
}

.btn-primary:hover {
	background: var(--accent-dark);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.btn-small {
	padding: 10px 22px;
	font-size: 15px;
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	padding: 14px 28px;
	border: 2px solid var(--line);
}

.btn-ghost:hover {
	border-color: var(--steel);
	color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
	padding: 72px 0 40px;
	overflow: hidden;
}

.hero .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 32px;
	align-items: center;
}

.hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin: 18px 0 20px;
}

.hero h1 .accent {
	color: var(--accent);
}

.hero-sub {
	font-size: 19px;
	color: var(--steel);
	max-width: 34em;
	margin-bottom: 30px;
}

.hero-cta {
	margin-bottom: 34px;
}

.hero-cta .btn {
	margin-right: 14px;
	margin-bottom: 12px;
}

.chip-row {
	font-size: 0;
}

.chip {
	display: inline-block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 16px;
	margin: 0 10px 10px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--steel);
}

.chip b {
	color: var(--ink);
	font-weight: 600;
}

/* ---------- Badge wall (signature element) ---------- */

/* Pins are sized in % of the wall and the wall keeps a fixed ratio, so the whole
   composition scales with the viewport instead of stepping between breakpoints */
.badge-wall {
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: 1 / 0.95;
}

.badge-pin {
	position: absolute;
	border-radius: 50%;
	box-shadow:
		0 14px 30px rgba(23, 26, 33, 0.18),
		inset 0 2px 3px rgba(255, 255, 255, 0.65),
		inset 0 -6px 12px rgba(0, 0, 0, 0.18);
}

/* Lacquer shine: the "zakat" gloss highlight */
.badge-pin::after {
	content: '';
	position: absolute;
	left: 12%;
	top: 7%;
	width: 55%;
	height: 38%;
	border-radius: 50%;
	background: linear-gradient(175deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
	transform: rotate(-18deg);
}

.badge-pin .badge-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	text-align: center;
	line-height: 1.25;
}

.pin-56 { width: 39.4%; aspect-ratio: 1; }
.pin-38 { width: 26.6%; aspect-ratio: 1; }
.pin-25 { width: 17.6%; aspect-ratio: 1; }

/* Label size tracks badge diameter (~11%), so bigger badge = bigger text, with a
   floor that keeps the smallest pins readable. The plain px values are the
   fallback for browsers without container query units */
.pin-56 .badge-label { font-size: 22px; padding: 0 22px; font-size: max(13px, 4.4cqw); padding: 0 4.4cqw; }
.pin-38 .badge-label { font-size: 15px; padding: 0 12px; font-size: max(10px, 3cqw); padding: 0 2.4cqw; }
.pin-25 .badge-label { font-size: 10px; padding: 0 8px; font-size: max(8px, 2cqw); padding: 0 1.6cqw; }

.pin-raspberry { background: radial-gradient(circle at 32% 28%, #FF5A6E, #E3032E 62%, #9E0020); }
.pin-yellow { background: radial-gradient(circle at 32% 28%, #FFE08A, var(--b-yellow) 60%, #D99A0B); }
.pin-blue { background: radial-gradient(circle at 32% 28%, #8AD8FF, var(--b-blue) 60%, #0E7DBF); }
.pin-violet { background: radial-gradient(circle at 32% 28%, #C3A6FF, var(--b-violet) 60%, #5B2ECC); }
.pin-coral { background: radial-gradient(circle at 32% 28%, #FFB49E, var(--b-coral) 60%, #D14A2B); }
.pin-green { background: radial-gradient(circle at 32% 28%, #8CF5BB, #2ECC71 58%, #0E8A44); }
.pin-teal { background: radial-gradient(circle at 32% 28%, #6FF7E2, #00C2A8 58%, #00806F); }
.pin-ink { background: radial-gradient(circle at 32% 28%, #4A5160, #22262F 62%, #0B0D12); }

/* Raw metal blank: the manufacturing side of the story */
.pin-metal {
	background:
		conic-gradient(from 210deg, var(--b-metal-2), var(--b-metal-1), #F7F9FC, var(--b-metal-2), var(--b-metal-1), var(--b-metal-2));
}

.pin-metal .badge-label {
	color: var(--steel);
}

.badge-wall .w1 { left: 4%; top: 6%; }
.badge-wall .w2 { left: 52%; top: 0; }
.badge-wall .w3 { left: 38%; top: 34%; }
.badge-wall .w4 { left: 2%; top: 52%; }
.badge-wall .w5 { left: 72%; top: 36%; }
.badge-wall .w6 { left: 30%; top: 70%; }
.badge-wall .w7 { left: 62%; top: 66%; }
.badge-wall .w8 { left: 82%; top: 12%; }

@media (prefers-reduced-motion: no-preference) {
	.badge-wall .badge-pin {
		animation: pin-float 7s ease-in-out infinite;
	}
	.badge-wall .w2, .badge-wall .w5, .badge-wall .w6 { animation-delay: -2.4s; }
	.badge-wall .w3, .badge-wall .w8 { animation-delay: -4.8s; }
	@keyframes pin-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-9px); }
	}
}

/* ---------- No-JS submit notice ---------- */

.sent-notice {
	background: #E8F8EE;
	border: 1px solid #9ADFB4;
	color: #17703A;
	border-radius: 14px;
	padding: 16px 20px;
	margin: 8px 0 24px;
	font-weight: 500;
}

/* ---------- Sections ---------- */

.section {
	padding: 66px 0;
}

.section-alt {
	background: var(--card);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 14px;
}

.eyebrow::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FF5A6E, var(--accent) 65%);
	margin-right: 10px;
	vertical-align: -1px;
}

.section h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.22;
	margin-bottom: 18px;
	max-width: 24em;
}

.section .lead {
	font-size: 18px;
	color: var(--steel);
	max-width: 40em;
	margin-bottom: 36px;
}

/* ---------- Stats ---------- */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.stat {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}

.stat .stat-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 32px);
	color: var(--accent);
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

.stat .stat-text {
	font-size: 15px;
	color: var(--steel);
}

/* ---------- Mix USP ---------- */

.mix-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.mix-demo {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
	text-align: center;
}

.mix-demo .mix-pins {
	margin-bottom: 18px;
}

.mix-demo .badge-pin {
	position: relative;
	display: inline-block;
	width: 58px;
	height: 58px;
	margin: 6px;
	vertical-align: middle;
}

.mix-demo .mix-caption {
	font-size: 15px;
	color: var(--steel);
}

.mix-demo .mix-caption b {
	color: var(--ink);
}

.check-list {
	list-style: none;
}

.check-list li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 16px;
}

.check-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent-soft);
	border: 2px solid var(--accent);
}

/* Stroked tick with round caps instead of two rotated borders: the mitred corner
   frayed at this size and the rotated box never sat on the circle's centre.
   Stroke colour repeats --accent because a data URI cannot read custom properties */
.check-list li::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 8px;
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3 5.1 8.6 9.2 3.7' fill='none' stroke='%23E3032E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ---------- Sizes ---------- */

.size-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.size-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 24px 24px;
	text-align: center;
}

.section-alt .size-card {
	background: var(--paper);
}

.size-circle-holder {
	height: 180px;
	display: grid;
	align-items: end;
	justify-items: center;
	margin-bottom: 20px;
}

.size-card .badge-pin {
	position: relative;
}

.size-56 { width: 168px; height: 168px; }
.size-38 { width: 114px; height: 114px; }
.size-25 { width: 75px; height: 75px; }

.size-card h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	margin-bottom: 8px;
}

.size-card .size-note {
	font-size: 15px;
	color: var(--steel);
}

.size-extra {
	margin-top: 22px;
	font-size: 15px;
	color: var(--steel);
	text-align: center;
}

/* ---------- Steps ---------- */

.step-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	counter-reset: step;
}

.step {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
	counter-increment: step;
}

.step::before {
	content: counter(step);
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FF5A6E, var(--accent) 65%, #9E0020);
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -4px 7px rgba(0, 0, 0, 0.2);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	text-align: center;
	line-height: 44px;
	margin-bottom: 16px;
}

.step h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.step div {
	font-size: 15px;
	color: var(--steel);
}

/* ---------- Constructor steps ---------- */

.num-list {
	list-style: none;
	counter-reset: num;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 28px 14px;
}

.num-list li {
	position: relative;
	padding-left: 56px;
	margin-bottom: 18px;
	counter-increment: num;
	font-size: 16px;
}

.num-list li::before {
	content: counter(num);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FF5A6E, var(--accent) 65%, #9E0020);
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -4px 7px rgba(0, 0, 0, 0.2);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	line-height: 38px;
}

/* ---------- Categories ---------- */

.tag-cloud {
	font-size: 0;
	max-width: 920px;
}

.tag {
	display: inline-block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 18px;
	margin: 0 10px 12px 0;
	font-size: 15px;
	color: var(--ink);
}

.section-alt .tag {
	background: var(--paper);
}

/* ---------- Delivery ---------- */

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.info-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}

.info-card h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

.info-card div {
	font-size: 15px;
	color: var(--steel);
}

/* ---------- FAQ ---------- */

.faq-list {
	max-width: 780px;
}

.faq-list details {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
}

.faq-list summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 52px 18px 22px;
	font-weight: 600;
	font-size: 17px;
	position: relative;
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

.faq-list summary::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--steel);
	border-bottom: 2px solid var(--steel);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.faq-list .faq-body {
	padding: 0 22px 20px;
	color: var(--steel);
	font-size: 16px;
}

/* ---------- Lead form ---------- */

.lead-section {
	padding: 72px 0 80px;
}

.lead-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 46px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 44px;
}

.lead-card h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 2.6vw, 30px);
	margin-bottom: 16px;
}

.lead-card .lead-note {
	color: var(--steel);
	margin-bottom: 18px;
}

.lead-contacts {
	font-size: 15px;
	color: var(--steel);
}

.lead-contacts a {
	font-weight: 500;
}

.field {
	margin-bottom: 16px;
}

.field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.field input,
.field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 13px 16px;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(227, 3, 46, 0.15);
}

.field textarea {
	min-height: 96px;
	resize: vertical;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Legal note: quietest text on the page, held at the 4.5:1 contrast floor so it stays readable */
.form-consent {
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
	margin: 4px 0 18px;
}

.form-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.form-consent a:hover {
	color: var(--ink);
}

.form-status {
	margin-top: 14px;
	font-size: 15px;
	font-weight: 500;
	display: none;
}

.form-status.is-ok {
	display: block;
	color: #1F9448;
}

.form-status.is-error {
	display: block;
	color: var(--accent-dark);
}

/* Honeypot field: hidden from humans, bots fill it in */
.hp-field {
	position: absolute;
	left: -6000px;
	top: -6000px;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--ink);
	color: #A6ADBA;
	padding: 46px 0 40px;
	font-size: 15px;
}

.site-footer .wrap {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 32px;
}

.site-footer .logo {
	color: #FFFFFF;
	display: inline-block;
	margin-bottom: 12px;
}

.site-footer h3 {
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
}

.site-footer a {
	color: #D2D7E0;
}

.site-footer a:hover {
	color: #FFFFFF;
}

.site-footer div {
	line-height: 1.7;
}

/* ---------- Reveal on scroll ---------- */
/* Scoped to html.js so content stays visible without JavaScript */

@media (prefers-reduced-motion: no-preference) {
	.js .reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}
	.js .reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
	section[id],
	div[id] {
		scroll-margin-top: 68px;
	}
	.site-header .wrap {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 12px;
		min-height: 60px;
	}
	.js .nav-toggle {
		display: block;
	}
	/* Collapsed nav becomes a panel under the header, positioned against .site-header
	   rather than its grid area so it spans the full width */
	.js .main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: 6px 24px 14px;
		background: var(--card);
		border-bottom: 1px solid var(--line);
		text-align: left;
		max-height: calc(100vh - 60px);
		max-height: calc(100dvh - 60px);
		overflow-y: auto;
	}
	.js .main-nav.is-open {
		display: block;
	}
	.js .main-nav a {
		display: block;
		margin: 0;
		padding: 13px 0;
		font-size: 17px;
		color: var(--ink);
		border-bottom: 1px solid var(--line);
	}
	.js .main-nav a:last-child {
		border-bottom: 0;
	}
	/* Without JS there is no toggle, so the links wrap into a row under the logo.
	   That header is too tall to keep pinned on a phone screen */
	html:not(.js) .site-header {
		position: static;
	}
	html:not(.js) .main-nav {
		grid-column: 1 / -1;
		text-align: left;
		padding-bottom: 10px;
	}
	html:not(.js) .main-nav a {
		margin: 0 18px 0 0;
		padding: 6px 0;
	}
	.hero {
		padding: 44px 0 32px;
	}
	.stat-grid,
	.step-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.mix-grid,
	.lead-card {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.site-footer .wrap {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

/* Narrow tablets: the badges shrink together so three equal cards still fit one row.
   Diameters stay proportional (2.2 px per millimetre) — the section claims true scale */
@media (min-width: 621px) and (max-width: 759px) {
	.size-card {
		padding: 22px 16px 20px;
	}
	.size-circle-holder {
		height: 132px;
	}
	.size-56 { width: 123px; height: 123px; }
	.size-38 { width: 84px; height: 84px; }
	.size-25 { width: 55px; height: 55px; }
}

/* Tablets keep the side-by-side hero; below this the text column gets too narrow for the headline */
@media (max-width: 760px) {
	.hero .wrap {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.badge-wall {
		max-width: 460px;
		margin: 0 auto;
	}
}

@media (max-width: 620px) {
	body {
		font-size: 16px;
	}
	.wrap {
		padding: 0 18px;
	}
	.section {
		padding: 44px 0;
	}
	.section h2 {
		font-size: 22px;
		line-height: 1.24;
	}
	.section .lead {
		font-size: 16px;
		margin-bottom: 26px;
	}
	.eyebrow {
		font-size: 12px;
		margin-bottom: 10px;
	}
	.js .main-nav {
		padding: 6px 18px 14px;
	}

	.logo {
		font-size: 18px;
	}
	.header-cta {
		padding: 9px 16px;
		font-size: 14px;
	}
	.nav-toggle {
		width: 42px;
		height: 42px;
	}

	/* Hero */
	.hero {
		padding: 32px 0 24px;
	}
	.hero h1 {
		font-size: 28px;
		line-height: 1.15;
		margin: 12px 0 16px;
	}
	.hero-sub {
		font-size: 17px;
		margin-bottom: 24px;
	}
	.hero-cta {
		margin-bottom: 26px;
	}
	.hero-cta .btn {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}
	.chip {
		padding: 7px 13px;
		margin: 0 8px 8px 0;
		font-size: 13px;
	}

	/* Stats stay two-up: four full-width cards was a screen and a half of scrolling */
	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.stat {
		padding: 18px 16px;
	}
	.stat .stat-num {
		font-size: 21px;
	}
	.stat .stat-text {
		font-size: 13.5px;
		line-height: 1.45;
	}

	.check-list li {
		padding-left: 32px;
	}
	.mix-demo {
		padding: 22px 18px;
	}
	.mix-demo .badge-pin {
		width: 54px;
		height: 54px;
		margin: 5px;
	}

	/* Sizes: cards turn into rows with a shared badge column, so the three
	   diameters can still be compared against each other on one screen */
	.size-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.size-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 4px;
		align-content: center;
		text-align: left;
		padding: 18px;
	}
	.size-circle-holder {
		grid-row: 1 / span 2;
		align-self: center;
		height: auto;
		align-items: center;
		margin-bottom: 0;
	}
	.size-card h3,
	.size-card .size-note {
		grid-column: 2;
	}
	.size-card h3 {
		align-self: end;
	}
	.size-56 { width: 112px; height: 112px; }
	.size-38 { width: 76px; height: 76px; }
	.size-25 { width: 50px; height: 50px; }
	.size-card h3 {
		font-size: 19px;
		margin-bottom: 6px;
	}
	.size-card .size-note {
		font-size: 14.5px;
		line-height: 1.45;
	}
	.size-extra {
		margin-top: 18px;
		text-align: left;
	}

	/* Steps: number sits beside its title, description runs the full card width */
	.step-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.step {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 8px;
		padding: 20px 18px;
	}
	.step::before {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		margin-bottom: 0;
	}
	.step h3 {
		align-self: center;
		margin-bottom: 0;
		font-size: 17px;
	}
	.step div {
		grid-column: 1 / -1;
	}

	.num-list {
		padding: 22px 20px 8px;
	}
	.num-list li {
		padding-left: 48px;
		font-size: 15.5px;
	}
	.num-list li::before {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 14px;
	}

	.tag {
		padding: 8px 14px;
		margin: 0 8px 10px 0;
		font-size: 14px;
	}

	.info-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.info-card {
		padding: 20px 18px;
	}
	.info-card h3 {
		font-size: 17px;
	}

	.faq-list summary {
		padding: 15px 46px 15px 18px;
		font-size: 16px;
	}
	.faq-list .faq-body {
		padding: 0 18px 17px;
		font-size: 15px;
	}

	/* Lead form */
	.lead-section {
		padding: 44px 0 52px;
	}
	.lead-card {
		padding: 26px 20px;
		gap: 24px;
	}
	.lead-card h2 {
		font-size: 22px;
		line-height: 1.24;
	}
	.field-row {
		grid-template-columns: 1fr;
	}
	#lead-form .btn {
		display: block;
		width: 100%;
	}

	.site-footer {
		padding: 36px 0 32px;
	}
	.site-footer .wrap {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.site-footer a {
		display: inline-block;
		padding: 6px 0;
	}
}

/* Narrowest phones: logo + full CTA + toggle stop fitting on one line */
@media (max-width: 380px) {
	.header-cta .cta-full {
		display: none;
	}
	.header-cta .cta-short {
		display: inline;
	}
	.hero h1 {
		font-size: 26px;
	}
	.size-card {
		grid-template-columns: 96px minmax(0, 1fr);
	}
	.size-56 { width: 96px; height: 96px; }
	.size-38 { width: 65px; height: 65px; }
	.size-25 { width: 43px; height: 43px; }
}

/* Short landscape screens (phones turned sideways): trim vertical rhythm so
   the hero still says something above the fold */
@media (orientation: landscape) and (max-height: 520px) {
	section[id],
	div[id] {
		scroll-margin-top: 60px;
	}
	.site-header .wrap {
		min-height: 52px;
	}
	.js .main-nav {
		max-height: calc(100vh - 52px);
		max-height: calc(100dvh - 52px);
	}
	.js .main-nav a {
		padding: 10px 0;
	}
	.hero {
		padding: 26px 0 20px;
	}
	.hero-sub {
		margin-bottom: 20px;
	}
	.hero-cta {
		margin-bottom: 20px;
	}
	.section {
		padding: 38px 0;
	}
	.lead-section {
		padding: 38px 0 44px;
	}
	.badge-wall {
		max-width: 360px;
	}
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 621px) {
	.hero-cta .btn {
		display: inline-block;
		width: auto;
		margin: 0 12px 10px 0;
	}
}

/* Wide-but-short screens have the width for the two-column hero the phone portrait cannot afford */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 760px) {
	.hero .wrap {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 28px;
	}
	.badge-wall {
		max-width: 300px;
	}
}