/* Supplements the prototype's styles.css for the server-rendered pages
   (city landings, FAQ, guides, no-JS fallback). Kept separate so the original
   file stays replaceable. */
:root{
  --ck-ink:#0b2740; --ck-soft:#4d6b80; --ck-faint:#8aa3b4;
  --ck-line:#dde8ef; --ck-surface:#fff; --ck-bg:#f4f9fc; --ck-accent:#0a7aa8;
}
.nav-link{color:inherit;text-decoration:none;font-weight:600;font-size:.9rem;opacity:.85;padding:0 .35rem}
.nav-link:hover{opacity:1;text-decoration:underline}
.language-switch{display:inline-flex;gap:4px}
.lang-btn{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:700;
  text-decoration:none;border:1px solid rgba(255,255,255,.35);color:inherit}
.lang-btn.is-active{background:var(--ck-accent);color:#fff;border-color:transparent}

.page-hero{background:var(--ck-ink);background-size:cover;background-position:center;color:#fff;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px)}
.page-hero.small{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px)}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem);margin:.4rem 0;line-height:1.1}
.page-hero .lede{max-width:60ch;opacity:.92}
.crumbs{font-size:.82rem;opacity:.8;margin-bottom:.6rem}
.crumbs a{color:inherit}
.section{padding:clamp(40px,6vw,80px) 0}
.muted{color:var(--ck-soft)}
.legal{font-size:.8rem;color:var(--ck-faint);margin-top:1.5rem}
.text-link{color:var(--ck-accent);font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px}
.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.92rem}
.data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ck-faint)}

