.keepsake{position:relative;padding-block:95px 66px;border-top:1px solid #d2d9e51d;isolation:isolate;overflow-x:clip}
.keepsake-main{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding-bottom:63px}
.keepsake-copy h2{font-size:clamp(44px,5.2vw,78px);font-weight:450;line-height:1.05;letter-spacing:-.055em;margin:29px 0 22px;color:#eeeef1}
.keepsake-copy h2 em{font-style:normal;color:#959da9;font-weight:400}
.keepsake-copy>p{font-size:14px;line-height:1.75;color:#a0a8b5;max-width:300px;margin:0}
.keepsake-mascot-wrap{display:flex;align-items:center;gap:21px;margin:21px 0 18px;min-height:190px}
.keepsake-mascot{display:block;width:clamp(160px,16vw,225px);height:auto;filter:drop-shadow(0 15px 25px #0008);transform:rotate(-7deg)}
.keepsake-mascot-wrap[hidden]{display:none}.keepsake-aside{font-size:11px;line-height:1.8;letter-spacing:.01em;color:#818b9a}
.keepsake-link{display:inline-flex;align-items:center;gap:23px;color:#e6e9ef;font-size:12px;font-weight:450;padding:12px 0;border-bottom:1px solid #d4ddeb50;text-decoration:none}
.keepsake-link span{width:28px;height:1px;background:#b4bdcb;transition:width .25s}.keepsake-link:hover span{width:40px}
.keepsake-studio{position:relative;min-width:0;padding:22px 0 0}
.keepsake-studio:before{content:'';position:absolute;inset:10% -12% 8%;background:radial-gradient(ellipse,#4b566426,transparent 68%);z-index:-1;pointer-events:none}
.keepsake-studio-heading{display:flex;justify-content:space-between;padding-inline:16px;color:#768191;font-size:9px;letter-spacing:.14em}
.keepsake-stack{position:relative;height:416px;margin:35px 0 22px;perspective:1100px}
.keepsake-sheet{position:absolute;top:22px;left:50%;width:230px;aspect-ratio:2480/3508;margin:0;border:1px solid #dddcd436;background:#12151b;box-shadow:0 18px 40px #0009;overflow:hidden;border-radius:2px;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.7,.25,1),filter .55s;filter:brightness(.67);z-index:1;display:grid;place-items:center}
.keepsake-sheet>span{font-size:13px;color:#a9b1bf}.keepsake-sheet img{display:block;width:100%;height:100%;object-fit:contain}
.keepsake-sheet[data-style=classic]{transform:translateX(calc(-50% - 105px)) rotate(-13deg)}
.keepsake-sheet[data-style=cosmic]{transform:translateX(calc(-50% + 105px)) rotate(13deg)}
.keepsake-sheet[data-style=fun]{transform:translateX(-50%) translateY(15px)}
.keepsake-sheet.is-active{transform:translateX(-50%) translateY(-9px) rotate(-3deg) scale(1.08);filter:brightness(1);z-index:3;box-shadow:0 26px 48px #000c}
.keepsake-stack[data-active-style=classic] .keepsake-sheet[data-style=fun]{transform:translateX(calc(-50% - 105px)) rotate(-13deg)}
.keepsake-stack[data-active-style=cosmic] .keepsake-sheet[data-style=fun]{transform:translateX(calc(-50% + 105px)) rotate(13deg)}
.keepsake-style-picker{display:flex;justify-content:center;gap:23px}
.keepsake-style-picker button{position:relative;padding:9px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:#7d899c;font-size:11px;line-height:1.5;transition:color .2s,border-color .2s}
.keepsake-style-picker button[aria-pressed=true]{color:#f0f1f4;border-color:#dbe1eb9c}.keepsake-style-picker button:hover{color:#f0f1f4}
.keepsake-style-picker button:focus-visible,.keepsake-link:focus-visible{outline:2px solid #dae0eb;outline-offset:5px}
.keepsake-caption{text-align:center;color:#788393;font-size:10px;line-height:1.6;margin:17px 0 0}
.keepsake-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:0;padding:31px 0 0;border-top:1px solid #d2d9e524}
.keepsake-steps li{display:flex;gap:18px;align-items:flex-start}.keepsake-steps li>span{font-size:10px;color:#68778c;font-variant-numeric:tabular-nums;padding-top:5px}
.keepsake-steps h3{font-size:16px;font-weight:450;letter-spacing:-.025em;margin:0 0 9px;color:#e0e5ed}.keepsake-steps p{font-size:11px;line-height:1.7;color:#818d9e;margin:0}
@media(min-width:1700px){.keepsake-stack{height:470px}.keepsake-sheet{width:270px}.keepsake-main{gap:9%}}
@media(min-width:761px) and (max-width:1100px){.keepsake-main{gap:4%}.keepsake-sheet{width:195px}.keepsake-stack{height:370px}.keepsake-studio{transform:scale(.94)}.keepsake-aside{font-size:10px}}
@media(max-width:760px){
 .keepsake{padding-block:57px 44px}.keepsake-main{grid-template-columns:1fr;gap:42px;padding-bottom:38px}
 .keepsake-copy h2{font-size:48px;margin-top:24px}.keepsake-copy>p{font-size:13px}.keepsake-mascot-wrap{min-height:0;margin:14px 0 7px;gap:22px}.keepsake-mascot{width:158px}.keepsake-aside{font-size:10px}.keepsake-link{font-size:11px}
 .keepsake-studio{width:100%;max-width:440px;margin:auto;padding:0}.keepsake-studio-heading{padding:0;font-size:8px}
 .keepsake-stack{height:345px;margin:28px 0 10px;--fan-offset:65px}.keepsake-sheet{width:190px;top:15px}
 .keepsake-sheet[data-style=classic],.keepsake-stack[data-active-style=classic] .keepsake-sheet[data-style=fun]{transform:translateX(calc(-50% - var(--fan-offset))) rotate(-11deg)}
 .keepsake-sheet[data-style=cosmic],.keepsake-stack[data-active-style=cosmic] .keepsake-sheet[data-style=fun]{transform:translateX(calc(-50% + var(--fan-offset))) rotate(11deg)}
 .keepsake-sheet.is-active[data-style]{transform:translateX(-50%) translateY(-6px) rotate(-3deg) scale(1.04)}
 .keepsake-style-picker{gap:23px}.keepsake-caption{font-size:9px}
 .keepsake-steps{grid-template-columns:1fr;gap:22px;padding-top:27px}.keepsake-steps h3{font-size:15px;margin-bottom:5px}.keepsake-steps p{font-size:11px}
}
@media(max-width:370px){.keepsake-copy h2{font-size:43px}.keepsake-sheet{width:165px}.keepsake-stack{height:303px;--fan-offset:55px}.keepsake-style-picker{gap:18px}}
@media(prefers-reduced-motion:reduce){.keepsake-sheet,.keepsake-link span,.keepsake-style-picker button{transition:none}}
html[data-motion=off] .keepsake-sheet{transition:none}
.keepsake-stack{--fan-offset:105px}
.keepsake-stack[data-active-style] .keepsake-sheet[data-style]{transform:translateX(calc(-50% + var(--fan-slot,0)*var(--fan-offset))) translateY(12px) rotate(calc(var(--fan-slot,0)*13deg));z-index:1}
.keepsake-stack[data-active-style] .keepsake-sheet.is-active[data-style]{transform:translateX(-50%) translateY(-9px) rotate(-3deg) scale(1.08);z-index:3}
.keepsake-style-picker{gap:20px;flex-wrap:wrap}
@media(max-width:760px){.keepsake-stack{--fan-offset:65px}.keepsake-style-picker{gap:18px}.keepsake-stack[data-active-style] .keepsake-sheet.is-active[data-style]{transform:translateX(-50%) translateY(-6px) rotate(-3deg) scale(1.04)}.certificate-style-options{gap:10px}}
@media(max-width:370px){.keepsake-stack{--fan-offset:55px}}