/* КОТОФУ — демо. Дизайн-язык по DNA-разбору (см. DNA.md), код и графика свои. */
:root{
  --white:#fff; --gray:#8A958C;
  --g100:#F1F4E2; --g200:#F4FFD8; --g300:#EAEFD1; --g500:#6D910A; --g800:#32573B; --g900:#223A28;
  --o100:#FFF6D9; --o500:#976603;
  --bg:var(--g300); --text:var(--g900); --accent:var(--g500);
  --f-display:"Noto Serif Display", Georgia, serif;
  --f-body:"Onest", system-ui, sans-serif;
  --h-l:clamp(3.4rem, 2.3rem + 4.6vw, 8rem);
  --h-m:clamp(3rem, 2.4rem + 2.85vw, 6rem);
  --h-s:clamp(1.75rem, 1.55rem + .97vw, 2.7rem);
  --h-xs:clamp(1.6rem, 1.55rem + .26vw, 1.9rem);
  --h-xxs:clamp(1.15rem, 1.12rem + .13vw, 1.3rem);
  --t-l:clamp(1.25rem, 1.18rem + .39vw, 1.65rem);
  --t-m:clamp(1.1rem, 1.08rem + .13vw, 1.25rem);
  --t-s:1.05rem;
  --n-xl:clamp(2.6rem, 2.3rem + 1.29vw, 3.8rem);
  --pad:clamp(1rem, .636rem + 1.55vw, 2.5rem);
  --sec:clamp(5rem, 3.786rem + 5.18vw, 10rem);
  --sec-sm:clamp(3.75rem, 2.839rem + 3.89vw, 7.5rem);
  --sec-xs:clamp(2.5rem, 1.893rem + 2.59vw, 5rem);
  --fast:.15s ease; --base:.25s ease; --slow:.4s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--t-m);line-height:1.25;letter-spacing:.005em;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.35px;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
