/* TM NTWK — a social app for the road.
   Black-first like the apps people already live in, one clean typeface (Geist), pill controls,
   hairline dividers, posts with faces on them. Color only where it means something: the four kinds of place. */
:root{
  --bg:#000; --surface:#0f0f10; --surface-2:#19191b; --raised:#222225; --line:#262628; --line-2:#333336;
  --ink:#f4f4f5; --muted:#8b8b91; --faint:#5c5c61; --on-ink:#000;
  --coffee:#f5b83d; --food:#ff7a45; --late:#a78bfa; --laundry:#40b4f5; --parking:#94a3b8; --gym:#f472b6; --pharmacy:#4ade80; --gear:#2dd4bf; --up:#2fd27a; --down:#ff5a6e; --route:#f4f4f5;
  --glass:rgba(16,16,18,.72);
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#f4f4f5; --raised:#ececee; --line:#ececee; --line-2:#dcdcdf;
    --ink:#0a0a0b; --muted:#6e6e74; --faint:#a1a1a7; --on-ink:#fff;
    --coffee:#e9a520; --food:#f25f26; --late:#8b6cf0; --laundry:#1f9ae6; --parking:#64748b; --gym:#db2777; --pharmacy:#16a34a; --gear:#0d9488; --up:#16a35a; --down:#e5384f; --route:#0a0a0b;
    --glass:rgba(255,255,255,.78);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;letter-spacing:-.005em}
a{color:inherit}
button{font-family:inherit;letter-spacing:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--muted)} .small{font-size:13px}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* wordmark */
.brand{display:inline-flex;align-items:center;gap:4px;text-decoration:none;white-space:nowrap;font:700 19px/1 var(--sans);letter-spacing:-.035em}
.brand .globe{width:15px;height:15px;flex:none;display:block}
.brand .net{font-weight:500;color:var(--muted);margin-left:-2.25px}

/* shell */
.app{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding-top:env(safe-area-inset-top,0px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:54px;background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:8}
.top-right{display:flex;align-items:center;gap:10px;min-width:0}
.iconbtn{appearance:none;border:0;background:var(--surface-2);color:var(--ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:600 16px var(--sans);text-decoration:none;transition:background .15s}
.iconbtn:hover{background:var(--raised)}
img.av{object-fit:cover;padding:0}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font:600 12px var(--sans);color:#000;background:var(--muted)}
.av.lg{width:56px;height:56px;font-size:20px}
.av.md{width:36px;height:36px;font-size:14px}
main{position:relative;min-height:0}
.tabs{background:var(--bg);border-top:1px solid var(--line);padding-block:4px calc(4px + env(safe-area-inset-bottom,0px));position:relative;z-index:8}
.tabs-in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
.tab{position:relative;display:grid;place-items:center;height:50px;text-decoration:none;color:var(--faint);border-radius:14px;transition:color .15s}
.tab svg{width:26px;height:26px}
.tab:hover{color:var(--muted)}
.tab.on{color:var(--ink)}
.tab.on svg{stroke-width:2.3}
.tab .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tab .badge{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--down);color:#fff;font:600 10px/17px var(--sans);text-align:center;padding:0 5px;border:2px solid var(--bg);box-sizing:content-box}
.tab.create{color:var(--ink)}
.tab.create span.plus{width:44px;height:34px;border-radius:12px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:background .15s}
.tab.create:hover span.plus{background:var(--surface-2)}
.tab.create svg{width:20px;height:20px}

/* map */
#mapView{position:absolute;inset:0;overflow:hidden;background:var(--surface-2)}
#gmap{position:absolute;inset:0}
.mapmsg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}
.mapmsg div{max-width:360px;display:flex;flex-direction:column;gap:6px}
.mapmsg b{color:var(--ink);font:600 17px var(--sans)}
.pin{position:relative;width:38px;height:38px;cursor:pointer;transform-origin:50% 50%;transition:transform .15s}
.pin svg{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pin.sel{transform:scale(1.25);z-index:3}
.pin .sc{position:absolute;top:-6px;right:-10px;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--bg);font:600 10px/18px var(--sans);text-align:center}
.cluster{width:44px;height:44px;border-radius:50%;padding:4px;background:var(--ring,var(--ink));box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s}
.cluster span{display:block;width:100%;height:100%;border-radius:50%;background:var(--bg);color:var(--ink);font:700 14px/36px var(--sans);text-align:center}
.cluster.big{width:52px;height:52px}.cluster.big span{line-height:44px;font-size:15px}
.cluster:hover{transform:scale(1.08)}
.stop{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font:600 11px/24px var(--sans);text-align:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 20%,transparent)}
.stop.today{background:var(--coffee);color:#000;width:30px;height:30px;line-height:30px}
.me-dot{width:18px;height:18px;border-radius:50%;background:#0a84ff;border:3px solid #fff;box-shadow:0 0 0 8px rgba(10,132,255,.22)}
.mapbar{position:absolute;top:12px;left:0;right:0;z-index:4;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.mapbar > *{pointer-events:auto}
.search{position:relative;max-width:560px;width:100%}
.search input{width:100%;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);padding:0 16px 0 42px;font:500 16px var(--sans);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.search input::placeholder{color:var(--muted)}
.search svg.mag{position:absolute;left:15px;top:14px;width:18px;height:18px;color:var(--muted);z-index:1;pointer-events:none}
.results{position:absolute;top:54px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.35);max-height:52vh;overflow-y:auto;z-index:2;padding:6px}
.res{display:flex;align-items:center;gap:12px;width:100%;appearance:none;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);padding:10px;text-align:left;cursor:pointer;font:500 15px var(--sans)}
.res:hover,.res:focus-visible{background:var(--surface-2)}
.res .sub{color:var(--muted);font-size:13px;font-weight:400}
.res .tag{margin-left:auto;font:600 11px var(--sans);color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent);padding:4px 8px;border-radius:999px}
.res .ki,.res > svg{width:34px;height:34px;flex:none}
.res > svg:not(.ki){padding:7px;border-radius:50%;background:var(--surface-2);color:var(--muted)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.kchip{flex:none;appearance:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--ink);border-radius:999px;height:34px;padding:0 13px 0 9px;font:500 14px var(--sans);cursor:pointer}
.kchip .ki{width:18px;height:18px}
.kchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kchip.all{padding-left:13px}
.mapctl{position:absolute;right:max(12px,env(safe-area-inset-right,0px));z-index:4;display:flex;flex-direction:column;gap:8px;top:118px}
.mapctl .iconbtn{width:42px;height:42px;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.mapctl .iconbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mapctl svg{width:19px;height:19px}
.fab{display:none}
.maphint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:13px;color:var(--muted);max-width:calc(100% - 140px);text-align:center}
.maphint b{color:var(--ink);font-weight:600}
.map-powered{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:20px;z-index:3;margin:0!important;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:999px;padding:6px 11px!important;font-size:11px!important}

