@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest-cyrillic-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  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: 'Onest';
  src: url('/assets/fonts/onest-latin-ext-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --cv-primary: #0b3d3b;
  --cv-ink: #0b2430;
  --cv-ink-soft: #425963;
  --cv-petrol: #0b3d3b;
  --cv-petrol-dark: #062d2c;
  --cv-sky: #dff3f5;
  --cv-sky-soft: #f2f8f8;
  --cv-orange: #ffc247;
  --cv-orange-hover: #ffb62e;
  --cv-white: #ffffff;
  --cv-line: #cddcdf;
  --cv-focus: #146dcb;
  --cv-container: 1184px;
  --cv-radius-lg: 28px;
  --cv-radius-md: 18px;
  --cv-shadow: 0 18px 48px rgba(11, 36, 48, 0.12);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

button,
input {
  font: inherit;
}

img,
svg {
  display: block;
}

picture {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.cv-body {
  min-width: 320px;
  background: var(--cv-white);
  color: var(--cv-ink);
  font-family: 'Onest', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

.cv-container {
  width: min(calc(100% - 48px), var(--cv-container));
  margin-inline: auto;
}

.cv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cv-skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--cv-ink);
  color: var(--cv-white);
  text-decoration: none;
  transform: translateY(-150%);
}

.cv-skip-link:focus {
  transform: translateY(0);
}

.cv-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #e1e9eb;
  background: var(--cv-white);
}

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

.cv-brand {
  display: inline-flex;
  min-height: 44px;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--cv-ink);
  text-decoration: none;
}

.cv-brand:focus-visible,
.cv-nav-link:focus-visible,
.cv-language a:focus-visible,
.cv-text-link:focus-visible,
.cv-cta:focus-visible,
.cv-menu-button:focus-visible {
  outline: 3px solid var(--cv-focus);
  outline-offset: 3px;
}

.cv-brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.cv-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.cv-brand-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.cv-brand-descriptor {
  margin-top: 3px;
  color: var(--cv-ink-soft);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.cv-primary-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.cv-nav-list {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cv-nav-link,
.cv-language a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 8px;
  border-radius: 9px;
  color: #314850;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.cv-nav-link:hover,
.cv-language a:hover {
  background: var(--cv-sky-soft);
  color: var(--cv-petrol);
}

.cv-nav-link:active,
.cv-language a:active {
  background: var(--cv-sky);
}

.cv-nav-link-current {
  color: var(--cv-petrol);
}

.cv-route-link {
  gap: 4px;
}

.cv-route-link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cv-flag {
  display: inline-flex;
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 3px;
}

.cv-flag img {
  display: block;
  width: 100%;
  height: 100%;
}

.cv-language {
  position: relative;
}

.cv-language-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  color: #314850;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  list-style: none;
}

.cv-language-toggle::-webkit-details-marker {
  display: none;
}

.cv-language-toggle:hover {
  background: var(--cv-sky-soft);
  color: var(--cv-petrol);
}

.cv-language-toggle:focus-visible {
  outline: 3px solid var(--cv-focus);
  outline-offset: 3px;
}

.cv-language-caret {
  width: 11px;
  height: 8px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 160ms ease;
}

.cv-language[open] .cv-language-caret {
  transform: rotate(180deg);
}

.cv-language-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 196px;
  padding: 6px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  margin: 0;
  background: var(--cv-white);
  box-shadow: 0 18px 40px rgba(11, 36, 48, 0.14);
  list-style: none;
}

.cv-language-menu a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  color: #233d47;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.cv-language-menu a:hover {
  background: var(--cv-sky-soft);
  color: var(--cv-petrol);
}

.cv-language-menu a[aria-current='page'] {
  background: var(--cv-sky);
  color: var(--cv-petrol);
}

.cv-language-name {
  color: #526770;
  font-size: 12.5px;
  font-weight: 500;
}

.cv-language-menu a[aria-current='page'] .cv-language-name,
.cv-language-menu a:hover .cv-language-name {
  color: inherit;
}

.cv-language-toggle .cv-language-name {
  display: none;
}

.cv-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 13px;
  cursor: pointer;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.cv-cta::before {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(3% 48%, 97% 4%, 73% 96%, 54% 68%, 38% 84%, 42% 61%);
  content: '';
}

span.cv-cta[data-cta] {
  min-height: 44px;
  justify-content: flex-start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cv-petrol);
  cursor: default;
  text-align: left;
  transform: none;
}

span.cv-cta[data-cta]::before {
  width: 18px;
  height: 18px;
}

span.cv-cta[data-cta]:hover,
span.cv-cta[data-cta]:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.cv-process span.cv-cta[data-cta] {
  color: var(--cv-white);
}

.cv-closing span.cv-cta[data-cta] {
  color: var(--cv-ink);
}

.cv-cta-header {
  min-height: 44px;
  padding: 0 15px;
  background: var(--cv-petrol);
  color: var(--cv-white);
  font-size: 13px;
  white-space: nowrap;
}

.cv-cta-header:hover {
  background: #10514e;
}

.cv-cta-header:active {
  background: var(--cv-petrol-dark);
  transform: translateY(1px);
}

.cv-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: var(--cv-white);
  color: var(--cv-ink);
  cursor: pointer;
}

.cv-menu-button:hover {
  border-color: var(--cv-petrol);
  background: var(--cv-sky-soft);
}

.cv-menu-lines {
  display: grid;
  width: 20px;
  gap: 4px;
}

.cv-menu-lines span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.cv-hero {
  overflow: clip;
  padding: 30px 0 44px;
  background: var(--cv-sky-soft);
}

.cv-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'title photo'
    'lead photo'
    'actions photo'
    'picker photo';
  column-gap: 28px;
  row-gap: 13px;
  align-items: start;
}

