/* Plugix CRM pages (/crm/, /crm/<industry>/), rendered by server/crm.js. On top of style.css: its header, pills, sheets,
   FAQ and footer. --acc is the industry's colour (the CRM studio's template accent). */
.crm { --acc: #4b58c9; background: #fff; }
.crm main { display: block; }
.crm .tone-light { background: #fff; }
.crm-tag { margin-left: -18px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--peri-2); background: rgba(154, 166, 255, .12); box-shadow: inset 0 0 0 1px rgba(154, 166, 255, .26); text-decoration: none; }
/* UA / EN: links here (each language is its own page), dressed as the main page's .lng buttons */
.lng a { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(226, 230, 255, .7); text-decoration: none; }
.lng a:hover { color: #fff; }
.lng a[aria-current] { background: rgba(255, 255, 255, .16); color: #fff; }
.cta-s { display: none; } /* the header's button: a short label on phones, where the language switch takes its room */
@media (max-width: 480px) { .cta-l { display: none; } .cta-s { display: inline; } }
.pill-ghost-d { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pill-ghost-d:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- hero */
.crm-hero { position: relative; overflow: hidden; color: var(--on-dark); padding: calc(var(--top-h) + clamp(44px, 6vw, 88px)) 0 calc(clamp(64px, 8vw, 110px) + var(--sheet));
  background: radial-gradient(55% 65% at 88% 28%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%), radial-gradient(90% 80% at 68% 50%, #18225e 0%, #0c1233 45%, var(--night) 80%); }
.crm-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.crm-hero h1 { margin: 4px 0 18px; font-size: clamp(38px, 5vw, 66px); letter-spacing: -0.045em; line-height: 1.02; color: #fff; text-wrap: balance; }
.crm-hero .lead { margin: 0; max-width: 34em; font-size: clamp(16.5px, 1.4vw, 19px); color: var(--on-dark-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13.5px; color: var(--on-dark-3); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.ch-points { list-style: none; display: grid; gap: 10px; margin: 26px 0 0; padding: 0; }
.ch-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: var(--on-dark); }
.ch-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }


/* industry pages: a conversation with the assistant */
.cm { justify-self: end; width: 100%; max-width: 480px; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--glass-d); box-shadow: inset 0 0 0 1px var(--glass-line-d), 0 40px 100px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hair-d); }
.cm-head .ava { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, #2d3c9a, #9aa6ff); color: #fff; }
.cm-head .ava .pm { width: 20px; height: 20px; }
.cm-head .ava i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px #10163a; }
.cm-head b { display: block; font-size: 15px; color: #fff; }
.cm-head small { font-size: 12.5px; color: var(--on-dark-3); }
.cm-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.cm-m { max-width: 86%; margin: 0; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; animation: cm-in .55s var(--ease) both; }
.cm-m.c { align-self: flex-end; border-bottom-right-radius: 6px; background: #fff; color: var(--ink); }
.cm-m.a { align-self: flex-start; border-bottom-left-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hair-d); }
.cm-m:nth-child(2) { animation-delay: .7s; } .cm-m:nth-child(3) { animation-delay: 1.5s; } .cm-m:nth-child(4) { animation-delay: 2.2s; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-chips b { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--peri-2); box-shadow: inset 0 0 0 1px rgba(154, 166, 255, .35); }
.cm figcaption { padding: 0 18px 16px; font-size: 12px; color: var(--on-dark-3); }
@keyframes cm-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cm-m { animation: none; } }

/* ---------------------------------------------------------------- dark bands */
.crm-dark { background: radial-gradient(80% 60% at 20% 0%, #141d4d 0%, #0a0f2a 50%, var(--night) 90%); color: var(--on-dark); }
.crm-dark h2, .crm-dark h3 { color: #fff; }
.crm-dark .sec-lead { color: var(--on-dark-2); }
.crm-dark .sec-head.ed { border-top-color: var(--hair-d); }

/* feature tiles: the shared base (dark) and an industry's screens (light) */
.feat { padding: 26px 24px 24px; border-radius: var(--r-card); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair-d); }
.feat h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.feat p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-dark-2); }
.bento.light .feat { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.bento.light .feat p { color: var(--ink-2); }

/* ---------------------------------------------------------------- /crm/: industry cards */
.ind-group + .ind-group { margin-top: 56px; }
.ind-group > h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.03em; }
.ind-group > p { max-width: 40em; margin: 6px 0 22px; color: var(--ink-2); }
.ind-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.ind-grid:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ind-grid > li { display: flex; }
.ind-card { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 26px 24px 22px; overflow: hidden; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.ind-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--hair), var(--sh-2); }
.ic-top { display: flex; align-items: center; gap: 12px; }
.ic-top b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.ic-text { font-size: 15px; color: var(--ink-2); }
.ic-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--acc); }
.ic-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.ind-card:hover .ic-more svg { transform: translateX(3px); }

/* numbered steps (/crm/ «Запуск», the dealer's move) */
.steps3 { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.steps3 li { counter-increment: s; padding: 26px 24px; border-radius: var(--r-card); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.steps3 li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--acc); }
.steps3 b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.steps3 p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }

/* ---------------------------------------------------------------- industry: the assistant */
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ai-l { list-style: none; margin: 0; padding: 0; }
.ai-l li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hair-d); font-size: 17px; color: var(--on-dark); }
.ai-l li:last-child { border-bottom: 1px solid var(--hair-d); }
.ai-side { display: grid; gap: 14px; }
.rule { padding: 24px; border-radius: var(--r-card); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-d); }
.rule p { margin: 0; font-size: 16px; color: var(--on-dark); }
.rule .rule-k { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--peri); }
.rule a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.rule a svg { width: 16px; height: 16px; }

/* industry: four everyday headaches (a question in large type, the CRM's answer beside it) and a day with the CRM */
/* pains and /crm/'s «у чому різниця» (also .pains): columns, each a question over its answer (a row each left half of every row empty) */
.pains { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; }
.pains li { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 22px; border-top: 1px solid var(--hair); }
.pn-q { margin: 0; font-size: clamp(18px, 1.45vw, 21px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.pn-a { margin: 0; font-size: 15.5px; color: var(--ink-2); }

/* industry: «try it yourself» — the page's assistant in a made-up business (js/crm-assist.js); the questions are the visitor's lines */
.try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-lg);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair-d); }
.try h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; letter-spacing: -0.035em; color: #fff; }
.try-t > p { max-width: 34em; margin: 12px 0 0; font-size: 16px; color: var(--on-dark-2); }
.try .try-biz { display: grid; gap: 2px; margin: 18px 0 22px; }
.try-biz b { font-weight: 600; color: #fff; }
.try-biz span { font-size: 14px; color: var(--on-dark-3); }
.try-q { list-style: none; display: grid; justify-items: end; gap: 10px; margin: 0; padding: 0; }
.try-q button { max-width: 100%; border: 0; padding: 12px 18px; border-radius: 20px 20px 6px 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .2); color: #fff; font: inherit; font-size: 15.5px; font-weight: 550; text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s, transform .25s var(--ease); }
.try-q button:hover { background: color-mix(in srgb, var(--acc) 30%, transparent); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .45); transform: translateX(-3px); }
.try-q button:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }
html:not(.js) .try-q, html:not(.js) .try [data-demo-open] { display: none; }

