/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {

    @layer misc {

        /* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
        :root {
            overscroll-behavior-y: contain;
        }
    }

    @layer layout {

        /* Draw a particles ring in the background of the welcome screen */
        /* I am using Houdini PaintWorklets for this */
        @layer ring-particles {
            @supports (background: paint(something)) {
                @layer particles {
                    #welcome {
                        --ring-radius: 100;
                        --ring-thickness: 600;
                        --particle-count: 80;
                        --particle-rows: 25;
                        --particle-size: 2;
                        --particle-color: navy;

                        --particle-min-alpha: 0.1;
                        --particle-max-alpha: 1.0;

                        --seed: 200;

                        background-image: paint(ring-particles);
                    }
                }

                @layer animation {
                    @property --animation-tick {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 0;
                    }

                    @property --ring-radius {
                        syntax: '<number> | auto';
                        inherits: false;
                        initial-value: auto;
                    }

                    @keyframes ripple {
                        0% {
                            --animation-tick: 0;
                        }

                        100% {
                            --animation-tick: 1;
                        }
                    }

                    @keyframes ring {
                        0% {
                            --ring-radius: 150;
                        }

                        100% {
                            --ring-radius: 250;
                        }
                    }

                    #welcome {
                        animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
                    }
                }

                @layer follow-mouse {
                    @property --ring-x {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    @property --ring-y {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    @property --ring-interactive {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 0;
                    }

                    #welcome {
                        /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
                        transition: --ring-x 3s ease,
                            --ring-y 3s ease;

                        /* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
                        /* transition-duration: if(
							style(--ring-interactive: 1): 0.25s;
							else: 3s;
						); */

                    }
                }
            }
        }

        /* Draw some dynamic noise behind some of the screens */
        /* I am using Houdini PaintWorklets for this */
        @layer speckled-backgrounds {
            @supports (background: paint(something)) {

                #beforeyougo .card,
                #who>div {
                    --extra-confettiNumber: 250;
                    --extra-confettiLengthVariance: 1;
                    --extra-confettiWeightVariance: 1;
                    background-image: paint(extra-confetti);
                }
            }
        }

        @layer product {
            /* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
        }
    }

    @layer components {
        @layer button {

            /* Buttons in .dark containers have inverted colors */
            @scope (.dark) {
                button {
                    color: var(--theme-surface-on-surface);
                    background: var(--theme-primary-on-primary);
                    border: 1px solid var(--theme-outline-variant);

                    &:hover,
                    &:focus-visible {
                        background: var(--theme-button-secondary-hover);
                    }

                    &.secondary {
                        color: var(--theme-surface-surface);
                        background: var(--theme-nav-button-hover);

                        &:hover,
                        &:focus-visible {
                            background: var(--theme-button-secondary-inverse-hover);
                        }
                    }
                }
            }
        }

        @layer navbar {

            /* Anchor the mobile nav underneath the header */
            @layer mobile {
                @media (width < 930px) {
                    header {
                        anchor-name: --header;
                    }

                    header nav {
                        position: fixed;
                        inset: auto;
                        top: 0;
                        /* Undo non-modern-CSS styling */
                        position-anchor: --header;
                        position-area: bottom;
                        justify-self: stretch;
                        align-self: stretch;
                    }
                }
            }

            /* Animate-in the nav on mobile when showing */
            @layer mobile {
                @media (width < 930px) {
                    header nav {
                        transition: opacity .15s ease-in;

                        @starting-style {
                            opacity: 0;
                        }
                    }
                }
            }

            /* Don’t scroll page when menu is open */
            @media (width < 930px) {
                header:has(.menu-checkbox:checked) {

                    &,
                    & nav {
                        overflow: auto;
                        overscroll-behavior: contain;
                    }
                }
            }

            /* Hidey bar – http://brm.us/hidey-bar-2 */
            @layer hidey-bar {
                html {
                    container-type: scroll-state;
                }

                .header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
                    transition: translate 0.25s;
                    translate: 0 0;

                    @container scroll-state(scrolled: bottom) {
                        translate: 0 -100%;
                    }
                }
            }
        }

        @layer carousel {
            @layer scroll-snapping {
                @layer base-setup {
                    @supports (scroll-padding-inline: 3rem) {
                        .carousel {
                            scroll-padding-inline: 3rem;
                            scroll-snap-type: x mandatory;

                            >* {
                                scroll-snap-align: start;
                            }

                            /* @NOTE: On the orignal page the last item also snaps to the left */
                            /* To get this working, I’d manually add some padding to the right */
                            /* Defining that “some” is tricky and requires manual calculation */
                            /* Here I am calculating 40vi (because the entries are 60vi) minus gap */
                            /* So maybe we should have `auto` on scroll-padding do something? */
                            @media (width >=930px) {
                                padding-inline: 3rem calc(40vi - 3rem);
                            }
                        }
                    }
                }

                @layer snapped-effects {
                    /* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */

                    .carousel>* {
                        container-type: scroll-state;

                        @supports (container-type: scroll-state) {

                            /* The images */
                            >figure {
                                opacity: .25;
                                transition: opacity .5s ease;

                                @container scroll-state(snapped: x) {
                                    opacity: 1;
                                }
                            }

                            /* The bylines */
                            >*:not(figure) {
                                transition: opacity .5s ease, translate .5s ease;
                                transition-delay: 0s;
                                opacity: 0;
                                translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

                                @container scroll-state(snapped: x) {
                                    transition-delay: 0.2s;
                                    /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
                                    opacity: 1;
                                    translate: 0 0 0;
                                }
                            }
                        }
                    }
                }
            }

            @layer niceties {
                .carousel {
                    scrollbar-width: none;
                    overscroll-behavior-x: contain;
                }
            }

            @layer scroll-buttons {

                /* @note: https://chrome.dev/carousel-configurator/ really helps here */
                .carousel {
                    position: relative;
                    scroll-behavior: smooth;
                    anchor-name: --carousel;

                    &::scroll-button(*) {
                        position: fixed;
                        position-anchor: --carousel;
                        position-visibility: always;
                        font-family: "Material Symbols Outlined";

                        color: var(--theme-surface-on-surface);
                        background: var(--theme-tonal-tonal);
                        border: none;
                        block-size: 2.5em;
                        font-size: 1.1em;
                        inline-size: 2.5em;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        border-radius: 999px;
                        z-index: 10;
                        transition: all 0.25s ease;
                    }

                    /* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
                    &::scroll-button(*):hover {
                        background: #eff0f3;
                    }

                    &::scroll-button(*):disabled {
                        cursor: not-allowed;
                        opacity: 0.25;
                    }

                    /* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
                    &::scroll-button(left) {
                        content: 'arrow_back';
                    }

                    &::scroll-button(right) {
                        content: 'arrow_forward';
                    }

                    @media (width < 930px) {

                        &::scroll-button(left),
                        &::scroll-button(right) {
                            position-area: center center;
                            align-self: end;
                        }
                    }

                    @media (width >=930px) {

                        &::scroll-button(left),
                        &::scroll-button(right) {
                            position-area: center right;
                            align-self: end;
                            justify-self: end;
                            margin: 3rem;
                        }

                        &::scroll-button(left) {
                            margin-right: 6.5rem;
                        }
                    }
                }
            }
        }
    }

    @layer animations {
        @layer revealing-welcome-items {
            #welcome {

                svg,
                .cta {
                    transition: translate 0.5s ease, opacity 0.5s ease;

                    @starting-style {
                        translate: 0 50% 0;
                        opacity: 0;
                    }
                }
            }
        }

        @layer scroll-triggered-typewriter-effect {
            @supports (timeline-trigger-name: --t) {

                /* @ref https://codepen.io/bramus/pen/JjwxLNM */
                @keyframes blink {
                    from {
                        opacity: 0;
                    }
                }

                @keyframes text {
                    from {
                        background-size: 0
                    }
                }

                /* Typewriter effect */
                .typewriter {
                    background:
                        /* highlight text */
                        linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat
                        /* faded text */
                        transparent;
                    -webkit-background-clip: text;
                    color: transparent;
                    animation: text 2s ease-in both;

                    &::after {
                        content: "|";
                        --hdr-gradient: linear-gradient(in oklch,
                                oklch(80% .3 34),
                                oklch(90% .3 200));
                        --sdr-gradient: linear-gradient(#ff4700, #0ff);

                        background: var(--hdr-gradient);
                        background-clip: text;
                        color: transparent;

                        /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
                        animation: blink 0.2s 1.4s ease infinite alternate both;
                    }
                }

                /* Typewriter Trigger in product section */
                #product *:has(> .typewriter) {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;

                    .typewriter {
                        animation-trigger: --t play-once;

                        &::after {
                            animation-trigger: --t play-once;
                            animation-delay: 1.6s;
                        }
                    }
                }

                /* Typewriter Trigger in Carousel */
                .carousel>* {
                    timeline-trigger: --t view(inline) entry 90% exit 50%;
                    trigger-scope: --t;

                    .typewriter {
                        --typewriter-text-color: white;
                        animation-trigger: --t play-forwards reset;
                        animation-duration: 1.5s;

                        &::after {
                            animation-trigger: --t play-forwards reset;
                            animation-delay: 0.9s;
                        }
                    }
                }

                /* Typewriter Trigger in Before You Go */
                #beforeyougo>.card {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;

                    .typewriter {
                        --typewriter-text-color: white;
                        animation-trigger: --t play-once;
                        animation-duration: 2s;

                        &::after {
                            animation-trigger: --t play-once;
                            animation-delay: 1s;
                        }
                    }
                }
            }
        }

        @layer moving-icons {
            @layer slide-in {
                @keyframes slide-in {
                    from {
                        translate: 100% 0 0;
                    }
                }

                #product .icons {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;
                    animation: slide-in 1s ease both;
                    animation-trigger: --t play-once;
                }
            }

            @layer wobble {
                @keyframes wobble {
                    from {
                        translate: 0 75%;
                    }

                    to {
                        translate: 0 -75%;
                    }
                }

                #product .icon {
                    /* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
                    animation: wobble 4s ease infinite alternate;
                    animation-delay: calc(mod(sibling-index(), 5) * -1s);
                }
            }
        }

        @layer product-features {

            /* Scroll-triggered fading of the text + images */
            @supports (timeline-trigger-name: --t) {
                @keyframes fade-a-bit {
                    from {
                        opacity: 0.3;
                    }

                    to {
                        opacity: 1;
                    }
                }

                @keyframes fake-clip-it {
                    to {
                        scale: 100% 0%;
                    }
                }

                @keyframes fade-in {
                    from {
                        opacity: 0;
                    }
                }

                @media (width >=930px) {
                    #features .feature {
                        timeline-trigger: --t view() entry 100% cover 50%;
                        trigger-scope: --t;

                        h3 {
                            animation: fade-a-bit 500ms ease both;
                            animation-trigger: --t play-forwards play-backwards;
                        }

                        p {
                            position: relative;

                            &::after {
                                content: '';
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                height: 100%;
                                transform-origin: 0 100%;
                                background: white;
                                animation: fake-clip-it 500ms ease both;
                                animation-trigger: --t play-forwards play-backwards;
                            }
                        }

                        /* Exclude the first one, because that one is always visible */
                        img:not(.feature:first-child img) {
                            animation: fade-in 500ms ease both;
                            animation-trigger: --t play-forwards play-backwards;
                            /* TODO: Don’t fade out the underlying ones */
                        }
                    }
                }
            }

            /* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
        }

        @layer scroll-driven-animations {

            /* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
            @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
                @keyframes scale-up {
                    from {
                        scale: 0.85;
                    }
                }

                #beforeyougo .card {
                    animation: scale-up linear both;
                    animation-timeline: view();
                    animation-range: entry 50% entry 100%;
                }
            }
        }
    }
}

@layer components {
    @layer button {
        button {
            background: var(--theme-primary-primary);
            color: var(--theme-primary-on-primary);
            border: 0px;
            border-radius: 999px;
            padding: 0.6em 1.5em;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 0.4rem;

            font-size: 0.9em;

            cursor: pointer;
            transition: .15s background ease-out;

            &:hover,
            &:focus-visible {
                background: var(--theme-button-states-primary-hovered);
            }

            &:has(span + .material-symbols-outlined) {
                padding-inline-end: 1em;
            }

            &:has(.material-symbols-outlined + span) {
                padding-inline-start: 1em;
            }

            &.secondary {
                color: var(--theme-surface-on-surface);
                background: var(--theme-secondary-button);
                border: 1px solid var(--theme-outline-variant);

                &:hover,
                &:focus-visible {
                    background: var(--theme-button-secondary-hover);
                }
            }
        }
    }

    @layer navbar {
        @layer shared {
            nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .menu-checkbox {
                display: none;
            }

            nav a {
                color: var(--theme-surface-on-surface);
                transition: .15s color ease-out, .15s background ease-out;
                text-decoration: none;

                &:hover,
                &:focus-visible {
                    color: #000;
                    background: var(--theme-button-states-hovered);
                }
            }
        }

        @layer mobile {
            @media (width < 930px) {
                .menu-button {
                    cursor: pointer;
                    width: 3.5em;
                    border-radius: 999px;
                    text-align: center;
                    place-content: center;

                    transition: .15s background ease-out;

                    &:hover,
                    &:focus-visible {
                        background: var(--theme-button-states-hovered);
                    }
                }

                nav {
                    display: none;
                }

                nav li {
                    font-size: 1.85em;
                    font-weight: 350;
                    border-bottom: 1px solid var(--theme-surface-surface-container-higher);

                    &:first-child {
                        border-top: 1px solid var(--theme-surface-surface-container-higher);
                    }
                }

                nav a {
                    display: block;

                    padding-inline: 3rem;
                    padding-block: 1.5rem;
                }

                /* When the menu toggle is checked */
                .menu-checkbox:checked {

                    /* Show the nav */
                    &~nav {
                        position: fixed;
                        inset: 0;
                        top: 2.75em;
                        /* This is a guess for how tall the topbar is */
                        display: block;
                        background: var(--palette-grey-0);
                    }

                    /* Show the proper icon in the button */
                    &~.menu-button {
                        [data-show-when="closed"] {
                            display: none !important;
                        }
                    }

                    /* Colorize the button differently */
                    &~.menu-button {
                        background: var(--theme-primary-primary);
                        color: var(--theme-primary-on-primary);

                        &:hover,
                        &:focus-visible {
                            background: var(--theme-button-states-primary-hovered);
                        }
                    }
                }

                /* When the menu toggle is not checked */
                .menu-checkbox:not(:checked) {

                    /* Show the proper icon in the button */
                    &~.menu-button {
                        [data-show-when="open"] {
                            display: none !important;
                        }
                    }
                }

                /* Hide the download button */
                header button {
                    display: none;
                }
            }
        }

        /* Large Menu */
        @layer large {
            @media (width >=930px) {
                nav ul {
                    display: flex;
                    flex-direction: row;
                    gap: 0.2rem;
                    align-self: flex-start;
                }

                nav a {
                    padding: 0.6em 1.2em;
                    border-radius: 999px;
                    color: var(--theme-surface-on-surface-variant);
                    white-space: nowrap;

                    &:hover,
                    &:focus-visible {
                        color: #000;
                        background: var(--theme-nav-button-hover);
                    }
                }

                .menu-button {
                    display: none;
                }
            }
        }
    }

    @layer card {
        .card {
            border-radius: 2em;

            &.dark {
                background: var(--theme-primary-primary);
                color: var(--theme-surface-surface);
            }
        }
    }
}

