/* About-product page — 3-tier typography + uniform tables. */
/*
  Hierarchy (only 3 type styles allowed, plus inline <b>/<i>):
    .page__title         — H1, page title (Manrope 36px, w500, dark)
    H2 / .tables-block__title / .files-block__title
                         — section heading (Manrope 24px, w400, grey)
    H3                   — subheading (IBM Plex 18px, w500, dark-grey)
    body p / li / td     — text (IBM Plex 16-18px, w300, dark-grey)
*/

/* ================================================================ */
/* Global utilities (loaded on every page)                          */
/* ================================================================ */

/* Anchor scroll offset for the fixed header — applied to all id-targets.
   The smooth-scroll itself is handled in JS (chat-launcher.js) so it
   doesn't fight the GSAP-driven `.js-anchors` handler. */
:target { scroll-margin-top: 100px; }

/* =================================================================
   Chat-bot CTA buttons (.ct-chat-cta) — composes on top of base .btn
   .btn--white .btn--sm (same as «Всі відгуки» button on home).
   We only add: bot icon sizing + gap, layout helpers for sticky/full-width.
   ================================================================= */

/* Bot icon left of the label. Generic plugin CSS forces
   svg{display:inline-block!important; width:inherit}, so beat with
   !important + high specificity. */
.ct-chat-cta .ct-chat-cta__icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    fill: currentColor;
    display: inline-block !important;
    flex: 0 0 auto;
    vertical-align: middle;
    box-sizing: content-box;
    margin-right: 8px;
}
.ct-chat-cta__text { display: inline-block; vertical-align: middle; }

/* Detached CTA — sits BELOW the .documents__aside / .faq-page__aside
   white card, not inside it. The whole column (sidebar + CTA) is
   treated as one sticky unit so the CTA always glues right under the
   sidebar regardless of scroll position. */
.ct-chat-cta--detached {
    display: flex;
    width: calc(100% - 24px);
    margin: 16px 12px 0;
    justify-content: center;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    /* The COLUMN becomes the sticky container — aside loses its own
       sticky, so aside + CTA scroll together as one block. */
    body .page--with-sidebar .documents__col-sm,
    body .page--with-sidebar .faq-page__col-sm,
    .page--with-sidebar .documents__col-sm,
    .page--with-sidebar .faq-page__col-sm {
        position: sticky;
        top: 90px;
        align-self: flex-start;
        height: auto;
    }
    body .page--with-sidebar .documents__aside,
    body .page--with-sidebar .faq-page__aside,
    .page--with-sidebar .documents__aside,
    .page--with-sidebar .faq-page__aside {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        margin-top: 0;
    }
    /* CTA stays in normal flow inside the sticky column */
    .ct-chat-cta--detached {
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 894px) {
    /* On stacked layout the nav strip sits above the CTA, which sits
       above the calc heading. Glue the CTA tight to the nav and push it
       further away from the heading below. */
    .ct-chat-cta--detached {
        margin-top: 0;
        margin-bottom: 40px;
    }
}

/* =================================================================
   Floating chat launcher — FAB + slide-in modal (cashtime AI helper)
   ================================================================= */
/* FAB — subtle grey/white, NOT competing for attention with the green
   CTA buttons. Sits at same bottom level as the sticky "Подати заявку"
   strip and as Binotel (matching edge-offset). */
body .ct-chat-fab,
.ct-chat-fab {
    position: fixed !important;
    right: 12px;
    bottom: 20px;
    inset: auto 12px 20px auto;
    z-index: 7000;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #ABAFA4;
    box-shadow: 0 4px 14px rgb(0 0 0 / .12);
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none;
}
.ct-chat-fab:hover {
    transform: translateY(-1px);
    background: #F1EFD9;
    box-shadow: 0 6px 18px rgb(0 0 0 / .18);
    animation: none;   /* pause idle bounce on hover */
}

/* Idle attention-bounce — small jump once every 7s to gently signal
   the chat is available without being annoying. Respects
   prefers-reduced-motion. */
@keyframes ct-chat-fab-bounce {
    0%, 88%, 100% { transform: translateY(0); }
    91%           { transform: translateY(-8px); }
    94%           { transform: translateY(0); }
    96%           { transform: translateY(-3px); }
    98%           { transform: translateY(0); }
}
.ct-chat-fab {
    animation: ct-chat-fab-bounce 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ct-chat-fab { animation: none; }
}
.ct-chat-fab__icon {
    width: 26px !important;
    height: 26px !important;
    fill: #6A6A6A;
    display: block !important;
}

/* Unread indicator — red dot/badge in top-right of FAB. Shown when
   the operator replies while chat is closed. Cleared on FAB click. */
.ct-chat-fab.has-unread::after {
    content: attr(data-unread);
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E53935;
    color: #fff;
    font: 600 11px/18px IBM Plex Sans, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
    animation: ct-chat-unread-pulse 1.6s ease-in-out infinite;
}
/* No badge text → still show a plain dot. */
.ct-chat-fab.has-unread:not([data-unread])::after {
    min-width: 12px;
    height: 12px;
    border-radius: 50%;
    padding: 0;
    content: '';
}
@keyframes ct-chat-unread-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .ct-chat-fab.has-unread::after { animation: none; }
}
@media (max-width: 767px) {
    .ct-chat-fab { width: 48px !important; height: 48px !important; right: 12px; bottom: 20px; }
    .ct-chat-fab__icon { width: 24px !important; height: 24px !important; }
}

