/* anora.help · стили лендинга и документных страниц.
   Палитра (контраст по WCAG): paper #F6F6F9 · ink #17141F (16.8:1) · ink-2 #4A4658 (8.4:1) ·
   ink-3 #676375 (5.4:1) · violet-ink #5A3BB5 (7.1:1) · gold/violet/orange — только декор. */

/* Шрифты: самохостинг (OFL), подмножества cyrillic + latin */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 600;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 600;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}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/PlayfairDisplay-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/PlayfairDisplay-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}

:root{
  --paper: oklch(97.4% 0.004 286);      /* #F6F6F9 */
  --sheet: oklch(100% 0 0);             /* #FFFFFF */
  --ink: oklch(20% 0.022 297);          /* #17141F */
  --ink-2: oklch(40.5% 0.030 295);      /* #4A4658 */
  --ink-3: oklch(51% 0.029 296);        /* #676375 */
  --edge: oklch(63.7% 0.028 295);       /* #8C889B */
  --line: oklch(85% 0.022 297);         /* #CFCBDB */
  --violet: oklch(74% 0.155 298);       /* #B793FF */
  --violet-ink: oklch(46.1% 0.182 289); /* #5A3BB5 */
  --violet-wash: oklch(94.7% 0.026 298);/* #EFEAFD */
  --gold: oklch(78.9% 0.162 84);        /* #EBAF02 */

  --f-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-card: 16px; --r-ctl: 12px;
  --shadow-1: 0 1px 2px oklch(20% 0.022 297 / .06), 0 4px 8px -4px oklch(20% 0.022 297 / .08);
  --shadow-3: 0 4px 8px -4px oklch(20% 0.022 297 / .12), 0 24px 48px -16px oklch(20% 0.022 297 / .28);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --wrap: 1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--violet-ink);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--violet-ink);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:min(var(--wrap), 100% - 2*var(--s4));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.measure{max-inline-size:66ch}
.defs{position:absolute}
.mt2{margin-top:var(--s2)}

/* ---------- заглушки реквизитов ---------- */
.ph{display:inline-block;font:600 12px/1.5 var(--f-body);letter-spacing:.04em;color:var(--ink-2);
  background:var(--paper);border:1px dashed var(--edge);border-radius:4px;padding:0 var(--s1);vertical-align:1px;white-space:nowrap}

/* ---------- шапка ---------- */
.top{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;min-height:44px}
.brand__mark{width:32px;height:30px}
.brand__word{height:20px;width:auto}
.nav{display:none;gap:var(--s5)}
.nav a{color:var(--ink-2);text-decoration:none;font-size:14px;line-height:44px}

/* ---------- первый экран ---------- */
.hero{overflow-x:clip;padding-bottom:var(--s8)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.hero__copy{padding-top:var(--s4)}
.eyebrow{display:flex;align-items:center;gap:var(--s2);font-size:14px;line-height:1.4;color:var(--ink-2)}
.eyebrow svg{width:12px;height:12px;flex:none}
h1{font:400 36px/1.08 var(--f-display);letter-spacing:-.01em;margin-top:var(--s3);text-wrap:balance}
.lead{margin-top:var(--s3);font-size:16px;line-height:1.5;color:var(--ink-2);max-inline-size:44ch}
.ai{margin-top:var(--s4);font-size:16px;line-height:1.5;color:var(--ink);background:var(--violet-wash);
  border-radius:var(--r-ctl);padding:var(--s3) var(--s4);max-inline-size:52ch}

/* бейджи сторов: оба — SVG фиксированной ширины, текст внутри, переносов нет.
   App Store 124×40 → 149×48; Google Play 135×40 → 162×48; ряд 149+12+162 = 323 px < 343 px на экране 375 */
.stores{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.badge{position:relative;display:block;height:48px;border-radius:8px;flex:none}
.badge svg{height:48px;width:auto}
.badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sheet);opacity:0;transition:opacity .15s var(--ease-out)}
.badge:active{transform:scale(.97)}

.under{margin-top:var(--s3);font-size:14px;line-height:1.5;color:var(--ink-3);max-inline-size:52ch}

/* соцсети: иконка + имя, цель нажатия 44 px */
.social{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s2)}
.social a{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--ink);font-weight:600;font-size:16px;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.social svg{width:20px;height:20px;flex:none;color:var(--ink-2)}
.social a:active{transform:scale(.97)}
.social__t{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-3);font-size:14px;margin-right:var(--s1)}

