@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: local(""), url("../font/inter-v8-latin-regular.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: local(""), url("../font/inter-v8-latin-700.woff2") format("woff2");
    font-display: swap
}

:root {
    --page-margin: 6vmin;
    --page-width: 38rem;
    --navbar-height: 4.6rem;
    --sidebar-width: 15rem;
    --post-width: 70ch;
    --submenu-width: 20rem;
    --border-radius: 6px;
    --shadow: 0 -1px 3px 0 hsl(var(--hsl-dark), 18%, 3%), 0 1px 2px -5px hsl(var(--hsl-dark), 18%, 3%), 0 2px 5px -5px hsl(var(--hsl-dark), 18%, 4%), 0 4px 12px -5px hsl(var(--hsl-dark), 18%, 6%), 0 12px 15px -5px hsl(var(--hsl-dark), 18%, 8%);
    --space-unit: 1rem;
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-hg: calc(2.625 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-2xl: calc(5.25 * var(--space-unit));
    --space-3xl: calc(8.5 * var(--space-unit));
    --font-body: "Inter", sans-serif;
    --font-heading: "Inter", sans-serif;
    --font-serif: Georgia, Times, "Times New Roman", serif;
    --line-height: 1.6;
    --letter-spacing: -0.02em;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --headings-weight: 700;
    --headings-letter-spacing: -0.04em;
    --headings-transform: none;
    --text-shadow: 0 0 1px var(--link-color);
    --white: hsl(360, 100%, 100%);
    --black: hsl(0, 0%, 0%);
    --red: hsl(2, 100%, 47.06%);
    --green: hsl(146.09, 39.32%, 54.12%);
    --hsl-blue: 212, 100%;
    --hsl-pink: 345, 97%;
    --hsl-green: 180, 64%;
    --hsl-gray: 225, 29%;
    --hsl-dark: 225, 40%;
    --dark: hsl(var(--hsl-dark), 18%);
    --light: hsl(var(--hsl-dark), 98%);
    --color: hsl(var(--hsl-blue), 47%);
    --color-light: hsl(var(--hsl-blue), 97%);
    --text-color: hsl(var(--hsl-dark), 18%);
    --text-color-light: hsla(var(--hsl-dark), 18%, 70%);
    --headings-color: hsl(var(--hsl-dark), 18%);
    --button-color: var(--white);
    --link-color: hsl(var(--hsl-blue), 47%);
    --link-color-hover: hsl(var(--hsl-blue), 47%);
    --border-color: hsl(var(--hsl-dark), 88%);
    --shadow-color: hsl(var(--hsl-blue), 96%);
    --icon-bg: hsl(var(--hsl-blue), 97%);
    --icon-fill: hsl(var(--hsl-blue), 47%)
}

@media (min-width:56.25em) {
    :root {
        --page-width: 1280px;
        --space-unit: 1.2rem
    }
}

@media (min-width:75em) {
    :root {
        --navbar-height: 5.6rem;
        --space-unit: 1.4rem
    }
}

@media (min-width:100em) {
    :root {
        --space-unit: 1.6rem
    }
}

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

article,
aside,
footer,
header,
main,
nav,
section {
    display: block
}

li {
    list-style: none
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: top
}

button,
input,
select,
textarea {
    font: inherit
}

address {
    font-style: normal
}

::-moz-selection {
    background: var(--color);
    color: var(--white)
}

::selection {
    background: var(--color);
    color: var(--white)
}

html {
    font-size: clamp(1rem, 1rem + 0.125 * (100vw - 20rem)/58, 1.125rem);
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: 2.4rem
}

html.no-scroll {
    overflow: hidden
}

body {
    background: var(--white);
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    overscroll-behavior: none
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.14s ease-out
}

a:hover {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

a:active {
    color: var(--link-color)
}

a:focus {
    color: var(--link-color)
}

.invert {
    color: var(--dark);
    text-decoration: none;
    transition: all 0.14s ease-out
}

.invert:hover {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

.invert:active {
    color: var(--link-color)
}

.invert:focus {
    color: var(--link-color)
}

blockquote,
dl,
ol,
p,
table,
ul {
    color: var(--text-color);
    margin-top: 1.6rem
}

figure {
    margin-top: 2.1333333333rem
}

figure+* {
    margin-top: 2.4rem
}

strong {
    font-weight: var(--font-weight-bold)
}

small {
    font-size: 80%
}

ol,
ul {
    margin-left: 2rem
}

ol>li,
ul>li {
    list-style: inherit;
    padding: 0 0 0.5333333333rem 0.5333333333rem
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0.5333333333rem;
    margin-top: 0.5333333333rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headings-color);
    font-family: var(--font-heading);
    font-weight: var(--headings-weight);
    letter-spacing: var(--headings-letter-spacing);
    line-height: 1.2;
    margin-top: 0;
    text-transform: var(--headings-transform)
}

.h1,
h1 {
    font-size: clamp(1.8020324707rem, 1.8020324707rem + 1.8512036829 * (100vw - 20rem)/58, 3.6532361537rem)
}

.h2,
h2 {
    font-size: clamp(1.6018066406rem, 1.6018066406rem + 0.9639778733 * (100vw - 20rem)/58, 2.565784514rem)
}

.h3,
h3 {
    font-size: clamp(1.423828125rem, 1.423828125rem + 0.3782043457 * (100vw - 20rem)/58, 1.8020324707rem)
}

.h4,
h4 {
    font-size: clamp(1.265625rem, 1.265625rem + 0.158203125 * (100vw - 20rem)/58, 1.423828125rem)
}

.h5,
h5 {
    font-size: clamp(1rem, 1rem + 0.125 * (100vw - 20rem)/58, 1.125rem)
}

.h6,
h6 {
    font-size: clamp(1rem, 1rem + 0 * (100vw - 20rem)/58, 1rem)
}

.btn,
[type=button],
[type=submit],
button {
    background: var(--color);
    border: 2px solid var(--color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.1);
    color: var(--button-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8888888889rem;
    font-weight: var(--font-weight-normal);
    padding: 0.6666666667rem 1.3333333333rem;
    vertical-align: middle;
    text-align: center;
    transition: all 0.24s ease;
    will-change: transform;
    --button-shadow: 0 4px 14px 0 rgb(0, 118, 255, 0.1);
    --button-shadow-hover: 0 3px 14px 0rgb(0 118 255/10%);
    --button-shadow-active: 0 3px 14px 0rgb(0 118 255/8%)
}

@media (max-width:29.9375em) {

    .btn,
    [type=button],
    [type=submit],
    button {
        width: 80%
    }
}

.btn:active,
.btn:focus,
.btn:hover,
[type=button]:active,
[type=button]:focus,
[type=button]:hover,
[type=submit]:active,
[type=submit]:focus,
[type=submit]:hover,
button:active,
button:focus,
button:hover {
    color: var(--button-color);
    transform: translateY(-3px);
    text-decoration: none !important
}

@media (max-width:29.9375em) {

    .btn+.btn,
    .btn+[type=button],
    .btn+[type=submit],
    .btn+button,
    [type=button]+.btn,
    [type=button]+[type=button],
    [type=button]+[type=submit],
    [type=button]+button,
    [type=submit]+.btn,
    [type=submit]+[type=button],
    [type=submit]+[type=submit],
    [type=submit]+button,
    button+.btn,
    button+[type=button],
    button+[type=submit],
    button+button {
        margin-top: 0.8rem
    }
}

@media (min-width:30em) {

    .btn+.btn,
    .btn+[type=button],
    .btn+[type=submit],
    .btn+button,
    [type=button]+.btn,
    [type=button]+[type=button],
    [type=button]+[type=submit],
    [type=button]+button,
    [type=submit]+.btn,
    [type=submit]+[type=button],
    [type=submit]+[type=submit],
    [type=submit]+button,
    button+.btn,
    button+[type=button],
    button+[type=submit],
    button+button {
        margin-left: 0.5333333333rem
    }
}

.btn--icon {
    --fill: var(--white);
    align-items: center;
    display: inline-flex;
    white-space: nowrap
}

@media (max-width:37.4375em) {
    .btn--icon {
        justify-content: center;
        flex-basis: 100%
    }
}

.btn--icon>svg {
    fill: var(--fill);
    margin-right: 0.5333333333rem;
    vertical-align: middle;
    transition: inherit
}

.btn--outline {
    --fill: var(--dark);
    background: none;
    border-color: var(--dark);
    box-shadow: none;
    color: var(--dark)
}

.btn--outline:active,
.btn--outline:focus,
.btn--outline:hover {
    --fill: var(--link-color);
    background: none;
    border-color: var(--link-color);
    box-shadow: none;
    color: var(--link-color)
}

.btn:disabled,
[type=button]:disabled,
[type=submit]:disabled,
button:disabled {
    border-color: var(--border-color);
    background: none;
    color: var(--text-color-light);
    cursor: not-allowed
}

.btn--link {
    --fill: var(--link-color);
    background: none;
    border: none;
    box-shadow: none;
    color: var(--link-color);
    display: inline-block;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    padding: 0;
    text-align: left
}

@media (max-width:29.9375em) {
    .btn--link {
        width: auto
    }
}

.btn--link:active,
.btn--link:focus,
.btn--link:hover {
    color: var(--link-color-hover);
    transform: none
}

.btn--link:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

[type=button],
[type=submit],
button {
    -webkit-appearance: none;
    -moz-appearance: none
}

label {
    display: block;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    margin: 0 1.0666666667rem 0.2666666667rem 0
}

option {
    font-weight: var(--font-weight-normal)
}

[type=email],
[type=file],
[type=number],
[type=password],
[type=search],
[type=text],
[type=url],
select,
textarea {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    outline: none;
    padding: 0.5866666667rem 0.8rem;
    width: 100%;
    transition: all 0.24s ease;
    -webkit-appearance: none;
    -moz-appearance: none
}

@media (min-width:37.5em) {

    [type=email],
    [type=file],
    [type=number],
    [type=password],
    [type=search],
    [type=text],
    [type=url],
    select,
    textarea {
        width: auto
    }
}

[type=email]:focus,
[type=file]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=text]:focus,
[type=url]:focus,
select:focus,
textarea:focus {
    box-shadow: inset 0 0 4px 0 var(--color);
    border-color: var(--color)
}

input[type=checkbox] {
    opacity: 0;
    position: absolute
}

input[type=checkbox]+label {
    position: relative;
    margin-left: -1px;
    cursor: pointer;
    padding: 0
}

input[type=checkbox]+label:before {
    background-color: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    content: "";
    display: inline-block;
    height: 1.6rem;
    line-height: 1.6rem;
    margin-right: 0.8rem;
    vertical-align: middle;
    text-align: center;
    width: 1.6rem
}

input[type=checkbox]:checked+label:before {
    content: "";
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpolygon points='9.53 0 4.4 5.09 1.47 2.18 0 3.64 2.93 6.54 4.4 8 5.87 6.54 11 1.46 9.53 0' fill='%23343a41'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 11px 8px;
    background-position: 50% 50%;
    border-color: var(--color);
    box-shadow: inset 0 0 2px var(--color)
}

select {
    max-width: 100%;
    width: auto;
    position: relative
}

select:not([multiple]) {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><polygon points="3 6 3 6 0 0 6 0 3 6" fill="%238a8b8c"/></svg>') no-repeat 90% 50%;
    background-size: 8px;
    padding-right: 3.2rem
}

textarea {
    border-radius: var(--border-radius);
    display: block;
    overflow: auto;
    resize: vertical;
    max-width: 100%
}

.top {
    align-items: center;
    background: var(--white);
    display: flex;
    height: var(--navbar-height);
    margin-bottom: var(--space-lg);
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width:56.25em) {
    .top {
        justify-content: space-between
    }
}

.top__logo {
    margin-right: auto;
    position: relative
}

.top__logo:hover {
    text-decoration: none
}

.top__logo>svg {
    fill: var(--dark);
    max-height: 2rem;
    max-width: 4.8rem;
    vertical-align: middle;
    background-image: url(../picture/header-logo.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}



.top__download {
    background: var(--color);
    border-radius: var(--border-radius);
    color: var(--white);
    font-size: 0.7901234568rem;
    margin-left: 1.0666666667rem;
    padding: 0.48rem 0.8rem
}

@media (max-width:56.1875em) {
    .top__download {
        display: none
    }
}

.top__download:active,
.top__download:focus,
.top__download:hover {
    color: var(--white);
    text-decoration: none
}

.top--nospace {
    margin-bottom: 0
}

.navbar {
    position: relative
}

.navbar .navbar__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

@media (max-width:56.1875em) {
    .navbar .navbar__menu {
        display: none
    }
}

.navbar .navbar__menu li {
    display: block;
    font-size: 0.8888888889rem;
    line-height: var(--line-height);
    padding: 0;
    position: relative
}

.navbar .navbar__menu li a,
.navbar .navbar__menu li span[aria-haspopup=true] {
    color: var(--dark);
    display: block;
    padding: 0 0.8rem;
    transition: all 0.24s ease-out;
    text-decoration: none
}

.navbar .navbar__menu li a:active,
.navbar .navbar__menu li a:focus,
.navbar .navbar__menu li a:hover,
.navbar .navbar__menu li span[aria-haspopup=true]:active,
.navbar .navbar__menu li span[aria-haspopup=true]:focus,
.navbar .navbar__menu li span[aria-haspopup=true]:hover {
    color: var(--link-color)
}

.navbar .navbar__menu>li {
    line-height: var(--navbar-height);
    margin-left: 0.2666666667rem
}

.navbar .navbar__menu>li:hover>a,
.navbar .navbar__menu>li:hover>span[aria-haspopup=true] {
    color: var(--link-color);
    text-shadow: var(--text-shadow)
}

.navbar .navbar__menu>li:hover>[aria-haspopup=true] {
    box-shadow: none
}

.navbar .navbar__menu>li:hover.has-submenu:after {
    content: "";
    border-color: var(--link-color)
}

.navbar .navbar__menu>li.has-submenu {
    position: relative;
    padding-right: 1.0666666667rem
}

.navbar .navbar__menu>li.has-submenu:after {
    content: "";
    border-bottom: 1px solid var(--dark);
    border-left: 1px solid var(--dark);
    height: 6px;
    position: absolute;
    right: 0.9333333333rem;
    top: 47%;
    transform: rotate(-45deg) translate(0, -46%);
    width: 6px;
    transition: all 0.24s ease-out
}

.navbar .navbar__menu>li.is-highlighted {
    font-weight: var(--font-weight-bold);
    margin-left: 1rem;
    text-transform: uppercase
}

.navbar .has-submenu:active>.navbar__submenu,
.navbar .has-submenu:focus>.navbar__submenu,
.navbar .has-submenu:hover>.navbar__submenu {
    left: 0;
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    margin-top: -1.0666666667rem
}

.navbar .has-submenu:active>.navbar__submenu.is-right-submenu,
.navbar .has-submenu:focus>.navbar__submenu.is-right-submenu,
.navbar .has-submenu:hover>.navbar__submenu.is-right-submenu {
    left: auto;
    right: 0;
    transform-origin: right top
}

.navbar .has-submenu .has-submenu:active>.navbar__submenu,
.navbar .has-submenu .has-submenu:focus>.navbar__submenu,
.navbar .has-submenu .has-submenu:hover>.navbar__submenu {
    left: var(--submenu-width);
    top: 0;
    margin-top: 0
}

.navbar .has-submenu .has-submenu:active>.navbar__submenu.is-right-submenu,
.navbar .has-submenu .has-submenu:focus>.navbar__submenu.is-right-submenu,
.navbar .has-submenu .has-submenu:hover>.navbar__submenu.is-right-submenu {
    top: 0;
    margin-top: 0
}

.navbar .navbar__submenu {
    background: var(--white);
    box-shadow: var(--shadow);
    border: 1px solid hsl(var(--hsl-dark), 92%);
    border-radius: var(--border-radius);
    left: -9999px;
    list-style-type: none;
    margin: 0 0 0.8rem;
    padding: 1.0666666667rem 1.6rem;
    position: absolute;
    width: var(--submenu-width);
    text-align: left;
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: 0 top;
    transition: opacity 0.15s, transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1);
    will-change: transform
}

.navbar .navbar__submenu__submenu {
    z-index: 2
}

.navbar__submenu li {
    line-height: 1.5;
    font-weight: var(--font-weight-normal);
    padding: 0 0.2666666667rem;
    position: relative;
    text-transform: none
}

.navbar__submenu li:last-child {
    border: none
}

.navbar__submenu li a[aria-haspopup=true] {
    padding: 0.5333333333rem 0;
    transition: all 0.24s ease
}

.navbar__submenu li span {
    color: var(--headings-color);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--headings-letter-spacing);
    line-height: 1.2;
    margin: 0
}

.navbar__submenu li p {
    color: var(--text-color-light);
    font-size: 0.7901234568rem;
    margin-top: 0.1333333333rem
}

@media (min-width:56.25em) {
    .navbar__submenu li p {
        margin-top: 0.2666666667rem
    }
}

.navbar .navbar__toggle {
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    line-height: 1;
    overflow: visible;
    padding-right: 0;
    text-transform: none;
    width: auto
}

@media (min-width:56.25em) {
    .navbar .navbar__toggle {
        display: none
    }
}

.navbar .navbar__toggle:focus,
.navbar .navbar__toggle:hover {
    box-shadow: none;
    outline: none;
    transform: none
}

.navbar .navbar__toggle__box {
    width: 20px;
    height: 11px;
    display: inline-block;
    position: relative
}

.navbar .navbar__toggle__inner {
    display: block;
    top: 50%;
    text-indent: -9999999em
}

.navbar .navbar__toggle__inner:before {
    content: "";
    display: block;
    top: -5px
}

.navbar .navbar__toggle__inner:after {
    content: "";
    display: block;
    bottom: -5px
}

.navbar .navbar__toggle__inner,
.navbar .navbar__toggle__inner:after,
.navbar .navbar__toggle__inner:before {
    width: 20px;
    height: 2px;
    background-color: var(--dark);
    position: absolute;
    right: 0;
    transition: transform, opacity 0.14s ease-out
}

.navbar .navbar__toggle__inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.navbar .navbar__toggle__inner:before {
    transition: top 0.075s ease 0.12s, opacity 0.075s ease
}

.navbar .navbar__toggle__inner:after {
    right: 0;
    transition: bottom 0.075s ease 0.12s, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner:before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s ease 0.12s
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner:after {
    bottom: 0;
    left: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
    width: 20px
}

@media (min-width:56.25em) {
    .navbar__icon:hover:before {
        background-color: var(--icon-bg);
        border-radius: var(--border-radius);
        content: "";
        display: block;
        left: -0.5333333333rem;
        right: -0.5333333333rem;
        position: absolute;
        height: 100%;
        top: 0
    }
}

.navbar__icon a {
    padding: 0.5333333333rem 0 0.5333333333rem 56px !important;
    position: relative
}

@media (min-width:56.25em) {
    .navbar__icon a {
        padding: 0.9333333333rem 0 0.9333333333rem 56px !important
    }
}

.navbar__icon a:after {
    background-color: var(--icon-fill);
    content: "";
    display: block;
    height: 26px;
    left: 7px;
    -webkit-mask: var(--icon-url) no-repeat;
    mask: var(--icon-url) no-repeat;
    position: absolute;
    top: calc(0.5333333333rem + 7px);
    transition: background-color 0.24s ease-out;
    width: 26px;
    z-index: 2
}

@media (min-width:56.25em) {
    .navbar__icon a:after {
        top: calc(0.9333333333rem + 7px)
    }
}

.navbar__icon a:before {
    background-color: var(--icon-bg);
    border-radius: var(--border-radius);
    content: "";
    display: block;
    left: 0;
    position: absolute;
    height: 38px;
    top: 0.5333333333rem;
    width: 38px
}

@media (min-width:56.25em) {
    .navbar__icon a:before {
        top: 0.9333333333rem
    }
}

@media (min-width:56.25em) {
    .navbar__icon--showcase:hover:before {
        content: none
    }
}

@media (max-width:56.1875em) {
    .navbar__icon--showcase a {
        color: var(--dark);
        font-weight: var(--font-weight-bold);
        padding-top: 0.9333333333rem !important
    }
}

@media (min-width:56.25em) {
    .navbar__icon--showcase a {
        padding: 0 1.0666666667rem !important
    }

    .navbar__icon--showcase a:after,
    .navbar__icon--showcase a:before {
        content: none
    }
}

.navbar__icon--writing {
    --icon-bg: hsl(var(--hsl-pink), 98%);
    --icon-fill: hsl(var(--hsl-pink), 65%);
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M3 19c3.333-2 5-4 5-6 0-3-1-3-2-3s-2.032 1.085-2 3c.034 2.048 1.658 2.877 2.5 4C8 19 9 19.5 10 18c.667-1 1.167-1.833 1.5-2.5 1 2.333 2.333 3.5 4 3.5H18M20 17V5c0-1.121-.879-2-2-2s-2 .879-2 2v12l2 2 2-2zM16 7h4'/%3e%3c/svg%3e")
}

.navbar__icon--privacy {
    --icon-bg: hsl(var(--hsl-blue), 97%);
    --icon-fill: hsl(var(--hsl-blue), 47%);
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m9 12 2 2 4-4'/%3e%3cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21 12 12 0 0 1 3.5 6 12 12 0 0 0 12 3'/%3e%3c/svg%3e")
}

.navbar__icon--seo {
    --icon-bg: hsl(var(--hsl-green), 95%);
    --icon-fill: hsl(var(--hsl-green), 39%);
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M4 13a8 8 0 0 1 7 7 6 6 0 0 0 3-5 9 9 0 0 0 6-8 3 3 0 0 0-3-3 9 9 0 0 0-8 6 6 6 0 0 0-5 3'/%3e%3cpath d='M7 14a6 6 0 0 0-3 6 6 6 0 0 0 6-3'/%3e%3ccircle cx='15' cy='9' r='1'/%3e%3c/svg%3e")
}

.navbar__icon--docs {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M19 4v16H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12z'/%3e%3cpath d='M19 16H7a2 2 0 0 0-2 2M9 8h6'/%3e%3c/svg%3e")
}

.navbar__icon--devs {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16'/%3e%3c/svg%3e")
}

.navbar__icon--forum {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m3 20 1.3-3.9A9 8 0 1 1 7.7 19L3 20M12 12v.01M8 12v.01M16 12v.01'/%3e%3c/svg%3e")
}

.navbar__icon--support {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3ccircle cx='12' cy='12' r='4'/%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='m15 15 3.35 3.35M9 15l-3.35 3.35M5.65 5.65 9 9M18.35 5.65 15 9'/%3e%3c/svg%3e")
}

.navbar__icon--blog {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4M13.5 6.5l4 4'/%3e%3c/svg%3e")
}

.navbar__icon--market {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m3 12 3 3 3-3-3-3zM15 12l3 3 3-3-3-3zM9 6l3 3 3-3-3-3zM9 18l3 3 3-3-3-3z'/%3e%3c/svg%3e")
}

.navbar__icon--themes {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M12 21a9 9 0 1 1 0-18 9 8 0 0 1 9 8 4.5 4 0 0 1-4.5 4H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3e%3ccircle cx='7.5' cy='10.5' r='.5' fill='currentColor'/%3e%3ccircle cx='12' cy='7.5' r='.5' fill='currentColor'/%3e%3ccircle cx='16.5' cy='10.5' r='.5' fill='currentColor'/%3e%3c/svg%3e")
}

.navbar__icon--plugins {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m7 12 5 5-1.5 1.5a3.536 3.536 0 1 1-5-5L7 12zM17 12l-5-5 1.5-1.5a3.536 3.536 0 1 1 5 5L17 12zM3 21l2.5-2.5M18.5 5.5 21 3M10 11l-2 2M13 14l-2 2'/%3e%3c/svg%3e")
}

.navbar__icon--services {
    --icon-bg: hsl(var(--hsl-pink), 98%);
    --icon-fill: hsl(var(--hsl-pink), 65%);
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3M12 12l8-4.5M12 12v9M12 12 4 7.5M16 5.25l-8 4.5'/%3e%3c/svg%3e")
}

.navbar__icon--showcase {
    --icon-url: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M0 0h24v24H0z' stroke='none'/%3e%3cpath d='M3 19h18'/%3e%3crect x='5' y='6' width='14' height='10' rx='1'/%3e%3c/svg%3e")
}

.navbar__icon--comparison {
    --icon-bg: hsl(var(--hsl-gray), 96%);
    --icon-fill: hsl(var(--hsl-gray), 39%);
    --icon-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3e%3cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3e%3cpath d='M7 21h10'/%3e%3cpath d='M12 3v18'/%3e%3cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3e%3c/svg%3e")
}

.navbar_mobile_overlay {
    background: var(--white);
    bottom: 0;
    left: 0;
    opacity: 1;
    overflow: auto;
    pointer-events: auto;
    position: fixed;
    top: var(--navbar-height);
    padding-bottom: 1.6rem;
    transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
    width: 100%;
    z-index: 1001
}

.navbar_mobile_overlay.is-hidden {
    opacity: 0;
    pointer-events: none
}

.navbar_mobile_overlay .navbar__menu {
    box-sizing: content-box;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--page-margin)
}

.navbar_mobile_overlay .navbar__menu li {
    list-style: none;
    margin: 0;
    padding: 0
}

.navbar_mobile_overlay .navbar__menu li a,
.navbar_mobile_overlay .navbar__menu li span {
    display: block;
    position: relative
}

.navbar_mobile_overlay .navbar__menu li a:hover,
.navbar_mobile_overlay .navbar__menu li span:hover {
    text-decoration: none
}

.navbar_mobile_overlay .navbar__menu li .is-separator {
    border-top: 1px solid var(--border-color);
    color: var(--text-color-light);
    font-size: 0.7023319616rem;
    font-weight: var(--font-weight-bold);
    padding: 1.0666666667rem 0 0.8rem;
    text-transform: uppercase
}

.navbar_mobile_overlay .navbar__menu li+.has-submenu {
    margin-top: 1.6rem
}

.navbar_mobile_overlay .navbar__submenu {
    margin: 0;
    padding: 0;
    visibility: hidden
}

.navbar_mobile_overlay .navbar__submenu[aria-hidden=false] {
    visibility: visible
}

.navbar_mobile_overlay .navbar__submenu_wrapper {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1)
}

