.care-page{
    --petrol:#163A43;
    --petrol2:#214D57;
    --sage:#9AB7A7;
    --sage-soft:#EDF3EF;
    --gold:#C6A667;
    --ivory:#FAF9F6;
    --ink:#202526;
    --muted:#667276;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Nunito',sans-serif;
}

.care-shell{
    width:min(1160px,calc(100% - 40px));
    margin:0 auto;
}

.care-hero{
    padding:78px 0 72px;
    background:
        radial-gradient(circle at 88% 12%,rgba(154,183,167,.25),transparent 30%),
        linear-gradient(135deg,#fdfcf9,#f1f5f2);
    border-bottom:1px solid rgba(22,58,67,.08);
}

.care-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
    gap:60px;
    align-items:center;
}

.care-kicker{
    display:inline-block;
    margin-bottom:14px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    color:var(--gold);
}

.care-hero h1{
    margin:0;
    max-width:780px;
    color:var(--petrol);
    font-size:clamp(42px,5vw,68px);
    line-height:1.03;
    letter-spacing:-.035em;
}

.care-lead{
    max-width:730px;
    margin:24px 0 0;
    color:#556468;
    font-size:18px;
    line-height:1.75;
}

.care-actions,
.care-final-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}

.care-primary,
.care-secondary{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:0 23px;
    border-radius:999px;
    font-weight:900;
    text-decoration:none;
    transition:.2s ease;
}

.care-primary{
    color:white;
    background:var(--petrol);
}

.care-primary:hover{
    color:white;
    background:var(--petrol2);
    transform:translateY(-2px);
}

.care-secondary{
    color:var(--petrol);
    border:1px solid rgba(22,58,67,.16);
    background:rgba(255,255,255,.7);
}

.care-secondary:hover{
    color:var(--petrol);
    background:white;
}

.care-hero-card{
    padding:30px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:25px;
    background:rgba(255,255,255,.84);
    box-shadow:0 18px 48px rgba(22,58,67,.08);
}

.care-card-label{
    display:block;
    margin-bottom:20px;
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
}

.care-step-mini{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:14px;
    align-items:center;
    padding:14px 0;
    border-top:1px solid rgba(22,58,67,.08);
}

.care-step-mini span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--sage-soft);
    color:var(--petrol);
    font-size:12px;
    font-weight:900;
}

.care-step-mini p{
    margin:0;
    color:#526267;
    line-height:1.5;
}

.care-nav{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    padding:30px 0 4px;
}

.care-nav a{
    padding:9px 14px;
    border:1px solid rgba(22,58,67,.10);
    border-radius:999px;
    background:white;
    color:var(--petrol);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.care-section{
    padding:68px 0 10px;
}

.care-heading{
    display:flex;
    gap:18px;
    align-items:flex-start;
    margin-bottom:28px;
}

.care-number{
    display:grid;
    flex:0 0 auto;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--petrol);
    color:white;
    font-size:12px;
    font-weight:900;
}

.care-heading h2{
    margin:0;
    color:var(--petrol);
    font-size:clamp(29px,4vw,43px);
    line-height:1.12;
    letter-spacing:-.025em;
}

.care-grid{
    display:grid;
    gap:18px;
}

.care-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.care-grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.care-card{
    padding:25px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:20px;
    background:white;
    box-shadow:0 10px 30px rgba(22,58,67,.045);
}

.care-card h3{
    margin:0 0 10px;
    color:var(--petrol);
    font-size:19px;
}

.care-card p{
    margin:0;
    color:var(--muted);
    line-height:1.68;
}

.care-process{
    display:grid;
    gap:12px;
}

.care-process-item{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:18px;
    align-items:start;
    padding:21px 23px;
    border:1px solid rgba(22,58,67,.08);
    border-radius:18px;
    background:white;
}

.care-process-item > span{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:15px;
    background:var(--sage-soft);
    color:var(--petrol);
    font-weight:900;
}

.care-process-item h3{
    margin:1px 0 6px;
    color:var(--petrol);
}

.care-process-item p{
    margin:0;
    color:var(--muted);
    line-height:1.65;
}

.care-tip,
.care-warning{
    margin-top:20px;
    padding:23px 25px;
    border-radius:18px;
}

.care-tip{
    border-left:4px solid var(--sage);
    background:#f0f5f2;
}

.care-warning{
    border-left:4px solid var(--gold);
    background:#f7f2e7;
}

