@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--green:#087443;--deep:#063b29;--lime:#dff6c9;--yellow:#ffd52a;--ink:#09231d;--muted:#60736d;--cream:#fbfaf4;--white:#fff;--line:#dce8e1;--shadow:0 22px 60px rgba(5,55,38,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 40px));margin:auto}.nav{position:sticky;top:14px;z-index:20;margin:14px auto 0;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border:1px solid rgba(8,116,67,.1);border-radius:24px;box-shadow:0 10px 30px rgba(9,35,29,.07)}.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 18px}.logo{width:72px;height:72px;object-fit:contain;display:block}.links{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:600;color:#3f544d}.links a{position:relative;padding:10px 0}.links a:after{content:'';position:absolute;left:0;right:100%;bottom:3px;height:2px;background:var(--green);transition:.3s}.links a:hover:after,.links a.active:after{right:0}.btn{border:0;cursor:pointer;background:var(--green);color:#fff;border-radius:999px;padding:14px 20px;font-weight:700;display:inline-flex;align-items:center;gap:9px;transition:.25s;box-shadow:0 10px 22px rgba(8,116,67,.18)}.btn:hover{transform:translateY(-2px);background:#075f39}.menu{display:none;background:none;border:0;font-size:28px;color:var(--green)}
.hero{padding:90px 0 70px;position:relative}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-weight:800;letter-spacing:.16em;font-size:12px;text-transform:uppercase}.eyebrow i{display:block;width:26px;height:3px;border-radius:99px;background:var(--yellow)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;line-height:.98;letter-spacing:-.04em}h1{font-size:clamp(54px,7vw,88px);margin:18px 0 24px;max-width:760px}h1 span,h2 span{color:var(--green)}.lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:570px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn.alt{background:#fff;color:var(--green);border:1px solid var(--line);box-shadow:none}.hero-art{min-height:520px;position:relative;border-radius:42px;background:linear-gradient(145deg,#e8f7df,#cdebd2 55%,#ffe878);overflow:hidden;box-shadow:var(--shadow)}.blob{position:absolute;border-radius:50%;filter:blur(.2px)}.blob.one{width:330px;height:330px;background:var(--yellow);right:-90px;top:-100px}.blob.two{width:240px;height:240px;background:#fff;left:-90px;bottom:-80px;opacity:.8}.city{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to top,rgba(6,59,41,.12),transparent);clip-path:polygon(0 70%,10% 58%,18% 66%,26% 44%,34% 62%,44% 35%,53% 56%,64% 30%,75% 55%,84% 39%,100% 57%,100% 100%,0 100%)}.phone{position:absolute;width:260px;height:500px;right:80px;top:35px;background:#111b18;border-radius:42px;padding:10px;transform:rotate(8deg);box-shadow:0 30px 50px rgba(0,0,0,.25);animation:float 5s ease-in-out infinite}.screen{height:100%;border-radius:34px;background:#f8faf5;overflow:hidden;padding:24px 18px;position:relative}.status{font-size:11px;color:#64766f;display:flex;justify-content:space-between}.map{height:260px;margin-top:18px;border-radius:22px;background:repeating-linear-gradient(35deg,#e6f0e5 0 22px,#dce8dc 23px 25px);position:relative;overflow:hidden}.route{position:absolute;width:210px;height:110px;border:5px solid var(--green);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(18deg);left:25px;top:80px}.pin{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--yellow);border:5px solid white;box-shadow:0 4px 12px rgba(0,0,0,.16)}.pin.a{left:25px;top:75px}.pin.b{right:30px;bottom:42px}.ride-card{position:absolute;left:15px;right:15px;bottom:15px;background:#fff;border-radius:18px;padding:15px;box-shadow:0 8px 25px rgba(0,0,0,.1)}.ride-card strong{display:block}.mini{font-size:12px;color:#74847f;margin-top:4px}
.ticker{overflow:hidden;background:var(--deep);color:#fff;padding:13px 0}.ticker-track{display:flex;gap:45px;width:max-content;animation:marquee 24s linear infinite;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800}.ticker b{color:var(--yellow)}
.section{padding:110px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.section-head h2{font-size:clamp(42px,5vw,64px);max-width:700px}.section-head p{max-width:390px;color:var(--muted);line-height:1.65}.bento{display:grid;grid-template-columns:1.25fr .75fr .75fr;grid-auto-rows:minmax(180px,auto);gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 10px 28px rgba(9,35,29,.04);transition:.35s;position:relative;overflow:hidden}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card.big{grid-row:span 2;background:var(--deep);color:#fff}.card.yellow{background:var(--yellow)}.card h3{font-size:26px;margin:20px 0 10px}.card p{color:var(--muted);line-height:1.55}.card.big p{color:#d9eee4}.icon{width:52px;height:52px;border-radius:17px;background:var(--lime);display:grid;place-items:center;font-size:25px}.card.big .icon{background:#155d43}.number{position:absolute;right:25px;top:22px;font:700 48px 'Space Grotesk';opacity:.08}
.story{background:var(--green);color:#fff;border-radius:38px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;overflow:hidden;position:relative}.story:before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:var(--yellow);right:-140px;top:-170px}.story h2{font-size:clamp(44px,5vw,65px);position:relative}.story p{color:#d7eee3;line-height:1.7;position:relative}.story .btn{background:var(--yellow);color:var(--deep);box-shadow:none;position:relative}.dashboard{background:#f1f8ed;border-radius:30px;padding:28px;position:relative;z-index:1}.dashboard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dash-title{font-weight:800}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dash-box{background:#fff;border-radius:18px;padding:18px}.dash-value{font:700 31px 'Space Grotesk'}.dash-line{height:7px;background:#dbe9df;border-radius:99px;overflow:hidden;margin-top:14px}.dash-line i{display:block;height:100%;background:var(--green);width:78%}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.step{padding:30px;border-radius:28px;background:#eef8ea;border:1px solid #dbeadc}.step .num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:800}.step h3{margin:25px 0 10px;font-size:25px}.step p{color:var(--muted);line-height:1.6}.cta{padding:75px 0}.cta-box{background:var(--yellow);border-radius:34px;padding:48px 52px;display:flex;justify-content:space-between;align-items:center;gap:25px;overflow:hidden}.cta-box h2{font-size:clamp(40px,5vw,62px)}.cta-box .btn{background:var(--deep)}
footer{padding:45px 0 30px;border-top:1px solid var(--line);background:#fff}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer-logo{width:130px;height:auto;object-fit:contain}.footer p{color:var(--muted);line-height:1.6}.footer-links{display:grid;gap:11px;color:#4e615a;font-size:14px}.copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;color:#81908b;font-size:12px;display:flex;justify-content:space-between}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}.page-hero{padding:85px 0 55px}.page-hero h1{font-size:clamp(54px,7vw,86px)}.page-hero .lead{max-width:720px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-grid .card{min-height:250px}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.form{background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px}.field{display:grid;gap:8px;margin-bottom:18px}.field label{font-size:13px;font-weight:700}.field input,.field textarea{font:inherit;border:1px solid var(--line);border-radius:14px;padding:14px 15px;outline:none;background:#fbfcfa}.field textarea{min-height:130px;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(8,116,67,.08)}
@keyframes float{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-12px)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:850px){.links{display:none}.menu{display:block}.nav-inner{height:68px}.logo{width:64px;height:64px}.hero{padding:60px 0}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:470px}.phone{right:50%;transform:translateX(50%) rotate(7deg);width:225px;height:430px}.bento{grid-template-columns:1fr 1fr}.card.big{grid-row:auto;grid-column:span 2}.story{grid-template-columns:1fr;padding:34px}.steps,.feature-grid,.contact-grid{grid-template-columns:1fr}.section{padding:80px 0}.section-head{display:block}.section-head p{margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr}.cta-box{display:block;padding:36px}.cta-box .btn{margin-top:22px}.copyright{display:block}.copyright span{display:block;margin-top:8px}}
@media(max-width:520px){.container{width:min(100% - 24px,1160px)}h1{font-size:50px}.hero-art{min-height:410px;border-radius:30px}.phone{width:200px;height:390px}.bento{grid-template-columns:1fr}.card.big{grid-column:auto}.footer-grid{grid-template-columns:1fr}.story{border-radius:28px}.dash-grid{grid-template-columns:1fr}.ticker-track{animation-duration:18s}}


/* ===== Desktop V9 UI polish ===== */
@media (min-width:851px){
  .container{width:min(1280px,calc(100% - 72px))}
  .nav{top:18px;margin-top:18px;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 12px 36px rgba(9,35,29,.08)}
  .nav-inner{height:82px;padding:8px 10px 8px 24px}
  .logo{width:78px;height:78px}
  .links{gap:8px;padding:5px;background:#f5f8f3;border:1px solid #e6eee8;border-radius:999px}
  .links a{padding:11px 15px;border-radius:999px;color:#53665f;transition:background .25s,color .25s,transform .25s}
  .links a:after{display:none}
  .links a:hover{background:#e7f4e3;color:var(--deep);transform:translateY(-1px)}
  .links a.active{background:var(--deep);color:#fff;box-shadow:0 6px 14px rgba(6,59,41,.16)}
  

  .hero{padding:105px 0 82px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(500px,.9fr);gap:70px}
  .hero .eyebrow{font-size:13px}
  h1{font-size:clamp(68px,7.1vw,104px);max-width:800px}
  .lead{font-size:19px;max-width:610px}
  .hero-art{min-height:600px;border-radius:48px;box-shadow:0 28px 70px rgba(5,55,38,.16);transform:translateZ(0)}
  .hero-art:after{content:'RIDE TOGETHER';position:absolute;right:24px;top:24px;background:rgba(255,255,255,.76);border:1px solid rgba(8,116,67,.1);backdrop-filter:blur(10px);border-radius:999px;padding:9px 13px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--deep)}
  .phone{width:285px;height:548px;right:96px;top:30px}
  .ticker{padding:16px 0}
  .ticker-track{font-size:13px;gap:60px}
  .section{padding:125px 0}
  .section-head{margin-bottom:52px}
  .section-head h2{font-size:clamp(50px,5vw,72px)}
  .section-head p{font-size:16px}
  .bento{grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:230px 230px;gap:20px}
  .card{border-radius:32px;padding:32px;box-shadow:0 12px 35px rgba(9,35,29,.045)}
  .card.big{grid-row:span 2}
  .card h3{font-size:29px}
  .card.big h3{font-size:34px}
  .story{border-radius:44px;padding:70px;gap:70px;box-shadow:0 24px 65px rgba(5,55,38,.14)}
  .dashboard{padding:34px;border-radius:34px;box-shadow:0 20px 50px rgba(0,0,0,.12)}
  .steps{gap:20px}
  .step{padding:34px;border-radius:32px;min-height:270px;transition:transform .3s,box-shadow .3s}
  .step:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(9,35,29,.08)}
  .cta{padding:95px 0 110px}
  .cta-box{border-radius:42px;padding:58px 64px;box-shadow:0 24px 60px rgba(9,35,29,.1)}
  footer{padding-top:60px}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr}
  .mobile-panel,.mobile-backdrop{display:none!important}
}

/* Mobile menu: preserves the existing mobile appearance, adds a slide-out navigation */
.mobile-panel,.mobile-backdrop{display:none}
@media(max-width:850px){
  .mobile-backdrop{position:fixed;inset:0;background:rgba(4,31,22,.48);backdrop-filter:blur(5px);z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
  .mobile-panel{display:block;position:fixed;z-index:1100;left:12px;right:12px;top:12px;height:calc(100dvh - 24px);width:auto;background:rgba(255,255,255,.98);border:1px solid rgba(8,116,67,.12);border-radius:28px;box-shadow:0 28px 80px rgba(4,31,22,.28);padding:10px 18px 22px;transform:translateY(-115%);transition:transform .34s cubic-bezier(.2,.8,.2,1);overflow-y:auto}
  body.menu-open .mobile-panel{transform:translateY(0)}
  body.menu-open .mobile-backdrop{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .mobile-panel-head{display:flex;justify-content:space-between;align-items:center;padding:4px 0 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.98);z-index:2}
  .mobile-menu-logo{width:64px;height:64px;object-fit:contain;display:block}
  .mobile-close{border:0;background:#e9f5e5;color:var(--deep);width:44px;height:44px;border-radius:50%;font-size:27px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .mobile-links{display:grid;gap:8px;padding:22px 0 8px}
  .mobile-link{padding:16px 16px;border-radius:16px;font-weight:700;color:#40554d;font-size:18px}
  .mobile-link.active{background:var(--deep);color:#fff}
}

/* ===== V10 desktop-only interface refinement ===== */
@media (min-width:851px){
  .nav{max-width:1280px;top:18px;border-radius:26px;padding:0 4px;background:rgba(255,255,255,.94)}
  .nav-inner{height:82px;padding-left:22px}
  .links{gap:8px;background:#f2f7f2;border:1px solid #e0ebe4;border-radius:999px;padding:5px}
  .links a{padding:10px 15px;border-radius:999px;transition:.25s;background:transparent}
  .links a:after{display:none}
  .links a:hover{background:#e5f2e8;color:var(--deep)}
  .links a.active{background:var(--deep);color:#fff;box-shadow:0 7px 18px rgba(6,59,41,.16)}
  
  .hero{padding-top:105px}
  .hero-grid{gap:76px}
  .hero-art{min-height:560px;border-radius:48px;box-shadow:0 30px 80px rgba(5,55,38,.14)}
  .phone{width:278px;height:530px;right:92px;top:40px}
  .section{padding:125px 0}
  .section-head{margin-bottom:50px}
  .bento{gap:20px}
  .card{padding:34px;border-radius:30px}
  .story{min-height:430px}
  .story-visual,.feature-visual{display:block;position:relative;min-height:320px;border-radius:32px;overflow:hidden;background:linear-gradient(145deg,#dff3d5,#bfe5c8 60%,#ffe36a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .story-sun,.fv-orb{position:absolute;width:190px;height:190px;border-radius:50%;background:var(--yellow);right:-45px;top:-55px}
  .story-road{position:absolute;width:80%;height:120px;left:10%;bottom:45px;border:20px solid rgba(255,255,255,.9);border-radius:50%;transform:rotate(-9deg);box-shadow:0 0 0 2px rgba(8,116,67,.12)}
  .story-road:after{content:'';position:absolute;inset:22px 45px;border-top:4px dashed var(--green);border-radius:50%;transform:rotate(3deg)}
  .story-road span{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--green);z-index:2}
  .story-road span:nth-child(1){left:10%;top:45%}.story-road span:nth-child(2){right:22%;top:8%}.story-road span:nth-child(3){right:4%;bottom:22%}
  .story-city{position:absolute;bottom:0;left:0;right:0;height:120px;display:flex;align-items:end;gap:9px;padding:0 28px}
  .story-city i{display:block;width:11%;background:#0b6d43;border-radius:8px 8px 0 0;opacity:.82}
  .story-city i:nth-child(1){height:42px}.story-city i:nth-child(2){height:72px}.story-city i:nth-child(3){height:54px}.story-city i:nth-child(4){height:92px}.story-city i:nth-child(5){height:63px}
  .story-note{position:absolute;left:28px;top:30px;font:600 26px 'Space Grotesk';line-height:1.02;color:var(--deep);transform:rotate(-4deg)}
  .story-note b{color:#e09e00}
  .story-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--green);box-shadow:0 5px 14px rgba(0,0,0,.1)}
  .story-dot.d1{left:42%;top:35%}.story-dot.d2{right:18%;top:57%}
  .feature-visual{background:linear-gradient(145deg,#0a6840,#0a8150 60%,#ffd52a);min-height:370px}
  .fv-orb{background:#ffd52a;width:250px;height:250px;right:-80px;top:-90px}
  .fv-phone{position:absolute;width:215px;height:340px;left:50%;top:24px;transform:translateX(-50%) rotate(7deg);background:#10201a;border-radius:30px;padding:8px;box-shadow:0 28px 45px rgba(0,0,0,.25)}
  .fv-screen{height:100%;background:#f7faf4;border-radius:24px;padding:18px;overflow:hidden;position:relative}
  .fv-bar{height:8px;width:70px;background:#b6c9bf;border-radius:99px;margin:auto}
  .fv-map{height:185px;margin-top:18px;border-radius:20px;background:repeating-linear-gradient(35deg,#e6f0e5 0 20px,#dce8dc 21px 23px);position:relative}
  .fv-map:after{content:'';position:absolute;width:140px;height:70px;left:18px;top:62px;border:4px solid var(--green);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(16deg)}
  .fv-pill{position:absolute;left:18px;right:18px;bottom:18px;background:#fff;border-radius:15px;padding:11px;font-size:12px;font-weight:700;box-shadow:0 7px 20px rgba(0,0,0,.1)}
  .fv-pill b{float:right;color:var(--green)}
  .fv-label{position:absolute;padding:10px 14px;border-radius:999px;background:#fff;color:var(--deep);font-weight:800;box-shadow:0 12px 25px rgba(0,0,0,.12)}
  .fv-label.l1{left:28px;top:80px}.fv-label.l2{right:25px;top:170px}.fv-label.l3{left:34px;bottom:55px}
}

/* ===== V11 About desktop refinement =====
   Desktop only: mobile layout remains untouched. */
@media (min-width:851px){
  .about-bento{
    grid-template-columns:1.15fr .925fr .925fr;
    grid-template-rows:260px 260px;
    gap:20px;
    align-items:stretch;
  }
  .about-bento .card{
    min-width:0;
    min-height:0;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .about-bento .card.big{
    grid-row:span 2;
    padding:36px;
    background:linear-gradient(145deg,#063b29 0%,#087443 72%,#0b8050 100%);
  }
  .about-bento .card.big:after{
    content:'LOCAL • CONNECTED • TOGETHER';
    position:absolute;
    right:24px;
    bottom:22px;
    font-size:10px;
    letter-spacing:.16em;
    font-weight:800;
    color:rgba(255,255,255,.58);
  }
  .about-bento .card.big h3{font-size:42px;max-width:390px;margin-top:22px}
  .about-bento .card.big p{font-size:17px;line-height:1.65;max-width:390px;margin-top:2px}
  .about-bento .card:not(.big){
    justify-content:center;
  }
  .about-bento .card:not(.big) h3{font-size:30px;margin:18px 0 8px}
  .about-bento .card:not(.big) p{font-size:15px;line-height:1.5;max-width:290px}
  .about-bento .icon{flex:0 0 auto;width:54px;height:54px}
  .about-bento .card.yellow{background:linear-gradient(145deg,#ffd52a,#ffe66c)}
  .about-bento .card:nth-child(3){background:#f4faf0}
  .about-bento .card:nth-child(4){background:#e8f5e1}

  .about-story{
    grid-template-columns:minmax(330px,.82fr) minmax(560px,1.18fr);
    gap:54px;
    min-height:500px;
    padding:58px;
    align-items:stretch;
  }
  .about-story > div:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:440px;
    position:relative;
    z-index:2;
  }
  .about-story h2{font-size:clamp(48px,4.4vw,68px);line-height:.93;margin:14px 0 22px}
  .about-story > div:first-child p{font-size:17px;line-height:1.7;max-width:420px;margin:0}
  .about-story .steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    align-self:center;
    min-width:0;
  }
  .about-story .step{
    min-width:0;
    min-height:300px;
    padding:25px 22px;
    border-radius:26px;
    background:rgba(251,250,244,.97);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 18px 35px rgba(4,50,34,.13);
    display:flex;
    flex-direction:column;
  }
  .about-story .step .num{width:38px;height:38px;flex:0 0 auto;font-size:13px}
  .about-story .step h3{font-size:25px;margin:24px 0 10px;color:var(--deep)}
  .about-story .step p{font-size:15px;line-height:1.55;color:#5f716a;margin:0}
  .about-story .step:nth-child(2){transform:translateY(24px)}
  .about-story .step:nth-child(3){transform:translateY(-8px)}
  .about-story .step:hover{transform:translateY(-8px);box-shadow:0 24px 45px rgba(4,50,34,.18)}
  .about-story .step:nth-child(2):hover{transform:translateY(16px)}
  .about-story:after{
    content:'LISTEN → BUILD → IMPROVE';
    position:absolute;
    left:58px;
    bottom:20px;
    font-size:10px;
    letter-spacing:.18em;
    font-weight:800;
    color:rgba(255,255,255,.52);
  }
}

/* ===== V12 DESKTOP ALIGNMENT FIX =====
   Only affects desktop/tablet-desktop layouts. Mobile styles are untouched. */
@media (min-width:851px){
  /* About — Why BuddyRide: balanced 2x2 supporting cards beside the tall card */
  .about-bento{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) minmax(0,.88fr);
    grid-template-rows:minmax(230px,1fr) minmax(230px,1fr);
    gap:20px;
    align-items:stretch;
  }
  .about-bento .card,
  .about-bento .card.big{
    min-width:0;
    width:auto;
    box-sizing:border-box;
    overflow:hidden;
  }
  .about-bento .card.big{
    grid-column:1;
    grid-row:1 / span 2;
    padding:34px;
  }
  .about-bento .card:not(.big){
    min-height:0;
    padding:28px;
    justify-content:flex-start;
  }
  .about-bento .card h3,
  .about-bento .card p{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .about-bento .card.big h3{
    font-size:clamp(32px,2.7vw,42px);
    line-height:1.02;
    margin:18px 0 10px;
  }
  .about-bento .card.big p{
    font-size:16px;
    line-height:1.58;
    max-width:34ch;
  }
  .about-bento .card:not(.big) h3{
    font-size:clamp(24px,2vw,30px);
    line-height:1.05;
    margin:16px 0 8px;
  }
  .about-bento .card:not(.big) p{
    font-size:14px;
    line-height:1.5;
    max-width:30ch;
  }

  /* Home — feature bento: fixed visual rhythm, no clipped headings */
  main .bento:not(.about-bento){
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr);
    grid-template-rows:minmax(250px,1fr) minmax(250px,1fr);
    gap:20px;
    align-items:stretch;
  }
  main .bento:not(.about-bento) .card{
    min-width:0;
    min-height:0;
    box-sizing:border-box;
    overflow:hidden;
    padding:28px;
  }
  main .bento:not(.about-bento) .card.big{
    grid-column:1;
    grid-row:1 / span 2;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  main .bento:not(.about-bento) .card:not(.big){
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  main .bento:not(.about-bento) .card h3,
  main .bento:not(.about-bento) .card p{
    min-width:0;
    overflow-wrap:anywhere;
  }
  main .bento:not(.about-bento) .card.big h3{
    font-size:clamp(34px,3vw,48px);
    line-height:1.02;
    margin:18px 0 10px;
    max-width:9ch;
  }
  main .bento:not(.about-bento) .card.big p{
    font-size:16px;
    line-height:1.58;
    max-width:30ch;
  }
  main .bento:not(.about-bento) .card:not(.big) h3{
    font-size:clamp(23px,1.9vw,29px);
    line-height:1.05;
    margin:15px 0 8px;
  }
  main .bento:not(.about-bento) .card:not(.big) p{
    font-size:14px;
    line-height:1.5;
    max-width:28ch;
  }
  main .bento:not(.about-bento) .number{
    font-size:42px;
    right:20px;
    top:17px;
  }

  /* Keep the following Home story visually centered with the grid above. */
  .story{
    min-height:520px;
    align-items:stretch;
  }
  .story > div:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}


/* ===== V13 MOBILE VISUAL FIX =====
   Fixes only the About approach cards and mobile hero artwork.
   Desktop and all other sections remain unchanged. */
@media (max-width:850px){
  /* About → Our Approach: dark readable headings on the light step cards. */
  .about-story .step h3{
    color:var(--deep);
  }

  /* Make the mobile hero artwork feel centered and intentional instead of clipped. */
  .hero-art{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:440px;
  }
  .hero-art .phone{
    left:50%;
    right:auto;
    top:28px;
    width:min(205px,58vw);
    height:min(398px,112vw);
    transform:translateX(-50%) rotate(4deg);
    transform-origin:center center;
  }
  .hero-art .blob.one{
    width:280px;
    height:280px;
    right:-95px;
    top:-75px;
  }
  .hero-art .blob.two{
    width:210px;
    height:210px;
    left:-95px;
    bottom:-80px;
  }
}

@media (max-width:520px){
  .hero-art{
    min-height:400px;
  }
  .hero-art .phone{
    width:194px;
    height:378px;
    top:18px;
    transform:translateX(-50%) rotate(3deg);
  }
}

/* ===== LAUNCH PAGE ===== */
.launch-hero{position:relative;overflow:hidden;padding:92px 0 86px;background:var(--deep);color:#fff;min-height:610px;display:flex;align-items:center}.launch-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(255,213,42,.18),transparent 30%),radial-gradient(circle at 20% 80%,rgba(8,116,67,.5),transparent 35%)}.launch-hero-inner{position:relative;z-index:2;max-width:800px}.launch-hero .eyebrow{color:var(--yellow)}.launch-hero .eyebrow i{background:var(--yellow)}.launch-hero h1{font-size:clamp(58px,8vw,100px);margin:20px 0 20px}.launch-hero h1 span{color:var(--yellow)}.launch-hero .lead{color:#d8eae2;max-width:670px}.launch-date{display:inline-flex;align-items:center;gap:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 17px;font:700 13px 'Space Grotesk';letter-spacing:.14em;margin:4px 0 22px}.launch-date b{color:var(--yellow)}.launch-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.launch-hero .btn{background:var(--yellow);color:var(--deep);box-shadow:none}.launch-hero .btn.alt{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}.launch-orb{position:absolute;border-radius:50%;z-index:1}.launch-orb-one{width:360px;height:360px;background:var(--yellow);right:-110px;top:-130px;opacity:.9}.launch-orb-two{width:230px;height:230px;border:2px solid rgba(255,255,255,.15);right:170px;bottom:-120px}.launch-section{padding:95px 0}.launch-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.launch-card{border:1px solid var(--line);border-radius:32px;padding:38px;background:#fff;box-shadow:0 10px 30px rgba(9,35,29,.05)}.launch-main{background:#f1f8ed}.launch-icon{width:60px;height:60px;border-radius:19px;background:var(--yellow);display:grid;place-items:center;font-size:28px;margin-bottom:28px}.launch-card h2{font-size:clamp(40px,5vw,64px);margin:16px 0}.launch-card h2 span{color:var(--green)}.launch-card p{color:var(--muted);line-height:1.7;max-width:650px}.launch-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.launch-points>div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px}.launch-points b{font-size:22px;display:block;margin-bottom:12px}.launch-points strong,.launch-points small{display:block}.launch-points strong{font-size:14px}.launch-points small{color:var(--muted);line-height:1.45;margin-top:5px}.launch-social{background:var(--deep);color:#fff;display:flex;flex-direction:column;justify-content:center}.launch-social .eyebrow{color:var(--yellow)}.launch-social .eyebrow i{background:var(--yellow)}.social-mark{width:64px;height:64px;border-radius:20px;background:var(--yellow);color:var(--deep);display:grid;place-items:center;font-size:39px;font-weight:700;margin-bottom:30px}.launch-social h3{font-size:38px;margin:17px 0 10px}.launch-social p{color:#cfe3da}.social-link{margin-top:20px;padding:16px 18px;border:1px solid rgba(255,255,255,.16);border-radius:17px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:rgba(255,255,255,.06);transition:.25s}.social-link:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}.social-link b{color:var(--yellow);font-size:13px}.launch-strip{padding:0 0 85px}.launch-strip-inner{border-radius:34px;background:var(--yellow);padding:50px 55px;display:flex;align-items:center;justify-content:space-between;gap:30px}.launch-strip h2{font-size:clamp(42px,5vw,65px);margin-top:15px}.launch-strip h2 span{color:var(--deep)}.launch-strip .btn{background:var(--deep)}
@media(max-width:850px){.launch-hero{min-height:590px;padding:70px 0}.launch-orb-one{width:280px;height:280px;right:-130px}.launch-grid{grid-template-columns:1fr}.launch-points{grid-template-columns:1fr}.launch-strip-inner{padding:38px 30px;align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.launch-hero{padding:60px 0}.launch-hero h1{font-size:clamp(52px,16vw,76px)}.launch-card{padding:28px}.launch-strip-inner{padding:32px 25px}.launch-strip{padding-bottom:55px}}

/* ===== FAQ PAGE ===== */
.faq-hero{background:linear-gradient(180deg,#f5faef 0%,#fff 100%)}
.faq-hero h1 span{color:var(--green)}
.faq-section{padding-top:55px}
.faq-intro{display:grid;grid-template-columns:1fr .72fr;gap:40px;align-items:end;margin-bottom:55px}
.faq-intro h2{font-size:clamp(42px,5vw,66px);line-height:.98;margin:18px 0 0;max-width:12ch}
.faq-intro>p{color:var(--muted);line-height:1.7;max-width:48ch;margin:0 0 4px}
.faq-group{margin:0 auto 50px;max-width:940px}
.faq-group h3{font-size:30px;margin:0 0 16px;padding-left:2px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);background:#fff}
.faq-list summary{list-style:none;cursor:pointer;padding:23px 52px 23px 22px;font:700 18px 'Space Grotesk';position:relative;color:var(--deep)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';position:absolute;right:22px;top:18px;font-size:28px;font-weight:400;color:var(--green);transition:.2s}
.faq-list details[open] summary:after{content:'−'}
.faq-list details[open] summary{background:#f6faef}
.faq-list details p{margin:0;padding:0 52px 24px 22px;color:var(--muted);line-height:1.7;max-width:800px}
.faq-list strong{color:var(--deep)}
@media(max-width:850px){.faq-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px}.faq-intro h2{max-width:14ch}.faq-group{margin-bottom:38px}.faq-group h3{font-size:26px}.faq-list summary{font-size:16px;padding:20px 48px 20px 18px}.faq-list summary:after{right:17px;top:15px}.faq-list details p{padding:0 18px 21px;font-size:15px;line-height:1.65}}



/* ===== FAQ CONTACT / SUPPORT ===== */
.contact-support{max-width:940px;margin:78px auto 0;padding:42px;border-radius:34px;background:var(--deep);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;box-shadow:0 24px 65px rgba(5,55,38,.14)}
.support-copy .eyebrow{color:var(--yellow)}
.support-copy .eyebrow i{background:var(--yellow)}
.support-copy h2{font-size:clamp(40px,4.5vw,60px);line-height:.96;margin:16px 0 18px}
.support-copy h2 span{color:var(--yellow)}
.support-copy p{color:#d7eee3;line-height:1.7;max-width:50ch;margin:0}
.support-options{display:grid;gap:12px}
.support-card{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:21px;background:rgba(255,255,255,.07);color:#fff;transition:transform .22s ease,background .22s ease,border-color .22s ease}
.support-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.support-icon{width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;background:var(--yellow);color:var(--deep);font-size:22px;font-weight:800}
.support-card small,.support-card strong,.support-card em{display:block}
.support-card small{color:#bcd8cb;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.support-card strong{font:700 15px 'Space Grotesk';word-break:break-word}
.support-card em{font-style:normal;color:var(--yellow);font-size:12px;font-weight:700;margin-top:5px}
@media(max-width:850px){.contact-support{grid-template-columns:1fr;margin-top:55px;padding:32px 26px;border-radius:28px;gap:28px}.support-copy h2{font-size:44px}}
@media(max-width:520px){.contact-support{padding:28px 20px;margin-top:45px}.support-copy p{font-size:15px}.support-card{padding:15px}.support-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}.support-card strong{font-size:14px}.support-card em{font-size:11px}}

/* ===== FINAL RESPONSIVE POLISH ===== */
@media (min-width:851px){
  .nav-inner{min-height:76px}
  .links{gap:24px}
  .page-hero{padding-top:100px;padding-bottom:90px}
  .section{scroll-margin-top:90px}
  .cta-box{min-height:180px;align-items:center}
}
@media (max-width:850px){
  body{overflow-x:hidden}
  .nav{position:sticky;top:0;z-index:1000}
  .nav-inner{padding:0 4px}
  .logo{width:62px;height:62px;object-fit:contain}
  .hero,.page-hero{padding-top:56px;padding-bottom:56px}
  .page-hero h1{line-height:.98}
  .lead{font-size:16px;line-height:1.65}
  .section{padding:64px 0}
  .section-head h2{line-height:1}
  .card{min-width:0}
  .story{gap:28px}
  .steps{gap:12px}
  .cta{padding:0 0 64px}
  .cta-box{border-radius:26px}
  .footer-grid{gap:30px}
  .footer-logo{max-width:150px}
  .copyright{padding-top:24px}
}
@media (max-width:520px){
  .container{width:min(100% - 28px,1160px)}
  .hero,.page-hero{padding-top:46px;padding-bottom:46px}
  h1{font-size:clamp(44px,14vw,58px);letter-spacing:-.035em}
  h2{letter-spacing:-.025em}
  .btn{width:100%;justify-content:center;text-align:center}
  .launch-actions{width:100%}
  .launch-actions .btn{width:100%}
  .cta-box{padding:30px 24px}
  .faq-list summary{padding-right:44px}
  .faq-list details p{padding-right:18px}
}

/* ===== V13 ABOUT — FIELD RESEARCH STORY ===== */
.research-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end;margin-bottom:42px}
.research-heading h2{font-size:clamp(44px,5.2vw,70px);line-height:.94;margin-top:14px}
.research-heading p{max-width:500px;color:var(--muted);font-size:17px;line-height:1.72;margin:0 0 4px}
.research-feature{display:grid;grid-template-columns:1.12fr .88fr;min-height:570px;border-radius:38px;overflow:hidden;background:var(--deep);box-shadow:0 24px 65px rgba(5,55,38,.14)}
.research-feature-image{min-height:570px;position:relative;overflow:hidden;background:#173f31}
.research-feature-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(6,59,41,.18))}
.research-feature-image img{width:100%;height:100%;object-fit:cover;display:block}
.research-feature-copy{padding:62px 58px;display:flex;flex-direction:column;justify-content:center;position:relative}
.research-feature-copy:before{content:'FIELD NOTES';position:absolute;right:34px;top:28px;color:rgba(255,255,255,.18);font:700 10px 'DM Sans';letter-spacing:.2em}
.research-kicker{display:inline-flex;width:max-content;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#ffe15a;font-size:10px;font-weight:800;letter-spacing:.16em}
.research-feature-copy h3{color:#fff;font-size:clamp(36px,3.7vw,54px);line-height:.98;margin:22px 0 18px;max-width:10ch}
.research-feature-copy p{color:#d7eee3;font-size:16px;line-height:1.7;max-width:48ch;margin:0 0 15px}
.research-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.research-points div{padding:15px 14px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.research-points b{display:block;color:#ffe15a;font:700 12px 'Space Grotesk';margin-bottom:8px}
.research-points span{display:block;color:#fff;font-size:12px;font-weight:700;line-height:1.3}
.research-gallery{display:grid;grid-template-columns:1.25fr .75fr .75fr;grid-template-rows:260px 260px;gap:16px;margin-top:18px}
.research-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:26px;background:#dfeae3;min-width:0}
.research-gallery figure.gallery-main{grid-row:1 / span 2}
.research-gallery figure.gallery-wide{grid-column:2 / span 2}
.research-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.research-gallery figure:hover img{transform:scale(1.035)}
.research-gallery figure:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,35,25,.72),transparent 45%);pointer-events:none}
.research-gallery figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;font-size:12px;line-height:1.4;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.22)}

@media(max-width:850px){
  .research-heading{grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .research-heading h2{font-size:clamp(42px,10vw,58px)}
  .research-heading p{font-size:16px}
  .research-feature{grid-template-columns:1fr;min-height:0;border-radius:30px}
  .research-feature-image{height:390px;min-height:0}
  .research-feature-copy{padding:38px 30px 34px}
  .research-feature-copy h3{font-size:40px}
  .research-points{grid-template-columns:1fr;gap:9px}
  .research-points div{display:flex;align-items:center;gap:12px;padding:12px 14px}
  .research-points b{margin:0;width:25px}
  .research-points span{font-size:13px}
  .research-gallery{grid-template-columns:1fr 1fr;grid-template-rows:280px 220px 220px;gap:12px}
  .research-gallery figure.gallery-main{grid-column:1 / span 2;grid-row:auto}
  .research-gallery figure.gallery-wide{grid-column:1 / span 2}
  .research-gallery figure{border-radius:20px}
}
@media(max-width:520px){
  .research-section{padding-top:70px}
  .research-feature-image{height:300px}
  .research-feature-copy{padding:30px 23px 26px}
  .research-feature-copy h3{font-size:34px}
  .research-feature-copy p{font-size:15px;line-height:1.65}
  .research-gallery{grid-template-columns:1fr;grid-template-rows:270px 220px 220px 220px;gap:10px}
  .research-gallery figure.gallery-main,.research-gallery figure.gallery-wide{grid-column:auto}
  .research-gallery figure{border-radius:18px}
}

/* ===== V13 SCROLL MOTION ===== */
@media (prefers-reduced-motion:no-preference){
  .scroll-float{transform:translate3d(0,var(--scroll-y,0px),0);will-change:transform}
  .hero-art .phone{--scroll-y:0px}
  .hero-art .blob.one{--scroll-y:0px}
  .hero-art .blob.two{--scroll-y:0px}
  .story-visual{--scroll-y:0px}
  .story-visual .story-sun{--scroll-y:0px}
  .story-visual .story-note{--scroll-y:0px}
  .reveal{transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
  .reveal.show{transition-delay:var(--reveal-delay,0ms)}
}
@media (prefers-reduced-motion:reduce){
  .phone{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===== V14 HOW IT WORKS — SCROLL TRANSFORM ===== */
.steps-scroll{position:relative;padding:8px 0 2px}
.steps-scroll .steps{position:relative;z-index:2}
.steps-progress{position:absolute;left:16.66%;right:16.66%;top:55px;height:3px;background:#d9e7dd;border-radius:99px;z-index:1;overflow:hidden}
.steps-progress span{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transform-origin:left center;transition:width .12s linear}
.how-step{position:relative;min-height:285px;transform-origin:center center;transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.how-step .num{position:relative;z-index:3;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.how-step .step-hint{position:absolute;left:30px;bottom:25px;font-size:9px;letter-spacing:.17em;font-weight:800;color:#8a9b94;opacity:0;transform:translateY(8px);transition:.25s ease}
.how-step .step-hint span{color:var(--green);font-size:13px;margin-left:4px}
.how-step.is-active{transform:translateY(-10px) scale(1.035);background:#fff;border-color:rgba(8,116,67,.2);box-shadow:0 24px 55px rgba(5,55,38,.13);z-index:4}
.how-step.is-active .num{transform:scale(1.12);background:var(--deep);box-shadow:0 8px 20px rgba(6,59,41,.2)}
.how-step.is-active .step-hint{opacity:1;transform:none}
.how-step.is-past{opacity:.78;transform:translateY(4px) scale(.98)}
.how-step.is-next{opacity:.9;transform:translateY(2px) scale(.985)}
.steps-status{display:flex;align-items:center;justify-content:center;gap:9px;margin:28px auto 0;color:var(--muted);font-size:13px;min-height:24px}
.steps-status b{color:var(--deep);font-size:12px;letter-spacing:.05em}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,213,42,.16)}
.status-copy{transition:opacity .18s ease}

@media(max-width:850px){
  .steps-progress{left:12%;right:12%;top:52px}
  .how-step{min-height:245px}
  .how-step.is-active{transform:translateY(-7px) scale(1.015)}
  .how-step.is-past{transform:translateY(2px) scale(.99)}
  .how-step .step-hint{left:24px;bottom:20px}
  .steps-status{font-size:12px;flex-wrap:wrap}
}
@media(max-width:520px){
  .steps-progress{display:none}
  .how-step{min-height:225px}
  .how-step.is-active{transform:translateY(-5px) scale(1.01)}
  .steps-status{justify-content:flex-start;padding-left:5px}
}
@media(prefers-reduced-motion:reduce){
  .how-step,.how-step .num,.how-step .step-hint,.steps-progress span{transition:none!important}
}

/* ===== V15 DESKTOP HOW IT WORKS — APP PREVIEW ===== */
.how-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:52px;align-items:center;position:relative}
.how-device{position:sticky;top:110px;align-self:start;min-height:470px;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translateZ(0)}
.device{position:relative;width:244px;height:468px;border:9px solid #17241f;border-radius:38px;background:#17241f;padding:7px;box-shadow:0 30px 70px rgba(5,45,31,.22),0 0 0 1px rgba(255,255,255,.35);transform:rotate(3deg);transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.device-notch{position:absolute;z-index:4;top:9px;left:50%;width:78px;height:18px;transform:translateX(-50%);background:#17241f;border-radius:0 0 14px 14px}
.device-screen{position:relative;overflow:hidden;height:100%;border-radius:27px;background:#f3f8f1;color:#18372a}
.device-top{height:55px;padding:19px 17px 8px;display:flex;justify-content:space-between;font-size:10px;position:relative;z-index:3}
.device-top span{color:#7b8b84}
.preview-map{position:absolute;inset:55px 0 154px;background:radial-gradient(circle at 20% 30%,#dcebd9 0 10%,transparent 11%),linear-gradient(135deg,#edf5e9,#dfece0 48%,#f1f5ed);overflow:hidden}
.preview-map:before,.preview-map:after{content:"";position:absolute;background:rgba(255,255,255,.78);height:3px;width:135%;left:-20%;transform:rotate(28deg);top:45%}
.preview-map:after{transform:rotate(-18deg);top:62%;background:rgba(194,216,197,.75);height:2px}
.preview-route{position:absolute;width:175px;height:110px;left:33px;top:75px;border:4px solid var(--green);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(23deg);filter:drop-shadow(0 4px 5px rgba(5,90,52,.14));transition:transform .5s ease}
.preview-pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 5px rgba(6,92,53,.12);transition:all .45s ease}.pin-one{left:32px;top:77px}.pin-two{right:45px;top:128px;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,225,90,.2)}.pin-three{left:50%;top:54px;opacity:.35;transform:scale(.7)}
.preview-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:20px 17px 17px;box-shadow:0 -8px 25px rgba(30,70,45,.08);transition:transform .45s ease}
.preview-label{font-size:8px;font-weight:800;letter-spacing:.15em;color:#8a9b94;margin-bottom:7px}.preview-title{display:block;font-size:18px;line-height:1.1;margin-bottom:5px}.preview-meta{font-size:10px;color:#7b8b84}.preview-action{margin-top:14px;border-radius:11px;background:var(--deep);color:#fff;padding:10px 12px;font-size:10px;font-weight:800;display:flex;justify-content:space-between}.preview-action span{font-size:13px}
.device-caption{margin-top:20px;text-align:center;max-width:250px;transition:opacity .3s ease,transform .4s ease}.device-step{display:block;font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--green);margin-bottom:5px}.device-copy{font-size:12px;color:var(--muted)}
.device-glow{position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,225,90,.22);filter:blur(28px);transform:translate(16px,18px);pointer-events:none}
.how-device.is-step-2 .device{transform:rotate(-3deg) translateY(-5px) scale(1.025);box-shadow:0 38px 85px rgba(5,45,31,.25),0 0 0 1px rgba(255,255,255,.4)}
.how-device.is-step-3 .device{transform:rotate(2deg) translateY(-9px) scale(1.045);box-shadow:0 42px 90px rgba(5,45,31,.28),0 0 0 1px rgba(255,255,255,.4)}
.how-device.is-step-2 .preview-route{transform:rotate(-18deg) translate(5px,3px) scale(.92)}
.how-device.is-step-3 .preview-route{transform:rotate(8deg) translate(12px,-8px) scale(.86)}
.how-device.is-step-2 .pin-one{left:58px;top:91px}.how-device.is-step-2 .pin-two{right:34px;top:112px}.how-device.is-step-2 .pin-three{left:48%;top:84px;opacity:1;transform:scale(.85)}
.how-device.is-step-3 .pin-one{left:73px;top:117px}.how-device.is-step-3 .pin-two{right:29px;top:93px}.how-device.is-step-3 .pin-three{left:70%;top:73px;opacity:1;transform:scale(1)}
.how-device.is-step-2 .preview-title:after{content:"Driver found"}.how-device.is-step-3 .preview-title:after{content:"You're on your way"}.how-device.is-step-2 .preview-title,.how-device.is-step-3 .preview-title{font-size:0}.how-device.is-step-2 .preview-title:after,.how-device.is-step-3 .preview-title:after{font-size:18px}.how-device.is-step-2 .preview-meta:after{content:"Arriving in a few minutes · Verified"}.how-device.is-step-3 .preview-meta:after{content:"Ride in progress · Tracking live"}.how-device.is-step-2 .preview-meta,.how-device.is-step-3 .preview-meta{font-size:0}.how-device.is-step-2 .preview-meta:after,.how-device.is-step-3 .preview-meta:after{font-size:10px}.how-device.is-step-2 .preview-action:before{content:"Driver accepted"}.how-device.is-step-3 .preview-action:before{content:"Track your ride"}.how-device.is-step-2 .preview-action,.how-device.is-step-3 .preview-action{font-size:0}.how-device.is-step-2 .preview-action:before,.how-device.is-step-3 .preview-action:before{font-size:10px}
@media(max-width:850px){.how-layout{display:block}.how-device{display:none}}
@media(prefers-reduced-motion:reduce){.device,.preview-route,.preview-pin,.how-device .preview-panel,.device-caption{transition:none!important}.how-device.is-step-2 .device,.how-device.is-step-3 .device{transform:rotate(2deg)} }