/* v7: боли «зачёркиваем», день с ботом, колода разборов, тарифы ровно, бонусы-бирки. Цвета только из токенов style.css */
.hand{font-family:Caveat,"Segoe Print",cursive;font-weight:700;color:var(--moon-ink);letter-spacing:0}
.sub7{color:var(--muted);max-width:640px;margin:-12px 0 clamp(24px,3vw,36px)}
.note7{margin-top:22px;padding:14px 18px;border-radius:16px;background:var(--moon-soft);color:var(--ink);font-size:16px;max-width:720px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- боли: фраза мамы зачёркивается, рядом от руки ответ бота ---------- */
.plist{list-style:none;display:grid;gap:clamp(14px,2vw,22px)}
.pr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 28px;align-items:center;
  padding-bottom:clamp(14px,2vw,22px);border-bottom:1px solid var(--line)}
.pr:last-child{border-bottom:0}
.pq{font-size:clamp(18px,2.1vw,22px);font-weight:700;line-height:1.35;color:var(--ink)}
.pq span{background:linear-gradient(var(--moon),var(--moon)) 0 58%/0% 3px no-repeat;transition:background-size .7s cubic-bezier(.6,.1,.2,1),color .7s}
.pa{font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:clamp(25px,2.6vw,31px);line-height:1.1;color:var(--night);
  transform:rotate(-1.5deg)}
.pa::before{content:"→ ";color:var(--moon)}
.js .pr .pa{opacity:0;translate:-8px 0;transition:opacity .5s .55s,translate .5s .55s}
.js .pr.on .pq span{background-size:100% 3px;color:var(--muted)}
.js .pr.on .pa{opacity:1;translate:0 0}
@media (max-width:700px){
  .pr{grid-template-columns:1fr}
  .pa{transform:rotate(-1deg);padding-left:10px}
}

/* ---------- один день с ботом: лента времени, по ней катится луна ---------- */
.day{list-style:none;position:relative;display:grid;gap:clamp(14px,2vw,20px);--x:clamp(74px,9vw,104px)}
.day::before{content:"";position:absolute;left:calc(var(--x) + 8px);top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--moon),var(--moon)) 0 0/100% calc(var(--p) * 100%) no-repeat,var(--line)}
.day::after{content:"🌙";position:absolute;left:calc(var(--x) - 5px);top:calc(var(--p) * (100% - 30px));width:30px;height:30px;
  display:grid;place-items:center;font-size:16px;border-radius:50%;background:var(--night);box-shadow:0 0 0 4px var(--bg),0 0 18px hsl(42 90% 60%/.55)}
.day li{display:grid;grid-template-columns:var(--x) minmax(0,1fr);gap:clamp(24px,3.5vw,44px);align-items:start}
.day time{font-family:Unbounded,Manrope,sans-serif;font-weight:700;font-size:clamp(17px,2vw,22px);color:var(--ink);padding-top:14px;text-align:right}
.dc{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;max-width:620px}
.dc b{display:block;font-size:17px;margin-bottom:2px}
.dc p{color:var(--muted);font-size:16px;line-height:1.45}
.js .day li{opacity:.25;transition:opacity .5s}
.js .day li.on{opacity:1}
.js .day li .dc{transform:translateY(8px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.js .day li.on .dc{transform:none}
@media (max-width:600px){.day{--x:58px}.day li{gap:26px}.day time{font-size:15px}.dc{padding:12px 14px}}

@media (min-width:980px){
  .day7 .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 clamp(32px,5vw,72px);align-items:start}
  .day7 .d-head{position:sticky;top:96px}
  .day7 .note7{margin-top:18px}
}

/* ---------- разбор консультанта: колода ---------- */
.cons-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.cons-text p{color:var(--muted);margin-top:4px}
.cons-text .hand{font-size:28px;margin-top:18px;transform:rotate(-2deg);display:inline-block}
.cons-fine{grid-column:1/-1}
section.cons7{overflow-x:clip}
.deck{position:relative;max-width:520px;width:100%;justify-self:center;outline:none}
.deck-stack{position:relative;display:grid;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;padding-top:30px}
.deck-stack:active{cursor:grabbing}
.dcard{grid-area:1/1;background:#d9e8cf;border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:270px;
  box-shadow:0 18px 40px rgb(20 30 70/.16);transform-origin:50% 100%;will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,box-shadow .5s}
.dcard.top{box-shadow:0 26px 50px rgb(20 30 70/.24)}
.dcard figcaption{font-weight:800;font-size:16px;color:#2c4a1f;padding:2px 4px}
.dcard .bubble{background:#fff;color:#18203d;border-radius:18px 18px 18px 6px;padding:14px 16px;font-size:16px;line-height:1.5}
.deck-nav{position:relative;z-index:9;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px}
.deck-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--night);color:#fff;font-size:22px;font-weight:800;cursor:pointer;transition:transform .2s}
.deck-btn:hover{transform:scale(1.06)}
.deck-btn:active{transform:scale(.94)}
.deck-dots{display:flex;gap:7px}
.deck-dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .35s,background .35s}
.deck-dots i.on{width:24px;background:var(--moon)}
.deck.hint .dcard.top{animation:nudge 1.4s .3s cubic-bezier(.4,0,.2,1) 1}
@keyframes nudge{0%,100%{translate:0 0;rotate:0deg}30%{translate:-34px 0;rotate:-4deg}55%{translate:10px 0;rotate:1deg}}
@media (max-width:900px){.cons-grid{grid-template-columns:1fr}.cons-text .hand{font-size:26px}}

/* ---------- тарифы: ровный ряд 0 → 490 → год, кнопки на одной линии ---------- */
.prices{align-items:stretch}
.price{height:100%}
.price > .btn,.price > .btn.btn-soft{margin-top:auto}
@media (max-width:900px){.price.best{order:0}}

/* бонусы годового: подарочные бирки на верёвочке */
.gifts7{background:var(--moon-soft);border-radius:18px;padding:16px 14px 14px;margin-top:4px}
.gifts-h7{font-weight:800;font-size:15px;margin-bottom:12px}
.gifts-h7 .hand{font-size:26px;display:inline-block;transform:rotate(-3deg);margin-right:4px}
.tags{list-style:none;display:grid;gap:10px}
.tag{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  background:var(--surface);border:1.5px dashed var(--moon);border-radius:10px 16px 16px 10px;padding:10px 12px 10px 30px;
  transform:rotate(var(--r,0deg));transform-origin:0 50%}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  border:2px solid var(--moon);background:var(--moon-soft)}
