body{background:linear-gradient(#dcebf2 0,#eef3e6 260px,var(--paper) 480px)}
.wrap{padding:18px 22px 0;text-align:center}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:700 .98rem Nunito,sans-serif;color:#2f5d73;text-decoration:none;align-self:flex-start}
.back:hover,.back:focus-visible{text-decoration:underline}
.top{display:flex;justify-content:flex-start}
.hello{font:700 1.6rem Caveat,cursive;color:var(--soft);margin-top:4px}
h1{font-size:2.1rem;font-weight:800;line-height:1.1}.h{color:var(--soft);font-weight:600}.h a{color:inherit;text-decoration:none}
.art{width:100%;max-width:300px;margin:6px auto -18px;aspect-ratio:1;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent 100%);mask:radial-gradient(closest-side,#000 70%,transparent 100%)}
.art img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.cardw{position:relative;max-width:340px;margin:0 auto}
.card{position:relative;z-index:2;background:#f3e3c7;border-radius:12px;padding:22px 20px 22px;box-shadow:0 6px 0 #d9c4a0,0 12px 22px rgba(63,55,47,.15);transform:rotate(-.6deg);text-align:left;color:#33291f}
.card h2{font:700 2.2rem/1 Caveat,cursive;text-align:center;color:var(--ink)}
.card .sub{font:700 1.25rem Caveat,cursive;text-align:center;color:var(--soft);margin:2px 0 12px}
.card p{font:500 1.02rem/1.6 Nunito,sans-serif;margin:0 0 12px}
.card ul{list-style:none;margin:4px 0 14px;padding:0}
.card li{position:relative;background:#fff8ea;border:1.5px dashed #cbb48c;border-radius:10px;padding:10px 12px 10px 40px;margin:0 0 10px;font:500 1rem/1.5 Nunito,sans-serif}
.card li b{display:block;font-weight:800;color:#2b221a}
.card li .ic{position:absolute;left:12px;top:10px;font-size:1.05rem}
.card a{color:#2f5d73;font-weight:700}
.now{padding:8px 10px;border-radius:8px;background:#fff8ea;border:1.5px dashed #cbb48c;font:700 .95rem/1.5 Nunito,sans-serif;margin:0 0 14px}
.cta{text-align:center;margin-top:16px}
.dm{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:99px;background:#3f372f;color:#fffaf0!important;text-decoration:none;font:800 1.08rem Nunito,sans-serif;box-shadow:0 5px 0 #241e18,0 10px 18px rgba(63,55,47,.25);transition:transform .15s}
.dm:hover,.dm:focus-visible{transform:translateY(-2px)}.dm:active{transform:translateY(2px);box-shadow:0 2px 0 #241e18}
.dm:focus-visible{outline:3px dashed #8fbfd6;outline-offset:4px}
.dm svg{width:20px;height:20px}
.cta small{display:block;margin-top:10px;font:600 .88rem Nunito,sans-serif;color:#5f5346}
/* Gidget peeking over the card */
.pk{position:absolute;z-index:1;right:16%;top:-44px;width:58px;height:130px;overflow:hidden;pointer-events:none}
.pk i{position:absolute;left:1px;top:0;width:56px;height:62px;background:url(img/v-gidget-peek.webp) 0 0/600% 100% no-repeat;transform:translateY(102%)}
.pk.up i{animation:pkrise 3s cubic-bezier(.3,1.35,.5,1) both,pkface 3s step-end both}
@keyframes pkrise{0%{transform:translateY(102%)}14%{transform:translateY(-3%)}20%{transform:translateY(5%)}26%,84%{transform:translateY(0)}100%{transform:translateY(102%)}}
@keyframes pkface{0%{background-position-x:0%}16%{background-position-x:20%}30%{background-position-x:40%}42%{background-position-x:20%}50%{background-position-x:60%}55%{background-position-x:20%}62%{background-position-x:80%}76%{background-position-x:100%}86%{background-position-x:0%}}
/* ladybug walking along the footer */
.foot{position:relative}
.spr{position:absolute;display:block;background-repeat:no-repeat;pointer-events:none}
.lady{top:12px;left:0;width:21px;height:18px;background-image:url(img/v-lady.webp);background-size:400% 100%;animation:f4 .4s steps(4) infinite,walk 26s linear infinite}
.foot.off .lady{animation-play-state:paused}
@keyframes f4{to{background-position-x:133.333%}}
@keyframes walk{0%{transform:translateX(-30px);opacity:0}3%{opacity:1}62%{transform:translateX(calc(min(430px,100vw) - 34px));opacity:1}65%,100%{transform:translateX(calc(min(430px,100vw) - 20px));opacity:0}}
/* Reduce Motion: Gidget still peeks (small, in place); the ladybug sits still; no button hops */
@media (prefers-reduced-motion:reduce){.lady{animation:none;transform:translateX(14px)}.dm{transition:none}}
/* Halloween: Gidget's peek sheet is taller (witch hat), so the clip box starts higher */
[data-theme=halloween] .cardw .pk{top:-63px;height:149px}
[data-theme=halloween] .cardw .pk i{margin-top:0}

/* hire: price + primary/secondary buttons + smaller bench list */
.card .lead{font:600 1.08rem/1.6 Nunito,sans-serif;text-align:center;margin:0 0 14px}
.price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:4px auto 2px;padding:10px 14px;max-width:220px;background:#fff8ea;border:2px solid #cbb48c;border-radius:14px;transform:rotate(-1deg)}
.price b{font:800 2.3rem/1 Nunito,sans-serif;color:#2b221a}.price span{font:700 1.1rem Nunito,sans-serif;color:#5f5346}
.dm.pay{background:#3f6234;box-shadow:0 5px 0 #29421f,0 10px 18px rgba(63,55,47,.25)}
.dm.pay:active{box-shadow:0 2px 0 #29421f}
.cta.alt{margin-top:18px;padding-top:14px;border-top:1.5px dashed #cbb48c}
.cta .q{font:700 1rem Nunito,sans-serif;margin:0 0 8px;text-align:center}
.dm.ghost{background:transparent;color:#3f372f!important;border:2px solid #3f372f;box-shadow:none;min-height:48px}
.dm.ghost:active{box-shadow:none}
.card .now{margin-top:18px}
.bench h3{font:700 1.6rem/1 Caveat,cursive;text-align:center;color:var(--ink);margin:16px 0 8px}
.bench li{font-size:.92rem;padding:8px 10px 8px 36px}.bench li .ic{left:10px;top:8px;font-size:.95rem}