/* sheet */
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:78%;overflow-y:auto;background:var(--surface);border-top:1px solid var(--line);border-radius:26px 26px 0 0;box-shadow:0 -16px 40px rgba(0,0,0,.4);padding-block:8px 22px;animation:up .25s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){#sheet,.view > *{animation:none!important}}
.grab{width:36px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 14px}
.sheet-in{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.spot-head{display:flex;gap:14px;align-items:flex-start}
.spot-head .ki{width:52px;height:52px;flex:none}
.spot-head h2{font:700 24px/1.15 var(--sans);letter-spacing:-.025em}
.vote{display:flex;align-items:center;gap:8px}
.vbtn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:600 14px var(--sans);transition:background .15s,border-color .15s}
.vbtn:hover{background:var(--surface-2)}
.vbtn svg{width:16px;height:16px}
.vbtn:disabled{opacity:.5;cursor:default}
.vbtn.up.on{background:color-mix(in srgb,var(--up) 16%,transparent);border-color:var(--up);color:var(--up)}
.vbtn.down.on{background:color-mix(in srgb,var(--down) 16%,transparent);border-color:var(--down);color:var(--down)}
.score{font:600 15px var(--sans);min-width:28px;text-align:center;color:var(--muted)}
.post{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.post:first-of-type{border-top:0}
.post .meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:14px}
.post .meta b{font-weight:600}
.post .meta span{color:var(--muted);font-size:13px}
.post .body{margin-top:2px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.post .x{font-size:13px;margin-left:auto}
.listrow{display:flex;align-items:center;gap:12px;width:100%;appearance:none;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);padding:10px 8px;margin:0 -8px;width:calc(100% + 16px);text-align:left;cursor:pointer}
.listrow:hover{background:var(--surface-2)}
.listrow .ki{width:40px;height:40px;flex:none}
.listrow .nm{flex:1;min-width:0}
.listrow .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listrow .nm span{color:var(--muted);font-size:13px}
.linkbox{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-md);background:var(--surface-2)}
.linkbox input,.linkbox textarea{background:var(--surface)}
.linkbox textarea{min-height:58px;font-size:15px}
.linkbox .results{position:static;box-shadow:none;margin-top:2px;padding:4px}
.warnnote{color:var(--food)}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font:500 12px var(--sans)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line-2)}

