/* Fun 3D layer (visual only). Loaded after style.css. Motion is disabled under prefers-reduced-motion. */
:root{--berry:#B8336A;--mint:#2E8B6E;--sun:#FFD23F;--sky:#5AA9E6;--tomato:#C63A16;--tomato-d:#9E2C0D;
--sh:0 1px 0 rgba(42,28,20,.06),0 4px 8px rgba(42,28,20,.06),0 14px 28px -8px rgba(42,28,20,.18);
--sh2:0 2px 0 rgba(42,28,20,.06),0 10px 20px rgba(42,28,20,.10),0 30px 60px -12px rgba(120,40,20,.30);--r:22px}
body{background:
 radial-gradient(circle at 1px 1px,rgba(42,28,20,.07) 1px,transparent 1.5px) 0 0/22px 22px,
 linear-gradient(180deg,#FFF6EA 0,#FFF0F3 55%,#F1FAF5 100%) fixed}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;border-radius:9px;background:var(--sun);opacity:.7;z-index:-1;transform:skewX(-12deg)}
.sec-head h2{z-index:0}
.eyebrow{color:var(--berry)}
/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:
 radial-gradient(700px 420px at 88% 0%,#FFC9A8 0,transparent 65%),
 radial-gradient(600px 380px at 0% 100%,#FFE48A 0,transparent 65%),
 radial-gradient(500px 300px at 55% 60%,#FFD6E4 0,transparent 70%),#FFF4E6}
.hero h1{font-weight:800;text-shadow:0 1px 0 #fff,0 3px 0 rgba(198,58,22,.12)}
.hero h1 em{color:var(--tomato);font-style:italic;background:linear-gradient(transparent 62%,rgba(255,210,63,.75) 62%);padding:0 .08em}
.scene{position:absolute;inset:0;z-index:-1;perspective:900px;pointer-events:none}
.scene-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--py,0)*6deg)) rotateY(calc(var(--px,0)*-8deg));transition:transform .4s ease-out}
.shape{position:absolute;filter:drop-shadow(0 18px 18px rgba(80,30,10,.22));transform-style:preserve-3d}
.shape svg{display:block;width:100%;height:auto}
.s1{width:120px;top:8%;left:46%;transform:translateZ(80px) rotate(-14deg);animation:bob 7s ease-in-out infinite}
.s2{width:92px;bottom:10%;left:7%;transform:translateZ(0) rotate(18deg);animation:bob 8s ease-in-out -2s infinite}
.s3{width:150px;bottom:-30px;right:34%;transform:translateZ(-60px) rotate(-8deg);opacity:.9;animation:bob 9s ease-in-out -4s infinite}
.s4{width:70px;top:12%;right:9%;transform:translateZ(10px) rotate(22deg);animation:bob 6s ease-in-out -1s infinite}
.s5{width:54px;top:6%;left:3%;transform:translateZ(20px);opacity:.85;animation:bob 10s ease-in-out -3s infinite}
@keyframes bob{50%{translate:0 -14px;rotate:6deg}}
/* hero steal card: real 3D */
.hero-in{perspective:1100px}
.steal{transform:rotateY(-10deg) rotateX(4deg) rotate(1deg);transform-style:preserve-3d;border:3px solid #fff;box-shadow:var(--sh2),14px 14px 0 -2px var(--sun)}
.steal:hover{transform:rotateY(0) rotateX(0) translateY(-6px)}
.ribbon{background:var(--sun);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg) translateZ(40px)}
/* cards with depth + tilt */
.grid.deals,.grid.posts{perspective:1200px}
.card,.pcard{border:2px solid #F3E2D2;border-radius:var(--r);box-shadow:var(--sh);transform-style:preserve-3d;
 transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);transition:transform .25s cubic-bezier(.2,.8,.2,1.2),box-shadow .25s,border-color .25s;will-change:transform}
.card:hover,.pcard:hover,.card:focus-within,.pcard:focus-visible{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-8px) translateZ(20px);box-shadow:var(--sh2);border-color:#FFC9A8}
.card-body h3,.pcard h3{transform:translateZ(18px)}
.card-img::after,.pcard-img{position:relative}
.card-img::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.card:hover .card-img::after{opacity:1}
/* fun badges */
.badge{background:var(--sun);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:800;border-radius:10px;letter-spacing:.06em}
.card-img .badge{background:var(--sun);transform:rotate(-5deg);top:14px;left:14px}
.card:nth-child(3n) .card-img .badge{background:#FFB3C7;transform:rotate(4deg)}
.card:nth-child(3n+1) .card-img .badge{background:#A8E6CF;transform:rotate(-2deg)}
.kicker{color:var(--mint)}
/* buttons with depth + press */
.cta,.signup-form button,.nav-cta{position:relative;border:2px solid var(--ink)!important;box-shadow:0 4px 0 var(--ink),0 8px 14px rgba(42,28,20,.18);transform:translateY(0);transition:transform .12s,box-shadow .12s,background .2s!important;font-weight:800}
.cta,.signup-form button{background:var(--tomato);color:#fff;border-radius:14px}
.cta:hover,.signup-form button:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink),0 12px 18px rgba(42,28,20,.2)}
.cta:active,.signup-form button:active,.nav-cta:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink),0 2px 4px rgba(42,28,20,.2)}
.signup-form{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.signup-form button{border-radius:999px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
/* band + footer */
.band{background:linear-gradient(135deg,#2A1C14 0,#4A1E2C 100%);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/20px 20px;pointer-events:none}
.band .signup-form{border-color:#fff;box-shadow:4px 4px 0 var(--sun)}
.site-footer{background:#1E140E;border-top:6px solid var(--sun);box-shadow:inset 0 6px 0 var(--tomato)}
.art-hero,.page-head{background:radial-gradient(600px 300px at 90% 0,#FFD6E4,transparent 70%),linear-gradient(180deg,#FFE8D2,transparent)}
.art-img{border:3px solid #fff;box-shadow:var(--sh2),10px 10px 0 -2px var(--sun);transform:perspective(1000px) rotateY(-6deg) rotate(1deg)}
.pbox{border:2px solid #F3E2D2;box-shadow:var(--sh)}
.pull{border-left-color:var(--berry)}
@media (max-width:900px){.steal{transform:none;box-shadow:var(--sh2),8px 8px 0 -2px var(--sun)}.art-img{transform:none}.s1{left:70%;top:2%;width:80px}.s3{display:none}.s5{display:none}}
@media (max-width:640px){.s2{width:56px;bottom:4%;left:24px}.s4{width:44px;top:4%;right:40px}}
@media (hover:none){.card,.pcard{transform:none}}
@media (prefers-reduced-motion:reduce){.shape{animation:none!important}.scene-in{transform:none!important;transition:none}
 .card,.pcard,.steal,.cta,.signup-form button,.nav-cta{transition:none!important}.card:hover,.pcard:hover{transform:translateY(-2px)}}
/* real product photos + credits */
.card-img img.photo{aspect-ratio:4/3;height:auto;width:100%;object-fit:cover;background:#fff}.steal img.photo{aspect-ratio:3/2;height:auto;width:100%;object-fit:cover;background:#fff}
.credit{position:absolute;right:8px;bottom:8px;z-index:2;max-width:calc(100% - 16px);background:rgba(30,20,14,.78);color:#fff;font:500 10.5px/1.3 Inter,system-ui,sans-serif;padding:3px 7px;border-radius:6px}
.credit a{color:#fff;text-decoration:underline}
.steal-img{position:relative;display:block}

/* Hero panel (mascot removed Oct 30): typography + layered depth, CSS only */
.hero-side{display:flex;flex-direction:column;gap:22px;min-width:0;align-items:stretch}
.hero-panel{position:relative;border-radius:28px;padding:28px 24px 32px;background:linear-gradient(160deg,#fff 0%,#FFF6EA 55%,#FFE8D2 100%);border:1px solid rgba(42,28,20,.08);box-shadow:var(--sh2);overflow:hidden;min-height:280px;display:flex;align-items:center}
.hero-panel-glow{position:absolute;inset:-40% -20% auto auto;width:70%;height:70%;background:radial-gradient(circle,#FFC9A8 0%,transparent 70%);opacity:.85;pointer-events:none}
.hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;width:100%}
.hero-chip{align-self:flex-start;font:600 12px/1.2 inherit;letter-spacing:.02em;text-transform:uppercase;color:#2A1C14;background:#FFF3D6;border:1.5px solid rgba(42,28,20,.2);border-radius:999px;padding:7px 12px;box-shadow:2px 3px 0 rgba(42,28,20,.12)}
.hero-chip-alt{background:#E8F6EF;border-color:rgba(46,139,110,.35)}
.hero-card{background:#fff;border-radius:20px;padding:20px 22px;border:1px solid rgba(42,28,20,.08);box-shadow:0 10px 28px -12px rgba(120,40,20,.28),0 2px 0 rgba(42,28,20,.04);transform:rotate(-1.2deg)}
.hero-card-kicker{display:block;font:600 11px/1.2 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--berry,#B8336A);margin-bottom:8px}
.hero-card-title{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0 0 8px;color:#2A1C14}
.hero-card-sub{margin:0;color:var(--ink2,#5C4A3A);font-size:.92rem;line-height:1.45}
.hero-side .steal{transform:none}
@media (max-width:900px){
  .hero-panel{min-height:0;padding:22px 18px 24px}
  .hero-card{transform:none}
}
@media (prefers-reduced-motion:reduce){.hero-card{transform:none}}