/* ── Wizzist 2: Learning Studio Homepage Updates ── */
.home-hero-intent {
    position: relative;
    min-block-size: clamp(36rem, 78vh, 48rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 46%),
        radial-gradient(circle at 84% 86%, color-mix(in srgb, var(--color-warning) 14%, transparent), transparent 52%),
        var(--theme-surface);
    overflow: hidden;
    padding: calc(var(--space-xl) * 1.5) var(--space-xl) calc(var(--space-xl) * 2);
    border: 1px solid color-mix(in srgb, var(--theme-border) 88%, transparent);
    border-radius: calc(var(--radius-lg) * 1.25);
}

.home-hero-intent__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image: radial-gradient(circle at center, var(--home-hero-grid-dot) 1px, transparent 1px);
    background-size: var(--space-xl) var(--space-xl);
    z-index: 1;
}

.home-hero-intent__shell {
    position: relative;
    z-index: 10;
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    inline-size: min(100%, 76rem);
    margin-inline: auto;
}

.home-hero-intent--with-media .home-hero-intent__shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
}

.home-hero-intent__content {
    display: grid;
    gap: var(--space-lg);
    text-align: center;
    max-inline-size: 52rem;
    inline-size: 100%;
    margin-inline: auto;
}

.home-hero-intent__eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-warning);
}

.home-hero-intent__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 5vw + 1rem, 5rem);
    font-weight: 800;
    color: var(--theme-text);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.home-hero-intent__input-group {
    position: relative;
    inline-size: 100%;
    max-inline-size: 44rem;
    margin-inline: auto;
}

.home-hero-intent__input {
    inline-size: 100%;
    background: color-mix(in srgb, var(--theme-card) 94%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) 12rem var(--space-xl) var(--space-xl);
    color: var(--theme-text);
    font-size: var(--text-xl);
    outline: none;
    box-shadow: var(--shadow-lg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-hero-intent__input:focus-visible {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 2px var(--home-hero-focus-ring), var(--shadow-lg);
}

.home-hero-intent__action {
    position: absolute;
    inset-inline-end: var(--space-sm);
    inset-block-start: var(--space-sm);
    inset-block-end: var(--space-sm);
    padding-inline: var(--space-xl);
    background-color: var(--color-warning);
    color: var(--color-neutral-900);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.home-hero-intent__action:hover {
    transform: scale(1.02);
}

.home-hero-intent__action:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.home-hero-intent__subtitle {
    color: var(--theme-muted);
    font-size: var(--text-lg);
    line-height: 1.7;
    max-inline-size: 48rem;
    margin: 0 auto;
}

.home-hero-intent__learn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--theme-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.home-hero-intent__learn-more::after {
    content: "\2193";
    color: var(--color-warning);
}

.home-hero-intent__learn-more:hover {
    color: var(--color-warning);
}

.home-hero-intent__media {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: calc(var(--radius-lg) * 1.1);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 95%, transparent), color-mix(in srgb, var(--theme-surface) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--theme-border));
    box-shadow: var(--shadow-lg);
}

.home-hero-intent__media-label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-warning);
}

.home-hero-intent__video-frame {
    overflow: hidden;
    border-radius: calc(var(--radius-lg) * 0.9);
    border: 1px solid color-mix(in srgb, var(--theme-border) 82%, transparent);
    background: #020408;
    box-shadow: 0 24px 56px color-mix(in srgb, var(--color-neutral-950) 22%, transparent);
}

.home-hero-intent__video {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    background: #020408;
}

.home-hero-intent__media-body {
    display: grid;
    gap: var(--space-xs);
}

.home-hero-intent__media-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw + 0.8rem, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.home-hero-intent__media-caption {
    margin: 0;
    color: var(--theme-muted);
    line-height: 1.7;
}

.home-intro-video {
    inline-size: min(100%, 64rem);
    margin-inline: auto;
}

