:root {
    --paper: #f6f4ed;
    --ink: #202422;
    --muted: #727571;
    --accent: #ea5a42;
    --mint: #c9dfce;
    --line: #dcded6;
    --display: 'Space Grotesk',sans-serif;
    --body: 'DM Sans',sans-serif
}

* {
    box-sizing: border-box
}

[hidden] {
    display: none !important
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px
}

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

    a:hover {
        color: inherit
    }

button, a {
    -webkit-tap-highlight-color: transparent
}

    a:focus-visible, button:focus-visible, input:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 4px
    }

.container-xl {
    max-width: 1240px
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 1000;
    background: #fff;
    padding: 10px 16px
}

    .skip-link:focus {
        top: 10px
    }

.announcement {
    min-height: 34px;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: .14em;
    text-align: center;
    padding: 6px 18px
}

    .announcement i {
        font-size: 13px;
        color: var(--accent)
    }

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #aee397;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(174,227,151,.14);
    flex: none
}

.site-header {
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 10;
    background: var(--paper)
}

.navbar {
    min-height: 84px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: -.045em;
    line-height: .94
}

.brand-period {
    color: var(--accent)
}

.brand-mark {
    width: 37px;
    height: 37px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3px;
    transform: rotate(-12deg)
}

    .brand-mark span {
        background: var(--ink);
        border-radius: 2px
    }

        .brand-mark span:nth-child(2) {
            background: var(--accent)
        }

        .brand-mark span:nth-child(3) {
            background: var(--accent)
        }

.navbar .nav-link {
    color: #555c56;
    font-family: var(--display);
    font-size: 18px;
    padding: 9px 0
}

    .navbar .nav-link:hover, .navbar .nav-link.active {
        color: var(--accent)
    }

.navbar .nav-cta {
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 11px 19px;
    color: var(--ink)
}

    .navbar .nav-cta:hover {
        background: var(--ink);
        color: #fff
    }

.nav-cta i {
    margin-left: 12px
}

.hero {
    min-height: 620px;
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 62px
}

.hero-copy {
    position: relative;
    z-index: 2
}

.eyebrow {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: .14em;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase
}

    .eyebrow .line {
        width: 24px;
        height: 2px;
        background: var(--accent);
        display: inline-block
    }

    .eyebrow.light {
        color: #e4eae0
    }

        .eyebrow.light .line {
            background: var(--accent)
        }

h1, h2, h3, p {
    margin-top: 0
}

.hero h1, .ase-hero h1 {
    font-family: var(--display);
    font-size: clamp(64px,6.7vw,100px);
    letter-spacing: -.085em;
    line-height: .98;
    margin: 27px 0 24px
}

    .hero h1 em, .ase-hero h1 em, h2 em {
        font-style: normal;
        color: var(--accent)
    }

.hero-copy > p {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.7;
    color: #60665f;
    margin-bottom: 27px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 27px;
    flex-wrap: wrap
}

.btn-pill {
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 16px;
    font-family: var(--display);
    box-shadow: none !important
}

    .btn-pill i:first-child {
        margin-right: 8px
    }

.btn-dark {
    background: var(--ink);
    border-color: var(--ink)
}

    .btn-dark:hover {
        background: var(--accent);
        border-color: var(--accent)
    }

.text-link {
    font-family: var(--display);
    font-size: 14px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 5px;
    white-space: nowrap
}

    .text-link i {
        margin-left: 12px
    }

    .text-link:hover {
        color: var(--accent);
        border-color: var(--accent)
    }

.hero-foot {
    margin-top: 74px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #818680;
    font-size: 12px;
    line-height: 1.4
}

.hero-foot-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #cdd1c9;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 16px
}

.hero-art {
    height: 530px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden
}

