/* ============ Mannalee — лендинг (эталон: docs/design/landing/landing.dc.html, утверждён 14.11.2026) ============
   Страница приложения: ни браузера, ни экрана «Домой», ни «Войти». Главная кнопка ведёт в /app, пока сайт жив;
   кнопки магазинов — заглушки до выхода приложений (адрес вписывается в одном месте, см. STORES в index.html и en.html).

   Три правила, на которых держится раскладка:
   1. Ритм задаёт разделитель .sep: у блоков своих вертикальных отступов нет, всё расстояние живёт в нём.
      Поэтому между блоками одинаково по устройству, а не по совпадению. Шагов два: обычный над витриной
      и короткий (.sep.low, --low) под ней (решение владельца 14.11, 7.17).
   2. Телефон считается от одной переменной --w: корпус, рамка, скругление, остров, строка состояния и полоска
      «домой» заданы долями ширины. Один набор правил на первый экран и на витрину.
   3. Золото — только зёрна манны (UX-27); тонкие линии — токен --hair (на светлой теме --line сливался с фоном).

   Ниже, отдельным разделом, — стили страниц документов (.doc): политика, условия, удаление данных. */

:root{
  /* светлая тема по умолчанию; --page чуть темнее --bg, чтобы экран телефона читался как экран */
  --bg:#F6F2E9; --page:#EDE7DA; --surface:#FFFDF8; --ink:#18221E; --muted:#54615A; --line:#E4DED0; --faint:#A6A9A2;
  --soft:#E5EFEA; --accent:#1E6B52; --btn:#1F604B; --onbtn:#FFFFFF; --seg-on:#FFFDF8;
  --grain-empty:rgba(30,107,82,.18); --gold-1:#F6DE9A; --gold-2:#D8B052; --gold-3:#B98E2E;
  --store-bg:#FFFDF8; --store-line:#DCD4C2; --store-fg:#18221E; --store-dim:#54615A;
  --hair:rgba(24,34,30,.2);
  --shadow:0 34px 70px -36px rgba(21,70,56,.5);
  /* на пергаменте чёрная тень кнопки затемняла фон под строкой «или» и роняла контраст ниже 4,5:1 */
  --btn-shadow:0 14px 26px -18px rgba(21,70,56,.45);
  --dev-body:linear-gradient(145deg,#C9C2B4 0%,#8E897E 38%,#BDB6A8 70%,#7C776D 100%);
  --home-ink:#18221E; --sbar-ink:#18221E;
  --r-lg:24px; --r-pill:999px;
  color-scheme:light;
}
/* тёмная тема (7.17): как у телефона, пока человек не выбрал тему кнопкой в шапке, а после выбора по выбору.
   Поэтому набор записан дважды: под тёмным телефоном без выбора «светлая» и под выбором «тёмная».
   Выбор хранится в localStorage "manna-lp-theme"; data-theme на <html> ставит скрипт в голове страницы до стилей, без мигания */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1411; --page:#090D0B; --surface:#15201B; --ink:#E8EDE9; --muted:#9DABA4; --line:#24332C; --faint:#647069;
    --soft:#1A2A23; --accent:#7FCBAE; --btn:#227259; --onbtn:#FFFFFF; --seg-on:#26372F;
    --grain-empty:rgba(127,203,174,.17);
    --store-bg:#15201B; --store-line:#2C3D35; --store-fg:#E8EDE9; --store-dim:#9DABA4;
    --hair:rgba(255,255,255,.16);
    --shadow:0 34px 70px -36px rgba(0,0,0,.85);
    --btn-shadow:0 14px 30px -14px rgba(0,0,0,.7);
    --dev-body:linear-gradient(145deg,#39443E 0%,#1B241F 38%,#2E3833 70%,#161D19 100%);
    --home-ink:#FFFFFF; --sbar-ink:#FFFFFF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1411; --page:#090D0B; --surface:#15201B; --ink:#E8EDE9; --muted:#9DABA4; --line:#24332C; --faint:#647069;
  --soft:#1A2A23; --accent:#7FCBAE; --btn:#227259; --onbtn:#FFFFFF; --seg-on:#26372F;
  --grain-empty:rgba(127,203,174,.17);
  --store-bg:#15201B; --store-line:#2C3D35; --store-fg:#E8EDE9; --store-dim:#9DABA4;
  --hair:rgba(255,255,255,.16);
  --shadow:0 34px 70px -36px rgba(0,0,0,.85);
  --btn-shadow:0 14px 30px -14px rgba(0,0,0,.7);
  --dev-body:linear-gradient(145deg,#39443E 0%,#1B241F 38%,#2E3833 70%,#161D19 100%);
  --home-ink:#FFFFFF; --sbar-ink:#FFFFFF;
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;background:var(--page);}
body{margin:0;background:var(--page);color:var(--ink);font-family:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;}
.go body{visibility:hidden;}   /* .go — уходим в /app, страницу не рисуем */
/* вошедший открыл «/?stay=1»: на кнопке вместо «Начать читать» — «Открыть приложение» */
.t-in,.signed .t-new{display:none;}
.signed .t-in{display:inline;}
h1,h2,h3,p,q{margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;}

/* ====================== ЛЕНДИНГ ====================== */
.lp{container-type:inline-size;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);}
.lp h1,.lp h2,.lp h3{font-family:'Literata',Georgia,serif;}
.lp h1,.lp h2{text-wrap:balance;}
.lp q{quotes:"\00AB" "\00BB";}
html[lang="en"] .lp q{quotes:"\201C" "\201D";}
.lp a:focus-visible,.lp button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px;}

