:root{--g100:#EEEDE9;--g300:#A5A39D;--g600:#66645F;--lime:#B7D600;--persimmon:#F45A18;--electric:#2477E8;--marigold:#F4B719;--ink0:#242422}
.feat{max-width:1280px;margin:0 auto;padding:128px 64px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:center}
.feat.flip .copy{order:2}
.tag{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--g600)}
.tag b{font:700 14px/1 "Manrope",sans-serif;letter-spacing:.04em;color:var(--ink)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--coral))}
.feat h2,.plans h2,.end h2{font-size:46px;font-weight:500;line-height:1.36;letter-spacing:.04em;margin-top:28px;text-wrap:balance}
.feat h2{position:relative;padding-top:52px}.feat h2::before{content:"";position:absolute;left:-2px;top:0;width:34px;height:34px;background:var(--c,var(--coral));-webkit-mask:url(/assets/mark.png) center/contain no-repeat;mask:url(/assets/mark.png) center/contain no-repeat}
.feat.dark{background:var(--ink0);box-shadow:0 0 0 100vmax var(--ink0);clip-path:inset(0 -100vmax);color:#fff}
.feat.dark .tag,.feat.dark .copy p{color:#B9B7B0}.feat.dark .tag b{color:#fff}
.feat.dark .vis{background:#31312E}
.feat .copy p{font-size:17px;line-height:1.9;color:var(--g600);letter-spacing:.04em;margin-top:24px;max-width:22em;text-wrap:pretty}
.vis{position:relative;background:color-mix(in oklch,var(--c,var(--coral)) 12%,#F4F2EC);border-radius:28px;aspect-ratio:640/560;overflow:hidden}
.vis::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(36,36,34,.05);pointer-events:none}
.cv{position:absolute;left:0;top:0;width:640px;height:560px;transform-origin:0 0}
.ui{position:absolute;background:#fff;border:1px solid var(--g100);border-radius:20px;padding:20px;font-size:14px;letter-spacing:.04em;color:var(--ink0)}
.ui{box-shadow:0 1px 2px rgba(36,36,34,.04),0 12px 32px -18px rgba(36,36,34,.18)}
.ui.lift{box-shadow:0 32px 64px -28px rgba(36,36,34,.38),0 2px 6px rgba(36,36,34,.06)}
.ui h4{font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.ui .lbl{font-size:12px;font-weight:500;color:var(--g600);letter-spacing:.08em}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--g100)}
.row small{display:block;font-size:12px;color:var(--g600);margin-top:2px}
.num{font-family:"Manrope",sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.sw{width:40px;height:24px;border-radius:99px;background:var(--g100);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sw.on{background:var(--lime)}.sw.on::after{left:19px}
.field{border:1px solid var(--g100);border-radius:14px;padding:10px 14px;margin-top:6px;font-size:15px}
.field.focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(253,63,50,.18)}
.pill{height:44px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.06em}
.pill.coral{background:var(--coral);color:#fff}.pill.ink{background:var(--ink0);color:#fff}.pill.line{border:1.5px solid var(--ink0)}
.ic{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.slot{background:var(--g100);border-radius:14px;display:grid;place-items:center;color:var(--g300)}
.bar{height:6px;border-radius:99px;background:var(--g100);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--persimmon);border-radius:99px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em}
.bub{max-width:200px;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.55}
.bub.me{align-self:flex-end;background:var(--ink0);color:#fff;border-bottom-right-radius:6px}
.bub.them{background:var(--g100);border-bottom-left-radius:6px}
.dev{position:absolute;background:var(--ink0);border-radius:40px;padding:9px}
.dev .scr{color:var(--ink0);background:#fff;border-radius:31px;height:100%;overflow:hidden;padding:44px 18px 18px;display:flex;flex-direction:column;gap:12px;font-size:13px;letter-spacing:.04em;position:relative}
.blk{border:1px dashed var(--g300);border-radius:12px;padding:12px}
.blk.on{border:1.5px solid var(--coral)}
.caret{display:inline-block;width:1.5px;height:1.1em;background:var(--coral);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.plans{max-width:1280px;margin:0 auto;padding:150px 64px;text-align:center}
.plans .lead{font-size:18px;color:var(--g600);letter-spacing:.04em;margin-top:18px}
.plans .lead .num{color:var(--ink);font-size:22px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:880px;margin:64px auto 0;text-align:left}
.plan{background:#fff;border:1px solid var(--g100);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:20px}
.plan.hi{border:1.5px solid var(--ink0)}
.plan h3{font-size:20px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between}
.plan .pdesc{font-size:15px;line-height:1.75;color:var(--g600);letter-spacing:.04em;min-height:3.5em}
.plan .price{display:flex;align-items:baseline;gap:6px;font-size:16px;color:var(--g600);letter-spacing:.04em;margin-top:8px}.plan .price .cur{font:700 16px "Manrope",sans-serif;color:var(--ink)}.plan .price .num{font-size:52px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.plan .bnote{font-size:13px;color:var(--g300);letter-spacing:.04em;margin-top:-12px}
.plan.hi{border-color:var(--coral)}
.bill{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--g100);margin-top:36px}
.bill button{font:inherit;font-size:15px;font-weight:700;letter-spacing:.06em;height:44px;padding:0 28px;border:0;border-radius:99px;background:none;color:var(--g600);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.bill button[aria-selected="true"]{background:var(--ink0);color:#fff}
.save{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--lime);color:var(--ink0)}
.cmp{max-width:880px;margin:24px auto 0;background:#fff;border:1px solid var(--g100);border-radius:24px;overflow:hidden;text-align:left}
.cr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);align-items:center;border-top:1px solid var(--g100);font-size:15px;letter-spacing:.04em}
.cr:first-child{border-top:0}
.cr span{padding:18px 28px;line-height:1.5}.cr span+span{text-align:center;color:var(--g600)}.cr span b{color:var(--ink)}
.cr small{display:block;font-size:12px;color:var(--g300);margin-top:2px}
.ch{background:var(--warm-white,#FAF9F6)}.ch span{padding-top:14px;padding-bottom:14px;font-size:13px;font-weight:700;color:var(--g600)!important}
.ok{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;vertical-align:middle}
.ok.ink{background-color:var(--ink0)}
.no{display:inline-block;width:12px;height:1.5px;background:var(--g300);vertical-align:middle}
@media (max-width:900px){.cr span{padding:14px 12px;font-size:14px}}
.plan ul{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--g100)}
.plan li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--g100);font-size:15px;letter-spacing:.04em}
.plan li .ic{color:var(--lime);width:18px;height:18px}
.plan li.off{color:var(--g300)}.plan li.off .ic{color:var(--g300)}
.plan .btn,.plan .btn-o{justify-content:center;margin-top:auto}
.btn-o{height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;border:1.5px solid var(--ink);font-size:16px;font-weight:700;letter-spacing:.06em}
.btn-o:hover{background:var(--ink);color:#fff}
.tbd{outline:1.5px dashed var(--marigold);outline-offset:3px;border-radius:4px}
.end{padding:140px 24px 0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.end .sub{margin-top:20px;font-size:18px}
.store{margin-top:36px;height:56px;padding:0 30px;display:inline-flex;align-items:center;gap:12px;border-radius:99px;background:var(--ink);color:#fff!important;font-size:17px;font-weight:700;letter-spacing:.06em;transition:transform .12s}
.store:active{transform:scale(.97)}.store:hover{background:#000}
.endart{position:relative;width:460px;height:300px;margin:72px auto 0;overflow:hidden}
.endart .ph{position:absolute;left:142px;top:0;width:176px;height:270px;border-radius:30px;border:2.5px solid var(--coral);background:#fff;padding:4px;transform:rotate(3deg)}
.endart .ph i{display:block;width:100%;height:100%;border-radius:25px 25px 0 0;background:url(/assets/app-home.png.webp) 0 0/100% auto no-repeat}
.endart .pk{position:absolute;left:0;bottom:0;width:460px;height:177px;background:url(/assets/pocket-front.png.webp) 0 0/100% 100% no-repeat}
.foot{max-width:1280px;margin:0 auto;padding:40px 64px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:13px;color:var(--g600);letter-spacing:.06em}
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (max-width:900px){.feat{grid-template-columns:1fr;gap:48px;padding:96px 24px}.feat.flip .copy{order:0}.feat h2,.plans h2,.end h2{font-size:36px}.plans{padding:96px 24px}.pgrid{grid-template-columns:1fr}.foot{padding:32px 24px}.endart{transform:scale(.8);transform-origin:50% 100%}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.caret{animation:none}}

.slot.ph{background-size:cover;background-position:center}

.pline{position:absolute;inset:0;z-index:0;width:640px;height:560px;overflow:visible;pointer-events:none}
.pline path{fill:none;stroke:var(--c,var(--coral));stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .2s}
.pline .slot-dash{stroke-width:3;transition-delay:1.5s;transition-duration:.4s}
.feat.flip .pline{transform:scaleX(-1)}
.vis.in .pline path{stroke-dashoffset:0}
.uline{position:relative;white-space:nowrap}
.uline::after{content:"";position:absolute;left:-4%;right:-6%;bottom:-.18em;height:.34em;background:var(--coral);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C60 16 130 17 170 12 C184 10 193 14 197 21' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C60 16 130 17 170 12 C184 10 193 14 197 21' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.45,0,.2,1) .4s}
.rv.in .uline::after{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.pline path{stroke-dashoffset:0;transition:none}.uline::after{clip-path:none;transition:none}}
.popt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--g100);border-radius:14px;font-size:15px}
.popt small{display:block;font-size:12px;color:var(--g600);margin-top:2px}
.popt .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--g300);flex:none}
.popt.on{border-color:var(--c,var(--electric));box-shadow:0 0 0 3px color-mix(in oklch,var(--c,var(--electric)) 18%,transparent)}.popt.on .radio{border:5px solid var(--c,var(--electric))}
.steps{max-width:1280px;margin:0 auto;padding:48px 64px 40px}
.steps h2,.faq h2{font-size:46px;font-weight:500;line-height:1.36;letter-spacing:.04em;margin-top:28px}
.sgrid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.sgrid li{position:relative;padding-top:28px;border-top:1.5px solid var(--ink0);display:flex;flex-direction:column;gap:12px}
.sgrid li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--coral)}
.sgrid .sn{font-size:15px;color:var(--coral);letter-spacing:.06em}
.sgrid h3{font-size:22px;font-weight:700;letter-spacing:.04em;line-height:1.4}
.sgrid p{font-size:15px;line-height:1.8;color:var(--g600);letter-spacing:.04em;text-wrap:pretty}
.faq{max-width:1280px;margin:0 auto;padding:40px 64px 150px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
.qlist{border-top:1px solid var(--line)}
.qlist details{border-bottom:1px solid var(--line)}
.qlist summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:18px;font-weight:500;letter-spacing:.04em}
.qlist summary::-webkit-details-marker{display:none}
.qlist summary:hover{color:var(--coral)}
.qx{position:relative;width:14px;height:14px;flex:none}
.qx::before,.qx::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;transition:transform .25s}
.qx::after{transform:rotate(90deg)}
details[open] .qx::after{transform:rotate(0)}
.qlist .qmore{display:inline-block;margin-top:32px}.qlist p{padding:0 40px 28px 0;font-size:16px;line-height:1.85;color:var(--g600);letter-spacing:.04em}
@media (max-width:900px){.steps{padding:48px 24px 24px}.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}.steps h2,.faq h2{font-size:36px}.faq{grid-template-columns:1fr;gap:40px;padding:24px 24px 96px}}
.foot{gap:32px;flex-wrap:wrap}.flinks{display:flex;gap:28px;margin-left:auto;margin-right:32px}.flinks a{color:var(--g600)}.flinks a:hover{color:var(--ink)}
@media (max-width:900px){.flinks{margin:0;order:3;width:100%;gap:20px}}
.swrap{position:relative;margin-top:120px}
.wdog{position:absolute;left:0;bottom:calc(100% - 4px);width:170px;height:auto;will-change:transform;z-index:2}
.pdog{position:absolute;left:40px;top:410px;width:220px;height:auto}
.plan.hi{position:relative}
.ldog{position:absolute;right:28px;bottom:calc(100% - 18px);width:128px;height:auto;pointer-events:none}
.plan.hi h3 .badge{margin-right:140px}
.qdog{display:block;width:140px;height:auto;margin-top:40px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 90%}
.qdog.tilt{transform:scaleX(-1)}
.fdog{display:flex;align-items:center;gap:10px}.fdog img{width:34px;height:auto}
@media (max-width:900px){.wdog{width:120px}.qdog{width:100px;margin-top:24px}.ldog{width:100px}.plan.hi h3 .badge{margin-right:0}}
.vis{overflow:visible}
.bdog{position:absolute;z-index:3;height:auto;bottom:-5%;pointer-events:none;opacity:0;transition:opacity .6s ease .35s,transform .8s cubic-bezier(.22,.61,.36,1) .35s}
.bdog.walk{width:40%}.bdog.pack{width:34%}.bdog.talk{width:46%;bottom:-16%}.bdog.laptop{width:62%;bottom:-14%}
.bdog.b-r{right:-11%;transform:translateX(40px) scaleX(-1)}
.bdog.b-l{left:-11%;transform:translateX(-40px)}
.vis.in .bdog{opacity:1}.vis.in .bdog.b-r{transform:scaleX(-1)}.vis.in .bdog.b-l{transform:none}
body{overflow-x:clip}
@media (max-width:900px){.bdog.b-r{right:-4%}.bdog.b-l{left:-4%}.bdog.walk{width:34%}.bdog.pack{width:30%}.bdog.talk{width:40%}.bdog.laptop{width:54%}}
@media (prefers-reduced-motion:reduce){.bdog{opacity:1;transition:none}.bdog.b-r{transform:scaleX(-1)}.bdog.b-l{transform:none}}
html{overflow-x:clip}
.vis .cv{clip-path:inset(0 round 28px)}