/* Gramio — сайт. Правила дизайна: site/DESIGN.md. Цвета только через переменные ниже. */

/* ── Шрифт (тот же Inter, что в приложении) ─────────────────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-cyrillic-400.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-cyrillic-500.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-cyrillic-600.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-cyrillic-700.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-cyrillic-800.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Токены ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#F2F2F2; --bg-rgb:242,242,242;
  --surface:#FFFFFF; --surface-rgb:255,255,255;
  --surface-2:#F5F5F7; --surface-3:#ECEDF0; --surface-hover:#FAFAFB;
  --ink:#0A0A0A; --ink-rgb:10,10,10; --ink-2:#171717; --ink-3:#2A2A2A;
  --text:#0A0A0A; --text-2:#6C6C70; --text-3:#A1A1A6;
  --on-ink:#FFFFFF; --on-ink-2:rgba(255,255,255,.64); --on-ink-3:rgba(255,255,255,.12);
  --on-lime-2:rgba(10,10,10,.68);
  --lime:#A4D12E; --lime-rgb:164,209,46; --lime-hover:#B4DD45; --lime-ink:#4D7A0A;
  --lime-soft:#E9F5C9; --lime-wash:#F7FBEA;
  --protein:#4D7A0A; --fat:#C58A1A; --carbs:#3F88D0;
  --fat-soft:#F6EAD2; --carbs-soft:#E2EEF9;
  --border:rgba(60,60,67,.08); --border-strong:rgba(60,60,67,.18);
  --success:#4D7A0A; --error:#B3261E; --error-soft:#FBE9E7; --warning:#C58A1A;
  --tg:#2AABEE; --tg-rgb:42,171,238; --android:#3DDC84;
  --bronze:#C7834A; --silver:#AEB6C1; --gold:#E2B33C; --diamond:#79C6E6;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(17,24,39,.04),0 6px 18px -10px rgba(17,24,39,.12);
  --shadow-2:0 2px 4px rgba(17,24,39,.04),0 22px 44px -20px rgba(17,24,39,.24);
  --shadow-3:0 40px 90px -30px rgba(17,24,39,.38);
  --glow-lime:0 14px 34px -14px rgba(164,209,46,.75);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:.18s; --dur-2:.35s; --dur-3:.8s;
  --container:1200px; --gutter:clamp(16px,4vw,32px); --section-y:clamp(72px,10vw,128px);
  --nav-h:72px; --top-h:116px;   /* высота закреплённой шапки (полоса + панель); точное значение ставит site.js */
}

/* ── База ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:'cv11','ss03'}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--ink)}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;font-weight:600;transition:top var(--dur-2) var(--ease-out)}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:calc(820px + var(--gutter) * 2)}
.muted{color:var(--text-2)}
.is-ios .only-not-ios{display:none!important}

/* ── Типографика ────────────────────────────────────────────────────────── */
.h1{font-size:clamp(42px,6.2vw,84px);line-height:1;font-weight:800;letter-spacing:-.04em}
.h2{font-size:clamp(32px,4.4vw,56px);line-height:1.05;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.h3{font-size:clamp(19px,1.7vw,22px);line-height:1.25;font-weight:700;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--text-2);letter-spacing:-.005em;text-wrap:pretty}
.tabular,[data-count]{font-variant-numeric:tabular-nums}

/* ── Кнопки, чипы, ссылки ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;font:600 16px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2),color var(--dur-2);-webkit-tap-highlight-color:transparent}
.btn .i{width:20px;height:20px}
.btn-lg{height:58px;padding:0 28px;font-size:17px}
.btn-sm{height:42px;padding:0 18px;font-size:15px}
.btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:0 0 0 0 rgba(var(--lime-rgb),0)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--lime),0 14px 30px -14px rgba(var(--ink-rgb),.6)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-hover);transform:translateY(-2px);box-shadow:var(--glow-lime)}
.btn-ghost{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--text),var(--shadow-1)}
.btn-white{background:var(--surface);color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn-primary:disabled{box-shadow:none}
.btn.is-loading{pointer-events:none;opacity:.8}
.btn.is-loading::after{content:'';width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}

.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);font:600 14px/1 var(--font);letter-spacing:-.005em;white-space:nowrap}
.chip .i{width:16px;height:16px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(var(--lime-rgb),.35)}
.chip-sm{height:26px;padding:0 10px;font-size:12px}
.chip-xs{height:20px;padding:0 8px;font-size:11px;font-style:normal;font-weight:800}
.chip-lime{background:var(--lime-soft);color:var(--lime-ink)}
.chip-ink{background:var(--ink);color:var(--lime);font-weight:800;letter-spacing:.02em}
.chip-muted{background:var(--surface-2);color:var(--text-2)}
.chip-on-ink{background:rgba(var(--lime-rgb),.14);color:var(--lime)}
.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:text-decoration-color var(--dur-2)}
.link:hover{text-decoration-color:var(--lime)}
.link-btn{background:none;border:0;padding:0;cursor:pointer;color:var(--text);font:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.link-btn:hover{text-decoration-color:var(--lime)}
.ico{width:44px;height:44px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--lime-soft);color:var(--lime-ink)}
.ico .i{width:22px;height:22px}
.ico--lg{width:52px;height:52px;border-radius:16px}
.ico--lg .i{width:26px;height:26px}
.ico--muted{background:var(--surface-2);color:var(--text-2)}

/* ── Плашка «Оплата из России» ─────────────────────────────────────────── */
.notice{background:var(--ink);color:var(--on-ink);font-size:14px;line-height:1.35}
.notice__in{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-top:8px;padding-bottom:8px;text-align:center}
.notice b{color:var(--lime);font-weight:700}
.notice .i{width:18px;height:18px;color:var(--lime)}
.notice__link{display:inline-flex;align-items:center;gap:4px;color:var(--lime);font-weight:600;text-decoration:none;white-space:nowrap}
.notice__link .i{width:16px;height:16px;transition:transform var(--dur-2) var(--ease-out)}
.notice__link:hover .i{transform:translateX(3px)}
.notice__short{display:none}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
/* Шапка закреплена целиком: чёрная полоса + панель Gramio. Фон сплошной (без прозрачности), а чёрный цвет
   продолжается вверх (::before): во встроенном браузере Telegram на iPhone над шапкой полупрозрачная панель браузера —
   под ней теперь не просвечивает страница, шапка не «плавает» отдельным блоком. */