.faq-section{padding:clamp(40px,6vw,72px) 24px}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq-list details{border:1px solid var(--ck-line);border-radius:14px;background:var(--ck-surface);overflow:hidden}
.faq-list summary{padding:16px 20px;cursor:pointer;font-weight:700;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-answer{padding:0 20px 18px;color:var(--ck-soft)}

.card-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post-card{border:1px solid var(--ck-line);border-radius:16px;background:var(--ck-surface);padding:18px;display:flex;flex-direction:column;gap:8px}
.post-card img{width:100%;border-radius:10px;aspect-ratio:16/9;object-fit:cover}
.post-card h2{font-size:1.1rem;margin:0}
.post-card h2 a{color:inherit;text-decoration:none}
.post-card time{font-size:.78rem;color:var(--ck-faint)}

.prose-page{max-width:760px}
.prose{line-height:1.75;color:var(--ck-soft)}
.prose h2,.prose h3{color:var(--ck-ink);margin-top:1.6em}
.prose img{max-width:100%;border-radius:12px}
.prose-page .cover{width:100%;border-radius:16px;margin:1rem 0 2rem}


.ns-note{padding:22px;border:1px solid var(--ck-line);border-radius:16px;background:var(--ck-surface)}
.ns-table{width:100%;border-collapse:collapse;margin-top:12px}
.ns-table th,.ns-table td{padding:10px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.9rem}

.footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.footer-links a{color:inherit;opacity:.8;font-size:.85rem}

@media (prefers-color-scheme:dark){
  :root{
    --ck-ink:#eaf3f9; --ck-soft:#a5c0d0; --ck-faint:#7395a8;
    --ck-line:#1d3a4d; --ck-surface:#102635; --ck-bg:#081a26;
  }
  .faq-list details,.post-card,.ns-note{background:var(--ck-surface);border-color:var(--ck-line);color:var(--ck-ink)}
}

/* --- funnel additions (honeypot, validation, consent) ------------------ */
.ck-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  overflow:hidden!important;opacity:0!important;pointer-events:none}
.field-error{display:block;color:#c02c2c;font-weight:600;font-size:.78rem;margin-top:4px}
input[aria-invalid="true"]{border-color:#c02c2c!important;outline-color:#c02c2c}
.market-note.error{border-color:#e8b4b4;background:#fdf1f1;color:#8f2020}
.toggle.consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;font-size:.88rem;line-height:1.4}
.toggle.consent input{margin-top:3px;flex:0 0 auto}
.rate-benchmark{font-size:.72rem;color:var(--ck-faint);margin-top:10px;text-align:center}
.primary-btn[disabled]{opacity:.6;cursor:progress}
.step-tab[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media (prefers-color-scheme:dark){
  .market-note.error{background:#3a1d1d;border-color:#5e2b2b;color:#ffb9b9}
  .field-error{color:#ff9b9b}
}

/* --- market position ---------------------------------------------------- */
.mp-note{margin:18px 0 0;padding:14px 16px;border:1px solid var(--ck-line);border-left:4px solid var(--ck-accent);
  border-radius:10px;background:var(--ck-surface);font-size:.92rem;line-height:1.55}
.city-mp{display:block;font-size:.72rem;color:var(--ck-faint);margin-top:2px}
.compare-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:520px}
.compare-table th,.compare-table td{padding:10px 12px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.9rem}
.compare-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ck-faint)}
.compare-table .num{text-align:right}
.compare-table tr.is-current{background:color-mix(in srgb,var(--ck-accent) 10%,transparent);font-weight:700}
.linkish{background:none;border:0;color:var(--ck-accent);font-weight:700;cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:6px}
.linkish:hover{background:color-mix(in srgb,var(--ck-accent) 14%,transparent)}
.linkish:focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px}

/* --- topbar: the prototype's mobile rules assumed no text nav ------------ */
.topbar .nav-link{white-space:nowrap}
a.primary-btn,a.secondary-btn{text-decoration:none}
@media (max-width:900px){
  /* "Your guided path" is the longest label and the only one duplicated by the
     hero CTA, so it goes first; FAQ and Guides stay reachable. */
  .topbar .nav-link-wide{display:none}
  .top-actions{gap:8px}
  .topbar .nav-link{font-size:.82rem;padding:0 .2rem}
}
@media (max-width:520px){
  /* Below this the language switch alone needs the room; FAQ and Guides are
     repeated in the footer of every page. */
  .topbar .nav-link{display:none}
}


/* --- RTL ------------------------------------------------------------------
   styles.css carries `.rtl .push{...}` but nothing ever gets class="rtl" —
   the direction lives on <html dir>. The primary button therefore stayed
   pinned to the left on Hebrew pages. */
html[dir="rtl"] .actions .push{margin-left:0;margin-right:auto}
html[dir="rtl"] .compare-table th,
html[dir="rtl"] .compare-table td,
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td{text-align:right}
html[dir="rtl"] .compare-table .num,
html[dir="rtl"] .data-table .num{text-align:left}
html[dir="rtl"] .mp-note{border-left:0;border-right:4px solid var(--ck-accent)}

/* --- бренд ---------------------------------------------------------------
   Логотип задаётся в Настройках; высота фиксирована, ширина по пропорциям,
   поэтому замена файла другого формата не ломает шапку. */
/* Новый логотип заметно шире прежнего (пропорции 5:1 против 4:1), поэтому
   при той же высоте он занимал в шапке больше места. Высота уменьшена, чтобы
   шапка не перевешивала первый экран. */
.brand-logo{height:34px;width:auto;display:block}
@media (max-width:720px){ .brand-logo{height:26px} }
.footer-logo{height:32px;width:auto;display:block;margin-bottom:10px}
@media (max-width:720px){ .footer-logo{height:26px} }

/* --- home: city cards --------------------------------------------------
   Заменяют прежнюю полоску .city-mini (маленькое фото + строка цены).
   Цена и медиана из карточек убраны намеренно: они перегружали первый
   экран. Числа остались в таблице ниже и на страницах городов, поэтому
   поисковики и AI-клиенты ничего не потеряли.
   Правила живут здесь, а не в styles.css: этот файл подключается вторым,
   так что переопределяет прототип, и его можно заменить целиком. */
.city-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:-56px;
  position:relative;
  z-index:4;
  /* Полоса уже контейнера: пять карточек 3:4 во всю ширину получались
     слишком высокими и отжимали воронку вниз. */
  max-width:960px;
  margin-inline:auto;
}
.city-card{margin:0}
.city-card-link{
  position:relative;display:block;overflow:hidden;
  border-radius:18px;background:#0d3443;color:#fff;text-decoration:none;
  box-shadow:0 14px 36px rgba(9,43,57,.22);
  transition:transform .25s ease,box-shadow .25s ease;
}
.city-card-link:hover,.city-card-link:focus-visible{
  transform:translateY(-3px);box-shadow:0 22px 52px rgba(9,43,57,.30);
}
.city-card-link:focus-visible{outline:3px solid #86efff;outline-offset:3px}
.city-card-media{display:block;aspect-ratio:3/4;background:#0d3443}
.city-card-media img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.city-card-link:hover .city-card-media img{transform:scale(1.05)}
/* Подпись лежит на фото, как в присланном примере, а не под ним. */
.city-card-body{
  position:absolute;inset:auto 0 0 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:16px 14px 15px;
  /* Вуаль лёгкая и низкая: она нужна только под двумя строками текста.
     Плотная закрывала половину фотографии — ради читаемости подписи мы
     прятали то, ради чего карточка и существует. */
  background:linear-gradient(0deg,rgba(4,26,36,.90) 0%,rgba(4,26,36,.58) 52%,rgba(4,26,36,0) 100%);
}
.city-card-name{
  font-size:17px;line-height:1.15;letter-spacing:-.02em;font-weight:800;
  display:inline-flex;align-items:center;gap:7px;
}
/* Стрелка вместо кнопки на каждой карточке.
   Пять одинаковых кнопок стояли прямо под «Explore my buying power» и
   спорили с ней — на первом экране должно быть одно действие. Ссылка теперь
   вся карточка целиком, а стрелка лишь подсказывает это при наведении. */
.city-card-name::after{
  content:"→";font-weight:600;opacity:0;transform:translateX(-5px);
  transition:opacity .2s ease,transform .2s ease;
}
.city-card-link:hover .city-card-name::after,
.city-card-link:focus-visible .city-card-name::after{opacity:1;transform:none}
/* На тач-экранах наведения нет — там стрелка видна всегда, приглушённо. */
@media (hover:none){
  .city-card-name::after{opacity:.65;transform:none}
}
.city-card-tag{
  font-size:11.5px;font-weight:500;letter-spacing:0;line-height:1.3;
  color:rgba(255,255,255,.80);
}

/* Пять колонок помещаются только на широком экране. Свои media-запросы
   обязательны: правила прототипа для .city-strip стоят в файле выше и
   больше не выигрывают.

   Ниже 1100px это не сетка, а горизонтальная лента. Причина простая: городов
   пять — нечётное число, и любая сетка (3+2 или 2+2+1) оставляет дырку в
   последнем ряду. А если сложить карточки в столбик, пять больших фотографий
   отодвигают кнопку «Explore my buying power» на два экрана вниз — ровно то,
   от чего мы уходим. Лента держит блок высотой в одну карточку. */
@media(max-width:1100px){
  .city-strip{
    display:flex;
    gap:14px;
    margin-top:-52px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    /* Тень карточек не должна срезаться краем прокрутки. */
    padding:8px 4px 16px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .city-card{flex:0 0 232px;scroll-snap-align:start}
}
@media(max-width:560px){
  .city-strip{margin-top:-34px;gap:12px}
  .city-card{flex:0 0 74vw;max-width:290px}
  .city-card-name{font-size:19px}
  .city-card-tag{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .city-card-link,.city-card-media img,.city-card-name::after{transition:none}
  .city-card-link:hover{transform:none}
  .city-card-link:hover .city-card-media img{transform:none}
}

/* --- home: варианты фона первого экрана ---------------------------------
   Выбирается в админке (Настройки → Brand & images → Hero style) и попадает
   в атрибут data-bg на <section class="hero">. Смысл всех вариантов, кроме
   classic, один: убрать из фона детали, которые перетягивают взгляд с
   заголовка и кнопки. Фото при этом остаётся тем же — меняется только его
   обработка, поэтому переключение не требует новых файлов. */

/* 1. classic — как в прототипе: цветной диагональный градиент. Оставлен,
      чтобы можно было вернуться одним кликом. Правил не требует. */

/* 2. calm — фото приглушено, вуаль ровная: контраст текста везде одинаковый. */
.hero[data-bg="calm"] .hero-media{filter:saturate(.55) brightness(.82) contrast(.95)}
.hero[data-bg="calm"] .hero-overlay{
  background:linear-gradient(90deg,rgba(6,32,44,.88) 0%,rgba(6,32,44,.74) 55%,rgba(6,32,44,.62) 100%);
}

/* 3. mist — фото размыто: остаются только большие пятна света и цвета. */
/* blur размывает и кромку элемента, поэтому фото увеличено — иначе по
   периметру видна светлая рамка. Обрезка секции задана ниже, для всех
   вариантов сразу. */
.hero[data-bg="mist"] .hero-media{
  filter:blur(9px) saturate(.6) brightness(.86);
  transform:scale(1.08);
}
.hero[data-bg="mist"] .hero-overlay{
  background:linear-gradient(90deg,rgba(7,34,47,.86) 0%,rgba(7,34,47,.70) 60%,rgba(7,34,47,.58) 100%);
}

/* ------------------------------------------------------------------------
   ВАРИАНТЫ БЕЗ ФОТОГРАФИИ

   Фон рисуется средствами CSS: ни одного лишнего файла, ничего не грузится,
   картинка не «шумит» деталями. Фотография при этом остаётся в настройках —
   переключение обратно на classic возвращает её без правки полей.
   ------------------------------------------------------------------------ */
.hero[data-bg="ink"] .hero-media,
.hero[data-bg="aurora"] .hero-media,
.hero[data-bg="blueprint"] .hero-media,
.hero[data-bg="horizon"] .hero-media,
.hero[data-bg="silk"] .hero-media{display:none}

/* Крупные тёмные градиенты на 8-битном экране идут полосами. Едва заметное
   зерно поверх их разбивает — приём из полиграфии, на глаз не читается, но
   переход становится гладким. Картинка встроена как data:, отдельного запроса
   нет; CSP разрешает data: в img-src. */
.hero[data-bg="ink"] .hero-overlay::before,
.hero[data-bg="aurora"] .hero-overlay::before,
.hero[data-bg="blueprint"] .hero-overlay::before,
.hero[data-bg="horizon"] .hero-overlay::before,
.hero[data-bg="silk"] .hero-overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* 4. ink — ровная глубина, ничего кроме света в углу. Самый тихий вариант. */
.hero[data-bg="ink"] .hero-overlay{
  background:radial-gradient(90% 80% at 8% 18%,rgba(19,120,150,.55) 0%,rgba(19,120,150,0) 62%),
             linear-gradient(135deg,#0d3b4f 0%,#092b39 55%,#071f2a 100%);
}

/* 6. aurora — четыре мягких свечения бирюзой поверх глубокого синего.
      Ближайший аналог — «mesh gradient»: цвет есть, деталей нет, поэтому
      взгляду не за что зацепиться, кроме заголовка и кнопки. */
.hero[data-bg="aurora"] .hero-overlay{
  background:
    radial-gradient(46% 62% at 17% 20%,rgba(19,185,181,.32) 0%,rgba(19,185,181,0) 70%),
    radial-gradient(42% 56% at 70% 10%,rgba(0,141,181,.36) 0%,rgba(0,141,181,0) 72%),
    radial-gradient(58% 66% at 90% 76%,rgba(12,125,159,.28) 0%,rgba(12,125,159,0) 70%),
    radial-gradient(52% 60% at 32% 96%,rgba(4,60,84,.55) 0%,rgba(4,60,84,0) 72%),
    linear-gradient(160deg,#0a3245 0%,#07293a 46%,#051c29 100%);
}

/* 7. blueprint — тонкая архитектурная сетка. Отсылка к чертежу дома, но
      линии почти не видны: сетка гаснет к краям, чтобы не превращаться
      в таблицу. */
.hero[data-bg="blueprint"] .hero-overlay{
  background:
    radial-gradient(64% 72% at 10% 16%,rgba(19,185,181,.26) 0%,rgba(19,185,181,0) 68%),
    linear-gradient(140deg,#0c3546 0%,#092838 52%,#071e2a 100%);
}
.hero[data-bg="blueprint"] .hero-overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/100% 68px,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/68px 100%;
  /* Маска гасит сетку по краям: в центре она читается, к периметру уходит. */
  -webkit-mask-image:radial-gradient(78% 82% at 30% 42%,#000 0%,transparent 78%);
  mask-image:radial-gradient(78% 82% at 30% 42%,#000 0%,transparent 78%);
}

/* 8. horizon — абстрактный рассвет над водой: тёплая полоса внизу берёт
      золото из логотипа, верх остаётся тёмным, текст лежит на самом ровном
      участке. Никакого пейзажа — только свет. */
.hero[data-bg="horizon"] .hero-overlay{
  background:
    radial-gradient(58% 34% at 50% 90%,rgba(255,180,59,.26) 0%,rgba(255,180,59,0) 64%),
    radial-gradient(92% 52% at 50% 98%,rgba(19,185,181,.36) 0%,rgba(19,185,181,0) 64%),
    linear-gradient(180deg,#05161f 0%,#072536 46%,#0b3d52 100%);
}

/* 9. silk — одна широкая диагональная «складка» света. Спокойнее всех
      цветных вариантов и при этом не выглядит пустым. */
.hero[data-bg="silk"] .hero-overlay{
  background:
    linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.055) 47%,rgba(255,255,255,0) 60%),
    radial-gradient(70% 80% at 78% 8%,rgba(0,141,181,.30) 0%,rgba(0,141,181,0) 66%),
    linear-gradient(118deg,#0b3346 0%,#082a3b 42%,#05202e 100%);
}

/* 5. sand — тёплая нейтральная вуаль, фото едва читается фактурой. */
.hero[data-bg="sand"] .hero-media{filter:saturate(.35) brightness(.78) sepia(.18)}
.hero[data-bg="sand"] .hero-overlay{
  background:linear-gradient(90deg,rgba(28,32,30,.90) 0%,rgba(24,32,34,.76) 55%,rgba(20,30,34,.64) 100%);
}

/* Спокойные варианты не нуждаются в 760px высоты: чем короче первый экран,
   тем раньше видна кнопка. classic оставлен как был. */
.hero:not([data-bg="classic"]){min-height:660px}
@media(max-width:980px){
  .hero:not([data-bg="classic"]){min-height:760px}
}

/* --- варианты стыка полосы городов с фотографией -------------------------
   Карточки городов стоят на границе первого экрана и светлой части страницы.
   Сама граница — прямая линия среза фотографии, и именно она выглядит
   случайной: полоса будто легла поверх шва, а не задумана вместе с ним.
   Ниже шесть разных ответов на этот вопрос. Выбирается в админке
   (Настройки → Home page — where the city strip meets the photo) и попадает
   в атрибут data-strip на первом экране и на самой полосе. ------------- */

/* 1. flush — перекрытия нет вовсе. Фотография заканчивается, полоса стоит
      ниже, на светлом. Самый спокойный вариант: шва нет, потому что нечему
      его образовывать. */
.city-strip[data-strip="flush"]{margin-top:34px}

/* 2. fade — фотография растворяется в цвете страницы. Прямой линии нет,
      карточки плывут в градиенте. */
.hero[data-strip="fade"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:210px;
  background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%);
  pointer-events:none;z-index:1;
}

/* 3. slab — полоса лежит на собственной белой плите со скруглённым верхом.
      Шов превращается в край предмета: видно, что так и задумано. */
.city-strip[data-strip="slab"]{
  /* Цвет литералом, а не через --ck-surface. Эта переменная в тёмной теме
     браузера становится тёмно-синей, а первый экран и секция под ним заданы
     в styles.css светлыми и на тему не реагируют: плита оказалась бы тёмным
     пятном на светлой странице. */
  background:#fff;
  padding:14px;border-radius:24px;
  margin-top:-84px;
  /* Плита шире обычного: её собственные поля съедали ширину карточек, и
     названия из двух слов переносились на вторую строку — ряд переставал
     читаться как ряд. */
  max-width:1020px;
  box-shadow:0 -8px 44px rgba(9,43,57,.20),0 24px 56px rgba(9,43,57,.16);
}

/* 4. wave — низ фотографии выгнут дугой. Отсылка к береговой линии, и
      прямой линии на экране не остаётся. */
.hero[data-strip="wave"]{overflow:hidden}
.hero[data-strip="wave"]::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-8%;right:-8%;bottom:-96px;height:190px;
  background:#f8fbfc;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

/* 5. notch — фотография «расступается»: снизу вырезано окно ровно под
      полосу, карточки стоят в нём. */
.hero[data-strip="notch"]::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:50%;transform:translateX(-50%);
  bottom:0;width:min(1000px,calc(100% - 24px));height:104px;
  background:#f8fbfc;border-radius:26px 26px 0 0;
}

/* 6. stagger — линию ломают сами карточки: чётные опущены. Срез фотографии
      остаётся прямым, но глаз читает ритм, а не шов. */
.hero[data-strip="stagger"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:210px;
  background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%);
  pointer-events:none;z-index:1;
}
.city-strip[data-strip="stagger"]{margin-top:-74px;align-items:start}
.city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:translateY(30px)}

/* Карточки всегда выше любой из этих подложек. */
.city-strip{z-index:4}

@media(max-width:1100px){
  /* Ниже 1100px полоса перестаёт быть рядом из пяти карточек и становится
     горизонтальной лентой. Приёмы, придуманные для ряда, здесь ломаются:
     вырез оказывается не по месту, а белая плита вокруг прокрутки читается
     не как рамка, а как обрезка — последняя карточка упирается в её край.
     Поэтому оба варианта переходят в мягкий низ: шва нет, ленте ничего не
     мешает. */
  .hero[data-strip="notch"]::after{display:none}
  .city-strip[data-strip="slab"]{
    background:none;padding:0;border-radius:0;box-shadow:none;
    max-width:none;margin-top:-52px;
  }
  .hero[data-strip="slab"]::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:190px;
    background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%);
    pointer-events:none;z-index:1;
  }
  .city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:none}
  .hero[data-strip="wave"]::after{bottom:-70px;height:140px}
}
@media(prefers-reduced-motion:reduce){
  .city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:translateY(30px)}
}


/* Первый экран обрезается по своим границам.
 *
 * Не косметика: .hero-media увеличен на 1% (transform:scale(1.01) в
 * styles.css — так прячут кромку фотографии), и эти лишние ~4px вылезали
 * ПОД низ первого экрана, уже на светлую часть страницы. Вуаль туда не
 * достаёт, поэтому под фотографией шла тонкая тёмная черта во всю ширину —
 * она и делала стык похожим на случайный шов. Тень карточки с ценой
 * укладывается внутрь, ничего нужного не срезается.
 */
.hero{overflow:hidden}