/* шапка сайта: имя, круг темы и круг языка (как кнопка языка на экране входа в приложении) */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:max(18px, env(safe-area-inset-top)) 20px 18px;}
.brand{display:flex;align-items:center;gap:9px;font-family:'Literata',Georgia,serif;font-size:19px;font-weight:700;}
.lang{position:relative;}
.lang-b{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;}
.lang-b > span{width:34px;height:34px;border-radius:var(--r-pill);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--muted);}
.lang-menu{position:absolute;top:44px;right:0;z-index:9;min-width:152px;padding:6px;border-radius:14px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);display:none;}
.lang[data-open="1"] .lang-menu{display:block;}
.lang-menu a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;font-size:14px;color:var(--ink);}
.lang-menu a[aria-current="true"]{color:var(--accent);font-weight:600;}
/* круг темы рядом с кругом языка, тот же вид; значок показывает тему, в которую переключит: луна на светлой, солнце на тёмной.
   Без скрипта кнопка ничего не умеет, поэтому в разметке она hidden, а скрипт страницы её открывает */
.tools{display:flex;align-items:center;}
.theme-b[hidden]{display:none;}   /* display:flex у .lang-b иначе перебивает hidden */
.theme-b > span svg{display:block;}
.theme-b .i-sun{display:none;}
:root[data-theme="dark"] .theme-b .i-sun{display:block;}
:root[data-theme="dark"] .theme-b .i-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-b .i-sun{display:block;}
  :root:not([data-theme="light"]) .theme-b .i-moon{display:none;}
}

/* главное действие: кнопка, тонкий разделитель «или», две плашки магазинов одной ширины */
.go{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:344px;}
.go-btn{width:100%;height:58px;display:inline-flex;align-items:center;justify-content:center;border-radius:29px;background:var(--btn);color:var(--onbtn);
  font-size:17px;font-weight:600;box-shadow:var(--btn-shadow);transition:transform .25s cubic-bezier(.34,1.45,.64,1);}
.go-btn:active{transform:scale(.96);}
.or{display:flex;align-items:center;gap:12px;width:100%;font-size:13px;color:var(--muted);}   /* не --faint: на обеих темах он не держал 4,5:1 */
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair);}
.stores{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.store{height:54px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:13px;
  background:var(--store-bg);box-shadow:inset 0 0 0 1px var(--store-line);color:var(--store-fg);}
.store svg{flex:none;}
.store i{display:flex;flex-direction:column;line-height:1.16;font-style:normal;}
.store i small{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--store-dim);}
.store i b{font-size:16px;font-weight:600;letter-spacing:-.01em;}
@media (prefers-reduced-motion: reduce){.go-btn{transition:none;}.go-btn:active{transform:none;opacity:.8;}}

