/* ══════════════════════════════════════════════════════════════════
   RoRent — сайт-визитка. Токены наследуют дизайн-систему мини-аппы.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Open Runde';src:url('fonts/OpenRunde-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Runde';src:url('fonts/OpenRunde-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Open Runde';src:url('fonts/OpenRunde-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Open Runde';src:url('fonts/OpenRunde-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --navy:#0b1533;
  --navy-2:#111f4d;
  --iris:#4355e8;
  --iris-deep:#2538d0;
  --iris-soft:#eaedff;
  --blue:#008cff;
  --purple:#8e00cf;
  --ink:#1c2336;
  --smoke:#7b8194;
  --mist:#ccd1da;
  --paper:#fff;
  --snow:#faf8ff;
  --line:rgba(28,35,54,.08);
  --font:'Open Runde',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1160px;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px;
  --r-lg:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--snow);color:var(--ink);
  font-family:var(--font);font-size:15.3px;line-height:1.5;letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--ink);padding:12px 18px;border-radius:12px}
.skip:focus{left:16px;top:16px}

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:15px;font-weight:600;font-size:14.4px;letter-spacing:-.02em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s;
  white-space:nowrap;
}
.btn--primary{background:var(--iris);color:#fff;box-shadow:0 12px 32px -12px rgba(67,85,232,.85)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(67,85,232,.95);background:#4f61f0}
.btn--ghost{color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.22)}
.btn--ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.btn--light{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.btn--light:hover{background:rgba(255,255,255,.18)}
.btn--sm{padding:10px 18px;font-size:13.5px;border-radius:12px}
.btn--lg{padding:18px 34px;font-size:15.3px;border-radius:17px}

/* ── Переключатель языков ─────────────────────────────────────── */
.lang{display:flex;gap:2px;padding:2.5px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.lang__b{
  padding:5px 8px;border-radius:8px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.58);transition:color .2s,background .25s var(--ease);
}
.lang__b:hover{color:#fff}
.lang__b.is-on{background:rgba(255,255,255,.16);color:#fff}

/* Кнопка входа повторяет габарит переключателя языков: внешние отступы
   равны сумме отступов .lang и .lang__b, поэтому высота совпадает. */
.signin{
  display:inline-flex;align-items:center;
  padding:7.5px 13px;border-radius:11px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:#fff;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.signin:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}

/* ── Надзаголовки и секции ────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;
  font-size:11.7px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.62);
  text-transform:none;
}
.eyebrow--dark{color:var(--smoke)}
.dot{width:6px;height:6px;border-radius:99px;background:linear-gradient(135deg,var(--blue),var(--purple));flex:none}
.grad{background:linear-gradient(105deg,#6c8cff 0%,#b981ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.sec-head{max-width:760px;margin:0 0 clamp(104px,15vh,180px)}
.sec-head h2{font-size:clamp(28.8px,4.14vw,46.8px)}
.sec-head--light .eyebrow{color:var(--smoke)}

/* ══════════════════  HERO  ══════════════════ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 78% 6%,#1c3585 0%,#0f1d4a 42%,var(--navy) 100%);
  color:#fff;padding-bottom:clamp(48px,6vw,80px);
}
.hero__aurora{
  position:absolute;inset:-25% -10% auto;height:70%;z-index:-1;
  background:
    radial-gradient(42% 60% at 22% 40%,rgba(0,140,255,.32),transparent 70%),
    radial-gradient(38% 55% at 76% 26%,rgba(142,0,207,.30),transparent 70%);
  filter:blur(24px);animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
/* гасим низ героя в тот же цвет, что у секции ниже — иначе виден шов */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:180px;z-index:-1;
  background:linear-gradient(to bottom,rgba(11,21,51,0),var(--navy) 92%);
  pointer-events:none;
}
.nav{display:flex;align-items:center;gap:28px;padding-top:26px;padding-bottom:10px}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.66)}
.nav__links a{transition:color .2s}
.nav__links a:hover{color:#fff}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand__mark{width:28px;height:auto;filter:brightness(1.7) saturate(1.2)}
.brand__word{font-size:18.9px;font-weight:700;letter-spacing:-.04em}
.brand--sm .brand__mark{width:22px}
.brand--sm .brand__word{font-size:16.2px}

.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding-top:clamp(40px,5.5vw,76px);
}
.hero h1{font-size:clamp(33.3px,5.04vw,61.2px);letter-spacing:-.04em;max-width:15ch}
.lede{margin-top:26px;max-width:30em;font-size:clamp(15.3px,1.22vw,17.1px);line-height:1.55;color:rgba(255,255,255,.72)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__note{margin-top:22px;font-size:12.6px;color:rgba(255,255,255,.44)}

/* ── Телефон ──────────────────────────────────────────────────── */
.phone{
  position:relative;border-radius:44px;background:#0a0f1f;
  padding:9px;box-shadow:
    0 0 0 1.5px rgba(255,255,255,.14),
    0 2px 0 2px rgba(0,0,0,.5),
    0 50px 90px -30px rgba(3,8,26,.8),
    0 20px 46px -22px rgba(0,0,0,.6);
}
.phone__screen{
  position:relative;border-radius:36px;overflow:hidden;background:var(--snow);
  aspect-ratio:640/1350;container-type:inline-size;
}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ── Телефон на первом экране ──────────────────────────────────────
   Три слоя, у каждого своя работа, иначе трансформации дерутся:
   .hero__tilt  — наклон за курсором (задаёт JS через --rx/--ry)
   .hero__float — бесконечное покачивание
   .hero__mock  — сами кадры, они же перелистывают экран телефона     */
.hero__phone{perspective:1600px}
.hero__tilt{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0);
  transition:transform .2s var(--ease-out);
  transform-style:preserve-3d;will-change:transform;
}
.hero__float{
  position:relative;max-width:440px;margin-left:auto;
  animation:float 8s 1.5s ease-in-out infinite;
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -15px}}

