/* Страницы модулей: /kedo/, /performance/, /engagement/, /time/.
   Подключается после styles-lms.css (шрифты, шапка, мокапы lms-*/mk-*, форма демо, FAQ).
   У каждой страницы своя композиция первого экрана и свои секции — mod-*. */

.page--module {
  background-color: #ffffff;
}
.page--module #header:not(.scrolled) {
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ------------------------------ общие элементы ------------------------------ */
.mod-hero {
  position: relative;
  overflow: hidden;
  overflow: clip; /* выступающий скриншот не должен прокручивать блок вбок */
  padding: 128px 0 88px;
}
.mod-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.mod-center {
  max-width: 900px;
  text-align: center;
}
.mod-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: rgba(89, 157, 21, 0.12);
  font-family: var(--lms-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lms-accent);
}
.mod-hero h1 {
  margin-top: 18px;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--lms-ink);
}
.mod-hero h1 em {
  display: block;
  font-style: normal;
  color: var(--lms-accent-bright);
}
.mod-lead {
  max-width: 560px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.55;
  color: #44515c;
}
.mod-center .mod-lead {
  margin-left: auto;
  margin-right: auto;
}
.mod-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  list-style: none;
}
.mod-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: #1f2937;
}
.mod-checks svg {
  flex: none;
  margin-top: 2px;
  padding: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--green-100);
  color: var(--lms-accent);
}
.mod-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}
.mod-actions--center {
  justify-content: center;
}
.mod-actions .lms-cta {
  min-width: 0;
}
.mod-link {
  font-family: var(--lms-head);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--lms-accent);
}
.mod-link:hover {
  text-decoration: underline;
}
.mod-section {
  padding: 96px 0;
}
.mod-section--soft {
  background-color: #f6f8f4;
}
.mod-section--warm {
  background: linear-gradient(180deg, #fff8f0, #fdf1f4);
}
.mod-h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--lms-ink) !important;
}
.mod-h2 em {
  font-style: normal;
  color: var(--lms-accent-bright);
}
.mod-h2--center {
  text-align: center;
}
.mod-sub {
  max-width: 620px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lms-muted);
}
.mod-sub--left {
  margin: 16px 0 24px;
  text-align: left;
}
.mod-two {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.mod-two--center {
  align-items: center;
}
/* окно приложения внутри обычной вёрстки (не на холсте) */
.mod-win {
  height: auto;
}
.mk .lms-panel,
.mod-win .lms-panel {
  border: 1px solid #e6e9ed;
  background-color: #ffffff;
}

/* полоса логотипов на светлом фоне */
.mod-logos {
  padding: 28px 0;
  border-top: 1px solid #edf0ea;
  border-bottom: 1px solid #edf0ea;
}
.mod-logos__row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.mod-logos__row > p {
  flex: none;
  font-family: var(--lms-head);
  font-size: 16px;
  line-height: 1.3;
  color: var(--lms-muted);
}
.mod-logos__row b {
  color: var(--lms-ink);
}
.mod-logos .ao-logos__list img {
  height: 28px;
}

/* шаги процесса */
.mod-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
  list-style: none;
  counter-reset: step;
}
.mod-steps li {
  position: relative;
  padding: 26px 22px;
  border: 1px solid #e6ebe4;
  border-radius: 20px;
  background-color: #ffffff;
  counter-increment: step;
}
.mod-steps li::after {
  content: "0" counter(step);
  position: absolute;
  right: 20px;
  top: 18px;
  font-family: var(--lms-head);
  font-size: 30px;
  font-weight: 800;
  color: #edf3e6;
}
.mod-step__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--green-100);
  color: var(--lms-accent);
}
.mod-steps b {
  display: block;
  margin-top: 16px;
  font-family: var(--lms-head);
  font-size: 18px;
  color: var(--lms-ink);
}
.mod-steps p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lms-muted);
}
.mod-steps--line li:not(:last-child)::before {
  content: "";
  position: absolute;
  right: -19px;
  top: 50px;
  width: 20px;
  height: 2px;
  background-color: var(--green-300);
}

/* зигзаг: текст и мокап меняются сторонами */
.mod-zzs {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.mod-zz {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.mod-zz--rev .mod-zz__text {
  order: 2;
}
.mod-num {
  font-family: var(--lms-hand);
  font-size: 34px;
  font-weight: 600;
  color: var(--lms-accent-bright);
}
.mod-zz h3,
.mod-panel__text h3 {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--lms-ink);
}
.mod-zz__text > p:not(.mod-num),
.mod-panel__text > p {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #44515c;
}
.mod-zz__media {
  padding: 26px;
  border-radius: 28px;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(107, 157, 206, 0.16), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(141, 198, 63, 0.16), transparent 60%),
    #f4f7f5;
}

/* ============================================================ КЭДО */
.mod-hero--kedo {
  background:
    radial-gradient(45% 55% at 85% 35%, rgba(107, 157, 206, 0.22), transparent 70%),
    radial-gradient(40% 50% at 10% 80%, rgba(141, 198, 63, 0.14), transparent 70%),
    linear-gradient(rgba(3, 20, 32, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(3, 20, 32, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    #f9fbf8;
}
.mod-docs {
  position: relative;
  height: 520px;
  border-radius: 32px;
  background: #6b9dce url("/images/lms/kedo.svg?v=1") center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(30, 70, 110, 0.22);
}
.mod-paper {
  position: absolute;
  left: 13%;
  top: 60px;
  width: 52%;
  padding: 24px 24px 22px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 20px 50px rgba(8, 34, 60, 0.25);
  transform: rotate(-3deg);
}
.mod-paper--back {
  left: 22%;
  top: 34px;
  opacity: 0.85;
  transform: rotate(5deg);
}
.mod-stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 14px;
  padding: 10px 14px;
  border: 2px solid #22a04b;
  border-radius: 10px;
  color: #16803c;
  transform: rotate(-4deg);
}
.mod-stamp span {
  display: flex;
  flex-direction: column;
}
.mod-stamp b {
  font-size: 13px;
}
.mod-stamp em {
  font-style: normal;
  font-size: 11px;
}
.mod-phone {
  position: absolute;
  right: 7%;
  bottom: -40px;
  width: 210px;
  height: 380px;
  padding: 12px 14px;
  border: 7px solid #f1f3f5;
  border-radius: 34px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #dfe3e8, 0 24px 50px rgba(8, 34, 60, 0.3);
  transform: rotate(4deg);
}
.mod-phone__t {
  font-family: var(--lms-head);
  font-size: 14px;
  font-weight: 800;
  color: var(--lms-ink);
}
.mod-phone__doc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border-radius: 10px;
  background-color: #f3f9ec;
  color: var(--lms-accent);
}
.mod-phone__doc span {
  display: flex;
  flex-direction: column;
}
.mod-phone__doc b {
  font-size: 12px;
  color: var(--lms-ink);
}
.mod-phone__doc em {
  font-style: normal;
  font-size: 10.5px;
  color: #6b7280;
}
.mod-phone__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  margin-top: 18px;
  border-radius: 10px;
  background-color: var(--lms-accent-bright);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.mod-route-chip {
  position: absolute;
  left: 6%;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 14px 34px rgba(8, 34, 60, 0.2);
}
.mod-route-chip img {
  border-radius: 50%;
}
.mod-route-chip span {
  display: flex;
  flex-direction: column;
}
.mod-route-chip b {
  font-size: 13px;
  color: #16803c;
}
.mod-route-chip em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7280;
}
.mod-doclist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
}
.mod-doclist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e6ebe4;
  border-radius: 14px;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  color: var(--lms-ink);
}
.mod-doclist svg {
  color: var(--lms-accent);
}
.mod-doclist li:last-child {
  border-style: dashed;
  color: var(--lms-accent);
}
.mod-table {
  max-width: 1000px;
  margin: 36px auto 0;
  border: 1px solid #e6ebe4;
}

/* ============================================================ Эффективность */
.mod-hero--dark {
  padding-bottom: 0;
  background:
    linear-gradient(180deg, rgba(9, 24, 18, 0.92), rgba(12, 32, 22, 0.78)),
    #0e2318 url("/images/lms/performance.svg?v=1") center bottom / cover no-repeat;
  color: #ffffff;
}
.page--module .mod-hero--dark h1 {
  color: #ffffff !important;
}
.mod-hero--dark h1 em {
  color: var(--green-300);
}
.mod-hero--dark .mod-lead {
  color: rgba(255, 255, 255, 0.78);
}
.mod-hero--dark .mod-eyebrow {
  background-color: rgba(141, 198, 63, 0.16);
  color: var(--green-300);
}
.mod-cta--light {
  background-color: #ffffff;
  color: var(--lms-ink);
}
.mod-cta--light:hover {
  background-color: #eef6e5;
}
.mod-link--light {
  color: var(--green-300);
}
.mod-okr {
  position: relative;
  padding-bottom: 40px;
}
.mod-okr__card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.mod-okr__t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--lms-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--lms-ink);
}
.mod-okr__float {
  position: absolute !important;
  right: -24px;
  bottom: 0;
  width: 230px;
}
.mod-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 72px !important;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}
.mod-strip li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.mod-strip li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 0 34px;
}
.mod-strip b {
  font-family: var(--lms-head);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
}
.mod-strip span {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.6);
}
.mod-cycle {
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.mod-cycle::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 2px dashed var(--green-200);
  border-radius: 50%;
}
.mod-cycle__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 170px;
  margin-left: -85px;
  transform: translateY(-50%);
  text-align: center;
}
.mod-cycle__core b {
  font-family: var(--lms-head);
  font-size: 17px;
  line-height: 1.2;
  color: var(--lms-ink);
}
.mod-cycle ol {
  list-style: none;
}
.mod-cycle li {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
  margin: -42px 0 0 -65px;
  text-align: center;
  transform: rotate(calc(var(--i) * 72deg - 90deg)) translate(min(185px, 37vw)) rotate(calc(var(--i) * -72deg + 90deg));
}
.mod-cycle li span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 12px 30px rgba(16, 35, 26, 0.12);
  color: var(--lms-accent);
}
.mod-cycle li b {
  font-family: var(--lms-head);
  font-size: 14px;
  color: var(--lms-ink);
}
.mod-tabs {
  margin-top: 40px;
}
.mod-tabs__bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto;
  padding: 5px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.mod-tab {
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: var(--lms-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--lms-muted);
  cursor: pointer;
}
.mod-tab.is-active {
  background-color: var(--lms-ink);
  color: #ffffff;
}
.mod-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}
.mod-panel[hidden] {
  display: none;
}
.mod-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.mod-role {
  padding: 28px;
  border-radius: 24px;
  background-color: #f6f8f4;
}
.mod-role:nth-child(2) {
  background-color: #eef4fa;
}
.mod-role:nth-child(3) {
  background-color: #fff6ec;
}
.mod-role h3 {
  font-size: 21px;
  font-weight: 800;
}
.mod-role > p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lms-muted);
}

