/* PDF Search — home page. "Graphite & ember": dark cinematic scenes (the index, AI, conversion, privacy)
   alternate with warm paper scenes (ranking, OCR, tools, editions). Every animation is code, every
   screenshot is the real app. Class prefix: pz-  (site.css owns .phone/.mac/.card/.hero). */

:root {
  --pz-night: #0b0c10; --pz-night-2: #111218; --pz-carbon: #1b1c23; --pz-steel: #2a2b33;
  --pz-red: #e8432f; --pz-coral: #ff7a59; --pz-ember: #a3200f; --pz-marker: #ffd640;
  --pz-ai1: #6e5bff; --pz-ai2: #d65bff; --pz-ai3: #ff6a8a;
  --pz-ease: cubic-bezier(.2,.75,.2,1);
  --pz-spring: cubic-bezier(.34,1.45,.5,1);
}

/* ---------- section palettes ---------- */
.pz-dark { background: var(--pz-night); color: #f5f3ef;
  --text: #f6f4f1; --text-2: #bdbbc4; --text-3: #85848e; --line: rgba(255,255,255,.1); --bg-card: #15161c; }
.pz-light { background: var(--ps-paper); }
.pz-dark .eyebrow { color: var(--pz-coral); }
section.pz-dark, section.pz-light { position: relative; }
body { background: var(--pz-night); }

/* nav + footer join the dark home page */
.nav { background: rgba(11,12,16,.86); border-bottom-color: rgba(255,255,255,.07);
  --text: #f6f4f1; --text-2: #c4c2ca; --text-3: #8a8992; --line: rgba(255,255,255,.1); --bg: #0f1015; }
.nav .brand span { color: #fff; }
.footer { background: #08090c; color: #85848e; --text: #f6f4f1; --text-2: #b4b2bb; --text-3: #85848e; --line: rgba(255,255,255,.08); }

.pz-grad { background: linear-gradient(100deg, #ffb199 0%, var(--pz-coral) 30%, var(--pz-red) 65%, #ff9a6b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-mark { font-style: normal; color: #17181c; padding: 0 .14em; margin: 0 -.04em; border-radius: .14em;
  background: linear-gradient(104deg, transparent 0 1%, var(--pz-marker) 2% 97%, transparent 98%) no-repeat 0 60% / 0% 88%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s var(--pz-ease) .9s, color .4s .9s; }
.pz-dark .pz-mark { color: #fff; }
.pz-mark.on, .no-js .pz-mark { background-size: 100% 88%; color: #17181c; }
.pz-ul { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pz-marker) 85%, transparent) 62% 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pz-new { display: inline-block; padding: 3px 9px; margin-right: 8px; border-radius: 999px; font-size: 11px; letter-spacing: .08em;
  background: linear-gradient(100deg, var(--pz-red), var(--pz-coral)); color: #fff; vertical-align: 1px; }
.pz-fine { text-align: center; color: var(--text-3); font-size: 13.5px; max-width: 760px; margin: 28px auto 0; }
.pz-link { font-weight: 700; color: var(--pz-coral); }
.pz-q-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--pz-red); margin-left: 2px; vertical-align: -3px;
  animation: pz-blink 1s steps(1) infinite; }
@keyframes pz-blink { 50% { opacity: 0; } }

/* file-type colours, shared by tags everywhere */
.t-pdf { --c: #e8432f; } .t-doc { --c: #2f6fe4; } .t-ppt { --c: #e26a2c; } .t-pages { --c: #f29b1d; } .t-key { --c: #2a8cf0; }
.t-odt { --c: #1f9d74; } .t-ocr { --c: #c04ddb; } .t-txt { --c: #8a8c98; } .t-code { --c: #f05138; }
.pz-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 800 11px/1.2 var(--font); letter-spacing: .06em; color: #fff; background: var(--c, #555); }

/* ============================== HERO ============================== */
.pz-hero { padding: 92px 0 0; overflow: hidden; text-align: center; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, #1a1316 0%, var(--pz-night) 60%); }
.pz-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.pz-hero-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: 1300px; height: 900px; transform: translate(-50%, -10%);
  background: radial-gradient(closest-side, rgba(232,67,47,.42), rgba(232,67,47,.12) 45%, transparent 72%); filter: blur(10px);
  animation: pz-breathe 9s ease-in-out infinite; pointer-events: none; }
@keyframes pz-breathe { 50% { opacity: .65; transform: translate(-50%, -6%) scale(1.05); } }
.pz-hero-copy { position: relative; }
.pz-pill-new { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14px; color: #e7e5ea;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(10px); animation: pz-up .8s var(--pz-ease) .1s forwards; }
.pz-pill-new b { padding: 3px 10px; border-radius: 999px; background: linear-gradient(100deg, var(--pz-red), var(--pz-coral)); color: #fff; font-size: 12px; letter-spacing: .04em; }
.pz-pill-new:hover { text-decoration: none; border-color: rgba(255,255,255,.3); color: #fff; }
.pz-pill-new span { color: var(--pz-coral); transition: transform .2s; }
.pz-pill-new:hover span { transform: translateX(3px); }
@keyframes pz-up { to { opacity: 1; transform: none; } }

.pz-title { margin: 26px auto 22px; font-size: clamp(44px, 7.6vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; }
.pz-line { display: block; overflow: hidden; padding: .04em .08em .1em; margin: -.04em -.08em -.1em; }
.pz-line > span { display: inline-block; transform: translateY(105%); animation: pz-rise 1.1s var(--pz-ease) forwards; }
.pz-line:nth-child(2) > span { animation-delay: .14s; }
@keyframes pz-rise { to { transform: none; } }
.pz-hero .lead { margin: 0 auto; color: #c3c1c9; opacity: 0; animation: pz-up 1s var(--pz-ease) .45s forwards; transform: translateY(10px); }

.pz-q { position: relative; display: flex; align-items: center; gap: 12px; width: min(600px, 100%); height: 60px; margin: 34px auto 0; padding: 0 10px 0 22px;
  border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 19px; text-align: left;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; transform: translateY(10px); animation: pz-up 1s var(--pz-ease) .6s forwards; }
.pz-q::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pz-a, 0deg), transparent 0 70%, var(--pz-coral) 80%, var(--pz-marker) 85%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pz-spin 4s linear infinite; }
@property --pz-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pz-spin { to { --pz-a: 360deg; } }
.pz-q > svg { width: 22px; height: 22px; color: var(--pz-coral); flex: none; }
.pz-q-text { white-space: nowrap; overflow: hidden; }
.pz-q-res { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: #ffe9a3; white-space: nowrap;
  background: rgba(255,214,64,.12); border: 1px solid rgba(255,214,64,.25); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s var(--pz-spring); }
.pz-q-res.on { opacity: 1; transform: none; }
.pz-q-res b { color: var(--pz-marker); font-variant-numeric: tabular-nums; }

.pz-hero-cta { display: flex; justify-content: center; margin-top: 30px; opacity: 0; animation: pz-up 1s var(--pz-ease) .75s forwards; transform: translateY(10px); }
.pz-hero-cta .badges { justify-content: center; }
.pz-hero-fine { margin: 14px 0 0; font-size: 14px; color: #8f8d97; opacity: 0; animation: pz-up 1s var(--pz-ease) .85s forwards; }

.pz-stage-wrap { perspective: 2200px; margin-top: 70px; padding-bottom: 200px; }
.pz-stage { position: relative; width: min(1080px, 100%); margin: 0 auto; transform-origin: 50% 0;
  transform: translate3d(0, var(--pz-ty, 60px), 0) rotateX(var(--pz-tilt, 26deg)) scale(var(--pz-sc, .9));
  opacity: 0; animation: pz-fadein 1.4s var(--pz-ease) .5s forwards; will-change: transform; }
@keyframes pz-fadein { to { opacity: 1; } }
.pz-macwin { margin: 0; position: relative; border-radius: 1.4% / 2.24%; overflow: hidden; background: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 50px 120px -30px rgba(0,0,0,.9), 0 0 160px -40px rgba(232,67,47,.55); }
.pz-macwin img { width: 100%; }
.pz-scanline { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; transform: translateY(-130px);
  background: linear-gradient(transparent, rgba(232,67,47,.0) 30%, rgba(232,67,47,.22) 85%, rgba(255,140,110,.9) 99%, transparent);
  mix-blend-mode: multiply; animation: pz-scan-once 2.4s var(--pz-ease) 1.5s forwards; }
@keyframes pz-scan-once { 0% { transform: translateY(-130px); } 100% { transform: translateY(calc(var(--pz-h, 700px) + 10px)); } }
.pz-phone.pz-hero-phone { position: absolute; z-index: 2; right: -5%; bottom: -17%; width: 24%; transform: translateZ(80px);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), -24px 40px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); }
.pz-callout { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; z-index: 3;
  font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(20,20,26,.78); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); opacity: 0; transform: translateY(14px) scale(.9);
  animation: pz-pop .7s var(--pz-spring) forwards, pz-bob 6s ease-in-out infinite; }
.pz-callout i { width: 10px; height: 10px; border-radius: 50%; background: var(--pz-marker); box-shadow: 0 0 0 4px rgba(255,214,64,.25); }
.pz-callout.c1 { left: -4%; top: 22%; animation-delay: 2.2s, 3s; }
.pz-callout.c2 { left: 31%; top: 54%; animation-delay: 2.5s, 3.3s; }
.pz-callout.c3 { right: 21%; top: 34%; animation-delay: 2.8s, 3.6s; }
.pz-callout.c3 i { background: linear-gradient(135deg, var(--pz-ai1), var(--pz-ai3)); box-shadow: 0 0 0 4px rgba(214,91,255,.25); }
@keyframes pz-pop { to { opacity: 1; transform: none; } }
@keyframes pz-bob { 50% { translate: 0 -6px; } }

/* phone frame (shared) */
.pz-phone { margin: 0; position: relative; container-type: inline-size; padding: 0; border-radius: 15% / 7%;
  background: linear-gradient(145deg, #3a3b42, #121317 40%, #26272d); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), 0 40px 80px -24px rgba(0,0,0,.85); }
.pz-phone-scr { position: relative; margin: 3.6cqw; aspect-ratio: 782 / 1700; border-radius: 13% / 6%; overflow: hidden; background: #000; }
.pz-phone-scr img { width: 100%; height: 100%; object-fit: contain; }
.pz-phone-scr::after { content: ""; position: absolute; top: 1.6%; left: 50%; width: 31%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }

/* ============================== MARQUEE ============================== */
.pz-marquee { overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pz-marquee-track { display: flex; gap: 14px; width: max-content; animation: pz-marquee 48s linear infinite; }
.pz-marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #cfcdd5; font-size: 15px; font-weight: 600; }
.pz-marquee b { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; letter-spacing: .07em; color: #fff; background: var(--c); }
.pz-marquee:hover .pz-marquee-track { animation-play-state: paused; }
@keyframes pz-marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ============================== STORY (sticky scrollytelling) ============================== */
.pz-story { padding-bottom: 120px; }
.pz-story .section-head { margin-bottom: 30px; }
.pz-story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.pz-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.pz-step:first-child { min-height: 60vh; }
.pz-step.on { opacity: 1; }
.pz-step-n { font: 800 14px/1 var(--font-mono); color: var(--pz-red); letter-spacing: .1em; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.pz-step-n::after { content: ""; height: 2px; width: 0; background: var(--pz-red); border-radius: 2px; transition: width .8s var(--pz-ease); }
.pz-step.on .pz-step-n::after { width: 64px; }
.pz-step h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.pz-step p { font-size: 19px; color: var(--text-2); margin: 0; max-width: 440px; }
.pz-story-stick { position: sticky; top: max(80px, calc(50vh - 290px)); }

.pz-board { position: relative; height: 580px; border-radius: 28px; padding: 22px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f7f4ef); border: 1px solid rgba(22,23,27,.08);
  box-shadow: 0 2px 3px rgba(22,23,27,.04), 0 50px 90px -40px rgba(22,23,27,.45); }
.pz-board-q { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 14px;
  background: #fff; border: 1.5px solid rgba(22,23,27,.1); font-size: 17px; color: #16171b; box-shadow: 0 6px 20px -12px rgba(22,23,27,.3); }
.pz-board-term { white-space: nowrap; }
.pz-board-q svg { width: 19px; height: 19px; color: var(--pz-red); flex: none; }
.pz-board-meta { margin-left: auto; font-size: 13px; color: #8a8b93; white-space: nowrap; }
.pz-board-meta b { color: #16171b; }
.pz-board-area { position: absolute; left: 22px; right: 22px; top: 88px; bottom: 22px; }
.pz-sheet { position: absolute; left: 0; top: 0; width: var(--w, 100px); height: var(--h, 130px); border-radius: 8px; padding: 0;
  background: #fff; border: 1px solid rgba(22,23,27,.1); box-shadow: 0 6px 16px -8px rgba(22,23,27,.35);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--s, 1)); opacity: var(--o, 1);
  transition: transform .9s var(--pz-ease), opacity .6s, width .9s var(--pz-ease), height .9s var(--pz-ease), box-shadow .5s, border-color .5s;
  transition-delay: var(--d, 0s); overflow: hidden; }
.pz-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--sc, #1f7a6d); }
.pz-sheet i { display: block; height: 4px; margin: 0 10% 7%; border-radius: 2px; background: #e4e2de; position: relative; }
.pz-sheet i.t { height: 7px; width: 52%; background: #c9c6c0; margin-top: 20%; margin-bottom: 10%; }
.pz-sheet i.s { width: 50%; }
.pz-sheet i.k::after { content: ""; position: absolute; left: var(--hx, 20%); width: var(--hw, 30%); top: -2px; bottom: -2px; border-radius: 2px;
  background: var(--pz-marker); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--pz-ease); transition-delay: var(--hd, 0s); }
.pz-sheet.hit.lit i.k::after { transform: none; }
.pz-sheet .pz-hits { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; font: 800 10.5px/1.4 var(--font); color: #5a4300;
  background: var(--pz-marker); opacity: 0; transform: scale(.6); transition: .35s var(--pz-spring); }
.pz-sheet.hit.lit .pz-hits { opacity: 1; transform: none; }
.pz-sheet .pz-score { position: absolute; left: 8%; right: 8%; bottom: 8px; height: 5px; border-radius: 99px; background: rgba(22,23,27,.08); opacity: 0; transition: opacity .4s; }
.pz-sheet .pz-score::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pz-coral), var(--pz-red));
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--pz-ease) .2s; }
.pz-sheet .pz-rank { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 800 13px/1 var(--font); color: #fff;
  padding: 6px 10px; border-radius: 7px; background: #1f7a6d; opacity: 0; transition: opacity .4s .5s; }
.pz-sheet .pz-name { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-160%); white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #16171b; opacity: 0; transition: opacity .4s .5s; }
.pz-board[data-step="2"] .pz-sheet.hit .pz-score { opacity: 1; }
.pz-board[data-step="2"] .pz-sheet.hit .pz-score::after { transform: scaleX(var(--v, .5)); }
.pz-board[data-step="2"] .pz-sheet:not(.hit) { --o: .14; }
.pz-board[data-step="3"] .pz-sheet { overflow: visible; }
.pz-board[data-step="3"] .pz-sheet.hit .pz-hits { opacity: 0; }
.pz-board[data-step="3"] .pz-sheet.ranked .pz-rank, .pz-board[data-step="3"] .pz-sheet.ranked .pz-name { opacity: 1; }
.pz-board[data-step="3"] .pz-sheet.ranked.r1 { border-color: var(--pz-red); box-shadow: 0 0 0 3px rgba(232,67,47,.18), 0 10px 24px -10px rgba(22,23,27,.5); }
.pz-board[data-step="3"] .pz-sheet.r1 .pz-rank { background: var(--pz-red); }

.pz-board-beam { position: absolute; top: -10px; bottom: -10px; left: 0; width: 120px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(232,67,47,.10) 60%, rgba(232,67,47,.55) 96%, #ff8a6b 99%, transparent); }
.pz-board[data-step="1"] .pz-board-beam { animation: pz-sweep 2.2s var(--pz-ease) .15s 1 forwards; }
@keyframes pz-sweep { 0% { opacity: 1; transform: translateX(-130px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--bw, 600px) + 10px)); } }

.pz-factors { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; opacity: 0; transform: translateY(10px); transition: .5s var(--pz-ease); pointer-events: none; }
.pz-factors span { padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #4c4d55; background: #fff; border: 1px solid rgba(22,23,27,.1); transition: .4s; }
.pz-board[data-step="2"] .pz-factors { opacity: 1; transform: none; }
.pz-factors span.on { color: #fff; background: var(--pz-red); border-color: var(--pz-red); box-shadow: 0 8px 18px -8px rgba(232,67,47,.8); }

.pz-preview { position: absolute; right: 0; top: 0; width: 50%; height: 100%; padding: 22px 22px 0; border-radius: 12px; background: #fff;
  border: 1px solid rgba(22,23,27,.1); box-shadow: 0 30px 60px -30px rgba(22,23,27,.55); font-family: Georgia, "New York", serif; color: #2a2b31;
  opacity: 0; transform: translateX(40px) scale(.96); transition: .8s var(--pz-ease); pointer-events: none; overflow: hidden; }
.pz-preview::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #1f7a6d; }
.pz-preview small { display: block; font: 600 11.5px/1.3 var(--font); color: #8a8b93; margin-bottom: 14px; }
.pz-preview b { display: block; font: 700 19px/1.3 var(--font); color: #1f7a6d; margin-bottom: 8px; }
.pz-preview p { font-size: 14.5px; line-height: 1.65; margin: 0 0 14px; }
.pz-preview mark { background: var(--pz-marker); color: inherit; padding: 0 2px; }
.pz-preview-tbl { display: grid; gap: 6px; }
.pz-preview-tbl i { height: 18px; border-radius: 3px; background: #f0eeea; }
.pz-preview-tbl i:first-child { background: #1f7a6d; }
.pz-preview-tbl i.h { background: linear-gradient(90deg, var(--pz-marker) 0 28%, #f0eeea 28%); }
.pz-board[data-step="3"] .pz-preview { opacity: 1; transform: none; transition-delay: .35s; }

/* the real app, with hotspots */
.pz-real { margin: 70px 0 0; }
.pz-real figcaption { display: flex; align-items: baseline; gap: 14px; justify-content: center; margin-bottom: 26px; }
.pz-real figcaption .eyebrow { margin: 0; }
.pz-real figcaption b { font-size: 22px; letter-spacing: -.02em; }
.pz-real-shot { position: relative; border-radius: 1.4% / 2.24%; box-shadow: 0 0 0 1px rgba(22,23,27,.1), 0 60px 110px -50px rgba(22,23,27,.6); }
.pz-real-shot img { border-radius: inherit; width: 100%; }
.pz-hot { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--pz-red); color: #fff; font: 800 14px/34px var(--font); box-shadow: 0 0 0 5px rgba(232,67,47,.25), 0 8px 18px -6px rgba(0,0,0,.5); z-index: 2; }
.pz-hot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--pz-red); animation: pz-ping 2.2s ease-out infinite; }
.pz-hot::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); white-space: nowrap; pointer-events: none;
  padding: 9px 14px; border-radius: 10px; background: #16171b; color: #fff; font: 600 14px/1.2 var(--font); opacity: 0; transition: .3s var(--pz-ease);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.pz-hot.below::after { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -6px); }
.pz-hot:hover::after, .pz-hot:focus-visible::after, .pz-hot.on::after { opacity: 1; transform: translate(-50%, 0); }
.pz-hot.left::after { left: auto; right: -8px; transform: translate(0, 6px); }
.pz-hot.left.below::after { transform: translate(0, -6px); }
.pz-hot.left:hover::after, .pz-hot.left:focus-visible::after, .pz-hot.left.on::after { transform: none; }
@keyframes pz-ping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* ============================== AI CHAT ============================== */
.pz-ai { overflow: hidden; isolation: isolate; }
.pz-ai-aurora { position: absolute; inset: -20% -10% auto; height: 900px; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .5;
  background: radial-gradient(40% 40% at 30% 40%, rgba(110,91,255,.55), transparent 70%), radial-gradient(35% 35% at 70% 35%, rgba(214,91,255,.45), transparent 70%),
              radial-gradient(30% 30% at 55% 70%, rgba(232,67,47,.4), transparent 70%);
  animation: pz-aurora 18s ease-in-out infinite alternate; }
@keyframes pz-aurora { to { transform: translate3d(4%, 6%, 0) rotate(8deg) scale(1.1); } }
.pz-eyebrow-ai { background: linear-gradient(100deg, #a99bff, #f08bff 50%, #ff9a8a); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

.pz-ai-grid { position: relative; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 10px; }
.pz-chat { position: relative; z-index: 2; border-radius: 26px; background: rgba(22,22,30,.82); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9); overflow: hidden; }
.pz-chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--pz-a, 0deg), var(--pz-ai1), var(--pz-ai2), var(--pz-ai3), #ffb35c, var(--pz-ai1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pz-spin 6s linear infinite; opacity: .0; transition: opacity .6s; }
.pz-chat.thinking::before { opacity: 1; }
.pz-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pz-chat-head b { display: block; font-size: 16px; }
.pz-chat-head small { color: #9b99a5; font-size: 12.5px; }
.pz-chat-spark { width: 34px; height: 34px; border-radius: 10px; background: conic-gradient(from 200deg, var(--pz-ai1), var(--pz-ai2), var(--pz-ai3), #ffb35c, var(--pz-ai1));
  position: relative; box-shadow: 0 6px 16px -6px rgba(214,91,255,.8); }
.pz-chat-spark::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 17px; }
.pz-chat-dots { margin-left: auto; display: flex; gap: 6px; }
.pz-chat-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pz-chat-body { padding: 20px; min-height: 452px; display: flex; flex-direction: column; gap: 14px; }
.pz-msg-q { align-self: flex-end; max-width: 82%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-size: 15.5px; color: #fff;
  background: linear-gradient(120deg, #7d4dff, #d33fae); box-shadow: 0 10px 24px -12px rgba(170,70,220,.8); }
.pz-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pz-tools li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: #c9c7d1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.pz-tools li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #c9a6ff; flex: none; animation: pz-rot .8s linear infinite; }
.pz-tools li.done i { animation: none; border: 0; background: #34c26a; position: relative; }
.pz-tools li.done i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pz-tools li em { margin-left: auto; font-style: normal; color: #8f8d98; font-size: 12.5px; }
@keyframes pz-rot { to { transform: rotate(360deg); } }
.pz-msg-a p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: #e8e6ec; }
.pz-msg-a b { color: #fff; }
.pz-msg-a .w { opacity: 0; transition: opacity .25s; }
.pz-msg-a .w.on { opacity: 1; }
.pz-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font: 800 11px/1 var(--font);
  color: #cbb8ff; background: rgba(140,110,255,.22); cursor: pointer; vertical-align: 2px; transition: .25s; }
.pz-cite.hl { color: #17181c; background: var(--pz-marker); box-shadow: 0 0 0 4px rgba(255,214,64,.25); }
.pz-srcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pz-srcs button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font: 600 13px/1.2 var(--font);
  color: #d9d7df; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: .25s; }
.pz-srcs button em { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800;
  background: rgba(140,110,255,.3); color: #fff; }
.pz-srcs button.on { border-color: rgba(255,214,64,.6); color: #fff; background: rgba(255,214,64,.1); }
.pz-srcs button.on em { background: var(--pz-marker); color: #17181c; }
.pz-chat-input { display: flex; align-items: center; margin: 0 16px 16px; padding: 12px 12px 12px 18px; border-radius: 16px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); color: #77757f; font-size: 14.5px; }
.pz-chat-input i { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255,255,255,.1); color: #aaa; }
/* animated states (JS) */
.pz-chat.anim .pz-msg-q, .pz-chat.anim .pz-tools li, .pz-chat.anim .pz-srcs { opacity: 0; transform: translateY(8px); transition: .5s var(--pz-ease); }
.pz-chat.anim .pz-msg-q.on, .pz-chat.anim .pz-tools li.on, .pz-chat.anim .pz-srcs.on { opacity: 1; transform: none; }

.pz-srcpages { position: absolute; z-index: 3; left: calc(min(540px, 50%) - 34px); top: 50%; width: 330px; height: 300px; transform: translateY(-58%); pointer-events: none; }
.pz-sp { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 24px 22px 20px; border-radius: 12px; background: #fdfcf9; color: #2a2b31;
  font-family: Georgia, "New York", serif; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.05);
  opacity: 0; transform: translateX(-60px) rotate(-4deg) scale(.9); transition: .8s var(--pz-ease); }
.pz-sp.on { opacity: 1; transform: rotate(2deg); }
.pz-sp small { display: block; font: 600 11px/1.3 var(--font); color: #8a8b93; margin-bottom: 12px; letter-spacing: .02em; }
.pz-sp b { display: block; font: 700 16px/1.3 var(--font); color: #16171b; margin-bottom: 8px; }
.pz-sp p { font-size: 14px; line-height: 1.65; margin: 0 0 14px; }
.pz-sp mark { color: inherit; padding: 0 1px; background: linear-gradient(104deg, transparent 0 1%, var(--pz-marker) 2% 98%, transparent 99%) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s var(--pz-ease) .6s; }
.pz-sp.on mark { background-size: 100% 100%; }
.pz-sp-lines { display: grid; gap: 7px; }
.pz-sp-lines i { height: 5px; border-radius: 3px; background: #ebe8e3; }
.pz-sp-lines i:last-child { width: 60%; }
.pz-ai-phone { width: min(300px, 70%); justify-self: end; margin-right: 4%; transform: rotate(4deg); }

.pz-tools-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 70px; }
.pz-tools-row div { padding: 20px 20px 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pz-tools-row b { display: block; font-size: 17px; margin-bottom: 6px; background: linear-gradient(100deg, #c2b7ff, #f2a2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-tools-row span { color: #a9a7b2; font-size: 15px; line-height: 1.45; }

/* engines */
.pz-engines { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; margin-top: 90px; padding: 44px;
  border-radius: 30px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); }
.pz-eng-copy p { color: #b3b1bb; margin: 0 0 22px; }
.pz-eng-tabs { display: grid; gap: 8px; }
.pz-eng-tabs button { text-align: left; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  color: #f2f0f5; cursor: pointer; font: inherit; transition: .3s var(--pz-ease); position: relative; overflow: hidden; }
.pz-eng-tabs button b { display: block; font-size: 16.5px; }
.pz-eng-tabs button span { font-size: 13.5px; color: #98969f; }
.pz-eng-tabs button:hover { border-color: rgba(255,255,255,.2); }
.pz-eng-tabs button[aria-selected="true"] { background: rgba(232,67,47,.12); border-color: rgba(255,122,89,.55); }
.pz-eng-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--pz-coral);
  transform-origin: left; animation: pz-tabtime 7s linear forwards; }
.pz-engines.paused .pz-eng-tabs button::after { animation: none; transform: scaleX(0); }
@keyframes pz-tabtime { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pz-eng-viz { position: relative; aspect-ratio: 520 / 380; }
.pz-eng-svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.pz-eng-ring { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; stroke-dasharray: 4 6; animation: pz-dash 20s linear infinite; }
@keyframes pz-dash { to { stroke-dashoffset: -400; } }
.pz-eng-path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-dasharray: 6 8; transition: opacity .5s; animation: pz-dash 14s linear infinite; }
.pz-eng-pkt { fill: var(--pz-marker); filter: drop-shadow(0 0 6px rgba(255,214,64,.9)); }
.pz-eng-orbit { fill: var(--pz-marker); opacity: 0; transition: opacity .4s; }
.pz-eng-halo { transition: opacity .5s; }
.pz-eng-device { position: absolute; left: 25%; top: 44.7%; transform: translate(-50%, -50%); text-align: center; font-size: 13px; color: #d8d6de; }
.pz-eng-laptop { display: block; width: 92px; height: 62px; margin: 0 auto 8px; position: relative; }
.pz-eng-laptop::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 52px; border-radius: 6px 6px 2px 2px; border: 3px solid #d7d5dd;
  background: linear-gradient(160deg, #2a2b33, #17181d); }
.pz-eng-laptop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 7px; border-radius: 1px 1px 8px 8px; background: #d7d5dd; }
.pz-eng-laptop i { position: absolute; z-index: 1; left: 50%; top: 14px; width: 26px; height: 26px; margin-left: -13px; border-radius: 7px;
  background: conic-gradient(from 200deg, var(--pz-ai1), var(--pz-ai2), var(--pz-ai3), #ffb35c, var(--pz-ai1)); }
.pz-eng-cloud { position: absolute; left: 86%; top: 34%; transform: translate(-50%, -50%); text-align: center; font-size: 13px; color: #d8d6de; transition: opacity .5s, filter .5s; width: 150px; }
.pz-eng-cloud span { display: block; width: 92px; height: 58px; margin: 0 auto 8px; position: relative; }
.pz-eng-cloud span::before { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 58'%3E%3Cpath d='M24 56C11 56 2 48 2 37c0-10 7-18 17-19C22 8 31 2 42 2c12 0 21 8 24 18 13 0 24 9 24 20 0 9-7 16-17 16z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 58'%3E%3Cpath d='M24 56C11 56 2 48 2 37c0-10 7-18 17-19C22 8 31 2 42 2c12 0 21 8 24 18 13 0 24 9 24 20 0 9-7 16-17 16z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pz-eng-cloud span { color: #c9b8ff; filter: drop-shadow(0 0 18px rgba(160,120,255,.55)); }
.pz-eng-viz[data-eng="2"] .pz-eng-cloud span { color: #8fb6ff; filter: drop-shadow(0 0 18px rgba(80,140,255,.55)); }
.pz-eng-viz[data-eng="3"] .pz-eng-cloud span { color: #ff9e85; filter: drop-shadow(0 0 18px rgba(232,67,47,.6)); }
.pz-eng-viz[data-eng="1"] .pz-eng-cloud { opacity: .25; filter: grayscale(1); }
.pz-eng-viz[data-eng="1"] .pz-eng-cloud::after { content: ""; position: absolute; left: 20%; right: 20%; top: 26px; height: 3px; background: #ff6a4d; transform: rotate(-20deg); border-radius: 2px; }
.pz-eng-viz[data-eng="1"] .pz-eng-path, .pz-eng-viz[data-eng="1"] .pz-eng-pkt { opacity: 0; }
.pz-eng-viz[data-eng="1"] .pz-eng-orbit, .pz-eng-viz[data-eng="0"] .pz-eng-orbit { opacity: 1; }
.pz-eng-viz[data-eng="1"] .pz-eng-ring { stroke: rgba(255,214,64,.6); }
.pz-eng-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); }
.pz-eng-caption b { display: block; font-size: 16px; margin-bottom: 4px; }
.pz-eng-caption p { margin: 0; font-size: 14.5px; color: #b8b6c0; line-height: 1.5; }
.pz-eng-caption.swap { animation: pz-swap .5s var(--pz-ease); }
@keyframes pz-swap { from { opacity: 0; transform: translateY(8px); } }

/* ============================== OCR ============================== */
.pz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.pz-checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.pz-checks li { position: relative; padding-left: 34px; color: var(--text-2); }
.pz-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px; background: var(--pz-marker); }
.pz-checks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 10px; border: solid #3d2f00; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pz-scan { position: relative; padding: 26px; }
.pz-scan-paper { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(60,40,20,.6); transform: rotate(-1.5deg); }
.pz-scan-paper img { width: 100%; }
.pz-boxes { position: absolute; inset: 0; }
.pz-box { position: absolute; border: 1.5px solid rgba(42,140,240,.9); background: rgba(42,140,240,.08); border-radius: 3px; transform: rotate(2.1deg) scale(.6);
  opacity: 0; transition: opacity .25s, transform .4s var(--pz-spring); }
.pz-box.on { opacity: 1; transform: rotate(2.1deg); }
.pz-box.fade { opacity: .25; }
.pz-box.hit { border-color: var(--pz-red); background: rgba(255,214,64,.25); box-shadow: 0 0 0 4px rgba(232,67,47,.18), 0 0 30px rgba(255,214,64,.6); opacity: 1; }
.pz-scan-beam { position: absolute; left: -5%; right: -5%; top: 0; height: 90px; transform: translateY(-100px); pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, rgba(232,67,47,.08) 50%, rgba(232,67,47,.4) 94%, #ff7a59 98%, transparent); }
.pz-scan.run .pz-scan-beam { opacity: 1; animation: pz-ocrbeam 3.2s linear forwards; }
@keyframes pz-ocrbeam { to { transform: translateY(var(--pz-ocr-h, 600px)); } }
.pz-vf { position: absolute; width: 34px; height: 34px; border: 3px solid var(--pz-red); transition: .6s var(--pz-ease); }
.pz-vf.a { left: 10px; top: 10px; border-width: 3px 0 0 3px; border-radius: 10px 0 0 0; }
.pz-vf.b { right: 10px; top: 10px; border-width: 3px 3px 0 0; border-radius: 0 10px 0 0; }
.pz-vf.c { left: 10px; bottom: 10px; border-width: 0 0 3px 3px; border-radius: 0 0 0 10px; }
.pz-vf.d { right: 10px; bottom: 10px; border-width: 0 3px 3px 0; border-radius: 0 0 10px 0; }
.pz-scan.found .pz-vf { opacity: .0; }
.pz-scan-hud { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(22,23,27,.88); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.pz-scan-n { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.pz-scan-found { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 16px) scale(.95); display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -18px rgba(22,23,27,.55), 0 0 0 1px rgba(22,23,27,.06); white-space: nowrap; opacity: 0; transition: .6s var(--pz-spring); }
.pz-scan-found svg { width: 18px; height: 18px; color: var(--pz-red); }
.pz-scan-found span { font-weight: 800; background: var(--pz-marker); padding: 0 4px; border-radius: 3px; }
.pz-scan-found em { font-style: normal; color: #6b6c74; font-size: 14px; }
.pz-scan.found .pz-scan-found { opacity: 1; transform: translate(-50%, 0); }

/* ============================== CONVERT ============================== */
.pz-convert { overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, #1d1414 0%, var(--pz-night) 70%); }
.pz-press { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; min-height: 420px; margin-top: 10px; }
.pz-press-in { position: relative; height: 360px; }
.pz-src { position: absolute; left: 50%; top: 50%; width: 230px; transform: translate(-50%, -50%) translate(var(--ox, 0), var(--oy, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1); transition: transform 1s var(--pz-ease), opacity .7s; z-index: var(--z, 1); }
.pz-src .pz-tag { position: absolute; top: -10px; left: -10px; z-index: 2; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.pz-src-page, .pz-src-slide { border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); overflow: hidden; }
.pz-src-page { aspect-ratio: 8.5 / 11; background: #fff; padding: 22px 20px; }
.pz-src-page b { display: block; font: 700 15px/1.2 var(--font); color: #1c2a55; margin-bottom: 12px; }
.pz-src-page i { display: block; height: 5px; border-radius: 3px; background: #e2e4ea; margin-bottom: 8px; }
.pz-src-page i.l { width: 40%; background: #2f6fe4; height: 6px; }
.pz-src-page i.s { width: 60%; }
.pz-src-page .tb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px 0; }
.pz-src-page .tb i { height: 14px; margin: 0; border-radius: 2px; background: #eef0f5; }
.pz-src-page .tb i:nth-child(-n+3) { background: #2f6fe4; }
.pz-src-page.flyer { padding: 0 0 16px; }
.pz-src-page.flyer .img { display: block; height: 46%; background: linear-gradient(135deg, #ffb347, #ff6f61 60%, #c94b8c); margin-bottom: 14px; position: relative; }
.pz-src-page.flyer .img::after { content: ""; position: absolute; right: 18%; top: 22%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #ffe8a3; }
.pz-src-page.flyer b, .pz-src-page.flyer i { margin-left: 18px; margin-right: 18px; }
.pz-src-page.flyer b { color: #b8452c; }
.pz-src-slide { aspect-ratio: 16 / 10; padding: 16px 18px; position: relative; }
.pz-src-slide.light { background: linear-gradient(160deg, #fff, #f6efe9); }
.pz-src-slide.light b { color: #c24d16; }
.pz-src-slide.dark { background: linear-gradient(160deg, #1c2333, #0f131c); }
.pz-src-slide.dark b { color: #fff; }
.pz-src-slide b { display: block; font: 800 15px/1.2 var(--font); margin-bottom: 10px; }
.pz-src-slide .bars { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 58%; display: flex; align-items: flex-end; gap: 9%; }
.pz-src-slide .bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(#ff8a4c, #e26a2c); }
.pz-src-slide .pie { position: absolute; right: 22px; top: 34%; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#2a8cf0 0 42%, #6bd1ff 42% 70%, #ffb35c 70% 86%, #ff6a8a 86%); }
.pz-src-slide.dark i { display: block; width: 44%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 30px 0 8px; }
.pz-src-slide.dark i.s { width: 30%; margin-top: 0; }

.pz-press-core { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.pz-press-core img { position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 20px 50px -14px rgba(232,67,47,.8); transition: transform .3s var(--pz-spring); }
.pz-press-core.gulp img { transform: scale(1.12); }
.pz-core-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,122,89,.35); }
.pz-core-ring.r1 { animation: pz-pulse 2.6s ease-out infinite; }
.pz-core-ring.r2 { inset: 22px; border-style: dashed; border-color: rgba(255,214,64,.4); animation: pz-rot 14s linear infinite; }
@keyframes pz-pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.pz-core-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffb199; letter-spacing: .02em; }
.pz-press-out { position: relative; height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.pz-out-stack { position: relative; width: 210px; aspect-ratio: 8.5 / 11; }
.pz-out-pg { position: absolute; inset: 0; border-radius: 8px; background: #fff; padding: 20px 18px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.9);
  transform: translate(var(--ox, 0), var(--oy, 0)) rotate(var(--r, 0deg)); transition: transform .8s var(--pz-ease), opacity .6s; overflow: hidden; }
.pz-out-pg.drop { animation: pz-drop .9s var(--pz-spring); }
@keyframes pz-drop { from { opacity: 0; transform: translateX(-90px) scale(.6) rotate(-10deg); } }
.pz-out-pg .pz-tag { position: absolute; right: 10px; top: 10px; }
.pz-out-pg .mini { position: absolute; inset: 34px 16px 16px; border-radius: 4px; overflow: hidden; }
.pz-out-pg .mini > * { transform: scale(.78); transform-origin: top left; width: 128%; }
.pz-out-count { font-size: 14px; color: #c9c7cf; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.pz-out-count b { color: var(--pz-marker); font-variant-numeric: tabular-nums; }
.pz-fmt-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 60px; }
.pz-fmt-grid div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.pz-fmt-grid b { display: block; font-size: 15.5px; }
.pz-fmt-grid span { font-size: 13px; color: #98969f; font-family: var(--font-mono); }

/* ============================== BENTO ============================== */
.pz-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  grid-template-areas: "search search menu" "search search tags" "export sync scan"; }
.b-searching { grid-area: search; } .b-menubar { grid-area: menu; } .b-tags { grid-area: tags; } .b-export { grid-area: export; } .b-sync { grid-area: sync; } .b-scanner { grid-area: scan; }
.pz-b { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid rgba(22,23,27,.08);
  box-shadow: 0 1px 2px rgba(22,23,27,.04), 0 24px 50px -34px rgba(22,23,27,.45); transition: transform .4s var(--pz-ease), box-shadow .4s; }
.pz-b:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(22,23,27,.04), 0 34px 70px -34px rgba(22,23,27,.55); }
.pz-b.pz-dark { background: linear-gradient(160deg, #1a1b22, #0d0e12); border-color: rgba(255,255,255,.06); }
.pz-b-t { padding: 4px 26px 24px; }
.pz-b-t h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
.pz-b-t p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.pz-b > div:first-child { flex: 1; min-height: 210px; position: relative; }

/* searching card (recreates the Mac app's card) */
.pz-sc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px 26px; margin: 26px 26px 18px; border-radius: 26px;
  background: linear-gradient(180deg, #fffdfb, #f6efea); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 #fff; color: #16171b; text-align: center; }
.pz-sc-art { position: relative; width: 300px; height: 200px; margin-bottom: 16px; }
.pz-sc-ring { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px; border-radius: 50%; border: 1.5px solid rgba(232,67,47,.25); animation: pz-pulse 3s ease-out infinite; }
.pz-sc-ring.two { animation-delay: 1.5s; }
.pz-sc-deck { position: absolute; left: 50%; top: 50%; width: 110px; height: 140px; margin: -70px -55px; }
.pz-sc-deck i { position: absolute; inset: 0; border-radius: 7px; background: #fff; border: 1px solid rgba(22,23,27,.1); box-shadow: 0 8px 18px -10px rgba(22,23,27,.5);
  background-image: repeating-linear-gradient(transparent 0 16px, #ececec 16px 20px); background-size: 74% 100%; background-position: 50% 24px; background-repeat: no-repeat; }
.pz-sc-deck i:nth-child(1) { transform: translate(-14px, 8px) rotate(-8deg); } .pz-sc-deck i:nth-child(2) { transform: translate(12px, 6px) rotate(7deg); }
.pz-sc-deck i:nth-child(3) { transform: translate(-6px, 3px) rotate(-3deg); } .pz-sc-deck i:nth-child(4) { transform: translate(5px, 2px) rotate(3deg); }
.pz-sc-deck i:nth-child(5) { transform: rotate(-1deg); }
.pz-sc-deck i:nth-child(6)::before { content: ""; position: absolute; left: 12%; top: 18px; width: 42%; height: 7px; border-radius: 2px; background: var(--pz-red); }
.pz-sc-beam { position: absolute; left: -10px; right: -10px; height: 26px; top: 0; background: linear-gradient(transparent, rgba(232,67,47,.4) 80%, #ff7a59 96%, transparent);
  animation: pz-deckscan 2.4s ease-in-out infinite; mix-blend-mode: multiply; }
@keyframes pz-deckscan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(118px); } }
.pz-sc-lens { position: absolute; width: 58px; height: 58px; right: -16px; top: 26px; border-radius: 50%; border: 6px solid #2b2c33; background: rgba(255,255,255,.35);
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.5), inset 0 0 12px rgba(255,255,255,.8); animation: pz-lens 5s ease-in-out infinite; backdrop-filter: blur(.5px) saturate(1.4); }
.pz-sc-lens::after { content: ""; position: absolute; right: -16px; bottom: -14px; width: 22px; height: 8px; border-radius: 4px; background: #2b2c33; transform: rotate(45deg); }
@keyframes pz-lens { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-60px, 40px); } 66% { transform: translate(-20px, 70px); } }
.pz-sc-tag { position: absolute; padding: 4px 9px; border-radius: 8px; font: 800 11px/1.2 var(--font); letter-spacing: .05em; color: var(--pz-red);
  background: #fff; border: 1.5px solid rgba(232,67,47,.4); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); animation: pz-float 6s ease-in-out infinite; }
.pz-sc-tag.g1 { left: 6%; top: 16%; } .pz-sc-tag.g2 { right: 2%; top: 10%; animation-delay: -1s; } .pz-sc-tag.g3 { right: 0; top: 58%; animation-delay: -2s; }
.pz-sc-tag.g4 { left: 2%; top: 60%; animation-delay: -3s; } .pz-sc-tag.g5 { right: 20%; bottom: 0; animation-delay: -4s; } .pz-sc-tag.g6 { left: 20%; bottom: 2%; animation-delay: -5s; }
@keyframes pz-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.pz-sc small { font-size: 11.5px; letter-spacing: .3em; color: #8a8b93; font-weight: 700; }
.pz-sc-q { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px;
  background: linear-gradient(100deg, #16171b 0 30%, var(--pz-red) 45%, #16171b 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pz-sheen 3.5s linear infinite; }
@keyframes pz-sheen { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.pz-sc-p { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #4c4d55; font-variant-numeric: tabular-nums; }
.pz-sc-p i { width: 8px; height: 8px; border-radius: 50%; background: var(--pz-red); animation: pz-blink 1.2s infinite; }
.pz-sc-p em { font-style: normal; font-weight: 800; color: #16171b; }
.pz-sc-bar { display: block; width: min(320px, 80%); height: 5px; border-radius: 99px; background: rgba(22,23,27,.08); margin-top: 12px; overflow: hidden; }
.pz-sc-bar i { display: block; height: 100%; width: var(--pz-prog, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--pz-coral), var(--pz-red)); }

/* menu bar */
.pz-mb { overflow: hidden; background: linear-gradient(160deg, #ffe7dc, #ffd2c4 40%, #f1c6ff); }
.pz-mb-bar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: #222;
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px); }
.pz-mb-apple { width: 12px; height: 14px; border-radius: 50% 50% 45% 45%; background: #222; }
.pz-mb-icon { margin-left: auto; padding: 3px 5px; border-radius: 5px; animation: pz-mbclick 6s infinite; }
.pz-mb-icon img { width: 16px; height: 16px; border-radius: 4px; }
@keyframes pz-mbclick { 0%, 8% { background: transparent; } 10%, 90% { background: rgba(0,0,0,.14); } 92%, 100% { background: transparent; } }
.pz-mb-clock { font-variant-numeric: tabular-nums; }
.pz-mb-pop { position: absolute; right: 12px; top: 38px; width: 250px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.88); backdrop-filter: blur(20px);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); transform-origin: 88% 0; animation: pz-mbpop 6s var(--pz-ease) infinite; }
@keyframes pz-mbpop { 0%, 9% { opacity: 0; transform: scale(.85) translateY(-6px); } 14%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.95); } }
.pz-mb-field { height: 32px; padding: 0 10px; border-radius: 8px; background: rgba(0,0,0,.05); display: flex; align-items: center; font-size: 14px; color: #16171b; margin-bottom: 8px; }
.pz-mb-t::before { content: ""; animation: pz-mbtype 6s steps(1) infinite; }
@keyframes pz-mbtype { 0%, 16% { content: ""; } 18% { content: "l"; } 20% { content: "le"; } 22% { content: "lea"; } 24% { content: "leas"; } 26%, 100% { content: "lease"; } }
.pz-mb-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; font-size: 13px; opacity: 0; animation: pz-mbrow 6s infinite; }
.pz-mb-row:nth-of-type(2) { animation-delay: .25s; }
.pz-mb-row:first-of-type { background: rgba(232,67,47,.1); }
.pz-mb-row i { width: 18px; height: 22px; border-radius: 3px; background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 3px 0 #1f7a6d; flex: none; }
.pz-mb-row b { font-weight: 600; color: #16171b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-mb-row em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #1f7a6d; padding: 3px 7px; border-radius: 5px; flex: none; }
@keyframes pz-mbrow { 0%, 30% { opacity: 0; transform: translateY(4px); } 34%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* tags & bookmarks */
.pz-tg { display: grid; place-items: center; background: linear-gradient(160deg, #f6f1ff, #fdf6ef); }
.pz-tg-page { position: relative; width: 150px; height: 180px; padding: 22px 18px; border-radius: 8px; background: #fff; box-shadow: 0 20px 40px -20px rgba(22,23,27,.5); }
.pz-tg-page i { display: block; height: 5px; border-radius: 3px; background: #e7e4df; margin-bottom: 11px; }
.pz-tg-page i.h { width: 60%; height: 8px; background: #2f2f37; }
.pz-tg-page i.m { background: linear-gradient(90deg, var(--pz-marker) 0 70%, #e7e4df 70%); }
.pz-tg-page i.s { width: 50%; }
.pz-tg-bm { position: absolute; right: 16px; top: -4px; width: 18px; height: 0; background: var(--pz-red); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); animation: pz-bm 5s var(--pz-ease) infinite; }
@keyframes pz-bm { 0%, 20% { height: 0; } 30%, 90% { height: 34px; } 100% { height: 0; } }
.pz-tg-note { position: absolute; left: 60%; bottom: -18px; padding: 8px 10px; width: 120px; font-size: 12px; font-weight: 600; color: #4a3b00; background: #ffe680; border-radius: 3px;
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.4); transform: rotate(5deg) scale(0); transform-origin: 0 0; animation: pz-note 5s var(--pz-spring) infinite; }
@keyframes pz-note { 0%, 40% { transform: rotate(5deg) scale(0); } 50%, 90% { transform: rotate(5deg) scale(1); } 100% { transform: rotate(5deg) scale(0); } }
.pz-tg-chip { position: absolute; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; box-shadow: 0 8px 16px -8px rgba(0,0,0,.4);
  animation: pz-chip 5s var(--pz-ease) infinite; }
.pz-tg-chip.c1 { background: #7b5cff; left: 10%; top: 22%; --fx: -40px; }
.pz-tg-chip.c2 { background: #1f9d74; right: 8%; top: 40%; --fx: 40px; animation-delay: .25s; }
.pz-tg-chip.c3 { background: #e26a2c; left: 14%; bottom: 18%; --fx: -40px; animation-delay: .5s; }
@keyframes pz-chip { 0% { opacity: 0; transform: translateX(var(--fx)) scale(.7); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* export */
.pz-ex { display: grid; place-items: center; background: linear-gradient(160deg, #fff4ee, #fbf9f6); }
.pz-ex-pg { position: absolute; width: 74px; height: 96px; padding: 18px 10px 0; border-radius: 6px; background: #fff; box-shadow: 0 14px 26px -14px rgba(22,23,27,.55);
  animation: pz-merge 5s var(--pz-ease) infinite; }
.pz-ex-pg small { position: absolute; top: 4px; left: 8px; font-size: 9.5px; color: #8a8b93; font-weight: 700; }
.pz-ex-pg i { display: block; height: 4px; border-radius: 2px; background: #e7e4df; margin-bottom: 7px; }
.pz-ex-pg i.m { background: var(--pz-marker); }
.pz-ex-pg.p1 { --sx: -110px; --sr: -8deg; } .pz-ex-pg.p2 { --sx: 0px; --sr: 2deg; animation-delay: .12s; } .pz-ex-pg.p3 { --sx: 110px; --sr: 8deg; animation-delay: .24s; }
@keyframes pz-merge { 0%, 15% { transform: translate(var(--sx), -20px) rotate(var(--sr)); opacity: 1; } 45% { transform: translate(0, 0) scale(.7); opacity: 1; } 50%, 100% { transform: translate(0, 0) scale(.6); opacity: 0; } }
.pz-ex-out { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 22px; border-radius: 14px; background: #fff;
  box-shadow: 0 20px 40px -18px rgba(232,67,47,.6), 0 0 0 1px rgba(232,67,47,.2); animation: pz-exout 5s var(--pz-spring) infinite; }
.pz-ex-out b { font-size: 14px; } .pz-ex-out small { font-size: 12px; color: #8a8b93; }
@keyframes pz-exout { 0%, 45% { opacity: 0; transform: scale(.6); } 55%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }

/* Mac → iPhone */
.pz-sy { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 30px; }
.pz-sy-mac { width: 110px; height: 76px; position: relative; flex: none; }
.pz-sy-mac::before { content: ""; position: absolute; left: 9px; right: 9px; top: 0; height: 64px; border-radius: 6px; border: 3px solid #cfcdd5; background: linear-gradient(160deg, #2b2c35, #16171c); }
.pz-sy-mac::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; border-radius: 1px 1px 8px 8px; background: #cfcdd5; }
.pz-sy-mac i, .pz-sy-phone i { position: absolute; z-index: 1; left: 50%; top: 36%; width: 24px; height: 24px; margin: -12px; border-radius: 6px; background: linear-gradient(135deg, var(--pz-coral), var(--pz-red)); }
.pz-sy-phone { width: 48px; height: 96px; position: relative; flex: none; border-radius: 12px; border: 3px solid #cfcdd5; background: linear-gradient(160deg, #2b2c35, #16171c); }
.pz-sy-phone i { top: 50%; }
.pz-sy-wave { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: block; width: 40px; height: 30px; }
.pz-sy-wave i { position: absolute; left: 50%; bottom: 0; border: 3px solid transparent; border-top-color: rgba(255,214,64,.8); border-radius: 50%; transform: translateX(-50%); animation: pz-wifi 1.8s infinite; }
.pz-sy-wave i:nth-child(1) { width: 14px; height: 14px; bottom: -4px; } .pz-sy-wave i:nth-child(2) { width: 28px; height: 28px; bottom: -11px; animation-delay: .2s; } .pz-sy-wave i:nth-child(3) { width: 42px; height: 42px; bottom: -18px; animation-delay: .4s; }
@keyframes pz-wifi { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.pz-sy-pkts { position: relative; flex: 1; height: 40px; margin: 0 6px; min-width: 120px; }
.pz-sy-pkts::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(255,255,255,.2); }
.pz-sy-pkts i { position: absolute; left: 0; top: 50%; padding: 3px 6px; border-radius: 5px; font: 800 9.5px/1.2 var(--font); letter-spacing: .05em; font-style: normal; color: #fff;
  background: var(--pz-red); transform: translate(0, -50%); opacity: 0; animation: pz-pkt 3.2s linear infinite; }
.pz-sy-pkts i:nth-child(even) { background: #b88a00; color: #fff; }
.pz-sy-pkts i:nth-child(2) { animation-delay: 1.6s; } .pz-sy-pkts i:nth-child(n+3) { display: none; }
@keyframes pz-pkt { 0% { left: 0; opacity: 0; } 10%, 85% { opacity: 1; } 100% { left: calc(100% - 40px); opacity: 0; } }

/* iPhone scanner */
.pz-sn { display: grid; place-items: center; background: linear-gradient(160deg, #eef6f2, #fbf9f6); }
.pz-sn-phone { position: relative; width: 120px; height: 200px; padding: 6px; border-radius: 24px; background: #1b1c22; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.pz-sn-view { position: relative; height: 100%; border-radius: 19px; overflow: hidden; background: linear-gradient(160deg, #8a6a4a, #5d4630); }
.pz-sn-doc { position: absolute; left: 18%; right: 14%; top: 18%; bottom: 22%; padding: 10px 8px; background: #faf7ef; transform: rotate(-6deg); box-shadow: 0 6px 12px rgba(0,0,0,.4); }
.pz-sn-doc i { display: block; height: 3px; border-radius: 2px; background: #cfc9bd; margin-bottom: 7px; }
.pz-sn-frame { position: absolute; left: 15%; right: 11%; top: 15%; bottom: 19%; border: 2px solid #34c7ff; background: rgba(52,199,255,.15); transform: rotate(-6deg);
  animation: pz-snframe 4s var(--pz-ease) infinite; }
@keyframes pz-snframe { 0%, 15% { opacity: 0; transform: rotate(-6deg) scale(1.3); } 35%, 70% { opacity: 1; transform: rotate(-6deg); } 74% { opacity: 1; background: rgba(255,255,255,.9); } 80%, 100% { opacity: 0; } }
.pz-sn-shutter { position: absolute; left: 50%; bottom: 14px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }

/* ============================== GALLERY ============================== */
.pz-gallery { overflow: hidden; background: radial-gradient(70% 50% at 50% 60%, #1d1416, var(--pz-night) 70%); }
.pz-gtabs { position: relative; display: flex; width: max-content; margin: 0 auto 40px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.pz-gtabs button { position: relative; z-index: 1; border: 0; background: none; color: #c4c2ca; font: 700 15px/1 var(--font); padding: 11px 24px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.pz-gtabs button[aria-selected="true"] { color: #fff; }
.pz-gtabs-ind { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: linear-gradient(100deg, var(--pz-red), var(--pz-coral));
  box-shadow: 0 8px 20px -8px rgba(232,67,47,.8); transition: transform .5s var(--pz-ease), width .5s var(--pz-ease); }
.pz-show { position: relative; }
.pz-dev { position: relative; margin: 0 auto; }
.pz-dev[hidden] { display: none; }
.pz-dev-scr { position: relative; overflow: hidden; background: #000; }
.pz-dev-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s var(--pz-ease); }
.pz-dev-scr img.on { opacity: 1; }
.pz-dev-mac { width: min(1000px, 100%, (100svh - 290px) * 1.55); }
.pz-dev-mac .pz-dev-scr { aspect-ratio: 1.6; border-radius: 18px 18px 0 0; border: 14px solid #0e0f12; border-bottom-width: 22px; box-shadow: 0 0 0 1.5px #3a3b42; }
.pz-dev-base { display: block; height: 18px; margin: 0 -7%; border-radius: 2px 2px 18px 18px; background: linear-gradient(#d6d5da, #9d9ca3 70%, #6f6e75);
  box-shadow: 0 40px 60px -20px rgba(0,0,0,.9); position: relative; }
.pz-dev-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #8b8a91; }
.pz-dev-iphone { width: min(340px, 78%, (100svh - 290px) * .46 + 24px); padding: 12px; border-radius: 56px; background: linear-gradient(145deg, #3a3b42, #121317 40%, #26272d); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 50px 90px -30px rgba(0,0,0,.95); }
.pz-dev-iphone .pz-dev-scr { aspect-ratio: 782 / 1700; border-radius: 44px; }
.pz-dev-iphone .pz-dev-scr::after { content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 30%; height: 30px; transform: translateX(-50%); border-radius: 99px; background: #000; }
.pz-dev-ipad { width: min(620px, 92%, (100svh - 290px) * .75 + 28px); padding: 14px; border-radius: 30px; background: linear-gradient(145deg, #3a3b42, #121317 40%, #26272d); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 50px 90px -30px rgba(0,0,0,.95); }
.pz-dev-ipad .pz-dev-scr { aspect-ratio: 1350 / 1800; border-radius: 7px; }
.pz-show-ui { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
.pz-show-cap { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; min-height: 1.5em; text-align: center; }
.pz-show-cap.swap { animation: pz-swap .5s var(--pz-ease); }
.pz-show-dots { display: flex; gap: 8px; }
.pz-show-dots button { position: relative; width: 44px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.18); cursor: pointer; overflow: hidden; }
.pz-show-dots button::after { content: ""; position: absolute; inset: 0; background: var(--pz-coral); transform: scaleX(0); transform-origin: left; }
.pz-show-dots button.done::after { transform: none; }
.pz-show-dots button.on::after { animation: pz-tabtime var(--pz-dur, 5s) linear forwards; }
.pz-show.paused .pz-show-dots button.on::after { animation-play-state: paused; }

/* ============================== PRIVACY ============================== */
.pz-private { overflow: hidden; background: radial-gradient(70% 70% at 25% 50%, #2a120e, var(--pz-night) 70%); }
.pz-vault { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; }
.pz-vault-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,122,89,.3); }
.pz-vault-ring.r1 { inset: 12%; border-color: rgba(255,122,89,.55); box-shadow: 0 0 60px rgba(232,67,47,.25), inset 0 0 60px rgba(232,67,47,.2); }
.pz-vault-ring.r2 { inset: 2%; border-style: dashed; animation: pz-rot 40s linear infinite; }
.pz-vault-ring.r3 { inset: -8%; border-color: rgba(255,122,89,.12); animation: pz-pulse 4s ease-out infinite; }
.pz-vault-core { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px; border-radius: 30px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--pz-coral), var(--pz-red) 50%, var(--pz-ember)); box-shadow: 0 30px 60px -20px rgba(232,67,47,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.pz-vault-core svg { width: 54px; height: 54px; }
.pz-vault-doc { position: absolute; left: 50%; top: 50%; width: 34px; height: 44px; margin: -22px -17px; border-radius: 4px; background: #fff;
  box-shadow: 0 8px 16px -6px rgba(0,0,0,.6); animation: pz-orbit 16s linear infinite; }
.pz-vault-doc::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 18px; background: repeating-linear-gradient(#e2e0dc 0 3px, transparent 3px 7px); }
.pz-vault-doc.d2 { animation-delay: -4s; } .pz-vault-doc.d3 { animation-delay: -8s; } .pz-vault-doc.d4 { animation-delay: -12s; }
@keyframes pz-orbit { from { transform: rotate(0deg) translateX(min(130px, 28vw)) rotate(0deg); } to { transform: rotate(360deg) translateX(min(130px, 28vw)) rotate(-360deg); } }
.pz-vault-x { position: absolute; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #ffb9a8; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,122,89,.3); text-decoration: line-through; text-decoration-color: var(--pz-red); text-decoration-thickness: 2px; animation: pz-bounce 5s var(--pz-ease) infinite; }
.pz-vault-x.x1 { left: -6%; top: 10%; --bx: 50px; --by: 40px; }
.pz-vault-x.x2 { right: -6%; top: 30%; --bx: -50px; --by: 20px; animation-delay: -1.6s; }
.pz-vault-x.x3 { left: 6%; bottom: 2%; --bx: 40px; --by: -40px; animation-delay: -3.2s; }
@keyframes pz-bounce { 0%, 100% { transform: none; opacity: .5; } 40% { transform: translate(var(--bx), var(--by)); opacity: 1; } 48% { transform: translate(calc(var(--bx) * .7), calc(var(--by) * .7)); } }
.pz-zero { display: flex; gap: 28px; margin: 30px 0 26px; flex-wrap: wrap; }
.pz-zero div { display: flex; flex-direction: column; }
.pz-zero b { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #ffb199); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-zero span { font-size: 14px; color: #b0aeb8; margin-top: 6px; }

/* ============================== EDITIONS ============================== */
.pz-ed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pz-ed { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 26px; border-radius: 26px; background: #fff; border: 1px solid rgba(22,23,27,.08);
  box-shadow: 0 24px 50px -36px rgba(22,23,27,.5); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s var(--pz-ease), box-shadow .3s;
  overflow: hidden; }
.pz-ed::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(232,67,47,.12), transparent 60%); }
.pz-ed:hover::before { opacity: 1; }
.pz-ed:hover { box-shadow: 0 40px 70px -36px rgba(22,23,27,.6); }
.pz-ed.pro { background: linear-gradient(160deg, #22232b, #111217); border-color: rgba(255,255,255,.06); color: #f4f2ef; --text: #fff; --text-2: #b9b7c0; }
.pz-ed.pro::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,122,89,.22), transparent 60%); }
.pz-ed-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.pz-ed-icon.sq { border-radius: 15px; }
.pz-ed-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pz-red); margin-top: 6px; }
.pz-ed.pro .pz-ed-tag { color: var(--pz-coral); }
.pz-ed h3 { font-size: 19px; margin: 0; }
.pz-ed p { margin: 0 0 8px; color: var(--text-2); font-size: 15px; line-height: 1.5; flex: 1; }
.pz-ed .store-badge { height: 44px; }

/* ============================== FAQ + CTA ============================== */
.pz-faq { background: var(--ps-paper-2); }
.pz-cta { overflow: hidden; padding: 140px 0; isolation: isolate; background: radial-gradient(60% 70% at 50% 50%, #2a120e, var(--pz-night) 75%); }
.pz-cta-icon { position: relative; width: 112px; margin: 0 auto 26px; }
.pz-cta-icon img { position: relative; z-index: 1; border-radius: 26px; box-shadow: 0 30px 60px -20px rgba(232,67,47,.9); animation: pz-hover 5s ease-in-out infinite; }
.pz-cta-icon span { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,67,47,.55), transparent); animation: pz-breathe2 5s ease-in-out infinite; }
@keyframes pz-hover { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes pz-breathe2 { 50% { transform: scale(1.25); opacity: .6; } }
.pz-cta .h1 { color: #fff; font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -.04em; }
.pz-cta .lead { margin: 0 auto; }
.pz-cta-badges { display: flex; justify-content: center; margin-top: 28px; }
.pz-cta-badges .badges { justify-content: center; }
.pz-cta-links { display: flex; gap: 24px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pz-cta-links a { color: #c4c2ca; font-size: 15px; }
.pz-cta-links a:hover { color: #fff; }

/* pause looping CSS animations while a block is off screen (JS toggles .pz-on) */
.pz-b:not(.pz-on) *, .pz-b:not(.pz-on) *::before, .pz-b:not(.pz-on) *::after,
.pz-vault:not(.pz-on) *, .pz-press-core:not(.pz-on) * { animation-play-state: paused !important; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1080px) {
  .pz-callout { display: none; }
  .pz-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .pz-ai-phone { display: none; }
  .pz-srcpages { position: relative; left: auto; top: auto; transform: none; width: min(420px, 100%); height: 290px; margin: -20px auto 0; }
  .pz-tools-row { grid-template-columns: repeat(2, 1fr); }
  .pz-engines { grid-template-columns: 1fr; padding: 28px; }
  .pz-ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-fmt-grid { grid-template-columns: repeat(3, 1fr); }
  .pz-press { grid-template-columns: 1fr; gap: 0; }
  .pz-press-in, .pz-press-out { height: 330px; }
  .pz-press-core { margin: 0 auto; }
}
@media (max-width: 900px) {
  .pz-story-grid { grid-template-columns: 1fr; gap: 0; }
  .pz-story-stick { order: -1; top: 60px; z-index: 3; margin: 0 -24px; padding: 10px 24px 14px; background: linear-gradient(var(--ps-paper) 88%, transparent); }
  .pz-board { height: 400px; padding: 14px; border-radius: 22px; }
  .pz-board-area { left: 14px; right: 14px; top: 74px; bottom: 14px; }
  .pz-step { min-height: 62vh; justify-content: flex-start; padding-top: 24px; }
  .pz-step:first-child { min-height: 50vh; }
  .pz-step:last-child { min-height: 46vh; }
  .pz-step h3 { font-size: 26px; margin-bottom: 8px; }
  .pz-step p { font-size: 17px; }
  .pz-preview { width: 60%; padding: 16px 14px 0; }
  .pz-preview p { font-size: 12.5px; }
  .pz-split { grid-template-columns: 1fr; gap: 40px; }
  .pz-private .pz-vault { order: 2; max-width: 340px; }
  .pz-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "search search" "menu tags" "export sync" "scan scan"; }
  .pz-hot::after { white-space: normal; width: max-content; max-width: 200px; }
}
@media (max-width: 640px) {
  section { padding: 84px 0; }
  .pz-hero { padding-top: 64px; }
  .pz-pill-new { font-size: 12.5px; }
  .pz-q { height: 54px; font-size: 16.5px; padding-left: 18px; }
  .pz-q-res { padding: 6px 10px; font-size: 12px; }
  .pz-stage-wrap { margin-top: 44px; padding-bottom: 110px; }
  .pz-phone.pz-hero-phone { width: 33%; right: -3%; bottom: -28%; }
  .pz-board-meta { display: none; }
  .pz-bento { grid-template-columns: 1fr; grid-template-areas: "search" "menu" "tags" "export" "sync" "scan"; }
  .pz-sc { margin: 16px 16px 10px; padding: 24px 12px 20px; }
  .pz-sc-art { transform: scale(.85); margin: -10px 0 6px; }
  .pz-ed-grid { grid-template-columns: 1fr; }
  .pz-fmt-grid { grid-template-columns: repeat(2, 1fr); }
  .pz-tools-row { grid-template-columns: 1fr; }
  .pz-src { width: 190px; }
  .pz-out-stack { width: 170px; }
  .pz-engines { padding: 20px; margin-top: 60px; }
  .pz-eng-viz { aspect-ratio: auto; height: 400px; }
  .pz-eng-svg { top: 0; }
  .pz-eng-caption { padding: 12px 14px; }
  .pz-eng-cloud { width: 120px; font-size: 12px; }
  .pz-eng-cloud span { width: 70px; height: 44px; }
  .pz-eng-laptop { transform: scale(.8); }
  .pz-zero b { font-size: 44px; }
  .pz-real figcaption { flex-direction: column; align-items: center; gap: 4px; }
  .pz-hot { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; line-height: 26px; }
  .pz-scan { padding: 26px 0; }
  .pz-scan-hud { font-size: 12px; }
  .pz-scan-found { font-size: 13.5px; padding: 10px 12px; }
  .pz-scan-found em { display: none; }
  .pz-board { height: 360px; }
  .pz-sheet .pz-name { display: none; }
  .pz-sheet .pz-rank { font-size: 11px; padding: 5px 7px; left: calc(100% + 8px); }
  .pz-gtabs button { padding: 10px 18px; }
  .pz-dev-mac .pz-dev-scr { border-width: 7px; border-bottom-width: 12px; border-radius: 10px 10px 0 0; }
  .pz-dev-base { height: 10px; }
  .pz-show-dots button { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-hero *, .pz-hero::before, .pz-q::before, .pz-marquee-track, .pz-chat::before, .pz-ai-aurora, .pz-b *, .pz-vault *, .pz-press-core *, .pz-cta-icon *,
  .pz-hot::before, .pz-eng-ring, .pz-eng-path, .pz-q-caret { animation: none !important; }
  .pz-line > span, .pz-hero .lead, .pz-q, .pz-hero-cta, .pz-hero-fine, .pz-pill-new, .pz-stage, .pz-callout { opacity: 1 !important; transform: none !important; }
  .pz-stage { --pz-tilt: 0deg; --pz-sc: 1; --pz-ty: 0px; }
  .pz-mark { background-size: 100% 88%; color: #17181c; transition: none; }
  .pz-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .pz-marquee-track span:nth-child(n+13) { display: none; }
  .pz-mb-pop, .pz-mb-row, .pz-ex-out, .pz-tg-chip { opacity: 1; transform: none; }
  .pz-mb-t::before { content: "lease"; }
  .pz-ex-pg { display: none; }
  .pz-tg-bm { height: 34px; } .pz-tg-note { transform: rotate(5deg); }
  .pz-scanline, .pz-sc-beam, .pz-sn-frame, .pz-sy-pkts i { display: none; }
}

/* FAQ cards */
.pz-faq .faq details { padding: 20px 24px; margin-bottom: 10px; border: 1px solid rgba(22,23,27,.08); border-radius: 16px; transition: box-shadow .3s; }
.pz-faq .faq details[open] { box-shadow: 0 20px 40px -30px rgba(22,23,27,.5); }
.pz-faq .faq details p { margin: 12px 0 0; color: var(--text-2); }