/* Clear hierarchy and mobile-first layout, preserving the reference palette. */
html{scroll-padding-top:100px}
.reference-header{position:sticky;top:0;z-index:60;background:#fff9fbf5;backdrop-filter:blur(16px);box-shadow:0 2px 12px #1a1a2e04}
.reference-nav{height:78px;max-width:1180px;padding-inline:24px;gap:28px}
.reference-nav .brand{font-size:21px;gap:9px;white-space:nowrap}
.reference-nav .brand img{width:30px;height:30px;border-radius:9px}
.ref-main-nav{display:flex;align-items:center;gap:22px}
.ref-main-nav>a:not(.ref-button){font-size:14px;font-weight:500;color:#4a4a6a;padding-block:10px;white-space:nowrap;position:relative}
.ref-main-nav>a:not(.ref-button):hover,.ref-main-nav>a.is-current{color:#c2185b}
.ref-main-nav>a.is-current:after{content:'';position:absolute;bottom:3px;left:0;right:0;height:2px;border-radius:2px;background:#e91e63}
.ref-main-nav .ref-button{font-size:13px;min-height:44px;padding-inline:18px}
.ref-menu-toggle{display:none;width:44px;height:44px;border:1px solid #edd9e3;border-radius:11px;background:white;padding:12px;cursor:pointer;flex-shrink:0}
.ref-menu-toggle span{display:block;height:2px;background:#1a1a2e;border-radius:2px;margin:4px 0;transition:transform .2s,opacity .2s}
.ref-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ref-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.ref-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.ref-hero{padding:58px 24px 55px;border-bottom:1px solid #f0e0e8;position:relative}
.ref-hero-grid{max-width:1132px;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);grid-template-rows:1fr 1fr;gap:24px 60px;min-height:555px}
.ref-hero-head{align-self:end}
.ref-hero-label,.ref-section-label{display:inline-block;font-family:Outfit,sans-serif;font-size:11px;line-height:1.6;letter-spacing:1.5px;font-weight:600;color:#a8275a;margin-bottom:20px}
.ref-hero-label{padding:7px 12px;background:#fae8f0;border:1px solid #f0d1df;border-radius:30px;letter-spacing:1.3px}
.reference-home h1{font-size:clamp(42px,4.4vw,64px);line-height:1.1;letter-spacing:-.035em;max-width:none}
.reference-home h1 span{color:#c2185b}
.ref-hero-rest>p:first-child{font-size:17px;line-height:1.75;max-width:44ch;color:#4a4a6a}
.ref-hero-actions{margin-top:26px;gap:12px}
.ref-hero-actions .ref-button{min-height:49px;font-size:14px;padding-inline:22px}
.ref-button-outline{background:#fff;color:#c2185b;border:1px solid #e8bdcf;box-shadow:none}
.ref-button-outline:hover{background:#fbeaf1;color:#a41a4f}
.ref-hero-benefits{display:flex;flex-wrap:wrap;gap:9px 17px;font-size:12px;color:#756476;margin-top:23px;line-height:1.8}
.ref-hero-benefits span:first-letter{color:#208654}
.ref-phone-stage{padding:30px 0 37px;min-height:555px}
.ref-phone{width:246px;height:500px;border-width:6px;border-radius:30px;transform:rotate(-2deg)}
.ref-phone-screen{border-radius:24px}
.ref-phone-blob{width:355px;height:455px;background:#f4dde7;opacity:.65}
.ref-preview-label{position:absolute;top:0;left:0;right:0;text-align:center;font-size:12px;color:#886579;font-weight:500;line-height:1.6;z-index:2}
.ref-preview-label span{margin-right:6px}
.ref-preview-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:16px;font-size:11px;color:#877582;line-height:1.5}
.ref-preview-controls .ref-link{font-size:12px;min-height:30px}
.ref-chat-header{padding:24px 14px 12px;min-height:74px}
.ref-chat-body{padding:14px 12px}
.ref-chat-bubble{font-size:13px;line-height:1.6;padding:12px 13px 22px}
.ref-chat-url{font-size:13px}
.ref-tap-hint{font-size:14px;padding-left:12px}
.ref-chat-header strong{font-size:14px}
.ref-catalog{padding:68px 24px 72px;background-color:#fff;background-image:none;border-bottom:1px solid #f0e0e8;overflow:hidden}
.ref-catalog:before{display:none}
.ref-catalog>.ref-wrap{max-width:1132px}
.ref-section-heading{max-width:670px;margin:0 auto;text-align:center}
.ref-section-heading .ref-section-label{margin-bottom:10px}
.reference-home h2{font-size:clamp(30px,3.4vw,43px);line-height:1.15;letter-spacing:-.025em}
.ref-section-heading .ref-section-copy{margin:16px auto 0;font-size:16px;line-height:1.75;max-width:56ch}
.ref-catalog-grid{gap:26px;margin-top:35px}
.ref-card{border:1px solid #ebdfe5;border-radius:19px;background:white;overflow:hidden;box-shadow:0 5px 17px #1a1a2e04;transition:box-shadow .2s,transform .2s}
.ref-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #7c325712}
.ref-art{border-radius:0;box-shadow:none;aspect-ratio:1;max-height:380px;border-bottom:1px solid #f0e0e8}
.ref-art-phone{top:13%;left:50%;width:46%;border-width:5px;border-radius:20px}
.ref-art-birthday .ref-art-phone{top:6%;left:23%;width:67%}
.ref-art-note{font-size:16px;line-height:1.4;width:43%}
.ref-art-moment{top:60%;left:5%;width:44%}
.ref-paper-note{top:60%;font-size:14px;line-height:1.4;padding:13px;width:41%}
.ref-card-meta{padding:21px 21px 0;margin:0;align-items:center}
.ref-card-meta h3{font-family:'Bricolage Grotesque',Outfit,sans-serif;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.3px}
.ref-card-meta>span{font-size:10px;padding:4px 7px;background:#fff0f5;border-radius:6px;font-weight:500}
.ref-card p{padding:0 21px;font-size:14px;line-height:1.7;margin-top:12px;min-height:48px;color:#65586d}
.ref-card-link{display:flex;justify-content:space-between;align-items:center;margin:19px 21px 21px;border-top:1px solid #f0e4eb;padding-top:16px;text-decoration:none;font-size:14px;font-weight:600;min-height:35px}
.ref-extras{background:#fff8fb;border:1px solid #f0dee7;border-radius:15px;padding:20px;margin-top:30px}
.ref-extras .ref-hand{font-family:Outfit,sans-serif;transform:none;font-size:14px;font-weight:500}
.ref-sample-note{text-align:center;line-height:1.7;font-size:12px}
.ref-how,.ref-story,.ref-faq,.ref-choose{padding-top:64px;padding-bottom:64px;border-bottom:1px solid #f0e0e8}
.ref-how>.ref-wrap,.ref-story>.ref-wrap,.ref-faq>.ref-wrap,.ref-choose>.ref-wrap{max-width:1132px}
.ref-section-copy{font-size:16px;line-height:1.75}
.ref-step{min-height:65px}.ref-step h3{font-size:19px}.ref-step p{line-height:1.7}
.ref-questions button{line-height:1.5;min-height:46px}
.ref-support{line-height:1.7}
.ref-answer-body p{line-height:1.7}
.ref-choose-sentence{font-size:20px;line-height:2}
.ref-footer-grid{max-width:1132px;gap:40px}.ref-footer-bottom{max-width:1132px}
@media(max-width:1050px){.ref-hero-grid{gap:24px 30px}.reference-nav{gap:18px}.reference-nav .brand{font-size:19px}.reference-nav .ref-main-nav{gap:17px}.ref-main-nav>a:not(.ref-button){font-size:13px}.ref-main-nav .ref-button{font-size:12px;padding-inline:15px}.ref-art-note{font-size:14px}.ref-paper-note{font-size:12px}.ref-card-meta{padding-inline:18px}.ref-card-meta h3{font-size:19px}.ref-card p{padding-inline:18px;font-size:13px}.ref-card-link{margin-inline:18px}}
@media(max-width:950px){
  .reference-nav{height:72px;justify-content:space-between}.reference-nav .brand{font-size:20px}
  .ref-menu-toggle{display:block}.reference-nav .ref-main-nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;background:#fff9fb;border-bottom:1px solid #e8cbd8;box-shadow:0 14px 25px #1a1a2e0c}
  .reference-nav .ref-main-nav.is-open{display:flex}.ref-main-nav>a:not(.ref-button){font-size:15px;padding:12px 8px;min-height:45px}.ref-main-nav>a.is-current:after{left:8px;right:auto;width:28px;bottom:8px}
  .ref-main-nav .ref-button{font-size:14px;margin-top:10px;min-height:46px;width:100%}
  .ref-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;min-height:530px}.reference-home h1{font-size:clamp(38px,5.2vw,49px)}.ref-hero-rest>p:first-child{font-size:16px}.ref-hero-actions .ref-button{padding-inline:18px;font-size:13px}
  .ref-phone-stage{min-height:530px}.ref-phone{width:226px;height:470px}.ref-phone-blob{width:300px;height:400px}.ref-preview-controls{gap:10px;font-size:10px}
  .ref-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.ref-art-note{font-size:17px}.ref-paper-note{font-size:14px}.ref-card-meta h3{font-size:22px}
}
@media(max-width:760px){
  html{scroll-padding-top:90px}.ref-hero{padding:37px 22px 42px}.ref-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:20px;min-height:0;text-align:center}
  .ref-hero-head{grid-row:1;align-self:auto}.ref-hero-label{font-size:10px;margin-bottom:18px;padding:6px 11px}
  .reference-home h1{font-size:clamp(36px,7.9vw,49px);line-height:1.13;letter-spacing:-.035em;max-width:600px;margin-inline:auto}
  .ref-hero-rest{grid-row:2;grid-column:1}.ref-hero-rest>p:first-child{font-size:16px;line-height:1.75;max-width:43ch;margin:auto}
  .ref-hero-actions{justify-content:center;margin-top:22px;gap:11px}.ref-hero-actions .ref-button{font-size:14px;min-height:48px;padding-inline:20px}
  .ref-hero-benefits{justify-content:center;font-size:11px;gap:8px 16px;margin-top:19px}
  .ref-phone-stage{grid-row:3;grid-column:1;height:450px;min-height:0;margin-top:7px;padding:30px 0 32px}.ref-phone{width:208px;height:410px;border-radius:27px}.ref-phone-screen{border-radius:21px}.ref-phone-blob{width:280px;height:350px}
  .ref-preview-label{font-size:11px}.ref-preview-controls{font-size:10px;gap:12px}.ref-preview-controls .ref-link{font-size:11px}
  .ref-chat-header{padding:22px 11px 10px;min-height:65px;gap:8px}.ref-chat-header .ref-avatar{width:29px;height:29px;font-size:12px}.ref-chat-header strong{font-size:13px}.ref-chat-header small{font-size:10px}.ref-chat-body{padding:12px 10px}.ref-chat-day{font-size:10px;margin-bottom:12px}.ref-chat-bubble{font-size:12px;padding:11px 11px 22px;line-height:1.5}.ref-chat-url{font-size:11px}.ref-tap-hint{font-size:12px;margin-top:14px;padding-left:9px}
  .ref-catalog{padding:43px 20px 46px}.ref-section-heading{text-align:left}.ref-section-heading .ref-section-label{font-size:10px;letter-spacing:1.4px;margin-bottom:11px}.ref-section-heading .ref-section-copy{font-size:15px;margin:14px 0 0;line-height:1.75}
  .reference-home h2{font-size:32px;line-height:1.18}.ref-catalog-grid{margin-top:26px;gap:22px 17px}.ref-art-note{font-size:14px}.ref-paper-note{font-size:12px}.ref-card-meta{display:flex;flex-wrap:wrap;padding:18px 16px 0;gap:8px}.ref-card-meta h3{font-size:19px}.ref-card-meta>span{margin:0}.ref-card p{padding-inline:16px;font-size:13px;line-height:1.7;min-height:64px}.ref-card-link{margin:17px 16px 18px;font-size:13px}.ref-art-phone{border-width:4px;border-radius:16px}.ref-extras{padding:18px;gap:15px}.ref-extras .ref-hand{font-size:14px;line-height:1.6}
  .ref-how,.ref-story,.ref-faq,.ref-choose{padding:44px 20px 47px}.ref-hand{font-size:16px;margin-bottom:13px}.ref-section-copy{font-size:15px;line-height:1.7}.ref-how-grid{grid-template-columns:minmax(0,1fr);gap:25px}.ref-step-list{grid-template-columns:minmax(0,1fr);gap:8px}.ref-step{padding:14px 16px;gap:13px}.ref-step h3{font-size:17px}.ref-step p{font-size:14px}.ref-step>span{width:30px;height:30px;font-size:14px}.ref-mini-frame{height:455px;width:216px}
  .ref-memory-row{grid-template-columns:minmax(0,1fr);gap:19px}.ref-faq-grid{grid-template-columns:minmax(0,1fr);gap:22px}.ref-answer-body{font-size:14px}.ref-questions button{font-size:14px;line-height:1.5;min-height:45px;padding:11px 13px}.ref-support .ref-hand{font-size:14px;line-height:1.6}.ref-support a{font-size:14px}.ref-choose-sentence{font-size:18px;line-height:2}.ref-choose-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center}.ref-choose-stage>.ref-hand{font-size:20px;line-height:1.5}.ref-footer-grid{gap:26px}.reference-footer{padding-inline:20px}
}
@media(max-width:520px){
  .ref-catalog-grid{grid-template-columns:minmax(0,1fr);gap:23px}.ref-art{aspect-ratio:1.1;max-height:355px}.ref-art-note{font-size:18px;line-height:1.35}.ref-paper-note{font-size:15px}.ref-art-phone{border-width:5px;border-radius:22px}.ref-card-meta{padding:20px 20px 0;justify-content:space-between;flex-wrap:nowrap}.ref-card-meta h3{font-size:22px}.ref-card-meta>span{font-size:11px}.ref-card p{font-size:15px;line-height:1.7;padding-inline:20px;min-height:0;margin-top:13px}.ref-card-link{font-size:15px;margin:19px 20px 21px;padding-top:16px;min-height:43px}.ref-art-moment{border-width:4px;border-radius:8px}
  .reference-nav{padding-inline:18px;height:68px}.reference-nav .brand{font-size:19px}.reference-nav .brand img{width:28px;height:28px}.reference-nav .ref-main-nav{top:68px;padding-inline:18px}.ref-hero-label{font-size:9px;letter-spacing:1.2px}.ref-hero{padding:33px 20px 36px}.reference-home h1{font-size:clamp(34px,9.5vw,44px)}.ref-hero-rest>p:first-child{font-size:15px;line-height:1.8}.ref-hero-actions .ref-button{font-size:13px;padding-inline:19px}.ref-hero-benefits{font-size:10px;gap:7px 12px}
}
@media(max-width:350px){
  .reference-nav{padding-inline:15px}.reference-nav .brand{font-size:17px;gap:7px}.reference-nav .brand img{width:26px;height:26px}.ref-hero,.ref-catalog,.ref-how,.ref-story,.ref-faq,.ref-choose{padding-inline:17px}.reference-home h1{font-size:33px}.ref-hero-label{font-size:8px}.ref-hero-actions .ref-button{font-size:12px;padding-inline:15px}.ref-hero-benefits{font-size:10px;gap:5px 10px}.ref-phone-stage{height:430px}.ref-phone{width:200px;height:395px}.ref-art-note{font-size:16px}.ref-paper-note{font-size:13px}.ref-card-meta{padding-inline:17px}.ref-card-meta h3{font-size:20px}.ref-card-meta>span{font-size:10px}.ref-card p{padding-inline:17px;font-size:14px}.ref-card-link{margin-inline:17px}.ref-questions button{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.ref-menu-toggle span,.ref-card{transition:none}}

/* Compact occasion cards with touch-friendly motion and clear boundaries. */
.ref-catalog-grid{gap:22px}
.ref-card{border:2px solid #e9c7d8;border-radius:25px;box-shadow:0 7px 22px #8033590b;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ref-card .ref-art{aspect-ratio:1.32;max-height:300px;border-bottom:1px solid #ecd2df}
.ref-card .ref-card-meta{padding:18px 20px 0}
.ref-card .ref-card-meta h3{font-size:23px}
.ref-card p{font-size:14px;padding-inline:20px;margin-top:10px;min-height:48px}
.ref-card .ref-card-link{margin:14px 20px 18px;padding-top:13px;min-height:44px}
.ref-card:focus-within{border-color:#c85c90;box-shadow:0 8px 25px #80335920}
.ref-card:active{transform:scale(.985);border-color:#c85c90}
@media(hover:hover){.ref-card:hover{transform:translateY(-5px);border-color:#c85c90;box-shadow:0 12px 28px #8033591c}}
@media(max-width:520px){.ref-catalog-grid{gap:19px}.ref-card .ref-art{max-height:270px;aspect-ratio:1.28}.ref-card .ref-card-meta h3{font-size:21px}.ref-card{animation:fm-card-welcome .65s ease both}.ref-card:nth-child(2n){animation-delay:.08s}.ref-card .ref-art-blob{animation:fm-card-breathe 7s ease-in-out infinite}.ref-card p{font-size:14px;min-height:0}}
@keyframes fm-card-welcome{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fm-card-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.ref-card,.ref-card .ref-art-blob{animation:none;transition:none}.ref-card:hover,.ref-card:active{transform:none}}