/*=========================================================
                REVLO CARE™ — PUBLIC PRODUCT PAGE
                PRODUCTION CARE STYLESHEET

    Dashboard-aligned light design system:
    Canvas        : #F3F6FA
    Surface       : #FFFFFF
    Text          : #172033
    Muted         : #59677D
    Border        : #DFE6EF

    Care product identity:
    Primary       : #10B981
    Dark          : #0C9468
    Light         : #34D9A0

    Semantic states remain separate from Care branding.
=========================================================*/


/*=========================================================
                CARE DESIGN TOKENS
=========================================================*/

.care-hero,
.care-mission,
.care-features,
.service-book,
.maintenance-section,
.health-score,
.service-network,
.care-faq,
.care-final-cta{
    --care-primary:#10B981;
    --care-primary-dark:#0C9468;
    --care-primary-light:#34D9A0;
    --care-primary-soft:rgba(16,185,129,.10);
    --care-primary-border:rgba(16,185,129,.24);

    --care-canvas:#F3F6FA;
    --care-surface:#FFFFFF;
    --care-text:#172033;
    --care-muted:#59677D;
    --care-soft:#7A8799;
    --care-border:#DFE6EF;

    --care-success:#16A34A;
    --care-warning:#F59E0B;
    --care-danger:#EF4444;

    --care-shadow-sm:0 10px 28px rgba(23,32,51,.05);
    --care-shadow:0 20px 45px rgba(23,32,51,.07);
    --care-shadow-lg:0 30px 70px rgba(23,32,51,.10);

    --care-radius-sm:14px;
    --care-radius:20px;
    --care-radius-lg:28px;
}


/*=========================================================
                BASE / SHARED PUBLIC STYLES
=========================================================*/

.care-hero *,
.care-mission *,
.care-features *,
.service-book *,
.maintenance-section *,
.health-score *,
.service-network *,
.care-faq *,
.care-final-cta *{
    box-sizing:border-box;
}

.care-hero h1,
.care-hero h2,
.care-hero h3,
.care-mission h2,
.care-mission h3,
.care-features h2,
.care-features h3,
.service-book h2,
.service-book h3,
.maintenance-section h2,
.maintenance-section h3,
.health-score h2,
.health-score h3,
.service-network h2,
.service-network h3,
.care-faq h2,
.care-faq h3,
.care-final-cta h2{
    color:var(--care-text);
}

.care-hero p,
.care-mission p,
.care-features p,
.service-book p,
.maintenance-section p,
.health-score p,
.service-network p,
.care-faq p{
    color:var(--care-muted);
}

.care-section-header{
    max-width:820px;
    margin:0 auto 70px;
    text-align:center;
}

.care-section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 17px;

    border-radius:999px;

    background:var(--care-primary-soft);
    color:var(--care-primary-dark);

    border:1px solid var(--care-primary-border);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1;
    text-transform:uppercase;

    margin-bottom:22px;
}

.care-section-header h2{
    margin:0 0 22px;

    font-size:3rem;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
}

.care-section-header h2 span{
    color:var(--care-primary);
}

.care-section-header p{
    margin:0 auto;
    max-width:780px;

    font-size:1.05rem;
    line-height:1.85;
}


/*=========================================================
                BUTTONS
=========================================================*/