.care-tip strong,
.care-warning strong{
    display:block;
    margin-bottom:7px;
    color:var(--petrol);
}

.care-tip p,
.care-warning p{
    margin:0;
    color:#5c696c;
    line-height:1.65;
}

.care-table-wrap{
    overflow-x:auto;
    border:1px solid rgba(22,58,67,.09);
    border-radius:20px;
    background:white;
}

.care-table{
    width:100%;
    border-collapse:collapse;
}

.care-table th,
.care-table td{
    padding:17px 20px;
    text-align:left;
    border-bottom:1px solid rgba(22,58,67,.07);
}

.care-table th{
    color:var(--petrol);
    background:#f0f4f1;
    font-size:13px;
    letter-spacing:.04em;
}

.care-table td{
    color:#5f6c70;
}

.care-do-dont{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.care-do,
.care-dont{
    padding:27px;
    border-radius:20px;
}

.care-do{
    background:#edf4ef;
    border:1px solid rgba(154,183,167,.40);
}

.care-dont{
    background:#f7f0eb;
    border:1px solid rgba(198,166,103,.32);
}

.care-do > span,
.care-dont > span{
    display:block;
    margin-bottom:15px;
    color:var(--petrol);
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
}

.care-do ul,
.care-dont ul{
    margin:0;
    padding-left:20px;
    color:#5c686b;
}

.care-do li,
.care-dont li{
    margin:9px 0;
    line-height:1.5;
}

.care-final{
    margin:76px 0;
    padding:44px;
    border-radius:28px;
    background:var(--petrol);
    text-align:center;
}

.care-final h2{
    max-width:760px;
    margin:0 auto;
    color:white;
    font-size:clamp(30px,4vw,44px);
}

.care-final p{
    max-width:720px;
    margin:16px auto 0;
    color:rgba(255,255,255,.75);
    line-height:1.7;
}

.care-final-actions{
    justify-content:center;
}

.care-final .care-primary{
    background:white;
    color:var(--petrol);
}

.care-final .care-secondary{
    color:white;
    border-color:rgba(255,255,255,.28);
    background:transparent;
}

.care-final .care-secondary:hover{
    color:var(--petrol);
    background:white;
}


.care-visual-intro{
    padding:46px 0 4px;
}

.care-photo-card{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    overflow:hidden;
    border:1px solid rgba(22,58,67,.09);
    border-radius:26px;
    background:white;
    box-shadow:0 16px 42px rgba(22,58,67,.055);
}

.care-photo-card img,
.care-photo-placeholder{
    width:100%;
    min-height:330px;
    height:100%;
    object-fit:cover;
    display:block;
    background:#eaf0ec;
}

.care-photo-caption{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:38px;
}

.care-photo-caption h2{
    margin:0;
    color:var(--petrol);
    font-size:clamp(28px,3.5vw,40px);
    line-height:1.12;
    letter-spacing:-.025em;
}

.care-photo-caption p{
    margin:16px 0 0;
    color:var(--muted);
    line-height:1.7;
}

.care-visual-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:18px;
}

.care-visual-card{
    padding:24px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:20px;
    background:white;
}

.care-visual-card h3{
    margin:18px 0 8px;
    color:var(--petrol);
    font-size:18px;
}

