/* Privacy Protect feature-grid illustrations (templates/site/privacy_art/_features.html, builder B).
   Builds on identity-art.css (load it first): .ipa sizing/scaling, the a-rise/a-pop/a-slide/a-grow/a-fade
   entrances (.is-in), loops only while on screen (.is-on), reduced motion = static art.
   Only transform / opacity animate. Pieces are laid out in px at the old PNG's 1x size. */

.ppb .ipa__s { overflow: hidden; }

/* ---------- 7. Scan 200+ Data Broker Sites: Scan Results ---------- */
.ppb--scan { margin-bottom: -24px; }
.ppb-scan__card {
    position: absolute; left: 0; top: 0; width: 458px; height: 380px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(12, 14, 38, .34), rgba(12, 14, 38, 0) 140px), linear-gradient(90deg, #0e1026 0%, #0d1027 9%, #0f1330 17.5%, #101538 26%, #111845 35%, #131c51 44%, #16215f 52%, #17246e 61%, #18287c 70%, #192b83 79%, #1a2d8a 87%, #1a2d8c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ppb-scan__dot { position: absolute; left: 19.5px; top: 22.5px; width: 8px; height: 8px; border-radius: 50%; background: #3a58fb; }
.ipa.is-on .ppb-scan__dot { animation: ipa-blink 2s ease-in-out 1.2s infinite; }
.ppb-scan__t { position: absolute; left: 40px; top: 16px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.ppb-scan__now { position: absolute; left: 300px; width: 138px; top: 20px; text-align: right; font-size: 11px; font-weight: 500; }
.ppb-scan__hr { position: absolute; left: 20px; top: 47px; width: 418px; height: 1px; background: rgba(255, 255, 255, .07); }
.ppb-scan__exp { position: absolute; left: 20px; top: 62px; width: 418px; height: 77.5px; border-radius: 15px; background: rgba(255, 255, 255, .1); }
.ppb-scan__ic { position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; }
.ppb-scan__ic svg { position: absolute; left: 8px; top: 8px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppb-scan__ic::before { content: ''; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #3051fd, #8183ea); }
.ppb-scan__ping { position: absolute; inset: 0; border-radius: 10px; background: rgba(80, 100, 255, .45); opacity: 0; }
.ipa.is-on .ppb-scan__ping { animation: ipa-ping 2.8s ease-out 1.4s infinite; }
.ppb-scan__n { position: absolute; left: 78px; top: 15.5px; font-size: 18.8px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; }
.ppb-scan__n b { font-weight: 700; }
.ppb-scan__d { position: absolute; left: 78px; top: 44px; font-size: 12.6px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ppb-scan__row { position: absolute; left: 20px; width: 418px; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.ppb-scan__row svg { position: absolute; left: 16px; top: 20px; fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ppb-scan__row svg .f { fill: rgba(255, 255, 255, .75); }
.ppb-scan__row span { position: absolute; left: 46px; top: 19.5px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.ppb-scan__row em { position: absolute; left: 337px; top: 15px; width: 67px; height: 27px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-style: normal; font-size: 9.5px; font-weight: 500; line-height: 27px; text-align: center; white-space: nowrap; }
.ppb-scan__rm { position: absolute; left: 391.5px; top: 223.5px; width: 229.5px; height: 88px; }
.ppb-scan__rm > div { width: 100%; height: 100%; border-radius: 22px; background: linear-gradient(90deg, #35459b, #2a3a89); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ppb-scan__bin { position: absolute; left: 15.5px; top: 16px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(90deg, #3051fd, #7d81ec); }
.ppb-scan__bin svg { position: absolute; left: 18px; top: 17px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppb-scan__halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(80, 100, 255, .45); opacity: 0; }
.ipa.is-on .ppb-scan__halo { animation: ipa-ping 2.8s ease-out 2s infinite; }
.ppb-scan__rt { position: absolute; left: 83.5px; top: 15px; font-size: 15.5px; line-height: 19px; letter-spacing: -.03em; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.ppb-scan__rt b { font-weight: 600; color: #fff; letter-spacing: -.01em; }

/* ---------- 8. Automated Removal Requests: Your Data ---------- */
.ppb-data__panel { position: absolute; left: 0; top: 0; width: 352px; height: 230px; border-radius: 25px; background: rgba(255, 255, 255, .03); }
.ppb-data__t { position: absolute; left: 16px; top: 12px; font-size: 17.1px; color: rgba(255, 255, 255, .8); letter-spacing: -.01em; }
.ppb-data__in { position: absolute; left: 16px; top: 45px; width: 320px; height: 190px; border-radius: 15px; background: rgba(255, 255, 255, .03); }
.ppb-data__sh { position: absolute; left: 20px; top: 40px; width: 60px; height: 67px; opacity: .8; }
.ppb-data__l { position: absolute; left: 94px; top: 30.5px; margin: 0; }
.ppb-data__l > div { position: relative; height: 21.7px; font-size: 12.8px; line-height: 21.7px; white-space: nowrap; }
.ppb-data__l dt { display: inline; color: rgba(255, 255, 255, .85); }
.ppb-data__l dd { display: inline; margin: 0 0 0 8px; color: rgba(255, 255, 255, .5); filter: blur(4px); }
@keyframes ppb-shimmer { 50% { opacity: .35; } }
.ipa.is-on .ppb-data__l dd { animation: ppb-shimmer 3.2s ease-in-out calc(var(--i) * .4s + 1.4s) infinite; }
.ppb-data__ok { position: absolute; left: 282.5px; top: 120px; width: 220px; height: 48px; }
.ppb-data__ok > div { width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(90deg, #28378a, #1d2d84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ppb-data__mini { position: absolute; left: 13.5px; top: 12.5px; }
.ppb-data__ok span { position: absolute; left: 47.5px; top: 17px; font-size: 14.9px; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- 9. Continuous Monitoring: chart + Re Check ---------- */
.ppb-mon__card { position: absolute; left: 24px; top: 24px; width: 365px; height: 155px; border-radius: 28px; background: linear-gradient(180deg, rgba(12, 14, 38, .3), rgba(12, 14, 38, 0) 110px, rgba(120, 140, 255, .04)), linear-gradient(90deg, #0f1120 0%, #121630 35%, #161f55 65%, #182679 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.ppb-mon__card > * { margin-left: -24px; margin-top: -24px; }
.ppb-mon__bar { position: absolute; height: 11px; border-radius: 6px; background: rgba(255, 255, 255, .24); }
.ppb-mon__sq { position: absolute; left: 261.5px; width: 29.5px; height: 33.5px; border-radius: 8px; background: rgba(255, 255, 255, .24); }
.ppb-mon__wipe, .ppb-mon__unwipe { position: absolute; left: 24px; top: 24px; width: 240px; height: 190px; }
.ppb-mon__wipe { overflow: hidden; }
.ppb-mon__unwipe { left: 0; top: 0; }
.ipa.is-in .ppb-mon__wipe { animation: ipa-wipe 1.4s cubic-bezier(.4, .1, .2, 1) .3s backwards; }
.ipa.is-in .ppb-mon__unwipe { animation: ipa-unwipe 1.4s cubic-bezier(.4, .1, .2, 1) .3s backwards; }
.ipa.is-armed:not(.is-in) .ppb-mon__wipe { transform: translateX(-100%); }
.ppb-mon__line, .ppb-mon__glow { fill: none; stroke: #3a5dfb; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ppb-mon__glow { stroke-width: 9; opacity: .35; filter: blur(4px); }
.ppb-mon__pt { position: absolute; left: 205.5px; top: 44px; width: 30px; height: 30px; }
.ppb-mon__pt::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3a5dfb; }
.ppb-mon__in { position: absolute; inset: 7.5px; border-radius: 50%; background: #dadada; }
.ppb-mon__ping { position: absolute; inset: 0; border-radius: 50%; background: rgba(58, 93, 251, .5); opacity: 0; }
.ipa.is-on .ppb-mon__ping { animation: ipa-ping 2.4s ease-out 2s infinite; }
.ppb-mon__pop { position: absolute; left: 364px; top: 64px; width: 244px; height: 124px; border-radius: 20px; background: linear-gradient(90deg, #1c2a78, #1a2874); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ppb-mon__re { position: absolute; left: 14px; top: 12px; width: 216px; height: 44px; border-radius: 8px; background: #fff; }
.ppb-mon__re span { position: absolute; left: 96px; top: 15.5px; font-size: 12.3px; color: #111; white-space: nowrap; }
.ppb-mon__spin { position: absolute; left: 66px; top: 10px; width: 24px; height: 24px; }
.ppb-mon__spin circle { fill: none; stroke: #eceef4; stroke-width: 3.75; }
.ppb-mon__spin path { fill: none; stroke: url(#ppbSpin); stroke-width: 3.75; stroke-linecap: round; }
.ipa.is-on .ppb-mon__spin { animation: ipa-spin 1.1s linear infinite; }
.ppb-mon__cx { position: absolute; left: 14px; top: 68px; width: 216px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, .1); }
.ppb-mon__cx svg { position: absolute; left: 82.5px; top: 15.5px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; }
.ppb-mon__cx span { position: absolute; left: 105px; top: 15.5px; font-size: 12.3px; white-space: nowrap; }

/* ---------- 10. Real-Time Status Dashboard: stat cards ---------- */
.ppb-dash__bg { position: absolute; inset: 0; border-radius: 20px; background: rgba(255, 255, 255, .03); }
.ppb-dash__c { position: absolute; width: 199px; height: 86.5px; }
.ppb-dash__c > div { width: 100%; height: 100%; border-radius: 15px; background: radial-gradient(70% 90% at 100% 0%, #222538 0%, rgba(34, 37, 56, 0) 100%), radial-gradient(45% 70% at 0% 0%, #1a1d31 0%, rgba(26, 29, 49, 0) 100%), linear-gradient(180deg, #0f1226 0%, #0b0e23 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ppb-dash__c:last-child > div { background: radial-gradient(45% 70% at 0% 0%, #1a1d31 0%, rgba(26, 29, 49, 0) 100%), linear-gradient(180deg, #0b0e23 0%, #0a0d22 100%); }
.ppb-dash__t { position: absolute; left: 12px; top: 16.5px; font-size: 9.2px; white-space: nowrap; }
.ppb-dash__n { position: absolute; left: 12px; top: 49px; font-size: 12px; font-weight: 600; }
.ppb-dash__d { position: absolute; left: 12px; top: 67.5px; font-size: 6.4px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ppb-dash__ic { position: absolute; left: 165px; top: 11.5px; width: 22px; height: 22px; border-radius: 5px; border: 1px solid; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); display: flex !important; align-items: center; justify-content: center; }
.ppb-dash__ic svg { width: 9.5px; height: 9.5px; fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ppb-dash__ic--g { border-color: rgba(76, 220, 1, .35) rgba(76, 220, 1, .2) rgba(76, 220, 1, .13); }
.ppb-dash__ic--g svg { stroke: #4cdc01; }
.ppb-dash__ic--o { border-color: rgba(241, 133, 59, .35) rgba(241, 133, 59, .24) rgba(241, 133, 59, .13); }
.ppb-dash__ic--o svg { stroke: #f1853b; }
.ppb-dash__ic--r { border-color: rgba(240, 50, 80, .55) rgba(240, 50, 80, .32) rgba(240, 50, 80, .16); }
.ppb-dash__ic--r svg { stroke: #f03c50; }

/* ---------- 11. Comprehensive Data Tracking: success-rate gauge ---------- */
.ppb-rate__card { position: absolute; left: 91px; top: 31px; width: 268px; height: 290px; border-radius: 22px; background: linear-gradient(180deg, rgba(12, 14, 38, .26), rgba(12, 14, 38, 0) 150px, rgba(130, 150, 255, .05)), linear-gradient(110deg, #161625 0%, #191d38 40%, #1d2758 70%, #212f7c 100%); }
.ppb-rate__g { position: absolute; left: 0; top: 0; }
.ppb-rate__track { position: absolute; left: 24px; top: 30px; }
.ppb-rate__track path { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 27; }
.ppb-rate__clip { position: absolute; left: 19px; top: 25px; width: 230px; height: 118px; overflow: hidden; }
.ppb-rate__arc { transform-origin: 115px 115px; }
.ppb-rate__arc path { fill: none; stroke: #eef1ff; stroke-width: 5.5; stroke-linecap: round; }
@keyframes ppb-arc { from { transform: rotate(-135deg); } }
.ipa.is-in .ppb-rate__arc { animation: ppb-arc 1.6s cubic-bezier(.3, .7, .2, 1) .4s backwards; }
.ipa.is-armed:not(.is-in) .ppb-rate__arc { transform: rotate(-135deg); }
.ppb-rate__p { position: absolute; left: 0; right: 0; top: 75.5px; text-align: center; font-size: 34.5px; font-weight: 450; letter-spacing: .01em; }
.ppb-rate__s { position: absolute; left: 0; right: 0; top: 126.3px; text-align: center; font-size: 14.1px; }
.ppb-rate__l { position: absolute; left: 20px; top: 186px; width: 229px; margin: 0; padding: 0; list-style: none; }
.ppb-rate__l li { position: relative; height: 33.5px; padding-left: 24px; font-size: 14px; line-height: 18px; white-space: nowrap; }
.ppb-rate__l b { position: absolute; right: 0; top: 0; font-weight: 400; letter-spacing: -.05em; }
.ppb-rate__ck { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: #3a5cff; display: flex !important; align-items: center; justify-content: center; }
.ppb-rate__ck svg { fill: none; stroke: #101330; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppb-rate__pie { position: absolute; left: 322.5px; top: 105px; width: 90px; height: 90px; }
.ppb-rate__halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .24); }
.ppb-rate__disc { position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(90deg, #2d4ffd, #8083ea); display: flex; align-items: center; justify-content: center; }
.ppb-rate__ico { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ipa.is-on .ppb-rate__halo { animation: ipa-breathe 4s ease-in-out 1.6s infinite; }
@keyframes ppb-tick { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-12deg); } }
.ipa.is-on .ppb-rate__ico { animation: ppb-tick 4s ease-in-out 2s infinite; }