/* =========================================================
   CARANDCAB — HOW IT WORKS
   Premium Journey / Rental Process Page
========================================================= */

.ccHowPage{
    --cc-how-teal:#0F766E;
    --cc-how-teal-dark:#073B3A;
    --cc-how-teal-deep:#062F2E;

    --cc-how-text:#102F2C;
    --cc-how-muted:#657773;

    --cc-how-soft:#F7F9F8;
    --cc-how-border:#E3EBE8;

    background:#FFFFFF;
    color:var(--cc-how-text);
}


/* =========================================================
   CONTAINER
========================================================= */

.ccHowContainer{
    width:min(calc(100% - 48px),1240px);
    margin:0 auto;
}


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

.ccHowHero{
    background:
        linear-gradient(
            180deg,
            #F7FAF9 0%,
            #FFFFFF 100%
        );

    padding:72px 0 78px;

    border-bottom:1px solid var(--cc-how-border);
}


.ccHowHeroGrid{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(420px,.85fr);

    align-items:center;

    gap:90px;
}


.ccHowEyebrow{
    display:block;

    margin-bottom:12px;

    color:var(--cc-how-teal);

    font-size:11px;
    font-weight:800;

    letter-spacing:.14em;
}


.ccHowHeroContent h1{
    max-width:670px;

    margin:0;

    font-size:
        clamp(42px,5vw,68px);

    line-height:1.02;

    letter-spacing:-.055em;

    font-weight:720;
}


.ccHowHeroContent h1 span{
    color:var(--cc-how-teal);
}


.ccHowHeroContent > p{
    max-width:570px;

    margin:25px 0 0;

    color:var(--cc-how-muted);

    font-size:17px;

    line-height:1.7;
}


.ccHowHeroActions{
    display:flex;

    align-items:center;

    gap:13px;

    margin-top:32px;
}


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

.ccHowPrimaryButton,
.ccHowSecondaryButton{
    min-height:48px;

    display:inline-flex;

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

    gap:10px;

    padding:0 20px;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;

    font-weight:750;

    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.ccHowPrimaryButton{
    background:var(--cc-how-teal);

    color:#FFFFFF;
}


.ccHowPrimaryButton:hover{
    background:var(--cc-how-teal-dark);

    color:#FFFFFF;

    transform:translateY(-1px);
}


.ccHowSecondaryButton{
    border:1px solid #D7E2DF;

    background:#FFFFFF;

    color:#294440;
}


.ccHowSecondaryButton:hover{
    border-color:#B6CCC8;

    color:var(--cc-how-teal);
}


/* =========================================================
   JOURNEY CARD
========================================================= */

.ccHowHeroVisual{
    display:flex;

    justify-content:flex-end;
}


.ccHowJourneyCard{
    width:100%;

    max-width:470px;

    padding:24px;

    border:1px solid rgba(7,59,58,.12);

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 25px 70px rgba(7,59,58,.10);
}


.ccHowJourneyTop{
    display:flex;

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

    gap:20px;

    padding-bottom:20px;

    border-bottom:1px solid var(--cc-how-border);
}


.ccHowJourneyTop > span:first-child{
    color:#38524E;

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;
}


.ccHowJourneyStatus{
    color:var(--cc-how-teal);

    font-size:11px;

    font-weight:700;
}


.ccHowJourneyStep{
    position:relative;

    display:grid;

    grid-template-columns:38px 1fr 18px;

    align-items:center;

    gap:13px;

    padding:17px 0;
}


.ccHowJourneyStep + .ccHowJourneyStep{
    border-top:1px solid #EDF1F0;
}


.ccHowStepNumber{
    width:34px;

    height:34px;

    display:inline-flex;

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

    border-radius:50%;

    background:#F1F6F5;

    color:#6A7C78;

    font-size:10px;

    font-weight:800;

    transition:
        background-color .2s ease,
        color .2s ease;
}


/* FIXED ACTIVE STATE */

.ccHowJourneyStep.is-active .ccHowStepNumber{
    background:#E3F1EF;

    color:var(--cc-how-teal);
}


.ccHowJourneyStep strong{
    display:block;

    color:#1B3532;

    font-size:13px;

    font-weight:700;
}


.ccHowJourneyStep small{
    display:block;

    margin-top:3px;

    color:#82908D;

    font-size:11px;
}


.ccHowJourneyStep > i{
    color:var(--cc-how-teal);

    font-size:11px;
}


.ccHowJourneyBottom{
    display:flex;

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

    margin-top:7px;

    padding-top:18px;

    border-top:1px solid var(--cc-how-border);

    color:var(--cc-how-teal);

    font-size:11px;

    font-weight:750;
}


/* =========================================================
   INTRO
========================================================= */

.ccHowIntro{
    padding:90px 0 96px;
}


.ccHowSectionHeading{
    max-width:720px;

    margin-bottom:48px;
}


.ccHowSectionHeading h2,
.ccHowSplitHeading h2,
.ccHowDriveContent h2,
.ccHowFinalInner h2{
    margin:0;

    font-size:
        clamp(30px,4vw,46px);

    line-height:1.08;

    letter-spacing:-.04em;

    font-weight:700;
}


.ccHowSectionHeading p{
    margin:16px 0 0;

    color:var(--cc-how-muted);

    font-size:15px;

    line-height:1.7;
}


/* =========================================================
   STEP CARDS
========================================================= */

.ccHowStepsGrid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:16px;
}


