/* p5a - Set the price (round 6): a solid focus-stage pane; a 3D price rail on a perspective floor drawn on a canvas
   (camera, grid, chrome rail, pins, scan plane, shockwaves); the VALUATION plate, the pin labels and the blue OFFER pill
   with its lock brackets are DOM on top. Placed by p5a.js in a 640x470 (wide) or 358x520 (phone) design box. */
.p5as{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.p5as .st{position:absolute;left:0;top:0;transform-origin:0 0}
.p5as .st > *{position:absolute}
.p5as .lab{font-family:var(--tech);font-size:12px;letter-spacing:.2em;white-space:nowrap}
.p5as .glw{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.p5as .gl{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;transform:translateX(-140%) skewX(-14deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 50%,rgba(255,255,255,0))}
.p5as .num{--chrome-n:linear-gradient(180deg,#ffffff 0,#ffffff 55%,#dfe5ee 100%)}

/* the focus stage */
.p5as .fs.glass{padding:0;background:rgba(8,10,14,.88);border:1px solid rgba(47,107,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.p5as .eb{left:24px;top:22px;color:rgba(225,229,229,.78)}
.p5as .cv{left:0;top:0;display:block}

/* the valuation plate */
.p5as .vp{left:0;top:0;opacity:0;padding:12px 10px 12px;text-align:center;border-radius:3px;transform-origin:50% 100%;will-change:transform;
  background:rgba(8,10,14,.92);border:1px solid rgba(245,247,247,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 34px rgba(0,0,0,.6)}
.p5as .vp.on{border-color:rgba(245,247,247,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 22px rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.6)}
.p5as .vp .lab,.p5as .vp .num{display:block;position:relative}
.p5as .vp .lab{color:rgba(225,229,229,.82)}
.p5as .vp .num{margin-top:5px;font-size:32px;line-height:1.08}
.p5as .fl{position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.75) 0,rgba(214,228,255,.35) 45%,rgba(255,255,255,0) 80%)}

/* pin labels under the rail */
.p5as .tx{left:0;top:0;width:220px;text-align:center;white-space:nowrap;opacity:0;will-change:transform}
.p5as .tx .lab,.p5as .tx .num{display:block}
.p5as .tx .lab{color:rgba(225,229,229,.84);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.p5as .tx .num{margin-top:4px;font-size:28px;line-height:1.08}

/* the blue offer pill and its lock brackets */
.p5as .pl{left:0;top:0;opacity:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform-origin:50% 50%;
  will-change:transform;border-radius:38px 4px 4px 38px;background:linear-gradient(180deg,#4f84ff 0,#2F6BFF 55%,#2257d8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(90,140,255,.75),0 10px 34px rgba(47,107,255,.5);transition:box-shadow .5s}
.p5as .pl.lk{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(143,176,255,.95),0 0 34px rgba(47,107,255,.7),0 10px 34px rgba(47,107,255,.45)}
.p5as .pl .lab,.p5as .pl .num{position:relative}
.p5as .pl .lab{color:rgba(255,255,255,.88)}
.p5as .pl .num{font-size:34px;line-height:1.04;--chrome-n:linear-gradient(#fff,#fff)}
.p5as .bk{left:0;top:0;width:16px;height:16px;opacity:0;border:0 solid #cfe0ff;filter:drop-shadow(0 0 4px rgba(47,107,255,.9))}
.p5as .bk.b0{margin:0;border-width:2px 0 0 2px}
.p5as .bk.b1{margin:0 0 0 -16px;border-width:2px 2px 0 0}
.p5as .bk.b2{margin:-16px 0 0 0;border-width:0 0 2px 2px}
.p5as .bk.b3{margin:-16px 0 0 -16px;border-width:0 2px 2px 0}

/* phone: same story, sized for the 358-wide gap */
.p5as.ph .vp{padding:10px 8px}
.p5as.ph .vp .num{font-size:28px}
.p5as.ph .tx .num{font-size:25px}
.p5as.ph .pl{border-radius:32px 4px 4px 32px}
.p5as.ph .pl .num{font-size:28px}
.p5as.ph .lab{font-size:12px;letter-spacing:.16em}