:root{--bg:#FBF4EB;--surface:#FFFBF6;--panel:#F6E9DC;--ink:#3A2118;--ink2:#6E5A4E;--primary:#C4622D;--gold:#D4A24C;--line:#E8DACB;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif}
@media (prefers-color-scheme:dark){:root{--bg:#1C1917;--surface:#26211E;--panel:#2A2320;--ink:#F0E9E0;--ink2:#B3A79D;--primary:#E07B45;--gold:#E5B968;--line:#3A332E}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--primary)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px;margin:0 auto}
header.site{display:flex;align-items:center;justify-content:space-between;padding:28px 0 8px}
a.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
a.brand span{font:500 38px/1 var(--serif);letter-spacing:.2px}
svg.logo{width:40px;height:40px;color:var(--primary)}
a.cta,a.btn{display:inline-block;background:var(--primary);color:#FFFBF5;text-decoration:none;font-weight:600;border-radius:999px;padding:14px 26px;font-size:17px}
a.cta{padding:12px 24px;font-size:16px;white-space:nowrap}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.2}
.narrow h1{font-size:36px;margin:36px 0 6px}
.narrow h2{font-size:23px;margin:34px 0 8px}
.muted{color:var(--ink2);font-size:15px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:20px 0}
ul{padding-left:22px}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding:36px 0 28px}
.hero h1{font-size:clamp(44px,7vw,72px);line-height:1.08;margin:0 0 18px;font-weight:500}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .stroke{display:block;width:120px;height:6px;margin:0 0 30px}
.hero p.lead{font-size:20px;line-height:1.8;color:var(--ink);margin:0 0 26px;max-width:420px}
.ask{display:flex;align-items:center;gap:10px;font:600 21px var(--serif);color:var(--ink)}
.ask svg{width:26px;height:26px;color:var(--primary)}
/* collage */
.collage{position:relative;height:520px}
.note{position:absolute;right:-14px;top:36px;width:74%;height:400px;background:var(--surface);border:1px solid var(--line);border-radius:6px;transform:rotate(3deg);box-shadow:0 10px 30px rgba(90,50,20,.10);
background-image:repeating-linear-gradient(transparent,transparent 33px,var(--line) 34px);padding:44px 18px 0 50%}
.note p{margin:0;font:italic 500 20px/1.55 "Kohinoor Devanagari","Noto Sans Devanagari","Devanagari Sangam MN","Bradley Hand",cursive;color:var(--ink2);transform:rotate(-6deg)}
.note svg{position:absolute;right:44px;top:214px;width:26px;height:26px;color:var(--primary);opacity:.7}
.polaroid{position:absolute;left:4%;top:0;width:56%;background:#fff;padding:12px 12px 34px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 14px 34px rgba(90,50,20,.22)}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:sepia(.55) saturate(.9)}
.tape{position:absolute;left:50%;top:-16px;width:34%;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,215,185,.85)}
.player{position:absolute;left:6%;bottom:6px;width:78%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 20px;display:flex;align-items:center;gap:16px;transform:rotate(-3deg);box-shadow:0 12px 30px rgba(90,50,20,.16)}
.play{flex:none;width:52px;height:52px;border-radius:50%;background:var(--primary);display:grid;place-items:center}
.play svg{width:20px;height:20px;color:#FFFBF5;margin-left:3px}
.player .wave{flex:1;height:38px;color:var(--primary)}
/* steps */
.section-title{text-align:center;font-size:clamp(26px,4vw,34px);margin:46px 0 8px}
.divider{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto 34px;color:var(--primary)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider svg{width:20px;height:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.step{text-align:center;padding:0 22px}
.step+.step{border-left:1px solid var(--line)}
.step .ico{width:84px;height:84px;border-radius:50%;background:var(--panel);display:grid;place-items:center;margin:0 auto 14px;color:var(--primary)}
.step .ico svg{width:38px;height:38px}
.step h3{font-size:24px;margin:0 0 8px}
.step p{margin:0;color:var(--ink2);font-size:16px;line-height:1.7}
/* download */
.signup{margin:52px 0 0;background:var(--panel);border-radius:22px;padding:34px 24px;text-align:center}
.signup h2{font-size:clamp(24px,4vw,30px);margin:0 0 18px}
.signup .note-line{margin:16px 0 0;color:var(--ink2);font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
.signup .note-line svg{width:18px;height:18px}
footer.site{margin:44px 0 40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink2);font-size:15px}
footer.site .fbrand{display:flex;align-items:center;gap:12px}
footer.site .fbrand .tile{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
footer.site .fbrand svg.logo{width:28px;height:28px}
footer.site .fbrand b{display:block;font:500 22px var(--serif);color:var(--ink)}
footer.site .fright{text-align:right}
footer.site .fright .soon{color:var(--primary);display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:17px}
footer.site .links a{color:var(--ink2);margin-right:14px}
footer.site .fright .soon svg{width:22px;height:22px;flex:none}
footer.site .fright .links a{margin:0 0 0 14px}
@media (max-width:820px){
.hero{grid-template-columns:1fr;padding-top:16px}
.hero p.lead{max-width:none}
.collage{height:500px;max-width:460px;margin:0 auto;width:100%}
.steps{grid-template-columns:1fr;gap:26px}
.step+.step{border-left:0;border-top:1px solid var(--line);padding-top:26px}
footer.site .fright{text-align:left}
footer.site .fright .soon,.footer .fright .links{justify-content:flex-start}
a.brand span{font-size:30px}
}
@media (max-width:520px){
header.site{gap:10px}
a.brand{gap:8px}
a.brand span{font-size:26px}
svg.logo{width:30px;height:30px}
a.cta{padding:10px 16px;font-size:14px}
.note{width:84%;right:-10px;padding:40px 14px 0 42%}
.note p{font-size:15px}
.note svg{top:196px;right:30px}
.collage{height:470px}
}
.signup .sub{margin:-8px 0 20px;color:var(--ink2);font-size:17px}
footer.site .fright a.soon{text-decoration:none}
footer.site .fright a.soon:hover span{text-decoration:underline}
/* Apple badge: min 40px tall on screen, clear space ≥ ¼ of its height. */
a.store-badge{display:inline-block;margin:10px 0 22px;line-height:0}
a.store-badge img{height:60px;width:auto}
.signup a.store-badge{margin:0}
@media (max-width:600px){a.store-badge img{height:52px}}