/* ============================================================
   CrowdTagg DROP PAGES — shareable /e/:slug audience surface
   Laylo-inspired: dark, photo-first, huge type, stacked CTAs.
   Scoped to body.drop so the organizer dashboard is untouched.
   No remote fonts — CSP blocks Google Fonts on this app.
   ============================================================ */

body.drop{
  --drop-bg:#05060a;
  --drop-sheet:rgba(10,12,18,.72);
  --drop-line:rgba(255,255,255,.12);
  --drop-txt:#f4f6fb;
  --drop-mut:rgba(244,246,251,.62);
  --drop-faint:rgba(244,246,251,.38);
  background:var(--drop-bg);
  color:var(--drop-txt);
  font-family:-apple-system,'SF Pro Display',Inter,system-ui,sans-serif;
  min-height:100vh;
  min-height:100dvh;
}
body.drop .glowbg{display:none}

.drop-wash{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -10%, color-mix(in srgb,var(--acc) 28%, transparent), transparent 60%),
    radial-gradient(700px 480px at 110% 110%, color-mix(in srgb,var(--acc-2) 22%, transparent), transparent 55%),
    linear-gradient(180deg,#071018 0%, #05060a 40%, #05060a 100%);
}
.drop-cover{
  position:fixed;inset:0 auto auto 0;width:100%;height:58vh;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 30%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  opacity:.55;filter:saturate(1.05) contrast(1.05);
}
.drop-stage{
  position:relative;z-index:1;min-height:100vh;min-height:100dvh;
  display:flex;justify-content:center;align-items:flex-start;
  padding:28px 16px 40px;
}
.drop-sheet{
  width:440px;max-width:100%;
  background:var(--drop-sheet);
  border:1px solid var(--drop-line);
  border-radius:28px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  padding:22px 20px 20px;
  text-align:center;
  min-width:0;
}
.drop-sheet.wide{width:520px}

body.drop .steps{gap:8px;margin:0 0 18px}
body.drop .steps i{width:36px;height:3px;border-radius:99px;background:rgba(255,255,255,.12)}
body.drop .steps i.on{background:var(--acc);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 55%, transparent)}

/* Static row that FITS. No marquee, no sheared circles. */
.drop-faces{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin:0 0 18px;overflow:visible;
}
.drop-faces i{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:#111 center/cover no-repeat;
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 8px 18px -10px #000;
}

.drop-ident{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;min-width:0}
.drop-mark{
  width:44px;height:44px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));
  box-shadow:0 10px 24px -10px var(--acc);
  overflow:hidden;
}
.drop-brand{font-weight:750;font-size:15px;letter-spacing:-.2px;text-align:left;min-width:0}
.drop-vert{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--drop-mut);text-align:left;margin-top:2px}

