.side-rail__title { letter-spacing: -0.03em; text-wrap: balance; }
.side-rail__micro { font-size: 0.75rem; line-height: 1rem; }
.side-rail__dot { width: 0.5rem; height: 0.5rem; }
.side-rail__wide { letter-spacing: 0.12em; }

.side-rail__viewport {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.side-rail__track {
    width: max-content;
    animation: side-rail-scroll 40s linear infinite;
}

@keyframes side-rail-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.side-rail__slot { margin: 0 0.75rem; }

.side-rail__phone {
    width: 12rem;
    height: 22rem;
    overflow: hidden;
    border-radius: 2.25rem !important;
}
.side-rail__phone > div { border-radius: 1.75rem !important; overflow: hidden; }
.side-rail__notch { width: 4rem; height: 0.9rem; }
.side-rail__tile { border-radius: 0.75rem !important; }

.side-rail__photo { width: 11rem; }
.side-rail__img { object-fit: cover; height: 16rem; }
.side-rail__img--h1 { height: 18rem; }
.side-rail__img--h2 { height: 14rem; }
.side-rail__img--h3 { height: 16rem; }

.side-rail__chart { width: 12rem; height: 16rem; }
.side-rail__bars { height: 5rem; }
.side-rail__bar { height: 45%; }
.side-rail__bar--b2 { height: 70%; }
.side-rail__bar--b3 { height: 100%; }
.side-rail__bar--b4 { height: 40%; }
.side-rail__bar--b5 { height: 60%; }

@media (prefers-reduced-motion: reduce) {
    .side-rail__track { animation: none; }
}

/* phone mock content must fit the narrow screen: amounts shrink, labels wrap instead of running past the frame */
.side-rail__phone > div > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.side-rail__phone > div > :nth-child(4) { font-size: 1.375rem !important; line-height: 1.15; }
.side-rail__tile { min-width: 0; overflow-wrap: anywhere; }
.side-rail__tile > * { font-size: .75rem !important; line-height: 1.2; }
@media (max-width: 767.98px) {
    .side-rail__phone > div > :nth-child(4) { font-size: 1.125rem !important; }
}

/* content stride — alternating paragraph inset (no surfaces) */
.content-stride__para--odd {
    padding-inline-start: 0;
}

@media (min-width: 768px) {
    .content-stride__para--even {
        padding-inline-start: 2rem;
    }
}

.glossary-grid__card {
    width: 100%;
}

@media (min-width: 768px) {
    .glossary-grid__card {
        width: calc(50% - 0.75rem); /* For gap-4 (1.5rem) -> half is 0.75rem */
    }
}

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

.tips-numbered__thumb {
    width: 4rem;
    height: 4rem;
}

.ribbon-corner-card__tile {
    min-width: 260px;
    max-width: 380px;
}

.ribbon-corner-card__fold {
    width: 84px;
    height: 84px;
}

.ribbon-corner-card__stamp {
    width: 116px;
    padding: 5px 0;
    top: 20px;
    right: -30px;
    transform: rotate(45deg);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
}

.ribbon-corner-card__media {
    height: 12rem;
}

.ribbon-corner-card__img {
    object-fit: cover;
}
.ribbon-corner-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* subscribe v21 — bento grid: geometry shared by both CSS frameworks (Bootstrap has no grid-template utilities) */
.mailing-bento-benefits__section--py-4xl {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mxw-5xl {
    max-width: 64rem !important;
}

.mailing-bento-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mailing-bento-benefits__panel {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    min-height: 14rem;
    padding: 1.5rem;
}

.mailing-bento-benefits__title {
    font-size: 1.5rem;
}

.mailing-bento-benefits__card {
    padding: 1.25rem;
}

.mailing-bento-benefits__dot {
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
}

.mailing-bento-benefits__row {
    flex-direction: column;
    gap: 1rem;
}

.mailing-bento-benefits__input {
    padding: 0.75rem 1rem;
}

.mailing-bento-benefits__cta {
    width: 100%;
    padding: 0.75rem 1.5rem;
}

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

    .mailing-bento-benefits__cta {
        width: auto;
    }
}

@media (min-width: 768px) {
    .mailing-bento-benefits__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mailing-bento-benefits__panel {
        padding: 2rem;
    }

    .mailing-bento-benefits__title {
        font-size: 1.875rem;
    }
}