/*
|--------------------------------------------------------------------------
| NO SPEAKER 5000™
| Shared Stylesheet
|--------------------------------------------------------------------------
|
| Design direction:
| - Ultra-premium consumer electronics
| - Near-black graphite
| - Warm silver / titanium
| - Electric signal lime
| - Restrained cyan
| - Large luxury-product typography
| - Dramatic negative space
| - Technical interface details
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Root
|--------------------------------------------------------------------------
*/

:root {
    --black:
        #050607;

    --black-soft:
        #0b0d0f;

    --graphite:
        #111418;

    --graphite-light:
        #1a1e23;

    --panel:
        #15191e;

    --panel-light:
        #1d2228;

    --line:
        rgba(
            255,
            255,
            255,
            0.12
        );

    --line-strong:
        rgba(
            255,
            255,
            255,
            0.22
        );

    --white:
        #f7f8f6;

    --white-soft:
        #d9dcda;

    --silver:
        #b7bdc2;

    --silver-dark:
        #727a80;

    --signal:
        #ccff39;

    --signal-soft:
        #e1ff83;

    --cyan:
        #67e8f9;

    --danger:
        #ff5a5f;

    --shadow:
        rgba(
            0,
            0,
            0,
            0.5
        );

    --font-sans:
        Arial,
        Helvetica,
        sans-serif;

    --font-display:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;

    --max-width:
        1440px;

    --content-width:
        1220px;

    --header-height:
        84px;

    --radius-small:
        12px;

    --radius:
        22px;

    --radius-large:
        36px;

    --transition:
        180ms ease;
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        var(--font-sans);

    font-size:
        16px;

    line-height:
        1.55;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    overflow-x:
        hidden;
}

img,
svg {
    display: block;

    max-width:
        100%;
}

button,
input,
textarea,
select {
    font:
        inherit;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color:
        transparent;
}

::selection {
    background:
        var(--signal);

    color:
        var(--black);
}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

:focus-visible {
    outline:
        3px
        solid
        var(--signal);

    outline-offset:
        4px;
}


/*
|--------------------------------------------------------------------------
| Skip Link
|--------------------------------------------------------------------------
*/

.skip-link {
    position:
        fixed;

    top:
        12px;

    left:
        12px;

    z-index:
        9999;

    padding:
        12px
        16px;

    background:
        var(--signal);

    color:
        var(--black);

    font-weight:
        900;

    transform:
        translateY(-180%);

    transition:
        transform
        var(--transition);
}

.skip-link:focus {
    transform:
        translateY(0);
}


/*
|--------------------------------------------------------------------------
| Shared Width
|--------------------------------------------------------------------------
*/

.site-header__inner,
.hero__inner,
.metrics-strip__inner,
.story-section__inner,
.features-section__inner,
.engineering-section__inner,
.comparison-section__inner,
.lineup-section__inner,
.reviews-section__inner,
.faq-section__inner,
.reserve-section__inner,
.site-footer__inner {
    width:
        min(
            calc(100% - 48px),
            var(--content-width)
        );

    margin-inline:
        auto;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    min-height:
        var(--header-height);

    background:
        rgba(
            5,
            6,
            7,
            0.88
        );

    border-bottom:
        1px
        solid
        var(--line);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.site-header__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;

    min-height:
        var(--header-height);
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.brand {
    display:
        inline-flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        3px;

    min-width:
        220px;
}

.brand__eyebrow {
    color:
        var(--silver-dark);

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.brand__name {
    font-family:
        var(--font-display);

    font-size:
        1.05rem;

    font-weight:
        900;

    letter-spacing:
        -0.025em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.site-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        28px;
}

.site-nav a {
    position:
        relative;

    color:
        var(--white-soft);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    transition:
        color
        var(--transition);
}

.site-nav a:not(.site-nav__cta)::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        -8px;

    left:
        0;

    height:
        1px;

    background:
        var(--signal);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        var(--transition);
}

.site-nav a:hover {
    color:
        var(--white);
}

.site-nav a:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}

.site-nav__cta {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0
        20px;

    background:
        var(--signal);

    color:
        var(--black)
        !important;

    border-radius:
        999px;
}


/*
|--------------------------------------------------------------------------
| Mobile Nav Toggle
|--------------------------------------------------------------------------
*/

.nav-toggle {
    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        46px;

    padding:
        0
        14px;

    background:
        transparent;

    color:
        var(--white);

    border:
        1px
        solid
        var(--line-strong);

    border-radius:
        999px;

    cursor:
        pointer;
}

