/* Articulated card guardians: the pose is rendered by guardians.js. */
.plan-card[data-tier]{--guardian-scale:1;--guardian-haze:90,217,236;--guardian-haze-strength:.11;--guardian-cadence:8s}
.plan-card[data-tier="2"]{--guardian-scale:1.035;--guardian-haze-strength:.14;--guardian-cadence:7s}
.plan-card[data-tier="3"]{--guardian-scale:1.07;--guardian-haze-strength:.18;--guardian-cadence:6.5s}
.plan-card[data-tier="4"]{--guardian-scale:1.105;--guardian-haze:255,177,82;--guardian-haze-strength:.21;--guardian-cadence:6s}
.plan-card[data-tier="5"]{--guardian-scale:1.14;--guardian-haze:255,157,63;--guardian-haze-strength:.27;--guardian-cadence:5.5s}
.plan-visual:has(.guardian-stage){height:224px;background:#070e16;perspective:800px}
.guardian-stage{position:absolute;inset:0;overflow:hidden;z-index:0;transform:scale(var(--guardian-scale));transform-origin:50% 52%;transition:filter .6s;contain:paint}
.guardian-stage>.guardian-fallback,.guardian-stage>.guardian-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;max-width:none;pointer-events:none}
.plan-card .guardian-stage>.guardian-fallback,.plan-card:hover .guardian-stage>.guardian-fallback{transform:none;filter:saturate(.9) brightness(.97);transition:opacity .25s}
.guardian-live{opacity:0;filter:saturate(.9) brightness(.97);transition:opacity .25s}
.guardian-stage.guardian-ready>.guardian-fallback{opacity:0}
.guardian-stage.guardian-ready>.guardian-live{opacity:1}
.guardian-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 82%,rgba(var(--guardian-haze),var(--guardian-haze-strength)),transparent 68%);opacity:.7;animation:guardian-power var(--guardian-cadence) ease-in-out infinite;animation-play-state:paused}
.plan-card.guardian-in-view .guardian-atmosphere{animation-play-state:running}
.guardian-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 71%,rgba(var(--guardian-haze),.6) 0 1px,transparent 2px),radial-gradient(circle at 84% 54%,rgba(var(--guardian-haze),.4) 0 1px,transparent 2px),radial-gradient(circle at 72% 83%,rgba(var(--guardian-haze),.4) 0 1px,transparent 2px);opacity:.35;animation:guardian-dust calc(var(--guardian-cadence) + 3s) ease-in-out infinite;animation-play-state:inherit}
.plan-card:hover .guardian-atmosphere,.plan-card:focus-within .guardian-atmosphere{opacity:1}
.plan-card[data-tier="4"] .guardian-live,.plan-card[data-tier="5"] .guardian-live{filter:saturate(1.02) brightness(1.01)}
.plan-visual .plan-index,.plan-visual .plan-rank{pointer-events:none}
.plan-visual .plan-index{z-index:4}.plan-visual .plan-rank{z-index:4}
@keyframes guardian-power{0%,100%{opacity:.58}50%{opacity:.95}}
@keyframes guardian-dust{0%,100%{transform:translateY(4px);opacity:.2}50%{transform:translateY(-8px);opacity:.5}}
@media(min-width:1600px){.plan-visual:has(.guardian-stage){height:252px}}
@media(max-width:1200px) and (min-width:1001px){.plan-visual:has(.guardian-stage){height:204px}}
@media(max-width:1000px) and (min-width:801px){.plan-visual:has(.guardian-stage){height:248px}}
@media(max-width:800px) and (min-width:581px){.plan-visual:has(.guardian-stage){height:210px}}
@media(max-width:580px){.plan-visual:has(.guardian-stage){height:292px}.guardian-stage{transform-origin:50% 58%}.guardian-stage>.guardian-fallback,.guardian-stage>.guardian-live{object-position:50% 6%}}
@media(max-width:380px){.plan-visual:has(.guardian-stage){height:266px}}
@media(prefers-reduced-motion:reduce){.guardian-atmosphere,.guardian-atmosphere::after{animation:none!important}.guardian-stage,.guardian-live,.guardian-fallback{transition:none!important}.guardian-stage.guardian-ready>.guardian-fallback{opacity:1!important}.guardian-stage.guardian-ready>.guardian-live{opacity:0!important}}
.reduced-motion .guardian-atmosphere,.reduced-motion .guardian-atmosphere::after{animation:none!important}