.cv-hero-title {
  grid-area: title;
  max-width: 720px;
  margin: 0;
  /* No automatic hyphenation in a heading: Safari hyphenated the home H1 as «крипто-валюты» [owner 2026-09-18:
     «Выглядит криво»]. break-word stays only as a guard against a horizontal scroll; layout-audit.mjs reports any
     heading word that a line break splits, so a word too wide for its screen is fixed in the text, not left to it. */
  overflow-wrap: break-word;
  hyphens: manual;
  font-size: clamp(46px, 4.25vw, 58px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.cv-hero-lead {
  grid-area: lead;
  max-width: 690px;
  margin: 0;
  color: #344d57;
  font-size: 16px;
  line-height: 1.48;
}

.cv-hero-actions {
  display: flex;
  grid-area: actions;
  align-items: center;
  gap: 16px;
}

/* The button keeps its label on one line and the note beside it wraps instead: at 1024 px the row squeezed the button
   and «Открыть Telegram-бот» broke after its hyphen [layout-audit, split words, 2026-09-18]. */
.cv-hero-actions .cv-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cv-cta-primary {
  min-height: 54px;
  padding: 0 20px;
  background: var(--cv-orange);
  color: var(--cv-ink);
  box-shadow: 0 8px 0 rgba(11, 36, 48, 0.08);
  font-size: 15px;
}

.cv-cta-primary:hover {
  background: var(--cv-orange-hover);
  box-shadow: 0 5px 0 rgba(11, 36, 48, 0.11);
  transform: translateY(1px);
}

.cv-cta-primary:active {
  background: #f5a915;
  box-shadow: 0 2px 0 rgba(11, 36, 48, 0.14);
  transform: translateY(3px);
}

/* One line under the button, and it closes the largest objection: the crypto does not have to
   leave before the meeting. A check mark, because the reader is scanning [owner 2026-09-18]. */
.cv-hero-meta {
  position: relative;
  max-width: 320px;
  padding-left: 24px;
  margin: 0;
  color: #123f40;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.cv-hero-meta::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #17736d;
  content: '✓';
  font-size: 15px;
  font-weight: 800;
}

.cv-text-link {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: #075f59;
  font-size: 13px;
  font-weight: 750;
  text-underline-offset: 4px;
}

.cv-text-link:hover {
  color: var(--cv-ink);
}

.cv-text-link:active {
  color: #12746d;
}

.cv-text-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cv-hero-photo {
  position: relative;
  grid-area: photo;
  min-width: 0;
  height: 640px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--cv-white);
  border-radius: var(--cv-radius-lg);
  background: #b9e6ec;
  box-shadow: var(--cv-shadow);
}

.cv-hero-photo picture,
.cv-hero-photo img {
  width: 100%;
  height: 100%;
}

.cv-hero-photo img {
  object-fit: cover;
}

/* A page without the picker (how-it-works, FAQ, about) has only the title, the lead and the button beside the photo;
   at its full 640 px the photo left half of the first screen empty. There it takes a landscape frame instead, the one
   phones already use. */
@media (min-width: 900px) {
  .cv-hero-grid:not(:has(.cv-picker)) .cv-hero-photo {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

.cv-place-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--cv-white);
  color: var(--cv-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.cv-place-label svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: #147773;
  stroke-width: 1.8;
}

.cv-picker {
  grid-area: picker;
  min-width: 0;
  padding: 16px;
  border: 1px solid #c7dadd;
  border-radius: var(--cv-radius-md);
  background: var(--cv-white);
  box-shadow: 0 14px 35px rgba(11, 36, 48, 0.09);
}

.cv-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dce7e9;
}

.cv-picker-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.cv-picker-route {
  margin: 5px 0 0;
  color: var(--cv-ink-soft);
  font-size: 12.5px;
  line-height: 1.3;
}

/* A bordered pill next to a form reads as a button and gets clicked. This is a statement, so it is
   typeset as one: no border, no fill, a check glyph instead [user test 2026-09-18]. */
.cv-picker-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  color: #0c6b65;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.cv-picker-seal::before {
  flex: 0 0 auto;
  color: #17736d;
  content: '✓';
  font-size: 14px;
  font-weight: 800;
}

.cv-picker-fields {
  display: grid;
  gap: 11px;
  padding: 10px 0;
}

