:root { --pink:#f3a6bb; --pink-dark:#c86d8b; --pink-pale:#fff0f4; --ink:#33313a; --muted:#88838d; --line:#e8e3e6; --paper:#fffaf8; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden; } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #e98da9; outline-offset:3px; }
body::before { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 50% 0%, #fff 0, var(--paper) 54%, #fdeff3 100%); content:""; }
.app-shell { position:relative; display:flex; flex-direction:column; width:min(100% - 32px, 560px); min-height:100vh; margin:0 auto; padding:24px 0 22px; }
.brand { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:lowercase; } .brand__heart { color:var(--pink-dark); font-size:18px; }
.progress { display:flex; justify-content:center; gap:7px; margin:22px 0 8px; } .progress__step { width:30px; height:4px; border-radius:9px; background:#eadfe3; transition:background .3s ease; } .progress__step.is-active { background:var(--pink); }
.screen { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; min-height:650px; padding:20px 0 34px; text-align:center; animation:fade-in .45s ease both; } .screen[hidden] { display:none; }
.kicker { margin:18px 0 14px; color:var(--pink-dark); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } h1,h2 { margin:0; color:var(--ink); font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:-.045em; line-height:.98; } h1 { font-size:clamp(3.25rem,10vw,5.8rem); } h2 { font-size:clamp(3.2rem,10vw,5.2rem); } h1 em,h2 em { color:var(--pink-dark); font-style:italic; }
.subcopy { max-width:390px; margin:22px auto 26px; color:#77727c; font-size:14px; line-height:1.7; }
.envelope-art { position:relative; width:146px; height:106px; margin:25px auto 12px; } .envelope-art__body { position:absolute; inset:24px 0 0; border:2px solid var(--pink); border-radius:7px; background:var(--white); box-shadow:0 13px 28px rgba(200,109,139,.14); } .envelope-art__flap { position:absolute; z-index:2; top:25px; left:3px; width:140px; height:66px; border-top:2px solid var(--pink); background:linear-gradient(145deg, transparent 49%, var(--pink-pale) 50%); clip-path:polygon(0 0, 50% 52%, 100% 0, 100% 10%, 50% 64%, 0 10%); } .envelope-art__letter { position:absolute; z-index:3; top:0; left:50%; display:grid; width:52px; height:52px; place-items:center; color:var(--pink-dark); background:var(--pink-pale); border:1px solid #f3cad5; border-radius:50%; font-size:25px; transform:translateX(-50%) rotate(8deg); }
.reaction-art,.letter-art { display:grid; width:96px; height:96px; place-items:center; margin:24px auto 10px; color:var(--pink-dark); background:var(--pink-pale); border:1px solid #f2cbd6; border-radius:50%; font-family:"Playfair Display",Georgia,serif; font-size:48px; box-shadow:0 12px 26px rgba(200,109,139,.13); } .reaction-art--sad { transform:rotate(-12deg); }
.proposal-actions { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:5px; } .button { min-height:48px; border:0; border-radius:7px; padding:0 24px; font-size:13px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .button--primary { color:var(--white); background:var(--pink); box-shadow:0 8px 18px rgba(200,109,139,.22); } .button--primary:hover { background:#e68fa9; box-shadow:0 11px 21px rgba(200,109,139,.28); transform:translateY(-2px); } .button--quiet { color:#77727c; background:#eeeef0; } .button--quiet:hover { color:var(--pink-dark); background:var(--pink-pale); } .button--wide { width:min(100%,390px); margin-top:7px; }
.tiny-note { margin:23px 0 0; color:#b0a9af; font-size:11px; }
.form-stack { width:min(100%,390px); margin:6px auto 20px; text-align:left; } .field { display:block; margin:0 0 15px; } .field > span { display:block; margin:0 0 7px; color:#625d65; font-size:11px; font-weight:700; letter-spacing:.04em; } .field small { color:#aaa3aa; font-weight:400; } input,select { width:100%; height:46px; padding:0 13px; color:var(--ink); border:1px solid var(--line); border-radius:7px; outline:none; background:var(--white); } input:focus,select:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(243,166,187,.2); }
.location-card { display:flex; align-items:center; gap:11px; padding:10px 13px; border:1px dashed #e7afc0; border-radius:7px; background:var(--pink-pale); } .location-card__pin { display:grid; width:27px; height:27px; place-items:center; color:var(--pink-dark); background:var(--white); border-radius:50%; } .location-card strong,.location-card small { display:block; } .location-card strong { font-size:13px; } .location-card small { margin-top:2px; color:var(--muted); font-size:11px; }
.food-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .food-option { min-height:78px; padding:9px 3px; color:#726a72; border:1px solid var(--line); border-radius:7px; background:var(--white); transition:.2s ease; } .food-option span,.food-option small { display:block; } .food-option span { font-size:25px; } .food-option small { margin-top:5px; font-size:10px; } .food-option:hover,.food-option.is-selected { color:var(--pink-dark); border-color:var(--pink); background:var(--pink-pale); box-shadow:0 5px 12px rgba(200,109,139,.12); transform:translateY(-2px); }
.summary-card { width:min(100%,390px); margin:2px auto 20px; padding:5px 16px; text-align:left; border:1px solid #f0d7de; border-radius:8px; background:var(--pink-pale); } .summary-card > div { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(232,183,198,.42); } .summary-card > div:last-child { border-bottom:0; } .summary-card__icon { display:grid; width:32px; height:32px; flex:none; place-items:center; color:var(--pink-dark); border:1px solid #f0bfce; border-radius:50%; background:var(--white); } .summary-card small,.summary-card strong { display:block; } .summary-card small { margin-bottom:2px; color:var(--pink-dark); font-size:9px; font-weight:700; letter-spacing:.13em; } .summary-card strong { font-size:13px; } .postscript { max-width:330px; margin:0 auto 24px; color:#9a9299; font-size:12px; line-height:1.65; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:20px; color:#b3abb1; font-size:10px; letter-spacing:.05em; } .footer span:nth-child(2) { color:var(--pink); font-size:16px; }
.floating-hearts { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; color:rgba(243,166,187,.47); } .floating-hearts span { position:absolute; bottom:-30px; font-size:18px; animation:float-up 11s linear infinite; } .floating-hearts span:nth-child(1){left:11%;animation-delay:-2s}.floating-hearts span:nth-child(2){left:27%;animation-delay:-7s}.floating-hearts span:nth-child(3){left:55%;animation-delay:-4s}.floating-hearts span:nth-child(4){left:73%;animation-delay:-9s}.floating-hearts span:nth-child(5){left:88%;animation-delay:-5s}.floating-hearts span:nth-child(6){left:43%;animation-delay:-1s}
.confetti { position:fixed; inset:0; z-index:10; pointer-events:none; } .confetti-piece { position:absolute; top:50%; left:50%; color:var(--pink); font-size:19px; animation:burst 1.2s ease-out forwards; }
@keyframes fade-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } @keyframes float-up { 0%{opacity:0;transform:translateY(20px) rotate(0)} 12%{opacity:1} 88%{opacity:.65} 100%{opacity:0;transform:translateY(-110vh) rotate(180deg)} } @keyframes burst { 0%{opacity:1;transform:translate(-50%,-50%) scale(.7)} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.2)} }
@media (max-width:520px) { .app-shell { width:min(100% - 28px, 440px); padding-top:18px; } .screen { min-height:650px; padding-top:12px; } h1{font-size:clamp(3.1rem,14vw,4.7rem)} h2{font-size:clamp(3rem,14vw,4.7rem)} .subcopy{font-size:13px;max-width:330px;margin-top:19px} .food-options{gap:5px} .food-option{min-height:72px} .footer{font-size:9px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }

/* Video-inspired evasive No button and budget labels */
.proposal-actions { position:relative; width:300px; min-height:62px; margin:5px auto 0; }
.proposal-actions .button--primary { position:absolute; z-index:2; left:50px; top:0; }
.proposal-actions .button--quiet { position:absolute; z-index:3; left:190px; top:0; white-space:nowrap; }
.button--quiet { transition: left .08s ease, top .08s ease, transform .15s ease, background .2s ease; }
.button--quiet.is-jumping { animation: shy-pop .2s ease both; }
.food-options { grid-template-columns:repeat(3,1fr); }
.food-option b { display:block; margin-top:3px; color:#b17b8c; font-size:8px; font-weight:600; }
@keyframes shy-pop { 0% { opacity:.1; transform:scale(.78) rotate(-4deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@media (max-width:520px) { .proposal-actions { width:290px; } .proposal-actions .button--primary { left:40px; } .proposal-actions .button--quiet { left:178px; } .food-options { grid-template-columns:repeat(3,1fr); } .food-option small { min-height:24px; } .footer{font-size:9px} }