:root{
    --accent:#01a385;
}






.heroContainer {display:grid; grid-template-columns: 0.8fr 1.2fr; gap:20px; align-items: center; position:relative; padding:30px 0;}
.heroContainer .strap {color:#666; font-size:18px; font-weight:600;}

.heroContainer .bens {display:flex; align-items: center; gap:30px; color:#666; font-size:12px; font-weight:600; margin-top:20px;}
.heroContainer .bens [data-icon]::before {width:18px; height:18px;}

.heroContainer .actions {display:flex; align-items: center; gap:10px; margin-top:20px;}
.heroContainer .actions img {display:block;}

.trustedSources {background:#eff4f7; padding:30px; border-radius:10px; text-align:center;}
.sources {display:inline-flex; flex-wrap: wrap; gap:10px 40px; justify-content:center; align-items:center;}
.sources img {max-width:150px; max-height:20px;}
.sources img.mh {max-height:25px;}
.sources .loop {display:none;}

.featuresContainer {max-width:1024px; margin:30px auto 0; text-align:center;}
#features {scroll-margin-top:140px;}
.features {display:grid; gap:8px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.features .card {text-align:center; position:relative; font-size:12px; color:#666; font-weight:600;}
.features .card h3 {margin-bottom:5px;}
.features .card:after {content:''; height:32px; width:32px; background:#0f8b72;position: absolute; top:27px; left:50%; transform:translate(-50%,0);}
.features .card.home:after {mask:url('/assets/images/report/home.svg') no-repeat center/contain;}
.features .card.bounds:after {mask:url('/assets/images/report/activity_zone.svg') no-repeat center/contain;}
.features .card.energy:after {mask:url('/assets/images/report/eco.svg') no-repeat center/contain;}
.features .card.legal:after {mask:url('/assets/images/report/balance.svg') no-repeat center/contain;}
.features .card.paid:after {mask:url('/assets/images/report/chart_data.svg') no-repeat center/contain;}
.features .card.ons:after {mask:url('/assets/images/report/bar_chart.svg') no-repeat center/contain;}
.features .card.local:after {mask:url('/assets/images/report/home_pin.svg') no-repeat center/contain;}
.features .card.transport:after {mask:url('/assets/images/report/train.svg') no-repeat center/contain;}
.features .card.school:after {mask:url('/assets/images/report/school.svg') no-repeat center/contain;}
.features .card.connect:after {mask:url('/assets/images/report/network_check.svg') no-repeat center/contain;}
.features .card.council:after {mask:url('/assets/images/report/account_balance.svg') no-repeat center/contain;}
.features .card.brand:after {mask:url('/assets/images/palette.svg') no-repeat center/contain;}
.features .card:before {content:''; height:46px; width:46px; background:#e7faf6;  display:inline-flex; border-radius:50%;}


.howItWorks {margin-top:30px;}
.howItWorks .steps {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:30px; position:relative;}
.howItWorks .steps .card {position:relative;}
.howItWorks .steps .card .text:before {position:absolute; top:0; right:10px; font-size:88px; line-height:1; font-weight:bold; color:#e7faf6;}    
.howItWorks .steps .card:nth-of-type(1) .text::before {content:'01';}    
.howItWorks .steps .card:nth-of-type(2) .text::before {content:'02';}    
.howItWorks .steps .card:nth-of-type(3) .text::before {content:'03';}   
.howItWorks .icon {background: #e7faf6; padding:10px; border-radius:50%; display:inline-flex; margin-bottom:20px;} 
.howItWorks .icon [data-icon]:before {background: #0f8b72;} 
.howItWorks h3 {margin-bottom:5px;} 
.howItWorks :not(.howItWorks .head) p {max-width:60%;} 
.howItWorks .searchBar {border: 1px solid #dce6ee; border-radius:8px; padding:10px; display:flex; align-items: center; gap:10px; font-size:18px; margin-top:100px;}
.howItWorks .searchBar [data-icon=search]:before {background: #000;} 
.howItWorks .searchBar .tick {background: #0f8b72; border-radius:50%; display:inline-flex; margin-left:auto;} 
.howItWorks .searchBar .tick [data-icon]:before {background: #fff; width:18px; height:18px;} 
.howItWorks .percentBar {display:flex; align-items: center; gap:10px; text-align:right;}
.howItWorks .percentBar:before {content:''; background: #0f8b72; height:10px; border-radius:10px; width:calc(100% - 30px);}
.howItWorks .steps .bens {
    display:flex; align-items: center; justify-content: space-between; color:#666; font-size:10px; font-weight:600; margin-top:30px; 
    color: #0f8b72; padding:5px 8px; border-radius:6px;background: #e7faf6;
}

.howItWorks .bens [data-icon]::before {width:18px; height:18px;}
.howItWorks .reportBtns {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; margin-top:20px;}
.howItWorks .reportBtns .btn {border: 1px solid #dce6ee; padding:7px 10px; font-size:10px; justify-content: center;}
.howItWorks .reportBtns .btn:before {width:18px; height:18px;}
.howItWorks .nextStep {position:absolute; z-index:1; display:inline-flex; transform: translate(0,-50%); top:50%; background:#fff; padding:10px; border-radius:50%;border: 1px solid #dce6ee; }
.howItWorks .nextStep.one {right:-39px;}
.howItWorks .nextStep.two {right:-39px;}
.howItWorks .nextStep [data-icon]:before {background:#000;}
.howItWorks .signup {max-width:1024px; margin:30px auto 0; text-align:center;}
.howItWorks .signup h2 {font-size:22px;}
.howItWorks .signup .bens {margin-top:20px; display:flex; gap:30px; align-items: center; justify-content: center;}



.whyKeyFacts {margin-top:50px; padding:20px; border-radius: 20px;}
.whyKeyFacts .card {border-radius:15px; background:#fff; border: 1px solid #c3e6de; margin-bottom:10px; display:grid; grid-template-columns: 1fr 1fr; padding:20px 50px;}
.whyKeyFacts > .card:nth-of-type(odd) {background: #ebf9f6;}

.whyKeyFacts .card .valuation {background:url('/assets/images/website/valuation.webp') no-repeat center center; background-size:auto 100%;}
.whyKeyFacts .card .appointment {
   position:relative; margin:10px auto 0; width: 200px; padding: 10px; border-radius: 10px; background:#fff; border: 1px solid #dce6ee;box-shadow: 0 8px 24px rgba(15, 35, 55, 0.06);
}
.whyKeyFacts .card .appointment [data-icon=schedule] {border-top:1px solid #dce6ee; border-bottom:1px solid #dce6ee; padding:3px 0; width:100%; font-weight:600; margin-bottom:10px;}
.whyKeyFacts .card .appointment [data-icon=check_circle] {font-size:12px;}
.whyKeyFacts .card .appointment [data-icon=check_circle]:before {width:18px; height:18px;}
.whyKeyFacts .card .appointment [data-icon=calendar_month] {color:var(--accent); font-weight:600;}
.whyKeyFacts .card .appointment .badge {
    position:absolute; top:0; right:-50px; border-radius:50%; padding:10px; height:100px; width:100px; background:#ebf9f6; font-size:12px; text-align: center; font-weight: 600;
    border: 1px solid #dce6ee;box-shadow: 0 8px 24px rgba(15, 35, 55, 0.06); display: flex; align-items: center; flex-direction: column;
}
.whyKeyFacts .card .appointment .badge [data-icon=check]:before {width:32px; height:32px;}

.whyKeyFacts .card .content {display:flex; font-size:16px;}
.whyKeyFacts .card .content.second {margin-right:30px;}
.whyKeyFacts .card .content:before {font-size: 88px; line-height: 1; font-weight: bold; color: #e7faf6; margin-right:25px;}
.whyKeyFacts .card .content.first::before {content: '01';}
.whyKeyFacts .card .content.second::before {content: '02'; color: #ccebe4;}
.whyKeyFacts .card .content.third::before {content: '03';}

.whyKeyFacts .card .content .textContainer {align-self: center;color: #666;}
.whyKeyFacts .card .content .textContainer h3 {font-size:28px; color:#111827}
.whyKeyFacts .card .content .textContainer .strap {color:var(--accent); font-weight:600;}


.whyKeyFacts .card .searching {display:flex; justify-content: center;}

.whyKeyFacts .card .searching .searches, .whyKeyFacts .card .searching .keyfacts {
     font-size:12px; min-width:240px; font-weight:600;
    padding:10px 20px; border-radius: 10px; background:#fff; border: 1px solid #dce6ee;box-shadow: 0 8px 24px rgba(15, 35, 55, 0.06);
}





.whyKeyFacts .card .searching .searches .header {margin-bottom:10px;color: #666; font-size:16px;}
.whyKeyFacts .card .searching .searches .item {display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.whyKeyFacts .card .searching .searches .item img {width:16px; border-radius:50%;}
.whyKeyFacts .card .searching .searches .item::after {margin-left:auto; content:''; height:14px; width:14px; background:#666;mask:url('/assets/images/arrow_outward.svg') no-repeat center/contain;}

.whyKeyFacts .card .searching .searches [data-icon=schedule] {margin-top:10px; width:100%; justify-content: center;}
.whyKeyFacts .card .searching .searches [data-icon=schedule]:before {width:18px; height:18px;}

.whyKeyFacts .card .searching .keyfacts {text-align:center;}
.whyKeyFacts .card .searching .keyfacts .header {margin-bottom:10px;color: var(--accent); font-size:16px;}
.whyKeyFacts .card .searching .keyfacts img {max-width:130px;}
.whyKeyFacts .card .searching .keyfacts [data-icon=arrow_downward] {width:100%; justify-content: center;}
.whyKeyFacts .card .searching .keyfacts [data-icon=schedule] {color:var(--accent); font-size:14px;}

.whyKeyFacts .card .brandedReport {}
.whyKeyFacts .card .brandedReport img {position: relative; margin-top:-75px;}


.whyKeyFacts .card .ctaText {display:flex; align-items:center; gap:20px; justify-self:center;}
.whyKeyFacts .card .ctaText .icon {
    width:50px; height:50px; padding:10px; border: 1px solid #00c39f; background:#ccebe4; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex:0 0 50px;
}

.whyKeyFacts .card .ctaText p {margin-bottom: 0; color:#666}
.whyKeyFacts .card .ctaText .title {font-weight:600; color:#111827;}
.whyKeyFacts .card .ctaBtn a::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/chevron_right.svg') no-repeat center/contain;}


.faqContainer {margin-top:50px; display:grid; grid-template-columns: 1fr 1fr; gap:30px;padding:20px; }
.faqContainer .head {grid-column:1 / -1;}
.faq {border-radius:10px; text-align:left; padding:0;}
.faqQuestion:first-child {border-top: 0;}
.faqQuestion {
    cursor: pointer;user-select: none;padding: 0 20px;display: flex;align-items: center;justify-content: space-between;font-size:16px;font-weight: 500;
    border-top: 1px solid #dce6ee;
}
.faqQuestion span {padding:10px 0;}
.faqQuestion[data-arrow]:after {margin-left: 10px;content:''; height:24px; width:24px; background:#ccebe4;mask:url('/assets/images/chevron_down.svg') no-repeat center/contain;}
.faqQuestion[data-arrow=keyboard_arrow_up]:after {mask:url('/assets/images/chevron_up.svg') no-repeat center/contain;}
.faqAnswer {display: none;padding: 0 20px 10px 20px;}
.faqContact {display:flex; align-items: flex-start; padding:0 50px; font-size: 16px;;}
.faqContact > div {padding:20px; border-radius: 10px; border: 1px solid #c3e6de; background: #ebf9f6;}
.faqContact h3 {font-size:32px;}
.faqContact a::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/chevron_right.svg') no-repeat center/contain;}



.finalCTA {margin-top:30px; text-align: center;  color:#e7e7e7; padding:30px 20px; border-radius:20px; position:relative; background:#161e2f; z-index:1;}
.finalCTA::before, .finalCTA::after {content:''; position:absolute; top:0; bottom:0; width:330px;z-index:-1;border-radius:20px; background-size:cover;}
.finalCTA::before { left:0; background-image:url('/assets/images/website/ctabackground.webp'); }
.finalCTA::after { right:0; background-image:url('/assets/images/website/ctabackground.webp'); background-position: center right;}

.finalCTA .head .pill {background:transparent; font-size:16px; color:#00c39f}
.finalCTA .head h2 {color:#fff;}
.finalCTA .head .strap {color: #e7e7e7;}
.finalCTA .bens {display:flex; align-items: center; justify-content: center; gap:30px; color:#e7e7e7; font-size:12px; font-weight:600; margin-top:20px;}
.finalCTA .bens [data-icon]::before {width:18px; height:18px; background:#00c39f;}
.finalCTA .actions {display:flex; align-items: center; justify-content: center; gap:10px; margin-top:20px;}
.finalCTA .actions a {border:1px solid #00c39f; color:#fff; background:#161e2f;}
.finalCTA .actions a.prices::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/arrow_right_alt.svg') no-repeat center/contain;}
.finalCTA .actions a.primary {background:#00c39f; border-color:#00c39f;}
.finalCTA .actions a.primary::before {margin-right:10px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/gift.svg') no-repeat center/contain;}






@media(max-width:1280px) {
    h1 {font-size:36px;}

    .howItWorks .steps {grid-template-columns: 1fr; max-width:950px; margin:0 auto;}
    .howItWorks .steps .card {display:grid; grid-template-columns: 1fr 1fr; gap:10px 30px; align-items: center; padding:40px;}
    .howItWorks :not(.howItWorks .head) p {max-width:unset;}
    .howItWorks .nextStep {transform: translate(-50%,0); top:unset; bottom:-39px;}
    .howItWorks .nextStep.one {right:unset; left:50%;}
    .howItWorks .nextStep.two {right:unset; left:50%;}
    .howItWorks .nextStep [data-icon="arrow_right_alt"]::before {mask: url(/assets/images/arrow_downward.svg) no-repeat center / contain;}
    .howItWorks .searchBar {margin-top:0;}

    .howItWorks .steps .card .text:before {position:static; margin-bottom:20px;}
    .howItWorks .icon {margin:10px 0 20px 20px;}


    .howItWorks .steps .card .text {display:flex; align-items:center; flex-wrap: wrap; font-size:18px;}
    .howItWorks .steps .card .graphic {}
    .howItWorks .steps .card h3 {width:100%;}

    .howItWorks .steps .card .gathering {grid-column:1 / -1;}

    .howItWorks .signup {max-width:700px;}

}

@media(max-width:1280px) {
    .heroContainer .bens {gap:10px;}
}

@media(max-width:1100px) {


    .whyKeyFacts .card .content {flex-direction:column;}
    .whyKeyFacts .card .content.first, .whyKeyFacts .card .content.third {margin-left:30px;}
    .whyKeyFacts .card .brandedReport img {margin-top:0;}

    .faqContainer {gap:30px 10px;grid-template-columns:1.2fr 0.8fr;}
    .faqContact {padding:0 20px;}


  
}

@media(max-width:1045px) {
    h1 {font-size:48px;}
    .heroContainer {grid-template-columns: 1fr;}
    .whyKeyFacts .card {padding:20px;}
}

@media(max-width:980px) {
    .features {grid-template-columns: 1fr 1fr 1fr;}  
}


@media(max-width:880px) {
    .head .strap {font-size:16px;}
    .howItWorks .steps .card {grid-template-columns: 1fr; max-width: 600px; margin: 0 auto;}

    .whyKeyFacts {padding:0;}
    .whyKeyFacts .card .searching {display:flex; justify-content:center; align-items:stretch; gap:12px; width:100%;}
    .whyKeyFacts .card .searching .searches, .whyKeyFacts .card .searching .keyfacts {
        flex:1 1 0; min-width:0; max-width:240px; font-size:clamp(10px, 1.8vw, 12px);  padding:clamp(8px, 2vw, 10px) clamp(10px, 3vw, 20px);
    }
    .whyKeyFacts .card {grid-template-columns: 1fr; padding:35px;}
    .whyKeyFacts .card .content {max-width:500px; margin:0 auto 30px; flex-direction: row;}
    .whyKeyFacts .card .content.second {margin-right:auto;}
    .whyKeyFacts .card .content.first, .whyKeyFacts .card .content.third { order:1; margin-left:auto;}
    .whyKeyFacts .card .valuation {order:2;}
    .whyKeyFacts .card .brandedReport {max-width:500px; margin:0 auto; order:2;}
    .whyKeyFacts .ctaBtn { margin: 30px auto 0;}

    .faqContainer {gap:30px 10px;grid-template-columns:1fr;}
    .faqContact {padding:0;}
 
}




@media(max-width:720px) {
    .features {grid-template-columns: 1fr 1fr;}
}


@media(max-width:680px) {
    .whyKeyFacts .card {padding:20px;}
    .whyKeyFacts .card .content {max-width:400px; flex-direction: column;}
}



@media(max-width:550px) {
    h1 {font-size:clamp(38px, 4.2vw, 64px);}
    h2 {font-size:clamp(22px, 3vw, 32px);}
    .heroContainer {padding-top:10px;}
    .heroContainer .actions {flex-direction: column; align-items: flex-start;}
    .heroContainer .actions a {width:200px; justify-content: center;}
    .heroContainer .graphic {overflow:hidden; margin:0 -10px;}
    .heroContainer .graphic img {max-width:unset; width:130%; margin:0 -15%;}
    .heroContainer .bens {flex-direction: column; align-items: flex-start;}



    .trustedSources {position:relative; overflow:hidden;}
    .trustedSources h2 {font-size:18px;}
    .trustedSources::before,
    .trustedSources::after {content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;}
    .trustedSources::before {left:0; background:linear-gradient(to right, #eff4f7, transparent);}
    .trustedSources::after {right:0; background:linear-gradient(to left, #eff4f7, transparent);}
    .sources {display:flex;align-items:center;width:max-content;animation:sourcesScroll 25s linear infinite;}

    .sources > div {flex:0 0 auto; display:flex;align-items:center;justify-content:center;}
    .sources img {display:block;width:auto;height:auto; max-height:40px;}
    .sources img.mh {max-height:40px;}
    .sources .loop {display:block;}

    @keyframes sourcesScroll {
        from {transform:translateX(0);}
        to { transform:translateX(-50%);}
    }


    .whyKeyFacts .card .searching {flex-direction: column;margin: 0 auto; max-width: 300px;}
    .whyKeyFacts .card .searching [data-icon="arrow_right_alt"] {justify-content: center;}
    .whyKeyFacts .card .searching [data-icon="arrow_right_alt"]::before {mask: url(/assets/images/arrow_downward.svg) no-repeat center / contain;}
    .whyKeyFacts .card .searching .searches, .whyKeyFacts .card .searching .keyfacts {font-size: 12px; max-width: unset; padding: 10px 20px;}
    .whyKeyFacts .card .valuation {margin:0 -20px;}

    .howItWorks .steps .card {padding:20px;} 
    .howItWorks .searchBar {font-size:14px;} 
    .howItWorks .steps .bens {background-color: transparent; flex-direction: column; gap:10px; align-items: flex-start;}
    .howItWorks .steps .bens > div {background: #e7faf6; padding: 4px 10px; border-radius: 6px; width:130px; justify-content: center;}
    .howItWorks .signup .bens {flex-direction: column; gap: 10px;} 
    .howItWorks .reportBtns {grid-template-columns:1fr; gap:5px;}
    
    .faqContainer {padding:0;}

    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions a {width:250px; justify-content: center;}
    .finalCTA .bens {flex-direction: column; gap: 10px; width: 250px; margin: 20px auto 0; align-items: flex-start;}

    .finalCTA::before {background:transparent;}
    .finalCTA::after {background:transparent;}
    
}