@import url('form.css');
@import url('hero.css');

:root {
    --type-sans: 'Inter', system-ui, sans-serif;
    --type-heading: 'Anta', system-ui, sans-serif;
    --type-mono: 'Roboto Mono', monospace;
    /* general */
    --lh: 1.309;
    --letter-spacing: -0.02em;
    --br: calc(((var(--lh) * 1em) + 1rem) * 2);
    --font-min: 1.25rem;
    /* brand colors */
    --color-primary: #0020a2;
    --color-primary-rgb: 0 32 162;
    --color-secondary: #0078fe;
    --color-secondary-rgb: 0 120 254;
    --color-ghost: #f8fafe;
    --color-mint: #41d1c6;
    --color-red: #f11f23;
    /* gray colors*/

    --color-gray-1: #141414;
    --color-gray-2: #868789;
    --color-gray-3: #bfc1c4;
    --color-gray-4: #dcdee1;
    /* easing */
    --ease-inout-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-inout-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* viewport widths */
    --size-sm: 800px;
    --size-md: 1024px;
    --size-lg: 1440px;
    --size-xl: 1600px;
    /*image sizes*/
    --img-50: 50px;
    --img-60: 60px;
    --img-70: 70px;
    --img-100: 100px;
    --img-150: 150px;
    --img-200: 200px;
    /*button*/
    --btn-background: transparent;
    --btn-color: var(--color-primary);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: var(--lh);
    font-optical-sizing: auto;
    font-family: var(--type-sans);
    font-style: normal;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

.spectrum {
    background-color: var(--color-spectrum);
}

.vista {
    background-color: var(--color-vista);
}

a, a:link {
    text-decoration: none;
}

    a.link {
        padding-inline: 0.25rem;
        padding-bottom: 0.125rem;
        color: var(--color-primary);
        box-shadow: inset 0 -1px 0 transparent;
        transition: box-shadow 0.3s;
    }

        a.link.underlined {
            box-shadow: inset 0 -1px 0 currentcolor;
        }

        a.link:hover {
            box-shadow: inset 0 -1px 0 currentColor;
        }

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--type-sans);
}

h1 {
    font-size: max(var(--font-min), 3em);
}

h2 {
    font-size: max(var(--font-min), 2.25em);
}

h3 {
    font-size: max(var(--font-min), 1.75em);
}

h4 {
    font-size: max(var(--font-min), 1.25em);
}

p {
    line-height: calc(var(--lh) * 1.125);
}

    p.prose {
        margin-block: 1em;
        color: var(--color-gray-2);
    }

.type-mono,
code,
pre {
    font-family: var(--type-mono);
}

.heading,
.subtitle {
    margin-bottom: 0.75em;
}

.bare {
    margin: 0;
}

.heading {
    font-weight: 600;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--color-gray-2);
}

.lead {
    color: var(--color-gray-2);
}

hr {
    --line-mask-start: 5%;
    --line-mask-end: 95%;
    margin-block: 1rem;
    height: 1px;
    border: 0;
    background-color: var(--color-gray-3);
    -webkit-mask-image: linear-gradient(to right, transparent var(--line-mask-start), black, black, transparent var(--line-mask-end));
    mask-image: linear-gradient(to right, transparent var(--line-mask-start), black, black, transparent var(--line-mask-end));
}

    hr.dashed {
        mask: none;
        background-color: transparent;
        border: 1px dashed var(--color-gray-3);
    }

ul.list,
ol.list {
    margin-block: 1rem;
    color: var(--color-gray-2);
}

    ul.list.inset,
    ol.list.inset {
        padding-left: 1rem;
    }

li {
    position: relative;
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-block: 0.5rem;
}

    li img {
        filter: invert(0.5);
    }

ul.list.default li::before,
ol.list.default li::before {
    content: '\2022'
}

/* img */
.img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    .img.img-contain {
        object-fit: contain;
    }

/* preloader */
.site-preloader {
    display: none;
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    background-color: var(--color-primary);
    z-index: 9999;
}

html.preloaded .site-preloader {
    display: none;
}

.site-preloader .reveal {
    width: 50vmin;
    width: 50vmin;
    outline: 2px dashed violet;
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    padding-inline: 1rem;
    background-color: white;
    box-shadow: 0 2rem 5px -31px var(--color-gray-4);
    transform-origin: bottom;
    will-change: transform;
    transition: transform 0.75s var(--ease-inout-expo);
    z-index: 100;
}