/* shared ui */
.title{display:block;font:700 30px/1.1 var(--sans);letter-spacing:-.035em}
.sheet-in .title{font-size:22px}
.label{font:500 13px/1.2 var(--sans);color:var(--muted)}
#pageView{position:absolute;inset:0;overflow-y:auto;padding-block:0 48px}
.page{max-width:620px;margin:0 auto}
.view{display:flex;flex-direction:column;gap:14px}
.view > *{animation:rise .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(6px);opacity:.5}to{transform:none;opacity:1}}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 0;flex-wrap:wrap}
.lead{margin:-4px 0 4px;color:var(--muted);font-size:15px;max-width:58ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-width:0}
.card h3{font:600 18px/1.2 var(--sans);letter-spacing:-.02em}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.row > :first-child{min-width:0}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.divider{border:0;border-top:1px solid var(--line);margin:2px 0}
.btn{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:-.01em;padding:0 18px;height:44px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .1s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:progress}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.btn.sm{height:34px;padding:0 14px;font-size:14px}
.btn.block{width:100%}
.btn.ghost{border-color:transparent;background:var(--surface-2)}
.btn.ghost:hover{background:var(--raised)}
.btn.danger{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--line))}
.btn svg{width:18px;height:18px}
.btn:focus-visible,.kchip:focus-visible,.res:focus-visible,.vbtn:focus-visible,.iconbtn:focus-visible,.tab:focus-visible,.listrow:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--laundry);outline-offset:2px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns > .btn{flex:1 1 auto}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font:500 13px/1 var(--sans);color:var(--muted)}
.field small{color:var(--muted);font-size:12px}
input,select,textarea{width:100%;background:var(--surface-2);border:1px solid transparent;color:var(--ink);border-radius:var(--r-sm);padding:12px 14px;font:400 16px/1.3 var(--sans);transition:border-color .15s,background .15s}
input:focus,select:focus,textarea:focus{border-color:var(--line-2);background:var(--surface);outline:none}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:84px}
input[type=file]{padding:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface-2);padding:4px;border-radius:999px}
.seg.four{grid-template-columns:repeat(4,1fr);border-radius:var(--r-md)}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);padding:9px 4px;border-radius:999px;font:500 14px/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.seg.four button{flex-direction:column;gap:6px;border-radius:var(--r-sm);padding:10px 4px;font-size:13px}
.seg button .ki{width:24px;height:24px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pill{font:600 12px/1 var(--sans);padding:6px 10px;border-radius:999px;white-space:nowrap}
.pill.open{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)}
.pill.placed{color:var(--coffee);background:color-mix(in srgb,var(--coffee) 14%,transparent)}
.pill.done{color:var(--muted);background:var(--surface-2)}
.big{font:600 30px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.person{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.person:first-child{border-top:0;padding-top:0}
.item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline}
.item .notes{display:block;color:var(--muted);font-size:13px}
.x{appearance:none;border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
.x:hover{color:var(--down)}
.paid{color:var(--up);font:600 12px var(--sans)}
.owed{color:var(--food);font:600 12px var(--sans)}
.share-txt{font:400 14px/1.5 var(--mono);min-height:110px}
.back{font:500 14px var(--sans);color:var(--muted);text-decoration:none;margin-top:18px;display:inline-flex;align-items:center;gap:4px}
.back:hover{color:var(--ink)}
.runcard{display:grid;grid-template-columns:1fr auto;gap:6px 12px;text-decoration:none;transition:background .15s}
.runcard:hover{background:var(--surface-2)}
.runcard h3{font-size:20px}
.empty{padding:28px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.empty strong{color:var(--ink);font:600 17px/1.2 var(--sans)}
.show{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.show:first-child{border-top:0}
.show .date{text-align:center;border-radius:14px;padding:8px 0;background:var(--surface-2)}
.show .date b{display:block;font:700 20px/1 var(--sans);letter-spacing:-.02em}
.show .date span{font:500 11px/1.4 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.show.is-today .date{background:var(--ink);color:var(--bg)}
.show.is-today .date span{color:var(--bg);opacity:.7}
.show.is-past{opacity:.45}
.show .near{display:flex;gap:10px;margin-top:5px;flex-wrap:wrap;font:500 12px var(--sans);color:var(--muted)}
.show .near span{display:inline-flex;align-items:center;gap:4px}
.show .near .ki{width:16px;height:16px}
.member{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.member:first-child{border-top:0}
.member .who{flex:1;min-width:0}
.member .who b{display:block;font-weight:600}
.role{font:400 13px var(--sans);color:var(--muted)}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.steps strong{color:var(--ink);font-weight:600}
.thinking{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.thinking::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{border-radius:var(--r-md);padding:14px 16px;background:var(--surface-2);font-size:14px;color:var(--muted)}
.notice b{color:var(--ink)}
.profile-head{display:flex;align-items:center;gap:14px}
.profile-head h3{font:700 22px/1.15 var(--sans);letter-spacing:-.03em}
.stats{display:flex;gap:22px;font-size:14px;color:var(--muted)}
.stats b{color:var(--ink);font-weight:600;margin-right:4px}
.powered{margin:30px 0 8px;text-align:center;font:500 12px var(--sans);color:var(--faint)}
.powered a{text-decoration:none;color:var(--muted);font-weight:600}
.powered a:hover{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);font:500 14px/1.3 var(--sans);padding:11px 18px;border-radius:18px;text-align:center;z-index:40;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:rise .2s ease-out}

/* landing */
.landing{min-height:100%;padding-block:max(16px,env(safe-area-inset-top,0px)) 28px}
.landing .wrapin{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.landing nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.landing h1{font:700 clamp(40px,10.5vw,64px)/1.02 var(--sans);letter-spacing:-.045em;margin-top:24px}
.landing h1 span{color:var(--muted)}
.landing p.big-p{margin:0;font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch}
.landing p.big-p b{color:var(--ink);font-weight:600}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trust > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.trust .label{margin-bottom:10px;font-weight:600}
.trust .yes{color:var(--up)} .trust .no{color:var(--down)}
.trust ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
@media (max-width:440px){.trust{grid-template-columns:1fr}}
.legend-row{display:flex;flex-wrap:wrap;gap:8px}
.legend-row span{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--sans);background:var(--surface-2);border-radius:999px;padding:6px 14px 6px 6px}
.legend-row .ki{width:24px;height:24px}
.feat{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.feat div{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.feat .fi{grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center}
.feat .fi svg{width:22px;height:22px}
.feat b{font-weight:600;font-size:16px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta .btn{flex:1 1 200px;height:50px;font-size:16px}

/* crew order page */
.solo{min-height:100%;padding-block:max(12px,env(safe-area-inset-top,0px)) 28px}
.solo .page{display:flex;flex-direction:column;gap:14px}
.solo nav{height:48px;display:flex;align-items:center}

/* simple landing */
.landing.simple{display:flex;min-height:100%}
.landing.simple .wrapin{max-width:560px;width:100%;gap:0;min-height:calc(100dvh - 44px)}
.landing.simple .hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:40px 32px}
.landing.simple h1{margin:0;font-size:clamp(38px,10vw,56px)}
.landing.simple p.big-p{font-size:17px}
.landing.simple .cta .btn{flex:1 1 100%}
.invite-link{align-self:center;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none}
.invite-link:hover{color:var(--ink)}
.mini{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mini li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.mini b{font-weight:600;min-width:64px}
.mini span{color:var(--muted)}

/* scroll landing */
.lp{min-height:100%;overflow-x:hidden}
.lp-wide{max-width:1120px;margin:0 auto;width:100%}
.lp-nav{position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lp-nav .lp-wide{height:64px}
.lp-hero{min-height:calc(100dvh - 64px);display:flex;align-items:center;position:relative;padding-block:24px 88px}
.lp-hero-grid{display:grid;gap:40px;align-items:center}
.lp-copy{display:flex;flex-direction:column;gap:18px;max-width:560px}
.lp-hero h1{font:700 clamp(40px,9vw,68px)/1.02 var(--sans);letter-spacing:-.045em}
.lp-copy p,.lp-text p{margin:0;font-size:18px;line-height:1.55;color:var(--muted);max-width:44ch}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.lp-cta .btn{flex:1 1 170px;height:52px;font-size:16px}
.lp-down{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);color:var(--faint);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media (min-width:920px){
  .lp-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
  .lp-hero h1{font-size:clamp(46px,4.2vw,60px)}
  .lp-cta{max-width:420px}
}

/* world map */
.world{position:relative;margin:0;aspect-ratio:1000/470;width:100%}
.world-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dots{stroke:color-mix(in srgb,var(--ink) 26%,transparent);stroke-width:3.6;stroke-linecap:round;fill:none}
.arcs path{fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:2s}
.arcs path:nth-child(2){animation-delay:2.2s}.arcs path:nth-child(3){animation-delay:2.4s}.arcs path:nth-child(4){animation-delay:2.6s}.arcs path:nth-child(5){animation-delay:2.8s}.arcs path:nth-child(6){animation-delay:3s}.arcs path:nth-child(7){animation-delay:3.2s}.arcs path:nth-child(8){animation-delay:3.4s}.arcs path:nth-child(9){animation-delay:3.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.wpin,.vm-pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--k);box-shadow:0 0 0 2px var(--bg);transform:scale(0);animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.3s + var(--d))}
.wpin i,.vm-pin i{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--k);opacity:0;animation:ping 3.2s ease-out infinite;animation-delay:calc(1.4s + var(--d) * 3)}
@keyframes pop{to{transform:scale(1)}}
@keyframes ping{0%{transform:scale(.4);opacity:.8}70%,100%{transform:scale(1.9);opacity:0}}
.k-coffee{--k:var(--coffee)} .k-food{--k:var(--food)} .k-late{--k:var(--late)} .k-laundry{--k:var(--laundry)} .k-parking{--k:var(--parking)} .k-gym{--k:var(--gym)} .k-pharmacy{--k:var(--pharmacy)} .k-gear{--k:var(--gear)}

/* steps */
.lp-step{min-height:62vh;display:flex;align-items:center;padding-block:64px;border-top:1px solid var(--line)}
.lp-split{display:grid;gap:36px;align-items:center}
.lp-text{display:flex;flex-direction:column;gap:16px}
.lp-step h2,.lp-end h2{font:700 clamp(32px,7vw,52px)/1.06 var(--sans);letter-spacing:-.04em}
.lp-num{font:500 13px var(--mono);color:var(--faint)}
@media (min-width:920px){
  .lp-split{grid-template-columns:1fr 1fr;gap:80px}
  .lp-split.flip .lp-text{order:2}
}
.viz{position:relative;aspect-ratio:3/2;border-radius:28px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.viz svg{position:absolute;inset:0;width:100%;height:100%}
.viz svg path{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.vm-grid{position:absolute;inset:0;background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.6px);background-size:18px 18px;opacity:.7}
.vm-pin{width:22px;height:22px;margin:-11px 0 0 -11px;animation:none}
.vm-card{position:absolute;left:8%;right:8%;bottom:8%;display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line);opacity:0;transform:translateY(12px)}
.vm-card b{display:block;font-weight:600}
.vm-card span{color:var(--muted);font-size:13px}
.vm-k{width:34px;height:34px;flex:none;border-radius:50%;background:var(--k)}
.vn-av{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;font:600 18px var(--sans);color:#000;box-shadow:0 0 0 4px var(--surface);transform:scale(.6);opacity:0}
.vn-chip,.vr-chip{position:absolute;left:50%;bottom:9%;transform:translate(-50%,10px);white-space:nowrap;background:var(--ink);color:var(--bg);font:500 13px var(--sans);padding:9px 14px;border-radius:999px;opacity:0;display:flex;align-items:center;gap:8px}
.vn-chip b{font-weight:600}
.viz-code{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.vc-mail{width:min(84%,360px);border-radius:18px;background:var(--surface-2);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.vc-to{font-size:13px;color:var(--muted)}
.vc-code{display:flex;font-size:clamp(17px,2.4vw,20px);font-weight:600;color:var(--ink);min-height:1.3em}
.vc-btn{align-self:flex-start;background:var(--ink);color:var(--bg);font:600 13px var(--sans);padding:8px 14px;border-radius:999px;opacity:0;transform:translateY(6px)}
.reveal.in .vc-btn{animation:rise2 .5s ease forwards 1.4s}
html:not(.anim) .vc-btn{opacity:1;transform:none}
.vc-left{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.vc-left i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.vc-left i.off{background:var(--line-2)}
.vc-left span{margin-left:6px}
.vr-stop{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--ink);color:var(--bg);font:600 13px/30px var(--sans);text-align:center;transform:scale(0)}
.vr-stop.today{background:var(--coffee);color:#000}
.dotc{width:10px;height:10px;border-radius:50%;background:var(--k)}
.lp-end{min-height:70vh;display:flex;align-items:center;padding-block:80px 28px;border-top:1px solid var(--line)}
.lp-end .lp-wide{display:flex;flex-direction:column;gap:26px;align-items:center}

/* reveal choreography */
.anim .reveal .lp-text{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.anim .reveal.in .lp-text{opacity:1;transform:none}
.anim .lp-end.reveal,.anim .lp-end .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.anim .lp-end .reveal.in{opacity:1;transform:none}
.reveal.in .vm-pin{animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.2s + var(--d))}
.anim .reveal .vm-pin{transform:scale(0)}
.reveal.in .vm-card{animation:rise2 .6s ease forwards .9s}
.reveal.in svg path{animation:draw 1.2s cubic-bezier(.4,0,.2,1) forwards .3s}
.reveal.in .vn-av{animation:popin .5s cubic-bezier(.3,1.5,.5,1) forwards}
.reveal.in .vn-av:nth-of-type(2){animation-delay:.15s}.reveal.in .vn-av:nth-of-type(3){animation-delay:.3s}
.reveal.in .vn-chip,.reveal.in .vr-chip{animation:chip .5s ease forwards 1.3s}
.reveal.in .vr-stop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.reveal.in .vr-stop:nth-of-type(1){animation-delay:.3s}.reveal.in .vr-stop:nth-of-type(2){animation-delay:.8s}.reveal.in .vr-stop:nth-of-type(3){animation-delay:1.3s}
@keyframes rise2{to{opacity:1;transform:none}}
@keyframes popin{to{opacity:1;transform:scale(1)}}
@keyframes chip{to{opacity:1;transform:translate(-50%,0)}}
@keyframes type{to{opacity:1}}
/* without motion (or before JS), show everything at rest */
html:not(.anim) .vm-pin,html:not(.anim) .vr-stop{transform:none}
html:not(.anim) .vm-card,html:not(.anim) .vn-av{opacity:1;transform:none}
html:not(.anim) .vn-chip,html:not(.anim) .vr-chip{opacity:1;transform:translate(-50%,0)}
html:not(.anim) .viz svg path{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){
  .lp-down,.wpin,.wpin i,.arcs path{animation:none!important}
  .wpin{transform:none} .arcs path{stroke-dashoffset:0}
}

/* welcome gate (signed out / no code yet) */
.gated .tabs{display:none}
.gate{max-width:440px;margin:0 auto;min-height:calc(100dvh - 54px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:24px}
.gate-head h1{font:700 clamp(34px,9vw,46px)/1.05 var(--sans);letter-spacing:-.04em}
.gate-head .lead{margin:10px 0 0}
.gate .powered{margin-top:8px}

/* MapLibre */
#gmap .maplibregl-canvas{outline:none}
.maplibregl-marker{will-change:transform}
.maplibregl-marker:has(.pin.sel){z-index:3}
.maplibregl-ctrl-attrib{font:400 10px var(--sans)!important;background:var(--glass)!important;color:var(--muted)!important;border-radius:999px!important;margin:0 12px 20px 0!important}
.maplibregl-ctrl-attrib a{color:var(--muted)!important}
.maplibregl-ctrl-attrib-button{filter:invert(var(--attr-invert,0))}
@media (prefers-color-scheme: dark){:root{--attr-invert:1}}

/* sign-in tabs, links, what's new */
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{flex:1;height:36px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 14px var(--sans);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--bg)}
.linkish{font:inherit;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0;background:none;border:0;cursor:pointer}
.newlist{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.alsosaved a{color:var(--ink);font-weight:500}
#newBtn{position:relative}
#newBtn.dot::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--food);box-shadow:0 0 0 2px var(--bg)}

/* profile: icon links + photo */
.socs{display:flex;gap:8px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.soc svg{width:19px;height:19px}
.soc:hover{background:var(--line)}
.photo-row{display:flex;align-items:center;gap:14px}
.photo-row .av.lg{width:72px;height:72px;font-size:26px}

/* new order */
.neworder .step{display:flex;align-items:center;gap:10px;margin-top:6px}
.neworder .step .n{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 12px/24px var(--sans);text-align:center;flex:none}
.spotpicks{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -4px;padding:2px 4px 6px;-webkit-overflow-scrolling:touch}
.spotpick{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:10px;min-width:170px;max-width:230px;padding:10px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.spotpick b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.spotpick span span{display:block;font-size:12px;color:var(--muted)}
.picked{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--ink)}
.picked b{display:block}.picked span{font-size:13px;color:var(--muted)}
.paychoice{display:grid;gap:8px}
@media (min-width:560px){.paychoice{grid-template-columns:1fr 1fr}}
.paychoice button{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border-radius:16px;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);font:inherit;cursor:pointer}
.paychoice button span{font-size:13px;color:var(--muted);line-height:1.4}
.paychoice button.on{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,var(--surface-2))}
.countdown{align-self:flex-start;font:600 14px var(--sans);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--coffee) 18%,transparent);color:var(--coffee)}
.timeline{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.timeline li{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--faint);line-height:1.3}
.timeline li i{height:4px;border-radius:4px;background:var(--line)}
.timeline li.done{color:var(--muted)}.timeline li.done i{background:var(--ink)}
.timeline li.now{color:var(--ink);font-weight:600}.timeline li.now i{background:linear-gradient(90deg,var(--ink) 50%,var(--line) 50%)}
.runcard{display:flex;justify-content:space-between;gap:12px}

.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;border:1.5px dashed var(--line-2);border-radius:18px;text-align:center;cursor:pointer;color:var(--ink)}
.dropzone span{font-size:13px;color:var(--muted)}
.dropzone:hover,.dropzone.over{border-color:var(--ink);background:var(--surface-2)}

.kindgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kindgrid button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--muted);font:600 11px var(--sans);cursor:pointer}
.kindgrid button .ki{width:26px;height:26px}
.kindgrid button.on{border-color:var(--ink);color:var(--ink)}

.qr{display:grid;place-items:center;padding:14px;background:#fff;border-radius:16px;align-self:flex-start}
.qr img{display:block;width:180px;height:180px}

/* ===== landing: color, motion, new scenes ===== */
.lp{position:relative;isolation:isolate}
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(90px);opacity:.117;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--coffee);left:-12vmax;top:-14vmax}
.aurora i:nth-child(2){background:var(--late);right:-16vmax;top:18vh;animation-duration:32s;animation-delay:-8s}
.aurora i:nth-child(3){background:var(--laundry);left:18vw;bottom:-22vmax;animation-duration:30s;animation-delay:-14s}
.aurora i:nth-child(4){background:var(--food);right:8vw;bottom:-10vmax;width:34vmax;height:34vmax;opacity:.081;animation-duration:24s}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .aurora i{opacity:.09}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.08)}100%{transform:translate(-4vw,-3vh) scale(.95)}}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--coffee),var(--food),var(--late),var(--laundry),var(--gym))}
.lp-num{font-weight:700;color:var(--k,var(--faint))}
.lp-text h2{background:linear-gradient(100deg,var(--ink) 55%,color-mix(in srgb,var(--k,var(--ink)) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text}
.lp-split:has(.lp-num.k-coffee){--k:var(--coffee)} .lp-split:has(.lp-num.k-late){--k:var(--late)} .lp-split:has(.lp-num.k-food){--k:var(--food)} .lp-split:has(.lp-num.k-laundry){--k:var(--laundry)} .lp-split:has(.lp-num.k-gym){--k:var(--gym)}
.viz{background:linear-gradient(160deg,color-mix(in srgb,var(--k,var(--surface)) 9%,var(--surface)),var(--surface) 60%);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--k,#000) 45%,transparent)}
/* scroll cue */
.lp-down{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:opacity .4s}
.scrolled .lp-down{opacity:0}
.mouse{width:22px;height:34px;border:1.5px solid var(--muted);border-radius:12px;position:relative}
.mouse i{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
/* 01 streets */
.streets .water{fill:color-mix(in srgb,var(--laundry) 16%,transparent)}
.streets .park{fill:color-mix(in srgb,var(--pharmacy) 14%,transparent)}
.streets .roads path{stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:9;stroke-dasharray:1;stroke-dashoffset:1;fill:none}
.streets .lanes path{stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:.8;stroke-dasharray:4 5;fill:none}
.streets .minor path{stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:3;fill:none}
.reveal.in .streets .roads path{animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards .1s}
html:not(.anim) .streets .roads path{stroke-dashoffset:0}
.vm-pin{box-shadow:0 0 0 3px var(--surface),0 6px 16px color-mix(in srgb,var(--k) 50%,transparent)}
/* 02 network cards */
.viz-net svg path{stroke:color-mix(in srgb,var(--ink) 22%,transparent)!important;stroke-width:1.5!important}
.pcard{position:absolute;transform:translate(-50%,-50%) scale(.85);opacity:0;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.3);white-space:nowrap}
.pcard b{display:block;font:600 13px var(--sans)}
.pcard span:not(.pav){display:block;font-size:11px;color:var(--muted)}
.pcard em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11px;color:var(--muted);margin-top:4px}
.pcard .ic{width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.pcard .ic.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.pcard .ic.in{background:#0a66c2}.pcard .ic.web{border-radius:50%}
.pav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--sans);color:#000;flex:none}
.pcard.me{padding:12px 16px 12px 12px;z-index:2}.pcard.me .pav{width:44px;height:44px;font-size:17px}.pcard.me b{font-size:16px}
.pcard.sm .pav{width:26px;height:26px;font-size:11px}
.reveal.in .pcard{animation:pcard .55s cubic-bezier(.3,1.4,.5,1) forwards}
.reveal.in .pcard:nth-of-type(2){animation-delay:.25s}.reveal.in .pcard:nth-of-type(3){animation-delay:.4s}.reveal.in .pcard:nth-of-type(4){animation-delay:.55s}
@keyframes pcard{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
html:not(.anim) .pcard{opacity:1;transform:translate(-50%,-50%)}
.viz-net .flow{opacity:0;filter:drop-shadow(0 0 4px currentColor)}
.reveal.in .viz-net .flow{opacity:1;transition:opacity .4s 1.2s}
html:not(.anim) .viz-net .flow{opacity:1}
/* 03 road */
.viz-road .asphalt{fill:none;stroke:color-mix(in srgb,var(--ink) 14%,var(--surface));stroke-width:20;stroke-linecap:round;stroke-dasharray:none!important;stroke-dashoffset:0!important}
.viz-road .centerline{fill:none;stroke:var(--coffee);stroke-width:1.6;stroke-dasharray:7 7!important;stroke-dashoffset:0;opacity:.9}
.reveal.in .viz-road .centerline{animation:lanes 1.2s linear infinite!important}
@keyframes lanes{to{stroke-dashoffset:-14}}
.bus .body{fill:var(--ink)}.bus .win{fill:var(--bg)}.bus .lamp{fill:var(--coffee)}.bus .wheel{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.bus{opacity:0;transition:opacity .4s .6s}.reveal.in .bus,html:not(.anim) .bus{opacity:1}
.viz-road .vr-stop{width:auto;height:auto;margin:0;transform:translate(-50%,-140%) scale(0);padding:6px 9px;border-radius:10px;font:600 11px/1.2 var(--sans);text-align:left;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.viz-road .vr-stop b{display:block;font:600 9px var(--mono);letter-spacing:.06em;opacity:.65}
.reveal.in .viz-road .vr-stop{animation:stop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.reveal.in .viz-road .vr-stop:nth-of-type(1){animation-delay:.6s}.reveal.in .viz-road .vr-stop:nth-of-type(2){animation-delay:1s}.reveal.in .viz-road .vr-stop:nth-of-type(3){animation-delay:1.4s}
@keyframes stop{to{transform:translate(-50%,-140%) scale(1)}}
html:not(.anim) .viz-road .vr-stop{transform:translate(-50%,-140%)}
.flyer{position:absolute;left:7%;top:8%;width:17%;aspect-ratio:3/4;border-radius:8px;background:linear-gradient(160deg,var(--late),var(--food));padding:8% 3%;display:flex;flex-direction:column;gap:5%;transform:rotate(-8deg) translateY(-20px);opacity:0;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.flyer i{height:5%;border-radius:2px;background:rgba(255,255,255,.75)}.flyer i:nth-child(2){width:70%}.flyer i:nth-child(3){width:85%}
.flyer span{margin-top:auto;font:600 8px var(--mono);color:#000}
.reveal.in .flyer{animation:flyer .7s cubic-bezier(.3,1.3,.5,1) forwards .2s}
@keyframes flyer{to{opacity:1;transform:rotate(-8deg)}}
html:not(.anim) .flyer{opacity:1;transform:rotate(-8deg)}
/* 04 orders */
.viz-orders{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:6% 7%}
.bubble{align-self:flex-start;max-width:82%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--laundry);color:#001424;font:500 13px/1.35 var(--sans);opacity:0;transform:translateY(10px) scale(.96)}
.olist{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.orow{display:flex;align-items:center;gap:10px;font-size:13px;opacity:0;transform:translateX(-10px)}
.orow span:not(.pav):not(.cd){flex:1}
.orow em{font-style:normal;font-family:var(--mono);color:var(--muted)}
.orow.head{justify-content:space-between}.orow.head b{font-weight:600}
.orow .cd{font:600 11px var(--sans);padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--coffee) 18%,transparent);color:var(--coffee)}
.orow.pay{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}.orow.pay b{background:#008cff;color:#fff;padding:5px 10px;border-radius:999px;font-size:12px}
.pav.sm{width:24px;height:24px;font-size:10px}
.reveal.in .bubble{animation:rise2 .5s ease forwards .2s}
.reveal.in .orow{animation:rise2 .4s ease forwards}
.reveal.in .orow:nth-child(1){animation-delay:.8s}.reveal.in .orow:nth-child(2){animation-delay:1.2s}.reveal.in .orow:nth-child(3){animation-delay:1.6s}.reveal.in .orow:nth-child(4){animation-delay:2s}.reveal.in .orow:nth-child(5){animation-delay:2.5s}
html:not(.anim) .bubble,html:not(.anim) .orow{opacity:1;transform:none}
@media (max-width:520px){.pcard.sm{padding:5px 8px 5px 5px;gap:5px}.pcard.sm b{font-size:11px}.pcard.sm span:not(.pav){display:none}.pcard.me{padding:9px 12px 9px 9px}.pcard.me .pav{width:34px;height:34px;font-size:14px}.viz-road .vr-stop{font-size:10px}}
@media (prefers-reduced-motion: reduce){.aurora i,.mouse i,.centerline{animation:none!important}}
.streets .water,.streets .park{stroke:none!important}

.avbtn{position:relative;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;flex:none}
.avcam{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);box-shadow:0 0 0 2px var(--surface)}

/* simpler order page */
.msgprev{font-size:15px;line-height:1.5;padding:14px 16px;border-radius:18px 18px 18px 6px;background:color-mix(in srgb,var(--laundry) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--laundry) 25%,transparent);word-break:break-word}
details.more summary{cursor:pointer;list-style:none;font:600 14px var(--sans);color:var(--muted);display:flex;align-items:center;gap:8px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.more[open] summary::before{transform:rotate(45deg)}
details.more > textarea{margin-top:10px}
.paytag{border:0;cursor:pointer;font:600 12px var(--sans);padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--food) 16%,transparent);color:var(--food)}
.paytag.on{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up)}

/* invite: the line types itself out (one element, so Safari animates it reliably) */
.vc-code .typed{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}
.reveal.in .vc-code .typed{animation:typed 1s steps(15,end) forwards .35s}
@keyframes typed{to{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
html:not(.anim) .vc-code .typed{clip-path:none;-webkit-clip-path:none}