body {
        font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        transition: background-color 150ms ease-out;
        background-color: white;
    }

    header, footer {
        font-weight: bold;
        padding: 1rem var(--space2);
        inline-size: 100%;
        max-inline-size: 110rem;
        text-decoration: underline;
        text-underline-offset: 0.21em;
        display: flex;
        justify-content: space-between;
    }

    header a {
        color: inherit;
    }

    header a:hover {
        color: inherit;
        opacity: 0.75;
    }

    header .logo {
        max-block-size: 2.25rem;
        object-fit: contain;
        display: inline-block;
        inline-size: auto;
    }

    .feature-section {
        inline-size: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .feature-section > div {
        inline-size: 100%;
        max-inline-size: 110rem;
        padding: var(--space2);
    }

    section.hero {
        inline-size: 100%;
        max-inline-size: 110rem;
        padding: var(--space2);
    }

    .hero h1 {
        margin-block: 0.5em 0px;
        font-weight: 300;
        letter-spacing: normal;
        line-height: 1.15;
    }

    h1 .em {
        font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
        font-weight: 500;
        font-style: italic;
    }

    h1 .semi {
        font-weight: 500;
    }

    h1 .mono {
        font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
        font-weight: 600;
        font-size: 0.96em;
        margin-inline-start: 0.125em;
        letter-spacing: -0.03em;
        word-spacing: -0.2em;
    }

    .paste-html-lottie {
        box-shadow: rgba(61, 61, 61, 0.25) 0px 17px 37px 0px, rgba(61, 61, 61, 0.21) 0px 67px 67px 0px, rgba(61, 61, 61, 0.13) 0px 152px 91px 0px, rgba(61, 61, 61, 0.04) 0px 270px 108px 0px, rgba(61, 61, 61, 0) 0px 421px 118px 0px;
        border-radius: 1rem;
        aspect-ratio: 1024 / 576;
    }

    .cta-container {
        margin-block: 3rem;
        display: flex;
        justify-content: flex-end;
    }

    .cta-bg {
        background: url("images/slanted-lines.svg") center center / contain no-repeat;
        padding: var(--space0) 8em;
        margin-inline-end: 1.5em;
    }

    .cta {
        font-size: 1.75em;
        font-weight: 500;
        padding: 0.35em 2.5em;
        border: 0.05em solid black;
        border-radius: 0.25em;
        color: black;
        text-decoration: none;
        display: inline-block;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 14px 0px, rgba(0, 0, 0, 0.09) 0px 25px 25px 0px, rgba(0, 0, 0, 0.05) 0px 57px 34px 0px, rgba(0, 0, 0, 0.01) 0px 102px 41px 0px, rgba(0, 0, 0, 0) 0px 159px 44px 0px;
        transition: background-color 250ms ease-out;
    }

    .cta:hover {
        background-color: rgb(161, 224, 255);
    }

    .cta > span {
        display: inline-block;
        transition: transform 250ms ease-out;
    }

    .h1-benefit {
        font-weight: 500;
    }

    .description {
        max-inline-size: var(--measure);
    }

    .footer {
        display: flex;
        padding: var(--space0);
        inline-size: 100%;
        margin-block-start: 6em;
        position: relative;
        text-underline-offset: 0.25em;
    }

    #design-system-lottie {
        aspect-ratio: 1389 / 523;
    }

    .tl-columns {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        inline-size: 100%;
        gap: var(--space4);
        padding: var(--space0);
    }

    .tl-column {
        --basis: 50em;
        flex-basis: calc((var(--basis) - 100%) * 1000);
        flex-grow: 1;
        padding: var(--space0);
    }

    .sign-up-btn {
        padding: 0.5em var(--space0);
        margin-block-start: 1em;
        background-color: dodgerblue;
        color: white;
        border-radius: 0.5em;
        inline-size: 100%;
        display: inline-block;
        text-align: center;
        outline: transparent solid 2px;
        outline-offset: 2px;
        transition: outline 150ms;
    }

    .sign-up-btn.free {
        background-color: white;
        color: dodgerblue;
        border: 1px solid dodgerblue;
    }

    .sign-up-btn:hover {
        outline: dodgerblue solid 2px;
        opacity: 0.95;
    }

    .plan-columns {
        padding: 0px;
    }

    .plan-column {
        padding: var(--space2);
        border-radius: 1rem;
        border: 1px solid dodgerblue;
    }

    .plan-column h3 {
        font-weight: 400;
        margin-block-start: 1rem;
    }

    .price {
        color: rgb(118, 118, 118);
        margin-inline-start: 1rem;
    }

    .no-credit-card {
        color: rgb(102, 102, 102);
        inline-size: 100%;
        display: inline-block;
        font-size: 0.875em;
        text-align: center;
    }