@media screen {

    :root {
        /* Primitives */
        --neutral--cool-100: 0 0% 100%; /* HSL = Hue Saturation Lightness */
        --neutral--cool-200: 225 11% 96%;
        --neutral--cool-250: 225 14% 95%;
        --neutral--cool-300: 228 12% 92%;
        --neutral--cool-700: 229 10% 44%;
        --neutral--cool-850: 231 16% 16%;
        --palatinate-600: 230 100% 66%;
        --palatinate-700: 230 82% 61%;
        --palatinate-800: 230 61% 48%;
        --lolsie-600: 339 100% 55%;

        /* Semantic Tokens */
        /* Color */
        --type--neutral-primary: var(--neutral--cool-850);
        --type--neutral-secondary: var(--neutral--cool-700);
        --type--accent-primary: var(--palatinate-700);
        --button--fill--primary: var(--palatinate-600);
        --button--border--primary: var(--palatinate-800);
        --divider--primary: var(--neutral--cool-300);
        --divider--secondary: var(--neutral--cool-250);
        /* Point */
        --point--line: 1px;
        --button-border: 4px;
        --outer-max-width: 1000px;
        --max-width: 500px;
        --gutter: 40px;
        --spacer: var(--gutter);
        --row-gap: calc(var(--gutter) / 4);
    }

    html {
        color: hsl(var(--type--neutral-primary));
        background: hsl(var(--neutral--cool-100));
        scroll-behavior: smooth;
        height: 100%;
        width: 100%;
        font-size: 16px; /* set root rem */
    }

    * {
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        text-decoration: none;
        font-family: system-ui, "segoe-ui", Roboto, Helvetica, Arial, sans-serif;
        font-weight: normal;
        line-height: 1.3;
        letter-spacing: -0.3px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        /* DEV RULER: */
        /*border: 1px solid purple;*/
    }

    /* SEMANTICS —————————————————————————————————————————————————— */

    body {
        position: relative;
        width: 100%;
        scroll-behavior: smooth;
        background: linear-gradient(180deg, hsl(var(--neutral--cool-100)), hsl(var(--neutral--cool-250)));
        overflow-x: hidden;
        overflow-y: auto;
    }

    #page-container {
        position: relative;
        width: 100%;
        z-index: 0;
    }

    .fixed-container {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .fixed-content {
        position: fixed;
        bottom: -45%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        min-width: calc(var(--max-width) + 200px);
        max-width: 1200px;
        opacity: 90%;
        contain: layout;
        z-index: -1;
    }

    #page-content {
        width: 100%;
    }

    main {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .section-gridlines.gridlines--solid.gridlines--top {
        border-top: var(--point--line) solid hsl(var(--divider--primary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--secondary.gridlines--top {
        border-top: var(--point--line) solid hsl(var(--divider--secondary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--right {
        border-right: var(--point--line) solid hsl(var(--divider--primary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--secondary.gridlines--right {
        border-right: var(--point--line) solid hsl(var(--divider--secondary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--bottom {
        border-bottom: var(--point--line) solid hsl(var(--divider--primary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--secondary.gridlines--bottom {
        border-bottom: var(--point--line) solid hsl(var(--divider--secondary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--left {
        border-left: var(--point--line) solid hsl(var(--divider--primary) / 100%);
    }

    .section-gridlines.gridlines--solid.gridlines--secondary.gridlines--left {
        border-left: var(--point--line) solid hsl(var(--divider--secondary) / 100%);
    }

    .section-gridlines.gridlines--dashed.gridlines--top-bottom {
        background-size: 0 100%, 100% 1px, 0 100% , 100% 1px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left-right {
        background-size: var(--point--line) 100%, 100% 0, var(--point--line) 100% , 100% 0;
    }

    .section-gridlines.gridlines--dashed.gridlines--top {
        background-size: 0 100%, 100% var(--point--line), 0 100% , 100% 0;
    }

    .section-gridlines.gridlines--dashed.gridlines--right {
        background-size: 0 100%, 100% 0, var(--point--line) 100% , 100% 0;
    }

    .section-gridlines.gridlines--dashed.gridlines--bottom {
        background-size: 0 100%, 100% 0, 0 100% , 100% var(--point--line);
    }

    .section-gridlines.gridlines--dashed.gridlines--left {
        background-size: var(--point--line) 100%, 100% 0, 0 100% , 100% 0;
    }

    h1, h2, h3 {
        text-align: center;
        font-weight: 600;
    }

    h1 {
        margin-bottom: calc(var(--row-gap) * 1.5);
        font-size: 1.5rem;
    }

    h2 {
        margin-bottom: calc(var(--row-gap) / 2);
        font-size: 1.25rem;
    }

    h3 {
        margin-bottom: calc(var(--row-gap) / 2);
        font-size: 1.125rem;
    }

    p {
        text-align: center;
        font-weight: 500;
    }

    .section {
        padding: var(--spacer) var(--gutter);
    }

    .section-divider:has(.squiggle) {
        display: flex;
        margin: 0 auto;
    }

    .product-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: var(--row-gap);
    }

    img.product-logo {
        width: 90px;
        height: auto;
        filter: drop-shadow(0px 12px 60px rgba(0, 0, 0, 0.08)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.04));
    }

    h1.product-name {
        font-family: "SF Pro Rounded", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-weight: 600;
        margin: 0;
        line-height: 1.5;
    }

    .product-headline {
        display: flex;
        flex-direction: column;
        row-gap: var(--row-gap);
    }

    .desktop {
        display: inline;
    }

    .mobile {
        display: none;
    }

    .product-demo {
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacer) / 1.5);
        padding-top: calc(var(--spacer) / 2);
    }

    img {
        pointer-events: none;
    }

    .product-demo img.bezel {
        width: 100%;
        height: auto;
        z-index: 1;
        /*background-color: red;*/
    }

    .product-demo .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        z-index: 0;
    }

    .product-demo .content img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        border-radius: 120px;
    }

    .caption-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
    }

    .product-cta {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        padding: 0 var(--gutter) var(--spacer);
    }

    button {
        display: block;
    }

    button.primaryButtonCTA {
        margin-right: 0;
        margin-top: 4px;
        position: relative;
        border: none;
        background: transparent;
        padding: 0;
        outline-offset: 4px;
        transition: filter 600ms;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        white-space: nowrap;
    }

    button.primaryButtonCTA > .shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background: hsl(0 0% 5% / 0.15);
        filter: blur(10px);
        will-change: transform;
        transform: translateY(2px);
        transition:
            transform
            600ms
            cubic-bezier(.3, .7, .4, 1);
    }

    button.primaryButtonCTA > .edge {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(
            to left,
            hsl(var(--palatinate-800)) 0%,
            hsl(var(--palatinate-800)) 8%,
            hsl(var(--palatinate-800)) 92%,
            hsl(var(--palatinate-800)) 100%
        );
    }

    button.primaryButtonCTA > .front {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
        position: relative;
        padding: 9px 20px;
        border-radius: 999px;
        font-family: "SF Pro Rounded", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-weight: 600;
        font-size: 1.125rem;
        line-height: 1.5rem;
        color: hsl(var(--neutral--cool-100));
        background: linear-gradient(
            to bottom,
            hsl(var(--palatinate-600)) 0%,
            hsl(var(--palatinate-600)) 75%
        );
        will-change: transform;
        transform: translateY(-3px);
        transition:
            transform
            600ms
            cubic-bezier(.3, .7, .4, 1);
    }

    button.primaryButtonCTA:hover {
        transition: filter 250ms;
        filter: brightness(105%);
    }

    button.primaryButtonCTA:hover .front {
        color: hsl(var(--neutral--cool-100) / 100%);
        transform: translateY(-5px);
        transition:
            transform
            250ms
            cubic-bezier(.3, .7, .4, 1.5);
    }

    button.primaryButtonCTA:active .front {
        transform: translateY(0px);
        transition: transform 34ms;
    }

    button.primaryButtonCTA:hover .shadow {
        transform: translateY(8px);
        transition:
            transform
            250ms
            cubic-bezier(.3, .7, .4, 1.5);
        background: hsl(var(--palatinate-800) / 0.25);
    }

    button.primaryButtonCTA:active .shadow {
        transform:
            translateY(5px)
            scale(1.15);
        background: hsl(var(--lolsie-600) / 0.15);
        transition: transform 34ms;
    }

    button.primaryButtonCTA > span.front > img.icon, button.primaryButtonCTA > span.front > img.icon-hover, button.primaryButtonCTA > span.front > img.icon-active {
        width: 1rem;
        height: 1rem;
    }

    button.primaryButtonCTA > span.front > img.icon-hover, button.primaryButtonCTA > span.front > img.icon-active {
        display: none;
    }

    button.primaryButtonCTA:hover > span.front > img.icon, button.primaryButtonCTA:hover > span.front > img.icon-active {
        display: none;
    }

    button.primaryButtonCTA:hover > span.front > img.icon-hover {
        display: flex;
    }

    button.primaryButtonCTA:active > span.front > img.icon, button.primaryButtonCTA:active > span.front > img.icon-hover {
        display: none;
    }

    button.primaryButtonCTA:active > span.front > img.icon-active {
        display: flex;
    }

    footer p {
        padding: var(--spacer) var(--gutter);
        color: hsl(var(--type--neutral-secondary));
        font-size: 0.875rem;
        font-weight: 500;
    }

    footer a.link-inline {
        position: relative;
        color: hsl(var(--type--neutral-secondary));
        text-decoration: underline;
        text-decoration-color: hsl(var(--type--neutral-secondary) / 20%);
        text-decoration-style: solid;
        text-decoration-thickness: .1em;
        text-underline-offset: 0.25em;
        padding: 2px 0 4px 0;
        transition: all 150ms ease 0s;
        white-space: nowrap;
    }

    footer a.link-inline:hover {
        color: hsl(var(--type--neutral-secondary));
        text-decoration-color: hsl(var(--type--neutral-secondary) / 75%);
    }

    /* HELPERS —————————————————————————————————————————————————— */

    .cursor--none {
        cursor: none !important;
    }

    .cursor--auto {
        cursor: auto;
    }

    .cursor--pointer {
        cursor: pointer;
    }

    .placeholder-actual {
        display: none;
    }

    .display--none {
        display: none;
    }

    .outer-max-width {
        max-width: var(--outer-max-width);
    }

    .max-width {
        max-width: var(--max-width);
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
    }

    .left {
        margin-left: 0;
        text-align: left;
        justify-content: left;
    }

    .center {
        margin: 0 auto;
        text-align: center;
        justify-content: center;
    }

    .right {
        margin-right: 0;
        text-align: right;
        justify-content: right;
    }

    .color--neutral-primary {
        color: hsl(var(--type--neutral-primary));
    }

    .color--neutral-secondary {
        color: hsl(var(--type--neutral-secondary));
    }

    .color--accent {
        color: hsl(var(--type--accent-primary));
        font-weight: inherit;
    }

}

@media (max-width: 1000px) {
    .fixed-content {
        bottom: -40%;
        min-width: 115%;
    }
}

@media (max-width: 800px) {
    .fixed-content {
        bottom: -50%;
        min-width: 150%;
    }
}

@media (max-width: 600px) {
    .fixed-content {
        bottom: -60%;
        min-width: 200%;
    }
}

@media (max-width: 500px) {
    .fixed-content {
        bottom: -25%;
        min-width: 150%;
    }
}

@media (max-width: 380px) {

    .desktop {
        display: none;
    }

    .mobile {
        display: inline;
    }

    .fixed-content {
        bottom: -20%;
        min-width: 200%;
    }

}