/* Sola Tutors — одностраничник (задача 096), первый экран лендинга v2 (../sayt/). Числа = files/lending/v2/dizayn/DESIGN.md. Цвета — только tokens.css задачи 086.
   Шкала текста — 8 ступеней (раздел «Типографика» DESIGN.md) плюс note 14 px для подвала (круг 2, ./DESIGN.md); других размеров нет. */
@font-face{font-family:Unbounded;font-display:swap;src:url(../fonts/unbounded-normal-200-900-cyrillic.woff2) format('woff2');font-weight:200 900;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-display:swap;src:url(../fonts/unbounded-normal-200-900-cyrillic-ext.woff2) format('woff2');font-weight:200 900;unicode-range:U+0460-052F,U+20B4}
@font-face{font-family:Unbounded;font-display:swap;src:url(../fonts/unbounded-normal-200-900-latin.woff2) format('woff2');font-weight:200 900;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+2212}
@font-face{font-family:Onest;font-display:swap;src:url(../fonts/onest-normal-100-900-cyrillic.woff2) format('woff2');font-weight:100 900;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-display:swap;src:url(../fonts/onest-normal-100-900-cyrillic-ext.woff2) format('woff2');font-weight:100 900;unicode-range:U+0460-052F,U+20B4}
@font-face{font-family:Onest;font-display:swap;src:url(../fonts/onest-normal-100-900-latin.woff2) format('woff2');font-weight:100 900;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+2212}

:root{
  --ink:#21231C; --ink-2:#595C51; --page:#F7F7F7; --white:#FFFFFF; --grey-card:#EAEAEA;
  --action:#716598; --danger:#D71E21;
  --lime:#E3FA99; --peach:#F7C6B5; --lilac:#C6B8F1;
  --lime-soft:#EDF4D9; --peach-soft:#FCECE7; --lilac-soft:#F1EDFF;
  --gradient:radial-gradient(55% 60% at 0% 0% in oklab,#E3FA99,transparent),radial-gradient(55% 65% at 100% 100% in oklab,#C6B8F1,transparent),linear-gradient(125deg in oklab,#E3FA99,#F7C6B5 50%,#C6B8F1);
  --line-ink:rgba(33,35,28,.12); --scrim:rgba(33,35,28,.55); --line-white:rgba(255,255,255,.35); --white-2:rgba(255,255,255,.78);
  --f-head:Unbounded,sans-serif; --f-text:Onest,sans-serif;

  /* 8 ступеней. Телефон: */
  --t-price:min(64px, 14vw); --t-display:min(52px, 12vw); --t-h1:min(34px, 7.6vw); --t-h2:clamp(21px, 6.2vw, 28px);
  --t-h3:18px; --t-lead:18px; --t-body:17px; --t-label:17px; --t-note:14px;

  --margin:20px; --gap:12px; --gap-block:72px; --panel-pad:20px; --hdr:64px;
  --r-panel:28px; --r-card:20px; --r-field:16px; --r-pill:999px;
  --phone-w:260px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:359px){:root{--margin:16px;--panel-pad:16px}}
@media (min-width:1200px){
  :root{
    --t-price:min(144px, 10vw); --t-display:min(88px, 6.1vw); --t-h1:58px; --t-h2:44px;
    --t-h3:28px; --t-lead:21px;
    --margin:64px; --gap:24px; --gap-block:128px; --panel-pad:64px; --hdr:88px;
    --r-panel:40px; --r-card:28px; --phone-w:320px;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:400 var(--t-body)/1.5 var(--f-text);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.on-dark :focus-visible{outline-color:var(--white)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--margin)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;z-index:30;top:8px;left:8px;width:auto;height:auto;clip:auto;overflow:visible;padding:12px 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--white);font:600 var(--t-label)/1.35 var(--f-text);text-decoration:none}

/* ---------- ступени шкалы ---------- */
.t-price{font:600 var(--t-price)/.95 var(--f-head);letter-spacing:-.04em}
.t-display{font:600 var(--t-display)/1 var(--f-head);letter-spacing:-.035em;text-wrap:balance}
.t-h1{font:600 var(--t-h1)/1.04 var(--f-head);letter-spacing:-.03em;text-wrap:balance}
.t-h2{font:600 var(--t-h2)/1.1 var(--f-head);letter-spacing:-.025em;text-wrap:balance}
.t-h3{font:600 var(--t-h3)/1.25 var(--f-head);letter-spacing:-.02em;text-wrap:balance}
.t-lead{font:400 var(--t-lead)/1.45 var(--f-text);text-wrap:pretty}
.t-body{font:400 var(--t-body)/1.5 var(--f-text);text-wrap:pretty}
.t-label{font:600 var(--t-label)/1.35 var(--f-text)}
.t-note{font:400 var(--t-note)/1.4 var(--f-text)}  /* 9-я ступень, только подвал одностраничника (круг 2) */
.measure{max-width:36em}
.br-d{display:none}
@media (min-width:1200px){.br-m{display:none}.br-d{display:inline}}
.t-display,.t-h1,.t-h2,.t-h3{text-wrap:wrap}
.muted{color:var(--ink-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;border-radius:var(--r-pill);font:600 var(--t-label)/1 var(--f-text);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--action)}
.btn--white{background:var(--white);color:var(--ink)}
.btn--white:hover{background:var(--lime)}
.btn--sm{min-height:48px;padding:0 24px}
.link{text-decoration:none;font:600 var(--t-label)/1.35 var(--f-text);display:inline-flex;align-items:center;min-height:44px;transition:color .2s var(--ease)}
.link:hover{color:var(--action)}

/* ---------- телефон и листалка (как в ../sayt) ---------- */
.phone{width:calc(var(--phone-w) + 20px);padding:10px;border-radius:calc(var(--phone-w) * .17);background:var(--ink);flex:none}
.phone__screen{position:relative;width:var(--phone-w);aspect-ratio:390/844;border-radius:calc(var(--phone-w) * .145);overflow:hidden;background:var(--page)}
.phone__screen img{width:100%;height:100%;object-fit:cover}
.phone--shadow{box-shadow:0 32px 64px -24px rgba(33,35,28,.35)}
.swipe{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.swipe::-webkit-scrollbar{display:none}
.swipe img{flex:none;width:100%;height:100%;scroll-snap-align:start}
.dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);background:rgba(33,35,28,.6);cursor:pointer;position:relative;transition:width .2s var(--ease),background-color .2s var(--ease)}
.dots button::after{content:"";position:absolute;inset:-16px -6px}
.dots button[aria-current="true"]{width:20px;background:var(--ink)}


