/* ============================================================
   CANVAZ Palette Cherngtalay — design system
   Идиома apple-design (материалы, отклик, типографика, доступность)
   Палитра — из фирменного стиля проекта: тил, шалфей, крем, коралл.
   Ноль зависимостей. Системные шрифты. Мобайл-ферст.
   ============================================================ */

:root{
  /* бренд */
  --teal:#0E6E63;      --teal-d:#0A544B;   --teal-l:#158C7E;
  --sage:#6E8F97;      --sage-d:#4E727B;   --sage-l:#D7E4E6;
  --cream:#F2EFC6;     --cream-d:#E4DFA2;
  --coral:#E85F27;     --coral-d:#B04317;  --coral-l:#FF8A4C;
  --sun:#F5A623;
  /* нейтральные */
  --ink:#12211F;       --ink2:#37504E;     --mut:#587069;
  --bg:#FBFAF5;        --bg2:#F4F2EA;      --card:#fff;
  --line:rgba(14,110,99,.11); --line2:rgba(14,110,99,.20);
  --wa:#15873D;        --tg:#2AABEE;
  /* геометрия */
  --r:16px; --r-lg:24px; --r-sm:10px; --pill:980px;
  --wrap:1120px;
  --cta-h:0px;
  /* тени */
  --sh1:0 1px 2px rgba(18,33,31,.05);
  --sh2:0 6px 24px rgba(18,33,31,.07);
  --sh3:0 18px 48px rgba(18,33,31,.11);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{
  font:100%/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px;
}
body{background:var(--bg);color:var(--ink);font-optical-sizing:auto;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal);text-decoration:none}
main p a:not(.btn),main li a:not(.btn),p.upd a,.answer a:not(.btn),footer .fine a{text-decoration:underline;text-underline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--sh2)}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.nowrap{white-space:nowrap}

/* ───────────────────────── типографика ───────────────────── */
h1,h2,h3,h4{letter-spacing:-.028em;font-weight:600;line-height:1.12}
h1{font-size:clamp(2.15rem,5.6vw,3.9rem);letter-spacing:-.038em;line-height:1.04;
  margin-bottom:clamp(16px,2vw,24px)}
/* Общий сброс полей обнулял отступ под H1, и заголовок ложился прямо на
   следующий блок — заметнее всего на карточке «Кратко». В герое отступ
   не нужен: там у подзаголовка свой margin-top. */
.hero h1{margin-bottom:0}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:14px}
h3{font-size:1.0625rem;line-height:1.3;letter-spacing:-.014em}
h4{font-size:.9375rem;letter-spacing:-.01em}
p{line-height:1.62}
.lead{font-size:clamp(1.02rem,1.9vw,1.15rem);line-height:1.6;color:var(--ink2);max-width:62ch}
.sub{font-size:.9375rem;color:var(--mut)}
.upd,.note,.agree,.fine{font-size:.875rem;color:var(--mut)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.eyebrow.coral{color:var(--coral-d)}
b,strong{font-weight:600}
main section{padding:clamp(44px,6vw,76px) 0}
main section.tight{padding-top:0}
/* Секция без верхнего отступа сразу после цветной полосы: содержимое
   упиралось в её край вплотную (зазор ровно 0) и читалось как приклеенное
   к полосе. Даём воздух — но только в этом сочетании, чтобы не раздувать
   остальные «tight»-секции, где нулевой отступ и задуман. */
main section.band + section.tight{padding-top:clamp(30px,4vw,52px)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ───────────────────────── шапка ─────────────────────────── */
header{position:sticky;top:0;z-index:60;background:rgba(251,250,245,.76);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;min-height:58px}
.logo{display:flex;align-items:baseline;gap:7px;flex:0 0 auto;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.logo em{font-style:normal;color:var(--teal);font-weight:700;letter-spacing:.02em}
.logo span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:500}
.nav nav{display:flex;gap:16px;font-size:13.5px;margin-left:auto;align-items:center}
.nav nav a{color:var(--ink2);padding:9px 0;white-space:nowrap;transition:color .14s ease-out}
.nav nav a:hover{color:var(--teal)}
.nav nav a[aria-current]{color:var(--ink);font-weight:600}
.nav .htail{display:flex;align-items:center;gap:9px;margin-left:14px;flex:0 0 auto}
.lang-sw{display:inline-flex;background:rgba(110,143,151,.14);border-radius:var(--pill);padding:2px;font-size:12.5px;font-weight:600}
.lang-sw a,.lang-sw b{padding:5px 11px;border-radius:var(--pill);color:var(--sage-d);font-weight:600}
.lang-sw b{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(18,33,31,.1)}
.burger{display:none;width:40px;height:40px;border:0;background:rgba(110,143,151,.14);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}
@media(max-width:1060px){
  .nav nav{display:none}
  .burger{display:flex}
  .nav nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,250,245,.98);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);padding:6px 22px 16px;font-size:15px;max-height:78vh;overflow:auto}
  .nav nav.open a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav nav.open a:last-child{border-bottom:0}
}