.ccHowStepCard{
    min-height:255px;

    padding:25px;

    border:1px solid var(--cc-how-border);

    border-radius:12px;

    background:#FFFFFF;

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


.ccHowStepCard:hover{
    border-color:#C5D8D4;

    transform:translateY(-2px);

    box-shadow:
        0 14px 35px rgba(15,118,110,.07);
}


.ccHowCardTop{
    display:flex;

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

    margin-bottom:35px;
}


.ccHowLargeNumber{
    color:#A0AFAC;

    font-size:12px;

    font-weight:800;

    letter-spacing:.08em;
}


.ccHowCardTop i{
    color:var(--cc-how-teal);

    font-size:18px;
}


.ccHowStepCard h3{
    margin:0;

    color:#173330;

    font-size:18px;

    font-weight:700;
}


.ccHowStepCard p{
    max-width:310px;

    margin:10px 0 0;

    color:var(--cc-how-muted);

    font-size:13px;

    line-height:1.65;
}


.ccHowStepCard a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:18px;

    color:var(--cc-how-teal);

    text-decoration:none;

    font-size:12px;

    font-weight:750;
}


.ccHowStepCard a i{
    font-size:9px;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.ccHowRequirements{
    background:var(--cc-how-soft);

    padding:82px 0 88px;

    border-top:1px solid var(--cc-how-border);

    border-bottom:1px solid var(--cc-how-border);
}


.ccHowSplitHeading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.7fr);

    gap:70px;

    align-items:end;

    margin-bottom:45px;
}


.ccHowSplitHeading > p{
    margin:0;

    color:var(--cc-how-muted);

    font-size:14px;

    line-height:1.7;
}


.ccHowRequirementGrid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:1px;

    background:var(--cc-how-border);

    border:1px solid var(--cc-how-border);
}


.ccHowRequirement{
    display:grid;

    grid-template-columns:46px 1fr;

    gap:17px;

    padding:27px;

    background:#FFFFFF;
}


.ccHowRequirementIcon{
    width:42px;

    height:42px;

    display:inline-flex;

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

    border-radius:9px;

    background:#EDF5F3;

    color:var(--cc-how-teal);
}


.ccHowRequirement h3{
    margin:0;

    color:#183531;

    font-size:15px;

    font-weight:700;
}