@layer layout {
    @layer grid {
        body {
            margin: 0;
            display: grid;
            grid-template-columns:
                [fullbleed-start] 3rem [main-start] 1fr [main-end] 3rem [fullbleed-end];
            grid-auto-rows: min-content;
        }

        body>* {
            grid-column: fullbleed;
        }
    }

    @layer navigation {
        .header-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;

            background: rgba(255, 255, 255, 0.01);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1000;
            grid-row: 1;
        }

        header {
            display: flex;
            flex-direction: row;
            gap: 2rem;
            align-items: center;

            padding-inline: 3rem;
            /* @TODO: Figure out if we can subgrid for this */
            padding-block: 0.5rem;

            button,
            .menu-button {
                margin-left: auto;
            }
        }
    }

    @layer welcome {
        #welcome {
            grid-row: 1;
            padding-top: 5rem;

            h1 img {
                display: block;
                margin: 0 auto;
                animation: hero-float 6s ease-in-out infinite;
                filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
            }

            @keyframes hero-float {

                0%,
                100% {
                    transform: translateY(0) scale(1);
                }

                50% {
                    transform: translateY(-15px) scale(1.02);
                }
            }

            p {
                margin-top: 0.5rem;
                font-size: 4.5em;
                text-align: center;
                font-weight: 500;

                color: var(--theme-surface-on-surface);

                span {
                    display: block;
                    font-size: 0.7em;
                    color: var(--theme-surface-on-surface-variant);
                }
            }

            .cta {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.3em;
                justify-content: center;

                width: 90%;
                margin: 0 auto;

                button {
                    font-size: 1.15em;
                }
            }
        }
    }

    @layer video {
        #video {
            padding: 0 1em;

            iframe {
                width: 100%;
                height: auto;
                aspect-ratio: 16/9;
                max-height: 75vh;

                border-radius: 2em;
                overflow: clip;
            }
        }
    }

    @layer scroll-video {
        #scroll-video {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 4rem 3rem;
            overflow: hidden;
            text-align: center;
        }

        .video-context {
            font-size: 1.5em;
            font-weight: 400;
            color: var(--theme-surface-on-surface);
            margin-bottom: 2rem;
        }

        .video-container {
            width: 100%;
            max-width: 1400px;
            border-radius: 2em;
            overflow: hidden;
            will-change: transform;
            transition: transform 0.1s ease-out;
        }

        .video-container video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 2em;
        }
    }

    @layer product {
        #product {

            display: grid;
            grid-template-columns: subgrid;

            >*:not(.icons) {
                grid-column: main;
            }

            .icons {
                grid-column: fullbleed;
            }

            .services-intro {
                text-align: center;
                font-size: 1.2em;
                color: var(--theme-surface-on-surface-variant);
                margin-bottom: 1.5rem;
                font-weight: 400;
            }

            .icons {
                height: max(24em, 40vb);

                display: flex;
                flex-direction: row;
                gap: 0.5rem;
                align-items: center;

                overflow-x: clip;

                .icon {
                    flex: 0 0 clamp(4rem, 10vw, 6rem);
                    aspect-ratio: 1;
                    border-radius: 50%;

                    background: #b7bfd917;
                    border: 1px solid var(--theme-outline-variant);
                    backdrop-filter: blur(5px);

                    display: grid;
                    place-content: center;

                    span {
                        font-size: 2em !important;
                    }
                }
            }
        }

        #features {

            .feature {
                padding-bottom: 2rem;
                /* @note: if only we had `gap: x y;` */

                h3 {
                    font-weight: 350;
                    font-size: 1.25em;
                    line-height: 1.1;
                    margin-block-end: 1rem;
                }

                img,
                video {
                    border-radius: 2em;
                    width: 100%;
                    height: auto;
                    display: block;
                }

                p {
                    font-weight: 300;
                    line-height: 1.2;
                    color: var(--theme-surface-on-surface-variant);
                }
            }


            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: auto;
            gap: 2rem;


            @media (width >=930px) {
                .feature {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 2rem;
                    align-items: center;
                }

                .img-wrapper {
                    order: 2;
                }

                .content {
                    order: 1;
                }
            }
        }
    }

    @layer we-dont {
        #we-dont {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 8rem 2rem;
            max-width: 80ch;
            margin: 0 auto;
        }

        #we-dont h2 {
            font-size: clamp(2rem, 8vw, 3.5rem);
            font-weight: 350;
            line-height: 1;
            margin-bottom: 4rem;
            text-wrap: balance;
        }

        #we-dont ul {
            list-style: none;
            padding: 0;
            margin: 0 0 4rem 0;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        #we-dont li {
            font-size: 1.25rem;
            font-weight: 300;
            color: var(--theme-surface-on-surface-variant);
            letter-spacing: 0.02em;
        }

        #we-dont p {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--theme-surface-on-surface);

            margin-top: 2rem;
            padding: 3rem 2rem 0;
            border-top: 1px solid var(--theme-outline-variant);

            width: 100%;
            max-width: 600px;

            position: relative;
        }

        #we-dont p::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            translate: -50% 0;
            width: 80px;
            height: 3px;
            background: #ff0000;
        }
    }

    @layer developers {
        #developers {
            width: 100%;
            border-top: 1px solid var(--theme-outline-variant);
            margin-top: 2em;
            padding-top: 2em;

            display: grid;
            grid-template-columns: subgrid;

            >*:not(.carousel) {
                grid-column: main;
            }

            .intro {
                color: var(--theme-surface-on-surface-variant);
                font-size: 1.1em;
                line-height: 1.2;
                font-weight: 320;
                padding: 0.5rem 0;

                @media (width >=930px) {
                    width: calc(30vw - 1.5rem);
                    /* TODO: This magic value is not entirely 100% accurate. Maybe if we used a cols layout throughout the site it would work nicely */
                    margin-left: auto;
                }
            }

            .carousel {
                grid-column: fullbleed;
                padding-inline: 3rem;
                width: 100%;

                overflow-x: scroll;

                display: flex;
                gap: 2rem;

                .developer {
                    flex: 0 0 100%;
                    overflow: clip;

                    @media (width >=930px) {
                        flex-basis: 60vi;
                    }

                    figure {
                        display: grid;
                        place-items: center;

                        >* {
                            grid-area: 1 / 1;
                        }

                        figcaption {
                            color: white;
                            font-size: 2em;
                            font-weight: 500;
                            grid-area: 1 / 1;
                            align-self: center;
                            justify-self: flex-start;
                            margin-left: 2rem;
                            z-index: 2;
                            line-height: 1.2;
                            text-align: left;
                            max-width: 8ch;
                            word-break: break-word;
                            position: relative;
                            min-height: 2.4em;
                        }

                        figcaption::after {
                            content: '|';
                            animation: blink 0.7s infinite;
                            margin-left: 2px;
                        }

                        @keyframes blink {

                            0%,
                            50% {
                                opacity: 1;
                            }

                            51%,
                            100% {
                                opacity: 0;
                            }
                        }

                        .overlay-icon {
                            grid-area: 1 / 1;
                            align-self: flex-end;
                            justify-self: flex-end;
                            margin: 1.5rem;
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            padding: 0.5rem 1rem;
                            background: rgba(255, 255, 255, 0.1);
                            backdrop-filter: blur(10px);
                            border-radius: 999px;
                            color: white;
                            font-size: 0.9em;
                            z-index: 2;
                            opacity: 0.8;
                            transition: opacity 0.3s ease;

                            &:hover {
                                opacity: 1;
                            }

                            .material-symbols-outlined {
                                font-size: 1.25em;
                            }
                        }
                    }

                    img {
                        border-radius: 2em;
                        display: block;
                        width: 100%;
                    }

                    /* Gradient Overlay */
                    figure::after {
                        content: '';
                        grid-area: 1 / 1;
                        width: 100%;
                        height: 100%;
                        border-radius: 2em;
                        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
                        z-index: 1;
                    }

                    h3 {
                        font-weight: 350;
                        font-size: 1.25em;
                        line-height: 1.1;
                        margin-block-end: 0.5rem;
                    }

                    p {
                        width: 40%;
                        text-wrap: pretty;
                        color: var(--theme-surface-on-surface-variant);
                        letter-spacing: 0.05rem;
                        font-weight: 300;
                    }

                    a {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 0.25em;

                        color: var(--theme-surface-on-surface-variant);
                        text-decoration: none;
                        font-weight: 300;

                        transition: gap 0.15s ease-in;

                        &:hover,
                        &:focus-visible {
                            gap: 0.5em;
                        }

                        &::after {
                            font-family: 'Material Symbols Outlined';
                            font-weight: normal;
                            font-style: normal;
                            font-size: 24px;
                            line-height: 1;
                            letter-spacing: normal;
                            text-transform: none;
                            display: inline-block;
                            white-space: nowrap;
                            word-wrap: normal;
                            direction: ltr;
                            -webkit-font-feature-settings: 'liga';
                            -webkit-font-smoothing: antialiased;

                            content: "\f46a";
                        }
                    }
                }
            }
        }
    }

    @layer testimonials {
        #testimonials {
            padding: 8rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
            border-top: 1px solid var(--theme-outline-variant);

            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #testimonials .section-header {
            text-align: left;
            margin-bottom: 6rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }

        #testimonials h2 {
            text-align: left;
            font-size: clamp(2.2rem, 6vw, 3.2rem);
            font-weight: 350;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            width: 100%;
        }

        #testimonials .subheadline {
            font-size: 1.15rem;
            color: var(--theme-surface-on-surface-variant);
            font-weight: 300;
            text-align: left;
        }

        .testimonials-wrapper {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
        }

        #testimonials-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            gap: 0;
            margin-bottom: 2rem;
            -ms-overflow-style: none;
            scrollbar-width: none;
            width: 100%;
            max-width: 800px;
        }

        #testimonials-grid::-webkit-scrollbar {
            display: none;
        }

        .nav-btn {
            background: none;
            border: none;
            color: var(--theme-surface-on-surface-variant);
            cursor: pointer;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease, opacity 0.2s ease;
            opacity: 0.5;
            z-index: 10;
        }

        .nav-btn:hover {
            opacity: 1;
            color: var(--theme-primary-primary);
        }

        .nav-btn span {
            font-size: 2.5rem !important;
        }

        @media (max-width: 768px) {
            .nav-btn {
                display: none;
                /* Rely on touch scrolling on mobile */
            }
        }

        .testimonial {
            flex: 0 0 100%;
            scroll-snap-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            box-sizing: border-box;
        }

        .testimonial .quote {
            font-size: clamp(1.4rem, 4vw, 2.2rem);
            line-height: 1.4;
            font-weight: 350;
            color: var(--theme-surface-on-surface);
            margin: 0;
            max-width: 35ch;
            text-wrap: balance;
        }

        .testimonial .author-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 3rem;
        }

        .testimonial .author {
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--theme-surface-on-surface);
        }

        .testimonial .context {
            font-size: 0.85rem;
            color: var(--theme-surface-on-surface-variant);
            font-weight: 300;
        }

        #testimonials .cta-container {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
    }

    @layer decision-clarity {
        #decision-clarity {
            padding: 10rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #decision-clarity .section-header {
            text-align: left;
            margin-bottom: 6rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #decision-clarity h2 {
            text-align: left;
            font-size: clamp(2.2rem, 6vw, 3.2rem);
            font-weight: 350;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            width: 100%;
        }

        #decision-clarity .subheadline {
            font-size: 1.15rem;
            color: var(--theme-surface-on-surface-variant);
            font-weight: 300;
            text-align: left;
        }

        #decision-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4rem;
            width: 100%;
            max-width: 1100px;

            @media (min-width: 930px) {
                grid-template-columns: 1fr 1fr;
                gap: 8rem;
            }
        }

        .decision-col {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .decision-col h3 {
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--theme-surface-on-surface);
            margin: 0;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--theme-outline-variant);
        }

        .decision-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .decision-col li {
            font-size: 1.1rem;
            line-height: 1.5;
            color: var(--theme-surface-on-surface-variant);
            position: relative;
            padding-left: 1.5rem;
        }

        .decision-col li::before {
            content: "—";
            position: absolute;
            left: 0;
            color: var(--theme-outline);
        }

        .decision-col .cta-container {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .decision-col button {
            width: fit-content;
            padding: 0.8rem 2rem;
            font-size: 1rem;
        }

        .decision-col .intent {
            font-size: 0.85rem;
            color: var(--theme-surface-on-surface-variant);
            font-weight: 300;
            margin: 0;
        }

        .decision-col.not-fit h3,
        .decision-col.not-fit li {
            opacity: 0.7;
        }
    }

    @layer who {
        #who {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 8rem 2rem;

            @media (width >=930px) {
                flex-direction: row;
                justify-content: center;
                gap: 10vw;
                padding: 12rem 2rem;
            }

            >div {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2.5rem;
                padding: 4rem 0;

                @media (width >=930px) {
                    flex: 1;
                    max-width: 450px;
                    padding: 0;
                }
            }

            h3 {
                font-weight: 350;
                font-size: clamp(1.75rem, 5vw, 2.75rem);
                line-height: 1.2;
                margin: 0;

                span {
                    display: block;
                    font-size: 0.6em;
                    font-weight: 300;
                    margin-top: 1rem;
                    color: var(--theme-surface-on-surface-variant);
                    letter-spacing: 0.05em;
                }
            }

            button {
                font-size: 1.1rem;
                padding: 0.8em 2rem;
                justify-self: center;
            }
        }
    }

    @layer beforeyougo {
        #beforeyougo {
            display: grid;
            grid-template-columns: subgrid;

            height: min-content;

            >* {
                grid-column: main;
            }

            .card {
                width: 100%;
                height: auto;
                aspect-ratio: 4/3;
                max-height: 80vh;

                display: grid;
                padding: 4em;
                gap: 1rem;

                align-content: center;
            }

            p {
                font-size: 2em;
                text-wrap: pretty;
                margin: 0;
                max-width: 20ch;

                @media (width > 930px) {
                    font-size: 3em;
                }
            }

            .buttons {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                font-size: 1.2em;
                align-items: start;

                @media (width > 930px) {
                    flex-direction: row;
                }
            }
        }
    }
}