.navbar_mobile_overlay .navbar__submenu_wrapper.is-active {
    height: auto;
    opacity: 1
}

.page-wrap {
    box-sizing: content-box;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--page-margin)
}

.green {
    --border-color: hsl(var(--hsl-green), 88%);
    --color: hsl(var(--hsl-green), 39%);
    --color-light: hsl(var(--hsl-green), 95%);
    --link-color: var(--color);
    --shadow-color: hsl(var(--hsl-green), 94%);
    --icon-bg: hsl(var(--hsl-green), 95%);
    --icon-fill: hsl(var(--hsl-green), 39%);
    --text-shadow: 0 0 1px var(--link-color)
}

.pink {
    --border-color: hsl(var(--hsl-pink), 93%);
    --color: hsl(var(--hsl-pink), 65%);
    --color-light: hsl(var(--hsl-pink), 98%);
    --link-color: var(--color);
    --shadow-color: hsl(var(--hsl-pink), 97%);
    --icon-bg: hsl(var(--hsl-pink), 98%);
    --icon-fill: hsl(var(--hsl-pink), 65%);
    --text-shadow: 0 0 1px var(--link-color)
}

.gray {
    --color-light: hsl(var(--hsl-gray), 98%);
    --link-color: var(--color);
    --shadow-color: hsl(var(--hsl-gray), 97%);
    --icon-bg: hsl(var(--hsl-gray), 96%);
    --icon-fill: hsl(var(--hsl-gray), 39%);
    --text-shadow: 0 0 1px var(--link-color)
}

