/*
 * NCLEX Nerds CSS Bundle: landing.bundle.css
 * Group: public
 * Auto-generated by scripts/bundle_css.py — DO NOT EDIT
 * Edit the source files instead.
 * Sources: _public-base.css, landing-base.css, landing-desktop.css, landing-mobile-portrait.css, landing-mobile-landscape.css, landing-atom-base.css, landing-atom-desktop.css, landing-atom-mobile-portrait.css, landing-atom-mobile-landscape.css, landing-showcase-dashboard-base.css, landing-showcase-dashboard-desktop.css, landing-showcase-dashboard-mobile-portrait.css, landing-showcase-dashboard-mobile-landscape.css, landing-showcase-drill-base.css, landing-showcase-drill-desktop.css, landing-showcase-drill-mobile-portrait.css, landing-showcase-drill-mobile-landscape.css, landing-showcase-video-base.css, landing-showcase-video-desktop.css, landing-showcase-video-mobile-portrait.css, landing-showcase-video-mobile-landscape.css
 */

/* === _public-base.css === */
/*
 * NCLEX Nerds Public CSS — Base Layer
 * Shared variables, reset, typography. NO @media queries here.
 * Every public page bundle starts with this file.
 */

:root {
    /* Brand — purple gradient pulled from landing.css for consistency */
    --primary-purple: #7c3aed;
    --primary-purple-dark: #6d28d9;
    --secondary-purple: #4f46e5;
    --gradient-main: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);

    /* Backgrounds */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-dark: #0f172a;
    --bg-banner-warn: #fef3c7;
    --bg-banner-info: #dbeafe;
    --bg-banner-success: #dcfce7;

    /* Borders */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #6b7280;
    --text-inverse: #f8fafc;

    /* Semantic */
    --green: #22c55e;
    --green-dark: #15803d;
    --green-light: #dcfce7;
    --red: #ef4444;
    --red-light: #fef2f2;
    --amber: #f59e0b;
    --amber-light: #fef3c7;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 8px 32px rgba(124, 58, 237, 0.25);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;

    /* Layout */
    --header-height: 72px;
    --container-max: 1200px;
    --container-narrow: 920px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* ===== Reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-page);
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-purple);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
}

/* === landing-base.css === */
/*
 * Landing — Base Styles
 *
 * Every rule that should apply at EVERY viewport lives here (no @media
 * wrapper). The viewport-specific files (landing-{desktop,mobile-portrait,
 * mobile-landscape}.css) contain ONLY overrides layered on top of this.
 *
 * Site-wide base (vars, reset, typography) is in _public-base.css.
 * Do NOT duplicate those here.
 */


/* ==================== HEADER ==================== */
.header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--gradient-main);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

/* Top-right nav wrapper holding Sign in (text link) + Get Full Access (button) */
.header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* "Sign in" reads as a plain text link. It's a <button> so the signup
   modal's delegated `[data-signup-modal]` handler can bind it. */
.header-signin {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.header-signin:hover {
    color: var(--primary-purple);
}

/* Authed equivalent of `.header-signin` — same minimal text-link
   visual so the topbar layout stays consistent across tiers. */
.header-dashboard {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.header-dashboard:hover {
    color: var(--primary-purple);
    text-decoration: none;
}

.header-cta {
    padding: 10px 20px;
    background: var(--gradient-main);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.header-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
    text-decoration: none;
}

/* ==================== HERO ==================== */
.hero {
    background: var(--bg-dark);
    /* Top padding tightened so the atom + title + CTAs fit above the
       fold on a typical 13" laptop. Bottom keeps 80px breathing room
       before the showcase. */
    padding: 32px 24px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.3), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(79, 70, 229, 0.2), transparent);
    pointer-events: none;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title {
    /* Outfit at 900 — same family the showcase fixtures use, so the
       hero finally matches the rest of the page typographically. */
    font-family: 'Outfit', 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 5.4vw, 3.6rem);
    font-weight: 900;
    color: var(--text-inverse);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 32px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: var(--primary-purple);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-glow);
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.4);
}

.hero-cta .arrow { transition: transform 0.2s ease; }
.hero-cta:hover .arrow { transform: translateX(4px); }

/* Hero CTA row — two buttons side-by-side (paid primary, free outline).
   Wraps on narrow widths via the mobile-portrait override. */
.hero-cta-row {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta-primary { text-decoration: none; }

.hero-cta.hero-cta-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
}

.hero-cta.hero-cta-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ==================== SHARED SECTION STYLES ==================== */
.section-content { max-width: 1100px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 48px; }

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.section-header-with-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-logo { height: 40px; width: auto; }
.section-header-with-logo h2 { margin-bottom: 0; }

/* ==================== TEAM SECTION ==================== */
.team-section {
    padding: 80px 24px;
    background: var(--gradient-subtle);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.team-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--primary-purple);
}

.team-portrait {
    /* Rounded-square: keep the source aspect (~800:896 ≈ 0.893) visible,
       clip to a soft radius. Width follows the card; height computes
       from aspect-ratio so both photos render consistently even if the
       underlying PNGs drift in pixel count. */
    width: 100%;
    aspect-ratio: 800 / 896;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.team-body { padding: 24px 28px 28px; }

.team-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.team-credentials {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-purple);
    font-weight: 600;
    margin-bottom: 16px;
}

.team-bio {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.team-bio p { margin-bottom: 12px; }
.team-bio p:last-child { margin-bottom: 0; }

/* ==================== SHOWCASE SECTION ====================
   All current showcase items are `--live` recreations of app surfaces.
   The wrapper has zero chrome (transparent bg, no border) so the
   caption + interactive fixture read as "title + interactive proof"
   rather than a card-in-card. The non-live image-card styling that
   used to live here is gone — fixtures bring their own chrome. */
.showcase-section { padding: 80px 24px; background: var(--bg-page); }

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Span the full grid width — every current fixture wants this since the
   live recreations don't fit cleanly in a half-grid cell. */
.showcase-item--full { grid-column: 1 / -1; }

.showcase-item--live {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: default;
}
.showcase-item--live:hover {
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.showcase-caption {
    padding: 0 0 14px 0;
    background: transparent;
    border: none;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.showcase-caption-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.25;
}

.showcase-caption-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== "Try me" pulse — applied to live cards until first scroll =====
   Until the user scrolls the card into view, both the inner frame's
   border AND a "Try it out!" label above the top edge pulse in sync,
   peaking gold every 2.4s. Once the card hits the viewport (>=60%
   visible), JS removes `.is-untried` and the pulse stops cleanly.

   The .showcase-frame-wrap exists specifically to anchor this label —
   it wraps just the live FRAME (not the caption), so `top: -16px` on
   its ::before puts the label exactly above the frame's top edge,
   not above the caption block sitting above the frame. */
.showcase-frame-wrap {
    position: relative;
}
.showcase-frame-wrap.is-untried::before {
    content: 'Try it out!';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    padding: 5px 14px;
    background: linear-gradient(135deg, #E8B230 0%, #B8881A 100%);
    color: #1F1A33;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(184, 136, 26, 0.45);
    pointer-events: none;
    opacity: 0;
    animation: lps-tryme-label 2.4s ease-in-out infinite;
}

/* Pulse on the inner frame's border — covers all four fixture types
   (dashboard, video, drill, vocab — the last two share .lps-frame--drill). */
.showcase-frame-wrap.is-untried .lps-frame--dashboard,
.showcase-frame-wrap.is-untried .lps-frame--video,
.showcase-frame-wrap.is-untried .lps-frame--drill {
    animation: lps-tryme-pulse 2.4s ease-in-out infinite;
}

@keyframes lps-tryme-pulse {
    0%, 100% {
        border-color: rgba(31, 26, 51, 0.22);
        box-shadow: 0 12px 32px rgba(31, 26, 51, 0.08),
                    0 2px 6px  rgba(31, 26, 51, 0.04);
    }
    50% {
        border-color: #E8B230;
        box-shadow: 0 12px 36px rgba(184, 136, 26, 0.30),
                    0 0 0 2px rgba(232, 178, 48, 0.18);
    }
}
@keyframes lps-tryme-label {
    0%, 100% {
        opacity: 0.55;
        transform: translateX(-50%) translateY(4px);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==================== PROBLEM SECTION ==================== */
.problem-section { padding: 80px 24px; background: var(--bg-card); }

.problem-list { max-width: 700px; margin: 0 auto; }

.problem-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-page);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
}

.problem-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--red-light);
    color: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.problem-text-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.problem-text-item span { font-size: 0.9rem; color: var(--text-secondary); }

.problem-solution {
    text-align: center;
    margin-top: 32px;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.problem-solution .raise-score-link {
    color: var(--primary-purple);
    font-weight: 700;
    text-decoration: none;     /* no underline by default */
    cursor: pointer;
    transition: color 0.2s ease;
}

/* No underline on hover either — per CP12 note. Deepen the color instead
   so the link still gives hover feedback. */
.problem-solution .raise-score-link:hover,
.problem-solution .raise-score-link:focus {
    color: var(--primary-purple-dark);
    text-decoration: none;
}

/* ==================== CTA SECTION ==================== */
.cta-section {
    padding: 80px 24px;
    background: var(--gradient-main);
    text-align: center;
}

.cta-content { max-width: 600px; margin: 0 auto; }

.cta-logo { height: 80px; width: auto; margin: 0 auto 20px; display: block; }

.cta-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.cta-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

.cta-button-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: white;
    color: var(--primary-purple);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.cta-button.cta-button-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

.cta-button.cta-button-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-button .arrow { transition: transform 0.2s ease; }
.cta-button:hover .arrow { transform: translateX(4px); }

/* ==================== FOOTER ==================== */
.footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    padding: 32px 24px;
    text-align: center;
}

.footer-text { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; }
.footer-text a { color: var(--primary-purple); text-decoration: none; }
.footer-text a:hover { text-decoration: underline; }

.footer-copyright { font-size: 0.8rem; color: var(--text-muted); }

/* Modal CSS moved to signup-modal-base.css (loaded by
   templates/_signup_modal_init.html on any page that needs the modal). */


/* ==================== PULL-CTA BAR ====================
   Lightweight inline CTA row dropped between major sections. Just two
   buttons centered with breathing room above and below — no panel,
   no banner, no background tint. Reduces scroll-to-CTA distance
   without competing with the section visuals. */
.pull-cta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 28px 24px;
    margin: 0 auto;
}
.pull-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.pull-cta--primary {
    background: linear-gradient(135deg, var(--primary-purple) 0%, #5E3FA0 100%);
    color: #fff;
    border: 1.5px solid #5E3FA0;
    box-shadow: 0 4px 12px rgba(94, 63, 160, 0.30);
}
.pull-cta--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(94, 63, 160, 0.40);
}
.pull-cta--outline {
    background: #fff;
    color: var(--primary-purple);
    border: 1.5px solid rgba(124, 92, 186, 0.40);
}
.pull-cta--outline:hover {
    background: rgba(124, 92, 186, 0.06);
    border-color: var(--primary-purple);
    transform: translateY(-1px);
}


/* ==================== INCLUDED SECTION (What's in the course) ====================
   Mirrors the ARMK pattern: H2 + intro, then a clean checklist. No
   icons / image columns / decorations — keeps focus on the SEO copy
   (unit names, counts, NGN, etc.) and matches user's "list is fine,
   no bloat" preference. */
.included-section {
    padding: 80px 24px;
    background: var(--bg-card);
}
.included-list {
    max-width: 820px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.included-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.included-list li:hover {
    border-color: rgba(124, 92, 186, 0.30);
    box-shadow: 0 4px 14px rgba(31, 26, 51, 0.05);
}
.included-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple) 0%, #5E3FA0 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(94, 63, 160, 0.30);
}
.included-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.included-text strong {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.included-text span {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.included-text strong + span strong {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-purple);
}


/* ==================== FAQ SECTION ====================
   Always-visible Q&A cards (no accordion). Native HTML structure
   pairs with the FAQPage JSON-LD in <head> for rich-result eligibility.
   No JS needed. */
.faq-section {
    padding: 80px 24px;
    background: var(--bg-card);
}
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    padding: 18px 22px;
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary-purple);
    border-radius: 12px;
}
.faq-q {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}
.faq-a {
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}
.faq-a a {
    color: var(--primary-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-a a:hover {
    color: #5E3FA0;
}
.faq-a strong {
    color: var(--text-primary);
    font-weight: 700;
}
.faq-a em {
    font-style: italic;
    color: var(--text-primary);
}

/* === landing-desktop.css === */
/*
 * Landing — Desktop Overrides
 * @media (min-width: 769px)
 *
 * Landing-wide rules live in landing-base.css (no @media wrapper).
 * This file is ONLY for rules that should behave differently at
 * desktop widths than at the base. Today the base already targets
 * desktop shape, so overrides here are empty — keep it that way
 * until a rule genuinely needs to diverge for desktop-only.
 */

@media (min-width: 769px) {

/* (intentionally empty — add desktop-only overrides here if needed) */

} /* end @media (min-width: 769px) */

/* === landing-mobile-portrait.css === */
/*
 * Landing — Mobile Portrait Styles
 * @media (max-width: 768px) and (orientation: portrait)
 *
 * Only overrides that differ from desktop. Rules that apply at BOTH
 * portrait AND landscape mobile are duplicated in
 * landing-mobile-landscape.css — keeps each file scoped to its media
 * query and makes orientation-specific tweaks easy.
 */

@media (max-width: 768px) and (orientation: portrait) {

/* Header */
.header { padding: 12px 16px; }
.brand-logo { height: 40px; width: auto; }
.brand-name { font-size: 1rem; }
.header-cta { padding: 8px 16px; font-size: 0.85rem; }

/* Hero */
.hero { padding: 48px 20px; }
.hero-title { font-size: 1.75rem; line-height: 1.2; }
.hero-subtitle { font-size: 1rem; margin-bottom: 24px; }

/* Two hero CTAs stack on portrait */
.hero-cta-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.hero-cta { padding: 16px 32px; font-size: 1rem; width: 100%; justify-content: center; }
.hero-cta-primary { padding: 16px 24px; font-size: 0.95rem; }

/* Section headers */
.section-header h2 { font-size: 1.5rem; }
.section-header p  { font-size: 1rem; }
.section-header    { margin-bottom: 32px; }

/* Section padding (every active section uses the same vertical rhythm) */
.showcase-section,
.included-section,
.problem-section,
.team-section,
.faq-section { padding: 48px 16px; }

/* Team grid collapses to 1 column, bios narrower */
.team-grid { grid-template-columns: 1fr; gap: 24px; max-width: 500px; }
.team-body { padding: 20px 22px 22px; }
.team-name { font-size: 1.2rem; }
.team-bio { font-size: 0.92rem; }

/* Showcase grid */
.showcase-grid { grid-template-columns: 1fr; }
.showcase-caption { padding: 0 0 12px 0; }
.showcase-caption-title { font-size: 0.95rem; }
.showcase-caption-desc  { font-size: 0.8rem; }

/* Problem items tighter */
.problem-item { padding: 16px; gap: 12px; }
.problem-icon { width: 28px; height: 28px; font-size: 0.8rem; }

/* CTA */
.cta-section { padding: 48px 20px; }
.cta-title { font-size: 1.5rem; }
.cta-subtitle { font-size: 1rem; margin-bottom: 24px; }
.cta-button-row { flex-direction: column; gap: 12px; }
.cta-button { padding: 16px 32px; font-size: 1rem; width: 100%; justify-content: center; }

/* Footer */
.footer { padding: 24px 16px; }

} /* end @media (max-width: 768px) and (orientation: portrait) */

/* === landing-mobile-landscape.css === */
/*
 * Landing — Mobile Landscape Styles
 * @media (max-width: 926px) and (orientation: landscape)
 *
 * Landscape has horizontal room but tiny vertical. Focus on compressing
 * vertical paddings / hero height; keep most 2-column grids two-column
 * rather than stacking.
 */

@media (max-width: 926px) and (orientation: landscape) {

/* Header — same compactness as portrait */
.header { padding: 10px 16px; }
.brand-logo { height: 36px; }
.brand-name { font-size: 0.95rem; }
.header-cta { padding: 7px 14px; font-size: 0.8rem; }

/* Hero — shorter vertical */
.hero { padding: 32px 20px; }
.hero-title { font-size: 1.6rem; line-height: 1.15; margin-bottom: 12px; }
.hero-subtitle { font-size: 0.95rem; margin-bottom: 18px; }

/* Two hero CTAs stay horizontal in landscape */
.hero-cta-row { gap: 10px; }
.hero-cta { padding: 12px 24px; font-size: 0.9rem; }

/* Section headers */
.section-header h2 { font-size: 1.4rem; }
.section-header p  { font-size: 0.95rem; }
.section-header    { margin-bottom: 24px; }

/* Section padding — tighter vertical */
.showcase-section,
.included-section,
.problem-section,
.team-section,
.faq-section { padding: 36px 20px; }

/* Team: 2-column is the whole point of landscape */
.team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.team-body { padding: 18px 20px 20px; }
.team-name { font-size: 1.15rem; }
.team-bio  { font-size: 0.88rem; }
.team-bio p { margin-bottom: 10px; }

/* Showcase: 2-column still */
.showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.showcase-caption { padding: 0 0 10px 0; }
.showcase-caption-title { font-size: 0.9rem; }
.showcase-caption-desc  { font-size: 0.78rem; }

/* Problem items */
.problem-item { padding: 14px 16px; gap: 12px; }
.problem-icon { width: 28px; height: 28px; font-size: 0.8rem; }
.problem-text-item strong { font-size: 0.95rem; }
.problem-text-item span   { font-size: 0.85rem; }

/* CTA */
.cta-section { padding: 36px 20px; }
.cta-title { font-size: 1.4rem; }
.cta-subtitle { font-size: 0.95rem; margin-bottom: 20px; }
.cta-button-row { gap: 10px; }
.cta-button { padding: 12px 28px; font-size: 0.95rem; }

/* Footer */
.footer { padding: 20px 16px; }

} /* end @media (max-width: 926px) and (orientation: landscape) */

/* === landing-atom-base.css === */
/*
 * Landing hero atom — BASE (no @media)
 *
 * NN nucleus + orbiting electron pairs. Decorative element placed
 * above the hero title. Pure SVG <animateMotion> motion + CSS
 * styling; no JS.
 *
 * Scope: .lps-atom · class prefix .lps-atom-*
 *
 * Viewport overrides:
 *   landing-atom-desktop.css           (≥927px)
 *   landing-atom-mobile-portrait.css   (≤768px portrait)
 *   landing-atom-mobile-landscape.css  (≤926px landscape)
 *
 * Palette: purple primary + gold accent — each electron's twin is
 * the opposite color, riding tightly behind to read as "double" (NN).
 */


/* =============================================================================
 * Container — square box, aspect-ratio 1:1, sized by viewport overrides.
 * pointer-events: none so the atom doesn't block hero CTAs underneath.
 * ============================================================================= */

.lps-atom {
    position: relative;
    width: 200px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 6px;
    pointer-events: none;
}


/* =============================================================================
 * Stacked SVGs (back + front) absolutely fill the container.
 * Stacking order: back svg → nucleus img → front svg.
 * ============================================================================= */

.lps-atom-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.lps-atom-svg--back  { z-index: 1; }
/* Stack: back-svg(1) → halo(2) → nucleus(3) → front-svg(4). */
.lps-atom-svg--front { z-index: 4; }


/* =============================================================================
 * Nucleus — the NN logo. Centered; sized to ~55% of container width
 * so the inner orbital track (rx=70 in a 300-unit viewbox) stays clear.
 * ============================================================================= */

/* Halo — diffuse blurred light field behind the NN logo. Sized larger
   than the nucleus image so it reads as the logo emitting energy into
   the orbital plane. Pulses in lockstep with the nucleus. */
.lps-atom-nucleus-halo {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 31%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(124,  92, 186, 0.55) 0%,
                rgba(124,  92, 186, 0.40) 40%,
                rgba(232, 178,  48, 0.18) 72%,
                transparent              100%);
    filter: blur(8px);
    pointer-events: none;
    animation: lps-atom-halo-pulse 1.37s ease-in-out infinite;
}
@keyframes lps-atom-halo-pulse {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1);    }
    50%      { opacity: 1.00; transform: translate(-50%, -50%) scale(1.04); }
}

