/* The consultations page's scenes (aromatenergy.com/konsultacii/ and /en/consulting/), on top of scroll.css:
   the morning film, the statement, the three levels, the formats, about her, her photos, her clients' words,
   «Точка ясности» and the request form. */

.voices-more a{font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:6px}

/* ============ the morning: the film fills the screen, then settles into an arch beside her story ============ */
.morning{background:var(--cream)}
.morning .stage{min-height:100svh}
.film{position:absolute;inset:0;background:var(--olive-d);overflow:hidden}
.film .poster,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{opacity:0;transition:opacity 1.4s ease}
.film video.on{opacity:1}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,37,22,.55) 0,rgba(30,37,22,.05) 30%,rgba(30,37,22,.24) 55%,rgba(30,37,22,.72) 100%)}
/* the words sit on the visible screen; the film under them runs on behind a phone browser's own toolbar */
.hero{position:absolute;left:0;right:0;top:0;height:100svh;color:var(--cream);pointer-events:none}
.hero a{pointer-events:auto}
.name{position:absolute;font:400 clamp(64px,15.5vw,250px)/.82 var(--display);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 40px rgba(30,37,22,.35)}
.name.n1{left:var(--pad);top:calc(var(--hdr) + 3vh);display:flex;align-items:center;gap:.12em}
.name .brand-mark{width:.62em;color:var(--gold)}
.name.n2{right:var(--pad);top:calc(var(--hdr) + 3vh + .86em)}
.hero-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:max(48px,7vh);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
.kicker{grid-column:1/-1;font:500 12px var(--text);letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.eyebrow{grid-column:1/-1;margin-top:-10px;font-size:clamp(15px,1.15vw,18px);max-width:52ch;opacity:.92;text-shadow:0 1px 16px rgba(30,37,22,.7)}
.hero h1{font:300 clamp(24px,2.6vw,40px)/1.2 var(--text);letter-spacing:-.01em;max-width:24ch;text-wrap:balance;text-shadow:0 1px 24px rgba(30,37,22,.6)}
.hero-act{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.price-line{font-size:14px;letter-spacing:.03em;opacity:.9;text-shadow:0 1px 12px rgba(30,37,22,.7)}
.cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font:500 11px var(--text);letter-spacing:.2em;text-transform:uppercase;opacity:.7;display:none;white-space:nowrap}
.imagine{position:relative;color:var(--olive);padding:clamp(80px,12vw,160px) var(--pad);max-width:1320px;margin:0 auto}
.imagine h2{font:400 clamp(46px,6.6vw,108px)/.95 var(--display);margin:0 0 30px;letter-spacing:-.005em}
.imagine .story{font:300 clamp(19px,1.75vw,27px)/1.5 var(--text);max-width:34ch}
.still-arch{margin-top:40px;max-width:360px;aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;outline:1px solid var(--gold);outline-offset:8px}
.still-arch img{width:100%;height:100%;object-fit:cover}
.caption{display:none}
/* no motion: the film is a full screen opening and the morning text sits below it */
.no-js .morning .stage,.static .morning .stage{display:flex;flex-direction:column}
.no-js .morning .film,.static .morning .film{position:relative;height:100vh;height:100lvh;inset:auto}

.motion .morning{height:270vh}
/* the film's stage is as tall as the whole screen, including the strip behind the phone browser's own toolbar, so the
   film shows through that toolbar instead of a solid colour band; consult.js measures the arch from its real height */
.motion .morning .stage{position:sticky;top:0;height:100vh;height:100lvh}
.motion .film{clip-path:inset(var(--ct,0px) var(--cr,0px) var(--cb,0px) var(--cl,0px) round var(--rr,0px) var(--rr,0px) var(--rb,0px) var(--rb,0px));will-change:clip-path}
.motion .hero{opacity:calc(1 - var(--hx,0))}
.motion .name.n1{transform:translate3d(calc(var(--hx,0) * -30vw),0,0)}
.motion .name.n2{transform:translate3d(calc(var(--hx,0) * 30vw),0,0)}
.motion .hero-copy{transform:translate3d(0,calc(var(--hx,0) * 40px),0)}
.motion .cue{display:flex;align-items:center;gap:10px}
.motion .cue span{width:1px;height:26px;background:currentColor;animation:cue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.motion .imagine{position:absolute;left:0;top:0;height:100svh;width:54%;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 2vh) 0 4vh var(--pad);opacity:var(--ix,0);transform:translate3d(0,calc((1 - var(--ix,0)) * 30px),0);pointer-events:none}
.motion .morning.past .hero{visibility:hidden} /* once the opening's words have faded, its button can't be tapped or reached by Tab */
.motion .still-arch{display:none}
.motion .caption{display:block;position:absolute;font:500 11.5px var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--brown);left:var(--capx,0);top:var(--capy,0);opacity:var(--ix,0);white-space:nowrap}


