html, body {
    overflow-x: hidden;
}

body {
    font-family: 'ICPangeaText', sans-serif;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

main {
    flex: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

h2 {
    color: #0B0427;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

@media (max-width: 768px) {
    h2 {
        font-size: 28px;
        line-height: 46px; /* knob: title vertical breathing room (was 50px - the main culprit for tall titles) */
        padding-right: 0; /* knob: indent before section title (was 20px) */
    }
}


.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.semi-bold {
    font-weight: 600;
}


.shadow {
    box-shadow: 0 445px 125px 0 rgba(27, 22, 90, 0.00), 0 285px 114px 0 rgba(27, 22, 90, 0.01), 0 160px 96px 0 rgba(27, 22, 90, 0.05), 0 71px 71px 0 rgba(27, 22, 90, 0.09), 0 18px 39px 0 rgba(27, 22, 90, 0.10);
}

@media (max-width: 768px) {
    .mobile-col {
        flex-direction: column !important;
    }

    /* Search/module pages: match the 20px frame that category.css applies
       on the category page. Higher specificity than benefit_grid.css's plain
       .benefit-grid-section rule so this wins even though it loads earlier. */
    main > .benefit-grid-section {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Utility: opt-in press animation for buttons/links */
.press-effect:active {
    transform: scale(0.94);
    transition: transform 0.1s ease;
}