.art-grid, .ase-visual-grid {
    position: absolute;
    inset: 20px 5px;
    background-image: linear-gradient(#bbc5b744 1px,transparent 1px),linear-gradient(90deg,#bbc5b744 1px,transparent 1px);
    background-size: 29px 29px;
    mask-image: radial-gradient(circle at center,#000 30%,transparent 75%)
}

.art-orbit {
    position: absolute;
    border: 1px solid #c4ccc1;
    border-radius: 50%
}

.orbit-1 {
    width: 420px;
    height: 420px
}

.orbit-2 {
    width: 540px;
    height: 540px
}

.art-card {
    position: relative;
    width: 72%;
    aspect-ratio: 1.12;
    background: #e75b43;
    color: #1d2824;
    border: 9px solid #212b27;
    border-radius: 15px;
    box-shadow: 21px 24px 0 #b9cabb;
    transform: rotate(-8deg);
    padding: 15px 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

    .art-card:before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg,transparent,transparent 5px,#2a37300b 6px);
        pointer-events: none
    }

.art-card-top, .art-card-bottom {
    display: flex;
    justify-content: space-between;
    font-family: var(--display);
    font-size: 11px;
    
    letter-spacing: .08em
}

.art-card-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    flex: 1
}

.art-big {
    font-family: var(--display);
    
    font-size: clamp(60px,7vw,100px);
    letter-spacing: -.12em;
    line-height: .88
}

    .art-big span {
        display: block
    }

    .art-big .art-dot {
        display: inline;
        color: #f8e8c4
    }

.art-cursor {
    font-size: 45px;
    line-height: 1;
    color: #f8e8c4
}

.art-label {
    position: absolute;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: .13em;
    
    z-index: 2
}

.top-label {
    top: 27px;
    right: 13px
}

    .top-label span {
        margin-left: 10px
    }

.bottom-label {
    bottom: 19px;
    left: 7px
}

    .bottom-label i {
        margin-left: 9px;
        font-size: 17px
    }

.art-sticker {
    position: absolute;
    right: 3%;
    bottom: 9%;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: #d8e7ca;
    border: 1px solid #84977f;
    z-index: 3;
    transform: rotate(14deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--display);
    
    line-height: 1.04;
    font-size: 15px
}

    .art-sticker i {
        position: absolute;
        bottom: 11px;
        font-size: 18px;
        color: var(--accent)
    }

.marquee {
    background: #d7e2d4;
    border-top: 1px solid #b6c6b7;
    border-bottom: 1px solid #b6c6b7;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--display);
    
    font-size: 12px;
    letter-spacing: .16em;
    padding: 15px 0
}

    .marquee div {
        width: max-content;
        animation: marquee 32s linear infinite
    }

    .marquee span {
        color: var(--accent);
        padding: 0 42px;
        font-size: 18px;
        vertical-align: middle
    }

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

.section-pad {
    padding-top: 112px;
    padding-bottom: 116px
}

.section-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;
    margin-bottom: 46px
}

    .section-top h2, .join-inner h2, .info-grid h2 {
        font-family: var(--display);
        font-size: clamp(43px,5vw,70px);
        letter-spacing: -.075em;
        line-height: 1.04;
        margin: 19px 0 0
    }

.section-link {
    margin-bottom: 9px
}

.video-layout {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    background: #e9ede5;
    min-height: 415px
}

.video-frame {
    position: relative;
    display: block;
    min-height: 415px;
    background: #232d29;
    overflow: hidden
}

    .video-frame img {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        object-fit: cover
    }

    .video-frame:after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg,#111b1980,transparent 35%)
    }

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #e5ebe1;
    gap: 10px;
    background: radial-gradient(circle at 70% 20%,#41584a,#202d2a 70%)
}

    .video-placeholder i {
        font-size: 80px;
        color: var(--accent)
    }

    .video-placeholder span {
        font-family: var(--display);
        letter-spacing: .2em;
        font-weight: 700
    }

.play-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    font-size: 29px;
    transition: transform .2s
}

.video-frame:hover .play-button {
    transform: translate(-50%,-50%) scale(1.1)
}

.video-corner {
    position: absolute;
    bottom: 22px;
    left: 24px;
    z-index: 2;
    background: #f2eee3;
    border-radius: 3px;
    padding: 10px 13px;
    font-family: var(--display);
    
    font-size: 10px;
    letter-spacing: .1em
}

    .video-corner span {
        color: var(--accent);
        margin-left: 20px
    }

