/* Shared banner geometry for personal color, makeup and tattoo studios. */
.ai-studio-document { scrollbar-gutter: stable; }
.ai-studio-screen .ai-studio-page {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 1rem;
}
.ai-studio-screen .ai-studio-page > .ai-studio-body { padding: 1rem; }
.ai-studio-screen .ai-studio-workspace {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.ai-studio-screen .pc-page > .ai-studio-body > * {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.ai-studio-screen .ai-studio-hero {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 280px;
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
}
.ai-studio-screen .ai-studio-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    max-width: 680px;
}
.ai-studio-screen .ai-studio-hero .ai-studio-badges,
.ai-studio-screen .ai-studio-hero .ai-studio-features {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 !important;
}
.ai-studio-screen .ai-studio-hero .ai-studio-badges > span {
    padding: .4rem .75rem !important;
    font-size: .75rem;
    line-height: 1.5;
}
.ai-studio-screen .ai-studio-hero h2 {
    margin: 0 !important;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.04em;
}
.ai-studio-screen .ai-studio-hero .ai-studio-description {
    max-width: 600px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
    line-height: 1.6;
}
.ai-studio-screen .ai-studio-hero .makeup-kicker,
.ai-studio-screen .ai-studio-hero .tattoo-hero-eyebrow { display: none; }
@media (min-width: 768px) {
    .ai-studio-screen .ai-studio-page > .ai-studio-body { padding: 1.5rem; }
}
@media (min-width: 1200px) {
    .ai-studio-screen .ai-studio-page > .ai-studio-body { padding: 3rem; }
}
@media (max-width: 991.98px) {
    .ai-studio-document { scrollbar-gutter: auto; scrollbar-width: none; }
    .ai-studio-document::-webkit-scrollbar { display: none; }
    .ai-studio-screen .main-content { margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
    .ai-studio-screen .body-pt { padding-top: 65px; }
    .ai-studio-screen .modify-card-width { width: 100% !important; margin: 0; padding: 0; }
    .ai-studio-screen .modify-card-width > .row { --bs-gutter-x: 0; margin: 0; }
    .ai-studio-screen .social-post-container,
    .ai-studio-screen .social-post,
    .ai-studio-screen #dynamicDivContainer { margin: 0; padding: 0; min-width: 0; }
    .ai-studio-screen .ai-studio-page { margin: 0; border-radius: 0; }
    .ai-studio-screen .ai-studio-page > .ai-studio-body { padding: 12px !important; }
    .ai-studio-screen .ai-studio-workspace { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    /* Makeup retains its fixed camera workspace and settings sheet. */
    .makeup-screen .ai-studio-workspace { padding: 12px 12px 0; gap: 12px; box-sizing: border-box; }
    .makeup-screen .ai-studio-page > .ai-studio-body { padding: 0 !important; }
    .ai-studio-screen .ai-studio-hero {
        flex: 0 0 auto;
        min-height: 72px;
        padding: 12px 16px !important;
        margin-bottom: 12px !important;
        border-radius: .75rem;
    }
    .makeup-screen .ai-studio-hero { margin-bottom: 0 !important; }
    .ai-studio-screen .ai-studio-hero-copy { max-width: 100%; gap: 0; }
    .ai-studio-screen .ai-studio-hero h2 { font-size: 1.25rem; line-height: 1.3; }
    .ai-studio-screen .ai-studio-hero .ai-studio-badges,
    .ai-studio-screen .ai-studio-hero .ai-studio-description,
    .ai-studio-screen .ai-studio-hero .ai-studio-features { display: none !important; }
    .ai-studio-screen .ai-studio-hero::before,
    .ai-studio-screen .ai-studio-hero::after { display: none; }
    .makeup-screen .ai-studio-hero {
        background: radial-gradient(circle at 78% 12%, rgba(215, 93, 124, .46), transparent 34%), linear-gradient(135deg, #1d171d, #35222d 55%, #1b171d);
    }
}