/* apps.css (2026-11-13): /linux-web-server-applications/ and /local-network-applications/. Section layout + the extra scene keyframes (prd.css holds the shared ones). */
body.ws-mod .wsm .ap-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
body.ws-mod .wsm .ap-split.rev .ap-scene{order:-1}
body.ws-mod .wsm .ap-copy h2{margin:0 0 14px}
body.ws-mod .wsm .ap-copy p{max-width:none;font-size:1.2rem;line-height:1.55}
body.ws-mod .wsm .ap-scene{align-self:stretch}
body.ws-mod .wsm .ap-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:16px 0 0;padding:0}
body.ws-mod .wsm .ap-chips li{background:#0B1F3A;color:#FFD54A;border:2px solid #F5B800;border-radius:999px;padding:6px 16px;font:700 1.05rem/1.2 'Source Sans 3',Arial,sans-serif}
body.ws-mod .wsm .ap-os{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
body.ws-mod .wsm .ap-os li{display:flex;align-items:center;gap:10px;font:700 1.12rem/1.2 'Source Sans 3',Arial,sans-serif;color:#0B1F3A}
body.ws-mod .wsm .ap-os li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c,#17703d);flex:none}
body.ws-mod .wsm .ap-note{margin-top:12px;font-size:.98rem!important;color:#4a4036}
body.ws-mod .wsm .ap-cta{background:#0B1F3A;color:#fff}
body.ws-mod .wsm .ap-cta h2{color:#fff!important}
body.ws-mod .wsm .ap-cta .seo-inner p{color:#e4ecf8!important;max-width:62ch}
body.ws-mod .wsm .ap-cta .seo-act{margin-top:18px}
/* scene keyframes */
body.ws-mod .wsm .ap-reveal{transform-box:fill-box;transform-origin:right center;animation:apReveal 8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .9s)}
@keyframes apReveal{0%{transform:scaleX(1)}12%,84%{transform:scaleX(0)}100%{transform:scaleX(1)}}
body.ws-mod .wsm .ap-move{animation:apMove 4.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
@keyframes apMove{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}82%{opacity:1;transform:translate(var(--dx),var(--dy))}92%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
body.ws-mod .wsm .ap-hit{animation:apHit 5.4s ease-in infinite;animation-delay:calc(var(--i,0) * 1.2s)}
@keyframes apHit{0%{opacity:0;transform:translateX(0) scale(1)}8%{opacity:1}56%{opacity:1;transform:translateX(var(--dx)) scale(1)}62%,100%{opacity:0;transform:translateX(var(--dx)) scale(1.9)}}
body.ws-mod .wsm .ap-burst{transform-box:fill-box;transform-origin:center;opacity:0;animation:apBurst 5.4s ease-out infinite;animation-delay:calc(var(--i,0) * 1.2s)}
@keyframes apBurst{0%,56%{opacity:0;transform:scale(.4)}60%{opacity:.9}80%,100%{opacity:0;transform:scale(2.2)}}
body.ws-mod .wsm .ap-knob{animation:apKnob 9s ease-in-out infinite}
body.ws-mod .wsm .ap-off1 .ap-knob{animation-name:apKnobOff1}body.ws-mod .wsm .ap-off2 .ap-knob{animation-name:apKnobOff2}
body.ws-mod .wsm .ap-track{animation:apTrack 9s ease-in-out infinite}
body.ws-mod .wsm .ap-off1 .ap-track{animation-name:apTrackOff1}body.ws-mod .wsm .ap-off2 .ap-track{animation-name:apTrackOff2}
@keyframes apKnob{0%,100%{transform:translateX(0)}}
@keyframes apKnobOff1{0%,24%{transform:translateX(0)}30%,84%{transform:translateX(-28px)}90%,100%{transform:translateX(0)}}
@keyframes apKnobOff2{0%,54%{transform:translateX(0)}60%,84%{transform:translateX(-28px)}90%,100%{transform:translateX(0)}}
@keyframes apTrack{0%,100%{opacity:1}}
@keyframes apTrackOff1{0%,24%{opacity:1}30%,84%{opacity:0}90%,100%{opacity:1}}
@keyframes apTrackOff2{0%,54%{opacity:1}60%,84%{opacity:0}90%,100%{opacity:1}}
body.ws-mod .wsm .ap-quote{transform-box:fill-box;transform-origin:left center;animation:apQuote 9s ease-in-out infinite}
@keyframes apQuote{0%,24%{transform:scaleX(1)}30%,54%{transform:scaleX(.8)}60%,84%{transform:scaleX(.62)}90%,100%{transform:scaleX(1)}}
body.ws-mod .wsm .ap-needle{transform-box:view-box;transform-origin:210px 118px;animation:apNeedle 4s ease-in-out infinite}
@keyframes apNeedle{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(58deg)}}
body.ws-mod .wsm .ap-pass{animation:apPass 8s ease-out infinite;animation-delay:calc(var(--i,0) * 1.1s)}
@keyframes apPass{0%,6%{fill:#2c4a78}12%,86%{fill:#17a05a}100%{fill:#2c4a78}}
body.ws-mod .wsm .ap-squash{transform-box:fill-box;transform-origin:center;animation:apSquash 8s ease-in infinite}
@keyframes apSquash{0%,35%{transform:scale(1);opacity:1}45%{transform:scale(1.2,.4);opacity:1}52%,100%{transform:scale(0);opacity:0}}
body.ws-mod .wsm .ap-stamp{transform-box:fill-box;transform-origin:center;animation:apStamp 8s ease-in infinite}
@keyframes apStamp{0%,62%{opacity:0;transform:scale(2.6)}70%{opacity:1;transform:scale(.92)}74%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media(max-width:900px){body.ws-mod .wsm .ap-split{grid-template-columns:1fr}body.ws-mod .wsm .ap-split.rev .ap-scene{order:0}}
@media(prefers-reduced-motion:reduce){
 body.ws-mod .wsm .ap-reveal,body.ws-mod .wsm .ap-move,body.ws-mod .wsm .ap-hit,body.ws-mod .wsm .ap-burst,body.ws-mod .wsm .ap-knob,body.ws-mod .wsm .ap-track,body.ws-mod .wsm .ap-quote,body.ws-mod .wsm .ap-needle,body.ws-mod .wsm .ap-pass,body.ws-mod .wsm .ap-squash,body.ws-mod .wsm .ap-stamp{animation:none}
 body.ws-mod .wsm .ap-reveal{transform:scaleX(0)}body.ws-mod .wsm .ap-stamp{opacity:1}body.ws-mod .wsm .ap-move,body.ws-mod .wsm .ap-hit{opacity:1}
}

body.ws-mod .wsm .seo-hero h1 .ap-sub{display:block;margin-top:.35em;font-size:.4em;font-weight:600;letter-spacing:.02em;color:#FFD54A}

/* ===== 2026-11-13: Linux page only. Gear-cog quote widget (.ap-cogcta) and compact, animated How it works (.ap-lx) ===== */
body.ws-mod .wsm .ap-cogcta{background:radial-gradient(120% 120% at 85% 15%,#8e1414 0,#680000 46%,#3d0000 100%);color:#fff;overflow:hidden}
body.ws-mod .wsm .ap-cogwrap{--k:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(20px,3vw,52px);align-items:center}
body.ws-mod .wsm .ap-cogcopy h2{margin:0 0 12px}
body.ws-mod .wsm .ap-cogscene svg{display:block;width:100%;height:auto;max-height:440px}
body.ws-mod .wsm .ap-cogp{transform-box:fill-box;transform-origin:center;animation:apCog calc(var(--t) * var(--k,1)) linear infinite}
@keyframes apCog{to{transform:rotate(calc(360deg * var(--dir)))}}
body.ws-mod .wsm .ap-need{border:0;margin:18px 0 0;padding:0;min-width:0}
body.ws-mod .wsm .ap-need legend{padding:0;margin-bottom:10px;font:700 1.2rem/1.2 'Source Sans 3',Arial,sans-serif;color:#fff}
body.ws-mod .wsm .ap-chipset{display:flex;flex-wrap:wrap;gap:10px}
body.ws-mod .wsm .ap-opt{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.65);border-radius:999px;padding:9px 18px;font:700 1.05rem/1.2 'Source Sans 3',Arial,sans-serif;cursor:pointer;transition:background .25s,color .25s,transform .25s,border-color .25s}
body.ws-mod .wsm .ap-opt:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
body.ws-mod .wsm .ap-opt[aria-pressed=true]{background:#F5B800;color:#0B1F3A;border-color:#F5B800;transform:translateY(-2px) scale(1.04)}
body.ws-mod .wsm .ap-opt:focus-visible,body.ws-mod .wsm .ap-copy-btn:focus-visible,body.ws-mod .wsm .ap-more-in:focus-visible{outline:3px solid #FFD54A;outline-offset:3px}
body.ws-mod .wsm .ap-more{display:block;margin:16px 0 6px;font:600 1.05rem/1.2 'Source Sans 3',Arial,sans-serif;color:#fff}
body.ws-mod .wsm .ap-more-in{width:100%;box-sizing:border-box;padding:12px 14px;border:2px solid #F5B800;border-radius:10px;background:#fff;color:#0B1F3A;font:400 1.05rem/1.3 'Source Sans 3',Arial,sans-serif}
body.ws-mod .wsm .ap-ticket{margin-top:14px;padding:12px 16px;border:2px dashed rgba(255,213,74,.75);border-radius:12px;background:rgba(0,0,0,.28)}
body.ws-mod .wsm .ap-ticket b{display:block;color:#FFD54A;font:800 1rem/1.2 'Source Sans 3',Arial,sans-serif;margin-bottom:4px}
body.ws-mod .wsm .ap-ticket-txt{display:block;color:#fff;font:400 1.08rem/1.4 'Source Sans 3',Arial,sans-serif;overflow-wrap:anywhere}
body.ws-mod .wsm .ap-cogcta .seo-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
body.ws-mod .wsm .ap-copy-btn{font:inherit;font-weight:800;cursor:pointer}
body.ws-mod .wsm .ap-cogcta a.btn.ap-ghost{background:transparent;color:#fff!important;border:2px solid #fff;text-decoration:none}
body.ws-mod .wsm .ap-cogcta a.btn.ap-ghost:hover{background:#fff;color:#680000!important}
body.ws-mod .wsm .ap-cogcta .seo-tel{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
body.ws-mod .wsm .ap-cta .seo-inner p.ap-copied{margin:10px 0 0;min-height:1.4em;color:#FFD54A!important;font-weight:700}
@media(max-width:900px){body.ws-mod .wsm .ap-cogwrap{grid-template-columns:1fr}body.ws-mod .wsm .ap-cogscene svg{max-height:300px;margin:0 auto}}

/* How it works: tighter rows on the left, compact panel with a live scene on the right */
body.ws-mod .wsm .ap-lx .pg-tablist{gap:3px}
body.ws-mod .wsm .ap-lx .pg-tab{padding:5px 14px}
body.ws-mod .wsm .ap-lx .pg-tab .n{flex-basis:32px;height:32px;font-size:1rem}
body.ws-mod .wsm .ap-lx .pg-tabs .pg-panes{padding:14px 18px!important;min-height:0}
body.ws-mod .wsm .ap-lx .pg-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:0 16px;align-items:center}
body.ws-mod .wsm .ap-lx .pg-pane .ico{width:46px;height:46px;border-radius:12px;margin-bottom:8px}
body.ws-mod .wsm .ap-lx .pg-pane .ico svg{width:26px;height:26px}
body.ws-mod .wsm .ap-lx .pg-pane h3{font-size:1.38rem;margin:0 0 6px}
body.ws-mod .wsm .ap-lx .pg-page .pg-pane p,body.ws-mod .wsm .ap-lx .pg-pane p{font-size:1.08rem;line-height:1.4;margin:0 0 8px}
body.ws-mod .wsm .ap-lx .pg-pane .tag{padding:6px 12px;margin-top:0}
body.ws-mod .wsm .ap-lx .ap-ps svg{display:block;width:100%;height:auto;max-height:175px}
@media(max-width:900px){body.ws-mod .wsm .ap-lx .pg-pane{grid-template-columns:1fr}body.ws-mod .wsm .ap-lx .ap-ps svg{max-width:300px;margin:6px auto 0}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hdot{transform-box:fill-box;animation:apHdot 1s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes apHdot{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body.ws-mod .wsm .ap-lx .ap-hln,body.ws-mod .wsm .ap-lx .ap-hcode,body.ws-mod .wsm .ap-lx .ap-hbar{transform-box:fill-box;transform-origin:left center}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hln{animation:apHln 5s ease-out infinite;animation-delay:calc(var(--i) * .5s + .5s)}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hcode{animation:apHln 6s ease-out infinite;animation-delay:calc(var(--i) * .6s)}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hbar{animation:apHln 6s ease-in-out infinite}
@keyframes apHln{0%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
body.ws-mod .wsm .ap-lx .ap-hpop{transform-box:fill-box;transform-origin:center}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hpop{animation:apHpop 5s ease-out infinite;animation-delay:2s}
@keyframes apHpop{0%{transform:scale(0)}12%{transform:scale(1.25)}20%,90%{transform:scale(1)}100%{transform:scale(0)}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hcur{animation:apHcur .9s steps(2,jump-none) infinite}
@keyframes apHcur{0%{opacity:1}100%{opacity:0}}
body.ws-mod .wsm .ap-lx .ap-hspin{transform-box:fill-box;transform-origin:center}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hspin{animation:apHspin var(--t,6s) linear infinite}
@keyframes apHspin{to{transform:rotate(360deg)}}
body.ws-mod .wsm .ap-lx .ap-hdraw{stroke-dasharray:90}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hdraw{animation:apHdraw 5s ease-out infinite}
@keyframes apHdraw{0%{stroke-dashoffset:90}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}
body.ws-mod .wsm .ap-lx .ap-hokm{stroke-dasharray:20}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hokm{animation:apHokm 5s ease-out infinite;animation-delay:calc(var(--i) * .55s + .6s)}
@keyframes apHokm{0%{stroke-dashoffset:20}20%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hok{animation:apHok 5s ease-out infinite;animation-delay:calc(var(--i) * .55s + .6s)}
@keyframes apHok{0%{fill:#cfc6b6}20%,88%{fill:#17703d}100%{fill:#cfc6b6}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hbug{animation:apHbug 5s ease-in infinite}
@keyframes apHbug{0%{transform:translateX(0);opacity:1}80%{transform:translateX(205px);opacity:1}100%{transform:translateX(215px);opacity:0}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hled{animation:apHled 1.3s ease-in-out infinite;animation-delay:calc(var(--i) * .25s)}
@keyframes apHled{0%,100%{opacity:1}50%{opacity:.2}}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hpkg{animation:apHpkg 4s ease-in infinite}
@keyframes apHpkg{0%{transform:translateY(-22px);opacity:0}15%{opacity:1}60%{transform:translateY(52px);opacity:1}75%,100%{transform:translateY(52px);opacity:0}}
body.ws-mod .wsm .ap-lx .ap-hhand{transform-box:view-box;transform-origin:184px 52px}
body.ws-mod .wsm .ap-lx .pg-pane.on .ap-hhand{animation:apHspin 8s linear infinite}
@media(prefers-reduced-motion:reduce){
 body.ws-mod .wsm .ap-cogp,body.ws-mod .wsm .ap-lx .pg-pane .ap-hdot,body.ws-mod .wsm .ap-lx .pg-pane [class^=ap-h],body.ws-mod .wsm .ap-lx .pg-pane [class*=" ap-h"]{animation:none!important}
 body.ws-mod .wsm .ap-opt{transition:none}
}