:root{
  --orange:#ff7c10;
  --orange-deep:#b84f00;
  --ink:#050607;
  --white:#f7f7f7;
  --muted:rgba(255,255,255,.54);
  --line:rgba(255,255,255,.28);
  --glass:rgba(4,5,6,.74);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030405;color:var(--white);font-family:"MoMo Trust Display","Helvetica Neue",Arial,sans-serif}
button{font:inherit;color:inherit}
body{overflow:hidden}
.pbl-app{position:relative;min-height:100dvh;width:min(100vw,720px);margin:0 auto;overflow:hidden;background:#0b0d0f;box-shadow:0 0 80px rgba(0,0,0,.55)}
.map-bg{position:absolute;inset:0;background:
  linear-gradient(122deg,transparent 0 18%,rgba(255,255,255,.035) 18% 20%,transparent 20% 36%,rgba(255,255,255,.03) 36% 38%,transparent 38%),
  linear-gradient(34deg,transparent 0 26%,rgba(255,255,255,.028) 26% 29%,transparent 29% 55%,rgba(255,255,255,.03) 55% 58%,transparent 58%),
  radial-gradient(circle at 70% 38%,#20242a 0 6%,transparent 6.5%),
  radial-gradient(circle at 28% 58%,#191d22 0 8%,transparent 8.5%),
  #1a1d21;
  transform:scale(1.08);filter:contrast(1.05) saturate(.5)}
.map-bg:before,.map-bg:after{content:"";position:absolute;inset:-10%;background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.035) 78px 80px);transform:rotate(18deg)}
.map-bg:after{transform:rotate(-27deg);opacity:.7}
.map-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 42%,rgba(0,0,0,.66) 92%),
  rgba(0,0,0,.26)}
.map-label{position:absolute;color:rgba(255,255,255,.38);font-size:14px;letter-spacing:.04em;transform:rotate(-16deg)}
.m1{left:9%;top:28%}.m2{left:44%;top:56%}.m3{right:4%;top:43%}.m4{left:62%;top:24%}