.txt-brand-gold {
    color: var(--color-warning);
}

.landing-section--heroic {
    padding: calc(var(--space-xl) * 1.5);
    border: 1px solid var(--theme-border);
    border-radius: calc(var(--radius-lg) * 1.15);
    background:
        radial-gradient(circle at top center, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
    scroll-margin-top: calc(var(--space-xl) * 2);
}

.home-section-header {
    max-inline-size: 58rem;
    margin-inline: auto;
}

.home-section-header__title,
.home-tools__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw + 1rem, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
}

.home-section-header__subtitle {
    font-size: var(--text-lg);
    line-height: 1.75;
}

/* Cognitive Divide Heatmap Split */
.cognitive-divide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    max-inline-size: 64rem;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .cognitive-divide {
        grid-template-columns: 1fr;
    }
}

.cognitive-divide__panel {
    min-block-size: 100%;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: left;
    border: 1px solid var(--theme-border);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: var(--space-md);
}

.cognitive-divide__panel--consumer {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 92%, transparent), color-mix(in srgb, var(--home-consumer-panel-bg) 82%, transparent));
    color: var(--theme-text);
}

.cognitive-divide__panel--creator {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--home-creator-panel-start) 92%, transparent) 0%, color-mix(in srgb, var(--home-creator-panel-end) 88%, transparent) 100%);
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--theme-border));
}

.cognitive-divide__eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--theme-muted);
}

.cognitive-divide__panel-title {
    font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
    font-weight: 800;
    margin: 0;
}

.cognitive-divide__panel--creator .cognitive-divide__panel-title {
    background: linear-gradient(to right, var(--color-primary), var(--color-warning));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cognitive-divide__panel-lead {
    margin: 0;
    color: var(--theme-muted);
    line-height: 1.7;
}

.cognitive-divide__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-md);
    font-size: var(--text-base);
}

.cognitive-divide__list li {
    padding: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--theme-border) 82%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--theme-card) 75%, transparent);
    line-height: 1.6;
}

.cognitive-divide__panel--creator .cognitive-divide__list li {
    background: color-mix(in srgb, var(--theme-card) 58%, transparent);
}

.home-highlight-grid,
.gold-economy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.home-feature-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.home-feature-showcase__card {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--theme-border));
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
    box-shadow: var(--shadow-sm);
}

.home-feature-showcase__eyebrow,
.home-feature-showcase__callout-label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-feature-showcase__eyebrow {
    color: var(--color-warning);
}

.home-feature-showcase__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
}

.home-feature-showcase__desc,
.home-feature-showcase__callout-copy {
    margin: 0;
    color: var(--theme-muted);
    line-height: 1.7;
}

.home-feature-showcase__callout {
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    max-inline-size: 52rem;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl);
    text-align: center;
    border-radius: calc(var(--radius-lg) * 1.1);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--theme-border));
    background:
        radial-gradient(circle at top center, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
}

.home-feature-showcase__callout-label {
    color: var(--color-primary);
}

.home-next-tutor {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-xl);
}

.home-next-tutor__card {
    inline-size: min(100%, 26rem);
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    text-align: center;
    padding: calc(var(--space-xl) * 1.1);
    border-radius: calc(var(--radius-lg) * 1.1);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--theme-border));
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--color-warning) 16%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
    box-shadow: var(--shadow-card-hover);
}

.home-next-tutor__avatar {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 9rem;
    block-size: 9rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, white 86%, transparent), transparent 22%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 78%, white), color-mix(in srgb, var(--color-warning) 76%, white));
    box-shadow:
        0 1.25rem 2.5rem color-mix(in srgb, var(--color-primary) 16%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
}

.home-next-tutor__avatar-ring,
.home-next-tutor__avatar-core {
    position: absolute;
}

.home-next-tutor__avatar-ring {
    inset: 0.7rem;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, white 68%, transparent);
}