.cv-picker-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.cv-picker-fieldset legend {
  padding: 0;
  margin-bottom: 6px;
  color: #526770;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* One question per row, and every chip in a row has the same width. Chips that grow from their own
   text read as crooked (USDT 110 px beside RUB 138 px) [owner 2026-09-18], so each row is a grid of
   equal columns: four codes, three methods, four towns; a deliberate full-width item (the «Другой
   город» escape hatch, the lone USDT of the reverse direction) spans the row instead of dangling.
   Rows, not per-breakpoint maths: phones change only the column count. */
.cv-choice-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.cv-choice-wide {
  grid-column: 1 / -1;
}

.cv-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

/* Each answer appears exactly when the choice that raises the question is made — the same thing the
   bot's own form does one step later. No script: the radios carry the state. */
.cv-picker-hint {
  display: none;
  margin: 7px 0 0;
  color: #48616a;
  font-size: 11.5px;
  line-height: 1.35;
}

.cv-picker:has(input[data-place-other]:checked) .cv-hint-other {
  display: block;
}

/* One exception: «В банкомат» read as «withdraw at an ATM» to both testers in two rounds, before anyone chose it — so
   its answer stands under the row from the start [user tests 2026-09-18]. Hidden only when cash euros are given and
   the euro methods are out of play. */
.cv-picker .cv-hint-atm {
  display: block;
}

/* The give row names currencies the way the bot does — USDT, RUB, USD, EUR — so a code needs no
   glyph beside it (a ₽ next to RUB says the same thing twice), and four codes fit one line even on a
   phone [owner 2026-09-18]. */
.cv-choice-row-codes .cv-choice-box,
.cv-recv-usdt .cv-choice-box {
  padding-inline: 8px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

/* «Я получаю» shows everything that can be received — the three euro methods and USDT — at all times, so the
   reverse direction is visible before anyone looks for it [owner 2026-09-18: «почему в «Я получаю» нет USDT?»].
   What cannot be had for the chosen currency is dimmed and inert rather than hidden, the way a real form greys
   out an impossible pair: no USDT for USDT, no USDT for cash dollars (the bot offers USD only against euros),
   no bank transfer for cash dollars (the bot pays them out in cash or at an ATM: app.receive_currencies; the
   transfer methods apply to USDT and rubles: payout.bank_transfer_methods), and only USDT for cash euros. */
.cv-picker:has(input[data-give-usdt]:checked) .cv-recv-usdt,
.cv-picker:has(input[data-give-usd]:checked) .cv-recv-usdt,
.cv-picker:has(input[data-give-usd]:checked) .cv-recv-account,
.cv-picker:has(input[data-give-eur]:checked) .cv-recv-eur {
  opacity: 0.38;
  pointer-events: none;
}

.cv-picker:has(input[data-give-eur]:checked) .cv-hint-atm {
  display: none;
}

/* With cash euros given, USDT is the one pair on offer, so it reads as chosen. */
.cv-picker:has(input[data-give-eur]:checked) .cv-recv-usdt .cv-choice-box {
  border-color: #0c6b65;
  background: #ddf1ee;
  color: #063b38;
  box-shadow: inset 0 0 0 1px #0c6b65;
}

.cv-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cv-choice-box {
  display: flex;
  height: 100%;
  min-height: 44px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid #d4e0e2;
  border-radius: 11px;
  background: #fbfdfd;
  color: #233d47;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
}

.cv-choice:hover .cv-choice-box {
  border-color: #7fa4a4;
  background: #f1f8f7;
}

.cv-choice input:checked + .cv-choice-box {
  border-color: #0c6b65;
  background: #ddf1ee;
  color: #063b38;
  box-shadow: inset 0 0 0 1px #0c6b65;
}

.cv-choice input:focus-visible + .cv-choice-box {
  outline: 3px solid var(--cv-focus);
  outline-offset: 2px;
}

.cv-choice-code,
.cv-choice-currency {
  display: inline-flex;
  min-width: 32px;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--cv-petrol);
  color: var(--cv-white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cv-choice-currency {
  min-width: 26px;
  font-size: 14px;
}

.cv-choice-pin {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid #19746f;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) scale(0.72);
}

.cv-choice-pin::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #19746f;
  content: '';
}

.cv-picker-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.cv-picker-cta {
  min-height: 50px;
  padding-inline: 18px;
  font-size: 14.5px;
}

.cv-section {
  padding: 112px 0;
}

.cv-section-head {
  margin-bottom: 54px;
}

.cv-section-head-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: end;
  gap: 72px;
}

/* A short heading beside a long text: aligned to the end it sat ~180 px below the text's first line (/how-it-works/,
   «Что подготовить до заявки», user test 2026-09-19). Such a pair aligns to the top. */
.cv-section-head-split.cv-align-start {
  align-items: start;
}

.cv-section-title {
  margin: 0;
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.cv-section-intro,
.cv-section-copy {
  margin: 0;
  color: #405760;
  font-size: 18px;
  line-height: 1.55;
}

.cv-section-copy p {
  margin: 0;
}

.cv-section-copy p + p {
  margin-top: 18px;
}

.cv-directions {
  background: var(--cv-white);
}

/* Groups of cards and links are lists [owner 2026-09-19: «Проверь семантическую корректность тегов»]. The lists carry
   no browser styling (zero specificity, so every class rule still wins); where a card link used to be the grid item,
   its <li> is now, and the link fills it. */
:where(.cv-direction-layout, .cv-payout-layout, .cv-town-list, .cv-town-row, .cv-nf-grid, .cv-related-list,
  .cv-footer-nav ul, .cv-footer-language ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-town-list > li,
.cv-town-row > li,
.cv-nf-grid > li {
  display: flex;
  min-width: 0;
}

.cv-town-list > li > a,
.cv-town-row > li > a,
.cv-nf-grid > li > a {
  flex: 1 1 auto;
}

.cv-direction-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.cv-direction {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: 34px;
  overflow: hidden;
  border-radius: var(--cv-radius-lg);
}

.cv-direction-cash {
  grid-row: 1 / 3;
  min-height: 650px;
  justify-content: flex-start;
  background: var(--cv-petrol);
  color: var(--cv-white);
}

.cv-direction-cash .cv-direction-copy {
  margin-top: 22px;
}

.cv-direction-account {
  background: var(--cv-sky);
  color: var(--cv-ink);
}

.cv-direction-rubles {
  border: 1px solid #ead39f;
  background: #fff4d6;
  color: var(--cv-ink);
}

.cv-route-icon {
  order: -1;
  width: 100%;
  height: auto;
  max-height: 220px;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.cv-route-icon text {
  fill: currentColor;
  stroke: none;
  font-family: 'Onest', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.cv-direction-rubles .cv-route-icon text {
  font-size: 42px;
}

/* The network glyph leaves less room under it than the other two icons, so its label is set a
   size down — measured, not guessed: layout-audit reports any label that leaves its frame. */
.cv-direction-account .cv-route-icon text {
  font-size: 15px;
}

.cv-direction h3 {
  max-width: 480px;
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.cv-direction-account h3,
.cv-direction-rubles h3 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.cv-direction p {
  max-width: 540px;
  margin: 18px 0 24px;
  color: currentColor;
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.9;
}

/* The home shows its four directions as equal cells: two by two on a wide screen, one under another on a phone
   [owner 2026-09-18: «почему не сделать 4 ячейки которые отлично 2х2 покажутся на десктопе и друг под другом на
   мобильном?»]. The cards carry no links: an inner page is a landing page for its own query, not a «details» page
   for someone already on the home [owner 2026-09-18]. The dark cell is the main direction. Every icon has the same
   box, so the headings of a row line up when the text starts right under it. */
.cv-direction-grid4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
}

.cv-direction-grid4 .cv-direction {
  min-height: 0;
  justify-content: flex-start;
}

.cv-direction-grid4 .cv-direction-cash {
  grid-row: auto;
}

.cv-direction-grid4 .cv-direction-copy {
  margin-top: 0;
}

.cv-direction-grid4 .cv-direction p {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .cv-direction-grid4 .cv-direction h3 {
    font-size: clamp(28px, 2.6vw, 36px);
  }
}

.cv-direction-usd {
  background: var(--cv-sky);
  color: var(--cv-ink);
}

.cv-direction-buy {
  border: 1px solid var(--cv-line);
  background: var(--cv-white);
  color: var(--cv-ink);
}

.cv-direction-buy .cv-route-icon {
  color: #0d706b;
}

.cv-direction-usd .cv-route-icon text,
.cv-direction-buy .cv-route-icon text {
  font-size: 42px;
}

.cv-direction-buy .cv-route-icon text:last-child {
  font-size: 24px;
}

.cv-town-card svg,
.cv-related svg,
.cv-faq-more svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cv-town-card:focus-visible,
.cv-related a:focus-visible,
.cv-faq-more:focus-visible,
.cv-footer a:focus-visible,
.cv-footer-language a:focus-visible,
.cv-faq summary:focus-visible {
  outline: 3px solid var(--cv-focus);
  outline-offset: 4px;
}

.cv-process {
  padding: 112px 0;
  background: var(--cv-petrol-dark);
  color: var(--cv-white);
}

.cv-process-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 72px;
  margin-bottom: 50px;
}

.cv-process-head p {
  margin: 0;
  color: #c6d9da;
  font-size: 17px;
  line-height: 1.55;
}

.cv-process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cv-process-step {
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #38615f;
  border-radius: 20px;
  background: #0d4542;
}

.cv-step-number {
  align-self: flex-end;
  color: #80aaa7;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.cv-step-icon {
  width: 48px;
  height: 48px;
  margin: 22px 0 28px;
  fill: none;
  stroke: #a9d5d1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cv-process-step h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.cv-process-step p {
  margin: 14px 0 0;
  color: #d2e0e0;
  font-size: 14px;
  line-height: 1.52;
}

.cv-process-step-key {
  border-color: var(--cv-orange);
  background: var(--cv-orange);
  color: var(--cv-ink);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  transform: translateY(-14px);
}

/* In a list longer than one row the key card can sit under another card; lifted by 14 px it touched the card above
   (/how-it-works/, eight steps, user test 2026-09-19). The colour marks it there; the lift stays for one-row lists. */
.cv-process-list:has(> :nth-child(5)) .cv-process-step-key {
  transform: none;
}

.cv-process-step-key .cv-step-number,
.cv-process-step-key p {
  color: #31434a;
}

.cv-process-step-key .cv-step-icon {
  stroke: var(--cv-ink);
}

.cv-process-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 34px;
}

.cv-process-action p {
  max-width: 340px;
  margin: 0;
  color: #bdd1d0;
  font-size: 14px;
  line-height: 1.45;
}

.cv-where {
  background: var(--cv-white);
}

/* A town page opens on its meeting text and goes straight on to the directions, both on white: the second section
   drops its top padding so the two do not stack a double gap (Gandia user test, round 2: ~290 px of blank). */
.cv-where + .cv-directions {
  padding-top: 0;
}

.cv-location-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(330px, 1fr);
  gap: 16px;
}

.cv-location-main {
  position: relative;
  min-width: 0;
  height: 600px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--cv-radius-lg);
  background: #233e53;
}

.cv-location-main picture,
.cv-location-main img,
.cv-town-card picture,
.cv-town-card img {
  width: 100%;
  height: 100%;
}

.cv-location-main img,
.cv-town-card img {
  object-fit: cover;
}

.cv-town-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* A town page lists the other places as a row of cards under its meeting text: the home's big photo slot belongs to the
   city itself, and a town's only photo already stands in its hero (two photos on a page never show the same thing). */
.cv-town-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cv-town-row .cv-town-card {
  min-height: 150px;
}

.cv-town-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d4e1e3;
  border-radius: 20px;
  background: var(--cv-white);
  color: var(--cv-ink);
  text-decoration: none;
}

