@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
color-scheme:light dark;
--fd:"Bricolage Grotesque",sans-serif;--fb:"DM Sans",sans-serif;--fm:"DM Mono",monospace;
--bg:#FBF3F1;--surf:#FFFFFF;--ink:#2A1512;--ink2:#6A4C46;--line:#EBDCD8;--line2:#CDB5AF;--acc:#B02A1C;--onacc:#FFFFFF;--orange:#E8A24E;--tint:rgba(176,42,28,.08);
--pad:20px;--sy:48px;--h1:38px;--h1p:38px;--h2:30px;--h3:20px;--body:18px;--icon:88px;--illo:120px;--illo2:120px;--pw:341px;--nfh:480px;
}
@media (prefers-color-scheme:dark){:root{
--bg:#1F0F0D;--surf:#2A1613;--ink:#F8ECE8;--ink2:#CBAAA3;--line:#3D2420;--line2:#5C3A34;--acc:#F0705C;--onacc:#2A0C08;--orange:#F0B061;--tint:rgba(240,112,92,.14);
}}
@media (min-width:900px){:root{
--pad:64px;--sy:64px;--h1:68px;--h1p:56px;--h2:40px;--h3:22px;--body:20px;--icon:112px;--illo:220px;--illo2:200px;--pw:362px;--nfh:560px;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-optical-sizing:auto}
a{color:var(--acc)}
a:hover{color:var(--ink)}
img{max-width:100%}
.in{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}

/* header */
.top{border-bottom:1px solid var(--line2)}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:700 20px var(--fd)}
.brand img{width:36px;height:36px;border-radius:22%}
.brand:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:16px;font:500 16px var(--fb)}
.nav a{color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav a[aria-current]{color:var(--acc);border-bottom:1px solid var(--acc)}

/* footer */
.foot{border-top:1px solid var(--line2);background:var(--surf)}
.foot .in{padding-block:32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot .fb{display:flex;align-items:center;gap:12px;font:700 18px var(--fd);color:var(--ink)}
.foot .fb img{width:32px;height:32px;border-radius:22%}
.foot .fl{display:flex;flex-wrap:wrap;gap:0 24px;font:500 16px var(--fb)}
.foot .fl a{min-height:44px;display:flex;align-items:center}

/* hero */
.hero{background:radial-gradient(900px 520px at 85% 0%,var(--tint) 0%,transparent 70%)}
.hero .in{padding-block:var(--sy);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center}
.hero .app-icon{width:var(--icon);height:var(--icon);border-radius:22%;display:block;box-shadow:0 18px 36px -12px rgba(120,24,14,.45)}
h1{margin:0;font-family:var(--fd);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hero h1{margin-top:32px;font-size:var(--h1);line-height:1.04;text-wrap:balance}
.lead{margin:20px 0 0;font:400 var(--body)/1.5 var(--fb);color:var(--ink2);max-width:540px;text-wrap:pretty}
.cta{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.badge{display:block;flex:none;height:56px;width:auto}
@media (min-width:900px){.badge{height:58px}}
.shot{position:relative;display:flex;justify-content:center}
.phone{width:var(--pw);padding:calc(var(--pw)*.02817);border-radius:calc(var(--pw)*.15493);background:#141211;box-shadow:0 40px 70px -24px rgba(42,21,18,.55)}
.phone img{display:block;width:100%;height:auto;border-radius:calc(var(--pw)*.12676)}
.illo{position:absolute;z-index:2;left:0;bottom:-64px;width:var(--illo);height:var(--illo)}
@media (min-width:900px){.shot{justify-content:flex-end}.illo{left:max(0px,calc(100% - var(--pw) - var(--illo) + 6px));bottom:-16px}}

/* good to know */
.know{background:var(--surf);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);position:relative}
.know .in{padding-block:var(--sy)}
.know .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
h2{margin:0;font-family:var(--fd);font-weight:700;font-size:var(--h2);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.know .clip{width:var(--illo2);height:var(--illo2);margin-bottom:-16px;position:relative;z-index:1}
.list{margin-top:24px;border-top:1px solid var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:12px 24px;padding:24px 0;border-bottom:1px solid var(--line2)}
.row:last-child{border-bottom:0}
.row .n{width:48px;font:500 14px/1.6 var(--fm);color:var(--ink2)}
.row .t{flex:1 1 240px;font:600 var(--h3)/1.25 var(--fd);color:var(--ink)}
.row .d{flex:2 1 320px;font:400 17px/1.5 var(--fb);color:var(--ink2)}

/* worked example */
.eg .in{padding-block:var(--sy)}
.eyebrow{font:500 14px/1 var(--fm);color:var(--ink2)}
.eg h2{margin-top:12px}
.eg .sub{margin:8px 0 0;font:400 17px/1.5 var(--fb);color:var(--ink2)}
.cards{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.card{background:var(--surf);border:1px solid var(--line2);border-radius:14px;padding:24px}
.card h3{margin:0;font:600 20px var(--fd);color:var(--ink)}
.calc{margin-top:12px;font:400 16px/1 var(--fm);color:var(--ink)}
.calc div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.calc div span:first-child{color:var(--ink2)}
.calc .f{display:block;border-bottom:0}
.res{margin-top:12px;border-radius:10px;padding:16px}
.res b{display:block;font:700 48px/1 var(--fd)}
.res span{display:block;margin-top:8px;font:500 16px/1.4 var(--fb)}
.res.a{background:var(--acc);color:var(--onacc)}
.res.t{background:var(--tint);border:1px solid var(--line2);color:var(--ink)}

/* privacy / support */
.doc .in{padding-block:var(--sy)}
.doc h1{margin-top:12px;font-size:var(--h1p);line-height:1.05}
.doc .lead{color:var(--ink)}
.doc.sup h1{margin-top:0}
.doc.sup .lead{color:var(--ink2)}
.btn{display:inline-flex;align-items:center;height:54px;padding:0 24px;border-radius:10px;background:var(--acc);color:var(--onacc);font:700 17px var(--fb);text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.btn:hover{color:var(--onacc);opacity:.9}
.doc .btn{margin-top:24px}
.faq{margin-top:48px;border-top:1px solid var(--ink)}
.faq .row{gap:8px 24px}
.faq .row:last-child{border-bottom:0}
.faq .t{flex:1 1 260px;font:600 20px/1.25 var(--fd)}
.faq.p .t{flex-basis:220px}
.faq .d{font:400 17px/1.55 var(--fb)}

/* 404 */
.nf{background:radial-gradient(700px 400px at 50% 0%,var(--tint) 0%,transparent 70%)}
.nf .in{padding-block:var(--sy);display:flex;flex-direction:column;align-items:center;text-align:center;min-height:var(--nfh);justify-content:center}
.nf svg{max-width:100%;height:auto}
.nf h1{margin-top:32px;font-size:var(--h2);line-height:1.1;letter-spacing:0}
.nf .lead{margin-top:12px;max-width:480px}
.nf .btn{margin-top:32px}
.nf .s{fill:var(--surf);stroke:var(--ink);stroke-width:2}
.nf .w{fill:none;stroke:var(--ink);stroke-width:1}
.nf .m{fill:none;stroke:var(--ink2)}
.nf .tm{font:500 12px var(--fm);fill:var(--ink2)}
.nf .tb{font:700 56px var(--fd);fill:var(--acc)}