/* ═══════════════════════════════════════════════════════════════════════
   sitedemo.css — герои sayty. Каждый герой = ОТДЕЛЬНЫЙ БРЕНД и реальный сайт
   своего типа, который сам себя навигирует (курсор кликает по меню/товару/
   вкладке, экраны сменяются). Ни слова о Tendo, у каждого свой цвет.
     .sd-verva   — ЛЕНДИНГ: фитнес-клуб «Verva» (коралл) — форма-заявка сама
                   заполняется и отправляется.
     .sd-merid   — МНОГОСТРАНИЧНЫЙ: юрфирма «Меридиан» (навы) — переключение
                   страниц Главная/Услуги/Команда/Контакты.
     .sd-roan    — МАГАЗИН: кофе «Roan» (кофе-браун) — каталог→товар→корзина.
     .sd-flow    — ВЕБ-ПРИЛОЖЕНИЕ: трекер «Flowdesk» (индиго) — вкладки
                   Дашборд/Доска/Отчёты.
   Бренд-палитра задаётся --b/--b2/--bs/--bl на .sitedemo (инлайн-стиль).
   Движок — js/sitedemo.js. Ноль джанка: экраны absolute+opacity в фикс-высоте,
   курсор — transform. reduced-motion/no-JS → статичный первый экран.
   ═══════════════════════════════════════════════════════════════════════ */
/* 🔴 25.08.2026, QA-волна 3. --fa был #8A99A6 — 2.92:1 на белом. Lighthouse валил
   a11y лендинга на 96 из-за трёх мест: адресная строка макета, подписи полей формы
   и плейсхолдеры. Что это декоративная имитация чужого сайта, axe не знает и знать
   не должен: текст на экране, значит его читают. Новое значение #65717D даёт ≥4.6
   на всех четырёх подложках макета (#fff, #F7F8FA, #F6F7F9, #F5F6F8) и по-прежнему
   читается как «блёклый» рядом с --mu и --tx. */
.sitedemo{width:100%;max-width:400px;margin-inline:auto;--sl:#EAEDF2;--tx:#0C1B29;--mu:#5C6B78;--fa:#65717D}
.sd-frame{position:relative;background:#fff;border:1px solid var(--sl);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 44px 84px -44px rgba(6,29,41,.44),0 4px 14px -6px rgba(6,29,41,.14);
  height:470px;display:flex;flex-direction:column}
.sd-bar{flex:none;display:flex;align-items:center;gap:11px;padding:10px 14px;background:#F6F7F9;border-bottom:1px solid var(--sl)}
.sd-bar i{width:9px;height:9px;border-radius:50%;background:#D3D8DF}
.sd-bar i:nth-child(1){background:#FF6058}.sd-bar i:nth-child(2){background:#FFBD2E}.sd-bar i:nth-child(3){background:#28C840}
.sd-url{flex:1;font-size:11px;color:var(--fa);background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:5px 11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-view{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.sd-screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;overflow:hidden}
.sd-screen.on{opacity:1;visibility:visible}

/* курсор + клик-волна */
.sd-cursor{position:absolute;top:-11px;left:-11px;width:24px;height:24px;z-index:6;pointer-events:none;
  opacity:0;transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .3s ease}
.sd-cursor.show{opacity:1}
.sd-cursor svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(6,29,41,.4))}
.sd-cursor.tap svg{animation:sdPress .34s ease}
@keyframes sdPress{0%,100%{transform:scale(1)}45%{transform:scale(.8)}}
.sd-cursor::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--b,#5B4BE0);opacity:0}
.sd-cursor.tap::after{animation:sdRing .4s ease-out}
@keyframes sdRing{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}

/* тост */
.sd-toast{position:absolute;left:50%;bottom:16px;z-index:6;transform:translateX(-50%) translateY(12px);opacity:0;
  background:var(--tx);color:#fff;font-size:11.5px;font-weight:600;border-radius:var(--r-sm);padding:9px 14px;
  box-shadow:0 12px 28px -12px rgba(6,29,41,.5);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.4,.5,1);white-space:nowrap}
.sd-toast.on{opacity:1;transform:translateX(-50%)}

/* ── общая «сайтовая» хромота ── */
.sd-topnav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sl);background:#fff}
.sd-logo{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--b);display:flex;align-items:center;gap:8px}
.sd-logo .m{width:20px;height:20px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--b),var(--b2));display:grid;place-items:center;color:#fff}
.sd-logo .m svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sd-menu{display:flex;gap:15px}
.sd-navitem{font-size:11.5px;color:var(--mu);font-weight:600;position:relative;padding-bottom:4px}
.sd-navitem.on{color:var(--b)}
.sd-menu .sd-navitem.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:var(--r-sm);background:var(--b)}
.sd-btn{font-size:11.5px;font-weight:700;color:#fff;background:var(--b);border-radius:var(--r-sm);padding:8px 13px;white-space:nowrap;flex:none}
.sd-btn.gh{background:transparent;color:var(--b);border:1px solid var(--bl)}
.sd-body{padding:18px 16px;display:flex;flex-direction:column;gap:13px}
.sd-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--b)}
.sd-h{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--tx);line-height:1.14}
.sd-sub{font-size:12.5px;line-height:1.55;color:var(--mu)}
.sd-imgblock{border-radius:var(--r-sm);background:linear-gradient(135deg,var(--bs),color-mix(in srgb,var(--b) 22%,var(--bs)))}