.care-buttons,
.cta-buttons{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.care-buttons .btn,
.care-final-cta .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    padding:0 24px;

    border-radius:12px;

    text-decoration:none;

    font-size:.92rem;
    font-weight:750;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.care-buttons .btn-primary,
.care-final-cta .btn-primary{
    background:var(--care-primary);
    color:#fff;
    border:1px solid var(--care-primary);

    box-shadow:0 10px 25px rgba(16,185,129,.18);
}

.care-buttons .btn-primary:hover,
.care-final-cta .btn-primary:hover{
    background:var(--care-primary-dark);
    border-color:var(--care-primary-dark);

    transform:translateY(-2px);
    box-shadow:0 15px 32px rgba(16,185,129,.24);
}

.care-buttons .btn-outline{
    background:#fff;
    color:var(--care-text);
    border:1px solid var(--care-border);
}

.care-buttons .btn-outline:hover{
    background:#F7FFFC;
    border-color:var(--care-primary);
    color:var(--care-primary-dark);

    transform:translateY(-2px);
}


/*=========================================================
                CARE HERO
=========================================================*/

.care-hero{
    position:relative;
    padding:118px 0 92px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(16,185,129,.11),
            transparent 32%
        ),
        linear-gradient(
            to bottom,
            #F3F6FA 0%,
            #F8FAFC 100%
        );
}

.care-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(23,32,51,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(23,32,51,.025) 1px,transparent 1px);

    background-size:70px 70px;
    opacity:.7;

    pointer-events:none;
}

.care-hero::after{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    right:-180px;
    bottom:-220px;

    border-radius:50%;

    background:rgba(16,185,129,.055);

    pointer-events:none;
}

.care-hero .container{
    position:relative;
    z-index:2;
}

.care-hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:70px;
    align-items:center;
}


/* LEFT */

.care-content{
    max-width:650px;
}

.care-badge{
    display:inline-flex;
    align-items:center;

    padding:9px 17px;

    border-radius:999px;

    background:var(--care-primary-soft);
    color:var(--care-primary-dark);

    border:1px solid var(--care-primary-border);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:23px;
}

.care-content h1{
    margin:0 0 26px;

    max-width:650px;

    color:var(--care-text);

    font-size:4rem;
    line-height:1.06;
    font-weight:800;
    letter-spacing:-.045em;
}

.care-content h1 span{
    display:block;
    color:var(--care-primary);
}

.care-content p{
    max-width:620px;

    margin:0 0 36px;

    color:var(--care-muted);

    font-size:1.12rem;
    line-height:1.8;
}


/* RIGHT HEALTH CARD */

.care-card{
    position:relative;

    padding:32px;

    background:var(--care-surface);

    border:1px solid var(--care-border);
    border-radius:var(--care-radius-lg);

    box-shadow:var(--care-shadow-lg);

    overflow:hidden;
}

.care-card::before{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    top:-170px;
    right:-120px;

    border-radius:50%;

    background:rgba(16,185,129,.09);

    pointer-events:none;
}

.care-card-header{
    position:relative;
    z-index:1;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-bottom:27px;
}

.care-card-header h3{
    margin:0;

    color:var(--care-text);

    font-size:1.35rem;
    font-weight:750;
}

.care-card-header span{
    display:inline-flex;
    align-items:center;

    padding:7px 13px;

    border-radius:999px;

    background:rgba(22,163,74,.10);
    color:var(--care-success);

    font-size:.75rem;
    font-weight:750;
}

