/* Taipy - витрина: «Агентствам и SMM-специалистам» (/for/agencies/, HANDOFF-17).
   Подключается после showcase.css только на этой странице. День, деловой
   свет: токены витрины по умолчанию, свои - только у красок клиентов.
   Мир агентства - студия с ноутбуком и телефонами клиентов, мир клиента -
   прилавок мастерской, работа Taipy - печатный стол сверху. Модули лежат на
   листах и в экранах арта (HANDOFF-20: сцены у всех глав, глава 06 - та же
   студия ночью). Классы - с префиксом ag-. */

/* краски клиентов: кофейня - абрикос, походы - индиго, мастерская - розовая */
.ag-ink--apricot { --ag-c: #B8650F; --ag-c-mark: #F6A04D; --ag-c-soft: rgba(246, 160, 77, .16); }
.ag-ink--indigo { --ag-c: #4F46E5; --ag-c-mark: #4F46E5; --ag-c-soft: rgba(79, 70, 229, .10); }
.ag-ink--pink { --ag-c: #C21F7E; --ag-c-mark: #FF48B0; --ag-c-soft: rgba(255, 72, 176, .12); }

/* переключатель «до / после» внутри модуля: второе значение - после такта is-c */
.ag-swap > em { font-style: normal; }
.ag-swap > em:last-child:not(:first-child) { display: none; }
[data-steps].is-c .ag-swap > em:first-child:not(:last-child) { display: none; }
[data-steps].is-c .ag-swap > em:last-child:not(:first-child) { display: inherit; }

/* ---------- первый экран ----------
   HANDOFF-19: карточка стоит по центру спокойной стены слева с одним полем
   --gut до края окна и до ноутбука (как у Аналитики), арт не сдвигается -
   сдвиг вправо с заливкой по краю давал стык стола на 1280-1600. Кегль
   заголовка - от ширины карточки (container), лид в три строки, кнопки в
   одну строку (в узкой карточке - столбиком). */
.ag-hero { background: linear-gradient(180deg, #F4EEF7 0%, #F5EFEC 100%); }
.ag-hero .vt-hero__card { container: ag-card / inline-size; }
.ag-hero__kicker { margin-bottom: 14px; }
.ag-nw { white-space: nowrap; }
.ag-hero .vt-hero__h1 { font-size: clamp(22px, calc(100cqi / 12.6), 31px); line-height: 1.14; letter-spacing: -.024em; }
.ag-hero .vt-hero__lead { margin-top: 12px; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ag-hero .vt-hero__cta { margin-top: 22px; gap: 8px; }
.ag-hero .vt-hero__trust { margin-top: 16px; gap: 8px 14px; font-size: 13px; color: rgba(28, 25, 23, .72); }
.ag-trust { display: inline-flex; align-items: center; gap: 8px; }
/* знаки площадок - плитки одной формы и размера (_brand.html tile=True) */
.ag-marks { display: inline-flex; align-items: center; gap: 5px; }
.ag-marks > i, .ag-marks img, .ag-marks svg { display: block; width: 20px; height: 20px; }
.ag-marks img { border-radius: 4.5px; }
@media (min-width: 1200px) {
  .ag-hero .vt-hero__cta .vt-btn { height: 44px; }
  .ag-hero .vt-hero__cta .vt-btn--brand { padding: 0 18px; }
  .ag-hero .vt-hero__cta .vt-btn--glass { padding: 0 16px; }
  /* узкая карточка (1200-1400 px): кикер плотнее, кнопки друг под другом */
  @container ag-card (max-width: 400px) {
    .ag-hero__kicker { gap: 10px; font-size: 11.5px; letter-spacing: .1em; }
  }
  @container ag-card (max-width: 372px) {
    .ag-hero .vt-hero__cta { flex-direction: column; }
    .ag-hero .vt-hero__cta .vt-btn { flex: none; width: 100%; }
  }
}
.ag-hero .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 0 1px rgba(30, 20, 50, .10); }
@media (min-width: 1200px) {
  [data-page="agencies"] .vt-hero__copy.vt-wrap {
    --aw: max(100cqw, calc(100cqh * var(--arn)));
    --al: clamp(calc(100cqw - var(--aw)), calc(100cqw * var(--px) - var(--aw) * var(--fx)), 0px);
    --wall: calc(var(--al) + var(--aw) * var(--wall-f, .4));
    --gut: clamp(24px, 2.2vw, 44px);
    --cw: min(540px, calc(var(--wall) - 2 * var(--gut)));
  }
  .ag-hero .vt-hero__card { padding: 26px 26px 22px; }
  .ag-glass {
    background: radial-gradient(90% 70% at 100% 0%, rgba(255, 236, 214, .24) 0%, transparent 55%),
                linear-gradient(135deg, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .34) 100%);
  }
}
@media (min-width: 1680px) {
  .ag-hero .vt-hero__lead { font-size: 16px; }
}

/* ---------- подложки сцен, пока нет арта ----------
   Рисуют мир по тем же углам, что арт: корпуса и листы стоят ровно под
   поверхностями, интерфейс ложится по data-quad. С артом не выводятся. */
.ag-ph { overflow: hidden; }
.ag-ph > span { position: absolute; pointer-events: none; }
.ag-ph__grain { z-index: 1; opacity: .12; }
/* студия агентства днем: стена со светом из окна, длинный стол, устройства */
.ag-ph--hero, .ag-ph--hero-m { background: linear-gradient(180deg, #F3EEF8 0%, #F1EAF3 58%, #EEE4EC 69%); }
.ag-ph__light { left: -14%; top: -30%; width: 64%; height: 130%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 240, .95), rgba(255, 250, 240, 0)); }
.ag-ph__light--m { left: -30%; top: -12%; width: 110%; height: 60%; }
.ag-ph__desk { left: 0; right: 0; top: 69%; bottom: 0; background: linear-gradient(180deg, #E8D8C6 0%, #DCC6AE 26%, #CFB69C 100%); box-shadow: inset 0 3px 0 rgba(255, 246, 234, .75); }
.ag-ph__desk--m { top: 83%; }
.ag-ph__laptop {
  left: calc(var(--l) * 1% - .9%); top: calc(var(--t) * 1% - 1.6%);
  width: calc(var(--w) * 1% + 1.8%); height: calc(var(--h) * 1% + 3.2%);
  border-radius: 1.6% / 2.8%; background: linear-gradient(180deg, #2F2B45 0%, #25213A 100%);
  box-shadow: 0 34px 60px -36px rgba(40, 24, 70, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
}
.ag-ph__laptop::after, .ag-ph__phone::after, .ag-ph__device::after { content: ""; position: absolute; border-radius: inherit; background: linear-gradient(160deg, #F7F5FF 0%, #ECE8F8 100%); }
.ag-ph__laptop::after { left: 3.2%; right: 3.2%; top: 4.6%; bottom: 4.6%; border-radius: 3px; }
.ag-ph__phone::after, .ag-ph__device::after { left: 5%; right: 5%; top: 2.6%; bottom: 2.6%; border-radius: 12% / 5.6%; }
.ag-ph__laptop i { position: absolute; left: -8%; right: -8%; top: 100%; height: 8%; background: linear-gradient(180deg, #E6E1EE 0%, #B8B0CA 100%); clip-path: polygon(4% 0, 96% 0, 100% 62%, 98.5% 100%, 1.5% 100%, 0 62%); }
.ag-ph__phone {
  left: calc(var(--l) * 1% - .45%); top: calc(var(--t) * 1% - .85%);
  width: calc(var(--w) * 1% + .9%); height: calc(var(--h) * 1% + 1.7%);
  border-radius: 16% / 7.4%; background: #211D31;
  box-shadow: 0 26px 44px -26px rgba(30, 15, 50, .65), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.ag-ph__phone i { position: absolute; left: 30%; right: 30%; top: 100%; height: 12%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #B9B1C9, #978DAB); }
.ag-ph__phone--m { left: calc(var(--l) * 1% - 1.4%); top: calc(var(--t) * 1% - .9%); width: calc(var(--w) * 1% + 2.8%); height: calc(var(--h) * 1% + 1.8%); border-radius: 13% / 6.6%; }
.ag-ph__phone--m i { height: 5%; left: 36%; right: 36%; }
.ag-ph__token {
  left: calc((var(--l) + var(--w) / 2) * 1%); top: calc((var(--t) + var(--h)) * 1% + 5.4%);
  width: 2.3%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  display: grid; place-items: center; color: var(--ag-c); background: #FFFCF7;
  box-shadow: 0 10px 18px -12px rgba(60, 30, 20, .55), inset 0 0 0 1.5px var(--ag-c-soft);
}
.ag-ph__token svg { width: 56%; height: 56%; }
.ag-ph__tokens { left: 0; right: 0; top: 86%; display: flex; justify-content: center; gap: 6%; }
.ag-ph__chip { position: relative; width: 9%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--ag-c); background: #FFFCF7; box-shadow: 0 10px 18px -12px rgba(60, 30, 20, .55), inset 0 0 0 1.5px var(--ag-c-soft); }
.ag-ph__chip svg { width: 52%; height: 52%; }
/* печатный стол сверху: кремовая бумага, растровые круги трех красок */
.ag-ph--desk { background-color: #F4ECE0; background-image: radial-gradient(rgba(120, 88, 60, .06) 1px, transparent 1.3px); background-size: 7px 7px; }
.ag-ph__ring {
  aspect-ratio: 1; border-radius: 50%; opacity: .5;
  background: radial-gradient(var(--c) 1.7px, transparent 2.1px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%);
}
.ag-ph__ring--a { --c: #F6A04D; left: 2%; top: 4%; width: 24%; }
.ag-ph__ring--p { --c: #FF48B0; left: 6%; top: 68%; width: 16%; opacity: .42; }
.ag-ph__ring--i { --c: #4F46E5; left: 82%; top: 62%; width: 22%; opacity: .32; }
.ag-ph__shade { inset: 0; background: linear-gradient(118deg, rgba(255, 244, 226, .36) 0%, rgba(255, 244, 226, 0) 44%, rgba(96, 64, 128, 0) 64%, rgba(96, 64, 128, .08) 100%); }
.ag-ph__sheet {
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  background: #FFFDF9; border-radius: 7px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 34px -20px rgba(80, 44, 30, .45), 0 4px 10px -6px rgba(80, 44, 30, .28);
}
.ag-ph__folder { left: 30%; top: 17%; width: 60%; height: 70%; border-radius: 10px; background: #E8D4B1; box-shadow: 0 18px 30px -22px rgba(80, 44, 30, .5), inset 0 0 0 1px rgba(120, 88, 60, .08); }
.ag-ph__folder i { position: absolute; top: -5.5%; width: 20%; height: 7%; border-radius: 8px 8px 0 0; background: var(--c); }
.ag-ph__folder--3 { --c: #F6A04D; left: 25%; transform: rotate(-9deg); }
.ag-ph__folder--3 i { left: 8%; }
.ag-ph__folder--2 { --c: #FF48B0; left: 28%; transform: rotate(-4deg); }
.ag-ph__folder--2 i { left: 38%; }
.ag-ph__folder--1 { --c: #4F46E5; left: 35%; top: 20%; width: 51%; height: 63%; background: #EEDDBF; }
.ag-ph__folder--1 i { left: 68%; }
.ag-ph__strap { left: 59.8%; top: -4%; width: 2.4%; height: 37%; border-radius: 0 0 6px 6px; opacity: .85; background: linear-gradient(90deg, #6962E6 0%, #8A84EE 50%, #6962E6 100%); box-shadow: 0 10px 18px -12px rgba(40, 30, 120, .45); }
.ag-ph__tool { width: 7.5%; aspect-ratio: 1; display: grid; place-items: center; opacity: .9; }
.ag-ph__tool svg { width: 100%; height: 100%; stroke-width: 1.6; }
.ag-ph__tool--key { left: 12%; top: 18%; color: #C08A2E; transform: rotate(-24deg); }
.ag-ph__tool--time { left: 24%; top: 36%; color: #D9731A; }
.ag-ph__tool--cup { left: 30%; top: 8%; width: 7%; color: #D9731A; }
.ag-ph__tool--mnt { left: 64%; top: 8%; width: 7%; color: #4F46E5; }
.ag-ph__dot { left: 48.2%; top: 49%; width: 5.6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#FF48B0 1.7px, transparent 2.1px) 0 0 / 7px 7px; opacity: .65; }
/* прилавок цветочной мастерской днем: стена, окно, пионы в ведрах, прилавок */
.ag-ph--shop { background: linear-gradient(180deg, #F7F0EB 0%, #F4EAE3 64%, #EEDFD5 78%); }
.ag-ph__wall { inset: 0; background: radial-gradient(60% 70% at 16% 18%, rgba(255, 251, 242, .95) 0%, rgba(255, 251, 242, 0) 70%); }
.ag-ph__win { left: 5%; top: 7%; width: 30%; height: 44%; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #DCE7F3 0%, #EEF0F6 70%, #F6F1EE 100%); box-shadow: inset 0 0 0 7px #FBF7F3, 0 18px 30px -26px rgba(80, 50, 60, .45); }
.ag-ph__win::before { content: ""; position: absolute; left: calc(50% - 3px); top: 0; bottom: 0; width: 6px; background: #FBF7F3; }
.ag-ph__win i { position: absolute; left: 10%; right: 10%; bottom: 0; height: 30%; border-radius: 50% 50% 0 0; background: radial-gradient(60% 90% at 50% 100%, #CFE3C9, rgba(207, 227, 201, 0)); }
.ag-ph__shelf { left: 0; right: 0; top: 62%; height: 1.6%; background: #E4D3C5; box-shadow: 0 8px 14px -10px rgba(80, 50, 40, .4); }
.ag-ph__bloom { top: 50%; width: 13%; aspect-ratio: 1.3; border-radius: 50%; opacity: .78; filter: blur(1.5px);
  background: radial-gradient(circle at 30% 40%, #F4B9CF 0 15%, transparent 16%), radial-gradient(circle at 62% 32%, #EFA7C1 0 17%, transparent 18%), radial-gradient(circle at 48% 64%, #F6C9D9 0 16%, transparent 17%), radial-gradient(circle at 78% 62%, #F0B2C8 0 13%, transparent 14%), radial-gradient(circle at 18% 70%, #BFD3B6 0 11%, transparent 12%); }
.ag-ph__bloom--1 { left: 4%; }
.ag-ph__bloom--2 { left: 16%; top: 47%; }
.ag-ph__bloom--3 { left: 28%; top: 51%; }
.ag-ph__counter { left: 0; right: 0; top: 80%; bottom: 0; background: linear-gradient(180deg, #DDBF9E 0%, #CFAB86 100%); box-shadow: inset 0 3px 0 rgba(255, 238, 214, .6); }
.ag-ph__device {
  left: calc(var(--l) * 1% - .9%); top: calc(var(--t) * 1% - 1.4%);
  width: calc(var(--w) * 1% + 1.8%); height: calc(var(--h) * 1% + 2.8%);
  border-radius: 14% / 6.8%; background: #211D31;
  box-shadow: 0 30px 50px -26px rgba(30, 15, 50, .65), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.ag-scene--ph { box-shadow: 0 40px 80px -52px rgba(70, 40, 60, .5), 0 12px 28px -22px rgba(70, 40, 60, .22); }

/* окно продукта: белая панель, волосяная рамка, мягкая индиго-тень */

/* ---------- общее для модулей ---------- */
.ag-ava { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #4338CA; background: #E7E5FC; }


/* ---------- лента «На проверке»: страница проектов (первый экран и глава 3) ----------
   Уменьшенный настоящий продукт (templates/dashboard/index.html): заголовок
   «Мои проекты», вкладки, карточки постов, пустая лента. Тонкая шкала:
   три размера (--f1 заголовок, --f2 текст и вкладки, --f3 мета и кнопки),
   веса 400/500/600, один акцент (индиго) и зеленая кнопка «Одобрить» -
   как в продукте. Монитору главы 3 (mon) - те же токены крупнее. */
.ag-feed {
  --f1: 12.5px; --f2: 10.5px; --f3: 9.5px;
  --ink: #17142B; --ink-2: #57526E; --ink-3: #8C88A3; --line: rgba(23, 20, 43, .08); --acc: #4F46E5; --ok: #059669;
  width: 100%; height: 100%; display: flex; flex-direction: column; background: #F7F6FB; color: var(--ink);
  font: 400 var(--f2)/1.35 var(--vt-font); font-variant-numeric: tabular-nums;
}
.ag-feed__hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 2px; background: #fff; }
.ag-feed__hd b { font-size: var(--f1); font-weight: 600; letter-spacing: -.012em; }
.ag-feed__new { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 7px; font-size: var(--f3); font-weight: 600; color: #fff; background: var(--acc); }
.ag-feed__new svg { width: 12px; height: 12px; stroke-width: 2.4; }
.ag-feed__tabs { flex: none; display: flex; gap: 16px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line); }
.ag-feed__tabs > span { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 27px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ag-feed__tabs > span.is-on { font-weight: 600; color: var(--acc); }
.ag-feed__tabs > span.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--acc); }
.ag-feed__tabs i { font-style: normal; display: inline-block; min-width: 16px; padding: 3.5px 4.5px; border-radius: 999px; font-size: var(--f3); font-weight: 600; line-height: 1; text-align: center; text-box: trim-both cap alphabetic; color: var(--ink-3); background: #F0EFF5; }
/* цифры Inter ниже высоты прописных на полпикселя: поле сверху на 0.5 px меньше */
.ag-feed__tabs i { padding-top: 3px; padding-bottom: 4px; }
.ag-feed__tabs .is-on i { color: var(--acc); background: rgba(79, 70, 229, .1); }
.ag-feed__tabs em { font-style: normal; }
.ag-feed__ctl { flex: none; display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 7px 8px 7px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ag-feed__sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--f3); color: var(--ink-3); white-space: nowrap; }
.ag-feed__sum b { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-weight: 600; color: var(--acc); background: #EEF0FF; box-shadow: inset 0 0 0 1px #D9DCFB; }
.ag-feed__sum em { font-style: normal; }
.ag-feed__sel { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: var(--f3); color: var(--ink-2); box-shadow: inset 0 0 0 1px #E3E1EC; white-space: nowrap; }
.ag-feed__sel svg { width: 11px; height: 11px; color: var(--ink-3); }
.ag-feed__list { flex: 1 1 auto; min-height: 0; position: relative; padding: 2px 12px 5px; }
.ag-fc { display: grid; grid-template-rows: 1fr; margin-top: 6px; transition: grid-template-rows .6s var(--vt-ease-in), margin-top .6s var(--vt-ease-in), opacity .35s ease; }
.ag-fc__in { min-height: 0; overflow: hidden; }
.ag-fc__card { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -12px rgba(23, 20, 43, .4); }
.ag-fc__ph { flex: none; width: 34px; height: 34px; border-radius: 6px; background: #E4DFF0 center / cover no-repeat; }
.ag-fc__main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center; }
.ag-fc__meta { grid-column: 1; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--f3); color: var(--ink-3); white-space: nowrap; }
.ag-fc__proj { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-2); }
.ag-fc__proj svg { width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.ag-fc__tx { grid-column: 1; min-width: 0; font-weight: 500; color: var(--ink); white-space: nowrap; }
.ag-fc__acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.ag-fc__ok, .ag-fc__ed { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--f3); font-weight: 600; white-space: nowrap; }
.ag-fc__ok { color: #fff; background: var(--ok); }
.ag-fc__ok svg { width: 10px; height: 10px; stroke-width: 2.6; }
.ag-fc__ok .vt-touch { left: 50%; top: 50%; }
.ag-fc__ed { color: var(--ink-2); box-shadow: inset 0 0 0 1px #E3E1EC; }
/* пустая лента - как в продукте: пунктирная рамка, зеленый круг с галочкой */
.ag-feed__empty { position: absolute; inset: 8px 12px 6px; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 0 18px; text-align: center; border-radius: 10px; background: #fff; outline: 1px dashed #D5D2E0; outline-offset: -1px; transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.ag-feed__done { width: 28px; height: 28px; margin-bottom: 5px; border-radius: 50%; display: grid; place-items: center; color: #10B981; background: #ECFDF5; }
.ag-feed__done svg { width: 16px; height: 16px; stroke-width: 2.4; }
.ag-feed__empty b { font-size: var(--f2); font-weight: 600; }
.ag-feed__empty span { max-width: 26em; font-size: var(--f3); color: var(--ink-3); text-wrap: balance; }
/* ноутбук первого экрана (экран G0 - 384x235, на 1440 масштаб 0.93) */
/* касание - на правом краю кнопки, подпись «Одобрить» остается читаемой */
.ag-feed--lap .ag-fc__ok .vt-touch, .ag-feed--m .ag-fc__ok .vt-touch { left: 80%; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 4px rgba(255, 72, 176, .22), 0 0 0 9px rgba(255, 72, 176, .1); }
/* телефон узких экранов (экран G0m): заголовок крупнее, вкладки сегментом */
.ag-feed--m { --f1: 14px; --f2: 11px; --f3: 10px; background: #F5F4FA; }
.ag-feed--m .ag-feed__hd { padding: 14px 12px 8px; }
.ag-feed--m .ag-feed__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 10px; padding: 3px; border: 0; border-radius: 9px; background: #ECEAF3; }
.ag-feed--m .ag-feed__tabs > span { justify-content: center; gap: 3px; height: 24px; border-radius: 7px; font-size: var(--f3); }
.ag-feed--m .ag-feed__tabs > span.is-on::after { display: none; }
.ag-feed--m .ag-feed__tabs > span.is-on { background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 59, .1); }
.ag-feed--m .ag-feed__tabs i { min-width: 0; padding: 0; background: none; font-weight: 500; }
.ag-feed--m .ag-feed__list { padding: 3px 10px 10px; }
.ag-feed--m .ag-fc { margin-top: 8px; }
.ag-feed--m .ag-fc__card { align-items: flex-start; gap: 9px; padding: 9px; }
.ag-feed--m .ag-fc__ph { width: 40px; height: 40px; }
.ag-feed--m .ag-fc__main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ag-feed--m .ag-fc__meta { flex-direction: column; align-items: flex-start; gap: 1px; }
.ag-feed--m .ag-fc__tx { white-space: normal; line-height: 1.3; }
.ag-feed--m .ag-fc__acts { margin-top: 5px; }
.ag-feed--m .ag-feed__empty { inset: 8px 10px auto; padding: 30px 16px 32px; }
/* глава 3: страница проектов в мониторе сцены G6 (600x312, на 1440 - 0.81).
   Мета во всю ширину карточки, под ней текст поста в две строки и кнопки справа */
.ag-feed--mon { --f1: 14.5px; --f2: 12.5px; --f3: 11px; }
.ag-feed--mon .ag-feed__hd { padding: 12px 16px 4px; }
.ag-feed--mon .ag-feed__new { height: 24px; padding: 0 10px; }
.ag-feed--mon .ag-feed__tabs { gap: 18px; padding: 0 16px; }
.ag-feed--mon .ag-feed__tabs > span { height: 30px; }
.ag-feed--mon .ag-feed__ctl { margin: 9px 16px 0; padding: 4px 5px 4px 10px; }
.ag-feed--mon .ag-feed__sum b { height: 20px; padding: 0 8px; }
.ag-feed--mon .ag-feed__sel { height: 24px; padding: 0 9px; }
.ag-feed--mon .ag-feed__list { padding: 0 16px 8px; overflow: hidden; }
.ag-feed--mon .ag-fc { margin-top: 6px; }
.ag-feed--mon .ag-fc__card { align-items: flex-start; gap: 11px; padding: 7px 10px 7px 7px; }
.ag-feed--mon .ag-fc__ph { width: 46px; height: 46px; border-radius: 7px; }
.ag-feed--mon .ag-fc__main { row-gap: 3px; }
.ag-feed--mon .ag-fc__meta { grid-column: 1 / -1; gap: 13px; }
.ag-feed--mon .ag-fc__camp::before, .ag-feed--mon .ag-fc__when::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px -8px; border-radius: 50%; background: #C9C6D6; }
.ag-feed--mon .ag-fc__tx { grid-row: 2; white-space: normal; line-height: 1.3; font-weight: 400; color: #3F3B52; text-wrap: pretty; }
.ag-feed--mon .ag-fc__acts { grid-row: 2; align-self: center; }
.ag-feed--mon .ag-fc__ok, .ag-feed--mon .ag-fc__ed { height: 24px; padding: 0 9px; }
.ag-feed--mon .ag-fc__ok .vt-touch { left: 80%; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 4px rgba(255, 72, 176, .22), 0 0 0 9px rgba(255, 72, 176, .1); }

/* ---------- телефоны клиентов первого экрана (экран G0 - 98x205) ----------
   Канал клиента в момент публикации: имя канала, плашка дня, новый пост и
   отметка «Опубликовано». Строки статуса и площадки нет. Пост опущен ниже и
   уходит за предметы сцены (владелец 26.09): фото, заголовок и отметка - до
   136 px экрана (у телефона 2 выше начинается рюкзак), текст и хештеги
   прячутся за чашкой, рюкзаком и листом пиона */
.ag-cp { width: 100%; height: 100%; display: flex; flex-direction: column; background: #F2F1F7; color: #17142B; font-family: var(--vt-font); }
.ag-cp__bar { flex: none; display: grid; place-items: center; height: 21px; padding: 0 5px; background: #fff; box-shadow: 0 1px 0 rgba(23, 20, 43, .07); }
.ag-cp__bar b { font-size: 8px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.ag-cp__day { flex: none; align-self: center; margin-top: 7px; padding: 2px 6px; border-radius: 999px; font-size: 7px; font-weight: 500; line-height: 1; text-box: trim-both cap alphabetic; color: #6F6A86; background: rgba(23, 20, 43, .06); }
.ag-cp__post { flex: none; display: flex; flex-direction: column; gap: 4px; margin: 6px 5px 0; padding: 4px 4px 7px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 59, .06), 0 6px 12px -10px rgba(23, 19, 59, .4); transition: opacity .55s var(--vt-ease-in) .25s, transform .65s var(--vt-ease-in) .25s; }
.ag-cp__ph { display: block; height: 46px; margin-bottom: 1px; border-radius: 5px; background: #D9D3EA center / cover no-repeat; }
.ag-cp__t { padding: 0 3px; font-size: 9px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.ag-cp__ok { display: inline-flex; align-items: center; gap: 3px; padding: 0 3px; font-size: 8px; font-weight: 600; color: #15803D; transition: opacity .4s ease .8s; }
.ag-cp__ok i { width: 10px; height: 10px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #16A34A; }
.ag-cp__ok svg { width: 6.5px; height: 6.5px; stroke-width: 3.4; }
.ag-cp__tx { margin-top: 1px; padding: 0 3px; font-size: 8px; line-height: 1.35; color: #57526E; }
.ag-cp__tags { padding: 0 3px; font-size: 8px; font-weight: 500; color: #4F46E5; }
/* чашка, рюкзак и лист пиона на арте стоят перед телефонами: маска по арту
   режет интерфейс, предмет остается спереди (сквозь петлю рюкзака экран виден) */
.ag-q-phone--mask1 .vt-quad__ui { -webkit-mask: url("../img/showcase/agencies/mask-phone1.55d8652c4256.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-phone1.55d8652c4256.png") 0 0 / 100% 100% no-repeat; }
.ag-q-phone--mask2 .vt-quad__ui { -webkit-mask: url("../img/showcase/agencies/mask-phone2.831e8f614269.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-phone2.831e8f614269.png") 0 0 / 100% 100% no-repeat; }
.ag-q-phone--mask3 .vt-quad__ui { -webkit-mask: url("../img/showcase/agencies/mask-phone3.e9f9e8300337.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-phone3.e9f9e8300337.png") 0 0 / 100% 100% no-repeat; }
.ag-q-mask--mail .vt-quad__ui { -webkit-mask: url("../img/showcase/agencies/mask-mail.a4cade0785a8.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-mail.a4cade0785a8.png") 0 0 / 100% 100% no-repeat; }
/* экраны-трапеции (главы 04, 06, 09): модуль по внешним краям экрана, маска - по его контуру на арте */
.ag-q-mask--new .vt-quad__ui { border-radius: 0; -webkit-mask: url("../img/showcase/agencies/mask-new.18ad801cc29d.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-new.18ad801cc29d.png") 0 0 / 100% 100% no-repeat; }
.ag-q-mask--studio .vt-quad__ui { border-radius: 0; -webkit-mask: url("../img/showcase/agencies/mask-studio.1446c7a7d992.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-studio.1446c7a7d992.png") 0 0 / 100% 100% no-repeat; }
.ag-q-mask--clients .vt-quad__ui { border-radius: 0; -webkit-mask: url("../img/showcase/agencies/mask-clients.af685aa534de.png") 0 0 / 100% 100% no-repeat; mask: url("../img/showcase/agencies/mask-clients.af685aa534de.png") 0 0 / 100% 100% no-repeat; }
/* цепочка брелока поверх рюкзака и телефона за ним (ui/_ag_keychain.html) */
.ag-keychain { position: absolute; z-index: 4; overflow: visible; pointer-events: none; }

/* ---------- модули: общая шкала ----------
   Три размера на модуль: --f1 заголовок, --f2 текст и кнопки, --f3 мета и
   подписи; веса 400/500/600, табличные цифры, один акцент (индиго). Экраны
   устройств - тонкая шкала (HANDOFF-18, раздел 0), печать на бумаге стола -
   крупнее: модуль на листе в масштабе ~1 (владелец 26.09: мелкая печать на
   листах «не читаема»). */
.ag-ui {
  --f1: 14px; --f2: 12px; --f3: 10.5px;
  --ink: #17142B; --ink-2: #57526E; --ink-3: #8C88A3; --line: rgba(23, 20, 43, .09); --acc: #4F46E5; --ok: #059669;
  color: var(--ink); font: 400 var(--f2)/1.4 var(--vt-font); font-variant-numeric: tabular-nums;
}
.ag-marks--sm { gap: 3px; }
.ag-marks--sm > i, .ag-marks--sm img, .ag-marks--sm svg { width: 14px; height: 14px; }
.ag-marks--sm img { border-radius: 3.2px; }

/* глава 1: карточка проекта на раскрытой папке (сцена G1, 220x265) */
.ag-proj { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 17px 17px 16px; }
.ag-proj__hd { display: flex; align-items: center; gap: 8px; }
.ag-proj__hd b { font-size: var(--f1); font-weight: 600; letter-spacing: -.01em; }
.ag-proj__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
.ag-proj__meta { display: flex; align-items: center; gap: 10px; font-size: var(--f3); font-weight: 500; color: var(--ink-2); }
.ag-proj__desc { color: var(--ink-2); line-height: 1.45; }
.ag-proj__camps { margin-top: 1px; border-top: 1px solid var(--line); }
.ag-proj__camps li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ag-proj__camps .ag-proj__dot { width: 6px; height: 6px; box-shadow: none; }
.ag-proj__camps b { flex: 1; min-width: 0; font-weight: 500; }
.ag-proj__camps span:last-child { font-size: var(--f3); color: var(--ink-3); }
.ag-proj__posts { margin-top: auto; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: baseline; }
.ag-proj__pl { font-size: var(--f3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ag-proj__pc { font-weight: 600; }
.ag-proj__pc span { font-weight: 400; color: var(--ink-3); }
.ag-proj__track { grid-column: 1 / -1; display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; background: #EFEDF6; }
.ag-proj__track i { display: block; }
.ag-proj__track .is-pub { background: #22C55E; }
.ag-proj__track .is-appr { background: #A5B4FC; }
.ag-proj__track .is-pend { background: #FCD34D; }

/* глава 2: «Каналы публикации» напечатаны на карточке сцены G2 (350x403) - без рамки окна, во всю карточку */
.ag-chs { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 18px 18px 14px; }
.ag-chs__crumb { font-size: var(--f3); color: var(--ink-3); }
.ag-chs__crumb span { margin: 0 3px; opacity: .6; }
.ag-chs__crumb b { font-weight: 500; color: var(--ink-2); }
.ag-chs__hd { display: flex; gap: 10px; margin-top: 12px; }
.ag-chs__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--acc); background: rgba(79, 70, 229, .08); }
.ag-chs__ic svg { width: 15px; height: 15px; }
.ag-chs__t { display: grid; gap: 2px; }
.ag-chs__t b { font-size: var(--f1); font-weight: 600; }
.ag-chs__t span { font-size: var(--f3); color: var(--ink-3); }
.ag-chs__cnt { display: inline-flex; align-self: flex-start; margin-top: 12px; padding: 3px 10px; border-radius: 999px; font-size: var(--f3); font-weight: 500; color: var(--ink-2); background: #F2F1F6; }
.ag-chs__cnt em { font-style: normal; }
.ag-chs__list { margin-top: 10px; border-top: 1px solid var(--line); }
.ag-chs__ch, .ag-chs__in { display: flex; align-items: center; gap: 10px; }
.ag-chs__ch { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ag-chs__mk { width: 22px; height: 22px; flex: none; }
.ag-chs__mk img, .ag-chs__mk svg { display: block; width: 22px; height: 22px; }
.ag-chs__mk img { border-radius: 5px; }
.ag-chs__nm { flex: 1; min-width: 0; display: grid; }
.ag-chs__nm b { font-weight: 600; }
.ag-chs__nm small { font-size: var(--f3); color: var(--ink-3); }
.ag-chs__live { flex: none; font-size: var(--f3); font-weight: 600; color: #15803D; }
.ag-chs__live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #22C55E; }
/* строка появляется и уходит сжатием высоты (без скачка соседей) */
.ag-chs__ch--new, .ag-chs__row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--vt-ease-in), padding .55s var(--vt-ease-in), opacity .4s ease, border-color .3s ease; }
.ag-chs__ch--new > .ag-chs__in, .ag-chs__clip { min-height: 0; overflow: hidden; }
.ag-chs__ch--new { grid-template-rows: 0fr; padding-block: 0; opacity: 0; border-bottom-color: transparent; }
[data-steps].is-c .ag-chs__ch--new { grid-template-rows: 1fr; padding-block: 10px; opacity: 1; border-bottom-color: var(--line); }
.ag-chs__prof { margin-top: 16px; padding: 14px 14px 8px; border-radius: 12px; background: #F7F7FD; box-shadow: inset 0 0 0 1px #E4E3F6; }
.ag-chs__pt { font-weight: 600; }
.ag-chs__ps { margin-top: 3px; font-size: var(--f3); line-height: 1.45; color: var(--ink-2); }
.ag-chs__row { margin: 10px 0 6px; }
.ag-chs__row .ag-chs__in { padding: 8px 8px 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E6E5F2; }
.ag-chs__btn { position: relative; flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 7px; font-size: var(--f3); font-weight: 600; color: #fff; background: var(--acc); white-space: nowrap; }
.ag-chs__btn .vt-touch { left: 78%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
[data-steps].is-c .ag-chs__row--go { grid-template-rows: 0fr; margin-block: 0; opacity: 0; }


/* глава 4: окно-мастер в экране ноутбука сцены G7 (400x220): полоса трех шагов,
   текущий шаг, кнопка мастера внизу. Состояние по умолчанию - финал (без JS и
   при reduced-motion): шаги 1-2 пройдены, открыт шаблон; такты - ниже */
.ag-new { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; }
.ag-new__bar { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 14px; background: #FAFAFD; box-shadow: inset 0 -1px 0 var(--line); }
.ag-new__st { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 30px; }
.ag-new__st i { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--f3); font-weight: 600; color: #fff; background: var(--acc); transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.ag-new__st i em { font-style: normal; line-height: 1; text-box: trim-both cap alphabetic; }
.ag-new__st i svg { position: absolute; width: 10px; height: 10px; stroke-width: 3; opacity: 0; }
.ag-new__st > span { display: grid; min-width: 0; }
.ag-new__st b { font-size: var(--f3); font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.ag-new__st small { display: none; font-size: var(--f3); line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
/* пройденный шаг: зеленая галочка и итог; активный - индиго; ожидающий - контур */
.ag-new__st--1 i, .ag-new__st--2 i { background: #10B981; }
.ag-new__st--1 i em, .ag-new__st--2 i em { opacity: 0; }
.ag-new__st--1 i svg, .ag-new__st--2 i svg { opacity: 1; }
.ag-new__st--1 small, .ag-new__st--2 small { display: block; }
.ag-new__st--3 b { color: var(--acc); }
.ag-new__body { position: relative; flex: 1 1 auto; min-height: 0; }
.ag-new__pane { position: absolute; inset: 12px 16px 10px; display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: opacity .4s var(--vt-ease-in), visibility 0s linear .4s; }
.ag-new__pane--3 { opacity: 1; visibility: inherit; transition-delay: 0s; }
.ag-new__q { font-size: var(--f1); font-weight: 600; letter-spacing: -.01em; }
.ag-new__sub { margin-top: -3px; font-size: var(--f3); line-height: 1.45; color: var(--ink-3); }
.ag-new__in { position: relative; display: flex; align-items: center; gap: 7px; height: 32px; margin-top: 2px; padding: 0 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .34); }
.ag-new__in svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.ag-new__pane--2 { flex-direction: row; align-items: stretch; gap: 10px; }
.ag-new__tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E3E1EC; }
.ag-new__tile b { font-weight: 600; line-height: 1.3; }
.ag-new__tile > span { font-size: var(--f3); line-height: 1.4; color: var(--ink-3); }
.ag-new__tile--on { background: #F5F3FF; box-shadow: inset 0 0 0 1.5px var(--acc); }
.ag-new__ch { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 500; }
.ag-new__ch i { width: 16px; height: 16px; flex: none; }
.ag-new__ch svg { display: block; width: 16px; height: 16px; }
.ag-new__tpls { display: grid; gap: 4px; }
.ag-new__tpl { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 25px; padding: 0 10px; border-radius: 7px; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px #E3E1EC; }
.ag-new__tpl svg { width: 13px; height: 13px; flex: none; stroke-width: 2.6; color: var(--acc); opacity: 0; }
.ag-new__tpl--on { font-weight: 600; color: #3F37C9; background: #F5F3FF; box-shadow: inset 0 0 0 1.5px var(--acc); }
.ag-new__tpl--on svg { opacity: 1; }
.ag-new__ft { flex: none; display: flex; justify-content: flex-end; padding: 7px 14px; box-shadow: inset 0 1px 0 var(--line); }
.ag-new__btn { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 8px; font-weight: 600; color: #fff; background: var(--acc); white-space: nowrap; }
.ag-new__btn--next { display: none; }
.ag-new__btn--go { background: var(--vt-grad-btn); }
.ag-new__btn .vt-touch { left: 82%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }


/* глава 5: пост в голосе клиента на карточке стола (сцена G3, 210x305) */
.ag-vp { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 13px; }
.ag-vp__hd { display: flex; align-items: center; gap: 8px; }
.ag-vp__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: center / cover no-repeat; }
.ag-vp__hd b { display: block; font-weight: 600; line-height: 1.2; }
.ag-vp__hd small { display: block; font-size: var(--f3); color: var(--ink-3); }
.ag-vp__ph { flex: none; height: 92px; border-radius: 9px; background: #E3DDF0 center / cover no-repeat; }
.ag-vp__t { font-size: var(--f1); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.ag-vp__tx { color: var(--ink-2); line-height: 1.45; }
.ag-vp__tags { margin-top: auto; font-size: var(--f3); font-weight: 500; color: var(--acc); }
/* строка повода - надпись на столе между чашкой и горами, без плашки */
.ag-topic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ag-topic i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--vt-pink); }
.ag-topic b { font-weight: 600; color: #B0186F; }
/* телефон: два поста друг под другом, строка повода сверху (без сцены) */
.ag-mstack { display: none; }


/* глава 6: «Пост сейчас» в экране планшета сцены G8 (ночь, 340x213): слева выбор
   кампании любого клиента, справа повод и «Сгенерировать пост» */
.ag-pn { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.ag-pn__bar { flex: none; display: flex; align-items: center; height: 34px; padding: 0 14px; background: #FAFAFD; box-shadow: inset 0 -1px 0 var(--line); }
.ag-pn__tool { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f1); font-weight: 600; }
.ag-pn__tool svg { width: 14px; height: 14px; color: var(--acc); }
.ag-pn__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
.ag-pn__col { display: flex; flex-direction: column; min-width: 0; }
.ag-pn__lab { margin: 0 2px 6px; font-size: var(--f3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ag-pn__list { display: grid; gap: 2px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px #E6E5F0; }
.ag-pn__opt { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px; }
.ag-pn__opt .ag-ava { width: 22px; height: 22px; font-size: var(--f3); }
.ag-pn__nm { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ag-pn__nm b { font-weight: 600; white-space: nowrap; }
.ag-pn__nm small { font-size: var(--f3); color: var(--ink-3); white-space: nowrap; }
.ag-pn__opt--on { background: #F5F3FF; box-shadow: inset 0 0 0 1.5px var(--acc); }
.ag-pn__opt--on b { color: #3F37C9; }
.ag-pn__area { flex: 1 1 auto; padding: 8px 10px; border-radius: 10px; line-height: 1.4; color: var(--ink-2); background: #F8F7FC; box-shadow: inset 0 0 0 1px #ECEBF4; }
.ag-pn__go { position: relative; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; height: 28px; margin-top: 8px; border-radius: 8px; font-size: var(--f3); font-weight: 600; color: #fff; background: var(--vt-grad-btn); white-space: nowrap; }
.ag-pn__go .vt-touch { left: 80%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }


/* глава 8: бот клиента - общий модуль ui/_bot.html в телефоне сцены G5 (185x393):
   строка «Принято на публикацию» занимала всю ширину карточки и упиралась в края
   (владелец 27.09: «не влезает, криво») - кегль и галочка мельче, поля по бокам */
[data-page="agencies"] #ch-approve .vt-acts__res { inset: 0 3px; gap: 5px; font-size: 10.5px; }
[data-page="agencies"] #ch-approve .vt-acts__res i { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
[data-page="agencies"] #ch-approve .vt-acts__res svg { width: 8px; height: 8px; }

/* глава 7: окно «Пригласить исполнителя» на пропуске (сцена G4, 380x249) -
   сверху по центру пропуска зажим ленты, окно начинается ниже него;
   карточка исполнителя - на визитке (216x131) */
.ag-inv { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 30px 24px 16px; }
.ag-inv__t { font-size: var(--f1); font-weight: 600; letter-spacing: -.01em; }
.ag-inv__rows { border-top: 1px solid var(--line); }
.ag-inv__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ag-inv__rows dt { font-size: var(--f3); color: var(--ink-3); }
.ag-inv__rows dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; white-space: nowrap; }
.ag-inv__rows dd svg { width: 12px; height: 12px; color: var(--ink-3); }
.ag-inv__go { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; min-height: 30px; }
.ag-inv__btn { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 8px; font-weight: 600; color: #fff; background: var(--acc); white-space: nowrap; }
.ag-inv__btn .vt-touch { left: 82%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.ag-inv__done { display: none; align-items: center; gap: 6px; font-weight: 600; color: #15803D; white-space: nowrap; }
.ag-inv__done svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ag-dlg { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 16px; }
.ag-dlg__t { font-size: var(--f1); font-weight: 600; letter-spacing: -.01em; }
.ag-dlg__ok { display: inline-flex; align-items: center; gap: 4px; font-size: var(--f3); font-weight: 600; color: #15803D; }
.ag-dlg__ok svg { width: 12px; height: 12px; }
.ag-dlg__about { margin-top: 5px; color: var(--ink-2); line-height: 1.4; }


/* глава 9: кабинет исполнителя в аккаунте клиента - в экране планшета сцены G9
   (390x251: на 1440 масштаб 0.85, на 390 - 0.92). Плашка «Аккаунт клиента» в две
   строки (метка и «Вернуться в свой аккаунт», под ними клиент, «как ...» и
   роль), меню «Аккаунты» открыто поверх страницы проектов */
.ag-acc { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #F7F6FB; }
.ag-wsb { flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "tag tag back" "cl as chip"; align-items: center; gap: 6px 9px; padding: 8px 10px 9px 12px; color: #fff; background: linear-gradient(90deg, #312E81 0%, #3730A3 55%, #4338CA 100%); }
.ag-wsb__tag { grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: var(--f3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: rgba(255, 255, 255, .14); }
.ag-wsb__tag svg { width: 11px; height: 11px; }
.ag-wsb__back { grid-area: back; justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--f3); font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.ag-wsb__back svg { width: 12px; height: 12px; }
.ag-wsb__cl { grid-area: cl; display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.ag-wsb__av { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: var(--f3); font-weight: 600; color: #3730A3; background: #fff; }
.ag-wsb__cl b { font-weight: 600; }
.ag-wsb em { font-style: normal; }
.ag-wsb__as { grid-area: as; font-size: var(--f3); color: rgba(255, 255, 255, .74); white-space: nowrap; }
.ag-wsb__as b { font-weight: 500; color: #fff; }
.ag-wsb__chip { grid-area: chip; justify-self: end; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--f3); font-weight: 600; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.ag-acc__body { position: relative; flex: 1 1 auto; min-height: 0; padding: 11px 12px; }
.ag-acc__page { display: grid; gap: 8px; align-content: start; }
.ag-acc__h { font-size: var(--f1); font-weight: 600; }
.ag-acc__proj > em { font-style: normal; }
.ag-acc__card { display: grid; gap: 4px; padding: 11px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(23, 20, 43, .3); }
.ag-acc__nm { display: flex; align-items: center; gap: 7px; }
.ag-acc__nm b { font-weight: 600; white-space: nowrap; }
.ag-acc__meta { font-size: var(--f3); font-weight: 500; color: var(--ink-2); }
.ag-acc__desc { max-width: 150px; font-size: var(--f3); line-height: 1.4; color: var(--ink-3); }
.ag-acc__camps { display: grid; margin-top: 4px; border-top: 1px solid var(--line); }
.ag-acc__camps > span { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 0; font-size: var(--f3); color: var(--ink-3); }
.ag-acc__camps b { font-size: var(--f2); font-weight: 500; color: var(--ink); }
.ag-acc__menu { position: absolute; top: 6px; right: 10px; width: 186px; display: grid; gap: 1px; padding: 6px 4px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 22px 40px -18px rgba(23, 20, 43, .5); }
.ag-acc__mk { padding: 1px 8px 4px; font-size: var(--f3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ag-acc__it { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; transition: background-color .3s ease; }
.ag-acc__ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
.ag-acc__ic svg { width: 14px; height: 14px; }
.ag-acc__ic--ini { font-size: var(--f3); font-weight: 600; color: #4338CA; background: #E7E5FC; }
.ag-acc__who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ag-acc__who b { font-weight: 500; white-space: nowrap; }
.ag-acc__who small { font-size: var(--f3); color: var(--ink-3); white-space: nowrap; }
.ag-acc__it .vt-touch { left: 86%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.ag-acc__it--pion { background: #EEF0FF; }
.ag-acc__it--pion b { color: #3730A3; }
[data-steps].is-c .ag-acc__it--pion { background: transparent; }
[data-steps].is-c .ag-acc__it--pion b { color: inherit; }
[data-steps].is-c .ag-acc__it--go { background: #EEF0FF; }
[data-steps].is-c .ag-acc__it--go b { color: #3730A3; }

/* глава 10: журнал доступов ровным списком и письмо-сводка под ним */
/* глава 10: журнал напечатан на правой странице раскрытого журнала сцены G10
   (290x405, у корешка поле шире - там тень переплета), письмо - на карточке
   в конверте (300x130, нижние углы режет маска кармашка) */
.ag-log { width: 100%; height: 100%; padding: 22px 18px 12px 26px; }
.ag-log__hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; }
.ag-log__ttl { display: contents; }
.ag-log__ttl span { grid-column: 1 / -1; grid-row: 2; }
.ag-log__ttl b { font-size: var(--f1); font-weight: 600; }
.ag-log__ttl span { font-size: var(--f3); color: var(--ink-3); }
.ag-log__csv { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; font-size: var(--f3); font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px #DAD7E4; white-space: nowrap; }
.ag-log__csv svg { width: 13px; height: 13px; }
.ag-log__seg { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; border-radius: 8px; font-size: var(--f3); font-weight: 500; color: var(--ink-3); background: #F1F0F6; }
.ag-log__seg > span { padding: 4px 10px; border-radius: 6px; }
.ag-log__on { font-weight: 600; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 59, .12); }
.ag-log__list { margin-top: 8px; }
.ag-log__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.ag-log__ok { margin-top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #15803D; background: #E9F8EF; }
.ag-log__ok svg { width: 11px; height: 11px; stroke-width: 2.8; }
.ag-log__what { display: grid; min-width: 0; }
.ag-log__what b { font-weight: 500; }
.ag-log__what small { font-size: var(--f3); color: var(--ink-3); }
.ag-log__obj { grid-column: 2; font-size: var(--f3); }
.ag-log__obj { color: var(--ink-2); white-space: nowrap; }
.ag-mail { width: 100%; height: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; align-items: start; gap: 2px 12px; padding: 14px 16px; }
.ag-mail__ic { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--acc); background: rgba(79, 70, 229, .08); }
.ag-mail__ic svg { width: 17px; height: 17px; }
.ag-mail__body { display: grid; gap: 3px; }
.ag-mail__t { font-size: var(--f1); font-weight: 600; }
.ag-mail__tx { font-size: var(--f3); color: var(--ink-2); line-height: 1.45; }
.ag-mail__tx b { font-weight: 600; color: var(--ink); }
.ag-mail__btn { grid-column: 2; justify-self: start; margin-top: 7px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: var(--f3); font-weight: 600; color: #fff; background: var(--acc); }

/* отчет: модуль Аналитики (ui/_an_report.html) в окне по его размеру */


/* ---------- два способа: плитки-входы в акты ----------
   Надпись способа - прямо в экране устройства на арте (прием Аналитики,
   владелец 26.09: «логичнее, чем плашка поверх»): у своего аккаунта - в
   экране ноутбука (кроп G0, в телефонах - фото постов клиентов), у аккаунта
   клиента - в экране телефона на прилавке (кроп G5). Кадр - зум и сдвиг
   арта, прямоугольник экрана - считает agencies_page.mode_frame (d - от
   640 px, m - телефон). Под артом - пункты способа и переход к акту. */
.ag-modes { padding-block: clamp(56px, 7vw, 96px) clamp(8px, 2vw, 24px); }
.ag-mode { --z: var(--zd, 1); --ox: var(--oxd, 0%); --oy: var(--oyd, 0%); --bx: var(--bxd, 50%); --by: var(--byd, 50%); --sl: var(--sld, 22%); --st: var(--std, 24%); --sw: var(--swd, 56%); --sh: var(--shd, 52%); }
a.ag-mode { text-decoration: none; color: var(--vt-ink); transition: transform .3s var(--vt-ease-in), box-shadow .3s ease, border-color .2s ease; }
a.ag-mode:hover { transform: translateY(-3px); border-color: rgba(79, 70, 229, .24); box-shadow: 0 30px 60px -34px rgba(23, 19, 59, .5); }
a.ag-mode:focus-visible { outline: 2px solid var(--vt-indigo); outline-offset: 4px; }
.ag-mode__art { display: block; background-repeat: no-repeat; background-size: calc(var(--z) * 100%) auto; background-position: var(--bx) var(--by); }
.ag-mode__pic { position: absolute; left: var(--ox); top: var(--oy); width: calc(var(--z) * 100%); height: calc(var(--z) * 100%); }
.vt-art.ag-mode__plane { z-index: 0; inset: 0; }
/* посты клиентов в телефонах своего аккаунта - уменьшенная карточка первого экрана:
   фото, под ним заголовок и «Опубликовано»; целиком выше чашки и рюкзака на арте.
   Кегль - от ширины экрана телефона (--pw, % плитки), все размеры карточки - в em */
.ag-mode__art { container-type: inline-size; }
.ag-mode__post {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: .35em; padding: .35em .35em .5em;
  font-size: calc(var(--pw) * .1cqw); line-height: 1.2; color: #17142B; text-align: left;
  border-radius: .7em; background: #fff; box-shadow: 0 .1em .3em rgba(23, 19, 59, .1), 0 .8em 1.4em -1em rgba(23, 19, 59, .45);
}
.ag-mode__ph { display: block; height: 5.2em; border-radius: .45em; background: #D9D3EA center / cover no-repeat; }
.ag-mode__pt { padding: 0 .15em; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
.ag-mode__ok { display: inline-flex; align-items: center; gap: .3em; padding: 0 .15em; font-size: .85em; font-weight: 600; color: #15803D; white-space: nowrap; }
.ag-mode__ok i { width: 1.2em; height: 1.2em; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #16A34A; }
.ag-mode__ok svg { width: .75em; height: .75em; stroke-width: 3.4; }
/* надпись в экране: фронтальный экран - обычная верстка в его прямоугольнике */
.ag-mode__scr {
  position: absolute; z-index: 2; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 calc(var(--sw) * .07);
  text-align: center; container-type: inline-size;
}
.ag-mode__scr .vt-step { gap: 7px; font-size: clamp(9px, 4.6cqw, 10.5px); }
.ag-mode__t { font-size: clamp(13px, 8.4cqw, 19px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.ag-mode__p { font-size: clamp(10.5px, 5.4cqw, 13px); line-height: 1.4; color: rgba(28, 25, 23, .72); text-wrap: balance; }
@container (max-width: 90px) { .ag-mode__p { display: none; } }
@container (max-width: 120px) { .ag-mode__scr .vt-step { gap: 5px; letter-spacing: .08em; white-space: nowrap; } }
.ag-mode .vt-mode__body { display: flex; flex-direction: column; gap: 14px; }
.ag-mode__list { display: grid; gap: 10px; }
.ag-mode__li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.ag-mode__ic { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--ag-c); background: var(--ag-c-soft); }
.ag-mode__ic svg { width: 17px; height: 17px; }
.ag-mode__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14.5px; font-weight: 600; color: var(--ag-c); }
.ag-mode__go svg { width: 16px; height: 16px; transition: transform .25s var(--vt-ease-in); }
a.ag-mode:hover .ag-mode__go svg { transform: translateY(2px); }
.ag-modes__note { margin-top: 22px; text-align: center; font-size: 15px; color: var(--vt-ink-3); }


/* ---------- акты ---------- */
.ag-act { position: relative; scroll-margin-top: 80px; }
/* вступление акта - вход в раздел: слева заголовок и лид, справа
   оглавление глав акта ссылками (HANDOFF-19: раньше - крупный заголовок по
   центру и пустота до первой главы, читалось разделителем) */
.ag-act__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: end; padding-top: clamp(64px, 8vw, 104px); }
.ag-act__intro { display: grid; gap: 12px; justify-items: start; }
.ag-act__head h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 650; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; }
.ag-act__lead { font-size: 17px; line-height: 1.6; color: var(--vt-ink-2); max-width: 32em; }
.ag-act__toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; counter-reset: none; }
.ag-act__toc li { border-top: 1px solid var(--vt-line); }
.ag-act__toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 50px; padding: 8px 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--vt-ink); text-decoration: none; transition: color .2s ease; }
.ag-act__toc b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ag-c); }
.ag-act__toc a:hover { color: var(--ag-c); }
.ag-act--client { background: linear-gradient(180deg, rgba(255, 244, 250, 0) 0%, #FFF5FA 6%, #FAF4FB 100%); }
.ag-ch { scroll-margin-top: 90px; }
.ag-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--vt-indigo); text-decoration: none; }
.ag-link svg { width: 16px; height: 16px; transition: transform .25s var(--vt-ease-in); }
.ag-link:hover svg { transform: translateX(3px); }
.ag-link--quiet { font-weight: 500; color: var(--vt-ink-3); }
.ag-link--quiet:hover { color: var(--vt-indigo); }
/* знаки площадок в факте - плитками одного размера, внахлест */
.vt-facts__i.ag-facts__marks { display: flex; align-items: center; justify-content: center; gap: 0; }
.ag-facts__marks > i { width: 13px; height: 13px; flex: none; border-radius: 3.5px; box-shadow: 0 0 0 1.5px #fff; overflow: hidden; }
.ag-facts__marks > i + i { margin-left: -3px; }
.ag-facts__marks img, .ag-facts__marks svg { display: block; width: 13px; height: 13px; }

/* ---------- что закрыто для исполнителя ---------- */
.ag-closed { padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 104px); }
.ag-closed__box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px 48px; padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: #fff; border: 1px solid var(--vt-line); box-shadow: var(--vt-shadow-2); }
.ag-closed__head { display: grid; gap: 10px; align-content: start; }
.ag-closed__seal { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3730A3, #4F46E5); box-shadow: 0 14px 26px -16px rgba(55, 48, 163, .8); }
.ag-closed__seal svg { width: 22px; height: 22px; }
.ag-closed__head h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.ag-closed__head p { font-size: 15.5px; line-height: 1.55; color: var(--vt-ink-2); }
/* пять пунктов - ровным списком в одну колонку (сетка 3+2 оставляла пустое место) */
.ag-closed__list { display: grid; align-content: start; }
.ag-closed__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; font-size: 15.5px; line-height: 1.4; border-bottom: 1px solid var(--vt-line); }
.ag-closed__list li:first-child { padding-top: 0; }
.ag-closed__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); }
.ag-closed__ic svg { width: 17px; height: 17px; }
.ag-closed__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 6px; border-top: 1px solid var(--vt-line); }

/* ---------- отчет и крупные агентства ---------- */
.ag-report { background: linear-gradient(180deg, rgba(255, 246, 236, 0) 0%, #FFF8F1 30%, rgba(255, 246, 236, 0) 100%); }
/* отчет (сцена G11): модуль Аналитики ui/_an_report.html на листе ниже зажима. Владелец
   27.09: «чуть меньше шрифт, визуал с воздухом и качеством» - только на этой странице:
   три размера мельче, шапка - заголовок и период слева, «Экспорт Excel» справа, таблица
   прижата к низу листа с воздухом над ней, просмотры - главная цифра строки */
[data-page="agencies"] #report .an-rep {
  --an-f-lg: 13.5px; --an-f-md: 12px; --an-f-sm: 10.5px; --an-f-cap: 10.5px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
  column-gap: 12px; padding: 18px 22px 12px;
}
[data-page="agencies"] #report .an-rep__hd { display: contents; }
[data-page="agencies"] #report .an-rep__hd b { grid-column: 1; grid-row: 1; }
[data-page="agencies"] #report .an-rep__xl { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 28px; padding: 0 10px; }
[data-page="agencies"] #report .an-rep__xl .vt-touch { left: 86%; }
[data-page="agencies"] #report .an-rep__sub { grid-column: 1; grid-row: 2; margin-top: 3px; }
[data-page="agencies"] #report .an-rep__t { grid-column: 1 / -1; grid-row: 3; align-self: end; margin-top: 16px; }
[data-page="agencies"] #report .an-rep__t th { padding-bottom: 7px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
[data-page="agencies"] #report .an-rep__t td { height: 34px; color: rgba(28, 25, 23, .62); }
[data-page="agencies"] #report .an-rep__t td:first-child { color: var(--vt-ink); }
[data-page="agencies"] #report .an-rep__t td:last-child { font-weight: 600; color: var(--vt-ink); }
[data-page="agencies"] #report .an-rep__t tr:last-child td { border-bottom: 0; }
.ag-big { padding-block: clamp(8px, 2vw, 24px) 0; }
.ag-big__box { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--vt-line); }
.ag-big__ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); }
.ag-big__ic svg { width: 24px; height: 24px; }
.ag-big__text { display: grid; gap: 4px; }
.ag-big__text h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.ag-big__text p { font-size: 15px; line-height: 1.55; color: var(--vt-ink-2); }

/* ---------- сценарии модулей ----------
   Скрытые стартовые состояния - только с классом vt-js; без JS - кадр до
   касания, при reduced-motion (showcase.js сразу ставит все классы) - финал. */
/* первый экран (agencies_page.HERO_STEPS): «Одобрить» по очереди у трех
   постов - касание is-tN, пост ушел из ленты и встал в телефон своего
   клиента is-dN, счетчик 3 -> 2 -> 1 -> 0, в конце - пустая лента.
   Без JS и при reduced-motion - финал: лента пуста, три поста опубликованы */
.ag-n > em { font-style: normal; display: none; }
.ag-n > em:last-child { display: inline; }
.ag-feed--seq .ag-fc { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.vt-js .ag-n > em:last-child { display: none; }
.vt-js .ag-n > em:first-child { display: inline; }
.vt-js .ag-feed--seq .ag-fc { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }
.vt-js .ag-feed--m.ag-feed--seq .ag-fc { margin-top: 8px; }
.vt-js .ag-feed--seq .ag-feed__empty { opacity: 0; transform: translateY(6px); }
.vt-js [data-steps].is-t1 .ag-fc--1 .vt-touch,
.vt-js [data-steps].is-t2 .ag-fc--2 .vt-touch,
.vt-js [data-steps].is-t3 .ag-fc--3 .vt-touch { animation: vt-tap .5s var(--vt-ease-in) forwards, vt-pulse 1.1s ease-out .45s 1; }
.vt-js [data-steps].is-d1 .ag-feed--seq .ag-fc--1,
.vt-js [data-steps].is-d2 .ag-feed--seq .ag-fc--2,
.vt-js [data-steps].is-d3 .ag-feed--seq .ag-fc--3 { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.vt-js [data-steps].is-d1 .ag-n > em:first-child { display: none; }
.vt-js [data-steps].is-d1 .ag-n > em:nth-child(2) { display: inline; }
.vt-js [data-steps].is-d2 .ag-n > em:nth-child(2) { display: none; }
.vt-js [data-steps].is-d2 .ag-n > em:nth-child(3) { display: inline; }
.vt-js [data-steps].is-d3 .ag-n > em:nth-child(3) { display: none; }
.vt-js [data-steps].is-d3 .ag-n > em:nth-child(4) { display: inline; }
.vt-js [data-steps].is-d3 .ag-feed--seq .ag-feed__empty { opacity: 1; transform: none; transition-delay: .3s; }
.vt-js .ag-q-phone .ag-cp__post { opacity: 0; transform: translateY(8px); }
.vt-js .ag-q-phone .ag-cp__ok { opacity: 0; }
.vt-js [data-steps].is-d1 .ag-q-phone--1 .ag-cp__post, .vt-js [data-steps].is-d1 .ag-q-phone--1 .ag-cp__ok,
.vt-js [data-steps].is-d2 .ag-q-phone--2 .ag-cp__post, .vt-js [data-steps].is-d2 .ag-q-phone--2 .ag-cp__ok,
.vt-js [data-steps].is-d3 .ag-q-phone--3 .ag-cp__post, .vt-js [data-steps].is-d3 .ag-q-phone--3 .ag-cp__ok { opacity: 1; transform: none; }
/* глава 3: карточки встают, касание «Одобрить» у кофейни, пост ушел из ленты */
.vt-js [data-steps] .ag-feed:not(.ag-feed--seq) .ag-fc { opacity: 0; }
.vt-js [data-steps].is-a .ag-feed:not(.ag-feed--seq) .ag-fc { opacity: 1; }
.vt-js [data-steps].is-a .ag-feed:not(.ag-feed--seq) .ag-fc:nth-child(2) { transition-delay: .12s; }
.vt-js [data-steps].is-a .ag-feed:not(.ag-feed--seq) .ag-fc:nth-child(3) { transition-delay: .24s; }
.vt-js [data-steps].is-b .ag-fc.is-go .vt-touch,
.vt-js [data-steps].is-b .ag-chs__row--go .vt-touch,
.vt-js [data-steps].is-b .ag-acc__it--go .vt-touch,
.vt-js [data-steps].is-c .ag-inv__btn .vt-touch,
.vt-js [data-steps].is-f .ag-new__btn--go .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
[data-steps].is-c .ag-fc.is-go { grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition-delay: 0s; }
.vt-js [data-steps].is-c .ag-fc.is-go .vt-touch, .vt-js [data-steps].is-c .ag-acc__it--go .vt-touch { opacity: 0 !important; animation: none; }

/* глава 1: кампании проекта встают по очереди */
.vt-js [data-steps] .ag-proj__camps li, .vt-js [data-steps] .ag-proj__posts { opacity: 0; transform: translateY(5px); transition: opacity .45s var(--vt-ease-in), transform .5s var(--vt-ease-in); }
.vt-js [data-steps].is-b .ag-proj__camps li, .vt-js [data-steps].is-b .ag-proj__posts { opacity: 1; transform: none; }
.vt-js [data-steps].is-b .ag-proj__camps li + li { transition-delay: .15s; }
.vt-js [data-steps].is-b .ag-proj__posts { transition-delay: .3s; }
/* глава 4: адрес печатается -> голос по каналу -> шаблон -> касание «Использовать шаблон».
   Под JS мастер начинает с шага 1; пройденные шаги получают галочку по тактам */
.vt-js [data-steps]:not(.is-b) .ag-new__st--1 i, .vt-js [data-steps].is-b:not(.is-d) .ag-new__st--2 i { background: var(--acc); }
.vt-js [data-steps]:not(.is-b) .ag-new__st--1 i em, .vt-js [data-steps]:not(.is-d) .ag-new__st--2 i em { opacity: 1; }
.vt-js [data-steps]:not(.is-b) .ag-new__st--1 i svg, .vt-js [data-steps]:not(.is-d) .ag-new__st--2 i svg { opacity: 0; }
.vt-js [data-steps]:not(.is-b) .ag-new__st--1 small, .vt-js [data-steps]:not(.is-d) .ag-new__st--2 small { display: none; }
.vt-js [data-steps]:not(.is-b) .ag-new__st--1 b, .vt-js [data-steps].is-b:not(.is-d) .ag-new__st--2 b { color: var(--acc); }
.vt-js [data-steps]:not(.is-b) .ag-new__st--2 i, .vt-js [data-steps]:not(.is-d) .ag-new__st--3 i { color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1.5px #D9D6E6; }
.vt-js [data-steps]:not(.is-b) .ag-new__st--2 b, .vt-js [data-steps]:not(.is-d) .ag-new__st--3 b { color: var(--ink-3); }
.vt-js [data-steps]:not(.is-b) .ag-new__pane--1,
.vt-js [data-steps].is-b:not(.is-d) .ag-new__pane--2 { opacity: 1; visibility: inherit; transition-delay: .15s, 0s; }
.vt-js [data-steps]:not(.is-d) .ag-new__pane--3 { opacity: 0; visibility: hidden; transition: opacity .4s var(--vt-ease-in), visibility 0s linear .4s; }
.vt-js [data-steps]:not(.is-d) .ag-new__btn--next { display: inline-flex; }
.vt-js [data-steps]:not(.is-d) .ag-new__btn--go { display: none; }
.vt-js [data-steps] .ag-new__tile--on, .vt-js [data-steps] .ag-new__tpl--on { transition: background-color .35s ease, box-shadow .35s ease, color .35s ease; }
.vt-js [data-steps] .ag-new__ch, .vt-js [data-steps] .ag-new__tpl svg { transition: opacity .35s ease; }
.vt-js [data-steps]:not(.is-c) .ag-new__tile--on { background: #fff; box-shadow: inset 0 0 0 1px #E3E1EC; }
.vt-js [data-steps]:not(.is-c) .ag-new__ch, .vt-js [data-steps]:not(.is-e) .ag-new__tpl--on svg { opacity: 0; }
.vt-js [data-steps]:not(.is-e) .ag-new__tpl--on { font-weight: 400; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px #E3E1EC; }
.vt-js [data-steps].is-b .ag-new__in .vt-caret { display: none; }
.vt-js [data-steps].is-g .ag-new__btn--go .vt-touch { opacity: 0 !important; animation: none; transition: opacity .3s ease; }
/* глава 5: строка повода, затем посты двух клиентов */
.vt-js [data-steps] .ag-topic, .vt-js [data-steps] .ag-vp { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .ag-topic, .vt-js [data-steps].is-b .ag-vp--rassvet, .vt-js [data-steps].is-c .ag-vp--pohody { opacity: 1; transform: none; }
/* глава 6: выбрана кампания кофейни */
.vt-js [data-steps] .ag-pn__opt--on { transition: background-color .35s ease, box-shadow .35s ease; }
.vt-js [data-steps]:not(.is-b) .ag-pn__opt--on { background: transparent; box-shadow: none; }
.vt-js [data-steps]:not(.is-b) .ag-pn__opt--on b { color: inherit; }
.vt-js [data-steps].is-c .ag-pn__go .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps].is-d .ag-pn__go .vt-touch { opacity: 0 !important; animation: none; transition: opacity .3s ease; }
/* глава 7: касание «Отправить приглашение», отправлено */
[data-steps].is-d .ag-inv__btn { display: none; }
[data-steps].is-d .ag-inv__done { display: inline-flex; }
/* глава 9: касание кофейни в меню - плашка, меню и страница сменили клиента */
.vt-js [data-steps].is-c .ag-wsb__cl, .vt-js [data-steps].is-c .ag-acc__proj { animation: ag-flash .6s var(--vt-ease-in); }
@keyframes ag-flash { 0% { opacity: .35; } 100% { opacity: 1; } }
/* глава 10: записи журнала по очереди, затем приходит письмо */
.vt-js [data-steps] .ag-log__list li { opacity: 0; transition: opacity .45s var(--vt-ease-in); }
.vt-js [data-steps].is-a .ag-log__list li { opacity: 1; }
.vt-js [data-steps].is-a .ag-log__list li:nth-child(2) { transition-delay: .15s; }
.vt-js [data-steps].is-a .ag-log__list li:nth-child(3) { transition-delay: .3s; }
.vt-js [data-steps].is-a .ag-log__list li:nth-child(4) { transition-delay: .45s; }
.vt-js [data-steps] .ag-mail { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--vt-ease-in), transform .65s var(--vt-ease-in); }
.vt-js [data-steps].is-b .ag-mail { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  a.ag-mode, a.ag-mode:hover, .ag-link svg { transition: none; transform: none; }
}

/* ---------- адаптив ---------- */
/* поверхность только для телефона: компактный модуль в том же экране, что десктопный (глава 3) */
[data-page="agencies"] .ag-q-mob { display: none; }
@media (max-width: 1199px) {
  .ag-hero { background: linear-gradient(180deg, #FBF8FF 0%, #F4EEFB 70%, #F1EAF4 100%); }
  .ag-hero .vt-step { justify-content: center; }
  /* телефон первого экрана (сцена G0m): арт крупнее в --hz раз, кадр --m-ar -
     от верха экрана до знаков клиентов на столе (agencies_page.hero), тонкие
     растушевки краев */
  [data-page="agencies"] .ag-hero-m { aspect-ratio: var(--m-ar, 1152 / 1480); }
  [data-page="agencies"] .ag-hero-m .vt-art {
    --aw: calc(100cqw * var(--hz, 1)); --ah: calc(var(--aw) * 1.7778);
    width: var(--aw); height: var(--ah);
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--hfx, .5)), 0px);
    top: clamp(calc(100cqh - var(--ah)), calc(50cqh - var(--ah) * var(--hfy, .5)), 0px);
  }
  [data-page="agencies"] .ag-hero-m::before { height: 28px; }
  [data-page="agencies"] .ag-hero-m::after { height: 28px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  /* узкий десктоп: сцене в две колонки остается ~530 px и модуль мельчает -
     глава в одну колонку: текст, под ним сцена во всю ширину */
  [data-page="agencies"] .ag-ch .vt-ch__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 960px; }
  [data-page="agencies"] .ag-ch .vt-ch__text { max-width: 620px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  /* планшет: арт сцены крупнее в --tz раз с фокусом на поверхностях
     (agencies_page.scene: до 1.3, но так, чтобы все поверхности оставались в кадре) */
  [data-page="agencies"] .vt-ch__grid > .vt-scene.ag-scene .vt-art {
    width: calc(100% * var(--tz)); height: calc(100% * var(--tz));
    left: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--fx, .5)) * 100%), 0%);
    top: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--fy, .5)) * 100%), 0%);
  }
}
@media (max-width: 959px) {
  .ag-act__head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ag-closed__box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  /* сцена главы на телефоне: кадр --m-ar и зум --mz считает
     scene.mobile_frame по настоящим углам (модуль на 390 - от 0.9), фокус
     --mfx/--mfy - на поверхностях */
  [data-page="agencies"] .vt-ch__grid > .vt-scene.ag-scene .vt-art {
    --aw: calc(100cqh * var(--arn) * var(--mz, 1));
    width: var(--aw); height: calc(100% * var(--mz, 1));
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--mfx, var(--fx, .5))), 0px);
    top: clamp(calc((1 - var(--mz, 1)) * 100%), calc((.5 - var(--mz, 1) * var(--mfy, var(--fy, .5))) * 100%), 0%);
  }
  [data-page="agencies"] .ag-q-desk { display: none; }
  [data-page="agencies"] .ag-q-mob { display: block; }
  [data-page="agencies"] .vt-ch__grid > .vt-scene.ag-scene--stack { display: none; }
  .ag-mstack { display: grid; gap: 12px; justify-items: center; margin-inline: -16px; padding: 22px 16px; background-color: #F4ECE0; background-image: radial-gradient(rgba(120, 88, 60, .06) 1px, transparent 1.3px); background-size: 7px 7px; }
  .ag-mstack .ag-topic { width: auto; height: 34px; padding: 0 16px; }
  .ag-mstack__post { width: min(100%, 320px); border-radius: 14px; background: #FFFEFB; box-shadow: 0 20px 36px -24px rgba(80, 44, 30, .45); }
  .ag-mstack .ag-vp, .ag-mstack .ag-topic { opacity: 1 !important; transform: none !important; }
  .ag-act__toc { grid-template-columns: minmax(0, 1fr); }
  .ag-closed__list li { font-size: 15px; }
  .ag-big__box { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
  .ag-big__ic { width: 44px; height: 44px; }
  .ag-big__box .vt-btn { grid-column: 1 / -1; width: 100%; }
  .ag-mode { --z: var(--zm, 1); --ox: var(--oxm, 0%); --oy: var(--oym, 0%); --bx: var(--bxm, 50%); --by: var(--bym, 50%); --sl: var(--slm, 22%); --st: var(--stm, 24%); --sw: var(--swm, 56%); --sh: var(--shm, 52%); }
  .ag-mode__post { display: none; }
  .ag-mode__li { font-size: 14.5px; }
  .ag-act__head h2 { font-size: 27px; }
  .ag-act__lead { font-size: 16px; }
}