/* ---------- телефон: один набор правил для всех телефонов на странице ----------
   Пропорции iPhone: корпус = экран + рамка 2,5 %, скругление корпуса 15,4 % ширины,
   остров 25,4 % ширины, полоска «домой» 35,6 % ширины, и она делит нижний зазор пополам. */
.dev{position:relative;border-radius:calc(var(--w) * .154);padding:calc(var(--w) * .025);background:var(--dev-body);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.1);width:var(--w);}
.dev::before,.dev::after{content:"";position:absolute;border-radius:calc(var(--w) * .008);background:var(--dev-body);}
.dev::before{left:calc(var(--w) * -.007);top:calc(var(--w) * .352);width:calc(var(--w) * .008);height:calc(var(--w) * .207);
  box-shadow:0 calc(var(--w) * -.128) 0 0 var(--dev-body),0 calc(var(--w) * -.257) 0 0 var(--dev-body);}
.dev::after{right:calc(var(--w) * -.007);top:calc(var(--w) * .419);width:calc(var(--w) * .008);height:calc(var(--w) * .29);}
.screen{position:relative;border-radius:calc(var(--w) * .129);background:var(--bg);overflow:hidden;}
.island{position:absolute;top:calc(var(--w) * .031);left:50%;transform:translateX(-50%);
  width:calc(var(--w) * .279);height:calc(var(--w) * .081);border-radius:var(--r-pill);background:#000;z-index:5;}
.home{position:absolute;bottom:calc(var(--w) * .022);left:50%;transform:translateX(-50%);
  width:calc(var(--w) * .346);height:calc(var(--w) * .014);border-radius:var(--r-pill);background:var(--home-ink);opacity:.34;z-index:5;}
.sbar{position:absolute;top:0;left:0;right:0;height:calc(var(--w) * .145);z-index:4;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--w) * .073);color:var(--sbar-ink);font-size:calc(var(--w) * .039);font-weight:600;font-variant-numeric:tabular-nums;}
.sbar .ic{display:flex;align-items:center;gap:calc(var(--w) * .014);}
.sbar svg{display:block;}

/* первый экран */
.first{display:flex;flex-direction:column;align-items:center;gap:30px;padding:6px 16px 0;}
.dev-first{--w:358px;max-width:100%;}
.dev-first .screen{min-height:694px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:58px 22px 21px;text-align:center;}
.applogo{display:flex;align-items:center;gap:8px;font-family:'Literata',Georgia,serif;font-size:17px;font-weight:700;margin-top:auto;color:var(--ink);}
.screen h1{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.16;}
.ringwrap{position:relative;width:218px;height:218px;margin-top:2px;touch-action:none;cursor:grab;}
.ringwrap:active{cursor:grabbing;}
.ringwrap svg.ring{display:block;width:100%;height:100%;overflow:visible;}
.ring .cut{transition:y .26s linear,height .26s linear;}
/* сияние: золото проходит по зёрнам волной и зовёт провести по кругу.
   Включается только после того, как наполнение закончилось (решение владельца 14.11: иначе гонка), гаснет от касания. */
.ring .gl{opacity:0;filter:drop-shadow(0 0 5px rgba(216,176,82,.55));}
.ringwrap[data-ready="1"] .ring .gl{animation:shimmer 2.8s ease-in-out infinite;}
@keyframes shimmer{0%,88%,100%{opacity:0;}5%{opacity:.4;}12%{opacity:0;}}
.ringwrap[data-touched="1"] .gl{animation:none;opacity:0;}
@media (prefers-reduced-motion: reduce){
  .ring .cut{transition:none;}
  .ring .gl{animation:none;opacity:0;}
}
.rv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none;}
.rv b{font-family:'Literata',Georgia,serif;font-size:46px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}
.rv span{font-size:13px;color:var(--muted);}
.rline{font-size:16px;line-height:1.45;min-height:46px;max-width:30ch;}
.rhint{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);transition:opacity .4s ease;}
.ringwrap[data-touched="1"] ~ .rhint{opacity:0;}
.tabbar{margin-top:auto;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:600;color:var(--muted);}
.tab.on{background:var(--seg-on);color:var(--accent);}
.tab svg{display:block;}