.nav-toggle__text {
    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.nav-toggle__lines {
    display:
        grid;

    gap:
        4px;

    width:
        18px;
}

.nav-toggle__lines span {
    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        currentColor;

    transition:
        transform
        var(--transition),
        opacity
        var(--transition);
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        54px;

    padding:
        0
        24px;

    border:
        1px
        solid
        transparent;

    border-radius:
        999px;

    font-size:
        0.79rem;

    font-weight:
        900;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;

    transition:
        transform
        var(--transition),
        background-color
        var(--transition),
        color
        var(--transition),
        border-color
        var(--transition);
}

.button:hover {
    transform:
        translateY(-2px);
}

.button--primary {
    background:
        var(--signal);

    color:
        var(--black);
}

.button--primary:hover {
    background:
        var(--signal-soft);
}

.button--secondary {
    background:
        transparent;

    color:
        var(--white);

    border-color:
        var(--line-strong);
}

.button--secondary:hover {
    border-color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(103, 232, 249, 0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 64%,
            rgba(204, 255, 57, 0.045),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #060708 0%,
            #080a0d 100%
        );
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.5),
            transparent
        );
}

.hero::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 58%;
    height: 78%;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(103, 232, 249, 0.09) 0%,
            rgba(103, 232, 249, 0.025) 38%,
            transparent 72%
        );
    filter: blur(26px);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(380px, 0.88fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    width: min(calc(100% - 64px), 1320px);
    min-height: calc(100vh - var(--header-height));
    margin-inline: auto;
    padding-block: 64px 74px;
}


/*
|--------------------------------------------------------------------------
| Hero Copy
|--------------------------------------------------------------------------
*/

.hero__copy {
    position: relative;
    z-index: 5;
    max-width: 720px;
}

.hero__kicker {
    margin: 0 0 24px;
    color: var(--signal);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 720px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5.45vw, 6.1rem);
    line-height: 0.91;
    letter-spacing: -0.062em;
    text-transform: uppercase;
    text-wrap: balance;
}

.hero h1 span {
    display: block;
    margin-top: 0.10em;
    color: var(--silver-dark);
}

.hero__lead {
    max-width: 610px;
    margin: 34px 0 0;
    color: var(--white);
    font-size: clamp(1.04rem, 1.35vw, 1.24rem);
    font-weight: 700;
    line-height: 1.55;
}

.hero__supporting {
    max-width: 575px;
    margin: 20px 0 0;
    color: var(--silver);
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 34px 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.hero__meta li {
    position: relative;
    padding-left: 14px;
    color: var(--silver-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.hero__meta li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--signal);
    border-radius: 50%;
}


/*
|--------------------------------------------------------------------------
| Hero Product Stage
|--------------------------------------------------------------------------
*/

.hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 650px;
    isolation: isolate;
}

.product-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 540px);
    min-height: 650px;
    isolation: isolate;
}

.product-stage::before {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 11%;
    left: 8%;
    z-index: 1;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 232, 249, 0.42),
            transparent
        );
    opacity: 0.8;
}

.product-stage__glow {
    position: absolute;
    width: 94%;
    height: 82%;
    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(103, 232, 249, 0.17) 0%,
            rgba(103, 232, 249, 0.055) 40%,
            transparent 72%
        );
    filter: blur(32px);
    opacity: 0.95;
}

.product-stage__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    aspect-ratio: 1;
    border:
        1px
        solid
        rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    box-shadow:
        0
        0
        110px
        rgba(103, 232, 249, 0.035);
    transform: translate(-50%, -50%);
}

.product-stage__ring::before,
.product-stage__ring::after {
    content: "";
    position: absolute;
    inset: 13%;
    border:
        1px
        solid
        rgba(255, 255, 255, 0.042);
    border-radius: inherit;
}

.product-stage__ring::after {
    inset: 28%;
}


/*
|--------------------------------------------------------------------------
| Hero Product Render
|--------------------------------------------------------------------------
*/

.hero__ultra-product {
    position: relative;
    z-index: 3;
    border-radius: 28px;
    opacity: 0.98;
    transform: translateY(-8px);

    -webkit-mask-image:
        radial-gradient(
            ellipse 110% 100% at 50% 50%,
            #000 0%,
            #000 78%,
            rgba(0, 0, 0, 0.9) 84%,
            rgba(0, 0, 0, 0.45) 93%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse 110% 100% at 50% 50%,
            #000 0%,
            #000 78%,
            rgba(0, 0, 0, 0.9) 84%,
            rgba(0, 0, 0, 0.45) 93%,
            transparent 100%
        );
}


/*
|--------------------------------------------------------------------------
| Product Caption
|--------------------------------------------------------------------------
*/