/* ───────────────────────── кнопки ────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--teal);color:#fff!important;border:0;border-radius:var(--pill);
  padding:12px 22px;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none!important;position:relative;overflow:hidden;
  transition:transform .12s ease-out,background .18s ease-out,box-shadow .18s ease-out;
  touch-action:manipulation;min-height:44px}
.btn:hover{background:var(--teal-d)}
.btn:active{transform:scale(.975)}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  animation:btnShine 4.4s ease-in-out infinite}
@keyframes btnShine{0%{left:-60%}18%{left:130%}100%{left:130%}}
.btn-o{background:rgba(110,143,151,.14);color:var(--ink)!important}
.btn-o:hover{background:rgba(110,143,151,.22)}
.btn-o::before{display:none}
.btn-coral{background:var(--coral);color:var(--ink)!important}
.btn-coral:hover{background:var(--coral-l)}
.btn-wa{background:var(--wa)}.btn-wa:hover{background:#0F7A3D}
.btn-tg{background:var(--tg)}.btn-tg:hover{background:#1F94D2}
.btn-sm{padding:9px 16px;font-size:13.5px;min-height:38px}
.btn-lg{padding:15px 28px;font-size:16px;min-height:52px}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.i{width:15px;height:15px;flex:0 0 auto;vertical-align:-2px}

/* ───────────────────────── герой ─────────────────────────── */
/* Картинка героя — <img> под градиентом (::after, z-index −1), а не фон секции. */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:#0A544B center/cover no-repeat;min-height:clamp(500px,74vh,760px);
  display:flex;align-items:flex-end;padding:120px 0 40px}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,40,38,.60) 0%,rgba(10,40,38,.18) 34%,rgba(8,32,30,.55) 72%,rgba(8,30,28,.88) 100%)}