.lps-atom-nucleus {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 56%;
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 14px rgba(94, 63, 160, 0.32))
            drop-shadow(0 0 28px rgba(232, 178, 48, 0.18));
    /* Subtle pulse so the nucleus feels energized, not static. */
    animation: lps-atom-nucleus-pulse 1.37s ease-in-out infinite;
}
@keyframes lps-atom-nucleus-pulse {
    0%, 100% {
        filter: drop-shadow(0 4px 14px rgba(94, 63, 160, 0.32))
                drop-shadow(0 0 28px rgba(232, 178, 48, 0.18));
    }
    50% {
        filter: drop-shadow(0 6px 22px rgba(94, 63, 160, 0.46))
                drop-shadow(0 0 40px rgba(232, 178, 48, 0.30));
    }
}


/* =============================================================================
 * Orbital guide rings — faint elliptical strokes so the eye reads
 * "atom" without overpowering the nucleus.
 * ============================================================================= */

.lps-atom-orbit {
    fill: none;
    stroke: rgba(124, 92, 186, 0.50);
    stroke-width: 1.8;
    stroke-dasharray: 4 5;
}


/* =============================================================================
 * Electron particles — purple + gold pairs riding the orbital tracks.
 * Each particle gets a soft drop-shadow glow in its own color so they
 * register as "energized" rather than flat dots.
 * ============================================================================= */

/* Single tight drop-shadow per color (was two stacked at 8px + 18px).
   Animating two filter blurs on 14 SVG circles via animateMotion forces
   a full per-frame re-rasterization of every particle's shadow — that's
   what made the desktop render look smear-y compared to mobile. One
   small shadow keeps the energized look without the per-frame cost.
   `will-change: transform` hints GPU layer promotion so the SMIL
   transform animation runs on the compositor instead of the main thread. */
.lps-atom-particle--purple {
    fill: #7C5CBA;
    filter: drop-shadow(0 0 4px rgba(124, 92, 186, 0.95));
    will-change: transform;
}

.lps-atom-particle--gold {
    fill: #E8B230;
    filter: drop-shadow(0 0 4px rgba(232, 178, 48, 0.95));
    will-change: transform;
}


/* =============================================================================
 * Reduced motion — visitors who prefer reduced motion see the atom
 * statically, with particles parked along their orbits but no animation.
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .lps-atom-nucleus { animation: none; }
    .lps-atom-particle animateMotion { display: none; }
}

/* === landing-atom-desktop.css === */
/*
 * Landing atom — Desktop overrides
 * @media (min-width: 927px)
 *
 * Bigger container so the nucleus reads + orbits feel grand.
 */

@media (min-width: 927px) {

.lps-atom {
    width: 240px;
    margin-bottom: 8px;
}

} /* end @media (min-width: 927px) */

/* === landing-atom-mobile-portrait.css === */
/*
 * Landing atom — Mobile portrait overrides
 * @media (max-width: 768px) and (orientation: portrait)
 */

@media (max-width: 768px) and (orientation: portrait) {

.lps-atom {
    width: 180px;
    margin-bottom: 14px;
}

} /* end @media (max-width: 768px) and (orientation: portrait) */

/* === landing-atom-mobile-landscape.css === */
/*
 * Landing atom — Mobile landscape overrides
 * @media (max-width: 926px) and (orientation: landscape)
 */

@media (max-width: 926px) and (orientation: landscape) {

.lps-atom {
    width: 160px;
    margin-bottom: 10px;
}

} /* end @media (max-width: 926px) and (orientation: landscape) */

/* === landing-showcase-dashboard-base.css === */
/*
 * Landing showcase: Welcome dashboard recreation — BASE (no @media).
 *
 * Faithful, marketing-tuned recreation of /welcome's two-panel
 * dashboard, scoped entirely under .lps-frame--dashboard so nothing
 * leaks into landing's other layouts. NOT an import of welcome/* —
 * this is its own self-contained surface.
 *
 * Class naming convention: lps- prefix (landing-page-showcase) keeps
 * a clear separation from .welcome-* on the actual app.
 *
 * Viewport overrides live in:
 *   landing-showcase-dashboard-desktop.css           (≥927px)
 *   landing-showcase-dashboard-mobile-portrait.css   (≤768px portrait)
 *   landing-showcase-dashboard-mobile-landscape.css  (≤926px landscape)
 *
 * Section order mirrors the partial: chrome → main → classroom →
 * test → marketing extras.
 */


/* ===== Per-side palette tokens (lesson purple / vocab green) =====
   Same values as welcome-classroom-base.css's [data-side="..."] tokens
   but kept inside .lps-frame so we don't pollute global :root. */
.lps-frame [data-side="lesson"] {
    --lps-side-primary:      #7C5CBA;
    --lps-side-primary-deep: #5E3FA0;
    --lps-side-primary-soft: rgba(124, 92, 186, 0.10);
    --lps-side-primary-line: rgba(124, 92, 186, 0.20);
}
.lps-frame [data-side="vocab"] {
    --lps-side-primary:      #6BAA75;
    --lps-side-primary-deep: #4A8856;
    --lps-side-primary-soft: rgba(107, 170, 117, 0.10);
    --lps-side-primary-line: rgba(107, 170, 117, 0.20);
}


/* ===== Per-panel theming (classroom = purple, test = blue) ===== */
.lps-panel[data-panel="classroom"] {
    --lps-panel-primary:      #7C5CBA;
    --lps-panel-primary-deep: #5E3FA0;
    --lps-panel-primary-soft: rgba(124, 92, 186, 0.10);
    --lps-panel-primary-line: rgba(124, 92, 186, 0.18);
}
.lps-panel[data-panel="test"] {
    --lps-panel-primary:      #5B8FB9;
    --lps-panel-primary-deep: #3E7298;
    --lps-panel-primary-soft: rgba(91, 143, 185, 0.10);
    --lps-panel-primary-line: rgba(91, 143, 185, 0.18);
}


/* ===== Frame outer container =====
   Sits inside the showcase grid as a "device frame" — rounded card,
   gentle shadow, content cropped via overflow:hidden. NOT viewport-
   locked (the real app is; the showcase is just a card). */
.lps-frame--dashboard {
    background: #F7F4EE;
    color: #1F1A33;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(31, 26, 51, 0.22);
    box-shadow: 0 12px 32px rgba(31, 26, 51, 0.08),
                0 2px 6px  rgba(31, 26, 51, 0.04);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
}


/* ===== Topbar ===== */
.lps-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(31, 26, 51, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 10px 18px;
}
.lps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lps-brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
}
.lps-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.lps-brand-name {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    color: #1F1A33;
    font-size: 0.92rem;
}
.lps-brand-wordmark {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    letter-spacing: 2.2px;
    color: #5E3FA0;
    text-transform: uppercase;
    font-size: 0.72rem;
}
.lps-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.lps-points-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    background: linear-gradient(135deg, #FFF7DD 0%, #FFEAB0 100%);
    color: #B8881A;
    border: 1px solid rgba(232, 178, 48, 0.45);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(232, 178, 48, 0.18);
    cursor: default;
}
.lps-points-pill-icon {
    color: #B8881A;
    flex-shrink: 0;
}
.lps-points-pill-num { line-height: 1; }
.lps-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: #fff;
    border: 1px solid rgba(31, 26, 51, 0.10);
    border-radius: 999px;
}
.lps-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C5CBA 0%, #5E3FA0 100%);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lps-user-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    color: #1F1A33;
}


/* ===== Main (two panels + divider) ===== */
.lps-main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;     /* equal-height panels */
}
.lps-panel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}
.lps-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--lps-panel-primary-line);
    background: linear-gradient(180deg,
        var(--lps-panel-primary-soft) 0%,
        transparent 100%);
}
.lps-panel-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: var(--lps-panel-primary-deep);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.lps-panel-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 999px;
    cursor: pointer;
    color: var(--lps-panel-primary-deep);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.lps-panel-toggle:hover {
    background: var(--lps-panel-primary-soft);
    border-color: var(--lps-panel-primary);
}
.lps-panel-toggle.is-active {
    background: var(--lps-panel-primary);
    color: #fff;
    border-color: var(--lps-panel-primary-deep);
}
.lps-panel-toggle:active { transform: translateY(1px); }
.lps-panel-body {
    flex: 1;
    padding: 18px 22px;
    position: relative;
}


/* ===== Panel views (current ↔ track, crossfade) ===== */
.lps-panel-view {
    opacity: 1;
    transition: opacity 0.18s ease;
}
.lps-panel-view.is-fading {
    opacity: 0;
    pointer-events: none;
}
.lps-frame [hidden] { display: none !important; }


/* ===== Divider between panels ===== */
.lps-divider {
    flex-shrink: 0;
    background: linear-gradient(180deg,
        rgba(31, 26, 51, 0.0) 0%,
        rgba(31, 26, 51, 0.10) 16%,
        rgba(31, 26, 51, 0.10) 84%,
        rgba(31, 26, 51, 0.0) 100%);
    width: 1px;
}


/* ===== CLASSROOM: Current-unit card ===== */
.lps-unit-card {
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(31, 26, 51, 0.04);
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.lps-unit-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lps-unit-card-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    color: var(--lps-panel-primary-deep);
    text-transform: uppercase;
}
.lps-unit-card-title {
    margin: 0;
    flex: 1 1 auto;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #1F1A33;
    line-height: 1.15;
}