/* Align sticky "Подати заявку" with Binotel + chat FAB.
   Theme default was full-width strip at bottom:10px — now it's a
   centered pill at bottom:20px, leaving room for FABs on both sides. */
.sticky-button.js-sticky-btn {
    left: 70px !important;
    right: 70px !important;
    bottom: 20px !important;
}
@media (max-width: 575px) {
    .sticky-button.js-sticky-btn {
        left: 70px !important;
        right: 70px !important;
    }
}

.ct-chat-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;       /* above Binotel + everything else */
    pointer-events: none;
}
.ct-chat-modal[hidden] { display: none !important; }
.ct-chat-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0);
    transition: background 0.25s ease;
    pointer-events: auto;
    cursor: pointer;
}
.ct-chat-modal.is-open ~ .ct-chat-fab,
body:has(.ct-chat-modal.is-open) .ct-chat-fab {
    opacity: 0 !important;
    pointer-events: none;
    transform: scale(0.85);
    animation: none;
}

/* Panel is JUST a frame for the iframe — no extra chrome.
   The widget renders its own header (avatar, language toggle, close X). */
.ct-chat-modal__panel {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 420px;
    max-width: calc(100vw - 40px);
    height: min(640px, calc(100vh - 40px));
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgb(0 0 0 / .25);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
    pointer-events: auto;
    overflow: hidden;
}
.ct-chat-modal.is-open .ct-chat-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ct-chat-modal__body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
}
.ct-chat-modal__embed,
.ct-chat-modal__body iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}
.ct-chat-modal__fallback {
    padding: 32px 24px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: #414141;
    text-align: center;
}
.ct-chat-modal__fallback p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.ct-chat-modal__fallback .btn { margin-top: 8px; }

@media (max-width: 575px) {
    .ct-chat-modal__panel {
        right: 0;
        left: 0;
        bottom: 0;
        top: 6vh;
        width: 100%;
        max-width: 100%;
        height: 94vh;
        border-radius: 20px 20px 0 0;
    }
}

/* Prevent body scroll when modal is open on mobile */
body.ct-chat-no-scroll-mobile {
    overflow: hidden;
}
@media (min-width: 576px) {
    body.ct-chat-no-scroll-mobile { overflow: auto; }
}

/* =================================================================
   Bot icon link in header / footer messengers list — sized like
   sibling Telegram/Viber SVGs, kept circular via #bot-button symbol.
   ================================================================= */
.header__bot-link svg,
.menu__bot-link svg,
.footer__bot-link svg {
    width: 100%;
    height: 100%;
    display: block;
}
.header__bot-link,
.menu__bot-link,
.footer__bot-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.header__bot-link:hover,
.menu__bot-link:hover,
.footer__bot-link:hover {
    transform: scale(1.08);
}

/* page--with-sidebar mobile fix — keep sidebar visible on mobile
   (theme base hides .documents__col-sm / .faq-page__col-sm with
   display:none) AND render menu as horizontal scrollable tabs.
   Selectors duplicated with body prefix to guarantee specificity
   wins regardless of LiteSpeed combined bundle order. */