.hero .wrap{width:100%}
.hero h1{color:#fff;max-width:19ch}
.hero .hsub{margin-top:16px;font-size:clamp(1.02rem,2vw,1.24rem);line-height:1.5;color:rgba(255,255,255,.9);max-width:46ch}
.hero .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:var(--pill);
  padding:6px 13px;font-size:12.5px;font-weight:600;letter-spacing:-.005em;
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.chip.cream{background:var(--cream);border-color:var(--cream-d);color:#3E4A16}
.chip.coral{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.hero .cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.hero .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:34px}
.hero .fact{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border-radius:var(--r);padding:15px 16px}
.fact b{display:block;font-size:1.34rem;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.fact span{display:block;font-size:.78rem;margin-top:4px;opacity:.8}
.hero .fact b{color:#fff}.hero .fact span{color:rgba(255,255,255,.82)}

/* волна-разделитель («The Hidden Curva») */
.curva{display:block;width:100%;height:auto;color:var(--bg)}
.curva.up{transform:rotate(180deg)}

/* ───────────────────────── «Кратко» ──────────────────────── */
.answer{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px);box-shadow:var(--sh1);margin:0 0 6px}
.answer .lbl{display:inline-block;background:rgba(14,110,99,.10);color:var(--teal-d);
  border-radius:var(--pill);padding:4px 12px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;margin-right:10px;vertical-align:2px}
.answer .lead{display:inline;font-size:1.0625rem;color:var(--ink)}
.answer .facts{list-style:none;margin-top:16px;display:grid;gap:9px}
.answer .facts li{padding-left:23px;position:relative;color:var(--ink2);font-size:.9375rem}
.answer .facts li::before{content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;
  border-radius:50%;background:var(--coral)}
.answer .upd{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}

/* ───────────────────────── сетки и карточки ──────────────── */
.grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,3vw,38px);align-items:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.zones>*{min-width:0}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease-out}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.card h3{margin-bottom:6px}
.card p{font-size:.9375rem;color:var(--mut)}
.card .num{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--teal);display:block;margin-bottom:2px}
a.card{color:inherit;display:block}
.card.tealbg{background:linear-gradient(150deg,var(--teal-d),var(--teal));border-color:transparent;color:#fff}
.card.tealbg h3,.card.tealbg .num{color:#fff}
.card.tealbg p{color:rgba(255,255,255,.85)}
.card.tealbg ul.tick li,.card.tealbg ul.dash li{color:rgba(255,255,255,.92)}
.card.tealbg ul.tick li::before{background:rgba(255,255,255,.22) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F2EFC6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat}
.card.tealbg ul.dash li::before{background:rgba(255,255,255,.5)}
.card.tealbg b,.card.tealbg strong{color:#fff}
.card.creambg ul.tick li{color:#3E4A16}
/* .lead ограничен 62ch ради читаемой длины строки в широком тексте. Внутри
   карточки ширину задаёт сама карточка, и это ограничение только рвало
   вёрстку: в блоке «One letter apart» текст обрывался на 501px при карточке
   758px, оставляя четверть плашки пустой. */
.card .lead{max-width:none}
.card.sagebg .eyebrow{color:var(--teal-d)}
.card.creambg{background:linear-gradient(150deg,#FBF8DC,var(--cream));border-color:var(--cream-d)}
.card.sagebg{background:linear-gradient(150deg,#EAF1F2,var(--sage-l));border-color:rgba(110,143,151,.3)}
.photo{border-radius:var(--r);width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg2)}
.photo.tall{aspect-ratio:3/4}
.photo.plan{aspect-ratio:16/10;height:auto;object-fit:contain;background:#fff;border:1px solid var(--line);padding:8px;cursor:zoom-in}
figure{margin:0}
figcaption{font-size:.8125rem;color:var(--mut);margin-top:8px}
ul.tick{list-style:none;display:grid;gap:10px;margin:14px 0}
ul.tick li{padding-left:26px;position:relative;font-size:.9375rem;color:var(--ink2)}
ul.tick li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border-radius:50%;
  background:rgba(14,110,99,.12) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6E63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat}
ul.dash{list-style:none;display:grid;gap:8px;margin:12px 0}
ul.dash li{padding-left:16px;position:relative;font-size:.9375rem;color:var(--ink2)}
ul.dash li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--sage)}
main ol{padding-left:20px;display:grid;gap:10px;margin:14px 0}
main ol li{font-size:.9375rem;color:var(--ink2);padding-left:4px}
main ol li::marker{color:var(--teal);font-weight:600}

/* секция на цветном фоне */
.band{background:var(--bg2)}
.band-teal{background:linear-gradient(160deg,var(--teal-d),var(--teal));color:#fff}
.band-teal h2,.band-teal h3{color:#fff}
.band-teal p,.band-teal li{color:rgba(255,255,255,.86)}
.band-teal .eyebrow{color:var(--cream)}
.band-teal .card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.band-teal .card p{color:rgba(255,255,255,.8)}
.band-teal .card .num{color:var(--cream)}
.band-teal ul.tick li{color:rgba(255,255,255,.88)}
.band-teal ul.tick li::before{background:rgba(255,255,255,.2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F2EFC6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat}

/* ───────────────────────── таблицы ───────────────────────── */
.tbl-scroll{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  -webkit-overflow-scrolling:touch;position:relative}
table{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--card)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:600;font-size:.75rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;
  background:rgba(110,143,151,.07);position:sticky;top:0;z-index:1}
td.wrap-cell,th.wrap-cell{white-space:normal}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(14,110,99,.03)}
td b{font-weight:600}
.num-cell{font-variant-numeric:tabular-nums}
.scroll-hint{font-size:.8125rem;color:var(--mut);margin-top:8px}
@media(max-width:640px){th,td{padding:10px 11px;font-size:.875rem}}

/* ───────────────────────── галерея ───────────────────────── */
.tabs{display:inline-flex;background:rgba(110,143,151,.12);border-radius:13px;padding:3px;gap:2px;flex-wrap:wrap;max-width:100%}
.tabs button{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:500;
  padding:8px 15px;border-radius:10px;cursor:pointer;color:var(--ink2);transition:color .12s,background .12s;min-height:38px}
.tabs button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(18,33,31,.1),0 0 0 .5px rgba(18,33,31,.04)}
/* Галерея. Раньше первая картинка занимала две колонки и имела соотношение
   16/9, а соседние — 16/10 в одну колонку. В одном ряду это давало разную
   высоту: большая 299px, соседние 163px, и под ними зияло 136px пустоты.
   Поэтому сетка ровная: одинаковое соотношение у всех, auto-fit сам
   раскладывает 3 или 4 карточки во всю ширину без дыр. */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.gal>*{min-width:0}
.gal img{border-radius:var(--r);aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;cursor:zoom-in;background:var(--bg2)}
.gal img.pos-low{object-position:50% 66%}
/* Планировка в ленте лота: показываем чертёж целиком, а не кадрируем. */
.gal img.fit{object-fit:contain;background:#fff}
/* Одиночная картинка — это мастер-план. Кадрировать его нельзя: cover срезал
   бы часть чертежа, а по плану читают расположение корпусов, поэтому contain.
   Соотношение задано явно (3/2 — почти совпадает с исходными 1600×1088),
   чтобы место резервировалось до загрузки: с aspect-ratio:auto у ленивой
   картинки высота бокса нулевая, и при переключении вкладки вёрстка прыгает. */
.gal:has(img:only-child) img{aspect-ratio:3/2;object-fit:contain}
.lb{position:fixed;inset:0;z-index:120;background:rgba(9,26,24,.94);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
/* Лайтбокс — лента со «прилипанием» кадра. Свайп и инерцию даёт сам браузер
   (scroll-snap), рукописный тач-обработчик не нужен и не конфликтует с
   вертикальной прокруткой. overscroll-behavior:contain — свайп в конце ленты
   не листает историю браузера назад. Приём взят из галереи Оливы. */
.lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;
  scroll-snap-align:center;padding:56px 8px 72px;box-sizing:border-box;border-radius:8px}
@media(max-width:760px){.lb-track img{padding:60px 4px 76px}}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lb .nav:hover{background:rgba(255,255,255,.3)}
.lb .nav[disabled]{opacity:.3;cursor:default}
.lb .prev{left:14px}.lb .next{right:14px}
@media(max-width:560px){.lb .nav{width:40px;height:40px;font-size:22px}.lb .prev{left:6px}.lb .next{right:6px}}
.lb .cnt{position:absolute;top:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);
  font-size:13px;background:rgba(0,0,0,.35);border-radius:999px;padding:4px 12px;z-index:2}
/* z-index обязателен: .lb-track идёт в разметке ПОСЛЕ крестика и позиционирован
   абсолютно, поэтому без него перекрывает кнопку и клик уходит в картинку —
   лайтбокс закрывался только по Esc. */
.lb .x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;z-index:3;
  background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.lb .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:13px;padding:0 20px}

/* ───────────────────────── прогресс / полосы ─────────────── */
.trow{display:grid;grid-template-columns:minmax(132px,auto) 1fr auto;align-items:center;gap:14px;
  font-size:.9375rem;padding:11px 0;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.track{height:7px;border-radius:99px;background:rgba(110,143,151,.18);overflow:hidden}
.track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--teal-l))}
.track span.coral{background:linear-gradient(90deg,var(--coral),var(--sun))}
.tnum{color:var(--mut);font-size:.875rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:660px){.trow{grid-template-columns:1fr;gap:6px}.tnum{white-space:normal}}

/* ───────────────────────── FAQ ───────────────────────────── */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;margin-bottom:8px;transition:border-color .15s}
details[open]{border-color:var(--line2)}
details summary{cursor:pointer;font-weight:600;font-size:.99rem;letter-spacing:-.012em;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230E6E63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3.5v11M3.5 9h11'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .18s}
details[open] summary::after{transform:rotate(45deg)}
details .body{margin-top:12px;color:var(--ink2);font-size:.9375rem}
details .body p+p{margin-top:9px}
details .body ul{margin:9px 0}

/* ───────────────────────── промо ─────────────────────────── */
.promo{background:linear-gradient(140deg,#FBF8DC 0%,var(--cream) 60%,#F7E7B6 100%);
  border:1px solid var(--cream-d);border-radius:var(--r-lg);padding:clamp(22px,3.4vw,34px)}
.promo .p-tag{display:inline-block;background:var(--coral);color:var(--ink);border-radius:var(--pill);
  padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:12px}
.promo h2{color:#2E3A0E}
.promo ul.tick li{color:#3E4A16}
.promo ul.tick li::before{background:rgba(232,95,39,.16) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CC4E1B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat}

/* ───────────────────────── форма ────────────────────────── */
.lead-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,40px);box-shadow:var(--sh2);max-width:760px;margin:0 auto;text-align:center}
.lead-box h2{margin-bottom:8px}
.leadform{margin-top:22px;text-align:left}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.lf-row{grid-template-columns:1fr}}
.lf-field{display:block}
.lf-field>span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink2);margin-bottom:6px}
.lf-field>span small{font-weight:400;color:var(--mut)}
.lf-field input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);min-height:46px}
.lf-field input::placeholder{color:#9EAEAD}
.lf-field.is-invalid input,.lf-consent.is-invalid{border-color:var(--coral-d)}
.lf-field.is-invalid input{border-color:var(--coral-d)}
.lf-err{color:var(--coral-d);font-size:.8125rem;margin-top:5px}
/* ── intl-tel-input: подгон под систему (флаг + код страны слева от поля) ── */
.iti{display:block;width:100%}
.iti input[type=tel]{width:100%}
.iti__selected-country{border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--bg2);
  border-right:1px solid var(--line2)}
