@charset "UTF-8";

@media (max-width: 839px) {
  /* Header */
  .header {
    background-color: var(--color-purple-200);
    border-radius: 0 0 1.6rem 1.6rem;
  }
  .header__wrapper {
    padding: 1rem 0;
  }
  .header__logo-big,
  .header__logo-small {
    display: none !important;
  }
  .header__logo-mob {
    display: block;
    width: 7.7rem;
  }
  .header__toggle {
    position: relative;
    display: block;
    padding: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 1.8rem;
    border: none;
    background-color: var(--color-purple-300);
  }
  .header__toggle span,
  .header__toggle span::before,
  .header__toggle span::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 2rem;
    height: 0.2rem;
    background-color: var(--color-default-white);

    transition: var(--easy);
    -moz-transition: var(--easy);
    -o-transition: var(--easy);
    -webkit-transition: var(--easy);
  }
  .header__toggle span {
    top: 50%;
  }
  .header__toggle span::before,
  .header__toggle span::after {
    content: "";
  }
  .header__toggle span::before {
    top: calc(50% - 0.5rem);
  }
  .header__toggle span::after {
    top: calc(50% + 0.5rem);
  }
  .header__toggle.is-open span {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .header__toggle.is-open span::before,
  .header__toggle.is-open span::after {
    top: 50%;
  }
  .header__toggle.is-open span::after {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  }
  .header__navigation {
    position: fixed;
    top: 7rem;
    left: 0;
    flex-direction: column;
    gap: 1rem;
    justify-content: start;
    align-items: flex-end;
    padding: 1rem;
    width: 100vw;
    height: calc(100dvh - 7rem);
    background-color: var(--color-grayscale-100);

    transform: translateX(100%);

    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
  }
  .header.is-open .header__navigation {
    transform: translateX(0);
  }
  .header__navigation a {
    padding: 0.5rem 0;
  }
  .header__buttons {
    position: fixed;
    top: 100dvh;
    left: 0;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1rem;
    width: 100vw;
    height: auto;
    background-color: var(--color-grayscale-100);

    transform: translateX(100%) translateY(-100%);

    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
  }
  .header.is-open .hero__buttons  {
    transform: translateX(0) translateY(-100%);
  }
  .header__buttons a {
    padding: 1rem;
    height: 5rem;
    border-radius: 2.2rem;
    font-size: 1.8rem;
    line-height: 1.62rem;
    text-align: center;
  }
  .header__button-registration {
    display: flex;
  }
  .header__button-entry {
    margin: 0;
  }


  /* Hero */
  .hero__wrapper {
    border-radius: 3rem;
  }
  .hero__content {
    gap: 3rem;
    padding: 12rem 2rem 13rem;
  }
  .hero__content-text h1,
  .hero__content-text p {
    font-size: 1.4rem;
    line-height: 2.24rem;
  }
  .hero__content-text h1 br {
    display: block;
  }
  .hero__sticker--01 {
    top: 3.3rem;
    left: 50%;
    transform: translateX(-50%) translateX(0) rotate(-2.58deg);
  }
  .hero__sticker--02 {
    top: initial;
    bottom: 6.6rem;
    right: -3.6rem;
    transform: translateX(-50%) translateX(0) rotate(1.9deg);
  }
  .hero__img--01 {
    top: -5.5rem;
    left: -7rem;
    width: 17.19rem;
  }
  .hero__img--02 {
    bottom: -0.6rem;
    left: -4.8rem;
    width: 14.77rem;
  }
  .hero__img--03 {
    top: -3.5rem;
    right: -4.6rem;
    width: 17.61rem;
  }
  .hero__img--04 {
    bottom: -2rem;
    right: -5.8rem;
    width: 17.53rem;
  }


  /* About */
  .about__wrapper {
    gap: 4rem;
    padding: 5rem 2rem 0;
    border-radius: 3rem;
  }
  .about__top {
    gap: 2rem;
    width: 100%;
  }
  .about__tags {
    flex-wrap: wrap;
  }
  .about__tags .tag {
    padding: 1rem 1.4rem;
  }
  .about__top h2 {
    max-width: 100%;
  }
  .about__bottom {
    width: 100%;
    height: 17.2rem;
  }
  .about__button {
    bottom: 2rem;
    padding: 2.5rem 3rem;
    white-space: nowrap;
    font-size: 1.4rem;
    line-height: 2.24rem;
  }
  .about__sticker,
  .about__img--02,
  .about__img--03 {
    display: none;
  }
  .about__img--01 {
    left: calc(50% - 0.3rem);
    width: 37.2rem;
  }


  /* Features */
  .features__wrapper {
    gap: 2rem;
    padding: 5rem 2rem;
  }
  .features__wrapper h2 {
    max-width: 100%;
  }
  .features__list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .features__item,
  .features__item-in-progress {
    padding: 2rem;
    border-radius: 2rem;
  }
  .features__item {
    gap: 2rem;
  }
  .features__item:nth-child(1) .features__item-image img,
  .features__item:nth-child(2) .features__item-image img {
    width: 3.2rem;
  }
  .features__item:nth-child(3) .features__item-image img,
  .features__item:nth-child(5) .features__item-image img,
  .features__item:nth-child(6) .features__item-image img,
  .features__item:nth-child(7) .features__item-image img,
  .features__item:nth-child(8) .features__item-image img {
    width: 12.3rem;
  }
  .features__item:nth-child(4) .features__item-image img {
    width: 3.4rem;
  }
  .features__item:nth-child(9) .features__item-image img {
    width: 2.8rem;
  }
  .features__item:nth-child(10) .features__item-image img {
    width: 2rem;
  }
  .features__item-content {
    gap: 2rem;
    height: auto;
  }
  .features__item-title {
    font-size: 2.4rem;
    line-height: 2.64rem;
    letter-spacing: -0.072rem;
  }
  .features__item-text {
    font-size: 1.4rem;
    line-height: 1.96rem;
  }
  .features__item-in-progress {
    gap: 1.4rem;
    height: auto;
  }
  .features__item-tag {
    padding: 0.9rem 1.3rem;
  }


  /* Price */
  .price__wrapper {
    gap: 3rem;
    padding: 5rem 2rem;
    border-radius: 3rem;
  }
  .price__top {
    gap: 3rem;
    width: 100%;
  }
  .price__top h2 {
    font-size: 3.6rem;
    line-height: 3.6rem;
    letter-spacing: -0.108rem;
  }
  .price__plans {
    gap: 3rem;
    padding: 3rem;
    border-radius: 2rem;
  }
  .price__plans p {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 2.64rem;
    letter-spacing: -0.072rem;
  }
  .price__plans-list {
    gap: 0.8rem 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1.26rem;
  }
  .price__plans-item {
    padding: 1.2rem 1.8rem;
  }
  .price__rates {
    grid-template-columns: repeat(2, auto);
    gap: 2.2rem 5rem;
  }
  .price__rates-item {
    gap: 0;
    width: 12.8rem;
    font-size: 1.6rem;
    line-height: 2.56rem;
  }
  .price__rates-value-wrapper {
    margin: -0.2rem 0 -0.4rem;
    font-size: 3.6rem;
    line-height: 3.96rem;
    letter-spacing: -0.216rem;
  }
  .price__disclaimer {
    font-size: 1rem;
    line-height: 1.4rem;
    text-align: center;
  }


  /* Limits */
  .limits__wrapper {
    gap: 3rem;
    padding: 5rem 2rem 5.9rem;
  }
  .limits__top {
    gap: 2rem;
  }
  .limits__tag {
    padding: 0.9rem 1.4rem;
  }
  .limits__top h2 br:first-child {
    display: none;
  }
  .limits__list {
    grid-template-columns: repeat(2, 50%);
    gap: 0.5rem;
  }
  .limits__item {
    padding: 2rem;
    border-radius: 3rem;
  }
  .limits__item span {
    font-size: 2.8rem;
    line-height: 3.08rem;
    letter-spacing: -0.084rem;
    white-space: nowrap;
  }
  .limits__item p {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.96rem;
  }
  .limits__item p br {
    display: none;
  }


  /* Advantages */
  .advantages__wrapper {
    gap: 3rem;
    padding: 5rem 2rem;
  }
  .advantages__list {
    grid-template-columns: 1fr;
  }
  .advantages__item {
    gap: 2rem;
    padding: 3rem;
    border-radius: 3rem;
  }
  .advantages__tag {
    padding: 0.9rem 1.3rem;
  }
  .advantages__title {
    font-size: 2.4rem;
    line-height: 2.64rem;
    letter-spacing: -0.072rem;
  }
  .advantages__description {
    font-size: 1.4rem;
    line-height: 1.96rem;
  }


  /* Tariffs */
  .tariffs__wrapper {
    gap: 3rem;
    padding: 5rem 2rem;
    border-radius: 3rem;
  }
  .tariffs__top {
    gap: 2rem;
  }
  .tariffs__tag {
    padding: 0.9rem 1.4rem;
  }
  .tariffs__top h2 {
    max-width: 30rem;
  }
  .tariffs__list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tariffs__item {
    gap: 2rem;
    padding: 3rem;
    border-radius: 3rem;
  }
  .tariffs__item span:not(ul span, .tariffs__rate span) {
    font-size: 3.4rem;
    line-height: 3.74rem;
    letter-spacing: -0.102rem;
  }
  .tariffs__item p {
    font-size: 1.4rem;
    line-height: 1.96rem;
  }
  .tariffs__item ul {
    gap: 1.1rem;
    font-size: 1.4rem;
    line-height: 1.96rem;
  }
  .tariffs__item li {
    gap: 0.8rem;
  }
  .tariffs__item ul svg {
    width: 1.8rem;
  }
  .tariffs__rate {
    padding: 1.4rem 2rem;
    font-size: 1.4rem;
    line-height: 1.96rem;
  }


  /* FAQ */
  .faq__wrapper {
    gap: 3rem;
    padding: 5rem 2rem;
  }
  .faq__top {
    gap: 2rem;
  }
  .faq__tag {
    padding: 0.9rem 1.4rem;
  }
  .faq__list {
    gap: 0.5rem;
  }
  .faq__item {
    padding: 1rem 0;
    border-radius: 3rem;
  }
  .faq__item-top {
    align-items: flex-start;
    padding: 2rem 3rem;
    font-size: 2rem;
    line-height: 2.2rem;
    letter-spacing: -0.06rem;
  }
  .faq__item-button {
    width: 2.6rem;
    height: 2.6rem;
  }
  .faq__item-button::before,
  .faq__item-button::after {
    width: 1rem;
  }
  .faq__item-bottom-wrapper {
    gap: 0.5rem;
    padding: 0 3rem 2rem;
    font-size: 1.4rem;
    line-height: 1.96rem;
  }


  /* Footer */
  .footer__wrapper {
    gap: 1rem;
  }
  .footer__top {
    gap: 4rem;
    padding: 5rem 2rem;
    border-radius: 3rem;
  }
  .footer__support {
    gap: 3rem;
    justify-items: stretch;
    padding: 0 0 3.9rem;
  }
  .footer__support h2 {
    text-align: center;
  }
  .footer__support-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .footer__support-item {
    grid-template-columns: 3.2rem auto;
    gap: 1rem;
    justify-content: center;
    padding: 1.5rem 3rem;
    border-radius: 2.2rem;
    font-size: 1.6rem;
    line-height: 1.44rem;
  }
  .footer__info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
  .footer__info-list {
    font-size: 1.4rem;
    line-height: 1.54rem;
    letter-spacing: -0.042rem;
    justify-items: center !important;
  }
  .footer__info-list .flex {
    gap: 1rem;
  }
  .footer__copyright {
    margin: -1rem 0 0;
    font-size: 1.4rem;
    line-height: 1.54rem;
    letter-spacing: -0.042rem;
  }
  .footer__bottom {
    padding: 2rem;
    font-size: 1rem;
    line-height: 1.4rem;
  }
}