/* ============================================================
   Wendougee Landing — стили страницы
   Источник дизайна: Claude Design «Wendougee Landing.dc.html»
   Токены — в tokens/*.css (подключены через styles.css)
   ============================================================ */

/* ---- База ---- */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--cream);
  font-family: var(--font-sans);
  overflow-x: clip;
}
a { color: var(--link); text-decoration: none; transition: color var(--dur-state) ease; }
a:hover { color: var(--link-hover); }
input::placeholder { color: var(--text-3); }
img, video { max-width: 100%; }

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

/* ---- Появления при скролле ---- */
[data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
}
[data-anim="card"] {
  transform: scale(.95) translateY(10px);
  transition: opacity var(--dur-card) var(--ease-out-soft),
              transform var(--dur-card) var(--ease-out-soft);
}

@keyframes mFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mCard { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: scale(1) } }
@keyframes fullPulse { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

/* ---- Контейнеры и заголовки секций ---- */
.container { max-width: var(--container); margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: var(--cream);
}
/* слово каскадного заголовка */
.w { display: inline-block; margin-right: .24em; }
.w--serif { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; }
/* связка «нельзя разрывать»: короткие предлоги/союзы (в, к, на, и…) и число+сущ.
   держим с соседом — не оставляем висеть в конце строки, не роняем в вдовы.
   inline-block запрещает перенос внутри группы; интервалы = как у обычных слов
   (margin + пробел между .w сохранены). Каскад появления .w работает по-прежнему. */
.nb { display: inline-block; }

/* ---- Зерно (grain) ---- */
.grain-section {
  position: absolute; inset: 0;
  background-image: var(--grain-url);
  opacity: var(--grain-opacity-section);
  pointer-events: none;
}
.grain-hero {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity-hero);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- Кнопка-пилюля (единственный стиль кнопок) ---- */
.btn {
  display: inline-flex; align-items: center;
  background: var(--btn-bg); color: var(--btn-fg);
  border: none; border-radius: var(--radius-pill);
  font-family: inherit; font-weight: var(--weight-medium); cursor: pointer;
  transition: gap var(--dur-hover) var(--ease-out-expo),
              transform var(--dur-press) var(--ease-out-expo);
}
/* тактильный отклик нажатия — интерфейс «слышит» пользователя (Emil) */
.btn:active { transform: scale(.97); }
.btn__arrow {
  border-radius: 50%; background: #000; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.btn__arrow svg { display: block; }
.btn--turn .btn__arrow svg { transform: rotate(-45deg); } /* стрелка «переход/покупка» */

.btn--lg { gap: 12px; padding: 8px 8px 8px 26px; font-size: 16px; }
.btn--lg .btn__arrow { width: 44px; height: 44px; }
.btn--lg:hover { gap: 18px; }

.btn--md { gap: 10px; padding: 6px 6px 6px 22px; font-size: 14px; }
.btn--md .btn__arrow { width: 36px; height: 36px; }
.btn--md:hover { gap: 16px; }

.btn--sm { gap: 8px; padding: 5px 5px 5px 16px; font-size: 12px; font-weight: var(--weight-semibold); flex: none; }
.btn--sm .btn__arrow { width: 30px; height: 30px; }
.btn--sm:hover { gap: 12px; }

/* финальный CTA: рост не gap, а яркости фона */
.btn--cta { gap: 12px; padding: 14px 14px 14px 28px; font-size: 16px; background: var(--cream); color: #0A0A0A; transition: background var(--dur-hover) var(--ease-out-expo), transform var(--dur-press) var(--ease-out-expo); }
.btn--cta .btn__arrow { width: 34px; height: 34px; background: #0A0A0A; color: var(--cream); }
.btn--cta:hover { background: var(--cream-bright); }

/* сабмит формы */
.btn--submit {
  justify-content: center; padding: 14px 24px; font-size: 14px;
  font-weight: var(--weight-semibold); margin-top: 6px;
  transition: background var(--dur-hover) var(--ease-out-expo), transform var(--dur-press) var(--ease-out-expo);
}
.btn--submit:hover { background: var(--cream); }

/* ---- Toggle-пилюли вариантов модели ---- */
.pill-toggle {
  border-radius: var(--radius-pill); padding: 6px 12px; font-family: inherit;
  font-size: 10px; letter-spacing: .08em; font-weight: var(--weight-semibold);
  cursor: pointer; background: transparent; color: var(--text-3);
  border: 1px solid var(--border-muted);
  transition: background var(--dur-state) var(--ease-out-expo),
              color var(--dur-state) var(--ease-out-expo),
              border-color var(--dur-state) var(--ease-out-expo),
              transform var(--dur-press) var(--ease-out-expo);
}
.pill-toggle:hover { border-color: var(--border-strong); color: var(--cream); }
.pill-toggle:active { transform: scale(.96); }
.pill-toggle.is-active { background: var(--accent); color: #000; border-color: var(--accent); }

/* Табличные цифры для числовых данных (цены, характеристики) — ровные разряды */
.price-value,
.spec-line span:last-child,
.spec-row span:last-child { font-variant-numeric: tabular-nums; }

/* ---- «Полные характеристики» ---- */
.link-specs {
  border-top: 1px solid var(--border-hairline);
  background: none; border-left: none; border-right: none; border-bottom: none;
  padding: 10px 0; margin: 0; font-family: inherit; font-size: 12px; color: var(--cream);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: opacity .2s, transform var(--dur-press) var(--ease-out-expo);
  animation: fullPulse 2s ease-in-out infinite;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-specs:hover { opacity: 1; }
.link-specs:active { transform: scale(.985); }
.link-specs svg { transform: rotate(-45deg); flex: none; }

/* ---- Поля формы ---- */
/* Раскладка формы — в CSS, не инлайном: JS открытия модалки делает form.style.display=''
   (сброс скрытия), и base-flex должен пережить этот сброс, иначе gap отваливается. */
.modal-panel [data-lead-form] { display: flex; flex-direction: column; gap: 14px; }
.input {
  background: var(--surface-input); border: 1px solid var(--border-input);
  border-radius: var(--radius-sm); padding: 13px 14px; color: var(--cream);
  font-family: inherit; font-size: 14px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-state) var(--ease-out-expo);
}
.input:focus { border-color: var(--accent); }
.input--error, .input--error:focus { border-color: #d98a7a; }
.form-error { display: none; margin: 0; color: #d98a7a; font-size: 13px; line-height: 1.4; }
.form-error.is-visible { display: block; }

/* сабмит неактивен, пока форма не валидна (живая валидация) */
.btn--submit:disabled { opacity: .45; cursor: not-allowed; }
.btn--submit:disabled:hover { background: var(--accent); }

/* ссылки в текстах согласий */
.consent__link { color: #c9c7b0; text-decoration: underline; text-underline-offset: 2px; }
.consent__link:hover { color: var(--cream); }

/* honeypot — вне экрана, невидим для людей, доступен ботам */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

/* ---- Куки-баннер (первый визит) ---- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap;
  justify-content: center; padding: 12px 20px;
  background: rgba(10,10,10,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(225,224,204,.12);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  margin: 0; max-width: 760px; color: var(--text-2);
  font-size: 12.5px; line-height: 1.45; text-align: center;
}
.cookie-banner__link { color: #c9c7b0; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__link:hover { color: var(--cream); }
.cookie-banner__ok {
  flex: none; padding: 9px 22px; font-size: 13px;
  font-weight: var(--weight-semibold); background: var(--accent); color: #000;
}
.cookie-banner__ok:hover { background: var(--cream); }
@media (max-width: 520px) {
  .cookie-banner { gap: 10px; padding: 12px 16px; }
  .cookie-banner__text { font-size: 12px; }
}

/* ---- Модалки ---- */
.modal-scrim {
  position: fixed; inset: 0; background: var(--overlay-scrim);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-scrim.is-open { display: flex; animation: mFade .25s ease; }
.modal-scrim--request { z-index: 50; }
.modal-scrim--spec { z-index: 60; }

.modal-panel {
  width: 100%; max-width: 520px; background: var(--surface-modal);
  border-radius: var(--radius-modal); padding: 36px; position: relative;
  box-sizing: border-box; animation: mCard .35s var(--ease-out-expo);
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  cursor: pointer; padding: 6px; color: var(--text-cream-60);
  transition: color var(--dur-state) ease, transform var(--dur-press) var(--ease-out-expo);
}
.modal-close:hover { color: var(--cream); }
.modal-close:active { transform: scale(.9); }

.spec-panel {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--surface-modal); border: 1px solid var(--border-soft);
  border-radius: var(--radius-modal); box-sizing: border-box;
  animation: mCard .35s var(--ease-out-expo);
}
.spec-panel__head {
  position: sticky; top: 0; background: var(--surface-modal);
  border-bottom: 1px solid var(--border-hairline); padding: 28px 32px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.spec-panel__close {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(225,224,204,.08); border: 1px solid rgba(225,224,204,.18);
  color: var(--cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-state) ease, transform var(--dur-press) var(--ease-out-expo);
}
.spec-panel__close:hover { background: rgba(225,224,204,.16); }
.spec-panel__close:active { transform: scale(.92); }
.spec-row {
  display: flex; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--border-hairline); padding: 11px 0;
  font-size: 13.5px; line-height: 1.4;
}
.spec-row span:first-child { color: var(--text-3); flex: none; }
.spec-row span:last-child { color: rgba(225,224,204,.85); text-align: right; }
.feature-row { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-cream-80); }
.feature-row::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-top: 7px;
}

/* ---- BorderGlow (свечение за курсором) ----
   Статичные переменные палитры заданы здесь; JS на pointermove
   обновляет только --edge-proximity и --cursor-angle. */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 25;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 14px;
  --glow-padding: 34px;
  --cone-spread: 25;
  --fill-opacity: .5;
  --card-bg: var(--surface-1);
  /* палитра свечения: крем → золото (hsl 44 45% 74%) */
  --glow-color: hsl(44deg 45% 74% / 100%);
  --glow-color-60: hsl(44deg 45% 74% / 60%);
  --glow-color-50: hsl(44deg 45% 74% / 50%);
  --glow-color-40: hsl(44deg 45% 74% / 40%);
  --glow-color-30: hsl(44deg 45% 74% / 30%);
  --glow-color-20: hsl(44deg 45% 74% / 20%);
  --glow-color-10: hsl(44deg 45% 74% / 10%);
  --gradient-one:   radial-gradient(at 80% 55%, var(--glow-palette-1) 0px, transparent 50%);
  --gradient-two:   radial-gradient(at 69% 34%, var(--glow-palette-2) 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%,   var(--glow-palette-3) 0px, transparent 50%);
  --gradient-four:  radial-gradient(at 41% 38%, var(--glow-palette-1) 0px, transparent 50%);
  --gradient-five:  radial-gradient(at 86% 85%, var(--glow-palette-2) 0px, transparent 50%);
  --gradient-six:   radial-gradient(at 82% 18%, var(--glow-palette-3) 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%,  var(--glow-palette-2) 0px, transparent 50%);
  --gradient-base:  linear-gradient(var(--glow-palette-1) 0 100%);
  position: relative; border-radius: var(--border-radius); isolation: isolate;
  transform: translate3d(0, 0, .01px); display: grid;
  border: 1px solid rgb(255 255 255 / 10%); background: var(--card-bg);
  overflow: visible; box-shadow: var(--shadow-card); box-sizing: border-box;
}
.border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  transition: opacity .25s ease-out; z-index: -1;
}
.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0; transition: opacity .75s ease-in-out;
}
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box, var(--gradient-two) border-box,
    var(--gradient-three) border-box, var(--gradient-four) border-box,
    var(--gradient-five) border-box, var(--gradient-six) border-box,
    var(--gradient-seven) border-box, var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
}
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box, var(--gradient-two) padding-box,
    var(--gradient-three) padding-box, var(--gradient-four) padding-box,
    var(--gradient-five) padding-box, var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box, var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1); pointer-events: none; z-index: 1;
  mask-image: conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.border-glow-card > .edge-light::before {
  content: ""; position: absolute; inset: var(--glow-padding); border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color), inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50), inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30), inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60), 0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40), 0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20), 0 0 50px 2px var(--glow-color-10);
}
.border-glow-inner {
  display: flex; flex-direction: column; position: relative;
  overflow: hidden; z-index: 1; height: 100%; border-radius: inherit;
}

