/* ==========================================================================
   About Us intro (register page) - matches the About Us page panels.

   Loaded only while the intro is showing, together with brand.css, on
   body.brand-page (see auth/register.php). Every colour comes from the same
   brand.css tokens the About page uses (--br-empty-bg, --br-empty-border,
   --br-empty-glow, --br-text, --br-muted), so the two always match in light,
   dark and auto mode. Overrides the older .about-intro rules in style-v2.css.
   ========================================================================== */

body.brand-page .about-intro {
    background: rgba(10, 8, 12, .55);
}

/* Skip: a brand pill instead of the old grey button */
body.brand-page .about-intro-skip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--br-text);
    background: var(--br-card-bg);
    border: 1.5px solid var(--br-empty-border);
    border-radius: 999px;
}
body.brand-page .about-intro-skip:hover { border-color: var(--br-pink); background: var(--br-card-bg); }

/* The card itself is the About panel: same tint, border, radius and glow.
   The tint is layered over the page colour so it looks the same here as it
   does on the About page, instead of picking up the dark blurred backdrop. */
body.brand-page .about-intro-card {
    padding: 0;
    background: linear-gradient(var(--br-empty-bg), var(--br-empty-bg)), var(--br-page);
    border: 1.5px solid var(--br-empty-border);
    border-radius: 20px;
    box-shadow: var(--br-empty-glow);
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .35));
}

/* No second tinted panel inside any more: the slides scroll inside the card */
body.brand-page .about-intro-slides {
    inset: 0;
    border-radius: 20px;
    background: transparent;
    scrollbar-color: var(--br-empty-border) transparent;
}

body.brand-page .about-slide {
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    color: var(--br-text);
}

/* Text: same sizes and colours as the About page */
body.brand-page .about-slide-heading {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--br-text);
    -webkit-text-stroke: 0;
}
body.brand-page .about-slide-body {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--br-muted);
}

/* Image: centred with rounded corners, like the About page */
body.brand-page .about-slide-media {
    height: auto;
    align-self: center;
    align-items: center;
    gap: 12px;
}
body.brand-page .about-slide-media img {
    max-width: 100%;
    max-height: min(50vh, 420px);
    border-radius: 14px;
}

/* Read aloud + language: small outlined pills in the brand style */
body.brand-page .about-slide-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
body.brand-page .about-slide-speak,
body.brand-page .about-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--br-text);
    background: transparent;
    border: 1.5px solid var(--br-empty-border);
    border-radius: 999px;
    cursor: pointer;
}
body.brand-page .about-slide-speak:hover,
body.brand-page .about-lang-toggle:hover { border-color: var(--br-pink); }
body.brand-page .about-slide-speak[hidden] { display: none; }

body.brand-page .about-lang-picker { position: relative; }
body.brand-page .about-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    min-width: 190px;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 12px;
    box-shadow: var(--br-menu-shadow);
}
body.brand-page .about-lang-menu[hidden] { display: none; }
body.brand-page .about-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--br-text);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
body.brand-page .about-lang-option:hover { background: var(--br-pink-soft); }

/* "Get Started" uses .br-btn from brand.css; just space it out */
body.brand-page .about-intro-finish { margin-top: 22px; }

@media (max-width: 720px) {
    body.brand-page .about-intro-card { padding: 0; }
    body.brand-page .about-intro-slides { inset: 0; }
    body.brand-page .about-slide-body { font-size: 16px; }
    body.brand-page .about-slide-controls { justify-content: center; }
    body.brand-page .about-lang-menu { left: 50%; transform: translateX(-50%); }
}