.readmore {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing)
}

[role=doc-subtitle] {
    font-size: 0.8888888889rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.8rem
}

img[loading] {
    opacity: 0
}

img.is-loaded {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.section {
    margin-bottom: var(--space-2xl)
}

.section__header {
    margin-bottom: var(--space-xl)
}

.section__header--center {
    text-align: center
}

.section__header--center>* {
    margin-left: auto;
    margin-right: auto
}

@media (min-width:56.25em) {
    .section__header--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 var(--space-lg)
    }

    .section__header--grid>h1 {
        grid-column: span 2
    }
}

.section__header>*>strong {
    color: var(--color)
}

.section__header>*+p {
    letter-spacing: var(--letter-spacing)
}

.section__btn {
    margin-top: 2.6666666667rem
}

@media (max-width:37.4375em) {
    .section__btn {
        width: 100%
    }
}

.section--border {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-xl)
}

.box {
    border-radius: var(--border-radius);
    padding: var(--space-xl)
}

.box__readmore {
    margin-top: 1.6rem
}

.box[class*=box--]:not([class*=box--light]) {
    --text-color: white;
    --headings-color: white;
    --link-color: white
}

.box--pink {
    background-color: hsl(var(--hsl-pink), 65%)
}

.box--dark {
    background-color: var(--dark)
}

