/* Small companion scenes frame the content; existing artwork stays unaltered. */
.edge-parade{display:none}
.edge-demo-wrap{position:relative;width:min(1180px,calc(100% - 40px));margin:0 auto;display:flow-root}
.sunrise-top .edge-demo-wrap #demo{width:100%;margin-top:16px}
.edge-pass-wrap{position:relative}
.edge-scene{--scene-color:#ffdfb5;--scene-ring:#f5caa8;position:relative;width:248px;margin:8px 0 0;pointer-events:none;user-select:none;color:#665172}
.edge-scene-art{position:relative;width:100%;aspect-ratio:1.12;isolation:isolate}
.edge-scene-orbit{position:absolute;inset:6% 6% 0;border-radius:50%;background:var(--scene-color);border:2px solid #fff9;box-shadow:0 0 0 10px color-mix(in srgb,var(--scene-ring) 35%,transparent);z-index:-1}
.edge-scene-orbit:before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#ffd76d;border:3px solid #fff8;left:-4%;top:11%;box-shadow:1px 3px 0 #4432581c}
.edge-scene-orbit:after{content:"✦";position:absolute;right:-4%;top:14%;font-size:27px;color:#ac70c1;animation:edge-sparkle 7s ease-in-out infinite}
.edge-scene-dock{position:absolute;left:0;top:31%;width:100%;height:auto;filter:drop-shadow(0 9px 7px #38284b28)}
.edge-scene-resident{position:absolute;left:26%;top:5%;width:48%;height:auto;filter:drop-shadow(0 4px 3px #38284b20)}
.edge-scene-sticker{position:absolute;left:5%;bottom:0;background:#fff3c9;border:1.5px solid #443258;border-radius:7px;box-shadow:2px 3px 0 #443258;padding:6px 9px;transform:rotate(-5deg);font-size:8px;font-weight:900;letter-spacing:.04em;color:#443258}
.edge-scene figcaption{text-align:center;font-size:10px;line-height:1.5;margin:12px 0 0}
.edge-scene--dinosaur{--scene-color:#dcebc1;--scene-ring:#b7d495;margin-left:auto;margin-top:-24px;margin-bottom:24px}
.edge-scene--dinosaur .edge-scene-resident{width:58%;left:22%;top:6%}
.edge-scene--jewel{--scene-color:#e6d4f8;--scene-ring:#c6a6e5;margin-top:0;margin-bottom:28px;color:#eee1fa}
.edge-scene--jewel .edge-scene-resident{width:73%;left:14%;top:-13%}
.edge-scene--jewel .edge-scene-sticker{background:#f4c2db;transform:rotate(4deg);left:auto;right:1%}
@keyframes edge-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes edge-sparkle{0%,70%,100%{opacity:.55;transform:scale(.85)}80%{opacity:1;transform:scale(1.08)}}
/* Wide screens have room for the left / right / left margin arrangement. */
@media(min-width:1640px){
  .edge-scene{position:absolute;width:min(350px,calc((100vw - 1180px)/2 - 58px));margin:0}
  .edge-scene--harvest{right:calc(100% + 28px);top:170px}
  .edge-scene--dinosaur{left:calc(100% + 28px);top:120px}
  .edge-scene--jewel{right:calc(100% + 28px);top:160px}
  .edge-scene-art{animation:edge-bob 8s ease-in-out infinite}
  .edge-scene--dinosaur .edge-scene-art{animation-delay:-3s}
  .edge-scene--jewel .edge-scene-art{animation-delay:-5s}
  .edge-scene-sticker{font-size:clamp(7px,.48vw,10px)}
}
/* Keep the scenes beside shorter content where a laptop still has room. */
@media(min-width:1000px) and (max-width:1639px){
  .edge-demo-wrap{width:calc(100% - 48px);max-width:1440px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center}
  .edge-demo-wrap .edge-scene--harvest{width:220px;margin:0}
  #pricing>.edge-scene--dinosaur{position:absolute;right:0;top:64px;width:248px;margin:0}
  #pricing .shop-intro-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  #pricing .shop-intro-copy{width:calc(100% - 300px)}
  #pricing .shop-routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .edge-pass-wrap .edge-scene--jewel{position:absolute;left:0;top:180px;width:220px}
  .edge-pass-wrap .optional-membership{margin-left:auto;margin-right:0;max-width:min(680px,calc(100% - 270px))}
}
/* One small divider on phones; no extra scrolling through repeated art. */
@media(max-width:700px){
  .edge-scene--dinosaur,.edge-scene--jewel{display:none}
  .edge-scene--harvest{width:200px;margin:10px auto 26px}
  .edge-scene figcaption{font-size:9px}
  .edge-scene-sticker{font-size:7px;padding:5px 7px}
}
@media(prefers-reduced-motion:reduce){
  .edge-scene-art,.edge-scene-orbit:after{animation:none!important}
}
/* Keep the existing navigation inside the smallest phone viewport too. */
@media(max-width:360px){
  .nav-wrap .brand{font-size:.74rem}
  .nav-wrap .nav-buy{padding-inline:10px}
}
/* The same staggered artwork on laptops and roomy desktops. */
@media(min-width:1000px){
  #main{--parade-width:clamp(190px,calc((100% - 1440px)/2 - 20px),350px);position:relative;isolation:isolate}
  .edge-demo-wrap>.edge-scene,#pricing>.edge-scene,.edge-pass-wrap>.edge-scene{display:none}
  .edge-parade{--parade-step:clamp(440px,20vw,510px);--parade-shift:clamp(6px,.6vw,14px);display:block;position:absolute;inset:0;z-index:2;overflow:clip;pointer-events:none;user-select:none}
  .edge-parade-rail{position:absolute;top:52px;bottom:0;width:var(--parade-width);display:flex;flex-direction:column}
  .edge-parade-rail--left{left:clamp(8px,.9vw,22px);right:auto}
  .edge-parade-rail--right{right:clamp(8px,.9vw,22px);left:auto;top:245px}
  .edge-parade .edge-scene{position:relative;inset:auto;width:100%;margin:0;flex:0 0 max(var(--parade-step),calc(100% / 21));color:#493455;content-visibility:visible}
  .edge-parade .edge-scene-art{animation:none}
  .edge-parade-rail--left .edge-scene:nth-child(odd),.edge-parade-rail--right .edge-scene:nth-child(even){transform:translateX(calc(-1 * var(--parade-shift)))}
  .edge-parade-rail--left .edge-scene:nth-child(even),.edge-parade-rail--right .edge-scene:nth-child(odd){transform:translateX(var(--parade-shift))}
  .edge-parade .edge-scene-note{display:table;position:relative;max-width:94%;margin:6px 0 0 3%;padding:10px 14px;border:2px solid #443258;border-radius:9px;background:#ffe28e;box-shadow:2px 3px 0 #443258;color:#392849;font-size:clamp(12px,.78vw,18px);font-weight:800;line-height:1.35;transform:rotate(-4deg)}
  .edge-parade .edge-scene:nth-child(even) .edge-scene-note{margin-left:auto;margin-right:3%;transform:rotate(4deg);background:#f6c7df}
  .edge-parade .edge-scene:nth-child(3n) .edge-scene-note{background:#d4eee7}
  .edge-parade .edge-scene figcaption{display:table;margin:12px auto 0;padding:4px 8px;border-radius:7px;background:#fff8eced;font-size:11px}
  .edge-parade .edge-scene--candy{--scene-color:#f6d4e5;--scene-ring:#e8b8db}
  .edge-parade .edge-scene--toybox{--scene-color:#c6e7ef;--scene-ring:#b1d4e7}
  .edge-parade .edge-scene--robot{--scene-color:#d4eef8;--scene-ring:#9fd3e8}
  .edge-parade .edge-scene--guardian{--scene-color:#dcedd6;--scene-ring:#aed0a4}
  .edge-parade .edge-scene--pirate{--scene-color:#cdebe4;--scene-ring:#98cfc3}
  .edge-parade .edge-scene--anime{--scene-color:#dfe0fb;--scene-ring:#b8b9ea}
  .edge-parade .edge-scene--toybox .edge-scene-resident,.edge-parade .edge-scene--pirate .edge-scene-resident,.edge-parade .edge-scene--anime .edge-scene-resident{width:52%;left:24%;top:3%}
  .edge-parade .edge-scene--robot .edge-scene-resident,.edge-parade .edge-scene--guardian .edge-scene-resident{width:50%;left:25%;top:3%}
  .edge-parade .parade-jewel-phoenix .edge-scene-resident,.edge-parade .parade-jewel-deer .edge-scene-resident,.edge-parade .parade-comet .edge-scene-resident{width:36%;left:32%;top:1%}
  .edge-parade .edge-scene--candy .edge-scene-resident{top:7%}
  .edge-parade .parade-lantern-ghost{--scene-color:#c4eee4;--scene-ring:#a3d4c8}
  .edge-parade .parade-mushroom-witch,.edge-parade .parade-brontosaurus{--scene-color:#e6d4f8;--scene-ring:#c6a6e5}
  .edge-parade .parade-raptor{--scene-color:#c9e3ff;--scene-ring:#aec8ec}
}

/* Reserve real gutters on laptops instead of replacing the parade with three
   unrelated scenes. Keep shopping cards readable in the narrower center. */
@media(min-width:1000px) and (max-width:1739px){
  #main{--parade-width:clamp(145px,14vw,230px)}
  #main .shell,#main .edge-demo-wrap{width:calc(100% - 2 * var(--parade-width) - 64px);max-width:1180px}
  #main .edge-demo-wrap{display:flow-root}
  #main .edge-demo-wrap #demo{width:100%;max-width:none}
  #main .edge-pass-wrap .optional-membership{max-width:100%;margin-inline:auto}
  #pricing .shop-intro-copy{width:100%}
  #pricing .pack-pricing-grid{grid-template-columns:minmax(0,1fr)}
  .edge-parade{--parade-step:320px;--parade-shift:16px}
  .edge-parade-rail--left{left:10px}
  .edge-parade-rail--right{right:10px}
  .edge-parade .edge-scene-note{font-size:12px;padding:7px 8px;max-width:100%}
  .edge-parade .edge-scene figcaption{font-size:9px;padding:3px 4px}
}

/* Keep both zigzag positions inside each reserved gutter. The outward position
   starts inside the page; only the inward position translates toward content. */
@media(min-width:1000px) and (max-width:1739px){
  .edge-parade-rail{box-sizing:border-box;padding-inline:12px}
  .edge-parade .edge-scene{display:block;width:calc(100% - 2 * var(--parade-shift));flex:0 0 var(--parade-step);overflow:visible}
  .edge-parade-rail--left .edge-scene:nth-child(odd),
  .edge-parade-rail--right .edge-scene:nth-child(even){transform:translateX(0)}
  .edge-parade-rail--left .edge-scene:nth-child(even),
  .edge-parade-rail--right .edge-scene:nth-child(odd){transform:translateX(calc(2 * var(--parade-shift)))}
}