/* ===== CLASSROOM: Paired rail mini ===== */
.lps-rail-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FAF8F2;
    border-radius: 10px;
    padding: 12px 12px;
}
.lps-rail {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.lps-rail-side-label {
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.74rem;
    color: var(--lps-side-primary-deep);
    width: 14px;
    text-align: center;
}
.lps-rail-track {
    position: absolute;
    left: 30px;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: rgba(31, 26, 51, 0.06);
    border: 1px solid rgba(31, 26, 51, 0.08);
    border-radius: 999px;
    overflow: hidden;
    z-index: 0;
}
.lps-rail-fill {
    height: 100%;
    width: 0%;
    background: var(--lps-side-primary);
    border-radius: 999px 0 0 999px;
}
.lps-rail-nodes {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.lps-rail-node {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(31, 26, 51, 0.22);
    color: rgba(31, 26, 51, 0.55);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    cursor: default;
}
.lps-rail-node:hover { transform: translateY(-1px); }
.lps-rail-node.is-passed {
    background: #fff;
    border-color: var(--lps-side-primary);
    color: var(--lps-side-primary-deep);
}
.lps-rail-node.is-current {
    width: 28px;
    height: 28px;
    background: var(--lps-side-primary);
    border-color: var(--lps-side-primary-deep);
    color: #fff;
    box-shadow: 0 0 0 3px var(--lps-side-primary-soft),
                0 4px 10px var(--lps-side-primary-soft);
    /* Marketing extra: gentle pulse on the current node so the eye
       lands here first when scanning the dashboard. */
    animation: lps-current-pulse 2.4s ease-in-out infinite;
}
@keyframes lps-current-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--lps-side-primary-soft),
                    0 4px 10px var(--lps-side-primary-soft);
    }
    50% {
        box-shadow: 0 0 0 6px var(--lps-side-primary-soft),
                    0 6px 14px var(--lps-side-primary-soft);
    }
}


/* ===== CLASSROOM: Watch lesson hint ===== */
.lps-unit-card-watch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FFF7DD;
    border: 1px solid rgba(232, 178, 48, 0.42);
    border-radius: 10px;
    color: #1F1A33;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease,
                transform 0.08s ease;
}
.lps-unit-card-watch:hover {
    background: #FFEAB0;
    border-color: rgba(184, 136, 26, 0.55);
    transform: translateY(-1px);
}
.lps-unit-card-watch:active { transform: translateY(1px); }
.lps-unit-card-watch-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B8881A 0%, #E8B230 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(184, 136, 26, 0.30);
}
.lps-unit-card-watch-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    line-height: 1.15;
    min-width: 0;
}
.lps-unit-card-watch-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    color: #1F1A33;
}
.lps-unit-card-watch-hint {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #B8881A;
    margin-top: 2px;
}
/* ===== CLASSROOM: Card actions (CTAs) ===== */
.lps-unit-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lps-unit-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 9px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    border: 1px solid var(--lps-panel-primary-line);
    background: #fff;
    color: var(--lps-panel-primary-deep);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    cursor: pointer;
}
.lps-unit-card-cta:hover {
    background: var(--lps-panel-primary-soft);
    border-color: var(--lps-panel-primary);
    transform: translateY(-1px);
}
.lps-unit-card-cta:active { transform: translateY(1px); }
.lps-unit-card-cta--primary {
    background: var(--lps-panel-primary);
    color: #fff;
    border-color: var(--lps-panel-primary-deep);
}
.lps-unit-card-cta--primary:hover {
    background: var(--lps-panel-primary-deep);
    border-color: var(--lps-panel-primary-deep);
}


/* ===== CLASSROOM: Stats list (under unit card) ===== */
.lps-stats-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
    padding: 6px 4px;
}
.lps-stats-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(31, 26, 51, 0.08);
}
.lps-stats-row dt {
    color: #6B6680;
    font-size: 0.78rem;
}
.lps-stats-row dd {
    margin: 0;
    color: #1F1A33;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}


/* ===== CLASSROOM: Track view (all 9 units) ===== */
.lps-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lps-track-item { display: block; }
.lps-track-card {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.12s ease, transform 0.08s ease,
                box-shadow 0.15s ease, background 0.12s ease;
}
.lps-track-card:hover {
    border-color: var(--lps-panel-primary);
    box-shadow: 0 2px 8px var(--lps-panel-primary-soft);
    transform: translateY(-1px);
}
.lps-track-item.is-current .lps-track-card {
    border-color: var(--lps-panel-primary);
    background: var(--lps-panel-primary-soft);
}
.lps-track-item.is-complete .lps-track-card {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}
.lps-track-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lps-track-card-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    color: #1F1A33;
    flex: 1 1 auto;
}
.lps-track-card-badge {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--lps-panel-primary);
    padding: 2px 8px;
    border-radius: 999px;
}
.lps-track-card-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lps-track-card-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lps-track-card-bar-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--lps-side-primary-deep);
    width: 56px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.lps-track-card-bar-track {
    flex: 1;
    height: 7px;
    background: rgba(31, 26, 51, 0.06);
    border: 1px solid rgba(31, 26, 51, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.lps-track-card-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--lps-side-primary);
    border-radius: 999px 0 0 999px;
}


/* ===== TEST: Current-concept card ===== */
.lps-concept-card {
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(31, 26, 51, 0.04);
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}
.lps-concept-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lps-concept-card-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    color: var(--lps-panel-primary-deep);
    text-transform: uppercase;
}
.lps-concept-card-title {
    margin: 0;
    flex: 1 1 auto;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #1F1A33;
    line-height: 1.2;
}


/* ===== TEST: Concept progress bar ===== */
.lps-concept-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #FAF8F2;
    border-radius: 10px;
    padding: 12px 14px;
}
.lps-concept-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lps-concept-bar-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--lps-panel-primary-deep);
    font-variant-numeric: tabular-nums;
}
.lps-concept-bar-tag {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}
.lps-concept-bar-tag.is-passed {
    background: #FFF5D6;
    color: #B8881A;
    border: 1px solid rgba(232, 178, 48, 0.45);
}
.lps-concept-bar-tag.is-mastered {
    background: linear-gradient(135deg, #B8881A, #E8B230);
    color: #fff;
    border: 1px solid #B8881A;
}
.lps-concept-bar-track {
    height: 12px;
    background: rgba(31, 26, 51, 0.07);
    border: 1px solid rgba(31, 26, 51, 0.10);
    border-radius: 999px;
    overflow: hidden;
}
.lps-concept-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--lps-panel-primary);
    border-radius: 999px 0 0 999px;
}
.lps-concept-bar.is-passed .lps-concept-bar-fill {
    background: #E8B230;
    box-shadow: 0 0 8px rgba(232, 178, 48, 0.30);
}


/* ===== TEST: Concept card actions ===== */
.lps-concept-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lps-concept-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    border: 1px solid var(--lps-panel-primary-line);
    background: #fff;
    color: var(--lps-panel-primary-deep);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.lps-concept-card-cta:hover {
    background: var(--lps-panel-primary-soft);
    border-color: var(--lps-panel-primary);
    transform: translateY(-1px);
}
.lps-concept-card-cta--primary {
    background: var(--lps-panel-primary);
    color: #fff;
    border-color: var(--lps-panel-primary-deep);
}
.lps-concept-card-cta--primary:hover {
    background: var(--lps-panel-primary-deep);
    border-color: var(--lps-panel-primary-deep);
}


