:root{
  --ae-bg:#03070b;
  --ae-bg-2:#071016;
  --ae-panel:rgba(13,20,27,.82);
  --ae-panel-2:rgba(20,28,36,.72);
  --ae-border:rgba(255,255,255,.10);
  --ae-border-red:rgba(239,24,31,.36);
  --ae-red:#ef181f;
  --ae-red-2:#bd1118;
  --ae-red-3:#ff3a3f;
  --ae-white:#f7f8fa;
  --ae-muted:#aeb8c5;
  --ae-faint:#657180;
  --ae-green:#27d072;
  --ae-shadow:0 24px 90px rgba(0,0,0,.55);
  --ae-radius:18px;
  --ae-radius-sm:12px;
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ae-bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ae-white);background:
  radial-gradient(circle at 73% 12%,rgba(239,24,31,.21),transparent 24%),
  radial-gradient(circle at 23% 21%,rgba(239,24,31,.08),transparent 24%),
  linear-gradient(180deg,#020609 0%,#071016 42%,#020507 100%);min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 70%)}
a{color:inherit;text-decoration:none}.page{position:relative;min-height:100vh}.wrap{max-width:1360px;margin:0 auto;padding:0 28px}.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:rgba(2,7,11,.78);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 40px rgba(0,0,0,.25)}
.nav{height:78px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:220px}.brand img{width:220px;max-width:100%;height:auto;display:block}.navlinks{display:flex;align-items:center;justify-content:center;gap:32px;flex:1}.navlinks a{font-size:14px;font-weight:800;color:#f2f5f7;opacity:.96;padding:30px 0 26px;border-bottom:2px solid transparent}.navlinks a.active,.navlinks a:hover{color:#fff;border-bottom-color:var(--ae-red)}.nav-actions{display:flex;align-items:center;gap:14px}.icon-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04);color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:9px;font-weight:900;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s background;color:#fff}.btn:hover{transform:translateY(-1px)}.btn-red{background:linear-gradient(180deg,#fb2b30,#b70b11);box-shadow:0 14px 34px rgba(239,24,31,.24),inset 0 1px rgba(255,255,255,.24)}.btn-dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22)}.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.22)}.btn-md{height:45px;padding:0 24px}.btn-lg{height:54px;padding:0 30px;font-size:15px}.mobile-toggle{display:none}
.hero{position:relative;isolation:isolate;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 30%,rgba(239,24,31,.20),transparent 22%),linear-gradient(90deg,#020609 0%,rgba(2,6,9,.97) 35%,rgba(2,6,9,.54) 70%,rgba(2,6,9,.9) 100%);z-index:-3}.hero:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:190px;background:linear-gradient(0deg,#05090d,transparent);z-index:-1}.red-speed{position:absolute;right:10%;top:180px;width:760px;height:360px;background:radial-gradient(ellipse at center,rgba(239,24,31,.22),transparent 45%),repeating-linear-gradient(170deg,rgba(239,24,31,.17) 0 1px,transparent 1px 17px);filter:blur(.2px);opacity:.8;transform:skewX(-12deg);z-index:-2}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:28px;min-height:590px;align-items:center;padding:44px 0 40px}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:#ff4a4f;font-size:13px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;margin-bottom:20px}.eyebrow:before{content:"";width:35px;height:2px;background:var(--ae-red);box-shadow:0 0 18px var(--ae-red)}.hero-title{font-size:clamp(54px,6.6vw,76px);line-height:.96;letter-spacing:-.065em;margin:0 0 18px;font-weight:1000}.hero-title .red{color:var(--ae-red);display:block;text-shadow:0 0 32px rgba(239,24,31,.32)}.hero-copy{max-width:520px;font-size:19px;line-height:1.55;color:#e6edf5;margin:0 0 22px}.location-card{max-width:505px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:9px;display:flex;gap:8px;box-shadow:0 24px 70px rgba(0,0,0,.42)}.loc-input{position:relative;display:flex;align-items:center;gap:12px;flex:1;padding:0 13px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);border-radius:10px}.loc-input svg{color:#fff;opacity:.95;min-width:20px}.loc-input input{width:100%;height:43px;border:0;background:transparent;color:#fff;outline:0;font-weight:700}.loc-input input::placeholder{color:#c7ced7}.loc-actions{display:flex;gap:7px}.loc-actions .btn{height:43px;padding:0 19px}.geo-btn{width:43px;padding:0}.promise-row{display:flex;gap:38px;margin-top:24px;flex-wrap:wrap}.promise{display:flex;align-items:center;gap:11px}.promise-icon{width:34px;height:34px;border:1px solid rgba(239,24,31,.55);border-radius:50%;display:grid;place-items:center;color:var(--ae-red);box-shadow:inset 0 0 18px rgba(239,24,31,.08)}.promise b{display:block;font-size:13px}.promise small{display:block;color:var(--ae-muted);font-size:12px;margin-top:1px}.hero-art{position:relative;min-height:455px}.food-plate{position:absolute;right:3%;top:16px;width:min(610px,100%);filter:drop-shadow(0 36px 48px rgba(0,0,0,.65));z-index:2}.offer-card{position:absolute;right:88px;bottom:66px;width:250px;background:linear-gradient(135deg,rgba(17,22,28,.93),rgba(70,0,4,.7));border:1px solid rgba(239,24,31,.45);box-shadow:var(--ae-shadow);border-radius:18px;padding:24px;z-index:4}.offer-card small{color:#ffb6b8;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.offer-card strong{display:block;font-size:30px;margin-top:6px}.offer-card span{display:block;color:#e9edf3}.gift{position:absolute;right:24px;top:45px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(239,24,31,.11);color:var(--ae-red);font-size:36px}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-10px;position:relative;z-index:6}.action-card{display:flex;align-items:center;gap:18px;background:linear-gradient(145deg,rgba(21,29,36,.82),rgba(18,18,21,.82));border:1px solid rgba(255,255,255,.11);border-radius:15px;padding:21px 20px;box-shadow:0 16px 52px rgba(0,0,0,.28)}.action-card .big-icon{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;color:var(--ae-red);border:1px solid rgba(239,24,31,.44);background:rgba(239,24,31,.08)}.action-card h3{margin:0 0 4px;font-size:16px}.action-card p{margin:0;color:#c4ced8;font-size:12.5px}.action-card .go{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ec2429,#a50a10)}.section{padding:34px 0}.section-title{text-align:center;font-size:30px;letter-spacing:-.03em;margin:0 0 34px}.section-title .red{color:var(--ae-red)}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:center;margin-bottom:36px}.flow-step{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center;position:relative}.flow-step:not(:last-child):after{content:"";position:absolute;right:-10px;top:39px;width:44px;border-top:1px dashed rgba(255,255,255,.34)}.flow-ico{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:var(--ae-red);background:rgba(239,24,31,.04);border:1px solid rgba(239,24,31,.46);box-shadow:inset 0 0 24px rgba(239,24,31,.12)}.step-no{position:absolute;left:68px;top:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ae-red);font-size:12px;font-weight:900}.flow-step h3{margin:0 0 4px;font-size:16px}.flow-step p{margin:0;font-size:12.5px;color:#cad3dc;max-width:150px}.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.aud-card{min-height:205px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,rgba(20,28,36,.84),rgba(17,17,20,.7));border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 70px rgba(0,0,0,.32);padding:28px}.aud-card:before{content:"";position:absolute;inset:auto 0 0 42%;height:100%;background:var(--photo) center/cover no-repeat;opacity:.82;mask-image:linear-gradient(90deg,transparent 0%,#000 36%)}.aud-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.69),rgba(0,0,0,.14))}.aud-card>*{position:relative;z-index:2}.aud-card h3{font-size:23px;margin:0 0 12px}.aud-card p{max-width:230px;color:#e4e9ee;line-height:1.45;margin:0 0 24px}.aud-card .btn{height:42px;padding:0 20px}.app-band{display:grid;grid-template-columns:190px 1fr 1.2fr;align-items:center;gap:24px;margin-top:20px;background:linear-gradient(145deg,rgba(15,23,31,.82),rgba(12,16,20,.92));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px 26px;box-shadow:0 20px 80px rgba(0,0,0,.35)}.phone-mini{width:165px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}.app-band h3{font-size:25px;margin:0 0 8px}.app-band h3 .red{color:var(--ae-red)}.app-band p{margin:0 0 14px;color:#d6dee7}.store-row{display:flex;gap:10px;flex-wrap:wrap}.store-badge{height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;gap:8px;padding:0 12px;background:#020203;font-size:12px;font-weight:900}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{text-align:center;border-left:1px solid rgba(255,255,255,.09)}.stat:first-child{border-left:0}.stat .ico{width:38px;height:38px;color:var(--ae-red);margin:0 auto 8px;display:grid;place-items:center;border:1px solid rgba(239,24,31,.4);border-radius:50%;background:rgba(239,24,31,.07)}.stat strong{display:block;font-size:30px}.stat span{color:#c5ced8;font-size:12px}.results-panel{display:none;margin-top:20px;border:1px solid rgba(239,24,31,.25);border-radius:16px;background:rgba(10,16,22,.88);padding:16px}.results-panel.open{display:block}.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.results-head h3{margin:0}.results-head small{color:#aeb8c5}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.restaurant-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px;display:grid;gap:10px}.restaurant-card h4{margin:0}.restaurant-meta{display:flex;gap:8px;flex-wrap:wrap;color:#ccd5df;font-size:12px}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:rgba(239,24,31,.13);border:1px solid rgba(239,24,31,.28);color:#ffe7e8;padding:5px 8px;font-weight:800;font-size:12px}.notice{border:1px solid rgba(239,24,31,.25);background:rgba(239,24,31,.08);border-radius:14px;padding:14px;color:#ffdcde}.footer{margin-top:32px;border-top:1px solid rgba(255,255,255,.09);background:rgba(1,5,8,.92)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding:34px 0}.footer-logo{width:210px}.footer p{color:#cbd4dd}.footer h4{margin:0 0 14px}.footer a{display:block;color:#aeb8c5;font-size:13px;margin:10px 0}.socials{display:flex;gap:10px}.socials a{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);margin:0}.copyright{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;color:#8b98a8;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.modal-backdrop{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);z-index:100;padding:20px}.modal-backdrop.open{display:grid}.modal{width:min(520px,100%);border:1px solid rgba(239,24,31,.35);border-radius:18px;background:#081016;box-shadow:0 30px 110px rgba(0,0,0,.75);padding:24px}.modal h3{margin:0 0 8px;font-size:25px}.modal p{color:#cbd4dd;line-height:1.55}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.close-modal{margin-left:auto}.loading{display:none;color:#fff}.loading.show{display:inline-flex}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.navlinks{display:none}.mobile-toggle{display:grid}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:330px}.food-plate{position:relative;right:auto;display:block;margin:0 auto}.offer-card{right:20px;bottom:10px}.quick-actions,.audience,.flow,.app-band,.footer-grid{grid-template-columns:1fr 1fr}.app-band{grid-template-columns:160px 1fr}.stats{grid-column:1/-1}.result-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.wrap{padding:0 16px}.nav{height:68px}.brand{min-width:160px}.brand img{width:165px}.nav-actions .btn-dark,.nav-actions .search{display:none}.hero-grid{padding-top:26px}.hero-title{font-size:48px}.hero-copy{font-size:16px}.location-card{flex-direction:column}.loc-actions .btn{flex:1}.quick-actions,.audience,.flow,.app-band,.footer-grid,.result-grid{grid-template-columns:1fr}.flow-step:after{display:none}.app-band{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat{border-left:0}.offer-card{position:relative;right:auto;bottom:auto;margin:-10px auto 0}.hero-art{min-height:auto}.section{padding:24px 0}.footer-grid{gap:18px}}


/* v2 support polish */
html{scroll-behavior:smooth;scroll-padding-top:92px}.support-section{padding:42px 0 18px}.support-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:24px;align-items:stretch}.support-copy{border:1px solid rgba(239,24,31,.28);border-radius:22px;background:linear-gradient(140deg,rgba(239,24,31,.12),rgba(7,12,18,.84) 42%,rgba(255,255,255,.03));box-shadow:0 28px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);padding:30px;position:relative;overflow:hidden}.support-copy:after{content:"";position:absolute;inset:auto -90px -100px auto;width:240px;height:240px;background:radial-gradient(circle,rgba(239,24,31,.26),transparent 70%);pointer-events:none}.support-title{font-size:clamp(34px,4vw,58px);line-height:.98;margin:8px 0 14px;letter-spacing:-.04em}.support-copy p{color:#d5dde7;font-size:17px;line-height:1.7;max-width:560px}.support-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.support-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.support-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:20px;min-height:205px;display:flex;flex-direction:column;justify-content:flex-start}.support-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--ae-red),#8d090d);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 38px rgba(239,24,31,.25);font-size:23px;margin-bottom:14px}.support-card h3{margin:0 0 8px;font-size:18px}.support-card p{margin:0;color:#c8d1dc;line-height:1.55}.support-card small{margin-top:auto;color:#ff5559;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:11px}.footer{margin-top:18px}
@media(max-width:1050px){.support-grid{grid-template-columns:1fr}.support-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){html{scroll-padding-top:74px}.support-cards{grid-template-columns:1fr}.support-copy{padding:22px}.support-title{font-size:39px}}

/* v3 audience card alignment + no ghosted baked-in text/buttons
   The original generated card images contained their own text/buttons, then the HTML
   overlaid the same content again. v3 uses clean photo-only assets and a fixed
   text column so the CTA buttons line up perfectly. */
.audience{
  align-items:stretch;
}
.aud-card{
  min-height:224px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  isolation:isolate;
  padding:30px 32px;
}
.aud-card:before{
  inset:0;
  height:100%;
  background:var(--photo) right center / cover no-repeat;
  opacity:.96;
  mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.45) 50%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.45) 50%, #000 100%);
  pointer-events:none;
}
.aud-card:after{
  background:
    linear-gradient(90deg, rgba(3,7,10,.96) 0%, rgba(3,7,10,.90) 35%, rgba(3,7,10,.42) 62%, rgba(3,7,10,.18) 100%),
    radial-gradient(circle at 15% 95%, rgba(239,24,31,.20), transparent 36%);
  pointer-events:none;
}
.aud-card h3,
.aud-card p,
.aud-card .btn{
  max-width:260px;
}
.aud-card h3{
  line-height:1.05;
  min-height:30px;
}
.aud-card p{
  min-height:76px;
  margin-bottom:22px;
}
.aud-card .btn{
  margin-top:auto;
  align-self:flex-start;
  min-width:142px;
  justify-content:center;
}
.aud-card .btn,
.aud-card .btn:visited{
  color:#fff;
}
@media(max-width:1050px){
  .aud-card h3,.aud-card p,.aud-card .btn{max-width:330px;}
  .aud-card p{min-height:62px;}
}
@media(max-width:700px){
  .aud-card{min-height:230px;padding:26px;}
  .aud-card:before{
    mask-image:linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,.55) 67%, #000 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,.55) 67%, #000 100%);
  }
  .aud-card h3,.aud-card p,.aud-card .btn{max-width:235px;}
}

