/* Inter 3.19 in Fontsource subsets (cyrillic, latin), like Manrope below: the full files weighed ~110 KB a weight. */
@font-face {
	font-family: Inter;
	src: url("../fonts/inter-cyrillic-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-cyrillic-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-cyrillic-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-cyrillic-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-cyrillic-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-latin-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ₽ and ≈ in the price and ✓ in «Заявка принята» are in neither subset: 1.4 KB cuts of just these glyphs (Google Fonts, text=). */
@font-face {
	font-family: Inter;
	src: url("../fonts/inter-symbols-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20BD, U+2248, U+2713;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-symbols-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20BD, U+2248, U+2713;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-symbols-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20BD, U+2248, U+2713;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-symbols-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20BD, U+2248, U+2713;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-symbols-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+20BD, U+2248, U+2713;
}

@font-face {
	font-family: Manrope;
	src: url("../fonts/manrope-cyrillic-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Manrope;
	src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Manrope;
	src: url("../fonts/manrope-cyrillic-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: Manrope;
	src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--green: #17b34f;
	--green-dark: #078338;
	--ink: #162024;
	--muted: #65736c;
	--line: #dde6df;
	--paper: #f6f9f6;
	--pale: #e9f7ee;
	--chip-line: #a5ddb8;
	--note: #e9f3ec;
	--deep: #162c21;
	--video: #173527;
	--mint: #80d59d;
	--mint-2: #71d797;
	--track: #d8e4db;
	--mist: #bcd2c3;
	--video-kicker: #9ec7ab;
	--shadow: 0 12px 40px #163a2110;
	--header: 100px;
	--container: 1280px;
	/* The step header and the step bodies share one column. */
	--flow-width: 1200px;
	--pad: 80px;
	--font: Inter, sans-serif;
	--display: Manrope, Inter, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Anchors land below the sticky header; --header follows its real height at every width.
   The gutter stays when a dialog locks the scroll (overflow: hidden on body), so a classic scrollbar does not take
   15px back from the page and nothing under the dialog, fixed Jivo included, moves sideways. */
html {
	scroll-padding-top: var(--header);
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	color: var(--ink);
	background: #fff;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
}

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

button,
input {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

/* The hidden attribute always wins over the display of a component rule, in our own DOM only: Jivo appends its
   widget to body outside .view and .modal and may show its nodes by inline style. */
.view[hidden],
.view [hidden],
.modal[hidden],
.modal [hidden] {
	display: none !important;
}

/* Keyboard focus is visible everywhere; the amount and term fields have no outline of their own and get it on the frame around them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.amount:focus-within,
.term-head label:focus-within {
	outline: 2px solid var(--green-dark);
	outline-offset: 2px;
}

/* On the dark result, video and video dialog the dark green ring would not show. */
.result :focus-visible,
.video :focus-visible,
.modal__close--video:focus-visible {
	outline-color: var(--mint);
}

/* Sections keep the full-width background; content sits in one 1280px column with --pad side margins. */
.wrap {
	width: min(var(--container), 100% - 2 * var(--pad));
	margin-inline: auto;
}

.icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: block;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 54px;
	padding: 16px 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--green);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.btn .icon {
	width: 18px;
	height: 18px;
}

.btn--wide {
	width: 100%;
}

.btn--ghost {
	background: #fff;
	border-color: var(--line);
}

.btn--map {
	background: #ddf3e5;
	border-color: #bfe3cc;
}

.btn--tall {
	height: 68px;
	padding: 20px 26px;
	font-size: 16px;
	width: 334px;
	max-width: 100%;
}

.btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.btn--plain .icon {
	display: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--header);
	display: flex;
	align-items: center;
	padding: 12px 0;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.site-header > .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.logo {
	flex: none;
}

.logo img {
	display: block;
	width: 200px;
	height: auto;
}

.nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav a {
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 22px;
}

.header-phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink);
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.header-auth {
	display: flex;
	align-items: center;
	gap: 10px;
}

.burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
}

.burger .icon {
	width: 24px;
	height: 24px;
	margin: auto;
}

.drawer {
	display: none;
}

/* Mobile-only pictures (frame 02): the hero peek and the mascots by the section titles. */
.hero__peek,
.section-head__mascot {
	display: none;
}

/* The picture only swaps the peek for an empty gif from 760px, so a hidden peek is not downloaded; the img stays the
   hero's own box. The source takes no grid cell of the hero either: browsers do not hide it by themselves. */
.hero__peek-picture {
	display: contents;
}

.hero__peek-picture > source {
	display: none;
}

.hero {
	padding: 32px 0;
	background: var(--paper);
}

.hero > .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 72px;
}

.hero__copy {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-top: 16px;
}

.hero__copy > * {
	margin: 0;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	/* Frame 01 draws the border inside its 8/12 padding: 32px tall, the 16px icon sets the line. */
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1px;
}

.badge .icon {
	width: 16px;
	height: 16px;
	color: var(--green-dark);
}

h1 {
	font-family: var(--display);
	font-size: 52px;
	font-weight: 800;
	/* Frame 01: 1.12 rounded to whole 58px lines, so the column below stays on the frame's grid. */
	line-height: 58px;
	letter-spacing: -1.6px;
}

h1 > span {
	display: block;
	margin-top: 8px;
	color: var(--green-dark);
}

.lede {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
}

.stats {
	display: flex;
	gap: 24px;
	/* 19 + the 1px rule = the frame's 20; lines of 37 and 20 give its 104px block. */
	padding: 19px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.stats strong {
	display: block;
	font-family: var(--display);
	font-size: 34px;
	font-weight: 800;
	line-height: 37px;
	color: var(--green-dark);
}

.stats span {
	display: block;
	margin-top: 7px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.mascot-note {
	display: flex;
	align-items: center;
	gap: 22px;
	height: 172px;
	padding-right: 24px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--note);
}

/* Frame 224x172 shows the mascot to the waist: the picture is taller than the frame and shifted like in frame 01. */
.mascot-note__photo {
	width: 224px;
	height: 172px;
	flex: none;
	overflow: hidden;
}

.mascot-note__photo img {
	width: 207px;
	height: 240px;
	margin: -14px 0 0 8px;
	object-fit: contain;
}

.mascot-note p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

.laws {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 4px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

.laws__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
}

.laws span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.laws span:not(.laws__label) {
	color: var(--ink);
}

.laws .icon {
	width: 13px;
	height: 13px;
	color: var(--green-dark);
}

.calc {
	/* Frame 01: the card ends at its own content (745), not at the copy column. */
	align-self: start;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--shadow);
}

.calc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.calc__head h2 {
	margin: 0;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 800;
	line-height: 29px;
	letter-spacing: 0;
}

.calc__head .icon {
	width: 22px;
	height: 22px;
	color: var(--green-dark);
}

.seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: var(--paper);
}

/* Frame 01: 33px chips (the border inside their 8/12 padding); ::before makes the 44px tap zone without moving the layout. */
.seg button,
.chips button {
	position: relative;
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

.seg button::before,
.chips button::before {
	content: "";
	position: absolute;
	inset: -6.5px -1px;
}

/* 50px kind chips below 760 need no zone. Above it, two rows 7px apart split the gap; more rows go 11px apart. */
.chips[data-kinds] button::before {
	content: none;
}

@media (min-width: 760px) {
	.chips[data-kinds] button::before {
		content: "";
	}

	.chips[data-kinds][data-rows="few"] button:nth-child(-n + 2)::before {
		top: -8.5px;
		bottom: -4.5px;
	}

	.chips[data-kinds][data-rows="few"] button:nth-child(n + 3)::before {
		top: -4.5px;
		bottom: -8.5px;
	}

	.chips[data-kinds][data-rows="many"] {
		row-gap: 11px;
	}
}

.seg button {
	flex: 1;
}

.seg button[aria-pressed="true"],
.chips button[aria-pressed="true"] {
	border-color: var(--chip-line);
	background: var(--pale);
	color: var(--green-dark);
	font-weight: 600;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 13px;
}

.field > span,
.field > label,
.field legend {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}

/* Frame 01 sets the calculator captions on a 17px line; the lead dialog's .field labels keep their own. */
.calc .field > span:not(.hint),
.calc .field > label {
	line-height: 17px;
}

.field > .hint {
	margin: 0;
	color: #b42318;
	font-size: 13px;
	font-weight: 400;
}

.chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 6px;
}

.chips[data-laws] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chips button:disabled {
	opacity: 0.55;
	cursor: default;
}

.amount {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
}

.amount input {
	width: 100%;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 19px;
	font-weight: 600;
	outline: none;
}

.amount input:focus-visible,
.term-head input:focus-visible {
	outline: none;
}

.amount em {
	color: var(--muted);
	font-style: normal;
	font-size: 16px;
}

/* The slider takes its 18px slot and 13px above it (under the amount field), so the whole thumb drags at every stop;
   the padding keeps the track centred on the slot. Tap zones: docs/lp-scoring.md, «Tap targets». */
.range {
	width: 100%;
	height: 31px;
	margin: -13px 0 0;
	padding: 13px 0 0;
	appearance: none;
	background: transparent;
}

.range::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--green) var(--fill, 25%), var(--track) var(--fill, 25%));
}