/* the demo assistant's cards, inside the chat (style.css's .pxa-card) */
.pxd-h { display: grid; gap: 2px; margin: 0 0 10px; }
.pxd-h b { font-size: 14.5px; font-weight: 650; color: #fff; }
.pxd-h span { font-size: 12.5px; color: var(--pt-3); }
.pxd-list ul, .pxd-sum ul, .pxd-loan ul { list-style: none; margin: 0; padding: 0; }
.pxd-list li, .pxd-sum li, .pxd-loan li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px; border-top: 1px solid rgba(195, 201, 255, .08); font-size: 13px; color: var(--pt-2); }
.pxd-list li span small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--pt-3); }
.pxd-list li b, .pxd-sum li b, .pxd-loan li b { font-weight: 650; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.pxd-list li b small { display: block; font-size: 11.5px; font-weight: 500; color: var(--pt-3); }
.pxd-cls li { align-items: center; }
.pxd-cls b { flex: none; }
.pxd-cls b .pxd-chips { margin-top: 6px; justify-content: flex-end; }
.pxd-cls b button { white-space: nowrap; }
.pxd-p { margin: 0 0 8px; font-size: 13.5px; color: var(--pt-2); }
.pxd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pxd-chips button { border: 0; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .22); color: #fff; font: inherit; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s, box-shadow .2s; }
.pxd-chips button:hover:not(:disabled) { background: rgba(154, 166, 255, .18); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .5); }
.pxd-chips button:disabled { opacity: .4; cursor: default; }
.pxd-chips button.on, .pxd-chips button.on:disabled { opacity: 1; background: #fff; color: #0b0f26; }
.pxd-ok { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; color: #fff; }
.pxd-ok svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #9fe3b8; color: #0b2a17; }
.pxd-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pxd-table th { padding: 0 6px 6px; font-size: 11.5px; font-weight: 600; text-align: right; color: var(--pt-3); }
.pxd-table td { padding: 7px 6px; border-top: 1px solid rgba(195, 201, 255, .08); text-align: right; color: #fff; }
.pxd-table th:first-child, .pxd-table td:first-child { padding-left: 0; text-align: left; color: var(--pt-2); }
.pxd-table td small { color: var(--pt-3); }
.pxd-table td.lo { font-weight: 700; color: #ffb4a2; }
.pxd-car em { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #0b0f26; font-size: 11.5px; font-style: normal; font-weight: 700; }
.pxd-price { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.pxd-price small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--pt-3); }
.pxd-car .pxd-chips { margin-top: 10px; }
.pxd-loan .pxd-price { margin-bottom: 8px; }
.pxd-lead p { display: grid; gap: 3px; margin: 0; }
.pxd-lead b { font-size: 14.5px; color: #fff; }
.pxd-lead span { font-size: 13px; color: var(--pt-2); }

/* industry: the start template and the roles */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tpl { padding: 22px 22px 12px; border-radius: var(--r-card); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.tpl h3 { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.tpl ul { list-style: none; margin: 0; padding: 0; }
.tpl li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.tpl li:first-child { border-top: 0; }
.tpl li b { font-weight: 600; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tpl .tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px; }
.tpl .tags li { padding: 6px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; }
.tpl-note { display: flex; align-items: flex-start; gap: 12px; max-width: 60em; margin: 18px 0 0; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--acc) 7%, #fff); font-size: 15px; }
.crm #faq { padding-bottom: clamp(56px, 6vw, 80px); }
.crm #faq .sec-lead a { color: var(--pick); }
.more-ind { padding: 0 0 clamp(100px, 10vw, 150px); }
.more-ind h2 { margin-bottom: 18px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.03em; }
.more-ind ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.more-ind a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s, box-shadow .2s; }
.more-ind a:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------------------------------------------------------------- industry: the price (server/crm.js priceSec) */
.tiers { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; }
.tiers li { display: grid; gap: 4px; padding: 18px 0 6px; border-top: 2px solid var(--acc); }
.tiers span { font-size: 15px; color: var(--ink-2); }
.tiers b { font-size: clamp(34px, 3.6vw, 46px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiers small { font-size: 13px; color: var(--ink-3); } .tiers small i { font-style: normal; }
.tiers em { margin-top: 6px; font-size: 14px; font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tiers li.typ b { color: var(--acc); } /* the size the headline names */
.tier-note { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.terms { list-style: none; max-width: 52em; margin: clamp(36px, 4vw, 52px) 0 32px; padding: 0; border-bottom: 1px solid var(--hair); }
.terms li { padding: 15px 0; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink); }
.terms a { color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: 3px; }
.ch-price { margin: 18px 0 0; font-size: 15px; color: var(--on-dark-2); }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-price { grid-column: 2; margin-top: 16px; } /* under the buttons (crm-motion.css's hero grid) */
.ch-price a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.ch-price a:hover { border-bottom-color: #fff; }
.ic-from { font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* industry: «Що ви отримаєте за добу» in the price (server/crm.js dayBlock): rows on hairlines, the typical size's price, the two ways on */
.inday { max-width: 52em; margin: clamp(36px, 4vw, 52px) 0 0; }
.inday h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.03em; }
.inday-rows { list-style: none; margin: 16px 0 0; padding: 0; border-bottom: 1px solid var(--hair); }
.inday-rows li { padding: 14px 0; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink); }
.inday-price { margin: 26px 0 0; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.045em; line-height: 1.1; color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inday-price b { font-weight: 500; }
.inday-price span { font-size: .42em; letter-spacing: 0; color: var(--ink-2); }
.inday-sub { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.inday-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.inday-note { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- /privacy/ (server/crm.js privacyPage): one reading column */
.privacy { padding-top: calc(var(--top-h) + 48px); }
.privacy .wrap { max-width: 760px; }
.privacy h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.04em; }
.privacy .pv-lead { margin: 12px 0 8px; color: var(--ink-2); font-size: 17px; }
.privacy h2 { margin: 36px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.privacy p, .privacy li { font-size: 16px; line-height: 1.6; color: var(--ink); }
.privacy ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hair); }
.privacy li { padding: 12px 0; border-top: 1px solid var(--hair); }
.privacy .cl { font-weight: 600; font-variant-numeric: tabular-nums; } /* /oferta/: the clause number */
.privacy h2 + p, .privacy p + p { margin-top: 10px; }
/* the 404 page (server/crm.js notFoundPage): the same column, three ways on */
.privacy.nf { min-height: 72vh; }
.privacy .nf-l { margin-top: 28px; }
.nf-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.nf-l a { font-size: 18px; font-weight: 600; color: var(--ink); text-underline-offset: 4px; }
.nf-l span { color: var(--ink-2); font-size: 15px; }

/* ---------------------------------------------------------------- the lead form */
.crm-lead { padding: clamp(90px, 10vw, 140px) 0; background: radial-gradient(80% 90% at 75% 50%, #1a2462 0%, #0d1335 50%, var(--night) 85%); color: var(--on-dark); }
.crm-lead-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.crm-lead h2 { font-size: clamp(32px, 3.8vw, 50px); letter-spacing: -0.045em; line-height: 1.05; color: #fff; text-wrap: balance; }
.crm-lead .sec-lead { color: var(--on-dark-2); }
.cl-form { display: grid; gap: 14px; padding: 26px; border-radius: var(--r-lg); background: var(--glass-d); box-shadow: inset 0 0 0 1px var(--glass-line-d); }
.cl-f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--on-dark-2); }
.cl-f i { font-style: normal; font-weight: 500; color: var(--on-dark-3); }
.cl-f input, .cl-f select { width: 100%; padding: 13px 16px; border: 0; border-radius: 14px; outline: none; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 16px; font-weight: 500; }
.cl-f select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background: rgba(255, 255, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23c3c9ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.cl-f select option { color: var(--ink); }
.cl-f input::placeholder { color: var(--on-dark-3); }
.cl-f input:focus-visible, .cl-f select:focus-visible { box-shadow: inset 0 0 0 2px var(--peri); }
.cl-f input[aria-invalid] { box-shadow: inset 0 0 0 2px #ff9b9b; }
.cl-form .pill { justify-self: start; }
.cl-form .pill[disabled] { opacity: .6; pointer-events: none; }
.cl-out { min-height: 1.5em; margin: 0; font-size: 14px; color: var(--on-dark-2); }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1000px) {
  .crm-hero-in, .ai-grid, .crm-lead-in, .try { grid-template-columns: 1fr; }
  .try-q { justify-items: start; }
  .cm { justify-self: start; }
  .ind-grid, .steps3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .crm-tag { margin-left: -2px; }
  .lng a { padding: 4px 8px; font-size: 11.5px; }
  .crm-hero h1 { font-size: clamp(34px, 9.4vw, 42px); }
  .ind-grid, .ind-grid:has(> li:nth-child(2):last-child), .steps3 { grid-template-columns: 1fr; }
  .ch-cta .pill { flex: 1 1 auto; }
  .crm .faq-grid { grid-template-columns: 1fr; }
  .ai-l li { font-size: 16px; }
  .cl-form { padding: 20px; }
  .cl-form .pill { justify-self: stretch; }
  .tiers b { font-size: 30px; }
  .inday-go .pill { flex: 1 1 auto; }
}

/* /crm/ as «CRM-система»: the price line under the hero's lead, the definition, the two groups' prices (typography and hairlines only) */
.ch-price { margin: 18px 0 0; font-size: clamp(15px, 1.2vw, 17px); color: var(--on-dark-2); }
.ch-price b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-price span { color: var(--on-dark-2); opacity: .8; }
.what-text { display: grid; gap: 14px; max-width: 46em; }
.what-text p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); }
.what-text p:first-child { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink); }
.what-text a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acc); text-decoration: none; }
.what-text a svg { width: 16px; height: 16px; }
.price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-bottom: 28px; }
.pg { display: grid; gap: 6px; align-content: start; padding: 20px 0 8px; border-top: 2px solid var(--acc); }
.pg h3 { margin: 0 0 4px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.02em; }
.pg-from { margin: 0; font-size: 15px; color: var(--ink-2); }
.pg-from b { display: block; font-size: clamp(34px, 3.6vw, 46px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-crm { margin: 0; font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-unit { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.pg-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 14.5px; }
.pg-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pg-links a:hover { text-decoration-color: var(--acc); }

/* the blog (server/blog.js): a reading column, hairlines between sections, tables that scroll inside their own box on a phone */
.post { padding-top: calc(var(--top-h) + 40px); }
.post .wrap { max-width: 760px; }
.post h1 { margin: 10px 0 12px; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.crumbs { font-size: 14px; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--acc); }
.post-meta { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); }
.post-lead { margin: 0 0 26px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink); }
.toc { margin: 0 0 18px; padding: 16px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.toc p { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15.5px; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--acc); }
.post section { padding: 6px 0 4px; }
.post h2 { margin: 34px 0 12px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.post section > p, .post section li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.post section > p { margin: 0 0 14px; }
.post section > ul, .post section > ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.post section b { color: var(--ink); font-weight: 600; }
.post section a { color: var(--acc); }
.tbl { overflow-x: auto; margin: 6px 0 18px; border-top: 1px solid var(--line-2); }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; color: var(--ink-2); }
.tbl th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.tbl td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl caption { caption-side: bottom; padding-top: 8px; text-align: left; font-size: 13px; color: var(--ink-2); }
.post #faq .faq-l { display: grid; }
.post #sources { padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
.post #sources li { color: var(--ink-2); }
.post .src-url { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.post-cta { margin: 40px 0 0; padding: 26px 0 0; border-top: 2px solid var(--acc); }
.post-cta h2 { margin-top: 0; }
.post-cta p { color: var(--ink-2); }
.post-related { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 15px; }
.post-related a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.post-list { list-style: none; margin: 10px 0 0; padding: 0; }
.post-list li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line-2); }
.post-list a { font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.post-list a:hover { color: var(--acc); }
.post-list time { font-size: 14px; color: var(--ink-2); }
.post-list p { margin: 0; color: var(--ink-2); }

/* /crm/#compare and #how: the edge list reuses .pains; the table (.tbl) is the blog's; a plain closing line; the steps after a request */
#compare .tbl { margin: 36px 0 8px; }
/* the tick table (/crm/#compare and the article): Plugix CRM's row first and in ink, ticks centred */
.ticks th:not(:first-child), .ticks td:not(:first-child) { text-align: center; }
.ticks tbody tr:first-child td { color: var(--ink); font-weight: 600; }
.tk { color: var(--acc); font-weight: 700; }
.tk-no { color: var(--ink-2); }
.cmp-more { max-width: 52em; margin: 22px 0 0; font-size: 15.5px; color: var(--ink-2); }
.cmp-more a, .pn-a a { color: var(--acc); }
.after { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }
.after h3 { margin: 0 0 12px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.02em; }
.after ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 48em; font-size: 16px; color: var(--ink-2); }

/* /pricing/'s first screen: three prices on hairlines, no cards */
.pr-sum { margin: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.pr-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.pr-sum dt { font-size: clamp(15px, 1.2vw, 17px); color: var(--on-dark-2); }
.pr-sum dd { margin: 0; font-size: 15px; color: var(--on-dark-2); white-space: nowrap; }
.pr-sum b { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.pr-facts dd { font-size: clamp(15px, 1.2vw, 17px); color: #fff; white-space: normal; text-align: right; }

/* ---------------------------------------------------------------- /configurator/ (server/configurator.js): the page around the configurator,
   whose own styles (the questions, the packages, «Ваш Plugix», the phone's bar) are css/style.css's, shared with the main page's #calc */
.cfg-hero { padding-bottom: calc(clamp(44px, 6vw, 80px) + var(--sheet)); }
.cfg-hero h1 { max-width: 14em; }
.cfg-hero .lead { max-width: 36em; }
.cfg-draft { display: inline-block; margin: 0 0 20px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #ffd9a8; background: rgba(255, 190, 110, .1); box-shadow: inset 0 0 0 1px rgba(255, 190, 110, .3); }
#cfg { padding: 0; }

/* ---------------------------------------------------------------- the section's own pages (owner, 21.10.2026: «продумай раздел crm» → «продолжай»)
   /crm/'s two doors, the map of areas (/crm/#can, /crm/features/#map), each area in detail, the integrations list. Words and hairlines only:
   no icon tiles, no tick lists, no eyebrows (the owner's 19.10 rule) */
.ch-doors { display: grid; margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-doors { grid-column: 2; }
.door { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none; }
.door b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.door span { grid-column: 1; font-size: 14.5px; color: var(--on-dark-2); }
.door span b { font-size: inherit; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.door svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--on-dark-2); transition: transform .2s, color .2s; }
.door:hover svg, .door:focus-visible svg { transform: translateX(3px); color: #fff; }
.door-s { justify-self: start; margin-top: 12px; font-size: 14px; color: var(--on-dark-2); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.door-s:hover { color: #fff; }
.can { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin: 0; padding: 0; }
.can li { border-top: 1px solid var(--hair); }
.can a { display: grid; gap: 4px; height: 100%; padding: 18px 0 22px; color: var(--ink); text-decoration: none; }
.can b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.can span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.can small { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.can a:hover b, .can a:focus-visible b { color: var(--acc); }
.can-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: clamp(28px, 3vw, 40px) 0 0; }
.can-more > a:not(.pill) { font-weight: 600; color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: 3px; }
/* /crm/features/: each area a row that opens (owner, 22.10.2026: «много пустого места»): the name and for whom, its line, a chevron; inside,
   the screen where /crm/ has one, what it does and where it is included */
.area { border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--top-h) + 12px); }
.area:last-child { border-bottom: 1px solid var(--hair); }
.area summary { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) 22px; column-gap: clamp(20px, 3vw, 48px); align-items: center; padding: 18px 0; cursor: pointer; list-style: none; }
.area summary::-webkit-details-marker { display: none; }
.area h2, .crm-ip main .sec .area h2 { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.area summary:hover h2 { color: var(--acc); }
.area summary > svg { grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--ink-3); transition: rotate .2s var(--ease); }
.area details[open] > summary > svg { rotate: 180deg; }
.area summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; }
.area-who { grid-column: 1; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--acc); }
.area-line { grid-column: 2; grid-row: 1 / span 2; font-size: 15.5px; color: var(--ink-2); }
.area-body { display: grid; gap: 14px; align-content: start; padding: 4px 0 28px; }
.area-body.has-scr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); }
.area-body.has-scr > :not(.area-scr) { grid-column: 1; }
.area-body.has-scr .area-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area-scr { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.area-body > p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.area-body .area-inc { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--hair); font-size: 15px; color: var(--ink-2); }
.area-inc span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.area-inc a { color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: 3px; }
.igr { padding: clamp(24px, 3vw, 36px) 0 0; scroll-margin-top: calc(var(--top-h) + 12px); }
.igr h2 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.03em; }
.igr-l { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.igr-l li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 6px clamp(16px, 2.4vw, 36px); padding: 15px 0; border-top: 1px solid var(--hair); }
.igr-l b { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.igr-l li > span { font-size: 15px; color: var(--ink-2); }
.igr-l small { font-size: 14px; color: var(--ink-3); }
@media (max-width: 960px) { .can { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .area summary { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 4px; }
  .area-who { grid-row: 2; margin: 0; } .area-line { grid-column: 1; grid-row: 3; font-size: 15px; }
  .area summary > svg { grid-column: 2; grid-row: 1; }
  .area-body.has-scr { grid-template-columns: 1fr; } .area-body.has-scr > * { grid-column: 1; } .area-scr { grid-row: auto; order: 9; }
  .area-body.has-scr .area-pts { grid-template-columns: 1fr; }
  .igr-l li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; } .igr-l li > span { grid-column: 1 / -1; grid-row: 2; } .igr-l small { text-align: right; }
}
@media (max-width: 560px) { .can { grid-template-columns: 1fr; } }

/* without the last stock marks (21.10.2026, the plan's «Дизайн»): template headings in sentence case, the launch steps numbered quietly
   in ink, no avatar «online» dot (the drifting light, the cursor glow and the shader light are gone from crm-motion.css / js) */
.tpl h3 { font-size: 15px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.steps3 li::before { content: counter(s); font-size: 15px; letter-spacing: 0; color: var(--ink-3); }
.cm-head .ava { background: #1c2558; }
.cm-head .ava i { display: none; }
.area-more { margin: 0; }
.area-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acc); text-decoration: none; }
.area-more a svg { width: 16px; height: 16px; }
/* the store's «Як іде замовлення»: five steps in order, numbered quietly in ink */
/* /pricing/#packs: the stores' and the services' lists under their own small headings */
#packs h3 { margin: clamp(24px, 3vw, 36px) 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
/* «Як почати»: four steps in a row (two, then one on narrower screens, as .steps3) */
.steps3.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps3.s4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps3.s4 { grid-template-columns: 1fr; } }
/* a price's terms one click away: the summary reads as a quiet link, the list opens under it */
.terms-d { max-width: 52em; margin: clamp(28px, 3vw, 40px) 0 28px; }
.terms-d summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.terms-d summary::-webkit-details-marker { display: none; }
.terms-d summary svg { width: 16px; height: 16px; transition: rotate .2s var(--ease); }
.terms-d[open] summary svg { rotate: 180deg; }
.terms-d summary:hover { color: var(--ink); }
.terms-d .terms { margin: 14px 0 0; }
/* /crm/features/: the contents as a row of links, and each area as rows to scan (a term over its line, two columns on wide screens) */
.toc { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.toc a { display: inline-block; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { box-shadow: inset 0 0 0 1px var(--acc); color: var(--acc); }
.area-pts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; }
.area-pts li { display: grid; gap: 3px; align-content: start; padding: 13px 0; border-top: 1px solid var(--hair); }
.area-pts b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.area-pts span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .area-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .area-pts { grid-template-columns: 1fr; } }
/* phones: an industry card is its name, price and link (the screen picture and the line are on its page); /crm/'s map without the «for whom» tag */
@media (max-width: 640px) {
  .ind-card .ic-shot, .ind-card .ic-text { display: none; }
  .ind-grid .ind-card { padding-bottom: 20px; }
  .ind-grid .ic-more { opacity: 1; translate: 0 0; } /* no hover on a phone: the arrow stays */
  .can small { display: none; }
}

/* ================================================================ /crm/: «Один день вашого бізнесу» (server/crm-day.js; the approved comp
   .impeccable/mocks/hub-day-b.png at 1536 × 1024: nav 64, H1 cap 40, chips 50, buttons 54, the moment 1386 × 478 split 165 / 699 / 522) */
.dh { position: relative; color: var(--on-dark); padding: calc(var(--top-h) + clamp(22px, 2.4vw, 36px)) 0 clamp(22px, 1.7vw, 26px);
  background: radial-gradient(55% 75% at 96% 6%, rgba(46, 64, 178, .5), transparent 72%), linear-gradient(180deg, #080c22 0%, #0a1029 55%, #0b1230 100%); }
.dh .wrap { width: min(1390px, 100% - var(--gut) * 2); }
.dh-h { margin: 0; font-size: clamp(34px, 3.75vw, 58px); font-weight: 600; line-height: 1.13; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.dh-pick { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 1.3vw, 20px); }
.dh-pick > * { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(214, 220, 255, .26);
  font: inherit; font-size: 15.5px; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.dh-pick > *:hover { box-shadow: inset 0 0 0 1px rgba(214, 220, 255, .55); }
.dh-pick [aria-pressed="true"] { background: #fff; color: var(--night); box-shadow: none; }
.dh-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.dh-go .pill { height: 54px; padding: 0 30px; font-size: 16.5px; }
.dh-go .pill-ghost-d { box-shadow: inset 0 0 0 1px rgba(214, 220, 255, .3); background: transparent; }
.dh-price { margin: 0 0 0 14px; font-size: 16px; color: var(--on-dark-2); }
.moment { position: relative; margin-top: 12px; height: clamp(420px, 31.1vw, 478px); border-radius: 22px; background: rgba(8, 12, 32, .6); box-shadow: inset 0 0 0 1px rgba(214, 220, 255, .12); }
.mo { display: grid; grid-template-columns: minmax(0, 165fr) minmax(0, 699fr) minmax(0, 522fr); height: 100%; }
.mo[hidden] { display: none; }
.mo-rail { position: relative; list-style: none; display: flex; flex-direction: column; gap: 30px; margin: 0; padding: 46px 12px 0 22px; }
.mo-rail::before { content: ''; position: absolute; left: 28px; top: 54px; height: 300px; width: 1px; background: rgba(214, 220, 255, .18); }
.mo-rail li { position: relative; padding-left: 24px; }
.mo-rail li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #6c76a8; }
.mo-rail a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.mo-rail b { font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.mo-rail span { font-size: 13.5px; line-height: 1.35; color: var(--on-dark-2); }
.mo-rail a:hover span { color: #fff; }
.mo-rail .now::before { left: 0; top: 4px; width: 13px; height: 13px; background: #6b78e6; box-shadow: 0 0 0 4px rgba(107, 120, 230, .22); }
.mo-photo { position: relative; margin: 0; overflow: hidden; }
.mo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mo-photo::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(4, 6, 16, .72)); }
.mo-photo figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 28px; display: grid; gap: 8px; color: #fff; }
.mo-time { font-size: clamp(48px, 4.7vw, 72px); font-weight: 600; line-height: .95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mo-photo figcaption span { font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.mo-side { position: relative; }
/* the phone: a dark glass shell like the plugix.ai chat, the conversation in it */
.ph { position: absolute; left: 5%; top: 9px; display: flex; flex-direction: column; width: min(306px, 59%); height: calc(100% - 38px); max-height: 440px; padding: 12px 14px 14px; border-radius: 42px;
  background: linear-gradient(180deg, #0d1430, #0a1026); box-shadow: inset 0 0 0 2px rgba(140, 152, 220, .38), 0 30px 70px -20px rgba(0, 0, 0, .7); color: var(--on-dark); }
.ph-bar { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 6px 12px 10px; font-size: 12.5px; }
.ph-bar i { position: absolute; left: 50%; top: 4px; width: 92px; height: 22px; margin-left: -46px; border-radius: 999px; background: #04060f; }
.ph-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 6px 12px; border-bottom: 1px solid rgba(214, 220, 255, .1); }
.ph-ava { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a346b; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; }
.ph-head b { display: grid; font-size: 13px; color: #fff; } .ph-head small { font-size: 11px; font-weight: 500; color: var(--on-dark-3); }
.ph-body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 12px 2px; overflow: hidden; }
.ph-m { position: relative; max-width: 88%; margin: 0; padding: 8px 11px 16px; border-radius: 14px; font-size: 12.5px; line-height: 1.42; }
.ph-m small, .ph-ok small { position: absolute; right: 9px; bottom: 3px; font-size: 9.5px; color: rgba(222, 227, 255, .5); }
.ph-m.c { align-self: flex-end; border-bottom-right-radius: 5px; background: #24356f; color: #fff; }
.ph-m.r { background: #3d55b0; }
.ph-m.a { align-self: flex-start; margin-left: 30px; border-bottom-left-radius: 5px; background: #161e3c; color: #e9ecfb; }
.ph-p { position: absolute; left: -30px; bottom: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--night); }
.ph-p svg { width: 13px; height: 13px; }
.ph-ok { position: relative; display: flex; gap: 8px; margin: 0 0 0 30px; padding: 9px 11px 16px; border-radius: 14px; background: #121a36; font-size: 12px; color: var(--on-dark-2); }
.ph-ok span { display: grid; gap: 2px; } .ph-ok b { color: #fff; font-size: 12.5px; }
.ph-ok::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.ph-ok .ph-p { left: -30px; }
.ph-in { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 7px 7px 14px; border-radius: 999px; background: #131a36; font-size: 11.5px; color: var(--on-dark-3); }
.ph-in span { flex: 1; } .ph-in i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #4b63d8; color: #fff; }
.ph-in svg { width: 14px; height: 14px; }
.mo-cal { position: absolute; right: -22px; top: 109px; display: grid; gap: 4px; width: 228px; padding: 14px 16px 16px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .55); }
.mo-cal p { margin: 0; font-size: 13.5px; color: var(--ink-2); } .mo-cal b { font-size: 15px; color: var(--ink); } .mo-cal-who { color: #3f4fbf !important; font-weight: 600; }
.mo-try { position: absolute; left: 5%; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; }
.mo-try svg { width: 16px; height: 16px; } .mo-try:hover { color: var(--peri-2); }
/* the conversation plays once when its business shows */
.js .mo:not([hidden]) .ph-m, .js .mo:not([hidden]) .ph-ok, .js .mo:not([hidden]) .mo-cal { animation: ph-in .5s var(--ease) both; }
.js .mo .ph-m.a { animation-delay: .5s; } .js .mo .ph-m.r { animation-delay: 1.1s; } .js .mo .ph-ok { animation-delay: 1.5s; } .js .mo .mo-cal { animation-delay: 1.9s; }
@keyframes ph-in { from { opacity: 0; translate: 0 8px; } }
html.reduced .mo .ph-m, html.reduced .mo .ph-ok, html.reduced .mo .mo-cal { animation: none; }

/* the industries as photographs */
.pt-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; margin: 18px 0 0; padding: 0; }
.ind-group + .ind-group { margin-top: 48px; }
.ind-group:last-child .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); text-decoration: none; }
.pt-img { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; overflow: hidden; border-radius: 16px; background: var(--paper); }
.pt-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.pt:hover .pt-img img { scale: 1.04; }
.pt-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pt:hover .pt-name { color: var(--pick); }
.pt-line { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pt-price { margin-top: auto; padding-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the rest of the day */
/* «Один день»: the three moments side by side on one rail (owner, 22.10.2026: «очень много пустого пространства … чтобы компактнее»), each
   its time and dot on the line, a line of text, the screen under it; under 1000 px they swipe, the next one peeking in */
.dm { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 1.8vw, 28px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dm[hidden] { display: none; }
.dm > li { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 22px; }
.dm > li::before { content: ''; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: #6b78e6; box-shadow: 0 0 0 4px rgba(107, 120, 230, .18); }
.dm-t h3 { margin: 0 0 6px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.dm-time { margin-right: 8px; font-weight: 700; color: var(--pick); font-variant-numeric: tabular-nums; }
.dm-t p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.dm-v { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 1.6vw, 22px); border-radius: 20px; background: linear-gradient(180deg, #eef0f8, #e6e9f4); }
@media (max-width: 999px) {
  .dm { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 420px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); border-top: 0; }
  .dm::-webkit-scrollbar { display: none; }
  .dm > li { scroll-snap-align: start; margin-top: 6px; border-top: 1px solid var(--line); }
}
/* small CRM screens: a light sheet, the CRM's own rows and chips */
.dc { width: 100%; max-width: 400px; padding: 16px 18px 18px; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px -18px rgba(16, 25, 56, .35); }
.dc-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.dc-rows { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.dc-rows li { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--paper); font-size: 14px; }
.dc-rows li > b { flex: none; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.dc-rows li > span { flex: 1; display: grid; gap: 2px; } .dc-rows small { font-size: 12.5px; color: var(--ink-3); }
.dc-rows li.on { background: var(--pick-soft); box-shadow: inset 0 0 0 1px rgba(45, 60, 154, .18); }
.dc-wo .dc-rows li { justify-content: space-between; }
.dc-free { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.dc-sum { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dc-sub { margin: 2px 0 12px; font-size: 14px; color: var(--ink-2); }
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.dc-chip { padding: 5px 10px; border-radius: 999px; background: var(--paper); font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dc-chip.ok { background: #e3f4ea; color: var(--ok); }
.dc-tg { width: 100%; max-width: 360px; padding: 12px 14px; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: 0 16px 36px -18px rgba(16, 25, 56, .35); font-size: 14.5px; line-height: 1.45; }
.dc-tg p { margin: 0; } .dc-tg-h { display: flex; justify-content: space-between; margin-bottom: 6px !important; font-size: 13px; } .dc-tg-h b { color: #2a7ab0; } .dc-tg-h small { color: var(--ink-3); }
.dc-tg-b { display: flex; gap: 6px; margin-top: 10px !important; }
.dc-tg-b span { flex: 1; padding: 7px; border-radius: 8px; background: #eef4fa; text-align: center; font-size: 13px; font-weight: 600; color: #2a7ab0; }

/* «Справи власника»: the tabs, a real screen each */
.jt { display: flex; gap: clamp(18px, 3vw, 44px); margin: 0 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.jt button { flex: none; margin-bottom: -1px; padding: 0 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.jt button:hover { color: var(--ink); }
.jt button[aria-selected="true"] { color: var(--ink); border-bottom-color: #4b63d8; }
.jp { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.jp[hidden] { display: none; }
.jp-txt h3 { margin: 0 0 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.025em; }
.jp-txt p { margin: 0 0 16px; font-size: 16.5px; color: var(--ink-2); }
.jp-txt a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pick); text-decoration: none; } .jp-txt a svg { width: 16px; height: 16px; }
.jp-cab { overflow: hidden; border-radius: 20px; background: #f6f7fb; box-shadow: 0 30px 60px -30px rgba(16, 25, 56, .45), 0 0 0 1px rgba(16, 25, 56, .06); }
.jp-cab-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 18px; background: var(--night); color: #fff; font-size: 14px; }
.jp-cab-h .pm { width: 18px; height: 18px; } .jp-cab-h i { padding: 2px 7px; border-radius: 999px; background: rgba(154, 166, 255, .16); font-style: normal; font-size: 11px; font-weight: 700; color: var(--peri-2); }
.jp-cab > :not(.jp-cab-h) { margin: 18px; }
.js-inbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.js-inbox ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.js-inbox li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #fff; font-size: 13px; color: var(--ink-2); }
.js-inbox li.on { box-shadow: inset 0 0 0 1px rgba(75, 99, 216, .4); }
.js-inbox li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6e9f6; font-style: normal; font-weight: 700; color: var(--pick); }
.js-inbox li b { display: flex; gap: 6px; font-size: 13.5px; color: var(--ink); } .js-inbox li b small { font-weight: 600; color: #4b63d8; }
.js-inbox li span { display: grid; gap: 2px; min-width: 0; } .js-inbox time { font-size: 11.5px; color: var(--ink-3); }
.js-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #fff; }
.js-chat .ph-m { font-size: 13px; } .js-chat .ph-m.c { background: #e9edfb; color: var(--ink); } .js-chat .ph-m.a { margin-left: 0; background: #24356f; color: #fff; }
.js-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.js-who { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.js-b { display: grid; gap: 2px; min-height: calc(var(--h) * 26px); margin: 0 0 8px; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #dfe3f4; font-size: 13px; color: var(--ink-2); }
.js-b b { color: var(--ink); font-variant-numeric: tabular-nums; } .js-b small { font-weight: 700; color: #4b63d8; }
.js-b.ai { background: #eef0fd; } .js-b.free { background: transparent; box-shadow: none; border: 1px dashed #c8cde6; color: var(--ok); }
.js-pay { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.js-pay .dc { max-width: none; box-shadow: none; }
.js-tbl { width: calc(100% - 36px); border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; }
.js-tbl th, .js-tbl td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.js-tbl th { border-top: 0; font-size: 12.5px; color: var(--ink-3); }
.js-tbl .low td { background: #fff6e8; } .js-tbl small { display: block; font-size: 12px; font-weight: 600; color: var(--warn); }
.js-an { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #fff; }
.js-take { margin: 0; font-size: 15px; font-weight: 600; }
.js-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.js-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: #d9ddf3; } .js-bars i.on { background: #4b63d8; }
.js-cap { margin: 0; font-size: 12px; color: var(--ink-3); }
.js-team { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.js-team li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; }
.js-team i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e6e9f6; font-style: normal; font-weight: 700; color: var(--pick); }
.js-team span { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); } .js-team b { font-size: 15px; color: var(--ink); } .js-team small { font-size: 12px; font-weight: 600; color: var(--ok); }
.jt-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.jt-all p { margin: 0 6px 0 0; font-size: 14px; font-weight: 700; }
.jt-all a { padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.jt-all a:hover { color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }

/* tablets and phones */
@media (max-width: 1100px) {
  .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mo-rail { display: none; }
  .mo-cal { right: 12px; top: auto; bottom: 46px; }
}
@media (max-width: 760px) {
  .dh-pick { flex-wrap: nowrap; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); overflow-x: auto; scrollbar-width: none; }
  .dh-pick > * { height: 44px; padding: 0 18px; font-size: 14.5px; }
  .dh-go .pill { flex: 1 1 100%; height: 52px; }
  .dh-price { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-size: 14.5px; }
  .moment { height: auto; margin-top: 18px; overflow: hidden; }
  .mo { grid-template-columns: 1fr; }
  .mo-photo { aspect-ratio: 4 / 3; }
  .mo-side { display: grid; justify-items: center; gap: 14px; padding: 16px 0 18px; }
  .ph { position: relative; left: auto; top: auto; width: min(320px, 100% - 32px); height: 470px; }
  .mo-cal { position: relative; right: auto; bottom: auto; width: min(320px, 100% - 32px); }
  .mo-try { position: static; }
  .pt-grid, .ind-group:last-child .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .pt-name { font-size: 16px; } .pt-line { display: none; }
  .jp { grid-template-columns: minmax(0, 1fr); } /* not 1fr: the cabinet mock-up's header would widen the track past a phone (car-dealer, 8 px) */
  .js-inbox, .js-pay { grid-template-columns: 1fr; }
  .js-chat { display: none; }
  .jp-cab > :not(.jp-cab-h) { margin: 12px; }
  .jp-cab > .js-tbl { width: calc(100% - 24px); } .js-tbl th, .js-tbl td { padding: 10px 8px; } /* four columns fit a phone with its margins */
}
/* the hub's industries follow the moment straight on (the comp: a light ground from 888, the heading at 910) */
.crm-hub #ind { padding-top: 22px; }
.crm-hub #ind .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; max-width: none; margin-bottom: 18px; }
.crm-hub #ind h2 { font-size: clamp(28px, 2.7vw, 42px); }
.crm-hub #ind .sec-lead { margin: 0; }
.crm-hub #ind .ind-group h3 { margin-top: 26px; }
@media (max-width: 760px) { .crm-hub #ind .sec-head { grid-template-columns: 1fr; } }
/* the phone holds the four messages and the input at 440 px */
.ph-head { padding: 4px 6px 9px; }
.ph-body { gap: 7px; padding: 10px 2px 8px; }
.ph-m { padding: 7px 10px 14px; font-size: 12px; }
.ph-ok { padding: 8px 10px 14px; font-size: 11.5px; }
/* the hub: one grid of all fourteen, the switcher's five first (the comp: five photographs in a row under the heading) */
.crm-hub #ind .pt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; margin-top: 0; }
.crm-hub #ind .sec-head { display: block; margin-bottom: 18px; }
.pt-more { margin: 30px 0 0; font-size: 15px; color: var(--ink-2); }
.pt-more a { font-weight: 600; color: var(--ink); text-decoration-color: var(--pick); text-underline-offset: 3px; }
.pt-more a + a { margin-left: 10px; }
.ph-m { max-width: 80%; }
@media (max-width: 1100px) { .crm-hub #ind .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .crm-hub #ind .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
/* the phone, closer to the comp: a back chevron, the assistant's mark at the top of its bubble, the time inside the short reply, a clip and a send button */
.ph-back { display: grid; place-items: center; width: 16px; color: var(--on-dark-2); } .ph-back svg { width: 16px; height: 16px; rotate: 90deg; }
.ph-m { max-width: 82%; font-size: 12.5px; }
.ph-p { top: 0; bottom: auto; }
.ph-m.r { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; }
.ph-m.r small { position: static; }
.ph-ok { margin-left: 0; }
.ph-in { gap: 8px; padding: 0; background: none; }
.ph-in span { flex: 1; padding: 8px 12px; border-radius: 999px; background: #131a36; box-shadow: inset 0 0 0 1px rgba(214, 220, 255, .12); }
.ph-clip { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #131a36 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab2d8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 7.5l-6.6 6.6a2 2 0 0 0 2.8 2.8l7-7a4 4 0 0 0-5.7-5.6l-7 7a6 6 0 0 0 8.5 8.4l6.3-6.3'/%3E%3C/svg%3E") center/14px no-repeat; }
.ph-in .ph-send { width: 32px; height: 32px; }
/* owner, 22.10.2026: «нужны нормальные размеры телефона либо тогда показывать часть экрана» — a phone of real proportions (9 : 19.5),
   its top part showing: the moment's edge crops it and the bottom fades out */
.ph-crop { position: absolute; left: 5%; top: 26px; bottom: 0; width: min(300px, 58%); overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.ph-crop .ph { position: relative; left: auto; top: auto; width: 100%; height: auto; max-height: none; aspect-ratio: 9 / 19.5; }
.ph-crop .ph-body { flex: none; }
.ph-crop .ph-in { margin-top: auto; }
.mo-cal { top: 92px; }
.mo-try { left: auto; right: 22px; bottom: auto; top: 222px; }
@media (max-width: 1100px) { .mo-cal { top: auto; bottom: 64px; } .mo-try { top: auto; bottom: 24px; } }
@media (max-width: 760px) {
  .ph-crop { position: relative; left: auto; top: auto; width: min(300px, 100% - 32px); height: 470px; }
  .mo-try { position: static; }
}
/* the hub's sections share the moment's width, so every left edge lines up with the H1 */
.crm-hub main .wrap { width: min(1390px, 100% - var(--gut) * 2); }
@media (max-width: 760px) {
  .ph-crop { height: 400px; }
  .mo-cal { top: auto; bottom: auto; }
}
/* the finish review, 22.10.2026: */
/* the calendar card overlaps the phone's bezel only (at 1440 it covered the bubbles' right edges), and never runs past the moment */
@media (min-width: 1101px) { .mo-cal { left: min(calc(5% + min(300px, 58%) - 10px), calc(100% - 206px)); right: auto; } }
/* with reduced motion the conversation shows whole at once */
html.reduced .mo:not([hidden]) :is(.ph-m, .ph-ok, .mo-cal) { animation: none; }
/* the hub's rhythm: sections closer (they stood 230–300 px apart) */
.crm-hub main > .sec { padding-block: clamp(44px, 4.4vw, 68px); }
.crm-hub main > #ind { padding-top: 22px; }
/* nothing over the first screen: the assistant's launcher comes once the moment is scrolled past */
.crm-hub .pxa-launch { transition: opacity .3s, translate .4s var(--ease), visibility .3s; }
.crm-hub:not(.past-hero) .pxa-launch { opacity: 0; translate: 0 14px; visibility: hidden; }
/* the finish review, round 2 (22.10.2026) */
/* the phone as a device: a black glass bezel with a rim highlight and side keys, the screen inside it (it read as a wireframe) */
.ph-crop .ph { padding: 9px; border-radius: 48px; background: linear-gradient(150deg, #2a2f3d, #07080d 18%, #050609 82%, #23283a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 40px 80px -28px rgba(0, 0, 0, .85); }
.ph-crop .ph::before, .ph-crop .ph::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #1a1d27, #3a3f52); }
.ph-crop .ph::before { left: -3px; top: 110px; height: 52px; box-shadow: 0 66px 0 #262a38; }
.ph-crop .ph::after { right: -3px; top: 150px; height: 78px; }
.ph-scr { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 4px 12px 12px; border-radius: 40px; background: linear-gradient(180deg, #0e1532, #0a1027); }
.ph-st { display: inline-flex; gap: 5px; align-items: center; color: #fff; } .ph-st svg { height: 10px; width: auto; fill: currentColor; }
.ph-bar b { font-size: 12.5px; }
/* the calendar card overlaps the bezel only, anchored to the phone's outer edge; below 1241 px it sits under the chat */
@media (min-width: 1241px) { .mo-cal { left: calc(5% + min(300px, 58%) - 6px); right: auto; } }
@media (max-width: 1240px) and (min-width: 1101px) { .mo-cal { left: auto; right: 14px; top: auto; bottom: 56px; } .mo-try { top: auto; bottom: 20px; } }
.mo-cal b { display: flex; align-items: center; gap: 7px; } .mo-cal b svg { width: 16px; height: 16px; color: #4b63d8; }
/* steps carry their order in the list itself: no numerals over them */
.steps3 li::before { content: none; }
/* «Почати» after the first screen too */
.go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 28px 0 0; }
.go-row > a:not(.pill) { font-weight: 600; color: var(--ink); text-decoration-color: var(--pick); text-underline-offset: 3px; }
/* type and ground */
.dh-h { font-weight: 700; font-size: clamp(34px, 4.1vw, 64px); letter-spacing: -0.032em; }
.crm-hub .sec h2 { letter-spacing: -0.03em; }
.crm-hub main > .sec.tone-light { background: #f6f8fc; }
.tbl-cap { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }
.tk svg { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; }
.dh-h { font-size: clamp(34px, 3.9vw, 61px); line-height: 1.08; }
/* the phone's rim and keys (the verdict pass): the crop leaves 4 px each side so the keys show, the rim is a metal edge lit top-left and bottom-right */
.ph-crop { left: calc(5% - 4px); width: calc(min(300px, 58%) + 8px); padding-inline: 4px; }
.ph-crop .ph { border: 2px solid transparent; background: linear-gradient(180deg, #07080d, #050609) padding-box, linear-gradient(150deg, #a3a9bd 0%, #3a3f51 16%, #12141c 45%, #0c0e14 70%, #565c71 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -28px rgba(0, 0, 0, .85); }
.ph-crop .ph::before { left: -5px; } .ph-crop .ph::after { right: -5px; }
.ph-crop .ph::before, .ph-crop .ph::after { width: 3px; background: linear-gradient(90deg, #5d6378, #2a2e3c); }
@media (max-width: 760px) { .ph-crop { left: auto; width: calc(min(300px, 100% - 32px) + 8px); } }
.ph-crop .ph::before, .ph-crop .ph::after { width: 4px; background: linear-gradient(90deg, #7d849b, #3b4054); }
.ph-crop .ph::before { left: -6px; } .ph-crop .ph::after { right: -6px; }

/* ================================================================ industry pages in the hub's grammar (22.10.2026: «все вместе») */
.dh-ind .crumbs { margin-bottom: 18px; }
.dh-lead { max-width: 46em; margin: 14px 0 0; font-size: clamp(16px, 1.3vw, 18.5px); color: var(--on-dark-2); }
.dh-ind .dh-go { margin-top: 22px; }
.dh-price a { color: var(--on-dark); text-decoration-color: rgba(214, 220, 255, .4); text-underline-offset: 3px; }
.crm-ind main .wrap { width: min(1390px, 100% - var(--gut) * 2); }
.crm-ind main > .sec.tone-light { background: #f6f8fc; }
.crm-ind .sec h2 { letter-spacing: -0.03em; }
/* every industry page below its first screen (crm-ip; the six ads-test pages keep their hero, launcher and first screen): the hub's ground,
   width and rhythm, and the brand's indigo — the industry's colour stays in the hero (the finish review, 22.10.2026) */
.crm-ip main > :is(.sec, .more-ind) > .wrap { width: min(1390px, 100% - var(--gut) * 2); }
.crm-ip main > .sec { padding-block: clamp(44px, 4.4vw, 68px); }
/* section heads on /crm/ and the industry pages: a heading that leads without taking a screen's fifth (owner, 22.10.2026: «много пустого места») */
:is(.crm-hub, .crm-ip) main .sec-head.ed { padding-top: 16px; margin-bottom: clamp(22px, 2.4vw, 32px); }
:is(.crm-hub, .crm-ip) main .sec h2 { font-size: clamp(28px, 2.7vw, 42px); }
.crm-ip .try { margin-bottom: clamp(28px, 3vw, 44px); }
.crm-ip .ai-l li { padding-block: 13px; }
.crm-ip .igr-l li { padding-block: 12px; }
:is(.crm-hub, .crm-ip) .steps3 li { padding: 20px 22px; }
.crm-hub #compare .tbl { margin-top: 20px; }
/* the reference pages — /crm/features/ with its topic pages and /pricing/ (crm-ref): the industry pages' grammar below a first screen that
   is a heading, its line and the sums, not a screen's height; /pricing/'s packages for stores and for services side by side, terms in two columns */
.crm-ref .crm-hero { min-height: 0; padding-block: calc(var(--top-h) + clamp(28px, 3vw, 48px)) calc(clamp(36px, 3.6vw, 56px) + var(--sheet)); }
.crm-ref .terms { margin: 0 0 24px; }
.crm-ref .crm-hero-in { align-items: center; }
.crm-ref .crm-hero h1 { font-size: clamp(36px, 4vw, 58px); }
.crm-ref .crm-hero > .wrap { width: min(1390px, 100% - var(--gut) * 2); }
.pk2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }
.pk2 h3 { margin-top: 0 !important; }
:is(.pk2, .igr-cols) .igr-l li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 11px; } :is(.pk2, .igr-cols) .igr-l li > span { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; } :is(.pk2, .igr-cols) .igr-l small { max-width: 22em; text-align: right; }
/* /crm/integrations/: the eight groups in two balanced columns (IG's order puts «Облік і API» before «Оплати» so each column has 14 rows), a group's title the size of a row's heading (owner, 22.10.2026: «ужми интеграции») */
.igr-cols { columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.igr-cols .igr { break-inside: avoid; padding: 0 0 clamp(24px, 2.6vw, 34px); }
/* «Справи власника»: a job's film in place of the drawn screen on a wide screen with motion allowed (js/crm-day.js plays the shown tab's) */
.jp-film { display: none; margin: 0; }
.jp-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 18px; background: #0b0f1f; box-shadow: 0 30px 60px -30px rgba(16, 25, 56, .45), 0 0 0 1px rgba(16, 25, 56, .08); }
.jp-film figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) { .js .jp-v:has(.jp-film) > .jp-cab { display: none; } .js .jp-film { display: block; } }
/* an industry's demo film under its day, the section's whole width (a narrower one left a strip of white on the right) */
.ind-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #0b0f1f; box-shadow: 0 30px 60px -30px rgba(16, 25, 56, .45), 0 0 0 1px rgba(16, 25, 56, .08); }
/* /chatgpt/ (server/chatgpt.js, reworked 23.10.2026): the film beside the headline; the owner's questions as chat bubbles that switch the
   real ChatGPT captures (js/crm-day.js runs the .jt tabs); Plugix itself beside its CRM film; the yes / never lists; the start and sign-up */
.cg-film { margin: 0; }
.cg-film video { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; border-radius: 18px; background: #05070f; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.cg-film figcaption { margin-top: 12px; font-size: 13.5px; color: var(--on-dark-2); }
:is(.pn-a, .cg-other) code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); word-break: break-all; }
.cg-shot { margin: 0; }
.cg-shot img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -30px rgba(16, 25, 56, .35), 0 0 0 1px var(--hair); }
.cg-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.cg-ask { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); gap: 14px clamp(24px, 4vw, 56px); align-items: start; }
.jt.cg-q { grid-column: 1; grid-row: 1; position: sticky; top: 88px; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; border: 0; overflow: visible; }
.jt.cg-q button { margin: 0; padding: 14px 18px; border: 0; border-radius: 14px 14px 5px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); text-align: left; white-space: normal; transition: background .25s, color .25s, box-shadow .25s, translate .25s var(--ease); }
.jt.cg-q button:hover { translate: 0 -1px; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 26px rgba(16, 25, 56, .08); }
.jt.cg-q button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -16px rgba(16, 25, 56, .5); }
.jt.cg-q button:focus-visible { outline: 2px solid var(--pick); outline-offset: 3px; }
.cg-a { grid-column: 2; grid-row: 1; padding: clamp(18px, 2.4vw, 32px); border-radius: 22px; background: linear-gradient(#eef0f8, #e6e9f4); }
.cg-said { margin: 0 0 clamp(16px, 2vw, 24px); max-width: 44em; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.cg-shots { display: grid; gap: 18px; justify-items: center; }
.cg-shots.n1 .cg-shot { width: min(100%, 560px); }
.cg-shots.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a c" "b c"; align-items: start; justify-items: stretch; }
.cg-shots .cg-offer { grid-area: a; } .cg-shots .cg-allow { grid-area: b; } .cg-shots .cg-booked { grid-area: c; }
.cg-more { display: grid; gap: 12px; margin-top: clamp(28px, 3.4vw, 44px); }
.cg-more p, .cg-inds p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
:is(.cg-more, .cg-inds) ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cg-more li { padding: 9px 14px; border-radius: 14px 14px 5px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.cg-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-2); }
.cg-plx { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cg-crm { margin: 0; }
.cg-crm video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 18px; background: #0b0f1f; box-shadow: 0 30px 60px -30px rgba(16, 25, 56, .45), 0 0 0 1px rgba(16, 25, 56, .08); }
.cg-crm figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.pains.cg-does li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.cg-inds { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.cg-inds a { display: inline-block; padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: color .2s, box-shadow .2s; }
.cg-inds a:hover { color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }
.cg-safe { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(28px, 3.6vw, 48px); }
.cg-safe .cg-shot { max-width: 480px; }
.cg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.cg-two h3 { margin: 0 0 8px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cg-two ul { list-style: none; display: grid; margin: 0; padding: 0; }
.cg-two li { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink); }
.cg-two div + div li { color: var(--ink-2); }
.cg-prices { margin-bottom: 12px; }
.cg-how { margin-top: clamp(20px, 2.4vw, 32px); }
.cg-how-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding-bottom: 8px; }
.cg-how-in .cg-shot { max-width: 340px; justify-self: end; }
.cg-other { margin: 12px 0 22px; font-size: 15px; color: var(--ink-2); }
.cg-go h2 { max-width: 16em; }
.cg-go .sec-lead { max-width: 40em; }
@media (max-width: 860px) {
  .cg-ask, .cg-plx, .cg-safe, .cg-how-in { grid-template-columns: 1fr; }
  .jt.cg-q { grid-row: auto; position: static; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 6px; }
  .jt.cg-q::-webkit-scrollbar { display: none; }
  .jt.cg-q button { flex: none; max-width: min(78vw, 320px); }
  .cg-a { grid-column: 1; grid-row: auto; }
  .cg-how-in .cg-shot { justify-self: start; }
  .pains.cg-does li:nth-child(2) { padding-top: 14px; border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
  .cg-two { grid-template-columns: 1fr; }
  .cg-a { padding: 14px; border-radius: 18px; }
  .cg-shots.n3 { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
  .cg-more ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .cg-more ul::-webkit-scrollbar { display: none; }
  .cg-more li { flex: none; white-space: nowrap; }
  .cg-inds ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .cg-inds ul::-webkit-scrollbar { display: none; }
  .cg-inds li { flex: none; } .cg-inds a { white-space: nowrap; }
}
.lg { display: inline-flex; align-items: center; gap: 6px; vertical-align: -5px; white-space: nowrap; }
.lg img { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--hair); object-fit: contain; }
.crm-ip main .sec .igr h2 { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.crm-ref .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); max-width: none; }
@media (max-width: 860px) { .pk2, .crm-ref .terms { grid-template-columns: 1fr; } .pk2 > * + * { margin-top: 28px; } .igr-cols { columns: 1; } }
@media (max-width: 560px) { :is(.pk2, .igr-cols) .igr-l small { grid-column: 1 / -1; grid-row: 3; max-width: none; text-align: left; } }
/* on a phone: the industries three to a row, a tile its photo, name and sum (fourteen tiles took two screens); the assistant's sample
   questions in one swiping row */
@media (max-width: 560px) {
  .crm-hub #ind .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .crm-hub #ind .pt-img { margin-bottom: 6px; border-radius: 12px; }
  .crm-hub #ind .pt-name { font-size: 14px; line-height: 1.25; }
  .crm-hub #ind .pt-price { font-size: 12.5px; } .crm-hub #ind .pt-size { display: none; }
  .crm-ip .try-q { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(clamp(24px, 3.2vw, 44px) * -1); padding-inline: clamp(24px, 3.2vw, 44px); }
  .crm-ip .try-q::-webkit-scrollbar { display: none; }
  .crm-ip .try-q li { flex: none; } .crm-ip .try-q button { white-space: nowrap; }
}
/* on a phone, round 2 (owner, 22.10.2026: «да продолжай»): a price size per two lines with its sum on the right; «Як почати» and the
   template on hairlines, not boxes; the hub's price without the industry links (the tiles above are those); the areas in one swiping row */
@media (max-width: 560px) {
  .tiers li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 14px 0 10px; }
  .tiers li > span, .tiers li > small, .tiers li > em { grid-column: 1; }
  .tiers li > b { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 30px; }
  .tiers li > em { margin-top: 2px; }
  .tiers small i { display: none; } /* the lead above says once it is a month with the AI */
  :is(.crm-hub, .crm-ip) .steps3 { gap: 0; }
  :is(.crm-hub, .crm-ip) .steps3 li { padding: 14px 0 16px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--hair); }
  .crm-ip .tpl-grid { gap: 10px; }
  .crm-ip .tpl { padding: 14px 16px 6px; }
  .crm-ip .tpl li { padding-block: 8px; }
  .crm-hub .pg-links { display: none; }
  .jt-all { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .jt-all::-webkit-scrollbar { display: none; }
  .jt-all > * { flex: none; white-space: nowrap; }
  .pains li { padding: 14px 0 16px; }
}
.crm-ip main > .sec.tone-light, .crm-ip .more-ind { background: #f6f8fc; }
.crm-ip .more-ind { padding-top: 24px; }
.crm-ip main > :not(.crm-hero):not(.dh) { --acc: #4b58c9; }
.tiers small { color: var(--ink-2); }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
/* an industry page's moment is followed by a sheet: the hero leaves the sheet's overlap below the moment so it never covers it */
.dh-ind { padding-bottom: calc(clamp(22px, 1.7vw, 26px) + var(--sheet)); }
/* and the assistant's launcher waits there too, as on /crm/ */
:is(.crm-ind, .crm-cg) .pxa-launch { transition: opacity .3s, translate .4s var(--ease), visibility .3s; }
:is(.crm-ind, .crm-cg):not(.past-hero) .pxa-launch { opacity: 0; translate: 0 14px; visibility: hidden; }
/* DESIGN.md drift, fixed: focus visible on navy, the ghost button's hover, readable greys */
.dh :focus-visible, .top :focus-visible { outline: 2px solid var(--peri); outline-offset: 3px; }
.dh-go .pill-ghost-d:hover { background: rgba(255, 255, 255, .1); }
.jt button { color: var(--ink-2); }
.tbl-cap { color: var(--ink-2); }
.ph-head small { color: var(--on-dark-2); }