/* Torgs UI — дизайн-система по канону docs/DESIGN_SYSTEM_TORGS.md */

:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #fbfbfe;
    --text: #0f1221;
    --muted: #6b7285;
    --line: rgba(15, 18, 33, .08);
    --line-strong: rgba(15, 18, 33, .14);

    --brand: #6d4aff;
    --brand-strong: #5b3cf0;
    --brand-soft: #f1edff;
    --brand-2: #2ec9c0;
    --cta: linear-gradient(90deg, #6d4aff 0%, #7b5cff 45%, #2ec9c0 100%);

    --ok-bg: #e8f7ef;
    --ok-fg: #1c7a4b;
    --warn-bg: #fdf3e2;
    --warn-fg: #96601a;
    --danger-bg: #fdeced;
    --danger-fg: #a52834;
    --info-bg: #ecf1ff;
    --info-fg: #2d4ea8;

    --r-card: 20px;
    --r-card-lg: 24px;
    --r-ctl: 14px;
    --r-pill: 999px;

    --shadow: 0 8px 24px rgba(15, 18, 33, .06);
    --shadow-hover: 0 14px 34px rgba(15, 18, 33, .1);

    --rail-l: 264px;
    --rail-r: 300px;
    --gap: 24px;
    --page: 1440px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 44px;

    --measure: 68ch;

    --t: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.tui {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.tui img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* :where даёт нулевую специфичность: сброс не перебивает цвет кнопок и ссылок-компонентов.
   С обычным `.tui a` правило было сильнее, чем `.tui-btn--cta`, и текст кнопок терял белый цвет. */
:where(.tui) :where(a) {
    color: inherit;
    text-decoration: none;
}

/* Текстовая ссылка видна сразу: фирменный фиолетовый и подчёркивание.
   Кнопки, меню, карточки, чипы и пагинация остаются своими компонентами. */
.tui :is(.tui-main, .tui-bot, .tui-railbot, .tui-modal) a:not(
    .tui-btn,
    .tui-pill,
    .tui-chip,
    .tui-item,
    .tui-navtile,
    .tui-logo,
    .tui-tile,
    .tui-price,
    .tui-link,
    .tui-pag__btn,
    .tc-btn,
    .tc-tile
):not(:where(
    .tui-pager a,
    .tui-pag a,
    .styled-pagination a,
    .tui-lane__links a,
    .tui-sug a
)) {
    color: var(--brand-strong);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-decoration-skip-ink: auto;
}

.tui :is(.tui-main, .tui-bot, .tui-railbot, .tui-modal) a:not(
    .tui-btn,
    .tui-pill,
    .tui-chip,
    .tui-item,
    .tui-navtile,
    .tui-logo,
    .tui-tile,
    .tui-price,
    .tui-link,
    .tui-pag__btn,
    .tc-btn,
    .tc-tile
):not(:where(
    .tui-pager a,
    .tui-pag a,
    .styled-pagination a,
    .tui-lane__links a,
    .tui-sug a
)):hover {
    color: #3d28c2;
    text-decoration-color: currentColor;
}

:where(.tui) :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Атрибут hidden не действует на SVG: спрайт иконок без этого правила
   занимает на странице пустой блок 300x150. */
.tui svg[hidden] {
    display: none;
}

.tui h1,
.tui h2,
.tui h3,
.tui h4,
.tui p,
.tui ul,
.tui ol {
    margin: 0;
}

.tui ul,
.tui ol {
    padding: 0;
    list-style: none;
}

.tui :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

.tui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- утилиты вместо инлайновых стилей ---------- */

.tui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.tui-stack--4 {
    gap: var(--s-4);
}

.tui-stack--6 {
    gap: var(--s-6);
}

.tui-actions form {
    display: contents;
}

.tui-measure {
    max-width: var(--measure);
}

.tui-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.tui-num {
    font-variant-numeric: tabular-nums;
}

.tui-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
}

.tui-split--wide-l {
    grid-template-columns: 1.15fr 1fr;
}

/* ---------- layout ---------- */

.tui-wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 24px;
}

.tui-shell {
    display: grid;
    grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
    gap: 16px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 16px 20px;
    align-items: start;
}

.tui-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tui-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

/* ---------- topbar ---------- */

.tui-topbar {
    background:
        linear-gradient(180deg, rgba(241, 237, 255, .75) 0%, rgba(241, 237, 255, .2) 100%);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.tui-topbar__in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tui-topbar__sp {
    margin-left: auto;
}

.tui-topbar a,
.tui-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.tui-topbar a {
    transition: background var(--t), color var(--t);
}

.tui-topbar a:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-topbar svg {
    flex: 0 0 auto;
    color: var(--brand-strong);
}

/* ---------- header ---------- */

.tui-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.tui-header__in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.tui-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tui-logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cta);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
}

.tui-logo__text {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
}

.tui-nav {
    display: flex;
    gap: 4px;
}

.tui-nav a {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--muted);
    white-space: nowrap;
    transition: background var(--t), color var(--t);
}

.tui-nav a:hover,
.tui-nav a.is-current {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-nav__cab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 600;
}

.tui-nav__cab svg {
    flex-shrink: 0;
}

.tui-search {
    margin-left: auto;
    position: relative;
    flex: 0 1 260px;
    min-width: 160px;
}

.tui-search .tui-sug {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    margin-top: 0;
}

.tui-search input {
    width: 100%;
    padding: 9px 56px 9px 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface-2);
    font-size: 14px;
    color: var(--text);
    transition: border-color var(--t), background var(--t);
}

.tui-search input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.tui-search__ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.tui-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 11px;
    color: var(--muted);
    background: #fff;
    pointer-events: none;
}

/* ---------- buttons ---------- */

.tui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}

.tui-btn--cta {
    background: var(--cta);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 8px 20px rgba(109, 74, 255, .28);
}

.tui-btn--cta::after {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.2 5.2 19.6 12l-6.4 6.8-1.5-1.4 4.2-4.4H4.5v-2h11.4l-4.2-4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.2 5.2 19.6 12l-6.4 6.8-1.5-1.4 4.2-4.4H4.5v-2h11.4l-4.2-4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tui-btn--dark {
    background: var(--text);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 8px 18px rgba(15, 18, 33, .18);
}

.tui-btn--ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
    box-shadow: inset 0 1px 0 #fff;
}

.tui-btn--quiet {
    background: transparent;
    color: var(--muted);
    border-color: var(--line-strong);
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
}

.tui-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.tui-btn--cta:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 14px 28px rgba(109, 74, 255, .38);
}

.tui-btn--dark:hover {
    background: #1c2140;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 12px 24px rgba(15, 18, 33, .22);
}

.tui-btn--ghost:hover {
    border-color: rgba(109, 74, 255, .45);
    background: var(--brand-soft);
    color: var(--brand-strong);
    box-shadow: inset 0 1px 0 #fff;
}

.tui-btn:active {
    transform: translateY(0);
}

.tui-btn--sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
}

.tui-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-strong);
    font-weight: 600;
    font-size: 14px;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.tui-link:hover {
    color: #3d28c2;
    text-decoration-color: currentColor;
}

