/* Pricing cards: engraved garden that grows with the plan. Each card loops a small gardening
   moment while it is in view. Art coordinates are in the 2400x1792 plate space. */
.pc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1152px;margin:0 auto;padding:48px 16px}
.pc-row > .pc{background:#fffaf8;border:1px solid #e6dcea;border-radius:22px;padding:28px;color:#24215e;font-family:Sohne,Arial,sans-serif}
.pc-art{display:block;width:100%;height:auto;aspect-ratio:2/1;border-radius:10px;background:#fdefee}   /* same slot as .plan-sky-art */
.pc-row .pc-body{padding:18px 0 0}
.pc-row .pc-body h3{margin:0;font-size:22px;font-weight:500}
.pc-row .pc-body p{margin:6px 0 0;font-size:15px;line-height:1.45;color:#4b4880}
@media (max-width:760px){.pc-row{grid-template-columns:1fr}}

/* Shared parts */
.pc-art .can,.pc-art .trowel,.pc-art .marker,.pc-art .door{transform-box:fill-box}
.pc-art .drop{stroke:#3d3a9e;stroke-width:13;stroke-linecap:round;opacity:0;transform-box:fill-box}
.pc-art .wet{fill:#3d3a9e;opacity:0}
.pc-art .dirt{fill:#3d3a9e;opacity:0}
.pc-art .spray{fill:none;stroke:#4058c8;stroke-width:16;stroke-linecap:round;stroke-dasharray:.001 .06;opacity:.7}
.pc-art .head{fill:#e8704a;stroke:#9b3b1f;stroke-width:6}
.pc-art .doorway{fill:#2a2766}
.pc-art .pour{opacity:0}
:is(.pc,.price-card):not(.play) .pc-art *{animation-play-state:paused!important}
@keyframes pc-drop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(85px)}}
.pc-art .drop{animation:pc-drop .45s ease-in infinite}
.pc-art .drop:nth-child(2){animation-delay:.09s}.pc-art .drop:nth-child(3){animation-delay:.18s}.pc-art .drop:nth-child(4){animation-delay:.27s}.pc-art .drop:nth-child(5){animation-delay:.36s}

/* Free (5s loop): the trowel rests against the bed, lifts into it, digs twice between the seedlings,
   kicks up soil, and goes back; the marker wobbles from the digging */
.pc-art .trowel{transform-origin:33% 98%;animation:pc-dig 5s ease-in-out infinite}
@keyframes pc-dig{0%,8%,92%,100%{transform:none}24%{transform:translate(110px,-440px) rotate(-8deg)}
  34%{transform:translate(110px,-445px) rotate(-14deg)}42%{transform:translate(110px,-405px) rotate(6deg)}
  52%{transform:translate(110px,-445px) rotate(-14deg)}60%{transform:translate(110px,-405px) rotate(6deg)}72%{transform:translate(110px,-440px) rotate(-8deg)}}
.pc-art .dirt{animation:pc-dirt 5s ease-out infinite}
@keyframes pc-dirt{0%,41%{opacity:0;transform:none}43%{opacity:.85;transform:none}50%{opacity:0;transform:translate(var(--dx),var(--dy))}
  51%,59%{opacity:0;transform:none}61%{opacity:.85;transform:none}68%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.pc-art .marker{transform-origin:33% 96%;animation:pc-wobble 5s ease-out infinite}
@keyframes pc-wobble{0%,42%,74%,100%{transform:none}46%{transform:rotate(4deg)}52%{transform:rotate(-3deg)}58%{transform:rotate(2.5deg)}64%{transform:rotate(-1.5deg)}69%{transform:rotate(.6deg)}}

/* Power (6.4s loop): water the left bed, then the front bed, put the can back */
.pc-art .can{transform-origin:75% 85%;animation:pc-power 6.4s ease-in-out infinite}
@keyframes pc-power{0%,100%{transform:none}10%{transform:translate(-106px,-157px)}16%,34%{transform:translate(-106px,-157px) rotate(-30deg)}
  40%{transform:translate(-106px,-157px)}52%{transform:translate(194px,83px)}58%,76%{transform:translate(194px,83px) rotate(-30deg)}
  82%{transform:translate(194px,83px)}94%{transform:none}}
.pc-art .p1{animation:pc-pour1 6.4s linear infinite}
@keyframes pc-pour1{0%,17%,34%,100%{opacity:0}19%,32%{opacity:1}}
.pc-art .p2{animation:pc-pour2 6.4s linear infinite}
@keyframes pc-pour2{0%,59%,76%,100%{opacity:0}61%,74%{opacity:1}}
[data-plan=power] .wet{animation:pc-wet-power 6.4s ease-in-out infinite}
[data-plan=power] .wet+.wet{animation-delay:2.7s}
@keyframes pc-wet-power{0%,20%{opacity:0}34%,70%{opacity:.12}95%,100%{opacity:0}}

/* Enterprise (8s loop): sprinklers run the whole time; the shed door opens, a gardener walks out,
   stands a moment, turns around, walks back in, and the door closes */
.pc-art .spray{animation:pc-spray 1.3s linear infinite}
@keyframes pc-spray{to{stroke-dashoffset:-.18}}
[data-plan=team] .wet{opacity:.1}
.pc-art .dstate,.pc-art .walker{opacity:0}
.pc-art .ajar{animation:pc-ajar 8s linear infinite}
@keyframes pc-ajar{0%,7%{opacity:0}8.5%,10%{opacity:1}11.5%,79%{opacity:0}80.5%,82.5%{opacity:1}84%,100%{opacity:0}}
.pc-art .open{animation:pc-open 8s linear infinite}
@keyframes pc-open{0%,9.5%{opacity:0}11%,79.5%{opacity:1}81%,100%{opacity:0}}
.pc-art .walker.front{animation:pc-walk-out 8s linear infinite}
@keyframes pc-walk-out{0%,13%{opacity:0;transform:none}15%{opacity:1;transform:none}36%,48%{opacity:1;transform:translate(-125px,75px)}48.5%,100%{opacity:0;transform:translate(-125px,75px)}}
.pc-art .walker.back{animation:pc-walk-in 8s linear infinite}
@keyframes pc-walk-in{0%,48%{opacity:0;transform:none}48.5%,54%{opacity:1;transform:none}76%{opacity:1;transform:translate(125px,-75px)}78.5%,100%{opacity:0;transform:translate(125px,-75px)}}
/* step bob only while walking: out 15-36%, stand still, turn at 48%, stand, in 54-76% */
.pc-art .walker.front .bob{animation:pc-bob-out 8s linear infinite}
@keyframes pc-bob-out{0%,15%{transform:none}15.0%{transform:translateY(0px)}18.0%{transform:translateY(-5px)}21.0%{transform:translateY(0px)}24.0%{transform:translateY(-5px)}27.0%{transform:translateY(0px)}30.0%{transform:translateY(-5px)}33.0%{transform:translateY(0px)}36.0%{transform:none}100%{transform:none}}
.pc-art .walker.back .bob{animation:pc-bob-in 8s linear infinite}
@keyframes pc-bob-in{0%,54%{transform:none}54.0%{transform:translateY(0px)}57.0%{transform:translateY(-5px)}60.0%{transform:translateY(0px)}63.0%{transform:translateY(-5px)}66.0%{transform:translateY(0px)}69.0%{transform:translateY(-5px)}72.0%{transform:translateY(0px)}75.0%{transform:translateY(-5px)}76.0%{transform:none}100%{transform:none}}

@media (prefers-reduced-motion:reduce){.pc-art *{animation:none!important}.pc-art .pour{opacity:0}}

/* Real pricing cards retain their layout; only the existing illustration slot changes. */
.pricing-redesign .price-card:has(.pc-art){container-type:inline-size}
.pricing-redesign .price-card-heading:has(.pc-art){padding-top:calc(50cqw + 12px)}
.pricing-redesign .plan-sky-art.pc-art{position:absolute;height:auto;aspect-ratio:2/1;border-radius:10px}

.pricing-redesign .plan-sky-art.pc-art{background:transparent;mix-blend-mode:multiply}

/* Free's resting trowel and soil need a little more room below the bed. */
.pricing-redesign .plan-sky-art.pc-art[data-plan=free]{aspect-ratio:7/4}
.pricing-redesign .price-card-free .price-card-heading:has(.pc-art){padding-top:calc(57.142857cqw + 12px)}
@media(min-width:901px){.pricing-redesign .price-card-heading:has(.pc-art){padding-top:calc(57.142857cqw + 12px)}}