/* =========================================================
   ESSENTILY — HOW IT WORKS V1
   Dedicated customer journey page.
   Motion is progressive enhancement; content is visible without JS.
   ========================================================= */

:root{
    --how-ink:#17191b;
    --how-copy:#636d74;
    --how-orange:#ff520f;
    --how-green:#124a2c;
    --how-green-bright:#b9f18f;
    --how-soft:#f5f7f3;
    --how-cream:#fff8f1;
    --how-border:#e8e2dc;
    --how-shadow:0 30px 75px rgba(32,28,24,.10);
}

.how-hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #eeeae5;
    background:
        radial-gradient(circle at 84% 25%,rgba(108,178,96,.14),transparent 29%),
        radial-gradient(circle at 8% 82%,rgba(255,82,15,.09),transparent 26%),
        linear-gradient(135deg,#fff9f4 0%,#fff 48%,#f1f8ee 100%);
}
.how-hero__grid{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:64px;
    align-items:center;
    min-height:720px;
    padding-top:74px;
    padding-bottom:80px;
}
.how-hero__copy{max-width:760px}
.how-hero h1{
    margin:18px 0 24px;
    color:var(--how-ink);
    font:900 clamp(64px,5.9vw,92px)/.93 Nunito,sans-serif;
    letter-spacing:-.055em;
}
.how-hero h1 em{color:var(--how-orange);font-style:normal}
.how-hero h1 strong{font-weight:900}
.how-hero__copy>p{
    max-width:710px;
    margin:0;
    color:var(--how-copy);
    font-size:16px;
    line-height:1.9;
}
.how-hero__actions{display:flex;align-items:center;gap:22px;margin-top:31px}
.how-text-link{display:inline-flex;align-items:center;gap:8px;color:#22272a;font-size:12px;font-weight:800}
.how-text-link span{font-size:17px}
.how-hero__proof{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin-top:42px;
    padding-top:20px;
    border-top:1px solid #e9e3dc;
}
.how-hero__proof>span{position:relative;padding:0 24px}
.how-hero__proof>span:first-child{padding-left:0}
.how-hero__proof>span+span:before{content:"";position:absolute;left:0;top:2px;width:1px;height:45px;background:#e8e1da}
.how-hero__proof b,.how-hero__proof strong,.how-hero__proof small{display:block}
.how-hero__proof b{color:#ff7842;font-size:8px}
.how-hero__proof strong{margin-top:4px;font:900 13px Nunito,sans-serif}
.how-hero__proof small{margin-top:3px;color:#828b90;font-size:8.5px;line-height:1.5}

.how-hero__visual{position:relative;min-height:570px;isolation:isolate}
.how-hero__glow{
    position:absolute;inset:12% 5% 4%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,237,225,.7) 38%,rgba(229,244,225,.7) 67%,transparent 68%);
    filter:blur(4px);
}
.how-phone{
    margin:0;
    overflow:hidden;
    border:7px solid #202326;
    border-radius:34px;
    background:#fff;
    box-shadow:0 28px 65px rgba(23,24,22,.18);
}
.how-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.how-phone--main{position:absolute;z-index:4;left:50%;top:1%;width:278px;height:570px;transform:translateX(-50%)}
.how-phone--left{position:absolute;z-index:3;left:2%;bottom:8%;width:190px;height:410px;transform:rotate(-8deg)}
.how-phone--right{position:absolute;z-index:3;right:0;bottom:8%;width:190px;height:410px;transform:rotate(8deg)}
.how-float-card{
    position:absolute;z-index:6;display:block;min-width:150px;padding:11px 13px;
    border:1px solid rgba(36,40,37,.08);border-radius:15px;background:rgba(255,255,255,.94);
    box-shadow:0 18px 40px rgba(31,28,25,.09);backdrop-filter:blur(12px)
}
.how-float-card b,.how-float-card small{display:block}
.how-float-card b{font:900 10px Nunito,sans-serif}
.how-float-card small{margin-top:2px;color:#899196;font-size:7px}
.how-float-card--top{left:1%;top:10%}
.how-float-card--bottom{right:0;bottom:2%}

/* Sticky phase navigator */
.how-phase-nav{
    position:sticky;
    z-index:28;
    top:88px;
    border-bottom:1px solid #e7e9e5;
    background:rgba(255,255,255,.93);
    box-shadow:0 10px 28px rgba(29,31,29,.045);
    backdrop-filter:blur(18px);
}
.how-phase-nav__inner{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;
    align-items:center;
    gap:12px;
    min-height:76px;
}
.how-phase-nav a{display:flex;align-items:center;gap:9px;color:#878f94;font-size:10px;font-weight:800;transition:color .2s ease}
.how-phase-nav a span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:#f4f5f2;color:#8d9498;font-size:7px;transition:all .2s ease}
.how-phase-nav a.is-active{color:#1b1f21}
.how-phase-nav a.is-active span{background:#ff5b18;color:#fff;box-shadow:0 8px 20px rgba(255,82,15,.18)}
.how-phase-nav i{height:1px;background:#e1e4df}

/* Journey introduction */
.how-intro{padding:128px 0 84px;background:#fff}
.how-intro__grid{display:grid;grid-template-columns:1fr .78fr;gap:90px;align-items:end}
.how-intro h2{margin:15px 0 0;color:var(--how-ink);font:900 clamp(52px,5vw,72px)/.98 Nunito,sans-serif;letter-spacing:-.048em}
.how-intro h2 em{color:var(--how-orange);font-style:normal}
.how-intro p{margin:0;color:var(--how-copy);font-size:15px;line-height:1.9}

/* Shared journey stages */
.how-step{padding:105px 0}
.how-step--light{background:#f6f8f4}
.how-step--warm{background:#fffaf3}
.how-step--white{background:#fff}
.how-step--dark{background:#121716;color:#fff}
.how-step--final{background:linear-gradient(135deg,#fff8f1,#fff 52%,#eef7eb)}
.how-step__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:center}
.how-step__grid--reverse{grid-template-columns:1.18fr .82fr}
.how-step__grid--reverse>.how-step__visual{order:1}
.how-step__grid--reverse>.how-step__copy{order:2}
.how-step__copy{position:relative;min-width:0}
.how-step__number{
    display:block;margin-bottom:18px;color:#e5e7e3;
    font:900 78px/1 Nunito,sans-serif;letter-spacing:-.04em
}
.how-step__copy h2{margin:14px 0 20px;color:var(--how-ink);font:900 clamp(48px,4.7vw,68px)/.98 Nunito,sans-serif;letter-spacing:-.048em}
.how-step__copy h2 em{color:var(--how-orange);font-style:normal}
.how-step__copy>p{max-width:680px;margin:0;color:var(--how-copy);font-size:15px;line-height:1.9}
.how-step__copy--light h2{color:#fff}
.how-step__copy--light h2 em{color:#b9f18f}
.how-step__copy--light>p{color:#c4cec7}
.how-step--dark .how-step__number{color:#2d3330}

.how-points{display:grid;gap:0;margin-top:26px;border-top:1px solid #e7e3dd}
.how-points>span{display:grid;grid-template-columns:155px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid #e7e3dd}
.how-points b{font:900 11px Nunito,sans-serif}
.how-points small{color:#7b848a;font-size:9px;line-height:1.55}
.how-points--compact>span{grid-template-columns:145px 1fr}
.how-inline-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:#202426;font-size:10.5px;font-weight:800}
.how-inline-link span{color:var(--how-orange)}

.how-step__visual{
    position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;
    min-height:610px;padding:48px;border-radius:40px;overflow:hidden
}
.how-step__visual:before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;background-image:linear-gradient(rgba(35,42,35,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(35,42,35,.035) 1px,transparent 1px);background-size:28px 28px}
.how-step__visual--mint{background:linear-gradient(135deg,#eef8ea,#fff 70%)}
.how-step__visual--cream{background:linear-gradient(135deg,#fff1e6,#fffaf4 60%,#eef8eb)}
.how-step__visual--peach{background:linear-gradient(135deg,#fff0e6,#fff 72%)}
.how-step__visual--dark{background:radial-gradient(circle at 65% 30%,rgba(82,145,85,.14),transparent 30%),#0c1110}
.how-phone--step{position:relative;z-index:2;width:235px;height:508px}
.how-phone--step-main{width:260px;height:562px}
.how-phone--tilt-left{transform:rotate(-6deg) translateY(18px)}
.how-screen-note{
    position:absolute;z-index:5;padding:11px 13px;border-radius:15px;background:#fff;
    box-shadow:0 16px 38px rgba(28,30,27,.09)
}
.how-screen-note b,.how-screen-note small{display:block}
.how-screen-note b{font:900 10px Nunito,sans-serif}
.how-screen-note small{margin-top:2px;color:#8b9296;font-size:7px}
.how-screen-note--one{left:7%;top:13%}
.how-screen-note--two{right:5%;top:12%}
.how-screen-note--three{left:7%;bottom:10%}
.how-screen-note--dark{right:5%;top:11%;background:#202824;color:#fff}
.how-screen-note--dark small{color:#aebdb2}

.how-prompt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.how-prompt-chips span{padding:9px 12px;border:1px solid #eadfd4;border-radius:999px;background:#fff;color:#5e666b;font-size:9px;font-weight:700}

.how-check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:27px}
.how-check-list span{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border:1px solid #ece6df;border-radius:14px;background:#fff;color:#313638;font-size:10px;font-weight:800}
.how-check-list i{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#fff0e9;color:#ff5a16;font-style:normal;font-size:8px}

/* Behind-the-scenes network */
.how-behind{padding:120px 0;background:#0f1512;color:#fff}
.how-behind__head{max-width:980px;text-align:center}
.how-behind__head .v11-eyebrow{justify-content:center}
.how-behind h2{margin:15px 0 17px;font:900 clamp(52px,5vw,72px)/.98 Nunito,sans-serif;letter-spacing:-.048em}
.how-behind h2 em{color:#b9f18f;font-style:normal}
.how-behind__head>p{max-width:780px;margin:0 auto;color:#b9c5bd;font-size:14px;line-height:1.85}
.how-network{
    display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:13px;align-items:center;
    margin-top:50px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:28px;background:rgba(255,255,255,.035)
}
.how-network>article{display:flex;align-items:center;gap:13px;min-height:106px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.045)}
.how-network>article>img,.how-network__done>span{flex:0 0 48px;width:48px;height:48px;border-radius:14px}
.how-network>article>img{object-fit:cover}
.how-network__done>span{display:grid;place-items:center;background:#dff4d4;color:#26713d;font-size:20px;font-weight:900}
.how-network small,.how-network strong,.how-network article span{display:block}
.how-network small{color:#ff9368;font-size:6.5px;font-weight:900;letter-spacing:.09em}
.how-network strong{margin-top:3px;font:900 12px Nunito,sans-serif}
.how-network article div>span{margin-top:4px;color:#aebbb2;font-size:7.5px;line-height:1.45}
.how-network>i{color:#68736c;font-style:normal}

/* Live tracking */
.how-status-flow{display:flex;align-items:center;gap:7px;margin-top:28px}
.how-status-flow span{padding:9px 10px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.05);color:#dbe4dd;font-size:8px;font-weight:800}
.how-status-flow i{width:18px;height:1px;background:#66716a}
.how-rider{position:absolute;z-index:4;left:2%;bottom:5%;width:92px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.25))}

/* Final handoff */
.how-final{display:grid;grid-template-columns:.88fr 1.12fr;gap:80px;align-items:center}
.how-final__copy h2{margin:14px 0 20px;color:var(--how-ink);font:900 clamp(50px,4.8vw,70px)/.98 Nunito,sans-serif;letter-spacing:-.048em}
.how-final__copy h2 em{color:var(--how-orange);font-style:normal}
.how-final__copy>p{max-width:690px;color:var(--how-copy);font-size:15px;line-height:1.9}
.how-final__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.how-final__chips span{padding:10px 13px;border:1px solid #eadfd6;border-radius:999px;background:#fff;color:#5d666c;font-size:9px;font-weight:800}
.how-final__visual{position:relative;display:grid;place-items:center;min-height:610px}
.how-final__ring{position:absolute;border-radius:50%;border:1px solid rgba(90,151,80,.16)}
.how-final__ring--one{width:480px;height:480px}
.how-final__ring--two{width:360px;height:360px;border-color:rgba(255,82,15,.15)}
.how-phone--final{position:relative;z-index:3;width:275px;height:594px}
.how-verified-card{position:absolute;z-index:5;right:1%;bottom:10%;display:flex;align-items:center;gap:12px;min-width:225px;padding:14px;border:1px solid #e6e1da;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 22px 55px rgba(30,28,24,.12)}
.how-verified-card>span{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#e6f5df;color:#2d7a42;font-size:18px;font-weight:900}
.how-verified-card small,.how-verified-card strong,.how-verified-card p{display:block;margin:0}
.how-verified-card small{color:#ff6d33;font-size:6.5px;font-weight:900;letter-spacing:.08em}
.how-verified-card strong{margin-top:2px;font:900 11px Nunito,sans-serif}
.how-verified-card p{margin-top:2px;color:#879096;font-size:7.5px}

/* CTA */
.how-cta{padding:100px 0 120px;background:#fff}
.how-cta__panel{
    display:grid;grid-template-columns:1fr auto;gap:70px;align-items:center;
    padding:54px 60px;border:1px solid #e7e1da;border-radius:36px;
    background:linear-gradient(135deg,#fff5ec,#fff 52%,#eef7eb);box-shadow:0 24px 70px rgba(39,33,27,.06)
}
.how-cta h2{margin:13px 0 13px;color:var(--how-ink);font:900 clamp(42px,4vw,58px)/1 Nunito,sans-serif;letter-spacing:-.045em}
.how-cta h2 em{color:var(--how-orange);font-style:normal}
.how-cta p{max-width:690px;margin:0;color:var(--how-copy);font-size:13px;line-height:1.8}
.how-cta__actions{display:flex;flex-direction:column;gap:10px;min-width:210px}

/* Progressive motion: never hides content */
.how-motion [data-how-section] .how-step__copy,
.how-motion [data-how-section] .how-step__visual,
.how-motion .how-network article{
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.how-motion [data-how-section]:not(.is-in) .how-step__copy{transform:translateY(16px)}
.how-motion [data-how-section]:not(.is-in) .how-step__visual{transform:translateY(20px)}
.how-motion .how-network article{transform:translateY(0)}

@media(max-width:1180px){
    .how-hero__grid{gap:38px}
    .how-phone--main{width:248px;height:508px}
    .how-phone--left,.how-phone--right{width:165px;height:356px}
    .how-step__grid,.how-step__grid--reverse{gap:48px}
    .how-step__visual{padding:32px}
    .how-phone--step{width:205px;height:443px}
    .how-phone--step-main{width:228px;height:492px}
    .how-network{grid-template-columns:1fr 1fr;gap:12px}
    .how-network>i{display:none}
}

@media(max-width:980px){
    .how-hero__grid{grid-template-columns:1fr;gap:20px;min-height:auto;padding-top:70px}
    .how-hero__copy{text-align:center;margin-inline:auto}
    .how-hero__copy .v11-eyebrow{justify-content:center}
    .how-hero__copy>p{margin-inline:auto}
    .how-hero__actions,.how-hero__proof{justify-content:center}
    .how-hero__visual{min-height:520px}
    .how-phase-nav{top:72px}
    .how-phase-nav__inner{overflow-x:auto;grid-template-columns:repeat(5,max-content);justify-content:flex-start;gap:8px;min-height:68px}
    .how-phase-nav i{display:none}
    .how-intro__grid{grid-template-columns:1fr;gap:26px;text-align:center}
    .how-intro__grid .v11-eyebrow{justify-content:center}
    .how-step__grid,.how-step__grid--reverse{grid-template-columns:1fr;gap:36px}
    .how-step__grid--reverse>.how-step__visual,.how-step__grid--reverse>.how-step__copy{order:initial}
    .how-step__copy{text-align:center}
    .how-step__copy .v11-eyebrow{justify-content:center}
    .how-step__copy>p{margin-inline:auto}
    .how-points>span{text-align:left}
    .how-prompt-chips,.how-check-list,.how-status-flow,.how-final__chips{justify-content:center}
    .how-step__visual{min-height:570px}
    .how-behind__head{text-align:center}
    .how-final{grid-template-columns:1fr;gap:30px;text-align:center}
    .how-final__copy .v11-eyebrow{justify-content:center}
    .how-final__copy>p{margin-inline:auto}
    .how-cta__panel{grid-template-columns:1fr;text-align:center}
    .how-cta__panel .v11-eyebrow{justify-content:center}
    .how-cta p{margin-inline:auto}
    .how-cta__actions{flex-direction:row;justify-content:center}
}

@media(max-width:700px){
    .how-hero h1{font-size:50px}
    .how-hero__copy>p{font-size:14px}
    .how-hero__actions{flex-direction:column;gap:13px}
    .how-hero__proof{grid-template-columns:1fr;gap:13px;text-align:left}
    .how-hero__proof>span{padding:0}
    .how-hero__proof>span+span:before{display:none}
    .how-hero__visual{min-height:390px}
    .how-phone{border-width:5px;border-radius:25px}
    .how-phone--main{width:190px;height:390px}
    .how-phone--left,.how-phone--right{width:125px;height:270px}
    .how-float-card{display:none}
    .how-intro{padding:88px 0 60px}
    .how-intro h2{font-size:43px}
    .how-step{padding:76px 0}
    .how-step__number{font-size:58px}
    .how-step__copy h2{font-size:42px}
    .how-step__copy>p{font-size:13.5px}
    .how-points>span,.how-points--compact>span{grid-template-columns:1fr;gap:5px}
    .how-check-list{grid-template-columns:1fr}
    .how-step__visual{min-height:430px;padding:22px}
    .how-phone--step{width:145px;height:313px}
    .how-phone--step-main{width:165px;height:356px}
    .how-screen-note{display:none}
    .how-behind{padding:82px 0}
    .how-behind h2{font-size:42px}
    .how-network{grid-template-columns:1fr}
    .how-network>article{min-height:92px}
    .how-status-flow{flex-wrap:wrap}
    .how-status-flow i{display:none}
    .how-rider{width:65px}
    .how-final__copy h2{font-size:42px}
    .how-final__visual{min-height:460px}
    .how-final__ring--one{width:350px;height:350px}
    .how-final__ring--two{width:270px;height:270px}
    .how-phone--final{width:195px;height:421px}
    .how-verified-card{right:0;bottom:5%;min-width:185px}
    .how-cta{padding:74px 0 90px}
    .how-cta__panel{padding:38px 24px;border-radius:28px}
    .how-cta h2{font-size:39px}
    .how-cta__actions{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
    .how-motion [data-how-section] .how-step__copy,
    .how-motion [data-how-section] .how-step__visual{transform:none!important;transition:none!important}
    .how-phone,.how-hero__bag{animation:none!important}
}


/* =========================================================
   ESSENTILY — HOW IT WORKS V1.1 VISUAL POLISH
   Based on live-page review:
   - stronger readable typography
   - tighter section rhythm
   - larger app screens
   - stronger network / tracking / handoff moments
   - cleaner sticky progress navigation
   ========================================================= */

:root{
    --hiw-copy:#5e6870;
    --hiw-soft-border:#e7e2dc;
}

/* Header-to-page handoff */
.how-hero__grid{
    min-height:675px!important;
    padding-top:64px!important;
    padding-bottom:66px!important;
}
.how-hero__copy{
    max-width:720px!important;
}
.how-hero h1{
    font-size:clamp(60px,5.1vw,82px)!important;
    line-height:.94!important;
    margin-bottom:20px!important;
}
.how-hero__copy>p{
    max-width:660px!important;
    font-size:16px!important;
    line-height:1.82!important;
}
.how-hero__actions{
    margin-top:27px!important;
}
.how-hero__proof{
    margin-top:34px!important;
}
.how-hero__proof strong{
    font-size:13.5px!important;
}
.how-hero__proof small{
    font-size:9.5px!important;
}
.how-hero__visual{
    min-height:540px!important;
}
.how-phone--main{
    width:292px!important;
    height:598px!important;
}
.how-phone--left,
.how-phone--right{
    width:196px!important;
    height:423px!important;
}

/* Make the progress navigation useful at normal desktop scale. */
.how-phase-nav__inner{
    min-height:70px!important;
}
.how-phase-nav a{
    gap:10px!important;
    font-size:11.5px!important;
}
.how-phase-nav a span{
    width:34px!important;
    height:34px!important;
    font-size:8px!important;
}

/* Intro becomes a tighter editorial bridge. */
.how-intro{
    padding:100px 0 68px!important;
}
.how-intro__grid{
    grid-template-columns:1fr .82fr!important;
    gap:68px!important;
}
.how-intro h2{
    font-size:clamp(48px,4.6vw,64px)!important;
}
.how-intro p{
    font-size:15.5px!important;
    line-height:1.85!important;
}

/* Stage rhythm: slightly shorter sections, larger content. */
.how-step{
    padding:84px 0!important;
}
.how-step__grid,
.how-step__grid--reverse{
    gap:58px!important;
}
.how-step__number{
    margin-bottom:12px!important;
    font-size:68px!important;
}
.how-step__copy h2{
    margin-top:10px!important;
    margin-bottom:18px!important;
    font-size:clamp(43px,4.1vw,59px)!important;
    line-height:.99!important;
}
.how-step__copy>p{
    max-width:650px!important;
    color:var(--hiw-copy)!important;
    font-size:15px!important;
    line-height:1.82!important;
}
.how-step__copy--light>p{
    color:#c8d1cb!important;
}
.how-step__visual{
    min-height:545px!important;
    padding:34px!important;
    border-radius:34px!important;
    box-shadow:0 24px 65px rgba(33,29,24,.05);
}
.how-phone--step{
    width:230px!important;
    height:497px!important;
}
.how-phone--step-main{
    width:255px!important;
    height:551px!important;
}
.how-points{
    margin-top:22px!important;
}
.how-points>span{
    grid-template-columns:145px 1fr!important;
    padding:12px 0!important;
}
.how-points b{
    font-size:11.5px!important;
}
.how-points small{
    font-size:9.5px!important;
}
.how-inline-link{
    margin-top:20px!important;
    font-size:11px!important;
}
.how-prompt-chips{
    margin-top:21px!important;
}
.how-prompt-chips span{
    font-size:9.5px!important;
}
.how-check-list{
    margin-top:23px!important;
}
.how-check-list span{
    min-height:50px!important;
    font-size:10.5px!important;
}

/* Screen labels should be readable but subordinate. */
.how-screen-note{
    padding:12px 14px!important;
}
.how-screen-note b{
    font-size:10.5px!important;
}
.how-screen-note small{
    font-size:7.5px!important;
}

/* The network section was visually too small. */
.how-behind{
    padding:96px 0 104px!important;
}
.how-behind__head{
    max-width:920px!important;
}
.how-behind h2{
    font-size:clamp(48px,4.6vw,64px)!important;
}
.how-behind__head>p{
    max-width:760px!important;
    font-size:14.5px!important;
}
.how-network{
    gap:16px!important;
    margin-top:42px!important;
    padding:22px!important;
    border-radius:30px!important;
}
.how-network>article{
    min-height:124px!important;
    padding:18px!important;
}
.how-network>article>img,
.how-network__done>span{
    flex-basis:54px!important;
    width:54px!important;
    height:54px!important;
}
.how-network small{
    font-size:7px!important;
}
.how-network strong{
    font-size:13px!important;
}
.how-network article div>span{
    font-size:8.5px!important;
    line-height:1.5!important;
}

/* Tracking stage gets more visual weight. */
.how-step--dark{
    padding:92px 0!important;
}
.how-step--dark .how-step__visual{
    min-height:575px!important;
}
.how-status-flow{
    margin-top:24px!important;
}
.how-status-flow span{
    font-size:8.5px!important;
}
.how-rider{
    width:105px!important;
    left:0!important;
}

/* Make the final handoff feel like a climax rather than another step. */
.how-step--final{
    padding:96px 0 105px!important;
}
.how-final{
    gap:58px!important;
}
.how-final__copy h2{
    font-size:clamp(46px,4.4vw,64px)!important;
}
.how-final__copy>p{
    font-size:15px!important;
    line-height:1.85!important;
}
.how-final__visual{
    min-height:565px!important;
}
.how-phone--final{
    width:265px!important;
    height:572px!important;
}
.how-verified-card{
    right:4%!important;
    bottom:8%!important;
    min-width:235px!important;
    padding:15px!important;
}
.how-verified-card small{
    font-size:7px!important;
}
.how-verified-card strong{
    font-size:12px!important;
}
.how-verified-card p{
    font-size:8px!important;
}

/* Final CTA: wider, clearer, more premium. */
.how-cta{
    padding:82px 0 105px!important;
}
.how-cta__panel{
    padding:48px 54px!important;
    gap:54px!important;
    border-radius:32px!important;
}
.how-cta h2{
    font-size:clamp(38px,3.7vw,52px)!important;
}
.how-cta p{
    font-size:13.5px!important;
}

/* Responsive adjustments after the desktop polish. */
@media(max-width:1180px){
    .how-phone--main{
        width:258px!important;
        height:528px!important;
    }
    .how-phone--left,
    .how-phone--right{
        width:170px!important;
        height:367px!important;
    }
    .how-step__visual{
        min-height:515px!important;
    }
    .how-phone--step{
        width:205px!important;
        height:443px!important;
    }
    .how-phone--step-main{
        width:225px!important;
        height:486px!important;
    }
}

@media(max-width:980px){
    .how-hero__grid{
        padding-top:58px!important;
    }
    .how-step{
        padding:72px 0!important;
    }
    .how-step__visual{
        min-height:525px!important;
    }
    .how-network{
        grid-template-columns:1fr 1fr!important;
    }
}

@media(max-width:700px){
    .how-hero h1{
        font-size:48px!important;
    }
    .how-intro{
        padding:76px 0 52px!important;
    }
    .how-intro h2{
        font-size:40px!important;
    }
    .how-step{
        padding:64px 0!important;
    }
    .how-step__number{
        font-size:54px!important;
    }
    .how-step__copy h2{
        font-size:38px!important;
    }
    .how-step__copy>p{
        font-size:13.5px!important;
    }
    .how-step__visual{
        min-height:420px!important;
    }
    .how-phone--step{
        width:142px!important;
        height:307px!important;
    }
    .how-phone--step-main{
        width:164px!important;
        height:354px!important;
    }
    .how-network{
        grid-template-columns:1fr!important;
        padding:14px!important;
    }
    .how-behind h2{
        font-size:40px!important;
    }
    .how-final__copy h2{
        font-size:39px!important;
    }
    .how-final__visual{
        min-height:445px!important;
    }
    .how-phone--final{
        width:188px!important;
        height:406px!important;
    }
    .how-cta__panel{
        padding:34px 22px!important;
    }
}


/* =========================================================
   ESSENTILY — HOW IT WORKS V1.2
   FINAL READABILITY + RHYTHM PASS
   No architecture/content changes.
   ========================================================= */

/* ---------- Phase navigation ---------- */
.how-phase-nav{
    box-shadow:0 9px 24px rgba(27,31,28,.055)!important;
}
.how-phase-nav__inner{
    min-height:72px!important;
}
.how-phase-nav a{
    gap:11px!important;
    color:#717b80!important;
    font-size:12px!important;
    font-weight:800!important;
}
.how-phase-nav a span{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    color:#7c858a!important;
    font-size:8.5px!important;
}
.how-phase-nav a.is-active{
    color:#161a1c!important;
}
.how-phase-nav a.is-active span{
    background:#ff520f!important;
    color:#fff!important;
    box-shadow:0 8px 22px rgba(255,82,15,.22)!important;
}

/* ---------- Intro ---------- */
.how-intro{
    padding-top:92px!important;
    padding-bottom:58px!important;
}
.how-intro p{
    color:#59636a!important;
    font-size:16px!important;
    line-height:1.82!important;
}

/* ---------- Steps 01–03: faster visual cadence ---------- */
#discover.how-step,
#build.how-step,
#checkout.how-step{
    padding-top:72px!important;
    padding-bottom:72px!important;
}
#discover .how-step__visual,
#build .how-step__visual,
#checkout .how-step__visual{
    min-height:520px!important;
}
.how-step__copy>p{
    color:#566168!important;
    font-size:15.5px!important;
    line-height:1.82!important;
}
.how-step__copy--light>p{
    color:#ced7d1!important;
}
.how-points b{
    font-size:12px!important;
}
.how-points small{
    color:#727c82!important;
    font-size:10px!important;
    line-height:1.6!important;
}
.how-inline-link{
    font-size:11.5px!important;
}
.how-prompt-chips span{
    padding:10px 13px!important;
    font-size:10px!important;
}
.how-check-list span{
    min-height:52px!important;
    font-size:11px!important;
}

/* ---------- Network bridge: larger, easier to scan ---------- */
.how-behind{
    padding-top:88px!important;
    padding-bottom:90px!important;
}
.how-behind__head>p{
    color:#c2cec6!important;
    font-size:15px!important;
    line-height:1.78!important;
}
.how-network{
    margin-top:38px!important;
    padding:17px!important;
    gap:12px!important;
}
.how-network>article{
    min-height:132px!important;
    padding:19px!important;
    gap:14px!important;
}
.how-network>article>img,
.how-network__done>span{
    flex-basis:58px!important;
    width:58px!important;
    height:58px!important;
}
.how-network small{
    font-size:7.5px!important;
}
.how-network strong{
    margin-top:4px!important;
    font-size:14px!important;
}
.how-network article div>span{
    margin-top:5px!important;
    color:#bac6be!important;
    font-size:9.5px!important;
    line-height:1.5!important;
}

/* ---------- Stage 04: preserve layout, improve legibility ---------- */
#delivery.how-step{
    padding-top:82px!important;
    padding-bottom:84px!important;
}
#delivery .how-step__copy>p{
    font-size:15.5px!important;
}
.how-status-flow{
    gap:8px!important;
    margin-top:25px!important;
}
.how-status-flow span{
    padding:10px 12px!important;
    color:#e1e8e3!important;
    font-size:9.5px!important;
}
.how-status-flow i{
    width:22px!important;
}

/* ---------- Stage 05: stronger finish ---------- */
#handoff.how-step{
    padding-top:82px!important;
    padding-bottom:92px!important;
}
.how-final__copy>p{
    color:#59636a!important;
    font-size:15.5px!important;
    line-height:1.82!important;
}
.how-final__chips span{
    font-size:10px!important;
}
.how-verified-card{
    right:0!important;
    bottom:6%!important;
    min-width:270px!important;
    padding:17px 18px!important;
    gap:14px!important;
    border-radius:20px!important;
    box-shadow:0 24px 64px rgba(29,27,23,.14)!important;
}
.how-verified-card>span{
    flex-basis:48px!important;
    width:48px!important;
    height:48px!important;
    border-radius:15px!important;
    font-size:21px!important;
}
.how-verified-card small{
    font-size:7.5px!important;
}
.how-verified-card strong{
    margin-top:3px!important;
    font-size:13.5px!important;
}
.how-verified-card p{
    margin-top:3px!important;
    font-size:9px!important;
}

/* ---------- Final CTA ---------- */
.how-cta{
    padding-top:72px!important;
    padding-bottom:96px!important;
}
.how-cta__panel{
    grid-template-columns:minmax(0,1fr) 240px!important;
    gap:34px!important;
    padding:45px 50px!important;
}
.how-cta p{
    max-width:760px!important;
    color:#5d676e!important;
    font-size:14px!important;
}
.how-cta__actions{
    min-width:0!important;
    width:240px!important;
    justify-self:end!important;
}
.how-cta__actions .v11-btn{
    width:100%!important;
    justify-content:center!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
    .how-network>article{
        min-height:116px!important;
    }
    .how-network strong{
        font-size:13px!important;
    }
    .how-network article div>span{
        font-size:8.8px!important;
    }
}

@media(max-width:980px){
    .how-phase-nav a{
        font-size:11.5px!important;
    }
    #discover.how-step,
    #build.how-step,
    #checkout.how-step,
    #delivery.how-step,
    #handoff.how-step{
        padding-top:66px!important;
        padding-bottom:66px!important;
    }
    .how-cta__panel{
        grid-template-columns:1fr!important;
        gap:26px!important;
    }
    .how-cta__actions{
        width:auto!important;
        justify-self:center!important;
    }
    .how-cta__actions .v11-btn{
        width:auto!important;
        min-width:190px!important;
    }
}

@media(max-width:700px){
    .how-intro{
        padding-top:68px!important;
        padding-bottom:45px!important;
    }
    .how-step__copy>p,
    .how-final__copy>p{
        font-size:14px!important;
    }
    .how-points small{
        font-size:9.5px!important;
    }
    .how-network>article{
        min-height:0!important;
    }
    .how-network strong{
        font-size:13px!important;
    }
    .how-network article div>span{
        font-size:9px!important;
    }
    .how-verified-card{
        right:2%!important;
        min-width:205px!important;
        padding:13px!important;
    }
    .how-verified-card>span{
        flex-basis:40px!important;
        width:40px!important;
        height:40px!important;
        font-size:18px!important;
    }
    .how-verified-card strong{
        font-size:11.5px!important;
    }
    .how-cta__panel{
        padding:32px 22px!important;
    }
}