/* Text typography, margins, count and colors deliberately inherit the original Why section. */
.kp-why-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,30%);gap:32px;max-width:1400px;margin:auto;align-items:center}
.kp-why-photo .kp-why-inner{width:100%;margin:0}
.kp-pack-card{box-sizing:border-box;position:relative;align-self:center;min-width:0;height:min(var(--kp-text-height,260px),260px);max-height:260px;border:1px solid #dbe2e9;border-radius:18px;overflow:hidden;background:#fff;isolation:isolate}
.kp-pack-photo-stage{position:absolute;inset:0;overflow:hidden}.kp-pack-photo-stage canvas{display:block;width:100%;height:100%}

@media(max-width:1000px){.kp-why-layout{grid-template-columns:minmax(0,1fr) 260px;gap:22px}.kp-why-photo .kp-why-inner{grid-template-columns:120px minmax(0,1fr);gap:24px}.kp-why-photo .kp-why-count{padding-right:18px}}
@media(max-width:760px){.kp-why-layout{grid-template-columns:1fr;gap:22px}.kp-pack-card{width:100%;max-width:420px;justify-self:center;height:min(var(--kp-text-height,260px),260px)}}
@media(max-width:600px){.kp-why-photo .kp-why-inner{grid-template-columns:1fr;gap:24px}.kp-why-photo .kp-why-count{padding:0}}



.kp-pack-card{container-type:size}
.kp-pack-photo-stage{perspective:900px}
.kp-photo-model{position:absolute;width:min(71cqh,58cqw);aspect-ratio:1.15;left:50%;top:28%;transform:translateX(-50%) scale(1.28);transform-style:preserve-3d}
.kp-photo-rig{position:absolute;inset:0;transform-origin:50% 55%;transform-style:preserve-3d}
.kp-part{position:absolute;inset:0;background-image:url(photo-parts-75343.png);background-size:300% 100%;background-repeat:no-repeat;backface-visibility:hidden;will-change:transform}
.kp-tray-back{background-position:0 0;z-index:1}
.kp-vials{background-position:50% 0;transform:translateY(-6%);z-index:2}
.kp-tray-front{background-position:0 0;clip-path:polygon(0 64%,100% 64%,100% 100%,0 100%);opacity:.8;z-index:3;pointer-events:none}
.kp-cover{position:absolute;inset:0;transform:translateY(-21%);transform-style:preserve-3d;z-index:4}
.kp-cover-photo{background-position:100% 0;transform:scaleY(.75)}
.kp-cover-label{position:absolute;left:9%;top:31%;width:82%;aspect-ratio:7.5/5.3;background:url(rt10-label.png) center/94.8683% 94.8683% no-repeat;transform-origin:50% 0;transform:translateZ(2px) rotateX(64deg);background-color:#e6ecf0;border:0;box-shadow:none;box-sizing:border-box;border-radius:2px;backface-visibility:hidden;z-index:5}
.kp-pack-shadow{position:absolute;left:9%;right:9%;bottom:6%;height:8%;border-radius:50%;background:#10233a15;filter:blur(6px)}
.kp-pack-card.is-playing .kp-photo-model{animation:kp-photo-entry 10s cubic-bezier(.4,0,.2,1) both}
.kp-pack-card.is-playing .kp-photo-rig{animation:kp-photo-tilt 10s cubic-bezier(.4,0,.2,1) both}
.kp-pack-card.is-playing .kp-cover{animation:kp-photo-cover 10s cubic-bezier(.4,0,.2,1) both}
.kp-pack-card.is-playing .kp-vials{animation:kp-photo-vials 10s cubic-bezier(.4,0,.2,1) both,kp-perspective-width 10s cubic-bezier(.4,0,.2,1) both}
@keyframes kp-photo-entry{0%{left:100%;top:28%;transform:translateX(-5%) rotateY(-32deg) rotateZ(-17deg) scale(1.1)}15%,17%{left:50%;top:28%;transform:translateX(-50%) rotateY(0) rotateZ(0) scale(1.28)}29%,35%{left:50%;top:3%;transform:translateX(-50%) rotateY(0) rotateZ(0) scale(1.45)}47%,49%{left:50%;top:28%;transform:translateX(-50%) rotateY(0) rotateZ(0) scale(1.28)}72%,100%{left:35%;top:39%;transform:translateX(-50%) rotateY(0) rotateZ(0) scale(1)}}
@keyframes kp-photo-tilt{0%,17%{transform:rotateX(0)}29%,35%{transform:rotateX(-64deg)}47%,100%{transform:rotateX(0)}}
@keyframes kp-photo-cover{0%,48%{transform:translateY(-21%)}59%{transform:translateY(-46%)}72%,100%{transform:translate(86%,-1%) rotateZ(18deg) scale(.66)}}
@keyframes kp-photo-vials{0%,17%{transform:translateY(-6%);clip-path:inset(0)}29%,35%{transform:translateY(-6%);clip-path:inset(44% 0 0)}47%,73%{transform:translateY(-6%);clip-path:inset(0)}95%,100%{transform:translateY(-65%);clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.kp-pack-card .kp-photo-model{animation:none!important;left:35%;top:39%;transform:translateX(-50%)}.kp-pack-card .kp-photo-rig{animation:none!important;transform:none}.kp-pack-card .kp-cover{animation:none!important;transform:translate(86%,-1%) rotateZ(18deg) scale(.66)}.kp-pack-card .kp-vials{animation:none!important;transform:translateY(-65%)}}

/* Keep the photographed sides behind the physical lid plane as it turns forward. */
.kp-pack-card.is-playing .kp-cover-photo{animation:kp-lid-occlusion 10s cubic-bezier(.4,0,.2,1) both,kp-perspective-width 10s cubic-bezier(.4,0,.2,1) both}
.kp-pack-card.is-playing .kp-tray-back,.kp-pack-card.is-playing .kp-vials,.kp-pack-card.is-playing .kp-tray-front{backface-visibility:hidden}
@keyframes kp-lid-occlusion{0%,17%,47%,100%{clip-path:inset(0)}29%,35%{clip-path:inset(60% 0 0)}}

@media(prefers-reduced-motion:reduce){.kp-pack-card .kp-cover-photo{animation:none!important;clip-path:none}}

.kp-pack-card.is-playing .kp-tray-back{animation:kp-body-occlusion 10s cubic-bezier(.4,0,.2,1) both,kp-perspective-width 10s cubic-bezier(.4,0,.2,1) both}
@keyframes kp-body-occlusion{0%,17%,47%,100%{clip-path:inset(0)}29%,35%{clip-path:inset(40% 0 0)}}
@media(prefers-reduced-motion:reduce){.kp-pack-card .kp-tray-back{animation:none!important;clip-path:none}}

/* The photographed side walls sit inside the lid silhouette when viewed head-on.
   Restore their full width at 47%, before the cover starts lifting at 48%. */
.kp-pack-card.is-playing .kp-tray-front{animation:kp-perspective-width 10s cubic-bezier(.4,0,.2,1) both}
@keyframes kp-perspective-width{0%,17%,47%,100%{scale:1 1}29%,35%{scale:.80 1}}
@media(prefers-reduced-motion:reduce){.kp-pack-card .kp-part{animation:none!important;scale:1}}

.kp-pack-card.is-playing .kp-photo-model,.kp-pack-card.is-playing .kp-photo-rig,.kp-pack-card.is-playing .kp-cover,.kp-pack-card.is-playing .kp-part{animation-iteration-count:infinite}