html.scrolling-down .site-header {
    transform: translateY(-100%);
}

html.scrolling-up .site-header {
    transform: translateY(0);
}

.site-header-contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    opacity: 0;
    transform-origin: top;
    transform: translateY(-0.5rem);
}

.loaded .site-header-contents {
    animation: animate-in 1s 0.3s var(--ease-inout-expo) forwards;
}

.site-logo {
    width: 150px;
    flex-shrink: 0;
    user-select: none;
}

    .site-logo > img {
        object-fit: contain;
        width: 100%;
        height: min-content;
    }

.site-header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background-color: var(--color-primary);
    border-radius: 0.5rem;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@keyframes animate-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0 transparent;
    font-family: var(--type-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    color: white;
    transition: all 0.3s;
}

    .nav-link.filled {
        background-color: var(--color-secondary);
        color: var(--color-ghost);
    }

    .nav-link.outlined {
        background-color: transparent;
        border: 1px solid currentColor;
        color: var(--color-primary);
    }

    .nav-link.filled:hover {
        background-color: var(--color-primary);
    }

    .nav-link.is-active {
        background-color: var(--color-secondary);
        color: white;
    }

.site-header-nav .nav-link:not(.is-active):hover {
    background-color: #0078fe5e;
}

.site-header-actions .nav-link:hover {
    background-color: var(--color-primary);
    color: white;
}

/* containment */
.center {
    margin-inline: auto;
}

    .center.sm,
    .view-sm {
        max-width: 800px;
    }

    .center.md,
    .view-md {
        max-width: 1024px;
    }

    .center.default,
    .view-default {
        max-width: 1440px;
    }

    .center.xl,
    .view-xl {
        max-width: 1600px;
    }

.section {
    position: relative;
    padding-block: 8rem;
}

.invert {
    background-color: var(--color-gray-1);
}

.invert-ghost {
    background-color: var(--color-ghost);
}

.invert-blue {
    background-color: var(--color-primary);
}

:is(.invert, .invert-blue) :is(h1, h2, h3, h4, h5, h6) {
    color: white;
}

:is(.invert, .invert-blue) :is(p) {
    color: var(--color-gray-4);
}

.region {
    padding-block: 2rem;
}

/* article */
.article {
}

.article-region {
    padding-block: 1rem;
}

.container {
    max-width: 1440px;
    padding-inline: 2rem;
}

.wrapper {
    padding-inline: 2rem;
}

.section-header {
    margin-bottom: 2rem;
    padding: 0 2rem 2rem;
    text-align: center;
}

    .section-header.left-align {
        text-align: left;
        margin-bottom: 0;
        padding: 0 4rem 0 0;
    }

    .section-header :is(h1, h2, h3, h4),
    .header :is(h1, h2, h3, h4) {
        margin-bottom: 1rem;
    }

    .section-header :is(h1, h2, h3, h4) {
        font-weight: 700;
        letter-spacing: var(--letter-spacing);
    }

    .section-header h1 {
        font-size: 4rem;
        line-height: calc(var(--lh) * .8);
    }

    .section-header .subtitle {
        margin-inline: auto;
        max-width: 1024px;
        font-size: 1.5rem;
    }

.header :is(h1, h2, h3, h4) {
    font-weight: 600;
}

.newline {
    display: block;
}

/* flex - generic */
.flex {
    display: flex;
}

    .flex.full {
        flex: 1;
    }

.spacer {
    flex-grow: 1;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-grow {
    flex-grow: 1;
}

.hstack,
.vstack {
    display: flex;
}

.hstack {
    align-items: center;
    gap: 2rem;
}

.vstack {
    flex-direction: column;
}

/* gap */
.gap-02 {
    gap: 0.25rem;
}

.gap-01 {
    gap: 0.5rem;
}

.gap-1,
.gap {
    gap: 1rem;
}

/* grid - generic */
.grid {
    --grid-type: auto-fit;
    display: grid;
    gap: 1rem;
}

    .grid.grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
        gap: 2rem 4rem;
    }

    .grid.grid-3 {
        grid-template-columns: repeat(var(--grid-type), minmax(calc((1024px / 3) - 2rem), 1fr));
    }

    .grid.grid-4 {
        grid-template-columns: repeat(var(--grid-type), minmax(calc((1024px / 4) - 2rem), 1fr));
    }

/* card */
.card {
    --card-background: transparent;
    --card-border: 1px solid var(--color-gray-2);
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    position: relative;
    padding: 1.5rem 2rem;
    background-color: var(--card-background);
    border: var(--card-border);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s;
}