.iti__selected-country:hover,.iti__selected-country:focus{background:rgba(14,110,99,.07)}
.iti__selected-dial-code{font-size:15px;color:var(--ink2)}
.iti__dropdown-content{border:1px solid var(--line2);border-radius:var(--r-sm);
  box-shadow:0 18px 40px rgba(16,42,44,.16);font-size:14.5px}
.iti__country.iti__highlight{background:rgba(14,110,99,.09)}
.iti__dial-code{color:var(--mut)}
.iti__search-input{font:inherit;font-size:15px;padding:10px 12px;border-bottom:1px solid var(--line2)}
.lf-field.is-invalid .iti__selected-country{border-color:var(--coral-d)}
.chan-q{font-size:.8125rem;color:var(--ink2);margin:16px 0 8px;font-weight:600}
.chan{display:flex;gap:8px;flex-wrap:wrap}
.chan label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  border-radius:var(--pill);padding:9px 15px;font-size:13.5px;cursor:pointer;background:#fff;min-height:42px}
.chan label:has(input:checked){border-color:var(--teal);background:rgba(14,110,99,.07);font-weight:600}
.chan input{accent-color:var(--teal);margin:0}
.lf-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.8125rem;color:var(--mut);line-height:1.5}
.lf-consent input{accent-color:var(--teal);margin-top:2px;width:17px;height:17px;flex:0 0 auto}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.leadform .btn{margin-top:18px;width:100%}
/* Сообщение формы и строка согласия стояли вплотную (0px) — читались
   как один абзац. Разводим. */