.product-stage__caption {
    position: absolute;
    left: 0;
    bottom: 6%;
    z-index: 5;
    display: grid;
    gap: 6px;
    max-width: 250px;
    padding: 14px 16px;
    background: rgba(5, 6, 7, 0.72);
    border: 1px solid var(--line);
    border-left: 2px solid var(--signal);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.product-stage__caption span {
    color: var(--signal);
    font-size: 0.59rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-stage__caption strong {
    color: var(--white-soft);
    font-size: 0.77rem;
    line-height: 1.42;
}


/*
|--------------------------------------------------------------------------
| Hero Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 8px;
        width: min(calc(100% - 48px), 900px);
        padding-block: 64px 42px;
    }

    .hero__copy {
        max-width: 800px;
    }

    .hero h1 {
        max-width: 780px;
    }

    .hero__visual {
        min-height: 610px;
    }

    .product-stage {
        width: min(100%, 560px);
        min-height: 610px;
    }

    .product-stage__caption {
        right: 2%;
        bottom: 5%;
        left: auto;
    }

}

@media (max-width: 700px) {

    .hero__inner {
        width: min(
            calc(100% - 32px),
            var(--content-width)
        );
        padding-block: 50px 30px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.9rem,
                11.5vw,
                5rem
            );
    }

    .hero__visual {
        min-height: 520px;
    }

    .product-stage {
        width: min(100%, 430px);
        min-height: 520px;
    }

    .hero__ultra-product {
        transform: translateY(-12px);
    }

    .product-stage__caption {
        right: 0;
        bottom: 1%;
        left: auto;
        max-width: 220px;
    }

}

@media (max-width: 480px) {

    .hero h1 {
        font-size:
            clamp(
                2.65rem,
                12vw,
                4rem
            );
    }

    .hero__visual {
        min-height: 480px;
    }

    .product-stage {
        min-height: 480px;
        padding-bottom: 82px;
    }

    .hero__ultra-product {
        transform: translateY(-16px);
    }

    .product-stage__caption {
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(92%, 300px);
        max-width: none;
        transform: translateX(-50%);
    }

}/*
|--------------------------------------------------------------------------
| Metrics Strip
|--------------------------------------------------------------------------
*/

.metrics-strip {
    background:
        var(--signal);

    color:
        var(--black);

    border-top:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-bottom:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.15
        );
}

.metrics-strip__inner {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}

.metric {
    padding:
        34px;

    border-right:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.metric:first-child {
    border-left:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.metric__label {
    display:
        block;

    margin-bottom:
        18px;

    font-size:
        0.67rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.metric__value {
    display:
        block;

    margin-bottom:
        10px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.2rem
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;
}

.metric p {
    max-width:
        300px;

    margin:
        0;

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Shared Section Heading
|--------------------------------------------------------------------------
*/

.section-heading {
    display:
        grid;

    grid-template-columns:
        190px
        minmax(
            0,
            1fr
        );

    gap:
        44px;

    align-items:
        start;

    margin-bottom:
        54px;
}

.section-heading__eyebrow {
    margin:
        7px
        0
        0;

    color:
        var(--signal);

    font-size:
        0.69rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.section-heading h2 {
    max-width:
        900px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.3rem,
            4.6vw,
            5rem
        );

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| Story
|--------------------------------------------------------------------------
*/

.story-section {
    padding:
        110px
        0;

    background:
        var(--black-soft);
}

.story-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;
}

.story-card {
    min-height:
        280px;

    padding:
        32px;

    background:
        linear-gradient(
            145deg,
            var(--panel-light),
            var(--panel)
        );

    border:
        1px
        solid
        var(--line);

    border-radius:
        var(--radius);
}

.story-card--wide {
    grid-column:
        1
        /
        -1;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        50px;

    min-height:
        auto;

    padding:
        48px;

    background:
        linear-gradient(
            120deg,
            rgba(
                103,
                232,
                249,
                0.08
            ),
            var(--panel)
            45%
        );
}

.story-card--wide p {
    margin:
        0;

    color:
        var(--white-soft);

    font-size:
        1.05rem;

    line-height:
        1.75;
}

.story-card__index {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    margin-bottom:
        70px;

    background:
        var(--signal);

    color:
        var(--black);

    border-radius:
        50%;

    font-size:
        0.64rem;

    font-weight:
        900;
}

.story-card h3 {
    margin:
        0
        0
        16px;

    font-size:
        1.2rem;

    line-height:
        1.2;

    text-transform:
        uppercase;
}

.story-card p {
    margin:
        0;

    color:
        var(--silver);

    line-height:
        1.65;
}


/*
|--------------------------------------------------------------------------
| Features
|--------------------------------------------------------------------------
*/

.features-section {
    padding:
        110px
        0;

    background:
        var(--black);
}

.feature-list {
    border-top:
        1px
        solid
        var(--line);
}

.feature-item {
    display:
        grid;

    grid-template-columns:
        160px
        minmax(
            0,
            1fr
        );

    gap:
        42px;

    align-items:
        start;

    padding:
        34px
        0;

    border-bottom:
        1px
        solid
        var(--line);

    transition:
        padding
        var(--transition),
        background-color
        var(--transition);
}

.feature-item:hover {
    padding-inline:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}

.feature-item__number {
    color:
        var(--silver-dark);

    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    letter-spacing:
        0.08em;
}

.feature-item__content {
    display:
        grid;

    grid-template-columns:
        minmax(
            240px,
            0.55fr
        )
        minmax(
            0,
            1fr
        );

    gap:
        50px;
}

.feature-item h3 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.4rem,
            2.3vw,
            2.3rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}

.feature-item p {
    max-width:
        620px;

    margin:
        0;

    color:
        var(--silver);

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| Engineering
|--------------------------------------------------------------------------
*/

.engineering-section {
    position:
        relative;

    padding:
        110px
        0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 24% 42%,
            rgba(103, 232, 249, 0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #14181d,
            #0d0f12
        );
}

.engineering-section::before {
    content:
        "";

    position:
        absolute;

    top:
        -220px;

    left:
        -180px;

    width:
        620px;

    height:
        620px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(103, 232, 249, 0.06),
            transparent 68%
        );
}

.engineering-section__inner {
    position:
        relative;

    z-index:
        2;
}

.engineering-grid {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.32fr
        )
        minmax(
            300px,
            0.68fr
        );

    grid-template-rows:
        repeat(
            3,
            minmax(
                220px,
                auto
            )
        );

    gap:
        16px;
}


/*
|--------------------------------------------------------------------------
| Engineering Panels
|--------------------------------------------------------------------------
*/

.engineering-panel {
    position:
        relative;

    min-height:
        240px;

    padding:
        30px;

    overflow:
        hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.03
        );

    border:
        1px
        solid
        var(--line);

    border-radius:
        var(--radius-large);

    isolation:
        isolate;
}

.engineering-panel > * {
    position:
        relative;

    z-index:
        3;
}

.engineering-panel--primary {
    grid-row:
        1
        /
        4;

    min-height:
        780px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        34px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(103, 232, 249, 0.07),
            transparent 36%
        ),
        linear-gradient(
            160deg,
            #22272d,
            #111418
        );

    border-color:
        rgba(
            103,
            232,
            249,
            0.18
        );
}


/*
|--------------------------------------------------------------------------
| Exploded Frame Anatomy
|--------------------------------------------------------------------------
*/

.engineering-panel--primary::before {
    content:
        "";

    position:
        absolute;

    top:
        76px;

    right:
        24px;

    left:
        24px;

    z-index:
        1;

    height:
        430px;

    background-image:
        url("../images/products/no-speaker-5000-frame-anatomy.png");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 72%,
            rgba(0, 0, 0, 0.92) 82%,
            rgba(0, 0, 0, 0.35) 94%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 72%,
            rgba(0, 0, 0, 0.92) 82%,
            rgba(0, 0, 0, 0.35) 94%,
            transparent 100%
        );

    pointer-events:
        none;
}

