/* Страницы продуктов: /crm/, /dashboard/, /komanda/ (14.10.2026).
   Общее с главной (шрифт, цвета, кнопки, шапка, подвал, вопросы) — копия стилей
   landing/index.html: правите общее там — правьте и здесь. Цвет продукта — --pc на body
   (.p-crm, .p-dash, .p-team). Имя файла с версией: заменили содержимое крупно — новое имя. */
  /* Manrope — шрифт интерфейса продуктов; лежит у нас (fonts/, лицензия OFL),
     без запросов к Google. ₽ — в latin-ext. */
  @font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
    src:url(/fonts/manrope-cyrillic-v1.woff2) format("woff2");
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
    src:url(/fonts/manrope-latin-ext-v1.woff2) format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
    src:url(/fonts/manrope-latin-v1.woff2) format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

  :root{
    --bg:#ffffff; --bg-soft:#f6f8fb; --bg-card:#ffffff;
    --text:#0f172a; --text-2:#334155; --muted:#475569; --muted-2:#5b6b82;
    --line:#e5eaf1; --line-strong:#cfd8e5;
    --brand:#2563eb; --brand-strong:#1d4ed8; --brand-soft:#eff4ff;
    --accent:#7c3aed; --accent-strong:#6d28d9; --accent-soft:#f3eeff; --accent-text:#5b21b6;
    --ok:#16a34a; --ok-soft:#ecfdf3; --ok-text:#166534; --ok-chip:#dcfce7;
    --warn-soft:#fff7ed; --warn-text:#9a3412;
    --ink:#0f172a; --ink-text:#ffffff; --ink-muted:#cbd5e1;
    --shadow:0 1px 3px rgba(16,32,64,.06),0 8px 24px rgba(16,32,64,.06);
    --shadow-lg:0 16px 48px rgba(15,23,42,.14);
    --radius:16px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0b1220; --bg-soft:#0f1729; --bg-card:#111a2e;
      --text:#e8eef7; --text-2:#c7d2e3; --muted:#9fb0c9; --muted-2:#9fb0c9;
      --line:#1f2b45; --line-strong:#2a3957;
      --brand:#5b8cff; --brand-strong:#7aa2ff; --brand-soft:#132038;
      --accent:#a78bfa; --accent-strong:#c4b5fd; --accent-soft:#1c1633; --accent-text:#c4b5fd;
      --ok:#4ade80; --ok-soft:#0f2a1c; --ok-text:#86efac; --ok-chip:#123621;
      --warn-soft:#2a1a0c; --warn-text:#fdba74;
      --ink:#16223b; --ink-text:#ffffff; --ink-muted:#b6c3d8;
      --shadow:0 1px 3px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
      --shadow-lg:0 16px 48px rgba(0,0,0,.45);
    }
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:72px}
  body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  picture{display:contents}
  img{max-width:100%}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  .ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

  /* Кнопки */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;height:46px;padding:0 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;background:none;color:inherit}
  .btn-primary{background:var(--brand);color:#fff}
  .btn-primary:hover{background:var(--brand-strong)}
  .btn-ghost{background:var(--bg-card);border-color:var(--line-strong);color:var(--text)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn-lg{height:54px;padding:0 26px;font-size:17px}
  .btn .ic{width:18px;height:18px}
  .btn .ic.fill{fill:currentColor;stroke:none}
  .btn .chev{width:16px;height:16px;color:var(--muted)}

  /* «Чердак»: вторичные ссылки над шапкой */
  .topbar{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:13px}
  .topbar .wrap{height:36px;display:flex;align-items:center;justify-content:flex-end;gap:24px}
  .topbar a{color:var(--text-2);font-weight:600}
  .topbar a.plain{color:var(--muted);font-weight:500}
  .topbar a:hover{color:var(--brand)}
  @media(max-width:900px){.topbar{display:none}}

  /* Шапка */
  header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .nav{height:68px;display:flex;align-items:center;gap:28px}
  .logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
  .logo img{display:block;height:32px;width:auto}
  .nav-links{display:flex;gap:26px;flex-grow:1}
  .nav-links a{font-size:15px;font-weight:600;color:var(--text-2)}
  .nav-links a:hover{color:var(--brand)}
  .nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
  .nav-cta .btn{height:44px;padding:0 16px}
  .login{font-size:15px;font-weight:600;color:var(--text);padding:0 8px}
  .burger{display:none}
  .burger-box{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;background:var(--bg-card)}
  .burger-box span{display:block;width:18px;height:2px;background:var(--text);position:relative}
  .burger-box span::before,.burger-box span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
  .burger-box span::before{top:-6px}.burger-box span::after{top:6px}
  @media(max-width:1000px){.nav-links{display:none}}
  @media(max-width:760px){
    .nav{height:60px;gap:10px}
    .nav-cta .login,.nav-cta .try{display:none}
    .burger-box{display:flex}
    .nav-cta .btn{height:44px;padding:0 12px}
  }
  /* Мобильное меню: чекбокс и меню — прямые дети body. У шапки backdrop-filter,
     он делает её containing block для position:fixed — внутри шапки меню
     накрывало бы только её саму (урок 2026-07-31). */
  .mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding:70px 22px 28px}
  .burger:checked ~ .mobile-menu{display:block}
  .mobile-menu a{display:flex;align-items:center;min-height:48px;font-size:18px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)}
  .mobile-menu a.sec{font-size:16px;font-weight:600;color:var(--text-2)}
  .mobile-menu .mm-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
  .mobile-menu .mm-cta a{border:0;min-height:0}
  .mobile-menu .mm-cta .btn{width:100%;height:52px;font-size:16px}
  .mobile-menu .mm-cta .btn-ghost{border:1px solid var(--line-strong)}
  .mm-close{position:absolute;top:12px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;font-size:20px;color:var(--text)}
  /* Секции */
  .block{padding:88px 0}
  .block.soft{background:var(--bg-soft)}
  .title{font-size:40px;line-height:1.15;font-weight:800;letter-spacing:-.02em;text-align:center}
  .lede{font-size:18px;color:var(--muted);text-align:center;max-width:720px;margin:14px auto 0}
  .fine{font-size:14px;color:var(--muted-2);text-align:center;margin-top:16px}
  @media(max-width:760px){.block{padding:52px 0}.title{font-size:28px}.lede{font-size:16px}}

  /* Первый экран страницы продукта */
  .hero{background:var(--bg-soft);padding:64px 0 72px}
  .hero h1{font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:16px 0 18px;text-wrap:balance}
  .hero .sub{font-size:19px;color:var(--muted);max-width:560px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  @media(max-width:760px){
    .hero{padding:32px 0 44px}
    .hero h1{font-size:32px;margin:12px 0 14px}
    .hero .sub{font-size:16px}
    .hero-cta .btn{width:100%}
  }
  .tag{align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700}
  .tag.blue{background:var(--brand-soft);color:var(--brand-strong)}
  .tag.violet{background:var(--accent-soft);color:var(--accent-strong)}
  .tag.green{background:var(--ok-soft);color:var(--ok-text)}
  .checks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
  .checks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5}
  .checks li::before{content:"";flex:0 0 22px;height:22px;margin-top:1px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
  .checks.blue li::before{color:var(--brand)}
  .checks.violet li::before{color:var(--accent)}
  .checks.green li::before{color:var(--ok)}
  .mod{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid var(--line-strong);
    font-size:12px;font-weight:700;line-height:1.5;color:var(--muted-2);vertical-align:1px;white-space:nowrap}
  @media(max-width:860px){.checks li{font-size:15px}}
  figure.shot{background:var(--bg-card);border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
  figure.shot img{display:block;width:100%;height:auto;background:var(--bg-soft)}
  .js figure.shot img{opacity:0;transition:opacity .35s ease}
  .js figure.shot img.ok{opacity:1}
  figure.shot figcaption{font-size:15px;color:var(--muted);padding:12px 16px;border-top:1px solid var(--line)}
  /* Ролик «как гифка» поверх кадра: проявляется, когда пошло воспроизведение;
     до этого (и без движения/при экономии трафика) виден сам кадр. */
  figure.shot .frame{position:relative}
  figure.shot video.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none;background:transparent}
  figure.shot video.clip.on{opacity:1}
  /* Шаг 5. Старт */
  .steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
  .step3 .num{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
  .step3 h3{font-size:22px;font-weight:700;margin:12px 0 6px}
  .step3 p{font-size:16px;color:var(--muted)}
  @media(max-width:860px){.steps3{grid-template-columns:1fr;gap:20px}.step3{display:grid;grid-template-columns:40px 1fr;column-gap:14px}.step3 .num{width:40px;height:40px;font-size:18px;grid-row:span 2}.step3 h3{font-size:18px;margin:0 0 4px}.step3 p{font-size:15px}}
  /* Шаг 6. Доверие: кейс и факты */
  .case{padding:32px;border-radius:18px;background:var(--bg-card);border:1px solid var(--line-strong)}
  .case .k{font-size:13px;font-weight:800;color:var(--ok-text);text-transform:uppercase;letter-spacing:.04em}
  .case-h{font-size:32px;line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:8px 0 10px}
  .case-lede{font-size:17px;color:var(--muted);max-width:760px}
  .case-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;margin-top:28px;align-items:start}
  .case-steps{list-style:none;display:flex;flex-direction:column;gap:22px}
  .case-steps>li{display:flex;gap:16px;align-items:flex-start}
  .case-steps>li>div{min-width:0}
  .cs-n{flex:0 0 36px;height:36px;border-radius:10px;background:var(--ok-chip);color:var(--ok-text);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
  .case-steps h3{font-size:18px;font-weight:800;margin:5px 0 6px}
  .case-steps p{font-size:16px;color:var(--text-2)}
  .case-errs{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:15.5px;color:var(--text-2)}
  .case-side img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line-strong);box-shadow:var(--shadow)}
  .case-cap{font-size:13px;color:var(--muted-2);margin:8px 0 16px}
  .cnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .cnums.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnums>div{padding:14px;border-radius:12px;background:var(--bg-soft)}
  .cnums>div.bad{background:var(--warn-soft)}
  .cnums>div.bad b{color:var(--warn-text)}
  .cnums>div.good{background:var(--ok-soft)}
  .cnums>div.good b{color:var(--ok-text)}
  .cnums b{display:block;font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--text)}
  .cnums span{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:6px}
  .case-after{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-text)}
  @media(max-width:960px){.case-grid{grid-template-columns:1fr;gap:28px}}
  @media(max-width:760px){.case{padding:20px}.case-h{font-size:24px}.case-steps p{font-size:15px}.cnums{gap:8px}.cnums>div{padding:10px}.cnums b{font-size:19px}.cnums span{font-size:12px}}
  /* Шаг 8. Призыв, вопросы, оплата */
  .cta-band{padding:56px;border-radius:24px;background:var(--ink);color:var(--ink-text);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
  .cta-band h2{font-size:40px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
  .cta-band p{font-size:18px;color:var(--ink-muted)}
  .cta-band .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}
  .cta-band .btn-ghost{background:transparent;border-color:#475569;color:#fff}
  .cta-band .btn-ghost .chev{color:var(--ink-muted)}
  .cta-band .demo-pop{color:var(--text)}
  .faq-h{font-size:28px;font-weight:800;letter-spacing:-.01em;margin:56px 0 18px}
  .faq{display:flex;flex-direction:column;gap:12px}
  .faq details{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:0 22px}
  .faq summary{cursor:pointer;font-weight:700;font-size:16px;min-height:56px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:22px;font-weight:600;color:var(--muted);transition:.15s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .a{color:var(--muted);font-size:15px;padding:0 0 17px}
  .faq .a a{color:var(--brand-strong)}
  .pay-lede{font-size:15px;color:var(--muted);margin:-8px 0 16px}
  @media(max-width:760px){.cta-band{padding:28px 20px;border-radius:20px}.cta-band h2{font-size:26px}.cta-band p{font-size:15px}.cta-band .row,.cta-band .row .btn,.cta-band .demo-pick{width:100%}.faq-h{font-size:22px;margin-top:40px}.faq details{padding:0 16px}.faq summary{font-size:15.5px}}
  /* Подвал */
  footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:56px 0 36px;color:var(--muted);font-size:14px}
  .foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;margin-bottom:28px}
  .foot-brand p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--muted)}
  .foot-col h5{color:var(--text);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
  .foot-col a{display:flex;align-items:center;min-height:36px;color:var(--text-2);font-size:15px}
  .foot-col a:hover{color:var(--brand)}
  .foot-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}
  @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:18px 16px}.foot-brand{grid-column:1/-1}.foot-col a{min-height:44px;font-size:14px}}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:10px}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal,.reveal.in{opacity:1;transform:none;transition:none}
    .js figure.shot img{transition:none}
  }
  /* Своё у страниц продуктов */
  .ch .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center}
  @media(max-width:960px){.ch .wrap{grid-template-columns:1fr;gap:28px}}
  .ch .tag{margin-bottom:6px}
  .ch .note{font-size:14.5px;color:var(--muted);margin-top:14px}
  .ch figure.shot figcaption{font-size:14px}
  .cfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
  @media(max-width:960px){.cfs{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.cfs{grid-template-columns:1fr}}
  .cf{display:flex;gap:14px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:20px}
  .cf > .ic{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:color-mix(in srgb,var(--pc) 14%,transparent);color:var(--pc)}
  .cf h3{font-size:17px;font-weight:700;margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
  .cf p{font-size:15px;color:var(--muted)}
  .cprice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:40px}
  @media(max-width:860px){.cprice{grid-template-columns:1fr}}
  .cp{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:24px}
  .cp h3{font-size:20px;font-weight:800;margin-bottom:6px}
  .cp .big{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:6px 0}
  .cp p{color:var(--muted);font-size:15px}
  .cp ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
  .cp li{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-top:1px solid var(--line);padding-top:10px}
  .cp li b{font-weight:700}
  .cp li span{color:var(--muted);text-align:right}
  .cwith{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:36px}
  @media(max-width:760px){.cwith{grid-template-columns:1fr}}
  .cwith a{display:block;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:22px}
  .cwith a:hover{border-color:var(--brand)}
  .cwith h3{font-size:18px;font-weight:700;margin-bottom:6px}
  .cwith p{color:var(--muted);font-size:15px}
  .cwith .go{display:inline-block;margin-top:10px;font-weight:700;color:var(--brand)}
  .crumbs{font-size:14px;color:var(--muted);margin-bottom:14px}
  .crumbs a{color:var(--brand)}
  .p-crm{--pc:var(--ok);--pc-text:var(--ok-text)}
  .p-dash{--pc:var(--brand);--pc-text:var(--brand-strong)}
  .p-team{--pc:var(--accent);--pc-text:var(--accent-strong)}
  .tag.pc{background:color-mix(in srgb,var(--pc) 12%,transparent);color:var(--pc-text)}
  .checks.pc li::before{color:var(--pc)}
  /* Разделы продукта: кадр с роликом и текст, через раз зеркально */
  .zz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:44px;align-items:center;margin-top:56px}
  .zz.rev > .zz-t{order:2}
  .zz-t .tag + .mod{margin-left:8px}
  .zz-t h3{font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:8px 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .zz-t > p{font-size:16.5px;color:var(--muted)}
  .zz-t .checks{margin-top:14px}
  .zz-t .price{margin-top:14px;font-size:14px;color:var(--muted-2)}
  @media(max-width:960px){.zz{grid-template-columns:1fr;gap:20px;margin-top:40px}.zz.rev > .zz-t{order:0}.zz-t h3{font-size:22px}}
  .cp .big small{font-size:16px;font-weight:600;color:var(--muted-2)}