.care-grid{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.care-grid div{
    padding:19px;

    background:#F8FAFC;

    border:1px solid var(--care-border);
    border-radius:16px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.care-grid div:hover{
    transform:translateY(-4px);

    border-color:var(--care-primary-border);

    box-shadow:var(--care-shadow-sm);
}

.care-grid small{
    display:block;

    margin-bottom:8px;

    color:var(--care-soft);

    font-size:.75rem;
    font-weight:600;
}

.care-grid h2{
    margin:0;

    color:var(--care-text);

    font-size:1.65rem;
    font-weight:800;
}

.care-score{
    position:relative;
    z-index:1;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:16px;
    padding:17px 19px;

    background:var(--care-primary-soft);

    border:1px solid var(--care-primary-border);
    border-radius:15px;
}

.care-score span{
    color:var(--care-muted);
    font-size:.82rem;
    font-weight:600;
}

.care-score strong{
    color:var(--care-primary-dark);

    font-size:1rem;
}


/*=========================================================
                WHY REVLO CARE
=========================================================*/

.care-mission{
    padding:110px 0;
    background:#fff;
}

.care-mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
}

.care-mission .mission-card{
    padding:32px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:22px;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.care-mission .mission-card:hover{
    transform:translateY(-6px);

    border-color:var(--care-primary-border);

    box-shadow:var(--care-shadow);
}

.care-mission .mission-icon{
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:21px;

    border-radius:16px;

    background:var(--care-primary-soft);
    color:var(--care-primary);

    font-size:1.35rem;
}

.care-mission .mission-card h3{
    margin:0 0 12px;

    color:var(--care-text);

    font-size:1.3rem;
}

.care-mission .mission-card p{
    margin:0;

    color:var(--care-muted);

    line-height:1.75;
    font-size:.94rem;
}


/*=========================================================
                CARE FEATURES
=========================================================*/

.care-features{
    padding:120px 0;
    background:var(--care-canvas);
}

.care-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
}

.care-feature-card{
    padding:32px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:23px;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.care-feature-card:hover{
    transform:translateY(-6px);

    border-color:var(--care-primary-border);

    box-shadow:var(--care-shadow);
}

.care-feature-top{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:21px;
}

.care-feature-top i{
    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 56px;

    border-radius:15px;

    background:var(--care-primary-soft);
    color:var(--care-primary);

    font-size:1.25rem;
}

.care-feature-top span{
    color:var(--care-soft);

    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.care-feature-card h3{
    margin:0 0 14px;

    color:var(--care-text);

    font-size:1.4rem;
}

.care-feature-card p{
    margin:0;

    color:var(--care-muted);

    font-size:.93rem;
    line-height:1.75;
}


/*=========================================================
                DIGITAL SERVICE BOOK
=========================================================*/

.service-book{
    padding:120px 0;
    background:#fff;
}

.service-book-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:65px;
    align-items:center;
}

.service-book-content h2{
    margin:22px 0;

    color:var(--care-text);

    font-size:3rem;
    line-height:1.15;
    letter-spacing:-.025em;
}

.service-book-content h2 span{
    color:var(--care-primary);
}

.service-book-content p{
    margin:0 0 32px;

    color:var(--care-muted);

    line-height:1.85;
}

.service-highlights{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.service-item{
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--care-text);

    font-size:.92rem;
    font-weight:650;
}

.service-item i{
    color:var(--care-success);
    font-size:1rem;
}


/* SERVICE DASHBOARD */

.service-dashboard{
    padding:31px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:27px;

    box-shadow:var(--care-shadow-lg);
}

.dashboard-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-bottom:27px;
}

.dashboard-header h3{
    margin:0;

    color:var(--care-text);

    font-size:1.4rem;
}

.dashboard-header span{
    display:inline-flex;
    align-items:center;

    padding:7px 12px;

    border-radius:999px;

    background:var(--care-primary-soft);
    color:var(--care-primary-dark);

    font-size:.73rem;
    font-weight:750;
}


/*=========================================================
                SERVICE TIMELINE
=========================================================*/

.timeline-card{
    display:flex;
    flex-direction:column;

    gap:23px;

    position:relative;
}

.timeline-item{
    display:flex;
    align-items:flex-start;

    gap:15px;

    position:relative;
}

.timeline-item:not(:last-child)::after{
    content:"";

    position:absolute;

    left:9px;
    top:31px;

    width:2px;
    height:48px;

    background:#E5EAF1;
}

.timeline-dot{
    width:19px;
    height:19px;

    flex:0 0 19px;

    margin-top:3px;

    border-radius:50%;

    background:var(--care-primary);

    box-shadow:0 0 0 5px var(--care-primary-soft);
}

.timeline-item h4{
    margin:0 0 6px;

    color:var(--care-text);

    font-size:.98rem;
}

.timeline-item small{
    color:var(--care-soft);
    font-size:.76rem;
}


/*=========================================================
                SMART MAINTENANCE
=========================================================*/

.maintenance-section{
    padding:120px 0;
    background:var(--care-canvas);
}

.maintenance-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.maintenance-card{
    padding:30px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:21px;

    text-align:center;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.maintenance-card:hover{
    transform:translateY(-6px);

    border-color:var(--care-primary-border);

    box-shadow:var(--care-shadow);
}

.maintenance-card i{
    width:65px;
    height:65px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 20px;

    border-radius:17px;

    background:var(--care-primary-soft);
    color:var(--care-primary);

    font-size:1.5rem;
}

.maintenance-card h3{
    margin:0 0 9px;

    color:var(--care-text);

    font-size:1.2rem;
}

.maintenance-card p{
    margin:0;

    color:var(--care-muted);

    font-size:.86rem;
    line-height:1.65;
}


/*=========================================================
                VEHICLE HEALTH SCORE
=========================================================*/

.health-score{
    padding:120px 0;
    background:#fff;
}

.health-grid{
    display:grid;
    grid-template-columns:420px 1fr;

    gap:58px;

    align-items:center;

    margin-top:70px;
}

.health-card{
    padding:42px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:28px;

    text-align:center;

    box-shadow:var(--care-shadow);
}

.health-circle{
    width:255px;
    height:255px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:
        conic-gradient(
            var(--care-primary) 0% 94%,
            #E5EAF1 94% 100%
        );
}

.health-inner{
    width:201px;
    height:201px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
}

.health-inner h1{
    margin:0;

    color:var(--care-primary);

    font-size:3.8rem;
    line-height:1;
    font-weight:800;
}

.health-inner span{
    margin-top:8px;

    color:var(--care-success);

    font-size:.85rem;
    font-weight:750;
}

.health-footer{
    margin-top:27px;

    color:var(--care-text);

    font-size:1.05rem;
    font-weight:750;
}

.health-insights{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.health-item{
    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:24px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:20px;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.health-item:hover{
    transform:translateY(-5px);

    border-color:var(--care-primary-border);

    box-shadow:var(--care-shadow-sm);
}

.health-item i{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:var(--care-primary-soft);
    color:var(--care-primary);

    font-size:1.2rem;
}

.health-item h3{
    margin:2px 0 7px;

    color:var(--care-text);

    font-size:1rem;
}

.health-item p{
    margin:0;

    color:var(--care-muted);

    font-size:.82rem;
    line-height:1.6;
}


/*=========================================================
                SERVICE NETWORK
=========================================================*/

.service-network{
    padding:120px 0;
    background:var(--care-canvas);
}

.network-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;

    margin-top:70px;
}

.network-card{
    padding:32px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:26px;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.network-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--care-shadow);
}

.network-card.featured{
    border:1px solid var(--care-primary);
    box-shadow:0 15px 35px rgba(16,185,129,.07);
}

.network-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-bottom:27px;
}

.network-top h3{
    margin:0;

    color:var(--care-text);

    font-size:1.25rem;
}

.network-top span{
    display:inline-flex;
    align-items:center;

    padding:7px 12px;

    border-radius:999px;

    background:var(--care-primary);
    color:#fff;

    font-size:.72rem;
    font-weight:750;
}

.network-card ul{
    list-style:none;

    padding:0;
    margin:0 0 28px;
}

.network-card li{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:15px;

    color:var(--care-muted);

    font-size:.88rem;
}

.network-card li i{
    width:18px;
    color:var(--care-primary);
}

.network-card .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:0 20px;

    border-radius:11px;

    background:var(--care-primary);
    color:#fff;

    border:1px solid var(--care-primary);

    text-decoration:none;

    font-size:.88rem;
    font-weight:750;

    transition:.25s ease;
}