.engineering-panel--primary::after {
    content:
        "EXPLODED ZERO-OUTPUT ARCHITECTURE";

    position:
        absolute;

    top:
        28px;

    right:
        34px;

    z-index:
        4;

    color:
        rgba(
            217,
            220,
            218,
            0.42
        );

    font-size:
        0.52rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.engineering-panel--primary h3 {
    max-width:
        600px;
}

.engineering-panel--primary p {
    max-width:
        590px;
}


/*
|--------------------------------------------------------------------------
| Engineering Labels
|--------------------------------------------------------------------------
*/

.engineering-panel__label {
    display:
        block;

    margin-bottom:
        72px;

    color:
        var(--signal);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.engineering-panel--primary
.engineering-panel__label {
    position:
        absolute;

    top:
        28px;

    left:
        34px;

    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| Engineering Typography
|--------------------------------------------------------------------------
*/

.engineering-panel h3 {
    max-width:
        520px;

    margin:
        0
        0
        18px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.45rem,
            2.45vw,
            2.8rem
        );

    line-height:
        1.02;

    letter-spacing:
        -0.04em;

    text-transform:
        uppercase;
}

.engineering-panel:not(.engineering-panel--primary) h3 {
    font-size:
        clamp(
            1.25rem,
            1.8vw,
            2rem
        );
}

.engineering-panel p {
    max-width:
        580px;

    margin:
        0;

    color:
        var(--silver);

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| Engineering Secondary Panels
|--------------------------------------------------------------------------
*/

.engineering-panel:not(.engineering-panel--primary) {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    transition:
        border-color
        var(--transition),
        background-color
        var(--transition),
        transform
        var(--transition);
}

.engineering-panel:not(.engineering-panel--primary)
.engineering-panel__label {
    margin-bottom:
        auto;
}

.engineering-panel:nth-child(2) {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(204, 255, 57, 0.07),
            transparent 42%
        ),
        rgba(
            255,
            255,
            255,
            0.03
        );
}

.engineering-panel:nth-child(3) {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(103, 232, 249, 0.065),
            transparent 42%
        ),
        rgba(
            255,
            255,
            255,
            0.03
        );
}

.engineering-panel:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );
}


