:root { --paper:#f6f1e8; --panel:#fffdf8; --ink:#2d211f; --wine:#71303b; --muted:#7b6e68; --line:rgba(66,44,38,.15); --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.demo-header { display:flex; height:70px; align-items:center; justify-content:space-between; padding:0 19px; border-bottom:1px solid var(--line); }
.demo-brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.035em; }
.demo-brand span { display:grid; width:37px; height:37px; place-items:center; border:1px solid rgba(113,48,59,.3); border-radius:50%; color:var(--wine); font-family:var(--serif); font-size:23px; font-weight:600; }
.back-link { color:var(--wine); font-size:12px; font-weight:700; }
.mobile-back { display:block; margin-bottom:23px; }
.demo-main { max-width:1110px; padding:28px 18px 56px; margin:auto; }
.demo-layout { display:grid; gap:30px; }
.demo-preview-panel { position:relative; display:grid; min-height:510px; padding:20px; overflow:hidden; place-items:center; border:1px solid var(--line); border-radius:25px; background:linear-gradient(145deg,#eadbd8,#f8f2e8 55%,#e9ded0); }
.demo-preview-panel::before { position:absolute; width:380px; height:380px; content:""; border:1px solid rgba(113,48,59,.16); border-radius:50%; }
.demo-preview-panel > p { position:absolute; top:18px; left:20px; margin:0; color:var(--wine); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.demo-phone { position:relative; z-index:1; width:min(62vw,260px); aspect-ratio:9/16; padding:3px; overflow:hidden; border:3px solid #292321; border-radius:38px; background:#fff; box-shadow:0 28px 60px rgba(63,42,35,.22); }
.demo-phone::before { position:absolute; z-index:2; top:9px; left:50%; width:60px; height:14px; content:""; border-radius:99px; background:#292321; transform:translateX(-50%); }
.demo-phone img { display:block; width:100%; height:100%; object-fit:cover; border-radius:32px; }
.swipe-note { position:absolute; z-index:2; right:17px; bottom:17px; max-width:150px; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; }
.demo-content { padding:2px 2px 0; }
.demo-eyebrow { margin:0 0 9px; color:var(--wine); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.035em; }
h1 { font-size:clamp(52px,15vw,80px); line-height:.82; }
.demo-description { max-width:460px; margin:19px 0 23px; color:var(--muted); font-size:14px; line-height:1.72; }
.price-line { display:flex; max-width:460px; align-items:center; justify-content:space-between; padding:17px 0; border-block:1px solid var(--line); }
.price-line span { color:var(--muted); font-size:12px; }
.price-line strong { color:var(--wine); font-size:18px; }
.music-card { display:grid; gap:19px; padding:23px 0 25px; border-bottom:1px solid var(--line); }
.music-card h2 { font-size:31px; line-height:.95; }
.music-card p:not(.demo-eyebrow) { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
label { display:block; margin-bottom:8px; color:var(--wine); font-size:11px; font-weight:700; }
.music-input-row { display:grid; gap:9px; }
input { width:100%; height:48px; padding:0 13px; color:var(--ink); border:1px solid var(--line); border-radius:12px; outline:none; background:var(--panel); font:inherit; font-size:13px; }
input:focus { border-color:var(--wine); box-shadow:0 0 0 3px rgba(113,48,59,.1); }
button { min-height:48px; padding:0 15px; color:#fff; border:0; border-radius:12px; background:var(--wine); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.form-message { min-height:18px; margin:8px 0 0; color:var(--wine); font-size:11px; }
.form-message.is-error { padding:9px 11px; border:1px solid #b42318; border-radius:9px; color:#8b1e16; background:#fff1f0; font-weight:600; }
.form-message.is-success { padding:9px 11px; border:1px solid #217a45; border-radius:9px; color:#176438; background:#edfff3; font-weight:600; }
.music-help { margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.music-preview { display:grid; gap:9px; }
.music-preview #tiktok-player { width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:15px; background:#2d211f; }
.music-preview #tiktok-player iframe { width:100%; height:100%; border:0; }
.music-preview button { justify-self:start; min-height:auto; padding:0; color:var(--wine); background:transparent; font-size:11px; }
.demo-features { display:grid; gap:10px; padding:23px 0; margin:0; list-style:none; }
.demo-features li { position:relative; padding-left:25px; color:var(--muted); font-size:12px; line-height:1.45; }
.demo-features li::before { position:absolute; left:0; color:var(--wine); content:"✓"; font-weight:700; }
.open-demo { display:flex; min-height:55px; align-items:center; justify-content:space-between; padding:0 18px; color:#fff; border-radius:14px; background:var(--wine); font-size:13px; font-weight:700; }
.open-demo.is-disabled { opacity:.48; cursor:not-allowed; pointer-events:none; }
.open-demo span { font-size:18px; }
@media (min-width:760px) { .demo-header { height:78px; padding-inline:max(32px,calc((100vw - 1110px)/2)); } .demo-main { padding-top:48px; } .mobile-back { display:none; } .demo-layout { grid-template-columns:minmax(390px,1fr) minmax(390px,.9fr); align-items:start; gap:68px; } .demo-preview-panel { position:sticky; top:100px; min-height:690px; } .demo-phone { width:min(26vw,330px); } .demo-content { padding-top:42px; } .music-input-row { grid-template-columns:1fr auto; } }