/* разделитель блоков: тонкая линия, гаснущая к краям, и одно зерно посередине. Он же задаёт весь вертикальный ритм. */
.sep{display:flex;align-items:center;justify-content:center;gap:16px;padding-block:36px;}
/* под витриной шаг короче, и видимые зазоры равны ему: у текста на краях этих зазоров (подписи витрины, подпись года,
   «Соберите свой путь») пустые поля строки обрезаны до букв (text-box), иначе межстрочный воздух добавлял к шагу 3–12 px.
   Тот же шаг от плашек магазинов до ссылок внизу: у ссылок зона нажатия 44 px, поэтому их поле меньше на воздух над буквами */
.lp{--low:24px;}
.sep.low{padding-block:var(--low);}
.shot span{text-box:trim-end cap alphabetic;padding-bottom:.1em;}   /* середина: у русских подписей хвосты букв (у, д, р) ниже строки на 0,2 em, у английских последняя строка без хвостов */
.ycap,.end h2{text-box:trim-start cap alphabetic;}
.end h2{padding-top:.08em;}   /* буквы Literata (й, С, S) поднимаются над расчётной высотой заглавной на 0,08 em; замер по пикселям */
.sep i{display:block;}
.sep .l{width:min(104px,20cqw);height:1px;background:linear-gradient(90deg,transparent,var(--hair));}
.sep .l:last-child{background:linear-gradient(90deg,var(--hair),transparent);}
.sep .g{width:7px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));opacity:.6;}

/* откуда имя */
.why{padding:0 20px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;}
.grains{display:flex;gap:6px;}
.grains i{width:10px;height:15px;border-radius:50%;background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));}
.why h2{font-size:25px;font-weight:700;}
.why p{font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch;}
.why p b{color:var(--ink);font-weight:600;}
.quote{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:12px;}
.quote q{font-family:'Literata',Georgia,serif;font-size:21px;line-height:1.45;font-style:italic;max-width:26ch;color:var(--ink);}
.quote em{font-style:normal;font-size:13px;font-weight:600;color:var(--accent);}

/* витрина: настоящие снимки экранов, светлые в светлой теме (public/screens/, tools/landing-shots.mjs) */
.tour{padding:0;}
.tour h2{text-align:center;font-size:25px;font-weight:700;padding:0 20px 26px;}
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 26px;margin-bottom:-26px;scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.shot{flex:none;width:228px;scroll-snap-align:center;display:flex;flex-direction:column;gap:16px;}
.shot .dev{--w:228px;}
/* снимок целиком, без обрезки (7.17): экран телефона ровно в пропорциях картинки 440 × 956. Панель вкладок на снимках
   в 21 pt от низа, как в приложении; полоска «домой» стоит посередине этого зазора (5,4 % ширины): над ней и под ней по 2 % */
.shot .screen{aspect-ratio:440 / 956;}
.shot .screen img{width:100%;height:auto;}
.shot .home{bottom:calc(var(--w) * .02);}
.shot b{font-size:16px;font-weight:600;text-align:center;}
.shot span{font-size:14px;line-height:1.5;color:var(--muted);text-align:center;}