.cv-town-card:hover {
  border-color: #699d9a;
  box-shadow: 0 12px 26px rgba(11, 36, 48, 0.1);
  transform: translateY(-2px);
}

.cv-town-card:active {
  box-shadow: none;
  transform: translateY(0);
}

.cv-town-card figure {
  display: grid;
  height: 100%;
  grid-template-columns: 44% 56%;
  margin: 0;
}

.cv-town-card figcaption {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.28;
}

.cv-town-card figcaption svg {
  margin-top: 2px;
  color: #0c6b65;
}

.cv-town-place {
  color: #577078;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cv-special {
  padding: 92px 0;
  background: var(--cv-sky);
}

.cv-special-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 72px;
}

.cv-special-heading p {
  max-width: 430px;
  margin: 24px 0 0;
  color: #405a63;
  font-size: 17px;
  line-height: 1.5;
}

.cv-special-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.cv-special-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 20px;
  min-height: 104px;
  padding: 20px 0;
  border-bottom: 1px solid #a9cfd2;
  color: #173943;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.cv-special-list li:first-child {
  border-top: 1px solid #a9cfd2;
}

.cv-special-list svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: #0d706b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cv-trust {
  padding: 112px 0;
  background: var(--cv-petrol);
  color: var(--cv-white);
}

.cv-trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: 72px;
}

.cv-trust-copy > p {
  margin: 30px 0 0;
  color: #d0e2e1;
  font-size: 17px;
  line-height: 1.6;
}

.cv-trust-rule {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 16px;
  padding: 19px 0;
  margin-top: 30px;
  border-top: 1px solid #4f7674;
  border-bottom: 1px solid #4f7674;
  color: #ffdb83;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.cv-trust-rule svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--cv-orange);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cv-bot-card {
  padding: 32px;
  border-radius: var(--cv-radius-lg);
  background: var(--cv-white);
  color: var(--cv-ink);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.cv-bot-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cv-bot-card-label {
  color: #526970;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-bot-card-top svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #0d6f69;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cv-bot-entry {
  padding: 22px 0 18px;
  margin: 0;
  color: var(--cv-petrol);
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

/* The card names the entry point, so the entry point itself belongs in it. */
.cv-bot-cta {
  width: 100%;
  margin-bottom: 4px;
}

.cv-bot-facts {
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid #d8e3e4;
  list-style: none;
}

.cv-bot-facts li {
  position: relative;
  padding: 20px 0 20px 28px;
  border-bottom: 1px solid #d8e3e4;
  color: #3e555e;
  font-size: 15px;
  line-height: 1.52;
}

.cv-bot-facts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cv-bot-facts li::before {
  position: absolute;
  top: 28px;
  left: 3px;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #0c6b65;
  border-left: 2px solid #0c6b65;
  content: '';
  transform: rotate(-45deg);
}

.cv-bot-facts strong {
  color: var(--cv-ink);
}

.cv-bot-facts a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #075f59;
  font-weight: 700;
  text-underline-offset: 3px;
}

.cv-faq-zone {
  background: #f4f8f9;
}

.cv-faq-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.48fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 86px;
}