.top-ui{position:absolute;z-index:20;top:max(18px,env(safe-area-inset-top));left:18px;right:18px}
.search-box{width:100%;height:58px;border:3px solid var(--orange);border-radius:25px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);color:rgba(255,255,255,.38);font-size:clamp(21px,5.5vw,38px);font-weight:300;letter-spacing:.035em;display:flex;align-items:center;justify-content:center;gap:10px}
.search-icon{font-size:.9em;color:var(--orange)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 0;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{flex:0 0 auto;border:0;border-radius:14px;padding:10px 15px;background:rgba(10,12,14,.80);border:1px solid rgba(255,255,255,.14);font-size:clamp(15px,3.9vw,23px);font-weight:300;letter-spacing:.03em;white-space:nowrap}
.filter.is-active{background:var(--orange);color:#050607;border-color:var(--orange)}

.map-stage{position:absolute;inset:0;z-index:5}
.map-pin{position:absolute;width:126px;height:172px;padding:0;border:0;background:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.50));transition:transform .35s var(--ease),filter .35s var(--ease)}
.map-pin:hover,.map-pin:focus-visible{transform:translateY(-6px) scale(1.04);outline:none}
.pin-head{position:absolute;left:10px;top:0;width:106px;height:106px;border-radius:50%;display:grid;place-items:center;background:#fff;border:8px solid rgba(67,67,67,.96);z-index:2;overflow:hidden}
.pin-tail{position:absolute;left:18px;top:64px;width:90px;height:108px;background:linear-gradient(180deg,var(--orange),var(--orange-deep));clip-path:polygon(0 0,100% 0,50% 100%);display:flex;justify-content:center;padding-top:51px}
.pin-more{width:44px;height:44px;border-radius:50%;background:#050505;color:var(--orange);display:grid;place-items:center;letter-spacing:2px;font-size:14px}
.logo-head{border-color:#444;background:#fff}.logo-mark{color:#111;font-weight:800;text-align:center;line-height:.9}.bonefish .logo-mark{font-size:17px;letter-spacing:.1em}.mcd{background:#e51d13}.mcd .logo-mark{font-size:52px;color:#ffcf18;font-weight:900}.pin-starbucks{left:14%;top:24%}.pin-bonefish{left:32%;top:43%}.pin-mcd{right:12%;top:65%}
.user-pin{left:12%;top:67%}.user-pin .pin-head{border-color:var(--orange);background:#191b1e;color:white;font-size:35px;font-weight:300}
.user-pin.discoverable{filter:drop-shadow(0 0 25px rgba(255,124,16,.55))}.user-pin.discoverable:before{content:"";position:absolute;left:-7px;top:-17px;width:128px;height:128px;border:1px solid rgba(255,124,16,.65);border-radius:50%;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.88);opacity:.9}100%{transform:scale(1.18);opacity:0}}

.merchant-tray{position:absolute;left:48%;top:44%;display:flex;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.38);background:rgba(0,0,0,.74);backdrop-filter:blur(16px);border-radius:18px;z-index:18;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.tray-action{position:relative;border:0;background:none;display:flex;min-width:58px;flex-direction:column;align-items:center;gap:3px;padding:3px 6px;color:white}.tray-action.compact{min-width:52px}
.tray-action span:not(.status-dot){font-size:25px}.tray-avatar{width:43px;height:43px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;font-size:19px!important;background:#23262b}
.bill-icon{width:43px;height:43px;border-radius:11px;background:var(--orange);color:#050607;display:grid!important;place-items:center;font-size:24px!important}
.status-dot{position:absolute;right:10px;top:0;width:14px;height:14px;border-radius:50%;background:#f52222;border:2px solid #050607}.status-dot.paid{background:#7bd326}
.tray-action small{font-size:12px;font-weight:300}

.bill-panel{position:absolute;z-index:30;left:0;right:0;bottom:0;padding:18px 24px max(18px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(3,4,5,.76),rgba(3,4,5,.95));backdrop-filter:blur(7px);border-top:1px solid rgba(255,255,255,.08);transform-origin:bottom;animation:rise .42s var(--ease)}
@keyframes rise{from{transform:translateY(35%);opacity:0}to{transform:translateY(0);opacity:1}}
.bill-panel h1{margin:0 0 8px;font-size:clamp(34px,8vw,58px);font-weight:200;letter-spacing:.025em;line-height:1}.bill-panel h1 em{color:var(--orange);font-style:normal}
.bill-rule{height:1px;background:var(--line);margin:10px 0}.bill-meta{text-align:right;color:rgba(255,255,255,.72);font-size:15px;letter-spacing:.08em}
.receipt-grid{display:grid;grid-template-columns:52px 1fr 94px;gap:8px;font-size:clamp(18px,4.8vw,29px);font-weight:300}.receipt-grid span:last-child{text-align:right}.receipt-head{font-size:clamp(16px,4.2vw,24px);text-decoration:underline;margin-bottom:4px}
.receipt-total{margin-top:4px}.receipt-total div{display:grid;grid-template-columns:1fr 110px;gap:8px;font-size:clamp(19px,4.9vw,28px);font-weight:300}.receipt-total span,.receipt-total strong{color:var(--orange);font-weight:300}.receipt-total strong{text-align:right}
.bill-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.split-button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px}.split-button span{width:64px;height:64px;border-radius:50%;background:var(--orange);color:#050607;display:grid;place-items:center;font-size:30px}.split-button small,.tip-wrap small{font-size:16px;font-weight:300}
.tip-wrap{display:flex;flex-direction:column;align-items:center}.tips{display:flex;gap:7px}.tips button{width:58px;height:58px;border:0;border-radius:50%;background:var(--orange);color:#050607;font-size:19px}.tips button.active{background:var(--orange);color:white;box-shadow:0 0 0 4px rgba(255,124,16,.25)}.tips button:not(.active).dimmed{background:#666;color:#111}

.status-copy{position:absolute;z-index:25;left:22px;right:22px;bottom:max(24px,env(safe-area-inset-bottom));font-size:clamp(36px,9vw,64px);font-weight:200;line-height:.95;letter-spacing:.025em;white-space:nowrap}.status-copy em{font-style:normal;color:var(--orange)}
.discover-slider{position:absolute;z-index:40;left:50%;bottom:max(110px,calc(env(safe-area-inset-bottom) + 88px));transform:translateX(-50%);width:min(84%,400px);border:0;background:rgba(0,0,0,.72);border-radius:999px;padding:8px 14px 8px 8px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.45);transition:opacity .25s ease}
.slider-track{width:76px;height:40px;border-radius:999px;background:#3a3d41;display:flex;align-items:center;padding:4px}.slider-knob{width:32px;height:32px;border-radius:50%;background:white;transition:transform .35s var(--ease),background .35s}.slider-copy{font-size:15px;font-weight:300;letter-spacing:.03em}
.discover-slider.is-on .slider-track{background:var(--orange)}.discover-slider.is-on .slider-knob{transform:translateX(36px);background:#050607}.discover-slider.is-on .slider-copy{color:var(--orange)}

.hidden{display:none!important}

@media (max-height:760px){
  .map-pin{transform:scale(.86);transform-origin:center bottom}
  .status-copy{font-size:36px}
  .bill-panel{padding-top:12px}
  .bill-panel h1{font-size:34px}
  .tips button{width:50px;height:50px}
}


.user-avatar img,
.tray-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.user-avatar{
  background:#191b1e;
}
.tray-avatar{
  width:43px;
  height:43px;
  padding:0;
  overflow:hidden;
}
.user-pin .pin-head{
  box-shadow:0 0 0 1px rgba(255,124,16,.35);
}
.merchant-pin.is-selected{
  filter:drop-shadow(0 0 18px rgba(255,124,16,.45)) drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
.merchant-pin.is-selected .pin-head{
  box-shadow:0 0 0 3px rgba(255,124,16,.45);
}



/* v0.2.3 — selected merchant + bill-ready fidelity */

.merchant-tray{
  left:46%;
  top:45.5%;
  padding:7px 8px;
  border-radius:16px;
  gap:0;
  background:rgba(0,0,0,.79);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.46);
}
.tray-action{
  min-width:58px;
  padding:2px 7px;
}
.tray-action small{
  font-size:11px;
  line-height:1;
  color:rgba(255,255,255,.86);
}
.tray-avatar,
.bill-icon,
.ride-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.bill-icon{
  border-radius:11px;
  background:var(--orange);
  color:#050607;
  font-size:24px!important;
}
.ride-icon{
  background:#050607;
  border:1px solid rgba(255,255,255,.28);
  color:white;
  font-size:20px!important;
  font-weight:500;
}
.ride-icon.lyft{
  background:#e000b6;
  border-color:#e000b6;
}
.status-dot{
  width:13px;
  height:13px;
  right:8px;
  top:-1px;
}
.pin-bonefish.is-selected{
  transform:translateY(-4px) scale(1.05);
}
.pin-bonefish.is-selected .pin-more{
  background:white;
  color:var(--orange);
}

/* Bill state is intentionally map-backed, like Dimitri's original mockup. */
.bill-panel{
  left:0;
  right:0;
  bottom:0;
  padding:16px 22px max(20px,env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,rgba(3,4,5,.18) 0%,rgba(3,4,5,.78) 15%,rgba(3,4,5,.94) 100%);
  backdrop-filter:blur(2px);
  border-top:0;
}
.bill-panel h1{
  margin:0 0 8px;
  font-size:clamp(34px,8.7vw,58px);
  font-weight:200;
  letter-spacing:.015em;
  line-height:.97;
}
.bill-meta{
  text-align:right;
  font-size:14px;
  letter-spacing:.07em;
  color:rgba(255,255,255,.72);
  margin-top:-3px;
}
.receipt-grid{
  grid-template-columns:48px 1fr 100px;
  font-size:clamp(17px,4.5vw,27px);
  line-height:1.22;
}
.receipt-head{
  font-size:clamp(16px,4.2vw,23px);
  margin-top:3px;
}
.receipt-total{
  margin-top:5px;
}
.receipt-total div{
  grid-template-columns:1fr 115px;
  font-size:clamp(18px,4.7vw,27px);
}
.bill-actions{
  margin-top:5px;
}
.split-button span{
  width:60px;
  height:60px;
  font-size:28px;
}
.tips{
  gap:6px;
}
.tips button{
  width:56px;
  height:56px;
  font-size:18px;
  font-weight:300;
}
.tip-wrap{
  min-width:260px;
}
.tip-wrap small{
  margin-top:3px;
  padding:2px 24px 4px;
  border:1px solid rgba(255,255,255,.26);
  border-top:0;
  border-radius:0 0 14px 14px;
  line-height:1;
}

/* Hide the greeting while the bill is open; the bill title becomes the state message. */
.pbl-app.bill-open .status-copy{
  opacity:0;
  pointer-events:none;
}
.pbl-app.bill-open .discover-slider{
  opacity:0;
  pointer-events:none;
}
.pbl-app.bill-open .map-stage{
  filter:saturate(.85) brightness(.76);
}
.pbl-app.bill-open .pin-bonefish{
  z-index:12;
}

/* Paid / leave-ready state */
.pbl-app.leave-ready .merchant-tray{
  border-color:rgba(123,211,38,.5);
}
.pbl-app.leave-ready .status-copy{
  white-space:normal;
  line-height:.98;
}


/* v0.2.4 — demo drawer + interaction polish */

.demo-drawer{
  position:absolute;
  z-index:140;
  right:10px;
  bottom:10px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.demo-tab{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,6,7,.72);
  color:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:300;
  letter-spacing:.08em;
  text-transform:lowercase;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.demo-panel{
  width:170px;
  display:grid;
  gap:6px;
  padding:9px;
  border-radius:16px;
  background:rgba(5,6,7,.88);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 36px rgba(0,0,0,.48);
}
.demo-panel button{
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.05);
  color:white;
  border-radius:10px;
  padding:9px 10px;
  text-align:left;
  font-size:12px;
  font-weight:300;
  letter-spacing:.03em;
}
.demo-panel button:hover,
.demo-panel button.active{
  background:var(--orange);
  color:#050607;
  border-color:var(--orange);
}

.leave-demo-button{
  display:block;
  margin:12px auto 0;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.8);
  border-radius:999px;
  padding:9px 16px;
  font-size:12px;
  font-weight:300;
  letter-spacing:.06em;
  text-transform:lowercase;
}
.leave-demo-button:hover{
  border-color:var(--orange);
  color:var(--orange);
}

.merchant-tray{
  transition:opacity .25s ease, transform .25s var(--ease);
}
.merchant-tray.hidden{
  opacity:0;
  transform:translateY(6px);
}
.bill-panel{
  transition:opacity .25s ease, transform .35s var(--ease);
}


/* v0.2.5 — interaction hardening */
.demo-drawer,
.demo-drawer *,
.demo-tab,
.demo-panel,
.demo-panel button{
  pointer-events:auto !important;
}
.demo-drawer{
  z-index:9999 !important;
}
.demo-tab{
  cursor:pointer;
  min-width:66px;
  min-height:38px;
}
.demo-panel button{
  cursor:pointer;
}


/* v0.2.6 — splash, sign up, verify */

.onboarding-screen{
  position:absolute;
  inset:0;
  z-index:500;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,124,16,.06),transparent 30%),
    linear-gradient(180deg,rgba(3,4,5,.92),rgba(3,4,5,.98));
  color:white;
  padding:max(28px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));
  text-align:center;
}
.onboarding-screen h1{
  margin:0;
  font-size:clamp(50px,10vw,84px);
  font-weight:200;
  letter-spacing:.12em;
  line-height:1;
  text-transform:lowercase;
}
.onboarding-prompt{
  margin:78px 0 42px;
  font-size:clamp(27px,6vw,46px);
  font-weight:200;
  letter-spacing:.03em;
}
.onboarding-note{
  margin:26px 0 34px;
  color:var(--orange);
  font-size:clamp(15px,3.2vw,24px);
  line-height:1.35;
  font-weight:300;
}
.digit-display{
  font-size:clamp(42px,8vw,68px);
  font-weight:200;
  letter-spacing:.23em;
  border-bottom:2px solid rgba(255,255,255,.75);
  padding:0 8px 8px;
}
.code-display{
  min-width:270px;
}
.keypad{
  width:min(100%,560px);
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 44px;
  padding-bottom:18px;
}
.keypad button{
  height:76px;
  border:0;
  background:transparent;
  color:white;
  font-size:clamp(38px,7vw,60px);
  font-weight:200;
  border-radius:20px;
}
.keypad button:hover{
  background:rgba(255,255,255,.05);
}
.splash-screen{
  justify-content:center;
}
.splash-logo{
  margin-top:-70px;
}
.splash-pin{
  width:300px;
  height:430px;
  margin:0 auto;
  position:relative;
  background:linear-gradient(180deg,var(--orange),#9a3f00);
  clip-path:polygon(50% 100%,8% 42%,8% 22%,16% 7%,30% 0,70% 0,84% 7%,92% 22%,92% 42%);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));
}
.splash-ring{
  position:absolute;
  left:38px;
  top:22px;
  width:224px;
  height:224px;
  border-radius:50%;
  background:#050607;
  border:18px solid var(--orange);
  display:grid;
  place-items:center;
  color:var(--orange);
  font-size:74px;
  font-weight:200;
  letter-spacing:.05em;
}
.splash-sub{
  position:absolute;
  top:175px;
  left:72px;
  right:72px;
  color:var(--orange);
  font-size:18px;
  letter-spacing:.13em;
  z-index:4;
}
.splash-feet{
  position:absolute;
  left:112px;
  top:252px;
  color:#050607;
  font-size:34px;
  line-height:.85;
  transform:rotate(18deg);
  letter-spacing:8px;
}
.splash-screen h1{
  margin-top:44px;
  font-size:clamp(30px,6vw,48px);
  letter-spacing:.015em;
}
.onboarding-next{
  margin-top:36px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:white;
  border-radius:999px;
  padding:13px 20px;
  font-size:16px;
}
.copyright{
  position:absolute;
  bottom:max(18px,env(safe-area-inset-bottom));
  color:rgba(255,255,255,.72);
  font-size:13px;
  letter-spacing:.04em;
}
.pbl-app.onboarding-open > .top-ui,
.pbl-app.onboarding-open > .map-stage,
.pbl-app.onboarding-open > .bill-panel,
.pbl-app.onboarding-open > .status-copy,
.pbl-app.onboarding-open > .discover-slider{
  visibility:hidden;
}


/* v0.3.0 — full user journey */

.primary-flow-button{
  margin-top:38px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.05);
  color:white;
  border-radius:999px;
  padding:14px 24px;
  font-size:17px;
  font-weight:300;
  letter-spacing:.04em;
}
.primary-flow-button:hover,
.primary-flow-button:focus-visible{
  border-color:var(--orange);
  color:var(--orange);
}

.keypad-next{
  color:var(--orange)!important;
}

.payment-screen,
.profile-screen{
  justify-content:flex-start;
  overflow-y:auto;
}

.payment-screen h1,
.profile-screen h1{
  flex:0 0 auto;
}

.payment-stack{
  width:min(100%,620px);
  display:grid;
  gap:14px;
  margin-top:42px;
}

.payment-card{
  display:grid;
  grid-template-columns:58px 62px 1fr 34px;
  align-items:start;
  gap:10px;
  padding:10px 0 16px;
  border-bottom:1px solid rgba(255,124,16,.45);
}

.payment-card-collapsed{
  border-bottom:0;
  padding-bottom:8px;
}

.payment-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  background:var(--orange);
  color:#050607;
  display:grid;
  place-items:center;
  font-size:31px;
  font-weight:600;
}
.payment-icon.muted{
  background:#777;
  color:#1c1c1c;
}
.card-icon{
  font-size:26px;
}

