/* PK Eats "alive" layer: night-sky palette, purple-blue gradient type, flickering stars and shooting stars.
   Sits on top of builder.css and site.css; everything here is decoration. */
/* ── night sky palette: near-black, soft starlight text, purple and blue ── */
:root{
  --bg:#07070d;--bg-2:#0b0b14;--surface:#10101b;--surface-2:#151522;--surface-3:#1c1c2d;
  --hair:rgba(180,170,255,.09);--hair-2:rgba(180,170,255,.16);--bevel-hi:rgba(200,195,255,.10);
  /* Text is a soft starlight grey, never pure white. */
  --text:#d5d6e4;--muted:#9597ae;--muted-2:#666881;
  --accent:#a99cf5;--accent-hi:#c2b8ff;--accent-ink:#0e0c1d;--accent-soft:rgba(169,156,245,.14);
  --blue:#8fa9f5;--blue-soft:rgba(143,169,245,.13);
  --panel:linear-gradient(180deg,#12121e 0%,#0d0d17 100%);--glass:rgba(10,10,18,.74);--glass-line:rgba(180,170,255,.13);
  --shadow:0 20px 50px -20px rgba(0,0,0,.85);
  /* Only purple and blue: no rainbow. */
  --alive-flow:linear-gradient(100deg,#9a86f5 0%,#7e95f2 25%,#6d7ff0 50%,#8b74ee 75%,#9a86f5 100%);
  --starlight:#dedfec;
  --mx:50vw;--my:30vh;
}
html,body{background:var(--bg)}
body{color:var(--text)}
.pk-nav{background:rgba(7,7,13,.86);border-bottom-color:var(--hair)}
.topbar-in,.cartbar,.toast{border-color:var(--hair-2)}
.pk-panel{background:var(--surface);border-color:var(--hair-2)}
.pk-panel p,.pk-list{color:var(--muted)}
.pk-panel label{color:#b4b4c9}
.pk-live{border-color:var(--hair);color:#a9aed0}
.pk-live:before{background:#8fa9f5}
.pk-live.closed{color:#b7a6d8}
.pk-live.closed:before{background:#b39ddb}
.pk-pill{background:var(--accent-soft);color:#c2b8ff}
.pk-message{border-color:rgba(169,156,245,.3);background:rgba(169,156,245,.06);color:#cfcae8}
.pk-login-step{border-color:var(--hair);color:#bfc0d4}
.pk-positive{color:#9dc0f5}
.pk-provider{background:#e4e3ee;color:#1a1a26}
.filter-chip[aria-pressed="true"]{background:#c9c8db;border-color:#c9c8db;color:#0b0b14}
.cta{background-color:var(--accent);color:var(--accent-ink);background:linear-gradient(135deg,#b4a8f7 0%,#93a9f3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -12px rgba(140,125,240,.6)}
.cta.pending{background:var(--surface-3);color:var(--text)}

/* ── moving gradient text ───────────────────────────────────────────── */
.hero-title .pk-accent,.pk-wordmark span,.pk-small span,.brand span,.code-title,.pk-success-mark+.pk-eyebrow+h2{
  background:var(--alive-flow);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  animation:alive-flow 9s linear infinite;
}
/* White type in a few spots: the first hero line and headings, a soft starlight white. */
.hero-title{color:var(--starlight);text-shadow:0 0 28px rgba(150,140,245,.18)}
/* Keep the accent line its own (faster, brighter) gradient inside the title. */
.hero-title .pk-accent{display:inline-block;padding-bottom:.06em;filter:drop-shadow(0 6px 26px rgba(140,125,240,.35))}
#browseTitle,#menuName,.pk-panel h2,.sheet-head h3{color:var(--starlight)!important;-webkit-text-fill-color:currentColor}
.welcome,.pk-eyebrow{color:#8e9df3!important}
.pk-total b,.pk-amount{
  background:var(--alive-flow);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:alive-flow 10s linear infinite;
}
@keyframes alive-flow{to{background-position:-300% 0}}

/* ── living background: nebula + cursor glow + night-sky canvas ─────── */
body::before{
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 24%,rgba(120,95,230,.16),transparent 70%),
    radial-gradient(34% 30% at 80% 18%,rgba(80,110,230,.15),transparent 70%),
    radial-gradient(30% 26% at 66% 82%,rgba(150,90,220,.10),transparent 70%),
    radial-gradient(28% 24% at 24% 86%,rgba(70,90,200,.09),transparent 70%);
  filter:blur(30px);animation:alive-aurora 26s ease-in-out infinite alternate;
}
@keyframes alive-aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}
  100%{transform:translate3d(-4%,3%,0) rotate(-6deg) scale(1.02)}
}
@media (hover:hover) and (pointer:fine){
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx) var(--my),rgba(150,135,245,.09),rgba(110,140,240,.04) 40%,transparent 70%);
    transition:background .08s linear;
  }
}
#aliveSky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
#app{position:relative;z-index:1}

/* ── hero entrance + live dot ───────────────────────────────────────── */
.start .hero>*{animation:alive-rise .8s cubic-bezier(.22,.8,.25,1) both}
.start .hero>*:nth-child(2){animation-delay:.08s}.start .hero>*:nth-child(3){animation-delay:.16s}
.start .hero>*:nth-child(4){animation-delay:.24s}.start .hero>*:nth-child(5){animation-delay:.32s}
.start .hero>*:nth-child(6){animation-delay:.4s}.start .hero>*:nth-child(n+7){animation-delay:.48s}
@keyframes alive-rise{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.pk-live:before{animation:alive-pulse 2.2s ease-out infinite}
@keyframes alive-pulse{0%{box-shadow:0 0 0 0 rgba(143,169,245,.55)}70%{box-shadow:0 0 0 9px rgba(143,169,245,0)}100%{box-shadow:0 0 0 0 rgba(143,169,245,0)}}

/* The start card: a slow gradient border that breathes. */
.start-card{position:relative;isolation:isolate}
.start-card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:var(--alive-flow);background-size:300% 100%;animation:alive-flow 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
}

/* ── buttons: sheen, glow, ripple ───────────────────────────────────── */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta:not(.pending):not(.loading):not(:disabled){
  background-image:linear-gradient(110deg,transparent 35%,rgba(235,232,255,.32) 48%,transparent 62%),linear-gradient(135deg,#b4a8f7 0%,#93a9f3 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;
  animation:alive-sheen 5s ease-in-out infinite;
}
@keyframes alive-sheen{0%,62%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
@media (hover:hover){.cta:not(:disabled):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px -12px rgba(140,125,240,.7),0 0 0 4px rgba(169,156,245,.13)}}
.alive-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(230,226,255,.5),rgba(230,226,255,0) 70%);animation:alive-ripple .65s ease-out forwards;z-index:-1}
@keyframes alive-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.seg-opt.is-on{text-shadow:0 0 18px rgba(169,156,245,.4)}
.filter-chip,.linkbtn,.pk-nav button{transition:transform .18s cubic-bezier(.22,.8,.25,1),background .2s,color .2s}
@media (hover:hover){.filter-chip:hover,.linkbtn:hover{transform:translateY(-1px)}}

/* ── cards: 3D tilt with glare, staggered reveal ────────────────────── */
@media (hover:hover) and (pointer:fine){
  .card .card-media{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.22,.8,.25,1),box-shadow .3s;transform-style:preserve-3d;will-change:transform}
  .card.alive-tilting .card-media{transition:transform .08s linear;box-shadow:0 22px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(180,170,255,.22)}
  .card .card-media::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(220,215,255,.18),transparent 60%)}
  .card.alive-tilting .card-media::before{opacity:1}
}
.alive-pre{opacity:0;translate:0 18px}
.alive-in{opacity:1;translate:0 0;transition:opacity .55s ease var(--d,0ms),translate .7s cubic-bezier(.22,.8,.25,1) var(--d,0ms),transform .2s cubic-bezier(.22,.8,.25,1)}
#menuBody .row.alive-in{transition:opacity .45s ease var(--d,0ms),translate .55s cubic-bezier(.22,.8,.25,1) var(--d,0ms),background .2s}
#menuBody .row{transition:background .2s}
@media (hover:hover){#menuBody .row:hover{background:rgba(169,156,245,.05)}}

/* ── everyone who asked for less motion gets a calm, static page ───── */
@media (prefers-reduced-motion:reduce){
  .hero-title .pk-accent,.pk-wordmark span,.pk-small span,.brand span,.code-title,.pk-total b,.pk-amount,.start-card::before{animation:none}
  body::before,.pk-live:before,.start .hero>*,.cta:not(.pending):not(.loading):not(:disabled){animation:none}
  .alive-pre{opacity:1;translate:none}
  #aliveSky{display:none}
}

/* ════════════ space features ════════════ */
#aliveFx{position:fixed;inset:0;width:100vw;height:100vh;z-index:150;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Time of day: the nebula shifts from dusk blue to deep late-night violet. */
body[data-tod="evening"]::before{background:radial-gradient(40% 32% at 22% 24%,rgba(95,105,235,.18),transparent 70%),radial-gradient(34% 30% at 80% 18%,rgba(130,95,230,.14),transparent 70%),radial-gradient(30% 26% at 66% 82%,rgba(80,120,230,.10),transparent 70%)}
body[data-tod="late"]::before{background:radial-gradient(40% 32% at 22% 24%,rgba(115,70,210,.17),transparent 70%),radial-gradient(34% 30% at 80% 18%,rgba(70,70,190,.12),transparent 70%),radial-gradient(30% 26% at 66% 82%,rgba(140,80,210,.09),transparent 70%)}
body[data-tod="day"]::before,body[data-tod="morning"]::before{background:radial-gradient(40% 32% at 22% 24%,rgba(110,130,240,.16),transparent 70%),radial-gradient(34% 30% at 80% 18%,rgba(150,130,245,.12),transparent 70%)}

/* Moon phase */
.start .hero{position:relative}
.alive-moon{position:absolute;z-index:3;top:22px;right:0;width:46px;height:46px;padding:5px;border-radius:50%;filter:drop-shadow(0 0 14px rgba(200,195,255,.25));transition:transform .3s cubic-bezier(.22,.8,.25,1)}
.alive-moon svg{width:100%;height:100%;display:block}
@media (hover:hover){.alive-moon:hover{transform:scale(1.08) rotate(-6deg)}}
.alive-moon.wobble{animation:alive-wobble .5s cubic-bezier(.22,.8,.25,1)}
@keyframes alive-wobble{30%{transform:rotate(-14deg) scale(1.1)}60%{transform:rotate(9deg)}}
.alive-moon-label{margin:-12px 0 20px;font-size:12px;color:var(--muted);letter-spacing:.02em}
@media (max-width:560px){.alive-moon{top:10px;width:40px;height:40px}}

/* Constellation logo: hold the wordmark while the stars assemble it. */
.alive-logo-wait{opacity:0;clip-path:inset(-20% 100% -20% 0)}
.alive-logo-reveal{animation:alive-logo-reveal var(--reveal-ms,750ms) cubic-bezier(.45,0,.25,1) both}
@keyframes alive-logo-reveal{from{opacity:.2;clip-path:inset(-20% 100% -20% 0);filter:drop-shadow(0 0 14px rgba(185,175,255,.9))}60%{opacity:1}to{opacity:1;clip-path:inset(-20% -5% -20% 0);filter:drop-shadow(0 0 0 rgba(185,175,255,0))}}
.pk-wordmark{transition:opacity .6s ease}

/* Sky dock: night sounds + calm sky */
.alive-dock{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:46;display:flex;gap:8px}
.alive-dock button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--muted);
  background:rgba(10,10,18,.72);border:1px solid var(--hair-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .2s,border-color .2s,box-shadow .2s,transform .2s}
.alive-dock button[aria-pressed="true"]{color:var(--accent-hi);border-color:rgba(169,156,245,.5);box-shadow:0 0 16px rgba(150,135,245,.35)}
@media (hover:hover){.alive-dock button:hover{transform:translateY(-2px);color:var(--text)}}
.alive-dock.inline{position:static;justify-content:center;margin:18px 0 0}

/* Toast for wishes, the comet and deliveries */
.alive-toast{position:fixed;left:50%;top:86px;z-index:160;max-width:min(520px,calc(100vw - 32px));padding:11px 18px;border-radius:999px;
  background:rgba(12,12,22,.88);border:1px solid rgba(180,170,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text);font-size:13.5px;text-align:center;box-shadow:0 14px 40px -14px rgba(0,0,0,.9),0 0 24px rgba(140,125,240,.18);
  opacity:0;transform:translate(-50%,-10px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.22,.8,.25,1)}
.alive-toast.show{opacity:1;transform:translate(-50%,0)}
.alive-toast b{color:var(--accent-hi)}

/* Rank badge next to your name */
#pkLogin[data-rank]::before{content:attr(data-rank-icon) " ";color:var(--accent-ink);opacity:.8}

/* Planet cards: an orbit ring on hover; closed restaurants are eclipsed. */
.card-status{isolation:isolate}
@media (hover:hover){
  .card .card-status::after{content:"";position:absolute;inset:-5px -8px;border-radius:50%;border:1px solid rgba(169,156,245,0);border-top-color:transparent;pointer-events:none}
  .card:hover .card-status::after{border-color:rgba(169,156,245,.35);border-top-color:rgba(220,215,255,.9);animation:alive-orbit-spin 2.4s linear infinite}
}
@keyframes alive-orbit-spin{to{transform:rotate(360deg)}}
.card.not-open .card-status::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset -3px 0 0 0 #c9c8db;margin-right:2px;flex:none}
.card.not-open .card-cover{filter:saturate(.45) brightness(.55)!important}

/* Telescope sweep on search */
.search{position:relative;overflow:hidden}
.search.alive-scan::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(169,156,245,.18) 50%,transparent 70%);animation:alive-scan .7s ease-out}
@keyframes alive-scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Menu categories as a constellation */
.cat-nav button{position:relative}
.cat-nav button+button::before{content:"";position:absolute;left:-6px;top:50%;width:6px;height:1px;background:linear-gradient(90deg,rgba(169,156,245,.15),rgba(169,156,245,.5))}
.cat-nav button[aria-current]{box-shadow:inset 0 0 0 1px rgba(169,156,245,.45),0 0 18px rgba(140,125,240,.25)!important;color:var(--starlight)!important}
.cat-nav button[aria-current]::after{content:"";position:absolute;top:3px;right:6px;width:3px;height:3px;border-radius:50%;background:#e4e1ff;box-shadow:0 0 6px 1px rgba(200,190,255,.8);animation:alive-twinkle 1.6s ease-in-out infinite}
@keyframes alive-twinkle{50%{opacity:.25;transform:scale(.6)}}

/* Cart count pulses like a star */
.alive-star-pulse{animation:alive-star-pulse .7s cubic-bezier(.22,.8,.25,1)}
@keyframes alive-star-pulse{30%{transform:scale(1.35);box-shadow:0 0 0 6px rgba(169,156,245,.18),0 0 22px rgba(169,156,245,.7)}}

/* Account: your constellation and rank */
.alive-constellation{margin:18px 0 6px;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(20,18,36,.9),rgba(12,12,22,.9));border:1px solid rgba(180,170,255,.16)}
.alive-constellation svg{display:block;width:100%;max-width:320px;height:auto;margin:10px auto 6px}
.alive-constellation line{stroke:rgba(185,175,255,.55);stroke-width:.5}
.alive-constellation circle{transform-box:fill-box;transform-origin:center}
.alive-constellation circle.on{fill:#e6e3ff;filter:drop-shadow(0 0 2px rgba(200,190,255,.9));animation:alive-twinkle 2.6s ease-in-out infinite}
.alive-constellation circle.off{fill:rgba(180,170,255,.18)}
.alive-constellation p{margin:6px 0 0!important;font-size:12.5px!important;color:var(--muted)!important;text-align:center}
.alive-constellation p b{color:var(--starlight)}
.alive-rank{display:flex;align-items:center;gap:12px}
.alive-rank-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--accent-ink);background:linear-gradient(135deg,#b4a8f7,#93a9f3);box-shadow:0 0 18px rgba(140,125,240,.45)}
.alive-rank b{display:block;color:var(--starlight);font-size:15px}
.alive-rank small{color:var(--muted);font-size:12px}

/* Balance as a glowing star */
.alive-balance{position:relative;display:inline-block;isolation:isolate}
.alive-balance::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;z-index:-1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(169,156,245,calc(var(--glow,.3) * .55)) 0%,rgba(110,140,240,calc(var(--glow,.3) * .25)) 35%,transparent 70%);animation:alive-breathe 4s ease-in-out infinite}
@keyframes alive-breathe{50%{transform:translate(-50%,-50%) scale(1.12);opacity:.8}}
.alive-landed{animation:alive-land .9s cubic-bezier(.22,.8,.25,1)}
@keyframes alive-land{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:none}}
.pk-success-mark{background:rgba(143,169,245,.12)!important;border-color:rgba(143,169,245,.4)!important;color:#c9d6ff!important;box-shadow:0 0 30px rgba(140,125,240,.35)}

/* Tracking: the order as a satellite on its orbit */
.alive-orbit{margin:14px 0 4px;padding:12px 12px 8px;border-radius:16px;background:rgba(12,12,22,.7);border:1px solid rgba(180,170,255,.14)}
.alive-orbit svg{display:block;width:100%;height:auto}
.alive-orbit .track{fill:none;stroke:rgba(180,170,255,.18);stroke-width:1.2;stroke-dasharray:3 4}
.alive-orbit .progress{fill:none;stroke:#a99cf5;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(169,156,245,.8));transition:stroke-dasharray 1s ease}
.alive-orbit circle{fill:rgba(180,170,255,.25)}
.alive-orbit circle.done{fill:#c9c2ff}
.alive-orbit text{fill:var(--muted);font-size:9px}
.alive-orbit .sat .glow{transform-box:fill-box;transform-origin:center;fill:rgba(169,156,245,.25);animation:alive-sat 1.8s ease-in-out infinite}
.alive-orbit .sat .core{fill:#eceaff}
@keyframes alive-sat{50%{transform:scale(1.5);opacity:.5}}
.alive-orbit-steps{display:flex;justify-content:space-between;gap:4px;margin-top:6px;font-size:10.5px;color:var(--muted-2)}
.alive-orbit-steps .on{color:var(--accent-hi)}
.alive-eta{margin:8px 0 0!important;font-size:13px!important;color:var(--muted)!important}
.alive-eta b{color:var(--starlight);font-variant-numeric:tabular-nums}

/* Calm sky (dock toggle or reduced motion): keep the look, drop the motion. */
.sky-calm .hero-title .pk-accent,.sky-calm .pk-wordmark span,.sky-calm .pk-small span,.sky-calm .brand span,.sky-calm .code-title,.sky-calm .pk-total b,.sky-calm .pk-amount,
.sky-calm .start-card::before,.sky-calm body::before,.sky-calm .pk-live:before,.sky-calm .start .hero>*,.sky-calm .cta,.sky-calm .alive-balance::before,
.sky-calm .alive-constellation circle.on,.sky-calm .cat-nav button[aria-current]::after,.sky-calm .alive-orbit .sat .glow{animation:none!important}
@media (prefers-reduced-motion:reduce){#aliveFx{display:none}.alive-logo-wait{opacity:1;clip-path:none}.alive-logo-reveal{animation:none}}

/* Order scenes: full-screen stage over the checkout window (civilization time-lapse → finale, trip home → landing) */
.alive-stage{position:fixed;inset:0;z-index:20;background:#05050c;opacity:0;transition:opacity .6s ease;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.alive-stage.on{opacity:1}
.alive-stage.gone{opacity:0;pointer-events:none;transition-duration:.7s}
.alive-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.alive-stage canvas.alive-3d{opacity:0;transition:opacity .6s ease}
.alive-stage canvas.alive-3d.on{opacity:1}
.alive-stage-top{position:absolute;left:0;right:0;top:0;padding:max(30px,env(safe-area-inset-top)) 24px 80px;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,12,.72),rgba(5,5,12,.35) 55%,rgba(5,5,12,0))}
.alive-stage-eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;color:#a99cf5}
.alive-stage-title{margin-top:8px;font-size:clamp(26px,4.2vw,42px);font-weight:760;letter-spacing:-.02em;color:#ecebff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.alive-stage-cap{position:absolute;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));transform:translateX(-50%);width:min(560px,calc(100% - 32px));
  padding:13px 18px 14px;text-align:center;border-radius:16px;background:rgba(10,10,24,.55);border:1px solid rgba(180,170,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.45);pointer-events:none}
.alive-stage-cap b{display:block;font-size:14px;letter-spacing:.05em;color:#c9c0ff;font-variant-numeric:tabular-nums}
.alive-stage-cap span{display:block;margin-top:4px;font-size:13.5px;color:#a3a4bd}
.pk-panel a.ghost{display:flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;text-decoration:none}
/* Live tracking: the same details as Yonder's tracking page, in the night sky */
.pk-track-counter{text-align:center;padding:22px 18px 18px;margin:8px 0 14px;border-radius:18px;border:1px solid rgba(169,156,245,.45);background:radial-gradient(120% 90% at 50% 0%,rgba(125,111,240,.16),rgba(14,13,28,.6));box-shadow:0 0 0 1px rgba(169,156,245,.08) inset,0 18px 50px -24px rgba(125,111,240,.55)}
.pk-track-counter small{display:block;font-size:12.5px;color:var(--muted)}
.pk-track-code{display:block;margin:6px 0 2px;font:800 clamp(40px,11vw,58px)/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--starlight)}
.pk-track-counter hr{border:0;border-top:1px solid rgba(180,170,255,.16);margin:16px 12%}
.pk-track-counter strong{display:block;margin-top:4px;font-size:22px;color:var(--starlight);letter-spacing:-.01em}
.pk-track-counter p{margin:12px 0 0!important;font-size:13px!important}
.pk-panel .pk-track-h{margin:22px 0 10px;font-size:17px;color:var(--starlight)}
.pk-track-steps{list-style:none;margin:0;padding:6px 16px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(180,170,255,.10)}
.pk-track-steps li{position:relative;display:flex;align-items:flex-start;gap:14px;padding:12px 0}
.pk-track-steps li>div{min-width:0}
.pk-track-steps li:not(:last-child)::before{content:"";position:absolute;left:10px;top:36px;bottom:-8px;width:2px;background:rgba(180,170,255,.14)}
.pk-track-steps li.done:not(:last-child)::before{background:linear-gradient(#a99cf5,#8fa9f5)}
.pk-track-dot{position:relative;z-index:1;flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(180,170,255,.28);box-sizing:border-box;margin-top:1px}
.pk-track-steps li.done .pk-track-dot{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230e0c1d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,linear-gradient(135deg,#b4a8f7,#8fa9f5)}
.pk-track-steps li.current .pk-track-dot{border:0;background:radial-gradient(circle,#0e0c1d 0 4px,transparent 4.5px),linear-gradient(135deg,#b4a8f7,#8fa9f5);box-shadow:0 0 0 5px rgba(169,156,245,.18);animation:pk-track-pulse 1.8s ease-in-out infinite}
@keyframes pk-track-pulse{50%{box-shadow:0 0 0 9px rgba(169,156,245,.05)}}
.pk-track-steps b{display:block;font-size:15px;color:#9a9bb3;font-weight:650}
.pk-track-steps li.done b,.pk-track-steps li.current b{color:var(--starlight)}
.pk-track-steps small,.pk-track-row small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.pk-track-list{border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(180,170,255,.10);overflow:hidden}
.pk-track-row{display:flex;align-items:center;gap:14px;padding:14px 16px;color:inherit;text-decoration:none}
.pk-track-row+.pk-track-row{border-top:1px solid rgba(180,170,255,.07)}
a.pk-track-row[href]:hover{background:rgba(169,156,245,.06)}
a.pk-track-row[href]::after{content:"›";margin-left:auto;color:var(--muted);font-size:20px}
.pk-track-row b{display:block;font-size:14.5px;color:var(--starlight);font-weight:600}
.pk-track-row b i{font-style:normal;color:var(--muted);font-weight:500}
.pk-track-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(169,156,245,.10);color:#c2b8ff}
.pk-track-ico .i{width:18px;height:18px}
.pk-panel .pk-track-directions{margin-top:18px}
@media (prefers-reduced-motion:reduce){.pk-track-steps li.current .pk-track-dot{animation:none}}
.sky-calm .pk-track-steps li.current .pk-track-dot{animation:none}

/* ── cart code screen: its own patch of night sky behind the code ── */
#codeSheet .sheet{isolation:isolate;background:var(--panel)}
#codeSheet .sheet::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%,rgba(222,223,236,.9),transparent),radial-gradient(1px 1px at 22% 62%,rgba(200,190,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 36% 28%,rgba(185,205,255,.85),transparent),radial-gradient(1px 1px at 48% 84%,rgba(222,223,236,.7),transparent),
    radial-gradient(1.2px 1.2px at 63% 12%,rgba(200,190,255,.9),transparent),radial-gradient(1px 1px at 74% 46%,rgba(185,205,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 88% 24%,rgba(222,223,236,.9),transparent),radial-gradient(1px 1px at 92% 72%,rgba(200,190,255,.7),transparent),
    radial-gradient(1px 1px at 14% 90%,rgba(185,205,255,.7),transparent),radial-gradient(1.2px 1.2px at 56% 54%,rgba(222,223,236,.6),transparent),
    radial-gradient(60% 45% at 50% 0%,rgba(120,95,230,.18),transparent 70%);
  animation:alive-code-twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes alive-code-twinkle{from{opacity:.55}to{opacity:1}}
#codeSheet .code-box{background:rgba(10,10,18,.55);border-color:var(--hair-2);box-shadow:0 0 40px -12px rgba(150,135,245,.45)}
#codeSheet .code-box span{background:var(--alive-flow);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:alive-flow 8s linear infinite}
.sky-calm #codeSheet .sheet::before,.sky-calm #codeSheet .code-box span{animation:none}
@media (prefers-reduced-motion:reduce){#codeSheet .sheet::before,#codeSheet .code-box span{animation:none}}
/* Tracking laid out like Yonder's page: restaurant, status check, headline, then the details. */
.pk-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk-track-head{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.pk-track-logo{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid rgba(180,170,255,.18)}
.pk-track-logo-blank{display:grid;place-items:center;background:rgba(169,156,245,.12);color:#c2b8ff}
.pk-track-logo-blank .i{width:20px;height:20px}
.pk-track-head b{display:block;font-size:16px;color:var(--starlight)}
.pk-track-head small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.pk-track-hero{margin:0 0 6px}
.pk-track-chip{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:650;color:var(--starlight)}
.pk-track-chip span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;line-height:1;color:#0e0c1d;background:linear-gradient(135deg,#b4a8f7,#8fa9f5);animation:pk-track-pulse 2.4s ease-in-out infinite}
.pk-track-chip.is-done span{background:linear-gradient(135deg,#8cf8cd,#16a096);animation:none}
.pk-track-chip.is-off span{background:#ed6b78;color:#fff;animation:none}
.pk-panel .pk-track-hero h3{margin:10px 0 4px;font-size:clamp(28px,7vw,38px);line-height:1.08;letter-spacing:-.02em;color:var(--starlight)}
.pk-track-sub{margin:0!important;color:var(--muted)}
.pk-track-name{font-size:clamp(28px,8vw,40px)!important;margin:8px 0 2px!important}
@media (prefers-reduced-motion:reduce){.pk-track-chip span{animation:none}}