/* ============ clarity: the feeling, said once, very large ============ */
.clarity{background:var(--cream);padding:clamp(40px,6vw,90px) 0 clamp(110px,14vw,200px)}
.clarity .big{font:300 clamp(40px,7vw,118px)/1.02 var(--text);letter-spacing:-.035em;max-width:15ch;color:var(--olive)}
.clarity-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(40px,6vw,80px);align-items:start;font-size:18px}
.clarity .accent-p{font:400 clamp(24px,2.4vw,36px)/1.25 var(--display);color:var(--brown);max-width:24ch}
.clarity-cols p+p{margin-top:18px}
.clarity .note{color:var(--brown);font-size:16px}

/* ============ the approach: the worries blur and fall away, three levels meet in one point that floods the screen ============ */
.focus{background:var(--olive);color:var(--cream)}
.focus .stage{height:100svh;min-height:600px}
.noise{position:absolute;inset:0;pointer-events:none;display:none}
.nz{position:absolute;left:50%;top:50%;white-space:nowrap;font:300 clamp(18px,1.9vw,30px)/1 var(--text);letter-spacing:-.01em;transform:translate3d(calc(-50% + var(--x) * 1vw),calc(-50% + var(--y) * 1vh),0)}
.nz i,.nz b{font-style:normal;font-weight:300;display:block}
.nz b{position:absolute;inset:0;color:transparent;text-shadow:0 0 14px rgba(243,238,227,.85)}
.nz i{color:var(--sage)}
.triad{--R:clamp(150px,15vw,250px);position:absolute;left:69%;top:52%;width:0;height:0}
.ring{position:absolute;left:0;top:0;width:calc(var(--R) * 2);height:calc(var(--R) * 2);margin:calc(var(--R) * -1) 0 0 calc(var(--R) * -1)}
.ring span{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold)}
.ring .blur{border-width:6px;filter:blur(10px);opacity:0}
.ring em{position:absolute;font:500 13px var(--text);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.r1{transform:translate3d(0,calc(var(--R) * -.58),0)}
.r2{transform:translate3d(calc(var(--R) * -.5),calc(var(--R) * .29),0)}
.r3{transform:translate3d(calc(var(--R) * .5),calc(var(--R) * .29),0)}
.r1 em{left:50%;top:22%;transform:translateX(-50%)}
.r2 em{left:12%;bottom:22%}
.r3 em{right:12%;bottom:22%}
.point{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 8px rgba(190,163,105,.18)}
.point-label{position:absolute;left:18px;top:-8px;font:500 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:#cdb684;white-space:nowrap}
.focus-copy{position:absolute;left:var(--pad);bottom:clamp(60px,12vh,140px);max-width:min(44vw,640px)}
.focus h2{font:400 clamp(52px,7.4vw,128px)/.94 var(--display);letter-spacing:-.005em}
.focus .sub{margin-top:26px;font-size:clamp(16px,1.25vw,19px);max-width:44ch;color:var(--sage)}
.meter{position:absolute;left:var(--pad);top:calc(var(--hdr) + 28px);display:none;align-items:center;gap:12px;font:500 11.5px var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.m-track{width:120px;height:1px;background:rgba(198,206,184,.35);position:relative;overflow:hidden}
.m-fill{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--f,1))}
.flood{display:none}
.no-js .focus .stage,.static .focus .stage{min-height:100svh}

.motion .focus{height:460vh}
.motion .focus .stage{position:sticky;top:0}
.motion .noise{display:block}
.motion .meter{display:flex}
.motion .nz{opacity:calc(var(--nin,0) * (1 - var(--f,0)));transform:translate3d(calc(-50% + var(--x) * 1vw * (1 + var(--f,0) * .9 * var(--d))),calc(-50% + var(--y) * 1vh * (1 + var(--f,0) * .9 * var(--d)) + (var(--p,0) * -60px * var(--d))),0) scale(calc(1 + var(--f,0) * .25 * var(--d)))}
.motion .nz i{opacity:calc(1 - var(--f,0) * 1.4)}
.motion .nz b{opacity:calc(var(--f,0) * 1.6)}
.motion .ring{opacity:calc(.35 + .65 * var(--f,0))}
.motion .ring .blur{opacity:calc(1 - var(--f,0))}
.motion .ring .sharp{opacity:calc(var(--f,0) * var(--f,0))}
.motion .ring em{opacity:calc(var(--f,0) * var(--f,0))}
.motion .r1{transform:translate3d(0,calc(var(--R) * -.58 - (1 - var(--f,0)) * 30vh),0) scale(calc(1 + (1 - var(--f,0)) * .5))}
.motion .r2{transform:translate3d(calc(var(--R) * -.5 - (1 - var(--f,0)) * 34vw),calc(var(--R) * .29 + (1 - var(--f,0)) * 14vh),0) scale(calc(1 + (1 - var(--f,0)) * .5))}
.motion .r3{transform:translate3d(calc(var(--R) * .5 + (1 - var(--f,0)) * 22vw),calc(var(--R) * .29 + (1 - var(--f,0)) * 20vh),0) scale(calc(1 + (1 - var(--f,0)) * .5))}
.motion .point{transform:scale(var(--pt,0))}
.motion .point-label{opacity:var(--pl,0)}
.motion .focus-copy{opacity:var(--hc,0);transform:translate3d(0,calc((1 - var(--hc,0)) * 26px),0)}
.motion .flood{display:block;position:absolute;left:var(--fx,69%);top:var(--fy,52%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--cream);transform:scale(var(--fl,0));z-index:5;will-change:transform}

/* ============ the formats: from the point, three ways to work, sliding past ============ */
.formats{background:var(--cream)}
.formats .stage{padding:calc(var(--hdr) + 30px) 0 60px}
.track{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;min-width:0}
.panel{flex:none;scroll-snap-align:start}
.intro{width:min(40vw,560px);display:flex;flex-direction:column;justify-content:center;padding-right:2vw}
.intro h2{font:400 clamp(52px,7vw,120px)/.92 var(--display);margin-bottom:26px}
.intro h2:lang(en){font-size:clamp(42px,5vw,84px)}
.lead-in{font-size:clamp(17px,1.35vw,20px);max-width:38ch}
.card{width:min(34vw,500px);min-height:min(66vh,580px);border-radius:22px;padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.card .n{font:400 clamp(64px,6vw,104px)/.8 var(--display);font-variant-numeric:tabular-nums}
.card svg{width:76px;height:76px}
.card h3{font:400 clamp(30px,2.6vw,42px)/1.04 var(--display);margin-bottom:14px}
.card p{font-size:16px;line-height:1.55}
.card .result{margin-top:18px;padding-top:16px;border-top:1px solid currentColor;font-size:15px}
.card .result span{font:500 11.5px var(--text);letter-spacing:.16em;text-transform:uppercase}
.c1{background:var(--olive);color:var(--cream)}
.c1 .result{border-color:rgba(243,238,227,.3)}
.c2{background:var(--sage);color:var(--olive)}
.c2 .result{border-color:rgba(52,65,40,.25)}
.c3{background:var(--beige);color:var(--brown)}
.c3 .result{border-color:rgba(92,60,32,.25)}
.rail{display:none}
@media (min-width:901px){
  /* no motion: the three formats side by side under the heading, nothing to scroll sideways */
  .no-js .track,.static .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .no-js .intro,.static .intro{grid-column:1/-1;width:auto;padding:0 0 20px}
  .no-js .card,.static .card{width:auto;min-height:0}
}
.motion .formats{height:300vh}
.motion .formats .stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.motion .track{overflow:visible;transform:translate3d(calc(var(--x,0) * -1px),0,0);will-change:transform}
.motion .rail{display:flex;align-items:center;position:absolute;left:var(--pad);right:var(--pad);bottom:max(28px,5vh)}
.rail .dot{width:12px;height:12px;border-radius:50%;background:var(--gold);flex:none}
.rail .line{flex:1;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}

/* ============ about her: close and quiet ============ */
.daria{background:var(--olive);color:var(--cream);padding:clamp(100px,12vw,180px) 0;overflow:hidden}
.daria-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,120px);align-items:center}
.portrait{border-radius:999px 999px 22px 22px;overflow:hidden;aspect-ratio:2/3;outline:1px solid rgba(190,163,105,.7);outline-offset:10px;max-width:520px}
.portrait img{width:100%;height:100%;object-fit:cover}
.motion .portrait img{transform:translate3d(0,calc(var(--v,.5) * -60px + 30px),0) scale(1.1)}
.daria h2{font:400 clamp(52px,7vw,124px)/.92 var(--display);margin-bottom:28px}
.daria .lead{font-size:clamp(20px,1.9vw,27px);line-height:1.4;margin-bottom:18px;max-width:30ch}
.daria-text p{max-width:46ch}
.daria-text>p+p{margin-top:14px}
.years{display:flex;align-items:flex-end;gap:16px;margin:40px 0 22px;border-top:1px solid rgba(243,238,227,.2);padding-top:26px}
.yn{font:400 clamp(110px,13vw,220px)/.72 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.05em}
.yl{font:500 12.5px/1.6 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage);padding-bottom:6px;max-width:22ch}
.yl strong{display:block;color:var(--cream)}