em{font-style:italic}
p{max-width:65ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- типографика ---------- */
.h-l,.h-m,.h-s,.h-xs,.h-xxs,h1,h2,h3{font-family:var(--f-display);font-weight:400;font-stretch:75%;font-variation-settings:"wdth" 75}
.h-l,h1{font-size:var(--h-l);line-height:.9;letter-spacing:-.035em;-webkit-text-stroke-width:.015em}
.h-m,h2{font-size:var(--h-m);line-height:.92;letter-spacing:-.035em;-webkit-text-stroke-width:.012em}
.h-s,h3{font-size:var(--h-s);line-height:1.15;letter-spacing:-.02em}
.h-xs{font-size:var(--h-xs);line-height:1.05;letter-spacing:-.02em}
.h-xxs{font-size:var(--h-xxs);line-height:1}
h1 em,h2 em,h3 em,.h-s em,.h-xs em{font-weight:400;font-stretch:75%}
h1,h2,h3{padding-bottom:.12em;margin-bottom:-.12em}
.t-l{font-size:var(--t-l);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.t-m{font-size:var(--t-m);line-height:1.4;letter-spacing:-.015em}
.t-s{font-size:var(--t-s);line-height:1.4;letter-spacing:-.01em}
.t-xs{font-size:.85rem;line-height:1.4}
.n-xl{font-family:var(--f-display);font-stretch:75%;font-size:var(--n-xl);line-height:1;letter-spacing:-.02em}

/* ---------- каркас ---------- */
.container{width:100%;max-width:112.5rem;margin:0 auto;padding-inline:var(--pad)}
.container--sm{max-width:94.375rem}
.section{padding:var(--sec) 0;position:relative}
.pt-xs{padding-top:var(--sec-xs)} .pb-xs{padding-bottom:var(--sec-xs)} .pb-sm{padding-bottom:var(--sec-sm)}
.s-head{display:flex;flex-direction:column;gap:2.2rem}
.s-head--c{align-items:center;text-align:center}
.s-foot{display:flex;flex-direction:column;align-items:center;gap:2.5rem;margin-top:6.25rem;text-align:center;color:var(--accent)}
.s-foot__h{max-width:18.5em}
@media (max-width:767px){.s-foot{gap:2rem;margin-top:3.75rem}}
.divider{width:69px;height:8px;color:currentColor}
.s-head .divider,.s-foot .divider{color:var(--text)}
.dark .divider{color:currentColor}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1.1rem 2rem;min-height:2.75rem;border-radius:999px;font-weight:700;font-size:1.1rem;line-height:1.3;white-space:nowrap;-webkit-text-stroke-width:0;transition:background var(--fast),color var(--fast),transform var(--fast)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--g500);color:#fff}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--g900)}
.btn--dark{background:var(--g900);color:#fff}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--g800)}
.btn--white{background:#fff;color:var(--g900)}
.btn--white:hover,.btn--white:focus-visible{background:var(--g300)}

/* ---------- рисованные формы ---------- */
.shape{position:relative;isolation:isolate}
.shape>.bg{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:url(#roughMedium)}
.shape>.bg::before,.shape>.bg::after{content:"";position:absolute;inset:0;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;background:var(--line,var(--accent))}
.shape>.bg::after{inset:2px;background:var(--fill,#fff)}
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:4.125rem;height:4.125rem;font-family:var(--f-display);font-stretch:75%;font-size:var(--h-xxs)}
.ring::before{content:"";position:absolute;inset:2px;border:1.5px solid currentColor;border-radius:50%;filter:url(#roughSmall)}
.oval{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.3em .95em .35em;font-family:var(--f-display);font-stretch:75%;white-space:nowrap}
.oval::before{content:"";position:absolute;inset:0;border:1.5px solid currentColor;border-radius:50%;filter:url(#roughSmall)}

/* ---------- эффекты ---------- */
@keyframes wiggle{0%{transform:translateY(1px)}20%{transform:translate(-1px,-1px)}32%,48%{transform:translate(0)}64%{transform:translate(1px)}80%{transform:translateY(-1px)}to{transform:translate(0)}}
.wiggle{animation:wiggle 1.2s ease-in-out infinite}
.wiggle--d2{animation-delay:.6s}
@keyframes jiggle{0%{transform:rotate(0) translateY(0)}20%{transform:rotate(2deg) translateY(-8px)}40%{transform:rotate(-.8deg) translateY(7px)}60%{transform:rotate(.5deg) translateY(-6px)}80%{transform:rotate(-.3deg) translateY(5px)}to{transform:rotate(0) translateY(0)}}
.jiggle{animation:jiggle 3s ease-in-out infinite}
.noise{position:fixed;inset:-200px;z-index:999;pointer-events:none;opacity:.07;background-size:220px 220px;animation:noise .33s steps(1) infinite}
@keyframes noise{0%{transform:translate(0,0)}10%{transform:translate(-37px,21px)}20%{transform:translate(52px,-44px)}30%{transform:translate(-18px,63px)}40%{transform:translate(71px,12px)}50%{transform:translate(-66px,-30px)}60%{transform:translate(24px,48px)}70%{transform:translate(-49px,-71px)}80%{transform:translate(9px,-13px)}90%{transform:translate(58px,36px)}}
.js [data-a="heading"]{visibility:hidden}
.js [data-a="fade-up"],.js [data-a="fade-in"]{opacity:0}
.js [data-a="line"]{clip-path:inset(0 100% 0 0)}
.js [data-draw] path{visibility:hidden}
.js .hero__pack,.js .hero__bits{visibility:hidden}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;background:var(--bg);padding:1.1rem 0;transition:transform var(--base)}
.header.is-hidden{transform:translateY(-100%)}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;max-width:112.5rem;margin:0 auto;padding-inline:var(--pad)}
.logo{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-display);font-stretch:75%;font-size:2.1rem;line-height:1;letter-spacing:-.03em;transition:color var(--base);position:relative;z-index:2;width:fit-content}
.logo svg{width:34px;height:30px}
.logo em{color:var(--accent);transition:color var(--base)}
.logo:hover{color:var(--accent)}
.nav__list{display:flex;gap:2rem}
.nav__link{font-size:1.05rem;transition:color var(--base)}
.nav__link:hover,.nav__link.is-active{color:var(--accent)}
.nav__foot{display:none}
.header__act{display:flex;align-items:center;justify-content:flex-end;gap:1.6rem}
.cart-btn{position:relative;width:4.125rem;height:4.125rem;border-radius:50%;display:grid;place-items:center;transition:background-color var(--base);z-index:2}
.cart-btn::before{content:"";position:absolute;inset:1px;border:1.5px solid var(--g900);border-radius:50%;opacity:0;filter:url(#roughSmall);transition:opacity var(--base)}
.cart-btn svg{width:28px;height:28px;transition:color var(--base)}
.cart-btn:hover{background:var(--g900);color:#fff}
.cart-btn:hover::before{opacity:1}
.cart-btn__n{position:absolute;left:55%;top:58%;min-width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.95rem;display:grid;place-items:center;-webkit-text-stroke-width:0}
.cart-btn__n[hidden]{display:none}
.burger{display:none;position:relative;width:4.125rem;height:4.125rem;border-radius:50%;background:var(--accent);color:#fff;z-index:2;transition:opacity var(--base)}
.burger:hover{opacity:.8}
.burger svg{position:absolute;left:50%;top:50%;width:26px;height:20px;transform:translate(-50%,-50%);transition:opacity var(--base)}
.burger .x{opacity:0}
.burger[aria-expanded="true"] .b{opacity:0}
.burger[aria-expanded="true"] .x{opacity:1}
@media (max-width:1279px){
  .header__in{grid-template-columns:auto 1fr}
  .header__act{gap:.75rem}
  .header__cta{display:none}
  .burger{display:block}
  .nav{position:fixed;inset:0;height:100dvh;padding:9.5rem 1rem 2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:3rem;background:var(--bg);transform:translateX(-100%);transition:transform var(--slow);z-index:1;overflow:auto}
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:center;gap:1.1rem}
  .nav__link{font-family:var(--f-display);font-stretch:75%;font-size:3rem;line-height:1}
  .nav__foot{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
  .nav__foot p{max-width:17.5rem;font-size:1.05rem;line-height:1.4}
}
@media (min-width:1280px){.nav{display:flex;justify-content:center}}
.soc{display:flex;gap:1rem}
.soc a{position:relative;width:4.125rem;height:4.125rem;border-radius:50%;display:grid;place-items:center;transition:opacity var(--base)}
.soc a::before{content:"";position:absolute;inset:2px;border:1.5px solid currentColor;border-radius:50%;filter:url(#roughSmall);opacity:.9}
.soc a:hover{opacity:.7}
.soc svg{width:22px;height:22px}

/* ---------- hero ---------- */
.hero{min-height:100svh;padding:11rem 0 5rem;text-align:center;overflow-x:clip}
.hero__wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hero__feat{font-size:1.05rem;font-weight:500}
.hero__top{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.hero__title{max-width:9.4em}
.hero__title .line{overflow:hidden;padding-bottom:.08em}
.hero__sub{margin-top:.2rem}
.hero__cta{margin-top:2rem}
.hero__media{position:relative;display:flex;justify-content:center;width:min(70vmin,34rem);margin-top:1.5rem}
.hero__pack{position:relative;width:78%;filter:drop-shadow(0 30px 30px rgba(34,58,40,.18))}
.hero__pack img{width:100%}
.hero__label{position:absolute;left:26%;right:30%;top:32%;display:flex;flex-direction:column;align-items:center;color:var(--g900);pointer-events:none;-webkit-text-stroke-width:0}
.hero__label b{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:clamp(1.3rem,3.2vmin,2.2rem);letter-spacing:.02em;line-height:1}
.hero__label small{font-size:clamp(.45rem,1vmin,.7rem);letter-spacing:.14em;text-transform:uppercase;margin-top:.25em;font-weight:600}
.hero__bits{position:absolute;inset:0;pointer-events:none}
.bit{position:absolute;width:var(--w,24px)}
.bit svg{width:100%;height:auto}
.hero__line{position:absolute;top:50%;left:50%;width:100vw;height:auto;max-width:none;transform:translate(-50%,-50%);color:#fff;z-index:-1;pointer-events:none}
.hero__cards{width:100%}
.hcard{--line:var(--accent);--fill:var(--g200);--mask:var(--m-cloudsm);position:absolute;display:flex;flex-direction:column;align-items:center;gap:.7rem;width:15rem;padding:1rem 1.25rem 2rem;color:var(--accent);z-index:1}
.hcard--l{left:0;top:24%}
.hcard--r{right:0;bottom:7%;--line:var(--o500);--fill:var(--o100);color:var(--o500)}
.hcard__img{width:100%;aspect-ratio:1;display:grid;place-items:center}
.hcard__img svg{width:78%;height:auto}
.hcard__t{font-family:var(--f-display);font-stretch:75%;font-style:italic;font-size:1.4rem;line-height:1}
.hcard__p{font-size:1rem;line-height:1.35;letter-spacing:-.02em}
@media (max-width:1279px){.hcard{width:13rem}.hcard--l{top:35%}}
@media (max-width:991px){
  .hero{padding-bottom:0}
  .hero__cards{display:flex;justify-content:center;gap:.75rem;margin-top:1rem}
  .hcard{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:50%;max-width:15rem}
}
@media (max-width:479px){.hcard{padding-inline:.5rem}.hcard__p{font-size:.9rem}}

/* ---------- routine ---------- */
.routine__grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.routine__media{position:relative}
.routine__imgw{border-radius:3rem;overflow:hidden;-webkit-mask:var(--m-cloudsm) center/100% 100% no-repeat;mask:var(--m-cloudsm) center/100% 100% no-repeat}
.routine__imgw img{width:100%}
.heart{position:absolute;color:#fff;pointer-events:none}
.heart svg{width:100%;height:auto}
.routine__content{display:flex;flex-direction:column;gap:3.75rem;margin-left:12.5%}
.nlist{display:flex;flex-direction:column;gap:1.5rem}
.nlist li{display:flex;align-items:center;gap:1.5rem}
.nlist .txt{font-family:var(--f-display);font-stretch:75%;font-size:var(--h-s);line-height:1.1;letter-spacing:-.01em}
@media (max-width:1279px){.routine__content{margin-left:0}}
@media (max-width:899px){.routine__grid{display:flex;flex-direction:column-reverse;gap:3.75rem}.routine__imgw{max-width:37.5rem;margin:0 auto}}

/* ---------- blob-отзывы ---------- */
.blob{overflow-x:clip;padding-bottom:calc(var(--sec) + clamp(1rem,-.7rem + 7.25vw,8rem))}
.blob__shell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(34rem,29.6rem + 18.6vw,52rem);isolation:isolate}
.blob__bg{position:absolute;top:50%;left:50%;width:115%;height:auto;max-width:none;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;color:var(--g900)}
.blob__head{color:var(--g300);gap:1.5rem}
.blob__head .divider{color:var(--g300)}
.blob__title{max-width:8.6em}
.blob__cards{position:absolute;inset:0;pointer-events:none}
.tcard{--mask:var(--m-cloudsm);--line:var(--accent);--fill:var(--g200);position:absolute;display:flex;flex-direction:column;align-items:center;gap:.75rem;width:min(100%,12.5rem);min-height:16.5rem;padding:2rem 1.5rem;text-align:center;color:var(--accent);pointer-events:auto}
.tcard:first-child{top:6rem;left:2%}
.tcard:last-child{top:50%;right:3%;--line:var(--o500);--fill:var(--o100);color:var(--o500)}
.tcard__av{position:relative;width:4.6rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--g900);color:#fff;font-family:var(--f-display);font-stretch:75%;font-size:1.6rem;-webkit-text-stroke-width:0}
.tcard:last-child .tcard__av{background:color-mix(in srgb,var(--o500) 80%,#fff)}
.tcard__av::after{content:"";position:absolute;width:.875rem;height:.875rem;bottom:0;right:12%;border-radius:50%;background:var(--accent);border:2px solid var(--g200)}
.tcard__q{font-size:1rem;font-weight:700;line-height:1.3;-webkit-text-stroke-width:0}
.tcard__a{margin-top:auto;font-size:1rem;font-style:italic;font-weight:600}
.demo-tag{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-style:normal;-webkit-text-stroke-width:0}
@media (max-width:1279px){.blob{padding-bottom:var(--sec-xs)}.tcard:first-child{top:-6.4rem;left:0}.tcard:last-child{top:90%;right:0}}
@media (max-width:767px){
  .blob{padding-top:var(--sec)}
  .blob__shell{gap:2.5rem}
  .blob__bg{width:170%;top:38%}
  .blob__title{font-size:clamp(2.6rem,2.3rem + 2.3vw,3.4rem)}
  .blob__cards{position:relative;inset:auto;display:flex;justify-content:center;gap:.5rem;width:100%}
  .tcard{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding:2rem 1rem;width:50%}
}

/* ---------- timeline ---------- */
.tl{background:var(--g100);overflow:hidden}
.tl__wrap{display:flex;flex-direction:column;gap:2.5rem}
.tl__hero{display:grid;grid-template-columns:1fr 32rem;align-items:end;gap:2rem}
.tl__title{max-width:6.4em}
.tl__intro{display:flex;flex-direction:column;gap:.75rem}
.tl__sticky{position:relative;z-index:1;display:flex;flex-direction:column;gap:2.5rem}
.tl__eyebrow{display:flex;align-items:center;gap:1.25rem;padding-block:1.25rem}
.tl__eyebrow p{flex:0 0 auto;color:var(--accent);font-style:italic;white-space:nowrap}
.wline{flex:1;height:8px;color:var(--accent)}
.tl__slider{overflow:visible}
.tl__cards{display:flex;align-items:stretch;gap:1.5rem;will-change:transform}
.tl__card{flex:0 0 auto;width:35rem;max-width:80vw;height:auto}
.tl__aw{--mask:var(--m-pill);display:flex;flex-direction:column;gap:1rem;padding:clamp(2.25rem,1.9rem + 1.55vw,3.75rem);height:100%;background:#fff;border-radius:2.5rem;position:relative}
.tl__aw::before{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:inherit;filter:url(#roughMedium);pointer-events:none}
.tl__media{width:100%;aspect-ratio:440/470;-webkit-mask:var(--mm) center/100% 100% no-repeat;mask:var(--mm) center/100% 100% no-repeat}
.tl__media img{width:100%;height:100%;object-fit:cover}
.tl__card:nth-child(1) .tl__media{--mm:var(--m-stackh)}
.tl__card:nth-child(2) .tl__media{--mm:var(--m-flower)}
.tl__card:nth-child(3) .tl__media{--mm:var(--m-stackv)}
.tl__card:nth-child(4) .tl__media{--mm:var(--m-circles)}
.tl__content{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;flex:1}
.tl__day{font-size:var(--h-xs)}
.tl__ct{text-wrap:balance}
.dots{display:none;justify-content:center;gap:1rem;padding-top:1.5rem}
.dots .swiper-pagination-bullet{position:relative;width:.75rem;height:.75rem;margin:0!important;border:2px solid var(--accent);border-radius:99px;background:#fff;opacity:1;transition:background var(--fast),transform var(--fast)}
.dots .swiper-pagination-bullet::after{content:"";position:absolute;inset:-.5rem}
.dots .swiper-pagination-bullet-active{transform:scale(1.5);background:var(--accent)}
@media (max-width:1279px){.dots{display:flex}.tl__hero{grid-template-columns:1fr 21rem}.tl__card{width:28.75rem}.tl__aw{border-radius:2.25rem}}
@media (max-width:767px){.tl__hero{grid-template-columns:1fr;text-align:center}.tl__title{margin:0 auto}.tl__intro{align-items:center}.tl__card{width:22rem}.tl__aw{border-radius:1.5rem}.tl__eyebrow{gap:.75rem;padding-block:1rem}}

/* ---------- comparison ---------- */
.cmp{background:var(--g100);overflow:clip}
.cmp__shell{display:flex;flex-direction:column;gap:4rem}
.cmp__grid{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(18rem,1fr) minmax(18rem,1fr);gap:1rem;align-items:stretch}
.cmp__card{--mask:var(--m-pill);display:flex;flex-direction:column;padding:clamp(2.25rem,1.9rem + 1.55vw,3.75rem)}
.cmp__card--base{--line:var(--accent);--fill:#fff}
.cmp__card--base>.bg::before,.cmp__card--base>.bg::after{-webkit-mask:none;mask:none;border-radius:2.5rem}
.cmp__card--base>.bg::after{border-radius:calc(2.5rem - 2px)}
.cmp__card--brand{color:#fff;background:var(--accent);border-radius:2.5rem}
.cmp__card--values{padding-left:0}
.cmp__head{text-align:center;margin-bottom:.6rem}
.cmp__card--values .cmp__head,.cmp__card--values .cmp__row{text-align:left;justify-content:flex-start;align-items:flex-start}
.cmp__rows{display:grid;grid-template-rows:repeat(6,minmax(4.5rem,auto))}
.cmp__row{display:flex;justify-content:center;align-items:center;padding:1.8rem 0;text-align:center;position:relative}
.cmp__row+.cmp__row::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;opacity:.55;filter:url(#roughSmall)}
.cmp__card--values .cmp__row+.cmp__row::before{background:var(--g900)}
.cmp__row:last-child{padding-bottom:0}
.cmp__ml{display:none;color:var(--gray)}
.cmp__card--brand .cmp__ml{color:#fff;opacity:.8}
.cmp .s-foot{margin-top:5rem}
.foot-pack{width:7.75rem}
@media (max-width:1023px){.cmp__grid{grid-template-columns:1fr 1fr}.cmp__card--values{display:none}.cmp__row{flex-direction:column;padding:1.25rem 0}.cmp__ml{display:inline;font-size:.95rem}}
@media (max-width:767px){.cmp__grid{display:flex;flex-direction:column;align-items:center}.cmp__card{width:100%;max-width:30rem}}

/* ---------- guarantee ---------- */
.gr{overflow:hidden}
.gr__wrap{display:flex;flex-direction:column;align-items:center;gap:5rem}
.gr__inner{--mask:var(--m-cloud);--line:var(--o500);--fill:var(--o100);width:100%;padding:10rem 7.5rem}
.gr__cards{display:grid;grid-template-columns:1fr .8fr 1fr;grid-template-rows:repeat(3,auto);gap:2rem 5rem;max-width:81rem;margin:0 auto;align-items:start}
.gr__card{display:flex;flex-direction:column;gap:1.5rem}
.gr__card--1{grid-row:2/4}
.gr__card--2{grid-row:1/3;flex-direction:column-reverse}
.gr__card--3{grid-row:2/4;margin-left:10%}
.gr__cat{width:100%;max-width:17rem;height:auto;color:var(--g900)}
.gr__foot{display:flex;align-items:center;gap:1.5rem}
.gr__line{display:flex;color:var(--g900)}
.gr__line--1{justify-self:end;transform:translate(20%,10%)}
.gr__line--2{justify-self:start;transform:translate(-20%,10%)}
.gr__line svg{width:13rem;height:auto}
.gr__line .mob{display:none;width:1.8rem}
.gr__paws{position:absolute;top:0;left:0;right:0;margin:0 auto;height:100%;max-width:112.5rem;pointer-events:none}
.paw{position:absolute;top:0;width:13%}
.paw--l{left:14%}
.paw--r{right:14%}
.paw svg{width:100%;height:auto}
@media (max-width:1279px){
  .gr__inner{padding:9rem 3rem}
  .gr__cards{display:flex;flex-direction:column;align-items:center}
  .gr__card,.gr__card--2{flex-direction:column-reverse;align-items:center}
  .gr__card--3{margin-left:0}
  .gr__foot{flex-direction:column;text-align:center}
  .gr__line{transform:none!important;justify-self:center}
  .gr__line .desk{display:none}.gr__line .mob{display:block}
  .paw{width:20%}.paw--l{left:6%}.paw--r{right:6%}
}
@media (max-width:767px){.gr__inner{padding:6.5rem 1.5rem 5rem}.paw{width:28%;top:-1rem}.paw--l{left:0}.paw--r{right:0}.gr__cat{max-width:13rem}}

/* ---------- philosophy ---------- */
.ph{background:var(--g100);padding-bottom:0}
.ph__wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 10rem;align-items:start;padding-bottom:var(--sec);position:relative}
.ph__wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g900);opacity:.35;filter:url(#roughSmall)}
.ph__content{display:flex;flex-direction:column;gap:2.5rem}
.ph__list .txt{font-size:var(--h-s)}
.ph__inner{position:relative}
.ph__media{-webkit-mask:var(--m-cloudsm) center/100% 100% no-repeat;mask:var(--m-cloudsm) center/100% 100% no-repeat}
.ph__media img{width:100%}
.ph__slot{position:absolute;left:0;top:45%;transform:translate(-50%,-50%);width:15.9rem;z-index:1}
.ph__card{--mask:var(--m-cloudsm);--fill:var(--bg);display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.2rem .9rem 2rem;color:var(--accent);text-align:center}
.ph__card img{width:88%;border-radius:1.2rem}
.ph__card p{font-size:1rem;font-weight:700;-webkit-text-stroke-width:0;padding:0 .8rem}
@media (max-width:1279px){.ph__wrap{gap:2.5rem}.ph__inner{display:flex;flex-direction:column;align-items:center}.ph__slot{position:relative;left:auto;top:auto;transform:none;margin-top:-20%}}
@media (max-width:899px){.ph__wrap{display:flex;flex-direction:column;align-items:center;gap:3.75rem}.ph__inner{max-width:37.5rem}}

/* ---------- hotspot ---------- */
.hs{background:var(--g100)}
.hs__title{max-width:20em;margin-inline:auto}
.hs__scene{position:relative;margin-top:3.75rem}
.hs__imgw{width:100%;aspect-ratio:1024/530;-webkit-mask:var(--m-wave) center/100% 100% no-repeat;mask:var(--m-wave) center/100% 100% no-repeat}
.hs__imgw img{width:100%;height:100%;object-fit:cover}
.hs__pts{position:absolute;inset:0;pointer-events:none}
.hs__t{pointer-events:auto;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:5rem;height:5rem;z-index:1;color:var(--g900)}
.hs__ic{position:relative;display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);transition:background-color var(--slow),color var(--slow)}
.hs__ic svg{width:28px;height:28px}
.hs__lab{position:absolute;top:50%;left:100%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;max-inline-size:0;padding-block:1.4rem;padding-inline:0;opacity:0;pointer-events:none;font-family:var(--f-display);font-stretch:75%;font-style:italic;font-size:var(--h-xs);line-height:1;color:var(--g900);background:#fff;border-radius:999px;box-shadow:inset 0 0 0 2px var(--accent);transition:opacity .3s cubic-bezier(.19,1,.22,1),max-inline-size .8s cubic-bezier(.19,1,.22,1),padding-inline .8s cubic-bezier(.19,1,.22,1);margin-left:.4rem}
.hs__t[data-dir="left"] .hs__lab{left:auto;right:100%;margin:0 .4rem 0 0}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}75%,to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@media (min-width:768px){
  .hs__t[aria-expanded="true"]{z-index:2}
  .hs__t[aria-expanded="true"] .hs__ic{background:var(--accent);color:#fff}
  .hs__t[aria-expanded="true"] .hs__lab{opacity:1;max-inline-size:32rem;padding-inline:2.25rem}
}
@media (hover:hover) and (min-width:768px){
  .hs__t::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:#fff;animation:pulse 1.4s ease-out infinite;z-index:-1;pointer-events:none}
  .hs__t:hover::before,.hs__t:focus-visible::before{visibility:hidden}
  .hs__t:hover{z-index:2}
  .hs__t:hover .hs__ic,.hs__t:focus-visible .hs__ic{background:var(--accent);color:#fff}
  .hs__t:hover .hs__lab,.hs__t:focus-visible .hs__lab{opacity:1;max-inline-size:32rem;padding-inline:2.25rem}
}
@media (min-width:768px) and (max-width:1279px){.hs__t,.hs__ic{width:4.125rem;height:4.125rem}}
@media (max-width:767px){
  .hs__pts{position:static;display:flex;flex-direction:column;gap:1.5rem;margin-top:3rem}
  .hs__t{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;display:flex;align-items:center;gap:1.25rem;cursor:default}
  .hs__ic{width:4.125rem;height:4.125rem;flex-shrink:0}
  .hs__lab{position:static;transform:none;max-inline-size:none;overflow:visible;opacity:1;white-space:normal;padding:0;margin:0;background:none;box-shadow:none;font-size:var(--h-s);text-align:left;transition:none}
}

/* ---------- community ---------- */
.cm{background:var(--g100);overflow:hidden}
.cm__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:4rem}
.cm__title{max-width:8.5em}
.cm__act{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:flex-end}
.cm__slider{position:relative;padding-bottom:1.5rem;overflow:visible}
.cm__wrap{display:flex}
.ccard{flex-shrink:0;width:29rem;max-width:100%;min-height:29rem;height:auto}
.ccard__aw{--mask:var(--m-pill);position:relative;display:flex;flex-direction:column;gap:2rem;height:100%;min-height:inherit;padding:3.2rem 3rem 2.5rem;overflow:hidden;border-radius:2.5rem;background:#fff}
.ccard__aw::before{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:inherit;filter:url(#roughMedium);pointer-events:none}
.ccard__stars{display:flex;gap:.15rem;color:var(--g900)}
.ccard__stars svg{width:1.1rem;height:1.05rem}
.ccard__q{position:relative;z-index:1;max-width:22.5rem}
.ccard__qi{position:absolute;right:2.2rem;bottom:2.5rem;width:11rem;height:auto;color:color-mix(in srgb,var(--g300) 60%,transparent);pointer-events:none}
.ccard__body{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;margin-top:auto}
.ccard__av{width:4.125rem;height:4.125rem;border-radius:50%;display:grid;place-items:center;background:var(--g300);color:var(--g900);font-family:var(--f-display);font-stretch:75%;font-size:1.5rem;flex-shrink:0}
.ccard__n{font-weight:600;transition:color var(--base)}
.ccard__n:hover{color:var(--accent)}
.cm__foot{display:flex;justify-content:center;margin-top:3rem}
.drag{position:fixed;left:0;top:0;z-index:1000;display:flex;align-items:center;gap:1.4rem;padding:.8rem 1.3rem;opacity:0;pointer-events:none;color:var(--g900);background:var(--g200);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--g900);transition:opacity .2s ease;will-change:transform;font-size:1rem;-webkit-text-stroke-width:0;font-weight:600}
.drag.is-on{opacity:1}
.drag svg{width:16px;height:16px}
@media (max-width:767px){
  .cm__head{flex-direction:column;align-items:center;margin-bottom:2.5rem;text-align:center}
  .cm__head .s-head{align-items:center}
  .cm__act{flex-direction:column;justify-content:center;gap:1rem}
  .ccard{width:88%;max-width:25rem}
  .ccard__aw{padding:1.9rem 1.5rem;border-radius:1.25rem}
  .ccard__qi{right:1.5rem;bottom:1rem;width:7rem}
  .ccard__av{width:3rem;height:3rem;font-size:1.2rem}
}

/* ---------- new routine ---------- */
.dark{background:var(--g900);color:var(--g300)}
.nr{overflow:clip}
.nr__shell{position:relative;display:flex;flex-direction:column;gap:clamp(3.75rem,2.3rem + 6.2vw,9.75rem)}
.nr__cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(1.5rem,.9rem + 2.6vw,4rem)}
.nr__card{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center}
.nr__media{width:min(100%,29rem);aspect-ratio:464/520;-webkit-mask:var(--mm) center/100% 100% no-repeat;mask:var(--mm) center/100% 100% no-repeat}
.nr__media--l{--mm:var(--m-stackv)}
.nr__media--r{--mm:var(--m-flower)}
.nr__media img{width:100%;height:100%;object-fit:cover}
.nr__media--l.is-gray{filter:grayscale(1)}
.nr__vs{display:flex;font-style:italic;font-family:var(--f-display);font-stretch:75%;font-size:var(--h-m)}
.nr__vs span{display:inline-flex;overflow:hidden;padding:0 .04em .12em}
.nr__vs i{display:inline-block;opacity:0;transition:transform 1s cubic-bezier(.33,0,.66,1),opacity 1s cubic-bezier(.33,0,.66,1)}
.nr__vs .v{transform:translateY(-100%)}
.nr__vs .s{transform:translateY(100%);transition-delay:.1s}
.nr__vs.is-on i{transform:translateY(0);opacity:1}
.nr__copy{margin-top:.6rem}
@media (max-width:767px){.nr__cmp{grid-template-columns:1fr;justify-items:center;gap:3.75rem}.nr__media{width:min(100%,22rem)}.nr__media--l{transition:filter .6s cubic-bezier(.33,0,.66,1)}.nr__vs{display:none}}
.nr .s-head .divider{color:var(--g300)}

/* ---------- transition guide ---------- */
.tg{overflow:hidden;border-top:1px solid rgba(234,239,209,.15)}
.tg .s-head .divider{color:var(--g300)}
.tg__shell{display:flex;flex-direction:column;gap:4rem}
.tg__flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.5rem}
.tg__stage{position:relative;display:flex;justify-content:center;width:100%;max-width:27.5rem;justify-self:center}
.tg__shape{width:min(100%,25rem);aspect-ratio:440/403;padding:clamp(2.5rem,2rem + 2vw,4.5rem) clamp(1.5rem,.8rem + 3.1vw,4.5rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,.75rem + 1vw,2rem);text-align:center;color:var(--g900);background:var(--g300);-webkit-mask:var(--mm) center/100% 100% no-repeat;mask:var(--mm) center/100% 100% no-repeat;transition:transform .38s cubic-bezier(.34,1.2,.64,1);position:relative;z-index:2}
.tg__stage:nth-of-type(1) .tg__shape{--mm:var(--m-flower6)}
.tg__stage:nth-of-type(2) .tg__shape{--mm:var(--m-stackh)}
.tg__stage:nth-of-type(3) .tg__shape{--mm:var(--m-circles)}
.js .tg__shape{transform:scale(0)}
.tg__stage.is-on .tg__shape{transform:scale(1)}
.tg__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,.4rem + 2.6vw,3.5rem);align-items:end}
.tg__metrics--one{grid-template-columns:1fr}
.tg__metric{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.tg__metric p:last-child{font-size:1rem}
.js .tg__metrics,.js .tg__day{opacity:0;transform:translateY(.75rem);transition:opacity .28s ease,transform .28s cubic-bezier(.33,0,.66,1)}
.tg__stage.is-content .tg__metrics,.tg__stage.is-content .tg__day{opacity:1;transform:translateY(0)}
.tg__day{font-size:var(--h-xs)}
.tg__arrow{width:4.4rem;color:var(--g300)}
.tg__arrow svg{width:100%;height:auto}
.js .tg__arrow{clip-path:inset(0 100% 0 0);transition:clip-path .3s ease}
.tg__arrow.is-on{clip-path:inset(0 0 0 0)}
.tg__paw{position:absolute;width:48%;z-index:3;pointer-events:none;transition:transform .6s cubic-bezier(.34,1.3,.64,1);color:var(--g300)}
.tg__paw svg{width:100%;height:auto}
.tg__paw--l{top:-18%;left:-14%}
.tg__paw--r{top:-22%;right:-14%}
.js .tg__paw--l{transform:translate(20px,20px) scale(0) rotate(-20deg)}
.js .tg__paw--r{transform:translate(-20px,20px) scale(0) rotate(20deg)}
.tg__stage.is-paw .tg__paw--l{transform:rotate(-20deg)}
.tg__stage.is-paw .tg__paw--r{transform:rotate(20deg)}
.tg .s-foot{color:var(--g300)}
.tg .s-foot .divider{color:var(--g300)}
.tg__fh{max-width:16em}
@media (max-width:1279px){
  .tg__flow{grid-template-columns:1fr;justify-items:center;gap:1.25rem}
  .tg__shape{padding:2.5rem 2rem}
  .tg__paw{display:none}
  .tg__arrow svg{transform:rotate(90deg)}
  .js .tg__arrow{clip-path:inset(0 0 100% 0)}
  .tg__arrow.is-on{clip-path:inset(0 0 0 0)}
}
@media (max-width:767px){.tg__shape{width:min(100%,18.75rem);padding:2rem 1.5rem}.tg__metrics{gap:1.25rem}.tg__day{font-size:1.5rem}}

/* ---------- pricing ---------- */
.pr{background:var(--g100);overflow:hidden}
.pr__shell{display:flex;flex-direction:column;gap:clamp(2.5rem,1.65rem + 3.6vw,6rem)}
.pr__head{gap:1.25rem}
.pr__slider{width:100%;overflow:visible}
.pr__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
.plan{position:relative;min-width:0;height:auto}
.plan__aw{position:relative;height:100%}
.plan__in{--mask:var(--m-pill);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:clamp(2.5rem,1.9rem + 2.5vw,4.9rem) 2.5rem clamp(3.75rem,3.6rem + .5vw,4.25rem);text-align:center;border-radius:2.5rem;background:#fff;position:relative}
.plan__in::before{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:inherit;filter:url(#roughMedium);pointer-events:none}
.plan--hit .plan__in{background:var(--accent);color:#fff}
.plan--hit .plan__in::before{display:none}
.plan__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;min-width:7rem;min-height:3rem;display:grid;place-items:center;padding:.7rem 1.25rem;color:var(--accent);background:#fff;border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent);font-weight:700;font-size:1rem;-webkit-text-stroke-width:0}
.plan__head{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.plan__prow{display:flex;align-items:flex-end;gap:.3rem}
.plan__suf{font-weight:700;font-size:1rem;padding-bottom:.35rem;-webkit-text-stroke-width:0}
.plan__ship{width:100%;margin-top:clamp(1.9rem,1.7rem + .65vw,2.5rem);padding:1.25rem 1rem;border-radius:.625rem;background:var(--g100)}
.plan--hit .plan__ship{background:color-mix(in srgb,#fff 10%,var(--accent))}
.plan__ship p:last-child{opacity:.65;font-weight:700;font-size:1.05rem;-webkit-text-stroke-width:0}
.plan--hit .plan__ship p:last-child{opacity:1}
.plan__stats{display:grid;gap:1.5rem;width:100%;margin-top:clamp(1.9rem,1.7rem + .65vw,2.5rem)}
.plan__stats dd{font-weight:700;font-size:1.05rem;-webkit-text-stroke-width:0}
.plan__btn{width:100%;margin-top:2rem}
.plan__note{margin-top:1rem;max-width:15em;font-weight:700;font-size:1.05rem;-webkit-text-stroke-width:0}
@media (min-width:1280px){.plan--hit{transform:translateY(-1.5rem)}.plan--hit .plan__in{min-height:calc(100% + 3rem)}.pr .dots{display:none}}
@media (max-width:1279px){.pr__cards{display:flex;gap:0}.plan{width:100%;max-width:29rem;flex-shrink:0}.plan__aw{padding-top:1.6rem}.plan__badge{top:1.6rem}}
@media (max-width:767px){.plan{max-width:21rem}.plan__in{padding-inline:1.5rem}}

/* ---------- steps ---------- */
.st{background:var(--g100);overflow-x:clip;padding:0;position:relative}
.st__wrap{padding:var(--sec-xs) 0 var(--sec)}
.st__shell{position:relative;display:flex;flex-direction:column;z-index:2}
.st__head{max-width:31rem;margin:0 auto}
.st__stage{position:relative;isolation:isolate;margin-top:-4rem}
.st__cards{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.st__card{--shift:0rem;position:relative;top:var(--shift);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--o100);-webkit-mask:var(--mm) center/100% 100% no-repeat;mask:var(--mm) center/100% 100% no-repeat}
.st__card--1{--shift:14rem;--mm:var(--m-flower6);aspect-ratio:1}
.st__card--2{--shift:9rem;--mm:var(--m-flower);aspect-ratio:1}
.st__card--3{--shift:12.5rem;--mm:var(--m-circles);aspect-ratio:1;min-width:18rem}
.st__card--4{--shift:5.5rem;--mm:var(--m-flower6);aspect-ratio:1}
.st__body{padding:clamp(1.75rem,1.4rem + 1.55vw,3.25rem) clamp(1.5rem,1.2rem + 1.3vw,2.75rem);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.st__title{font-style:italic;text-wrap:balance}
.st__cap{font-size:.95rem;max-width:18ch}
.st__heart{position:absolute;color:#fff;pointer-events:none}
.st__heart svg{width:100%;height:auto}
.st__bg{position:absolute;left:0;right:0;bottom:0;height:0;z-index:1;pointer-events:none}
.st__tail{position:absolute;left:50%;bottom:-6rem;width:max(120rem,130%);transform:translateX(-50%);max-width:none}
.st__line{position:absolute;left:0;bottom:12rem;width:100%;min-width:90rem;color:#fff;max-width:none}
@media (max-width:1439px){.st__stage{margin-top:0}}
@media (max-width:1279px){
  .st__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
  .st__card{max-width:24rem;justify-self:center}
  .st__card--1{--shift:0rem;justify-self:end}.st__card--2{--shift:6rem}.st__card--3{--shift:3rem;justify-self:end;min-width:0}.st__card--4{--shift:8rem}
  .st__wrap{padding-bottom:calc(var(--sec) + 8rem)}
}
@media (max-width:767px){
  .st__cards{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
  .st__card{--shift:0rem!important;width:min(100%,19rem)}
  .st__wrap{padding-bottom:calc(var(--sec) + 4rem)}
  .st__heart--5,.st__heart--6{display:none}
}

/* ---------- faq ---------- */
.faq{padding-top:calc(var(--sec) + 12rem)}
.faq__shell{display:flex;flex-direction:column;gap:clamp(2.5rem,1.9rem + 2.6vw,5rem);position:relative;z-index:1}
.faq__head{gap:1.25rem}
.faq__title{max-width:9em}
.faq__items{border-top:1px solid color-mix(in srgb,var(--g900) 60%,transparent)}
.faq__item{border-bottom:1px solid color-mix(in srgb,var(--g900) 60%,transparent)}
.faq__item[hidden]{display:none}
.faq__tr{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding:2.1rem 0;text-align:left}
.faq__q{line-height:1.05}
.faq__ic{position:relative;width:4.125rem;height:4.125rem;border-radius:50%;transition:background-color var(--base),color var(--base)}
.faq__ic::before{content:"";position:absolute;inset:2px;border:1.5px solid var(--g900);border-radius:50%;filter:url(#roughSmall)}
.faq__ic i{position:absolute;left:50%;top:50%;width:26px;height:2.5px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform var(--base)}
.faq__ic i+i{transform:translate(-50%,-50%) rotate(90deg)}
.faq__tr:hover .faq__ic,.faq__tr:focus-visible .faq__ic,.faq__tr[aria-expanded="true"] .faq__ic{background:var(--g900);color:var(--g100)}
.faq__tr[aria-expanded="true"] .faq__ic i+i{transform:translate(-50%,-50%) rotate(0)}
.faq__panel{height:0;overflow:hidden;transition:height var(--base)}
.faq__panel[hidden]{display:none}
.faq__pin{padding:0 clamp(4rem,3.4rem + 2.6vw,6.5rem) 2.25rem 0}
.faq__foot{display:flex;justify-content:center}
@media (max-width:1023px){.faq{padding-top:calc(var(--sec) + 8rem)}}
@media (max-width:767px){.faq{padding-top:calc(var(--sec) + 3rem)}.faq__tr{gap:1rem}.faq__pin{padding-right:0}}

/* ---------- CTA ---------- */
.cta{position:relative;padding:0;overflow-x:clip;z-index:1}
.cta__wrap{color:var(--g300);display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding-top:clamp(9rem,5rem + 16vw,24rem);padding-bottom:clamp(5.4rem,4.5rem + 3.5vw,8.75rem);border-bottom:1px solid rgba(255,255,255,.2);text-align:center}
.cta__desc{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.cta__bgw{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column}
.cta__clouds{width:100%;max-width:120rem;margin:0 auto;flex-shrink:0;transform-origin:center bottom;color:var(--g900)}
.cta__clouds svg{width:100%;height:auto}
.cta__fill{flex-grow:1;margin-top:-2px;background:var(--g900)}

/* ---------- footer ---------- */
.footer{background:var(--g900);color:var(--g300);padding:3.75rem 0 3rem}
.footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4rem 1rem}
.footer__brand{grid-column:1/7;grid-row:1/3}
.footer__logo{--mask:var(--m-cloudsm);display:inline-flex;flex-direction:column;gap:1rem;padding:clamp(3.3rem,2.5rem + 3.5vw,6.75rem) clamp(3.3rem,3rem + 1.1vw,4.4rem);background:var(--g300);color:var(--g900);-webkit-mask:var(--m-cloudsm) center/100% 100% no-repeat;mask:var(--m-cloudsm) center/100% 100% no-repeat;max-width:100%}
.footer__tag{max-width:18.7em}
.footer__news{grid-column:1/6;grid-row:3/4;display:flex;flex-direction:column;gap:1rem;max-width:30rem}
.footer__form{display:flex;flex-wrap:wrap;gap:.5rem}
.footer__input{flex:1;min-width:0;height:4.125rem;padding:0 1.5rem;border:0;border-radius:.625rem;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:1rem;font-weight:700;-webkit-text-stroke-width:0}
.footer__input::placeholder{color:#fff;opacity:.6}
.footer__sub{height:4.125rem;padding-inline:2rem;border-radius:.625rem;background:var(--g500);color:#fff;font-weight:700;font-size:1rem;transition:background-color var(--base),color var(--base);-webkit-text-stroke-width:0}
.footer__sub:hover{background:var(--g100);color:var(--g900)}
.footer__msg{flex-basis:100%;font-size:.95rem;min-height:1.3em;color:var(--g200)}
.footer__nav{grid-column:7/13;grid-row:1/2}
.footer__nav ul{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__nav a{color:color-mix(in srgb,var(--g300) 60%,transparent);transition:color var(--base);font-size:1.05rem}
.footer__nav a:hover{color:var(--g300)}
.footer__soc{grid-column:7/13;grid-row:2/3;align-self:start;color:var(--g300)}
.footer__soc .soc a::before{opacity:.4}
.footer__cat{grid-column:7/13;grid-row:2/4;align-self:end;width:100%;max-width:34rem;justify-self:end;color:var(--g300);pointer-events:none}
.footer__cat svg{width:100%;height:auto}
.footer__copy{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;font-size:.85rem;color:color-mix(in srgb,var(--g300) 60%,transparent)}
.footer__copy p:nth-child(1){grid-column:span 6}
.footer__copy p:nth-child(2){grid-column:span 4}
.footer__copy p:nth-child(3){grid-column:span 2;justify-self:end}
.footer__copy a{transition:color var(--base);text-decoration:underline;text-underline-offset:.15em}
.footer__copy a:hover{color:var(--g300)}
@media (max-width:991px){
  .footer__grid{grid-template-columns:1fr;gap:3rem}
  .footer__brand,.footer__news,.footer__nav,.footer__soc,.footer__cat,.footer__copy{grid-column:1;grid-row:auto;justify-self:center;text-align:center}
  .footer__news{width:min(100%,28rem)}
  .footer__nav ul{justify-content:center;gap:1rem 2rem}
  .footer__cat{max-width:21rem}
  .footer__copy{display:flex;flex-direction:column;align-items:center;gap:.5rem}
}
@media (max-width:479px){.footer__logo{padding:3rem 2.5rem}.footer__form{flex-direction:column}}

/* ---------- quick-shop попап ---------- */
.qs{--mask:var(--m-cloudsm);--fill:var(--g200);position:fixed;right:max(var(--pad),calc((100vw - 112.5rem)/2 + var(--pad)));bottom:clamp(1rem,2vw,1.5rem);width:15.9rem;z-index:90;padding:1rem 1rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
.qs.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s ease,visibility 0s}
.qs__x{position:absolute;top:0;right:0;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;transform:translate(20%,-20%);background:var(--g200);box-shadow:inset 0 0 0 2px var(--accent);color:var(--g900);transition:background-color var(--base),color var(--base);z-index:2;min-width:0}
.qs__x:hover{background:var(--accent);color:var(--g200)}
.qs__x svg{width:12px;height:12px}
.qs__img{position:relative;width:62%}
.qs__img img{width:100%}
@media (max-width:1279px){
  .qs{width:auto;padding:0;right:50%;transform:translateX(50%)}
  .qs>.bg,.qs__x,.qs__img{display:none}
  .qs .btn{box-shadow:0 24px 34px rgba(34,58,40,.2)}
}

/* ---------- корзина ---------- */
.ov{position:fixed;inset:0;background:rgba(34,58,40,.18);z-index:150;opacity:0;pointer-events:none;transition:opacity var(--base)}
.ov.is-on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(36.9rem,calc(100vw - 1rem));background:#F7F6E7;border-radius:2.5rem 0 0 2.5rem;box-shadow:0 24px 64px rgba(34,58,40,.16);z-index:200;display:flex;flex-direction:column;transform:translateX(calc(100% + 2rem));transition:transform var(--slow);visibility:hidden}
.drawer.is-on{transform:translateX(0);visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:2rem clamp(1.5rem,2vw,2rem) 1.5rem}
.drawer__x{width:3.9rem;height:3.9rem;border-radius:50%;border:1.5px solid rgba(34,58,40,.35);font-size:2rem;line-height:1;display:grid;place-items:center;transition:background var(--fast),border-color var(--fast)}
.drawer__x:hover{background:rgba(109,145,10,.08);border-color:var(--accent)}
.drawer__body{flex:1;overflow-y:auto;padding:0 clamp(1.5rem,2vw,2rem)}
.drawer__body::before{content:"";display:block;height:1px;background:rgba(34,58,40,.7);margin-bottom:1.75rem}
.drawer__empty p:last-child{color:#96a092;font-size:.95rem;margin-top:.4rem}
.citem{display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(34,58,40,.7)}
.citem__t{font-family:var(--f-display);font-stretch:75%;font-size:2rem;line-height:.95}
.citem__v{color:#96a092;font-size:.95rem}
.citem__rm{color:#96a092;width:2.4rem;height:2.4rem;font-size:1.5rem;transition:color var(--fast)}
.citem__rm:hover{color:var(--g900)}
.qty{display:inline-grid;grid-template-columns:2.75rem 3.5rem 2.75rem;align-items:center;background:#fff;border-radius:.35rem;box-shadow:inset 0 0 0 1px rgba(34,58,40,.06);width:fit-content}
.qty button{height:2.4rem;font-size:1.2rem;transition:background var(--fast)}
.qty button:hover{background:rgba(109,145,10,.08)}
.qty span{text-align:center}
.drawer__foot{padding:1.5rem clamp(1.5rem,2vw,2rem) 2rem;display:flex;flex-direction:column;gap:1.2rem}
.toggle{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:1.05rem}
.toggle input{position:absolute;opacity:0}
.toggle__tr{position:relative;width:2.25rem;height:1.35rem;border-radius:99px;background:rgba(150,160,146,.3);transition:background var(--fast)}
.toggle__th{position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;transition:transform var(--fast),background var(--fast)}
.toggle input:checked+.toggle__tr{background:rgba(109,145,10,.25)}
.toggle input:checked+.toggle__tr .toggle__th{transform:translateX(.9rem);background:var(--accent)}
.toggle:hover span:last-child{color:var(--accent)}
.drawer__sum{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-stretch:75%;font-size:2.2rem;line-height:1}
.drawer__note{font-size:.95rem;color:var(--accent);min-height:1.3em}

/* ---------- демо-плашка, тост ---------- */
.demo-badge{position:fixed;left:1rem;bottom:1rem;z-index:120;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;background:var(--g900);color:var(--g200);font-size:.85rem;font-weight:600;-webkit-text-stroke-width:0;box-shadow:0 8px 24px rgba(34,58,40,.25);transition:background var(--base),transform var(--base)}
.demo-badge:hover{background:var(--g500);transform:translateY(-2px)}
.demo-badge i{width:.5rem;height:.5rem;border-radius:50%;background:var(--g500)}
.demo-badge:hover i{background:var(--g200)}
@media (max-width:1279px){.demo-badge{bottom:auto;top:auto;left:.75rem;bottom:5.4rem;font-size:.75rem;padding:.45rem .8rem}}
.toast{position:fixed;left:50%;top:1.25rem;z-index:1100;transform:translate(-50%,-150%);max-width:min(92vw,30rem);padding:1rem 1.4rem;border-radius:1.2rem;background:var(--g900);color:var(--g200);font-size:1rem;line-height:1.35;text-align:center;box-shadow:0 16px 40px rgba(34,58,40,.3);transition:transform .45s cubic-bezier(.34,1.3,.64,1);-webkit-text-stroke-width:0}
.toast.is-on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* минимальный Swiper */
.swiper{position:relative;z-index:1}
.swiper-wrapper{position:relative;z-index:1;display:flex;box-sizing:content-box;transition-property:transform}
.swiper-slide{flex-shrink:0;position:relative}
.swiper-initialized .swiper-wrapper{touch-action:pan-y}
.swiper-notification{position:absolute;opacity:0;pointer-events:none}
@media (min-width:1280px){.pr__cards.swiper-wrapper{display:grid}}
@media (max-width:767px){.gr__paws{top:17rem}.paw{width:20%;top:0}.paw--l{left:-5%;transform:rotate(12deg)}.paw--r{right:-5%;transform:rotate(-12deg)}.paw.wiggle{animation:none}}
body.menu-open .demo-badge,body.menu-open .qs{opacity:0;pointer-events:none}
@media (max-width:767px){.gr__inner{--mask:var(--m-cloudsm)}}