/* The site owner explicitly selected automatic guardian motion for every visitor. */
.guardian-motion-on .plan-card{--guardian-alive-scale:1.003;--guardian-presence-duration:5.2s}
.guardian-motion-on .plan-card[data-tier="2"]{--guardian-alive-scale:1.038;--guardian-presence-duration:5s}
.guardian-motion-on .plan-card[data-tier="3"]{--guardian-alive-scale:1.073;--guardian-presence-duration:4.8s}
.guardian-motion-on .plan-card[data-tier="4"]{--guardian-alive-scale:1.108;--guardian-presence-duration:4.6s}
.guardian-motion-on .plan-card[data-tier="5"]{--guardian-alive-scale:1.143;--guardian-presence-duration:4.4s}
.guardian-motion-on .plan-card .guardian-stage{animation:guardian-presence var(--guardian-presence-duration) ease-in-out infinite!important;animation-play-state:running!important;transform-origin:50% 58%}
.guardian-motion-on .guardian-stage.guardian-ready>.guardian-fallback{opacity:0!important}
.guardian-motion-on .guardian-stage.guardian-ready>.guardian-live{opacity:1!important}
.guardian-motion-on .guardian-atmosphere{animation:guardian-power var(--guardian-cadence) ease-in-out infinite!important;animation-play-state:running!important}
.guardian-motion-on .guardian-atmosphere::after{animation:guardian-dust calc(var(--guardian-cadence) + 3s) ease-in-out infinite!important;animation-play-state:running!important}
.guardian-motion-on.guardian-engine-ready .plan-card:not(.guardian-in-view) .guardian-stage,.guardian-motion-on.guardian-engine-ready .plan-card:not(.guardian-in-view) .guardian-atmosphere,.guardian-motion-on.guardian-engine-ready .plan-card:not(.guardian-in-view) .guardian-atmosphere::after{animation-play-state:paused!important}
@keyframes guardian-presence{0%,100%{transform:scale(var(--guardian-scale))}50%{transform:scale(var(--guardian-alive-scale))}}

/* Each service has its own guardian signal; tier still controls the stance. */
.plan-card[data-service="vps"],.catalog-section[data-service="vps"]{--service-color:#5ed9ec;--service-rgb:94,217,236;--guardian-hue:0deg}
.plan-card[data-service="dedicated"],.catalog-section[data-service="dedicated"]{--service-color:#ffb65a;--service-rgb:255,182,90;--guardian-hue:210deg}
.plan-card[data-service="rdp"],.catalog-section[data-service="rdp"]{--service-color:#b79aff;--service-rgb:183,154,255;--guardian-hue:65deg}
.plan-card[data-service][data-tier]{--guardian-haze:var(--service-rgb)}
.plan-card[data-service]{border-color:rgba(var(--service-rgb),.28);background:linear-gradient(155deg,rgba(var(--service-rgb),.055),transparent 60%),linear-gradient(155deg,#121d28,#0d151e 70%)}
.plan-card[data-service]::after{background:radial-gradient(290px circle at var(--pointer-x,50%) var(--pointer-y,0%),rgba(var(--service-rgb),.075),transparent 65%)}
.plan-card[data-service]:hover,.plan-card[data-service]:focus-within{border-color:rgba(var(--service-rgb),.7);box-shadow:0 15px 40px #0005,0 0 25px rgba(var(--service-rgb),.075)}
.plan-card[data-service].featured{border-color:rgba(var(--service-rgb),.65);background:linear-gradient(155deg,rgba(var(--service-rgb),.095),transparent 65%),linear-gradient(155deg,#152330,#0d1822 70%)}
.plan-card[data-service].featured::before{background:var(--service-color);color:#071017}
.plan-card[data-service] .plan-visual{border-bottom-color:rgba(var(--service-rgb),.25)}
.plan-card[data-service] .plan-visual::before{background:linear-gradient(#07121de6,transparent 35%,transparent 65%,#111c28),linear-gradient(90deg,rgba(var(--service-rgb),.035),transparent 45%,rgba(var(--service-rgb),.035))}
/* The same filter covers the static image and both animation renderers. Grey
   fur and metal retain their neutral values while the coloured light changes. */
.plan-card[data-service] .guardian-stage>.guardian-fallback,.plan-card[data-service]:hover .guardian-stage>.guardian-fallback,.plan-card[data-service] .guardian-stage>.guardian-live{filter:hue-rotate(var(--guardian-hue)) saturate(1.04) brightness(1)}
.plan-card[data-service] .plan-rank,.plan-card[data-service] .plan-index span,.plan-card[data-service] .plan-index b{color:var(--service-color)}
.plan-card[data-service] .plan-specs .icon{color:rgba(var(--service-rgb),.7)}
.plan-card[data-service] .button-outline{color:var(--service-color);border-color:rgba(var(--service-rgb),.4);background:rgba(var(--service-rgb),.035)}
.plan-card[data-service] .button-outline:hover{border-color:var(--service-color);background:rgba(var(--service-rgb),.1)}
.plan-card[data-service].featured .button{background:var(--service-color);border-color:var(--service-color);color:#071017}
.plan-card[data-service] .button:focus-visible{outline-color:var(--service-color)}
.catalog-section[data-service] .eyebrow,.catalog-section[data-service] .catalog-meta span:first-child,.catalog-section[data-service] .plan-includes .icon,.catalog-section[data-service] .text-link{color:var(--service-color)}
.catalog-section[data-service] .eyebrow::before{background:var(--service-color);box-shadow:0 0 12px rgba(var(--service-rgb),.3)}
.catalog-section[data-service] .catalog-meta,.catalog-section[data-service] .plan-includes{border-color:rgba(var(--service-rgb),.18)}
.plan-tabs [data-plan-tab="vps"]{--service-color:#5ed9ec}
.plan-tabs [data-plan-tab="dedicated"]{--service-color:#ffb65a}
.plan-tabs [data-plan-tab="rdp"]{--service-color:#b79aff}
.plan-tabs [data-plan-tab]:hover{color:var(--service-color)}
.plan-tabs [data-plan-tab][aria-selected="true"]{color:#071017;background:var(--service-color)}