/* ============ life in balance: her own photos, one at a time ============ */
.balance{background:var(--sage);color:var(--olive);padding:clamp(100px,12vw,180px) 0}
.balance-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,120px);align-items:center}
.slides{position:relative;width:100%;max-width:420px;aspect-ratio:2/3;margin:0 auto;border-radius:999px 999px 18px 18px;overflow:hidden;outline:1px solid rgba(52,65,40,.45);outline-offset:8px}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.slides img:first-child{opacity:1}
.motion .slides img{animation:slide 25s linear infinite both}
.motion .slides img:nth-child(2){animation-delay:5s}
.motion .slides img:nth-child(3){animation-delay:10s}
.motion .slides img:nth-child(4){animation-delay:15s}
.motion .slides img:nth-child(5){animation-delay:20s}
@keyframes slide{0%{opacity:0;scale:1.08}4%{opacity:1}20%{opacity:1}24%{opacity:0;scale:1}100%{opacity:0;scale:1}}
.balance h2{font:400 clamp(52px,7vw,120px)/.92 var(--display);margin-bottom:26px}
.balance .lead{font:400 clamp(24px,2.4vw,36px)/1.25 var(--display);color:var(--brown);max-width:24ch;margin-bottom:28px}

/* ============ what clients say ============ */
.voices{background:var(--cream);padding:clamp(100px,12vw,180px) 0}
.voices h2{font:300 clamp(30px,3.6vw,56px)/1.12 var(--text);letter-spacing:-.02em;max-width:22ch;margin-bottom:24px}
.voices-lead{font-size:clamp(18px,1.5vw,22px);max-width:46ch;margin-bottom:clamp(50px,6vw,90px)}
.quotes{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.q figcaption{font-size:16px;color:var(--brown);margin-bottom:16px;max-width:40ch}
.q blockquote{font:400 clamp(26px,2.6vw,42px)/1.18 var(--display);color:var(--olive)}
.q+.q{margin-top:clamp(0px,8vw,140px)}
.voices-more{margin-top:clamp(50px,6vw,90px);max-width:56ch}
.dignity{font:400 clamp(26px,2.8vw,44px)/1.25 var(--display);color:var(--brown);text-align:center;max-width:32ch;margin:clamp(80px,10vw,140px) auto 0;padding-top:clamp(50px,6vw,80px);border-top:1px solid var(--beige)}

/* ============ «Точка ясности»: her mark, and how to begin ============ */
.offer{background:var(--olive);color:var(--cream);padding:clamp(100px,11vw,170px) 0}
.offer-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:start}
.drop-col{position:sticky;top:calc(var(--hdr) + 40px)}
.drop{position:relative;aspect-ratio:1}
.seal-mark{position:absolute;inset:4%;background:#cdb684;-webkit-mask:url("img/mark.png") center/contain no-repeat;mask:url("img/mark.png") center/contain no-repeat}
.motion .seal-mark{opacity:var(--v,1)}
.offer .label{color:var(--sage)}
.offer h2{font:400 clamp(56px,7.6vw,132px)/.92 var(--display);margin-bottom:28px;letter-spacing:-.01em}
.what{font-size:clamp(17px,1.4vw,21px);max-width:44ch;margin-bottom:40px}
.what+.what{margin-top:-22px}
.facts{list-style:none;padding:0;border-top:1px solid rgba(243,238,227,.22)}
.facts li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;padding:18px 0;border-bottom:1px solid rgba(243,238,227,.22);color:var(--sage);font-size:15.5px}
.facts strong{font:400 24px/1.15 var(--display);color:var(--cream)}
.price{font:400 clamp(58px,6.6vw,118px)/.9 var(--display);white-space:nowrap;margin:50px 0 44px;color:var(--cream);letter-spacing:-.01em}
.price span{color:var(--gold)}
.steps-h{font:500 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:22px}
.how-book{list-style:none;padding:0;display:grid;gap:18px;margin-bottom:44px}
.how-book li{display:flex;gap:18px;align-items:baseline;font-size:15.5px;color:var(--sage)}
.how-book .k{font:400 34px/1 var(--display);color:var(--gold);width:28px;flex:none}
.how-book strong{display:block;color:var(--cream);font-size:17px}
.motion .how-book li{opacity:calc(.25 + .75 * var(--o,0));transition:opacity .5s}