.ccHowRequirement p{
    margin:6px 0 0;

    color:var(--cc-how-muted);

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   DRIVE SECTION
========================================================= */

.ccHowDrive{
    padding:94px 0;
}


.ccHowDriveGrid{
    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    gap:100px;

    align-items:start;
}


.ccHowDriveContent > p{
    max-width:480px;

    margin:18px 0 25px;

    color:var(--cc-how-muted);

    font-size:15px;

    line-height:1.7;
}


.ccHowDriveList{
    border-top:1px solid var(--cc-how-border);
}


.ccHowDriveList > div{
    display:grid;

    grid-template-columns:
        38px 180px 1fr;

    gap:20px;

    align-items:center;

    padding:21px 0;

    border-bottom:1px solid var(--cc-how-border);
}


.ccHowDriveList span{
    color:#9AA9A6;

    font-size:10px;

    font-weight:800;
}


.ccHowDriveList strong{
    color:#1B3532;

    font-size:13px;
}


.ccHowDriveList p{
    margin:0;

    color:var(--cc-how-muted);

    font-size:12px;

    line-height:1.5;
}


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

.ccHowFinalCTA{
    padding:30px 0 70px;
}


.ccHowFinalInner{
    display:flex;

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

    gap:50px;

    padding:54px 58px;

    border-radius:16px;

    background:var(--cc-how-teal-dark);

    color:#FFFFFF;
}


.ccHowFinalInner .ccHowEyebrow{
    color:#91C7C2;
}


.ccHowFinalInner h2{
    max-width:680px;

    color:#FFFFFF;
}


.ccHowFinalInner p{
    margin:13px 0 0;

    color:#B7D0CD;

    font-size:14px;
}


.ccHowFinalButton{
    flex:0 0 auto;

    min-height:50px;

    display:inline-flex;

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

    gap:10px;

    padding:0 22px;

    border-radius:8px;

    background:#FFFFFF;

    color:var(--cc-how-teal-dark);

    text-decoration:none;

    font-size:13px;

    font-weight:750;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.ccHowFinalButton:hover{
    background:#EAF4F2;

    color:var(--cc-how-teal-dark);

    transform:translateY(-1px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .ccHowHeroGrid{
        grid-template-columns:1fr;

        gap:55px;
    }


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


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


    .ccHowDriveGrid{
        grid-template-columns:1fr;

        gap:55px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .ccHowContainer{
        width:min(
            calc(100% - 32px),
            1240px
        );
    }


    .ccHowHero{
        padding:48px 0 55px;
    }


    .ccHowHeroContent h1{
        font-size:42px;
    }


    .ccHowHeroContent > p{
        font-size:14px;
    }


    .ccHowHeroActions{
        flex-direction:column;

        align-items:stretch;
    }


    .ccHowPrimaryButton,
    .ccHowSecondaryButton{
        width:100%;
    }


    .ccHowJourneyCard{
        padding:19px;

        border-radius:13px;
    }


    .ccHowIntro{
        padding:62px 0 66px;
    }


    .ccHowSectionHeading{
        margin-bottom:32px;
    }


    .ccHowStepsGrid{
        grid-template-columns:1fr;

        gap:10px;
    }


    .ccHowStepCard{
        min-height:0;

        padding:21px;
    }


    .ccHowCardTop{
        margin-bottom:27px;
    }


    .ccHowRequirements{
        padding:60px 0 65px;
    }


    .ccHowSplitHeading{
        display:block;

        margin-bottom:30px;
    }


    .ccHowSplitHeading > p{
        margin-top:14px;
    }


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


    .ccHowRequirement{
        padding:21px;
    }


    .ccHowDrive{
        padding:67px 0;
    }


    .ccHowDriveGrid{
        gap:40px;
    }


    .ccHowDriveList > div{
        grid-template-columns:
            30px 1fr;

        gap:12px;

        align-items:start;
    }


    .ccHowDriveList strong{
        display:block;
    }


    .ccHowDriveList p{
        grid-column:2;

        margin-top:-6px;
    }


    .ccHowFinalCTA{
        padding:10px 0 50px;
    }


    .ccHowFinalInner{
        display:block;

        padding:38px 24px;

        border-radius:13px;
    }


    .ccHowFinalButton{
        width:100%;

        margin-top:25px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ccHowPage a:focus-visible{
    outline:
        2px solid
        var(--cc-how-teal);

    outline-offset:3px;
}


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

    .ccHowPage *,
    .ccHowPage *::before,
    .ccHowPage *::after{
        animation:none !important;

        transition:none !important;
    }
}