/* ---------- signature: карта неба ---------- */
/* на мобильном круг ровно в ширину экрана (wrap = 100vw − 32px, отсюда отрицательные поля), цифры домов не срезаются */
.sky{position:relative;container-type:inline-size;width:min(480px,100vw);aspect-ratio:1;margin-inline:calc(50% - min(240px,50vw))}
.sky__chart{position:absolute;inset:0;width:100%;height:100%}
.sky__num{font:400 12px/1 var(--f-body);fill:var(--ink-3);letter-spacing:.04em}
.phone{position:absolute;left:50%;top:50%;width:40cqi;transform:translate(-50%,-50%);
  background:#0E0D12;border-radius:6.6cqi;padding:1.3cqi;box-shadow:var(--shadow-3)}
.phone__screen{position:relative;border-radius:5.4cqi;overflow:hidden;aspect-ratio:390/844;background:#1A1A1A}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone__tabs{position:absolute;left:0;right:0;bottom:0;height:calc(100% * 80 / 844);overflow:hidden}
.phone__tabs img{width:100%;height:100%;object-fit:cover;object-position:bottom}
.phone__island{position:absolute;top:1.4%;left:50%;width:30%;height:3.4%;transform:translateX(-50%);background:#000;border-radius:999px}
.card{position:absolute;left:12cqi;top:53cqi;width:21cqi;transform:rotate(-11deg);border-radius:1.6cqi;
  border:.5cqi solid var(--sheet);box-shadow:var(--shadow-3);background:var(--violet)}
.card img{border-radius:1.1cqi;width:100%;height:auto}

/* ---------- секции ---------- */
.sec{padding-block:var(--s8)}
.sec h2.h{font:400 30px/1.15 var(--f-display);letter-spacing:-.005em;text-wrap:balance;max-inline-size:22ch}
.sec p{color:var(--ink-2)}
.body{font-size:16px;line-height:1.65}

/* «душа» — элементы с натуры из приложения */
.feat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.moonfig{display:block;flex:none;width:112px;height:auto;margin-right:var(--s2)}
.mood,.feat__list .mood{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.mood i{width:14px;height:14px;border-radius:50%;flex:none}
.mood i.is-on{width:20px;height:20px;box-shadow:0 0 0 2px var(--sheet),0 0 0 3px var(--ink)}
.mood .m1{background:#7070E7}.mood .m2{background:#C4A6FF}.mood .m3{background:#697A21}.mood .m4{background:#EBAF02}.mood .m5{background:#DF651F}
.mood small{margin-left:var(--s1);font-size:12px;line-height:1;color:var(--ink-3)}
.how__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.fan{position:relative;flex:none;width:96px;height:96px;margin-right:var(--s2)}
.fan svg{position:absolute;left:0;bottom:0;width:66px;height:80px;transform-origin:50% 100%}
.fan svg:nth-child(1){transform:rotate(-22deg) translateX(-10px)}
.fan svg:nth-child(2){transform:rotate(-4deg)}
.fan svg:nth-child(3){transform:rotate(14deg) translateX(10px)}

/* белые панели: «Ответ про вас», «Соцсети» */
.prog{background:var(--sheet)}
.prog__grid{display:grid;gap:var(--s6)}
.prog__intro{margin-top:var(--s4)}
.facts{display:grid;gap:0}
.facts li{padding-block:var(--s4);border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{display:block;font-weight:600;color:var(--ink)}
.facts span{color:var(--ink-2)}
.facts .ph{margin-left:var(--s2)}
.prog .quote{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--gold);font:400 24px/1.35 var(--f-display);color:var(--ink);max-inline-size:30ch}

/* как это работает */
.steps{margin-top:var(--s6);display:grid;gap:var(--s5);counter-reset:st;position:relative}
.steps li{position:relative;padding-left:var(--s7)}
.steps li::before{counter-increment:st;content:counter(st, upper-roman);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border:1px solid var(--edge);border-radius:50%;display:grid;place-items:center;
  font:400 14px/1 var(--f-display);color:var(--ink);background:var(--paper)}
.steps li:last-child::before{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.steps::before{content:"";position:absolute;left:16px;top:16px;bottom:16px;width:1px;background:var(--line)}
.steps b{display:block;font-weight:600;font-size:18px;line-height:1.35;color:var(--ink)}
.steps span{display:block;margin-top:var(--s1);color:var(--ink-2)}

/* что умеет */
.feat__grid{display:grid;gap:var(--s7);align-items:center}
.shot{margin:0;justify-self:center;width:min(100%, 320px);order:2}
.shot__frame{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-3);background:#1A1A1A;aspect-ratio:375/500}
.shot__frame img{width:100%;height:100%;object-fit:cover;object-position:bottom}
.shot figcaption{margin-top:var(--s3);font-size:14px;color:var(--ink-3);text-align:center}
.feat__list{margin-top:var(--s6);display:grid;gap:var(--s5)}
.feat__list li{display:grid;grid-template-columns:32px 1fr;gap:var(--s4);align-items:start}
.feat__list svg{width:32px;height:32px;color:var(--ink)}
.feat__list b{display:block;font-weight:600;font-size:18px;line-height:1.35;color:var(--ink)}
.feat__list span{display:block;margin-top:var(--s1);color:var(--ink-2)}

/* главный блок: тезис + три числа + фото трио (тёмный кадр на белой панели) */
.guides{background:var(--sheet)}
.wis{display:grid;gap:var(--s5);grid-template-areas:"head" "photo" "nums"}
.wis__head{grid-area:head}
.wis__p{margin-top:var(--s4);max-inline-size:56ch}
.nums{grid-area:nums;display:grid;gap:var(--s4)}
.nums li{padding-top:var(--s3);border-top:1px solid var(--gold)}
.nums b{display:block;font:400 36px/1.05 var(--f-display);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.nums span{display:block;margin-top:var(--s2);color:var(--ink-2);max-inline-size:28ch}
.trio{grid-area:photo;position:relative;margin:0;aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden;
  background:#15121A;box-shadow:var(--shadow-3)}
.trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.trio__tag{position:absolute;left:var(--s4);bottom:var(--s4);display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 var(--f-body);letter-spacing:.04em;color:var(--ink);background:var(--sheet);border-radius:999px;padding:7px 10px}
.trio__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ответ про вас */
.one{margin-top:var(--s5);padding-block:var(--s4);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.one b{display:block;font-weight:600;color:var(--ink)}
.one span{color:var(--ink-2)}
.small{margin-top:var(--s4);font-size:14px;line-height:1.5;color:var(--ink-3)}
.quote--top{margin-top:0!important}

/* повтор бейджей после «Как начать» */
.how__stores{margin-top:var(--s7)}

/* соцсети — три карточки */
.socs{margin-top:var(--s6);display:grid;gap:var(--s3)}
.socs a{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);align-items:center;min-height:72px;padding:var(--s4);
  background:var(--paper);border-radius:var(--r-card);color:var(--ink);text-decoration:none;border:1px solid transparent}
.socs svg{width:28px;height:28px;color:var(--ink);justify-self:center}
.socs b{display:block;font-weight:600;font-size:18px;line-height:1.3;color:var(--ink)}
.socs span{display:block;margin-top:2px;color:var(--ink-2);font-size:14px;line-height:1.5}
.socs a:active{transform:scale(.98)}

/* кто мы — белая панель */
.sec.who{padding-block:var(--s7)}
.who__grid{margin-top:var(--s6);display:grid;gap:var(--s6)}
.who h3{font:600 16px/1.4 var(--f-body);color:var(--ink)}
.who p,.who li{color:var(--ink-2)}
.who p+p,.who h3+p,.who h3+ul{margin-top:var(--s2)}
.who p+h3,.who ul+h3{margin-top:var(--s5)}
.who ul{display:grid;gap:var(--s1)}
.who li{padding-left:var(--s4);position:relative}
.who li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--ink-3)}
.mail{display:inline-flex;align-items:center;min-height:44px}

/* подвал */
.foot{background:var(--sheet);border-top:1px solid var(--line);padding-block:var(--s7);font-size:14px;line-height:1.6;color:var(--ink-3)}
.foot__legal{color:var(--ink-2);max-inline-size:66ch}
.foot__links{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.foot__links a{color:var(--ink);line-height:44px}
.foot__biz{margin-top:var(--s4);font-size:12px;line-height:1.5;color:var(--ink-3)}
.foot__biz .ph{font-size:12px;color:var(--ink-3)}
.foot__bottom{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.foot__bottom .brand__word{height:16px}

/* ---------- документные страницы: /privacy, /terms, /support, 404 ---------- */
.doc{padding-block:var(--s6) var(--s8)}
.doc__head{max-inline-size:66ch}
.doc h1{font:400 32px/1.15 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.doc__meta{margin-top:var(--s3);font-size:14px;color:var(--ink-3)}
.doc__lang{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:0 var(--s5);font-size:14px}
.doc__lang a{line-height:44px}
.doc article{margin-top:var(--s6);max-inline-size:66ch}
.doc article+article{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line)}
.doc h2{font:400 26px/1.2 var(--f-display);margin-top:var(--s7);text-wrap:balance}
.doc h3{font:600 18px/1.35 var(--f-body);margin-top:var(--s6)}
.doc h2+h3{margin-top:var(--s4)}
.doc p,.doc li{color:var(--ink-2);font-size:16px;line-height:1.65}
.doc p{margin-top:var(--s3)}
.doc h2+p,.doc h3+p{margin-top:var(--s2)}
.doc p b,.doc li b{color:var(--ink);font-weight:600}
.doc ul,.doc ol{margin-top:var(--s3);display:grid;gap:var(--s2)}
.doc ul li{padding-left:var(--s4);position:relative}
.doc ul li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--ink-3)}
.doc ol{list-style:decimal;padding-left:var(--s5)}
.doc .table{margin-top:var(--s4);overflow-x:auto}
.doc table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:var(--s3) var(--s3) var(--s3) 0;border-top:1px solid var(--line);color:var(--ink-2)}
.doc th{color:var(--ink);font-weight:600}
.doc tr:last-child td{border-bottom:1px solid var(--line)}
.doc .faq dt{font-weight:600;color:var(--ink);margin-top:var(--s5);font-size:17px;line-height:1.4}
.doc .faq dd{margin:var(--s2) 0 0;color:var(--ink-2);line-height:1.65}
.doc .note{margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--violet-wash);border-radius:var(--r-ctl);color:var(--ink)}
.doc .req{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--gold);font-size:14px;color:var(--ink-3)}
.doc .req .ph{font-size:12px}
.nf{padding-block:var(--s8);text-align:center}
.nf h1{font:400 clamp(36px,8vw,60px)/1.1 var(--f-display)}
.nf p{margin-top:var(--s4);color:var(--ink-2)}
.nf a.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s5);margin-top:var(--s5);border-radius:var(--r-ctl);
  background:var(--ink);color:var(--sheet);text-decoration:none;font-weight:600}
.nf .sky{margin-top:var(--s6);margin-inline:auto;width:min(320px,80vw)}

/* ховеры — только там, где есть мышь */
@media (hover:hover){
  .badge:hover::after{opacity:.1}
  .social a:hover{text-decoration-color:var(--ink);color:var(--violet-ink)}
  .social a:hover svg{color:var(--violet-ink)}
  .socs a:hover{border-color:var(--line);color:var(--violet-ink)}
  .socs a:hover svg{color:var(--violet-ink)}
  .nav a:hover,.foot__links a:hover{color:var(--violet-ink)}
}

/* ---------- планшет и десктоп ---------- */
@media (min-width: 720px){
  .doc h1{font-size:44px}
  .doc h2{font-size:30px}
  .doc p,.doc li{font-size:17px}
  .wrap{width:min(var(--wrap), 100% - 2*var(--s7))}
  .nav{display:flex}
  .top{height:80px}
  h1{font-size:48px}
  .lead,.ai{font-size:18px}
  .sec{padding-block:calc(var(--s8) * 2) var(--s8)}
  .sec h2.h{font-size:36px}
  .prog .quote{font-size:30px}
  .body,.sec p,.facts li,.steps span,.feat__list span,.one{font-size:18px;line-height:1.6}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .steps li{padding-left:0;padding-top:var(--s7)}
  .steps li::before{top:0}
  .steps::before{left:16px;right:16px;top:16px;bottom:auto;width:auto;height:1px}
  .nums{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .nums b{font-size:48px}
  .nums span{font-size:16px}
  .socs{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .sec.who{padding-block:var(--s8)}
  .who__grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 1024px){
  h1{font-size:clamp(48px, 4.7vw, 60px)}
  .hero{padding-top:var(--s5)}
  .hero__grid{grid-template-columns:minmax(0,1fr) 440px;align-items:center;gap:var(--s7)}
  .hero__copy{padding-top:0}
  .sky{width:440px;margin-inline:0}
  .prog__grid{grid-template-columns:5fr 6fr;gap:var(--s8)}
  .feat__grid{grid-template-columns:5fr 6fr;gap:var(--s8)}
  .shot{width:360px;order:0}
  .moonfig{width:168px}
  .fan{width:160px;height:150px}
  .fan svg{width:104px;height:126px}
  .wis{grid-template-columns:6fr 5fr;grid-template-areas:"head photo" "nums photo";column-gap:var(--s8);row-gap:var(--s6);align-items:start}
  .trio{align-self:center}
  .wis .h{font-size:48px;line-height:1.1;max-inline-size:16ch}
  .nums{grid-template-columns:1fr;gap:var(--s5);align-self:start}
  .nums b{font-size:60px}
  .nums span{max-inline-size:34ch}
}

@media (min-width: 1200px){
  .hero__grid{grid-template-columns:minmax(0,1fr) 560px}
  .sky{width:560px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .badge:active,.social a:active,.socs a:active{transform:none}
}