.payment-toggle{
  margin-top:9px;
  width:58px;
  height:34px;
  padding:3px;
  border:0;
  border-radius:999px;
  background:#6b6d70;
  display:flex;
  align-items:center;
  cursor:pointer;
}
.payment-toggle span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:white;
  transition:transform .25s var(--ease);
}
.payment-toggle.is-on{
  background:var(--orange);
}
.payment-toggle.is-on span{
  transform:translateX(24px);
}

.payment-fields{
  display:grid;
  gap:8px;
}
.payment-fields input{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(10,12,14,.42);
  color:white;
  font-size:17px;
  font-weight:300;
}
.payment-fields small{
  color:rgba(255,255,255,.45);
  font-size:18px;
  text-align:left;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.payment-expand{
  border:0;
  background:none;
  color:white;
  font-size:18px;
  padding-top:12px;
}
.payment-help{
  margin:auto 0 24px;
  color:rgba(255,255,255,.48);
  font-size:18px;
  line-height:1.3;
}

.round-next{
  flex:0 0 auto;
  width:74px;
  height:74px;
  border-radius:50%;
  border:3px solid var(--orange);
  background:transparent;
  color:var(--orange);
  font-size:40px;
  font-weight:200;
  margin-bottom:12px;
}

.profile-photo-wrap{
  position:relative;
  width:min(76vw,430px);
  aspect-ratio:1;
  margin:34px 0 20px;
}
.profile-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--orange);
  box-shadow:0 0 0 16px rgba(55,57,60,.74);
}
.profile-side-action{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
  background:var(--orange);
  color:#050607;
  font-size:26px;
}
.profile-side-action.left{left:-76px}
.profile-side-action.right{right:-76px}

