/* ==========================================================================
   Главная (макет home/home, холст 1). Префикс hm-.
   Раскладка: ПК ≥1200 (контент 1200), промежуточная 768–1199, телефон <768.
   Цвета — только токены (tokens.css); тёмная тема приходит с ними.
   Появление по входу в кадр: у секции [data-reveal] JS ставит .is-in; до этого
   анимации внутри стоят на паузе в начальном кадре. Без JS (нет .js на <html>)
   всё проигрывается сразу; при reduced-motion — стоит на месте.
   ========================================================================== */

.hm { display: flex; flex-direction: column; }

/* --- Общие мелочи ------------------------------------------------------- */
.hm-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
  line-height: 1.2; letter-spacing: var(--ls-display); text-wrap: balance; color: var(--text);
}
.hm-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.hm-tl {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 14px; font-weight: 600; color: var(--brand-text); background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.hm-tl:hover { color: var(--link-hover); }
.hm-tl-go, .hm-tl-dn { display: inline-flex; transition: transform var(--dur-hover) var(--ease-std); }
.hm-tl:hover .hm-tl-go { transform: translateX(3px); }
.hm-tl:hover .hm-tl-dn { transform: translateY(2px); }
.hm-tl--md { font-size: 15px; gap: 6px; min-height: 44px; }
.hm-tl--lg { font-size: 16px; gap: 8px; min-height: 44px; flex-shrink: 0; }
.hm-tl-dn { display: none; }

.hm-chev { flex-shrink: 0; color: var(--text-3); transition: transform var(--dur-hover) var(--ease-std); }

/* логотип/монограмма магазина в квадрате */
.hm-mono {
  width: var(--sz); height: var(--sz); flex-shrink: 0; border-radius: calc(var(--sz) * .27);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text); font-weight: 700; font-size: 14px;
}
.hm-mono--dark { background: var(--text); color: var(--bg); }
/* логотипы рисуют под светлый фон — плитка белая и в тёмной теме */
.hm-mono--logo { background: var(--photo-tile); border: 1px solid var(--line-soft); overflow: hidden; }
.hm-mono--logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* индекс доверия в строке магазина */
.hm-ti {
  min-width: 34px; height: 26px; padding: 0 7px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--text-2); border: 1.5px solid transparent;
}
.hm-ti--unknown { background: var(--surface); border: 1.5px dashed var(--placeholder); color: var(--text-2); }
.hm-ti--reliable { background: var(--brand-bg); color: var(--brand-text); }
.hm-ti--ordinary { background: var(--surface-3); color: var(--text-2); }
.hm-ti--caveats { background: var(--warn-bg); color: var(--warn-text-2); }
.hm-ti--risky { background: var(--risk-bg); color: var(--risk); }

