:root {
    --pico-primary: light-dark(#3f4eae, #b7bee8);
    --pico-primary-background: #4b61d1;
    --pico-primary-border: #4b61d1;
    --pico-primary-underline: light-dark(#3f4eae66, #b7bee866);
    --pico-primary-hover: light-dark(#313e8c, #dde1f6);
    --pico-primary-hover-background: #3d4eb8;
    --pico-primary-hover-border: #3d4eb8;
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: light-dark(#4b61d180, #b7bee880);
    --pico-primary-inverse: #fff;
    --pico-text-selection-color: light-dark(#4b61d12e, #b7bee82e);
    --line: color-mix(in srgb, var(--pico-muted-color) 28%, transparent);
    --surface: color-mix(in srgb, var(--pico-color) 4.5%, var(--pico-background-color));
}

html:has(body.page) {
    background-color: var(--pico-background-color);
}

body.page {
    min-height: 100vh;
    background-color: var(--pico-background-color);
    background-image: radial-gradient(
        ellipse 120% 58% at 50% -18%,
        color-mix(in srgb, var(--pico-muted-color) 34%, var(--pico-background-color)),
        var(--pico-background-color) 70%
    );
    background-repeat: no-repeat;
}

.sheet {
    width: min(42rem, calc(100% - 2rem));
    margin: 0 auto 3.5rem;
    padding-top: 3.25rem;
}

.sheet.narrow {
    width: min(32rem, calc(100% - 2rem));
}

.product {
    width: min(1080px, calc(100% - 2.5rem));
    margin: 0 auto 4rem;
    padding-top: 3rem;
}

.mast {
    margin-bottom: 1.85rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--line);
}

.mast.center {
    text-align: center;
}

.mast h1 {
    margin-bottom: 0.55rem;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.mast hgroup {
    margin-bottom: 0;
}

.mast hgroup > :last-child,
.lede,
.meta {
    color: var(--pico-muted-color);
}

.lede {
    max-width: 40rem;
    margin-bottom: 0;
    font-size: 1.05rem;
}

.mast.center .lede {
    margin-inline: auto;
}

.kicker {
    margin: 0 0 0.75rem;
    color: var(--pico-primary);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.logo {
    margin-right: 0.4rem;
    color: var(--pico-primary);
    font-size: 0.78em;
}

.store {
    margin: 1.15rem 0 0;
}

.store img {
    height: 46px;
    width: auto;
}

.stage {
    display: grid;
    gap: 1.5rem 2.25rem;
    align-items: start;
}

.features {
    counter-reset: feature;
    display: grid;
    gap: 0.8rem;
}

article.feature {
    counter-increment: feature;
    margin: 0;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
    box-shadow: none;
}

article.feature h3 {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}

article.feature h3::before {
    content: counter(feature, decimal-leading-zero);
    flex: 0 0 auto;
    color: var(--pico-primary);
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

article.feature p {
    margin: 0;
    color: var(--pico-muted-color);
    font-size: 0.95rem;
}

.device {
    margin: 0;
}

.device img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: light-dark(#f4f5f8, #0d1016);
    box-shadow: 0 16px 40px light-dark(#1c243314, #0006);
}

.band {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--pico-color) 3%, transparent);
}

.band-inner {
    display: grid;
    gap: 1.25rem;
    width: min(1080px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 2.1rem 0 2.4rem;
}

.band h2 {
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.band p {
    margin-bottom: 0;
    color: var(--pico-muted-color);
}

.band-actions a {
    display: block;
    width: 100%;
    margin-bottom: 0.65rem;
}

.band-actions a:last-child {
    margin-bottom: 0;
}

.panel {
    padding: 0.4rem 1.2rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: var(--surface);
}

.notice {
    margin: 1.05rem 0 0;
    color: var(--pico-muted-color);
    font-size: 0.88rem;
}

.notice strong {
    color: var(--pico-color);
    font-weight: 600;
}

.prose {
    line-height: 1.7;
}

.prose > h2,
.prose > h3 {
    letter-spacing: -0.02em;
}

.prose > h2 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
    font-size: 1.18rem;
}

.prose > h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.prose h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 1.02rem;
}

.prose p,
.prose li {
    color: color-mix(in srgb, var(--pico-color) 88%, var(--pico-muted-color));
}

.prose li + li {
    margin-top: 0.3rem;
}

.prose article {
    margin-bottom: 0.8rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface);
    box-shadow: none;
}

.prose article h2 {
    margin-top: 0;
    margin-bottom: 0.45rem;
    padding-top: 0;
    border-top: 0;
    font-size: 1.08rem;
}

.prose blockquote {
    margin-inline: 0;
    border-left: 2px solid color-mix(in srgb, var(--pico-primary) 45%, var(--line));
}

.prose kbd,
.prose mark {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pico-muted-color);
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 500;
}

.prose kbd {
    margin-right: 0.3rem;
}

.prose mark {
    color: var(--pico-color);
    font-weight: 650;
}

.prose mark:not(:last-of-type)::after {
    content: "·";
    margin: 0 0.55rem;
    color: var(--pico-muted-color);
    font-weight: 400;
}

.sheet-foot {
    width: min(42rem, calc(100% - 2rem));
    margin: -1.5rem auto 3.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    color: var(--pico-muted-color);
}

.sheet-foot h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.sheet-foot p:last-child {
    margin-bottom: 0;
}

@media (width >= 720px) {
    .features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (width >= 960px) {
    .stage {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .device {
        position: sticky;
        top: 1.5rem;
    }

    .band-inner {
        grid-template-columns: 1.45fr 0.7fr;
        align-items: center;
    }
}

@media (width < 960px) {
    .device {
        order: -1;
        width: min(220px, 62%);
        margin: 0 auto 0.4rem;
    }
}

@media (width < 700px) {
    .sheet,
    .product {
        padding-top: 1.6rem;
    }

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