@font-face{font-family:'Young Serif';src:url('/fonts/YoungSerif-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter_400Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter_600SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/Caveat-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
body{margin:0;background:#1A1512}
.page{--coral:#E2725B;--night:#1A1512;--night2:#241C17;--ink:#2B2118;--cream:#FFF8F1;--paper:#FFFBF6;--muted:#6E5F53;--soft:#B8A898;--wood:#5B3A26;--rule:#EADFD3;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;caret-color:var(--coral)}
.page ::selection{background:var(--coral);color:var(--ink)}
.page a{color:inherit;text-underline-offset:4px}
.page a:focus-visible,.page button:focus-visible,.page input:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:12px}
.serif{font-family:'Young Serif',Georgia,serif;font-weight:400}
.hand{font-family:'Caveat',cursive}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 'Inter',sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s}
.page .btn-coral{background:var(--coral);color:var(--ink);box-shadow:0 6px 16px rgba(10,6,4,.35)}
.page .btn-coral:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,6,4,.45)}
.page .btn-coral:active{transform:translateY(0) scale(.98)}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
footer a:hover{color:#F3EBE2}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:500;text-decoration:none}
.textlink svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.textlink:hover svg{transform:translateY(3px)}
.navlinks a{text-decoration:none;opacity:.78;transition:opacity .2s;padding:13px 4px}
.navlinks a:hover{opacity:1}

/* ---------- hero stage ---------- */
.stage{position:relative;width:600px;height:520px;flex:none}
.shelf{position:absolute;left:0;right:0;top:430px;height:16px;border-radius:4px;background:linear-gradient(#5B4332 0 3px,#3A2A20 3px);box-shadow:0 22px 40px rgba(0,0,0,.45)}
.frame{position:absolute;left:160px;top:100px;width:400px;height:312px;box-sizing:border-box;padding:18px;border-radius:14px;background:linear-gradient(160deg,#6B452D,#4A2F1F);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);animation:frameglow 4s cubic-bezier(.16,1,.3,1) -2s infinite}
.screen{position:relative;width:100%;height:100%;border-radius:5px;overflow:hidden;background:#2B2118}
.slide{position:absolute;inset:0;opacity:0;animation:slide 12s linear infinite}
.slide.s0{opacity:1;animation-delay:-2s}
.slide.s1{animation-delay:2s}
.slide.s2{animation-delay:6s}
.slide svg{display:block;width:100%;height:100%}
.cap{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 10px;color:#FFF8F1;background:linear-gradient(to bottom,rgba(26,21,18,0),rgba(26,21,18,.72));text-shadow:0 1px 2px rgba(0,0,0,.35)}
.page p{text-wrap:pretty}
.cap .hand{font-size:26px;line-height:1}
.cap small{display:block;font-size:11px;opacity:.9;margin-top:2px;letter-spacing:.01em}
.mic{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;color:#2B2118}
.mic::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--coral);animation:ring 2.4s cubic-bezier(.16,1,.3,1) infinite}
/* the app icon's two candles (assets/warmwick-src/icon.html), drawn from its own shapes and colours */
.duo{display:block;overflow:visible}
.duo .fl{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.9s ease-in-out infinite}
.duo .fl2{animation-duration:2.3s;animation-delay:-.8s}
.duo .glow{animation:glowpulse 2.6s ease-in-out infinite}
.duo .small{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:scale(.2);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.duo.joined .small{opacity:1;transform:none}
.heroduo{position:absolute;left:14px;top:238px}
.arc{position:absolute;inset:0;overflow:visible}
.arc path{stroke-dasharray:2 9;animation:march 1.6s linear infinite}
.origin{position:absolute;left:0;top:18px;display:flex;align-items:center;gap:8px;font-size:13px;color:#E0D4C7}
.origin i{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(226,114,91,.18)}
.flyer{position:absolute;left:0;top:0;width:58px;height:46px;box-sizing:border-box;padding:4px;border-radius:4px;background:#FFF8F1;box-shadow:0 10px 24px rgba(0,0,0,.4);offset-path:path('M30 40 C160 -20 340 30 360 256');offset-rotate:0deg;offset-anchor:50% 50%;opacity:0;animation:fly 4s cubic-bezier(.45,0,.2,1) -2s infinite}
.flyer span{display:block;width:100%;height:100%;border-radius:2px;background:linear-gradient(160deg,#F2A65A,#E2725B 60%,#6D9886)}

@keyframes fly{0%{offset-distance:0%;opacity:0;transform:scale(.8) rotate(-14deg)}5%{opacity:1}27%{offset-distance:100%;opacity:1;transform:scale(.45) rotate(0deg)}31%{offset-distance:100%;opacity:0;transform:scale(.3)}100%{offset-distance:100%;opacity:0}}
@keyframes slide{0%{opacity:0;transform:scale(1.06);filter:blur(6px)}9%{opacity:0;transform:scale(1.06);filter:blur(6px)}13%{opacity:1;transform:scale(1);filter:blur(0)}38%{opacity:1;transform:scale(1.015);filter:blur(0)}44%{opacity:0;transform:scale(1.02)}100%{opacity:0}}
@keyframes frameglow{0%,24%{box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}32%{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 90px 10px rgba(242,166,90,.38),inset 0 1px 0 rgba(255,255,255,.12)}70%,100%{box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}}
@keyframes glowpulse{0%,100%{opacity:.16}50%{opacity:.3}}
@keyframes flicker{0%,100%{transform:scaleY(1) skewX(0deg)}20%{transform:scaleY(1.08) skewX(-3deg)}45%{transform:scaleY(.94) skewX(2deg)}70%{transform:scaleY(1.04) skewX(-1deg)}}
@keyframes march{to{stroke-dashoffset:-22}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes bar{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
@keyframes play{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes sunrise{0%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ---------- day timeline ---------- */
.moment{padding:72px 0}
.moment-row{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:center}
.when{flex:0 0 200px}
.when .time{font-size:68px;line-height:1;letter-spacing:-.02em}
.when .part{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;font-weight:500}
.what{flex:1 1 300px;min-width:0}
.what h3{font-size:34px;line-height:1.1;margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.what p{font-size:17px;line-height:1.6;margin:0;max-width:44ch}
.scene{flex:1 1 380px;min-width:0;display:flex;justify-content:center}
.vign{position:relative;width:100%;max-width:420px}
.mini{box-sizing:border-box;padding:12px;border-radius:12px;background:linear-gradient(160deg,#6B452D,#4A2F1F);box-shadow:0 22px 44px rgba(43,33,24,.28)}
.mini .scr{position:relative;border-radius:4px;overflow:hidden;background:#2B2118;aspect-ratio:4/3}
.mini .scr svg{display:block;width:100%;height:100%}
.notif{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:#FFFFFF;color:#2B2118;box-shadow:0 14px 34px rgba(43,33,24,.18),0 2px 6px rgba(43,33,24,.08);min-width:230px}
.notif b{display:block;font-size:14px;font-weight:600}
.notif span{display:block;font-size:13px;color:#6E5F53;margin-top:2px}
.appicon{width:36px;height:36px;border-radius:10px;background:var(--coral);display:flex;align-items:center;justify-content:center;flex:none;color:#2B2118}
.fscreen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center;color:#F3EBE2}
.fscreen h4{margin:0;font-size:26px;line-height:1.15}
.fscreen .sub{font-size:13px;color:#B8A898}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;font:600 15px/1 'Inter',sans-serif}
.fill{background:var(--coral);color:#2B2118;border:0}
.ghost{background:transparent;color:#F3EBE2;border:1.5px solid rgba(243,235,226,.45)}
.round{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(226,114,91,.16);color:var(--coral)}
.okbtn{position:relative;width:78%;min-height:52px;font-size:17px}
.okbtn::after{content:'';position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--coral);animation:ring 2.2s cubic-bezier(.16,1,.3,1) infinite}
.chat{background:#FFFFFF;border-radius:24px;padding:20px;box-shadow:0 22px 50px rgba(43,33,24,.16)}
.who{display:flex;align-items:center;gap:12px}
.ava{width:40px;height:40px;border-radius:50%;background:#B5838D;color:#2B2118;display:flex;align-items:center;justify-content:center;font-weight:600}
.voice{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 16px 12px 12px;border-radius:999px;background:#FFF3EA}
.play{width:40px;height:40px;border-radius:50%;background:var(--coral);color:#2B2118;display:flex;align-items:center;justify-content:center;flex:none;border:0}
.wave{display:flex;align-items:center;gap:3px;height:34px;flex:1;min-width:0;overflow:hidden}
.wave .bar{width:3px;border-radius:2px;background:#C45A44;flex:none;animation:bar 1.4s ease-in-out infinite}
.translated{margin-top:16px;padding-top:14px;border-top:1px solid #F0E6DB;font-size:15px;line-height:1.55;color:#2B2118}
.translated small{display:flex;align-items:center;gap:6px;font-size:12px;color:#6E5F53;margin-bottom:6px;font-weight:500}

/* ---------- gran ---------- */
.gran-row{display:flex;flex-wrap:wrap;gap:56px 72px;align-items:center}
.bigframe{flex:1 1 480px;min-width:0;max-width:560px}
.bigframe .mini{padding:20px;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.55)}
.hold{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 8px;border-radius:999px;background:var(--coral);color:#2B2118;font-weight:600;font-size:16px}
.hold i{width:38px;height:38px;border-radius:50%;background:rgba(43,33,24,.12);display:flex;align-items:center;justify-content:center}
.hold::before{content:'';position:absolute;inset:-7px;border-radius:999px;border:2px solid var(--coral);animation:ring 2.6s cubic-bezier(.16,1,.3,1) infinite}
.easy{flex:1 1 360px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.easy li{display:flex;gap:18px;align-items:flex-start}
.easy .ic{width:44px;height:44px;border-radius:12px;background:rgba(226,114,91,.14);color:var(--coral);display:flex;align-items:center;justify-content:center;flex:none}
.easy b{display:block;font-size:19px;font-weight:600;color:#F3EBE2}
.easy span{display:block;font-size:16px;line-height:1.55;color:#C9BBAE;margin-top:4px;max-width:40ch}

/* ---------- keepsakes ---------- */
.band{position:relative;height:150px;margin:56px 0 0}
.bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;overflow:hidden}
.bars .bar{width:6px;border-radius:3px;flex:none;background:#D9CCC0;animation:bar 2.2s ease-in-out infinite}
.bars.lit{animation:play 16s linear infinite}
.bars.lit .bar{background:var(--coral)}
.nowplaying{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 10px 10px;border-radius:999px;background:#FFFFFF;box-shadow:0 10px 30px rgba(43,33,24,.1)}
.nowplaying b{font-weight:600;font-size:15px}
.nowplaying span{font-size:14px;color:#6E5F53}
.ask-row{display:flex;flex-wrap:wrap;gap:48px 72px;margin-top:88px;align-items:flex-start}
.ask{flex:1 1 360px;min-width:0}
.qs{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:16px;background:#FFFFFF;border:1px solid var(--rule);font-size:16px}
.q.next{border-color:transparent;background:#7A3B2E;color:#FFF8F1}
.q.next small{color:#F3D3C8}
.q small{font-size:13px;color:#6E5F53;white-space:nowrap}
.story{flex:1 1 400px;min-width:0;padding:32px;border-radius:24px;background:#2B2118;color:#F3EBE2;box-shadow:0 30px 60px rgba(43,33,24,.22)}
.story .qline{font-size:24px;line-height:1.25;margin:0 0 20px}
.story .wave .bar{background:var(--coral)}
.story .voice{background:rgba(243,235,226,.08)}
.story blockquote{margin:22px 0 0;font-size:16px;line-height:1.65;color:#E0D4C7}

/* ---------- privacy ---------- */
.privacy-row{display:flex;flex-wrap:wrap;gap:56px 80px;align-items:center;margin-top:56px}
.trust{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:28px}
.trust > div{padding-top:20px;border-top:1.5px solid #2B2118}
.circlebox{flex:0 1 420px;min-width:0;display:flex;justify-content:center}
.circle{position:relative;width:400px;height:400px;flex:none}
.circle .fillc{position:absolute;inset:40px;border-radius:50%;background:radial-gradient(closest-side,#FFE9D9,#FFF8F1)}
.circle .ring{position:absolute;inset:40px;border-radius:50%;border:2px dashed #C45A44;animation:spin 80s linear infinite}
.circle .core{position:absolute;left:140px;top:146px;width:120px;height:92px;box-sizing:border-box;padding:8px;border-radius:10px;background:linear-gradient(160deg,#6B452D,#4A2F1F);box-shadow:0 14px 30px rgba(43,33,24,.28)}
.circle .core span{display:block;width:100%;height:100%;border-radius:3px;background:linear-gradient(170deg,#F7D3B4 0 55%,#6D9886 55% 72%,#5F8FA0 72%)}
.circle .corelabel{position:absolute;left:0;right:0;top:250px;text-align:center;font-size:14px;font-weight:600}
.circle .av{position:absolute;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2B2118;font-weight:600;font-size:16px;box-shadow:0 0 0 5px #FFF8F1}
.circle .out{position:absolute;font-size:14px;color:#6E5F53;text-decoration:line-through;text-decoration-color:#C45A44;text-decoration-thickness:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.trust b{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600}
.trust p{font-size:16px;line-height:1.6;color:#6E5F53;margin:10px 0 0;max-width:36ch}

/* ---------- waitlist ---------- */
.waitduo{display:flex;justify-content:center;margin:0 auto 32px}
.form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.field{display:flex;flex-direction:column;gap:8px;text-align:left;flex:1 1 300px;max-width:380px}
.field label{font-size:14px;font-weight:500;color:#E0D4C7}
.field input{min-height:52px;box-sizing:border-box;padding:0 18px;border-radius:14px;border:1.5px solid #4A3F36;background:#26201B;color:#F3EBE2;font:400 16px 'Inter',sans-serif;transition:border-color .2s}
.field input::placeholder{color:#A09284}
.field input:hover{border-color:#6A5B4F}
.field input:focus{border-color:var(--coral);outline:none}
.form .btn{align-self:flex-end}
.err{color:#FFB4A3;font-size:14px;margin-top:12px}
.done{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:16px 24px;border-radius:16px;background:rgba(226,114,91,.14);color:#F3EBE2;font-size:17px;animation:sunrise .6s cubic-bezier(.16,1,.3,1) both}

@media (prefers-reduced-motion:reduce){.page *,.page *::before,.page *::after{animation:none!important}.bars.lit{clip-path:inset(0 60% 0 0)}}
@media (max-width:900px){.navlinks{display:none!important}}
@media (max-width:700px){.wrap{padding:0 20px}.stage{zoom:.56}.moment{padding:56px 0}.when .time{font-size:52px}.what h3{font-size:28px}.notif{min-width:0;max-width:86%}.band{height:110px}.circle{zoom:.8}}
[hidden]{display:none!important}
.btn:disabled{opacity:.65;cursor:progress;transform:none}

/* ---------- plain pages (privacy, terms, delete account, 404) ---------- */
.plain{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.plain .top{background:#1A1512;color:#F3EBE2}
.plain .top nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.plain main{flex:1;padding:72px 0 96px}
.doc{max-width:720px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.doc h1{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
.doc .lede{font-size:18px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.doc h2{font-size:21px;font-weight:600;margin:48px 0 10px;letter-spacing:-.005em}
.doc p,.doc li{font-size:17px;line-height:1.7;color:#3D3129}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:6px}
.doc a{color:#A9442F;text-decoration:underline;text-decoration-thickness:1px}
.doc a:hover{color:#7A3B2E}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);line-height:1.55;color:#3D3129}
.doc th{font-weight:600;color:var(--ink)}
.doc .tablewrap{overflow-x:auto}
.doc .steps{counter-reset:s;list-style:none;padding:0}
.doc .steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:14px}
.doc .steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:#7A3B2E;color:#FFF8F1;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}
.doc .updated{font-size:14px;color:var(--muted);margin-top:56px;padding-top:20px;border-top:1px solid var(--rule)}
@media (max-width:700px){.doc{padding:0 20px}.plain main{padding:48px 0 72px}}
.doc p,.doc .lede,.doc li{text-wrap:wrap}