/* sheet.css — таблица стилей YESCUSTOM.
   Имена классов и переменных заявлены в _tokens.js и померены по соседям (_footprint.js).
   Незаявленное имя роняет сборку через Proxy в generate.js, поэтому вводить класс здесь,
   не вписав его в CLASSES, бессмысленно.
   Блок :root подставляется на сборке по маркеру ниже: держать вторую копию палитры в css
   значит развести её с _tokens.js молча.
   ВНИМАНИЕ: последовательность звёздочка-слэш внутри комментария закрывает его досрочно и
   съедает следующий блок целиком, поэтому в комментариях этого файла её нет. */

:root {
  --yc-ink: #12161d;
  --yc-ink-soft: #1e2530;
  --yc-sheet: #ffffff;
  --yc-sheet-dim: #eef5fb;
  --yc-graphite: #5d6875;
  --yc-azure: #2ba6e8;
  --yc-azure-deep: #1379b3;
  --yc-thread: #f4b53f;
  --yc-thread-deep: #c98a14;
  --yc-rule: rgba(18,22,29,.12);
  --yc-rule-dark: rgba(255,255,255,.16);
  --yc-display: 'Bree Serif', Georgia, serif;
  --yc-text: 'Sofia Sans', system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--yc-sheet);
  color: var(--yc-ink);
  font-family: var(--yc-text);
  font-size: 17.5px;
  line-height: 1.62;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--yc-display);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.24rem; }
p { margin: 0 0 1.05em; }

/* ---- каркас -------------------------------------------------------------------------------- */

.sheetwrap { display: flex; flex-direction: column; min-height: 100vh; }
.sheetmain { flex: 1 1 auto; }

.sheetrow { width: min(1208px, 100% - 32px); margin-inline: auto; }
.sheetnarrow { width: min(792px, 100% - 32px); margin-inline: auto; }

/* ---- полосы-секции ------------------------------------------------------------------------- */

.plateband { padding: 62px 0; }
.plateplain { background: var(--yc-sheet); }
.platetint { background: var(--yc-sheet-dim); }
.platedark { background: var(--yc-ink); color: #f2f5f9; }
.platedark h1, .platedark h2, .platedark h3 { color: #fff; }

.platekick {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yc-azure-deep);
  margin: 0 0 0.65em;
}
.platedark .platekick { color: var(--yc-thread); }

.platetitle { margin: 0 0 0.4em; }
.platelede { max-width: 68ch; color: var(--yc-graphite); margin: 0 0 1.9em; }
.platedark .platelede { color: #b9c4d2; }

/* ---- кнопки -------------------------------------------------------------------------------- */

.inkbtn, .inkghost, .inkbuy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--yc-text);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 0.86em 1.5em;
  border-radius: 3px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}

