/* A single, continuous product story. All visual transitions use transform/opacity. */
.pm-section{background:#f5f8f4}.pm-section .section-heading{align-items:flex-end;margin-bottom:12px}.pm-section .section-heading h2{font-size:clamp(35px,4.4vw,65px);line-height:1.04}.pm-story{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:3%;align-items:center}.pm-steps{display:flex;flex-direction:column;gap:6px}.pm-step{display:flex;align-items:flex-start;width:100%;gap:18px;padding:22px 18px;text-align:left;border:1px solid transparent;border-radius:0;position:relative;color:#779083;background:transparent;min-height:80px}.pm-step.is-current{color:var(--green)}.pm-step.is-current::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:#50836a;border-radius:2px}.pm-step-number{font-size:11px;padding-top:5px;font-variant-numeric:tabular-nums;min-width:20px}.pm-step-copy{flex:1;min-width:0}.pm-step-copy strong{display:block;font:650 clamp(21px,2vw,29px)/1.16 var(--display);letter-spacing:-.045em}.pm-step-copy>span{display:block;max-width:300px;font-size:13px;line-height:1.65;margin-top:10px;color:#637e6b}.pm-step:not(.is-current) .pm-step-copy>span{display:none}.pm-step-arrow{font-size:20px;opacity:0}.pm-step.is-current .pm-step-arrow{opacity:1}.pm-step:focus-visible{outline:2px solid #25734e;outline-offset:4px}.pm-instruction{font-size:11px;color:#7b9180;padding:18px}.pm-player{min-width:0}.pm-scene{height:580px;position:relative;overflow:hidden;isolation:isolate;background:transparent}.pm-main{position:absolute;top:22px;bottom:12px;width:430px;left:50%;transform:translateX(-42%);transition:transform 600ms var(--ease)}.pm-bag{position:absolute;inset:0}.pm-bag-surface{position:absolute;inset:0}.pm-bag-surface>img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 20px 12px #27422b16)}.pm-print{position:absolute;top:61%;left:50%;transform:translate(-50%,-70%) scale(.86);font:normal 53px/.9 Georgia,serif;letter-spacing:-.055em;text-align:center;color:#16452f;opacity:0;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}.pm-print em{font-weight:400}.pm-file{display:flex;align-items:center;gap:12px;padding:15px 18px;background:#ffffffdf;border:1px solid #fff;border-radius:14px;box-shadow:0 15px 45px #23472c15;position:absolute;z-index:5;left:23px;top:85px;opacity:0;transform:translate(-30px,-20px) scale(.92);transition:transform 600ms var(--ease),opacity 400ms var(--ease);backdrop-filter:blur(12px)}.pm-file-icon{display:grid;place-items:center;font-size:22px;width:38px;height:43px;background:#edf3e9;border-radius:7px}.pm-file strong{display:block;font-size:13px;font-weight:600}.pm-file div>span{display:block;font-size:9px;margin-top:5px;color:#789078}.pm-file>i{width:21px;height:21px;color:#3b7651}.pm-file svg{width:100%;height:100%}.pm-print-frame{position:absolute;left:30%;top:49%;width:40%;height:28%;opacity:0;transform:scale(1.08);transition:opacity 300ms,transform 500ms var(--ease)}.pm-print-frame i{position:absolute;width:10px;height:10px;border-color:#335d4077;border-style:solid}.pm-print-frame i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.pm-print-frame i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.pm-print-frame i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}.pm-print-frame i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}.pm-print-frame>span{position:absolute;white-space:nowrap;left:50%;top:-15px;transform:translateX(-50%);font-size:6px;letter-spacing:.12em;color:#507359}.pm-proof{position:absolute;bottom:90px;right:20px;z-index:6;display:flex;align-items:center;gap:14px;background:#fffffff0;border:1px solid #fff;border-radius:15px;padding:20px;box-shadow:0 20px 60px #1536221a;opacity:0;transform:translateY(30px) scale(.96);transition:opacity 300ms,transform 550ms var(--ease)}.pm-check{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:#0f5037;color:#e3efde;transform:scale(.7);transition:transform 550ms 100ms var(--ease)}.pm-check svg{height:25px;width:25px}.pm-proof small{font-size:7px;letter-spacing:.15em;color:#8a9a8b}.pm-proof strong{display:block;font-size:17px;font-family:var(--display);letter-spacing:-.04em;margin:5px 0}.pm-proof div>span{font-size:9px;color:#7b8c7b}.pm-series{position:absolute;top:22px;bottom:12px;left:50%;width:430px;transform:translateX(-50%);z-index:-1}.pm-copy{opacity:0;transform:translateX(0) scale(.7);transition:opacity 500ms var(--ease),transform 550ms var(--ease)}.pm-copy .pm-print{opacity:1;transform:translate(-50%,-50%)}.pm-package{position:absolute;right:12px;bottom:35px;width:210px;height:180px;z-index:5;opacity:0;transform:translate(35px,40px) rotate(8deg) scale(.85);transition:opacity 400ms var(--ease),transform 550ms var(--ease)}.pm-package svg{width:100%;height:100%;filter:drop-shadow(0 12px 8px #233f2920)}.pm-package>span{position:absolute;left:32%;top:62%;transform:rotate(26deg);font-size:10px;color:#6e5d43;letter-spacing:-.03em}.pm-footnote{display:flex;justify-content:space-between;gap:20px;margin-top:27px;font-size:10px;line-height:1.6;color:#81917f}.pm-footnote a{color:#4e7059;text-decoration:underline;text-underline-offset:4px}

.pm-story:not([data-stage="0"]) .pm-print{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pm-story[data-stage="1"] .pm-file{opacity:1;transform:translate(0,0) scale(1)}
.pm-story[data-stage="1"] .pm-print-frame,.pm-story[data-stage="2"] .pm-print-frame{opacity:1;transform:scale(1)}
.pm-story[data-stage="2"] .pm-main{transform:translateX(-55%) rotate(-4deg)}
.pm-story[data-stage="2"] .pm-file{transform:translate(70px,100px) scale(.65);opacity:0}
.pm-story[data-stage="2"] .pm-proof{opacity:1;transform:translateY(0) scale(1)}
.pm-story[data-stage="2"] .pm-check{transform:scale(1)}
.pm-story[data-stage="3"] .pm-main{transform:translate(-55%,-8px) rotate(-5deg) scale(1)}
.pm-story[data-stage="3"] .pm-copy-left{opacity:1;transform:translate(-130px,-12px) rotate(-14deg) scale(.85)}
.pm-story[data-stage="3"] .pm-copy-right{opacity:1;transform:translate(130px,-20px) rotate(12deg) scale(.85)}
.pm-story[data-stage="3"] .pm-package{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
@media(hover:hover) and (pointer:fine){.pm-step:not(.is-current):hover{color:#345e43}}
@media(max-width:1100px){.pm-story{grid-template-columns:minmax(245px,.8fr) minmax(0,1.2fr);gap:25px}.pm-step{padding:20px 12px;gap:13px}.pm-step-copy strong{font-size:24px}.pm-step-copy>span{font-size:12px}.pm-scene{height:510px}.pm-main,.pm-series{width:355px}.pm-file{left:15px;padding:12px}.pm-proof{right:12px;bottom:72px;padding:16px;gap:12px}.pm-proof strong{font-size:16px}.pm-package{width:175px;height:155px;right:0;bottom:38px}}
@media(max-width:760px){.pm-section .section-heading{margin-bottom:26px}.pm-section .section-heading h2{font-size:42px}.pm-section .section-heading>.text-link{font-size:12px}.pm-story{display:flex;flex-direction:column;gap:22px;align-items:stretch}.pm-player{order:0}.pm-steps{order:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}.pm-step{height:auto;min-height:76px;padding:15px 12px;gap:8px}.pm-step-copy strong{font-size:19px;line-height:1.15}.pm-step-number{font-size:9px;padding-top:3px;min-width:16px}.pm-step-copy>span{font-size:11px;line-height:1.55}.pm-step-arrow{display:none}.pm-instruction{grid-column:1/-1;text-align:center;padding:8px;margin:0;font-size:10px}.pm-scene{height:470px}.pm-main,.pm-series{top:18px;bottom:12px;width:330px}.pm-file{left:22px;top:75px}.pm-proof{right:22px;bottom:65px}.pm-package{width:180px;height:150px;bottom:35px;right:10px}.pm-print{font-size:43px}.pm-footnote{font-size:10px;flex-direction:column;gap:12px;margin-top:15px}.pm-footnote a{min-height:30px}.pm-section{scroll-margin-top:90px}}
@media(max-width:420px){.pm-section .section-heading h2{font-size:37px}.pm-section .section-heading{gap:15px}.pm-scene{height:410px}.pm-main,.pm-series{top:18px;bottom:12px;width:290px}.pm-main{transform:translateX(-43%)}.pm-print{font-size:36px}.pm-file{top:66px;left:15px;padding:10px;gap:8px}.pm-file-icon{width:29px;height:34px;font-size:18px}.pm-file strong{font-size:11px}.pm-file div>span{font-size:8px}.pm-file>i{height:16px;width:16px}.pm-proof{right:12px;bottom:48px;gap:10px;padding:14px}.pm-check{height:34px;width:34px}.pm-check svg{height:21px;width:21px}.pm-proof strong{font-size:14px}.pm-proof div>span{font-size:8px}.pm-proof small{font-size:6px}.pm-package{width:145px;height:125px;right:0;bottom:27px}.pm-package>span{font-size:8px}.pm-story[data-stage="3"] .pm-copy-left{transform:translate(-62px,-12px) rotate(-13deg) scale(.8)}.pm-story[data-stage="3"] .pm-copy-right{transform:translate(62px,-20px) rotate(10deg) scale(.8)}.pm-step-copy strong{font-size:17px}.pm-step{padding:14px 9px}.pm-step-copy>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pm-scene *{transition:none!important}.pm-print,.pm-file,.pm-proof,.pm-package,.pm-copy{transition:opacity 100ms linear!important}}

/* Motion is carried by the product itself; no player or separate backdrop. */
.pm-resume{display:inline;padding:5px 0;margin-left:6px;font:inherit;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.pm-resume[hidden]{display:none}
.pm-resume:focus-visible{outline:2px solid #25734e;outline-offset:3px}
.pm-bag-surface{animation:pm-sway 4.8s ease-in-out infinite;transform-origin:50% 18%}
.pm-copy-left .pm-bag-surface{animation-delay:-1.4s}
.pm-copy-right .pm-bag-surface{animation-delay:-3s}
.pm-story[data-stage="1"] .pm-original .pm-print{animation:pm-stamp 1.2s cubic-bezier(.16,1,.3,1) both}
.pm-story[data-stage="1"] .pm-file{animation:pm-file-arrival 1.4s cubic-bezier(.16,1,.3,1) both}
.pm-story[data-stage="1"] .pm-print-frame::after{content:'';position:absolute;inset:0 0 auto;height:1px;background:#39705480;box-shadow:0 0 12px #39705440;animation:pm-scan 1.2s .15s ease-in-out both}
.pm-story[data-stage="2"] .pm-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:pm-check-draw .55s .25s ease forwards}
.pm-story[data-stage="3"] .pm-copy-left{transition-delay:80ms}
.pm-story[data-stage="3"] .pm-copy-right{transition-delay:180ms}
.pm-story[data-stage="3"] .pm-package{transition-delay:280ms}
.pm-story[data-motion="off"] .pm-bag-surface{animation-play-state:paused}
@keyframes pm-sway{0%,100%{transform:translateY(4px) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes pm-stamp{0%,15%{opacity:0;transform:translate(-50%,-75%) scale(1.45);filter:blur(5px)}55%{opacity:1;transform:translate(-50%,-50%) scale(.96);filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pm-file-arrival{0%{opacity:0;transform:translate(-45px,-20px) rotate(-8deg) scale(.9)}45%{opacity:1;transform:translate(12px,8px) rotate(2deg)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes pm-scan{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(140px)}}
@keyframes pm-check-draw{to{stroke-dashoffset:0}}
@media(min-width:761px) and (max-width:1100px){.pm-print{font-size:44px}.pm-story[data-stage="3"] .pm-copy-left{transform:translate(-85px,-12px) rotate(-13deg) scale(.8)}.pm-story[data-stage="3"] .pm-copy-right{transform:translate(85px,-20px) rotate(10deg) scale(.8)}}
@media(min-width:421px) and (max-width:760px){.pm-story[data-stage="3"] .pm-copy-left{transform:translate(-80px,-12px) rotate(-13deg) scale(.8)}.pm-story[data-stage="3"] .pm-copy-right{transform:translate(80px,-20px) rotate(10deg) scale(.8)}}
@media(prefers-reduced-motion:reduce){.pm-scene *, .pm-scene *::after{animation:none!important;transition:none!important}.pm-check path{stroke-dashoffset:0!important}}

/* The opening stage presents two full-size material options. */
.pm-base-options{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:translateX(-45px);transition:opacity 400ms var(--ease),transform 700ms var(--ease)}
.pm-paper-option{position:absolute;left:0;top:24px;bottom:8px;width:49%;text-align:center}
.pm-paper-product{position:absolute;inset:0 0 35px;animation:pm-sway 5s -1.5s ease-in-out infinite}
.pm-paper-product img{width:100%;height:100%;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(0 20px 15px #27422b18)}
.pm-paper-option>span{position:absolute;left:0;right:0;bottom:0;font:500 18px var(--body);color:#607765}
.pm-cotton-label{position:absolute;left:56%;right:0;bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 18px var(--body);color:var(--green)}
.pm-cotton-label svg{width:22px;height:22px}
.pm-story[data-stage="0"] .pm-base-options{opacity:1;transform:translateX(0)}
.pm-story[data-stage="0"] .pm-main{transform:translateX(-15%) rotate(3deg)}
.pm-story[data-motion="off"] .pm-paper-product{animation-play-state:paused}
@media(max-width:1100px){.pm-story[data-stage="0"] .pm-main{transform:translateX(-24%) scale(.9) rotate(3deg)}.pm-paper-option{left:-3%;width:55%;top:45px;bottom:20px}.pm-cotton-label{bottom:20px}.pm-paper-option>span,.pm-cotton-label{font-size:15px}}
@media(max-width:760px){.pm-story[data-stage="0"] .pm-main{transform:translateX(-15%) scale(.93) rotate(3deg)}.pm-paper-option{left:-3%;width:56%;top:30px;bottom:10px}.pm-cotton-label{bottom:10px}}
@media(max-width:420px){.pm-story[data-stage="0"] .pm-main{transform:translateX(-25%) scale(.87) rotate(3deg)}.pm-paper-option{top:32px;bottom:12px;width:57%;left:-4%}.pm-paper-option>span,.pm-cotton-label{font-size:14px}.pm-cotton-label svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.pm-paper-product{animation:none!important}.pm-base-options{transition:none!important}}

/* Selection follows the same clock as the story, including offscreen pauses. */
.pm-cotton-label{left:78%;right:auto;transform:translateX(-50%);width:max-content;padding:7px 16px;border-radius:24px}
.pm-choice-pointer{position:absolute;left:78%;bottom:0;width:32px;height:40px;z-index:8;opacity:0;filter:drop-shadow(0 3px 3px #173e3220)}
.pm-choice-pointer svg{display:block;width:100%;height:100%}
.pm-choice-click{position:absolute;left:calc(78% - 22px);bottom:10px;width:44px;height:44px;border:2px solid #447b59;border-radius:50%;opacity:0;z-index:7}
.pm-story[data-stage="0"] .pm-choice-pointer{animation:pm-choose-cursor 2600ms ease-in-out both paused;animation-delay:var(--pm-selection-delay,0ms)}
.pm-story[data-stage="0"] .pm-choice-click{animation:pm-choose-click 2600ms linear both paused;animation-delay:var(--pm-selection-delay,0ms)}
.pm-story[data-stage="0"] .pm-cotton-label{animation:pm-choose-label 2600ms linear both paused;animation-delay:var(--pm-selection-delay,0ms)}
.pm-story[data-stage="0"] .pm-cotton-label svg{animation:pm-choose-check 2600ms linear both paused;animation-delay:var(--pm-selection-delay,0ms)}
@keyframes pm-choose-cursor{0%,8%{opacity:0;transform:translate(-160px,-150px) rotate(-12deg)}18%{opacity:1}45%,50%{opacity:1;transform:translate(0,0) scale(1)}55%{opacity:1;transform:translate(0,0) scale(.8)}62%,82%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(25px,12px)}}
@keyframes pm-choose-click{0%,51%{opacity:0;transform:scale(.25)}55%{opacity:.75;transform:scale(.35)}78%,100%{opacity:0;transform:scale(1.6)}}
@keyframes pm-choose-label{0%,51%{background:transparent;color:#607765}60%,100%{background:#174f3d;color:#fff}}
@keyframes pm-choose-check{0%,51%{opacity:0;transform:scale(.5)}62%,100%{opacity:1;transform:scale(1)}}
@media(max-width:1100px){.pm-choice-pointer{bottom:12px}.pm-choice-click{bottom:22px}}
@media(max-width:760px){.pm-choice-pointer{bottom:2px;width:26px;height:33px}.pm-choice-click{bottom:10px}.pm-cotton-label{padding:6px 12px}}
@media(prefers-reduced-motion:reduce){.pm-choice-pointer,.pm-choice-click{display:none}.pm-cotton-label{background:#174f3d;color:#fff}}