.lf-msg{margin-top:10px;margin-bottom:10px;font-size:.875rem;color:var(--mut)}
.lf-msg.err{color:var(--coral-d)}
.lf-alt{margin-top:16px;font-size:.875rem;color:var(--mut);text-align:center}
.lf-alt a{font-weight:600}
.lf-done{text-align:center;padding:14px 0}
.lf-tick{width:52px;height:52px;border-radius:50%;background:rgba(14,110,99,.1);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}

/* ───────────────────────── подвал ────────────────────────── */
footer{background:#0C2523;color:rgba(255,255,255,.7);padding:52px 0 30px;margin-top:0;font-size:.9375rem}
footer a{color:rgba(255,255,255,.7)}
footer a:hover{color:#fff}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr;gap:26px;margin-bottom:28px}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
footer b{color:#fff;font-weight:600;display:block;margin-bottom:10px}
footer .cols a{display:inline-block;padding:5px 0}
footer .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
footer .foot-lang{border-top:1px solid rgba(255,255,255,.11);padding-top:16px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.875rem;color:rgba(255,255,255,.55)}
footer .fine{font-size:.8125rem;color:rgba(255,255,255,.5);padding-top:14px;line-height:1.65}
footer .fine a{color:rgba(255,255,255,.72)}

/* ───────────────────────── липкий CTA ───────────────────── */
.sticky-cta{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:70;gap:8px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(18,33,31,.08);
  border-radius:var(--pill);padding:8px;box-shadow:var(--sh3)}
.sticky-cta a{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(13px,3.8vw,14.5px)}
@media(max-width:800px){
  .sticky-cta{display:flex}
  body{padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom))}
  :root{--cta-h:74px}
  .hero{min-height:auto;padding:96px 0 34px}
}

/* ───────────────────────── хлебные крошки ───────────────── */
.bc{font-size:.8125rem;color:var(--mut);padding:14px 0 0}
.bc a{color:var(--mut)}
.bc a:hover{color:var(--teal)}
.bc span{margin:0 6px;opacity:.5}

/* ───────────────────────── каталог лотов ────────────────── */
.filters{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.fgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fgroup>b{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  font-weight:600;flex:0 0 auto;min-width:74px}
.fbtn{border:1px solid var(--line2);background:#fff;font:inherit;font-size:13px;padding:7px 13px;
  border-radius:var(--pill);cursor:pointer;color:var(--ink2);min-height:36px;transition:.13s}
.fbtn:hover{border-color:var(--teal)}
.fbtn.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
/* Счётчик, дата прайса и подсказка про сортировку — одной строкой над
   таблицей, тем же спокойным шрифтом, что и легенда шахматки. */
.fbar{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:2px 0 12px}
.fcount{font-size:.875rem;color:var(--mut)}
.fstamp{font-size:.875rem;color:var(--mut)}
.fcount b{color:var(--ink);font-weight:600}
tr.urow{cursor:pointer}
/* Оранжевая полоса слева у строк с ценой убрана: в таблице и так есть
   колонка с ценой, а полоса читалась как ошибка вёрстки. */
th[data-sort]{cursor:pointer;white-space:nowrap}
th[data-sort]::after{content:" ↕";opacity:.4;font-weight:400}
th[data-sort][data-dir]::after{content:none}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 8px;
  border-radius:var(--pill);background:rgba(14,110,99,.1);color:var(--teal-d);vertical-align:1px}
.tag.coral{background:rgba(232,95,39,.13);color:var(--coral-d)}
.tag.sage{background:rgba(110,143,151,.16);color:var(--sage-d)}
.empty{padding:28px;text-align:center;color:var(--mut);font-size:.9375rem}

/* карточка лота */
/* Верх карточки лота: галерея слева, карточка данных справа — компоновка
   эталонной карточки Оливы. Правая колонка уже левой: в ней цена и
   характеристики, читать её надо быстро, а разглядывать — планировку. */
.u-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(18px,3vw,32px);align-items:start}
/* Без min-width:0 колонка распирается лентой миниатюр: её минимальная
   ширина считается по всем превью сразу, и правая карточка сжимается. */
.u-head>*{min-width:0}
.u-side{position:sticky;top:74px}
.u-side .u-price{margin-top:10px}
@media(max-width:900px){.u-side{position:static}}
@media(max-width:900px){.u-head{grid-template-columns:1fr}}
/* Цена — главное число на карточке. Правило .card p (15 px, серый) било
   по ней специфичностью, и цена выглядела как подпись; поэтому селектор
   с классом карточки. */