/* ===== TEST: Per-skill stats (collapsible) ===== */
.lps-skill-stats {
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 12px;
    overflow: hidden;
}
.lps-skill-stats summary::-webkit-details-marker { display: none; }
.lps-skill-stats summary { list-style: none; }
.lps-skill-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: var(--lps-panel-primary-soft);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lps-panel-primary-deep);
    cursor: pointer;
    transition: background 0.12s ease;
}
.lps-skill-stats-head:hover { background: var(--lps-panel-primary-line); }
.lps-skill-stats[open] .lps-skill-stats-head {
    border-bottom: 1px solid var(--lps-panel-primary-line);
}
.lps-skill-stats-head-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lps-skill-stats-chev { transition: transform 0.18s ease; }
.lps-skill-stats[open] .lps-skill-stats-chev { transform: rotate(90deg); }
.lps-skill-stats-summary {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    color: var(--lps-panel-primary-deep);
}
.lps-skill-stats-head-numbers {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}
.lps-skill-stats-head-num {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.lps-skill-stats-head-num .lps-skill-stats-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    min-width: 1.4em;
    text-align: right;
}
.lps-skill-stats-head-glyph {
    color: rgba(31, 26, 51, 0.45);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
}
.lps-skill-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lps-skill-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px dashed rgba(31, 26, 51, 0.06);
}
.lps-skill-stats-row:last-child { border-bottom: none; }
.lps-skill-stats-name {
    font-size: 0.78rem;
    color: #1F1A33;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.lps-skill-stats-numbers {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: 110px;
    justify-content: space-between;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.lps-skill-stats-num {
    width: 1.6em;
    text-align: center;
    color: #1F1A33;
}
.lps-skill-stats-num--correct  { color: #16a34a; }
.lps-skill-stats-num--attempted { color: #6B6680; }
.lps-skill-stats-num--pool      { color: var(--lps-panel-primary-deep); }


/* ===== TEST: Track view (all 8 concepts) ===== */
.lps-concept-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lps-concept-track-card {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--lps-panel-primary-line);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.12s ease, transform 0.08s ease,
                box-shadow 0.15s ease, background 0.12s ease;
}
.lps-concept-track-card:hover {
    border-color: var(--lps-panel-primary);
    box-shadow: 0 2px 8px var(--lps-panel-primary-soft);
    transform: translateY(-1px);
}
.lps-concept-track-item.is-current .lps-concept-track-card {
    border-color: var(--lps-panel-primary);
    background: var(--lps-panel-primary-soft);
}
.lps-concept-track-item.is-mastered .lps-concept-track-card {
    border-color: rgba(184, 136, 26, 0.45);
}
.lps-concept-track-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lps-concept-track-card-idx {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lps-panel-primary-soft);
    color: var(--lps-panel-primary-deep);
    border: 1px solid var(--lps-panel-primary-line);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lps-concept-track-card-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    color: #1F1A33;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.lps-concept-track-card-badge {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--lps-panel-primary);
    padding: 2px 8px;
    border-radius: 999px;
}
.lps-concept-track-card-badge.is-passed {
    background: #FFF5D6;
    color: #B8881A;
    border: 1px solid rgba(232, 178, 48, 0.45);
}
.lps-concept-track-card-badge.is-mastered {
    background: linear-gradient(135deg, #B8881A, #E8B230);
}
.lps-concept-track-card-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lps-concept-track-card-bar-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--lps-panel-primary-deep);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 90px;
}
.lps-concept-track-card-bar-track {
    flex: 1;
    height: 7px;
    background: rgba(31, 26, 51, 0.06);
    border: 1px solid rgba(31, 26, 51, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.lps-concept-track-card-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--lps-panel-primary);
    border-radius: 999px 0 0 999px;
}
.lps-concept-track-card-bar-fill.is-passed { background: #E8B230; }


/* =============================================================================
 * Static (non-interactive) variants
 *   - --static modifiers strip the cursor/hover affordances so visitors
 *     don't expect a click to navigate. Used on the watch-lesson hint
 *     card, track-card list rows, and concept-track-card list rows.
 *   - .lps-unit-card-watch--static also drops its chevron — there's no
 *     "drill into" gesture; click pops an explain bubble (see JS).
 * ============================================================================= */

.lps-unit-card-watch--static {
    cursor: help;              /* hint that something happens on click without
                                  promising navigation */
}
.lps-unit-card-watch--static:hover {
    transform: none;
    background: #FFF7DD;
    border-color: rgba(232, 178, 48, 0.42);
}
.lps-unit-card-watch--static:active {
    transform: none;
}

.lps-track-card--static,
.lps-concept-track-card--static {
    cursor: default;
    transition: none;
}
.lps-track-card--static:hover,
.lps-concept-track-card--static:hover {
    transform: none;
    box-shadow: none;
}


/* =============================================================================
 * Click-explain bubble
 *   Floating tooltip shown when a non-interactive element with
 *   [data-explain] is clicked. Same visual as the video card's bubble
 *   so the explain UX feels uniform across showcase fixtures.
 * ============================================================================= */

.lps-explain-bubble {
    position: absolute;
    z-index: 1000;
    max-width: 240px;
    padding: 8px 12px;
    background: #1F1A33;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 26, 51, 0.32);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.lps-explain-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.lps-explain-bubble::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #1F1A33;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* === landing-showcase-dashboard-desktop.css === */
/*
 * Landing showcase dashboard — Desktop overrides
 * @media (min-width: 927px)
 *
 * Side-by-side panels (vertical divider). Larger type, generous
 * paddings — same scaling pattern as welcome-desktop.css.
 */

@media (min-width: 927px) {

.lps-frame--dashboard {
    max-width: 1100px;
    margin: 0 auto;
}

.lps-topbar { padding: 12px 28px; gap: 22px; }
.lps-brand-logo { width: 44px; height: 44px; }
.lps-brand-name { font-size: 1rem; }
.lps-brand-wordmark { font-size: 0.78rem; }
.lps-points-pill { padding: 6px 14px 6px 12px; font-size: 0.92rem; gap: 8px; }
.lps-points-pill-icon { width: 16px; height: 16px; }
.lps-user-pill { padding: 5px 14px 5px 5px; }
.lps-user-avatar { width: 34px; height: 34px; font-size: 0.84rem; }
.lps-user-name { font-size: 0.92rem; }

.lps-main { flex-direction: row; }
.lps-divider { width: 1px; height: auto; }

.lps-panel-header { padding: 18px 26px; }
.lps-panel-title  { font-size: 1.18rem; }
.lps-panel-toggle { padding: 7px 14px; font-size: 0.78rem; }
.lps-panel-body   { padding: 22px 26px; }

/* Classroom internals */
.lps-unit-card { padding: 18px 22px 22px; gap: 16px; }
.lps-unit-card-title { font-size: 1.22rem; }
.lps-unit-card-eyebrow { font-size: 0.66rem; letter-spacing: 1.4px; }

.lps-rail-pair { padding: 14px 16px; gap: 12px; }
.lps-rail-side-label { font-size: 0.82rem; width: 16px; }
.lps-rail-track { left: 32px; }
.lps-rail-node { width: 26px; height: 26px; font-size: 0.7rem; }
.lps-rail-node.is-current { width: 32px; height: 32px; }

.lps-unit-card-cta { padding: 10px 18px; font-size: 0.88rem; }
.lps-unit-card-watch { padding: 12px 16px; gap: 14px; }
.lps-unit-card-watch-icon { width: 32px; height: 32px; }
.lps-unit-card-watch-icon svg { width: 16px; height: 16px; }
.lps-unit-card-watch-title { font-size: 0.94rem; }
.lps-unit-card-watch-hint { font-size: 0.7rem; }

.lps-stats-list { gap: 6px 28px; padding: 8px 4px; }
.lps-stats-row dt { font-size: 0.82rem; }
.lps-stats-row dd { font-size: 0.92rem; }

.lps-track-card { padding: 14px 16px; gap: 10px; }
.lps-track-card-label { font-size: 1rem; }
.lps-track-card-bar-label { width: 64px; font-size: 0.74rem; }
.lps-track-card-bar-track { height: 8px; }

/* Test internals */
.lps-concept-card { padding: 18px 22px 22px; gap: 16px; }
.lps-concept-card-title { font-size: 1.18rem; }
.lps-concept-card-eyebrow { font-size: 0.66rem; letter-spacing: 1.4px; }

.lps-concept-bar { padding: 14px 16px; gap: 8px; }
.lps-concept-bar-label { font-size: 0.92rem; }
.lps-concept-bar-track { height: 14px; }

.lps-concept-card-cta { padding: 10px 20px; font-size: 0.88rem; }

.lps-skill-stats-head { padding: 9px 16px; font-size: 0.74rem; }
.lps-skill-stats-row  { padding: 8px 16px; }
.lps-skill-stats-name { font-size: 0.84rem; }
.lps-skill-stats-numbers { font-size: 0.86rem; width: 120px; gap: 16px; }
.lps-skill-stats-head-numbers { width: 120px; gap: 16px; }

.lps-concept-track-card { padding: 14px 16px; gap: 10px; }
.lps-concept-track-card-label { font-size: 0.94rem; }
.lps-concept-track-card-bar-label { width: 100px; font-size: 0.74rem; }
.lps-concept-track-card-bar-track { height: 8px; }
.lps-concept-track-card-idx { width: 24px; height: 24px; font-size: 0.78rem; }

} /* end @media (min-width: 927px) */

/* === landing-showcase-dashboard-mobile-portrait.css === */
/*
 * Landing showcase dashboard — Mobile portrait overrides
 * @media (max-width: 768px) and (orientation: portrait)
 *
 * Stack panels vertically (horizontal divider). Compress chrome.
 * Same pattern as welcome-mobile-portrait.css.
 */

@media (max-width: 768px) and (orientation: portrait) {

.lps-frame--dashboard { border-radius: 12px; }

.lps-topbar { padding: 8px 12px; gap: 8px; }
.lps-brand-logo { width: 32px; height: 32px; }
.lps-brand-name { font-size: 0.82rem; }
.lps-brand-wordmark { font-size: 0.62rem; letter-spacing: 1.6px; }
.lps-points-pill { padding: 4px 10px 4px 8px; font-size: 0.74rem; gap: 5px; }
.lps-points-pill-icon { width: 12px; height: 12px; }
.lps-user-pill { padding: 3px 10px 3px 3px; gap: 6px; }
.lps-user-avatar { width: 26px; height: 26px; font-size: 0.7rem; }
.lps-user-name { display: none; }

/* Stack panels vertically; divider becomes a horizontal line.
   Bumped to match the live /welcome separator: 1px @ 10% opacity
   reads as a hairline between Classroom Track and Test Track on
   phone portrait. 3px @ 32% with a margin gap above/below makes
   the section break actually register. */
.lps-main { flex-direction: column; }
.lps-divider {
    width: auto;
    height: 3px;
    margin: 6px 0;
    background: linear-gradient(90deg,
        rgba(31, 26, 51, 0.0)  0%,
        rgba(31, 26, 51, 0.32) 16%,
        rgba(31, 26, 51, 0.32) 84%,
        rgba(31, 26, 51, 0.0)  100%);
}

.lps-panel-header { padding: 11px 14px; }
.lps-panel-title { font-size: 0.92rem; }
.lps-panel-toggle { padding: 5px 10px; font-size: 0.66rem; gap: 4px; }
.lps-panel-toggle svg { width: 12px; height: 12px; }
.lps-panel-body { padding: 12px 14px; }

/* Classroom internals */
.lps-unit-card { padding: 12px 14px 14px; gap: 10px; }
.lps-unit-card-title { font-size: 0.98rem; }
.lps-unit-card-eyebrow { font-size: 0.58rem; letter-spacing: 1px; }

.lps-rail-pair { padding: 10px 10px; gap: 8px; }
.lps-rail-side-label { font-size: 0.7rem; width: 12px; }
.lps-rail-track { left: 26px; height: 5px; }
.lps-rail-node { width: 18px; height: 18px; font-size: 0.56rem; border-width: 1.2px; }
.lps-rail-node.is-current { width: 22px; height: 22px; }

.lps-unit-card-actions { gap: 6px; }
.lps-unit-card-cta { padding: 8px 12px; font-size: 0.78rem; flex: 1 1 auto; }
.lps-unit-card-watch { padding: 8px 11px; gap: 10px; }
.lps-unit-card-watch-icon { width: 24px; height: 24px; }
.lps-unit-card-watch-icon svg { width: 12px; height: 12px; }
.lps-unit-card-watch-title { font-size: 0.78rem; }
.lps-unit-card-watch-hint { font-size: 0.6rem; letter-spacing: 0.6px; }

/* Single-column stats on phone portrait. */
.lps-stats-list { grid-template-columns: 1fr; gap: 0; padding: 4px 4px; }
.lps-stats-row dt { font-size: 0.74rem; }
.lps-stats-row dd { font-size: 0.78rem; }

.lps-track-card { padding: 10px 12px; gap: 6px; }
.lps-track-card-label { font-size: 0.84rem; }
.lps-track-card-badge { font-size: 0.54rem; padding: 1px 6px; }
.lps-track-card-bar-label { width: 50px; font-size: 0.66rem; }
.lps-track-card-bar-track { height: 6px; }

/* Test internals */
.lps-concept-card { padding: 12px 14px 14px; gap: 10px; }
.lps-concept-card-title { font-size: 0.92rem; }
.lps-concept-card-eyebrow { font-size: 0.58rem; letter-spacing: 1px; }

.lps-concept-bar { padding: 10px 12px; gap: 6px; }
.lps-concept-bar-label { font-size: 0.78rem; }
.lps-concept-bar-track { height: 10px; }
.lps-concept-bar-tag { font-size: 0.56rem; padding: 2px 6px; letter-spacing: 0.8px; }

.lps-concept-card-cta { padding: 8px 14px; font-size: 0.78rem; flex: 1 1 auto; }

.lps-skill-stats-head { padding: 7px 12px; font-size: 0.62rem; }
.lps-skill-stats-head-numbers { width: 88px; gap: 8px; }
.lps-skill-stats-row  { padding: 6px 12px; }
.lps-skill-stats-name { font-size: 0.72rem; }
.lps-skill-stats-numbers { font-size: 0.74rem; width: 88px; gap: 8px; }

.lps-concept-track-card { padding: 10px 12px; gap: 6px; }
.lps-concept-track-card-label { font-size: 0.78rem; }
.lps-concept-track-card-badge { font-size: 0.54rem; padding: 1px 6px; }
.lps-concept-track-card-bar-label { width: 78px; font-size: 0.64rem; }
.lps-concept-track-card-bar-track { height: 6px; }
.lps-concept-track-card-idx { width: 20px; height: 20px; font-size: 0.66rem; }

} /* end @media (max-width: 768px) and (orientation: portrait) */

/* === landing-showcase-dashboard-mobile-landscape.css === */
/*
 * Landing showcase dashboard — Mobile landscape overrides
 * @media (max-width: 926px) and (orientation: landscape)
 *
 * Side-by-side preserved (mirrors desktop) but compressed.
 * Same pattern as welcome-mobile-landscape.css.
 */

@media (max-width: 926px) and (orientation: landscape) {

.lps-frame--dashboard { border-radius: 12px; }

.lps-topbar { padding: 6px 14px; gap: 12px; }
.lps-brand-logo { width: 28px; height: 28px; }
.lps-brand-name { font-size: 0.78rem; }
.lps-brand-wordmark { font-size: 0.6rem; letter-spacing: 1.4px; }
.lps-points-pill { padding: 4px 10px 4px 8px; font-size: 0.74rem; gap: 5px; }
.lps-points-pill-icon { width: 12px; height: 12px; }
.lps-user-pill { padding: 3px 9px 3px 3px; gap: 5px; }
.lps-user-avatar { width: 24px; height: 24px; font-size: 0.66rem; }
.lps-user-name { font-size: 0.78rem; }

.lps-main { flex-direction: row; }
.lps-divider { width: 1px; height: auto; }

.lps-panel-header { padding: 10px 14px; }
.lps-panel-title  { font-size: 0.86rem; }
.lps-panel-toggle { padding: 4px 9px; font-size: 0.62rem; gap: 4px; }
.lps-panel-toggle svg { width: 11px; height: 11px; }
.lps-panel-body   { padding: 10px 14px; }

/* Classroom internals */
.lps-unit-card { padding: 10px 12px 12px; gap: 8px; }
.lps-unit-card-title { font-size: 0.92rem; }
.lps-unit-card-eyebrow { font-size: 0.56rem; letter-spacing: 0.9px; }

.lps-rail-pair { padding: 8px 10px; gap: 6px; }
.lps-rail-side-label { font-size: 0.66rem; width: 12px; }
.lps-rail-track { left: 26px; height: 5px; }
.lps-rail-node { width: 17px; height: 17px; font-size: 0.54rem; border-width: 1.2px; }
.lps-rail-node.is-current { width: 21px; height: 21px; }

.lps-unit-card-actions { gap: 6px; }
.lps-unit-card-cta { padding: 7px 12px; font-size: 0.74rem; }
.lps-unit-card-watch { padding: 7px 10px; gap: 9px; }
.lps-unit-card-watch-icon { width: 22px; height: 22px; }
.lps-unit-card-watch-icon svg { width: 11px; height: 11px; }
.lps-unit-card-watch-title { font-size: 0.74rem; }
.lps-unit-card-watch-hint { font-size: 0.58rem; letter-spacing: 0.5px; }

.lps-stats-list { gap: 2px 16px; padding: 4px 4px; }
.lps-stats-row { padding: 2px 0; }
.lps-stats-row dt { font-size: 0.7rem; }
.lps-stats-row dd { font-size: 0.74rem; }

.lps-track-card { padding: 8px 11px; gap: 5px; }
.lps-track-card-label { font-size: 0.78rem; }
.lps-track-card-bar-label { width: 48px; font-size: 0.62rem; }
.lps-track-card-bar-track { height: 5px; }

/* Test internals */
.lps-concept-card { padding: 10px 12px 12px; gap: 8px; }
.lps-concept-card-title { font-size: 0.86rem; }
.lps-concept-card-eyebrow { font-size: 0.56rem; letter-spacing: 0.9px; }

.lps-concept-bar { padding: 8px 10px; gap: 5px; }
.lps-concept-bar-label { font-size: 0.74rem; }
.lps-concept-bar-track { height: 9px; }
.lps-concept-bar-tag { font-size: 0.54rem; padding: 1px 6px; }

.lps-concept-card-cta { padding: 7px 12px; font-size: 0.74rem; }

.lps-skill-stats-head { padding: 6px 10px; font-size: 0.6rem; }
.lps-skill-stats-head-numbers { width: 82px; gap: 8px; }
.lps-skill-stats-row  { padding: 5px 10px; }
.lps-skill-stats-name { font-size: 0.68rem; }
.lps-skill-stats-numbers { font-size: 0.7rem; width: 82px; gap: 8px; }

.lps-concept-track-card { padding: 8px 11px; gap: 5px; }
.lps-concept-track-card-label { font-size: 0.74rem; }
.lps-concept-track-card-bar-label { width: 70px; font-size: 0.6rem; }
.lps-concept-track-card-bar-track { height: 5px; }
.lps-concept-track-card-idx { width: 18px; height: 18px; font-size: 0.6rem; }

} /* end @media (max-width: 926px) and (orientation: landscape) */

/* === landing-showcase-drill-base.css === */
/*
 * Landing showcase: Drill card recreation — BASE (no @media).
 *
 * Faithful, marketing-tuned recreation of /study-tracks/<type>/play's
 * question panel. ONE chrome, used by TWO HTML variants:
 *   - _landing_showcase_drill.html  (lesson MCQ — Tier 1, answer flow)
 *   - _landing_showcase_vocab.html  (vocab match — Tier 2, near-pass
 *                                     state that fires milestone modal
 *                                     on correct answer)
 *
 * Class naming: .lps- prefix, scoped under .lps-frame--drill.
 *
 * Viewport overrides live in:
 *   landing-showcase-drill-desktop.css           (≥927px)
 *   landing-showcase-drill-mobile-portrait.css   (≤768px portrait)
 *   landing-showcase-drill-mobile-landscape.css  (≤926px landscape)
 *
 * Section order: chrome → topbar → stats → stage bar (vocab only) →
 * panel → choices → result card → milestone modal (vocab only).
 */


/* ===== Per-type theming (lesson + test = purple / vocab = green) =====
   The lesson and test tracks both surface MCQ-style content and share the
   purple brand palette. Vocab is green. Listed by union so any new MCQ-
   style variant slots into the purple theme automatically. */
.lps-frame--drill[data-variant="lesson"],
.lps-frame--drill[data-variant="test"] {
    --lps-drill-primary:      #7C5CBA;
    --lps-drill-primary-deep: #5E3FA0;
    --lps-drill-primary-soft: rgba(124, 92, 186, 0.10);
    --lps-drill-primary-line: rgba(124, 92, 186, 0.18);
    --lps-drill-accent:       #5E3FA0;
}
.lps-frame--drill[data-variant="vocab"] {
    --lps-drill-primary:      #6BAA75;
    --lps-drill-primary-deep: #4A8856;
    --lps-drill-primary-soft: rgba(107, 170, 117, 0.10);
    --lps-drill-primary-line: rgba(107, 170, 117, 0.18);
    --lps-drill-accent:       #4A8856;
}


/* ===== Frame outer container ===== */
.lps-frame--drill {
    background: #fff;
    color: #1F1A33;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(31, 26, 51, 0.22);
    box-shadow: 0 12px 32px rgba(31, 26, 51, 0.08),
                0 2px 6px  rgba(31, 26, 51, 0.04);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;  /* milestone modal anchors to this */
}


/* ===== Topbar (compressed, marketing version) ===== */
.lps-drill-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(31, 26, 51, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    flex-shrink: 0;
}
.lps-drill-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lps-drill-brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}
.lps-drill-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.lps-drill-brand-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #1F1A33;
    font-size: 0.84rem;
}
.lps-drill-brand-wordmark {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--lps-drill-primary-deep);
    text-transform: uppercase;
    font-size: 0.62rem;
}


/* ===== Stats strip (Points / Streak / Best / Correct) ===== */
.lps-drill-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #FAF8F2;
    border-bottom: 1px solid rgba(31, 26, 51, 0.06);
    flex-shrink: 0;
}
.lps-drill-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-right: 1px dashed rgba(31, 26, 51, 0.08);
    gap: 2px;
}
.lps-drill-stat:last-child { border-right: none; }
.lps-drill-stat-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(31, 26, 51, 0.5);
}
.lps-drill-stat-val {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #1F1A33;
    font-variant-numeric: tabular-nums;
    transition: transform 0.18s ease, color 0.18s ease;
}
/* Animated pop when stats update post-submit. */
.lps-drill-stat-val.is-popping {
    transform: scale(1.18);
    color: var(--lps-drill-primary-deep);
}
/* Streak gets fire color when active. */
.lps-drill-stat-streak .lps-drill-stat-val {
    color: #E8B230;
}