/*
|--------------------------------------------------------------------------
| Engineering Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .engineering-grid {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;
    }

    .engineering-panel--primary {
        grid-row:
            auto;

        min-height:
            720px;
    }

    .engineering-panel--primary::before {
        height:
            390px;
    }

    .engineering-panel:not(.engineering-panel--primary) {
        min-height:
            250px;
    }

}

@media (max-width: 700px) {

    .engineering-panel--primary {
        min-height:
            650px;

        padding:
            28px;
    }

    .engineering-panel--primary::before {
        top:
            72px;

        right:
            12px;

        left:
            12px;

        height:
            330px;
    }

    .engineering-panel--primary
    .engineering-panel__label {
        top:
            24px;

        left:
            28px;
    }

    .engineering-panel--primary::after {
        top:
            24px;

        right:
            28px;
    }

}

@media (max-width: 480px) {

    .engineering-panel {
        padding:
            24px;
    }

    .engineering-panel--primary {
        min-height:
            585px;

        padding:
            24px;
    }

    .engineering-panel--primary::before {
        top:
            68px;

        right:
            8px;

        left:
            8px;

        height:
            275px;
    }

    .engineering-panel--primary
    .engineering-panel__label {
        top:
            22px;

        left:
            24px;
    }

    .engineering-panel--primary::after {
        display:
            none;
    }

    .engineering-panel__label {
        margin-bottom:
            48px;
    }

}/*
|--------------------------------------------------------------------------
| Comparison
|--------------------------------------------------------------------------
*/

.comparison-section {
    padding:
        110px
        0;

    background:
        var(--white);

    color:
        var(--black);
}

.comparison-section .section-heading__eyebrow {
    color:
        #5d6700;
}

.comparison-table__wrap {
    overflow-x:
        auto;

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.13
        );

    border-radius:
        var(--radius);
}

.comparison-table {
    width:
        100%;

    border-collapse:
        collapse;

    background:
        #fff;
}

.comparison-table th,
.comparison-table td {
    padding:
        24px
        26px;

    border-bottom:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.11
        );

    text-align:
        left;
}

.comparison-table thead th {
    background:
        #111315;

    color:
        #fff;

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.comparison-table thead th:nth-child(2) {
    background:
        var(--signal);

    color:
        var(--black);
}

.comparison-table tbody th {
    width:
        40%;

    font-size:
        0.9rem;

    font-weight:
        900;
}

.comparison-table tbody td {
    font-weight:
        700;
}

.comparison-table tbody td:nth-child(2) {
    background:
        rgba(
            204,
            255,
            57,
            0.14
        );

    font-weight:
        900;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
    border-bottom:
        0;
}


/*
|--------------------------------------------------------------------------
| Lineup
|--------------------------------------------------------------------------
*/

.lineup-section {
    padding:
        110px
        0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(103, 232, 249, 0.055),
            transparent 30%
        ),
        var(--black-soft);
}

.lineup-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px;

    align-items:
        stretch;
}

.lineup-card {
    --model-image:
        none;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        690px;

    padding:
        32px;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            180deg,
            #1a1f24 0%,
            #111418 48%,
            #101317 100%
        );

    border:
        1px
        solid
        var(--line);

    border-radius:
        var(--radius-large);
}

.lineup-card:nth-child(1) {
    --model-image:
        url("../images/products/no-speaker-5000-standard.png");
}

.lineup-card:nth-child(2) {
    --model-image:
        url("../images/products/no-speaker-5000-pro.png");
}

