/* =====================================================================
   Inner pages in the design of the homepage (22.10.2026). The sections are the homepage blocks (css/blocks.css);
   here only the pieces the homepage has not: the page hero without the app, breadcrumbs, a text card beside a list,
   questions and answers, the long documents (contents on the left, text on the right), pricing table, contacts,
   the sitemap, the blog. Markup: _src/kit.js. The global reset squares every corner, so the corners are set here
   with !important like everywhere else.
   ===================================================================== */

/* ---------- the page hero without the app: breadcrumbs, title, a line, buttons, centred on the network ---------- */
.i-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h, 84px) + 96px) var(--pad) 24px; text-align: center; }
.i-hero .x-net { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .8; }
.i-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 30%; width: min(1000px, 100%); height: 520px; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgb(204 255 0 / .1), transparent); }
[data-theme="light"] .i-hero::before { background: radial-gradient(closest-side, rgb(42 91 255 / .08), transparent); }
.i-hero__in { display: flex; flex-direction: column; align-items: center; max-width: 920px; margin: 0 auto; }
.i-hero__h1 { font: 700 clamp(36px, 4.6vw, 64px)/1.08 var(--font-h); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.i-hero__lead { max-width: 680px; margin-top: 22px; font: 400 18px/1.6 var(--x-font); color: var(--text-2); text-wrap: pretty; }
.i-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.i-hero__note { margin-top: 16px; font-size: 14px; color: var(--subtle); }
.i-hero + .b-flow > .b-sec:first-of-type { padding-top: 96px; }


/* ---------- the app hero of the inner pages: the SEO title is the small lime line over the big offer ---------- */
#hsMain h1.hs-eyebrow { margin: 0; text-wrap: balance; line-height: 1.35; }

/* ---------- a text card beside something (a list, numbers, cards) ---------- */
.i-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.i-split__txt { gap: 16px; padding: 36px; }
.i-split__txt h3:not(#_) { font: 600 clamp(22px, 2vw, 28px)/1.2 var(--font-h); }
.i-split__txt > p { font-size: 16px; line-height: 1.6; }
.i-split__txt .b-checks { margin-top: 4px; }
.i-split__side { display: grid; gap: 16px; align-content: start; }
.i-split__side .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- questions and answers ---------- */
.i-faq { display: flex; flex-direction: column; gap: 12px; max-width: 880px; margin: 0 auto; }
.i-faq__it { padding: 0; gap: 0; }
.i-faq__it summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; cursor: pointer; list-style: none; font: 600 18px/1.35 var(--font-h); color: var(--text); }
.i-faq__it summary::-webkit-details-marker { display: none; }
.i-faq__pm { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid rgb(var(--b-glow) / .35); background: rgb(var(--fg) / .04); transition: background .3s, border-color .3s, rotate .35s var(--ease); }
.i-faq__pm::before, .i-faq__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--text-accent); }
.i-faq__pm::after { rotate: 90deg; transition: rotate .35s var(--ease); }
.i-faq__it[open] .i-faq__pm { background: var(--b-mid); border-color: var(--b-mid); }
.i-faq__it[open] .i-faq__pm::before, .i-faq__it[open] .i-faq__pm::after { background: var(--b-ink); }
.i-faq__it[open] .i-faq__pm::after { rotate: 0deg; }
.b-sec .i-faq__pm:not(#_), .b-sec .i-faq__pm:not(#_)::before, .b-sec .i-faq__pm:not(#_)::after { border-radius: 50% !important; }
.b-sec .i-faq__pm:not(#_)::before, .b-sec .i-faq__pm:not(#_)::after { border-radius: 2px !important; }
.i-faq__a { padding: 0 26px 24px; }
.i-faq__a p { max-width: 720px; font-size: 16px; line-height: 1.65; color: var(--text-2); }

/* ---------- the long documents: contents on the left (stays on screen), the text in a card on the right ---------- */
.i-doc:not(#_) { padding-top: 64px; }
.i-doc__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.i-doc__toc { position: sticky; top: calc(var(--header-h, 84px) + 24px); display: grid; gap: 16px; }
.i-doc__tocin { gap: 0; padding: 24px 18px 20px; }
/* the list scrolls in its own box; its scrollbar is the custom scrollbar of the site (.scroll-ui of style.css, js/pages.js [data-sbox]) */
.i-doc__list { position: relative; }
.i-doc__scroll { max-height: calc(100vh - var(--header-h, 84px) - 120px); overflow: auto; padding-right: 14px; scrollbar-width: none; }
.i-doc__scroll::-webkit-scrollbar { display: none; }
.scroll-ui--box { position: absolute; top: 0; right: -6px; bottom: 0; transition: opacity .3s; }
.i-doc__toct { margin: 0 0 12px 10px; font: 600 11px/1.2 var(--x-font); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.i-doc__toc ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.i-doc__toc li { counter-increment: toc; }
.i-doc__toc ol a { display: flex; gap: 10px; padding: 8px 10px; font: 500 14px/1.4 var(--x-font); color: var(--text-2); transition: color .2s, background-color .2s; }
.i-doc__toc ol a::before { content: counter(toc); flex: none; font-variant-numeric: tabular-nums; color: var(--subtle); }
.i-doc__toc ol a:hover { color: var(--text); background: rgb(var(--fg) / .04); }
.i-doc__toc a.is-on { color: var(--text); background: rgb(var(--b-glow) / .1); }
.i-doc__toc a.is-on::before { color: var(--text-accent); }
.b-sec .i-doc__toc a:not(#_) { border-radius: 10px !important; }
.i-prose { display: block; padding: 48px 56px 56px; font: 400 16px/1.7 var(--x-font); color: var(--text-2); }
.i-prose > :first-child { margin-top: 0; }
.i-prose h2 { scroll-margin-top: calc(var(--header-h, 84px) + 24px); margin: 44px 0 14px; font: 600 clamp(21px, 1.9vw, 26px)/1.25 var(--font-h); letter-spacing: -.01em; color: var(--text); }
.i-prose h3 { margin: 28px 0 10px; font: 600 18px/1.35 var(--font-h); color: var(--text); }
.i-prose p, .i-prose ul, .i-prose ol { margin: 0 0 14px; }
.i-prose ul, .i-prose ol { padding-left: 22px; }
.i-prose li { margin-bottom: 6px; }
.i-prose li::marker { color: var(--text-accent); }
.i-prose a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.i-prose strong, .i-prose b { color: var(--text); font-weight: 600; }
.i-prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--b-edge); }
.i-prose .p-tablewrap, .i-prose .i-table { overflow-x: auto; margin: 18px 0 22px; }
.i-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.i-prose th, .i-prose td { padding: 12px 14px; border-bottom: 1px solid var(--b-edge); text-align: left; vertical-align: top; }
.i-prose th { font-weight: 600; color: var(--text); background: rgb(var(--fg) / .04); }
.i-prose .x-btn { margin-top: 6px; }
.i-doc__ask { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; }
.i-doc__ask p { font-size: 14px; line-height: 1.5; }
.i-doc__ask a { color: var(--text-accent); font-weight: 600; }

/* ---------- a row of links to other pages (sitemap, related) ---------- */
.i-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.i-links .b-card { gap: 6px; padding: 26px 28px; }
.i-links h3:not(#_) { font-size: 18px; margin-bottom: 6px; }
.i-links ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.i-links li a { display: flex; align-items: center; min-height: 34px; margin-left: -10px; padding: 0 10px; font-size: 15px; color: var(--text-2); transition: color .2s, background-color .2s; }
.i-links li a:hover { color: var(--text); background: rgb(var(--fg) / .04); }
.b-sec .i-links li a:not(#_) { border-radius: 10px !important; }

/* ---------- contacts ---------- */
.i-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.i-contact .b-card { gap: 10px; }
.i-contact__v { font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--font-h); color: var(--text); word-break: break-word; }
.i-contact__v a { transition: color .2s; }
.i-contact__v a:hover { color: var(--text-accent); }
.i-contact .b-card p.i-contact__s { font-size: 14px; }

/* ---------- pricing table ---------- */
.i-table-card { padding: 8px 0; overflow-x: auto; }
.i-compare { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 15px/1.45 var(--x-font); }
.i-compare th, .i-compare td { padding: 16px 24px; border-bottom: 1px solid var(--b-edge); text-align: center; color: var(--text-2); }
.i-compare th:first-child, .i-compare td:first-child { text-align: left; color: var(--text); }
.i-compare thead th { font: 600 17px/1.3 var(--font-h); color: var(--text); }
.i-compare tbody tr:last-child td { border-bottom: 0; }
.i-compare .is-yes { color: var(--text-accent); font-weight: 600; }

/* ---------- the blog ---------- */
.i-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.i-post { gap: 14px; }
.i-post__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 500 13px/1.3 var(--x-font); color: var(--subtle); }
.i-post h3:not(#_) { font-size: 20px; }
.i-art__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 20px; font: 500 14px/1.3 var(--x-font); color: var(--subtle); }

/* ---------- thank you ---------- */
.i-hero--thanks .i-hero__h1::before { content: ""; display: block; width: 76px; height: 76px; margin: 0 auto 28px; background: var(--b-mid, #ccff00) center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f4f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); box-shadow: 0 0 0 10px rgb(204 255 0 / .12); }
.i-hero--thanks .i-hero__h1:not(#_)::before { border-radius: 50% !important; }

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) {
  .i-links, .i-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .i-hero { padding-top: calc(var(--header-h, 66px) + 56px); }
  .i-split { grid-template-columns: minmax(0, 1fr); }
  .i-doc__grid { grid-template-columns: minmax(0, 1fr); }
  .i-doc__toc { position: static; }
  .i-doc__scroll { max-height: none; }
  .i-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .i-hero__lead { font-size: 16px; }
  .i-hero__btns { flex-direction: column; align-items: stretch; width: 100%; }
  .i-hero__btns > * { justify-content: center; }
  .i-split__txt { padding: 26px 22px; }
  .i-split__side .b-grid { grid-template-columns: minmax(0, 1fr); }
  .i-faq__it summary { padding: 18px 18px; font-size: 16px; }
  .i-faq__a { padding: 0 18px 20px; }
  .i-prose { padding: 28px 20px 32px; font-size: 15.5px; }
  .i-links, .i-posts { grid-template-columns: minmax(0, 1fr); }
  .i-compare th, .i-compare td { padding: 14px 14px; }
  .i-doc:not(#_) { padding-top: 40px; }
}

/* the contents: always open on wide screens; on phones a folded card with a chevron */
.i-doc__toct { display: block; list-style: none; }
.i-doc__toct::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .i-doc__toct { pointer-events: none; } }
@media (max-width: 900px) {
  .i-doc__tocin { padding: 0; }
  .i-doc__toct { position: relative; margin: 0; padding: 20px 52px 20px 22px; cursor: pointer; font-size: 12px; }
  .i-doc__toct::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--text-accent); border-width: 0 2px 2px 0; rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
  .i-doc__tocin[open] .i-doc__toct::after { rotate: -135deg; margin-top: -2px; }
  .i-doc__tocin ol { padding: 0 12px 16px; }
}

/* ---------- phones: the rows of cards scroll sideways with dots, as on the homepage (js/blocks.js) ---------- */
@media (max-width: 640px) {
  .b-sec .i-swipe:not(#_):not(#_) {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--pad, 16px)); padding: 4px var(--pad, 16px) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad, 16px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: none;
  }
  .b-sec .i-swipe::-webkit-scrollbar { display: none; }
  .b-sec .i-swipe:not(#_) > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .b-sec .i-swipe:not(#_):not(#_) > .x-rv { opacity: 1; translate: none; scale: 1; transform: none; }
  .b-sec .i-gains:not(#_):not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .b-sec .i-gains .b-card:not(#_) { padding: 18px 16px; gap: 8px; }
  .b-sec .i-gains .b-card__head:not(#_) { flex-direction: column; align-items: flex-start; gap: 10px; }
  .b-sec .i-gains h3:not(#_) { font-size: 15.5px; }
  .b-sec .i-gains p:not(#_) { font-size: 13.5px; }
}

/* ---------- two columns, contact cards, articles ---------- */
.b-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-sides .i-split__txt { height: 100%; }
.i-contact .i-cc { gap: 12px; }
.i-lead { font-size: 18px !important; line-height: 1.65 !important; color: var(--text) !important; }
.i-callout { display: flex; gap: 16px; align-items: flex-start; margin: 22px 0; padding: 20px 22px; border: 1px solid rgb(var(--b-glow) / .3); background: rgb(var(--b-glow) / .06); }
.i-callout p { margin: 0 !important; color: var(--text); }
.i-callout__ic { flex: none; width: 34px; height: 34px; }
.i-callout__ic img { width: 100%; height: auto; }
[data-theme="light"] .i-callout__ic img { content: url("../assets/logo/mark-navy.png"); }
.i-quote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--b-mid, #ccff00); }
.i-quote p { margin: 0 !important; font: 500 clamp(19px, 1.7vw, 23px)/1.45 var(--font-h); color: var(--text); }
.b-sec .i-callout:not(#_) { border-radius: 16px !important; }
.i-art__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.i-art__meta a { color: var(--text-accent); }
.i-art__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px 2px -8px; vertical-align: middle; background: rgb(var(--fg) / .3); }
.i-hero .i-art__meta > * + *:not(#_)::before { border-radius: 50% !important; }
@media (max-width: 900px) { .b-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.i-compare .is-yes svg { width: 22px; height: 22px; vertical-align: middle; color: var(--text-accent); }
@media (max-width: 640px) { .i-compare { min-width: 560px; font-size: 14px; } .i-compare th:first-child, .i-compare td:first-child { min-width: 180px; } }
/* the card under the contents (questions about a document, the author of an article) is for wide screens */
@media (max-width: 900px) { .i-doc__ask { display: none; } }

/* ===== 22.10.2026: the sections of the module and industry pages in their own layout (not the homepage cards):
   headers on the left with a number, feature tabs, a timeline of steps, the result block, related modules as rows,
   questions beside a sticky header. Markup: ihead, ftabs, steps, gain, rel, pains, qa in _src/kit.js ===== */
.i-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 18px 56px; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--b-edge); }
.i-head__k { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--x-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.i-head__k b { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border: 1px solid rgb(var(--b-glow) / .45); background: rgb(var(--b-glow) / .1); font-weight: 700; color: var(--text-accent); letter-spacing: .06em; }
.i-head .b-h2 { text-align: left; }
.i-head .b-sub { margin: 0; max-width: none; }

/* feature tabs: the list on the left, the open feature on the right; they switch by themselves while on screen */
.i-ftabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border: 1px solid var(--b-edge); background: var(--b-glass); }
.i-ftabs__list { display: flex; flex-direction: column; border-right: 1px solid var(--b-edge); }
.i-ftabs__tab { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 28px; border: 0; border-bottom: 1px solid var(--b-edge); background: none; font: 500 18px/1.3 var(--font-h); color: var(--text-2); text-align: left; cursor: pointer; transition: color .3s, background-color .3s; }
.i-ftabs__tab:last-child { border-bottom: 0; }
.i-ftabs__tab:hover { color: var(--text); background: rgb(var(--fg) / .03); }
.i-ftabs__n { font: 600 12px/1 var(--x-mono); letter-spacing: .1em; color: rgb(var(--fg) / .4); transition: color .3s; }
.i-ftabs__tab.is-on { color: var(--text); background: rgb(var(--b-glow) / .06); }
.i-ftabs__tab.is-on .i-ftabs__n { color: var(--text-accent); }
.i-ftabs__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--b-glow)); transform: scaleY(0); transition: transform .4s var(--ease); }
.i-ftabs__tab.is-on::before { transform: scaleY(1); }
.i-ftabs__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgb(var(--b-glow) / .8); transform: scaleX(0); transform-origin: 0 50%; }
.i-ftabs.is-auto .i-ftabs__tab.is-on .i-ftabs__bar { animation: iTabBar 6s linear forwards; }
@keyframes iTabBar { to { transform: scaleX(1); } }
.i-ftabs__panels { position: relative; overflow: hidden; }
.i-ftabs__panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; height: 100%; min-height: 380px; padding: 44px 48px; }
.i-ftabs__panel.is-on { animation: iPanelIn .6s var(--ease); }
@keyframes iPanelIn { from { opacity: 0; transform: translateY(14px); } }
.i-ftabs__mark { position: absolute; right: -40px; top: -40px; width: 300px; height: 300px; color: rgb(var(--b-glow) / .07); pointer-events: none; }
.i-ftabs__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.i-ftabs__ic.b-ic { width: 64px; height: 64px; margin-bottom: auto; }
.i-ftabs__ic.b-ic svg { width: 30px; height: 30px; }
.i-ftabs__of { font: 600 12px/1 var(--x-mono); letter-spacing: .14em; color: var(--text-2); }
.i-ftabs__panel h3 { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--font-h); letter-spacing: -.02em; color: var(--text); }
.i-ftabs__panel p { max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.i-ftabs:not(#_) { border-radius: 22px !important; overflow: hidden; }
.i-ftabs:not(#_) .i-ftabs__ic { border-radius: 16px !important; }

/* steps on a timeline: numbers, a line with points, the text under them (no cards) */
.i-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.i-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 63px; height: 1px; background: linear-gradient(90deg, rgb(var(--b-glow) / .7), var(--b-edge) 70%); }
.i-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 26px; }
.i-step__n { font: 600 clamp(40px, 4vw, 56px)/1 var(--font-h); letter-spacing: -.04em; color: rgb(var(--fg) / .14); }
.i-step:last-child .i-step__n { color: var(--text-accent); }
.i-step__dot { display: block; width: 13px; height: 13px; margin: 3px 0 18px; border: 2px solid rgb(var(--b-glow)); background: var(--bg, #060d2b); box-shadow: 0 0 0 5px rgb(var(--b-glow) / .12); }
.i-step:last-child .i-step__dot { background: rgb(var(--b-glow)); }
.i-step:not(#_) .i-step__dot { border-radius: 50% !important; }
.i-step:not(#_) .b-ic { border-radius: 10px !important; }
.i-step h3 { font: 600 19px/1.3 var(--font-h); color: var(--text); }
.i-step p { font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* the result: a wide statement and the gains in a row split by lines */
.i-gain { display: flex; flex-direction: column; border: 1px solid var(--b-edge); }
.i-gain__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; padding: 48px; background: var(--b-lime-bg); border-bottom: 1px solid var(--b-edge); }
.i-gain__main h3 { margin-top: 18px; font: 600 clamp(28px, 3vw, 42px)/1.12 var(--font-h); letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.i-gain__main p { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.i-gain__checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.i-gain__checks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgb(var(--b-glow) / .3); background: rgb(var(--b-glow) / .06); font-size: 14px; line-height: 1.3; color: var(--text); }
.i-gain__checks li::before { content: ""; width: 7px; height: 7px; flex: none; background: rgb(var(--b-glow)); }
.i-gain__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--b-glass); }
.i-gain__it { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 28px; border-left: 1px solid var(--b-edge); }
.i-gain__it:first-child { border-left: 0; }
.i-gain__it h4 { margin-top: 6px; font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-gain__it p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.i-gain:not(#_) { border-radius: 22px !important; overflow: hidden; }
.i-gain:not(#_) .i-gain__checks li { border-radius: 99px !important; }
.i-gain:not(#_) .i-gain__checks li::before { border-radius: 50% !important; }
.i-gain:not(#_) .b-ic, .i-rel:not(#_) .b-ic, .i-pains:not(#_) .b-ic { border-radius: 10px !important; }

/* related modules as rows */
.i-rel { display: flex; flex-direction: column; border-top: 1px solid var(--b-edge); }
.i-rel__it { position: relative; display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.3fr) auto; align-items: center; gap: 24px; padding: 24px 8px; border-bottom: 1px solid var(--b-edge); color: var(--text); text-decoration: none; transition: background-color .3s, padding .4s var(--ease); }
@media (hover: hover) { .i-rel__it:hover { background: rgb(var(--b-glow) / .05); padding-left: 20px; } }
.i-rel__t { font: 600 22px/1.25 var(--font-h); letter-spacing: -.01em; }
.i-rel__p { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.i-rel__go { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--b-edge); transition: background-color .3s, border-color .3s; }
@media (hover: hover) { .i-rel__it:hover .i-rel__go { background: rgb(var(--b-glow)); border-color: rgb(var(--b-glow)); } }
@media (hover: hover) { .i-rel__it:hover .i-rel__go .i { filter: brightness(0); } }
.i-rel:not(#_) .i-rel__go { border-radius: 50% !important; }

/* the pains of an industry: a grid split by lines, numbers on top */
.i-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--b-edge); border-bottom: 1px solid var(--b-edge); }
.i-pain { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px 32px 38px; border-left: 1px solid var(--b-edge); }
.i-pain:first-child { border-left: 0; padding-left: 0; }
.i-pain__n { display: flex; align-items: center; gap: 10px; align-self: stretch; margin-bottom: 8px; font: 600 12px/1 var(--x-mono); letter-spacing: .14em; color: #ff8f8f; }
.i-pain__n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(240 82 82 / .45), transparent); }
[data-theme="light"] .i-pain__n { color: #c9302c; }
.i-pain h3 { font: 600 20px/1.3 var(--font-h); color: var(--text); }
.i-pain p { font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* questions beside a sticky header */
.i-qa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 64px; }
.i-qa__side { position: sticky; top: calc(var(--header-h, 84px) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.i-qa__side .b-h2 { text-align: left; }
.i-qa__side .b-sub { margin: 0; }
.i-qa__side .x-btn { margin-top: 10px; }
.i-qa .i-faq { max-width: none; margin: 0; }

@media (max-width: 1100px) {
  .i-gain__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-gain__it:nth-child(3) { border-left: 0; }
  .i-gain__it:nth-child(n+3) { border-top: 1px solid var(--b-edge); }
}
@media (max-width: 900px) {
  .i-head { grid-template-columns: 1fr; margin-bottom: 36px; padding-bottom: 22px; }
  .i-ftabs { grid-template-columns: 1fr; }
  .i-ftabs__list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--b-edge); scrollbar-width: none; scroll-snap-type: x mandatory; }
  .i-ftabs__list::-webkit-scrollbar { display: none; }
  .i-ftabs__tab { flex: none; max-width: 72vw; padding: 16px 18px; border-bottom: 0; border-right: 1px solid var(--b-edge); font-size: 15px; scroll-snap-align: start; }
  .i-ftabs__tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); }
  .i-ftabs__tab.is-on::before { transform: scaleX(1); }
  .i-ftabs__panel { min-height: 300px; padding: 28px 22px; }
  .i-ftabs__panel p { font-size: 15.5px; }
  .i-ftabs__mark { width: 200px; height: 200px; }
  .i-steps { grid-template-columns: 1fr; padding-left: 34px; }
  .i-steps::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: linear-gradient(180deg, rgb(var(--b-glow) / .7), var(--b-edge)); }
  .i-step { padding: 0 0 30px; }
  .i-step__n { position: absolute; right: 0; top: 0; font-size: 34px; }
  .i-step__dot { position: absolute; left: -34px; top: 4px; margin: 0; }
  .i-gain__main { grid-template-columns: 1fr; padding: 28px 22px; gap: 16px; }
  .i-gain__it { padding: 22px 18px; }
  .i-rel__it { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; padding: 18px 4px; }
  .i-rel__it .b-ic { grid-row: span 2; }
  .i-rel__t { font-size: 18px; }
  .i-rel__p { grid-column: 2; font-size: 14px; }
  .i-rel__go { grid-row: 1 / span 2; grid-column: 3; width: 40px; height: 40px; }
  .i-rel__it:hover { padding-left: 4px; }
  .i-pains { grid-template-columns: 1fr; }
  .i-pain { padding: 24px 0; border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-pain:first-child { border-top: 0; }
  .i-qa { grid-template-columns: 1fr; gap: 28px; }
  .i-qa__side { position: static; }
}
@media (max-width: 560px) {
  .i-gain__row { grid-template-columns: 1fr; }
  .i-gain__it:not(:first-child) { border-left: 0; border-top: 1px solid var(--b-edge); }
}

/* ===== 22.10.2026 (3): the sections of the old site built from the homepage blocks (_src/oldpages.js): the pill
   switch of the pricing block for several panels, a chain of stages ===== */
.i-pills-bar { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto 40px; }
.i-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 980px; padding: 5px; border: 1px solid rgb(var(--fg) / .14); background: rgb(var(--fg) / .04); }
.i-pills button { height: 42px; padding: 0 16px; border: 0; background: none; font: 600 14.5px var(--font-btn, var(--x-font)); color: var(--text-2); cursor: pointer; white-space: nowrap; transition: color .3s, background-color .3s, box-shadow .3s; }
.i-pills button:hover { color: var(--text); }
.i-pills button.is-on { color: var(--b-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--b-hi) 40%, var(--b-mid)), var(--b-mid) 55%, color-mix(in srgb, var(--b-lo) 30%, var(--b-mid))); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 22px -10px rgb(var(--b-glow) / .8); }
.i-pills:not(#_) { border-radius: 14px !important; }
.i-pills:not(#_) button { border-radius: 10px !important; }
.i-pills-bar .b-actions__note { text-align: center; }
.i-pills-panel { animation: iPanelIn .5s var(--ease); }
.i-pills-panel > .b-grid { margin-top: 16px; }

/* a chain of stages: numbered pills in one card, the last one lime */
.i-chain ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.i-chain li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border: 1px solid rgb(var(--fg) / .12); background: rgb(var(--fg) / .04); font: 500 15px/1.2 var(--x-font); color: var(--text); }
.i-chain li span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; background: rgb(var(--b-glow) / .12); font: 700 12px/1 var(--x-font); color: var(--text-accent); }
.i-chain li.is-end { border-color: var(--b-lime-edge); background: var(--b-lime-bg); }
.i-chain li.is-end span { background: rgb(var(--b-glow)); color: var(--b-ink); }
.i-chain:not(#_) li { border-radius: 999px !important; }
.i-chain:not(#_) li span { border-radius: 999px !important; }

.b-sec .b-checks:not(#_) li::before { border-radius: 6px !important; }

/* the lime card over a whole row, tags and chips inside the cards */
.b-grid > .i-wide { grid-column: 1 / -1; }
.b-card > .b-tag + .b-card__head { margin-top: 2px; }
.i-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.i-chips span { padding: 7px 13px; border: 1px solid rgb(var(--b-glow) / .3); background: rgb(var(--b-glow) / .06); font: 500 13.5px/1.2 var(--x-font); color: var(--text); }
.i-chips:not(#_) span { border-radius: 999px !important; }




/* the AI specialist card */
.i-cfg .b-checks { margin-top: 6px; }

/* the demo window inside a section */
.i-demo .p-demo { margin: 0; padding: 0; }


@media (max-width: 900px) {
  .i-pills { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .i-pills::-webkit-scrollbar { display: none; }
  .i-pills-bar { align-items: stretch; }
}

/* ===== 22.10.2026 (frontend-design): /tenders/, the package on check (_src/oldpages.js tcheck, js/pages.js [data-tcheck]).
   The one bold block of the page: the lines of the check on the left, the readiness ring and the deadline on the right ===== */
.i-tc { --ok: #3ddc84; --warn: #ffb547; --risk: #ff7b7b; }
[data-theme="light"] .i-tc { --ok: #138a4a; --warn: #b26a00; --risk: #c9302c; }
.i-tc__card.b-card { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0; padding: 0; }
.i-tc__list { padding: 30px 32px 22px; }
.i-tc__doc { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--b-edge); }
.i-tc__doc b { font: 600 19px/1.3 var(--font-h); color: var(--text); }
.i-tc__doc span { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.i-tc__list ol { margin: 0; padding: 0; list-style: none; }
.i-tc__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--b-edge); }
.i-tc__row:last-child { border-bottom: 0; }
.i-tc__st { display: grid; place-items: center; width: 28px; height: 28px; color: rgb(var(--fg) / .3); border: 1px dashed rgb(var(--fg) / .2); transition: color .35s, border-color .35s, background-color .35s; }
.i-tc__st svg { width: 16px; height: 16px; opacity: 0; transition: opacity .3s; }
.i-tc__h b { display: block; font: 600 15.5px/1.35 var(--x-font); color: var(--text); }
.i-tc__h small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.i-tc__r { font-size: 14px; line-height: 1.45; color: var(--text-2); opacity: .2; transition: opacity .4s; }
.i-tc__r em { display: block; margin-bottom: 2px; font: 600 13px/1.2 var(--x-font); font-style: normal; }
.i-tc__row.is-in .i-tc__r { opacity: 1; }
.i-tc__row.is-in .i-tc__st { border-style: solid; }
.i-tc__row.is-in .i-tc__st svg { opacity: 1; }
.i-tc__row.is-in[data-st="ok"] .i-tc__st { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.i-tc__row.is-in[data-st="warn"] .i-tc__st { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.i-tc__row.is-in[data-st="risk"] .i-tc__st { color: var(--risk); border-color: color-mix(in srgb, var(--risk) 45%, transparent); background: color-mix(in srgb, var(--risk) 12%, transparent); }
.i-tc__row[data-st="ok"] em { color: var(--ok); }
.i-tc__row[data-st="warn"] em { color: var(--warn); }
.i-tc__row[data-st="risk"] em { color: var(--risk); }
.i-tc:not(#_) .i-tc__st { border-radius: 8px !important; }

.i-tc__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 32px; border-left: 1px solid var(--b-edge); background: rgb(var(--b-glow) / .03); }
.i-tc__ring { position: relative; display: grid; place-items: center; width: 168px; height: 168px; }
.i-tc__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.i-tc__ring circle { fill: none; stroke: rgb(var(--fg) / .1); stroke-width: 9; }
.i-tc__ring .i-tc__arc { stroke: rgb(var(--b-glow)); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.i-tc__card.is-run .i-tc__arc { transition: stroke-dashoffset 2.6s cubic-bezier(.22, 1, .36, 1); }
.i-tc__card:is(.is-run, .is-done) .i-tc__arc { stroke-dashoffset: calc(326.7 * (1 - var(--p) / 100)); }
.i-tc__ring b { font: 700 44px/1 var(--font-h); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; margin-top: -10px; }
.i-tc__ring small { position: absolute; bottom: 46px; font-size: 13px; color: var(--text-2); }
.i-tc__time b { display: block; font: 600 26px/1.1 var(--font-h); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.i-tc__time small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.i-tc__sum { font-size: 15px; line-height: 1.55; color: var(--text); }
.i-tc__side .btn { margin-top: 4px; }

@media (max-width: 900px) {
  .i-tc__card.b-card { grid-template-columns: 1fr; }
  .i-tc__list { padding: 22px 18px 10px; }
  .i-tc__row { grid-template-columns: 28px minmax(0, 1fr); }
  .i-tc__r { grid-column: 2; }
  .i-tc__side { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 20px; padding: 22px 18px; border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-tc__ring { width: 128px; height: 128px; grid-row: span 2; }
  .i-tc__ring b { font-size: 34px; }
  .i-tc__ring small { bottom: 32px; font-size: 12px; }
  .i-tc__sum, .i-tc__side .btn { grid-column: 1 / -1; }
}

/* ===== 22.10.2026 (frontend-design): /ai/, the request console (_src/oldpages.js aconsole, js/pages.js [data-aiask]).
   The question in big type, the sources AI reads in the system, then the answer with its steps ===== */
.i-ac__card.b-card { gap: 0; max-width: 980px; min-height: var(--ac-h, 0); margin-inline: auto; padding: 0; }
.i-ac__q { min-height: 2.5em; padding: 40px 44px 30px; font: 600 clamp(24px, 2.6vw, 36px)/1.25 var(--font-h); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.i-ac__q.is-typing::after { content: ""; display: inline-block; width: 3px; height: .95em; margin-left: 4px; vertical-align: -.1em; background: rgb(var(--b-glow)); animation: iCaret .8s steps(1) infinite; }
@keyframes iCaret { 50% { opacity: 0; } }
.i-ac__src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--b-edge); }
.i-ac__src li { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-left: 1px solid var(--b-edge); transition: opacity .4s, background-color .4s; }
.i-ac__src li:first-child { border-left: 0; padding-left: 44px; }
.i-ac__src b { display: block; font: 600 14.5px/1.3 var(--x-font); color: var(--text); }
.i-ac__src small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.i-ac__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid rgb(var(--b-glow) / .35); background: rgb(var(--b-glow) / .08); color: var(--text-accent); transition: background-color .4s, color .4s; }
.i-ac__ic svg { width: 17px; height: 17px; }
.i-ac__src li.is-on .i-ac__ic { background: rgb(var(--b-glow)); color: var(--b-ink); }
.i-ac:not(#_) .i-ac__ic { border-radius: 10px !important; }
.i-ac__a { padding: 30px 44px 40px; }
.i-ac__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.i-ac__who .b-logo-mark { width: 34px; height: 34px; }
.i-ac__who .b-logo-mark img { width: 34px; height: 34px; }
.i-ac__who b { font: 600 15px/1 var(--x-font); color: var(--text); }
.i-ac__lead { margin-bottom: 16px; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--text); }
.i-ac__a .b-checks li { font-size: 15.5px; transition: opacity .4s, transform .4s var(--ease); }
/* the moments of the play: sources dim until read, the answer waits until they are */
.i-ac.is-live .i-ac__src li:not(.is-on) { opacity: .35; }
.i-ac.is-live .i-ac__a { opacity: 0; }
/* only the way in is smooth: on load and on a switch the answer hides at once, without a flash */
.i-ac.is-live .is-answer .i-ac__a { opacity: 1; transition: opacity .5s; }
.i-ac.is-live .i-ac__a .b-checks li:not(.is-on) { opacity: 0; transform: translateY(8px); }
@media (max-width: 900px) {
  .i-ac__q { padding: 26px 20px 20px; font-size: 22px; }
  .i-ac__src { grid-template-columns: 1fr; }
  .i-ac__src li, .i-ac__src li:first-child { padding: 14px 20px; border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-ac__src li:first-child { border-top: 0; }
  .i-ac__a { padding: 22px 20px 28px; }
  .i-ac__lead { font-size: 16px; }
}

/* ===== 22.10.2026 (frontend-design): /ai/ in its own forms, not the homepage blocks (_src/oldpages.js ai) ===== */
/* the cost of routine: one switch turns every line from "now" to "with HubSuite AI" (js/pages.js [data-aoff]) */
.i-aoff { max-width: 980px; margin-inline: auto; }
.i-aoff__sw { display: flex; align-items: center; gap: 14px; margin: 0 auto 26px; padding: 8px 18px 8px 8px; border: 1px solid rgb(var(--fg) / .14); background: rgb(var(--fg) / .04); color: var(--text); cursor: pointer; }
.i-aoff__track { position: relative; width: 58px; height: 32px; background: rgb(var(--fg) / .12); transition: background-color .5s var(--ease); }
.i-aoff__track i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: #fff; transition: transform .5s var(--ease), background-color .5s; }
.i-aoff__l { display: grid; font: 600 15px/1.2 var(--x-font); }
.i-aoff__l b { grid-area: 1 / 1; transition: opacity .4s; }
.i-aoff.is-on .i-aoff__track { background: rgb(var(--b-glow)); }
.i-aoff.is-on .i-aoff__track i { transform: translateX(26px); background: var(--b-ink); }
.i-aoff:not(#_) :is(.i-aoff__sw, .i-aoff__track, .i-aoff__track i) { border-radius: 999px !important; }
.i-aoff__card.b-card { gap: 0; padding: 8px 36px; }
.i-aoff__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--b-edge); }
.i-aoff__row h3 { font: 600 19px/1.3 var(--font-h); color: var(--text); }
.i-aoff__txt, .i-aoff__sum { display: grid; }
.i-aoff__txt > span, .i-aoff__sum > span { grid-area: 1 / 1; transition: opacity .45s, transform .45s var(--ease); }
.i-aoff__txt { font-size: 16px; line-height: 1.5; }
.i-aoff__txt .i-aoff__was { color: var(--text-2); }
.i-aoff__txt .i-aoff__now { color: var(--text); }
.i-aoff__sum { padding: 24px 0 18px; font: 600 clamp(20px, 2vw, 26px)/1.3 var(--font-h); letter-spacing: -.01em; color: var(--text); }
/* off: the "now" line waits below; on: the old one leaves and the new one comes in, row by row */
.i-aoff :is(.i-aoff__txt, .i-aoff__sum) .i-aoff__now { opacity: 0; transform: translateY(8px); }
.i-aoff.is-on :is(.i-aoff__txt, .i-aoff__sum) .i-aoff__was { opacity: 0; transform: translateY(-8px); }
.i-aoff.is-on :is(.i-aoff__txt, .i-aoff__sum) .i-aoff__now { opacity: 1; transform: none; }
.i-aoff .i-aoff__l .i-aoff__now { opacity: 0; }
.i-aoff.is-on .i-aoff__l .i-aoff__was { opacity: 0; }
.i-aoff.is-on .i-aoff__l .i-aoff__now { opacity: 1; }
.i-aoff__row:nth-child(2) span { transition-delay: .08s; }
.i-aoff__row:nth-child(3) span { transition-delay: .16s; }
.i-aoff__row:nth-child(4) span { transition-delay: .24s; }
.i-aoff__row:nth-child(5) span { transition-delay: .32s; }
.i-aoff__sum span { transition-delay: .45s; }

/* data to result: a pipeline of four stages, a pulse of data runs along it and lights each node in turn */
.i-pipe { position: relative; }
.i-pipe__line { position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 2px; background: linear-gradient(90deg, rgb(var(--b-glow) / .5), rgb(var(--b-glow) / .15)); overflow: hidden; }
.i-pipe__line i { position: absolute; top: -3px; left: 0; width: 25%; height: 8px; background: radial-gradient(closest-side, rgb(var(--b-glow)), transparent); animation: iPulse 4s linear infinite; }
@keyframes iPulse { from { left: -25%; } to { left: 100%; } }
.i-pipe__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.i-pipe__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.i-pipe__node { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border: 1px solid rgb(var(--b-glow) / .4); background: var(--bg); color: var(--text-accent); animation: iNode 4s linear infinite; animation-delay: calc(var(--k) * 1s); }
.i-pipe__node svg { width: 28px; height: 28px; }
@keyframes iNode { 0%, 18%, 100% { box-shadow: 0 0 0 0 rgb(var(--b-glow) / 0); } 6% { box-shadow: 0 0 0 8px rgb(var(--b-glow) / .16), 0 0 30px rgb(var(--b-glow) / .45); } }
.i-pipe:not(#_) .i-pipe__node { border-radius: 50% !important; }
.i-pipe__step h3 { font: 600 24px/1.2 var(--font-h); letter-spacing: -.015em; color: var(--text); }
.i-pipe__step > p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.i-pipe__step ul { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--b-edge); list-style: none; text-align: left; }
.i-pipe__step ul li { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.i-pipe__step ul b { color: var(--text); font-weight: 600; }

/* three results: type instead of cards */
.i-trio { max-width: 1060px; margin-inline: auto; border-top: 1px solid var(--b-edge); }
.i-trio__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--b-edge); }
.i-trio__k { font-size: 15px; color: var(--text-2); }
.i-trio__row h3 { font: 600 clamp(28px, 3.2vw, 44px)/1.1 var(--font-h); letter-spacing: -.025em; color: var(--text); }
.i-trio__row p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.i-trio__end { padding-top: 40px; font: 600 clamp(26px, 3vw, 40px)/1.2 var(--font-h); letter-spacing: -.02em; color: var(--text-accent); text-align: center; }

/* the system: a list in two columns split by hairlines */
.i-sys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; max-width: 1060px; margin: 0 auto; padding: 0; list-style: none; }
.i-sys li { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid var(--b-edge); }
.i-sys__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--text-accent); border: 1px solid rgb(var(--b-glow) / .3); }
.i-sys__ic svg { width: 21px; height: 21px; }
.i-sys:not(#_) .i-sys__ic { border-radius: 12px !important; }
.i-sys h3 { font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-sys p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* the start: the panel of AI permissions beside the steps of the launch */
.i-gov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1100px; margin-inline: auto; }
.i-gov__panel.b-card { gap: 0; padding: 0; }
.i-gov__head { display: flex; align-items: center; gap: 14px; padding: 24px 26px; border-bottom: 1px solid var(--b-edge); }
.i-gov__head .i-ac__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid rgb(var(--b-glow) / .35); background: rgb(var(--b-glow) / .08); color: var(--text-accent); }
.i-gov__head .i-ac__ic svg { width: 17px; height: 17px; }
.i-gov:not(#_) .i-ac__ic { border-radius: 10px !important; }
.i-gov__head h3 { font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-gov__head p { margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.i-gov__panel ul { margin: 0; padding: 0 26px; list-style: none; }
.i-gov__panel li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--b-edge); }
.i-gov__panel li b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.i-gov__panel li small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.i-gov__sw { position: relative; flex: none; width: 44px; height: 26px; background: rgb(var(--b-glow)); }
.i-gov__sw i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; background: var(--b-ink); }
.i-gov:not(#_) :is(.i-gov__sw, .i-gov__sw i) { border-radius: 999px !important; }
.i-gov__foot { padding: 18px 26px 22px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.i-vsteps { position: relative; margin: 0; padding: 0 0 0 58px; list-style: none; }
.i-vsteps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, rgb(var(--b-glow) / .6), var(--b-edge)); }
.i-vsteps li { position: relative; padding: 0 0 28px; }
.i-vsteps li:last-child { padding-bottom: 0; }
.i-vsteps__n { position: absolute; left: -58px; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(var(--b-glow) / .45); background: var(--bg); font: 600 15px/1 var(--x-font); color: var(--text-accent); }
.i-vsteps li:last-child .i-vsteps__n { background: rgb(var(--b-glow)); color: var(--b-ink); }
.i-vsteps:not(#_) .i-vsteps__n { border-radius: 50% !important; }
.i-vsteps h3 { padding-top: 8px; font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-vsteps p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) { .i-pipe__line i, .i-pipe__node { animation: none; } }
@media (max-width: 900px) {
  .i-aoff__card.b-card { padding: 4px 20px; }
  .i-aoff__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .i-aoff__row h3 { font-size: 17px; }
  .i-aoff__txt { font-size: 15px; }
  .i-pipe__line { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; background: linear-gradient(180deg, rgb(var(--b-glow) / .5), rgb(var(--b-glow) / .15)); }
  .i-pipe__line i { left: -3px; top: -25%; width: 8px; height: 25%; animation-name: iPulseY; }
  .i-pipe__steps { grid-template-columns: 1fr; gap: 30px; }
  .i-pipe__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; }
  .i-pipe__node { grid-row: span 3; margin: 0; }
  .i-pipe__step ul { margin-top: 12px; padding-top: 12px; }
  .i-trio__row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .i-sys { grid-template-columns: 1fr; }
  .i-gov { grid-template-columns: 1fr; gap: 36px; }
}
@keyframes iPulseY { from { top: -25%; } to { top: 100%; } }

/* ===== 22.10.2026 (frontend-design): /modules/ in its own forms (_src/oldpages.js modules, js/pages.js [data-lx]) ===== */
/* build your own set: the "All apps" screen of the product beside the open direction with its switches */
.i-lx { --lx-bg: #0a1538; --lx-side: #0c1a44; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: 1180px; margin-inline: auto; border: 1px solid var(--b-edge); background: var(--lx-bg); box-shadow: 0 40px 90px -50px rgb(0 0 0 / .8); }
[data-theme="light"] .i-lx { --lx-bg: #f6f8fc; --lx-side: #fff; box-shadow: 0 30px 70px -45px rgb(11 31 79 / .35); }
.i-lx:not(#_) { border-radius: 26px !important; overflow: hidden; }
.i-lx__home { padding: 30px 30px 34px; }
.i-lx__title { margin-bottom: 22px; font: 600 22px/1.2 var(--font-h); color: var(--text); }
.i-lx__apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 22px 8px; }
.i-lx__app { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.i-lx__ic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; transition: transform .35s var(--ease); }
.i-lx__ic img { width: 100%; height: 100%; }
.i-lx__line { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(145deg, #2f6fed, #1a3a9a); color: #fff; }
.i-lx__line svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-lx__ic::before { content: ""; position: absolute; inset: -6px; border: 2px solid rgb(var(--b-glow)); box-shadow: 0 0 22px rgb(var(--b-glow) / .45); opacity: 0; transform: scale(.9); transition: opacity .35s, transform .35s var(--ease); }
.i-lx__ic::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: rgb(var(--b-glow)); box-shadow: 0 0 0 3px var(--lx-bg); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s var(--ease); }
.i-lx__app.has-on .i-lx__ic::after { opacity: 1; transform: none; }
@media (hover: hover) { .i-lx__app:hover .i-lx__ic { transform: translateY(-3px); } }
.i-lx__app.is-on .i-lx__ic::before { opacity: 1; transform: none; }
.i-lx__app.is-on { color: var(--text); }
.i-lx__name { font: 500 12.5px/1.25 var(--x-font); text-align: center; text-wrap: balance; }
.i-lx:not(#_) :is(.i-lx__ic img, .i-lx__line) { border-radius: 16px !important; }
.i-lx:not(#_) .i-lx__ic::before { border-radius: 21px !important; }
.i-lx:not(#_) .i-lx__ic::after { border-radius: 50% !important; }
.i-lx__sheet { display: flex; flex-direction: column; padding: 30px 30px 26px; border-left: 1px solid var(--b-edge); background: var(--lx-side); }
.i-lx__dir { animation: iPanelIn .45s var(--ease); }
.i-lx__head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--b-edge); }
.i-lx__head .i-lx__ic { width: 52px; height: 52px; }
.i-lx__head h3 { font: 600 22px/1.2 var(--font-h); letter-spacing: -.01em; color: var(--text); }
.i-lx__head p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.i-lx__dir ul { margin: 0; padding: 0; list-style: none; }
.i-lx__dir label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--b-edge); cursor: pointer; }
.i-lx__dir label b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.i-lx__dir label small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.i-lx__dir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.i-lx__sw { position: relative; flex: none; width: 44px; height: 26px; background: rgb(var(--fg) / .14); transition: background-color .3s; }
.i-lx__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; transition: transform .3s var(--ease), background-color .3s; }
.i-lx__dir input:checked + .i-lx__sw { background: rgb(var(--b-glow)); }
.i-lx__dir input:checked + .i-lx__sw::after { transform: translateX(18px); background: var(--b-ink); }
.i-lx__dir input:focus-visible + .i-lx__sw { outline: 2px solid rgb(var(--b-glow)); outline-offset: 3px; }
.i-lx:not(#_) .i-lx__sw, .i-lx:not(#_) .i-lx__sw::after { border-radius: 999px !important; }
.i-lx__set { margin-top: auto; padding-top: 22px; }
.i-lx__n { font: 600 20px/1.3 var(--font-h); color: var(--text); }
.i-lx__n b { color: var(--text-accent); font-variant-numeric: tabular-nums; }
.i-lx__chips { margin: 6px 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* the platform in one row: the big number and three statements split by hairlines */
.i-facts { display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; border-block: 1px solid var(--b-edge); }
.i-facts > * { padding: 30px 28px; border-left: 1px solid var(--b-edge); }
.i-facts > :first-child { border-left: 0; padding-left: 0; }
.i-facts__big b { display: block; font: 700 clamp(56px, 6vw, 88px)/1 var(--font-h); letter-spacing: -.04em; color: var(--text-accent); }
.i-facts__big span { display: block; margin-top: 8px; font-size: 15px; color: var(--text-2); }
.i-facts__it h3 { font: 600 19px/1.3 var(--font-h); color: var(--text); }
.i-facts__it p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* the AI modules as an index: name on the left, what it does on the right */
.i-idx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; max-width: 1080px; margin: 0 auto; }
.i-idx > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--b-edge); }
.i-idx dt { font: 600 16px/1.4 var(--font-h); color: var(--text); }
.i-idx dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* the solutions: Tender AI as the big block beside the list of the others */
.i-sol { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 48px; align-items: start; max-width: 1180px; margin-inline: auto; }
.i-sol__main { display: flex; flex-direction: column; gap: 14px; padding: 36px; border: 1px solid var(--b-lime-edge); background: var(--b-lime-bg); color: var(--text); text-decoration: none; transition: transform .35s var(--ease); }
.i-sol__main:hover { transform: translateY(-4px); }
.i-sol:not(#_) .i-sol__main { border-radius: 24px !important; }
.i-sol__ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; background: rgb(var(--b-glow)); color: var(--b-ink); }
.i-sol__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.i-sol:not(#_) .i-sol__ic { border-radius: 16px !important; }
.i-sol__main h3 { font: 700 clamp(28px, 3vw, 40px)/1.1 var(--font-h); letter-spacing: -.025em; }
.i-sol__main p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.i-sol__list { margin: 0; padding: 0; list-style: none; }
.i-sol__list li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--b-edge); }
.i-sol__list li:first-child { border-top: 0; padding-top: 0; }
.i-sol__list b { font: 600 16px/1.4 var(--font-h); color: var(--text); }
.i-sol__list span { font-size: 15px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 900px) {
  .i-lx { grid-template-columns: 1fr; }
  .i-lx__home { padding: 22px 16px 24px; }
  .i-lx__apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; }
  .i-lx__ic { width: 54px; height: 54px; }
  .i-lx__name { font-size: 11px; }
  .i-lx__sheet { padding: 22px 18px; border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-facts { grid-template-columns: 1fr; }
  .i-facts > *, .i-facts > :first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-facts > :first-child { border-top: 0; }
  .i-idx { grid-template-columns: 1fr; }
  .i-idx > div { grid-template-columns: 1fr; gap: 4px; }
  .i-sol { grid-template-columns: 1fr; gap: 28px; }
  .i-sol__main { padding: 26px 22px; }
  .i-sol__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== 22.10.2026 (frontend-design): /industries/ in its own forms (_src/oldpages.js industries) ===== */
/* "Знайомо?": a self-check of the pains; the answer comes up with the first tick (js/pages.js [data-self]) */
.i-self { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; max-width: 1100px; margin-inline: auto; }
.i-self__q { grid-column: 1; margin-bottom: 14px; font: 600 20px/1.3 var(--font-h); color: var(--text); }
.i-self ul { grid-column: 1; margin: 0; padding: 0; list-style: none; }
.i-self label { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--b-edge); font-size: 17px; line-height: 1.4; color: var(--text-2); cursor: pointer; transition: color .3s; }
.i-self input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.i-self__box { position: relative; flex: none; width: 26px; height: 26px; border: 1.5px solid rgb(var(--fg) / .3); transition: border-color .3s, background-color .3s; }
.i-self__box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid var(--b-ink); border-width: 0 2.5px 2.5px 0; rotate: 45deg; opacity: 0; transition: opacity .2s; }
.i-self input:checked + .i-self__box { border-color: rgb(var(--b-glow)); background: rgb(var(--b-glow)); }
.i-self input:checked + .i-self__box::after { opacity: 1; }
.i-self label:has(input:checked) { color: var(--text); }
.i-self input:focus-visible + .i-self__box { outline: 2px solid rgb(var(--b-glow)); outline-offset: 3px; }
.i-self:not(#_) .i-self__box { border-radius: 7px !important; }
.i-self__a { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 34px; border: 1px solid var(--b-edge); background: var(--b-glass); opacity: .45; transition: opacity .5s, border-color .5s, background-color .5s; }
.i-self:not(#_) .i-self__a { border-radius: 24px !important; }
.i-self.is-on .i-self__a { opacity: 1; border-color: var(--b-lime-edge); background: var(--b-lime-bg); }
.i-self__n { font: 700 clamp(44px, 5vw, 64px)/1 var(--font-h); letter-spacing: -.03em; color: var(--text-2); margin-bottom: 18px; }
.i-self__n b { color: var(--text-accent); }
.i-self__a p:last-child { font-size: 16px; line-height: 1.6; color: var(--text); }

/* your industry in HubSuite: the list of six on the left, the picture of the chosen one on the right */
.i-ix { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; max-width: 1180px; margin-inline: auto; border-block: 1px solid var(--b-edge); }
.i-ix__list { display: flex; flex-direction: column; padding: 18px 28px 18px 0; border-right: 1px solid var(--b-edge); }
.i-ix__tab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; font: 600 16px/1.3 var(--font-h); color: var(--text-2); text-align: left; cursor: pointer; transition: color .3s, background-color .3s; }
.i-ix__tab:hover { color: var(--text); }
.i-ix__tab.is-on { color: var(--b-ink); background: rgb(var(--b-glow)); }
.i-ix__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; }
.i-ix__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-ix:not(#_) .i-ix__tab { border-radius: 14px !important; }
.i-ix__all { display: inline-flex; align-items: center; gap: 8px; margin: 14px 16px 0; font-size: 14px; color: var(--text-2); text-decoration: none; }
.i-ix__all:hover { color: var(--text); }
.i-ix__all .i { width: 16px; height: 16px; }
.i-ix__pane { padding: 36px 0 40px 48px; animation: iPanelIn .5s var(--ease); }
.i-ix__risk { max-width: 640px; font: 600 clamp(28px, 3.2vw, 44px)/1.15 var(--font-h); letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.i-ix__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 30px 0 0; padding: 0; list-style: none; }
.i-ix__chain li { display: inline-flex; align-items: center; font-size: 15px; color: var(--text); }
.i-ix__chain li:not(:last-child)::after { content: ""; width: 22px; height: 1px; margin: 0 8px; background: rgb(var(--b-glow) / .6); }
.i-ix__chain li { padding: 0; }
.i-ix__res { margin: 28px 0 24px; padding-left: 18px; border-left: 3px solid rgb(var(--b-glow)); font-size: 17px; line-height: 1.5; color: var(--text); }

/* the end-to-end process as a line with stations, the last one is the result */
.i-metro { padding: 34px 6px 8px; overflow-x: auto; scrollbar-width: none; }
.i-metro::-webkit-scrollbar { display: none; }
.i-metro ol { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); margin: 0; padding: 0; list-style: none; min-width: calc(var(--n) * 96px); }
.i-metro ol::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 9px; height: 4px; background: linear-gradient(90deg, rgb(var(--b-glow) / .35), rgb(var(--b-glow))); }
.i-metro li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.i-metro i { position: relative; width: 22px; height: 22px; border: 4px solid rgb(var(--b-glow)); background: var(--bg); }
.i-metro li:last-child i { width: 30px; height: 30px; margin-top: -4px; background: rgb(var(--b-glow)); box-shadow: 0 0 0 6px rgb(var(--b-glow) / .15); }
.i-metro span { padding: 0 6px; font-size: 14.5px; line-height: 1.35; color: var(--text); }
.i-metro li:last-child span { font-weight: 600; color: var(--text-accent); }
.i-metro:not(#_) i { border-radius: 50% !important; }

/* the launch as a blueprint: dashed boxes on a dashed grid, the steps joined by a dashed line */
.i-plan { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; padding: 34px; list-style: none; border: 1px dashed rgb(var(--b-glow) / .3);
  background-image: linear-gradient(rgb(var(--b-glow) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--b-glow) / .05) 1px, transparent 1px); background-size: 28px 28px; }
.i-plan:not(#_) { border-radius: 24px !important; }
.i-plan li { position: relative; padding: 24px 22px; border: 1px dashed rgb(var(--b-glow) / .45); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.i-plan:not(#_) li { border-radius: 16px !important; }
.i-plan li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -23px; width: 22px; border-top: 1px dashed rgb(var(--b-glow) / .7); }
.i-plan__n { display: block; margin-bottom: 18px; font: 700 40px/1 var(--font-h); color: var(--text-accent); }
.i-plan h3 { font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-plan p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* the results as one scoreboard */
.i-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; border: 1px solid var(--b-lime-edge); background: var(--b-lime-bg); }
.i-score:not(#_) { border-radius: 24px !important; overflow: hidden; }
.i-score > div { padding: 32px 28px; border-left: 1px solid var(--b-lime-edge); }
.i-score > div:first-child { border-left: 0; }
.i-score b { display: block; font: 700 clamp(44px, 4.6vw, 68px)/1 var(--font-h); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.i-score span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

@media (max-width: 900px) {
  .i-self { grid-template-columns: 1fr; }
  .i-self__a { grid-column: 1; grid-row: auto; margin-top: 24px; padding: 24px; }
  .i-self label { font-size: 15.5px; }
  .i-ix { grid-template-columns: 1fr; border-bottom: 0; }
  .i-ix__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--b-edge); scrollbar-width: none; }
  .i-ix__list::-webkit-scrollbar { display: none; }
  .i-ix__tab { flex: none; padding: 10px 14px; font-size: 14.5px; white-space: nowrap; }
  .i-ix__all { flex: none; margin: 0 4px; white-space: nowrap; }
  .i-ix__pane { padding: 26px 0 0; }
  .i-plan { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .i-plan li:not(:last-child)::after { top: auto; bottom: -19px; right: auto; left: 44px; width: 0; height: 18px; border-top: 0; border-left: 1px dashed rgb(var(--b-glow) / .7); }
  .i-score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-score > div:nth-child(3) { border-left: 0; }
  .i-score > div:nth-child(n+3) { border-top: 1px solid var(--b-lime-edge); }
  .i-score > div { padding: 22px 18px; }
}

/* ===== 22.10.2026 (frontend-design): /contacts/, the switchboard (_src/oldpages.js contacts, js/pages.js [data-call]).
   The live status in big type, the channels as rows; the fastest one right now is lit ===== */
.i-callsec.b-sec { padding-top: 32px; }
.i-call { max-width: 1080px; margin-inline: auto; }
.i-call__now { font: 600 clamp(32px, 4.4vw, 60px)/1.1 var(--font-h); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.i-call__now b { font-variant-numeric: tabular-nums; color: var(--text-accent); }
.i-call__dot { display: inline-block; vertical-align: .22em; width: 14px; height: 14px; margin-right: .35em; background: rgb(var(--fg) / .3); }
.i-call.is-open .i-call__dot { background: #3ddc84; box-shadow: 0 0 0 6px rgb(61 220 132 / .18); animation: pPulse 2s ease-in-out infinite; }
.i-call:not(#_) .i-call__dot { border-radius: 50% !important; }
.i-call__hint { margin-top: 14px; font-size: 18px; color: var(--text-2); }
.i-call__list { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--b-edge); }
.i-call__row { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 24px; padding: 22px 18px; border-bottom: 1px solid var(--b-edge); transition: background-color .4s; }
.i-call__k { font-size: 15px; color: var(--text-2); }
.i-call__v { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 600 clamp(19px, 1.8vw, 24px)/1.3 var(--font-h); letter-spacing: -.01em; }
.i-call__v a { color: var(--text); text-decoration: none; background: linear-gradient(rgb(var(--b-glow)), rgb(var(--b-glow))) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.i-call__v a:hover { background-size: 100% 2px; }
.i-call__t { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
/* the fastest way right now */
.i-call__row.is-best { background: var(--b-lime-bg); }
.i-call__row.is-best::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: rgb(var(--b-glow)); }
.i-call__row.is-best .i-call__k { color: var(--text); font-weight: 600; }
.i-call__soc { margin-top: 26px; font-size: 15px; color: var(--text-2); }
.i-call__soc a { color: var(--text); }
.i-call__soc a:hover { color: var(--text-accent); }
@media (max-width: 900px) {
  .i-call__now { font-size: 30px; }
  .i-call__hint { font-size: 16px; }
  .i-call__row { grid-template-columns: 1fr; gap: 4px; padding: 18px 14px; }
  .i-call__v { font-size: 19px; }
}


/* ===== 22.10.2026: the blog of the old site in the parts of the new design (_src/pages/blog.js): the hero with the small
   SEO title over the big offer, the featured article, the topic filter on the pill switch, cards with a topic cover,
   the Notion-like article (cover, properties, a narrow column, drop cap, pull quote, callouts), the author ===== */
.i-hero__k { margin-bottom: 14px; font: 500 16px/1.4 var(--x-font); color: var(--text-2); }
.i-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.i-tags .b-tag { align-self: auto; }

/* the featured article: the text beside the product window */
.i-feat.b-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 44px; }
.i-feat__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.i-feat h2 { font: 700 clamp(28px, 3vw, 42px)/1.12 var(--font-h); letter-spacing: -.025em; }
.i-feat h2 a { color: var(--text); text-decoration: none; }
.i-feat h2 a:hover { color: var(--text-accent); }
.i-feat__txt > p { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.i-feat__vis { min-width: 0; }

/* the article cards: a cover from the topic */
.i-post.b-card { gap: 14px; padding: 14px 14px 24px; }
.i-post > :not(.i-post__cover) { margin-inline: 12px; }
.i-post__cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: rgb(var(--b-glow));
  background: radial-gradient(120% 90% at 80% 0%, rgb(47 111 237 / .45), transparent 60%), linear-gradient(160deg, #10245c, #0a1538);
  background-image: radial-gradient(120% 90% at 80% 0%, rgb(47 111 237 / .45), transparent 60%), linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(160deg, #10245c, #0a1538);
  background-size: auto, 26px 26px, 26px 26px, auto; }
[data-theme="light"] .i-post__cover { color: #1d3a85;
  background-image: radial-gradient(120% 90% at 80% 0%, rgb(204 255 0 / .35), transparent 60%), linear-gradient(rgb(11 31 79 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(11 31 79 / .06) 1px, transparent 1px), linear-gradient(160deg, #eef3ff, #dfe7fb); }
.i-post__cover span { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid currentColor; box-shadow: 0 0 40px rgb(var(--b-glow) / .35); transition: transform .5s var(--ease); }
.i-post__cover svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-post:hover .i-post__cover span { transform: scale(1.08) rotate(-4deg); }
.i-post:not(#_) .i-post__cover { border-radius: 14px !important; }
.i-post:not(#_) .i-post__cover span { border-radius: 20px !important; }
.i-post h3 { font: 600 20px/1.3 var(--font-h); color: var(--text); }
.i-post p { flex: 1; }
.i-post.is-hidden { display: none; }
.i-empty { margin-top: 24px; text-align: center; color: var(--text-2); }

/* the article: the cover band, then a narrow column */
.i-art { position: relative; padding-top: var(--header-h, 84px); }
.i-art__cover { position: relative; display: grid; place-items: center; height: clamp(180px, 26vw, 320px); overflow: hidden; color: rgb(var(--b-glow));
  background-image: radial-gradient(70% 120% at 70% 0%, rgb(47 111 237 / .4), transparent 65%), linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px; -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
[data-theme="light"] .i-art__cover { color: #1d3a85; background-image: radial-gradient(70% 120% at 70% 0%, rgb(204 255 0 / .3), transparent 65%), linear-gradient(rgb(11 31 79 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(11 31 79 / .06) 1px, transparent 1px); }
.i-art__cover .x-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.i-art__mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid currentColor; background: var(--bg); box-shadow: 0 0 60px rgb(var(--b-glow) / .35); }
.i-art__mark svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i-art:not(#_) .i-art__mark { border-radius: 26px !important; }
.i-art__in { position: relative; width: min(100% - 2 * var(--pad), 760px); margin: -40px auto 0; }
.i-art__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.i-art__title { font: 700 clamp(34px, 4.2vw, 56px)/1.08 var(--font-h); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.i-art__dek { font-size: 19px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.i-art__props.b-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; padding: 0; margin: 10px 0 0; }
.i-art__props > div { padding: 16px 20px; border-left: 1px solid var(--b-edge); }
.i-art__props > div:first-child { border-left: 0; }
.i-art__props dt { font-size: 13px; color: var(--text-2); }
.i-art__props dd { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.i-art__props a { color: var(--text); text-decoration: none; }
.i-art__props a:hover { color: var(--text-accent); }
.i-art__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.i-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: rgb(var(--b-glow)); color: var(--b-ink); font: 700 12px/1 var(--x-font); }
:is(.i-art, .i-art__by):not(#_) .i-av { border-radius: 50% !important; }
.i-art__body { margin-top: 48px; font: 400 18px/1.75 var(--x-font); color: var(--text-2); }
.i-art__body p { margin: 0 0 18px; }
.i-art__body b, .i-art__body strong { color: var(--text); }
.i-art__lead { font-size: 20px !important; line-height: 1.65; color: var(--text) !important; }
.i-art__lead::first-letter { float: left; margin: 6px 12px 0 0; font: 700 74px/.8 var(--font-h); color: var(--text-accent); }
.i-art__body h2 { position: relative; scroll-margin-top: calc(var(--header-h, 84px) + 24px); margin: 48px 0 16px; font: 600 clamp(24px, 2.3vw, 30px)/1.25 var(--font-h); letter-spacing: -.02em; color: var(--text); }
.i-anchor { position: absolute; left: -1.1em; color: rgb(var(--b-glow) / .6); text-decoration: none; opacity: 0; transition: opacity .25s; }
.i-art__body h2:hover .i-anchor { opacity: 1; }
.i-quote--pull { margin: 40px 0; padding: 30px 0; border-left: 0; border-block: 1px solid var(--b-edge); text-align: center; }
.i-quote--pull p { font: 600 clamp(22px, 2.4vw, 30px)/1.35 var(--font-h) !important; letter-spacing: -.015em; }
.i-art__end { margin: 40px 0 0 !important; text-align: center; letter-spacing: .6em; color: var(--text-2); }
.i-art__by.b-card { flex-direction: row; align-items: flex-start; gap: 18px; margin: 48px 0 0; }
.i-art__by .i-av { width: 52px; height: 52px; font-size: 15px; }
.i-art__by b { display: block; font: 600 18px/1.3 var(--font-h); color: var(--text); }
.i-art__by small { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); }
.i-art__by p { margin: 12px 0 16px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 900px) {
  .i-feat.b-card { grid-template-columns: 1fr; gap: 28px; padding: 26px 20px; }
  .i-posts { grid-template-columns: 1fr; }
  .i-art__in { margin-top: -24px; }
  .i-art__props.b-card { grid-template-columns: 1fr; }
  .i-art__props > div { border-left: 0; border-top: 1px solid var(--b-edge); }
  .i-art__props > div:first-child { border-top: 0; }
  .i-art__body { font-size: 17px; margin-top: 36px; }
  .i-art__lead { font-size: 18px !important; }
  .i-anchor { display: none; }
  .i-art__by.b-card { flex-direction: column; }
}
/* the legal documents do not shrink on a press (the press of .b-card in blocks.css) */
.i-doc__tocin.b-card:active, .i-prose.b-card:active { scale: none; }

/* ===== 23.10.2026 (frontend-design): /about/ in its own forms (_src/pages/company.js about): the hero with the team
   photo in the background, the story as a principle in big type, the way we work as a manifesto, the results as one sentence ===== */
.i-hero--about { display: flex; align-items: center; min-height: min(100svh, 900px); padding-bottom: 96px; }
.i-hero--about .i-ab { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; text-align: left; }
.i-ab__txt { display: flex; flex-direction: column; align-items: flex-start; max-width: 620px; }
.i-ab__txt .i-hero__h1 { text-align: left; }
.i-ab__txt .i-hero__btns { justify-content: flex-start; }
/* the photo sits in the background: toned to the navy of the page and faded into it on the left (under the text) and at the edges */
.i-ab__bg { position: absolute; inset: 0 0 0 auto; z-index: -3; width: min(74%, 1400px); height: 100%; object-fit: cover; object-position: 70% 35%; pointer-events: none;
  filter: grayscale(1) sepia(.6) hue-rotate(185deg) saturate(2.2) brightness(.62) contrast(1.08); opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%), linear-gradient(0deg, transparent, #000 32%), linear-gradient(180deg, transparent, #000 22%);
  -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(90deg, transparent, #000 48%), linear-gradient(0deg, transparent, #000 32%), linear-gradient(180deg, transparent, #000 22%);
  mask-composite: intersect; }
[data-theme="light"] .i-ab__bg { filter: grayscale(1) sepia(.3) hue-rotate(185deg) saturate(1.4) brightness(1.08) contrast(.95); opacity: .4; }

/* the story: a principle in big type beside the text and the facts */
.i-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1180px; margin-inline: auto; }
.i-story__q { margin: 0; padding-left: 28px; border-left: 4px solid rgb(var(--b-glow)); font: 700 clamp(30px, 3.6vw, 52px)/1.12 var(--font-h); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.i-story__txt p { font-size: 18px; line-height: 1.65; color: var(--text-2); }
.i-story__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; border-top: 1px solid var(--b-edge); }
.i-story__facts > div { padding: 18px 16px 0 0; }
.i-story__facts dt { font: 700 clamp(30px, 3vw, 42px)/1 var(--font-h); letter-spacing: -.03em; color: var(--text-accent); }
.i-story__facts dd { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }

/* the way we work: a manifesto in two columns split by hairlines */
.i-manif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.i-manif li { padding: 28px 0; border-top: 1px solid var(--b-edge); }
.i-manif h3 { font: 600 clamp(22px, 2.2vw, 30px)/1.2 var(--font-h); letter-spacing: -.02em; color: var(--text); }
.i-manif p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* the results as one sentence */
.i-claim { max-width: 1020px; margin: 0 auto; font: 600 clamp(26px, 3.2vw, 44px)/1.3 var(--font-h); letter-spacing: -.02em; color: var(--text); text-align: center; text-wrap: balance; }
.i-claim b { color: var(--text-accent); white-space: nowrap; }

@media (max-width: 900px) {
  /* on the phone the photo goes under the buttons, faded in from above */
  .i-hero--about { display: block; min-height: 0; padding-bottom: min(78vw, 460px); }
  .i-ab__bg { width: 100%; height: min(100vw, 600px); inset: auto 0 0; object-position: 72% 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%), linear-gradient(0deg, transparent, #000 20%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 50%), linear-gradient(0deg, transparent, #000 20%); }
  .i-story { grid-template-columns: 1fr; gap: 28px; }
  .i-story__txt p { font-size: 16px; }
  .i-manif { grid-template-columns: 1fr; }
  .i-manif li { padding: 22px 0; }
}

/* 23.10.2026: the titles of /pricing/, /about/ and /contacts/ (pageHero mod 'hs') in the type of the app heroes (.hs-title) */
.i-hero--hs .i-hero__h1 { font: 500 clamp(40px, 4.3vw, 112px)/1.08 var(--font-head); letter-spacing: -.035em; }
@media (max-width: 900px) { .i-hero--hs .i-hero__h1 { font-size: clamp(28px, 9.2vw, 54px); } }

/* 23.10.2026, the phone: the article cards are not module cards (no icon column), the cover on top, the text under it */
@media (max-width: 900px) { .i-post.b-mod:not(#_) { display: flex; flex-direction: column; } }

/* 23.10.2026: the /about/ hero keeps the side room of the app heroes (/, /ai/, /tenders/: 5% of the width), not a centred 1200px box */
@media (min-width: 901px) {
  .i-hero--about:not(#_) { padding-inline: 5%; }
  .i-hero--about .i-ab:not(#_) { max-width: none; }
}

/* 23.10.2026, the phone: the plan comparison shows one plan at a time, picked by a switch like the payment period one
   (js/pages.js [data-cmp-pick]); the table fits the screen, no sideways scroll */
.i-cmp-pick { display: none; }
@media (max-width: 640px) {
  .i-cmp-pick { display: flex; margin-bottom: 18px; }
  .i-table-card:not(#_) { overflow: visible; }
  .i-compare:not(#_) { min-width: 0; }
  .i-compare :is(th, td):first-child { min-width: 0 !important; width: 62%; }
  .i-compare :is(th, td):not(:first-child) { display: none; }
  .i-table-card[data-col="1"] .i-compare :is(th, td):nth-child(2),
  .i-table-card[data-col="2"] .i-compare :is(th, td):nth-child(3),
  .i-table-card[data-col="3"] .i-compare :is(th, td):nth-child(4) { display: table-cell; }
}

/* 23.10.2026, /contacts/: the messengers and the social networks are the icon buttons of the footer (a touch bigger),
   the free demo row has the lime button; the switchboard line style (underline) stays for the phone and the mails only */
.i-call__v .i-call__ics:not(#_):not(#_) { gap: 8px; padding: 0; }
.i-call__ics a:not(#_):not(#_) { width: 44px; height: 44px; }
.i-call__ics a svg:not(#_):not(#_) { width: 19px; height: 19px; }
.i-call__v :is(.i-call__ics a, .btn):not(#_) { background-size: auto; }
.i-call__v .btn { min-height: 44px; padding-inline: 22px; font-size: 15px; }
.i-call__row:has(.i-call__ics, .btn) { align-items: center; }
.i-call__soc:not(#_) { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 12px 24px; margin-top: 22px; padding-inline: 18px; }   /* the columns of the rows above */
.i-call__soc > span:first-child { font-size: 15px; color: var(--text-2); }
@media (max-width: 900px) { .i-call__soc:not(#_) { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-inline: 14px; } }

/* 23.10.2026: the article rows of /about/, the author page and «Читайте також» scroll sideways with dots on phones and
   tablets too (up to 900px, where the grid would stack them in one long column) */
@media (min-width: 641px) and (max-width: 900px) {
  .b-sec .i-posts.i-swipe:not(#_):not(#_) {
    display: flex; gap: 14px; margin-inline: calc(-1 * var(--pad, 24px)); padding: 4px var(--pad, 24px) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad, 24px); scrollbar-width: none;
  }
  .b-sec .i-posts.i-swipe::-webkit-scrollbar { display: none; }
  .b-sec .i-posts.i-swipe:not(#_) > * { flex: 0 0 min(62%, 380px); min-width: 0; scroll-snap-align: start; }
  .b-sec .i-posts.i-swipe:not(#_):not(#_) > .x-rv { opacity: 1; translate: none; transform: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .i-posts.i-swipe + .b-dots:not(#_) { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .i-posts.i-swipe + .b-dots i { width: 8px; height: 8px; border-radius: 99px !important; background: rgb(var(--fg) / .2); transition: width .3s var(--ease), background-color .3s; }
  .i-posts.i-swipe + .b-dots i.is-on { width: 24px; background: var(--b-mid); }
}