.home-next-tutor__avatar-core {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-card) 88%, white);
    color: var(--color-warning);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, black 12%, transparent);
}

.home-next-tutor__eyebrow,
.home-next-tutor__callout-label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-next-tutor__eyebrow {
    color: var(--color-warning);
}

.home-next-tutor__title {
    margin: 0;
    font-size: clamp(1.6rem, 2vw + 1rem, 2.35rem);
    line-height: 1.15;
    font-weight: 800;
}

.home-next-tutor__desc,
.home-next-tutor__callout-copy {
    margin: 0;
    color: var(--theme-muted);
    line-height: 1.7;
}

.home-next-tutor__callout {
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    max-inline-size: 52rem;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl);
    text-align: center;
    border-radius: calc(var(--radius-lg) * 1.1);
    border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--theme-border));
    background:
        radial-gradient(circle at top center, color-mix(in srgb, var(--color-warning) 14%, transparent), transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
}

.home-next-tutor__callout-label {
    color: var(--color-primary);
}

.gold-economy-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 24rem);
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-xl);
}

.gold-economy-graphic {
    position: relative;
    border-radius: calc(var(--radius-lg) * 1.1);
    border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--theme-border));
    background:
        radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--color-warning) 28%, transparent), transparent 28%),
        radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 98%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
    box-shadow: var(--shadow-card-hover);
    overflow: hidden;
    min-block-size: 18rem;
    padding: var(--space-md);
}

.gold-economy-graphic::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--theme-border) 26%, transparent) 1px, transparent 1px);
    background-size: 1rem 1rem;
    opacity: 0.18;
    pointer-events: none;
}

.gold-economy-graphic__art {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.home-highlight-card,
.gold-economy-card {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--theme-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
    box-shadow: var(--shadow-sm);
}

.home-highlight-card--featured {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 98%, transparent));
}

.home-highlight-card__eyebrow,
.gold-economy-card__step {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-warning);
}

.home-highlight-card__title,
.gold-economy-card__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
}

.home-highlight-card__desc,
.gold-economy-card__desc {
    margin: 0;
    color: var(--theme-muted);
    line-height: 1.7;
}

.home-highlight-card__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
}

.home-highlight-card__chips li {
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--theme-card));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--theme-border));
    font-size: var(--text-sm);
    font-weight: 700;
}

.gold-economy-card__step {
    color: var(--color-warning);
}

@media (max-width: 48rem) {
    .home-hero-intent--with-media .home-hero-intent__shell {
        grid-template-columns: 1fr;
    }

    .home-hero-intent__input-group {
        display: grid;
        gap: var(--space-sm);
    }

    .home-hero-intent__input {
        padding: var(--space-md);
    }

    .home-hero-intent__action {
        position: static;
        inline-size: 100%;
        min-block-size: 2.75rem;
    }

    .home-hero-intent__learn-more {
        justify-content: center;
    }

    .landing-section--heroic {
        padding: var(--space-lg);
    }

    .gold-economy-intro {
        grid-template-columns: 1fr;
    }

    .gold-economy-graphic {
        min-block-size: 14rem;
    }

    .home-highlight-grid,
    .gold-economy-grid,
    .home-feature-showcase {
        grid-template-columns: 1fr;
    }

    .home-next-tutor__card,
    .home-next-tutor__callout,
    .home-feature-showcase__card,
    .home-feature-showcase__callout {
        padding: var(--space-lg);
    }
}

@media (min-width: 48.0625rem) {
    .home-hero-intent--with-media .home-hero-intent__content {
        text-align: left;
        max-inline-size: none;
        margin-inline: 0;
    }

    .home-hero-intent--with-media .home-hero-intent__subtitle {
        margin: 0;
    }

    .home-hero-intent--with-media .home-hero-intent__input-group {
        margin-inline: 0;
    }

    .home-hero-intent--with-media .home-hero-intent__learn-more {
        justify-content: flex-start;
    }
}