.range::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: -6.5px;
	appearance: none;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 1px var(--green);
}

.range::-moz-range-track {
	height: 3px;
	border: 0;
	border-radius: 3px;
	background: var(--track);
}

.range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 1px var(--green);
}

.range::-moz-range-progress {
	height: 3px;
	background: var(--green);
}

.ticks {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

/* A stop's zone is 44 wide but only 35 tall, between the slider and the term row; the margins keep the labels in place.
   «0» reaches mostly left, past the card padding, so it never meets «1 млн» on 320. Why 35: docs/lp-scoring.md. */
.ticks button {
	position: relative;
	margin: -7px -6px -13px;
	padding: 7px 6px 13px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.ticks button:first-child {
	min-width: 44px;
	margin-inline: -26px -10px;
	padding-inline: 26px 10px;
}

.term-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 17px;
}

.term-head > span {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}

.term-head label {
	border-radius: 4px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

/* The term field is as wide as its number, so «365 дней» reads as one phrase; 5ch holds 1825. Its 44px zone runs down
   from its row to the term slider (the amount stops' zones are above); the padding keeps the number on the row. */
.term-head input {
	position: relative;
	width: 5ch;
	min-width: 44px;
	height: 44px;
	margin: 0 0 -27px;
	padding: 0 0 27px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	outline: none;
}

@supports (field-sizing: content) {
	.term-head input {
		width: auto;
		field-sizing: content;
	}
}

/* The term slider's 18px slot starts where the term field's zone ends (27px under its row), so neither takes the other's
   taps; the field paints over the slider's top padding. */
.term-head + .range {
	margin-top: 7px;
}

/* When the note's longest word and the price do not fit one line (about 320 with «По запросу»), the price drops below the
   note instead of running out of the plate. */
.price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 13px;
	padding: 16px;
	border-radius: 10px;
	background: var(--pale);
}

.price p {
	flex: 1 1 0;
	margin: 0;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
}

.price strong {
	font-family: var(--display);
	font-size: 27px;
	font-weight: 800;
	line-height: 37px;
	color: var(--green-dark);
	white-space: nowrap;
}

.price s {
	color: var(--muted);
	font-weight: 500;
}

.calc .btn,
.calc .fine {
	margin-top: 13px;
}

.calc-down p {
	margin: 16px 0 0;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}

.fine {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.section {
	padding: 32px 0;
}

.kicker {
	margin: 0;
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
}

h2,
.h2 {
	margin: 12px 0 0;
	font-family: var(--display);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -1px;
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 100px;
}

.section-head__text {
	max-width: 370px;
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.section-head__text--wide {
	max-width: 420px;
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 24px;
}

.step {
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--green-dark);
}

.step__top span {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}

.step__top .icon {
	width: 26px;
	height: 26px;
}

.step h3 {
	margin: 16px 0 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.5px;
}

.step p {
	margin: 16px 0 0;
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
}

.result {
	padding: 36px 0;
	background: var(--deep);
	color: #fff;
}

/* Own stacking context: the peeking mascot (z-index -1) stays above the dark band but under the card. */
.result > .wrap {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 530px;
	gap: 100px;
	align-items: center;
}

.result .kicker {
	color: var(--mint);
}

.result .h2 {
	color: #fff;
}

.result__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.result__copy > * {
	margin: 0;
}

.result__copy > .btn {
	align-self: flex-start;
}

.result__text {
	width: min(440px, 100%);
	color: var(--mist);
	font-size: 16px;
	line-height: 1.55;
}

.result__points {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: min(440px, 100%);
	padding: 0;
	list-style: none;
}

.result__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
}

.result__points .icon {
	width: 18px;
	height: 18px;
	color: var(--mint-2);
}

.preview {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: 18px;
	background: #fff;
	color: var(--ink);
}

.preview::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -255px;
	top: 50%;
	width: 320px;
	height: 320px;
	transform: translateY(-50%);
	background: url("../img/peek-v2.webp") center / contain no-repeat;
	pointer-events: none;
}

