/* HB Join Welcome — Frontend */

.hbjw-wrap-front {
        max-width: 720px;
        margin: 0 auto;
        font-family: inherit;
}

.hbjw-card {
        background: linear-gradient(180deg, #eaf7f7 0%, #f5fbfb 100%);
        border-radius: 18px;
        padding: 34px 30px;
        box-shadow: 0 4px 22px rgba(26, 68, 68, 0.08);
        text-align: center;
}

.hbjw-headline {
        margin: 0 0 12px;
        color: #12302f;
        font-weight: 800;
        line-height: 1.2;
        font-size: var(--hbjw-h-size-m, 26px);
}

.hbjw-intro {
        margin: 0 auto 24px;
        max-width: 560px;
        color: #3c5a5a;
        line-height: 1.6;
        font-size: var(--hbjw-p-size-m, 15px);
}

.hbjw-benefits {
        list-style: none;
        margin: 0 0 8px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: left;
}

.hbjw-benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #ffffff;
        border-radius: 12px;
        padding: 12px 16px;
        box-shadow: 0 1px 4px rgba(18, 48, 47, 0.07);
}

.hbjw-benefit-icon {
        font-size: 1.35em;
        line-height: 1;
        flex-shrink: 0;
}

.hbjw-benefit-text {
        color: #234040;
        font-size: 0.95em;
        line-height: 1.4;
}

.hbjw-button {
        display: inline-block;
        margin-top: 26px;
        padding: 15px 34px;
        background: #1a4444;
        color: #ffffff !important;
        font-weight: 700;
        text-decoration: none;
        border-radius: 999px;
        transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 3px 10px rgba(26, 68, 68, 0.25);
}

.hbjw-button:hover,
.hbjw-button:focus {
        background: #123333;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(26, 68, 68, 0.3);
}

.hbjw-button.hbjw-tap-active {
        transform: scale(0.97);
        box-shadow: 0 2px 6px rgba(26, 68, 68, 0.25);
}

/* ── Desktop layout (auto-responsive breakpoint) ── */
@media (min-width: 641px) {
        .hbjw-mode-auto .hbjw-card,
        .hbjw-mode-desktop .hbjw-card {
                padding: 46px 54px;
        }
        .hbjw-mode-auto .hbjw-headline,
        .hbjw-mode-desktop .hbjw-headline {
                font-size: var(--hbjw-h-size-d, 38px);
        }
        .hbjw-mode-auto .hbjw-intro,
        .hbjw-mode-desktop .hbjw-intro {
                font-size: var(--hbjw-p-size-d, 17px);
        }
        .hbjw-mode-auto .hbjw-benefits,
        .hbjw-mode-desktop .hbjw-benefits {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px 22px;
        }
}

/* ── Forced desktop layout, regardless of actual viewport width ── */
.hbjw-mode-desktop .hbjw-card {
        padding: 46px 54px;
}
.hbjw-mode-desktop .hbjw-headline {
        font-size: var(--hbjw-h-size-d, 38px);
}
.hbjw-mode-desktop .hbjw-intro {
        font-size: var(--hbjw-p-size-d, 17px);
}
.hbjw-mode-desktop .hbjw-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 22px;
}

/* ── Forced mobile layout, regardless of actual viewport width ── */
.hbjw-mode-mobile .hbjw-card {
        padding: 30px 22px;
}
.hbjw-mode-mobile .hbjw-headline {
        font-size: var(--hbjw-h-size-m, 26px);
}
.hbjw-mode-mobile .hbjw-intro {
        font-size: var(--hbjw-p-size-m, 15px);
}
.hbjw-mode-mobile .hbjw-benefits {
        display: flex;
        flex-direction: column;
}

/* ── Fade-in animation (only applied when the Animate setting is on) ── */
.hbjw-animate .hbjw-fade {
        opacity: 0;
        transform: translateY(14px);
        animation: hbjwFadeIn 0.6s ease forwards;
}
.hbjw-animate .hbjw-headline.hbjw-fade { animation-delay: 0ms; }
.hbjw-animate .hbjw-intro.hbjw-fade { animation-delay: 120ms; }
.hbjw-animate .hbjw-benefit.hbjw-fade { animation-delay: calc(220ms + var(--hbjw-delay, 0ms)); }
.hbjw-animate .hbjw-button.hbjw-fade { animation-delay: 520ms; }

@keyframes hbjwFadeIn {
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

@media (prefers-reduced-motion: reduce) {
        .hbjw-animate .hbjw-fade {
                animation: none;
                opacity: 1;
                transform: none;
        }
}