*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{
    font-family:"Poppins",Arial,Helvetica,sans-serif;
    background:#fff;
    overflow-x:hidden;
}

.why-choose-section{
    width:100%;
    overflow:hidden;
}

/* The reference artwork has fixed proportions.
   Keeping the same aspect ratio makes all percentage positions
   scale proportionally on different desktop/mobile screens. */
.why-design{
    position:relative;
    width:100%;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow:hidden;
}

.why-desktop{
    display:block;
    aspect-ratio:2048 / 684;
    background-image:url("../img/desktop-background.jpg");
}

.why-mobile{
    display:none;
    aspect-ratio:1024 / 1536;
    background-image:url("../img/mobile-background.jpg");
}

/* -----------------------------
   EDITABLE TEXT
----------------------------- */
.editable{
    outline:0;
    cursor:default;
    user-select:none;
}


.editable strong{
    font-weight:700;
}

/* -----------------------------
   DESKTOP HEADER
----------------------------- */
.desktop-kicker{
    position:absolute;
    left:38.4%;
    top:3.5%;
    width:24%;
    text-align:center;
    color:#102f66;
    font-size:clamp(15px,1.48vw,31px);
    line-height:1;
    letter-spacing:.28em;
    font-weight:500;
}

.desktop-title{
    position:absolute;
    left:37.0%;
    top:9.2%;
    width:27%;
    text-align:center;
    color:#092a62;
    font-size:clamp(40px,4.25vw,87px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:900;
    white-space:nowrap;
}

.desktop-title .blue,
.mobile-title .blue{
    color:#1680fa;
}

.desktop-title-swoosh{
    position:absolute;
    left:50.3%;
    top:19.0%;
    width:9.5%;
    height:2%;
    border-bottom:3px solid #1680fa;
    border-radius:50%;
    transform:rotate(-5deg);
}

.desktop-subtitle{
    position:absolute;
    left:35.0%;
    top:24.0%;
    width:34%;
    text-align:center;
    color:#50586a;
    font-size:clamp(13px,1.20vw,25px);
    line-height:1.28;
    font-weight:400;
}

/* Handwriting */
.handwriting{
    font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
    color:#0b2c65;
    font-style:italic;
}

.desktop-left-note{
    position:absolute;
    left:20.0%;
    top:23.5%;
    width:6.7%;
    text-align:center;
    font-size:clamp(12px,1.22vw,25px);
    line-height:1.12;
    transform:rotate(-3deg);
}

.desktop-right-note{
    position:absolute;
    right:2.0%;
    top:9.0%;
    width:13%;
    text-align:center;
    font-size:clamp(14px,1.55vw,32px);
    line-height:1.08;
    transform:rotate(-5deg);
}

.desktop-right-note strong{
    font-size:1.30em;
}

/* -----------------------------
   DESKTOP METRIC CARDS
----------------------------- */
.metric-card{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:52px 52px 52px 52px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.94);
    box-shadow:0 12px 30px rgba(20,75,120,.10);
}

/* Colored corner accents similar to the supplied artwork. */
.metric-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:52px;
    pointer-events:none;
    border-right:7px solid transparent;
    border-bottom:7px solid transparent;
}

.metric-card-blue::after{
    border-right-color:#167cf5;
    border-bottom-color:#167cf5;
}

.metric-card-orange::after{
    border-right-color:#ffab16;
    border-bottom-color:#ffab16;
}

.metric-card-green::after{
    border-right-color:#10b77d;
    border-bottom-color:#10b77d;
}

.metric-card-pink::after{
    border-right-color:#ef3b79;
    border-bottom-color:#ef3b79;
}

.desktop-card-1{
    left:28.0%;
    top:35.2%;
    width:14.0%;
    height:37.5%;
}

.desktop-card-2{
    left:43.5%;
    top:35.2%;
    width:14.0%;
    height:37.5%;
}

.desktop-card-3{
    left:59.0%;
    top:35.2%;
    width:14.0%;
    height:37.5%;
}

.desktop-card-4{
    left:74.5%;
    top:35.2%;
    width:14.0%;
    height:37.5%;
}

/* Icon */
.metric-icon{
    width:32%;
    aspect-ratio:1;
    margin-top:3.5%;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:clamp(22px,2.45vw,50px);
    border:8px solid rgba(255,255,255,.75);
    box-shadow:0 7px 16px rgba(25,80,130,.20);
}