.preview__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}

.pill {
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--pale);
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 600;
}

.preview > * {
	margin: 0;
}

.preview h3 {
	font-family: var(--display);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.6px;
}

.offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.offer__bank {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* The sample card bank logos. */
.offer img {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	object-fit: contain;
	background: var(--paper);
}

.offer strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.offer em {
	display: block;
	margin-top: 5px;
	color: var(--muted);
	font-style: normal;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
}

.offer .icon {
	width: 20px;
	height: 20px;
	color: var(--green-dark);
}

.preview .fine,
.flow .fine {
	text-align: left;
}

.preview .fine {
	line-height: 1.55;
}

.banks-head {
	padding: 36px 0;
}

.banks-head h2 {
	font-size: 40px;
}

.bank-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.bank-grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 12px 8px;
	border-radius: 10px;
	background: var(--paper);
}

.bank-grid img {
	width: 112px;
	height: 42px;
	object-fit: contain;
}

.bank-grid__name {
	max-width: 100%;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: break-word;
	hyphens: auto;
}

.banks-note {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
}

.about,
.office {
	background: var(--paper);
}

/* The mascot frame by the map button reaches past the viewport edge at 1440 (frame 01 clips it the same way). */
.office {
	overflow-x: clip;
}

.office__copy {
	container-type: inline-size;
}

.about > .wrap,
.office > .wrap,
.cta-band > .wrap {
	display: grid;
	gap: 72px;
	align-items: center;
}

/* At 1440 the cover is 730 and the photo 610 as in frame 01; on 1101-1439 they shrink first, the text keeps 360. */
.about > .wrap {
	grid-template-columns: minmax(360px, 1fr) minmax(0, 730px);
}

.office > .wrap {
	grid-template-columns: minmax(0, 610px) minmax(360px, 1fr);
}

.about__copy,
.office__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cta-band__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.about__copy > *,
.office__copy > *,
.cta-band__copy > * {
	margin: 0;
}

.about h2,
.office h2,
.cta-band h2 {
	font-size: 38px;
}

