/* 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: 100%;
    justify-content: center;
    margin-top: 16px;
}

@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: 767px) {
    .ct-chat-cta--detached {
        margin-top: 12px;
    }
}

/* =================================================================
   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;
}
@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-modal__backdrop {
    background: rgb(0 0 0 / .3);
}

/* 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 — simple cream block with spinner and message.
   Shown inside #ct-calculator until CtCreditWidget mounts (or stays
   forever if the widget fails to init due to CORS — fine as a fallback). */
.ct-calc-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 480px;
    padding: 32px 24px;
    background: #F1EFD9;
    border-radius: 24px;
    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; }
}

/* 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;
}
.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: 300;
    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: 500;
    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: 300;
    color: #414141;
    list-style: none;
}
.warning-aside ul li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 300;
    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; }
}