@media (max-width: 767px) {
    /* Force sidebar column visible on mobile for both naming schemes */
    body .page--with-sidebar .documents__col-sm,
    body .page--with-sidebar .faq-page__col-sm,
    .page--with-sidebar .documents__col-sm,
    .page--with-sidebar .faq-page__col-sm {
        display: block !important;
        width: 100% !important;
    }

    /* Documents aside — already had partial rules, keep them consistent */
    .page--with-sidebar .documents__aside,
    .page--with-sidebar .faq-page__aside {
        position: sticky;
        top: 64px;
        margin: 0 -12px 24px;
        padding: 12px 12px;
        max-height: none;
        border-radius: 0;
        background: #FFF;
        z-index: 5;
        box-shadow: 0 2px 12px rgb(0 0 0 / .08);
        overflow: visible;
    }

    /* Horizontal scrollable menu (works for both naming schemes) */
    .page--with-sidebar .documents__menu,
    .page--with-sidebar .faq-page__menu {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }
    .page--with-sidebar .documents__menu::-webkit-scrollbar,
    .page--with-sidebar .faq-page__menu::-webkit-scrollbar {
        display: none;
    }
    .page--with-sidebar .documents__menu li,
    .page--with-sidebar .faq-page__menu li {
        display: inline-flex;
        margin: 0 !important;
        flex-shrink: 0;
    }
    .page--with-sidebar .documents__menu li a,
    .page--with-sidebar .faq-page__menu li a {
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1.3;
    }
    .page--with-sidebar .documents__menu li a.active,
    .page--with-sidebar .faq-page__menu li a.active {
        color: #ACA860;
        font-weight: 500;
    }
}

/* 404 page — brand-aligned not-found screen */
.error-404 {
    padding: 80px 0 100px;
}
.error-404__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: #F1EFD9;
    border-radius: 24px;
    padding: 48px 32px 40px;
    box-sizing: border-box;
}
.error-404__code {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: clamp(96px, 18vw, 160px);
    line-height: 1;
    color: #ACA860;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.error-404__title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    color: #121212;
    margin: 0 0 16px;
}
.error-404__text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #6A6A6A;
    margin: 0 auto 28px;
    max-width: 480px;
}
.error-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.error-404__btn {
    /* inherits .btn from style.css */
}
.error-404__link {
    color: #ACA860;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.error-404__link:hover {
    color: #8d8945;
}

@media (max-width: 575px) {
    .error-404 { padding: 40px 0 60px; }
    .error-404__inner { padding: 36px 20px 30px; }
    .error-404__actions { flex-direction: column; gap: 16px; }
    .error-404__btn { width: 100%; }
}

/* Calculator loader — sized to match CtCreditWidget's ._wrapper_cop1c_1
   (max-width 528px, 24px padding, white bg, 32px radius, gold-tint shadow)
   so the layout doesn't shift when the widget mounts in its place.
   Hidden the moment the widget renders content into [data-ct-widget-root]
   — see :has rule below. */
.ct-calc-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 528px;
    min-height: 580px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 32px;
    box-shadow: 0 0 24px #bbb9764d;
    color: #7D7D7D;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
}
/* #ct-calculator sits inside .calculator-block__calculator (flex container)
   on the home page; force it to span full width so the loader fills. */
#ct-calculator { width: 100%; }
.ct-calc-loader__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(172, 168, 96, 0.25);
    border-top-color: #ACA860;
    border-radius: 50%;
    animation: ct-calc-spin 0.9s linear infinite;
}
@keyframes ct-calc-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ct-calc-loader__spinner { animation-duration: 2.5s; }
}
/* Hide loader the instant React renders content into the widget root.
   Ky returns null until appSettings/info/loanProducts are all fetched,
   so [data-ct-widget-root] stays childless during the API load. As soon
   as it has a descendant, the widget is actually painted — flip the
   loader off. */
#ct-calculator:has([data-ct-widget-root="true"] *) .ct-calc-loader {
    display: none !important;
}

/* External-URL document items (file_type=url in Firestore) — use Tabler
   world-www on the left + arrow-narrow-right-dashed on the right,
   instead of file icon + download arrow. */
.document__item[data-link-type="url"] svg {
    fill: none !important;
    stroke: #121212;
}
.document__item[data-link-type="url"]::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h.5m3 0h1.5m3 0h6'/><path d='M15 16l4 -4'/><path d='M15 8l4 4'/></svg>") !important;
}


/* Screen-reader-only text — only visible to assistive tech */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Skip-to-content link — visible on keyboard focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #121212;
    color: #FFFFFF;
    padding: 12px 20px;
    z-index: 100000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #ACA860;
    outline-offset: 2px;
}