/* ---------- cards ---------- */

.tui-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: 20px;
}

.tui-card--flat {
    box-shadow: none;
}

.tui-card--pad-lg {
    padding: 24px;
}

.tui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
}

.tui-h1 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.14;
    letter-spacing: -.02em;
    font-weight: 700;
}

.tui-h2 {
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.24;
    letter-spacing: -.01em;
    font-weight: 700;
}

.tui-h3 {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

.tui-lead {
    color: var(--muted);
    font-size: 16px;
}

.tui-muted {
    color: var(--muted);
    font-size: 14px;
}

.tui-accent {
    background: var(--cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- hero ---------- */

.tui-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 380px at 88% -26%, rgba(46, 201, 192, .2), transparent 62%),
        radial-gradient(900px 340px at 2% -14%, rgba(109, 74, 255, .18), transparent 60%),
        var(--surface);
}

/* Тонкая сетка на фоне — намёк на промышленный контекст без картинок. */
.tui-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15, 18, 33, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 18, 33, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(720px 320px at 82% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(720px 320px at 82% 0%, #000 0%, transparent 72%);
    pointer-events: none;
}

.tui-hero > *:not(.tui-cover) {
    position: relative;
}

.tui-hero__lead {
    color: var(--muted);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.55;
    max-width: 62ch;
}

.tui-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
}

.tui-tab {
    padding: 8px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    transition: background var(--t), color var(--t);
}

.tui-tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(15, 18, 33, .07);
}

.tui-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.tui-field:focus-within {
    border-color: var(--brand);
}

.tui-field__ico {
    padding-left: 10px;
    color: var(--muted);
    flex-shrink: 0;
}

.tui-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 4px;
    font-size: 16px;
    color: var(--text);
}

.tui-field input:focus {
    outline: none;
}

.tui-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tui-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 13px;
    color: var(--muted);
    transition: border-color var(--t), color var(--t), background var(--t);
}

.tui-pill:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft);
}

/* подсказки поиска */

.tui-sug {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    box-shadow: var(--shadow);
    max-height: 320px;
    overflow: auto;
}

.tui-sug:empty {
    display: none;
}

.tui-sug__group {
    padding: 10px 14px 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.tui-sug a {
    display: block;
    padding: 9px 14px;
    font-size: 14px;
    border-top: 1px solid var(--line);
}

.tui-sug a:hover {
    background: var(--brand-soft);
}

/* ---------- stats ---------- */

.tui-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tui-stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: rgba(255, 255, 255, .72);
}

.tui-stat__v {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--text);
    min-height: 1.15em;
}

.tui-stat__l {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.tui-stat--lp {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.tui-stat--lp .tui-stat__v {
    display: block;
    font-size: clamp(22px, 2vw, 30px);
    color: #312e81;
}

.tui-stat__bar {
    display: block;
    height: 3px;
    margin-top: 12px;
    border-radius: 99px;
    background: #e7e5f4;
    overflow: hidden;
}

.tui-stat__bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4338ca, #14b8a6);
}

.tui-reveal.is-in.tui-stat--lp .tui-stat__v {
    animation: tui-stat-pop .55s ease both;
    animation-delay: calc(var(--i, 1) * 70ms);
}

.tui-reveal.is-in.tui-stat--lp .tui-stat__bar::after {
    width: 78%;
    transition: width .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 1) * 90ms);
}

@keyframes tui-stat-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.tui-railbot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tui-railbot__title {
    margin: -6px 0 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.tui-railbot .tui-bot__log {
    max-height: 220px;
    padding: 0;
    min-height: 0;
}

.tui-railbot .tui-bot__chips,
.tui-railbot .tui-bot__form {
    padding: 0;
    border: 0;
}

@media (min-width: 768px) {
    body:has(.tui-railbot) .tui-botfab,
    body:has(.tui-railbot) #tui-bot {
        display: none !important;
    }
}

/* ---------- grids ---------- */

.tui-grid {
    display: grid;
    gap: 16px;
}

.tui-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tui-shield {
    margin: 0 0 14px;
}

.tui-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- module (карта требований) ---------- */