.profile-name{
  font-size:clamp(30px,6vw,52px);
  font-weight:200;
  letter-spacing:.02em;
  margin-bottom:28px;
}

.profile-details{
  width:min(100%,520px);
  display:grid;
  gap:14px;
  margin-bottom:32px;
}
.profile-details div{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:clamp(24px,5vw,40px);
  font-weight:200;
}
.profile-detail-icon{
  color:var(--orange);
  font-size:34px;
}

.profile-actions{
  display:flex;
  gap:78px;
  margin:12px 0 auto;
}
.profile-actions button{
  border:0;
  background:none;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.profile-actions button span{
  color:var(--orange);
  font-size:44px;
}
.profile-actions button small{
  font-size:16px;
}

.checkout-overlay{
  position:absolute;
  inset:0;
  z-index:700;
  background:rgba(3,4,5,.94);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
}
.checkout-check{
  width:104px;
  height:104px;
  border-radius:50%;
  background:#7bd326;
  color:#050607;
  display:grid;
  place-items:center;
  font-size:64px;
  margin-bottom:22px;
  box-shadow:0 0 42px rgba(123,211,38,.28);
}
.checkout-overlay h2{
  margin:0;
  font-size:52px;
  font-weight:200;
  letter-spacing:.08em;
}
.checkout-overlay p{
  margin:18px 0 34px;
  font-size:clamp(36px,8vw,64px);
  font-weight:200;
  line-height:1;
}
.checkout-overlay p em{
  color:var(--orange);
  font-style:normal;
}
.checkout-overlay button{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.05);
  color:white;
  border-radius:999px;
  padding:12px 20px;
  font-size:15px;
}

@media (max-width:560px){
  .payment-card{
    grid-template-columns:48px 54px 1fr 24px;
    gap:7px;
  }
  .payment-icon{width:46px;height:46px}
  .payment-toggle{width:50px;height:30px}
  .payment-toggle span{width:24px;height:24px}
  .payment-toggle.is-on span{transform:translateX(20px)}
  .profile-side-action.left{left:-54px}
  .profile-side-action.right{right:-54px}
}


/* v0.3.1 — validation + profile centering */

.digit-display.empty-display:empty::before{
  content:attr(data-placeholder);
  color:rgba(255,255,255,.25);
}

.keypad-next:disabled{
  color:rgba(255,255,255,.18)!important;
  cursor:not-allowed;
}

.keypad-next:not(:disabled){
  color:var(--orange)!important;
  cursor:pointer;
}

.profile-screen{
  align-items:center;
}

.profile-photo-wrap{
  margin-left:auto;
  margin-right:auto;
}

