.intro-split-icon {
    width: 3rem;
    height: 3rem;
}

/* Як TW: w-64 → sm:w-80 → lg:w-96 (одна шкала для обох фреймворків) */
.intro-split-thumb {
    width: 16rem;
    height: 16rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .intro-split-thumb {
        width: 20rem;
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .intro-split-thumb {
        width: 24rem;
        height: 24rem;
    }
}

/* Bootstrap: flex + gap (no .row negative margins; works with section overflow). Tailwind grid ignores flex on items. */
@media (min-width: 576px) {
    .intro-split-benefits__row > * {
        flex: 1 1 0%;
        min-width: 0;
    }
}

.glossary-chevron {
    transition: transform 0.3s ease;
}

.glossary-item[open] .glossary-chevron {
    transform: rotate(180deg);
}


.script-bodycopy__visual--rise:hover { transform: scale(1.1); transition: transform .2s ease; }

.script-bodycopy__split-panel-inset {
    padding: 4rem;
}

.content-wide-frame {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-heading-gap {
    margin-bottom: 2rem;
}

.content-base-height {
    display: block;
    width: 100%;
    height: 16rem;
    min-height: 16rem;
    flex-shrink: 0;
    object-fit: cover;
}

.tips-financial__card {
    max-width: 24rem;
}

.tips-financial__thumb {
    width: 2.5rem;
    height: 2.5rem;
}

/* subscribe v30 — SVG decor placement, sizing and drift: shared by both CSS frameworks, no colors */
.mailing-minimal-underline__section--py-4xl {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mxw-sm {
    max-width: 24rem !important;
}

.mailing-minimal-underline__center {
    max-width: 28rem;
}

.mailing-minimal-underline__pattern {
    mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, transparent 18%, black 92%);
}

.mailing-minimal-underline__corner {
    will-change: transform;
}

.mailing-minimal-underline__corner--tl {
    top: 2rem;
    inset-inline-start: 2rem;
    width: 6rem;
    height: 6rem;
    animation: mailing-minimal-underline-drift 9s ease-in-out infinite;
}

.mailing-minimal-underline__corner--br {
    bottom: 2.5rem;
    inset-inline-end: 2.5rem;
    width: 7rem;
    height: 7rem;
    animation: mailing-minimal-underline-drift 11s ease-in-out infinite reverse;
}

.mailing-minimal-underline__marks {
    top: 4rem;
    inset-inline-end: 4rem;
    width: 5rem;
    height: 5rem;
    animation: mailing-minimal-underline-drift 7s ease-in-out infinite;
    animation-delay: 1.2s;
}

.mailing-minimal-underline__title {
    font-size: 1.5rem;
}

.mailing-minimal-underline__subtitle {
    margin-bottom: 2.5rem;
}

.mailing-minimal-underline__form {
    gap: 2rem;
}

/* underline field: border geometry lives here so both frameworks draw the same rule */
.mailing-minimal-underline__input {
    border-width: 0 0 2px;
    border-style: solid;
    transition: border-color 150ms ease;
}

.mailing-minimal-underline__cta {
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    cursor: pointer;
    transition: color 150ms ease;
}

/* Accent on focus / hover. `:where()` keeps specificity at 0-1-0 so the framework's own
   utility wins wherever it exists (Tailwind), and this is the only rule in Bootstrap. */
:where(.mailing-minimal-underline__input):focus {
    border-color: var(--bs-primary);
    outline: none;
}

:where(.mailing-minimal-underline__cta):hover,
:where(.mailing-minimal-underline__cta):focus-visible {
    color: var(--bs-primary);
}

.mailing-minimal-underline__thanks {
    margin-top: 2rem;
}

.mailing-minimal-underline__thanks-title {
    font-size: 1.125rem;
}

@keyframes mailing-minimal-underline-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0.35rem, -0.35rem);
    }
}

@media (min-width: 768px) {
    .mailing-minimal-underline__title {
        font-size: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mailing-minimal-underline__corner--tl,
    .mailing-minimal-underline__corner--br,
    .mailing-minimal-underline__marks {
        animation: none;
    }
}

@media (max-width: 767px) {
    .mailing-minimal-underline__corner--tl,
    .mailing-minimal-underline__corner--br,
    .mailing-minimal-underline__marks {
        opacity: 0.55;
    }
}