.intro-bouncing-mosaic__area {
    max-width: 48rem;
}

.intro-bouncing-mosaic__decor--p1 {
    top: 0;
    left: 0;
    width: 2rem;
    height: 3rem;
    animation-duration: 2s;
}

.intro-bouncing-mosaic__decor--p2 {
    top: 0;
    left: 25%;
    width: 1.5rem;
    height: 2.5rem;
    animation-duration: 2.5s;
}

.intro-bouncing-mosaic__decor--p3 {
    top: 0;
    left: 50%;
    width: 2.5rem;
    height: 2rem;
    animation-duration: 1.8s;
}

.intro-bouncing-mosaic__decor--p4 {
    top: 0;
    left: 75%;
    width: 1.75rem;
    height: 2.75rem;
    animation-duration: 2.2s;
}

.intro-bouncing-mosaic__decor--p5 {
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    animation-duration: 2.8s;
}

.intro-bouncing-mosaic__decor--p6 {
    top: 25%;
    left: 0;
    width: 1.5rem;
    height: 2rem;
    animation-duration: 3s;
}

.intro-bouncing-mosaic__decor--p7 {
    top: 25%;
    left: 25%;
    width: 2rem;
    height: 1.5rem;
    animation-duration: 1.5s;
}

.intro-bouncing-mosaic__decor--p8 {
    top: 25%;
    left: 50%;
    width: 1.25rem;
    height: 2.25rem;
    animation-duration: 2.3s;
}

.intro-bouncing-mosaic__decor--p9 {
    top: 25%;
    left: 75%;
    width: 1.75rem;
    height: 1.75rem;
    animation-duration: 2.7s;
}

.intro-bouncing-mosaic__decor--p10 {
    top: 25%;
    right: 0;
    width: 1.5rem;
    height: 2.5rem;
    animation-duration: 1.9s;
}

.intro-bouncing-mosaic__decor--p11 {
    top: 50%;
    left: 0;
    width: 2.25rem;
    height: 1.5rem;
    animation-duration: 2.1s;
}

.intro-bouncing-mosaic__decor--p12 {
    top: 50%;
    left: 25%;
    width: 1.75rem;
    height: 2rem;
    animation-duration: 2.6s;
}

.intro-bouncing-mosaic__decor--p13 {
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.75rem;
    animation-duration: 1.7s;
}

.intro-bouncing-mosaic__decor--p14 {
    top: 50%;
    left: 75%;
    width: 2rem;
    height: 1.25rem;
    animation-duration: 2.4s;
}

.intro-bouncing-mosaic__decor--p15 {
    top: 50%;
    right: 0;
    width: 1.25rem;
    height: 2rem;
    animation-duration: 2.9s;
}

.intro-bouncing-mosaic__decor--p16 {
    top: 75%;
    left: 0;
    width: 2rem;
    height: 1.75rem;
    animation-duration: 2.2s;
}

.intro-bouncing-mosaic__decor--p17 {
    top: 75%;
    left: 25%;
    width: 1.5rem;
    height: 2.25rem;
    animation-duration: 1.8s;
}

.intro-bouncing-mosaic__decor--p18 {
    top: 75%;
    left: 50%;
    width: 1.75rem;
    height: 1.5rem;
    animation-duration: 2.5s;
}

.intro-bouncing-mosaic__decor--p19 {
    top: 75%;
    left: 75%;
    width: 1.25rem;
    height: 2rem;
    animation-duration: 2.1s;
}

.intro-bouncing-mosaic__decor--p20 {
    top: 75%;
    right: 0;
    width: 2.25rem;
    height: 1.5rem;
    animation-duration: 2.7s;
}

.intro-bouncing-mosaic__decor--p21 {
    bottom: 0;
    left: 0;
    width: 1.5rem;
    height: 2rem;
    animation-duration: 2.3s;
}

.intro-bouncing-mosaic__decor--p22 {
    bottom: 0;
    left: 25%;
    width: 2rem;
    height: 1.25rem;
    animation-duration: 1.6s;
}

.intro-bouncing-mosaic__decor--p23 {
    bottom: 0;
    left: 50%;
    width: 1.75rem;
    height: 1.75rem;
    animation-duration: 2.8s;
}

.intro-bouncing-mosaic__decor--p24 {
    bottom: 0;
    left: 75%;
    width: 1.25rem;
    height: 2.25rem;
    animation-duration: 2s;
}

.intro-bouncing-mosaic__decor--p25 {
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 1.5rem;
    animation-duration: 2.4s;
}

[class*="intro-bouncing-mosaic__decor--p"] {
    animation-name: intro-bouncing-mosaic__bounce;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes intro-bouncing-mosaic__bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}

.content-prose__diamond {
    transform: rotate(45deg);
}

/* glossary split — footnote icon size (layout only) */
.glossary-split__note-ico {
    width: 3.5rem;
    height: 3.5rem;
}

.glossary-split__note-icon {
    font-size: 1.3rem;
    line-height: 1;
}

/* subscribe v28 — cadence timeline: geometry shared by both CSS frameworks, no colors */
.mailing-timeline__section--py-4xl {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mxw-3xl {
    max-width: 48rem !important;
}

.mxw-md {
    max-width: 28rem !important;
}

.mailing-timeline__title {
    font-size: 1.5rem;
}

.mailing-timeline__switch {
    gap: 0.75rem;
}

.mailing-timeline__badge {
    font-size: 0.75rem;
}

/* connector line — fixed width vertical rule */
.mailing-timeline__line {
    top: 0.25rem;
    bottom: 0.25rem;
    inset-inline-start: 0.75rem;
    width: 2px;
}

.mailing-timeline__steps {
    gap: 2rem;
    padding-inline-start: 2.5rem;
}

/* per-step dot */
.mailing-timeline__dot {
    top: 0.25rem;
    inset-inline-start: -2.5rem;
    width: 0.625rem;
    height: 0.625rem;
}

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

/* frequency toggle — active/inactive colors are utility classes toggled in script.js */
.mailing-timeline__toggle-btn {
    cursor: pointer;
    border: 0;
}

.mailing-timeline__row {
    flex-direction: column;
    gap: 0.75rem;
}

.mailing-timeline__input,
.mailing-timeline__cta {
    padding: 0.75rem 1rem;
}

.mailing-timeline__cta {
    padding-inline: 1.5rem;
}

.mailing-timeline__thanks {
    margin-top: 2rem;
}

.mailing-timeline__panel {
    padding: 2rem;
}

@media (min-width: 640px) {
    .mailing-timeline__row {
        flex-direction: row;
    }
}

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