.inkbtn { background: var(--yc-azure); color: #fff; border-color: var(--yc-azure); }
.inkbtn:hover { background: var(--yc-azure-deep); border-color: var(--yc-azure-deep); }

.inkghost { background: transparent; color: var(--yc-ink); border-color: var(--yc-ink); }
.inkghost:hover { background: var(--yc-ink); color: #fff; }
.platedark .inkghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.platedark .inkghost:hover { background: #fff; color: var(--yc-ink); }

.inkbuy {
  width: 100%;
  background: var(--yc-thread);
  color: var(--yc-ink);
  border-color: var(--yc-thread-deep);
  font-size: 1.06rem;
}
.inkbuy:hover { background: var(--yc-thread-deep); color: #fff; }

/* ---- шапка --------------------------------------------------------------------------------- */

.ribbontop {
  background: var(--yc-ink);
  color: #cfd8e3;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.ribbontop .sheetrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}
.ribbontop a { color: var(--yc-thread); text-decoration: none; font-weight: 600; }
.ribbontop a:hover { text-decoration: underline; }

.ribbonbar {
  background: var(--yc-sheet);
  border-bottom: 1px solid var(--yc-rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.ribbonbar .sheetrow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
}

.ribbonmark { flex: 0 0 auto; display: block; }
.ribbonmark img { width: 76px; height: 56px; object-fit: contain; }

.ribbonnav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 17px;
  align-items: center;
  order: 3;
  width: 100%;
}
.ribbonnav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--yc-ink);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ribbonnav a:hover { border-bottom-color: var(--yc-azure); }

.ribboncta { flex: 0 0 auto; margin-left: auto; padding: 0.68em 1.2em; font-size: 0.94rem; }

.ribbonjump {
  position: absolute;
  left: -9999px;
  background: var(--yc-thread);
  color: var(--yc-ink);
  padding: 10px 16px;
  font-weight: 700;
}
.ribbonjump:focus { left: 8px; top: 8px; z-index: 90; }

.ribbonburger { display: none; }

/* ---- крошки -------------------------------------------------------------------------------- */

.trailstitch {
  font-size: 0.86rem;
  color: var(--yc-graphite);
  padding: 15px 0 0;
}
.trailstitch a { color: var(--yc-graphite); text-decoration: none; }
.trailstitch a:hover { color: var(--yc-azure-deep); text-decoration: underline; }
.trailstitch span { margin: 0 7px; opacity: .55; }

/* ---- подвал -------------------------------------------------------------------------------- */

.seamfoot {
  background: var(--yc-ink);
  color: #aab6c4;
  padding: 46px 0 30px;
  font-size: 0.94rem;
}
.seamfoot h4 {
  font-family: var(--yc-text);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yc-thread);
  margin: 0 0 0.9em;
}
.seamcols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 34px;
}
.seamcols ul { list-style: none; margin: 0; padding: 0; }
.seamcols li { margin-bottom: 0.42em; }
.seamcols a { color: #cdd7e2; text-decoration: none; }
.seamcols a:hover { color: #fff; text-decoration: underline; }
.seamcols img { width: 118px; height: 86px; object-fit: contain; background: #fff; padding: 6px; border-radius: 3px; }

.seamfine {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--yc-rule-dark);
  font-size: 0.83rem;
  color: #8e9bab;
  line-height: 1.6;
}

/* ---- первый экран -------------------------------------------------------------------------- */

.openspread {
  background: var(--yc-ink);
  color: #eaf0f7;
  padding: 66px 0 58px;
  background-image:
    radial-gradient(900px 380px at 82% -8%, rgba(43, 166, 232, .34), transparent 66%),
    radial-gradient(620px 300px at 6% 108%, rgba(244, 181, 63, .17), transparent 64%);
}
.openscript { max-width: 41rem; }
.openscript h1 { color: #fff; margin-bottom: 0.34em; }
.openscript p { color: #c3cede; font-size: 1.12rem; max-width: 34rem; }
.openscript .inkbtn, .openscript .inkghost { margin: 8px 10px 0 0; }
/* ⚠ Светлый вид призрачной кнопки висел ТОЛЬКО на .platedark, а первый экран — это .openspread,
   отдельная тёмная секция мимо полос. Вторая кнопка героя рисовалась чернильным текстом по
   чернильному фону: в разметке она есть, приёмка её видит, на скриншоте её нет вовсе. */
.openspread .inkghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.openspread .inkghost:hover { background: #fff; color: var(--yc-ink); }

.openbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yc-thread);
  margin-bottom: 1.1em;
}

/* Рейл топ-товаров: на широком — пять в ряд, на узком горизонтальная лента с прокруткой.
   Скрытая полоса прокрутки оставляет ленту без подсказки, поэтому обрезанная пятая карточка
   на мобиле — нарочно, она и есть подсказка, что вправо есть ещё. */
.openparade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.openparadecard {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 5px;
  padding: 10px;
  text-decoration: none;
  color: #eaf0f7;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: background-color .16s, border-color .16s;
}
.openparadecard:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.openparadecard img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  border-radius: 3px;
}
.openparadecard b { font-weight: 600; font-size: 0.88rem; line-height: 1.32; }
.openparadecard span { font-size: 0.82rem; color: var(--yc-thread); font-weight: 700; }

/* ---- полоса преимуществ -------------------------------------------------------------------- */

.perkrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.perkcell {
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-top: 3px solid var(--yc-azure);
  border-radius: 4px;
  padding: 20px 18px;
}
.perkcell h3 { font-size: 1.06rem; margin: 0 0 0.4em; }
.perkcell p { margin: 0; font-size: 0.94rem; color: var(--yc-graphite); }
.perkcell svg { width: 26px; height: 26px; display: block; margin-bottom: 12px; color: var(--yc-azure-deep); }

/* ---- пиллы-запросы ------------------------------------------------------------------------- */

.promptrow { display: flex; flex-wrap: wrap; gap: 10px; }
.promptpill {
  display: inline-block;
  text-decoration: none;
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--yc-ink);
  transition: background-color .16s, border-color .16s, color .16s;
}
.promptpill:hover { background: var(--yc-azure); border-color: var(--yc-azure); color: #fff; }
.platetint .promptpill { background: #fff; }

/* ---- плитки разделов ------------------------------------------------------------------------ */

.aislegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aisletile {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  overflow: hidden;
  background: var(--yc-ink);
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.aisletile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.aisletile:hover img { transform: scale(1.05); }
.aisletile b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 15px 13px;
  font-family: var(--yc-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  background: linear-gradient(transparent, rgba(10, 13, 18, .88));
}
.aislecount {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--yc-thread);
  color: var(--yc-ink);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---- карточка товара ------------------------------------------------------------------------ */

.giftgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.giftplate {
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.giftplate:hover { box-shadow: 0 12px 26px rgba(18, 22, 29, .12); transform: translateY(-2px); }

.giftshot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border-bottom: 1px solid var(--yc-rule);
}
.giftshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.giftflag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  background: var(--yc-azure);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

.giftmeta { padding: 14px 15px 0; flex: 1 1 auto; }
/* Имя карточки сборщик уже укоротил, но развести одноимённые вещи короткой формой удалось
   не везде: у полусотни позиций различающее слово стоит в самом хвосте, и им достаётся
   заголовок под сто с лишним символов. Три строки — потолок, дальше многоточие. Полный текст
   при этом остаётся в разметке и в тексте ссылки, обрезка только зрительная.
   ⚠ display здесь обязан быть -webkit-box: с block многострочная обрезка не работает вовсе,
   свойство молча игнорируется и карточка снова уезжает на семь строк. */
.giftname {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-decoration: none;
  color: var(--yc-ink);
  font-family: var(--yc-display);
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 0.42em;
}
.giftname:hover { color: var(--yc-azure-deep); }
.giftmeta p { font-size: 0.9rem; color: var(--yc-graphite); margin: 0 0 0.7em; }
.giftfoot { padding: 0 15px 15px; display: flex; flex-direction: column; gap: 10px; }

.stubprice { font-family: var(--yc-display); font-size: 1.24rem; color: var(--yc-ink); }
.starchip { font-size: 0.86rem; color: var(--yc-graphite); white-space: nowrap; }
.starchip b { color: var(--yc-thread-deep); font-weight: 700; letter-spacing: 0.03em; }

/* ---- промо-дуэт ----------------------------------------------------------------------------- */

.splitpair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.splitslab {
  border-radius: 6px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 296px;
  background: var(--yc-sheet-dim);
  border: 1px solid var(--yc-rule);
}
.splitslab h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); margin-bottom: 0.35em; }
.splitslab p { color: var(--yc-graphite); max-width: 32ch; }
.splitslab .inkbtn, .splitslab .inkghost { align-self: flex-start; margin-top: 6px; }
/* Тёмный вариант плиты остался ради страницы контактов; на главной ведущая плита теперь
   лазурная — чернил там и без неё хватало. */
.splitslab.platedark { background: var(--yc-ink); border-color: transparent; }
.splitslab.platedark p { color: #b9c4d2; }
.splitlead {
  background: linear-gradient(150deg, var(--yc-azure), var(--yc-azure-deep));
  border-color: transparent;
  color: #fff;
}
.splitlead h3 { color: #fff; }
.splitlead p { color: rgba(255, 255, 255, .88); }
/* ⚠ Основная кнопка сама лазурная: на лазурной плите она пропадает целиком — в разметке есть,
   приёмка её видит, на скриншоте её нет. Здесь она белая с чернильной надписью. */
.splitlead .inkbtn { background: #fff; color: var(--yc-ink); border-color: #fff; }
.splitlead .inkbtn:hover { background: var(--yc-ink); color: #fff; border-color: var(--yc-ink); }

/* ---- цифры каталога --------------------------------------------------------------------------
   Стоят внутри первого экрана, отдельной тёмной полосы под них больше нет: с ней тёмных
   поверхностей на главной набиралось шесть. Отбиты чертой сверху, а не рамкой — рамка вокруг
   четырёх чисел на тёмном читается как таблица. */

.openscore {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* Черта нужна только в первом экране, где цифры идут подвалом под текстом героя. В полосе
   на странице раздела у них есть свой заголовок, и черта там оказалась бы второй линией
   подряд — сразу под подзаголовком полосы. */
.openspread .openscore { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--yc-rule-dark); }
.countfig {
  display: block;
  font-family: var(--yc-display);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1;
  color: var(--yc-thread);
}
.countword {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9c4d2;
}

/* ---- ценности ------------------------------------------------------------------------------- */

.creedwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.creedcell { padding: 24px 22px; background: var(--yc-sheet); border: 1px solid var(--yc-rule); border-radius: 5px; }
.creedcell svg { width: 34px; height: 34px; color: var(--yc-azure); display: block; margin-bottom: 14px; }
.creedcell h3 { margin-bottom: 0.4em; }
.creedcell p { margin: 0; color: var(--yc-graphite); }

/* ---- шаги и справочная таблица -------------------------------------------------------------- */

.stepcols { display: grid; grid-template-columns: 1fr 1.12fr; gap: 40px; align-items: start; }

.stepqueue { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.stepqueue li { display: flex; gap: 15px; margin-bottom: 22px; }
.stepdigit {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yc-azure);
  color: #fff;
  font-family: var(--yc-display);
  font-size: 1.14rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepqueue h3 { font-size: 1.08rem; margin: 0.1em 0 0.28em; }
.stepqueue p { margin: 0; color: var(--yc-graphite); font-size: 0.96rem; }

.sizeledger { width: 100%; border-collapse: collapse; font-size: 0.94rem; background: var(--yc-sheet); }
.sizeledger caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yc-azure-deep);
  padding-bottom: 10px;
}
.sizeledger th, .sizeledger td { padding: 10px 12px; border: 1px solid var(--yc-rule); text-align: left; vertical-align: top; }
.sizeledger th { background: var(--yc-sheet-dim); font-family: var(--yc-text); font-weight: 700; }
.sizeledger tbody tr:nth-child(even) td { background: #fafcfe; }

/* ---- герой-товар ---------------------------------------------------------------------------- */

.headlinerbox { display: grid; grid-template-columns: 0.85fr 1fr; gap: 40px; align-items: center; }
.headlinerframe {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--yc-rule);
}
.headlinerframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.headlinerbody h3 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem); }
.headlinerbody p { color: var(--yc-graphite); }
.headlinerbody .stubprice { font-size: 1.5rem; margin-right: 14px; }
.headlinerbody .inkbuy { max-width: 320px; margin-top: 14px; }

/* ---- уход ----------------------------------------------------------------------------------- */

.carefork { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.carecolumn { background: var(--yc-sheet); border: 1px solid var(--yc-rule); border-radius: 5px; padding: 24px 24px 20px; }
.carecolumn h3 { display: flex; align-items: center; gap: 9px; font-size: 1.12rem; }
.carecolumn h3 svg { width: 21px; height: 21px; }
.carecolumn ul { list-style: none; margin: 0; padding: 0; }
.carecolumn li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--yc-rule); color: var(--yc-graphite); }
.carecolumn li:first-child { border-top: 0; }
.carecolumn li::before { content: ''; position: absolute; left: 4px; top: 18px; width: 9px; height: 9px; border-radius: 2px; }
.carecolumn:first-child li::before { background: var(--yc-azure); }
.carecolumn:last-child li::before { background: var(--yc-thread-deep); }

/* ---- миссия --------------------------------------------------------------------------------- */

/* Полоса была тёмной, теперь светлая — цвет абзаца был подобран под чернильный фон и на белом
   стал бы почти невидимым. */
.creedoband { text-align: center; }
.creedoband h2 { max-width: 22ch; margin-inline: auto; }
.creedoband p { max-width: 62ch; margin-inline: auto; color: var(--yc-graphite); font-size: 1.06rem; }
.platedark .creedoband p { color: #c3cede; }

/* ---- длинная заметка ------------------------------------------------------------------------ */

.longsheet { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* Таблица разделов на всю ширину под колонками: в колонке она была вчетверо выше соседней и
   оставляла под ней пустую половину экрана. */
.longfoot { margin-top: 34px; }
.longhead h2 { margin-bottom: 0.45em; }
.longhead p { color: var(--yc-graphite); }
.longbody p { color: var(--yc-graphite); }
.longbody h3 { margin-top: 1.2em; }

.markerlist { list-style: none; margin: 0 0 1.4em; padding: 0; }
.markerlist li { position: relative; padding: 7px 0 7px 24px; border-top: 1px dashed var(--yc-rule); }
.markerlist li:first-child { border-top: 0; }
.markerlist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 10px;
  height: 2px;
  background: var(--yc-azure);
}

/* ---- цитаты --------------------------------------------------------------------------------- */

/* Карточка, а не полоска с жёлтой чертой слева: голый blockquote юзер отбраковал отдельной
   строкой. Ряд звёзд сверху, цитата, подпись внизу — форма с образца.
   ⚠ Звёзды нарисованы символом и помечены aria-hidden: Review/AggregateRating на сочинённые
   отзывы вешать нельзя, а звезда без разметки — просто картинка. */

.voicerow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.voicequote {
  margin: 0;
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 6px;
  padding: 26px 24px 22px;
  box-shadow: 0 4px 18px rgba(18, 22, 29, .06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.voicestars { color: var(--yc-thread-deep); letter-spacing: 3px; font-size: 1.02rem; line-height: 1; }
.voicequote blockquote { margin: 0; flex: 1 1 auto; }
.voicequote p { margin: 0; font-size: 1rem; line-height: 1.62; }
.voicewho {
  font-size: 0.86rem;
  color: var(--yc-graphite);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-top: 13px;
  border-top: 1px solid var(--yc-rule);
}

/* ---- складные вопросы на главной -------------------------------------------------------------
   Разворот держит сам <details>, js тут не участвует вовсе.
   ⚠ Свой значок рисуем ТОЛЬКО сняв родной маркер, и снимать его надо в двух местах: ::marker
   (Firefox, современный Chrome) и ::-webkit-details-marker (Safari и старый WebKit). Без второй
   строки треугольник остаётся и стоит рядом со своим плюсом. */

.queryrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; align-items: start; }
.queryfold {
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 5px;
  padding: 4px 20px;
}
.queryfold summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 34px 16px 0;
  font-family: var(--yc-display);
  font-size: 1.04rem;
  line-height: 1.4;
}
.queryfold summary::marker { content: ''; }
.queryfold summary::-webkit-details-marker { display: none; }
.queryfold summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yc-sheet-dim);
  color: var(--yc-azure-deep);
  font-family: var(--yc-text);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.queryfold[open] summary::after { content: '\2013'; background: var(--yc-azure); color: #fff; }
.queryfold[open] summary { border-bottom: 1px solid var(--yc-rule); }
.queryfold p { margin: 0; padding: 15px 0 18px; color: var(--yc-graphite); }

/* ---- финальная полоса ----------------------------------------------------------------------- */

.partingband { text-align: center; }
.partingband p { max-width: 56ch; margin-inline: auto; }
.partingband .inkbtn, .partingband .inkghost { margin: 10px 8px 0; }

/* ---- видеополоса ----------------------------------------------------------------------------
   Ролики самохостом, каждый с постером. Кадр держим aspect-ratio, а не высотой, иначе постер и
   видео разной пропорции дёргают полосу при старте.

   ⚠ Полоса была чернильной во всю ширину — вместе с героем, промо-плитой, миссией и закрытием
   тёмных поверхностей на главной выходило шесть, и юзер это отбраковал. Тёмным остался сам
   кадр: под видео чёрное поле уместно, под целой секцией — нет. */

.clipstage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #05070a;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}
.clipstage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #05070a; }

/* Во всю ширину полосы кадр 16:9 вырастает почти на весь экран и вышибает всё остальное со
   страницы. Ширину держим здесь, чтобы правило было одно на главную и на карточку товара. */
.clipband .clipstage, .clipband .clipgrid { max-width: 60rem; margin-inline: auto; }

/* Плиток четыре, а не пятнадцать: по одной на вещь. Пятнадцать в пять колонок были ногтями
   с обрезанной подписью.

   Число плиток тут не постоянное: на главной их столько, сколько снятых вещей, а на карточке
   товара — сколько дублей у этой вещи (от одного до пяти). Жёсткие три колонки оставляли
   четвёртую плитку одну во втором ряду, будто сетка оборвалась. auto-fit кладёт ряд по числу
   плиток и не требует пересчёта колонок каждый раз, когда в каталог доедет новая съёмка. */
.clipgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.cliptile {
  position: relative;
  border: 0;
  padding: 0;
  background: #05070a;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  min-height: 0;
  outline-offset: 2px;
}
.cliptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .16s; }
.cliptile:hover img { opacity: 1; }
.cliptile[aria-current='true'] { box-shadow: inset 0 0 0 2px var(--yc-thread); }
.cliptile b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 9px 8px;
  font-family: var(--yc-text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(5, 7, 10, .9));
}
.clipplay {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--yc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.clipplay svg { width: 15px; height: 15px; margin-left: 2px; }

/* ---- мелкие полосы главной ------------------------------------------------------------------ */

.moodstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.moodcell {
  text-decoration: none;
  color: var(--yc-ink);
  text-align: center;
  padding: 15px 8px;
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color .16s, color .16s;
}
.moodcell span { display: block; font-family: var(--yc-display); font-size: 1.3rem; color: var(--yc-azure); margin-bottom: 5px; }
.moodcell:hover { border-color: var(--yc-azure); color: var(--yc-azure-deep); }

.proofband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proofcell { display: flex; gap: 14px; align-items: flex-start; }
/* Жёлтая нитка была видна на чернильной полосе; на светлой она сливается с бумагой. */
.proofcell svg { flex: 0 0 auto; width: 28px; height: 28px; color: var(--yc-azure-deep); }
.platedark .proofcell svg { color: var(--yc-thread); }
.proofcell h3 { font-size: 1rem; margin: 0 0 0.25em; }
.proofcell p { margin: 0; font-size: 0.92rem; color: var(--yc-graphite); }
.platedark .proofcell p { color: #b9c4d2; }

/* ---- рейл «читать дальше» -------------------------------------------------------------------- */

.noteshelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.noteshelf a {
  display: block;
  text-decoration: none;
  color: var(--yc-ink);
  background: var(--yc-sheet);
  border: 1px solid var(--yc-rule);
  border-radius: 5px;
  padding: 20px 20px 18px;
  transition: border-color .16s, box-shadow .18s;
}
.noteshelf a:hover { border-color: var(--yc-azure); box-shadow: 0 10px 22px rgba(18, 22, 29, .09); }
.noteshelf b {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--yc-azure-deep);
  margin-bottom: 0.7em;
}
.noteshelf h3 { font-size: 1.08rem; margin-bottom: 0.35em; }
.noteshelf p { margin: 0; font-size: 0.92rem; color: var(--yc-graphite); }

/* ---- карточка товара, страница --------------------------------------------------------------
   Две колонки: слева снимок, справа факты и покупка. Панель покупки на широком экране липкая,
   но липкость снимается вместе с колонками — на узком она перекрывает описание. */

.openshotcol { display: grid; grid-template-columns: 1.02fr 1fr; gap: 42px; align-items: start; }

.openfacts > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--yc-rule);
  border-radius: 6px;
}

.openflank { position: sticky; top: 86px; }
.openflank h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); }
.openflank > p { color: var(--yc-graphite); }
.openflank .stubprice { font-size: 1.75rem; }
.openflank .starchip { margin-left: 12px; }
.openflank .inkbuy { margin: 18px 0 12px; }
.openflank small { display: block; font-size: 0.82rem; color: var(--yc-graphite); line-height: 1.5; }