/* ===== Stage progress bar (vocab variant only — "almost there") ===== */
.lps-drill-stage-bar {
    background: #FFF7DD;
    border-bottom: 1px solid rgba(232, 178, 48, 0.30);
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.lps-drill-stage-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lps-drill-stage-bar-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    color: #B8881A;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
/* Inline "·" separator between stage name and points (desktop default).
   Mobile-portrait override hides this so the lines stack cleanly. */
.lps-drill-stage-bar-pts::before {
    content: '·';
    margin-right: 8px;
    opacity: 0.55;
    font-weight: 700;
}
.lps-drill-stage-bar-tag {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B8881A;
    background: rgba(232, 178, 48, 0.18);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(232, 178, 48, 0.45);
}
.lps-drill-stage-bar-track {
    height: 10px;
    background: rgba(31, 26, 51, 0.07);
    border: 1px solid rgba(31, 26, 51, 0.10);
    border-radius: 999px;
    overflow: hidden;
}
.lps-drill-stage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #B8881A 0%, #E8B230 100%);
    border-radius: 999px 0 0 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(232, 178, 48, 0.35);
    /* Initial: width is set inline. After correct submit, JS bumps to 100%. */
}


/* ===== Question panel ===== */
.lps-drill-panel {
    padding: 18px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lps-drill-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}
.lps-drill-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lps-drill-accent);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
}
.lps-drill-category-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lps-drill-accent);
}
.lps-drill-question-text {
    color: #1F1A33;
    line-height: 1.55;
    font-size: 0.96rem;
    font-weight: 500;
}
.lps-drill-prompt-hint {
    margin: 0;
    color: rgba(31, 26, 51, 0.5);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}


/* ===== Choice buttons ===== */
.lps-drill-choices {
    display: grid;
    gap: 10px;
}
.lps-drill-choice {
    -webkit-appearance: none; appearance: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid rgba(31, 26, 51, 0.12);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.12s ease, background 0.12s ease,
                transform 0.08s ease, box-shadow 0.15s ease;
    font-family: inherit;
    color: #1F1A33;
}
.lps-drill-choice:hover:not(:disabled) {
    border-color: var(--lps-drill-primary);
    background: var(--lps-drill-primary-soft);
    transform: translateY(-1px);
}
.lps-drill-choice.picked {
    border-color: var(--lps-drill-primary);
    background: var(--lps-drill-primary-soft);
    box-shadow: 0 0 0 3px var(--lps-drill-primary-soft);
}
.lps-drill-choice-letter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(31, 26, 51, 0.06);
    color: #1F1A33;
    border: 1px solid rgba(31, 26, 51, 0.12);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lps-drill-choice.picked .lps-drill-choice-letter {
    background: var(--lps-drill-primary);
    color: #fff;
    border-color: var(--lps-drill-primary-deep);
}
.lps-drill-choice-text {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.4;
}

/* ----- Reveal states (after submit) ----- */
.lps-drill-choice.correct {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
}
.lps-drill-choice.correct .lps-drill-choice-letter {
    background: #16a34a;
    color: #fff;
    border-color: #15803d;
}
.lps-drill-choice.incorrect {
    border-color: #e53935;
    background: rgba(229, 57, 53, 0.06);
}
.lps-drill-choice.incorrect .lps-drill-choice-letter {
    background: #e53935;
    color: #fff;
    border-color: #b71c1c;
}
.lps-drill-choice:disabled {
    cursor: default;
}


/* ===== Submit row ===== */
.lps-drill-submit-row {
    display: flex;
    justify-content: flex-end;
    padding: 12px 22px 16px;
    background: #FAFAFA;
    border-top: 1px solid #f1f5f9;
}
.lps-drill-submit {
    -webkit-appearance: none; appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lps-drill-primary) 0%, var(--lps-drill-primary-deep) 100%);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease;
}
.lps-drill-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.lps-drill-submit:active:not(:disabled) { transform: translateY(1px); }
.lps-drill-submit:disabled {
    opacity: 0.45;
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: not-allowed;
}


/* ===== Result card (revealed after submit) ===== */
.lps-drill-result {
    border-top: 3px solid var(--lps-drill-primary);
    background: #FAFAFA;
    padding: 16px 22px 18px;
    display: none;
    flex-direction: column;
    gap: 10px;
}
.lps-frame--drill.is-revealed .lps-drill-result { display: flex; }
.lps-frame--drill.is-revealed .lps-drill-submit-row { display: none; }
.lps-drill-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lps-drill-result-badge {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.lps-drill-result-badge.is-correct {
    background: #dcfce7;
    color: #065f46;
    border: 1px solid #86efac;
}
.lps-drill-result-badge.is-incorrect {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}
.lps-drill-result-points {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--lps-drill-primary-deep);
    font-variant-numeric: tabular-nums;
    /* Pop animation when revealed */
    animation: lps-drill-points-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lps-drill-points-pop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.lps-drill-result-explain {
    margin: 0;
    color: #2c2c3a;
    font-size: 0.86rem;
    line-height: 1.5;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 10px 12px;
}
.lps-drill-result-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.lps-drill-result-reset {
    -webkit-appearance: none; appearance: none;
    padding: 8px 16px;
    border: 1px solid var(--lps-drill-primary-line);
    border-radius: 999px;
    background: #fff;
    color: var(--lps-drill-primary-deep);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
}
.lps-drill-result-reset:hover {
    background: var(--lps-drill-primary-soft);
    transform: translateY(-1px);
}


/* =====================================================================
   MILESTONE MODAL — vocab variant only.
   Fires on correct submit when stage progress crosses pass threshold.
   ===================================================================== */

.lps-drill-milestone {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(31, 26, 51, 0.32);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    overflow: hidden;
    animation: lps-milestone-fade 220ms ease-out;
}
.lps-frame--drill.is-milestone-on .lps-drill-milestone {
    display: flex;
}
@keyframes lps-milestone-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----- Energy-rising particle layer (CSS-only) ----- */
.lps-drill-milestone-rising {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.lps-drill-milestone-particle {
    position: absolute;
    bottom: -10%;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: rgba(124, 92, 186, 0.9);
    opacity: 0;
    animation: lps-milestone-rise 4.2s linear infinite;
    user-select: none;
}
.lps-drill-milestone-particle.gold { color: rgba(232, 178, 48, 0.95); }
.lps-drill-milestone-particle.white { color: rgba(255, 255, 255, 0.85); }
@keyframes lps-milestone-rise {
    0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-120vh) translateX(20px) rotate(40deg); opacity: 0; }
}
/* Stagger: each particle gets a distinct left + delay via inline style. */

/* ----- Modal card ----- */
.lps-drill-milestone-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px 18px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(20, 20, 40, 0.32),
                0 0 0 1px rgba(232, 178, 48, 0.42);
    text-align: center;
    z-index: 1;
    animation: lps-milestone-card-rise 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lps-milestone-card-rise {
    from { transform: translateY(20px) scale(0.94); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.lps-drill-milestone-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(31, 26, 51, 0.55);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    z-index: 2;
}
.lps-drill-milestone-close:hover {
    background: rgba(31, 26, 51, 0.08);
    color: #1F1A33;
}
.lps-drill-milestone-logo {
    width: 84px;
    height: auto;
    margin: 0 auto 10px;
    display: block;
}
.lps-drill-milestone-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--lps-drill-primary-deep);
    margin-bottom: 6px;
}
.lps-drill-milestone-title {
    margin: 0 0 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.18rem;
    color: #1F1A33;
    line-height: 1.2;
}
.lps-drill-milestone-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.lps-drill-milestone-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}
.lps-drill-milestone-pill--gold {
    background: linear-gradient(135deg, #B8881A 0%, #E8B230 100%);
    color: #fff;
    border: 1px solid #B8881A;
    box-shadow: 0 2px 8px rgba(232, 178, 48, 0.40);
    font-size: 0.94rem;
}
.lps-drill-milestone-pill--purple {
    background: var(--lps-drill-primary-soft);
    color: var(--lps-drill-primary-deep);
    border: 1px solid var(--lps-drill-primary-line);
}
.lps-drill-milestone-pill--streak {
    background: #FFF7DD;
    color: #B8881A;
    border: 1px solid rgba(232, 178, 48, 0.45);
}
.lps-drill-milestone-body {
    margin: 0 0 16px;
    color: #2c2c3a;
    font-size: 0.88rem;
    line-height: 1.5;
}
.lps-drill-milestone-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lps-drill-milestone-cta {
    -webkit-appearance: none; appearance: none;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.12s ease, transform 0.08s ease;
}
.lps-drill-milestone-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lps-drill-milestone-cta--primary {
    background: linear-gradient(135deg, var(--lps-drill-primary) 0%, var(--lps-drill-primary-deep) 100%);
    color: #fff;
}
.lps-drill-milestone-cta--gold {
    background: linear-gradient(135deg, #B8881A 0%, #E8B230 100%);
    color: #fff;
}
.lps-drill-milestone-cta--ghost {
    background: transparent;
    color: rgba(31, 26, 51, 0.6);
    border: 1px solid rgba(31, 26, 51, 0.14);
}
.lps-drill-milestone-cta--ghost:hover { background: rgba(31, 26, 51, 0.04); }

/* === landing-showcase-drill-desktop.css === */
/*
 * Landing showcase drill — Desktop overrides
 * @media (min-width: 927px)
 */

@media (min-width: 927px) {

.lps-frame--drill {
    max-width: 720px;
    margin: 0 auto;
}

.lps-drill-topbar { padding: 12px 22px; gap: 14px; }
.lps-drill-brand-logo { width: 36px; height: 36px; }
.lps-drill-brand-name { font-size: 0.92rem; }
.lps-drill-brand-wordmark { font-size: 0.68rem; }

.lps-drill-stat { padding: 12px 8px; }
.lps-drill-stat-label { font-size: 0.62rem; }
.lps-drill-stat-val { font-size: 1.2rem; }

.lps-drill-stage-bar { padding: 12px 22px; gap: 8px; }
.lps-drill-stage-bar-label { font-size: 0.86rem; }
.lps-drill-stage-bar-track { height: 12px; }

.lps-drill-panel { padding: 22px 26px 18px; gap: 16px; }
.lps-drill-category { font-size: 0.84rem; }
.lps-drill-question-text { font-size: 1.04rem; }

.lps-drill-choices { gap: 12px; }
.lps-drill-choice { padding: 14px 16px; gap: 14px; }
.lps-drill-choice-letter { width: 32px; height: 32px; font-size: 0.88rem; }
.lps-drill-choice-text { font-size: 0.94rem; }

.lps-drill-submit-row { padding: 14px 26px 18px; }
.lps-drill-submit { padding: 12px 26px; font-size: 0.92rem; }

.lps-drill-result { padding: 18px 26px 20px; gap: 12px; }
.lps-drill-result-points { font-size: 1.18rem; }

.lps-drill-milestone-card { padding: 24px 26px 22px; max-width: 460px; }
.lps-drill-milestone-title { font-size: 1.32rem; }
.lps-drill-milestone-pill { font-size: 0.9rem; padding: 7px 14px; }
.lps-drill-milestone-pill--gold { font-size: 1rem; }
.lps-drill-milestone-cta { padding: 12px 18px; font-size: 0.92rem; }

} /* end @media (min-width: 927px) */

/* === landing-showcase-drill-mobile-portrait.css === */
/*
 * Landing showcase drill — Mobile portrait overrides
 * @media (max-width: 768px) and (orientation: portrait)
 */

@media (max-width: 768px) and (orientation: portrait) {

.lps-frame--drill { border-radius: 12px; }

.lps-drill-topbar { padding: 8px 12px; gap: 8px; }
.lps-drill-brand-logo { width: 28px; height: 28px; }
.lps-drill-brand-name { font-size: 0.78rem; }
.lps-drill-brand-wordmark { font-size: 0.58rem; letter-spacing: 1.2px; }

.lps-drill-stat { padding: 8px 4px; }
.lps-drill-stat-label { font-size: 0.54rem; letter-spacing: 0.4px; }
.lps-drill-stat-val { font-size: 0.96rem; }

.lps-drill-stage-bar { padding: 8px 14px; gap: 5px; }
/* Stack: stage name on line 1, points on line 2, "almost there" tag
   on line 3. Each on its own row, left-aligned, breathes. */
.lps-drill-stage-bar-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.lps-drill-stage-bar-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.74rem;
}
.lps-drill-stage-bar-pts::before { content: none; }
.lps-drill-stage-bar-tag { font-size: 0.56rem; padding: 2px 7px; letter-spacing: 0.7px; align-self: flex-start; }
.lps-drill-stage-bar-track { height: 8px; }

.lps-drill-panel { padding: 14px 16px 12px; gap: 10px; }
.lps-drill-meta { padding-bottom: 10px; }
.lps-drill-category { font-size: 0.72rem; }
.lps-drill-question-text { font-size: 0.9rem; }

.lps-drill-choices { gap: 8px; }
.lps-drill-choice { padding: 10px 12px; gap: 10px; }
.lps-drill-choice-letter { width: 24px; height: 24px; font-size: 0.74rem; }
.lps-drill-choice-text { font-size: 0.84rem; }

.lps-drill-submit-row { padding: 10px 16px 14px; }
.lps-drill-submit { padding: 9px 18px; font-size: 0.8rem; }

.lps-drill-result { padding: 12px 16px 14px; gap: 8px; }
.lps-drill-result-badge { font-size: 0.66rem; padding: 4px 10px; }
.lps-drill-result-points { font-size: 0.96rem; }
.lps-drill-result-explain { font-size: 0.78rem; padding: 8px 10px; }
.lps-drill-result-reset { padding: 6px 12px; font-size: 0.72rem; }

.lps-drill-milestone { padding: 14px; }
.lps-drill-milestone-card { padding: 16px 18px 14px; border-radius: 12px; }
.lps-drill-milestone-eyebrow { font-size: 0.62rem; letter-spacing: 1.2px; }
.lps-drill-milestone-title { font-size: 1.04rem; margin-bottom: 10px; }
.lps-drill-milestone-pills { gap: 6px; margin-bottom: 10px; }
.lps-drill-milestone-pill { font-size: 0.74rem; padding: 5px 10px; }
.lps-drill-milestone-pill--gold { font-size: 0.84rem; }
.lps-drill-milestone-body { font-size: 0.78rem; margin-bottom: 12px; }
.lps-drill-milestone-cta { padding: 9px 14px; font-size: 0.8rem; }

} /* end @media (max-width: 768px) and (orientation: portrait) */

/* === landing-showcase-drill-mobile-landscape.css === */
/*
 * Landing showcase drill — Mobile landscape overrides
 * @media (max-width: 926px) and (orientation: landscape)
 */

@media (max-width: 926px) and (orientation: landscape) {

.lps-frame--drill { border-radius: 12px; }

.lps-drill-topbar { padding: 7px 14px; gap: 10px; }
.lps-drill-brand-logo { width: 26px; height: 26px; }
.lps-drill-brand-name { font-size: 0.74rem; }
.lps-drill-brand-wordmark { font-size: 0.56rem; letter-spacing: 1.1px; }

.lps-drill-stat { padding: 7px 4px; }
.lps-drill-stat-label { font-size: 0.52rem; }
.lps-drill-stat-val { font-size: 0.9rem; }

.lps-drill-stage-bar { padding: 7px 14px; gap: 4px; }
.lps-drill-stage-bar-label { font-size: 0.7rem; }
.lps-drill-stage-bar-tag { font-size: 0.52rem; padding: 1px 6px; letter-spacing: 0.6px; }
.lps-drill-stage-bar-track { height: 7px; }

.lps-drill-panel { padding: 12px 14px 10px; gap: 8px; }
.lps-drill-meta { padding-bottom: 8px; }
.lps-drill-category { font-size: 0.7rem; }
.lps-drill-question-text { font-size: 0.84rem; }

.lps-drill-choices { gap: 6px; }
.lps-drill-choice { padding: 8px 10px; gap: 8px; }
.lps-drill-choice-letter { width: 22px; height: 22px; font-size: 0.7rem; }
.lps-drill-choice-text { font-size: 0.8rem; }

.lps-drill-submit-row { padding: 8px 14px 12px; }
.lps-drill-submit { padding: 7px 16px; font-size: 0.74rem; }

.lps-drill-result { padding: 10px 14px 12px; gap: 6px; }
.lps-drill-result-badge { font-size: 0.62rem; padding: 3px 9px; }
.lps-drill-result-points { font-size: 0.9rem; }
.lps-drill-result-explain { font-size: 0.74rem; padding: 7px 9px; }
.lps-drill-result-reset { padding: 5px 11px; font-size: 0.7rem; }

.lps-drill-milestone { padding: 12px; }
.lps-drill-milestone-card { padding: 14px 16px 12px; border-radius: 10px; max-height: 90vh; overflow-y: auto; }
.lps-drill-milestone-eyebrow { font-size: 0.58rem; letter-spacing: 1px; }
.lps-drill-milestone-title { font-size: 0.96rem; margin-bottom: 8px; }
.lps-drill-milestone-pills { gap: 5px; margin-bottom: 8px; }
.lps-drill-milestone-pill { font-size: 0.7rem; padding: 4px 9px; }
.lps-drill-milestone-pill--gold { font-size: 0.78rem; }
.lps-drill-milestone-body { font-size: 0.74rem; margin-bottom: 10px; }
.lps-drill-milestone-cta { padding: 7px 12px; font-size: 0.74rem; }

} /* end @media (max-width: 926px) and (orientation: landscape) */

/* === landing-showcase-video-base.css === */
/*
 * Landing showcase: Video lesson card recreation — BASE (no @media).
 *
 * Faithful, marketing-tuned recreation of /video/<lesson_path>'s full
 * page: top nav bar, two-column layout (LEFT video poster + transcript,
 * RIGHT lesson header + tabbed learning panel), and tab views for
 * Summary / Questions / Terms / Literature.
 *
 * Static — no Vimeo embed; custom branded play poster opens the signup
 * modal via the existing data-signup-modal hook. Transcript shows real
 * VTT cues with click-to-anchor active marker (no playback to seek).
 *
 * Scope: .lps-frame--video  ·  Class prefix: .lps-video-*
 *
 * Viewport overrides:
 *   landing-showcase-video-desktop.css           (≥927px)
 *   landing-showcase-video-mobile-portrait.css   (≤768px portrait)
 *   landing-showcase-video-mobile-landscape.css  (≤926px landscape)
 *
 * Color theme: lesson-purple (matches the live lesson pages).
 */


/* =============================================================================
 * 0. Theme tokens + frame outer
 * ============================================================================= */

.lps-frame--video {
    --lps-video-primary:      #7C5CBA;
    --lps-video-primary-deep: #5E3FA0;
    --lps-video-primary-soft: rgba(124, 92, 186, 0.10);
    --lps-video-primary-line: rgba(124, 92, 186, 0.18);
    --lps-video-vocab:        #6BAA75;
    --lps-video-vocab-deep:   #4A8856;
    --lps-video-text:         #1F1A33;
    --lps-video-muted:        rgba(31, 26, 51, 0.55);
    --lps-video-line:         rgba(31, 26, 51, 0.10);
    --lps-video-line-soft:    rgba(31, 26, 51, 0.06);
    --lps-video-bg-soft:      #F7F4FB;
    --lps-video-correct:      #2E8B57;
    --lps-video-incorrect:    #C0392B;
    --lps-video-gold:         #E8B230;
}

.lps-frame--video {
    background: #fff;
    color: var(--lps-video-text);
    border-radius: 16px;
    overflow: hidden;
    /* Outer frame border deliberately heavier than the internal
       --lps-video-line token so the card pops off the page bg. */
    border: 2px solid rgba(31, 26, 51, 0.22);
    box-shadow: 0 12px 32px rgba(31, 26, 51, 0.08),
                0 2px 6px  rgba(31, 26, 51, 0.04);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
}


/* =============================================================================
 * 1. Top nav bar
 *    Mirrors video.html's #lesson-nav: back link · logo · jumper · prev/next.
 * ============================================================================= */

.lps-video-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid var(--lps-video-line-soft);
    flex-shrink: 0;
    position: relative;        /* anchor for jumper menu */
}

