:root { color-scheme:light; --paper:#fff4f8; --ink:#39182f; --rose:#a51c5b; --deep:#271223; --champagne:#efd2b5; --font:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif; }
* { box-sizing:border-box; }
html { background:#24111e; }
body { margin:0; font-family:var(--font); font-size:17px; line-height:1.95; color:var(--ink); -webkit-text-size-adjust:100%; }
main { max-width:680px; margin:0 auto; overflow:clip; background:var(--paper); }
p,h1,h2,figure,blockquote { margin:0; }
img { display:block; max-width:100%; height:auto; }
.inner { padding-inline:26px; }
.hero { position:relative; color:#fff4f8; background:radial-gradient(ellipse at 0% 65%,#68124090,transparent 65%),linear-gradient(135deg,#271223,#420d2d 80%,#701540); padding-bottom:55px; }
.hero-photo { height:330px; position:relative; }
.hero-photo>img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#27122360,transparent 40%),linear-gradient(180deg,transparent 61%,#3a112983 82%,#3b102b 100%); pointer-events:none; }
.brand { position:absolute; top:20px; left:25px; z-index:1; padding:10px 12px; font-size:24px; line-height:1.4; letter-spacing:.18em; color:#fff2e6; text-shadow:0 2px 12px #210c1f; }
.brand-mark { position:absolute; inset:-2px auto auto -9px; width:55px; height:55px; border:1px solid #ea66ae; border-right-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(-28deg); box-shadow:-2px -2px 12px -4px #ff7bb8; }
.hero-copy { position:relative; z-index:1; text-align:center; margin-top:-6px; }
h1 { font-weight:600; font-size:25px; line-height:1.7; letter-spacing:.015em; }
.hero-copy p { margin-top:15px; }
.hero-copy em { display:inline; font-style:normal; font-size:20px; font-weight:600; color:#ffe0c8; background:linear-gradient(transparent 89%,#ec82b18c 89%,#ec82b18c 94%,transparent 94%); padding-bottom:6px; text-shadow:0 1px 15px #e980ad40; }
.hero-ribbon { position:absolute; bottom:-1px; left:0; width:100%; height:52px; pointer-events:none; }
.hero::after { content:""; position:absolute; bottom:-33px; left:-10%; width:120%; height:58px; border-radius:50%; background:#fff4f8; box-shadow:0 -8px 22px #f3c2d23b; }
.cta { position:relative; display:flex; justify-content:center; align-items:center; gap:8px; min-height:64px; padding:16px 12px; margin-top:24px; border:1px solid #f1cfac; border-radius:99px; overflow:hidden; isolation:isolate; color:#fff8ed; background:radial-gradient(ellipse at 30% 0%,#ed65a873,transparent 65%),linear-gradient(170deg,#bd1969 0%,#a60e55 42%,#760940 73%,#a1165e 100%); box-shadow:inset 0 2px 2px #fff4dc95,inset 0 -3px 7px #3f072c,0 9px 20px -12px #78134c99,0 0 0 3px #cc9c9e22; text-decoration:none; font-family:var(--font); font-size:18px; font-weight:700; line-height:1.6; text-align:center; transition:transform .18s,filter .18s; }
.cta::before { content:""; position:absolute; inset:2px; border:1px solid #ffdfeb45; border-radius:inherit; pointer-events:none; }
.cta::after { content:""; position:absolute; z-index:0; top:-70%; left:-50%; width:28%; height:240%; transform:translateX(0) rotate(26deg); background:linear-gradient(90deg,transparent,#fff4f065,transparent); pointer-events:none; animation:cta-shimmer 5s ease-in-out infinite; }
.cta-label,.arrow { position:relative; z-index:1; }
.cta .arrow { font-size:25px; line-height:1; font-weight:400; }
@keyframes cta-shimmer { 0%,74% { transform:translateX(0) rotate(26deg); opacity:0; } 76% { opacity:1; } 96%,100% { transform:translateX(650%) rotate(26deg); opacity:0; } }
.cta:hover { filter:brightness(1.08); }
.cta:active { transform:scale(.985); }
.cta:focus-visible { outline:3px solid #e3ad67; outline-offset:5px; }
.paper-flow { position:relative; background:radial-gradient(ellipse at -20% 30%,#f3b9d350,transparent 55%),radial-gradient(ellipse at 115% 72%,#e2c3de70,transparent 54%),linear-gradient(145deg,#fff4f8,#f9edf5 55%,#fff9fa); }
.paper-flow::before { content:""; position:absolute; right:-40%; top:27%; width:110%; height:350px; border:1px solid #c577a133; border-radius:50%; transform:rotate(-28deg); pointer-events:none; box-shadow:0 7px 0 #fff9fc85,0 9px 0 #d89cbb29,0 22px 25px #e9bfd93b; }
.fine-rule { width:140px; height:1px; margin:0 auto 30px; background:linear-gradient(90deg,transparent,#b03a72,#f4c9b4,#b03a72,transparent); }
.empathy { position:relative; padding-top:48px; padding-bottom:42px; text-align:center; }
.empathy .wishes { color:#6b2850; }
.empathy .wishes p { margin-bottom:17px; }
.empathy>p { margin-top:25px; }
.profile { position:relative; padding-top:8px; padding-bottom:54px; }
.profile-intro { display:flex; gap:23px; align-items:center; margin-bottom:24px; }
.profile-intro figure { width:39%; flex-shrink:0; overflow:hidden; border-radius:75px 75px 5px 5px; outline:1px solid #ba7d97; outline-offset:4px; box-shadow:8px 14px 26px -18px #5c1b46; }
.profile-intro img { aspect-ratio:3/4; object-fit:cover; object-position:50% 25%; }
.eyebrow { color:#8a2a58; font-size:16px; }
h2 { font-weight:600; font-size:28px; line-height:1.65; }
.profile h2 { margin-top:8px; }
.profile>p { margin-top:20px; }
blockquote { position:relative; margin:23px -8px 22px; padding:18px 5px; text-align:center; font-size:24px; line-height:1.6; font-weight:700; color:#85154f; background:linear-gradient(110deg,#7e164b,#ae3872 44%,#7a3b4c 70%,#7e164b); -webkit-background-clip:text; background-clip:text; }
@supports (-webkit-background-clip:text) { blockquote { color:transparent; } }
blockquote::before,blockquote::after { content:""; position:absolute; height:1px; width:48%; left:26%; top:0; background:linear-gradient(90deg,transparent,#b7768e,#c99c78,transparent); }
blockquote::after { top:auto; bottom:0; }
.gift { background:radial-gradient(ellipse at 10% 65%,#e8c5dc70,transparent 60%),linear-gradient(160deg,#fff6f9,#f9edf5 60%,#fff6f9); }
.service-reveal { position:relative; padding:52px 26px 64px; overflow:hidden; background:radial-gradient(ellipse at 90% 30%,#a91a6270,transparent 70%),radial-gradient(ellipse at 0% 90%,#82104760,transparent 60%),linear-gradient(145deg,#2a1026,#4d103a 60%,#350d29); color:#fff3f5; }
.service-reveal::before { content:""; position:absolute; width:160%; height:180px; left:-30%; bottom:-115px; border-top:1px solid #ebb8bf99; border-radius:50%; transform:rotate(-9deg); box-shadow:0 -4px 0 #f29ab91a,0 -18px 35px #c6528b22; pointer-events:none; }
.service-reveal::after { content:""; position:absolute; top:-45px; left:-10%; width:120%; height:67px; border-radius:50%; background:#fff7fa; border-bottom:1px solid #d698ba; transform:rotate(3deg); box-shadow:0 6px 14px #ca69922b; pointer-events:none; }
#approved-copy { position:relative; white-space:pre-line; font-size:17px; line-height:2; }
#gift-title { display:block; text-align:center; font-size:35px; line-height:1.6; padding:21px 0 16px; color:#ffdebf; background:linear-gradient(110deg,#e4b395,#fff2db 37%,#eab8b0 64%,#fff1df); -webkit-background-clip:text; background-clip:text; text-shadow:0 1px 22px #d9679a22; border-top:1px solid #dd9ead6b; border-bottom:1px solid #dd9ead6b; }
@supports (-webkit-background-clip:text) { #gift-title { color:transparent; } }
.gift-copy { text-align:center; padding-top:32px; padding-bottom:40px; }
.gift-copy>p { margin-top:18px; }
.app-preview { margin-top:30px; }
.phone { position:relative; width:230px; max-width:85%; margin:0 auto; padding:7px; border:2px solid #a78690; border-radius:33px; background:linear-gradient(120deg,#5e4751,#e2d0cc 8%,#54434b 12%,#231e23 80%,#9b7f8c); box-shadow:0 25px 38px -22px #571d4880,0 0 0 2px #d7b4c47a,inset 0 0 0 2px #fff3df70; }
.screen { overflow:hidden; border-radius:24px; background:#002d25; }
.screen>img { width:100%; height:auto; }
.speaker { position:absolute; left:36%; top:8px; width:28%; height:10px; border-radius:0 0 9px 9px; background:#221e23; box-shadow:0 1px 1px #666; }
figcaption { font-size:13px; line-height:1.8; color:#704d63; margin-top:18px; }
.possibilities { padding-top:20px; padding-bottom:36px; background:radial-gradient(ellipse at 100% 70%,#eec8dd6b,transparent 75%),#fff6f9; }
.possibilities p { margin-top:22px; }
.important { font-size:21px; color:#8e2057; font-weight:600; }
.closing { position:relative; padding-top:70px; padding-bottom:max(80px,env(safe-area-inset-bottom)); text-align:center; color:#fff0f5; background:radial-gradient(ellipse at 0% 50%,#bc1e6a70,transparent 65%),radial-gradient(ellipse at 100% 90%,#a4146075,transparent 55%),linear-gradient(140deg,#331027,#641039 60%,#291023); overflow:hidden; }
.closing::before { content:""; position:absolute; top:-79px; left:-25%; width:150%; height:120px; border-radius:50%; background:#fff6f9; border-bottom:1px solid #d69ab7; transform:rotate(-5deg); box-shadow:0 8px 0 #dc77a329,0 15px 0 #db8eb222,0 24px 18px #bf47832b; pointer-events:none; }
.closing::after { content:""; position:absolute; bottom:-180px; left:-28%; width:165%; height:220px; border-top:1px solid #f1a1ceaa; border-radius:50%; transform:rotate(-6deg); box-shadow:0 -5px 0 #e95f9d1c,0 -24px 36px #d0328224; pointer-events:none; }
.closing>p { margin-top:21px; position:relative; }
.closing h2 { margin-top:40px; font-size:25px; position:relative; }
.closing h2 span { display:inline-block; font-size:35px; line-height:1.7; color:#ffe3c5; background:linear-gradient(110deg,#ecc39d,#fff3dc 40%,#e9acb5 68%,#fff2dc); -webkit-background-clip:text; background-clip:text; }
@supports (-webkit-background-clip:text) { .closing h2 span { color:transparent; } }
.closing .cta { margin-top:30px; }
.delivery-note { font-size:15px; line-height:1.9; color:#f3d7e3; }
@media(max-width:359px) { .inner { padding-inline:20px; } .hero-photo { height:290px; } h1 { font-size:22px; } .hero-copy em { font-size:18px; } .cta { font-size:17px; gap:4px; padding-inline:8px; } blockquote { font-size:22px; } .profile-intro { gap:18px; } .profile h2 { font-size:25px; } .service-reveal { padding-inline:20px; } #gift-title { font-size:30px; } }
@media(min-width:500px) { .inner { padding-inline:60px; } .hero-photo { height:440px; } .hero-photo>img { object-position:50% 29%; } h1 { font-size:30px; } .hero-copy { padding-top:15px; } .brand { font-size:30px; } .profile-intro figure { max-width:160px; } .service-reveal { padding-inline:60px; } #gift-title { font-size:43px; } .phone { width:250px; } }
@media(prefers-reduced-motion:reduce) { .cta { transition:none; } .cta::after { animation:none; opacity:0; } }
@media(forced-colors:active) { .cta { border:2px solid ButtonText; } blockquote,#gift-title,.closing h2 span { color:CanvasText; background:none; } }

/* Requested precision fixes only: semantic line groups, heading suffix,
   handheld mockup, and a brighter shared CTA gloss. */
.phrase { display:inline-block; white-space:nowrap; }
.profile-greeting { white-space:nowrap; font-size:.82em; }
#gift-title .gift-name { display:block; }
#gift-title .gift-ending { display:block; margin-top:3px; font-size:17px; font-weight:400; line-height:1.95; color:#fff3f5; }
.handheld { position:relative; width:min(100%,340px); margin:0 auto; }
.hand-photo { width:100%; height:auto; }
.hand-screen { position:absolute; left:20.3%; top:6.7%; width:57%; height:73.1%; overflow:hidden; border-radius:9% / 5%; background:#00352b; pointer-events:none; }
.hand-screen img { width:100%; height:auto; }
.cta { box-shadow:inset 0 3px 5px #fff4dcd9,inset 0 -4px 9px #3f072c,0 9px 22px -10px #b62b7499,0 0 0 3px #e9a7be35; }
.cta::after { width:34%; background:linear-gradient(90deg,transparent 0%,#ffe7ed55 25%,#fff9eae8 49%,#ffe7eda6 58%,transparent 100%); }
@keyframes cta-shimmer { 0%,73% { transform:translateX(0) rotate(26deg); opacity:0; } 77% { opacity:.95; } 89% { opacity:.9; } 96%,100% { transform:translateX(620%) rotate(26deg); opacity:0; } }

/* Glow-only layer. No text, font, spacing, image geometry or CTA layout changes. */
.hero-photo { -webkit-mask-image:linear-gradient(#000 67%,transparent 100%); mask-image:linear-gradient(#000 67%,transparent 100%); }
.hero-photo::after { background:url("assets/glow-photo.svg") left center/100% 100% no-repeat,linear-gradient(90deg,#27122360,transparent 40%),linear-gradient(180deg,transparent 61%,#3a112983 82%,#3b102b 100%); }
.hero { background:radial-gradient(ellipse at 5% 75%,#9c225e58,transparent 62%),radial-gradient(ellipse at 90% 100%,#8d235934,transparent 52%),linear-gradient(135deg,#271223,#420d2d 80%,#701540); }
.hero-ribbon { opacity:0; }
.hero::before { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:138px; background:url("assets/glow-hero.svg") center bottom/100% 100% no-repeat; pointer-events:none; }
.hero::after { box-shadow:0 -7px 16px #ffb9df32,0 -2px 1px #f9dce930; }
.brand-mark { box-shadow:-2px -2px 12px -4px #ff7bb8,-6px -7px 16px -7px #ffdcf5; }
.paper-flow { background:url("assets/glow-pearl.svg") center/100% 100% no-repeat,radial-gradient(ellipse at -20% 30%,#f3b9d350,transparent 55%),radial-gradient(ellipse at 115% 72%,#e2c3de70,transparent 54%),linear-gradient(145deg,#fff4f8,#f9edf5 55%,#fff9fa); }
.fine-rule { filter:drop-shadow(0 0 3px #d965a16b); }
.service-reveal { background:radial-gradient(ellipse at 46% 85%,#a82d6a38,transparent 55%),radial-gradient(ellipse at 90% 30%,#a91a6270,transparent 70%),radial-gradient(ellipse at 0% 90%,#82104760,transparent 60%),linear-gradient(145deg,#240e20,#4d103a 60%,#300b25); }
.service-reveal::before { left:0; bottom:-8px; width:100%; height:150px; transform:none; border:0; border-radius:0; box-shadow:none; background:url("assets/glow-service.svg") center bottom/100% 100% no-repeat; }
#gift-title { border-top-color:#efafc28a; border-bottom-color:#efafc28a; text-shadow:0 1px 18px #e58eb64d; }
.gift { background:url("assets/glow-pearl.svg") center/100% 100% no-repeat,radial-gradient(ellipse at 10% 65%,#e8c5dc70,transparent 60%),linear-gradient(160deg,#fff6f9,#f9edf5 60%,#fff6f9); }
.closing { background:radial-gradient(ellipse at 45% 92%,#d1448b24,transparent 60%),radial-gradient(ellipse at 0% 50%,#bc1e6a70,transparent 65%),radial-gradient(ellipse at 100% 90%,#a4146075,transparent 55%),linear-gradient(140deg,#260d20,#641039 60%,#210b1c); }
.closing::after { bottom:-38px; left:0; width:100%; height:170px; border:0; border-radius:0; transform:none; box-shadow:none; background:url("assets/glow-closing.svg") center bottom/100% 100% no-repeat; }
.closing>p,.closing>h2,.closing>.cta { z-index:1; }
.cta { background:url("assets/glow-cta.svg") center/100% 100% no-repeat,radial-gradient(ellipse at 30% 0%,#ed65a873,transparent 65%),linear-gradient(170deg,#bd1969 0%,#a60e55 42%,#760940 73%,#a1165e 100%); box-shadow:inset 0 2px 3px #fff4dcad,inset 0 -4px 9px #3f072c,0 9px 22px -10px #b62b7499,0 0 0 3px #e9a7be35,0 0 18px -6px #db4d942e; }
.cta::after { background:linear-gradient(90deg,transparent 0%,#ffe7ed30 29%,#fff8e9d9 49%,#ffe7ed73 58%,transparent 100%); }

/* Softer hero only: keep the original crop at the top, then let the same
   photograph continue behind the beginning of the copy and fade out. */
.hero {
  background:
    radial-gradient(ellipse at 8% 69%, #c681a429, transparent 63%),
    radial-gradient(ellipse at 100% 94%, #d38baa20, transparent 55%),
    linear-gradient(155deg, #271223 24%, #5c2446 58%, #69264e 87%, #571c3f);
}
.hero-photo {
  --photo-anchor: 25%;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-photo > img {
  position: absolute;
  top: var(--photo-anchor);
  height: auto;
  transform: translateY(calc(-1 * var(--photo-anchor)));
  -webkit-mask-image: linear-gradient(#000 53%, #0009 68%, #0003 84%, transparent 100%);
  mask-image: linear-gradient(#000 53%, #0009 68%, #0003 84%, transparent 100%);
}
.hero-photo::after {
  background:
    url("assets/glow-photo.svg") left center/100% 100% no-repeat,
    linear-gradient(90deg, #27122360, transparent 40%);
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
}
@media (min-width: 500px) { .hero-photo { --photo-anchor: 29%; } }