.pp-stage{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center}

/* desk: dark tabletop seen through the camera; the spread lies askew, then flattens when it is read */
.pp-desk{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:9% 9% 10%;perspective:1500px;
  background:
    radial-gradient(120% 90% at 30% 10%,rgba(255,236,210,.20),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .17 0 0 0 0 .11 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#6B4B35,#4A3324 55%,#36251A)}
.pp-desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.45))}
.pp-book{--paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .34 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
  position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;border-radius:12px;cursor:pointer;
  padding:7px;background:#5C1520 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='l'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23l)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.3),0 30px 40px -18px rgba(0,0,0,.65),0 60px 90px -40px rgba(0,0,0,.6);
  transform:rotateX(26deg) rotateZ(-7deg) translateY(-2%) scale(.94);transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.pp-desk.flat .pp-book{transform:none}
.pp-page{position:relative;aspect-ratio:1.42;padding:5.5% 7% 5%;color:#3A2A2E;overflow:hidden;
  background:var(--paper),linear-gradient(172deg,#F6E7E1 0%,#F1E1E6 45%,#E8E3EF 100%)}
.pp-upper{border-radius:6px 6px 0 0}
.pp-lower{border-radius:0 0 6px 6px;background:var(--paper),linear-gradient(188deg,#F1E4EB 0%,#EAE6F2 50%,#E5ECEF 100%);
  display:grid;grid-template-columns:27% 1fr;grid-template-rows:1fr auto;gap:0 6%}
/* stitched spine between the pages */
.pp-fold{position:absolute;left:7px;right:7px;top:50%;height:22px;transform:translateY(-50%);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(70,30,40,.16) 42%,rgba(40,15,20,.32) 50%,rgba(70,30,40,.12) 58%,transparent)}
.pp-fold::after{content:"";position:absolute;left:12%;right:12%;top:50%;border-top:1.5px dashed rgba(90,40,45,.45)}
.pp-guil{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='30' viewBox='0 0 90 30'%3E%3Cg fill='none' stroke-width='.45'%3E%3Cpath d='M0 15 Q11 1 22.5 15 T45 15 T67.5 15 T90 15' stroke='%23C996A6'/%3E%3Cpath d='M0 19 Q11 5 22.5 19 T45 19 T67.5 19 T90 19' stroke='%23A9A8D3'/%3E%3Cpath d='M0 11 Q11 25 22.5 11 T45 11 T67.5 11 T90 11' stroke='%23D9B0BB'/%3E%3Cpath d='M0 23 Q11 9 22.5 23 T45 23 T67.5 23 T90 23' stroke='%23B9C9D6'/%3E%3C/g%3E%3C/svg%3E");background-size:90px 30px}
.pp-guil::after{content:"";position:absolute;right:10%;top:14%;width:40%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(170,110,130,.16) 0 2deg,transparent 2deg 6deg),repeating-radial-gradient(circle,rgba(160,120,170,.16) 0 1px,transparent 1px 5px);
  -webkit-mask:radial-gradient(circle,#000 0 66%,transparent 70%);mask:radial-gradient(circle,#000 0 66%,transparent 70%)}
.pp-head{position:relative;text-align:center;font-weight:600;font-size:clamp(9px,1.2vw,12.5px);letter-spacing:.2em;color:#7A2A3A;margin-bottom:6%}
.pp-row{position:relative;margin-bottom:4%}
.pp-split{display:flex;gap:10%}
.pp-signrow{display:flex;justify-content:space-between;align-items:flex-end}
.pp-lbl{display:block;font-size:clamp(6.5px,.75vw,8.5px);color:#8A5A66;margin-bottom:1px}
.pp-val{display:inline-block;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;font-size:clamp(9px,1.2vw,13.5px);letter-spacing:.03em;color:#1E1E26;
  padding:1px 3px;margin-left:-3px;border-radius:4px;transition:background .3s,box-shadow .3s;text-shadow:0 0 .4px rgba(0,0,0,.4)}
.pp-val.hit{background:rgba(0,87,255,.16);box-shadow:0 0 0 1.5px var(--blue)}
.pp-val.read{background:rgba(22,163,74,.12)}
.pp-sig{font-family:"Caveat",cursive;font-size:clamp(16px,2.1vw,24px);color:var(--sigink);display:block;line-height:1;transform:rotate(-4deg)}
.pp-stamp{width:23%;color:rgba(86,62,170,.62);transform:rotate(-14deg);margin:-6% 12% -8% 0;mix-blend-mode:multiply}
.pp-serial{position:absolute;right:2.4%;top:50%;transform:translateY(-50%) rotate(90deg);font-family:"Courier New",monospace;font-weight:700;font-size:clamp(8px,1.15vw,13px);letter-spacing:.14em;color:#B4232F;white-space:nowrap;width:0;display:flex;justify-content:center}
.pp-photo{position:relative;grid-row:1;align-self:start;margin-top:3%;border-radius:2px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.pp-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.88) brightness(1.06) sepia(.12);mix-blend-mode:multiply}
/* the laminate hologram crossing the photo */
.pp-holo{position:absolute;inset:0;background:repeating-radial-gradient(circle at 110% 120%,rgba(120,200,255,.0) 0 7px,rgba(190,140,255,.22) 8px,rgba(120,230,200,.0) 10px 15px);mix-blend-mode:screen;opacity:.8}
.pp-fields{position:relative;padding-top:1%}
.pp-mrz{position:relative;grid-column:1/-1;font-family:"OCR B","Courier New",monospace;font-size:clamp(6px,.98vw,11px);letter-spacing:.05em;line-height:1.5;color:#2A2A33;white-space:nowrap;overflow:hidden;margin-right:4%}
.pp-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.38) 42%,rgba(255,255,255,.05) 52%,transparent 60%);mix-blend-mode:soft-light;transition:transform 1.2s cubic-bezier(.3,.7,.2,1)}
.pp-desk.flat .pp-glare{transform:translateX(30%)}
.pp-sample{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-24deg);font-weight:700;font-size:clamp(40px,7vw,84px);letter-spacing:.1em;color:rgba(180,35,47,.13);pointer-events:none;white-space:nowrap}
.pp-beam{position:absolute;left:7px;right:7px;top:0;height:3px;background:var(--blue);box-shadow:0 0 22px 6px rgba(0,87,255,.45);opacity:0;pointer-events:none}
.pp-book.scanning .pp-beam{animation:ppBeam 1.6s cubic-bezier(.45,0,.55,1) forwards}
@keyframes ppBeam{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* camera viewfinder over the desk */
.pp-finder{position:absolute;inset:5%;z-index:2;pointer-events:none}
.pp-finder i{position:absolute;width:34px;height:34px;border:3px solid #fff;opacity:.9;transition:inset .8s cubic-bezier(.3,.7,.2,1)}
.pp-finder i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.pp-finder i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.pp-finder i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 12px}
.pp-finder i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 12px 0}
.pp-chip{position:absolute;z-index:3;left:50%;bottom:3.5%;transform:translateX(-50%);background:rgba(10,15,28,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:14px;padding:7px 14px;border-radius:999px;white-space:nowrap;transition:background .3s}
.pp-chip.ok{background:rgba(22,163,74,.9)}

/* result card, like the app's card */
.pp-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line);padding:18px;max-width:380px;width:100%;justify-self:center}
.pp-card-head{display:flex;gap:12px;align-items:center;padding:4px 4px 14px}
.pp-ico{width:44px;height:44px;border-radius:11px;background:linear-gradient(160deg,#3D7BFF,#0057FF);color:#fff;display:grid;place-items:center;flex:none}
.pp-ico svg{width:26px;height:26px}
.pp-card-head b{display:block;font-weight:600;font-size:17px}
.pp-card-head small{font-size:13px;color:var(--mute)}
.pp-card dl{display:flex;flex-direction:column;gap:2px;min-height:296px}
.pp-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--soft2);animation:ppIn .35s cubic-bezier(.3,1.3,.5,1)}
@keyframes ppIn{from{opacity:0;transform:translateY(-6px)}}
.pp-item div{flex:1;min-width:0}
.pp-item dt{font-size:12px;color:var(--mute)}
.pp-item dd{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-copy{flex:none;height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--blue);font-weight:500;transition:background .15s}
.pp-copy:hover{background:var(--blue-t)}
.pp-copy.ok{color:var(--ok);border-color:transparent;background:var(--ok-t)}
.pp-foot{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);padding:12px 4px 2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.fine{font-size:14px;color:var(--mute);margin-top:36px;max-width:70ch}

@media (max-width:900px){
  .pp-stage{grid-template-columns:1fr;gap:28px}
  .pp-desk{margin:0 -16px;border-radius:0;padding:12% 6% 14%}
  .pp-chip{font-size:12px}
  .pp-card dl{min-height:0}
}

/* the other documents DocSave reads into cards */
.docs-more{margin-top:28px;background:var(--soft2);border-radius:var(--r-lg);padding:22px 24px}
.docs-more>b{display:block;font-weight:600;font-size:17px;margin-bottom:12px}
.docs-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.docs-chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:15px}
.docs-more p{margin-top:14px;color:var(--ink2);font-size:15.5px;line-height:1.55}
@media (max-width:900px){ .docs-more{padding:18px} .docs-chips li{font-size:14px;padding:6px 12px} }

/* ID card (TD1, 85.6 × 54 mm) for countries whose everyday document is a card, not a passport booklet.
   Colours per country: --id-a/--id-b paper gradient, --id-ink headings, --id-band header band. */
.pp-book.pp-id{max-width:500px;padding:0;background:none;border-radius:16px}
.pp-id .pp-face{--id-a:#E9EEF3;--id-b:#F3EEE6;--id-ink:#22405F;--id-band:rgba(34,64,95,.08);
  position:relative;aspect-ratio:1.586;border-radius:16px;overflow:hidden;color:var(--id-ink);
  padding:4.6% 5.2% 4.4%;display:grid;grid-template-columns:29% 1fr;grid-template-rows:auto 1fr auto;gap:5% 5%;
  background:var(--paper),linear-gradient(160deg,var(--id-a),var(--id-b));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pp-id .pp-guil{opacity:.45}
.id-top{position:relative;grid-column:1/-1;display:flex;align-items:center;gap:3%;margin:-4.6% -5.2% 0;padding:2.6% 5.2%;background:var(--id-band)}
.id-flag{flex:none;width:9%;aspect-ratio:3/2;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.25)}
.id-top b{display:block;font-size:clamp(8px,1.15vw,12.5px);letter-spacing:.14em;font-weight:700;line-height:1.2}
.id-top small{display:block;font-size:clamp(6px,.78vw,8.5px);letter-spacing:.1em;opacity:.8;margin-top:1px}
.pp-id .pp-photo{grid-row:2/4;margin-top:0;align-self:start;border-radius:3px}
.pp-id .pp-photo img{filter:grayscale(.9) contrast(.9) brightness(1.04);mix-blend-mode:multiply}
.id-fields{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 6%;align-content:start}
.id-fields .pp-row{margin-bottom:3.5%}
.id-fields .wide{grid-column:1/-1}
.pp-id .pp-lbl{color:var(--id-ink);opacity:.72}
.id-bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:6%}
.pp-id .pp-serial{position:relative;right:auto;top:auto;transform:none;width:auto;display:inline-block;color:#B4232F;font-size:clamp(9px,1.2vw,13.5px)}
.pp-id .pp-sig{font-size:clamp(14px,1.9vw,22px)}
.pp-id .pp-sample{font-size:clamp(34px,6vw,70px)}
.pp-id .pp-beam{left:0;right:0}
/* right-to-left pages keep the card the way it is printed */
[dir="rtl"] .pp-desk{direction:ltr}