/* ----- Brand logo (left edge on desktop) -----
   Width-only sizing keeps the wordmark's natural aspect ratio (2.38:1).
   No object-fit gymnastics — the image renders at its real proportions. */
.lps-video-nav-logo {
    width: 60px;
    height: auto;
    display: block;
}

/* ----- Mobile-only lesson number pill (hidden on desktop by default) ----- */
.lps-video-mobile-lesson-num {
    display: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    color: var(--lps-video-primary-deep);
    background: var(--lps-video-primary-soft);
    border: 1px solid var(--lps-video-primary-line);
    padding: 4px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ----- Lesson jumper — trigger pill + dropdown menu ----- */
.lps-video-jumper-wrap {
    position: relative;
    margin-left: auto;         /* push to right edge of nav row */
}
.lps-video-jumper-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--lps-video-line);
    border-radius: 999px;
    padding: 6px 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--lps-video-primary-deep);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.lps-video-jumper-trigger:hover {
    background: var(--lps-video-primary-soft);
    border-color: var(--lps-video-primary-line);
    transform: translateY(-1px);
}
.lps-video-jumper-current {
    font-variant-numeric: tabular-nums;
}
.lps-video-jumper-chev {
    color: var(--lps-video-primary-deep);
    transition: transform 0.18s ease;
}
.lps-video-jumper-trigger[aria-expanded="true"] .lps-video-jumper-chev {
    transform: rotate(180deg);
}

/* ----- Dropdown menu ----- */
.lps-video-jumper-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    max-width: 340px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--lps-video-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(31, 26, 51, 0.16),
                0 4px 10px  rgba(31, 26, 51, 0.06);
    z-index: 20;
    padding: 6px;
}
.lps-video-jumper-menu-header {
    padding: 6px 10px 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--lps-video-muted);
}
.lps-video-jumper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lps-video-jumper-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--lps-video-text);
    font-family: inherit;
    transition: background 0.12s ease;
}
.lps-video-jumper-item:hover {
    background: var(--lps-video-primary-soft);
}
.lps-video-jumper-item.is-current {
    background: var(--lps-video-primary-soft);
    cursor: default;
}
.lps-video-jumper-item.is-locked {
    color: var(--lps-video-muted);
}
.lps-video-jumper-item.is-locked:hover {
    background: var(--lps-video-bg-soft);
    color: var(--lps-video-text);
}
.lps-video-jumper-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lps-video-jumper-item.is-current .lps-video-jumper-item-icon {
    background: var(--lps-video-primary);
    color: #fff;
}
.lps-video-jumper-item.is-locked .lps-video-jumper-item-icon {
    background: var(--lps-video-bg-soft);
    color: var(--lps-video-muted);
    border: 1px solid var(--lps-video-line);
}
.lps-video-jumper-item-label {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
}
.lps-video-jumper-item-tag {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--lps-video-primary-deep);
    background: rgba(124, 92, 186, 0.16);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.lps-video-jumper-item-cta {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--lps-video-primary-deep);
    background: var(--lps-video-primary-soft);
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.12s ease;
}
.lps-video-jumper-item.is-locked:hover .lps-video-jumper-item-cta {
    background: rgba(124, 92, 186, 0.22);
}


/* =============================================================================
 * 2. Two-column layout
 *    LEFT: video poster + transcript container
 *    RIGHT: lesson header + tabbed learning panel
 * ============================================================================= */

.lps-video-layout {
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    min-height: 0;
}
.lps-video-left {
    flex: 0 0 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--lps-video-line-soft);
}
.lps-video-right {
    flex: 0 0 45%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}


/* =============================================================================
 * 3. LEFT — mobile toggle bar (hidden on desktop)
 *    On mobile portrait this carries the track-link pills since the
 *    desktop lesson-header is hidden.
 * ============================================================================= */

.lps-video-toggle-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--lps-video-bg-soft);
    border-bottom: 1px solid var(--lps-video-line-soft);
}
.lps-video-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--lps-video-line);
    border-radius: 999px;
    padding: 5px 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--lps-video-text);
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
}
.lps-video-toggle-btn:hover {
    background: var(--lps-video-primary-soft);
    transform: translateY(-1px);
}
.lps-video-toggle-icon {
    color: var(--lps-video-primary-deep);
    font-size: 0.7rem;
    line-height: 1;
}
.lps-video-track-links--mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* =============================================================================
 * 4. LEFT — video section (poster + custom branded play overlay)
 * ============================================================================= */

.lps-video-section {
    background: #1F1A33;
    flex-shrink: 0;
}
.lps-video-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1F1A33;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    color: inherit;
}
.lps-video-player-wrapper:focus-visible {
    outline: 3px solid var(--lps-video-primary);
    outline-offset: -3px;
}
.lps-video-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.lps-video-player-wrapper:hover .lps-video-poster-img {
    transform: scale(1.04);
}

/* ----- Central branded play button ----- */
.lps-video-poster-play {
    position: absolute;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lps-video-primary) 0%, var(--lps-video-primary-deep) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18),
                0 12px 28px rgba(94, 63, 160, 0.55);
    pointer-events: none;
    animation: lps-video-play-pulse 2.4s ease-in-out infinite;
    transition: transform 0.18s ease;
}
.lps-video-player-wrapper:hover .lps-video-poster-play {
    transform: scale(1.08);
}
.lps-video-poster-play svg {
    transform: translateX(2px);
}
@keyframes lps-video-play-pulse {
    0%, 100% { box-shadow: 0 0 0 6px  rgba(255, 255, 255, 0.18), 0 12px 28px rgba(94, 63, 160, 0.55); }
    50%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.10), 0 16px 36px rgba(94, 63, 160, 0.70); }
}

/* ----- Hover overlay ("Sign up free to watch") ----- */
.lps-video-poster-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
                rgba(31, 26, 51, 0)    0%,
                rgba(31, 26, 51, 0.30) 50%,
                rgba(31, 26, 51, 0.78) 100%);
    display: flex;
    align-items: flex-end;
    padding: 14px 18px;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}
.lps-video-player-wrapper:hover .lps-video-poster-overlay,
.lps-video-player-wrapper:focus-visible .lps-video-poster-overlay {
    opacity: 1;
}
.lps-video-poster-overlay-text {
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: 1.2;
}
.lps-video-poster-overlay-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.96rem;
}
.lps-video-poster-overlay-hint {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}


/* =============================================================================
 * 5. Transcript view (inside the tab system — default tab)
 *    The transcript was promoted from a left-column inline panel into a
 *    proper tab so it's available on every viewport without taking
 *    permanent vertical space. Cue 3 starts active so visitors see the
 *    live-sync highlight without playback.
 * ============================================================================= */

.lps-video-transcript-content {
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lps-video-cue {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.lps-video-cue:hover {
    background: var(--lps-video-primary-soft);
}
.lps-video-cue.is-active {
    background: rgba(232, 178, 48, 0.12);
    border-left-color: var(--lps-video-gold);
    animation: lps-video-active-pulse 2.4s ease-in-out infinite;
}
@keyframes lps-video-active-pulse {
    0%, 100% { background: rgba(232, 178, 48, 0.10); }
    50%      { background: rgba(232, 178, 48, 0.20); }
}
.lps-video-cue-time {
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    color: var(--lps-video-primary-deep);
    font-variant-numeric: tabular-nums;
    width: 32px;
    padding-top: 1px;
}
.lps-video-cue.is-active .lps-video-cue-time {
    color: #B8881A;
}
.lps-video-cue-text {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--lps-video-text);
}


/* =============================================================================
 * 6. RIGHT — lesson header (title + practice-track pills)
 *    Hidden on mobile portrait (matches the real page).
 * ============================================================================= */

.lps-video-header {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--lps-video-line-soft);
    flex-shrink: 0;
}
.lps-video-title {
    margin: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.04rem;
    color: var(--lps-video-text);
    line-height: 1.25;
}
.lps-video-track-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.lps-video-track-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    transition: filter 0.12s ease, transform 0.08s ease;
    cursor: pointer;
}
.lps-video-track-link:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.lps-video-track-link--lesson {
    background: linear-gradient(135deg, var(--lps-video-primary) 0%, var(--lps-video-primary-deep) 100%);
    color: #fff;
    border: 1px solid var(--lps-video-primary-deep);
}
.lps-video-track-link--vocab {
    background: linear-gradient(135deg, var(--lps-video-vocab) 0%, var(--lps-video-vocab-deep) 100%);
    color: #fff;
    border: 1px solid var(--lps-video-vocab-deep);
}


/* =============================================================================
 * 7. RIGHT — learning panel + tabs
 * ============================================================================= */

.lps-video-learning-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.lps-video-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 10px;
    background: var(--lps-video-bg-soft);
    border-bottom: 1px solid var(--lps-video-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.lps-video-tabs::-webkit-scrollbar { display: none; }

.lps-video-tab {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 11px 14px 9px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--lps-video-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    white-space: nowrap;
}
.lps-video-tab:hover {
    color: var(--lps-video-primary-deep);
    background: var(--lps-video-primary-soft);
}
.lps-video-tab.is-active {
    color: var(--lps-video-primary-deep);
    border-bottom-color: var(--lps-video-primary-deep);
}

.lps-video-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 18px;
}
.lps-video-view {
    display: none;
}
.lps-video-view.is-active {
    display: block;
}


/* =============================================================================
 * 8. Summary view
 * ============================================================================= */

.lps-video-summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: var(--lps-video-bg-soft);
    border: 1px solid var(--lps-video-line-soft);
    border-radius: 999px;
    margin-bottom: 12px;
}
.lps-video-summary-toggle-btn {
    background: transparent;
    border: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--lps-video-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.lps-video-summary-toggle-btn:hover {
    color: var(--lps-video-primary-deep);
}
.lps-video-summary-toggle-btn.is-active {
    background: #fff;
    color: var(--lps-video-primary-deep);
    box-shadow: 0 1px 3px rgba(31, 26, 51, 0.10);
}

.lps-video-summary-content h3 {
    margin: 14px 0 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--lps-video-primary-deep);
}
.lps-video-summary-content h3:first-child {
    margin-top: 0;
}
.lps-video-summary-content ul {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lps-video-summary-content li {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--lps-video-text);
}
.lps-video-term-highlight {
    font-weight: 700;
    color: var(--lps-video-primary-deep);
}
.lps-video-term-highlight[data-explain] {
    cursor: help;
    border-bottom: 1px dotted var(--lps-video-primary-line);
    transition: border-color 0.12s ease, color 0.12s ease;
}
.lps-video-term-highlight[data-explain]:hover {
    color: var(--lps-video-primary);
    border-bottom-color: var(--lps-video-primary);
}