.drop-h1,.drop-sheet h1{
  font-size:clamp(26px,6.4vw,34px);font-weight:850;letter-spacing:-1.1px;line-height:1.08;
  margin:0 0 8px;color:#fff;text-wrap:balance;
}
.drop-meta{font-size:13.5px;font-weight:600;color:var(--drop-mut);margin:0 0 12px}
.drop-lead,.drop-sheet > p{
  font-size:15px;line-height:1.5;color:var(--drop-mut);margin:0 0 16px;
}
.drop-lead b,.drop-sheet > p b{color:#fff;font-weight:700}

body.drop .cta, .drop-cta{
  display:block;width:100%;padding:16px 18px;border:0;border-radius:999px;
  background:#fff;color:#0a0a0a;font-weight:800;font-size:15.5px;letter-spacing:-.2px;
  box-shadow:0 12px 28px -14px #000;
  margin:0 0 10px;
}
body.drop .cta:hover, .drop-cta:hover{filter:brightness(1.04);transform:translateY(-1px)}
body.drop .ghost{
  display:block;width:100%;padding:13px 16px;border-radius:999px;margin:0 0 8px;
  border:1px solid var(--drop-line);color:#fff;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.04);
}
body.drop .kicker{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  font-weight:750;margin-bottom:12px;
}

.drop-links{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px;text-align:left}
.drop-link{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:16px;border:1px solid var(--drop-line);
  background:rgba(255,255,255,.04);min-width:0;
}
.drop-link:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.drop-link.featured{background:color-mix(in srgb,var(--acc) 18%, transparent);border-color:color-mix(in srgb,var(--acc) 40%, transparent)}
.dl-ico{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:rgba(255,255,255,.08);
}
.dl-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.dl-txt b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-txt small{font-size:12px;color:var(--drop-mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-fine{font-size:12px;color:var(--drop-faint);margin:14px 0 0}
.drop-foot{font-size:11.5px;color:var(--drop-faint);margin-top:16px}

/* selfie / camera */
body.drop .selfie-drop{
  display:block;border:1.5px dashed rgba(255,255,255,.2);border-radius:22px;
  padding:18px 14px;margin:0 0 14px;background:rgba(255,255,255,.03);cursor:pointer;
}
body.drop .selfie-ring{
  width:120px;height:120px;border-radius:50%;margin:4px auto 10px;
  border:3px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:0 16px 40px -20px #000;
  font-size:0;
  position:relative;
}
body.drop .selfie-ring:not([style*="background-image"]):before{
  content:"";position:absolute;inset:28%;
  border-radius:50%;border:2px solid rgba(255,255,255,.55);
}
body.drop .selfie-ring:not([style*="background-image"]):after{
  content:"";position:absolute;left:50%;bottom:22%;width:36%;height:28%;
  border:2px solid rgba(255,255,255,.55);border-bottom:0;border-radius:40px 40px 0 0;
  transform:translateX(-50%);
}
body.drop #camVideo{border-radius:22px;border:1px solid var(--drop-line)}
body.drop .btn{
  background:rgba(255,255,255,.06);border:1px solid var(--drop-line);color:#fff;border-radius:999px;
}
body.drop .btn.pri{background:#fff;color:#0a0a0a;border:0}

body.drop .field{
  background:rgba(255,255,255,.05);border:1px solid var(--drop-line);color:#fff;
  border-radius:14px;
}
body.drop .field::placeholder{color:rgba(255,255,255,.38)}
body.drop .field.needs{
  border-color:#ff7b7b;
  box-shadow:0 0 0 3px rgba(255,80,80,.22);
  background:rgba(255,60,60,.12);
}
body.drop .unlock-hint{
  color:#ffe1e1;
  background:rgba(255,60,60,.16);
  border:1px solid rgba(255,110,110,.4);
  border-radius:12px;
  padding:10px 12px;
  margin:0 0 12px;
  font-size:13px;
  font-weight:650;
  line-height:1.4;
}
body.drop .consent label, body.drop .consent-hyb label, body.drop .gate-row{
  background:rgba(255,255,255,.04);border-color:var(--drop-line);color:var(--drop-mut);
}
body.drop .consent-hyb a, body.drop .gate-row a, body.drop .gate-fine a{color:#fff}
body.drop .gate-fine{color:var(--drop-faint)}
body.drop .privacy{color:var(--drop-faint)}
body.drop .badge-secure{
  background:rgba(255,255,255,.06);color:var(--drop-mut);border:1px solid var(--drop-line);
}

body.drop .gallery-grid, body.drop .photo-grid{gap:10px}
body.drop .gphoto{border-radius:14px;background:rgba(255,255,255,.06)}
body.drop .gphoto:after{display:none}
body.drop .links-hub{border-top-color:var(--drop-line)}
body.drop .lh-title{color:var(--drop-faint)}
body.drop .link-row{background:rgba(255,255,255,.04);border-color:var(--drop-line)}
body.drop .prod-card, body.drop .wm-opt{
  background:rgba(255,255,255,.05);border-color:var(--drop-line);color:#fff;
}
body.drop .prod-card:has(input:checked), body.drop .wm-opt:has(input:checked){
  border-color:var(--acc);
  background:color-mix(in srgb,var(--acc) 20%, rgba(8,10,16,.72));
  box-shadow:0 0 0 1px var(--acc);
}
body.drop .prod-sel{color:#04110f}
body.drop .prod-radio{border-color:rgba(255,255,255,.28)}
body.drop .prod-card:has(input:checked) .prod-radio{
  border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 4px #0b0d12;
}
body.drop .prod-lab, body.drop .crop-lab, body.drop .shop-pick-k{color:var(--drop-faint)}
body.drop .shop-pick{
  background:rgba(255,255,255,.06);border-color:var(--drop-line);color:#fff;
}
body.drop .cart-card{
  background:rgba(255,255,255,.05);border-color:var(--drop-line);color:#fff;
  box-shadow:none;
}
body.drop .cart-sub, body.drop .cart-kicker{color:var(--drop-mut)}
body.drop .cart-line{border-bottom-color:var(--drop-line)}
body.drop .prod-preview .pl{
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}
body.drop .pending-orb{border-color:color-mix(in srgb,var(--acc) 50%, transparent)}
body.drop .pending-face{font-size:0}
body.drop .pending-face:before{
  content:"";display:block;width:42px;height:42px;margin:auto;
  border-radius:50%;border:2px solid #fff;
}

@media (max-width:540px){
  .drop-stage{padding:0}
  .drop-sheet{
    width:100%;max-width:none;
    border:0;border-radius:0;background:transparent;
    backdrop-filter:none;box-shadow:none;padding:18px 18px 28px;
  }
  .drop-cover{height:42vh;opacity:.58}
  .drop-faces i{width:52px;height:52px}
}
@media (max-width:380px){
  .drop-faces{gap:6px}
  .drop-faces i{width:46px;height:46px}
  body.drop .cta, .drop-cta{font-size:15px;padding:15px}
}
/* Tight phone-preview iframe (organizer builder is ~320x620) */
@media (max-height:700px){
  .drop-faces{margin-bottom:12px}
  .drop-faces i{width:44px;height:44px}
  .drop-ident{margin-bottom:12px}
  .drop-h1,.drop-sheet h1{font-size:26px}
  .drop-lead,.drop-sheet > p{margin-bottom:12px}
  .drop-links{margin-top:12px}
}