.care-visual-card p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.care-diagram{
    position:relative;
    height:100px;
    overflow:hidden;
    border-radius:16px;
    background:linear-gradient(135deg,#eef4f0,#f8f6f1);
}

.care-diagram.cleaning .rod{
    position:absolute;
    width:67%;
    height:8px;
    left:17%;
    top:48%;
    border-radius:10px;
    background:linear-gradient(90deg,#7c9295,#cfdad8,#7a9092);
    transform:rotate(-12deg);
}

.care-diagram.cleaning .cloth{
    position:absolute;
    width:42px;
    height:34px;
    right:18%;
    top:30%;
    border-radius:8px 14px 8px 14px;
    background:rgba(154,183,167,.65);
    transform:rotate(18deg);
}

.care-diagram.keys .key-line{
    position:absolute;
    left:13%;
    right:13%;
    top:48%;
    height:8px;
    border-radius:10px;
    background:#7b9194;
}

.care-diagram.keys .ck{
    position:absolute;
    top:31%;
    width:30px;
    height:30px;
    border:4px solid var(--petrol);
    border-radius:50%;
    background:#f8f7f3;
}

.care-diagram.keys .ck1{left:22%}
.care-diagram.keys .ck2{left:45%}
.care-diagram.keys .ck3{left:68%}

.care-diagram.case .case-box{
    position:absolute;
    left:13%;
    right:13%;
    top:21%;
    bottom:21%;
    border:3px solid var(--petrol);
    border-radius:14px;
    background:#f7f4ec;
}

.care-diagram.case .case-flute{
    position:absolute;
    left:24%;
    right:24%;
    top:47%;
    height:7px;
    border-radius:10px;
    background:linear-gradient(90deg,#789093,#d7e1df,#738b8e);
}

.care-photo-placeholder{
    position:relative;
}

.care-photo-placeholder span{
    position:absolute;
    top:47%;
    height:18px;
    border-radius:12px;
    background:linear-gradient(180deg,#f9fbfa,#aabcbc,#667f82);
}

.cpf-head{left:9%;width:24%}
.cpf-body{left:36%;width:42%}
.cpf-foot{left:80%;width:12%}


.care-clean-guide{
    margin-top:34px;
    padding:34px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:26px;
    background:linear-gradient(135deg,#f7faf8,#f3f0e8);
}

.care-clean-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

.care-clean-head h2{
    margin:0;
    color:var(--petrol);
    font-size:clamp(29px,4vw,42px);
    line-height:1.12;
    letter-spacing:-.025em;
}

.care-clean-head p{
    max-width:690px;
    margin:12px 0 0;
    color:var(--muted);
    line-height:1.65;
}

.care-clean-time{
    flex:0 0 auto;
    padding:9px 14px;
    border-radius:999px;
    background:white;
    color:var(--petrol);
    border:1px solid rgba(22,58,67,.10);
    font-size:13px;
    font-weight:900;
}

.care-clean-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.care-clean-step{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
    padding:19px;
    border-radius:18px;
    background:white;
    border:1px solid rgba(22,58,67,.08);
}

.care-clean-visual{
    position:relative;
    height:96px;
    overflow:hidden;
    border-radius:15px;
    background:#eef3ef;
}

.care-clean-num{
    display:block;
    margin-bottom:6px;
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.care-clean-copy h3{
    margin:0 0 7px;
    color:var(--petrol);
    font-size:18px;
}

.care-clean-copy p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:14.5px;
}

.visual-disassemble .part{
    position:absolute;
    top:45%;
    height:10px;
    border-radius:8px;
    background:linear-gradient(90deg,#70898c,#dbe4e2,#6c8588);
}
.visual-disassemble .p1{left:8%;width:23%}
.visual-disassemble .p2{left:37%;width:37%}
.visual-disassemble .p3{left:80%;width:13%}

.visual-swab .swab-rod{
    position:absolute;
    left:16%;
    top:48%;
    width:66%;
    height:7px;
    border-radius:8px;
    background:#728a8d;
    transform:rotate(-12deg);
}
.visual-swab .swab-cloth{
    position:absolute;
    right:18%;
    top:30%;
    width:34px;
    height:31px;
    border-radius:8px 13px 8px 13px;
    background:rgba(154,183,167,.72);
    transform:rotate(16deg);
}

.visual-body .body-tube{
    position:absolute;
    left:12%;
    right:12%;
    top:47%;
    height:11px;
    border-radius:8px;
    background:linear-gradient(90deg,#72898c,#dce5e3,#6f878a);
}
.visual-body .body-shine{
    position:absolute;
    width:3px;
    background:var(--gold);
    transform:rotate(45deg);
}
.visual-body .bs1{height:19px;right:25%;top:22%}
.visual-body .bs2{height:13px;right:17%;top:31%}

.visual-case .vc-case{
    position:absolute;
    left:12%;
    right:12%;
    top:22%;
    bottom:22%;
    border:3px solid var(--petrol);
    border-radius:13px;
    background:#f7f4ec;
}
.visual-case .vc-flute{
    position:absolute;
    left:23%;
    right:23%;
    top:47%;
    height:6px;
    border-radius:8px;
    background:linear-gradient(90deg,#748b8e,#d8e2df,#71898c);
}

.care-clean-rule{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:20px;
    padding:14px 18px;
    border-radius:14px;
    background:var(--petrol);
    color:white;
    text-align:center;
}

.care-clean-rule strong{
    color:#ead6a8;
}


.care-section-lead{
    max-width:760px;
    margin:-10px 0 26px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.care-troubles-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.care-trouble-card{
    display:flex;
    flex-direction:column;
    padding:24px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:20px;
    background:white;
    box-shadow:0 10px 30px rgba(22,58,67,.04);
}

.care-trouble-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}

.care-trouble-tag{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.care-trouble-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--sage-soft);
    color:var(--petrol);
    font-size:11px;
    font-weight:900;
}

.care-trouble-card h3{
    margin:0 0 12px;
    color:var(--petrol);
    font-size:20px;
    line-height:1.25;
}

.care-trouble-card p{
    color:var(--muted);
    line-height:1.62;
}

.care-trouble-symptom{
    margin:0 0 16px;
}

.care-trouble-action{
    margin-top:auto;
    padding:16px;
    border-radius:14px;
    background:#f3f7f4;
}

.care-trouble-action strong{
    display:block;
    margin-bottom:6px;
    color:var(--petrol);
    font-size:13px;
}

.care-trouble-action p{
    margin:0;
    font-size:14.5px;
}

.care-trouble-tech{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(22,58,67,.08);
    color:#7a6750;
    font-size:13.5px;
    line-height:1.5;
}

.care-decision-box{
    display:grid;
    grid-template-columns:1fr 72px;
    gap:26px;
    align-items:center;
    margin-top:22px;
    padding:27px;
    border-radius:20px;
    background:var(--petrol);
}

.care-decision-box h3{
    margin:0;
    color:white;
    font-size:24px;
}

.care-decision-box p{
    max-width:760px;
    margin:9px 0 0;
    color:rgba(255,255,255,.74);
    line-height:1.65;
}

.care-decision-mark{
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    color:#ead6a8;
    font-size:31px;
    font-weight:900;
}


.care-calendar-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.care-calendar-card{
    padding:25px;
    border:1px solid rgba(22,58,67,.09);
    border-radius:20px;
    background:white;
    box-shadow:0 10px 30px rgba(22,58,67,.04);
}

.care-calendar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.care-calendar-period{
    color:var(--gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.care-calendar-badge{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--sage-soft);
    color:var(--petrol);
    font-size:11px;
    font-weight:900;
}

.care-calendar-card h3{
    margin:0 0 14px;
    color:var(--petrol);
    font-size:21px;
}

.care-calendar-card ul{
    margin:0;
    padding-left:19px;
    color:var(--muted);
}

.care-calendar-card li{
    margin:9px 0;
    line-height:1.55;
}

.care-calendar-note{
    margin-top:20px;
    padding:22px 24px;
    border-left:4px solid var(--gold);
    border-radius:16px;
    background:#f7f2e8;
}

.care-calendar-note strong{
    display:block;
    margin-bottom:7px;
    color:var(--petrol);
}

.care-calendar-note p{
    margin:0;
    color:#667276;
    line-height:1.65;
}

.care-checklist{
    display:grid;
    grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
    gap:28px;
    align-items:center;
    margin-top:20px;
    padding:26px;
    border-radius:20px;
    background:var(--petrol);
}

.care-checklist h3{
    margin:0;
    color:white;
    font-size:24px;
}

.care-check-items{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.care-check-items span{
    position:relative;
    padding:12px 14px 12px 38px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    color:white;
    font-size:14px;
    font-weight:700;
}

.care-check-items span:before{
    content:"✓";
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#ead6a8;
    font-weight:900;
}

@media(max-width:900px){
    .care-calendar-grid{
        grid-template-columns:1fr;
    }

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

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

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

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

    .care-photo-card img,
    .care-photo-placeholder{
        min-height:270px;
    }
}


@media(max-width:900px){
    .care-clean-steps{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

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

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


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

    .care-decision-mark{
        display:none;
    }


    .care-clean-guide{
        padding:24px 18px;
    }

    .care-clean-head{
        flex-direction:column;
    }

    .care-clean-step{
        grid-template-columns:92px 1fr;
    }

    .care-clean-rule{
        flex-direction:column;
    }

    .care-shell{
        width:min(100% - 28px,1160px);
    }

    .care-hero{
        padding:54px 0 50px;
    }

    .care-hero h1{
        font-size:42px;
    }

    .care-lead{
        font-size:16px;
    }

    .care-grid.two,
    .care-do-dont{
        grid-template-columns:1fr;
    }

    .care-section{
        padding-top:54px;
    }

    .care-heading{
        gap:13px;
    }

    .care-process-item{
        grid-template-columns:48px 1fr;
        padding:18px;
    }

    .care-final{
        margin:56px 0;
        padding:32px 22px;
    }
}