/* Focus-visible default — replace UA outline with branded one */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.js-anchors:focus-visible {
    outline: 2px solid #ACA860;
    outline-offset: 2px;
}
/* Remove focus outline from non-tab clicks (mouse) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Main wrapper — neutral, doesn't conflict with theme layout */
main#main {
    display: block;
    outline: none;
}


/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */
.page--with-sidebar .documents__col-lg .page__text-block {
    max-width: 100%;
}
.page--with-sidebar .calculator-build {
    max-width: 100%;
    margin: 0 0 56px;
}
/* Section heading above the calc — matches Tier-2 page__text-block h2 */
.page--with-sidebar .calculator-build__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #6A6A6A;
    margin: 0 0 24px;
}
.page--with-sidebar .calculator-build .calculator-block__calculator { width: 100%; }
.page--with-sidebar #ct-calculator { display: block; width: 100%; }
.page--with-sidebar #ct-calculator iframe {
    display: block; width: 100%; border: 0; background: transparent;
}
.page--with-sidebar [id] { scroll-margin-top: 100px; }

/* ---------------------------------------------------------------- */
/* Sidebar — 1:1 with .faq-page__aside                               */
/* ---------------------------------------------------------------- */
.page--with-sidebar .documents__aside {
    position: sticky;
    top: 90px;
    margin-top: 0;
    padding: 32px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background-color: #FFFFFF;
    border-radius: 32px;
    box-shadow: 0 0 24px 0 rgba(187, 185, 118, 0.30);
}
.page--with-sidebar .documents__menu li { display: block; }
.page--with-sidebar .documents__menu li:not(:last-child) { margin-bottom: 24px; }
.page--with-sidebar .documents__menu li a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #414141;
    transition: color 0.2s ease;
    text-decoration: none;
}
.page--with-sidebar .documents__menu li a:hover { color: #ACA860; }
.page--with-sidebar .documents__menu li a.active {
    color: #ACA860;
    font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* Tier 2 — Section heading                                          */
/* Applies to: .page__text-block h2, .tables-block__title,           */
/* .files-block__title                                               */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block h2,
.page--with-sidebar .tables-block__title,
.page--with-sidebar .files-block__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #6A6A6A;
    margin: 56px 0 24px;
}
.page--with-sidebar .page__text-block h2:first-child,
.page--with-sidebar .tables-block__title:first-child,
.page--with-sidebar .files-block__title:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Tier 3 — Subheading                                               */
/* Applies to: every h3 / h4 inside text-blocks and tables           */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block h3,
.page--with-sidebar .page__text-block h4,
.page--with-sidebar .tables-block__table h3,
.page--with-sidebar .tables-block__table h4 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    font-weight: 500;
    color: #414141;
    margin: 32px 0 16px;
}
.page--with-sidebar .tables-block__table h3:first-child,
.page--with-sidebar .tables-block__table h4:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Tier 4 — Body text                                                */
/* ---------------------------------------------------------------- */
.page--with-sidebar .page__text-block {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.44;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: #414141;
}
.page--with-sidebar .page__text-block p { margin-bottom: 1em; }
.page--with-sidebar .page__text-block p:last-child { margin-bottom: 0; }

/* Inline accents */
.page--with-sidebar .page__text-block b,
.page--with-sidebar .page__text-block strong { font-weight: 700; }
.page--with-sidebar .page__text-block i,
.page--with-sidebar .page__text-block em  { font-style: italic; }
.page--with-sidebar .page__text-block a {
    color: inherit;
    text-decoration: underline;
}
.page--with-sidebar .page__text-block a:hover { text-decoration: none; }

