/* The community's public page: Russian at /, English at /en. The colour tokens are the app's
   (web/index.html), so the page and the app read as one product. No web fonts and nothing
   from other hosts: the vhost's CSP allows only this origin.

   D-58: every element is centered, on a phone and on a desktop (Alexander, 01.10.2026: «all
   elements on the page align centrally»). One rule does it, `.wrap{text-align:center}`; the
   flex rows (the switch, the 400+ line, the button rows) center with justify-content, and text
   blocks keep a readable measure with max-width and margin:0 auto. */
:root{--bg:#0f1115;--card:#171a21;--fg:#e9ecf1;--dim:#9aa3b2;--line:#252a34;--accent:#3b82f6;
      --link:#6ea2f8;--btn:#2563eb;--r:14px;--measure:34em}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f7f9;--card:#fff;--fg:#12151a;--dim:#525b69;--line:#e1e5eb;--link:#1d5fd6}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;hanging-punctuation:first}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;
     font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:760px;margin:0 auto;padding:0 16px;text-align:center}

.top{display:flex;justify-content:center;padding-top:20px}
.top a{font-size:14px;color:var(--dim);border:1px solid var(--line);border-radius:999px;
       padding:6px 16px}
.top a:hover{color:var(--fg);text-decoration:none;border-color:var(--dim)}

.hero{padding:48px 0 12px}
h1{font-size:clamp(34px,7.5vw,56px);line-height:1.06;letter-spacing:-.02em;margin:0 auto 16px;
   font-weight:700;max-width:12em;text-wrap:balance}
.lead{font-size:clamp(18px,2.6vw,21px);color:var(--dim);margin:0 auto 32px;max-width:28em;
      text-wrap:balance}
.stat{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
      margin:0 auto 32px}
.stat b{font-size:clamp(42px,8vw,60px);line-height:1;color:var(--accent);font-weight:700;
        letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim)}

.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
     padding:0 26px;border-radius:var(--r);background:var(--btn);color:#fff;font-weight:600;
     text-align:center;border:1px solid transparent;transition:filter .15s}
.btn:hover{text-decoration:none;filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r)}
.btn.ghost{background:var(--card);color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--dim);filter:none}
@media (max-width:420px){.btns .btn{flex:1 1 100%}}

section{padding:56px 0 8px}
h2{font-size:clamp(24px,4.2vw,32px);line-height:1.2;margin:0 auto 20px;font-weight:700;
   letter-spacing:-.01em;max-width:20em;text-wrap:balance}
p{margin:0 auto 16px;max-width:var(--measure)}

/* Five cards: the chat leads across the full width and the other four sit two by two, so no
   width leaves one card alone on its row. */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.cards{grid-template-columns:1fr 1fr}
  .cards li:first-child{grid-column:1/-1}}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
          padding:22px 20px 20px}
.cards h3{font-size:18px;line-height:1.3;margin:0 auto 8px}
.cards p{margin:0 auto;color:var(--dim);font-size:15px;max-width:30em}

/* The criteria: a centered card, each check mark beside its own line of text. */
.crit{list-style:none;margin:0 auto 28px;padding:0;background:var(--card);max-width:32em;
      border:1px solid var(--line);border-radius:var(--r)}
.crit li{display:flex;justify-content:center;align-items:baseline;gap:12px;padding:14px 18px;
         border-bottom:1px solid var(--line)}
.crit li:last-child{border-bottom:0}
.crit li::before{content:"";flex:none;width:11px;height:6px;transform:translateY(-3px) rotate(-45deg);
     border-left:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.note{color:var(--dim);font-size:15px;max-width:30em;padding-top:14px;
      border-top:1px solid var(--line)}

footer.wrap{margin-top:64px;padding-bottom:40px}
.foot{padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:15px}
.foot p{margin:0 auto 6px}