.metric-card-blue .metric-icon{
    background:#176edc;
    box-shadow:0 0 0 7px rgba(27,132,247,.16),0 8px 16px rgba(27,111,220,.20);
}

.metric-card-orange .metric-icon{
    background:#f59d0a;
    box-shadow:0 0 0 7px rgba(255,174,25,.18),0 8px 16px rgba(245,157,10,.18);
}

.metric-card-green .metric-icon{
    background:#0eb36e;
    box-shadow:0 0 0 7px rgba(22,193,131,.18),0 8px 16px rgba(14,179,110,.18);
}

.metric-card-pink .metric-icon{
    background:#ed2f6b;
    box-shadow:0 0 0 7px rgba(242,67,125,.17),0 8px 16px rgba(237,47,107,.18);
}

.metric-number{
    margin-top:5.0%;
    color:#092a62;
    font-size:clamp(26px,2.30vw,48px);
    line-height:1;
    letter-spacing:-.04em;
    font-weight:900;
}

.metric-label{
    margin-top:5px;
    color:#4e5669;
    font-size:clamp(12px,1.12vw,23px);
    line-height:1.05;
    white-space:nowrap;
}

.metric-line{
    width:50px;
    height:4px;
    border-radius:20px;
    margin-top:13px;
}

.metric-card-blue .metric-line{background:#167cf5}
.metric-card-orange .metric-line{background:#ffab16}
.metric-card-green .metric-line{background:#10b77d}
.metric-card-pink .metric-line{background:#ef3b79}

/* -----------------------------
   DESKTOP BENEFITS
----------------------------- */
.benefits-row{
    position:absolute;
    left:38.3%;
    top:78.6%;
    width:41.0%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.8%;
    color:#0b2c65;
}

.benefit-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    white-space:nowrap;
    font-size:clamp(12px,1.13vw,23px);
}

.benefit-item i{
    font-size:clamp(18px,1.65vw,34px);
}

.benefit-divider{
    flex:0 0 2px;
    width:2px;
    height:25px;
    background:#0b2c65;
    opacity:.75;
}

.desktop-bottom-note{
    position:absolute;
    right:2.0%;
    top:76.7%;
    width:13%;
    text-align:center;
    font-size:clamp(11px,1.05vw,22px);
    line-height:1.12;
    transform:rotate(-5deg);
}

/* -----------------------------
   MOBILE DESIGN
----------------------------- */
@media (max-width:767px){
    .why-desktop{display:none!important;}
    .why-mobile{display:block!important;width:100%;height:auto;aspect-ratio:1024 / 1536;background-size:100% 100%;background-position:center top;}

    .mobile-kicker{position:absolute;left:22%;top:5.15%;width:56%;text-align:center;color:#102f66;font-size:clamp(15px,3.25vw,30px);line-height:1;letter-spacing:.27em;font-weight:500;}
    .mobile-title{position:absolute;left:15%;top:8.25%;width:70%;text-align:center;color:#092a62;font-size:clamp(39px,8.4vw,86px);line-height:.92;letter-spacing:-.06em;font-weight:900;white-space:nowrap;}
    .mobile-title-swoosh{position:absolute;left:48%;top:14.35%;width:17%;height:2%;border-bottom:3px solid #1680fa;border-radius:50%;transform:rotate(-5deg);}
    .mobile-subtitle{position:absolute;left:17%;top:16.35%;width:66%;text-align:center;color:#50586a;font-size:clamp(12px,2.95vw,30px);line-height:1.28;font-weight:400;}
    .mobile-top-note{position:absolute;right:2.3%;top:3.35%;width:15%;text-align:center;font-size:clamp(11px,2.25vw,24px);line-height:1.02;transform:rotate(-6deg);}

    .mobile-card{position:absolute;width:35.55%;height:17.62%;border-radius:31px;overflow:hidden;display:block;background:rgba(255,255,255,.80);box-shadow:0 10px 24px rgba(20,75,120,.10);}
    .mobile-card-1{left:13.25%;top:24.45%;}
    .mobile-card-2{left:51.20%;top:24.45%;}
    .mobile-card-3{left:13.25%;top:43.35%;}
    .mobile-card-4{left:51.20%;top:43.35%;}

    .mobile-card::after{content:"";position:absolute;inset:0;border-radius:31px;pointer-events:none;border-right:5px solid transparent;border-bottom:5px solid transparent;z-index:4;}
    .mobile-card-blue::after{border-right-color:#167cf5;border-bottom-color:#167cf5;}
    .mobile-card-orange::after{border-right-color:#ffab16;border-bottom-color:#ffab16;}
    .mobile-card-green::after{border-right-color:#10b77d;border-bottom-color:#10b77d;}
    .mobile-card-pink::after{border-right-color:#ef3b79;border-bottom-color:#ef3b79;}

    .mobile-card .metric-icon{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:34%;height:auto;aspect-ratio:1/1;margin:0;border:6px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;z-index:2;font-size:clamp(20px,5vw,48px);line-height:1;}
    .mobile-card .metric-number{position:absolute;left:0;top:56.5%;width:100%;height:auto;margin:0;padding:0;text-align:center;color:#092a62;font-size:clamp(25px,5.25vw,54px);line-height:.95;letter-spacing:-.045em;font-weight:900;white-space:nowrap;z-index:3;}
    .mobile-card .metric-label{position:absolute;left:0;top:75%;width:100%;height:auto;margin:0;padding:0 3px;text-align:center;color:#4e5669;font-size:clamp(10px,2.55vw,27px);line-height:1.05;font-weight:400;white-space:nowrap;z-index:3;}
    .mobile-card .metric-line{position:absolute;left:50%;top:90.5%;transform:translateX(-50%);width:24%;min-width:34px;max-width:62px;height:4px;margin:0;border-radius:20px;z-index:3;}

    .mobile-benefits-row{position:absolute;left:6%;top:63%;width:88%;height:4.2%;display:flex;align-items:center;justify-content:center;gap:1.7%;color:#0b2c65;}
    .mobile-benefits-row .benefit-item{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;font-size:clamp(9px,2.55vw,27px);line-height:1;}
    .mobile-benefits-row .benefit-item i{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:clamp(15px,3.8vw,39px);line-height:1;}
    .mobile-benefits-row .benefit-divider{flex:0 0 2px;width:2px;height:70%;min-height:22px;background:#0b2c65;opacity:.75;}

    .mobile-bottom-note{position:absolute;left:7%;top:68.55%;width:48%;text-align:center;font-size:clamp(14px,3.45vw,36px);line-height:1.05;transform:rotate(-5deg);}
    .mobile-blue-note{position:absolute;right:3%;top:88.55%;width:11%;text-align:center;color:#fff;font-size:clamp(11px,2.65vw,28px);line-height:1.18;font-weight:500;}
}

@media (max-width:380px){
    .mobile-kicker{font-size:14px;}
    .mobile-title{font-size:38px;}
    .mobile-subtitle{font-size:11px;}
    .mobile-top-note{font-size:11px;}
    .mobile-card .metric-number{font-size:24px;}
    .mobile-card .metric-label{font-size:9.5px;}
    .mobile-card .metric-line{height:3px;min-width:30px;}
    .mobile-benefits-row{top:63%;}
    .mobile-benefits-row .benefit-item{font-size:8px;gap:4px;}
    .mobile-benefits-row .benefit-item i{font-size:13px;}
    .mobile-benefits-row .benefit-divider{min-height:18px;}
    .mobile-bottom-note{font-size:13px;}
    .mobile-blue-note{font-size:10px;}
}

/* Very narrow phones */
@media (max-width:380px){
    .mobile-kicker{font-size:14px;}
    .mobile-title{font-size:38px;}
    .mobile-subtitle{font-size:11px;}
    .mobile-top-note{font-size:11px;}
    .mobile-card .metric-number{font-size:24px;}
    .mobile-card .metric-label{font-size:9.5px;}
    .mobile-card .metric-line{height:3px;min-width:30px;}
    .mobile-benefits-row{top:63%;}
    .mobile-benefits-row .benefit-item{font-size:8px;gap:4px;}
    .mobile-benefits-row .benefit-item i{font-size:13px;}
    .mobile-benefits-row .benefit-divider{min-height:18px;}
    .mobile-bottom-note{font-size:13px;}
    .mobile-blue-note{font-size:10px;}
}