@layer theme {
    :root {
        --hue: 160deg;

        --tint: light-dark(oklch(23% 0.021 162.5deg), oklch(97% 0.008 140deg));
        --tint-hover: light-dark(
            oklch(32% 0.021 162.5deg),
            oklch(89% 0.008 140deg)
        );
        --tint-pressed: light-dark(
            oklch(16% 0.021 162.5deg),
            oklch(81% 0.008 140deg)
        );
        --tint-fill: light-dark(
            oklch(23% 0.021 162.5deg / 10%),
            oklch(97% 0.008 140deg / 14%)
        );
        --tint-label: light-dark(
            oklch(98.6% 0.006 140deg),
            oklch(17.5% 0.014 160deg)
        );

        --system-background: light-dark(
            oklch(98.6% 0.006 140deg),
            oklch(17.5% 0.014 160deg)
        );
        --secondary-system-background: light-dark(
            oklch(95.8% 0.01 140deg),
            oklch(22.5% 0.016 160deg)
        );
        --tertiary-system-background: light-dark(
            oklch(99.4% 0.004 140deg),
            oklch(28% 0.016 160deg)
        );
        --system-grouped-background: light-dark(
            oklch(95.8% 0.01 140deg),
            oklch(17.5% 0.014 160deg)
        );
        --secondary-system-grouped-background: light-dark(
            oklch(99.4% 0.004 140deg),
            oklch(22.5% 0.016 160deg)
        );
        --tertiary-system-grouped-background: light-dark(
            oklch(95.8% 0.01 140deg),
            oklch(28% 0.016 160deg)
        );
        --label: light-dark(
            oklch(23% 0.021 162.5deg),
            oklch(96.5% 0.008 140deg)
        );
        --secondary-label: light-dark(
            oklch(30% 0.02 160deg / 72%),
            oklch(94% 0.01 140deg / 66%)
        );
        --tertiary-label: light-dark(
            oklch(30% 0.02 160deg / 46%),
            oklch(94% 0.01 140deg / 38%)
        );
        --quaternary-label: light-dark(
            oklch(30% 0.02 160deg / 22%),
            oklch(94% 0.01 140deg / 18%)
        );
        --separator: light-dark(
            oklch(30% 0.02 160deg / 18%),
            oklch(72% 0.02 150deg / 26%)
        );
        --opaque-separator: light-dark(
            oklch(88% 0.01 140deg),
            oklch(32% 0.015 160deg)
        );
        --hairline: light-dark(
            oklch(23% 0.021 162.5deg / 9%),
            oklch(100% 0 0deg / 9%)
        );
        --system-fill: light-dark(
            oklch(50% 0.02 150deg / 18%),
            oklch(62% 0.02 155deg / 34%)
        );
        --secondary-system-fill: light-dark(
            oklch(50% 0.02 150deg / 14%),
            oklch(62% 0.02 155deg / 30%)
        );
        --tertiary-system-fill: light-dark(
            oklch(50% 0.02 150deg / 10%),
            oklch(62% 0.02 155deg / 22%)
        );
        --quaternary-system-fill: light-dark(
            oklch(50% 0.02 150deg / 7%),
            oklch(62% 0.02 155deg / 16%)
        );
    }
}

:root {
    color-scheme: light dark;

    --signal: light-dark(
        oklch(51.5% 0.11 156.8deg),
        oklch(75.8% 0.128 159.9deg)
    );
    --signal-bright: oklch(75.8% 0.128 159.9deg);
    --signal-halo: color-mix(in oklch, var(--signal) 24%, transparent);
    --icon-ground: oklch(23% 0.021 162.5deg);
    --icon-ink: oklch(98.6% 0.006 140deg);
    --app-tint: oklch(62.5% 0.17 155deg);
}

.wordmark {
    display: inline-flex;
    color: var(--label);

    & svg {
        display: block;
        inline-size: auto;
        block-size: 1.5rem;
    }

    & .wordmark__tile {
        fill: var(--signal);
    }
}

.icon {
    display: inline-flex;

    & svg {
        display: block;
        inline-size: 1.75rem;
        block-size: 1.75rem;
    }

    & .icon__ground {
        fill: var(--icon-ground);
    }

    & .icon__stem {
        fill: var(--icon-ink);
    }

    & .icon__tile {
        fill: var(--signal-bright);
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--label);
    font-weight: 700;
    text-decoration: none;
}

.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.5rem;

    & .hero__text {
        display: flex;
        flex: 999 1 30rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        min-inline-size: 0;
    }

    & .hero__title {
        margin: 0;
        font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 0.98;
        text-wrap: balance;
    }
}

.signal {
    color: var(--signal);
}