.box--light {
    background-color: var(--light)
}

.page__subtitle {
    margin-top: 0.2666666667rem
}

.page__error {
    max-width: var(--post-width);
    margin-top: var(--space-2xl);
    margin-left: auto;
    margin-right: auto
}

.page__error__title {
    margin-top: 0;
    font-size: clamp(1.8020324707rem, 1.8020324707rem + 1.4452885548 * (100vw - 20rem)/58, 3.2473210255rem)
}

.popup {
    align-items: center;
    -webkit-backdrop-filter: blur(4px) opacity(1);
    backdrop-filter: blur(4px) opacity(1);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    width: 100vw;
    visibility: hidden;
    top: 0;
    transition: all 0.26s cubic-bezier(0.51, 0.92, 0.24, 1.15)
}

.popup__bg {
    background: hsla(0, 0%, 100%, 0.5);
    height: 100%;
    position: absolute;
    width: 100%
}

.popup__container {
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: calc(2 * var(--border-radius));
    color: var(--text-color-light);
    margin: auto var(--page-margin);
    max-width: 38rem;
    position: relative;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    transform: scale(0.9);
    transition: all 0.26s cubic-bezier(0.51, 0.92, 0.24, 1.15);
    text-align: center
}

.popup__close {
    background: var(--light);
    color: var(--dark);
    height: 2.1333333333rem;
    position: absolute;
    right: var(--space-sm);
    text-align: center;
    top: var(--space-sm);
    width: 2.1333333333rem
}

