/* СТРАНИЦЫ ПРОДУКТОВ (/products/…, 09.11.2026). Стили сайта, шапка, подвал, кнопки, пакеты и вопросы - из главной
   (кусок SITE:CSS в landing.html); здесь только то, чего на главной нет. Порядок блоков у всех продуктов один:
   первый экран, «Что получите», «Как работает», кадр панели, цены, вопросы, другие продукты. */
.prod section{padding-top:96px}

/* крошки крупнее и заметнее (владелец 10.11.2026): «Главная» - цветом ссылки, текущая страница - тёмная */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:28px;font-size:15.5px;font-weight:500;color:var(--ink)}
.crumbs a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--mint-ink);text-decoration:none}   /* палец попадает */
.crumbs a:hover{text-decoration:underline}
.crumbs i{width:7px;height:7px;border:solid var(--ink-2);border-width:2px 2px 0 0;transform:rotate(45deg)}

/* первый экран: слева заголовок и действие, справа кусок интерфейса продукта на его цвете */
.p-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:22px}
/* Длинное слово заголовка («Инфографика», «покупателями») не влезало в колонку и упиралось в карточку (владелец
   15.11.2026): `--hw` у h1 - ширина самого длинного слова в em (замер), заголовок сжимается до ширины колонки. */
.p-hero>div:first-child{container-type:inline-size}
.p-hero h1{font-family:var(--fd);font-size:min(clamp(34px,4.8vw,66px),calc(100cqi / var(--hw,1)));font-weight:600;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.p-hero .lede{margin-top:20px;max-width:34em;font-size:clamp(18px,1.6vw,22.5px)}   /* рядом с крупной плиткой - крупнее (15.11.2026: ещё крупнее, слово владельца) */
.p-hero .cta{margin-top:28px}
.p-hero .fine{margin-top:14px;max-width:46ch;font-size:14.5px}
.p-live{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.p-live>.lv{grid-area:1/1}              /* у .lv-ans/.lv-ab/… свои grid-area из сетки главной - здесь не нужны */
.p-live .lv{min-height:clamp(420px,calc(100svh - 340px),560px);justify-content:center}
.p-live .lv-h{display:none}                 /* продукт уже назван в h1 */
.p-need{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.p-need b{margin-right:2px;font-weight:600;color:var(--ink)}

/* «Что получите»: четыре пункта без карточек - значок, два-три слова, одна строка */
.gets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.gets.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gets>div{padding-top:22px;border-top:1px solid rgba(22,33,26,.1)}
.gets .ic{width:48px;height:48px;padding:12px;border-radius:15px}
.gets b{display:block;margin-top:18px;font-size:17px;font-weight:650;letter-spacing:-.01em}
.gets span{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

.ab-steps .step-link{margin-top:8px}

.p-shot .shot-frame{margin-top:0}
/* подпись лежит в тени окна поверх плывущих пятен фона сайта (14.11.2026): --ink-2 там опускался до 4,3:1 - чернила,
   сноска - --ink-2 вместо --muted-2 */
.p-shot figcaption{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--ink);max-width:78ch}
.p-shot figcaption small{display:block;margin-top:4px;font-size:13px;color:var(--ink-2)}

.tiers.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tiers.five .tier.mini{cursor:default}
.p-note{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.p-note a{display:inline-block;padding:8px 0;margin:-8px 0;font-weight:600}

/* другие продукты: короткие ссылки, тот же цвет продукта, что в меню и на главной */
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.more-c{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;padding:16px 18px;border-radius:20px;
  background:var(--glass);box-shadow:var(--glass-shadow);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.more-c:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(22,33,26,.12),0 20px 40px -26px rgba(15,61,53,.45)}
.more-c .ic{grid-row:span 2;width:44px;height:44px;padding:11px;border-radius:13px}
.more-c b{align-self:end;font-size:15.5px;font-weight:650}
.more-c small{align-self:start;font-size:13px;color:var(--ink-2)}

@media (max-width:1080px){
  .gets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers.five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .prod section{padding-top:80px}
  .p-hero{grid-template-columns:minmax(0,1fr)}
  .p-live .lv{min-height:0}
}
@media (max-width:620px){
  .more-grid{grid-template-columns:minmax(0,1fr)}
  .gets.n3{grid-template-columns:minmax(0,1fr)}
  .p-hero h1{font-size:33px}
  .gets{grid-template-columns:minmax(0,1fr);gap:0}
  .gets>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;padding:18px 0}
  .gets .ic{grid-row:span 2;width:44px;height:44px;padding:11px}
  .gets b{margin-top:0}
  .tiers.five{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Демо нарисованы под ячейку главной (около 250 px высотой): на первом экране страницы продукта - крупнее и по центру
   (дизайн-ревью 14.11.2026: «Ответы» заполняли плитку на 30%, «Инфографика» - на 33%). */
.p-live .lv-kit{justify-content:center}
@media (min-width:961px){
  .p-live .lv-rev .lv-stage{zoom:1.3;justify-content:center}
  .p-live .lv-ans .lv-stage{zoom:1.12;justify-content:center}   /* три ответа лентой */
  .p-live .lv-chat .lv-stage{zoom:1.15}                         /* переписка крупнее, решение внизу */
  .p-live .lv-rate{margin-top:0}
}

/* «Пример набора» на странице «Инфографики под ключ»: шесть слайдов одного товара */
.kit-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.kit-row figure{min-width:0}
.kit-row img{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:16px;object-fit:cover;background:var(--violet-soft);
  box-shadow:0 1px 2px rgba(22,33,26,.06),0 10px 24px -16px rgba(22,33,26,.38)}
.kit-row figcaption{margin-top:10px;font-size:14px;font-weight:600;line-height:1.3}
@media (max-width:960px){ .kit-row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .kit-row{gap:10px} .kit-row figcaption{margin-top:8px;font-size:13px} }

/* Первый экран страницы продукта - во всю высоту окна без шапки (69 px), заголовок и плитка по центру: «Что получите»
   ниже и проявляется при прокрутке (владелец 14.11.2026). */
.prod .land>.wrap{display:flex;flex-direction:column;min-height:calc(100vh - 69px);min-height:calc(100svh - 69px);padding-bottom:24px}
.prod .land>.wrap>.p-hero{flex:1;align-content:center}

/* «Инфографика под ключ» на первом экране: главный слайд крупно, остальные - сеткой 2×3 рядом (владелец 14.11.2026:
   «главное фото и слайды блендера увеличить, чтобы не вглядываться»); нажатие открывает слайд крупно. */
.p-live .lv-info .lv-stage{justify-content:center}
.p-live .lv-info .lv-kit{gap:18px;align-items:center}
.p-live .lv-info .lv-slide{width:56%;border-radius:18px;cursor:zoom-in}
.p-live .lv-info .lv-set{flex:1 1 0;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-live .lv-info .lv-sl{border-radius:10px;cursor:zoom-in}

/* Просмотр слайдов набора: кнопки «Примера набора» и картинки плитки; листать стрелками, клавишами и пальцем */
.kit-open{display:block;width:100%;padding:0;border:0;border-radius:16px;background:none;cursor:zoom-in}
.kit-open img{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.kit-open:hover img{transform:translateY(-3px)}
.kit-open:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.lb{width:min(90vw,calc(84svh * 3 / 4));max-width:none;max-height:none;padding:0;border:0;border-radius:22px;background:transparent;overflow:visible}
.lb::backdrop{background:rgba(12,18,15,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lb-img{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:22px;object-fit:cover;background:#F1F3EE}
.lb button{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px -8px rgba(12,18,15,.5)}
.lb button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.lb-x{top:12px;right:12px}
.lb-x::before,.lb-x::after{content:"";position:absolute;width:16px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.lb-x::after{transform:rotate(-45deg)}
.lb-prev,.lb-next{top:50%;margin-top:-22px}
.lb-prev{left:-60px}
.lb-next{right:-60px}
.lb-prev::before,.lb-next::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:translateX(-2px) rotate(45deg)}
.lb-prev::before{transform:translateX(2px) rotate(-135deg)}
.lb-n{position:absolute;left:0;right:0;bottom:-34px;font-size:14px;font-weight:600;text-align:center;color:#fff}
@media (max-width:760px){ .lb-prev{left:10px} .lb-next{right:10px} }