/* ===============================
   Support Care Note
================================ */
.support-care-note {
    position: relative;
    padding: clamp(60px, 6vw, 88px) 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(237, 28, 36, 0.035), transparent 34%),
        radial-gradient(circle at 12% 82%, rgba(222, 232, 238, 0.42), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);
    overflow: hidden;
}
.support-care-note .container.narrow {
    position: relative;
    z-index: 2;
    width: min(100% - 48px, 760px);
    margin: 0 auto;
}
/* =====================================
   Card Wrapper
===================================== */
.support-care-note .wp-block-group {
    position: relative;
}
/*
|--------------------------------------------------------------------------
| Default appearance when no panel style selected
|--------------------------------------------------------------------------
*/
.support-care-note .wp-block-group:not([class*="is-style-panel-"]) {
    padding: clamp(34px, 4vw, 54px);
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 50px rgba(0,0,0,.08),
        0 3px 12px rgba(0,0,0,.04);
}
/*
|--------------------------------------------------------------------------
| When a Gutenberg panel style is selected
|--------------------------------------------------------------------------
*/
.support-care-note .wp-block-group[class*="is-style-panel-"] {
    padding: clamp(34px, 4vw, 54px);
}
/* =====================================
   Typography
===================================== */
.support-care-note .eyebrow {
    margin-bottom: 16px;
    color: rgba(20,20,20,.54);
}
.support-care-note h2 {
    max-width: 720px;
    margin: 0 0 22px;
    color: var(--color-charcoal);
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.support-care-note p {
    max-width: 660px;
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.76;
    color: rgba(20,20,20,.68);
}
/*
|--------------------------------------------------------------------------
| Dark panel support
|--------------------------------------------------------------------------
*/
.support-care-note .wp-block-group[class*="is-style-panel-dark"] .eyebrow,
.support-care-note .wp-block-group[class*="is-style-panel-dark"] h2,
.support-care-note .wp-block-group[class*="is-style-panel-dark"] p {
    color: #fff;
}
.support-care-note .wp-block-group[class*="is-style-panel-dark"] .eyebrow {
    opacity: .78;
}
.support-care-note .wp-block-group[class*="is-style-panel-dark"] p {
    opacity: .92;
}
/* =====================================
   Responsive
===================================== */
@media (max-width: 900px) {
    .support-care-note {
        padding: 72px 0;
    }
    .support-care-note .container.narrow {
        width: min(100% - 36px, 760px);
    }
    .support-care-note h2 {
        font-size: clamp(2rem, 8vw, 3.1rem);
        line-height: 1.04;
    }
    .support-care-note p {
        font-size: 1rem;
        line-height: 1.7;
    }
    .support-care-note .wp-block-group,
    .support-care-note .wp-block-group[class*="is-style-panel-"] {
        padding: 30px 24px;
    }
}