.network-card .btn-primary:hover{
    background:var(--care-primary-dark);
    border-color:var(--care-primary-dark);

    transform:translateY(-2px);
}

.network-map{
    min-height:245px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.network-map i{
    margin-bottom:20px;

    color:var(--care-primary);

    font-size:3.3rem;
}

.network-map h3{
    margin:0 0 10px;

    color:var(--care-text);

    font-size:1.25rem;
}

.network-map p{
    max-width:430px;

    margin:0;

    color:var(--care-muted);

    line-height:1.75;
    font-size:.88rem;
}


/*=========================================================
                CARE FAQ
=========================================================*/

.care-faq{
    padding:120px 0;
    background:#fff;
}

.care-faq-wrapper{
    max-width:900px;

    margin:70px auto 0;
}

.care-faq-item{
    margin-bottom:15px;

    background:#fff;

    border:1px solid var(--care-border);
    border-radius:17px;

    overflow:hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.care-faq-item:hover{
    border-color:var(--care-primary-border);
    box-shadow:var(--care-shadow-sm);
}

.care-faq-question{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:24px 26px;

    border:0;
    background:transparent;

    cursor:pointer;

    text-align:left;

    color:var(--care-text);

    font:inherit;
    font-size:1rem;
    font-weight:650;
}

.care-faq-question i{
    flex:0 0 auto;

    color:var(--care-primary);

    font-size:.9rem;

    transition:
        transform .25s ease,
        color .25s ease;
}

.care-faq-item.active{
    border-color:var(--care-primary-border);

    box-shadow:0 12px 30px rgba(16,185,129,.06);
}

.care-faq-item.active .care-faq-question{
    color:var(--care-primary-dark);
}

.care-faq-item.active .care-faq-question i{
    transform:rotate(0deg);
}

.care-faq-answer{
    display:none;

    padding:0 26px 24px;

    color:var(--care-muted);

    line-height:1.8;

    font-size:.9rem;
}

.care-faq-item.active .care-faq-answer{
    display:block;
}


/*=========================================================
                FINAL CTA
=========================================================*/

.care-final-cta{
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #10B981 0%,
            #34D9A0 100%
        );
}

.care-final-cta::after{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-220px;
    bottom:-300px;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    pointer-events:none;
}

.care-final-cta .container{
    position:relative;
    z-index:1;
}

.care-final-cta .cta-box{
    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;
}

.care-final-cta .care-section-tag{
    background:rgba(255,255,255,.16);
    color:#fff;

    border-color:rgba(255,255,255,.28);
}

.care-final-cta h2{
    margin:22px 0;

    color:#fff;

    font-size:3rem;
    line-height:1.15;
    letter-spacing:-.025em;
}

.care-final-cta p{
    max-width:720px;

    margin:0 auto;

    color:rgba(255,255,255,.90);

    font-size:1.05rem;
    line-height:1.85;
}

.cta-buttons{
    justify-content:center;

    margin-top:38px;
}

.care-final-cta .btn-primary{
    background:#fff;
    color:var(--care-primary-dark);
    border-color:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.care-final-cta .btn-primary:hover{
    background:#F5FFFB;
    color:#087A56;
    border-color:#F5FFFB;
}

.care-final-cta .btn-outline{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.55);
}

.care-final-cta .btn-outline:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;

    transform:translateY(-2px);
}


