/* /demo page: dark split hero with a phone that runs the guest face-scan demo. Prefix dm-. */
.dm{background:radial-gradient(circle at 80% 10%,rgba(255,90,31,.22),transparent 45%),#0b0b0f;color:#f4f1ec;padding:56px 0 80px;overflow:hidden}
.dm-g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.dm-copy h1{font-size:clamp(42px,5.6vw,72px);line-height:1.02;letter-spacing:-.015em;margin:16px 0 0;color:#fff}
.dm-copy h1 em{color:#ff9a52}
.dm-lead{color:#c3c1cc;font-size:18px;max-width:540px;margin-top:18px}
.dm-steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;max-width:520px}
.dm-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.dm-steps span{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ff5a1f;color:#fff;font-weight:700;font-size:14px}
.dm-steps b{display:block;color:#fff}
.dm-steps div{font-size:14px;color:#c3c1cc}
.dm-safe{display:flex;gap:10px;align-items:center;margin-top:22px;font-size:14px;color:#a7f3c0}
.dm-safe svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dm-ctas{display:flex;gap:18px;align-items:center;margin-top:28px;flex-wrap:wrap}
.dm-link{color:#f4f1ec!important;text-decoration:underline!important;text-underline-offset:4px}

/* phone */
.dm-phone-wrap{position:relative;display:grid;place-items:center}
.dm-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.45),transparent 65%);filter:blur(30px);z-index:0}
.dm-phone{position:relative;z-index:1;width:340px;max-width:100%;aspect-ratio:9/18.5;border-radius:46px;padding:12px;background:#1a1a22;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 100px rgba(0,0,0,.55),inset 0 0 0 2px #26262f}
.dm-notch{position:absolute;top:20px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:20px;background:#000;z-index:3}
.dm-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#14141b,#0b0b0f);display:flex;flex-direction:column;padding:56px 18px 18px}
.dm-bar{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff}
.dm-bar i{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:rgba(255,90,31,.2);color:#ff9a52}
.dm-step{flex:1;display:flex;flex-direction:column;min-height:0;animation:dmIn .4s ease}
.dm-step[hidden]{display:none}
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dm-event{margin:auto 0 18px;padding:22px 18px;border-radius:22px;background:radial-gradient(circle at 80% 0%,rgba(255,90,31,.35),transparent 60%),rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.dm-event small{color:#c3c1cc;font-size:12px}
.dm-event h2{font-size:34px;line-height:1.05;margin:6px 0 12px;color:#fff}
.dm-pills{display:flex;flex-wrap:wrap;gap:6px}
.dm-pills span{font-size:11px;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.08);color:#e7e5ee}
.dm-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;border-radius:99px;background:#ff5a1f;color:#fff!important;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none!important;margin-top:10px;transition:transform .2s,background .2s}
.dm-btn:hover{transform:translateY(-1px)}
.dm-soft{background:rgba(255,255,255,.08);font-weight:600;font-size:13px}
.dm-err{color:#fca5a5;font-size:12px;text-align:center;margin:10px 0 0;min-height:1em}

/* camera */
.dm-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 10px}
.dm-dots i{width:26px;height:4px;border-radius:4px;background:rgba(255,255,255,.15)}
.dm-dots i.on{background:#22c55e}.dm-dots i.cur{background:#ff9a52}
.dm-scan{position:relative;width:236px;height:236px;margin:0 auto}
.dm-scan video{position:absolute;inset:14px;width:208px;height:208px;border-radius:50%;object-fit:cover;transform:scaleX(-1);background:#000}
.dm-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.dm-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:6}
.dm-prog{fill:none;stroke:#22c55e;stroke-width:6;stroke-linecap:round;stroke-dasharray:0 700;transition:stroke-dasharray .25s}
.dm-arrow{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:30px;line-height:1;animation:dmNudge 1s ease-in-out infinite}
.dm-arrow[hidden],.dm-tick[hidden]{display:none}
.dm-arrow.l{left:-10px}.dm-arrow.r{right:-10px}
@keyframes dmNudge{50%{transform:translateX(-4px)}}
.dm-arrow.r{animation-name:dmNudgeR}@keyframes dmNudgeR{50%{transform:translateX(4px)}}
.dm-tick{position:absolute;inset:14px;border-radius:50%;background:rgba(34,197,94,.75);display:grid;place-items:center;font-size:56px;color:#fff}
.dm-msg{text-align:center;font-weight:700;color:#fff;margin:18px 0 4px}
.dm-sub{text-align:center;font-size:12px;color:#c3c1cc;margin:0}
.dm-cam .dm-cancel{margin-top:auto}

/* busy */
.dm-busy{align-items:center;justify-content:center;text-align:center}
.dm-busy h2{font-size:30px;margin:22px 0 6px;color:#fff}
.dm-busy p{color:#c3c1cc;font-size:13px}
.dm-finding{position:relative;width:110px;height:110px}
.dm-finding span{position:absolute;inset:0;border-radius:50%;border:2px solid #ff5a1f;animation:dmPulse 1.6s ease-out infinite}
.dm-finding span+span{animation-delay:.8s}
@keyframes dmPulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.2);opacity:0}}

/* results */
.dm-res-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 12px}
.dm-res-head b{display:block;font-size:26px;font-weight:400;color:#fff;line-height:1.1}
.dm-res-head small{font-size:11px;color:#c3c1cc}
.dm-again{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dm-cell{position:relative;aspect-ratio:4/5;border:0;padding:0;border-radius:14px;overflow:hidden;background:#222;cursor:pointer;animation:dmPop .45s both cubic-bezier(.2,.9,.25,1)}
.dm-cell:first-child{grid-column:1/-1;aspect-ratio:4/3}
.dm-cell:first-child img{object-position:50% 35%}
.dm-cell img{width:100%;height:100%;object-fit:cover;display:block}
.dm-ph{background:radial-gradient(circle at 30% 30%,#ff9a52,#ff5a1f 50%,#b3260f);color:#fff;font-family:"Instrument Serif",Georgia,serif;font-size:20px;display:flex;align-items:flex-end;padding:10px}
@keyframes dmPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.dm-locked{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.15);font-size:11px;color:#c3c1cc}
.dm-locked b{display:block;color:#fff;font-size:12px}
.dm-res .dm-btn{margin-top:auto}

/* viewer */
.dm-view{border:0;padding:0;background:transparent;max-width:min(92vw,520px)}
.dm-view::backdrop{background:rgba(0,0,0,.8)}
.dm-view img{display:block;width:100%;border-radius:18px}
.dm-view button{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:24px;cursor:pointer}

@media (max-width:900px){
  .dm{padding:32px 0 56px}
  .dm-g{grid-template-columns:1fr;gap:36px}
  .dm-phone-wrap{order:-1}
  .dm-copy{text-align:left}
}
@media (max-width:420px){.dm-phone{width:100%;border-radius:40px}.dm-screen{border-radius:30px}}
@media (prefers-reduced-motion:reduce){.dm-step,.dm-cell,.dm-arrow,.dm-finding span{animation:none}}

/* section 2: timeline (cream) */
.dm2{background:#f6f1ea;color:#1d1a17;padding:96px 0}
.dm2-head{max-width:640px;margin:0 auto 56px;text-align:center}
.dm2-head h2{font-size:clamp(36px,4.6vw,58px);line-height:1.04;margin:14px 0 0}
.dm2-head h2 em{color:#ff5a1f}
.dm2-head p{color:#6b6055;font-size:17px;margin-top:14px}
.dm2-line{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.dm2-line::before{content:"";position:absolute;left:12%;right:12%;top:62px;height:2px;background:repeating-linear-gradient(90deg,#ffb18f 0 10px,transparent 10px 18px)}
.dm2-line li{position:relative;background:#fff;border-radius:22px;padding:24px 22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px rgba(60,40,20,.07);text-align:center}
.dm2-t{display:inline-block;font-size:12px;font-weight:700;color:#b93a0a;background:#ffe7da;border-radius:99px;padding:3px 10px}
.dm2-ic{display:grid;place-items:center;width:58px;height:58px;margin:12px auto 14px;border-radius:18px;background:linear-gradient(160deg,#ffa25e,#ff5a1f);box-shadow:0 10px 24px rgba(255,90,31,.3);position:relative}
.dm2-ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm2-line b{display:block;font-size:17px}
.dm2-line p{font-size:14px;color:#6b6055;margin:6px 0 0;line-height:1.55}

/* section 3: photographers (dark) */
.dm3{background:radial-gradient(circle at 15% 80%,rgba(255,90,31,.18),transparent 45%),#0b0b0f;color:#f4f1ec;padding:96px 0;overflow:hidden}
.dm3-g{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.dm3-copy h2{font-size:clamp(36px,4.6vw,58px);line-height:1.04;margin:14px 0 0;color:#fff}
.dm3-copy h2 em{color:#ff9a52}
.dm3-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
.dm3-list li{position:relative;padding-left:34px;color:#c3c1cc;font-size:15px}
.dm3-list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:#ff5a1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.dm3-list b{display:block;color:#fff;font-size:16px}
.dm3-vis{position:relative;padding:30px 10px}
.dm3-board{background:#f5f7fb;border-radius:24px;padding:18px;box-shadow:0 40px 80px rgba(0,0,0,.5);transform:rotate(-1.5deg)}
.dm3-top{display:flex;justify-content:space-between;align-items:center;color:#0f172a;margin-bottom:14px}
.dm3-top b{font-size:16px}
.dm3-top span{font-size:11px;font-weight:700;color:#16a34a;background:#e8f7ee;padding:4px 10px;border-radius:99px}
.dm3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm3-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;color:#0f172a}
.dm3-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.dm3-card b{display:block;font-size:13px;padding:8px 10px 0}
.dm3-card small{display:block;font-size:11px;color:#64748b;padding:0 10px 9px}
.dm3-chip{position:absolute;padding:12px 16px;border-radius:16px;font-size:13px;color:#e7e5ee;background:rgba(24,24,31,.85);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.dm3-chip b{color:#fff;font-size:18px;margin-right:4px}
.dm3-chip-1{left:-10px;bottom:-4px}
.dm3-chip-2{right:-6px;top:-22px}
@media (max-width:900px){
  .dm2,.dm3{padding:64px 0}
  .dm2-line{grid-template-columns:1fr 1fr}
  .dm2-line::before{display:none}
  .dm3-g{grid-template-columns:1fr;gap:40px}
}
@media (max-width:520px){
  .dm2-line{grid-template-columns:1fr}
  .dm3-cards{grid-template-columns:1fr 1fr}
  .dm3-chip-2{right:0;top:-8px}
}