/* The landing's styles — shared by landing.html (Russian, "/") and landing.en.html (English,
   "/en"). Static like the pages: nothing here depends on the app's bundle. */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/onest-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/onest-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── Tokens ──────────────────────────────────────────────────────────────────
   The app's Graphite theme, pulled one step deeper for the landing: a marketing
   page is looked at once, in a bright room, next to other tabs. The app's #141118
   is tuned for staring at for hours; here it becomes the colour of the things that
   sit ON the page (the cards), so they read as objects on a surface.
   Same iris either way — the accent is the brand and does not get "adjusted for
   the web". */
:root{
  --bg:#0b0910;
  --ground:#141118;
  --raise:#16121d;
  --raise-hi:#1e1928;
  --line:rgba(232,228,240,.10);
  --line-hi:rgba(232,228,240,.20);
  --text:#e8e4f0;
  --dim:#a49db4;
  --faint:#857d97;
  --iris:#8b5cf6;
  --iris-hi:#a78bfa;
  --iris-wash:rgba(139,92,246,.13);
  --green:#34d399;

  /* One ease, everywhere. Exponential out: things arrive decisively and settle. */
  --ease:cubic-bezier(.16,1,.3,1);

  --t-display:clamp(2.45rem,1.5rem + 4vw,4.6rem);
  --t-h2:clamp(1.75rem,1.25rem + 1.9vw,2.7rem);
  --t-h3:clamp(1.12rem,1.02rem + .35vw,1.3rem);
  --t-lede:clamp(1.04rem,.98rem + .3vw,1.22rem);

  /* Section rhythm: wide between chapters, tight inside them. */
  --gap-chapter:clamp(4rem,3rem + 5vw,7.5rem);
  --gap-inner:clamp(1.75rem,1.4rem + 1.6vw,3rem);

  --z-header:100;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Light type on a dark ground reads lighter than it is; the extra leading is not slack. */
  font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}

h1,h2,h3{
  margin:0;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1{font-size:var(--t-display);letter-spacing:-.036em;}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.018em;}
p{margin:0;text-wrap:pretty;}

.wrap{width:min(1180px,100% - 2rem);margin-inline:auto;}

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's min-content width. One <pre> holding a long URL
   is then wider than a phone, the grid grows to fit it, and body{overflow-x}
   clips the WHOLE page from the right — headline, buttons and all. The symptom
   appears nowhere near the cause, which is why this is set once, up front. */
.host > *,.apps > *,.editions > *,.features > *,.contact > *{min-width:0;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--iris);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 .6rem 0;
}
.skip:focus{left:0;}

:where(a,button,summary,video):focus-visible{
  outline:2px solid var(--iris-hi);outline-offset:3px;border-radius:.4rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:var(--z-header);
  background:color-mix(in oklab,var(--bg) 86%,transparent);
  border-bottom:1px solid transparent;
  /* The only blur on the page, and it earns it: the header sits over everything it scrolls past. */
  backdrop-filter:blur(14px);
}
@supports (animation-timeline:scroll()){
  header{
    animation:header-edge linear both;
    animation-timeline:scroll(root block);
    animation-range:0 120px;
  }
  @keyframes header-edge{to{border-bottom-color:var(--line);}}
}
.bar{display:flex;align-items:center;gap:1.4rem;min-height:64px;}
.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:1.06rem;letter-spacing:-.02em;text-decoration:none;
  margin-inline-end:auto;
}
.bar nav{display:flex;align-items:center;gap:1.5rem;}
.bar nav a{
  text-decoration:none;color:var(--dim);font-size:.94rem;font-weight:500;
  transition:color .2s var(--ease);
}
.bar nav a:hover{color:var(--text);}
.bar nav .cta{
  color:#fff;background:var(--iris);
  padding:.5rem 1rem;border-radius:.6rem;font-weight:600;
  transition:background .2s var(--ease);
}
.bar nav .cta:hover{background:var(--iris-hi);color:#fff;}
/* RU / EN: the other language's twin of this page (landing.html ↔ landing.en.html). */
.bar nav .nav-lang{
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  padding:.28rem .55rem;border:1px solid var(--line-hi);border-radius:.45rem;color:var(--dim);
}
.bar nav .nav-lang:hover{color:var(--text);border-color:var(--text);}
@media (max-width:860px){.nav-wide{display:none;}}
@media (max-width:420px){.nav-in{display:none;}}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:.7rem;
  font-weight:600;font-size:1rem;text-decoration:none;
  border:1px solid transparent;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary{background:var(--iris);color:#fff;}
.btn-primary:hover{background:var(--iris-hi);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-hi);}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-2px);}
.btn-lg{padding:1rem 1.9rem;font-size:1.06rem;}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-top:clamp(2.75rem,1.75rem + 4vw,5rem);
  text-align:center;
  overflow:hidden;
}
/* A single wash of the brand behind the headline. Not a gradient hero — the
   colour sits behind the type and dies out below it. */