.lineup-card:nth-child(3) {
    --model-image:
        url("../images/products/no-speaker-5000-ultra.png");
}

.lineup-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    left:
        0;

    z-index:
        5;

    height:
        3px;

    background:
        var(--silver-dark);
}

.lineup-card::after {
    content:
        "";

    position:
        absolute;

    top:
        42px;

    right:
        18px;

    left:
        18px;

    z-index:
        0;

    height:
        300px;

    background-image:
        var(--model-image);

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    opacity:
        0.98;

    -webkit-mask-image:
        radial-gradient(
            ellipse 80% 74% at 50% 48%,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.92) 70%,
            rgba(0, 0, 0, 0.35) 88%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse 80% 74% at 50% 48%,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.92) 70%,
            rgba(0, 0, 0, 0.35) 88%,
            transparent 100%
        );

    pointer-events:
        none;
}

.lineup-card > * {
    position:
        relative;

    z-index:
        2;
}

.lineup-card--featured {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(204, 255, 57, 0.055),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #242a30,
            #121519
        );

    border-color:
        rgba(
            204,
            255,
            57,
            0.28
        );

    transform:
        translateY(-14px);
}

.lineup-card--featured::before {
    background:
        var(--signal);
}

.lineup-card:nth-child(3) {
    background:
        radial-gradient(
            circle at 50% 24%,
            rgba(103, 232, 249, 0.07),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #20252b,
            #101317
        );
}

.lineup-card__eyebrow {
    min-height:
        18px;

    margin-bottom:
        312px;

    color:
        var(--signal);

    font-size:
        0.64rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.lineup-card h3 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.45rem
        );

    line-height:
        1;

    letter-spacing:
        -0.04em;

    text-transform:
        uppercase;
}

.lineup-card__price {
    margin:
        18px
        0
        24px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.2rem
        );

    line-height:
        1;

    letter-spacing:
        -0.05em;
}

.lineup-card > p:not(.lineup-card__price) {
    margin:
        0;

    color:
        var(--silver);

    line-height:
        1.65;
}

.lineup-card ul {
    margin:
        auto
        0
        0;

    padding:
        30px
        0
        0;

    list-style:
        none;

    border-top:
        1px
        solid
        var(--line);
}

.lineup-card li {
    position:
        relative;

    padding:
        9px
        0
        9px
        18px;

    color:
        var(--white-soft);

    font-size:
        0.84rem;

    font-weight:
        700;
}

.lineup-card li::before {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        6px;

    height:
        6px;

    background:
        var(--signal);

    border-radius:
        50%;

    transform:
        translateY(-50%);
}/*
|--------------------------------------------------------------------------
| Reviews
|--------------------------------------------------------------------------
*/

.reviews-section {
    padding:
        110px
        0;

    background:
        var(--signal);

    color:
        var(--black);
}

.reviews-section .section-heading__eyebrow {
    color:
        rgba(
            0,
            0,
            0,
            0.62
        );
}

.review-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}

.review-card {
    min-height:
        260px;

    margin:
        0;

    padding:
        34px;

    background:
        rgba(
            255,
            255,
            255,
            0.32
        );

    border:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.14
        );

    border-radius:
        var(--radius);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}

.review-card p {
    max-width:
        520px;

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.6rem,
            3vw,
            3rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

    text-transform:
        uppercase;
}

.review-card footer {
    margin-top:
        40px;

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| FAQ
|--------------------------------------------------------------------------
*/

.faq-section {
    padding:
        110px
        0;

    background:
        var(--black);
}

.faq-list {
    border-top:
        1px
        solid
        var(--line);
}

.faq-item {
    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        60px;

    padding:
        30px
        0;

    border-bottom:
        1px
        solid
        var(--line);
}

.faq-item h3 {
    margin:
        0;

    font-size:
        1rem;

    line-height:
        1.35;

    text-transform:
        uppercase;
}

.faq-item p {
    max-width:
        650px;

    margin:
        0;

    color:
        var(--silver);

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| Reserve
|--------------------------------------------------------------------------
*/

.reserve-section {
    position:
        relative;

    padding:
        110px
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #181d22,
            #08090b
        );
}

.reserve-section::before {
    content:
        "";

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    top:
        -200px;

    right:
        -200px;

    background:
        radial-gradient(
            circle,
            rgba(
                103,
                232,
                249,
                0.08
            ),
            transparent
            65%
        );

    pointer-events:
        none;
}

.reserve-section__inner {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            0.65fr
        )
        minmax(
            0,
            1.35fr
        );

    gap:
        70px;
}