.topbar{position:sticky;top:0;z-index:60}
.topbar::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:240px;background:var(--ink);pointer-events:none}
.nav{position:relative;background:var(--bg);transition:background-color var(--dur-2),box-shadow var(--dur-2)}
.topbar.is-scrolled .nav{background:var(--surface);box-shadow:0 1px 0 var(--border),0 10px 24px -18px rgba(17,24,39,.35)}
.nav__in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand__mark{width:36px;height:auto;aspect-ratio:1765/1195;color:var(--ink);transition:transform var(--dur-2) var(--ease-spring)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.06)}
.brand__name{font-size:21px;font-weight:800;letter-spacing:-.04em}
.nav__links{display:flex;gap:4px;margin-left:12px}
.nav__links a{position:relative;padding:10px 14px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none;transition:color var(--dur-2),background-color var(--dur-2)}
.nav__links a:hover{color:var(--text);background:rgba(var(--ink-rgb),.04)}
.nav__links a.is-active{color:var(--text);background:var(--surface);box-shadow:var(--shadow-1)}
.nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--dur-2) var(--ease-out),top var(--dur-2) var(--ease-out)}
.nav__burger span:first-child{top:17px}.nav__burger span:last-child{top:25px}
.nav__burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--surface);box-shadow:0 18px 40px -18px rgba(17,24,39,.3);border-top:1px solid var(--border)}
.menu__in{display:flex;flex-direction:column;padding-top:8px;padding-bottom:20px}
.menu__in a:not(.btn){padding:15px 4px;font-size:18px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--border)}
.menu__in .btn{margin-top:16px}
.menu:not([hidden]){animation:menuIn var(--dur-2) var(--ease-out)}

/* ── Секции ─────────────────────────────────────────────────────────────── */
.section{padding:calc(var(--section-y) * .55) 0}
.section__head{max-width:820px;margin:0 auto clamp(40px,6vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.section__head .lead{max-width:640px}

/* ── Первый экран ───────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(28px,5vw,64px) 0 clamp(56px,7vw,96px);overflow:hidden;overflow:clip}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:-1}
.blob{position:absolute;border-radius:50%;background:radial-gradient(circle at center,rgba(var(--lime-rgb),.34),rgba(var(--lime-rgb),0) 65%);animation:drift 18s ease-in-out infinite alternate}
.blob--1{width:760px;height:760px;right:-200px;top:-260px}
.blob--2{width:620px;height:620px;left:-260px;bottom:-320px;opacity:.6;animation-duration:22s;animation-direction:alternate-reverse}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(var(--ink-rgb),.09) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 40%,black 0,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 72% 40%,black 0,transparent 70%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero__title{max-width:12ch}
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl__wave{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.hl__wave path{fill:none;stroke:var(--lime);stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.js .hl__wave path{stroke-dashoffset:1}
.js .split.is-in .hl__wave path,.js .hero__title.is-in .hl__wave path{animation:draw 1.1s var(--ease-out) .85s forwards}
.hero__lead{max-width:540px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__soon{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text-2)}
.hero__soon .i{width:16px;height:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:6px;font-size:14px;font-weight:500;color:var(--text-2)}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts .i{width:18px;height:18px;color:var(--lime-ink)}
.load-in{animation:none}
.js .load-in{opacity:0;animation:rise var(--dur-3) var(--ease-out) calc(.25s + var(--i,0) * 90ms) both}

.hero__visual{position:relative;height:690px;display:grid;place-items:center;--mx:0;--my:0}
.parallax{position:relative;width:100%;height:100%;display:grid;place-items:center}
.phone--hero{translate:calc(var(--mx) * -6px) calc(var(--my) * -6px);transition:translate .6s var(--ease-out)}
.js .phone--hero{animation:phoneIn 1s var(--ease-out) .15s both}

/* плавающие карточки */
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-2);translate:calc(var(--mx) * var(--depth,14px)) calc(var(--my) * var(--depth,14px));transition:translate .6s var(--ease-out)}
.js .float{animation:pop .75s var(--ease-spring) var(--d,2s) both,bob 7s ease-in-out calc(var(--d,2s) + .8s) infinite}
.float__label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.float__label .i{width:14px;height:14px;color:var(--lime-ink)}
.float__big{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.float__big small{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0}
.float--ring{left:0;top:96px;--depth:22px}
.float--ring .ring{width:48px;height:48px}
.float--coach{right:-6px;top:52px;width:236px;flex-direction:column;align-items:flex-start;gap:6px;--depth:-18px;animation-duration:.75s,8s}
.float--coach p{font-size:14px;line-height:1.4;font-weight:500}
.float--streak{left:18px;top:262px;--depth:-14px}
.float--streak b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.flame{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--fat-soft);color:var(--fat)}
.flame .i{width:22px;height:22px;fill:currentColor;stroke-width:1.6}
.float--goal{right:0;top:222px;flex-direction:column;align-items:flex-start;gap:4px;width:214px;--depth:20px}
.mini-chart{width:100%;height:40px;overflow:visible}
.mini-chart path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mini-chart__past{stroke:var(--ink)}
.mini-chart__plan{stroke:var(--lime-ink);stroke-dasharray:1 6}
.mini-chart circle{fill:var(--lime);stroke:var(--ink);stroke-width:2}

/* кольцо */
.ring{transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring__track{stroke:var(--surface-3)}
.ring__val{stroke:var(--lime);stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 * (1 - var(--p)))}
.js .float--ring .ring__val{animation:ringIn 1.4s var(--ease-out) 2.2s both}
.js .a-day.is-active .ring__val{animation:ringIn 1.4s var(--ease-out) .2s both}

