/* Laayo downloads. Brand: yellow #FFD60A, charcoal #263238. Titles Urbanist, text Lexend. */
:root{--f-body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;--f-title:"Urbanist","Lexend",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff}
.page{max-width:1280px;margin:0 auto}
/* shared mock pieces (site colours are fixed: this is the real page) */
body{font-family:var(--f-body);color:#263238;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wm{display:block;height:28px;width:auto;aspect-ratio:1210/376}
.ttl{font-family:var(--f-title);font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
.sb-row{display:flex;flex-wrap:wrap;gap:10px}
.sb{display:inline-flex;align-items:center;gap:9px;background:#000;color:#fff!important;border-radius:11px;padding:8px 15px 8px 12px;min-height:48px;border:1px solid #000;transition:transform .15s}
.sb:hover{transform:translateY(-1px)}
.sb:focus-visible{outline:3px solid #FFD60A;outline-offset:2px}
.sb svg{width:22px;height:22px;fill:#fff;flex:none}
.sb span{display:grid;line-height:1.05}
.sb small{font-size:10px;font-weight:400;opacity:.9}
.sb b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.sb.sm{min-height:40px;padding:6px 12px 6px 10px;border-radius:9px}
.sb.sm svg{width:18px;height:18px}.sb.sm b{font-size:14px}.sb.sm small{font-size:9px}
html[data-dev="android"] .sb-and{order:-1}
html:not([data-dev="desktop"]) .only-desk{display:none!important}
html[data-dev="desktop"] .only-mob{display:none!important}
.qr{background:#fff;padding:8px;border-radius:12px;line-height:0;flex:none}
.qr img,.qr canvas{width:100%!important;height:auto!important;display:block}
.ico{width:56px;height:56px;border-radius:14px;flex:none;box-shadow:0 0 0 1px rgba(38,50,56,.08)}
.foot-note{font-size:12px;color:#6B777B;line-height:1.6}

/* phone-in-page drawings */
.ph{width:250px;aspect-ratio:250/510;max-width:100%;border-radius:36px;background:#111;padding:8px;box-shadow:0 30px 60px -25px rgba(0,0,0,.55);flex:none}
.ph .scr{height:100%;border-radius:29px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:10px;color:#263238;position:relative}
.ph .sbar{display:flex;justify-content:space-between;padding:9px 18px 4px;font-weight:600;font-size:9px}
.ph .addr{padding:4px 14px 8px;display:grid;gap:1px}
.ph .addr b{font-size:11.5px}.ph .addr span{color:#6B777B;font-size:8.5px}
.ph .search{margin:0 12px 10px;border:1px solid #E3E6E5;border-radius:10px;padding:8px 10px;color:#8A9599;font-size:9px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.ph .cats{display:flex;justify-content:space-between;padding:0 12px 10px}
.ph .cat{display:grid;justify-items:center;gap:4px;font-size:8px;color:#4A575C}
.ph .cat i{width:38px;height:38px;border-radius:50%;display:block}
.ph .card{margin:0 12px 10px;border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.09)}
.ph .card .img{height:84px;position:relative}
.ph .card .img em{position:absolute;left:8px;bottom:7px;font-style:normal;background:#263238;color:#fff;font-size:7.5px;font-weight:600;padding:3px 6px;border-radius:5px}
.ph .card .meta{padding:7px 9px 8px;display:flex;justify-content:space-between;align-items:center}
.ph .card .meta b{font-family:var(--f-title);font-size:11.5px;font-weight:800}
.ph .card .meta span{display:block;color:#6B777B;font-size:8px;margin-top:1px}
.ph .rate{background:#1F8A4C;color:#fff;font-weight:600;font-size:8px;padding:3px 5px;border-radius:5px}
.ph .tabs{margin-top:auto;display:flex;justify-content:space-around;border-top:1px solid #EEF0EF;padding:8px 0 12px;font-size:7.5px;color:#7A868A}
.ph .tabs span{display:grid;justify-items:center;gap:3px}
.ph .tabs i{width:16px;height:16px;border-radius:5px;background:#D9DEDC;display:block}
.ph .tabs .on{color:#263238;font-weight:600}.ph .tabs .on i{background:#FFD60A}
.food1{background:radial-gradient(circle at 30% 45%,#F6C77B 0 18%,transparent 19%),radial-gradient(circle at 55% 55%,#F3B860 0 17%,transparent 18%),radial-gradient(circle at 76% 40%,#F6C77B 0 15%,transparent 16%),linear-gradient(135deg,#7A3E1D,#3B2015)}
.food2{background:radial-gradient(circle at 50% 50%,#E5533C 0 26%,#F2C14E 27% 33%,transparent 34%),linear-gradient(135deg,#2F4A2B,#16261A)}
.c1{background:radial-gradient(circle at 50% 55%,#F3C27B 0 38%,#FBEAD0 39%)}.c2{background:radial-gradient(circle at 50% 50%,#E5533C 0 34%,#F6D8B0 35%)}
.c3{background:radial-gradient(circle at 50% 50%,#D99A3B 0 36%,#F7E3BF 37%)}.c4{background:radial-gradient(circle at 50% 50%,#6DB36D 0 34%,#DDF0D6 35%)}

/* vendor + rider screens */
.ph .vh{padding:6px 14px 10px;display:flex;justify-content:space-between;align-items:center}
.ph .vh b{font-family:var(--f-title);font-size:13px;font-weight:800}
.ph .sw{display:flex;align-items:center;gap:5px;font-size:8.5px;color:#1F8A4C;font-weight:600}
.ph .sw i{width:24px;height:14px;border-radius:9px;background:#1F8A4C;position:relative;display:block}
.ph .sw i::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff}
.ph .ord{margin:0 12px 10px;border-radius:14px;border:1px solid #ECEEED;padding:11px;display:grid;gap:7px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.ph .ord .r{display:flex;justify-content:space-between;font-size:9px;color:#4A575C}
.ph .ord .r b{color:#263238;font-size:10.5px}
.ph .ord .new{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#263238;background:#FFF3B0;border-radius:5px;padding:3px 6px;justify-self:start}
.ph .btns{display:flex;gap:6px;margin-top:3px}
.ph .btns span{flex:1;text-align:center;border-radius:9px;padding:8px 0;font-weight:600;font-size:9.5px}
.ph .btns .y{background:#FFD60A;color:#263238}.ph .btns .o{border:1px solid #D6DBD9;color:#4A575C}
.ph .mini{margin:0 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph .mini div{background:#F5F6F5;border-radius:11px;padding:9px;font-size:8px;color:#6B777B;display:grid;gap:3px}
.ph .mini b{font-size:10.5px;color:#263238}
.ph .map{height:190px;position:relative;background:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 30%,#fff 30% 34%,transparent 34%),linear-gradient(20deg,transparent 60%,#fff 60% 63%,transparent 63%),#E8EDE6}
.ph .map svg{position:absolute;inset:0;width:100%;height:100%}
.ph .sheet{margin-top:-18px;position:relative;background:#fff;border-radius:18px 18px 0 0;padding:14px 14px 0;display:grid;gap:9px;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.ph .stop{display:flex;gap:9px;align-items:flex-start;font-size:9px;color:#6B777B}
.ph .stop i{width:9px;height:9px;border-radius:50%;margin-top:2px;flex:none;border:2.5px solid #263238}
.ph .stop i.d{background:#FFD60A;border-color:#263238;border-radius:2px}
.ph .stop b{display:block;color:#263238;font-size:10px}
/* ---------- A2: A, refined ---------- */
.X{--wm-ink:#263238;--wm-badge:#263238;--wm-hi:#FFD60A}
html:not([data-dev="ios"]) .x-ios,html:not([data-dev="android"]) .x-and{display:none!important}
.X .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 40px}
.X .nav nav{display:flex;gap:28px;font-size:14px;color:#4A575C}
.X .nav nav a:hover{color:#263238}
.X .cta{font-size:13px;font-weight:600;background:#FFD60A;color:#263238;border-radius:11px;padding:10px 16px}
.X .hero{margin:0 24px;background:#FFD60A;border-radius:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:12px;padding:60px 0 0 60px;overflow:hidden;position:relative}
.X .hero::after{content:"";position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#FFE45C 0 60%,transparent 61%);z-index:0}
.X .hero>*{position:relative;z-index:1}
.X .txt{display:grid;gap:18px;align-content:start;padding-bottom:60px;min-width:0}
.X .chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;background:#263238;color:#fff;border-radius:999px;padding:7px 13px 7px 10px}
.X .chip i{width:8px;height:8px;border-radius:50%;background:#FFD60A}
.X h2.ttl{font-size:64px;line-height:.96}
.X .lead{font-size:17px;line-height:1.55;margin:0;max-width:44ch;color:#33434A}
.X .lead b{font-weight:600;color:#263238}
.X .getrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.X .qrbox{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:8px 16px 8px 8px;box-shadow:0 10px 24px -14px rgba(38,50,56,.4)}
.X .qrbox .qr{width:84px;padding:4px}
.X .qrbox b{display:block;font-size:13px}.X .qrbox span{font-size:12px;color:#5E6B70}
.X .bigbtn{display:flex;align-items:center;justify-content:center;gap:11px;background:#000;color:#fff!important;border-radius:15px;padding:15px 18px;font-size:16.5px;font-weight:600;width:100%;max-width:360px}
.X .bigbtn svg{width:22px;height:22px;fill:#fff}
.X .alt{font-size:13px;color:#33434A}
.X .alt a{font-weight:600;text-decoration:underline!important;text-underline-offset:3px}
.X .duo{position:relative;height:470px;align-self:end}
.X .duo .ph{position:absolute}
.X .duo .back{width:222px;left:8%;top:70px;opacity:.97}
.X .duo .front{width:250px;left:42%;top:10px;box-shadow:0 40px 60px -25px rgba(38,50,56,.6)}
.X .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:30px 40px 6px}
.X .ft{display:grid;gap:6px;align-content:start;padding:18px;border-radius:20px;background:#F6F7F6}
.X .ft .ic{width:40px;height:40px;border-radius:12px;background:#FFD60A;display:grid;place-items:center;margin-bottom:6px}
.X .ft .ic svg{width:21px;height:21px;fill:none;stroke:#263238;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.X .ft b{font-size:15px;font-weight:600}
.X .ft span{font-size:13px;color:#5E6B70;line-height:1.5}
.X .sec{padding:48px 40px 8px;display:grid;gap:20px}
.X .sec h3{font-size:30px}
.X .sec .sub{margin:-12px 0 0;color:#5E6B70;font-size:15px}
.X .work{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.X .wk{border-radius:26px;overflow:hidden;display:grid;grid-template-columns:1fr 190px;gap:8px;padding:28px 0 0 28px;min-height:330px}
.X .wk.v{background:#FFF7CC}.X .wk.r{background:#EEF1F0}
.X .wk .body{display:grid;gap:10px;align-content:start;padding-bottom:28px;min-width:0}
.X .wk .who{display:flex;gap:12px;align-items:center}
.X .wk .who .ico{width:50px;height:50px;border-radius:13px}
.X .wk .tag{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6B777B;display:block}
.X .wk h4{margin:0;font-family:var(--f-title);font-weight:800;font-size:22px}
.X .wk ul{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:7px}
.X .wk li{display:flex;gap:9px;font-size:14px;color:#33434A;line-height:1.4}
.X .wk .peek{align-self:end;height:300px;overflow:hidden}
.X .wk .peek .ph{width:210px;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.X .faq{display:grid;gap:10px;max-width:780px}
.X details{border:1px solid #E3E6E5;border-radius:16px;padding:0 20px}
.X summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 0;font-weight:600;font-size:15px}
.X summary::-webkit-details-marker{display:none}
.X summary::after{content:"+";font-size:22px;font-weight:300;line-height:1;color:#6B777B}
.X details[open] summary::after{content:"\2212"}
.X summary:focus-visible{outline:2px solid #263238;outline-offset:4px;border-radius:6px}
.X details p{margin:0 0 18px;color:#4A575C;font-size:14px;line-height:1.6;max-width:62ch}
.X footer{margin-top:52px;background:#263238;color:#C9D0D2;padding:40px 40px 34px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;--wm-ink:#fff;--wm-badge:#FFD60A;--wm-hi:#263238}
.X footer p{margin:14px 0 0;font-size:13.5px;line-height:1.6;max-width:44ch}
.X footer .cols{display:flex;gap:48px;justify-content:flex-end;font-size:13.5px}
.X footer .cols div{display:grid;gap:9px;align-content:start}
.X footer .cols b{color:#fff;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.X footer .cols a:hover{color:#FFD60A}
.X footer small{grid-column:1/-1;border-top:1px solid #34444B;padding-top:18px;font-size:12px;color:#8E9A9E}
.X .dock{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid #E3E6E5;padding:10px 14px 12px;box-shadow:0 -8px 20px -12px rgba(0,0,0,.25)}
.X .dock .ico{width:42px;height:42px;border-radius:11px}
.X .dock div{flex:1;line-height:1.25}.X .dock b{display:block;font-size:14px}.X .dock span{font-size:11.5px;color:#6B777B}
.X .dock a{background:#FFD60A;color:#263238;font-weight:600;font-size:14px;border-radius:11px;padding:10px 18px}
/* tracking screen */
.ph .trk{height:236px;position:relative;background:linear-gradient(90deg,transparent 47%,#fff 47% 51%,transparent 51%),linear-gradient(0deg,transparent 36%,#fff 36% 40%,transparent 40%),linear-gradient(28deg,transparent 64%,#fff 64% 67%,transparent 67%),linear-gradient(150deg,transparent 22%,#DCE7D6 22% 34%,transparent 34%),#ECF0EA}
.ph .trk svg{position:absolute;inset:0;width:100%;height:100%}
.ph .trk .eta{position:absolute;left:12px;top:30px;background:#263238;color:#fff;font-size:9px;font-weight:600;border-radius:8px;padding:6px 9px}
.ph .trk img{position:absolute;left:44%;top:46%;width:30px;height:30px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.ph .tsheet{margin-top:-16px;position:relative;background:#fff;border-radius:18px 18px 0 0;padding:14px;display:grid;gap:10px;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.ph .tsheet>b{font-family:var(--f-title);font-size:14px;font-weight:800}
.ph .tsheet>span{color:#6B777B;font-size:8.5px;margin-top:-7px}
.ph .rdr{display:flex;align-items:center;gap:8px;background:#F5F6F5;border-radius:11px;padding:8px}
.ph .rdr img{width:26px;height:26px;border-radius:50%}
.ph .rdr div{flex:1;font-size:8px;color:#6B777B}.ph .rdr div b{display:block;font-size:10px;color:#263238}
.ph .rdr i{font-style:normal;background:#FFD60A;color:#263238;font-weight:600;font-size:8.5px;border-radius:7px;padding:5px 9px}
.ph .itm{display:flex;justify-content:space-between;font-size:9px;color:#4A575C;border-top:1px dashed #E3E6E5;padding-top:9px}
.ph .itm b{color:#263238}
@media (max-width:760px){
  .X .nav{padding:14px 16px}.X .nav nav{display:none}
  .X .hero{margin:0 12px;grid-template-columns:1fr;padding:28px 20px 0;border-radius:26px}
  .X .hero::after{width:320px;height:320px;right:-140px;top:-120px}
  .X .txt{padding-bottom:4px;gap:14px}
  .X h2.ttl{font-size:42px}.X .lead{font-size:15px}
  .X .duo{height:300px;overflow:hidden;margin:0 -20px}
  .X .duo .back{width:180px;left:6%;top:60px}.X .duo .front{width:200px;left:auto;right:6%;top:24px}
  .X .feat{grid-template-columns:1fr 1fr;padding:22px 12px 0;gap:10px}
  .X .ft{padding:14px;border-radius:16px}.X .ft b{font-size:14px}.X .ft span{font-size:12px}
  .X .sec{padding:36px 16px 4px;gap:16px}.X .sec h3{font-size:24px}.X .sec .sub{font-size:14px}
  .X .work{grid-template-columns:1fr}
  .X .wk{grid-template-columns:1fr;padding:22px 20px 0;min-height:0}
  .X .wk .body{padding-bottom:6px}
  .X .wk .peek{height:170px;justify-self:center}.X .wk .peek .ph{width:200px}
  .X details{padding:0 16px}
  .X footer{grid-template-columns:1fr;padding:30px 16px 26px;margin-top:40px}
  .X footer .cols{justify-content:flex-start;gap:40px}
}

/* app pages */
.X .hero.solo .txt{gap:16px}
.X .appid{display:flex;align-items:center;gap:14px}
.X .appid .ico{width:64px;height:64px;border-radius:16px}
.X .appid span{display:block;font-size:13px;color:#4A575C}
.X .solo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.X .solo li{display:flex;gap:9px;font-size:15px;color:#33434A;line-height:1.4}
.X .status{font-size:13px;color:#33434A;margin:0}
.X .one{display:flex;justify-content:center;align-items:flex-end;height:470px;align-self:end}
.X .one .ph{width:260px;margin-bottom:-60px;box-shadow:0 40px 60px -25px rgba(38,50,56,.6)}
.X .back-all{padding:28px 40px 0;font-size:14px;color:#4A575C}
.X .back-all a{font-weight:600;color:#263238;text-decoration:underline;text-underline-offset:3px}
.X footer{margin-top:40px}
@media (max-width:760px){
  .X .one{height:300px;overflow:hidden;margin:0 -20px}
  .X .one .ph{width:210px;margin-bottom:-160px}
  .X .back-all{padding:24px 16px 0}
}
@media (prefers-reduced-motion:reduce){.sb{transition:none}}
.X footer{padding-inline:max(40px,calc((100% - 1200px) / 2))}
.X .dock{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
@media (max-width:760px){.X footer{padding-inline:16px}}
.X h1.ttl{font-size:64px;line-height:.96}
.X .sec .h3{font-size:30px}
@media (max-width:760px){.X h1.ttl{font-size:42px}.X .sec .h3{font-size:24px}}
.ph.real .scr img{display:block;width:100%;height:auto}