.section-text {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.video {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 380px;
	padding: 36px;
	border: 0;
	border-radius: 18px;
	background: var(--video);
	color: #fff;
	text-align: left;
}

.video__kicker {
	margin: 0;
	color: var(--video-kicker);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
}

.video__title {
	margin: 20px 0;
	color: #fff;
	font-size: 30px;
}

.video__play {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 0;
	border-radius: 24px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.15s ease-out;
}

/* The whole cover is the button's click and tap zone: one Tab stop, one video_open; the focus ring stays on the pill. */
.video__play::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (hover: hover) {
	.video:hover .video__play {
		background: var(--pale);
	}
}

.video__play .icon {
	width: 18px;
	height: 18px;
	color: var(--green-dark);
}

/* On 1101-1199 the cover is narrower than 730: the picture shrinks, the text keeps its width. */
.video > div {
	flex: none;
}

.video img {
	width: 369px;
	min-width: 0;
	height: 302px;
	object-fit: contain;
}

/* The 2.4:1 scene fills a 1.6:1 slot at 1440 and 1.2:1 at 320: 38% keeps both the mascot and the tower in frame. */
.office img.tower {
	width: 100%;
	height: 380px;
	object-fit: cover;
	object-position: 38% 50%;
	border-radius: 16px;
}

.pin {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

.pin .icon {
	width: 18px;
	height: 18px;
	color: var(--green-dark);
}

.office-actions {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-height: 200px;
}

/* Frame 01 places the mascot frame at (274, -79) from the button block. */
.office-actions .mascot {
	display: none;
	position: absolute;
	left: 274px;
	top: -79px;
	width: 423px;
	max-width: none;
	height: 293px;
	object-fit: contain;
	pointer-events: none;
}

/* Visible square 293 sits centred in the 423 frame: 274 + 65 + 293 = 632 must fit column + 80 side pad, so column >= 552. */
@container (min-width: 552px) {
	.office-actions .mascot {
		display: block;
	}
}

.cta-band {
	background: var(--pale);
}

.cta-band > .wrap {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
}

.faq__info {
	margin-top: 48px;
	padding: 8px 0 28px;
	color: var(--green-dark);
}

.faq__info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq__content {
	display: flex;
	align-items: flex-start;
}

.faq__item {
	margin-right: 72px;
}

.faq__item:last-child {
	margin-right: 0;
}

.faq__item p {
	margin: 0 0 16px;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 14px;
}

.faq__item a,
.faq__link {
	color: var(--green-dark);
	font-size: 18px;
	font-weight: 600;
	line-height: 14px;
}

.faq__item a:hover,
.faq__link:hover {
	color: #000;
}

.faq__item-link,
.faq__link {
	display: flex;
	align-items: center;
}

/* 44px targets; the negative margins keep the rows where the 14px and 24px lines put them. */
.faq__item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -15px;
}

.faq__link {
	min-height: 44px;
	margin-block: -10px;
}

.faq__email-icon,
.faq__link .telegram-icon,
.faq__link .max-icon,
.faq__link .phone-icon {
	width: 24px;
	height: 24px;
	color: var(--green-dark);
}

.faq__link-icon-wrapper:hover .faq__email-icon,
.faq__link:hover .telegram-icon,
.faq__link:hover .max-icon,
.faq__link:hover .phone-icon {
	color: #000;
}

.faq__messengers {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.faq__link-icon-wrapper {
	position: relative;
	display: inline-flex;
	margin-right: 13px;
}

.faq__link-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 10;
	margin-bottom: 8px;
	padding: 8px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity 0.2s ease 0.15s, visibility 0.2s ease 0.15s;
}

.faq__link-icon-wrapper:hover .faq__link-tooltip {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.faq__link-tooltip-qr {
	position: relative;
	display: block;
	line-height: 0;
}

.faq__link-tooltip-qr > img {
	display: block;
	width: 120px;
	height: 120px;
	max-width: none;
}

.faq__link-tooltip-qr-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	transform: translate(-50%, -50%);
	color: var(--green-dark);
}

.faq__link-tooltip-qr-icon svg {
	width: 22px;
	height: 22px;
}

.footer {
	padding: 33px 0;
}

.footer__box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.footer__brand {
	width: 360px;
	flex-shrink: 0;
}

.footer__logo {
	display: block;
	width: 200px;
	height: auto;
}

.footer__brand-text {
	width: 360px;
	max-width: 100%;
	margin: 20px 0 0;
	color: #898989;
	font-size: 13px;
	font-weight: 400;
	line-height: 20.15px;
}

.footer__content {
	width: 100%;
	max-width: 66%;
}

.footer__content p {
	margin: 0 0 18px;
	color: #898989;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.footer__content p:last-child {
	margin-bottom: 0;
}

.footer__content a {
	color: #7341dc;
}

.footer__content a:hover {
	color: #000;
}

/* Both buttons that reopen the cookie settings are plain text buttons. */
.footer__prefs,
.flow-prefs {
	border: 0;
	background: none;
	font: inherit;
}

/* Reopens the cookie settings after the banner is gone; looks like the links of the paragraph. */
.footer__prefs {
	display: inline;
	margin-left: 4px;
	padding: 0;
	color: #7341dc;
}

.footer__prefs:hover {
	color: #000;
}

/* The calculator views have no footer: the same settings button ends each view, centred and quiet. */
.flow-prefs {
	display: block;
	min-height: 44px;
	margin: 0 auto 16px;
	padding: 0 16px;
	color: var(--muted);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.flow-prefs:hover {
	color: var(--green-dark);
}

@media (max-width: 991px) {
	.faq__info-row,
	.faq__content {
		flex-direction: column;
		align-items: flex-start;
	}

	.faq__item {
		margin-right: 0;
		margin-bottom: 24px;
	}

	.faq__messengers {
		margin-top: 8px;
	}

	.footer__box {
		flex-direction: column;
		align-items: center;
	}

	.footer__brand {
		width: 100%;
		text-align: center;
	}

	.footer__logo {
		margin-inline: auto;
	}

	.footer__brand-text {
		width: min(360px, 100%);
		margin-inline: auto;
	}

	.footer__content {
		max-width: 100%;
		margin-top: 50px;
	}
}

.flow {
	min-height: 100vh;
	background: var(--paper);
}

.flow-header {
	display: flex;
	align-items: center;
	height: 92px;
	padding: 12px 0;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

/* Lines the step header up with the step body below it. */
.flow-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: var(--flow-width);
	margin-inline: auto;
	padding-inline: 50px;
}

/* The logo link stays a 44px touch target when the mobile logo is shorter than that. */
.flow-header .logo {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.flow-header .logo img {
	width: 130px;
}

.flow-steps {
	display: flex;
	gap: 20px;
	color: var(--muted);
	font-size: 12px;
}

.flow-steps [aria-current="step"] {
	color: var(--green-dark);
	font-weight: 600;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
}

.icon-btn .icon {
	width: 22px;
	height: 22px;
}

.flow-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 500px;
	gap: 80px;
	align-items: start;
	max-width: var(--flow-width);
	margin: 0 auto;
	padding: 56px 64px;
}

.flow-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.flow-kicker {
	margin: 0;
	color: var(--green-dark);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.4px;
}

.flow h2 {
	margin: 0;
	font-family: var(--display);
	font-size: 37px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -1px;
}

.flow .intro {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.flow-mascot {
	width: 200px;
	height: 200px;
	object-fit: contain;
}

/* The card is one stack: its gap is the only space between fields, so no child keeps a margin of its own. */
.card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
}

.card h3 {
	font-family: var(--display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.5px;
}

.card label:not(.consent) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.card input[type="text"],
.card input[type="tel"] {
	height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	font-size: 16px;
	font-weight: 400;
	outline: none;
}

.card input::placeholder {
	color: #87968d;
	opacity: 1;
}

.card input[aria-invalid="true"] {
	border-color: #b42318;
}

/* After the field rules above, which drop the outline. */
.card input:focus-visible {
	border-color: var(--green-dark);
	outline: 2px solid var(--green-dark);
	outline-offset: 0;
}

.hint,
.status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.hint {
	color: #b42318;
}

/* The label's gap already spaces the hint from the field; an empty hint takes no gap. */
.card label > .hint {
	margin: 0;
}

.card label > .hint:empty {
	display: none;
}

.status {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--pale);
	color: var(--ink);
}

.status--error {
	border-color: #f4c7c3;
	background: #fef3f2;
	color: #b42318;
}

/* Lookup statuses stay rendered as live regions; an empty one takes no room. Not display: none, which would drop the
   live region from the accessibility tree. */
.status:empty {
	padding: 0;
	margin: 0;
	border: 0;
}

.status__title,
.status__meta {
	display: block;
	overflow-wrap: anywhere;
}

.status__title {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

.status__meta {
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}

.summary-chip {
	padding: 14px;
	border-radius: 8px;
	background: var(--pale);
	color: var(--green-dark);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}

.summary-chip span {
	display: block;
}

.card .fine {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.55;
}

.step2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 50px;
	align-items: start;
	max-width: var(--flow-width);
	margin: 0 auto;
	padding: 40px 50px 56px;
}

.step2__main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.step2 .flow-kicker {
	font-size: 10px;
	letter-spacing: 1.1px;
}

.step2 h2 {
	font-size: 36px;
}

.step2__main > .intro {
	font-size: 13px;
}

/* The step 2 summary and the step 3 report card: rows of a check icon, a label and a value. */
.checklist {
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	list-style: none;
}

.checklist__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.checklist__row:first-child {
	border-top: 0;
}

.checklist__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pale);
	color: var(--green-dark);
}