.cv-related {
  padding: 28px;
  border: 1px solid #d3e1e3;
  border-radius: 22px;
  background: var(--cv-white);
}

.cv-related-title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.cv-related nav {
  display: grid;
}

.cv-related a {
  display: grid;
  min-height: 76px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid #dde7e8;
  color: #21414c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.cv-related a:hover {
  color: #07655f;
}

.cv-related a:active {
  opacity: 0.7;
}

.cv-faq .cv-section-title {
  margin-bottom: 38px;
}

.cv-faq-list {
  border-top: 1px solid #bdcfd2;
}

.cv-faq details {
  border-bottom: 1px solid #bdcfd2;
}

.cv-faq summary {
  display: grid;
  min-height: 78px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 19px 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  list-style: none;
}

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

.cv-faq summary:hover {
  color: #086b65;
}

.cv-faq summary:active {
  color: var(--cv-ink-soft);
}

.cv-summary-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid #9db5b8;
  border-radius: 50%;
}

.cv-summary-icon::before,
.cv-summary-icon::after {
  position: absolute;
  top: 14px;
  left: 8px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: '';
}

.cv-summary-icon::after {
  transform: rotate(90deg);
}

.cv-faq details[open] .cv-summary-icon::after {
  transform: rotate(0);
}

.cv-faq details > div {
  max-width: 760px;
  padding: 0 56px 26px 4px;
}

.cv-faq details p {
  margin: 0;
  color: #455c65;
  font-size: 16px;
  line-height: 1.58;
}

.cv-closing {
  padding: 64px 0;
  background: var(--cv-orange);
  color: var(--cv-ink);
}

.cv-closing-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 60px;
}

.cv-closing h2 {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}

.cv-closing p {
  max-width: 660px;
  margin: 16px 0 0;
  color: #36474e;
  font-size: 17px;
  line-height: 1.45;
}

.cv-closing-action {
  display: flex;
  max-width: 320px;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}

.cv-cta-dark {
  min-height: 58px;
  padding: 0 24px;
  background: var(--cv-ink);
  color: var(--cv-white);
}

.cv-cta-dark:hover {
  background: #173d49;
}

.cv-cta-dark:active {
  background: #061b24;
  transform: translateY(2px);
}

.cv-closing-action > span:last-child {
  color: #405158;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
}

.cv-footer {
  padding: 58px 0 28px;
  background: #071e27;
  color: #e7f0f1;
}

.cv-footer-top {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: start;
  gap: 64px;
  padding-bottom: 38px;
  border-bottom: 1px solid #29414a;
}

.cv-brand-footer {
  color: var(--cv-white);
}

.cv-footer-identity {
  max-width: 820px;
  margin: 0;
  color: #d1dfe1;
  font-size: 15px;
  line-height: 1.58;
}

.cv-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(130px, 0.6fr));
  gap: 48px;
  padding: 42px 0;
}

.cv-footer-legal p {
  max-width: 460px;
  margin: 0;
  color: #9fb3b8;
  font-size: 13px;
  line-height: 1.58;
}

.cv-footer-legal p + p {
  margin-top: 18px;
}

.cv-footer-legal a {
  display: inline;
  padding: 2px 0;
}

.cv-footer a {
  text-underline-offset: 3px;
}

.cv-footer a:hover {
  color: var(--cv-orange);
}

.cv-footer a:active {
  color: #dca62e;
}

.cv-footer-nav,
.cv-footer-language {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cv-footer-nav > span,
.cv-footer-language > span {
  margin-bottom: 6px;
  color: #7f999f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-footer-nav a,
.cv-footer-language a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: #d9e6e8;
  font-size: 13px;
  text-decoration: none;
}

.cv-footer-language .cv-language-name {
  color: #94aeb3;
}

.cv-footer-language a[aria-current='page'] {
  color: var(--cv-orange);
}

.cv-footer-language a[aria-current='page'] .cv-language-name {
  color: inherit;
}

.cv-footer-language ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.cv-footer-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cv-footer-nav li,
.cv-footer-language li {
  display: flex;
}

.cv-footer-language a[aria-current='page'] {
  color: var(--cv-orange);
}

.cv-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 25px;
  border-top: 1px solid #29414a;
  color: #7f999f;
  font-size: 11.5px;
  line-height: 1.4;
}

.cv-phonebar {
  display: none;
}

.cv-crumbs {
  padding: 4px 0 0;
  background: var(--cv-sky-soft);
}

.cv-crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  /* block only: the list is also a .cv-container, and a bare `margin: 0` cancelled its centring and put
     the first crumb flush against the screen edge on every inner page. */
  margin-block: 0;
  color: var(--cv-ink-soft);
  font-size: 12px;
  font-weight: 600;
  list-style: none;
}

.cv-crumbs-list li + li::before {
  margin-right: 6px;
  content: '/';
  color: #8ea6ac;
}

/* A crumb is a tap target like any other: 44 px, the same floor as every control on the site. */
.cv-crumbs-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  text-underline-offset: 3px;
}

.cv-crumbs-list a:hover {
  color: var(--cv-petrol);
}

@media (max-width: 1140px) {
  .cv-header-inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
  }

  .cv-menu-button {
    display: none;
  }

  .cv-primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 8px 0 14px;
    border-top: 1px solid #e4ebed;
  }

  .cv-js .cv-menu-button {
    display: flex;
  }

  /* The menu drops over the page instead of growing the header. Pushing the content down by the
     height of the menu reads as the header jumping, not as a menu opening [owner 2026-09-18].
     visibility rather than display, so the open and close can be transitioned at all. */
  .cv-js .cv-primary-nav {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    padding: 10px 24px 18px;
    border-top: 1px solid #e4ebed;
    background: var(--cv-white);
    box-shadow: 0 18px 40px rgba(11, 36, 48, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms;
  }

  .cv-js .cv-primary-nav.cv-is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .cv-nav-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .cv-nav-link {
    width: 100%;
  }

  .cv-language {
    justify-self: end;
  }

  .cv-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .cv-hero-title {
    font-size: clamp(45px, 5vw, 58px);
  }

  .cv-hero-photo {
    height: 620px;
    min-height: 0;
  }

  .cv-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-process-step-key {
    transform: none;
  }

  .cv-special-layout,
  .cv-trust-layout {
    gap: 44px;
  }

  .cv-faq-layout {
    gap: 42px;
  }

  .cv-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(110px, 0.6fr));
    gap: 30px;
  }
}