@layer base {
    html {
        background: var(--theme-surface-surface);
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 400;

        font-size: 16px;

        color: var(--theme-surface-on-surface);
    }

    section {
        /* Make sections fullheight */
        min-height: 100dvh;

        &.center {
            /* Center their contents */
            place-content: safe center;
            justify-items: center;
        }
    }

    h2 {
        font-size: 2.5em;
        font-weight: 350;
        margin: 0.5rem 0;
        line-height: 1;

        @media (width >=930px) {
            width: 50%;
            max-width: 25ch;
        }
    }

    p {
        color: var(--theme-surface-on-surface-variant);
    }

    @scope (.dark) {
        p {
            color: var(--theme-surface-surface);
        }
    }
}

@layer reset {

    html,
    body {
        height: 100%;
    }

    * {
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    ul[class] {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    input,
    textarea,
    select,
    button {
        font-family: inherit;
        font-size: inherit;
    }

    a:focus-visible,
    button:focus-visible {
        outline-offset: 0.2rem;
    }

    figure {
        margin: 0;
    }
}

@layer util {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .not-sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@layer tokens {
    @layer colors {
        :root {
            --palette-grey-900: #2F3034;
            --palette-grey-800: #45474D;
            --palette-grey-50: #E6EAF0;
            --palette-grey-0: #FFFFFF;
            --palette-grey-1000: #212226;
            --palette-grey-20: #EFF2F7;
            --palette-grey-1200: #121317;
            --palette-grey-1100: #18191D;
            --palette-grey-10: #F8F9FC;
            --palette-grey-100: #E1E6EC;
            --palette-grey-200: #CDD4DC;
            --palette-grey-300: #B2BBC5;
            --palette-grey-400: #B7BFD9;
            --palette-grey-600: #AAB1CC4D;
            --palette-grey-1000-12: #dedfe2;
            --palette-grey-50-20: #414347;
            --palette-grey-15: #F0F1F5;
            --palette-grey-0-rgb: 255, 255, 255;
            --palette-grey-50-rgb: 230, 234, 240;
            --palette-grey-400-rgb: 183, 191, 217;
            --palette-grey-600-rgb: 170, 177, 204;
            --palette-grey-1000-rgb: 33, 34, 38;
            --palette-grey-1200-rgb: 18, 19, 23;
            --theme-surface-surface: var(--palette-grey-0);
            --theme-surface-on-surface: var(--palette-grey-1200);
            --theme-surface-on-surface-variant: var(--palette-grey-800);
            --theme-surface-surface-container: var(--palette-grey-10);
            --theme-surface-surface-container-high: var(--palette-grey-20);
            --theme-surface-surface-container-higher: var(--palette-grey-50);
            --theme-surface-surface-container-highest: var(--palette-grey-100);
            --theme-surface-inverse-surface: var(--palette-grey-1200);
            --theme-surface-inverse-on-surface: var(--palette-grey-10);
            --theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
            --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
            --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
            --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
            --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
            --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
            --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
            --theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
            --theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
            --theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
            --theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
            --theme-inverse-surface: var(--palette-grey-1200);
            --theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
            --theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
            --theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
            --theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
            --theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
            --theme-outline-outline-variant: rgba(33, 34, 38, .06);
            --theme-primary-primary: #ff0000;
            --theme-primary-on-primary: var(--theme-surface-surface);
            --theme-tonal-tonal: var(--theme-surface-surface-container);
            --theme-tonal-on-tonal: var(--theme-surface-on-surface);
            --theme-outlined-outlined: var(--theme-surface-surface-transparent);
            --theme-outlined-on-outlined: var(--theme-surface-on-surface);
            --theme-protected-protected: var(--theme-surface-surface-container);
            --theme-protected-on-protected: var(--theme-surface-on-surface);
            --theme-text-text: var(--theme-surface-surface-transparent);
            --theme-text-on-text: var(--theme-surface-on-surface);
            --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
            --theme-text-link-states-hovered: var(--palette-grey-1000);
            --theme-text-link-states-focused: var(--palette-grey-1100);
            --theme-text-link-states-pressed: var(--palette-grey-1000);
            --theme-text-link-states-disabled: #6A6A71;
            --theme-button-states-primary-enabled: var(--theme-primary-primary);
            --theme-button-states-primary-disabled: var(--palette-grey-10);
            --theme-button-states-primary-hovered: #cc0000;
            --theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
            --theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
            --theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
            --theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
            --theme-button-secondary-hover: var(--palette-grey-15);
            --theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
            --theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
            --theme-button-states-tonal-disabled: var(--palette-grey-10);
            --theme-button-states-protected-enabled: var(--theme-protected-protected);
            --theme-button-states-protected-hovered: var(--palette-grey-20);
            --theme-button-states-protected-disabled: var(--palette-grey-100);
            --theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
            --theme-button-states-disabled: var(--palette-grey-100);
            --theme-button-states-on-disabled: #6A6A71;
            --theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
            --theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
            --theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
            --theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
            --theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
            --theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
            --divider: var(--theme-outline-outline-variant);
        }
    }

    @layer animations {
        :root {
            --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
            --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
            --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
            --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
            --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
            --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
            --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
            --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
            --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
            --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
            --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
            --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
            --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
            --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
            --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
            --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
            --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
            --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
            --ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
        }
    }

    /* Ultra Mobile Responsive Styles */
    @layer mobile-responsive {

        /* Mobile-first base styles (up to 768px) */
        @media (max-width: 768px) {

            /* Header & Navigation */
            header {
                padding-inline: 1rem !important;
                gap: 1rem !important;
            }

            .header-wrapper .logo {
                font-size: 1.1em;
            }

            .header-wrapper .logo img {
                height: 28px;
            }

            /* Hero Section */
            #welcome {
                padding: 2rem 1rem !important;
                min-height: 80vh;
            }

            #welcome h1 img {
                height: 50px !important;
                margin-bottom: 0.5rem;
            }

            #welcome p {
                font-size: 2rem !important;
                line-height: 1.2;
                padding: 0 0.5rem;
            }

            #welcome p span {
                font-size: 0.65em !important;
            }

            #welcome .cta {
                flex-direction: column;
                width: 100%;
                padding: 0 1rem;
            }

            #welcome .cta button {
                width: 100%;
                font-size: 1em;
                padding: 1em;
            }

            /* Scroll Video Section */
            #scroll-video {
                min-height: 60vh;
                padding: 2rem 1rem;
            }

            .video-container {
                border-radius: 1em;
            }

            /* Product/Icons Section */
            #product {
                padding: 1rem !important;
            }

            #product .icons {
                gap: 0.3rem;
            }

            #product .icons .icon {
                flex: 0 0 clamp(2.5rem, 12vw, 4rem);
            }

            #product .icons .icon span {
                font-size: 1.5em !important;
            }

            #product h2 {
                font-size: 1.5em;
                padding: 1rem;
                text-align: center;
            }

            /* Features Section */
            #features {
                display: flex !important;
                flex-direction: column;
                gap: 1.5rem;
                padding: 1rem;
            }

            #features .feature {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            #features .feature .img-wrapper {
                width: 100%;
            }

            #features .feature img,
            #features .feature video {
                width: 100%;
                height: auto;
                border-radius: 1em;
            }

            #features .feature h3 {
                font-size: 1.3em;
                margin-bottom: 0.5rem;
            }

            #features .feature p {
                font-size: 0.95em;
                line-height: 1.4;
            }

            /* Developers/Carousel Section */
            #developers {
                padding: 1rem 0 !important;
            }

            #developers>div {
                padding: 0 1rem;
            }

            #developers h2 {
                font-size: 1.8em !important;
                margin-bottom: 1rem;
            }

            #developers .intro {
                font-size: 1em;
                width: 100% !important;
            }

            .carousel {
                padding-inline: 1rem !important;
                gap: 1rem;
            }

            .carousel .developer {
                flex: 0 0 85vw;
                max-width: 85vw;
            }

            .carousel .developer figure {
                height: 350px;
                position: relative;
            }

            .carousel .developer figure img {
                border-radius: 1em;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .carousel .developer figcaption {
                font-size: 1.5em !important;
                margin-left: 1rem !important;
            }

            .carousel .developer h3 {
                font-size: 1.1em !important;
            }

            .carousel .developer p {
                font-size: 0.9em;
                width: 100% !important;
            }

            /* Carousel scroll buttons/arrows */
            .carousel::scroll-button(left),
            .carousel::scroll-button(right) {
                display: flex !important;
                opacity: 1;
                background: var(--theme-tonal-tonal);
                backdrop-filter: blur(5px);
                border: 1px solid var(--theme-outline-variant);
                block-size: 3.5rem;
                inline-size: 3.5rem;
                font-size: 1.5rem;
                z-index: 100;
                margin-bottom: 2rem;
            }

            .carousel::scroll-button(left) {
                margin-right: 4.5rem;
                /* Separate the two buttons */
            }

            .carousel::scroll-button(right) {
                margin-left: 4.5rem;
            }


            /* Before You Go Section */
            #beforeyougo {
                padding: 2rem 1rem !important;
            }

            #beforeyougo h2 {
                font-size: 1.8em !important;
            }

            #beforeyougo .tagline {
                font-size: 1em !important;
            }

            #beforeyougo .card {
                padding: 1.5rem !important;
            }

            /* Footer */
            footer {
                padding: 2rem 1rem !important;
            }

            footer .links {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

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

        /* Extra small devices (phones, 480px and down) */
        @media (max-width: 480px) {

            #welcome p {
                font-size: 1.6rem !important;
            }

            #welcome p span {
                font-size: 0.6em !important;
            }

            #product h2 {
                font-size: 1.2em;
            }

            #developers h2 {
                font-size: 1.5em !important;
            }

            .carousel .developer {
                flex: 0 0 90vw;
                max-width: 90vw;
            }

            .carousel .developer figure {
                height: 280px;
            }

            .carousel .developer figcaption {
                font-size: 1.3em !important;
            }

            #features .feature h3 {
                font-size: 1.1em;
            }
        }

        /* Tablet styles (769px to 930px) */
        @media (min-width: 769px) and (max-width: 930px) {

            #welcome p {
                font-size: 3rem !important;
            }

            #features {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .carousel .developer {
                flex: 0 0 45vw;
                max-width: 45vw;
            }
        }
    }
}