/* Лендинг ДелайКассу. Начало — шрифты, токены и основа; середина — site.css макета
   (design/mockups/landing/src/site.css); конец — иконки и то, чего в макете не было. */

/* Шрифты — свои подмножества (landing/tools/make_assets.py): кириллица, ASCII и знак ₽ — отдельные файлы,
   браузер скачивает только те, символы которых есть на странице. */
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/onest-400-cyrillic.51adb4c8c5.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;font-display:swap;src:url(/assets/fonts/onest-400-latin.885538c92a.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/onest-400-rub.da393a6824.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/onest-500-cyrillic.a345dcbda6.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:500;font-display:swap;src:url(/assets/fonts/onest-500-latin.a2fe17cfb3.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/onest-500-rub.59ce8b199c.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/onest-600-cyrillic.73984d20ad.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:600;font-display:swap;src:url(/assets/fonts/onest-600-latin.e965802cac.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/onest-600-rub.61e7816e1c.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/onest-700-cyrillic.0fcb8fa256.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:700;font-display:swap;src:url(/assets/fonts/onest-700-latin.30adc9407b.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/onest-700-rub.71ae6e556f.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/unbounded-600-cyrillic.59a9e6e092.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/unbounded-600-latin.e62dd10777.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/unbounded-600-rub.668dd8e16b.woff2) format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/unbounded-700-cyrillic.fdc2a84527.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/unbounded-700-latin.377d6b142c.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00BB,U+00D7,U+2010-2027,U+2030-203A,U+2192,U+2212,U+2248}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/unbounded-700-rub.cb06133bb3.woff2) format("woff2");unicode-range:U+20BD}

/* Токены — как в приложении (app/src/styles/tokens.css) и в макете. Тёмная тема — по prefers-color-scheme,
   значения из утверждённого макета design/mockups/dark (src/tokens.css, src/landing.css), блок в конце файла.
   --muted в светлой поднят с #6c7c72 до #5f6f66 (макет тёмной темы): было 3,9:1 на фоне страницы, стало 4,7:1. */
:root{
  --app:#eef3ee; --card:#ffffff; --ink:#10221a; --muted:#5f6f66; --line:#e2e9e3; --chip:#eaf0eb;
  --forest:#0e3b2c; --forest-2:#165841; --forest-deep:#0a2d21; --forest-lit:#1b6a4d; --forest-ink:#cfe6d9;
  --coin:#ffc531; --coin-ink:#3a2700; --good:#17895a;
  --amber-bg:#fff4d6; --amber-line:#f3d98f; --amber-ink:#6b4a00;
  --gift-1:#fff3cf; --gift-2:#ffe4a3; --gift-ink:#7a5814;
  --bezel:#0a0f0d; --bezel-line:#2a332f;
  /* то, что в светлой было вписано в правила, — токены, чтобы тёмная их переопределила */
  --hero-1:var(--forest-lit); --hero-2:var(--forest); --hero-3:var(--forest-deep); --hero-edge:none;
  --accent:var(--forest-2);              /* зелёный текст на поверхностях: ссылки, номера оглавления */
  --sub-ink:#4f6158;                     /* подписи на тонированных карточках */
  --t-end:#ffffff; --t-end-i:#f9fbf9; --card-edge:none;
  --bank-plate:#fff; --bank-ink:var(--ink); --bank-edge:none;
  --offer-bg:#fff; --offer-sh:0 10px 22px -12px rgba(120,80,0,.45);
  --chat-bg:var(--forest); --chat-sh:0 12px 22px -12px rgba(14,59,44,.6);
  --e-sh:14,59,44;                       /* тень 3D-предметов (rgb), прозрачность — --sh у сцены */
  --toast-bg:var(--ink); --toast-ink:#fff; --toast-ic:#6fe0a8;
  --ph-line:#b9c7bd;
  --display:"Unbounded","Onest",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--app);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--app);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
.e{display:block;background:center/contain no-repeat}
@keyframes shine{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
.shiny{position:relative;overflow:hidden}
.shiny::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3.2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shiny::after{display:none}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--coin);outline-offset:3px}

/* ---------- сам лендинг: телефон по умолчанию, компьютер — от 900 px ---------- */
.site{position:relative;max-width:1280px;margin:0 auto;background:var(--app);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding:12px 12px 0;overflow-x:clip}
.site a{color:inherit;text-decoration:none;cursor:pointer}
.site svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes turn{to{--ang:360deg}}