.profile-photo{
  display:block;
  object-position:50% 44%;
}

.profile-name,
.profile-details,
.profile-actions{
  margin-left:auto;
  margin-right:auto;
}

.profile-name{
  width:100%;
  text-align:center;
}

.profile-details{
  align-self:center;
}

.profile-actions{
  justify-content:center;
}


/* v0.3.2 — MoMo Trust Display + active trays */

body,
button,
input{
  font-family:"MoMo Trust Display","Helvetica Neue",Arial,sans-serif;
}

.tray-action{
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
  border-radius:12px;
}
.tray-action:hover,
.tray-action:focus-visible{
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
  outline:none;
}
.tray-action:active{
  transform:translateY(0) scale(.96);
}

.tray-toast{
  position:absolute;
  z-index:680;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  min-width:220px;
  max-width:80%;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,6,7,.88);
  color:white;
  backdrop-filter:blur(14px);
  text-align:center;
  font-size:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}

.payment-card{
  transition:opacity .2s ease, transform .25s var(--ease), padding .25s ease;
}
.payment-card .payment-fields{
  transition:max-height .3s var(--ease), opacity .2s ease;
  overflow:hidden;
  max-height:240px;
  opacity:1;
}
.payment-card:not(.is-expanded) .payment-fields{
  max-height:52px;
  opacity:.78;
}
.payment-card:not(.is-expanded) .payment-fields > *:not(:first-child){
  display:none;
}
.payment-expand{
  cursor:pointer;
}
.payment-expand:hover{
  color:var(--orange);
}

.merchant-tray .tray-action.is-active{
  background:rgba(255,124,16,.16);
  box-shadow:inset 0 0 0 1px rgba(255,124,16,.42);
}


/* v0.3.3 — onboarding fit + no-wrap layout */

.onboarding-screen{
  overflow:hidden;
  justify-content:flex-start;
}

.onboarding-screen h1{
  width:100%;
  white-space:nowrap;
  text-wrap:nowrap;
  overflow:visible;
  font-size:clamp(38px,7vw,72px);
  letter-spacing:.08em;
  line-height:.95;
}

.onboarding-prompt{
  width:100%;
  white-space:nowrap;
  text-wrap:nowrap;
  overflow:visible;
  margin:54px 0 28px;
  font-size:clamp(22px,4.7vw,42px);
  line-height:1;
}

.digit-display{
  min-height:64px;
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(34px,6.5vw,58px);
  letter-spacing:.16em;
  line-height:1;
  padding-bottom:6px;
}

.onboarding-note{
  width:100%;
  margin:20px 0 18px;
  font-size:clamp(14px,2.7vw,22px);
  line-height:1.25;
}

.keypad{
  width:min(100%,520px);
  margin-top:auto;
  grid-template-columns:repeat(3,1fr);
  gap:8px 34px;
  padding-bottom:8px;
}

.keypad button{
  height:58px;
  min-height:58px;
  font-size:clamp(34px,6vw,54px);
  line-height:1;
}

#signupScreen,
#verifyScreen{
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}

#signupScreen h1,
#verifyScreen h1{
  flex:0 0 auto;
}

#signupScreen .keypad,
#verifyScreen .keypad{
  flex:0 0 auto;
  margin-top:auto;
}

#signupScreen .digit-display,
#verifyScreen .digit-display{
  flex:0 0 auto;
}

#signupScreen .onboarding-note,
#verifyScreen .onboarding-note{
  flex:0 0 auto;
}

@media (max-height:900px){
  .onboarding-screen h1{
    font-size:clamp(34px,6vw,60px);
  }

  .onboarding-prompt{
    margin:34px 0 20px;
    font-size:clamp(20px,4vw,34px);
  }

  .digit-display{
    min-height:54px;
    font-size:clamp(30px,5.6vw,48px);
  }

  .onboarding-note{
    margin:16px 0 12px;
    font-size:clamp(13px,2.4vw,18px);
  }

  .keypad{
    gap:4px 28px;
  }

  .keypad button{
    height:50px;
    min-height:50px;
    font-size:clamp(30px,5.2vw,46px);
  }
}

@media (max-height:760px){
  .onboarding-screen h1{
    font-size:34px;
  }

  .onboarding-prompt{
    margin:22px 0 14px;
    font-size:20px;
  }

  .digit-display{
    min-height:46px;
    font-size:30px;
  }

  .onboarding-note{
    margin:10px 0 8px;
    font-size:13px;
  }

  .keypad{
    gap:2px 22px;
  }

  .keypad button{
    height:44px;
    min-height:44px;
    font-size:30px;
  }
}

@media (max-width:520px){
  .onboarding-screen{
    padding-left:18px;
    padding-right:18px;
  }

  .onboarding-screen h1{
    font-size:clamp(34px,10vw,52px);
  }

  .onboarding-prompt{
    font-size:clamp(20px,6vw,30px);
  }

  .digit-display{
    font-size:clamp(28px,8vw,42px);
    letter-spacing:.10em;
  }

  .keypad{
    gap:6px 20px;
  }
}


/* v0.3.4 — responsive layout pass */

html,
body{
  width:100%;
  min-width:0;
  min-height:100%;
  overflow:hidden;
}

body{
  display:flex;
  justify-content:center;
  align-items:stretch;
}

.pbl-app{
  width:100%;
  max-width:none;
  min-width:0;
  height:100dvh;
  min-height:100dvh;
  margin:0;
  overflow:hidden;
}

/* ---------- Global responsive typography ---------- */

.onboarding-screen,
.top-ui,
.map-stage,
.bill-panel,
.status-copy,
.discover-slider{
  min-width:0;
}

.onboarding-screen h1,
.onboarding-prompt,
.profile-name,
.status-copy,
.bill-panel h1,
.splash-screen h1{
  max-width:100%;
  overflow-wrap:normal;
}

/* ---------- Splash ---------- */

.splash-screen{
  justify-content:center;
  padding:
    max(20px,env(safe-area-inset-top))
    clamp(18px,4vw,48px)
    max(20px,env(safe-area-inset-bottom));
}