/* ---- StaggeredMenu (панель навигации) ---- */
.staggered-menu-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; z-index: 40; overflow: hidden; pointer-events: none; font-family: var(--font-sans); }
.staggered-menu-header { position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 1.6em 2.2em; background: transparent; pointer-events: none; z-index: 20; }
.staggered-menu-header > * { pointer-events: auto; }
.sm-toggle { position: relative; display: inline-flex; align-items: center; gap: .7rem; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(225,224,204,.22); border-radius: 999px; padding: .85rem 1.5rem; cursor: pointer; color: #E1E0CC; font-weight: 500; font-size: 17px; line-height: 1; overflow: visible; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.sm-toggle:hover { background: rgba(222,219,200,.14); border-color: rgba(225,224,204,.45); transform: scale(1.04); }
.sm-toggle::before { content: ''; position: absolute; inset: -2px; border-radius: 999px; padding: 2px; background: conic-gradient(from var(--sm-glow-angle, 0deg), transparent 0deg, transparent 300deg, rgba(225,224,204,.38) 340deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: sm-glow-rotate 4.5s linear infinite; pointer-events: none; }
@property --sm-glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes sm-glow-rotate { to { --sm-glow-angle: 360deg; } }
.sm-toggle:focus-visible { outline: 2px solid #E1E0CCaa; outline-offset: 4px; border-radius: 999px; }
.sm-toggle-textWrap { position: relative; display: inline-block; height: 1em; overflow: hidden; white-space: nowrap; }
/* Схлопнутая кнопка: от пилюли остаётся круг с иконкой.
   Включает класс main.js, пока под кнопкой идёт калькулятор — там пилюля
   «Меню» ложится прямо на заголовок блока и на первую строку карточки.
   Ширину гасим через max-width текста, а не через width кнопки: width от
   auto к числу не анимируется, а max-width на ease-out-expo сжимается почти
   мгновенно и без «мёртвого» участка. 6em, а не по тексту, — в открытом
   состоянии там стоит «Закрыть», её нельзя обрезать. */
@media (max-width: 899px) {
  .sm-toggle { transition: background .3s ease, border-color .3s ease, transform .3s ease,
                           gap .4s var(--ease-out-expo), padding .4s var(--ease-out-expo); }
  .sm-toggle-textWrap { max-width: 6em; transition: max-width .4s var(--ease-out-expo), opacity .2s ease; }
  .sm-toggle--mini { gap: 0; padding: .85rem .76rem; }
  .sm-toggle--mini .sm-toggle-textWrap { max-width: 0; opacity: 0; }
}
.sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; }
.sm-toggle-line { display: block; height: 1em; line-height: 1; }
.sm-icon { position: relative; width: 20px; height: 14px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; }
.sm-icon-line { position: absolute; left: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: translateX(-50%); will-change: transform, opacity; transition: none; }
.sm-icon-line:nth-child(1) { top: 0; }
.sm-icon-line:nth-child(2) { top: 50%; margin-top: -1px; }
.sm-icon-line:nth-child(3) { bottom: 0; }
.sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; }
.sm-backdrop { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .45s ease; }
.staggered-menu-wrapper[data-open] .sm-backdrop { opacity: 1; pointer-events: auto; }
.staggered-menu-panel { position: absolute; top: 0; right: 0; width: clamp(280px, 40vw, 460px); height: 100svh; max-height: 100svh; background: #0c0c0c; border-left: 1px solid rgba(225,224,204,.08); display: flex; flex-direction: column; padding: 4.5em 2.4em 1.6em 2.4em; overflow-y: auto; z-index: 10; pointer-events: auto; opacity: 0; box-sizing: border-box; }
.sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(280px, 40vw, 460px); pointer-events: none; z-index: 5; opacity: 0; }
.sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: 100%; transform: translateX(0); opacity: 0; }
.sm-panel-inner { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }
.sm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; counter-reset: smItem; }
.sm-panel-item { position: relative; color: #E1E0CC; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 3rem); cursor: pointer; line-height: 1; letter-spacing: -2px; transition: color .25s; display: inline-block; text-decoration: none; padding-right: 1.4em; }
.sm-panel-itemLabel { display: inline-block; will-change: transform; transform-origin: 50% 100%; }
.sm-panel-item:hover { color: var(--sm-accent, #DEDBC8); }
.sm-panel-item::after { counter-increment: smItem; content: counter(smItem, decimal-leading-zero); position: absolute; top: .1em; right: 1.2em; font-size: 16px; font-weight: 400; color: var(--sm-accent, #DEDBC8); letter-spacing: 0; pointer-events: none; user-select: none; opacity: var(--sm-num-opacity, 0); }
.sm-socials { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.sm-socials-link { font-size: 1.05rem; font-weight: 500; color: #E1E0CC; text-decoration: none; position: relative; padding: 2px 0; display: inline-block; transition: color .3s ease, opacity .3s ease; }
.sm-socials-link:hover { color: var(--sm-accent, #DEDBC8); }
.sm-socials-link:focus-visible { outline: 2px solid var(--sm-accent, #DEDBC8); outline-offset: 3px; }
.sm-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; margin-bottom: .85rem; }
.sm-brand-plate { display: inline-flex; align-items: center; background: #E1E0CC; border-radius: 5px; padding: 10px 14px; }
.sm-brand-logo { display: block; height: 20px; width: auto; }
.sm-brand-addr { font-size: .88rem; line-height: 1.35; font-weight: 400; color: rgba(225,224,204,.62); }
.sm-phone { font-size: 1.35rem; font-weight: 600; letter-spacing: -.5px; }
.sm-catalog { font-size: .9rem; font-weight: 400; margin-top: .35rem; opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) {
  .staggered-menu-panel, .sm-prelayers { width: 100%; left: 0; right: 0; }
}

/* ---- Ко-бренд в hero-хедере: рядом с кнопкой «Меню» три лого в строку не
   влезают, поэтому на узких экранах опускаем всю связку под кнопку — там
   доступна вся ширина и лого стоят в один ряд с крестиками между ними. ---- */
.hero-cobrand-extra { display: contents; }
@media (max-width: 520px) {
  .hero-cobrand { top: 84px !important; gap: 8px; max-width: calc(100% - 40px) !important; }
}
/* Узкие корпуса (iPhone SE и подобные): связка не влезает в строку —
   пропорционально уменьшаем её целиком, чтобы не ломать ряд. */
@media (max-width: 360px) {
  .hero-cobrand { transform: scale(.86); transform-origin: left center; }
}

/* ---- Hero-видео на мобильном: ландшафт-кадр (16:9) в узком портрете режется
   по центру и выкидывает машину за правый край. Сдвигаем окно кропа вправо,
   чтобы машина с обеими группами оставалась в кадре. ---- */
@media (max-width: 520px) {
  .hero-video { object-position: 70% 50%; }
}

/* ---- Булеты «Инженерия»: все видны сразу, без pin-стека и гармошки.
   Плашки убраны — вместо них тонкая линия между пунктами (спокойнее и
   лучше рифмуется с таблицами характеристик). ---- */
.eng-list { display: flex; flex-direction: column; }
.eng-list > [data-eng-card] { padding: 17px 0; }
.eng-list > [data-eng-card]:first-child { padding-top: 0; }
.eng-list > [data-eng-card]:last-child { padding-bottom: 0; }
.eng-list > [data-eng-card] + [data-eng-card] { border-top: 1px solid rgba(225, 224, 204, .12); }

/* ---- Строка характеристик кофемолки: на мобильном три колонки не влезают
   (минимальная ширина длинных слов больше трети контейнера — колонка
   выдавливалась за край карточки), поэтому стакаем в одну. ---- */
@media (max-width: 520px) {
  .spec-strip { grid-template-columns: 1fr !important; }
  .spec-strip > * { padding: 14px 0 !important; border-left: 0 !important; }
  .spec-strip > * + * { border-top: 1px solid rgba(225, 224, 204, .12); }
}

/* ---- Блок кофемолки: цена + кнопка. На мобильном кнопка уходит под цену
   на всю ширину, чтобы попадание пальцем было надёжным. ---- */
@media (max-width: 520px) {
  .bundle-buy { flex-direction: column; align-items: stretch; }
  .bundle-buy .btn { width: 100%; justify-content: space-between; }
}

/* ---- Карта России ---- */
russia-map { display: block; width: 100%; min-height: 220px; }

/* ---- Мобильные оверрайды (из макета) ---- */
@media (max-width: 768px) {
  .border-glow-card { overflow: hidden; }
}

/* ============================================================
   Калькулятор «Сколько машина стоит в вашей чашке»
   Модель и обоснование — design/calculator-model.md.

   Регистр — расчётный лист, а не веб-приложение: блок живёт прямо на
   поверхности страницы, разделённый волосяными линиями, без собственной
   карточки (ниже в секции уже стоят sticky-карточки — вложенность была бы
   лишним уровнем). Вес несёт само число, а не контейнер.

   Пространственная логика (пересборка 07.08):
   заголовок → ОТВЕТ → ваши вводные → как посчитано → машина → действие.
   Ответ стоит ДО полей, потому что на мобильном (90,5 % трафика) он должен
   оставаться на виду, пока крутишь ползунок. До пересборки от низа ползунка
   до числа было 525 px при экране 844 — поле и результат не помещались
   вместе, и блок не отвечал на действие.

   Мобильный (07.08, сессия Е) собран из трёх модулей — см. медиазапрос до 899px.
   Десктоп (от 900px) зафиксирован 07.08 и не меняется.
   ============================================================ */
.calc {
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: 40px 0 36px;
  margin-bottom: 56px;
}
/* Атрибут hidden прячет через UA-стиль display:none, и любой авторский display
   его перебивает. Внутри калькулятора почти у всех скрываемых узлов свой
   display (flex), поэтому возвращаем hidden силу — точечно, только здесь:
   глобальное правило сломало бы блок «заявка отправлена», которому display
   выставляют инлайном. */
.calc [hidden] { display: none !important; }

.calc__grid { display: grid; gap: 0; }

/* Слой-рамка модуля 1 и обёртка полосы полей — оба работают только на узком
   экране (правила в медиазапросе до 899px). На десктопе слоя нет вовсе,
   а обёртка растворяется: поля остаются прямыми детьми колонки. */
.calc__card { display: none; }
.calc__strip { display: contents; }

/* ---- Заголовок ---- */
.calc__head { position: relative; }
.calc__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--cream);
  text-wrap: balance;
}
.calc__title-em { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; }

/* ---- Ответ ----
   Главное число блока. На мобильном липнет к верху экрана ниже плавающей
   кнопки «Меню» (её низ ≈ 73 px) и в закреплённом виде сжимается в одну
   строку: постоянно занимать треть экрана оно не должно. */
.calc__answer {
  padding: 14px 0 4px;
  min-height: 148px;   /* слот держит габарит: при потоке 1 200+ числа нет,
                          и без резерва вся страница под блоком подпрыгивала */
}
.calc__lead {
  margin: 28px 0 0;
  color: var(--text-2);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 52ch;
}
.calc__figure { margin-top: 0; }
.calc__big {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(64px, 13vw, 116px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cream-bright);
  /* Табличные цифры здесь НЕ ставим: запятая получает ширину цифры, и «1,8»
     читается как «1, 8». Ширина числа гуляет при пересчёте, но оно прижато
     влево — заметно только справа, где ничего нет. */
}
.calc__big-unit { font-size: .3em; letter-spacing: -.01em; color: var(--text-2); align-self: baseline; }
/* Оптическая правка: у запятой Manrope широкие боковые пробелы, и на
   116 px «1,8» читается как «1, 8» — два числа вместо одного. Подтягиваем
   только разделитель, общий трекинг остаётся в пределах -.04em. */
.calc__sep { display: inline-block; margin: 0 -.06em; }
.calc__big-sub {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: var(--text-body);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 42ch;
}

/* ---- Управление ---- */
.calc__controls { display: flex; flex-direction: column; gap: 32px; min-width: 0; padding-top: 28px; }
/* Поле не должно всплывать под закреплённой строкой при фокусе с клавиатуры. */
.calc__field, .calc__disclosure { scroll-margin-top: 156px; }
.calc__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* legend в fieldset рисуется вне flex-потока, и общий gap на него не
   действует — отступ до сегмент-контрола задаём ему отдельно. */
.calc__fieldset { border: 0; padding: 0; margin: 0; }
/* 24px, а не 10px как у прочих полей: пилюли — плотная заливка, и на 10 px
   лейбл «Формат заведения» прилипал к их верхней кромке. Соседние поля
   разведены на 32 px (.calc__controls gap) — группа «лейбл + пилюли» всё
   ещё читается как одно целое. */
.calc__fieldset > .calc__label { display: block; margin-bottom: 24px; }
/* Лейбл и его опора-подпись в одной строке: своя строка под каждым полем
   стоила 28 px и ничего не добавляла — подпись всё равно читается как хвост
   лейбла. На узком экране переносится обратно в две строки. */
.calc__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Вправо подпись уходит только там, где она реально стоит в одной строке
   с лейблом. На узком экране она переносится под него — и должна читаться
   от левого края, как все остальные подписи полей. */
.calc__note--aside { flex: 0 1 auto; }
@media (min-width: 900px) { .calc__note--aside { text-align: right; } }
.calc__label {
  padding: 0;
  color: var(--text-2);
  font-size: var(--text-body-sm);
  letter-spacing: -.01em;
}
.calc__label--inline { flex: none; }
.calc__note {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-spec);
  line-height: 1.5;
  text-wrap: pretty;
}
.calc__src { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.calc__src:hover { color: var(--cream); }

/* Сегмент-контрол. Четыре отдельные таблетки с зазорами читались как четыре
   независимых переключателя и растягивали строку; общая оправа собирает их в
   один контрол «одно из четырёх» и занимает ровно ширину слов. */
.calc__pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}
.calc__pills .pill-toggle {
  padding: 9px 18px;
  font-size: var(--text-caption);
  letter-spacing: .04em;
  min-height: var(--control-h-sm);
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
}
.calc__pills .pill-toggle:hover { background: var(--surface-input); }
.calc__pills .pill-toggle.is-active,
.calc__pills .pill-toggle.is-active:hover { background: var(--accent); color: #000; }

/* Соседние контролы одной высоты — ряд «ползунок + поле» не должен
   выглядеть собранным из разных наборов. */
.calc__control-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.calc__control-row--price,
.calc__control-row--cogs { flex-wrap: wrap; }
/* Кофемолка живёт в ряду с ценой чашки: это уточнение комплекта, а не
   самостоятельный шаг, и отдельным полем стоила 90 px. */
.calc__control-row--price { align-items: center; gap: 12px 24px; }
.calc__control-row--price .calc__check { padding: 0; min-height: var(--control-h); align-items: center; }
/* К правому краю — только там, где обе части реально стоят в одной строке.
   На узком экране ряд переносится, и прижатый вправо чекбокс повис бы
   в одиночестве у противоположного края от своего поля. */
@media (min-width: 900px) {
  .calc__control-row--price .calc__check { margin-left: auto; }
}
.calc__num {
  width: 96px;
  height: var(--control-h);
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* 16px — не вкусовое: инпут мельче 16px заставляет Safari на iOS
     зумить страницу при фокусе, и вёрстка уезжает. */
  font-size: var(--text-body-lg);
  padding-right: 12px;
}
.calc__suffix { position: relative; display: inline-flex; align-items: center; }
.calc__suffix .calc__num { width: 112px; padding-right: 32px; }
.calc__unit {
  position: absolute;
  right: 12px;
  color: var(--text-3);
  font-size: var(--text-body);
  pointer-events: none;
}

/* Ползунок потока — главный контрол блока, поэтому рисуем его целиком,
   а не полагаемся на системный вид. --p ставит JS: заполненная часть трека.
   Шкала нелинейная (см. calculator.js, SCALE): на линейной 10→1200 диапазон
   80–300 чашек, где живёт вся аудитория, занимал 45 px из 244. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-h);
  background: transparent;
  cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--cream) 0 var(--p, 15%), rgba(225,224,204,.16) var(--p, 15%) 100%);
}
.calc__range::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--cream) 0 var(--p, 15%), rgba(225,224,204,.16) var(--p, 15%) 100%);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border-radius: 50%;
  border: 0;
  background: var(--cream);
  box-shadow: var(--shadow-control);
  transition: transform var(--dur-press) var(--ease-out-expo);
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--cream);
  box-shadow: var(--shadow-control);
}
.calc__range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Подписи нелинейной шкалы. Сжатие правого конца должно быть видно глазом,
   иначе шкала врёт молча. */
.calc__ticks {
  position: relative;
  height: 14px;
  margin: -6px 122px 0 0;   /* правый отступ = ширина поля ввода + gap */
  color: var(--text-3);
  font-size: var(--text-overline);
  font-variant-numeric: tabular-nums;
}
.calc__ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.calc__ticks span:first-child { transform: none; }
.calc__ticks span:last-child { transform: translateX(-100%); }

/* Чекбокс — свой, системный на тёмном выглядит инородно */
.calc__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-height: var(--control-h);
  padding: 10px 0;
}
.calc__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc__check-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--border-muted);
  border-radius: 5px;
  background: var(--surface-input);
  transition: background var(--dur-state) var(--ease-out-expo),
              border-color var(--dur-state) var(--ease-out-expo);
}
.calc__check input:checked + .calc__check-box {
  background: var(--cream);
  border-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.calc__check-text { color: var(--cream); font-size: var(--text-body); line-height: 1.4; }
/* Модель и надбавка — неразрывной группой: перенос допустим только перед
   «ARES-90B», а не внутри строки «ARES-90B +180 000 ₽». */
.calc__check-model { white-space: nowrap; }
.calc__check-price { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Раскрытие себестоимости */
.calc__disclosure { border-top: 1px solid var(--border-hairline); padding-top: 6px; }
.calc__disclosure-btn {
  width: 100%;
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-state) var(--ease-out-expo);
}
.calc__disclosure-btn:hover { color: var(--cream); }
.calc__disclosure-btn b { color: var(--cream); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.calc__chev { display: inline-flex; transition: transform var(--dur-state) var(--ease-out-expo); }
.calc__disclosure-btn[aria-expanded="true"] .calc__chev { transform: rotate(180deg); }
.calc__disclosure-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 18px; }
.calc__cogs { margin: 0; display: flex; flex-direction: column; }
.calc__cogs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm);
}
.calc__cogs-row dt { color: var(--text-3); }
.calc__cogs-row dd { margin: 0; color: var(--text-cream-80); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Аффорданс кнопки — фоном и цветом. Подчёркивание в зрелом интерфейсе
   означает inline-ссылку в прозе, а не действие в хроме. */
.calc__reset {
  border: 1px solid var(--border-hairline);
  background: none;
  min-height: var(--control-h-sm);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-spec);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-state) var(--ease-out-expo),
              color var(--dur-state) var(--ease-out-expo),
              border-color var(--dur-state) var(--ease-out-expo);
}
.calc__reset:hover { background: var(--surface-input); border-color: var(--border-muted); color: var(--cream); }

/* ---- Как посчитано · машина · действие ---- */
.calc__out { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-top: 32px; }
.calc__rows { margin: 0; display: flex; flex-direction: column; }
.calc__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--text-body);
}
.calc__spec:first-child { border-top: 1px solid var(--border-hairline); }
.calc__spec dt { color: var(--text-3); }
.calc__spec dd { margin: 0; color: var(--cream); font-variant-numeric: tabular-nums; text-align: right; }

.calc__short-note {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  text-wrap: pretty;
}

.calc__model { display: flex; flex-direction: column; gap: 6px; }
.calc__model-kicker { margin: 0; color: var(--text-3); font-size: var(--text-caption); }
.calc__model-name {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--cream);
  font-size: var(--text-model-name);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.calc__model-price { color: var(--text-2); font-size: var(--text-body-lg); font-weight: var(--weight-regular); }
.calc__model-why,
.calc__model-alt,
.calc__model-hint {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  text-wrap: pretty;
}
/* Было --text-cream-45 = 3,57:1 — ниже нормы 4,5:1. */
.calc__model-alt { color: var(--text-cream-60); }
.calc__model-hint { color: var(--text-cream-60); margin-top: 2px; }
/* Рекомендацию было некуда «открыть». Ссылкой служит само название машины:
   отдельная строка «Посмотреть карточку машины» занимала 48 px и вела туда
   же, куда логичнее нажать. Подчёркивание появляется на наведении — в
   постоянном виде оно спорит с весом названия. */
.calc__model-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-state) var(--ease-out-expo);
}
.calc__model-name-link:hover { border-bottom-color: var(--cream); }
/* Режим «линия»: карточки в каталоге нет, href снят — гасим и аффорданс. */
.calc__model-name-link.is-static { cursor: default; }
.calc__model-name-link.is-static:hover { border-bottom-color: transparent; }

