@font-face{font-family:"Marck Script";src:url("/assets/marck-script.ttf") format("truetype");font-display:swap}
@font-face{font-family:Caveat;src:url("/assets/caveat.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:EuroScript;src:url("assets/euroscript.ttf") format("truetype");font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Marck+Script&family=Playfair+Display:wght@500;600&display=swap');
#pm{padding:12px 0;color:#343820;font:15px/1.5 system-ui,sans-serif}
#pm *{box-sizing:border-box}
#pm [hidden]{display:none!important}
#pm .phone{width:min(100%,402px);margin:auto;background:#faf5e9;border:1px solid #dcd3c0;border-radius:25px;overflow:hidden;box-shadow:0 10px 30px #251b1519}
#pm header{padding:15px 20px;border-bottom:1px solid #e5dbc8;display:flex;justify-content:space-between;align-items:center;gap:10px}
#pm header img{width:94px;display:block}
#pm small{font-size:12px;color:#62644d}
#pm main{padding:20px}
#pm h1,#pm h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1.08;margin:6px 0 12px;color:#343820}
#pm h1{font-size:43px} #pm h2{font-size:31px}
#pm p{margin:0 0 14px}
#pm .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#62644d}
#pm .hero{width:100%;height:275px;object-fit:cover;object-position:50% 62%;display:block;border-radius:120px 120px 12px 12px;margin:18px 0 8px}
#pm .compare{display:block;width:100%;border-radius:12px;margin:12px 0}
#pm button,#pm a.action{font:inherit;min-height:44px;padding:9px 13px;border:1px solid #cfc8b1;border-radius:11px;background:#fffaf0;color:#343820;cursor:pointer;text-decoration:none}
#pm button[aria-pressed=true]{background:#e4e8d3;border-color:#666f45}
#pm .primary,#pm a.primary{display:block;width:100%;background:#474e2d;color:#fffdf4;border-color:#474e2d;margin-top:14px;text-align:center}
#pm button:disabled{opacity:.55;cursor:default}
#pm .row{display:flex;gap:7px;margin:12px 0;flex-wrap:wrap}
#pm .row button{flex:1}
#pm .choices{display:grid;gap:7px;margin:12px 0}
#pm .choices button{text-align:left}
#pm .choices strong,#pm label.field{display:block}
#pm .stack>*+*{margin-top:10px}
#pm input:not([type=checkbox]),#pm textarea,#pm select{display:block;width:100%;margin:4px 0 0;border:1px solid #cfc8b1;border-radius:9px;padding:9px;background:#fffdf6;color:#343820;font:16px system-ui;min-height:44px}
#pm textarea{min-height:96px;resize:vertical}
#pm .paper{aspect-ratio:148/210;width:min(100%,300px);margin:10px auto;background:#fffaeb;position:relative;isolation:isolate;overflow:hidden;border:1px solid #ded2b5;box-shadow:0 5px 12px #52452722;color:#42492b}
#pm .paper:not(.with-photo) .script{inset:20% 8% 20%;padding:10px 7px;isolation:isolate;font-size:clamp(20px,6.1vw,26px)}
#pm .paper:not(.with-photo) .script::before{content:"";position:absolute;inset:-15% -11%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#fff9eef5 29%,#fff9eede 49%,#fff9ee95 64%,#fff9ee36 76%,transparent 88%)}
#pm .paper-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
#pm .paper .portrait{width:100%;height:44%;object-fit:cover;background:#efe6d2;display:block}
#pm .paper .script{position:absolute;inset:9% 8% 25%;display:flex;flex-direction:column;justify-content:center;text-align:center;font:30px/1.1 EuroScript,'Marck Script','Segoe Script',cursive;white-space:pre-wrap;overflow-wrap:anywhere;gap:9px}
#pm .paper.with-photo .script{inset:48% 7% 6%;font-size:clamp(20px,6.4vw,25px)}
#pm .paper .script small{font:inherit;font-size:.76em}
#pm .paper .script{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:5px}
#pm .paper .writing-area{display:grid;grid-template-columns:minmax(0,1fr);align-items:safe center;overflow:hidden;min-height:0}
#pm .paper .script small{position:relative;isolation:isolate;min-height:1.25em;padding:2px 0 5px}
#pm .paper .script small:not(:empty)::before{content:"";position:absolute;inset:-6px -10px -3px;z-index:-1;background:radial-gradient(ellipse at center,#fff9eef0 24%,#fff9eeb5 51%,#fff9ee40 74%,transparent 100%)}
#pm .paper.with-photo .script{inset:48% 6% 8%}
#pm .paper.back{display:grid;place-content:center;text-align:center;padding:18px}
#pm .paper.back .back-copy img{width:108px;height:108px;margin:14px auto;padding:8px;background:white;image-rendering:pixelated}
#pm .paper.back strong{font:29px/1 EuroScript,'Marck Script','Segoe Script',cursive}
#pm .box{background:#f0ead8;border-radius:13px;padding:12px;margin:12px 0;overflow-wrap:anywhere}
#pm .box p{margin:5px 0} #pm .caption{text-align:center;display:block}
#pm .notice{color:#913d35;margin:8px 0}
#pm .pattern{background-image:linear-gradient(var(--pattern-wash,#faf5e9d0),var(--pattern-wash,#faf5e9d0)),url("assets/pattern.png");background-size:auto,210px}
#pm .back-copy{position:relative;isolation:isolate;display:grid;justify-items:center;width:100%;padding:12px 0}
#pm .back-copy::before{content:"";position:absolute;inset:-22px -21px;z-index:-1;background:radial-gradient(ellipse,#fff9eefb 29%,#fff9eee6 48%,#fff9ee80 65%,transparent 82%);pointer-events:none}
#pm .paper.back{place-content:center stretch}
#pm .paper.back .back-copy strong{font-size:clamp(20px,6.8vw,27px);white-space:nowrap}
#pm .back-copy small{max-width:165px}
#pm .gift-preview img{display:block;width:100%;height:198px;object-fit:contain;background:#eee3cc;border-radius:12px;margin-bottom:6px}
#pm .paper .portrait-frame{position:relative;width:100%;height:50%;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 6px),transparent),linear-gradient(to right,transparent,#000 6px,#000 calc(100% - 6px),transparent);mask-composite:intersect}
#pm .paper .portrait-frame .portrait{position:absolute;width:auto;height:auto;max-width:none;display:block;mask-image:linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 6px),transparent),linear-gradient(to right,transparent,#000 6px,#000 calc(100% - 6px),transparent);mask-composite:intersect}
#pm .paper.with-photo .script{padding-top:8px;isolation:isolate}
#pm .paper.with-photo .script::before{content:"";position:absolute;inset:-3% -5% -4%;z-index:-1;pointer-events:none;background:#fff9eee8;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent),linear-gradient(to right,transparent,#000 13%,#000 87%,transparent);mask-composite:intersect}
#pm .date-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:4px;background:#fffdf6}
#pm .date-calendar{margin-top:8px;padding:12px;background:#fffaf0;border:1px solid #ded2b5;border-radius:12px}
#pm .date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:8px 0;text-align:center;align-items:center}
#pm .date-grid button{width:100%;padding:0;font-size:14px}
#pm .date-grid .holiday{border:2px solid #777d4f;border-radius:50%;font-weight:600}
#pm .xl-contacts{display:flex;gap:8px;flex-wrap:wrap}
#pm .xl-contacts .action{display:inline-flex;align-items:center;font-size:13px;padding:5px 10px}
#pm .gift-preview{overflow:hidden}
#pm .gift-preview img{object-fit:contain}
#pm .gift-preview img[data-close=true]{object-fit:cover;object-position:50% 35%}
#pm .gift-angles{margin:4px 0 12px}
#pm .review-actions{display:grid;gap:10px;margin:10px 0 0}
#pm{overflow-anchor:none}
#pm [data-step] :is(h1,h2){scroll-margin-top:14px}
#pm #pm-card-fields{min-width:0}
#pm #pm-upload:not([hidden]){margin-bottom:12px}
#pm .promo-entry{margin:12px 0;color:#555941;font-size:13px;min-width:0}
#pm .promo-row{display:flex;align-items:center;gap:8px}
#pm .promo-row #pm-promo{margin-top:4px;min-width:0}
#pm .promo-row .promo-apply{margin-top:4px;font-size:13px;padding-inline:10px}
#pm .promo-entry [role=status]{margin:4px 0 0}
#pm .promo-entry [role=status]:empty{display:none}
#pm .design-options{margin-top:12px;padding:10px 12px;background:#f0ead8;border-radius:10px}
#pm .design-options summary{cursor:pointer;min-height:28px}
#pm .design-options label{margin-top:8px}
#pm .paper[data-tone=olive] .paper-art{filter:saturate(.7) hue-rotate(25deg);opacity:.72}
#pm .paper[data-tone=olive]{background-color:#c3c99a}
#pm .paper[data-tone=cool] .paper-art{filter:saturate(.58) hue-rotate(17deg);opacity:.64}
#pm .paper[data-tone=cool]{background-color:#b5c7db}
#pm .paper[data-hand=marck] .script,#pm .paper[data-hand=marck] .back-copy strong{font-family:'Marck Script','Segoe Script',cursive}
#pm .paper[data-hand=caveat] .script,#pm .paper[data-hand=caveat] .back-copy strong{font-family:Caveat,'Marck Script',cursive}
#pm .paper[data-hand=euro] .script,#pm .paper[data-hand=euro] .back-copy strong{font-family:EuroScript,'Marck Script',cursive}
#pm button.soft-link{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px}
#pm .song-note{margin-top:18px;padding-top:14px;border-top:1px solid #e5dbc8}
#pm .song-note strong{display:block;font-size:14px}
#pm .song-note p{margin:4px 0 0;font-size:13px;color:#555941}
#pm a.action.soft-link{display:inline-flex;align-items:center;background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font-size:13px;padding-left:0}
#pm .photo-settings{margin:8px 0 14px;padding:10px 12px;background:#f0ead8;border-radius:12px}
#pm .photo-settings input[type=range]{padding:0;min-height:36px;accent-color:#59603b}
#pm .step-label{display:block;margin:12px 0 5px;font-weight:600}
#pm .side-nav{padding:4px;background:#eee7d5;border-radius:14px}
#pm .side-nav button{border-color:transparent}
#pm .face-options{margin:6px 0 12px}
#pm .contact-footer{display:flex;gap:8px;flex-wrap:wrap}
#pm footer{padding:10px 20px 16px;border-top:1px solid #e5dbc8}

body{margin:0;background:#f4eddf}
#pm{padding:0}
#pm .phone{width:100%;max-width:1120px;min-height:100svh;border:0;border-radius:0}
@media(min-width:760px){
 #pm{padding:28px 20px}
 #pm .phone{min-height:0;border-radius:25px}
 #pm header,#pm footer{padding:18px 34px}
 #pm main{padding:32px 34px 40px}
 #pm h1{font-size:clamp(53px,7vw,88px)}
 #pm h2{font-size:42px}
 #pm [data-step=home],#pm [data-step=gift],#pm [data-step=card],#pm [data-step=review]{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start}
 #pm [data-step=home]>:not(.hero){grid-column:1}
 #pm [data-step=home] .hero{grid-column:2;grid-row:1/8;height:clamp(320px,43vw,505px);margin:0}
 #pm [data-step=gift]>:is(.eyebrow,h2),#pm [data-step=card]>:is(.eyebrow,h2),#pm [data-step=review]>:is(.eyebrow,h2){grid-column:1/-1}
 #pm [data-step=gift] .compare{grid-column:1;grid-row:3/6}
 #pm [data-step=gift]>small{grid-column:1;grid-row:6}
 #pm [data-step=gift] .choices,#pm .gift-preview,#pm .gift-angles,#pm #pm-xl-info,#pm [data-step=gift]>.primary{grid-column:2}
 #pm [data-step=card] #pm-preview{grid-column:2;grid-row:3}
 #pm [data-step=card]>:is(.design-options,#pm-card-next,#pm-example-link){grid-column:2}
 #pm [data-step=card] #pm-card-fields{grid-column:1;grid-row:3/7;align-self:start}
 #pm [data-step=review] #pm-review-card{grid-column:1;grid-row:3/8}
 #pm [data-step=review]>:is(.box,.promo-entry,.review-actions,button,small){grid-column:2}
 #pm [data-step=receive],#pm [data-step=done],#pm [data-step=contacts]{max-width:580px;margin:auto}
}

#pm .preview-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:8px 0 4px}
#pm .preview-label span{font-weight:600}
#pm .side-nav{margin:4px 0 8px}
#pm .photo-settings{margin:6px 0 10px;padding:4px 10px}
#pm .photo-settings label.field{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:8px;font-size:13px}
#pm .photo-settings input[type=range]{min-width:0;min-height:28px;margin:0}
#pm #pm-front{scroll-margin-top:12px}
#pm .mobile-card-preview{display:none}
@media(max-width:759px){
 #pm .mobile-card-preview{display:block}
}
#pm #pm-mini-preview{display:none}
@media(max-width:759px){
 #pm #pm-editor:has(:is(#pm-text,#pm-sign):focus) #pm-mini-preview{display:block;float:right;width:83px;margin:0 0 8px 10px}
 #pm #pm-mini-preview .paper{width:300px;max-width:none;margin:0;zoom:.27}
 #pm #pm-editor:has(:is(#pm-text,#pm-sign):focus) label:has(:is(#pm-text,#pm-sign,#pm-preset)){display:flow-root}
}