/* Lists — same square-bullet pattern as FAQ .content */
.page--with-sidebar .page__text-block ul,
.page--with-sidebar .page__text-block ol {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}
.page--with-sidebar .page__text-block ul li,
.page--with-sidebar .page__text-block ol li {
    position: relative;
    padding-left: 26px;
}
.page--with-sidebar .page__text-block ul li:not(:last-child),
.page--with-sidebar .page__text-block ol li:not(:last-child) {
    margin-bottom: 10px;
}
.page--with-sidebar .page__text-block ul li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 10px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #414141;
}
.page--with-sidebar .page__text-block ol { counter-reset: page-ol; }
.page--with-sidebar .page__text-block ol li { counter-increment: page-ol; }
.page--with-sidebar .page__text-block ol li::before {
    content: counter(page-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
    color: #414141;
}

/* ---------------------------------------------------------------- */
/* Uniform tables — same look whether inside text-block or           */
/* tables-block. Override tables-block defaults to remove the        */
/* 100px breakout/scroll wrapper so all tables sit inside content.   */
/* ---------------------------------------------------------------- */
.page--with-sidebar .tables-block { margin-top: 0; }
.page--with-sidebar .tables-block + .tables-block,
.page--with-sidebar .tables-block:not(:first-child) { margin-top: 32px; }
.page--with-sidebar .tables-block__inner { display: block; }
.page--with-sidebar .tables-block__table {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page--with-sidebar .tables-block__table:last-child { margin-bottom: 0 !important; }

.page--with-sidebar .page__text-block table,
.page--with-sidebar .tables-block__table table,
.page__text-block table {
    width: 100%;
    min-width: auto;
    margin: 16px 0 24px;
    border-collapse: collapse;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #414141;
    background: transparent;
}

.page--with-sidebar .page__text-block thead,
.page--with-sidebar .tables-block__table thead,
.page__text-block thead {
    background: transparent;
}

.page--with-sidebar .page__text-block td,
.page--with-sidebar .page__text-block th,
.page--with-sidebar .tables-block__table td,
.page--with-sidebar .tables-block__table th,
.page__text-block td,
.page__text-block th {
    padding: 14px 16px;
    vertical-align: middle;
    text-align: left;
    border: 1px solid #ABAFA4;
    color: #414141;
    font-weight: 300;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.page--with-sidebar .page__text-block th,
.page--with-sidebar .tables-block__table th,
.page__text-block th {
    font-weight: 500;
    color: #414141;
}

/* Mobile: horizontal scroll wrapper */
@media (max-width: 767px) {
    .page--with-sidebar .page__text-block,
    .page--with-sidebar .tables-block__table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page--with-sidebar .page__text-block table {
        min-width: 600px;
    }
}

/* ---------------------------------------------------------------- */
/* Warning aside — table-like outer frame, no internal dividers      */
/* ---------------------------------------------------------------- */
.warning-aside {
    margin: 32px 0;
    padding: 24px 28px;
    border: 1px solid #ABAFA4;
    background: transparent;
    border-radius: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
}
.warning-aside h3 {
    margin: 0 0 12px;
    padding: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #414141;
    border: 0;
    background: transparent;
}
.warning-aside h3:not(:first-child) { margin-top: 24px; }
.warning-aside p,
.warning-aside ul {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
    list-style: none;
}
.warning-aside ul li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #414141;
}
.warning-aside ul li:not(:last-child) { margin-bottom: 8px; }
.warning-aside ul li::before {
    content: '';
    position: absolute;
    top: 0.55em;
    left: 4px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #414141;
}
.warning-aside p:last-child,
.warning-aside ul:last-child { margin-bottom: 0; }
.warning-aside em { font-style: italic; color: #6A6A6A; }

/* ---------------------------------------------------------------- */
/* Footnotes & note paragraphs (still part of "body text" tier)      */
/* ---------------------------------------------------------------- */
.page__footnotes {
    margin: 24px 0;
    padding-top: 16px;
    border-top: 1px solid #ABAFA4;
    font-size: 14px;
    line-height: 1.5;
    color: #6A6A6A;
    font-weight: 300;
}
.page__footnotes p { margin-bottom: 8px; }
.page__note {
    font-size: 14px;
    line-height: 1.5;
    color: #6A6A6A;
    font-style: italic;
    margin: 16px 0;
    font-weight: 300;
}

/* ---------------------------------------------------------------- */
/* Mobile sidebar — horizontal anchor strip                          */
/* ---------------------------------------------------------------- */
@media (max-width: 894px) {
    .page--with-sidebar .documents__col-sm { display: block; }
    .page--with-sidebar .documents__aside {
        position: sticky;
        top: 64px;
        margin: 0 -12px 32px;
        padding: 16px 12px;
        max-height: none;
        border-radius: 0;
        background: #FFFFFF;
        z-index: 5;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    .page--with-sidebar .documents__menu {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page--with-sidebar .documents__menu::-webkit-scrollbar { display: none; }
    .page--with-sidebar .documents__menu li {
        margin: 0;
        flex-shrink: 0;
    }
    .page--with-sidebar .documents__menu li:not(:last-child) { margin-bottom: 0; }
}