/* v4 spacing/crop/alignment hotfix
   Fixes the live screenshot problem where the audience cards had excessive line wraps,
   ghosted/cached baked text, cropped images, and uneven CTA placement. */
.hero-grid{
  min-height:510px;
  padding:30px 0 26px;
  align-items:center;
}
.hero-art{min-height:390px;}
.food-plate{top:0;width:min(570px,100%);}
.offer-card{right:78px;bottom:38px;}
.hero-copy{line-height:1.44;margin-bottom:18px;}
.location-card{margin-top:4px;}
.promise-row{margin-top:18px;gap:34px;}
.quick-actions{margin-top:-38px;gap:16px;}
.action-card{padding:18px 18px;min-height:92px;}
.section{padding:28px 0;}
#how.section{padding-top:34px;}
.section-title{margin:0 0 24px;font-size:29px;}
.flow{gap:12px;margin-bottom:26px;}
.flow-step{grid-template-columns:68px 1fr;gap:14px;}
.flow-ico{width:60px;height:60px;}
.step-no{left:58px;top:10px;}
.flow-step:not(:last-child):after{top:30px;right:-6px;width:34px;}
.audience{gap:18px;align-items:stretch;}
.aud-card{
  min-height:196px;
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.aud-card:before{
  inset:0;
  height:100%;
  background:var(--photo) right center / cover no-repeat!important;
  opacity:.98;
  mask-image:linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.62) 58%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.62) 58%, #000 100%);
}
.aud-card:after{
  background:
    linear-gradient(90deg, rgba(3,7,10,.98) 0%, rgba(3,7,10,.94) 34%, rgba(3,7,10,.56) 62%, rgba(3,7,10,.24) 100%),
    radial-gradient(circle at 18% 100%, rgba(239,24,31,.20), transparent 35%);
}
.aud-card h3,
.aud-card p,
.aud-card .btn{max-width:258px;}
.aud-card h3{font-size:22px;line-height:1.05;margin:0 0 10px;min-height:24px;}
.aud-card p{font-size:15px;line-height:1.36;min-height:62px;margin:0 0 16px;color:#edf2f7;}
.aud-card .btn{height:43px;min-width:150px;margin-top:auto;align-self:flex-start;}
.app-band{margin-top:14px;padding:20px 24px;}
.footer{margin-top:14px;}
@media(max-width:1050px){
  .hero-grid{min-height:auto;padding:30px 0 34px;}
  .hero-art{min-height:330px;}
  .quick-actions{margin-top:0;}
  .aud-card{min-height:205px;}
  .aud-card h3,.aud-card p,.aud-card .btn{max-width:315px;}
  .aud-card p{min-height:54px;}
}
@media(max-width:700px){
  .hero-grid{padding:24px 0 28px;}
  .section{padding:22px 0;}
  .aud-card{min-height:220px;padding:24px;}
  .aud-card:before{
    mask-image:linear-gradient(90deg, transparent 0%, transparent 47%, rgba(0,0,0,.68) 72%, #000 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 47%, rgba(0,0,0,.68) 72%, #000 100%);
  }
  .aud-card h3,.aud-card p,.aud-card .btn{max-width:238px;}
  .aud-card p{font-size:14px;min-height:58px;}
}


/* v5 truth-in-content app strip: real badge assets, no unsupported metrics */
.app-band-v5{grid-template-columns:190px minmax(300px,1fr) minmax(600px,1.35fr);align-items:center;gap:26px;margin-top:14px;padding:22px 28px;}
.app-band-v5 .app-copy{min-width:0;}
.app-band-v5 .app-copy h3{font-size:clamp(26px,2.25vw,36px);line-height:1.06;margin:0 0 10px;letter-spacing:-.035em;}
.app-band-v5 .app-copy p{font-size:clamp(15px,1.25vw,20px);line-height:1.35;margin:0 0 15px;max-width:560px;color:#d5dde8;}
.store-row-v5{gap:12px;align-items:center;}
.store-badge-img{display:inline-flex;align-items:center;justify-content:center;height:48px;width:auto;text-decoration:none;transition:transform .18s ease,filter .18s ease;}
.store-badge-img:hover{transform:translateY(-1px);filter:brightness(1.06);}
.store-badge-img img{display:block;height:48px;width:auto;max-width:170px;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.32);}
.store-note{display:block;margin-top:9px;color:#9aa6b5;font-size:11.5px;line-height:1.25;}
.feature-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;min-height:126px;}
.feature-stat{text-align:center;border-left:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px;}
.feature-stat:first-child{border-left:0;}
.feature-stat .ico{width:52px;height:52px;color:var(--ae-red);margin:0 auto 13px;display:grid;place-items:center;border:1px solid rgba(239,24,31,.42);border-radius:50%;background:rgba(239,24,31,.07);font-size:18px;}
.feature-stat strong{display:block;font-size:clamp(17px,1.2vw,20px);line-height:1.1;margin:0 0 7px;color:#fff;letter-spacing:-.02em;}
.feature-stat span:last-child{display:block;color:#c5ced8;font-size:12.5px;line-height:1.32;max-width:170px;}
.app-link-pending{position:relative;}
.app-link-pending:after{content:"COMING SOON";position:absolute;right:-8px;top:-8px;background:linear-gradient(180deg,#ef181f,#a5080d);color:#fff;border-radius:999px;font-size:8px;font-weight:1000;letter-spacing:.06em;padding:3px 6px;box-shadow:0 8px 20px rgba(239,24,31,.24);}
@media(max-width:1250px){.app-band-v5{grid-template-columns:150px 1fr}.feature-stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);padding-top:18px}.phone-mini{width:145px}}
@media(max-width:900px){.app-band-v5{grid-template-columns:1fr;text-align:left}.feature-stats{grid-template-columns:repeat(2,1fr)}.feature-stat:nth-child(odd){border-left:0}.feature-stat{border-top:1px solid rgba(255,255,255,.08);padding:18px 12px}.store-badge-img img{height:44px}}
@media(max-width:560px){.feature-stats{grid-template-columns:1fr}.feature-stat{border-left:0}.app-band-v5{padding:20px 16px}.store-row-v5{align-items:flex-start}.store-badge-img img{height:42px;max-width:150px}.app-link-pending:after{font-size:7px}}


/* v6 app strip asset-fit fix
   Fixes: phone preview no longer cut off on the left; store badges no longer crop/truncate. */
.app-band-v5{
  grid-template-columns:230px minmax(420px,1fr) minmax(610px,1.25fr);
  overflow:visible;
}
.phone-mini{
  width:190px;
  max-width:190px;
  height:260px;
  object-fit:contain;
  object-position:center center;
  display:block;
  margin:0 auto;
  align-self:center;
  border-radius:0;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.40));
}
.store-row-v5{
  gap:16px;
  flex-wrap:wrap;
  overflow:visible;
}
.store-badge-img{
  height:auto;
  min-height:58px;
  width:auto;
  overflow:visible;
  padding:0;
  flex:0 0 auto;
}
.store-badge-img img{
  height:58px;
  width:auto;
  max-width:none;
  object-fit:contain;
  object-position:center;
  border-radius:10px;
}
.app-link-pending:after{
  right:-10px;
  top:-10px;
  z-index:3;
  white-space:nowrap;
}
@media(max-width:1250px){
  .app-band-v5{grid-template-columns:190px 1fr;}
  .phone-mini{width:170px;max-width:170px;height:240px;}
}
@media(max-width:900px){
  .app-band-v5{grid-template-columns:1fr;text-align:left;}
  .phone-mini{margin:0; width:160px;max-width:160px;height:220px;}
  .store-badge-img img{height:52px;}
}
@media(max-width:560px){
  .phone-mini{width:150px;max-width:150px;height:205px;}
  .store-badge-img img{height:48px;}
}


/* v7 app strip logo/badge/phone final alignment fix */
.app-band.app-band-v5{
  grid-template-columns: 285px minmax(520px, 720px) minmax(720px, 1fr) !important;
  gap: 34px !important;
  padding: 34px 42px !important;
  align-items: center !important;
  overflow: visible !important;
}
.app-band-v5 .phone-mini{
  width: 235px !important;
  max-width: 235px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.56)) !important;
}
.app-band-v5 .app-copy{
  min-width: 0 !important;
  overflow: visible !important;
}
.app-band-v5 .app-copy h3{
  font-size: clamp(34px, 3.2vw, 54px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
  margin-bottom: 14px !important;
}
.app-band-v5 .app-copy p{
  max-width: 700px !important;
  font-size: clamp(18px, 1.55vw, 28px) !important;
  line-height: 1.35 !important;
  margin-bottom: 22px !important;
}
.store-row.store-row-v5{
  display:flex !important;
  gap: 22px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.store-badge-img{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 288px !important;
  height: 82px !important;
  min-width: 288px !important;
  overflow: visible !important;
  border-radius: 13px !important;
}
.store-badge-img img{
  display: block !important;
  width: 288px !important;
  min-width: 288px !important;
  max-width: none !important;
  height: 82px !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  border-radius: 13px !important;
}
.app-link-pending::after{
  top: -14px !important;
  right: -13px !important;
  font-size: 11px !important;
  padding: 5px 13px !important;
  min-width: 108px !important;
  text-align: center !important;
  z-index: 8 !important;
}
.store-note{
  display:block !important;
  margin-top: 18px !important;
  font-size: 15px !important;
  color: rgba(218,226,236,.72) !important;
}
.feature-stats{
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  align-items: stretch !important;
}
.feature-stat{
  min-height: 210px !important;
  padding: 22px 26px !important;
}
.feature-stat .ico{
  width:72px !important;
  height:72px !important;
  font-size: 28px !important;
  margin-bottom: 18px !important;
}
.feature-stat strong{
  font-size: clamp(22px, 1.65vw, 31px) !important;
  line-height: 1.07 !important;
  margin-bottom: 12px !important;
}
.feature-stat span:last-child{
  font-size: clamp(14px, 1.02vw, 18px) !important;
  line-height: 1.38 !important;
}
@media(max-width:1500px){
  .app-band.app-band-v5{grid-template-columns: 230px 1fr !important;}
  .app-band-v5 .feature-stats{grid-column: 1 / -1 !important;}
  .store-row.store-row-v5{flex-wrap: wrap !important;}
}
@media(max-width:900px){
  .app-band.app-band-v5{grid-template-columns: 1fr !important; padding:24px 18px !important;}
  .app-band-v5 .phone-mini{width:190px !important;}
  .store-badge-img,.store-badge-img img{width:245px !important;min-width:245px !important;height:70px !important;}
  .feature-stats{grid-template-columns: repeat(2, 1fr) !important;}
}
@media(max-width:560px){
  .store-row.store-row-v5{flex-direction:column !important;align-items:flex-start !important;gap:16px !important;}
  .store-badge-img,.store-badge-img img{width:230px !important;min-width:230px !important;height:66px !important;}
  .feature-stats{grid-template-columns: 1fr !important;}
}


/* v8 app strip compact alignment fix
   Fixes: store badges/text no longer clip; feature icon circles reduced/removed;
   app section stays inside its rounded container on desktop; phone remains complete. */
.app-band.app-band-v5{
  grid-template-columns: 240px minmax(420px, 620px) minmax(540px, 1fr) !important;
  gap: 30px !important;
  padding: 32px 38px !important;
  overflow: hidden !important;
}
.app-band-v5 .phone-mini{
  width: 212px !important;
  max-width: 212px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
.app-band-v5 .app-copy h3{
  font-size: clamp(36px, 2.8vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  margin: 0 0 14px !important;
  max-width: 620px !important;
}
.app-band-v5 .app-copy p{
  max-width: 610px !important;
  font-size: clamp(17px, 1.28vw, 24px) !important;
  line-height: 1.36 !important;
  margin: 0 0 20px !important;
}
.store-row.store-row-v5{
  gap: 16px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.store-badge-img{
  width: 232px !important;
  min-width: 232px !important;
  height: 66px !important;
  border-radius: 12px !important;
  overflow: visible !important;
}
.store-badge-img img{
  width: 232px !important;
  min-width: 232px !important;
  height: 66px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}
.app-link-pending::after{
  top: -11px !important;
  right: -9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  padding: 4px 10px !important;
  min-width: 88px !important;
  border-radius: 999px !important;
}
.store-note{
  margin-top: 14px !important;
  font-size: 14px !important;
}
.feature-stats{
  grid-template-columns: repeat(4, minmax(118px, 1fr)) !important;
  min-height: 150px !important;
  align-items: center !important;
  overflow: hidden !important;
}
.feature-stat{
  min-height: 150px !important;
  padding: 18px 18px !important;
  justify-content: center !important;
}
.feature-stat .ico{
  display: none !important;
}
.feature-stat strong{
  font-size: clamp(18px, 1.34vw, 26px) !important;
  line-height: 1.08 !important;
  margin: 0 0 10px !important;
  max-width: 150px !important;
}
.feature-stat strong::before{
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ef181f, transparent);
  box-shadow: 0 0 18px rgba(239,24,31,.5);
}
.feature-stat span:last-child{
  max-width: 150px !important;
  font-size: clamp(12px, .88vw, 15px) !important;
  line-height: 1.35 !important;
}
@media(max-width:1500px){
  .app-band.app-band-v5{grid-template-columns: 220px minmax(0,1fr) !important; gap: 26px !important;}
  .app-band-v5 .feature-stats{grid-column: 1 / -1 !important; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px;}
  .store-row.store-row-v5{flex-wrap: wrap !important;}
}
@media(max-width:900px){
  .app-band.app-band-v5{grid-template-columns:1fr !important;padding:24px 18px !important;}
  .app-band-v5 .phone-mini{width:185px !important;}
  .store-badge-img,.store-badge-img img{width:222px !important;min-width:222px !important;height:63px !important;}
  .feature-stats{grid-template-columns: repeat(2, 1fr) !important;}
  .feature-stat:nth-child(odd){border-left:0 !important;}
}
@media(max-width:560px){
  .store-row.store-row-v5{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
  .store-badge-img,.store-badge-img img{width:216px !important;min-width:216px !important;height:61px !important;}
  .feature-stats{grid-template-columns:1fr !important;}
  .feature-stat{border-left:0 !important;border-top:1px solid rgba(255,255,255,.08) !important;}
}


/* v9 logo fork mark correction
   Replaces old forkless/abstract mark with AlphaEats fork-in-cloche logo everywhere. */
.brand img{width:190px !important;max-height:78px !important;object-fit:contain !important;}
.footer-logo{width:230px !important;max-height:86px !important;object-fit:contain !important;}
.phone-mini{object-fit:contain !important;}

/* v10 white fork logo correction
   superseded by v11 corrected fork geometry */


/* v11 corrected fork logo + larger header logo
   - makes top-left logo visible and properly proportioned
   - uses white fork-in-cloche mark assets
   - preserves v8/v10 app-strip fixes */
.topbar .nav{
  height: 88px !important;
  gap: 30px !important;
}
.brand{
  min-width: 285px !important;
  flex: 0 0 285px !important;
}
.brand img{
  width: 270px !important;
  max-width: 270px !important;
  max-height: 86px !important;
  object-fit: contain !important;
}
.navlinks{
  gap: 28px !important;
}
.footer-logo{
  width: 265px !important;
  max-height: 98px !important;
  object-fit: contain !important;
}
.phone-mini{
  object-fit: contain !important;
}
.app-band-v5 .phone-mini{
  width: 218px !important;
  max-width: 218px !important;
}
@media(max-width:1200px){
  .brand{min-width:240px !important; flex-basis:240px !important;}
  .brand img{width:230px !important; max-width:230px !important;}
  .navlinks{gap:20px !important;}
}
@media(max-width:700px){
  .topbar .nav{height:74px !important;}
  .brand{min-width:185px !important; flex-basis:185px !important;}
  .brand img{width:180px !important; max-width:180px !important;}
}


/* v12 cropped header logo proportion fix
   Keeps the approved white-fork AlphaEats logo, but removes excess transparent logo whitespace
   and gives the top-left header a proportionate larger brand presence. */
.topbar .nav{
  height: 90px !important;
}
.brand{
  min-width: 310px !important;
  flex: 0 0 310px !important;
}
.brand img{
  width: 300px !important;
  max-width: 300px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.footer-logo{
  width: 280px !important;
  max-height: 92px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
@media(max-width:1200px){
  .brand{min-width:270px !important; flex-basis:270px !important;}
  .brand img{width:260px !important; max-width:260px !important;}
}
@media(max-width:700px){
  .topbar .nav{height:76px !important;}
  .brand{min-width:210px !important; flex-basis:210px !important;}
  .brand img{width:205px !important; max-width:205px !important;}
}


/* v13 corrected dinner-fork logo geometry
   Keeps the approved v12 header size, but redraws the fork as a proper dinner fork rather than a pitchfork/rake. */
.brand img{ object-fit: contain !important; object-position: left center !important; }
.footer-logo{ object-fit: contain !important; object-position: left center !important; }


/* v14 final logo clarity + header separation fix
   - corrected true dinner-fork geometry, not spatula/pitchfork
   - removes hazy/glow logo treatment by using clean transparent SVG assets
   - keeps approved large header presence without spilling into hero text
   - adds safe top breathing room below sticky header */
.topbar{
  background: rgba(2,7,11,.92) !important;
  backdrop-filter: blur(12px) !important;
}
.topbar .nav{
  height: 92px !important;
  overflow: hidden !important;
}
.brand{
  min-width: 300px !important;
  flex: 0 0 300px !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
}
.brand img{
  width: 285px !important;
  max-width: 285px !important;
  max-height: 74px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}
.hero-grid{
  padding-top: 62px !important;
}
.footer-logo{
  width: 268px !important;
  max-height: 92px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}
.app-band-v5 .phone-mini{
  object-fit: contain !important;
}
@media(max-width:1200px){
  .brand{min-width:260px !important; flex-basis:260px !important;}
  .brand img{width:250px !important; max-width:250px !important; max-height:70px !important;}
}
@media(max-width:700px){
  .topbar .nav{height:78px !important;}
  .brand{min-width:210px !important; flex-basis:210px !important;}
  .brand img{width:205px !important; max-width:205px !important; max-height:64px !important;}
  .hero-grid{padding-top:32px !important;}
}


/* v15 hero offer ghosting fix: the hero image already contains the offer card; do not overlay a second offer panel. */
.hero-art-no-overlay .offer-card,
.hero-art .offer-card {
  display: none !important;
}
.hero-art-no-overlay {
  overflow: visible;
}
.hero-art-no-overlay .food-plate {
  z-index: 2;
}
@media (max-width: 1050px) {
  .hero-art-no-overlay .food-plate {
    max-width: min(620px, 100%);
  }
}


/* v16 compact hero top spacing fix
   Removes the large empty band between the sticky header and hero content.
   Keeps the header logo size and v15 baked-offer behavior, but pulls the
   eyebrow/headline/search and hero art up into the first screen. */
.hero{
  padding-top:0 !important;
}
.hero-grid{
  align-items:start !important;
  min-height:438px !important;
  padding:18px 0 12px !important;
}
.hero-copybox{
  padding-top:0 !important;
  margin-top:0 !important;
}
.eyebrow{
  margin-top:0 !important;
  margin-bottom:16px !important;
}
.hero-title{
  margin-bottom:14px !important;
}
.hero-copy{
  margin-bottom:16px !important;
}
.location-card{
  margin-top:0 !important;
}
.promise-row{
  margin-top:16px !important;
}
.hero-art{
  min-height:318px !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
.food-plate{
  top:0 !important;
  right:0 !important;
  width:min(575px,100%) !important;
}
.red-speed{
  top:70px !important;
}
.quick-actions{
  margin-top:-10px !important;
}
#how.section{
  padding-top:24px !important;
}
@media(max-width:1050px){
  .hero-grid{
    min-height:auto !important;
    padding:20px 0 20px !important;
  }
  .hero-art{
    min-height:300px !important;
  }
  .quick-actions{
    margin-top:0 !important;
  }
}
@media(max-width:700px){
  .hero-grid{
    padding:18px 0 18px !important;
  }
  .hero-art{
    min-height:auto !important;
  }
}


/* v17 exact AlphaEats icon-system correction
   Replaces emoji, Unicode glyphs, and generic shapes with a consistent custom
   red line-icon family matching the approved red/black reference design. */
.icon-btn img,
.promise-icon img,
.big-icon img,
.flow-ico img,
.support-icon img,
.feature-stat .ico img,
.go img,
.socials img,
.geo-btn img,
.loc-pin-icon{
  display:block;
  object-fit:contain;
  pointer-events:none;
}
/* Reference design uses a clean standalone search glyph, not a large ring. */
.nav-actions .icon-btn.search{
  width:34px !important;
  height:44px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:.94;
}
.nav-actions .icon-btn.search:hover{opacity:1;transform:translateY(-1px);}
.nav-actions .icon-btn.search img{width:21px;height:21px;}
.mobile-toggle img{width:23px;height:23px;}
.loc-pin-icon{width:20px;height:20px;flex:0 0 20px;}
.geo-btn{
  border-color:rgba(239,24,31,.36) !important;
  background:rgba(239,24,31,.055) !important;
}
.geo-btn img{width:19px;height:19px;}
.promise-icon img{width:19px;height:19px;}
.action-card .big-icon{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
  border-radius:15px !important;
  background:linear-gradient(145deg,rgba(239,24,31,.10),rgba(239,24,31,.025)) !important;
  border:1px solid rgba(239,24,31,.48) !important;
  box-shadow:inset 0 0 22px rgba(239,24,31,.055) !important;
}
.action-card .big-icon img{width:31px;height:31px;}
.action-card .go{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  box-shadow:0 9px 24px rgba(239,24,31,.22);
}
.action-card .go img{width:15px;height:15px;}
.flow-ico img{width:30px;height:30px;}
.support-icon{
  background:rgba(239,24,31,.08) !important;
  border:1px solid rgba(239,24,31,.48) !important;
  box-shadow:inset 0 0 22px rgba(239,24,31,.07),0 12px 30px rgba(0,0,0,.18) !important;
}
.support-icon img{width:26px;height:26px;}
/* The app benefits retain icons, but use the same line family rather than emoji. */
.feature-stat .ico{
  display:grid !important;
  width:50px !important;
  height:50px !important;
  margin:0 auto 13px !important;
  border:1px solid rgba(239,24,31,.46) !important;
  background:rgba(239,24,31,.055) !important;
  border-radius:50% !important;
}
.feature-stat .ico img{width:23px;height:23px;}
.feature-stat strong::before{display:none !important;}
.socials a{display:grid !important;place-items:center !important;}
.socials a img{width:18px;height:18px;}
.close-modal img{width:18px;height:18px;}
@media(max-width:900px){
  .action-card .big-icon{width:52px !important;height:52px !important;flex-basis:52px !important;}
  .action-card .big-icon img{width:28px;height:28px;}
}


/* v18 approved-reference icon match
   These eleven visible hero/action/workflow icons are extracted from the
   approved red/black homepage reference so their silhouettes, line weight,
   proportions, and visual language match the original design exactly.
   Do not substitute generic icon-library artwork for these assets. */

/* Promise row: the source artwork already contains its intended geometry. */
.promise-icon{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.promise-icon img{
  width:38px !important;
  height:38px !important;
  object-fit:contain !important;
  filter:none !important;
}

/* Quick-action cards: reference uses large standalone line art, not boxed icons. */
.action-card{
  gap:14px !important;
  padding-left:20px !important;
}
.action-card .big-icon{
  width:62px !important;
  height:62px !important;
  flex:0 0 62px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.action-card .big-icon img{
  width:60px !important;
  height:60px !important;
  object-fit:contain !important;
  filter:none !important;
}

/* Workflow icons include the exact subtle reference ring in the image itself. */
.flow-step{
  grid-template-columns:78px 1fr !important;
  gap:14px !important;
}
.flow-ico{
  width:76px !important;
  height:76px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.flow-ico img{
  width:76px !important;
  height:76px !important;
  object-fit:contain !important;
  filter:none !important;
}
.step-no{
  left:70px !important;
  top:9px !important;
}
.flow-step:not(:last-child):after{
  top:38px !important;
}

@media(max-width:900px){
  .action-card .big-icon{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
  }
  .action-card .big-icon img{
    width:54px !important;
    height:54px !important;
  }
  .flow-ico,.flow-ico img{
    width:70px !important;
    height:70px !important;
  }
  .step-no{left:64px !important;}
}

/* v20 hero pairing refinement
   Narrows the reserved copy column and constrains the artwork track so the
   headline block and hero image read as one grouped unit on desktop. */
.hero-grid{
  grid-template-columns:minmax(0,468px) minmax(520px,620px) !important;
  gap:6px !important;
  justify-content:start !important;
}
.hero-copybox{
  max-width:468px !important;
}
.hero-art,
.hero-art-no-overlay{
  min-width:0;
}
.food-plate,
.hero-art .food-plate,
.hero-art-no-overlay .food-plate{
  right:0 !important;
  width:min(620px,100%) !important;
}
@media(max-width:1250px){
  .hero-grid{
    grid-template-columns:minmax(0,448px) minmax(480px,560px) !important;
    gap:8px !important;
  }
  .food-plate,
  .hero-art .food-plate,
  .hero-art-no-overlay .food-plate{
    right:0 !important;
    width:min(560px,100%) !important;
  }
}
@media(max-width:1050px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero-copybox{
    max-width:none !important;
  }
}

/* v21 app store badge scale refinement
   Shrinks the CTA badges to feel closer to native storefront proportions
   while keeping the "coming soon" labels readable and aligned. */
.store-row.store-row-v5{
  gap: 14px !important;
}
.store-badge-img{
  width: 206px !important;
  min-width: 206px !important;
  height: 59px !important;
  border-radius: 11px !important;
}
.store-badge-img img{
  width: 206px !important;
  min-width: 206px !important;
  height: 59px !important;
  border-radius: 11px !important;
}
.app-link-pending::after{
  top: -10px !important;
  right: -8px !important;
  font-size: 8px !important;
  padding: 4px 9px !important;
  min-width: 80px !important;
}
@media(max-width:900px){
  .store-badge-img,.store-badge-img img{
    width: 198px !important;
    min-width: 198px !important;
    height: 57px !important;
  }
}
@media(max-width:560px){
  .store-row.store-row-v5{
    gap: 12px !important;
  }
  .store-badge-img,.store-badge-img img{
    width: 192px !important;
    min-width: 192px !important;
    height: 55px !important;
  }
}

/* v22 app benefits spacing refinement
   Opens the gap between the store badges and the benefits grid on wide layouts. */
@media(min-width:1251px){
  .feature-stats{
    margin-left: 18px !important;
  }
}

/* v23 support card media enrichment
   Adds branded visual panels beneath each support-card description so the
   section matches the more image-driven direction from the shared reference. */
.support-card{
  min-height: 340px !important;
  display: grid !important;
  grid-template-rows: 48px minmax(52px,auto) minmax(112px,auto) 108px auto;
  align-items: start;
  gap: 0 !important;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.support-icon{
  margin-bottom: 0 !important;
}
.support-card h3{
  margin: 0 !important;
  align-self: start;
}
.support-card p{
  margin: 0 !important;
  align-self: start;
}
.support-card:hover{
  transform: translateY(-2px);
  border-color: rgba(239,24,31,.26);
  box-shadow: 0 26px 58px rgba(0,0,0,.24);
}
.support-media{
  position: relative;
  display: block;
  width: 100%;
  height: 108px;
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  background-color: #0b1117;
  background-repeat: no-repeat;
  background-size: cover;
}
.support-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%),
    linear-gradient(180deg, rgba(4,7,10,.08), rgba(4,7,10,.38));
}
.support-card-order .support-media{
  background-image:
    linear-gradient(90deg, rgba(5,9,13,.18), rgba(5,9,13,.02)),
    url('/assets/img/support-order-rep-v1.png');
  background-position: 64% center;
}
.support-card-restaurant .support-media{
  background-image:
    linear-gradient(90deg, rgba(5,9,13,.18), rgba(5,9,13,.02)),
    url('/assets/img/support-restaurant-partner-v1.png');
  background-position: 68% center;
}
.support-card-rider .support-media{
  background-image:
    linear-gradient(90deg, rgba(5,9,13,.12), rgba(5,9,13,.02)),
    url('/assets/img/support-rider-route-v1.png');
  background-position: 79% center;
}
.support-card-issue .support-media{
  background-image:
    linear-gradient(135deg, rgba(239,24,31,.14), rgba(5,9,13,.04) 42%),
    url('/assets/img/support-live-issue-v1.png');
  background-position: center;
}
.support-card small{
  margin-top: 0 !important;
  padding-top: 14px;
}
@media(max-width:1050px){
  .support-card{
    min-height: 320px !important;
  }
  .support-media{
    height: 118px;
  }
}

/* v30 footer origin badge
   Adds a compact Filipino-owned identity marker with a small Philippines flag
   treatment that fits the existing footer brand block without overpowering it. */
.footer-origin-badge{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(8,18,30,.96), rgba(22,12,12,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.18);
  color: #e8eef6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ph-flag{
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 30px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, #0038a8 0 50%, #ce1126 50% 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.ph-flag::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 18px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ph-flag-sun{
  position: absolute;
  left: 4px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f7c948;
  box-shadow:
    0 -6px 0 -2px #f7c948,
    0 6px 0 -2px #f7c948,
    -5px 0 0 -2px #f7c948,
    5px 0 0 -2px #f7c948,
    -4px -4px 0 -2px #f7c948,
    4px -4px 0 -2px #f7c948,
    -4px 4px 0 -2px #f7c948,
    4px 4px 0 -2px #f7c948;
}
@media(max-width:700px){
  .footer-origin-badge{
    width: fit-content;
    max-width: 100%;
    font-size: 11px;
    padding: 9px 12px;
  }
}
@media(max-width:700px){
  .support-card{
    min-height: auto !important;
  }
  .support-media{
    height: 126px;
  }
}

/* v24 header search jump
   Makes the topbar search icon feel purposeful by spotlighting the real
   delivery search form when users jump to it. */
.location-card.search-spotlight{
  border-color: rgba(239,24,31,.42) !important;
  box-shadow:
    0 0 0 1px rgba(239,24,31,.26),
    0 0 0 8px rgba(239,24,31,.08),
    0 28px 78px rgba(0,0,0,.44) !important;
  animation: locationSearchPulse 1.15s ease;
}
@keyframes locationSearchPulse{
  0%{
    transform: translateY(0);
    box-shadow:
      0 0 0 0 rgba(239,24,31,.00),
      0 24px 70px rgba(0,0,0,.42);
  }
  45%{
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(239,24,31,.28),
      0 0 0 9px rgba(239,24,31,.11),
      0 30px 82px rgba(0,0,0,.48);
  }
  100%{
    transform: translateY(0);
  }
}

/* v26 hero composition centering
   Re-centers the desktop hero pair and gives the food-art track more width so
   the whole composition feels balanced instead of left-heavy. */
.hero-grid{
  grid-template-columns:minmax(0,490px) minmax(620px,700px) !important;
  gap:14px !important;
  justify-content:center !important;
}
.hero-copybox{
  max-width:490px !important;
}
.hero-art,
.hero-art-no-overlay{
  min-height:410px !important;
}
.food-plate,
.hero-art .food-plate,
.hero-art-no-overlay .food-plate{
  width:min(700px,100%) !important;
}
@media(max-width:1250px){
  .hero-grid{
    grid-template-columns:minmax(0,460px) minmax(540px,600px) !important;
    gap:12px !important;
    justify-content:center !important;
  }
  .hero-copybox{
    max-width:460px !important;
  }
  .food-plate,
  .hero-art .food-plate,
  .hero-art-no-overlay .food-plate{
    width:min(600px,100%) !important;
  }
}

/* v27 hero promise row alignment
   Keeps the three support/value badges on a single desktop row after the hero
   copy column was narrowed, while still collapsing cleanly on mobile. */
.promise-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
.promise{
  min-width:0;
  align-items:flex-start !important;
}
.promise > span:last-child{
  min-width:0;
}
.promise small{
  line-height:1.32;
}
@media(max-width:700px){
  .promise-row{
    grid-template-columns:1fr 1fr !important;
  }
  .promise:last-child{
    grid-column:1 / -1;
  }
}

/* v31 customer ordering sandbox
   Adds a temporary browse-to-cart-to-checkout prototype with brand-coded
   restaurant cards, menu browsing, vouchers, and a real cart summary so the
   customer-side journey can be tested before the production order backend is done. */
.customer-lab{
  padding-top: 18px;
}
.lab-intro{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
}
.lab-title{
  margin: 8px 0 10px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: .98;
  letter-spacing: -.05em;
}
.lab-copy{
  max-width: 860px;
  margin: 0;
  color: #d0d8e3;
  font-size: 17px;
  line-height: 1.7;
}
.lab-intro-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.lab-pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: #edf2f8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lab-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 20px;
}
.lab-search-field{
  display: grid;
  gap: 8px;
  color: #f6f8fb;
  font-size: 13px;
  font-weight: 800;
}
.lab-search-field input{
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(7,12,18,.92);
  color: #fff;
  padding: 0 16px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.lab-search-field input::placeholder{
  color: #96a2af;
}
.lab-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lab-chip{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #d7dee7;
  padding: 11px 15px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.lab-chip:hover{
  transform: translateY(-1px);
}
.lab-chip.is-active{
  border-color: rgba(239,24,31,.38);
  background: rgba(239,24,31,.12);
  color: #fff;
  box-shadow: 0 12px 26px rgba(239,24,31,.14);
}
.lab-layout{
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.35fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: start;
}
.lab-panel{
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(14,22,30,.92), rgba(8,12,16,.96));
  box-shadow: 0 26px 90px rgba(0,0,0,.34);
  padding: 20px;
}
.lab-panel-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.lab-panel-eyebrow{
  margin: 0 0 6px;
  color: #ff656a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lab-panel-head h3{
  margin: 0;
  font-size: 24px;
  letter-spacing: -.03em;
}
.lab-panel-count{
  color: #ff7c80;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lab-restaurant-list{
  display: grid;
  gap: 12px;
}
.lab-restaurant-card{
  --lab-accent: #ef181f;
  --lab-accent-soft: #7a0c12;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(180deg, rgba(15,22,30,.98), rgba(8,12,18,.98));
  padding: 16px;
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
}
.lab-restaurant-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--lab-accent), var(--lab-accent-soft));
}
.lab-restaurant-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.lab-restaurant-card.is-selected{
  border-color: color-mix(in srgb, var(--lab-accent) 46%, rgba(255,255,255,.12));
  box-shadow: 0 22px 44px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.04);
}
.lab-restaurant-top{
  display: flex;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.lab-restaurant-badge{
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.2), transparent 32%),
    linear-gradient(145deg, var(--lab-accent), var(--lab-accent-soft));
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 24px rgba(0,0,0,.24);
}
.lab-restaurant-heading{
  min-width: 0;
}
.lab-restaurant-kicker{
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  color: #ffb9bc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-restaurant-top h4{
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1.02;
}
.lab-restaurant-top p{
  margin: 0;
  color: #d2dbe5;
  font-size: 13px;
  line-height: 1.5;
}
.lab-restaurant-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lab-meta-pill{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: #eef3f7;
  font-size: 11px;
  font-weight: 800;
}
.lab-restaurant-footer{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lab-restaurant-open{
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lab-menu-hero{
  min-height: 218px;
  border-radius: 24px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.lab-menu-hero::after{
  content: "";
  position: absolute;
  inset: auto -46px -56px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  filter: blur(1px);
}
.lab-menu-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lab-menu-brand-badge{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  font-size: 19px;
  font-weight: 900;
}
.lab-menu-brand h3{
  margin: 0 0 4px;
  font-size: 31px;
  letter-spacing: -.04em;
}
.lab-menu-brand p,
.lab-menu-hero-copy{
  margin: 0;
  color: rgba(255,255,255,.88);
}
.lab-menu-hero-copy{
  max-width: 520px;
  line-height: 1.6;
}
.lab-menu-kpis{
  display: grid;
  gap: 10px;
  min-width: 190px;
  position: relative;
  z-index: 1;
}
.lab-menu-kpi{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(9,13,18,.24);
  backdrop-filter: blur(8px);
}
.lab-menu-kpi strong{
  display: block;
  font-size: 18px;
  margin-bottom: 3px;
}
.lab-menu-kpi span{
  color: rgba(255,255,255,.82);
  font-size: 12px;
}
.lab-category-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.lab-category-chip{
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #d5dde7;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.lab-category-chip.is-active{
  border-color: rgba(239,24,31,.34);
  background: rgba(239,24,31,.10);
  color: #fff;
}
.lab-menu-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lab-menu-card{
  --lab-accent: #ef181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.05), transparent 32%),
    linear-gradient(180deg, rgba(16,24,33,.97), rgba(9,14,20,.98));
  padding: 18px;
  display: grid;
  gap: 12px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lab-menu-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
}
.lab-menu-card:focus-visible{
  outline: 2px solid rgba(239,24,31,.45);
  outline-offset: 2px;
}
.lab-menu-card-head{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.lab-menu-card-kicker{
  display: inline-flex;
  margin-bottom: 6px;
  color: #ff9599;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-menu-card-badge{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, var(--lab-accent), rgba(10,16,22,.86));
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.lab-menu-card h4{
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.08;
}
.lab-menu-card p{
  margin: 0;
  color: #d1dae5;
  font-size: 13px;
  line-height: 1.55;
}
.lab-price{
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
}
.lab-item-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lab-item-tag{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #f4f8fb;
  font-size: 11px;
  font-weight: 800;
}
.lab-menu-actions{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}
.lab-item-prep{
  color: #9ca9b8;
  font-size: 12px;
  font-weight: 700;
  display: block;
  margin-top: 6px;
}
.lab-add-btn{
  min-width: 132px;
}
.lab-empty-state{
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px;
  color: #c8d2dc;
  background: rgba(255,255,255,.03);
}
.lab-cart-panel{
  position: sticky;
  top: 108px;
}
.lab-cart-items{
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.lab-cart-item{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  padding: 14px;
}
.lab-cart-item-head{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: start;
}
.lab-cart-item h4{
  margin: 0 0 6px;
  font-size: 16px;
}
.lab-cart-item p{
  margin: 0;
  color: #c7d0db;
  font-size: 12px;
}
.lab-cart-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.lab-qty{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lab-qty button{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}
.lab-qty strong{
  min-width: 18px;
  text-align: center;
}
.lab-summary{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  padding: 16px;
  margin-bottom: 16px;
}
.lab-summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  color: #dce3eb;
  font-size: 14px;
}
.lab-summary-row strong{
  color: #fff;
}
.lab-summary-row.is-total{
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 16px;
  font-weight: 900;
}
.lab-summary-row.is-discount strong{
  color: #7ef0af;
}
.lab-summary-hint{
  margin: 10px 0 0;
  color: #9eabb9;
  font-size: 12px;
  line-height: 1.5;
}
.lab-checkout-form{
  display: grid;
  gap: 14px;
}
.lab-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lab-checkout-form label{
  display: grid;
  gap: 7px;
  color: #f5f8fb;
  font-size: 13px;
  font-weight: 800;
}
.lab-checkout-form input,
.lab-checkout-form select,
.lab-checkout-form textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(7,12,18,.92);
  color: #fff;
  padding: 13px 14px;
  outline: 0;
  resize: vertical;
}
.lab-checkout-form input::placeholder,
.lab-checkout-form textarea::placeholder{
  color: #96a3b1;
}
.lab-checkout-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lab-checkout-actions .btn{
  flex: 1 1 180px;
}
.lab-order-status{
  margin-top: 16px;
  border-radius: 20px;
  border: 1px solid rgba(126,240,175,.18);
  background: linear-gradient(180deg, rgba(15,48,31,.55), rgba(8,18,14,.92));
  padding: 18px;
}
.lab-order-status.is-error{
  border-color: rgba(255,120,120,.18);
  background: linear-gradient(180deg, rgba(72,14,20,.68), rgba(22,9,12,.96));
}
.lab-order-status.is-info{
  border-color: rgba(125,179,255,.18);
  background: linear-gradient(180deg, rgba(14,34,68,.68), rgba(9,14,26,.96));
}
.lab-order-status h4{
  margin: 0 0 10px;
  font-size: 19px;
}
.lab-order-status p{
  margin: 0 0 8px;
  color: #d8f0e0;
  line-height: 1.58;
}
.lab-order-status code{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.lab-order-status ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: #d8f0e0;
}
.modal-actions{
  align-items: center;
}
[data-open-order-lab]{
  min-width: 230px;
}
.lab-item-modal-backdrop{
  z-index: 120;
}
.lab-item-modal{
  width: min(760px, 100%);
  border: 1px solid rgba(239,24,31,.25);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(8,13,18,.98), rgba(5,8,12,.99));
  box-shadow: 0 34px 110px rgba(0,0,0,.72);
  padding: 28px;
  position: relative;
}
.lab-item-modal .close-modal{
  position: absolute;
  top: 18px;
  right: 18px;
}
.lab-item-modal-body{
  display: grid;
  gap: 18px;
}
.lab-item-modal-hero{
  --lab-accent: #ef181f;
  --lab-accent-soft: #7a0c12;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(145deg, rgba(10,16,22,.8), rgba(8,13,18,.94));
  padding: 22px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
}
.lab-item-modal-mark{
  width: 88px;
  height: 88px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.2), transparent 30%),
    linear-gradient(145deg, var(--lab-accent), var(--lab-accent-soft));
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 30px rgba(0,0,0,.24);
}
.lab-item-modal-copy h3{
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: -.04em;
}
.lab-item-modal-restaurant{
  margin: 0 0 10px;
  color: #ffacaf;
  font-size: 14px;
  font-weight: 800;
}
.lab-item-modal-description{
  margin: 0;
  color: #d6e0ea;
  font-size: 15px;
  line-height: 1.7;
}
.lab-item-modal-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.lab-option-group{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.025);
  padding: 18px;
}
.lab-option-group header{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lab-option-group h4{
  margin: 0;
  font-size: 18px;
}
.lab-option-group p{
  margin: 0;
  color: #9fb0c2;
  font-size: 12px;
  line-height: 1.5;
}
.lab-option-list{
  display: grid;
  gap: 10px;
}
.lab-option-pill{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.lab-option-pill:hover{
  transform: translateY(-1px);
}
.lab-option-pill.is-active{
  border-color: rgba(239,24,31,.36);
  background: rgba(239,24,31,.09);
  box-shadow: inset 0 0 0 1px rgba(239,24,31,.08);
}
.lab-option-main{
  display: grid;
  gap: 4px;
}
.lab-option-main strong{
  color: #fff;
  font-size: 14px;
}
.lab-option-main small{
  color: #9fb0c2;
  font-size: 12px;
  line-height: 1.45;
}
.lab-option-price{
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.lab-item-modal-footer{
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
}
.lab-item-modal-qty{
  display: grid;
  gap: 8px;
}
.lab-item-modal-qty-label{
  color: #9fb0c2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-item-modal-total{
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}
.lab-item-modal-total span{
  color: #9fb0c2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-item-modal-total strong{
  color: #fff;
  font-size: 28px;
  letter-spacing: -.03em;
}
@media(max-width:1220px){
  .lab-layout{
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.25fr);
  }
  .lab-cart-panel{
    grid-column: 1 / -1;
    position: static;
  }
}
@media(max-width:980px){
  .lab-intro,
  .lab-toolbar,
  .lab-layout,
  .lab-form-grid,
  .lab-menu-hero{
    grid-template-columns: 1fr;
  }
  .lab-intro-pills{
    justify-content: flex-start;
  }
  .lab-menu-grid{
    grid-template-columns: 1fr;
  }
  .lab-menu-kpis{
    min-width: 0;
  }
  .lab-item-modal-hero,
  .lab-item-modal-footer{
    grid-template-columns: 1fr;
  }
  .lab-item-modal-mark{
    width: 76px;
    height: 76px;
  }
}
@media(max-width:700px){
  .customer-lab{
    padding-top: 10px;
  }
  .lab-panel{
    padding: 16px;
    border-radius: 20px;
  }
  .lab-title{
    font-size: 38px;
  }
  .lab-copy{
    font-size: 15px;
  }
  .lab-checkout-actions{
    flex-direction: column;
  }
  .lab-checkout-actions .btn{
    width: 100%;
  }
  .lab-item-modal{
    padding: 22px 16px;
    border-radius: 22px;
  }
  .lab-item-modal-copy h3{
    font-size: 28px;
  }
  .lab-option-pill{
    grid-template-columns: 1fr;
  }
}