.calc__cta { align-self: flex-start; margin-top: 2px; }
.calc__inline-legal {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-spec);
  line-height: 1.55;
  text-wrap: pretty;
}
/* Оговорка набрана мелко, но читаемо: контраст ниже 4.5:1 ослабляет её и
   юридически — незаметный дисклеймер не защищает. */
.calc__legal {
  margin: 34px 0 0;
  max-width: 88ch;
  color: var(--text-cream-60);
  font-size: var(--text-caption);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Мелкий шрифт (пояснение + оговорка). Обёртка и её тело растворяются: на
   десктопе оба абзаца — самостоятельные элементы сетки в своих областях.
   Сворачивание и кнопка живут только на мобильном. */
.calc__fine, .calc__fine-body { display: contents; }
.calc__fine-toggle { display: none; }

/* Навигация полосы ввода — мобильный сценарий, на широком экране полосы нет. */
.calc__strip-nav { display: none; }

/* Фокус с клавиатуры — на тёмном без него контрол теряется */
.calc :focus-visible,
.calc__check input:focus-visible + .calc__check-box {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* ---- Мобильный и планшет: три модуля (пересборка 07.08, сессия Е) ----

     ┌─────────────────────────────────┐
     │ заголовок              (кнопка) │   МОДУЛЬ 1 — карточка: всё, что
     │ 1,8 ₽    фраза-лид              │   блок ответил. Раскрывается
     │ доля в цене чашки               │   последней строкой — себестоимость.
     │ вложение · маржа · объём        │
     │ себестоимость чашки — 81 ₽   ⌄  │
     └─────────────────────────────────┘
     ░ формат │ поток │ цена ░░░░░░░░░░    МОДУЛЬ 2 — полоса ввода, листается
                                           вбок; во всю ширину экрана.
       машина · цена · чем обоснована      МОДУЛЬ 3 — без рамки: рекомендация
       [ Обсудить эту конфигурацию   → ]   и действие.

   Почему полоса, а не столбик полей: три группы в столбик занимали ≈ 380 px,
   ответ уезжал за экран, и калькулятор переставал отвечать на действие.
   Вбок они листаются одной лентой высотой ≈ 130 px — модуль 1 и модуль 2
   помещаются в один экран, и закреплять ответ больше не нужно (липкая
   строка снята вместе с её кодом в calculator.js). */
@media (max-width: 899px) {
  /* Линии секции сняты: границу блока держат рамка карточки и полоса ввода.
     Волосяная линия впритык к скруглённой рамке читается вторым контуром. */
  .calc {
    border-top: 0;
    border-bottom: 0;
    padding: 26px 0 0;
    margin-bottom: 44px;
  }

  /* Две колонки нужны ровно одной строке — числу и фразе рядом с ним;
     остальные узлы идут во всю ширину. Порядок задан областями, а не order:
     так вся раскладка видна целиком в одном месте. */
  .calc__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "head    head"
      "answer  lead"
      "bsub    bsub"
      "detail  detail"
      "cogs    cogs"
      "strip   strip"
      "dots    dots"
      "model   model"
      "cta     cta"
      "fine    fine";
  }
  /* Обёртки растворяем: иначе их дети не участвуют в сетке и разложить их
     по областям нельзя. */
  .calc__out, .calc__controls { display: contents; }

  /* ---- Модуль 1: карточка ответа ----
     Пустой слой на первых пяти строках (заголовок … себестоимость). Рамку он
     уводит в поля секции на 12 px и на столько же возвращает отступ — текст
     остаётся на общей сетке страницы, а рамка живёт в гуттере. Заливки нет,
     только контур, поэтому слой ничего не перекрывает; клики пропускает. */
  .calc__card {
    display: block;
    grid-area: 1 / 1 / 6 / -1;
    margin: -22px -12px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    pointer-events: none;
  }

  .calc__head { grid-area: head; padding-right: 64px; } /* полоса под кнопку меню */
  .calc__title { margin-bottom: 0; }

  /* Число и фраза — в одном ряду: развёрнутые по вертикали, они занимали
     половину карточки, и таблица уезжала под сгиб. */
  .calc__answer {
    grid-area: answer;
    position: static;
    padding: 24px 0 0;
    min-height: 0;
  }
  .calc__big { font-size: clamp(54px, 17vw, 76px); }
  .calc__lead {
    grid-area: lead;
    margin: 0;
    padding: 30px 0 0 16px;
    font-size: var(--text-body);
    line-height: 1.5;
    max-width: none;
  }
  /* Режим «поток 1 200+»: числа нет, и колонка под ним пустая — фраза
     занимает всю ширину карточки, а не столбец справа. */
  .calc__grid:has([data-calc-numbers][hidden]) .calc__lead {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .calc__big-sub { grid-area: bsub; margin: 20px 0 0; }
  /* Таблица остаётся в карточке, а строка про тепловой запас уходит вниз,
     к рекомендации: в карточке она занимала до 130 px (на экране 640 полоса
     ввода из-за неё уезжала за сгиб), а по смыслу это довод к выбору машины,
     а не строка расчёта. Ради разделения растворяем .calc__detail. */
  .calc__detail { display: contents; }
  .calc__rows { grid-area: detail; margin-top: 18px; }
  /* Строка про тепловой запас снята с мобильного целиком: 4–5 строк прозы
     между таблицей и полосой ввода отодвигали управление за сгиб, а довод
     про бойлеры посетитель всё равно получает в карточке машины. На десктопе
     она остаётся — там места под неё хватает. */
  .calc__short-note { display: none; }
  .calc__disclosure { grid-area: cogs; }

  /* ---- Модуль 2: полоса ввода ----
     Во всю ширину экрана — это панель управления, а не карточка. Фон
     полупрозрачный: сплошной цвет закрыл бы зерно секции и полоса читалась
     бы плоской заплаткой. */
  .calc__strip {
    grid-area: strip;
    display: flex;
    gap: 24px;
    /* 46, а не 24: рамка карточки уходит на 22 px ниже последней строки —
       отступ полосы отсчитываем от неё, а не от текста себестоимости. */
    margin: 46px -24px 0;
    padding: 18px 24px 20px;
    background: rgba(225, 224, 204, .035);
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* свайп вбок не уходит в «назад» браузера */
    /* mandatory, а не proximity: при proximity полоса останавливалась там, где
       кончился инерционный бросок — половина группы за краем, и непонятно,
       дочитал ли ты поле. Жёсткая привязка делает полосу дискретной: любой
       свайп, слабый или сильный, ставит ровно следующую группу. */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }
  .calc__strip::-webkit-scrollbar { display: none; }
  .calc__strip > .calc__field {
    flex: none;
    gap: 12px;
    scroll-snap-align: start;
    /* Слева отступ уже даёт scroll-padding полосы; вторые 24 px сдвигали бы
       привязанную группу глубже, чем стоит первая. Справа они нужны последней
       группе — см. ниже. */
    scroll-margin: 0 24px 0 0;
  }
  /* Последняя группа привязывается концом. При start ей на широком телефоне
     (414–430 px) не хватало хода: полоса упиралась в конец за 20 px до точки
     привязки, и последний свайп вставал криво. Конец достижим всегда — это
     и есть максимум прокрутки. */
  .calc__strip > .calc__field:last-child { scroll-snap-align: end; }
  /* Ширина групп задана так, чтобы следующая всегда выглядывала краем:
     полоса без выглядывающего края читается как обрезанная, и вторую
     группу просто не ищут. */
  .calc__field--flow, .calc__field--price { width: min(86vw, 336px); }
  /* Кофемолка остаётся в ряду с ценой: строкой ниже она добавляла полосе
     54 px высоты. Даём чекбоксу сжиматься — текст переносится в две строки,
     а ряд остаётся одной высоты с соседними группами. */
  .calc__strip .calc__check { flex: 1 1 150px; min-width: 0; }
  /* Перенос задаём сами, а не отдаём переносу по месту: «Нужна кофемолка
     ARES-90B» рвалось внутри названия модели. Своя строка на группу
     «модель + надбавка» — ровно две строки в любой ширине полосы. */
  .calc__check-model { display: block; }
  /* Отбивка 24 px нужна была в столбце полей; в полосе она сдвигает
     сегмент-контрол вниз — три группы должны начинаться на одной высоте. */
  .calc__fieldset > .calc__label { margin-bottom: 12px; }
  /* Подпись-опора «Средняя кофейня — 190 чашек в день» снята: в полосе она
     стоит второй строкой лейбла, сдвигает ползунок вниз относительно соседних
     групп и подсказывает чужое число там, где посетитель вводит своё.
     На десктопе остаётся — там она уходит в правый конец строки лейбла. */
  .calc__note--aside { display: none; }
  /* Ползунок внутри горизонтального скроллера: без этого палец, ведущий
     бегунок, пролистывает полосу вместо изменения значения. pan-y оставляет
     странице вертикальный скролл. */
  .calc__range { touch-action: pan-y; }

  /* Навигация полосы. Три засечки = счётчик и позиция; подпись словом снимает
     догадку про жест. Точками не делаем — точки читаются как карусель
     картинок; засечка-риска ближе к шкале прибора, а полоса и есть прибор. */
  /* Всё влево, а не по краям: у правого края экрана висит плавающая кнопка
     меню и накрывала бы подсказку ровно в тот момент, когда её читают. */
  .calc__strip-nav {
    grid-area: dots;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
  }
  .calc__strip-dots { display: flex; align-items: center; gap: 7px; padding: 10px 0; }
  .calc__strip-dot {
    position: relative;
    width: 18px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--border-muted);
    cursor: pointer;
    transition: width var(--dur-state) var(--ease-out-expo),
                background var(--dur-state) var(--ease-out-expo);
  }
  /* Зона нажатия крупнее рисунка: сама риска высотой 2 px, пальцем в неё
     не попасть. */
  .calc__strip-dot::before { content: ""; position: absolute; inset: -14px -5px; }
  .calc__strip-dot.is-active { width: 30px; background: var(--cream); }
  .calc__strip-hint {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-3);
    font-size: var(--text-overline);
    letter-spacing: .02em;
    white-space: nowrap;
    transition: opacity var(--dur-hover) var(--ease-out-expo);
  }
  /* После первого свайпа подсказка больше не нужна — она сделала свою работу
     и дальше была бы шумом в чистой полосе. */
  .calc__strip-nav.is-used .calc__strip-hint { opacity: 0; pointer-events: none; }
  .calc__strip-hint-arrow { display: inline-flex; animation: calc-nudge 2.4s var(--ease-out-expo) infinite; }
  @keyframes calc-nudge {
    0%, 62%, 100% { transform: translateX(0); }
    72%           { transform: translateX(4px); }
    84%           { transform: translateX(0); }
  }

  /* ---- Модуль 3: рекомендация и действие ---- */
  .calc__model { grid-area: model; margin-top: 26px; }
  /* Машина теперь стоит сразу под полями, и строка «меняете поток — меняется
     машина» стала шумом: это видно на глазах. */
  .calc__model-hint { display: none; }
  .calc__cta {
    grid-area: cta;
    margin-top: 24px;
    justify-self: stretch;
    justify-content: space-between;   /* стрелка уходит к правому краю */
  }
  /* ---- Мелкий шрифт: свёрнут ----
     Под кнопкой шло 11 строк подряд — пояснение к расчёту и юридическая
     оговорка. Сплошной массив мелкого текста после действия читается как
     конец страницы, и блок «Рассрочка и лизинг» ниже до него не доживал.
     Оставляем три строки и растворяем нижнюю: обрыв по маске виден как
     «текст продолжается», в отличие от жёсткой обрезки. Текст остаётся в DOM
     целиком — оговорку нельзя ни прятать от индексации, ни резать. */
  .calc__fine { grid-area: fine; display: block; margin-top: 20px; }
  .calc__fine-body {
    display: block;
    max-height: 74px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 34%, transparent 100%);
    transition: max-height var(--dur-hover) var(--ease-out-expo);
  }
  .calc__fine.is-open .calc__fine-body {
    max-height: 1800px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .calc__fine .calc__inline-legal { margin: 0; }
  .calc__fine .calc__legal { margin: 14px 0 0; }
  /* Кнопка повторяет раскрытие себестоимости в этом же блоке: один жест —
     один рисунок. */
  .calc__fine-toggle {
    width: 100%;
    min-height: var(--control-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding: 12px 0 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--text-body-sm);
    color: var(--text-2);
    cursor: pointer;
    text-align: left;
  }
  .calc__fine-toggle[aria-expanded="true"] .calc__chev { transform: rotate(180deg); }
}

