/* Contact page: branded channel cards using the shared dark/var(--main) storefront palette. */
.contact-page {
    max-width:850px;
    margin:65px auto 80px;
    color:var(--font)
}

.contact-heading {
    text-align:center;
    margin-bottom:40px
}

.contact-eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:2.7px;
    color:var(--main)
}

.contact-heading h1 {
    font-size:42px;
    font-weight:800;
    letter-spacing:-1.3px;
    margin:17px 0;
    color:var(--font)
}

.contact-heading h1 span {
    color:var(--main);
    margin-left:10px
}

.contact-heading p {
    font-size:13px;
    line-height:1.9;
    color:var(--muted)
}

.contact-channel-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}

.contact-channel {
    padding:32px;
    position:relative;
    border:1px solid var(--surface-raised);
    border-radius:17px;
    background:linear-gradient(135deg,var(--surface),var(--surface));
    overflow:hidden;
    transition:transform .25s,border-color .25s,box-shadow .25s;
    animation:contact-enter .55s ease both
}

.contact-channel:nth-child(2) {
    animation-delay:.1s
}

.contact-channel:hover {
    transform:translateY(-5px);
    border-color:var(--border);
    box-shadow:0 18px 50px color-mix(in srgb, var(--background) 20.00%, transparent)
}

.contact-channel-icon {
    height:60px;
    width:60px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:27px;
    margin-bottom:27px;
    background:color-mix(in srgb, var(--sub) 14.12%, transparent);
    color:var(--sub);
    border:1px solid color-mix(in srgb, var(--sub) 21.96%, transparent)
}

.contact-channel--discord .contact-channel-icon {
    background:color-mix(in srgb, var(--sub) 14.12%, transparent);
    color:var(--sub);
    border-color:color-mix(in srgb, var(--sub) 21.96%, transparent)
}

.contact-channel-label {
    font-size:9px;
    letter-spacing:2px;
    color:var(--muted)
}

.contact-channel h2 {
    font-size:25px;
    font-weight:750;
    margin:8px 0 12px;
    color:var(--font)
}

.contact-channel p {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    margin-bottom:27px
}

.contact-channel-link,.contact-channel-unavailable {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    border-top:1px solid var(--surface-raised);
    padding-top:22px;
    text-decoration:none;
    color:var(--font);
    font-weight:500
}

.contact-channel-link:hover {
    color:var(--main)
}

.contact-channel-link i {
    font-size:12px;
    color:var(--muted)
}

.contact-channel-unavailable {
    color:var(--muted)
}

.contact-note {
    display:flex;
    align-items:center;
    gap:17px;
    background:var(--surface);
    border:1px solid var(--surface-raised);
    border-radius:12px;
    padding:23px 27px;
    margin-top:25px
}

.contact-note>i {
    font-size:23px;
    color:var(--main)
}

.contact-note strong {
    font-size:12px;
    font-weight:600;
    color:var(--font)
}

.contact-note p {
    font-size:11px;
    color:var(--muted);
    margin:6px 0 0;
    line-height:1.7
}

.contact-home-link {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:12px;
    text-decoration:none;
    color:var(--muted);
    margin-top:33px
}

.contact-home-link:hover {
    color:var(--font)
}

.contact-page a:focus-visible {
    outline:2px solid var(--main);
    outline-offset:5px
}

@keyframes contact-enter {
    from {
        opacity:0;
        transform:translateY(14px)
    }
    to {
        opacity:1;
        transform:none
    }
}

@media(max-width:600px) {
    .contact-page {
        margin:35px auto 50px
    }
    .contact-heading h1 {
        font-size:29px
    }
    .contact-heading h1 span {
        margin-left:5px
    }
    .contact-channel-grid {
        grid-template-columns:1fr;
        gap:15px
    }
    .contact-channel {
        padding:26px
    }
    .contact-channel-icon {
        height:52px;
        width:52px;
        font-size:25px;
        margin-bottom:20px
    }
    .contact-note {
        padding:20px
    }
    .contact-heading p {
        font-size:12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .contact-channel {
        animation:none;
        transition:none
    }
}