/* ----- NCLEX concepts tag list ----- */
.lps-video-nclex-concepts {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--lps-video-bg-soft);
    border: 1px solid var(--lps-video-line-soft);
    border-radius: 10px;
}
.lps-video-concepts-title {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--lps-video-muted);
}
.lps-video-concepts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lps-video-concept-tag {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--lps-video-line-soft);
    border-left: 3px solid var(--lps-video-primary);
    border-radius: 6px;
}
.lps-video-concept-category {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--lps-video-muted);
}
.lps-video-concept-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lps-video-text);
}


/* =============================================================================
 * 9. Questions view (single MCQ card)
 * ============================================================================= */

.lps-video-question-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lps-video-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lps-video-question-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--lps-video-muted);
}
.lps-video-question-prompt {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--lps-video-text);
    padding: 12px 14px;
    background: var(--lps-video-bg-soft);
    border-left: 3px solid var(--lps-video-primary);
    border-radius: 8px;
}

/* ----- MCQ choice buttons ----- */
.lps-video-mc-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lps-video-mc-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid var(--lps-video-line);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    font-family: inherit;
    color: var(--lps-video-text);
}
.lps-video-mc-choice:hover {
    background: var(--lps-video-primary-soft);
    border-color: var(--lps-video-primary-line);
    transform: translateY(-1px);
}
.lps-video-mc-choice.is-selected {
    background: var(--lps-video-primary-soft);
    border-color: var(--lps-video-primary);
}
.lps-video-mc-choice.is-correct {
    background: rgba(46, 139, 87, 0.10);
    border-color: var(--lps-video-correct);
}
.lps-video-mc-choice.is-correct .lps-video-choice-id {
    background: var(--lps-video-correct);
    color: #fff;
    border-color: var(--lps-video-correct);
}
.lps-video-mc-choice.is-incorrect {
    background: rgba(192, 57, 43, 0.08);
    border-color: var(--lps-video-incorrect);
}
.lps-video-mc-choice.is-incorrect .lps-video-choice-id {
    background: var(--lps-video-incorrect);
    color: #fff;
    border-color: var(--lps-video-incorrect);
}
.lps-video-mc-choice:disabled {
    cursor: default;
    transform: none;
}
.lps-video-choice-id {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--lps-video-line);
    color: var(--lps-video-primary-deep);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lps-video-mc-choice.is-selected .lps-video-choice-id {
    background: var(--lps-video-primary);
    color: #fff;
    border-color: var(--lps-video-primary);
}
.lps-video-choice-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ----- Submit button + feedback ----- */
.lps-video-submit-btn {
    margin-top: 4px;
    align-self: flex-start;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--lps-video-primary) 0%, var(--lps-video-primary-deep) 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease;
    box-shadow: 0 4px 10px rgba(94, 63, 160, 0.30);
}
.lps-video-submit-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.lps-video-submit-btn:disabled {
    background: var(--lps-video-bg-soft);
    color: var(--lps-video-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.lps-video-question-feedback {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--lps-video-bg-soft);
    border: 1px solid var(--lps-video-line-soft);
}
.lps-video-feedback-result {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    margin-bottom: 6px;
}
.lps-video-feedback-result.is-correct   { color: var(--lps-video-correct); }
.lps-video-feedback-result.is-incorrect { color: var(--lps-video-incorrect); }
.lps-video-feedback-rationale {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--lps-video-text);
}


/* =============================================================================
 * 10. Terms view
 * ============================================================================= */

.lps-video-terms-mode-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--lps-video-bg-soft);
    border: 1px solid var(--lps-video-line-soft);
    border-radius: 999px;
    margin-bottom: 12px;
}
.lps-video-mode-btn {
    background: transparent;
    border: 0;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--lps-video-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.lps-video-mode-btn:hover {
    color: var(--lps-video-primary-deep);
}
.lps-video-mode-btn.is-active {
    background: #fff;
    color: var(--lps-video-primary-deep);
    box-shadow: 0 1px 3px rgba(31, 26, 51, 0.10);
}

/* `:not([hidden])` is critical — without it, the author `display: flex`
   beats the UA default `[hidden] { display: none }`, so toggling the
   hidden attribute on this block via JS would be a no-op. The Quiz
   mode toggle relies on the hidden attribute switching browse <-> quiz. */
.lps-video-terms-browse:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lps-video-term-item {
    border: 1px solid var(--lps-video-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.lps-video-term-item:hover {
    border-color: var(--lps-video-primary-line);
    box-shadow: 0 2px 6px rgba(31, 26, 51, 0.06);
}
.lps-video-term-item.is-expanded {
    border-color: var(--lps-video-primary-line);
}
.lps-video-term-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}
.lps-video-term-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--lps-video-text);
}
.lps-video-term-toggle-icon {
    color: var(--lps-video-primary-deep);
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 0.18s ease;
}
.lps-video-term-item.is-expanded .lps-video-term-toggle-icon {
    transform: rotate(180deg);
}
.lps-video-term-expanded {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.24s ease;
}
.lps-video-term-item.is-expanded .lps-video-term-expanded {
    max-height: 320px;
}
.lps-video-term-definition {
    padding: 0 14px 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--lps-video-text);
    border-top: 1px dashed var(--lps-video-line);
    padding-top: 10px;
}
.lps-video-term-mesh-id {
    margin-top: 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    color: var(--lps-video-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.lps-video-terms-more-hint {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--lps-video-primary-soft);
    border: 1px dashed var(--lps-video-primary-line);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--lps-video-text);
    line-height: 1.45;
}
.lps-video-terms-more-hint strong {
    color: var(--lps-video-primary-deep);
}


/* =============================================================================
 * 10b. Quiz mode (Terms tab — toggled via Browse/Quiz buttons)
 *      Mirrors the production /video/<lesson> terms-quiz UX: definition
 *      shown with the target term blacked out → 4-choice MCQ → reveal
 *      → next. After 6 questions: score + two CTAs (Unlock / Learn free).
 * ============================================================================= */

/* Same `:not([hidden])` discipline as .lps-video-terms-browse — required
   so the hidden attribute (set/cleared by handleTermsModeSwitch) actually
   collapses this block when Browse mode is active. */
.lps-video-terms-quiz:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: lps-video-quiz-fade 0.25s ease;
}
@keyframes lps-video-quiz-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Progress strip */
.lps-video-quiz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lps-video-quiz-progress-track {
    flex: 1;
    height: 5px;
    background: var(--lps-video-line);
    border-radius: 3px;
    overflow: hidden;
}
.lps-video-quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lps-video-primary), #C4ABE0);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.lps-video-quiz-progress-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--lps-video-muted);
    white-space: nowrap;
}

/* Question card */
.lps-video-quiz-card {
    background: var(--lps-video-bg-soft);
    border: 1px solid var(--lps-video-line-soft);
    border-radius: 12px;
    padding: 12px 14px;
}
.lps-video-quiz-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--lps-video-primary-deep);
    margin-bottom: 6px;
}
.lps-video-quiz-definition {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--lps-video-text);
}
.lps-video-quiz-blackout {
    background: #2d2d2d;
    color: #2d2d2d;
    border-radius: 3px;
    padding: 0 4px;
    user-select: none;
}

/* Choices */
.lps-video-quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lps-video-quiz-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid var(--lps-video-line);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--lps-video-text);
    transition: background 0.12s ease, border-color 0.12s ease,
                transform 0.08s ease;
}
.lps-video-quiz-choice:hover:not(:disabled) {
    background: var(--lps-video-primary-soft);
    border-color: var(--lps-video-primary-line);
    transform: translateX(2px);
}
.lps-video-quiz-choice:disabled { cursor: default; transform: none; }
.lps-video-quiz-choice.is-correct {
    background: rgba(46, 139, 87, 0.10);
    border-color: var(--lps-video-correct);
}
.lps-video-quiz-choice.is-incorrect {
    background: rgba(192, 57, 43, 0.08);
    border-color: var(--lps-video-incorrect);
    animation: lps-video-quiz-shake 0.34s ease;
}
.lps-video-quiz-choice.is-reveal {
    background: rgba(46, 139, 87, 0.08);
    border-color: var(--lps-video-correct);
    opacity: 0.85;
}
.lps-video-quiz-choice.is-dim { opacity: 0.5; }
@keyframes lps-video-quiz-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.lps-video-quiz-choice-letter {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lps-video-line);
    color: var(--lps-video-muted);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.lps-video-quiz-choice:hover:not(:disabled) .lps-video-quiz-choice-letter {
    background: var(--lps-video-primary);
    color: #fff;
}
.lps-video-quiz-choice.is-correct .lps-video-quiz-choice-letter,
.lps-video-quiz-choice.is-reveal  .lps-video-quiz-choice-letter {
    background: var(--lps-video-correct);
    color: #fff;
}
.lps-video-quiz-choice.is-incorrect .lps-video-quiz-choice-letter {
    background: var(--lps-video-incorrect);
    color: #fff;
}
.lps-video-quiz-choice-text {
    flex: 1;
    font-size: 0.86rem;
    line-height: 1.35;
}
.lps-video-quiz-choice-mark {
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.lps-video-quiz-choice.is-correct .lps-video-quiz-choice-mark,
.lps-video-quiz-choice.is-incorrect .lps-video-quiz-choice-mark,
.lps-video-quiz-choice.is-reveal .lps-video-quiz-choice-mark { opacity: 1; }

/* Footer (feedback + next) */
.lps-video-quiz-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--lps-video-bg-soft);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.lps-video-quiz-footer.is-visible { opacity: 1; transform: translateY(0); }
.lps-video-quiz-footer.is-correct  { background: rgba(46, 139, 87, 0.10); }
.lps-video-quiz-footer.is-incorrect { background: rgba(192, 57, 43, 0.08); }
.lps-video-quiz-feedback-text {
    flex: 1;
    font-size: 0.84rem;
    color: var(--lps-video-text);
    line-height: 1.35;
}
.lps-video-quiz-feedback-text strong { font-weight: 700; }
.lps-video-quiz-next {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--lps-video-primary) 0%, var(--lps-video-primary-deep) 100%);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    border: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease;
}
.lps-video-quiz-next:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Score card (after Q6) */
.lps-video-quiz-score {
    text-align: center;
    padding: 18px 14px;
    background: var(--lps-video-bg-soft);
    border-radius: 12px;
    border: 1px solid var(--lps-video-line-soft);
}
.lps-video-quiz-score-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--lps-video-primary-deep);
    margin-bottom: 4px;
}
.lps-video-quiz-score-value {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--lps-video-primary);
    line-height: 1.0;
    letter-spacing: -0.02em;
}
.lps-video-quiz-score-detail {
    font-size: 0.84rem;
    color: var(--lps-video-muted);
    margin-top: 4px;
}
.lps-video-quiz-score-msg {
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--lps-video-text);
    line-height: 1.5;
}
.lps-video-quiz-score-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.lps-video-quiz-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.lps-video-quiz-cta--gold {
    background: linear-gradient(135deg, #E8B230 0%, #B8881A 100%);
    color: #1F1A33;
    box-shadow: 0 4px 12px rgba(184, 136, 26, 0.30);
}
.lps-video-quiz-cta--gold:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.lps-video-quiz-cta--purple {
    background: linear-gradient(135deg, var(--lps-video-primary) 0%, var(--lps-video-primary-deep) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(94, 63, 160, 0.28);
}
.lps-video-quiz-cta--purple:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}


/* =============================================================================
 * 11. Literature view (PubMed cards)
 * ============================================================================= */

.lps-video-literature-header h3 {
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--lps-video-primary-deep);
}
.lps-video-literature-intro {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--lps-video-muted);
}

.lps-video-literature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lps-video-literature-card {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--lps-video-line);
    border-radius: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.lps-video-literature-card:hover {
    border-color: var(--lps-video-primary-line);
    box-shadow: 0 4px 10px rgba(31, 26, 51, 0.06);
    transform: translateY(-1px);
}
.lps-video-literature-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.lps-video-literature-type {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--lps-video-primary-deep);
    background: var(--lps-video-primary-soft);
    border: 1px solid var(--lps-video-primary-line);
    padding: 2px 8px;
    border-radius: 999px;
}
.lps-video-literature-date {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--lps-video-muted);
}
.lps-video-literature-title {
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.35;
}
.lps-video-literature-title a {
    color: var(--lps-video-text);
    text-decoration: none;
    transition: color 0.12s ease;
}
.lps-video-literature-title a:hover {
    color: var(--lps-video-primary-deep);
}
.lps-video-literature-authors {
    margin: 0 0 2px;
    font-size: 0.76rem;
    color: var(--lps-video-text);
    line-height: 1.4;
}
.lps-video-literature-journal {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.74rem;
    color: var(--lps-video-muted);
}
.lps-video-literature-abstract {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--lps-video-text);
    padding: 8px 12px;
    background: var(--lps-video-bg-soft);
    border-radius: 8px;
    margin-bottom: 8px;
}
.lps-video-literature-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    color: var(--lps-video-primary-deep);
    transition: color 0.12s ease, transform 0.08s ease;
}
.lps-video-literature-link:hover {
    color: var(--lps-video-primary);
    transform: translateX(1px);
}


/* =============================================================================
 * 12. Static (non-interactive) track pills
 *    Visually identical to .lps-video-track-link but without hover lift,
 *    cursor:pointer, or filter brightness — so visitors don't expect a
 *    navigation. Click is intercepted by JS to show an explain bubble.
 * ============================================================================= */

.lps-video-track-link--static {
    cursor: help;              /* hint that something happens on click without
                                  promising navigation */
    transition: none;
}
.lps-video-track-link--static:hover {
    filter: none;
    transform: none;
}


/* =============================================================================
 * 13. Hide-video toggle state
 *    Mobile-portrait Hide Video button collapses the video poster.
 *    Class .is-video-hidden goes on the .lps-frame--video root.
 * ============================================================================= */

.lps-frame--video.is-video-hidden .lps-video-section {
    display: none;
}
.lps-video-toggle-btn .lps-video-toggle-icon {
    transition: transform 0.18s ease;
    display: inline-block;
}
.lps-frame--video.is-video-hidden .lps-video-toggle-icon {
    transform: rotate(-90deg);
}


/* =============================================================================
 * 14. Click-explain bubble
 *    Small floating tooltip that appears at the cursor when a non-
 *    interactive element with [data-explain] is clicked. Auto-dismisses
 *    after a few seconds. Lives at the document level (positioned via JS).
 * ============================================================================= */

.lps-video-explain-bubble {
    position: absolute;
    z-index: 1000;
    max-width: 240px;
    padding: 8px 12px;
    background: #1F1A33;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 26, 51, 0.32);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.lps-video-explain-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.lps-video-explain-bubble::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #1F1A33;
    transform: rotate(45deg);
    border-radius: 1px;
}


