/* Keep the landing header and hero close together; avoid the oversized blank band. */
.landing-page .page-wrap:before {
    margin-bottom: 6px;
}

.landing-page .landing-utility {
    position: relative;
    z-index: 2;
    padding-top: 8px;
    padding-bottom: 8px;
}

.landing-page .landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 28px;
}

.landing-page .landing-hero-copy {
    width: 100%;
    max-width: none;
}

.landing-page .landing-hero-copy > p {
    max-width: 760px;
}

.landing-page .landing-toolbar h2 {
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
}

.landing-page .landing-toolbar h2 em {
    color: #ef5a22;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 500;
}

/* Brand-colored line art fills the hero's otherwise empty right side. */
.landing-page .landing-hero {
    isolation: isolate;
}

.landing-page .landing-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: clamp(-150px, calc(-8vw - 20px), -80px);
    right: 0;
    bottom: -12px;
    width: min(50%, 680px);
    border-radius: 48% 0 0 42%;
    pointer-events: none;
    background:
        repeating-linear-gradient(7deg, rgba(111, 83, 58, .018) 0 1px, transparent 1px 5px),
        radial-gradient(ellipse at 56% 38%, rgba(255, 255, 255, .96) 0%, rgba(255, 248, 237, .78) 30%, rgba(250, 222, 196, .5) 58%, transparent 80%),
        radial-gradient(ellipse at 78% 68%, rgba(241, 90, 36, .12), transparent 52%),
        radial-gradient(ellipse at 28% 78%, rgba(123, 110, 93, .12), transparent 45%);
    filter: blur(26px);
    opacity: .88;
}

.landing-page .landing-hero-copy {
    z-index: 1;
}

/* Keep the landing document itself inside the phone viewport; intentional
   horizontal carousels retain their own scroll area. */
html:has(body.landing-page),
body.landing-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: #faf8f5;
    overflow-x: clip;
}

body.landing-page .app-shell,
body.landing-page .main-content {
    width: 100%;
    flex: 0 1 100%;
}

body.landing-page .app-shell,
body.landing-page .main-content,
body.landing-page .page-wrap,
body.landing-page .landing-hero,
body.landing-page .landing-toolbar,
body.landing-page .landing-groups,
body.landing-page .global-archive-slot {
    min-width: 0;
    max-width: 100%;
}

body.landing-page .page-wrap {
    width: 100%;
    padding-bottom: 0;
}

/* Ensure small landing-page labels and status text remain readable. */
body.landing-page .landing-kicker,
body.landing-page .how-step-number,
body.landing-page .group-language {
    color: #9a3412;
}

body.landing-page .group-index,
body.landing-page .group-card-closed {
    color: #52525b;
}

body.landing-page .group-card-link {
    color: #a63d12;
}

@media (max-width: 960px) {
    .landing-page .landing-hero {
        min-height: 0;
        padding-top: 22px;
        padding-bottom: 32px;
    }

}

@media (max-width: 700px) {
    body.landing-page .landing-hero-art,
    body.landing-page .landing-hero-copy > .landing-kicker {
        display: none !important;
    }

    .landing-page .landing-utility {
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .landing-page .landing-toolbar h2 {
        font-size: clamp(32px, 9vw, 42px);
    }

    .landing-page .landing-hero {
        min-height: 0;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .landing-page .landing-hero::after {
        top: 12%;
        right: -22%;
        bottom: 4%;
        width: 88%;
        border-radius: 50%;
        background:
            repeating-linear-gradient(7deg, rgba(111, 83, 58, .014) 0 1px, transparent 1px 5px),
            radial-gradient(ellipse at 72% 48%, rgba(255, 239, 222, .66), transparent 72%),
            radial-gradient(ellipse at 82% 68%, rgba(241, 90, 36, .08), transparent 60%);
        filter: blur(22px);
        opacity: .72;
    }

}

.join-discovery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 12px 0 28px;
}
.join-discovery-heading h1 { margin: 10px 0 8px; color: #171717; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.055em; }
.join-discovery-heading p { margin: 0; color: #6b6b70; line-height: 1.6; }
.join-discovery-filter { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 20px; color: #55545a; font-size: 12px; font-weight: 700; }
.join-discovery-filter .input { width: min(250px, 58vw); min-height: 42px; border: 1px solid #e7ded7; border-radius: 12px; background: #fff; }
.join-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 24px; }
.join-discovery-card { display: flex; min-width: 0; flex-direction: column; padding: 22px; border: 1px solid #eee6df; border-radius: 18px; background: linear-gradient(160deg, #fff 0%, #fffaf6 100%); box-shadow: 0 10px 28px rgba(48, 32, 20, .045); }
.join-discovery-card-top { display: flex; justify-content: space-between; align-items: center; }
.join-discovery-group-name { display: block; margin-top: 22px; color: #e9581c; }
.join-discovery-card h2 { margin: 7px 0 9px; color: #171717; font-size: 22px; letter-spacing: -.035em; }
.join-discovery-card p { flex: 1; margin: 0 0 20px; color: #696970; font-size: 13px; line-height: 1.6; }
.join-discovery-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; color: #5f5b58; font-size: 11px; }
.join-discovery-meta small { grid-column: 1 / -1; color: #88817c; }
.join-discovery-card > .button { display: flex; justify-content: center; gap: 10px; }
.join-discovery-empty { grid-column: 1 / -1; padding: clamp(28px, 6vw, 58px); border: 1px dashed #e8d8cb; border-radius: 20px; background: #fffaf6; text-align: center; }
.join-discovery-empty > span { color: #e9581c; font-size: 32px; }
.join-discovery-empty h2 { margin: 12px 0 8px; color: #171717; font-size: clamp(20px, 3vw, 28px); }
.join-discovery-empty p { max-width: 560px; margin: 0 auto 20px; color: #6b6b70; line-height: 1.6; }
@media (max-width: 900px) { .join-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .join-discovery-heading { align-items: stretch; flex-direction: column; margin-top: 4px; }
    .join-discovery-heading > .button { align-self: flex-start; }
    .join-discovery-filter { align-items: stretch; flex-direction: column; gap: 7px; }
    .join-discovery-filter .input { width: 100%; }
    .join-discovery-grid { grid-template-columns: 1fr; gap: 12px; }
    .join-discovery-card { padding: 19px; }
}