/* The tall track supplies scroll distance; only the scene stays pinned. */
main#top, #product{scroll-margin-top:65px}
.jar-intro{--jar-header:65px;padding:0;height:calc(100vh - var(--jar-header) + 3720px);background:#151e36}
.jar-intro[hidden]{display:none}
.jar-stage{position:sticky;top:var(--jar-header);height:calc(100vh - var(--jar-header));isolation:isolate;color:#fff}
@supports (height:100svh){
  .jar-intro{height:calc(100svh - var(--jar-header) + clamp(2850px,455svh,4850px))}
  .jar-stage{height:calc(100svh - var(--jar-header))}
}
.jar-scene{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse at 48% 78%,#394e77 0%,#28395e 32%,#19243f 62%,#11192f 100%)}
.jar-scene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--story-light,0);
  background:radial-gradient(ellipse at 50% 57%,#344d78,transparent 71%)}
.jar-canvas,.jar-sparks{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.jar-guides{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;overflow:visible}
.jar-guides path{vector-effect:non-scaling-stroke;stroke:#b0f277;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;fill:none}
.jar-invitation{position:absolute;top:25%;inset-inline:0;margin:0;text-align:center;color:#d1ddf2;
  font:500 clamp(1.06rem,2.2vw,1.28rem)/1.3 var(--display);pointer-events:none}
.jar-invitation > span:first-child{display:block;margin-bottom:.7rem;color:#b0f277;
  font-size:.76rem;font-weight:600;letter-spacing:.21em;text-transform:uppercase}
.jar-arrow{display:block;margin-top:.65rem;font:400 1.2rem/1 system-ui,sans-serif}
.jar-words{position:absolute;left:53%;right:3%;top:48%;margin:0;
  color:#f7f8ff;font:700 clamp(2.1rem,5.5vw,7rem)/.99 var(--display);letter-spacing:-.035em;pointer-events:none}
.jar-line{display:block;white-space:nowrap}
.jar-line + .jar-line{margin-top:.11em}
.jar-line-accent{color:#a9ef71}
.jar-word-slot,.jar-word-slot > span{display:inline-block}
.jar-word-slot > span,.jar-sparks i{opacity:0}
.jar-sparks i{position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;background:#a9ef71}
.jar-sparks i:nth-child(even){width:4px;height:4px;background:#a7d8ff}
.jar-chapter,.jar-handoff{position:absolute;pointer-events:none;opacity:0}
.jar-chapter-row{top:clamp(1.25rem,8.3vh,6.5rem);inset-inline:5%;text-align:center;
  transform:translateY(var(--chapter-shift,0px))}
.jar-chapter-side{top:50%;left:53%;right:6%;transform:translateY(calc(-50% + var(--chapter-shift,0px)))}
.jar-chapter-kicker,.jar-handoff span{margin:0 0 .6rem;color:#b0f277;
  font:600 clamp(.65rem,1.45vw,.82rem)/1.1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.jar-chapter h2,.jar-handoff{margin:0;color:#f7f8ff;font:700 clamp(2rem,4.6vw,5.4rem)/1.02 var(--display);letter-spacing:-.035em}
.jar-chapter-note{max-width:33rem;margin:.7rem 0 0;color:#d8e3f7;font-size:clamp(.85rem,1.6vw,1.12rem);line-height:1.4}
.jar-chapter-row .jar-chapter-note{margin-inline:auto}
.jar-chapter-specs,.jar-chapter-uses{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0;padding:0;list-style:none}
.jar-chapter-specs p,.jar-chapter-uses li{margin:0;padding:.36rem .67rem;border:1px solid #8194b5;border-radius:9px;
  color:#f0f5ff;background:#202e4d;font:600 clamp(.72rem,1.3vw,.94rem)/1.25 var(--display)}
.jar-chapter-specs strong{margin-right:.25em;color:#b0f277;font-size:1.25em}
.jar-color-labels{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.jar-color-labels li{position:absolute;left:var(--label-x,50%);top:var(--label-y,72%);opacity:var(--label-opacity,0);
  display:flex;align-items:center;justify-content:center;gap:.42em;white-space:nowrap;transform:translateX(-50%);
  color:#eef4ff;font:600 clamp(.62rem,1.7vw,.94rem)/1.1 var(--display)}
.jar-color-labels i{width:.67em;height:.67em;border-radius:50%;box-shadow:0 0 0 1px #e1ebfb;
  background:linear-gradient(var(--story-lid,var(--story-swatch)) 0 42%,var(--story-swatch) 42%)}
[data-jar-color="lime"]{--story-swatch:#a9ef71}
[data-jar-color="titanium"]{--story-swatch:#3b568e}
[data-jar-color="sky"]{--story-swatch:#8dccff}
[data-jar-lid="lime"]{--story-lid:#a9ef71}
[data-jar-lid="titanium"]{--story-lid:#3b568e}
[data-jar-lid="sky"]{--story-lid:#8dccff}
.jar-handoff{top:50%;inset-inline:6%;text-align:center;transform:translateY(-50%);text-shadow:0 3px 16px #11192f}
.jar-handoff span{display:block;margin-bottom:.6rem;text-shadow:none}
.jar-stage-footer{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.75rem clamp(1rem,4vw,3.5rem) max(.75rem,env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(12,19,38,.48));pointer-events:none}
.jar-progress{display:flex;align-items:center;gap:.65rem;color:#e0e8f6;font:500 .75rem/1 var(--display);font-variant-numeric:tabular-nums}
.jar-progress-track{display:block;width:clamp(2rem,9vw,6rem);height:2px;background:#7486a5}
.jar-progress-track > span{display:block;width:100%;height:100%;background:#a9ef71;transform:scaleX(0);transform-origin:left}
.jar-skip{min-height:44px;display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:6px;
  color:#f6f8ff;font:500 .88rem/1 var(--display);text-underline-offset:.28em;pointer-events:auto}
.jar-skip:hover{color:#b0f277}
.jar-skip:focus-visible{outline-color:#b0f277}
@media (max-width:760px){
  .jar-invitation{top:23%}
  .jar-words{left:4%;right:4%;top:62%;text-align:center;font-size:clamp(1.85rem,9.6vw,4.55rem)}
  .jar-chapter-row{top:8%;inset-inline:4%}
  .jar-chapter-side{top:55%;inset-inline:5%;text-align:center;transform:translateY(var(--chapter-shift,0px))}
  .jar-chapter h2,.jar-handoff{font-size:clamp(1.65rem,7.2vw,3.5rem)}
  .jar-chapter-note{margin:.5rem auto 0}
  .jar-chapter-specs,.jar-chapter-uses{justify-content:center;margin-top:.6rem}
}
@media (max-width:760px) and (max-height:600px){
  .jar-chapter-side{top:52%}
  .jar-chapter-kicker{margin-bottom:.35rem}
  .jar-chapter-specs,.jar-chapter-uses{gap:.35rem;margin-top:.45rem}
  .jar-chapter-specs p,.jar-chapter-uses li{padding:.28rem .45rem}
  .jar-stage-footer{padding-block:.35rem}
}
@media (min-width:761px) and (max-height:620px){
  .jar-chapter-row{top:5%}
  .jar-chapter-row h2{font-size:clamp(2.1rem,6vh,3.45rem)}
}
@media (min-width:761px){
  .jar-chapter-row[data-jar-chapter="swap"]{top:2.5%}
  .jar-chapter-row[data-jar-chapter="swap"] .jar-chapter-kicker{margin-bottom:.4rem}
  .jar-chapter-row[data-jar-chapter="swap"] h2{font-size:clamp(2.05rem,min(4vw,6vh),4.75rem)}
  .jar-chapter-row[data-jar-chapter="swap"] .jar-chapter-note{margin-top:.35rem}
}
@media (prefers-reduced-motion:reduce),(max-height:430px){.jar-intro{display:none}}