/* --- Анимации ----------------------------------------------------------- */
@keyframes hm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hm-scene { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hm-card { from { opacity: 0; transform: translateY(18px) rotate(5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes hm-lay { from { opacity: 0; transform: translateY(16px) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes hm-roll { from { transform: translateY(0); } }
@keyframes hm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-scale-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hm-stamp { 0% { opacity: 0; transform: scale(1.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes hm-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@keyframes hm-tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hm-spring { 0% { transform: scale(1); } 30% { transform: scale(.86); } 60% { transform: scale(1.16); } 80% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes hm-bell { 0% { transform: rotate(0); } 14% { transform: rotate(16deg); } 32% { transform: rotate(-13deg); } 50% { transform: rotate(9deg); } 68% { transform: rotate(-5deg); } 84% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes hm-tilt { from { opacity: 0; transform: translateY(-16px) rotate(0); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes hm-fade { from { opacity: 0; } }
@keyframes hm-pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hm-ring { from { stroke-dashoffset: 100; } }
@keyframes hm-tick { to { transform: rotate(360deg); } }
@keyframes hm-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 55% { transform: rotate(9deg) scale(1.08); } 80% { transform: rotate(-3deg); } }

/* первый экран: слова заголовка по одному, дальше блоки каскадом */
.hm-w { display: inline-block; animation: hm-rise .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.hm-in { animation: hm-rise .4s var(--ease-out) both; }
.hm-d4 { animation-delay: .22s; } .hm-d5 { animation-delay: .28s; } .hm-d6 { animation-delay: .34s; } .hm-d7 { animation-delay: .4s; }
.hm-hero-pill.hm-in { animation-delay: 0s; }
.hm-scene { animation: hm-scene .56s var(--ease-out) .5s both; }
.hm-card { animation: hm-card .48s var(--ease-out) .78s both; }
/* блоки ниже: подъём по входу в кадр, каскад через --i */
.hm-rise { animation: hm-rise .48s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.hm-lay { animation: hm-lay .5s var(--ease-out) both; }
.js [data-reveal]:not(.is-in) .hm-rise,
.js [data-reveal]:not(.is-in).hm-lay,
.js [data-reveal]:not(.is-in) .vg-rise,
.js [data-reveal]:not(.is-in) .hm-anim,
.js [data-reveal]:not(.is-in) .hm-anim * { animation-play-state: paused; }
.js [data-reveal]:not(.is-in) .hm-rise { opacity: 0; }

/* ==========================================================================
   Лента проверок
   ========================================================================== */
.hm-tk { background: var(--surface); border-bottom: 1px solid var(--line); }
.hm-tk-in {
  max-width: calc(var(--wrap-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  height: 56px; display: flex; align-items: center; gap: 20px;
}
.hm-tk-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hm-tk-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; }
.hm-tk-t { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.hm-tk-h { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text); }
.hm-tk-u { font-size: 13px; line-height: 16px; color: var(--text-3); }
.hm-tk-sep { width: 1px; height: 28px; background: var(--line); flex-shrink: 0; }
.hm-tk-view { position: relative; flex: 1 1 auto; min-width: 0; height: 56px; overflow: hidden; display: flex; align-items: center; padding-left: 48px; outline: none; }
.hm-tk-track { display: flex; align-items: center; width: max-content; flex-shrink: 0; animation: hm-tk var(--tk-dur, 64s) linear 2.2s infinite; }
.hm-tk-list { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; }
.hm-tk-it { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex-shrink: 0; }
.hm-tk-row { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 15px; line-height: 1.3; }
.hm-tk-ok { color: var(--brand-text); }
.hm-tk-shop { font-weight: 600; color: var(--text); }
.hm-tk-title { color: var(--text-2); }
.hm-tk-date { color: var(--text-3); font-size: 14px; }
.hm-tk-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--field-border); flex-shrink: 0; }
.hm-tk-fade { position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.hm-tk-fade--l { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.hm-tk-fade--r { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.hm-tk:hover .hm-tk-track, .hm-tk:focus-within .hm-tk-track, .hm-tk.is-paused .hm-tk-track { animation-play-state: paused; }
.hm-tk-btn {
  height: 40px; padding: 0 14px 0 12px; border-radius: var(--r-10); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); display: flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font); flex-shrink: 0; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.hm-tk-btn:hover { background: var(--surface-2); border-color: var(--line-field); }
.hm-tk-btn-in { display: flex; align-items: center; justify-content: center; }
.hm-tk-i-play { display: none; }
.hm-tk.is-paused .hm-tk-i-play { display: block; }
.hm-tk.is-paused .hm-tk-i-pause { display: none; }
.hm-tk-i-pause { display: flex; }

/* ==========================================================================
   Первый экран
   ========================================================================== */
.hm-hero { display: flex; gap: 40px; align-items: stretch; padding-top: 40px; }
.hm-hero-copy { width: 600px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 20px; min-width: 0; }
.hm-hero-pill {
  display: flex; align-items: center; gap: 8px; align-self: flex-start; height: 32px; padding: 0 12px;
  border-radius: 32px; background: var(--brand-bg); color: var(--brand-text); font-size: 14px; font-weight: 600;
}
.hm-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.14;
  letter-spacing: -0.03em; color: var(--text); text-wrap: balance;
}
.hm-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 580px; }
.hm-check { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.hm-form { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hm-form-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-fieldrow { position: relative; }
.hm-field {
  display: flex; align-items: center; height: 64px; border: 2px solid var(--text); border-radius: var(--r-16);
  padding: 0 150px 0 18px; gap: 12px; background: var(--surface); box-shadow: var(--sh-hard);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.hm-field:focus-within { border-color: var(--brand); box-shadow: 0 6px 0 var(--brand); }
.hm-lens { display: flex; color: var(--text-3); transition: transform .18s var(--ease-std); }
.hm-field:focus-within .hm-lens { transform: rotate(-12deg) scale(1.06); color: var(--brand-text); }
.hm-field input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; height: 56px; padding: 0;
  background: transparent; color: var(--text); font: 17px var(--font);
}
.hm-field input::placeholder { color: var(--placeholder); }
.hm-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hm-field input:focus-visible { outline: none; }
.hm-clear {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; padding: 0;
}
.hm-clear[hidden] { display: none; }
.hm-go {
  position: absolute; right: 10px; top: 8px; flex-shrink: 0; height: 48px; padding: 0 26px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--brand); color: var(--on-accent); font: 700 17px/1 var(--font);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.hm-go:hover { background: var(--brand-hover); }
.hm-go:active { background: var(--brand-hover); transform: scale(.98); }
.hm-go-ar { display: none; }

/* подсказки под полем */
.hm-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-16);
  box-shadow: var(--sh-menu); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  animation: hm-sug .18s var(--ease-out) both;
}
@keyframes hm-sug { from { opacity: 0; transform: translateY(-6px); } }
.hm-sug[hidden] { display: none; }
.hm-sug-g { padding: 8px 10px 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.hm-sug-i {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-10);
  color: var(--text); position: relative;
}
.hm-sug-i:hover, .hm-sug-i[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.hm-sug-i[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.hm-sug-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--text); }
.hm-sug-ic--cat { background: var(--warm-bg); color: var(--warm-text); }
.hm-sug-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-sug-n { font-size: 15px; font-weight: 500; }
.hm-sug-n b { font-weight: 700; }
.hm-sug-c { font-size: 13px; color: var(--text-3); }
.hm-sug-all { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.hm-sug-all .hm-sug-i { color: var(--brand-text); font-weight: 600; justify-content: space-between; }
.hm-sug-keys { display: flex; gap: 14px; padding: 8px 10px 4px; border-top: 1px solid var(--line-soft); margin-top: 4px; font-size: 13px; color: var(--text-3); }
.hm-sug-keys kbd { font: 600 12px var(--font); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text); margin-right: 4px; }

.hm-ex { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hm-ex-t { font-size: 14px; color: var(--text-3); }
.hm-ex-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip {
  height: 34px; padding: 0 12px; border-radius: var(--r-10); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.hm-chip:hover { background: var(--surface-2); border-color: var(--line-field); color: var(--text); }
.hm-chip:active { background: var(--surface-3); transform: scale(.98); }
/* «Попробуйте»: настоящий товар и вывод расчёта по нему */
.hm-chip--try { gap: 8px; height: auto; min-height: 34px; padding: 4px 6px 4px 12px; }
.hm-chip-n { overflow: hidden; text-overflow: ellipsis; }
.hm-chip-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hm-chip-tag--fake { background: var(--risk-bg); color: var(--risk); }
.hm-chip-tag--good { background: var(--brand-bg); color: var(--brand-on-bg); }

.hm-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hm-points li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text); }
.hm-point-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-point-ic svg { width: 13px; height: 13px; }

.hm-stats-w { display: flex; flex-direction: column; gap: 10px; }
.hm-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px 16px; border-radius: var(--r-14); background: var(--surface-2); min-width: 0; }
.hm-stat dt { font-size: 14px; line-height: 1.3; color: var(--text-3); }
.hm-stat dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-roll-box {
  display: block; height: 28px; overflow: hidden; font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.02em; font-size: 22px; line-height: 28px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-roll { display: flex; flex-direction: column; transform: translateY(-80%); animation: hm-roll .9s var(--ease-out) .55s both; }
.hm-roll > span { display: block; height: 28px; }
.hm-stat-ic { display: none; color: var(--text-3); }
.hm-stat--hot { background: var(--risk-bg); }
.hm-stat--hot dt, .hm-stat--hot .hm-roll-box, .hm-stat--hot .hm-stat-ic { color: var(--risk); }

/* сцена справа: расчёт, кот, выносная карточка */
.hm-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 712px; border-radius: var(--r-32); overflow: hidden; scroll-margin-top: 120px; }
.hm-calc {
  position: absolute; top: 26px; left: 26px; right: 26px; z-index: 2;
  background: var(--surface); border-radius: var(--r-20); box-shadow: var(--sh-float);
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px;
}
.hm-calc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hm-calc-name { font-size: 18px; font-weight: 700; }
.hm-calc-note { font-size: 13px; color: var(--text-3); }
/* демонстрация: плашка «цифры условные» и подпись внизу — чтобы пример не читали как данные */
.hm-calc--demo .hm-calc-top { align-items: center; }
.hm-calc--demo .hm-calc-note { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px dashed var(--warm-text); border-radius: 8px; background: var(--warm-bg); color: var(--warm-on-bg); font-weight: 600; white-space: nowrap; }
/* расчёт на настоящем товаре: название — ссылка на его страницу, дата цен рядом */
.hm-calc--live .hm-calc-top { align-items: flex-start; }
.hm-calc--live .hm-calc-name { min-width: 0; color: var(--text); line-height: 1.3; text-decoration: underline; text-decoration-color: var(--line-field); text-underline-offset: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hm-calc--live .hm-calc-name:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.hm-calc--live .hm-calc-note { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.hm-calc-shop { margin-top: -4px; font-size: 15px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.hm-calc-demo { margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.45; color: var(--text-3); }
.hm-calc-demo a { color: var(--brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hm-calc-demo a:hover { color: var(--link-hover); }
.hm-calc-cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.hm-calc-col { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: var(--r-14); background: var(--surface-2); }
.hm-calc-col--we { background: var(--surface); border: 2px solid var(--brand); }
.hm-calc-h { font-size: 13px; font-weight: 700; color: var(--text-3); }
.hm-calc-col--we .hm-calc-h { color: var(--brand-text); }
.hm-calc-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.3; }
.hm-calc-r > span:first-child { color: var(--text-3); }
.hm-calc-r > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-calc-r .is-minus { color: var(--brand-text); }
.hm-calc-sp { flex-grow: 1; }
.hm-calc-line { height: 1px; background: var(--line-total); }
.hm-calc-col--we .hm-calc-line { background: var(--line); }
.hm-calc-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hm-calc-tot > span:first-child { font-size: 14px; font-weight: 600; color: var(--text-3); }
.hm-calc-col--we .hm-calc-tot > span:first-child { color: var(--text); }
.hm-calc-sum { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 18px; color: var(--text-3); white-space: nowrap; }
.hm-calc-col--we .hm-calc-sum { font-size: 20px; color: var(--brand-text); }
.hm-calc-win { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-14); background: var(--brand-bg); }
.hm-calc-win-t { display: flex; flex-direction: column; gap: 2px; }
.hm-calc-win-v { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 24px; color: var(--brand-text); }
.hm-calc-win-s { font-size: 14px; color: var(--brand-on-bg); }
.hm-calc-why {
  height: 40px; padding: 0 14px; border-radius: var(--r-10); border: 1px solid var(--brand-text); background: var(--surface);
  color: var(--brand-text); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
  transition: background-color var(--dur-hover) var(--ease-std);
}
.hm-calc-why:hover { background: var(--brand-bg); color: var(--brand-text); }
.hm-dn { display: inline-flex; transition: transform var(--dur-hover) var(--ease-std); }
.hm-calc-why:hover .hm-dn { transform: translateY(2px); }
.hm-calc-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.hm-calc-foot svg { color: var(--brand-text); flex-shrink: 0; }
/* «Проверка дня»: настоящее предложение, когда товара для расчёта нет */
.hm-chk-shop { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.hm-chk-shop:hover { color: var(--link-hover); }
.hm-chk-logo { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r-10); background: #FFFFFF; border: 1px solid var(--line); }
.hm-chk-logo img { width: 30px; height: 30px; object-fit: contain; }
.hm-chk-t { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hm-chk-t:hover { color: var(--link-hover); }
.hm-chk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.hm-chk-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--brand-bg); color: var(--brand-on-bg); font-size: 13px; font-weight: 600; }
.hm-chk-list { list-style: none; margin: 0; padding: 4px 14px; border-radius: var(--r-14); background: var(--surface-2); }
.hm-chk-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.3; }
.hm-chk-r + .hm-chk-r { border-top: 1px solid var(--line); }
.hm-chk-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hm-chk-ic--ok { background: var(--brand-bg); color: var(--brand-text); }
.hm-chk-ic--no { background: var(--risk-bg); color: var(--risk); }
.hm-chk-ic--na { background: var(--surface); color: var(--text-3); }
.hm-chk-l { color: var(--text-3); }
.hm-chk-v { font-weight: 600; text-align: right; }
.hm-chk .hm-calc-win-v { font-size: 22px; }
.hm-stage-cat { position: absolute; left: 18px; bottom: -6px; z-index: 1; }
.hm-why {
  position: absolute; bottom: 30px; right: 26px; z-index: 2; width: 262px;
  background: var(--surface); border-radius: var(--r-20); box-shadow: var(--sh-float);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transform: rotate(1.5deg); outline: none;
}
.hm-why-h { margin: 0; font-family: var(--font); letter-spacing: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.hm-why-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.35; }
.hm-why-r > span:first-child { color: var(--text-3); }
.hm-why-r > span:last-child { white-space: nowrap; color: var(--brand-text); font-weight: 600; }
.hm-why:target, .hm-why.is-hl { box-shadow: var(--sh-float), 0 0 0 3px var(--brand); }

/* ==========================================================================
   Разбор дня / Где искать
   ========================================================================== */
.hm-band { padding-top: 40px; }
.hm-proof {
  border: 1px solid var(--line); border-radius: var(--r-22); padding: 28px 32px 32px; background: var(--surface);
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 40px; align-items: start;
}
.hm-proof-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hm-proof-badge {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 32px;
  background: var(--risk-bg); color: var(--risk); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.hm-proof-main { display: flex; flex-direction: column; gap: 16px; }
.hm-proof-photo {
  position: relative; display: block; width: 180px; height: 148px; flex-shrink: 0; border-radius: var(--r-14);
  background: var(--photo-tile); border: 1px solid var(--line-soft); overflow: hidden;
}
.hm-proof-photo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.hm-proof-slash { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hm-proof-slash line { stroke: var(--risk-line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: hm-draw .36s var(--ease-out) .3s both; }
.hm-proof-stamp-w { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-9deg); }
/* штамп лежит на плитке фото, а она белая и в тёмной теме (--photo-tile), поэтому цвета
   штампа постоянные — как у .badge--risk в base.css */
.hm-proof-stamp {
  display: flex; flex-direction: column; align-items: center; padding: 6px 9px; border: 3px solid #B42318; border-radius: 9px;
  background: rgba(255,255,255,.92); color: #B42318; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3.5px #B42318;
  animation: hm-stamp .42s var(--ease-spring) .5s both;
}
.hm-proof-name { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text); }
.hm-proof-name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.hm-proof-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hm-proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hm-proof-src { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.hm-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; }
.hm-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-18); background: var(--surface-2); min-width: 0; color: var(--text-2); }
.hm-step--up { background: var(--warn-bg); color: var(--warn-text); }
.hm-step--real { background: var(--risk-bg); color: var(--risk); }
.hm-step-top { display: flex; align-items: center; justify-content: space-between; }
.hm-step-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: inherit; }
.hm-step-n { font-size: 13px; font-weight: 700; }
.hm-step-l { font-size: 15px; font-weight: 600; }
.hm-step-v { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.hm-step--real .hm-step-v { color: var(--risk); }
.hm-step-v--date { font-family: var(--font); font-weight: 700; font-size: 21px; line-height: 31px; letter-spacing: 0; }
.hm-step-c { font-size: 14px; }
.hm-step-ar { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.hm-strike { position: relative; display: inline-block; text-decoration: none; }
.hm-strike-l { position: absolute; left: -6%; right: -6%; top: 66%; height: 2px; transform: rotate(-5deg); }
.hm-strike-l > span { display: block; height: 100%; border-radius: 2px; background: var(--risk-line); transform-origin: 0 50%; animation: hm-scale-x .36s var(--ease-out) .78s both; }
.hm-proof-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; }
.hm-proof-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.hm-proof-note svg { flex-shrink: 0; color: var(--text-3); }
.hm-proof-btn { flex-shrink: 0; gap: 10px; font-weight: 600; }
.hm-proof-btn:active { transform: scale(.98); }
.js .hm-proof:not(.is-in) .hm-proof-slash line,
.js .hm-proof:not(.is-in) .hm-proof-stamp,
.js .hm-proof:not(.is-in) .hm-strike-l > span { animation-play-state: paused; }

.hm-where { border: 1px solid var(--line); border-radius: var(--r-22); padding: 28px 32px 32px; background: var(--surface); display: flex; flex-direction: column; gap: 24px; }
.hm-where-head { display: flex; flex-direction: column; gap: 12px; }
.hm-where-tags { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.hm-where-badge { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 32px; background: var(--brand-bg); color: var(--brand-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.hm-where-upd { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.hm-where-p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 700px; }
.hm-wall { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-wall-i {
  display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: var(--r-14);
  background: var(--surface); color: var(--text);
  transition: border-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.hm-wall-i:hover { border-color: var(--line-strong); transform: translateY(-2px); color: var(--text); box-shadow: var(--sh-card-hover); }
.hm-wall-logo {
  width: 116px; height: 44px; flex-shrink: 0; border-radius: var(--r-10); border: 1px solid var(--line-soft);
  background: var(--photo-tile); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 6px;
}
.hm-wall-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hm-wall-mono { font-weight: 700; font-size: 14px; color: #16181D; } /* плитка логотипа всегда белая */
.hm-wall-t { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hm-wall-n { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-wall-c { font-size: 13px; color: var(--text-3); }
.hm-wall-go { color: var(--text-3); flex-shrink: 0; transition: transform var(--dur-hover) var(--ease-std); }
.hm-wall-i:hover .hm-wall-go { transform: translateX(3px); }
.hm-where-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Заголовок секции (Свежие, Лента, Промокоды)
   ========================================================================== */
.hm-sec { padding-top: 64px; }
.hm-fresh { display: flex; flex-direction: column; gap: 24px; }
.hm-sec-head { display: flex; flex-direction: column; gap: 10px; }
.hm-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hm-sec-tt { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.hm-tagpill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border-radius: 30px; background: var(--brand-bg); color: var(--brand-on-bg); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.hm-sec-tt .hm-tagpill { align-self: center; }
.hm-tagpill--grey { background: var(--surface-3); color: var(--text-2); }
.hm-more {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; min-width: 44px;
  font-size: 15px; font-weight: 600; white-space: nowrap; flex-shrink: 0; color: var(--brand-text);
}
.hm-more:hover { color: var(--link-hover); }
.hm-more svg { transition: transform var(--dur-hover) var(--ease-std); }
.hm-more:hover svg { transform: translateX(3px); }
.hm-more-s { display: none; }
.hm-sec-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.hm-sec-note svg { flex-shrink: 0; margin-top: 2px; }
.hm-fresh-more { display: none; }

/* ==========================================================================
   Середина: лента, «Промокоды и акции», боковая колонка
   ========================================================================== */
.hm-mid {
  padding-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 316px; column-gap: 28px; row-gap: 64px;
  grid-template-areas: "feed side" "promo side"; grid-template-rows: auto 1fr; align-items: start;
}
.hm-feed { grid-area: feed; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hm-feed .hm-sec-head { gap: 6px; }
.hm-promo { grid-area: promo; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hm-side { grid-area: side; align-self: stretch; min-width: 0; }
.hm-side-in { position: sticky; top: 90px; padding-top: 90px; display: flex; flex-direction: column; gap: 16px; }

.hm-rows { border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); overflow: hidden; }
.hm-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 76px 264px; gap: 16px; align-items: center; padding: 16px 20px;
  transition: background-color var(--dur-hover) var(--ease-std);
}
.hm-row + .hm-row { border-top: 1px solid var(--line-soft); }
.hm-row:hover { background: var(--surface-2); }
.hm-row-logo { display: flex; }
.hm-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.hm-row-shop { font-size: 15px; font-weight: 600; color: var(--text); }
.hm-row-shop:hover { color: var(--brand-text); }
.hm-row-h { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.hm-row-h a { color: var(--text); }
.hm-row-h a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.hm-row-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hm-row-marks .badge { height: 24px; }
.hm-row-votes { font-size: 13px; font-weight: 600; color: var(--brand-on-bg); white-space: nowrap; }
.hm-row-votes.is-bad { color: var(--risk); }
.hm-row-size { display: flex; justify-content: flex-end; }
.hm-size { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; color: var(--brand-text); white-space: nowrap; }
.hm-size--word { font-size: 18px; letter-spacing: -0.02em; color: var(--text-2); }
.hm-size.is-muted { color: var(--text-3); }
.hm-row-acts { display: flex; gap: 8px; }
.hm-code.oc-code { flex: 1 1 auto; min-width: 0; height: 44px; }
.hm-code .oc-mask { font-size: 14px; }
.hm-code .oc-shut { left: 86px; padding-left: 4px; font-size: 14px; }
.hm-code .ic { flex-shrink: 0; }
.hm-row-go {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-12); border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: var(--text);
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.hm-row-go:hover { background: var(--surface-2); border-color: var(--line-field); color: var(--text); }
.hm-row-cta { flex: 1 1 auto; --btn-h: 44px; }
.hm-rows-more {
  border-top: 1px solid var(--line); background: var(--surface-2); height: 60px; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); transition: background-color var(--dur-hover) var(--ease-std);
}
.hm-rows-more:hover, .hm-rows-more:focus-visible { background: var(--surface-3); color: var(--text); }
.hm-rows-more:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.hm-rows-more svg { transition: transform var(--dur-hover) var(--ease-std); }
.hm-rows-more:hover svg { transform: translateX(4px); }
.hm-feed.is-in .hm-nudge { animation: hm-nudge .6s var(--ease-std) 1.4s 2; }

/* лента пуста: заметка с котом */
.hm-enough {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 20px; border-radius: var(--r-18); background: var(--surface-2);
}
.hm-enough-cat { display: flex; }
.hm-enough-t p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hm-enough-t b { color: var(--text); }
.hm-enough-acts { display: flex; flex-direction: column; gap: 8px; }

/* «Промокоды и акции» — две колонки в левой части */
.hm-promo-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 720px; }
.hm-promo-grid.oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-promo-toggle[hidden] { display: none; }

/* --- Сайдкарты ----------------------------------------------------------- */
.hm-sc { border: 1px solid var(--line); border-radius: var(--r-22); background: var(--surface); padding: 16px 10px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-sc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 4px 6px; }
.hm-sc-h { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; line-height: 1.3; min-width: 0; }
.hm-sc-ic { width: 32px; height: 32px; border-radius: var(--r-10); background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); }
.hm-sc-ic--red { background: var(--risk-bg); color: var(--risk); }
.hm-sc-ic--green { background: var(--brand-bg); color: var(--brand-text); }
.hm-sc-more { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 32px; min-width: 44px; color: var(--brand-text); font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.hm-sc-more--red { color: var(--risk); }
.hm-sc-more--red:hover { color: var(--risk); text-decoration: underline; text-underline-offset: 3px; }
.hm-sc-more svg { transition: transform var(--dur-hover) var(--ease-std); }
.hm-sc-more:hover svg { transform: translateX(3px); }
.hm-sc-lead { display: none; margin: 0 6px 4px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.hm-sc-list { display: flex; flex-direction: column; gap: 2px; }
.hm-sb-row { border-radius: var(--r-12); color: var(--text); padding: 10px; transition: background-color var(--dur-hover) var(--ease-std); }
.hm-sb-row:hover, .hm-sb-row:active { background: var(--surface-2); color: var(--text); }
.hm-sb-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.hm-sb-row:hover .hm-chev { transform: translateX(3px); }
.hm-sc-foot { display: flex; flex-direction: column; gap: 4px; margin: 2px 6px 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.hm-sc-foot p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.hm-sc-foot--row { flex-direction: row; align-items: flex-start; gap: 10px; padding-top: 12px; }
.hm-sc-foot--row p { color: var(--text-2); }
.hm-sc-foot .hm-tl { min-height: 32px; }
.hm-sc-foot p .hm-tl { display: inline-flex; min-height: 0; vertical-align: baseline; white-space: nowrap; }

/* скидки с оговорками */
.hm-deb { display: flex; flex-direction: column; gap: 10px; }
.hm-deb-top { display: flex; align-items: flex-start; gap: 12px; }
.hm-deb-top .hm-chev { margin-top: 2px; }
.hm-deb-ph { width: 52px; height: 52px; border-radius: var(--r-12); flex-shrink: 0; background: var(--risk-bg); color: var(--risk); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hm-deb-ph img { width: 100%; height: 100%; object-fit: contain; background: var(--photo-tile); padding: 3px; }
.hm-deb-t { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.hm-deb-n { font-size: 15px; font-weight: 600; line-height: 1.35; }
.hm-deb-d { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.hm-deb-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 6px; }
.hm-deb-was, .hm-deb-real { padding: 8px 10px; border-radius: var(--r-12); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-deb-real { background: var(--risk-bg); }
.hm-deb-ar { color: var(--text-3); justify-self: center; }
.hm-deb-l { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.hm-deb-real .hm-deb-l { color: var(--risk); font-weight: 600; }
.hm-deb-v { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--text-2); }
.hm-deb-real .hm-deb-v { color: var(--risk); }
.hm-deb-v--sm { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.hm-deb-v s { text-decoration: none; position: relative; display: inline-block; white-space: nowrap; }
.hm-deb-v s svg { position: absolute; left: -3px; top: 30%; width: calc(100% + 6px); height: 56%; overflow: visible; }
.hm-deb-v s line { stroke: var(--risk-line); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; animation: hm-draw .32s var(--ease-out) .3s both; }
.hm-deb-mark { position: relative; display: inline-block; white-space: nowrap; }
.hm-deb-mark svg { position: absolute; left: -2px; bottom: -5px; width: calc(100% + 4px); height: 7px; overflow: visible; }
.hm-deb-mark path { stroke: var(--risk-line); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 1; animation: hm-draw .5s var(--ease-out) .42s both; }
.js [data-reveal]:not(.is-in) .hm-deb-v s line, .js [data-reveal]:not(.is-in) .hm-deb-mark path { animation-play-state: paused; }

/* промокоды магазинов */
.hm-code-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; }
.hm-cr-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-cr-n { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-cr-m { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13px; line-height: 1.4; }
.hm-cr-shop { font-weight: 600; color: var(--text-2); }
.hm-cr-d { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--text-3); }
.hm-cr-d.is-urgent { color: var(--warn-text-2); font-weight: 600; }
.hm-cr-v { display: flex; justify-content: flex-end; min-width: 50px; }
.hm-pct { display: inline-flex; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--brand-text); white-space: nowrap; line-height: 1.2; }
.hm-code-row:hover .hm-pct, .hm-code-row:active .hm-pct { animation: hm-spring .52s var(--ease-std) both; }
.hm-cr-code { height: 24px; padding: 0 8px; border-radius: 8px; background: var(--brand-bg); color: var(--brand-on-bg); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }

/* следить за ценой */
.hm-sc--watch { padding: 0; gap: 0; overflow: hidden; }
.hm-watch-art { position: relative; height: 144px; overflow: hidden; }
.hm-watch-tag { position: absolute; right: 12px; top: 14px; height: 24px; padding: 0 8px; border-radius: 24px; background: var(--surface); display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--warm-dark); }
.hm-watch-mail {
  position: absolute; left: 14px; top: 14px; width: 232px; max-width: calc(100% - 90px); background: var(--surface); border-radius: var(--r-14);
  box-shadow: var(--sh-float); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; transform: rotate(-2deg);
}
.hm-sc--watch.hm-rise .hm-watch-mail { animation: hm-tilt .56s var(--ease-out) .3s both; }
.hm-watch-mh { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.hm-watch-mh svg { margin-top: 2px; flex-shrink: 0; }
.hm-watch-li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--text-2); }
.hm-watch-li-ic { width: 18px; height: 18px; border-radius: 6px; background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-watch-cat { position: absolute; right: 10px; bottom: -14px; display: flex; }
.hm-watch-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.hm-watch-p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hm-watch-form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-watch-row { display: flex; gap: 8px; }
.hm-watch-in.input { flex: 1 1 auto; width: 0; min-width: 0; height: 48px; font-size: 16px; }
.hm-watch-btn { flex-shrink: 0; padding: 0 14px; font-size: 15px; gap: 8px; }
.hm-watch-btn:active { transform: scale(.98); }
.hm-bell { transform-origin: 12px 3px; overflow: visible; }
.hm-sc--watch.hm-rise .hm-bell { animation: hm-bell .9s var(--ease-std) 1.1s both; }
.hm-watch-btn:hover .hm-bell, .hm-watch-btn:focus-visible .hm-bell { animation: hm-bell .9s var(--ease-std) both; }
.hm-watch-steps { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.hm-watch-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.hm-watch-steps li > span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* магазины */
.hm-shop-row { display: flex; align-items: center; gap: 12px; }
.hm-shr-t { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hm-shr-n { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hm-shr-m { font-size: 13px; color: var(--text-3); line-height: 1.35; }
.hm-shr-cat { font-weight: 700; white-space: nowrap; }
.hm-shr-cat--reliable { color: var(--brand-text); }
.hm-shr-cat--caveats { color: var(--warn-text-2); }
.hm-shr-cat--risky { color: var(--risk); }
.hm-shr-cat--ordinary { color: var(--text-2); }

/* ==========================================================================
   Что мы проверяем
   ========================================================================== */
.hm-mech-band { margin-top: 64px; background: var(--surface-2); padding: 64px 0; }
.hm-mech { display: flex; flex-direction: column; gap: 32px; }
.hm-mech-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hm-mech-tt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hm-mech-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 640px; }
.hm-mech-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px 32px 380px; gap: 20px; padding: 0 25px 0 29px; margin-bottom: -20px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.hm-mech-list { display: flex; flex-direction: column; gap: 12px; }
.hm-mc { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-18); overflow: hidden; --mc: var(--brand); --mc-bg: var(--brand-bg); --mc-ic: var(--brand-text); }
.hm-mc::before { content: ''; display: block; width: 6px; flex-shrink: 0; background: var(--mc); }
.hm-mc--red { --mc: var(--risk-line); --mc-bg: var(--risk-bg); --mc-ic: var(--risk); }
.hm-mc--grey { --mc: var(--line-strong); --mc-bg: var(--surface-2); --mc-ic: var(--text-2); }
.hm-mc--warm { --mc: var(--warn); --mc-bg: var(--warn-bg); --mc-ic: var(--warn-text-2); }
.hm-mc-in { flex-grow: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px 32px 380px; gap: 20px; align-items: center; padding: 24px 24px 24px 22px; }
.hm-mc-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-mc-tt { display: flex; align-items: center; gap: 12px; }
.hm-mc-tt h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; flex-grow: 1; }
.hm-mc-ic { width: 40px; height: 40px; border-radius: var(--r-12); background: var(--mc-bg); color: var(--mc-ic); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-mc-txt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hm-ex-tag { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 24px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.hm-mc-shop { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-14); background: var(--surface-2); min-width: 0; }
.hm-mc-claim { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hm-mc-claim b { font-size: 17px; font-weight: 700; }
.hm-mc-claim .hm-mc-now { font-size: 19px; }
.hm-mc-was { font-size: 15px; color: var(--text-3); white-space: nowrap; }
/* красная плашка «−77 %» — как .badge--risk (base.css): одна и та же в обеих темах */
.hm-mc-pct { height: 24px; padding: 0 7px; border-radius: 6px; background: #B42318; color: #FFFFFF; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.hm-mc-rev { font-size: 15px; color: var(--text-2); }
.hm-mc-claim .hm-mc-rev { font-size: 15px; font-weight: 600; }
.hm-stars { display: inline-flex; gap: 2px; color: var(--warn); }
.hm-stars svg { fill: var(--warn); }
.hm-mc-q { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.hm-mc-ar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.hm-mc-demo { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px; border-radius: var(--r-14); background: var(--mc-bg); min-width: 0; min-height: 226px; }
.hm-mc--grey .hm-mc-demo { background: var(--surface-2); }
.hm-mc-we { font-size: 13px; font-weight: 700; color: var(--mc-ic); }
.hm-mc-rows { display: flex; flex-direction: column; gap: 10px; }
.hm-mc-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.35; }
.hm-mc-r > span:first-child { color: var(--text-2); }
.hm-mc-r > span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-mc-r .is-minus { color: var(--brand-text); }
.hm-mc-line { height: 1px; background: var(--brand-track); }
.hm-mc-tot { align-items: center; }
.hm-mc-tot > span:first-child { font-weight: 700; color: var(--text); }
.hm-mc-roll-box { display: inline-flex; flex-direction: column; height: 28px; overflow: hidden; font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; font-size: 22px; color: var(--brand-text); }
.hm-mc-roll { display: flex; flex-direction: column; align-items: flex-end; transform: translateY(-66.6667%); animation: hm-roll .6s var(--ease-out) .7s both; }
.hm-mc-roll > span { display: block; height: 28px; line-height: 28px; white-space: nowrap; }
.hm-mc-r1, .hm-mc-r2, .hm-mc-r3, .hm-mc-r4 { animation: hm-rise .26s var(--ease-out) both; }
.hm-mc-r1 { animation-delay: .3s; } .hm-mc-r2 { animation-delay: .38s; } .hm-mc-r3 { animation-delay: .46s; } .hm-mc-r4 { animation-delay: .62s; }
.hm-mc-hist { display: flex; flex-direction: column; gap: 10px; }
.hm-mc-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.hm-mc-big { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; font-size: 28px; line-height: 1.2; white-space: nowrap; }
.hm-mc-old { position: relative; display: inline-block; font-size: 18px; font-weight: 600; color: var(--text-3); white-space: nowrap; line-height: 1.2; }
.hm-mc-strike { position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--risk-line); transform-origin: 0 50%; transform: rotate(-8deg); animation: hm-strike .36s var(--ease-out) .55s both; }
@keyframes hm-strike { from { transform: rotate(-8deg) scaleX(0); } }
.hm-mc-chart { display: flex; flex-direction: column; gap: 4px; }
.hm-mc-chart-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-3); }
.hm-mc-svg { display: block; width: 100%; height: 64px; }
.hm-mc-dash { stroke: var(--risk-line); stroke-width: 1.5; stroke-dasharray: 5 5; }
.hm-mc-area { fill: var(--surface); fill-opacity: .7; animation: hm-fade .4s var(--ease-out) .8s both; }
.hm-mc-line2 { stroke: var(--text); stroke-width: 2.2; fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: hm-draw .8s var(--ease-std) .3s both; vector-effect: non-scaling-stroke; }
.hm-mc-end { fill: var(--text); transform-box: fill-box; transform-origin: 50% 50%; animation: hm-pop .3s var(--ease-out) 1.05s both; }
.hm-mc-bad { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--risk); }
.hm-mc-bad svg { flex-shrink: 0; }
.hm-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-ring-i { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.hm-ring svg { position: absolute; inset: 0; }
.hm-ring-bg { fill: var(--surface); stroke: var(--line); stroke-width: 5; }
.hm-ring-fg { fill: none; stroke-width: 5; stroke-dasharray: 100 100; stroke-dashoffset: var(--off); animation: hm-ring .9s var(--ease-out) .35s both; }
.hm-ring--good .hm-ring-fg { stroke: var(--trust-good); }
.hm-ring--mid .hm-ring-fg { stroke: var(--warn); }
.hm-ring > span { position: relative; font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.hm-ring--good > span, .hm-ring--good + .hm-ring-t b { color: var(--brand-text); }
.hm-ring--mid > span, .hm-ring--mid + .hm-ring-t b { color: var(--warn-text-2); }
.hm-ring-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-ring-t > span { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hm-ring-t b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.hm-mc-wait { display: flex; flex-direction: column; gap: 10px; }
.hm-mc-wait p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--warn-text); }
.hm-mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-mc-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r-10); background: var(--surface); border: 1.5px solid var(--line-field); color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hm-mc-chip--wait { border-color: var(--warn); color: var(--warn-text); font-weight: 700; }
.hm-tick { transform-origin: 12px 12px; animation: hm-tick 3s steps(12) 1s 3; }
.js .hm-mech:not(.is-in) .hm-mc *, .js .hm-mech:not(.is-in) .hm-mc-roll { animation-play-state: paused; }

/* ==========================================================================
   Разделы
   ========================================================================== */
.hm-cats { padding-top: 56px; display: flex; flex-direction: column; gap: 28px; }
.hm-cats-head { display: flex; flex-direction: column; gap: 8px; }
.hm-cats-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.hm-cats-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.hm-cats-grid > li { display: flex; min-width: 0; }
.hm-cat {
  flex: 1 1 auto; display: flex; align-items: center; gap: 14px; padding: 16px 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-18);
  background: var(--surface); color: var(--text); min-width: 0;
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.hm-cat:hover, .hm-cat:active { transform: translateY(-3px); box-shadow: var(--sh-card-hover); border-color: var(--text); color: var(--text); }
.hm-cat-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--warm-bg); color: var(--warm-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-cat-ic svg { transform-origin: 50% 60%; }
.hm-cat:hover .hm-cat-ic svg { animation: hm-wiggle .48s var(--ease-std); }
.hm-cat-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; }
.hm-cat-n { font-size: 16px; font-weight: 600; line-height: 1.3; }
.hm-cat-c { font-size: 14px; line-height: 1.3; color: var(--text-3); }
.hm-cat-c b { color: var(--brand-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-cat-go { color: var(--text-3); flex-shrink: 0; transition: transform var(--dur-hover) var(--ease-std); }
.hm-cat:hover .hm-cat-go { transform: translateX(3px); }

/* ==========================================================================
   SEO-вопросы
   ========================================================================== */
.hm-seo { margin-top: 56px; padding-top: 56px; padding-bottom: 64px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; position: relative; }
.hm-seo::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.hm-seo-side { display: flex; flex-direction: column; gap: 14px; }
.hm-seo-ic { width: 48px; height: 48px; border-radius: var(--r-14); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.hm-seo-side .hm-tl { display: block; }
.hm-seo-side .hm-tl-go, .hm-seo-more .hm-tl-go { vertical-align: middle; margin-left: 4px; }
.hm-seo-side p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-3); }
.hm-seo-list { display: flex; flex-direction: column; }
.hm-qa { border-bottom: 1px solid var(--line); }
.hm-qa:first-child { border-top: 1px solid var(--line); }
.hm-qa > summary { list-style: none; }
.hm-qa > summary::-webkit-details-marker { display: none; }
.hm-qa-sum { min-height: 76px; padding: 16px 8px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-std); }
.hm-qa-sum:hover { background: var(--surface-2); }
.hm-qa-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur-hover) var(--ease-std); }
.hm-qa-h { margin: 0; flex-grow: 1; min-width: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.hm-qa-chc { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur-hover) var(--ease-std); }
.hm-qa-sum:hover .hm-qa-chc { background: var(--line); }
.hm-qa-chev { transition: transform .24s var(--ease-std); }
.hm-qa[open] .hm-qa-chev { transform: rotate(180deg); }
.hm-qa[open] .hm-qa-ic { background: var(--brand-bg); color: var(--brand-text); }
.hm-qa-a p { margin: 0; padding: 0 64px 28px 68px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
/* раскрытие переходами по [open], где браузер умеет ::details-content */
@supports selector(::details-content) {
  .hm-qa { interpolate-size: allow-keywords; }
  .hm-qa::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: block-size .24s var(--ease-std), opacity .24s var(--ease-std), content-visibility .24s var(--ease-std) allow-discrete; }
  .hm-qa[open]::details-content { block-size: auto; opacity: 1; }
}

/* ==========================================================================
   Промежуточная ширина 768–1199
   ========================================================================== */
@media (max-width: 1199px) {
  .hm-hero { flex-direction: column; gap: 32px; }
  .hm-hero-copy { width: auto; max-width: 720px; padding-top: 0; }
  .hm-stage { min-height: 0; padding: 26px 26px 0; display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 0 24px; }
  .hm-calc { position: relative; inset: auto; grid-column: 1 / -1; }
  .hm-stage-cat { position: relative; left: auto; bottom: -6px; align-self: end; width: 200px; height: auto; margin-top: 16px; }
  .hm-why { position: relative; right: auto; bottom: auto; align-self: center; margin: 24px 0 30px; }

  .hm-steps { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 6px; }
  .hm-step { padding: 16px; }
  .hm-step-v { font-size: 24px; }
  .hm-proof-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hm-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; grid-template-rows: none; column-gap: 20px; row-gap: 20px; }
  .hm-side, .hm-side-in { display: contents; }
  .hm-feed, .hm-promo, .hm-side { grid-area: auto; }
  .hm-feed { grid-column: 1 / -1; order: 1; margin-bottom: 28px; }
  .hm-sc--deb { order: 2; } .hm-sc--codes { order: 3; } .hm-sc--watch { order: 4; } .hm-sc--shops { order: 5; }
  .hm-sc { align-self: start; }
  .hm-promo { grid-column: 1 / -1; order: 6; margin-top: 28px; }
  .hm-promo-grid.oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hm-mech-cols { display: none; }
  .hm-mc-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "txt txt" "shop demo"; }
  .hm-mc-txt { grid-area: txt; }
  .hm-mc-shop { grid-area: shop; align-self: stretch; }
  .hm-mc-ar { display: none; }
  .hm-mc-demo { grid-area: demo; min-height: 0; }

  .hm-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-seo { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hm-row { grid-template-columns: 44px minmax(0, 1fr) 70px 244px; gap: 14px; }
}
@media (min-width: 768px) { .hm-only-m { display: none; } }
/* ПК без ленты: заметка во всю ширину, сайдкарты — тремя колонками под ней */
@media (min-width: 1200px) {
  .hm-mid--nofeed { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; grid-template-rows: none; column-gap: 20px; row-gap: 20px; }
  .hm-mid--nofeed .hm-side, .hm-mid--nofeed .hm-side-in { display: contents; }
  .hm-mid--nofeed .hm-feed, .hm-mid--nofeed .hm-promo { grid-area: auto; }
  .hm-mid--nofeed .hm-feed { grid-column: 1 / -1; order: 1; margin-bottom: 8px; }
  .hm-mid--nofeed .hm-sc { order: 2; align-self: start; }
  .hm-mid--nofeed .hm-promo { grid-column: 1 / -1; order: 3; margin-top: 44px; }
  .hm-mid--nofeed .hm-promo-grid.oc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Телефон < 768
   ========================================================================== */
@media (max-width: 767px) {
  .hm-not-m { display: none; }

  /* лента: только иконка и кнопка-квадрат */
  .hm-tk-in { height: 48px; padding: 0 2px 0 12px; gap: 6px; --tk-dur: 54s; }
  .hm-tk-ic { width: auto; height: auto; background: none; color: var(--brand-text); }
  .hm-tk-t, .hm-tk-sep { display: none; }
  .hm-tk-view { height: 48px; padding-left: 12px; }
  .hm-tk-it { gap: 12px; padding-right: 12px; }
  .hm-tk-row { font-size: 13px; gap: 6px; }
  .hm-tk-row .hm-tk-ok { width: 16px; height: 16px; }
  .hm-tk-title { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .hm-tk-date { font-size: 13px; }
  .hm-tk-fade--l { width: 14px; } .hm-tk-fade--r { width: 18px; }
  .hm-tk-btn { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; justify-content: center; }
  .hm-tk-btn:hover { background: transparent; }
  .hm-tk-btn-in { width: 36px; height: 36px; border-radius: var(--r-10); background: var(--surface-3); }
  .hm-tk-btn-t { display: none; }

  /* первый экран */
  .hm-hero { padding-top: 24px; gap: 24px; }
  .hm-hero-copy { gap: 14px; }
  .hm-hero-pill { height: auto; min-height: 32px; padding: 0 12px 0 10px; font-size: 13px; gap: 6px; }
  .hm-hero-pill svg { width: 14px; height: 14px; }
  .hm-h1 { font-size: 30px; line-height: 1.15; }
  .hm-lead { font-size: 16px; }
  .hm-check { margin-top: 10px; gap: 16px; }
  .hm-form { gap: 10px; }
  .hm-field { height: 56px; border-radius: var(--r-14); padding: 0 12px 0 16px; gap: 10px; }
  .hm-field .hm-lens svg { width: 20px; height: 20px; }
  .hm-field input { font-size: 16px; height: 48px; }
  .hm-fieldrow { display: flex; flex-direction: column; gap: 16px; }
  .hm-go { position: static; width: 100%; height: 56px; border-radius: var(--r-14); }
  .hm-sug { top: 96px; }
  .hm-go-ar { display: inline-flex; }
  .hm-tl-dn { display: inline-flex; }
  .hm-check > .hm-tl { margin-top: -8px; }
  .hm-ex { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; }
  .hm-ex-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); width: calc(100% + 2 * var(--gutter)); scrollbar-width: none; }
  .hm-ex-row::-webkit-scrollbar { display: none; }
  .hm-chip { height: 44px; padding: 0 14px; border-radius: var(--r-12); font-size: 15px; flex-shrink: 0; }
  .hm-chip--try { height: 44px; padding: 0 6px 0 14px; }
  .hm-points li { align-items: flex-start; }
  .hm-point-ic { margin-top: 1px; }
  .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
  .hm-stat { padding: 14px 14px 14px 16px; }
  .hm-stat-ic { display: flex; }
  .hm-stats-w { gap: 6px; }
  .hm-stats-w .hm-tl { min-height: 44px; }

  .hm-stage { border-radius: 28px; padding: 16px 16px 0; display: flex; flex-direction: column; scroll-margin-top: 80px; }
  .hm-calc { padding: 18px 16px 16px; gap: 12px; }
  .hm-calc-top { flex-direction: column; gap: 2px; }
  .hm-calc--demo .hm-calc-top { align-items: flex-start; gap: 8px; }
  .hm-calc-cols { grid-template-columns: minmax(0, 1fr); }
  .hm-calc-r { font-size: 15px; line-height: 1.35; }
  .hm-calc-sp { display: none; }
  .hm-calc-sum { font-size: 22px; }
  .hm-calc-col--we .hm-calc-sum { font-size: 22px; }
  .hm-calc-win { flex-direction: column; align-items: flex-start; }
  .hm-calc-win-v { font-size: 22px; }
  .hm-calc-why { display: none; }
  .hm-calc-foot { align-items: flex-start; line-height: 1.4; }
  .hm-stage-cat { position: absolute; left: -6px; bottom: -6px; width: 128px; margin: 0; }
  .hm-why { position: relative; align-self: flex-end; width: 238px; margin: 22px 0 30px; padding: 14px 16px; }
  .hm-why-h { font-size: 15px; }

  /* разбор дня: заголовок наверх, шаги столбиком */
  .hm-band { padding-top: 36px; }
  .hm-proof { display: flex; flex-direction: column; gap: 18px; padding: 16px; border-radius: var(--r-20); }
  .hm-proof-side, .hm-proof-body, .hm-proof-head { display: contents; }
  .hm-proof-badge { order: 1; height: 30px; align-self: flex-start; }
  .hm-proof-head .hm-h2 { order: 2; margin-top: -8px; font-size: 22px; line-height: 1.25; }
  .hm-proof-src { display: none; }
  .hm-proof-main { order: 3; flex-direction: row; align-items: center; gap: 14px; }
  .hm-proof-photo { width: 96px; height: 96px; }
  .hm-proof-stamp { font-family: var(--font); font-size: 13px; padding: 4px 7px; border-width: 2.5px; letter-spacing: .05em; }
  .hm-proof-name { font-size: 16px; min-height: 44px; display: flex; align-items: center; }
  .hm-steps { order: 4; display: flex; flex-direction: column; gap: 14px; }
  .hm-step-ar { display: none; }
  .hm-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 0; background: none; color: var(--text-2); }
  .hm-step--up { color: var(--warn-text); }
  .hm-step--real { color: var(--risk); }
  .hm-step-top { display: contents; }
  .hm-step-ic { grid-row: 1 / span 3; width: 44px; height: 44px; background: var(--surface-2); }
  .hm-step--up .hm-step-ic { background: var(--warn-bg); }
  .hm-step--real .hm-step-ic { background: var(--risk-bg); }
  .hm-step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 48px; bottom: -14px; width: 2px; background: var(--line); }
  .hm-step-n { display: none; }
  .hm-step-l { font-size: 14px; padding-top: 2px; }
  .hm-step-v { font-size: 22px; line-height: 1.2; }
  .hm-step-v--date { font-size: 21px; line-height: 1.25; }
  .hm-step-c { font-size: 13px; color: var(--text-3); }
  .hm-step-l, .hm-step-v, .hm-step-c { grid-column: 2; }
  .hm-proof-foot { order: 5; display: flex; flex-direction: column; gap: 18px; padding: 0; align-items: stretch; }
  .hm-proof-note { align-items: flex-start; font-size: 14px; line-height: 1.45; }
  .hm-proof-note svg { width: 16px; height: 16px; margin-top: 2px; }
  .hm-proof-btn { width: 100%; }

  .hm-where { padding: 16px; border-radius: var(--r-20); gap: 16px; }
  .hm-where .hm-h2 { font-size: 22px; line-height: 1.25; }
  .hm-where-p { font-size: 16px; }
  .hm-wall { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hm-wall li:nth-child(n+7) { display: none; }
  .hm-wall-i { height: 64px; }
  .hm-wall-logo { width: 96px; height: 40px; }
  .hm-where-acts { flex-direction: column; }
  .hm-where-acts .btn { width: 100%; }

  /* секции */
  .hm-sec { padding-top: 36px; }
  .hm-fresh { gap: 16px; }
  .hm-sec-head { gap: 8px; }
  .hm-sec-row { align-items: flex-start; }
  .hm-sec-tt { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hm-sec-tt .hm-tagpill { align-self: flex-start; }
  .hm-h2 { font-size: 22px; line-height: 1.25; }
  .hm-more-l { display: none; }
  .hm-more-s { display: inline; }
  .hm-sec-note { font-size: 13px; }
  .hm-tagpill { height: 28px; font-size: 13px; }
  .hm-fresh .hm-tagpill { background: var(--surface-3); color: var(--text-2); }
  .js .hm-fresh.is-collapsed .hm-fresh-grid > li:nth-child(n+4) { display: none; }
  .js .hm-fresh-more:not([hidden]) { display: inline-flex; }
  .hm-fresh > .btn { margin-top: -4px; }

  .hm-mid { padding-top: 36px; display: flex; flex-direction: column; gap: 36px; }
  .hm-side, .hm-side-in { display: contents; }
  .hm-sc--watch { order: 1; }
  .hm-feed { order: 2; margin: 0; gap: 16px; }
  .hm-sc--deb { order: 3; }
  .hm-sc--codes { order: 4; }
  .hm-sc--shops { order: 5; }
  .hm-promo { order: 6; margin: 0; gap: 16px; }
  .hm-mid--nofeed .hm-sc--watch { order: 1; }

  .hm-rows { border-radius: var(--r-18); }
  .hm-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "logo meta size" "main main main" "acts acts acts"; gap: 12px; padding: 16px 14px; align-items: start; }
  .hm-row-main { display: contents; }
  .hm-row-logo { grid-area: logo; }
  .hm-row-meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 2px; align-self: center; }
  .hm-row-size { grid-area: size; align-self: center; }
  .hm-row-h { grid-area: main; font-size: 16px; }
  .hm-row-h { grid-row: 2; grid-column: 1 / -1; }
  .hm-row-marks { grid-row: 3; grid-column: 1 / -1; margin-top: -4px; }
  .hm-row-acts { grid-row: 4; grid-column: 1 / -1; }
  .hm-row-marks .badge { height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; white-space: normal; line-height: 1.3; }
  .hm-rows-more { height: 56px; font-size: 15px; }

  .hm-enough { grid-template-columns: 64px minmax(0, 1fr); padding: 16px; }
  .hm-enough-acts { grid-column: 1 / -1; }
  .hm-enough-acts .hm-tl { min-height: 44px; }

  .hm-sc-lead { display: block; }
  .hm-deb { border: 1px solid var(--line); margin-bottom: 8px; }
  .hm-sc--deb .hm-sc-foot { display: none; }
  .hm-cr-m { flex-direction: row; flex-wrap: wrap; gap: 2px 8px; }
  .hm-code-row { min-height: 64px; }

  .hm-promo-p { font-size: 16px; }
  .js .hm-promo.is-clamped .hm-promo-p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .js .hm-promo-toggle:not([hidden]) { display: inline-flex; min-height: 44px; font-size: 15px; gap: 6px; }
  .hm-promo-toggle .hm-tl-dn { display: inline-flex; }
  .hm-promo[data-open] .hm-tl-dn { transform: rotate(180deg); }
  .hm-promo-grid.oc-grid { grid-template-columns: minmax(0, 1fr); }

  .hm-mech-band { margin-top: 40px; padding: 32px 0 36px; }
  .hm-mech { gap: 20px; }
  .hm-mech-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hm-mech-lead { font-size: 16px; }
  .hm-mc { flex-direction: column; border-radius: var(--r-18); }
  .hm-mc::before { width: auto; height: 6px; }
  .hm-mc-in { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .hm-mc-tt h3 { font-size: 18px; }
  .hm-mc-tt .hm-ex-tag { background: var(--surface-3); align-self: center; }
  .hm-mc-shop { padding: 10px 14px; border-radius: var(--r-12); gap: 0; }
  .hm-mc-q { display: none; }
  .hm-mc-claim { gap: 6px 8px; }
  .hm-mc-claim b, .hm-mc-claim .hm-mc-now { font-size: 15px; }
  .hm-mc-claim-ic { display: inline-flex; color: var(--text-3); }
  .hm-mc-q-m { font-size: 14px; color: var(--text-3); }
  .hm-mc-ar { display: flex; align-self: center; width: auto; height: auto; border: 0; background: none; margin: -6px 0; transform: rotate(90deg); color: var(--text-3); }
  .hm-mc-demo { min-height: 0; padding: 14px; }
  .hm-mc-we { margin-bottom: -2px; }
  .hm-mc-big { font-size: 26px; }
  .hm-rings { gap: 10px; }
  .hm-ring-t > span { font-size: 14px; }
  .hm-ring-t b { font-size: 13px; }

  .hm-cats { padding-top: 40px; gap: 16px; }
  .hm-cats-head p { font-size: 16px; }
  .hm-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hm-cat { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px; }
  .hm-cat-n { font-size: 15px; white-space: normal; }
  .hm-cat-go { display: none; }

  .hm-seo { margin-top: 40px; padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; gap: 14px; }
  .hm-seo::before { display: none; }
  .hm-seo-ic { display: none; }
  .hm-seo .hm-h2 { font-size: 24px; }
  .hm-seo-side p { font-size: 15px; }
  .hm-qa-sum { min-height: 60px; padding: 12px 0; gap: 12px; }
  .hm-qa-ic { width: 32px; height: 32px; border-radius: var(--r-8); }
  .hm-qa-ic svg { width: 18px; height: 18px; }
  .hm-qa-h { font-size: 17px; }
  .hm-qa-chc { width: 36px; height: 36px; }
  .hm-qa-a p { padding: 0 0 20px; font-size: 16px; line-height: 1.6; }
  .hm-seo-more { margin-top: 12px; display: block; }
}

/* ==========================================================================
   Без движения: лента стоит и листается рукой, кнопки паузы нет;
   цифры, строки и карточки — сразу на месте.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* листается пальцем/колесом; системную полосу прокрутки не показываем (на Windows она
     ложилась поверх строки) — что лента длиннее, видно по затуханию справа */
  .hm-tk-view { overflow-x: auto; scrollbar-width: none; }
  .hm-tk-view::-webkit-scrollbar { display: none; }
  .hm-tk-list[data-tk-dup], .hm-tk-btn { display: none !important; }
  .hm-roll, .hm-mc-roll { transform: translateY(-80%); }
  .hm-mc-roll { transform: translateY(-66.6667%); }
  .js [data-reveal]:not(.is-in) .hm-rise { opacity: 1; }
  .hm-card, .hm-why { transform: rotate(1.5deg); }
}