.card p.u-price,.u-price{font-size:clamp(1.55rem,2.4vw,1.95rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
/* Пересчёт в валюту — рядом с батом, а не вместо него: договор в батах. */
.cur-alt{color:var(--mut);font-weight:600;letter-spacing:0;font-size:.85em}
/* Пересчёт держим в одной строке с батом: так видно, что это одна и та же
   цена в двух валютах, а не два разных числа. */
.u-price .cur-alt{margin-left:9px;font-size:.6em;white-space:nowrap}
.u-psqm{font-size:.9375rem;color:var(--mut);margin-top:8px}
/* Характеристики в карточке лота — поля «подпись → значение» друг под другом,
   как на эталонной карточке Оливы. Сеткой в три колонки это читалось
   таблицей: глаз ищет заголовки и сравнивает столбцы, а тут надо просто
   пробежать сверху вниз. */
.u-spec{display:block;margin:14px 0 0;font-size:.9375rem}
.u-spec div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line)}
.u-spec div:last-child{border-bottom:0}
.u-spec dt{color:var(--mut);flex:0 0 auto}
.u-spec dd{font-weight:600;text-align:right}
@media(max-width:560px){.u-spec{grid-template-columns:repeat(2,1fr)}}
.paysteps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.paystep{background:var(--card);padding:13px 16px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.paystep b{font-variant-numeric:tabular-nums}
.paystep small{display:block;color:var(--mut);font-size:.8125rem;font-weight:400}

/* валютный переключатель */
.cur-switch{display:inline-flex;background:rgba(110,143,151,.12);border-radius:11px;padding:2px;gap:2px}
.cur-switch button{border:0;background:transparent;font:inherit;font-size:13px;padding:6px 13px;
  border-radius:9px;cursor:pointer;color:var(--ink2);min-height:34px}
.cur-switch button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(18,33,31,.1)}

/* ───────────────────────── виджет связи ─────────────────── */
.cw{position:fixed;right:14px;bottom:calc(var(--cta-h) + 14px);z-index:80;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
@media(max-width:800px){.cw{display:none}}
.cw a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh3);color:#fff;position:relative;overflow:hidden;transition:transform .12s}
.cw a:active{transform:scale(.94)}
.cw a svg{width:25px;height:25px}
.cw .cw-wa{background:var(--wa)}
.cw .cw-tg{background:var(--tg)}