/* ── Телефон и экраны приложения ────────────────────────────────────────── */
.phone{--s:.76;position:relative;z-index:2;flex:none;width:calc(390px * var(--s) + 22px);height:calc(844px * var(--s) + 22px);padding:11px;border-radius:calc(56px * var(--s) + 11px);background:var(--ink);box-shadow:var(--shadow-3),inset 0 0 0 1.5px var(--ink-3),inset 0 0 0 5px var(--ink-2)}
.phone::before{content:'';position:absolute;z-index:5;left:50%;top:calc(11px + 11px * var(--s));width:calc(118px * var(--s));height:calc(34px * var(--s));translate:-50% 0;border-radius:var(--r-pill);background:var(--ink)}
.phone__screen{position:relative;width:calc(390px * var(--s));height:calc(844px * var(--s));border-radius:calc(46px * var(--s));overflow:hidden;background:var(--bg);isolation:isolate}
.a-app{position:absolute;left:0;top:0;width:390px;height:844px;padding:0 16px;transform:scale(var(--s));transform-origin:0 0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.35;overflow:hidden;text-align:left}
.a-app .i{width:18px;height:18px}
.a-status{display:flex;align-items:center;justify-content:space-between;height:54px;padding:12px 14px 0;font-size:16px}
.a-status__icons{display:flex;align-items:center;gap:6px}
.a-status__icons i{display:block;background:var(--ink);border-radius:2px}
.a-status__icons i:nth-child(1){width:17px;height:11px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.a-status__icons i:nth-child(2){width:15px;height:11px;border-radius:15px 15px 2px 2px;clip-path:polygon(50% 100%,0 25%,0 0,100% 0,100% 25%)}
.a-status__icons i:nth-child(3){width:25px;height:12px;border-radius:4px;background:none;box-shadow:inset 0 0 0 1.5px var(--ink);position:relative}
.a-status__icons i:nth-child(3)::after{content:'';position:absolute;inset:2.5px 6px 2.5px 2.5px;background:var(--ink);border-radius:2px}
.a-head{display:flex;align-items:center;justify-content:space-between;height:52px}
.a-head b{font-size:17px;font-weight:700}
.a-head>span:last-child:empty{width:38px}
.a-iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-1)}
.a-iconbtn--dark{background:rgba(var(--ink-rgb),.45);color:var(--on-ink);box-shadow:none}
.a-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600}
.a-chip--lime{background:var(--lime-soft);color:var(--lime-ink)}
.a-chip--dark{background:rgba(var(--ink-rgb),.45);color:var(--on-ink)}
.a-card{margin-top:12px;padding:16px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-1)}
.a-title{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.a-sub{display:block;margin-top:3px;font-size:13px;color:var(--text-2)}
.a-photo{position:relative;height:300px;margin-top:4px;border-radius:28px;overflow:hidden;background:var(--surface-3)}
.a-photo img{width:100%;height:100%;object-fit:cover}
.scan__corners{position:absolute;inset:18px;pointer-events:none;background:
  linear-gradient(var(--lime) 0 0) top left/30px 4px no-repeat,linear-gradient(var(--lime) 0 0) top left/4px 30px no-repeat,
  linear-gradient(var(--lime) 0 0) top right/30px 4px no-repeat,linear-gradient(var(--lime) 0 0) top right/4px 30px no-repeat,
  linear-gradient(var(--lime) 0 0) bottom left/30px 4px no-repeat,linear-gradient(var(--lime) 0 0) bottom left/4px 30px no-repeat,
  linear-gradient(var(--lime) 0 0) bottom right/30px 4px no-repeat,linear-gradient(var(--lime) 0 0) bottom right/4px 30px no-repeat}
.scan__line{position:absolute;left:22px;right:22px;top:22px;height:3px;border-radius:3px;background:var(--lime);box-shadow:0 0 18px 5px rgba(var(--lime-rgb),.55);animation:scan 2.6s ease-in-out infinite alternate}
.a-tag{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);background:rgba(var(--surface-rgb),.94);box-shadow:var(--shadow-1);font-size:13px;font-weight:600;translate:-50% -50%;white-space:nowrap}
.a-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(var(--lime-rgb),.3)}
.js .a-tag{animation:pop .5s var(--ease-spring) var(--d) both}
.a-result__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.a-kcal{text-align:right;flex:none}
.a-kcal b{display:block;font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.a-kcal span{font-size:13px;color:var(--text-2);font-weight:600}
.js .phone--hero .a-result{animation:sheetUp .9s var(--ease-out) 1.55s both}
.a-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.a-macro{padding:10px;border-radius:14px;background:var(--surface-2)}
.a-macro span{display:block;font-size:12px;color:var(--text-2)}
.a-macro b{display:block;font-size:16px;font-weight:700;margin-top:2px}
.a-macro i,.a-bars i,.a-water i,.a-lvl i{display:block;height:5px;margin-top:8px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.a-macro i::after,.a-bars i::after{content:'';display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--c);transform-origin:left}
.js .a-macro i::after{animation:grow 1s var(--ease-out) 2s both}
.a-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.a-list li:first-child{border-top:0}
.a-list{margin-top:8px}
.a-list i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.a-list span{flex:1;font-size:15px;font-weight:600;line-height:1.25}
.a-list small{display:block;font-size:12px;font-weight:500;color:var(--text-2)}
.a-list b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.a-list b::after{content:' ккал';font-size:12px;font-weight:500;color:var(--text-2)}
.a-btn{display:flex;align-items:center;justify-content:center;height:50px;margin-top:10px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:16px;font-weight:600;box-shadow:0 0 0 2.5px var(--lime)}

/* экраны «Как это работает» */
.a-screen{opacity:0;translate:0 26px;transition:opacity .55s var(--ease-out),translate .7s var(--ease-out);pointer-events:none}
.a-screen.is-active{opacity:1;translate:0 0}
.a-camera{padding:0;background:var(--ink)}
.a-camera__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 6s ease-out}
.a-camera.is-active .a-camera__img{transform:scale(1.08)}
.a-camera::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),0) 22%,rgba(var(--ink-rgb),0) 70%,rgba(var(--ink-rgb),.6))}
.a-camera__top{position:absolute;z-index:2;left:16px;right:16px;top:58px;display:flex;align-items:center;justify-content:space-between}
.a-camera__frame{position:absolute;z-index:2;left:50%;top:50%;width:290px;height:290px;translate:-50% -54%;border-radius:28px;background:
  linear-gradient(var(--on-ink) 0 0) top left/36px 4px no-repeat,linear-gradient(var(--on-ink) 0 0) top left/4px 36px no-repeat,
  linear-gradient(var(--on-ink) 0 0) top right/36px 4px no-repeat,linear-gradient(var(--on-ink) 0 0) top right/4px 36px no-repeat,
  linear-gradient(var(--on-ink) 0 0) bottom left/36px 4px no-repeat,linear-gradient(var(--on-ink) 0 0) bottom left/4px 36px no-repeat,
  linear-gradient(var(--on-ink) 0 0) bottom right/36px 4px no-repeat,linear-gradient(var(--on-ink) 0 0) bottom right/4px 36px no-repeat}