.splash-logo{
  margin-top:0;
  width:min(46vw,300px);
}

.splash-pin{
  width:100%;
  height:auto;
  aspect-ratio:300 / 430;
}

.splash-ring{
  left:12.5%;
  top:5%;
  width:75%;
  height:auto;
  aspect-ratio:1;
  border-width:clamp(10px,2vw,18px);
  font-size:clamp(40px,9vw,74px);
}

.splash-sub{
  top:41%;
  left:20%;
  right:20%;
  font-size:clamp(11px,2.4vw,18px);
  white-space:nowrap;
}

.splash-feet{
  left:37%;
  top:58%;
  font-size:clamp(22px,4.4vw,34px);
}

.splash-screen h1{
  width:100%;
  margin-top:clamp(24px,4vh,44px);
  font-size:clamp(24px,5vw,48px);
  line-height:1.05;
  letter-spacing:.015em;
  text-align:center;
  white-space:normal;
}

.primary-flow-button{
  margin-top:clamp(22px,4vh,38px);
}

/* ---------- Sign up / verify ---------- */

#signupScreen,
#verifyScreen{
  padding-left:clamp(16px,4vw,42px);
  padding-right:clamp(16px,4vw,42px);
}

#signupScreen h1,
#verifyScreen h1{
  font-size:clamp(38px,8vw,72px);
  white-space:nowrap;
}

#signupScreen .onboarding-prompt,
#verifyScreen .onboarding-prompt{
  font-size:clamp(20px,4.5vw,40px);
  white-space:nowrap;
}

.digit-display{
  width:min(100%,780px);
  overflow:hidden;
  text-overflow:clip;
  text-align:center;
}

.keypad{
  width:min(100%,620px);
}

/* ---------- Payment methods ---------- */

.payment-screen{
  padding-left:clamp(14px,3vw,34px);
  padding-right:clamp(14px,3vw,34px);
}

.payment-screen h1{
  font-size:clamp(40px,8vw,76px);
  white-space:nowrap;
}

.payment-stack{
  width:min(100%,760px);
  margin-top:clamp(24px,4vh,42px);
}

.payment-card{
  width:100%;
  grid-template-columns:
    clamp(42px,7vw,58px)
    clamp(48px,8vw,62px)
    minmax(0,1fr)
    clamp(24px,4vw,34px);
}

.payment-fields{
  min-width:0;
}

.payment-fields input{
  min-width:0;
  font-size:clamp(13px,2.4vw,17px);
}

.field-row{
  min-width:0;
}

/* ---------- Profile ---------- */

.profile-screen{
  padding-left:clamp(18px,4vw,48px);
  padding-right:clamp(18px,4vw,48px);
  overflow-x:hidden;
}

.profile-screen h1{
  font-size:clamp(48px,9vw,86px);
  white-space:nowrap;
}

.profile-photo-wrap{
  width:min(58vw,460px);
  max-width:70vh;
  margin-top:clamp(18px,3vh,34px);
  margin-bottom:clamp(16px,2.8vh,24px);
}

.profile-photo{
  object-position:center center;
}

.profile-side-action{
  width:clamp(44px,6vw,58px);
  height:clamp(44px,6vw,58px);
  font-size:clamp(20px,3vw,28px);
}

.profile-side-action.left{
  left:clamp(-70px,-8vw,-50px);
}

.profile-side-action.right{
  right:clamp(-70px,-8vw,-50px);
}

.profile-name{
  width:100%;
  font-size:clamp(28px,5.5vw,52px);
  line-height:1.05;
  white-space:nowrap;
  text-align:center;
}

.profile-details{
  width:min(100%,620px);
  margin-bottom:clamp(18px,3vh,32px);
}

.profile-details div{
  font-size:clamp(22px,4.6vw,40px);
  min-width:0;
}

.profile-actions{
  gap:clamp(34px,8vw,78px);
  margin-top:clamp(8px,2vh,16px);
}

.profile-actions button small{
  font-size:clamp(13px,2.4vw,16px);
  white-space:nowrap;
}

/* ---------- Map ---------- */

.top-ui{
  top:max(14px,env(safe-area-inset-top));
  left:clamp(12px,3vw,28px);
  right:clamp(12px,3vw,28px);
}

.search-box{
  height:clamp(48px,7vh,62px);
  font-size:clamp(20px,4.6vw,38px);
  border-radius:clamp(18px,2.2vw,26px);
}

.filters{
  gap:clamp(6px,1vw,10px);
}

.filter{
  padding:
    clamp(8px,1.2vw,11px)
    clamp(10px,1.8vw,16px);
  font-size:clamp(13px,2.7vw,23px);
}

/* Pin sizing scales with the viewport */
.map-pin{
  width:clamp(88px,12vw,126px);
  height:clamp(120px,16.5vw,172px);
}

.pin-head{
  left:8%;
  width:84%;
  height:auto;
  aspect-ratio:1;
  border-width:clamp(5px,1vw,8px);
}

.pin-tail{
  left:14%;
  top:38%;
  width:72%;
  height:63%;
  padding-top:38%;
}

.pin-more{
  width:clamp(32px,4.4vw,44px);
  height:clamp(32px,4.4vw,44px);
  font-size:clamp(10px,1.7vw,14px);
}

.pin-starbucks{left:12%;top:24%}
.pin-bonefish{left:34%;top:44%}
.pin-mcd{right:11%;top:66%}
.user-pin{left:12%;top:68%}

.merchant-tray{
  left:46%;
  top:45%;
  max-width:min(48vw,340px);
  transform:none;
}

.tray-action{
  min-width:clamp(44px,6vw,58px);
  padding:2px clamp(4px,.8vw,7px);
}

.tray-avatar,
.bill-icon,
.ride-icon{
  width:clamp(36px,5vw,44px);
  height:clamp(36px,5vw,44px);
}

.tray-action small{
  font-size:clamp(9px,1.5vw,11px);
}

.discover-slider{
  width:min(78vw,430px);
  bottom:max(106px,calc(env(safe-area-inset-bottom) + 88px));
}

.slider-copy{
  font-size:clamp(13px,2.3vw,16px);
  white-space:nowrap;
}

