/* Pixel Petals portfolio additions — layered on existing theme */
/* Clear the absolute .header-area (100px desktop / 80px laptop) on hub pages.
   The theme's `section-space` class has no CSS, so these sections need their own top padding. */
.portfolio-hub-area, .pp-builder-area { padding-top:150px; padding-bottom:120px; }
@media (max-width:991px){ .portfolio-hub-area, .pp-builder-area { padding-top:100px; padding-bottom:80px; } }
@media (max-width:575px){ .portfolio-hub-area, .pp-builder-area { padding-top:80px; padding-bottom:60px; } }
.pp-filters { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin:40px 0 56px; }
.pp-filters .tag { background:none; border:none; cursor:pointer; }
.pp-curated-intro { text-align:center; margin-bottom:32px; }
.pp-curated-title { font-size:28px; }
.pp-empty { text-align:center; opacity:.6; padding:40px 0; }
/* When a case study isn't found, #pp-case is empty so the message must clear the absolute header. */
#pp-case-missing { padding-top:180px; }
@media (max-width:991px){ #pp-case-missing { padding-top:120px; } }
#pp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
@media (max-width:768px){ #pp-grid { grid-template-columns:1fr; } }

/* Case-study blocks */
.pp-block { padding:64px 0; }
.pp-hero { padding-top:140px; }
.pp-eyebrow { letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-bottom:12px; }
.pp-hero-title { font-size:clamp(34px,5vw,64px); line-height:1.05; margin-bottom:16px; }
.pp-hero-sub { font-size:20px; opacity:.8; max-width:720px; margin-bottom:28px; }
.pp-hero-img { margin-top:48px; }
.pp-hero-img img, .pp-arch-img img, .pp-ba-grid img, .pp-gallery-item img { width:100%; height:auto; border-radius:12px; display:block; }
.pp-block-title { font-size:clamp(26px,3vw,40px); margin-bottom:20px; }
.pp-block-body { font-size:18px; line-height:1.7; max-width:760px; }
.pp-metric-row { display:flex; flex-wrap:wrap; gap:48px; }
.pp-metric-num { display:block; font-size:clamp(36px,5vw,64px); font-weight:700; }
.pp-metric-label { opacity:.7; }
.pp-gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pp-ba-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pp-video-frame { position:relative; padding-top:56.25%; }
.pp-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.pp-testimonial blockquote { font-size:clamp(24px,3vw,38px); line-height:1.3; }
.pp-testimonial cite { display:block; margin-top:16px; opacity:.7; font-style:normal; }
.pp-cta { background:#f6f6f6; }
.pp-trust { opacity:.7; margin:12px 0 28px; }
@media (max-width:768px){ .pp-gallery-grid,.pp-ba-grid{ grid-template-columns:1fr; } .pp-metric-row{ gap:28px; } }

/* ============================================================
   Feature-animation cards (reusable template)
   A `.pp-anim-stage` replaces the <img> inside a .work-box .thumb.
   Per project: scene markup + a buildTimeline(); shared wiring =
   initFeatureAnim() in assets/js/pp-feature-anim.js. The default CSS
   state below is a complete static "poster" so the card still reads
   if JS/GSAP never runs (graceful degradation). Spec:
   docs/superpowers/specs/2026-06-30-feature-animation-card-template-design.md
   ============================================================ */
.pp-anim-stage {
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  container-type:inline-size;
  font-family:"Beatrice","Helvetica Neue",Arial,sans-serif;
  color:#f5f3ef; user-select:none;
}
/* The theme's .work-box is display:inline-block and sizes to its <img>'s
   intrinsic width. A stage <div> has none, so the box collapses narrower than
   its grid cell. Force it to fill the cell wherever a stage is used. */
.work-box:has(.pp-anim-stage) { display:block; width:100%; }

/* ---- New Auction App: floodlit bid-war ---- */
.pp-auction { background:#0b1020; }
.pp-auction-spotlight {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(75% 60% at 50% 8%, rgba(244,178,62,.18), transparent 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(45,156,219,.10), transparent 60%);
}
.pp-auction-top {
  position:absolute; top:7%; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 7%; font-size:clamp(10px,2.4cqw,13px); letter-spacing:.14em;
}
.pp-auction-lot { color:#f4b23e; font-weight:700; }
.pp-auction-live { display:inline-flex; align-items:center; gap:6px; opacity:.85; }
.pp-auction-live i {
  width:7px; height:7px; border-radius:50%; background:#e63946;
  box-shadow:0 0 0 0 rgba(230,57,70,.6); animation:pp-livepulse 1.6s infinite;
}
@keyframes pp-livepulse { 70%{ box-shadow:0 0 0 7px rgba(230,57,70,0);} 100%{ box-shadow:0 0 0 0 rgba(230,57,70,0);} }

.pp-auction-row {
  position:absolute; top:50%; left:0; right:0; transform:translateY(-58%);
  display:flex; align-items:center; justify-content:space-between; padding:0 6%; z-index:2;
}
.pp-team {
  font-weight:700; letter-spacing:.04em; font-size:clamp(10px,2.6cqw,14px);
  padding:6px 12px; border-radius:999px; opacity:.45; white-space:nowrap;
  border:1px solid currentColor;
}
.pp-team-a { color:#e63946; }
.pp-team-b { color:#2d9cdb; }

.pp-player { position:relative; width:34%; max-width:150px; aspect-ratio:1; flex:0 0 auto; }
.pp-player .pp-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.pp-ring-track { fill:none; stroke:rgba(245,243,239,.14); stroke-width:5; }
.pp-ring-prog  { fill:none; stroke:#f4b23e; stroke-width:5; stroke-linecap:round; }
.pp-avatar {
  position:absolute; inset:14%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#243049,#141b2e);
  font-weight:800; font-size:clamp(18px,6cqw,34px);
  box-shadow:inset 0 0 0 1px rgba(245,243,239,.08);
}

.pp-auction-price {
  position:absolute; left:0; right:0; bottom:13%; z-index:3; text-align:center;
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  font-size:clamp(22px,8.5cqw,46px); line-height:1; color:#f4b23e;
  text-shadow:0 2px 18px rgba(244,178,62,.25);
}
.pp-auction-price .pp-cur { font-size:.62em; opacity:.85; margin-right:.06em; vertical-align:.04em; }

.pp-bubble {
  position:absolute; left:50%; bottom:30%; z-index:4; pointer-events:none;
  font-weight:700; font-size:clamp(10px,2.8cqw,15px); opacity:0;
  padding:2px 8px; border-radius:999px; background:rgba(11,16,32,.7);
}
.pp-bubble-a { color:#ff6b76; }
.pp-bubble-b { color:#5cc0f5; }

.pp-sold {
  position:absolute; top:46%; left:50%; z-index:5;
  transform:translate(-50%,-50%) rotate(-8deg);
  font-weight:900; letter-spacing:.06em; font-size:clamp(26px,11cqw,60px);
  color:#f4b23e; opacity:0;
  padding:.08em .28em; border:.09em solid #f4b23e; border-radius:.18em;
  text-shadow:0 3px 22px rgba(244,178,62,.4);
}
.pp-confetti { position:absolute; left:50%; bottom:30%; z-index:4; pointer-events:none; }
.pp-confetti i { position:absolute; width:7px; height:10px; border-radius:1px; opacity:0; background:#f4b23e; }
.pp-confetti i:nth-child(2n){ background:#e63946; }
.pp-confetti i:nth-child(3n){ background:#2d9cdb; }
.pp-confetti i:nth-child(5n){ background:#f5f3ef; }

/* Static poster (no-JS / no-GSAP fallback): show the finished sold frame */
.pp-anim-static .pp-sold { opacity:1; }
.pp-anim-static .pp-team-a { opacity:1; }
@media (prefers-reduced-motion: reduce){ .pp-auction-live i { animation:none; } }

/* ---- Masjid Pass: seat allocation + QR check-in ---- */
.pp-masjid-pass {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(42,143,163,.22), transparent 60%),
    linear-gradient(160deg,#0c2228,#06151a);
  display:flex; flex-direction:column; padding:7% 7% 8%;
  perspective:620px;
}
.pp-mp-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 42% at 50% 10%, rgba(191,231,239,.12), transparent 60%);
}
.pp-mp-top {
  position:relative; z-index:3; display:flex; justify-content:space-between;
  align-items:center; font-size:clamp(9px,2.3cqw,12px); letter-spacing:.14em;
}
.pp-mp-qibla { color:#bfe7ef; font-weight:700; }
.pp-mp-engine { display:inline-flex; align-items:center; gap:6px; opacity:.82; }
.pp-mp-engine i {
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pp-mp-pulse 1.5s infinite;
}
@keyframes pp-mp-pulse { 70%{ box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.pp-mp-seats {
  position:relative; z-index:2; flex:1; margin-top:7%;
  display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(3px,1.4cqw,8px);
  align-content:center;
}
.pp-mp-seat {
  aspect-ratio:1; border-radius:24%;
  background:linear-gradient(160deg,#2a8fa3,#164954);
  box-shadow:0 0 6px rgba(42,143,163,.45), inset 0 0 0 1px rgba(191,231,239,.18);
}
.pp-mp-pass {
  position:absolute; left:50%; top:50%; z-index:5;
  width:44%; max-width:150px; transform:translate(-50%,-50%);
  background:linear-gradient(165deg,#0e3039,#08171c);
  border:1px solid rgba(191,231,239,.28); border-radius:12px;
  padding:8% 8% 7%; text-align:center;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);
}
.pp-mp-pass-label { font-size:clamp(7px,2cqw,10px); letter-spacing:.16em; color:#bfe7ef; opacity:.85; }
.pp-mp-qr {
  position:relative; width:100%; aspect-ratio:1; margin:7% 0 0;
  border-radius:6px; overflow:hidden; background:#fff; padding:8%;
}
.pp-mp-qr svg { width:100%; height:100%; display:block; }
.pp-mp-scan {
  position:absolute; left:0; right:0; top:0; height:36%; opacity:0; z-index:2;
  background:linear-gradient(180deg, rgba(52,211,153,0), rgba(52,211,153,.55) 62%, rgba(52,211,153,0));
  box-shadow:0 0 16px rgba(52,211,153,.7);
}
.pp-mp-admit {
  margin-top:7%; display:inline-flex; align-items:center; gap:5px;
  font-size:clamp(8px,2.5cqw,12px); font-weight:800; letter-spacing:.05em; color:#34d399;
}
.pp-mp-admit b {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em; border-radius:50%; background:#34d399; color:#06151a;
  font-size:.85em; line-height:1;
}
.pp-anim-static .pp-mp-scan { opacity:0; }
@media (prefers-reduced-motion: reduce){ .pp-masjid-pass .pp-mp-engine i { animation:none; } }

/* ---- Live Relay: signal-path streaming pipeline ---- */
.pp-live-relay { background:#0b1020; }
.pp-live-relay-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 50%, rgba(45,156,219,.16), transparent 60%),
    radial-gradient(70% 60% at 86% 50%, rgba(244,178,62,.14), transparent 60%);
}
.pp-live-relay-top {
  position:absolute; top:6.5%; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 7%; font-size:clamp(9px,2.4cqw,12px); letter-spacing:.14em;
}
.pp-live-relay-brand { color:#f4b23e; font-weight:700; }
.pp-live-relay-live { display:inline-flex; align-items:center; gap:6px; opacity:.85; }
.pp-live-relay-live i {
  width:7px; height:7px; border-radius:50%; background:#e63946;
  box-shadow:0 0 0 0 rgba(230,57,70,.6); animation:pp-lr-livepulse 1.6s infinite;
}
@keyframes pp-lr-livepulse { 70%{ box-shadow:0 0 0 7px rgba(230,57,70,0);} 100%{ box-shadow:0 0 0 0 rgba(230,57,70,0);} }
.pp-live-relay-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.pp-live-relay-svg path { fill:none; stroke-width:2.5; stroke-linecap:round; }
.pp-live-relay-trunk  { stroke:#2d9cdb; }
.pp-live-relay-branch { stroke:rgba(45,156,219,.75); }
.pp-live-relay-wire   { stroke:rgba(244,178,62,.75); }
.pp-live-relay-dot    { fill:#fff; filter:drop-shadow(0 0 5px #2d9cdb); opacity:0; }
.pp-live-relay-obs {
  position:absolute; left:3.5%; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6cqh;
  padding:2.4cqw 2.8cqw; border-radius:2.6cqw; text-align:center; line-height:1.05;
  background:linear-gradient(165deg,#1b2440,#10172b); border:1px solid rgba(45,156,219,.5);
}
.pp-live-relay-obs-ic { color:#2d9cdb; font-size:clamp(12px,4.2cqw,22px); }
.pp-live-relay-obs-tx { font-size:clamp(8px,2.6cqw,13px); font-weight:700; letter-spacing:.06em; }
.pp-live-relay-obs-tx em { font-style:normal; font-weight:600; opacity:.55; font-size:.78em; letter-spacing:.1em; }
.pp-live-relay-rungs {
  position:absolute; left:40%; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:2.4cqh; align-items:center;
}
.pp-live-relay-rung {
  font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:clamp(9px,2.9cqw,15px); padding:1.1cqh 3cqw; border-radius:999px;
  background:rgba(45,156,219,.12); border:1px solid rgba(244,178,62,.55); color:#f4b23e;
}
.pp-live-relay-fan {
  position:absolute; right:3%; top:46%; transform:translateY(-50%); z-index:3;
  width:25%; display:flex; flex-wrap:wrap; gap:1.8cqw; justify-content:center;
}
.pp-live-relay-av {
  width:6.6cqw; aspect-ratio:1; max-width:34px; border-radius:50%;
  background:linear-gradient(160deg,#2d9cdb,#243049);
  box-shadow:inset 0 0 0 1px rgba(245,243,239,.12);
}
.pp-live-relay-counter {
  position:absolute; left:0; right:0; bottom:6%; z-index:4; text-align:center;
  font-size:clamp(9px,2.7cqw,14px); letter-spacing:.04em; opacity:.85;
}
.pp-live-relay-count {
  color:#f4b23e; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(14px,5cqw,26px); margin-right:.3em;
}
@media (prefers-reduced-motion: reduce){ .pp-live-relay-live i { animation:none; } }

/* ---- WhatsApp Team Inbox: faux two-pane shared inbox ---- */
.pp-whatsapp-inbox { background:#0b141a; }
.pp-wi-app { position:absolute; inset:0; display:flex; font-size:clamp(9px,2.7cqw,15px); }
.pp-wi-list {
  width:36%; flex:0 0 36%; min-width:0; background:#111b21;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; padding:3.2cqw 0;
}
.pp-wi-list-head { display:flex; align-items:center; justify-content:space-between; padding:0 3.4cqw 2.8cqw; }
.pp-wi-list-title { font-weight:700; font-size:.95em; letter-spacing:.02em; }
.pp-wi-online { width:1.8cqw; height:1.8cqw; min-width:6px; min-height:6px; border-radius:50%; background:#25d366; }
.pp-wi-conv { display:flex; align-items:center; gap:2.2cqw; padding:2.2cqw 3.4cqw; }
.pp-wi-conv-active { background:rgba(37,211,102,.08); box-shadow:inset .7cqw 0 0 #25d366; }
.pp-wi-ava {
  flex:0 0 auto; width:8cqw; height:8cqw; min-width:24px; min-height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#2a3942,#1d2a32); color:#aebac1; font-weight:700; font-size:.82em;
}
.pp-wi-ava-2 { background:linear-gradient(160deg,#3a2e42,#241d2a); }
.pp-wi-ava-3 { background:linear-gradient(160deg,#42382a,#2a241d); }
.pp-wi-conv-meta { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.pp-wi-conv-meta b { font-weight:600; font-size:.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-wi-conv-meta i { font-style:normal; opacity:.5; font-size:.8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-wi-badge {
  margin-left:auto; flex:0 0 auto; min-width:4.4cqw; height:4.4cqw; min-height:15px;
  padding:0 1.2cqw; border-radius:999px; background:#25d366; color:#0b141a;
  font-weight:700; font-size:.7em; display:flex; align-items:center; justify-content:center;
}
.pp-wi-thread {
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  background:radial-gradient(120% 80% at 80% 0%, rgba(37,211,102,.06), transparent 55%), #0b141a;
}
.pp-wi-thread-head {
  display:flex; align-items:center; gap:2.2cqw; padding:2.6cqw 3cqw;
  background:#202c33; border-bottom:1px solid rgba(0,0,0,.25);
}
.pp-wi-thread-head .pp-wi-ava { width:6.4cqw; height:6.4cqw; min-width:20px; min-height:20px; font-size:.72em; }
.pp-wi-thread-name { font-weight:600; font-size:.9em; white-space:nowrap; }
.pp-wi-pill {
  margin-left:auto; display:inline-flex; align-items:center; gap:1.2cqw;
  font-size:.66em; letter-spacing:.02em; color:#7fe6a4;
  background:rgba(37,211,102,.12); padding:.9cqw 2cqw; border-radius:999px; white-space:nowrap;
}
.pp-wi-pill i { width:1.6cqw; height:1.6cqw; min-width:5px; min-height:5px; border-radius:50%; background:#25d366; }
.pp-wi-msgs { flex:1 1 auto; display:flex; flex-direction:column; gap:2.4cqw; padding:3.4cqw; justify-content:flex-end; }
.pp-wi-bubble { max-width:78%; padding:1.9cqw 2.6cqw; border-radius:2.4cqw; font-size:.84em; line-height:1.35; word-break:break-word; }
.pp-wi-in { align-self:flex-start; background:#202c33; border-top-left-radius:.5cqw; }
.pp-wi-out { align-self:flex-end; background:#005c4b; border-top-right-radius:.5cqw; display:flex; align-items:flex-end; gap:1.6cqw; }
.pp-wi-text { min-height:1.1em; }
.pp-wi-ticks { flex:0 0 auto; align-self:flex-end; }
.pp-wi-ticks svg {
  width:5cqw; max-width:18px; height:auto; display:block;
  fill:none; stroke:#8aa0aa; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s;
}
.pp-wi-ticks.is-read svg { stroke:#53bdeb; }

/* ---- Next CMS: drag-to-build page builder ---- */
.pp-next-cms{
  background:
    radial-gradient(70% 55% at 16% 0%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(80% 60% at 100% 110%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(160deg,#161237,#0a0a1a);
  padding:6% 6.5% 6.5%; display:flex; flex-direction:column;
}
.pp-nc-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%, rgba(139,92,246,.10), transparent 60%); }
.pp-nc-top{ position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(8px,2.2cqw,12px); letter-spacing:.14em; margin-bottom:5%; }
.pp-nc-brand{ color:#b9a6ff; font-weight:700; }
.pp-nc-status{ display:inline-flex; align-items:center; gap:6px; opacity:.82; }
.pp-nc-status i{ width:7px; height:7px; border-radius:50%; background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pp-nc-pulse 1.7s infinite; }
@keyframes pp-nc-pulse{ 70%{ box-shadow:0 0 0 7px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
.pp-nc-body{ position:relative; z-index:2; flex:1; display:grid;
  grid-template-columns:26% 1fr; gap:5%; min-height:0; }
.pp-nc-palette{ display:flex; flex-direction:column; gap:clamp(5px,2cqw,11px); }
.pp-nc-chip{ display:flex; align-items:center; gap:7px;
  font-size:clamp(7px,2.1cqw,12px); font-weight:600; color:#ece9ff;
  padding:clamp(5px,1.8cqw,10px) clamp(6px,2cqw,11px); border-radius:9px;
  background:linear-gradient(165deg,rgba(139,92,246,.20),rgba(59,130,246,.10));
  border:1px solid rgba(185,166,255,.28); }
.pp-nc-chip .pp-nc-ic{ width:clamp(9px,2.6cqw,15px); aspect-ratio:1; border-radius:4px; flex:0 0 auto;
  background:linear-gradient(160deg,#8b5cf6,#3b82f6); }
.pp-nc-canvas{ position:relative; display:flex; flex-direction:column; gap:clamp(4px,1.6cqw,9px);
  background:rgba(8,8,22,.55); border:1px solid rgba(185,166,255,.16); border-radius:12px;
  padding:clamp(6px,2.2cqw,12px); }
.pp-nc-slot{ position:relative; flex:1; min-height:0; }
.pp-nc-wire{ position:absolute; inset:0; border-radius:8px; opacity:0;
  border:1.5px dashed rgba(185,166,255,.36);
  background:repeating-linear-gradient(135deg, rgba(185,166,255,.05) 0 6px, transparent 6px 12px); }
.pp-nc-rendered{ position:absolute; inset:0; border-radius:8px; overflow:hidden; opacity:1;
  display:flex; align-items:center; gap:6%; padding:0 7%; }
.pp-nc-r-hero{ flex-direction:column; align-items:flex-start; justify-content:center; gap:7%;
  background:linear-gradient(120deg,#8b5cf6,#3b82f6); padding:0 8%; }
.pp-nc-bar{ display:block; height:clamp(4px,1.5cqw,9px); border-radius:999px; background:rgba(255,255,255,.92); }
.pp-nc-bar-lg{ width:62%; }
.pp-nc-bar-md{ width:40%; background:rgba(255,255,255,.6); }
.pp-nc-btn{ width:26%; height:clamp(6px,2cqw,12px); border-radius:999px; background:#0a0a1a; opacity:.85; }
.pp-nc-r-gallery{ background:rgba(59,130,246,.10); justify-content:space-between; gap:4%; }
.pp-nc-tile{ flex:1; height:64%; border-radius:5px; background:linear-gradient(160deg,#3b82f6,#8b5cf6); }
.pp-nc-tile:nth-child(2){ background:linear-gradient(160deg,#10b981,#3b82f6); }
.pp-nc-tile:nth-child(3){ background:linear-gradient(160deg,#8b5cf6,#6366f1); }
.pp-nc-tile:nth-child(4){ background:linear-gradient(160deg,#3b82f6,#10b981); }
.pp-nc-r-notice{ background:rgba(139,92,246,.12); border-left:3px solid #8b5cf6; }
.pp-nc-dot{ width:clamp(9px,3cqw,16px); aspect-ratio:1; border-radius:50%; background:#8b5cf6; flex:0 0 auto; }
.pp-nc-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
.pp-nc-lines i{ height:clamp(3px,1.2cqw,7px); border-radius:999px; background:rgba(236,233,255,.7); }
.pp-nc-lines i:first-child{ width:80%; }
.pp-nc-lines i:last-child{ width:55%; opacity:.6; }
.pp-nc-pill{ width:18%; height:clamp(7px,2.4cqw,14px); border-radius:999px; background:rgba(16,185,129,.85); flex:0 0 auto; }
.pp-nc-ghost{ position:absolute; left:0; top:0; z-index:6; opacity:0; pointer-events:none;
  font-size:clamp(7px,2.1cqw,12px); font-weight:700; color:#fff; white-space:nowrap;
  padding:6px 12px; border-radius:9px;
  background:linear-gradient(160deg,#8b5cf6,#3b82f6);
  box-shadow:0 14px 30px -10px rgba(139,92,246,.75); }
.pp-nc-cursor{ position:absolute; left:0; top:0; z-index:7; width:clamp(14px,4cqw,22px); height:auto;
  fill:#fff; stroke:#0a0a1a; stroke-width:1.4; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); opacity:0; }
@media (prefers-reduced-motion: reduce){ .pp-next-cms .pp-nc-status i { animation:none; } }

/* ---- CFX Approval Workflow: release pipeline → WhatsApp toast ---- */
.pp-cfx-approval { background:#0b1020; }
.pp-cfx-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 6%, rgba(244,178,62,.16), transparent 60%),
    radial-gradient(90% 70% at 82% 124%, rgba(52,211,153,.12), transparent 60%);
}
.pp-cfx-top {
  position:absolute; top:7%; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 8%; font-size:clamp(9px,2.3cqw,12px); letter-spacing:.14em;
}
.pp-cfx-rel { color:#f4b23e; font-weight:700; }
.pp-cfx-live { display:inline-flex; align-items:center; gap:6px; opacity:.85; }
.pp-cfx-live i {
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pp-cfx-pulse 1.8s infinite;
}
@keyframes pp-cfx-pulse { 70%{box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.pp-cfx-pipe { position:absolute; left:0; right:0; top:34%; height:32%; z-index:2; }
.pp-cfx-track {
  position:absolute; left:16%; right:16%; top:50%; height:4px; transform:translateY(-50%);
  background:rgba(245,243,239,.16); border-radius:999px; overflow:hidden;
}
.pp-cfx-fill {
  position:absolute; left:0; top:0; height:100%; width:100%;
  background:linear-gradient(90deg,#f4b23e,#34d399); border-radius:999px;
}
.pp-cfx-step { position:absolute; top:50%; transform:translate(-50%,-50%); }
.pp-cfx-step.s0 { left:16%; }
.pp-cfx-step.s1 { left:50%; }
.pp-cfx-step.s2 { left:84%; }
.pp-cfx-dot {
  width:clamp(15px,4.6cqw,24px); height:clamp(15px,4.6cqw,24px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
  background:#f4b23e; position:relative; z-index:2;
}
.pp-cfx-step.s2 .pp-cfx-dot { background:#34d399; }
.pp-cfx-check { color:#0b1020; font-size:clamp(9px,2.7cqw,14px); font-weight:900; line-height:1; }
.pp-cfx-label {
  position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
  font-size:clamp(8px,2.3cqw,12px); letter-spacing:.05em; white-space:nowrap; opacity:1;
}
.pp-cfx-chip {
  position:absolute; left:84%; top:4%; transform:translateX(-50%); z-index:4;
  background:linear-gradient(160deg,#1b2440,#10172b);
  border:1px solid rgba(244,178,62,.5); border-radius:8px;
  padding:5px 12px; font-weight:800; font-size:clamp(10px,2.8cqw,15px);
  color:#f5f3ef; white-space:nowrap; box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
}
.pp-cfx-chip::after {
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:#10172b;
  border-right:1px solid rgba(244,178,62,.5); border-bottom:1px solid rgba(244,178,62,.5);
}
.pp-cfx-toast {
  position:absolute; left:8%; right:8%; bottom:8%; z-index:5;
  display:flex; align-items:center; gap:10px;
  background:#10301f; border:1px solid rgba(52,211,153,.4);
  border-radius:12px; padding:9px 12px; box-shadow:0 14px 30px -14px rgba(0,0,0,.7);
}
.pp-cfx-wa {
  flex:0 0 auto; width:clamp(20px,7cqw,30px); height:clamp(20px,7cqw,30px);
  border-radius:50%; background:#25d366; color:#0b1020;
  display:flex; align-items:center; justify-content:center; font-size:clamp(11px,4cqw,17px);
}
.pp-cfx-toast-body { line-height:1.25; flex:1 1 auto; text-align:left; }
.pp-cfx-toast-body b { display:block; font-size:clamp(10px,2.8cqw,14px); }
.pp-cfx-toast-body span { font-size:clamp(8px,2.3cqw,11px); opacity:.7; }
.pp-cfx-tick { color:#34d399; font-size:clamp(10px,3cqw,14px); font-weight:700; letter-spacing:-2px; }
@media (prefers-reduced-motion: reduce){ .pp-cfx-approval .pp-cfx-live i { animation:none; } }

/* ---- Pixel Client Portal: morphing adaptive dashboard ---- */
.pp-pixel-client-portal {
  --pcp-accent:#2d9cdb;
  background:
    radial-gradient(70% 50% at 82% 0%, rgba(45,156,219,.10), transparent 60%),
    linear-gradient(160deg,#141b2e,#0b1020);
  display:flex; flex-direction:column; padding:5.5cqw 5.5cqw 6cqw;
}
.pp-pixel-client-portal.pp-pcp-m-graphics { --pcp-accent:#c879e6; }
.pp-pixel-client-portal.pp-pcp-m-video    { --pcp-accent:#f4b23e; }
.pp-pcp-glow {
  position:absolute; inset:0; pointer-events:none; transition:background .5s ease;
  background:radial-gradient(60% 45% at 82% 4%, color-mix(in srgb, var(--pcp-accent) 26%, transparent), transparent 62%);
}
.pp-pcp-top {
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:3cqw;
}
.pp-pcp-brand {
  display:inline-flex; align-items:center; gap:1.8cqw; font-weight:700;
  font-size:clamp(9px,2.7cqw,15px); letter-spacing:.02em; white-space:nowrap;
}
.pp-pcp-brand i {
  width:2.4cqw; height:2.4cqw; min-width:8px; min-height:8px; border-radius:50%;
  background:var(--pcp-accent); box-shadow:0 0 8px var(--pcp-accent);
  transition:background .5s, box-shadow .5s;
}
.pp-pcp-toggle {
  position:relative; display:flex; width:clamp(132px,46cqw,230px);
  background:rgba(245,243,239,.06); border:1px solid rgba(245,243,239,.10);
  border-radius:999px; overflow:hidden;
}
.pp-pcp-thumb {
  position:absolute; top:0; bottom:0; left:0; width:33.333%; border-radius:999px;
  background:rgba(245,243,239,.10);
  background:color-mix(in srgb, var(--pcp-accent) 26%, transparent);
  box-shadow:inset 0 0 0 1px var(--pcp-accent); transition:background .5s, box-shadow .5s;
}
.pp-pcp-seg {
  position:relative; z-index:1; flex:1 1 0; text-align:center; padding:1.6cqw 0;
  font-size:clamp(7px,2cqw,11px); font-weight:700; letter-spacing:.02em;
  white-space:nowrap; opacity:.5; transition:opacity .3s, color .3s;
}
.pp-pcp-seg.is-on { opacity:1; color:#fff; }
.pp-pcp-head {
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:3cqw; margin:5cqw 0 3.2cqw;
}
.pp-pcp-heading { font-weight:800; font-size:clamp(13px,4cqw,22px); letter-spacing:.01em; }
.pp-pcp-gate {
  font-size:clamp(7px,2cqw,11px); font-weight:700; letter-spacing:.06em;
  color:var(--pcp-accent); border:1px solid var(--pcp-accent); border-radius:999px;
  padding:.8cqw 2.4cqw; white-space:nowrap; transition:color .5s, border-color .5s;
}
.pp-pcp-cards {
  position:relative; z-index:2; flex:1 1 auto;
  display:flex; flex-direction:column; gap:2.6cqw;
}
.pp-pcp-card {
  flex:1 1 0; display:flex; align-items:center; gap:3cqw; padding:0 3.4cqw;
  border-radius:3cqw; border:1px solid rgba(245,243,239,.09);
  background:linear-gradient(165deg, rgba(245,243,239,.07), rgba(245,243,239,.03));
}
.pp-pcp-ic {
  width:8cqw; height:8cqw; max-width:42px; max-height:42px; flex:0 0 auto;
  border-radius:2.4cqw; background:var(--pcp-accent);
  box-shadow:0 4px 14px -4px var(--pcp-accent); transition:background .5s, box-shadow .5s;
}
.pp-pcp-lines { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.6cqw; line-height:1.2; }
.pp-pcp-t { font-weight:700; font-size:clamp(10px,3cqw,16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-pcp-m { font-style:normal; opacity:.55; font-size:clamp(8px,2.3cqw,12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-pcp-chip {
  flex:0 0 auto; font-weight:700; font-size:clamp(7px,2.1cqw,11px); letter-spacing:.02em;
  color:var(--pcp-accent); border-radius:999px; padding:1cqw 2.4cqw; white-space:nowrap;
  background:rgba(255,255,255,.05);
  background:color-mix(in srgb, var(--pcp-accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--pcp-accent) 55%, transparent);
  transition:color .5s, background .5s, border-color .5s;
}

/* ---- FMB: community-kitchen ERP — one order, end to end ---- */
.pp-fmb { background:#0c1411; }
.pp-fmb-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 16% 4%, rgba(244,178,62,.16), transparent 60%),
    radial-gradient(95% 70% at 98% 112%, rgba(84,201,138,.13), transparent 60%);
}
.pp-fmb-inner {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:6cqw 6.5cqw;
}
.pp-fmb-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size:2.9cqw; letter-spacing:.04em;
}
.pp-fmb-brand { color:#f4b23e; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.pp-fmb-live { display:inline-flex; align-items:center; gap:1.6cqw; opacity:.85; font-variant-numeric:tabular-nums; }
.pp-fmb-live i {
  width:1.8cqw; height:1.8cqw; border-radius:50%; background:#54c98a;
  box-shadow:0 0 0 0 rgba(84,201,138,.6); animation:pp-fmb-pulse 1.8s infinite;
}
@keyframes pp-fmb-pulse { 70%{ box-shadow:0 0 0 2.4cqw rgba(84,201,138,0);} 100%{ box-shadow:0 0 0 0 rgba(84,201,138,0);} }
.pp-fmb-count { color:#f5f3ef; font-weight:700; }
.pp-fmb-order {
  display:flex; flex-direction:column; gap:.7cqw;
  background:linear-gradient(150deg,#16241d,#10191f);
  border:1px solid rgba(245,243,239,.10); border-left:.9cqw solid #f4b23e;
  border-radius:2.2cqw; padding:2.6cqw 3cqw;
}
.pp-fmb-order-tag { font-size:2.3cqw; letter-spacing:.14em; text-transform:uppercase; color:#f4b23e; }
.pp-fmb-order-id { font-size:3.1cqw; font-weight:700; color:#f5f3ef; }
.pp-fmb-list { display:flex; flex-direction:column; gap:2.2cqw; }
.pp-fmb-li {
  display:grid; grid-template-columns:5cqw 1fr 25cqw 11cqw; align-items:center; gap:2.4cqw;
  font-size:2.9cqw;
}
.pp-fmb-check {
  width:4.6cqw; height:4.6cqw; border-radius:1.2cqw; position:relative; display:inline-block;
  border:.5cqw solid rgba(84,201,138,1); background:#54c98a;
}
.pp-fmb-check i {
  position:absolute; left:33%; top:12%; width:24%; height:52%;
  border:solid #0c1411; border-width:0 .9cqw .9cqw 0; transform:rotate(45deg);
}
.pp-fmb-name { color:#f5f3ef; font-weight:600; }
.pp-fmb-bar { height:2.6cqw; border-radius:999px; background:rgba(245,243,239,.12); overflow:hidden; }
.pp-fmb-fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#54c98a,#3fae74); }
.pp-fmb-delta { font-size:2.5cqw; font-weight:700; color:#f4b23e; text-align:right; font-variant-numeric:tabular-nums; }
.pp-fmb-deliver { position:relative; height:14cqw; }
.pp-fmb-track {
  position:absolute; left:1cqw; right:8cqw; top:50%; height:0;
  border-top:.5cqw dashed rgba(245,243,239,.28);
}
.pp-fmb-van {
  position:absolute; top:50%; right:18cqw; margin-top:-3.5cqw;
  width:7cqw; height:7cqw; border-radius:1.6cqw;
  background:linear-gradient(160deg,#f4b23e,#d8932a);
  box-shadow:0 1.4cqw 2.6cqw -1cqw rgba(244,178,62,.5);
}
.pp-fmb-van::before, .pp-fmb-van::after {
  content:""; position:absolute; left:18%; right:18%; height:.7cqw; border-radius:999px;
  background:rgba(12,20,17,.42);
}
.pp-fmb-van::before { top:34%; }
.pp-fmb-van::after  { top:60%; }
.pp-fmb-done {
  position:absolute; right:10.5cqw; top:50%; margin-top:-2.6cqw;
  width:5.2cqw; height:5.2cqw; border-radius:50%; background:#54c98a;
}
.pp-fmb-done::after {
  content:""; position:absolute; left:34%; top:16%; width:24%; height:52%;
  border:solid #0c1411; border-width:0 .9cqw .9cqw 0; transform:rotate(45deg);
}
.pp-fmb-home {
  position:absolute; right:1cqw; top:50%; margin-top:-3cqw; width:8cqw; height:6cqw;
  border-radius:0 0 1.2cqw 1.2cqw; background:rgba(245,243,239,.16);
}
.pp-fmb-home::before {
  content:""; position:absolute; left:50%; top:-3.2cqw; transform:translateX(-50%);
  width:0; height:0; border-left:4.6cqw solid transparent; border-right:4.6cqw solid transparent;
  border-bottom:3.4cqw solid rgba(245,243,239,.16);
}
.pp-fmb-home::after {
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:2.4cqw; height:3.4cqw; border-radius:.6cqw .6cqw 0 0; background:#0c1411;
}

/* ---- Ashara 1448: Instagram-Stories daily reflections app ---- */
.pp-ashara-1448 {
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(58% 46% at 50% 10%, rgba(47,91,208,.26), transparent 60%),
    radial-gradient(60% 50% at 50% 104%, rgba(228,36,63,.18), transparent 62%),
    #050b1e;
}
.pp-ashara-1448-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 30% at 50% 50%, rgba(47,91,208,.16), transparent 70%);
}
.pp-ashara-1448-phone {
  position:relative; z-index:2; width:38cqw; aspect-ratio:100/188;
  background:#0a1330; border-radius:7.5cqw; border:1.2cqw solid #1b2650;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9), inset 0 0 0 .4cqw rgba(246,244,238,.04);
  overflow:hidden;
}
.pp-ashara-1448-notch {
  position:absolute; top:1.6cqw; left:50%; transform:translateX(-50%); z-index:8;
  width:13cqw; height:1.9cqw; border-radius:999px; background:#05091c;
}
.pp-ashara-1448-screen { position:absolute; inset:0; }
.pp-ashara-1448-bars {
  position:absolute; top:4.4cqw; left:3.6cqw; right:3.6cqw; z-index:6;
  display:flex; gap:1.2cqw;
}
.pp-ashara-1448-bar { flex:1; height:.9cqw; border-radius:999px; background:rgba(246,244,238,.24); overflow:hidden; }
.pp-ashara-1448-bar i { display:block; height:100%; width:100%; border-radius:999px; background:#f6f4ee; transform:scaleX(0); transform-origin:left center; }
.pp-ashara-1448-head {
  position:absolute; top:7.4cqw; left:3.6cqw; right:3.6cqw; z-index:6;
  display:flex; align-items:center; gap:2cqw; font-size:clamp(8px,2.4cqw,12px);
}
.pp-ashara-1448-ava {
  width:5.4cqw; height:5.4cqw; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#2f5bd0,#e4243f); box-shadow:inset 0 0 0 .5cqw #0a1330;
}
.pp-ashara-1448-brand { font-weight:700; letter-spacing:.02em; color:#f6f4ee; }
.pp-ashara-1448-day { margin-left:auto; color:rgba(246,244,238,.6); letter-spacing:.12em; text-transform:uppercase; font-size:.82em; }
.pp-ashara-1448-stack { position:absolute; inset:0; z-index:2; }
.pp-ashara-1448-seg {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:14cqw 8cqw 12cqw;
  opacity:0; visibility:hidden;
}
.pp-ashara-1448-seg--img {
  justify-content:flex-end;
  background:
    radial-gradient(60% 36% at 50% 30%, rgba(255,210,150,.22), transparent 60%),
    radial-gradient(80% 60% at 50% 84%, rgba(47,91,208,.30), transparent 62%),
    linear-gradient(180deg,#10204e,#070e26 78%);
}
.pp-ashara-1448-seg--img::before {
  content:""; position:absolute; left:50%; bottom:14cqw; transform:translateX(-50%);
  width:30cqw; height:34cqw; border-radius:50% 50% 8% 8% / 60% 60% 8% 8%;
  background:linear-gradient(180deg,#1a2c5e,#0c1736); opacity:.9; box-shadow:0 0 18cqw rgba(255,200,140,.18);
}
.pp-ashara-1448-cap {
  position:relative; z-index:2; font-size:clamp(9px,3cqw,15px); font-weight:600; letter-spacing:.04em;
  color:#f6f4ee; background:rgba(7,14,38,.5); padding:1.4cqw 3cqw; border-radius:999px;
}
.pp-ashara-1448-seg--text { background:linear-gradient(180deg,#0c1840,#070e26 72%); }
.pp-ashara-1448-seg--text p {
  font-family:"Cormorant Garamond","Spectral",Georgia,serif;
  font-size:clamp(15px,6.4cqw,34px); line-height:1.22; color:#f6f4ee; margin:0; max-width:88%;
}
.pp-ashara-1448-segrule {
  width:10cqw; height:.7cqw; border-radius:999px; margin-top:4cqw;
  background:linear-gradient(90deg,#2f5bd0 0 33%,#f6f4ee 33% 66%,#e4243f 66% 100%);
}
.pp-ashara-1448-tap {
  position:absolute; right:14%; top:52%; z-index:7; width:10cqw; height:10cqw;
  margin:-5cqw -5cqw 0 0; border-radius:50%; border:.6cqw solid rgba(246,244,238,.8); opacity:0; pointer-events:none;
}
.pp-ashara-1448-hint {
  position:absolute; left:0; right:0; bottom:4.4cqw; z-index:7; text-align:center;
  font-size:clamp(8px,2.3cqw,12px); letter-spacing:.04em; color:rgba(246,244,238,.7); opacity:0;
}
.pp-ashara-1448-bar:nth-child(1) i { transform:scaleX(1); }
.pp-ashara-1448-bar:nth-child(2) i { transform:scaleX(.6); }
.pp-ashara-1448-seg.s2 { opacity:1; visibility:visible; }
.pp-ashara-1448-hint { opacity:1; }

/* ---- HR System: dashboard charts + PDF payslip download ---- */
.pp-hr-system {
  background:
    radial-gradient(70% 55% at 16% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(45,156,219,.14), transparent 60%),
    linear-gradient(165deg,#141b33,#0b1020);
  display:flex; flex-direction:column; padding:6.5% 6.5% 6%;
}
.pp-hr-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 42% at 78% 54%, rgba(244,178,62,.10), transparent 60%);
}
.pp-hr-top {
  position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(9px,2.4cqw,13px); letter-spacing:.14em;
}
.pp-hr-brand { color:#fff; font-weight:700; }
.pp-hr-live { display:inline-flex; align-items:center; gap:6px; color:#34d399; font-weight:700; opacity:.9; }
.pp-hr-live i {
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pp-hr-pulse 1.6s infinite;
}
@keyframes pp-hr-pulse { 70%{ box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.pp-hr-kpis { position:relative; z-index:3; display:flex; gap:7cqw; margin-top:5%; }
.pp-hr-kpi { display:flex; flex-direction:column; }
.pp-hr-kpi-num {
  font-weight:800; font-variant-numeric:tabular-nums; color:#f4b23e; line-height:1;
  font-size:clamp(16px,6cqw,32px);
}
.pp-hr-kpi-num u { text-decoration:none; font-size:.6em; opacity:.8; margin-left:.04em; }
.pp-hr-kpi-lbl { font-size:clamp(8px,2.2cqw,11px); letter-spacing:.08em; text-transform:uppercase; opacity:.55; margin-top:.45em; }
.pp-hr-chart {
  position:relative; z-index:2; flex:1; min-height:0;
  display:flex; align-items:flex-end; gap:3cqw; margin:5% 0;
}
.pp-hr-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.pp-hr-bar i {
  display:block; width:100%; height:var(--h); border-radius:3px 3px 0 0; transform-origin:50% 100%;
  background:linear-gradient(180deg,#f4b23e,#b9772a);
}
.pp-hr-bar:nth-child(4) i { background:linear-gradient(180deg,#ffd277,#f4b23e); box-shadow:0 0 12px rgba(244,178,62,.4); }
.pp-hr-row {
  position:relative; z-index:3; display:flex; align-items:center; gap:2.6cqw;
  padding:2.4cqw 3cqw; border-radius:2.4cqw;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.pp-hr-ava {
  flex:0 0 auto; width:7.5cqw; height:7.5cqw; min-width:22px; min-height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(8px,2.4cqw,12px);
  color:#fff; background:linear-gradient(160deg,#6366f1,#3a2e72);
}
.pp-hr-row-name { font-weight:600; font-size:clamp(9px,2.6cqw,14px); }
.pp-hr-row-dept { font-size:clamp(8px,2.1cqw,11px); opacity:.5; }
.pp-hr-row-cta {
  margin-left:auto; font-size:clamp(8px,2.1cqw,11px); font-weight:700; color:#0b1020;
  background:#f4b23e; padding:1.4cqw 3cqw; border-radius:999px;
}
.pp-hr-slip {
  position:absolute; right:5%; top:50%; z-index:5; transform:translateY(-50%);
  width:46%; max-width:184px;
  background:#f7f6f2; color:#1a2238; border-radius:3cqw;
  padding:4cqw 4cqw 3.4cqw; box-shadow:0 26px 50px -20px rgba(0,0,0,.7);
}
.pp-hr-slip-head { display:flex; align-items:center; gap:1.8cqw; font-size:clamp(8px,2.3cqw,12px); font-weight:700; letter-spacing:.02em; }
.pp-hr-slip-pdf { font-size:.78em; font-weight:800; letter-spacing:.04em; color:#fff; background:#e2473b; padding:.4cqw 1.4cqw; border-radius:1cqw; }
.pp-hr-slip-body { margin-top:3cqw; display:flex; flex-direction:column; gap:1.8cqw; }
.pp-hr-slip-line { height:1.6cqw; min-height:4px; border-radius:999px; background:rgba(26,34,56,.14); }
.pp-hr-slip-line:nth-child(2) { width:80%; }
.pp-hr-slip-line:nth-child(3) { width:62%; }
.pp-hr-slip-amt { margin-top:1.2cqw; font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(12px,4cqw,20px); color:#1a2238; }
.pp-hr-slip-dl { margin-top:3.4cqw; display:flex; align-items:center; gap:2.4cqw; }
.pp-hr-slip-track { position:relative; flex:1; height:2cqw; min-height:6px; border-radius:999px; background:rgba(26,34,56,.12); overflow:hidden; }
.pp-hr-slip-track i { position:absolute; inset:0; border-radius:999px; background:#34a853; }
.pp-hr-slip-check {
  flex:0 0 auto; width:5.4cqw; height:5.4cqw; min-width:16px; min-height:16px; border-radius:50%;
  background:#34a853; display:flex; align-items:center; justify-content:center;
}
.pp-hr-slip-check svg { width:62%; height:62%; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ .pp-hr-system .pp-hr-live i { animation:none; } }

/* ---- EaseZorb: Shopping ad -> PDP -> GMC approved -> sales tick ---- */
.pp-ezorb {
  background:
    radial-gradient(70% 55% at 16% 0%, rgba(244,178,62,.18), transparent 60%),
    radial-gradient(80% 60% at 100% 110%, rgba(52,211,153,.14), transparent 60%),
    linear-gradient(165deg,#141b2e,#0b1020);
}
.pp-ezorb-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 42% at 50% 46%, rgba(244,178,62,.08), transparent 60%); }
.pp-ezorb-top {
  position:absolute; top:5.5%; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 6.5%; font-size:clamp(9px,2.4cqw,13px); letter-spacing:.12em;
}
.pp-ezorb-brand { color:#f4b23e; font-weight:700; }
.pp-ezorb-live { display:inline-flex; align-items:center; gap:6px; opacity:.85; }
.pp-ezorb-live i { width:7px; height:7px; border-radius:50%; background:#e63946;
  box-shadow:0 0 0 0 rgba(230,57,70,.6); animation:pp-ezorb-pulse 1.6s infinite; }
@keyframes pp-ezorb-pulse { 70%{box-shadow:0 0 0 7px rgba(230,57,70,0);} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0);} }
.pp-ezorb-ad {
  position:absolute; top:15%; left:6.5%; width:52%; z-index:3;
  display:flex; gap:3cqw; align-items:center;
  background:linear-gradient(165deg,#1b2440,#10172b);
  border:1px solid rgba(245,243,239,.10); border-radius:2.6cqw;
  padding:2.6cqw; box-shadow:0 14px 30px -18px rgba(0,0,0,.7);
}
.pp-ezorb-ad-tag {
  position:absolute; top:-2.4cqw; left:2.6cqw;
  font-size:clamp(7px,1.9cqw,10px); font-weight:700; letter-spacing:.08em;
  color:#0b1020; background:#f4b23e; padding:.4cqw 1.6cqw; border-radius:999px;
}
.pp-ezorb-ad-thumb, .pp-ezorb-pdp-thumb {
  flex:0 0 auto; border-radius:1.6cqw; position:relative;
  background:linear-gradient(160deg,#ffd277,#f4b23e);
}
.pp-ezorb-ad-thumb { width:13cqw; height:13cqw; }
.pp-ezorb-ad-thumb::before, .pp-ezorb-pdp-thumb::before {
  content:""; position:absolute; left:14%; right:14%; top:20%; height:16%;
  border-radius:999px; background:rgba(11,16,32,.28);
}
.pp-ezorb-ad-thumb::after, .pp-ezorb-pdp-thumb::after {
  content:""; position:absolute; left:14%; right:14%; bottom:18%; height:14%; border-radius:1px;
  background:repeating-linear-gradient(45deg,#0b1020 0 3px,transparent 3px 7px); opacity:.5;
}
.pp-ezorb-ad-info { display:flex; flex-direction:column; gap:.6cqw; min-width:0; }
.pp-ezorb-ad-title { font-size:clamp(8px,2.3cqw,13px); font-weight:600; line-height:1.2; color:#f5f3ef; }
.pp-ezorb-ad-price { font-size:clamp(10px,3cqw,16px); font-weight:800; color:#f4b23e; font-variant-numeric:tabular-nums; }
.pp-ezorb-ad-store { font-size:clamp(7px,1.9cqw,10px); opacity:.5; }
.pp-ezorb-sales {
  position:absolute; top:15%; right:6.5%; width:30%; z-index:3;
  display:flex; flex-direction:column; gap:.4cqw;
  background:linear-gradient(165deg,#13241c,#0e1726);
  border:1px solid rgba(52,211,153,.28); border-radius:2.6cqw; padding:2.6cqw; text-align:left;
}
.pp-ezorb-sales-label { font-size:clamp(7px,1.9cqw,10px); letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
.pp-ezorb-sales-num { font-size:clamp(16px,5.4cqw,30px); font-weight:800; color:#34d399; font-variant-numeric:tabular-nums; line-height:1; }
.pp-ezorb-sales-trend { font-size:clamp(7px,1.9cqw,10px); color:#34d399; opacity:.85; }
.pp-ezorb-pdp {
  position:absolute; left:6.5%; right:6.5%; bottom:6.5%; z-index:3;
  display:flex; gap:4cqw; align-items:center;
  background:linear-gradient(165deg,#1b2440,#10172b);
  border:1px solid rgba(245,243,239,.10); border-radius:3cqw;
  padding:3.4cqw; box-shadow:0 22px 44px -22px rgba(0,0,0,.8);
}
.pp-ezorb-pdp-media { position:relative; flex:0 0 auto; }
.pp-ezorb-pdp-thumb { width:22cqw; height:22cqw; }
.pp-ezorb-badge { position:absolute; left:50%; bottom:-2.2cqw; transform:translateX(-50%); z-index:4; }
.pp-ezorb-badge-x, .pp-ezorb-badge-ok {
  display:inline-flex; align-items:center; justify-content:center; gap:1cqw; white-space:nowrap;
  font-size:clamp(7px,2cqw,11px); font-weight:700; letter-spacing:.02em;
  padding:1.1cqw 2.8cqw; border-radius:999px; backface-visibility:hidden;
}
.pp-ezorb-badge-ok { position:absolute; inset:0; opacity:1; }
.pp-ezorb-badge-x { color:#fff; background:#e5484d; opacity:0; }
.pp-ezorb-badge-ok { color:#06231a; background:#34d399; }
.pp-ezorb-badge-ok b { font-size:1.05em; }
.pp-ezorb-pdp-body { display:flex; flex-direction:column; gap:1cqw; min-width:0; flex:1 1 auto; }
.pp-ezorb-pdp-title { font-size:clamp(11px,3.4cqw,19px); font-weight:800; color:#f5f3ef; line-height:1.15; }
.pp-ezorb-pdp-sub { font-size:clamp(8px,2.2cqw,12px); opacity:.6; }
.pp-ezorb-pdp-price { font-size:clamp(13px,4cqw,24px); font-weight:800; color:#f4b23e; font-variant-numeric:tabular-nums; }
.pp-ezorb-pdp-cart {
  align-self:flex-start; margin-top:.6cqw;
  font-size:clamp(8px,2.3cqw,12px); font-weight:700; letter-spacing:.02em;
  color:#0b1020; background:#f4b23e; padding:1.4cqw 3.4cqw; border-radius:999px;
}
.pp-ezorb-cursor { position:absolute; left:0; top:0; z-index:6; width:clamp(13px,3.8cqw,20px); height:auto;
  fill:#fff; stroke:#0b1020; stroke-width:1.4; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); opacity:0; }
.pp-ezorb-ripple {
  position:absolute; left:0; top:0; z-index:5; width:10cqw; height:10cqw; margin:-5cqw 0 0 -5cqw;
  border-radius:50%; border:2px solid rgba(244,178,62,.7); opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .pp-ezorb .pp-ezorb-live i { animation:none; } }

/* ---- Adv Choice System: beauty recommendation quiz (light/branded) ---- */
.pp-adv-choice {
  background: radial-gradient(80% 60% at 50% 0%, #ffffff 0%, #ffeaf3 45%, #ffd5e6 100%);
  color:#4a1228;
}
.pp-ac-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 35% at 22% 18%, rgba(233,30,99,.16), transparent 60%),
    radial-gradient(45% 40% at 85% 92%, rgba(255,105,180,.18), transparent 60%);
}
.pp-ac-card, .pp-ac-result {
  position:absolute; inset:7cqw; z-index:2;
  background:#fff; border-radius:4cqw; padding:5.2cqw 5.6cqw;
  display:flex; flex-direction:column;
  border:1px solid rgba(233,30,99,.10);
  box-shadow:0 6cqw 14cqw -6cqw rgba(194,24,91,.45);
}
.pp-ac-head { display:flex; justify-content:space-between; align-items:center; }
.pp-ac-badge {
  font-weight:700; letter-spacing:.02em; color:#c2185b; font-size:clamp(8px,2.7cqw,15px);
  background:rgba(233,30,99,.10); padding:1.2cqw 2.6cqw; border-radius:999px;
}
.pp-ac-step { font-size:clamp(8px,2.5cqw,14px); opacity:.55; font-weight:600; }
.pp-ac-bar {
  margin:4.2cqw 0 4.6cqw; height:2.2cqw; min-height:6px; border-radius:999px;
  background:rgba(233,30,99,.14); overflow:hidden;
}
.pp-ac-bar i {
  display:block; height:100%; width:34%; border-radius:999px;
  background:linear-gradient(90deg,#ff69b4,#e91e63);
}
.pp-ac-q { font-weight:800; line-height:1.15; color:#3a0f22; font-size:clamp(13px,4.7cqw,30px); margin-bottom:3.6cqw; }
.pp-ac-options { display:flex; flex-direction:column; gap:2.6cqw; }
.pp-ac-opt {
  display:flex; align-items:center; gap:2.8cqw; width:100%; text-align:left; font:inherit; cursor:default;
  background:#fff; color:#5a213a; font-weight:600; font-size:clamp(11px,3.5cqw,21px);
  border:1px solid rgba(233,30,99,.22); border-radius:2.6cqw; padding:2.8cqw 3.4cqw;
}
.pp-ac-dot {
  flex:0 0 auto; width:3.4cqw; height:3.4cqw; min-width:10px; min-height:10px; border-radius:50%;
  border:1.6px solid rgba(233,30,99,.4);
}
.pp-ac-options .pp-ac-opt:nth-child(2) { background:#e91e63; color:#fff; border-color:transparent; }
.pp-ac-options .pp-ac-opt:nth-child(2) .pp-ac-dot { border-color:#fff; background:#fff; }
.pp-ac-result { opacity:0; transform:translateY(4cqw) scale(.96); justify-content:flex-start; }
.pp-ac-result-head b { display:block; font-weight:800; color:#3a0f22; font-size:clamp(13px,4.4cqw,28px); }
.pp-ac-result-head span { font-size:clamp(8px,2.7cqw,15px); opacity:.6; }
.pp-ac-bundle { display:flex; flex-direction:column; gap:2.4cqw; margin:4cqw 0; }
.pp-ac-prod {
  display:flex; align-items:center; gap:2.8cqw;
  background:#fff5f9; border:1px solid rgba(233,30,99,.12); border-radius:2.4cqw; padding:2.4cqw 3cqw;
}
.pp-ac-sw {
  flex:0 0 auto; width:6cqw; height:6cqw; min-width:18px; min-height:18px; border-radius:1.6cqw;
  background:linear-gradient(140deg,#ffd0e2,#e91e63);
}
.pp-ac-prod:nth-child(2) .pp-ac-sw { background:linear-gradient(140deg,#ffe0b2,#ff7043); }
.pp-ac-prod:nth-child(3) .pp-ac-sw { background:linear-gradient(140deg,#d1c4e9,#7e57c2); }
.pp-ac-pn { flex:1 1 auto; font-weight:600; color:#4a1228; font-size:clamp(9px,3cqw,18px); }
.pp-ac-pp { font-weight:700; color:#c2185b; font-size:clamp(9px,3cqw,18px); font-variant-numeric:tabular-nums; }
.pp-ac-save {
  margin-top:auto; text-align:center; font-weight:800; color:#fff;
  background:linear-gradient(100deg,#ff69b4,#e91e63); border-radius:2.6cqw; padding:2.8cqw; font-size:clamp(11px,3.6cqw,22px);
}
.pp-ac-confetti { position:absolute; left:50%; top:42%; z-index:6; pointer-events:none; }
.pp-ac-confetti i { position:absolute; width:1.8cqw; height:2.6cqw; min-width:6px; min-height:8px; border-radius:1px; opacity:0; background:#e91e63; }
.pp-ac-confetti i:nth-child(2n){ background:#ff69b4; }
.pp-ac-confetti i:nth-child(3n){ background:#ffb300; }
.pp-ac-confetti i:nth-child(5n){ background:#7e57c2; }
.pp-anim-static.pp-adv-choice .pp-ac-card { opacity:.18; }
.pp-anim-static.pp-adv-choice .pp-ac-result { opacity:1; transform:none; }

/* ---- FloatTube: always-on-top floating YouTube window ---- */
.pp-floattube{
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(45,156,219,.20), transparent 55%),
    radial-gradient(120% 90% at 12% 95%, rgba(124,92,246,.16), transparent 55%),
    linear-gradient(160deg,#10182b,#0a0f1d);
}
.pp-ft-wall{ position:absolute; inset:0; pointer-events:none; }
.pp-ft-work{
  position:absolute; left:7%; top:15%; width:62%; height:66%; z-index:1;
  background:linear-gradient(180deg,#1a2336,#131a2b);
  border:1px solid rgba(245,243,239,.08); border-radius:10px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8); overflow:hidden; opacity:.92;
}
.pp-ft-work-bar{
  height:13%; display:flex; align-items:center; gap:2.5cqw; padding:0 4%;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(245,243,239,.06);
}
.pp-ft-work-bar i{ width:1.6cqw; height:1.6cqw; max-width:7px; max-height:7px; border-radius:50%; background:rgba(245,243,239,.25); }
.pp-ft-work-grid{
  position:absolute; inset:15% 0 0 0; padding:5% 5%;
  display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:10%; gap:6% 4%;
}
.pp-ft-work-grid span{ background:rgba(245,243,239,.07); border-radius:3px; }
.pp-ft-work-grid span:nth-child(5n+1){ background:rgba(245,243,239,.13); }
.pp-ft-float{
  position:absolute; top:9%; right:6%; width:47%; z-index:5;
  background:#0b1120; border:1px solid rgba(245,243,239,.14);
  border-radius:12px; overflow:hidden; will-change:transform;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.9), 0 0 0 2px rgba(244,178,62,.55);
}
.pp-ft-titlebar{
  display:flex; align-items:center; gap:2cqw; padding:1.6cqw 2.2cqw;
  background:linear-gradient(180deg,#16203a,#101830);
  border-bottom:1px solid rgba(245,243,239,.07);
}
.pp-ft-grip{ display:grid; grid-template-columns:repeat(2,0.8cqw); gap:0.6cqw; }
.pp-ft-grip i{ width:0.8cqw; height:0.8cqw; max-width:3px; max-height:3px; border-radius:50%; background:rgba(245,243,239,.4); }
.pp-ft-pin{
  font-size:clamp(7px,2cqw,11px); font-weight:700; letter-spacing:.03em; color:#0b1120;
  background:#f4b23e; border-radius:999px; padding:0.6cqw 2.4cqw;
  display:inline-flex; align-items:center; gap:1.2cqw; white-space:nowrap;
}
.pp-ft-pin::before{ content:""; width:1.2cqw; height:1.2cqw; max-width:5px; max-height:5px; border-radius:50%; background:#0b1120; }
.pp-ft-dots{ margin-left:auto; display:flex; gap:1.2cqw; }
.pp-ft-dots i{ width:1.6cqw; height:1.6cqw; max-width:7px; max-height:7px; border-radius:50%; background:rgba(245,243,239,.25); }
.pp-ft-dots i:last-child{ background:#ff5f57; }
.pp-ft-screen{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:radial-gradient(70% 80% at 50% 40%, rgba(45,156,219,.30), transparent 60%), linear-gradient(135deg,#243049,#0b1120);
}
.pp-ft-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid;
  border-width:2cqw 0 2cqw 3.4cqw; border-color:transparent transparent transparent rgba(245,243,239,.92);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.pp-ft-next{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(9px,3cqw,15px); font-weight:800; letter-spacing:.14em; color:#f5f3ef;
  background:rgba(11,17,32,.78); opacity:0;
}
.pp-ft-bar{
  display:flex; align-items:center; gap:2cqw; padding:1.8cqw 2.4cqw;
  background:linear-gradient(180deg,#101830,#0b1120); border-top:1px solid rgba(245,243,239,.07);
}
.pp-ft-meta{ min-width:0; line-height:1.2; }
.pp-ft-title{ display:block; font-size:clamp(8px,2.6cqw,13px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-ft-ch{ font-size:clamp(6px,2cqw,10px); opacity:.55; letter-spacing:.04em; }
.pp-ft-ctrls{ margin-left:auto; display:flex; gap:1.6cqw; }
.pp-ft-ctrl{
  width:clamp(15px,5cqw,24px); aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,243,239,.10); color:#f5f3ef; font-size:clamp(6px,2cqw,10px); line-height:1;
}
.pp-ft-skip{ background:#f4b23e; color:#0b1120; font-weight:800; }
.pp-ft-prog{ height:1cqw; max-height:4px; background:rgba(245,243,239,.12); }
.pp-ft-prog i{ display:block; height:100%; width:62%; background:#f4b23e; transform-origin:left center; }
.pp-ft-toast{
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%); z-index:6;
  font-size:clamp(8px,2.6cqw,13px); font-weight:600; white-space:nowrap;
  background:rgba(11,17,32,.9); color:#f5f3ef; border:1px solid rgba(245,243,239,.14);
  border-radius:999px; padding:1.4cqw 3.2cqw; opacity:0;
}
.pp-ft-toast b{ color:#f4b23e; }

/* ---- Slot Qutbi: lookup -> slot -> pass ---- */
.pp-slot-qutbi {
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(42,143,163,.20), transparent 62%),
    linear-gradient(165deg,#0d1b29,#070f18);
  display:flex; flex-direction:column; padding:6.5% 7% 7%;
}
.pp-sq-top {
  display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(9px,2.3cqw,12px); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:5.5%;
}
.pp-sq-brand { color:#bfe7ef; font-weight:700; }
.pp-sq-step { opacity:.6; }
.pp-sq-lookup { margin-bottom:5%; }
.pp-sq-lookup-label {
  display:block; font-size:clamp(8px,2.1cqw,11px); letter-spacing:.08em;
  text-transform:uppercase; opacity:.55; margin-bottom:2.5%;
}
.pp-sq-field {
  display:flex; align-items:center; gap:2%;
  background:rgba(245,243,239,.06); border:1px solid rgba(191,231,239,.28);
  border-radius:10px; padding:3.4% 4%;
}
.pp-sq-num {
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.12em;
  font-size:clamp(15px,5.4cqw,30px); color:#f5f3ef; min-height:1em;
}
.pp-sq-caret {
  width:2px; height:1.1em; background:#34d399; display:inline-block;
  animation:pp-sq-blink 1s steps(2) infinite;
}
@keyframes pp-sq-blink { 50%{ opacity:0; } }
.pp-sq-slots {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3.5%; margin-bottom:auto;
}
.pp-sq-slot {
  text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(10px,3cqw,16px); color:#cfe8ee;
  background:rgba(245,243,239,.06); border:1px solid rgba(191,231,239,.22);
  border-radius:8px; padding:3.6% 2%;
}
.pp-sq-slot.is-picked { color:#eafff4; background:rgba(52,211,153,.16); border-color:#34d399; }
.pp-sq-pass {
  display:flex; align-items:center; gap:4%; margin-top:6%;
  background:linear-gradient(150deg,#13384a,#0c2230);
  border:1px solid rgba(52,211,153,.4); border-left:4px solid #34d399;
  border-radius:12px; padding:3.6% 4.4%;
}
.pp-sq-pass-tick {
  flex:0 0 auto; width:13%; max-width:42px; aspect-ratio:1; border-radius:50%;
  background:#34d399; display:flex; align-items:center; justify-content:center;
}
.pp-sq-pass-tick svg { width:62%; height:62%; }
.pp-sq-pass-tick path { fill:none; stroke:#06222f; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.pp-sq-pass-body { display:flex; flex-direction:column; line-height:1.25; }
.pp-sq-pass-title { font-weight:700; font-size:clamp(11px,3.1cqw,17px); }
.pp-sq-pass-time { font-size:clamp(9px,2.4cqw,13px); opacity:.7; letter-spacing:.04em; }
@media (prefers-reduced-motion: reduce){ .pp-slot-qutbi .pp-sq-caret { animation:none; } }

/* ---- Zakat / Wajebaat Portal: calculate -> receipt -> logged ---- */
.pp-zakat {
  background:
    radial-gradient(75% 55% at 50% 0%, rgba(52,211,153,.16), transparent 60%),
    radial-gradient(90% 70% at 50% 122%, rgba(244,213,138,.10), transparent 60%),
    linear-gradient(160deg,#06302b,#041c1a);
  display:flex; flex-direction:column; padding:6cqw 6.5cqw 6.5cqw;
}
.pp-zakat-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 40% at 50% 8%, rgba(52,211,153,.10), transparent 60%);
}
.pp-zakat-top {
  position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(9px,2.4cqw,13px); letter-spacing:.14em;
}
.pp-zakat-brand { color:#7fe6b0; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.pp-zakat-year { display:inline-flex; align-items:center; gap:6px; color:#f4d58a; font-weight:700; opacity:.9; }
.pp-zakat-year i {
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pp-zakat-pulse 1.7s infinite;
}
@keyframes pp-zakat-pulse { 70%{ box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.pp-zakat-member {
  position:relative; z-index:2; display:flex; align-items:center; gap:3cqw; margin-top:4.5cqw;
  background:linear-gradient(160deg, rgba(245,243,239,.07), rgba(245,243,239,.03));
  border:1px solid rgba(127,230,176,.20); border-radius:2.6cqw; padding:2.4cqw 3cqw;
}
.pp-zakat-ava {
  flex:0 0 auto; width:9cqw; height:9cqw; max-width:46px; max-height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  font-size:clamp(10px,3cqw,16px); color:#06302b; background:linear-gradient(160deg,#7fe6b0,#34a980);
}
.pp-zakat-who { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.pp-zakat-who b { font-weight:700; font-size:clamp(11px,3.2cqw,17px); color:#f5f3ef; white-space:nowrap; }
.pp-zakat-who span { font-style:normal; opacity:.6; font-size:clamp(8px,2.3cqw,12px); white-space:nowrap; }
.pp-zakat-pick {
  margin-left:auto; flex:0 0 auto; font-size:clamp(7px,2.1cqw,11px); font-weight:700; letter-spacing:.04em;
  color:#7fe6b0; border:1px solid rgba(127,230,176,.5); border-radius:999px; padding:1cqw 2.6cqw; white-space:nowrap;
}
.pp-zakat-calc { position:relative; z-index:2; margin-top:3.8cqw; text-align:center; }
.pp-zakat-calc-lbl { font-size:clamp(8px,2.3cqw,12px); letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.pp-zakat-amount {
  display:block; margin-top:1cqw; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(24px,10cqw,54px); line-height:1; color:#f4d58a; text-shadow:0 2px 18px rgba(244,213,138,.25);
}
.pp-zakat-amount .pp-zakat-cur { font-size:.5em; opacity:.85; margin-right:.06em; vertical-align:.12em; }
.pp-zakat-receipt {
  position:relative; z-index:3; display:flex; align-items:center; gap:3cqw; margin-top:4cqw;
  background:linear-gradient(150deg,#0b3a34,#072420);
  border:1px solid rgba(127,230,176,.22); border-left:.9cqw solid #34d399; border-radius:2.2cqw;
  padding:2.4cqw 3cqw; box-shadow:0 16px 36px -20px rgba(0,0,0,.7);
}
.pp-zakat-rcpt { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.pp-zakat-rcpt > span:first-child { font-size:clamp(7px,2.1cqw,11px); letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.pp-zakat-rno { font-weight:800; font-variant-numeric:tabular-nums; color:#f5f3ef; font-size:clamp(11px,3.2cqw,18px); letter-spacing:.02em; }
.pp-zakat-tick { margin-left:auto; flex:0 0 auto; width:8cqw; height:8cqw; max-width:40px; max-height:40px; }
.pp-zakat-tick svg { width:100%; height:100%; display:block; }
.pp-zakat-tick-ring { fill:none; stroke:#34d399; stroke-width:6; opacity:.9; }
.pp-zakat-tick-path { fill:none; stroke:#34d399; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.pp-zakat-dash {
  position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between;
  gap:3cqw; margin-top:auto; padding-top:3.8cqw;
}
.pp-zakat-dash-lbl { font-size:clamp(8px,2.3cqw,12px); letter-spacing:.04em; opacity:.6; }
.pp-zakat-dash-lbl b { display:block; color:#7fe6b0; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.82em; margin-bottom:.3em; }
.pp-zakat-total { font-weight:800; font-variant-numeric:tabular-nums; color:#f5f3ef; font-size:clamp(14px,5cqw,26px); }
.pp-zakat-total .pp-zakat-cur { font-size:.62em; opacity:.8; margin-right:.06em; }
@media (prefers-reduced-motion: reduce){ .pp-zakat .pp-zakat-year i { animation:none; } }

/* ---- Eye Optical: prescription -> invoice (clinical blue/teal) ---- */
.pp-eye-optical {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(56,189,248,.16), transparent 62%),
    linear-gradient(160deg,#0a2233,#06182a);
  display:flex; flex-direction:column; padding:6% 6.5% 6.5%; gap:3.2cqw;
}
.pp-eye-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 40% at 82% 110%, rgba(45,212,191,.14), transparent 60%); }
.pp-eye-top { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(9px,2.4cqw,12px); letter-spacing:.06em; }
.pp-eye-patient { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#eaf6fb; }
.pp-eye-patient i { width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(150deg,#4cc9f0,#2dd4bf); box-shadow:0 0 0 2px rgba(76,201,240,.25); }
.pp-eye-live { display:inline-flex; align-items:center; gap:6px; letter-spacing:.16em; text-transform:uppercase;
  color:#7dd3fc; opacity:.9; font-weight:700; }
.pp-eye-live i { width:7px; height:7px; border-radius:50%; background:#38bdf8;
  box-shadow:0 0 0 0 rgba(56,189,248,.6); animation:pp-eye-pulse 1.6s infinite; }
@keyframes pp-eye-pulse { 70%{ box-shadow:0 0 0 7px rgba(56,189,248,0);} 100%{ box-shadow:0 0 0 0 rgba(56,189,248,0);} }
.pp-eye-rx { position:relative; z-index:2;
  background:linear-gradient(165deg,#0f2c40,#0a2133);
  border:1px solid rgba(125,211,252,.18); border-radius:12px;
  padding:4.5% 5% 5%; box-shadow:0 14px 30px -20px rgba(0,0,0,.7); }
.pp-eye-rx-title { font-size:clamp(8px,2.1cqw,11px); letter-spacing:.14em; text-transform:uppercase;
  color:#7dd3fc; opacity:.8; margin-bottom:3.5%; }
.pp-eye-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:2.2cqw 2cqw; align-items:center; }
.pp-eye-col { font-size:clamp(8px,2.1cqw,11px); letter-spacing:.08em; color:rgba(234,246,251,.5);
  text-transform:uppercase; text-align:center; }
.pp-eye-col:first-child { text-align:left; }
.pp-eye-eye { font-weight:800; font-size:clamp(11px,3cqw,15px); color:#4cc9f0; }
.pp-eye-val { text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(11px,3cqw,16px); color:#eaf6fb; }
.pp-eye-frame { display:inline-block; margin-top:4%; font-size:clamp(8px,2.1cqw,11px);
  color:#bfe9fb; opacity:.9; background:rgba(76,201,240,.1); border:1px solid rgba(76,201,240,.22);
  padding:3px 9px; border-radius:999px; }
.pp-eye-invoice { position:relative; z-index:2; margin-top:auto;
  background:linear-gradient(165deg,#0e3040,#0a2233);
  border:1px solid rgba(45,212,191,.2); border-radius:12px;
  padding:4.5% 5%; box-shadow:0 16px 34px -20px rgba(0,0,0,.75); }
.pp-eye-inv-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:3.5%; }
.pp-eye-inv-no { font-weight:700; font-size:clamp(9px,2.3cqw,12px); color:#eaf6fb; letter-spacing:.04em; }
.pp-eye-inv-tag { font-size:clamp(7px,2cqw,10px); letter-spacing:.16em; text-transform:uppercase;
  color:#2dd4bf; opacity:.85; }
.pp-eye-inv-lines { display:flex; flex-direction:column; gap:1.5cqw; }
.pp-eye-li { display:flex; justify-content:space-between; align-items:center; font-size:clamp(9px,2.4cqw,12px); }
.pp-eye-li b { font-weight:500; color:rgba(234,246,251,.78); }
.pp-eye-li em { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; color:#eaf6fb; }
.pp-eye-inv-total { display:flex; justify-content:space-between; align-items:center;
  margin-top:3.5%; padding-top:3.5%; border-top:1px solid rgba(125,211,252,.16); }
.pp-eye-inv-total > span:first-child { font-size:clamp(9px,2.4cqw,12px); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(234,246,251,.6); }
.pp-eye-inv-amt { font-weight:800; font-variant-numeric:tabular-nums; color:#5eead4;
  font-size:clamp(15px,5cqw,26px); }
.pp-eye-paid { position:absolute; right:5%; top:-6%; z-index:4;
  display:inline-flex; align-items:center; gap:5px;
  background:#34d399; color:#04231a; font-weight:800; letter-spacing:.08em;
  font-size:clamp(9px,2.3cqw,12px); padding:5px 11px 5px 8px; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(52,211,153,.7); transform:rotate(-6deg); }
.pp-eye-tick { width:clamp(12px,3.2cqw,16px); height:auto; }
.pp-eye-tick path { fill:none; stroke:#04231a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ .pp-eye-live i { animation:none; } }

/* Link builder */
.pp-builder-fields input { width:100%; max-width:360px; padding:12px 16px; border:1px solid #ddd; border-radius:8px; margin-top:8px; }
.pp-builder-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:32px 0; }
.pp-builder-item { display:flex; gap:10px; align-items:center; padding:12px 16px; border:1px solid #eee; border-radius:8px; cursor:pointer; }
.pp-builder-item em { opacity:.5; font-style:normal; }
.pp-builder-output { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pp-builder-output input { flex:1; min-width:280px; padding:12px 16px; border:1px solid #ddd; border-radius:8px; }
@media (max-width:768px){ .pp-builder-list{ grid-template-columns:1fr; } }