.card-legend {
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-flex;
    padding: 0.5rem 1rem;
    background-color: var(--color-primary);
    border-radius: 0.25rem;
    font-size: 12px;
    color: white;
    transform: translate(-50%, -50%);
}

.card .card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .card .card-label .tag {
        --tag-background: var(--color-red);
        color: white;
    }

        .card .card-label .tag.blue {
            --tag-background: var(--color-secondary);
        }

.card .card-content {
    flex: 1;
}

.card.is-callout {
    background-image: radial-gradient(circle at 50% 200%, var(--color-mint), var(--color-secondary), var(--color-primary), var(--color-gray-1));
    box-shadow: 0 0 3rem 0 var(--color-primary);
    transform: scale(1.03);
}

    .card.is-callout :is(p, ul, img, h1, h2, h3, h4, h5, h6, div) {
        color: var(--color-gray-4);
    }

    .card.is-callout img {
        filter: brightness(0) invert(1);
    }

.card.is-vista {
    box-shadow: 0 0 0 1px var(--color-primary);
}

    .card.is-vista::before {
        content: '* Vista only';
        position: absolute;
        top: 0;
        left: 50%;
        padding: 0.5rem;
        background-color: var(--color-primary);
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        font-family: var(--type-mono);
        font-size: 0.7rem;
        text-transform: uppercase;
        color: white;
        translate: -50% -100%;
    }

/* features */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 1.5rem 2rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem var(--color-gray-4);
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

    .feature-card .vstack {
        gap: 0.25rem;
    }

    .feature-card .subtitle {
        margin-bottom: 0;
        font-weight: 500;
    }

    .feature-card:hover {
        background-color: var(--color-primary);
    }

        .feature-card:hover :is(h1, h2, h3, h4, .subtitle, .lead) {
            color: var(--color-ghost);
        }

.feature-icon {
    /*border: 2px solid var(--color-gray-4);*/
    transition: filter 0.3s;
}

.feature-card:hover .feature-icon {
    filter: brightness(0) invert(1);
}

/* text */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-mint {
    color: var(--color-mint);
}

.text-red {
    color: var(--color-red);
}

.text-gray-1 {
    color: var(--color-gray-1);
}

.text-gray-2 {
    color: var(--color-gray-2);
}

.text-gray-3 {
    color: var(--color-gray-3);
}

.text-gray-4 {
    color: var(--color-gray-4);
}

.text-underline {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}

.text-brand-callout {
    position: relative;
    font-family: var(--type-heading);
    text-transform: capitalize;
    color: var(--color-secondary);
}

/* fonts */
.fs-02 {
    font-size: 0.8rem;
}

.fs-01 {
    font-size: 0.875rem;
}

.fs-1 {
    font-size: 1rem;
}

.fw-3 {
    font-weight: 300;
}

.fw-4 {
    font-weight: 400;
}

.fw-5 {
    font-weight: 500;
}

.fw-6 {
    font-weight: 600;
}

.fw-7 {
    font-weight: 700;
}

/* background */
.bg-ghost {
    background-color: var(--color-ghost);
}

.bg-blue-primary {
    background-color: var(--color-primary);
}

.bg-blue-secondary {
    background-color: var(--color-secondary);
}

/* buttons */
button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    outline: none;
    border: 0;
    border-radius: 0.25rem;
    font-family: var(--type-mono);
    font-size: 0.875rem;
    color: var(--btn-color);
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.3s, background-color 0.3s, border 0.3s, color 0.3s;
}

.cta-button {
    font-family: var(--type-mono);
    text-transform: uppercase;
    padding: 1rem 2rem;
    background-color: var(--btn-background);
    border: 2px solid var(--color-primary);
    border-radius: 0.25rem;
    color: var(--btn-color);
    transition: box-shadow 0.3s, background-color 0.3s, border 0.3s, color 0.3s;
}

a.cta-button {
    color: var(--btn-color);
}

.cta-button:hover {
    --btn-background: var(--color-primary);
    --btn-color: white;
}

.cta-button.is-primary {
    --btn-background: var(--color-primary);
    border: 0;
    --btn-color: white;
}

    .cta-button.is-primary:hover {
        --btn-background: var(--color-secondary);
    }

.cta-button.is-secondary {
    --btn-background: var(--color-secondary);
    border: 0;
    --btn-color: white;
}

    .cta-button.is-secondary:hover {
        --btn-background: var(--color-primary);
    }

