@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@500;600;700;800&display=swap');

:root { --navy:#1a1a2e; --ink:#202137; --mint:#4ecdc4; --mint-deep:#168c85; --paper:#f8fffe; --muted:#65677a; --line:rgba(26,26,46,.14); --amber:#e08a14; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',system-ui,sans-serif; }
a { color:inherit; }
.site-shell { overflow:hidden; }
.nav, .section, .footer-inner, .legal { width:min(1160px,calc(100% - 48px)); margin:auto; }
.nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:white; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:800 22px/1 'Nunito',sans-serif; letter-spacing:-.04em; }
.brand img { width:35px; height:35px; border-radius:10px; }
.nav-links { display:flex; gap:25px; align-items:center; font-size:14px; color:#d7d9e5; }
.nav-links a { text-decoration:none; }
.nav-links a:hover { color:white; }
.hero { color:white; background:var(--navy); min-height:700px; position:relative; }
.hero:after { content:''; position:absolute; height:116px; background:var(--paper); border-radius:42px 42px 0 0; left:-5%; right:-5%; bottom:-1px; }
.hero-grid { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:86px 0 175px; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:50px; }
.eyebrow { margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mint); }
h1,h2,h3 { font-family:'Nunito',sans-serif; letter-spacing:-.055em; }
h1 { font-size:clamp(3.35rem,7.3vw,6.8rem); line-height:.89; margin:0; max-width:720px; }
.hero-copy { margin:27px 0 32px; max-width:525px; color:#d8dae4; font-size:18px; line-height:1.55; }
.download-links { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.store-badge { margin:0; min-width:190px; display:flex; align-items:center; gap:13px; padding:11px 15px; color:#fff; border:1px solid rgba(255,255,255,.42); border-radius:12px; background:rgba(255,255,255,.06); box-shadow:0 10px 22px rgba(0,0,0,.12); }
.store-badge small,.store-badge strong { display:block; }
.store-badge small { color:#d9dbe6; font-size:9px; font-weight:600; letter-spacing:.04em; line-height:1.15; text-transform:uppercase; }
.store-badge strong { margin-top:3px; font-size:18px; line-height:1; letter-spacing:-.04em; }
.store-icon-frame { width:35px; height:38px; flex:0 0 35px; position:relative; overflow:hidden; display:block; }
.store-icon { display:block; position:absolute; }
.apple-icon { width:35px; height:35px; top:2px; left:0; filter:brightness(0) invert(1); }
.play-icon { width:168px; height:168px; top:-65px; left:0; }
.hero-art { position:relative; z-index:1; }
.hero-art img { display:block; width:100%; min-height:380px; object-fit:cover; object-position:72% center; border-radius:26px; box-shadow:0 26px 62px rgba(0,0,0,.26); }
.hero-art figcaption { font-size:12px; color:#aeb1c5; margin-top:12px; text-align:right; }
.intro { padding:24px 0 125px; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; }
.intro h2 { margin:0; max-width:640px; font-size:clamp(2.5rem,5vw,4.5rem); line-height:.96; }
.intro p { color:var(--muted); line-height:1.65; font-size:17px; max-width:440px; margin:12px 0 0; }
.feature-area { background:white; padding:112px 0; }
.section-label { color:var(--mint-deep); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:12px; }
.feature-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:42px; }
.feature-heading h2 { font-size:clamp(2.4rem,4.5vw,4rem); margin:12px 0 0; line-height:.95; }
.feature-heading p { max-width:370px; color:var(--muted); line-height:1.55; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.feature { padding:30px 30px 24px 0; min-height:230px; }
.feature + .feature { border-left:1px solid var(--line); padding-left:30px; }
.feature-number { color:var(--mint-deep); font:600 13px/1 'DM Sans',sans-serif; }
.feature h3 { font-size:24px; margin:42px 0 10px; }
.feature p { color:var(--muted); line-height:1.55; margin:0; }
.privacy-callout { padding:112px 0; background:#dff8f5; }
.privacy-callout .section { display:flex; justify-content:space-between; align-items:center; gap:50px; }
.privacy-callout h2 { font-size:clamp(2.4rem,5vw,4.4rem); line-height:.94; margin:0; max-width:650px; }
.button { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:15px 22px; border-radius:999px; background:var(--navy); color:white; font-weight:700; text-decoration:none; transition:transform .15s ease,background .15s ease; }
.button:hover { transform:translateY(-2px); background:#292a46; }
.footer { background:var(--navy); color:#d9dbe6; padding:40px 0 45px; }
.footer-inner { display:flex; justify-content:space-between; gap:30px; align-items:end; }
.footer p { margin:12px 0 0; font-size:13px; color:#aeb1c5; }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:white; }
.legal-page { background:var(--paper); min-height:100vh; }
.legal-top { background:var(--navy); color:white; padding-bottom:84px; }
.legal-title { width:min(900px,calc(100% - 48px)); margin:44px auto 0; }
.legal-title h1 { font-size:clamp(3.2rem,7vw,6rem); }
.legal-title p { color:#caccda; font-size:16px; margin:20px 0 0; }
.legal { width:min(800px,calc(100% - 48px)); padding:76px 0 110px; font-size:16px; line-height:1.72; }
.legal h2 { margin:49px 0 10px; font-size:27px; }
.legal p,.legal li { color:#44465a; }
.legal ul { padding-left:22px; }
.legal a { color:#057d76; font-weight:700; }
@media (max-width:760px) { .nav,.section,.footer-inner,.legal { width:min(100% - 36px,1160px); } .nav { min-height:72px; } .nav-links { gap:15px; font-size:13px; } .hero { min-height:auto; } .hero-grid { width:min(100% - 36px,1160px); grid-template-columns:1fr; gap:40px; padding:65px 0 145px; } .hero-art img { min-height:250px; } .intro { grid-template-columns:1fr; gap:18px; padding-bottom:82px; } .feature-area,.privacy-callout { padding:76px 0; } .feature-heading,.privacy-callout .section { display:block; } .feature-heading p { margin-top:20px; } .feature-grid { grid-template-columns:1fr; } .feature { min-height:0; padding:27px 0; } .feature + .feature { border-left:0; border-top:1px solid var(--line); padding-left:0; } .feature h3 { margin-top:24px; } .privacy-callout .button { margin-top:28px; } .footer-inner { display:block; } .footer-links { margin-top:28px; } .legal-top { padding-bottom:60px; } }