/* плашка приглашения — как карточка-подарок в приложении */
.invite{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:center;background:linear-gradient(120deg,var(--gift-1),var(--gift-2));border-radius:22px;padding:14px 14px 14px 14px;margin-bottom:6px}
.inv-em{width:44px;height:44px;filter:drop-shadow(0 6px 8px var(--gift-sh,rgba(160,100,0,.25)))}
.inv-txt span{display:block;font-size:13px;color:var(--gift-ink);font-weight:500}
.inv-txt b{display:block;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.1em;line-height:1.2;color:var(--gift-code,var(--coin-ink))}
.inv-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;border:0;border-radius:14px;padding:11px 16px;background:var(--forest);color:#fff;font-family:var(--body);font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.inv-btn svg{width:17px;height:17px}
.inv-btn.done{background:var(--good)}
.inv-hint{grid-column:1/-1;margin:4px 2px 0;font-size:12.5px;line-height:1.45;color:var(--gift-ink)}

/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 6px 14px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand .e{width:30px;height:30px}
/* значок приложения (design/icon): скруглённый квадрат, как на телефоне */
.brand .i-logo{border-radius:24%;box-shadow:0 1px 3px rgba(var(--e-sh),.22)}
.nav{display:none}
.top-dl{display:inline-flex;align-items:center;gap:6px;background:var(--forest);color:#fff!important;border-radius:999px;padding:8px 14px 8px 12px;font-weight:700;font-size:13.5px}
.top-dl svg{width:16px;height:16px}

/* первый экран — тёмно-зелёный, как первый запуск приложения */
.hero{position:relative;z-index:0;border-radius:30px;background:radial-gradient(120% 80% at 70% 30%,var(--hero-1) 0%,var(--hero-2) 55%,var(--hero-3) 100%);box-shadow:var(--hero-edge);color:#fff;padding:26px 20px 0;display:flex;flex-direction:column;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 12px 5px 10px;font-size:12.5px;font-weight:600;color:var(--forest-ink)}
.chip i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.2)}
.hero h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.03em;margin:18px 0 0}
.hero h1 span{color:var(--coin)}
.lead{margin:14px 0 0;color:var(--forest-ink);font-size:15.5px;line-height:1.55}
.cta{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.dl{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--coin);color:var(--coin-ink)!important;border-radius:20px;padding:13px 22px;box-shadow:0 10px 24px -10px rgba(255,197,49,.65)}
.dl svg{width:24px;height:24px;stroke-width:2.4;flex:none}
.dl span{display:flex;flex-direction:column;line-height:1.2}
.dl b{font-size:17px;font-weight:700}
.dl small{font-size:12.5px;font-weight:600;opacity:.72;margin-top:2px;font-variant-numeric:tabular-nums}
.store-ic{width:38px;height:38px;border-radius:12px;background:var(--forest);display:grid;place-items:center;flex:none}
.store-ic svg{width:21px;height:21px;color:var(--coin);stroke-width:2.1}
.dl.apk{justify-content:flex-start;gap:14px;padding:12px 18px}
.dl.apk .store-ic{background:rgba(255,255,255,.1)}
.dl.apk .store-ic svg{color:#fff}
.dl.apk{background:rgba(255,255,255,.07);color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.dl.apk small{opacity:.7}
.how{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-weight:600;font-size:14.5px;color:var(--forest-ink)!important}
.how svg{width:16px;height:16px}
.fine{margin:14px 0 0;text-align:center;font-size:13px;color:#9cc2b0}

.hero-art{position:relative;height:510px;margin:24px -20px 0;flex:none}
.halo{position:absolute;left:50%;top:44%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,49,.34),transparent 62%)}
.dphone{position:absolute;left:50%;top:14px;margin-left:-90px;width:220px;height:470px;background:var(--bezel);border-radius:38px;padding:7px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),inset 0 0 0 1.5px var(--bezel-line);z-index:2}
.dscreen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:var(--app)}
.dscreen .e{width:100%;height:100%;background-size:cover;background-position:top center}
.punch{position:absolute;top:7px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--bezel)}
.art-bag{position:absolute;left:0;bottom:30px;width:100px;height:100px;z-index:3;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));transform:rotate(-6deg)}
.art-c1{position:absolute;left:18px;top:80px;width:50px;height:50px;transform:rotate(-18deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));z-index:1}
.art-c2{position:absolute;right:12px;top:300px;width:38px;height:38px;transform:rotate(22deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));z-index:3}
.art-note{position:absolute;right:10px;top:110px;width:42px;height:42px;transform:rotate(-10deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.3));z-index:1}