.popup__close:hover {
    color: var(--red);
    text-decoration: none !important
}

.popup h2 {
    margin: 0
}

.popup form,
.popup__actions {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs)
}

.popup form button,
.popup form input,
.popup__actions button,
.popup__actions input {
    display: block;
    margin: var(--space-xs) auto;
    width: 100%
}

@media (min-width:37.5em) {

    .popup form button,
    .popup form input,
    .popup__actions button,
    .popup__actions input {
        max-width: 80%
    }
}

.popup.is-open {
    visibility: visible;
    opacity: 1
}

.popup.is-open .modal__container {
    transform: scale(1)
}

.promo-bar {
    background: var(--black) url(https://getpublii.com/assets/images/black-week-promotion-bar.png);
    background-size: contain;
    background-size: 300px;
    height: 3.6rem;
    width: 100%;
    overflow: hidden
}

.promo-bar>a {
    display: block;
    height: 100%
}

.promo-bar>a>span {
    visibility: hidden
}

.promo-bar--xmas {
    background: #C60001 url(../image/christmas-promotion-bar.svg)
}

.promo-bar--easter {
    background: #FEE3D5 url(../image/easter-promotion-bar.png);
    background-size: contain
}

.promo-bar--text {
    background: #FFF4F7
}

.promo-bar--text>a {
    align-items: center;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    font-size: 0.8888888889rem;
    line-height: 1.2;
    gap: 1rem;
    justify-content: center;
    padding: 0 var(--page-margin);
    text-decoration: none !important;
    width: 100%;
    text-align: center
}

.promo-bar--text>a>span {
    visibility: visible
}

.promo-bar--text .fakebutton {
    background: hsl(var(--hsl-pink), 65%);
    border-radius: var(--border-radius);
    color: var(--white);
    display: none;
    font-family: var(--font-heading);
    font-size: 0.7901234568rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height);
    padding: 0.2666666667rem 0.8rem;
    vertical-align: middle;
    text-align: center;
    text-wrap: nowrap
}

@media (min-width:37.5em) {
    .promo-bar--text .fakebutton {
        display: inline-block
    }
}

@media (min-width:56.25em) {
    .hero {
        margin-top: var(--space-2xl)
    }
}

.hero__title {
    letter-spacing: -0.052em;
    line-height: 1;
    font-size: clamp(1.8020324707rem, 1.8020324707rem + 3.3995479121 * (100vw - 20rem)/58, 5.2015803828rem)
}

.hero__desc {
    font-size: clamp(1rem, 1rem + 0.125 * (100vw - 20rem)/58, 1.125rem);
    margin-bottom: 2.1333333333rem
}

@media (min-width:56.25em) {
    .hero__desc {
        margin-bottom: 3.7333333333rem
    }
}

.hero__image {
    border-radius: 12px;
    box-shadow: 0px 0.3px 3.6px -10px hsla(225, 39%, 18%, 0.016), 0px 4.8px 9.1px -10px hsla(225, 39%, 18%, 0.022), 0px 17.1px 18.6px -10px hsla(225, 39%, 18%, 0.028), 0px 45.1px 38.3px -10px hsla(225, 39%, 18%, 0.034), 0px 88px 105px -10px hsla(225, 39%, 18%, 0.05)
}