.a-camera.is-active .a-camera__frame{animation:breathe 2.4s ease-in-out infinite}
.a-camera__hint{position:absolute;z-index:2;left:50%;bottom:180px;translate:-50% 0;padding:9px 16px;border-radius:var(--r-pill);background:rgba(var(--ink-rgb),.55);color:var(--on-ink);font-size:14px;font-weight:600;white-space:nowrap}
.a-camera__bar{position:absolute;z-index:2;left:40px;right:40px;bottom:58px;display:flex;align-items:center;justify-content:space-between}
.a-shutter{width:78px;height:78px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 5px rgba(var(--surface-rgb),.35)}
.a-camera.is-active .a-shutter{animation:shutter 3s ease-in-out 1.2s infinite}
.a-thumb{position:relative;height:200px;margin-top:4px;border-radius:24px;overflow:hidden}
.a-thumb img{width:100%;height:100%;object-fit:cover}
.a-thumb__done{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);background:var(--surface);font-size:13px;font-weight:600;color:var(--lime-ink)}
.a-thumb__done .i{width:16px;height:16px}
.a-analysis .a-card{margin-top:12px}
.a-list--long li{padding:7px 0}
.a-analysis.is-active .a-list--long li{animation:rowIn .45s var(--ease-out) both}
.a-analysis.is-active .a-list--long li:nth-child(1){animation-delay:.15s}
.a-analysis.is-active .a-list--long li:nth-child(2){animation-delay:.3s}
.a-analysis.is-active .a-list--long li:nth-child(3){animation-delay:.45s}
.a-analysis.is-active .a-list--long li:nth-child(4){animation-delay:.6s}
.a-analysis.is-active .a-list--long li:nth-child(5){animation-delay:.75s}
.a-analysis.is-active .a-list--long li:nth-child(6){animation-delay:.9s}
.a-analysis.is-active .a-list--long li:nth-child(7){animation-delay:1.05s}
.a-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;padding-top:12px;border-top:1px solid var(--border-strong);font-size:14px;font-weight:600;color:var(--text-2)}
.a-total b{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.a-pills{display:flex;gap:8px;margin-top:10px}
.a-pills span{flex:1;text-align:center;padding:8px 0;border-radius:12px;font-size:14px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.a-topbar{display:flex;align-items:center;gap:8px;height:48px}
.a-lvl{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-2)}
.a-lvl i{flex:1;margin:0;height:5px}
.a-lvl i b{display:block;height:100%;background:var(--lime);border-radius:inherit}
.a-pill{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1);font-size:15px;font-weight:700}
.a-pill .i{width:16px;height:16px;color:var(--fat);fill:currentColor}
.a-pill--pro{background:var(--lime-soft);color:var(--lime-ink);box-shadow:none}
.a-pill--pro .i{color:var(--lime-ink);fill:none}
.a-today{display:grid;grid-template-columns:116px 1fr;gap:6px 16px;align-items:center}
.ring--big{width:116px;height:116px}
.ring--big circle{stroke-width:5}
.a-today__txt b{display:block;font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.a-today__txt .a-sub{margin:0}
.a-bars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.a-bars span{display:block;font-size:12px;color:var(--text-2)}
.a-bars b{display:block;font-size:13px;font-weight:700}
.a-day.is-active .a-bars i::after{animation:grow 1s var(--ease-out) .3s both}
.a-h{margin:16px 4px 0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.a-meals{padding:6px 16px}
.a-meal{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.a-meal:first-child{border-top:0}
.a-meal span:not(.a-emoji){flex:1;font-size:15px;font-weight:600;line-height:1.25}
.a-meal small{display:block;font-size:12px;font-weight:500;color:var(--text-2)}
.a-meal b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.a-meal b::after{content:' ккал';font-size:12px;font-weight:500;color:var(--text-2)}
.a-emoji{width:46px;height:46px;flex:none;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--fat-soft);color:var(--fat)}
.a-emoji .i{width:24px;height:24px}
.a-emoji img{width:100%;height:100%;object-fit:cover}
.a-water{display:flex;align-items:center;gap:12px;padding:14px 16px}
.a-water>.i{color:var(--carbs)}
.a-water span{flex:1;font-size:15px;font-weight:600}
.a-water small{display:block;font-size:12px;font-weight:500;color:var(--text-2)}
.a-water i{width:120px;margin:0;height:8px}
.a-water i b{display:block;height:100%;background:var(--carbs);border-radius:inherit}
.a-nav{position:absolute;left:14px;right:14px;bottom:16px;height:70px;display:flex;align-items:center;justify-content:space-around;border-radius:36px;background:rgba(var(--surface-rgb),.95);box-shadow:var(--shadow-2)}
.a-nav span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border-radius:22px;font-size:11px;font-weight:600;color:var(--text-2)}
.a-nav span b{font-size:17px;line-height:18px;font-weight:800;color:var(--text-2)}
.a-nav .is-on{background:var(--lime-soft);color:var(--lime-ink)}
.a-fab{position:absolute;right:20px;bottom:100px;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:17px;font-weight:600;box-shadow:0 0 0 2.5px var(--lime),var(--shadow-2)}
.a-fab .i{width:20px;height:20px}

/* ── 2. Почему это работает: три цифры ─────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.stat__num{font-size:clamp(44px,5vw,64px);line-height:1;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.stat p{color:var(--text-2);font-size:16px;line-height:1.5}
.stat__src{margin-top:auto;padding-top:8px;font-size:13px;color:var(--text-3);text-decoration:none}
a.stat__src:hover{color:var(--text-2);text-decoration:underline}
.stat--accent{background:var(--ink);color:var(--on-ink)}
.stat--accent .stat__num{color:var(--lime)}
.stat--accent p,.stat--accent .stat__src{color:var(--on-ink-2)}

/* ── 3. Как это работает: шаги-вкладки + телефон, автосмена ─────────────── */
.how__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center}
.how__text{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.how__steps{display:grid;gap:8px;width:100%;margin-top:4px}
.step{position:relative;border-radius:var(--r-md);transition:background-color var(--dur-2),box-shadow var(--dur-2)}
.step.is-active{background:var(--surface);box-shadow:var(--shadow-1)}
.step__tab{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:var(--r-md);background:none;cursor:pointer;text-align:left}
.step:not(.is-active) .step__tab:hover{background:rgba(var(--ink-rgb),.04)}
.step__num{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-1);font-size:16px;font-weight:800;transition:background-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2)}
.step.is-active .step__num{background:var(--ink);color:var(--lime);box-shadow:0 0 0 3px var(--lime)}
.step__title{font-size:clamp(18px,1.7vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.step:not(.is-active) .step__title{color:var(--text-2)}
.step__body{padding:0 18px 18px 70px}
.step:not(.is-active) .step__body{display:none}
.step.is-active .step__body{animation:fade .45s var(--ease-out)}
.step__body p{font-size:16px;line-height:1.55;color:var(--text-2)}
.step__short,.step__btitle{display:none}
/* полоска до следующего шага, пока идёт автосмена */
.is-playing .step.is-active::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px;background:var(--lime);transform-origin:left;animation:stepProg 4.5s linear both}
.how__stage{display:grid;place-items:center}
.phone--how{--s:.74;margin:0 auto}

/* ── 4. Путь к цели ─────────────────────────────────────────────────────── */
.goal__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.goal__text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.goal__chips{display:flex;flex-wrap:wrap;gap:8px}
.goal__chips li{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1);font-size:14px;font-weight:600}
.goal__chips .i{width:17px;height:17px;color:var(--lime-ink)}
.goal__list{display:grid;gap:12px}
.goal__list li{display:flex;align-items:center;gap:12px}
.goal__list .ico{width:38px;height:38px;border-radius:12px}
.goal__list .ico .i{width:19px;height:19px}
.goal__list p{font-size:15px;line-height:1.45;color:var(--text-2)}
.goal__list b{color:var(--text);font-weight:700}
.goal__board{display:grid;gap:16px}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:28px}
.board__chart{padding:24px 24px 18px}
.board__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.board__head .muted,.board__norm .muted{font-size:14px;font-weight:600}
.board__big{display:block;font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.board__big small{font-size:17px;font-weight:600;color:var(--text-2);letter-spacing:0}
.wchart{width:100%;height:auto;margin-top:14px;overflow:visible}
.wchart__grid line{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 7}
.wchart__area{fill:url(#wgrad)}
.wgrad-a{stop-color:var(--lime);stop-opacity:.42}
.wgrad-b{stop-color:var(--lime);stop-opacity:0}
.wchart__past{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.wchart__plan{fill:none;stroke:var(--lime-ink);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 10}
.wchart__pts circle{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.wchart__pts .now{fill:var(--lime)}
.wchart__goal circle{fill:var(--lime);stroke:var(--ink);stroke-width:3;transform-box:fill-box;transform-origin:center}
.wchart__goal .halo{fill:none;stroke:var(--lime);stroke-width:3;opacity:.6;animation:halo 2.4s ease-out infinite}
.js .board__chart .wchart__past{stroke-dashoffset:1}
.js .board__chart .wchart__plan,.js .board__chart .wchart__goal,.js .board__chart .wchart__pts,.js .board__chart .wchart__area{opacity:0}
.js .board__chart.is-in .wchart__past{animation:draw 1.5s var(--ease-out) .25s forwards}
.js .board__chart.is-in .wchart__area,.js .board__chart.is-in .wchart__pts{animation:fade .8s var(--ease-out) .9s forwards}
.js .board__chart.is-in .wchart__plan{animation:fade .9s var(--ease-out) 1.4s forwards}
.js .board__chart.is-in .wchart__goal{animation:fade .6s var(--ease-out) 1.9s forwards}
.wchart__axis{position:relative;height:20px;margin-top:10px;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.wchart__axis span{position:absolute;top:0;left:0}
.wchart__axis span:nth-child(2){left:35.6%;translate:-50% 0;font-weight:700;color:var(--text)}
.wchart__axis span:nth-child(3){left:auto;right:0}
.wchart__axis .goal-label{color:var(--lime-ink);font-weight:700}
.board__norm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 28px;align-items:center;padding:22px 24px}
.norm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.norm-tiles span{padding:10px 8px;border-radius:14px;background:var(--surface-2);font-size:12px;color:var(--text-2);text-align:center}
.norm-tiles b{display:block;font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.norm-path{grid-column:1/-1}
.norm-path__top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--text-2)}
.norm-path__top b{color:var(--lime-ink)}
.norm-path i{display:block;height:8px;margin-top:8px;border-radius:8px;background:var(--surface-3);overflow:hidden}
.norm-path i b{display:block;height:100%;border-radius:inherit;background:var(--lime);transform-origin:left}
.js .board__norm.is-in .norm-path i b{animation:grow 1.2s var(--ease-out) .5s both}
.norm-path small{display:block;margin-top:8px;font-size:12px;color:var(--text-2)}
.chip-sm.chip-lime .i{width:14px;height:14px}

/* ── 5. Что даёт Pro: четыре функции ────────────────────────────────────── */
.pro__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile-f{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.tile-f::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--lime-rgb),.17),transparent 62%);opacity:0;transition:opacity var(--dur-2)}
.tile-f:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.tile-f:hover::before{opacity:1}
.tile-f__vis{position:relative;height:196px;margin:8px 8px 0;padding:16px;border-radius:calc(var(--r-lg) - 8px);background:var(--surface-2);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px}
.tile-f--photo .tile-f__vis{padding:0}
.tile-f__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.tile-f--photo:hover .tile-f__vis img{transform:scale(1.05)}
.tile-f__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px 22px}
.tile-f__body p{font-size:15px;line-height:1.5;color:var(--text-2)}
.det{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);background:rgba(var(--surface-rgb),.95);box-shadow:var(--shadow-1);font-size:12px;font-weight:600;white-space:nowrap}
.det::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(var(--lime-rgb),.3)}
.js .tile-f--photo .det{opacity:0;scale:.7}
.js .tile-f--photo.is-in .det{animation:pop .5s var(--ease-spring) both}
.js .tile-f--photo.is-in .det:nth-of-type(1){animation-delay:.4s}
.js .tile-f--photo.is-in .det:nth-of-type(2){animation-delay:.6s}
.js .tile-f--photo.is-in .det:nth-of-type(3){animation-delay:.8s}
.chat{display:flex;flex-direction:column;gap:8px;width:100%}
.bubble{max-width:94%;padding:9px 12px;font-size:13px;line-height:1.38;font-weight:500}
.bubble--me{align-self:flex-end;background:var(--ink);color:var(--on-ink);border-radius:16px 16px 4px 16px}
.bubble--ai{align-self:flex-start;background:var(--surface);color:var(--text);border-radius:16px 16px 16px 4px;box-shadow:var(--shadow-1)}
.typing{display:none;gap:4px;padding:4px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:typing 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.js .tile-f--coach .bubble--me{opacity:0}
.js .tile-f--coach .typing{display:flex}
.js .tile-f--coach .bubble__txt{display:none}
.js .tile-f--coach.is-in .bubble--me{animation:rise .5s var(--ease-out) .3s both}
.js .tile-f--coach.is-done .typing{display:none}
.js .tile-f--coach.is-done .bubble__txt{display:block;animation:fade .5s var(--ease-out) both}
.ration__days{display:flex;gap:5px}
.ration__days b,.ration__days span{flex:1;padding:7px 0;border-radius:10px;background:var(--surface);text-align:center;font-size:12px;font-weight:700;color:var(--text-2)}
.ration__days b{background:var(--ink);color:var(--lime)}
.meals{display:grid;gap:6px}
.meals li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:var(--surface);font-size:12px;font-weight:600}
.meals li i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}
.meals li b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-2)}
.nbars{display:grid;gap:9px;width:100%}
.nbars span{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--text-2)}
.nbars span::after{content:'';height:7px;border-radius:7px;background:linear-gradient(90deg,var(--lime) calc(var(--p) * 100%),var(--surface-3) 0)}
.nbars .over::after{background:var(--fat)}
.vis-note{padding:9px 11px;border-radius:12px;background:var(--surface);font-size:12px;line-height:1.4;font-weight:500;color:var(--text)}
.vis-note b{color:var(--fat)}
.free{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:24px;font-size:14px;color:var(--text-2)}
.free b{color:var(--text);margin-right:2px}
.free span{padding:7px 12px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font-weight:600}
.pro__more{display:flex;justify-content:center;margin-top:24px}
.ava{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--lime-soft);color:var(--lime-ink);font-size:15px;font-weight:800}
.ava--me{background:var(--lime);color:var(--ink)}