.hero::before{
  content:"";position:absolute;inset:-30% 0 auto;height:75vh;z-index:-1;
  background:radial-gradient(60% 55% at 50% 40%,var(--iris-wash),transparent 72%);
  pointer-events:none;
}
.hero .lede{
  max-width:46ch;margin:1.25rem auto 0;
  font-size:var(--t-lede);color:var(--dim);line-height:1.55;
  text-wrap:balance;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:1.9rem;
}
.hero-note{margin-top:1rem;font-size:.92rem;color:var(--faint);}
.hero-note a{color:var(--dim);text-underline-offset:.2em;}
.hero-note a:hover{color:var(--text);}

/* ── Chapters ────────────────────────────────────────────────────────────── */
section{padding-block:calc(var(--gap-chapter) * .5);}
section:first-of-type{padding-top:var(--gap-chapter);}
.head{max-width:58ch;}
.head p{margin-top:1rem;font-size:var(--t-lede);color:var(--dim);line-height:1.55;}

/* ── What is inside: four short statements, no pictures. ──────────────────── */
.features{
  display:grid;gap:clamp(1.5rem,1rem + 2vw,2.75rem) clamp(1.5rem,1rem + 3vw,4rem);
  margin-top:var(--gap-inner);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.features > div{padding-top:1.25rem;border-top:1px solid var(--line);}
.features h3{margin-bottom:.55rem;}
.features p{color:var(--dim);font-size:.97rem;}
.ed-mark{
  display:inline-block;vertical-align:.18em;margin-left:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;line-height:1;
  color:var(--iris-hi);border:1px solid color-mix(in oklab,var(--iris) 55%,transparent);
  border-radius:.4rem;padding:.25rem .45rem;
}

/* ── Three ways in ───────────────────────────────────────────────────────── */
.editions{
  display:grid;gap:1.1rem;margin-top:var(--gap-inner);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.ed{
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,1.2rem + .8vw,2rem);
  border:1px solid var(--line);border-radius:1rem;
  background:var(--raise);
  scroll-margin-top:6rem;
}
.ed.primary{
  border-color:color-mix(in oklab,var(--iris) 45%,transparent);
  background:linear-gradient(180deg,var(--iris-wash),transparent 55%),var(--raise);
}
.ed-tag{
  font-size:.8rem;font-weight:600;color:var(--faint);margin-bottom:.5rem;
}
.ed.primary .ed-tag{color:var(--iris-hi);}
.ed h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem);margin-bottom:.4rem;}
.ed .price{color:var(--dim);font-size:.95rem;margin-bottom:1.15rem;}
.ed ul{margin:0 0 1.5rem;padding:0;list-style:none;display:grid;gap:.85rem;}
.ed li{position:relative;padding-left:1.6rem;font-size:.94rem;color:var(--dim);line-height:1.55;}
.ed li b{color:var(--text);font-weight:600;}
.ed li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.68rem;height:.68rem;border-radius:50%;
  background:color-mix(in oklab,var(--green) 30%,transparent);
  border:1px solid var(--green);
}
/* The honest half. Same shape, different colour: a claim this edition does NOT make. */
.ed li.no::before{background:transparent;border-color:var(--faint);}
.ed li.no b{color:var(--dim);}
.ed .btn{margin-top:auto;align-self:flex-start;}
.ed-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;}
.ed-actions .btn{margin-top:0;}

/* ── Apps and downloads ──────────────────────────────────────────────────── */
.apps{display:grid;gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:start;}
@media (min-width:900px){.apps{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}}
.phone{justify-self:center;width:min(340px,82%);}
.phone img{
  border-radius:1.7rem;border:1px solid var(--line-hi);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9);
}
.apps .head{margin-bottom:var(--gap-inner);}

/* A platform is either something you can install right now or something you
   cannot, and the list says which without making the reader hunt. The two that
   are not ready are not links at all — a dimmed card that still takes a click is
   worse than an honest dead end. */