.lead {
    max-inline-size: 38rem;
    margin: 0;
    color: var(--secondary-label);
    font-size: 1.25rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.availability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 999rem;
    background-color: var(--secondary-system-background);
    color: var(--secondary-label);
    font-size: 0.9375rem;

    & .availability__light {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background-color: var(--signal);
        box-shadow: 0 0 0 0.25rem var(--signal-halo);
    }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product {
    --tint: var(--app-tint);

    display: flex;
    flex: 0 1 27rem;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;

    & .product__screen {
        --secondary-system-background: var(--tertiary-system-background);

        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        border-radius: 2rem;
        background-color: var(--system-grouped-background);
        box-shadow: inset 0 0 0 0.0625rem var(--hairline);
    }

    & .product__meter {
        inline-size: 100%;
    }

    & .product__title {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    & .product__balance {
        margin: 0;
        font-size: 2.5rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.035em;
        line-height: 1;
    }

    & figcaption {
        color: var(--tertiary-label);
        font-size: 0.875rem;
        text-align: center;
    }
}

.numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.5rem 2rem;
    margin: 0;
    padding-block: 1.75rem;
    border-block: 0.0625rem solid var(--separator);

    & .numbers__item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    & dt {
        font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.035em;
        line-height: 1;
    }

    & dd {
        margin: 0;
        color: var(--secondary-label);
        font-size: 0.9375rem;
        line-height: 1.4;
    }
}

.heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-inline-size: 44rem;

    & h1,
    & h2 {
        margin: 0;
        font-size: clamp(2rem, 1.5rem + 1.75vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.05;
    }

    & h1 {
        font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
        letter-spacing: -0.045em;
    }

    & p {
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.125rem;
        line-height: 1.55;
    }
}

.feature {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 2rem;
    inline-size: 100%;
    box-sizing: border-box;
    padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    border-radius: 1.5rem;
    background-color: var(--secondary-system-background);

    & .feature__icon {
        display: block;
        flex: none;
        inline-size: 5rem;
        block-size: 5rem;
        border-radius: 1.25rem;
    }

    & .feature__text {
        display: flex;
        flex: 1 1 24rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    & h3 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    & .feature__tagline {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

    & p {
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.0625rem;
        line-height: 1.55;
    }
}

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    inline-size: 100%;

    & .services__item {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
        padding: 1.75rem;
        border-radius: 1.5rem;
        background-color: var(--secondary-system-background);

        & svg {
            display: block;
            inline-size: 2rem;
            block-size: 2rem;
        }

        & h3 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.015em;
        }

        & p {
            margin: 0;
            color: var(--secondary-label);
            line-height: 1.55;
        }
    }
}

.rows {
    inline-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    &.rows--apps .rows__item {
        align-items: center;
    }

    & .rows__item {
        display: grid;
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 0.5rem 2rem;
        padding-block: 1.5rem;
        border-block-start: 0.0625rem solid var(--separator);

        &:last-child {
            border-block-end: 0.0625rem solid var(--separator);
        }
    }

    & h3 {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.02em;

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

    & .rows__app {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    & .rows__icon {
        display: block;
        border-radius: 0.625rem;
    }

    & p {
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.0625rem;
        line-height: 1.5;
    }

    & .rows__meta {
        color: var(--tertiary-label);
        font-size: 0.9375rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}

.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2rem;
    inline-size: 100%;

    & .principles__item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-block-start: 1rem;
        border-block-start: 0.1875rem solid var(--label);
    }

    & h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
    }

    & p {
        margin: 0;
        color: var(--secondary-label);
        line-height: 1.55;
    }
}

.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    inline-size: 100%;

    & .quotes__item {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin: 0;
        padding: 2rem;
        border-radius: 1.5rem;
        background-color: var(--secondary-system-background);
    }

    & blockquote {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.3;

        &::before {
            content: "“";
            display: block;
            margin-block-end: 0.5rem;
            color: var(--tertiary-label);
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 0.6;
        }
    }
}

.excluded {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
    gap: 2rem 3rem;
    inline-size: 100%;

    & ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-block: 0.875rem;
        border-block-start: 0.0625rem solid var(--separator);
        font-size: 1.0625rem;

        &:last-child {
            border-block-end: 0.0625rem solid var(--separator);
        }
    }

    & svg {
        flex: none;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        color: var(--tertiary-label);
    }
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    border-radius: 2rem;
    background-color: var(--secondary-system-background);
    box-shadow: inset 0 0 0 0.0625rem var(--hairline);
    color: var(--label);
    color-scheme: dark;

    & h2 {
        margin: 0;
        font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 1;
    }

    & p {
        max-inline-size: 36rem;
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.25rem;
        line-height: 1.55;
    }
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    & .site-footer__company {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    & .site-footer__address {
        color: var(--tertiary-label);
        font-size: 0.8125rem;
        font-style: normal;
    }

    & .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;

        & a {
            color: var(--secondary-label);
            text-decoration: none;

            &:hover,
            &[aria-current="page"] {
                color: var(--label);
            }
        }
    }
}