@font-face{font-family:"Plex Ar";src:url(fonts/plex-ar-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-ar-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#0b0b0b;--or:#e78d24;--paper:#f3f1ed;--mut:#8f8a82;--mutd:#5f5b55;--rule:rgba(11,11,11,.16);--ruled:rgba(243,241,237,.14);
--pad:clamp(20px,5vw,72px);--f:"Plex Ar",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f);overflow-x:hidden}
html[lang=ar] [data-l=en],html[lang=en] [data-l=ar]{display:none}
html[lang=en] body{font-size:16.5px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.skip{position:absolute;top:8px;inset-inline-start:8px;background:var(--or);color:var(--ink);padding:8px 14px;z-index:9;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.025em}
p{margin:0}

/* top */
.top{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ruled)}
.topbar{display:flex;align-items:center;gap:18px;height:64px}
.brand{font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.01em;direction:ltr}
.brand span{color:var(--or)}
.ver{font:500 11.5px/1 var(--mono);color:var(--mut);border-inline-start:1px solid var(--ruled);padding-inline-start:14px;letter-spacing:.02em}
html[lang=ar] .ver{font-family:var(--f);font-size:12.5px}
.nav{display:flex;gap:28px;margin-inline-start:auto;font-size:15px}
.nav a{text-decoration:none;color:#cfcac2}
.nav a:hover{color:var(--paper)}
.lang{font:inherit;font-size:14px;line-height:1;background:none;border:1px solid rgba(243,241,237,.45);border-radius:3px;color:var(--paper);cursor:pointer;padding:9px 14px}
.lang:hover{border-color:var(--or);color:var(--or)}

/* hero */
.hero{padding-block:clamp(28px,5vw,56px) clamp(56px,7vw,104px)}
.meta{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--mut);padding-bottom:14px;border-bottom:1px solid var(--ruled)}
.hero h1{font-size:clamp(46px,8.6vw,138px);line-height:1.12;margin-block:clamp(22px,4vw,52px) clamp(26px,4vw,56px);max-width:none}
html[lang=en] .hero h1{line-height:1}
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:start}
.lead{font-size:clamp(17px,1.45vw,20px);color:#d9d4cc;max-width:38ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.btn{display:inline-block;font:700 16px/1.35 var(--f);background:var(--or);color:var(--ink);border:0;border-radius:3px;padding:15px 22px;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:#f19c38}
.btn.ghost{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(243,241,237,.4)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.textlink{font-size:15.5px;text-decoration:none;border-bottom:1px solid var(--mutd);padding-bottom:2px}
.textlink:hover{border-color:var(--paper)}

/* the desktop + bar */
.screen{margin:0}
.desk{position:relative;aspect-ratio:16/10;background:#161616;border:1px solid #262626;border-radius:4px;overflow:hidden}
.desk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.025) 79px 80px)}
.vabar{position:absolute;top:5%;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:14px;min-width:min(78%,340px);max-width:92%;
 background:#0b0b0b;border:1px solid rgba(231,141,36,.55);border-radius:999px;padding:10px 22px 10px 22px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.vabar[dir=ltr]{flex-direction:row}
.lvl{display:flex;align-items:center;gap:3px;height:22px;flex:none;position:relative;padding-inline-start:22px}
.lvl::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:13px;height:13px;margin-top:-7px;border:2px solid var(--or);border-radius:50%}
.vabar.done .lvl::before{background:var(--or)}
.lvl i{width:3px;height:6px;background:var(--or);border-radius:2px;transition:height .12s}
.vabar.listen .lvl i{animation:lv .9s ease-in-out infinite alternate}
.lvl i:nth-child(2){animation-delay:.15s!important}.lvl i:nth-child(3){animation-delay:.3s!important}.lvl i:nth-child(4){animation-delay:.1s!important}.lvl i:nth-child(5){animation-delay:.25s!important}
@keyframes lv{from{height:4px}to{height:20px}}
.txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.txt b{font-size:clamp(13px,1.15vw,15.5px);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txt small{font-size:clamp(11px,.95vw,13px);color:#a29d94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em}
.txt small.typing::after{content:"";display:inline-block;width:1px;height:1em;background:var(--or);margin-inline-start:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.win{position:absolute;top:30%;inset-inline:12% 20%;bottom:16%;border:1px solid #2c2c2c;background:#1b1b1b;border-radius:3px;padding:30px 18px 0;transition:opacity .3s}
.wt{position:absolute;top:0;inset-inline:0;height:22px;border-bottom:1px solid #2c2c2c;font:500 11px/22px var(--mono);color:#77726b;padding-inline:10px;direction:ltr;text-align:left}
.wb{display:block;height:8px;background:#262626;margin-bottom:12px;width:70%}
.wb.s{width:45%}.wb.m{width:58%}
.task{position:absolute;bottom:0;inset-inline:0;height:9%;border-top:1px solid #262626;background:#121212;display:flex;justify-content:center;align-items:center;gap:8px}
.task i{width:14px;height:14px;border:1px solid #333;border-radius:2px}
.screen figcaption{font-size:13px;color:var(--mut);margin-top:12px;padding-top:10px;border-top:1px solid var(--ruled);max-width:52ch}

/* sections */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec.ruled{padding-top:0}
.sec.ruled .wrap>.sh{padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule)}
.sh{display:grid;grid-template-columns:1fr 5fr 4fr;gap:clamp(16px,3vw,48px);align-items:start;padding-top:18px;border-top:2px solid currentColor;margin-bottom:clamp(36px,5vw,64px)}
.no{font:700 15px/1 var(--f);font-feature-settings:"tnum";padding-top:.6em;color:var(--or)}
html[lang=en] .no{font-family:var(--mono);font-size:14px}
.light .no{color:var(--ink)}
.sh h2{font-size:clamp(34px,4.6vw,68px);line-height:1.12}
html[lang=en] .sh h2{line-height:1.02}
.intro{font-size:clamp(16px,1.3vw,18.5px);color:var(--mutd);padding-top:.5em;max-width:40ch}
.dark .intro{color:#bdb7ae}

/* ledger */
.colhead{display:grid;grid-template-columns:6fr 5fr;gap:clamp(16px,4vw,64px);font-size:13px;color:var(--mutd);padding-bottom:10px;border-bottom:1px solid var(--ink)}
.ledger{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:6fr 5fr;gap:clamp(12px,4vw,64px);padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--rule)}
.say{font-size:clamp(21px,2.15vw,31px);font-weight:700;line-height:1.4}
html[lang=en] .say{line-height:1.25}
.new{font:700 11px/1 var(--f);color:var(--or);vertical-align:super;margin-inline-start:8px;white-space:nowrap;letter-spacing:.02em}
.light .new{color:#b5670f}
.does p{color:#3b3833;max-width:46ch}
.does .status{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;color:var(--mutd)}
.status .ic{width:9px;height:9px;border-radius:50%;background:var(--or);flex:none}

/* phone */
.phone-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(28px,5vw,96px);align-items:start}
.sh-stack{grid-template-columns:1fr;gap:18px;margin-bottom:0}
.sh-stack h2{margin-top:6px}
.specs{margin:28px 0 0;padding:0}
.specs div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding-block:16px;border-top:1px solid var(--ruled)}
.specs dt{font-weight:700}
.specs dd{margin:0;color:#c9c3ba}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);padding-top:8px}
.device{margin:0;background:#1a1a1a;border:1px solid #2e2e2e;border-radius:30px;padding:9px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.device img{border-radius:22px;width:100%}
.d2{margin-top:clamp(40px,7vw,110px)}

/* how-to */
.howto{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,80px)}
.howto div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding-block:22px;border-top:1px solid var(--rule)}
.howto dt{font-weight:700;font-size:18px}
.howto dd{margin:0;color:#3b3833}
.howto a{text-decoration-color:var(--or);text-underline-offset:3px}
.opt{display:block;font-weight:400;font-size:13px;color:var(--mutd)}
.keys{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle;margin-inline:2px}
kbd{font:600 12.5px/1 var(--mono);background:#fff;border:1px solid #c9c4bb;border-bottom-width:3px;border-radius:5px;padding:5px 8px 4px;color:var(--ink)}
.plus{font-size:12px;color:var(--mutd)}

/* files */
.files{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.files a{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:baseline;padding-block:24px;border-bottom:1px solid var(--rule);text-decoration:none}
.fn{font-size:clamp(22px,2.4vw,34px);font-weight:700}
.fm{font:13px var(--mono);color:var(--mutd)}
.arr{font-size:26px;line-height:1;transition:transform .2s}
.files a:hover .arr{transform:translateY(4px);color:#b5670f}
.files a:hover .fn{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* signup */
#signup{border-top:6px solid var(--or)}
.signup-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,110px);align-items:end}
.big{font-size:clamp(72px,13vw,200px);line-height:1;margin:18px 0 28px;letter-spacing:-.02em}
html[lang=en] .big{letter-spacing:-.045em}
.small{font-size:14px;color:#a8a29a;max-width:52ch;margin-top:18px}
.small b{color:var(--paper);font-weight:700}
.req{font-feature-settings:"tnum";color:var(--paper)}
.nf{display:grid;gap:4px}
.nf label{display:block}
.lb{display:block;font-size:13.5px;color:#a8a29a;margin-top:14px}
.lb em{font-style:normal;color:var(--mutd)}
.nf input,.nf textarea,.nf select{width:100%;font:inherit;font-size:17px;background:transparent;color:inherit;border:0;border-bottom:1px solid rgba(243,241,237,.35);border-radius:0;padding:8px 0 10px}
.nf select{appearance:none;-webkit-appearance:none;max-width:9em}
.nf select option{color:var(--ink)}
.nf textarea{resize:vertical;min-height:2.6em}
.nf input:focus,.nf textarea:focus,.nf select:focus{outline:0;border-bottom-color:var(--or)}
.nf .btn{justify-self:start;margin-top:26px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ok{color:var(--or);font-weight:700;margin-top:12px}
.err{color:#ff8a7a;margin-top:12px}

/* privacy */
.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:n}
.notes li{border-top:1px solid var(--ink);padding-top:16px}
.notes h3{font-size:18px;margin-bottom:10px}
.notes p{color:#3b3833;font-size:15.5px}

/* footer */
.foot{padding-block:clamp(64px,8vw,112px) 40px}
.foot-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,110px)}
.fb h2{font-size:clamp(32px,4vw,56px);line-height:1.15}
html[lang=en] .fb h2{line-height:1.02}
.fb .intro{margin-top:16px}
.foot .nf{grid-template-columns:1fr 9em;column-gap:28px}
.foot .nf .wide,.foot .nf .ok,.foot .nf .err{grid-column:1/-1}
.legal{grid-column:1/-1;margin-top:clamp(48px,6vw,88px);padding-top:18px;border-top:1px solid var(--ruled);font-size:13.5px;color:var(--mut)}
.legal a{text-decoration:none}
.legal a:hover{color:var(--paper)}

/* small screens */
@media (max-width:980px){
 .nav{display:none}
 .lang{margin-inline-start:auto}
 .hero-grid,.phone-grid,.signup-grid,.foot-grid{grid-template-columns:1fr}
 .sh{grid-template-columns:1fr;gap:10px}
 .no{padding-top:0}
 .notes{grid-template-columns:1fr 1fr}
 .howto{grid-template-columns:1fr}
 .phones{max-width:560px}
}
@media (max-width:620px){
 body{font-size:16px}
 .topbar{height:56px;gap:12px}
 .meta{font-size:12.5px}
 .meta>span:first-child{display:none}
 .meta{justify-content:flex-start}
 .hero{padding-top:16px}
 .hero h1{margin-block:22px 18px}
 .cta{margin-top:20px}
 .btn{width:100%;text-align:center}
 .nf .btn{width:auto}
 .desk{aspect-ratio:16/9}
 .win{display:none}
 .vabar{top:50%;transform:translate(-50%,-50%);padding:9px 16px;gap:10px;min-width:86%}
 .colhead{display:none}
 .row{grid-template-columns:1fr;gap:8px}
 .notes{grid-template-columns:1fr}
 .howto div,.specs div{grid-template-columns:1fr;gap:6px}
 .files a{grid-template-columns:1fr auto;gap:6px 16px}
 .fm{grid-row:2;grid-column:1}
 .arr{grid-row:1/3;grid-column:2;align-self:center}
 .foot .nf{grid-template-columns:1fr}
 .d2{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
 :not(.kmo,.kmo *,.kbud,.kbud *){animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .kmo.la .k-b{animation-duration:1.4s}
 .kmo.bo .k-b{animation-duration:.9s}
}
.sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;vertical-align:middle;margin-inline:3px}
html[lang=ar] .no{font-size:30px;line-height:1;padding-top:.15em}
.fm{font:13px var(--f)}
html[lang=en] .fm{font-family:var(--mono)}

/* docs link */
.mdocs{display:none;font-size:14px;text-decoration:none;color:var(--paper);border-bottom:1px solid var(--or);padding-bottom:2px}
.nav a[aria-current=page]{color:var(--or)}
html[dir=rtl] .files a[href="/docs"] .arr{transform:scaleX(-1)}
@media (max-width:980px){.mdocs{display:inline-block;margin-inline-start:auto}.mdocs+.lang{margin-inline-start:0}}
/* mascot */
.kmo{display:block;overflow:visible;-webkit-tap-highlight-color:transparent}
.kmo .k-e{transform-box:fill-box;transform-origin:center;transition:transform .08s ease-in}
.kmo .k-b{transform-box:fill-box;transform-origin:50% 92%}
.kmo .k-o{transform-box:fill-box;transform-origin:50% 0}
.kmo .k-h,.kmo .k-o,.kmo .k-ck,.kmo .k-m,.kmo .k-e{transition:opacity .12s,transform .08s ease-in}
.kmo.bl .k-e,.kmo.wl .k-el{transform:scaleY(.08)}
.kmo.wl .k-er{transform:scale(1.08)}
.kmo.bo .k-b{animation:kbo .62s cubic-bezier(.3,.7,.4,1)}
.kmo.la .k-e,.kmo.la .k-m{opacity:0}
.kmo.la .k-h,.kmo.la .k-o,.kmo.la .k-ck{opacity:1}
.kmo.la .k-b{animation:kwig 1s ease-in-out}
.kmo.la .k-o{animation:kha .16s ease-in-out infinite alternate}
.kmo.li .k-e{animation:kli .45s ease-in-out infinite alternate}
.kmo.li .k-r{animation:kri .9s ease-in-out infinite}
.kmo-hero{cursor:pointer;filter:drop-shadow(0 0 22px rgba(231,141,36,.28))}
.kmo-hero .k-b{animation:kbr 4.2s ease-in-out infinite}
@keyframes kbr{50%{transform:scale(1.025,.985)}}
@keyframes kbo{0%,100%{transform:none}22%{transform:translateY(3%) scale(1.07,.9)}48%{transform:translateY(-11%) scale(.95,1.06)}74%{transform:translateY(1%) scale(1.04,.95)}}
@keyframes kwig{0%,100%{transform:none}12%{transform:rotate(-9deg) translateY(-3%)}30%{transform:rotate(8deg) translateY(-5%)}48%{transform:rotate(-7deg) translateY(-2%)}66%{transform:rotate(5deg) translateY(-3%)}84%{transform:rotate(-2deg)}}
@keyframes kha{to{transform:scaleY(.62)}}
@keyframes kli{to{transform:scale(1.16,1.1)}}
@keyframes kri{0%,100%{stroke-width:5;opacity:1}50%{stroke-width:9;opacity:.55}}
.brand{display:inline-flex;align-items:center}
.kmo-s{width:30px;height:30px;flex:none;margin-right:9px}
.hero-head{position:relative}
.hero-head .kmo-hero{position:absolute;inset-inline-end:0;top:calc(-1*clamp(6px,1.7vw,26px));width:clamp(80px,10.5vw,160px);height:auto}
@media (max-width:620px){
 .hero-head{display:flex;flex-direction:column;align-items:flex-start}
 .hero-head .kmo-hero{position:static;order:-1;width:84px;margin:20px 0 -4px}
 .kmo-s{width:27px;height:27px}
}

.dlp{margin:22px 0 4px}