.checklist__icon .icon {
	width: 14px;
	height: 14px;
}

.checklist__label {
	flex: none;
	width: 150px;
	color: var(--muted);
	font-size: 13px;
}

.checklist__value {
	min-width: 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* The last row sits on --pale edge to edge, its icon on green; the radius is the card's inside the 1px border. */
.checklist__row--total {
	margin: 0 -18px;
	padding: 16px 18px;
	border-radius: 0 0 11px 11px;
	background: var(--pale);
}

.checklist__row--total .checklist__icon {
	background: var(--green);
	color: #fff;
}

.checklist__value--total {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

/* No bank fits: the total row is grey with an outlined «i», never red: it is not a refusal yet. */
.checklist__row--empty {
	background: var(--note);
}

/* The «none of M» line is longer than the matched one and sits a size smaller. */
.checklist__row--empty .checklist__value--total {
	font-size: 22px;
}

.checklist__row--empty .checklist__icon {
	border: 1.5px solid var(--muted);
	background: none;
	color: var(--muted);
}

.step2__edit {
	gap: 6px;
	align-self: flex-start;
	margin-top: 0;
}

.step2__edit .icon {
	width: 18px;
	height: 18px;
}

.step2__mascot {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

/* The call comes first in the empty branch; «или перезвоним сами» sits between two hairlines above the form. */
.step2__call {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.step2__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.step2__or::before,
.step2__or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--line);
}

/* A touch target of 44 at every width: steps 1-2 are the calculator. */
.more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 600;
}

.more:disabled {
	color: var(--muted);
	opacity: 0.55;
	cursor: default;
}

.step2 .card {
	gap: 20px;
	padding: 26px;
	border-radius: 16px;
}

.step2 .card h3 {
	font-size: 25px;
	letter-spacing: -0.6px;
}

.step2 .card .intro {
	font-size: 12px;
}

.step2 .card .fine {
	font-size: 10px;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}

/* 16px box centred on the first 18.6px line of the text. */
.consent input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--green);
}

.consent a {
	text-decoration: underline;
}

.done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: calc(100vh - 92px);
	padding: 30px 60px 50px;
	text-align: center;
}

.done > * {
	margin: 0;
}

.done img {
	width: 170px;
	height: 170px;
	object-fit: contain;
}