.hero__meta small {
    display: block;
    margin-bottom: 0.2666666667rem
}

.hero__new {
    display: inline-block;
    font-size: 16px;
    margin-top: 1.0666666667rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

.hero__new:active,
.hero__new:focus,
.hero__new:hover {
    color: var(--dark)
}

.mention {
    margin-top: calc(var(--space-lg) * -1);
    margin-bottom: var(--space-xl);
    position: relative;
    width: 100%
}

@media (min-width:56.25em) {
    .mention {
        margin-top: calc(var(--space-md) * -1)
    }
}

.mention ::-webkit-scrollbar {
    display: none
}

.mention__container {
    -webkit-overflow-scrolling: touch;
    align-items: center;
    display: grid;
    grid: auto/auto-flow max-content;
    grid-auto-rows: 100%;
    grid-auto-columns: 100%;
    grid-gap: 1rem;
    height: 100%;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth
}

.mention__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: 0;
    position: relative;
    scroll-snap-align: center;
    text-align: center;
    width: 100%
}

.mention__item p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    max-width: 60ch;
    margin: auto
}

@media (min-width:37.5em) {
    .mention__item p {
        font-size: 1.125rem
    }
}

.mention__item>figcaption {
    font-weight: var(--font-weight-bold);
    margin-top: 1.6rem
}

.mention__item>figcaption>cite {
    color: var(--text-color-light);
    display: block;
    font-size: 0.7901234568rem;
    font-style: normal;
    font-weight: var(--font-weight-normal)
}

.mention__nav {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0.5333333333rem 0 0;
    list-style: none
}

@media (min-width:37.5em) {
    .mention__nav {
        margin: 1.0666666667rem 0 0
    }
}

.mention__nav>li {
    background: var(--white);
    border: 2px solid transparent;
    border-radius: 50%;
    box-sizing: content-box;
    cursor: pointer;
    height: 33px;
    margin-left: -1.1rem;
    padding: 2px;
    transition: all 0.2s cubic-bezier(0.5, 0.75, 0.75, 1.25);
    width: 33px
}

@media (min-width:37.5em) {
    .mention__nav>li {
        height: 53px;
        margin-left: -1rem;
        width: 53px
    }
}

.mention__nav>li.active {
    opacity: 1;
    transform: scale(1.35) translateX(0)
}

.mention__nav>li.active~li {
    transform: translateX(10px)
}

.mention__nav>li>img {
    border-radius: 50%;
    height: 100%;
    pointer-events: none;
    width: 100%
}

.mention__nav>li:nth-of-type(11n+1) {
    border-color: #ffcb05
}

.mention__nav>li:nth-of-type(11n+2) {
    border-color: #FF3D7B
}

.mention__nav>li:nth-of-type(11n+3) {
    border-color: #56c7fa
}

.mention__nav>li:nth-of-type(11n+4) {
    border-color: #9556A4
}

.mention__nav>li:nth-of-type(11n+5) {
    border-color: #E1552E
}

.mention__nav>li:nth-of-type(11n+6) {
    border-color: #EABD00
}

.mention__nav>li:nth-of-type(11n+7) {
    border-color: #5C3552
}

.mention__nav>li:nth-of-type(11n+8) {
    border-color: #D0499A
}

.mention__nav>li:nth-of-type(11n+9) {
    border-color: #414756
}

.mention__nav>li:nth-of-type(11n+10) {
    border-color: #685195
}

.mention__nav>li:nth-of-type(11n+11) {
    border-color: #333
}

.server__list {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    gap: var(--space-sm);
    list-style: none;
    margin: 0
}

@media (min-width:37.5em) {
    .server__list {
        --cols: 3
    }
}

@media (min-width:56.25em) {
    .server__list {
        --cols: 4
    }
}

@media (min-width:75em) {
    .server__list {
        padding: 0 2rem
    }
}

.server__list li {
    padding: 0
}

.server__list li a {
    align-items: center;
    aspect-ratio: 2/1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    padding: 0.5333333333rem 1rem;
    justify-content: center
}

.server__list li a:hover {
    box-shadow: var(--shadow)
}

.server__list li svg {
    max-width: 100%;
    vertical-align: middle
}

.cases {
    align-items: center;
    justify-content: center;
    display: grid;
    gap: var(--space-xl)
}

@media (min-width:56.25em) {
    .cases {
        grid-template-columns: auto 42ch;
        grid-auto-flow: dense;
        margin: var(--space-3xl) 0 var(--space-3xl)
    }

    .cases>:nth-child(odd) {
        grid-column: 2
    }
}

.themes__header {
    margin-bottom: 0
}

@media (min-width:56.25em) {
    .themes__header {
        background: var(--light) url("../image/bg-themes.webp") no-repeat 100%/contain;
        border-radius: var(--border-radius);
        padding: var(--space-2xl) var(--space-xl) var(--space-2xl)
    }
}

@media (min-width:56.25em) and (max-width:71.1875em) {
    .themes__header {
        background-position-x: 220%
    }
}

.themes__features {
    display: grid;
    gap: var(--space-lg);
    justify-content: space-around;
    margin-top: var(--space-lg)
}

@media (min-width:56.25em) {
    .themes__features {
        grid-template-columns: repeat(3, 28%);
        gap: initial
    }
}

.themes__features p {
    font-size: 16px;
    margin-top: 1.0666666667rem
}

.plugins__image {
    color: var(--blue-6);
    display: none;
    position: relative;
    z-index: -1
}

@media (min-width:56.25em) {
    .plugins__image {
        margin-top: calc(var(--space-unit) * -7.5);
        display: block
    }
}

.experts {
    display: grid;
    gap: var(--space-sm)
}

@media (min-width:56.25em) {
    .experts {
        grid-template-columns: repeat(2, 1fr)
    }
}

.sponsors__list {
    align-items: center;
    display: flex;
    justify-content: center
}

.sponsors__list>a {
    display: inherit;
    padding: 0 var(--space-md)
}

.list {
    list-style: none
}

.list--arrow li {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    position: relative
}

.list--arrow li:before {
    background-color: var(--color);
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13'%3e%3cpath d='M14-1a1,1,0,0,1,.606.205A1,1,0,0,1,15,0a1,1,0,0,1-.205.605L6.407,11.591a1,1,0,0,1-1.562.065L-.741,5.484A1,1,0,0,1-1,4.814a1,1,0,0,1,.329-.743,1,1,0,0,1,1.412.07l4.793,5.3L13.205-.607A1,1,0,0,1,14-1Z' transform='translate(1 1)' fill='%23fc527d'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13'%3e%3cpath d='M14-1a1,1,0,0,1,.606.205A1,1,0,0,1,15,0a1,1,0,0,1-.205.605L6.407,11.591a1,1,0,0,1-1.562.065L-.741,5.484A1,1,0,0,1-1,4.814a1,1,0,0,1,.329-.743,1,1,0,0,1,1.412.07l4.793,5.3L13.205-.607A1,1,0,0,1,14-1Z' transform='translate(1 1)' fill='%23fc527d'/%3e%3c/svg%3e");
    -webkit-mask-size: 13px 16px;
    mask-size: 13px 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: "";
    display: block;
    height: 16px;
    left: -1.0666666667rem;
    position: absolute;
    top: 0.8rem;
    width: 13px
}

