/* Vilni Local — canon MOBILE FIRST layer (canon UX v2 v12, 2ZVmZ — 390 px is the main view), shared by every client page
   (С4, 05.11.2026; was lc-result-canon-m.css). Hooks do nothing above 640 px: .rail (a row of cards → swipe rail with dots),
   details.fold (open on desktop and without JS; collapsed on phones by canon-m.js), .mbar (sticky action bar with the
   safe-area, phones only). Rules verbatim; root .cz written ":root .cz" (same weight as the result's old ".lc .rc"). */
:root .cz .rcs{display:flex;flex-direction:column;gap:16px}
:root .cz .fold-b{display:flex;flex-direction:column;gap:16px}
:root .cz details.fold > summary{display:none}
:root .cz .mbar,:root .cz .rdots{display:none}
@media (max-width:640px){:root .cz{font-size:16px}
:root .cz.wrap{gap:44px}
:root .cz .btn{min-height:48px;padding:12px 20px;font-size:16px}
:root .cz .ghost{display:inline-flex;align-items:center;min-height:44px}
:root .cz .small,:root .cz .why,:root .cz .q,:root .cz .lg,:root .cz .det p,:root .cz .det li,:root .cz .reasons div,:root .cz .cmp .r .k,:root .cz .row,:root .cz .ann,:root .cz .youdo li,:root .cz .gbp-row,:root .cz .so,:root .cz .big span,:root .cz .bars div{font-size:15px}
:root .cz .sec-h{gap:8px}
:root .cz .sec-h h2{font-size:26px}
:root .cz .sub{font-size:17px}
:root .cz .card{padding:18px;border-radius:18px}
:root .cz details.fold > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;
    border-radius:14px;background:var(--lilac);color:var(--violet);font:600 15px/1.3 var(--f-body);cursor:pointer;list-style:none}
