/* Forever Page skins. Shared by the public page, the builder preview and the landing example. */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }

.fp { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --hand: 'Caveat', 'Segoe Print', cursive;
  position: relative; overflow: hidden; isolation: isolate; font-family: var(--serif);
  padding: clamp(28px, 7vw, 72px) clamp(14px, 4vw, 40px); min-height: 100%; }
.fp *, .fp *::before, .fp *::after { box-sizing: border-box; }
.fp .sheet { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.fp .body p { margin: 0 0 1em; }
.fp .body { overflow-wrap: anywhere; }
.fp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Watermark */
.fp .wm { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column;
  justify-content: space-around; align-items: center; overflow: hidden; }
.fp .wm span { font: 800 clamp(40px, 9vw, 96px)/1 var(--serif); letter-spacing: .08em; color: rgba(120, 120, 120, .16);
  transform: rotate(-24deg); white-space: nowrap; user-select: none; }

/* Entrance */
@keyframes fp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fp .sheet { animation: fp-rise .9s cubic-bezier(.2, .7, .2, 1) both; }

/* ---------- SANTA ---------- */
.fp--santa { background: radial-gradient(120% 80% at 50% 0%, #20375a 0%, #142540 45%, #0b1628 100%); color: #3a2a1e; }
.fp--santa .sheet { background: #fbf4e4; border-radius: 4px; padding: clamp(26px, 6vw, 56px) clamp(20px, 6vw, 58px) clamp(34px, 7vw, 64px);
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -20px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  background-image:
    radial-gradient(rgba(150, 110, 60, .07) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(230, 210, 170, .25));
  background-size: 5px 5px, 100% 100%; }
.fp--santa .sheet::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(158, 28, 23, .35);
  outline: 1px solid rgba(158, 28, 23, .18); outline-offset: 4px; pointer-events: none; border-radius: 2px; }
.fp--santa .lh { text-align: center; color: #9e1c17; padding-bottom: 18px; border-bottom: 1px solid rgba(158, 28, 23, .25); margin-bottom: 22px; }
.fp--santa .crest { width: 58px; height: 58px; color: #9e1c17; display: block; margin: 0 auto 8px; }
.fp--santa .lh-kicker { margin: 0; font: italic 400 15px/1.2 var(--serif); color: #7b5a3d; letter-spacing: .02em; }
.fp--santa .lh-title { margin: 2px 0 4px; font: 700 clamp(34px, 8vw, 50px)/1 var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -.01em; color: #9e1c17; }
.fp--santa .lh-sub { margin: 0; font: 500 11px/1.4 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: #6d5440; }
.fp--santa .cert { position: relative; text-align: center; margin: 0 0 26px; padding: 18px 18px 16px; border: 1.5px solid #c9a24a;
  background: linear-gradient(180deg, #fff9e9, #f7ebcc); border-radius: 3px; box-shadow: 0 0 0 4px #fbf4e4, 0 0 0 5px rgba(201, 162, 74, .5); }
.fp--santa .holly { position: absolute; width: 74px; top: -20px; left: 50%; transform: translateX(-50%); }
.fp--santa .cert-k { margin: 6px 0 6px; font: 700 11px/1 var(--serif); letter-spacing: .28em; text-transform: uppercase; color: #8b6a1f; }
.fp--santa .cert-t { margin: 0; font: italic 400 17px/1.45 var(--serif); color: #3a2a1e; }
.fp--santa .cert-t strong { font-style: normal; font-weight: 700; color: #9e1c17; }
.fp--santa .salute { font: 400 25px/1.2 var(--hand); font-size: 30px; color: #2a3f66; margin: 0 0 10px; }
.fp--santa .body { font: 400 17.5px/1.7 var(--serif); color: #3a2a1e; }
.fp--santa .sign { margin-top: 18px; }
.fp--santa .sign-k { margin: 0; font: italic 400 16px/1.3 var(--serif); color: #6d5440; }
.fp--santa .sign-n { margin: 0; font: 700 56px/1 var(--hand); color: #9e1c17; transform: rotate(-4deg); transform-origin: left; display: inline-block; }
.fp--santa .seal { position: absolute; width: 78px; right: clamp(16px, 5vw, 46px); bottom: clamp(18px, 5vw, 40px); transform: rotate(12deg);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.fp--santa .postmark { position: absolute; top: 18px; right: 18px; width: 74px; height: 74px; border: 2px solid rgba(42, 63, 102, .45); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(14deg);
  font: 700 9px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(42, 63, 102, .6); }
.fp--santa .postmark::after { content: ''; position: absolute; left: -26px; right: -10px; top: 50%; height: 14px; margin-top: -7px;
  background: repeating-linear-gradient(180deg, rgba(42, 63, 102, .35) 0 2px, transparent 2px 5px); z-index: -1; }
@media (max-width: 480px) { .fp--santa .postmark { width: 58px; height: 58px; font-size: 7px; top: 12px; right: 12px; } .fp--santa .seal { width: 60px; } }

/* snowfall: three layers of tiled radial gradients drifting down */
.fx-snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-snow i { position: absolute; inset: 0; background-repeat: repeat;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.6px, transparent 2.2px), radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.1px, transparent 1.6px);
  --s: 140px; background-size: var(--s) var(--s); animation: fp-snow1 20s linear infinite; }
.fx-snow i:nth-child(2) { --s: 220px; opacity: .65; filter: blur(.7px); animation-name: fp-snow2; animation-duration: 36s; }
.fx-snow i:nth-child(3) { --s: 320px; opacity: .9; animation-name: fp-snow3; animation-duration: 16s;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 2.4px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, .8) 0 1.6px, transparent 2.2px); }
@keyframes fp-snow1 { from { background-position: 0 0, 50px 70px; } to { background-position: 140px 560px, 190px 630px; } }
@keyframes fp-snow2 { from { background-position: 30px 10px, 140px 120px; } to { background-position: -190px 890px, -80px 1000px; } }
@keyframes fp-snow3 { from { background-position: 10px 40px, 180px 220px; } to { background-position: 330px 1320px, 500px 1500px; } }

/* ---------- LOVE ---------- */
.fp--love { background: radial-gradient(90% 70% at 20% 10%, #fde3dd 0%, transparent 60%), radial-gradient(80% 60% at 90% 90%, #f3d9e6 0%, transparent 60%), #f8ece6; color: #4b2b2f; }
.fp--love .sheet { background: #fffaf6; padding: clamp(34px, 7vw, 64px) clamp(22px, 6vw, 60px); border-radius: 2px;
  box-shadow: 0 24px 50px -24px rgba(122, 52, 60, .35), 0 1px 2px rgba(122, 52, 60, .12);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(196, 120, 120, .14) 33px 34px); background-position: 0 22px; transform: rotate(-.6deg); }
.fp--love .sprig { position: absolute; width: 54px; top: -22px; right: 18px; transform: rotate(18deg); }
.fp--love .for { margin: 0; font: 600 34px/1 var(--hand); color: #b4495a; }
.fp--love .head { margin: 6px 0 2px; font: italic 500 clamp(32px, 7.5vw, 48px)/1.05 var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; color: #4b2b2f; letter-spacing: -.015em; }
.fp--love .since { margin: 12px 0 0; font: 500 12px/1.5 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: #9c6a6e; }
.fp--love .since-n { font: 700 22px/1 var(--serif); letter-spacing: 0; color: #b4495a; margin-right: 4px; font-variant-numeric: tabular-nums; }
.fp--love .since-d { display: block; letter-spacing: .08em; text-transform: none; font-style: italic; font-size: 13px; }
.fp--love .body { margin-top: 26px; font: italic 400 18.5px/34px var(--serif); color: #4b2b2f; }
.fp--love .body p { margin: 0 0 34px; }
.fp--love .sign { margin: 6px 0 0; text-align: right; font: italic 400 17px/1 var(--serif); color: #9c6a6e; }
.fp--love .sign span { display: block; margin-top: 6px; font: 700 44px/1 var(--hand); color: #b4495a; }
.fx-hearts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-hearts i { position: absolute; bottom: -40px; width: 16px; height: 16px; opacity: 0; animation: fp-float 14s ease-in infinite;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e08a96' d='M12 21s-8-5.3-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.7-8 11-8 11z'/%3E%3C/svg%3E"); }
.fx-hearts i:nth-child(1) { left: 8%; animation-delay: 0s; } .fx-hearts i:nth-child(2) { left: 22%; animation-delay: 4s; width: 11px; height: 11px; }
.fx-hearts i:nth-child(3) { left: 78%; animation-delay: 2s; } .fx-hearts i:nth-child(4) { left: 90%; animation-delay: 7s; width: 22px; height: 22px; }
.fx-hearts i:nth-child(5) { left: 60%; animation-delay: 10s; width: 12px; height: 12px; }
@keyframes fp-float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; } }

/* ---------- BIRTHDAY ---------- */
.fp--birthday { background: #fff4e0; color: #2d2440;
  background-image: radial-gradient(circle at 15% 20%, #ffd9a8 0 18%, transparent 40%), radial-gradient(circle at 85% 80%, #ffc9d6 0 16%, transparent 42%); }
.fp--birthday .sheet { text-align: center; background: #fffdf8; border-radius: 22px; padding: clamp(28px, 6vw, 54px) clamp(20px, 6vw, 56px);
  box-shadow: 0 0 0 2px #2d2440, 8px 8px 0 0 #2d2440; }
.fp--birthday .candles { width: min(220px, 60%); display: block; margin: -4px auto 4px; }
.fp--birthday .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fp-flicker 1.4s ease-in-out infinite alternate; }
@keyframes fp-flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.92, 1.08) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); } }
.fp--birthday .kick { margin: 0; font: 700 13px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: #e0604f; }
.fp--birthday .name { margin: 10px 0 0; font: 800 clamp(44px, 12vw, 84px)/.95 var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1; letter-spacing: -.03em; color: #2d2440; overflow-wrap: anywhere; }
.fp--birthday .age { margin: 10px 0 0; }
.fp--birthday .age span { display: inline-block; min-width: 84px; padding: 6px 18px 8px; border-radius: 999px; background: #ffd34e; box-shadow: 0 0 0 2px #2d2440;
  font: italic 700 34px/1 var(--serif); color: #2d2440; transform: rotate(-3deg); }
.fp--birthday .body { margin: 26px auto 0; max-width: 34em; text-align: left; font: 400 18px/1.65 var(--serif); }
.fp--birthday .sign { margin: 18px 0 0; font: 700 34px/1.1 var(--hand); color: #e0604f; }
.fp--birthday .sign-k { display: block; font: italic 400 15px/1.4 var(--serif); color: #6e6380; }
.fx-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: .9; animation: fp-fall 9s linear infinite; }
.fx-confetti i:nth-child(4n+1) { background: #e0604f; } .fx-confetti i:nth-child(4n+2) { background: #ffd34e; }
.fx-confetti i:nth-child(4n+3) { background: #5ab0c8; width: 7px; height: 7px; border-radius: 50%; } .fx-confetti i:nth-child(4n) { background: #7cc47f; }
.fx-confetti i:nth-child(1) { left: 4%; animation-delay: -1s; } .fx-confetti i:nth-child(2) { left: 11%; animation-delay: -5s; animation-duration: 11s; }
.fx-confetti i:nth-child(3) { left: 18%; animation-delay: -3s; } .fx-confetti i:nth-child(4) { left: 26%; animation-delay: -7s; animation-duration: 12s; }
.fx-confetti i:nth-child(5) { left: 33%; animation-delay: -2s; } .fx-confetti i:nth-child(6) { left: 41%; animation-delay: -8s; animation-duration: 10s; }
.fx-confetti i:nth-child(7) { left: 49%; animation-delay: -4s; } .fx-confetti i:nth-child(8) { left: 57%; animation-delay: -6s; animation-duration: 13s; }
.fx-confetti i:nth-child(9) { left: 64%; animation-delay: -1.5s; } .fx-confetti i:nth-child(10) { left: 72%; animation-delay: -9s; }
.fx-confetti i:nth-child(11) { left: 79%; animation-delay: -3.5s; animation-duration: 11s; } .fx-confetti i:nth-child(12) { left: 86%; animation-delay: -6.5s; }
.fx-confetti i:nth-child(13) { left: 92%; animation-delay: -2.5s; animation-duration: 12s; } .fx-confetti i:nth-child(14) { left: 97%; animation-delay: -7.5s; }
@keyframes fp-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(120vh) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
  .fp .sheet, .fx-snow i, .fx-hearts i, .fx-confetti i, .fp--birthday .flame { animation: none !important; }
  .fx-hearts i { opacity: .5; bottom: auto; top: 30%; }
  .fx-confetti i { top: auto; bottom: 6%; }
}
@media print { .fx-snow, .fx-hearts, .fx-confetti { display: none; } .fp { padding: 0; background: #fff !important; } }