/* Illustrative activity only. Device frames, layout and real controls are not
   changed here. Fixed sample values never represent an account or live site. */
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-kind="app"] .demo-activity-view{
  --activity-number:28px;
  --activity-copy:14px;
  --activity-chart:74px;
  gap:10px;
  visibility:hidden;
  font-variant-numeric:tabular-nums;
}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="8"],[data-demo-step="9"]) .demo-client-earnings,
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="10"],[data-demo-step="11"]) .demo-client-protection{visibility:visible}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="8"],[data-demo-step="9"],[data-demo-step="10"],[data-demo-step="11"]) .demo-client-view:not(.demo-activity-view){visibility:hidden}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-amount{display:grid;gap:2px;min-width:0}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-amount>b{color:var(--demo-green);font-size:var(--activity-number);line-height:1.25;font-weight:650}
.shell[data-page="client"] .unified-client-page.download-page :is(.demo-activity-amount>span,.demo-activity-period,.demo-activity-credit,.demo-activity-domain,.demo-protection-counts){font-size:var(--activity-copy);line-height:1.35;overflow-wrap:anywhere}
.shell[data-page="client"] .unified-client-page.download-page :is(.demo-activity-amount>span,.demo-activity-period){color:var(--demo-muted)}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-period{flex:0 1 auto;text-align:right}
.shell[data-page="client"] .unified-client-page.download-page :is(.demo-earnings-chart,.demo-protection-traffic){display:block;flex:0 0 auto;width:100%;height:var(--activity-chart);min-height:0;overflow:visible}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-grid{fill:none;stroke:var(--demo-line);stroke-width:1}
.shell[data-page="client"] .unified-client-page.download-page .demo-earnings-fill{fill:rgba(163,239,121,.09)}
.shell[data-page="client"] .unified-client-page.download-page .demo-earnings-line{fill:none;stroke:var(--demo-green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:0}
.shell[data-page="client"] .unified-client-page.download-page .demo-earnings-point{fill:var(--demo-green)}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-credit{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;padding-top:6px;border-top:1px solid var(--demo-line);color:var(--demo-muted)}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-credit>b{color:var(--demo-green);font-weight:650}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-counter{white-space:nowrap}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-after{display:none}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="9"],[data-demo-step="11"]) .demo-activity-before{display:none}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="9"],[data-demo-step="11"]) .demo-activity-after{display:inline}
.shell[data-page="client"] .unified-client-page.download-page .demo-activity-domain{color:var(--demo-cyan);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.shell[data-page="client"] .unified-client-page.download-page .demo-protection-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.shell[data-page="client"] .unified-client-page.download-page .demo-protection-counts>div{display:grid;gap:4px;min-width:0;color:var(--demo-muted)}
.shell[data-page="client"] .unified-client-page.download-page .demo-protection-counts b{color:var(--demo-green);font-size:calc(var(--activity-number) * .75);font-weight:650}
.shell[data-page="client"] .unified-client-page.download-page .demo-protection-counts>div:last-child b{color:#ffc281}
.shell[data-page="client"] .unified-client-page.download-page :is(.demo-traffic-safe,.demo-traffic-attack){fill:none;stroke:var(--demo-green);stroke-width:3;stroke-dasharray:6 10;stroke-linecap:round}
.shell[data-page="client"] .unified-client-page.download-page :is(.demo-traffic-attack,.demo-traffic-stop){opacity:0}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-attack{stroke:#ffc281}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-gate{fill:var(--demo-panel);stroke:var(--demo-green);stroke-width:2}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-check{fill:none;stroke:var(--demo-green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-stop{fill:var(--demo-panel);stroke:#ffc281;stroke-width:2}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-site{fill:var(--demo-panel);stroke:var(--demo-cyan);stroke-width:1.5}
.shell[data-page="client"] .unified-client-page.download-page .demo-traffic-site-lines{fill:none;stroke:var(--demo-muted);stroke-width:2}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-step="8"] .demo-earnings-line{animation:demo-activity-chart 1.8s ease-out both}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-step="9"] .demo-activity-credit>b{animation:demo-activity-credit .7s ease-out both}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo:is([data-demo-step="10"],[data-demo-step="11"]) .demo-traffic-safe{animation:demo-activity-traffic 1s linear infinite}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-step="11"] :is(.demo-traffic-attack,.demo-traffic-stop){opacity:1}
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-step="11"] .demo-traffic-attack{animation:demo-activity-traffic .65s linear infinite}
@keyframes demo-activity-chart{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes demo-activity-credit{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-activity-traffic{from{stroke-dashoffset:0}to{stroke-dashoffset:-32}}
/* Match the established small laptop illustration; phone text stays14px. */
@container product-demo-scene (max-width:430px){
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-device="desktop"] .demo-activity-view{--activity-number:17px;--activity-copy:10.5px;--activity-chart:18px;gap:3px}
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-device="desktop"] .demo-activity-summary{gap:5px}
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-device="desktop"] .demo-activity-credit{padding-top:2px}
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-device="desktop"] .demo-protection-counts{gap:5px}
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-device="desktop"] .demo-protection-counts>div{gap:1px}
}
/* Keep these guards in the addon too; standalone loading must never animate
   a paused example or override the system reduced-motion preference. */
.shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo[data-demo-paused="true"] .demo-activity-view *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .shell[data-page="client"] .unified-client-page.download-page armillaria-product-demo .demo-activity-view *{animation:none!important;transition:none!important}
}