/* ═══════════ 1 · ЛЕНДИНГ — Verva (фитнес) ═══════════ */
.sd-verva .sd-hero{position:relative;padding:13px 18px 15px;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--b),var(--b2))}
.sd-verva .sd-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.sd-vlogo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sd-vlogo b{font-size:16px;font-weight:800;letter-spacing:.02em}
.sd-vlogo .pill{font-size:10px;font-weight:700;background:rgba(255,255,255,.18);border-radius:var(--r-pill);padding:5px 11px}
.sd-verva .sd-hero .eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.9}
.sd-verva .sd-hero h1,.sd-verva .sd-hero .sd-h1{font-size:21px;font-weight:800;line-height:1.06;margin:6px 0 0;letter-spacing:-.02em}
.sd-verva .sd-hero h1 em,.sd-verva .sd-hero .sd-h1 em{font-style:normal;color:var(--bl)}
.sd-verva .sd-hero p{font-size:11.5px;opacity:.92;margin-top:6px;max-width:34ch;line-height:1.45}
.sd-verva .sd-badges{display:flex;gap:8px;margin-top:10px}
.sd-verva .sd-badge{font-size:10px;font-weight:700;background:rgba(255,255,255,.16);border-radius:var(--r-pill);padding:5px 11px;display:flex;align-items:center;gap:5px}
.sd-verva .sd-badge b{color:var(--bl)}
.sd-form{position:relative;margin:-16px 16px 0;background:#fff;border:1px solid var(--sl);border-radius:var(--r-md);padding:13px;
  box-shadow:0 22px 46px -26px rgba(6,29,41,.4);display:flex;flex-direction:column;gap:7px}
.sd-form h3{font-size:14px;font-weight:800;color:var(--tx)}
.sd-form .row{display:flex;flex-direction:column;gap:5px}
.sd-form label{font-size:10px;font-weight:700;color:var(--fa);letter-spacing:.02em}
.sd-field{border:1px solid var(--sl);border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;color:var(--fa);background:#F7F8FA;min-height:18px;line-height:1.35}
.sd-field.filled{color:var(--tx);border-color:var(--bl);background:#fff}
.sd-submit{background:var(--b);color:#fff;font-size:13px;font-weight:800;text-align:center;border-radius:var(--r-sm);padding:11px;margin-top:1px}
.sd-consent{font-size:9px;color:var(--fa);text-align:center}
.sd-success{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;padding:26px;gap:13px}
.sd-success .ok{width:66px;height:66px;border-radius:50%;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--b),var(--b2));box-shadow:0 14px 30px -14px color-mix(in srgb,var(--b) 60%,transparent)}
.sd-success .ok svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40}
.sd-screen.on .sd-success .ok svg{animation:sdCheck .5s ease .1s forwards}
@keyframes sdCheck{to{stroke-dashoffset:0}}
.sd-success h3{font-size:19px;font-weight:800;color:var(--tx)}
.sd-success p{font-size:12.5px;color:var(--mu);max-width:30ch;line-height:1.5}