/* год: 52 недели по 7 дней, ровный прямоугольник 26 × 14 */
.year{padding:0 20px;display:flex;flex-direction:column;gap:32px;}
.ygrid{display:flex;flex-direction:column;gap:16px;}
.ycap{font-size:13px;color:var(--muted);}   /* не --faint: на обеих темах он не держал 4,5:1 */
.grid{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:4px;}
.grid i{aspect-ratio:9/13;border-radius:50%;background:var(--grain-empty);}
.grid.anim i{transition:background .4s ease,box-shadow .4s ease;}
.grid i.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));}
.grid i.miss{background:transparent;box-shadow:inset 0 0 0 1.4px var(--line);}
.ycol{display:flex;flex-direction:column;gap:20px;}
.yline{font-size:16px;line-height:1.55;color:var(--muted);max-width:52ch;}
.yline b{color:var(--ink);font-weight:600;}
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.s{padding:16px 18px;border-radius:18px;background:var(--soft);display:flex;flex-direction:column;gap:2px;}
.s b{font-family:'Literata',Georgia,serif;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;}
.s span{font-size:13px;line-height:1.35;color:var(--muted);}

/* конец */
.end{display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 20px;text-align:center;}
.end h2{font-size:27px;font-weight:700;max-width:18ch;}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:calc(var(--low) - 17px) 20px 34px;font-size:13px;color:var(--muted);}
.legal a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;}

@container (min-width:900px){
  .bar{padding:26px 56px;max-width:1280px;margin:0 auto;}
  .first{padding-top:18px;gap:38px;}
  .dev-first{--w:404px;}
  .dev-first .screen{min-height:808px;padding:64px 28px 23px;gap:17px;}
  .screen h1{font-size:31px;}
  .applogo{font-size:19px;}
  .ringwrap{width:258px;height:258px;}
  .rv b{font-size:54px;}
  .rline{font-size:17px;}
  .go{max-width:392px;}
  .go-btn{height:62px;font-size:18px;}
  .store{height:58px;}
  .sep{padding-block:52px;}
  .lp > *{--low:32px;}   /* .lp сама контейнер: правило внутри @container действует только на её детей */
  .why{gap:24px;}
  .why h2{font-size:32px;}
  .why p{font-size:18px;}
  .quote q{font-size:30px;max-width:30ch;}
  .tour h2{font-size:32px;padding-bottom:34px;}
  .strip{justify-content:center;overflow:visible;padding:0 56px;margin-bottom:0;gap:28px;}
  /* четыре карточки в ряд внутри окна и на 900–1011 px (аудит 8 P2-29): ширина от окна, не больше 232; телефон считается от --w */
  .shot{--sw:min(232px,calc((100cqw - 196px) / 4));width:var(--sw);}
  .shot .dev{--w:var(--sw);}
  .year{max-width:1140px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:60px;align-items:center;}
  .grid{gap:6px;}
  .yline{font-size:18px;}
  .end{gap:30px;}
  .end h2{font-size:38px;}
  .legal{padding-top:calc(var(--low) - 17px);}
}

/* ---------- страницы документов: политика, условия, удаление данных ----------
   Без скриптов и без styles.css: те же токены, спокойное чтение в одну колонку до 640 px. */
body.docpage{background:var(--bg);}
.doc{max-width:640px;margin:0 auto;
  padding:0 calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:max(8px, env(safe-area-inset-top));min-height:60px;}
.doc-brand{display:inline-flex;align-items:center;min-height:44px;font-family:'Literata',Georgia,serif;font-size:17px;font-weight:600;}
.doc-lang{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.doc h1{margin:20px 0 6px;font-family:'Literata',Georgia,serif;font-size:30px;line-height:1.15;letter-spacing:-.01em;}
.doc-upd{font-size:13px;color:var(--muted);}
.doc h2{margin:28px 0 8px;font-family:'Literata',Georgia,serif;font-size:19px;font-weight:600;line-height:1.3;}
.doc p,.doc li{font-size:16px;line-height:1.55;}
.doc p+p{margin-top:10px;}
.doc ul{margin:8px 0 0;padding-left:20px;}
.doc li+li{margin-top:6px;}
.doc a{text-decoration:underline;text-underline-offset:3px;}
.doc a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;}
.doc-more{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;}
@media (min-width: 900px){
  .doc{padding-bottom:60px;}
  .doc h1{font-size:36px;margin-top:32px;}
}