.done h2 {
	font-family: var(--display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -1px;
}

.done p {
	max-width: 520px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.done .checklist {
	width: 100%;
	max-width: 520px;
	text-align: left;
}

.done .fine {
	font-size: 11px;
	font-weight: 400;
}

.alert {
	margin: 12px 0 0;
	color: #b42318;
	font-size: 14px;
}

.alert > .more,
.alert > span {
	margin: 0 0 0 8px;
}

/* In a status «Повторить» takes its own line under the text, so it never overlaps it when the text wraps; the bottom
   margin gives the plaque's padding back. */
.status > .more {
	display: flex;
	width: fit-content;
	margin: 0 0 -12px;
}

.alert > .more {
	vertical-align: middle;
}

.alert a {
	font-weight: 600;
	text-decoration: underline;
}

/* Last: .status and .alert above set margins of their own. */
.card > *,
[data-step1-body] > * {
	margin: 0;
}

/* The step 1 form keeps the card's flex gaps: its wrapper exists only to swap it for «Калькулятор временно недоступен». */
[data-step1-body] {
	display: contents;
}

.card .calc-down {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.card .calc-down p {
	margin: 0;
}

@media (max-width: 1100px) {
	:root {
		--pad: 32px;
	}

	.hero > .wrap,
	.result > .wrap,
	.about > .wrap,
	.office > .wrap,
	.cta-band > .wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.flow-header__inner,
	.flow-body,
	.step2 {
		padding-inline: var(--pad);
	}

	/* One column: the container query alone would show the mascot over the text above the buttons. */
	.preview::before,
	.office-actions .mascot {
		display: none;
	}

	.video img {
		width: 180px;
		height: 180px;
	}

	/* One column, no frame here: the calculator keeps its desktop width at the left edge, the CTA button its text width. */
	.hero .calc {
		width: 100%;
		max-width: 520px;
		justify-self: start;
	}

	.cta-band .btn {
		justify-self: start;
	}

	.office-actions {
		min-height: 0;
	}

	/* Below 16px iOS zooms into a focused field; the term label follows its number so «365 дней» stays one phrase. */
	.term-head label,
	.term-head input {
		font-size: 16px;
	}

	.bank-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.nav {
		display: none;
	}

	.header-auth {
		display: none;
	}

	.burger,
	.drawer.is-open {
		display: block;
	}

	/* A landscape phone is shorter than header plus menu (844x390: 100 + 381): the menu scrolls inside, so «Вход» is reachable. */
	.drawer {
		position: sticky;
		top: var(--header);
		z-index: 29;
		max-height: calc(100vh - var(--header));
		max-height: calc(100dvh - var(--header));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px var(--pad) 20px;
		background: #fff;
		border-bottom: 1px solid var(--line);
	}

	.drawer a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.drawer .btn {
		margin-top: 12px;
	}
}

@media (max-width: 759px) {
	:root {
		--header: 82px;
		--pad: 20px;
	}

	/* Header switches to 06-pbg-compact (same ratio as the old raster logo) */
	.logo img {
		width: 122px;
	}

	.flow-header .logo img {
		width: 108px;
	}

	/* Frame 02 spreads logo, phone and menu icon evenly; the burger's 44px box gives its 10px sides back, so the icon is the
	   24px item that space-between places, flush with the content edge. */
	.site-header > .wrap {
		gap: 8px;
	}

	.header-tools {
		display: contents;
	}

	.burger {
		flex: none;
		margin-inline: -10px;
	}

	.header-phone {
		font-size: 15px;
	}

	.hero > .wrap > *,
	.result > .wrap > *,
	.about > .wrap > *,
	.office > .wrap > *,
	.cta-band > .wrap > * {
		min-width: 0;
	}

	h1,
	.h2,
	h2,
	.lede {
		overflow-wrap: anywhere;
	}

	.kicker {
		font-size: 12px;
		letter-spacing: 1px;
	}

	.section-head__text,
	.result__text,
	.section-text {
		font-size: 15px;
		font-weight: 500;
	}

	/* Frame 02 order: badge, h1, lede, stats, calculator, note. The copy column dissolves into the hero grid; the note and
	   the law list hold no focusable element, so Tab still follows what the visitor sees. */
	.hero {
		position: relative;
		/* hidden first: Safari before 16 ignores clip and would let the peek widen the page. */
		overflow: hidden;
		overflow: clip;
		padding: 24px 0;
	}

	.hero > .wrap {
		gap: 22px;
	}

	.hero__copy {
		display: contents;
	}

	.badge {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--green-dark);
		letter-spacing: 0.8px;
	}

	.badge .icon {
		display: none;
	}

	h1 {
		font-size: 35px;
		line-height: 1.14;
		letter-spacing: -1.2px;
	}

	h1 > span {
		margin-top: 22px;
		letter-spacing: -1px;
	}

	.lede {
		font-size: 15px;
	}

	.stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
		padding: 16px 0;
	}

	.hero .calc {
		max-width: none;
		padding: 18px;
	}

	.mascot-note {
		order: 1;
		gap: 12px;
		height: auto;
		padding: 0;
		overflow: visible;
		border-radius: 0;
		background: none;
	}

	.mascot-note__photo,
	.mascot-note__photo img {
		width: 70px;
		height: 70px;
		margin: 0;
	}

	.mascot-note p {
		color: var(--muted);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.55;
	}

	.laws {
		display: none;
	}

	/* Frame 02: 209x206 at (223, 99) of the hero, cut by its right edge; anchored to the right so narrower screens keep the cut. */
	.hero__peek {
		display: block;
		position: absolute;
		top: 99px;
		right: -42px;
		width: 209px;
		max-width: none;
		height: 206px;
		object-fit: contain;
		pointer-events: none;
	}

	.chips[data-kinds] button {
		min-height: 50px;
	}

	.chips .is-long {
		font-size: 13px;
		line-height: 1.25;
	}

	.price strong {
		font-size: 22px;
	}

	.section,
	.result {
		padding: 24px 0;
	}

	.section-head {
		gap: 22px;
	}

	/* Title row of frame 02: kicker above, the 90px mascot right of the h2. */
	.section-head__title {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 22px 16px;
		width: 100%;
	}

	.section-head__title .kicker {
		grid-column: 1 / -1;
	}

	.section-head__title h2 {
		margin: 0;
	}

	.section-head__mascot {
		display: block;
		width: 90px;
		height: 90px;
		object-fit: contain;
	}

	/* Frame 02 leaves out the side note of «Как это работает» and the note under the bank grid. */
	#how .section-head__text,
	.banks-note {
		display: none;
	}

	#how .h2,
	.banks-head h2,
	.cta-band h2 {
		font-size: 28px;
	}

	.about h2,
	.office h2 {
		font-size: 30px;
	}

	.steps {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: 22px;
	}

	.step {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-top: 20px;
	}

	.step h3,
	.step p {
		margin: 0;
	}

	.step h3 {
		font-size: 21px;
	}

	.step__top span {
		font-size: 13px;
	}

	.step__top .icon {
		width: 24px;
		height: 24px;
	}

	/* Frame 02 order: kicker, h2, text, sample card, then the button across the width; the point list is left out. */
	.result > .wrap {
		gap: 22px;
	}

	.result__copy {
		display: contents;
	}

	.result .h2 {
		font-size: 25px;
		letter-spacing: -0.5px;
	}

	.result__text {
		width: auto;
	}

	.result__points {
		display: none;
	}

	.result__copy > .btn {
		order: 1;
	}

	.preview {
		padding: 20px;
	}

	.preview h3 {
		font-size: 23px;
	}

	.bank-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		margin: 22px 0 0;
	}

	.bank-grid li {
		min-height: 68px;
		padding: 10px 5px;
		border-radius: 8px;
	}

	.bank-grid img {
		width: 82px;
		height: 36px;
	}

	.bank-grid__name {
		font-size: 13px;
	}

	.about > .wrap,
	.office > .wrap {
		gap: 22px;
	}

	.about__copy,
	.office__copy {
		gap: 22px;
	}

	/* Cover row of frame 02: text left, the 130px mascot right; on 320-389 the mascot gives way to the title. */
	.video {
		gap: 8px;
		min-height: 280px;
		padding: 22px;
		border-radius: 14px;
	}

	.video__kicker {
		display: none;
	}

	.video > div {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.video__title {
		margin: 0;
		font-size: 23px;
		letter-spacing: -0.7px;
	}

	.video__play {
		gap: 7px;
		padding: 9px 12px;
		border-radius: 20px;
		font-size: 13px;
	}

	.video__play .icon {
		width: 16px;
		height: 16px;
	}

	.video img {
		flex: 0 1 130px;
		width: 130px;
		height: auto;
		aspect-ratio: 1;
	}

	.office img.tower {
		height: 230px;
		border-radius: 12px;
	}

	.pin {
		gap: 8px;
	}

	.office-actions {
		width: 100%;
		min-height: 140px;
	}

	.office-actions .btn--tall {
		width: 240px;
		height: 54px;
		padding: 16px 22px;
		font-size: 14px;
	}

	.office-actions .btn--map {
		font-size: 13px;
	}

	/* Frame 02: 116x116 at (232, 17) of the button block, right of the 240px buttons; shown once the block holds it. */
	.office-actions .mascot {
		left: 232px;
		top: 17px;
		width: 116px;
		height: 116px;
	}

	@container (min-width: 348px) {
		.office-actions .mascot {
			display: block;
		}
	}

	.cta-band > .wrap,
	.cta-band__copy {
		gap: 20px;
	}

	.cta-band .btn {
		justify-self: stretch;
	}

	.flow-header {
		height: 68px;
		padding: 8px 0;
	}

	.flow-steps {
		display: none;
	}

	/* minmax(0, …): a one-line button must not widen the column past the screen. */
	.flow-body,
	.step2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 20px var(--pad);
	}

	.flow h2 {
		font-size: 30px;
	}

	.flow-mascot {
		width: 140px;
		height: 140px;
	}

	/* Frame 06: one stack of gap 12, the form sits on the page without its card. */
	.step2,
	.step2__main {
		gap: 12px;
	}

	.step2 .flow-kicker {
		font-size: 9px;
		letter-spacing: 0.8px;
	}

	.step2 h2 {
		font-size: 27px;
	}

	.step2__main > .intro {
		font-size: 11px;
	}

	/* A narrow row puts the label on its own line above the value, so the value takes the full width beside the icon. */
	.checklist {
		padding: 0 14px;
	}

	.checklist__row {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 2px 10px;
		padding: 12px 0;
	}

	.checklist__label {
		width: auto;
		font-size: 13px;
	}

	/* Column 2 after a label wraps the value to the next line; a row without a label (step 3) keeps it by the icon. */
	.checklist__value {
		grid-column: 2;
		font-size: 14px;
	}

	.checklist__row--total {
		margin: 0 -14px;
		padding: 14px;
	}

	.checklist__value--total,
	.checklist__row--empty .checklist__value--total {
		font-size: 20px;
	}

	.step2 .card {
		gap: 12px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.step2 .card h3 {
		font-size: 21px;
		letter-spacing: -0.5px;
	}

	/* Frame 06 puts the intro under the fields. Nothing in it takes focus, so Tab still goes name, phone, consent,
	   button from top to bottom. */
	.step2 .card > .intro {
		order: 1;
	}

	/* The empty branch has no frame of its own: its intro leads into the call, so it stays above it. */
	.step2 .card--empty > .intro {
		order: 0;
	}

	.step2 .card > .consent,
	.step2 .card > .consent ~ * {
		order: 2;
	}

	.step2 .card .intro {
		font-size: 11px;
	}

	.step2 .card label:not(.consent) {
		gap: 6px;
		font-size: 11px;
	}

	.step2 .card input[type="text"],
	.step2 .card input[type="tel"] {
		height: 44px;
		padding: 10px 12px;
		background: #fff;
	}

	.step2 .card .btn {
		height: 50px;
	}
}

/* Below 390 the right anchor would pull the peek over the h1: it keeps the frame x of 223 and the hero edge cuts more of it. */
@media (max-width: 389px) {
	.hero__peek {
		right: auto;
		left: 223px;
	}
}

/* 320-360: the header keeps the whole logo and the segment its one-line labels. */
@media (max-width: 360px) {
	.header-phone {
		font-size: 14px;
	}

	.seg [data-mode="commercial"] {
		font-size: 13px;
	}
}

/* Two chip columns fit 320 only with the narrower calculator padding (coordinator ruling). */
@media (max-width: 359px) {
	.hero .calc {
		padding: 14px;
	}

	/* «На исполнение контракта» keeps two lines in a 122px chip. */
	.chips button {
		padding-inline: 8px;
	}

	/* «Показать подходящие банки» is wider than the step 1 card here and wraps. */
	.card .btn {
		height: auto;
		min-height: 54px;
		white-space: normal;
	}

	/* «Предварительная» outgrows the line below about 343px: it breaks by syllables (lang="ru"), not at any letter. Wider,
	   hyphenation would only reflow the heading of frame 02. overflow-wrap stays for browsers without a dictionary. */
	h1 {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 32, 36, 0.45);
	animation: modal-fade-in 200ms ease-out;
}

.modal__dialog {
	position: relative;
	width: min(420px, 100%);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	padding: 32px 28px 28px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(22, 32, 36, 0.2);
	animation: modal-rise-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Open plays whenever [hidden] goes away. Close: lead-modal.js sets .is-closing, waits CLOSE_MS (160) and sets
   [hidden]; keep the close here at 150ms or shorter. */
.modal.is-closing .modal__backdrop {
	animation: modal-fade-out 150ms ease-in forwards;
}

.modal.is-closing .modal__dialog {
	animation: modal-rise-out 150ms ease-in forwards;
}

@keyframes modal-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes modal-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes modal-rise-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
}

@keyframes modal-rise-out {
	to {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

/* Reduced motion: the dialog only fades, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.modal__dialog {
		animation-name: modal-fade-in;
	}

	.modal.is-closing .modal__dialog {
		animation-name: modal-fade-out;
	}
}

/* WEEEK 3498: a 16:9 player on the dark green of the cover. The width follows the window height too, so the head
   and the whole frame fit a short landscape window; --video-chrome is the modal padding, the dialog padding and the head. */
.modal__dialog--video {
	--video-chrome: 128px;
	width: min(1040px, 100%, (100vh - var(--video-chrome)) * 16 / 9);
	width: min(1040px, 100%, (100dvh - var(--video-chrome)) * 16 / 9);
	padding: 8px 12px 12px;
	border-radius: 18px;
	background: var(--deep);
	box-shadow: 0 32px 80px rgba(10, 22, 16, 0.45);
	color: #fff;
}

#video-modal .modal__backdrop {
	background: rgba(14, 28, 21, 0.82);
}

.modal__video-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-left: 8px;
	margin-bottom: 8px;
}

.modal__video-title {
	margin: 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
}

.modal__close.modal__close--video {
	position: static;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--mist);
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.modal__close--video .icon {
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.modal__close--video:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
}

.modal__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: #000;
}