/* ---- Десктоп ----
   Пересборка 07.08 (третья). Композиция:

     заголовок             | МАШИНА             ← шапка, общая волосяная линия
     поля                  | ЧИСЛО · предложение
     поля                  |         доля в чашке
     поля                  | как посчитано
     поля                  | действие
     оговорка во всю ширину

   Машина поднята в шапку: подбор — такой же ответ блока, как и число, и
   зависит он от тех же полей. Кикер «Рассчитана на такой поток» держит
   рамку — иначе крупная цена наверху читается как ценник до расчёта.
   Число и его фраза стоят в одном ряду: разведённые по вертикали, они
   заставляли перечитывать блок сверху вниз ради одной строки. */
@media (min-width: 900px) {
  .calc { padding: 44px 0 40px; }
  .calc__grid {
    /* Доли, а не 1fr: левой колонке нужно ≈ 420 px (ползунок с полем, четыре
       пилюли, цена с кофемолкой), колонке числа хватает ширины самого числа. */
    grid-template-columns: minmax(0, .92fr) minmax(0, .44fr) minmax(0, .64fr);
    grid-template-areas:
      "head     model   model"
      "controls answer  lead"
      "controls answer  bsub"
      "controls detail  detail"
      "controls cta     cta"
      "controls ilegal  ilegal"
      "controls .       ."
      "legal    legal   legal";
    /* Предпоследняя строка — 1fr, и она нужна. Колонка полей растянута на
       все строки; без гибкой строки-приёмника её избыток высоты grid
       раскидывает поровну по строкам справа, и между таблицей и кнопкой
       открывается дыра — видно в режиме «поток 1 200+». */
    grid-template-rows: auto auto auto auto auto auto 1fr auto;
    align-items: start;
    column-gap: 0;
  }

  /* Шапка: вопрос слева, машина справа, под обоими — общая волосяная линия.
     stretch обязателен: при align-items: start колонки шапки разной высоты,
     и линия под ними расходится на две ступеньки. */
  .calc__head {
    grid-area: head;
    align-self: stretch;
    padding: 0 48px 24px 0;
    border-bottom: 1px solid var(--border-hairline);
  }
  /* Машина прижата к низу шапки: так обе колонки сидят на общей линии.
     Высоту строки задаёт она сама — заголовок слева короче. */
  .calc__model {
    grid-area: model;
    align-self: stretch;
    justify-content: flex-end;
    padding: 0 0 24px 48px;
    border-bottom: 1px solid var(--border-hairline);
  }
  /* В шапке подсказка про пересчёт — шум: кикер «Рассчитана на такой поток»
     говорит то же, а машина меняется прямо на глазах. На мобильном она
     стоит далеко от полей, там строка остаётся. */
  .calc__model-hint { display: none; }

  /* Поля. Вертикальная линия делит калькулятор надвое: слева вводные,
     справа ответ. Она на колонке полей, поэтому идёт ровно на её высоту
     и не доезжает до оговорки внизу. Вес --border-soft, а не hairline:
     на 10 % длинная вертикаль на тёмном фоне пропадала — горизонтальные
     линии той же плотности видно, вертикальную глаз не ловит.
     Рисуем псевдоэлементом, а не border-right: линия должна начинаться
     с зазором ниже горизонтальной под шапкой и не касаться её — стык
     крестом превращал две половины в рамку одной таблицы. Старт совпадает
     с верхом первого лейбла (padding-top колонки). */
  .calc__controls {
    grid-area: controls;
    position: relative;
    align-self: stretch;   /* тянем на все строки половины, иначе линия
                              обрывается на последнем поле */
    padding: 34px 48px 0 0;
  }
  .calc__controls::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 0;
    right: 0;
    width: 1px;
    background: var(--border-soft);
    pointer-events: none;
  }

  /* Ответ: цифра слева, фраза справа от неё, доля — под фразой. Ячейка числа
     занимает обе строки, поэтому цифра остаётся крупной, а текст рядом
     разложен на два уровня и не тянется в одну длинную строку. */
  .calc__answer { grid-area: answer; padding: 30px 0 0 48px; min-height: 0; border-left: 0; }
  .calc__lead   { grid-area: lead; margin: 0; padding: 34px 0 0 24px; font-size: var(--text-body); max-width: 46ch; }
  .calc__big-sub { grid-area: bsub; margin: 0; padding: 18px 0 0 24px; max-width: 46ch; }

  .calc__out    { display: contents; }
  .calc__detail { grid-area: detail; padding: 30px 0 0 48px; }
  .calc__cta    { grid-area: cta; align-self: start; justify-self: start; margin: 28px 0 0 48px; }
  .calc__inline-legal { grid-area: ilegal; padding: 16px 0 0 48px; }
  .calc__legal  { grid-area: legal; margin: 44px 0 0; max-width: none; }

  /* Режим «поток 1 200+»: числа нет, и колонка под ним пустует — фраза
     занимает всю ширину правой половины вместо узкого столбца. */
  .calc__grid:has([data-calc-numbers][hidden]) .calc__lead { grid-column: 2 / -1; padding-left: 48px; }

  .calc__big { font-size: clamp(76px, 8.2vw, 116px); }
}