.cta-button.is-white {
    border-color: white;
    --btn-color: white;
}

    .cta-button.is-white:hover {
        --btn-background: white;
        --btn-color: var(--color-primary);
    }

.btn.btn-icon {
    padding: 0.5rem;
    background-color: var(--color-gray-4);
}

    .btn.btn-icon:hover {
        background-color: var(--color-gray-3);
    }

/* placeholder graphics */
.placeholder {
    position: relative;
    width: 100%;
    background-color: var(--color-gray-4);
    border-radius: 0.5rem;
    aspect-ratio: 1/1;
}

    .placeholder::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: url('/img/placeholder.svg') center center no-repeat;
        background-size: min(20rem, 50%) auto;
        translate: -50% -50%;
    }

.invert .placeholder {
    background-color: var(--color-gray-2);
}

    .invert .placeholder::before {
        filter: brightness(0) invert(1);
    }

.ph-50,
.img-50 {
    width: var(--img-50);
    height: var(--img-50);
}

.ph-60,
.img-60 {
    width: var(--img-60);
    height: var(--img-60);
}

.ph-70,
.img-70 {
    width: var(--img-70);
    height: var(--img-70);
}

.ph-100,
.img-100 {
    width: var(--img-100);
    height: var(--img-100);
}

.ph-150,
.img-150 {
    width: var(--img-150);
    height: var(--img-150);
}

.ph-200,
.img-200 {
    width: var(--img-200);
    height: var(--img-200);
}

.ph-250,
.img-250 {
    width: var(--img-250);
    height: var(--img-250);
}

.ph-350,
.img-350 {
    width: var(--img-350);
    height: var(--img-350);
}

.ph-500,
.img-500 {
    width: var(--img-500);
    height: var(--img-500);
}

/* labels */
.text-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    column-gap: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--type-mono);
    text-transform: uppercase;
    color: var(--color-gray-2);
}

    .text-label [data-scramble] {
        opacity: 0;
    }

.section-header .text-label {
    margin-bottom: 1rem;
}

    .section-header .text-label::before {
        content: '';
        width: 1.5rem;
        height: 1.5rem;
        background-image: url(/img/logos/clearsync-brandmark.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0;
        transform-origin: left center;
        transform: scaleY(0.1);
    }

    .section-header .text-label.is-clearplan::before {
        width: 2rem;
        height: 2rem;
        background-image: url('/img/logos/clearplan-milestone.svg');
    }

.section:is(.invert, .invert-blue) .section-header .text-label {
    color: var(--color-gray-3);
}

    .section:is(.invert, .invert-blue) .section-header .text-label::before {
        filter: brightness(0) invert(1);
    }

.section.is-intersecting .section-header .text-label::before {
    animation: animate-label-mark 0.5s 0.5s var(--ease-inout-back) forwards;
}

@keyframes animate-label-mark {
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.section-header .text-label::before {
    margin-right: 0.5rem;
}

/* pricing */
.pricing-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* pricing - comparison table */
.pc-table {
    position: relative;
    overflow: clip;
}

.table {
    --table-border-color: var(--color-gray-4);
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--table-border-color);
    font-size: 0.875rem;
}

    .table th,
    .table td {
        padding: 2rem;
        border-right: 1px solid var(--table-border-color);
        text-align: center;
    }

    .table th {
        font-weight: 600;
        color: initial;
    }

    .table thead.table-header tr {
        box-shadow: 0 0 0 1px var(--table-border-color);
    }

        .table thead.table-header tr th {
            position: sticky;
            top: 5rem;
            padding-top: 2rem;
            background-color: white;
        }

    .table tr {
        border-bottom: 1px solid var(--table-border-color);
    }

    .table .cell-title {
        text-align: left;
        width: 20rem;
    }

/* faq */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1024px;
    margin-inline: auto;
}

.faq {
    display: grid;
    grid-template-rows: auto 0fr;
    align-content: start;
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-4);
    transition: grid-template-rows 0.5s var(--ease-inout-expo), border-bottom-color 0.3s;
    overflow: clip;
}

    .faq:last-child {
        border-bottom: 0;
    }

    .faq:hover {
        border-bottom-color: currentColor;
    }

    .faq.is-open {
        grid-template-rows: auto 1fr;
    }