@media (max-width: 759px) {
	#video-modal {
		padding: 12px;
	}

	.modal__dialog--video {
		--video-chrome: 104px;
		padding: 6px 8px 8px;
		border-radius: 14px;
	}

	.modal__video-head {
		padding-left: 6px;
		margin-bottom: 6px;
	}

	.modal__video-title {
		font-size: 15px;
	}

	.modal__video {
		border-radius: 8px;
	}
}

.modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 24px;
	line-height: 1;
}

.modal__title {
	margin: 0;
	font-family: var(--font);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.modal__subtitle {
	margin: 8px 0 24px;
	font-size: 14px;
	color: var(--muted);
}

.modal__subtitle--flush {
	margin-bottom: 28px;
}

.modal__dialog--success {
	text-align: center;
}

/* Pencil frames 07 FwIrb and 08 c6FR6D. */
.modal__dialog--lead {
	width: min(480px, 100%);
	padding: 32px;
}

/* On a short screen the dialog scrolls and an absolute × went with the text. Sticky keeps it at the same corner,
   8px from the top and 12px from the right of the dialog: the negative margins reach into the padding (32px), the
   bottom one gives the 44px back so the title starts where it did, and the sticky top counts from the content box. */
.modal__dialog--lead .modal__close {
	position: sticky;
	top: -24px;
	right: auto;
	z-index: 1;
	display: block;
	margin: -24px -20px -20px auto;
	border-radius: 50%;
	background: #fff;
}

.modal__dialog--lead .modal__title {
	padding-right: 32px;
	font-family: var(--display);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.15;
}

.modal__dialog--lead .modal__subtitle {
	margin: 12px 0 20px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

@media (max-width: 759px) {
	.modal__dialog--lead {
		padding: 22px 20px;
	}

	.modal__dialog--lead .modal__close {
		top: -14px;
		margin: -14px -8px -30px auto;
	}

	.modal__dialog--lead .modal__title {
		padding-right: 24px;
		font-size: 28px;
	}
}

.modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--pale);
	color: var(--green-dark);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.modal .field {
	display: block;
	margin: 0 0 20px;
}

.modal .field__label {
	display: block;
	margin-bottom: 8px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

.modal .field__input {
	width: 100%;
	height: auto;
	padding: 15px 16px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.modal .field__error {
	margin: 0 0 12px;
	font-size: 13px;
	color: #c0392b;
	text-align: left;
}

.modal .consent-field {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	margin-bottom: 16px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
}

/* flex: none: below 414 the wrapped text squeezed the box to 13x16. */
.modal .consent-field__checkbox {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--green);
}

.modal .consent-field a {
	text-decoration: underline;
}

.modal .lead-form__operator {
	margin: -8px 0 16px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
}

.modal .btn {
	height: auto;
	min-height: 54px;
	white-space: normal;
}

.modal .btn--block {
	width: 100%;
}

/* Frames 07/08: 56px buttons with radius 8. */
.modal__dialog--lead .btn {
	min-height: 56px;
	border-radius: 8px;
}

.modal .btn--dark {
	background: var(--ink);
	color: #fff;
}

.modal .btn--outline {
	background: #fff;
	border-color: var(--line);
	color: var(--ink);
}

.modal__contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.modal__contacts-sep {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}

.modal__contacts-sep::before,
.modal__contacts-sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.modal__contacts .btn svg {
	width: 22px;
	height: 22px;
}

/* A phone with the browser bars out (below 800px of height) gets the lead dialog 48px shorter, gaps only: buttons
   and fields keep the sizes of frame 08, so more of «или» and the messengers stays in view. */
@media (max-width: 759px) and (max-height: 800px) {
	.modal__dialog--lead .modal__subtitle {
		margin: 8px 0 14px;
	}

	.modal__dialog--lead .field {
		margin-bottom: 14px;
	}

	.modal__dialog--lead .consent-field,
	.modal__dialog--lead .lead-form__operator {
		margin-bottom: 12px;
	}

	.modal__dialog--lead .modal__contacts {
		gap: 8px;
		margin-top: 14px;
	}
}

/* WEEEK 3516: cookie notice. A fixed card, so it shifts nothing on the page; not a modal: no backdrop, no scroll lock,
   Escape stays with the page. Bottom left, away from the Jivo button in the bottom right corner. Above the page (its
   highest is the FAQ tooltip, 10), under the sticky header (30) and the open mobile menu (29), so «Вход» stays reachable. */
.site-note {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 380px;
	max-width: calc(100vw - 48px);
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 48px rgba(22, 44, 33, 0.16);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	animation: site-note-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-note[hidden] {
	display: none;
}

.site-note p {
	margin: 0;
}

.site-note a,
.site-prefs__policy a {
	color: var(--green-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-note__actions {
	display: flex;
	gap: 10px;
}

.site-note .btn,
.site-prefs__actions .btn {
	height: 44px;
	padding: 0 20px;
}

.site-note__actions .btn {
	flex: 1;
}

@keyframes site-note-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-note {
		animation-name: modal-fade-in;
	}
}

/* On a phone the card takes the full width and stands above the Jivo button, which keeps the bottom right corner. */
@media (max-width: 759px) {
	.site-note {
		left: 16px;
		right: 16px;
		bottom: calc(84px + env(safe-area-inset-bottom));
		gap: 12px;
		width: auto;
		max-width: none;
		padding: 14px 16px;
		font-size: 13px;
		line-height: 1.4;
	}

	.site-note__actions {
		gap: 8px;
	}

	.site-note__actions .btn {
		padding: 0 12px;
	}
}

.modal__dialog--prefs {
	width: min(520px, 100%);
	padding: 32px;
}

.modal__dialog--prefs .modal__title {
	margin-bottom: 20px;
	padding-right: 32px;
}

.pref-option {
	display: block;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.pref-option p {
	margin: 0;
}

.pref-option .pref-option__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.pref-option__title {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

.pref-option__state {
	flex: none;
	color: var(--green-dark);
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
}

.pref-option__text {
	display: block;
}

/* A switch from a checkbox: the label around the whole option toggles it, so the tap zone is the option. */
.pref-switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	margin: 0;
	border-radius: 13px;
	background: var(--track);
	cursor: pointer;
	appearance: none;
	transition: background-color 0.15s ease-out;
}

.pref-switch::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(22, 32, 36, 0.25);
	transition: transform 0.15s ease-out;
}

.pref-switch:checked {
	background: var(--green);
}

.pref-switch:checked::before {
	transform: translateX(18px);
}

.pref-switch:focus-visible {
	outline: 2px solid var(--green-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pref-switch,
	.pref-switch::before {
		transition: none;
	}
}

/* Under the switches: the choice takes effect on the next load, so the note belongs to them, above the policy line. */
.site-prefs__note {
	margin: 0;
	padding-bottom: 16px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.site-prefs__policy {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.site-prefs__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

@media (max-width: 759px) {
	.modal__dialog--prefs {
		padding: 22px 20px;
	}

	.site-prefs__actions .btn {
		flex: 1;
	}
}