/*=========================================================
                RESPONSIVE — 1024px
=========================================================*/

@media(max-width:1024px){

    .care-hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .care-content{
        max-width:760px;

        margin:0 auto;

        text-align:center;
    }

    .care-content p{
        margin-left:auto;
        margin-right:auto;
    }

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

    .care-card{
        width:100%;
        max-width:680px;

        margin:0 auto;
    }

    .service-book-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .service-book-content{
        max-width:760px;
        margin:0 auto;
        text-align:center;
    }

    .service-highlights{
        max-width:520px;
        margin:0 auto;
        text-align:left;
    }

    .service-dashboard{
        width:100%;
        max-width:680px;
        margin:0 auto;
    }

    .health-grid{
        grid-template-columns:1fr;
    }

}


/*=========================================================
                RESPONSIVE — 991px
=========================================================*/

@media(max-width:991px){

    .maintenance-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .network-grid{
        grid-template-columns:1fr;
    }

    .health-insights{
        grid-template-columns:1fr 1fr;
    }

}


/*=========================================================
                RESPONSIVE — 900px
=========================================================*/

@media(max-width:900px){

    .care-mission-grid,
    .care-feature-grid{
        grid-template-columns:1fr;
    }

    .care-section-header h2{
        font-size:2.5rem;
    }

}