/* Свечение под телефоном живёт своей жизнью — «дышит» вразнобой с покачиванием */
.hero__halo{
  position:absolute;inset:14% 6% 6%;z-index:-1;border-radius:50%;
  translate:var(--hx,0px) var(--hy,0px);transition:translate .38s var(--ease-out);
  background:radial-gradient(50% 50% at 50% 50%,rgba(88,116,255,.5),transparent 70%);
  filter:blur(52px);animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:.9;transform:scale(1.06)}}

.hero__mock{
  width:100%;height:auto;
  filter:drop-shadow(0 46px 70px rgba(2,6,22,.62));
}

/* Появление: телефон лежит плашмя и поднимается навстречу зрителю.
   Перспективу даёт .hero__phone, поэтому в кадрах её не повторяем.
   Точка вращения внизу — телефон встаёт с опоры, а не крутится вокруг центра. */
@keyframes rise{
  0%   {opacity:0;  transform:rotateX(64deg) rotateY(-26deg) rotateZ(-6deg) translateY(54px) scale(.82)}
  45%  {opacity:1}
  72%  {transform:rotateX(-6deg) rotateY(4deg) rotateZ(.8deg) translateY(-12px) scale(1.025)}
  100% {opacity:1;  transform:none}
}
/* fill-mode backwards, а не both: иначе кадр 100% перебил бы базовый
   transform и наклон за курсором перестал бы работать. */
.hero__tilt{
  transform-origin:50% 88%;
  animation:rise 1.5s cubic-bezier(.19,1,.22,1) backwards;
}

/* Тень растёт по мере подъёма — телефон отрывается от опоры */
@keyframes lift{
  0%  {filter:drop-shadow(0 6px 14px rgba(2,6,22,.55))}
  100%{filter:drop-shadow(0 46px 70px rgba(2,6,22,.62))}
}
.hero__mock{animation:lift 1.5s cubic-bezier(.19,1,.22,1) backwards}