@media (max-width: 899px) {
  .cv-container {
    width: min(calc(100% - 32px), 680px);
  }

  .cv-header-inner {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .cv-brand-descriptor {
    display: none;
  }

  .cv-hero {
    padding: 28px 0 46px;
  }

  .cv-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    /* On a phone the first screen is the only one most readers see, so it carries the claim, the
       promise and the action. The photograph proves the city, which is worth a screen — just not
       the first one, ahead of the button [user test 2026-09-18]. */
    grid-template-areas:
      'title'
      'lead'
      'actions'
      'photo'
      'picker';
    row-gap: 18px;
  }

  .cv-hero-title {
    max-width: 650px;
    font-size: clamp(38px, 10.5vw, 58px);
    line-height: 1;
  }

  .cv-hero-photo {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-width: 6px;
    border-radius: 22px;
  }

  .cv-place-label {
    right: 9px;
    bottom: 9px;
    left: auto;
    min-height: 44px;
    max-width: calc(100% - 18px);
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 11px;
  }

  .cv-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .cv-cta-primary {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
  }

  .cv-hero-meta {
    max-width: none;
    font-size: 13px;
  }

  .cv-hero-lead {
    max-width: none;
    font-size: 17px;
  }

  .cv-picker {
    margin-top: 8px;
    padding: 20px;
  }

  .cv-section,
  .cv-process,
  .cv-trust {
    padding: 84px 0;
  }

  .cv-section-head-split,
  .cv-process-head,
  .cv-special-layout,
  .cv-trust-layout,
  .cv-faq-layout,
  .cv-closing-inner,
  .cv-footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-section-head-split,
  .cv-process-head {
    gap: 26px;
  }

  .cv-section-head {
    margin-bottom: 38px;
  }

  .cv-direction-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .cv-direction-cash {
    grid-row: auto;
    min-height: 520px;
  }

  .cv-direction-account,
  .cv-direction-rubles {
    min-height: 390px;
  }

  .cv-process-head {
    margin-bottom: 40px;
  }

  .cv-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-location-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-location-main {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .cv-town-list {
    grid-template-rows: repeat(3, minmax(190px, auto));
  }

  .cv-town-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-special {
    padding: 76px 0;
  }

  .cv-special-layout,
  .cv-trust-layout {
    gap: 38px;
  }

  .cv-faq-layout {
    gap: 48px;
  }

  .cv-related {
    order: 2;
  }

  .cv-faq {
    order: 1;
  }

  .cv-closing-inner {
    gap: 28px;
  }

  .cv-closing-action {
    max-width: 420px;
  }

  .cv-footer-top {
    gap: 24px;
  }

  .cv-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-footer-legal {
    grid-column: 1 / -1;
  }

  .cv-footer {
    padding-bottom: 112px;
  }

  .cv-phonebar {
    position: fixed;
    z-index: 50;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    padding: 7px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
    border: 1px solid #bfd2d4;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 42px rgba(6, 30, 39, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(130%);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .cv-phonebar[hidden] {
    display: none;
  }

  .cv-phonebar.cv-is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .cv-phonebar .cv-cta {
    width: 100%;
    min-height: 52px;
  }
}

@media (max-width: 620px) {
  .cv-header-inner {
    grid-template-areas:
      'brand brand brand'
      'cta cta cta'
      'nav nav nav';
    gap: 8px;
  }

  .cv-header-inner .cv-brand {
    grid-area: brand;
  }

  .cv-menu-button {
    grid-area: menu;
  }

  .cv-primary-nav {
    grid-area: nav;
  }

  .cv-brand-mark {
    width: 34px;
    height: 34px;
  }

  /* The wordmark is a name: it never breaks across two lines in the header. Scoped to the header
     so the footer lockup, which has room, keeps its own size [user test 2026-09-18]. */
  .cv-header-inner .cv-brand-name {
    font-size: 14px;
    white-space: nowrap;
  }

  .cv-brand-name {
    font-size: 15px;
  }

  .cv-cta-header {
    min-height: 44px;
    padding: 0 11px;
    font-size: 12px;
  }

  .cv-cta-header::before {
    width: 17px;
    height: 17px;
  }

  .cv-cta-header {
    grid-area: cta;
    width: 100%;
    margin-bottom: 10px;
  }

  .cv-js .cv-header-inner {
    grid-template-areas:
      'brand cta menu'
      'nav nav nav';
  }

  .cv-js .cv-cta-header {
    width: auto;
    margin-bottom: 0;
  }

  .cv-primary-nav,
  .cv-js .cv-primary-nav.cv-is-open {
    grid-template-columns: 1fr;
  }

  .cv-nav-list {
    grid-template-columns: 1fr 1fr;
  }

  .cv-language {
    justify-self: start;
    padding-top: 7px;
    border-top: 1px solid #e4ebed;
  }

  .cv-language-menu {
    right: auto;
    left: 0;
  }

  .cv-hero-title {
    font-size: clamp(34px, 10.5vw, 45px);
    letter-spacing: -0.05em;
  }

  .cv-picker-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .cv-picker-fields {
    gap: 13px;
  }

  .cv-choice-row-methods,
  .cv-choice-row-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-choice-box {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .cv-picker-fieldset legend {
    font-size: 11px;
  }

  .cv-picker-foot {
    grid-template-columns: 1fr;
  }

  .cv-section,
  .cv-process,
  .cv-trust {
    padding: 60px 0;
  }

  .cv-section-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .cv-section-intro,
  .cv-section-copy {
    font-size: 16px;
  }

  .cv-direction {
    min-height: 0;
    gap: 24px;
    padding: 24px;
    border-radius: 22px;
  }

  .cv-direction h3,
  .cv-direction-account h3,
  .cv-direction-rubles h3 {
    font-size: 29px;
  }

  .cv-direction p {
    font-size: 15px;
  }

  .cv-route-icon {
    max-height: 150px;
  }

  .cv-process-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-process-step {
    position: relative;
    min-height: 0;
    padding: 22px;
  }

  .cv-step-number {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .cv-step-icon {
    margin: 0 0 18px;
  }

  .cv-process-action {
    align-items: stretch;
    flex-direction: column;
  }

  .cv-process-action p {
    max-width: none;
  }

  .cv-location-main {
    aspect-ratio: 16 / 10;
    border-radius: 22px;
  }

  .cv-town-list {
    grid-template-rows: auto;
  }

  .cv-town-card figure {
    grid-template-columns: 1fr;
  }

  .cv-town-card picture {
    aspect-ratio: 3 / 2;
  }

  .cv-town-card figcaption {
    min-height: 128px;
    padding: 18px;
  }

  /* The other-towns row on a town page is navigation, not a gallery: on a phone each card stays a strip with a
     thumbnail, as on desktop, instead of a photo per screen (Gandia user test, round 1). */
  .cv-town-row .cv-town-card {
    min-height: 0;
  }

  .cv-town-row .cv-town-card figure {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .cv-town-row .cv-town-card picture {
    aspect-ratio: auto;
    min-height: 92px;
  }

  .cv-town-row .cv-town-card figcaption {
    min-height: 92px;
    padding: 14px 16px;
  }

  .cv-special {
    padding: 58px 0;
  }

  .cv-special-list li {
    grid-template-columns: 44px 1fr;
    gap: 16px;
    font-size: 15px;
  }

  .cv-special-list svg {
    width: 42px;
    height: 42px;
  }

  .cv-trust-copy > p {
    font-size: 16px;
  }

  .cv-trust-rule {
    grid-template-columns: 40px 1fr;
    font-size: 15px;
  }

  .cv-trust-rule svg {
    width: 40px;
    height: 40px;
  }

  .cv-bot-card {
    padding: 23px;
    border-radius: 22px;
  }

  .cv-bot-entry {
    font-size: 26px;
  }

  .cv-related {
    padding: 22px;
  }

  .cv-faq .cv-section-title {
    margin-bottom: 26px;
  }

  .cv-faq summary {
    min-height: 70px;
    gap: 14px;
    font-size: 16px;
  }

  .cv-faq details > div {
    padding: 0 4px 24px;
  }

  .cv-faq details p {
    font-size: 15px;
  }

  .cv-closing {
    padding: 54px 0;
  }

  .cv-closing h2 {
    font-size: 39px;
  }

  .cv-closing p {
    font-size: 16px;
  }

  .cv-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .cv-footer-legal {
    grid-column: auto;
  }

  .cv-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* One header row holds the mark, the wordmark, the button and the menu. Between 375 and 420 px it only fits when the
   button drops its icon: at 375 px the wordmark ended 2 px before «Открыть заявку» and ran 9 px under «Оформити
   заявку» [user test 2026-09-18; layout-audit.mjs "crowded header row"]. Below 375 px the button takes its own row. */
@media (max-width: 420px) {
  .cv-js .cv-cta-header {
    padding-inline: 12px;
  }

  .cv-js .cv-cta-header::before {
    display: none;
  }
}

@media (max-width: 374px) {
  .cv-container {
    width: calc(100% - 24px);
  }

  .cv-js .cv-primary-nav {
    padding-inline: 12px;
  }

  .cv-footer .cv-brand-name {
    max-width: 92px;
    line-height: 1;
  }

  .cv-header-inner .cv-brand-name {
    font-size: 13px;
  }

  .cv-js .cv-header-inner {
    grid-template-areas:
      'brand brand menu'
      'cta cta cta'
      'nav nav nav';
  }

  .cv-js .cv-cta-header {
    width: 100%;
    margin-bottom: 8px;
    padding-inline: 9px;
  }

  .cv-js .cv-cta-header::before {
    display: none;
  }

  .cv-hero-title {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cv-phonebar {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-js .cv-primary-nav,
  .cv-js .cv-primary-nav.cv-is-open {
    transition: none;
  }
}

.cv-usdt-payouts {
  background: var(--cv-sky-soft);
}

.cv-payout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cv-payout-card {
  min-height: 226px;
}

.cv-payout-layout .cv-payout-card-cash {
  min-height: 710px;
  grid-row: 1 / 4;
  justify-content: space-between;
}

.cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 27px;
}

.cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) .cv-route-icon {
  width: 124px;
  max-height: 116px;
}

.cv-payout-layout .cv-direction-rubles .cv-route-icon text {
  font-size: 16px;
}

/* Beside the text the small payout icons are drawn 96–124 px wide, so an 18-unit label came out 6–8 px tall —
   decoration nobody can read. The label is set in icon units large enough to render at 9 px or more there
   (layout-audit.mjs reports any SVG label under 9 px) [self-check 2026-09-18]. */
@media (min-width: 900px) {
  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) .cv-route-icon text {
    font-size: 30px;
  }
}

.cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) h3 {
  font-size: clamp(24px, 2.2vw, 31px);
}

.cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.48;
}

.cv-payout-card-invoice {
  border: 1px solid var(--cv-line);
  background: var(--cv-white);
  color: var(--cv-ink);
}

.cv-payout-card-invoice .cv-route-icon {
  color: #0d706b;
}

.cv-usdt-reverse {
  background: var(--cv-white);
}

.cv-reverse-card {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: 64px;
  padding: 48px;
}

.cv-reverse-card .cv-direction-copy {
  min-width: 0;
}

.cv-reverse-card .cv-section-title {
  max-width: 670px;
}

.cv-reverse-card .cv-direction-copy p {
  max-width: 650px;
}

.cv-reverse-card .cv-direction-copy p + p {
  margin-top: -8px;
}

.cv-reverse-card .cv-route-icon {
  order: initial;
  max-height: 230px;
}

.cv-reverse-card .cv-route-icon text:last-child {
  font-size: 17px;
}

.cv-usdt-handover .cv-process-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

.cv-handover-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cv-handover-list .cv-process-step {
  min-height: 330px;
}

.cv-handover-list .cv-step-icon {
  margin-top: 0;
}

.cv-usdt-rate .cv-special-layout {
  align-items: start;
}

.cv-rate-list li {
  min-height: 94px;
}

.cv-rate-list .cv-rate-alert {
  color: var(--cv-petrol);
  font-weight: 750;
}

.cv-rate-list .cv-rate-alert svg {
  stroke: var(--cv-petrol);
}

@media (max-width: 1040px) {
  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
  }

  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) .cv-route-icon {
    width: 96px;
  }

  .cv-reverse-card {
    gap: 36px;
  }
}