/* ---------- одна страница: шапка, первый экран, строка подвала — всё в высоту окна ---------- */
html{background:var(--page)}
body.one{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--gradient)}
.hdr{height:var(--hdr)}
.hdr__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr__logo{display:block}
.hdr__logo img{height:36px;width:auto}
.hdr .link{min-height:48px;padding:0 4px}

.hero{display:grid;min-height:0}
.hero__in{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;padding-top:8px;padding-bottom:8px;width:100%;min-height:0}
.hero__lead{margin:18px 0 20px;display:grid;gap:12px}
.hero__txt .btn{width:100%}
/* Телефон занимает остаток высоты окна и вписывается в него целиком: экран 390 : 844 не обрезается.
   Остаток меньше 300 px (низкое окно) — телефона нет, кнопка и текст важнее. */
.hero__ph{container-type:size;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero .phone{--phone-w:min(300px, calc(100cqw - 20px), calc((100cqh - 132px) * 390 / 844))}
@container (max-height:300px){.hero .phone,.hero .steps{display:none}}

/* шаги онбординга под телефоном: подпись шага над точками, по бокам стрелки (только мышь) */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;width:100%;max-width:440px}
.steps__mid{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.steps__cap{text-align:center;white-space:nowrap}
.steps__why{text-align:center;max-width:32em;min-height:2.8em;color:var(--ink);text-wrap:pretty}
.more{display:none}
.hero .dots{margin-top:0}
.steps__arr{display:none;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:var(--white);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;transition:background-color .2s var(--ease),opacity .2s var(--ease)}
.steps__arr:hover{background:var(--lime)}
.steps__arr:disabled{opacity:.4;cursor:default;background:var(--white)}
@media (min-width:900px) and (hover:hover) and (pointer:fine){.steps__arr{display:inline-flex}.steps{justify-content:space-between}}

/* подсказка «смахни»: палец едет справа налево поверх экрана; исчезает после первого перелистывания */
.hint{--hs:clamp(56px, calc(var(--phone-w) * .3), 84px);position:absolute;left:50%;bottom:15%;width:calc(var(--hs) * 1.8);height:var(--hs);margin-left:calc(var(--hs) * -.9);border-radius:var(--r-pill);background:var(--scrim);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);pointer-events:none;overflow:hidden;opacity:1;transition:opacity .3s var(--ease),visibility 0s linear 0s}
.hint.is-off{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
/* палец — от правого края к левому; след тянется за ним. Без движения (reduce) — стоп-кадр середины жеста */
.hint__hand{position:absolute;left:50%;top:18%;width:calc(var(--hs) * .56);margin-left:calc(var(--hs) * -.28);transform:translateX(calc(var(--hs) * -.2))}
.hint__hand svg{display:block;width:100%;height:auto}
.hint__trail{position:absolute;left:50%;top:27%;width:calc(var(--hs) * .6);height:3px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--white),transparent);opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .hint__hand{animation:hint-hand 1.8s var(--ease) infinite}
  .hint__trail{transform-origin:0 50%;animation:hint-trail 1.8s var(--ease) infinite}
}
@keyframes hint-hand{0%{transform:translateX(calc(var(--hs) * .45));opacity:0}12%{opacity:1}62%{transform:translateX(calc(var(--hs) * -.45));opacity:1}82%,100%{transform:translateX(calc(var(--hs) * -.45));opacity:0}}
@keyframes hint-trail{0%,12%{transform:translateX(calc(var(--hs) * .45)) scaleX(0);opacity:0}62%{transform:translateX(calc(var(--hs) * -.35)) scaleX(1);opacity:.7}82%,100%{transform:translateX(calc(var(--hs) * -.35)) scaleX(1);opacity:0}}
/* Телефон (круг 3, msg_2565): два экрана. Первый — заголовок, подзаголовок и кнопка на всю высоту окна,
   внизу «Як це виглядає». Второй — экран приложения, подпись шага и польза для преподавателя, тоже в высоту окна. */