.status-copy{
  left:clamp(18px,4vw,40px);
  right:clamp(18px,4vw,40px);
  bottom:max(18px,env(safe-area-inset-bottom));
  font-size:clamp(34px,7.8vw,72px);
  white-space:normal;
}

/* ---------- Bill ---------- */

.bill-panel{
  padding:
    clamp(12px,2vw,18px)
    clamp(16px,3vw,28px)
    max(16px,env(safe-area-inset-bottom));
}

.bill-panel h1{
  font-size:clamp(30px,6.2vw,58px);
  white-space:normal;
}

.receipt-grid{
  grid-template-columns:
    clamp(40px,6vw,52px)
    minmax(0,1fr)
    clamp(82px,12vw,110px);
  font-size:clamp(16px,3.4vw,27px);
}

.receipt-total div{
  grid-template-columns:minmax(0,1fr) clamp(96px,14vw,125px);
  font-size:clamp(17px,3.5vw,27px);
}

.bill-actions{
  gap:clamp(8px,2vw,16px);
}

.tips{
  flex-wrap:nowrap;
}

.tips button{
  width:clamp(46px,7vw,58px);
  height:clamp(46px,7vw,58px);
  font-size:clamp(16px,2.6vw,19px);
}

/* ---------- Demo drawer ---------- */

.demo-drawer{
  right:clamp(8px,2vw,14px);
  bottom:clamp(8px,2vw,14px);
}

/* ---------- Desktop / wide ---------- */

@media (min-width:900px){
  .pbl-app{
    width:min(100vw,1180px);
  }

  .profile-photo-wrap{
    width:min(48vw,520px);
  }

  .profile-name{
    font-size:clamp(36px,4vw,58px);
  }

  .top-ui{
    left:3%;
    right:3%;
  }

  .merchant-tray{
    left:43%;
    top:45%;
  }
}

/* ---------- Narrow mobile ---------- */

@media (max-width:520px){
  .splash-logo{
    width:min(62vw,260px);
  }

  .splash-screen h1{
    font-size:clamp(24px,7vw,34px);
  }

  #signupScreen .onboarding-prompt,
  #verifyScreen .onboarding-prompt{
    white-space:normal;
  }

  .profile-photo-wrap{
    width:min(72vw,380px);
  }

  .profile-side-action.left{left:-48px}
  .profile-side-action.right{right:-48px}

  .profile-name{
    white-space:normal;
  }

  .merchant-tray{
    left:42%;
    top:45%;
    transform:scale(.9);
    transform-origin:left center;
  }

  .discover-slider{
    width:min(86vw,390px);
  }

  .status-copy{
    font-size:clamp(30px,9vw,48px);
  }
}

/* ---------- Short screens ---------- */

@media (max-height:760px){
  .profile-photo-wrap{
    width:min(42vh,360px);
  }

  .profile-screen h1{
    font-size:40px;
  }

  .profile-name{
    font-size:28px;
  }

  .profile-details div{
    font-size:22px;
  }

  .status-copy{
    font-size:36px;
  }

  .discover-slider{
    bottom:82px;
  }
}


/* v0.3.5 — profile + map alignment correction */

/* Keep the app as a centered portrait canvas so map coordinates stay coherent. */
body{
  background:#020304;
}

.pbl-app{
  width:min(100vw,720px);
  max-width:720px;
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  overflow:hidden;
}

/* ---------- Profile correction ---------- */

.profile-screen{
  justify-content:flex-start;
  overflow:hidden;
  padding:
    max(18px,env(safe-area-inset-top))
    clamp(18px,4vw,34px)
    max(18px,env(safe-area-inset-bottom));
}

.profile-screen h1{
  margin:0 0 10px;
  font-size:clamp(48px,10vw,76px);
  line-height:.9;
}

.profile-photo-wrap{
  width:min(72vw,430px);
  max-width:430px;
  margin:18px auto 16px;
  flex:0 0 auto;
}

.profile-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  border-radius:50%;
}

.profile-side-action{
  top:50%;
  width:50px;
  height:50px;
  font-size:22px;
  z-index:3;
}

/* Keep the side controls inside the viewport instead of hanging off-page. */
.profile-side-action.left{
  left:8px;
}

.profile-side-action.right{
  right:8px;
}

.profile-name{
  margin:0 auto 18px;
  font-size:clamp(28px,6vw,46px);
  line-height:1;
  text-align:center;
  white-space:normal;
}

.profile-details{
  width:min(100%,520px);
  margin:0 auto 20px;
  gap:10px;
}

.profile-details div{
  font-size:clamp(22px,5vw,36px);
  justify-content:flex-start;
}

.profile-actions{
  margin:6px auto 18px;
  gap:clamp(34px,10vw,70px);
}

.profile-actions button span{
  font-size:38px;
}

.profile-actions button small{
  font-size:14px;
}

.profile-screen .round-next{
  margin-top:auto;
  margin-bottom:4px;
  width:64px;
  height:64px;
  font-size:34px;
}

/* ---------- Map correction ---------- */

.top-ui{
  left:18px;
  right:18px;
  top:max(16px,env(safe-area-inset-top));
}

.search-box{
  height:54px;
  font-size:clamp(21px,5vw,34px);
}

.filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  overflow:visible;
}

.filter{
  min-width:0;
  width:100%;
  padding:9px 8px;
  justify-content:center;
  text-align:center;
  font-size:clamp(12px,2.8vw,18px);
  overflow:hidden;
}

.map-stage{
  inset:0;
}

/* Reset pins to a portrait-map coordinate system. */
.map-pin{
  width:108px;
  height:148px;
}

.pin-head{
  left:10px;
  top:0;
  width:88px;
  height:88px;
}

.pin-tail{
  left:16px;
  top:52px;
  width:76px;
  height:96px;
  padding-top:44px;
}

.pin-more{
  width:38px;
  height:38px;
}

.pin-starbucks{
  left:14%;
  top:25%;
}

.pin-bonefish{
  left:34%;
  top:43%;
}

.pin-mcd{
  right:10%;
  top:66%;
}

.user-pin{
  left:12%;
  top:67%;
}