@media (max-width: 899px) {
  

  .cv-payout-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .cv-payout-layout .cv-payout-card,
  .cv-payout-layout .cv-payout-card-cash {
    min-height: 390px;
    grid-row: auto;
  }

  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) {
    display: flex;
    padding: 28px;
  }

  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) .cv-route-icon {
    width: 100%;
    max-height: 150px;
  }

  .cv-reverse-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-reverse-card .cv-route-icon {
    order: -1;
    max-height: 190px;
  }

  .cv-usdt-handover .cv-process-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-handover-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-handover-list .cv-process-step {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  

  

  

  

  

  

  .cv-payout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-payout-layout .cv-payout-card,
  .cv-payout-layout .cv-payout-card-cash {
    min-height: 0;
  }

  .cv-payout-layout .cv-payout-card:not(.cv-payout-card-cash) {
    padding: 24px;
  }

  .cv-reverse-card {
    gap: 24px;
    padding: 28px 24px;
    border-radius: 22px;
  }

  .cv-reverse-card .cv-section-title {
    font-size: clamp(32px, 9.5vw, 42px);
  }

  .cv-reverse-card .cv-route-icon {
    max-height: 150px;
  }

  .cv-reverse-card .cv-direction-copy p + p {
    margin-top: -4px;
  }

  .cv-rate-list li {
    min-height: 88px;
  }
}