/* Узкий десктоп и планшет в альбоме: на правую половину остаётся ≈ 470 px,
   и фраза рядом с числом сжимается до нечитаемого столбца. Здесь она встаёт
   над числом, всё остальное в композиции сохраняется. */
@media (min-width: 900px) and (max-width: 1079px) {
  .calc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0;
    grid-template-areas:
      "head     model   model"
      "controls lead    lead"
      "controls answer  answer"
      "controls bsub    bsub"
      "controls detail  detail"
      "controls cta     cta"
      "controls ilegal  ilegal"
      "controls .       ."
      "legal    legal   legal";
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
  }
  .calc__lead    { padding: 32px 0 0 48px; }
  .calc__answer  { padding: 12px 0 0 48px; }
  .calc__big-sub { padding: 8px 0 0 48px; }
}

/* Узкий экран: на 390 px под контент остаётся ≈ 342, а сегмент-контрол в
   десктопных отступах занимает 358 и переносит «Другое» на вторую строку
   внутри оправы. Поджимаем поля кнопок — четыре слова помещаются в строку. */
@media (max-width: 520px) {
  .calc__pills .pill-toggle { padding: 9px 10px; }
}

@media (max-width: 420px) {
  .calc__control-row { gap: 10px; }
  .calc__num { width: 84px; }
  .calc__suffix .calc__num { width: 104px; }
  .calc__ticks { margin-right: 100px; }
}

/* ---- Доступность: сниженная анимация ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim], [data-anim="card"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .link-specs { animation: none; }
  .sm-toggle::before { animation: none; }
  .calc__chev, .calc__range::-webkit-slider-thumb { transition: none; }
}