/* ═══════════ 2 · МНОГОСТРАНИЧНЫЙ — Меридиан (юрфирма) ═══════════ */
.sd-merid .sd-hero-txt h1,.sd-merid .sd-hero-txt .sd-h1{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--tx);line-height:1.12;max-width:20ch}
.sd-merid .sd-hero-txt p{font-size:12.5px;line-height:1.55;color:var(--mu);margin-top:9px;max-width:40ch}
.sd-merid .sd-hero-cta{display:flex;gap:9px;margin-top:13px}
.sd-cards3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.sd-card{background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:13px 11px;display:flex;flex-direction:column;gap:8px}
.sd-card .ico{width:32px;height:32px;border-radius:var(--r-sm);background:var(--bs);color:var(--b);display:grid;place-items:center}
.sd-card .ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-card b{font-size:12px;font-weight:700;color:var(--tx)}
.sd-card span{font-size:10px;color:var(--mu);line-height:1.35}
.sd-secttl{font-size:15px;font-weight:800;color:var(--tx);letter-spacing:-.01em}
.sd-rows{display:flex;flex-direction:column;gap:8px}
.sd-lrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:12px 14px}
.sd-lrow .n{width:30px;height:30px;border-radius:var(--r-sm);background:var(--bs);color:var(--b);display:grid;place-items:center;flex:none}
.sd-lrow .n svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-lrow .t{flex:1;min-width:0}
.sd-lrow .t b{display:block;font-size:12.5px;font-weight:700;color:var(--tx)}
.sd-lrow .t span{font-size:10.5px;color:var(--mu)}
.sd-lrow .p{font-size:12px;font-weight:800;color:var(--b);flex:none}
.sd-team{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sd-person{text-align:center;background:#fff;border:1px solid var(--sl);border-radius:var(--r-md);padding:14px 8px}
.sd-person .av{width:50px;height:50px;border-radius:50%;margin:0 auto 9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;
  background:linear-gradient(135deg,var(--b),var(--b2))}
.sd-person b{font-size:11.5px;font-weight:700;color:var(--tx);display:block}
.sd-person span{font-size:9.5px;color:var(--mu)}
.sd-contacts{display:flex;gap:13px}
.sd-map{flex:none;width:150px;height:150px;border-radius:var(--r-sm);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--bs),color-mix(in srgb,var(--b) 18%,var(--bs)))}
.sd-map::before{content:"";position:absolute;left:20%;top:30%;right:15%;height:2px;background:rgba(255,255,255,.7);transform:rotate(20deg)}
.sd-map::after{content:"";position:absolute;left:50%;top:46%;width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--b);box-shadow:0 6px 12px -4px color-mix(in srgb,var(--b) 60%,transparent)}
.sd-cinfo{flex:1;display:flex;flex-direction:column;gap:11px;justify-content:center}
.sd-cinfo .ci{display:flex;flex-direction:column;gap:2px}
.sd-cinfo .ci b{font-size:12.5px;font-weight:700;color:var(--tx)}
.sd-cinfo .ci span{font-size:11px;color:var(--mu)}

