/* The hero's stage: the customer page in a phone, and the desk card forming beside it.
   The phone's own look comes from vendor/survey.scoped.css (the real customer stylesheet, scoped to .pl-phone-screen). */
.pl-stage{--pl-phone-w:min(360px,92vw);--pl-radius:44px;--pl-bezel:10px;--pl-frame:#101418;--pl-frame-edge:#2a3137;
  --pl-shadow:0 30px 60px -20px rgba(16,20,24,.45),0 10px 20px -10px rgba(16,20,24,.25);
  --pl-ease:cubic-bezier(.2,.7,.2,1);--pl-fast:180ms;--pl-base:320ms;--pl-slow:520ms;
  display:grid;gap:28px;align-items:start;margin:20px 0;padding:24px 0;
  background:radial-gradient(ellipse at 28% 40%,rgba(223,242,236,.35),transparent 60%)}
@media(min-width:900px){.pl-stage{grid-template-columns:var(--pl-phone-w) 1fr;gap:40px}}
.pl-phone{margin:0 auto;width:var(--pl-phone-w);aspect-ratio:9/19.5;padding:var(--pl-bezel);border-radius:var(--pl-radius);
  background:linear-gradient(160deg,var(--pl-frame-edge),var(--pl-frame));box-shadow:var(--pl-shadow);position:relative;border:0;min-height:0}
.pl-phone::before{content:"";position:absolute;top:calc(var(--pl-bezel) + 8px);left:50%;width:92px;height:26px;transform:translateX(-50%);border-radius:14px;background:var(--pl-frame);z-index:2}
.pl-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--pl-radius) - var(--pl-bezel));background:var(--paper);
  padding:52px 16px 18px;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--ink);font-size:16px;line-height:1.4}
.pl-phone-screen .survey{padding:0}
.pl-phone-screen .survey .ask{font-size:20px;line-height:1.18}
.pl-phone-screen .survey .panel{padding:14px;gap:10px}
.pl-phone-screen .survey .map li{font-size:10.5px}
.pl-phone-screen .survey .safety{font-size:13px;padding:8px 10px}
.pl-phone-screen .survey .review{font-size:14px}
.pl-shot{margin:0;flex:none}
.pl-shot img{display:block;width:auto;max-width:100%;height:210px;margin:0 auto;object-fit:cover;object-position:center;border-radius:14px}
.pl-shot figcaption{font-size:11px;color:var(--muted);margin-top:4px}
.pl-phone-screen .primary{min-height:48px}
/* motion */
.pl-phone-screen .ask{animation:pl-rise var(--pl-base) var(--pl-ease)}
.pl-phone-screen .safety{animation:pl-in-left var(--pl-base) var(--pl-ease) 120ms both}
.pl-phone-screen .pl-shot{animation:pl-arrive var(--pl-slow) var(--pl-ease)}
.pl-phone-screen .review{transition:background var(--pl-base),color var(--pl-base)}
.pl-phone-screen .review.is-ok{background:var(--mint)}
.pl-phone-screen .review.is-retake{background:var(--amber-wash);color:var(--amber)}
.pl-phone-screen .pl-shot.is-dim img{filter:grayscale(1) opacity(.55);transform:translateX(-6px);transition:filter var(--pl-base),transform var(--pl-slow) var(--pl-ease)}
.pl-phone-screen .primary.is-tapped{animation:pl-tap calc(var(--pl-fast) * 2) var(--pl-ease)}
.pl-phone-screen .pl-shot{position:relative;overflow:hidden;border-radius:14px}
.pl-phone-screen .pl-shot.is-scanning::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--sea);opacity:.4;
  animation:pl-scan 900ms linear 2;box-shadow:0 0 12px 2px rgba(11,102,93,.35)}
.pl-phone-screen .pl-shot.is-scanning img{filter:brightness(1.06)}
.pl-lock{position:absolute;inset:0;background:rgba(16,20,24,.86);color:#fff;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center;font-size:16px;z-index:1;animation:pl-rise var(--pl-slow) var(--pl-ease)}
.pl-done{display:grid;gap:12px;animation:pl-rise var(--pl-slow) var(--pl-ease)}
.pl-done .done-list li{align-items:baseline}
@keyframes pl-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pl-in-left{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes pl-arrive{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pl-tap{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(11,102,93,.5)}40%{transform:scale(.96);box-shadow:0 0 0 2px rgba(11,102,93,.5)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(11,102,93,0)}}
@keyframes pl-scan{from{top:0}to{top:100%}}
/* the desk card */
.pl-lead{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;font-size:15px;box-shadow:0 10px 30px -18px rgba(16,20,24,.35)}
.pl-lead-k{margin:0 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pl-lead h3{margin:0 0 12px;font-size:19px}
.pl-lead-shots{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pl-lead-shots li{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr;gap:2px 12px;align-items:start;animation:pl-rise var(--pl-base) var(--pl-ease)}
.pl-lead-shots .pl-fig{grid-row:1/3;max-width:72px;margin:0}
.pl-lead-shots .pl-fig figcaption{display:none}
.pl-lead-shots .t{font-weight:600;font-size:14px}
.pl-lead-shots .l{font-size:14px}
.pl-lead-shots li.is-retake .l{color:#a85d00}
.pl-lead-shots li.is-retake .t::after{content:" \21bb";color:#a85d00}
.pl-lead-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 10px;font-size:14px}
.pl-lead-facts dt{color:var(--mute)}
.pl-lead-facts dd{margin:0;font-weight:600}
.pl-lead-verdict{margin:10px 0 0;font-weight:700;background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 1px no-repeat;display:inline-block;padding-bottom:2px;animation:pl-rise var(--pl-base) var(--pl-ease)}
.pl-caption{grid-column:1/-1;font-size:17px;max-width:60ch;margin:0;min-height:3.2em}
.pl-caption .pl-line{display:block}
/* reduced motion: the cues and reveals stay; every transition is 1 ms, the scan is a still tint, nothing slides */
.pl-reduced *,.pl-reduced *::before,.pl-reduced *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
.pl-reduced .pl-shot.is-scanning::after{animation:none;top:0;height:100%;opacity:.14}
.pl-reduced .primary.is-tapped{animation:none}
@media (prefers-reduced-motion:reduce){.pl-stage *,.pl-stage *::before,.pl-stage *::after{animation-duration:1ms !important;transition-duration:1ms !important}}
@media (max-width:899px){.pl-stage.is-desk .pl-phone{display:none}}

/* Desktop: the demo starts above the fold. A shorter phone, a tighter hero. */
@media(min-width:900px){.pl-stage{--pl-phone-w:300px;margin:6px 0;padding:10px 0}}