.openchart { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin: 22px 0 0; }
.openchart th, .openchart td { padding: 9px 12px; border-bottom: 1px solid var(--yc-rule); text-align: left; vertical-align: top; }
.openchart th { width: 38%; font-family: var(--yc-text); font-weight: 700; color: var(--yc-ink); }
.openchart td { color: var(--yc-graphite); }

.openprose h2 { font-size: 1.42rem; margin-top: 1.1em; }
.openprose p { color: var(--yc-graphite); }

.opennext { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---- заметка --------------------------------------------------------------------------------- */

.pagestack { max-width: 44rem; }
.leafhead { border-bottom: 1px solid var(--yc-rule); padding-bottom: 22px; margin-bottom: 30px; }
.leafhead h1 { margin-bottom: 0.3em; }
.leafhead p { font-size: 1.1rem; color: var(--yc-graphite); margin: 0; }

.pagesec { margin-bottom: 30px; }
.pagesec h2 { font-size: 1.32rem; }
.pagesec p { color: var(--yc-graphite); margin: 0; }

.pagefacts {
  background: var(--yc-sheet-dim);
  border-left: 3px solid var(--yc-azure);
  border-radius: 0 5px 5px 0;
  padding: 22px 24px 18px;
  margin: 34px 0;
}
.pagefacts h2 { font-size: 1.06rem; margin-bottom: 0.6em; }
.pagefacts ul { list-style: none; margin: 0; padding: 0; }
/* ⚠ Внутри блока всегда лежит .markerlist, а он держит слева 24px под чёрточку-маркер.
   Сокращённая запись padding обнуляла этот отступ: специфичность у правил одинаковая, а это
   стоит ниже и потому побеждало. Чёрточка при этом остаётся на месте по absolute и ложится
   ровно на первую букву — на всех сервисных страницах и в гайдах каждая строка списка
   выглядела срезанной по вертикали. Задаём только те стороны, которые правда меняем. */
.pagefacts li { padding-top: 8px; padding-bottom: 8px; border-top-style: solid; color: var(--yc-graphite); }
.pagefacts li:first-child { border-top: 0; }

.pageclose { border-top: 1px solid var(--yc-rule); padding-top: 24px; }
.pageclose h2 { font-size: 1.2rem; }
.pageclose p { color: var(--yc-graphite); margin-bottom: 1.4em; }

/* ---- подборщик --------------------------------------------------------------------------------
   Шаги переключает клиентский js: неактивный шаг прячется атрибутом hidden, а не классом,
   чтобы страница без js осталась читаемой — виден первый шаг и все варианты как ссылки. */

.deskstep { margin-bottom: 34px; }
.deskstep h2 { font-size: 1.28rem; margin-bottom: 0.7em; }
.deskstep[hidden] { display: none; }

.deskchoice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.deskchoice a {
  display: block;
  font-family: var(--yc-text);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  padding: 15px 16px;
  background: var(--yc-sheet);
  color: var(--yc-ink);
  border: 1px solid var(--yc-rule);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.deskchoice a:hover { border-color: var(--yc-azure); background: var(--yc-sheet-dim); }
.deskchoice a[aria-current='true'] { border-color: var(--yc-azure); background: var(--yc-azure); color: #fff; }
.deskchoice a span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--yc-graphite); margin-top: 4px; }
.deskchoice a[aria-current='true'] span { color: rgba(255, 255, 255, .82); }

.deskyield { margin-top: 12px; }
.deskyield > p { color: var(--yc-graphite); }

/* ---- панели на тёмной полосе -----------------------------------------------------------------
   Белые карточки на тёмном фоне бьют по глазам, а порядок фонов главной ещё может смениться
   при сборке. Поэтому карточки умеют жить на обеих полосах, и правило одно на всех. */

.platedark .creedcell,
.platedark .voicequote,
.platedark .carecolumn,
.platedark .perkcell,
.platedark .noteshelf a {
  background: var(--yc-ink-soft);
  border-color: var(--yc-rule-dark);
  color: #eaf0f7;
}
.platedark .creedcell p,
.platedark .voicequote p,
.platedark .carecolumn li,
.platedark .perkcell p,
.platedark .noteshelf p { color: #b9c4d2; }
.platedark .voicewho { color: #97a4b4; }
.platedark .noteshelf b { color: var(--yc-thread); }

/* Тёмных полос на главной осталось две, и белые карточки теперь то и дело стоят на белом фоне:
   одной рамки в 12% чернил для края там мало, карточка читается как кусок той же бумаги.
   Тень поднимает её ровно настолько, чтобы край был виден. */
.plateplain .giftplate,
.plateplain .creedcell,
.plateplain .perkcell,
.plateplain .queryfold,
.plateplain .noteshelf a { box-shadow: 0 3px 15px rgba(18, 22, 29, .07); }

/* ---- вспомогательное ------------------------------------------------------------------------- */

.sheetnarrow h2 { margin-top: 1.2em; }
.sheetnarrow ul { padding-left: 20px; }
.sheetnarrow li { margin-bottom: 0.45em; }
.sheetnarrow address { font-style: normal; }

/* ---- узкие экраны ------------------------------------------------------------------------------
   Ломается по содержимому, а не по устройствам. Рейл первого экрана на мобиле становится
   лентой с прокруткой: grid-auto-flow column плюс ширина колонки в процентах вьюпорта. */

@media (max-width: 1080px) {
  .aislegrid, .giftgrid, .opennext, .perkrow { grid-template-columns: repeat(3, 1fr); }
  .moodstrip { grid-template-columns: repeat(4, 1fr); }
  .openshotcol { grid-template-columns: 1fr; gap: 30px; }
  .openflank { position: static; }
  .seamcols { grid-template-columns: 1fr 1fr 1fr; }
  .seamcols > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .plateband { padding: 46px 0; }
  .openspread { padding: 48px 0 44px; }

  .openparade {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .openparadecard { scroll-snap-align: start; }

  .stepcols, .longsheet, .headlinerbox, .splitpair, .carefork { grid-template-columns: 1fr; gap: 26px; }
  .creedwall, .noteshelf, .proofband, .queryrow { grid-template-columns: 1fr; }
  .voicerow { grid-template-columns: 1fr 1fr; }
  .openscore { grid-template-columns: 1fr 1fr; gap: 22px; }
  .deskchoice { grid-template-columns: 1fr 1fr; }

  /* Меню уезжает под кнопку-бургер: раскрытие держит сам js через атрибут на шапке. */
  .ribbonburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 42px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--yc-rule);
    border-radius: 4px;
    color: var(--yc-ink);
    cursor: pointer;
  }
  .ribbonburger svg { width: 20px; height: 20px; }
  .ribbonnav { display: none; }
  .ribbonbar[data-open='1'] .ribbonnav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 6px; }
  .ribbonbar[data-open='1'] .ribbonnav a { padding: 11px 0; border-bottom: 1px solid var(--yc-rule); }
  .ribboncta { display: none; }
  .ribbonbar[data-open='1'] .ribboncta { display: inline-flex; order: 4; width: 100%; margin: 12px 0 4px; }
  .ribbonmark img { width: 64px; height: 47px; }
}

@media (max-width: 620px) {
  .aislegrid, .giftgrid, .opennext, .perkrow { grid-template-columns: 1fr 1fr; gap: 13px; }
  .clipgrid, .moodstrip { grid-template-columns: repeat(2, 1fr); }
  .voicerow { grid-template-columns: 1fr; }
  .openparade { grid-auto-columns: 62vw; }
  .seamcols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .seamcols > div:first-child { grid-column: 1 / -1; }
  .deskchoice { grid-template-columns: 1fr; }
  .splitslab { padding: 28px 22px; min-height: 0; }
  .giftmeta p { display: none; }
  .ribbontop .sheetrow { justify-content: center; text-align: center; }
}

@media (max-width: 460px) {
  .openscore { grid-template-columns: 1fr; }
  .aislegrid, .giftgrid, .opennext { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .aisletile:hover img { transform: none; }
  .giftplate:hover { transform: none; }
}