.faq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing);
    cursor: pointer;
}

    .faq-title span {
        flex: 1;
        transition: color 0.5s ease;
    }

    .faq-title:hover span,
    .faq.is-open .faq-title span {
        color: black;
    }

    .faq-title .faq-icon {
        position: relative;
        display: inline-grid;
        place-content: center;
        aspect-ratio: 1;
        width: 2rem;
        height: 2rem;
    }

        .faq-title .faq-icon::before {
            content: '';
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: var(--color-primary);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.5s var(--ease-inout-back), opacity 0.5s;
            z-index: -1;
        }

.faq.is-open .faq-title .faq-icon::before {
    opacity: 1;
    transform: scale(1);
}

.faq-title .faq-icon > img {
    grid-area: 1/1;
    transform-origin: center;
    transition: transform 0.5s var(--ease-inout-back), filter 0.5s;
}

.faq.is-open .faq-title .faq-icon > img {
    transform: rotate(45deg);
    filter: brightness(0) invert(1);
}

.faq-panel {
    min-height: 0;
    overflow: hidden;
}

    .faq-panel .faq-body {
        padding-block: 1rem;
        /*font-family: var(--type-mono);*/
        color: var(--color-gray-2);
        opacity: 0;
        transition: transform 0.5s, opacity 0.5s;
    }

        .faq-panel .faq-body p:not(:only-child) {
            margin-top: 1rem;
        }

.faq.is-open .faq-panel .faq-body {
    opacity: 1;
}

/* tag */
.tag {
    --tag-background: transparent;
    --tag-color: initial;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: var(--tag-background);
    border-radius: var(--br);
    color: var(--tag-color);
    font-size: 0.8rem;
    white-space: nowrap;
}

    .tag:is(.spectrum, .vista) {
        color: white;
    }

/* notice */
.notice {
    display: flex;
    column-gap: 1rem;
    position: relative;
    margin-block: 2rem;
    padding: 1rem;
    background-image: radial-gradient(ellipse at 50% 200%, var(--color-secondary), var(--color-primary));
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    color: white;
}

    .notice.danger {
        background-image: radial-gradient(ellipse at 50% 100%, var(--color-red), var(--color-primary));
    }

.notice-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.notice-content {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

/* sticky toggle (for form-check-group) */
.sticky-toggle {
    position: sticky;
    top: 6rem;
    background-color: white;
    border-radius: var(--br);
    outline: 2px dashed violet;
    z-index: 1;
}

/* tip */
.tip {
    position: relative;
}

    .tip .tip-content {
        position: absolute;
        top: 100%;
        left: 50%;
        width: max(25ch, 10rem);
        padding: 0.5rem 1rem;
        background-color: var(--color-primary);
        border-radius: 0.25rem;
        color: white;
        font-size: 0.875rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
        transform: translate(-50%, -0.5rem);
        z-index: 1;
    }

    .tip.is-open .tip-content {
        opacity: 1;
        transform: translate(-50%, 0);
    }

/* footer */
.site-footer {
    --footer-block: 8rem;
    position: relative;
    padding-block: var(--footer-block) 4rem;
    background-color: var(--color-primary);
    color: white;
}

    .site-footer::before {
        --dot: 2px;
        content: '';
        position: absolute;
        inset: 0;
        background-size: 1.5rem 1.5rem;
        background-image: radial-gradient(circle at 1px 1px, var(--color-secondary) 1px, transparent 0);
        background-position: -1px -1px;
        mask-image: linear-gradient(to bottom, transparent 30%, black 50%);
        opacity: 0.5;
        pointer-events: none;
    }

    .site-footer a {
        color: white;
    }

    .site-footer .container {
        position: relative;
        max-width: var(--size-xl);
        z-index: 1;
    }

    .site-footer .site-footer-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

        .site-footer .site-footer-layout hr {
            background-color: var(--color-secondary);
        }

.site-footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

    .site-footer-main .site-footer-logo {
        width: 20rem;
    }

    .site-footer-main .site-footer-nav {
        display: flex;
        gap: 4rem;
    }

        .site-footer-main .site-footer-nav .site-footer-links {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

.site-footer-sub {
    margin-top: 1rem;
}

.site-footer-legal {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* dialog */
dialog {
    width: clamp(320px, 100%, 800px);
    margin: auto;
    padding: 1.5rem 2rem;
    border: 0;
    border-radius: 0.5rem;
    outline: none;
    opacity: 0;
    transform: translateY(1rem);
}

    dialog::backdrop {
        background-color: black;
        opacity: 0;
    }

    dialog[open] {
        animation: animate-dialog-in 0.5s 0.1s var(--ease-inout-expo) forwards;
    }

        dialog[open]::backdrop {
            animation: animate-dialog-backdrop-in 1s var(--ease-inout-expo) forwards;
        }

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

@keyframes animate-dialog-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animate-dialog-backdrop-in {
    to {
        opacity: 0.5;
        backdrop-filter: blur(5px);
    }
}

/* timeline (deployment) */
.timeline-container {
    --lane-col-gap: 4rem;
    --lane-row-gap: 2rem;
    --color-border: var(--color-gray-4);
    position: relative;
    padding-block: 4rem;
    background-size: 2rem 2rem;
    background-image: radial-gradient( circle at 1px 1px, var(--color-gray-3) 1px, transparent 0 );
    background-position: -1px -1px;
    border-radius: 0.5rem;
}

.timeline-wrapper {
    position: relative;
    padding: 1rem 2rem;
    overflow: hidden;
}

.timeline {
    display: flex;
    gap: var(--lane-row-gap) var(--lane-col-gap);
    min-width: 100%;
    width: calc(var(--lane-width) * var(--lanes) + calc(var(--lane-col-gap) * var(--lanes)));
    will-change: transform;
}

.timeline-item {
    flex: 0 0 var(--lane-width);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    row-gap: var(--lane-row-gap);
    padding-bottom: 2rem;
}

.timeline-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background-color: white;
    box-shadow: 0 0 0.5rem 0 var(--color-gray-4);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
    z-index: 1;
}

    .timeline-card :is(.heading, .lead) {
        transition: color 0.3s;
    }

    .timeline-card img {
        transition: filter 0.3s;
    }

    .timeline-card ~ .timeline-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--lane-width) / 2 + calc(var(--lane-col-gap) * 1.5));
        height: 50%;
        border-left: 1px dashed var(--color-secondary);
        border-bottom: 1px dashed var(--color-secondary);
        border-bottom-left-radius: 0.5rem;
        transform: translate(-100%, calc(var(--lane-row-gap) * -1));
        z-index: -1;
    }