.dl{display:grid;gap:.75rem;grid-template-columns:1fr;}
@media (min-width:640px){.dl{grid-template-columns:1fr 1fr;}}
.dl-card{
  display:flex;align-items:center;gap:.9rem;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:.9rem;
  background:var(--raise);color:inherit;text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
a.dl-card:hover{border-color:var(--line-hi);transform:translateY(-2px);}
.dl-main{
  grid-column:1/-1;
  padding:clamp(1.1rem,1rem + .6vw,1.5rem);
  border-color:color-mix(in oklab,var(--iris) 45%,transparent);
  background:linear-gradient(180deg,var(--iris-wash),transparent 60%),var(--raise);
}
a.dl-main:hover{border-color:var(--iris);}
.dl-card svg{flex:0 0 auto;width:1.7rem;height:1.7rem;color:var(--dim);}
.dl-main svg{width:2.3rem;height:2.3rem;color:var(--iris-hi);}
/* Flex child. Without min-width:0 a long meta line refuses to shrink and pushes
   the button out of the card instead of wrapping. */
.dl-txt{flex:1 1 auto;min-width:0;}
.dl-txt b{display:block;font-size:.98rem;font-weight:600;}
.dl-main .dl-txt b{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);}
.dl-txt span{display:block;margin-top:.15rem;color:var(--dim);font-size:.85rem;line-height:1.45;}
.dl-go{
  flex:0 0 auto;padding:.7rem 1.3rem;border-radius:.7rem;
  background:var(--iris);color:#fff;font-weight:600;font-size:.95rem;
  transition:background .2s var(--ease);
}
a.dl-main:hover .dl-go{background:var(--iris-hi);}
.dl-state{
  flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--dim);
  border:1px solid var(--line);border-radius:.55rem;padding:.35rem .65rem;
}
/* Linux ships two formats and neither is the obvious default: AppImage runs anywhere without
   installing, the .deb integrates with apt on Debian and Ubuntu. A card with two actions rather
   than a guess, which also means it cannot be an <a> — nested links are invalid, and a card-wide
   link with buttons inside it swallows the buttons' own clicks. */
.dl-pair{display:flex;flex:0 0 auto;gap:.45rem;}
.dl-alt{
  padding:.5rem .8rem;border-radius:.65rem;border:1px solid var(--line-hi);
  color:var(--text);font-weight:600;font-size:.88rem;text-decoration:none;text-align:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.dl-alt:hover{border-color:var(--iris);background:var(--iris-wash);}
.dl-alt span{display:block;font-size:.74rem;color:var(--faint);font-weight:400;}
.dl-span{grid-column:1/-1;}
.dl-soon{opacity:.62;}
.dl-soon .dl-state{color:var(--faint);}
@media (max-width:560px){
  .dl-card{flex-wrap:wrap;}
  /* Basis 0, so the icon and the words share the first row and only the button wraps. */
  .dl-txt{flex:1 1 0;}
  .dl-go,.dl-state{width:100%;text-align:center;}
  .dl-pair{width:100%;}.dl-alt{flex:1 1 0;}
}
.dl-more{margin-top:1rem;color:var(--dim);font-size:.9rem;}
.dl-more summary{cursor:pointer;color:var(--dim);font-weight:500;width:fit-content;}
.dl-more summary:hover{color:var(--text);}
.dl-more p{margin-top:.8rem;max-width:72ch;line-height:1.6;}
.dl-more b{color:var(--text);font-weight:600;}
.dl-more code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.92em;color:var(--text);overflow-wrap:anywhere;
  background:var(--raise-hi);border-radius:.3rem;padding:.1rem .35rem;
}