@media (min-width:56.25em) {
    .card {
        --grid: 50%;
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: var(--space-lg)
    }

    .card--reverse {
        flex-direction: row-reverse
    }

    .card--reverse .card__image:before {
        left: 0
    }
}

@media (min-width:75em) {
    .card {
        --grid: 45%
    }
}

@media (min-width:100em) {
    .card {
        --grid: 40%
    }
}

.card h3>span {
    color: var(--color);
    white-space: break-spaces
}

.card__body {
    flex-basis: var(--grid)
}

.card__image {
    flex-basis: calc(100% - var(--grid) - var(--space-lg));
    padding: var(--space-xl) var(--space-lg);
    position: relative;
    text-align: center
}

@media (max-width:56.1875em) {
    .card__image {
        margin-top: var(--space-lg);
        padding-bottom: 0
    }
}

.card__image:before {
    background: var(--color-light);
    border-radius: calc(1.5 * var(--border-radius));
    content: "";
    display: block;
    right: 0;
    height: 60%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

@media (min-width:56.25em) {
    .card__image:before {
        height: 100%;
        width: 74%
    }
}

.card__image>img {
    filter: drop-shadow(0 0 var(--space-md) var(--shadow-color))
}

.card__readmore {
    margin-top: 1.6rem
}

.card+.card {
    margin-top: var(--space-2xl)
}

.card--full {
    display: block
}

@media (min-width:56.25em) {
    .card--full__image {
        margin-top: var(--space-md);
        padding-bottom: 0
    }
}

.card--full__image:before {
    height: 70%;
    width: 100%
}

.showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md)
}

@media (min-width:56.25em) {
    .showcase {
        gap: var(--space-lg)
    }
}

@media (min-width:75em) {
    .showcase {
        grid-template-columns: repeat(3, 1fr)
    }
}

.showcase__item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin: 0;
    padding: var(--space-sm);
    overflow: hidden;
    position: relative;
    transition: all 0.14s ease-out
}

.showcase__item:hover {
    box-shadow: var(--shadow)
}

.showcase__item figcaption {
    color: var(--text-color-light);
    font-style: normal;
    font-size: 0.7901234568rem;
    margin: 0;
    padding: var(--space-sm) 0 0;
    text-align: left
}

.showcase__item h2 {
    margin: 0
}

.showcase__item a {
    display: block;
    font-weight: var(--font-weight-bold)
}

.showcase__item a:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.showcase__item img {
    border-radius: var(--border-radius)
}

.showcase-add-site {
    display: block;
    margin: var(--space-md) auto 0
}

.schowanko {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important
}

.send {
    border-radius: var(--border-radius);
    font-size: 1rem;
    padding: 1.6rem
}

.send--success {
    background: #f7fbf6
}

.send--warning {
    background: #fff3f3;
    color: var(--red)
}

.error {
    border-color: var(--red)
}

.error__label {
    color: var(--red)
}

@media (min-width:75em) {
    .custom__title {
        letter-spacing: -0.08em
    }
}

.custom__services {
    background: var(--color-light);
    border-radius: calc(2 * var(--border-radius));
    display: grid;
    gap: var(--space-lg);
    justify-content: space-around;
    padding: var(--space-xl)
}

@media (min-width:56.25em) {
    .custom__services {
        grid-template-columns: repeat(2, 1fr)
    }
}

.custom__services p {
    font-size: 16px;
    margin-top: 1.0666666667rem
}

.custom__services .icon {
    padding-left: 0;
    padding-right: 0
}

.custom__reviews blockquote {
    max-width: 80ch;
    margin: 0 auto
}

.custom__reviews p {
    max-width: inherit
}

@media (min-width:37.5em) {
    .custom__reviews__nav>li {
        height: 60px;
        width: 60px
    }
}

.custom__benefits {
    display: grid;
    gap: var(--space-lg)
}

@media (min-width:56.25em) {
    .custom__benefits {
        grid-template-columns: repeat(2, 1fr)
    }
}

.custom__benefits p {
    margin-top: 1.0666666667rem
}

@media (min-width:56.25em) {
    .custom__benefits p {
        margin-left: calc(32px + 2.1333333333rem);
        margin-top: 0.5333333333rem
    }
}

.custom__form {
    background: var(--color-light);
    border-radius: calc(2 * var(--border-radius));
    margin: auto;
    padding: var(--space-xl)
}

.custom__form input:not([type=checkbox]),
.custom__form textarea {
    width: 100%
}

.custom__form .form-row {
    margin-top: var(--space-xs)
}

.custom__form .form-agree {
    font-weight: var(--font-weight-normal);
    display: grid;
    grid-template-columns: auto 1fr;
    margin-bottom: var(--space-md)
}

.custom__form .form-agree>i {
    font-style: normal
}

.custom .send {
    margin: auto;
    max-width: 72ch;
    text-align: center
}

.comparison__table {
    border-collapse: collapse;
    margin: var(--space-xl) auto;
    width: 100%
}

.comparison__header {
    background: var(--white);
    position: sticky;
    top: 0
}

.comparison__feature {
    color: var(--headings-color);
    font-size: 0.8888888889rem;
    letter-spacing: 0.02em;
    padding-right: var(--space-lg);
    text-transform: uppercase;
    text-align: left
}

.comparison__icon {
    margin-bottom: var(--space-sm)
}

.comparison__icon svg {
    height: 36px;
    width: 36px
}

.comparison__icon svg>* {
    vector-effect: non-scaling-stroke
}

.comparison__row {
    border-top: 1px solid var(--border-color)
}

.comparison__title {
    padding: var(--space-md) 0
}

.comparison__title span {
    font-size: 0.8888888889rem;
    font-weight: var(--font-weight-normal);
    display: block
}

.comparison__value {
    background: var(--white);
    padding: var(--space-hg) var(--space-md);
    text-align: center
}

.comparison__value.is-highlighted {
    background: var(--color-light)
}

.comparison__value p {
    line-height: 1.6;
    margin: 0
}

