/* ==========================================================================
   Сайт продукта, оформление (20.10.2026, вариант Ж — правила страниц apple.com).
   Подключается после main.css (базовые стили и форма) и перекрывает их.
   Правила, по которым сделан:
   1. Одна мысль на экран: короткий крупный заголовок, одна строка пояснения, одна картинка.
   2. Продукт крупным планом: настоящие экраны программы в ноутбуке и телефоне.
   3. Много воздуха, текст по центру, светлые блоки чередуются с тёмными.
   4. Одна главная кнопка («Открыть демо») и ссылки «Подробнее ›».
   5. Плоские карточки с большим скруглением, без рамок и цветных бейджей.
   6. Цены в сравнении сверху и снизу, у каждого пакета своя кнопка.
   Палитра и шрифт прежние: «Хвоя», Golos Text.
   ========================================================================== */

:root {
  --z-bg: #FFFDF9;
  --z-alt: #F5F2EB;
  --z-dark: #161714;
  --z-dark-2: #232520;
  --z-hair: rgba(31,33,29,.1);
  --z-r: 28px;
  --z-r-s: 20px;
  --wrap: 1200px;
}
body { background: var(--z-bg); font-size: 17px; line-height: 1.47; letter-spacing: -.005em; }
h1, h2, h3 { letter-spacing: -.03em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Шапка: светлая, тонкая, полупрозрачная ---------- */
.hdr { background: rgba(255,253,249,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--z-hair); color: var(--ink); }
.hdr-in { height: 52px; }
.hdr .mark { width: 26px; height: 26px; }
.hdr .wordmark { font-size: 17px; }
.nav { margin-left: auto; gap: 0; }
.nav a { color: var(--ink-2); font-size: 14px; font-weight: 400; padding: 6px 12px; }
.nav a:hover { color: var(--ink); background: none; text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); background: none; font-weight: 600; }
.hdr-cta { margin-left: 8px; height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; box-shadow: none; }
.hdr-cta:hover { transform: none; }
.menu > summary { color: var(--ink); border-color: var(--z-hair); width: 36px; height: 36px; }
.menu[open] > summary { background: var(--z-alt); }
.menu-panel { top: 46px; }
.hdr :focus-visible { outline-color: rgba(47,107,79,.55); }
@media (max-width: 1023px) { .hdr-cta { margin-left: auto; } }