.tag .g b{display:block;font-size:14.5px;line-height:1.3}
.tag .g small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:2px}
.pz{display:grid;justify-items:end;line-height:1}
.pz s{font-size:14px;color:var(--muted);text-decoration-color:var(--moon-ink);text-decoration-thickness:2px}
.pz em{font-family:Caveat,"Segoe Print",cursive;font-style:normal;font-weight:700;font-size:21px;color:var(--ok-ink);transform:rotate(-4deg);margin-top:2px;white-space:nowrap}
.tag-big{border-style:solid;border-width:2px}
.js .tag{transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .4s;opacity:0;transform:rotate(calc(var(--r,0deg) * 6)) translateY(10px)}
.js .tags.on .tag{opacity:1;transform:rotate(var(--r,0deg))}
.js .tags.on .tag:nth-child(2){transition-delay:.12s}.js .tags.on .tag:nth-child(3){transition-delay:.24s}.js .tags.on .tag:nth-child(4){transition-delay:.36s}
.value7{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 10px;margin-top:14px;padding-top:12px;border-top:2px dashed hsl(40 70% 55%/.5)}
.value7 .vl{font-size:15px;color:var(--muted)}
.vw{justify-self:end;position:relative;font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:26px;color:var(--muted)}
.vw s{text-decoration:none;position:relative}
.vw s::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;border-radius:3px;background:var(--moon-ink);transform:rotate(-8deg) scaleX(var(--k,1));transform-origin:0 50%;transition:transform .6s .5s}
.js .vw s::after{--k:0}.js .tags.on ~ .value7 .vw s::after{--k:1}
.vp{justify-self:end;font-family:Unbounded,Manrope,sans-serif;font-size:24px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .js .pr .pa,.js .day li,.js .day li .dc,.js .tag{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
  .js .pr .pq span{background-size:100% 3px;transition:none}
  .dcard{transition:none}.deck.hint .dcard.top{animation:none}
  .js .vw s::after{--k:1}
}

/* ---------- шапка: логотип как в приложении - светящееся «Спи, малыш» и луна с мишкой ---------- */
.brand7{display:flex;align-items:center;gap:0;text-decoration:none;height:56px;margin-top:10px}
.brand7 .bt{font-family:Pacifico,cursive;font-weight:400;font-size:28px;color:#fff;text-shadow:0 0 12px rgba(242,196,109,.6),0 0 26px rgba(242,196,109,.25);white-space:nowrap;position:relative}
.brand7 .bmoon{width:72px;height:72px;margin:-26px -18px 0 -4px;position:relative;animation:moonfloat 6s ease-in-out infinite}
.brand7 .bstars{width:46px;height:28px;margin:-8px 2px 0 -26px;filter:drop-shadow(0 0 3px rgba(255,231,163,.8));animation:twinkle 3.2s ease-in-out infinite}
@keyframes moonfloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:420px){.brand7 .bt{font-size:24px}.brand7 .bmoon{width:62px;height:62px}}

/* ---------- первый экран: быстрый результат без усилий, три строки ---------- */
.quick{list-style:none;display:grid;gap:10px;margin:18px 0 26px;max-width:520px}
.quick li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;color:var(--on-night);font-size:17px;line-height:1.4}
.qk{justify-self:start;font-weight:800;font-size:14px;color:#1b2547;background:var(--moon);border-radius:999px;padding:3px 11px;white-space:nowrap}
.qk-you{background:transparent;color:var(--moon);box-shadow:inset 0 0 0 1.5px var(--moon)}
@media (max-width:420px){.quick li{grid-template-columns:1fr;gap:4px}.quick{gap:14px}}

/* главная кнопка светится и раз в несколько секунд по ней пробегает блик */
.btn-glow{position:relative;overflow:hidden;box-shadow:0 0 0 0 hsl(42 90% 60%/.6),0 10px 28px hsl(40 80% 45%/.3);animation:ctaglow 2.6s ease-in-out infinite}
.btn-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgb(255 255 255/.55) 50%,transparent 65%);transform:translateX(-120%);animation:ctashine 4.5s ease-in-out infinite}
@keyframes ctaglow{0%,100%{box-shadow:0 0 0 0 hsl(42 90% 60%/.55),0 10px 28px hsl(40 80% 45%/.3)}50%{box-shadow:0 0 0 10px hsl(42 90% 60%/0),0 10px 34px hsl(40 85% 55%/.5)}}
@keyframes ctashine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.btn-glow,.btn-glow::after,.brand7 .bmoon,.brand7 .bstars{animation:none}}