/* ── 6. Тарифы и оплата из России ───────────────────────────────────────── */
.trial{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;background:var(--ink);color:var(--on-ink);text-decoration:none;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.trial:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--lime),var(--shadow-2)}
.trial__txt b{display:block;font-size:17px;font-weight:700}
.trial__txt small{display:block;font-size:13px;color:var(--on-ink-2)}
.trial__go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-weight:700;white-space:nowrap}
.trial__go .i{width:18px;height:18px;transition:transform var(--dur-2) var(--ease-out)}
.trial:hover .trial__go .i{transform:translateX(3px)}
.plans__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.plan-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:22px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);text-decoration:none;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2)}
.plan-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--lime),var(--shadow-2)}
.plan-card__name{font-size:15px;font-weight:600;color:var(--text-2)}
.plan-card__price{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.plan-card__price s{font-size:15px;font-weight:500;color:var(--text-3);letter-spacing:0}
.plan-card__per{font-size:13px;color:var(--text-2);line-height:1.4}
.plan-card__go{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:auto;border-radius:var(--r-pill);background:var(--surface-2);font-size:15px;font-weight:600;transition:background-color var(--dur-2),color var(--dur-2)}
.plan-card__per+.plan-card__go{margin-top:16px}
.plan-card:hover .plan-card__go{background:var(--ink);color:var(--on-ink)}
.plan-card--best{background:var(--lime-wash);box-shadow:inset 0 0 0 2.5px var(--lime),0 12px 24px -16px rgba(var(--lime-rgb),.9)}
.plan-card--best .plan-card__go{background:var(--ink);color:var(--on-ink)}
.plan-card__badge{position:absolute;top:-11px;right:18px;padding:4px 11px;border-radius:var(--r-pill);background:var(--lime);color:var(--ink);font-size:12px;font-weight:800}
.panel-ink{position:relative;background:var(--ink);color:var(--on-ink);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.panel-ink::before{content:'';position:absolute;z-index:-1;width:720px;height:720px;right:-220px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(var(--lime-rgb),.22),rgba(var(--lime-rgb),0) 65%)}
.paystrip{display:grid;grid-template-columns:minmax(0,1.25fr) auto auto;gap:20px 36px;align-items:center;margin-top:16px;padding:28px 32px;border-radius:var(--r-lg)}
.paystrip__txt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.paystrip__lead{font-size:17px;line-height:1.45;font-weight:600;color:var(--on-ink)}
.paystrip__safe{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-ink-2)}
.paystrip__safe .i{width:17px;height:17px;color:var(--lime)}
.paysteps{display:grid;gap:10px}
.paysteps li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;white-space:nowrap}
.paysteps b{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-size:14px;font-weight:800}