.video-detail {
    padding: 50px 47px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.mini-label {
    font-family: var(--display);
    
    font-size: 11px;
    color: var(--accent);
    letter-spacing: .12em
}

.video-detail h3 {
    font-family: var(--display);
    font-size: clamp(26px,2.8vw,39px);
    
    line-height: 1.14;
    letter-spacing: -.06em;
    margin: 21px 0
}

.video-detail p {
    color: #6b746b;
    font-size: 14px;
    line-height: 1.8
}

.round-link {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    font-family: var(--display);
    
    font-size: 14px;
    margin-top: 21px
}

    .round-link i {
        width: 39px;
        height: 39px;
        border: 1px solid currentColor;
        border-radius: 50%;
        display: grid;
        place-items: center;
        transition: background .2s,color .2s
    }

    .round-link:hover i {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
    }

.ase-teaser {
    background: #222c28;
    color: #f3f3e9;
    overflow: hidden
}

.teaser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 585px;
    align-items: center;
    gap: 40px
}

.teaser-copy {
    padding: 80px 0
}

.teaser-overline {
    color: #a8b7a9;
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: .14em;
    margin-top: 42px
}

.teaser-copy h2 {
    font-family: var(--display);
    font-size: clamp(42px,4.5vw,68px);
    
    letter-spacing: -.075em;
    line-height: 1.04;
    margin: 15px 0 20px
}

.teaser-copy p {
    color: #bbc8bd;
    max-width: 510px;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 28px
}

.btn-light {
    background: #eff1e7;
    border-color: #eff1e7;
    color: var(--ink)
}

    .btn-light:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
    }

.teaser-art {
    height: 100%;
    min-height: 525px;
    position: relative;
    display: grid;
    place-items: center
}

.teaser-ring {
    position: absolute;
    width: 490px;
    height: 490px;
    border-radius: 50%;
    background: #34473d;
    border: 1px solid #486052
}

.ase-window {
    position: relative;
    width: 76%;
    max-width: 440px;
    background: #d7d8cc;
    border: 7px solid #d7d8cc;
    box-shadow: 18px 22px 0 #15221b;
    transform: rotate(6deg);
    z-index: 2
}

.window-bar {
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-family: var(--display);
    font-size: 10px;
    color: #27302c;
    font-weight: 700
}

.window-dots {
    display: flex;
    gap: 4px
}

    .window-dots b {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #e9674f
    }

        .window-dots b:nth-child(2) {
            background: #e5ad63
        }

        .window-dots b:nth-child(3) {
            background: #9ebfac
        }

.window-screen {
    background: #101815;
    padding: 7px
}

    .window-screen img {
        width: 100%;
        image-rendering: pixelated
    }

.window-base {
    font: 10px var(--display);
    
    color: #1c2823;
    display: flex;
    justify-content: space-between;
    padding: 5px
}

    .window-base span {
        color: #ed6048
    }

.teaser-chip {
    position: absolute;
    bottom: 75px;
    right: 1%;
    background: var(--accent);
    border-radius: 50%;
    width: 115px;
    height: 115px;
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    color: #17251d;
    font: 700 14px/1.05 var(--display);
    transform: rotate(12deg)
}

.values .section-intro {
    max-width: 320px;
    color: #6e746e;
    line-height: 1.75;
    margin-bottom: 7px
}

.value-card {
    height: 100%;
    min-height: 290px;
    border: 1px solid var(--line);
    background: #faf9f4;
    padding: 29px;
    position: relative;
    transition: transform .2s,box-shadow .2s
}

    .value-card:hover {
        transform: translateY(-5px);
        box-shadow: 10px 10px 0 #d9e4d6
    }

.value-number {
    font-family: var(--display);
    color: #979e95;
    font-size: 12px;
}

.value-icon {
    display: block;
    font-size: 36px;
    color: var(--accent);
    margin: 25px 0 20px
}

.value-card h3 {
    font: 22px/1.15 var(--display);
    letter-spacing: -.05em;
    margin-bottom: 12px
}

.value-card p {
    color: #70786f;
    line-height: 1.7;
    font-size: 14px;
    margin: 0
}

.join-section {
    background: #dce9d8;
    padding: 75px 0
}

.join-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px
}

    .join-inner h2 {
        margin-bottom: 0
    }

    .join-inner .btn {
        margin-bottom: 8px
    }

.footer {
    background: #19231f;
    color: #edf0e8;
    padding: 60px 0 35px
}

    .footer .brand-mark span {
        background: #f4eee2
    }

        .footer .brand-mark span:nth-child(2), .footer .brand-mark span:nth-child(3) {
            background: var(--accent)
        }

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 30px
}