/* ============ the free lesson, in her online school ============ */
.free{background:var(--cream);padding:clamp(70px,9vw,120px) max(var(--pad),env(safe-area-inset-left,0px)) clamp(30px,4vw,50px)}
.free-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1100px;margin:0 auto;border:1px solid var(--beige);border-radius:22px;padding:clamp(16px,2.4vw,30px)}
.free-photo{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:1400/747}
.free-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.free-photo:hover img{transform:scale(1.03)}
.go-round{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--olive);color:var(--cream)}
.free-photo .go-round{position:absolute;left:50%;top:50%;margin:-32px 0 0 -32px}
.go-round .icon{width:30px;height:30px;margin-left:3px}
.tagline{display:block;font:500 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--brown);margin-bottom:10px}
.free h2{font:400 clamp(30px,3vw,46px)/1.1 var(--display);margin-bottom:16px}
.free-text>p{font-size:16px}
.chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 14px;border-radius:99px;background:rgba(215,198,174,.5);color:var(--brown);font-size:14px}
.free .actions{margin-top:24px}
.free-text .note{margin-top:14px;color:var(--brown);font-size:14.5px}

/* ============ her Telegram post ============ */
.post{background:var(--cream);padding:clamp(60px,8vw,110px) 0 clamp(110px,12vw,170px);text-align:center}
.post .wrap{max-width:900px}
.post h2{font:400 clamp(34px,4.4vw,64px)/1.05 var(--display);margin-bottom:26px}
.post p{max-width:56ch;margin:0 auto 16px}
.post .actions{justify-content:center;margin-top:30px}