/* ═══════════ 3 · МАГАЗИН — Roan (кофе) ═══════════ */
.sd-roan .sd-topnav{gap:12px}
.sd-search{flex:1;max-width:150px;font-size:11px;color:var(--fa);background:#F5F6F8;border:1px solid var(--sl);border-radius:var(--r-sm);padding:8px 11px;display:flex;align-items:center;gap:7px}
.sd-search svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.sd-cart{position:relative;width:34px;height:34px;border-radius:var(--r-sm);background:var(--bs);color:var(--b);display:grid;place-items:center;flex:none}
.sd-cart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-cart b{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;border-radius:var(--r-pill);background:var(--b);color:#fff;
  font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;font-variant-numeric:tabular-nums}
.sd-chips{display:flex;gap:8px;padding:12px 16px 0}
.sd-chip{font-size:11px;font-weight:600;color:var(--mu);background:#F5F6F8;border:1px solid var(--sl);border-radius:var(--r-pill);padding:6px 13px}
.sd-chip.on{color:#fff;background:var(--b);border-color:var(--b)}
.sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px 16px}
.sd-prod{border:1px solid var(--sl);border-radius:var(--r-md);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.sd-prod .ph{height:76px;position:relative;background:linear-gradient(150deg,#C9BEEA,#7A52C4)}
.sd-prod .ph.b{background:linear-gradient(150deg,#B8A9E0,#5F3D9E)}
.sd-prod .ph.c{background:linear-gradient(150deg,#D6CCF0,#8A6BD0)}
.sd-prod .ph.d{background:linear-gradient(150deg,#C0D0F0,#5064D8)}
.sd-prod .ph .bean{position:absolute;left:50%;top:50%;width:34px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%/60% 60% 40% 40%;background:rgba(0,0,0,.18)}
.sd-prod .ph .bean::after{content:"";position:absolute;left:50%;top:8%;bottom:8%;width:2px;margin-left:-1px;background:rgba(255,255,255,.35);border-radius:var(--r-sm)}
.sd-prod .pb{padding:10px 11px;display:flex;flex-direction:column;gap:7px}
.sd-prod .pt{font-size:11.5px;font-weight:600;color:var(--tx);line-height:1.25}
.sd-prod .pp{font-size:13px;font-weight:800;color:var(--tx)}
.sd-prod .padd{font-size:11px;font-weight:700;color:var(--b);background:var(--bs);border:1px solid var(--bl);border-radius:var(--r-sm);padding:7px;text-align:center}
/* товар */
.sd-pdp{display:flex;flex-direction:column;height:100%}
.sd-pdp .top{display:flex;gap:14px;padding:16px}
.sd-pdp .ph{flex:none;width:150px;height:170px;border-radius:var(--r-md);position:relative;background:linear-gradient(150deg,#C9BEEA,#7A52C4)}
.sd-pdp .ph .bean{position:absolute;left:50%;top:50%;width:52px;height:70px;transform:translate(-50%,-50%);border-radius:50%/60% 60% 40% 40%;background:rgba(0,0,0,.2)}
.sd-pdp .ph .bean::after{content:"";position:absolute;left:50%;top:8%;bottom:8%;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.4);border-radius:var(--r-sm)}
.sd-pdp .info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sd-pdp .info .rate{font-size:10.5px;font-weight:700;color:#6D49CE}
.sd-pdp .info h3{font-size:17px;font-weight:800;color:var(--tx);line-height:1.15}
.sd-pdp .info .desc{font-size:11px;color:var(--mu);line-height:1.45}
.sd-pdp .info .pr{font-size:20px;font-weight:800;color:var(--tx)}
.sd-weights{display:flex;gap:7px}
.sd-weights span{font-size:10.5px;font-weight:600;color:var(--mu);border:1px solid var(--sl);border-radius:var(--r-sm);padding:5px 10px}
.sd-weights span.on{color:#fff;background:var(--b);border-color:var(--b)}
.sd-pdp .addbig{margin:0 16px 16px;background:var(--b);color:#fff;font-size:13px;font-weight:800;text-align:center;border-radius:var(--r-sm);padding:13px}
/* корзина */
.sd-cartscreen{padding:16px;display:flex;flex-direction:column;gap:12px;height:100%}
.sd-cartscreen h3{font-size:16px;font-weight:800;color:var(--tx)}
.sd-citem{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--sl);border-radius:var(--r-md);padding:11px 13px}
.sd-citem .th{width:48px;height:48px;border-radius:var(--r-sm);flex:none;background:linear-gradient(150deg,#C9BEEA,#7A52C4)}
.sd-citem .ci{flex:1;min-width:0}
.sd-citem .ci b{display:block;font-size:12.5px;font-weight:700;color:var(--tx)}
.sd-citem .ci span{font-size:10.5px;color:var(--mu)}
.sd-citem .cp{font-size:13px;font-weight:800;color:var(--tx)}
.sd-ctotal{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px dashed var(--sl);font-size:13px;color:var(--mu)}
.sd-ctotal b{font-size:17px;font-weight:800;color:var(--tx)}
.sd-checkout{margin-top:auto;background:var(--b);color:#fff;font-size:13px;font-weight:800;text-align:center;border-radius:var(--r-sm);padding:13px}

/* ═══════════ 4 · ВЕБ-ПРИЛОЖЕНИЕ — Flowdesk (трекер) ═══════════ */
.sd-flow .sd-frame,.sd-flow{}
.sd-app{display:flex;flex:1;min-height:0}
.sd-side{width:128px;flex:none;background:#141A2E;padding:14px 11px;display:flex;flex-direction:column;gap:4px}
.sd-side .brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:13px;margin-bottom:10px}
.sd-side .brand .m{width:20px;height:20px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--b),var(--b2));display:grid;place-items:center}
.sd-side .brand .m svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2}
.sd-tab{display:flex;align-items:center;gap:9px;font-size:11.5px;color:rgba(255,255,255,.6);padding:9px 9px;border-radius:var(--r-sm)}
.sd-tab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sd-tab.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.sd-main{flex:1;min-width:0;background:#F5F6F9;position:relative;overflow:hidden;display:flex;flex-direction:column}
.sd-apptop{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:#fff;border-bottom:1px solid var(--sl)}
.sd-apptop b{font-size:14px;font-weight:800;color:var(--tx)}
.sd-apptop .av{width:26px;height:26px;border-radius:50%;background:var(--bs);color:var(--b);display:grid;place-items:center;font-size:11px;font-weight:800}
.sd-appscreens{position:relative;flex:1;min-height:0}
.sd-appscreen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;padding:13px 14px;overflow:hidden;display:flex;flex-direction:column;gap:11px}
.sd-appscreen > .sd-panel:last-child,.sd-appscreen > .sd-kanban,.sd-appscreen > .sd-treport,.sd-appscreen > .sd-appteam{flex:1;min-height:0}
.sd-kanban{grid-template-rows:1fr;height:auto}
.sd-kcol{min-height:0}
.sd-panel{display:flex;flex-direction:column}
.sd-bars{flex:1;min-height:60px;align-items:flex-end}
.sd-treport .sd-panel{flex:1;min-height:0}
.sd-appscreen.on{opacity:1;visibility:visible}
.sd-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:11px}
.sd-kpi{background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:11px 9px}
.sd-kpi b{display:block;font-size:17px;font-weight:800;color:var(--tx);letter-spacing:-.02em}
.sd-kpi span{font-size:9px;color:var(--fa)}
.sd-kpi em{font-style:normal;font-size:9px;font-weight:700;color:var(--b)}
.sd-panel{background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:12px}
.sd-panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sd-panel .ph b{font-size:12px;font-weight:700;color:var(--tx)}
.sd-panel .ph span{font-size:10px;color:var(--fa)}
.sd-bars{display:flex;align-items:flex-end;gap:8px;height:74px}
.sd-bars i{flex:1;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--bs);display:block}
.sd-bars i.on{background:linear-gradient(var(--b2),var(--b))}
.sd-kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;height:100%}
.sd-kcol{background:#EEF0F4;border-radius:var(--r-sm);padding:9px 8px;display:flex;flex-direction:column;gap:7px}
.sd-kcol .kt{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);display:flex;align-items:center;justify-content:space-between}
.sd-kcol .kt i{font-style:normal;color:var(--fa)}
.sd-kcard{background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:9px 9px;display:flex;flex-direction:column;gap:7px}
.sd-kcard .kl{height:6px;border-radius:var(--r-sm);background:#E2E6EC;width:80%}
.sd-kcard .kl.s{width:55%}
.sd-kcard .kb{display:flex;align-items:center;justify-content:space-between}
.sd-kcard .tag{font-size:8px;font-weight:800;border-radius:var(--r-sm);padding:2px 6px}
.sd-kcard .tag.a{color:var(--b);background:var(--bs)}
.sd-kcard .tag.g{color:#0FB87E;background:rgba(15,184,126,.12)}
.sd-kcard .tag.o{color:#6D49CE;background:rgba(109,73,206,.12)}
.sd-kcard .kav{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--b),var(--b2))}
.sd-treport{display:flex;flex-direction:column;gap:11px;height:100%}
.sd-tstats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sd-tstat{background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:11px 12px}
.sd-tstat b{display:block;font-size:18px;font-weight:800;color:var(--tx)}
.sd-tstat span{font-size:9.5px;color:var(--fa)}
.sd-appteam{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--sl);border-radius:var(--r-sm);padding:4px 13px}
.sd-atm{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:11px}
.sd-atm + .sd-atm{border-top:1px solid var(--sl)}
.sd-atm .aav{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.sd-atm .an{flex:1;color:var(--tx);font-weight:600}
.sd-atm .ar{font-size:9.5px;color:var(--fa)}
.sd-atm .ast{font-size:8.5px;font-weight:800;color:#0FB87E;background:rgba(15,184,126,.12);border-radius:var(--r-sm);padding:2px 7px}

@media (prefers-reduced-motion:reduce){
  .sd-cursor,.sd-toast{display:none}
  .sd-screen{transition:none}.sd-appscreen{transition:none}
  .sd-success .ok svg{stroke-dashoffset:0;animation:none}
}

/* мобильные версии — превью-сайт видно и на телефоне */
@media(max-width:860px){
  .phero .process-visual{display:block!important;margin-top:clamp(22px,6vw,38px)}
}

/* веб-приложение (Flowdesk) на узком экране: уже сайдбар + компактный дашборд */
@media(max-width:520px){
  .sd-flow .sd-side{width:96px;padding:12px 8px}
  .sd-flow .sd-side .brand{font-size:11px;gap:6px;margin-bottom:8px}
  .sd-flow .sd-side .brand .m{width:17px;height:17px}
  .sd-flow .sd-tab{font-size:10.5px;padding:8px 7px;gap:7px}
  .sd-flow .sd-tab svg{width:13px;height:13px}
  .sd-flow .sd-apptop{padding:10px 12px}
  .sd-flow .sd-apptop b{font-size:13px}
  .sd-flow .sd-appscreen{padding:11px}
  .sd-flow .sd-kpis{gap:7px}
  .sd-flow .sd-kpi{padding:9px 6px}
  .sd-flow .sd-kpi b{font-size:15px}
  .sd-flow .sd-kpi span{font-size:8.5px}
  .sd-flow .sd-kpi em{display:none}
  .sd-flow .sd-kanban{gap:7px}
  .sd-flow .sd-kcol{padding:8px 6px}
  .sd-flow .sd-kcard{padding:8px 7px}
}

/* ══════════════════════════════════════════════════════════════════════════
   🔴 ЗАХОД 9 (28.07.2026) — ЭКРАНЫ НЕ ПОМЕЩАЛИСЬ В РАМКУ

   Рамка демо имеет ФИКСИРОВАННУЮ высоту 470px, а экраны лежат в ней
   `position:absolute; inset:0` при `overflow:hidden`. Содержимое, которое
   выше видимой области, просто срезалось — молча, на ВСЕХ ширинах, а не
   только на узких. Замерено скриптом (scrollHeight против clientHeight):

     /sayty/magaziny/      экран «catalog»  446px в 356px → срезано  90px
                           на 360px         479px в 356px → срезано 123px
     /sayty/biznes-sajty/  экран «services» 398px в 367px → срезано  31px
     /sayty/lendingi/      экран «form»     427px в 417px → срезано  10px (≤390px)
     /sayty/veb-prilozheniya/                              → чисто

   Последствие видно глазом: на «магазине» у нижнего ряда товаров отрезаны
   кнопки «В корзину» — а курсор демо по ним «кликает», потому что координаты
   он берёт из живого getBoundingClientRect() цели. На лендинге на 360–390px
   курсор уезжал ЗА пределы рамки по той же причине.

   Правим не высоту рамки (она держит композицию первого экрана), а плотность
   самих экранов — чтобы содержимое влезало с запасом на всех ширинах.
   ══════════════════════════════════════════════════════════════════════════ */

/* Магазин Roan, каталог: −90px. Карточка товара ужимается по вертикали,
   ширина и читаемость не меняются. */
.sd-roan .sd-chips{padding:9px 16px 0}
.sd-roan .sd-grid{gap:9px;padding:9px 16px 10px}
.sd-roan .sd-prod .ph{height:54px}
.sd-roan .sd-prod .ph .bean{width:26px;height:34px}
.sd-roan .sd-prod .pb{padding:7px 9px;gap:4px}
.sd-roan .sd-prod .pt{font-size:11px;line-height:1.2}
.sd-roan .sd-prod .pp{font-size:12.5px}
.sd-roan .sd-prod .padd{padding:5px;font-size:10.5px}

/* Юрфирма «Меридиан», экран «Услуги»: −31px на четырёх строках списка. */
.sd-merid [data-screen="services"] .sd-rows{gap:7px}
.sd-merid [data-screen="services"] .sd-lrow{padding:8px 14px}

/* Лендинг Verva, экран формы на узких: −10px. */
@media(max-width:414px){
  .sd-verva [data-screen="form"] .sd-hero{padding-top:14px;padding-bottom:14px}
  .sd-verva [data-screen="form"] .sd-form{gap:8px}
}
/* На 360px названия товаров переносятся во вторую строку — ещё −14px. */
@media(max-width:380px){
  .sd-roan .sd-grid{gap:8px;padding:8px 12px 9px}
  .sd-roan .sd-prod .ph{height:48px}
  .sd-roan .sd-prod .pt{font-size:10.5px}
}