:root {
    --color-ink: #06081d;
    --color-primary: #6E7740;
    --color-highlight: #6E7740;
    --color-olive: var(--color-primary);
    --color-olive-deep: #5f6835;
    --color-surface: #f8f8ef;
    --color-white: #ffffff;
    --color-border: rgba(255, 255, 255, 0.68);
    --font-family-base: "Roboto", "Lato", "Open Sans", Arial, Helvetica, sans-serif;
    --font-weight-base: 600;
    --section-title-font-size: clamp(2.125rem, 2.408333vw, 3.25rem);
    --section-title-font-weight: 600;
    --section-title-line-height: 1.12;
    --container-width: 1320px;
    --radius-pill: 999px;
    --radius-panel: 32px;
    --transition-base: 180ms ease;
    --cta-hover-background: #000000;
    --cta-hover-transform: translateY(-0.125rem);
    --button-hover-shadow: 0 1rem 2rem rgba(31, 43, 9, 0.18);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-style: normal;
    color: var(--color-ink);
    background:
        radial-gradient(circle at 20% 78%, rgba(255, 255, 255, 0.24), transparent 20%),
        radial-gradient(circle at 74% 34%, rgba(255, 255, 255, 0.18), transparent 18%),
        linear-gradient(135deg, #c8d985 0%, #dce9b0 38%, #d7e499 68%, #cfe08a 100%);
    min-height: 100vh;
    overflow-x: clip;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

input,
textarea,
select {
    font: inherit;
}

.site-main {
    overflow: clip;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.75rem;
    padding: 0.875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
}

.button:hover,
.button:focus-visible {
    transform: var(--cta-hover-transform);
    box-shadow: var(--button-hover-shadow);
}

.button--large {
    min-width: 12.5rem;
    min-height: 3.875rem;
    font-size: 1.125rem;
}

.button--olive,
.product-cta__button--olive,
.product-feature-showcase__button--dark {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.button--olive:hover,
.button--olive:focus-visible,
.product-cta__button--olive:hover,
.product-cta__button--olive:focus-visible,
.product-feature-showcase__button--dark:hover,
.product-feature-showcase__button--dark:focus-visible {
    color: var(--color-white);
    background-color: var(--cta-hover-background);
    transform: var(--cta-hover-transform);
    box-shadow: var(--button-hover-shadow);
}

.button--dark {
    color: var(--color-white);
    background-color: var(--color-ink);
}

.button--dark:hover,
.button--dark:focus-visible {
    background-color: #101530;
}

@media (max-width: 767px) {
    .button,
    .button--large {
        width: 100%;
    }
}