@media (max-width:900px){
  .hero-copy{grid-template-columns:1fr;gap:18px}
  .eyebrow{margin-top:-6px}
  .hero-act{align-items:flex-start}
  .name{font-size:clamp(64px,21vw,170px)}
  .name.n2{top:calc(var(--hdr) + 3vh + .9em)}
  .motion .imagine{width:auto;right:0;justify-content:flex-start;padding:0 var(--pad);top:var(--itop,46%);height:auto}
  .motion .imagine .label{margin-bottom:12px}
  .imagine h2{font-size:clamp(40px,11vw,64px);margin-bottom:16px}
  .imagine .story{font-size:17px;line-height:1.5}
  .clarity-cols{grid-template-columns:1fr}
  .triad{--R:clamp(92px,25vw,150px);left:50%;top:38%}
  .focus-copy{max-width:none;right:var(--pad);bottom:max(84px,10vh)}
  .focus h2{font-size:clamp(46px,12.5vw,80px)}
  .focus .sub{font-size:15.5px;margin-top:16px}
  .ring em{font-size:11px;letter-spacing:.12em}
  .point-label{display:none}
  .nz{font-size:16px}
  .motion .formats{height:auto}
  .motion .formats .stage{position:relative;height:auto}
  .motion .track{transform:none}
  .motion .rail{display:none}
  .formats .stage{padding:90px 0 80px}
  .track{flex-direction:column;overflow:visible}
  .intro,.card{width:auto}
  .intro{padding:0 0 10px}
  .card{min-height:0}
  .daria-grid,.balance-grid{grid-template-columns:1fr}
  .portrait{max-width:330px;margin:0 auto 10px;width:82%}
  .slides{max-width:300px;width:78%}
  .quotes{grid-template-columns:1fr}
  .q+.q{margin-top:50px}
  .offer-grid{grid-template-columns:1fr}
  .drop-col{position:relative;top:0;max-width:300px;width:78%;margin:0 auto}
  .facts li{grid-template-columns:1fr;gap:4px}
  .free-card{grid-template-columns:1fr}
}
@media (max-width:900px) and (max-height:720px){
  /* short phones: smaller circles, so they clear the heading and her words below them */
  .triad{--R:clamp(70px,19vw,110px);top:34%}
  .motion .meter{display:none}
}