/* ============================================================ Вовлечённость */
.mod-hero--sky {
  padding-bottom: 120px;
  background: #b9a9d0 url("/images/lms/engagement.svg?v=1") center bottom / cover no-repeat;
}
.mod-hero--sky .mod-hero__text {
  padding: 34px;
  border-radius: 28px;
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mod-gauge {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 80px rgba(60, 40, 90, 0.25);
}
.mod-gauge__t {
  font-family: var(--lms-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--lms-ink);
}
.mod-gauge__dial {
  position: relative;
  width: 280px;
  height: 150px;
  margin: 20px auto 0;
  overflow: hidden;
  text-align: center;
}
.mod-gauge__arc {
  position: absolute;
  inset: 0 0 -130px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #ef8a8a 0 29deg, #f6c35c 29deg 76deg, #599d15 76deg 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
  mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
}
.mod-gauge__dial b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  font-family: var(--lms-head);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--lms-ink);
}
.mod-gauge__dial em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #16803c;
}
.mod-gauge__legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  list-style: none;
  font-size: 13px;
  color: var(--lms-muted);
}
.mod-gauge__legend li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mod-gauge__legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mod-gauge__legend b {
  color: var(--lms-ink);
}
.mod-gauge .is-green { background-color: #599d15; }
.mod-gauge .is-amber { background-color: #f6c35c; }
.mod-gauge .is-red { background-color: #ef8a8a; }
.mod-gauge__pulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 16px;
  background-color: #f6f2fb;
}
.mod-gauge__pulse p:first-child {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  color: var(--lms-muted);
}
.mod-gauge__pulse b {
  font-size: 14px;
  color: var(--lms-ink);
}
.mod-gauge__pulse .mk-emoji {
  gap: 4px;
  margin: 0;
}
.mod-heat {
  padding: 24px;
  border: 1px solid #e6ebe4;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 16px 40px rgba(16, 35, 26, 0.06);
}
.mod-heat__head,
.mod-heat li {
  display: grid;
  grid-template-columns: 110px repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}
.mod-heat__head {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #9aa3ad;
}
.mod-heat ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}
.mod-heat li b {
  font-size: 13px;
  color: var(--lms-ink);
}
.mod-heat li i,
.mod-heat__legend i {
  height: 34px;
  border-radius: 8px;
}
.mod-heat--2 { background-color: #f4a7a7; }
.mod-heat--3 { background-color: #f9d98c; }
.mod-heat--4 { background-color: #b9dd8f; }
.mod-heat--5 { background-color: #6fb33a; }
.mod-heat__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--lms-muted);
}
.mod-heat__legend i {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 4px;
}
.mod-wall {
  columns: 3;
  column-gap: 18px;
  margin-top: 40px;
}
.mod-note {
  display: inline-block;
  width: 100%;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(90, 50, 60, 0.08);
  break-inside: avoid;
}
.mod-note:nth-child(3n + 2) {
  transform: rotate(1deg);
}
.mod-note:nth-child(3n) {
  transform: rotate(-1deg);
}
.mod-note > p:not(.mod-note__foot) {
  margin-top: 12px;
  font-family: var(--lms-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lms-ink);
}
.mod-note__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--lms-muted);
}
.mod-note__foot b {
  margin-left: auto;
  color: var(--lms-accent);
}
.mod-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.mod-feat {
  padding: 26px;
  border: 1px solid #ece6f2;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff, #faf7fd);
}
.mod-feat__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: #f1ebfa;
  color: #6c4fc4;
}
.mod-feat:nth-child(even) .mod-feat__ic {
  background-color: #fff0e2;
  color: #d66a12;
}
.mod-feat h3 {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 800;
}
.mod-feat p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lms-muted);
}

/* ============================================================ Учёт времени */
.mod-hero--time {
  padding-bottom: 96px;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(246, 195, 92, 0.24), transparent 70%),
    radial-gradient(40% 50% at 90% 10%, rgba(141, 198, 63, 0.18), transparent 70%),
    #fdfbf6;
}
.mod-sheet-wrap {
  position: relative;
  margin-top: 56px;
}
.mod-sheet {
  padding: 22px 24px;
  border: 1px solid #ebe6da;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 30px 80px rgba(80, 60, 20, 0.12);
}
.mod-sheet__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--lms-muted);
}
.mod-sheet__top b {
  font-family: var(--lms-head);
  font-size: 17px;
  color: var(--lms-ink);
}
.mod-sheet__top .lms-btn-dark {
  margin-left: auto;
}
.mod-sheet__head,
.mod-sheet__rows li {
  display: grid;
  grid-template-columns: 200px repeat(10, 1fr) 64px;
  gap: 6px;
  align-items: center;
}
.mod-sheet__head {
  padding: 0 0 8px;
  border-bottom: 1px solid #f0ede5;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #9aa3ad;
}
.mod-sheet__head span:first-child {
  text-align: left;
}
.mod-sheet__rows {
  list-style: none;
}
.mod-sheet__rows li {
  padding: 8px 0;
  border-bottom: 1px solid #f5f2ec;
  font-size: 12.5px;
}
.mod-sheet__rows i,
.mod-sheet__legend i {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  background-color: #f3f9ec;
  font-style: normal;
  font-weight: 700;
  color: #3f7f12;
}
.mod-sheet__rows li > b {
  text-align: center;
  font-family: var(--lms-head);
  color: var(--lms-ink);
}
.mod-sheet .is-off { background-color: #f1f3f5; color: #9aa3ad; }
.mod-sheet .is-vac { background-color: #e3effa; color: #1f6fb2; }
.mod-sheet .is-sick { background-color: #fde8e8; color: #c53030; }
.mod-sheet__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--lms-muted);
}
.mod-sheet__legend i {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  font-size: 11px;
}
.mod-clockin {
  position: absolute;
  right: 12px;
  top: -40px;
  width: 210px;
  padding: 14px 16px 18px;
  border: 7px solid #f1f3f5;
  border-radius: 32px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #dfe3e8, 0 24px 50px rgba(80, 60, 20, 0.22);
  text-align: center;
}
.mod-clockin__t {
  font-family: var(--lms-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--lms-ink);
}
.mod-clockin__geo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--lms-muted);
}
.mod-clockin__btn {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 16px auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8dc63f, #4c8a10);
  box-shadow: 0 0 0 10px #eef6e5;
  font-family: var(--lms-head);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}
