/* DotGrid site: tokens and shared parts (both directions). Dark is the default; light by prefers-color-scheme or the toggle. */
@font-face{font-family:Doto;src:url(assets/fonts/doto.ttf) format("truetype");font-display:swap}
@font-face{font-family:Geist;src:url(assets/fonts/geist-regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(assets/fonts/geist-bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --bg:#000;--surf:#121212;--surf2:#1B1B1B;--ink:#F0F0F0;--gray:#8C8C8C;--line:#262626;--dot:rgba(255,255,255,.10);
  --red:#D71921;--red-ink:#FF4D55;--live:#10B981;--test:#F5A524;--frame:#1E1E1E;--btn:#F0F0F0;--btn-ink:#000;
  --r:22px;--max:1120px;--gut:32px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
  --bg:#F2F2F2;--surf:#FFFFFF;--surf2:#F7F7F7;--ink:#111;--gray:#6B6B6B;--line:#DDDDDD;--dot:rgba(0,0,0,.11);
  --red-ink:#D71921;--frame:#D6D6D6;--btn:#111;--btn-ink:#fff;color-scheme:light}}
:root[data-theme=light]{
  --bg:#F2F2F2;--surf:#FFFFFF;--surf2:#F7F7F7;--ink:#111;--gray:#6B6B6B;--line:#DDDDDD;--dot:rgba(0,0,0,.11);
  --red-ink:#D71921;--frame:#D6D6D6;--btn:#111;--btn-ink:#fff;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 Geist,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.08}
.wrap{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}

/* marks: one image per theme, swapped with the theme */
.m-light{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .m-dark{display:none}:root:not([data-theme=dark]) .m-light{display:block}}
:root[data-theme=light] .m-dark{display:none}:root[data-theme=light] .m-light{display:block}
:root[data-theme=dark] .m-dark{display:block}:root[data-theme=dark] .m-light{display:none}

/* square-pixel wordmark (option A) and the app logo: mark · gap h/4 · letters h/2 · red dot */
.wm{display:block;fill:currentColor;shape-rendering:crispEdges;overflow:visible}
.wm circle{fill:var(--red);shape-rendering:geometricPrecision}
.logo{display:inline-flex;align-items:center;gap:calc(var(--h)/4);height:var(--h)}
.logo img{height:var(--h);width:auto}

/* section label as in the apps: caps, spaced, red dot after */
.kick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.kick::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.num{font-family:Doto;font-weight:900}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15.5px;white-space:nowrap;border:1px solid transparent}
.btn.primary{background:var(--btn);color:var(--btn-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm{height:40px;padding:0 16px;font-size:14.5px}
.link{font-weight:700;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.link::after{content:"›";color:var(--red-ink);font-size:20px;line-height:1}

/* status chip */
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.04em;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.chip.testing::before{background:var(--test)}

/* phone frame around a real screen */
.phone{margin:0;border-radius:34px;padding:7px;background:var(--frame);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.phone img{border-radius:27px;width:100%;aspect-ratio:9/20;object-fit:cover}

/* app icon tile (launcher icon, black square: only in app tiles) */
.icon{border-radius:24%;overflow:hidden;flex:none}
.icon img{width:100%;height:100%}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;height:72px;gap:28px}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:700}
.top nav a{color:var(--gray)}.top nav a.on,.top nav a:hover{color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.lang a{padding:5px 10px;border-radius:999px;color:var(--gray)}.lang a.on{background:var(--ink);color:var(--bg)}
.tbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.tbtn svg{width:16px;height:16px}
.menu{display:none}
@media (max-width:860px){.top nav{display:none}.menu{display:grid;margin-left:auto}.top .wrap{gap:10px;height:62px}}

footer{border-top:1px solid var(--line);margin-top:96px;padding:40px 0 56px;color:var(--gray);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
footer .cols{display:flex;gap:48px;margin-left:auto;flex-wrap:wrap}
footer .cols div{display:flex;flex-direction:column;gap:8px}
footer b{color:var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
footer .tm{flex-basis:100%;font-size:12.5px;opacity:.8}
@media (max-width:600px){:root{--gut:18px}footer .cols{margin-left:0;gap:28px}}
.top .drawer{display:none}
body.open .top .drawer{display:flex;flex-direction:column;gap:14px;height:auto;padding:4px var(--gut) 18px;font-weight:700;align-items:flex-start}
.icon.itile{background:#000;display:grid;place-items:center;border-radius:24%}
.icon.itile img{max-width:none}

/* ---- hero buttons (round 3): one height 52, one radius 26, equal widths, 12 px gaps, centred on the page axis ---- */
.cta-row{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:36px}
.cta{--w:212px;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:var(--w);height:52px;padding:0 24px;border-radius:26px;
 font:600 16px/1 Geist,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;border:1px solid transparent;
 transition:transform .45s cubic-bezier(.34,1.45,.5,1),background .25s,border-color .25s,color .25s,box-shadow .3s}
.cta svg{width:20px;height:20px;flex:none;transition:transform .35s cubic-bezier(.34,1.45,.5,1)}
.cta.pri{background:var(--ink);color:var(--bg)}
.cta.pri:hover svg{transform:translateX(3px)}
.cta.alt{border-color:color-mix(in srgb,var(--ink) 24%,transparent);color:var(--ink)}
.cta.alt:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cta .tgav{width:24px;height:24px;border-radius:50%;flex:none;margin-left:-2px}
.cta:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.cta:active{transform:scale(.97)}
.ic.av{background:none;padding:0;overflow:hidden}.ic.av .tgav{width:44px;height:44px;border-radius:50%}
@media (max-width:600px){.cta-row{flex-direction:column;align-items:stretch;gap:12px;width:100%}.cta{--w:100%}}