/* ── 7. Вопросы ─────────────────────────────────────────────────────────── */
.faq__list{display:grid;gap:10px}
.qa{border-radius:22px;background:var(--surface);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-2)}
.qa:hover{box-shadow:var(--shadow-2)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 22px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;border-radius:22px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-3px}
.qa summary i{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--surface-2);transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-2)}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:10px;right:10px;top:15px;height:2px;border-radius:2px;background:var(--ink)}
.qa summary i::after{transform:rotate(90deg)}
.qa.is-open summary i,.no-js .qa[open] summary i{transform:rotate(45deg);background:var(--lime)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.qa.is-open .qa__a,.no-js .qa[open] .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p,.qa__a ol{padding:0 22px 20px;color:var(--text-2);font-size:16px;line-height:1.6}
.qa__a ol+p{margin-top:-8px}
.howto{counter-reset:h;display:grid;gap:10px}
.howto li{counter-increment:h;position:relative;padding-left:38px;line-height:1.5}
.howto li::before{content:counter(h);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lime-soft);color:var(--lime-ink);font-size:13px;font-weight:800}

/* ── Финал (лаймовая панель) ────────────────────────────────────────────── */
.panel-lime{position:relative;background:var(--lime);color:var(--ink);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.final__panel{display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(44px,6vw,80px) clamp(20px,5vw,64px);text-align:center}
.final__panel .h2{max-width:780px}
.final__panel .lead{max-width:560px;color:var(--on-lime-2)}
.final__mark{position:absolute;z-index:-1;width:min(230px,30%);right:44px;bottom:40px;color:rgba(var(--ink-rgb),.09)}
.final__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.final__soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;font-size:14px;font-weight:600;color:var(--on-lime-2)}
.final__soon span{display:inline-flex;align-items:center;gap:7px}
.final__soon .i{width:16px;height:16px}
.final__soon .link-btn{color:var(--ink);font-weight:700;text-decoration-color:rgba(var(--ink-rgb),.35)}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.footer{padding:56px 0 40px;margin-top:clamp(16px,3vw,32px);border-top:1px solid var(--border)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.footer__brand p{margin-top:14px;max-width:320px;font-size:14px;line-height:1.55;color:var(--text-2)}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14px}
.footer__col b{font-size:14px;font-weight:700;margin-bottom:2px}
.footer__col a{color:var(--text-2);text-decoration:none;transition:color var(--dur-2)}
.footer__col a:hover{color:var(--text)}
.footer__col .muted{color:var(--text-3)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--text-3)}
.egg{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--text-3)}
.egg__mark{width:44px;height:auto;aspect-ratio:1765/1195;overflow:visible}
.egg__wave{fill:none;stroke:var(--text-3);stroke-width:212}
.egg__dot{fill:var(--lime-ink)}
.egg span{opacity:0;transition:opacity .8s var(--ease-out) .2s}
.egg.is-done span{opacity:1}

/* ── Окно «Как установить APK» ──────────────────────────────────────────── */
.modal{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-3)}
.modal::backdrop{background:rgba(var(--ink-rgb),.45)}
.modal[open]{animation:modalIn .4s var(--ease-out)}
.modal__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px}
.modal__in .btn{width:100%}
.modal__in .muted{font-size:14px}
.modal__close{position:absolute;right:16px;top:16px;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);cursor:pointer}
.modal__close:hover{background:var(--surface-3)}
.plat__logo{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:4px}
.plat__logo .i{width:30px;height:30px}
.plat__logo--android{background:var(--android);color:var(--ink)}

/* ── Появление ──────────────────────────────────────────────────────────── */
.js .reveal{opacity:0}
.js .reveal.is-in{animation:rise var(--dur-3) var(--ease-out) calc(var(--i,0) * 70ms) both}
.split .w{display:inline-block;vertical-align:top;overflow:hidden;padding:.06em .02em .12em;margin:-.06em -.02em -.12em}
.split .w.w--free{overflow:visible}
.js .split .w>span{display:inline-block;translate:0 115%}
.js .split.is-in .w>span{animation:wordUp .95s var(--ease-out) calc(var(--i,0) * 55ms + var(--sd,0ms)) both}
.js .hero__title .w>span{--sd:150ms}