@media (max-width:899px){
  html{scroll-snap-type:y proximity;scroll-padding-top:0;background:var(--gradient)}
  body.one{display:block;background:none}
  .hero__in{display:block;padding-top:0;padding-bottom:0}
  .hero__txt{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;position:relative;padding:24px 0 88px}
  .more{display:inline-flex;align-items:center;gap:6px;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);min-height:44px;color:var(--ink);text-decoration:none;white-space:nowrap}
  .hero__ph{container-type:normal;min-height:100svh;padding:20px 0 12px;scroll-snap-align:start}
  .hero .phone{--phone-w:min(290px, calc(100vw - 80px), calc((100svh - 230px) * 390 / 844))}
  .steps{margin-top:16px}
  .steps__cap{white-space:normal}
  /* круг 4: заголовок первого экрана — ступень display (на телефоне 12vw, не больше 52: «репетитора» = 7,19 em влезает на 320) */
  .hero__title{font:600 var(--t-display)/1 var(--f-head);letter-spacing:-.035em}
  .hero__lead{margin:24px 0 32px}
}
/* низкое окно (iPhone SE 320 × 568): отступы первого экрана меньше, чтобы «Як це виглядає» осталось в окне */
@media (max-width:899px) and (max-height:600px){
  .hero__txt{padding:8px 0 72px}
  .hero__lead{margin:16px 0 24px;gap:8px}
  .more{bottom:12px}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){.more svg{animation:more-bob 1.6s var(--ease) infinite}}
@keyframes more-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* подвал — одна тихая строка 14 px; зона нажатия ссылки 44 px добирается невидимым полем, а не высотой строки */
.foot__in{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;min-height:44px;padding-bottom:env(safe-area-inset-bottom);color:var(--ink);white-space:nowrap}
.foot__in a{position:relative;color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.foot__in a::after{content:"";position:absolute;inset:-12px -6px}
.foot__in a:hover{color:var(--action)}
@media (min-width:768px) and (max-width:1199px){
  .hero__txt{max-width:640px}
  .hero__txt .btn{width:auto;align-self:flex-start}
}
/* планшет и небольшой ноутбук: текст и телефон рядом, шкала текста — телефонная */
@media (min-width:900px) and (max-width:1199px){
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-rows:minmax(0,1fr);align-items:center;gap:40px;padding-top:0;padding-bottom:0}
  .hero__ph{height:100%;padding:16px 0}
  .foot__in{justify-content:flex-start}
}
@media (min-width:1200px){
  .hdr__logo img{height:40px}
  .hero__in{grid-template-columns:7fr 5fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:24px;padding-top:0;padding-bottom:0}
  .hero__lead{margin:28px 0 32px;max-width:30em}
  .hero__txt .btn{width:auto}
  .hero__ph{height:100%;padding:16px 0}
  .hero .phone{--phone-w:min(320px, calc(100cqw - 20px), calc((100cqh - 132px) * 390 / 844))}
  .foot__in{justify-content:flex-start;min-height:56px}
}

/* политика */
body.doc-page{min-height:100svh;display:flex;flex-direction:column}
.doc-page .hdr{background:var(--page);box-shadow:0 1px 0 var(--line-ink)}
.doc{flex:1;padding:48px 0 var(--gap-block)}
.doc__body{max-width:44rem}
.doc__body h2{margin:48px 0 16px}
.doc__body p,.doc__body li{margin-top:12px}
.doc__body ul{padding-left:24px}
.doc__body b{font-weight:600}
.foot--doc{border-top:1px solid var(--line-ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}