.footer p {
    color: #93a296;
    font-size: 13px;
    margin: 24px 0 0
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-content: start;
    font-size: 13px
}

    .footer-links a:hover {
        color: var(--accent)
    }

.footer-end {
    text-align: right;
    font-size: 13px;
    line-height: 2;
    color: #93a296
}

    .footer-end i {
        color: var(--accent)
    }
/* ASE */ .ase-hero {
    background: #222c28;
    color: #f4f4ec;
    overflow: hidden
}

.ase-hero-grid {
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px
}

.ase-hero-copy {
    padding: 70px 0
}

.ase-badge {
    font: 700 10px var(--display);
    letter-spacing: .12em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: #36443b;
    border: 1px solid #4a5d4c;
    margin-top: 35px
}

.ase-hero h1 {
    font-size: clamp(61px,6vw,90px);
    margin: 22px 0
}

.ase-hero-copy > p {
    color: #bdc9bd;
    max-width: 530px;
    line-height: 1.75;
    font-size: 17px;
    margin-bottom: 28px
}

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

    .btn-accent:hover {
        background: #d84933;
        border-color: #d84933;
        color: #fff
    }

.light-link {
    color: #e9eee6;
    border-color: #e9eee6
}

.ase-hero-visual {
    height: 100%;
    min-height: 560px;
    position: relative;
    display: grid;
    place-items: center
}

.ase-visual-grid {
    inset: 0;
    opacity: .4
}

.ase-machine {
    width: 80%;
    max-width: 480px;
    background: #cdd5c5;
    color: #29332d;
    padding: 22px 22px 15px;
    border-radius: 13px 13px 22px 22px;
    box-shadow: 28px 28px 0 #141e1a;
    transform: rotate(4deg);
    z-index: 1
}

.machine-top, .machine-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 700 10px var(--display);
    letter-spacing: .1em
}

.machine-top {
    padding-bottom: 14px
}

    .machine-top b {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #e36850;
        margin-left: 6px
    }

.machine-logo {
    font-size: 12px
}

.machine-screen {
    border: 15px solid #414e46;
    border-radius: 12px;
    background: #101812;
    overflow: hidden;
    aspect-ratio: 1.37
}

    .machine-screen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated
    }

.machine-bottom {
    padding-top: 15px
}

.visual-caption {
    position: absolute;
    right: 2%;
    bottom: 37px;
    color: #9bad9e;
    font: 700 10px var(--display);
    letter-spacing: .12em
}

.release-section {
    background: #e8eee4;
    padding: 38px 0 54px
}

.release-card {
    display: flex;
    align-items: center;
    gap: 25px
}

.release-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 28px;
    flex: none
}

.release-copy {
    flex: 1
}

    .release-copy h2 {
        font: 700 27px var(--display);
        letter-spacing: -.055em;
        margin: 6px 0
    }

    .release-copy p {
        color: #6c766d;
        font-size: 13px;
        margin: 0
    }

.release-card .round-link {
    margin: 0
}

.release-assets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-left: 88px
}

    .release-assets a {
        padding: 8px 12px;
        border: 1px solid #aabbb0;
        border-radius: 50px;
        font: 600 12px var(--display)
    }

        .release-assets a:hover {
            background: #fff
        }

.ase-info {
    background: #eeeae1;
    padding: 95px 0
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

    .info-grid h2 {
        margin: 20px 0
    }

    .info-grid p {
        color: #6e766f;
        max-width: 460px;
        line-height: 1.8
    }

.info-links {
    border-top: 1px solid #c9cdc3
}

    .info-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #c9cdc3;
        padding: 21px 4px;
        font: 700 19px var(--display);
        letter-spacing: -.03em
    }

        .info-links a > span {
            display: flex;
            align-items: center;
            gap: 16px
        }

            .info-links a > span i {
                color: var(--accent);
                font-size: 24px
            }

        .info-links a:hover {
            color: var(--accent)
        }