@media (max-width:37.4375em) {
    .comparison__feature {
        padding: var(--space-md) var(--space-md) var(--space-md) 0;
        width: 100%
    }

    .comparison__icon {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
        position: relative
    }

    .comparison__icon svg {
        height: 28px;
        width: 28px
    }

    .comparison__row {
        display: block;
        padding: 0;
        padding-bottom: var(--space-md)
    }

    .comparison__row>.comparison__value:first-of-type .comparison__icon:after {
        content: "Static  CMS";
        font-weight: var(--font-weight-bold)
    }

    .comparison__row>.comparison__value:nth-of-type(2) .comparison__icon:after {
        content: "Dynamic CMS";
        font-weight: var(--font-weight-bold)
    }

    .comparison__title {
        display: none
    }

    .comparison__value {
        background: var(--white);
        display: block;
        padding: var(--space-lg) var(--space-lg);
        text-align: left;
        width: 100%
    }

    .comparison__value.is-highlighted {
        background: var(--color-light)
    }

    .comparison__value p {
        line-height: 1.6;
        margin: 0
    }
}

@media (min-width:37.5em) and (max-width:56.1875em) {
    .comparison__feature {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: var(--space-lg) var(--space-sm)
    }

    .comparison__row {
        display: block;
        padding-bottom: var(--space-lg)
    }

    .comparison__header tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: t;
        width: 100%
    }

    .comparison__header tr th:first-of-type {
        display: none
    }

    .comparison__value {
        padding-bottom: var(--space-lg);
        padding-top: var(--space-lg);
        width: 50%
    }
}

@media (min-width:75em) {
    .comparison__feature-title {
        width: 28%
    }

    .comparison__value {
        vertical-align: baseline
    }
}

@media (min-width:56.25em) {
    .max-w-xs {
        max-width: 20ch
    }

    .max-w-sm {
        max-width: 24ch
    }

    .max-w-lg {
        max-width: 36ch
    }

    .max-w-xl {
        max-width: 42ch
    }

    .max-w-2xl {
        max-width: 48ch
    }

    .max-w-3xl {
        max-width: 56ch
    }

    .max-w-5xl {
        max-width: 72ch
    }

    .max-w-6xl {
        max-width: 80ch
    }
}

.icon {
    background-color: var(--icon-bg);
    border-radius: var(--border-radius);
    box-sizing: content-box;
    display: inline-block;
    fill: var(--icon-fill);
    margin-right: 0.8rem;
    padding: 0.6666666667rem;
    vertical-align: middle
}

.icon--pink {
    --icon-bg: hsl(var(--hsl-pink), 98%);
    --icon-fill: hsl(var(--hsl-pink), 65%)
}

.cta {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-2xl)
}

.cta__title {
    margin-top: 0;
    font-size: clamp(1.8020324707rem, 1.8020324707rem + 1.4452885548 * (100vw - 20rem)/58, 3.2473210255rem)
}

.cta__steps {
    list-style: none;
    margin: 2rem 0 0
}

.cta__steps li {
    align-items: center;
    display: inline-flex;
    padding: 0
}

@media (max-width:37.4375em) {
    .cta__steps li {
        font-size: 0.8888888889rem;
        margin: var(--space-xs) 0
    }
}

.cta__steps li span {
    align-items: center;
    background: var(--color-light);
    border: 1px solid var(--color);
    border-radius: 50%;
    color: var(--color);
    display: flex;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    height: 22px;
    justify-content: center;
    margin-right: 0.5333333333rem;
    width: 22px
}

@media (min-width:30em) {
    .cta__steps li span {
        font-size: 16px;
        height: 26px;
        width: 26px
    }
}

.cta__steps li+li {
    margin-left: var(--space-sm)
}

@media (min-width:30em) {
    .cta__steps li+li {
        margin-left: var(--space-md)
    }
}

.cta__desc {
    margin-bottom: 1.6rem
}

.footer {
    border-top: 1px solid var(--border-color);
    font-size: 15px;
    padding-top: var(--space-lg)
}

.footer a {
    color: var(--dark);
    text-decoration: none;
    transition: all 0.14s ease-out
}

.footer a:hover {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

.footer a:active {
    color: var(--link-color)
}

.footer a:focus {
    color: var(--link-color)
}

.footer__bottom {
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    margin-top: var(--space-lg);
    padding-top: var(--space-md)
}

@media (max-width:56.1875em) {
    .footer__bottom {
        padding-top: var(--space-lg);
        text-align: center
    }
}

@media (min-width:56.25em) {
    .footer__bottom {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }
}

.footer__social a {
    color: var(--text-color-light);
    display: inline-block;
    margin: 1.6rem 0.4rem 0.5333333333rem
}

@media (min-width:56.25em) {
    .footer__social a {
        margin: 0 0.4rem
    }
}

.footer__social a:active,
.footer__social a:focus,
.footer__social a:hover {
    color: var(--text-color)
}

.footer__social a>svg {
    fill: currentColor
}

.footer__language {
    margin-top: var(--space-xs)
}

@media (min-width:56.25em) {
    .footer__language {
        text-align: right;
        width: 100%
    }
}

.footer__language select {
    transform: scale(0.75)
}

@media (min-width:56.25em) {
    .footer__language select {
        transform-origin: right
    }
}

.footer__menu {
    list-style: none;
    margin: 0
}

@media (min-width:56.25em) {
    .footer__menu {
        display: grid;
        grid-template-columns: repeat(5, auto);
        justify-content: space-between
    }
}

.footer__menu>li>span {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.8rem;
    position: relative
}

@media (max-width:56.1875em) {
    .footer__menu>li>span {
        cursor: pointer;
        pointer-events: initial
    }
}

@media (min-width:56.25em) {
    .footer__menu>li>span {
        cursor: pointer;
        pointer-events: none
    }
}

@media (max-width:56.1875em) {
    .footer__menu>li>span:after {
        content: "+";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }
}

.footer__menu>li>ul {
    pointer-events: initial
}

@media (max-width:56.1875em) {
    .footer__menu>li>ul {
        height: auto;
        max-height: 0;
        overflow: hidden
    }
}

@media (max-width:56.1875em) {
    .footer__menu>li.is-open>span:after {
        content: "-"
    }

    .footer__menu>li.is-open>ul {
        max-height: 100%;
        margin: 0 0 1.0666666667rem
    }
}

.footer__menu ul {
    margin: 0
}

.footer__menu li {
    display: block;
    padding: 0.4rem 0 0
}

.footer__menu-icon-heart>a {
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M15.635,5.668c0,1.157-.451,2.245-1.27,3.063l-5.894,5.894c-.13,.13-.301,.195-.471,.195s-.341-.065-.471-.195L1.635,8.731c-1.69-1.689-1.69-4.439,0-6.129,1.69-1.69,4.44-1.69,6.13,0l.235,.235,.235-.235c1.693-1.69,4.441-1.689,6.13,0h0c.818,.82,1.269,1.908,1.269,3.066Z' fill='%23ff000d'/%3e%3c/svg%3e") no-repeat 0 50%;
    background-size: 16px;
    padding-left: 24px
}