/* =============================================================================
 * 15. Full Summary narrative styling
 *    The Full block uses paragraph-driven prose instead of bullet lists.
 *    Tighter spacing on h3 + p so the narrative reads continuously.
 * ============================================================================= */

.lps-video-summary-content--narrative h3 {
    margin-top: 12px;
}
.lps-video-summary-content--narrative h3:first-child {
    margin-top: 0;
}
.lps-video-summary-content--narrative p {
    margin: 0 0 10px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--lps-video-text);
}
.lps-video-summary-content--narrative p strong {
    color: var(--lps-video-primary-deep);
    font-weight: 700;
}
.lps-video-summary-content--narrative ul {
    margin-top: 6px;
}

/* === landing-showcase-video-desktop.css === */
/*
 * Landing showcase video — Desktop overrides
 * @media (min-width: 927px)
 *
 * Larger viewport: scale paddings + fonts a touch, set a comfortable
 * frame max-width so the layout doesn't sprawl on 1440+ screens.
 */

@media (min-width: 927px) {

/* ----- Frame width clamp ----- */
.lps-frame--video {
    max-width: 1040px;
    margin: 0 auto;
}

/* ----- Top nav bar ----- */
.lps-video-nav { padding: 12px 22px; gap: 12px; }
.lps-video-nav-logo { width: 68px; height: auto; }
.lps-video-jumper-trigger { padding: 7px 14px; font-size: 0.84rem; }
.lps-video-jumper-menu { min-width: 320px; max-width: 380px; }
.lps-video-jumper-item-label { font-size: 0.86rem; }

/* ----- Layout columns ----- */
.lps-video-left  { flex: 0 0 56%; }
.lps-video-right { flex: 0 0 44%; }

/* ----- Video poster (already 16:9; just bump play button + overlay) ----- */
.lps-video-poster-play { width: 88px; height: 88px; }
.lps-video-poster-play svg { width: 36px; height: 36px; }
.lps-video-poster-overlay { padding: 16px 20px; }
.lps-video-poster-overlay-title { font-size: 1.04rem; }
.lps-video-poster-overlay-hint  { font-size: 0.8rem; }

/* ----- Transcript tab content ----- */
.lps-video-cue                { padding: 7px 10px; gap: 12px; }
.lps-video-cue-time           { width: 36px; font-size: 0.74rem; }
.lps-video-cue-text           { font-size: 0.86rem; }

/* ----- Lesson header ----- */
.lps-video-header { padding: 18px 22px 14px; }
.lps-video-title  { font-size: 1.18rem; margin-bottom: 12px; }
.lps-video-track-link { padding: 7px 14px; font-size: 0.82rem; }

/* ----- Tabs + content ----- */
.lps-video-tabs    { padding: 0 14px; }
.lps-video-tab     { padding: 13px 16px 11px; font-size: 0.86rem; }
.lps-video-content { padding: 18px 22px 22px; }

/* ----- Summary view ----- */
.lps-video-summary-toggle-btn { padding: 6px 14px; font-size: 0.78rem; }
.lps-video-summary-content h3 { font-size: 0.82rem; }
.lps-video-summary-content li { font-size: 0.9rem; }
.lps-video-nclex-concepts { padding: 14px 16px; }
.lps-video-concept-tag { padding: 7px 12px; }
.lps-video-concept-name { font-size: 0.86rem; }

/* ----- Questions view ----- */
.lps-video-question-prompt { font-size: 0.96rem; padding: 14px 16px; }
.lps-video-mc-choice { padding: 12px 16px; }
.lps-video-choice-id { width: 30px; height: 30px; font-size: 0.88rem; }
.lps-video-choice-text { font-size: 0.94rem; }
.lps-video-submit-btn { padding: 10px 22px; font-size: 0.9rem; }
.lps-video-feedback-result { font-size: 0.92rem; }
.lps-video-feedback-rationale { font-size: 0.88rem; }

/* ----- Terms view ----- */
.lps-video-mode-btn { padding: 6px 16px; font-size: 0.78rem; }
.lps-video-term-header { padding: 12px 16px; }
.lps-video-term-label { font-size: 0.94rem; }
.lps-video-term-definition { padding: 12px 16px 14px; font-size: 0.88rem; }

/* ----- Literature view ----- */
.lps-video-literature-card { padding: 14px 16px; }
.lps-video-literature-title { font-size: 0.94rem; }
.lps-video-literature-abstract { font-size: 0.86rem; padding: 10px 14px; }

} /* end @media (min-width: 927px) */

/* === landing-showcase-video-mobile-portrait.css === */
/*
 * Landing showcase video — Mobile portrait overrides
 * @media (max-width: 768px) and (orientation: portrait)
 *
 * Stacked vertical layout: nav (compact, icon-only labels) → video toggle
 * bar with mobile track pills → video poster → transcript container →
 * tabbed learning panel (lesson header hidden — redundant with mobile-
 * lesson-num pill). Transcript tab is shown; tapping it scrolls JS-side
 * to the inline transcript-container.
 */

@media (max-width: 768px) and (orientation: portrait) {

.lps-frame--video { border-radius: 12px; }

/* ----- Top nav bar — compact, mobile lesson-num visible ----- */
.lps-video-nav {
    padding: 8px 10px;
    gap: 6px;
}
.lps-video-nav-logo  { width: 52px; height: auto; }
.lps-video-mobile-lesson-num { display: inline-block; }

.lps-video-jumper-wrap { margin-left: auto; }
.lps-video-jumper-trigger {
    padding: 5px 10px;
    font-size: 0.7rem;
}

/* Dropdown menu: float wider on narrow screens, position below nav row. */
.lps-video-jumper-menu {
    min-width: 240px;
    max-width: calc(100vw - 24px);
    right: 0;
    max-height: 320px;
}
.lps-video-jumper-item-label { font-size: 0.78rem; }
.lps-video-jumper-item-tag,
.lps-video-jumper-item-cta { font-size: 0.6rem; padding: 2px 7px; }

/* ----- Layout — STACK columns vertically ----- */
.lps-video-layout {
    flex-direction: column;
}
.lps-video-left,
.lps-video-right {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
}
.lps-video-left { border-bottom: 1px solid var(--lps-video-line-soft); }

/* ----- Mobile toggle bar (visible on portrait only) ----- */
.lps-video-toggle-bar { display: flex; }

/* ----- Video poster — keep 16:9 but cap height for tall screens ----- */
.lps-video-poster-play { width: 56px; height: 56px; }
.lps-video-poster-play svg { width: 22px; height: 22px; }
.lps-video-poster-overlay { padding: 12px 14px; }
.lps-video-poster-overlay-title { font-size: 0.88rem; }
.lps-video-poster-overlay-hint  { font-size: 0.7rem; }

/* ----- Transcript tab content ----- */
.lps-video-cue                { padding: 5px 7px; gap: 8px; }
.lps-video-cue-time           { width: 28px; font-size: 0.66rem; }
.lps-video-cue-text           { font-size: 0.78rem; line-height: 1.4; }

/* ----- Lesson header — HIDDEN on mobile portrait ----- */
.lps-video-header { display: none; }

/* ----- Tabs ----- */
.lps-video-tabs    { padding: 0 6px; }
.lps-video-tab     { padding: 10px 11px 8px; font-size: 0.76rem; }
.lps-video-content { padding: 12px 14px 16px; }

/* ----- Summary view ----- */
.lps-video-summary-toggle-btn { padding: 5px 11px; font-size: 0.7rem; }
.lps-video-summary-content h3 { font-size: 0.72rem; margin: 12px 0 5px; }
.lps-video-summary-content ul { padding-left: 16px; gap: 4px; }
.lps-video-summary-content li { font-size: 0.82rem; line-height: 1.45; }
.lps-video-nclex-concepts { padding: 10px 12px; }
.lps-video-concepts-title { font-size: 0.66rem; }
.lps-video-concept-tag { padding: 5px 9px; }
.lps-video-concept-category { font-size: 0.58rem; }
.lps-video-concept-name { font-size: 0.78rem; }

/* ----- Questions view ----- */
.lps-video-question-header { flex-wrap: wrap; gap: 6px; }
.lps-video-question-number { font-size: 0.66rem; }
.lps-video-question-prompt {
    font-size: 0.86rem;
    padding: 10px 12px;
    line-height: 1.45;
}
.lps-video-mc-choice { padding: 9px 12px; gap: 10px; }
.lps-video-choice-id { width: 26px; height: 26px; font-size: 0.78rem; }
.lps-video-choice-text { font-size: 0.86rem; }
.lps-video-submit-btn {
    align-self: stretch;
    padding: 9px 16px;
    font-size: 0.84rem;
    text-align: center;
}
.lps-video-question-feedback { padding: 10px 12px; }
.lps-video-feedback-result { font-size: 0.82rem; }
.lps-video-feedback-rationale { font-size: 0.8rem; }

/* ----- Terms view ----- */
.lps-video-mode-btn { padding: 4px 12px; font-size: 0.7rem; }
.lps-video-term-header { padding: 9px 12px; }
.lps-video-term-label { font-size: 0.84rem; }
.lps-video-term-definition { padding: 10px 12px 12px; font-size: 0.8rem; }
.lps-video-term-mesh-id { font-size: 0.62rem; }
.lps-video-terms-more-hint { padding: 9px 12px; font-size: 0.78rem; }

/* ----- Literature view ----- */
.lps-video-literature-header h3 { font-size: 0.86rem; }
.lps-video-literature-intro { font-size: 0.78rem; }
.lps-video-literature-card { padding: 11px 12px; }
.lps-video-literature-type { font-size: 0.58rem; }
.lps-video-literature-date { font-size: 0.66rem; }
.lps-video-literature-title { font-size: 0.84rem; line-height: 1.3; }
.lps-video-literature-authors { font-size: 0.72rem; }
.lps-video-literature-journal { font-size: 0.7rem; }
.lps-video-literature-abstract {
    font-size: 0.78rem;
    padding: 7px 10px;
    line-height: 1.45;
}
.lps-video-literature-link { font-size: 0.72rem; }

} /* end @media (max-width: 768px) and (orientation: portrait) */

/* === landing-showcase-video-mobile-landscape.css === */
/*
 * Landing showcase video — Mobile landscape overrides
 * @media (max-width: 926px) and (orientation: landscape)
 *
 * Keep two-column layout (there's horizontal room on landscape phones)
 * but shrink everything so the panels feel compact rather than cramped.
 * Mobile lesson-num pill stays hidden; the inline lesson-header is kept
 * but compressed.
 */

@media (max-width: 926px) and (orientation: landscape) {

.lps-frame--video { border-radius: 12px; }

/* ----- Top nav bar ----- */
.lps-video-nav { padding: 7px 12px; gap: 7px; }
.lps-video-nav-logo { width: 52px; height: auto; }
.lps-video-jumper-trigger { padding: 4px 9px; font-size: 0.7rem; gap: 4px; }
.lps-video-jumper-chev { width: 12px; height: 12px; }
.lps-video-jumper-menu { min-width: 220px; max-width: 300px; max-height: 240px; }
.lps-video-jumper-item-label { font-size: 0.74rem; }

/* ----- Layout — keep two-column, slight shift toward text ----- */
.lps-video-left  { flex: 0 0 50%; }
.lps-video-right { flex: 0 0 50%; }

/* ----- Video poster ----- */
.lps-video-poster-play { width: 54px; height: 54px; }
.lps-video-poster-play svg { width: 22px; height: 22px; }
.lps-video-poster-overlay { padding: 10px 12px; }
.lps-video-poster-overlay-title { font-size: 0.82rem; }
.lps-video-poster-overlay-hint  { font-size: 0.62rem; }

/* ----- Transcript tab content ----- */
.lps-video-cue                { padding: 4px 6px; gap: 7px; }
.lps-video-cue-time           { width: 26px; font-size: 0.62rem; }
.lps-video-cue-text           { font-size: 0.74rem; line-height: 1.4; }

/* ----- Lesson header ----- */
.lps-video-header { padding: 9px 12px 7px; }
.lps-video-title  { font-size: 0.86rem; margin-bottom: 6px; }
.lps-video-track-link { padding: 4px 9px; font-size: 0.66rem; gap: 4px; }
.lps-video-track-link svg { width: 11px; height: 11px; }

/* ----- Tabs ----- */
.lps-video-tabs    { padding: 0 6px; }
.lps-video-tab     { padding: 9px 9px 7px; font-size: 0.72rem; }
.lps-video-content { padding: 10px 12px 12px; }

/* ----- Summary view ----- */
.lps-video-summary-toggle-btn { padding: 4px 10px; font-size: 0.66rem; }
.lps-video-summary-content h3 { font-size: 0.68rem; margin: 10px 0 4px; }
.lps-video-summary-content ul { padding-left: 14px; gap: 3px; }
.lps-video-summary-content li { font-size: 0.76rem; line-height: 1.4; }
.lps-video-nclex-concepts { padding: 9px 11px; margin-top: 10px; }
.lps-video-concepts-title { font-size: 0.62rem; }
.lps-video-concept-tag { padding: 4px 8px; }
.lps-video-concept-category { font-size: 0.56rem; }
.lps-video-concept-name { font-size: 0.74rem; }

/* ----- Questions view ----- */
.lps-video-question-number { font-size: 0.62rem; }
.lps-video-question-prompt { font-size: 0.8rem; padding: 9px 11px; line-height: 1.4; }
.lps-video-mc-choice { padding: 7px 10px; gap: 8px; }
.lps-video-choice-id { width: 22px; height: 22px; font-size: 0.72rem; }
.lps-video-choice-text { font-size: 0.78rem; }
.lps-video-submit-btn { padding: 7px 14px; font-size: 0.78rem; }
.lps-video-feedback-result { font-size: 0.76rem; }
.lps-video-feedback-rationale { font-size: 0.74rem; }

/* ----- Terms view ----- */
.lps-video-mode-btn { padding: 4px 10px; font-size: 0.66rem; }
.lps-video-term-header { padding: 7px 10px; }
.lps-video-term-label { font-size: 0.78rem; }
.lps-video-term-definition { padding: 8px 10px 10px; font-size: 0.74rem; }
.lps-video-term-mesh-id { font-size: 0.58rem; }
.lps-video-terms-more-hint { padding: 8px 10px; font-size: 0.72rem; }

/* ----- Literature view ----- */
.lps-video-literature-header h3 { font-size: 0.8rem; }
.lps-video-literature-intro { font-size: 0.72rem; }
.lps-video-literature-card { padding: 9px 11px; }
.lps-video-literature-type { font-size: 0.54rem; }
.lps-video-literature-date { font-size: 0.62rem; }
.lps-video-literature-title { font-size: 0.78rem; line-height: 1.3; }
.lps-video-literature-authors { font-size: 0.68rem; }
.lps-video-literature-journal { font-size: 0.66rem; }
.lps-video-literature-abstract { font-size: 0.72rem; padding: 6px 9px; line-height: 1.4; }
.lps-video-literature-link { font-size: 0.68rem; }

} /* end @media (max-width: 926px) and (orientation: landscape) */