/* ---------- Кнопки и ссылки ---------- */
.btn { height: 46px; padding: 0 24px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.btn:hover { transform: none; text-decoration: none; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 18px; }
.btn-primary { box-shadow: none; }
.btn-secondary { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-secondary:hover { background: var(--brand-light); }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--brand); font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.more::after { content: '›'; font-size: 1.25em; line-height: 1; margin-left: 4px; transform: translateY(-.04em); }
.more:hover { text-decoration: underline; }
.on-dark .more { color: #9FD3B7; }
.acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 30px; }
.foot-note { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* ---------- Типографика блоков ---------- */
.z-sec { padding: 88px 0; position: relative; }
.z-alt { background: var(--z-alt); }
.z-dark { background: var(--z-dark); color: #F2EFE8; }
.z-c { text-align: center; }
.z-c > .wrap > * { margin-left: auto; margin-right: auto; }
.ey { display: block; font-size: clamp(17px, .8vw + 12px, 21px); font-weight: 600; color: var(--brand); letter-spacing: -.01em; margin-bottom: 10px; }
.z-dark .ey { color: #9FD3B7; }
.ey:empty { display: none; }
.h-hero { font-size: clamp(38px, 5vw + 14px, 80px); line-height: 1.04; letter-spacing: -.038em; max-width: 17ch; text-wrap: balance; }
.h-sec { font-size: clamp(34px, 3.4vw + 16px, 64px); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; text-wrap: balance; }
.h-mid { font-size: clamp(28px, 2vw + 16px, 44px); line-height: 1.1; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.lead { margin-top: 18px; font-size: clamp(19px, .7vw + 15px, 24px); line-height: 1.38; color: var(--muted); max-width: 34ch; font-weight: 500; letter-spacing: -.012em; text-wrap: pretty; }
.z-dark .lead { color: rgba(242,239,232,.7); }
.z-c .lead { max-width: 40ch; }
@media (min-width: 760px) { .z-sec { padding: 128px 0; } }

/* появление: только мягкий подъём */
.js .rv { transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }

/* ---------- Первый экран ---------- */
.z-hero { padding: 56px 0 0; text-align: center; overflow: hidden; }
.z-hero .h-hero { margin: 0 auto; }
.z-hero .lead { margin-left: auto; margin-right: auto; }
.stage { position: relative; margin: 56px auto 0; max-width: 1240px; padding: 0 20px; }
.stage-ph { position: relative; border-radius: var(--z-r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--z-alt); }
.stage-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.stage .mac { position: relative; z-index: 1; width: 92%; margin: -34% auto 0; }
@media (min-width: 760px) {
  .z-hero { padding-top: 88px; }
  .stage { margin-top: 72px; padding: 0 32px; }
  .stage-ph { aspect-ratio: 21 / 9; }
  .stage .mac { width: 74%; margin-top: -21%; }
}

/* ---------- Ноутбук и телефон: рамки для настоящих экранов ---------- */
.mac { filter: drop-shadow(0 30px 40px rgba(20,22,18,.22)) drop-shadow(0 6px 10px rgba(20,22,18,.12)); }
.mac-lid { background: #1A1B18; border-radius: 2.2% 2.2% 0 0 / 3.4% 3.4% 0 0; padding: 2.2% 2.2% 0; }
.mac-scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--z-alt); border-radius: 4px 4px 0 0; }
.mac-base { position: relative; height: 0; padding-bottom: 2.6%; margin: 0 -7%; background: linear-gradient(180deg, #E4E1DA 0%, #C9C5BB 55%, #A9A59B 100%); border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.mac-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); background: #B6B2A8; border-radius: 0 0 10px 10px; }
.iphone { position: relative; width: 100%; max-width: 320px; aspect-ratio: 9 / 19.3; border-radius: 15% / 7.2%; background: #1A1B18; padding: 3.6%; box-shadow: 0 30px 60px rgba(20,22,18,.28), 0 0 0 1px rgba(255,255,255,.06) inset; }
.iphone-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12% / 5.8%; background: var(--z-alt); }
.iphone-scr::before { content: ''; position: absolute; z-index: 3; left: 50%; top: 2%; width: 30%; height: 3.6%; transform: translateX(-50%); background: #0C0D0B; border-radius: 99px; }
/* Экран рисуется в своём размере и масштабируется под рамку (zh.js пишет --k) */
.fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k, .5)); }
html:not(.js) .fit { position: static; transform: none; }

/* ---------- Экран «День» в ноутбуке: как в CRM ---------- */
.app { width: 1280px; height: 800px; background: var(--z-alt); color: var(--ink); font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; gap: 18px; padding: 14px 28px; background: var(--milk); border-bottom: 1px solid var(--line); }
.app-top .mark { width: 32px; height: 32px; }
.app-top .wm { font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
.app-sep { width: 1px; height: 26px; background: var(--line); }
.app-venue b { display: block; font-size: 15px; } .app-venue span { font-size: 12px; color: var(--faint); }
.app-nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.app-nav i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--milk); border: 1px solid var(--line); border-radius: 12px; padding: 0 13px; height: 36px; display: inline-flex; align-items: center; }
.app-nav i.on { background: var(--brand-light); border-color: #CFE0D4; color: var(--brand-dark); font-weight: 600; }
.app-nav .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
.app-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.app-head { display: flex; align-items: center; gap: 14px; }
.app-head h4 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.022em; }
.app-head .sq { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--milk); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 15px; }
.app-head .add { margin-left: auto; height: 46px; padding: 0 22px; border-radius: 14px; background: var(--brand); color: var(--milk); font-weight: 600; display: inline-flex; align-items: center; }
.app-kpis { display: flex; gap: 16px; }
.app-kpis div { flex: 1; background: var(--milk); border-radius: 20px; padding: 18px 22px; box-shadow: 0 1px 2px rgba(31,33,29,.05), 0 10px 30px rgba(31,33,29,.04); }
.app-kpis b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.app-kpis span { font-size: 13px; color: var(--faint); }
.app-kpis .w b { color: var(--warn); }
.app-grid { display: flex; gap: 20px; align-items: flex-start; min-height: 0; }
.app-card { background: var(--milk); border-radius: 20px; box-shadow: 0 1px 2px rgba(31,33,29,.05), 0 10px 30px rgba(31,33,29,.04); }
.app-list { flex: 1; overflow: hidden; }
.app-list-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.app-list-h b { font-size: 17px; }
.app-list-h .pill-s { margin-left: auto; }
.pill-s { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 11px; white-space: nowrap; color: var(--brand-dark); background: var(--brand-light); }
.pill-s.g { color: var(--done); background: var(--done-bg); margin-left: 0; }
.app-row { display: grid; grid-template-columns: 66px 1fr 120px 56px 96px; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); align-items: center; }
.app-row.hd { border-top: 0; padding-top: 4px; padding-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.app-row:nth-child(odd):not(.hd) { background: var(--row-alt); }
.app-row > :first-child { font-weight: 600; }
.app-row > :last-child { text-align: right; font-weight: 600; }
.app-row small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.app-row .bdg { font-size: 12px; padding: 5px 11px; }
.app-side { width: 300px; display: flex; flex-direction: column; gap: 16px; flex: none; }
.app-side .app-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.app-side .ln { display: flex; justify-content: space-between; font-size: 14px; }
.app-side .ln span { color: var(--muted); } .app-side .ln b { font-weight: 500; }
.app-side .bigs { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.app-side .bigs small { font-size: 14px; color: var(--faint); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.app-side .cbtn { height: 40px; border-radius: 12px; background: var(--brand-light); color: var(--brand-dark); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---------- Телефон: кабинет родителя и вечерняя сводка ---------- */
.mob { width: 390px; height: 872px; background: var(--z-alt); color: var(--ink); font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.mob-bar { padding: 64px 20px 14px; display: flex; align-items: center; gap: 12px; background: var(--milk); border-bottom: 1px solid var(--line); }
.mob-bar .mark { width: 38px; height: 38px; }
.mob-bar b { display: block; font-size: 17px; letter-spacing: -.015em; }
.mob-bar span { font-size: 13px; color: var(--faint); }
.mob-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.mob .lk-card, .mob .lk-next { border-radius: 18px; padding: 16px 18px; }
.mob .lk-card .big { font-size: 32px; }
.mob .sbtn { height: 40px; font-size: 14px; border-radius: 12px; padding: 0 16px; }
.mob .lk-next b { font-size: 16px; }
.mob .lk-hist li { font-size: 14px; padding: 8px 6px; }
.mob-chat { flex: 1; padding: 18px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; background: #E7EFE6; }
.mob-chat .day-l { align-self: center; font-size: 12px; color: var(--muted); background: rgba(255,253,249,.7); border-radius: 99px; padding: 4px 12px; }
.mob-chat .msg { font-size: 15px; max-width: 330px; border-radius: 20px 20px 20px 6px; padding: 14px 16px 10px; }
.mob-chat .msg > b { font-size: 16px; }

/* ---------- Сейчас / с программой: ползунок ---------- */
.ba-z { position: relative; margin: 56px auto 0; max-width: 1080px; border-radius: var(--z-r); overflow: hidden; aspect-ratio: 1200 / 896; background: #2A2B27; touch-action: pan-y; --pos: 50%; user-select: none; -webkit-user-select: none; }
.ba-z img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-z .b { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-z .line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFDF9; box-shadow: 0 0 12px rgba(0,0,0,.35); pointer-events: none; }
.ba-z .knob { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #FFFDF9; box-shadow: 0 8px 22px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--ink); pointer-events: none; font-size: 22px; font-weight: 600; line-height: 1; }
.ba-z .lbl { position: absolute; top: 18px; padding: 7px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; background: rgba(22,23,20,.62); color: #FFFDF9; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.ba-z .lbl.l { left: 18px; } .ba-z .lbl.r { right: 18px; }
.ba-z input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-z input:focus-visible ~ .knob { outline: 3px solid #9FD3B7; outline-offset: 3px; }
.ba-cap { display: grid; gap: 18px; max-width: 1080px; margin: 28px auto 0; text-align: left; }
.ba-cap p { font-size: 17px; color: rgba(242,239,232,.66); }
.ba-cap b { color: #F2EFE8; font-weight: 600; }
@media (min-width: 760px) { .ba-cap { grid-template-columns: 1fr 1fr; gap: 48px; } .ba-cap p:last-child { text-align: right; } }

/* ---------- Один день: три карточки ---------- */
.hl { display: flex; gap: 16px; margin: 56px -20px 0; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: left; }
.hl::-webkit-scrollbar { display: none; }
.hl-card { flex: 0 0 84%; max-width: 400px; scroll-snap-align: center; background: var(--z-bg); border-radius: var(--z-r); overflow: hidden; display: flex; flex-direction: column; }
.hl-t { padding: 28px 28px 22px; }
.hl-t time { display: block; font-size: 17px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.hl-t h3 { margin-top: 6px; font-size: clamp(24px, 1.2vw + 16px, 30px); line-height: 1.12; letter-spacing: -.028em; }
.hl-ph { position: relative; margin-top: auto; }
.hl-ph img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.hl-ph .ui-chip { left: 16px; right: 16px; bottom: 16px; }
@media (min-width: 900px) { .hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 64px 0 0; padding: 0; overflow: visible; } .hl-card { max-width: none; } }

/* ---------- Плитки модулей ---------- */
.bento-z { display: grid; gap: 16px; margin-top: 56px; text-align: left; }
.bz { position: relative; background: var(--z-bg); border-radius: var(--z-r); padding: 32px 28px 0; display: flex; flex-direction: column; overflow: hidden; min-height: 420px; color: var(--ink); }
.bz:hover { text-decoration: none; }
.bz .ey { font-size: 17px; margin-bottom: 6px; }
.bz h3 { font-size: clamp(24px, 1vw + 18px, 32px); line-height: 1.12; letter-spacing: -.028em; max-width: 16ch; }
.bz .more { font-size: 17px; margin-top: 12px; align-self: flex-start; }
.bz-vis { margin-top: auto; padding-top: 28px; display: flex; justify-content: center; align-items: flex-end; }
.bz-vis .shot { width: 100%; max-width: 420px; border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: 0 -2px 30px rgba(31,33,29,.08); }
.bz-dark { background: var(--z-dark); color: #F2EFE8; }
.bz-dark .ey { color: #9FD3B7; }
.bz-dark .more { color: #9FD3B7; }
.bz-icon { padding-bottom: 32px; min-height: 0; }
.bz-icon .gi { width: 64px; height: 64px; border-radius: 20px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.bz-icon .gi svg { width: 32px; height: 32px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bz .bars { height: 150px; }
.bz-chart { width: 100%; max-width: 440px; padding: 0 0 32px; }
.bz-chart .bars-x { margin-top: 8px; font-size: 12px; }
.bz-msg { width: 100%; max-width: 420px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.bz-msg .msg { max-width: 100%; }
@media (min-width: 760px) {
  .bento-z { grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 72px; }
  .bz { grid-column: span 3; padding: 40px 40px 0; min-height: 520px; }
  .bz.w { grid-column: span 6; flex-direction: row; gap: 40px; align-items: stretch; min-height: 440px; }
  .bz.w .bz-t { flex: 1; padding-bottom: 40px; display: flex; flex-direction: column; justify-content: center; }
  .bz.w .bz-vis { flex: 1.1; margin-top: 0; padding-top: 40px; }
  .bz-icon { grid-column: span 2; min-height: 0; padding-bottom: 40px; }
}

/* ---------- Вечером: тёмный блок с телефоном ---------- */
.eve { display: grid; gap: 48px; align-items: center; margin-top: 8px; }
.eve-ph { display: flex; justify-content: center; }
.eve-ph .iphone { max-width: 300px; }
.eve-t { text-align: center; }
.eve-t .lead { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .eve { grid-template-columns: 1fr 1fr; gap: 64px; } .eve-t { text-align: left; } .eve-t .h-sec, .eve-t .lead { margin-left: 0; } .eve-ph .iphone { max-width: 330px; } }

/* ---------- Большие цифры ---------- */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 20px; margin-top: 64px; }
.nums div { text-align: center; }
.nums b { display: block; font-size: clamp(56px, 6vw + 16px, 104px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nums b em { font-style: normal; font-size: .36em; font-weight: 600; letter-spacing: -.01em; margin-left: 6px; color: var(--brand); }
.nums span { display: block; margin: 12px auto 0; color: var(--muted); font-size: 17px; line-height: 1.35; max-width: 18ch; }
@media (min-width: 900px) { .nums { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Для кого: три фото ---------- */
.who-z { display: grid; gap: 20px; margin-top: 56px; text-align: left; }
.wz { display: flex; flex-direction: column; color: var(--ink); }
.wz:hover { text-decoration: none; }
.wz-ph { border-radius: var(--z-r); overflow: hidden; background: var(--line); }
.wz-ph img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.wz:hover .wz-ph img { transform: scale(1.03); }
.wz h3 { margin-top: 20px; font-size: 26px; letter-spacing: -.028em; }
.wz p { margin-top: 6px; color: var(--muted); font-size: 17px; }
.wz .more { margin-top: 10px; font-size: 17px; }
@media (min-width: 760px) { .who-z { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; } }

/* ---------- Пакеты: колонки как в сравнении моделей ---------- */
.pz { display: grid; gap: 16px; margin-top: 56px; text-align: center; }
.pz-col { background: var(--z-bg); border-radius: var(--z-r); padding: 40px 28px 36px; display: flex; flex-direction: column; align-items: center; }
.z-sec:not(.z-alt) .pz-col { background: var(--z-alt); }
.pz-col .for-hot { font-size: 14px; font-weight: 600; color: var(--brand); min-height: 1.4em; }
.pz-col h3 { font-size: 32px; letter-spacing: -.03em; margin-top: 6px; }
.pz-col .for { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 26ch; min-height: 2.8em; }
.pz-price { margin-top: 22px; font-variant-numeric: tabular-nums; }
.pz-price b { display: block; font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pz-price span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.pz-col .btn { margin-top: 26px; }
.pz-col .more { margin-top: 14px; font-size: 16px; }
.pz-feat { width: 100%; margin-top: 30px; border-top: 1px solid var(--z-hair); text-align: left; }
.pz-feat li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 2px; border-bottom: 1px solid var(--z-hair); font-size: 15px; line-height: 1.4; }
.pz-feat svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.pz-note { margin-top: 18px; font-size: 13px; color: var(--faint); }
@media (min-width: 900px) { .pz { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; } }

/* ---------- Сравнение пакетов: цена сверху и снизу ---------- */
.cmp-z-wrap { margin: 48px -20px 0; padding: 0 20px; overflow-x: auto; }
.cmp-z { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; text-align: left; }
.cmp-z th, .cmp-z td { padding: 18px 14px; border-bottom: 1px solid var(--z-hair); vertical-align: middle; }
.cmp-z td:not(:first-child), .cmp-z th:not(:first-child) { text-align: center; width: 20%; }
.cmp-z thead th { position: sticky; top: 52px; z-index: 2; background: var(--z-bg); border-bottom: 1px solid rgba(31,33,29,.22); padding-top: 22px; }
.cmp-z thead th:first-child, .cmp-z tfoot th:first-child { font-size: 14px; font-weight: 500; color: var(--faint); }
.cmp-z .pn { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.cmp-z .pp { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-z .pp b { color: var(--ink); font-weight: 700; }
.cmp-z tbody th { font-weight: 400; }
.cmp-z tbody th small { display: block; margin-top: 2px; font-size: 13px; color: var(--faint); }
.cmp-z .grp th { padding: 34px 14px 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid rgba(31,33,29,.22); }
.cmp-z .y { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--milk); align-items: center; justify-content: center; }
.cmp-z .y svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cmp-z .n { display: inline-block; width: 14px; height: 2px; background: var(--line-2); border-radius: 2px; vertical-align: middle; }
.cmp-z .tx { font-size: 15px; color: var(--ink-2); }
.cmp-z tfoot th, .cmp-z tfoot td { border-bottom: 0; border-top: 1px solid rgba(31,33,29,.22); padding-top: 28px; padding-bottom: 8px; }
.cmp-z tfoot .pz-price b { font-size: 40px; }
.cmp-z tfoot .pz-price span { font-size: 14px; }
.cmp-z tfoot .btn { margin-top: 18px; height: 40px; padding: 0 18px; font-size: 15px; }
.cmp-z tbody th, .cmp-z thead th:first-child, .cmp-z tfoot th:first-child { position: sticky; left: 0; background: var(--z-bg); z-index: 1; }
.cmp-z thead th:first-child { z-index: 3; }
@media (min-width: 760px) { .cmp-z-wrap { margin: 64px 0 0; padding: 0; overflow: visible; } .cmp-z { font-size: 17px; } .cmp-z tbody th, .cmp-z thead th:first-child, .cmp-z tfoot th:first-child { position: static; } .cmp-z thead th:first-child { position: sticky; } }

/* ---------- В любом пакете: значки ---------- */
.inc-z { display: grid; grid-template-columns: 1fr; gap: 36px 28px; margin-top: 56px; text-align: center; }
.inc-z li { display: flex; flex-direction: column; align-items: center; }
.inc-z .gi { width: 56px; height: 56px; border-radius: 18px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.inc-z .gi svg { width: 28px; height: 28px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inc-z b { font-size: 19px; letter-spacing: -.015em; }
.inc-z span { display: block; margin-top: 6px; color: var(--muted); font-size: 16px; max-width: 28ch; }
@media (min-width: 640px) { .inc-z { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .inc-z.c4 { grid-template-columns: repeat(4, 1fr); } }
.note-z { max-width: 760px; margin: 48px auto 0; padding: 28px 32px; border-radius: var(--z-r-s); background: var(--brand-light); color: var(--brand-dark); font-size: 17px; text-align: center; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Форма ---------- */
.z-form .form-card { max-width: 620px; margin: 48px auto 0; text-align: left; border: 0; border-radius: var(--z-r); box-shadow: 0 2px 4px rgba(31,33,29,.04), 0 24px 60px rgba(31,33,29,.1); padding: 28px; }
@media (min-width: 560px) { .z-form .form-card { padding: 40px; } }
.z-form .ticks-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; font-size: 16px; color: var(--muted); }
.z-form .ticks-row li { display: flex; align-items: center; gap: 8px; }
.z-form .ticks-row svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.form-card .seg { background: var(--z-alt); border: 0; }
.field input[type="text"] { border-radius: 12px; border-color: #D9D3C6; }

/* ---------- Вопросы: тонкие линии вместо карточек ---------- */
.faq-z { max-width: 860px; margin: 48px auto 0; text-align: left; border-top: 1px solid rgba(31,33,29,.22); }
.faq-z details { border-bottom: 1px solid var(--z-hair); }
.faq-z summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0; font-size: clamp(19px, .6vw + 15px, 22px); font-weight: 600; letter-spacing: -.018em; cursor: pointer; list-style: none; }
.faq-z summary::-webkit-details-marker { display: none; }
.faq-z summary::after { content: '+'; flex: none; font-size: 28px; font-weight: 300; color: var(--brand); line-height: 1; transition: transform .25s; }
.faq-z details[open] summary::after { transform: rotate(45deg); }
.faq-z details p { padding: 0 40px 26px 0; color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 64ch; }

/* ---------- Внутренние страницы: шапка по центру ---------- */
.z-page { padding: 72px 0 24px; text-align: center; }
.z-page .h-hero { margin: 0 auto; max-width: 16ch; }
.z-page .lead { margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { .z-page { padding: 112px 0 32px; } }
/* оглавление модулей — иконки в ряд */
.chap { display: flex; gap: 6px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 40px -20px 0; padding: 0 20px 6px; }
.chap::-webkit-scrollbar { display: none; }
.chap a { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 4px; color: var(--ink-2); font-size: 13px; font-weight: 500; text-align: center; line-height: 1.25; border-radius: 16px; }
.chap a:hover { text-decoration: none; color: var(--brand); background: var(--z-alt); }
.chap .gi { width: 52px; height: 52px; border-radius: 16px; background: var(--z-alt); display: flex; align-items: center; justify-content: center; }
.chap .gi svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chap a:hover .gi svg { stroke: var(--brand); }
@media (min-width: 900px) { .chap { justify-content: center; margin: 56px 0 0; padding: 0; overflow: visible; } }

/* модуль: заголовок по центру, картинка крупно, три пункта колонками */
.mz { text-align: center; scroll-margin-top: 60px; }
.mz .duo { max-width: 920px; margin: 48px auto 0; text-align: left; }
.mz .duo > .ph { border-radius: var(--z-r); box-shadow: none; }
.mz .duo > .ph > img { aspect-ratio: 16 / 9; }
.mz .duo > .shot, .mz .duo > .chat { box-shadow: 0 30px 60px rgba(20,22,18,.2); }
.mz .note-s { margin-top: 14px; font-size: 15px; color: var(--faint); }
.pts { display: grid; gap: 22px; max-width: 980px; margin: 56px auto 0; text-align: left; }
.pts li { padding-top: 18px; border-top: 1px solid rgba(31,33,29,.22); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.z-dark .pts li { border-top-color: rgba(242,239,232,.24); color: rgba(242,239,232,.82); }
@media (min-width: 760px) { .pts { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 900px) {
  .mz .duo > .shot, .mz .duo > .chat { width: 62%; margin: -26% -40px 0 auto; }
  .mz .duo > .phone { width: 36%; margin: -46% 24px 0 auto; }
}
/* «Для кого»: сейчас → с программой */
.pz-pain { max-width: 980px; margin: 56px auto 0; text-align: left; border-top: 1px solid rgba(31,33,29,.22); }
.pz-pain li { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--z-hair); }
.pz-pain .q { color: var(--faint); font-size: 16px; }
.pz-pain .q::before { content: 'Сейчас. '; font-weight: 600; color: var(--muted); }
.pz-pain .a { font-size: 19px; font-weight: 500; letter-spacing: -.012em; }
.pz-pain .a::before { content: 'С программой. '; font-weight: 700; color: var(--brand); }
@media (min-width: 760px) { .pz-pain li { grid-template-columns: 1fr 1fr; gap: 40px; align-items: baseline; } }

/* ---------- Призыв в конце страницы ---------- */
.end-z { text-align: center; }
.end-z .h-sec { margin: 0 auto; }

/* ---------- Подвал: светлый, мелкий шрифт, сноски ---------- */
.ftr { background: var(--z-alt); color: var(--muted); padding: 28px 0 36px; font-size: 12px; border-top: 0; }
.ftr .notes { padding-bottom: 18px; border-bottom: 1px solid var(--z-hair); margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; color: var(--faint); font-size: 12px; }
.ftr-note { color: var(--muted); font-size: 12px; }
.ftr-brand { color: var(--ink); }
.ftr-brand .mark { width: 24px; height: 24px; }
.ftr-brand .wordmark { font-size: 15px; }
.ftr-nav { font-size: 12px; gap: 6px 22px; }
.ftr-nav a { color: var(--ink-2); font-weight: 400; }
.ftr-links { font-size: 12px; }
.ftr-links a { color: var(--muted); }
.ftr-copy { color: var(--faint); font-size: 12px; }

/* ---------- Поправки к разметке главной ---------- */
.z-sec:not(.z-alt) .hl-card { background: var(--z-alt); }
.eve-ph { align-items: flex-start; }
.eve-ph .iphone { width: 48%; max-width: 290px; }
.eve-t .acts { justify-content: center; }
@media (min-width: 900px) { .eve-t .acts { justify-content: flex-start; } .eve-ph .iphone { max-width: 300px; } }
.ftr .wrap > .ftr-in { padding: 0; }
.faq-z summary > span { flex: 1; }
.app, .mob, .shot, .bz-vis, .duo { text-align: left; }
.z-hero .h-hero { max-width: 20ch; }

/* сравнение: нижняя строка цен ровно; на телефоне три колонки помещаются без прокрутки вбок */
.cmp-z tfoot th, .cmp-z tfoot td { vertical-align: top; }
.cmp-z tfoot th { padding-top: 40px; }
.cmp-z tfoot .pz-price span { min-height: 2.9em; }
.cmp-z .m-only { display: none; }
@media (max-width: 759px) {
  .cmp-z-wrap { margin: 36px 0 0; padding: 0; overflow: visible; }
  .cmp-z { min-width: 0; table-layout: fixed; font-size: 14px; line-height: 1.35; }
  .cmp-z th, .cmp-z td { padding: 13px 4px; }
  .cmp-z tbody th, .cmp-z thead th:first-child, .cmp-z tfoot th:first-child { position: static; padding-left: 0; }
  .cmp-z thead th:first-child { position: sticky; }
  .cmp-z col.c1 { width: 37%; }
  .cmp-z td:not(:first-child), .cmp-z th:not(:first-child) { width: 21%; }
  .cmp-z thead th { padding-top: 14px; }
  .cmp-z .pn { font-size: 16px; }
  .cmp-z .pp { font-size: 11px; line-height: 1.3; }
  .cmp-z .grp th { padding: 26px 0 8px; font-size: 11px; }
  .cmp-z tbody th small { font-size: 11px; }
  .cmp-z .tx { font-size: 11.5px; display: block; }
  .cmp-z .y { width: 22px; height: 22px; } .cmp-z .y svg { width: 12px; height: 12px; }
  .cmp-z tfoot .pz-price b { font-size: 26px; }
  .cmp-z tfoot .pz-price span { font-size: 11px; min-height: 4.2em; }
  .cmp-z tfoot .btn { width: 100%; height: 34px; padding: 0 4px; font-size: 12px; margin-top: 10px; }
  .cmp-z .m-only { display: inline; } .cmp-z .d-only { display: none; }
}
#r-mail { margin-top: 12px; width: 100%; }

/* ---------- Документы (политика и т. п.): спокойный текст для чтения ---------- */
.doc { padding: 8px 0 104px; }
.doc .wrap { max-width: 880px; }
.doc h2 { font-size: clamp(22px, .8vw + 17px, 28px); line-height: 1.2; letter-spacing: -.02em; margin: 52px 0 14px; }
.doc p { margin: 12px 0; font-size: 17px; line-height: 1.62; color: var(--ink-2); }
.doc ul { margin: 12px 0; padding-left: 22px; list-style: disc; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.doc li { margin: 6px 0; }
.doc .tbl { overflow-x: auto; margin: 16px 0 20px; -webkit-overflow-scrolling: touch; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--z-hair); }
.doc thead th { font-size: 13px; font-weight: 600; color: var(--faint); border-bottom-color: rgba(31,33,29,.22); }
.doc th[scope="row"] { font-weight: 500; color: var(--muted); width: 34%; }
.doc table.wide { min-width: 720px; }
.doc a { text-decoration: underline; }
@media (max-width: 640px) {
  .doc table.wide { min-width: 0; }
  .doc table.wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc table.wide, .doc table.wide tbody, .doc table.wide tr, .doc table.wide td { display: block; width: 100%; }
  .doc table.wide tr { padding: 14px 0; border-bottom: 1px solid rgba(31,33,29,.22); }
  .doc table.wide td { border: 0; padding: 4px 0; }
  .doc table.wide td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .02em; }
  .doc th[scope="row"] { width: 40%; }
}