/* секции */
.sect{padding:44px 8px 0}
.sect-head h2{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.12;letter-spacing:-.025em;margin:0}
.sect-head p{margin:8px 0 0;color:var(--muted);font-size:15px}


/* установка */
.inst{background:var(--card);border-radius:26px;padding:4px 16px}
.inst summary::-webkit-details-marker{display:none}
.wide-only{display:none}
.chev{width:36px;height:36px;border-radius:50%;background:var(--chip);display:grid;place-items:center}
.chev svg{width:18px;height:18px}
.inst[open] .chev{transform:rotate(180deg)}
.dl-2{margin-top:12px;background:var(--forest);color:#fff!important;box-shadow:none}

/* подвал */
.foot{margin:44px -12px 0;padding:24px 20px 28px;border-top:1px solid var(--line);background:var(--card)}
.foot-row{display:flex;flex-direction:column;gap:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a{font-weight:600;font-size:14.5px;text-decoration:underline!important;text-decoration-color:var(--line)!important;text-underline-offset:4px}
.foot nav a.on{color:var(--accent)}
.op{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.op>span{white-space:nowrap}
.ph{display:inline-block;border:1px dashed var(--ph-line);border-radius:7px;padding:0 6px;line-height:1.45;color:var(--muted);background:var(--app)}

/* подсказка «скопировано» */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:8px;background:var(--toast-bg);color:var(--toast-ink);border-radius:14px;padding:11px 16px;font-weight:600;font-size:14px;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.toast svg{width:17px;height:17px;color:var(--toast-ic);stroke-width:2.6}

/* документ */
.doc{padding-top:12px}
.back-home{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:14px;color:var(--accent)!important}
.back-home svg{width:18px;height:18px}
.paper{background:var(--card);border-radius:26px;padding:24px 20px 28px;font-size:16px;line-height:1.65}
.crumb{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.paper h1{font-family:var(--display);font-weight:700;font-size:27px;line-height:1.12;letter-spacing:-.025em;margin:8px 0 0}
.sub{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.ed{margin:6px 0 0;color:var(--muted);font-size:13px}
.plate{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;margin:20px 0 0;background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:18px;padding:12px 14px;color:var(--amber-ink)}
.plate .e{width:36px;height:36px}
.plate b{display:block;font-size:14.5px;line-height:1.3}
.plate p{margin:2px 0 0;font-size:13px;line-height:1.4}
.toc{display:flex;flex-direction:column;margin:20px 0 6px;background:var(--app);border-radius:18px;padding:14px 16px}
.toc b{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
.toc a{display:flex;gap:10px;font-size:14.5px;line-height:1.35;padding:6px 0;font-weight:500}
.toc em{font-style:normal;font-family:var(--display);font-weight:600;font-size:12px;color:var(--accent);width:14px;padding-top:2px;flex:none}
.paper h2{display:flex;gap:10px;align-items:baseline;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.015em;margin:30px 0 0}
.paper h2 em{font-style:normal;color:var(--coin-ink);background:var(--coin);border-radius:8px;font-size:12px;width:22px;height:22px;display:inline-grid;place-items:center;flex:none;transform:translateY(-2px)}
.paper p{margin:10px 0 0}
.paper ul{margin:10px 0 0;padding-left:20px}
.paper li{margin:3px 0}
.paper li::marker{color:var(--accent)}
.opdl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:12px 0 0;font-size:15px}
.opdl dt{color:var(--muted)}
.opdl dd{margin:0}
.doc .foot{margin-top:28px}

/* ---------- компьютер ---------- */
@media (min-width:900px){
  .site{padding:16px 16px 0;font-size:16px}
  .invite{grid-template-columns:52px auto auto minmax(0,1fr);gap:0 22px;padding:16px 22px;margin-bottom:8px;border-radius:24px}
  .inv-em{width:52px;height:52px}
  .inv-txt span{font-size:14px}
  .inv-txt b{font-size:26px}
  .inv-btn{grid-column:auto;margin:0;padding:12px 20px;font-size:15px}
  .inv-hint{grid-column:auto;margin:0;font-size:14px;max-width:44ch;justify-self:end;text-align:right}

  .top{padding:10px 24px 18px}
  .brand{font-size:19px}
  .brand .e{width:34px;height:34px}
  .nav{display:flex;gap:30px;font-weight:600;font-size:14.5px;color:var(--muted);margin-left:auto;margin-right:12px}
  .top-dl{padding:10px 18px 10px 15px;font-size:14px}

  .hero{flex-direction:row;align-items:center;border-radius:36px;padding:0 0 0 64px;min-height:640px}
  .hero-copy{flex:0 1 640px;padding:64px 0}
  .chip{font-size:13px}
  .hero h1{font-size:50px;line-height:1.08;margin-top:24px}
  .lead{font-size:18.5px;max-width:31em;margin-top:20px}
  .cta{flex-direction:row;align-items:stretch;gap:14px;margin-top:34px}
  .dl{min-width:236px;justify-content:flex-start}
  .dl.apk{padding:13px 26px 13px 14px}
  .how{display:inline-flex;margin-top:20px}
  .dl b{font-size:18px}
  .fine{text-align:left;margin-top:10px;font-size:14px}
  .hero-art{flex:1 1 520px;height:640px;margin:0}
  .halo{width:520px;height:520px;margin:-260px 0 0 -260px;left:50%}
  .dphone{width:276px;height:596px;top:22px;margin-left:-138px;left:50%;border-radius:44px;padding:8px}
  .dscreen{border-radius:36px}
  .art-bag{left:-4px;bottom:56px;width:172px;height:172px}
  .art-c1{left:46px;top:110px;width:64px;height:64px}
  .art-c2{right:30px;top:360px;width:54px;height:54px}
  .art-note{right:22px;top:120px;width:68px;height:68px}

  .sect{padding:96px 48px 0}
  .sect-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
  .sect-head h2{font-size:40px}
  .sect-head p{margin:0 0 8px;font-size:16.5px;white-space:nowrap}


  .inst{padding:6px 28px;border-radius:30px}
  .wide-only{display:inline}
  .dl-2{display:none}

  .foot{margin:96px -16px 0;padding:36px 64px 40px}
  .foot-row{flex-direction:row;justify-content:space-between;align-items:center}
  .foot nav{gap:32px}
  .op{margin-top:18px;font-size:14px;gap:6px 20px}
}

/* Документ на компьютере: в макете только телефон; на всю ширину строки по 150 знаков — читать тяжело */
@media (min-width:900px){
  .doc main{max-width:840px;margin:0 auto}
  .doc .paper{padding:36px 48px 44px}
  .doc .paper h1{font-size:34px}
}

/* ---------- иллюстрации: утверждённый макет design/mockups/illustr ----------
   Шаги, «Почему можно доверять» и инструкция — цветные карточки со сценами из 2–4 предметов Fluent 3D,
   крупно и с выходом за край. В макете раскладка предметов была в style="--x:…", CSP сайта это запрещает —
   те же числа лежат здесь, по :nth-child внутри сцены. В макете граница — контейнер 700 px, здесь — 900 px. */
.t-leaf{--c1:#d3eedd;--c2:#eef8f1;--n:#a9d9bb}
.t-blue{--c1:#dfe5ff;--c2:#f1f3ff;--n:#b9c4f5}
.t-amber{--c1:#ffeab3;--c2:#fff8e6;--n:#f5cf6c}
.t-sky{--c1:#d6ecff;--c2:#f0f8ff;--n:#a9cff0}
.scene{position:absolute;pointer-events:none}
.scene::before{content:"";position:absolute;inset:6% 4% 2% 6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--glow,rgba(255,255,255,.95)) 0,transparent 66%)}
.scene .e{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(var(--w-px,14px)*.6) calc(var(--w-px,14px)) rgba(var(--e-sh),var(--sh,.22)))}
.sc-install .e:nth-child(1){--x:30%;--y:8%;--w:60%;--r:8deg}
.sc-install .e:nth-child(2){--x:8%;--y:34%;--w:36%;--r:-10deg}
.sc-install .e:nth-child(3){--x:68%;--y:62%;--w:26%;--r:16deg;--w-px:6px}
.sc-install .e:nth-child(4){--x:8%;--y:10%;--w:18%;--r:0deg;--w-px:6px}
.sc-tasks .e:nth-child(1){--x:22%;--y:6%;--w:60%;--r:-8deg}
.sc-tasks .e:nth-child(2){--x:58%;--y:50%;--w:36%;--r:10deg}
.sc-tasks .e:nth-child(3){--x:4%;--y:10%;--w:20%;--r:0deg;--w-px:6px}
.sc-tasks .e:nth-child(4){--x:6%;--y:52%;--w:22%;--r:-14deg;--w-px:6px}
.sc-cash .e:nth-child(1){--x:44%;--y:2%;--w:48%;--r:12deg}
.sc-cash .e:nth-child(2){--x:6%;--y:22%;--w:70%;--r:-12deg}
.sc-cash .e:nth-child(3){--x:70%;--y:56%;--w:24%;--r:18deg;--w-px:6px}
.sc-cash .e:nth-child(4){--x:12%;--y:10%;--w:18%;--r:-20deg;--w-px:6px}
.sc-card .e:nth-child(1){--x:4%;--y:20%;--w:76%;--r:-14deg}
.sc-card .e:nth-child(2){--x:58%;--y:10%;--w:30%;--r:18deg}
.sc-card .e:nth-child(3){--x:70%;--y:66%;--w:22%;--r:-10deg;--w-px:6px}
.sc-card .e:nth-child(4){--x:8%;--y:14%;--w:18%;--r:0deg;--w-px:6px}
.sc-time .e:nth-child(1){--x:20%;--y:10%;--w:70%;--r:-10deg}
.sc-chat .e:nth-child(1){--x:18%;--y:18%;--w:72%;--r:8deg}
.sc-chat .e:nth-child(2){--x:0%;--y:40%;--w:34%;--r:-10deg}
.si-1 .e:nth-child(1){--x:18%;--y:8%;--w:64%;--r:-6deg}
.si-1 .e:nth-child(2){--x:58%;--y:56%;--w:32%;--r:10deg}
.si-2 .e:nth-child(1){--x:28%;--y:34%;--w:58%;--r:0deg}
.si-2 .e:nth-child(2){--x:14%;--y:6%;--w:42%;--r:-14deg}
.si-2 .e:nth-child(3){--x:62%;--y:8%;--w:28%;--r:16deg;--w-px:6px}
.si-3 .e:nth-child(1){--x:20%;--y:8%;--w:60%;--r:-6deg}
.si-3 .e:nth-child(2){--x:58%;--y:54%;--w:32%;--r:10deg}
.si-3 .e:nth-child(3){--x:6%;--y:10%;--w:18%;--r:0deg;--w-px:6px}
.big-n{position:absolute;font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.06em;color:var(--n);z-index:0}

/* шаги */
.l-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.l-step{position:relative;overflow:hidden;border-radius:28px;padding:204px 20px 22px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(165deg,var(--c1) 0%,var(--c2) 58%,var(--t-end) 100%);box-shadow:var(--card-edge)}
.l-step .scene{width:240px;height:240px;right:-28px;top:-30px}
.l-step .big-n{left:18px;top:14px;font-size:84px}
.l-txt{position:relative;z-index:1}
.l-txt b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.015em}
.l-txt p{margin:6px 0 0;color:var(--sub-ink);font-size:14.5px;line-height:1.5}

/* доверие */
.l-bento{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
.l-sbp{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 100% 0%,var(--hero-1) 0%,var(--hero-2) 52%,var(--hero-3) 100%);box-shadow:var(--hero-edge);color:#fff;border-radius:28px;padding:22px 20px 20px}
.l-sbp .scene{width:200px;height:200px;right:-44px;top:-30px;--glow:rgba(255,197,49,.42);--sh:.45}
.sbp-top{position:relative;z-index:1;max-width:58%;min-height:150px}
.sbp-top b{display:block;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.sbp-top p{margin:8px 0 0;color:var(--forest-ink);font-size:14.5px;line-height:1.5}
.banks{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.banks span{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bank-plate);color:var(--bank-ink);box-shadow:var(--bank-edge);border-radius:16px;padding:12px 4px 10px;font-size:12.5px;font-weight:600}
.banks i{width:32px;height:32px;border-radius:8px}
.b-more{position:relative;z-index:1;font-size:13px;color:#9cc2b0;margin:12px 0 0}
.l-feat{position:relative;overflow:hidden;border-radius:28px;padding:170px 20px 22px;background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 70%,var(--t-end) 100%);box-shadow:var(--card-edge)}
.l-feat .txt{position:relative;z-index:1}
.l-feat b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.015em}
.l-feat p{margin:8px 0 0;color:var(--sub-ink);font-size:14.5px;line-height:1.5}
.l-feat .scene{width:210px;height:210px;right:-26px;top:-24px}
.mini-offer{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;background:var(--offer-bg);border-radius:14px;padding:7px 11px;box-shadow:var(--offer-sh);font-size:11px;line-height:1.5;color:var(--muted);white-space:nowrap}
.mini-offer b{font-family:var(--display);font-size:14px;font-weight:600;color:var(--good);letter-spacing:-.01em;line-height:1.2}
.mo-time{left:20px;top:26px}
.mini-chat{position:absolute;z-index:2;left:20px;top:28px;display:flex;align-items:center;gap:8px;background:var(--chat-bg);color:#fff;border-radius:16px 16px 16px 4px;padding:8px 12px 8px 9px;font-size:12px;line-height:1.5;font-weight:600;box-shadow:var(--chat-sh);white-space:nowrap}
.mini-chat i{width:20px;height:20px;border-radius:7px;background:var(--coin);flex:none;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:10px;font-style:normal;line-height:1;color:var(--coin-ink)}

/* установка: в макете — раскрытая; здесь та же разметка внутри <details> */
.inst summary{list-style:none;display:grid;grid-template-columns:54px minmax(0,1fr) 36px;gap:10px;align-items:center;padding:16px 0 14px;cursor:pointer}
.pkg{position:relative;width:54px;height:54px}
.pkg::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,49,.38),transparent 64%)}
.pkg .e{position:absolute;left:-8px;top:-18px;width:72px;height:72px;transform:rotate(-8deg);filter:drop-shadow(0 10px 12px rgba(120,70,0,.28))}
.inst-t b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.inst-t small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--muted)}
.l-isteps{list-style:none;margin:0;padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:10px}
.l-istep{position:relative;overflow:hidden;border-radius:22px;padding:164px 18px 20px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(165deg,var(--c1) 0%,var(--c2) 62%,var(--t-end-i) 100%);box-shadow:var(--card-edge)}
.l-istep .scene{width:184px;height:184px;right:-20px;top:-10px}
.l-istep .big-n{left:16px;top:12px;font-size:64px}
.l-istep b{position:relative;z-index:1;display:block;font-size:15.5px;font-weight:700}
.l-istep p{position:relative;z-index:1;margin:5px 0 0;color:var(--sub-ink);font-size:14.5px;line-height:1.5}

@media (min-width:900px){
  .l-steps{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
  .l-step{padding:286px 26px 28px}
  .l-step .scene{width:320px;height:320px;right:-40px;top:-34px}
  .l-step .big-n{left:24px;top:20px;font-size:104px}
  .l-txt b{font-size:19px}
  .l-txt p{font-size:15px}
  .l-bento{grid-template-columns:1.12fr 1fr;grid-template-rows:1fr 1fr;gap:14px;margin-top:28px}
  .l-sbp{grid-row:span 2;padding:30px 30px 26px}
  .sbp-top{max-width:60%;min-height:176px}
  .sbp-top b{font-size:25px}
  .l-sbp .scene{width:290px;height:290px;right:-50px;top:-50px}
  .banks span{flex-direction:row;justify-content:flex-start;padding:12px 14px;gap:12px;font-size:13.5px}
  .l-feat{padding:28px}
  .l-feat .txt{max-width:55%}
  .l-feat b{font-size:19px}
  .l-feat p{font-size:15px}
  .l-feat .scene{width:240px;height:240px;right:-34px;top:auto;bottom:-40px}
  .mo-time,.mini-chat{left:auto;top:24px;right:24px}
  .inst summary{grid-template-columns:76px minmax(0,1fr) 40px;gap:16px;padding:22px 0 18px}
  .pkg{width:76px;height:76px}
  .pkg .e{width:96px;height:96px;left:-8px;top:-26px}
  .inst-t b{font-size:21px}
  .inst-t small{font-size:14px}
  .chev{width:40px;height:40px}
  .l-isteps{grid-template-columns:repeat(3,1fr);gap:14px;padding:22px 0}
  .l-istep{padding:214px 22px 24px}
  .l-istep .scene{width:228px;height:228px;right:-24px;top:-10px}
  .l-istep .big-n{font-size:80px;left:20px;top:16px}
}

/* Узкие телефоны (320): в макете их нет — коробка и кнопка меньше, чтобы «Как установить APK» не уходил под кнопку */
@media (max-width:359px){
  .inst summary{grid-template-columns:40px minmax(0,1fr) 32px;gap:10px}
  .pkg{width:40px;height:40px}
  .pkg .e{width:56px;height:56px;left:-6px;top:-14px}
  .inst-t b{font-size:15px}
  .chev{width:32px;height:32px}
}

/* ---------- сверх макета ---------- */
/* Иконки: в макете картинки были data URI, на сайте — файлы WebP (хеш в имени ставит build.py) */
.i-coin{background-image:url(/assets/img/coin.e92db877e7.webp)}
.i-logo{background-image:url(/assets/img/logo.7c5a2c66de.webp)}
.i-money_bag{background-image:url(/assets/img/money_bag.a505419a3d.webp)}
.i-dollar_banknote{background-image:url(/assets/img/dollar_banknote.f61a4622aa.webp)}
.i-wrapped_gift{background-image:url(/assets/img/wrapped_gift.858624de74.webp)}
.i-mobile_phone_with_arrow{background-image:url(/assets/img/mobile_phone_with_arrow.b85ad0668c.webp)}
.i-clipboard{background-image:url(/assets/img/clipboard.2e181b8be1.webp)}
.i-money_with_wings{background-image:url(/assets/img/money_with_wings.cd4ea404d4.webp)}
.i-credit_card{background-image:url(/assets/img/credit_card.1a593341c9.webp)}
.i-stopwatch{background-image:url(/assets/img/stopwatch.51ba64df0e.webp)}
.i-headphone{background-image:url(/assets/img/headphone.04ede83a28.webp)}
.i-package{background-image:url(/assets/img/package.ec41be561b.webp)}
.i-page_facing_up{background-image:url(/assets/img/page_facing_up.947da69e95.webp)}
.i-unlocked{background-image:url(/assets/img/unlocked.ae62db136f.webp)}
.i-warning{background-image:url(/assets/img/warning.44bf0a7bf1.webp)}
.i-shot_tasks{background-image:url(/assets/img/shot_tasks.f06cb13b6d.webp)}
.i-bank_sber{background-image:url(/assets/img/bank_sber.c77ca7a1ba.webp)}
.i-bank_tbank{background-image:url(/assets/img/bank_tbank.fa21d7c84a.webp)}
.i-bank_alfa{background-image:url(/assets/img/bank_alfa.004a20c2a3.webp)}
.i-bank_vtb{background-image:url(/assets/img/bank_vtb.0374629347.webp)}
.i-bank_yandex{background-image:url(/assets/img/bank_yandex.0d1a543477.webp)}
.i-bank_ozon{background-image:url(/assets/img/bank_ozon.dbb75aa800.webp)}
.i-mobile_phone{background-image:url(/assets/img/mobile_phone.457135599a.webp)}
.i-down_arrow{background-image:url(/assets/img/down_arrow.63a86beda4.webp)}
.i-sparkles{background-image:url(/assets/img/sparkles.a938d8f7c4.webp)}
.i-check_mark_button{background-image:url(/assets/img/check_mark_button.869cec8d71.webp)}
.i-inbox_tray{background-image:url(/assets/img/inbox_tray.18d95c3866.webp)}
.i-bell{background-image:url(/assets/img/bell.a512517af1.webp)}
.i-speech_balloon{background-image:url(/assets/img/speech_balloon.cdeab02853.webp)}


/* Нет RUSTORE_URL — entrypoint добавляет .solo, и APK становится главной (жёлтой) кнопкой */
.cta.solo .dl.apk{background:var(--coin);color:var(--coin-ink)!important;box-shadow:0 10px 24px -10px rgba(255,197,49,.65)}
.cta.solo .dl.apk .store-ic{background:var(--forest)}
.cta.solo .dl.apk .store-ic svg{color:var(--coin)}

/* Официальный значок RuStore (rustore.ru/help/…/rustore-button): файл как есть, без обводок, бликов и перекраски.
   Высота 63 px — рекомендованная RuStore; ширина 175 — по пропорциям файла (111×40). Рядом — APK той же высоты. */
.rustore-badge{display:block;align-self:center;flex:none;line-height:0;border-radius:6px}
.rustore-badge img{display:block;width:175px;height:63px}
.cta:not(.solo) .dl.apk{min-height:63px;padding-top:0;padding-bottom:0}
@media (min-width:900px){
  .cta{align-items:center}
  .cta:not(.solo) .dl.apk{height:63px}
}

/* Ссылки внутри текста документов */
.paper a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

/* Временное поле для запасного копирования (landing.js) */
.copy-field{position:fixed;top:0;left:-9999px;opacity:0}

/* ---------- тёмная тема: по настройке системы, без переключателя ----------
   Утверждённый макет design/mockups/dark: фон #0c1612, карточки #15211b, подписи #93a69b (6,8:1 и выше),
   карточки шагов — ночные мята, лаванда, мёд и небо; первый экран и так тёмно-зелёный — свет из угла.
   Плашка друга (/r/КОД) в макете не нарисована — тёмный мёд, как карточка третьего шага, код — монетой (7:1). */
@media (prefers-color-scheme:dark){
  :root{
    --app:#0c1612; --card:#15211b; --ink:#e8f1eb; --muted:#93a69b; --line:#22332b; --chip:#1f2d26;
    --forest:#1c6248; --forest-2:#1f6a4f; --forest-ink:#cfe6d9;
    --good:#52cf8f;
    --amber-bg:rgba(255,197,49,.08); --amber-line:rgba(255,197,49,.3); --amber-ink:#e3cf98;
    --gift-1:#4a3a12; --gift-2:#2a2414; --gift-ink:#e3cf98; --gift-code:var(--coin); --gift-sh:rgba(0,0,0,.5);
    --bezel:#050807; --bezel-line:#33403a;
    --hero-1:#1c6c4e; --hero-2:#134634; --hero-3:#0b2a1f; --hero-edge:inset 0 1px 0 rgba(255,255,255,.07);
    --accent:#86dcae; --sub-ink:#a9baaf;
    --t-end:var(--card); --t-end-i:var(--card); --card-edge:inset 0 1px 0 rgba(255,255,255,.035);
    --bank-plate:rgba(4,18,12,.42); --bank-ink:#e8f1eb; --bank-edge:inset 0 0 0 1px rgba(255,255,255,.07);
    --offer-bg:#1a2821; --offer-sh:0 12px 26px -12px rgba(0,0,0,.7);
    --chat-bg:var(--forest-2); --chat-sh:0 12px 22px -12px rgba(0,0,0,.6);
    --e-sh:0,0,0;
    --toast-bg:#e8f1eb; --toast-ink:#0c1612; --toast-ic:#17895a;
    --ph-line:#3b4d43;
    color-scheme:dark;
  }
  .t-leaf{--c1:#1c4231;--c2:#15241d;--n:#2f5f48;--glow:rgba(110,220,160,.16)}
  .t-blue{--c1:#272e57;--c2:#171d2f;--n:#3d4780;--glow:rgba(140,155,255,.2)}
  .t-amber{--c1:#4a3a12;--c2:#211e13;--n:#6e5520;--glow:rgba(255,200,80,.22)}
  .t-sky{--c1:#1c3753;--c2:#152230;--n:#305476;--glow:rgba(120,190,255,.18)}
  .scene .e{--sh:.45}
  .inv-btn.done{color:var(--app)}        /* белый на мятном #52cf8f — 2:1; тёмный — 9:1 */
  /* Снимок «Заданий» в тёмной теме. Фон, а не <img>: браузер скачивает только снимок своей схемы. */
  .dscreen .i-shot_tasks{background-image:url("/assets/img/shot_tasks_dark.5493e99e47.webp")}
}

/* hidden сильнее любых display из правил выше (например, display:flex!important на компьютере) — правило последнее */
[hidden]{display:none!important}