/* Shared footer: the homepage design is used on every marketing page. */
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/clash-grotesk/clash-grotesk-variable.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}
.ss-site-footer {
    --ss-font-heading: "Clash Grotesk", sans-serif;
    padding: 20px;
    background: #f6f4ff;
    letter-spacing: -.02em;
}
.ss-site-footer .ss-footer-card {
    isolation: isolate;
    width: 100%;
    min-height: 800px;
    padding: 100px 80px 0;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background: #7051ff;
}
.ss-footer-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/footer-background.webp") center / 100% 100% no-repeat;
    pointer-events: none;
}
.ss-footer-topline { display: flex; align-items: center; justify-content: space-between; }
.ss-footer-brand, .ss-footer-columns h3, .ss-footer-wordmark { font-family: var(--ss-font-heading); font-weight: 600; letter-spacing: normal; }
.ss-footer-brand { font-size: 30px; }
.ss-socials { display: flex; gap: 10px; }
.ss-socials img { width: 38px; height: 38px; }
.ss-footer-columns { display: flex; justify-content: space-between; gap: 40px; margin-top: 50px; }
.ss-footer-columns h3 { font-size: 32px; }
.ss-footer-columns ul { padding-left: 18px; }
.ss-footer-columns li { margin: 11px 0; }
.ss-footer-columns a:hover { text-decoration: underline; }
.ss-footer-meta { display: flex; margin-top: 50px; align-items: center; justify-content: space-between; font-size: 13px; }
.ss-footer-meta nav { display: flex; gap: 25px; }
.ss-footer-wordmark {
    margin: 40px 0 0 -100px;
    width: calc(100% + 200px);
    color: #fff;
    font-size: clamp(150px, 18.5vw, 290px);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.04em;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 9px 0 #fff200, 0 18px 0 #f200ff, 0 27px 0 #1ab3ff, 0 36px 0 #00af57;
    transform: translateY(30px);
}
@media (max-width: 900px) {
    .ss-site-footer { min-height: 1095px; padding: 0 11px 12px; }
    .ss-site-footer .ss-footer-card { width: 100%; min-height: 1080px; padding: 20px 30px 0; border-radius: 18px; }
    .ss-footer-topline { flex-direction: column; gap: 16px; }
    .ss-footer-columns { display: block; margin-top: 25px; }
    .ss-footer-columns nav { margin-bottom: 14px; }
    .ss-footer-columns h3 { margin-bottom: 14px; font-size: 28px; }
    .ss-footer-columns ul { margin-bottom: 0; }
    .ss-footer-meta { display: block; margin-top: 24px; font-size: 12px; }
    .ss-footer-meta nav { margin-top: 25px; flex-direction: column; gap: 8px; }
    .ss-footer-wordmark { width: auto; margin: 38px 0 0; font-size: clamp(50px, 16vw, 72px); transform: none; }
}