/* ---------- экран чата: объём, наклон, покачивание, слои на разной глубине ---------- */
.demo7{perspective:1100px}
.demo7 .tilt{transform-style:preserve-3d;transform:rotateY(var(--ry,-10deg)) rotateX(var(--rx,5deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);
  animation:phonefloat 7s ease-in-out infinite}
@keyframes phonefloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.demo7 .chat{position:relative;transform-style:preserve-3d;
  box-shadow:0 2px 0 hsl(230 40% 30%) inset,0 50px 80px -20px hsl(230 70% 4%/.7),0 20px 40px hsl(230 60% 5%/.45),0 0 70px hsl(42 90% 60%/.12)}
.demo7 .chat::before{content:"";position:absolute;inset:-8px;border-radius:30px;pointer-events:none;
  background:linear-gradient(135deg,rgb(255 255 255/.16),transparent 40%);mix-blend-mode:screen}
.demo7 .msg,.demo7 .pinbar,.demo7 .keys{transform:translateZ(18px);box-shadow:0 6px 14px rgb(30 50 30/.12)}
.demo7 .l2{transform:translateZ(24px)}.demo7 .l3{transform:translateZ(36px)}.demo7 .l4{transform:translateZ(30px)}.demo7 .l5{transform:translateZ(26px);box-shadow:none}
.demo7 .keys div{box-shadow:0 4px 10px rgb(30 50 30/.12)}
.msg time{float:right;margin:6px 0 -4px 10px;font-size:11.5px;color:#7a8a72;font-variant-numeric:tabular-nums}

/* закреп - как полоска закреплённого сообщения в Telegram, без слова «Закреп» */
.pinbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:9px 12px;margin-bottom:10px;font-size:14px;font-weight:700;color:#18203d}
.pinbar i{flex:none;width:3px;align-self:stretch;border-radius:2px;background:#3390ec}
.pinbar span{flex:1;line-height:1.35}
.pinbar svg{flex:none;width:16px;height:16px;color:#8a97a6}

/* голосовое как в Telegram: круглая кнопка ▶, волна, длительность, галочки, расшифровка */
.msg.voice{max-width:82%;padding:9px 11px 8px;background:#e1fec6}
.vrow{display:flex;align-items:center;gap:10px}
.play{flex:none;width:40px;height:40px;border-radius:50%;background:#4fae4e;display:grid;place-items:center}
.play svg{width:20px;height:20px;margin-left:2px}
.wave{flex:1;height:26px;color:#4fae4e;min-width:0}
.vmeta{display:flex;justify-content:space-between;font-size:12px;color:#5f9a4e;margin:2px 0 0 50px}
.vt b{color:#4fae4e;font-weight:700;letter-spacing:-2px;margin-left:2px}
.vtext{margin:6px 0 0;padding-top:6px;border-top:1px solid rgb(79 174 78/.25);font-size:14px;color:#2d4a26}
.js .wave rect{transform-origin:center;transform-box:fill-box;animation:wv 1.6s ease-in-out infinite}
.js .wave rect:nth-child(3n){animation-delay:.2s}.js .wave rect:nth-child(3n+1){animation-delay:.45s}
@keyframes wv{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@media (max-width:819px){.demo7 .tilt{--ry:-6deg;--rx:4deg}}

/* ---------- под кнопкой: пункты загораются, когда до них добегает звёздочка ---------- */
.perks{list-style:none;position:relative;display:grid;gap:12px;margin-top:24px;padding-left:34px;max-width:470px}
.perks::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(var(--moon),var(--moon)) 0 0/100% calc(var(--p) * 100%) no-repeat,rgb(255 255 255/.14)}
.perks::after{content:"✦";position:absolute;left:0;top:calc(var(--p) * (100% - 20px));width:20px;height:20px;display:grid;place-items:center;
  color:#ffe7a3;font-size:17px;text-shadow:0 0 8px #f4c86a,0 0 18px #f4c86a}
.perks li{color:var(--on-night-muted);font-size:16px;line-height:1.4}
.perks b{color:var(--on-night)}
.js .perks li{opacity:.18;translate:-6px 0;transition:opacity .45s,translate .45s}
.js .perks li.on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.demo7 .tilt,.js .wave rect{animation:none}.js .perks li{opacity:1;translate:none}}
@media (max-width:819px){
  .mishka{margin-top:56px}                       /* мишка не залезает на пункты со звёздочкой */
  .draft{position:fixed;top:auto;bottom:12px;left:12px;transform:none;font-size:13px;opacity:.9}
}

/* ---------- тарифы: мишки вместо иконок, месяц в стиле годового, «без автосписаний» от руки ---------- */
.tbear{display:block;height:auto;filter:drop-shadow(0 12px 14px rgb(40 30 10/.18));margin:-6px 0 2px}
.tb1{width:92px}.tb2{width:112px}.tb3{width:134px;filter:drop-shadow(0 12px 16px rgb(40 30 10/.2)) drop-shadow(0 0 18px hsl(42 95% 62%/.45))}
.price:hover .tbear{animation:bearhop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes bearhop{40%{translate:0 -8px;rotate:-3deg}}
.price.mid{border:2px solid hsl(42 70% 70%);background:linear-gradient(180deg,hsl(44 90% 97%),var(--surface) 40%);box-shadow:0 14px 34px hsl(40 80% 45%/.09);position:relative}
.price.best{position:relative;background:linear-gradient(180deg,hsl(44 95% 94%),var(--surface) 45%)}
.badge-mid{background:var(--surface);color:var(--moon-ink);box-shadow:inset 0 0 0 1.5px hsl(42 70% 70%)}
.noauto{font-size:14px;color:var(--muted);line-height:1.3;margin-top:-2px}
.noauto .hand{font-size:22px;color:var(--ok-ink);display:inline-block;transform:rotate(-2deg);margin-right:4px}
.noauto .hand::before{content:"✓ ";font-family:Manrope,sans-serif;font-size:16px}
.gifts-mid{margin-top:6px}
.gifts-mid .tag .pz em{font-size:20px}
@media (prefers-reduced-motion:reduce){.price:hover .tbear{animation:none}}
.badge-free{background:var(--mint-soft);color:var(--ok-ink)}
.price .tag::before{content:"";color:transparent}
.price .tags li{padding-left:30px}

/* мишки «живут» на карточках: первый и третий выглядывают из-за верхнего края, второй сидит на краю */
.prices{padding-top:136px;column-gap:14px}
.pcol{position:relative;display:flex}
.pcol > .price{flex:1;position:relative;z-index:1}
.pcol .tbear{position:absolute;margin:0;height:auto;pointer-events:none;transition:translate .5s cubic-bezier(.3,1.5,.5,1)}
.pc1 .tbear{width:112px;left:26px;top:-66px;z-index:0;animation:peek 5s ease-in-out infinite}
.pc2 .tbear{width:118px;right:16px;top:-108px;z-index:2;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.pc3 .tbear{width:150px;right:22px;top:-100px;z-index:0;animation:peek 6s ease-in-out infinite .8s}
@keyframes peek{0%,100%{translate:0 10px}30%,70%{translate:0 0}}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.pcol:hover .tbear{animation-play-state:paused;translate:0 -14px}
.pc2:hover .tbear{translate:0 -6px}
@media (max-width:900px){.prices{row-gap:118px}}
@media (prefers-reduced-motion:reduce){.pcol .tbear{animation:none}}

/* ---------- Настя представляет тарифы: фото + «сообщение» ---------- */
.say{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;max-width:920px}
.say-photo{position:relative;width:clamp(140px,18vw,210px)}
.say-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 6px var(--moon-soft),0 0 0 8px var(--moon),0 18px 40px rgb(20 30 70/.18)}
.say-me{position:absolute;right:-18px;bottom:6px;font-size:28px;transform:rotate(-8deg);background:var(--surface);padding:0 10px;border-radius:12px;box-shadow:0 6px 16px rgb(20 30 70/.12)}
.say-bubble{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:28px 28px 28px 8px;padding:clamp(20px,3vw,32px);box-shadow:0 18px 40px rgb(20 30 70/.07)}
.say-bubble::before{content:"";position:absolute;left:-11px;bottom:22px;width:22px;height:22px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.say-bubble h2{margin-bottom:14px}
.say-bubble p{color:var(--ink)}
.say-bubble p + p{margin-top:10px}
.say-key{font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:clamp(28px,3vw,36px);color:var(--night);line-height:1.1;transform:rotate(-1.5deg);display:inline-block}
.say-arrow{font-size:clamp(28px,3vw,34px);margin:22px 0 0 clamp(0px,12vw,170px);transform:rotate(-2deg)}
.say-arrow span{display:inline-block;animation:arrowbob 1.8s ease-in-out infinite}
@keyframes arrowbob{50%{translate:0 6px}}
@media (max-width:640px){
  .say{grid-template-columns:1fr;justify-items:start}
  .say-bubble{border-radius:28px 8px 28px 28px}
  .say-bubble::before{left:44px;top:-11px;bottom:auto;transform:rotate(135deg)}
  .say-arrow{margin-left:0}
}

/* ---------- после тарифов Настя продолжает: записка на скотче ---------- */
.letter{position:relative;max-width:760px;margin-inline:auto;background:hsl(45 80% 97%);color:#2a2f45;border-radius:6px;
  padding:clamp(28px,5vw,52px) clamp(22px,5vw,56px) clamp(26px,4vw,40px);transform:rotate(-.6deg);
  background-image:repeating-linear-gradient(transparent 0 33px,hsl(215 40% 88%) 33px 34px);background-position:0 70px;
  box-shadow:0 2px 0 hsl(40 30% 85%),0 24px 50px rgb(40 30 10/.14)}
.letter p{font-size:17px;line-height:34px;margin:0 0 0}
.letter p + p{margin-top:0}
.letter-h{font-size:clamp(32px,3.6vw,42px);color:var(--night);margin-bottom:6px!important;line-height:1.2!important}
.letter mark{background:linear-gradient(transparent 55%,hsl(44 95% 70%/.6) 55%);color:inherit;padding:0}
.tape{position:absolute;top:-14px;width:110px;height:30px;background:hsl(44 70% 82%/.75);box-shadow:0 2px 6px rgb(40 30 10/.08)}
.tape-l{left:22px;transform:rotate(-6deg)}.tape-r{right:22px;transform:rotate(5deg)}
.wish7{font-weight:700}
.moments{list-style:none;display:grid;gap:6px;margin:8px 0 22px}
.moments li{display:flex;align-items:center;gap:12px;font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:clamp(25px,2.6vw,30px);color:var(--night);line-height:1.2}
.mi{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:22px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgb(40 30 10/.1)}
.js .moments li{opacity:.2;translate:-8px 0;transition:opacity .5s,translate .5s}
.js .letter.on .moments li{opacity:1;translate:0 0}
.js .letter.on .moments li:nth-child(1){transition-delay:.3s}.js .letter.on .moments li:nth-child(2){transition-delay:.9s}.js .letter.on .moments li:nth-child(3){transition-delay:1.5s}
.js .letter.on .mi{animation:glowpop .8s ease-out both}
.js .letter.on li:nth-child(1) .mi{animation-delay:.3s}.js .letter.on li:nth-child(2) .mi{animation-delay:.9s}.js .letter.on li:nth-child(3) .mi{animation-delay:1.5s}
@keyframes glowpop{0%{box-shadow:0 0 0 0 hsl(42 95% 60%/.7)}100%{box-shadow:0 0 0 14px hsl(42 95% 60%/0),0 4px 12px rgb(40 30 10/.1)}}
.sign7{display:flex;align-items:center;gap:16px;border-top:1px dashed hsl(40 40% 75%);padding-top:18px}
.sign7 img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 6px 14px rgb(40 30 10/.15)}
.sign7 p{line-height:1.3!important}
.sign7 small{color:#6a6f85;font-size:14px}
.signature{font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:48px;color:var(--night);line-height:1!important;margin:2px 0!important}
.signature span{display:inline-block;transform:rotate(-4deg);padding-right:6px}
.js .signature span{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.5,0,.3,1) 2.1s}
.js .letter.on .signature span{clip-path:inset(0 0 0 0)}
@media (max-width:640px){.letter{transform:none}.letter p{font-size:16px}}

/* кнопки в тарифах тоже светятся (мягкие - помягче) */
.btn-glow-soft{animation-name:ctaglowsoft}
@keyframes ctaglowsoft{0%,100%{box-shadow:0 0 0 0 hsl(42 90% 60%/.45)}50%{box-shadow:0 0 0 9px hsl(42 90% 60%/0),0 8px 22px hsl(40 80% 45%/.18)}}
@media (prefers-reduced-motion:reduce){.js .moments li{opacity:1;translate:none}.js .signature span{clip-path:none}.say-arrow span,.js .letter.on .mi{animation:none}}
.say-photo img{height:auto}
.letter .letter-h{font-size:clamp(32px,3.6vw,42px);line-height:1.2;margin-bottom:6px}
.letter .signature{font-size:52px;line-height:1;margin:4px 0}
.sign7 img{height:64px}

/* ---------- бот + приложение: окошки настоящих экранов ---------- */
.app-head{max-width:720px}
.appwin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);align-items:start;margin-top:8px;perspective:1200px}
.aw{margin:0;display:grid;gap:10px;justify-items:center}
.aw img{width:100%;height:auto;border-radius:22px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 2px 0 rgb(255 255 255/.7) inset,0 24px 50px -12px rgb(20 30 70/.28),0 8px 18px rgb(20 30 70/.08)}
.aw figcaption{font-size:clamp(22px,2.2vw,26px);transform:rotate(-2deg);text-align:center;line-height:1.1}
.aw1{transform:rotate(-2.5deg) translateY(18px)}.aw2{transform:rotate(1.5deg) translateY(-6px)}
.aw3{transform:rotate(-1deg) translateY(24px)}.aw4{transform:rotate(2deg)}
.aw img{animation:awfloat 7s ease-in-out infinite}
.aw2 img{animation-delay:-2s}.aw3 img{animation-delay:-4s}.aw4 img{animation-delay:-5.5s}
@keyframes awfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.app-tabs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,44px)}
.app-tabs li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:15px}
.js .aw{opacity:0;translate:0 30px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1)}
.js .appwin.on .aw{opacity:1;translate:0 0}
.js .appwin.on .aw2{transition-delay:.12s}.js .appwin.on .aw3{transition-delay:.24s}.js .appwin.on .aw4{transition-delay:.36s}
@media (max-width:900px){
  .appwin{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:20px 16px 26px;margin-inline:calc(-1 * clamp(16px,5vw,48px));scrollbar-width:none}
  .appwin::-webkit-scrollbar{display:none}
  .aw{flex:0 0 72%;scroll-snap-align:center}
  .aw1,.aw2,.aw3,.aw4{transform:none}
}
@media (prefers-reduced-motion:reduce){.aw img{animation:none}.js .aw{opacity:1;translate:none}}

/* напоминалка у годового: от плашки «249 ₽ в месяц» отходит пунктир к записке */
.memo{position:relative;margin:14px 0 4px 18px;padding:12px 14px 12px 16px;background:#fffdf5;border:1px solid hsl(42 70% 80%);border-radius:14px;transform:rotate(-1deg);box-shadow:0 8px 20px hsl(40 60% 40%/.1)}
.memo::before{content:"";position:absolute;left:-18px;top:-30px;width:18px;height:46px;border-left:2px dashed var(--moon);border-bottom:2px dashed var(--moon);border-bottom-left-radius:12px}
.memo::after{content:"";position:absolute;left:-23px;top:-36px;width:10px;height:10px;border-radius:50%;background:var(--moon);box-shadow:0 0 10px var(--moon)}
.memo .hand{font-size:24px;display:block;line-height:1;margin-bottom:2px}
.memo p{font-size:14.5px;line-height:1.4;color:var(--ink)}
.tnote{font-size:14px;color:var(--muted);margin-top:-2px}
/* 7 дней бесплатно - выделено прямо в годовом */
.try7{display:flex;align-items:center;gap:12px;background:var(--night);color:var(--on-night);border-radius:16px;padding:10px 14px;margin-top:4px;
  box-shadow:0 0 0 3px hsl(42 90% 60%/.35),0 10px 24px hsl(230 50% 15%/.25);animation:trypulse 2.8s ease-in-out infinite}
.try-n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--moon);color:#1b2547;display:grid;place-items:center;font-family:Unbounded,Manrope,sans-serif;font-weight:700;font-size:18px}
.try7 b{display:block;font-size:15.5px}.try7 small{display:block;font-size:14px;color:var(--on-night-muted)}
@keyframes trypulse{0%,100%{box-shadow:0 0 0 3px hsl(42 90% 60%/.35),0 10px 24px hsl(230 50% 15%/.25)}50%{box-shadow:0 0 0 6px hsl(42 90% 60%/.15),0 10px 24px hsl(230 50% 15%/.25)}}
@media (prefers-reduced-motion:reduce){.try7{animation:none}}
/* напоминалка: пунктир вверх к плашке «249 ₽ в месяц» (она справа над запиской) */
.memo{margin:30px 0 12px;transform:rotate(-.8deg)}
.memo::before{left:auto;right:46px;top:-34px;width:0;height:34px;border-left:2px dashed var(--moon);border-bottom:0;border-radius:0}
.memo::after{left:auto;right:42px;top:-40px}
.try7{margin-top:2px}
@media (max-width:900px){
  .appwin{align-items:center}
}
.swipe-hint{display:none}
@media (max-width:900px){
  .swipe-hint{display:block;font-size:24px;margin-top:-14px}
  .aw img{width:auto;max-width:100%;height:auto;max-height:290px}
}

/* ---------- «Один день» как приглашение + вопрос про режим как переписка в чате ---------- */
.invite{font-size:clamp(34px,4vw,48px);line-height:1.05;color:var(--night);transform:rotate(-2deg);margin-bottom:10px}
.botsay{display:grid;gap:8px;margin-top:18px;max-width:440px;background:#d9e8cf;border-radius:22px;padding:14px 12px}
.bs-q{justify-self:end;max-width:85%;background:#e1fec6;color:#18203d;border-radius:18px 18px 6px 18px;padding:9px 13px;font-size:15.5px;line-height:1.4;box-shadow:0 3px 8px rgb(30 50 30/.1)}
.bs-a{justify-self:start;max-width:92%;background:#fff;color:#18203d;border-radius:18px 18px 18px 6px;padding:10px 13px;font-size:15.5px;line-height:1.45;box-shadow:0 3px 8px rgb(30 50 30/.1)}
.typing{display:none;gap:4px;padding:4px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:#8a97a6;animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
.js .bs-q,.js .bs-a{opacity:0;translate:0 10px;transition:opacity .4s,translate .4s}
.js .botsay.q .bs-q,.js .botsay.t .bs-a,.js .botsay.on .bs-a{opacity:1;translate:0 0}
.js .botsay.t:not(.on) .typing{display:flex}
.js .botsay.t:not(.on) .bs-a p{display:none}
@media (prefers-reduced-motion:reduce){.js .bs-q,.js .bs-a{opacity:1;translate:none}.js .botsay .typing{display:none!important}.js .botsay .bs-a p{display:block!important}}
.cons-text .invite{color:var(--night)}.cons-text .hand:not(.invite){color:var(--moon-ink)}

/* ---------- «Отвечаю на вопросы мам»: вопрос мамы, ответ Насти с фото ---------- */
.faq7 summary{font-weight:700;color:var(--ink)}
.faq7 .ans{display:flex;gap:12px;align-items:flex-start;margin-top:12px}
.faq7 .ans img{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--moon)}
.faq7 .ans p{background:var(--moon-soft);border-radius:4px 18px 18px 18px;padding:10px 14px;color:var(--ink);line-height:1.5;margin:0}
.faq7 details[open]{box-shadow:0 10px 26px rgb(20 30 70/.07)}
.faq7 details[open] .ans{animation:ansin .35s ease-out}
@keyframes ansin{from{opacity:0;translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.faq7 details[open] .ans{animation:none}}
.safe7{display:flex;gap:14px;align-items:center;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.safe7 > span{font-size:24px;width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--mint-soft)}
.safe7 p{color:var(--muted);font-size:15.5px;margin-top:2px}
@media (max-width:979px){.botsay{margin-bottom:28px}}
/* годовой мишка «вытащен»: целиком на краю карточки, крупнее, на золотом месяце со свечением */
.pc3 .tbear{width:178px;right:6px;top:-128px;z-index:2;animation:moonrock 6s ease-in-out infinite;transform-origin:50% 90%;
  filter:drop-shadow(0 14px 16px rgb(40 30 10/.22)) drop-shadow(0 0 22px hsl(42 95% 62%/.55))}
@keyframes moonrock{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
.pc3:hover .tbear{translate:0 -8px}
@media (max-width:900px){.prices{row-gap:136px}}
.vcons{grid-column:1/-1;margin-top:10px;padding-top:10px;border-top:1px dashed hsl(40 70% 55%/.5);font-size:14.5px;line-height:1.45;color:var(--ink)}
.vcons .hand{font-size:23px;display:block;line-height:1;margin-bottom:2px;color:var(--moon-ink)}

/* ---------- первый экран: чат + окошки приложения в одной листалке ---------- */
.show7{width:min(380px,100%)}
.show-h{font-size:clamp(24px,2.4vw,28px);color:var(--moon);line-height:1.1;margin:0 0 10px 6px;transform:rotate(-2deg)}
.show-h span{display:inline-block;animation:arrowbob2 1.6s ease-in-out infinite}
@keyframes arrowbob2{50%{translate:5px 0}}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:18px;padding:16px 8px 22px;margin:0 -8px;scrollbar-width:none;outline:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:grid;align-content:center;justify-items:center;gap:10px}
.slide.sapp,.slide.scons{align-content:start}   /* короткие скриншоты не висят посередине с пустотой (Настя 07.11) */
.sapp img{width:100%;height:auto;max-height:470px;object-fit:contain;border-radius:24px;background:#fff;
  box-shadow:0 2px 0 rgb(255 255 255/.6) inset,0 40px 70px -20px hsl(230 70% 4%/.7),0 18px 36px hsl(230 60% 5%/.45),0 0 60px hsl(42 90% 60%/.12)}
.slide .hand,.slide .cap{font-size:24px;color:var(--moon);transform:rotate(-2deg);margin:0}
.show-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.show7 .deck-btn{width:42px;height:42px;font-size:18px;background:rgb(255 255 255/.12);border:1px solid rgb(255 255 255/.25)}
.show7 .deck-dots i{background:rgb(255 255 255/.25)}.show7 .deck-dots i.on{background:var(--moon)}
.show7 .tilt{animation-name:phonefloat}
@media (prefers-reduced-motion:reduce){.show-h span{animation:none}.track{scroll-behavior:auto}}
.hero .wrap > *{min-width:0}.show7{min-width:0;max-width:100%}
.show-h{position:relative;z-index:3;display:inline-block;background:rgb(20 28 58/.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 14px 6px;border-radius:14px}
.spdf img{background:none;box-shadow:none;border-radius:0;max-height:440px}

/* ---------- шапка короче: заголовок, одна фраза (результат, скорость, усилия), кнопка, «без риска» ---------- */
.lead7{font-size:clamp(18px,1.6vw,20px);color:var(--on-night-muted);max-width:30em;margin:16px 0 26px;line-height:1.5}
.lead7 b{color:var(--moon);font-weight:800}
.cta-note{font-size:23px;color:var(--moon);margin:12px 0 0 6px;transform:rotate(-2deg)}
.perks-wrap{grid-column:1/-1}
.perks-wrap .perks{margin-top:8px;max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px;padding-left:0;padding-top:34px}
.perks-wrap .perks::before{left:6px;right:6px;top:9px;bottom:auto;width:auto;height:2px;
  background:linear-gradient(90deg,var(--moon),var(--moon)) 0 0/calc(var(--p) * 100%) 100% no-repeat,rgb(255 255 255/.14)}
.perks-wrap .perks::after{top:0;left:calc(var(--p) * (100% - 20px))}
@media (max-width:819px){
  .mishka{margin-top:8px}
  .perks-wrap .perks{grid-template-columns:1fr;padding-left:34px;padding-top:0}
  .perks-wrap .perks::before{left:9px;right:auto;top:6px;bottom:6px;width:2px;height:auto;
    background:linear-gradient(var(--moon),var(--moon)) 0 0/100% calc(var(--p) * 100%) no-repeat,rgb(255 255 255/.14)}
  .perks-wrap .perks::after{left:0;top:calc(var(--p) * (100% - 20px))}
}
.perks-wrap{position:relative;z-index:5}
@media (max-width:819px){.perks-wrap{order:4;margin-top:18px}}
@media (min-width:820px){.perks-wrap{margin-top:clamp(40px,6vw,90px)}}
/* пункты со звёздочкой: везде столбиком; на компьютере под кнопкой в левой колонке, мишка и листалка - на две строки */
.perks-wrap .perks{grid-template-columns:1fr!important;padding-left:34px!important;padding-top:0!important;max-width:470px}
.perks-wrap .perks::before{left:9px!important;right:auto!important;top:6px!important;bottom:6px!important;width:2px!important;height:auto!important;
  background:linear-gradient(var(--moon),var(--moon)) 0 0/100% calc(var(--p) * 100%) no-repeat,rgb(255 255 255/.14)!important}
.perks-wrap .perks::after{left:0!important;top:calc(var(--p) * (100% - 20px))!important}
@media (min-width:820px){
  .perks-wrap{grid-column:1;grid-row:2;margin-top:4px}
  .hero .wrap > .mishka{grid-row:1 / span 2}
  .hero .wrap > .demo{grid-row:1 / span 2}
}
@media (min-width:820px) and (max-width:1099px){.hero .wrap > .demo{grid-row:auto}.perks-wrap{grid-row:auto;grid-column:1/-1}}
@media (max-width:819px){.mishka{margin-top:44px}}
@media (min-width:820px) and (max-width:1099px){.hero .wrap > .mishka{grid-row:auto}}
@media (min-width:820px) and (max-width:1099px){.perks-wrap{margin-top:70px}}
.day7 .invite{margin-bottom:14px}
.day7 .sub7{margin-top:4px}
.try-box{margin-top:6px}
/* под кнопкой в шапке - окошко в стиле подарков: 7 дней полностью + база бесплатно */
.hero-gift{margin-top:18px;max-width:420px;background:rgb(255 255 255/.07);border:1px solid rgb(244 200 106/.35);border-radius:18px;padding:12px 14px 14px;display:grid;gap:8px}
.hg-h{font-size:24px;color:var(--moon);line-height:1;transform:rotate(-2deg);display:inline-block}
.hg-tag{position:relative;background:hsl(44 95% 94%);color:#18203d;border:1.5px dashed var(--moon);border-radius:10px 14px 14px 10px;padding:8px 12px 8px 30px;font-size:15.5px;line-height:1.35;transform:rotate(-.8deg)}
.hg-2{transform:rotate(.8deg)}
.hg-tag::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:2px solid var(--moon);background:#fff}
/* кнопка в шапке под бонусом: без заливки, золотая граница со свечением */
.hero-gift + .hero-actions{margin-top:16px}
.btn-outline-glow{background:transparent;color:var(--moon);border:2px solid var(--moon);box-shadow:0 0 0 0 hsl(42 90% 60%/.5);animation:outglow 2.6s ease-in-out infinite;max-width:420px;width:100%}
.btn-outline-glow:hover{background:rgb(244 200 106/.12)}
@keyframes outglow{0%,100%{box-shadow:0 0 0 0 hsl(42 90% 60%/.45)}50%{box-shadow:0 0 0 8px hsl(42 90% 60%/0),0 0 22px hsl(42 90% 60%/.35)}}
@media (prefers-reduced-motion:reduce){.btn-outline-glow{animation:none}}

/* бонус: что входит в базу */
.hg-s{display:block;font-size:14px;font-weight:600;color:#4d5373;margin-top:2px}
/* надпись над листалкой заметнее */
.show-h{font-size:clamp(28px,3vw,34px);color:#ffe7a3;text-shadow:0 0 14px hsl(42 95% 60%/.6);padding:6px 16px 8px;border:1.5px solid rgb(244 200 106/.5)}
/* следующее окошко выглядывает справа - видно, что надо листать */
.slide{flex:0 0 84%}
.track{padding-right:16%;scroll-padding-left:8px}
.slide{scroll-snap-align:start}
.track{mask-image:linear-gradient(90deg,#000 80%,rgb(0 0 0/.35));-webkit-mask-image:linear-gradient(90deg,#000 80%,rgb(0 0 0/.35))}
/* разбор консультанта как окошко */
.scons .dcard.mini{position:static;transform:none;min-height:0;width:100%;box-shadow:0 30px 60px -18px hsl(230 70% 4%/.7)}
.track{padding-right:8px}.track::after{content:"";flex:0 0 calc(16% - 10px)}
.final-h{font-size:clamp(32px,3.6vw,44px);line-height:1.1;color:var(--moon);margin-bottom:8px;transform:rotate(-1.5deg)}
.final .final-h{color:var(--moon)}
.price .btn{text-align:center}
.gifts-mid .pz em{font-size:19px}
.gifts-mid .tag{grid-template-columns:1fr;gap:4px}.gifts-mid .pz{display:flex;gap:10px;align-items:baseline;justify-content:flex-start}

/* ---------- 3-й тариф: плашка «попробуйте 7 дней» в тон мишке на месяце ---------- */
.try7{position:relative;display:flex;align-items:center;gap:12px;margin:22px 0 14px;padding:12px 18px 12px 12px;border-radius:22px;
  background:radial-gradient(120% 140% at 0% 0%,#33477f 0%,transparent 60%),linear-gradient(135deg,var(--night) 0%,var(--night-2) 100%);
  color:var(--on-night);border:1.5px solid hsl(42 80% 62%/.7);box-shadow:0 0 0 4px hsl(42 90% 60%/.12),0 14px 30px rgb(20 30 70/.22);transform:rotate(-1.2deg);overflow:hidden}
.try7-bear{flex:none;width:64px;height:auto;margin:-6px 0 -10px -2px;filter:drop-shadow(0 6px 10px rgb(5 8 30/.5));animation:trybob 4s ease-in-out infinite}
@keyframes trybob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.try7-txt{display:grid;line-height:1.05}
.try7-txt .hand{color:var(--moon);font-size:clamp(26px,2.4vw,30px)}
.try7-txt b{font-size:clamp(17px,1.6vw,19px);font-weight:800;color:var(--on-night);margin-top:2px}
.try7-moon{margin-left:auto;font-size:26px;filter:drop-shadow(0 0 10px hsl(42 90% 60%/.8))}
.try7 .tst{position:absolute;font-style:normal;color:#ffe7a3;font-size:11px;opacity:.8;animation:trytw 2.4s ease-in-out infinite}
.try7 .s1{top:8px;right:58px}.try7 .s2{bottom:9px;right:84px;font-size:8px;animation-delay:.8s}.try7 .s3{top:14px;left:84px;font-size:7px;animation-delay:1.5s}
@keyframes trytw{0%,100%{opacity:.25;scale:.8}50%{opacity:1;scale:1.15}}
@media (prefers-reduced-motion:reduce){.try7-bear,.try7 .tst{animation:none}}
.try7-txt{white-space:nowrap}
@media (max-width:560px){.try7{gap:10px;padding-right:14px}.try7-bear{width:54px}.try7-moon{display:none}.try7-txt .hand{font-size:25px}.try7-txt b{font-size:16.5px}}
/* та же плашка на первом экране: чуть светлее синего фона, чтобы не сливалась */
.hero-gift .try7-hero{margin:2px 0;transform:rotate(-.8deg);background:radial-gradient(120% 140% at 0% 0%,#4a63a8 0%,transparent 60%),linear-gradient(135deg,#2c3d73 0%,#3a4f8f 100%);
  box-shadow:0 0 0 4px hsl(42 90% 60%/.18),0 0 26px hsl(42 90% 60%/.25)}
/* первый экран: «зеркальная» жёлтая плашка - золотой фон, тёмно-синий текст */
.hero-gift .try7-gold{background:radial-gradient(120% 160% at 0% 0%,#fff3cf 0%,transparent 55%),linear-gradient(135deg,#f6d27c 0%,var(--moon) 55%,#d99a2b 100%);
  border-color:#fff1c4;color:var(--night);box-shadow:0 0 0 4px hsl(42 90% 60%/.22),0 0 30px hsl(42 90% 60%/.45),0 12px 26px rgb(5 8 30/.35)}
.try7-gold .try7-txt .hand{color:var(--night)}
.try7-gold .try7-txt b{color:var(--night)}
.try7-gold .try7-moon{filter:none}
.try7-gold .tst{color:#fff}
/* первый экран: шапка без своей полосы, небо одно сверху донизу */
.home .top{background:transparent}
/* листалка: тёмные тени карточек обрезались краем ленты и давали прямоугольную тёмную полосу на фоне - тени мягкие и светлые */
.show7 .chat{box-shadow:0 2px 0 hsl(230 40% 30%) inset,0 0 0 1px rgb(255 255 255/.06),0 0 40px hsl(42 90% 60%/.14)}
.show7 .sapp img{box-shadow:0 0 0 1px rgb(255 255 255/.08),0 0 36px hsl(42 90% 60%/.12)}
a.try7{text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
a.try7:hover{transform:rotate(-.4deg) translateY(-2px) scale(1.01)}
a.try7:focus-visible{outline:3px solid var(--moon);outline-offset:3px}
/* колода разборов: у карточек сзади видны только края, текст не наезжает на верхнюю */
.deck .dcard > *{transition:opacity .35s}
.deck .dcard:not(.top) > *{opacity:0}

.get-app{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}.get-app .btn{flex:1 1 100%;max-width:360px;min-height:50px;padding:12px 18px;justify-content:center;text-align:center;margin-top:0;white-space:nowrap}
.how-app{max-width:360px;margin:14px auto 0;padding:14px 16px 14px 36px;border-radius:16px;background:hsl(0 0% 100%/.08);text-align:left;font-size:15px;line-height:1.45}.how-app li+li{margin-top:8px}
.get-tg{max-width:360px;margin:14px auto 0;text-align:center;font-size:14px;opacity:.8}.get-tg a{color:inherit;text-decoration:underline}
.get-app button.btn{font-family:inherit;cursor:pointer}