/* Sarakku web — shared base: tokens (Proof DS) + self-hosted DM Sans + chrome. */

/* ── fonts ── */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── design tokens ── */
:root{
--red-50:#FF3008;--red-60:#EB1700;--red-70:#C21400;--red-80:#9E1000;--red-20:#FFD7CF;--red-10:#FFF1EE;
--ink-100:#191919;--ink-80:#494949;--ink-60:#767676;--ink-40:#B3B3B3;--ink-20:#D8D8D8;--ink-10:#E7E7E7;--ink-5:#F5F5F5;--ink-3:#FAFAFA;--white:#FFFFFF;
--green-60:#00711F;--green-10:#EAF7EE;
--teal-60:#00838A;--teal-10:#E6F4F5;
--gold-50:#F6B24A;--gold-70:#A96A00;--gold-10:#FDF2E0;
--dark-100:#181818;--dark-80:#242424;--dark-60:#3A3A3A;
--focus-ring:0 0 0 3px rgba(235,23,0,.28);
--viz-track:#EFEFEF;
--r-pill:999px;--r-sheet:28px;--r-card:16px;--r-card-lg:24px;
--shadow-card:0 1px 2px rgba(25,25,25,.04),0 4px 12px rgba(25,25,25,.06);
--shadow-pop:0 2px 8px rgba(25,25,25,.12);
--shadow-float:0 8px 24px rgba(25,25,25,.18);
--gloss:inset 0 1px 0 rgba(255,255,255,.25);
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── base ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',-apple-system,'Segoe UI',sans-serif;color:var(--ink-100);background:#fff;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{color:var(--red-60);text-decoration:none}a:hover{color:var(--red-70)}
.tnum{font-feature-settings:"tnum" 1}
h1,h2,h3{margin:0;letter-spacing:-0.025em;text-wrap:balance}
.caps{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 26px;border-radius:999px;background:var(--red-60);color:#fff;font-weight:700;font-size:16.5px;border:none;cursor:pointer;transition:transform .13s var(--ease-out),background .15s;box-shadow:var(--gloss)}
.btn:hover{background:var(--red-70);color:#fff}.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--ink-5);color:var(--ink-100)}.btn.ghost:hover{background:var(--ink-10)}

/* ── nav ── */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--ink-10)}
.nav-in{display:flex;align-items:center;gap:18px;height:66px}
.wordmark{font-weight:800;letter-spacing:-0.03em;color:var(--ink-100)}
.wordmark i{font-style:normal;color:var(--red-50)}
.nav-in .lnk{font-size:14.5px;font-weight:700;color:var(--ink-60)}
.nav-in .lnk.on{color:var(--ink-100)}
.nav-in .btn{margin-left:auto;height:44px;padding:0 20px;font-size:15px}
.nav-brand{display:flex;align-items:center;gap:12px;color:inherit}
/* Phones: the nav's min-content (~453px) was wider than small viewports,
   giving EVERY page a sideways wobble. Brand + install button is the whole
   job at that size; text links live in the footer too. */
@media(max-width:460px){.nav-in{gap:12px}.nav-in .lnk{display:none}.nav-in .btn{height:40px;padding:0 14px;font-size:14px}}

/* ── footer ── */
footer{border-top:1px solid var(--ink-10);padding:28px 0 36px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font-size:14px;font-weight:600;color:var(--ink-80)}
footer .wordmark{font-size:18px}
footer a{color:var(--ink-80);font-weight:700}
footer a:hover{color:var(--red-60)}
footer .muted{color:var(--ink-60);font-weight:500}

/* ── reveals ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ── app-download modal ──────────────────────────────────────────────────
   "Get the app" used to be href="#download", and #download is the CTA row
   INSIDE THE HERO — so from anywhere on the page it scrolled back to the
   top, and from the top it did nothing at all. Both read as a random jump.
   The price pages already answer this with a dialog (seo.ts APP_MODAL);
   these static pages load site.css, not price.css, so the styles live here
   too. Same look, built from the classes site.css already has. */
.appdlg{border:0;border-radius:22px;padding:28px 26px 24px;max-width:360px;width:calc(100vw - 48px);box-shadow:0 30px 80px rgba(25,25,25,.25);text-align:left;background:#fff;color:var(--ink)}
.appdlg::backdrop{background:rgba(25,25,25,.45);backdrop-filter:blur(3px)}
.appdlg .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:99px;border:0;background:var(--ink-5);color:var(--ink-60);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.appdlg h3{font-size:19px;font-weight:800;letter-spacing:-0.02em;margin:14px 0 6px}
.appdlg p{font-size:13.5px;color:var(--ink-60);line-height:1.6;margin:0 0 16px}
/* .btn is the static pages' button, .btn2 the generated price pages' — the
   same dialog is built from whichever class that surface has. */
.appdlg .btn,.appdlg .btn2{width:100%;justify-content:center;margin-top:8px;box-sizing:border-box}
.appdlg .note{display:block;text-align:center;font-size:11.5px;color:var(--ink-60);margin-top:14px}