@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
:root{--bg:#FDF4F4;--surface:#fff;--primary:#E6A1A5;--soft:#FAD4D6;--blush:#FFD3D6;--rose:#D1888D;--deep:#8F352D;--text:#3A2E2F;--muted:#893b3f;--line:#EED1D3;--serif:'Playfair Display',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--shadow:0 24px 70px rgba(58,46,47,.10);--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.65}body,button,input,textarea,select{font-synthesis:none}button,input,textarea,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}img{max-width:100%}.logo{width:158px;height:auto;display:block;object-fit:contain}.compact{width:82px;margin:auto}.eyebrow{font-size:10px;line-height:1.2;letter-spacing:.18em;font-weight:800;text-transform:uppercase;color:var(--rose)}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);position:sticky;top:0;z-index:100}.brand{display:flex;flex-direction:column;gap:4px}.brand>span{margin-top:-10px}.brand>span{font-size:9px;color:var(--rose);letter-spacing:.08em}.site-header nav,header nav{display:flex;align-items:center;gap:26px;color:#765F63;font-size:15px;font-weight:600}.site-header nav a:hover,header nav a:hover,header nav a.active{color:var(--deep)}.head-actions{display:flex;gap:9px;align-items:center}.icon-btn,.round{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--deep)}.cart-btn b{position:absolute;top:-3px;right:-2px;background:var(--deep);color:#fff;width:18px;height:18px;border-radius:50%;font-size:9px;display:grid;place-items:center}.btn{min-height:54px;padding:0 28px;border-radius:14px;border:1px solid transparent;font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.2s}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(205,116,122,.18)}.btn.primary:hover{background:var(--rose);transform:translateY(-1px)}.btn.ghost{background:#fff;border-color:var(--line)}.btn.full{width:100%}.head-btn{min-height:43px}.menu{display:none;border:0;background:none;font-size:25px;color:var(--deep)}.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:47% 53%;align-items:center;padding:65px 5vw 60px;min-height:720px}.hero-copy{padding-left:2vw;max-width:670px}.hero-copy>.eyebrow{font-size:11px}.hero-copy>.eyebrow i{font-family:var(--serif);font-size:14px;text-transform:none;letter-spacing:0}.hero h1,.page-head h1,.narrow h1,.auth-card h1,.dash-head h1,.setup-head h1,.success-card h1{font:500 clamp(48px,6vw,84px)/1.12 var(--serif);letter-spacing:-.04em;margin:17px 0 26px}.hero h1 em,.page-head h1 em,.narrow h1 em,.story h2 em,.setup-title h2 em,.success-card h1 em,.final-cta h2 em{color:var(--rose)}.hero-copy>p,.page-head>p,.lead{font-size:16px;line-height:1.85;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:11px;margin:30px 0 28px}.trust{display:flex;flex-wrap:wrap;gap:14px 24px;color:var(--rose);font-size:11px}.hero-visual{min-height:560px;position:relative}.hero-frame{position:absolute;border-radius:10px;box-shadow:0 28px 75px rgba(58,46,47,.15)}.hero-frame.back{width:360px;height:430px;left:5%;top:15%;background:var(--soft);transform:rotate(-5deg)}.hero-frame.front{width:380px;height:455px;left:11%;top:8%;background:#fff;border:14px solid var(--blush);transform:rotate(-2deg);overflow:hidden}.hero-art{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#fff,#fff7f8)}.hero-art>span{position:absolute;right:19px;top:18px;color:var(--rose);font-size:9px}.hero-art>div{font:500 45px/1 var(--serif);text-align:center}.hero-art i,.demo-screen i{color:var(--rose)}.hero-art small{margin-top:30px;color:var(--rose);letter-spacing:.16em;font-size:9px}.hero-phone{position:absolute;z-index:4;width:235px;height:490px;right:8%;top:18%;background:var(--text);border:8px solid var(--text);border-radius:39px;box-shadow:0 30px 75px rgba(58,46,47,.26);transform:rotate(5deg)}.phone-screen{background:#fff;height:100%;overflow:auto;border-radius:30px;padding:30px 17px}.phone-photo{height:175px;border-radius:18px;background:linear-gradient(145deg,var(--soft),var(--blush));margin:19px 0}.phone-screen h4{font:600 18px var(--serif);margin:0 0 6px}.phone-screen p{font-size:11px;color:var(--muted)}.mini-audio{display:flex;align-items:center;gap:9px;background:#fff4f5;border:1px solid var(--line);padding:10px;border-radius:14px;font-size:12px}.mini-audio span{flex:1;display:flex;flex-direction:column}.mini-audio b{font-size:10px}.mini-audio small{color:var(--muted);font-size:8px}.mini-audio button{border:0;background:none;color:var(--rose)}.orb{position:absolute;border-radius:50%;background:var(--blush);opacity:.8}.orb.o1{width:108px;height:108px;right:6%;top:1%}.orb.o2{width:58px;height:58px;left:8%;top:17%;background:var(--soft)}
.feature-strip{margin:0 5vw;background:#fff;border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow)}.feature-strip>div{display:flex;gap:14px;padding:25px 24px;border-right:1px solid var(--line);align-items:flex-start}.feature-strip>div:last-child{border-right:0}.feature-strip i{font-style:normal;font-size:20px;color:var(--rose)}.feature-strip b{display:block;font-size:12px;margin-bottom:5px}.feature-strip small{font-size:11px;color:var(--muted);line-height:1.6}
.section{padding:105px 5vw}.section.blush{background:#FCEFF0}.section h2,.story h2{font:500 clamp(40px,4.5vw,60px)/1.02 var(--serif);letter-spacing:-.035em;margin:17px 0 22px}.section-lead{max-width:760px;color:var(--muted);line-height:1.8}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.demo-card{min-height:430px;border:1px solid var(--line);border-radius:30px;background:#fff;padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}.demo-screen{height:395px;border-radius:20px;background:linear-gradient(145deg,#F9DADD,#FFF6F6);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.demo-screen span{font-size:10px;letter-spacing:.2em;color:var(--rose);text-transform:uppercase}.demo-screen strong{font:500 42px/1.04 var(--serif);margin-top:15px}.demo-play,.pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--deep);box-shadow:0 12px 40px rgba(58,46,47,.12);font-size:20px;z-index:2}.section-head-row,.review-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.rating{color:var(--rose);font-size:16px;font-weight:800}.rating small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:5px}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.plan-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;min-height:370px;transition:.2s;box-shadow:0 10px 35px rgba(58,46,47,.03)}.plan-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.plan-card.featured{border:2px solid var(--primary)}.plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.plan-top b{font:600 15px var(--serif);color:var(--rose)}.plan-top span{font-size:9px;color:var(--rose);padding:6px 9px;border:1px solid var(--line);border-radius:99px}.plan-card h3{font-size:31px;margin:25px 0 8px}.plan-card p,.shop-info p{font-size:12px;line-height:1.75;color:var(--muted)}.plan-card ul,.shop-info ul{list-style:none;padding:0;margin:15px 0}.plan-card li,.shop-info li{font-size:11px;margin:9px 0}.plan-card strong{font:600 27px var(--serif);margin-top:auto}.text-link{color:var(--deep);font-size:12px;font-weight:800;background:none;border:0;padding:0}.plan-card .text-link{margin-top:14px;text-align:left}.story{display:grid;grid-template-columns:1.1fr .9fr;min-height:650px;background:#fff}.story-art{padding:70px 5vw;background:linear-gradient(145deg,#FADDE0,#fff)}.story-frame{height:100%;border:16px solid var(--blush);display:grid;place-items:center;background:rgba(255,255,255,.65);box-shadow:var(--shadow);transform:rotate(-3deg)}.story-frame>div{font:500 50px/1.05 var(--serif);text-align:center}.story-frame i{color:var(--rose)}.story article{padding:110px 10vw 90px 8vw;align-self:center}.story article p{font-size:15px;line-height:1.9;color:var(--muted)}blockquote{border-left:2px solid var(--primary);padding:10px 0 10px 18px;margin:28px 0;font:italic 22px/1.45 var(--serif);color:var(--deep)}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.testimonial{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;position:relative}.stars{color:var(--rose);letter-spacing:.2em;font-size:11px}.testimonial p{font:italic 18px/1.55 var(--serif);margin:20px 0 25px}.testimonial b{font-size:11px}.avatar{position:absolute;right:22px;bottom:20px;width:35px;height:35px;border-radius:50%;background:var(--blush);display:grid;place-items:center;color:var(--deep);font:600 16px var(--serif)}.final-cta{text-align:center}.final-cta h2{font:500 60px/1.02 var(--serif);margin:16px auto 28px}
footer{padding:60px 5vw 25px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:1.3fr .8fr .8fr 1.2fr;gap:30px;position:relative}footer .logo{width:95px}footer p{font-size:11px;line-height:1.7;color:var(--muted);max-width:250px}footer h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:0 0 17px}footer>div>a:not(:first-child),footer>div:nth-child(2)>a,footer>div:nth-child(3)>a{display:block;font-size:11px;color:#765F63;margin:10px 0}.socials{display:flex;gap:7px;margin-top:16px}.socials a{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:9px;color:var(--deep)}.newsletter{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}.newsletter input{flex:1;min-width:0;border:0;background:transparent;padding:0 13px;height:42px;outline:0;font-size:11px}.newsletter button{width:45px;border:0;background:var(--primary);color:#fff}.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:10px}
.page{padding:90px 5vw 120px;min-height:calc(100vh - 82px)}.page-head{max-width:900px;margin-bottom:44px}.page-head h1{margin-bottom:22px}.narrow{max-width:1100px;margin:auto}.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}.about-grid article,.privacy-card,.manifesto{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}.about-grid article>span{font:600 18px var(--serif);color:var(--rose)}.about-grid h3{font-size:28px;margin:22px 0 12px}.about-grid p{font-size:12px;line-height:1.8;color:var(--muted)}.manifesto{margin-top:20px;background:linear-gradient(145deg,#F9DADD,#fff);text-align:center;padding:70px 8%}.manifesto h2{font:500 43px/1.1 var(--serif);margin:20px auto 0}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.blog-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;transition:.2s}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.blog-cover,.post-cover{height:220px;border-radius:14px;background:linear-gradient(145deg,#F9DADD,#FFF7F7);position:relative;display:flex;align-items:flex-end;padding:20px;overflow:hidden}.blog-cover span{font:500 62px var(--serif);color:rgba(141,88,92,.18)}.blog-cover.c1{background:linear-gradient(145deg,#EFD8D8,#fff)}.blog-cover.c2{background:linear-gradient(145deg,#F0E1D5,#fff)}.blog-cover.c3{background:linear-gradient(145deg,#E6D7E0,#fff)}.blog-card small{display:block;color:var(--rose);font-size:9px;margin:18px 6px 8px}.blog-card h2{font-size:27px;line-height:1.1;margin:0 6px 10px}.blog-card p{font-size:11px;line-height:1.7;color:var(--muted);margin:0 6px 15px}.blog-card>span:last-child{display:block;margin:0 6px 8px;font-size:11px;font-weight:800;color:var(--deep)}.search{margin-top:28px;width:min(560px,100%);background:#fff;border:1px solid var(--line);height:48px;border-radius:12px;display:flex;align-items:center;padding:0 14px;gap:8px}.search span{color:var(--rose)}.search input{border:0;outline:0;flex:1;font-size:12px}.post{max-width:860px}.post h1{font-size:70px}.post-cover{height:340px;margin:36px 0}.post-cover span{color:var(--rose);font-size:10px;letter-spacing:.16em}.post-cover strong{font:500 42px/1.05 var(--serif);max-width:680px}.post-body{font-size:15px;line-height:2;color:#6F595E}.post-body p{margin:22px 0}.contact{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.contact-copy{padding-top:15px}.contact-list{display:grid;gap:15px;margin-top:32px}.contact-list>div{display:grid;gap:5px;border-top:1px solid var(--line);padding-top:13px}.contact-list b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}.contact-list a,.contact-list span{font-size:13px;line-height:1.7}.contact-side{display:grid;gap:18px}.card-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;display:grid;gap:12px;box-shadow:0 8px 30px rgba(58,46,47,.04)}.card-form h3{font-size:31px;margin:0 0 8px}.card-form input,.card-form textarea,.card-form select{border:1px solid var(--line);background:#fff9f9;border-radius:10px;padding:12px 13px;outline:0;font-size:12px;color:var(--text)}.card-form textarea{min-height:130px;resize:vertical}.card-form input:focus,.card-form textarea:focus,.card-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(230,161,165,.12)}.form-note{font-size:11px;color:var(--rose);min-height:16px}.map-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.map-top{padding:16px 18px;display:flex;justify-content:space-between;gap:10px;align-items:center}.map-top span{font-size:9px;letter-spacing:.16em;color:var(--rose)}.map-top b{font-size:11px}.map-card iframe{width:100%;height:280px;border:0;display:block;filter:saturate(.75)}.auth-page{min-height:calc(100vh - 82px);display:grid;grid-template-columns:1fr 420px;gap:10vw;align-items:center;max-width:1180px;margin:auto;padding:80px 5vw}.auth-side h2{font:500 clamp(45px,5vw,70px)/1 var(--serif);margin:18px 0}.auth-side p{max-width:450px;color:var(--muted);line-height:1.8}.auth-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.auth-card h1{font-size:45px}.auth-card>p{color:var(--muted);font-size:12px;line-height:1.7}.auth-options{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}.auth-options label{display:flex;gap:6px;align-items:center}.auth-options a,.switch{color:var(--deep);font-weight:800;font-size:10px}.google{font-weight:700}.google span{font-size:11px}.error{background:#fff1f2;border:1px solid #f2c2c5;color:var(--deep);padding:10px;border-radius:9px;font-size:10px}.policy-body{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}.policy-body h2{font:500 35px var(--serif)}.policy-body h3{font-size:22px;margin-top:32px}.policy-body p{font-size:13px;line-height:1.9;color:var(--muted)}
.setup{min-height:calc(100vh - 82px);display:grid;grid-template-columns:240px 1fr}.setup-side{background:#fff;border-right:1px solid var(--line);padding:30px 18px;position:sticky;top:82px;height:calc(100vh - 82px);overflow:auto}.setup-side>a{font-size:11px;color:var(--muted)}.setup-title{padding:20px 10px 20px}.setup-title h2{font:500 30px/1 var(--serif);margin:10px 0}.progress{display:grid;gap:7px}.progress button{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0;background:transparent;border-radius:11px;color:var(--muted);text-align:left}.progress button b{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font:600 10px var(--sans)}.progress button.active{background:#fff3f4;color:var(--deep)}.progress button.active b{background:var(--primary);border-color:var(--primary);color:#fff}.progress span{font-size:10px}.setup-tip{margin-top:28px;padding:14px;background:#fff6f7;border:1px solid var(--line);border-radius:12px}.setup-tip b{font-size:10px}.setup-tip p{font-size:9px;line-height:1.6;color:var(--muted)}.setup-main{min-width:0}.setup-head{height:100px;position:sticky;top:82px;background:rgba(253,244,244,.94);backdrop-filter:blur(14px);z-index:60;border-bottom:1px solid var(--line);padding:18px 30px;display:flex;justify-content:space-between;align-items:center}.setup-head h1{font-size:30px;margin:7px 0 0}.setup-head-actions{display:flex;gap:7px;align-items:center}.setup-body{padding:34px 30px 100px;min-height:670px}.setup-foot{position:sticky;bottom:0;padding:16px 30px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;justify-content:space-between;z-index:50}.setup-foot .btn:disabled{opacity:.4}.selection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.selection{font:inherit;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;min-height:410px;display:flex;flex-direction:column;transition:.2s}.selection:hover,.selection.selected{border-color:var(--primary);box-shadow:var(--shadow)}.selection h2{font:500 31px var(--serif);margin:22px 0 8px}.selection p,.selection small{font-size:11px;line-height:1.7;color:var(--muted)}.selection strong{font:600 28px var(--serif);margin:23px 0 8px}.selection ul{list-style:none;padding:0;margin:8px 0}.selection li{font-size:11px;margin:8px 0}.selection small{margin-top:auto}.frame-grid{display:grid;grid-template-columns:270px 1fr;gap:40px;align-items:start}.control-group{border-bottom:1px solid var(--line);padding-bottom:23px;margin-bottom:23px}.control-group h3,.frame-controls h3{font-size:12px;font-family:var(--sans);margin:0 0 13px;text-transform:uppercase;letter-spacing:.06em}.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.choice{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;font-size:10px}.choice.selected{border-color:var(--primary);background:#fff8f8}.choice-frame{width:60px;height:82px;margin:0 auto 9px;border:8px solid #e8d4d2;background:#fff}.choice-frame.landscape{width:82px;height:60px}.swatches{display:flex;flex-wrap:wrap;gap:9px}.swatch{width:35px;height:35px;border-radius:50%;border:3px solid #fff;outline:1px solid var(--line);background:var(--sw)}.swatch.selected{outline:2px solid var(--primary)}.swatch-names{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:11px}.swatch-names span{font-size:8px;color:var(--muted)}.sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.size{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 8px;font-size:10px}.size.selected{background:#fff3f4;border-color:var(--primary);color:var(--deep)}.preview-wrap{display:flex;flex-direction:column;align-items:center;gap:9px}.preview-wrap>span{font-size:9px;letter-spacing:.16em;color:var(--rose)}.frame-preview{width:430px;height:535px;position:relative;overflow:hidden;background:#fff;border:20px solid var(--blush);box-shadow:0 30px 80px rgba(58,46,47,.16);transform-origin:center}.frame-preview.landscape{width:565px;height:430px}.frame-preview.cream{border-color:#FFF8F8;background:#fff}.frame-preview.wood{border-color:#D9B89A;background:#fff}.frame-preview.black{border-color:#2F2527;background:#fff}.frame-preview.beige{border-color:#E8D4D2;background:#fff}.frame-preview.pink{border-color:#FFD3D6;background:#fff}.frame-preview.deep-red{border-color:#8F352D;background:#fff}.preview-wrap.review .frame-preview{transform:scale(.85)}.preview-wrap small{font-size:10px;color:var(--muted)}.frame-summary,.review-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.frame-summary span,.review-meta span{font-size:9px;border:1px solid var(--line);background:#fff;padding:7px 10px;border-radius:99px}.physical{position:absolute;transform-origin:center;border-radius:4px;user-select:none;touch-action:none}.physical.image{overflow:hidden}.physical.image img{width:100%;height:100%;display:block;object-fit:cover}.physical.text{text-align:center;white-space:normal;line-height:1.02}.physical.sticker{text-align:center;line-height:1}.physical.selected,.nfc-el.selected{outline:2px solid var(--primary);outline-offset:4px}.nfc-badge{position:absolute;top:10px;right:12px;z-index:40;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:99px;padding:4px 7px;color:var(--rose);font-size:8px;letter-spacing:.08em}.editor-layout{display:grid;grid-template-columns:85px minmax(0,1fr) 310px;gap:18px;align-items:start}.editor-tools,.nfc-tools{position:sticky;top:200px;display:grid;gap:8px;background:#fff;border:1px solid var(--line);padding:8px;border-radius:16px}.tool{min-height:68px;background:#fff;border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:9px;color:var(--deep)}.tool input{display:none}.tool b{font-size:9px}.tool:hover{border-color:var(--primary);background:#fff6f7}.editor-area{min-height:650px;display:flex;justify-content:center;align-items:flex-start;padding:15px}.inspector{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px;position:sticky;top:200px;min-height:470px}.inspector-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}.inspector-head span{display:block;font-size:8px;letter-spacing:.15em;color:var(--rose);margin-bottom:4px}.inspector-head b{font-size:14px}.inspector-head button{background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:9px}.inspector label{display:grid;gap:6px;font-size:9px;color:var(--muted);margin:10px 0}.inspector textarea{min-height:85px;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:9px;background:#fff9f9;outline:0;font-size:11px}.inspector select,.inspector input[type=number]{border:1px solid var(--line);border-radius:9px;padding:8px;background:#fff9f9}.control{margin:16px 0}.control>span{display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.control input[type=range]{width:100%;accent-color:var(--primary)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.upload-box{display:block;padding:12px;border:1px dashed var(--line);border-radius:10px;text-align:center!important;color:var(--rose)!important}.upload-box input{display:none}.layer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.layer-actions button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px;font-size:9px}.empty{text-align:center;padding:70px 10px;color:var(--muted)}.empty>div{font-size:34px;color:var(--rose)}.empty h3{font-size:18px}.empty p{font-size:10px;line-height:1.7}.privacy-step{display:grid;place-items:center;min-height:550px}.privacy-card{text-align:center;max-width:760px;padding:52px}.privacy-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#fff1f2;color:var(--rose);margin:0 auto 20px;font-size:24px}.privacy-card h2{font:500 36px var(--serif);margin:0 0 15px}.privacy-card p{font-size:12px;line-height:1.8;color:var(--muted)}.privacy-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}.privacy-points span{font-size:9px;padding:8px 11px;background:#fff6f7;border:1px solid var(--line);border-radius:99px;color:var(--rose)}.modal{position:fixed;inset:0;background:rgba(58,46,47,.42);z-index:300;display:grid;place-items:center;padding:18px}.modal-card{background:#fff;border:1px solid var(--line);border-radius:22px;width:min(900px,100%);max-height:90vh;overflow:hidden;box-shadow:0 35px 100px rgba(58,46,47,.25)}.close{border:0;background:none;font-size:29px;color:var(--muted);float:right}.privacy{padding:28px}.privacy-scroll{max-height:62vh;overflow:auto;padding-right:12px}.privacy-scroll h2{font:500 33px var(--serif)}.privacy-scroll h3{font-family:var(--sans);font-size:14px;margin-top:26px}.privacy-scroll p{font-size:12px;line-height:1.8;color:#6d595e}.check{display:flex;gap:8px;font-size:10px;color:var(--muted);margin:18px 0}.check input{accent-color:var(--primary)}.modal-head{display:flex;justify-content:space-between;padding:19px;border-bottom:1px solid var(--line)}.stickers{max-width:700px}.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:19px;max-height:65vh;overflow:auto}.sticker-grid button{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;min-height:80px}.sticker-grid button:hover{border-color:var(--primary);background:#fff5f6}.sticker-grid button span{display:block;font-size:30px;margin-bottom:4px}.sticker-grid button small{font-size:8px;color:var(--muted)}.demo-modal{width:min(950px,100%);padding:18px;background:#1f1517}.demo-video{min-height:560px;background:#f7dfe1;border-radius:17px;overflow:hidden}.demo-video-bg{height:560px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 20% 25%,#fff 0,transparent 25%),linear-gradient(145deg,#f3cfd2,#fff8f8)}.demo-copy{text-align:center}.demo-copy span{letter-spacing:.25em;color:var(--rose);font-size:9px}.demo-copy strong{display:block;font:500 55px/1 var(--serif);margin:15px 0}.demo-copy p{color:var(--muted)}
.nfc-layout{display:grid;grid-template-columns:85px minmax(0,1fr) 320px;gap:18px;align-items:start}.nfc-tools{align-content:start}.phone-center{display:flex;justify-content:center;min-height:750px;padding:6px}.device-phone{width:390px;height:730px;border:10px solid var(--text);background:var(--text);border-radius:44px;box-shadow:0 30px 80px rgba(58,46,47,.22);position:relative;flex:0 0 auto}.speaker{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:76px;height:12px;border-radius:0 0 10px 10px;background:var(--text);z-index:5}.device-screen{height:100%;overflow:auto;border-radius:34px;background:#fff;padding:42px 18px 18px;position:relative;scrollbar-width:none;touch-action:auto}.device-screen::-webkit-scrollbar{display:none}.nfc-top{text-align:center}.nfc-top>span{display:block;color:var(--rose);font-size:7px;letter-spacing:.16em;margin-top:3px}.nfc-cover{height:210px;border-radius:17px;background:linear-gradient(145deg,var(--soft),var(--blush));margin:18px 0}.nfc-head{text-align:center;position:relative;z-index:2}.nfc-head h3{font-size:27px;margin:8px 0}.nfc-head p{font-size:11px;line-height:1.7;color:var(--muted)}.nfc-el{position:absolute;line-height:1.25;touch-action:none;text-align:center}.nfc-el.image{height:185px;overflow:hidden;border-radius:15px}.nfc-el.image img{width:100%;height:100%;object-fit:cover}.nfc-el.video video{display:block;width:100%;border-radius:15px}.nfc-el.audio{position:absolute}.nfc-audio,.saved-audio{background:#fff4f5;border:1px solid var(--line);border-radius:14px;padding:10px;color:var(--deep);font-size:10px}.nfc-audio span{color:var(--rose)}.saved-audio{position:relative;margin:25px 8px}.saved-audio audio{width:100%;margin-top:7px}.record-panel{display:grid;gap:9px;border:1px solid var(--line);padding:11px;border-radius:11px}.record-panel audio{width:100%}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.review-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;min-height:750px}.review-head{align-items:center}.review-head span{font-size:8px;letter-spacing:.15em;color:var(--rose)}.review-head b{font-size:11px}.review-card .preview-wrap{margin-top:30px}.review-phone{display:flex;justify-content:center;margin-top:20px}.review-phone .device-phone{transform:scale(.85);transform-origin:top center}.review-summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;grid-column:1/-1;display:grid;gap:9px}.review-summary h3{font-size:28px;margin:0}.summary-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:11px;margin-top:4px;font-size:11px}.review-summary p{font-size:10px;color:var(--muted);line-height:1.7}.checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;max-width:1100px;margin:auto}.checkout h1{font-size:64px}.checkout-form{margin-top:25px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-list{display:grid;gap:7px;border:1px solid var(--line);border-radius:12px;padding:12px}.payment-list b{font-size:10px}.payment-list label{padding:10px;border:1px solid var(--line);border-radius:9px;font-size:10px}.summary{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;height:max-content;position:sticky;top:110px}.summary-product{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;font-size:10px}.summary-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:11px}.summary-total{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.summary-total strong{font:600 30px var(--serif)}.success-page{min-height:calc(100vh - 82px);display:grid;place-items:center;padding:40px}.success-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:62px 40px;max-width:760px;box-shadow:var(--shadow)}.success-card h1{font-size:49px}.success-card p{font-size:13px;line-height:1.8;color:var(--muted)}.success-icon{width:70px;height:70px;border-radius:50%;background:#fff0f1;color:var(--rose);display:grid;place-items:center;margin:0 auto 20px;font-size:28px}
.cart-page{max-width:1200px;margin:auto}.empty-cart{text-align:center;display:grid;place-items:center;align-content:center;gap:10px}.empty-cart h1{margin-bottom:4px}.cart-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:25px;align-items:start}.cart-list{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.cart-row{display:grid;grid-template-columns:75px 1fr auto;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}.cart-thumb{width:70px;height:85px;border:8px solid var(--blush);background:#fff;display:grid;place-items:center;text-align:center}.cart-thumb span{font:500 12px var(--serif)}.cart-thumb.memory{border-color:#D9B89A}.cart-thumb.standard{border-color:#2F2527;color:#fff;background:#2F2527}.cart-thumb.basic{border-color:#FAD4D6}.cart-detail b{display:block;font-size:13px}.cart-detail small{display:block;font-size:9px;color:var(--muted);margin:4px 0 9px}.cart-controls{display:flex;align-items:center;gap:7px}.cart-controls button{border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;height:26px;font-size:13px}.cart-controls .remove{width:auto;padding:0 9px;font-size:9px}.cart-summary{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;position:sticky;top:110px}.coupon{display:flex;margin:18px 0 8px}.coupon input{flex:1;border:1px solid var(--line);border-right:0;border-radius:9px 0 0 9px;padding:10px;font-size:10px;background:#fff9f9;outline:0}.coupon button{border:0;background:var(--deep);color:#fff;border-radius:0 9px 9px 0;padding:0 13px;font-size:9px}.coupon-note{font-size:9px;color:var(--rose)}.product-details{margin-top:80px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}.product-details h2{font-size:38px}.tabs{display:flex;gap:5px;overflow:auto;border-bottom:1px solid var(--line)}.tabs button{border:0;background:transparent;padding:12px 8px;font-size:10px;color:var(--muted)}.tabs button.active{color:var(--deep);border-bottom:2px solid var(--primary)}.tab-panel{min-height:110px;padding-top:18px;font-size:12px;line-height:1.8;color:var(--muted)}
.dashboard{max-width:1180px;margin:auto}.dash-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.dash-head p{color:var(--muted);font-size:13px}.dash-tabs{display:flex;gap:4px;margin:45px 0 20px;border-bottom:1px solid var(--line);overflow:auto}.dash-tabs button{border:0;background:transparent;padding:12px 14px;font-size:10px;color:var(--muted);white-space:nowrap}.dash-tabs button.active{color:var(--deep);border-bottom:2px solid var(--primary)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:18px 0 45px}.stats>div{background:#fff;border:1px solid var(--line);padding:22px;border-radius:17px}.stats b{display:block;font:500 36px var(--serif)}.stats span{font-size:10px;color:var(--muted)}.dash-section{margin-top:12px}.dash-section h2{font-size:31px}.dash-row{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;border-top:1px solid var(--line);padding:14px 0}.dash-row-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.dash-thumb{width:45px;height:57px;border:6px solid #FFF8F8;background:#fff}.dash-thumb.wood{background:#D9B89A;border-color:#D9B89A}.dash-thumb.black{background:#2F2527;border-color:#2F2527}.dash-thumb.beige{background:#E8D4D2;border-color:#E8D4D2}.dash-thumb.pink{background:#FFD3D6;border-color:#FFD3D6}.dash-thumb.deep-red{background:#8F352D;border-color:#8F352D}.dash-row b{font-size:11px}.dash-row small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.status{font-size:9px;padding:7px 10px;border-radius:99px;background:#fff1f2;color:var(--deep);border:1px solid var(--line)}.order-no{width:46px;height:46px;border-radius:13px;background:#fff6f7;display:grid;place-items:center;color:var(--rose);font:500 17px var(--serif)}.scan-row{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;border-top:1px solid var(--line);padding:16px 0}.scan-row strong{font:500 30px var(--serif);color:var(--rose)}.scan-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.account-grid .card-form:last-child{grid-column:1/-1}
.public-page{min-height:calc(100vh - 82px);padding:55px 5vw 100px;background:linear-gradient(#FDF4F4,#fff)}.public-shell{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 390px;gap:8vw;align-items:center}.public-intro h1{font:500 66px/1 var(--serif);margin:18px 0}.public-intro p{font-size:13px;line-height:1.8;color:var(--muted);max-width:420px}.scroll-hint{display:inline-block;margin-top:25px;font-size:9px;letter-spacing:.15em;color:var(--rose);text-transform:uppercase}.public-phone{display:flex;justify-content:center}
@media(max-width:1100px){header nav{gap:15px}.hero{grid-template-columns:1fr;min-height:unset}.hero-copy{padding-left:0}.hero-visual{margin-top:35px}.feature-strip{grid-template-columns:1fr 1fr}.feature-strip>div:nth-child(2){border-right:0}.feature-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.plan-grid,.testimonial-grid,.blog-grid,.about-grid{grid-template-columns:1fr 1fr}.story{grid-template-columns:1fr}.story-art{min-height:500px}.contact,.checkout{grid-template-columns:1fr}.summary{position:static}.selection-grid{grid-template-columns:1fr 1fr}.editor-layout,.nfc-layout{grid-template-columns:76px 1fr}.inspector{grid-column:1/-1;position:relative;top:auto}.review-grid{grid-template-columns:1fr}.review-summary{grid-column:auto}.auth-page{grid-template-columns:1fr 430px;gap:5vw}.account-grid{grid-template-columns:1fr 1fr}}
@media(max-width:780px){header{height:72px;padding:0 5vw}.logo{width:120px}header nav,.head-btn{display:none}.menu{display:block}.mobile-nav{display:none;position:fixed;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);z-index:99;padding:12px 5vw}.menu-open .mobile-nav{display:grid}.mobile-nav a{padding:11px 0;border-bottom:1px solid #f5e9ea;font-size:12px}.mobile-nav a:last-child{border-bottom:0}.hero{padding:50px 5vw 35px}.hero h1{font-size:53px}.hero-visual{min-height:500px}.hero-frame.front{width:290px;height:360px;left:3%;top:9%}.hero-frame.back{width:280px;height:340px;left:-1%;top:17%}.hero-phone{width:183px;height:380px;right:0;top:22%}.hero-art>div{font-size:33px}.feature-strip{margin:0 5vw;grid-template-columns:1fr}.feature-strip>div{border-right:0!important;border-bottom:1px solid var(--line)}.feature-strip>div:last-child{border-bottom:0}.section{padding:75px 5vw}.plan-grid,.testimonial-grid,.blog-grid,.about-grid,.selection-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.demo-card{min-height:350px}.demo-screen{height:315px}.story article{padding:70px 8vw}.story-frame{min-height:420px}.final-cta h2{font-size:48px}.page{padding:65px 5vw 80px}.page-head h1,.narrow h1{font-size:50px}.post h1{font-size:48px}.post-cover{height:250px}.post-cover strong{font-size:30px}.contact{grid-template-columns:1fr}.frame-grid{grid-template-columns:1fr}.frame-preview{width:340px;height:430px}.frame-preview.landscape{width:430px;height:340px}.editor-layout,.nfc-layout{grid-template-columns:minmax(0,1fr)!important}.editor-tools,.nfc-tools{position:sticky;top:155px;z-index:45;display:flex;overflow:auto}.tool{min-width:85px}.editor-area{min-height:500px;padding:8px}.device-phone{width:330px;height:650px}.nfc-layout .inspector{margin-top:10px}.review-phone .device-phone{transform:scale(.78);transform-origin:top center}.setup{display:block}.setup-side{position:relative;top:auto;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:20px 5vw}.setup-title{padding:30px 0 15px}.progress{display:flex;overflow:auto}.progress button{min-width:112px;justify-content:center;flex-direction:column;gap:5px}.setup-head{top:72px;height:auto;min-height:86px;padding:15px 5vw}.setup-head h1{font-size:24px}.setup-head-actions .btn{display:none}.setup-body{padding:25px 5vw 90px}.setup-foot{padding:12px 5vw}.privacy-card{padding:35px 22px}.auth-page{display:block;padding:55px 5vw}.auth-side{margin-bottom:30px}.auth-card h1{font-size:43px}.form-grid{grid-template-columns:1fr}.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.cart-row{grid-template-columns:58px 1fr}.cart-row>strong{grid-column:2}.public-shell{grid-template-columns:1fr}.public-intro{text-align:center}.public-intro h1{font-size:50px}.public-phone{order:-1}.public-page{padding-top:35px;padding-bottom:0}.stats{grid-template-columns:1fr}.dash-head{display:block}.dash-head .btn{margin-top:16px}.dash-row{grid-template-columns:50px 1fr}.dash-row .status,.dash-row-actions{grid-column:2}.dash-row-actions{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:6px}.account-grid{grid-template-columns:1fr}.account-grid .card-form:last-child{grid-column:auto}footer{grid-template-columns:1fr 1fr}.copyright{grid-column:1/-1}}
@media(max-width:460px){.hero h1{font-size:45px}.hero-phone{width:158px;height:330px}.hero-frame.front{width:230px;height:300px}.hero-frame.back{width:220px;height:285px}.hero-visual{min-height:410px}.hero-art>div{font-size:27px}.trust{gap:8px 15px}.section h2,.story h2{font-size:37px}.frame-preview{width:300px;height:380px;border-width:13px}.frame-preview.landscape{width:350px;height:280px}.device-phone{width:300px;height:600px;border-width:8px}.device-screen{border-radius:28px;padding:40px 15px 15px}.public-phone .device-phone{width:300px;height:600px}.sticker-grid{grid-template-columns:repeat(3,1fr)}.success-card{padding:42px 20px}.success-card h1{font-size:39px}.summary-total strong{font-size:25px}.page-head h1,.narrow h1{font-size:43px}}


/* Framie vNext refinements */
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cart-btn svg{width:20px;height:20px}
.selection{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.selection:hover{transform:scale(1.035);box-shadow:0 24px 55px rgba(58,46,47,.11);border-color:var(--primary)}.selection.selected{transform:scale(1.025);box-shadow:0 18px 45px rgba(205,116,122,.14)}
.shop-card{transition:transform .25s ease,box-shadow .25s ease}.shop-card:hover{transform:translateY(-5px) scale(1.018);box-shadow:var(--shadow)}.shop-art{overflow:visible}.fake-frame{position:relative;width:235px;height:290px;margin:auto;border:13px solid var(--blush);background:#fff;box-shadow:0 25px 55px rgba(58,46,47,.14);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:0 15px 24px;transform:translateZ(0)}.fake-frame.memory{border-color:#D9B89A}.fake-frame.standard{border-color:#2F2527;background:#2F2527;color:#fff}.fake-photo{position:absolute;inset:13px;background:linear-gradient(145deg,#fff4f5,#f8dfe1)}.fake-frame span,.fake-frame small{position:relative;z-index:1}.fake-frame span{font:500 22px var(--serif);text-align:center}.fake-frame small{position:absolute;top:18px;right:18px;font-size:9px;letter-spacing:.12em;color:var(--rose)}
.privacy-consents{display:grid;gap:12px;margin-top:18px}.check{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fffafa;font-size:11px;line-height:1.65;color:var(--muted)}.check input{margin-top:3px;accent-color:var(--rose)}.modal-card.privacy{max-height:88vh;display:flex;flex-direction:column}.privacy-scroll{overflow:auto;padding-right:8px}.privacy-scroll h2{font:500 28px/1.15 var(--serif)}.privacy-scroll h3{font-size:13px;margin-top:22px;color:var(--deep);letter-spacing:.02em}.privacy-scroll p,.privacy-scroll li{font-size:11px;line-height:1.8;color:var(--muted)}.privacy-scroll ul{padding-left:18px}.privacy-consents+.btn{margin-top:14px}
.range-row{display:flex;align-items:center;gap:10px}.control input[type=range]{width:100%;accent-color:var(--rose);cursor:grab}.control input[type=range]:active{cursor:grabbing}
.physical,.nfc-el{touch-action:none;user-select:none}.physical.text,.nfc-el.text{white-space:normal;overflow:visible}.nfc-el.audio{background:transparent}.nfc-audio,.audio-trigger{cursor:pointer}.nfc-audio{border:0;background:#fff4f5;border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:left;color:var(--deep);font:inherit}.nfc-audio span{color:var(--muted);font-size:9px}.audio-trigger{border:0;background:#fff4f5;color:var(--deep);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:center;flex-direction:column;min-width:150px}.audio-trigger b{font-size:10px}.audio-trigger span{font-size:9px;color:var(--muted)}.saved-audio{display:grid;gap:7px;padding:16px 0;position:relative;z-index:6}.saved-audio-player{width:100%;height:34px}.inline-audio-player{display:block;width:100%;margin-top:7px;height:34px}.device-screen{overflow-y:auto;overscroll-behavior:contain}.dashboard-preview-modal{max-width:570px}.dashboard-preview-phone{display:flex;justify-content:center;padding:10px}.dashboard-preview-phone .device-phone{width:315px;height:610px}.value-page h1{max-width:950px}.value-section{display:grid;grid-template-columns:90px 1fr;gap:35px;padding:52px 0;border-top:1px solid var(--line)}.value-section h2{font:500 32px var(--serif);margin:0 0 25px}.value-label{font:600 12px/1 var(--sans);letter-spacing:.15em;color:var(--rose)}.value-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}.value-list li{display:grid;gap:6px}.value-list b{font-size:14px;color:var(--deep)}.value-list span{font-size:13px;line-height:1.8;color:var(--muted);max-width:780px}

/* Shop catalog: three equal cards with a product frame showcase above each package. */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px;align-items:stretch}
.shop-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.shop-card:hover{transform:translateY(-5px) scale(1.018);box-shadow:var(--shadow);border-color:var(--primary)}
.shop-art{padding:16px 20px 12px;background:linear-gradient(145deg,#fffafb,#fff);overflow:visible}
.shop-frame-showcase{min-height:250px;display:grid;place-items:center}
.fake-frame{width:235px;height:290px;margin:auto}
.shop-frame-1{border-color:#fff!important;background:#fff!important}
.shop-frame-2{border-color:#E8D4D2!important;background:#fff!important}
.shop-frame-3{border-color:#FFD3D6!important;background:#fff!important}
.shop-frame-1 .fake-photo,.shop-frame-2 .fake-photo,.shop-frame-3 .fake-photo{background:linear-gradient(145deg,#fff4f5,#f8dfe1)}
.shop-info{padding:16px 25px 22px;display:flex;flex-direction:column;flex:1}
.shop-info h2{font:500 29px var(--serif);margin:19px 0 8px}
.shop-info .fit{margin-top:auto;padding-top:10px}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.price-row strong{font:600 27px var(--serif);color:var(--deep)}
.shop-setup{white-space:nowrap}

/* Give every NFC phone a deliberately scrollable canvas in Custom, Preview, Dashboard and public NFC. */
.device-screen{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.scroll-space{height:720px;min-height:720px;pointer-events:none}
.nfc-el.audio{display:flex;justify-content:center}
.nfc-audio{width:100%;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-direction:row;padding:12px 15px}
.audio-trigger{flex-direction:row;justify-content:flex-start;min-width:0;width:100%;text-align:left}
.audio-trigger b{white-space:nowrap}
.audio-trigger span{white-space:nowrap}

@media(max-width:1100px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shop-art{padding-left:12px;padding-right:12px}.shop-frame-showcase{min-height:285px}.fake-frame{width:205px;height:255px}.shop-info{padding:21px}.shop-info h2{font-size:26px}}
@media(max-width:780px){.shop-grid{grid-template-columns:1fr}.shop-frame-showcase{min-height:320px}.fake-frame{width:235px;height:290px}.shop-info{padding:24px}.scroll-space{height:780px;min-height:780px}}

/* vNext: polished Canva-style editor + Spotify + responsive public NFC */
.btn.primary{background:#CD747A!important}.btn.primary:hover{background:#B96066!important}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.quick-actions button,.layer-actions button{border:1px solid var(--line);background:#fff;border-radius:10px;min-height:38px;color:var(--deep);font-size:11px;font-weight:800}.inspector{background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(58,46,47,.08)}
.editor-layout{grid-template-columns:74px minmax(0,1fr) 330px}.editor-tools,.nfc-tools{gap:7px}.tool{border-radius:12px;border:1px solid var(--line);background:#fff;transition:.2s}.tool:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(58,46,47,.08);border-color:var(--primary)}
.editor-area{background:radial-gradient(circle at 50% 30%,#fff,#f9eeee 70%);border-radius:22px;min-height:720px;display:grid;place-items:center;overflow:auto;padding:35px}.frame-preview{transition:box-shadow .2s}.physical.selected,.nfc-el.selected{outline:2px solid #CD747A;outline-offset:4px}
.control input[type=range]{accent-color:#CD747A}.control input[type=range]::-webkit-slider-thumb{cursor:grab}.control input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.nfc-layout{grid-template-columns:74px minmax(0,1fr) 330px}.phone-center,.review-phone,.public-phone{display:flex;justify-content:center;align-items:flex-start}.device-screen{scrollbar-width:thin;scrollbar-color:#CD747A #f7e9ea}.device-screen::-webkit-scrollbar{width:7px}.device-screen::-webkit-scrollbar-thumb{background:#CD747A;border-radius:99px}
.scroll-space{height:1500px;min-height:1500px}
.nfc-el{overflow:visible}.nfc-el.image,.nfc-el.video,.nfc-el.audio,.nfc-el.spotify{min-height:40px}.nfc-el.image img,.nfc-el.video video{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}.nfc-el.audio .nfc-audio{height:100%}.nfc-el.spotify{background:transparent}.spotify-embed{width:100%;height:100%;min-height:152px}.spotify-embed iframe{display:block;width:100%;height:100%;min-height:152px;border:0;border-radius:14px}
.saved-audio-player{width:100%}.saved-audio{padding:16px 0}.audio-trigger{background:#fff4f5!important;border-color:#EED1D3!important}
.about-page{padding:0 5vw;background:var(--bg)}.about-hero{min-height:720px;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;max-width:1450px;margin:auto}.about-hero h1{font:500 clamp(48px,5.6vw,82px)/.98 var(--serif);letter-spacing:-.04em;margin:18px 0 24px}.about-hero h1 em,.pillar-grid em,.about-cta em{color:var(--rose)}.about-hero p{max-width:610px;color:var(--muted);font-size:16px;line-height:1.9;margin-bottom:30px}.about-hero-art{min-height:590px;position:relative}.about-card{position:absolute;border-radius:18px;box-shadow:var(--shadow)}.about-back{width:350px;height:430px;left:8%;top:14%;background:#f8dfe1;transform:rotate(-5deg)}.about-front{width:370px;height:455px;left:18%;top:8%;background:#fff;border:15px solid #FFD3D6;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.about-front span{position:absolute;top:20px;left:22px;font-size:9px;letter-spacing:.2em;color:var(--rose)}.about-front strong{font:500 48px/1.02 var(--serif)}.about-front i{color:var(--rose)}.about-front small{margin-top:30px;color:var(--rose);letter-spacing:.18em;font-size:9px}.about-orbit{position:absolute;width:120px;height:120px;border:1px solid var(--line);border-radius:50%;right:4%;top:8%}.about-story-block,.about-pillars,.about-values{max-width:1180px;margin:0 auto;padding:110px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:60px}.about-story-block h2,.about-pillars h2{font:500 clamp(40px,4.2vw,60px)/1.02 var(--serif);margin:0 0 25px}.about-story-block p{font-size:15px;line-height:1.9;color:var(--muted);max-width:850px}.about-section-label{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--rose)}.pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pillar-grid article,.value-cards article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}.pillar-grid article span{font-size:9px;letter-spacing:.16em;color:var(--rose)}.pillar-grid h3{font:500 30px var(--serif);margin:16px 0}.pillar-grid p,.value-cards p{color:var(--muted);font-size:12px;line-height:1.8}.value-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.value-cards b{color:var(--rose);font:600 13px var(--serif)}.value-cards h3{font:500 23px var(--serif);margin:30px 0 8px}.about-cta{text-align:center;max-width:1100px;margin:0 auto;padding:110px 0 130px}.about-cta h2{font:500 clamp(45px,5vw,70px)/1.02 var(--serif);margin:16px 0 28px}
.public-page{min-height:100vh;padding:50px 5vw 90px}.public-shell{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 420px;gap:7vw;align-items:start}.public-intro{padding-top:50px}.public-intro h1{font:500 clamp(48px,6vw,76px)/.98 var(--serif);margin:18px 0 22px}.public-intro h1 em{color:var(--rose)}.public-intro p{color:var(--muted);line-height:1.8;max-width:520px}.scroll-hint{display:inline-block;margin-top:28px;color:var(--rose);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.public-phone{position:sticky;top:35px}.public-phone .device-phone{width:360px;height:760px}.public-frame-match{grid-column:1/-1;display:flex;justify-content:center;margin-top:55px}.public-frame-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow);text-align:center}.public-frame{width:300px;height:390px;margin:20px auto 15px}.public-frame.landscape{width:390px;height:300px}.public-frame-meta{display:flex;justify-content:center;gap:15px;color:var(--muted);font-size:10px}
@media(max-width:1050px){.editor-layout,.nfc-layout{grid-template-columns:64px minmax(0,1fr) 290px}.about-hero{grid-template-columns:1fr;min-height:unset;padding:80px 0}.about-hero-art{min-height:520px}.about-story-block,.about-pillars,.about-values{grid-template-columns:1fr;gap:25px}.value-cards{grid-template-columns:1fr 1fr}.public-shell{grid-template-columns:1fr 370px}}
@media(max-width:780px){.editor-layout,.nfc-layout{display:grid;grid-template-columns:1fr}.editor-tools,.nfc-tools{position:sticky;top:0;z-index:60;display:flex;overflow:auto;padding:8px;background:rgba(253,244,244,.96);border-radius:14px}.editor-tools .tool,.nfc-tools .tool{min-width:92px}.editor-area{min-height:540px;padding:18px}.inspector{order:3}.setup-body{padding-bottom:120px}.about-hero{padding:60px 0 30px}.about-hero-art{min-height:460px}.about-back{width:250px;height:320px;left:4%}.about-front{width:275px;height:340px;left:17%;border-width:11px}.about-front strong{font-size:36px}.about-story-block,.about-pillars,.about-values{padding:75px 0}.pillar-grid,.value-cards{grid-template-columns:1fr}.public-shell{grid-template-columns:1fr;gap:35px}.public-phone{position:relative;top:auto;order:-1}.public-phone .device-phone{width:min(88vw,350px);height:700px}.public-frame-match{margin-top:15px}.public-frame{width:250px;height:325px}.public-frame.landscape{width:325px;height:250px}.scroll-space{height:1500px;min-height:1500px}}
@media(max-width:460px){.public-page{padding-left:12px;padding-right:12px}.public-phone .device-phone{width:94vw;height:690px}.device-screen{padding:40px 14px 14px}.public-frame-card{padding:20px 14px}.about-card{transform:none}.about-back{left:0}.about-front{left:12%}}

/* ===== Framie vNext visual/product refinement ===== */
.hero h1{font-size:clamp(48px,5.2vw,76px)}
@media(min-width:1101px){
  .hero{grid-template-columns:42fr 48fr;column-gap:40px}
  .hero-copy{padding-left:0}
  .hero-copy h1{margin:14px 0 20px;line-height:1.02}
  .hero-copy>p{max-width:none;margin:0}
  .hero-actions{margin:22px 0 28px}
  .hero .hero-product-shot{margin:0 0 40px}
}
@media(min-width:1101px){.hero-visual{min-height:590px}}
.hero-frame.back,.hero-frame.front{overflow:hidden}
.hero-frame.back img,.hero-frame.front .hero-art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88)}
.hero-frame.front .hero-art{position:relative;background:#fff}
.hero-frame.front .hero-art img{opacity:.23;position:absolute;inset:0}
.hero-frame.front .hero-art>div,.hero-frame.front .hero-art>span,.hero-frame.front .hero-art>small{position:relative;z-index:2}
.hero-frame.front .hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,247,248,.35),rgba(255,247,248,.84));z-index:1}
.hero-phone{
  transform:translate(375px, -105px) scale(0.72) rotate(5deg) !important;
  overflow:hidden;
}
.dynamic-island{position:absolute;z-index:9;left:50%;top:11px;transform:translateX(-50%);width:92px;height:25px;border-radius:999px;background:#121011;box-shadow:0 1px 1px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.04)}
.phone-screen{position:relative;padding-top:45px;text-align:center}
.phone-logo-wrap{display:flex;justify-content:center;margin-bottom:6x}.phone-logo-wrap .compact{width:58px}
.phone-photo{
  height:450px;
  overflow:hidden;
  background:var(--soft);
}

.phone-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.hero-phone .phone-screen h4{font-size:16px;white-space:nowrap}.hero-phone .phone-screen p{text-align:center;margin:4px 0 12px}.hero-phone .mini-audio{justify-content:flex-start}
.feature-strip{margin-top:0}
.couple-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:45px}.couple-story-grid article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}.couple-story-grid article:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.couple-story-grid img{width:100%;height:330px;object-fit:cover;border-radius:16px;display:block}.couple-story-grid span{display:block;color:var(--rose);font:600 13px var(--serif);margin:20px 4px 6px}.couple-story-grid h3{font:500 31px/1.08 var(--serif);margin:0 4px 12px}.couple-story-grid p{color:var(--muted);line-height:1.8;font-size:13px;margin:0 4px 6px}
.setup-couple-note{max-width:200px;color:var(--muted);font-size:11px;line-height:1.7;margin-top:12px}.selection{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.selection:hover{transform:translateY(-7px) scale(1.025);box-shadow:var(--shadow);border-color:var(--primary)}.selection.selected{transform:scale(1.02);border-color:var(--primary);box-shadow:0 20px 48px rgba(205,116,122,.14)}
.shop-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.shop-card:hover{transform:translateY(-7px) scale(1.022)}.frame-product-shell{padding:10px;border-radius:20px;background:rgba(255,255,255,.55);box-shadow:0 18px 36px rgba(58,46,47,.09)}.fake-frame{position:relative;overflow:hidden;background:var(--frame-color)!important;border-color:var(--frame-color)!important;box-shadow:0 18px 35px rgba(58,46,47,.12)}.fake-frame img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;border-radius:7px}.fake-frame span{position:absolute;right:12px;top:12px;z-index:3;font-size:8px;letter-spacing:.18em;color:var(--rose);background:rgba(255,255,255,.72);padding:4px 6px;border-radius:8px}
.swatch{width:38px!important;height:38px!important}.swatch.selected{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--primary)}
.editor-layout,.nfc-layout{gap:15px}.editor-tools,.nfc-tools{background:rgba(255,255,255,.7);padding:8px;border-radius:18px}.tool{min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px}.tool b{font-size:10px}.editor-area{min-height:760px}.device-stage{display:flex;flex-direction:column;align-items:center;gap:10px}.editor-hint{margin:0;color:var(--muted);font-size:10px;text-align:center;max-width:400px}.nfc-el.audio,.nfc-el.spotify{touch-action:none}.drag-handle{position:absolute;left:6px;top:6px;z-index:8;width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.9);border:1px solid var(--line);display:grid;place-items:center;color:var(--rose);font-size:13px;cursor:grab;box-shadow:0 5px 14px rgba(58,46,47,.08)}.drag-handle:active{cursor:grabbing}.nfc-el.selected .drag-handle{display:grid}
.privacy-settings{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}.switch-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:10px}.switch-row span{display:flex;flex-direction:column;gap:4px}.switch-row b{font-size:12px}.switch-row small,.password-field small{color:var(--muted);font-size:9px;line-height:1.5}.password-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}.password-field input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}.security-badge{display:inline-flex;align-items:center;gap:6px;margin:10px 0;padding:8px 10px;border-radius:999px;background:#fff4f5;border:1px solid var(--line);font-size:10px;color:var(--deep)}
.dashboard-preview-modal{max-width:620px}.dashboard-preview-phone{display:flex;justify-content:center}.dashboard-preview-phone .device-phone{transform:scale(.9);transform-origin:top center}
.nfc-lock-page{min-height:100vh;display:grid;place-items:center;padding:60px 20px}.nfc-lock-card{width:min(92vw,470px);background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:42px;text-align:center}.lock-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:25px}.nfc-lock-card h1{font:500 clamp(40px,5vw,56px)/1.02 var(--serif);margin:15px 0}.nfc-lock-card h1 em{color:var(--rose)}.nfc-lock-card p{color:var(--muted);line-height:1.8;font-size:13px;margin-bottom:22px}.nfc-lock-card input{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:10px;background:#fff}.nfc-lock-card small{display:block;color:#B54B54;min-height:18px;margin-top:10px}
.public-shell{grid-template-columns:1fr 420px;align-items:start}.public-phone .device-phone{height:780px}.public-frame-card{margin-top:5px}.public-frame-match{grid-column:1/-1}
.about-image-card{position:absolute;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.about-image-card img{display:block;width:100%;height:100%;object-fit:cover}.couple-collage .img-a{width:290px;height:380px;left:0;top:10%;transform:rotate(-6deg)}.couple-collage .img-b{width:245px;height:330px;right:2%;bottom:2%;transform:rotate(5deg)}.couple-collage .about-front{z-index:3;width:250px;height:315px;left:27%;top:21%;background:rgba(255,255,255,.92);border:12px solid #FFD3D6;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:var(--shadow)}.couple-collage .about-front span{position:absolute;top:18px;left:20px;font-size:9px;letter-spacing:.2em;color:var(--rose)}.couple-collage .about-front strong{font:500 38px/1.02 var(--serif)}.couple-collage .about-front i{color:var(--rose)}.couple-collage .about-front small{margin-top:24px;color:var(--rose);letter-spacing:.17em;font-size:8px}.positioning-block{max-width:1180px;margin:0 auto;padding:110px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:60px}.positioning-block h2{font:500 clamp(40px,4.2vw,60px)/1.02 var(--serif);margin:16px 0 30px}.positioning-block h2 em{color:var(--rose)}.positioning-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.positioning-grid article{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}.positioning-grid b{font:600 16px var(--serif)}.positioning-grid p{font-size:12px;color:var(--muted);line-height:1.8;margin:9px 0 0}.about-gallery{max-width:1180px;margin:0 auto;padding:110px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.3fr;gap:50px}.about-gallery h2{font:500 clamp(40px,4.2vw,60px)/1.02 var(--serif);margin:16px 0}.about-gallery h2 em{color:var(--rose)}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gallery-grid figure{margin:0}.gallery-grid img{width:100%;height:420px;object-fit:cover;border-radius:20px;display:block}.gallery-grid figcaption{margin-top:12px;font-size:11px;line-height:1.7;color:var(--muted)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1050px){.about-hero-art{min-height:600px}.positioning-block,.about-gallery{grid-template-columns:1fr;gap:26px}.gallery-grid img{height:360px}}
@media(max-width:780px){.hero{grid-template-columns:1fr;padding-top:50px}.hero-copy{text-align:left;padding-left:0}.hero-visual{min-height:unset;margin-top:10px}.hero-frame.back{left:5%;width:320px;height:390px}.hero-frame.front{left:10%;width:340px;height:410px}.hero-phone{right:4%;width:210px;height:450px}.hero-phone .phone-photo{height:145px}.hero-phone .phone-screen h4{font-size:14px}.couple-story-grid{grid-template-columns:1fr}.couple-story-grid img{height:300px}.couple-collage .img-a{left:0;width:230px;height:310px}.couple-collage .img-b{width:190px;height:270px}.couple-collage .about-front{left:22%;width:220px;height:285px}.positioning-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.gallery-grid img{height:320px}.nfc-lock-card{padding:30px 22px}.nfc-tools{position:sticky;top:0}.dashboard-preview-phone .device-phone{transform:scale(.85);transform-origin:top center}.public-phone .device-phone{height:730px;width:min(90vw,350px)}}
@media(max-width:460px){.hero-frame.back{left:0;width:270px;height:345px}.hero-frame.front{left:5%;width:290px;height:370px}.hero-phone{right:0;width:190px;height:405px;border-width:7px}.dynamic-island{width:78px;height:22px}.phone-screen{padding:39px 13px 20px}.phone-photo{height:125px}.hero-phone .phone-screen h4{font-size:12px}.hero-phone .phone-screen p{font-size:9px}.mini-audio{padding:8px;font-size:10px}.couple-collage .about-front{left:17%;width:205px;height:260px}.about-gallery{padding-top:75px}.positioning-block{padding-top:75px}}


/* ===== Framie final refinement layer ===== */
:root{--primary:#CD747A;--font-sans:'Manrope','Helvetica Neue',Arial,sans-serif;--font-serif:'Playfair Display',Georgia,'Times New Roman',serif}
html,body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,a,input,textarea,select{font-family:var(--font-sans);font-synthesis:none;-webkit-tap-highlight-color:transparent}
a,a:visited{color:inherit}
button{color:var(--text);appearance:none;-webkit-appearance:none}
.text-link,.text-link:visited{color:var(--deep)!important}
.brand{align-items:center;text-align:center;width:max-content}.brand>span{display:block;width:100%;text-align:center;color:var(--rose)!important;white-space:nowrap}
.hero h1{font-size:clamp(46px,5vw,72px)}
.memory-section h2 em{font-style:italic}
.memory-section .couple-story-grid article:nth-child(2) img{object-position:center 22%}
.shop-card .shop-frame-3 img{object-position:center 35%}
.shop-card:hover{transform:translateY(-8px) scale(1.025);z-index:2}.selection:hover{transform:translateY(-8px) scale(1.025)}
.contact h1{font:500 clamp(48px,6vw,84px)/.97 var(--font-serif);letter-spacing:-.04em;margin:17px 0 26px}.contact-side .card-form h3{font:500 31px/1.05 var(--font-serif);letter-spacing:-.025em}
.privacy-consents{gap:6px}.check{padding:10px 12px}
.device-phone{width:390px;height:730px;border:10px solid var(--text);background:var(--text);border-radius:44px;box-shadow:0 30px 80px rgba(58,46,47,.22);position:relative;overflow:hidden;flex:0 0 auto}.device-screen{height:100%;background:#fff;border-radius:34px;overflow-y:auto;overflow-x:hidden;position:relative}
.dynamic-island{position:absolute;z-index:30;left:50%;top:11px;transform:translateX(-50%);width:92px;height:25px;border-radius:999px;background:#121011;box-shadow:0 1px 1px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.04)}
.phone-screen{padding:45px 18px 28px;text-align:center}.hero-phone{transform:rotate(5deg);overflow:hidden}.hero-phone .dynamic-island{top:11px}.hero-phone .phone-photo{height:165px}.hero-phone .phone-screen h4{font-size:16px;white-space:nowrap}
.physical.selected,.nfc-el.selected{outline:2px solid #CD747A!important;outline-offset:4px}
.physical,.nfc-el{cursor:grab}.physical:active,.nfc-el:active{cursor:grabbing}
.nfc-el.text,.physical.text{overflow:hidden;display:flex;align-items:center;justify-content:center}
.security-step-shell{min-height:620px;display:grid;place-items:center;padding:30px 10px}.security-step-card{width:min(760px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:40px;text-align:center}.security-lock{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:#fff3f4;display:grid;place-items:center;font-size:22px}.security-step-card h2{font:500 clamp(34px,4vw,50px)/1.05 var(--font-serif);margin:14px 0}.security-step-card>p{color:var(--muted);font-size:13px;line-height:1.8;max-width:620px;margin:0 auto 25px}.security-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.security-choice-btn{border:1px solid var(--line);background:#fffafa;border-radius:16px;padding:18px;display:grid;gap:5px}.security-choice-btn b{font-size:13px}.security-choice-btn span{font-size:10px;color:var(--muted)}.security-choice-btn.selected{border-color:var(--primary);background:#fff3f4;box-shadow:0 10px 24px rgba(205,116,122,.1)}.security-password-wrap{margin-top:16px;text-align:left;padding:16px;background:#fffafa;border:1px solid var(--line);border-radius:14px}.security-password-wrap label{display:grid;gap:7px;font-size:11px;font-weight:800}.security-password-wrap input{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}.security-password-wrap small{font-size:9px;color:var(--muted);font-weight:500}.security-step-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px}.security-state{font-size:10px;color:var(--muted)}
.nfc-management-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:14px;box-shadow:0 8px 28px rgba(58,46,47,.04)}.nfc-management-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.nfc-management-head b{font-size:13px}.nfc-management-head small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.nfc-url-row,.nfc-credential-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:13px}.nfc-url-row span,.nfc-credential-row>span{font-size:9px;color:var(--rose);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.nfc-url-row code{font:500 10px/1.5 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff8f8;padding:8px 9px;border-radius:9px}.nfc-credential-row{grid-template-columns:56px auto 1fr auto auto auto}.password-modal{max-width:520px}.password-reveal{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}.password-reveal input{border:0;outline:0;flex:1;min-width:0;padding:0 12px;height:44px}.password-reveal button{border:0;background:#fff4f5;color:var(--deep);padding:0 13px;font-size:10px;font-weight:800}
.real-memory-page{background:linear-gradient(180deg,#FDF4F4,#fff)}.public-memory-hero{max-width:1100px;margin:0 auto;padding:90px 0 55px;display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.public-memory-hero h1{font:500 clamp(48px,6vw,82px)/.96 var(--font-serif);letter-spacing:-.04em;margin:18px 0}.public-memory-hero h1 em{color:var(--rose)}.public-memory-hero p{max-width:520px;color:var(--muted);line-height:1.9;font-size:14px}.memory-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;color:var(--rose);font-size:10px;letter-spacing:.15em}.memory-content{max-width:1100px;margin:0 auto;padding:0 0 80px}.memory-stage-shell{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:28px}.nfc-web-canvas-wrap{max-width:440px;margin:auto}.nfc-web-canvas{position:relative;width:100%;min-height:480px;border-radius:24px;background:#fff8f8;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 60px rgba(58,46,47,.08)}.nfc-web-canvas .nfc-top{position:absolute;top:35px;left:0;width:100%;z-index:2;text-align:center}.nfc-web-canvas .nfc-top .compact{width:78px}.nfc-web-canvas .nfc-top span{display:block;color:var(--rose);font-size:7px;letter-spacing:.16em;margin-top:3px}.nfc-web-canvas .nfc-el{position:absolute}.nfc-web-canvas .nfc-el.image,.nfc-web-canvas .nfc-el.video{border-radius:15px;overflow:hidden}.nfc-web-canvas .nfc-el.image img,.nfc-web-canvas .nfc-el.video video{width:100%;height:100%;object-fit:cover;display:block}.nfc-web-canvas .nfc-el.spotify{background:transparent}.nfc-web-canvas .spotify-embed{width:100%;height:100%}.memory-footer{text-align:center;padding:60px 20px 90px;border-top:1px solid var(--line)}.memory-footer span{font-size:9px;letter-spacing:.18em;color:var(--rose)}.memory-footer p{font:500 27px var(--font-serif);margin:14px 0;color:var(--deep)}
.about-text-only .about-minimal-hero{display:block;min-height:auto;padding:130px 0 120px;max-width:980px}.about-minimal-hero h1{max-width:900px}.about-positioning{max-width:1180px;margin:0 auto;padding:110px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:60px}.about-positioning h2{font:500 clamp(40px,4.2vw,60px)/1.02 var(--font-serif);margin:0 0 30px}.about-positioning h2 em{color:var(--rose)}.about-values-three .value-cards{grid-template-columns:repeat(3,1fr)}
.socials a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inspector{max-height:calc(100vh - 120px);overflow:auto;position:sticky;top:116px}
@media(max-width:780px){.security-step-card{padding:28px 20px}.security-choice{grid-template-columns:1fr}.security-step-actions{align-items:stretch;flex-direction:column}.security-step-actions .btn{width:100%}.public-memory-hero{display:block;padding:20px 20px 16px;text-align:center}.memory-meta{align-items:center;margin-top:10px}.memory-content{padding:0 20px 20px}.memory-footer{padding:20px 20px 20px}.memory-cta{padding:20px 20px 0}.memory-stage-shell{padding:12px;border-radius:20px}.nfc-web-canvas{border-radius:16px}.about-text-only .about-minimal-hero{padding:70px 0}.about-positioning{grid-template-columns:1fr;gap:25px;padding:75px 0}.about-values-three .value-cards{grid-template-columns:1fr}.nfc-url-row{grid-template-columns:1fr}.nfc-credential-row{grid-template-columns:1fr 1fr}.nfc-credential-row .text-link:last-child{grid-column:1/-1}.nfc-management-head{display:block}.nfc-management-head .security-badge{margin-top:10px}.device-phone{width:min(92vw,390px);height:700px}.hero-phone{width:210px;height:450px}.inspector{position:relative;top:auto;max-height:none}}
@media(max-width:460px){.hero h1{font-size:43px}.hero-phone{width:158px;height:330px;border-width:8px}.hero-phone .dynamic-island{width:78px;height:22px}.device-phone{width:94vw;height:600px;border-width:8px;border-radius:38px}.device-screen{border-radius:29px}.dynamic-island{width:78px;height:22px}.memory-content{padding-left:12px;padding-right:12px;padding-bottom:16px}.nfc-url-row code{font-size:9px}.nfc-credential-row{grid-template-columns:1fr 1fr}.nfc-credential-row strong{justify-self:end}.nfc-credential-row .text-link{font-size:10px}}

.nfc-cover-box{width:100%;height:100%;border-radius:18px;background:linear-gradient(145deg,var(--soft),var(--blush));pointer-events:none}.nfc-cover-placeholder{position:absolute;left:8%;top:154px;width:84%;height:220px;border-radius:18px;background:linear-gradient(145deg,var(--soft),var(--blush));z-index:0;pointer-events:none}.web-legacy-audio{position:absolute;left:8%;right:8%;bottom:3%;display:grid;gap:8px;background:#fff;padding:12px;border:1px solid var(--line);border-radius:14px;z-index:10}.web-legacy-audio button{border:0;background:#fff4f5;border-radius:10px;padding:10px;text-align:left;color:var(--deep)}.web-legacy-audio button span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.web-legacy-audio audio{width:100%}.physical.image,.nfc-el.image{overflow:hidden}.physical.image img,.nfc-el.image img,.nfc-el.video video{width:100%;height:100%;object-fit:cover;display:block}.physical.text,.physical.sticker{pointer-events:auto}
/* Hạ nội dung chữ + lời nhắn thoại xuống 20px */
.hero-phone .phone-screen h4,
.hero-phone .phone-screen p,
.hero-phone .phone-screen .mini-audio {
  transform: translateY(20px);
}
/* =========================================================
   BRAND STORY — COMPACT HEIGHT
   ========================================================= */

.about-text-only .about-story-block{
  display:block!important;
  width:calc(100% - 40px)!important;
  max-width:1200px!important;
  margin:0 auto 40px!important;
  padding:24px 48px 26px!important;
  box-sizing:border-box!important;
  background:linear-gradient(135deg,#fff7f8 0%,#fdecef 100%)!important;
  border:1px solid #f1cfd5!important;
  border-radius:28px!important;
  box-shadow:0 12px 32px rgba(190,100,120,.08)!important;
  position:relative!important;
  overflow:hidden!important;
}

.about-text-only .about-story-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

.about-text-only .about-story-block .about-section-label{
  width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  color:var(--rose)!important;
}

.about-text-only .about-story-content h2{
  width:100%!important;
  margin:0 0 18px!important;
  padding:0!important;
  text-align:center!important;
  font:500 clamp(34px,3.5vw,48px)/1.05 var(--serif)!important;
}

.about-text-only .about-story-content>p{
  width:100%!important;
  max-width:none!important;
  margin:0 0 12px!important;
  padding:0!important;
  font-size:16px!important;
  line-height:1.6!important;
  color:#4d4143!important;
  text-align:justify!important;
  text-align-last:left!important;
}

.about-text-only .about-story-content strong{
  color:#b85d70!important;
  font-weight:700!important;
}

.about-text-only .about-story-footer{
  width:100%!important;
  margin:16px 0 0!important;
  padding:14px 0 0!important;
  border-top:1px solid #efcfd5!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}

.about-text-only .about-story-footer .about-story-ending{
  flex:1!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  font-size:17px!important;
  line-height:1.4!important;
  color:#a94f64!important;
  text-align:left!important;
}

.about-text-only .about-story-footer .btn{
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:10px 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}


/* MOBILE */

@media(max-width:780px){

  .about-text-only .about-story-block{
    width:calc(100% - 24px)!important;
    margin:0 auto 25px!important;
    padding:20px 22px 24px!important;
    border-radius:22px!important;
  }

  .about-text-only .about-story-content h2{
    font-size:32px!important;
    margin-bottom:16px!important;
  }

  .about-text-only .about-story-content>p{
    font-size:14px!important;
    line-height:1.6!important;
    margin-bottom:11px!important;
  }

}


/* SMALL MOBILE */

@media(max-width:460px){

  .about-text-only .about-story-block{
    padding:18px 18px 20px!important;
  }

  .about-text-only .about-story-content h2{
    font-size:29px!important;
    margin-bottom:14px!important;
  }

  .about-text-only .about-story-content>p{
    font-size:13.5px!important;
    line-height:1.55!important;
    margin-bottom:10px!important;
  }

  .about-text-only .about-story-footer{
    margin-top:13px!important;
    padding-top:12px!important;
  }

  .about-text-only .about-story-footer .about-story-ending{
    font-size:13px!important;
  }

  .about-text-only .about-story-footer .btn{
    padding:8px 10px!important;
    font-size:10px!important;
  }

}

/* Fix: hero-phone mockup was overflowing off the right edge on mobile.
   Root cause: the shared .device-phone rule (390x730) overrides hero-phone's
   own width/height on small screens due to source order, and the desktop-only
   translate(375px...) transform (!important) was never reset for mobile. */
@media(max-width:780px){
  .hero-phone{position:absolute!important;width:210px!important;height:450px!important;right:4%!important;top:22%!important;left:auto!important;transform:rotate(5deg)!important;}
}
@media(max-width:460px){
  .hero-phone{position:absolute!important;width:158px!important;height:330px!important;right:4%!important;top:22%!important;left:auto!important;transform:rotate(5deg)!important;}
}

/* Fix: horizontal tool-type scroller (Văn bản/Hình ảnh/Âm thanh/Sticker/Spotify)
   was overflowing the page on mobile because a grid item with content wider than
   its track does not shrink to fit by default, and the trailing tool was flush
   against the edge with no scroll buffer. */
@media(max-width:780px){
  .editor-tools,.nfc-tools{max-width:100%;box-sizing:border-box}
  .editor-tools::after,.nfc-tools::after{content:"";flex:0 0 4px}
}

/* Fix: the login/register form (#auth, #forgot) had no input styling at
   all — bare browser-default text boxes with no gap between them, unlike
   every other form on the site (.card-form). Bring it in line visually. */
.auth-card form{display:grid;gap:12px;margin-top:22px}
.auth-card form input:not([type=checkbox]){width:100%;height:48px;border:1px solid var(--line);background:#fff9f9;border-radius:12px;padding:0 16px;font-size:13px;color:var(--text);outline:0;box-sizing:border-box;transition:.2s}
.auth-card form input:not([type=checkbox])::placeholder{color:var(--muted)}
.auth-card form input:not([type=checkbox]):focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(230,161,165,.14)}
.auth-card form input[type=checkbox]{width:15px;height:15px;flex:0 0 auto}
.auth-options{margin:2px 0 6px}
.auth-options input[type=checkbox]{accent-color:var(--primary)}
.auth-card .google{margin-top:14px}
.auth-card .switch{display:inline-block;margin-top:16px}

/* Fix: "Tạo Framie mới" button in the Dashboard header could shrink and
   wrap onto two lines (e.g. next to a long user name) since flex items
   shrink by default. Keep it on one line and never let it compress. */
.dash-head .btn{white-space:nowrap;flex-shrink:0}

/* Fix: unlike every other modal on the site, .password-modal skipped the
   shared .modal-head wrapper, so its content had zero padding — text and
   the close button sat flush against the card edges. Also give the NFC
   preview modal's phone mockup breathing room instead of being flush
   against the card, and let it scroll instead of being clipped when the
   content is taller than the modal. */
.password-modal{padding:26px}
.password-modal .close{margin:-6px -6px 0 0}
.password-modal h2{font:500 26px var(--serif);margin:10px 0 18px}
.password-modal .password-reveal{margin-bottom:14px}
.dashboard-preview-phone{padding:26px 26px 30px;box-sizing:border-box;max-height:min(70vh,640px);overflow:auto}
.muted{color:var(--muted);font-size:11px;line-height:1.7}

/* Phase 2: prevent orphan words wrapping alone onto a new line in headings
   (e.g. "thương"/"quà" left dangling by themselves) — balances line breaks
   within each naturally-wrapping text run. Falls back to normal wrapping
   in browsers that don't support text-wrap yet (no visual regression). */
h1,h2,h3{text-wrap:balance}

/* Phase 4: real product photo inside the "Biến lời yêu thương..." frame
   (previously just decorative placeholder text, no image). */
.story-frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}

/* Phase 4: hero now shows one real product photo instead of the old
   illustrated frame+phone mockup built from CSS. */
.hero-product-shot{position:relative;z-index:2;width:100%;max-width:680px;margin:0 auto 40px}
.hero-product-shot .shot-frame{position:relative;z-index:2;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px rgba(58,46,47,.18);border:1px solid rgba(255,255,255,.6)}
.hero-product-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hero-product-shot .shot-frame::after{content:'';position:absolute;inset:16px;border:1px solid rgba(255,252,247,.65);border-radius:14px;pointer-events:none;z-index:2}
@media(max-width:780px){.hero-product-shot{max-width:500px}}
/* Orbs moved from .hero-visual to be children of .hero-product-shot itself
   (still the same 2 existing .orb elements — only their parent/position
   changed) so they're pinned flush to the photo's own corners at any
   viewport width instead of drifting relative to a wider .hero-visual.
   z-index stays below .shot-frame (z-index:2) within this same stacking
   context. Only overridden at desktop widths — ≤780px keeps the original
   .orb.o1/.o2 rules below untouched. */
@media(min-width:781px){
  .hero-product-shot .orb.o1{width:150px;height:150px;top:-50px;right:-50px;left:auto;bottom:auto;z-index:0}
  .hero-product-shot .orb.o2{width:58px;height:58px;bottom:-20px;left:-20px;top:auto;right:auto;z-index:0}
}
/* Layered overlay treatment on the hero photo (badge / CTA chip / handwritten
   tagline), matching the lifestyle-mockup ad layout the client referenced —
   these sit on .hero-product-shot (no overflow:hidden) rather than on
   .shot-frame (which clips), so the tagline card can overlap the corner. */
.hero-badge{position:absolute;top:32px;left:32px;z-index:3;background:#FFFCF8;border-radius:999px;padding:9px 16px;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--rose);box-shadow:0 8px 20px rgba(58,46,47,.14)}
.hero-cta-chip{position:absolute;right:24px;bottom:24px;z-index:3;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);border-radius:999px;padding:9px 16px;font-size:11px;font-weight:600;color:var(--muted);box-shadow:0 6px 18px rgba(58,46,47,.12)}
.hero-tagline{position:absolute;right:0;bottom:-56px;z-index:3;background:#FFFCF8;border-radius:18px;padding:14px 22px;box-shadow:0 18px 38px rgba(58,46,47,.18);text-align:right;transform:rotate(-4deg);transform-origin:bottom right}
.hero-tagline b{display:block;font:600 18px var(--serif);color:var(--deep);letter-spacing:-.01em}
.hero-tagline em{display:block;font:italic 400 15px var(--serif);color:var(--rose);margin-top:2px}
@media(max-width:780px){.hero-badge{top:26px;left:26px;padding:7px 12px;font-size:9px}.hero-cta-chip{right:18px;bottom:18px;padding:8px 13px;font-size:10px}.hero-tagline{bottom:-42px;padding:11px 17px}.hero-tagline b{font-size:15px}.hero-tagline em{font-size:13px}}
@media(max-width:460px){.hero-product-shot{text-align:center;margin-bottom:20px}.hero-cta-chip,.hero-tagline{display:none}}

/* Phase 3: shorten the Shop plan cards so the image + info fit with less
   scrolling. Scoped to .shop-info specifically (not .plan-card, which is
   the separate homepage pricing section and wasn't reported as an issue). */
.shop-info h2{margin:8px 0 6px}
.shop-info ul{margin:8px 0}
.shop-info li{margin:5px 0}
.fit{padding-top:6px}
.price-row{margin-top:12px}

/* Phase 2: scroll-reveal utility — reused by the NFC landing page later.
   Elements with .reveal start faded/offset and settle into place once
   scrolled into view (see initScrollReveal() in app.js). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Phase 5: Blog — 4-col grid with real cover photos, and a redesigned
   post page (image-banner title, meta/share row, 2/3+1/3 layout with
   an image sidebar of related posts) replacing the old placeholder blocks. */
.blog-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.blog-grid{grid-template-columns:1fr}}
.blog-cover{padding:0}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post.narrow{max-width:1180px}
.back-link{display:inline-block;margin-bottom:18px}
.post-hero{position:relative;height:420px;border-radius:22px;background-size:cover;background-position:center;overflow:hidden;display:flex;align-items:flex-end}
.post-hero-scrim{width:100%;padding:36px 40px;background:linear-gradient(0deg,rgba(30,15,17,.78) 0%,rgba(30,15,17,.35) 55%,rgba(30,15,17,0) 100%);color:#fff}
.post-hero .eyebrow{color:#F6C9CD}
.post-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 16px;color:#fff}
.post-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.85)}
.post-meta-row .dot{opacity:.6}
.post-meta-row .share-btn{margin-left:auto;min-height:38px;padding:0 16px;font-size:13px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.post-meta-row .share-btn:hover{background:rgba(255,255,255,.24)}
.post-layout{display:grid;grid-template-columns:2fr 1fr;gap:48px;margin-top:36px;align-items:start}
.post-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}
.post-sidebar h3{font:600 16px var(--sans);margin:0 0 4px}
.related-post{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;transition:.2s}
.related-post:hover{border-color:var(--rose)}
.related-post img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0}
.related-post div{display:flex;flex-direction:column;gap:3px;min-width:0}
.related-post small{color:var(--rose);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.related-post span{font-size:13px;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Phase 6: Custom NFC canvas — .nfc-el children use top/left as % of their
   containing block, which used to be .device-screen itself (a fixed ~700px
   viewport). That meant elements could only ever be placed within that
   fixed band no matter how much empty .scroll-space was appended below it,
   so a design with many layers had nowhere to go but overlap. .device-canvas
   is a tall, explicitly-sized child that becomes the real positioning
   context, with .device-screen left as just the scrollable/clipping frame.
   1100px matches the divisor used for the public NFC page's web-mode
   height% (see renderNfc) and nfc-web-canvas's aspect-ratio, so the two
   stay in sync per the Preview-must-match-Custom requirement. */
.device-canvas{position:relative;height:1100px}
.device-canvas .nfc-top{top:30px}
@media(max-width:780px){.post-layout{grid-template-columns:1fr;gap:28px}.post-sidebar{position:static}.post-hero{height:300px}.post-hero-scrim{padding:24px}.post-meta-row .share-btn{margin-left:0}}

/* Phase 7: Canva-style text toolbar (bold/italic/align/color/background),
   shared between the physical editor and Custom NFC inspectors. */
.text-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.text-toolbar button{border:1px solid var(--line);background:#fff;border-radius:8px;min-width:34px;height:34px;padding:0 8px;font-size:13px;color:var(--deep);cursor:pointer;transition:.15s}
.text-toolbar button:hover{border-color:var(--rose)}
.text-toolbar button.active{background:var(--rose);border-color:var(--rose);color:#fff}
.text-toolbar #tb-bg-clear{font-size:11px;padding:0 10px;min-width:auto}
.text-toolbar .color-field{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:0 8px;height:34px;font-size:13px;color:var(--deep);cursor:pointer}
.text-toolbar .color-field input[type=color]{width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer}

/* Corner/edge resize handles. Handles sit *inside* the element's own edge
   (2px inset) rather than straddling it, because .physical/.nfc-el image
   and text variants both set overflow:hidden — a handle positioned outside
   the box (the more conventional look) would just get clipped there. */
.resize-handle{display:none;position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--rose);border-radius:3px;z-index:20}
.physical.selected .resize-handle,.nfc-el.selected .resize-handle{display:block}
.rh-nw{left:2px;top:2px;cursor:nwse-resize}
.rh-n{left:50%;top:2px;transform:translateX(-50%);cursor:ns-resize}
.rh-ne{right:2px;top:2px;cursor:nesw-resize}
.rh-e{right:2px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.rh-se{right:2px;bottom:2px;cursor:nwse-resize}
.rh-s{left:50%;bottom:2px;transform:translateX(-50%);cursor:ns-resize}
.rh-sw{left:2px;bottom:2px;cursor:nesw-resize}
.rh-w{left:2px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.tool:disabled{opacity:.4;cursor:not-allowed}
.sticker-upload{margin:14px 19px 0}

/* Phase 8: frame shapes (square, heart) and heart-pattern colors, added
   alongside the existing portrait/landscape shapes and solid colors rather
   than replacing anything. Sizes mirror the portrait width at each of the
   existing .frame-preview responsive tiers so nothing here can overflow
   wider than what those breakpoints already allow. Patterns use a small
   tiled heart SVG as a border-image (the purpose-built CSS tool for a
   repeating border, unlike border-color which is solid-only). */
.frame-preview.square{width:480px;height:480px}
.choice-frame.square{width:70px;height:70px}
.frame-preview.heart,.choice-frame.heart,.public-frame.heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 92 C 20 68 0 48 0 28 C 0 12 12 0 28 0 C 38 0 46 5 50 12 C 54 5 62 0 72 0 C 88 0 100 12 100 28 C 100 48 80 68 50 92 Z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 92 C 20 68 0 48 0 28 C 0 12 12 0 28 0 C 38 0 46 5 50 12 C 54 5 62 0 72 0 C 88 0 100 12 100 28 C 100 48 80 68 50 92 Z' fill='%23000'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;clip-path:none!important;border:0!important;width:460px;height:460px;aspect-ratio:1/1;background:linear-gradient(145deg,var(--soft,#FAD4D6),var(--blush,#FFD3D6));box-shadow:0 20px 60px rgba(58,46,47,.18)}
.choice-frame.heart{width:70px!important;height:70px!important;border-width:0!important;background:#e8d4d2!important}
.frame-preview.heart .nfc-badge{top:16%!important;right:12%!important}
@media(max-width:780px){.frame-preview.square,.frame-preview.heart{width:340px;height:340px}}
@media(max-width:460px){.frame-preview.square,.frame-preview.heart{width:300px;height:300px}}
.public-frame.square,.public-frame.heart{width:300px;height:300px}
@media(max-width:460px){.public-frame.square,.public-frame.heart{width:250px;height:250px}}
.frame-preview.white-heart-red{border-color:#fff;background:#fff;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23C0392B'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23p)'/%3E%3C/svg%3E") 20 round}
.frame-preview.white-heart-pink{border-color:#fff;background:#fff;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23E4808F'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23p)'/%3E%3C/svg%3E") 20 round}
.frame-preview.black-heart-red{border-color:#2F2527;background:#fff;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='20' fill='%232F2527'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23D9534F'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23p)'/%3E%3C/svg%3E") 20 round}
.swatch[data-color="white-heart-red"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23C0392B'/%3E%3C/svg%3E") repeat;background-size:18px 18px}
.swatch[data-color="white-heart-pink"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23E4808F'/%3E%3C/svg%3E") repeat;background-size:18px 18px}
.swatch[data-color="black-heart-red"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%232F2527'/%3E%3Cpath d='M10 16S3 11 3 6.5A3 3 0 0 1 10 4a3 3 0 0 1 7 2.5C17 11 10 16 10 16z' fill='%23D9534F'/%3E%3C/svg%3E") repeat;background-size:18px 18px}

/* Phase 9: Kho Template (new feature) — a promo strip on the Shop page
   below the product plans, plus its own library page with a theme filter
   and template cards. Layout mirrors .shop-grid/.product-details spacing
   conventions already used on this page. */
.template-promo{margin-top:50px;background:linear-gradient(135deg,#FFF3F4,#FDE8EA);border:1px solid var(--line);border-radius:22px;padding:36px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.template-promo-copy{max-width:520px}
.template-promo-copy h2{font:500 clamp(26px,3vw,36px)/1.2 var(--serif);margin:12px 0 14px}
.template-promo-copy p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:20px}
.template-promo-strip{display:flex;gap:12px;flex-shrink:0}
.template-promo-strip img{width:110px;height:140px;object-fit:cover;border-radius:14px;box-shadow:0 14px 30px rgba(58,46,47,.16);transform:rotate(-4deg)}
.template-promo-strip img:nth-child(2){transform:rotate(2deg);margin-top:14px}
.template-promo-strip img:nth-child(3){transform:rotate(-2deg)}
.template-filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 30px}
.template-filters .filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--deep);cursor:pointer;transition:.2s}
.template-filters .filter:hover{border-color:var(--rose)}
.template-filters .filter.active{background:var(--rose);border-color:var(--rose);color:#fff}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.template-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s}
.template-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(58,46,47,.12)}
.template-thumb{aspect-ratio:4/3;overflow:hidden}
.template-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.template-info{padding:18px 20px 22px}
.template-info h3{font:500 20px var(--serif);margin:8px 0 16px}
@media(max-width:780px){.template-promo{flex-direction:column;text-align:center}.template-promo-strip{justify-content:center}.template-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.template-grid{grid-template-columns:1fr}.template-promo-strip img{width:80px;height:100px}}

/* Canva-style drop-to-replace on a physical image element. */
.physical.image.drag-over{outline:3px dashed var(--rose);outline-offset:-3px}

/* PNG sticker library (public/stickers/*): the sticker element type now
   carries an optional `src`. Emoji stickers still render as a glyph sized
   by font-size; image stickers render as a contained <img> so the artwork
   keeps its aspect ratio inside whatever box the user resizes it to. */
.physical.sticker.img-sticker{line-height:0}
.physical.sticker.img-sticker img,.nfc-el.sticker img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.sticker-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:14px 19px 0}
.sticker-tabs .sticker-tab{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:11px;font-weight:700;color:var(--deep);white-space:nowrap}
.sticker-tabs .sticker-tab.active{background:var(--rose);border-color:var(--rose);color:#fff}
.sticker-grid.png{grid-template-columns:repeat(6,1fr)}
.sticker-grid.png button{min-height:78px;display:grid;place-items:center;padding:6px}
.sticker-grid.png button img{width:100%;height:64px;object-fit:contain;display:block}

/* Phase 10: NFC landing page now renders with shell(...,{plain:true}) — no
   site nav/footer/marketing, per the "trang đích chỉ hiển thị nội dung
   khách hàng đã custom" requirement — plus a closing CTA back to Framie. */
.memory-cta{text-align:center;padding:70px 20px 100px;max-width:640px;margin:0 auto}
.memory-cta h2{font:500 clamp(32px,4vw,46px)/1.15 var(--serif);margin:0 0 16px}
.memory-cta h2 em{color:var(--rose);font-style:italic}
.memory-cta p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:26px}
@media(max-width:780px){.memory-cta{padding:20px 20px 40px!important}}

/* Phase 10: "nghe câu chuyện của bạn" on the Contact page heading was never
   covered by the shared h1-em color rule (that rule lists .hero/.page-head/
   .narrow/etc, not .contact). */
.contact h1 em{color:var(--rose);font-style:italic}

/* Về Framie (About) redesign, matching the client-supplied reference layout:
   a hero card reusing the homepage's .hero-product-shot/.hero-badge/
   .hero-cta-chip/.hero-tagline components (same look, smaller), a brand
   story card, two content grids, and a closing CTA. New page, all-new
   classes — the old about-page/about-hero/about-story-block/etc rules are
   now unused by this page but left in place (not shared by anything else). */
.about-page-v2{padding:50px 5vw 0}
.about-hero-v2{position:relative;background:linear-gradient(135deg,#FDF3F4,#FBE7E9);border-radius:36px;overflow:hidden;max-width:1300px;margin:0 auto 90px;box-shadow:0 20px 50px rgba(58,46,47,.06)}
.about-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:460px}
.about-hero-shot.hero-product-shot{width:100%;max-width:none;height:100%;margin:0}
.about-hero-shot .shot-frame{height:100%;border-radius:36px 0 0 36px;box-shadow:none;border:0;padding:38px;background:var(--soft)}
.about-hero-shot .shot-frame img{border-radius:18px}
.about-hero-shot .shot-frame::after{display:none}
.about-hero-copy{background:#fff;text-align:center;padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.about-hero-copy h1{font:500 clamp(36px,4vw,54px)/1.15 var(--serif);color:var(--deep);letter-spacing:.05em;margin:0}
.about-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0;color:var(--rose)}
.about-divider::before,.about-divider::after{content:'';width:56px;height:1px;background:var(--line)}
.about-divider i{font-style:normal;font-size:14px}
.about-hero-copy h2{font:italic 700 clamp(20px,2.2vw,27px)/1.6 var(--serif);color:var(--rose);margin:0}
.about-hero-copy h2 em{font-style:italic}
.about-hero-shot img.about-floral{position:absolute;top:8px;right:8px;width:88px;height:auto;object-fit:contain;z-index:4;pointer-events:none;filter:drop-shadow(0 3px 8px rgba(58,46,47,.3))}
.eyebrow-hearts{display:block;text-align:center;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--rose);opacity:.85;margin-bottom:22px}
.script-heading{text-align:center;font-style:italic;font:italic 500 clamp(30px,4vw,46px)/1.2 var(--serif);color:var(--rose);margin:0 0 40px}
.about-story-v2{max-width:1100px;margin:0 auto 90px;padding:0 5vw}
.story-card-v2{background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px 48px;box-shadow:0 20px 50px rgba(58,46,47,.06)}
.story-card-v2 p{color:var(--muted);font-size:15px;line-height:1.9;margin-bottom:20px}
.story-card-v2 .brand-accent{color:var(--rose)}
.story-card-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.story-card-footer p{margin:0;color:var(--deep);font-size:15px}
.about-why-v2,.about-values-v2{max-width:1100px;margin:0 auto 130px;padding:0 5vw}
.about-why-v2::before,.about-values-v2::before,.about-cta-v2::before{content:'';display:block;width:min(620px,70%);margin:0 auto 60px;border-top:1px solid rgba(209,136,141,.22)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.why-grid article{background:#FFFCFA;background-clip:padding-box;border:16px solid rgba(255,211,214,.4);border-radius:34px;padding:40px 42px 44px;box-shadow:0 18px 44px rgba(214,150,140,.08)}
.why-grid b{font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--rose)}
.why-grid h3{font:500 29px/1.32 var(--serif);color:var(--deep);margin:18px 0 18px}
.why-grid h3 em{color:var(--rose);font-style:italic}
.why-grid small{display:block;color:var(--rose);font-size:11px;font-weight:600;letter-spacing:.08em;margin-bottom:16px}
.why-grid p{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
.values-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.values-grid-v2 article{background:#FFFCFA;background-clip:padding-box;border:12px solid rgba(255,211,214,.4);border-radius:28px;padding:32px 30px 34px;box-shadow:0 14px 36px rgba(214,150,140,.07)}
.values-grid-v2 b{font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--rose)}
.values-grid-v2 h3{font:500 21px var(--serif);color:var(--deep);margin:16px 0 12px}
.values-grid-v2 p{color:var(--muted);font-size:13px;line-height:1.75;margin:0}
.about-cta-v2{text-align:center;max-width:700px;margin:0 auto 120px;padding:0 5vw}
.about-cta-v2 h2{font:500 clamp(32px,4.5vw,52px)/1.16 var(--serif);color:var(--deep);margin:0 0 38px}
.about-cta-v2 h2 em{color:var(--rose);font-style:italic}
.about-cta-v2 .btn.primary{min-height:44px;padding:0 26px;border-radius:999px;font-size:13px;box-shadow:none}
@media(max-width:900px){
  .about-hero-v2{text-align:center;background:#fff}
  .about-hero-grid{grid-template-columns:1fr;min-height:auto}
  .about-hero-shot .shot-frame{border-radius:36px 36px 0 0;aspect-ratio:4/3;height:auto;padding:0}
  .about-hero-copy{padding:32px 28px 40px}
  .why-grid,.values-grid-v2{grid-template-columns:1fr}
  .why-grid article{border-width:10px;padding:28px 26px 30px;border-radius:26px}
  .values-grid-v2 article{border-width:8px;padding:24px 22px 26px;border-radius:22px}
  .about-why-v2,.about-values-v2,.about-cta-v2{margin-bottom:90px}
  .about-why-v2::before,.about-values-v2::before,.about-cta-v2::before{width:80%;margin-bottom:40px}
  .story-card-v2{padding:30px 26px}
  .story-card-footer{flex-direction:column;align-items:flex-start}
  .about-hero-v2 .about-hero-tagline.hero-tagline{position:static;display:inline-block;margin:0 auto 24px;transform:none;text-align:center}
  .about-hero-shot img.about-floral{width:64px;top:8px;right:8px}
}

/* ===== Desktop Setup fit at 100% zoom ===== */
@media (min-width: 781px) {
  .setup-head {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 24px !important;
  }
  .setup-head h1 {
    font-size: 22px !important;
    margin: 0 !important;
  }
  .setup-body {
    padding: 16px 24px 60px !important;
    min-height: auto !important;
  }
  .phone-center {
    min-height: auto !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .nfc-tools, .editor-tools {
    position: sticky;
    top: 148px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .inspector {
    position: sticky;
    top: 148px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  .nfc-layout .phone-center .device-phone,
  .editor-area .device-phone {
    transform-origin: top center;
    transition: transform 0.15s ease, margin-bottom 0.15s ease;
  }

  @media (max-height: 1050px) {
    .nfc-layout .phone-center .device-phone,
    .editor-area .device-phone {
      transform: scale(0.85);
      margin-bottom: -110px;
    }
  }
  @media (max-height: 900px) {
    .nfc-layout .phone-center .device-phone,
    .editor-area .device-phone {
      transform: scale(0.78);
      margin-bottom: -160px;
    }
  }
  @media (max-height: 800px) {
    .nfc-layout .phone-center .device-phone,
    .editor-area .device-phone {
      transform: scale(0.72);
      margin-bottom: -205px;
    }
  }
  @media (max-height: 720px) {
    .nfc-layout .phone-center .device-phone,
    .editor-area .device-phone {
      transform: scale(0.65);
      margin-bottom: -255px;
    }
  }
}