/* vn-care-levels — Business "Levels of Care" panel
   Source: Rest of pages/Responsive/Down to business (.panel-loc #f8fbfe, .card-al #eff4fc,
   .card-team #dce8f6, 97px light circles #D5E2F5, labels 28px 600, text 27px). */

.vn-levels {
    --vn-levels-circle: min(5.06vw, 97px);
    max-width: 760px;
    padding: min(2.9vw, 56px) min(1.9vw, 37px) min(3.2vw, 62px);
    background-color: #F8FBFE;
    border-radius: 4px;
    font-family: var(--vn-font-body);
    color: var(--vn-navy);
}

/* Header uses the vn-section-head icon layout */
.vn-levels .vn-levels__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: min(2.1vw, 40px);
    align-items: center;
    max-width: none;
    margin: 0 0 min(3.07vw, 59px);
    padding: 0 0 0 min(1.4vw, 28px);
}

.vn-levels .vn-levels__head .vn-shead__badge {
    grid-row: 1 / span 2;
    width: min(4.58vw, 88px);
    height: min(4.58vw, 88px);
    background-color: #053475;
}

.vn-levels .vn-levels__head .vn-shead__icon { width: 66%; color: var(--vn-white); }

.vn-levels .vn-levels__head .vn-shead__title {
    margin: 0;
    font-size: min(2.3vw, 44.19px);
    line-height: 1.142;
    letter-spacing: 0;
}

.vn-levels .vn-levels__head .vn-shead__note {
    grid-column: 2;
    max-width: none;
    margin: 0;
    font-size: min(1.46vw, 28.09px);
    font-weight: 400;
    line-height: 1.3;
}

.vn-levels__card,
.vn-levels__note {
    border-radius: 21px;
}

.vn-levels__card {
    display: flex;
    flex-direction: column;
    gap: min(4.3vw, 83px);
    padding: min(2.5vw, 48px) min(1vw, 20px) min(2.4vw, 46px) min(1.67vw, 32px);
    background-color: #EFF4FC;
}

.vn-levels__row {
    display: grid;
    grid-template-columns: var(--vn-levels-circle) minmax(0, 1fr);
    column-gap: min(1.56vw, 30px);
    align-items: center;
}

.vn-levels__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--vn-levels-circle);
    height: var(--vn-levels-circle);
    border-radius: 50%;
    background-color: #D5E2F5;
}

.vn-levels .vn-icon { width: 60%; color: #053475; }
.vn-levels .vn-icon svg { display: block; width: 100%; height: auto; fill: currentColor; }
.vn-levels .vn-icon i { font-size: calc(var(--vn-levels-circle) * 0.5); }

.vn-levels__body { min-width: 0; }

.vn-levels .vn-levels__label {
    margin: 0 0 min(0.4vw, 8px);
    font-family: var(--vn-font-body);
    font-size: min(1.46vw, 28.09px);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    color: inherit;
}

.vn-levels__label a { color: inherit; text-decoration: none; }
.vn-levels__label a:hover,
.vn-levels__label a:focus-visible { text-decoration: underline; }

.vn-levels .vn-levels__text {
    margin: 0;
    font-size: min(1.41vw, 27.09px);
    font-weight: 400;
    line-height: 1.348;
}

.vn-levels__note {
    display: grid;
    grid-template-columns: var(--vn-levels-circle) minmax(0, 1fr);
    column-gap: min(1.56vw, 30px);
    align-items: center;
    margin-top: min(1.04vw, 20px);
    padding: min(2.2vw, 42px) min(1vw, 20px) min(2.2vw, 42px) min(1.67vw, 32px);
    background-color: #DCE8F6;
}

.vn-levels .vn-levels__note-icon { width: 70%; justify-self: center; color: #031870; }

@media (max-width: 1024px) {
    .vn-levels { --vn-levels-circle: 64px; max-width: none; padding: 28px 24px; border-radius: 14px; }
    .vn-levels .vn-levels__head { column-gap: 16px; margin-bottom: 26px; padding: 0; }
    .vn-levels .vn-levels__head .vn-shead__badge { width: 64px; height: 64px; }
    .vn-levels .vn-levels__head .vn-shead__title { font-size: clamp(1.8rem, 4.4vw, 2.5rem); line-height: 1.15; }
    .vn-levels .vn-levels__head .vn-shead__note { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.35; }
    .vn-levels__card { gap: 24px; padding: 22px; border-radius: 18px; }
    .vn-levels__row,
    .vn-levels__note { column-gap: 18px; align-items: start; }
    .vn-levels__note { align-items: center; margin-top: 16px; padding: 22px; border-radius: 18px; grid-template-columns: 48px minmax(0, 1fr); }
    .vn-levels .vn-levels__label { margin-bottom: 4px; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: 0.02em; }
    .vn-levels .vn-levels__text { font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.4; }
    .vn-levels__text br { display: none; }
}

@media (max-width: 767px) {
    .vn-levels { padding: 26px 18px; }
}

@media (max-width: 480px) {
    .vn-levels { --vn-levels-circle: 52px; }
    .vn-levels__row { column-gap: 14px; }
}