/* ============ the request form, at the end of «Точка ясности» ============ */
.request{background:var(--cream);padding:clamp(80px,9vw,130px) 0 clamp(30px,4vw,50px)}
.request-wrap{max-width:900px}
.request h2{font:400 clamp(40px,5vw,76px)/1 var(--display);margin-bottom:18px}
.request-intro{font-size:clamp(17px,1.4vw,20px);max-width:46ch;margin-bottom:34px}
.request-nojs{display:none;margin-bottom:20px}
.no-js .request-nojs{display:block}
.no-js .request-form{display:none}
.request-form{display:grid;gap:18px;border:1px solid var(--beige);border-radius:22px;padding:clamp(20px,3vw,36px)}
.request-form[hidden],.request-thanks[hidden],.request-error[hidden]{display:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:6px;font-size:15px;font-weight:500}
.field small{font-weight:300;color:var(--brown)}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--beige);border-radius:12px;background:#fffdf8;color:var(--olive);font:300 16px/1.4 var(--text)}
.field textarea{resize:vertical}
.field input::placeholder{color:#8a7d6b}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--brown);outline-offset:1px;border-color:var(--brown)}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;font-size:15px;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--olive)}
.check a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.request-form .btn{justify-self:start;cursor:pointer}
.request-form .btn:disabled{opacity:.6;cursor:default}
.request-error{color:#8c2f1c;font-weight:500}
.request-thanks{border:1px solid var(--gold);border-radius:22px;padding:clamp(24px,3vw,40px);text-align:center}
.request-thanks:focus{outline:none}
.request-thanks .brand-mark{width:56px;color:var(--gold);margin-bottom:14px}
.request-thanks h3{font:400 clamp(30px,3vw,44px)/1.1 var(--display);margin-bottom:10px}
.request-thanks p{max-width:44ch;margin:0 auto}
@media (max-width:600px){
  .field-row{grid-template-columns:1fr}
  .request-form .btn{justify-self:stretch;justify-content:center}
}

/* ============ the pay buttons and window (consult.js), as on the school's page ============ */
.pay[hidden],.card-pay[hidden],.pay [hidden],.card-pay [hidden]{display:none!important}
.pay{margin-top:30px;padding-top:24px;border-top:1px solid rgba(243,238,227,.22);display:grid;gap:12px;justify-items:start}
.pay-first{color:var(--sage);font-size:15.5px;max-width:44ch}
.pay-btn{color:var(--cream);cursor:pointer}
.pay-btn:hover{background:var(--cream);border-color:var(--cream);color:var(--olive)}
.pay-more,.pay-soon{font-size:14px;color:var(--sage)}
.pay-more a{color:var(--cream);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.card-pay{margin-top:16px;font-size:15px}
.card-pay [data-pay-more] a{font-size:13.5px;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
.pay-sheet{width:min(440px,calc(100vw - 32px));max-width:none;max-height:90vh;margin:auto;padding:0;overflow:auto;
  background:var(--cream);color:var(--olive);border:1px solid var(--gold);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.pay-sheet::backdrop{background:rgba(44,54,34,.62)}
.pay-in{position:relative;display:grid;gap:12px;padding:40px 28px 26px;text-align:left}
.pay-title{margin:0;padding-right:40px;font:400 30px/1.1 var(--display)}
.pay-meta{margin:0;font:400 14px/1.4 var(--text);color:var(--brown)}
.pay-meta:empty{display:none}
.pay-price{margin:6px 0 4px;font:400 40px/1 var(--display)}
.pay-go{justify-content:center;min-height:52px;padding:0 26px;font-size:16px;background:var(--olive);color:var(--cream);border-color:var(--olive)}
.pay-go:hover{background:var(--brown);border-color:var(--brown)}
.pay-note{margin:6px 0 0;font:400 15px/1.5 var(--text)}
.pay-small{margin:0;font:400 13px/1.45 var(--text);color:var(--brown)}
.pay-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;
  color:var(--olive);font:300 30px/1 var(--text);cursor:pointer}
.pay-x:hover{background:var(--sage)}
.pay-x:focus-visible,.pay-go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
html.pay-open{overflow:hidden}
@media (max-width:640px){
  .pay-sheet{width:100%;max-height:92vh;margin:auto 0 0;border-width:1px 0 0;border-radius:20px 20px 0 0}
  .pay-in{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}
/* a slide only, never a fade: if a browser holds the animation on its first frame, the window is still all there */
@media (prefers-reduced-motion:no-preference){.pay-sheet[open]{animation:pay-in .28s ease-out}}
@keyframes pay-in{from{transform:translateY(16px)}}