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

html {
    scroll-behavior: smooth;
    background: var(--k-bg);
}

body {
    margin: 0;
    min-width: 0;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

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

.k-container {
    width: min(calc(100% - 2.5rem), var(--k-container));
    margin-inline: auto;
}

.k-container--wide {
    width: min(calc(100% - 2.5rem), var(--k-container-wide));
    margin-inline: auto;
}

.k-section {
    padding-block: var(--k-section-space);
}

.k-section--soft {
    background: var(--k-surface-soft);
}

.k-section--blue {
    background:
        radial-gradient(circle at 20% 10%, rgba(38, 151, 232, .08), transparent 34%),
        linear-gradient(180deg, var(--k-blue-050), var(--k-white));
}

.k-grid {
    display: grid;
    gap: var(--k-space-8);
}

.k-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-stack {
    display: flex;
    flex-direction: column;
}

.k-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.k-center {
    text-align: center;
}

.k-max-copy {
    max-width: 760px;
}

.k-max-copy--center {
    max-width: 760px;
    margin-inline: auto;
}

.k-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--k-z-sticky);
    min-height: var(--k-header-height);
    border-bottom: 1px solid rgba(229, 234, 238, .88);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: saturate(165%) blur(18px);
    -webkit-backdrop-filter: saturate(165%) blur(18px);
}

.k-header__inner {
    min-height: var(--k-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-6);
}

.k-footer {
    border-top: 1px solid var(--k-border);
    padding-block: var(--k-space-16);
    background: var(--k-white);
}

@media (max-width: 960px) {
    .k-grid--4,
    .k-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .k-grid--4,
    .k-grid--3,
    .k-grid--2 {
        grid-template-columns: 1fr;
    }

    .k-container,
    .k-container--wide {
        width: min(calc(100% - 1.75rem), var(--k-container));
    }

    .k-section {
        padding-block: clamp(4rem, 12vw, 6rem);
    }
}