/* Tutvustusvaade sisselogimata külastajale (includes/guest_intro.php) */
.gi-wrap { max-width: 880px; }
.gi-hero { text-align: center; margin: 0 auto 32px; max-width: 640px; }
.gi-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px; margin-bottom: 16px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color); font-size: 1.5rem;
}
.gi-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 12px;
}
.gi-lead { font-size: 1.125rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 24px; }
.gi-cta { justify-content: center; margin-bottom: 8px; }
.gi-reason { font-size: 0.875rem; color: var(--text-muted); }

.gi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gi-card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 12px; padding: 24px; box-shadow: var(--shadow-card);
}
.gi-h2 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.gi-features { list-style: none; margin: 0; padding: 0; }
.gi-features li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; color: var(--text-primary); line-height: 1.5; }
.gi-features li:last-child { margin-bottom: 0; }
.gi-features .fa-check { color: var(--accent-color); flex-shrink: 0; }
.gi-steps { list-style: none; margin: 0; padding: 0; counter-reset: gi-step; }
.gi-steps li {
    counter-increment: gi-step; display: flex; gap: 12px; align-items: baseline;
    margin-bottom: 12px; color: var(--text-primary); line-height: 1.5;
}
.gi-steps li:last-child { margin-bottom: 0; }
.gi-steps li::before {
    content: counter(gi-step); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent); color: var(--accent-color);
}
.gi-join { margin-top: 24px; text-align: center; color: var(--text-secondary); }
.gi-join .fa-key { color: var(--text-muted); margin-right: 4px; }
.gi-join a { color: var(--text-link); font-weight: 600; margin-left: 4px; }