.mod-clockin__s {
  font-size: 11.5px;
  color: var(--lms-muted);
}
.mod-late {
  position: absolute !important;
  left: -18px;
  bottom: -30px;
  width: 220px;
}
.mod-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.mod-card {
  padding: 28px;
  border: 1px solid #e6ebe4;
  border-radius: 24px;
  background-color: #ffffff;
}
.mod-card h3 {
  font-size: 22px;
  font-weight: 800;
}
.mod-card > p {
  margin: 8px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lms-muted);
}
.mod-shifts,
.mod-checkins {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.mod-shifts li {
  display: grid;
  grid-template-columns: 70px repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  color: var(--lms-ink);
}
.mod-shifts li:first-child b {
  text-align: center;
  font-size: 11px;
  color: #9aa3ad;
}
.mod-shift {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.mod-shift--d { background-color: #fff1d6; color: #a15c06; }
.mod-shift--n { background-color: #e3e5fa; color: #3e3f9e; }
.mod-shift--o { background-color: #f1f3f5; }
.mod-checkins li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eef0f3;
  border-radius: 12px;
}
.mod-checkins img {
  border-radius: 50%;
}
.mod-checkins span {
  display: flex;
  flex-direction: column;
}
.mod-checkins b {
  font-size: 13px;
  color: var(--lms-ink);
}
.mod-checkins em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7280;
}
.mod-checkins .mk-pill {
  font-style: normal;
}
.mod-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.mod-cal i {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  background-color: #f6f8f4;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lms-ink);
}
.mod-cal .is-off { color: #b6bec6; }
.mod-cal .is-vac,
.mod-cal__legend .is-vac { background-color: #cfe3f5; color: #1f6fb2; }
.mod-cal .is-sick,
.mod-cal__legend .is-sick { background-color: #fbd5d5; color: #c53030; }
.mod-cal .is-trip,
.mod-cal__legend .is-trip { background-color: #fde7c2; color: #a15c06; }
.mod-cal__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--lms-muted);
}
.mod-cal__legend i {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 3px;
}
.mod-export {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: #fffbea;
  font-size: 13px;
  font-weight: 600;
  color: #6b5310;
}

/* ------------------------------ Адаптив ------------------------------ */
/* дочерние элементы сеток не должны распирать колонку на узких экранах */
.mod-two > *,
.mod-split > *,
.mod-grid4 > *,
.mod-zz > *,
.mod-panel > * {
  min-width: 0;
}

@media (max-width: 1100px) {
  .mod-split,
  .mod-two,
  .mod-zz,
  .mod-panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mod-zz--rev .mod-zz__text {
    order: 0;
  }
  .mod-okr__float {
    right: 0;
  }
  .mod-sheet {
    overflow-x: auto;
  }
  .mod-sheet__head,
  .mod-sheet__rows,
  .mod-sheet__top {
    min-width: 860px;
  }
  .mod-clockin {
    display: none;
  }
}

@media (max-width: 860px) {
  .mod-steps,
  .mod-roles,
  .mod-feats,
  .mod-grid4,
  .mod-strip {
    grid-template-columns: 1fr 1fr;
  }
  .mod-wall {
    columns: 2;
  }
  .mod-steps--line li::before {
    display: none;
  }
  .mod-logos__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .mod-hero {
    padding: 100px 0 64px;
  }
  .mod-hero--dark {
    padding-bottom: 0;
  }
  .mod-lead {
    font-size: 16px;
  }
  .mod-section {
    padding: 64px 0;
  }
  .mod-steps,
  .mod-roles,
  .mod-feats,
  .mod-grid4,
  .mod-doclist {
    grid-template-columns: 1fr;
  }
  .mod-strip {
    margin-top: 40px !important;
  }
  .mod-wall {
    columns: 1;
  }
  .mod-docs {
    height: 420px;
    border-radius: 24px;
  }
  .mod-paper {
    left: 6%;
    width: 72%;
    padding: 16px;
  }
  .mod-paper--back {
    display: none;
  }
  .mod-phone {
    width: 160px;
    height: 300px;
    right: 4%;
    bottom: -60px;
  }
  .mod-route-chip {
    display: none;
  }
  .mod-hero--sky .mod-hero__text {
    padding: 22px;
  }
  .mod-gauge {
    padding: 20px;
  }
  .mod-gauge__dial {
    width: 240px;
  }
  .mod-gauge__pulse {
    flex-direction: column;
    align-items: flex-start;
  }
  .mod-heat {
    padding: 14px;
  }
  .mod-heat__head,
  .mod-heat li {
    grid-template-columns: 64px repeat(8, minmax(0, 1fr));
    gap: 3px;
  }
  .mod-heat li b {
    font-size: 11px;
  }
  .mod-heat li i {
    height: 24px;
    border-radius: 5px;
  }
  .mod-tabs__bar {
    width: 100%;
    overflow-x: auto;
  }
  .mod-tab {
    flex: none;
    padding: 10px 14px;
    font-size: 13.5px;
  }
  .mod-cycle li {
    width: 96px;
    margin: -36px 0 0 -48px;
  }
  .mod-cycle li span {
    width: 46px;
    height: 46px;
  }
  .mod-cycle li b {
    font-size: 12px;
  }
  .mod-cycle__core {
    width: 120px;
    margin-left: -60px;
  }
  .mod-cycle__core b {
    font-size: 14px;
  }
  .mod-late {
    display: none;
  }
  .mod-zz__media {
    padding: 12px;
  }
  .mod-zz h3,
  .mod-panel__text h3 {
    font-size: 24px;
  }
  .mod-okr__card {
    padding: 14px;
  }
  .mod-okr__float {
    display: none;
  }
}

/* ============================================================
   Скриншоты интерфейса TapHR (.ap-*): окно браузера с приложением,
   свёрстанное в пикселях холста data-w и масштабируемое целиком (lms.js).
   Шрифт системный и мелкий, как в настоящем интерфейсе.
   ============================================================ */
.mod-shot {
  position: relative;
  min-width: 0;
}
.mod-shot--bleed {
  width: 150%;
}
.mod-shot--time {
  margin-top: 56px;
}
.ap-fit {
  position: relative;
  overflow: hidden;
}
.ap-fit.is-fit {
  overflow: visible;
}
.ap-canvas {
  position: relative;
  transform-origin: 0 0;
}
.ap-at {
  position: absolute;
}
.ap-win {
  overflow: hidden;
  border: 1px solid #d5d9df;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 28px 70px -14px rgba(16, 24, 40, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  color: #1f2933;
}
.ap-win p,
.ap-win ul,
.ap-win h4 {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-win img {
  display: block;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.ap-win svg {
  flex: none;
}
.mut {
  color: #7b8490;
}

/* вкладки и адресная строка браузера */
.ap-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 38px;
  padding: 0 12px;
  background-color: #dfe3e8;
}
.ap-tabs-bar > i {
  align-self: center;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #ff5f57;
}
.ap-tabs-bar > i:nth-child(2) { background-color: #febc2e; }
.ap-tabs-bar > i:nth-child(3) { margin-right: 18px; background-color: #28c840; }
.ap-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  height: 31px;
  padding: 0 12px;
  border-radius: 9px 9px 0 0;
  background-color: #ffffff;
  font-size: 12px;
  color: #1f2933;
}
.ap-tab img {
  border-radius: 3px !important;
}
.ap-tab span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-tab em {
  margin-left: auto;
  font-style: normal;
  color: #8b93a0;
}
.ap-tab--off {
  width: 190px;
  background-color: transparent;
  color: #5b6470;
}
.ap-tab-plus {
  align-self: center;
  margin-left: 6px;
  font-size: 16px;
  color: #6b7280;
}
.ap-addr {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #e3e6ea;
  background-color: #ffffff;
  color: #6b7280;
}
.ap-url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border-radius: 13px;
  background-color: #f1f3f4;
  font-size: 12.5px;
  color: #3c4043;
}

/* приложение */
.ap-app {
  display: grid;
  grid-template-columns: 212px 1fr;
  background-color: #f6f7f9;
}
.ap-app--rail {
  grid-template-columns: 54px 1fr;
}
.ap-side {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  border-right: 1px solid #e6e8ec;
  background-color: #ffffff;
}
.ap-org {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 14px;
  color: #8b93a0;
}
.ap-org img {
  border-radius: 7px !important;
}
.ap-org span {
  flex: 1;
  min-width: 0;
}
.ap-org b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.ap-org em {
  display: block;
  font-size: 11px;
  font-style: normal;
}
.ap-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ap-nav--end {
  margin-top: auto;
  padding-top: 18px;
}
.ap-nav__i {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
  color: #4b5563;
}
.ap-nav__i svg {
  color: #8b93a0;
}
.ap-nav__i em {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 10px;
  background-color: #eef0f3;
  font-size: 11px;
  font-style: normal;
  color: #5b6470;
}
.ap-nav__i.is-on {
  background-color: #eef5e6;
  font-weight: 600;
  color: #2f5d0a;
}
.ap-nav__i.is-on svg {
  color: #4c8a12;
}
.ap-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  border-right: 1px solid #e6e8ec;
  background-color: #ffffff;
}
.ap-rail img {
  margin-bottom: 10px;
  border-radius: 7px !important;
}
.ap-rail__i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #8b93a0;
}
.ap-rail__i.is-on {
  background-color: #eef5e6;
  color: #4c8a12;
}
.ap-rail__i--end {
  margin-top: auto;
}
.ap-main {
  min-width: 0;
}
.ap-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid #e6e8ec;
  background-color: #ffffff;
}
.ap-crumbs {
  display: flex;
  gap: 7px;
  font-size: 12.5px;
  color: #7b8490;
  white-space: nowrap;
}
.ap-crumbs i {
  font-style: normal;
  color: #c3c8cf;
}
.ap-crumbs b {
  font-weight: 500;
  color: #1f2933;
}
.ap-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background-color: #f9fafb;
  font-size: 12.5px;
  color: #9aa1ab;
}
.ap-search kbd {
  margin-left: auto;
  padding: 0 5px;
  border: 1px solid #dfe2e6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10.5px;
  color: #7b8490;
}
.ap-bell {
  position: relative;
  display: flex;
  color: #6b7280;
}
.ap-bell i {
  position: absolute;
  right: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  background-color: #ef4444;
}
.ap-me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid #eceef1;
  white-space: nowrap;
}
.ap-me b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}
.ap-me em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-body {
  padding: 20px 22px 22px;
}
.ap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ap-head h4 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #111827;
}
.ap-head p {
  margin-top: 3px;
  font-size: 12.5px;
  color: #7b8490;
}
.ap-head__btns {
  display: flex;
  flex: none;
  gap: 8px;
}
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: #1f2933;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
}
.ap-btn--pri {
  border-color: #1f2b3a;
  background-color: #1f2b3a;
  color: #ffffff;
}
.ap-btn--green {
  border-color: #4c8a12;
  background-color: #4c8a12;
  color: #ffffff;
}
.ap-btn--wide {
  width: 100%;
  height: 36px;
}
.ap-tabs {
  display: flex;
  gap: 22px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e3e6ea;
  font-size: 13px;
  color: #6b7280;
}
.ap-tabs span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 10px;
}
.ap-tabs .is-on {
  font-weight: 600;
  color: #111827;
  box-shadow: inset 0 -2px #4c8a12;
}
.ap-tabs em {
  padding: 0 6px;
  border-radius: 9px;
  background-color: #eceff2;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: #5b6470;
}
.ap-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ap-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e1e4e8;
  border-radius: 7px;
  background-color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  color: #6b7280;
}
.ap-select b {
  font-weight: 500;
  color: #1f2933;
}
.ap-select--search {
  width: 230px;
  color: #9aa1ab;
}
.ap-select--icon {
  margin-left: auto;
}
.ap-card {
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  background-color: #ffffff;
}
.ap-pad {
  padding: 14px 16px;
}
.ap-win .ap-pad-x {
  padding: 14px 16px 6px;
}
.ap-card__t {
  margin-bottom: 10px !important;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.ap-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ap-two--wide {
  grid-template-columns: 1.35fr 1fr;
}
.ap-two--eng {
  grid-template-columns: 1.1fr 1fr;
  margin-bottom: 12px;
}

/* таблицы */
.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ap-table th {
  padding: 9px 12px;
  border-bottom: 1px solid #e6e8ec;
  background-color: #fafbfc;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: #7b8490;
}
.ap-table thead tr th:first-child { border-top-left-radius: 10px; }
.ap-table thead tr th:last-child { border-top-right-radius: 10px; }
.ap-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
  white-space: nowrap;
}
.ap-table tbody tr:last-child td {
  border-bottom: 0;
}
.ap-table tr.is-hover td {
  background-color: #f7faf3;
}
.ap-table td:last-child svg {
  color: #9aa1ab;
}
.ap-table--flat th {
  background-color: transparent;
}
.ap-table--num td:not(:first-child),
.ap-table--num th:not(:first-child) {
  text-align: center;
}
.ap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-top: 1px solid #eef0f2;
  font-size: 12px;
  color: #7b8490;
}
.ap-pager {
  display: flex;
  gap: 4px;
}
.ap-pager span {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  color: #4b5563;
}
.ap-pager .is-on {
  border-color: #1f2b3a;
  background-color: #1f2b3a;
  color: #ffffff;
}
.ap-cb {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid #c9ced5;
  border-radius: 4px;
  background-color: #ffffff;
  vertical-align: middle;
}
.ap-cb.is-on {
  border-color: #4c8a12;
  background-color: #4c8a12;
  color: #ffffff;
}
.ap-who {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-who b {
  display: block;
  font-weight: 500;
}
.ap-who em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-ini {
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 600;
  color: #ffffff;
}
.ap-stack {
  display: flex;
  align-items: center;
}
.ap-stack > img,
.ap-stack > .ap-ini {
  margin-right: -6px;
  border: 2px solid #ffffff;
  box-sizing: content-box;
}
.ap-stack em {
  margin-left: 12px;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-doc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ap-doc b {
  display: block;
  font-weight: 500;
}
.ap-doc em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-file {
  display: grid;
  flex: none;
  place-items: end center;
  width: 24px;
  height: 30px;
  padding-bottom: 4px;
  border-radius: 3px 8px 3px 3px;
  background-color: #fdecec;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  color: #c53030;
}
.ap-file--doc {
  background-color: #e8f0fd;
  color: #2457b5;
}
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.ap-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.ap-badge--green { background-color: #e9f5e9; color: #2e7d32; }
.ap-badge--amber { background-color: #fff3df; color: #b45309; }
.ap-badge--blue { background-color: #e8effd; color: #1d4ed8; }
.ap-badge--grey { background-color: #f1f3f5; color: #5b6470; }
.ap-badge--red { background-color: #fdecec; color: #b91c1c; }
.ap-prog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ap-prog i {
  position: relative;
  overflow: hidden;
  width: 96px;
  height: 6px;
  border-radius: 3px;
  background-color: #edf0f2;
}
.ap-prog s {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background-color: #4c8a12;
}
.ap-prog b {
  font-size: 12px;
  font-weight: 500;
}
.ap-prog--amber s { background-color: #e8952c; }
.ap-prog--red s { background-color: #dc4a4a; }
.ap-prog--blue s { background-color: #3b74d9; }
.ap-prog--wide {
  display: flex;
}
.ap-prog--wide i {
  flex: 1;
}
.ap-kpis {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.ap-kpi {
  padding: 11px 14px;
}
.ap-kpi em {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-kpi b {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #111827;
}
.ap-kpi small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #7b8490;
}
.ap-kpi small.up { color: #2e7d32; }
.ap-kpi small.warn { color: #b45309; }

/* КЭДО */
.ap-editor {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 14px;
}
.ap-a4 {
  padding: 26px 30px;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  font-family: "Times New Roman", Times, serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #222222;
}
.ap-a4 p + p {
  margin-top: 6px;
}
.ap-a4__h {
  font-weight: 700;
  text-align: center;
}
.ap-a4__c {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px !important;
}
.ap-a4 mark {
  padding: 0 2px;
  border-radius: 2px;
  background-color: #e7f3d8;
  color: inherit;
}
.ap-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  background-color: #ffffff;
}
.ap-fields__t {
  margin-bottom: 6px !important;
  font-size: 12.5px;
  font-weight: 600;
}
.ap-field {
  padding: 6px 0;
  border-bottom: 1px solid #f0f2f4;
}
.ap-field em {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-field b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.ap-fields__ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 !important;
  font-size: 12px;
  color: #2e7d32;
}
.ap-attach {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
  padding: 6px 10px !important;
  border: 1px dashed #d5d9df;
  border-radius: 7px;
  font-size: 12px;
  color: #4b5563;
}
.ap-route li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 16px 24px;
}
.ap-route li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -2px;
  width: 2px;
  background-color: #e3e6ea;
}
.ap-route li:last-child::after {
  display: none;
}
.ap-route .ap-step {
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid #c9ced5;
  border-radius: 50%;
  background-color: #ffffff;
}
.ap-route .is-done .ap-step {
  border-color: #4c8a12;
  background-color: #4c8a12;
}
.ap-route .is-now .ap-step {
  border-color: #e8952c;
  box-shadow: 0 0 0 3px #fff1dc;
}
.ap-route li > span:not(.ap-step) {
  flex: 1;
}
.ap-route b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.ap-route em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-route small {
  font-size: 11px;
  color: #7b8490;
}
.ap-route .is-now small {
  color: #b45309;
}
.ap-route .is-next {
  opacity: 0.6;
}
.ap-comment {
  display: flex;
  gap: 8px;
  padding: 10px !important;
  border-radius: 8px;
  background-color: #f6f7f9;
  font-size: 12px;
  color: #4b5563;
}
.ap-comment b {
  font-weight: 600;
  color: #1f2933;
}
.ap-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid #f6dfb5;
  border-radius: 9px;
  background-color: #fffaf0;
  font-size: 12px;
  color: #7a4b0c;
}
.ap-alert > svg {
  color: #d97706;
}
.ap-alert > span {
  flex: 1;
}
.ap-alert .ap-btn {
  flex: none;
}

/* Эффективность */
.ap-table--tree td:first-child {
  padding-left: 0;
}
.ap-goal {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ap-goal b {
  display: block;
  font-weight: 500;
}
.ap-goal em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-caret {
  display: flex;
  flex: none;
  width: 14px;
  color: #8b93a0;
}
.ap-table--tree .ap-prog i {
  width: 72px;
}
.ap-table--tree td {
  padding-left: 10px;
  padding-right: 10px;
}
.ap-mygoal {
  margin-bottom: 12px;
}
.ap-mygoal__t {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px !important;
}
.ap-mygoal__t b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.ap-mygoal__t em {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-checkins {
  margin-top: 12px !important;
  border-top: 1px solid #eef0f2;
}
.ap-checkins li {
  display: grid;
  grid-template-columns: 64px 34px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12px;
}
.ap-checkins b {
  color: #2e7d32;
}
.ap-score {
  display: inline-block;
  min-width: 34px;
  padding: 2px 0;
  border-radius: 5px;
  background-color: #f1f6ec;
  font-weight: 500;
}
.ap-score.lo {
  background-color: #fdecec;
  color: #b91c1c;
}
.ap-mini {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 60px;
  height: 6px;
  margin-right: 8px;
  border-radius: 3px;
  background-color: #edf0f2;
  vertical-align: middle;
}
.ap-mini s {
  position: absolute;
  inset: 0 auto 0 0;
  background-color: #4c8a12;
}
.ap-ai {
  display: flex;
  gap: 8px;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid #e0e9f8;
  border-radius: 9px;
  background-color: #f5f8fe;
  font-size: 12px;
  color: #34415a;
}
.ap-ai svg {
  color: #3b74d9;
}
.ap-agenda li,
.ap-actions li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12.5px;
}
.ap-agenda li > span:not(.ap-cb),
.ap-actions li > span:not(.ap-cb) {
  flex: 1;
}
.ap-agenda .is-done span:not(.ap-cb) {
  color: #9aa1ab;
  text-decoration: line-through;
}
.ap-actions small {
  font-size: 11px;
  color: #7b8490;
}
.ap-agenda {
  margin-bottom: 14px !important;
}
.ap-notes {
  margin-bottom: 14px !important;
  padding: 10px 12px !important;
  border-radius: 8px;
  background-color: #fffbea;
  font-size: 12px;
  line-height: 1.5;
  color: #4b4a3a;
}
.ap-idp {
  margin-bottom: 12px;
}
.ap-idp p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px !important;
  font-size: 12px;
}
.ap-idp b {
  font-weight: 500;
}
.ap-past li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12px;
}

/* Вовлечённость */
.ap-dist {
  display: flex !important;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  padding-top: 16px !important;
}
.ap-dist li {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  font-size: 11px;
  text-align: center;
  color: #7b8490;
}
.ap-dist i {
  position: relative;
  display: block;
  margin-bottom: 5px;
  border-radius: 4px 4px 0 0;
  background-color: #f2a3a3;
}
.ap-dist i b {
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  color: #4b5563;
}
.ap-dist .ap-a i { background-color: #f3cf7c; }
.ap-dist .ap-g i { background-color: #7fbf4d; }
.ap-dist__legend {
  display: flex;
  gap: 16px;
  margin-top: 10px !important;
  font-size: 11.5px;
}
.ap-dist__legend .ap-r { color: #b91c1c; }
.ap-dist__legend .ap-a { color: #b45309; }
.ap-dist__legend .ap-g { color: #2e7d32; }
.ap-enps {
  font-weight: 600;
}
.ap-up { color: #2e7d32; font-size: 12px; }
.ap-down { color: #b91c1c; font-size: 12px; }
.ap-comments li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12.5px;
}
.ap-comments li:last-child {
  border-bottom: 0;
}
.ap-comments li > span:nth-child(2) {
  flex: 1;
}
.ap-comments em {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-anon {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #eceff2;
  font-size: 12px;
  font-weight: 600;
  color: #7b8490;
}

/* Учёт времени */
.ap-sheet th,
.ap-sheet td {
  padding: 7px 4px;
  text-align: center;
}
.ap-sheet th:first-child,
.ap-sheet td:first-child {
  padding-left: 12px;
  text-align: left;
}
.ap-sheet th em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: #9aa1ab;
}
.ap-sheet th.is-we {
  color: #c0c6ce;
}
.ap-sheet td:not(:first-child):not(.ap-total) {
  font-size: 12px;
}
.ap-sheet .is-off { color: #b8bec6; }
.ap-sheet .is-vac { background-color: #eaf2fd; color: #1f5fb8; font-weight: 600; }
.ap-sheet .is-sick { background-color: #fdeeee; color: #b91c1c; font-weight: 600; }
.ap-sheet .is-trip { background-color: #f2ecfb; color: #6b3fb5; font-weight: 600; }
.ap-sheet .is-late { background-color: #fff3df; color: #b45309; font-weight: 600; }
.ap-sheet .is-short { color: #b45309; }
.ap-total {
  padding-right: 12px !important;
  font-weight: 600;
}
.ap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ap-legend i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.ap-legend i:first-child { margin-left: 0; }
.ap-legend .is-off { background-color: #f1f3f5; color: #9aa1ab; }
.ap-legend .is-vac { background-color: #eaf2fd; color: #1f5fb8; }
.ap-legend .is-sick { background-color: #fdeeee; color: #b91c1c; }
.ap-legend .is-trip { background-color: #f2ecfb; color: #6b3fb5; }
.ap-legend .is-late { background-color: #fff3df; color: #b45309; }

/* телефон */
.ap-phone {
  width: 300px;
  height: 620px;
  padding: 11px;
  border-radius: 50px;
  background-color: #111316;
  box-shadow: inset 0 0 0 2px #3a3d42, 0 40px 80px -10px rgba(16, 24, 40, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  color: #111827;
}
.ap-phone p,
.ap-phone ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-phone__scr {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 0 18px;
  border-radius: 40px;
  background-color: #ffffff;
}
.ap-phone__island {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 92px;
  height: 27px;
  border-radius: 20px;
  background-color: #000000;
  transform: translateX(-50%);
}
.ap-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 4px 10px 0 14px !important;
  font-size: 14.5px;
}
.ap-phone__status b {
  font-weight: 600;
}
.ap-phone__status span {
  display: flex;
  align-items: center;
  gap: 5px;
  fill: currentColor;
}
.ap-phone__home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 112px;
  height: 5px;
  border-radius: 3px;
  background-color: #111111;
  transform: translateX(-50%);
}
.ap-m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px !important;
  font-size: 15px;
  color: #4c8a12;
}
.ap-m-top span {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ap-m-top .mut {
  font-size: 13px;
}
.ap-m-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ap-m-sub {
  margin: 2px 0 12px !important;
  font-size: 12.5px;
  color: #7b8490;
}
.ap-m-page {
  overflow: hidden;
  height: 236px;
  padding: 14px 14px 0;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background-color: #fbfbfa;
  font-family: "Times New Roman", Times, serif;
  font-size: 8.6px;
  line-height: 1.45;
  color: #2b2b2b;
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
}
.ap-m-page p + p {
  margin-top: 5px !important;
}
.ap-m-page__h {
  font-weight: 700;
  text-align: center;
}
.ap-m-page__c {
  text-align: right;
}
.ap-m-cert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px;
  background-color: #f2f7ec;
  color: #4c8a12;
}
.ap-m-cert b {
  display: block;
  font-size: 13px;
  color: #111827;
}
.ap-m-cert em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #6b7280;
}
.ap-m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 13px;
  background-color: #4c8a12;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.ap-m-btn--ghost {
  margin-top: 8px;
  background-color: transparent;
  color: #b91c1c;
}
.ap-m-steps {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
}
.ap-m-steps i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: #e6e8ec;
}
.ap-m-steps .is-on {
  background-color: #4c8a12;
}
.ap-m-q {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}
.ap-m-anon {
  display: flex;
  gap: 6px;
  margin: 10px 0 18px !important;
  font-size: 11.5px;
  color: #7b8490;
}
.ap-m-scale {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.ap-m-scale li {
  display: grid;
  place-items: center;
  height: 38px;
  border: 1px solid #e1e4e8;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
}
.ap-m-scale .is-on {
  border-color: #4c8a12;
  background-color: #4c8a12;
  color: #ffffff;
}
.ap-m-scale__l {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 18px !important;
  font-size: 11px;
  color: #7b8490;
}
.ap-m-label {
  margin-bottom: 6px !important;
  font-size: 13px;
  font-weight: 600;
}
.ap-m-label .mut {
  font-weight: 400;
}
.ap-m-input {
  height: 70px;
  margin-bottom: 16px !important;
  padding: 10px 12px !important;
  border: 1.5px solid #4c8a12;
  border-radius: 10px;
  font-size: 13px;
  color: #1f2933;
}
.ap-m-hello {
  font-size: 21px;
  font-weight: 700;
}
.ap-m-map {
  position: relative;
  overflow: hidden;
  height: 150px;
  margin-bottom: 14px;
  border-radius: 14px;
  background:
    linear-gradient(28deg, transparent 46%, #ffffff 46%, #ffffff 51%, transparent 51%),
    linear-gradient(-62deg, transparent 58%, #ffffff 58%, #ffffff 62%, transparent 62%),
    linear-gradient(90deg, transparent 22%, #f5efe0 22%, #f5efe0 40%, transparent 40%),
    linear-gradient(transparent 60%, #dfeedd 60%, #dfeedd 82%, transparent 82%),
    #eef1f4;
}
.ap-m-map__r {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(76, 138, 18, 0.5);
  border-radius: 50%;
  background-color: rgba(76, 138, 18, 0.12);
  transform: translate(-50%, -50%);
}
.ap-m-map__pin {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 1;
  color: #4c8a12;
  transform: translate(-50%, -85%);
}
.ap-m-map p {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px !important;
  border-radius: 9px;
  background-color: #ffffff;
  font-size: 12px;
  color: #2e7d32;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
}
.ap-m-clock {
  margin-bottom: 10px !important;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ap-m-week {
  margin-top: 14px !important;
}
.ap-m-week li {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f4;
  font-size: 12px;
}
.ap-m-week b {
  font-weight: 500;
}
.ap-m-week em {
  font-style: normal;
  color: #7b8490;
}

@media (max-width: 1100px) {
  .mod-shot--bleed {
    width: 130%;
  }
}
@media (max-width: 720px) {
  .mod-shot--bleed {
    width: 175%;
  }
  .mod-shot--time .ap-fit {
    width: 220%;
  }
  .mod-shot--time {
    margin-top: 36px;
  }
}

/* ============================================================ Рекрутинг (/ats/) */
.mod-hero--ats {
  padding-bottom: 0;
  background:
    radial-gradient(50% 60% at 90% 0%, rgba(141, 198, 63, 0.22), transparent 70%),
    radial-gradient(40% 50% at 0% 30%, rgba(107, 157, 206, 0.16), transparent 70%),
    linear-gradient(#f7faf4, #ffffff 85%);
}
.ats-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: end;
}
.ats-hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
}
.ats-hero__side .mod-lead {
  margin-top: 0;
}
.mod-shot--ats {
  width: 100%;
  margin-top: 56px;
  margin-bottom: -40px;
}
.mod-hero--ats + .mod-logos {
  position: relative;
  padding-top: 64px;
}

/* канбан вакансии */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e1e4e8;
  border-radius: 15px;
  background-color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  color: #4b5563;
}
.ap-chip.is-on {
  border-color: #1f2b3a;
  background-color: #1f2b3a;
  color: #ffffff;
}
.ap-src {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px #e3e6ea;
  color: #4b5563;
}
.ap-src img {
  border-radius: 0 !important;
  object-fit: contain;
}
.ap-src--li { background-color: #0a66c2; box-shadow: none; }
.ap-src--tg { background-color: #229ed9; box-shadow: none; }
.ap-src--site { background-color: #eef5e6; box-shadow: none; color: #4c8a12; }
.ap-src--ref { background-color: #f2ecfb; box-shadow: none; color: #6b3fb5; }
.ap-kanban {
  display: grid;
  grid-template-columns: repeat(5, 244px);
  overflow: hidden;
  gap: 10px;
  align-items: start;
}
.ap-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background-color: #eef0f3;
}
.ap-col__h {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px;
  font-size: 12px;
  color: #7b8490;
}
.ap-col__h b {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1f2933;
}
.ap-col__h em {
  font-style: normal;
}
.ap-col__h svg {
  margin-left: auto;
}
.ap-kcard {
  padding: 10px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.ap-kcard .ap-who {
  min-width: 0;
}
.ap-kcard .ap-who > span {
  min-width: 0;
}
.ap-kcard .ap-who b,
.ap-kcard .ap-who em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-kcard__f {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px !important;
  font-size: 11px;
}
.ap-kcard__f .mut {
  margin-left: auto;
  white-space: nowrap;
}
.ap-match {
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.ap-match--hi { background-color: #e9f5e9; color: #2e7d32; }
.ap-match--mid { background-color: #fff3df; color: #b45309; }
.ap-match--lo { background-color: #f1f3f5; color: #5b6470; }
.ap-kcard__bot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f0f2f4;
  font-size: 11px;
  color: #2e7d32;
}
.ap-kcard__bot.is-wait { color: #b45309; }
.ap-kcard__bot.is-cal { color: #1d4ed8; }
.ap-kcard__rate {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f0f2f4;
  color: #f0a020;
  fill: #f0a020;
}
.ap-kcard__rate span {
  margin-left: 6px;
  font-size: 11px;
  color: #7b8490;
}
.ap-m-site {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}
.ap-m-site img {
  border-radius: 5px !important;
}
.ap-m-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px !important;
}
.ap-m-days li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  border-radius: 10px;
  font-size: 15px;
}
.ap-m-days em {
  font-size: 10.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-m-days b {
  font-weight: 600;
}
.ap-m-days .is-on {
  background-color: #4c8a12;
  color: #ffffff;
}
.ap-m-days .is-on em {
  color: rgba(255, 255, 255, 0.8);
}
.ap-m-days .is-off {
  color: #c3c8cf;
}
.ap-m-slots {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.ap-m-slots li {
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
.ap-m-slots .is-on {
  border: 2px solid #4c8a12;
  background-color: #f2f8ea;
  color: #2f5d0a;
}
.ap-m-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 !important;
  font-size: 12px;
  color: #7b8490;
}

/* карточка кандидата */
.ap-cand {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 14px;
}
.ap-cand__side,
.ap-cand__main {
  padding: 16px;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  background-color: #ffffff;
}
.ap-cand__name {
  margin-top: 12px !important;
  font-size: 16px;
  font-weight: 650;
}
.ap-cand__role {
  font-size: 12px;
  color: #7b8490;
}
.ap-cand__tags {
  display: flex;
  gap: 6px;
  margin: 12px 0 6px !important;
}
.ap-cand__tags .ap-chip {
  height: 22px;
}
.ap-cand__file {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px !important;
  font-size: 12px;
  color: #1d4ed8;
}
.ap-score-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 10px;
  background-color: #f5f9ef;
}
.ap-score-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #4b5563;
}
.ap-score-card p b {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  color: #111827;
}
.ap-ring {
  display: grid;
  flex: none;
  place-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #f5f9ef 78%, transparent 79%),
    conic-gradient(#4c8a12 calc(var(--p) * 1%), #e3ead9 0);
  text-align: center;
}
.ap-ring b {
  font-size: 22px;
  font-weight: 700;
  color: #2f5d0a;
}
.ap-ring em {
  font-size: 9.5px;
  font-style: normal;
  color: #6b7280;
}
.ap-crit li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
}
.ap-crit li:last-child {
  border-bottom: 0;
}
.ap-crit b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.ap-crit em {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e9f5e9;
  color: #2e7d32;
}
.is-no .ap-tick {
  background-color: #fdecec;
  color: #b91c1c;
}

/* чат с ботом */
.ap-phone--chat .ap-phone__scr {
  padding: 0;
  background-color: #efe9e1;
}
.ap-phone--chat .ap-phone__status {
  padding: 4px 24px 0 28px !important;
  background-color: #ffffff;
}
.ap-chat__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 10px !important;
  border-bottom: 1px solid #e6e1da;
  background-color: #ffffff;
  color: #4c8a12;
}
.ap-chat__top img {
  border-radius: 50% !important;
}
.ap-chat__top b {
  display: block;
  font-size: 14px;
  color: #111827;
}
.ap-chat__top em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-chat {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px !important;
}
.ap-msg {
  position: relative;
  max-width: 84%;
  padding: 7px 10px 16px;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 12.5px;
  line-height: 1.38;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.ap-msg em {
  position: absolute;
  right: 8px;
  bottom: 3px;
  font-size: 9.5px;
  font-style: normal;
  color: #8b93a0;
}
.ap-msg--out {
  align-self: flex-end;
  background-color: #dcf3c8;
}
.ap-msg--out em {
  color: #4f8a3a;
}
.ap-chat__btns span {
  display: block;
  max-width: 84%;
  padding: 9px;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #1d7fc4;
}
.ap-chat__input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 26px !important;
  color: #7b8490;
}
.ap-chat__input span {
  flex: 1;
  padding: 9px 14px;
  border-radius: 20px;
  background-color: #ffffff;
  font-size: 13px;
}

/* оценка руководителя */
.ap-rate li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12.5px;
}
.ap-rate {
  margin-bottom: 14px !important;
}
.ap-stars {
  display: flex;
  gap: 2px;
}
.ap-stars i {
  display: flex;
  color: #d5d9df;
}
.ap-stars .is-on {
  color: #f0a020;
}
.ap-stars .is-on svg,
.ap-kcard__rate svg {
  fill: currentColor;
}
.ap-decide {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* календарь интервью */
.ap-cal {
  overflow: hidden;
}
.ap-cal__h {
  display: grid;
  grid-template-columns: 54px repeat(5, 1fr);
  border-bottom: 1px solid #e6e8ec;
  background-color: #fafbfc;
  font-size: 12px;
}
.ap-cal__h b {
  padding: 9px 10px;
  border-left: 1px solid #eef0f2;
  font-weight: 600;
}
.ap-cal__h b:nth-child(5) {
  color: #4c8a12;
}
.ap-cal__grid {
  display: grid;
  grid-template-columns: 54px 1fr;
}
.ap-cal__hours span {
  display: block;
  height: 44px;
  padding: 4px 8px 0 0;
  font-size: 10.5px;
  text-align: right;
  color: #9aa1ab;
}
.ap-cal__body {
  position: relative;
  height: 352px;
  background:
    linear-gradient(#eef0f2 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, #eef0f2 1px, transparent 1px) 0 0 / 20% 100%;
}
.ap-ev {
  position: absolute;
  width: calc(20% - 6px);
  padding: 5px 7px;
  border-left: 3px solid #3b74d9;
  border-radius: 5px;
  background-color: #e8effd;
  overflow: hidden;
}
.ap-ev b {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1e3a8a;
}
.ap-ev em {
  display: block;
  font-size: 10px;
  font-style: normal;
  color: #4b5f8f;
}
.ap-ev--mgr {
  border-color: #e8952c;
  background-color: #fff3df;
}
.ap-ev--mgr b { color: #8a4a08; }
.ap-ev--mgr em { color: #9a6a30; }
.ap-ev--offer {
  border-color: #4c8a12;
  background-color: #eaf4e0;
}
.ap-ev--offer b { color: #2f5d0a; }
.ap-ev--offer em { color: #4c7a2a; }

/* аналитика найма */
.ap-two--an {
  grid-template-columns: 1.1fr 1fr;
}
.ap-funnel li {
  display: grid;
  grid-template-columns: 178px 1fr 46px 40px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  font-size: 12.5px;
}
.ap-funnel i {
  position: relative;
  height: 22px;
  border-radius: 5px;
  background-color: #f2f4f6;
}
.ap-funnel s {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #4c8a12, #79b23b);
}
.ap-funnel b {
  font-weight: 600;
  text-align: right;
}
.ap-funnel em {
  font-size: 11.5px;
  font-style: normal;
  text-align: right;
  color: #7b8490;
}
.ap-table--num2 td:not(:first-child),
.ap-table--num2 th:not(:first-child) {
  text-align: right;
}

/* секция «все отклики в одной воронке» */
.ats-src {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ats-src__flow {
  position: relative;
  display: grid;
  grid-template-columns: 210px 1fr 200px;
  align-items: center;
  min-height: 360px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(60% 70% at 80% 50%, rgba(141, 198, 63, 0.18), transparent 70%),
    #f6f8f4;
}
.ats-src__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ats-src__t {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-size: 14px;
}
.ats-src__t .ap-src {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.ats-src__t .ap-src img {
  width: 16px;
  height: 16px;
}
.ats-src__t b {
  font-weight: 600;
  color: var(--lms-ink);
}
.ats-src__lines {
  align-self: stretch;
  margin: 34px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2399bf6b' stroke-width='1.5' stroke-dasharray='4 4' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 10C60 10 40 150 100 150M0 80C60 80 40 150 100 150M0 150H100M0 220C60 220 40 150 100 150M0 290C60 290 40 150 100 150'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ats-src__hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 20px 50px rgba(30, 60, 20, 0.14);
  text-align: center;
}
.ats-src__hub img {
  border-radius: 12px;
}
.ats-src__hub b {
  font-family: var(--lms-head);
  font-size: 16px;
  color: var(--lms-ink);
}
.ats-src__hub em {
  font-size: 12.5px;
  font-style: normal;
  color: var(--lms-muted);
}

/* бенто из скриншотов */
.ats-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.ats-bento__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #e6eae2;
  border-radius: 28px;
  background-color: #ffffff;
}
.ats-bento__txt {
  padding: 30px 32px 22px;
}
.ats-bento__txt h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--lms-ink);
}
.ats-bento__txt p {
  max-width: 520px;
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--lms-muted);
}
.ats-bento__shot {
  flex: 1;
  margin-left: 32px;
  padding-top: 4px;
  overflow: hidden;
}
.ats-bento__shot .ap-fit.is-fit {
  overflow: visible;
}
.ats-bento__shot .ap-win {
  border-bottom-right-radius: 0;
}
.ats-bento__i--wide .ats-bento__shot {
  margin-right: -60px;
}
.ats-bento__i--phone {
  background: linear-gradient(180deg, #ffffff, #eef5e6);
}
.ats-bento__i--phone .ats-bento__shot {
  display: flex;
  justify-content: center;
  margin: 0;
  max-height: 430px;
}
.ats-bento__i--phone .ap-fit {
  width: 280px;
}
.ats-bento__i:nth-child(3),
.ats-bento__i:nth-child(4) {
  grid-column: span 1;
}
.ats-bento__i:nth-child(3) {
  background: linear-gradient(180deg, #ffffff, #eef4fa);
}
.ats-bento__i:nth-child(4) {
  background: linear-gradient(180deg, #ffffff, #fff6ec);
}
.ats-bento__i:nth-child(3) .ats-bento__shot,
.ats-bento__i:nth-child(4) .ats-bento__shot {
  max-height: 360px;
  margin-right: -40px;
}

/* тёмный блок аналитики */
.ats-dark {
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(141, 198, 63, 0.18), transparent 70%),
    #0f1f17;
}
.ats-an {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.ats-dark .mod-h2 {
  color: #ffffff !important;
}
.ats-dark .mod-h2 em {
  color: #a6d86a;
}
.ats-an__text p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.ats-dark .mod-checks li {
  color: rgba(255, 255, 255, 0.88);
}
.ats-dark .mod-checks svg {
  background-color: rgba(166, 216, 106, 0.16);
  color: #a6d86a;
}
.ats-an__shot {
  min-width: 0;
  margin-right: -120px;
}

/* примеры и роли */
.ats-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.ats-cases article {
  padding: 28px;
  border-top: 3px solid var(--lms-accent-bright);
  border-radius: 4px 4px 20px 20px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(80, 40, 20, 0.06);
}
.ats-cases__tag {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lms-accent);
}
.ats-cases h3 {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--lms-ink);
}
.ats-cases article > p:last-child {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--lms-muted);
}
.ats-roles {
  margin-top: 20px;
}
.ats-roles .mod-role {
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.ats-next {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 26px;
  border-radius: 20px;
  background-color: #1f2b3a;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color 0.2s ease;
}
.ats-next:hover {
  background-color: #263547;
}
.ats-next b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--lms-head);
  font-size: 18px;
  color: #ffffff;
}
.ats-next > span:nth-child(2) {
  flex: 1;
  font-size: 15px;
}
.ats-next__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: rgba(166, 216, 106, 0.16);
  color: #a6d86a;
}
.ats-next > svg {
  color: #ffffff;
}

@media (max-width: 1100px) {
  .ats-hero,
  .ats-src,
  .ats-an {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ats-an__shot {
    margin-right: -60px;
  }
  .mod-shot--ats {
    width: 150%;
  }
  .ats-bento {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .mod-shot--ats {
    width: 230%;
    margin-top: 36px;
  }
  .ats-src__flow {
    grid-template-columns: 1fr 50px 120px;
    min-height: 0;
    padding: 18px;
  }
  .ats-src__t {
    padding: 8px 10px;
    font-size: 13px;
  }
  .ats-src__hub {
    padding: 14px 8px;
  }
  .ats-src__hub b {
    font-size: 14px;
  }
  .ats-bento__txt {
    padding: 22px 22px 16px;
  }
  .ats-bento__shot {
    margin-left: 22px;
  }
  .ats-an__shot {
    margin-right: -200px;
  }
  .ats-cases {
    grid-template-columns: 1fr;
  }
  .ats-next {
    align-items: flex-start;
  }
  .ats-next > svg {
    display: none;
  }
}

/* ============================================================ Главная (index.html, kz.html, en.html)
   id секций (#products, #journey, #analytics…) остались для якорей, а их старые стили
   из styles.css перебиваем здесь */
.page--home #products,
.page--home #journey,
.page--home #automation,
.page--home #analytics,
.page--home #integrations {
  padding: 96px 0;
  background-image: none;
  color: inherit;
}
.page--home #products,
.page--home #automation,
.page--home #integrations {
  background-color: #ffffff;
}
.page--home #journey {
  background-color: #f6f8f4;
}
.page--home #journey,
.page--home #automation,
.page--home #analytics {
  overflow: hidden;
  overflow: clip;
}
.page--home #analytics {
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(141, 198, 63, 0.18), transparent 70%),
    #0f1f17;
}
/* «Главная» HR-директора */
.ap-two--home {
  grid-template-columns: 1fr 1.05fr;
}
.ap-count {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  background-color: #fdecec;
  font-size: 11px;
  color: #b91c1c;
}
.ap-att li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
}
.ap-att li:last-child {
  border-bottom: 0;
}
.ap-att li > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.ap-att b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-att em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-mod {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.ap-mod--docs { background-color: #e8effd; color: #1d4ed8; }
.ap-mod--jobs { background-color: #eef5e6; color: #4c8a12; }
.ap-mod--learn { background-color: #fff3df; color: #b45309; }
.ap-mod--time { background-color: #f1f3f5; color: #4b5563; }
.ap-mod--goals { background-color: #f2ecfb; color: #6b3fb5; }
.ap-mod--survey { background-color: #fdecf3; color: #be185d; }
.ap-due {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
}
.ap-due--amber { background-color: #fff3df; color: #b45309; }
.ap-due--red { background-color: #fdecec; color: #b91c1c; }
.ap-due--grey { background-color: #f1f3f5; color: #5b6470; }
.ap-due--blue { background-color: #e8effd; color: #1d4ed8; }
.ap-due--green { background-color: #e9f5e9; color: #2e7d32; }
.ap-late {
  margin-left: 4px;
  font-size: 11px;
  color: #b45309;
}
.ap-card__more {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px !important;
  border-top: 1px solid #eef0f2;
  font-size: 12px;
  font-weight: 500;
  color: #4c8a12;
}

/* телефон сотрудника */
.ap-m-top img {
  border-radius: 6px !important;
}
.ap-m-prog {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 14px;
  background-color: #f2f7ec;
}
.ap-m-prog b {
  display: block;
  font-size: 14px;
}
.ap-m-prog em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: #6b7280;
}
.ap-ring--sm {
  width: 54px;
  height: 54px;
  background:
    radial-gradient(closest-side, #f2f7ec 74%, transparent 75%),
    conic-gradient(#4c8a12 calc(var(--p) * 1%), #dfe8d4 0);
}
.ap-ring--sm b {
  font-size: 13px;
}
.ap-m-tasks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f2f4;
  color: #9aa1ab;
}
.ap-m-tasks li > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.ap-m-tasks b,
.ap-m-tasks em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-m-tasks b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
}
.ap-m-tasks em {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  color: #7b8490;
}
.ap-m-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: #f1f3f5;
  color: #4b5563;
}
.ap-m-tasks .is-done .ap-m-ic {
  background-color: #4c8a12;
  color: #ffffff;
}
.ap-m-tasks .is-done b {
  color: #9aa1ab;
  text-decoration: line-through;
}
.ap-m-tasks .is-now .ap-m-ic {
  background-color: #fff3df;
  color: #b45309;
}
.ap-m-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  padding: 8px 6px 24px !important;
  border-top: 1px solid #eceef1;
  background-color: rgba(255, 255, 255, 0.96);
}
.ap-m-nav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #9aa1ab;
}
.ap-m-nav .is-on {
  color: #4c8a12;
}

/* план адаптации */
.ap-onb-top {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
}
.ap-onb-top .ap-field {
  border: 0;
}
.ap-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ap-phase {
  padding: 12px;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  background-color: #ffffff;
}
.ap-phase.is-now {
  border-color: #f3d39b;
  box-shadow: 0 0 0 3px #fff6e6;
}
.ap-phase__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px !important;
  font-size: 13px;
}
.ap-phase li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f2f3f5;
  font-size: 12px;
}
.ap-phase li:last-child {
  border-bottom: 0;
}
.ap-phase li > span:not(.ap-cb) {
  flex: 1;
}
.ap-phase li small {
  font-size: 10.5px;
  color: #7b8490;
}
.ap-phase .is-done > span:not(.ap-cb) {
  color: #9aa1ab;
  text-decoration: line-through;
}
.ap-phase .is-now > span:not(.ap-cb) {
  font-weight: 600;
}

/* курс */
.ap-les li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f2f3f5;
}
.ap-les li > span:nth-child(2) {
  flex: 1;
}
.ap-les b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.ap-les em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-les .ap-prog i {
  width: 70px;
}
.ap-les__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: #f1f3f5;
  font-size: 11px;
  font-weight: 600;
  color: #5b6470;
}

/* сценарий автоматизации */
.ap-auto li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  padding: 10px 12px;
  border: 1px solid #e6e8ec;
  border-radius: 9px;
  background-color: #ffffff;
}
.ap-auto li + li {
  margin-top: 14px;
}
.ap-auto li + li::before {
  content: "";
  position: absolute;
  left: 26px;
  top: -15px;
  width: 2px;
  height: 14px;
  background-color: #cfd8c4;
}
.ap-auto li.is-trigger {
  border-color: #c9d9f6;
  background-color: #f5f8fe;
}
.ap-auto li > span:nth-child(2) {
  flex: 1;
}
.ap-auto b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.ap-auto em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: #7b8490;
}
.ap-auto > li > svg {
  color: #4c8a12;
}
.ap-auto__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: #eef5e6;
  color: #4c8a12;
}
.is-trigger .ap-auto__ic {
  background-color: #e3ecfc;
  color: #1d4ed8;
}
.ap-dist--hires i {
  background: linear-gradient(180deg, #79b23b, #4c8a12) !important;
}

/* модули: компактные карточки с иконкой */
.home-mods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.home-mod {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 22px 22px 22px 20px;
  border: 1px solid #e6eae2;
  border-radius: 20px;
  background-color: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-mod:hover {
  border-color: #c9dfb0;
  box-shadow: 0 18px 40px -20px rgba(30, 60, 20, 0.3);
  transform: translateY(-2px);
}
.home-mod__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: #eef5e6;
  color: var(--lms-accent);
}
.home-mod__ic img {
  width: 34px;
  height: 34px;
  border-radius: 0;
  object-fit: contain;
}
.home-mod--learning .home-mod__ic { background-color: #fff3df; color: #c2610c; }
.home-mod--kedo .home-mod__ic { background-color: #e8effd; color: #1d4ed8; }
.home-mod--performance .home-mod__ic { background-color: #f2ecfb; color: #6b3fb5; }
.home-mod--time .home-mod__ic { background-color: #eaf6f4; color: #0f766e; }
.home-mod--engagement .home-mod__ic { background-color: #fdecf3; color: #be185d; }
.home-mod__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.home-mod__txt b {
  font-family: var(--lms-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--lms-ink);
}
.home-mod__txt span {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--lms-muted);
}
.home-mod__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #f3f5f1;
  color: var(--lms-ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.home-mod:hover .home-mod__go {
  background-color: var(--lms-accent-bright);
  color: #ffffff;
}

/* путь сотрудника */
.home-tabs {
  margin-top: 36px;
}
.home-panel {
  grid-template-columns: 0.62fr 1.38fr;
}
.home-panel__badge {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lms-accent);
}
.home-panel h3 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--lms-ink);
}
.home-panel .mod-panel__text > p:not(.home-panel__badge) {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--lms-muted);
}

/* автоматизация */
.home-auto {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.home-auto__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: #eef5e6;
  font-weight: 600;
  color: var(--lms-accent);
}
.home-auto__shot {
  min-width: 0;
}

/* тёмный блок: цифры */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 72px !important;
  padding-top: 40px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}
.home-stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
}
.home-stats b {
  font-family: var(--lms-head);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

/* интеграции */
.home-int {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 14px;
  margin: 44px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.home-int__t {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 8px;
  border: 1px solid #e6eae2;
  border-radius: 18px;
  background-color: #ffffff;
  text-align: center;
}
.home-int__t span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background-color: #f4f6f3;
}
.home-int__t img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.home-int__t--li span { background-color: #0a66c2; }
.home-int__t--zoom span { background-color: #2d8cff; }
.home-int__t--tg span { background-color: #229ed9; }
.home-int__t b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--lms-ink);
}
.home-int__t em {
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.3;
  color: var(--lms-muted);
}

@media (max-width: 1100px) {
  .home-mods {
    grid-template-columns: 1fr 1fr;
  }
  .home-mod__go {
    display: none;
  }
  .home-auto {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-int {
    grid-template-columns: repeat(5, 1fr);
  }
  .home-stats {
    grid-template-columns: 1fr 1fr;
  }
  .home-panel .ap-fit {
    width: 150%;
  }
}
@media (max-width: 720px) {
  .page--home #products,
  .page--home #journey,
  .page--home #automation,
  .page--home #analytics,
  .page--home #integrations {
    padding: 64px 0;
  }
  .home-mods {
    grid-template-columns: 1fr;
  }
  .home-int {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-panel .ap-fit {
    width: 220%;
  }
  .home-auto__shot .ap-fit {
    width: 150%;
  }
  .home-panel h3 {
    font-size: 23px;
  }
}

/* блоки прежней главной под общими стилями .page--lms */
.page--home .cta-band h2 {
  color: #ffffff;
}

/* ============================================================ ИИ-рекрутинг (/ai-recruiting/) */
.mod-hero--ai {
  background:
    radial-gradient(45% 55% at 85% 30%, rgba(124, 108, 220, 0.16), transparent 70%),
    radial-gradient(40% 50% at 10% 85%, rgba(141, 198, 63, 0.14), transparent 70%),
    linear-gradient(rgba(3, 20, 32, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(3, 20, 32, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    #fafaff;
}
.mod-hero--ai .mod-eyebrow {
  background-color: rgba(107, 63, 181, 0.1);
  color: #6b3fb5;
}
.ap-ai-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  border: 1px solid #e3dcf7;
  border-radius: 10px;
  background-color: #f7f4fe;
  font-size: 12.5px;
  color: #3f2f6b;
}
.ap-ai-banner svg {
  color: #6b3fb5;
}
.ap-ai-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
}
.ap-ai-sum svg {
  color: #8b6fd6;
}
.ai-prose {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}
.ai-prose p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--lms-muted);
}
.ai-prose p + p {
  margin-top: 14px;
}
.ai-prose a {
  color: var(--lms-accent);
  font-weight: 600;
}

/* ============================================================ Адаптация (/onboarding/) */
.mod-hero--onb {
  padding-bottom: 0;
  background:
    radial-gradient(40% 50% at 15% 15%, rgba(246, 195, 92, 0.22), transparent 70%),
    radial-gradient(40% 50% at 90% 10%, rgba(141, 198, 63, 0.18), transparent 70%),
    linear-gradient(180deg, #fffaf2, #ffffff 85%);
}
.mod-hero--onb + .mod-logos {
  position: relative;
  padding-top: 64px;
}
.onb-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 44px 0 0 !important;
  padding: 0 !important;
  list-style: none;
  counter-reset: none;
}
.onb-path li {
  position: relative;
  padding: 26px 24px;
  border-radius: 22px;
  background-color: #fff6ec;
}
.onb-path li:nth-child(2) { background-color: #f6f8f4; }
.onb-path li:nth-child(3) { background-color: #eef4fa; }
.onb-path li:nth-child(4) { background-color: #f4effb; }
.onb-path li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid #b9c4ad;
  border-right: 2px solid #b9c4ad;
  transform: translateY(-50%) rotate(45deg);
}
.onb-path__n {
  position: absolute;
  right: 22px;
  top: 18px;
  font-family: var(--lms-hand);
  font-size: 30px;
  color: rgba(3, 20, 32, 0.25);
}
.onb-path__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  background-color: #ffffff;
  color: var(--lms-accent);
}
.onb-path b {
  display: block;
  font-family: var(--lms-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--lms-ink);
}
.onb-path p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lms-muted);
}
.onb-why {
  margin: 72px 0 0;
}

@media (max-width: 1100px) {
  .ai-prose {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .onb-path {
    grid-template-columns: 1fr 1fr;
  }
  .onb-path li::after {
    display: none;
  }
}
@media (max-width: 720px) {
  .onb-path {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ Главная: первый экран «путь сотрудника» */
.hx-hero {
  position: relative;
  overflow: clip;
  padding: 150px 0 90px;
  background:
    radial-gradient(40% 50% at 78% 45%, rgba(141, 198, 63, 0.2), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(3, 20, 32, 0.08) 1px, transparent 1.5px) 0 0 / 22px 22px,
    #fbf8f1;
}
.hx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px;
  align-items: center;
}
.hx-copy h1 {
  margin: 0;
  font-family: var(--lms-head);
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--lms-ink);
}
.hx-copy h1 em {
  display: block;
  font-style: normal;
}
.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 7px 14px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(3, 20, 32, 0.08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--lms-accent);
  vertical-align: top;
}
.hx-lead {
  max-width: 520px;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: #4a5661;
}
.hx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 34px;
}
.hx-link {
  font-weight: 600;
  color: var(--lms-ink);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(3, 20, 32, 0.25);
}
.hx-link:hover {
  color: var(--lms-accent);
  border-color: currentColor;
}
.hx-sec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 30px 0 0;
  font-size: 14px;
  color: var(--lms-muted);
}
.hx-sec > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hx-sec svg {
  color: var(--lms-accent);
}

.hx-path {
  position: relative;
  height: 640px;
  min-width: 0;
}
.hx-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(76, 138, 16, 0.45);
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.hx-card {
  position: absolute;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(3, 20, 32, 0.04), 0 0 0 1px rgba(3, 20, 32, 0.07), 0 18px 40px -18px rgba(3, 20, 32, 0.28);
  font-size: 13px;
  line-height: 1.35;
  color: var(--lms-ink);
}
.hx-c1 { left: 0; top: 30px; width: 290px; }
.hx-c2 { right: 0; top: 150px; width: 270px; }
.hx-c3 { left: 36px; top: 262px; width: 290px; }
.hx-c4 { right: 14px; top: 420px; width: 262px; }
.hx-c5 { left: 150px; top: 500px; width: 230px; }
.hx-card__mod {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lms-muted);
}
.hx-card__mod > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.hx-card__mod time {
  margin-left: auto;
  font-weight: 500;
}
.hx-m--jobs > span { background: #e8f0fb; color: #2f6fc0; }
.hx-m--docs > span { background: #fdf0dc; color: #b26a00; }
.hx-m--onb > span { background: #eaf4df; color: #4c8a10; }
.hx-m--learn > span { background: #efeafb; color: #6a4bc4; }
.hx-m--goals > span { background: #fde8e6; color: #c2453a; }
.hx-cand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hx-cand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.hx-cand b,
.hx-line b {
  display: block;
  font-size: 13.5px;
}
.hx-cand em {
  display: block;
  font-style: normal;
  color: var(--lms-muted);
}
.hx-ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 76%, transparent 78%),
    conic-gradient(#4c8a10 calc(var(--p) * 1%), #e6ebe1 0);
}
.hx-ring b {
  font-size: 11.5px;
  color: #4c8a10;
}
.hx-ai {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f4f8ee;
  font-size: 12px;
  color: #3d4a54;
}
.hx-ai svg {
  flex: none;
  margin-top: 2px;
  color: #4c8a10;
}
.hx-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.hx-ok,
.hx-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eaf4df;
  color: #3f7a0c;
}
.hx-score {
  background: #efeafb;
  color: #5a3db4;
}
.hx-bar {
  height: 6px;
  border-radius: 99px;
  background: #edf0ea;
}
.hx-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #599d15;
}
.hx-todo {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.hx-todo li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: #3d4a54;
}
.hx-todo li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #c9d0c4;
  border-radius: 4px;
}
.hx-todo li.is-done {
  color: var(--lms-muted);
  text-decoration: line-through;
}
.hx-todo li.is-done::before {
  display: none;
}
.hx-todo li.is-done svg {
  flex: none;
  width: 14px;
  height: 14px;
  padding: 1px;
  border-radius: 4px;
  background: #599d15;
  color: #fff;
}
.hx-big {
  margin: 0;
  font-family: var(--lms-head);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--lms-ink);
}
.hx-big small {
  font-size: 20px;
}
.hx-sub {
  margin: 6px 0 0;
  color: var(--lms-muted);
}
.hx-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--lms-ink);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(3, 20, 32, 0.5);
}
.hx-chip svg {
  color: #a6d86b;
}
.hx-chip--time { right: 6px; top: 74px; }
.hx-chip--eng { right: 40px; bottom: 6px; }
.hx-note {
  position: absolute;
  margin: 0;
  font-family: var(--lms-hand);
  font-size: 24px;
  line-height: 1;
  color: #4c8a10;
  white-space: nowrap;
}
.hx-note--a { left: 14px; top: -10px; transform: rotate(-3deg); }
.hx-note--b { left: -6px; top: 586px; width: 150px; white-space: normal; transform: rotate(-4deg); }

@media (max-width: 1020px) {
  .hx-hero { padding: 120px 0 64px; }
  .hx-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hx-path { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hx-lead { font-size: 16px; }
  .hx-path {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    padding-left: 22px;
  }
  .hx-trail { display: none; }
  .hx-path::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 34px;
    bottom: 20px;
    border-left: 2px dotted rgba(76, 138, 16, 0.5);
  }
  .hx-card,
  .hx-chip,
  .hx-note {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }
  .hx-chip { align-self: flex-start; }
  .hx-c4, .hx-chip--eng, .hx-note--b { display: none; }
  .hx-note--a { order: -1; font-size: 22px; }
}

/* путь сотрудника: ссылка на страницу модуля */
.home-panel__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 11px 20px;
  border: 1.5px solid var(--lms-ink);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lms-ink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.home-panel__more:hover {
  background-color: var(--lms-ink);
  color: #ffffff;
}
.home-panel__more svg {
  transition: transform 0.2s ease;
}
.home-panel__more:hover svg {
  transform: translateX(3px);
}