.merchant-tray{
  left:48%;
  top:45%;
  max-width:250px;
  transform:translateX(-10%);
}

.tray-action{
  min-width:52px;
  padding:2px 5px;
}

.tray-avatar,
.bill-icon,
.ride-icon{
  width:40px;
  height:40px;
}

.discover-slider{
  left:50%;
  bottom:max(108px,calc(env(safe-area-inset-bottom) + 92px));
  width:min(82%,420px);
  transform:translateX(-50%);
}

.status-copy{
  left:24px;
  right:24px;
  bottom:max(18px,env(safe-area-inset-bottom));
  font-size:clamp(38px,8vw,64px);
  white-space:normal;
}

/* ---------- Desktop keeps the centered portrait composition ---------- */

@media (min-width:721px){
  .pbl-app{
    width:720px;
    max-width:720px;
  }

  .profile-photo-wrap{
    width:420px;
  }

  .map-pin{
    width:108px;
    height:148px;
  }

  .merchant-tray{
    left:49%;
    top:45%;
  }
}

/* ---------- Mobile ---------- */

@media (max-width:520px){
  .profile-photo-wrap{
    width:min(76vw,360px);
  }

  .profile-side-action{
    width:44px;
    height:44px;
  }

  .profile-side-action.left{left:4px}
  .profile-side-action.right{right:4px}

  .map-pin{
    width:92px;
    height:126px;
  }

  .pin-head{
    left:8px;
    width:76px;
    height:76px;
  }

  .pin-tail{
    left:14px;
    top:44px;
    width:64px;
    height:82px;
    padding-top:37px;
  }

  .pin-more{
    width:34px;
    height:34px;
  }

  .merchant-tray{
    left:45%;
    top:45%;
    transform:scale(.88);
    transform-origin:left center;
  }

  .filters{
    gap:6px;
  }

  .filter{
    font-size:12px;
    padding:8px 5px;
  }

  .status-copy{
    font-size:clamp(32px,9vw,48px);
  }
}

/* ---------- Short viewport ---------- */

@media (max-height:760px){
  .profile-photo-wrap{
    width:min(48vh,340px);
  }

  .profile-name{
    font-size:28px;
    margin-bottom:12px;
  }

  .profile-details div{
    font-size:22px;
  }

  .profile-actions{
    margin-bottom:10px;
  }

  .profile-screen .round-next{
    width:56px;
    height:56px;
  }
}


/* v0.3.6 — signup spacing, profile crop, discoverable state */

#signupScreen .digit-display,
#verifyScreen .digit-display{
  margin-top:6px;
  margin-bottom:10px;
}

#signupScreen .onboarding-prompt,
#verifyScreen .onboarding-prompt{
  margin-bottom:10px;
}

#signupScreen .onboarding-note,
#verifyScreen .onboarding-note{
  margin-top:8px;
}

/* Keep the number/code visually close to the orange helper text. */
#signupScreen .digit-display{
  transform:translateY(6px);
}

#verifyScreen .digit-display{
  transform:translateY(6px);
}

/* Profile image crop correction */
.profile-photo{
  object-position:50% 29% !important;
  transform:scale(1.02);
}

.profile-photo-wrap{
  overflow:hidden;
  border-radius:50%;
}

/* Map discoverable control + greeting correction */
.discover-slider{
  bottom:118px !important;
  width:min(74%,390px);
  padding:7px 12px 7px 7px;
  z-index:50;
}

.discover-slider .slider-copy{
  font-size:clamp(12px,2.1vw,15px);
  line-height:1;
}

.status-copy{
  bottom:22px !important;
  line-height:.9;
  font-size:clamp(34px,7vw,58px);
}

.pbl-app:not(.leave-ready) .status-copy{
  white-space:nowrap;
}

@media (max-width:520px){
  .discover-slider{
    bottom:104px !important;
    width:min(82%,360px);
  }

  .status-copy{
    bottom:16px !important;
    font-size:clamp(30px,8.5vw,44px);
  }

  .pbl-app:not(.leave-ready) .status-copy{
    white-space:normal;
  }
}

@media (max-height:760px){
  #signupScreen .digit-display,
  #verifyScreen .digit-display{
    margin-bottom:6px;
  }

  #signupScreen .onboarding-note,
  #verifyScreen .onboarding-note{
    margin-top:4px;
  }

  .discover-slider{
    bottom:92px !important;
  }

  .status-copy{
    bottom:12px !important;
  }
}


/* v0.3.8 — footprints only on title pin; map pins restored pre-v0.3.7 */

/* Title/splash pin footsteps */
.splash-feet{
  position:absolute;
  left:31%;
  top:57%;
  width:42%;
  height:30%;
  transform:none;
  color:transparent;
  font-size:0;
  letter-spacing:0;
}

.footprint{
  position:absolute;
  width:34%;
  height:30%;
  transform:rotate(22deg);
}

.footprint .heel{
  position:absolute;
  left:18%;
  bottom:0;
  width:48%;
  height:68%;
  border-radius:48% 52% 45% 55%;
  background:#050607;
  transform:rotate(-8deg);
}

.footprint .toe{
  position:absolute;
  background:#050607;
  border-radius:50%;
}

.footprint .toe1{width:18%;height:26%;left:2%;top:8%}
.footprint .toe2{width:16%;height:23%;left:23%;top:0}
.footprint .toe3{width:14%;height:20%;left:43%;top:8%}

.footprint.fp1{left:0;top:0;transform:rotate(18deg)}
.footprint.fp2{right:2%;top:31%;transform:rotate(18deg) scaleX(-1)}
.footprint.fp3{left:12%;bottom:0;transform:rotate(18deg)}

/* Keep avatar alignment improvement without touching map-pin geometry. */
.user-pin .user-avatar img,
#profileTrayBtn .tray-avatar img{
  object-fit:cover !important;
  object-position:44% 40% !important;
  transform:scale(1.18);
  transform-origin:center center;
}

.profile-photo{
  object-fit:cover !important;
  object-position:44% 39% !important;
  transform:scale(1.08) !important;
  transform-origin:center center;
}