@media(max-width:991px) {
    .navbar-collapse {
        padding: 10px 0 23px
    }

    .nav-cta {
        display: inline-block;
        margin-top: 10px
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 75px
    }

    .hero-art {
        height: 500px
    }

    .hero-foot {
        margin-top: 38px
    }

    .teaser-grid, .ase-hero-grid {
        grid-template-columns: 1fr
    }

    .teaser-copy {
        padding: 75px 0 0
    }

    .teaser-art {
        min-height: 490px
    }

    .ase-hero-copy {
        padding: 75px 0 0
    }

    .ase-hero-visual {
        min-height: 520px
    }

    .art-card {
        max-width: 430px
    }

    .art-big {
        font-size: 90px
    }
}

@media(max-width:767px) {
    .announcement {
        font-size: 8px
    }

    .navbar {
        min-height: 70px
    }

    .hero {
        padding-top: 58px;
        padding-bottom: 30px
    }

        .hero h1, .ase-hero h1 {
            font-size: clamp(54px,12vw,77px)
        }

    .hero-copy > p, .ase-hero-copy > p {
        font-size: 16px
    }

    .hero-art {
        height: 410px
    }

    .art-card {
        width: 69%;
        max-width: 360px
    }

    .art-big {
        font-size: clamp(55px,12vw,80px)
    }

    .art-sticker {
        width: 95px;
        height: 95px;
        font-size: 12px
    }

    .section-pad {
        padding-top: 76px;
        padding-bottom: 79px
    }

    .section-top {
        display: block
    }

    .section-link {
        display: inline-block;
        margin-top: 26px
    }

    .video-layout {
        grid-template-columns: 1fr
    }

    .video-frame {
        min-height: 0;
        aspect-ratio: 16/10
    }

    .video-detail {
        padding: 38px
    }

    .teaser-grid {
        gap: 0
    }

    .teaser-copy h2 {
        font-size: clamp(39px,9vw,57px)
    }

    .teaser-art {
        min-height: 390px
    }

    .teaser-ring {
        width: 360px;
        height: 360px
    }

    .ase-window {
        width: 77%
    }

    .teaser-chip {
        width: 85px;
        height: 85px;
        font-size: 11px;
        bottom: 45px
    }

    .values .section-intro {
        margin-top: 22px
    }

    .join-inner {
        display: block
    }

        .join-inner .btn {
            margin-top: 30px
        }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-end {
        text-align: left
    }

    .ase-hero-visual {
        min-height: 420px
    }

    .ase-machine {
        width: 74%
    }

    .release-card {
        flex-wrap: wrap
    }

    .release-copy {
        flex-basis: calc(100% - 90px)
    }

    .release-card .round-link {
        margin-left: 88px
    }

    .release-assets {
        padding-left: 0
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }
}

@media(max-width:480px) {
    .hero-art {
        height: 345px
    }

    .art-card {
        border-width: 6px;
        width: 70%;
        padding: 10px
    }

    .art-big {
        font-size: clamp(48px,12vw,67px)
    }

    .art-card-top, .art-card-bottom {
        font-size: 7px
    }

    .art-cursor {
        font-size: 28px
    }

    .art-sticker {
        right: 0;
        bottom: 5%;
        width: 73px;
        height: 73px;
        font-size: 9px
    }

        .art-sticker i {
            bottom: 5px;
            font-size: 11px
        }

    .orbit-1 {
        width: 300px;
        height: 300px
    }

    .orbit-2 {
        width: 400px;
        height: 400px
    }

    .hero-actions {
        gap: 20px
    }

    .btn-pill {
        font-size: 13px;
        padding: 14px 19px
    }

    .video-detail {
        padding: 30px
    }

    .ase-machine {
        width: 85%;
        padding: 13px
    }

    .machine-screen {
        border-width: 9px
    }

    .machine-logo {
        font-size: 8px
    }

    .machine-top, .machine-bottom {
        font-size: 7px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-links {
        margin-top: 10px
    }

    .footer-end {
        margin-top: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    *, *:before, *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}

.privacy-copy {
    margin-top: 55px
}

    .privacy-copy section {
        padding: 26px 0;
        border-top: 1px solid var(--line)
    }

    .privacy-copy h2 {
        font: 700 26px/1.2 var(--display);
        letter-spacing: -.045em;
        margin-bottom: 12px
    }

    .privacy-copy p {
        color: #657068;
        line-height: 1.8;
        margin: 0
    }

    .privacy-copy a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px
    }