:root .cz details.fold > summary::-webkit-details-marker{display:none}
:root .cz details.fold > summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
:root .cz details.fold[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
:root .cz details.fold[open] > summary{margin-bottom:12px}
:root .cz .dark details.fold > summary{background:var(--m-cell);color:var(--paper)}
:root .cz .fold .why > i:first-child{display:none}
:root .cz .rail{display:flex!important;flex-direction:row!important;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 6px;
    scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
:root .cz .rail::-webkit-scrollbar{display:none}
:root .cz .rail > *{flex:0 0 86%;scroll-snap-align:start;min-width:0}
:root .cz .rail:focus-visible{outline:3px solid var(--violet-mid);outline-offset:2px}
:root .cz .rdots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
:root .cz .rdots i{width:7px;height:7px;border-radius:99px;background:var(--peri);transition:width .25s,background .25s}
:root .cz .rdots i.on{width:20px;background:var(--violet)}
:root .cz .hero{display:flex;flex-direction:column;gap:0}
:root .cz .hero > div:first-child{display:contents}
:root .cz .hero .meta{order:1;font-size:13px}
:root .cz .hero h1{order:2;font-size:32px;margin-top:6px}
:root .cz .hero .verdict{order:3;font-size:21px;margin-top:12px}
:root .cz .hero .facts{order:4;margin-top:16px;gap:10px}
:root .cz .hero .ctas{order:5;margin-top:16px}
:root .cz .hero .ctas .btn{flex:1 1 140px}
:root .cz .hero .scorecard{order:6;margin-top:24px}
:root .cz .hero .lead{order:7;margin-top:20px;font-size:17px}
:root .cz .hero > div:first-child > .mean{order:8;margin-top:14px!important}
:root .cz .facts > div{padding:12px}
:root .cz .facts span{font-size:14px}
:root .cz .scorecard{padding:18px;display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px 16px;align-items:center;justify-items:stretch}
:root .cz .ring{width:116px;height:116px}
:root .cz .ring .c b{font-size:40px}
:root .cz .ring .c span{font-size:12px}
:root .cz .band{grid-column:2;grid-row:1;align-self:end;font-size:16px;line-height:1.25}
:root .cz .scale{grid-column:2;grid-row:2;align-self:start;grid-template-columns:repeat(3,1fr);gap:4px}
:root .cz .scale li{padding:6px 2px}
:root .cz .scale li b{font-size:12px}
:root .cz .scale li span{font-size:11px}
:root .cz .scorecard .ring{grid-row:1 / span 2}
:root .cz .scorecard{row-gap:8px}
:root .cz .subs,:root .cz .scorecard > .small,:root .cz .scorecard > .ghost{grid-column:1 / -1}
:root .cz .scorecard > .small{text-align:left!important}
:root .cz .subs div{grid-template-columns:100px minmax(0,1fr) 28px;font-size:14px}
:root .cz .dark{display:flex;flex-direction:column;gap:14px;padding:18px 16px;border-radius:20px}
:root .cz .dark > div:last-child{display:contents!important}
:root .cz .dark .eyebrow{order:1}
:root .cz .dark h2{order:2;font-size:26px}
:root .cz .dark > div:last-child > p:not(.why){order:3}
:root .cz .dark .lg{order:4;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:14px}
:root .cz .dark .mapbox{order:5;margin-top:4px}
:root .cz .dark #cap{order:6}
:root .cz .dark .why{order:7}
:root .cz .dark .fold{order:8}
:root .cz .gl li{min-height:44px;font-size:15px}
:root .cz .seg button{min-height:48px;font-size:15px}
:root .cz .duel{display:flex;flex-direction:column;align-items:center;gap:16px}
:root .cz .duel .gp{order:1}
:root .cz .duel .cmp{order:2;width:100%}
:root .cz .duel .phone{max-width:300px;width:100%}
:root .cz .gp .hero-ph{height:76px}
:root .cz .thumbs{grid-template-columns:repeat(6,1fr)}
:root .cz .gp .body{gap:8px;padding:10px 12px 12px}
:root .cz .cmp .r{padding:10px 0}
:root .cz .reasons > div{padding:14px}
:root .cz .two{gap:16px}
:root .cz .gbp-cov{height:64px}
:root .cz .gbp-acts{padding:8px 6px}
:root .cz .gbp-acts i{width:30px;height:30px}
:root .cz .gbp-row{padding:8px 14px}
:root .cz .rcs .rcr,:root .cz .rcs .rcr.f{border:1px solid var(--lilac);border-radius:16px;padding:14px;background:var(--canvas);gap:10px}
:root .cz .big b{font-size:34px}
:root .cz .ai{padding:18px;gap:18px;border-radius:20px}
:root .cz .ai .phone{max-width:280px}
:root .cz .ai .links{display:none}
:root .cz .ai .phone{max-width:260px}
:root .cz .ai .fold{order:9}
:root .cz .do > .card{padding:16px}
:root .cz .do .stage,:root .cz .do .tg{min-height:200px}
:root .cz .pst{gap:14px}
:root .cz .pleft{gap:12px}
:root .cz .whyno{padding:0;border:0;background:transparent}
:root .cz .whyno-b > h3{display:none}
:root .cz .whyno li{font-size:15px}
:root .cz .good-wrap{padding:14px;border-radius:20px;gap:14px}
:root .cz .good-wrap .phone{max-width:280px}
:root .cz .gpost .img{height:120px}
:root .cz .ba .arrow{display:none}
:root .cz .bacard{grid-template-columns:minmax(0,1fr);padding:16px;gap:10px}
:root .cz .bacard .mini{max-width:120px;justify-self:center}
:root .cz .goal{padding:18px;gap:18px}
:root .cz .stairs{display:flex;flex-direction:column;height:auto;gap:8px;align-items:flex-start}
:root .cz .stairs li{height:auto!important;padding:12px;border-radius:6px 14px 14px 6px;gap:6px;margin-left:0}
:root .cz .stairs li:nth-child(1){width:55%}
:root .cz .stairs li:nth-child(2){width:70%}
:root .cz .stairs li:nth-child(3){width:85%}
:root .cz .stairs li:nth-child(4){width:100%}
:root .cz .stairs span.t{font-size:15px}
:root .cz .yd{padding:16px}
:root .cz .pmain{padding:20px;border-radius:20px}
:root .cz .alt{padding:18px;border-radius:20px}
:root .cz .pmain .btn-pri{width:100%}
:root .cz details.card summary{padding:16px 18px;min-height:56px;font-size:17px}
:root .cz .det{padding:0 18px 18px}
:root .cz .endcta{padding:20px;border-radius:20px}
:root .cz .endcta .ctas .btn{flex:1 1 100%}
:root .cz .foot{margin-top:-24px}
:root .cz .facts span,:root .cz .li .arr,:root .cz .do .first,:root .cz .alt p[style],:root .cz #cap,:root .cz .dark .lg,:root .cz .subs div,:root .cz .cmp .r .k,:root .cz .cmp .r .v b.txt,:root .cz .terms span,:root .cz .hero .meta{font-size:15px!important}
:root .cz .scale li span,:root .cz .gl .tag{font-size:12px}
html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
:root .cz .do .first{margin-top:0}
:root .cz .rail > .nz-rv{opacity:1!important;transform:none!important;transition:none!important}
:root .cz .hero .ctas .btn{white-space:nowrap;padding:12px 12px;font-size:15px}
:root .cz .cmp .r{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;gap:8px}
:root .cz .cmp .r .v{display:contents}
:root .cz .cmp .r .k{grid-column:2;grid-row:1;font-size:14px;max-width:120px}
:root .cz .cmp .r .v b:first-child{grid-column:1;grid-row:1}
:root .cz .cmp .r .v b:last-child{grid-column:3;grid-row:1}
:root .cz .cmp .r .v b.txt{font-size:14px}
:root .cz .gbp-acts{display:none}
:root .cz .aio > i.sk{display:none}
:root .cz .do .stage,:root .cz .do .tg{min-height:170px}
:root .cz .alt{gap:8px}
:root .cz .reasons > div{gap:4px}
:root .cz .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--midnight) 97%,transparent);
    box-shadow:0 -10px 30px -12px rgba(30,27,34,.5);transform:translate3d(0,110%,0);transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s;visibility:hidden}
:root .cz .mbar.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
:root .cz .mbar .btn{flex:1 1 0;min-width:0;min-height:48px;padding:8px 10px;font-size:15px;line-height:1.15;text-align:center;white-space:normal}
:root .cz .mbar .btn-pri{flex-grow:1.2;flex-direction:column;gap:0;background:var(--chartreuse);color:var(--ink)}
:root .cz .mbar .btn-pri small{font:500 12px/1.2 var(--f-body)}
:root .cz .mbar .btn-out{color:var(--paper);border-color:var(--m-line)}
html:not([data-neon="off"]):root .cz .mbar .btn-pri{box-shadow:0 0 0 1px var(--nzg2),0 4px 18px -4px var(--nzg2)}}
@media (max-width:640px) and (prefers-reduced-motion:reduce){:root .cz .mbar{transition:none}
:root .cz .rdots i{transition:none}}
@media print{:root .cz .mbar,:root .cz .rdots{display:none!important}
:root .cz details.fold > summary{display:none}}