/*=========================================================
                RESPONSIVE — 768px
=========================================================*/

@media(max-width:768px){

    .care-hero,
    .care-mission,
    .care-features,
    .service-book,
    .maintenance-section,
    .health-score,
    .service-network,
    .care-faq,
    .care-final-cta{
        padding-top:82px;
        padding-bottom:82px;
    }

    .care-content h1{
        font-size:2.75rem;
    }

    .care-content p{
        font-size:1rem;
    }

    .care-section-header{
        margin-bottom:50px;
    }

    .care-section-header h2{
        font-size:2.25rem;
    }

    .care-section-header p{
        font-size:.98rem;
    }

    .care-card{
        padding:25px;
        border-radius:23px;
    }

    .care-grid{
        grid-template-columns:1fr 1fr;
    }

    .service-book-content h2{
        font-size:2.35rem;
    }

    .service-dashboard{
        padding:25px;
        border-radius:23px;
    }

    .maintenance-grid{
        grid-template-columns:1fr;
    }

    .health-grid{
        margin-top:45px;
    }

    .health-card{
        padding:30px;
    }

    .health-circle{
        width:220px;
        height:220px;
    }

    .health-inner{
        width:174px;
        height:174px;
    }

    .health-inner h1{
        font-size:3.1rem;
    }

    .health-insights{
        grid-template-columns:1fr;
    }

    .network-grid{
        margin-top:45px;
    }

    .care-faq-wrapper{
        margin-top:45px;
    }

    .care-final-cta h2{
        font-size:2.35rem;
    }

}


/*=========================================================
                RESPONSIVE — 560px
=========================================================*/

@media(max-width:560px){

    .care-hero{
        padding-top:70px;
        padding-bottom:68px;
    }

    .care-content h1{
        font-size:2.2rem;
        line-height:1.1;
    }

    .care-badge,
    .care-section-tag{
        font-size:.69rem;
    }

    .care-buttons{
        flex-direction:column;
        width:100%;
    }

    .care-buttons .btn{
        width:100%;
    }

    .care-card{
        padding:20px;
    }

    .care-card-header{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .care-grid{
        grid-template-columns:1fr;
    }

    .care-score{
        align-items:flex-start;
        flex-direction:column;
    }

    .care-mission .mission-card,
    .care-feature-card{
        padding:26px;
    }

    .service-book-content h2{
        font-size:2rem;
    }

    .service-dashboard{
        padding:20px;
    }

    .dashboard-header{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .timeline-item:not(:last-child)::after{
        height:55px;
    }

    .health-card{
        padding:24px;
    }

    .health-circle{
        width:190px;
        height:190px;
    }

    .health-inner{
        width:150px;
        height:150px;
    }

    .health-inner h1{
        font-size:2.7rem;
    }

    .network-card{
        padding:25px;
    }

    .network-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .care-faq-question{
        padding:21px 20px;
        font-size:.92rem;
    }

    .care-faq-answer{
        padding:0 20px 21px;
        font-size:.84rem;
    }

    .care-final-cta h2{
        font-size:2rem;
    }

    .care-final-cta p{
        font-size:.94rem;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-buttons .btn{
        width:100%;
    }

}


/*=========================================================
                REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce){

    .care-hero *,
    .care-mission *,
    .care-features *,
    .service-book *,
    .maintenance-section *,
    .health-score *,
    .service-network *,
    .care-faq *,
    .care-final-cta *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}