.timeline-item:hover .timeline-card {
    background-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 2rem 0 var(--color-primary);
    transform: scale(1.02);
}

    .timeline-item:hover .timeline-card :is(.heading) {
        color: var(--color-ghost);
    }

    .timeline-item:hover .timeline-card :is(p) {
        color: var(--color-gray-4);
    }

    .timeline-item:hover .timeline-card img {
        filter: brightness(0) invert(1);
    }

.timeline-label {
    position: relative;
    padding: 0.5rem 1rem;
    grid-row: 1;
    transition: color 0.3s;
}

    .timeline-label::after {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        background-color: var(--color-gray-1);
        border-radius: 0.5rem;
        transition: background-color 0.3s;
    }

.timeline-item:hover .timeline-label {
    color: var(--color-gray-1);
}

.timeline-item:hover .timeline-label::after {
    background-color: var(--color-secondary);
}

.timeline-label,
.timeline-card {
    grid-column: var(--lane);
}

.timeline-card-title {
    margin-bottom: 0;
    color: var(--color-gray-1);
}

.timeline-controller {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 2rem;
    padding: 1rem;
}

.timeline-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform-origin: right center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.5s var(--ease-inout-expo);
}

.timeline-controller.is-hidden .timeline-control {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

    .timeline-control .label {
        font-family: var(--type-mono);
        color: var(--color-gray-2);
        text-transform: uppercase;
        transition: color 0.3s;
    }

    .timeline-controller.is-hidden .timeline-control .label {
        color: var(--color-ghost);
    }

    .timeline-control .line {
        position: relative;
        width: 4rem;
        height: 1px;
        background-color: var(--color-gray-1);
    }

        .timeline-control .line::after {
            display: none;
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            width: 0.5rem;
            height: 0.5rem;
            background-color: currentColor;
        }

@media (max-width: 1440px) {
}

@media (max-width: 1280px) {
    .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {

    .site-header-nav {
        display: none;
    }

    .grid.grid-2 {
        grid-template-columns: auto;
    }

    .container .section-header {
        padding: 0 0 2rem 0;
    }

    .section-header h1 {
        font-size: 3rem;
    }

    .section-header .subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 667px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .feature-cards {
        grid-template-columns: auto;
    }

    .pricing-cards {
        grid-template-columns: auto;
    }
}

@media (max-width: 375px) {
    .site-logo {
        width: 120px;
    }
}