@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes wordUp{from{translate:0 115%}to{translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes phoneIn{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes sheetUp{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes ringIn{from{stroke-dashoffset:113.1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes stepProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(250px)}}
@keyframes rowIn{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
@keyframes breathe{0%,100%{scale:1}50%{scale:.96}}
@keyframes shutter{0%,80%,100%{scale:1}88%{scale:.86}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-60px,50px)}}
@keyframes typing{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes halo{from{transform:scale(.6);opacity:.8}to{transform:scale(1.5);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes menuIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes modalIn{from{opacity:0;translate:0 16px;scale:.98}to{opacity:1;translate:0 0;scale:1}}

/* ── Адаптивность ───────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .float--coach{right:-10px}
  .float--goal{right:-6px}
}
@media (max-width:1099px){
  .nav__links{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__text{align-items:center;text-align:center}
  .hero__title{max-width:14ch}
  .hero__actions,.facts{justify-content:center}
  .hero__visual{height:640px;max-width:620px;width:100%;margin:0 auto}
  /* шаги: заголовок → вкладки → текст шага → телефон → кнопка */
  .how__grid{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
  .how__text{display:contents}
  .how__text>*{order:1}
  .how__stage{order:2}
  .how__cta{order:3}
  .how__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;max-width:560px}
  .step{display:contents}
  .step__tab{grid-row:1;flex-direction:column;justify-content:flex-start;gap:8px;padding:14px 8px;background:rgba(var(--surface-rgb),.6);text-align:center;transition:background-color var(--dur-2),box-shadow var(--dur-2)}
  .step.is-active .step__tab{background:var(--surface);box-shadow:var(--shadow-1)}
  .step__title{display:none}
  .step__short{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
  .step__num{width:36px;height:36px;font-size:15px}
  .step__body{grid-row:2;grid-column:1/-1;padding:8px 4px 0}
  .step__btitle{display:block;margin-bottom:6px;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .step__body p{max-width:520px;margin:0 auto}
  .is-playing .step.is-active::after{display:none}
  .goal__grid{grid-template-columns:1fr}
  .pro__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paystrip{grid-template-columns:1fr auto;align-items:start}
  .paystrip__txt{grid-column:1/-1}
  .footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:759px){
  :root{--nav-h:60px;--top-h:100px}
  .nav__pay{display:none}
  .nav__burger{display:block}
  .nav__cta .btn-primary{height:40px;padding:0 16px;font-size:14px}
  .notice{font-size:13px}
  .notice__in{min-height:40px;padding-top:6px;padding-bottom:6px;white-space:nowrap}
  .notice__in>.i{display:none}
  .notice__long{display:none}
  .notice__short{display:inline}
  .hero__actions{width:100%;flex-direction:column}
  .hero__actions .btn{width:100%}
  .hero__visual{height:540px}
  .phone--hero{--s:.6}
  .float{padding:11px 13px;gap:10px}
  .float--ring{left:-4px;top:36px}
  .float--ring .ring{width:40px;height:40px}
  .float__big{font-size:19px}
  .float--coach{width:190px;right:-8px;top:140px}
  .float--coach p{font-size:13px}
  .float--streak,.float--goal{display:none}
  .hl__wave path{stroke-width:5px}
  .stats{grid-template-columns:1fr;gap:10px}
  .stat{padding:20px 22px;gap:6px}
  .stat__num{font-size:40px}
  .stat p{font-size:15px}
  .phone--how{--s:.62}
  .board__chart{padding:20px 18px 16px}
  .board__norm{grid-template-columns:1fr;padding:20px 18px}
  .pro__grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .pro__grid::-webkit-scrollbar{display:none}
  .tile-f{scroll-snap-align:start}
  .free{justify-content:flex-start;margin-top:16px}
  .plans__grid{grid-template-columns:1fr}
  .plan-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:16px 18px}
  .plan-card__name{grid-column:1;grid-row:1}
  .plan-card__per{grid-column:1;grid-row:2}
  .plan-card__price{grid-column:2;grid-row:1/span 2;font-size:26px;text-align:right}
  .plan-card__price s{display:block;font-size:13px;line-height:1.2}
  .plan-card__go{display:none}
  .trial{flex-wrap:wrap}
  .trial__go{margin-left:0}
  .paystrip{grid-template-columns:1fr;padding:24px 20px;gap:18px}
  .paystrip .btn{width:100%}
  .final__mark{display:none}
  .final__actions{width:100%;flex-direction:column}
  .final__actions .btn{width:100%}
  .footer{padding:40px 0 32px}
  .footer__top{grid-template-columns:1fr 1fr;gap:24px}
  .footer__col--product{display:none}
  .qa summary{font-size:16px;padding:16px 18px}
  .qa__a p,.qa__a ol{padding:0 18px 18px}
}
@media (max-width:380px){
  .phone--hero{--s:.55}
  .hero__visual{height:500px}
  .float--coach{width:170px}
  .footer__top{grid-template-columns:1fr}
}
@media (hover:none){
  .tile-f:hover,.plan-card:hover{transform:none}
}

/* ── Страница оплаты ────────────────────────────────────────────────────── */
.pay-hero{position:relative;padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,72px);overflow:hidden;overflow:clip}
.pay__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(32px,5vw,72px);align-items:start}
.pay__intro{position:sticky;top:calc(var(--top-h) + 28px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:8px}
.pay__title{font-size:clamp(36px,4.6vw,58px);max-width:15ch}
.pay-benefits{display:grid;gap:12px}
.pay-benefits li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600}
.pay-benefits .ico{width:40px;height:40px;border-radius:13px}
.pay-benefits .ico .i{width:20px;height:20px}
.pay-safe{display:flex;align-items:flex-start;gap:10px;max-width:440px;font-size:14px;line-height:1.5;color:var(--text-2)}
.pay-safe .i{width:19px;height:19px;margin-top:1px;color:var(--lime-ink)}
.checkout{padding:6px 24px 22px;scroll-margin-top:calc(var(--top-h) + 16px)}
.co-step{padding:20px 0;border-top:1px solid var(--border)}
.co-step:first-child{border-top:0}
.co-step__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.co-step__head b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.co-num{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lime);font-size:14px;font-weight:800}
.co-num--lg{width:46px;height:46px;font-size:18px}
.co-note{font-size:14px;line-height:1.5;color:var(--text-2)}
.co-note--warn{margin-top:12px;color:var(--warning);font-weight:600}
.co-login{display:flex;flex-direction:column;gap:12px}
.co-login__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-login__btns .btn{height:50px;padding:0 14px;font-size:15px}
.btn-tg{background:var(--tg);color:var(--on-ink)}
.btn-tg:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(var(--tg-rgb),.9)}
.co-form{display:grid;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--surface-2)}
.co-form[hidden]{display:none}
.co-form:not([hidden]){animation:rise .4s var(--ease-out)}
.co-label{display:grid;gap:6px;font-size:14px;font-weight:600}
.field{width:100%;height:52px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:500 16px var(--font);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.field:hover{border-color:var(--text-3)}
.field:focus{outline:none;border-color:var(--lime-ink);box-shadow:0 0 0 4px rgba(var(--lime-rgb),.28)}
.field[aria-invalid="true"]{border-color:var(--error)}
.field:disabled{background:var(--surface-2);color:var(--text-3)}
.co-hint{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;line-height:1.45;color:var(--text-2)}
.co-hint .i{width:18px;height:18px;margin-top:1px;color:var(--text-3)}
.co-hint b{color:var(--text);font-weight:600}
.co-account{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.co-account[hidden]{display:none}
.co-account__txt{flex:1;min-width:0}
.co-account__txt b,.co-account__txt small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-account__txt b{font-size:16px}
.co-account__txt small{font-size:13px;color:var(--text-2)}
.co-status{margin-top:10px;font-size:14px;font-weight:600;line-height:1.45;color:var(--text-2)}
.co-status.is-pro{color:var(--lime-ink)}
.co-plans{display:grid;gap:10px}
.plan{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;border:0;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);cursor:pointer;text-align:left;transition:box-shadow var(--dur-2),background-color var(--dur-2),transform var(--dur-1)}
.plan:hover{box-shadow:inset 0 0 0 1px var(--text-3)}
.plan:active{transform:scale(.99)}
.plan.is-selected{background:var(--lime-wash);box-shadow:inset 0 0 0 2.5px var(--lime),0 12px 24px -16px rgba(var(--lime-rgb),.9)}
.plan:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.plan:disabled{opacity:.5;cursor:not-allowed}
.plan__radio{position:relative;width:24px;height:24px;flex:none;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.plan.is-selected .plan__radio{background:var(--lime);box-shadow:none}
.plan.is-selected .plan__radio::after{content:'';position:absolute;left:8.5px;top:5px;width:5px;height:10px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.plan__txt{flex:1;min-width:0}
.plan__txt b{display:block;font-size:16px;font-weight:700}
.plan__txt small{display:block;margin-top:2px;font-size:13px;color:var(--text-2)}
.plan__txt s{margin-right:4px;color:var(--text-3)}
.plan__price{font-size:18px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan__badge{position:absolute;top:-10px;right:16px;padding:3px 10px;border-radius:var(--r-pill);background:var(--lime);color:var(--ink);font-size:11px;font-weight:800}
.plan__badge--ink{background:var(--ink);color:var(--on-ink)}
.co-pay{width:100%}
.co-error{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--error-soft);color:var(--error);font-size:14px;font-weight:600;line-height:1.45}
.co-error[hidden]{display:none}
.co-legal{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.co-widget{display:grid;gap:10px}
.co-widget[hidden]{display:none}
.co-back{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:14px}
.co-back .i{width:16px;height:16px;transform:rotate(180deg)}
.co-widget__mount{min-height:380px;display:grid;place-items:center;border-radius:var(--r-md)}
.co-widget__mount>*:not(.co-spinner){width:100%;place-self:stretch}
.co-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--lime-ink);animation:spin .8s linear infinite}
.checkout.is-paying [data-step="plan"]{opacity:.45;pointer-events:none}
.co-success,.co-pending{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 8px 20px;text-align:center}
.co-success[hidden],.co-pending[hidden],.co-main[hidden]{display:none}
.co-success:focus{outline:none}
.co-success__icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);box-shadow:0 0 0 10px var(--lime-soft);animation:pop .6s var(--ease-spring) both}
.co-success__icon .i{width:38px;height:38px;stroke-width:3}
.co-success p,.co-pending p{max-width:380px;color:var(--text-2)}
.co-success__btns{display:grid;gap:10px;width:100%;margin-top:6px}
.pay-how__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pay-how__card{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pay-how__card p{font-size:15px;line-height:1.55;color:var(--text-2)}
.page-pay .pay-how{padding-top:clamp(40px,6vw,72px)}
@media (max-width:1099px){
  .pay__grid{grid-template-columns:1fr}
  .pay__intro{position:static;align-items:center;text-align:center}
  .pay__title{max-width:16ch}
  .pay-benefits{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}
  .checkout{max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:759px){
  .pay__intro{gap:16px}
  .pay-benefits{gap:8px}
  .pay-benefits li{gap:8px;font-size:13px;line-height:1.3}
  .pay-benefits .ico{width:32px;height:32px;border-radius:10px}
  .pay-benefits .ico .i{width:16px;height:16px}
  .pay-safe{text-align:left;font-size:13px}
  .checkout{padding:2px 16px 18px}
  .co-login__btns{grid-template-columns:1fr}
  .pay-how__grid{grid-template-columns:1fr}
}

/* ── Без анимаций ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal,.js .load-in,.js .float,.js .a-tag,.js .phone--hero,.js .split .w>span,.js .tile-f--photo .det{opacity:1!important;translate:none!important;scale:none!important;animation:none!important}
  .js .hl__wave path,.js .board__chart .wchart__past{stroke-dashoffset:0!important;animation:none!important}
  .js .board__chart .wchart__plan,.js .board__chart .wchart__goal,.js .board__chart .wchart__pts,.js .board__chart .wchart__area{opacity:1!important;animation:none!important}
  .scan__line,.blob,.typing i{animation:none!important}
  .is-playing .step.is-active::after{display:none}
  .js .tile-f--coach .typing{display:none}.js .tile-f--coach .bubble__txt{display:block}.js .tile-f--coach .bubble--me{opacity:1}
}
/* lava: поле почты над кнопкой оплаты */
.co-step[data-step="pay"] .co-label{margin-bottom:14px}
.co-note--sub{margin-top:12px;font-size:13px}
/* экран перехода на оплату lava.top */
.co-redirect{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.co-sum{width:100%;margin:0;padding:6px 16px;border-radius:18px;background:var(--surface-2);text-align:left}
.co-sum div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(60,60,67,.1)}
.co-sum div:last-child{border-bottom:0}
.co-sum dt{color:var(--text-2);font-size:14px}
.co-sum dd{margin:0;font-weight:700;font-size:15px;text-align:right;overflow-wrap:anywhere}
.co-redirect .btn{width:100%}
/* способы оплаты: карта (lava.top) и СБП (ЮKassa) — светлые плашки со значками */
.paym{display:grid;gap:10px}
.paym__btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(60,60,67,.12),0 6px 16px -12px rgba(0,0,0,.25);font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.paym__btn:hover{box-shadow:inset 0 0 0 2px var(--lime),0 10px 20px -14px rgba(var(--lime-rgb),.9)}
.paym__btn:active{transform:scale(.99)}
.paym__btn:disabled{opacity:.6;cursor:default}
.paym__btn.is-loading .paym__price{opacity:.4}
.paym__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--surface-2)}
.paym__ico .i{width:22px;height:22px}
.paym__txt{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.paym__txt b{font-size:16px;font-weight:600;line-height:1.2}
.paym__txt small{font-size:13px;color:var(--text-2)}
.paym__marks{display:flex;flex-wrap:wrap;gap:5px}
.paym__price{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pmark{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 6px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px rgba(60,60,67,.14)}
.co-qr{width:220px;height:220px;padding:10px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px rgba(60,60,67,.12)}
.co-qr svg{width:100%;height:100%;display:block}
.co-wait{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--text-2)}
.co-spinner--sm{width:16px;height:16px;border-width:2px}
.co-sbp__mark{display:block;line-height:0}
.co-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:13px;color:var(--text-3)}
.co-secure .i{width:15px;height:15px}
@media (max-width:440px){
  .paym__btn{gap:10px;padding:12px}
  .paym__ico{width:38px;height:38px;border-radius:12px}
  .paym__txt b{font-size:15px}
  .paym__txt small{font-size:12px}
  .paym__price{font-size:15px}
  .pmark{padding:0 4px}
}