.tui-mod {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-mod:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tui-mod__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.tui-chip {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tui-chip--ok {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.tui-chip--warn {
    background: var(--warn-bg);
    color: var(--warn-fg);
}

.tui-chip--danger {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.tui-chip--info {
    background: var(--info-bg);
    color: var(--info-fg);
}

.tui-mod--static:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- price ---------- */

.tui-price {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    position: relative;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-price:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.tui-price--hot {
    border-color: rgba(109, 74, 255, .4);
}

.tui-price__badge {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--cta);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.tui-price__val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tui-price__term {
    font-size: 13px;
    color: var(--muted);
}

.tui-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.tui-list li {
    display: flex;
    gap: 9px;
}

.tui-list li::before,
.tui-casedots li::before,
.tui-casechecks li::before,
.tui-casesteps__item::before,
.tui-prose ul > li::before,
.tui-prose ol > li::before,
.tui-casestream ul > li::before,
.tui-casestream ol > li::before {
    content: "Т";
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cta);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
}

.tui-list li::before {
    margin-top: 3px;
}

/* ---------- next step ---------- */

.tui-next {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px;
    border-radius: var(--r-card-lg);
    background: linear-gradient(120deg, #2a1d6b 0%, #4b32c3 55%, #1f7c78 100%);
    color: #fff;
}

.tui-next__t {
    flex: 1 1 320px;
}

.tui-next h2 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.tui-next p {
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    margin-top: 6px;
}

.tui-next .tui-btn--cta {
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

.tui-next .tui-btn--ghost {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

/* ---------- rails ---------- */

.tui-railcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.tui-railcard__t {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 12px;
}

.tui-side a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--muted);
    transition: background var(--t), color var(--t);
}

.tui-side a:hover {
    background: var(--bg);
    color: var(--text);
}

.tui-side a.is-active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.tui-side a.is-current:not(.is-active) {
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
}

.tui-side__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    flex-shrink: 0;
}

.tui-cabinet {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(150deg, #4b32c3, #6d4aff 60%, #2ec9c0);
    color: #fff;
}

.tui-cabinet__l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
}

.tui-cabinet__v {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 2px;
}

.tui-cabinet__s {
    font-size: 13px;
    opacity: .82;
    margin-bottom: 14px;
}

.tui-cabinet .tui-btn {
    width: 100%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    min-height: 40px;
    font-size: 14px;
}

.tui-tile {
    display: flex;
    gap: 12px;
    padding: 11px;
    border-radius: 14px;
    transition: background var(--t);
}

.tui-tile:hover {
    background: var(--bg);
}

.tui-tile__ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tui-tile__n {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.tui-tile__d {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

/* ---------- секции и ритм страницы ---------- */

/* Секция = карточка с одинаковым внутренним ритмом.
   Заголовок, тело и подпись не требуют инлайновых отступов. */
.tui-sec {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tui-sec__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.tui-sec__title {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: flex-start;
}

.tui-sec__aside {
    color: var(--muted);
    font-size: 14px;
}

.tui-sub {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Чередование фона даёт ритм: белое — приглушённое — белое. */
.tui-card--tint {
    background:
        linear-gradient(180deg, var(--brand-soft) 0%, rgba(241, 237, 255, 0) 46%),
        var(--surface);
}

.tui-card--dark {
    background: linear-gradient(120deg, #191c33 0%, #241f4d 52%, #14343a 100%);
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.tui-card--dark .tui-muted,
.tui-card--dark .tui-lead,
.tui-card--dark .tui-note {
    color: rgba(255, 255, 255, .72);
}

.tui-card--dark .tui-eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.tui-card--dark .tui-btn--cta {
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

.tui-card--dark .tui-btn--ghost,
.tui-card--dark .tui-btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}

.tui-card--dark .tui-btn--ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
}

.tui-card--accent {
    border-color: rgba(109, 74, 255, .32);
    box-shadow: 0 14px 40px rgba(109, 74, 255, .12);
}

/* Полоса цифр на тёмном — акцент для блока результатов. */
.tui-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    padding: var(--s-5);
    border-radius: var(--r-card);
    background: linear-gradient(120deg, #191c33 0%, #241f4d 52%, #14343a 100%);
    color: #fff;
}

.tui-band__v {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tui-band__l {
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.4;
}

/* ---------- квиз ---------- */

.tui-quiz {
    max-width: 640px;
}

.tui-quiz__step {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.tui-quiz__bar {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
    margin: 10px 0 18px;
}

.tui-quiz__bar i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cta);
    transition: width var(--t);
}

.tui-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 15px;
    transition: border-color var(--t), background var(--t);
}

.tui-opt:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* ---------- формы ---------- */

.tui-in {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 15px;
    color: var(--text);
    transition: border-color var(--t);
}

.tui-in:focus {
    outline: none;
    border-color: var(--brand);
}

.tui-lb {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.tui-check {
    display: flex;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.tui-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.tui-check a {
    color: var(--brand-strong);
    text-decoration: underline;
}

/* ---------- FAQ ---------- */

.tui-acc {
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    overflow: hidden;
}

.tui-acc + .tui-acc {
    margin-top: 10px;
}

.tui-acc summary {
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tui-acc summary::-webkit-details-marker {
    display: none;
}

.tui-acc summary::after {
    content: "+";
    color: var(--muted);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
}

.tui-acc[open] summary::after {
    content: "–";
}

.tui-acc__b {
    padding: 0 18px 16px;
    color: var(--muted);
    font-size: 14.5px;
}

/* ---------- кейсы / статьи ---------- */

.tui-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    height: 100%;
    transition: box-shadow var(--t), transform var(--t);
}

.tui-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tui-doc__h {
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.35;
    letter-spacing: -.01em;
    max-width: 42em;
}

.tui-doc__meta {
    margin: 0;
}

.tui-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--t), box-shadow var(--t);
}

.tui-preview:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    color: var(--text);
}

.tui-preview__k {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-strong);
}

.tui-preview strong {
    font-size: 16px;
    line-height: 1.35;
}

.tui-preview__t {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tui-item__visual {
    position: relative;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
}

.tui-item__visual .tui-item__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.tui-cases .tui-item__img,
.tui-casehero.tui-cases img {
    filter: brightness(.82) saturate(.88);
}

.tui-cases .tui-item__visual:has(img)::after,
.tui-casehero.tui-cases:has(img)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: #3a445c;
    mix-blend-mode: darken;
}

.tui-casecover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    color: #fff;
}

.tui-casecover svg {
    margin-bottom: auto;
}

.tui-casecover__n {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .92;
}

.tui-casecover--textile { background: linear-gradient(145deg, #3b2a78, #6d4aff); }
.tui-casecover--radio { background: linear-gradient(145deg, #1c2744, #4c6fff); }
.tui-casecover--med { background: linear-gradient(145deg, #1c5c4a, #2ec9c0); }
.tui-casecover--rail { background: linear-gradient(145deg, #3a2a1c, #c47a3a); }
.tui-casecover--heavy { background: linear-gradient(145deg, #2a3144, #6b7285); }
.tui-casecover--machine { background: linear-gradient(145deg, #1e3a5f, #5b8def); }
.tui-casecover--gas { background: linear-gradient(145deg, #1c3d3a, #2a9d8f); }
.tui-casecover--chem { background: linear-gradient(145deg, #3d2458, #9b6dff); }
.tui-casecover--wood { background: linear-gradient(145deg, #3d2c1c, #b07d4a); }
.tui-casecover--factory { background: linear-gradient(145deg, #1c2744, #6d4aff); }
.tui-casecover--prom { background: linear-gradient(145deg, #1e3a5f, #5b8def); }
.tui-casecover--telecom { background: linear-gradient(145deg, #1c3d3a, #2a9d8f); }
.tui-casecover--tpp { background: linear-gradient(145deg, #3a2a1c, #c47a3a); }
.tui-casecover--kd { background: linear-gradient(145deg, #2a3144, #6b7285); }
.tui-casecover--codes { background: linear-gradient(145deg, #3d2458, #9b6dff); }
.tui-casecover--loc { background: linear-gradient(145deg, #1c5c4a, #2ec9c0); }
.tui-casecover--support { background: linear-gradient(145deg, #3b2a78, #6d4aff); }

.tui-item__meta {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- footer ---------- */

.tui-checkmod {
    padding: 0 24px 8px;
}

.tui-checkmod__in {
    max-width: var(--page);
    margin: 0 auto;
}

.tui-checkmod__frame {
    width: 100%;
    height: 840px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    background: var(--bg);
}

.tui-foot {
    margin-top: 8px;
    padding: 8px 24px 28px;
    background: transparent;
}

.tui-foot__panel {
    max-width: var(--page);
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(241, 237, 255, .55) 0%, rgba(241, 237, 255, 0) 120px),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card-lg);
    box-shadow: var(--shadow);
}

.tui-foot__in {
    padding: 28px 28px 8px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
}

.tui-foot h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.tui-foot ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tui-foot__in a:not(.tui-btn, .tui-logo) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -8px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--t), color var(--t);
}

.tui-foot__in a:not(.tui-btn, .tui-logo):hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-foot__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.tui-foot__contacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
}

.tui-foot__contacts svg {
    flex: 0 0 auto;
    color: var(--brand-strong);
}

.tui-foot__brand .tui-btn {
    align-self: flex-start;
}

.tui-foot__bottom {
    margin: 8px 20px 0;
    padding: 14px 8px 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.tui-foot__bottom > div {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.tui-foot__bottom a {
    color: var(--muted);
    text-decoration: none;
}

.tui-foot__bottom a:hover {
    color: var(--brand-strong);
}

/* ---------- мобильное меню ---------- */

.tui-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    place-items: center;
}

/* ---------- дорожки по интенту ---------- */

.tui-lane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-lane::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--lane, var(--brand));
}

.tui-lane:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
}

.tui-lane__hd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tui-lane__ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--brand-soft);
    background: color-mix(in srgb, var(--lane, var(--brand)) 12%, #fff);
    color: var(--lane, var(--brand));
}

.tui-lane__q {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lane, var(--brand));
}

.tui-lane__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.tui-lane__links a {
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--muted);
}

.tui-lane__links a:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

/* ---------- навигатор по разделам ---------- */

.tui-navtile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-navtile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--line-strong);
}

.tui-navtile__c {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-strong);
    letter-spacing: .02em;
}

.tui-navtile__n {
    font-size: 15px;
    font-weight: 650;
}

.tui-navtile__d {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

/* ---------- шаги ---------- */

.tui-steps {
    counter-reset: st;
    display: grid;
    gap: 14px;
}

.tui-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tui-step__n {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}

/* ---------- таблица сравнения ---------- */

.tui-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
}

.tui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}

.tui-table th,
.tui-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    transition: background .15s ease;
}

.tui-table thead th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.tui-table tbody tr:last-child td {
    border-bottom: 0;
}

.tui-table td:first-child {
    color: var(--muted);
}

.tui-table .is-good {
    color: var(--ok-fg);
    font-weight: 600;
}

.tui-table .is-bad {
    color: var(--danger-fg);
}

/* ---------- калькулятор готовности ---------- */

.tui-calc__row {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}

.tui-calc__row:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.tui-calc__row input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.tui-calc__out {
    padding: 16px 18px;
    border-radius: var(--r-ctl);
    background: var(--bg);
    border: 1px solid var(--line);
}

.tui-calc__next {
    margin-top: 12px;
}

.tui-calc__rec {
    margin: 0 0 10px;
    font-size: 14.5px;
}

.tui-calc__v {
    margin: 10px 0 4px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tui-card.tui-readybox {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 18px;
}

.tui-readybox__hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.tui-readybox__hd .tui-h2 {
    margin: 4px 0 0;
}

.tui-readybox__hd .tui-note {
    margin: 0;
    max-width: 320px;
    text-align: right;
}

.tui-readybox__track {
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.tui-readybox__track .tui-infograph__line {
    min-width: 10px;
}

.tui-readybox__controls {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 10px 14px;
    align-items: center;
}

.tui-readybox__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tui-readybox .tui-calc__row {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.35;
    min-height: 0;
}

.tui-readybox__tag {
    margin-top: 1px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tui-readybox .tui-calc__row.is-locked .tui-readybox__tag {
    background: #eef0f5;
    color: var(--muted);
}

.tui-readybox__out {
    padding: 12px 14px;
}

.tui-readybox__meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.tui-readybox .tui-calc__v {
    margin: 0;
    font-size: 22px;
}

.tui-readybox .tui-calc__next {
    margin-top: 8px;
}

.tui-readybox .tui-calc__rec {
    margin: 0 0 8px;
    font-size: 13.5px;
}

.tui-readybox .tui-actions {
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.tui-readybox__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tui-readybox__nav .tui-quiz__step {
    margin: 0;
}

button.tui-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.tui-opt.is-on {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.tui-readybox .tui-opt {
    padding: 12px 14px;
    font-size: 14.5px;
}

.tui-readybox__ask .tui-quiz__bar {
    margin: 8px 0 12px;
}

.tui-readybox__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 13.5px;
}

.tui-readybox__warn,
.tui-readybox__next {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--r-ctl);
    font-size: 14.5px;
}

.tui-readybox__warn {
    background: #fff6e8;
    border: 1px solid #ead2a8;
}

.tui-readybox__next {
    background: var(--brand-soft);
    border: 1px solid var(--line);
}

.tui-readybox__blocks {
    display: grid;
    gap: 8px;
}

.tui-readybox__block {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #ead2a8;
    border-radius: var(--r-ctl);
    background: #fffaf1;
}

.tui-readybox__block strong {
    font-size: 14px;
}

.tui-readybox__block span {
    font-size: 13.5px;
    color: var(--muted);
}

.tui-readybox__alt {
    padding: 12px 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
}

.tui-readybox__alt .tui-sub {
    margin: 0 0 6px;
}

.tui-readybox__pays {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tui-readybox__pay {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
}

.tui-readybox__pay b {
    font-size: 13px;
}

.tui-readybox__pay span {
    font-size: 13px;
    color: var(--muted);
}

.tui-readybox__result,
.tui-quiz .tui-readybox__pkg {
    width: 100%;
}

.tui-readybox__result {
    display: grid;
    gap: 16px;
}

.tui-readybox__pkg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: start;
}

.tui-readybox__pkg .tui-h3 {
    margin: 6px 0 8px;
}

.tui-readybox__pricebox {
    text-align: right;
}

.tui-readybox__price {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.tui-readybox__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tui-readybox__lv {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
}

.tui-readybox__lv b {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tui-readybox__lv span {
    font-size: 14px;
}

.tui-readybox__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.tui-readybox__extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tui-readybox__extras .tui-item,
.tui-quiz .tui-readybox__extras .tui-item {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13.5px;
}

.tui-quiz .tui-readybox__levels,
.tui-quiz .tui-readybox__cols,
.tui-quiz .tui-readybox__extras {
    display: grid;
}

.tui-quiz .tui-readybox__levels,
.tui-quiz .tui-readybox__cols,
.tui-quiz .tui-readybox__extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tui-quiz .tui-readybox__cols {
    gap: 14px 20px;
}

.tui-quiz .tui-readybox__pkg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: start;
}

/* ---------- липкая кнопка на мобильных ---------- */

.tui-mcta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
}

.tui-mcta .tui-btn {
    flex: 1;
}

.tui-mcta .tui-btn--ghost {
    flex: 0 0 auto;
}

/* ---------- адаптив ---------- */

@media (max-width: 1439px) {
    /* Портальная навигация длинная — на средних экранах сжимаем, а не ломаем в две строки. */
    .tui-nav a {
        padding: 8px 9px;
        font-size: 14px;
    }

    .tui-search {
        flex-basis: 200px;
        min-width: 148px;
    }
}

@media (max-width: 1279px) {
    .tui-header {
        z-index: 86;
    }

    .tui-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-rail {
        position: static;
    }

    .tui-rail--l {
        order: 2;
    }

    .tui-main {
        order: 1;
    }

    .tui-rail--r {
        order: 3;
    }

    .tui-rail--r .tui-railcard:not(.tui-railbot) > div {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 4px;
    }

    .tui-nav {
        display: none;
    }

    .tui-burger {
        display: grid;
        margin-left: auto;
        position: relative;
        z-index: 87;
    }

    .tui-nav.is-open {
        display: flex;
        position: fixed;
        z-index: 85;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 72px 18px 24px;
        background: #fff;
        overflow: auto;
        box-shadow: -12px 0 40px rgba(15, 18, 33, .12);
    }

    .tui-navveil:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 84;
        background: rgba(15, 18, 33, .4);
    }
}

@media (max-width: 1023px) {
    .tui-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tui-foot__in {
        grid-template-columns: repeat(2, 1fr);
    }

    .tui-stats,
    .tui-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tui-split,
    .tui-split--wide-l {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }

    .tui-readybox__hd {
        flex-direction: column;
        align-items: flex-start;
    }

    .tui-readybox__hd .tui-note {
        text-align: left;
        max-width: none;
    }

    .tui-readybox__controls,
    .tui-readybox__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-readybox__pkg,
    .tui-quiz .tui-readybox__pkg,
    .tui-readybox__levels,
    .tui-readybox__cols,
    .tui-readybox__extras,
    .tui-quiz .tui-readybox__levels,
    .tui-quiz .tui-readybox__cols,
    .tui-quiz .tui-readybox__extras {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-readybox__pricebox {
        text-align: left;
    }

    .tui-readybox__pays {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-readybox__track {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .tui-shell {
        padding: 16px;
        gap: 16px;
    }

    .tui-card,
    .tui-price {
        padding: 18px;
    }

    .tui-card--pad-lg {
        padding: 20px;
    }

    .tui-grid--2,
    .tui-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-field {
        flex-wrap: wrap;
    }

    .tui-field .tui-btn {
        width: 100%;
    }

    .tui-search {
        flex-basis: 100%;
        order: 3;
        margin-left: 0;
    }

    .tui-header__in {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tui-burger {
        display: grid;
        margin-left: auto;
    }

    .tui-topbar__in {
        font-size: 12px;
        gap: 12px;
    }

    .tui-hide-sm {
        display: none;
    }

    .tui-foot {
        padding: 8px 16px 20px;
    }

    .tui-foot__in {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 16px 8px;
    }

    .tui-next {
        padding: 20px;
    }

    .tui-band {
        padding: var(--s-4);
    }

    .tui-sec {
        gap: var(--s-4);
    }

    .tui-mcta {
        display: flex;
    }

    .tui-botfab {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .tui-bot.is-open {
        bottom: calc(76px + env(safe-area-inset-bottom));
        max-height: min(68vh, calc(100vh - 160px));
    }

    .tui-pill,
    .tui-pager a,
    .tui-pager span {
        min-height: 44px;
    }

    body.tui {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tui * {
        animation: none !important;
        transition: none !important;
    }

    .tui-btn:hover,
    .tui-mod:hover,
    .tui-price:hover,
    .tui-item:hover {
        transform: none;
    }
}

/* ---------- каталог: списки шапки и подвала ---------- */

.tui-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
}

.tui-crumbs a:hover {
    color: var(--brand-strong);
}

.tui-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tui-navveil {
    display: none;
}

.tui-nav-lock,
.tui-modal-lock {
    overflow: hidden;
}

.tui-kv {
    display: grid;
    gap: 10px;
    margin: 16px 0 24px;
}

.tui-kv > div {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.tui-kv dt {
    color: var(--muted);
}

.tui-olist {
    margin: 0 0 16px;
    padding-left: 20px;
}

.tui-olist li + li {
    margin-top: 8px;
}

.tui-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tui-filters__search {
    grid-column: 1 / -1;
    position: relative;
}

.tui-filters__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.tui-filters--map,
.tui-filters--find {
    grid-template-columns: minmax(0, 1fr) 200px;
}

.tui-filters--map {
    grid-template-columns: 1fr;
}

.tui-filters--find .tui-filters__search,
.tui-filters--map .tui-filters__search {
    grid-column: auto;
}

.tui-searchrow {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.tui-searchrow .tui-in {
    flex: 1 1 220px;
    min-width: 0;
}

.tui-searchrow .tui-btn {
    flex: 0 0 auto;
}

.tui-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tui-foot__logo {
    margin-bottom: 12px;
}

.tui-foot__brand .tui-muted {
    margin: 0;
}

.tui-item__meta--block,
.tui-item__sub {
    display: block;
    margin-top: 6px;
}

.tui-iconchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tui-iconchip img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 8px;
}

.tui-count {
    font-size: 14px;
    color: var(--muted);
}

.tui-count b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.tui-hit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t);
}

.tui-hit + .tui-hit {
    margin-top: 10px;
}

.tui-hit:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.tui-hit__t {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
}

.tui-hit__t:hover {
    color: var(--brand-strong);
}

.tui-hit__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    color: var(--muted);
}

.tui-pag,
.tui .styled-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.tui-pag__btn,
.tui-pag a,
.tui .styled-pagination a,
.tui .styled-pagination span,
.tui .styled-pagination .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    font-size: 14px;
    color: var(--text);
}

.tui-pag a:hover,
.tui .styled-pagination a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-pag__now,
.tui .styled-pagination .active a,
.tui .styled-pagination .active span,
.tui .styled-pagination .current {
    border-color: transparent;
    background: var(--bg);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.tui-item--media .tui-item__img,
.tui-item__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--bg);
}

.tui-item--media:not(:has(img)) .tui-item__img {
    display: none;
}

.tui-item__letter {
    width: auto;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.tui-item--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.tui-item--row > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tui-table--list td:first-child,
.tui-table__code {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tui-table tbody tr:hover td {
    background: var(--brand-soft);
}

.tui-table--list a:hover {
    color: var(--brand-strong);
}

.tui-prose {
    max-width: 78ch;
    font-size: 15.5px;
    line-height: 1.65;
}

.tui-prose h2,
.tui-prose h3 {
    margin: 1.4em 0 .5em;
    line-height: 1.3;
}

.tui-prose p,
.tui-prose ul,
.tui-prose ol {
    margin: 0 0 1em;
    color: var(--text);
}

.tui-prose ul,
.tui-prose ol {
    list-style: none;
    padding: 0;
}

.tui-prose ul > li,
.tui-prose ol > li {
    position: relative;
    padding-left: 28px;
    margin: 0 0 8px;
}

.tui-prose ul > li::before,
.tui-prose ol > li::before {
    position: absolute;
    left: 0;
    top: 3px;
}

.tui-prose > :first-child {
    margin-top: 0;
}

.tui-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    overflow: hidden;
}

.tui-prose th,
.tui-prose td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.tui-prose th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.tui-prose tr:last-child td {
    border-bottom: 0;
}

.tui-prose .tui-tablewrap {
    margin: 0 0 1.2em;
}

.tui-prose .tui-tablewrap table {
    margin: 0;
    border: 0;
}

.tui-prose dl {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.2em;
}

.tui-prose dt {
    margin: 10px 0 0;
    padding: 15px 18px 4px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-ctl) var(--r-ctl) 0 0;
    background: var(--surface);
    font-weight: 600;
    font-size: 15px;
}

.tui-prose dt:first-child {
    margin-top: 0;
}

.tui-prose dd {
    margin: 0;
    padding: 6px 18px 8px;
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom: 0;
    background: var(--surface);
    color: var(--muted);
    font-size: 14.5px;
}

.tui-prose dd:last-child,
.tui-prose dd:has(+ dt) {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--r-ctl) var(--r-ctl);
}

.tui-prose a {
    color: var(--brand-strong);
    text-decoration: underline;
}

a.tui-mod {
    color: inherit;
    text-decoration: none;
}

.tui-mod__name {
    font-weight: 650;
    line-height: 1.35;
}

.tui-prose img {
    border-radius: 0;
    margin: 12px 0 20px;
}

.tui-case {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tui-case > .tui-pagehead {
    margin-bottom: 0;
}

.tui-casehero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    border-radius: 20px;
    overflow: hidden;
    background: #eef0f5;
}

.tui-casehero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tui-casehero--textile,
.tui-casehero--radio,
.tui-casehero--med,
.tui-casehero--rail,
.tui-casehero--heavy,
.tui-casehero--machine,
.tui-casehero--gas,
.tui-casehero--chem,
.tui-casehero--wood,
.tui-casehero--factory,
.tui-casehero--prom,
.tui-casehero--telecom,
.tui-casehero--tpp,
.tui-casehero--kd,
.tui-casehero--codes,
.tui-casehero--loc,
.tui-casehero--support {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    color: #fff;
}

.tui-casehero--textile { background: linear-gradient(145deg, #3b2a78, #6d4aff); }
.tui-casehero--radio { background: linear-gradient(145deg, #1c2744, #4c6fff); }
.tui-casehero--med { background: linear-gradient(145deg, #1c5c4a, #2ec9c0); }
.tui-casehero--rail { background: linear-gradient(145deg, #3a2a1c, #c47a3a); }
.tui-casehero--heavy { background: linear-gradient(145deg, #2a3144, #6b7285); }
.tui-casehero--machine { background: linear-gradient(145deg, #1e3a5f, #5b8def); }
.tui-casehero--gas { background: linear-gradient(145deg, #1c3d3a, #2a9d8f); }
.tui-casehero--chem { background: linear-gradient(145deg, #3d2458, #9b6dff); }
.tui-casehero--wood { background: linear-gradient(145deg, #3d2c1c, #b07d4a); }
.tui-casehero--factory { background: linear-gradient(145deg, #1c2744, #6d4aff); }
.tui-casehero--prom { background: linear-gradient(145deg, #1e3a5f, #5b8def); }
.tui-casehero--telecom { background: linear-gradient(145deg, #1c3d3a, #2a9d8f); }
.tui-casehero--tpp { background: linear-gradient(145deg, #3a2a1c, #c47a3a); }
.tui-casehero--kd { background: linear-gradient(145deg, #2a3144, #6b7285); }
.tui-casehero--codes { background: linear-gradient(145deg, #3d2458, #9b6dff); }
.tui-casehero--loc { background: linear-gradient(145deg, #1c5c4a, #2ec9c0); }
.tui-casehero--support { background: linear-gradient(145deg, #3b2a78, #6d4aff); }

.tui-casehero span {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
}

.tui-casefacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tui-casefacts__item {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.tui-casestream {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tui-svcgroup {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.tui-svcgroup--extra {
    background:
        linear-gradient(180deg, rgba(248, 249, 252, .7), rgba(248, 249, 252, .7)),
        var(--surface);
}

.tui-svcgroup .tui-muted {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tui-casestage {
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-2);
}

.tui-casestage--lede {
    background: var(--surface);
    padding: 4px 2px 8px;
    border: 0;
}

.tui-casestage--result {
    background: var(--ok-bg);
    border-color: transparent;
}

.tui-casestage--quote {
    background: var(--brand-soft);
    border-color: transparent;
}

.tui-casestage--risk {
    background: var(--surface);
}

.tui-casestage__h {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.tui-casestage__sub {
    margin: 14px 0 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.tui-casestream p,
.tui-casestream li {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
}

.tui-casestream p {
    margin: 0 0 10px;
}

.tui-casestream p:last-child {
    margin-bottom: 0;
}

.tui-casechecks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tui-casechecks li {
    position: relative;
    margin: 0;
    padding: 12px 14px 12px 48px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.tui-casechecks li::before,
.tui-casesteps__item::before,
.tui-casestream ol > li::before {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 22px;
    height: 22px;
    flex: none;
    font-size: 11px;
}

.tui-casesteps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tui-casesteps__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 14px 12px 48px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.tui-casesteps__n {
    display: none;
}

.tui-casedots {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.tui-casedots li {
    position: relative;
    margin: 0;
    padding: 10px 12px 10px 42px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.tui-casedots li::before,
.tui-casestream ul > li::before {
    position: absolute;
    left: 12px;
    top: 11px;
}

.tui-casequote {
    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid var(--brand);
    border-radius: 0 14px 14px 0;
    background: #fff;
    font-size: 15.5px;
    line-height: 1.55;
}

.tui-caseresult {
    font-weight: 650;
}

.tui-casestream img,
.tui-casestream figure {
    display: none;
}

.tui-caseart .tui-casephoto,
.tui-caseart img {
    display: none;
}

.tui-caseart figure {
    display: none;
}

.tui-caseart table,
.tui-caseart .tui-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14.5px;
}

.tui-caseart td,
.tui-caseart th {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.tui-casecards {
    display: grid;
    gap: 12px;
    margin: 16px 0 24px;
}

.tui-casecard {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.tui-caseart .tui-btn {
    display: inline-flex;
    margin: 8px 8px 16px 0;
}

.tui-case-price {
    margin: 6px 0;
    padding: 8px 0 4px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tui-casetablewrap {
    margin: 16px 0 28px;
}

.tui-caseart .tui-casetable,
.tui-casetable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.tui-casetable th,
.tui-casetable td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.tui-casetable thead th {
    background: var(--bg);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tui-casetable td:last-child,
.tui-casetable th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 650;
}

.tui-casetable tbody tr:last-child td {
    border-bottom: 0;
}

.tui-casetable tr.is-total td {
    background: var(--brand-soft);
    font-weight: 700;
}

.tui-prose blockquote {
    margin: 16px 0;
    padding: 16px 18px;
    border-left: 3px solid var(--brand);
    border-radius: 12px;
    background: var(--brand-soft);
}

.tui-map {
    overflow: hidden;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    min-height: 280px;
}

.tui-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

.tui-notify {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 80;
    max-width: 400px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    box-shadow: var(--shadow-hover);
}

.tui-notify.success { background: var(--ok-fg); }
.tui-notify.error { background: var(--danger-fg); }

.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    position: relative;
    min-height: 46px;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    color: var(--text);
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg);
    margin-top: -2px;
}

.custom-options {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    box-shadow: var(--shadow-hover);
}

.custom-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
}

.custom-option:hover {
    background: var(--brand-soft);
}

.custom-option.selected {
    background: var(--brand);
    color: #fff;
}

.custom-select-wrapper .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 600;
}

.custom-select-wrapper .tag .remove {
    cursor: pointer;
    font-weight: 700;
}

#search-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    box-shadow: var(--shadow-hover);
}

#search-suggestions div {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid var(--line);
}

#search-suggestions div:first-child {
    border-top: 0;
}

#search-suggestions div:hover,
#search-suggestions .hover-light:hover {
    background: var(--brand-soft);
}

.tui .okpd2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tui .okpd2-table th,
.tui .okpd2-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.tui .okpd2-table thead th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.tui .okpd2-table a:hover {
    color: var(--brand-strong);
}

@media (max-width: 980px) {
    .tui-filters {
        grid-template-columns: 1fr;
    }
}

.tui-pill.is-on {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 600;
}

.tui-sug__hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.tui-calc__row.is-locked {
    opacity: .55;
}

.tui-meter {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.tui-meter i {
    width: 14px;
    height: 8px;
    border-radius: 3px;
    border: 1px solid rgba(15, 18, 33, .18);
    background: transparent;
}

.tui-meter i.is-on {
    background: #2a3a6e;
    border-color: #2a3a6e;
}

.tui-pkggrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.tui-pkg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    min-height: 100%;
    min-width: 0;
}

.tui-pkg .tui-price__val {
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -.03em;
}

.tui-pkg .tui-btn {
    margin-top: auto;
}

.tui-pkg--mid {
    background: #e8edf3;
}

.tui-pkg--fast {
    background: #d7e6f5;
}

.tui-pkg--max {
    background: #ff7a18;
    color: #fff;
    border-color: transparent;
}

.tui-pkg--max .tui-h3,
.tui-pkg--max .tui-price__val,
.tui-pkg--max .tui-note,
.tui-pkg--max .tui-muted {
    color: #fff;
}

.tui-pkg--max .tui-meter i {
    border-color: rgba(255, 255, 255, .45);
}

.tui-pkg--max .tui-meter i.is-on {
    background: #1c2744;
    border-color: #1c2744;
}

.tui-pkgrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
}

.tui-pkgtablewrap {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

.tui-pkgtable {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 10px;
    min-width: 1100px;
}

.tui-pkgcol {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px 14px;
    background: var(--surface);
}

.tui-pkgcol__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.tui-pkgcol .tui-pkgrow {
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}

.tui-pkgcol .tui-btn {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}

.tui-infograph {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.tui-infograph--col {
    flex-direction: column;
    align-items: flex-start;
}

.tui-infograph--col .tui-infograph__line {
    width: 2px;
    height: 10px;
    margin-left: 9px;
}

.tui-infograph__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.tui-infograph__step i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--surface);
    box-shadow: inset 0 0 0 3px var(--surface);
    display: grid;
    place-items: center;
    transition: background .25s, border-color .25s, transform .25s, color .25s;
}

.tui-infograph__step.is-on i,
.tui-infograph__step.is-last i {
    background: var(--cta);
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--brand-soft);
    color: #fff;
}

.tui-infograph__step.is-on i::before,
.tui-infograph__step.is-last i::before {
    content: "Т";
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.tui-infograph__step.is-on span {
    color: var(--text);
    font-weight: 600;
}

.tui-infograph__line {
    flex: 1;
    height: 2px;
    min-width: 18px;
    background: linear-gradient(90deg, var(--line-strong), var(--brand-soft));
}

.tui-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.tui-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s ease;
}

@keyframes tui-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.tui-stat__v.tui-num {
    font-variant-numeric: tabular-nums;
}

.tui-modal-lock {
    overflow: hidden;
}

.tui-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 18, 33, .46);
    pointer-events: none;
}

.tui-modal.is-open {
    display: flex;
    pointer-events: auto;
}

.tui-bot {
    position: fixed;
    right: 18px;
    bottom: 128px;
    z-index: 61;
    width: min(360px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 18, 33, .16);
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: min(520px, 70vh);
}

.tui-bot.is-open {
    display: flex;
}

.tui-modal__card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(92vh, 760px);
    overflow: auto;
    background: var(--surface);
    border-radius: 20px 20px 12px 12px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(15, 18, 33, .22);
    animation: tui-rise .35s ease both;
}

.tui-modal__x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--bg);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
}

.tui-botfab {
    position: fixed;
    right: 18px;
    bottom: 148px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--cta);
    color: #fff;
    box-shadow: 0 8px 20px rgba(109, 74, 255, .28);
    font-size: 13px;
    font-weight: 600;
}

.tui-botfab svg {
    flex-shrink: 0;
}

.tui-bot__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 0;
    background: transparent;
    color: var(--text);
}

.tui-bot__head .tui-railcard__t {
    margin-bottom: 2px;
}

.tui-bot__head strong {
    display: block;
    font-size: 16px;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.tui-bot__head button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.tui-bot__log {
    padding: 12px;
    overflow: auto;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tui-bot__msg {
    max-width: 92%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.tui-bot__msg--bot {
    background: var(--brand-soft);
    color: var(--text);
    border-radius: 14px 14px 14px 6px;
}

.tui-bot__msg--me {
    align-self: flex-end;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 14px 14px 6px 14px;
}

.tui-bot__links {
    margin: 8px 0 0;
    padding-left: 16px;
}

.tui-bot__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
}

.tui-bot__chips button {
    padding: 6px 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 650;
}

.tui-bot__chips button:hover {
    background: #e4dcff;
}

.tui-bot__form {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
}

.tui-bot__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 8px 10px;
    background: var(--bg);
    font: inherit;
    color: var(--text);
}

.tui-bot__form .tui-btn--sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .tui-pkggrid,
    .tui-pkggrid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tui-pkggrid,
    .tui-pkggrid--home {
        grid-template-columns: 1fr;
    }

    .tui-botfab span {
        display: none;
    }

    .tui-modal {
        padding: 0;
    }

    .tui-modal__card {
        width: 100%;
        border-radius: 16px 16px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tui-reveal,
    .tui-reveal.is-in,
    .tui-modal__card,
    .tui-infograph__step i,
    .tui-stat--lp .tui-stat__v,
    .tui-stat__bar::after {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

    .tui-reveal.is-in.tui-stat--lp .tui-stat__bar::after,
    .tui-stat__bar::after {
        width: 78%;
    }
}

/* ---------- мобильный каркас ---------- */

.tui-nav-slot {
    display: flex;
    min-width: 0;
}

@media (max-width: 1279px) {
    .tui-header {
        position: sticky;
        top: 0;
        z-index: 220;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.tui-nav-lock,
    body.tui-modal-lock {
        overflow: hidden;
    }

    .tui-navveil:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(15, 18, 33, .4);
    }

    .tui-nav.is-open {
        position: fixed;
        z-index: 250;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(320px, 88vw);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: max(72px, calc(12px + env(safe-area-inset-top))) 16px calc(24px + env(safe-area-inset-bottom));
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -12px 0 40px rgba(15, 18, 33, .14);
    }

    .tui-nav.is-open a {
        display: block;
        padding: 14px 12px;
        font-size: 17px;
        min-height: 44px;
    }

    .tui-nav.is-open a.tui-nav__cab {
        display: inline-flex;
    }

    .tui-burger {
        display: grid;
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-shrink: 0;
        position: relative;
        z-index: 260;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .tui-nav-slot:not(:has(.tui-nav)) {
        display: none;
    }

    .tui-search input,
    .tui-in,
    .tui-bot__form input,
    select.tui-in,
    textarea.tui-in {
        font-size: 16px;
    }

    .tui-modal {
        z-index: 300;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tui-bot {
        z-index: 230;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .tui-botfab {
        z-index: 225;
    }

    .tui-mcta {
        z-index: 40;
    }
}

@media (max-width: 767px) {
    html,
    body.tui {
        overflow-x: hidden;
        max-width: 100%;
    }

    .tui-rail {
        display: none;
    }

    .tui-search {
        flex: 1 1 100%;
        min-width: 0;
        order: 3;
        margin-left: 0;
    }

    .tui-kbd {
        display: none;
    }

    .tui-pkgtable {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-pkgtablewrap {
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
    }

    .tui-table {
        min-width: 0;
    }

    .tui-header__in {
        padding: 10px 14px;
        gap: 10px;
    }

    .tui-infograph {
        flex-wrap: wrap;
    }
}

.tui-cover {
    position: relative;
    overflow: hidden;
    background: #16182c;
}

.tui .tui-cover img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: saturate(.78) contrast(1.04);
}

.tui-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(15, 18, 33, .04), rgba(109, 74, 255, .2));
}

.tui-card:has(> .tui-pagehead--cover),
.tui-card:has(> .tui-cover--head),
.tui-card--media,
.tui-hero {
    overflow: hidden;
}

.tui-card > .tui-pagehead--cover,
.tui-card > .tui-cover--head {
    margin: -20px -20px 0;
}

.tui-card--pad-lg > .tui-pagehead--cover,
.tui-card--pad-lg > .tui-cover--head {
    margin: -24px -24px 0;
}

.tui-cover--head {
    height: 76px;
    border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}

.tui-cover--head::after {
    background:
        linear-gradient(90deg, rgba(246, 247, 251, .18), transparent 42%),
        linear-gradient(180deg, rgba(15, 18, 33, .08), rgba(109, 74, 255, .28));
}

.tui-pagehead--cover {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tui-card > .tui-pagehead--cover .tui-stack {
    padding: 16px 20px 0;
}

.tui-card--pad-lg > .tui-pagehead--cover .tui-stack {
    padding: 16px 24px 0;
}

.tui-card--media {
    position: relative;
    isolation: isolate;
}

.tui-cover--fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.tui-cover--fill::after {
    background:
        linear-gradient(105deg, rgba(16, 18, 40, .94) 0%, rgba(28, 24, 72, .78) 52%, rgba(16, 18, 40, .5) 100%);
}

.tui-card--media > *:not(.tui-cover) {
    position: relative;
    z-index: 1;
}

.tui-hero {
    position: relative;
    isolation: isolate;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tui-hero.tui-sec {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tui-cover--hero {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    z-index: 0;
}

.tui-cover--hero::after {
    background:
        linear-gradient(90deg, var(--surface) 0%, rgba(255, 255, 255, .55) 22%, transparent 58%),
        linear-gradient(180deg, rgba(109, 74, 255, .14), rgba(15, 18, 33, .2));
}

.tui-hero__in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.tui-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    max-width: 62%;
}

.tui-hero .tui-stats {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
}

.tui-pagehead {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tui-plans {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tui-plan {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(148px, auto);
    gap: 10px 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.tui-plan.is-pick {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .2);
}

.tui .tui-plan__ico {
    width: 40px;
    height: 40px;
    max-width: none;
    object-fit: cover;
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0;
}

.tui-plan__body {
    min-width: 0;
}

.tui-plan__body .tui-h3 {
    margin: 0;
}

.tui-plan__body .tui-muted {
    margin: 4px 0 0;
}

.tui-plan__tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.tui-plan__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tui-plan__price {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.tui-plan__term {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.tui-plan .tui-btn {
    white-space: nowrap;
}

.tui-plancards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tui-plancard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px 28px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.tui-plancard.is-pick {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .18);
}

.tui-plancard__main .tui-h3 {
    margin: 0 0 8px;
}

.tui-plancard__main > p {
    margin: 0 0 10px;
}

.tui-plancard__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-top: 12px;
}

.tui-plancard__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.tui-plancard__side .tui-plan__price {
    font-size: 22px;
}

.tui-plancard__side .tui-btn {
    width: 100%;
    justify-content: center;
}

.tui-list--mute li::before {
    content: "";
    background: #eef0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7285' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E") center/12px no-repeat;
}

.tui-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tui-facts > div {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
}

.tui-facts__wide {
    grid-column: 1 / -1;
}

.tui-facts span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tui-facts b {
    display: block;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
}

.tui-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tui-tags li {
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.tui-casestream table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 4px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    font-size: 14.5px;
}

.tui-casestream th,
.tui-casestream td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.tui-casestream tr:last-child td,
.tui-casestream tr:last-child th {
    border-bottom: 0;
}

.tui-casestream th {
    background: var(--bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tui-casestream h2,
.tui-casestream h3 {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.tui-lp-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
}

.tui-lp-split .tui-h3 {
    margin-top: 0;
}

.tui-step .tui-h3 {
    margin: 0 0 4px;
}

.tui-cmpwrap {
    overflow-x: auto;
    margin: 0 -4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.tui-cmp {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tui-cmp th,
.tui-cmp td {
    padding: 10px 11px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
    line-height: 1.35;
    white-space: normal;
}

.tui-cmp thead th {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 150px;
    vertical-align: bottom;
}

.tui-cmp__sub {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 11px;
    color: var(--muted);
}

.tui-cmp th:first-child,
.tui-cmp td:first-child,
.tui-cmp tbody th {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--surface);
    font-weight: 600;
    white-space: normal;
    min-width: 148px;
    max-width: 176px;
    z-index: 1;
}

.tui-cmp .is-pick {
    background: var(--brand-soft);
}

.tui-cmp tbody th.is-pick,
.tui-cmp thead th.is-pick {
    background: var(--brand-soft);
}

.tui-cmp__yes {
    color: #15803d;
    font-weight: 700;
}

.tui-cmp__mid {
    color: var(--brand-strong);
    font-weight: 600;
}

.tui-cmp__low {
    color: var(--muted);
}

.tui-cmp__no {
    color: #9aa0ae;
}

@media (max-width: 980px) {
    .tui-cover--hero {
        position: relative;
        inset: auto;
        width: 100%;
        height: 92px;
    }

    .tui-cover--hero::after {
        background:
            linear-gradient(180deg, transparent 30%, var(--surface) 100%),
            linear-gradient(90deg, rgba(109, 74, 255, .12), rgba(15, 18, 33, .12));
    }

    .tui-hero__copy {
        max-width: none;
    }

    .tui-hero__in {
        padding: 16px 18px 18px;
    }

    .tui-plan {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .tui-plan__cta {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .tui-plancard {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-plancard__cols,
    .tui-lp-split,
    .tui-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .tui-card > .tui-pagehead--cover,
    .tui-card > .tui-cover--head {
        margin: -18px -18px 0;
    }

    .tui-card--pad-lg > .tui-pagehead--cover,
    .tui-card--pad-lg > .tui-cover--head {
        margin: -20px -20px 0;
    }

    .tui-card > .tui-pagehead--cover .tui-stack {
        padding: 14px 18px 0;
    }

    .tui-card--pad-lg > .tui-pagehead--cover .tui-stack {
        padding: 14px 20px 0;
    }

    .tui-cover--head {
        height: 64px;
    }
}

.tui-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.tui-pager a,
.tui-pager span {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.tui-pager a:hover {
    border-color: var(--brand);
}

.tui-pager .is-on {
    background: var(--brand-soft);
    border-color: var(--brand);
    font-weight: 600;
}

.tui-fold {
    margin-top: 20px;
}

.tui-fold .tui-prose {
    margin-top: 8px;
}