.reserve-section__eyebrow {
    margin:
        0
        0
        20px;

    color:
        var(--signal);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.reserve-section__copy h2 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.4rem,
            4.4vw,
            4.7rem
        );

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}

.reserve-section__copy > p:last-child {
    max-width:
        500px;

    margin:
        26px
        0
        0;

    color:
        var(--silver);

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| Reserve Form
|--------------------------------------------------------------------------
*/

.reserve-form {
    padding:
        36px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    border:
        1px
        solid
        var(--line);

    border-radius:
        var(--radius-large);
}

.reserve-form__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;
}

.form-field {
    display:
        grid;

    gap:
        9px;
}

.form-field--full {
    margin-top:
        20px;
}

.form-field label {
    color:
        var(--white-soft);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width:
        100%;

    min-height:
        54px;

    padding:
        14px
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    color:
        var(--white);

    border:
        1px
        solid
        var(--line);

    border-radius:
        12px;

    outline:
        none;

    transition:
        border-color
        var(--transition),
        background-color
        var(--transition);
}

.form-field textarea {
    min-height:
        150px;

    resize:
        vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color:
        var(--silver-dark);
}

.form-field select {
    color-scheme:
        dark;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background:
        rgba(
            255,
            255,
            255,
            0.075
        );

    border-color:
        var(--signal);
}

.reserve-form__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    margin-top:
        26px;
}

.reserve-form__note {
    max-width:
        420px;

    margin:
        0;

    color:
        var(--silver-dark);

    font-size:
        0.72rem;

    line-height:
        1.55;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    padding:
        64px
        0
        34px;

    background:
        #030405;

    border-top:
        1px
        solid
        var(--line);
}

.site-footer__inner {
    display:
        grid;

    grid-template-columns:
        minmax(
            260px,
            1fr
        )
        auto
        minmax(
            260px,
            0.8fr
        );

    gap:
        60px;

    align-items:
        start;
}

.site-footer__name {
    margin:
        0
        0
        14px;

    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    letter-spacing:
        -0.03em;

    text-transform:
        uppercase;
}

.site-footer__brand > p:last-child {
    max-width:
        420px;

    margin:
        0;

    color:
        var(--silver-dark);

    font-size:
        0.82rem;

    line-height:
        1.65;
}

.site-footer__links {
    display:
        grid;

    gap:
        12px;

    min-width:
        140px;
}

.site-footer__links a {
    color:
        var(--white-soft);

    font-size:
        0.74rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    transition:
        color
        var(--transition);
}

.site-footer__links a:hover {
    color:
        var(--signal);
}

.site-footer__meta {
    color:
        var(--silver-dark);

    font-size:
        0.72rem;

    line-height:
        1.6;
}

.site-footer__meta p {
    margin:
        0
        0
        16px;
}


/*
|--------------------------------------------------------------------------
| Hover Enhancement
|--------------------------------------------------------------------------
*/