/* ── Self-hosting ────────────────────────────────────────────────────────── */
.host{display:grid;gap:clamp(1.75rem,1.25rem + 3vw,4rem);align-items:start;}
@media (min-width:900px){.host{grid-template-columns:1fr 1fr;}}
.ticks{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem;}
.ticks li{position:relative;padding-left:1.35rem;color:var(--dim);font-size:.96rem;}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--iris);
}
pre.code{
  margin:0;padding:1.3rem 1.4rem;overflow-x:auto;
  background:#0d0b12;border:1px solid var(--line);border-radius:.8rem;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:.86rem;line-height:1.75;color:var(--dim);
}
pre.code b{color:var(--iris-hi);font-weight:600;}
pre.code i{color:var(--faint);font-style:normal;}
.host-links{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.92rem;}
.host-links a{color:var(--dim);text-underline-offset:.2em;}
.host-links a:hover{color:var(--text);}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{margin-top:var(--gap-inner);border-top:1px solid var(--line);max-width:860px;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{
  cursor:pointer;list-style:none;padding:1.2rem 2.5rem 1.2rem 0;position:relative;
  font-weight:600;font-size:1.02rem;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  width:.6rem;height:.6rem;margin-top:-.42rem;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-.12rem;}
.qa p{padding-bottom:1.25rem;color:var(--dim);max-width:70ch;}
.qa p + p{margin-top:-.5rem;}
.qa b{color:var(--text);font-weight:600;}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact{display:grid;gap:clamp(1.75rem,1.25rem + 3vw,4rem);}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;}}
#contact,.contact-done{scroll-margin-top:6rem;}
.contact-text p{margin-top:1rem;color:var(--dim);font-size:var(--t-lede);line-height:1.55;}
.contact-text .direct{font-size:1rem;}
.contact-text .direct a{color:var(--text);}
.contact-card{
  padding:clamp(1.4rem,1.2rem + .8vw,2rem);
  border:1px solid var(--line);border-radius:1rem;background:var(--raise);
}
.contact-form{display:grid;gap:1rem;}
.contact-form[hidden]{display:none;}
.contact-form label{display:grid;gap:.4rem;font-size:.92rem;font-weight:600;}
.contact-form label small{font-size:inherit;font-weight:400;color:var(--faint);margin-left:.3rem;}
.contact-form input,.contact-form textarea{
  font:inherit;font-weight:400;color:var(--text);width:100%;
  background:var(--bg);border:1px solid var(--line-hi);border-radius:.6rem;padding:.75rem .9rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.contact-form textarea{resize:vertical;min-height:7.5rem;}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-wash);
}
.contact-form .consent{
  display:flex;gap:.65rem;align-items:flex-start;
  font-weight:400;color:var(--dim);font-size:.88rem;line-height:1.5;
}
.contact-form .consent input{width:auto;margin:.2rem 0 0;accent-color:var(--iris);}
.contact-form .consent a{color:var(--text);}
/* Off-screen, not display:none: a bot that skips hidden inputs would skip this one too. */
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form button{justify-self:start;cursor:pointer;font-family:inherit;}
.contact-form button[disabled]{opacity:.6;cursor:progress;}
.contact-status{min-height:1.4em;font-size:.92rem;color:var(--dim);}
.contact-status.error{color:#fca5a5;}
.contact-done{
  display:none;margin-bottom:1rem;padding:1.1rem 1.3rem;border-radius:.8rem;
  border:1px solid var(--line-hi);background:var(--raise-hi);color:var(--dim);
}
.contact-done b{display:block;color:var(--text);margin-bottom:.25rem;}
.contact-done a{color:var(--text);}
/* Without JavaScript the server answers a post with a redirect to one of these. */
.contact-done.shown,#contact-sent:target,#contact-failed:target,#contact-later:target{display:block;}
#contact-sent:target ~ .contact-form{display:none;}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:3rem 3.5rem;margin-top:calc(var(--gap-chapter) * .5);}
.foot{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));}
.foot h4{margin:0 0 .8rem;font-size:.85rem;font-weight:600;color:var(--faint);}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem;}
.foot a{color:var(--dim);text-decoration:none;font-size:.94rem;transition:color .2s var(--ease);}
.foot a:hover{color:var(--text);}
.foot-note{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:var(--faint);font-size:.87rem;
}

/* ── Reveal ──────────────────────────────────────────────────────────────────
   Scroll-driven, no JavaScript. Two rules, both learned the hard way:

   It lives inside @supports, so a browser without scroll timelines gets the
   finished page rather than one waiting for a class that never arrives.

   And it animates TRANSFORM ONLY — never opacity. A scroll timeline holds its
   from-state for anything the viewport has not reached, so fading in from zero
   means every renderer that never scrolls (a crawler, print-to-PDF, a headless
   screenshot, a link-preview service) captures the page with its headings at
   40% and its sections half-gone. Caught exactly that way. A 22px slide reads as
   motion to someone scrolling and as nothing at all to someone who is not. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{
      animation:rise both linear;
      animation-timeline:view();
      animation-range:entry 6% cover 24%;
      will-change:transform;
    }
    @keyframes rise{
      from{transform:translateY(22px);}
      to{transform:none;}
    }
  }
}