/* Takeaway Pacific · front door styles (index.html): vendor application and owner, 2b · on your phone. Linked in order; the cascade depends on it. */
/* =========================================================
   VENDOR APPLICATION + OWNER
   ========================================================= */
.vprog{flex:1;display:flex;gap:6px}
.vprog i{flex:1;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;position:relative}
.vprog i::after{content:"";position:absolute;inset:0;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--in)}
.vprog i.on::after{transform:none}
.vn{font:700 13px/1 var(--sans);color:var(--ink-3);min-width:30px;text-align:right}
.vbody{flex:1;overflow-y:auto;padding:4px 20px 24px}
.vpane{animation:mpin 460ms var(--in) both}
.vpane>*{animation:panein 520ms var(--in) both}
.vpane>:nth-child(2){animation-delay:50ms}.vpane>:nth-child(3){animation-delay:100ms}.vpane>:nth-child(n+4){animation-delay:150ms}
.vpane h2{margin-top:10px;font:800 27.9px/1.05 var(--serif);letter-spacing:-.015em}
.vpane .p{margin-top:8px;color:var(--ink-2);font-size:15px}
.vfoot{padding:12px 20px calc(var(--sab) + 14px);border-top:1px solid var(--line);background:var(--cream)}
.vfoot .btn{width:100%}
.vmsg{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:rgba(201,71,43,.1);color:#9E3218;font-size:14px;font-weight:700;animation:shake 360ms var(--out)}
.kinds{display:grid;gap:12px;margin-top:20px}
.kind{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:18px;border-radius:var(--r);background:#fff;border:2px solid var(--line);text-align:left;transition:border-color 220ms var(--out),box-shadow 220ms var(--out),transform 220ms var(--in)}
.kind .av{grid-row:span 2;width:52px;height:52px;border-radius:16px}
.kind b{font:800 18.9px/1.1 var(--serif)}
.kind small{color:var(--ink-3);font-size:13.5px}
.kind[aria-pressed="true"]{border-color:var(--midnight);box-shadow:var(--sh);transform:translateY(-2px)}
.checkrow{display:flex;gap:12px;align-items:flex-start;width:100%;margin-top:14px;padding:12px 4px;text-align:left;font-size:14.5px;line-height:1.45}
.checkrow i{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line-2);display:grid;place-items:center;background:#fff;transition:background 200ms var(--out),border-color 200ms var(--out)}
.checkrow .ic{width:16px;height:16px;stroke-width:2.6;color:#fff;transform:scale(0);transition:transform 260ms var(--in)}
.checkrow[aria-checked="true"] i{background:var(--lagoon-deep);border-color:var(--lagoon-deep)}
.checkrow[aria-checked="true"] .ic{transform:none}
.fhint{display:block;margin-top:6px;color:var(--ink-3);font-size:12.5px}
.promise-card{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:16px;border-radius:var(--r-sm);background:var(--midnight);color:var(--ivory);font-size:15px;line-height:1.45}
.promise-card .ic{color:var(--amber);margin-top:1px}
.sent{display:grid;justify-items:start;gap:4px}
.seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--lagoon-deep);color:#fff;margin-bottom:8px;animation:seal 700ms var(--in) both}
.seal .ic{width:32px;height:32px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30;animation:draw 520ms 260ms var(--out) forwards}
@keyframes seal{from{transform:scale(.4) rotate(-20deg);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.ownercard{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 12px 14px 14px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.ownercard>div{flex:1;min-width:0}
.ownercard b{display:block;font:800 18px/1.1 var(--serif)}
.ownercard small{color:var(--ink-3);font-size:13px}
.ownercard+small{display:block;margin:8px 4px 0;color:var(--ink-3);font-size:13px}
.tabs-in{margin-top:16px}
.opanel{display:grid;gap:10px;margin-top:6px}
.opanel>.fcard.row{margin-top:0}
.incoming{display:grid;gap:4px;margin-top:10px;padding:16px;border-radius:var(--r);background:#fff;border:2px solid var(--coral);box-shadow:var(--sh-lg);animation:incoming 560ms var(--in) both}
.incoming small{color:var(--ink-3)}
.incoming .twin{margin-top:10px}
.incoming .btn{min-height:50px}
@keyframes incoming{from{opacity:0;transform:translateY(-20px) scale(.96)}}
.assist{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.assist b{display:block;font:800 18px/1.1 var(--serif)}
.assist small{color:var(--ink-3);font-size:13px}
#infoBody>.btn{width:100%;margin-top:18px}

/* homepage: sell with us */
.sellsteps{list-style:none;counter-reset:s;margin:20px 0 0;padding:0;display:grid;gap:10px}
.sellsteps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:16px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.sellsteps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--midnight);color:var(--ivory);font:800 15.6px/1 var(--serif)}
.sellsteps b{font:800 17.2px/1.1 var(--serif)}
.sellsteps small{color:var(--ink-3);font-size:13.5px}
.sellbtn{margin-top:16px}

/* =========================================================
   2b · ON YOUR PHONE: preview + install
   ========================================================= */
.getit .phone{position:relative;width:236px;height:420px;margin:26px auto 0;border-radius:42px;background:var(--midnight);padding:10px;box-shadow:0 40px 70px -30px rgba(15,23,42,.65),inset 0 0 0 2px rgba(244,237,224,.12)}
.ph-notch{position:absolute;left:50%;top:16px;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:var(--midnight);z-index:3}
.ph-screen{position:relative;height:100%;border-radius:33px;overflow:hidden;background:var(--cream) var(--tonga) 0 0/72px 72px}
.ph-s{position:absolute;inset:0;padding:44px 14px 14px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateX(30px);transition:opacity 520ms var(--out),transform 620ms var(--in);pointer-events:none}
.ph-s.on{opacity:1;transform:none}
.ph-s.off{transform:translateX(-30px)}
.ph-s>*{transition:opacity 500ms var(--out),transform 600ms var(--in);opacity:0;transform:translateY(10px)}
.ph-s.on>*{opacity:1;transform:none}
.ph-s.on>:nth-child(2){transition-delay:80ms}.ph-s.on>:nth-child(3){transition-delay:160ms}.ph-s.on>:nth-child(4){transition-delay:240ms}.ph-s.on>:nth-child(5){transition-delay:320ms}.ph-s.on>:nth-child(n+6){transition-delay:400ms}
.ph-h{font:800 18px/1.05 var(--serif)}
.ph-host{font:italic 500 14px/1.3 var(--warm);color:var(--ink-2)}
.ph-c{padding:10px 11px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:11.5px;line-height:1.35}
.ph-c b{display:block;font-size:12.5px}
.ph-c small{color:var(--ink-3);font-size:10.5px}
.ph-l{font:800 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;display:block}
.ph-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ph-fare{font:800 16px/1 var(--sans)}
.ph-btn{display:grid;place-items:center;min-height:36px;border-radius:99px;background:var(--midnight);color:var(--ivory);font:800 11.5px/1 var(--sans)}
.ph-btn.coral{background:#DC2626;color:#FFF8EF}
.ph-chips{display:flex;gap:4px}
.ph-chips span{padding:6px 8px;border-radius:99px;border:1px solid var(--line-2);font:800 9.5px/1 var(--sans);white-space:nowrap}
.ph-chips span.on{background:var(--midnight);color:var(--ivory);border-color:var(--midnight)}
.ph-item{display:flex;gap:9px;align-items:center}
.ph-art{width:40px;height:40px;flex:none;border-radius:11px;background:#7A4A22 var(--kupesi) 0 0/30px}
.ph-add{width:26px;height:26px;flex:none;border-radius:50%;background:var(--midnight);color:var(--ivory);display:grid;place-items:center;font:800 15px/1 var(--sans)}
.ph-cart{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:14px;background:var(--midnight);color:var(--ivory);font-size:11px}
.ph-cart .ph-btn{min-height:30px;padding:0 10px;font-size:10.5px}
.ph-tl{list-style:none;margin:0;padding:0}
.ph-tl li{position:relative;display:flex;gap:8px;padding:0 0 9px;font-size:11px;color:var(--ink-3)}
.ph-tl li::before{content:"";position:absolute;left:4px;top:11px;bottom:-1px;width:2px;background:var(--line-2)}
.ph-tl li:last-child::before{display:none}
.ph-tl i{position:relative;flex:none;width:10px;height:10px;margin-top:2px;border-radius:50%;border:2px solid var(--line-2);background:#fff}
.ph-tl li.d{color:var(--ink-2)}.ph-tl li.d::before{background:var(--lagoon-deep)}.ph-tl li.d i{background:var(--lagoon-deep);border-color:var(--lagoon-deep)}
.ph-tl li.n{color:var(--midnight);font-weight:800}.ph-tl li.n i{background:var(--coral);border-color:var(--coral)}
/* phone chrome: status bar, home bar, and a lock-screen style notification that wraps inside the screen */
.ph-bar{position:absolute;left:32px;right:30px;top:20px;z-index:4;display:flex;justify-content:space-between;align-items:center;font:800 10px/1 var(--sans);color:var(--midnight);pointer-events:none}
.ph-bar i{display:inline-block;width:16px;height:8px;border-radius:2px;border:1.5px solid currentColor;position:relative}
.ph-bar i::after{content:"";position:absolute;inset:1px 4px 1px 1px;background:currentColor;border-radius:1px}
.ph-home{position:absolute;left:50%;bottom:16px;width:76px;height:4px;margin-left:-38px;border-radius:2px;background:var(--midnight);opacity:.55;z-index:4}
.ph-note{display:flex;gap:9px;align-items:flex-start;min-width:0;padding:10px;border-radius:16px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(15,23,42,.55)}
.ph-note .logo{width:30px;height:30px;border-radius:9px;background-color:var(--cream);background-size:86%;flex:none}
.ph-note>span{flex:1;min-width:0;display:grid;gap:2px}
.ph-note .ph-l{margin:0;display:flex;justify-content:space-between;gap:6px}
.ph-note b{font:800 12px/1.2 var(--sans);overflow-wrap:anywhere}
.ph-note small{font-size:10.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.ph-s.on .ph-note{animation:phnote 620ms var(--spring) 420ms both}
@keyframes phnote{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.ph-feats{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.ph-feats button{width:100%;display:flex;align-items:center;gap:12px;min-height:60px;padding:0 14px;border-radius:var(--r-sm);background:#fff;border:1.5px solid var(--line);text-align:left;transition:border-color 260ms var(--out),box-shadow 260ms var(--out),transform 260ms var(--in)}
.ph-feats button[aria-pressed="true"]{border-color:var(--midnight);box-shadow:var(--sh);transform:translateX(4px)}
.ph-feats .av{width:38px;height:38px;border-radius:12px;flex:none}
.ph-feats .av .ic{width:19px;height:19px}
.ph-feats b{display:block;font:800 15.6px/1.1 var(--serif)}
.ph-feats small{display:block;font-size:12.5px;color:var(--ink-3)}
.ph-feats .bar{margin-left:auto;width:3px;height:26px;border-radius:2px;background:var(--line);overflow:hidden;flex:none}
.ph-feats .bar i{display:block;width:100%;height:0;background:var(--coral)}
.ph-feats button[aria-pressed="true"] .bar i{animation:phbar var(--ph-t,4200ms) linear forwards}
.getit.paused .ph-feats .bar i{animation-play-state:paused}
@keyframes phbar{to{height:100%}}
.getbtns{display:grid;gap:10px;margin-top:20px}
.getdone{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(15,23,42,.1);color:var(--lagoon-deep);font-weight:700}
.qr{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.qr svg{width:96px;height:96px;flex:none}
.qr p{font-size:13.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.ph-s,.ph-s>*{transition-duration:1ms!important;transition-delay:0s!important}.ph-feats .bar{display:none}}

.drivecta{margin-top:22px;font-size:16px}.drivecta a{color:inherit;font-weight:700;text-underline-offset:3px}