@media (
    hover:
    hover
) {

    .story-card,
    .engineering-panel,
    .lineup-card,
    .review-card {
        transition:
            transform
            var(--transition),
            border-color
            var(--transition);
    }

    .story-card:hover,
    .engineering-panel:hover,
    .lineup-card:hover {
        border-color:
            var(--line-strong);

        transform:
            translateY(-4px);
    }

    .lineup-card--featured:hover {
        transform:
            translateY(-18px);
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 1100px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    1100px
) {

    :root {
        --header-height:
            76px;
    }

    .site-nav {
        gap:
            18px;
    }

    .section-heading {
        grid-template-columns:
            140px
            minmax(
                0,
                1fr
            );
    }

    .feature-item {
        grid-template-columns:
            100px
            minmax(
                0,
                1fr
            );
    }

    .reserve-section__inner {
        grid-template-columns:
            1fr;

        gap:
            44px;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive Navigation - 900px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    900px
) {

    .nav-toggle {
        display:
            inline-flex;
    }

    .site-nav {
        position:
            fixed;

        top:
            var(--header-height);

        right:
            0;

        left:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            18px
            24px
            28px;

        background:
            rgba(
                5,
                6,
                7,
                0.98
            );

        border-bottom:
            1px
            solid
            var(--line);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }

    body.nav-open {
        overflow:
            hidden;
    }

    body.nav-open .site-nav {
        display:
            flex;
    }

    .site-nav a {
        display:
            flex;

        align-items:
            center;

        min-height:
            54px;

        border-bottom:
            1px
            solid
            var(--line);
    }

    .site-nav a:not(.site-nav__cta)::after {
        display:
            none;
    }

    .site-nav__cta {
        margin-top:
            18px;

        border-bottom:
            0
            !important;
    }

    body.nav-open .nav-toggle__lines span:nth-child(1) {
        transform:
            translateY(5px)
            rotate(45deg);
    }

    body.nav-open .nav-toggle__lines span:nth-child(2) {
        opacity:
            0;
    }

    body.nav-open .nav-toggle__lines span:nth-child(3) {
        transform:
            translateY(-5px)
            rotate(-45deg);
    }

    .metrics-strip__inner {
        grid-template-columns:
            1fr;
    }

    .metric {
        border-right:
            1px
            solid
            rgba(
                0,
                0,
                0,
                0.18
            );

        border-bottom:
            1px
            solid
            rgba(
                0,
                0,
                0,
                0.18
            );
    }

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

    .story-grid {
        grid-template-columns:
            1fr;
    }

    .story-card--wide {
        grid-template-columns:
            1fr;

        gap:
            26px;
    }

    .feature-item__content {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

.engineering-panel--primary {
        grid-row:
            auto;
    }

    .lineup-grid {
        grid-template-columns:
            1fr;
    }

    .lineup-card--featured {
        transform:
            none;
    }

    .review-grid {
        grid-template-columns:
            1fr;
    }

    .faq-item {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    .site-footer__inner {
        grid-template-columns:
            1fr
            1fr;

        gap:
            40px;
    }

    .site-footer__meta {
        grid-column:
            1
            /
            -1;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 700px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    700px
) {

    .site-header__inner,
    .hero__inner,
    .metrics-strip__inner,
    .story-section__inner,
    .features-section__inner,
    .engineering-section__inner,
    .comparison-section__inner,
    .lineup-section__inner,
    .reviews-section__inner,
    .faq-section__inner,
    .reserve-section__inner,
    .site-footer__inner {
        width:
            min(
                calc(100% - 32px),
                var(--content-width)
            );
    }

    .brand {
        min-width:
            0;
    }

    .brand__eyebrow {
        display:
            none;
    }

    .brand__name {
        font-size:
            0.92rem;
    }

    .nav-toggle__text {
        display:
            none;
    }

    .nav-toggle {
        width:
            46px;

        padding:
            0;
    }

    .hero__lead {
        margin-top:
            26px;
    }

    .hero__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hero__actions .button {
        width:
            100%;
    }

    .hero__meta {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

    .metric {
        padding:
            28px
            20px;
    }

    .story-section,
    .features-section,
    .engineering-section,
    .comparison-section,
    .lineup-section,
    .reviews-section,
    .faq-section,
    .reserve-section {
        padding:
            76px
            0;
    }

    .section-heading {
        grid-template-columns:
            1fr;

        gap:
            16px;

        margin-bottom:
            36px;
    }

    .section-heading h2 {
        font-size:
            clamp(
                2.15rem,
                10vw,
                3.7rem
            );
    }

    .story-card,
    .story-card--wide {
        padding:
            26px;
    }

    .story-card {
        min-height:
            auto;
    }

    .story-card__index {
        margin-bottom:
            44px;
    }

    .feature-item {
        grid-template-columns:
            50px
            minmax(
                0,
                1fr
            );

        gap:
            18px;

        padding:
            26px
            0;
    }

    .feature-item:hover {
        padding-inline:
            0;
    }

    .engineering-panel {
        min-height:
            auto;

        padding:
            28px;
    }

.engineering-panel__label {
        margin-bottom:
            70px;
    }

    .comparison-table th,
    .comparison-table td {
        min-width:
            170px;

        padding:
            20px;
    }

    .lineup-card {
        min-height:
            470px;

        padding:
            28px;
    }

    .lineup-card__eyebrow {
        margin-bottom:
            50px;
    }

    .review-card {
        min-height:
            230px;

        padding:
            26px;
    }

    .faq-item {
        padding:
            24px
            0;
    }

    .reserve-form {
        padding:
            24px;
    }

    .reserve-form__grid {
        grid-template-columns:
            1fr;
    }

    .reserve-form__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .reserve-form__actions .button {
        width:
            100%;
    }

    .site-footer__inner {
        grid-template-columns:
            1fr;
    }

    .site-footer__meta {
        grid-column:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - 480px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    480px
) {

    .hero__kicker {
        font-size:
            0.64rem;
    }

    .metric__value {
        font-size:
            2.8rem;
    }

    .story-card--wide {
        padding:
            24px;
    }

    .feature-item {
        grid-template-columns:
            1fr;
    }

    .feature-item__number {
        color:
            var(--signal);
    }

.lineup-card {
        min-height:
            440px;
    }

    .review-card p {
        font-size:
            1.75rem;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms
            !important;

        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;
    }

}