/* Explorer introduction section: text + image, then personal-profile benefits. */
.explorer-intro { padding-block: var(--space-12, 3rem); }
.explorer-intro__main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.explorer-intro--image-left .explorer-intro__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.explorer-intro--image-left .explorer-intro__text { order: 2; }
.explorer-intro__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; color: var(--eyebrow-color, var(--bs-primary, var(--color-primary-600))); margin-bottom: .75rem; }
.explorer-intro__heading { font-family: var(--font-heading, inherit); font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; margin: 0 0 1rem; }
.explorer-intro__body { font-size: 1.05rem; line-height: 1.65; color: var(--text-secondary, inherit); margin: 0 0 1rem; }
.explorer-intro__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.explorer-intro__supporting { margin: 1rem 0 0; font-size: .95rem; color: var(--text-secondary, inherit); }
.explorer-intro__media img { width: 100%; height: auto; max-height: 28rem; object-fit: cover; border-radius: var(--radius-xl, 1.5rem); display: block; }
/* Illustrations (unDraw SVG) keep their whole drawing instead of being cropped. */
.explorer-intro__media img[src$=".svg"] { object-fit: contain; }
.explorer-intro__benefits { margin-top: clamp(2rem, 5vw, 4rem); text-align: center; }
.explorer-intro__benefits-heading { font-family: var(--font-heading, inherit); font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 .4rem; }
.explorer-intro__benefits-text { color: var(--text-secondary, inherit); margin: 0 0 1.5rem; }
.explorer-intro__join { margin-top: 1.75rem; }
.explorer-intro a:focus-visible { outline: 3px solid color-mix(in srgb, var(--bs-primary, var(--color-primary-500)) 55%, transparent); outline-offset: 2px; }
@media (max-width: 767.98px) {
    .explorer-intro__main, .explorer-intro--image-left .explorer-intro__main { grid-template-columns: minmax(0, 1fr); }
    .explorer-intro--image-left .explorer-intro__text { order: 0; }
    .explorer-intro__actions .btn { width: 100%; }
}