/* One pumpkin patch composition, shared across the app and landing hero. */
.patch-land,.patch-left,.patch-right,.patch-distance,.patch-field,.patch-hill-scarecrow,.patch-hill-wagon,.patch-hill-flowers{display:none}
html.knox-seasonal :is(#welcomeScreen,#home){background-image:radial-gradient(ellipse at 88% 8%,#F5D69A70,transparent 48%),linear-gradient(180deg,#FFF7E9 0%,#FBF1DE 75%,#F2DEB7 100%)!important}
html.knox-seasonal :is(#welcomeScreen,#home)>.pumpkin-patch{
 display:block;position:relative!important;isolation:isolate;height:190px;min-height:190px;flex:0 0 190px;
 width:calc(100% + 48px);max-width:none;align-self:center;margin:28px -24px 0;pointer-events:none;overflow:hidden;z-index:0;
}
html.knox-seasonal #welcomeScreen>.pumpkin-patch{margin-top:auto}
/* The contact plane is independent of hill scaling. Every foreground SVG
   anchors its y=208 baseline to this same 18px inset. */
html.knox-seasonal .pumpkin-patch::before{display:block;content:"";position:absolute;inset:auto 0 0;height:18px;background:#CDA46B;border-top:2px solid #B68D58;z-index:2}
html.knox-seasonal .pumpkin-patch svg{display:block;position:absolute;pointer-events:none}
html.knox-seasonal .patch-land{inset:auto 0 0;width:100%;height:140px;z-index:0}
/* Each cluster's drawing is 380×220, so its width is capped at patch height × 1.727
   — otherwise the sign and corn get cut off at the top. */
html.knox-seasonal .patch-left,html.knox-seasonal .patch-right{--cluster-width:clamp(250px,35cqw,328px);bottom:calc(18px - var(--cluster-width)*12/380);width:var(--cluster-width);height:auto;z-index:4}
html.knox-seasonal .pumpkin-patch{container-type:inline-size;--field-height:140px}
html.knox-seasonal .patch-left{left:0}
html.knox-seasonal .patch-right{right:0}
html.knox-seasonal .patch-distance{left:30%;bottom:28px;width:40%;height:auto;z-index:1}
html.knox-seasonal .patch-field{display:block;position:absolute;inset:auto 0 0;height:var(--field-height);z-index:2}
html.knox-seasonal .patch-planted{position:absolute;transform:translate(-50%,12.766%);aspect-ratio:96/94}
html.knox-seasonal .patch-planted svg{width:100%;height:100%}
html.knox-seasonal .patch-hill-scarecrow{left:28%;transform:translateX(-50%);bottom:30px;width:100px;height:auto;z-index:2}
html.knox-seasonal .patch-hill-wagon{left:75%;transform:translateX(-50%);bottom:calc(var(--field-height)*.4);width:135px;height:auto;z-index:1}
html.knox-seasonal .patch-hill-flowers{right:9%;bottom:48px;width:85px;height:auto;z-index:2}
/* Walk in front of hill planting, behind only the near fence and corner pumpkins. */
html.knox-seasonal :is(#welcomeScreen,#home) .pumpkin-patch .harvest-turkey-track{bottom:18px;z-index:3!important;height:85px}
html.knox-seasonal .pumpkin-patch .harvest-turkey{opacity:1;width:90px;height:77px}
/* Leaves fall to the ground and slip behind the hills and fences (the patch
   sits in front of them), instead of vanishing at a line in mid-air. */
html.knox-seasonal :is(#welcomeScreen,#home)>.fall-sky{bottom:0;overflow:hidden}
html.knox-seasonal .harvest-sun{width:220px;height:220px;background:#F4D28C55;border-color:#DEB15A40;box-shadow:0 0 0 28px #F2CE841A,0 0 0 56px #F2CE8410}
@media(min-width:901px) and (max-height:760px){html.knox-seasonal #welcomeScreen>.pumpkin-patch{height:164px;min-height:164px;flex-basis:164px}html.knox-seasonal #welcomeScreen .patch-left,html.knox-seasonal #welcomeScreen .patch-right{--cluster-width:259px}}
@media(max-width:768px){
 html.knox-seasonal :is(#welcomeScreen,#home)>.pumpkin-patch{display:block;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;height:150px;min-height:150px;flex-basis:150px;margin-top:22px}
 html.knox-seasonal #home>.pumpkin-patch{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}
 html.knox-seasonal .patch-left,html.knox-seasonal .patch-right{--cluster-width:245px}
 html.knox-seasonal .patch-left{left:-45px}html.knox-seasonal .patch-right{right:-55px}
 html.knox-seasonal .patch-land{height:105px}
 html.knox-seasonal .pumpkin-patch{--field-height:105px}
 html.knox-seasonal .patch-planted{scale:.75}
 html.knox-seasonal .patch-planted:nth-child(3n){display:none}
 html.knox-seasonal .patch-hill-scarecrow{left:46%;width:65px;bottom:25px}
 html.knox-seasonal .patch-planted:nth-child(n+5):nth-child(-n+9){display:none}
 html.knox-seasonal .patch-hill-wagon{left:73%;width:86px}
 html.knox-seasonal .patch-hill-flowers{right:7%;width:58px;bottom:48px}
 html.knox-seasonal .pumpkin-patch .patch-distance{display:none}
 html.knox-seasonal .pumpkin-patch .harvest-turkey{width:68px;height:58px}
 html.knox-seasonal .harvest-sun{width:160px;height:160px;top:-65px;right:-65px}
}
@media(max-width:400px){html.knox-seasonal .patch-left,html.knox-seasonal .patch-right{--cluster-width:220px}html.knox-seasonal .patch-left{left:-43px}html.knox-seasonal .patch-right{right:-52px}html.knox-seasonal :is(#welcomeScreen,#home)>.pumpkin-patch{height:150px;min-height:150px;flex-basis:150px}}
@media(prefers-reduced-motion:reduce){html.knox-seasonal .pumpkin-patch .harvest-turkey{left:48%;animation:none!important}html.knox-seasonal .pumpkin-patch :is(.turkey-body,.turkey-leg){animation:none!important}}
/* Big screens: a taller patch so the scene isn't tiny under all that space. */
@media(min-width:1400px) and (min-height:880px){
 html.knox-seasonal :is(#welcomeScreen,#home)>.pumpkin-patch{height:232px;min-height:232px;flex-basis:232px}
 html.knox-seasonal .patch-left,html.knox-seasonal .patch-right{--cluster-width:400px}
 html.knox-seasonal .patch-land{height:170px}
 html.knox-seasonal .pumpkin-patch{--field-height:170px}
 html.knox-seasonal .patch-hill-scarecrow{width:125px;bottom:42px;left:calc(400px + 80px)}
 html.knox-seasonal .patch-hill-wagon{width:158px}
 html.knox-seasonal .patch-hill-flowers{width:105px;bottom:55px}
}
/* 3) Phones: in the app the message box covers the bottom of the screen, so the
   patch would peek out half-hidden. The landing page keeps it. */
@media(max-width:768px){html.knox-seasonal #welcomeScreen>.pumpkin-patch{display:none}}
@media(min-width:769px) and (max-height:760px){
 html.knox-seasonal .knox-learn-mode #welcomeScreen>.pumpkin-patch{height:120px;min-height:120px;flex-basis:120px}
 html.knox-seasonal .knox-learn-mode #welcomeScreen :is(.patch-left,.patch-right){--cluster-width:170px}
 html.knox-seasonal .knox-learn-mode .patch-land{height:90px}
 html.knox-seasonal .knox-learn-mode .pumpkin-patch{--field-height:90px}
 html.knox-seasonal .knox-learn-mode .patch-hill-scarecrow{width:62px;bottom:28px}
 html.knox-seasonal .knox-learn-mode .patch-hill-wagon{width:95px}
 html.knox-seasonal .knox-learn-mode .patch-hill-flowers{width:52px;bottom:30px}
 html.knox-seasonal .knox-learn-mode .patch-distance{width:34%;left:33%}
}
@media(min-width:769px) and (max-height:650px){
 html.knox-seasonal .knox-learn-mode #welcomeScreen>.pumpkin-patch{height:65px;min-height:65px;flex-basis:65px;--field-height:45px}
 html.knox-seasonal .knox-learn-mode #welcomeScreen :is(.patch-left,.patch-right){--cluster-width:95px}
 html.knox-seasonal .knox-learn-mode .patch-land{height:45px}
 html.knox-seasonal .knox-learn-mode .patch-hill-scarecrow{width:34px;bottom:20px}
 html.knox-seasonal .knox-learn-mode .patch-hill-wagon{width:55px}
 html.knox-seasonal .knox-learn-mode .patch-hill-flowers{width:30px;bottom:20px}
 html.knox-seasonal .knox-learn-mode .patch-planted{scale:.55;transform-origin:center bottom}
 html.knox-seasonal .knox-learn-mode .pumpkin-patch .harvest-turkey{width:50px;height:43px}
}
/* Learn's banner and the Review panel make the welcome screen taller than Ask
   Knox's. The patch is a backdrop resting on the input bar: it takes no room,
   so nothing pushes it down and the screen doesn't scroll over empty space. */
html.knox-seasonal #welcomeScreen{position:relative}
html.knox-seasonal #welcomeScreen>.pumpkin-patch{position:absolute!important;left:0;right:0;bottom:0;width:auto;margin:0}