/* ───────────────────────── доступность / движение ───────── */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media (prefers-reduced-transparency:reduce){
  header,.sticky-cta{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .chip,.hero .fact{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.24)}
}
@media (prefers-contrast:more){
  .card,.answer,details,.tbl-scroll,.lead-box{border-color:rgba(18,33,31,.45)}
  :root{--mut:#4A5E5C}
}
@media print{header,.sticky-cta,.cw,footer,.leadform{display:none}}

/* Карта. Соотношение задано, чтобы место резервировалось до загрузки iframe:
   без этого при появлении карты вёрстка прыгает. */
.mapbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.mapbox iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media(max-width:640px){.mapbox iframe{aspect-ratio:4/3}}

/* Цена из прошлого прайса: показываем, но не выдаём за текущую. */
.was{color:var(--mut);font-weight:500}

/* На узком экране галерея — лента со свайпом. Сетка из 3–4 картинок в столбик
   заставляет листать страницу вместо галереи; кадр шириной 86% показывает край
   следующего и тем сообщает, что ленту можно двигать. */
@media(max-width:760px){
  .gal{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:4px}
  .gal::-webkit-scrollbar{display:none}
  .gal img{flex:0 0 86%;scroll-snap-align:center}
  .gal:has(img:only-child) img{flex-basis:100%}
}

/* Факты в блоке «Кратко» свёрнуты: ведущая фраза отвечает сразу, пять пунктов
   раскрываются по клику. Текст остаётся в DOM — индексация и плотность фактов
   не меняются, прячется только высота. */
.facts-wrap{margin-top:12px}
.facts-wrap>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:.875rem;font-weight:600;color:var(--teal);padding:6px 0;min-height:32px}
.facts-wrap>summary::-webkit-details-marker{display:none}
.facts-wrap>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .16s}
.facts-wrap[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.facts-wrap>summary:hover{color:var(--teal-d)}
.facts-wrap .facts{margin-top:4px}

/* ───────────────────────── шахматка ───────────────────────── */
/* 21 стояк в ряд на телефон не влезет — таблица прокручивается вбок,
   как и основная таблица квартир. */
.cb-wrap{margin-top:26px}
.cb-cap{margin-bottom:10px;font-size:.9375rem;font-weight:600;color:var(--ink2)}
/* Шахматка — плитками, а не таблицей: в таблице клетка ужимается до значка,
   а человеку нужны номер и цена. Лента прокручивается вбок, номер этажа
   прилипает слева — иначе на середине ряда непонятно, какой это этаж. */
.cb{display:grid;gap:5px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cb-row{display:flex;gap:5px;align-items:stretch}
.cb-fl{position:sticky;left:0;z-index:2;flex:0 0 auto;min-width:42px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mut);
  background:var(--bg);border-radius:8px}
/* Ширина плитки фиксированная: при ширине по содержимому ряды выходили
   рваными — «по запросу» короче цены, и колонки не совпадали между этажами. */
.cb-cell{flex:0 0 104px;width:104px;padding:7px 6px;border-radius:9px;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid transparent;transition:transform .12s,box-shadow .12s}
.cb-cell b{font-size:12.5px;font-weight:700;line-height:1.1}
.cb-cell span{font-size:11px;line-height:1.2;opacity:.85}
.cb-cell.cb-gap{background:transparent;pointer-events:none}
.cb-on{background:var(--teal);color:#fff}
.cb-on:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:var(--sh2)}
.cb-ask{background:var(--bg2);color:var(--ink2);border-color:var(--line)}
.cb-ask:hover{border-color:var(--line2);transform:translateY(-1px)}
.cb-cell.cb-flat{cursor:default}
.cb-cell.cb-flat:hover{transform:none;border-color:var(--line)}
.cb-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.875rem;color:var(--mut)}
.fp .cb-k.cb-on{background:rgba(21,140,126,.30);border:2px solid #0C7A6C}
.fp .cb-k.cb-ask{background:transparent;border:1.5px dashed rgba(110,143,151,.75)}
.cb-legend span{display:inline-flex;align-items:center;gap:7px}
.cb-k{width:14px;height:14px;border-radius:4px;display:inline-block}
.cb-k.cb-ask{border:1px solid var(--line2)}
@media(max-width:760px){
  /* Тап-цель не мельче 44 px по высоте — палец не должен промахиваться. */
  .cb-cell{flex-basis:98px;width:98px;min-height:52px}
  .cb-fl{min-width:36px}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ♡ в ячейке номера: не должен растягивать строку таблицы. */
td .favbtn{margin-left:8px;vertical-align:middle}
/* Выгоды в карточке лота. Полная собственность без доплаты и мебель в цене —
   это не строчка характеристик, а причина выбрать этот проект: у соседей
   по рынку и то и другое обычно оплачивается отдельно. */
/* Выгоды проекта — под галереей, тремя карточками в ряд. В боковой карточке
   они забирали место у цены и характеристик, а слева под лентой кадров
   оставалась пустота: колонка с галереей короче правой. */
.u-wins{list-style:none;margin:18px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.u-wins li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px 15px 42px;position:relative}
.u-wins li::before{content:"";position:absolute;left:15px;top:16px;width:17px;height:17px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/11px no-repeat}
.u-wins b{display:block;font-size:.9375rem;line-height:1.3;color:var(--ink)}
.u-wins span{display:block;margin-top:5px;font-size:.875rem;line-height:1.45;color:var(--mut)}
/* Галерея на карточке лота — лента с одним большим кадром и «прилипанием».
   Свайп даёт сам браузер (scroll-snap), стрелки рисует site.js.
   overscroll-behavior-x:contain — свайп в конце не листает историю. */
.unit-car{position:relative}
.gal.car-track{display:flex;overflow-x:auto;gap:0;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.gal.car-track::-webkit-scrollbar{display:none}
.gal.car-track img{flex:0 0 100%;width:100%;scroll-snap-align:center;border-radius:var(--r)}
.car-thumbs{display:flex;gap:7px;margin-top:9px;overflow-x:auto;padding-bottom:3px;
  scrollbar-width:none;overscroll-behavior-x:contain}
.car-thumbs::-webkit-scrollbar{display:none}
.car-thumbs img{flex:0 0 auto;width:82px;height:56px;object-fit:cover;border-radius:9px;cursor:pointer;
  border:2px solid transparent;opacity:.68;background:#fff;transition:opacity .15s,border-color .15s}
.car-thumbs img.fit{object-fit:contain}
.car-thumbs img:hover{opacity:1}
.car-thumbs img.on{opacity:1;border-color:var(--teal)}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(18,33,31,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;z-index:2;transition:background .14s}
.car-btn:hover{background:rgba(18,33,31,.8)}
.car-btn[disabled]{opacity:.3;cursor:default}
.car-prev{left:12px}.car-next{right:12px}
.car-cnt{position:absolute;right:14px;bottom:12px;background:rgba(18,33,31,.62);color:#fff;font-size:12.5px;
  border-radius:999px;padding:4px 11px;z-index:2}
/* Инфраструктура значками — как в брошюре застройщика. Строка через точку
   читалась как сноска, а это половина того, за что платят. */
.amen{list-style:none;margin:14px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.amen li{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 12px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.amen svg{width:30px;height:30px;color:var(--teal);flex:0 0 auto}
.amen span{font-size:.875rem;line-height:1.35;color:var(--ink2)}
/* Доводы «почему этот проект» — по три в ряд: карточка с заголовком и
   двумя строками объяснения, иначе довод превращается в лозунг. */
.wins3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.wins3>*{min-width:0}
.wins3 h3{margin-bottom:8px}
/* Пакет застройщика плитками: значок, короткий заголовок, строка
   объяснения. Списком из семи строк это читалось как мелкий шрифт
   договора, хотя именно здесь у проекта самое сильное предложение. */
.pkg{list-style:none;margin:20px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.pkg>li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.62);
  border:1px solid rgba(122,110,40,.14);border-radius:var(--r);padding:14px 16px}
.pkg svg{width:26px;height:26px;flex:0 0 auto;color:var(--coral-d);margin-top:1px}
.pkg b{display:block;font-size:.9375rem;line-height:1.3;color:#2E3A0E}
.pkg span{display:block;margin-top:4px;font-size:.8125rem;line-height:1.45;color:#5A6533}
/* Страница 404: быстрый вход по типу квартиры. Три равнозначные кнопки
   «о проекте / все квартиры / карта сайта» не отвечали на вопрос, зачем
   человек сюда шёл, — он искал квартиру. */
.nf-chips{display:grid;gap:10px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.nf-chip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;display:block;transition:transform .14s,box-shadow .14s,border-color .14s}
.nf-chip:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--line2)}
.nf-chip b{display:block;color:var(--ink);font-size:.9375rem}
.nf-chip span{display:block;margin-top:4px;font-size:.8125rem;color:var(--mut)}

/* Выбор квартиры на плане этажа. Подписи застройщика превращаются в кнопки,
   координаты приходят из data/floor-zones.json. Ширину плана на узком экране
   держим больше экрана: иначе подпись ужимается до нескольких пикселей и в
   неё невозможно попасть пальцем — план проще прокрутить вбок. */
.fp{margin-top:20px}
.fp-ctl{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fp-floors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fp-floors .sub{margin-right:2px}
.fp-floors button{border:1px solid var(--line);background:var(--card);border-radius:999px;
  min-width:38px;height:38px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink2)}
.fp-floors button:hover{border-color:var(--line2)}
.fp-floors button.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.fp-body{display:block}
.fp-stage{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;scrollbar-width:thin;display:flex;justify-content:center}
.fp-inner{position:relative;flex:0 0 auto}
/* План этажа вытянут по вертикали: если тянуть его на всю ширину колонки,
   блок вырастает на два экрана. Ограничиваем по высоте — на десктопе план
   виден целиком. */
.fp-img{display:block;max-height:74vh;width:auto;max-width:100%;height:auto}
.fp-zones{position:absolute;inset:0}
/* Контуры квартир: слой SVG ровно по картинке. Заливка появляется только
   под курсором — иначе чертёж превращается в кашу из подсветок. */
.fp-shapes{position:absolute;inset:0;width:100%;height:100%}
.fp-poly{fill:transparent;stroke:transparent;stroke-width:2.5;cursor:pointer;
  transition:fill .12s,stroke .12s}
.fp-poly.fp-on.on{fill:rgba(14,110,99,.34);stroke:#0C7A6C}
.fp-poly.fp-ask.on{fill:rgba(110,143,151,.26);stroke:var(--sage-d)}
.fp-zone{position:absolute;border:0;padding:0;cursor:pointer;border-radius:6px;
  background:transparent;transition:background .12s,box-shadow .12s}
.fp-zone.fp-on{box-shadow:inset 0 0 0 2px #0C7A6C;background:rgba(21,140,126,.22)}
.fp-zone.fp-ask{box-shadow:inset 0 0 0 1.5px rgba(110,143,151,.6)}
.fp-zone.on{background:rgba(21,140,126,.5);box-shadow:inset 0 0 0 2px var(--teal-d)}
.fp-zone.fp-ask.on{background:rgba(110,143,151,.3)}
/* Карточка с данными: на десктопе — внутри чертежа, в его пустом углу
   (место ищет сборка), на узком экране — под планом. */
.fp-card{background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:9px 12px 10px;box-shadow:0 8px 22px rgba(18,33,31,.18)}
.fp-card.fp-card-in{position:absolute;z-index:4;pointer-events:none;max-width:230px}
.fp-card .fp-idle{font-size:.875rem;color:var(--mut);line-height:1.45;margin:0}
.fp-card .fp-no{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin:0;white-space:nowrap}
.fp-card .fp-meta{font-size:.75rem;color:var(--mut);margin:1px 0 0;white-space:nowrap}
.fp-card p{margin:0}
.fp-card .fp-price{font-size:.9375rem;font-weight:700;color:var(--ink);display:inline-block;margin-top:5px;white-space:nowrap}
.fp-card .fp-ask-t{font-size:.8125rem;color:var(--ink2);display:inline-block;margin-top:5px}
.fp-card .fp-go{display:inline-block;margin-top:5px;font-size:.8125rem;font-weight:600;color:var(--teal)}
.fp-side{display:none}
@media(max-width:900px){.fp-side{display:block;margin-top:12px}}
@media(max-width:900px){
  /* На телефоне план шире экрана и прокручивается вбок — иначе подпись
     ужимается в несколько пикселей и в неё не попасть пальцем. Панель
     с данными уходит под план. */
  .fp-stage{justify-content:flex-start}
  .fp-img{width:880px;max-width:none;max-height:none}
}