/* Свечение разгорается уже под стоящим телефоном */
.hero__halo{animation:breathe 9s ease-in-out infinite,halo-in 1.1s .55s ease-out backwards}
@keyframes halo-in{from{opacity:0;transform:scale(.6)}}

/* ── Заголовок секции уступает место контенту ─────────────────────
   Заголовок залипает у верха, уменьшается и растворяется, пока
   содержимое секции наезжает на него сверху. Прогресс --p (0…1)
   считает app.js: чистым CSS его не выразить без scroll-timeline,
   который есть не везде. */
[data-shrink]{
  position:sticky;top:var(--pin,20px);z-index:0;
  transform-origin:left top;
  transform:scale(calc(1 - .24 * var(--p,0))) translateY(calc(var(--p,0) * -14px));
  opacity:calc(1 - var(--p,0));
  will-change:transform,opacity;
}
/* Контент секции идёт поверх заголовка и должен быть непрозрачным,
   иначе вытеснение выглядит как наложение двух текстов. */
.pains__list,.how__stage,.cards,.facts{position:relative;z-index:1}
.pains__list{background:var(--navy)}
.cards{background:var(--paper)}
.how__stage{background:#f3f1ff}
.facts{background:linear-gradient(var(--line),var(--line)),var(--snow)}
@media (prefers-reduced-motion:reduce){
  [data-shrink]{position:static;transform:none;opacity:1}
}

/* ══════════════════  ПРОБЛЕМА  ══════════════════ */
/* Тёмный фон продолжает герой без шва: проблема остаётся в темноте,
   а продукт начинается на светлом фоне следующей секции. */
.pains{
  position:relative;background:var(--navy);color:#fff;
  padding:clamp(48px,6vw,80px) 0 clamp(64px,7vw,96px);
}
.pains__label{
  max-width:19ch;margin:0 0 clamp(104px,15vh,180px);
  font-size:clamp(24.3px,3.15vw,37.8px);font-weight:700;line-height:1.16;letter-spacing:-.035em;
}
.pains__list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,46px);
}
.pains__list li{
  display:grid;gap:9px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);
}
.pains__ico{width:38px;height:38px;color:#8fb6ff;margin-bottom:8px}
.pains__list li:nth-child(2) .pains__ico{color:#a68cff}
.pains__list li:nth-child(3) .pains__ico{color:#d18ff0}
.pains__list b{font-size:clamp(16.2px,1.4vw,18.9px);font-weight:600;letter-spacing:-.03em;line-height:1.24}
.pains__list span{color:rgba(255,255,255,.58);font-size:13.95px;line-height:1.5}

/* ══════════════════  КАК РАБОТАЕТ  ══════════════════ */
.how{
  position:relative;background:#f3f1ff;
  padding:clamp(72px,9vw,120px) 0 clamp(36px,4vw,64px);
}
.how__stage{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,88px);align-items:start}
.how__sticky{position:sticky;top:max(28px,calc(50vh - 336px));align-self:start;height:fit-content}
.phone--stage{max-width:300px;margin:0 auto}
.phone--stage .phone__screen{background:#fff}

.slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transform:scale(1.035) translateY(14px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  pointer-events:none;
}
.slide.is-active{opacity:1;transform:none;pointer-events:auto}

/* ── Макет поста в канале ─────────────────────────────────────── */
.slide--tg{background:#17212b;overflow:hidden;display:flex;flex-direction:column}
.tg{display:flex;flex-direction:column;height:100%;color:#fff;font-size:3.78cqw;line-height:1.42}
.tg__bar{
  display:flex;align-items:center;gap:10px;padding:26px 14px 12px;
  background:#1f2c39;border-bottom:1px solid rgba(255,255,255,.06);flex:none;
}
.tg__ava{
  width:34px;height:34px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--purple));font-size:3.6cqw;font-weight:600;
}
.tg__name{font-size:4.05cqw;font-weight:600;letter-spacing:-.02em}
.tg__name i{font-style:normal;font-size:3.33cqw;font-weight:400;color:rgba(255,255,255,.45)}
.tg__post{
  margin:14px 12px;border-radius:14px;overflow:hidden;background:#2b5278;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
}
.tg__photo{aspect-ratio:1260/490;overflow:hidden;background:#1d2b3a}
.tg__photo img{width:100%;height:100%;object-fit:cover}
.tg__text{padding:11px 13px 13px;display:grid;gap:5px}
.tl{
  opacity:0;transform:translateY(7px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:calc(var(--i) * 130ms + 260ms);
}
.slide--tg.is-active .tl{opacity:1;transform:none}
.tl--muted{color:rgba(255,255,255,.72);font-size:3.6cqw;line-height:1.45}
.tl--meta{color:rgba(255,255,255,.5);font-size:3.24cqw;margin-top:2px}
.tl a{color:#9bd0ff;text-decoration:none}
.tg__eye{font-size:8.1px;opacity:.7}
.tg__cursor{
  position:absolute;right:26px;bottom:34px;width:11px;height:17px;border-radius:2px;
  background:var(--blue);opacity:0;
}
.slide--tg.is-active .tg__cursor{animation:blink 1.1s steps(2) 1.6s 4}
@keyframes blink{0%,49%{opacity:.85}50%,100%{opacity:0}}

/* ── Шаги ─────────────────────────────────────────────────────── */
.steps{display:grid;gap:14px;padding:clamp(16px,3vw,52px) 0 clamp(24px,7vh,72px)}
.step{
  position:relative;padding:28px 30px 28px 34px;border-radius:var(--r-lg);
  background:transparent;border:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.step::before{
  content:'';position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:99px;
  background:linear-gradient(180deg,var(--blue),var(--purple));
  opacity:0;transform:scaleY(.3);transform-origin:top;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.step.is-active{
  background:var(--paper);border-color:var(--line);
  box-shadow:0 28px 60px -34px rgba(16,24,58,.36);
}
.step.is-active::before{opacity:1;transform:scaleY(1)}
.step__num{
  display:block;font-size:11.25px;font-weight:600;letter-spacing:.06em;
  color:var(--mist);margin-bottom:10px;transition:color .4s;font-variant-numeric:tabular-nums;
}
.step.is-active .step__num{color:var(--iris)}
.step h3{font-size:clamp(18.9px,1.89vw,23.4px);letter-spacing:-.032em}
.step p{
  margin-top:10px;color:var(--smoke);font-size:14.4px;line-height:1.55;max-width:34em;
  opacity:.62;transition:opacity .5s var(--ease);
}
.step.is-active p{opacity:1}
.step__extra{margin-top:8px !important;font-size:13.5px;color:var(--iris) !important}

/* ══════════════════  АРЕНДАТОРАМ  ══════════════════ */
.tenants{position:relative;background:var(--paper);padding:clamp(72px,9vw,120px) 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  padding:26px;border-radius:var(--r-lg);background:var(--snow);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -30px rgba(16,24,58,.34)}
.card__shot{
  border-radius:16px;overflow:hidden;aspect-ratio:16/13;margin-bottom:24px;
  background:#e9e6f7;box-shadow:0 14px 30px -18px rgba(16,24,58,.5);
  /* обрез экрана растворяется, а не рубит подписи посередине */
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
}
.card__shot img{width:100%;height:auto;object-fit:cover;object-position:top}
.card h3{font-size:18px;letter-spacing:-.03em}
.card p{margin-top:9px;color:var(--smoke);font-size:13.95px;line-height:1.5}

/* ══════════════════  ЧТО ВНУТРИ  ══════════════════ */
.inside{position:relative;background:var(--snow);padding:clamp(72px,9vw,110px) 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.facts li{display:grid;gap:5px;padding:30px 28px;background:var(--paper)}
.facts b{font-size:15.3px;font-weight:600;letter-spacing:-.025em}
.facts span{color:var(--smoke);font-size:13.5px;line-height:1.45}

/* ══════════════════  CTA + FOOTER  ══════════════════ */
.cta{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;
  background:radial-gradient(110% 130% at 50% 0%,#1c3585 0%,#101e4d 45%,var(--navy) 100%);
  padding:clamp(72px,9vw,120px) 0;
  min-height:100vh;min-height:100svh;      /* фон на всё окно браузера */
  display:grid;align-content:center;
}
.cta__aurora{
  position:absolute;inset:-40% 0 auto;height:100%;z-index:-1;
  background:radial-gradient(34% 50% at 50% 50%,rgba(67,85,232,.42),transparent 70%);
  filter:blur(20px);
}
.cta__inner{display:grid;justify-items:center;max-width:680px}
.cta__mark{width:56px;height:auto;margin-bottom:26px;filter:brightness(1.8) saturate(1.2)}
.cta h2{font-size:clamp(27px,3.78vw,41.4px)}
.cta p{margin-top:20px;color:rgba(255,255,255,.7);font-size:15.3px;line-height:1.55;text-wrap:balance}
.cta .btn{margin-top:36px}
.cta__note{margin-top:20px !important;font-size:12.6px;color:rgba(255,255,255,.42) !important}

.foot{background:var(--navy);color:rgba(255,255,255,.5);padding:34px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13.05px}
.foot__inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot .brand__word{color:#fff}
.foot__tag{flex:1;min-width:240px}
.foot__meta{display:flex;gap:10px}
.foot__meta a{transition:color .2s}
.foot__meta a:hover{color:#fff}

/* ══════════════════  ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ  ══════════════════ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}

/* ══════════════════  АДАПТИВ  ══════════════════ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:52px;text-align:left}
  .hero__float{margin:0 auto;max-width:330px}
  .hero__phone{perspective:none}
  .pains__grid{grid-template-columns:1fr;gap:30px}
  .pains__list{grid-template-columns:1fr;gap:0}
  .pains__list li{padding:20px 0}
  .pains__ico{width:32px;height:32px}
  .cards{grid-template-columns:1fr;gap:18px}
  .card__shot{aspect-ratio:16/9}
  .facts{grid-template-columns:1fr}
  .nav__links{display:none}
  .nav{gap:12px}
  .lang{margin-left:auto}

  /* Телефон уезжает наверх экрана и работает как заголовок секции:
     фон непрозрачный, иначе шаги просвечивают сквозь него. */
  .how__stage{grid-template-columns:1fr;gap:0}
  .how__sticky{
    position:sticky;top:0;z-index:5;padding:14px 0 16px;margin:0 -24px;
    background:#f3f1ff;box-shadow:0 14px 22px -14px rgba(16,24,58,.22);
  }
  .phone--stage{max-width:215px;padding:6px}
  .phone--stage .phone__screen{aspect-ratio:640/1160;border-radius:30px}
  .phone--stage{border-radius:37px}
  .steps{padding:26px 0 40px}
  .step{padding:22px 22px 22px 26px;scroll-margin-top:420px}
}
@media (max-width:560px){
  body{font-size:14.4px}
  .wrap{padding:0 18px}
  .hero h1{max-width:none}
  /* на узких экранах знака достаточно — иначе шапка упирается в переключатель */
  @media (max-width:430px){ .brand__word{display:none} }
  .hero__grid{padding-top:44px}
  .nav{padding-top:20px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .btn{width:100%}

  .how__sticky{margin:0 -18px}
  .phone--stage{max-width:164px}
  .pains__list li{padding:17px 19px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero__tilt{transform:none}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .tl{opacity:1;transform:none}
}