/* The short FAQ of a landing leads on to the full /faq/ [owner 2026-09-19: «в формате "больше вопросов-ответов"»]. */
.cv-faq-more {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: #07655f;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.cv-faq-more:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cv-faq-more:active {
  opacity: 0.7;
}

/* /faq/ — the full FAQ is the same component, one list per topic; the topics take the related block's column and
   stay in view on a desktop, and on a phone they come first as a compact list of anchors. */
.cv-faq-group + .cv-faq-group {
  margin-top: 88px;
}

/* A topic is a subheading inside the list, so it sits below the H1 in size — at the section-title size the first
   topic outweighed the page's own H1 (60 px against 52 px) [self-check 2026-09-19]. */
.cv-faq-group .cv-section-title {
  margin-bottom: 28px;
  font-size: clamp(30px, 3.2vw, 42px);
}

.cv-faq-topics svg {
  transform: rotate(90deg);
}

@media (min-width: 900px) {
  .cv-faq-topics {
    position: sticky;
    top: 24px;
  }
}

@media (max-width: 899px) {
  .cv-faq-full .cv-faq-topics {
    order: 0;
  }

  .cv-faq-full .cv-faq {
    order: 1;
  }

  .cv-faq-group + .cv-faq-group {
    margin-top: 64px;
  }

  .cv-faq-topics a {
    min-height: 52px;
    padding: 10px 0;
  }
}

/* A hero without a photograph (/privacy/): one column of title and lead, nothing beside it. */
.cv-hero-grid:not(:has(.cv-hero-photo, .cv-hero-code)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'title'
    'lead'
    'actions';
}

/* 404: the code itself, large, where the photo stands on other pages [owner 2026-09-19: «Не написано "404" нигде»] */
.cv-hero-code {
  grid-area: photo;
  align-self: center;
  justify-self: end;
  margin: 0;
  color: var(--cv-petrol);
  font-size: clamp(120px, 17vw, 240px);
  font-weight: 800;
  letter-spacing: -0.06em;
  /* line-height 1: at 0.85 the glyphs ran 7 px past the hero, which clips (layout-audit, 1440 px) */
  line-height: 1;
}

@media (max-width: 899px) {
  .cv-hero-grid:has(.cv-hero-code) {
    grid-template-areas:
      'photo'
      'title'
      'lead'
      'actions';
  }

  .cv-hero-code {
    justify-self: start;
    font-size: clamp(88px, 26vw, 140px);
  }
}

/* 404: the site's sections as a grid of link cards under the hero, full width */
.cv-nf {
  padding: 72px 0 96px;
  background: var(--cv-white);
}

.cv-nf .cv-section-title {
  font-size: clamp(30px, 3.2vw, 42px);
}

.cv-nf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.cv-nf-grid a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid #d3e1e3;
  border-radius: 16px;
  background: var(--cv-white);
  color: #21414c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.cv-nf-grid a:hover {
  border-color: #9db5b8;
  color: #07655f;
}

.cv-nf-grid a:focus-visible {
  outline: 3px solid var(--cv-focus);
  outline-offset: 4px;
}

.cv-nf-grid svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (max-width: 899px) {
  .cv-nf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .cv-nf {
    padding: 48px 0 64px;
  }

  .cv-nf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* /about/ and /privacy/ — a document set in the kit's split sections: the heading on the left, the text on the right.
   Consecutive sections share the white ground, so the next one drops its top padding and a hairline marks the seam;
   the headings are subheadings of one document and stay below the H1 in size. */
.cv-doc {
  padding: 88px 0;
  background: var(--cv-white);
}

.cv-doc + .cv-doc {
  padding-top: 0;
}

.cv-doc + .cv-doc .cv-section-head {
  padding-top: 64px;
  border-top: 1px solid #dde7e8;
}

.cv-doc .cv-section-head {
  margin-bottom: 0;
}

.cv-doc .cv-section-title {
  font-size: clamp(30px, 3.2vw, 42px);
}

.cv-doc .cv-section-copy a {
  color: #07655f;
  font-weight: 700;
  text-underline-offset: 3px;
}

.cv-credits ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.cv-credits li + li {
  margin-top: 8px;
}

.cv-credits a {
  font-weight: 600;
}

.cv-credits a[rel~="license"] {
  white-space: nowrap;
}

@media (max-width: 899px) {
  .cv-doc {
    padding: 64px 0;
  }

  .cv-doc + .cv-doc .cv-section-head {
    padding-top: 48px;
  }

  .cv-doc .cv-section-head-split {
    gap: 20px;
  }
}

/* A domain name never breaks at its hyphen («crypto- / valencia.com» on a phone, /privacy/ 2026-09-19). */
.cv-nowrap {
  white-space: nowrap;
}