/* /Assessment/External/ReviewSurface.razor.rz.scp.css */
.review-root[b-b5d18fdgrn] {
    background: #E3E6E1;
}

    .review-root .shell[b-b5d18fdgrn] {
        background: var(--paper);
        border-left: 1px solid var(--hairline);
        border-right: 1px solid var(--hairline);
        min-height: 100vh;
        min-height: 100svh;
        box-shadow: 0 0 40px rgba(20, 24, 22, .04);
    }

@media (max-width: 660px) {
    .review-root .shell[b-b5d18fdgrn] {
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
}

.review-root[b-b5d18fdgrn] {
    --paper: #F4F6F5;
    --card: #FFFFFF;
    --ink: #16181A;
    --ink-soft: #62676B;
    --ink-faint: #9AA09E;
    --hairline: #DDE1DE;
    --berry: #C81D5E;
    --berry-soft: rgba(200, 29, 94, .08);
    --berry-lit: rgba(200, 29, 94, .16);
    --berry-line: rgba(200, 29, 94, .28);
    --berry-mid: #D75E92;
    --berry-bright: #FFA6C8;
    --shadow: 0 1px 2px rgba(20, 24, 26, .05), 0 10px 30px rgba(20, 24, 26, .06);
    --r-card: 16px;
    --r-field: 12px;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    .review-root *[b-b5d18fdgrn] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .review-root [b-b5d18fdgrn]::selection {
        background: var(--berry-soft);
    }

.shell[b-b5d18fdgrn] {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 22px 56px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 720px) {
    .shell[b-b5d18fdgrn] {
        padding: 64px 48px 80px;
    }
}

@keyframes rise-b-b5d18fdgrn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.shell[b-b5d18fdgrn] {
    animation: rise-b-b5d18fdgrn .28s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .shell[b-b5d18fdgrn] {
        animation: none;
    }

    .review-root *[b-b5d18fdgrn] {
        transition: none !important;
        animation: none !important;
    }
}

.context-strip[b-b5d18fdgrn] {
    margin: 0 0 34px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--hairline);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink);
    max-width: 58ch;
}

    .context-strip b[b-b5d18fdgrn] {
        color: var(--berry);
        font-weight: 700;
    }

.eyebrow[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--ink-soft);
    text-transform: uppercase;
    display: block;
}

    .eyebrow .dot[b-b5d18fdgrn] {
        color: var(--berry);
    }

    .eyebrow .tag[b-b5d18fdgrn] {
        color: var(--berry);
        font-weight: 600;
        margin-right: 6px;
    }

h1.display[b-b5d18fdgrn] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -.015em;
    margin: 16px 0 0;
    text-wrap: balance;
}

@media (min-width: 720px) {
    h1.display[b-b5d18fdgrn] {
        font-size: 44px;
    }
}

.pitch-card[b-b5d18fdgrn] {
    margin-top: 20px;
    background: var(--card);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(20,24,22,.05), 0 8px 28px rgba(20,24,22,.06);
}

.card-tag[b-b5d18fdgrn] {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--berry);
    font-weight: 600;
    margin-bottom: 10px;
}

h1.pitch[b-b5d18fdgrn] {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -.004em;
    font-weight: 500;
    max-width: 58ch;
}

@media (min-width: 720px) {
    h1.pitch[b-b5d18fdgrn] {
        font-size: 18.5px;
    }
}

h2.q[b-b5d18fdgrn] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: 6px 0 0;
}

@media (min-width: 720px) {
    h2.q[b-b5d18fdgrn] {
        font-size: 31px;
    }
}

h2.q.q-sm[b-b5d18fdgrn] {
    font-size: 18.5px;
    margin-top: 8px;
}

@media (min-width: 720px) {
    h2.q.q-sm[b-b5d18fdgrn] {
        font-size: 20px;
    }
}

p.lede[b-b5d18fdgrn] {
    color: var(--ink-soft);
    margin-top: 24px;
}

.moment-card[b-b5d18fdgrn] {
    margin-top: 26px;
    padding: 18px 22px;
    background: var(--berry-soft);
    border-radius: 14px;
    max-width: 62ch;
}

.moment-note[b-b5d18fdgrn] {
    color: var(--ink-faint);
    font-weight: 500;
}

.moment-tag[b-b5d18fdgrn] {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--berry);
    font-weight: 600;
    margin-bottom: 8px;
}

.moment-card p[b-b5d18fdgrn] {
    font-size: 15px;
    line-height: 1.62;
    color: var(--ink);
    margin: 0;
}

.small[b-b5d18fdgrn] {
    font-size: 14.5px;
    color: var(--ink-soft);
}

.tiny[b-b5d18fdgrn] {
    font-size: 12.5px;
    color: var(--ink-faint);
}

.meta-row[b-b5d18fdgrn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

    .meta-row span[b-b5d18fdgrn] {
        white-space: nowrap;
    }

.weigh[b-b5d18fdgrn] {
    margin-top: 12px;
}

    .weigh .wl[b-b5d18fdgrn] {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--berry);
        margin-right: 8px;
    }

.mast[b-b5d18fdgrn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--hairline);
}

.mast-brand[b-b5d18fdgrn] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

    .mast-brand b[b-b5d18fdgrn] {
        font-weight: 600;
    }

.avatar[b-b5d18fdgrn] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
    flex: none;
}

.review-root button[b-b5d18fdgrn], .review-root .rvbtn[b-b5d18fdgrn] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.rvbtn[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 16.5px;
    border-radius: 999px;
    padding: 15px 28px;
    min-height: 52px;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .rvbtn:active[b-b5d18fdgrn] {
        transform: scale(.985);
    }

.rvbtn-primary[b-b5d18fdgrn] {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: none;
}

    .rvbtn-primary:hover[b-b5d18fdgrn] {
        box-shadow: 0 6px 18px rgba(20, 24, 26, .18);
    }

    .rvbtn-primary:disabled[b-b5d18fdgrn] {
        opacity: .35;
        cursor: not-allowed;
        box-shadow: none;
    }

.rvbtn-outline[b-b5d18fdgrn] {
    border: 1.5px solid var(--ink);
    color: var(--ink);
    background: transparent;
}

    .rvbtn-outline:hover[b-b5d18fdgrn] {
        background: rgba(20, 24, 26, .04);
    }

.rvbtn-block[b-b5d18fdgrn] {
    width: 100%;
}

form[data-busy] input[b-b5d18fdgrn], form[data-busy] textarea[b-b5d18fdgrn] {
    background: var(--card);
    color: var(--ink-soft);
}

form[data-busy] .link-quiet[b-b5d18fdgrn],
form[data-busy] .rvbtn:not([data-busy])[b-b5d18fdgrn] {
    pointer-events: none;
    opacity: .55;
}

.rvbtn[data-busy][b-b5d18fdgrn] {
    opacity: .75;
    pointer-events: none;
}

    .rvbtn[data-busy][b-b5d18fdgrn]::after {
        content: "";
        width: 14px;
        height: 14px;
        flex: none;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: rvspin-b-b5d18fdgrn .7s linear infinite;
    }

@keyframes rvspin-b-b5d18fdgrn {
    to {
        transform: rotate(360deg);
    }
}

.about[b-b5d18fdgrn] {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 56ch;
}

    .about b[b-b5d18fdgrn] {
        color: var(--ink);
        font-weight: 600;
    }

.gate-how[b-b5d18fdgrn] {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
}

.section-title[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 14px;
}

.steps[b-b5d18fdgrn] {
    list-style: none;
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .steps li[b-b5d18fdgrn] {
        display: flex;
        gap: 10px;
        align-items: baseline;
    }

.steps[b-b5d18fdgrn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-num[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--paper);
    background: var(--berry);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step-label[b-b5d18fdgrn] {
    font-size: 15px;
    color: var(--ink-soft);
}

    .step-label b[b-b5d18fdgrn] {
        color: var(--ink);
    }

.otp-row[b-b5d18fdgrn] {
    --r-join: 14px;
    display: flex;
    align-items: stretch;
    margin-top: 14px;
}

    .otp-row .code-input[b-b5d18fdgrn] {
        flex: 1;
        min-width: 0;
        min-height: 54px;
        border-radius: var(--r-join) 0 0 var(--r-join) !important;
        border-right: none;
        margin: 0;
    }

    .otp-row .rvbtn[b-b5d18fdgrn] {
        border-radius: 0 var(--r-join) var(--r-join) 0 !important;
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        padding: 0 28px;
        margin: 0;
        white-space: nowrap;
    }

@media (max-width: 460px) {
    .otp-row[b-b5d18fdgrn] {
        flex-direction: column;
        gap: 12px;
    }

        .otp-row .code-input[b-b5d18fdgrn] {
            border-radius: var(--r-join) !important;
            border-right: 1.5px solid var(--hairline);
        }

        .otp-row .rvbtn[b-b5d18fdgrn] {
            border-radius: 999px !important;
        }
}

.spam-note[b-b5d18fdgrn] {
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--berry);
    border-radius: var(--r-field);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}

    .spam-note b[b-b5d18fdgrn] {
        color: var(--ink);
        font-weight: 600;
    }

@media (min-width: 720px) {
    .gate-card form[b-b5d18fdgrn] {
        max-width: 440px;
    }
}

.review-root h1:focus[b-b5d18fdgrn], .review-root h1:focus-visible[b-b5d18fdgrn] {
    outline: none;
}

.mast-logo[b-b5d18fdgrn] {
    height: 24px;
    width: auto;
    display: block;
}

.review-root [hidden][b-b5d18fdgrn] {
    display: none !important;
}

.avatar[b-b5d18fdgrn] {
    position: relative;
    overflow: hidden;
}

.hero-person[b-b5d18fdgrn] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
}

    .hero-person .display[b-b5d18fdgrn] {
        margin: 0;
    }

.avatar-lg[b-b5d18fdgrn] {
    width: 88px;
    height: 88px;
    font-size: 24px;
    flex: none;
}

@media (max-width: 560px) {
    .hero-person[b-b5d18fdgrn] {
        gap: 14px;
    }

    .avatar-lg[b-b5d18fdgrn] {
        width: 64px;
        height: 64px;
        font-size: 18px;
    }
}

.avatar-photo[b-b5d18fdgrn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--card);
}

.mast-home[b-b5d18fdgrn] {
    display: block;
    line-height: 0;
}

.mast-tagline[b-b5d18fdgrn] {
    line-height: 1;
    position: relative;
    top: 1px;
    font-size: 12px;
    color: var(--ink-faint);
    border-left: 1px solid var(--hairline);
    padding-left: 10px;
    margin-left: 2px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .mast-tagline[b-b5d18fdgrn] {
        display: none;
    }
}

.link-quiet[b-b5d18fdgrn] {
    font-size: 14.5px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--hairline);
}

    .link-quiet:hover[b-b5d18fdgrn] {
        color: var(--ink);
    }

.review-root :focus-visible[b-b5d18fdgrn] {
    outline: 2px solid var(--berry);
    outline-offset: 3px;
    border-radius: 6px;
}

.review-root input[type=text][b-b5d18fdgrn],
.review-root input[type=email][b-b5d18fdgrn],
.review-root textarea[b-b5d18fdgrn] {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--hairline);
    border-radius: var(--r-field);
    padding: 14px 16px;
    transition: border-color .15s ease;
}

    .review-root input[type=text]:focus[b-b5d18fdgrn],
    .review-root input[type=email]:focus[b-b5d18fdgrn],
    .review-root textarea:focus[b-b5d18fdgrn] {
        border-color: var(--ink);
        outline: none;
    }

.review-root input[type=range][b-b5d18fdgrn],
.review-root input[type=range]:focus[b-b5d18fdgrn] {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    outline: none;
}

.review-root textarea[b-b5d18fdgrn] {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
}

    .review-root input[b-b5d18fdgrn]::placeholder,
    .review-root textarea[b-b5d18fdgrn]::placeholder {
        color: var(--ink-faint);
    }

.review-root input[type=text]:disabled[b-b5d18fdgrn] {
    opacity: .45;
}

.anon-check[b-b5d18fdgrn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    font-size: 14.5px;
    color: var(--ink-soft);
    cursor: pointer;
}

    .anon-check input[b-b5d18fdgrn] {
        accent-color: var(--berry);
        margin-top: 3px;
        flex: none;
        width: 16px;
        height: 16px;
    }

.field-gap[b-b5d18fdgrn] {
    margin-top: 26px;
}

.helper[b-b5d18fdgrn] {
    margin-top: 12px;
}

.flow-actions[b-b5d18fdgrn] {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

    .flow-actions .rvbtn[b-b5d18fdgrn] {
        align-self: stretch;
    }

@media (min-width: 720px) {
    .flow-actions .rvbtn[b-b5d18fdgrn] {
        align-self: flex-start;
        min-width: 240px;
    }
}

.flow-actions.row[b-b5d18fdgrn] {
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    flex-wrap: nowrap;
}

    .flow-actions.row .rvbtn[b-b5d18fdgrn] {
        align-self: auto;
        min-width: 0;
        white-space: nowrap;
        padding: 14px 16px;
        font-size: 15.5px;
    }

    .flow-actions.row .rvbtn-primary[b-b5d18fdgrn] {
        flex: 1 1 auto;
    }

    .flow-actions.row .rvbtn-outline[b-b5d18fdgrn] {
        flex: 0 0 auto;
    }

.path[b-b5d18fdgrn] {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blk[b-b5d18fdgrn] {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 22px 22px 10px;
    box-shadow: var(--shadow);
}

.blk-head[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blk-num[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--paper);
    background: var(--berry);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blk-q[b-b5d18fdgrn] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.blk-body[b-b5d18fdgrn] {
    margin-top: 14px;
    font-size: 16px;
}

    .blk-body p[b-b5d18fdgrn] {
        margin-top: 12px;
    }

        .blk-body p:first-child[b-b5d18fdgrn] {
            margin-top: 0;
        }

    .blk-body b[b-b5d18fdgrn] {
        font-weight: 600;
    }

.blk-closer[b-b5d18fdgrn] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 16.5px;
}

    .blk-closer .dash[b-b5d18fdgrn] {
        color: var(--berry);
    }

details.more[b-b5d18fdgrn] {
    margin-top: 14px;
    border-top: 1px solid var(--hairline);
}

    details.more summary[b-b5d18fdgrn] {
        list-style: none;
        cursor: pointer;
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

        details.more summary[b-b5d18fdgrn]::-webkit-details-marker {
            display: none;
        }

    details.more .plus[b-b5d18fdgrn] {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        color: var(--ink-faint);
        transition: transform .2s ease;
        line-height: 1;
    }

    details.more[open] .plus[b-b5d18fdgrn] {
        transform: rotate(45deg);
        color: var(--berry);
    }

    details.more .more-body[b-b5d18fdgrn] {
        padding: 0 0 16px;
        color: var(--ink-soft);
        font-size: 15.5px;
    }

.gate-card[b-b5d18fdgrn] {
    margin-top: 14px;
}

.gate-note[b-b5d18fdgrn] {
    margin-top: 12px;
}

.sent-head[b-b5d18fdgrn] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 22px;
}

.sent-head-big[b-b5d18fdgrn] {
    align-items: center;
    margin-top: 0;
    gap: 14px;
}

    .sent-head-big .sent-check[b-b5d18fdgrn] {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

.sent-check[b-b5d18fdgrn] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--berry);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.code-input[b-b5d18fdgrn] {
    margin-top: 10px;
    width: 100%;
    max-width: 240px;
    font-family: var(--mono);
    font-size: 23px;
    letter-spacing: .32em;
    text-align: center;
    color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--hairline);
    border-radius: var(--r-field);
    padding: 13px 10px 13px 16px;
    transition: border-color .15s ease;
}

    .code-input:focus[b-b5d18fdgrn] {
        border-color: var(--ink);
        outline: none;
    }

    .code-input[b-b5d18fdgrn]::placeholder {
        color: var(--ink-faint);
        letter-spacing: .32em;
    }

@keyframes swapin-b-b5d18fdgrn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.swap-in[b-b5d18fdgrn] {
    animation: swapin-b-b5d18fdgrn .28s ease both;
}

.invite-block[b-b5d18fdgrn] {
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid var(--hairline);
}

.flow-top[b-b5d18fdgrn] {
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 5;
}

.progress[b-b5d18fdgrn] {
    height: 2px;
    background: var(--hairline);
}

.progress-fill[b-b5d18fdgrn] {
    height: 100%;
    background: var(--berry);
    width: 0%;
    transition: width .3s ease;
}

.flow-bar[b-b5d18fdgrn] {
    max-width: 620px;
    margin: 0 auto;
    padding: 14px 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-count[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--ink-faint);
}

.saved-chip[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity .3s ease;
}

    .saved-chip.show[b-b5d18fdgrn] {
        opacity: 1;
    }

    .saved-chip .tick[b-b5d18fdgrn] {
        color: var(--berry);
    }

.ribbon[b-b5d18fdgrn] {
    max-width: 620px;
    margin: 10px auto 0;
    padding: 0 22px 12px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-bottom: 1px solid var(--hairline);
}

.ribbon-inner[b-b5d18fdgrn] {
    flex: 1;
    min-width: 0;
}

.ribbon-eyebrow[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.ribbon-text[b-b5d18fdgrn] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-top: 3px;
}

.gate-banner[b-b5d18fdgrn] {
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: baseline;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
    background: var(--berry);
    color: var(--paper);
    font-size: 12.5px;
    line-height: 1.4;
    padding: 9px 22px;
}

    .gate-banner[hidden][b-b5d18fdgrn] {
        display: none;
    }

    .gate-banner .gate-next[b-b5d18fdgrn] {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(244, 246, 245, .85);
        white-space: nowrap;
    }

.dim-block[b-b5d18fdgrn] {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    box-shadow: var(--shadow);
    margin-top: 16px;
}

    .dim-block:first-of-type[b-b5d18fdgrn] {
        margin-top: 26px;
    }

    .dim-block:focus-within[b-b5d18fdgrn] {
        border-color: var(--ink-soft);
        box-shadow: 0 0 0 3px rgba(20, 24, 26, .05), var(--shadow);
    }

    .dim-block.needs-why[b-b5d18fdgrn] {
        border-color: var(--berry-line);
    }

    .dim-block.dk-on > *:not(.dim-head)[b-b5d18fdgrn] {
        opacity: .65;
    }

.dim-head[b-b5d18fdgrn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dim-name[b-b5d18fdgrn] {
    transition: color .2s ease;
}

.dim-block.scored .dim-name[b-b5d18fdgrn] {
    color: var(--berry);
}

.dim-block.await-why .why-input[b-b5d18fdgrn] {
    border-color: var(--berry-mid);
}

.dim-block.needs-why .why-input[b-b5d18fdgrn] {
    border-color: var(--berry);
}

.dk[b-b5d18fdgrn] {
    display: flex;
    gap: 7px;
    align-items: center;
    flex: none;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

    .dk input[b-b5d18fdgrn] {
        accent-color: var(--berry);
        width: 15px;
        height: 15px;
    }

.one-last[b-b5d18fdgrn] {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    box-shadow: var(--shadow);
    margin-top: 16px;
}

.slider[b-b5d18fdgrn] {
    position: relative;
    margin-top: 22px;
    padding-top: 34px;
    --p: 50%;
}

.sl-range[b-b5d18fdgrn] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
    display: block;
}

    .sl-range[b-b5d18fdgrn]::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 99px;
        background: linear-gradient(to right, var(--berry) var(--p), var(--hairline) var(--p));
    }

    .sl-range[b-b5d18fdgrn]::-moz-range-track {
        height: 4px;
        border-radius: 99px;
        background: linear-gradient(to right, var(--berry) var(--p), var(--hairline) var(--p));
    }

    .sl-range[b-b5d18fdgrn]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--berry);
        border: 2.5px solid var(--card);
        box-shadow: 0 1px 4px rgba(20, 24, 26, .25);
        margin-top: -9px;
        transition: transform .12s ease;
    }

    .sl-range[b-b5d18fdgrn]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--berry);
        border: 2.5px solid var(--card);
        box-shadow: 0 1px 4px rgba(20, 24, 26, .25);
    }

    .sl-range:active[b-b5d18fdgrn]::-webkit-slider-thumb {
        transform: scale(1.15);
    }

.slider.untouched .sl-range[b-b5d18fdgrn]::-webkit-slider-runnable-track {
    background: var(--hairline);
}

.slider.untouched .sl-range[b-b5d18fdgrn]::-moz-range-track {
    background: var(--hairline);
}

.slider.untouched .sl-range[b-b5d18fdgrn]::-webkit-slider-thumb {
    background: var(--paper);
    border-color: var(--ink-faint);
}

.slider.untouched .sl-range[b-b5d18fdgrn]::-moz-range-thumb {
    background: var(--paper);
    border-color: var(--ink-faint);
}

.slider.dk-off[b-b5d18fdgrn] {
    pointer-events: none;
}

.sl-labels[b-b5d18fdgrn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}

.sl-lo[b-b5d18fdgrn], .sl-hi[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.sl-hi[b-b5d18fdgrn] {
    text-align: right;
}

.sl-val[b-b5d18fdgrn] {
    flex: 1;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ink);
    min-height: 18px;
}

.sl-marks[b-b5d18fdgrn] {
    position: absolute;
    left: 0;
    right: 0;
    top: 45px;
    height: 4px;
    pointer-events: none;
}

    .sl-marks i[b-b5d18fdgrn] {
        position: absolute;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--ink-faint);
        opacity: .6;
    }

.sl-badge[b-b5d18fdgrn] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    border: 1.5px solid transparent;
    padding: 5px 13px;
    box-shadow: 0 3px 10px rgba(20, 24, 26, .28);
    transition: left .1s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}

    .sl-badge[b-b5d18fdgrn]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(--ink);
        transition: border-top-color .15s ease;
    }

    .sl-badge .sl-num[b-b5d18fdgrn] {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        font-size: 12.5px;
    }

    .sl-badge .sl-word[b-b5d18fdgrn] {
        font-size: 11.5px;
        color: rgba(244, 246, 245, .85);
    }

    .sl-badge .sl-state[b-b5d18fdgrn] {
        font-size: 11.5px;
    }

        .sl-badge .sl-state:empty[b-b5d18fdgrn] {
            display: none;
        }

    .sl-badge.await[b-b5d18fdgrn] {
        border-color: var(--berry-mid);
    }

        .sl-badge.await .sl-state[b-b5d18fdgrn] {
            color: var(--berry-bright);
        }

    .sl-badge.done .sl-state[b-b5d18fdgrn] {
        color: var(--paper);
        font-weight: 600;
    }

    .sl-badge.alert[b-b5d18fdgrn] {
        background: var(--berry);
    }

        .sl-badge.alert[b-b5d18fdgrn]::after {
            border-top-color: var(--berry);
        }

@keyframes pillpop-b-b5d18fdgrn {
    from {
        transform: translateX(-50%) scale(.9);
    }

    to {
        transform: translateX(-50%) scale(1);
    }
}

.sl-badge.pop[b-b5d18fdgrn] {
    animation: pillpop-b-b5d18fdgrn .16s ease;
}

.slider.untouched .sl-badge[b-b5d18fdgrn] {
    opacity: 0;
}

.why-row[b-b5d18fdgrn] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
}

.review-root textarea.why-input[b-b5d18fdgrn] {
    width: 100%;
    resize: none;
    overflow: hidden;
    min-height: 44px;
    line-height: 1.5;
    padding: 10px 14px;
    font-size: 15px;
    background: var(--paper);
    border-color: transparent;
    border-radius: 10px;
    transition: background .15s ease, border-color .15s ease;
}

    .review-root textarea.why-input:focus[b-b5d18fdgrn] {
        background: var(--card);
        border-color: var(--ink);
    }

    .review-root textarea.why-input:disabled[b-b5d18fdgrn] {
        opacity: .55;
    }

    .review-root textarea.why-input.oq[b-b5d18fdgrn] {
        min-height: 60px;
    }

.chars[b-b5d18fdgrn] {
    align-self: flex-end;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--ink-faint);
}

    .chars.tight[b-b5d18fdgrn] {
        color: var(--berry);
    }

.save-state[b-b5d18fdgrn] {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

    .save-state .tick[b-b5d18fdgrn] {
        color: var(--berry);
    }

.touches[b-b5d18fdgrn] {
    margin-top: 30px;
    padding: 4px 0 26px;
    border-bottom: 1px solid var(--hairline);
}

.chip-row[b-b5d18fdgrn] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.chip[b-b5d18fdgrn] {
    border: 1.5px solid var(--hairline);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 15.5px;
    background: var(--card);
    transition: all .15s ease;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
}

    .chip:hover[b-b5d18fdgrn] {
        border-color: var(--ink);
    }

    .chip[aria-pressed=true][b-b5d18fdgrn] {
        border-color: var(--berry);
        background: var(--berry-soft);
        color: var(--ink);
    }

.promo[b-b5d18fdgrn] {
    margin-top: 36px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-card);
    padding: 26px 24px;
    box-shadow: var(--shadow);
}

.promo-eyebrow[b-b5d18fdgrn] {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244, 246, 245, .55);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .promo-eyebrow[b-b5d18fdgrn]::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--berry);
    }

.promo-head[b-b5d18fdgrn] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin-top: 12px;
}

.promo-body[b-b5d18fdgrn] {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(244, 246, 245, .78);
}

.promo-actions[b-b5d18fdgrn] {
    margin-top: 20px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.promo-btn[b-b5d18fdgrn] {
    background: var(--paper);
    color: var(--ink);
}

    .promo-btn:hover[b-b5d18fdgrn] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    }

.promo-link[b-b5d18fdgrn] {
    color: rgba(244, 246, 245, .7);
    text-decoration-color: rgba(244, 246, 245, .3);
}

    .promo-link:hover[b-b5d18fdgrn] {
        color: var(--paper);
    }

.footer[b-b5d18fdgrn] {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer .brand[b-b5d18fdgrn] {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

        .footer .brand b[b-b5d18fdgrn] {
            color: var(--ink-soft);
            font-weight: 500;
        }

.foot-links[b-b5d18fdgrn] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ink-faint);
}

    .foot-links a[b-b5d18fdgrn] {
        font-size: 12.5px;
        color: var(--ink-soft);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--hairline);
    }

        .foot-links a:hover[b-b5d18fdgrn] {
            color: var(--ink);
        }

.foot-row[b-b5d18fdgrn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.field-error[b-b5d18fdgrn] {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--berry);
}

.banner[b-b5d18fdgrn] {
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid var(--berry-line);
    border-radius: var(--r-field);
    background: var(--berry-soft);
    color: var(--berry);
    font-size: 14.5px;
}

.after-note[b-b5d18fdgrn] {
    margin-top: 16px;
}

.review-root .footer[b-b5d18fdgrn] {
    border-top: 1px solid var(--hairline);
}

.review-root .shell > *:nth-last-child(2)[b-b5d18fdgrn] {
    margin-bottom: 56px;
}

.sl-range[data-untouched][b-b5d18fdgrn]::-webkit-slider-thumb {
    background: var(--card);
    border-color: var(--ink-faint);
}

.sl-range[data-untouched][b-b5d18fdgrn]::-moz-range-thumb {
    background: var(--card);
    border-color: var(--ink-faint);
}

.calls > summary[b-b5d18fdgrn] {
    list-style: none;
    cursor: pointer;
}

    .calls > summary[b-b5d18fdgrn]::marker {
        display: none;
    }

    .calls > summary[b-b5d18fdgrn]::-webkit-details-marker {
        display: none;
    }

.calls-summary[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.calls-open-btn[b-b5d18fdgrn] {
    display: inline-flex;
}

.calls[open] > summary[b-b5d18fdgrn] {
    display: none;
}

.calls-open-note[b-b5d18fdgrn] {
    color: var(--ink-faint);
}

.shell.stage[b-b5d18fdgrn] {
    max-width: 780px;
}

.idea-zone[b-b5d18fdgrn] {
    background: linear-gradient(180deg, #fdfcfa, #f7f5f1);
    border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    border-radius: 18px;
    box-shadow: none;
    margin-top: 18px;
    padding: 18px 22px 12px;
    height: clamp(320px, 44vh, 480px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .idea-zone .pitch-card[b-b5d18fdgrn] {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 2px 0 0;
        margin: 0;
    }

.iz-head[b-b5d18fdgrn] {
    flex: 0 0 auto;
}

.iz-meta[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint, #8a8f9e);
    margin: 0 0 8px;
}

.iz-code[b-b5d18fdgrn] {
    color: var(--ink);
    font-weight: 700;
}

.idea-essence[b-b5d18fdgrn] {
    font-family: var(--display, inherit);
    font-size: clamp(17px, 2.3vw, 21px);
    font-weight: 650;
    line-height: 1.38;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iz-body[b-b5d18fdgrn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 6px;
    margin-top: 4px;
}

.idea-zone .idea-tabs[b-b5d18fdgrn] {
    margin: 2px 0 0;
    border-bottom: 0;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px;
}

.idea-zone .itab[b-b5d18fdgrn] {
    padding: 5px 11px;
    font-size: 12.5px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.reflect-zone[b-b5d18fdgrn] {
    margin-top: 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 24px 24px;
    box-shadow: 0 12px 40px rgba(20, 24, 36, 0.08);
}

    .reflect-zone .dim-block[b-b5d18fdgrn],
    .reflect-zone .read-card[b-b5d18fdgrn] {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 6px 0 0;
        margin: 0;
    }

.rz-head[b-b5d18fdgrn] {
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.reflect-kicker[b-b5d18fdgrn] {
    display: block;
    font-family: var(--mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--berry);
    margin-bottom: 6px;
}

@media (max-width: 660px) {
    .idea-zone[b-b5d18fdgrn] {
        height: clamp(300px, 52vh, 480px);
        padding: 14px 14px 10px;
    }

    .reflect-zone[b-b5d18fdgrn] {
        padding: 16px 14px 20px;
    }
}

.idea-tabs[b-b5d18fdgrn] {
    display: flex;
    gap: 6px;
    margin: 26px 0 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.itab[b-b5d18fdgrn] {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft, #5a6172);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

    .itab:hover[b-b5d18fdgrn] {
        color: var(--ink);
    }

    .itab.is-on[b-b5d18fdgrn] {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--paper);
    }

.path.tabbed .tabwrap[b-b5d18fdgrn] {
    display: none;
}

    .path.tabbed .tabwrap.is-open[b-b5d18fdgrn] {
        display: block;
        animation: rsfade-b-b5d18fdgrn 0.18s ease;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px 18px;
        box-shadow: 0 3px 14px rgba(20, 24, 36, 0.05);
    }

.path.tabbed .blk-head[b-b5d18fdgrn] {
    display: none;
}

.path.tabbed .blk[b-b5d18fdgrn],
.path.tabbed .moment-card[b-b5d18fdgrn] {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.path.tabbed .blk-body p[b-b5d18fdgrn] {
    margin: 0;
}

@keyframes rsfade-b-b5d18fdgrn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dim-track.stepper-on .dim-block[b-b5d18fdgrn] {
    display: none;
}

    .dim-track.stepper-on .dim-block.is-current[b-b5d18fdgrn] {
        display: flex;
        flex-direction: column;
        animation: rsfade-b-b5d18fdgrn 0.18s ease;
    }

.calls.stepper-live [data-step-final][b-b5d18fdgrn] {
    display: none;
}

    .calls.stepper-live [data-step-final].is-current[b-b5d18fdgrn] {
        display: block;
        animation: rsfade-b-b5d18fdgrn 0.18s ease;
    }

.stepper-bar[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

.step-pos[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint, #8a8f9e);
}

.step-next[data-armed][b-b5d18fdgrn] {
    background: var(--berry);
    border-color: var(--berry);
    color: var(--paper);
}

.seg-track[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 12px 0 4px;
}

    .seg-track button[b-b5d18fdgrn] {
        flex: 1 1 0;
        height: 7px;
        border-radius: 999px;
        border: 0;
        background: color-mix(in srgb, var(--ink) 10%, transparent);
        padding: 0;
        cursor: pointer;
        transition: transform 0.1s ease, background 0.15s ease;
    }

        .seg-track button:hover[b-b5d18fdgrn] {
            transform: scaleY(1.6);
        }

        .seg-track button.is-done[b-b5d18fdgrn] {
            background: var(--berry);
        }

        .seg-track button.is-here[b-b5d18fdgrn] {
            transform: scaleY(1.35);
        }

            .seg-track button.is-here:not(.is-done)[b-b5d18fdgrn] {
                background: var(--ink);
            }

        .seg-track button.is-flag[b-b5d18fdgrn] {
            background: #c2410c;
        }

        .seg-track button.dot-final[b-b5d18fdgrn] {
            flex: 0 0 18px;
            border-radius: 4px;
        }

.sent-line[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin: 2px 0 10px;
}

.seg-read[b-b5d18fdgrn] {
    flex: 0 0 34px;
    height: 7px;
    border-radius: 999px;
}

    .seg-read.is-here[b-b5d18fdgrn] {
        background: var(--ink);
    }

    .seg-read.is-done[b-b5d18fdgrn] {
        background: var(--berry);
    }

.seg-ghost[b-b5d18fdgrn] {
    flex: 1 1 0;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.flow-bar[b-b5d18fdgrn] {
    background: transparent;
    padding: 0;
}

.idea-sub[b-b5d18fdgrn] {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--ink-faint, #8a8f9e);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sent-line .sent-check[b-b5d18fdgrn] {
    flex: 0 0 auto;
}

.flow-guide[b-b5d18fdgrn] {
    font-size: 13px;
    color: var(--ink-faint, #8a8f9e);
    margin: 8px 0 0;
}

.send-hint.warn[b-b5d18fdgrn] {
    color: #c2410c;
}

button[data-main-send]:disabled[b-b5d18fdgrn] {
    opacity: 0.45;
    cursor: default;
}

.send-confirm[b-b5d18fdgrn] {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--berry) 30%, transparent);
    border-left: 3px solid var(--berry);
    border-radius: 12px;
    background: color-mix(in srgb, var(--berry) 5%, var(--paper));
}

    .send-confirm p[b-b5d18fdgrn] {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.55;
    }

.confirm-row[b-b5d18fdgrn] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.step-prev .hint[b-b5d18fdgrn],
.step-next .hint[b-b5d18fdgrn] {
    font-weight: 500;
    opacity: 0.75;
}

.rz-head[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
}

    .rz-head .reflect-kicker[b-b5d18fdgrn] {
        margin: 0;
        flex: 0 0 auto;
    }

.rz-track[b-b5d18fdgrn] {
    margin: 12px 0 4px;
}

.seg-ghost-final[b-b5d18fdgrn] {
    flex: 0 0 18px;
    border-radius: 4px;
}

.rz-spacer[b-b5d18fdgrn] {
    flex: 1 1 auto;
}

.rz-head .saved-chip[b-b5d18fdgrn] {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-faint, #8a8f9e);
}

.reflect-zone .flow-top[b-b5d18fdgrn],
.reflect-zone .invite-block[b-b5d18fdgrn] {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.reflect-zone .flow-bar[b-b5d18fdgrn] {
    display: flex;
    gap: 12px;
    align-items: baseline;
    background: transparent;
    padding: 0;
    margin: 10px 0 2px;
    font-size: 11px;
}



.conv-lead[b-b5d18fdgrn] {
    margin: 16px 0 2px;
}

.read-card .field-gap[b-b5d18fdgrn] {
    margin-top: 10px;
}

.card-foot[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.card-foot-note[b-b5d18fdgrn] {
    margin: 0;
    max-width: 52ch;
}

.action-bar[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.ab-seq[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.step-prev[b-b5d18fdgrn] {
    border: 0;
    background: transparent;
    color: var(--ink-faint, #8a8f9e);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 4px;
}

    .step-prev:hover:not(:disabled)[b-b5d18fdgrn] {
        color: var(--ink);
    }

    .step-prev:disabled[b-b5d18fdgrn] {
        opacity: 0.35;
        cursor: default;
    }

.dim-block .q.q-sm[b-b5d18fdgrn] {
    margin: 6px 0 4px;
}

.dim-block .weigh[b-b5d18fdgrn] {
    margin: 2px 0 6px;
}

.dim-block .scale-host[b-b5d18fdgrn] {
    margin-top: 2px;
}

.dim-block .slider[b-b5d18fdgrn] {
    margin-top: 2px;
}

.reflect-zone .rvbtn-primary[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    border: 0;
    color: var(--paper, #fff);
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 22%, transparent);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .reflect-zone .rvbtn-primary:hover:not(:disabled)[b-b5d18fdgrn] {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px color-mix(in srgb, var(--ink) 30%, transparent);
    }

    .reflect-zone .rvbtn-primary:active:not(:disabled)[b-b5d18fdgrn] {
        transform: translateY(0);
    }

.reflect-zone .send-cta[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

    .reflect-zone .send-cta:hover:not(:disabled)[b-b5d18fdgrn] {
        border-color: var(--ink);
        background: color-mix(in srgb, var(--ink) 3%, #fff);
        transform: translateY(-1px);
    }

/* every answer field shares one skin: soft filled, berry on focus */
.reflect-zone .dim-block textarea[b-b5d18fdgrn],
.reflect-zone .one-last textarea[b-b5d18fdgrn] {
    width: 100%;
    height: 118px;
    overflow: auto;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 4%, #fff);
    padding: 14px 15px;
    font: inherit;
    font-size: 15.5px;
    line-height: 1.55;
    resize: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .reflect-zone .dim-block textarea:hover:not(:disabled)[b-b5d18fdgrn],
    .reflect-zone .one-last textarea:hover:not(:disabled)[b-b5d18fdgrn] {
        background: color-mix(in srgb, var(--ink) 6%, #fff);
    }

    .reflect-zone .dim-block textarea:focus[b-b5d18fdgrn],
    .reflect-zone .one-last textarea:focus[b-b5d18fdgrn] {
        outline: none;
        background: #fff;
        border-color: var(--berry);
    }

/* step zero in the assess sequence: hidden under the stepper unless
   current; the no-JS stacked page shows it editable at the top */
.calls.stepper-live [data-step-read][b-b5d18fdgrn] {
    display: none;
}

    .calls.stepper-live [data-step-read].is-current[b-b5d18fdgrn] {
        display: flex;
        flex-direction: column;
        animation: rsfade-b-b5d18fdgrn 0.18s ease;
    }

button.seg-read[b-b5d18fdgrn],
span.seg-read[b-b5d18fdgrn] {
    border: 0;
    padding: 0;
    background: var(--berry);
}

button.seg-read[b-b5d18fdgrn] {
    cursor: pointer;
}

.seg-read.is-here[b-b5d18fdgrn] {
    transform: scaleY(1.35);
}

.seg-track button.is-done[b-b5d18fdgrn],
.seg-read.is-done[b-b5d18fdgrn] {
    background: linear-gradient(135deg, var(--berry), #d40a63);
}


/* ═══ RS refinements: steady heights, merged header, grouped scale,
   dressed buttons, trusted footer ═══ */
.reflect-zone .dim-block[b-b5d18fdgrn],
.reflect-zone .read-card[b-b5d18fdgrn],
.reflect-zone .one-last[b-b5d18fdgrn] {
    min-height: 408px;
}

    /* geometry pins from the BOTTOM: the scale block (and everything after
   it) anchors low in the fixed-height card, so slider, field, and bar sit
   at identical positions on every card; the question and steer keep
   natural height above, and the slack lives in one predictable place */
    .reflect-zone .dim-block .scale-host[b-b5d18fdgrn] {
        margin-top: auto;
    }

.rz-pos[b-b5d18fdgrn] {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
    min-width: 0;
}

    .rz-pos b[b-b5d18fdgrn] {
        font-weight: 750;
    }

.pos-count[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint, #8a8f9e);
    margin-left: 6px;
}

.under-field[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.dk-under[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft, #5a6172);
    cursor: pointer;
}

    .dk-under input[b-b5d18fdgrn] {
        accent-color: var(--berry);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

    .dk-under:hover[b-b5d18fdgrn] {
        color: var(--ink);
    }

.calls.stepper-live .dim-name[b-b5d18fdgrn] {
    display: none; /* the header carries the position; no-JS keeps per-card names */
}

.calls.stepper-live .dim-head[b-b5d18fdgrn] {
    display: none; /* the header's proxy carries Not-my-call; no-JS keeps the in-card one */
}

/* the scale and its anchors become one grouped object */
.reflect-zone .scale-host[b-b5d18fdgrn] {
    background: color-mix(in srgb, var(--ink) 3.5%, #fff);
    border-radius: 14px;
    padding: 16px 16px 12px;
    margin-top: 10px;
}

    .reflect-zone .scale-host .sl-labels[b-b5d18fdgrn] {
        margin-top: 8px;
    }

/* Send and Back, dressed */
.reflect-zone .send-cta[b-b5d18fdgrn] {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
    box-shadow: 0 1px 2px rgba(20, 24, 36, 0.06);
}

    .reflect-zone .send-cta:hover:not(:disabled)[b-b5d18fdgrn] {
        border-color: var(--ink);
        background: color-mix(in srgb, var(--ink) 4%, #fff);
        box-shadow: 0 3px 10px rgba(20, 24, 36, 0.1);
    }

.reflect-zone .step-prev[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
    background: #fff;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft, #5a6172);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

    .reflect-zone .step-prev:hover:not(:disabled)[b-b5d18fdgrn] {
        border-color: var(--ink);
        color: var(--ink);
        background: color-mix(in srgb, var(--ink) 3%, #fff);
    }

.action-bar[hidden][b-b5d18fdgrn] {
    display: none;
}

.rz-sub[b-b5d18fdgrn] {
    margin-top: 0;
}

.reflect-zone .step-prev:hover:not(:disabled)[b-b5d18fdgrn] {
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    background: color-mix(in srgb, var(--ink) 3%, #fff);
    color: var(--ink);
}

/* the footer speaks trust before it speaks links */
/* ═══ the footer: a designed close, not an afterthought ═══ */
.footer[b-b5d18fdgrn] {
    margin-top: 56px;
    padding: 0 0 44px;
    text-align: center;
    border-top: 0;
}

.foot-rule[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 22px;
    max-width: 420px;
}

    .foot-rule span[b-b5d18fdgrn] {
        flex: 1 1 auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent));
    }

        .foot-rule span:last-child[b-b5d18fdgrn] {
            background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent));
        }

    .foot-rule i[b-b5d18fdgrn] {
        font-style: normal;
        font-size: 9px;
        color: var(--berry);
        line-height: 1;
    }

.foot-trust[b-b5d18fdgrn] {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
    max-width: 46ch;
    margin: 0 auto 26px;
}

.foot-brand[b-b5d18fdgrn] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0 0 4px;
}

.foot-tagline[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint, #8a8f9e);
    margin: 0 0 18px;
}

.footer .foot-links[b-b5d18fdgrn] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    font-family: var(--mono, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint, #8a8f9e);
}

    .footer .foot-links a[b-b5d18fdgrn] {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .footer .foot-links a:hover[b-b5d18fdgrn] {
            color: var(--ink);
            border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
        }

    .footer .foot-links span[b-b5d18fdgrn] {
        color: color-mix(in srgb, var(--ink) 20%, transparent);
    }

.footer .foot-year[b-b5d18fdgrn] {
    color: var(--ink-faint, #8a8f9e);
}

.footer .foot-row[b-b5d18fdgrn] {
    display: none; /* superseded by the brand/tagline stack */
}


.rz-head .saved-chip[b-b5d18fdgrn] {
    margin-left: auto;
}


/* the question is the main element — let it behave like one */
.reflect-zone .dim-block .q[b-b5d18fdgrn] {
    font-size: clamp(19px, 2.4vw, 23px);
    line-height: 1.32;
    margin: 6px 0 10px;
}

.conv-lead[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 22px 0 8px;
}

.send-hint-row[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .send-hint-row > span:first-child[b-b5d18fdgrn] {
        min-width: 0;
    }

.save-dot[b-b5d18fdgrn] {
    flex: 0 0 auto;
    font-family: var(--mono, monospace);
    font-size: 12px;
    color: var(--ink-faint, #8a8f9e);
    cursor: default;
}

    .save-dot.ok[b-b5d18fdgrn] {
        color: var(--berry);
    }

    .save-dot.warn[b-b5d18fdgrn] {
        color: #c2410c;
    }



/* ═══ the tagged track: a fixed panel title, the moving label riding the
   current segment, the narrator row beneath ═══ */
.track-wrap[b-b5d18fdgrn] {
    position: relative;
    padding: 28px 18px 0;
}

.track-tag[b-b5d18fdgrn] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper, #fff);
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    transition: left 0.2s ease;
    pointer-events: none;
}

    .track-tag[b-b5d18fdgrn]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: var(--ink);
    }

.rz-sub[b-b5d18fdgrn] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-faint, #8a8f9e);
    margin: 4px 0 14px;
}

    .rz-sub > span:first-child[b-b5d18fdgrn] {
        min-width: 0;
    }

    .rz-sub .warn[b-b5d18fdgrn] {
        color: #c2410c;
    }


/* the current card's owed-why speaks right beside the title */
.head-warn[b-b5d18fdgrn] {
    font-size: 13px;
    font-weight: 600;
    color: #c2410c;
}

    .head-warn[b-b5d18fdgrn]::before {
        content: "\2192";
        margin-right: 6px;
    }


/* the first step's Prev ghosts: invisible but present, so Next keeps
   its right seat and the bar geometry never changes */
.reflect-zone .step-prev.is-ghost[b-b5d18fdgrn] {
    visibility: hidden;
    pointer-events: none;
}


/* the mirrored flag: a why without a score marks its SCALE */
.reflect-zone .dim-block.needs-score .scale-host[b-b5d18fdgrn] {
    box-shadow: 0 0 0 2px color-mix(in srgb, #c2410c 35%, transparent);
}


/* ═══ the thank-you page: section kickers and the loop block ═══ */
.done-k[b-b5d18fdgrn] {
    font-family: var(--mono, monospace);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 26px 0 6px;
}

.done-k-note[b-b5d18fdgrn] {
    font-weight: 600;
    color: var(--ink-faint, #8a8f9e);
    letter-spacing: 0.06em;
    margin-left: 8px;
}

.anon-check.optin[b-b5d18fdgrn] {
    margin-top: 10px;
}

.optin-email[b-b5d18fdgrn] {
    margin-top: 12px;
}

    .optin-email input[b-b5d18fdgrn] {
        width: 100%;
        border: 1.5px solid transparent;
        border-radius: 12px;
        background: color-mix(in srgb, var(--ink) 4%, #fff);
        padding: 12px 14px;
        font: inherit;
        font-size: 15px;
    }

        .optin-email input:focus[b-b5d18fdgrn] {
            outline: none;
            background: #fff;
            border-color: var(--berry);
        }


/* ═══ the Done page: one panel, two ruled sections, a legible promo ═══ */
.done-zone .display[b-b5d18fdgrn] {
    font-size: clamp(26px, 3.4vw, 34px);
    margin: 8px 0 10px;
}

.done-zone .lede[b-b5d18fdgrn] {
    margin: 0 0 6px;
}

.done-zone .done-k[b-b5d18fdgrn] {
    border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    padding-top: 24px;
    margin-top: 28px;
}

    .done-zone .done-k:first-of-type[b-b5d18fdgrn] {
        border-top: 0;
        padding-top: 0;
        margin-top: 20px;
    }

.done-zone .flow-actions[b-b5d18fdgrn] {
    margin-top: 22px;
}

.promo .promo-head[b-b5d18fdgrn] {
    color: #fff;
}

.promo .promo-body[b-b5d18fdgrn] {
    color: color-mix(in srgb, #fff 78%, transparent);
}

.promo .promo-actions[b-b5d18fdgrn] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.promo .promo-btn[b-b5d18fdgrn] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    text-decoration: none;
}

    .promo .promo-btn:hover[b-b5d18fdgrn] {
        background: color-mix(in srgb, #fff 88%, var(--berry));
    }

.promo .promo-actions a:not(.promo-btn)[b-b5d18fdgrn] {
    color: color-mix(in srgb, #fff 72%, transparent);
}

    .promo .promo-actions a:not(.promo-btn):hover[b-b5d18fdgrn] {
        color: #fff;
    }
/* /Components/AinnaLoadingState.razor.rz.scp.css */
/* ============================================
   AINNA LOADING COMPONENT
   Built on proven AinnaLoader centering.
   7 animation types + logo + rotating messages.

   ANIMATIONS
   ─────────────────────────────────────────
   Generation   → Three concentric rings + AI badge
   Processing   → Four bouncing dots
   DocumentStack→ Three floating documents
   Progress     → Horizontal bar with fill
   Orbit        → Single dot tracing a ring
   Converge     → Triangle dots pulse to center
   Heartbeat    → Ainna square mark, cardiac rhythm
   ============================================ */


/* ═══════════════════════════════════════════
   LAYOUT — Proven centering from AinnaLoader
   ═══════════════════════════════════════════ */

.ainna-loader-wrapper[b-yrvfvunuap] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

    .ainna-loader-wrapper.fullscreen[b-yrvfvunuap] {
        position: fixed;
        inset: 0;
        background: #fff; /* opaque — a 0.98 film blends with whatever paints beneath */
        z-index: 10000;
        width: 100vw;
        height: 100vh;
        min-height: 0;
    }

    .ainna-loader-wrapper.centered[b-yrvfvunuap] {
        align-items: center;
        justify-content: center;
    }

.loader-content[b-yrvfvunuap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 0 0 auto;
    margin: auto;
}

/* assistive-tech-only text — the status role's announcement */
.visually-hidden[b-yrvfvunuap] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ═══════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════ */

.ainna-logo[b-yrvfvunuap] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: ainna-logoIn-b-yrvfvunuap 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; /* one-time presence, never loops */
}

    .ainna-logo img[b-yrvfvunuap] {
        height: 44px;
        width: auto;
        object-fit: contain;
    }

@keyframes ainna-logoIn-b-yrvfvunuap {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* ═══════════════════════════════════════════
   MESSAGE — Rotating text
   ═══════════════════════════════════════════ */

.loading-message[b-yrvfvunuap] {
    font-family: var(--font, 'Inter', sans-serif);
    font-size: var(--text-md, 0.875rem);
    font-weight: var(--font-weight-regular, 400);
    color: var(--ink-4, #475569);
    text-align: center;
    line-height: 1.4;
    max-width: 40ch;
    min-height: 2.8em; /* two lines reserved — rotation must not shift the composition */
    animation: ainna-messageFade-b-yrvfvunuap 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* blur() was animated here — one of the costliest filters, repainting an
   0.8s text blur on the boot path and again on every rotation. Opacity and
   transform composite on the GPU; the read is the same, the cost is not. */
@keyframes ainna-messageFade-b-yrvfvunuap {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════
   SHARED — All animation containers
   ═══════════════════════════════════════════ */

.ainna-anim[b-yrvfvunuap] {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════
   ANIMATION: GENERATION
   Three concentric rings + center AI badge
   ═══════════════════════════════════════════ */

.ainna-anim-generation[b-yrvfvunuap] {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
}

    .ainna-anim-generation .spinner-ring[b-yrvfvunuap] {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: var(--accent, #f00c71);
        animation: ainna-spin-b-yrvfvunuap 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }

        .ainna-anim-generation .spinner-ring:nth-child(2)[b-yrvfvunuap] {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-top-color: var(--accent-light, #ff4d94);
            animation-delay: 0.2s;
            animation-duration: 1.3s;
        }

        .ainna-anim-generation .spinner-ring:nth-child(3)[b-yrvfvunuap] {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-top-color: var(--premium-gold, #c9a84c);
            animation-delay: 0.4s;
            animation-duration: 1.1s;
        }

    .ainna-anim-generation .center-icon[b-yrvfvunuap] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 33%;
        height: 33%;
        background: var(--gradient-primary, linear-gradient(135deg, #f00c71, #ff4d94));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: ainna-pulse-b-yrvfvunuap 2s ease-in-out infinite;
    }

        .ainna-anim-generation .center-icon[b-yrvfvunuap]::after {
            content: 'AI';
            color: white;
            font-weight: 700;
            font-size: 16px;
        }


/* ═══════════════════════════════════════════
   ANIMATION: PROCESSING
   Four bouncing dots
   ═══════════════════════════════════════════ */

.ainna-anim-processing[b-yrvfvunuap] {
    display: inline-flex;
    gap: 8px;
}

    .ainna-anim-processing .dot[b-yrvfvunuap] {
        width: 12px;
        height: 12px;
        background: var(--accent, #f00c71);
        border-radius: 50%;
        animation: ainna-processingDot-b-yrvfvunuap 1.4s ease-in-out infinite;
    }

        .ainna-anim-processing .dot:nth-child(2)[b-yrvfvunuap] {
            animation-delay: 0.2s;
            opacity: 0.8;
        }

        .ainna-anim-processing .dot:nth-child(3)[b-yrvfvunuap] {
            animation-delay: 0.4s;
            opacity: 0.6;
        }

        .ainna-anim-processing .dot:nth-child(4)[b-yrvfvunuap] {
            animation-delay: 0.6s;
            opacity: 0.4;
        }


/* ═══════════════════════════════════════════
   ANIMATION: DOCUMENT STACK
   Three floating documents
   ═══════════════════════════════════════════ */

.ainna-anim-docstack[b-yrvfvunuap] {
    position: relative;
    width: 80px;
    height: 100px;
}

    .ainna-anim-docstack .doc[b-yrvfvunuap] {
        position: absolute;
        width: 75%;
        height: 80%;
        background: white;
        border: 2px solid var(--accent, #f00c71);
        border-radius: 4px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: ainna-stackFloat-b-yrvfvunuap 3s ease-in-out infinite;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    }

        .ainna-anim-docstack .doc[b-yrvfvunuap]::before {
            content: '';
            position: absolute;
            top: 12%;
            left: 15%;
            right: 15%;
            height: 4%;
            background: var(--border-color, #e8eaed);
            border-radius: 2px;
        }

        .ainna-anim-docstack .doc[b-yrvfvunuap]::after {
            content: '';
            position: absolute;
            top: 25%;
            left: 15%;
            right: 25%;
            height: 4%;
            background: var(--border-color, #e8eaed);
            border-radius: 2px;
        }

        .ainna-anim-docstack .doc:nth-child(2)[b-yrvfvunuap] {
            transform: translate(-50%, -50%) rotate(-5deg);
            animation-delay: 0.3s;
            border-color: var(--accent-light, #ff4d94);
        }

        .ainna-anim-docstack .doc:nth-child(3)[b-yrvfvunuap] {
            transform: translate(-50%, -50%) rotate(5deg);
            animation-delay: 0.6s;
            border-color: var(--premium-gold, #c9a84c);
        }


/* ═══════════════════════════════════════════
   ANIMATION: PROGRESS
   Horizontal bar with fill
   ═══════════════════════════════════════════ */

.ainna-anim-progress[b-yrvfvunuap] {
    width: 300px;
    max-width: 90vw;
}

.progress-bar[b-yrvfvunuap] {
    height: 6px;
    background: var(--border-color, #e8eaed);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-yrvfvunuap] {
    height: 100%;
    background: var(--gradient-primary, linear-gradient(90deg, #f00c71, #ff4d94));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-label[b-yrvfvunuap] {
    margin-top: 15px;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: var(--text-sm, 0.75rem);
    color: var(--ink-5, #64748b);
    font-weight: var(--font-weight-medium, 500);
    text-align: center;
}


/* ═══════════════════════════════════════════
   ANIMATION: ORBIT
   Single dot tracing a thin ring.
   Minimal. Deliberate. Strategic thinking.
   ═══════════════════════════════════════════ */

.ainna-anim-orbit[b-yrvfvunuap] {
    position: relative;
    width: 80px;
    height: 80px;
}

.orbit-track[b-yrvfvunuap] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #e8eaed);
}

.orbit-dot[b-yrvfvunuap] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent, #f00c71);
    border-radius: 50%;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    box-shadow: 0 0 12px var(--accent, #f00c71), 0 0 4px var(--accent, #f00c71);
    transform-origin: 5px 45px;
    animation: ainna-orbit-b-yrvfvunuap 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* the trace: a fainter, smaller dot half a phase behind on the same path.
   The orbit keeps its minimal, deliberate read — opacity does the work of
   depth, not extra motion. */
.orbit-trace[b-yrvfvunuap] {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-light, #ff4d94);
    border-radius: 50%;
    top: -3px;
    left: 50%;
    margin-left: -3px;
    opacity: 0.35;
    transform-origin: 3px 43px;
    animation: ainna-orbit-b-yrvfvunuap 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: -1.2s;
}

@keyframes ainna-orbit-b-yrvfvunuap {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ═══════════════════════════════════════════
   ANIMATION: RING
   The in-shell wait — identical recipe to the
   page's veil ring and native wait (24px, soft
   berry track, 0.7s linear). One dialect,
   everywhere a panel waits.
   ═══════════════════════════════════════════ */

.ainna-anim-ring[b-yrvfvunuap] {
    width: 24px;
    height: 24px;
}

.ring-spin[b-yrvfvunuap] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid rgba(236, 72, 153, 0.18);
    border-top-color: #db2777;
    animation: ainna-ring-rotate-b-yrvfvunuap 0.7s linear infinite;
}

@keyframes ainna-ring-rotate-b-yrvfvunuap {
    to {
        transform: rotate(360deg);
    }
}


/* ═══════════════════════════════════════════
   ANIMATION: CONVERGE
   Three dots at triangle vertices pulse
   toward center and back. Ideas crystallizing.
   ═══════════════════════════════════════════ */

.ainna-anim-converge[b-yrvfvunuap] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .ainna-anim-converge .converge-dot[b-yrvfvunuap] {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent, #f00c71);
        animation: ainna-converge-b-yrvfvunuap 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

        /* Top center */
        .ainna-anim-converge .converge-dot:nth-child(1)[b-yrvfvunuap] {
            top: 0;
            left: 50%;
            margin-left: -4px;
            --tx: 0px;
            --ty: 36px;
        }

        /* Bottom left */
        .ainna-anim-converge .converge-dot:nth-child(2)[b-yrvfvunuap] {
            bottom: 4px;
            left: 8px;
            --tx: 28px;
            --ty: -28px;
            animation-delay: 0.15s;
            opacity: 0.8;
        }

        /* Bottom right */
        .ainna-anim-converge .converge-dot:nth-child(3)[b-yrvfvunuap] {
            bottom: 4px;
            right: 8px;
            --tx: -28px;
            --ty: -28px;
            animation-delay: 0.3s;
            opacity: 0.6;
        }

@keyframes ainna-converge-b-yrvfvunuap {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    40% {
        transform: translate(var(--tx), var(--ty)) scale(0.6);
        opacity: 0.4;
    }

    50% {
        transform: translate(var(--tx), var(--ty)) scale(0.6);
        opacity: 0.4;
        box-shadow: 0 0 16px var(--accent, #f00c71);
    }

    60% {
        transform: translate(0, 0) scale(1.2);
        opacity: 1;
    }

    70% {
        transform: translate(0, 0) scale(1);
    }
}


/* ═══════════════════════════════════════════
   ANIMATION: HEARTBEAT
   The Ainna square mark with a cardiac
   double-beat rhythm. Alive, not decorative.
   lub-dub ··· lub-dub ··· lub-dub
   ═══════════════════════════════════════════ */

.ainna-anim-heartbeat[b-yrvfvunuap] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heartbeat-mark[b-yrvfvunuap] {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ainna-heartbeat-b-yrvfvunuap 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #f00c71) 25%, transparent);
}

    .heartbeat-mark img[b-yrvfvunuap] {
        height: 40px;
        width: auto;
        object-fit: contain;
        /* No filter. Logo renders as designed. */
    }


    /* Pure CSS fallback — shows "AI" when no img child */
    .heartbeat-mark:empty[b-yrvfvunuap]::after {
        content: 'AI';
        color: white;
        font-family: var(--font, 'Inter', sans-serif);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.02em;
    }

@keyframes ainna-heartbeat-b-yrvfvunuap {
    /* Rest */
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #f00c71) 25%, transparent);
    }
    /* Lub — first beat */
    10% {
        transform: scale(1.15);
        box-shadow: 0 0 20px 4px color-mix(in srgb, var(--accent, #f00c71) 20%, transparent);
    }

    17% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #f00c71) 10%, transparent);
    }
    /* Dub — second beat, slightly softer */
    24% {
        transform: scale(1.08);
        box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent, #f00c71) 15%, transparent);
    }

    32% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
    /* Diastole — still, quiet */
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}


/* ═══════════════════════════════════════════
   SHARED KEYFRAMES
   ═══════════════════════════════════════════ */

@keyframes ainna-spin-b-yrvfvunuap {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ainna-pulse-b-yrvfvunuap {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }
}

@keyframes ainna-processingDot-b-yrvfvunuap {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    30% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}

@keyframes ainna-stackFloat-b-yrvfvunuap {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) translateY(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(3deg) translateY(-8px);
    }

    75% {
        transform: translate(-50%, -50%) rotate(-3deg) translateY(-8px);
    }
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 640px) {
    .ainna-logo img[b-yrvfvunuap] {
        height: 36px;
    }

    .ainna-anim-generation[b-yrvfvunuap] {
        width: 80px;
        height: 80px;
    }

        .ainna-anim-generation .center-icon[b-yrvfvunuap]::after {
            font-size: 12px;
        }

    .ainna-anim-orbit[b-yrvfvunuap] {
        width: 60px;
        height: 60px;
    }

    .orbit-dot[b-yrvfvunuap] {
        width: 8px;
        height: 8px;
        top: -4px;
        margin-left: -4px;
        transform-origin: 4px 34px;
    }

    .orbit-trace[b-yrvfvunuap] {
        width: 5px;
        height: 5px;
        top: -2.5px;
        margin-left: -2.5px;
        transform-origin: 2.5px 32.5px;
    }

    .ainna-anim-converge[b-yrvfvunuap] {
        width: 60px;
        height: 60px;
    }

    .ainna-anim-heartbeat[b-yrvfvunuap] {
        width: 60px;
        height: 60px;
    }

    .heartbeat-mark[b-yrvfvunuap] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

        .heartbeat-mark:empty[b-yrvfvunuap]::after {
            font-size: 14px;
        }

        .heartbeat-mark img[b-yrvfvunuap] {
            height: 22px;
        }

    .ainna-anim-progress[b-yrvfvunuap] {
        width: 250px;
    }

    .loading-message[b-yrvfvunuap] {
        font-size: var(--text-sm, 0.75rem);
    }
}


/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ainna-anim-generation .spinner-ring[b-yrvfvunuap],
    .ainna-anim-generation .center-icon[b-yrvfvunuap],
    .ainna-anim-processing .dot[b-yrvfvunuap],
    .ainna-anim-docstack .doc[b-yrvfvunuap],
    .orbit-dot[b-yrvfvunuap],
    .orbit-trace[b-yrvfvunuap],
    .ainna-anim-converge .converge-dot[b-yrvfvunuap],
    .heartbeat-mark[b-yrvfvunuap],
    .ainna-logo[b-yrvfvunuap],
    .loading-message[b-yrvfvunuap] {
        animation: none;
    }

    .loading-message[b-yrvfvunuap] {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .orbit-dot[b-yrvfvunuap] {
        top: -5px;
        left: 50%;
        transform: none;
    }

    .orbit-trace[b-yrvfvunuap] {
        display: none; /* static, it would just shadow the main dot */
    }

    .ainna-anim-converge .converge-dot[b-yrvfvunuap] {
        opacity: 1;
        transform: none;
    }

    .heartbeat-mark[b-yrvfvunuap] {
        box-shadow: none;
    }

    /* the ring slows rather than stops — a frozen ring reads as a hang.
       Mirrors the page veil's reduced-motion treatment exactly, which is
       why it is deliberately absent from the animation:none list above. */
    .ainna-anim-ring .ring-spin[b-yrvfvunuap] {
        animation-duration: 1.4s;
    }
}
/* /Components/AinnaPages/AinnaAboutPage.razor.rz.scp.css */
/* ============================================
   AINNA ABOUT — v3 visual language
   Matches landing page: warm beige palette,
   Space Grotesk headings, pink accent,
   editorial restraint, no purple.
   ============================================ */

/* ===== FOUNDATION ===== */

.ainna-about[b-ovfaay31ko] {
    --font-family-heading: 'Space Grotesk', var(--font-family-primary, 'Inter', system-ui, sans-serif);
    --color-bg-warm: #f3f0ec;
    background: var(--background-primary);
    min-height: 100vh;
    color: var(--text-primary);
    font-family: var(--font-family-primary);
    overflow-x: hidden;
}

    .ainna-about h1[b-ovfaay31ko],
    .ainna-about h2[b-ovfaay31ko],
    .ainna-about h3[b-ovfaay31ko],
    .ainna-about h4[b-ovfaay31ko] {
        font-family: var(--font-family-heading);
    }

/* ============================================ */
/* NAVBAR — Matching landing page               */
/* ============================================ */

.about-navbar[b-ovfaay31ko] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 32px;
    background: rgba(243, 240, 236, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.about-nav-container[b-ovfaay31ko] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 24px;
}

.about-nav-brand img[b-ovfaay31ko] {
    height: 24px;
    display: block;
}

.about-nav-links[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    gap: 28px;
}

    .about-nav-links a[b-ovfaay31ko] {
        font-size: 0.78rem;
        font-weight: var(--font-weight-medium);
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .about-nav-links a:hover[b-ovfaay31ko],
        .about-nav-links a.active[b-ovfaay31ko] {
            color: var(--text-heading);
        }

/* ── Nav actions: Sign In + Primary CTA + Mobile toggle ── */

.about-nav-actions[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-nav-cta-primary[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: var(--gradient-cta);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--accent-glow-sm);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
    white-space: nowrap;
}

    .about-nav-cta-primary:hover[b-ovfaay31ko] {
        box-shadow: var(--accent-glow);
        transform: translateY(-1px);
    }

/* ── Desktop/mobile breakpoints for navbar ── */

@media (max-width: 880px) {
    .about-nav-links[b-ovfaay31ko] {
        display: none;
    }
}

@media (max-width: 640px) {
    .about-navbar[b-ovfaay31ko] {
        padding: 0 20px;
    }

    /* The single CTA stays visible on mobile - nav collapses to brand + CTA,
       matching the enterprise nav. */
}


/* ============================================ */
/* HERO — Warm canvas + UX moments grid         */
/* ============================================ */

.hero-vision[b-ovfaay31ko] {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 140px 32px 96px;
    position: relative;
    background: var(--color-bg-warm);
    overflow: hidden;
}

    /* Atmospheric warmth — subtle radial glow */
    .hero-vision[b-ovfaay31ko]::before {
        content: '';
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 60%;
        background: radial-gradient(ellipse at 30% 50%, rgba(240, 12, 113, 0.05) 0%, transparent 60%), radial-gradient(ellipse at 75% 40%, rgba(255, 200, 140, 0.07) 0%, transparent 55%);
        pointer-events: none;
        z-index: 0;
    }

/* Hero elements render instantly at full opacity from SSR.
   No reveal animation — reliable, SEO-safe (no JS-dependent visibility),
   accessible when JS is disabled, and matches how every premium B2B hero loads. */

/* ── Copy container ── */

.hero-vision-container[b-ovfaay31ko] {
    max-width: 860px;
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 56px;
}

/* ── Eyebrow ── */

.hero-eyebrow[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

    .hero-eyebrow[b-ovfaay31ko]::before,
    .hero-eyebrow[b-ovfaay31ko]::after {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
    }

/* ── Hero headline ── */

.hero-vision-statement[b-ovfaay31ko] {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--text-heading);
}

    .hero-vision-statement span[b-ovfaay31ko],
    .hero-vision-statement strong[b-ovfaay31ko] {
        font-weight: 700;
        color: var(--accent);
    }

/* Hero lead + primary actions */
.hero-vision-lead[b-ovfaay31ko] {
    max-width: 620px;
    margin: 26px auto 0;
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .hero-vision-lead strong[b-ovfaay31ko] {
        color: var(--text-heading);
        font-weight: var(--font-weight-semibold);
    }

.hero-vision-actions[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.hero-vision-cta-primary[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    background: var(--gradient-cta);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--accent-glow-sm);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
    white-space: nowrap;
}

    .hero-vision-cta-primary:hover[b-ovfaay31ko] {
        box-shadow: var(--accent-glow);
        transform: translateY(-1px);
    }

.hero-vision-cta-secondary[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: transparent;
    color: var(--text-heading);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

    .hero-vision-cta-secondary:hover[b-ovfaay31ko] {
        border-color: var(--accent);
        color: var(--accent);
    }

/* Hero methodology chart — the published framework Ainna runs on */
.hero-methodology[b-ovfaay31ko] {
    width: 100%;
    max-width: 1100px;
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.hero-methodology-card[b-ovfaay31ko] {
    width: 100%;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

    .hero-methodology-card img[b-ovfaay31ko] {
        display: block;
        width: 100%;
        max-width: 720px;
        height: auto;
        margin: 0 auto;
    }

.hero-methodology-caption[b-ovfaay31ko] {
    max-width: 540px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    text-align: center;
}

    .hero-methodology-caption em[b-ovfaay31ko] {
        font-style: normal;
        color: var(--text-secondary);
        font-weight: var(--font-weight-medium);
    }

/* ── UX moments grid ── */

.hero-moments[b-ovfaay31ko] {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
    z-index: 2;
}

.hero-moment[b-ovfaay31ko] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-moment-frame[b-ovfaay31ko] {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Warm gallery mat — frames cropped highlight images elegantly */
    background: radial-gradient(ellipse at 25% 15%, rgba(240, 12, 113, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 85%, rgba(255, 200, 140, 0.06) 0%, transparent 55%), linear-gradient(180deg, #faf8f5 0%, #f0ebe4 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    padding: 16px;
    box-sizing: border-box;
}

.hero-moment:hover .hero-moment-frame[b-ovfaay31ko] {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.hero-moment-frame img[b-ovfaay31ko] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
    /* Image floats on the mat — reads as a curated artifact, not a raw crop */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hero-moment figcaption[b-ovfaay31ko] {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.hero-moment-label[b-ovfaay31ko] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.hero-moment-caption[b-ovfaay31ko] {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ── Scroll CTA ── */

.hero-scroll-cta[b-ovfaay31ko] {
    margin-top: 64px;
    position: relative;
    z-index: 2;
}

.scroll-link[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .scroll-link:hover[b-ovfaay31ko] {
        color: var(--accent);
    }

.scroll-icon[b-ovfaay31ko] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: scrollBounce-b-ovfaay31ko 2.4s ease-in-out infinite;
}

    .scroll-icon i[b-ovfaay31ko] {
        font-size: 0.55rem;
    }

@keyframes scrollBounce-b-ovfaay31ko {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* ── Hero responsive ── */

@media (max-width: 960px) {
    .hero-vision[b-ovfaay31ko] {
        padding: 120px 24px 72px;
    }

    .hero-vision-container[b-ovfaay31ko] {
        margin-bottom: 44px;
    }

    .hero-moments[b-ovfaay31ko] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .hero-scroll-cta[b-ovfaay31ko] {
        margin-top: 48px;
    }
}

@media (max-width: 560px) {
    .hero-vision[b-ovfaay31ko] {
        padding: 110px 20px 64px;
    }

    .hero-moments[b-ovfaay31ko] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hero-moment-frame[b-ovfaay31ko] {
        aspect-ratio: 16 / 10;
        padding: 12px;
    }
}


/* ============================================ */
/* SECTIONS — Shared patterns                   */
/* ============================================ */

.about-section[b-ovfaay31ko] {
    padding: 96px 32px;
    background: var(--background-primary);
}

    .about-section + .about-section[b-ovfaay31ko] {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

.section-container[b-ovfaay31ko] {
    max-width: 1100px;
    margin: 0 auto;
}

.section-container-narrow[b-ovfaay31ko] {
    max-width: 960px;
    margin: 0 auto;
}

.section-label[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

    .section-label[b-ovfaay31ko]::before {
        content: '';
        width: 20px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
    }

    .section-label[b-ovfaay31ko]::after {
        content: '';
        width: 20px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
    }

.section-heading[b-ovfaay31ko] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-heading);
    letter-spacing: -0.04em;
    margin-bottom: 20px;
    text-align: center;
}

.section-content[b-ovfaay31ko] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-subheading[b-ovfaay31ko] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ── Section variants — strict alternation ── */
/* Flow: Hero(dark) → Company(white) → Product(warm) → Teams(white) → Enterprise(warm) → Advisory(white) → Leadership(warm) → Contact(white) */

.section-variant-1[b-ovfaay31ko] {
    background: var(--color-bg-warm);
}

.section-variant-2[b-ovfaay31ko] {
    background: var(--background-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.section-variant-3[b-ovfaay31ko] {
    background: var(--color-bg-warm);
}

.section-variant-4[b-ovfaay31ko] {
    background: var(--color-bg-warm);
}

.section-variant-5[b-ovfaay31ko] {
    background: var(--background-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.section-variant-6[b-ovfaay31ko] {
    background: var(--background-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.section-variant-leadership[b-ovfaay31ko] {
    background: var(--color-bg-warm);
}


/* ============================================ */
/* COMPANY — Vision / Mission grid              */
/* ============================================ */

.company-intro[b-ovfaay31ko] {
    margin-top: 8px;
    margin-bottom: 48px;
}

.company-grid[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Three shared row tracks: label, highlight, text-group.
       Both cards subgrid into these so the text-group starts at the same y. */
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    row-gap: 0;
    align-items: stretch;
}

.company-block[b-ovfaay31ko] {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    padding: 48px 44px 44px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.block-icon[b-ovfaay31ko] {
    display: none;
}

    .block-icon i[b-ovfaay31ko] {
        display: none;
    }

.block-title[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 22px 0;
}

    /* Editorial pink rule decorating the label — matches .section-label pattern */
    .block-title[b-ovfaay31ko]::before {
        content: '';
        width: 22px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
        flex-shrink: 0;
    }

.block-highlight[b-ovfaay31ko] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.5rem, 2.8vw, 1.9rem);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: -0.035em;
    color: var(--text-heading);
    margin: 0;
}

/* Subgrid puts this into row 3 — starts at the tallest-highlight row boundary,
   identical y-position across Vision and Mission regardless of paragraph length. */
.block-text-group[b-ovfaay31ko] {
    padding-top: 28px;
}

.block-text[b-ovfaay31ko] {
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

    .block-text + .block-text[b-ovfaay31ko] {
        margin-top: 12px;
    }


/* ============================================ */
/* PRODUCT — Feature cards                      */
/* ============================================ */

.product-hero[b-ovfaay31ko] {
    text-align: center;
    margin-bottom: 48px;
}

.product-title[b-ovfaay31ko] {
    margin-bottom: 16px;
}

.product-description[b-ovfaay31ko] {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

.product-features[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card[b-ovfaay31ko] {
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .feature-card:hover[b-ovfaay31ko] {
        transform: translateY(-3px);
        border-color: rgba(244, 8, 155, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }

/* On warm sections cards are already white → visible. On white sections the border defines them. */

.feature-icon[b-ovfaay31ko] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    border: none;
    margin-bottom: 0;
    pointer-events: none;
}

    .feature-icon i[b-ovfaay31ko] {
        font-size: 3rem;
        color: var(--accent);
        opacity: 0.06;
    }

.feature-title[b-ovfaay31ko] {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.feature-text[b-ovfaay31ko] {
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .feature-text strong[b-ovfaay31ko] {
        color: var(--text-heading);
        font-weight: var(--font-weight-semibold);
    }

/* ── Product links — persona + resource ── */



/* ============================================ */
/* CTA STRIP — Between product sections         */
/* ============================================ */

.about-cta-strip[b-ovfaay31ko] {
    padding: 0 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.about-cta-card[b-ovfaay31ko] {
    max-width: 740px;
    margin: 0 auto 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    border-radius: 14px;
    background: var(--color-bg-warm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.about-cta-text[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .about-cta-text strong[b-ovfaay31ko] {
        font-size: 0.92rem;
        font-family: var(--font-family-heading);
        color: var(--text-heading);
        font-weight: var(--font-weight-medium);
    }

    .about-cta-text span[b-ovfaay31ko] {
        font-size: var(--text-sm);
        color: var(--text-secondary);
    }

.about-cta-button[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

    .about-cta-button:hover[b-ovfaay31ko] {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    .about-cta-button i[b-ovfaay31ko] {
        font-size: 0.6rem;
        transition: transform 0.2s ease;
    }

    .about-cta-button:hover i[b-ovfaay31ko] {
        transform: translateX(3px);
    }


/* ============================================ */
/* ADVISORY — Programs                          */
/* ============================================ */

.advisory-intro[b-ovfaay31ko] {
    margin-bottom: 48px;
    text-align: center;
}

.advisory-expertise[b-ovfaay31ko] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
}

.expertise-tag[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    background: var(--background-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.advisory-programs[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.program-card[b-ovfaay31ko] {
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .program-card:hover[b-ovfaay31ko] {
        border-color: rgba(244, 8, 155, 0.15);
        box-shadow: 0 4px 24px rgba(244, 8, 155, 0.05);
    }

.program-watermark[b-ovfaay31ko] {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 1;
    pointer-events: none;
}

    .program-watermark i[b-ovfaay31ko] {
        font-size: 100px;
        color: var(--accent);
        opacity: 0.06;
    }

.program-header[b-ovfaay31ko] {
    margin-bottom: 16px;
}

.program-label[b-ovfaay31ko] {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.program-title[b-ovfaay31ko] {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.program-tagline[b-ovfaay31ko] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}

.program-description[b-ovfaay31ko] {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.program-deliverables[b-ovfaay31ko] {
    flex: 1;
    margin-bottom: 20px;
}

.deliverables-label[b-ovfaay31ko] {
    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: 10px;
}

.deliverables-list[b-ovfaay31ko] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    .deliverables-list li[b-ovfaay31ko] {
        font-size: 0.78rem;
        color: var(--text-secondary);
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

        .deliverables-list li i[b-ovfaay31ko] {
            color: var(--accent);
            font-size: 0.6rem;
            margin-top: 4px;
            flex-shrink: 0;
        }

.program-footer[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.program-tags[b-ovfaay31ko] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.program-tag[b-ovfaay31ko] {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    background: var(--backdrop);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.program-link[b-ovfaay31ko] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

    .program-link:hover[b-ovfaay31ko] {
        opacity: 0.7;
    }

    .program-link i[b-ovfaay31ko] {
        font-size: 0.6rem;
        margin-left: 4px;
    }

/* ── Advisory CTA panel ── */

.advisory-cta-panel[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 36px;
    border-radius: var(--radius-lg);
    background: rgba(244, 8, 155, 0.04);
    border: 1px solid rgba(244, 8, 155, 0.1);
}

.cta-panel-icon[b-ovfaay31ko] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(244, 8, 155, 0.08);
    flex-shrink: 0;
}

    .cta-panel-icon i[b-ovfaay31ko] {
        font-size: 1.1rem;
        color: var(--accent);
    }

.cta-panel-content[b-ovfaay31ko] {
    flex: 1;
}

.cta-panel-title[b-ovfaay31ko] {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 4px;
}

.cta-panel-description[b-ovfaay31ko] {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.cta-panel-subtext[b-ovfaay31ko] {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.cta-panel-action[b-ovfaay31ko] {
    flex-shrink: 0;
}

.cta-panel-button[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--gradient-cta);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--accent-glow-sm);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
}


/* ============================================ */
/* LEADERSHIP — Editorial two-column            */
/* ============================================ */

.leadership-heading[b-ovfaay31ko] {
    margin-bottom: 4px;
}

.leadership-role[b-ovfaay31ko] {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
    text-align: center;
}

.leadership-editorial[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.leadership-paragraph[b-ovfaay31ko] {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

    .leadership-paragraph strong[b-ovfaay31ko] {
        color: var(--text-heading);
        font-weight: var(--font-weight-semibold);
    }

    .leadership-paragraph a[b-ovfaay31ko] {
        color: var(--accent);
        text-decoration: none;
        border-bottom: 1px solid var(--accent-border);
        transition: border-color 0.2s ease;
    }

        .leadership-paragraph a:hover[b-ovfaay31ko] {
            border-color: var(--accent);
        }

.leadership-quote[b-ovfaay31ko] {
    padding: 24px 28px;
    margin: 24px 0;
    border-left: 3px solid var(--accent);
    background: rgba(240, 12, 113, 0.03);
    border-radius: 0 12px 12px 0;
}

    .leadership-quote p[b-ovfaay31ko] {
        font-size: 0.88rem;
        line-height: 1.7;
        color: var(--text-heading);
        font-style: italic;
        margin: 0;
    }

    .leadership-quote strong[b-ovfaay31ko] {
        font-style: normal;
        color: var(--accent);
    }

.leadership-links[b-ovfaay31ko] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 32px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.leadership-link[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: color 0.2s ease, border-color 0.2s ease;
}

    .leadership-link:hover[b-ovfaay31ko] {
        color: var(--accent);
        border-color: var(--accent-border);
    }

    .leadership-link i[b-ovfaay31ko] {
        font-size: 0.7rem;
        color: var(--accent);
        width: 16px;
        text-align: center;
    }

/* ── Founder credential bar ── */

.leadership-credential-bar[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px 28px;
    margin-bottom: 40px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.credential-stat[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

    .credential-stat:last-child[b-ovfaay31ko] {
        border-right: none;
    }

.credential-stat-value[b-ovfaay31ko] {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--accent);
}

.credential-stat-label[b-ovfaay31ko] {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
}


/* ============================================ */
/* TEAM — Integrated section                    */
/* ============================================ */

.team-section-integrated[b-ovfaay31ko] {
    padding-top: 48px;
}

.team-divider[b-ovfaay31ko] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.divider-line[b-ovfaay31ko] {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.team-divider-title[b-ovfaay31ko] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.team-intro[b-ovfaay31ko] {
    max-width: 720px;
    margin-bottom: 32px;
}

.team-grid[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.team-card[b-ovfaay31ko] {
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .team-card:hover[b-ovfaay31ko] {
        transform: translateY(-2px);
    }

.team-card-icon[b-ovfaay31ko] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    border: none;
    margin-bottom: 0;
    pointer-events: none;
}

    .team-card-icon i[b-ovfaay31ko] {
        font-size: 2.4rem;
        color: var(--accent);
        opacity: 0.06;
    }

.team-card-title[b-ovfaay31ko] {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 6px;
}

.team-card-text[b-ovfaay31ko] {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

    .team-card-text strong[b-ovfaay31ko] {
        color: var(--text-heading);
        font-weight: var(--font-weight-semibold);
    }

/* ── Team CTA ── */

.team-cta[b-ovfaay31ko] {
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    background: rgba(244, 8, 155, 0.04);
    border: 1px solid rgba(244, 8, 155, 0.1);
    text-align: center;
}

.team-cta-title[b-ovfaay31ko] {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.team-cta-text[b-ovfaay31ko] {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 24px;
}

    .team-cta-text strong[b-ovfaay31ko] {
        color: var(--text-heading);
    }

.team-cta-button[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--gradient-cta);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--accent-glow-sm);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
}

    .team-cta-button:hover[b-ovfaay31ko] {
        box-shadow: var(--accent-glow);
        transform: translateY(-2px);
    }


/* ============================================ */
/* CONTACT                                      */
/* ============================================ */

.contact-grid[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    margin-top: 36px;
}

.contact-info[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-block[b-ovfaay31ko] {
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
}

.contact-block-title[b-ovfaay31ko] {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .contact-block-title i[b-ovfaay31ko] {
        color: var(--accent);
        font-size: 0.8rem;
    }

.contact-detail[b-ovfaay31ko] {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

    /* ::deep pierces CSS isolation — applies to MarkupString-injected anchors too */
    .contact-detail[b-ovfaay31ko]  a,
    .contact-detail[b-ovfaay31ko]  a.contact-link {
        color: var(--text-secondary);
        text-decoration: underline;
        text-decoration-color: rgba(0, 0, 0, 0.18);
        text-underline-offset: 3px;
        transition: color 0.2s ease, text-decoration-color 0.2s ease;
    }

        .contact-detail[b-ovfaay31ko]  a:hover,
        .contact-detail[b-ovfaay31ko]  a.contact-link:hover {
            color: var(--accent);
            text-decoration-color: var(--accent);
        }

/* ── Contact form ── */

.contact-form-area[b-ovfaay31ko] {
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
}

.form-title[b-ovfaay31ko] {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.contact-form-fields[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-ovfaay31ko] {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.form-input[b-ovfaay31ko],
.form-textarea[b-ovfaay31ko] {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--background-primary);
    font-size: 0.85rem;
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-input:focus[b-ovfaay31ko],
    .form-textarea:focus[b-ovfaay31ko] {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240, 12, 113, 0.08);
    }

.form-textarea[b-ovfaay31ko] {
    resize: vertical;
    min-height: 120px;
}

/* Custom-styled select — replaces native dropdown arrow with an inline chevron */
.form-select[b-ovfaay31ko] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a6e64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

    .form-select:focus[b-ovfaay31ko] {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23f00c71' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

.form-error[b-ovfaay31ko] {
    font-size: 0.72rem;
    color: var(--danger);
    margin-top: 2px;
}

.field-error[b-ovfaay31ko] {
    font-size: 0.72rem;
    color: var(--danger);
    margin-top: 2px;
}

.form-error-message[b-ovfaay31ko] {
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    font-size: 0.82rem;
}

.submit-spinner[b-ovfaay31ko] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: formSpin-b-ovfaay31ko 0.6s linear infinite;
}

.form-submit[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--gradient-cta);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    cursor: pointer;
    box-shadow: var(--accent-glow-sm);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
    text-align: center;
    width: auto;
    align-self: flex-start;
    margin-top: 4px;
}

    .form-submit:hover:not(:disabled)[b-ovfaay31ko] {
        box-shadow: var(--accent-glow);
        transform: translateY(-2px);
    }

    .form-submit:disabled[b-ovfaay31ko] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .form-submit i[b-ovfaay31ko] {
        font-size: 0.6rem;
    }

.form-spinner[b-ovfaay31ko] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: formSpin-b-ovfaay31ko 0.6s linear infinite;
}

@keyframes formSpin-b-ovfaay31ko {
    to {
        transform: rotate(360deg);
    }
}

.form-error-banner[b-ovfaay31ko] {
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    font-size: 0.82rem;
}

/* ── Form success ── */

.form-success[b-ovfaay31ko] {
    text-align: center;
    padding: 48px 32px;
}

.form-success-icon[b-ovfaay31ko] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--success-surface);
    margin: 0 auto 16px;
}

    .form-success-icon i[b-ovfaay31ko] {
        font-size: 1.5rem;
        color: var(--success);
    }

.form-success-title[b-ovfaay31ko] {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 8px;
}

.form-success-text[b-ovfaay31ko] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.form-reset-btn[b-ovfaay31ko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .form-reset-btn:hover[b-ovfaay31ko] {
        border-color: var(--accent-border);
        color: var(--accent);
    }


/* ============================================ */
/* ============================================ */
/* FOOTER — Matching landing page               */
/* ============================================ */

.about-footer[b-ovfaay31ko] {
    padding: 96px 0 32px;
    background: linear-gradient(180deg, #1e1a1c 0%, #17141a 100%);
    color: rgba(255, 255, 255, 0.55);
    position: relative;
}

    .about-footer[b-ovfaay31ko]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, rgba(244, 8, 155, 0.06) 15%, rgba(244, 8, 155, 0.2) 40%, rgba(244, 8, 155, 0.3) 50%, rgba(244, 8, 155, 0.2) 60%, rgba(244, 8, 155, 0.06) 85%, transparent 100% );
    }

    .about-footer[b-ovfaay31ko]::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 20%;
        right: 20%;
        height: 80px;
        background: radial-gradient( ellipse 70% 100% at 50% 0%, rgba(244, 8, 155, 0.04) 0%, transparent 70% );
        pointer-events: none;
    }

.footer-container[b-ovfaay31ko] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ── Editorial section ── */

.footer-editorial[b-ovfaay31ko] {
    margin-bottom: 0;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.footer-editorial-lead[b-ovfaay31ko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 0 48px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

    .footer-editorial-lead .footer-logo[b-ovfaay31ko] {
        height: 36px;
        margin-bottom: 10px;
    }

.footer-brand-tagline[b-ovfaay31ko] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 6px;
}

.footer-brand-promise[b-ovfaay31ko] {
    font-family: 'Space Grotesk', var(--font-family-primary);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.22);
    margin: 0;
}

.footer-statement-provocation em[b-ovfaay31ko] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.95);
}

/* ── Editorial statement ── */

.footer-statement[b-ovfaay31ko] {
    text-align: center;
    padding: 56px 0 0;
    margin-bottom: 0;
}

.footer-statement-provocation[b-ovfaay31ko] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 auto 28px;
    max-width: 640px;
}

.footer-statement-answer[b-ovfaay31ko] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.40);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 auto 32px;
}

.footer-statement-rule[b-ovfaay31ko] {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 8, 155, 0.30), transparent);
    margin: 0 auto;
    border-radius: 1px;
}

/* ── Editorial grid — 3 blocks ── */

.footer-editorial-grid[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-editorial-block h5[b-ovfaay31ko] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 14px;
}

.footer-editorial-block p[b-ovfaay31ko] {
    font-size: 0.82rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}

.footer-editorial-block a[b-ovfaay31ko] {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.2s ease, border-color 0.2s ease;
}

    .footer-editorial-block a:hover[b-ovfaay31ko] {
        color: var(--accent);
        border-color: rgba(244, 8, 155, 0.3);
    }

.footer-careers-link[b-ovfaay31ko] {
    color: rgba(255, 255, 255, 0.55);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.2s ease;
}

    .footer-careers-link:hover[b-ovfaay31ko] {
        border-color: rgba(255, 255, 255, 0.4);
    }

/* ── Footer link grid ── */

.footer-grid[b-ovfaay31ko] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 0;
    align-items: start;
    position: relative;
    z-index: 1;
}

.footer-col-title[b-ovfaay31ko] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

.footer-col-links[b-ovfaay31ko] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .footer-col-links li[b-ovfaay31ko] {
        margin-bottom: 8px;
    }

        .footer-col-links li a[b-ovfaay31ko] {
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.42);
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .footer-col-links li a:hover[b-ovfaay31ko] {
                color: var(--accent);
            }

/* ── Bottom bar ── */

.footer-bottom[b-ovfaay31ko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

    .footer-bottom p[b-ovfaay31ko] {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.25);
        margin: 0;
    }

.footer-registered[b-ovfaay31ko] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
}


/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */

@media (max-width: 1024px) {
    .product-features[b-ovfaay31ko] {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid[b-ovfaay31ko] {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-editorial-grid[b-ovfaay31ko] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .advisory-programs[b-ovfaay31ko] {
        grid-template-columns: 1fr;
    }

    .advisory-cta-panel[b-ovfaay31ko] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .about-section[b-ovfaay31ko] {
        padding: 64px 20px;
    }

    .company-grid[b-ovfaay31ko] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .company-block[b-ovfaay31ko] {
        display: flex;
        flex-direction: column;
        padding: 36px 28px 32px;
    }

    .block-text-group[b-ovfaay31ko] {
        padding-top: 24px;
    }

    .company-intro[b-ovfaay31ko] {
        margin-bottom: 36px;
    }

    .product-features[b-ovfaay31ko] {
        grid-template-columns: 1fr;
    }

    .leadership-editorial[b-ovfaay31ko] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .leadership-credential-bar[b-ovfaay31ko] {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 20px;
        gap: 14px;
    }

    .credential-stat[b-ovfaay31ko] {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding-bottom: 12px;
    }

        .credential-stat:nth-last-child(-n+2)[b-ovfaay31ko] {
            border-bottom: none;
            padding-bottom: 4px;
        }

    .contact-grid[b-ovfaay31ko] {
        grid-template-columns: 1fr;
    }

    .about-cta-strip[b-ovfaay31ko] {
        padding: 0 20px;
        margin-top: -32px;
    }

    .about-cta-card[b-ovfaay31ko] {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .team-grid[b-ovfaay31ko] {
        grid-template-columns: 1fr;
    }

    .footer-grid[b-ovfaay31ko] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom[b-ovfaay31ko] {
        flex-direction: column;
        text-align: center;
    }

    .about-footer[b-ovfaay31ko] {
        padding: 64px 0 24px;
    }

    .footer-container[b-ovfaay31ko] {
        padding: 0 20px;
    }

    .team-cta[b-ovfaay31ko] {
        padding: 36px 24px;
    }

    .story-highlight[b-ovfaay31ko] {
        padding: 24px 20px;
        margin: 24px 0;
    }

    .deliverables-list[b-ovfaay31ko] {
        grid-template-columns: 1fr;
    }

    .program-footer[b-ovfaay31ko] {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-nav-about[b-ovfaay31ko] {
        flex-direction: column;
        gap: 16px;
    }

    .hero-scroll-cta[b-ovfaay31ko] {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-vision-statement[b-ovfaay31ko] {
        font-size: 1.8rem;
    }

    .hero-eyebrow[b-ovfaay31ko] {
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }

    .founder-photo[b-ovfaay31ko] {
        max-width: 160px;
    }

    .founder-name[b-ovfaay31ko] {
        font-size: 1rem;
    }
}

@media (max-height: 600px) {
    .hero-vision[b-ovfaay31ko] {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}


/* ============================================ */
/* REDUCED MOTION                               */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {
    .hero-moment:hover .hero-moment-frame[b-ovfaay31ko] {
        transform: none;
    }

    .scroll-icon[b-ovfaay31ko] {
        animation: none;
    }

    *[b-ovfaay31ko],
    *[b-ovfaay31ko]::before,
    *[b-ovfaay31ko]::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   V2 VISUAL LAYER - Porcelain & Petrol, ported from /enterprise.
   Same system: neutral papers so the magenta signal stays rare;
   confident headings; verdict lines as the signature element;
   border-forward cards; instrument-grade focus. Appended overrides -
   same class names, later order wins.
   ════════════════════════════════════════════════════════════════ */

.ainna-about[b-ovfaay31ko] {
    --color-bg-warm: #f0f3f1; /* mist - papers carry no brand hue */
    --about-ink: #1a2422;
    --about-ink-soft: #4d5a56;
    --about-signal: #f4089b;
}

    /* Type: confidence over airiness */
    .ainna-about .section-heading[b-ovfaay31ko] {
        font-weight: 560;
        letter-spacing: -0.03em;
    }

    .ainna-about .hero-vision-statement[b-ovfaay31ko] {
        font-weight: 600;
        letter-spacing: -0.035em;
    }

    /* Chapter marks: quiet ink structure, signal stays rare */
    .ainna-about .section-label[b-ovfaay31ko] {
        color: var(--about-ink-soft);
        letter-spacing: 0.15em;
    }

        .ainna-about .section-label[b-ovfaay31ko]::before,
        .ainna-about .section-label[b-ovfaay31ko]::after,
        .ainna-about .hero-eyebrow[b-ovfaay31ko]::before,
        .ainna-about .hero-eyebrow[b-ovfaay31ko]::after {
            background: rgba(26, 36, 34, 0.5);
        }

    /* THE signature: highlight lines become verdicts */
    .ainna-about .block-highlight[b-ovfaay31ko] {
        font-weight: 640;
        letter-spacing: -0.02em;
        color: var(--about-ink);
    }

    .ainna-about .footer-statement-provocation[b-ovfaay31ko] {
        font-weight: 640;
        letter-spacing: -0.02em;
    }

    /* Cards: border-forward, hover-earned elevation */
    .ainna-about .feature-card[b-ovfaay31ko],
    .ainna-about .program-card[b-ovfaay31ko] {
        box-shadow: none;
        border: 1px solid rgba(26, 36, 34, 0.11);
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

        .ainna-about .feature-card:hover[b-ovfaay31ko],
        .ainna-about .program-card:hover[b-ovfaay31ko] {
            border-color: rgba(244, 8, 155, 0.38);
            transform: translateY(-2px);
            box-shadow: 0 14px 34px rgba(26, 36, 34, 0.08);
        }

    /* Leadership carries ONE signal: the founder's quote rule. Stats set in ink —
       big archival numerals, quiet labels — so the section reads as record, not neon. */
    .ainna-about .credential-stat-value[b-ovfaay31ko] {
        color: var(--about-ink);
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .ainna-about .credential-stat-label[b-ovfaay31ko] {
        color: var(--about-ink-soft);
    }

    .ainna-about .leadership-link i[b-ovfaay31ko] {
        color: var(--about-ink-soft);
    }

    .ainna-about .leadership-link:hover i[b-ovfaay31ko] {
        color: var(--about-signal);
    }

    /* Editorial quote: verdict rule instead of decorative border */
    .ainna-about .leadership-quote[b-ovfaay31ko] {
        border-left: 3px solid var(--about-signal);
    }

    /* Focus visibility, instrument-grade */
    .ainna-about a:focus-visible[b-ovfaay31ko],
    .ainna-about button:focus-visible[b-ovfaay31ko],
    .ainna-about input:focus-visible[b-ovfaay31ko],
    .ainna-about select:focus-visible[b-ovfaay31ko],
    .ainna-about textarea:focus-visible[b-ovfaay31ko] {
        outline: 3px solid rgba(244, 8, 155, 0.65);
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .ainna-about .feature-card[b-ovfaay31ko],
    .ainna-about .program-card[b-ovfaay31ko] {
        transition: none;
    }

        .ainna-about .feature-card:hover[b-ovfaay31ko],
        .ainna-about .program-card:hover[b-ovfaay31ko] {
            transform: none;
        }
}

/* ── Contact form: instrument-grade refinement + busy state ──
   The form is the page's one transaction - it earns card treatment,
   disciplined fields, and an honest busy indicator for the static-SSR
   submit (class applied by the delegated script; Enhance re-render
   clears it by replacement). */

.ainna-about .contact-form-area[b-ovfaay31ko] {
    background: #fff;
    border: 1px solid rgba(26, 36, 34, 0.11);
    border-radius: 14px;
    padding: 2rem 2.1rem;
    box-shadow: none;
}

.ainna-about .form-title[b-ovfaay31ko] {
    font-weight: 640;
    letter-spacing: -0.015em;
    color: var(--about-ink);
    margin-bottom: 1.2rem;
}

.ainna-about .form-label[b-ovfaay31ko] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--about-ink-soft);
}

.ainna-about .form-submit[b-ovfaay31ko] {
    position: relative;
    transition: opacity 0.18s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* Busy: lock the button, swap the plane for a spinner */
.ainna-about .contact-form-fields.is-submitting .form-submit[b-ovfaay31ko] {
    opacity: 0.8;
    pointer-events: none;
}

    .ainna-about .contact-form-fields.is-submitting .form-submit i[b-ovfaay31ko] {
        display: none;
    }

    .ainna-about .contact-form-fields.is-submitting .form-submit[b-ovfaay31ko]::after {
        content: "";
        width: 15px;
        height: 15px;
        border: 2px solid rgba(255, 255, 255, 0.45);
        border-top-color: #fff;
        border-radius: 50%;
        animation: about-btn-spin-b-ovfaay31ko 0.7s linear infinite;
    }

@keyframes about-btn-spin-b-ovfaay31ko {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ainna-about .contact-form-fields.is-submitting .form-submit[b-ovfaay31ko]::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.45);
    }
}

/* ── Form refinement pass 2: the select leaves 1992; errors get air; the
   submit earns its width ── */

.ainna-about .field-error[b-ovfaay31ko] {
    display: block;
    margin: 0.4rem 0 0.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #c81e3e;
}

.ainna-about .form-group + .form-group[b-ovfaay31ko] {
    margin-top: 1.05rem;
}

.ainna-about .form-submit[b-ovfaay31ko] {
    width: 100%;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.3rem;
}

/* ── FORM PASS 3: the ::deep fix ──
   The contact fields are Blazor Input* components; they render native
   elements WITHOUT the CSS-isolation attribute, so scoped rules that end
   on .form-input/.form-select/.form-textarea never matched (the enterprise
   page knew this - its form rules all use ::deep; the port here didn't).
   These rules are self-sufficient: full base styling, not just accents,
   so nothing depends on the older scope-blind blocks. */

.ainna-about[b-ovfaay31ko]  .form-input,
.ainna-about[b-ovfaay31ko]  .form-select,
.ainna-about[b-ovfaay31ko]  .form-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--about-ink);
    background: #fbfbf9;
    border: 1px solid rgba(26, 36, 34, 0.16);
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .ainna-about[b-ovfaay31ko]  .form-input::placeholder,
    .ainna-about[b-ovfaay31ko]  .form-textarea::placeholder {
        color: rgba(77, 90, 86, 0.65);
    }

    .ainna-about[b-ovfaay31ko]  .form-input:focus,
    .ainna-about[b-ovfaay31ko]  .form-select:focus,
    .ainna-about[b-ovfaay31ko]  .form-textarea:focus {
        background-color: #fff; /* longhand on purpose: the shorthand resets
                               background-repeat/position and made the select's
                               focus chevron tile across the control */
        border-color: rgba(244, 8, 155, 0.55);
        box-shadow: 0 0 0 3px rgba(244, 8, 155, 0.12);
        outline: none;
    }

.ainna-about[b-ovfaay31ko]  .form-textarea {
    min-height: 128px;
    max-height: 420px; /* resizable, but bounded - no infinite pull */
    resize: vertical;
}

    .ainna-about[b-ovfaay31ko]  .form-input.input-error,
    .ainna-about[b-ovfaay31ko]  .form-textarea.input-error {
        border-color: rgba(220, 38, 38, 0.6);
    }

/* The select, properly: no native chrome, our chevron, our focus */
.ainna-about[b-ovfaay31ko]  .form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234d5a56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

    .ainna-about[b-ovfaay31ko]  .form-select:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f4089b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat; /* belt: never trust the cascade */
        background-position: right 1rem center;
    }

/* Busy: fields dim but stay EDITABLE - only the button locks. If cleanup
   ever regresses, the user can still fix inputs and resubmit. */
.ainna-about[b-ovfaay31ko]  .contact-form-fields.is-submitting .form-input,
.ainna-about[b-ovfaay31ko]  .contact-form-fields.is-submitting .form-select,
.ainna-about[b-ovfaay31ko]  .contact-form-fields.is-submitting .form-textarea {
    opacity: 0.65;
}

/* Honeypot: off-canvas, not display:none (some bots skip hidden fields) */
.ainna-about .hp-field[b-ovfaay31ko] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* /Components/AinnaPages/AinnaFAQSEOpage.razor.rz.scp.css */
/* ============================================
   AINNA FAQ PAGE — v4 Design Token Alignment
   Uses global design tokens from the theme system.
   No local variable overrides — inherits the
   landing page visual language directly.
   ============================================ */

/* Smooth scrolling for TOC anchor navigation */
.faq-page[b-8fhplmm56k] {
    scroll-behavior: smooth;
}

.faq-page[b-8fhplmm56k] {
    /* Page-specific tokens — inheriting landing page palette */
    --hero-bg: #f3f0ec;
    --sidebar-bg: #faf9f7;
    --color-bg-warm: #f3f0ec;
    --color-bg-cool: #f5f3f8;
    --border-light: var(--border-lt);
    --transition-fast: 0.15s ease;
    --transition-slow: 0.3s ease;
    --font-family-heading: 'Space Grotesk', var(--font-family-primary, 'Inter', system-ui, sans-serif);
    font-family: var(--font);
    color: var(--ink-2);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Heading font — matches landing page */
    .faq-page h1[b-8fhplmm56k],
    .faq-page h2[b-8fhplmm56k],
    .faq-page h3[b-8fhplmm56k] {
        font-family: var(--font-family-heading);
    }

    /* ============================================
   CONTAINER & LAYOUT
   ============================================ */

    .faq-page .container[b-8fhplmm56k] {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 32px;
    }

@media (max-width: 768px) {
    .faq-page .container[b-8fhplmm56k] {
        padding: 0 20px;
    }
}

/* ============================================
   BUTTONS
   ============================================ */

.faq-page .btn[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    letter-spacing: -0.01em;
}

.faq-page .btn-primary[b-8fhplmm56k] {
    background: var(--gradient-cta);
    color: white;
    box-shadow: var(--accent-glow-sm);
}

    .faq-page .btn-primary:hover[b-8fhplmm56k] {
        background: var(--gradient-cta);
        filter: brightness(1.1);
        transform: translateY(-2px);
        box-shadow: var(--accent-glow-hover);
    }

.faq-page .btn-secondary[b-8fhplmm56k] {
    background: var(--background-secondary);
    color: var(--text-heading);
    border: 1px solid var(--border-color);
}

    .faq-page .btn-secondary:hover[b-8fhplmm56k] {
        background: var(--border-light);
        transform: translateY(-1px);
    }

.faq-page .btn-sm[b-8fhplmm56k] {
    padding: 12px 20px;
    font-size: 13px;
}

/* ============================================
   UTILITIES
   ============================================ */

.faq-page .sr-only[b-8fhplmm56k] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   HERO SECTION
   ============================================ */

.faq-page .faq-hero[b-8fhplmm56k] {
    padding: 72px 32px 88px;
    background: var(--hero-bg);
}

.faq-page .hero-logo img[b-8fhplmm56k] {
    display: inline-block;
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 28px;
}

.faq-page .hero-container[b-8fhplmm56k] {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.faq-page .hero-breadcrumb[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    margin-bottom: 36px;
}

    .faq-page .hero-breadcrumb a[b-8fhplmm56k] {
        color: var(--text-tertiary);
        text-decoration: none;
        transition: color var(--transition-base);
        font-weight: 500;
    }

        .faq-page .hero-breadcrumb a:hover[b-8fhplmm56k] {
            color: var(--accent);
        }

    .faq-page .hero-breadcrumb i[b-8fhplmm56k] {
        color: var(--border-strong);
        font-size: 9px;
    }

    .faq-page .hero-breadcrumb span[b-8fhplmm56k] {
        color: var(--text-secondary);
        font-weight: 500;
    }

.faq-page .hero-title[b-8fhplmm56k] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-heading);
    margin: 0 0 24px;
    letter-spacing: -0.04em;
}

.faq-page .hero-subtitle[b-8fhplmm56k] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 32px auto 36px;
    max-width: 680px;
    font-weight: 400;
}

.faq-page .hero-meta[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.faq-page .meta-item[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
}

    .faq-page .meta-item i[b-8fhplmm56k] {
        color: var(--accent);
        font-size: 14px;
        opacity: 0.6;
    }

/* ── Article Cover Image — Hero ── */

.faq-page .hero-cover-image[b-8fhplmm56k] {
    margin-top: 40px;
    margin-bottom: 8px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .faq-page .hero-cover-image img[b-8fhplmm56k] {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

@media (max-width: 768px) {
    .faq-page .hero-cover-image[b-8fhplmm56k] {
        margin-top: 28px;
        margin-bottom: 4px;
        border-radius: var(--radius-md);
    }
}

@media (max-width: 768px) {
    .faq-page .faq-hero[b-8fhplmm56k] {
        padding: 48px 20px 60px;
    }

    .faq-page .hero-title[b-8fhplmm56k] {
        font-size: 2rem;
        letter-spacing: -0.03em;
    }

    .faq-page .hero-subtitle[b-8fhplmm56k] {
        font-size: 16px;
    }

    .faq-page .hero-meta[b-8fhplmm56k] {
        gap: 20px;
    }
}

/* ============================================
   FAQ CONTENT LAYOUT
   ============================================ */

.faq-page .faq-content[b-8fhplmm56k] {
    padding: 64px 32px 80px;
}

.faq-page .faq-layout[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .faq-page .faq-content[b-8fhplmm56k] {
        padding: 48px 20px 64px;
    }

    .faq-page .faq-layout[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ============================================
   SIDEBAR
   ============================================ */

.faq-page .faq-sidebar[b-8fhplmm56k] {
    position: relative;
}

.faq-page .sidebar-sticky[b-8fhplmm56k] {
    position: sticky;
    /* 56px appbar + 24px breathing room = clears the appbar cleanly */
    top: 80px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.faq-page .faq-sidebar h3[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.faq-page .toc-list[b-8fhplmm56k] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.faq-page .toc-category[b-8fhplmm56k] {
    margin-bottom: 4px;
}

    .faq-page .toc-category:last-child[b-8fhplmm56k] {
        margin-bottom: 0;
    }

.faq-page .toc-category-link[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-heading);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    letter-spacing: -0.01em;
}

    .faq-page .toc-category-link:hover[b-8fhplmm56k] {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 5%, transparent);
    }

    .faq-page .toc-category-link i[b-8fhplmm56k] {
        color: var(--text-tertiary);
        font-size: 12px;
        width: 16px;
        flex-shrink: 0;
        opacity: 0.5;
    }

    .faq-page .toc-category-link span:not(.toc-count)[b-8fhplmm56k] {
        flex: 1;
    }

.faq-page .toc-count[b-8fhplmm56k] {
    display: none;
}

.faq-page .toc-questions[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 8px 14px;
    padding-left: 0;
    border-left: none;
}

/* 8. FIXED: 2nd-level nav font readable at 12.5px */
.faq-page .toc-question-link[b-8fhplmm56k] {
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.5;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all var(--transition-base);
    display: block;
    font-weight: 400;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

    .faq-page .toc-question-link:hover[b-8fhplmm56k] {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 5%, transparent);
    }

    /* Scroll-spy active state — question-level only */
    .faq-page .toc-question-link.toc-active[b-8fhplmm56k] {
        color: var(--accent);
        font-weight: 500;
    }

/* ============================================
   SIDEBAR CTA — Minimal, confident
   ============================================ */

.faq-page .sidebar-cta[b-8fhplmm56k] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 20px 24px;
    margin: -24px -24px 0 -24px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

    .faq-page .sidebar-cta h4[b-8fhplmm56k] {
        font-family: var(--font-family-heading);
        font-size: 13px;
        font-weight: 500;
        margin: 0 0 10px;
        color: var(--ink-3);
        letter-spacing: -0.01em;
        line-height: 1.4;
    }

.faq-page .sidebar-cta-link[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap var(--transition-base);
}

    .faq-page .sidebar-cta-link:hover[b-8fhplmm56k] {
        gap: 10px;
    }

    .faq-page .sidebar-cta-link i[b-8fhplmm56k] {
        font-size: 9px;
        transition: transform var(--transition-base);
    }

    .faq-page .sidebar-cta-link:hover i[b-8fhplmm56k] {
        transform: translateX(2px);
    }

/* ============================================
   METHODOLOGY BADGE
   ============================================ */

.faq-page .hero-methodology[b-8fhplmm56k] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.faq-page .methodology-badge[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: color-mix(in srgb, var(--accent) 6%, white);
    border: 1px solid var(--accent-border);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-deep, #9d0050);
}

    .faq-page .methodology-badge i[b-8fhplmm56k] {
        color: var(--accent);
        font-size: 12px;
    }

/* ============================================
   WHAT YOU'LL LEARN
   ============================================ */

.faq-page .what-you-learn[b-8fhplmm56k] {
    background: var(--color-bg-cool);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 24px 32px;
}

.faq-page .wyl-inner[b-8fhplmm56k] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.faq-page .wyl-label[b-8fhplmm56k] {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

    .faq-page .wyl-label i[b-8fhplmm56k] {
        font-size: 13px;
    }

.faq-page .wyl-list[b-8fhplmm56k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    flex: 1;
}

    .faq-page .wyl-list li[b-8fhplmm56k] {
        font-size: 13px;
        color: var(--text-secondary);
        font-weight: 500;
        padding-left: 16px;
        position: relative;
        line-height: 1.5;
    }

        .faq-page .wyl-list li[b-8fhplmm56k]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.5;
        }

@media (max-width: 768px) {
    .faq-page .what-you-learn[b-8fhplmm56k] {
        padding: 20px;
    }

    .faq-page .wyl-inner[b-8fhplmm56k] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
   GUIDE MAIN
   ============================================ */

.faq-page .guide-main[b-8fhplmm56k] {
    min-width: 0;
}

/* ============================================
   GUIDE SECTION — 11. Section titles STRONG
   ============================================ */

.faq-page .guide-section[b-8fhplmm56k] {
    margin-bottom: 72px;
    scroll-margin-top: 32px;
}

    .faq-page .guide-section:last-of-type[b-8fhplmm56k] {
        margin-bottom: 48px;
    }

.faq-page .guide-section-header[b-8fhplmm56k] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 40px;
    padding: 32px 0 24px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

    /* Gradient border — fades from accent to transparent */
    .faq-page .guide-section-header[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent) 50%, transparent 100%);
    }

/* Icon as large watermark behind header text */
.faq-page .guide-section-icon-bare[b-8fhplmm56k] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8rem;
    color: var(--accent);
    opacity: 0.04;
    pointer-events: none;
    line-height: 1;
}

.faq-page .guide-section-meta[b-8fhplmm56k] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

    .faq-page .guide-section-meta h2[b-8fhplmm56k] {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 300;
        color: var(--text-heading);
        margin: 0 0 6px;
        letter-spacing: -0.04em;
        line-height: 1.15;
    }

    .faq-page .guide-section-meta p[b-8fhplmm56k] {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.6;
        font-weight: 400;
    }

/* ============================================
   GUIDE ENTRIES — Questions as articles
   ============================================ */

.faq-page .guide-entries[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-page .guide-entry[b-8fhplmm56k] {
    padding: 36px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    scroll-margin-top: 32px;
}

    .faq-page .guide-entry:last-child[b-8fhplmm56k] {
        border-bottom: none;
    }

.faq-page .guide-entry-question[b-8fhplmm56k] {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 20px;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.faq-page .guide-entry-body[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ============================================
   ANSWER ANATOMY
   ============================================ */

.faq-page .answer-lead[b-8fhplmm56k] {
    font-size: 1.0625rem;
    color: var(--ink-2);
    line-height: 1.75;
    margin: 0;
    font-weight: 400;
}

.faq-page .guide-keypoints[b-8fhplmm56k] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .faq-page .guide-keypoints li[b-8fhplmm56k] {
        font-size: 1rem;
        color: var(--text-secondary);
        line-height: 1.7;
        padding-left: 20px;
        position: relative;
    }

        .faq-page .guide-keypoints li[b-8fhplmm56k]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.45;
        }

        .faq-page .guide-keypoints li strong[b-8fhplmm56k] {
            color: var(--ink-3, #334155);
            font-weight: 600;
        }

        .faq-page .guide-keypoints li a[b-8fhplmm56k] {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid var(--accent-border);
            transition: border-color 0.15s ease;
        }

            .faq-page .guide-keypoints li a:hover[b-8fhplmm56k] {
                border-bottom-color: var(--accent);
            }

/* 9. CONCLUSION — Clean left-border accent, no box */
.faq-page .answer-conclusion-card[b-8fhplmm56k] {
    display: flex;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform var(--transition-base);
}

    .faq-page .answer-conclusion-card:hover[b-8fhplmm56k] {
        transform: translateX(4px);
    }

.faq-page .answer-conclusion-accent[b-8fhplmm56k] {
    width: 3px;
    flex-shrink: 0;
    background: var(--accent);
    border-radius: 0;
}

.faq-page .answer-conclusion-content[b-8fhplmm56k] {
    padding: 4px 0 4px 24px;
    flex: 1;
    min-width: 0;
}

.faq-page .answer-conclusion-label[b-8fhplmm56k] {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    opacity: 0.6;
}

.faq-page .answer-conclusion[b-8fhplmm56k] {
    font-size: 0.9375rem;
    color: var(--ink-3);
    line-height: 1.7;
    margin: 0;
    font-weight: 550;
    font-style: normal;
    background: none;
    padding: 0;
    border-left: none;
    border-radius: 0;
    transition: color var(--transition-base);
}

.faq-page .answer-conclusion-card:hover .answer-conclusion[b-8fhplmm56k] {
    color: var(--ink);
}

.faq-page .answer-conclusion a[b-8fhplmm56k] {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

    .faq-page .answer-conclusion a:hover[b-8fhplmm56k] {
        text-decoration: underline;
    }

/* ============================================
   12. IMAGE GALLERY — Optional screenshots
   ============================================ */

.faq-page .guide-entry-images[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 4px;
}

.faq-page .guide-entry-figure[b-8fhplmm56k] {
    margin: 0;
}

.faq-page .guide-entry-figure-frame[b-8fhplmm56k] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--background-secondary);
    box-shadow: var(--shadow-sm);
    position: relative;
}

    .faq-page .guide-entry-figure-frame[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03) 0%, transparent 100%);
        pointer-events: none;
    }

    .faq-page .guide-entry-figure-frame img[b-8fhplmm56k] {
        display: block;
        width: 100%;
        height: auto;
    }

.faq-page .guide-entry-figure figcaption[b-8fhplmm56k] {
    font-size: 12.5px;
    color: var(--text-tertiary);
    margin-top: 10px;
    padding: 0 4px;
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 768px) {
    .faq-page .guide-entry-figure-frame[b-8fhplmm56k] {
        border-radius: var(--radius-md);
    }
}

/* ============================================
   PULL QUOTE
   ============================================ */

.faq-page .pull-quote[b-8fhplmm56k] {
    margin: 20px -4px;
    padding: 36px 40px 28px;
    background: var(--ink, #0f172a);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

    .faq-page .pull-quote[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 65%);
        pointer-events: none;
    }

.faq-page .pull-quote-mark[b-8fhplmm56k] {
    display: block;
    font-size: 4.5rem;
    color: var(--accent);
    opacity: 0.35;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 0.75;
    margin-bottom: 12px;
    user-select: none;
    position: relative;
    z-index: 1;
}

.faq-page .pull-quote p[b-8fhplmm56k] {
    font-size: 1.375rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    margin: 0 0 20px;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}

.faq-page .pull-quote-footer[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-page .pull-quote-attribution[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.faq-page .pull-quote-copy[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}

    .faq-page .pull-quote-copy:hover[b-8fhplmm56k] {
        color: rgba(255, 255, 255, 0.75);
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
    }

    .faq-page .pull-quote-copy.copied[b-8fhplmm56k] {
        color: #10b981;
        border-color: rgba(16, 185, 129, 0.3);
        background: rgba(16, 185, 129, 0.08);
    }

    .faq-page .pull-quote-copy i[b-8fhplmm56k] {
        font-size: 10px;
    }

@media (max-width: 768px) {
    .faq-page .pull-quote[b-8fhplmm56k] {
        margin: 16px 0;
        padding: 28px 24px 22px;
    }

        .faq-page .pull-quote p[b-8fhplmm56k] {
            font-size: 1.125rem;
        }

    .faq-page .pull-quote-footer[b-8fhplmm56k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================================
   MEET AINNA PANEL
   ============================================ */

.faq-page .meet-ainna[b-8fhplmm56k] {
    margin: 56px 0 0;
    padding: 48px 56px;
    background: linear-gradient(145deg, #120818 0%, #1e0d2a 60%, #2a0f20 100%);
    border-radius: var(--radius-xl, 20px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .faq-page .meet-ainna[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        bottom: -60px;
        left: -40px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 65%);
        pointer-events: none;
    }

    .faq-page .meet-ainna[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        top: -60px;
        right: 100px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(120, 40, 180, 0.12) 0%, transparent 65%);
        pointer-events: none;
    }

.faq-page .meet-ainna-body[b-8fhplmm56k] {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.faq-page .meet-ainna-eyebrow[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, white);
    margin-bottom: 14px;
}

    .faq-page .meet-ainna-eyebrow i[b-8fhplmm56k] {
        font-size: 11px;
    }

.faq-page .meet-ainna-title[b-8fhplmm56k] {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 10px;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.faq-page .meet-ainna-subtitle[b-8fhplmm56k] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 28px;
    line-height: 1.6;
    max-width: 480px;
}

.faq-page .meet-ainna-actions[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.faq-page .meet-ainna-note[b-8fhplmm56k] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.faq-page .meet-ainna-tagline[b-8fhplmm56k] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

    .faq-page .meet-ainna-tagline:hover[b-8fhplmm56k] {
        opacity: 0.8;
    }

.faq-page .meet-ainna-logo[b-8fhplmm56k] {
    height: 28px;
    width: auto;
    opacity: 0.85;
    display: block;
}

.faq-page .meet-ainna-wordmark[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.04em;
    text-align: right;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .faq-page .meet-ainna[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        padding: 36px 32px;
        gap: 24px;
    }

    .faq-page .meet-ainna-tagline[b-8fhplmm56k] {
        display: none;
    }

    .faq-page .meet-ainna-title[b-8fhplmm56k] {
        font-size: 1.25rem;
    }
}

@media (max-width: 640px) {
    .faq-page .meet-ainna[b-8fhplmm56k] {
        padding: 28px 24px;
        border-radius: var(--radius-lg);
    }

    .faq-page .meet-ainna-actions[b-8fhplmm56k] {
        flex-direction: column;
        align-items: stretch;
    }

        .faq-page .meet-ainna-actions .btn[b-8fhplmm56k] {
            width: 100%;
            justify-content: center;
        }
}

/* ============================================
   AINNA NOTE — "Did you know?" contextual aside
   Compact, no background fill. Distinct from
   takeaway cards (warm cream) and book quotes (cool).
   ============================================ */

.faq-page .ainna-note[b-8fhplmm56k] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 0 12px 16px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.faq-page .ainna-note-icon[b-8fhplmm56k] {
    color: var(--accent);
    opacity: 0.3;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
}

.faq-page .ainna-note-text[b-8fhplmm56k] {
    font-size: 0.8125rem;
    color: var(--ink-5);
    line-height: 1.6;
    margin: 0;
}

    .faq-page .ainna-note-text strong[b-8fhplmm56k] {
        color: var(--ink-4);
        font-weight: 600;
    }

.faq-page .ainna-note-link[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 4px;
    transition: gap var(--transition-base);
}

    .faq-page .ainna-note-link:hover[b-8fhplmm56k] {
        gap: 7px;
    }

    .faq-page .ainna-note-link i[b-8fhplmm56k] {
        font-size: 8px;
    }

/* ============================================
   SIDEBAR SUBSCRIBE
   ============================================ */

.faq-page .sidebar-subscribe[b-8fhplmm56k] {
    margin-top: 16px;
    padding: 20px;
    background: var(--background-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.faq-page .sidebar-subscribe-header[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .faq-page .sidebar-subscribe-header i[b-8fhplmm56k] {
        color: var(--text-tertiary);
        font-size: 14px;
        opacity: 0.5;
    }

    .faq-page .sidebar-subscribe-header h4[b-8fhplmm56k] {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-heading);
        margin: 0;
    }

.faq-page .sidebar-subscribe p[b-8fhplmm56k] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    line-height: 1.5;
}

.faq-page .sidebar-subscribe-form[b-8fhplmm56k] {
    display: flex;
    gap: 8px;
}

.faq-page .sidebar-subscribe-input[b-8fhplmm56k] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--background-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .faq-page .sidebar-subscribe-input:focus[b-8fhplmm56k] {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

    .faq-page .sidebar-subscribe-input[b-8fhplmm56k]::placeholder {
        color: var(--text-tertiary);
    }

    .faq-page .sidebar-subscribe-input:disabled[b-8fhplmm56k] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .faq-page .sidebar-subscribe-input.error[b-8fhplmm56k] {
        border-color: #ef4444;
        background: #fef2f2;
    }

        .faq-page .sidebar-subscribe-input.error:focus[b-8fhplmm56k] {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
        }

.faq-page .sidebar-subscribe-error[b-8fhplmm56k] {
    display: block;
    font-size: 11px;
    color: #ef4444;
    margin-top: 10px;
    font-weight: 500;
}

.faq-page .sidebar-subscribe-btn[b-8fhplmm56k] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

    .faq-page .sidebar-subscribe-btn:hover:not(:disabled)[b-8fhplmm56k] {
        background: var(--color-accent-2);
    }

    .faq-page .sidebar-subscribe-btn:disabled[b-8fhplmm56k] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .faq-page .sidebar-subscribe-btn i[b-8fhplmm56k] {
        font-size: 14px;
    }

    .faq-page .sidebar-subscribe-btn.loading[b-8fhplmm56k] {
        pointer-events: none;
    }

.faq-page .sidebar-subscribe-privacy[b-8fhplmm56k] {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 10px;
}

/* 6. Subscribe success — accent-tinted, not green-on-pink */
.faq-page .sidebar-subscribe-success[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 8%, white);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-deep, #9d0050);
    font-size: 13px;
    font-weight: 600;
    animation: success-pop-b-8fhplmm56k 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .faq-page .sidebar-subscribe-success i[b-8fhplmm56k] {
        font-size: 18px;
        color: var(--accent);
        animation: check-bounce-b-8fhplmm56k 0.5s ease-out 0.2s both;
    }

.faq-page .btn-spinner-sm[b-8fhplmm56k] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8fhplmm56k 0.8s linear infinite;
}

@media (max-width: 1024px) {
    .faq-page .faq-sidebar[b-8fhplmm56k] {
        display: none;
    }
}

/* ============================================
   INDEX — Dark hero, editorial intro, premium cards
   ============================================ */

/* ── INDEX HERO — Dark gradient ── */

.index-hero[b-8fhplmm56k] {
    padding: 80px 32px 72px;
    background: linear-gradient(165deg, #0a0020 0%, #10002e 25%, #0d0024 55%, #08001a 100%);
    position: relative;
    overflow: hidden;
}

    .index-hero[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        top: -120px;
        right: -80px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 60%);
        pointer-events: none;
    }

    .index-hero[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -60px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(120, 40, 180, 0.08) 0%, transparent 60%);
        pointer-events: none;
    }

.index-hero-inner[b-8fhplmm56k] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.index-hero-logo img[b-8fhplmm56k] {
    display: inline-block;
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 28px;
    opacity: 0.85;
}

.index-hero-title[b-8fhplmm56k] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 24px;
    letter-spacing: -0.04em;
}

.index-hero-subtitle[b-8fhplmm56k] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    margin: 0 0 48px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.index-hero-stats[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.index-hero-stat[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 40px;
}

.index-hero-stat-number[b-8fhplmm56k] {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.04em;
    line-height: 1;
}

.index-hero-stat-label[b-8fhplmm56k] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.index-hero-stat-divider[b-8fhplmm56k] {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Keyword-rich body text in hero */
.index-hero-body[b-8fhplmm56k] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.75;
    margin: 40px auto 0;
    max-width: 620px;
    text-align: center;
    font-weight: 400;
}

@media (max-width: 768px) {
    .index-hero[b-8fhplmm56k] {
        padding: 56px 20px 48px;
    }

    .index-hero-title[b-8fhplmm56k] {
        font-size: 2rem;
        letter-spacing: -0.03em;
    }

    .index-hero-subtitle[b-8fhplmm56k] {
        font-size: 1rem;
        margin-bottom: 36px;
    }

    .index-hero-stat[b-8fhplmm56k] {
        padding: 0 20px;
    }

    .index-hero-stat-number[b-8fhplmm56k] {
        font-size: 1.5rem;
    }
}

/* ── INDEX TOPICS — Navigation pill strip ── */

.index-topics[b-8fhplmm56k] {
    background: white;
    padding: 40px 0;
    border-bottom: 1px solid var(--border-color);
}

    .index-topics .container[b-8fhplmm56k] {
        max-width: 1100px;
    }

.index-topics-inner[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.index-topics-label[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.index-topics-pills[b-8fhplmm56k] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.index-topic-pill[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1.5px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ink-3, #334155);
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: -0.01em;
}

    .index-topic-pill i[b-8fhplmm56k] {
        font-size: 0.8125rem;
        color: var(--accent);
        opacity: 0.45;
        transition: all 0.2s ease;
    }

.index-topic-pill-count[b-8fhplmm56k] {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-tertiary);
    background: var(--background-secondary);
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.index-topic-pill:hover[b-8fhplmm56k] {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

    .index-topic-pill:hover i[b-8fhplmm56k] {
        opacity: 1;
    }

    .index-topic-pill:hover .index-topic-pill-count[b-8fhplmm56k] {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent);
    }

@media (max-width: 768px) {
    .index-topics[b-8fhplmm56k] {
        padding: 24px 0;
    }

    .index-topics-pills[b-8fhplmm56k] {
        width: 100%;
    }

    .index-topic-pill[b-8fhplmm56k] {
        flex: 1;
        justify-content: center;
        min-width: calc(50% - 5px);
    }
}

/* ── INDEX CATEGORIES — Generous spacing, transparent bg ── */

.index-categories[b-8fhplmm56k] {
    padding: 0;
    background: var(--color-bg-warm);
}

    .index-categories .container[b-8fhplmm56k] {
        max-width: 1100px;
        padding-top: 104px;
        padding-bottom: 104px;
    }

.index-category[b-8fhplmm56k] {
    padding: 56px 0;
    border-bottom: 1px solid var(--border-color);
}

    .index-category:first-child[b-8fhplmm56k] {
        padding-top: 0;
    }

    .index-category:last-of-type[b-8fhplmm56k] {
        border-bottom: none;
        padding-bottom: 0;
    }

.index-category-header[b-8fhplmm56k] {
    margin-bottom: 32px;
}

.index-category-label[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.index-category-count[b-8fhplmm56k] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.index-category-title[b-8fhplmm56k] {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 300;
    color: var(--text-heading);
    margin: 0 0 8px;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.index-category-desc[b-8fhplmm56k] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 640px;
}

/* ── INDEX ARTICLE CARDS — Prominent with visible CTA ── */

.index-articles-grid[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.index-article-card[b-8fhplmm56k] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: all 0.25s ease;
    overflow: hidden;
}

    .index-article-card:hover[b-8fhplmm56k] {
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
        transform: translateY(-3px);
    }

/* ── Index Card Cover Image ── */

.index-article-cover[b-8fhplmm56k] {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

    .index-article-cover img[b-8fhplmm56k] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center center;
        transition: transform 0.4s ease;
    }

.index-article-card:hover .index-article-cover img[b-8fhplmm56k] {
    transform: scale(1.04);
}

.index-article-card-body[b-8fhplmm56k] {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    padding: 20px 20px 0;
}

.index-article-card h3[b-8fhplmm56k] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 8px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* Title as link — inherits heading style, no underline */
.index-article-title-link[b-8fhplmm56k] {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .index-article-title-link:hover[b-8fhplmm56k] {
        color: var(--accent);
    }

.index-article-card p[b-8fhplmm56k] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.index-article-btn[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 9999px;
    align-self: flex-start;
    transition: all 0.2s ease;
    background: transparent;
    margin: 16px 20px 20px;
}

    .index-article-btn i[b-8fhplmm56k] {
        font-size: 0.6875rem;
        transition: transform 0.2s ease;
    }

    .index-article-btn:hover[b-8fhplmm56k] {
        background: var(--accent);
        border-color: var(--accent);
        color: white;
        transform: translateX(2px);
    }

        .index-article-btn:hover i[b-8fhplmm56k] {
            transform: translateX(3px);
        }

.index-article-card:hover .index-article-btn[b-8fhplmm56k] {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

    .index-article-card:hover .index-article-btn i[b-8fhplmm56k] {
        transform: translateX(3px);
    }

@media (max-width: 768px) {
    .index-category[b-8fhplmm56k] {
        padding: 40px 0;
    }

    .index-categories .container[b-8fhplmm56k] {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .index-articles-grid[b-8fhplmm56k] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .index-articles-grid[b-8fhplmm56k] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.index-category-title[b-8fhplmm56k] {
    font-size: 1.375rem;
}


/* ── INDEX SUBSCRIBE — Dark premium panel ── */

.index-subscribe-panel[b-8fhplmm56k] {
    margin-top: 64px;
    margin-bottom: 16px;
}

.index-subscribe-panel-inner[b-8fhplmm56k] {
    background: linear-gradient(145deg, #120818 0%, #1e0d2a 60%, #2a0f20 100%);
    border-radius: var(--radius-xl, 24px);
    padding: 48px 56px;
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

    .index-subscribe-panel-inner[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -40px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 60%);
        pointer-events: none;
    }

.index-subscribe-panel-text[b-8fhplmm56k] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.index-subscribe-panel-eyebrow[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, white);
    margin-bottom: 14px;
}

    .index-subscribe-panel-eyebrow i[b-8fhplmm56k] {
        font-size: 11px;
    }

.index-subscribe-panel-text h3[b-8fhplmm56k] {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 10px;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.index-subscribe-panel-text p[b-8fhplmm56k] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    line-height: 1.6;
}

.index-subscribe-panel-form[b-8fhplmm56k] {
    flex-shrink: 0;
    width: 340px;
    position: relative;
    z-index: 1;
}

    .index-subscribe-panel-form .subscribe-form[b-8fhplmm56k] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .index-subscribe-panel-form .subscribe-input[b-8fhplmm56k] {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: white;
        border-radius: 10px;
    }

        .index-subscribe-panel-form .subscribe-input[b-8fhplmm56k]::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .index-subscribe-panel-form .subscribe-input:focus[b-8fhplmm56k] {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
        }

    .index-subscribe-panel-form .subscribe-btn[b-8fhplmm56k] {
        width: 100%;
        justify-content: center;
        border-radius: 10px;
    }

    .index-subscribe-panel-form .subscribe-error[b-8fhplmm56k] {
        color: #fca5a5;
    }

.index-subscribe-panel-success[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    animation: success-pop-b-8fhplmm56k 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .index-subscribe-panel-success i[b-8fhplmm56k] {
        font-size: 20px;
        color: var(--accent);
    }

@media (max-width: 768px) {
    .index-subscribe-panel-inner[b-8fhplmm56k] {
        flex-direction: column;
        padding: 36px 28px;
        gap: 28px;
        text-align: center;
    }

    .index-subscribe-panel-form[b-8fhplmm56k] {
        width: 100%;
    }

    .index-subscribe-panel-eyebrow[b-8fhplmm56k] {
        justify-content: center;
    }
}

/* ── INDEX CLOSING QUOTE — Separator before footer ── */

.index-closing-quote[b-8fhplmm56k] {
    text-align: center;
    padding: 80px 0 88px;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

    /* Large decorative quotation mark */
    .index-closing-quote[b-8fhplmm56k]::before {
        content: '\201C';
        display: block;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 6rem;
        line-height: 1;
        color: var(--accent);
        opacity: 0.2;
        margin-bottom: -16px;
    }

    .index-closing-quote blockquote[b-8fhplmm56k] {
        font-family: var(--font-family-heading);
        font-size: clamp(1.25rem, 2.5vw, 1.625rem);
        font-weight: 300;
        color: var(--ink-2);
        line-height: 1.55;
        margin: 0 0 28px;
        padding: 0;
        border: none;
        font-style: italic;
        letter-spacing: -0.02em;
    }

    .index-closing-quote cite[b-8fhplmm56k] {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-tertiary);
        font-style: normal;
        letter-spacing: 0.02em;
        display: block;
    }

    .index-closing-quote .quote-book-source[b-8fhplmm56k] {
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--accent);
        opacity: 0.6;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: block;
        margin-top: 6px;
    }

/* ── Editorial Book Quote — reusable in articles ── */

.faq-page .book-quote[b-8fhplmm56k] {
    margin: 56px 0;
    padding: 56px 48px 48px;
    background: var(--color-bg-cool);
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
}

    /* Subtle top accent line */
    .faq-page .book-quote[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 56px;
        right: 56px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 20%, transparent) 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, color-mix(in srgb, var(--accent) 20%, transparent) 70%, transparent 100%);
    }

.faq-page .book-quote-mark[b-8fhplmm56k] {
    display: block;
    font-size: 5.5rem;
    color: var(--accent);
    opacity: 0.12;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 0.5;
    margin-bottom: 12px;
    user-select: none;
}

.faq-page .book-quote-text[b-8fhplmm56k] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.35;
    margin: 0 auto 36px;
    max-width: 620px;
    font-style: italic;
    letter-spacing: -0.03em;
}

.faq-page .book-quote-footer[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
}

.faq-page .book-quote-author[b-8fhplmm56k] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.faq-page .book-quote-source[b-8fhplmm56k] {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--accent);
    opacity: 0.55;
}

@media (max-width: 768px) {
    .faq-page .book-quote[b-8fhplmm56k] {
        margin: 36px 0;
        padding: 40px 24px 36px;
    }

        .faq-page .book-quote[b-8fhplmm56k]::before {
            left: 24px;
            right: 24px;
        }

    .faq-page .book-quote-text[b-8fhplmm56k] {
        font-size: 1.375rem;
    }

    .faq-page .guide-section-icon-bare[b-8fhplmm56k] {
        font-size: 5rem;
        left: 4px;
    }
}

/* ============================================
   SUBSCRIBE FORM — Shared base styles
   ============================================ */

.subscribe-form[b-8fhplmm56k] {
    display: flex;
    gap: 12px;
    max-width: 480px;
}

.subscribe-input[b-8fhplmm56k] {
    flex: 1;
    padding: 14px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md, 12px);
    font-size: 15px;
    font-family: inherit;
    background: white;
    color: var(--text-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .subscribe-input:focus[b-8fhplmm56k] {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--shadow-color-light);
    }

    .subscribe-input[b-8fhplmm56k]::placeholder {
        color: var(--text-tertiary);
    }

    .subscribe-input:disabled[b-8fhplmm56k] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .subscribe-input.error[b-8fhplmm56k] {
        border-color: #ef4444;
        background: #fef2f2;
    }

        .subscribe-input.error:focus[b-8fhplmm56k] {
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
        }

.subscribe-error[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ef4444;
    margin-top: 14px;
    font-weight: 500;
}

    .subscribe-error i[b-8fhplmm56k] {
        font-size: 14px;
    }

.subscribe-btn[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md, 12px);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

    .subscribe-btn:hover:not(:disabled)[b-8fhplmm56k] {
        background: var(--color-accent-2);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md), 0 4px 12px var(--shadow-color-light);
    }

    .subscribe-btn:disabled[b-8fhplmm56k] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .subscribe-btn.loading[b-8fhplmm56k] {
        pointer-events: none;
        min-width: 140px;
        justify-content: center;
    }

    .subscribe-btn i[b-8fhplmm56k] {
        font-size: 12px;
        transition: transform var(--transition-base);
    }

    .subscribe-btn:hover:not(:disabled) i[b-8fhplmm56k] {
        transform: translateX(3px);
    }

.btn-spinner[b-8fhplmm56k] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8fhplmm56k 0.8s linear infinite;
}

@keyframes spin-b-8fhplmm56k {
    to {
        transform: rotate(360deg);
    }
}

@keyframes success-pop-b-8fhplmm56k {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes check-bounce-b-8fhplmm56k {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================
   REFERENCES — Inline citations
   ============================================ */

.faq-page .answer-references[b-8fhplmm56k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 50%, transparent);
}

.faq-page .references-label[b-8fhplmm56k] {
    color: var(--text-tertiary);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    opacity: 0.6;
}

.faq-page .reference-link[b-8fhplmm56k],
.faq-page .reference-item[b-8fhplmm56k] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 10px;
    opacity: 0.65;
}

.faq-page .reference-link[b-8fhplmm56k] {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

    .faq-page .reference-link:hover[b-8fhplmm56k] {
        opacity: 1;
        color: var(--accent);
    }

    .faq-page .reference-link cite[b-8fhplmm56k],
    .faq-page .reference-item cite[b-8fhplmm56k] {
        font-style: normal;
    }

.faq-page .reference-meta[b-8fhplmm56k] {
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0.5;
}

    .faq-page .reference-meta[b-8fhplmm56k]::before {
        content: "·";
        margin-right: 3px;
    }

@media (max-width: 768px) {
    .faq-page .guide-entry-question[b-8fhplmm56k] {
        font-size: 1.1875rem;
    }

    .faq-page .guide-section-header[b-8fhplmm56k] {
        margin-bottom: 28px;
        padding-bottom: 16px;
    }

    .faq-page .guide-section-meta h2[b-8fhplmm56k] {
        font-size: 1.375rem;
    }
}

/* ============================================
   SOCIAL SHARING
   ============================================ */

.faq-page .social-sharing[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}

.faq-page .sharing-label[b-8fhplmm56k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.faq-page .sharing-buttons[b-8fhplmm56k] {
    display: flex;
    gap: 8px;
}

.faq-page .share-btn[b-8fhplmm56k] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--border-light);
    background: var(--background-primary);
    color: var(--text-tertiary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
}

    .faq-page .share-btn:hover[b-8fhplmm56k] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.faq-page .share-twitter:hover[b-8fhplmm56k] {
    background: #1da1f2;
    border-color: #1da1f2;
    color: white;
}

.faq-page .share-linkedin:hover[b-8fhplmm56k] {
    background: #0a66c2;
    border-color: #0a66c2;
    color: white;
}

.faq-page .share-facebook:hover[b-8fhplmm56k] {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.faq-page .share-copy:hover[b-8fhplmm56k] {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.faq-page .share-copy .fa-check[b-8fhplmm56k] {
    color: #10b981;
}

.faq-page .share-copy:hover .fa-check[b-8fhplmm56k] {
    color: white;
}

@media (max-width: 768px) {
    .faq-page .social-sharing[b-8fhplmm56k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 40px;
        padding-top: 24px;
    }

    .faq-page .share-btn[b-8fhplmm56k] {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   REFERENCES SECTION
   ============================================ */

.faq-page .references-section[b-8fhplmm56k] {
    padding: 56px 32px;
    background: var(--color-bg-warm);
    border-top: 1px solid var(--border-light);
}

.faq-page .references-header[b-8fhplmm56k] {
    text-align: center;
    margin-bottom: 32px;
}

    .faq-page .references-header h2[b-8fhplmm56k] {
        font-size: clamp(1.375rem, 2.5vw, 1.75rem);
        font-weight: 300;
        color: var(--text-heading);
        margin: 0 0 8px;
    }

    .faq-page .references-header p[b-8fhplmm56k] {
        font-size: 15px;
        color: var(--text-secondary);
        max-width: 500px;
        margin: 0 auto;
    }

.faq-page .references-grid[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 32px;
}

.faq-page .reference-category[b-8fhplmm56k] {
    background: var(--background-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

    .faq-page .reference-category h3[b-8fhplmm56k] {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-heading);
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-light);
    }

        .faq-page .reference-category h3 i[b-8fhplmm56k] {
            color: var(--text-tertiary);
            font-size: 14px;
            opacity: 0.4;
        }

    .faq-page .reference-category ul[b-8fhplmm56k] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .faq-page .reference-category li[b-8fhplmm56k] {
        padding: 6px 0;
    }

        .faq-page .reference-category li:last-child[b-8fhplmm56k] {
            padding-bottom: 0;
        }

    .faq-page .reference-category cite[b-8fhplmm56k] {
        font-style: normal;
        font-size: 13px;
        color: var(--text-heading);
        line-height: 1.5;
        display: block;
    }

        .faq-page .reference-category cite em[b-8fhplmm56k] {
            font-style: italic;
        }

    .faq-page .reference-category a[b-8fhplmm56k] {
        text-decoration: none;
    }

        .faq-page .reference-category a cite[b-8fhplmm56k] {
            color: var(--ink-3);
            transition: color var(--transition-base);
        }

        .faq-page .reference-category a:hover cite[b-8fhplmm56k] {
            color: var(--ink);
            text-decoration: underline;
        }

.faq-page .reference-meta[b-8fhplmm56k] {
    font-size: 11px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 4px;
}

.faq-page .references-note[b-8fhplmm56k] {
    max-width: 700px;
    margin: 0 auto;
    padding: 16px 0 0;
    background: none;
    border: none;
    border-radius: 0;
    text-align: center;
}

    .faq-page .references-note i[b-8fhplmm56k] {
        display: none;
    }

    .faq-page .references-note p[b-8fhplmm56k] {
        font-size: 13px;
        color: var(--text-tertiary);
        margin: 0;
        line-height: 1.6;
    }

    .faq-page .references-note a[b-8fhplmm56k] {
        color: var(--accent);
        text-decoration: none;
        font-weight: 600;
    }

        .faq-page .references-note a:hover[b-8fhplmm56k] {
            text-decoration: underline;
        }

@media (max-width: 768px) {
    .faq-page .references-section[b-8fhplmm56k] {
        padding: 40px 20px;
    }

    .faq-page .references-header h2[b-8fhplmm56k] {
        font-size: 20px;
    }

    .faq-page .references-grid[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .faq-page .reference-category[b-8fhplmm56k] {
        padding: 16px 20px;
    }

    .faq-page .references-note[b-8fhplmm56k] {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }
}

/* ============================================
   RELATED RESOURCES
   ============================================ */

.faq-page .related-resources[b-8fhplmm56k] {
    padding: 56px 32px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
}

    .faq-page .related-resources h2[b-8fhplmm56k] {
        font-size: clamp(1.375rem, 2.5vw, 1.75rem);
        font-weight: 300;
        color: var(--text-heading);
        text-align: center;
        margin: 0 0 32px;
    }

.faq-page .resources-grid[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-page .resource-card[b-8fhplmm56k] {
    background: var(--background-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0;
    text-decoration: none;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .faq-page .resource-card:hover[b-8fhplmm56k] {
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

/* ── Related Resource Cover Image ── */

.faq-page .resource-card-cover[b-8fhplmm56k] {
    overflow: hidden;
    flex-shrink: 0;
}

    .faq-page .resource-card-cover img[b-8fhplmm56k] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center center;
        transition: transform 0.4s ease;
    }

.faq-page .resource-card:hover .resource-card-cover img[b-8fhplmm56k] {
    transform: scale(1.04);
}

.faq-page .resource-card h3[b-8fhplmm56k] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 8px;
    padding: 24px 24px 0;
}

.faq-page .resource-card p[b-8fhplmm56k] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 14px;
    padding: 0 24px;
}

.faq-page .resource-link[b-8fhplmm56k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 24px 24px;
}

    .faq-page .resource-link i[b-8fhplmm56k] {
        font-size: 11px;
        transition: transform var(--transition-base);
    }

.faq-page .resource-card:hover .resource-link i[b-8fhplmm56k] {
    transform: translateX(4px);
}

/* Hub back-link — strengthens index ← article spoke */
.faq-page .related-resources-hub[b-8fhplmm56k] {
    text-align: center;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border-light);
}

.faq-page .related-resources-hub-link[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 24px;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    transition: all 0.2s ease;
}

    .faq-page .related-resources-hub-link:hover[b-8fhplmm56k] {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .faq-page .related-resources-hub-link .fa-th-large[b-8fhplmm56k] {
        font-size: 0.75rem;
        opacity: 0.5;
    }

    .faq-page .related-resources-hub-link .fa-arrow-right[b-8fhplmm56k] {
        font-size: 0.6875rem;
        transition: transform 0.2s ease;
    }

    .faq-page .related-resources-hub-link:hover .fa-arrow-right[b-8fhplmm56k] {
        transform: translateX(3px);
    }

@media (max-width: 968px) {
    .faq-page .related-resources[b-8fhplmm56k] {
        padding: 40px 20px;
    }

        .faq-page .related-resources h2[b-8fhplmm56k] {
            font-size: 20px;
            margin-bottom: 24px;
        }

    .faq-page .resources-grid[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 12px;
    }

    .faq-page .resource-card[b-8fhplmm56k] {
        padding: 20px;
    }
}

/* ============================================
   FOOTER — Restructured with about section
   ============================================ */

.faq-page footer[b-8fhplmm56k] {
    background: linear-gradient(180deg, #1e1a1c 0%, #17141a 100%);
    color: rgba(255,255,255,0.8);
    padding: 64px 32px 40px;
    position: relative;
}

    /* Gradient glow line — matches landing page footer */
    .faq-page footer[b-8fhplmm56k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(244, 8, 155, 0.06) 15%, rgba(244, 8, 155, 0.2) 40%, rgba(244, 8, 155, 0.3) 50%, rgba(244, 8, 155, 0.2) 60%, rgba(244, 8, 155, 0.06) 85%, transparent 100%);
    }

    /* Soft bleed glow beneath the line */
    .faq-page footer[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 20%;
        right: 20%;
        height: 80px;
        background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(244, 8, 155, 0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .faq-page footer > .container[b-8fhplmm56k] {
        position: relative;
        z-index: 1;
    }

.faq-page .footer-logo-section[b-8fhplmm56k] {
    text-align: center;
    margin-bottom: 40px;
}

.faq-page .footer-logo[b-8fhplmm56k] {
    display: block;
    margin: 0 auto 10px;
    width: fit-content;
    transition: opacity var(--transition-base);
}

    .faq-page .footer-logo img[b-8fhplmm56k] {
        display: block;
        height: 36px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .faq-page .footer-logo:hover[b-8fhplmm56k] {
        opacity: 0.8;
    }

.faq-page .footer-brand-tagline[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 6px;
}

.faq-page .footer-tagline[b-8fhplmm56k] {
    font-family: 'Space Grotesk', var(--font-family-primary, sans-serif);
    font-size: 13px;
    color: rgba(255,255,255,0.22);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.faq-page .footer-cta[b-8fhplmm56k] {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.faq-page .footer-cta-title[b-8fhplmm56k] {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 300;
    color: white;
    margin: 0 0 12px;
    letter-spacing: -0.04em;
}

.faq-page .footer-cta-text[b-8fhplmm56k] {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 28px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.faq-page .footer-cta-buttons[b-8fhplmm56k] {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.faq-page .footer-cta .btn-primary[b-8fhplmm56k] {
    background: var(--gradient-cta);
    color: white;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-base);
    border: none;
    box-shadow: var(--accent-glow-sm);
}

    .faq-page .footer-cta .btn-primary:hover[b-8fhplmm56k] {
        transform: translateY(-2px);
        box-shadow: var(--accent-glow-hover);
    }

/* ── Footer Resources Grid ── */

.faq-page .footer-resources[b-8fhplmm56k] {
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.faq-page .footer-resources-header[b-8fhplmm56k] {
    text-align: center;
    margin-bottom: 32px;
}

    .faq-page .footer-resources-header h3[b-8fhplmm56k] {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255,255,255,0.4);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 2.5px;
    }

.faq-page .footer-resources-grid[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-page .footer-resource-column h4[b-8fhplmm56k] {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .faq-page .footer-resource-column h4 i[b-8fhplmm56k] {
        color: rgba(255,255,255,0.25);
        font-size: 13px;
    }

.faq-page .footer-resource-column ul[b-8fhplmm56k] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-page .footer-resource-column li[b-8fhplmm56k] {
    margin: 0 0 10px;
}

    .faq-page .footer-resource-column li:last-child[b-8fhplmm56k] {
        margin-bottom: 0;
    }

.faq-page .footer-resource-column a[b-8fhplmm56k] {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: all var(--transition-base);
    display: block;
    line-height: 1.4;
}

    .faq-page .footer-resource-column a:hover[b-8fhplmm56k] {
        color: rgba(255,255,255,0.85);
        padding-left: 4px;
    }

/* ── Footer About — Company info + links ── */

.faq-page .footer-about[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.faq-page .footer-about-text p[b-8fhplmm56k] {
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
    color: rgba(255,255,255,0.4);
}

    .faq-page .footer-about-text p strong[b-8fhplmm56k] {
        color: rgba(255,255,255,0.65);
        font-weight: 600;
    }

    .faq-page .footer-about-text p em[b-8fhplmm56k] {
        font-style: italic;
        color: rgba(255,255,255,0.5);
    }

.faq-page .footer-about-links[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.faq-page .footer-about-column h4[b-8fhplmm56k] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.faq-page .footer-about-column ul[b-8fhplmm56k] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-page .footer-about-column li[b-8fhplmm56k] {
    margin: 0 0 10px;
}

    .faq-page .footer-about-column li:last-child[b-8fhplmm56k] {
        margin-bottom: 0;
    }

.faq-page .footer-about-column a[b-8fhplmm56k] {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--transition-base);
}

    .faq-page .footer-about-column a:hover[b-8fhplmm56k] {
        color: rgba(255,255,255,0.85);
    }

/* SEO paragraph — continuation of about text, same treatment as surrounding copy */
.faq-page .footer-about-seo[b-8fhplmm56k] {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.75;
}

/* ── Footer Social Row ── */

.faq-page .footer-social-row[b-8fhplmm56k] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.faq-page .social-link[b-8fhplmm56k] {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: all var(--transition-base);
}

    .faq-page .social-link:hover[b-8fhplmm56k] {
        background: var(--accent);
        color: white;
        transform: translateY(-2px);
    }

/* ── Footer Bottom ── */

.faq-page .footer-bottom[b-8fhplmm56k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

    .faq-page .footer-bottom p[b-8fhplmm56k] {
        font-size: 12px;
        color: rgba(255,255,255,0.3);
        margin: 0;
    }

@media (max-width: 968px) {
    .faq-page .footer-resources-grid[b-8fhplmm56k] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .faq-page .footer-about[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .faq-page footer[b-8fhplmm56k] {
        padding: 48px 20px 32px;
    }

    .faq-page .footer-cta-title[b-8fhplmm56k] {
        font-size: 1.25rem;
    }

    .faq-page .footer-cta-buttons[b-8fhplmm56k] {
        flex-direction: column;
    }

    .faq-page .footer-cta .btn-primary[b-8fhplmm56k] {
        width: 100%;
        justify-content: center;
    }

    .faq-page .footer-resources-grid[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .faq-page .footer-about-links[b-8fhplmm56k] {
        grid-template-columns: 1fr 1fr;
    }

    .faq-page .footer-bottom[b-8fhplmm56k] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ============================================
   LOADING / NOT FOUND
   ============================================ */

.faq-loading[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    gap: 24px;
    font-family: var(--font-family-primary);
}

    .faq-loading .loading-spinner[b-8fhplmm56k] {
        width: 48px;
        height: 48px;
        border: 3px solid color-mix(in srgb, var(--accent) 15%, white);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin-b-8fhplmm56k 0.9s linear infinite;
    }

    .faq-loading p[b-8fhplmm56k] {
        color: var(--text-tertiary);
        font-size: 15px;
        font-weight: 500;
    }

.faq-not-found[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: 48px 32px;
    font-family: var(--font-family-primary);
}

    .faq-not-found h1[b-8fhplmm56k] {
        font-size: 36px;
        font-weight: 800;
        color: var(--ink);
        margin: 0 0 14px;
        letter-spacing: -1px;
    }

    .faq-not-found p[b-8fhplmm56k] {
        font-size: 16px;
        color: var(--ink-5);
        margin: 0 0 28px;
    }

    .faq-not-found .btn[b-8fhplmm56k] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        background: var(--gradient-cta);
        color: white;
        border-radius: var(--radius-lg);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all var(--transition-base);
        box-shadow: var(--accent-glow-sm);
    }

        .faq-not-found .btn:hover[b-8fhplmm56k] {
            transform: translateY(-2px);
            box-shadow: var(--accent-glow-hover);
        }

/* ============================================================
   =============================================================
   EDITORIAL REFRESH - Appbar + clean hero + featured newsletter
   
   Design intent: the reader is on an editorial long-read, not a
   landing page. The sticky appbar carries brand + conversion
   persistently, so the hero can be quiet and confident. The
   sidebar newsletter replaces a mid-article product ask with
   the kind of offer editorial readers actually accept.
   =============================================================
   ============================================================ */


/* ============================================
   STICKY APPBAR
   Persistent brand + conversion bar at top.
   Sits above both index-hero and faq-hero.
   ============================================ */

.faq-page .faq-appbar[b-8fhplmm56k] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.faq-page .faq-appbar-inner[b-8fhplmm56k] {
    max-width: var(--container-wide, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 32px;
    min-height: 56px;
}

.faq-page .faq-appbar-brand[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

    .faq-page .faq-appbar-brand img[b-8fhplmm56k] {
        height: 26px;
        width: auto;
        display: block;
    }

.faq-page .faq-appbar-nav[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

    .faq-page .faq-appbar-nav a[b-8fhplmm56k] {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text-secondary, #5f6368);
        text-decoration: none;
        letter-spacing: -0.005em;
        transition: color var(--transition-base);
    }

        .faq-page .faq-appbar-nav a:hover[b-8fhplmm56k] {
            color: var(--text-heading, #2c3e50);
        }

.faq-page .faq-appbar-cta[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b 0%, #c80670 100%));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    letter-spacing: -0.005em;
    box-shadow: 0 2px 8px rgba(240, 12, 113, 0.22);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

    .faq-page .faq-appbar-cta:hover[b-8fhplmm56k] {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(240, 12, 113, 0.32);
        color: #fff;
    }

    .faq-page .faq-appbar-cta i[b-8fhplmm56k] {
        font-size: 10px;
        transition: transform var(--transition-base);
    }

    .faq-page .faq-appbar-cta:hover i[b-8fhplmm56k] {
        transform: translateX(2px);
    }

@media (max-width: 720px) {
    .faq-page .faq-appbar-inner[b-8fhplmm56k] {
        gap: 12px;
        padding: 8px 20px;
    }

    .faq-page .faq-appbar-nav[b-8fhplmm56k] {
        display: none;
    }

    .faq-page .faq-appbar-brand img[b-8fhplmm56k] {
        height: 22px;
    }

    .faq-page .faq-appbar-cta[b-8fhplmm56k] {
        margin-left: auto;
        padding: 8px 14px;
        font-size: 12.5px;
    }
}


/* ============================================
   HERO TYPOGRAPHY - larger, editorial
   Overrides the original .hero-title rule.
   ============================================ */

.faq-page .hero-title[b-8fhplmm56k] {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--text-heading, #2c3e50);
    margin: 0 0 28px;
    letter-spacing: -0.035em;
}

/* Tighten the hero top padding now that the appbar sits above it */
.faq-page .faq-hero[b-8fhplmm56k] {
    padding: 56px 32px 72px;
}


/* ============================================
   QUICK ANSWER EYEBROW + SUBTITLE
   Subtle eyebrow, no pill. Subtitle reads as
   the lede paragraph - larger, deliberate.
   ============================================ */

.faq-page .hero-subtitle-eyebrow[b-8fhplmm56k] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 8px 0 12px;
}

.faq-page .hero-subtitle[b-8fhplmm56k] {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--text-secondary, #5f6368);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 680px;
    font-weight: 400;
    letter-spacing: -0.005em;
}


/* ============================================
   HERO META STRIP
   Single compact line: byline + read time +
   date + category. Replaces the 4-item hero-meta
   and the old byline block in one pass.
   ============================================ */

.faq-page .hero-meta-strip[b-8fhplmm56k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    margin: 24px auto 0;
    font-size: 13px;
    color: var(--text-tertiary, #9aa0a6);
    line-height: 1.6;
}

.faq-page .hero-meta-strip-byline[b-8fhplmm56k] {
    font-weight: 500;
    color: var(--text-secondary, #5f6368);
}

.faq-page .hero-meta-strip-author[b-8fhplmm56k] {
    color: var(--text-heading, #2c3e50);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
    padding-bottom: 1px;
    transition: color var(--transition-base), border-color var(--transition-base);
}

    .faq-page .hero-meta-strip-author:hover[b-8fhplmm56k] {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.faq-page .hero-meta-strip-item[b-8fhplmm56k] {
    font-weight: 400;
}

.faq-page .hero-meta-strip-sep[b-8fhplmm56k] {
    color: var(--border-strong, #d0d5dd);
    font-weight: 400;
    user-select: none;
}

@media (max-width: 520px) {
    .faq-page .hero-meta-strip[b-8fhplmm56k] {
        gap: 4px 8px;
        font-size: 12.5px;
    }
}


/* ============================================
   SIDEBAR NEWSLETTER - featured variant
   Sits at the top of the sticky sidebar.
   Editorial warm treatment, not a hard sell.
   ============================================ */

.faq-page .sidebar-subscribe--featured[b-8fhplmm56k] {
    margin: -24px -24px 20px -24px;
    padding: 22px 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent) 0%, color-mix(in srgb, var(--accent) 1.5%, transparent) 100%);
    border: none;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

    .faq-page .sidebar-subscribe--featured .sidebar-subscribe-header[b-8fhplmm56k] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

        .faq-page .sidebar-subscribe--featured .sidebar-subscribe-header i[b-8fhplmm56k] {
            color: var(--accent);
            font-size: 12px;
        }

        .faq-page .sidebar-subscribe--featured .sidebar-subscribe-header h4[b-8fhplmm56k] {
            font-family: var(--font-family-heading, var(--font-family-primary));
            font-size: 15px;
            font-weight: 600;
            margin: 0;
            color: var(--text-heading, #2c3e50);
            letter-spacing: -0.015em;
            line-height: 1.3;
        }

    .faq-page .sidebar-subscribe--featured p[b-8fhplmm56k] {
        font-size: 12.5px;
        color: var(--text-secondary, #5f6368);
        margin: 0 0 12px;
        line-height: 1.5;
    }

.faq-page .sidebar-subscribe-note[b-8fhplmm56k] {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary, #9aa0a6);
    margin-top: 8px;
    line-height: 1.5;
}


/* ============================================
   DEFENSIVE: hide hero elements that the new
   design removes (in case the config for any
   guide still tries to use them somewhere).
   ============================================ */

.faq-page .hero-cover-image[b-8fhplmm56k] {
    display: none;
}


/* ============================================================
   =============================================================
   SECOND PASS - Subtle cover bg + author-led sidebar panel
   =============================================================
   ============================================================ */


/* ============================================
   HERO COVER - see final rules at end of file.
   This section intentionally left blank; earlier
   ::before / ::after pseudo-element approach is
   fully replaced by a single <img> inside the hero.
   ============================================ */


/* ============================================
   SIDEBAR AUTHOR PANEL
   Substack-style: human-anchored. Photo +
   credentials + social links + newsletter, all
   in one unified top card. Replaces the
   standalone featured-newsletter variant.
   ============================================ */

.faq-page .sidebar-author[b-8fhplmm56k] {
    margin: -24px -24px 20px -24px;
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #fff) 0%, color-mix(in srgb, var(--accent) 1.5%, #fff) 100%);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Identity row: avatar + name + credentials */
.faq-page .sidebar-author-identity[b-8fhplmm56k] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.faq-page .sidebar-author-avatar[b-8fhplmm56k] {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b 0%, #c80670 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(240, 12, 113, 0.22);
}

    /* Initials render via ::before. If the image loads, it covers the initials. */
    .faq-page .sidebar-author-avatar[b-8fhplmm56k]::before {
        content: attr(data-initials);
    }

    .faq-page .sidebar-author-avatar img[b-8fhplmm56k] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.faq-page .sidebar-author-meta[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.faq-page .sidebar-author-label[b-8fhplmm56k] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary, #9aa0a6);
    line-height: 1;
    margin-bottom: 3px;
}

.faq-page .sidebar-author-name[b-8fhplmm56k] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-heading, #2c3e50);
    text-decoration: none;
    letter-spacing: -0.015em;
    line-height: 1.2;
    transition: color var(--transition-base);
}

    .faq-page .sidebar-author-name:hover[b-8fhplmm56k] {
        color: var(--accent);
    }

.faq-page .sidebar-author-titles[b-8fhplmm56k] {
    font-size: 12px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.45;
    margin-top: 4px;
}

    .faq-page .sidebar-author-titles em[b-8fhplmm56k] {
        font-style: italic;
        color: var(--text-heading, #2c3e50);
        font-weight: 500;
    }

/* Links row: LinkedIn + About */
.faq-page .sidebar-author-links[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.faq-page .sidebar-author-link[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5f6368);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color var(--transition-base), gap var(--transition-base);
}

    .faq-page .sidebar-author-link:hover[b-8fhplmm56k] {
        color: var(--accent);
    }

        .faq-page .sidebar-author-link:hover:last-child[b-8fhplmm56k] {
            gap: 8px;
        }

    .faq-page .sidebar-author-link i[b-8fhplmm56k] {
        font-size: 13px;
    }

    .faq-page .sidebar-author-link:last-child[b-8fhplmm56k] {
        margin-left: auto;
    }

/* Newsletter embedded in the author panel - hook is author-anchored */
.faq-page .sidebar-author-subscribe[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-page .sidebar-author-subscribe-hook[b-8fhplmm56k] {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-secondary, #5f6368);
    margin: 0 0 2px;
    line-height: 1.4;
}

/* Override the inherited sidebar-subscribe spacing when nested in author panel */
.faq-page .sidebar-author-subscribe .sidebar-subscribe-form[b-8fhplmm56k] {
    margin-top: 4px;
}

.faq-page .sidebar-author-subscribe .sidebar-subscribe-note[b-8fhplmm56k] {
    font-size: 10.5px;
    color: var(--text-tertiary, #9aa0a6);
    margin-top: 6px;
    line-height: 1.4;
}

.faq-page .sidebar-author-subscribe .sidebar-subscribe-success[b-8fhplmm56k] {
    margin-top: 4px;
}


/* ============================================================
   =============================================================
   THIRD PASS - Visible cover, appbar breadcrumb, inline signature,
   prev/next navigation
   =============================================================
   ============================================================ */


/* ============================================
   APPBAR BRAND LOCKUP - stacked logo + tagline
   Overrides the earlier simple brand rule.
   ============================================ */

.faq-page .faq-appbar-brand[b-8fhplmm56k] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    gap: 0;
    line-height: 1;
    flex-shrink: 0;
}

    .faq-page .faq-appbar-brand img[b-8fhplmm56k],
    .faq-page .faq-appbar-brand-mark[b-8fhplmm56k] {
        height: 24px;
        width: auto;
        display: block;
    }

.faq-page .faq-appbar-brand-tagline[b-8fhplmm56k] {
    font-size: 8.75px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary, #9aa0a6);
    margin-top: 4px;
    line-height: 1;
    white-space: nowrap;
}


/* ============================================
   APPBAR BREADCRUMB — see final pill-style rules
   at the end of this file. This section is
   intentionally empty.
   ============================================ */

@media (max-width: 640px) {
    .faq-page .faq-appbar-brand-tagline[b-8fhplmm56k] {
        display: none;
    }
}


/* ============================================
   SIDEBAR AUTHOR - INLINE SIGNATURE ICONS
   LinkedIn + About live tight next to the name.
   Replaces the old .sidebar-author-links row.
   ============================================ */

.faq-page .sidebar-author-nameline[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.faq-page .sidebar-author-icon[b-8fhplmm56k] {
    display: inline;
    color: var(--text-tertiary, #9aa0a6);
    text-decoration: none;
    font-size: 12.5px;
    vertical-align: baseline;
    transition: color var(--transition-base);
}

    .faq-page .sidebar-author-icon:hover[b-8fhplmm56k] {
        color: #fff;
        background: var(--accent);
        transform: translateY(-1px);
    }

/* Hide the old links row if any lingering markup renders it */
.faq-page .sidebar-author-links[b-8fhplmm56k] {
    display: none;
}


/* ============================================
   ADJACENT NAV - previous / next guide
   Sits between the article body and Meet Ainna.
   Keeps readers inside the Knowledge Hub.
   ============================================ */

.faq-page .adjacent-nav[b-8fhplmm56k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 56px 0 32px;
}

.faq-page .adjacent-card[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
    background: #fff;
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    min-height: 108px;
}

    .faq-page .adjacent-card:hover[b-8fhplmm56k] {
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light, rgba(0, 0, 0, 0.1)));
        box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
        transform: translateY(-2px);
    }

.faq-page .adjacent-card--empty[b-8fhplmm56k] {
    background: transparent;
    border: 1px dashed var(--border-light, rgba(0, 0, 0, 0.04));
    pointer-events: none;
    min-height: 108px;
}

.faq-page .adjacent-card--prev[b-8fhplmm56k] {
    align-items: flex-start;
    text-align: left;
}

.faq-page .adjacent-card--next[b-8fhplmm56k] {
    align-items: flex-end;
    text-align: right;
}

.faq-page .adjacent-label[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

    .faq-page .adjacent-label i[b-8fhplmm56k] {
        font-size: 10px;
    }

.faq-page .adjacent-title[b-8fhplmm56k] {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-heading, #2c3e50);
    line-height: 1.3;
    letter-spacing: -0.015em;
    transition: color var(--transition-base);
}

.faq-page .adjacent-card:hover .adjacent-title[b-8fhplmm56k] {
    color: var(--accent);
}

.faq-page .adjacent-desc[b-8fhplmm56k] {
    font-size: 12.5px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.5;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .faq-page .adjacent-nav[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .faq-page .adjacent-card--next[b-8fhplmm56k] {
        align-items: flex-start;
        text-align: left;
    }

    .faq-page .adjacent-card--empty[b-8fhplmm56k] {
        display: none;
    }
}


/* Legacy appbar-nav is no longer emitted; suppress any cached version */
.faq-page .faq-appbar-nav[b-8fhplmm56k] {
    display: none;
}


/* ============================================================
   =============================================================
   FOURTH PASS - <img> cover, tagline spacing, signature flow,
   prominent share row
   =============================================================
   ============================================================ */


/* ============================================
   HERO COVER - real <img> approach
   Replaces the ::before pseudo-element method
   that wasn't rendering reliably. Stacking:
   cover <img> first in DOM (behind), content
   via position:relative + z-index on top.
   ============================================ */

/* ============================================
   APPBAR TAGLINE - more v-space, lighter weight
   ============================================ */

.faq-page .faq-appbar-brand-tagline[b-8fhplmm56k] {
    font-weight: 500;
    margin-top: 7px;
    letter-spacing: 0.16em;
}


/* ============================================
   SIDEBAR AUTHOR - EDITORIAL SIGNATURE FLOW
   Replaces the old nameline layout. Bold name
   leads, credential flows as text, icons inline.
   ============================================ */

/* Override the old nameline if any cached markup uses it */
.faq-page .sidebar-author-nameline[b-8fhplmm56k] {
    display: contents;
}

.faq-page .sidebar-author-signature[b-8fhplmm56k] {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary, #5f6368);
}

    .faq-page .sidebar-author-signature .sidebar-author-name[b-8fhplmm56k] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-heading, #2c3e50);
        text-decoration: none;
        letter-spacing: -0.015em;
        transition: color var(--transition-base);
        margin-right: 4px;
    }

        .faq-page .sidebar-author-signature .sidebar-author-name:hover[b-8fhplmm56k] {
            color: var(--accent);
        }

.faq-page .sidebar-author-credential[b-8fhplmm56k] {
    color: var(--text-secondary, #5f6368);
}

    .faq-page .sidebar-author-credential em[b-8fhplmm56k] {
        font-style: italic;
        color: var(--text-heading, #2c3e50);
        font-weight: 500;
    }

/* Icon cluster sits inline at the end of the signature */
.faq-page .sidebar-author-icons[b-8fhplmm56k] {
    margin-left: 5px;
}

/* Hide old titles block if any lingering markup renders it */
.faq-page .sidebar-author-titles[b-8fhplmm56k] {
    display: none;
}


/* ============================================
   SHARE ROW - prominent editorial prompt
   Replaces the thin icon row with a proper
   invitation + labeled buttons.
   ============================================ */

.faq-page .social-sharing--prominent[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    margin: 40px 0 0;
    background: color-mix(in srgb, var(--accent) 3%, var(--surface, #f8f9fa));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
    flex-wrap: wrap;
}

.faq-page .sharing-prompt[b-8fhplmm56k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.faq-page .sharing-prompt-line[b-8fhplmm56k] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading, #2c3e50);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.faq-page .sharing-prompt-sub[b-8fhplmm56k] {
    font-size: 13px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.4;
}

.faq-page .social-sharing--prominent .sharing-buttons[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.faq-page .social-sharing--prominent .share-btn[b-8fhplmm56k] {
    /* Unset the legacy 36x36 fixed dimensions from the icon-only share-btn rule
       so the labeled prominent variant can size to its content. */
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    border: 1px solid var(--border-strong, #d0d5dd);
    background: #fff;
    color: var(--text-heading, #2c3e50);
    cursor: pointer;
    transition: all var(--transition-base);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
}

    .faq-page .social-sharing--prominent .share-btn i[b-8fhplmm56k] {
        font-size: 13px;
    }

    .faq-page .social-sharing--prominent .share-btn:hover[b-8fhplmm56k] {
        border-color: var(--accent);
        color: var(--accent);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent);
    }

.faq-page .social-sharing--prominent .share-linkedin:hover[b-8fhplmm56k] {
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25);
}

.faq-page .social-sharing--prominent .share-copy .fa-check[b-8fhplmm56k] {
    color: var(--success, #16a34a);
}

@media (max-width: 640px) {
    .faq-page .social-sharing--prominent[b-8fhplmm56k] {
        padding: 22px;
        gap: 18px;
    }

        .faq-page .social-sharing--prominent .sharing-buttons[b-8fhplmm56k] {
            width: 100%;
            justify-content: stretch;
        }

        .faq-page .social-sharing--prominent .share-btn[b-8fhplmm56k] {
            flex: 1;
            justify-content: center;
        }
}


/* ============================================================
   =============================================================
   COVER IMAGE — fully removed. Multiple iterations of blur/opacity
   tuning did not produce a result that enhanced the hero; the
   decision is to leave the hero as pure typography + meta.
   =============================================================
   ============================================================ */


/* ============================================================
   APPBAR BREADCRUMB AS CENTERED PILL
   
   Overrides the earlier flat breadcrumb to give it a contained,
   discrete panel. Matches the appbar CTA height so the three
   elements (brand lockup, breadcrumb pill, CTA) sit at the same
   visual weight.
   ============================================================ */

.faq-page .faq-appbar-breadcrumb[b-8fhplmm56k] {
    flex: 0 1 auto;
    margin: 0 auto;
    padding: 0 18px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--accent) 4%, rgba(0, 0, 0, 0.025));
    border: 1px solid color-mix(in srgb, var(--accent) 10%, rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-tertiary, #9aa0a6);
    letter-spacing: -0.005em;
    max-width: 520px;
    overflow: hidden;
    transition: background var(--transition-base), border-color var(--transition-base);
}

    .faq-page .faq-appbar-breadcrumb:hover[b-8fhplmm56k] {
        background: color-mix(in srgb, var(--accent) 7%, rgba(0, 0, 0, 0.03));
        border-color: color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.06));
    }

    .faq-page .faq-appbar-breadcrumb a[b-8fhplmm56k] {
        color: var(--text-secondary, #5f6368);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        transition: color var(--transition-base);
    }

        .faq-page .faq-appbar-breadcrumb a:hover[b-8fhplmm56k] {
            color: var(--accent);
        }

    .faq-page .faq-appbar-breadcrumb i[b-8fhplmm56k] {
        color: color-mix(in srgb, var(--accent) 40%, var(--text-tertiary, #9aa0a6));
        font-size: 8px;
        flex-shrink: 0;
    }

    .faq-page .faq-appbar-breadcrumb span[aria-current="page"][b-8fhplmm56k] {
        color: var(--text-heading, #2c3e50);
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* At narrower widths, hide the Home anchor to keep the pill compact */
@media (max-width: 900px) {
    .faq-page .faq-appbar-breadcrumb[b-8fhplmm56k] {
        max-width: 340px;
        padding: 0 14px;
    }
}

@media (max-width: 640px) {
    .faq-page .faq-appbar-breadcrumb[b-8fhplmm56k] {
        display: none;
    }
}

/* ============================================
   PRODUCT MOMENT - inline conversion banner.
   Compact, premium, message and CTA led. The
   whole card is a single link; the gradient
   pill is the focal affordance.
   ============================================ */

.faq-page .product-moment[b-8fhplmm56k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 52px 0;
    padding: 24px 30px;
    border-radius: var(--radius-xl, 20px);
    background: linear-gradient(135deg, #14081c 0%, #1e0d2a 55%, #2a0f20 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    box-shadow: 0 12px 34px rgba(10, 0, 20, 0.30);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .faq-page .product-moment[b-8fhplmm56k]::after {
        content: '';
        position: absolute;
        right: -50px;
        top: -70px;
        width: 260px;
        height: 220px;
        pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
    }

    .faq-page .product-moment:hover[b-8fhplmm56k] {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--accent) 50%, transparent);
        box-shadow: 0 18px 44px rgba(240, 12, 113, 0.24);
    }

.faq-page .product-moment-body[b-8fhplmm56k] {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.faq-page .product-moment-eyebrow[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, #ffffff);
    margin-bottom: 10px;
}

    .faq-page .product-moment-eyebrow i[b-8fhplmm56k] {
        font-size: 11px;
    }

.faq-page .product-moment-hook[b-8fhplmm56k] {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

.faq-page .product-moment-sub[b-8fhplmm56k] {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.64);
    margin: 7px 0 0;
    max-width: 48ch;
}

.faq-page .product-moment-cta[b-8fhplmm56k] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: 9999px;
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b 0%, #c80670 100%));
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(240, 12, 113, 0.42);
    transition: box-shadow 0.2s ease;
}

    .faq-page .product-moment-cta i[b-8fhplmm56k] {
        font-size: 0.8125rem;
        transition: transform 0.2s ease;
    }

.faq-page .product-moment:hover .product-moment-cta[b-8fhplmm56k] {
    box-shadow: 0 12px 32px rgba(240, 12, 113, 0.55);
}

    .faq-page .product-moment:hover .product-moment-cta i[b-8fhplmm56k] {
        transform: translateX(4px);
    }

.faq-page .product-moment:focus-visible[b-8fhplmm56k] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .faq-page .product-moment[b-8fhplmm56k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 24px 22px;
        margin: 38px 0;
    }

    .faq-page .product-moment-cta[b-8fhplmm56k] {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-page .product-moment[b-8fhplmm56k],
    .faq-page .product-moment-cta[b-8fhplmm56k],
    .faq-page .product-moment-cta i[b-8fhplmm56k] {
        transition: none;
    }

        .faq-page .product-moment:hover[b-8fhplmm56k] {
            transform: none;
        }
}
/* ============================================================
   Additions 2026-09-05 - appended to AinnaFAQSEOpage.razor.css
   New elements rendered by the updated template plus three
   restyles requested in review: the "What you'll learn" strip
   (neutral palette instead of the cool tint), the methodology
   line inside the hero meta strip, and the sidebar CTA spacing.
   Later rules win over the originals above at equal specificity.
   ============================================================ */

/* ---- "What you'll learn": quiet card on the page surface, no accent band ---- */
.faq-page .what-you-learn[b-8fhplmm56k] {
    background: var(--background-primary);
    border-top: 0;
    border-bottom: 1px solid var(--border-light);
    padding: 28px 32px;
}

.faq-page .wyl-inner[b-8fhplmm56k] {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 6px 28px;
    align-items: start;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

.faq-page .wyl-label[b-8fhplmm56k] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-top: 3px;
    white-space: nowrap;
}

    .faq-page .wyl-label i[b-8fhplmm56k] {
        font-size: 13px;
        color: var(--text-tertiary);
    }

.faq-page .wyl-list[b-8fhplmm56k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 32px;
}

    .faq-page .wyl-list li[b-8fhplmm56k] {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-secondary);
        line-height: 1.5;
        padding-left: 22px;
        position: relative;
    }

        .faq-page .wyl-list li[b-8fhplmm56k]::before {
            content: "\f00c"; /* Font Awesome check */
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 3px;
            width: auto;
            height: auto;
            border-radius: 0;
            background: none;
            font-size: 11px;
            color: var(--accent);
            opacity: 0.85;
        }

@media (max-width: 768px) {
    .faq-page .what-you-learn[b-8fhplmm56k] {
        padding: 20px;
    }

    .faq-page .wyl-inner[b-8fhplmm56k] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px;
    }

    .faq-page .wyl-list[b-8fhplmm56k] {
        grid-template-columns: 1fr;
    }
}

/* ---- Methodology line inside the hero meta strip ---- */
.faq-page .hero-meta-strip-method[b-8fhplmm56k] {
    color: var(--text-secondary);
    font-weight: 500;
}

    .faq-page .hero-meta-strip-method i[b-8fhplmm56k] {
        color: var(--accent);
        font-size: 11px;
        margin-right: 2px;
    }

/* ---- Sidebar CTA: breathing room under the link ---- */
.faq-page .sidebar-cta[b-8fhplmm56k] {
    padding: 20px 24px 26px;
}

.faq-page .sidebar-cta-desc[b-8fhplmm56k] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-4);
    margin: 0 0 14px;
}

.faq-page .sidebar-cta-link[b-8fhplmm56k] {
    margin: 2px 0 4px;
}

/* ---- Per-section inline CTA reuses the product-moment card ---- */
.faq-page .product-moment--inline[b-8fhplmm56k] {
    margin: 36px 0 8px;
}

/* ---- Secondary action inside the dark closing card ---- */
.faq-page .meet-ainna-secondary[b-8fhplmm56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 18px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: gap var(--transition-base), color var(--transition-base);
}

    .faq-page .meet-ainna-secondary:hover[b-8fhplmm56k] {
        color: #ffffff;
        gap: 10px;
    }

    .faq-page .meet-ainna-secondary i[b-8fhplmm56k] {
        font-size: 11px;
    }

@media (max-width: 640px) {
    .faq-page .meet-ainna-secondary[b-8fhplmm56k] {
        margin-left: 0;
        margin-top: 10px;
        display: flex;
    }
}

/* ---- Anchor link on each question heading ---- */
.faq-page .guide-entry-question[b-8fhplmm56k] {
    position: relative;
}

.faq-page .entry-anchor[b-8fhplmm56k] {
    margin-left: 8px;
    font-weight: 500;
    font-size: 0.85em;
    color: var(--accent);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

    .faq-page .guide-entry-question:hover .entry-anchor[b-8fhplmm56k],
    .faq-page .entry-anchor:focus-visible[b-8fhplmm56k] {
        opacity: 0.75;
    }

    .faq-page .entry-anchor:hover[b-8fhplmm56k] {
        opacity: 1;
    }

@media (hover: none) {
    .faq-page .entry-anchor[b-8fhplmm56k] {
        opacity: 0.45;
    }
}

/* ---- Icon before the related-card title ---- */
.faq-page .resource-card-icon[b-8fhplmm56k] {
    color: var(--accent);
    font-size: 0.85em;
    margin-right: 6px;
}

/* ---- Not-found suggestions ---- */
.faq-not-found code[b-8fhplmm56k] {
    font-size: 0.9em;
    background: var(--background-secondary, #f3f0ec);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
}

.faq-not-found .not-found-lead[b-8fhplmm56k] {
    margin: 22px 0 8px;
    font-weight: 600;
    color: var(--text-heading);
}

.faq-not-found .not-found-suggestions[b-8fhplmm56k] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .faq-not-found .not-found-suggestions a[b-8fhplmm56k] {
        color: var(--accent);
        font-weight: 600;
        text-decoration: none;
    }

        .faq-not-found .not-found-suggestions a:hover[b-8fhplmm56k] {
            text-decoration: underline;
        }


/* ============================================
   2026-09-05: promo placement
   - the first product moment renders after the first answer (class product-moment--early)
   - below 1024px the sidebar is no longer hidden: only its CTA card shows, above the content
   ============================================ */

.faq-page .product-moment--early[b-8fhplmm56k] {
    margin: 28px 0 36px;
}

@media (max-width: 1024px) {
    .faq-page .faq-sidebar[b-8fhplmm56k] {
        display: block;
    }

    .faq-page .sidebar-sticky[b-8fhplmm56k] {
        position: static;
        top: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

        /* keep the CTA card, hide the table of contents, author box and subscribe form */
        .faq-page .sidebar-sticky > :not(.sidebar-cta)[b-8fhplmm56k] {
            display: none;
        }

    .faq-page .sidebar-cta[b-8fhplmm56k] {
        margin: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 20px 22px 24px;
    }

    .faq-page .faq-layout[b-8fhplmm56k] {
        gap: 28px;
    }
}
/* /Components/AinnaPages/AinnaLandingNew.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   AinnaLanding.razor.css — v2 migrated
   Removed 8 foundation shadow tokens from .ainna-landing var block:
     --color-accent-1/2/3, --color-text, --color-text-muted,
     --color-text-light, --color-bg-white, --color-border.
   Renamed throughout:
     --color-accent-1 → var(--accent)
     --color-text → var(--text-heading)
     --color-text-muted → var(--text-secondary)
     --color-text-light → var(--text-tertiary)
     --color-bg-white → var(--background-primary)
     --color-border → var(--border-color)
   --gradient-accent updated to use var(--accent).
   Font-family → var(--font-family-primary).
   Kept: --color-bg-warm/cool/dark, --color-border-light,
   --container-*, --radius-*, --shadow-*, --gradient-accent,
   --transition-base. All hero dark-surface hardcoded colors,
   all rgba accent tints, all animations/keyframes, all
   responsive breakpoints, reduced-motion query preserved.
   ═══════════════════════════════════════════════════════ */

/* ── Metric-tuned local fallbacks ──
   Shown until the real webfonts arrive; size-adjust + overrides make the
   fallback occupy identical space, so the font swap repaints without reflow.
   Values computed from the fonts’ own metrics (Space Grotesk / Inter vs Arial). ── */
@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 109.69%;
    ascent-override: 89.71%;
    descent-override: 26.62%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
}

.ainna-landing[b-vy3iar68mb] {
    /* Section canvases.
       Lights: paper (warm) / white / mist (cool), each carrying a faint colour
       wash so seams read and the page never goes flat.
       Darks: one base, lit by a violet lift, a magenta bloom, and a teal floor
       that echoes the product's own dark UI. */
    --color-bg-warm: #f4f0ea;
    --color-bg-cool: #f4f2fa;
    --color-bg-paper-white: #ffffff;
    --color-bg-dark: #0b0a14;
    --wash-pink: color-mix(in srgb, var(--accent) 7.5%, transparent);
    --wash-violet: rgba(120, 70, 240, 0.085);
    --wash-peach: rgba(255, 140, 90, 0.11);
    --lift-violet: rgba(138, 74, 232, 0.42);
    --bloom-magenta: color-mix(in srgb, var(--accent) 20%, transparent);
    --floor-teal: rgba(10, 62, 74, 0.70);
    --horizon: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-hover) 10%, transparent) 20%, color-mix(in srgb, var(--accent-hover) 55%, transparent) 50%, color-mix(in srgb, var(--accent-hover) 10%, transparent) 80%, transparent 100%) top center / 100% 1px no-repeat;
    --color-bg-dark-glow: radial-gradient(ellipse 58% 72% at 50% 0%, var(--lift-violet) 0%, transparent 60%), linear-gradient(180deg, #120b1f 0%, #0b0a14 55%, #0b0a14 100%);
    --color-border-light: #f0eef3;
    --container-max: 1200px;
    --container-wide: 1320px;
    --container-narrow: 960px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--color-accent-2, var(--accent-hover)));
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-family-primary: 'Inter', 'Inter Fallback', system-ui, sans-serif;
    --font-family-heading: 'Space Grotesk', 'Space Grotesk Fallback', var(--font-family-primary, 'Inter', 'Inter Fallback', system-ui, sans-serif);
    /* accent-glow-* and on-dark-btn-* tokens now live in design_tokens.css */
    font-family: var(--font-family-primary);
    color: var(--text-heading);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

    .ainna-landing h1[b-vy3iar68mb],
    .ainna-landing h2[b-vy3iar68mb],
    .ainna-landing h3[b-vy3iar68mb] {
        font-family: var(--font-family-heading);
    }

    .ainna-landing *[b-vy3iar68mb],
    .ainna-landing *[b-vy3iar68mb]::before,
    .ainna-landing *[b-vy3iar68mb]::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .ainna-landing img[b-vy3iar68mb] {
        max-width: 100%;
        display: block;
    }

    .ainna-landing a[b-vy3iar68mb] {
        text-decoration: none;
        color: inherit;
    }

    /* ————————————— CONTAINER ————————————— */

    .ainna-landing .container[b-vy3iar68mb] {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 32px;
        width: 100%;
    }

@media (max-width: 768px) {
    .ainna-landing .container[b-vy3iar68mb] {
        padding: 0 20px;
    }
}

/* ————————————— SHARED SECTION PATTERNS ————————————— */
/* PATCH 05: Spacing & typography polish applied */

.ainna-landing .section-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
}

/* Atmospheric glow behind headers on light sections.
       Uses a real DOM element because ::before pseudo-elements were
       not rendering (clipped by parent overflow:hidden + stacking).
       Currently disabled — the pink splash competed with the new
       magenta-violet section palette. Markup preserved so it can
       be reactivated with a non-pink glow if needed. */
.ainna-landing .header-glow[b-vy3iar68mb] {
    display: none;
}

/* Ensure all header children render above the glow */
.ainna-landing .section-header > *:not(.header-glow)[b-vy3iar68mb],
.ainna-landing .problem-header > *:not(.header-glow)[b-vy3iar68mb],
.ainna-landing .capabilities-header > *:not(.header-glow)[b-vy3iar68mb],
.ainna-landing .process-header > *:not(.header-glow)[b-vy3iar68mb] {
    position: relative;
    z-index: 1;
}

.ainna-landing .section-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-heading);
    margin-bottom: 18px;
    letter-spacing: -0.04em;
}

.ainna-landing .cta-note[b-vy3iar68mb] {
    font-size: var(--text-base);
    margin-top: 12px;
}

    .ainna-landing .cta-note.on-dark[b-vy3iar68mb] {
        color: rgba(255,255,255,0.55);
    }

    .ainna-landing .cta-note.on-light[b-vy3iar68mb] {
        color: var(--text-tertiary);
        margin-top: 24px;
    }

    .ainna-landing .cta-note .secure-note[b-vy3iar68mb] {
        opacity: 0.8;
    }

        .ainna-landing .cta-note .secure-note i[b-vy3iar68mb] {
            font-size: 0.9em;
            margin-right: 3px;
        }

@media (max-width: 768px) {
    .ainna-landing .section-header[b-vy3iar68mb] {
        margin-bottom: 40px;
    }
}

/* ————————————— SECTION PILL (replaces section-badge on upgraded sections) ————————————— */

.ainna-landing .section-pill[b-vy3iar68mb] {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.ainna-landing .section-pill-inner[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-secondary);
    position: relative;
    box-shadow: none;
}

/* No shimmer — pills are labels, not interactive elements */

@keyframes ainnaPillShimmer-b-vy3iar68mb {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 100%;
    }
}

.ainna-landing .section-pill-dot[b-vy3iar68mb] {
    display: none;
}

.ainna-landing .section-pill--dark .section-pill-inner[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .ainna-landing .section-pill[b-vy3iar68mb] {
        margin-bottom: 24px;
    }

    .ainna-landing .section-pill-inner[b-vy3iar68mb] {
        font-size: var(--text-xs);
        letter-spacing: 1.5px;
        padding: 6px 16px;
        gap: 8px;
    }
}

/* ————————————— SECTION-NAV (reusable bottom-of-section chevron) ————————————— */

.ainna-landing .section-nav[b-vy3iar68mb] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding-bottom: 28px;
    z-index: 4;
    pointer-events: none;
    /* Visible by default; JS adds .section-nav-init to enable entrance animation */
    opacity: 0.8;
    transition: opacity 0.6s ease;
}

    /* JS-enhanced: start hidden, reveal on scroll */
    .ainna-landing .section-nav.section-nav-init[b-vy3iar68mb] {
        opacity: 0;
    }

    .ainna-landing .section-nav.visible[b-vy3iar68mb] {
        opacity: 1;
    }

.ainna-landing .section-nav-link[b-vy3iar68mb] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(26, 26, 46, 0.08);
    background: rgba(26, 26, 46, 0.02);
    color: rgba(26, 26, 46, 0.22);
}

    .ainna-landing .section-nav-link:hover[b-vy3iar68mb] {
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
        background: color-mix(in srgb, var(--accent) 5%, transparent);
        color: var(--accent);
        transform: translateY(2px);
        box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .ainna-landing .section-nav-link[b-vy3iar68mb]::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--accent) 0%, transparent);
        transition: all 0.35s ease;
    }

    .ainna-landing .section-nav-link:hover[b-vy3iar68mb]::before {
        border-color: color-mix(in srgb, var(--accent) 10%, transparent);
        inset: -6px;
    }

.ainna-landing .section-nav-chevron[b-vy3iar68mb] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    animation: ainnaSectionNavBounce-b-vy3iar68mb 2.8s ease-in-out infinite;
}

@keyframes ainnaSectionNavBounce-b-vy3iar68mb {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

.ainna-landing .section-nav--dark .section-nav-link[b-vy3iar68mb] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.2);
}

    .ainna-landing .section-nav--dark .section-nav-link:hover[b-vy3iar68mb] {
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: color-mix(in srgb, var(--accent) 80%, transparent);
        box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 12%, transparent);
    }

.ainna-landing .section-nav.section-nav-init.visible .section-nav-link[b-vy3iar68mb] {
    animation: ainnaSectionNavEntrance-b-vy3iar68mb 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes ainnaSectionNavEntrance-b-vy3iar68mb {
    0% {
        transform: translateY(-6px);
        opacity: 0.5;
    }

    60% {
        transform: translateY(2px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .ainna-landing .section-nav[b-vy3iar68mb] {
        padding-bottom: 20px;
    }

    .ainna-landing .section-nav-link[b-vy3iar68mb] {
        width: 32px;
        height: 32px;
    }

    .ainna-landing .section-nav-chevron[b-vy3iar68mb] {
        width: 12px;
        height: 12px;
    }
}

/* ————————————— SCROLL REVEAL (progressive enhancement) ————————————— */
/* JS adds .scroll-reveal-init to hide elements, then .visible on scroll.
   Without JS, everything stays visible. Per-element overrides (e.g.
   .demo-chat-frame.scroll-reveal-init using translateX) take precedence. */

.ainna-landing .scroll-reveal-init[b-vy3iar68mb] {
    opacity: 0;
    transform: translateY(16px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

    .ainna-landing .scroll-reveal-init.visible[b-vy3iar68mb] {
        opacity: 1 !important;
        transform: none !important;
    }

/* ————————————— BUTTONS ————————————— */

/* Landing buttons are self-contained — no dependency on the global
   .btn system. They share design tokens (--gradient-cta, --accent-glow-*,
   --on-dark-btn-*) but own their own structure, sizing, and states.
   The global button system is for in-app UI. */

/* ── Shared reset for all landing buttons ── */
.ainna-landing .btn-cta-primary[b-vy3iar68mb], .ainna-landing .pv2-trial-btn[b-vy3iar68mb], .ainna-landing .sticky-cta-link[b-vy3iar68mb] {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--font);
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .ainna-landing .btn-cta-primary:focus-visible[b-vy3iar68mb], .ainna-landing .pv2-trial-btn:focus-visible[b-vy3iar68mb], .ainna-landing .sticky-cta-link:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* ── Signing-in busy state ── */

.ainna-landing .signing-in[b-vy3iar68mb] {
    cursor: wait !important;
    opacity: 0.65;
    position: relative;
}

    .ainna-landing .signing-in[b-vy3iar68mb]::after {
        content: '';
        display: inline-block;
        width: 0.9em;
        height: 0.9em;
        margin-left: 0.5em;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: ainnaSignInSpin-b-vy3iar68mb 0.6s linear infinite;
        flex-shrink: 0;
    }

/* On-dark secondary buttons — darker spinner */
.ainna-landing .pv2-path-btn.signing-in[b-vy3iar68mb]::after {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
}

/* Nav button — smaller, accent spinner on scrolled */
.ainna-landing .btn-cta-nav.signing-in[b-vy3iar68mb]::after {
    width: 0.8em;
    height: 0.8em;
}

@keyframes ainnaSignInSpin-b-vy3iar68mb {
    to {
        transform: rotate(360deg);
    }
}

/* ── Hero CTA — largest, most prominent ── */

/* ── Section CTA — mid-page actions ── */

.ainna-landing .btn-cta-primary[b-vy3iar68mb] {
    gap: 10px;
    padding: 14px 32px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    background: var(--gradient-cta);
    border-radius: var(--radius-pill);
    box-shadow: var(--accent-glow-sm);
}

    .ainna-landing .btn-cta-primary:hover[b-vy3iar68mb] {
        transform: translateY(-2px);
        box-shadow: var(--accent-glow);
    }

    .ainna-landing .btn-cta-primary i[b-vy3iar68mb] {
        font-size: 0.85em;
    }

    .ainna-landing .btn-cta-primary.light[b-vy3iar68mb] {
        background: #fff;
        color: var(--accent);
        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
    }

        .ainna-landing .btn-cta-primary.light:hover[b-vy3iar68mb] {
            box-shadow: 0 6px 24px rgba(255, 255, 255, 0.3);
        }

/* ── Pricing trial CTA — compact gradient ── */

.ainna-landing .pv2-trial-btn[b-vy3iar68mb] {
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: #fff;
    background: var(--gradient-cta);
    border-radius: var(--radius-pill);
    box-shadow: var(--accent-glow-sm);
    flex-shrink: 0;
}

    .ainna-landing .pv2-trial-btn:hover[b-vy3iar68mb] {
        transform: translateY(-1px);
        box-shadow: var(--accent-glow);
    }

    .ainna-landing .pv2-trial-btn i[b-vy3iar68mb] {
        font-size: var(--text-xs);
    }

/* ── Pricing path — dark solid, professional weight ── */

/* Accent path variant — same treatment */

/* ── Enterprise submit — form action ── */

/* ── Sticky mobile CTA ── */

.ainna-landing .sticky-cta-link[b-vy3iar68mb] {
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: #fff;
    background: var(--gradient-cta);
    border-radius: var(--radius-pill);
    box-shadow: var(--accent-glow);
}

    .ainna-landing .sticky-cta-link:active[b-vy3iar68mb] {
        transform: scale(0.98);
    }

    .ainna-landing .sticky-cta-link i[b-vy3iar68mb] {
        font-size: var(--text-xs);
    }

/* ================================================================
   NAVIGATION
   ================================================================ */

.ainna-landing .preview-banner[b-vy3iar68mb] {
    background: var(--gradient-accent);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

    .ainna-landing .preview-banner .banner-icon[b-vy3iar68mb] {
        margin-right: 6px;
    }
/* ================================================================
   NAVBAR — Streamlined, tagline aligned, upgraded styling
   ================================================================ */

/* ── Base navbar — ghost state: transparent, grayscale, minimal ── */

.ainna-landing .navbar[b-vy3iar68mb] {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.4s ease;
    background: transparent;
}

    /* Logo: always visible (no video in hero) */
    .ainna-landing .navbar .logo img[b-vy3iar68mb] {
        transition: opacity 0.4s ease, filter 0.4s ease, max-height 0.35s ease;
        opacity: 1;
        filter: grayscale(0);
        max-height: 28px;
    }

    .ainna-landing .navbar.scrolled .logo img[b-vy3iar68mb] {
        opacity: 1;
        filter: grayscale(0);
        max-height: 28px;
    }

    /* Tagline: hidden in hero (eyebrow carries it), appears on scroll */
    .ainna-landing .navbar .logo-tagline[b-vy3iar68mb] {
        transition: opacity 0.4s ease, font-size 0.3s ease, letter-spacing 0.3s ease, max-height 0.35s ease;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        font-size: 9px;
        font-weight: var(--font-weight-semibold);
        letter-spacing: 1.8px;
        color: var(--text-tertiary);
    }

    .ainna-landing .navbar.scrolled .logo-tagline[b-vy3iar68mb] {
        opacity: 0.6;
        max-height: 20px;
        font-size: 9px;
        letter-spacing: 1.8px;
        color: var(--text-tertiary);
    }

    /* Scrolled: frosted glass */
    .ainna-landing .navbar.scrolled[b-vy3iar68mb] {
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow-sm);
        padding: 10px 0;
    }

.ainna-landing .nav-container[b-vy3iar68mb] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Brand: logo + tagline ── */

.ainna-landing .nav-brand[b-vy3iar68mb] {
    display: flex;
    align-items: center;
}

.ainna-landing .logo[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: gap 0.35s ease;
}

    .ainna-landing .logo img[b-vy3iar68mb] {
        height: 28px;
        width: auto;
        object-fit: contain;
    }

/* Gap between logo and tagline */
.ainna-landing .navbar.scrolled .logo[b-vy3iar68mb] {
    gap: 6px;
}

.ainna-landing .logo .logo-dark[b-vy3iar68mb] {
    display: none;
}

.ainna-landing .navbar.scrolled .logo .logo-dark[b-vy3iar68mb] {
    display: none;
}

.ainna-landing .navbar.scrolled .logo .logo-light[b-vy3iar68mb] {
    display: block;
}

/* Tagline — base properties only; hero/scrolled states set above */
.ainna-landing .logo-tagline[b-vy3iar68mb] {
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 2px;
}

/* ── Right side: menu links + CTA ── */

.ainna-landing .nav-actions[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ainna-landing .nav-menu[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 8px;
    margin: 0;
    padding: 0;
}

    .ainna-landing .nav-menu a[b-vy3iar68mb] {
        display: inline-flex;
        align-items: center;
        padding: 7px 16px;
        font-size: 13px;
        font-weight: var(--font-weight-medium);
        line-height: 1.4;
        color: var(--text-secondary);
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        transition: all var(--transition-base);
        text-decoration: none;
    }

        .ainna-landing .nav-menu a:hover[b-vy3iar68mb] {
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 4%, transparent);
            border-color: color-mix(in srgb, var(--accent) 12%, transparent);
        }

.ainna-landing .navbar.scrolled .nav-menu a[b-vy3iar68mb] {
    color: var(--text-secondary);
}

    .ainna-landing .navbar.scrolled .nav-menu a:hover[b-vy3iar68mb] {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        border-color: color-mix(in srgb, var(--accent) 12%, transparent);
    }

/* ── Built For dropdown ── */

.ainna-landing .navbar.scrolled .nav-dropdown-trigger[b-vy3iar68mb] {
    color: var(--text-secondary);
}

    .ainna-landing .navbar.scrolled .nav-dropdown-trigger:hover[b-vy3iar68mb],
    .ainna-landing .navbar.scrolled .nav-dropdown:hover .nav-dropdown-trigger[b-vy3iar68mb] {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        border-color: color-mix(in srgb, var(--accent) 12%, transparent);
    }

/* Panel */

/* Invisible bridge so hover doesn't break between trigger and panel */

/* Active persona indicator */
.ainna-landing .nav-dropdown-panel a.active[b-vy3iar68mb] {
    background: var(--background-secondary);
    color: var(--text-heading);
}

    .ainna-landing .nav-dropdown-panel a.active i[b-vy3iar68mb] {
        color: var(--accent);
    }

/* Dismissed state — overrides hover visibility after click */

/* Responsive — hide dropdown trigger on very small screens, keep links in mobile menu */

/* ── CTA button ── */

.ainna-landing .btn-cta-nav[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--radius-pill);
    transition: all var(--transition-base);
}

.ainna-landing .navbar.scrolled .btn-cta-nav[b-vy3iar68mb] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.ainna-landing .btn-cta-nav:hover[b-vy3iar68mb] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ainna-landing .navbar.scrolled .btn-cta-nav:hover[b-vy3iar68mb] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Referral banner + nav gap fix ──────────────────────────────
   When the navbar enters its .scrolled state, any referral banner
   has already scrolled off the viewport, so the inline top:40px
   (set when banner is active) becomes a visible gap. Force the
   scrolled navbar to top:0 to close it.
   ─────────────────────────────────────────────────────────────── */
.ainna-landing .navbar.scrolled[b-vy3iar68mb] {
    top: 0 !important;
}

/* ── Mobile menu button ── */

.ainna-landing .mobile-menu-btn[b-vy3iar68mb] {
    display: none;
    background: none;
    border: none;
    color: var(--text-heading);
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
}

.ainna-landing .navbar.scrolled .mobile-menu-btn[b-vy3iar68mb] {
    color: var(--text-heading);
}

/* ── Nav button label (text beside icon) ─────────────────────────
   Wrapped in .btn-label so it can collapse to icon-only on narrow
   screens without touching markup structure. */

.ainna-landing .btn-cta-nav .btn-label[b-vy3iar68mb] {
    display: inline;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .ainna-landing .nav-container[b-vy3iar68mb] {
        padding: 0 20px;
        align-items: center;
    }

    .ainna-landing .logo-tagline[b-vy3iar68mb] {
        display: none;
    }

    /* Inline nav links move into the hamburger panel on mobile */
    .ainna-landing .nav-menu[b-vy3iar68mb] {
        display: none;
    }

    .ainna-landing .btn-cta-nav[b-vy3iar68mb] {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Hamburger visible on mobile — opens the existing mobile-menu-panel */
    .ainna-landing .mobile-menu-btn[b-vy3iar68mb] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ainna-landing .nav-actions[b-vy3iar68mb] {
        align-items: center;
        padding-bottom: 0;
        gap: 10px;
    }

    .ainna-landing .nav-brand[b-vy3iar68mb] {
        align-items: center;
    }

    .ainna-landing .logo[b-vy3iar68mb] {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    /* Icon-only primary sign-in on narrow screens */
    .ainna-landing .btn-cta-nav[b-vy3iar68mb] {
        padding: 8px 12px;
        font-size: 0;
        gap: 0;
    }

        .ainna-landing .btn-cta-nav i[b-vy3iar68mb] {
            font-size: 15px;
        }

        .ainna-landing .btn-cta-nav .btn-label[b-vy3iar68mb] {
            display: none;
        }

    .ainna-landing .nav-actions[b-vy3iar68mb] {
        gap: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ainna-landing .logo-tagline[b-vy3iar68mb] {
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .ainna-landing .nav-actions[b-vy3iar68mb] {
        gap: 8px;
    }
}

/* ================================================================
   HERO BACKGROUND — Immersive, layered depth
   
   Layers (back to front):
     1. .hero-bg         — deep chromatic base + dot grid + vignette
     2. .hero-bg-orb     — large warm orb (magenta/rose), slow drift
     3. .hero-bg-orb-2   — cool orb (violet/electric), counter-drift
     4. .hero-bg-aurora   — luminous ribbon sweep
     5. .hero-bg::after   — noise grain
   ================================================================ */

/* ── Layer 1: chromatic base ── */

/* Noise — film grain */

/* ── Layer 2: warm orb — diffuse magenta wash ── */

/* ── Layer 3: second orb — diffuse rose, wider spread ── */

/* ── Layer 4: aurora ribbon — sweeping luminous band ── */

/* ── Orb animations — wide roaming, atmospheric drift ── */

@keyframes ainnaOrbWarm-b-vy3iar68mb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    20% {
        transform: translate(120px, -60px) scale(1.06);
        opacity: 1;
    }

    40% {
        transform: translate(80px, 50px) scale(0.94);
        opacity: 0.85;
    }

    60% {
        transform: translate(-60px, 30px) scale(1.08);
        opacity: 0.95;
    }

    80% {
        transform: translate(-100px, -40px) scale(0.97);
        opacity: 0.85;
    }
}

@keyframes ainnaOrbCool-b-vy3iar68mb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

    20% {
        transform: translate(-80px, -50px) scale(1.1);
        opacity: 1;
    }

    40% {
        transform: translate(50px, 70px) scale(0.92);
        opacity: 0.8;
    }

    60% {
        transform: translate(90px, -30px) scale(1.05);
        opacity: 0.9;
    }

    80% {
        transform: translate(-50px, 40px) scale(0.96);
        opacity: 0.75;
    }
}

@keyframes ainnaAuroraSweep-b-vy3iar68mb {
    0%, 100% {
        background-position: 0% 0%;
        opacity: 0.7;
    }

    50% {
        background-position: 100% 100%;
        opacity: 1;
    }
}

/* ================================================================
   SECTION 1: HERO — Layout, typography, typed headline system
   ================================================================ */

.ainna-landing .hero-vision[b-vy3iar68mb] {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 32px 100px;
    overflow: hidden;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   HERO TYPO VARIANT — Typography-forward, centered
   Warm canvas (#f3f0ec). Statement, CTA, then one product window.
   Applied via .hero-vision--typo modifier.
   ═══════════════════════════════════════════════════════ */

.ainna-landing .hero-vision--typo[b-vy3iar68mb] {
    background: var(--color-bg-warm, #f3f0ec);
    min-height: auto;
    padding: clamp(80px, 12vh, 120px) 32px clamp(48px, 6vh, 72px);
    text-align: center;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

    /* Atmospheric warmth — twin diffused orbs */
    .ainna-landing .hero-vision--typo[b-vy3iar68mb]::before {
        content: '';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 80%;
        background: radial-gradient(ellipse at 25% 40%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 75% 55%, rgba(255, 180, 120, 0.06) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .ainna-landing .hero-vision--typo .hero-bg[b-vy3iar68mb],
    .ainna-landing .hero-vision--typo .hero-bg-orb[b-vy3iar68mb],
    .ainna-landing .hero-vision--typo .hero-bg-orb-2[b-vy3iar68mb],
    .ainna-landing .hero-vision--typo .hero-bg-aurora[b-vy3iar68mb] {
        display: none;
    }

/* ── Inner wrapper — centered column ── */

.ainna-landing .hero-typo-inner[b-vy3iar68mb] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Eyebrow — centered, light variant ── */

.ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 40px;
    justify-content: center;
}

    .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::before {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
        flex-shrink: 0;
    }

    .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::after {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
        flex-shrink: 0;
    }

/* ── Statement headline — editorial scale, edge-to-edge ── */

.ainna-landing .hero-vision--typo .hero-statement[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 200;
    line-height: 1.15;
    letter-spacing: -0.055em;
    margin-bottom: 0;
    color: var(--text-heading);
    text-align: center;
    max-width: 100%;
}

.ainna-landing .hero-vision--typo .hero-statement-line[b-vy3iar68mb] {
    display: block;
}

    .ainna-landing .hero-vision--typo .hero-statement-line span[b-vy3iar68mb] {
        display: inline-block;
    }

    /* ── First line (provocation) ── heavier than the base 200 to give the
       opening question typographic weight. Scoped to data-reveal="0" so
       only Line 1 is affected; Line 2 and Accent retain their own treatments. */
    .ainna-landing .hero-vision--typo .hero-statement-line[data-reveal="0"][b-vy3iar68mb] {
        font-weight: 500;
    }

    /* ── Second line ── slightly reduced so the long accent row holds a single
       line at desktop widths and wraps cleanly below. Scoped to data-reveal="1". */
    .ainna-landing .hero-vision--typo .hero-statement-line[data-reveal="1"][b-vy3iar68mb] {
        font-size: 0.85em;
    }

    /* ── Promise line ── smaller, heavier. Settled authority after the provocation.
   Scoped via .hero-statement-promise so other persona pages are unaffected. */
    .ainna-landing .hero-vision--typo .hero-statement-line .hero-statement-promise[b-vy3iar68mb] {
        font-size: 0.68em;
        font-weight: 700;
        letter-spacing: -0.025em;
    }

.ainna-landing .hero-vision--typo .hero-statement-accent[b-vy3iar68mb] {
    font-weight: 700;
    color: var(--accent);
}

/* Higher-specificity override for the inline accent case — when the accent
   span is nested inside StatementLine1 (rendered via MarkupString) rather
   than being its own line. Covers both usage patterns. */
.ainna-landing .hero-vision--typo .hero-statement .hero-statement-accent[b-vy3iar68mb],
.ainna-landing .hero-vision--typo .hero-statement-line .hero-statement-accent[b-vy3iar68mb] {
    font-weight: 700;
    color: var(--accent);
}

/* Sheen across the accent words. Loops, so a retrigger is a colour shift
   rather than a blink. The @supports gate keeps text-fill: transparent off
   browsers that cannot paint the gradient, and each stop falls back to
   --accent, so a missing token yields a solid colour, never invisible text.
   The travelling band is accent mixed toward the deep plum already used in
   the hero background. Mixing toward white washes the headline out against
   the cream canvas. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .ainna-landing .hero-vision--typo .hero-statement .hero-statement-accent[b-vy3iar68mb],
    .ainna-landing .hero-vision--typo .hero-statement-line .hero-statement-accent[b-vy3iar68mb] {
        background: linear-gradient(100deg, var(--accent, #f00c71) 0%, color-mix(in srgb, var(--accent, #f00c71) 55%, #2a1240) 20%, var(--accent, #f00c71) 42%, color-mix(in srgb, var(--accent, #f00c71) 55%, #2a1240) 62%, var(--accent, #f00c71) 100%);
        background-size: 240% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: ainnaGradientShift-b-vy3iar68mb 8s ease-in-out infinite;
    }
}

/* ── Compact statement — Line 2 and Accent share a single visual line
   Used when the accent is very short (e.g. "4'.") and would otherwise
   waste vertical space on its own line. Keeps inline-block so the
   staggered reveal's translateY still applies. Line 1 stays block. */

.ainna-landing .hero-vision--typo .hero-statement--compact .hero-statement-line:nth-child(2)[b-vy3iar68mb],
.ainna-landing .hero-vision--typo .hero-statement--compact .hero-statement-line:nth-child(3)[b-vy3iar68mb] {
    display: inline-block;
}

.ainna-landing .hero-vision--typo .hero-statement--compact .hero-statement-accent[b-vy3iar68mb] {
    margin-left: 0.25em;
}

/* ── Hero screenshot — full-width product proof ── */

.ainna-landing .hero-screenshot-stage[b-vy3iar68mb] {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 56px auto 0;
    perspective: 1600px;
    /* Pixel ratio of the desktop crops; the phone crops override it below.
       --hero-shot-cycle is one full rotation of the three shots. */
    --hero-shot-ratio: 1879 / 1765;
    --hero-shot-cycle: 24s;
}

    /* ── Epic glow ──
   Soft brand-tinted pool of light behind the tilted window, keyed to the
   hero orbs (magenta) and aurora (violet) so the screen reads as floating
   over the chromatic backdrop rather than pasted on. Flat layer at z-index 0;
   the frame (z-index 1) sits on top. */
    .ainna-landing .hero-screenshot-stage[b-vy3iar68mb]::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -10% -8% -4%;
        background: radial-gradient(ellipse 72% 62% at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, rgba(120, 70, 240, 0.09) 42%, transparent 72%);
        filter: blur(40px);
        pointer-events: none;
    }

.ainna-landing .hero-screenshot-frame[b-vy3iar68mb] {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(10, 25, 29, 0.14);
    background: #0a191d;
    transform: rotateX(9deg);
    transform-origin: center center;
    box-shadow: 0 48px 110px -30px rgba(10, 25, 29, 0.42), 0 20px 46px -22px rgba(10, 25, 29, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* ── Glass rim + specular sheen ──
       Two non-interactive layers over the window. ::before is the bright edge
       of the pane (top bevel plus a faint frosted ring toward the border).
       ::after is the light: a soft diagonal reflection and a low brand wash
       from above. Both stay subtle so the traffic lights and shots stay clean. */
    .ainna-landing .hero-screenshot-frame[b-vy3iar68mb]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 2px 10px -8px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        background: radial-gradient(125% 125% at 50% 50%, transparent 58%, rgba(255, 255, 255, 0.07) 100%);
    }

    .ainna-landing .hero-screenshot-frame[b-vy3iar68mb]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 16%, transparent 40%), radial-gradient(140% 90% at 50% -25%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 55%);
    }

    .ainna-landing .hero-screenshot-frame:hover[b-vy3iar68mb] {
        transform: rotateX(3deg);
        box-shadow: 0 30px 80px -24px rgba(10, 25, 29, 0.40), 0 8px 20px -10px rgba(10, 25, 29, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

.ainna-landing .hero-screenshot-bar[b-vy3iar68mb] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background: linear-gradient(180deg, #14262b 0%, #0e1f24 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

    /* Hero-scoped traffic lights — override the page-level pink dots without
       affecting the capability section, which uses the same .screenshot-dot class. */
    .ainna-landing .hero-screenshot-bar .screenshot-dot[b-vy3iar68mb] {
        width: 12px;
        height: 12px;
        box-shadow: inset 0 0.6px 0.6px rgba(255, 255, 255, 0.5), inset 0 -1px 1.4px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.18);
    }

        .ainna-landing .hero-screenshot-bar .screenshot-dot:first-child[b-vy3iar68mb] {
            background: #ff5f57;
        }

        .ainna-landing .hero-screenshot-bar .screenshot-dot:nth-child(2)[b-vy3iar68mb] {
            background: #febc2e;
        }

        .ainna-landing .hero-screenshot-bar .screenshot-dot:last-child[b-vy3iar68mb] {
            background: #28c840;
        }

/* ── Hero shot deck: three views of one idea (assessment, personas,
   competition), cross-dissolved on a slow loop. Pure CSS: stacked <picture>,
   opacity only. The deck is locked to the shots' aspect ratio so the swap
   never nudges layout. Ratio and cycle live on .hero-screenshot-stage. */
.ainna-landing .hero-shot-deck[b-vy3iar68mb] {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hero-shot-ratio, 1879 / 1765);
    background: #0a191d;
    overflow: hidden;
}

    /* ── Specular sheen ──
   A faint diagonal glint sweeps across the screen once after load, like light
   catching glass, then rests. Clipped to the deck; sits above the shot and
   below the static glass rim. */
    .ainna-landing .hero-shot-deck[b-vy3iar68mb]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 55%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
        transform: translateX(-160%) skewX(-14deg);
        animation: heroSheen-b-vy3iar68mb 8s ease-in-out 0.9s 1 forwards;
    }

@keyframes heroSheen-b-vy3iar68mb {
    0% {
        transform: translateX(-160%) skewX(-14deg);
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    20% {
        transform: translateX(300%) skewX(-14deg);
        opacity: 1;
    }

    27% {
        opacity: 0;
    }

    100% {
        transform: translateX(300%) skewX(-14deg);
        opacity: 0;
    }
}

.ainna-landing .hero-shot[b-vy3iar68mb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: heroShotTrio-b-vy3iar68mb var(--hero-shot-cycle, 24s) ease-in-out infinite;
}

    /* Negative delays stagger the shots by a third of a cycle each, so they
       play in order on first run and each dissolve overlaps the next fade-in. */
    .ainna-landing .hero-shot:nth-child(2)[b-vy3iar68mb] {
        animation-delay: calc(var(--hero-shot-cycle, 24s) * -0.6667);
    }

    .ainna-landing .hero-shot:nth-child(3)[b-vy3iar68mb] {
        animation-delay: calc(var(--hero-shot-cycle, 24s) * -0.3333);
    }

    .ainna-landing .hero-shot img[b-vy3iar68mb] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

@keyframes heroShotTrio-b-vy3iar68mb {
    0%, 29% {
        opacity: 1;
    }

    33.3%, 95.7% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ainna-landing .hero-screenshot-shadow[b-vy3iar68mb] {
    position: absolute;
    bottom: -20px;
    left: 10%;
    right: 10%;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(10, 25, 29, 0.10) 0%, transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

@media (max-width: 900px) {
    .ainna-landing .hero-screenshot-stage[b-vy3iar68mb] {
        max-width: 100%;
        margin-top: 44px;
    }

    .ainna-landing .hero-screenshot-frame[b-vy3iar68mb] {
        transform: none;
        border-radius: var(--radius-lg);
    }

        .ainna-landing .hero-screenshot-frame:hover[b-vy3iar68mb] {
            transform: none;
        }
}

@media (max-width: 640px) {
    .ainna-landing .hero-screenshot-stage[b-vy3iar68mb] {
        --hero-shot-ratio: 605 / 370;
    }
}

@media (max-width: 480px) {
    .ainna-landing .hero-screenshot-stage[b-vy3iar68mb] {
        margin-top: 36px;
    }

    .ainna-landing .hero-screenshot-bar[b-vy3iar68mb] {
        height: 28px;
        padding: 0 12px;
        gap: 6px;
    }

        .ainna-landing .hero-screenshot-bar .screenshot-dot[b-vy3iar68mb] {
            width: 10px;
            height: 10px;
        }

    .ainna-landing .hero-screenshot-frame[b-vy3iar68mb] {
        border-radius: var(--radius-md);
    }
}

/* ── Mental model — one line under the headline, centered ── */

.ainna-landing .hero-vision--typo .hero-mental-model[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    color: var(--text-heading);
    line-height: 1.55;
    max-width: 900px;
    margin: 28px auto 0;
    font-weight: 300;
    letter-spacing: 0.005em;
    text-align: center;
}

    .ainna-landing .hero-vision--typo .hero-mental-model:empty[b-vy3iar68mb] {
        display: none;
    }

/* ── Story — three beats under the window: frame, assess, invite ── */

.ainna-landing .hero-vision--typo .hero-story[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 48px;
    max-width: 1100px;
    margin: 96px auto 0;
    text-align: left;
}

.ainna-landing .hero-story-item[b-vy3iar68mb] {
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.ainna-landing .hero-story-lead[b-vy3iar68mb] {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.ainna-landing .hero-story-text[b-vy3iar68mb] {
    display: block;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── CTA row — centered ── */

.ainna-landing .hero-vision--typo .hero-cta-row[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.ainna-landing .hero-vision--typo .hero-meta[b-vy3iar68mb] {
    text-align: center;
}

/* ── CTA group — buttons stacked over the meta line ── */

.ainna-landing .hero-vision--typo .hero-cta-group[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ── Referral badge — centered ── */

.ainna-landing .hero-vision--typo .hero-referral-badge--light[b-vy3iar68mb] {
    margin-bottom: 24px;
}

/* ── Hero CTA button — gradient, pill shape ── */

.ainna-landing .btn-hero-split[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    min-width: 180px;
    justify-content: center;
    background: var(--gradient-cta);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family-primary);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--accent-glow-sm);
}

    .ainna-landing .btn-hero-split:hover[b-vy3iar68mb] {
        transform: translateY(-2px);
        box-shadow: var(--accent-glow);
    }

    .ainna-landing .btn-hero-split:active[b-vy3iar68mb] {
        transform: translateY(0);
        box-shadow: var(--accent-glow-sm);
    }

    .ainna-landing .btn-hero-split:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .ainna-landing .btn-hero-split i[b-vy3iar68mb] {
        font-size: 1.1em;
    }

/* ── Hero meta text ── */

.ainna-landing .hero-meta[b-vy3iar68mb] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.85;
    letter-spacing: 0.01em;
}

.ainna-landing .hero-meta-sep[b-vy3iar68mb] {
    opacity: 0.6;
    margin: 0 4px;
}

/* ── Hero CTA button pair — filled + outline, inline ── */

.ainna-landing .hero-cta-buttons[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .ainna-landing .hero-cta-buttons[b-vy3iar68mb] {
        flex-direction: column;
        width: 100%;
    }

    .ainna-landing .btn-hero-split[b-vy3iar68mb], .ainna-landing .btn-hero-email[b-vy3iar68mb] {
        width: 100%;
        justify-content: center;
    }
}

/* ── Referral badge — light variant ── */

.ainna-landing .hero-referral-badge--light[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: var(--text-xs);
    color: var(--accent);
    margin-bottom: 20px;
}

    .ainna-landing .hero-referral-badge--light i[b-vy3iar68mb] {
        font-size: 0.9em;
    }

    .ainna-landing .hero-referral-badge--light strong[b-vy3iar68mb] {
        font-weight: var(--font-weight-semibold);
    }

/* ── Scroll CTA — light variant (inherits from base) ── */

.ainna-landing .hero-scroll-cta--light.scroll-hidden[b-vy3iar68mb] {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* ── Hero entrance ──
   Driven from JS, not from here. See the inline script at the end of the
   hero section. The stylesheet is re-applied after the circuit connects,
   and re-applying a stylesheet restarts every CSS animation declared in
   it, so a CSS cascade here flickers. Hero elements rest at their normal
   visible state; nothing in this file hides them. Do not reintroduce an
   entrance animation as CSS. */

/* ── Responsive ── */

@media (max-width: 1120px) {
    .ainna-landing .hero-vision--typo .hero-statement[b-vy3iar68mb] {
        font-size: clamp(2.1rem, 4vw, 3.2rem);
    }
}

@media (max-width: 900px) {
    .ainna-landing .hero-vision--typo[b-vy3iar68mb] {
        padding: 100px 20px 48px;
        min-height: auto;
    }

        .ainna-landing .hero-vision--typo .hero-statement[b-vy3iar68mb] {
            font-size: clamp(2rem, 7vw, 3rem);
        }

        .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::before,
        .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::after {
            width: 20px;
        }

        .ainna-landing .hero-vision--typo .hero-mental-model[b-vy3iar68mb] {
            font-size: clamp(1.05rem, 3vw, 1.2rem);
        }

        .ainna-landing .hero-vision--typo .hero-story[b-vy3iar68mb] {
            grid-template-columns: 1fr;
            gap: 22px;
            margin-top: 60px;
            max-width: 560px;
        }

        .ainna-landing .hero-vision--typo .hero-cta-row[b-vy3iar68mb] {
            margin-top: 28px;
        }
}

@media (max-width: 480px) {
    .ainna-landing .hero-vision--typo[b-vy3iar68mb] {
        padding: 88px 16px 40px;
    }

        .ainna-landing .hero-vision--typo .hero-statement[b-vy3iar68mb] {
            font-size: clamp(1.7rem, 8vw, 2.2rem);
            letter-spacing: -0.04em;
        }

        .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb] {
            margin-bottom: 28px;
        }

            .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::before,
            .ainna-landing .hero-vision--typo .hero-eyebrow.hero-eyebrow--light[b-vy3iar68mb]::after {
                width: 16px;
            }
}

@media (prefers-reduced-motion: reduce) {
    .ainna-landing .hero-shot-deck[b-vy3iar68mb]::before {
        animation: none;
        opacity: 0;
    }

    /* Rotation collapses to the first shot. */
    .ainna-landing .hero-shot[b-vy3iar68mb] {
        animation: none;
    }

        .ainna-landing .hero-shot:first-child[b-vy3iar68mb] {
            opacity: 1;
        }
}

/* ── Headline visibility: prevent cursor stack flash ── */
/* Uses opacity instead of visibility so Google's renderer
   treats the <h1> as real content (visibility:hidden signals
   hidden text and causes Google to rewrite the <title>). */

/* JS adds .ready after instant-painting all text and hiding extra cursors */
.ainna-landing .hero-typed-headline.ready[b-vy3iar68mb] {
    opacity: 1;
    animation: none; /* cancel the fallback once JS has taken over */
}

@keyframes ainnaHeadlineFallback-b-vy3iar68mb {
    to {
        opacity: 1;
    }
}

/* ── Headline visibility: prevent cursor stack flash ── */

/*.ainna-landing .hero-headline-hidden {
    visibility: hidden;*/
/* Safety: if JS hasn't fired after 1.5s, show content anyway */
/*animation: ainnaHeadlineFallback 0s linear 1.5s forwards;
}*/

/* JS adds .ready after instant-painting all text and hiding extra cursors */
/*.ainna-landing .hero-typed-headline.ready {
    visibility: visible;
    animation: none;*/ /* cancel the fallback once JS has taken over */
/*}

@keyframes ainnaHeadlineFallback {
    to {
        visibility: visible;
    }
}

@keyframes ainnaHeadlineFallback {
    to {
        visibility: visible;
    }
}*/

/* ── Referral badge ── */

.ainna-landing .hero-referral-badge[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 28px;
    animation: ainnaBadgePulse-b-vy3iar68mb 3s ease-in-out infinite;
}

    .ainna-landing .hero-referral-badge i[b-vy3iar68mb] {
        color: var(--accent);
        font-size: var(--text-md);
    }

    .ainna-landing .hero-referral-badge strong[b-vy3iar68mb] {
        color: #fff;
        font-weight: var(--font-weight-bold);
    }

@keyframes ainnaBadgePulse-b-vy3iar68mb {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }

    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent);
    }
}

/* ── Eyebrow ── */

.ainna-landing .hero-eyebrow[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 36px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* ── Typed headline system ── */

/* ── Text colors ── */

@keyframes ainnaGradientShift-b-vy3iar68mb {
    0%, 100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* ── Ghost element (reserves width for rotating words) ── */

/* ── Cursor ── */

@keyframes ainnaCursorBlink-b-vy3iar68mb {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ── Subtitle ── */

/* ── CTA area ── */

/* btn-hero-linkedin — delta over btn btn-primary btn--lg btn--pill btn--icon btn--gradient */

.ainna-landing .hero-cta-primary .cta-note[b-vy3iar68mb] {
    margin-top: 20px; /* was 12px from shared rule */
    letter-spacing: 0.02em;
}

/* LinkedIn icon inside merged trust note */
.ainna-landing .cta-note .fab[b-vy3iar68mb] {
    font-size: 0.9em;
    opacity: 0.6;
    margin-right: 2px;
}

/* ================================================================
   SCROLL CTA — pinned to hero bottom, draws gentle attention
   ================================================================ */

@keyframes ainnaScrollCtaReveal-b-vy3iar68mb {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ainnaScrollFloat-b-vy3iar68mb {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .ainna-landing .hero-vision[b-vy3iar68mb] {
        padding: 110px 16px 60px;
        min-height: auto;
        min-height: 100dvh;
    }

    .ainna-landing .hero-eyebrow[b-vy3iar68mb] {
        margin-bottom: 28px;
        font-size: var(--text-xs);
        letter-spacing: 2px;
        gap: 10px;
    }
}

/* ── Tablet refinements ── */

/* ================================================================
   SECTION 2: THE PROBLEM
   Typography-led, numbered cards, scroll-reveal
   ================================================================ */

.ainna-landing .problem-card[b-vy3iar68mb] {
    background: var(--raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 44px 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* JS adds .scroll-reveal-init to hide cards before reveal */
    .ainna-landing .problem-card.scroll-reveal-init[b-vy3iar68mb] {
        opacity: 0;
        transform: translateY(24px);
    }

    .ainna-landing .problem-card.visible[b-vy3iar68mb] {
        opacity: 1 !important;
        transform: none !important;
    }

    .ainna-landing .problem-card:hover[b-vy3iar68mb] {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        border-color: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .ainna-landing .problem-card[b-vy3iar68mb]::before {
        display: none;
    }

@media (max-width: 768px) {

    .ainna-landing .problem-card[b-vy3iar68mb] {
        padding: 36px 28px 28px;
    }
}

/* ================================================================
   SECTION 2.5: PRODUCT MOMENT — What Clarity Looks Like
   Dark-bg showcase section between Problem and Chat Demo.
   Single hero-scale product frame with ambient glow, minimal text.
   ================================================================ */

/* ── Aperture — frosted glass viewport ── */

/* ── Peek slides — oversized, drifting ── */

@keyframes pmDrift-b-vy3iar68mb {
    from {
        transform: scale(var(--pm-s1, 0.72)) translate(var(--pm-dx1, 0), var(--pm-dy1, 0));
    }

    to {
        transform: scale(var(--pm-s2, 0.80)) translate(var(--pm-dx2, 0), var(--pm-dy2, 0));
    }
}

/* ── Caption overlay ── */

/* ── Anchor link ── */

/* ── Responsive ── */

/* ================================================================
   SECTION 3: THINKING DEMO
   Vertical chat frame + insight narrative, progressive enhancement
   ================================================================ */

/* ── Section header ── */

/* ── Showcase grid ── */

/* ── Chat frame — light, card-based, matches real Ainna UI ── */

.ainna-landing .demo-chat-frame[b-vy3iar68mb] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-bg-warm);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 80px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    max-width: 440px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

    .ainna-landing .demo-chat-frame.scroll-reveal-init[b-vy3iar68mb] {
        opacity: 0;
        transform: translateX(-32px);
    }

    .ainna-landing .demo-chat-frame.visible[b-vy3iar68mb] {
        opacity: 1 !important;
        transform: none !important;
    }

/* App bar */

/* chat-new-btn — decorative demo element, not interactive */

/* Chat body */

/* Message cards */

@keyframes ainnaChatCardIn-b-vy3iar68mb {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ainna avatar — pink rounded square */

/* User avatar */

/* Featured response (latest, highlighted) */

/* NEXT UP nested card */

/* Input bar */

/* ── Insight narrative (right side) ── */

.ainna-landing .demo-insight-item[b-vy3iar68mb] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

    .ainna-landing .demo-insight-item.scroll-reveal-init[b-vy3iar68mb] {
        opacity: 0;
        transform: translateY(16px);
    }

    .ainna-landing .demo-insight-item.visible[b-vy3iar68mb] {
        opacity: 1 !important;
        transform: none !important;
    }

/* ── Section CTA ── */

/* ── Responsive ── */

@media (max-width: 1024px) {

    .ainna-landing .demo-chat-frame[b-vy3iar68mb] {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    .ainna-landing .demo-chat-frame[b-vy3iar68mb] {
        max-width: 400px;
    }
}

/* ================================================================
   SECTION 4: PROCESS — The Strategic Loop
   PATCH 12: Single diffused glow, JS-driven rotation with card
   highlight sync, cycling centre word, responsive cascade
   ================================================================ */

.ainna-landing .process-section[b-vy3iar68mb] {
    padding: 120px 0 80px;
    background: var(--horizon), radial-gradient(circle 440px at 50% 56%, var(--bloom-magenta) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, var(--floor-teal) 0%, transparent 60%), radial-gradient(ellipse 90% 70% at 50% 0%, #2a1240 0%, #12091f 45%, var(--color-bg-dark) 100%);
    position: relative;
    overflow: hidden;
}

    .ainna-landing .process-section .section-pill-inner[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border-color: color-mix(in srgb, var(--accent-hover) 35%, transparent);
        color: var(--accent-hover);
    }

    .ainna-landing .process-section .section-nav-link[b-vy3iar68mb] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.5);
    }

        .ainna-landing .process-section .section-nav-link:hover[b-vy3iar68mb] {
            color: rgba(255, 255, 255, 0.85);
        }

    .ainna-landing .process-section .btn-cta-secondary[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.22);
    }

        .ainna-landing .process-section .btn-cta-secondary:hover[b-vy3iar68mb] {
            color: #fff;
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 8%, transparent);
        }

    .ainna-landing .process-section .cta-note[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.55);
    }

/* ── Header ── */

.ainna-landing .process-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
    z-index: 0;
}

.ainna-landing .process-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
}

.ainna-landing .process-title-accent[b-vy3iar68mb] {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 28px;
    opacity: 0.6;
}

.ainna-landing .process-subtitle[b-vy3iar68mb] {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.68);
    max-width: 720px;
    margin: 0 auto;
}

/* ================================================================
   ORBIT GRID LAYOUT
   ================================================================ */

.ainna-landing .process-orbit-layout[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ".     top    ."
        "left  ring   right"
        ".    bottom   .";
    align-items: center;
    justify-items: center;
    gap: 20px 28px;
    max-width: 1200px;
    margin: 0 auto 64px;
}

/* ── Ring zone ── */

.ainna-landing .orbit-ring-zone[b-vy3iar68mb] {
    grid-area: ring;
    width: 540px;
}

.ainna-landing .orbit-svg[b-vy3iar68mb] {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Ring layers ── */

.ainna-landing .orbit-ring-base[b-vy3iar68mb] {
    fill: none;
    stroke: #f00c71; /* Hardcoded — var(--accent) unreliable inside SVG on iOS WebKit */
    stroke-width: 18;
    opacity: 0.35;
}

/* Single glow sweep — JS sets transform: rotate(Xdeg) */
.ainna-landing .orbit-glow[b-vy3iar68mb] {
    fill: none;
    stroke: #f00c71; /* Hardcoded for iOS SVG */
    stroke-width: 14;
    stroke-dasharray: 340 766;
    stroke-linecap: round;
    opacity: 0.6;
    filter: blur(10px); /* CSS blur — url(#glowBlur) breaks on iOS WebKit */
    transform-origin: 250px 250px;
    /* fallback animation if JS hasn't loaded */
    animation: ainnaGlowFallback-b-vy3iar68mb 4s linear infinite;
}

    /* JS adds this class to disable CSS animation once it takes over */
    .ainna-landing .orbit-glow.js-driven[b-vy3iar68mb] {
        animation: none;
    }

/* Inner glow — tighter, brighter arc for emphasis */
.ainna-landing .orbit-glow-inner[b-vy3iar68mb] {
    fill: none;
    stroke: #f00c71; /* Hardcoded for iOS SVG */
    stroke-width: 6;
    stroke-dasharray: 340 766;
    stroke-linecap: round;
    opacity: 0.9;
    filter: blur(10px); /* CSS blur — url(#glowBlur) breaks on iOS WebKit */
    transform-origin: 250px 250px;
    animation: ainnaGlowFallback-b-vy3iar68mb 4s linear infinite;
}

    .ainna-landing .orbit-glow-inner.js-driven[b-vy3iar68mb] {
        animation: none;
    }

@keyframes ainnaGlowFallback-b-vy3iar68mb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Centre: step counter, mode name, rule, description ── */

.ainna-landing .orbit-center-step[b-vy3iar68mb] {
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    fill: var(--accent-hover);
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.ainna-landing .orbit-center-mode[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: 40px;
    font-weight: 600;
    fill: #fff;
    letter-spacing: -0.03em;
    transition: opacity 0.2s ease;
}

.ainna-landing .orbit-center-rule[b-vy3iar68mb] {
    stroke: color-mix(in srgb, var(--accent-hover) 70%, transparent);
    stroke-width: 2;
    stroke-linecap: round;
}

.ainna-landing .orbit-center-step.fading[b-vy3iar68mb],
.ainna-landing .orbit-center-mode.fading[b-vy3iar68mb] {
    opacity: 0;
}

.ainna-landing .orbit-center-desc-wrap[b-vy3iar68mb] {
    overflow: visible;
}

.ainna-landing .orbit-center-desc[b-vy3iar68mb] {
    font-family: var(--font);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    padding: 0 8px;
    transition: opacity 0.15s ease;
}

    .ainna-landing .orbit-center-desc.fading[b-vy3iar68mb] {
        opacity: 0;
    }

/* ================================================================
   CARDS
   ================================================================ */

.ainna-landing .orbit-card[b-vy3iar68mb] {
    max-width: 240px;
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

    /* Scroll reveal init */
    .ainna-landing .orbit-card.scroll-reveal-init[b-vy3iar68mb] {
        opacity: 0;
    }

    .ainna-landing .orbit-card.visible[b-vy3iar68mb] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* ── Card highlight: dramatic activation ── */

    .ainna-landing .orbit-card .orbit-card-mode[b-vy3iar68mb] {
        transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
    }

    .ainna-landing .orbit-card.orbit-highlight[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 7%, transparent);
        border-color: color-mix(in srgb, var(--accent-hover) 40%, transparent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-hover) 15%, transparent), 0 24px 60px -20px color-mix(in srgb, var(--accent) 35%, transparent);
        transform: scale(1.02);
    }

        .ainna-landing .orbit-card.orbit-highlight .orbit-card-mode[b-vy3iar68mb] {
            background: var(--accent);
            color: #fff;
        }

        .ainna-landing .orbit-card.orbit-highlight .orbit-card-title[b-vy3iar68mb] {
            color: var(--accent-hover);
        }

        .ainna-landing .orbit-card.orbit-highlight .orbit-card-desc[b-vy3iar68mb] {
            color: rgba(255, 255, 255, 0.9);
        }

        .ainna-landing .orbit-card.orbit-highlight .orbit-card-output[b-vy3iar68mb] {
            color: var(--accent-hover);
            opacity: 1;
        }

/* ── Card positions ── */

.ainna-landing .orbit-card-top[b-vy3iar68mb] {
    grid-area: top;
    text-align: center;
    max-width: 340px;
}

    .ainna-landing .orbit-card-top.scroll-reveal-init[b-vy3iar68mb] {
        transform: translateY(-12px);
    }

.ainna-landing .orbit-card-left[b-vy3iar68mb],
.ainna-landing .orbit-card-right[b-vy3iar68mb] {
    max-width: 300px;
}

.ainna-landing .orbit-card-left[b-vy3iar68mb] {
    grid-area: left;
    text-align: right;
    justify-self: end;
}

    .ainna-landing .orbit-card-left.scroll-reveal-init[b-vy3iar68mb] {
        transform: translateX(-16px);
    }

.ainna-landing .orbit-card-right[b-vy3iar68mb] {
    grid-area: right;
    text-align: left;
    justify-self: start;
}

    .ainna-landing .orbit-card-right.scroll-reveal-init[b-vy3iar68mb] {
        transform: translateX(16px);
    }

.ainna-landing .orbit-card-bottom[b-vy3iar68mb] {
    grid-area: bottom;
    text-align: center;
    max-width: 340px;
}

    .ainna-landing .orbit-card-bottom.scroll-reveal-init[b-vy3iar68mb] {
        transform: translateY(12px);
    }

/* ── Card contents ── */

.ainna-landing .orbit-card-mode[b-vy3iar68mb] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-hover);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ainna-landing .orbit-card-title[b-vy3iar68mb] {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.015em;
    line-height: 1.3;
    transition: color 0.4s ease;
}

.ainna-landing .orbit-card-desc[b-vy3iar68mb] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 8px;
    transition: color 0.4s ease, font-weight 0.4s ease;
}

.ainna-landing .orbit-card-output[b-vy3iar68mb] {
    display: block;
    font-size: 0.76rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.85);
    opacity: 0.6;
    transition: color 0.4s ease, opacity 0.4s ease;
}

/* ── The insight that runs through the loop ── */
.ainna-landing .process-insight[b-vy3iar68mb] {
    max-width: 700px;
    margin: 8px auto 52px;
    padding: 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: center;
}

/* ── CTA ── */

.ainna-landing .process-cta[b-vy3iar68mb] {
    text-align: center;
    padding-top: 8px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet landscape */
@media (max-width: 1080px) {
    .ainna-landing .process-orbit-layout[b-vy3iar68mb] {
        gap: 16px 20px;
    }

    .ainna-landing .orbit-ring-zone[b-vy3iar68mb] {
        width: 460px;
    }

    .ainna-landing .orbit-card[b-vy3iar68mb] {
        max-width: 210px;
    }
}

/* Tablet portrait — ring top, cards stacked below */
@media (max-width: 860px) {
    .ainna-landing .process-orbit-layout[b-vy3iar68mb] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "ring   ring"
            "top    right"
            "bottom left";
        gap: 28px 24px;
    }

    .ainna-landing .orbit-ring-zone[b-vy3iar68mb] {
        width: 340px;
        max-width: 60%;
        justify-self: center;
    }

    .ainna-landing .orbit-card-top[b-vy3iar68mb],
    .ainna-landing .orbit-card-bottom[b-vy3iar68mb] {
        justify-self: center;
        text-align: center;
        max-width: 400px;
    }

    .ainna-landing .orbit-card-left[b-vy3iar68mb],
    .ainna-landing .orbit-card-right[b-vy3iar68mb] {
        max-width: 300px;
        text-align: center;
        justify-self: center;
    }
}

/* Small tablet / large phone — ring on top, cards listed below */
@media (max-width: 680px) {
    .ainna-landing .process-section[b-vy3iar68mb] {
        padding: 80px 0 64px;
    }

    .ainna-landing .process-header[b-vy3iar68mb] {
        margin-bottom: 40px;
    }

    .ainna-landing .process-title[b-vy3iar68mb] {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .ainna-landing .process-subtitle[b-vy3iar68mb] {
        font-size: 1.02rem;
    }

    .ainna-landing .process-orbit-layout[b-vy3iar68mb] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .ainna-landing .orbit-ring-zone[b-vy3iar68mb] {
        order: -1;
        width: 280px;
        max-width: 70%;
        margin-bottom: 12px;
    }

    /* Cards stack under the ring, in loop order */
    .ainna-landing .orbit-card[b-vy3iar68mb] {
        max-width: 440px;
        width: 100%;
        text-align: center;
    }

    .ainna-landing .process-insight[b-vy3iar68mb] {
        margin-top: 8px;
    }
}

/* Phone — ring stays, slightly smaller */
@media (max-width: 480px) {
    .ainna-landing .orbit-ring-zone[b-vy3iar68mb] {
        width: 240px;
        max-width: 65%;
    }

    .ainna-landing .process-orbit-layout[b-vy3iar68mb] {
        gap: 16px;
    }
}

@media (min-width: 861px) and (max-width: 1080px) {
    .ainna-landing .process-title[b-vy3iar68mb] {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }
}

/* ================================================================
   SECTION 5: CAPABILITIES — Think, Analyze, Communicate
   PATCH 13: Full visual upgrade — pill header, accent bar, numbered
   blocks with mode pills, scroll-reveal, enhanced screenshot frames
   with browser chrome, refined feature items, section-nav chevron.
   Consistent with sections 1–4 & 6 design language.
   ================================================================ */

.ainna-landing .capabilities-section[b-vy3iar68mb] {
    padding: 120px 0 80px;
    background: radial-gradient(ellipse 60% 42% at 100% 0%, var(--wash-violet) 0%, transparent 62%), radial-gradient(ellipse 52% 38% at 0% 100%, var(--wash-pink) 0%, transparent 62%), var(--color-bg-paper-white);
    position: relative;
    overflow: hidden;
}

/* ── Header (matches problem/thinking/process/gallery pattern) ── */

.ainna-landing .capabilities-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 0;
}

.ainna-landing .capabilities-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-heading);
    margin-bottom: 24px;
    letter-spacing: -0.04em;
}

.ainna-landing .capabilities-title-accent[b-vy3iar68mb] {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 28px;
    opacity: 0.6;
}

.ainna-landing .capabilities-subtitle[b-vy3iar68mb] {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 680px;
    margin: 0 auto;
}

/* ── Capability blocks — alternating image/content layout ── */

.ainna-landing .capability-block[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 96px;
    position: relative;
}

    .ainna-landing .capability-block:last-child[b-vy3iar68mb] {
        margin-bottom: 0;
    }

    /* Direction flip for image-left variant */
    .ainna-landing .capability-block.image-left[b-vy3iar68mb] {
        direction: rtl;
    }

        .ainna-landing .capability-block.image-left > *[b-vy3iar68mb] {
            direction: ltr;
        }

/* ── Top row: number + mode pill ── */

.ainna-landing .capability-top-row[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ainna-landing .capability-number[b-vy3iar68mb] {
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--text-tertiary);
    user-select: none;
}

.ainna-landing .capability-mode-pill[b-vy3iar68mb] {
    display: inline-block;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Content ── */

.ainna-landing .capability-visual[b-vy3iar68mb] {
    /* Offset to align screenshot with capability-title, not the top-row number/pill */
    padding-top: calc(2.8rem + 20px);
}

.ainna-landing .capability-title[b-vy3iar68mb] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1.25;
    color: var(--text-heading);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.ainna-landing .capability-desc[b-vy3iar68mb] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

/* ── Feature items (card-style, replaces simple list) ── */

.ainna-landing .capability-features[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ainna-landing .capability-feature-item[b-vy3iar68mb] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ainna-landing .capability-feature-icon[b-vy3iar68mb] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ainna-landing .capability-feature-text[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ainna-landing .capability-feature-text strong[b-vy3iar68mb] {
        font-size: 0.88rem;
        font-weight: var(--font-weight-bold);
        color: var(--text-heading);
        line-height: 1.4;
    }

    .ainna-landing .capability-feature-text span[b-vy3iar68mb] {
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

/* ── Screenshot — perspective stage ── */

.ainna-landing .capability-screenshot-stage[b-vy3iar68mb] {
    position: relative;
    perspective: 1200px;
}

.ainna-landing .capability-screenshot-frame[b-vy3iar68mb] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--background-primary);
    /* Default: image-right → screenshot tilts toward text (left) */
    transform: rotateY(-6deg) rotateX(2deg) rotateZ(0.5deg);
    transform-origin: center center;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.04), -6px 12px 36px color-mix(in srgb, var(--accent) 3%, transparent);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* image-left blocks: mirror the rotation (tilt toward text on the right) */
.ainna-landing .capability-block.image-left .capability-screenshot-frame[b-vy3iar68mb] {
    transform: rotateY(6deg) rotateX(2deg) rotateZ(-0.5deg);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.04), 6px 12px 36px color-mix(in srgb, var(--accent) 3%, transparent);
}

/* Hover: ease rotation toward flat */
.ainna-landing .capability-block:hover .capability-screenshot-frame[b-vy3iar68mb] {
    transform: rotateY(-3deg) rotateX(1deg) rotateZ(0.25deg);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.12), 0 14px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04), -8px 16px 44px color-mix(in srgb, var(--accent) 5%, transparent);
}

.ainna-landing .capability-block.image-left:hover .capability-screenshot-frame[b-vy3iar68mb] {
    transform: rotateY(3deg) rotateX(1deg) rotateZ(-0.25deg);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.12), 0 14px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04), 8px 16px 44px color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Soft shadow plane beneath screenshot */
.ainna-landing .capability-screenshot-shadow[b-vy3iar68mb] {
    position: absolute;
    bottom: -16px;
    left: 12%;
    right: 12%;
    height: 36px;
    background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 70% );
    filter: blur(10px);
    transform: rotateY(-6deg) scaleY(0.3);
    pointer-events: none;
}

.ainna-landing .capability-block.image-left .capability-screenshot-shadow[b-vy3iar68mb] {
    transform: rotateY(6deg) scaleY(0.3);
}

/* Subtle scroll-driven parallax — screenshots float up gently as they enter viewport.
   Uses CSS scroll-driven animations where supported, static otherwise. */
@supports (animation-timeline: view()) {
    @keyframes capabilityScreenshotFloat-b-vy3iar68mb {
        from {
            transform: translateY(24px);
            opacity: 0.7;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .ainna-landing .capability-screenshot-stage[b-vy3iar68mb] {
        animation: capabilityScreenshotFloat-b-vy3iar68mb linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
}

/* Browser chrome bar */
.ainna-landing .capability-screenshot-bar[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f8f7fa 0%, #f2f0f5 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ainna-landing .screenshot-dot[b-vy3iar68mb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
}

    .ainna-landing .screenshot-dot:first-child[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 25%, transparent);
    }

    .ainna-landing .screenshot-dot:nth-child(2)[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
    }

.ainna-landing .capability-screenshot-frame img[b-vy3iar68mb] {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    object-position: center top;
    /* Gentle bottom softening — visible through 85%, subtle fade to 92% opacity at bottom */
    mask-image: linear-gradient(to bottom, black 0%, black 82%, rgba(0, 0, 0, 0.4) 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, rgba(0, 0, 0, 0.4) 100%);
}

/* ── Text-only block: no window yet, content spans the row ── */
.ainna-landing .capability-block--text[b-vy3iar68mb] {
    grid-template-columns: 1fr;
}

    .ainna-landing .capability-block--text .capability-content[b-vy3iar68mb] {
        max-width: 880px;
        margin: 0 auto;
    }

    .ainna-landing .capability-block--text .capability-features[b-vy3iar68mb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 40px;
    }

/* ── Responsive ── */

@media (max-width: 1024px) {
    .ainna-landing .capability-block[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 72px;
    }

    .ainna-landing .capability-block--text .capability-features[b-vy3iar68mb] {
        grid-template-columns: 1fr;
    }

    .ainna-landing .capability-block.image-left[b-vy3iar68mb] {
        direction: ltr;
    }

    .ainna-landing .capability-screenshot-stage[b-vy3iar68mb] {
        max-width: 560px;
        margin: 0 auto;
    }

    /* Reduce rotation at tablet — tighter viewport */
    .ainna-landing .capability-screenshot-frame[b-vy3iar68mb] {
        transform: rotateY(-4deg) rotateX(1.5deg) rotateZ(0.3deg);
    }

    .ainna-landing .capability-block.image-left .capability-screenshot-frame[b-vy3iar68mb] {
        transform: rotateY(4deg) rotateX(1.5deg) rotateZ(-0.3deg);
    }

    .ainna-landing .capability-screenshot-shadow[b-vy3iar68mb] {
        transform: rotateY(-4deg) scaleY(0.25);
    }

    .ainna-landing .capability-block.image-left .capability-screenshot-shadow[b-vy3iar68mb] {
        transform: rotateY(4deg) scaleY(0.25);
    }

    .ainna-landing .capability-visual[b-vy3iar68mb] {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .ainna-landing .capabilities-section[b-vy3iar68mb] {
        padding: 80px 0 64px;
    }

    .ainna-landing .capabilities-header[b-vy3iar68mb] {
        margin-bottom: 56px;
    }

    .ainna-landing .capabilities-title[b-vy3iar68mb] {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .ainna-landing .capabilities-subtitle[b-vy3iar68mb] {
        font-size: 1.02rem;
    }

    .ainna-landing .capability-block[b-vy3iar68mb] {
        margin-bottom: 56px;
        gap: 28px;
    }

    .ainna-landing .capability-number[b-vy3iar68mb] {
        font-size: 2.2rem;
    }

    .ainna-landing .capability-title[b-vy3iar68mb] {
        font-size: 1.25rem;
    }

    .ainna-landing .capability-feature-item[b-vy3iar68mb] {
        padding: 12px 14px;
    }

        .ainna-landing .capability-feature-item:hover[b-vy3iar68mb] {
            transform: none;
        }

    .ainna-landing .capability-screenshot-stage[b-vy3iar68mb] {
        max-width: 440px;
    }

    /* Minimal rotation on mobile */
    .ainna-landing .capability-screenshot-frame[b-vy3iar68mb],
    .ainna-landing .capability-block.image-left .capability-screenshot-frame[b-vy3iar68mb] {
        transform: rotateY(-2deg) rotateX(1deg);
    }

    .ainna-landing .capability-screenshot-shadow[b-vy3iar68mb],
    .ainna-landing .capability-block.image-left .capability-screenshot-shadow[b-vy3iar68mb] {
        transform: rotateY(-2deg) scaleY(0.2);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ainna-landing .capabilities-title[b-vy3iar68mb] {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ainna-landing .capability-screenshot-frame[b-vy3iar68mb],
    .ainna-landing .capability-block.image-left .capability-screenshot-frame[b-vy3iar68mb] {
        transition: none;
    }

    .ainna-landing .capability-screenshot-stage[b-vy3iar68mb] {
        animation: none !important;
    }
}

/* ================================================================
   SECTION 6: OUTPUT GALLERY
   PATCH 06: Warm background, consistency pass, upgraded header
   ================================================================ */

.ainna-landing .output-gallery[b-vy3iar68mb] {
    padding: 120px 0 80px;
    background: var(--horizon), radial-gradient(ellipse 70% 60% at 15% 0%, var(--lift-violet) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 18%, var(--bloom-magenta) 0%, transparent 60%), radial-gradient(ellipse 85% 55% at 50% 112%, var(--floor-teal) 0%, transparent 62%), linear-gradient(180deg, #120b1f 0%, var(--color-bg-dark) 60%);
    position: relative;
}

.ainna-landing .gallery-container[b-vy3iar68mb] {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 32px;
}

/* ── Gallery Section Header (consistent pill + title pattern) ── */

.ainna-landing .gallery-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 48px;
}

.ainna-landing .gallery-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-heading);
    margin-bottom: 24px;
    letter-spacing: -0.04em;
}

.ainna-landing .gallery-title-accent[b-vy3iar68mb] {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 28px;
    opacity: 0.6;
}

.ainna-landing .gallery-subtitle[b-vy3iar68mb] {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 680px;
    margin: 0 auto;
}

/* ── Document Header (per-slide label + nav) ── */
.ainna-landing .gallery-document-header[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ainna-landing .document-header-nav[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ainna-landing .header-nav-btn[b-vy3iar68mb] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-base);
}

    .ainna-landing .header-nav-btn:hover[b-vy3iar68mb] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

.ainna-landing .header-nav-counter[b-vy3iar68mb] {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
    min-width: 40px;
    text-align: center;
}

.ainna-landing .counter-current[b-vy3iar68mb] {
    color: var(--text-heading);
    font-weight: var(--font-weight-bold);
}

/* Gallery Carousel */
.ainna-landing .gallery-carousel[b-vy3iar68mb] {
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--color-border-light);
    background: var(--background-primary);
}

.ainna-landing .gallery-track[b-vy3iar68mb] {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ainna-landing .gallery-slide[b-vy3iar68mb] {
    min-width: 100%;
}

.ainna-landing .slide-content img[b-vy3iar68mb] {
    width: 100%;
    display: block;
}

/* Output Cards */
.ainna-landing .output-cards-wrapper[b-vy3iar68mb] {
    margin-top: 40px;
}

.ainna-landing .output-cards-grid[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ainna-landing .output-mini-card[b-vy3iar68mb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
    background: var(--background-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

    .ainna-landing .output-mini-card i[b-vy3iar68mb] {
        color: var(--accent);
        font-size: var(--text-lg);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .ainna-landing .output-mini-card strong[b-vy3iar68mb] {
        display: block;
        font-size: var(--text-md);
        color: var(--text-heading);
    }

    .ainna-landing .output-mini-card span[b-vy3iar68mb] {
        font-size: var(--text-sm);
        color: var(--text-tertiary);
    }

/* Gallery CTA */
.ainna-landing .gallery-cta-wrapper[b-vy3iar68mb] {
    margin-top: 48px;
}

.ainna-landing .gallery-cta-bold[b-vy3iar68mb] {
    background: var(--background-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: 40px 48px;
}

.ainna-landing .cta-bold-content[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

    .ainna-landing .cta-bold-content.cta-bold-content--centered[b-vy3iar68mb] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 20px;
    }

.ainna-landing .cta-bold-title[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: 1.4rem;
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 0;
    color: var(--text-heading);
}

@media (max-width: 1024px) {
    .ainna-landing .output-cards-grid[b-vy3iar68mb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ainna-landing .output-gallery[b-vy3iar68mb] {
        padding: 80px 0 48px;
    }

    .ainna-landing .gallery-header[b-vy3iar68mb] {
        margin-bottom: 32px;
    }

    .ainna-landing .gallery-title[b-vy3iar68mb] {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .ainna-landing .gallery-subtitle[b-vy3iar68mb] {
        font-size: 1.02rem;
    }

    .ainna-landing .gallery-container[b-vy3iar68mb] {
        padding: 0 16px;
    }

    .ainna-landing .output-cards-grid[b-vy3iar68mb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ainna-landing .output-mini-card[b-vy3iar68mb] {
        padding: 14px 16px;
    }

    .ainna-landing .output-cards-wrapper[b-vy3iar68mb] {
        margin-top: 32px;
    }

    .ainna-landing .gallery-cta-wrapper[b-vy3iar68mb] {
        margin-top: 32px;
    }

    .ainna-landing .gallery-cta-bold[b-vy3iar68mb] {
        padding: 28px 24px;
        border-radius: var(--radius-lg);
    }

    .ainna-landing .cta-bold-content[b-vy3iar68mb] {
        flex-direction: column;
        text-align: center;
    }

    .ainna-landing .cta-bold-title[b-vy3iar68mb] {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .ainna-landing .output-gallery[b-vy3iar68mb] {
        padding: 64px 0 40px;
    }

    .ainna-landing .gallery-container[b-vy3iar68mb] {
        padding: 0 12px;
    }

    .ainna-landing .output-cards-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ainna-landing .output-mini-card[b-vy3iar68mb] {
        padding: 12px 14px;
    }

    .ainna-landing .gallery-cta-bold[b-vy3iar68mb] {
        padding: 24px 20px;
        border-radius: var(--radius-md);
    }

    .ainna-landing .cta-bold-title[b-vy3iar68mb] {
        font-size: 1.1rem;
    }
}

/* ================================================================
   SECTION 7: SOCIAL PROOF
   PATCH 04: Testimonials grid replaces carousel
   PATCH 06: Trust metrics enhancement
   ================================================================ */

.ainna-landing .social-proof[b-vy3iar68mb] {
    padding: 100px 0;
    background: radial-gradient(ellipse 56% 46% at 50% 0%, var(--wash-peach) 0%, transparent 66%), var(--color-bg-cool);
    color: var(--text-heading);
    position: relative;
}

.ainna-landing .section-pill-on-dark .section-pill-inner[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border: none;
    box-shadow: none;
}

.ainna-landing .section-pill-on-dark .section-pill-dot[b-vy3iar68mb] {
    background: var(--accent);
}

.ainna-landing .social-proof-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 40px;
}

.ainna-landing .social-proof-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    color: var(--text-heading);
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.ainna-landing .social-proof-subtitle[b-vy3iar68mb] {
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.7;
    max-width: 780px;
    margin: 1.25rem auto 0;
    text-wrap: pretty;
    font-weight: var(--font-weight-regular);
}

/* Trust Metrics */

/* Methodology Credibility */
/* ── Proof row: one sentence, four facts ── */
.ainna-landing .proof-row[b-vy3iar68mb] {
    max-width: 1100px;
    margin: 0 auto 64px;
    padding: 48px 48px 44px;
    background: var(--background-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(30, 10, 48, 0.04), 0 24px 48px -32px rgba(30, 10, 48, 0.18);
}

.ainna-landing .proof-facts[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 40px;
}

.ainna-landing .proof-fact[b-vy3iar68mb] {
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--text-heading) 9%, transparent);
}

.ainna-landing .proof-fact-value[b-vy3iar68mb] {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--accent);
    margin-bottom: 10px;
}

.ainna-landing .proof-fact-label[b-vy3iar68mb] {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-heading);
}

/* ── Differentiation Cards (absorbed from competitive section) ── */

/* Testimonials Grid */
.ainna-landing .social-proof .section-badge span[b-vy3iar68mb] {
    background: var(--accent-subtle);
    color: var(--accent);
}

@media (max-width: 1024px) {
    .ainna-landing .proof-facts[b-vy3iar68mb] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .ainna-landing .social-proof[b-vy3iar68mb] {
        padding: 72px 0;
    }

    .ainna-landing .social-proof-subtitle[b-vy3iar68mb] {
        font-size: var(--text-sm);
        max-width: 100%;
        margin-top: 1rem;
    }

    .ainna-landing .proof-row[b-vy3iar68mb] {
        padding: 28px 24px 24px;
    }
}

@media (max-width: 480px) {
    .ainna-landing .social-proof[b-vy3iar68mb] {
        padding: 56px 0;
    }

    .ainna-landing .social-proof-header[b-vy3iar68mb] {
        margin-bottom: 32px;
    }

    .ainna-landing .proof-row[b-vy3iar68mb] {
        padding: 22px 18px 20px;
        margin-bottom: 40px;
    }

    .ainna-landing .proof-facts[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ================================================================
   LINKEDIN AUTH NOTE (Item 3)
   Subtle explanation near CTAs to reduce auth friction
   ================================================================ */

/* ── Privacy callout removed — replaced by capabilities CTA using gallery-cta-bold pattern ── */

/* ================================================================
   BUILT FOR STRIP
   ================================================================ */

/* ================================================================
   PRICING: MODE TOGGLE
   ================================================================ */

.ainna-landing .mode-toggle-btn.active[b-vy3iar68mb] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 3%, transparent);
    color: var(--text-heading);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 6%, transparent);
}

    .ainna-landing .mode-toggle-btn.active i[b-vy3iar68mb] {
        opacity: 1;
    }

/* ================================================================
   PRICING: TRIGGER DETAIL (key differentiator visible on row)
   ================================================================ */

/* ================================================================
   PRICING: TRIAL PREVIEW (Item 9)
   ================================================================ */

/* ================================================================
   PRICING: PERSONA SELECTOR + PLAN CARD
   ================================================================ */

.ainna-landing .persona-sel-btn.active[b-vy3iar68mb] {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    color: var(--text-heading);
}

@keyframes planFadeIn-b-vy3iar68mb {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ================================================================
   PRICING: MORE LINK + ENTERPRISE INLINE FEATURES
   ================================================================ */

/* ================================================================
   SECTION 10: FAQ
   ================================================================ */

.ainna-landing .faq-section[b-vy3iar68mb] {
    padding: 100px 0;
    background: var(--color-bg-paper-white);
    position: relative;
}

.ainna-landing .faq-grid[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 72px;
    max-width: 1100px;
    margin: 0 auto;
}

.ainna-landing .faq-col[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
}

.ainna-landing .faq-card[b-vy3iar68mb] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    break-inside: avoid;
    margin-bottom: 48px;
}

/* Watermark icon — hidden by default, revealed on expand */
.ainna-landing .faq-card-watermark[b-vy3iar68mb] {
    position: absolute;
    left: -16px;
    top: -16px;
    font-size: 100px;
    color: color-mix(in srgb, var(--accent) 4%, transparent);
    z-index: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    line-height: 1;
    opacity: 0;
}

.ainna-landing .faq-card--expanded .faq-card-watermark[b-vy3iar68mb] {
    opacity: 1;
}

.ainna-landing .faq-card--expanded:hover .faq-card-watermark[b-vy3iar68mb] {
    color: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: scale(1.05);
}

/* ── Trigger button — full-width clickable question row ── */

.ainna-landing .faq-card-trigger[b-vy3iar68mb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    position: relative;
    z-index: 1;
}

    .ainna-landing .faq-card-trigger:hover .faq-card-question[b-vy3iar68mb] {
        color: var(--accent);
    }

.ainna-landing .faq-card-question[b-vy3iar68mb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    margin-bottom: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.ainna-landing .faq-card-icon[b-vy3iar68mb] {
    color: var(--accent);
    font-size: var(--text-xl);
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Chevron — rotates on expand ── */

.ainna-landing .faq-card-chevron[b-vy3iar68mb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    margin-top: 4px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.ainna-landing .faq-card--expanded .faq-card-chevron[b-vy3iar68mb] {
    transform: rotate(180deg);
    color: var(--accent);
}

/* ── Answer — collapsed by default, smooth reveal ── */

.ainna-landing .faq-card-answer[b-vy3iar68mb] {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary);
    padding-left: 30px;
    position: relative;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.ainna-landing .faq-card--expanded .faq-card-answer[b-vy3iar68mb] {
    max-height: 1000px;
    opacity: 1;
    margin-top: 14px;
}

.ainna-landing .faq-card-answer p[b-vy3iar68mb] {
    margin: 0;
}

    .ainna-landing .faq-card-answer p + p[b-vy3iar68mb] {
        margin-top: 10px;
    }

.ainna-landing .faq-card-answer strong[b-vy3iar68mb] {
    color: var(--text-heading);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
    .ainna-landing .faq-section[b-vy3iar68mb] {
        padding: 72px 0;
    }

    .ainna-landing .faq-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ainna-landing .faq-card[b-vy3iar68mb] {
        margin-bottom: 36px;
    }

    .ainna-landing .faq-card-watermark[b-vy3iar68mb] {
        font-size: 80px;
        left: -12px;
        top: -14px;
    }

    .ainna-landing .faq-card-question[b-vy3iar68mb] {
        font-size: 1.05rem;
    }

    .ainna-landing .faq-card-answer[b-vy3iar68mb] {
        font-size: 0.88rem;
    }
}

/* ═══════════════════════════════════════════════════════
   RESOURCES STRIP — Compact SEO + email capture band
   Featured article + nav links + subscribe
   ═══════════════════════════════════════════════════════ */

.ainna-landing .resources-strip[b-vy3iar68mb] {
    padding: 56px 0;
    background: var(--color-bg-cool);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Section header — establishes what this zone is ── */

.ainna-landing .resources-strip-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 40px;
}

.ainna-landing .resources-strip-title[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    font-weight: 500;
    color: var(--text-heading);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 10px;
}

.ainna-landing .resources-strip-subtitle[b-vy3iar68mb] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Top row: editorial + subscribe ── */

.ainna-landing .resources-strip-top[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ainna-landing .resources-heading[b-vy3iar68mb] {
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ainna-landing .resources-body[b-vy3iar68mb] {
    font-size: 0.84rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

    .ainna-landing .resources-body a[b-vy3iar68mb] {
        color: var(--text-heading);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--accent) 25%, transparent);
        text-underline-offset: 2px;
        transition: text-decoration-color 0.2s ease;
    }

        .ainna-landing .resources-body a:hover[b-vy3iar68mb] {
            text-decoration-color: var(--accent);
            color: var(--accent);
        }

/* ── Subscribe block ── */

.ainna-landing .resources-subscribe-lead[b-vy3iar68mb] {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.ainna-landing .resources-subscribe-form[b-vy3iar68mb] {
    display: flex;
    gap: 0;
}

.ainna-landing .resources-subscribe-input[b-vy3iar68mb] {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-heading);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    transition: border-color 0.2s ease;
}

    .ainna-landing .resources-subscribe-input[b-vy3iar68mb]::placeholder {
        color: var(--text-tertiary);
    }

    .ainna-landing .resources-subscribe-input:focus[b-vy3iar68mb] {
        outline: none;
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }

.ainna-landing .resources-subscribe-btn[b-vy3iar68mb] {
    padding: 10px 20px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    color: #fff;
    background: var(--gradient-cta);
    border: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

    .ainna-landing .resources-subscribe-btn:hover[b-vy3iar68mb] {
        opacity: 0.9;
    }

    .ainna-landing .resources-subscribe-btn:disabled[b-vy3iar68mb] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ainna-landing .resources-subscribe-note[b-vy3iar68mb] {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    margin-top: 8px;
    opacity: 0.8;
}

.ainna-landing .resources-subscribe-error[b-vy3iar68mb] {
    font-size: 0.68rem;
    color: var(--danger, #dc2626);
    margin-top: 8px;
}

    .ainna-landing .resources-subscribe-error i[b-vy3iar68mb] {
        margin-right: 4px;
        font-size: 0.65rem;
    }

.ainna-landing .resources-subscribe-success[b-vy3iar68mb] {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ainna-landing .resources-subscribe-success i[b-vy3iar68mb] {
        font-size: 0.95rem;
    }

.ainna-landing .resources-spinner[b-vy3iar68mb] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ainnaSignInSpin-b-vy3iar68mb 0.6s linear infinite;
}

/* ── Bottom row: featured article + resource links ── */

/* ── Article cards grid — three vertical cards ── */

.ainna-landing .resources-cards-grid[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.ainna-landing .resources-article-card[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

    .ainna-landing .resources-article-card:hover[b-vy3iar68mb] {
        border-color: color-mix(in srgb, var(--accent) 15%, transparent);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
        transform: translateY(-3px);
    }

.ainna-landing .resources-article-cover[b-vy3iar68mb] {
    width: 100%;
    overflow: hidden;
}

    .ainna-landing .resources-article-cover img[b-vy3iar68mb] {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

.ainna-landing .resources-article-card:hover .resources-article-cover img[b-vy3iar68mb] {
    transform: scale(1.04);
}

.ainna-landing .resources-article-body[b-vy3iar68mb] {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ainna-landing .resources-article-title[b-vy3iar68mb] {
    font-size: 0.92rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: 1.35;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.ainna-landing .resources-article-tldr[b-vy3iar68mb] {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ainna-landing .resources-article-link[b-vy3iar68mb] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    transition: opacity 0.2s ease;
}

    .ainna-landing .resources-article-link i[b-vy3iar68mb] {
        font-size: 0.6rem;
        margin-left: 4px;
        transition: transform 0.2s ease;
    }

.ainna-landing .resources-article-card:hover .resources-article-link i[b-vy3iar68mb] {
    transform: translateX(3px);
}

/* ── Bottom nav strip ── */

.ainna-landing .resources-strip-bottom[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    overflow: hidden;
    min-width: 0;
}

/* ── Resource links ── */

.ainna-landing .resources-all-link[b-vy3iar68mb] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

    .ainna-landing .resources-all-link:hover[b-vy3iar68mb] {
        opacity: 0.7;
    }

    .ainna-landing .resources-all-link i[b-vy3iar68mb] {
        font-size: 0.6rem;
        margin-left: 4px;
    }

/* ── Responsive ── */

@media (max-width: 1024px) {
    .ainna-landing .resources-strip-top[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ainna-landing .resources-strip-bottom[b-vy3iar68mb] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ainna-landing .resources-cards-grid[b-vy3iar68mb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ainna-landing .resources-strip[b-vy3iar68mb] {
        padding: 40px 0;
    }

    .ainna-landing .resources-strip-top[b-vy3iar68mb] {
        gap: 24px;
        margin-bottom: 28px;
        padding-bottom: 28px;
    }

    .ainna-landing .resources-cards-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ainna-landing .resources-article-cover img[b-vy3iar68mb] {
        aspect-ratio: 16 / 9;
    }

    .ainna-landing .resources-subscribe-note[b-vy3iar68mb] {
        text-align: center;
    }

    .ainna-landing .resources-subscribe-error[b-vy3iar68mb] {
        text-align: center;
    }
}

/* ================================================================
   SECTION 9: COMPETITIVE POSITIONING
   "Not Another AI Wrapper" — side-by-side comparison grid
   Highest-converting B2B objection handler
   ================================================================ */

/* ── Differentiators row ── */

/* ================================================================
   MOBILE STICKY CTA BAR
   Fixed to bottom of viewport on mobile.
   Shows when hero is out of view, hides when pricing is visible.
   ================================================================ */

.ainna-landing .sticky-cta-bar[b-vy3iar68mb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 10, 20, 0.95);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
    display: none; /* Desktop: hidden entirely */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
}

    .ainna-landing .sticky-cta-bar.visible[b-vy3iar68mb] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ainna-landing .sticky-cta-bar.at-pricing[b-vy3iar68mb] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

/* sticky-cta-link — delta over btn btn-primary btn--pill btn--icon btn--full btn--gradient */
.ainna-landing .sticky-cta-link[b-vy3iar68mb] {
    padding: 14px 28px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--accent-glow);
}

    .ainna-landing .sticky-cta-link:active[b-vy3iar68mb] {
        transform: scale(0.98);
    }

    .ainna-landing .sticky-cta-link i[b-vy3iar68mb] {
        font-size: var(--text-xs);
    }

@media (max-width: 768px) {
    .ainna-landing .sticky-cta-bar[b-vy3iar68mb] {
        display: block; /* Mobile only */
    }

    .ainna-landing .sticky-cta-link[b-vy3iar68mb] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

/* Ensure footer has bottom padding to clear sticky bar on mobile */
@media (max-width: 768px) {
    .ainna-landing footer[b-vy3iar68mb] {
        padding-bottom: 80px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ainna-landing .sticky-cta-bar[b-vy3iar68mb] {
        transition: none;
    }
}

/* ================================================================
   SECTION 11: PRICING V2 — Two-Path Architecture
   Dark background, glassmorphic path cards, integrated trial strip.
   Replaces all existing .pricing and .pricing-* CSS rules.
   ================================================================ */

.ainna-landing .pricing-v2[b-vy3iar68mb] {
    padding: 120px 0 80px;
    background: radial-gradient(ellipse 62% 50% at 50% 100%, var(--wash-pink) 0%, transparent 66%), radial-gradient(ellipse 44% 44% at 0% 0%, var(--wash-violet) 0%, transparent 62%), var(--color-bg-warm);
    color: var(--text-heading);
    position: relative;
    overflow: hidden;
}

    .ainna-landing .pricing-v2[b-vy3iar68mb]::before {
        display: none;
    }

    .ainna-landing .pricing-v2[b-vy3iar68mb]::after {
        display: none;
    }

    .ainna-landing .pricing-v2 .container[b-vy3iar68mb] {
        position: relative;
        z-index: 1;
    }

/* ================================================================
   HEADER
   ================================================================ */

.ainna-landing .pv2-header[b-vy3iar68mb] {
    text-align: center;
    margin-bottom: 48px;
}

.ainna-landing .pv2-title[b-vy3iar68mb] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: -0.04em;
}

.ainna-landing .pv2-subtitle[b-vy3iar68mb] {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 auto;
}

/* ================================================================
   SPRINT CARDS — Three compact columns, premium feel
   ================================================================ */

.ainna-landing .pv2-sprints[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 32px;
}

/* ── Base sprint card ── */

.ainna-landing .pv2-sprint-card[b-vy3iar68mb] {
    position: relative;
    padding: 32px 28px 28px;
    background: #ffffff;
    border: 1px solid rgba(30, 10, 48, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(30, 10, 48, 0.03), 0 8px 24px rgba(30, 10, 48, 0.04);
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

    .ainna-landing .pv2-sprint-card:hover[b-vy3iar68mb] {
        border-color: rgba(186, 39, 225, 0.20);
        box-shadow: 0 1px 2px rgba(30, 10, 48, 0.04), 0 14px 36px rgba(30, 10, 48, 0.08);
        transform: translateY(-2px);
    }

/* ── Popular card accent ── */

.ainna-landing .pv2-sprint-card--popular[b-vy3iar68mb] {
    background: linear-gradient(180deg, #ffffff 0%, #fdf6fb 100%);
    border-color: rgba(186, 39, 225, 0.22);
    box-shadow: 0 1px 2px rgba(30, 10, 48, 0.04), 0 18px 52px rgba(186, 39, 225, 0.10);
    transform: translateY(-4px);
}

    .ainna-landing .pv2-sprint-card--popular:hover[b-vy3iar68mb] {
        border-color: rgba(186, 39, 225, 0.38);
        box-shadow: 0 1px 2px rgba(30, 10, 48, 0.05), 0 24px 64px rgba(186, 39, 225, 0.16);
        transform: translateY(-7px);
    }

.ainna-landing .pv2-sprint-popular-badge[b-vy3iar68mb] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 14px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink-2, #1e293b);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ── Watermark icon ── */

.ainna-landing .pv2-sprint-watermark[b-vy3iar68mb] {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s ease;
}

.ainna-landing .pv2-sprint-card:hover .pv2-sprint-watermark[b-vy3iar68mb] {
    color: rgba(0, 0, 0, 0.05);
    transform: scale(1.04);
}

/* ── Card header: name + target ── */

.ainna-landing .pv2-sprint-header[b-vy3iar68mb] {
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.ainna-landing .pv2-sprint-name[b-vy3iar68mb] {
    font-size: 1.45rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--text-heading);
    line-height: 1.15;
    margin: 0 0 5px;
    letter-spacing: -0.02em;
}

.ainna-landing .pv2-sprint-for[b-vy3iar68mb] {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    line-height: 1.35;
    display: block;
}

/* ── Price row ── */

/* ── Price stripe: amount + detail inline (matches pricing page) ── */

.ainna-landing .pv2-price-stripe[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light, #f0eef3);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.ainna-landing .pv2-price-amount[b-vy3iar68mb] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.04em;
    line-height: 1;
}

.ainna-landing .pv2-price-detail[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ainna-landing .pv2-price-qty[b-vy3iar68mb] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.ainna-landing .pv2-price-period[b-vy3iar68mb] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1.2;
}

/* ── Meta block — supplementary info below the price stripe.
   Sits as its own zone so the price/period alignment in the stripe
   above stays clean. The stripe's existing solid border-bottom
   provides the natural divider between primary pricing claim and
   the supporting details (seats, savings) that live here. ── */
.ainna-landing .pv2-price-meta[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ainna-landing .pv2-price-seats[b-vy3iar68mb] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
    letter-spacing: 0.005em;
}

.ainna-landing .pv2-price-savings[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 85%, var(--text-heading));
    line-height: 1.2;
    letter-spacing: 0.005em;
}

    .ainna-landing .pv2-price-savings i[b-vy3iar68mb] {
        font-size: 9px;
        opacity: 0.85;
    }

.ainna-landing .pv2-pill-icon[b-vy3iar68mb] {
    font-size: 11px;
    color: var(--accent);
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

/* ── Feature & document lists ── */

.ainna-landing .pv2-sprint-lists[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.ainna-landing .pv2-sprint-list-group[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: stretch;
}

    .ainna-landing .pv2-sprint-list-group + .pv2-sprint-list-group[b-vy3iar68mb] {
        margin-top: 10px;
    }

.ainna-landing .pv2-sprint-list-label[b-vy3iar68mb] {
    font-size: 0.62rem;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    width: 100%;
    margin-bottom: 4px;
}

/* ── Included-item checkrow — small accent check + neutral text ──
   Replaces the accent-tinted pills: a clean single-column checklist so the
   price stays the loudest element and tiers compare top-to-bottom. Features
   and documents share one style (their labels already separate them). */
.ainna-landing .pv2-sprint-list-item[b-vy3iar68mb] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-body, var(--text-heading));
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    line-height: 1.4;
}

/* ── Subscriptions footer strip ── */

.ainna-landing .subscriptions-footer[b-vy3iar68mb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
}

    .ainna-landing .subscriptions-footer span[b-vy3iar68mb] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-tertiary);
        white-space: nowrap;
    }

        .ainna-landing .subscriptions-footer span + span[b-vy3iar68mb]::before {
            content: "\00b7";
            margin: 0 6px;
            color: var(--text-tertiary);
            font-weight: 800;
            font-size: 16px;
            opacity: 0.35;
        }

    .ainna-landing .subscriptions-footer i[b-vy3iar68mb] {
        font-size: 10px;
        color: var(--text-tertiary);
        opacity: 0.6;
        flex-shrink: 0;
    }

/* ── Opportunity explainer — what you're buying ── */

.ainna-landing .pv2-opportunity-explainer[b-vy3iar68mb] {
    max-width: 1100px;
    margin: 56px auto 48px;
    text-align: center;
    padding: 40px 44px;
    border-radius: var(--radius-xl);
    background: #ffffff45;
    border: 1px solid rgba(30, 10, 48, 0.08);
    box-shadow: 0 1px 2px rgba(30, 10, 48, 0.03), 0 8px 24px rgba(30, 10, 48, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ainna-landing .pv2-explainer-title[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 500;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.ainna-landing .pv2-opportunity-explainer p[b-vy3iar68mb] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 720px;
}

.ainna-landing .pv2-opportunity-explainer strong[b-vy3iar68mb] {
    color: var(--text-heading);
    font-weight: 600;
}

@media (max-width: 768px) {
    .ainna-landing .pv2-opportunity-explainer[b-vy3iar68mb] {
        max-width: calc(100% - 32px);
        margin: 40px auto 36px;
        padding: 28px 22px;
        border-radius: 14px;
        gap: 22px;
    }

        .ainna-landing .pv2-opportunity-explainer p[b-vy3iar68mb] {
            font-size: 0.9rem;
            line-height: 1.65;
        }
}

/* ── Sprint footer — unified CTA + notes ── */

.ainna-landing .pv2-sprint-footer .pv2-trial-btn[b-vy3iar68mb] {
    white-space: nowrap;
    margin: 8px 0;
}

    .ainna-landing .pv2-sprint-footer .pv2-trial-btn i[b-vy3iar68mb] {
        font-size: var(--text-xs);
    }

/* ================================================================
   TRUST ANCHOR
   ================================================================ */

/* ================================================================
   ENTERPRISE ACCORDION
   ================================================================ */

/* Enterprise — confident inline link beneath the sign-up CTAs */
.ainna-landing .pv2-enterprise-link[b-vy3iar68mb] {
    max-width: 620px;
    margin: 26px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(30, 10, 48, 0.1);
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ainna-landing .pv2-enterprise-link-cta[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

    .ainna-landing .pv2-enterprise-link-cta i[b-vy3iar68mb] {
        font-size: 0.82em;
        transition: transform 0.2s ease;
    }

    .ainna-landing .pv2-enterprise-link-cta:hover[b-vy3iar68mb] {
        text-decoration: underline;
    }

        .ainna-landing .pv2-enterprise-link-cta:hover i[b-vy3iar68mb] {
            transform: translateX(3px);
        }

/* ── Trigger ── */

/* Static header (panel is permanently open): centered, no button affordance */

.ainna-landing .pv2-enterprise-trigger--static .pv2-sprint-for[b-vy3iar68mb] {
    max-width: 520px;
}

/* Enterprise title/subtitle typography comes from .pv2-sprint-name and
   .pv2-sprint-for classes applied directly to the markup — keeps visual
   parity with Core/Pro/Scale plan names in the pricing cards above. */

/* ── Panel ── */

/* ── Cohort line (honest scarcity: real design-partner pilots) ──
   Sits as a pill so it reads as a live status, not body text. The dot
   pulses slowly to signal an active, open cohort — not a gimmick. */

@keyframes ainnaCohortPulse-b-vy3iar68mb {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    }

    50% {
        opacity: 0.55;
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

/* ── Form intro: de-risks the ask (working session, no commitment) ── */

/* ── Two-column layout ── */

/* ── Form column ── */

/* pv2-enterprise-submit — delta over btn btn-primary btn--icon btn--gradient */

/* ================================================================
   DETAIL NOTE
   ================================================================ */

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .ainna-landing .pricing-v2[b-vy3iar68mb] {
        padding: 80px 0 64px;
    }

    .ainna-landing .pv2-header[b-vy3iar68mb] {
        margin-bottom: 36px;
    }

    .ainna-landing .pv2-title[b-vy3iar68mb] {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .ainna-landing .pv2-subtitle[b-vy3iar68mb] {
        font-size: 0.95rem;
    }

    /* Cards — single column */
    .ainna-landing .pv2-sprints[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 100%;
    }

    .ainna-landing .pv2-sprint-card[b-vy3iar68mb] {
        padding: 24px 20px 20px;
    }

    .ainna-landing .pv2-price-amount[b-vy3iar68mb] {
        font-size: 1.8rem;
    }

    .ainna-landing .pv2-sprint-watermark[b-vy3iar68mb] {
        font-size: 60px;
        right: 10px;
        top: 10px;
    }

    .ainna-landing .pv2-sprint-footer .pv2-trial-btn[b-vy3iar68mb] {
        width: 100%;
        justify-content: center;
    }

    .ainna-landing .subscriptions-footer[b-vy3iar68mb] {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

        .ainna-landing .subscriptions-footer span + span[b-vy3iar68mb]::before {
            display: none;
        }

    /* Trust anchor — stack */

    /* Enterprise */

}

@media (max-width: 480px) {
    .ainna-landing .pv2-title[b-vy3iar68mb] {
        font-size: 1.6rem;
    }

    .ainna-landing .pv2-subtitle[b-vy3iar68mb] {
        font-size: 0.85rem;
    }

    .ainna-landing .pv2-sprint-card[b-vy3iar68mb] {
        padding: 20px 16px 18px;
    }

    .ainna-landing .pv2-sprint-name[b-vy3iar68mb] {
        font-size: 1.2rem;
    }

    .ainna-landing .pv2-price-amount[b-vy3iar68mb] {
        font-size: 1.6rem;
    }

    .ainna-landing .pv2-sprint-watermark[b-vy3iar68mb] {
        font-size: 50px;
        right: 8px;
        top: 8px;
    }

    .ainna-landing .pv2-sprint-list-item[b-vy3iar68mb] {
        font-size: 0.74rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ainna-landing .pv2-title[b-vy3iar68mb] {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .ainna-landing .pv2-sprints[b-vy3iar68mb] {
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ainna-landing .pv2-sprint-card[b-vy3iar68mb] {
        padding: 26px 24px 22px;
    }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ainna-landing .pv2-sprint-card[b-vy3iar68mb] {
        transition-duration: 0.01ms !important;
    }
}
/* ================================================================
   HERO MOBILE RESPONSIVE — V3 Updates
   
   In your existing @media (max-width: 768px) block for the hero,
   REMOVE these rules (founding pillars no longer exist):
   
     .ainna-landing .hero-founding { gap: 14px 20px; margin-bottom: 80px; }
     .ainna-landing .founding-item { font-size: 11.5px; }
   
   The remaining mobile hero rules stay as-is. Here's the cleaned 
   version of the mobile hero block for reference:
   ================================================================ */

@media (max-width: 768px) {
    .ainna-landing .hero-vision[b-vy3iar68mb] {
        padding: 110px 16px 80px;
        min-height: auto;
        min-height: 100dvh;
    }

    .ainna-landing .hero-eyebrow[b-vy3iar68mb] {
        margin-bottom: 28px;
        font-size: var(--text-xs);
        letter-spacing: 2px;
        gap: 10px;
    }

    /* founding-item and hero-founding rules REMOVED */

}

/* ================================================================
   RESPONSIVE — Pricing
   ================================================================ */

@media (max-width: 768px) {
    .ainna-landing .pricing[b-vy3iar68mb] {
        padding: 80px 0 64px;
    }

    /* Accordion */

    /* Trust strip */

    /* Enterprise */

}

/* ================================================================
   FOOTER
   ================================================================ */

.ainna-landing footer[b-vy3iar68mb] {
    padding: 96px 0 32px;
    background: radial-gradient(ellipse 58% 72% at 50% 0%, var(--lift-violet) 0%, transparent 60%), radial-gradient(ellipse 62% 44% at 100% 100%, var(--floor-teal) 0%, transparent 60%), linear-gradient(180deg, #120b1f 0%, var(--color-bg-dark) 55%);
    color: rgba(255,255,255,0.55);
    border-top: none;
    position: relative;
}

    /* Gradient glow line — refined separator */
    .ainna-landing footer[b-vy3iar68mb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--accent) 6%, transparent) 15%, color-mix(in srgb, var(--accent) 20%, transparent) 40%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, color-mix(in srgb, var(--accent) 20%, transparent) 60%, color-mix(in srgb, var(--accent) 6%, transparent) 85%, transparent 100% );
    }

    /* Soft bleed glow beneath the line */
    .ainna-landing footer[b-vy3iar68mb]::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 20%;
        right: 20%;
        height: 80px;
        background: radial-gradient( ellipse 70% 100% at 50% 0%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 70% );
        pointer-events: none;
    }

/* ── Ensure footer content sits above the pseudo-elements ── */

/* ── Footer Editorial (brand story blocks) ── */

.ainna-landing .footer-editorial[b-vy3iar68mb] {
    margin-bottom: 0;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.ainna-landing .footer-editorial-lead[b-vy3iar68mb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 0 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

    .ainna-landing .footer-editorial-lead .footer-logo[b-vy3iar68mb] {
        height: 36px;
        margin-bottom: 0;
    }

/* ── Footer Statement — provocative headline (now above logo) ── */
.ainna-landing .footer-statement[b-vy3iar68mb] {
    text-align: center;
    padding: 40px 0 0;
    margin-bottom: 64px;
}

.ainna-landing .footer-statement-provocation[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto 20px;
    max-width: 880px;
}

    .ainna-landing .footer-statement-provocation em[b-vy3iar68mb] {
        font-style: italic;
        color: rgba(255, 255, 255, 0.95);
    }

.ainna-landing .footer-statement-answer[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.40);
    margin: 0 auto 40px;
}

.ainna-landing .footer-statement-rule[b-vy3iar68mb] {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .ainna-landing .footer-statement[b-vy3iar68mb] {
        padding: 40px 0 0;
    }

    .ainna-landing .footer-statement-provocation[b-vy3iar68mb] {
        margin-bottom: 22px;
    }

    .ainna-landing .footer-statement-answer[b-vy3iar68mb] {
        margin-bottom: 24px;
    }

    .ainna-landing .footer-editorial-lead[b-vy3iar68mb] {
        padding: 32px 0 36px;
    }
}

.ainna-landing .footer-editorial-grid[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.ainna-landing .footer-editorial-block h5[b-vy3iar68mb] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 14px;
}

.ainna-landing .footer-editorial-block p[b-vy3iar68mb] {
    font-size: 0.82rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}

.ainna-landing .footer-editorial-block a[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.2s ease, border-color 0.2s ease;
}

    .ainna-landing .footer-editorial-block a:hover[b-vy3iar68mb] {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }

@media (max-width: 1024px) {
    .ainna-landing .footer-editorial-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .ainna-landing .footer-editorial[b-vy3iar68mb] {
        margin-bottom: 40px;
        padding-bottom: 36px;
    }
}

/* ── Grid: 3 link columns ── */

.ainna-landing .footer-grid[b-vy3iar68mb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 40px;
    margin-bottom: 40px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* footer-bottom: see consolidated rule near newsletter section */

/* ── Mobile ── */

@media (max-width: 768px) {
    .ainna-landing footer[b-vy3iar68mb] {
        padding: 72px 0 24px;
    }

        .ainna-landing footer[b-vy3iar68mb]::before {
            left: 5%;
            right: 5%;
        }

        .ainna-landing footer[b-vy3iar68mb]::after {
            left: 10%;
            right: 10%;
            height: 60px;
        }
}

/* ── Grid: brand + 3 link columns (consolidated above) ── */

/* ── Footer shared elements ── */

.ainna-landing .footer-logo[b-vy3iar68mb] {
    height: 36px;
    margin-bottom: 10px;
}

.ainna-landing .footer-brand-promise[b-vy3iar68mb] {
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.22);
    margin-bottom: 16px;
}

/* ── Social links ── */

.ainna-landing .footer-social[b-vy3iar68mb] {
    display: flex;
    gap: 10px;
}

.ainna-landing .social-link[b-vy3iar68mb] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    color: rgba(255,255,255,0.45);
    font-size: var(--text-base);
    transition: all 0.25s ease;
}

    .ainna-landing .social-link:hover[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    }

/* ── Link columns ── */

.ainna-landing .footer-col-title[b-vy3iar68mb] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}

.ainna-landing .footer-col-links[b-vy3iar68mb] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ainna-landing .footer-col-links li[b-vy3iar68mb] {
        margin-bottom: 8px;
    }

    .ainna-landing .footer-col-links a[b-vy3iar68mb] {
        font-size: 0.82rem;
        color: rgba(255,255,255,0.42);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .ainna-landing .footer-col-links a:hover[b-vy3iar68mb] {
            color: var(--accent);
        }

/* ── Referral box ── */

.ainna-landing .footer-referral-box[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    margin-top: 20px;
}

.ainna-landing .footer-referral-icon[b-vy3iar68mb] {
    color: var(--accent);
    font-size: var(--text-md);
    opacity: 0.7;
    flex-shrink: 0;
}

.ainna-landing .footer-referral-box strong[b-vy3iar68mb] {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    margin-right: 6px;
}

.ainna-landing .footer-referral-box span[b-vy3iar68mb] {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

/* ── SEO paragraph ── */

/* ── Social + Fellows Community Stripe ── */

.ainna-landing .footer-community-stripe[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.ainna-landing .footer-stripe-sep[b-vy3iar68mb] {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ainna-landing .footer-community-stripe .footer-referral-box[b-vy3iar68mb] {
    margin-top: 0;
    background: none;
    border: none;
    padding: 0;
}

@media (max-width: 768px) {
    .ainna-landing .footer-community-stripe[b-vy3iar68mb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ainna-landing .footer-stripe-sep[b-vy3iar68mb] {
        display: none;
    }
}

/* ── Newsletter Subscription ── */

.ainna-landing .footer-newsletter[b-vy3iar68mb] {
    margin: 200px 0px 32px;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
}

.ainna-landing .footer-newsletter-inner[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 900px;
    margin: 0 auto;
}

.ainna-landing .footer-newsletter-text h4[b-vy3iar68mb] {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.ainna-landing .footer-newsletter-text p[b-vy3iar68mb] {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.5;
}

.ainna-landing .footer-newsletter-form[b-vy3iar68mb] {
    flex-shrink: 0;
}

.ainna-landing .newsletter-input-group[b-vy3iar68mb] {
    display: flex;
    gap: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s ease;
}

    .ainna-landing .newsletter-input-group:focus-within[b-vy3iar68mb] {
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }

.ainna-landing .newsletter-input[b-vy3iar68mb] {
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    padding: 12px 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font);
    width: 240px;
}

    .ainna-landing .newsletter-input[b-vy3iar68mb]::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

/* newsletter-btn — embedded in input group, custom layout required */
.ainna-landing .newsletter-btn[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--gradient-cta);
    color: white;
    border: none;
    border-radius: 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
}

    .ainna-landing .newsletter-btn:hover:not(:disabled)[b-vy3iar68mb] {
        opacity: 0.9;
        transform: translateX(2px);
    }

    .ainna-landing .newsletter-btn:disabled[b-vy3iar68mb] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ainna-landing .newsletter-btn i[b-vy3iar68mb] {
        font-size: var(--text-xs);
        transition: transform 0.2s;
    }

    .ainna-landing .newsletter-btn:hover:not(:disabled) i[b-vy3iar68mb] {
        transform: translateX(2px);
    }

.ainna-landing .newsletter-spinner[b-vy3iar68mb] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

.ainna-landing .newsletter-note[b-vy3iar68mb] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

    .ainna-landing .newsletter-note i[b-vy3iar68mb] {
        font-size: 9px;
        opacity: 0.6;
    }

.ainna-landing .newsletter-success[b-vy3iar68mb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-full);
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
}

    .ainna-landing .newsletter-success i[b-vy3iar68mb] {
        font-size: var(--text-lg);
    }

@media (max-width: 768px) {
    .ainna-landing .footer-newsletter[b-vy3iar68mb] {
        margin: 32px 0 28px;
        padding: 28px 0;
    }

    .ainna-landing .footer-newsletter-inner[b-vy3iar68mb] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .ainna-landing .footer-newsletter-text h4[b-vy3iar68mb] {
        font-size: 1rem;
    }

    .ainna-landing .newsletter-input[b-vy3iar68mb] {
        width: 180px;
        padding: 10px 16px;
    }

    .ainna-landing .newsletter-btn[b-vy3iar68mb] {
        padding: 10px 18px;
    }
}

/* ── Screenshot disclaimer ── */

.ainna-landing .footer-disclaimer[b-vy3iar68mb] {
    max-width: 760px;
    padding-top: 24px;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.32);
    text-align: left;
    position: relative;
    z-index: 1;
}

/* ── Bottom bar ── */

.ainna-landing .footer-bottom[b-vy3iar68mb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

    .ainna-landing .footer-bottom p[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
    }

.ainna-landing .footer-links[b-vy3iar68mb] {
    display: flex;
    gap: 20px;
}

    .ainna-landing .footer-links a[b-vy3iar68mb] {
        font-size: 12.5px;
        color: rgba(255,255,255,0.55);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .ainna-landing .footer-links a:hover[b-vy3iar68mb] {
            color: var(--accent);
        }

/* ── Footer responsive ── */

@media (max-width: 1024px) {

    .ainna-landing .footer-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {

    .ainna-landing footer[b-vy3iar68mb] {
        padding: 48px 0 24px;
    }

    .ainna-landing .footer-grid[b-vy3iar68mb] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ainna-landing .footer-bottom[b-vy3iar68mb] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .ainna-landing .footer-links[b-vy3iar68mb] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ainna-landing *[b-vy3iar68mb],
    .ainna-landing *[b-vy3iar68mb]::before,
    .ainna-landing *[b-vy3iar68mb]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════
   MOBILE MENU — Overlay + slide-in panel
   ═══════════════════════════════════════════════════════ */

.ainna-landing .mobile-menu-overlay[b-vy3iar68mb] {
    display: none;
}

.ainna-landing .mobile-menu-panel[b-vy3iar68mb] {
    display: none;
}

@media (max-width: 768px) {
    .ainna-landing .mobile-menu-overlay[b-vy3iar68mb] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

        .ainna-landing .mobile-menu-overlay.open[b-vy3iar68mb] {
            opacity: 1;
            pointer-events: auto;
        }

    .ainna-landing .mobile-menu-panel[b-vy3iar68mb] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        background: var(--background-primary);
        z-index: 9999;
        padding: 72px 24px 32px;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    }

        .ainna-landing .mobile-menu-panel.open[b-vy3iar68mb] {
            transform: translateX(0);
        }

    .ainna-landing .mobile-menu-links[b-vy3iar68mb] {
        list-style: none;
        padding: 0;
        margin: 0 0 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .ainna-landing .mobile-menu-links li a[b-vy3iar68mb] {
            display: block;
            padding: 14px 4px;
            font-size: var(--text-md);
            font-weight: var(--font-weight-medium);
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            transition: color 0.15s ease;
        }

            .ainna-landing .mobile-menu-links li a:hover[b-vy3iar68mb] {
                color: var(--accent);
            }

    .ainna-landing .mobile-menu-cta[b-vy3iar68mb] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: auto;
        padding: 14px 20px;
        background: var(--accent);
        color: #ffffff;
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        transition: background 0.2s ease, transform 0.15s ease;
    }

        .ainna-landing .mobile-menu-cta:hover[b-vy3iar68mb] {
            background: var(--accent-hover);
        }

        .ainna-landing .mobile-menu-cta i[b-vy3iar68mb] {
            font-size: 1.1em;
        }

    .ainna-landing .mobile-menu-cta--secondary[b-vy3iar68mb] {
        background: transparent;
        color: var(--text-heading);
        border: 1.5px solid var(--border-strong, rgba(0, 0, 0, 0.15));
        margin-top: 8px;
    }

        .ainna-landing .mobile-menu-cta--secondary:hover[b-vy3iar68mb] {
            border-color: var(--accent);
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 4%, transparent);
        }
}

/* ═══════════════════════════════════════════════════════
   NEWSLETTER ERROR STATE
   ═══════════════════════════════════════════════════════ */

.ainna-landing .newsletter-error[b-vy3iar68mb] {
    font-size: 0.72rem;
    color: #f87171;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

    .ainna-landing .newsletter-error i[b-vy3iar68mb] {
        font-size: 10px;
    }

/* ================================================================
   MAGIC LINK — AUTH CTA GROUP + SECONDARY (OUTLINED) BUTTONS
   ────────────────────────────────────────────────────────────────
   Adds the "Continue with email" sibling button at the 5 two-button
   positions (hero, capabilities, gallery, pricing, process) and
   shared hero-cta-email-row.

   Design rules:
     • Secondary buttons mirror the geometry of their primary sibling
       (same padding / radius / font-size / weight). Only the fill
       differs — outlined rather than gradient.
     • Hover state adopts --accent for border + text, with a faint
       accent-tinted background (matches existing .btn-hero-outline).
     • All tokens resolve from design_tokens.css. No new tokens.
     • Signing-in spinner overridden to accent-color on white, since
       the shared spinner was authored for gradient backgrounds.
     • Mobile: stack at ≤480px, the same breakpoint the hero uses.
   ================================================================ */

/* ── Auth CTA group — wraps primary + secondary buttons ── */

.ainna-landing .cta-auth-group[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Section secondary CTA — outlined pill mirroring .btn-cta-primary ── */

.ainna-landing .btn-cta-secondary[b-vy3iar68mb] {
    appearance: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--font);
    line-height: 1;
    gap: 10px;
    padding: 14px 32px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    background: transparent;
    border: 1.5px solid var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-pill);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}

    .ainna-landing .btn-cta-secondary:hover[b-vy3iar68mb] {
        border-color: var(--accent);
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        transform: translateY(-2px);
    }

    .ainna-landing .btn-cta-secondary:active[b-vy3iar68mb] {
        transform: translateY(0);
    }

    .ainna-landing .btn-cta-secondary:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .ainna-landing .btn-cta-secondary i[b-vy3iar68mb] {
        font-size: 0.9em;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .ainna-landing .btn-cta-secondary:hover i[b-vy3iar68mb] {
        opacity: 1;
    }

/* ── Hero email button — matches .btn-hero-split scale, outlined ── */
/* Lives in its own row below hero-cta-buttons (see .hero-cta-email-row) */

.ainna-landing .btn-hero-email[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    min-width: 180px;
    justify-content: center;
    background: transparent;
    color: var(--text-heading);
    border: 1.5px solid rgba(15, 23, 42, 0.18);
    border-radius: var(--radius-full);
    font-family: var(--font-family-primary);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}

    .ainna-landing .btn-hero-email:hover[b-vy3iar68mb] {
        border-color: var(--accent);
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        transform: translateY(-2px);
    }

    .ainna-landing .btn-hero-email:active[b-vy3iar68mb] {
        transform: translateY(0);
    }

    .ainna-landing .btn-hero-email:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .ainna-landing .btn-hero-email i[b-vy3iar68mb] {
        font-size: 0.95em;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .ainna-landing .btn-hero-email:hover i[b-vy3iar68mb] {
        opacity: 1;
    }

/* ── Hero email row — thin spacer below primary hero CTAs ── */

/* ── Pricing trial email button — outlined pill mirroring .pv2-trial-btn ── */

.ainna-landing .pv2-trial-btn-email[b-vy3iar68mb] {
    appearance: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--font);
    line-height: 1;
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    background: transparent;
    border: 1.5px solid var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-pill);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.15s ease;
    flex-shrink: 0;
}

    .ainna-landing .pv2-trial-btn-email:hover[b-vy3iar68mb] {
        border-color: var(--accent);
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        transform: translateY(-1px);
    }

    .ainna-landing .pv2-trial-btn-email:active[b-vy3iar68mb] {
        transform: translateY(0);
    }

    .ainna-landing .pv2-trial-btn-email:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .ainna-landing .pv2-trial-btn-email i[b-vy3iar68mb] {
        font-size: var(--text-xs);
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .ainna-landing .pv2-trial-btn-email:hover i[b-vy3iar68mb] {
        opacity: 1;
    }

    /* ── Signing-in spinner override for outlined (white-bg) buttons ── */
    /* The shared spinner (set in the button reset block earlier in this
   file) uses white tones — designed for gradient backgrounds. On
   white-bg outlined buttons, the spinner must switch to accent color
   for visibility. */

    .ainna-landing .btn-cta-secondary.signing-in[b-vy3iar68mb]::after,
    .ainna-landing .btn-hero-email.signing-in[b-vy3iar68mb]::after,
    .ainna-landing .pv2-trial-btn-email.signing-in[b-vy3iar68mb]::after {
        border-color: rgba(240, 12, 113, 0.2);
        border-top-color: var(--accent);
    }

/* ── Responsive: stack the auth group at narrow widths ── */
/* Same breakpoint the hero uses for its own button stacking (480px).
   Below this width, the primary + secondary stack vertically and
   expand to full width of their container for better tap targets. */

@media (max-width: 480px) {
    .ainna-landing .cta-auth-group[b-vy3iar68mb] {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

        .ainna-landing .cta-auth-group > .btn-cta-primary[b-vy3iar68mb],
        .ainna-landing .cta-auth-group > .btn-cta-secondary[b-vy3iar68mb],
        .ainna-landing .cta-auth-group > .pv2-trial-btn[b-vy3iar68mb],
        .ainna-landing .cta-auth-group > .pv2-trial-btn-email[b-vy3iar68mb] {
            width: 100%;
            max-width: 320px;
            justify-content: center;
        }

    .ainna-landing .btn-hero-email[b-vy3iar68mb] {
        width: 100%;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────────── */
/*  END: MAGIC LINK AUTH CTA STYLES                              */
/* ──────────────────────────────────────────────────────────── */

/* ================================================================
   HERO SCROLL CUE — animated chevron with label
   ────────────────────────────────────────────────────────────────
   Replaces the "How it works" button slot in the hero when
   _magicLinkAvailable is true (since that slot is now occupied by
   the email auth sibling). Sits below the meta line, serves as an
   editorial punctuation + scroll affordance.

   Design rules:
     • Bare chevron, no circle — matches typographic-forward hero
       composition. Keeps visual weight minimal.
     • Label ABOVE chevron ("How it works" then ⌄) — reading order
       is verbal cue first, visual instruction second.
     • Anchored to #trust-capabilities (same target as the pre-flip
       "How it works" button, preserves existing scroll behaviour).
     • Tap target: visual chevron ~24px, anchor padding brings total
       to 44×44 for mobile accessibility.
     • Gentle bounce on the chevron only, not the label. Pauses on
       hover (attention is already captured). Respects prefers-
       reduced-motion (no animation for affected users).
   ================================================================ */

/* Pause the bounce when the user hovers — attention already captured */

@keyframes ainnaHeroScrollCueBounce-b-vy3iar68mb {
    0%, 20%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(2px);
    }

    80% {
        transform: translateY(0);
    }
}

/* Accessibility: honour reduced-motion preference */

/* ──────────────────────────────────────────────────────────── */
/*  END: HERO SCROLL CUE STYLES                                  */
/* ──────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   PROBLEM SECTION — "The AI Paradox"
   ────────────────────────────────────────────────────────────────
   Self-contained block. Sits between hero and trust strip.
   Toggle via _showProblemSection const in @code.
   Mirrors existing section patterns (section-pill, centered header,
   accent rule) so removal is clean — no other styles depend on these.
   ════════════════════════════════════════════════════════════════ */

.ainna-landing .problem-section .container[b-vy3iar68mb] {
    max-width: 1100px;
    margin: 0 auto;
}

.ainna-landing .problem-section .section-pill[b-vy3iar68mb] {
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
}

/* Header */

/* Pain points grid */

/* Closing transition — styled as punctuation, not body copy */

/* Responsive */

/* Accessibility: honour reduced-motion preference */

/* ──────────────────────────────────────────────────────────── */
/*  END: PROBLEM SECTION STYLES                                  */
/* ──────────────────────────────────────────────────────────── */

/* ── Nav auth group — primary + optional secondary, visually joined ──
   Used when both LinkedIn (primary, filled gradient) and Email
   (secondary, icon-only) CTAs are present. The outer group holds
   them together inside a single soft-tinted pill so users read them
   as one affordance with two methods, not two competing buttons.
   ────────────────────────────────────────────────────────────────── */

.ainna-landing .nav-auth-group[b-vy3iar68mb] {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 3px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: var(--radius-pill);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.ainna-landing .navbar.scrolled .nav-auth-group[b-vy3iar68mb] {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Primary pill inside the group — no outer border, gradient fill */
.ainna-landing .btn-cta-nav--grouped[b-vy3iar68mb] {
    background: var(--gradient-cta);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(240, 12, 113, 0.18);
    padding: 7px 18px;
}

    .ainna-landing .btn-cta-nav--grouped:hover[b-vy3iar68mb],
    .ainna-landing .navbar.scrolled .btn-cta-nav--grouped:hover[b-vy3iar68mb] {
        background: var(--gradient-cta);
        filter: brightness(1.05);
        box-shadow: 0 4px 14px rgba(240, 12, 113, 0.28);
    }

.ainna-landing .navbar.scrolled .btn-cta-nav--grouped[b-vy3iar68mb] {
    background: var(--gradient-cta);
    color: #fff;
    border: none;
}

/* Secondary icon-only button — subtle, clearly secondary */
.ainna-landing .btn-nav-email-icon[b-vy3iar68mb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    color: var(--accent);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .ainna-landing .btn-nav-email-icon:hover[b-vy3iar68mb] {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .ainna-landing .btn-nav-email-icon i[b-vy3iar68mb] {
        font-size: 13px;
    }

    .ainna-landing .btn-nav-email-icon:focus-visible[b-vy3iar68mb] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* Responsive: secondary icon hides on tablet/mobile (still in hamburger) */
@media (max-width: 768px) {
    .ainna-landing .btn-nav-email-icon[b-vy3iar68mb] {
        display: none;
    }

    .ainna-landing .nav-auth-group[b-vy3iar68mb] {
        padding: 2px;
        background: transparent;
        border-color: transparent;
    }

    .ainna-landing .btn-cta-nav--grouped[b-vy3iar68mb] {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .ainna-landing .btn-cta-nav--grouped[b-vy3iar68mb] {
        padding: 8px 12px;
        font-size: 0;
        gap: 0;
    }

        .ainna-landing .btn-cta-nav--grouped i[b-vy3iar68mb] {
            font-size: 15px;
        }

        .ainna-landing .btn-cta-nav--grouped .btn-label[b-vy3iar68mb] {
            display: none;
        }
}

/* ─────────────────────────────────────────────────────────────────
   ON-DARK SECTION OVERRIDES
   Applied to sections sitting on #1e0a30 (deep plum):
     .problem-section
     .resources-strip
   ───────────────────────────────────────────────────────────────── */

/* ── Problem section on dark ── */

.ainna-landing .problem-section .section-pill-inner[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

/* ── Resources strip — light treatment (cream bg, dark text) ──
   Default text colors from the base rules apply; no overrides
   needed. Kept as a comment so future maintainers see this slot
   was intentionally reset. */

/* ═══════════════════════════════════════════════════════
   GALLERY DARK MODE — section 5 on #14081f
   ─────────────────────────────────────────────────────
   Two-pass design:
   • Pass 1 (initial): inverted surfaces, dimmed text.
   • Pass 2 (this revision): Mac-window-frame on carousel,
     thumbnails hidden (gallery is a "show", not a navigator),
     output cards + CTA converted to translucent glass to
     belong with the dark canvas instead of fighting it.
   ═══════════════════════════════════════════════════════ */

/* Section pill — invert surface (matches trust-strip pattern) */
.ainna-landing .output-gallery .section-pill-inner[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

/* Header */
.ainna-landing .output-gallery .gallery-title[b-vy3iar68mb] {
    color: var(--on-dark, rgba(255, 255, 255, 0.95));
}

.ainna-landing .output-gallery .gallery-subtitle[b-vy3iar68mb] {
    color: var(--on-dark-2, rgba(255, 255, 255, 0.6));
}

/* Carousel nav buttons */
.ainna-landing .output-gallery .header-nav-btn[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

    .ainna-landing .output-gallery .header-nav-btn:hover[b-vy3iar68mb] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

.ainna-landing .output-gallery .header-nav-counter[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.5);
}

.ainna-landing .output-gallery .counter-current[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.95);
}

/* ═══════════════════════════════════════════════════════
   MAC WINDOW FRAME on the carousel
   ─────────────────────────────────────────────────────
   Faux macOS app-window: dark title bar with traffic-light
   dots, rounded corners, deep elevation shadow. Implemented
   with ::before (title bar) + ::after (traffic lights) so
   no markup change is needed.
   ═══════════════════════════════════════════════════════ */
.ainna-landing .output-gallery .gallery-carousel[b-vy3iar68mb] {
    position: relative;
    background: #1f1f23;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

    /* Title bar */
    .ainna-landing .output-gallery .gallery-carousel[b-vy3iar68mb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 36px;
        background: linear-gradient(180deg, #2c2c2e 0%, #232325 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 2;
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
    }

    /* Traffic-light dots — red, yellow, green, 8px gap */
    .ainna-landing .output-gallery .gallery-carousel[b-vy3iar68mb]::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 16px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ff5f57;
        box-shadow: 20px 0 0 0 #febc2e, 40px 0 0 0 #28c840;
        z-index: 3;
    }

    /* Push slides below the title bar — reserves space for the chrome */
    .ainna-landing .output-gallery .gallery-carousel .gallery-track[b-vy3iar68mb] {
        margin-top: 36px;
    }

/* ═══════════════════════════════════════════════════════
   OUTPUT MINI-CARDS on dark — translucent glass surfaces
   ─────────────────────────────────────────────────────
   Earlier revision kept white cards; on this canvas they
   read as harsh paper rectangles. Glass surfaces belong
   with the canvas rather than fighting it.
   ═══════════════════════════════════════════════════════ */
.ainna-landing .output-gallery .output-mini-card[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

    .ainna-landing .output-gallery .output-mini-card strong[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.94);
    }

    .ainna-landing .output-gallery .output-mini-card span[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.55);
    }

    .ainna-landing .output-gallery .output-mini-card i[b-vy3iar68mb] {
        color: var(--accent-hover);
    }

/* ═══════════════════════════════════════════════════════
   GALLERY CTA — translucent glass card
   ─────────────────────────────────────────────────────
   Same logic as mini-cards. Action surface that belongs
   to the dark scene. Auth buttons retain their gradient.
   ═══════════════════════════════════════════════════════ */
.ainna-landing .output-gallery .gallery-cta-bold[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.ainna-landing .output-gallery .cta-bold-title[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.96);
}

.ainna-landing .output-gallery .cta-note.on-light[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.5);
}

    .ainna-landing .output-gallery .cta-note.on-light .linkedin-auth-inline[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.55);
    }

/* Section nav chevron — full on-dark treatment */
.ainna-landing .output-gallery .section-nav-link[b-vy3iar68mb] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
}

    .ainna-landing .output-gallery .section-nav-link:hover[b-vy3iar68mb] {
        color: rgba(255, 255, 255, 0.85);
    }

/* ── Secondary CTA — on-dark variant for the gallery section.
   Base rule (dark text on light) stays correct for the hero, process
   and capabilities sections, which are on light backgrounds. */
.ainna-landing .output-gallery .btn-cta-secondary[b-vy3iar68mb] {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.22);
}

    .ainna-landing .output-gallery .btn-cta-secondary:hover[b-vy3iar68mb] {
        color: #fff;
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
/* /Components/AinnaPages/Enterprise.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Ainna Enterprise page — scoped styles.
   Inherits the global design tokens (--accent, --ink, --font-family-*,
   --gradient-cta, …) with safe fallbacks, so the page matches the brand
   without touching any existing stylesheet.
   ════════════════════════════════════════════════════════════════ */

.ent-page[b-8rp5hlurwy] {
    --ent-accent: var(--accent, #f4089b);
    --ent-accent-2: var(--accent-hover, #ff4d94);
    --ent-ink: var(--ink, #0f172a);
    --ent-ink-soft: var(--ink-2, #475569);
    --ent-dark: #0c0014;
    --ent-dark-2: #12101e;
    --ent-light: var(--color-bg-warm, #f3f0ec);
    --ent-light-2: var(--color-bg-cool, #f5f3f8);
    --ent-border: var(--border-color, rgba(15, 23, 42, 0.10));
    --ent-radius: 16px;
    --ent-max: var(--container-max, 1180px);
    font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    color: var(--ent-ink);
    background: var(--ent-light);
    line-height: 1.6;
}

    .ent-page h1[b-8rp5hlurwy], .ent-page h2[b-8rp5hlurwy], .ent-page h3[b-8rp5hlurwy], .ent-page h4[b-8rp5hlurwy] {
        font-family: var(--font-family-heading, 'Space Grotesk', 'Inter', sans-serif);
        line-height: 1.15;
        margin: 0;
        color: var(--ent-ink);
    }

/* Headings on dark backgrounds. These MUST be set explicitly: the hero/dark
   sections only set `color:#fff` on the container, which is *inherited* color
   and loses to any global element- or attribute-level rule on h1–h3
   (e.g. `h1 { color: var(--ink) }`). A two-class selector (0,2,0) out-specifies
   that and restores white. This is why the hero H1 was rendering dark. */
.ent-hero .ent-h1[b-8rp5hlurwy],
.ent-section--dark .ent-h2[b-8rp5hlurwy],
.ent-section--dark .ent-h3[b-8rp5hlurwy] {
    color: #fff;
}

.ent-container[b-8rp5hlurwy] {
    max-width: var(--ent-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ent-container--narrow[b-8rp5hlurwy] {
    max-width: 880px;
}

/* Visually-hidden label text: keeps the minimalist placeholder look while giving
   every field a real, programmatic <label> (accessible name + voice-control
   target). Plain rule, not ::deep — these labels are native elements authored
   in the .razor file, so they carry this component's scope. */
.ent-sr-only[b-8rp5hlurwy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Nav ── */
.ent-nav[b-8rp5hlurwy] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 10, 20, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ent-nav-inner[b-8rp5hlurwy] {
    max-width: var(--ent-max);
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ent-logo[b-8rp5hlurwy] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    line-height: 1;
}

    /* block removes the inline-image baseline gap that nudges the row */
    .ent-logo img[b-8rp5hlurwy] {
        display: block;
    }

.ent-logo-suffix[b-8rp5hlurwy] {
    display: inline-block;
    line-height: 1;
    padding-left: 0.2rem; /* sits close to the wordmark; no divider */
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.ent-nav-links[b-8rp5hlurwy] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

    .ent-nav-links a[b-8rp5hlurwy] {
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 500;
        transition: color 0.18s ease;
    }

        .ent-nav-links a:hover[b-8rp5hlurwy] {
            color: #fff;
        }

.ent-nav-cta[b-8rp5hlurwy] {
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b, #ff4d94));
    color: #fff !important;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    font-weight: 600 !important;
}

@media (max-width: 720px) {
    .ent-nav-links a:not(.ent-nav-cta)[b-8rp5hlurwy] {
        display: none;
    }
}

/* ── Hero ── */
.ent-hero[b-8rp5hlurwy] {
    background: radial-gradient(120% 90% at 70% -10%, #221536 0%, var(--ent-dark) 55%);
    color: #fff;
    padding: 5.5rem 0 4.5rem;
    text-align: center;
}

.ent-eyebrow[b-8rp5hlurwy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 2.5rem;
}

    .ent-eyebrow[b-8rp5hlurwy]::before,
    .ent-eyebrow[b-8rp5hlurwy]::after {
        content: "";
        width: 28px;
        height: 2px;
        background: var(--ent-accent);
        border-radius: 1px;
        flex-shrink: 0;
    }

.ent-h1[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 200;
    line-height: 1.15;
    letter-spacing: -0.055em;
}

.ent-h1-line[b-8rp5hlurwy] {
    display: block;
}

    /* Setup line — the landing's lead-statement weight. */
    .ent-h1-line:first-child[b-8rp5hlurwy] {
        font-weight: 500;
    }

/* Payoff line — the landing's "promise" weight (kept full-size here, since the
       insight carries the headline). */
.ent-h1-line--promise[b-8rp5hlurwy] {
    font-weight: 700;
}

.ent-lead[b-8rp5hlurwy] {
    max-width: 580px;
    margin: 2.5rem auto 0;
    font-size: clamp(0.88rem, 1.2vw, 0.95rem);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.85;
    text-align: center;
}

    .ent-lead em[b-8rp5hlurwy] {
        font-style: italic;
        color: var(--ent-accent);
        font-weight: 500;
    }

/* Hero dek: the subtitle between the headline and the shorter lead. */
.ent-hero-dek[b-8rp5hlurwy] {
    max-width: 600px;
    margin: 1.9rem auto 0;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
}

.ent-hero-ctas[b-8rp5hlurwy] {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 5.5rem;
    margin-bottom: 1.5rem;
}




/* ── Buttons ── */
.ent-btn[b-8rp5hlurwy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.ent-btn--primary[b-8rp5hlurwy] {
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b, #ff4d94));
    color: #fff;
    box-shadow: var(--accent-glow, 0 8px 28px rgba(244, 8, 155, 0.35));
}

    .ent-btn--primary:hover[b-8rp5hlurwy] {
        transform: translateY(-2px);
        box-shadow: var(--accent-glow-hover, 0 12px 34px rgba(244, 8, 155, 0.45));
    }

    .ent-btn--primary:disabled[b-8rp5hlurwy] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

.ent-btn--ghost[b-8rp5hlurwy] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

    .ent-btn--ghost:hover[b-8rp5hlurwy] {
        background: rgba(255, 255, 255, 0.14);
    }

.ent-btn--block[b-8rp5hlurwy] {
    width: 100%;
}

/* ── Screenshot frames ── */
/* Product-moment frames. Each screenshot is pre-composed into a transparent
   WebP with its own rounded card, hairline border, soft drop shadow, and (on
   dark sections) a magenta glow. So these containers only size and centre them;
   the transparent padding around each asset is the shadow/glow bleed. */
.ent-shot[b-8rp5hlurwy] {
    margin: 1.6rem auto 0;
    max-width: 1060px;
}

    .ent-shot img[b-8rp5hlurwy] {
        display: block;
        width: 100%;
        height: auto;
    }

/* side: fills its split column (generous cap so the glow bleeds into the gutter
   rather than clipping) */

/* methodology: sits beside the operating-model copy */

/* legacy browser-dot bar is no longer used; hide if any instance remains */

/* ── Sections ── */
.ent-section[b-8rp5hlurwy] {
    padding: 6.5rem 0 5rem;
}

    /* Anchored sections clear the sticky nav when scrolled to. */
    .ent-section[id][b-8rp5hlurwy] {
        scroll-margin-top: 4.5rem;
    }

.ent-section--light[b-8rp5hlurwy] {
    background: var(--ent-light);
}

.ent-section--panel[b-8rp5hlurwy] {
    background: var(--ent-light-2);
}

.ent-section--dark[b-8rp5hlurwy] {
    background: var(--ent-dark);
    color: #fff;
}

.ent-pill[b-8rp5hlurwy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ent-accent);
    background: rgba(244, 8, 155, 0.08);
    border: 1px solid rgba(244, 8, 155, 0.22);
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    margin: 0 0 1.1rem;
}

.ent-pill--dark[b-8rp5hlurwy] {
    color: var(--ent-accent-2);
    background: rgba(255, 77, 148, 0.10);
    border-color: rgba(255, 77, 148, 0.30);
}

.ent-dot[b-8rp5hlurwy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ent-accent-2);
    box-shadow: 0 0 0 0 rgba(255, 77, 148, 0.6);
    animation: ent-pulse-b-8rp5hlurwy 2s infinite;
}

@keyframes ent-pulse-b-8rp5hlurwy {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 148, 0.55);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(255, 77, 148, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 148, 0);
    }
}

.ent-h2[b-8rp5hlurwy] {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.ent-h3[b-8rp5hlurwy] {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.ent-sub[b-8rp5hlurwy] {
    max-width: 720px;
    margin: 1rem 0 0;
    font-size: 1.08rem;
    color: var(--ent-ink-soft);
}

.ent-sub--dark[b-8rp5hlurwy] {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Centred section intros (matches the live-site composition) ── */
/* Section-level modifier + direct-child selectors: only the intro cluster
   centres. Split layouts and card/table content keep their own alignment,
   so the centring never cascades into the section body. */
.ent-section--centered > .ent-container > .ent-pill[b-8rp5hlurwy] {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.ent-section--centered > .ent-container > .ent-h2[b-8rp5hlurwy],
.ent-section--centered > .ent-container > .ent-sub[b-8rp5hlurwy] {
    text-align: center;
}

.ent-section--centered > .ent-container > .ent-sub[b-8rp5hlurwy] {
    margin-left: auto;
    margin-right: auto;
}

.ent-section--centered > .ent-container > .ent-gap-verdict[b-8rp5hlurwy] {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}



/* ── Grids & cards ── */
.ent-grid[b-8rp5hlurwy] {
    display: grid;
    gap: 1.4rem;
    margin-top: 2.6rem;
}

.ent-grid--3[b-8rp5hlurwy] {
    grid-template-columns: repeat(3, 1fr);
}

/* Further-reading cards: an .ent-card that is itself the link. */
.ent-resource[b-8rp5hlurwy] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
}

.ent-resource-more[b-8rp5hlurwy] {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ent-accent);
}

.ent-grid--2[b-8rp5hlurwy] {
    grid-template-columns: repeat(2, 1fr);
}

.ent-grid--4[b-8rp5hlurwy] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
    .ent-grid--3[b-8rp5hlurwy], .ent-grid--4[b-8rp5hlurwy] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .ent-grid--2[b-8rp5hlurwy], .ent-grid--3[b-8rp5hlurwy], .ent-grid--4[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
    }
}

.ent-gap-verdict[b-8rp5hlurwy] {
    max-width: 780px;
    margin: 2.4rem 0 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ent-ink);
}

.ent-card[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-radius);
    padding: 1.8rem 2rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
    transition: background 0.22s ease;
}

    .ent-card:hover[b-8rp5hlurwy] {
        background: rgba(244, 8, 155, 0.05);
    }

    .ent-card > i[b-8rp5hlurwy] {
        display: none;
    }

    /* Icon cards lead with a styled magenta title (no icon). */
    .ent-card:has(> i) h3[b-8rp5hlurwy] {
        color: var(--ent-accent);
        font-size: 1.18rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.25;
        margin-bottom: 0.6rem;
    }

    .ent-card h3[b-8rp5hlurwy],
    .ent-card h4[b-8rp5hlurwy] {
        font-size: 1.12rem;
        font-weight: 600;
        margin-bottom: 0.55rem;
    }

    .ent-card p[b-8rp5hlurwy] {
        margin: 0;
        color: var(--ent-ink-soft);
        font-size: 0.92rem;
        line-height: 1.55;
    }

        .ent-card p + p[b-8rp5hlurwy] {
            margin-top: 0.9rem;
        }




.ent-agent-tag[b-8rp5hlurwy] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ent-accent-2);
    margin-bottom: 0.8rem;
}

/* ── Contrast table ── */










/* ── Split layouts ── */
.ent-split[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2.6rem;
}

.ent-split--reverse > .ent-split-text[b-8rp5hlurwy] {
    order: 2;
}

.ent-split-text p[b-8rp5hlurwy] {
    color: inherit;
    opacity: 0.85;
}

.ent-section--dark .ent-split-text p[b-8rp5hlurwy] {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

@media (max-width: 880px) {
    .ent-split[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .ent-split--reverse > .ent-split-text[b-8rp5hlurwy] {
        order: 0;
    }
}

/* ── Trust cards ── */
.ent-trust[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: 14px;
    padding: 1.3rem;
    transition: background 0.22s ease;
}

    .ent-trust:hover[b-8rp5hlurwy] {
        background: rgba(244, 8, 155, 0.05);
    }

    .ent-trust i[b-8rp5hlurwy] {
        color: var(--ent-accent);
        font-size: 1.15rem;
        margin-bottom: 0.6rem;
        display: block;
    }

    .ent-trust h3[b-8rp5hlurwy] {
        font-size: 0.98rem;
        margin-bottom: 0.35rem;
    }

    .ent-trust p[b-8rp5hlurwy] {
        margin: 0;
        font-size: 0.86rem;
        color: var(--ent-ink-soft);
    }

/* ── Program & form ── */

.ent-form-col[b-8rp5hlurwy] {
    align-self: start;
}

    /* The form card is rendered by the EditForm *component*, and each field by an
   InputText *component*. Blazor CSS isolation does NOT carry this page's scope
   attribute across a child-component boundary, so the plain `.ent-form` /
   `.ent-input` rules never matched those elements — the inputs silently fell
   back to the global stylesheet, which is why they rendered as white boxes
   with the global input margins (the intro text and button style correctly
   only because they are native elements authored in this .razor file).
   `::deep`, anchored on the scoped native wrapper `.ent-form-col`, reaches
   through the boundary. */
    .ent-form-col[b-8rp5hlurwy]  .ent-form {
        background: var(--ent-dark-2);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--ent-radius);
        padding: 1.8rem;
        display: grid;
        gap: 0.85rem;
    }




    .ent-form-col[b-8rp5hlurwy]  .ent-input {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;
        padding: 0.85rem 1rem;
        color: #fff;
        font-family: inherit;
        font-size: 0.97rem;
        line-height: 1.4;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

        .ent-form-col[b-8rp5hlurwy]  .ent-input::placeholder {
            color: rgba(255, 255, 255, 0.45);
        }

        .ent-form-col[b-8rp5hlurwy]  .ent-input:focus {
            outline: none;
            border-color: var(--ent-accent-2);
            background: rgba(255, 255, 255, 0.09);
            box-shadow: 0 0 0 3px rgba(255, 77, 148, 0.18);
        }

        /* Chrome forces a near-white fill on autofilled inputs; pin it back to the
       dark field so an autofilled value doesn't reproduce the white-box look. */
        .ent-form-col[b-8rp5hlurwy]  .ent-input:-webkit-autofill,
        .ent-form-col[b-8rp5hlurwy]  .ent-input:-webkit-autofill:focus {
            -webkit-text-fill-color: #fff;
            caret-color: #fff;
            box-shadow: 0 0 0 1000px var(--ent-dark-2) inset;
            transition: background-color 9999s ease-in-out 0s;
        }

        /* Blazor adds valid/invalid/modified classes to InputText; keep the
       resting border calm so validation styling doesn't fight the dark field. */
        .ent-form-col[b-8rp5hlurwy]  .ent-input.valid.modified {
            border-color: rgba(255, 255, 255, 0.22);
        }

        .ent-form-col[b-8rp5hlurwy]  .ent-input.invalid {
            border-color: rgba(255, 95, 87, 0.6);
            box-shadow: 0 0 0 3px rgba(255, 95, 87, 0.12);
        }

            .ent-form-col[b-8rp5hlurwy]  .ent-input.invalid:focus {
                border-color: rgba(255, 95, 87, 0.85);
                box-shadow: 0 0 0 3px rgba(255, 95, 87, 0.2);
            }

    .ent-form-col[b-8rp5hlurwy]  .ent-btn--block {
        margin-top: 0.3rem;
    }

    /* Busy state while the lead form POSTs: cleared automatically when the
       Enhance'd response patches the form (or on full reload). JS only adds the
       class — never disables the button mid-submit. */
    .ent-form-col[b-8rp5hlurwy]  .ent-form.is-submitting {
        cursor: progress;
    }

        .ent-form-col[b-8rp5hlurwy]  .ent-form.is-submitting .ent-btn--primary {
            pointer-events: none;
            cursor: progress;
        }

            .ent-form-col[b-8rp5hlurwy]  .ent-form.is-submitting .ent-btn--primary i {
                display: none;
            }

            .ent-form-col[b-8rp5hlurwy]  .ent-form.is-submitting .ent-btn--primary::after {
                content: "";
                width: 1em;
                height: 1em;
                border: 2px solid rgba(255, 255, 255, 0.45);
                border-top-color: #fff;
                border-radius: 50%;
                animation: ent-btn-spin-b-8rp5hlurwy 0.7s linear infinite;
            }

@keyframes ent-btn-spin-b-8rp5hlurwy {
    to {
        transform: rotate(360deg);
    }
}

.ent-success[b-8rp5hlurwy] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ent-radius);
    padding: 2.6rem 2rem;
    text-align: center;
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    animation: ent-success-in-b-8rp5hlurwy 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ent-success-icon[b-8rp5hlurwy] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ent-accent);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 10px 28px -8px rgba(244, 8, 155, 0.55);
}

.ent-success-text[b-8rp5hlurwy] {
    display: grid;
    gap: 0.4rem;
}

    .ent-success-text strong[b-8rp5hlurwy] {
        color: #fff;
        font-size: 1.18rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .ent-success-text span[b-8rp5hlurwy] {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.95rem;
        line-height: 1.55;
    }

@keyframes ent-success-in-b-8rp5hlurwy {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ent-form-error[b-8rp5hlurwy] {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 95, 87, 0.12);
    border: 1px solid rgba(255, 95, 87, 0.4);
    color: #ffb4af;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

    .ent-form-error i[b-8rp5hlurwy] {
        flex: 0 0 auto;
        font-size: 0.95rem;
    }

/* ── FAQ accordion: native <details>/<summary>, zero script ── */
.ent-faq-list[b-8rp5hlurwy] {
    margin-top: 2.2rem;
    display: grid;
    gap: 0.9rem;
}

.ent-faq[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}

    .ent-faq[open][b-8rp5hlurwy] {
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

.ent-faq-trigger[b-8rp5hlurwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: 1.15rem 1.4rem;
    list-style: none;
}

    .ent-faq-trigger[b-8rp5hlurwy]::-webkit-details-marker {
        display: none;
    }

    .ent-faq-trigger[b-8rp5hlurwy]::marker {
        content: none;
    }

.ent-faq-q[b-8rp5hlurwy] {
    font-size: 1.04rem;
    font-weight: 600;
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    margin: 0;
}

    .ent-faq-q i[b-8rp5hlurwy] {
        color: var(--ent-accent);
        font-size: 0.9em;
    }

.ent-faq-chevron[b-8rp5hlurwy] {
    color: var(--ent-ink-soft);
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.ent-faq[open] .ent-faq-chevron[b-8rp5hlurwy] {
    transform: rotate(180deg);
}

.ent-faq-a[b-8rp5hlurwy] {
    padding: 0 1.4rem 1.3rem;
    color: var(--ent-ink-soft);
}

    .ent-faq-a p[b-8rp5hlurwy] {
        margin: 0 0 0.7rem;
    }

        .ent-faq-a p:last-child[b-8rp5hlurwy] {
            margin-bottom: 0;
        }

/* ── Footer (corporate) ── */
.ent-footer[b-8rp5hlurwy] {
    background: var(--ent-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 2.2rem;
}

.ent-footer-grid[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1.4fr;
    gap: 3rem;
    padding-top: 5rem;
    padding-bottom: 2.6rem;
}

@media (max-width: 920px) {
    .ent-footer-grid[b-8rp5hlurwy] {
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
    }

    .ent-footer-brand[b-8rp5hlurwy] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .ent-footer-grid[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
    }
}

.ent-footer-logo img[b-8rp5hlurwy] {
    display: block;
}

.ent-footer-tag[b-8rp5hlurwy] {
    margin: 1.1rem 0 0;
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.88);
}



.ent-footer-mission[b-8rp5hlurwy] {
    display: grid;
    gap: 1.4rem;
}

.ent-footer-block h3[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ent-accent-2);
    margin: 0 0 0.5rem;
}

.ent-footer-block p[b-8rp5hlurwy] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.64);
}

.ent-footer-block em[b-8rp5hlurwy] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
}

.ent-footer-links[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.ent-footer-col h4[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.9rem;
}

.ent-footer-col a[b-8rp5hlurwy] {
    display: block;
    padding: 0.28rem 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.16s ease;
}

    .ent-footer-col a:hover[b-8rp5hlurwy] {
        color: #fff;
    }

.ent-footer-legal[b-8rp5hlurwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

    .ent-footer-legal nav[b-8rp5hlurwy] {
        display: flex;
        gap: 1.2rem;
        flex-wrap: wrap;
    }

    .ent-footer-legal a[b-8rp5hlurwy] {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
    }

        .ent-footer-legal a:hover[b-8rp5hlurwy] {
            color: #fff;
        }

.ent-footer-note[b-8rp5hlurwy] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.76rem;
    line-height: 1.55;
    margin: 1.4rem 0 0;
    max-width: 860px;
}


/* ── Engine chart (operating system) ── */
.os-flow[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 1.4rem);
    max-width: 1080px;
    margin: 3rem auto 0;
}

.os-flow-node[b-8rp5hlurwy] {
    max-width: 300px;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .os-flow-node:hover[b-8rp5hlurwy],
    .os-flow-node:focus-within[b-8rp5hlurwy] {
        transform: translateY(-3px);
        border-color: rgba(244, 8, 155, 0.45);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    }

.os-flow-node--in[b-8rp5hlurwy] {
    justify-self: end;
    text-align: right;
}

.os-flow-node--out[b-8rp5hlurwy] {
    justify-self: start;
    text-align: left;
}

.os-flow-eyebrow[b-8rp5hlurwy] {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ent-accent);
}

.os-flow-text[b-8rp5hlurwy] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ent-ink-soft);
}

.os-flow-link[b-8rp5hlurwy] {
    display: flex;
    align-items: center;
    width: clamp(26px, 4vw, 54px);
}

.os-flow-bar[b-8rp5hlurwy] {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(244, 8, 155, 0.15), var(--ent-accent));
}

    .os-flow-bar[b-8rp5hlurwy]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
        animation: os-shimmer-b-8rp5hlurwy 2.2s linear infinite;
    }

.os-flow-head[b-8rp5hlurwy] {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--ent-accent);
}

.os-engine-col[b-8rp5hlurwy] {
    --os-size: clamp(220px, 30vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.os-engine[b-8rp5hlurwy] {
    position: relative;
    width: var(--os-size);
    height: var(--os-size);
    display: grid;
    place-items: center;
    flex: none;
}

.os-ring[b-8rp5hlurwy] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ent-accent-2), var(--ent-accent) 24%, rgba(244, 8, 155, 0.12) 50%, var(--ent-accent) 76%, var(--ent-accent-2));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 calc(100% - 8px));
    filter: drop-shadow(0 0 16px rgba(244, 8, 155, 0.28));
    animation: os-spin-b-8rp5hlurwy 16s linear infinite;
}

.os-dot[b-8rp5hlurwy] {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 9px 2px var(--ent-accent-2);
    animation: os-orbit-b-8rp5hlurwy 16s linear infinite;
}

.os-dot--2[b-8rp5hlurwy] {
    animation-delay: -5.33s;
}

.os-dot--3[b-8rp5hlurwy] {
    animation-delay: -10.66s;
}

.os-core[b-8rp5hlurwy] {
    position: relative;
    z-index: 2;
    width: calc(var(--os-size) - 16px);
    height: calc(var(--os-size) - 16px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, var(--ent-dark-2), var(--ent-dark));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10%;
}

.os-core-logo[b-8rp5hlurwy] {
    height: calc(var(--os-size) * 0.072);
    min-height: 16px;
    opacity: 0.96;
}

.os-core-text[b-8rp5hlurwy] {
    margin: 0.5rem 0 0;
    font-size: calc(var(--os-size) * 0.045);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}

.os-stages[b-8rp5hlurwy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

.os-stage[b-8rp5hlurwy] {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(244, 8, 155, 0.4);
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ent-accent-2);
    animation: os-pulse-b-8rp5hlurwy 3.6s ease-in-out infinite;
}

.os-stage--2[b-8rp5hlurwy] {
    animation-delay: 1.2s;
}

.os-stage--3[b-8rp5hlurwy] {
    animation-delay: 2.4s;
}

.os-flow-caption[b-8rp5hlurwy] {
    max-width: 720px;
    margin: 2.4rem auto 0;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--ent-ink-soft);
}

@keyframes os-spin-b-8rp5hlurwy {
    to {
        transform: rotate(360deg);
    }
}

@keyframes os-orbit-b-8rp5hlurwy {
    from {
        transform: rotate(0deg) translateY(calc(var(--os-size) / -2 + 4px));
    }

    to {
        transform: rotate(360deg) translateY(calc(var(--os-size) / -2 + 4px));
    }
}

@keyframes os-pulse-b-8rp5hlurwy {
    0%, 100% {
        opacity: 0.45;
        background: transparent;
    }

    50% {
        opacity: 1;
        background: rgba(244, 8, 155, 0.14);
    }
}

@keyframes os-shimmer-b-8rp5hlurwy {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(350%);
    }
}

@media (max-width: 960px) {
    .os-flow[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.85rem;
    }

    .os-engine-col[b-8rp5hlurwy] {
        --os-size: clamp(208px, 58vw, 300px);
    }

    .os-flow-node[b-8rp5hlurwy] {
        max-width: 460px;
        justify-self: center;
    }

    .os-flow-node--in[b-8rp5hlurwy],
    .os-flow-node--out[b-8rp5hlurwy] {
        text-align: center;
    }

    .os-flow-link[b-8rp5hlurwy] {
        transform: rotate(90deg);
        width: 34px;
    }
}

@media (max-width: 520px) {
    .os-core-text[b-8rp5hlurwy] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .os-ring[b-8rp5hlurwy],
    .os-stage[b-8rp5hlurwy] {
        animation: none;
    }

    .os-dot[b-8rp5hlurwy] {
        display: none;
    }

    .os-flow-bar[b-8rp5hlurwy]::after {
        display: none;
    }

    .os-stage[b-8rp5hlurwy] {
        opacity: 1;
    }
}


/* ── Motion preferences ── */
@media (prefers-reduced-motion: reduce) {
    .ent-dot[b-8rp5hlurwy] {
        animation: none;
    }

    .ent-btn[b-8rp5hlurwy], .ent-faq-chevron[b-8rp5hlurwy] {
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   Long-read additions: thesis quotes, book references, operating-
   system blocks, maturity ladder, transformation phases, stats.
   ════════════════════════════════════════════════════════════════ */

/* ── Thesis & quote ── */
/* Distinct panel tone: a deep violet that does NOT fade to the architecture
   section's near-black, so the two consecutive dark sections read as separate
   blocks rather than one continuous void. A faint magenta glow up top + a
   hairline base edge mark the seam. */
.ent-thesis[b-8rp5hlurwy] {
    background: radial-gradient(90% 70% at 50% -10%, rgba(244, 8, 155, 0.12), transparent 60%), linear-gradient(180deg, #1d1437 0%, #181030 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}





.ent-ast[b-8rp5hlurwy] {
    color: var(--ent-accent-2);
}

.ent-evidence[b-8rp5hlurwy] {
    max-width: 720px;
    margin: 1.6rem auto 0;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.5);
}

    .ent-evidence em[b-8rp5hlurwy] {
        font-style: italic;
        color: rgba(255, 255, 255, 0.68);
    }

    .ent-evidence a[b-8rp5hlurwy] {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .ent-evidence a:hover[b-8rp5hlurwy] {
            color: var(--ent-accent-2);
        }

.ent-thesis-cta[b-8rp5hlurwy] {
    text-align: center;
    margin: 2.2rem 0 0;
}

.ent-sub--dark a[b-8rp5hlurwy] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

    .ent-sub--dark a:hover[b-8rp5hlurwy] {
        color: var(--ent-accent-2);
    }








/* ── Operating-system blocks ── */



.ent-os-num[b-8rp5hlurwy] {
    margin-right: 0.85rem;
    color: var(--ent-accent);
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
}


/* ── Maturity ladder ── */
.ent-ladder[b-8rp5hlurwy] {
    list-style: none;
    margin: 2.8rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.7rem;
}

.ent-ladder-step[b-8rp5hlurwy] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 132px;
    padding: 1.4rem 0.5rem;
    border: 1px solid var(--ent-border);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.ent-ladder-num[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--ent-ink-soft);
}

.ent-ladder-label[b-8rp5hlurwy] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--ent-ink-soft);
}

/* Progression: neutral tiles warm into magenta toward the goal. */
.ent-ladder-step:nth-child(4)[b-8rp5hlurwy] {
    background: rgba(244, 8, 155, 0.05);
    border-color: rgba(244, 8, 155, 0.16);
}

    .ent-ladder-step:nth-child(4) .ent-ladder-num[b-8rp5hlurwy] {
        color: var(--ent-ink);
    }

.ent-ladder-step:nth-child(5)[b-8rp5hlurwy] {
    background: rgba(244, 8, 155, 0.09);
    border-color: rgba(244, 8, 155, 0.24);
}

.ent-ladder-step:nth-child(6)[b-8rp5hlurwy] {
    background: rgba(244, 8, 155, 0.16);
    border-color: rgba(244, 8, 155, 0.32);
}

    .ent-ladder-step:nth-child(5) .ent-ladder-num[b-8rp5hlurwy],
    .ent-ladder-step:nth-child(6) .ent-ladder-num[b-8rp5hlurwy] {
        color: var(--ent-accent);
    }

.ent-ladder-final[b-8rp5hlurwy] {
    background: var(--ent-accent);
    border-color: var(--ent-accent);
    box-shadow: 0 14px 34px rgba(244, 8, 155, 0.32);
}

    .ent-ladder-final .ent-ladder-num[b-8rp5hlurwy],
    .ent-ladder-final .ent-ladder-label[b-8rp5hlurwy] {
        color: #fff;
    }

.ent-ladder-goal[b-8rp5hlurwy] {
    position: absolute;
    top: -0.72rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: var(--ent-accent);
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(244, 8, 155, 0.35);
}

@media (max-width: 680px) {
    .ent-ladder[b-8rp5hlurwy] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .ent-ladder-step[b-8rp5hlurwy] {
        min-height: 104px;
        padding: 1rem 0.4rem;
    }

    .ent-ladder-num[b-8rp5hlurwy] {
        font-size: 1.9rem;
    }
}

/* ── Journey summary cards ── */
.ent-journey-cards[b-8rp5hlurwy] {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.ent-journey-card[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-radius);
    padding: 1.8rem;
    text-align: left;
}

.ent-journey-card-head[b-8rp5hlurwy] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-journey-card-num[b-8rp5hlurwy] {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--ent-accent);
}

.ent-journey-card-body[b-8rp5hlurwy] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ent-ink-soft);
}

@media (max-width: 780px) {
    .ent-journey-cards[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
    }
}

/* ── Live deployment screenshot ── */
/* raw capture, so the frame, shadow and bottom-fade are drawn here rather
   than baked into the asset (cf. the pre-composed .ent-shot WebPs above) */
.ent-deploy[b-8rp5hlurwy] {
    margin: 2rem auto 4.5rem;
    max-width: 1120px;
    perspective: 1500px;
}

.ent-deploy-frame[b-8rp5hlurwy] {
    position: relative;
    border-radius: var(--ent-radius);
    overflow: hidden;
    border: 1px solid var(--ent-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 26px 60px -26px rgba(15, 23, 42, 0.30);
    transform: rotateX(8deg);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ent-deploy:hover .ent-deploy-frame[b-8rp5hlurwy] {
    transform: rotateX(3deg);
}

.ent-deploy-frame img[b-8rp5hlurwy] {
    display: block;
    width: 100%;
    height: auto;
}

/* fade the mid-scroll cut-off rows into the capture's own white */
.ent-deploy-frame[b-8rp5hlurwy]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(40px, 8%, 88px);
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

@media (max-width: 768px) {
    .ent-deploy-frame[b-8rp5hlurwy] {
        transform: none;
    }

    .ent-deploy-cap[b-8rp5hlurwy] {
        margin-top: 1.4rem;
    }
}

.ent-deploy-cap[b-8rp5hlurwy] {
    margin: 2.6rem auto 0;
    max-width: 640px;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    color: var(--ent-ink-soft);
}

/* ── Coverage fixes ── */
.ent-shot--hero[b-8rp5hlurwy] {
    position: relative;
    max-width: 1120px;
    margin: 2.8rem auto 0;
    perspective: 1500px;
}

    .ent-shot--hero img[b-8rp5hlurwy] {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
        transform: rotateX(8deg);
        transform-origin: center center;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ent-shot--hero:hover img[b-8rp5hlurwy] {
        transform: rotateX(3deg);
    }

@media (max-width: 768px) {
    .ent-shot--hero img[b-8rp5hlurwy] {
        transform: none;
    }
}

/* ── Independent read (ask-your-AI trial) ── */
/* Compact coda after the FAQ: a bordered card on the light base so it
   reads as a deliberate aside that never competes with the contact section below. */
.ent-section--trial[b-8rp5hlurwy] {
    padding-top: 0;
}

.ent-trial-card[b-8rp5hlurwy] {
    text-align: center;
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-radius);
    padding: 3.2rem 2rem 3rem;
}

    .ent-trial-card .ent-trial-title[b-8rp5hlurwy] {
        font-size: clamp(1.3rem, 2.2vw, 1.65rem);
        margin: 0 0 2.25rem;
    }

.ent-trial-ctas[b-8rp5hlurwy] {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.ent-btn--outline[b-8rp5hlurwy] {
    background: #fff;
    color: var(--ent-ink);
    border: 1px solid var(--ent-border);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .ent-btn--outline:hover[b-8rp5hlurwy] {
        border-color: var(--ent-accent);
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    }

    .ent-btn--outline .fa-comment-dots[b-8rp5hlurwy] {
        color: var(--ent-accent);
    }

.ent-trial-ext[b-8rp5hlurwy] {
    font-size: 0.7em;
    opacity: 0.45;
}

@media (max-width: 640px) {
    .ent-trial-card[b-8rp5hlurwy] {
        padding: 2.4rem 1.25rem;
    }

        .ent-trial-card .ent-trial-title[b-8rp5hlurwy] {
            margin-bottom: 1.6rem;
        }

    .ent-trial-ctas .ent-btn[b-8rp5hlurwy] {
        width: 100%;
    }
}

/* ── Closing CTA section ── */
/* The final act gets its own zone so it does NOT merge into the flat near-black
   footer below it. Violet-tinted panel with a magenta glow (same family as the
   provenance panel, tuned brighter as the conversion moment). Kept alongside
   .ent-section--dark on the element, so white headings / light split text are
   inherited; only the background is overridden here, hence the rule lives last. */
.ent-section--contact[b-8rp5hlurwy] {
    background: radial-gradient(70% 55% at 50% 0%, rgba(244, 8, 155, 0.18), transparent 60%), linear-gradient(180deg, #1f1640 0%, #15101f 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Centered head (eyebrow + headline) above the description/form split. */
.ent-contact-head[b-8rp5hlurwy] {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.ent-contact-title[b-8rp5hlurwy] {
    max-width: 600px;
    margin: 0 0 0.9rem;
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.ent-contact-sub[b-8rp5hlurwy] {
    max-width: 600px;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

    .ent-contact-sub + .ent-contact-sub[b-8rp5hlurwy] {
        margin-top: 1.1rem;
    }

.ent-form-note[b-8rp5hlurwy] {
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Before → after shift rows (replaces the old comparison table) ── */
/* Not a table: each row is one statement that meets at the arrow — the "before"
   right-aligned into the centre, the "after" left-aligned out of it. */
.ent-shifts[b-8rp5hlurwy] {
    max-width: 880px;
    margin: 2.2rem auto 0;
}

.ent-shift-legend[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.8rem;
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ent-shift-legend-from[b-8rp5hlurwy] {
    text-align: right;
    color: var(--ent-ink-soft);
}

.ent-shift-legend-to[b-8rp5hlurwy] {
    text-align: left;
    color: var(--ent-accent);
}

.ent-shift-list[b-8rp5hlurwy] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ent-shift[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ent-border);
}

    .ent-shift:last-child[b-8rp5hlurwy] {
        border-bottom: none;
    }

.ent-shift-from[b-8rp5hlurwy] {
    text-align: right;
    color: var(--ent-ink-soft);
    font-size: 0.97rem;
    line-height: 1.4;
}

.ent-shift-arrow[b-8rp5hlurwy] {
    color: var(--ent-accent);
    font-size: 0.85rem;
}

.ent-shift-to[b-8rp5hlurwy] {
    text-align: left;
    color: var(--ent-ink);
    font-weight: 600;
    font-size: 0.97rem;
    line-height: 1.4;
}

@media (max-width: 620px) {
    .ent-shift-legend[b-8rp5hlurwy] {
        display: none;
    }

    .ent-shift[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 1rem 0;
        text-align: center;
    }

    .ent-shift-from[b-8rp5hlurwy],
    .ent-shift-to[b-8rp5hlurwy] {
        text-align: center;
    }

    .ent-shift-arrow i[b-8rp5hlurwy] {
        transform: rotate(90deg);
    }
}

/* ── Definition intro: two cards + a wide comparison card ── */
/* Same white/elevated language as .ent-card; fills the section width. */
.ent-def-cards[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin: 2.6rem 0 1.4rem;
    text-align: left;
}

.ent-def-card[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-radius);
    padding: 1.9rem 2.1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
}

.ent-def-card--wide[b-8rp5hlurwy] {
    margin: 0 0 1.6rem;
    padding: 2rem 2.3rem 1.5rem;
}

.ent-def-card .ent-sub[b-8rp5hlurwy] {
    max-width: none;
    margin: 0;
}

.ent-def-card--wide .ent-shifts[b-8rp5hlurwy] {
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .ent-def-cards[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
    }
}

/* ── Operating-system pillars (replaces the stacked .ent-os-block text) ── */
.ent-pillar[b-8rp5hlurwy] {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: var(--ent-radius);
    padding: 2.2rem 2.4rem;
    margin-top: 1.5rem;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 22px 48px -28px rgba(15, 23, 42, 0.16);
}

.ent-pillar-head[b-8rp5hlurwy] {
    display: flex;
    align-items: baseline;
    margin-bottom: 1.1rem;
}

    .ent-pillar-head h3[b-8rp5hlurwy] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

.ent-pillar > p[b-8rp5hlurwy] {
    margin: 0;
    max-width: 78ch;
    color: var(--ent-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}

.ent-pillar-duo[b-8rp5hlurwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin-top: 1.4rem;
}

    .ent-pillar-duo .ent-pillar[b-8rp5hlurwy] {
        margin-top: 0;
    }

/* Workshop items nested in the feature pillar: a box-less feature grid (no fills
   or borders) so the pillar stays one calm surface instead of cards-in-cards. */
.ent-pillar-cards[b-8rp5hlurwy] {
    margin-top: 2.1rem;
    gap: 2.4rem 2rem;
}

    .ent-pillar-cards .ent-card[b-8rp5hlurwy] {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

        /* No icon here either; the styled title carries the card. */
        .ent-pillar-cards .ent-card h4[b-8rp5hlurwy] {
            color: var(--ent-accent);
            font-size: 1.12rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            line-height: 1.3;
            margin-bottom: 0.5rem;
        }

@media (max-width: 820px) {
    .ent-pillar-duo[b-8rp5hlurwy] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ent-pillar[b-8rp5hlurwy] {
        padding: 1.5rem 1.4rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   V2 VISUAL LAYER — "Instrument & Monograph" refinement pass.
   Appended override layer: same class names, later order wins.
   Concept: Ainna is an assessor built on a published methodology —
   so the page reads as a precision instrument documented in a fine
   monograph. One bold element (the verdict lines); everything else
   quiet, confident, structural. Brand-compatible: magenta stays the
   signal; violet (already latent in the hero) becomes its gradient
   partner; papers alternate warm ↔ violet-wash for real chaptering.
   ════════════════════════════════════════════════════════════════ */

.ent-page[b-8rp5hlurwy] {
    /* PALETTE "Porcelain & Petrol" — neutrals carry no brand hue, so the
       magenta signal is rare and loud. Petrol is the instrument secondary:
       structure and the sensing band. Violet stays atmosphere-on-dark only. */
    --ent-ink: #1a2422; /* petrol-graphite ink */
    --ent-ink-soft: #4d5a56;
    --ent-petrol: #0e6f66; /* instrument secondary: sensing band, quiet structure */
    --ent-violet: #8b31ff; /* ATMOSPHERE ONLY: dark-surface glows + the H1 gradient. Never on paper. */
    --ent-grad: linear-gradient(115deg, #f4089b 0%, #8b31ff 92%); /* atmosphere gradient — large dark areas only */
    --ent-light: #fafaf7; /* porcelain */
    --ent-light-2: #f0f3f1; /* mist */
    --ent-sense: #e6efeb; /* the sensing band — deepest paper, petrol-tinted */
    --ent-border: rgba(26, 36, 34, 0.11);
    --ent-radius: 14px;
}

/* ── Type: confidence over airiness ── */
.ent-h2[b-8rp5hlurwy] {
    font-weight: 560;
    letter-spacing: -0.035em;
    font-size: clamp(2.05rem, 4vw, 3.05rem);
}

.ent-h1[b-8rp5hlurwy] {
    letter-spacing: -0.045em;
}

    /* The promise line carries the page's one gradient-text moment. */
    .ent-h1 .ent-h1-line--promise[b-8rp5hlurwy] {
        background: linear-gradient(100deg, #ffffff 8%, #ff7ac0 55%, #b07bff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #fff; /* fallback when clip unsupported */
    }

.ent-sub[b-8rp5hlurwy] {
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 66ch;
}

/* ── Chapter marks: pills lose the template chip, gain structure ── */
.ent-pill[b-8rp5hlurwy] {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--ent-ink-soft);
}

    .ent-pill[b-8rp5hlurwy]::before {
        content: "";
        width: 30px;
        height: 3px;
        border-radius: 2px;
        background: rgba(26, 36, 34, 0.55);
        flex-shrink: 0;
    }

.ent-pill--dark[b-8rp5hlurwy] {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.62);
}

/* ── Sections: real chapter rhythm ── */
.ent-section[b-8rp5hlurwy] {
    padding: clamp(4.8rem, 8vw, 7rem) 0 clamp(3.8rem, 6vw, 5.2rem);
}

.ent-section--panel[b-8rp5hlurwy] {
    background: var(--ent-light-2);
}

/* The sensing band: the innovation sensory system gets the instrument surface. */
.ent-section--sense[b-8rp5hlurwy] {
    background: linear-gradient(180deg, #eaf2ee 0%, var(--ent-sense) 100%);
}

    .ent-section--sense .ent-pill[b-8rp5hlurwy]::before {
        background: var(--ent-petrol);
    }

    .ent-section--sense .ent-pill[b-8rp5hlurwy] {
        color: var(--ent-petrol);
    }

    .ent-section--sense .ent-card:hover[b-8rp5hlurwy] {
        border-color: rgba(14, 111, 102, 0.45);
    }

    .ent-section--sense .ent-gap-verdict[b-8rp5hlurwy]::before {
        background: var(--ent-petrol);
    }

/* ── Hero: depth without noise — twin glows + faint instrument grid ── */
.ent-hero[b-8rp5hlurwy] {
    background: radial-gradient(52% 42% at 82% -6%, rgba(139, 49, 255, 0.30) 0%, transparent 70%), radial-gradient(46% 38% at 12% 0%, rgba(244, 8, 155, 0.22) 0%, transparent 72%), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px), radial-gradient(120% 90% at 70% -10%, #221536 0%, var(--ent-dark) 55%);
    background-size: auto, auto, 26px 26px, auto;
}

.ent-section--dark[b-8rp5hlurwy] {
    background: radial-gradient(40% 34% at 88% 0%, rgba(139, 49, 255, 0.18) 0%, transparent 70%), radial-gradient(34% 30% at 6% 100%, rgba(244, 8, 155, 0.12) 0%, transparent 72%), var(--ent-dark);
}

/* ── Cards: border-forward, hierarchy over uniformity ── */
.ent-card[b-8rp5hlurwy] {
    box-shadow: none;
    border-radius: var(--ent-radius);
    border-color: var(--ent-border);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .ent-card:hover[b-8rp5hlurwy] {
        background: #fff;
        border-color: rgba(244, 8, 155, 0.38);
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(23, 16, 51, 0.08);
    }

.ent-def-card[b-8rp5hlurwy] {
    box-shadow: none;
}

    .ent-def-card .ent-sub[b-8rp5hlurwy] {
        font-size: 1.02rem;
    }

/* ── The agent trio: the one card family allowed a signal rail ── */
.ent-agent-tag[b-8rp5hlurwy] {
    background: var(--ent-accent);
    color: #fff;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

/* ── THE signature element: verdict lines as typographic instrument ── */
.ent-gap-verdict[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 640;
    line-height: 1.35;
    letter-spacing: -0.02em;
    max-width: 840px;
    margin-top: 3rem;
    position: relative;
    padding-top: 1.15rem;
}

    .ent-gap-verdict[b-8rp5hlurwy]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 56px;
        height: 4px;
        border-radius: 2px;
        background: var(--ent-accent);
    }

.os-flow-caption[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    font-weight: 560;
    letter-spacing: -0.015em;
    color: var(--ent-ink);
}

/* ── Shift ledger: the argument, sharpened ── */
.ent-shift-legend-to[b-8rp5hlurwy] {
    color: var(--ent-accent);
}

.ent-shift[b-8rp5hlurwy] {
    border-bottom-color: rgba(23, 16, 51, 0.08);
}

.ent-shift-arrow[b-8rp5hlurwy] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(244, 8, 155, 0.10);
    color: var(--ent-accent);
    font-size: 0.7rem;
}

.ent-shift-to[b-8rp5hlurwy] {
    font-weight: 640;
}

/* ── Trust: quiet list-tiles, not more cards ── */
.ent-trust[b-8rp5hlurwy] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ent-radius);
    padding: 1.35rem 1.4rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

    .ent-trust:hover[b-8rp5hlurwy] {
        background: rgba(255, 255, 255, 0.7);
        border-color: rgba(244, 8, 155, 0.28);
        transform: none;
    }

    .ent-trust i[b-8rp5hlurwy] {
        color: var(--ent-petrol);
        background: rgba(14, 111, 102, 0.10);
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }

/* ── Maturity ladder: the goal earns the gradient ── */
.ent-ladder-final[b-8rp5hlurwy] {
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b, #ff4d94));
    border-color: transparent;
}

    .ent-ladder-final .ent-ladder-goal[b-8rp5hlurwy] {
        color: #ffd7ee;
    }

/* ── Journey + resource cards inherit the border-forward language ── */
.ent-journey-card[b-8rp5hlurwy],
.ent-resource[b-8rp5hlurwy] {
    box-shadow: none;
}

/* ── Focus visibility: instrument-grade keyboard affordance ── */
.ent-page a:focus-visible[b-8rp5hlurwy],
.ent-page button:focus-visible[b-8rp5hlurwy],
.ent-page summary:focus-visible[b-8rp5hlurwy],
.ent-page .ent-input:focus-visible[b-8rp5hlurwy] {
    outline: 3px solid rgba(244, 8, 155, 0.65);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Motion discipline ── */
@media (prefers-reduced-motion: reduce) {
    .ent-card[b-8rp5hlurwy],
    .ent-card:hover[b-8rp5hlurwy],
    .ent-trust[b-8rp5hlurwy],
    .ent-gap-verdict[b-8rp5hlurwy] {
        transition: none;
        transform: none;
    }
}

@media (max-width: 620px) {
    .ent-gap-verdict[b-8rp5hlurwy] {
        font-size: 1.2rem;
    }

    .ent-shift-arrow[b-8rp5hlurwy] {
        margin: 0.15rem auto;
    }
}

/* ── Density pass: monograph text-setting ──
   Centered long-form was the airiness: multi-line paragraphs rag on both
   sides and float. The monograph pattern: display stays centered, body
   text sets left with tighter leading and a disciplined measure. */

.ent-sub[b-8rp5hlurwy] {
    line-height: 1.62;
}

/* Provenance (thesis): centered, at a tight monograph measure. */
.ent-thesis > .ent-container > .ent-sub[b-8rp5hlurwy] {
    max-width: 56ch;
    font-size: 1.03rem;
    line-height: 1.58;
}

/* Sensing bodies: same measure discipline. */
.ent-section--sense > .ent-container > .ent-sub[b-8rp5hlurwy] {
    max-width: 60ch;
    line-height: 1.58;
}

.ent-def-card .ent-sub[b-8rp5hlurwy] {
    line-height: 1.55;
}

/* Contact copy: tighter column */
.ent-contact-sub[b-8rp5hlurwy] {
    font-size: 1.02rem;
    line-height: 1.55;
}

    .ent-contact-sub + .ent-contact-sub[b-8rp5hlurwy] {
        margin-top: 0.85rem;
    }

.ent-contact-title[b-8rp5hlurwy] {
    margin-bottom: 0.7rem;
}

/* ── Provenance rhythm: short centered beats + the blade as kicker ──
   Centered text composes at ≤3 lines; the old eight-line wall could not.
   Three tight paragraphs at one shared measure, and the section's verdict
   sentence promoted out of the prose into its own line. */

.ent-thesis > .ent-container > .ent-sub[b-8rp5hlurwy] {
    max-width: 54ch;
}

.ent-thesis-kicker[b-8rp5hlurwy] {
    font-family: var(--font-family-heading, 'Space Grotesk', sans-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 640;
    letter-spacing: -0.015em;
    color: #fff;
    text-align: center;
    margin: 1.9rem auto 0.4rem;
    max-width: 54ch;
}
/* /Components/AinnaPages/InnovationPortal.razor.rz.scp.css */
.hoi-root[b-cfluptgmvs] {
    --canvas: #F8F7F4;
    --surface: #FFFFFF;
    --surface-2: #F1F0EC;
    --surface-3: #E7E5DF;
    --ink: #161514;
    --ink-2: #54524C;
    --ink-3: #8E8C84;
    --line: rgba(22,21,20,0.10);
    --line-2: rgba(22,21,20,0.18);
    --brand: #5847F2;
    --brand-2: #4A38D6;
    --brand-ink: #2E2099;
    --accent: #0E7C66;
    --accent-soft: #E0F0EA;
    --accent-ink: #0A5A4A;
    --gold: #9A7B2E;
    --gold-soft: #F4ECD8;
    --gold-ink: #6E561C;
    --inside: #3A4FB8;
    --inside-soft: #E8EBF8;
    --inside-ink: #293A8E;
    --spark: #B23A48;
    --spark-soft: #F6E4E6;
    --spark-ink: #822730;
    --ok: #1C7A4F;
    --ok-soft: #E0F0E8;
    --ok-ink: #125539;
    --warn: #9A6612;
    --warn-soft: #F5EAD6;
    --warn-ink: #6E490B;
    --info: #2E5E8C;
    --info-soft: #E5EDF5;
    --info-ink: #1C436A;
    --prob: #A8442C;
    --prob-soft: #F6E7E1;
    --prob-ink: #7A2E1C;
    --ai-wash: #EEF1F8;
    --dark: #13233A;
    --dark-2: #1B3149;
    --dark-3: #26425E;
    --dark-line: rgba(255,255,255,0.14);
    --dark-ink-2: #AEBED0;
    --dark-ink-3: #7E92A8;
    /* TOOL material - neutral charcoal, distinct from the blue accent panels. dark+charcoal = act here. */
    --tool: #1B1E26;
    --tool-2: #252934;
    --tool-well: rgba(0,0,0,0.26);
    --tool-line: rgba(255,255,255,0.13);
    --tool-ctrl: rgba(255,255,255,0.07);
    --tool-ink: #FFFFFF;
    --tool-ink-2: rgba(255,255,255,0.64);
    --tool-ink-3: rgba(255,255,255,0.46);
    --tool-focus: rgba(120,150,188,0.62);
    --tool-accent: #96B9DE;
    /* one radius scale */
    --r-sm: 7px;
    --r-md: 11px;
    --r-control: 12px;
    --r-lg: 15px;
    --r-card: 16px;
    --r-xl: 20px;
    --r-2xl: 22px;
    /* two shadow tiers only */
    --shadow-card: 0 14px 38px rgba(22,21,20,0.10);
    --shadow-tool: 0 18px 46px rgba(8,10,15,0.42),inset 0 1px 0 rgba(255,255,255,0.08);
    /* section rhythm */
    --gap-section: 60px;
    --pad-surface: 22px;
    --sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --serif: "Space Grotesk","Inter",sans-serif;
    --topbar-h: 60px;
    --strip-h: 34px;
    --advisor-h: 58px;
    /* component base context (scoped to .hoi-root so it never touches global body) */
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

    .hoi-root .sr-only[b-cfluptgmvs] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }

.topbar[b-cfluptgmvs] {
    position: sticky;
    top: 0;
    z-index: 45;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(248,247,244,0.94), rgba(248,247,244,0.80));
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 0.5px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.60), 0 10px 26px -20px rgba(22,21,20,0.30);
}

.tb-side[b-cfluptgmvs] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.tb-right[b-cfluptgmvs] {
    justify-content: flex-end;
}

.tb-live[b-cfluptgmvs] {
    display: none;
    flex: 2;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    font-size: 12px;
    overflow: hidden;
}

@media(min-width:760px) {
    .tb-live[b-cfluptgmvs] {
        display: flex;
    }
}

.brand[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo[b-cfluptgmvs] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

.brand-text[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-client[b-cfluptgmvs] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.brand-sub[b-cfluptgmvs] {
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 3px;
}

.icon-btn[b-cfluptgmvs] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 0.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .icon-btn:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        color: var(--ink);
    }

    .icon-btn i[b-cfluptgmvs] {
        font-size: 18px;
    }

    .icon-btn .badge[b-cfluptgmvs] {
        position: absolute;
        top: 6px;
        right: 7px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--spark);
        border: 1.5px solid var(--canvas);
    }

/* Achievements / gamification card */
.ach-card[b-cfluptgmvs] {
    cursor: pointer;
    transition: box-shadow .15s,transform .15s;
}

.ach-id[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 13px;
    margin-bottom: 13px;
    border-bottom: 0.5px solid var(--line);
}

.ach-av[b-cfluptgmvs] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--inside-soft);
    color: var(--inside-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.ach-id-meta b[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    display: block;
    line-height: 1.2;
}

.ach-id-meta span[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
}

.ach-card:hover[b-cfluptgmvs] {
    box-shadow: 0 10px 26px rgba(22,21,20,.09);
    transform: translateY(-1px);
}

.ach-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ach-ic[b-cfluptgmvs] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--gold-soft);
    color: var(--gold-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ach-ic i[b-cfluptgmvs] {
        font-size: 18px;
    }

.ach-head .acx b[b-cfluptgmvs] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    display: block;
    line-height: 1.2;
}

.ach-head .acx span[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
}

.ach-pts[b-cfluptgmvs] {
    margin-left: auto;
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}

    .ach-pts b[b-cfluptgmvs] {
        font-family: var(--serif);
        font-size: 21px;
        font-weight: 600;
        color: var(--ink);
    }

    .ach-pts span[b-cfluptgmvs] {
        font-size: 9px;
        color: var(--ink-3);
        display: block;
        margin-top: 3px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.ach-bar[b-cfluptgmvs] {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
    margin-bottom: 7px;
}

    .ach-bar i[b-cfluptgmvs] {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg,var(--gold),#C9A94A);
    }

.ach-next[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-bottom: 12px;
}

    .ach-next b[b-cfluptgmvs] {
        color: var(--ink-2);
        font-weight: 600;
    }

.ach-stats[b-cfluptgmvs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ach-stat[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 5px 9px;
}

    .ach-stat i[b-cfluptgmvs] {
        font-size: 13px;
    }

    .ach-stat .fa-fire[b-cfluptgmvs] {
        color: var(--prob-ink);
    }

    .ach-stat .fa-medal[b-cfluptgmvs] {
        color: var(--gold-ink);
    }

    .ach-stat .fa-arrow-trend-up[b-cfluptgmvs] {
        color: var(--accent-ink);
    }
/* DARK MATERIAL - the score card anchors the rail in the same dark family as the tools */
.rl-card.ach-card[b-cfluptgmvs] {
    background: linear-gradient(180deg,var(--tool-2),var(--tool));
    border: 1px solid var(--tool-line);
    box-shadow: var(--shadow-tool);
}

.ach-card .ach-id[b-cfluptgmvs] {
    border-bottom-color: rgba(255,255,255,.1);
}

.ach-card .ach-av[b-cfluptgmvs] {
    background: rgba(150,185,222,.18);
    color: #A9C7E6;
}

.ach-card .ach-id-meta b[b-cfluptgmvs] {
    color: #fff;
}

.ach-card .ach-id-meta span[b-cfluptgmvs] {
    color: rgba(255,255,255,.5);
}

.ach-card .ach-ic[b-cfluptgmvs] {
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.ach-card .ach-head .acx b[b-cfluptgmvs] {
    color: #fff;
}

.ach-card .ach-head .acx span[b-cfluptgmvs] {
    color: rgba(255,255,255,.55);
}

.ach-card .ach-pts b[b-cfluptgmvs] {
    color: #fff;
}

.ach-card .ach-pts span[b-cfluptgmvs] {
    color: rgba(255,255,255,.45);
}

.ach-card .ach-bar[b-cfluptgmvs] {
    background: rgba(255,255,255,.1);
}

.ach-card .ach-next[b-cfluptgmvs] {
    color: rgba(255,255,255,.5);
}

    .ach-card .ach-next b[b-cfluptgmvs] {
        color: rgba(255,255,255,.78);
    }

.ach-card .ach-stat[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
}

    .ach-card .ach-stat .fa-fire[b-cfluptgmvs] {
        color: #E8956F;
    }

    .ach-card .ach-stat .fa-medal[b-cfluptgmvs] {
        color: var(--gold);
    }

    .ach-card .ach-stat .fa-arrow-trend-up[b-cfluptgmvs] {
        color: #7FC8B4;
    }

.ach-card:hover[b-cfluptgmvs] {
    box-shadow: 0 14px 32px rgba(8,10,15,.45);
    transform: translateY(-1px);
}

/* Ainna - compact chat (advisor) */
.ai-card[b-cfluptgmvs] {
    background: linear-gradient(160deg,var(--ai-wash),var(--surface));
    border-color: var(--line-2);
}

.ai-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.ai-av[b-cfluptgmvs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ai-av i[b-cfluptgmvs] {
        font-size: 17px;
    }

.ai-head .acx b[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-ink);
    display: block;
    line-height: 1.2;
}

.ai-sub[b-cfluptgmvs] {
    font-size: 10px;
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ai-on[b-cfluptgmvs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.ai-thread[b-cfluptgmvs] {
    min-height: 180px;
    height: 240px;
    max-height: 60vh;
    resize: vertical;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 10px;
    padding-right: 3px;
    scrollbar-width: thin;
}

    .ai-thread[b-cfluptgmvs]::-webkit-scrollbar {
        width: 6px;
    }

    .ai-thread[b-cfluptgmvs]::-webkit-scrollbar-thumb {
        background: var(--line-2);
        border-radius: 4px;
    }

.ai-row[b-cfluptgmvs] {
    display: flex;
    gap: 7px;
    align-items: flex-end;
    max-width: 90%;
}

    .ai-row.me[b-cfluptgmvs] {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

.ai-bub-av[b-cfluptgmvs] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 1px;
}

    .ai-bub-av i[b-cfluptgmvs] {
        font-size: 12px;
    }

.ai-msg[b-cfluptgmvs] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 4px 13px 13px 13px;
    padding: 9px 12px;
}

.ai-row.me .ai-msg[b-cfluptgmvs] {
    color: #fff;
    background: var(--brand);
    border-color: transparent;
    border-radius: 13px 4px 13px 13px;
}

.ai-typing[b-cfluptgmvs] {
    display: flex;
    gap: 3px;
    padding: 10px 12px;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 4px 13px 13px 13px;
}

    .ai-typing i[b-cfluptgmvs] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink-3);
        animation: invblink-b-cfluptgmvs 1s infinite;
    }

        .ai-typing i:nth-child(2)[b-cfluptgmvs] {
            animation-delay: .15s;
        }

        .ai-typing i:nth-child(3)[b-cfluptgmvs] {
            animation-delay: .3s;
        }

.ai-sugs[b-cfluptgmvs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 11px;
}

.ai-sug[b-cfluptgmvs] {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: 999px;
    padding: 6px 11px;
}

    .ai-sug:hover[b-cfluptgmvs] {
        border-color: var(--brand-2);
    }

.ai-pill[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 999px;
    padding: 5px 5px 5px 14px;
    transition: border-color .15s,box-shadow .15s;
}

    .ai-pill:focus-within[b-cfluptgmvs] {
        border-color: var(--brand-2);
        box-shadow: 0 0 0 3px rgba(74,56,214,.12);
    }

.ai-input[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink);
    padding: 0;
    border-radius: 0;
    width: auto;
}

    .ai-input[b-cfluptgmvs]::placeholder {
        color: var(--ink-3);
    }

.ai-mic[b-cfluptgmvs] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ai-mic:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        color: var(--ink);
    }

    .ai-mic i[b-cfluptgmvs] {
        font-size: 15px;
    }

.ai-send[b-cfluptgmvs] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ai-send:hover[b-cfluptgmvs] {
        background: var(--brand-2);
    }

    .ai-send i[b-cfluptgmvs] {
        font-size: 15px;
    }
/* Floating Ainna island - one cohesive dark component: framed shell, recessed thread well, raised input pill */
.ai-island[b-cfluptgmvs] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;
    width: 380px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-2xl);
    background: linear-gradient(180deg,var(--tool-2),var(--tool));
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--tool-line);
    box-shadow: var(--shadow-tool);
    transition: box-shadow .3s,transform .2s,border-color .3s;
    padding: 7px;
}

    .ai-island:not(.open):hover[b-cfluptgmvs] {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.2);
    }

    .ai-island.open[b-cfluptgmvs] {
        box-shadow: 0 36px 90px rgba(8,10,15,.65),0 4px 14px rgba(8,10,15,.45),inset 0 1px 0 rgba(255,255,255,.1);
    }
/* expanding panel (above the bar) - a recessed well */
.aii-panel[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .44s cubic-bezier(.22,.7,.25,1),opacity .3s,margin .44s cubic-bezier(.22,.7,.25,1);
    margin: 0;
}

.ai-island.open .aii-panel[b-cfluptgmvs] {
    max-height: var(--aii-h,80vh);
    opacity: 1;
    margin: 0 0 7px;
    background: rgba(0,0,0,.22);
    border: 0.5px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 6px 14px 12px;
}

.ai-island.resizing .aii-panel[b-cfluptgmvs] {
    transition: none;
}

.aii-grip[b-cfluptgmvs] {
    flex-shrink: 0;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    margin: 0 0 2px;
    touch-action: none;
}

    .aii-grip span[b-cfluptgmvs] {
        width: 32px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.16);
        transition: background .15s;
    }

    .aii-grip:hover span[b-cfluptgmvs] {
        background: rgba(255,255,255,.4);
    }

.aii-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 2px 12px;
    border-bottom: 0.5px solid rgba(255,255,255,.09);
    flex-shrink: 0;
}

    .aii-head .ai-av[b-cfluptgmvs] {
        width: 34px;
        height: 34px;
    }

    .aii-head .acx b[b-cfluptgmvs] {
        font-size: 14px;
        color: #fff;
    }

    .aii-head .ai-sub[b-cfluptgmvs] {
        color: rgba(255,255,255,.5);
    }

.aii-min[b-cfluptgmvs] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0.5px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .aii-min:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.13);
        color: #fff;
    }

    .aii-min i[b-cfluptgmvs] {
        font-size: 17px;
    }
/* thread inside the well */
.aii-panel .ai-thread[b-cfluptgmvs] {
    flex: 1;
    height: auto;
    min-height: 150px;
    max-height: none;
    resize: none;
    margin: 13px 0 11px;
    padding-right: 5px;
}

.aii-panel .ai-msg[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.07);
    color: rgba(255,255,255,.88);
}

.aii-panel .ai-row.me .ai-msg[b-cfluptgmvs] {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

.aii-panel .ai-typing[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.07);
}

    .aii-panel .ai-typing i[b-cfluptgmvs] {
        background: rgba(255,255,255,.5);
    }
/* inline actionable cards in the thread (agent reframes an idea/problem and offers Submit) */
.ai-cardwrap[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
}

.aic[b-cfluptgmvs] {
    background: rgba(255,255,255,.07);
    border: 0.5px solid rgba(255,255,255,.12);
    border-left: 2.5px solid var(--brand-2);
    border-radius: 4px 13px 13px 13px;
    padding: 12px 13px;
}

    .aic.problem[b-cfluptgmvs] {
        border-left-color: var(--prob);
    }

    .aic.idea[b-cfluptgmvs] {
        border-left-color: var(--gold);
    }

    .aic.pain[b-cfluptgmvs] {
        border-left-color: var(--spark);
    }

    .aic.market[b-cfluptgmvs] {
        border-left-color: var(--accent);
    }

.aic-type[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: 8px;
}

    .aic-type i[b-cfluptgmvs] {
        font-size: 13px;
    }

.aic.problem .aic-type i[b-cfluptgmvs] {
    color: #E89B9B;
}

.aic.idea .aic-type i[b-cfluptgmvs] {
    color: var(--gold);
}

.aic.pain .aic-type i[b-cfluptgmvs] {
    color: var(--spark);
}

.aic.market .aic-type i[b-cfluptgmvs] {
    color: #7FC4B8;
}

.aic-stmt[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
    outline: none;
    border-radius: 6px;
    transition: box-shadow .15s,background .15s;
}

    .aic-stmt:focus[b-cfluptgmvs] {
        background: rgba(255,255,255,.07);
        box-shadow: 0 0 0 3px rgba(112,140,176,.25);
    }

.aic-relate[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255,255,255,.6);
    margin-top: 9px;
}

    .aic-relate i[b-cfluptgmvs] {
        font-size: 13px;
        color: rgba(255,255,255,.45);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .aic-relate b[b-cfluptgmvs] {
        color: #fff;
        font-weight: 600;
    }

.aic-acts[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.aic-submit[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .15s,transform .12s;
}

    .aic-submit:hover[b-cfluptgmvs] {
        background: var(--brand-2);
        transform: translateY(-1px);
    }

    .aic-submit i[b-cfluptgmvs] {
        font-size: 14px;
    }

.aic.problem .aic-submit[b-cfluptgmvs] {
    background: var(--prob-ink);
}

.aic.idea .aic-submit[b-cfluptgmvs] {
    background: var(--gold-ink);
}

.aic.market .aic-submit[b-cfluptgmvs] {
    background: var(--accent-ink);
}

.aic-redo[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 4px;
}

    .aic-redo:hover[b-cfluptgmvs] {
        color: #fff;
    }

    .aic-redo i[b-cfluptgmvs] {
        font-size: 14px;
    }

.aic-done[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aic-done-ic[b-cfluptgmvs] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(95,208,168,.2);
    color: #5FD0A8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .aic-done-ic i[b-cfluptgmvs] {
        font-size: 17px;
    }

.aic-done b[b-cfluptgmvs] {
    font-size: 13px;
    color: #fff;
    display: block;
    line-height: 1.3;
}

.aic-done span[b-cfluptgmvs] {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    line-height: 1.45;
    display: block;
    margin-top: 3px;
}
/* compact inline starter chips: Ask me to {x},{y},{z} */
.aii-starters[b-cfluptgmvs] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.aii-st-lead[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    margin-right: 1px;
}

.aii-chip[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 0.5px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .15s,border-color .15s,transform .12s;
}

    .aii-chip i[b-cfluptgmvs] {
        font-size: 13px;
        color: var(--tool-accent);
    }

    .aii-chip:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.3);
        transform: translateY(-1px);
    }

.aii-panel .ai-sugs[b-cfluptgmvs] {
    display: none;
}
/* collapsed-only intro: context + 1-2 personalized starters */
.aii-intro[b-cfluptgmvs] {
    display: none;
}

.aii-intro-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

    .aii-intro-head .ai-av[b-cfluptgmvs] {
        width: 32px;
        height: 32px;
    }

    .aii-intro-head .acx b[b-cfluptgmvs] {
        font-size: 14px;
        color: #fff;
    }

    .aii-intro-head .ai-sub[b-cfluptgmvs] {
        color: rgba(255,255,255,.5);
    }

.aii-intro-line[b-cfluptgmvs] {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.78);
    margin: 0 0 12px;
}

.aii-intro-chips[b-cfluptgmvs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.aii-intro-chip[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 0.5px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .15s,border-color .15s,transform .12s;
}

    .aii-intro-chip i[b-cfluptgmvs] {
        font-size: 13px;
        color: var(--tool-accent);
    }

    .aii-intro-chip:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.3);
        transform: translateY(-1px);
    }
/* the raised input pill - distinct lighter surface, reads as the type-here zone */
.aii-bar[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    flex-shrink: 0;
    background: rgba(255,255,255,.09);
    border: 0.5px solid rgba(255,255,255,.13);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .15s,background .15s;
}

    .aii-bar:focus-within[b-cfluptgmvs] {
        border-color: rgba(112,140,176,.6);
        background: rgba(255,255,255,.12);
    }

.aii-spark[b-cfluptgmvs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--brand),#1B3149);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(74,56,214,.5);
}

    .aii-spark i[b-cfluptgmvs] {
        font-size: 17px;
    }

.aii-input[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: #fff;
    padding: 0;
    border-radius: 0;
    width: auto;
}

    .aii-input[b-cfluptgmvs]::placeholder {
        color: rgba(255,255,255,.5);
    }

.aii-icon[b-cfluptgmvs] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s,transform .15s;
}

    .aii-icon i[b-cfluptgmvs] {
        font-size: 16px;
    }

.aii-max[b-cfluptgmvs] {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
}

    .aii-max:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.18);
        color: #fff;
    }

.aii-send[b-cfluptgmvs] {
    background: var(--brand);
    color: #fff;
}

    .aii-send:hover[b-cfluptgmvs] {
        background: var(--brand-2);
        transform: scale(1.06);
    }

@media(max-width:560px) {
    .ai-island[b-cfluptgmvs] {
        right: 12px;
        left: 12px;
        bottom: 74px;
        width: auto;
        max-width: none;
    }

        .ai-island.open .aii-panel[b-cfluptgmvs] {
            max-height: var(--aii-h,76vh);
        }
}
/* rail groups: pinned (always visible) + rest (scrolls). display:contents until desktop sidebar */
.rail-pinned[b-cfluptgmvs], .rail-rest[b-cfluptgmvs] {
    display: contents;
}

.dot[b-cfluptgmvs] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    animation: pulse-b-cfluptgmvs 2s ease-in-out infinite;
    flex-shrink: 0;
}

.dot-spark[b-cfluptgmvs] {
    background: var(--gold);
    animation-duration: 1.6s;
}

@keyframes pulse-b-cfluptgmvs {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.82);
    }
}

.shell[b-cfluptgmvs] {
    display: block;
    width: 100%;
    padding: 18px;
}

.navrail[b-cfluptgmvs] {
    display: none;
}

.main[b-cfluptgmvs] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .main > section[b-cfluptgmvs] {
        margin-bottom: var(--gap-section);
    }

.rightrail[b-cfluptgmvs] {
    min-width: 0;
    margin-top: 44px;
    background: transparent !important;
}

/* Intent-framed section header */
.intent-head[b-cfluptgmvs] {
    margin-bottom: 22px;
}

.intent-kicker[b-cfluptgmvs] {
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

    .intent-kicker .ik-ic[b-cfluptgmvs] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .intent-kicker .ik-ic i[b-cfluptgmvs] {
            font-size: 14px;
        }

.readby[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--brand-ink);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    background: var(--inside-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

    .readby i[b-cfluptgmvs] {
        font-size: 12px;
    }

.intent-title[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: clamp(20px,1.9vw,26px);
    line-height: 1.22;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
    max-width: 36ch;
}

    .intent-title em[b-cfluptgmvs] {
        font-style: normal;
        font-weight: 600;
        color: var(--ink-3);
    }

.intent-read[b-cfluptgmvs] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    max-width: 74ch;
}

    .intent-read b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 600;
    }

.sec-link[b-cfluptgmvs] {
    font-size: 13px;
    color: var(--brand-2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .sec-link:hover[b-cfluptgmvs] {
        color: var(--brand-ink);
        text-decoration: underline;
    }

    .sec-link.mt[b-cfluptgmvs] {
        margin-top: 20px;
    }

.toolbar[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 16px;
    flex-wrap: wrap;
}

.filters[b-cfluptgmvs] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    border: 0.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
}

    .chip:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
        color: var(--ink);
    }

    .chip i[b-cfluptgmvs] {
        font-size: 14px;
    }

.chip-on[b-cfluptgmvs] {
    background: var(--inside-soft);
    color: var(--inside-ink);
    border-color: transparent;
}

.chip-prob.chip-on[b-cfluptgmvs] {
    background: var(--prob-soft);
    color: var(--prob-ink);
}

.scroll-hint[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--ink-3);
}

    .scroll-hint i[b-cfluptgmvs] {
        font-size: 15px;
    }

.pill[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pill-inside[b-cfluptgmvs] {
    background: var(--inside-soft);
    color: var(--inside-ink);
}

.pill-ok[b-cfluptgmvs] {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.pill-warn[b-cfluptgmvs] {
    background: var(--warn-soft);
    color: var(--warn-ink);
}

.pill-info[b-cfluptgmvs] {
    background: var(--info-soft);
    color: var(--info-ink);
}

.pill-spark[b-cfluptgmvs] {
    background: var(--spark-soft);
    color: var(--spark-ink);
}

.pill-prob[b-cfluptgmvs] {
    background: var(--prob-soft);
    color: var(--prob-ink);
}

.btn[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    border: 0.5px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
}

    .btn:hover[b-cfluptgmvs] {
        background: var(--surface-2);
    }

    .btn i[b-cfluptgmvs] {
        font-size: 15px;
    }

.btn-brand[b-cfluptgmvs] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

    .btn-brand:hover[b-cfluptgmvs] {
        background: var(--brand-2);
    }

/* Purpose - silent leader-statement carousel */
.purpose[b-cfluptgmvs] {
    position: relative;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    background: radial-gradient(115% 95% at 80% 14%, rgba(63,108,154,0.50), transparent 56%), radial-gradient(120% 140% at 82% 128%, rgba(8,16,28,0) 42%, rgba(6,13,24,0.78) 100%), linear-gradient(162deg, #1C3349 0%, #16283E 44%, #0E1B2C 100%);
}

    /* fine ink-dot texture, masked diagonally so it only reads behind the text */
    .purpose[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px,rgba(255,255,255,0.045) 1px,transparent 0);
        background-size: 32px 32px;
        -webkit-mask-image: linear-gradient(112deg,#000 28%,transparent 74%);
        mask-image: linear-gradient(112deg,#000 28%,transparent 74%);
        pointer-events: none;
        z-index: 1;
    }

    /* top sheen + grounded vignette for depth */
    .purpose[b-cfluptgmvs]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -130px 120px -84px rgba(0,0,0,0.60);
        pointer-events: none;
        z-index: 1;
    }

.gen-av[b-cfluptgmvs] {
    position: relative;
    overflow: hidden;
}

    .gen-av[b-cfluptgmvs]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at 32% 26%,rgba(255,255,255,0.28),rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

    .gen-av > span[b-cfluptgmvs], .gen-av[b-cfluptgmvs] {
        color: #fff !important;
    }

.purpose-track[b-cfluptgmvs] {
    position: relative;
    height: 452px;
}

.pslide[b-cfluptgmvs] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    gap: 40px;
    padding: 48px 52px 52px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
    z-index: 2;
}

    .pslide.on[b-cfluptgmvs] {
        opacity: 1;
        visibility: visible;
        z-index: 3;
    }

.pslide-body[b-cfluptgmvs] {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 700px;
    align-self: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease .08s, transform .7s cubic-bezier(.16,1,.3,1) .08s;
}

.pslide.on .pslide-body[b-cfluptgmvs] {
    opacity: 1;
    transform: none;
}

.pslide-k[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dark-ink-2);
    margin-bottom: 46px;
}

    .pslide-k[b-cfluptgmvs]::before {
        content: "";
        width: 24px;
        height: 1.5px;
        border-radius: 2px;
        background: linear-gradient(90deg,#D9C79A,rgba(217,199,154,0));
    }

.pslide-quote[b-cfluptgmvs] {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(27px, 3.3vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: #fff;
    font-weight: 500;
    margin: 0;
    padding-top: 12px;
    overflow-wrap: break-word;
    text-wrap: balance;
}

    .pslide-quote[b-cfluptgmvs]::before {
        content: "\201C";
        position: absolute;
        left: -0.04em;
        top: -0.42em;
        font-size: 2.1em;
        line-height: 1;
        color: rgba(217,199,154,0.22);
        pointer-events: none;
        z-index: -1;
    }

    .pslide-quote[b-cfluptgmvs]::after {
        content: none;
    }

.pslide-sign[b-cfluptgmvs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 22px;
}

    .pslide-sign[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 56px;
        height: 1px;
        background: linear-gradient(90deg,rgba(255,255,255,0.30),transparent);
    }

.pslide-face[b-cfluptgmvs] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2E4A66;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.22);
    box-shadow: 0 6px 16px rgba(0,0,0,0.42), 0 0 0 4px rgba(255,255,255,0.05);
}

.pslide-name[b-cfluptgmvs] {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.005em;
}

.pslide-role[b-cfluptgmvs] {
    font-size: 11.5px;
    color: var(--dark-ink-2);
    letter-spacing: 0.02em;
    margin-top: 2px;
}
/* leader photo - transparent cutout, right-anchored, grounded into the dark with a base fade (real PNG drops in via background-image) */
.pslide-photo[b-cfluptgmvs] {
    flex: 0 0 auto;
    align-self: stretch;
    width: min(48%, 424px);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    margin: -12px -6px -52px 0;
    -webkit-mask-image: linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image: linear-gradient(180deg,#000 80%,transparent 100%);
    filter: drop-shadow(0 26px 42px rgba(0,0,0,0.50));
    opacity: 0;
    transform: translateY(14px) scale(0.99);
    transition: opacity .8s ease .04s, transform .8s cubic-bezier(.16,1,.3,1) .04s;
}

.pslide.on .pslide-photo[b-cfluptgmvs] {
    opacity: 1;
    transform: none;
}

.pslide-photo.is-mono[b-cfluptgmvs] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    filter: none;
}

.pslide-photo .ph-fallback[b-cfluptgmvs] {
    width: 200px;
    height: 86%;
    border-radius: 160px 160px 0 0;
    background: linear-gradient(180deg,rgba(65,100,138,.55),rgba(27,49,73,.15));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 34px;
    font-family: var(--serif);
    font-size: 64px;
    color: rgba(255,255,255,.4);
    -webkit-mask-image: linear-gradient(180deg,#000 70%,transparent 100%);
    mask-image: linear-gradient(180deg,#000 70%,transparent 100%);
}

.purpose-dots[b-cfluptgmvs] {
    position: absolute;
    left: 52px;
    bottom: 22px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.pdot[b-cfluptgmvs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .3s, width .3s cubic-bezier(.16,1,.3,1);
}

    .pdot:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.42);
    }

    .pdot.on[b-cfluptgmvs] {
        background: linear-gradient(90deg,#E4D4A6,#C9A84C);
        width: 24px;
        border-radius: 5px;
        box-shadow: 0 1px 6px rgba(201,168,76,0.50);
    }

@media (prefers-reduced-motion: reduce) {
    .pslide-body[b-cfluptgmvs], .pslide-photo[b-cfluptgmvs] {
        transition: opacity .3s ease;
        transform: none;
    }

    .pslide.on .pslide-body[b-cfluptgmvs], .pslide.on .pslide-photo[b-cfluptgmvs] {
        transform: none;
    }
}

@media(min-width:760px) {
    .purpose-track[b-cfluptgmvs] {
        height: 500px;
    }

    .pslide[b-cfluptgmvs] {
        padding: 60px 60px 64px;
        gap: 52px;
    }

    .pslide-photo[b-cfluptgmvs] {
        margin-bottom: -64px;
    }

    .pslide-quote[b-cfluptgmvs] {
        font-size: clamp(32px, 3.3vw, 41px);
        line-height: 1.15;
    }
}

@media(max-width:560px) {
    .purpose-track[b-cfluptgmvs] {
        height: 384px;
    }

    .pslide-photo[b-cfluptgmvs] {
        display: none;
    }

    .pslide[b-cfluptgmvs] {
        padding: 32px 24px 36px;
    }

    .pslide-quote[b-cfluptgmvs] {
        font-size: 25px;
    }
}
/* Pillars - aspirational, taller, no links */
.pillars-wrap[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;
}

.pillars-head[b-cfluptgmvs] {
    padding: 22px 26px 0;
    margin-bottom: 0;
}

.pillars3[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    margin-top: 18px;
    border-top: 0.5px solid var(--line);
    overflow: hidden;
}

.pil[b-cfluptgmvs] {
    background: var(--surface);
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
}

.pil-n[b-cfluptgmvs] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--gold-ink);
    margin-bottom: 14px;
}

.pil-t[b-cfluptgmvs] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 12px;
}

.pil-ex[b-cfluptgmvs] {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

    .pil-ex b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 700;
    }


/* Hackathon banner - elegant */
.hack[b-cfluptgmvs] {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    box-shadow: 0 1px 2px rgba(22,21,20,.05);
    display: grid;
    grid-template-columns: 1fr;
}

@media(min-width:820px) {
    .hack[b-cfluptgmvs] {
        grid-template-columns: 1fr 300px;
    }
}

.hack[b-cfluptgmvs]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,var(--brand),var(--accent));
}

.hack-fx[b-cfluptgmvs] {
    display: none;
}

.hack-main[b-cfluptgmvs] {
    position: relative;
    padding: 24px 26px 22px;
}

.hack-badge[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hack-live[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: var(--ai-wash);
    border: 0.5px solid var(--brand-2);
    border-radius: 999px;
    padding: 4px 11px;
}

.hack-live-dot[b-cfluptgmvs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    animation: hackpulse-b-cfluptgmvs 1.8s infinite;
}

@keyframes hackpulse-b-cfluptgmvs {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

    100% {
        opacity: 1;
    }
}

.hack-ed[b-cfluptgmvs] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.hack-title[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: clamp(26px,3.4vw,36px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 9px;
}

.hack-theme[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-2);
    margin-bottom: 11px;
}

    .hack-theme i[b-cfluptgmvs] {
        font-size: 17px;
        color: var(--gold-ink);
    }

    .hack-theme b[b-cfluptgmvs] {
        font-weight: 600;
        color: var(--ink);
    }

.hack-tag[b-cfluptgmvs] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 18px;
    max-width: 58ch;
}

.hack-facts[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

@media(min-width:520px) {
    .hack-facts[b-cfluptgmvs] {
        grid-template-columns: repeat(3,1fr);
    }
}

.hack-fact[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .hack-fact i[b-cfluptgmvs] {
        font-size: 19px;
        color: var(--accent-ink);
        flex-shrink: 0;
    }

    .hack-fact b[b-cfluptgmvs] {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.2;
    }

    .hack-fact span[b-cfluptgmvs] {
        font-size: 11px;
        color: var(--ink-3);
    }

.hack-btn[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: var(--r-md);
    border: 0;
    cursor: pointer;
    transition: background .15s,transform .15s;
}

    .hack-btn.primary[b-cfluptgmvs] {
        background: var(--brand);
        color: #fff;
    }

        .hack-btn.primary:hover[b-cfluptgmvs] {
            background: var(--brand-2);
            transform: translateY(-1px);
        }

    .hack-btn.ghost[b-cfluptgmvs] {
        background: var(--surface);
        border: 0.5px solid var(--line-2);
        color: var(--ink);
    }

        .hack-btn.ghost:hover[b-cfluptgmvs] {
            border-color: var(--brand-2);
        }

    .hack-btn i[b-cfluptgmvs] {
        font-size: 16px;
    }

.hack-spots[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}

    .hack-spots i[b-cfluptgmvs] {
        font-size: 14px;
    }
/* right column: countdown up top, linked CTAs below */
.hack-side[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    border-top: 0.5px solid var(--line);
}

@media(min-width:820px) {
    .hack-side[b-cfluptgmvs] {
        border-top: 0;
        border-left: 0.5px solid var(--line);
    }
}

.hack-count[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 20px 24px 16px;
}

.hack-count-l[b-cfluptgmvs] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.hack-clock[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.hcu[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 58px;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 10px;
    padding: 10px 2px 7px;
}

    .hcu b[b-cfluptgmvs] {
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }

    .hcu span[b-cfluptgmvs] {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-top: 6px;
    }

.hcsep[b-cfluptgmvs] {
    display: none;
}

.hack-act[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 0 24px 20px;
    text-align: center;
}

.hack-urge[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--warn-ink);
    letter-spacing: .01em;
    margin-bottom: 1px;
}

    .hack-urge i[b-cfluptgmvs] {
        font-size: 14px;
    }

.hack-act .hack-spots[b-cfluptgmvs] {
    justify-content: center;
    margin-top: 1px;
}
/* Innovation window - stat ribbon + explorer (rail + detail) */
.win-stats[b-cfluptgmvs] {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 4px;
    margin-bottom: 20px;
}

.ws[b-cfluptgmvs] {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: transparent;
    border: 0;
    text-align: left;
}

.win-legend[b-cfluptgmvs] {
    display: flex;
    gap: 18px;
    margin: -6px 0 18px;
}

.wl[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 500;
}

    .wl em[b-cfluptgmvs] {
        font-style: normal;
        color: var(--ink-3);
        font-size: 10px;
        margin-left: 2px;
    }

.wl-d[b-cfluptgmvs] {
    width: 11px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ws:hover[b-cfluptgmvs] {
    background: var(--surface-2);
}

.ws-n[b-cfluptgmvs] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.ws-l[b-cfluptgmvs] {
    font-size: 11.5px;
    color: var(--ink-2);
}

.ws-sep[b-cfluptgmvs] {
    width: 0.5px;
    background: var(--line);
    align-self: stretch;
    margin: 8px 0;
}

@media(max-width:560px) {
    .ws-sep[b-cfluptgmvs] {
        display: none;
    }

    .ws[b-cfluptgmvs] {
        min-width: 45%;
    }
}

.explorer[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tl-card[b-cfluptgmvs] {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.tl-viewport[b-cfluptgmvs] {
    position: relative;
}

.tl-rail[b-cfluptgmvs] {
    position: relative;
    overflow-x: auto;
    padding: 18px 20px 18px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .tl-rail[b-cfluptgmvs]::-webkit-scrollbar {
        display: none;
    }

.ttrack[b-cfluptgmvs] {
    position: relative;
    width: 340%;
    min-width: 2700px;
    height: 700px;
}

.taxis[b-cfluptgmvs] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,var(--ok) 0%,var(--ok) 58%,var(--accent) 62%,var(--accent) 72%,var(--gold) 76%,var(--gold) 100%);
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 7px rgba(22,21,20,.16),inset 0 1px 0 rgba(255,255,255,.5);
}

.tl-zone[b-cfluptgmvs] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}

    .tl-zone.past[b-cfluptgmvs] {
        left: 0;
        width: 61%;
        background: linear-gradient(90deg,rgba(22,21,20,.04),rgba(22,21,20,.015));
    }

    .tl-zone.now[b-cfluptgmvs] {
        left: 61%;
        width: 12%;
        background: linear-gradient(180deg,rgba(14,124,102,.13),rgba(14,124,102,.04));
        border-left: 1px dashed rgba(14,124,102,.3);
        border-right: 1px dashed rgba(14,124,102,.3);
    }

    .tl-zone.future[b-cfluptgmvs] {
        left: 73%;
        right: 0;
        background: linear-gradient(90deg,rgba(154,123,46,.05),rgba(154,123,46,.09));
    }

.tl-zonelabel[b-cfluptgmvs] {
    position: absolute;
    top: 9px;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 999px;
    z-index: 1;
    white-space: nowrap;
}

    .tl-zonelabel.past[b-cfluptgmvs] {
        color: var(--ink-3);
        background: rgba(22,21,20,.055);
    }

    .tl-zonelabel.now[b-cfluptgmvs] {
        color: var(--accent-ink);
        background: var(--accent-soft);
        box-shadow: 0 1px 4px rgba(14,124,102,.15);
    }

    .tl-zonelabel.future[b-cfluptgmvs] {
        color: var(--gold-ink);
        background: var(--gold-soft);
    }

.tl-qmark[b-cfluptgmvs] {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
    z-index: 0;
}

    .tl-qmark span[b-cfluptgmvs] {
        position: absolute;
        bottom: -1px;
        left: 7px;
        font-size: 9.5px;
        color: var(--ink-3);
        font-weight: 700;
        letter-spacing: .03em;
        white-space: nowrap;
    }

.tnow-line[b-cfluptgmvs] {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 1.5px;
    background: linear-gradient(180deg,rgba(14,124,102,.05),rgba(14,124,102,.32),rgba(14,124,102,.05));
    z-index: 0;
}

.tnow[b-cfluptgmvs] {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 6;
    pointer-events: none;
}

.tnow-dot[b-cfluptgmvs] {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface-2);
    box-shadow: 0 0 0 0 rgba(14,124,102,.5);
    animation: tlpulse-b-cfluptgmvs 2s infinite;
}

.tnow-lbl[b-cfluptgmvs] {
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    white-space: nowrap;
}

@keyframes tlpulse-b-cfluptgmvs {
    0% {
        box-shadow: 0 0 0 0 rgba(14,124,102,.5);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(14,124,102,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(14,124,102,0);
    }
}

.tnode[b-cfluptgmvs] {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 152px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    z-index: 4;
}

    .tnode.above[b-cfluptgmvs] {
        bottom: calc(50% - 5px);
    }

    .tnode.below[b-cfluptgmvs] {
        top: calc(50% - 5px);
        flex-direction: column-reverse;
    }

.tn-tile[b-cfluptgmvs] {
    width: 100%;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 12px;
    padding: 11px 13px 11px 15px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color .2s,transform .2s,box-shadow .2s,opacity .2s,border-radius .3s cubic-bezier(.22,.7,.25,1);
    box-shadow: 0 1px 2px rgba(22,21,20,.05);
}

    .tn-tile[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
    }

.tn-kind[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

    .tn-kind i[b-cfluptgmvs] {
        font-size: 11px;
    }

.tnode:hover .tn-tile[b-cfluptgmvs] {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22,21,20,.1);
}

.tn-name[b-cfluptgmvs] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.22;
    color: var(--ink);
}

.tn-meta[b-cfluptgmvs] {
    display: block;
    font-size: 10px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tn-conn[b-cfluptgmvs] {
    width: 1.5px;
    background: var(--line-2);
    flex-shrink: 0;
}

.tn-dot[b-cfluptgmvs] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 3px solid var(--surface-2);
    flex-shrink: 0;
    transition: transform .15s;
    background: var(--ink-3);
    box-shadow: 0 1px 3px rgba(22,21,20,.2);
}

.tnode:hover .tn-dot[b-cfluptgmvs], .tnode.on .tn-dot[b-cfluptgmvs] {
    transform: scale(1.35);
}
/* three lanes by distance from the axis (connector length, sized for taller cards) */
.tnode.l1 .tn-conn[b-cfluptgmvs] {
    height: 22px;
}

.tnode.l2 .tn-conn[b-cfluptgmvs] {
    height: 118px;
}

.tnode.l3 .tn-conn[b-cfluptgmvs] {
    height: 214px;
}
/* LANE 1 (inner) - INNOVATION EVENTS: indigo */
.tnode.cat-innov .tn-tile[b-cfluptgmvs] {
    background: linear-gradient(180deg,#F4F3FB,var(--surface));
}

    .tnode.cat-innov .tn-tile[b-cfluptgmvs]::before {
        background: #5B61C4;
    }

.tnode.cat-innov .tn-kind[b-cfluptgmvs] {
    color: #5B61C4;
}

.tnode.cat-innov .tn-conn[b-cfluptgmvs] {
    border-left: 1.5px dashed #9CA0DE;
    background: none;
    width: 0;
}

.tnode.cat-innov .tn-dot[b-cfluptgmvs] {
    background: #5B61C4;
}

.tnode.cat-innov:hover .tn-tile[b-cfluptgmvs] {
    border-color: #9CA0DE;
}
/* LANE 2 (middle) - PROJECT WORK: status-coloured, clean light cards */
.tnode.cat-project .tn-conn[b-cfluptgmvs] {
    background: var(--line-2);
}

.tnode.cat-project.done .tn-tile[b-cfluptgmvs]::before {
    background: #3E9C82;
}

.tnode.cat-project.done .tn-kind[b-cfluptgmvs] {
    color: #2F7A66;
}

.tnode.cat-project.done .tn-dot[b-cfluptgmvs] {
    background: #3E9C82;
}

.tnode.cat-project.now .tn-tile[b-cfluptgmvs]::before {
    background: #2E5E8C;
}

.tnode.cat-project.now .tn-kind[b-cfluptgmvs] {
    color: #2E5E8C;
}

.tnode.cat-project.now .tn-dot[b-cfluptgmvs] {
    background: #2E5E8C;
}

.tnode.cat-project.now .tn-tile[b-cfluptgmvs] {
    background: linear-gradient(180deg,#EEF4FA,var(--surface));
}

.tnode.cat-project.soon .tn-tile[b-cfluptgmvs]::before {
    background: #C99A3A;
}

.tnode.cat-project.soon .tn-kind[b-cfluptgmvs] {
    color: #9A7526;
}

.tnode.cat-project.soon .tn-dot[b-cfluptgmvs] {
    background: #C99A3A;
}

.tnode.cat-project:hover .tn-tile[b-cfluptgmvs] {
    border-color: var(--brand-2);
}
/* LANE 3 (outer) - MARKET-FACING: dark slate + warm coral */
.tnode.cat-market .tn-tile[b-cfluptgmvs] {
    background: linear-gradient(165deg,#22384F,#16273A);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 14px rgba(14,27,44,.22);
}

    .tnode.cat-market .tn-tile[b-cfluptgmvs]::before {
        background: #E0805C;
    }

.tnode.cat-market .tn-kind[b-cfluptgmvs] {
    color: #F0A888;
}

.tnode.cat-market .tn-name[b-cfluptgmvs] {
    color: #ECF1F6;
}

.tnode.cat-market .tn-meta[b-cfluptgmvs] {
    color: #9FB4CC;
}

.tnode.cat-market .tn-conn[b-cfluptgmvs] {
    border-left: 1.5px dotted #E0805C;
    background: none;
    width: 0;
}

.tnode.cat-market .tn-dot[b-cfluptgmvs] {
    background: #E0805C;
    border-color: var(--surface-2);
}

.tnode.cat-market:hover .tn-tile[b-cfluptgmvs] {
    box-shadow: 0 10px 24px rgba(14,27,44,.32);
}

.tnode.cat-market.killed .tn-tile[b-cfluptgmvs]::before {
    background: #B65151;
}

.tnode.cat-market.killed .tn-kind[b-cfluptgmvs] {
    color: #E59A9A;
}

.tnode.cat-market.killed .tn-dot[b-cfluptgmvs] {
    background: #B65151;
}

.tnode.cat-market.killed .tn-name[b-cfluptgmvs] {
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.4);
}

.tnode.past .tn-tile[b-cfluptgmvs] {
    opacity: .82;
}
/* EXPANDED OVERLAY - hovered/selected node lifts above everything */
.tn-exp[b-cfluptgmvs] {
    display: none;
}

.tnode.on[b-cfluptgmvs] {
    z-index: 60;
    width: 286px;
    flex-direction: column;
    align-items: flex-start;
}

    .tnode.on .tn-conn[b-cfluptgmvs], .tnode.on .tn-dot[b-cfluptgmvs] {
        display: none;
    }
    /* the small tile stays exactly where it was and becomes the card header */
    .tnode.on .tn-tile[b-cfluptgmvs] {
        position: relative;
        z-index: 1;
        width: 100%;
        order: 0;
        border-radius: 13px 13px 0 0;
        border-bottom: 0;
        transform: none;
        min-height: 0;
        box-shadow: 0 0 0 0.5px var(--line-2);
        transition: none;
    }

.tnode.cat-market.on .tn-tile[b-cfluptgmvs] {
    box-shadow: 0 0 0 0.5px rgba(255,255,255,.1);
}
/* body unfolds downward from under the header (true accordion), smooth easing */
.tnode.on .tn-exp[b-cfluptgmvs] {
    display: block;
    order: 1;
    width: 100%;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-top: 0;
    border-radius: 0 0 13px 13px;
    box-shadow: 0 26px 64px rgba(22,21,20,.24);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    animation: tnreveal-b-cfluptgmvs .5s cubic-bezier(.16,.84,.3,1) forwards;
}

.tnode.cat-market.on .tn-exp[b-cfluptgmvs] {
    background: linear-gradient(180deg,#1A2E43,#16273A);
    border-color: rgba(255,255,255,.1);
}
/* below-side cards grow upward toward the axis: header sits at the bottom, body unfolds above it */
.tnode.below.on .tn-tile[b-cfluptgmvs] {
    order: 1;
    border-radius: 0 0 13px 13px;
    border-bottom: 0.5px solid var(--line-2);
    border-top: 0;
}

.tnode.below.on .tn-exp[b-cfluptgmvs] {
    order: 0;
    border-top: 0.5px solid var(--line-2);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
}

@keyframes tnreveal-b-cfluptgmvs {
    0% {
        max-height: 0;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        max-height: 380px;
        opacity: 1;
    }
}
/* inner content fades and settles as the panel opens, a touch delayed so it follows the unfold */
.tnode.on .tne-body[b-cfluptgmvs] {
    animation: tnbody-b-cfluptgmvs .46s cubic-bezier(.16,.84,.3,1) .08s both;
}

@keyframes tnbody-b-cfluptgmvs {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tne-body[b-cfluptgmvs] {
    padding: 13px 16px 15px;
}

.tne-narr[b-cfluptgmvs] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 12px;
}

.tne-facts[b-cfluptgmvs] {
    display: flex;
    gap: 8px;
    margin-bottom: 13px;
}

.tne-fact[b-cfluptgmvs] {
    flex: 1;
    background: var(--surface-2);
    border-radius: 9px;
    padding: 8px 7px;
    text-align: center;
}

    .tne-fact b[b-cfluptgmvs] {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .tne-fact span[b-cfluptgmvs] {
        font-size: 8.5px;
        color: var(--ink-3);
        line-height: 1.2;
        display: block;
        margin-top: 3px;
    }

.tne-foot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tne-owner[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.tne-av[b-cfluptgmvs] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.tne-onm[b-cfluptgmvs] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
}

.tne-orole[b-cfluptgmvs] {
    font-size: 9px;
    color: var(--ink-3);
}

.tne-act[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

    .tne-act:hover[b-cfluptgmvs] {
        background: var(--brand-2);
    }

    .tne-act i[b-cfluptgmvs] {
        font-size: 13px;
    }

.tne-badge[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

    .tne-badge i[b-cfluptgmvs] {
        font-size: 12px;
    }
/* category accents on the badge */
.tnode.cat-innov.on .tne-badge[b-cfluptgmvs] {
    color: #4448A8;
    background: #EEEFFB;
}

.tnode.cat-project.done.on .tne-badge[b-cfluptgmvs] {
    color: #2F7A66;
    background: #E6F2EE;
}

.tnode.cat-project.now.on .tne-badge[b-cfluptgmvs] {
    color: #2E5E8C;
    background: #E8F1F9;
}

.tnode.cat-project.soon.on .tne-badge[b-cfluptgmvs] {
    color: #9A7526;
    background: #F7EFDD;
}
/* dark market body */
.tnode.cat-market.on .tne-badge[b-cfluptgmvs] {
    color: #F0A888;
    background: rgba(224,128,92,.18);
}

.tnode.cat-market.on .tne-narr[b-cfluptgmvs] {
    color: #CFE0EE;
}

.tnode.cat-market.on .tne-fact[b-cfluptgmvs] {
    background: rgba(255,255,255,.07);
}

    .tnode.cat-market.on .tne-fact b[b-cfluptgmvs] {
        color: #fff;
    }

    .tnode.cat-market.on .tne-fact span[b-cfluptgmvs] {
        color: #9FB4CC;
    }

.tnode.cat-market.on .tne-onm[b-cfluptgmvs] {
    color: #fff;
}

.tnode.cat-market.on .tne-orole[b-cfluptgmvs] {
    color: #9FB4CC;
}

.tnode.cat-market.killed.on .tne-badge[b-cfluptgmvs] {
    color: #E59A9A;
    background: rgba(182,81,81,.2);
}
/* glass scroll buttons */
.tl-scroll[b-cfluptgmvs] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 5;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: opacity .2s;
}

    .tl-scroll.left[b-cfluptgmvs] {
        left: 0;
        justify-content: flex-start;
        padding-left: 10px;
        background: linear-gradient(90deg,rgba(248,247,244,0.92),rgba(248,247,244,0));
    }

    .tl-scroll.right[b-cfluptgmvs] {
        right: 0;
        justify-content: flex-end;
        padding-right: 10px;
        background: linear-gradient(270deg,rgba(248,247,244,0.92),rgba(248,247,244,0));
    }

    .tl-scroll:disabled[b-cfluptgmvs] {
        opacity: 0;
        pointer-events: none;
    }

.tl-chev[b-cfluptgmvs] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 0.5px solid var(--line-2);
    box-shadow: 0 3px 10px rgba(22,21,20,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-ink);
    transition: transform .15s,background .15s;
}

.tl-scroll:hover .tl-chev[b-cfluptgmvs] {
    transform: scale(1.08);
    background: #fff;
}

.tl-chev i[b-cfluptgmvs] {
    font-size: 20px;
}

/* detail panel - one at a time */
.win-detail[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.wd-preview[b-cfluptgmvs] {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    overflow: hidden;
    color: #fff;
}

    .wd-preview[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px,rgba(255,255,255,0.08) 1px,transparent 0);
        background-size: 22px 22px;
    }

.wd-prev-badge[b-cfluptgmvs] {
    position: relative;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    padding: 5px 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .wd-prev-badge i[b-cfluptgmvs] {
        font-size: 13px;
    }

.wd-play[b-cfluptgmvs] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s,background .15s;
}

    .wd-play:hover[b-cfluptgmvs] {
        transform: translate(-50%,-50%) scale(1.06);
        background: rgba(255,255,255,0.28);
    }

    .wd-play i[b-cfluptgmvs] {
        font-size: 26px;
        margin-left: 3px;
    }

.wd-info[b-cfluptgmvs] {
    padding: 20px 22px 20px;
    display: flex;
    flex-direction: column;
}

.wd-meta[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--ink-3);
    margin-bottom: 11px;
}

.wd-title[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: clamp(20px,2.1vw,26px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.wd-narr[b-cfluptgmvs] {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 16px;
}

.wd-facts[b-cfluptgmvs] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.wd-fact[b-cfluptgmvs] {
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 13px;
    min-width: 84px;
}

    .wd-fact b[b-cfluptgmvs] {
        display: block;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
    }

    .wd-fact span[b-cfluptgmvs] {
        font-size: 10.5px;
        color: var(--ink-2);
        margin-top: 4px;
        display: block;
    }

.wd-owner[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 18px;
}

    .wd-owner .av-sm[b-cfluptgmvs] {
        width: 28px;
        height: 28px;
    }

    .wd-owner b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 600;
    }

.wd-actions[b-cfluptgmvs] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: auto;
}

.wd-btn[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 0.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

    .wd-btn:hover[b-cfluptgmvs] {
        background: var(--surface-2);
    }

    .wd-btn i[b-cfluptgmvs] {
        font-size: 16px;
    }

    .wd-btn.primary[b-cfluptgmvs] {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
    }

        .wd-btn.primary:hover[b-cfluptgmvs] {
            background: var(--brand-2);
        }

    .wd-btn.ai[b-cfluptgmvs] {
        margin-left: auto;
        color: var(--brand-2);
        border-color: transparent;
    }

        .wd-btn.ai:hover[b-cfluptgmvs] {
            background: var(--inside-soft);
        }

@media(min-width:720px) {
    .win-detail[b-cfluptgmvs] {
        grid-template-columns: 300px 1fr;
    }

    .wd-preview[b-cfluptgmvs] {
        min-height: 100%;
    }
}

@media(min-width:1100px) {
    .win-detail[b-cfluptgmvs] {
        grid-template-columns: 360px 1fr;
    }
}

/* shared avatar helpers */
.av-sm[b-cfluptgmvs] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-2);
    flex-shrink: 0;
}

.av-ai[b-cfluptgmvs] {
    background: var(--inside-soft);
    color: var(--inside-ink);
}

.av-me[b-cfluptgmvs] {
    background: var(--brand);
    color: #fff;
}

/* SOLVE - split problem cards: one left surface + one embedded solutions object */
.solve-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.solve-count[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-2);
}

    .solve-count span[b-cfluptgmvs] {
        color: var(--prob-ink);
    }

.solve-raise[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: 999px;
    padding: 8px 14px;
}

    .solve-raise:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        border-color: var(--brand-2);
    }

    .solve-raise i[b-cfluptgmvs] {
        font-size: 16px;
    }

.prob-cards[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pcard[b-cfluptgmvs] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(22,21,20,.04);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}

    .pcard:hover[b-cfluptgmvs] {
        border-color: rgba(88,71,242,.2);
        box-shadow: 0 12px 32px rgba(22,21,20,.09);
        transform: translateY(-2px);
    }

@media(min-width:880px) {
    .pcard[b-cfluptgmvs] {
        grid-template-columns: minmax(0,1fr) minmax(0,0.92fr);
        min-height: 520px;
    }
}
/* LEFT - one surface: problem + flowing context + compact contribute */
.pc-left[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    padding: 30px 32px 26px;
    min-width: 0;
}

.pc-top[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.pc-urg[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 999px;
}

    .pc-urg.high[b-cfluptgmvs] {
        background: var(--prob-soft);
        color: var(--prob-ink);
    }

    .pc-urg.rising[b-cfluptgmvs] {
        background: var(--warn-soft);
        color: var(--warn-ink);
    }

    .pc-urg.steady[b-cfluptgmvs] {
        background: var(--surface-3);
        color: var(--ink-2);
    }

.pc-kicker[b-cfluptgmvs] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.pc-fb[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 0;
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
}

    .pc-fb:hover[b-cfluptgmvs] {
        background: var(--surface-3);
        color: var(--ink);
    }

    .pc-fb i[b-cfluptgmvs] {
        font-size: 13px;
        color: var(--ink-3);
    }

.pc-title[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: clamp(21px,2vw,27px);
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 10px;
}

.pc-why[b-cfluptgmvs] {
    font-size: 14px;
    line-height: 1.58;
    color: var(--ink-2);
    margin: 0 0 16px;
}

.pc-imps[b-cfluptgmvs] {
    display: flex;
    gap: 16px 30px;
    flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--surface-2);
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    margin: 0 0 22px;
}

.pc-imp[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .pc-imp b[b-cfluptgmvs] {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
        color: var(--ink);
    }

    .pc-imp span[b-cfluptgmvs] {
        font-size: 11px;
        color: var(--ink-2);
        line-height: 1.3;
        max-width: 16ch;
    }

.pc-meta[b-cfluptgmvs] {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pc-para[b-cfluptgmvs] {
    margin: 0;
}

.pc-affects h4[b-cfluptgmvs], .pc-people-row h4[b-cfluptgmvs] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 5px;
}

.pc-affects p[b-cfluptgmvs] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

.pc-owns[b-cfluptgmvs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.pc-own[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

.pc-own-av[b-cfluptgmvs] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--inside-soft);
    color: var(--inside-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.pc-noown[b-cfluptgmvs] {
    font-size: 12.5px;
    color: var(--ink-3);
    font-style: italic;
}

.pc-ownnote[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
    margin: 6px 0 0;
}
/* compact smart contribute bar */
.pcc[b-cfluptgmvs] {
    margin-top: auto;
}

    .pcc[b-cfluptgmvs]::before {
        content: "";
        display: block;
        height: 1px;
        margin: 0 0 18px;
        background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
    }

.pcc-bar[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 6px 5px 14px;
    transition: background .18s, border-color .18s, box-shadow .18s;
}

    .pcc-bar:hover[b-cfluptgmvs] {
        background: var(--surface);
        border-color: var(--line-2);
    }

    .pcc-bar:focus-within[b-cfluptgmvs] {
        background: var(--surface);
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(88,71,242,.14);
    }

.pcc-lead[b-cfluptgmvs] {
    font-size: 16px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: color .18s;
}

.pcc-bar:hover .pcc-lead[b-cfluptgmvs],
.pcc-bar:focus-within .pcc-lead[b-cfluptgmvs] {
    color: var(--brand);
}

.pcc-in[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    padding: 7px 0;
}

    .pcc-in[b-cfluptgmvs]::placeholder {
        color: var(--ink-3);
    }

.pcc-on[b-cfluptgmvs] {
    flex-shrink: 0;
    border: 0;
    outline: 0;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.78);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 8px;
    max-width: 120px;
    cursor: pointer;
}

.pcc-go[b-cfluptgmvs] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--ink-3);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .pcc-bar:hover .pcc-go[b-cfluptgmvs],
    .pcc-bar:focus-within .pcc-go[b-cfluptgmvs],
    .pcc-go:hover[b-cfluptgmvs] {
        background: var(--brand);
        color: #fff;
    }

    .pcc-go i[b-cfluptgmvs] {
        font-size: 15px;
    }

.pcc-ack[b-cfluptgmvs] {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-2);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s,margin-top .2s;
}

    .pcc-ack.show[b-cfluptgmvs] {
        max-height: 60px;
        margin-top: 9px;
        display: flex;
        align-items: flex-start;
        gap: 7px;
    }

    .pcc-ack i[b-cfluptgmvs] {
        font-size: 14px;
        color: var(--ok-ink);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .pcc-ack b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 600;
    }

    .pcc-ack.thinking[b-cfluptgmvs] {
        color: var(--ink-3);
    }

.pcc-dots[b-cfluptgmvs] {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-top: 4px;
}

    .pcc-dots i[b-cfluptgmvs] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand-2);
        animation: invblink-b-cfluptgmvs 1s infinite;
    }

        .pcc-dots i:nth-child(2)[b-cfluptgmvs] {
            animation-delay: .15s;
        }

        .pcc-dots i:nth-child(3)[b-cfluptgmvs] {
            animation-delay: .3s;
        }

.pcc-mine[b-cfluptgmvs] {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 9px;
}

    .pcc-mine.show[b-cfluptgmvs] {
        display: flex;
    }

    .pcc-mine i[b-cfluptgmvs] {
        font-size: 13px;
        color: var(--accent-ink);
    }
/* problem card - reframed IA: theme pill, HMW, people, contribution count */
.pc-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}

.pc-theme[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .015em;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 0.5px solid var(--line-2);
    border-radius: 999px;
    padding: 5px 12px;
}

.pc-hmw[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 14px;
}

.pc-desc[b-cfluptgmvs] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 22px;
}

.pc-stmt[b-cfluptgmvs] {
    color: var(--ink);
    font-weight: 600;
}

.pc-affects[b-cfluptgmvs] {
    margin: 0 0 20px;
}

.pc-people-row[b-cfluptgmvs] {
    margin: 0 0 26px;
}

.pc-people[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.pc-avs[b-cfluptgmvs] {
    display: flex;
    align-items: center;
}

.pc-av[b-cfluptgmvs] {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--inside-soft);
    background-size: cover;
    background-position: center;
    color: var(--inside-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--surface);
    cursor: default;
    outline: none;
    transition: transform .14s, box-shadow .14s;
    z-index: 1;
}

    .pc-av:first-child[b-cfluptgmvs] {
        margin-left: 0;
    }

    .pc-av:hover[b-cfluptgmvs],
    .pc-av:focus-visible[b-cfluptgmvs] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(22,21,20,.18);
        z-index: 6;
    }

.pc-av-mono[b-cfluptgmvs] {
    pointer-events: none;
}

.pc-av-card[b-cfluptgmvs] {
    position: absolute;
    bottom: calc(100% + 9px);
    left: -2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    padding: 7px 11px;
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(22,21,20,.32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 20;
}

    .pc-av-card[b-cfluptgmvs]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 16px;
        border: 5px solid transparent;
        border-top-color: var(--ink);
    }

    .pc-av-card b[b-cfluptgmvs] {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }

    .pc-av-card span[b-cfluptgmvs] {
        font-size: 10.5px;
        color: rgba(255,255,255,.62);
    }

.pc-av:hover .pc-av-card[b-cfluptgmvs],
.pc-av:focus-visible .pc-av-card[b-cfluptgmvs] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pc-people-n[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
}

.pcc-count[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 10px;
}

    .pcc-count i[b-cfluptgmvs] {
        font-size: 13px;
        color: var(--ink-3);
    }

    .pcc-count b[b-cfluptgmvs] {
        font-weight: 600;
        color: var(--ink-2);
    }

.pcc-add[b-cfluptgmvs] {
    color: var(--ink-3);
}

/* RIGHT - embedded solutions component resting on the same surface (margin, no split) */
.pc-right[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 20px 20px 6px;
}

@media(max-width:879px) {
    .pc-right[b-cfluptgmvs] {
        padding: 0 20px 20px;
        max-height: none;
    }
}

.sol-panel[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--canvas);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(22,21,20,.05);
}

.sol-panel-h[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    flex-shrink: 0;
}

.sph-t[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
}

    .sph-t i[b-cfluptgmvs] {
        font-size: 16px;
        color: var(--accent-ink);
    }

.sph-n[b-cfluptgmvs] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sol-list[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 0 14px 4px;
    flex: 1;
    scrollbar-width: thin;
}

    .sol-list[b-cfluptgmvs]::-webkit-scrollbar {
        width: 7px;
    }

    .sol-list[b-cfluptgmvs]::-webkit-scrollbar-thumb {
        background: var(--line-2);
        border-radius: 4px;
    }

.sol[b-cfluptgmvs] {
    position: relative;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(22,21,20,.04);
    transition: box-shadow .15s,transform .15s,border-color .15s;
}

    .sol:hover[b-cfluptgmvs] {
        border-color: rgba(88,71,242,.22);
        box-shadow: 0 10px 26px rgba(22,21,20,.09);
        transform: translateY(-2px);
    }

.sol-top[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sol-title[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.22;
    color: var(--ink);
    margin: 0;
    cursor: pointer;
}

    .sol-title:hover[b-cfluptgmvs] {
        color: var(--brand-ink);
    }

.sol-why[b-cfluptgmvs] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
    margin: 7px 0 0;
}

.sol-code[b-cfluptgmvs] {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.sol-vote[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.sv[b-cfluptgmvs] {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .14s, color .14s;
}

    .sv i[b-cfluptgmvs] {
        font-size: 14px;
    }

    .sv:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        color: var(--ink);
    }

    .sv.up.on[b-cfluptgmvs] {
        color: var(--ok-ink);
        background: var(--ok-soft);
    }

    .sv.down.on[b-cfluptgmvs] {
        color: var(--prob-ink);
        background: var(--prob-soft);
    }

.sv-n[b-cfluptgmvs] {
    min-width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* when browsing solutions, gently highlight the contribution bar */
.pcard.nudge .pcc-bar[b-cfluptgmvs] {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 3px rgba(74,56,214,.1);
}

.pcard.nudge .pcc-lead[b-cfluptgmvs] {
    color: var(--brand);
}
/* JIT feedback inline */
.jit[b-cfluptgmvs] {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 4px 4px 4px 12px;
    background: var(--surface);
}

    .jit.open[b-cfluptgmvs] {
        display: flex;
    }

.sol .jit[b-cfluptgmvs] {
    margin: 10px 0 0;
}

.jit input[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
    padding: 7px 0;
}

    .jit input[b-cfluptgmvs]::placeholder {
        color: var(--ink-3);
    }

.jit-send[b-cfluptgmvs] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .jit-send:hover[b-cfluptgmvs] {
        background: var(--brand-2);
    }

    .jit-send i[b-cfluptgmvs] {
        font-size: 14px;
    }

/* MARKET - outlook + attributed signal feed */
/* ===================================================================== */
/*  READ THE MARKET (rebuilt: read, patterns, competitors, startups,     */
/*  macro trends, news, compact contribute)                              */
/* ===================================================================== */

/* the read - meta line under the narrative */
.mr-readmeta[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.mr-temp[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--prob-ink);
    background: var(--prob-soft);
    padding: 4px 10px;
    border-radius: 99px;
}

.mr-temp-dot[b-cfluptgmvs] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--prob);
    box-shadow: 0 0 0 3px var(--prob-soft);
}

.mr-asof[b-cfluptgmvs] {
    font-size: 11.5px;
    color: var(--ink-3);
}

/* band labels between treatments */
.mr-band[b-cfluptgmvs] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 13px;
}

.mr-band-l[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.mr-band-c[b-cfluptgmvs] {
    font-size: 11.5px;
    color: var(--ink-3);
}

.mr-band.narrow[b-cfluptgmvs] {
    max-width: 700px;
}

/* classification chips (shared across patterns, cards) */
.mc-chip[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 99px;
}

    .mc-chip i[b-cfluptgmvs] {
        font-size: 10px;
    }

.mc-threat[b-cfluptgmvs] {
    background: var(--spark-soft);
    color: var(--spark-ink);
}

.mc-shift[b-cfluptgmvs] {
    background: var(--inside-soft);
    color: var(--inside-ink);
}

.mc-opp[b-cfluptgmvs] {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.mc-watch[b-cfluptgmvs] {
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.mc-tail[b-cfluptgmvs] {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.mc-head[b-cfluptgmvs] {
    background: var(--prob-soft);
    color: var(--prob-ink);
}

/* patterns - accordion (one open at a time) */
.mr-pats[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 700px;
}

.mr-pat[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    .mr-pat:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
    }

    .mr-pat.open[b-cfluptgmvs] {
        border-color: var(--line-2);
        box-shadow: 0 8px 26px rgba(22,21,20,0.06);
    }

.mr-pat-h[b-cfluptgmvs] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--sans);
}

.mr-pat-main[b-cfluptgmvs] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mr-pat-name[b-cfluptgmvs] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.mr-pat-ess[b-cfluptgmvs] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2);
}

.mr-pat-meta[b-cfluptgmvs] {
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
    color: var(--ink-3);
}

.mr-chev[b-cfluptgmvs] {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ink-3);
    transition: transform .2s;
}

.mr-pat.open .mr-chev[b-cfluptgmvs] {
    transform: rotate(180deg);
}

.mr-pat-body[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 15px 15px;
}

.mr-pat-why[b-cfluptgmvs] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* sources - outbound chips */
.mr-srcs[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.mr-srcs-l[b-cfluptgmvs] {
    margin-right: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.mr-src[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--brand-2);
    text-decoration: none;
    border: 0.5px solid var(--line-2);
    padding: 3px 9px;
    border-radius: 99px;
    transition: background .15s, border-color .15s;
}

    .mr-src:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        border-color: var(--brand-2);
    }

    .mr-src i[b-cfluptgmvs] {
        font-size: 9px;
    }

    .mr-src.dim[b-cfluptgmvs] {
        border: 0;
        padding: 0;
        color: var(--ink-3);
    }

        .mr-src.dim:hover[b-cfluptgmvs] {
            background: none;
            color: var(--brand-2);
            text-decoration: underline;
        }

/* the recommended action - highlighted */
.mr-action[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--accent-ink);
}

    .mr-action i[b-cfluptgmvs] {
        margin-top: 2px;
        font-size: 13px;
        color: var(--accent);
    }

    .mr-action b[b-cfluptgmvs] {
        font-weight: 700;
    }

.mr-ctas[b-cfluptgmvs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* contextual CTAs */
.mr-cta[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 13px;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    transition: background .15s, transform .1s;
}

    .mr-cta:hover[b-cfluptgmvs] {
        background: var(--brand-ink);
    }

    .mr-cta:active[b-cfluptgmvs] {
        transform: translateY(1px);
    }

    .mr-cta i[b-cfluptgmvs] {
        font-size: 10px;
    }

    .mr-cta.sm[b-cfluptgmvs] {
        font-size: 11.5px;
        padding: 6px 11px;
        background: transparent;
        color: var(--ink);
        border: 0.5px solid var(--line-2);
    }

        .mr-cta.sm:hover[b-cfluptgmvs] {
            background: var(--surface-2);
            border-color: var(--brand-2);
            color: var(--brand-ink);
        }

    .mr-cta.ghost[b-cfluptgmvs] {
        color: var(--ink-2);
    }

/* horizontal scroll rails (competitors, startups, news) */
.mr-rail[b-cfluptgmvs] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 2px;
    padding: 4px 2px 14px;
    margin: 0 -2px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

    .mr-rail[b-cfluptgmvs]::-webkit-scrollbar {
        height: 8px;
    }

    .mr-rail[b-cfluptgmvs]::-webkit-scrollbar-thumb {
        background: var(--line-2);
        border-radius: 99px;
    }

    .mr-rail[b-cfluptgmvs]::-webkit-scrollbar-track {
        background: transparent;
    }

    .mr-rail > *[b-cfluptgmvs] {
        scroll-snap-align: start;
    }

/* competitor + startup cards */
.mr-comp[b-cfluptgmvs],
.mr-start[b-cfluptgmvs] {
    flex: 0 0 272px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 15px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .mr-comp:hover[b-cfluptgmvs],
    .mr-start:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(22,21,20,0.07);
    }

.mr-cs-top[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mr-logo[b-cfluptgmvs] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-2);
    border: 0.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

    .mr-logo img[b-cfluptgmvs] {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        object-fit: contain;
        display: block;
    }

.mr-comp-id[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mr-cs-name[b-cfluptgmvs] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.mr-pos[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    border: 0.5px solid var(--line-2);
    padding: 2px 7px;
    border-radius: 99px;
}

.mr-comp-move[b-cfluptgmvs] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
}

    .mr-comp-move i[b-cfluptgmvs] {
        flex: 0 0 auto;
        margin-top: 6px;
        font-size: 7px;
        color: var(--ink-3);
    }

.mr-cs-why[b-cfluptgmvs] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
}

.mr-cs-foot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 11px;
    border-top: 0.5px solid var(--line);
}

.mr-start-pitch[b-cfluptgmvs] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
}

.mr-start-meta[b-cfluptgmvs] {
    font-size: 11.5px;
    color: var(--ink-3);
}

/* macro trends - prominent cards */
.mr-trends[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.mr-trend[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 17px 18px;
    transition: border-color .15s, box-shadow .15s;
}

    .mr-trend:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
        box-shadow: 0 12px 30px rgba(22,21,20,0.06);
    }

    .mr-trend .mr-cta[b-cfluptgmvs] {
        align-self: flex-start;
    }

.mr-trend-top[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mr-dir[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
}

    .mr-dir i[b-cfluptgmvs] {
        font-size: 11px;
    }

.mr-dir-up[b-cfluptgmvs] {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.mr-dir-down[b-cfluptgmvs] {
    background: var(--inside-soft);
    color: var(--inside-ink);
}

.mr-dir-new[b-cfluptgmvs] {
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.mr-horizon[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
}

.mr-trend-name[b-cfluptgmvs] {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
}

.mr-trend-why[b-cfluptgmvs] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* news - cards with thumbnail + lightbox for video */
.mr-news[b-cfluptgmvs] {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font-family: var(--sans);
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .mr-news:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(22,21,20,0.07);
    }

.mr-news-thumb[b-cfluptgmvs] {
    position: relative;
    height: 124px;
    background-color: var(--surface-2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mr-news-thumb.ph[b-cfluptgmvs] {
        background: linear-gradient(135deg, var(--surface-2), #E9E7E1);
    }

.mr-news-phic[b-cfluptgmvs] {
    font-size: 24px;
    color: var(--ink-3);
}

.mr-news-play[b-cfluptgmvs] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mr-news-play i[b-cfluptgmvs] {
        margin-left: 2px;
        font-size: 15px;
    }

.mr-news-body[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 13px 13px;
}

.mr-news-meta[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-3);
}

.mr-news-title[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.mr-news-why[b-cfluptgmvs] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-2);
}

/* contribute - compact strip at the foot of the section */
.mkt-contrib[b-cfluptgmvs] {
    background: var(--surface-2);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 13px 15px;
    margin-top: 20px;
    max-width: 700px;
}

.mkc-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.mkc-ic[b-cfluptgmvs] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mkc-ic i[b-cfluptgmvs] {
        font-size: 14px;
    }

.mkc-h[b-cfluptgmvs] {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

    .mkc-h span[b-cfluptgmvs] {
        font-weight: 400;
        color: var(--ink-3);
    }

@media (max-width: 640px) {
    .mr-trends[b-cfluptgmvs] {
        grid-template-columns: 1fr;
    }

    .mr-comp[b-cfluptgmvs],
    .mr-start[b-cfluptgmvs] {
        flex-basis: 84%;
    }

    .mr-news[b-cfluptgmvs] {
        flex-basis: 80%;
    }

    .mr-pat-meta[b-cfluptgmvs] {
        display: none;
    }
}

/* Experiences (AI tools) compact band */
/* Experiences (AI tools) compact band */
.xgrid[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.xc[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px 18px 16px;
    min-height: 300px;
    cursor: pointer;
    transition: border-color .15s,transform .15s,box-shadow .15s;
}

    .xc:hover[b-cfluptgmvs] {
        border-color: var(--line-2);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(22,21,20,0.07);
    }

.xc-ic[b-cfluptgmvs] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

    .xc-ic i[b-cfluptgmvs] {
        font-size: 22px;
    }

.xc-tag[b-cfluptgmvs] {
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.xc-name[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 15px;
}

.xc-demo[b-cfluptgmvs] {
    background: var(--surface-2);
    border-radius: var(--r-lg);
    padding: 13px;
    margin-top: auto;
}

.xc-q[b-cfluptgmvs] {
    font-size: 12px;
    color: var(--ink-2);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 9px;
    line-height: 1.4;
}

    .xc-q i[b-cfluptgmvs] {
        font-size: 14px;
        flex-shrink: 0;
        margin-top: 1px;
    }

.xc-ans[b-cfluptgmvs] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink);
}

    .xc-ans b[b-cfluptgmvs] {
        font-weight: 600;
    }

.xc-cta[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-2);
    margin-top: 14px;
}

    .xc-cta i[b-cfluptgmvs] {
        font-size: 15px;
        transition: transform .15s;
    }

.xc:hover .xc-cta i[b-cfluptgmvs] {
    transform: translateX(3px);
}

.collide[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 7px;
    color: var(--ink);
}

    .collide .pin[b-cfluptgmvs] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .collide b[b-cfluptgmvs] {
        font-weight: 600;
    }

.savechip[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent-soft);
    padding: 4px 9px;
    border-radius: 999px;
    margin-top: 6px;
}

    .savechip i[b-cfluptgmvs] {
        font-size: 13px;
    }

.person[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.pf[b-cfluptgmvs] {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.pmeta[b-cfluptgmvs] {
    min-width: 0;
}

.pn[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
}

.pr[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-2);
}

.pav[b-cfluptgmvs] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    flex-shrink: 0;
}

    .pav.soon[b-cfluptgmvs] {
        background: var(--surface-3);
        color: var(--ink-2);
    }

@media(min-width:680px) {
    .xgrid[b-cfluptgmvs] {
        grid-template-columns: repeat(auto-fit,minmax(260px,360px));
        justify-content: center;
    }
}

/* Innovator's box - the portal's primary input surface (rest of page is output) */
.inv-card[b-cfluptgmvs] {
    position: relative;
    padding: 18px 17px 16px;
    background: linear-gradient(165deg,#FFFFFF 0%,var(--surface-2) 100%);
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-xl);
    box-shadow: 0 14px 38px rgba(22,21,20,.11);
    overflow: hidden;
}

    .inv-card[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--brand),var(--accent) 52%,var(--gold));
    }

.inv-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

    .inv-head .inv-ic[b-cfluptgmvs] {
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 0 0 0 rgba(74,56,214,.4);
        animation: invpulse-b-cfluptgmvs 2.8s infinite;
    }

        .inv-head .inv-ic i[b-cfluptgmvs] {
            font-size: 20px;
        }

@keyframes invpulse-b-cfluptgmvs {
    0% {
        box-shadow: 0 0 0 0 rgba(74,56,214,.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(74,56,214,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74,56,214,0);
    }
}

.inv-head .acx b[b-cfluptgmvs] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    display: block;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.inv-head .acx span[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
}

.inv-live[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

    .inv-live .dot[b-cfluptgmvs] {
        width: 6px;
        height: 6px;
        background: var(--accent);
    }

.inv-body[b-cfluptgmvs] {
    min-height: 158px;
}

.inv-ta[b-cfluptgmvs] {
    width: 100%;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 12px 13px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    resize: none;
    outline: none;
    min-height: 92px;
    transition: border-color .15s,box-shadow .15s;
}

    .inv-ta:focus[b-cfluptgmvs] {
        border-color: var(--brand-2);
        box-shadow: 0 0 0 3px rgba(74,56,214,.13);
    }

    .inv-ta[b-cfluptgmvs]::placeholder {
        color: var(--ink-3);
    }

.inv-hint[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
    margin: 9px 0 0;
    line-height: 1.45;
}

.inv-go[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
}

.inv-send[b-cfluptgmvs] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    border: 0;
    transition: background .15s,transform .12s;
}

    .inv-send:hover[b-cfluptgmvs] {
        background: var(--brand-2);
        transform: translateY(-1px);
    }

    .inv-send i[b-cfluptgmvs] {
        font-size: 16px;
    }

.inv-mic[b-cfluptgmvs] {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    border: 0.5px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .inv-mic:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        color: var(--ink);
    }

    .inv-mic i[b-cfluptgmvs] {
        font-size: 17px;
    }
/* thinking */
.inv-think[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 6px 0 2px;
}

    .inv-think .dotpulse[b-cfluptgmvs] {
        display: inline-flex;
        gap: 3px;
    }

        .inv-think .dotpulse i[b-cfluptgmvs] {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-2);
            animation: invblink-b-cfluptgmvs 1s infinite;
        }

            .inv-think .dotpulse i:nth-child(2)[b-cfluptgmvs] {
                animation-delay: .15s;
            }

            .inv-think .dotpulse i:nth-child(3)[b-cfluptgmvs] {
                animation-delay: .3s;
            }

@keyframes invblink-b-cfluptgmvs {
    0%,100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}

.inv-shim[b-cfluptgmvs] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
    background-size: 200% 100%;
    animation: invshim-b-cfluptgmvs 1.2s infinite;
    margin-top: 10px;
}

@keyframes invshim-b-cfluptgmvs {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* minimal playback: you said / I understood */
.inv-pb[b-cfluptgmvs] {
    padding-top: 2px;
}

.inv-lbl[b-cfluptgmvs] {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.inv-quote[b-cfluptgmvs] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    font-style: italic;
    border-left: 2px solid var(--line-2);
    padding-left: 11px;
    margin: 0 0 16px;
}

.inv-und-row[b-cfluptgmvs] {
    margin-bottom: 15px;
}

.inv-typetag[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

    .inv-typetag i[b-cfluptgmvs] {
        font-size: 11px;
    }

    .inv-typetag.problem[b-cfluptgmvs] {
        background: var(--prob-soft);
        color: var(--prob-ink);
    }

    .inv-typetag.idea[b-cfluptgmvs] {
        background: var(--inside-soft);
        color: var(--inside-ink);
    }

    .inv-typetag.pain[b-cfluptgmvs] {
        background: var(--warn-soft);
        color: var(--warn-ink);
    }

    .inv-typetag.market[b-cfluptgmvs] {
        background: var(--accent-soft);
        color: var(--accent-ink);
    }

.inv-refined[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    outline: none;
    border-radius: 6px;
    transition: box-shadow .15s,background .15s;
}

    .inv-refined:focus[b-cfluptgmvs] {
        box-shadow: 0 0 0 3px rgba(74,56,214,.16);
        background: var(--surface);
    }

.inv-relate[b-cfluptgmvs] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-2);
    background: var(--accent-soft);
    border-radius: var(--r-md);
    padding: 9px 11px;
    margin: 0 0 15px;
}

    .inv-relate i[b-cfluptgmvs] {
        font-size: 14px;
        color: var(--accent-ink);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .inv-relate b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 600;
    }

.inv-submit[b-cfluptgmvs] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    padding: 13px;
    border-radius: var(--r-md);
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: filter .15s,transform .12s;
}

    .inv-submit:hover[b-cfluptgmvs] {
        filter: brightness(1.07);
        transform: translateY(-1px);
    }

    .inv-submit i[b-cfluptgmvs] {
        font-size: 17px;
    }

    .inv-submit.idea[b-cfluptgmvs] {
        background: var(--brand);
    }

    .inv-submit.problem[b-cfluptgmvs] {
        background: var(--prob);
    }

    .inv-submit.pain[b-cfluptgmvs] {
        background: var(--warn-ink);
    }

    .inv-submit.market[b-cfluptgmvs] {
        background: var(--accent);
    }

.inv-redo-row[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.inv-fix[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

    .inv-fix:hover[b-cfluptgmvs] {
        color: var(--ink);
    }

    .inv-fix i[b-cfluptgmvs] {
        font-size: 14px;
    }

.inv-link[b-cfluptgmvs] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

    .inv-link:hover[b-cfluptgmvs] {
        color: var(--ink);
    }
/* unclear (junk input) */
.inv-unclear[b-cfluptgmvs] {
    text-align: center;
    padding: 10px 0 4px;
}

.inv-ic-soft[b-cfluptgmvs] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

    .inv-ic-soft i[b-cfluptgmvs] {
        font-size: 23px;
    }

.inv-unclear p[b-cfluptgmvs] {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 15px;
}
/* done */
.inv-done[b-cfluptgmvs] {
    text-align: center;
    padding: 10px 0 4px;
}

    .inv-done .inv-check[b-cfluptgmvs] {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--ok-soft);
        color: var(--ok-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
    }

        .inv-done .inv-check i[b-cfluptgmvs] {
            font-size: 25px;
        }

    .inv-done b[b-cfluptgmvs] {
        font-size: 14px;
        color: var(--ink);
        display: block;
        margin-bottom: 5px;
    }

    .inv-done p[b-cfluptgmvs] {
        font-size: 11.5px;
        color: var(--ink-2);
        line-height: 1.55;
        margin: 0 0 15px;
    }

.inv-again[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    color: var(--brand-ink);
}

    .inv-again:hover[b-cfluptgmvs] {
        background: var(--surface-2);
    }

    .inv-again i[b-cfluptgmvs] {
        font-size: 15px;
    }
/* footer */
.inv-foot[b-cfluptgmvs] {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 0.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inv-tally[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-2);
    line-height: 1.35;
}

    .inv-tally b[b-cfluptgmvs] {
        color: var(--ink);
        font-weight: 600;
    }

    .inv-tally span[b-cfluptgmvs] {
        display: block;
        font-size: 10px;
        color: var(--ink-3);
    }

.inv-space[b-cfluptgmvs] {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-2);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .inv-space:hover[b-cfluptgmvs] {
        color: var(--brand-ink);
    }

    .inv-space i[b-cfluptgmvs] {
        font-size: 14px;
    }
/* TOOL SKIN - the Innovator's box adopts the dark Ainna-island material (dark = act here) */
.rl-card.inv-card[b-cfluptgmvs] {
    background: linear-gradient(180deg,var(--tool-2),var(--tool));
    border: 1px solid var(--tool-line);
    box-shadow: var(--shadow-tool);
}

.inv-card[b-cfluptgmvs]::before {
    background: linear-gradient(90deg,var(--brand-2),var(--accent) 52%,var(--gold));
    opacity: .9;
}

.inv-head .acx b[b-cfluptgmvs] {
    color: #fff;
}

.inv-head .acx span[b-cfluptgmvs] {
    color: rgba(255,255,255,.5);
}

.inv-body[b-cfluptgmvs] {
    background: rgba(0,0,0,.28);
    border: 0.5px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 13px;
    min-height: 158px;
}

.inv-ta[b-cfluptgmvs] {
    background: rgba(255,255,255,.06);
    border: 0.5px solid rgba(255,255,255,.14);
    color: #fff;
}

    .inv-ta[b-cfluptgmvs]::placeholder {
        color: rgba(255,255,255,.5);
    }

    .inv-ta:focus[b-cfluptgmvs] {
        border-color: rgba(112,140,176,.6);
        box-shadow: 0 0 0 3px rgba(112,140,176,.18);
        background: rgba(255,255,255,.09);
    }

.inv-hint[b-cfluptgmvs] {
    color: rgba(255,255,255,.5);
}

.inv-mic[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.7);
}

    .inv-mic:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.16);
        color: #fff;
    }

.inv-think[b-cfluptgmvs] {
    color: rgba(255,255,255,.62);
}

.inv-shim[b-cfluptgmvs] {
    background: linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));
}

.inv-unclear p[b-cfluptgmvs], .inv-done p[b-cfluptgmvs] {
    color: rgba(255,255,255,.66);
}

.inv-ic-soft[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.5);
}

.inv-again[b-cfluptgmvs], .inv-fix[b-cfluptgmvs] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
}

    .inv-again:hover[b-cfluptgmvs], .inv-fix:hover[b-cfluptgmvs] {
        background: rgba(255,255,255,.16);
        color: #fff;
    }

.inv-link[b-cfluptgmvs] {
    color: rgba(255,255,255,.58);
}

    .inv-link:hover[b-cfluptgmvs] {
        color: #fff;
    }

.inv-lbl[b-cfluptgmvs] {
    color: rgba(255,255,255,.52);
}

.inv-quote[b-cfluptgmvs] {
    color: rgba(255,255,255,.72);
    border-left-color: rgba(255,255,255,.2);
}

.inv-refined[b-cfluptgmvs] {
    color: #fff;
}

    .inv-refined:focus[b-cfluptgmvs] {
        background: rgba(255,255,255,.08);
        box-shadow: 0 0 0 3px rgba(112,140,176,.22);
    }

.inv-relate[b-cfluptgmvs] {
    color: rgba(255,255,255,.64);
}

    .inv-relate b[b-cfluptgmvs] {
        color: #fff;
    }

.inv-done b[b-cfluptgmvs] {
    color: #fff;
}

.inv-foot[b-cfluptgmvs] {
    border-top-color: rgba(255,255,255,.1);
}

.inv-tally[b-cfluptgmvs] {
    color: rgba(255,255,255,.64);
}

    .inv-tally b[b-cfluptgmvs] {
        color: #fff;
    }

    .inv-tally span[b-cfluptgmvs] {
        color: rgba(255,255,255,.42);
    }

.inv-live[b-cfluptgmvs] {
    color: #3DBE92;
}

.inv-space[b-cfluptgmvs] {
    color: #8FB4D8;
}

    .inv-space:hover[b-cfluptgmvs] {
        color: #B6D0E8;
    }


/* Watch & get inspired */
.watch[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 6px;
}

@media(min-width:860px) {
    .watch[b-cfluptgmvs] {
        grid-template-columns: 1.5fr 1fr;
        align-items: stretch;
    }
}

.vthumb[b-cfluptgmvs] {
    position: relative;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #16273A;
}

    .vthumb[b-cfluptgmvs]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(11,21,33,.1) 0%,rgba(11,21,33,.5) 70%,rgba(11,21,33,.82) 100%);
    }

    .vthumb .vdot[b-cfluptgmvs] {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);
        background-size: 22px 22px;
    }

.vplay[b-cfluptgmvs] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    z-index: 2;
    transition: transform .18s,background .18s;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

    .vplay i[b-cfluptgmvs] {
        font-size: 26px;
        margin-left: 3px;
    }

.vdur[b-cfluptgmvs] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(11,21,33,.72);
    border-radius: 6px;
    padding: 3px 7px;
    letter-spacing: .02em;
}

.vtag[b-cfluptgmvs] {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 0.5px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 4px 10px;
}
/* featured */
.vfeat[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: var(--r-lg);
}

    .vfeat .vthumb[b-cfluptgmvs] {
        aspect-ratio: 16/9;
    }

    .vfeat:hover .vplay[b-cfluptgmvs] {
        transform: translate(-50%,-50%) scale(1.08);
        background: #fff;
    }

    .vfeat .vf-info[b-cfluptgmvs] {
        padding: 14px 4px 0;
    }

    .vfeat .vf-title[b-cfluptgmvs] {
        font-family: var(--serif);
        font-size: 21px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

    .vfeat:hover .vf-title[b-cfluptgmvs] {
        color: var(--brand-ink);
    }

    .vfeat .vf-why[b-cfluptgmvs] {
        font-size: 13px;
        line-height: 1.55;
        color: var(--ink-2);
        margin: 7px 0 10px;
    }

    .vfeat .vf-src[b-cfluptgmvs] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 11.5px;
        color: var(--ink-3);
    }

        .vfeat .vf-src b[b-cfluptgmvs] {
            color: var(--ink-2);
            font-weight: 600;
        }

        .vfeat .vf-src .vf-dot[b-cfluptgmvs] {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--line-2);
        }
/* row of smaller cards */
.vlist[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vcard[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 13px;
    align-items: center;
    text-align: left;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 9px;
    cursor: pointer;
    transition: border-color .15s,transform .15s,box-shadow .15s;
    box-shadow: 0 1px 2px rgba(22,21,20,.04);
}

    .vcard:hover[b-cfluptgmvs] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(22,21,20,.1);
        border-color: var(--line-2);
    }

    .vcard .vthumb[b-cfluptgmvs] {
        aspect-ratio: 16/9;
        border-radius: 9px;
    }

    .vcard .vplay[b-cfluptgmvs] {
        width: 34px;
        height: 34px;
    }

        .vcard .vplay i[b-cfluptgmvs] {
            font-size: 15px;
            margin-left: 2px;
        }

    .vcard .vdur[b-cfluptgmvs] {
        bottom: 6px;
        right: 6px;
        font-size: 9px;
        padding: 2px 5px;
    }

    .vcard .vtag[b-cfluptgmvs] {
        display: none;
    }

.vc-info[b-cfluptgmvs] {
    min-width: 0;
}

.vc-title[b-cfluptgmvs] {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vcard:hover .vc-title[b-cfluptgmvs] {
    color: var(--brand-ink);
}

.vc-src[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-why[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media(max-width:380px) {
    .vcard[b-cfluptgmvs] {
        grid-template-columns: 96px 1fr;
    }
}
/* Innovation leaderboard */
.lb-period[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: 999px;
}

    .lb-period i[b-cfluptgmvs] {
        font-size: 12px;
        color: var(--ink-3);
    }

.lb[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* podium: top 3 */
.lb-podium[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr 1.16fr 1fr;
    gap: 12px;
    align-items: end;
}

.lb-pod[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 14px 16px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .lb-pod.gold[b-cfluptgmvs] {
        border-color: var(--gold);
        box-shadow: 0 10px 30px rgba(201,154,58,.16);
        background: linear-gradient(180deg,var(--gold-soft),var(--surface) 60%);
    }

.lb-pod-rank[b-cfluptgmvs] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: 2px solid var(--surface);
}

.lb-pod.gold .lb-pod-rank[b-cfluptgmvs] {
    background: var(--gold-ink);
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.lb-pod.silver .lb-pod-rank[b-cfluptgmvs] {
    background: #9AA3AD;
}

.lb-pod.bronze .lb-pod-rank[b-cfluptgmvs] {
    background: #B98253;
}

.lb-win[b-cfluptgmvs] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    color: var(--ink-3);
    filter: drop-shadow(0 2px 3px rgba(22,21,20,.2));
}

.lb-pod.gold .lb-win[b-cfluptgmvs] {
    font-size: 27px;
    top: -32px;
    color: var(--gold-ink);
}

.lb-pod.silver .lb-win[b-cfluptgmvs] {
    color: #9AA3AD;
}

.lb-pod.bronze .lb-win[b-cfluptgmvs] {
    color: #B98253;
}

.lb-pod-face[b-cfluptgmvs] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 600;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
}

.lb-pod.gold .lb-pod-face[b-cfluptgmvs] {
    width: 80px;
    height: 80px;
    font-size: 26px;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.lb-pod-name[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.lb-pod-role[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 2px;
}

.lb-pod-pts[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 9px;
    line-height: 1;
}

.lb-pod.gold .lb-pod-pts[b-cfluptgmvs] {
    font-size: 26px;
    color: var(--gold-ink);
}

.lb-pod-pts span[b-cfluptgmvs] {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    display: block;
    margin-top: 3px;
}

.lb-pod-story[b-cfluptgmvs] {
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-2);
    margin: 11px 0 0;
    max-width: 24ch;
}

.lb-pod.gold .lb-pod-story[b-cfluptgmvs] {
    color: var(--ink);
}

.lb-pod-tag[b-cfluptgmvs] {
    font-size: 10px;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--inside-soft);
    border-radius: 999px;
    padding: 3px 9px;
    margin-top: 10px;
}
/* ranked list */
.lb-list[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.lb-row[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-top: 0.5px solid var(--line);
    transition: background .14s;
}

    .lb-row:first-child[b-cfluptgmvs] {
        border-top: 0;
    }

    .lb-row:hover[b-cfluptgmvs] {
        background: var(--surface-2);
    }

.lb-rank[b-cfluptgmvs] {
    width: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.lb-delta[b-cfluptgmvs] {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

    .lb-delta.up[b-cfluptgmvs] {
        color: var(--ok-ink);
    }

    .lb-delta.down[b-cfluptgmvs] {
        color: var(--prob-ink);
    }

    .lb-delta.flat[b-cfluptgmvs] {
        color: var(--ink-3);
        font-size: 9px;
    }

.lb-face[b-cfluptgmvs] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.lb-main[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
}

.lb-name[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

    .lb-name .lb-you[b-cfluptgmvs] {
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--brand-ink);
        background: var(--inside-soft);
        border-radius: 999px;
        padding: 2px 7px;
        margin-left: 7px;
        vertical-align: middle;
    }

.lb-sub[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-pts[b-cfluptgmvs] {
    text-align: right;
    flex-shrink: 0;
}

    .lb-pts b[b-cfluptgmvs] {
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1;
    }

    .lb-pts span[b-cfluptgmvs] {
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-3);
        display: block;
        margin-top: 2px;
    }

.lb-row.me[b-cfluptgmvs] {
    background: var(--inside-soft);
}

    .lb-row.me:hover[b-cfluptgmvs] {
        background: var(--inside-soft);
    }

    .lb-row.me .lb-rank[b-cfluptgmvs] {
        color: var(--brand-ink);
    }
/* Hall of Fame - a rare honour roll. Compact, light, most spots awaiting the next innovator. */
.lb-fame[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-xl);
    padding: 24px 22px 22px;
    position: relative;
}

.lb-fame-head[b-cfluptgmvs] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lb-fame-htext[b-cfluptgmvs] {
    min-width: 0;
}

.lb-fame-kicker[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

    .lb-fame-kicker i[b-cfluptgmvs] {
        font-size: 14px;
    }

.lb-fame-t[b-cfluptgmvs] {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.18;
    margin: 8px 0 0;
}

.lb-fame-d[b-cfluptgmvs] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-3);
    margin: 5px 0 0;
    max-width: 56ch;
}

.lb-fame-count[b-cfluptgmvs] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.lb-roll[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.lb-spot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

    .lb-spot.hidden-spot[b-cfluptgmvs] {
        display: none;
    }

.lb-fame.expanded .lb-spot.hidden-spot[b-cfluptgmvs] {
    display: flex;
}

.lb-spot-no[b-cfluptgmvs] {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: var(--ink-3);
}

.lb-spot-av[b-cfluptgmvs] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.lb-spot.filled .lb-spot-av[b-cfluptgmvs] {
    box-shadow: 0 0 0 2px var(--gold-soft);
}

    .lb-spot.filled .lb-spot-av.gen-av[b-cfluptgmvs] {
        background: linear-gradient(160deg,#41648A,#1B3149);
        color: #fff;
        font-size: 17px;
        font-weight: 600;
        font-family: var(--serif);
    }

.lb-spot.empty[b-cfluptgmvs] {
    background: var(--surface-2);
    border-style: dashed;
    border-color: var(--line-2);
}

    .lb-spot.empty .lb-spot-av[b-cfluptgmvs] {
        border: 1.5px dashed var(--line-2);
        color: var(--ink-3);
    }

        .lb-spot.empty .lb-spot-av i[b-cfluptgmvs] {
            font-size: 18px;
        }

.lb-spot-body[b-cfluptgmvs] {
    flex: 1;
    min-width: 0;
}

.lb-spot.filled .lb-spot-name[b-cfluptgmvs] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.lb-spot-role[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 1px;
}

.lb-spot-story[b-cfluptgmvs] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-2);
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lb-spot-when[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-top: 7px;
}

    .lb-spot-when i[b-cfluptgmvs] {
        font-size: 11px;
    }

.lb-spot.empty .lb-spot-name[b-cfluptgmvs] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.lb-spot-wait[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 2px;
}

.lb-fame-more[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-ink);
    background: transparent;
    border: 0.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s,border-color .15s;
}

    .lb-fame-more:hover[b-cfluptgmvs] {
        background: var(--surface-2);
        border-color: var(--brand-2);
    }

    .lb-fame-more i[b-cfluptgmvs] {
        font-size: 15px;
        transition: transform .25s;
    }

.lb-fame.expanded .lb-fame-more i[b-cfluptgmvs] {
    transform: rotate(180deg);
}

@media(min-width:620px) {
    .lb-roll[b-cfluptgmvs] {
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width:980px) {
    .lb-roll[b-cfluptgmvs] {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(max-width:560px) {
    .lb-podium[b-cfluptgmvs] {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

    .lb-pod[b-cfluptgmvs] {
        flex-direction: row;
        text-align: left;
        gap: 12px;
        padding: 14px;
        flex-wrap: wrap;
    }

        .lb-pod-face[b-cfluptgmvs], .lb-pod.gold .lb-pod-face[b-cfluptgmvs] {
            margin-bottom: 0;
            width: 46px;
            height: 46px;
            font-size: 16px;
        }

    .lb-win[b-cfluptgmvs] {
        display: none;
    }

    .lb-pod-rank[b-cfluptgmvs] {
        position: static;
        transform: none;
        margin-right: 2px;
    }

    .lb-pod-pts[b-cfluptgmvs] {
        margin-top: 0;
        margin-left: auto;
    }

    .lb-pod-tag[b-cfluptgmvs] {
        display: none;
    }

    .lb-pod-main[b-cfluptgmvs] {
        flex: 1;
        min-width: 0;
    }

    .lb-pod-story[b-cfluptgmvs] {
        flex-basis: 100%;
        margin-top: 8px;
        max-width: none;
    }
}

/* Innovation Graph constellation */
/* Innovation heatmap - where innovation happens */
.heat[b-cfluptgmvs] {
    position: relative;
    background: var(--dark);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
    padding: 4px 0 6px;
}

.heat-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 22px 14px;
}

.heat-k[b-cfluptgmvs] {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dark-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.heat-x[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--dark-ink-3);
}

    .heat-x b[b-cfluptgmvs] {
        color: #fff;
        font-weight: 600;
    }

.heat-grid[b-cfluptgmvs] {
    display: grid;
    gap: 6px;
    padding: 0 18px 4px;
}

.heat-colhead[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 148px repeat(4,1fr) 70px;
    gap: 6px;
    align-items: end;
    margin-bottom: 2px;
}

    .heat-colhead .hc-area[b-cfluptgmvs] {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--dark-ink-3);
    }

    .heat-colhead .hc-st[b-cfluptgmvs] {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--dark-ink-3);
        text-align: center;
        line-height: 1.25;
    }

    .heat-colhead .hc-tot[b-cfluptgmvs] {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--dark-ink-3);
        text-align: right;
    }

.heat-row[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 148px repeat(4,1fr) 70px;
    gap: 6px;
    align-items: center;
}

.hr-area[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

    .hr-area i[b-cfluptgmvs] {
        font-size: 16px;
        color: var(--dark-ink-2);
        flex-shrink: 0;
    }

    .hr-area b[b-cfluptgmvs] {
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.hcell[b-cfluptgmvs] {
    position: relative;
    height: 46px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.5px solid rgba(255,255,255,.07);
    transition: transform .14s,box-shadow .14s,border-color .14s;
    overflow: hidden;
}

    .hcell:hover[b-cfluptgmvs] {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.4);
        box-shadow: 0 8px 22px rgba(0,0,0,.34);
        z-index: 2;
    }

    .hcell b[b-cfluptgmvs] {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 1px 4px rgba(0,0,0,.4);
    }

    .hcell.l0[b-cfluptgmvs] {
        background: rgba(255,255,255,.035);
    }

        .hcell.l0 b[b-cfluptgmvs] {
            color: var(--dark-ink-3);
            text-shadow: none;
        }

    .hcell.l1[b-cfluptgmvs] {
        background: rgba(67,124,160,.30);
    }

    .hcell.l2[b-cfluptgmvs] {
        background: rgba(60,150,140,.42);
    }

    .hcell.l3[b-cfluptgmvs] {
        background: rgba(214,160,74,.58);
    }

    .hcell.l4[b-cfluptgmvs] {
        background: linear-gradient(135deg,#E07A4E,#C44FA0);
    }

    .hcell.spark[b-cfluptgmvs]::after {
        content: "✦";
        position: absolute;
        top: 3px;
        right: 5px;
        font-size: 8px;
        color: rgba(255,255,255,.85);
    }

.hr-tot[b-cfluptgmvs] {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

    .hr-tot span[b-cfluptgmvs] {
        display: block;
        font-size: 9px;
        font-weight: 600;
        color: var(--dark-ink-3);
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.heat-foot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 22px 14px;
}

.heat-scale[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.hs-l[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--dark-ink-3);
}

.hs-ramp[b-cfluptgmvs] {
    display: inline-flex;
    gap: 3px;
}

    .hs-ramp i[b-cfluptgmvs] {
        width: 22px;
        height: 9px;
        border-radius: 2px;
    }

        .hs-ramp i:nth-child(1)[b-cfluptgmvs] {
            background: rgba(255,255,255,.05);
        }

        .hs-ramp i:nth-child(2)[b-cfluptgmvs] {
            background: rgba(67,124,160,.30);
        }

        .hs-ramp i:nth-child(3)[b-cfluptgmvs] {
            background: rgba(60,150,140,.42);
        }

        .hs-ramp i:nth-child(4)[b-cfluptgmvs] {
            background: rgba(214,160,74,.58);
        }

        .hs-ramp i:nth-child(5)[b-cfluptgmvs] {
            background: linear-gradient(135deg,#E07A4E,#C44FA0);
        }

.heat-hint[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--dark-ink-2);
}

    .heat-hint i[b-cfluptgmvs] {
        font-size: 14px;
    }

@media(max-width:720px) {
    .heat-colhead[b-cfluptgmvs], .heat-row[b-cfluptgmvs] {
        grid-template-columns: 104px repeat(4,1fr) 0;
    }

        .heat-colhead .hc-tot[b-cfluptgmvs], .hr-tot[b-cfluptgmvs] {
            display: none;
        }

    .hr-area b[b-cfluptgmvs] {
        font-size: 11px;
    }

    .hr-area i[b-cfluptgmvs] {
        font-size: 14px;
    }

    .hcell[b-cfluptgmvs] {
        height: 40px;
    }

    .heat-colhead .hc-st[b-cfluptgmvs] {
        font-size: 8px;
    }
}


/* Innovation graph - high-level semantic network */
.netg[b-cfluptgmvs] {
    position: relative;
    background: var(--dark);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
}

    .netg[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 1px 1px,rgba(255,255,255,0.045) 1px,transparent 0);
        background-size: 30px 30px;
        pointer-events: none;
    }

.netg-head[b-cfluptgmvs] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 22px 6px;
}

.netg-k[b-cfluptgmvs] {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dark-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.netg-x[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--dark-ink-3);
}

    .netg-x b[b-cfluptgmvs] {
        color: #fff;
        font-weight: 600;
    }

.netg-stage[b-cfluptgmvs] {
    position: relative;
    width: 100%;
    aspect-ratio: 1000/600;
}

.netg-svg[b-cfluptgmvs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.ng-edge[b-cfluptgmvs] {
    stroke: rgba(255,255,255,.12);
    fill: none;
    transition: stroke .2s,stroke-width .2s,opacity .2s;
}

    .ng-edge.lit[b-cfluptgmvs] {
        stroke: rgba(217,199,154,.8);
    }

.netg.sel .ng-edge:not(.lit)[b-cfluptgmvs] {
    opacity: .18;
}

.netg-nodes[b-cfluptgmvs] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.nnode[b-cfluptgmvs] {
    position: absolute;
    transform: translate(-50%,-50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity .2s;
}

.netg.sel .nnode:not(.active):not(.adj)[b-cfluptgmvs] {
    opacity: .32;
}
/* theme node - larger rounded chip */
.nnode.theme .nn-dot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.18);
    transition: transform .18s,box-shadow .18s;
}

    .nnode.theme .nn-dot i[b-cfluptgmvs] {
        font-size: 21px;
    }

.nnode.theme.active .nn-dot[b-cfluptgmvs], .nnode.theme:hover .nn-dot[b-cfluptgmvs] {
    transform: scale(1.07);
    box-shadow: 0 12px 30px rgba(0,0,0,.42);
}

.nnode .nn-label[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.15;
    max-width: 130px;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.nnode .nn-sub[b-cfluptgmvs] {
    font-size: 9.5px;
    color: var(--dark-ink-3);
    text-align: center;
}
/* org-unit node - smaller circular */
.nnode.unit .nn-dot[b-cfluptgmvs] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #243B52;
    border: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFE0EE;
    transition: transform .18s,border-color .18s;
    box-shadow: 0 5px 16px rgba(0,0,0,.3);
}

    .nnode.unit .nn-dot i[b-cfluptgmvs] {
        font-size: 17px;
    }

.nnode.unit:hover .nn-dot[b-cfluptgmvs], .nnode.unit.active .nn-dot[b-cfluptgmvs] {
    transform: scale(1.08);
    border-color: rgba(217,199,154,.6);
}

.nnode.unit .nn-label[b-cfluptgmvs] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dark-ink-2);
}

.nnode.adj .nn-label[b-cfluptgmvs] {
    color: #fff;
}

.nnode.active .nn-label[b-cfluptgmvs] {
    color: #fff;
}

.nnode.theme.active .nn-label[b-cfluptgmvs], .nnode.theme.adj .nn-label[b-cfluptgmvs] {
    color: #fff;
}

.netg-foot[b-cfluptgmvs] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 22px 16px;
    border-top: 0.5px solid var(--dark-line);
}

.netg-legend[b-cfluptgmvs] {
    display: flex;
    gap: 7px 16px;
    flex-wrap: wrap;
}

.ngl[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--dark-ink-2);
}

.ngl-d[b-cfluptgmvs] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

    .ngl-d.theme[b-cfluptgmvs] {
        border-radius: 4px;
        background: linear-gradient(135deg,#3A4FB8,#9A7B2E);
    }

    .ngl-d.unit[b-cfluptgmvs] {
        border-radius: 50%;
        background: #243B52;
        border: 1px solid rgba(255,255,255,.3);
    }

.ngl-line[b-cfluptgmvs] {
    width: 18px;
    height: 0;
    border-top: 2px solid rgba(255,255,255,.4);
    flex-shrink: 0;
}

.netg-cap[b-cfluptgmvs] {
    font-size: 12px;
    color: #9FE6DC;
    font-weight: 600;
    max-width: 52ch;
    text-align: right;
}

@media(max-width:720px) {
    .nnode .nn-label[b-cfluptgmvs] {
        font-size: 9.5px;
        max-width: 84px;
    }

    .nnode.theme .nn-dot i[b-cfluptgmvs] {
        font-size: 17px;
    }

    .nnode.unit .nn-dot[b-cfluptgmvs] {
        width: 38px;
        height: 38px;
    }

        .nnode.unit .nn-dot i[b-cfluptgmvs] {
            font-size: 14px;
        }

    .netg-cap[b-cfluptgmvs] {
        text-align: left;
    }
}
/* Right rail */
.rl-card[b-cfluptgmvs] {
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-card);
    padding: 14px 15px;
    margin-bottom: 16px;
}

.rl-head[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rl-title[b-cfluptgmvs] {
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rl-sub[b-cfluptgmvs] {
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 10px;
}

.ls-badge[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ok-ink);
    background: var(--ok-soft);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.ls-dot[b-cfluptgmvs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok-ink);
    animation: lspulse-b-cfluptgmvs 1.8s infinite;
}

@keyframes lspulse-b-cfluptgmvs {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

    100% {
        opacity: 1;
    }
}

.ls-feed[b-cfluptgmvs] {
    min-width: 0;
    flex: 1;
    transition: opacity .34s,transform .34s;
}

    .ls-feed.out[b-cfluptgmvs] {
        opacity: 0;
        transform: translateY(-4px);
    }

.ls-item[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
}

    .ls-item > span:not(.ls-when)[b-cfluptgmvs] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ls-item b[b-cfluptgmvs] {
        font-weight: 600;
        color: var(--ink);
    }

    .ls-item i[b-cfluptgmvs] {
        font-size: 14px;
        color: var(--accent-ink);
        flex-shrink: 0;
    }

.ls-when[b-cfluptgmvs] {
    font-size: 10.5px;
    color: var(--ink-3);
    flex-shrink: 0;
}

.ls-all[b-cfluptgmvs] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .ls-all:hover[b-cfluptgmvs] {
        color: var(--brand-ink);
    }

@media(max-width:600px) {
    .ls-when[b-cfluptgmvs] {
        display: none;
    }
}

.pb-intent:hover .pbi-t[b-cfluptgmvs] {
    color: var(--brand-ink);
}

.pb-intent:hover .pbi-a[b-cfluptgmvs] {
    color: var(--brand-2);
}

/* The innovation team */
.team-vision[b-cfluptgmvs] {
    position: relative;
    background: linear-gradient(165deg,var(--ai-wash),var(--surface));
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-xl);
    padding: 26px 28px 24px;
    margin-bottom: 22px;
}

.tv-mark[b-cfluptgmvs] {
    position: absolute;
    top: 18px;
    right: 22px;
    color: var(--line-2);
}

    .tv-mark i[b-cfluptgmvs] {
        font-size: 44px;
    }

.tv-text[b-cfluptgmvs] {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(17px,1.7vw,21px);
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 14px;
    max-width: 74ch;
    font-weight: 400;
}

    .tv-text b[b-cfluptgmvs] {
        font-weight: 600;
    }

.tv-by[b-cfluptgmvs] {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-ink);
    letter-spacing: .01em;
}

.star[b-cfluptgmvs] {
    margin-bottom: 22px;
}

.star-stage[b-cfluptgmvs] {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    aspect-ratio: 940/700;
}

.star-svg[b-cfluptgmvs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.sx-spoke[b-cfluptgmvs] {
    stroke: var(--line-2);
    stroke-width: 1.25;
    transition: stroke .2s, stroke-width .2s, opacity .2s;
}

    .sx-spoke.lit[b-cfluptgmvs] {
        stroke: var(--gold);
        stroke-width: 1.4;
        opacity: .4;
    }

.star.sel .sx-spoke:not(.lit)[b-cfluptgmvs] {
    opacity: .04;
}

.star-nodes[b-cfluptgmvs] {
    position: absolute;
    inset: 0;
    z-index: 2;
}

#star-svg[b-cfluptgmvs] {
    z-index: 0;
}

#star-nodes[b-cfluptgmvs] {
    z-index: 3;
}

.snode[b-cfluptgmvs] {
    position: absolute;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity .22s, filter .22s;
    z-index: 1;
}

.snode-photo[b-cfluptgmvs] {
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--surface);
    box-shadow: 0 6px 20px rgba(22,21,20,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform .22s,box-shadow .22s,width .3s,height .3s;
}

    .snode-photo[b-cfluptgmvs]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--photo,none) center/cover no-repeat;
        filter: saturate(1);
        transition: filter .35s ease;
        z-index: 0;
    }

.snode:hover .snode-photo[b-cfluptgmvs]::before,
.snode.active .snode-photo[b-cfluptgmvs]::before {
    filter: saturate(1.14) brightness(1.04);
}

.snode-mono[b-cfluptgmvs] {
    font-family: var(--serif);
    font-weight: 600;
    color: rgba(255,255,255,.92);
    position: relative;
    z-index: 1;
}

.snode-ring[b-cfluptgmvs] {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
}

.snode-label[b-cfluptgmvs] {
    text-align: center;
    line-height: 1.16;
}

    .snode-label b[b-cfluptgmvs] {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
    }

    .snode-label span[b-cfluptgmvs] {
        font-size: 10px;
        color: var(--ink-3);
    }

.snode.member .snode-photo[b-cfluptgmvs] {
    width: 101px;
    height: 101px;
}

.snode.member .snode-mono[b-cfluptgmvs] {
    font-size: 32px;
}

.snode.member.outer-node .snode-photo[b-cfluptgmvs] {
    width: 83px;
    height: 83px;
}

.snode.member.outer-node .snode-mono[b-cfluptgmvs] {
    font-size: 26px;
}

.sx-hub[b-cfluptgmvs] {
    stroke: var(--brand-2);
    stroke-width: 1;
    opacity: .12;
}

.sx-mesh[b-cfluptgmvs] {
    stroke: var(--brand-2);
    stroke-width: 1;
    opacity: .07;
}

.star-more[b-cfluptgmvs] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 6px auto 0;
    padding: 7px 15px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: 600 12.5px var(--sans);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

    .star-more:hover[b-cfluptgmvs] {
        border-color: var(--brand);
        color: var(--brand-ink);
    }

.snode:hover .snode-photo[b-cfluptgmvs] {
    transform: scale(1.05);
    box-shadow: 0 10px 26px rgba(22,21,20,.2);
}

.snode.leader .snode-photo[b-cfluptgmvs] {
    width: 140px;
    height: 140px;
    box-shadow: 0 0 0 4px var(--gold-soft),0 12px 30px rgba(22,21,20,.2);
}

.snode.leader .snode-mono[b-cfluptgmvs] {
    font-size: 46px;
}

.snode.leader .snode-label b[b-cfluptgmvs] {
    font-size: 14px;
}

.snode-crown[b-cfluptgmvs] {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(145deg,#D9C79A,#9A7B2E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #13233A;
    box-shadow: 0 4px 12px rgba(154,123,46,.45);
    z-index: 2;
}

    .snode-crown i[b-cfluptgmvs] {
        font-size: 14px;
    }
/* story hidden until active */
.sn-story[b-cfluptgmvs] {
    display: none;
}
/* dim others when one is selected */
.star.sel .snode:not(.active)[b-cfluptgmvs] {
    filter: brightness(.8) saturate(.6);
}

    .star.sel .snode:not(.active):hover[b-cfluptgmvs] {
        filter: brightness(.95) saturate(.9);
    }
/* active node expands into a card revealing its story in place */
.snode.active[b-cfluptgmvs] {
    z-index: 20;
    width: 264px;
    max-width: 78vw;
    background: var(--surface);
    border: 0.5px solid var(--line-2);
    border-radius: var(--r-xl);
    box-shadow: 0 22px 60px rgba(22,21,20,.22);
    padding: 18px 18px 16px;
    gap: 0;
    cursor: default;
    animation: snpop-b-cfluptgmvs .26s cubic-bezier(.34,1.2,.5,1);
}

@keyframes snpop-b-cfluptgmvs {
    from {
        opacity: .4;
        transform: translate(-50%,-50%) scale(.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
    }
}

.snode.active .snode-photo[b-cfluptgmvs] {
    width: 66px !important;
    height: 66px !important;
    margin-bottom: 11px;
    box-shadow: 0 6px 18px rgba(22,21,20,.18);
}

.snode.active.leader .snode-photo[b-cfluptgmvs] {
    box-shadow: 0 0 0 3px var(--gold-soft),0 6px 18px rgba(22,21,20,.18);
}

.snode.active .snode-mono[b-cfluptgmvs] {
    font-size: 24px !important;
}

.snode.active .snode-ring[b-cfluptgmvs] {
    display: none;
}

.snode.active .snode-label[b-cfluptgmvs] {
    text-align: left;
    width: 100%;
    margin-bottom: 2px;
}

    .snode.active .snode-label b[b-cfluptgmvs] {
        font-family: var(--serif);
        font-size: 18px;
    }

    .snode.active .snode-label span[b-cfluptgmvs] {
        display: none;
    }

.snode.active .sn-story[b-cfluptgmvs] {
    display: block;
    width: 100%;
    animation: snfade-b-cfluptgmvs .3s ease .06s both;
}

@keyframes snfade-b-cfluptgmvs {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.sn-st-role[b-cfluptgmvs] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-ink);
    letter-spacing: .02em;
    margin: 1px 0 9px;
}

.sn-st-do[b-cfluptgmvs] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 13px;
}

.sn-st-foot[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sn-tag[b-cfluptgmvs] {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 9px;
}

.sn-reach[b-cfluptgmvs] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    border: 0;
    cursor: pointer;
}

    .sn-reach:hover[b-cfluptgmvs] {
        background: var(--brand-2);
    }

    .sn-reach i[b-cfluptgmvs] {
        font-size: 14px;
    }

@media(max-width:600px) {
    .snode.member .snode-photo[b-cfluptgmvs] {
        width: 62px;
        height: 62px;
    }

    .snode.member .snode-mono[b-cfluptgmvs] {
        font-size: 20px;
    }

    .snode.leader .snode-photo[b-cfluptgmvs] {
        width: 88px;
        height: 88px;
    }

    .snode.leader .snode-mono[b-cfluptgmvs] {
        font-size: 28px;
    }

    .snode-label span[b-cfluptgmvs] {
        display: none;
    }

    .snode.active[b-cfluptgmvs] {
        width: 210px;
    }
}

.brandfoot[b-cfluptgmvs] {
    background: var(--surface);
    border-top: 0.5px solid var(--line);
    margin-top: 20px;
}

.bf-in[b-cfluptgmvs] {
    width: 100%;
    padding: 34px 22px 30px;
}

.bf-cols[b-cfluptgmvs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 28px;
}

.bf-col h4[b-cfluptgmvs] {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 13px;
}

.bf-link[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
}

    .bf-link:hover[b-cfluptgmvs] {
        color: var(--brand-ink);
    }

    .bf-link i[b-cfluptgmvs] {
        font-size: 16px;
        color: var(--ink-3);
    }

    .bf-link:hover i[b-cfluptgmvs] {
        color: var(--brand-2);
    }

.bf-bottom[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 0.5px solid var(--line);
}

.bf-left[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    color: var(--ink-3);
}

    .bf-left .bf-mark[b-cfluptgmvs] {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        object-fit: cover;
        flex-shrink: 0;
    }

.powered[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-3);
}

    .powered .amark[b-cfluptgmvs] {
        width: 19px;
        height: 19px;
        border-radius: 5px;
        background: var(--ink);
        color: var(--canvas);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .powered .amark i[b-cfluptgmvs] {
            font-size: 12px;
        }

    .powered b[b-cfluptgmvs] {
        font-weight: 600;
        color: var(--ink-2);
    }

@media(min-width:680px) {
    .bf-cols[b-cfluptgmvs] {
        grid-template-columns: repeat(4,1fr);
    }
}

.flash[b-cfluptgmvs] {
    animation: flashring-b-cfluptgmvs 1.8s ease;
}

@keyframes flashring-b-cfluptgmvs {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(74,56,214,0);
    }

    25% {
        box-shadow: 0 0 0 3px rgba(74,56,214,.45);
    }
}

#toast[b-cfluptgmvs] {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(12px);
    z-index: 60;
    background: var(--ink);
    color: var(--canvas);
    font-size: 13px;
    padding: 11px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 88vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s,transform .25s;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

    #toast.show[b-cfluptgmvs] {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    #toast i[b-cfluptgmvs] {
        font-size: 15px;
        color: #9FB4CC;
        flex-shrink: 0;
    }

    #toast .tx[b-cfluptgmvs] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.tabbar[b-cfluptgmvs] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(248,247,244,0.94);
    backdrop-filter: blur(10px);
    border-top: 0.5px solid var(--line);
    display: flex;
    justify-content: space-around;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
}

.tab[b-cfluptgmvs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--ink-3);
    padding: 4px 10px;
    border-radius: 10px;
}

    .tab i[b-cfluptgmvs] {
        font-size: 20px;
    }

    .tab.on[b-cfluptgmvs] {
        color: var(--brand);
    }

.tab-fab[b-cfluptgmvs] {
    margin-top: -22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--canvas);
}

    .tab-fab i[b-cfluptgmvs] {
        font-size: 22px;
    }

@media(min-width:640px) {
    .pillars3[b-cfluptgmvs] {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(min-width:760px) {
    .shell[b-cfluptgmvs] {
        display: grid;
        grid-template-columns: 74px minmax(0,1fr);
        column-gap: 24px;
        padding: 24px;
    }

    .navrail[b-cfluptgmvs] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: calc(var(--topbar-h) + var(--strip-h) + 24px);
        align-self: start;
    }

    .main[b-cfluptgmvs] {
        grid-column: 2;
        grid-row: 1;
    }

    .rightrail[b-cfluptgmvs] {
        grid-column: 2;
        grid-row: 2;
        margin-top: 6px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
        align-items: start;
    }

        .rightrail .rl-card[b-cfluptgmvs] {
            margin-bottom: 0;
        }

    .tabbar[b-cfluptgmvs] {
        display: none;
    }

    .nav-sect[b-cfluptgmvs] {
        display: none;
    }

    .nav-div[b-cfluptgmvs] {
        height: 1px;
        background: var(--line);
        margin: 9px auto;
        width: 64%;
    }

    .nav-i[b-cfluptgmvs] {
        width: 48px;
        height: 44px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-3);
        margin: 0 auto;
        position: relative;
    }

        .nav-i i[b-cfluptgmvs] {
            font-size: 21px;
        }

        .nav-i:hover[b-cfluptgmvs] {
            background: var(--surface-2);
            color: var(--ink);
        }

        .nav-i .label[b-cfluptgmvs] {
            display: none;
        }

    .nav-new[b-cfluptgmvs] {
        margin: 10px auto 0;
        width: 48px;
        height: 44px;
        border-radius: 11px;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .nav-new i[b-cfluptgmvs] {
            font-size: 22px;
        }

        .nav-new .label[b-cfluptgmvs] {
            display: none;
        }
}

@media(min-width:1040px) {
    .shell[b-cfluptgmvs] {
        grid-template-columns: 74px minmax(0,1fr) 320px;
    }

    .rightrail[b-cfluptgmvs] {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: calc(var(--topbar-h) + var(--strip-h) + 24px);
        align-self: start;
        max-height: calc(100vh - var(--topbar-h) - var(--strip-h) - 40px);
        overflow: hidden;
    }

        .rightrail .rl-card[b-cfluptgmvs] {
            margin-bottom: 0;
        }

    .rail-pinned[b-cfluptgmvs] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-shrink: 0;
        background: transparent !important;
    }

    .rail-rest[b-cfluptgmvs] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        margin-top: 16px;
        padding-right: 2px;
        scrollbar-width: thin;
    }

        .rail-rest[b-cfluptgmvs]::-webkit-scrollbar {
            width: 7px;
        }

        .rail-rest[b-cfluptgmvs]::-webkit-scrollbar-thumb {
            background: var(--line-2);
            border-radius: 4px;
        }
}

@media(min-width:1320px) {
    .shell[b-cfluptgmvs] {
        grid-template-columns: 220px minmax(0,1fr) 340px;
        column-gap: 28px;
    }

    .nav-i[b-cfluptgmvs] {
        width: 100%;
        justify-content: flex-start;
        gap: 13px;
        padding: 0 16px;
        height: 44px;
        border-radius: 11px;
    }

        .nav-i .label[b-cfluptgmvs] {
            display: inline;
            font-size: 14px;
            font-weight: 500;
        }

    .nav-new[b-cfluptgmvs] {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 16px;
        height: 46px;
    }

        .nav-new .label[b-cfluptgmvs] {
            display: inline;
            font-size: 14px;
            font-weight: 600;
        }

    .nav-sect[b-cfluptgmvs] {
        display: block;
        font-size: 10px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--ink-3);
        font-weight: 600;
        padding: 14px 16px 6px;
    }

    .nav-div[b-cfluptgmvs] {
        display: none;
    }
}

@media(min-width:1800px) {
    .shell[b-cfluptgmvs] {
        grid-template-columns: 240px minmax(0,1fr) 360px;
        column-gap: 40px;
        padding: 30px 48px;
    }

    .topbar[b-cfluptgmvs] {
        padding: 0 48px;
    }

    .bf-in[b-cfluptgmvs] {
        padding: 40px 48px 34px;
    }
}

@media(min-width:2400px) {
    .shell[b-cfluptgmvs] {
        grid-template-columns: 260px minmax(0,1fr) 380px;
        column-gap: 56px;
        padding: 34px 72px;
    }

    .topbar[b-cfluptgmvs] {
        padding: 0 72px;
    }

    .bf-in[b-cfluptgmvs] {
        padding: 48px 72px 40px;
    }

    .rightrail[b-cfluptgmvs] {
        position: sticky;
    }
}

/* Video lightbox - inline player for the Watch section */
.vmodal[b-cfluptgmvs] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8,14,24,0.74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: vmodal-in-b-cfluptgmvs .2s ease;
}

@keyframes vmodal-in-b-cfluptgmvs {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.vmodal-card[b-cfluptgmvs] {
    position: relative;
    width: min(960px, 100%);
    background: #0E1B2C;
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--r-lg);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: vmodal-rise-b-cfluptgmvs .26s cubic-bezier(.16,1,.3,1);
}

@keyframes vmodal-rise-b-cfluptgmvs {
    from {
        transform: translateY(12px) scale(.99);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.vmodal-frame[b-cfluptgmvs] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

    .vmodal-frame iframe[b-cfluptgmvs] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.vmodal-x[b-cfluptgmvs] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(8,14,24,0.7);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

    .vmodal-x:hover[b-cfluptgmvs] {
        background: rgba(8,14,24,0.95);
    }

.vmodal-meta[b-cfluptgmvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    color: #fff;
}

.vmodal-title[b-cfluptgmvs] {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.vmodal-src[b-cfluptgmvs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-ink-2);
    font-size: 13px;
    white-space: nowrap;
}

    .vmodal-src i[b-cfluptgmvs] {
        color: #FF0000;
    }


/* ===================================================================== */
/*  RESPONSIVE STRATEGY LAYER                                             */
/*  Additive only. The desktop experience (1040-1920px) is unchanged;    */
/*  this caps the ultra-wide end and refines the smaller-screen end.     */
/* ===================================================================== */

/* Safety: images (including the favicon logos) never force a sideways scroll */
.hoi-root img[b-cfluptgmvs] {
    max-width: 100%;
}

/* Ultra-wide (>= 2000px): the main column was an unbounded 1fr, so the    */
/* content stretched. Cap and centre the shell; the surplus becomes        */
/* balanced gutters rather than over-wide text and cards.                  */
@media(min-width:2000px) {
    .shell[b-cfluptgmvs] {
        max-width: 1880px;
        margin-inline: auto;
        grid-template-columns: 240px minmax(0,1fr) 360px;
        column-gap: 32px;
        padding: 32px 40px;
    }
}

/* Small-laptop / tablet (<= 1040px): tighten the vertical rhythm. */
@media(max-width:1040px) {
    .main > section[b-cfluptgmvs] {
        margin-bottom: 44px;
    }
}

/* Mobile (<= 760px): declutter and tighten toward one column. */
@media(max-width:760px) {
    .main > section[b-cfluptgmvs] {
        margin-bottom: 38px;
    }

    .intent-head[b-cfluptgmvs] {
        margin-bottom: 18px;
    }
}

/* Small mobile (<= 480px): tighter gutters. */
@media(max-width:480px) {
    .shell[b-cfluptgmvs] {
        padding: 14px;
    }

    .topbar[b-cfluptgmvs] {
        padding: 0 14px;
    }

    .main > section[b-cfluptgmvs] {
        margin-bottom: 30px;
    }
}


/* =============================================================================
   INDUSTRY THEME - beverage (NeverFizz)
   ---------------------------------------------------------------------------
   Applied via the extra .theme-beverage class on .hoi-root when the page is
   opened with ?industry=beverage. It only re-points the brand accent trio to
   cola red; every other token, layout rule and component stays exactly as the
   default (NeverBank) theme. Without the class, nothing here applies.
   ============================================================================= */
.hoi-root.theme-beverage[b-cfluptgmvs] {
    --brand: #D31336;
    --brand-2: #B10E2B;
    --brand-ink: #8A0B21;
}
/* /Components/AinnaPages/Newuitest2.razor.rz.scp.css */
/* ============================================
   AINNA PAGE CONTAINER — v2 migrated
   Unified Split-Screen Layout
   Warm cream palette and brand gradients preserved.
   ============================================ */

.ainna-page-container[b-shqlk5j1z2] {
    width: 100%;
    height: 100vh;
    background: #ffffff;
    font-family: var(--font-family-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    /* Toolbar host: the SmartToolbar now renders only fixed surfaces
       (island, panel, backdrop), so the host takes no height. Kept as a
       sticky, overflow-visible site so those surfaces mount above the
       split view. */
    .ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
        position: sticky;
        top: 0;
        z-index: 100;
        height: 0;
        flex-shrink: 0;
        overflow: visible;
    }

    .ainna-page-container .ainna-toolbar-content[b-shqlk5j1z2] {
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 1;
    }

/* ── the island: one fixed spot for every section ──
   x: rail edge + --ainna-island-x (tune once to approximate the content
   gutter). y: centred on the rail's brand row (rail top 8 + pad 8 + 40/2
   = 36; island 36 tall → top 18). z 900: above the page, below the
   backdrop (999) and the panel (1205) — opening the rail covers it. */
.ainna-page-container[b-shqlk5j1z2] {
    --ainna-island-x: 112px;
}

    .ainna-page-container .ainna-island-host[b-shqlk5j1z2] {
        position: fixed;
        top: calc(18px + env(safe-area-inset-top, 0px));
        left: calc(var(--ainna-rail-w, 84px) + var(--ainna-island-x));
        z-index: 900;
        max-width: calc(100vw - var(--ainna-rail-w, 84px) - var(--ainna-island-x) - 24px);
    }

.surface-placeholder[b-shqlk5j1z2] {
    max-width: 720px;
    margin: 48px auto;
    padding: 32px 36px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.surface-placeholder-eyebrow[b-shqlk5j1z2] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.surface-problem .surface-placeholder-eyebrow[b-shqlk5j1z2] {
    color: #db2777;
}

.surface-portfolio .surface-placeholder-eyebrow[b-shqlk5j1z2] {
    color: #475569;
}

.surface-placeholder-title[b-shqlk5j1z2] {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    line-height: 1.25;
}

.surface-placeholder-meta[b-shqlk5j1z2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 12px;
}

.surface-placeholder-codename[b-shqlk5j1z2] {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.surface-placeholder-id[b-shqlk5j1z2] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #94a3b8;
    font-size: 11px;
}

.surface-placeholder-body[b-shqlk5j1z2] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
/* ============================================
   SPLIT-SCREEN LAYOUT
   ============================================ */

.ainna-page-container .ainna-split-view[b-shqlk5j1z2] {
    flex: 1;
    display: flex;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    min-height: 0;
    position: relative;
    z-index: 10;
    background: transparent;
    padding: 0;
    gap: 0;
}

/* ============================================
   LEFT PANEL - Chat Experience
   ============================================ */

.ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
    width: 35%;
    min-width: 32.5rem;
    max-width: 66.25rem;
    height: 100%;
    overflow: hidden;
    padding-left: clamp(0.3125rem, 3vw, 1.25rem);
    padding-right: clamp(0.3125rem, 3vw, 1.25rem);
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

.ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 1;
}

    .ainna-page-container .ainna-left-content > *[b-shqlk5j1z2] {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: 100%;
    }

/* ============================================
   RESIZE HANDLE - Minimal with Wide Grip
   ============================================ */

.ainna-page-container .ainna-resize-handle[b-shqlk5j1z2] {
    width: 2px;
    cursor: col-resize;
    position: relative;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 20;
}

    /* Wide centered grip pill */
    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 3rem;
        background: #d1d5db;
        border-radius: 4px;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Grip dots - 3 stacked circles */
    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 14px;
        background-image: radial-gradient(circle, #9ca3af 1.5px, transparent 1.5px);
        background-size: 4px 5px;
        background-position: center;
        background-repeat: repeat-y;
        transition: all 0.2s ease;
    }

    .ainna-page-container .ainna-resize-handle:hover[b-shqlk5j1z2]::before {
        background: var(--accent);
        width: 10px;
        height: 4rem;
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
    }

    .ainna-page-container .ainna-resize-handle:focus-visible[b-shqlk5j1z2]::before {
        background: var(--accent);
        width: 10px;
        height: 4rem;
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
    }

    .ainna-page-container .ainna-resize-handle:hover[b-shqlk5j1z2]::after {
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px);
    }

    .ainna-page-container .ainna-resize-handle:active[b-shqlk5j1z2]::before {
        background: #db2777;
        width: 12px;
        height: 5rem;
    }





/* ============================================
   RIGHT PANEL - Idea Viewer
   ============================================ */

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2] {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fcfbf8;
    position: relative;
    padding-left: 0;
    padding-right: 0.625rem; /* air between the viewer and the scrollbar — padding on the
                                  scrolling element sits inside the bar, so this IS the gap */
}

.ainna-page-container .ainna-right-content[b-shqlk5j1z2] {
    position: relative;
    max-width: 100%;
    z-index: 1;
    margin: 0;
}

.ainna-page-container .ainna-component-stack[b-shqlk5j1z2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================
   SCROLLBAR STYLING — gradient preserved
   ============================================ */

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar {
    width: 0.375rem;
}

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-track {
    background: transparent;
}

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
    border-radius: 0.1875rem;
}

    .ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
    }

/* Box sizing fix */
.ainna-page-container *[b-shqlk5j1z2] {
    box-sizing: border-box;
}




@keyframes overlayExit-b-shqlk5j1z2 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2],
    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2]::before,
    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2]::after {
        transition: none;
    }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 1600px) {
    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
        min-width: 18.75rem;
    }
}

@media (max-width: 1300px) {
    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
        min-width: 15.625rem;
    }
}

/* ============================================
   MOBILE DEVICES — preserved as-is
   ============================================ */

@media (max-width: 900px) {
    .ainna-page-container[b-shqlk5j1z2] {
        height: 100%;
        background: #f7f5f0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .ainna-page-container[b-shqlk5j1z2] {
        --ainna-island-x: 12px;
    }

        .ainna-page-container .ainna-island-host[b-shqlk5j1z2] {
            top: calc(10px + env(safe-area-inset-top, 0px));
        }

        .ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
            height: 0;
            flex-shrink: 0;
            background: transparent;
            backdrop-filter: none;
            box-shadow: none;
        }

        .ainna-page-container .ainna-toolbar-content[b-shqlk5j1z2] {
            padding: 0;
        }





        .ainna-page-container .ainna-split-view[b-shqlk5j1z2] {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
            gap: 0;
        }

        .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
            width: 100% !important;
            min-width: unset !important;
            max-width: none !important;
            height: 100%;
            border-radius: 0;
            background: linear-gradient(165deg, #f7f5f0 0%, #f2efe8 50%, #ece8e0 100%);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
            box-shadow: none;
        }

        .ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0 !important;
        }

            .ainna-page-container .ainna-left-content > *[b-shqlk5j1z2] {
                flex: 1;
                min-height: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

        .ainna-page-container .ainna-right-panel[b-shqlk5j1z2] {
            display: none !important;
        }

        .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2] {
            display: none !important;
        }





        .ainna-page-container .ainna-right-panel.mobile-show[b-shqlk5j1z2] {
            display: block !important;
            position: fixed;
            top: env(safe-area-inset-top, 0px);
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100dvh - env(safe-area-inset-top, 0px));
            z-index: 999;
            animation: slideInFromRight-b-shqlk5j1z2 0.3s ease;
            overflow-y: auto;
            border-radius: 0;
        }

    @keyframes slideInFromRight-b-shqlk5j1z2 {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    .ainna-page-container .ainna-right-content[b-shqlk5j1z2] {
        padding: 0 !important;
    }

    .ainna-page-container .ainna-component-stack[b-shqlk5j1z2] {
        gap: 0;
    }
}

/* ============================================
   SAFE AREA FOR NOTCHED DEVICES
   ============================================ */

/* safe-area: the fixed bar and the spacer are notch-aware via their own
   calc() — the legacy notch @supports block is superseded. */


/* ── app rail column ──
   The page owns this class (bound to ShellReady in the razor), so no
   cross-component selectors and no :root — both die under CSS isolation.
   Widths are literal per breakpoint, matching the rail's own ladder. */

.ainna-page-container.has-rail[b-shqlk5j1z2] {
    /* the container declares width:100%; a bare margin made the row
       112px wider than the viewport — the h-scrollbar then ate ~15px
       of height and dragged the v-scrollbar in behind it. Width must
       compensate the margin at every tier. */
    margin-left: var(--ainna-rail-w, 72px); /* coupled to the rail's pass-38 narrowing */
    width: calc(100% - var(--ainna-rail-w, 72px));
}

/* ── shell entrance (pass 45): the orbit-to-shell swap was a hard cut —
   the last abrupt edge in the boot sequence. has-rail appears exactly
   once, when ShellReady flips, so the animation is mount-shaped by
   construction; render traffic never replays it. ── */
.ainna-page-container.has-rail[b-shqlk5j1z2] {
    animation: ainna-shell-in-b-shqlk5j1z2 0.18s ease-out both;
}

@keyframes ainna-shell-in-b-shqlk5j1z2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* the sheet's slide was the last animation outside reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ainna-page-container .ainna-right-panel.mobile-show[b-shqlk5j1z2] {
        animation: none;
    }
}

/* assistive-tech-only text — the veil's status announcement */
.ainna-page-container .visually-hidden[b-shqlk5j1z2] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ── mobile right-panel FAB (≤900): the sheet's summon ── */
.ainna-mobile-fab[b-shqlk5j1z2] {
    display: none;
}

@media (max-width: 900px) {
    .ainna-mobile-fab[b-shqlk5j1z2] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        border: 0;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        background: linear-gradient(135deg, #ec4899, #db2777);
        box-shadow: 0 6px 20px rgba(236, 72, 153, 0.40);
        cursor: pointer;
        z-index: 1290; /* above content + sheet, below rail/flyout */
    }
}


/* ── section veil: instant cover for the space's mount frame ──
   Fixed over the content column only (right of the rail, full height);
   fades in fast so quick mounts read as a soft blink, not a flash. */
.ainna-section-veil[b-shqlk5j1z2] {
    position: fixed;
    top: 0;
    left: var(--ainna-rail-w, 84px);
    right: 0;
    bottom: 0;
    z-index: 1295; /* above the mobile FAB (1290) — the cover must cover */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 249, 252, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ainna-veil-in-b-shqlk5j1z2 0.08s ease-out both;
}

.ainna-veil-spin[b-shqlk5j1z2] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid rgba(236, 72, 153, 0.18);
    border-top-color: #db2777;
    animation: ainna-veil-rotate-b-shqlk5j1z2 0.7s linear infinite;
}

@keyframes ainna-veil-in-b-shqlk5j1z2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ainna-veil-rotate-b-shqlk5j1z2 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ainna-veil-spin[b-shqlk5j1z2] {
        animation-duration: 1.4s;
    }

    .ainna-section-veil[b-shqlk5j1z2] {
        animation: none;
    }

        .ainna-section-veil.is-leaving[b-shqlk5j1z2] {
            animation: none;
            opacity: 0; /* instant hide while the drop timer settles the flags */
        }

    .ainna-page-container.has-rail[b-shqlk5j1z2] {
        animation: none;
    }
}

/* ============================================
   NATIVE IDEA WAIT — the right panel IS the
   busy state during idea transitions; the
   viewer is not rendered until content is
   ready. Reuses .ainna-veil-spin (declared as
   a top-level rule, so it applies here too).
   ============================================ */

.ainna-idea-wait[b-shqlk5j1z2] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ainna-idea-wait-label[b-shqlk5j1z2] {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #94a3b8;
    max-width: min(46ch, 82%); /* titled waits stay one tidy line */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── solid create veil: the pre-arrival cover speaks the same
   language as the native wait — an opaque cleaned canvas, not a
   translucent film over the old section. Base veil keeps its blink
   role for plain navigation. ── */

.ainna-section-veil.is-solid[b-shqlk5j1z2] {
    background: #fcfbf8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    gap: 14px;
}

/* ── veil exit: phase one of the two-phase drop. The film fades out OVER
   the arriving children instead of vanishing between frames (the old
   instant drop is what read as a blink); pointer-events opens the content
   underneath from the first fading frame. Employs the overlayExit
   keyframes, orphaned until now. Duration pairs with the page's 180ms
   drop timer. ── */
.ainna-section-veil.is-leaving[b-shqlk5j1z2] {
    animation: overlayExit-b-shqlk5j1z2 0.18s ease-out both;
    pointer-events: none;
}

/* ── section fault surface: the ErrorBoundary's recover UI. Same calm
   canvas as the waits — a contained incident, not a crash screen. ── */
.ainna-section-fault[b-shqlk5j1z2] {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
    background: #fcfbf8;
}

.ainna-section-fault-title[b-shqlk5j1z2] {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.ainna-section-fault-body[b-shqlk5j1z2] {
    font-size: 13px;
    color: #64748b;
    max-width: 42ch;
    line-height: 1.55;
}

.ainna-section-fault-action[b-shqlk5j1z2] {
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ec4899, #db2777);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
}
/* /Components/AinnaPages/Onboarding.razor.rz.scp.css */
/* Onboarding.razor.css — scoped styles for the onboarding page. */

/* ── Container ── */
.ainna-onboarding-container[b-7bplzavwyy] {
    --color-bg-warm: #fbf5f1;
    --color-bg-page: #eceae6;
    --border-color: #e5e0db;
    --color-border-light: #efeae5;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;
    --shadow-card: 0 2px 8px rgba(20,15,50,0.08), 0 1px 3px rgba(20,15,50,0.05);
    --shadow-card-hover: 0 8px 28px rgba(20,15,50,0.12), 0 3px 8px rgba(20,15,50,0.06);
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--color-accent-2));
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --col-left-max: 680px;
    --col-right-max: 400px;
    --col-gap: 64px;
    --pad: 40px;
    --done-color: #0f8a5e;
    --ink: var(--text-heading);
    --ink-soft: rgba(20, 15, 50, 0.10);
    --neutral-selected-bg: #f3f1ee;
    --accent-soft: rgba(244, 8, 155, 0.06);
    --accent-line: rgba(244, 8, 155, 0.22);
    --aside-bg: #fcf0f7;
    --aside-rule: rgba(244, 8, 155, 0.16);
    font-family: var(--font-family-primary);
    background: var(--color-bg-page);
    color: var(--text-heading);
    line-height: 1.6;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .ainna-onboarding-container *[b-7bplzavwyy] {
        box-sizing: border-box;
    }

/* ── Header ── */
.ainna-header[b-7bplzavwyy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--background-primary);
    border-bottom: 1px solid var(--border-color);
    height: 64px;
    display: flex;
    align-items: center;
}

    .ainna-header[b-7bplzavwyy]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-accent);
        opacity: 0.7;
    }

.ainna-header-content[b-7bplzavwyy] {
    max-width: calc(var(--col-left-max) + var(--col-gap) + var(--col-right-max));
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ainna-header-left[b-7bplzavwyy] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ainna-logo[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .ainna-logo img[b-7bplzavwyy] {
        height: 26px;
        width: auto;
    }

.ainna-header-tagline[b-7bplzavwyy] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    padding-bottom: 1px;
}

.ainna-header-step-indicator[b-7bplzavwyy] {
    display: flex;
    gap: 8px;
}

.ainna-step-dot[b-7bplzavwyy] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--text-tertiary);
    background: transparent;
    transition: background var(--transition-base), border-color var(--transition-base);
}

    .ainna-step-dot.active[b-7bplzavwyy] {
        border-color: var(--accent);
    }

    .ainna-step-dot.done[b-7bplzavwyy] {
        border-color: var(--ink);
        background: var(--ink);
    }

/* ── Main Container ── */
.ainna-main-container[b-7bplzavwyy] {
    flex: 1;
    max-width: calc(var(--col-left-max) + var(--col-gap) + var(--col-right-max));
    width: 100%;
    margin: 0 auto;
    padding: 48px var(--pad) 80px;
}

/* ── Page Reveal ── */
.ainna-page-reveal[b-7bplzavwyy] {
    animation: pageReveal-b-7bplzavwyy 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pageReveal-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ainna-stagger-1[b-7bplzavwyy] {
    animation: pageReveal-b-7bplzavwyy 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.08s both;
}

.ainna-stagger-2[b-7bplzavwyy] {
    animation: pageReveal-b-7bplzavwyy 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

/* ── Welcome Block ── */
.ainna-welcome-block[b-7bplzavwyy] {
    margin-bottom: 32px;
    min-height: 72px;
}

.ainna-welcome-title[b-7bplzavwyy] {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 10px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.ainna-welcome-sub[b-7bplzavwyy] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

    .ainna-welcome-sub strong[b-7bplzavwyy] {
        color: var(--accent);
        font-weight: 700;
    }

/* Welcome text: two-phase fade-in (title, then subtitle). */
.ainna-welcome-title[b-7bplzavwyy],
.ainna-welcome-sub[b-7bplzavwyy] {
    animation: ainnaFadeUp-b-7bplzavwyy 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ainna-welcome-title[b-7bplzavwyy] {
    animation-delay: 0.15s;
}

.ainna-welcome-sub[b-7bplzavwyy] {
    animation-delay: 0.4s;
}

@keyframes ainnaFadeUp-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ainna-welcome-title[b-7bplzavwyy],
    .ainna-welcome-sub[b-7bplzavwyy] {
        animation: none;
    }
}

/* ── Referral Banner ── */
.ainna-referral-banner[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 32px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

    .ainna-referral-banner i[b-7bplzavwyy] {
        font-size: 20px;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .ainna-referral-banner strong[b-7bplzavwyy] {
        color: var(--text-heading);
    }

/* ── Columns ── */
.ainna-columns-wrapper[b-7bplzavwyy] {
    display: flex;
    gap: var(--col-gap);
    align-items: stretch;
}

.ainna-left-column[b-7bplzavwyy] {
    flex: 0 0 var(--col-left-max);
    max-width: var(--col-left-max);
    min-width: 0;
}

.ainna-right-column[b-7bplzavwyy] {
    flex: 1;
    max-width: var(--col-right-max);
    min-width: 0;
}

/* ── Cards ── */
.ainna-card[b-7bplzavwyy] {
    position: relative;
    overflow: hidden;
    background: var(--background-primary);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .ainna-card.ainna-card-compact[b-7bplzavwyy] {
        padding: 24px 32px 32px;
    }

    .ainna-card.ainna-card-nudge[b-7bplzavwyy] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card);
        animation: cardNudge-b-7bplzavwyy 0.5s ease;
    }

@keyframes cardNudge-b-7bplzavwyy {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}

/* ═══════════════════════════════════════════════════════
   STEP RINGS
   ═══════════════════════════════════════════════════════ */

.ainna-step-ring[b-7bplzavwyy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .ainna-step-ring span[b-7bplzavwyy] {
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .ainna-step-ring i[b-7bplzavwyy] {
        font-size: 13px;
        line-height: 1;
    }

    .ainna-step-ring.ring-active[b-7bplzavwyy] {
        background: var(--accent);
        border: none;
    }

        .ainna-step-ring.ring-active span[b-7bplzavwyy] {
            color: #fff;
        }

    .ainna-step-ring.ring-done[b-7bplzavwyy] {
        background: var(--done-color);
        border: none;
    }

        .ainna-step-ring.ring-done span[b-7bplzavwyy] {
            color: #fff;
        }

    .ainna-step-ring.ring-pending[b-7bplzavwyy] {
        background: var(--color-bg-page);
        border: 2px solid var(--border-color);
        animation: none;
    }

        .ainna-step-ring.ring-pending span[b-7bplzavwyy] {
            color: var(--text-tertiary);
            opacity: 0.6;
        }

    .ainna-step-ring.ring-optional[b-7bplzavwyy] {
        background: var(--background-primary);
        border: 2px dashed var(--border-color);
        animation: none;
    }

        .ainna-step-ring.ring-optional span[b-7bplzavwyy] {
            color: var(--text-tertiary);
        }

/* ═══════════════════════════════════════════════════════
   SECTION BADGES
   ═══════════════════════════════════════════════════════ */

.ainna-section-badge[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ainna-badge-left[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ainna-badge-label[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-heading);
}

.ainna-section-badge.badge-done .ainna-badge-label[b-7bplzavwyy] {
    color: var(--text-heading);
}

.ainna-card-desc[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

    .ainna-card-desc strong[b-7bplzavwyy] {
        color: var(--text-heading);
    }

/* Spam hint — amber preserved */
.ainna-spam-hint[b-7bplzavwyy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #fef9ec;
    border: 1px solid #f0d88a;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: #6b5a1e;
    line-height: 1.55;
}

    .ainna-spam-hint i[b-7bplzavwyy] {
        color: #d4a017;
        font-size: 15px;
        margin-top: 1px;
        flex-shrink: 0;
    }

/* ── Code Input ── */
.ainna-code-input-row[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 12px;
}

.ainna-code-input[b-7bplzavwyy] {
    width: 220px;
    height: 60px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    letter-spacing: 8px;
    color: var(--text-heading);
    background: var(--background-primary);
    transition: all var(--transition-base);
    padding: 0 16px;
}

    .ainna-code-input[b-7bplzavwyy]::placeholder {
        color: var(--text-tertiary);
        opacity: 0.4;
        font-weight: 400;
    }

    .ainna-code-input:focus[b-7bplzavwyy] {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(244, 8, 155, 0.10);
    }

    .ainna-code-input.filled[b-7bplzavwyy] {
        border-color: var(--ink);
    }

    .ainna-code-input.error[b-7bplzavwyy] {
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.04);
        animation: shake-b-7bplzavwyy 0.4s ease;
    }

    .ainna-code-input:disabled[b-7bplzavwyy] {
        background: var(--color-bg-page);
        opacity: 0.6;
        cursor: not-allowed;
    }

@keyframes shake-b-7bplzavwyy {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

/* ── Resend ── */
.ainna-resend[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    min-width: 100px;
}

.ainna-btn-resend[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--background-primary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
}

    .ainna-btn-resend:hover:not(:disabled)[b-7bplzavwyy] {
        border-color: var(--text-tertiary);
        color: var(--text-heading);
    }

    .ainna-btn-resend:disabled[b-7bplzavwyy] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ainna-btn-resend i[b-7bplzavwyy] {
        font-size: 11px;
    }

.ainna-resend-timer[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 8px 14px;
    background: var(--color-bg-warm);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ainna-resend-timer i[b-7bplzavwyy] {
        font-size: 11px;
    }

.ainna-resend-ok[b-7bplzavwyy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--neutral-selected-bg);
    border-radius: var(--radius-pill);
    animation: fadeIn-b-7bplzavwyy 0.3s ease;
}

    .ainna-resend-ok i[b-7bplzavwyy] {
        font-size: 11px;
    }

/* ── Code Status ── */
.ainna-code-status[b-7bplzavwyy] {
    display: flex;
    justify-content: center;
    min-height: 26px;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 500;
}

.status-ready[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    animation: fadeIn-b-7bplzavwyy 0.3s ease;
}

.status-checking[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.status-failed[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc2626;
    animation: fadeIn-b-7bplzavwyy 0.3s ease;
}

.ainna-mini-spinner[b-7bplzavwyy] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: spin-b-7bplzavwyy 0.7s linear infinite;
}

@keyframes spin-b-7bplzavwyy {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-7bplzavwyy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Form ── */
.ainna-form-grid[b-7bplzavwyy] {
    display: grid;
    gap: 16px;
    margin-top: 4px;
}

.ainna-form-row[b-7bplzavwyy] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
}

.ainna-form-row-static[b-7bplzavwyy] {
    align-items: baseline;
}

.ainna-form-row-plan[b-7bplzavwyy] {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border-light);
    align-items: center;
}

.ainna-form-label[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.ainna-opt[b-7bplzavwyy] {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
}

.ainna-form-value[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--text-heading);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ainna-source-badge[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--neutral-selected-bg);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

    .ainna-source-badge i[b-7bplzavwyy] {
        font-size: 9px;
    }

.ainna-plan-tag[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.ainna-plan-tag-dot[b-7bplzavwyy] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
}

.ainna-bonus-pill[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--neutral-selected-bg);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

    .ainna-bonus-pill i[b-7bplzavwyy] {
        font-size: 10px;
    }

.ainna-input[b-7bplzavwyy] {
    padding: 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-heading);
    background: #f7f6f4;
    box-shadow: inset 0 1px 2px rgba(20, 15, 50, 0.04);
    transition: all var(--transition-base);
    width: 100%;
    font-family: inherit;
}

    .ainna-input[b-7bplzavwyy]::placeholder {
        color: var(--text-tertiary);
        opacity: 0.7;
    }

    .ainna-input:hover[b-7bplzavwyy] {
        border-color: #bdb7b0;
    }

    .ainna-input:focus[b-7bplzavwyy] {
        outline: none;
        border-color: var(--accent);
        background: var(--background-primary);
        box-shadow: 0 0 0 3px rgba(244, 8, 155, 0.08);
    }

    .ainna-input.filled[b-7bplzavwyy] {
        border-color: #d9d2cc;
        background: var(--background-primary);
    }

.ainna-textarea[b-7bplzavwyy] {
    min-height: 80px;
    max-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* ── Calibration Card ── */
.ainna-calibration-hint[b-7bplzavwyy] {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.55;
}

.ainna-field-label[b-7bplzavwyy] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.ainna-pick-prompt[b-7bplzavwyy] {
    font-weight: 500;
    font-style: italic;
    color: var(--text-secondary);
    letter-spacing: 0;
    margin-left: 2px;
    animation: pendingPulse 2.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   INTENT PANEL
   ═══════════════════════════════════════════════════════ */

.ainna-intent-section[b-7bplzavwyy] {
    margin-bottom: 22px;
}

.ainna-intent-panel[b-7bplzavwyy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ainna-intent-opt[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--background-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    user-select: none;
}

    .ainna-intent-opt.unselected[b-7bplzavwyy] {
        border: 1.5px dashed var(--border-color);
    }

        .ainna-intent-opt.unselected:hover[b-7bplzavwyy] {
            border-style: solid;
            border-color: var(--text-tertiary);
        }

            .ainna-intent-opt.unselected:hover .ainna-intent-icon[b-7bplzavwyy] {
                color: var(--text-heading);
            }

    .ainna-intent-opt.selected[b-7bplzavwyy] {
        border: 1.5px solid var(--accent);
        background: var(--accent-soft);
    }

        .ainna-intent-opt.selected .ainna-intent-icon[b-7bplzavwyy] {
            color: var(--accent);
        }

        .ainna-intent-opt.selected .ainna-intent-check[b-7bplzavwyy] {
            opacity: 1;
            transform: scale(1);
        }

.ainna-intent-icon[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--text-tertiary);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-base);
}

.ainna-intent-text[b-7bplzavwyy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.3;
    flex: 1;
    text-align: left;
}

.ainna-intent-check[b-7bplzavwyy] {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════
   SCALE SLIDER
   ═══════════════════════════════════════════════════════ */

.ainna-scale[b-7bplzavwyy] {
    position: relative;
}

.ainna-scale-track-area[b-7bplzavwyy] {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    cursor: pointer;
}

.ainna-scale-range[b-7bplzavwyy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ainna-scale-track[b-7bplzavwyy] {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: visible;
}

.ainna-scale-fill[b-7bplzavwyy] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--color-accent-2));
    transition: width 0.12s ease-out;
    opacity: 0;
}

.ainna-scale.active .ainna-scale-fill[b-7bplzavwyy] {
    opacity: 1;
}

.ainna-scale-ticks[b-7bplzavwyy] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    pointer-events: none;
}

.ainna-scale-tick[b-7bplzavwyy] {
    position: absolute;
    top: -1px;
    width: 1.5px;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 1px;
    transform: translateX(-50%);
}

/* ── Thumb ── */
.ainna-scale-thumb[b-7bplzavwyy] {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    transition: left 0.12s ease-out, box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base), border-style 0.2s ease;
}

    .ainna-scale-thumb.parked[b-7bplzavwyy] {
        background: var(--background-primary);
        border: 2px solid transparent;
        box-shadow: 0 0 0 2px var(--border-color), 0 0 0 5px rgba(244, 8, 155, 0.06);
        animation: thumbPark-b-7bplzavwyy 2.8s ease-in-out infinite;
    }

        .ainna-scale-thumb.parked[b-7bplzavwyy]::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--border-color);
            transform: translate(-50%, -50%);
            transition: opacity 0.2s ease;
        }

@keyframes thumbPark-b-7bplzavwyy {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--border-color), 0 0 0 5px rgba(244, 8, 155, 0.04);
    }

    50% {
        box-shadow: 0 0 0 2px rgba(244, 8, 155, 0.35), 0 0 0 7px rgba(244, 8, 155, 0.08);
    }
}

.ainna-scale-thumb.live[b-7bplzavwyy] {
    background: var(--background-primary);
    border: 2.5px solid var(--accent);
    box-shadow: 0 1px 6px rgba(244, 8, 155, 0.25);
    animation: none;
}

    .ainna-scale-thumb.live[b-7bplzavwyy]::after {
        display: none;
    }

.ainna-scale-track-area:hover .ainna-scale-thumb.live[b-7bplzavwyy] {
    box-shadow: 0 1px 10px rgba(244, 8, 155, 0.35);
}

.ainna-scale-track-area:active .ainna-scale-thumb.live[b-7bplzavwyy] {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 2px 14px rgba(244, 8, 155, 0.4);
}

.ainna-scale.done .ainna-scale-fill[b-7bplzavwyy] {
    background: var(--ink);
}

.ainna-scale.done .ainna-scale-thumb.live[b-7bplzavwyy] {
    border-color: var(--ink);
    box-shadow: 0 1px 6px rgba(20, 15, 50, 0.2);
}

.ainna-scale.done .ainna-scale-track-area:hover .ainna-scale-thumb.live[b-7bplzavwyy] {
    box-shadow: 0 1px 10px rgba(20, 15, 50, 0.25);
}

/* Labels */
.ainna-scale-labels[b-7bplzavwyy] {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 24px;
}

.ainna-scale-lbl[b-7bplzavwyy] {
    font-size: 10.5px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-align: center;
    flex: 1;
    line-height: 1.3;
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    padding: 2px 0;
}

    .ainna-scale-lbl:first-child[b-7bplzavwyy] {
        text-align: left;
    }

    .ainna-scale-lbl:last-child[b-7bplzavwyy] {
        text-align: right;
    }

    .ainna-scale-lbl:hover[b-7bplzavwyy] {
        color: var(--text-secondary);
    }

    .ainna-scale-lbl.nearest[b-7bplzavwyy] {
        color: var(--text-heading);
        font-weight: 700;
    }

/* Scale Prompt */
.ainna-scale-prompt[b-7bplzavwyy] {
    text-align: center;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.8;
    animation: pendingPulse 2.4s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 20px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

    .ainna-scale-prompt i[b-7bplzavwyy] {
        font-size: 11px;
    }

    .ainna-scale-prompt.hidden[b-7bplzavwyy] {
        visibility: hidden;
        opacity: 0;
        animation: none;
    }

/* ── Terms ── */
.ainna-terms-row[b-7bplzavwyy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 50px;
}

.ainna-checkbox[b-7bplzavwyy] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--ink);
    flex-shrink: 0;
}

.ainna-terms-label[b-7bplzavwyy] {
    font-size: 12.5px;
    color: var(--text-heading);
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

.ainna-terms-note[b-7bplzavwyy] {
    margin: 0 0 16px;
    padding-left: 50px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.ainna-terms-label a[b-7bplzavwyy] {
    color: var(--text-heading);
    text-decoration: underline;
    text-decoration-color: var(--text-tertiary);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: text-decoration-color var(--transition-base);
}

    .ainna-terms-label a:hover[b-7bplzavwyy] {
        text-decoration-color: var(--text-heading);
    }

/* ── Proceed Error ── */
.ainna-proceed-error[b-7bplzavwyy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #991b1b;
    line-height: 1.5;
    animation: fadeIn-b-7bplzavwyy 0.3s ease;
}

    .ainna-proceed-error i[b-7bplzavwyy] {
        font-size: 14px;
        margin-top: 1px;
        flex-shrink: 0;
    }

/* ── Proceed Hint ── */
.ainna-proceed-hint[b-7bplzavwyy] {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    margin-top: 12px;
    animation: hintAppear-b-7bplzavwyy 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .ainna-proceed-hint i[b-7bplzavwyy] {
        font-size: 11px;
        animation: hintBounce-b-7bplzavwyy 0.6s ease 0.35s both;
    }

@keyframes hintAppear-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hintBounce-b-7bplzavwyy {
    0%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-4px);
    }

    70% {
        transform: translateY(-2px);
    }
}

/* ═══════════════════════════════════════════════════════
   PROCEED BUTTON
   ═══════════════════════════════════════════════════════ */

.ainna-btn-go[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin: 28px auto 0;
    padding: 15px 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--gradient-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 20px rgba(244, 8, 155, 0.35), 0 2px 6px rgba(244, 8, 155, 0.2);
    letter-spacing: 0.01em;
}

    .ainna-btn-go:hover:not(:disabled):not(.processing):not(.incomplete)[b-7bplzavwyy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(244, 8, 155, 0.4), 0 4px 12px rgba(244, 8, 155, 0.25);
    }

    .ainna-btn-go.incomplete[b-7bplzavwyy] {
        background: var(--gradient-accent);
        opacity: 0.4;
        box-shadow: 0 2px 10px rgba(244, 8, 155, 0.12);
        cursor: pointer;
    }

        .ainna-btn-go.incomplete:hover[b-7bplzavwyy] {
            opacity: 0.85;
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(244, 8, 155, 0.3), 0 2px 6px rgba(244, 8, 155, 0.15);
        }

    .ainna-btn-go:disabled[b-7bplzavwyy] {
        opacity: 0.5;
        cursor: wait;
        background: #8f8a84;
        box-shadow: none;
    }

    .ainna-btn-go.processing[b-7bplzavwyy] {
        cursor: wait;
        opacity: 0.85;
    }

    .ainna-btn-go i[b-7bplzavwyy] {
        font-size: 14px;
        transition: transform var(--transition-base);
    }

    .ainna-btn-go:hover:not(:disabled):not(.processing):not(.incomplete) i[b-7bplzavwyy] {
        transform: translateX(3px);
    }

/* ═══════════════════════════════════════════════════════
   RIGHT COLUMN — Aside
   ═══════════════════════════════════════════════════════ */

.ainna-aside[b-7bplzavwyy] {
    position: sticky;
    top: 80px;
    padding: 28px;
    background: var(--aside-bg);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

.ainna-aside-header[b-7bplzavwyy] {
    padding: 0 0 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--aside-rule);
}

.ainna-aside-header-title[b-7bplzavwyy] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 10px;
    letter-spacing: -0.015em;
}

.ainna-aside-header-text[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.62;
    margin: 0;
}

.ainna-aside-inner[b-7bplzavwyy] {
    padding: 0;
}

.ainna-aside-section[b-7bplzavwyy] {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--aside-rule);
}

    .ainna-aside-section:last-child[b-7bplzavwyy] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.ainna-aside-title[b-7bplzavwyy] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

    .ainna-aside-title i[b-7bplzavwyy] {
        font-size: 13px;
        color: var(--accent);
    }

.ainna-aside-text[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Next Steps ── */
.ainna-next-steps[b-7bplzavwyy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ainna-next-step[b-7bplzavwyy] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ainna-step-marker[b-7bplzavwyy] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--accent);
    margin-top: 7px;
}

.ainna-next-step strong[b-7bplzavwyy] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 3px;
}

.ainna-next-step p[b-7bplzavwyy] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Trial Features ── */
.ainna-trial-features[b-7bplzavwyy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ainna-trial-feat[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

    .ainna-trial-feat i[b-7bplzavwyy] {
        font-size: 11px;
        color: var(--text-secondary);
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }

/* ── Privacy ── */
.ainna-aside-privacy .ainna-aside-text[b-7bplzavwyy] {
    font-style: italic;
    color: var(--text-tertiary);
}

/* ── Footer ── */
.ainna-footer[b-7bplzavwyy] {
    background: var(--background-primary);
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    margin-top: auto;
}

.ainna-footer-content[b-7bplzavwyy] {
    max-width: calc(var(--col-left-max) + var(--col-gap) + var(--col-right-max));
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

    .ainna-footer-content a[b-7bplzavwyy] {
        color: var(--text-tertiary);
        text-decoration: none;
        transition: color var(--transition-base);
    }

        .ainna-footer-content a:hover[b-7bplzavwyy] {
            color: var(--text-heading);
        }

.ainna-footer-sep[b-7bplzavwyy] {
    color: var(--border-color);
}

/* ── Processing Overlay ── */
.ainna-overlay[b-7bplzavwyy] {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 24, 0.5);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: overlayIn-b-7bplzavwyy 0.3s ease;
}

    .ainna-overlay.active[b-7bplzavwyy] {
        display: flex;
    }

@keyframes overlayIn-b-7bplzavwyy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ainna-overlay-box[b-7bplzavwyy] {
    background: var(--background-primary);
    padding: 48px;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(10, 8, 24, 0.25), 0 8px 20px rgba(10, 8, 24, 0.12);
    text-align: center;
    max-width: 420px;
    width: 90%;
    animation: boxIn-b-7bplzavwyy 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes boxIn-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ainna-overlay-spinner[b-7bplzavwyy] {
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
}

.ainna-spinner-ring[b-7bplzavwyy] {
    width: 100%;
    height: 100%;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-7bplzavwyy 0.8s linear infinite;
}

.ainna-overlay-check[b-7bplzavwyy] {
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--done-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkIn-b-7bplzavwyy 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .ainna-overlay-check i[b-7bplzavwyy] {
        font-size: 24px;
        color: #fff;
    }

@keyframes checkIn-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        transform: scale(1.15);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.overlay-done .ainna-overlay-title[b-7bplzavwyy] {
    color: var(--text-heading);
}

.overlay-done .ainna-overlay-sub[b-7bplzavwyy] {
    color: var(--text-tertiary);
    font-size: 13px;
}

.ainna-overlay-title[b-7bplzavwyy] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.ainna-overlay-sub[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    transition: all 0.3s ease;
}

.ainna-overlay-steps[b-7bplzavwyy] {
    text-align: left;
}

.ainna-overlay-step[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-tertiary);
    opacity: 0.4;
    transition: all var(--transition-base);
}

    .ainna-overlay-step:last-child[b-7bplzavwyy] {
        margin-bottom: 0;
    }

    .ainna-overlay-step.active[b-7bplzavwyy] {
        opacity: 1;
        color: var(--text-heading);
        font-weight: 600;
    }

    .ainna-overlay-step.complete[b-7bplzavwyy] {
        opacity: 1;
        color: var(--text-secondary);
    }

    .ainna-overlay-step i[b-7bplzavwyy] {
        width: 16px;
        font-size: 13px;
    }

.ainna-form-row .ainna-choice-row[b-7bplzavwyy] {
    margin: 0;
}

.ainna-form-note[b-7bplzavwyy] {
    margin-top: -6px;
    padding-left: 122px;
}

/* ═══════════════════════════════════════════════════════
   INNOVATION AGENDA FORM (Step 3)
   ═══════════════════════════════════════════════════════ */

.ainna-hint-loop[b-7bplzavwyy] {
    min-height: 3em;
    transition: opacity 0.25s ease;
}

    .ainna-hint-loop.swap[b-7bplzavwyy] {
        opacity: 0;
    }

.ainna-agenda-field[b-7bplzavwyy] {
    margin-top: 20px;
}

    .ainna-agenda-field:first-of-type[b-7bplzavwyy] {
        margin-top: 4px;
    }

.ainna-field-hint[b-7bplzavwyy] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-top: 6px;
}

.ainna-input.error[b-7bplzavwyy] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.04);
}

    .ainna-input.error:focus[b-7bplzavwyy] {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
    }

/* ── Theme chips ── */
.ainna-chip-input[b-7bplzavwyy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #f7f6f4;
    box-shadow: inset 0 1px 2px rgba(20, 15, 50, 0.04);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    cursor: text;
}

    .ainna-chip-input:focus-within[b-7bplzavwyy] {
        border-color: var(--accent);
        background: var(--background-primary);
        box-shadow: 0 0 0 3px rgba(244, 8, 155, 0.08);
    }

    .ainna-chip-input.filled[b-7bplzavwyy] {
        border-color: #d9d2cc;
        background: var(--background-primary);
    }

    .ainna-chip-input.error[b-7bplzavwyy] {
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.04);
    }

.ainna-chip[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-heading);
    animation: chipIn-b-7bplzavwyy 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ainna-chip-text[b-7bplzavwyy] {
    line-height: 1.2;
}

.ainna-chip-x[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(244, 8, 155, 0.14);
    color: var(--accent);
    font-size: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--transition-base), color var(--transition-base);
}

    .ainna-chip-x:hover[b-7bplzavwyy] {
        background: var(--accent);
        color: #fff;
    }

@keyframes chipIn-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ainna-chip-entry[b-7bplzavwyy] {
    flex: 1;
    min-width: 140px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-heading);
    padding: 4px 2px;
}

    .ainna-chip-entry[b-7bplzavwyy]::placeholder {
        color: var(--text-tertiary);
        opacity: 0.7;
    }

/* ── Segmented (Ambition) ── */
.ainna-segmented[b-7bplzavwyy] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ainna-seg[b-7bplzavwyy] {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 10px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

    .ainna-seg:hover[b-7bplzavwyy] {
        border-color: var(--text-tertiary);
        color: var(--text-heading);
    }

    .ainna-seg.selected[b-7bplzavwyy] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--text-heading);
    }

/* ── Choice chips (Horizon) ── */
.ainna-choice-row[b-7bplzavwyy] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 10px;
}

.ainna-choice[b-7bplzavwyy] {
    padding: 9px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--background-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

    .ainna-choice:hover[b-7bplzavwyy] {
        border-color: var(--text-tertiary);
        color: var(--text-heading);
    }

    .ainna-choice.selected[b-7bplzavwyy] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--text-heading);
    }

/* ── Validation status ── */
.ainna-agenda-status[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    animation: fadeIn-b-7bplzavwyy 0.3s ease;
}

    .ainna-agenda-status.checking[b-7bplzavwyy] {
        color: var(--text-secondary);
    }

    .ainna-agenda-status.error[b-7bplzavwyy] {
        color: #b45309;
        background: #fef9ec;
        border: 1px solid #f0d88a;
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        align-items: flex-start;
    }

        .ainna-agenda-status.error i[b-7bplzavwyy] {
            margin-top: 2px;
            flex-shrink: 0;
        }

@media (prefers-reduced-motion: reduce) {
    .ainna-chip[b-7bplzavwyy],
    .ainna-agenda-status[b-7bplzavwyy] {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .ainna-left-column[b-7bplzavwyy] {
        flex: 1;
        max-width: 100%;
    }

    .ainna-right-column[b-7bplzavwyy] {
        flex: 0 0 340px;
        max-width: 340px;
    }

    .ainna-columns-wrapper[b-7bplzavwyy] {
        gap: 40px;
    }
}

@media (max-width: 900px) {
    .ainna-columns-wrapper[b-7bplzavwyy] {
        flex-direction: column;
        gap: 32px;
    }

    .ainna-left-column[b-7bplzavwyy], .ainna-right-column[b-7bplzavwyy] {
        flex: 1;
        max-width: 100%;
    }

    .ainna-aside[b-7bplzavwyy] {
        position: static;
    }

    .ainna-main-container[b-7bplzavwyy] {
        padding: 36px 24px 60px;
    }
}

@media (max-width: 640px) {
    .ainna-header-tagline[b-7bplzavwyy] {
        display: none;
    }

    .ainna-main-container[b-7bplzavwyy] {
        padding: 28px 20px 48px;
    }

    .ainna-welcome-title[b-7bplzavwyy] {
        font-size: 22px;
    }

    .ainna-card[b-7bplzavwyy] {
        padding: 24px 20px;
    }

        .ainna-card.ainna-card-compact[b-7bplzavwyy] {
            padding: 20px;
        }

    .ainna-form-row[b-7bplzavwyy] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Label column collapses here, so the team field aligns to the card edge. */
    .ainna-team-field[b-7bplzavwyy] {
        padding-left: 0;
    }

    .ainna-intent-panel[b-7bplzavwyy] {
        grid-template-columns: 1fr;
    }

    .ainna-code-input-row[b-7bplzavwyy] {
        flex-direction: column;
        gap: 12px;
    }

    .ainna-code-input[b-7bplzavwyy] {
        width: 200px;
        height: 52px;
        font-size: 24px;
        letter-spacing: 6px;
    }

    .ainna-btn-go[b-7bplzavwyy] {
        max-width: 100%;
        font-size: 15px;
        padding: 14px 24px;
    }

    .ainna-aside[b-7bplzavwyy] {
        padding: 24px 20px;
    }

    .ainna-footer-content[b-7bplzavwyy] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ainna-step-ring[b-7bplzavwyy] {
        width: 30px;
        height: 30px;
    }

        .ainna-step-ring span[b-7bplzavwyy] {
            font-size: 13px;
        }

        .ainna-step-ring i[b-7bplzavwyy] {
            font-size: 11px;
        }

    .ainna-badge-left[b-7bplzavwyy] {
        gap: 10px;
    }

    .ainna-badge-label[b-7bplzavwyy] {
        font-size: 15px;
    }

    .ainna-terms-row[b-7bplzavwyy],
    .ainna-terms-note[b-7bplzavwyy] {
        padding-left: 40px;
    }
}

@media (max-width: 480px) {
    .ainna-welcome-title[b-7bplzavwyy] {
        font-size: 20px;
    }

    .ainna-code-input[b-7bplzavwyy] {
        width: 180px;
        height: 48px;
        font-size: 20px;
        letter-spacing: 5px;
    }

    .ainna-next-step p[b-7bplzavwyy] {
        font-size: 11px;
    }

    .ainna-badge-label[b-7bplzavwyy] {
        font-size: 14px;
    }

    .ainna-terms-row[b-7bplzavwyy],
    .ainna-terms-note[b-7bplzavwyy] {
        padding-left: 38px;
    }

    .ainna-scale-lbl[b-7bplzavwyy] {
        font-size: 9.5px;
    }

    .ainna-step-ring[b-7bplzavwyy] {
        width: 28px;
        height: 28px;
    }

        .ainna-step-ring span[b-7bplzavwyy] {
            font-size: 12px;
        }
}
/* /Components/AinnaSmartBillingAndPurchaseHistory.razor.rz.scp.css */
/* ============================================
   BILLING PAGE — v2 migrated
   Page tinted with --background-secondary so cards lift off it.
   var(--color-accent-1) → var(--accent).
   ============================================ */

.billing-page[b-qswhspyqk9] {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: var(--background-secondary);
}

    .billing-page *[b-qswhspyqk9] {
        box-sizing: border-box;
    }

.bg-pattern[b-qswhspyqk9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}

.billing-wrapper[b-qswhspyqk9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 72px 40px 80px;
    position: relative;
    z-index: 1;
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header[b-qswhspyqk9] {
    margin-bottom: 48px;
}

.page-title[b-qswhspyqk9] {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 12px 0;
    letter-spacing: -1px;
}

.page-subtitle[b-qswhspyqk9] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   LAYOUT
   ============================================ */
.billing-layout[b-qswhspyqk9] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
}

.left-column[b-qswhspyqk9] {
    position: sticky;
    top: 24px;
    z-index: 10;
}

.sticky-content[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-column[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   PLAN CARD
   ============================================ */
.plan-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

    .plan-card.has-subscription[b-qswhspyqk9] {
        border-color: color-mix(in srgb, var(--accent) 25%, var(--border-color));
    }

.plan-header[b-qswhspyqk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.plan-badge[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
}

    .plan-badge i[b-qswhspyqk9] {
        font-size: 12px;
        color: var(--accent);
    }

/* Status colors — hardcoded intentionally */
.plan-status[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(52, 168, 83, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

    .plan-status .status-dot[b-qswhspyqk9] {
        width: 6px;
        height: 6px;
        background: #34a853;
        border-radius: 50%;
    }

.plan-name[b-qswhspyqk9] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.plan-price-block[b-qswhspyqk9] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.plan-price[b-qswhspyqk9] {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -1px;
}

.plan-period[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.plan-renewal[b-qswhspyqk9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

    .plan-renewal i[b-qswhspyqk9] {
        font-size: 11px;
        color: var(--text-tertiary);
    }

.plan-details[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.plan-detail-item[b-qswhspyqk9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .plan-detail-item i[b-qswhspyqk9] {
        width: 16px;
        font-size: 12px;
        color: var(--text-tertiary);
        text-align: center;
    }

/* Account Section (inside plan card) */
.account-section[b-qswhspyqk9] {
    padding-top: 16px;
    margin-bottom: 16px;
}

.account-section-label[b-qswhspyqk9] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.info-list[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
}

.info-item[b-qswhspyqk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

    .info-item:last-child[b-qswhspyqk9] {
        border-bottom: none;
    }

.info-label[b-qswhspyqk9] {
    font-size: 13px;
    color: var(--text-tertiary);
}

.info-value[b-qswhspyqk9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

    .info-value.value-on[b-qswhspyqk9] {
        color: #34a853;
    }

    .info-value.value-off[b-qswhspyqk9] {
        color: var(--text-tertiary);
    }

.btn-plan-action[b-qswhspyqk9] {
    width: 100%;
    padding: 12px 16px;
    background: var(--text-heading);
    color: var(--background-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-plan-action:hover[b-qswhspyqk9] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .btn-plan-action i[b-qswhspyqk9] {
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    .btn-plan-action:hover i[b-qswhspyqk9] {
        transform: translateX(3px);
    }

/* Plan Card Actions */
.plan-card-actions[b-qswhspyqk9] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-action[b-qswhspyqk9] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Button colors — hardcoded intentionally */
.btn-renew[b-qswhspyqk9] {
    background: #34a853;
    color: white;
    border: none;
}

    .btn-renew:hover[b-qswhspyqk9] {
        background: #2d9248;
    }

.btn-cancel-sub[b-qswhspyqk9] {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
}

    .btn-cancel-sub:hover[b-qswhspyqk9] {
        color: #ea4335;
        border-color: rgba(234, 67, 53, 0.3);
        background: rgba(234, 67, 53, 0.05);
    }

/* ============================================
   INFO CARDS (Payment, Support)
   ============================================ */
.info-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}

.info-card-header[b-qswhspyqk9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

    .info-card-header i[b-qswhspyqk9] {
        font-size: 14px;
        color: var(--text-tertiary);
    }

/* Payment Card — Stripe purple preserved */
.payment-card .payment-text[b-qswhspyqk9] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 14px 0;
}

.stripe-badge[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--background-secondary);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #635BFF;
}

    .stripe-badge i[b-qswhspyqk9] {
        font-size: 18px;
    }

/* Support Card */
.support-card[b-qswhspyqk9] {
    padding: 16px 20px;
}

    .support-card .support-note[b-qswhspyqk9] {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0 0 12px 0;
    }

    .support-card .support-email[b-qswhspyqk9] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.2s ease;
    }

        .support-card .support-email:hover[b-qswhspyqk9] {
            opacity: 0.8;
        }

        .support-card .support-email i[b-qswhspyqk9] {
            font-size: 12px;
        }

/* ============================================
   SECTION CARDS (Right Column)
   ============================================ */
.section-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 32px;
}

.card-header[b-qswhspyqk9] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-title[b-qswhspyqk9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.card-desc[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
}

/* ============================================
   FORMS
   ============================================ */
.form-grid[b-qswhspyqk9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-field.full[b-qswhspyqk9] {
        grid-column: 1 / -1;
    }

.form-label[b-qswhspyqk9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.required[b-qswhspyqk9] {
    color: var(--accent);
    font-weight: 700;
}

.form-input[b-qswhspyqk9],
.form-select[b-qswhspyqk9] {
    padding: 14px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
    outline: none;
}

    .form-input[b-qswhspyqk9]::placeholder {
        color: var(--text-tertiary);
        opacity: 0.7;
    }

    .form-input:focus[b-qswhspyqk9],
    .form-select:focus[b-qswhspyqk9] {
        border-color: var(--accent);
        background: var(--background-primary);
    }

    .form-input:hover[b-qswhspyqk9],
    .form-select:hover[b-qswhspyqk9] {
        border-color: var(--text-tertiary);
    }

.form-select[b-qswhspyqk9] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 48px;
}

    .form-select:focus[b-qswhspyqk9] {
        border-color: var(--accent);
        background-color: var(--background-primary);
        outline: none;
        box-shadow: none;
    }

.form-actions[b-qswhspyqk9] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.btn-save[b-qswhspyqk9] {
    padding: 14px 28px;
    background: var(--text-heading);
    color: var(--background-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-qswhspyqk9] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .btn-save:disabled[b-qswhspyqk9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ============================================
   DATA TABLE
   ============================================ */
.table-wrapper[b-qswhspyqk9] {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

.data-table[b-qswhspyqk9] {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

    .data-table th[b-qswhspyqk9] {
        text-align: left;
        padding: 12px 14px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
    }

        .data-table th.text-center[b-qswhspyqk9] {
            text-align: center;
        }

        .data-table th.text-right[b-qswhspyqk9] {
            text-align: right;
        }

    .data-table td[b-qswhspyqk9] {
        padding: 14px;
        font-size: 13px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    .data-table tr:hover[b-qswhspyqk9] {
        background: var(--background-secondary);
    }

    .data-table tr:last-child td[b-qswhspyqk9] {
        border-bottom: none;
    }

.cell-date[b-qswhspyqk9] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Type tags — distinct status palette, preserved */
.type-tag[b-qswhspyqk9] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-purchase[b-qswhspyqk9] {
    background: rgba(26, 115, 232, 0.1);
    color: #1a73e8;
}

.type-credit[b-qswhspyqk9] {
    background: rgba(52, 168, 83, 0.1);
    color: #34a853;
}

.type-refund[b-qswhspyqk9] {
    background: rgba(251, 188, 4, 0.1);
    color: #f9a825;
}

.type-bonus[b-qswhspyqk9] {
    background: rgba(156, 136, 255, 0.1);
    color: #9c88ff;
}

.type-default[b-qswhspyqk9] {
    background: var(--background-secondary);
    color: var(--text-secondary);
}

.cell-context[b-qswhspyqk9] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-packs[b-qswhspyqk9] {
    font-weight: 600;
    color: var(--text-primary);
}

.cell-amount[b-qswhspyqk9] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cell-notes[b-qswhspyqk9] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-qswhspyqk9] {
    text-align: center;
    padding: 48px 24px;
}

    .empty-state i[b-qswhspyqk9] {
        font-size: 32px;
        color: var(--text-tertiary);
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state h3[b-qswhspyqk9] {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 6px 0;
    }

    .empty-state p[b-qswhspyqk9] {
        font-size: 13px;
        color: var(--text-tertiary);
        margin: 0;
        max-width: 260px;
        margin: 0 auto;
    }

/* ============================================
   LOAD MORE
   ============================================ */
.load-more[b-qswhspyqk9] {
    margin-top: 20px;
    text-align: center;
}

.btn-load[b-qswhspyqk9] {
    padding: 10px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-load:hover:not(:disabled)[b-qswhspyqk9] {
        background: var(--background-secondary);
        border-color: var(--text-tertiary);
    }

    .btn-load:disabled[b-qswhspyqk9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ============================================
   SPINNER
   ============================================ */
.spinner[b-qswhspyqk9] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-qswhspyqk9 0.8s linear infinite;
}

.btn-load .spinner[b-qswhspyqk9] {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text-secondary);
}

@keyframes spin-b-qswhspyqk9 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
.toast[b-qswhspyqk9] {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 14px 18px;
    background: var(--background-primary);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    max-width: 360px;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .toast.show[b-qswhspyqk9] {
        transform: translateX(0);
    }

    /* Toast status colors — preserved */
    .toast.success i[b-qswhspyqk9] {
        color: #34a853;
        font-size: 18px;
    }

    .toast.error i[b-qswhspyqk9] {
        color: #ea4335;
        font-size: 18px;
    }

.toast-content[b-qswhspyqk9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .toast-content strong[b-qswhspyqk9] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .toast-content span[b-qswhspyqk9] {
        font-size: 12px;
        color: var(--text-secondary);
    }

.toast-close[b-qswhspyqk9] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    margin: -4px -4px -4px 0;
    transition: color 0.2s ease;
}

    .toast-close:hover[b-qswhspyqk9] {
        color: var(--text-primary);
    }

/* ============================================
   RESPONSIVE — preserved as-is
   ============================================ */
@media (max-width: 1200px) {
    .billing-wrapper[b-qswhspyqk9] {
        padding: 56px 32px 80px;
    }

    .billing-layout[b-qswhspyqk9] {
        grid-template-columns: 300px 1fr;
        gap: 28px;
    }
}

@media (max-width: 968px) {
    .billing-layout[b-qswhspyqk9] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .left-column[b-qswhspyqk9] {
        position: static;
    }

    .sticky-content[b-qswhspyqk9] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .plan-card[b-qswhspyqk9] {
        grid-column: 1 / -1;
    }

    .form-grid[b-qswhspyqk9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .billing-wrapper[b-qswhspyqk9] {
        padding: 40px 20px 60px;
    }

    .page-title[b-qswhspyqk9] {
        font-size: 28px;
    }

    .sticky-content[b-qswhspyqk9] {
        grid-template-columns: 1fr;
    }

    .section-card[b-qswhspyqk9] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .toast[b-qswhspyqk9] {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .billing-wrapper[b-qswhspyqk9] {
        padding: 32px 16px 48px;
    }

    .page-header[b-qswhspyqk9] {
        margin-bottom: 32px;
    }

    .page-title[b-qswhspyqk9] {
        font-size: 24px;
    }

    .plan-card[b-qswhspyqk9] {
        padding: 20px;
    }

    .plan-name[b-qswhspyqk9] {
        font-size: 20px;
    }

    .plan-price[b-qswhspyqk9] {
        font-size: 28px;
    }

    .section-card[b-qswhspyqk9] {
        padding: 20px 16px;
    }

    .card-title[b-qswhspyqk9] {
        font-size: 18px;
    }

    .table-wrapper[b-qswhspyqk9] {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .form-actions[b-qswhspyqk9] {
        justify-content: stretch;
    }

    .btn-save[b-qswhspyqk9] {
        width: 100%;
        justify-content: center;
    }

    .info-card[b-qswhspyqk9] {
        padding: 16px;
    }

    .support-card[b-qswhspyqk9] {
        padding: 14px 16px;
    }
}

/* Scrollbar styling */
.table-wrapper[b-qswhspyqk9]::-webkit-scrollbar {
    height: 6px;
}

.table-wrapper[b-qswhspyqk9]::-webkit-scrollbar-track {
    background: var(--background-secondary);
    border-radius: 3px;
}

.table-wrapper[b-qswhspyqk9]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

    .table-wrapper[b-qswhspyqk9]::-webkit-scrollbar-thumb:hover {
        background: var(--text-tertiary);
    }

/* ============================================
   ADDITIONS: cancellation request, invoice button,
   dark spinner, quality floor
   ============================================ */
.spinner-dark[b-qswhspyqk9] {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text-secondary);
}

.cancel-requested[b-qswhspyqk9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #2d9248;
    background: rgba(52, 168, 83, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
}

    .cancel-requested i[b-qswhspyqk9] {
        margin-top: 2px;
        flex-shrink: 0;
    }

/* ---- Plan state banners (Grace warning / fallen-to-Free continuity) ---- */
.plan-banner[b-qswhspyqk9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
}

    .plan-banner i[b-qswhspyqk9] {
        font-size: 14px;
        margin-top: 2px;
        flex-shrink: 0;
    }

.plan-banner--warning[b-qswhspyqk9] {
    background: color-mix(in srgb, #f59e0b 9%, transparent);
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

    .plan-banner--warning i[b-qswhspyqk9] {
        color: #b45309;
    }

.plan-banner--info[b-qswhspyqk9] {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

    .plan-banner--info i[b-qswhspyqk9] {
        color: var(--accent);
    }

.plan-banner-text[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .plan-banner-text strong[b-qswhspyqk9] {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--text-heading);
    }

    .plan-banner-text span[b-qswhspyqk9] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.55;
    }

.plan-banner-link[b-qswhspyqk9] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

    .plan-banner-link:hover[b-qswhspyqk9] {
        text-decoration: underline;
    }


/* ---- Cancellation flow (offer -> feedback -> done) ---- */
.cancel-flow[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-secondary);
}

.cancel-flow-header[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .cancel-flow-header strong[b-qswhspyqk9] {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--text-heading);
    }

    .cancel-flow-header span[b-qswhspyqk9] {
        font-size: 12.5px;
        color: var(--text-secondary);
        line-height: 1.6;
    }

.cancel-flow-link[b-qswhspyqk9] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

    .cancel-flow-link:hover[b-qswhspyqk9] {
        text-decoration: underline;
    }

.btn-keep-plan[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    transition: filter 0.2s ease, transform 0.2s ease;
}

    .btn-keep-plan:hover[b-qswhspyqk9] {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.cancel-reasons[b-qswhspyqk9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reason-chip[b-qswhspyqk9] {
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

    .reason-chip:hover[b-qswhspyqk9] {
        border-color: var(--text-tertiary);
    }

    .reason-chip.selected[b-qswhspyqk9] {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: var(--text-heading);
    }

.cancel-comment[b-qswhspyqk9] {
    width: 100%;
    min-height: 64px;
    max-height: 140px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
}

    .cancel-comment:focus[b-qswhspyqk9] {
        border-color: var(--accent);
    }

/* ---- Status + table variants ---- */
.plan-status--ending[b-qswhspyqk9] {
    color: #b45309;
}

    .plan-status--ending .status-dot[b-qswhspyqk9] {
        background: #f59e0b;
    }

.type-renewal[b-qswhspyqk9] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-heading);
}

.invoice-none[b-qswhspyqk9] {
    color: var(--text-tertiary);
    font-size: 12px;
}


.btn-invoice[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-invoice:hover[b-qswhspyqk9] {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
        background: var(--background-secondary);
    }

    .btn-invoice i[b-qswhspyqk9] {
        font-size: 12px;
    }

:focus-visible[b-qswhspyqk9] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *[b-qswhspyqk9] {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================
   SURFACE LIFT
   Page sits on --background-secondary; white cards
   lift off it with a soft shadow. Adjust the token
   globally to deepen or lighten the tint.
   ============================================ */
.plan-card[b-qswhspyqk9],
.info-card[b-qswhspyqk9],
.section-card[b-qswhspyqk9] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 16px rgba(0, 0, 0, 0.04);
}


/* ============================================
   INLINE CONFIRMATION (replaces browser confirm)
   ============================================ */
.inline-confirm[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, #ea4335 22%, var(--border-color));
    background: rgba(234, 67, 53, 0.04);
    border-radius: 10px;
}

.inline-confirm-compact[b-qswhspyqk9] {
    text-align: center;
}

    .inline-confirm-compact .inline-confirm-text[b-qswhspyqk9] {
        align-items: center;
    }

.inline-confirm-text[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .inline-confirm-text strong[b-qswhspyqk9] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .inline-confirm-text span[b-qswhspyqk9] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.inline-confirm-actions[b-qswhspyqk9] {
    display: flex;
    gap: 8px;
}

.btn-confirm-danger[b-qswhspyqk9] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: #ea4335;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-confirm-danger:hover:not(:disabled)[b-qswhspyqk9] {
        background: #d33426;
    }

    .btn-confirm-danger:disabled[b-qswhspyqk9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-confirm-ghost[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-confirm-ghost:hover:not(:disabled)[b-qswhspyqk9] {
        background: var(--background-secondary);
        border-color: var(--text-tertiary);
    }

    .btn-confirm-ghost:disabled[b-qswhspyqk9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Cancellation button disabled state + hint */
.btn-action:disabled[b-qswhspyqk9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-sub:disabled:hover[b-qswhspyqk9] {
    color: var(--text-tertiary);
    border-color: var(--border-color);
    background: transparent;
}

.cancel-hint[b-qswhspyqk9] {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}
/* /Components/AinnaSmartChatControl3.razor.rz.scp.css */
*[b-q5lv73xlv9] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.chat-section[b-q5lv73xlv9] {
    width: 100%;
    min-width: 18.75rem;
    max-width: 40rem;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: var(--font-family-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: transparent;
}

@media (min-width: 901px) {
    @supports (padding: env(safe-area-inset-top)) {
        .chat-section[b-q5lv73xlv9] {
            padding-top: env(safe-area-inset-top);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}

.welcome-hero[b-q5lv73xlv9] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4rem 1.5rem 1rem 1.25rem;
    position: relative;
    z-index: 5;
    overflow: hidden;
    opacity: 1;
    animation: welcomeHeroFadeIn-b-q5lv73xlv9 0.6s ease-out;
}

@keyframes welcomeHeroFadeIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.welcome-hero-content[b-q5lv73xlv9] {
    text-align: left;
    max-width: 100%;
    padding-left: 0;
}

.welcome-hero-title[b-q5lv73xlv9] {
    font-family: var(--font-family-primary);
    font-size: clamp(1.875rem, 4.5vw, 2.875rem);
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0 0 1.75rem 0;
    min-height: 4rem;
}

.welcome-typed-text[b-q5lv73xlv9] {
    display: inline;
    background: linear-gradient(135deg, #2c2824 0%, #3e3832 40%, #564e46 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chat-container[b-q5lv73xlv9] {
    flex: 1;
    padding: 0.5rem 0 0;
    overflow: hidden;
    position: relative;
    z-index: 10;
    min-height: 0;
}

    .chat-container[b-q5lv73xlv9]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 1rem;
        right: 1rem;
        height: 2rem;
        background: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        mask-image: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
        -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
        z-index: 15;
        pointer-events: none;
    }

.chat-wrapper[b-q5lv73xlv9] {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.messages-container[b-q5lv73xlv9] {
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
    scroll-behavior: smooth;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    margin: 0 auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.message-card[b-q5lv73xlv9] {
    display: flex;
    flex-direction: column;
    background: #fefdfb;
    border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
    border: 1px solid rgba(200, 195, 187, 0.45);
    align-self: flex-end;
    max-width: 80%;
    width: auto;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.2s ease;
    animation: messageSettle-b-q5lv73xlv9 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

    .message-card:hover[b-q5lv73xlv9] {
        border-color: rgba(200, 195, 187, 0.6);
        box-shadow: 0 2px 6px rgba(80, 70, 55, 0.08), 0 6px 20px rgba(80, 70, 55, 0.05);
    }

    .message-card .message-avatar[b-q5lv73xlv9] {
        display: flex;
        order: 2;
        flex-shrink: 0;
        align-self: flex-start;
    }

.message-main[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 0.875rem 0.875rem 1.0625rem;
}

.message-avatar[b-q5lv73xlv9] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
}

    .message-avatar img[b-q5lv73xlv9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* No photo: the user's initial, in the person's colours — ink on the
       card's slate-lavender whisper. Pink is Ainna's; the user is not a
       second Ainna, and the page needs no more pink than she brings. */
.message-avatar-initial[b-q5lv73xlv9] {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(118, 104, 160, 0.07);
    border: 1px solid rgba(118, 104, 160, 0.16);
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    line-height: 1;
}

.message-avatar.user[b-q5lv73xlv9] {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.message-content[b-q5lv73xlv9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.message-card.collapsed[b-q5lv73xlv9] {
    cursor: pointer;
}

.message-card.expanded[b-q5lv73xlv9] {
    cursor: default;
}

.message-card.collapsed .message-main[b-q5lv73xlv9]::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.4375rem;
    color: var(--ink-6);
    align-self: center;
    flex-shrink: 0;
    margin-left: 0.375rem;
    order: 1;
    transition: color 0.15s ease;
}

.message-card.collapsed:hover .message-main[b-q5lv73xlv9]::after {
    color: var(--ink-5);
}

.message-card.expanded .message-main[b-q5lv73xlv9]::after {
    display: none;
}

.message-text-user[b-q5lv73xlv9] {
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 1.4;
    font-weight: 440;
    letter-spacing: -0.015em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-card.collapsed .message-text-user[b-q5lv73xlv9] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-card.expanded .message-text-user[b-q5lv73xlv9] {
    display: block;
    -webkit-line-clamp: unset;
}

.message-footer[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3125rem 0.9375rem;
    border-top: 1px solid rgba(200, 195, 187, 0.25);
    background: rgba(252, 250, 247, 0.5);
}

.message-card.collapsed .message-footer[b-q5lv73xlv9] {
    display: none;
}

.message-card.expanded .message-footer[b-q5lv73xlv9] {
    display: flex;
}

.message-recency[b-q5lv73xlv9] {
    font-size: var(--text-2xs);
    color: var(--ink-6);
    font-weight: 500;
}

.ai-history-card[b-q5lv73xlv9] {
    display: flex;
    flex-direction: column;
    background: #faf9f6;
    border: 1px solid rgba(200, 195, 187, 0.4);
    border-radius: 0.875rem 0.875rem 0.875rem 0.25rem;
    align-self: flex-start;
    max-width: 88%;
    width: auto;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.25s ease;
    animation: settleIn-b-q5lv73xlv9 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(80, 70, 55, 0.05), 0 3px 10px rgba(80, 70, 55, 0.04), 0 8px 24px rgba(80, 70, 55, 0.03);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

    .ai-history-card.expanded[b-q5lv73xlv9] {
        cursor: default;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(80, 70, 55, 0.07), 0 6px 20px rgba(80, 70, 55, 0.05);
    }

.ai-history-card--latest[b-q5lv73xlv9] {
    background: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
    animation: historyLatestIn-b-q5lv73xlv9 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes historyLatestIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-history-card:hover[b-q5lv73xlv9] {
    border-color: rgba(200, 195, 187, 0.6);
    box-shadow: 0 2px 6px rgba(80, 70, 55, 0.06);
}

.ai-history-card--static[b-q5lv73xlv9] {
    cursor: default;
}

    .ai-history-card--static .ai-history-main[b-q5lv73xlv9] {
        cursor: default;
        padding-right: 0.625rem;
    }

.ai-history-card.collapsed .ai-history-tagline[b-q5lv73xlv9],
.ai-history-card.collapsed .ai-history-text[b-q5lv73xlv9],
.ai-history-card.collapsed .ai-history-chips[b-q5lv73xlv9],
.ai-history-card.collapsed .ai-history-detail[b-q5lv73xlv9],
.ai-history-card.collapsed .ai-history-footer[b-q5lv73xlv9],
.ai-history-card.collapsed .ai-history-question[b-q5lv73xlv9] {
    display: none;
}

.ai-history-card.expanded .ai-history-tagline[b-q5lv73xlv9],
.ai-history-card.expanded .ai-history-text[b-q5lv73xlv9],
.ai-history-card.expanded .ai-history-detail[b-q5lv73xlv9] {
    display: block;
    animation: historyReveal-b-q5lv73xlv9 0.18s ease-out both;
}

.ai-history-card.expanded .ai-history-chips[b-q5lv73xlv9],
.ai-history-card.expanded .ai-history-footer[b-q5lv73xlv9] {
    display: flex;
    animation: historyReveal-b-q5lv73xlv9 0.18s ease-out both;
}

@keyframes historyReveal-b-q5lv73xlv9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ai-history-card.interactive[b-q5lv73xlv9] {
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .ai-history-card.interactive .ai-history-preview[b-q5lv73xlv9] {
        transition: opacity 0.12s ease;
    }

    .ai-history-card.interactive.expanded .ai-history-preview[b-q5lv73xlv9] {
        display: inline;
        opacity: 0;
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

.ai-history-preview[b-q5lv73xlv9] {
    display: inline;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ai-history-card.expanded .ai-history-preview[b-q5lv73xlv9] {
    display: none;
}

.ai-history-expand[b-q5lv73xlv9] {
    position: absolute;
    top: 0.4375rem;
    right: 0.5rem;
    z-index: 2;
    font-size: var(--text-2xs);
    color: var(--ink-6);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-sm);
    gap: 0;
    opacity: 0.5;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ai-history-card:hover .ai-history-expand[b-q5lv73xlv9] {
    opacity: 0.8;
}

    .ai-history-card:hover .ai-history-expand:hover[b-q5lv73xlv9] {
        color: var(--ink-3);
        background: rgba(80, 70, 55, 0.05);
        opacity: 1;
    }

.ai-history-expand i[b-q5lv73xlv9] {
    font-size: 0.4375rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ai-history-card.expanded .ai-history-expand i[b-q5lv73xlv9] {
    transform: rotate(180deg);
}

.ai-history-card.expanded .ai-history-expand[b-q5lv73xlv9] {
    opacity: 0.5;
}

.ai-history-main[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 2rem 0.5rem 0.625rem;
    cursor: pointer;
}

.ai-history-card.expanded .ai-history-main[b-q5lv73xlv9] {
    cursor: default;
    padding-bottom: 0.375rem;
}

.ai-history-avatar[b-q5lv73xlv9] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
    margin-top: 0.125rem;
}

    .ai-history-avatar img[b-q5lv73xlv9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ai-history-content[b-q5lv73xlv9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.125rem;
}

.ai-history-preview-tagline[b-q5lv73xlv9] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
    letter-spacing: -0.01em;
}

.ai-history-preview-arrow[b-q5lv73xlv9] {
    display: inline-block;
    font-size: 0.3125rem;
    color: var(--ink-6);
    margin: 0 0.375rem;
    vertical-align: middle;
    opacity: 0.6;
}

.ai-history-preview-question[b-q5lv73xlv9] {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-4);
    letter-spacing: -0.005em;
}

.ai-history-tagline[b-q5lv73xlv9] {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 0.375rem;
}

.ai-history-text[b-q5lv73xlv9] {
    color: var(--ink-3);
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 420;
    letter-spacing: -0.005em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-history-milestone-icon[b-q5lv73xlv9] {
    color: var(--accent);
    font-size: 0.7em;
    margin-right: 0.4em;
    vertical-align: 0.08em;
    opacity: 0.9;
}

.ai-history-question[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.3125rem;
    margin-top: 0;
}

.ai-history-card.expanded .ai-history-question[b-q5lv73xlv9] {
    margin-top: 0.5rem;
}

.ai-history-question-text[b-q5lv73xlv9] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
    line-height: 1.45;
    letter-spacing: -0.005em;
}

.ai-history-card.collapsed .ai-history-question-text[b-q5lv73xlv9] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-history-chips[b-q5lv73xlv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.ai-history-card.collapsed .ai-history-chips[b-q5lv73xlv9] {
    display: none;
}

.ai-history-chip[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.4375rem;
    background: rgba(80, 70, 55, 0.04);
    border: 1px solid rgba(80, 70, 55, 0.08);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-5);
    letter-spacing: 0.005em;
}

    .ai-history-chip.selected[b-q5lv73xlv9] {
        background: rgba(80, 70, 55, 0.08);
        border-color: rgba(80, 70, 55, 0.18);
        color: var(--ink-2);
        font-weight: var(--font-weight-semibold);
    }

.ai-history-points[b-q5lv73xlv9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.ai-history-point[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.3125rem;
}

.ai-history-point-marker[b-q5lv73xlv9] {
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 50%;
    background: rgba(160, 150, 135, 0.45);
    flex-shrink: 0;
    margin-top: 0.3125rem;
}

.ai-history-point-text[b-q5lv73xlv9] {
    font-size: var(--text-xs);
    color: var(--ink-4);
    line-height: 1.4;
    font-weight: 400;
}

    .ai-history-point-text strong[b-q5lv73xlv9] {
        font-weight: var(--font-weight-semibold);
        color: var(--ink-3);
    }

.ai-history-rationale[b-q5lv73xlv9] {
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--ink-5);
    line-height: 1.45;
    margin-bottom: 0.375rem;
}

.ai-history-detail[b-q5lv73xlv9] {
    padding: 0 0.75rem 0.5rem 2.375rem;
}

.ai-history-card.collapsed .ai-history-detail[b-q5lv73xlv9] {
    display: none;
}

.ai-history-card.expanded .ai-history-detail[b-q5lv73xlv9] {
    display: block;
    animation: fadeIn-b-q5lv73xlv9 0.25s ease both;
}

.ai-history-footer[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
    border-top: 1px solid rgba(200, 195, 187, 0.15);
    background: rgba(245, 243, 240, 0.5);
}

.ai-history-card.collapsed .ai-history-footer[b-q5lv73xlv9] {
    display: none;
}

.ai-history-card.expanded .ai-history-footer[b-q5lv73xlv9] {
    display: flex;
}

.ai-history-recency[b-q5lv73xlv9] {
    font-size: var(--text-2xs);
    color: #9ca3af;
    font-weight: 500;
}

.ct-user-selections[b-q5lv73xlv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.ct-user-selection-badge[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    background: rgba(80, 70, 55, 0.04);
    border: 1px solid rgba(80, 70, 55, 0.08);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--ink-4);
    letter-spacing: 0.01em;
}

.ct-vote-indicator[b-q5lv73xlv9] {
    font-size: var(--text-2xs);
    margin-left: 0.25rem;
}

.ct-vote--up[b-q5lv73xlv9] {
    color: #16a34a;
}

.ct-vote--down[b-q5lv73xlv9] {
    color: #9ca3af;
}

.mobile-context-hint[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0 0.75rem 0.75rem;
    font-family: var(--font);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    color: var(--ink-5);
    background: var(--surface);
    border: 1px solid var(--border-lt);
    border-radius: var(--radius-full);
}

    .mobile-context-hint i[b-q5lv73xlv9] {
        font-size: var(--text-xs);
        color: var(--ink-5);
        flex-shrink: 0;
    }

    .mobile-context-hint .hint-dismiss[b-q5lv73xlv9] {
        appearance: none;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0.25rem;
        margin-left: auto;
        color: var(--ink-6);
        font-size: var(--text-xs);
        line-height: 1;
    }

        .mobile-context-hint .hint-dismiss:hover[b-q5lv73xlv9] {
            color: var(--ink-4);
        }

.ar[b-q5lv73xlv9] {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    animation: settleIn-b-q5lv73xlv9 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ar-en-followup[b-q5lv73xlv9] {
    margin-top: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid rgba(180, 170, 155, 0.55);
    background: rgba(80, 70, 55, 0.025);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
    font-style: italic;
    line-height: 1.55;
}

/* The card is sized by its content and grows as the turn lands: the text
   reveals character by character, and every later part (result rows, the
   milestone, recap, verdict, proposal, question, chips, votes) grows in
   through .ar-grow — no floor, no snap. */
/* ═══ The card's surface ═══
   The one place in the chat that carries a tint: a cool lavender in the
   family of the viewer's dark slate header, so the two read as one
   product. Pre-framed it is barely there; framed it deepens — the phase
   is visible at a glance without a label. Everything else in the stream
   stays on the warm paper. The desk (.ib) continues the card's colour
   downward in both states so card and desk read as one control. */
.ar-body[b-q5lv73xlv9] {
    --card-top: #fbfaff;
    --card-bottom: #f7f5fd;
    --card-line: rgba(118, 104, 160, 0.20);
    --card-rule: rgba(96, 82, 144, 0.16);
    position: relative;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
    border: 1px solid var(--card-line);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.625rem 2rem 1.125rem 2rem;
    box-shadow: 0 -1px 3px rgba(60, 50, 90, 0.03), 0 2px 10px rgba(60, 50, 90, 0.04), 0 8px 24px rgba(60, 50, 90, 0.03);
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ Growth ═══
   Anything that mounts into the card mid-turn arrives through this wrapper:
   the grid track animates from 0fr to 1fr, so an auto-height block unfolds
   instead of snapping in; the clip lifts only when the unfold is complete. */
.ar-grow[b-q5lv73xlv9] {
    display: grid;
    grid-template-rows: 1fr;
    overflow: visible;
    animation: arGrow-b-q5lv73xlv9 0.5s cubic-bezier(0.16, 1, 0.3, 1) both, arGrowClip-b-q5lv73xlv9 0.5s step-end both;
}

    .ar-grow > *[b-q5lv73xlv9] {
        min-height: 0;
    }

@keyframes arGrow-b-q5lv73xlv9 {
    from {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    to {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

@keyframes arGrowClip-b-q5lv73xlv9 {
    from {
        overflow: hidden;
    }

    to {
        overflow: visible;
    }
}

@property --ba {
    syntax: '<angle>';
    initial-value: 0turn;
    inherits: false;
}

/* The one ambient signal while the response is out: a slow, low-contrast
   sweep on the card's own border. Everything else that moved during the
   wait (desk pulse, separator sweep, gauge breath, cursor) is retired —
   progress is narrated in the card, in the place each result will land. */
.ar--thinking .ar-body[b-q5lv73xlv9] {
    border: 1px solid transparent;
    border-bottom: none;
    background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%) padding-box, conic-gradient(from var(--ba, 0turn), rgba(240, 12, 113, 0.42) 0%, rgba(240, 12, 113, 0.1) 15%, var(--card-line) 35%, var(--card-line) 65%, rgba(240, 12, 113, 0.1) 85%, rgba(240, 12, 113, 0.42) 100%) border-box;
    animation: rBorder-b-q5lv73xlv9 3.2s linear infinite;
}

@keyframes rBorder-b-q5lv73xlv9 {
    to {
        --ba: 1turn;
    }
}

/* ═══ Turn line ═══
   One line at the top of the card. While the response is out it carries
   the working copy (and the breathing dot); the moment the tagline lands
   it becomes the tagline — same line, same place, no second indicator. */
.ar-turnline[b-q5lv73xlv9] {
    min-height: 1.4625rem;
    margin-bottom: 0.5rem;
}

.ar-turnline--working[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
    letter-spacing: -0.015em;
    line-height: 1.3;
    animation: fadeInSmooth-b-q5lv73xlv9 0.3s ease both;
}

.ar-tagline[b-q5lv73xlv9] {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.026em;
    line-height: 1.3;
    max-width: 60ch;
    animation: fadeInSmooth-b-q5lv73xlv9 0.35s ease both;
}

/* The breathing dot — the only motion any working line carries. */
.ar-dot[b-q5lv73xlv9] {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: arDotBreathe-b-q5lv73xlv9 1.8s ease-in-out infinite;
}

@keyframes arDotBreathe-b-q5lv73xlv9 {
    0%, 100% {
        opacity: 0.45;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.ar-content[b-q5lv73xlv9] {
    transition: opacity 0.2s ease;
}

/* Reading type: regular weight, a generous line, and a measure — the
   card is wide, the text column is not. */
.ar-text[b-q5lv73xlv9] {
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.62;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.006em;
    max-width: 66ch;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Rendered whole by the server, hidden for the one frame before the
   browser takes over the text node and reveals it word by word. */
.ar-text--pending[b-q5lv73xlv9] {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* ═══ The slot ═══
   Where the question will land. Until it does, the slot narrates what is
   still out — in the order things arrive: status, milestone, recap, the
   Judge, a proposal, then the question itself. */
.ar-slot[b-q5lv73xlv9] {
    position: relative;
}

/* A row keeps its height while its status becomes its result: nothing
   above or below it moves when the copy changes. */
.ar-status-row[b-q5lv73xlv9] {
    min-height: 1.3125rem;
    margin-top: 1.25rem;
}

.ar-status[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ink-3);
    animation: fadeInSmooth-b-q5lv73xlv9 0.3s ease both;
}

.ar-status--working[b-q5lv73xlv9] {
    font-weight: var(--font-weight-medium);
}

.ar-status--result[b-q5lv73xlv9] {
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
}

    .ar-status--result .ar-dot[b-q5lv73xlv9] {
        animation: none;
        opacity: 1;
    }

.ar-status--judge[b-q5lv73xlv9] {
    font-size: 0.875rem;
}

.ar-recap[b-q5lv73xlv9] {
    min-height: 1.3125rem; /* the composing line and the text share this box */
    margin-top: 1.25rem;
}

/* The Judge's line: grade and crux, one row, opens the scorecard. */
.ar-verdict[b-q5lv73xlv9] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    width: 100%;
    margin-top: 0;
    padding: 0.625rem 0.875rem;
    background: rgba(96, 82, 144, 0.045);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-lg);
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .ar-verdict:hover[b-q5lv73xlv9] {
        background: rgba(96, 82, 144, 0.075);
        border-color: rgba(118, 104, 160, 0.34);
    }

    .ar-verdict:focus-visible[b-q5lv73xlv9] {
        outline: 2px solid rgba(240, 12, 113, 0.45);
        outline-offset: 2px;
    }

.ar-verdict-label[b-q5lv73xlv9] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex-shrink: 0;
}

.ar-verdict-grade[b-q5lv73xlv9] {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.ar-verdict-crux[b-q5lv73xlv9] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ink-2);
    flex: 1;
    min-width: 0;
}

/* A framer proposal on a framed idea: held, never applied silently. */
.ar-proposal[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 0.875rem;
    margin-top: 1.25rem;
    padding: 0.75rem 0.875rem;
    background: rgba(240, 12, 113, 0.04);
    border: 1px solid rgba(240, 12, 113, 0.16);
    border-radius: var(--radius-lg);
}

.ar-proposal-text[b-q5lv73xlv9] {
    flex: 1;
    min-width: 12rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ink-2);
}

    .ar-proposal-text strong[b-q5lv73xlv9] {
        color: var(--ink);
        font-weight: var(--font-weight-semibold);
    }

.ar-proposal-actions[b-q5lv73xlv9] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}


.ec--skeleton[b-q5lv73xlv9] {
    --rot: 0deg;
    cursor: default;
    pointer-events: none;
    background: rgba(80, 70, 55, 0.025);
    border-color: rgba(200, 195, 187, 0.32);
    box-shadow: none;
    animation: ecSkeletonEnter-b-q5lv73xlv9 0.32s cubic-bezier(0.16, 1, 0.3, 1) both, ecSkeletonPulse-b-q5lv73xlv9 1.6s ease-in-out 0.32s infinite;
}

.ec-skel-line[b-q5lv73xlv9] {
    display: block;
    height: 0.5rem;
    background: rgba(80, 70, 55, 0.085);
    border-radius: 0.25rem;
    margin: 0.1875rem 0;
}

.ec-skel-line--label[b-q5lv73xlv9] {
    width: 32%;
    height: 0.4375rem;
    margin-bottom: 0.4375rem;
    background: rgba(80, 70, 55, 0.1);
}

.ec-skel-line--narrow[b-q5lv73xlv9] {
    width: 68%;
}

@keyframes ecSkeletonEnter-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ecSkeletonPulse-b-q5lv73xlv9 {
    0%, 100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}

@keyframes arBusyShimmer-b-q5lv73xlv9 {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

/* The header and its stripes share one positioned box: stripes hang
   from the header's lower edge, so they never cover its actions. */
.ar-head[b-q5lv73xlv9] {
    position: relative;
}

.ar-stripes[b-q5lv73xlv9] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    pointer-events: none;
    max-width: 17.5rem;
}

/* On the desk the header carries the inset; the stripes follow it. */
.ib > .ar-head > .ar-stripes[b-q5lv73xlv9] {
    right: 1.75rem;
}

.ar-stripe[b-q5lv73xlv9] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.625rem 0.625rem 0.75rem;
    background: rgba(255, 253, 248, 0.92);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    border: 1px solid rgba(180, 160, 130, 0.28);
    border-radius: 0.5rem;
    box-shadow: 0 1px 0 rgba(180, 160, 130, 0.15), 0 4px 12px rgba(80, 60, 40, 0.06), 0 12px 28px rgba(80, 60, 40, 0.05);
    animation: stripeIn-b-q5lv73xlv9 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ar-stripe-icon[b-q5lv73xlv9] {
    font-size: 0.75rem;
    color: var(--ink-5);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.ar-stripe-body[b-q5lv73xlv9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ar-stripe-headline[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    color: var(--ink-2);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.ar-stripe-detail[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    color: var(--ink-4);
    font-style: italic;
    line-height: 1.45;
    margin-top: 0.1875rem;
}

.ar-stripe-x[b-q5lv73xlv9] {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink-6);
    font-size: 0.5625rem;
    padding: 0.1875rem 0.3125rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

    .ar-stripe-x:hover[b-q5lv73xlv9] {
        color: var(--ink-3);
        background: rgba(80, 60, 40, 0.06);
    }

.ar-stripe--reflection .ar-stripe-icon[b-q5lv73xlv9] {
    color: var(--ink-4);
}

.ar-stripe--progress .ar-stripe-icon[b-q5lv73xlv9] {
    color: rgba(80, 100, 130, 0.85);
}

.ar-stripe--maturity[b-q5lv73xlv9] {
    background: linear-gradient(180deg, rgba(255, 250, 252, 0.94) 0%, rgba(253, 244, 248, 0.94) 100%);
}

    .ar-stripe--maturity .ar-stripe-icon[b-q5lv73xlv9] {
        color: var(--accent);
    }

    .ar-stripe--maturity .ar-stripe-headline[b-q5lv73xlv9] {
        color: var(--ink);
    }

.ar-stripe--insight[b-q5lv73xlv9] {
    background: linear-gradient(180deg, rgba(255, 251, 240, 0.94) 0%, rgba(253, 246, 226, 0.94) 100%);
}

    .ar-stripe--insight .ar-stripe-icon[b-q5lv73xlv9] {
        color: rgba(180, 130, 30, 0.95);
    }

.ar-stripe--judge[b-q5lv73xlv9] {
    background: linear-gradient(180deg, rgba(255, 250, 252, 0.94) 0%, rgba(253, 244, 248, 0.94) 100%);
}

    .ar-stripe--judge .ar-stripe-icon[b-q5lv73xlv9] {
        color: var(--accent);
    }

    .ar-stripe--judge .ar-stripe-headline[b-q5lv73xlv9] {
        font-weight: var(--font-weight-semibold);
        color: var(--ink);
    }

.ar-stripe--error[b-q5lv73xlv9] {
    border-left-color: var(--color-error);
    background: rgba(234, 67, 53, 0.045);
}

    .ar-stripe--error .ar-stripe-icon[b-q5lv73xlv9] {
        color: var(--color-error);
    }

    .ar-stripe--error .ar-stripe-headline[b-q5lv73xlv9] {
        color: #b91c1c;
    }

@keyframes stripeIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ar-enrichment[b-q5lv73xlv9] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
}

    /* The one rule in the card: it separates the response from the question. */
    .ar-enrichment[b-q5lv73xlv9]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--card-rule);
    }

.ar-enrichment--inline[b-q5lv73xlv9] {
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.ar-en-badge[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--ink-5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    animation: fadeInSmooth-b-q5lv73xlv9 0.3s ease 0.02s both;
}

    .ar-en-badge i[b-q5lv73xlv9] {
        display: none;
    }

.ar-en-header[b-q5lv73xlv9] {
    display: block;
    margin-bottom: 0.875rem;
    animation: fadeInSmooth-b-q5lv73xlv9 0.35s ease 0.05s both;
}

/* The question is spoken, not announced: a notch above the reading
   type, semibold, a measure of its own. It carries the question, the
   invitation and the floor line alike. */
.ar-en-title[b-q5lv73xlv9] {
    display: block;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.012em;
    max-width: 62ch;
}

.ar-en-rationale[b-q5lv73xlv9] {
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: var(--font-weight-regular);
    color: var(--ink-3);
    line-height: 1.55;
    letter-spacing: -0.005em;
    margin-top: 0.5rem;
    margin-bottom: 1.125rem;
    padding-left: 0;
    animation: fadeInSmooth-b-q5lv73xlv9 0.35s ease 0.12s both;
}

.ar-en-preparing[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    animation: fadeInSmooth-b-q5lv73xlv9 0.25s ease both;
}

.ar-en-preparing-dot[b-q5lv73xlv9] {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: arDotBreathe-b-q5lv73xlv9 1.8s ease-in-out infinite;
}

.ar-en-preparing-text[b-q5lv73xlv9] {
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.005em;
    background: linear-gradient(90deg, rgba(100, 90, 78, 0.55) 0%, rgba(100, 90, 78, 0.55) 40%, rgba(40, 36, 32, 0.9) 50%, rgba(100, 90, 78, 0.55) 60%, rgba(100, 90, 78, 0.55) 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: arBusyShimmer-b-q5lv73xlv9 2.4s linear infinite;
}

.ar-en-pick-hint[b-q5lv73xlv9] {
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--ink-5);
    line-height: 1.4;
    letter-spacing: 0.005em;
    margin-bottom: 0.875rem;
    animation: fadeInSmooth-b-q5lv73xlv9 0.35s ease 0.15s both;
}

.ar-grid[b-q5lv73xlv9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
    position: relative;
    animation: fadeIn-b-q5lv73xlv9 0.3s ease 0.2s both;
}

.ar-points[b-q5lv73xlv9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-left: 0;
}

.ar-point[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.ar-point-marker[b-q5lv73xlv9] {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--ink-6);
    flex-shrink: 0;
    margin-top: 0.375rem;
}

.ar-points--challenge .ar-point-marker[b-q5lv73xlv9] {
    background: #f59e0b;
}

.ar-points--inform .ar-point-marker[b-q5lv73xlv9] {
    background: #3b82f6;
}

.ar-point-body[b-q5lv73xlv9] {
    display: inline;
    font-size: var(--text-md);
    color: var(--ink-2);
    line-height: 1.5;
}

.ar-point-label[b-q5lv73xlv9] {
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
}

.ar-point-detail[b-q5lv73xlv9] {
    font-weight: var(--font-weight-regular);
}

.ar-meta[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(160, 150, 135, 0.18);
    flex-wrap: wrap;
    row-gap: 0.3125rem;
}

.ar-actions-row[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.ar-action[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    height: 1.375rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(200, 195, 187, 0.4);
    background: rgba(255, 254, 252, 0.9);
    color: var(--ink-4);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.005em;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .ar-action i[b-q5lv73xlv9] {
        font-size: 0.5rem;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .ar-action:hover[b-q5lv73xlv9] {
        border-color: rgba(80, 70, 55, 0.25);
        color: var(--ink-2);
        background: rgba(252, 250, 247, 0.9);
        box-shadow: 0 1px 3px rgba(80, 70, 55, 0.08);
        transform: translateY(-0.5px);
    }

        .ar-action:hover i[b-q5lv73xlv9] {
            opacity: 1;
        }

    .ar-action:active[b-q5lv73xlv9] {
        transform: scale(0.97);
        box-shadow: none;
    }

    .ar-action.premium[b-q5lv73xlv9] {
        border-color: rgba(140, 130, 115, 0.2);
        color: #6b6055;
    }

        .ar-action.premium:hover[b-q5lv73xlv9] {
            border-color: rgba(140, 130, 115, 0.3);
            background: rgba(80, 70, 55, 0.025);
            color: #6b6055;
        }

    .ar-action.ghost[b-q5lv73xlv9] {
        border-color: transparent;
        background: transparent;
        color: var(--ink-5);
        box-shadow: none;
    }

        .ar-action.ghost:hover[b-q5lv73xlv9] {
            border-color: rgba(180, 160, 130, 0.3);
            background: rgba(80, 70, 55, 0.02);
            color: var(--ink-3);
            box-shadow: none;
        }

        .ar-action.ghost i[b-q5lv73xlv9] {
            opacity: 0.55;
        }

        .ar-action.ghost:hover i[b-q5lv73xlv9] {
            opacity: 0.85;
        }

    .ar-action.busy[b-q5lv73xlv9] {
        opacity: 0.7;
        pointer-events: none;
        cursor: default;
    }

    .ar-action:disabled[b-q5lv73xlv9],
    .ar-action[disabled][b-q5lv73xlv9] {
        opacity: 0.4;
        pointer-events: none;
    }

.ar-action-spin[b-q5lv73xlv9] {
    width: 0.625rem;
    height: 0.625rem;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    animation: spin-b-q5lv73xlv9 0.6s linear infinite;
    opacity: 0.6;
}

/* Prominent actions — every chip under a question ("Inspire me", and the
   dev-only advisory chips when enabled) and the proposal's Apply. A real
   button: readable size, the accent held to a tint and the icon, dark text
   for contrast. The small generic .ar-action pill remains for anything
   secondary; the ghost variant below is the quiet partner (Not now). */
.ar-action.ar-action--prominent[b-q5lv73xlv9] {
    height: 2rem;
    padding: 0 0.875rem 0 0.75rem;
    gap: 0.5rem;
    border: 1px solid rgba(240, 12, 113, 0.28);
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.09), rgba(240, 12, 113, 0.035));
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(80, 60, 40, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .ar-action.ar-action--prominent i[b-q5lv73xlv9] {
        font-size: 0.8125rem;
        color: var(--accent);
        opacity: 1;
    }

    .ar-action.ar-action--prominent:hover[b-q5lv73xlv9] {
        border-color: rgba(240, 12, 113, 0.45);
        background: linear-gradient(135deg, rgba(240, 12, 113, 0.14), rgba(240, 12, 113, 0.06));
        color: var(--ink);
        box-shadow: 0 2px 8px rgba(240, 12, 113, 0.14);
        transform: translateY(-1px);
    }

    .ar-action.ar-action--prominent:active[b-q5lv73xlv9] {
        transform: translateY(0) scale(0.98);
        box-shadow: none;
    }

    .ar-action.ar-action--prominent:focus-visible[b-q5lv73xlv9] {
        outline: 2px solid rgba(240, 12, 113, 0.45);
        outline-offset: 2px;
    }

    /* The quiet partner at the same size: no tint, no border until hover. */
    .ar-action.ar-action--prominent.ghost[b-q5lv73xlv9] {
        border-color: transparent;
        background: transparent;
        color: var(--ink-3);
        box-shadow: none;
    }

        .ar-action.ar-action--prominent.ghost:hover[b-q5lv73xlv9] {
            border-color: rgba(180, 160, 130, 0.35);
            background: rgba(80, 70, 55, 0.03);
            color: var(--ink);
            box-shadow: none;
            transform: none;
        }

.ar-vote[b-q5lv73xlv9] {
    display: flex;
    gap: 0.1875rem;
    margin-left: auto;
}

.ar-vote-btn[b-q5lv73xlv9] {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

    .ar-vote-btn:hover[b-q5lv73xlv9] {
        color: var(--ink-3);
        background: rgba(80, 70, 55, 0.05);
    }

    .ar-vote-btn.up[b-q5lv73xlv9] {
        color: var(--accent);
    }

        .ar-vote-btn.up:hover[b-q5lv73xlv9] {
            background: rgba(240, 12, 113, 0.06);
        }

    .ar-vote-btn.dn[b-q5lv73xlv9] {
        color: var(--ink-4);
    }

/* The limit / expiry notice — inside the desk, above the input it closes,
   on the input panel's own inset. A different surface on purpose: a pale
   amber, the one warm note in the control, so it reads as a notice and
   not as more of the conversation. The door is a dark button — a plan
   action, not one of Ainna's pink moves. */
.ib-limit[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.25rem 1rem 0.75rem;
    padding: 1rem 1.375rem;
    background: linear-gradient(180deg, #fff9e6 0%, #fdf4d6 100%);
    border: 1px solid rgba(196, 150, 40, 0.28);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(120, 90, 20, 0.04);
}

.ib-limit-icon[b-q5lv73xlv9] {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 150, 40, 0.16);
    color: #7a5a10;
    font-size: 0.75rem;
}

.ib-limit-text[b-q5lv73xlv9] {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ib-limit-headline[b-q5lv73xlv9] {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    letter-spacing: -0.012em;
    line-height: 1.35;
}

.ib-limit-sub[b-q5lv73xlv9] {
    font-size: 0.8125rem;
    color: var(--ink-3);
    line-height: 1.35;
}

.ib-limit .ar-cta[b-q5lv73xlv9] {
    flex-shrink: 0;
    height: 2rem;
    padding: 0 0.875rem;
    gap: 0.4rem;
    font-size: var(--text-xs);
    background: var(--ink);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 16, 30, 0.18);
}

    .ib-limit .ar-cta i[b-q5lv73xlv9] {
        font-size: 0.7rem;
        color: #ffd66e;
    }

    .ib-limit .ar-cta:hover[b-q5lv73xlv9] {
        background: #000000;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(20, 16, 30, 0.22);
    }

    .ib-limit .ar-cta:active[b-q5lv73xlv9] {
        background: var(--ink);
        transform: scale(0.98);
    }

@media (max-width: 640px) {
    .ib-limit[b-q5lv73xlv9] {
        flex-wrap: wrap;
    }
}

.ar-headline[b-q5lv73xlv9] {
    font-size: 0.9375rem;
    font-weight: 450;
    color: var(--ink-3);
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin-bottom: 0.625rem;
}

.ar-notice[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.ar-notice-icon[b-q5lv73xlv9] {
    color: var(--ink-5);
    font-size: var(--text-sm);
    flex-shrink: 0;
    line-height: 1;
    width: 1rem;
    text-align: center;
    margin-top: 0.15rem;
}

.ar-notice-text[b-q5lv73xlv9] {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-4);
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.ar--expired .ar-headline[b-q5lv73xlv9] {
    font-size: var(--text-lg);
}

.ar-actions[b-q5lv73xlv9] {
    margin-top: 0.625rem;
}

.ar-cta[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    height: 1.375rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: linear-gradient(135deg, #f00c71, #d4085f);
    color: #ffffff;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.005em;
    transition: all 0.15s ease;
    box-shadow: 0 1px 4px rgba(240, 12, 113, 0.2);
}

    .ar-cta i[b-q5lv73xlv9] {
        font-size: 0.5rem;
        color: #ffffff;
    }

    .ar-cta:hover[b-q5lv73xlv9] {
        background: linear-gradient(135deg, #d4085f, #b8064f);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(240, 12, 113, 0.22);
    }

    .ar-cta:active[b-q5lv73xlv9] {
        background: linear-gradient(135deg, #b8064f, #9a0542);
        transform: scale(0.97);
    }

.ib[b-q5lv73xlv9] {
    flex-shrink: 0;
    background: linear-gradient(180deg, #f7f5fd 0%, #f4f2fb 100%);
    border: 1px solid rgba(118, 104, 160, 0.20);
    border-top: 1px solid transparent; /* the seam pixel stays so the cap can melt its color in */
    margin: 0 1rem 0.5rem 1rem;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: 0 2px 10px rgba(60, 50, 90, 0.04), 0 6px 20px rgba(60, 50, 90, 0.03);
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-top-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s ease;
    position: relative;
}

.ib-header[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6875rem 1.75rem 0.375rem 1.75rem; /* desk inset matches the card body; per-breakpoint below */
    min-height: 1.625rem;
    /* Entrance only — no fill mode. A retained transform would make the
       header the containing block for the popover's fixed backdrop. */
    animation: ibHeaderIn-b-q5lv73xlv9 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ib-idea-label[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--ink-6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: 100%;
    min-width: 0;
}

    .ib-idea-label i[b-q5lv73xlv9] {
        font-size: 0.5rem;
        color: var(--ink-7);
        flex-shrink: 0;
    }

.ib-idea-left[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ib-idea-name[b-q5lv73xlv9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.6875rem;
    color: var(--ink-4);
    letter-spacing: 0.1em;
}

.ib-idea-sep[b-q5lv73xlv9] {
    display: inline-block;
    width: 1px;
    height: 0.75rem;
    background: rgba(80, 60, 40, 0.18);
    flex-shrink: 0;
}

.ib-idea-right[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex-shrink: 0;
}

.ib-idea-progress[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0;
}

.ib-idea-progress-bar[b-q5lv73xlv9] {
    display: inline-block;
    width: 3rem;
    height: 0.25rem;
    background: rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.ib-idea-progress-fill[b-q5lv73xlv9] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(240, 12, 113, 0.55), rgba(240, 12, 113, 0.85));
    border-radius: inherit;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ib-idea-progress-num[b-q5lv73xlv9] {
    color: var(--ink-5);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-2xs);
}

.ib-export-trigger[b-q5lv73xlv9] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--ink-5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

    .ib-export-trigger:hover:not(:disabled)[b-q5lv73xlv9] {
        color: var(--accent);
        background: rgba(240, 12, 113, 0.06);
    }

    .ib-export-trigger:disabled[b-q5lv73xlv9] {
        cursor: default;
    }

        .ib-export-trigger:disabled:not(.busy):not(.success)[b-q5lv73xlv9] {
            opacity: 0.55;
        }

    .ib-export-trigger i[b-q5lv73xlv9] {
        font-size: 0.75rem;
    }

    .ib-export-trigger.busy[b-q5lv73xlv9] {
        color: var(--accent);
        opacity: 1;
        cursor: default;
    }

.ib-export-spinner[b-q5lv73xlv9] {
    animation: ibExportSpin-b-q5lv73xlv9 0.9s linear infinite;
}

@keyframes ibExportSpin-b-q5lv73xlv9 {
    to {
        transform: rotate(360deg);
    }
}

.ib-export-trigger.success[b-q5lv73xlv9] {
    color: var(--accent);
    background: rgba(240, 12, 113, 0.10);
    opacity: 1;
    cursor: default;
    animation: ibExportSuccess-b-q5lv73xlv9 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ibExportSuccess-b-q5lv73xlv9 {
    from {
        opacity: 0.6;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ib-reflection[b-q5lv73xlv9] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.ib-reflection-trigger[b-q5lv73xlv9] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
    border-radius: var(--radius-full);
    color: var(--ink-5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.15s ease, background 0.15s ease;
    position: relative;
    font-family: var(--font-family-primary);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

    .ib-reflection-trigger:hover[b-q5lv73xlv9] {
        color: var(--accent);
        background: rgba(240, 12, 113, 0.06);
    }

    .ib-reflection-trigger i[b-q5lv73xlv9] {
        font-size: 0.625rem;
    }

.ib-reflection-count[b-q5lv73xlv9] {
    line-height: 1;
}

.ib-reflection-trigger.pulse[b-q5lv73xlv9] {
    color: var(--accent);
}

    .ib-reflection-trigger.pulse[b-q5lv73xlv9]::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: var(--radius-full);
        background: rgba(240, 12, 113, 0.14);
        animation: ibReflectionPulse-b-q5lv73xlv9 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2;
        pointer-events: none;
    }

@keyframes ibReflectionPulse-b-q5lv73xlv9 {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }

    60% {
        opacity: 0;
        transform: scale(1.6);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.ib-reflection-backdrop[b-q5lv73xlv9] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 90;
}

.ib-reflection-popover[b-q5lv73xlv9] {
    position: absolute;
    bottom: calc(100% + 0.625rem);
    left: 0;
    right: auto;
    z-index: 100;
    width: max-content;
    max-width: min(22rem, calc(100vw - 1.5rem));
    background: linear-gradient(180deg, #faf4ea 0%, #f6eede 100%);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem 1rem;
    box-shadow: 0 1px 0 rgba(180, 160, 130, 0.18), 0 4px 12px rgba(80, 60, 40, 0.08), 0 16px 32px rgba(80, 60, 40, 0.08);
    animation: ibReflectionReveal-b-q5lv73xlv9 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-regular);
    max-height: 60vh;
    overflow-y: auto;
}

@keyframes ibReflectionReveal-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ib-reflection-title[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 0.4375rem;
    text-transform: none;
}

.ib-reflection-text[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    color: var(--ink-3);
    line-height: 1.55;
    letter-spacing: -0.005em;
    text-transform: none;
}

.ib-separator[b-q5lv73xlv9] {
    height: 1px;
    width: auto;
    margin: 0.75rem 0 0.25rem;
    background: rgba(96, 82, 144, 0.10);
}

.ib-badge-strip[b-q5lv73xlv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    padding: 0.625rem 1.25rem 0 2.5rem;
    min-height: 0;
    transition: all 0.2s ease;
}

    .ib-badge-strip.empty[b-q5lv73xlv9] {
        padding: 0;
        height: 0;
        overflow: hidden;
    }

.bdg[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.4375rem;
    background: rgba(240, 12, 113, 0.04);
    border: 1px solid rgba(240, 12, 113, 0.12);
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #d4085f;
    animation: badgeIn-b-q5lv73xlv9 0.2s ease both;
}

.bdg-x[b-q5lv73xlv9] {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: rgba(212, 8, 95, 0.3);
    font-size: 0.4375rem;
    line-height: 1;
    transition: color 0.15s ease;
}

    .bdg-x:hover[b-q5lv73xlv9] {
        color: #d4085f;
    }

@keyframes badgeIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ib-input-row[b-q5lv73xlv9] {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem 0.625rem 2.5rem;
    position: relative;
}

/* While Ainna works the input stays open for composing — the user's own
   text is never dimmed. Only the placeholder softens, and the send button
   is disabled until the turn is Ready. */
.ib--busy .ib-input-row textarea[b-q5lv73xlv9]::placeholder {
    color: var(--ink-3);
    opacity: 0.7;
    animation: none;
}

.ib-input-row textarea[b-q5lv73xlv9] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 1rem;
    font-family: var(--font-family-primary);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
    min-height: 5rem;
    max-height: 12rem;
    resize: none;
    padding: 0;
    caret-color: #d4085f;
}

    .ib-input-row textarea[b-q5lv73xlv9]::placeholder {
        color: var(--ink-6);
        font-weight: 400;
        background: linear-gradient(90deg, var(--ink-6) 40%, var(--ink-5) 50%, var(--ink-6) 60%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: placeholderShimmer-b-q5lv73xlv9 4s ease-in-out infinite;
    }

    .ib-input-row textarea:focus[b-q5lv73xlv9]::placeholder {
        animation: none;
        -webkit-text-fill-color: var(--ink-7);
    }

    .ib-input-row textarea:disabled[b-q5lv73xlv9]::placeholder {
        animation: none;
        -webkit-text-fill-color: var(--ink-7);
    }

@keyframes placeholderShimmer-b-q5lv73xlv9 {
    0%, 100% {
        background-position: 200% center;
    }

    50% {
        background-position: -200% center;
    }
}

.ib--welcome .ib-input-row textarea[b-q5lv73xlv9] {
    min-height: 8rem;
}

.ib--loading .ib-input-row[b-q5lv73xlv9],
.ib--disabled .ib-input-row[b-q5lv73xlv9] {
    opacity: 0.5;
}

.ib-send[b-q5lv73xlv9] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, #f00c71, #d4085f);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(240, 12, 113, 0.16);
    transition: all 0.15s ease;
}

    .ib-send:hover[b-q5lv73xlv9] {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(240, 12, 113, 0.20);
    }

    .ib-send:active[b-q5lv73xlv9] {
        transform: scale(0.95);
    }

    .ib-send:disabled[b-q5lv73xlv9] {
        opacity: 0.3;
        cursor: not-allowed;
        box-shadow: none;
    }

        .ib-send:disabled:hover[b-q5lv73xlv9] {
            transform: none;
        }

    .ib-send svg[b-q5lv73xlv9] {
        width: 14px;
        height: 14px;
    }

.ib-footer[b-q5lv73xlv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem 0.5rem 2.5rem;
}

.ib-hint[b-q5lv73xlv9] {
    font-size: var(--text-xs);
    color: var(--ink-5);
    font-weight: 450;
    letter-spacing: -0.005em;
    line-height: 1.4;
}

.ib-char-count[b-q5lv73xlv9] {
    font-size: var(--text-2xs);
    color: var(--ink-7);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    pointer-events: none;
}

    .ib-char-count.visible[b-q5lv73xlv9] {
        opacity: 1;
    }

    .ib-char-count.warning[b-q5lv73xlv9] {
        color: var(--danger);
        font-weight: 600;
    }

.ec[b-q5lv73xlv9] {
    --rot: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.125rem 1rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(180, 160, 130, 0.22);
    background: linear-gradient(180deg, #fefcf6 0%, #fcf8ed 100%);
    cursor: pointer;
    overflow: visible;
    transform: rotate(var(--rot));
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, background 0.18s ease;
    box-shadow: 0 1px 0 rgba(180, 160, 130, 0.15), 0 2px 6px rgba(80, 60, 40, 0.06), 0 8px 18px rgba(80, 60, 40, 0.04);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .ec:nth-child(1)[b-q5lv73xlv9], .ec:nth-child(5)[b-q5lv73xlv9] {
        --rot: -0.6deg;
    }

    .ec:nth-child(2)[b-q5lv73xlv9], .ec:nth-child(6)[b-q5lv73xlv9] {
        --rot: 0.5deg;
    }

    .ec:nth-child(3)[b-q5lv73xlv9], .ec:nth-child(7)[b-q5lv73xlv9] {
        --rot: -0.4deg;
    }

    .ec:nth-child(4)[b-q5lv73xlv9], .ec:nth-child(8)[b-q5lv73xlv9] {
        --rot: 0.7deg;
    }

.ec-tape[b-q5lv73xlv9] {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 26px;
    height: 7px;
    background: rgba(240, 12, 113, 0.16);
    border-radius: 1px;
    transform: translateX(-50%) rotate(-1.5deg);
    pointer-events: none;
}

.ec-check[b-q5lv73xlv9] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(240, 12, 113, 0.3);
}

.ec:hover[b-q5lv73xlv9] {
    transform: rotate(0deg) translateY(-2px);
    border-color: rgba(180, 160, 130, 0.32);
    background: linear-gradient(180deg, #fffdf7 0%, #fdfaef 100%);
    box-shadow: 0 1px 0 rgba(180, 160, 130, 0.18), 0 4px 10px rgba(80, 60, 40, 0.07), 0 12px 24px rgba(80, 60, 40, 0.06);
}

.ec:active[b-q5lv73xlv9] {
    transform: rotate(0deg) translateY(-1px) scale(0.985);
    box-shadow: 0 1px 0 rgba(180, 160, 130, 0.2), 0 2px 5px rgba(80, 60, 40, 0.06);
}

.ec.on[b-q5lv73xlv9] {
    --rot: 0deg;
    border-color: rgba(240, 12, 113, 0.45);
    border-width: 1.5px;
    background: linear-gradient(180deg, #fff5f9 0%, #fff0f5 100%);
    box-shadow: 0 1px 0 rgba(240, 12, 113, 0.12), 0 2px 6px rgba(240, 12, 113, 0.08), 0 8px 18px rgba(240, 12, 113, 0.06);
}

    .ec.on .ec-check[b-q5lv73xlv9] {
        opacity: 1;
        transform: scale(1);
    }

    .ec.on:hover[b-q5lv73xlv9] {
        transform: translateY(-2px);
        background: linear-gradient(180deg, #fff8fb 0%, #fff2f7 100%);
        box-shadow: 0 1px 0 rgba(240, 12, 113, 0.15), 0 4px 10px rgba(240, 12, 113, 0.1), 0 12px 24px rgba(240, 12, 113, 0.08);
    }

    .ec.on .ec-tape[b-q5lv73xlv9] {
        background: rgba(240, 12, 113, 0.32);
    }

.ec-label[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    padding-right: 2.25rem;
}

.ec-detail[b-q5lv73xlv9] {
    font-size: var(--text-sm);
    font-weight: 450;
    color: var(--ink-3);
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.ec.on .ec-label[b-q5lv73xlv9] {
    color: var(--ink);
}

.ec.on .ec-detail[b-q5lv73xlv9] {
    color: var(--ink-2);
}

.messages-container[b-q5lv73xlv9]::-webkit-scrollbar {
    display: none;
}

.scroll-indicator[b-q5lv73xlv9] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--background-primary);
    border: 1px solid rgba(200, 195, 187, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(226, 228, 232, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-5);
    font-size: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .scroll-indicator:hover[b-q5lv73xlv9] {
        color: var(--ink-2);
        border-color: rgba(80, 70, 55, 0.30);
        box-shadow: 0 4px 16px rgba(80, 70, 55, 0.10), 0 6px 24px rgba(80, 70, 55, 0.08), 0 0 0 1px rgba(80, 70, 55, 0.06);
        transform: translateX(-50%) scale(1.08);
    }

    .scroll-indicator:active[b-q5lv73xlv9] {
        transform: translateX(-50%) scale(0.95);
    }

    .scroll-indicator.visible[b-q5lv73xlv9] {
        opacity: 1;
        pointer-events: auto;
    }

.scroll-indicator--up[b-q5lv73xlv9] {
    top: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.6875rem;
    background: #ffffff;
    border: 1px solid rgba(180, 160, 130, 0.35);
    box-shadow: 0 4px 14px rgba(80, 60, 40, 0.14), 0 1px 3px rgba(80, 60, 40, 0.10);
    color: var(--ink);
}

    .scroll-indicator--up:hover[b-q5lv73xlv9] {
        border-color: rgba(240, 12, 113, 0.4);
    }

@keyframes fadeIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInSmooth-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes settleIn-b-q5lv73xlv9 {
    0% {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageSettle-b-q5lv73xlv9 {
    0% {
        opacity: 0;
        transform: translateY(0.625rem) translateX(0.15rem);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

.message-card--pending[b-q5lv73xlv9] {
    animation: messageSend-b-q5lv73xlv9 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes messageSend-b-q5lv73xlv9 {
    0% {
        opacity: 0;
        transform: translateY(1rem);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-q5lv73xlv9 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .message-card[b-q5lv73xlv9], .ai-history-card[b-q5lv73xlv9],
    .message-text-user[b-q5lv73xlv9], .message-recency[b-q5lv73xlv9],
    .ai-history-expand[b-q5lv73xlv9], .ai-history-expand i[b-q5lv73xlv9], .ai-history-recency[b-q5lv73xlv9],
    .welcome-hero[b-q5lv73xlv9],
    .ar[b-q5lv73xlv9], .ar-body[b-q5lv73xlv9], .ar-cta[b-q5lv73xlv9],
    .ib[b-q5lv73xlv9], .ib-send[b-q5lv73xlv9], .ib-separator[b-q5lv73xlv9],
    .ec[b-q5lv73xlv9], .ar-vote-btn[b-q5lv73xlv9], .ar-action[b-q5lv73xlv9], .ar-stripe-x[b-q5lv73xlv9], .bdg-x[b-q5lv73xlv9],
    .scroll-indicator[b-q5lv73xlv9] {
        transition: none;
    }

        .message-card[b-q5lv73xlv9],
        .ai-history-card[b-q5lv73xlv9],
        .welcome-hero[b-q5lv73xlv9],
        .ar[b-q5lv73xlv9],
        .ar-enrichment[b-q5lv73xlv9],
        .ar-en-header[b-q5lv73xlv9],
        .ar-en-rationale[b-q5lv73xlv9],
        .ar-grid[b-q5lv73xlv9],
        .ec--skeleton[b-q5lv73xlv9],
        .ar-stripe[b-q5lv73xlv9],
        .ib-header[b-q5lv73xlv9],
        .ib-reflection-popover[b-q5lv73xlv9],
        .message-card--pending[b-q5lv73xlv9],
        .ai-history-card.expanded .ai-history-tagline[b-q5lv73xlv9],
        .ai-history-card.expanded .ai-history-text[b-q5lv73xlv9],
        .ai-history-card.expanded .ai-history-chips[b-q5lv73xlv9],
        .ai-history-card.expanded .ai-history-detail[b-q5lv73xlv9],
        .ai-history-card.expanded .ai-history-footer[b-q5lv73xlv9],
        .ai-history-card--latest[b-q5lv73xlv9] {
            animation: none;
        }

            .ai-history-card.interactive[b-q5lv73xlv9] {
                transition: none;
            }

    .ar--thinking .ar-body[b-q5lv73xlv9] {
        animation: none;
        border: 1px solid rgba(200, 195, 187, 0.5);
    }

    .ar-grow[b-q5lv73xlv9],
    .ar-dot[b-q5lv73xlv9],
    .ar-turnline--working[b-q5lv73xlv9],
    .ar-tagline[b-q5lv73xlv9],
    .ar-status[b-q5lv73xlv9],
    .ar-en-preparing[b-q5lv73xlv9],
    .ar-en-preparing-dot[b-q5lv73xlv9],
    .ar-en-preparing-text[b-q5lv73xlv9],
    .ib-reflection-trigger.pulse[b-q5lv73xlv9]::before,
    .ib-export-spinner[b-q5lv73xlv9] {
        animation: none;
    }

    .ar-dot[b-q5lv73xlv9] {
        opacity: 1;
    }

    .ar-body[b-q5lv73xlv9] {
        transition: none;
    }

    .ar-en-preparing-text[b-q5lv73xlv9] {
        background: none;
        color: var(--ink-3);
        -webkit-text-fill-color: var(--ink-3);
    }

    .ec[b-q5lv73xlv9], .ec:hover[b-q5lv73xlv9], .ec.on[b-q5lv73xlv9], .ec.on:hover[b-q5lv73xlv9] {
        --rot: 0deg;
        transform: none;
    }

    .ec[b-q5lv73xlv9] {
        animation: none !important; /* the reveal is set inline per card; only !important outranks it */
    }

    .ec-check[b-q5lv73xlv9] {
        transition: opacity 0.18s ease;
    }

    .ec.on .ec-check[b-q5lv73xlv9] {
        transform: scale(1);
    }

    .bdg[b-q5lv73xlv9] {
        animation: none;
    }

    .ib-input-row textarea[b-q5lv73xlv9]::placeholder {
        animation: none;
    }
}

@media (min-width: 901px) and (max-width: 1600px) {
    .welcome-hero[b-q5lv73xlv9] {
        padding: 4rem 1.25rem 0.75rem 1rem;
    }

    .welcome-hero-content[b-q5lv73xlv9] {
        padding-left: 0;
    }

    .welcome-hero-title[b-q5lv73xlv9] {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
        margin-bottom: 1.375rem;
        min-height: 3.25rem;
        letter-spacing: -0.03em;
    }

    .chat-container[b-q5lv73xlv9] {
        padding: 0.5rem 0 0;
    }

    .message-card[b-q5lv73xlv9] {
        max-width: 78%;
    }

    .message-text-user[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .message-avatar[b-q5lv73xlv9] {
        height: 1.5rem;
        width: 1.5rem;
    }

    .message-main[b-q5lv73xlv9] {
        padding: 0.5rem 0.8125rem;
        gap: 0.5rem;
    }

    .message-footer[b-q5lv73xlv9] {
        padding: 0.3125rem 0.8125rem;
    }

    .ai-history-card[b-q5lv73xlv9] {
        max-width: 78%;
    }

    .ai-history-main[b-q5lv73xlv9] {
        padding: 0.5rem 1.75rem 0.375rem 0.625rem;
        gap: 0.375rem;
    }

    .ai-history-avatar[b-q5lv73xlv9] {
        width: 1.125rem;
        height: 1.125rem;
    }

    .ai-history-tagline[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .ai-history-question-text[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .ai-history-preview-tagline[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .ai-history-preview-question[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .ai-history-preview-arrow[b-q5lv73xlv9] {
        font-size: 0.3125rem;
        margin: 0 0.3125rem;
    }

    .ai-history-expand[b-q5lv73xlv9] {
        top: 0.375rem;
        right: 0.375rem;
        width: 1.125rem;
        height: 1.125rem;
    }

    .ai-history-detail[b-q5lv73xlv9] {
        padding-left: 2rem;
    }

    .ai-history-footer[b-q5lv73xlv9] {
        padding: 0.1875rem 0.625rem;
    }

    .ai-history-recency[b-q5lv73xlv9] {
        font-size: 0.5rem;
    }

    .ct-user-selection-badge[b-q5lv73xlv9] {
        font-size: 0.5rem;
    }

    .ar-body[b-q5lv73xlv9] {
        padding: 1.25rem 1.5rem 0.875rem 1.5rem;
    }

    .ar-text[b-q5lv73xlv9] {
        font-size: 0.9375rem;
    }

    .ar-tagline[b-q5lv73xlv9] {
        font-size: 1rem;
    }

    .ar-en-title[b-q5lv73xlv9] {
        font-size: 0.9375rem;
    }

    .ar-en-rationale[b-q5lv73xlv9] {
        font-size: var(--text-base);
        margin-bottom: 0.5rem;
        padding-left: 0;
    }

    .ar-en-badge[b-q5lv73xlv9] {
        font-size: 0.5rem;
        padding: 0.125rem 0.375rem;
    }

    .ar-grid[b-q5lv73xlv9] {
        padding-left: 0;
    }

    .ar-points[b-q5lv73xlv9] {
        padding-left: 0;
    }

    .ec[b-q5lv73xlv9] {
        --rot: 0deg;
        padding: 0.875rem 0.875rem 0.75rem;
    }

    .ec-label[b-q5lv73xlv9] {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--ink);
        background: transparent;
        padding: 0;
        margin-bottom: 0.4375rem;
        padding-right: 2.25rem;
    }

    .ec-detail[b-q5lv73xlv9] {
        font-size: var(--text-xs);
    }

    .ar-point-label[b-q5lv73xlv9] {
        font-size: var(--text-base);
    }

    .ar-point-detail[b-q5lv73xlv9] {
        font-size: var(--text-base);
    }

    .ar-action[b-q5lv73xlv9] {
        font-size: var(--text-2xs);
        height: 1.25rem;
        padding: 0 0.4375rem;
    }

    .ib[b-q5lv73xlv9] {
        margin: 0 1rem 0.5rem 1rem;
    }

    .ib-header[b-q5lv73xlv9] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ib > .ar-head > .ar-stripes[b-q5lv73xlv9] {
        right: 1.5rem;
    }

    .bdg[b-q5lv73xlv9] {
        font-size: 0.5rem;
    }
}

@media (max-width: 900px) {
    .ai-history-card[b-q5lv73xlv9] {
        background: #faf9f6 !important;
    }

    .ai-history-text[b-q5lv73xlv9] {
        color: #5a524a !important;
    }

    .ai-history-tagline[b-q5lv73xlv9] {
        color: #2c2824 !important;
    }

    .ai-history-recency[b-q5lv73xlv9] {
        color: #9ca3af !important;
    }

    .ai-history-expand[b-q5lv73xlv9] {
        color: #6b7280 !important;
    }

    .ai-history-question-text[b-q5lv73xlv9] {
        color: #111827 !important;
    }

    .message-card[b-q5lv73xlv9] {
        background: #ffffff !important;
    }

    .message-text-user[b-q5lv73xlv9] {
        color: #111827 !important;
    }

    .chat-section[b-q5lv73xlv9] {
        width: 100%;
        height: 100%;
        max-width: none;
        padding: 0;
    }

    .chat-container[b-q5lv73xlv9] {
        flex: 1;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

        .chat-container[b-q5lv73xlv9]::after {
            height: 1.25rem;
            left: 0.5rem;
            right: 0.5rem;
        }

    .chat-wrapper[b-q5lv73xlv9] {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .messages-container[b-q5lv73xlv9] {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.375rem 0.5rem 0 0.5rem;
        touch-action: pan-y;
    }

    .message-card[b-q5lv73xlv9] {
        max-width: 90%;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        border-radius: var(--radius-lg) var(--radius-lg) 0.25rem var(--radius-lg);
    }

        .message-card:hover[b-q5lv73xlv9] {
            transform: none;
        }

    .message-main[b-q5lv73xlv9] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .message-footer[b-q5lv73xlv9] {
        padding: 0.3125rem 0.75rem;
    }

    .message-avatar[b-q5lv73xlv9] {
        height: 1.375rem;
        width: 1.375rem;
        border-radius: 0.375rem;
    }

    .message-recency[b-q5lv73xlv9] {
        font-size: 0.65625rem;
    }

    .message-text-user[b-q5lv73xlv9] {
        font-size: 0.84375rem;
    }

    .ai-history-card[b-q5lv73xlv9] {
        max-width: 94%;
        margin-bottom: 0.25rem;
        border-radius: 0.75rem 0.75rem 0.75rem 0.1875rem;
    }

        .ai-history-card:hover[b-q5lv73xlv9] {
            transform: none;
        }

    .ai-history-main[b-q5lv73xlv9] {
        padding: 0.4375rem 1.625rem 0.3125rem 0.625rem;
        gap: 0.375rem;
    }

    .ai-history-avatar[b-q5lv73xlv9] {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 0.3125rem;
    }

    .ai-history-tagline[b-q5lv73xlv9] {
        font-size: 0.84375rem;
        line-height: 1.35;
    }

    .ai-history-question-text[b-q5lv73xlv9] {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .ai-history-preview-tagline[b-q5lv73xlv9] {
        font-size: 0.8125rem;
    }

    .ai-history-preview-question[b-q5lv73xlv9] {
        font-size: 0.75rem;
    }

    .ai-history-preview-arrow[b-q5lv73xlv9] {
        font-size: 0.25rem;
        margin: 0 0.25rem;
    }

    .ai-history-expand[b-q5lv73xlv9] {
        top: 0.3125rem;
        right: 0.375rem;
        width: 1rem;
        height: 1rem;
    }

        .ai-history-expand i[b-q5lv73xlv9] {
            font-size: 0.375rem;
        }

    .ai-history-detail[b-q5lv73xlv9] {
        padding-left: 1.875rem;
        padding-right: 0.625rem;
    }

    .ai-history-footer[b-q5lv73xlv9] {
        padding: 0.1875rem 0.625rem;
    }

    .ai-history-recency[b-q5lv73xlv9] {
        font-size: 0.65625rem;
    }

    .ct-user-selections[b-q5lv73xlv9] {
        gap: 0.1875rem;
        margin-bottom: 0.25rem;
    }

    .ct-user-selection-badge[b-q5lv73xlv9] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    .ar-body[b-q5lv73xlv9] {
        padding: 1rem 1.125rem 0.75rem 1.125rem;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        min-height: 0;
    }

    .ar-text[b-q5lv73xlv9] {
        font-size: 0.875rem;
        color: #2c2824 !important;
        line-height: 1.5;
    }

    .ar-tagline[b-q5lv73xlv9] {
        font-size: 0.96875rem;
        letter-spacing: -0.02em;
    }

    .ar-en-title[b-q5lv73xlv9] {
        font-size: 1.0625rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink) !important;
        letter-spacing: -0.012em;
    }

    .ar-en-rationale[b-q5lv73xlv9] {
        font-size: var(--text-sm);
        color: var(--ink-3) !important;
        margin-bottom: 0.875rem;
        padding-left: 0;
    }

    .ar-enrichment[b-q5lv73xlv9] {
        margin-top: 1.25rem;
        padding: 1rem 0 0;
    }

    .ar-en-badge[b-q5lv73xlv9] {
        font-size: var(--text-2xs);
        padding: 0;
        background: transparent;
        border: none;
        color: var(--ink-5);
        letter-spacing: 0.12em;
        margin-bottom: 0.5rem;
    }

    .ar-grid[b-q5lv73xlv9] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
        padding-left: 0;
    }

    .ec[b-q5lv73xlv9] {
        padding: 0.875rem 0.875rem 0.75rem;
    }

        .ec:hover[b-q5lv73xlv9] {
            transform: none;
            box-shadow: 0 1px 0 rgba(180, 160, 130, 0.15), 0 2px 6px rgba(80, 60, 40, 0.06), 0 8px 18px rgba(80, 60, 40, 0.04);
        }

        .ec.on:hover[b-q5lv73xlv9] {
            transform: none;
        }

    .ec-label[b-q5lv73xlv9] {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--ink) !important;
        background: transparent;
        padding: 0;
        margin-bottom: 0.4375rem;
        padding-right: 2.25rem;
    }

    .ec.on .ec-label[b-q5lv73xlv9] {
        color: var(--ink) !important;
    }

    .ec-detail[b-q5lv73xlv9] {
        font-size: var(--text-xs);
        color: var(--ink-3) !important;
    }

    .ec.on .ec-detail[b-q5lv73xlv9] {
        color: #4a4038 !important;
    }

    .ar-points[b-q5lv73xlv9] {
        padding-left: 0;
    }

    .ar-point-label[b-q5lv73xlv9] {
        font-size: var(--text-2xs);
        color: #1e293b !important;
    }

    .ar-point-detail[b-q5lv73xlv9] {
        font-size: 0.5rem;
        color: #7a7068 !important;
    }

    .ar-meta[b-q5lv73xlv9] {
        padding-top: 0.375rem;
    }

    .ar-action[b-q5lv73xlv9] {
        font-size: 0.5625rem;
        height: 1.25rem;
        padding: 0 0.375rem;
    }

    .ar-vote-btn[b-q5lv73xlv9] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6875rem;
    }

    .ar-headline[b-q5lv73xlv9] {
        font-size: 0.875rem;
    }

    .ar-notice-text[b-q5lv73xlv9] {
        font-size: 0.8125rem;
    }

    .ib[b-q5lv73xlv9] {
        margin: 0 0.5rem 0.375rem 0.5rem;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .ib-header[b-q5lv73xlv9] {
        padding: 0.5rem 1.125rem 0.3125rem 1.125rem;
        min-height: 1.375rem;
    }

    .ib > .ar-head > .ar-stripes[b-q5lv73xlv9] {
        right: 1.125rem;
    }

    .ib-idea-progress-bar[b-q5lv73xlv9] {
        width: 2.25rem;
    }

    .ib-input-row[b-q5lv73xlv9] {
        padding: 0.5rem 0.75rem 0.4375rem 2rem;
    }

        .ib-input-row textarea[b-q5lv73xlv9] {
            font-size: 0.9375rem;
            line-height: 1.55;
            min-height: 4rem;
            max-height: 9rem;
            color: #2c2824 !important;
        }

            .ib-input-row textarea[b-q5lv73xlv9]::placeholder {
                -webkit-text-fill-color: #a09890 !important;
            }

    .ib--welcome .ib-input-row textarea[b-q5lv73xlv9] {
        min-height: 6rem;
    }

    .ib-send[b-q5lv73xlv9] {
        width: 2rem;
        height: 2rem;
    }

        .ib-send svg[b-q5lv73xlv9] {
            width: 13px;
            height: 13px;
        }

    .ib-footer[b-q5lv73xlv9] {
        padding: 0.4375rem 0.75rem 0.5rem 2rem;
    }

    .ib-hint[b-q5lv73xlv9] {
        font-size: 0.625rem;
        line-height: 1.4;
    }

    .ib-char-count[b-q5lv73xlv9] {
        font-size: 0.5rem;
    }

    .ib-badge-strip[b-q5lv73xlv9] {
        padding: 0.5rem 0.75rem 0 2rem;
        gap: 0.25rem;
    }

    .bdg[b-q5lv73xlv9] {
        font-size: 0.5rem;
    }

    .scroll-indicator--up[b-q5lv73xlv9] {
        top: 0.5rem;
    }
}

/* ═══ PASS 3b · framing in-flight — gauge working state ═══
   The framer runs in the background chain after settle; the gauge is
   the surface its result lands on, so the gauge carries the working
   state: a quiet luminance breath on the fill plus a slow shimmer
   sweep on the track. Resolves into the existing width transition
   when the value lands. No layout shift, no extra chrome. */

/* 4a·r2 — phase mark moves beside the codename; the flag pill retires.
   Grade chip gains the per-element tooltip machinery the flag carried
   (data-tooltip is rendered via ::after here, not globally). */

.ib-idea-status[b-q5lv73xlv9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-left: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.ib-idea-status-dot[b-q5lv73xlv9] {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--accent);
}

/* ═══ PASS 5 · the Ask moves to the desk ═══
   Question, aspect label, and action chips relocate from the active
   card into the input area, directly under the codename line. The
   enrichment family keeps its classes; here it sheds card chrome
   and sits flush on the shell surface. Votes stayed on the card
   (thumbs evaluate the response; chips compose the next turn). */

.ib-ask[b-q5lv73xlv9] {
    padding: 0.125rem 0 0.25rem; /* 9·r2 — the white panel carries the inset */
}

    .ib-ask .ar-enrichment[b-q5lv73xlv9],
    .ib-ask .ar-enrichment--inline[b-q5lv73xlv9] {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0.25rem 0 0;
        margin: 0;
    }

    .ib-ask .ar-en-badge[b-q5lv73xlv9] {
        margin: 0;
    }

    /* 5·r2 — desk typography. The question kept its card display scale
   when it relocated; at the desk it is the label for the field below,
   not a headline. Scoped override outranks both base definitions and
   every media variant. */

    .ib-ask .ar-en-header[b-q5lv73xlv9] {
        margin: 0.375rem 0 0;
        animation: none;
    }

    .ib-ask .ar-en-title[b-q5lv73xlv9] {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.015em;
        color: var(--ink);
    }

/* restored — reaped in pass 1 as a CSS-side orphan; it is referenced
   inline from the selectable-card markup (style="animation: ecReveal…"),
   which the reaper's animation-declaration census could not see. */

@keyframes ecReveal-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(8px) rotate(var(--rot, 0deg));
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot, 0deg));
    }
}

/* ═══ PASS 8 · correctness batch styles ═══ */

.message-text--skipped[b-q5lv73xlv9] {
    font-style: italic;
    opacity: 0.55;
}

/* ═══ PASS 9 · one master control ═══
   The active card already docks onto the desk (no bottom border, no
   bottom radius). The desk now continues the card's warm surface and
   drops the border-top seam, so response + Ask + input read as one
   component. The separator becomes the promised very light rule
   between the Ask and the typing zone. Header inset matches the card
   body. History compacts modestly — same structure, same content. */

.ib-ask-actions[b-q5lv73xlv9] {
    margin: 1rem 0 0.125rem;
}

.messages-container .message-card[b-q5lv73xlv9] {
    padding: 0.5rem 0.875rem;
}

/* 9·r2 — the interaction panel. White marks where the user acts:
   Ask + options + input sit on a white inset card inside the warm
   master control; identity and status stay on the warm shell. Inner
   elements shed their old shell insets — the panel carries them. */

.ib-panel[b-q5lv73xlv9] {
    margin: 0.25rem 1rem 1rem;
    padding: 1rem 1.375rem 0.375rem;
    background: #ffffff;
    border: 1px solid rgba(118, 104, 160, 0.24); /* 10·r2 — must read as a bounded panel even when empty */
    border-radius: var(--radius-lg);
    box-shadow: 0 -2px 5px rgba(60, 50, 90, 0.08), 0 1px 2px rgba(60, 50, 90, 0.03), 0 3px 10px rgba(60, 50, 90, 0.03);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

    .ib-panel .ib-input-row[b-q5lv73xlv9] {
        padding: 0.625rem 0 0.375rem 0.125rem;
    }

    .ib-panel .ib-badge-strip[b-q5lv73xlv9] {
        padding: 0.5rem 0 0 0.125rem;
    }

    .ib-panel .ib-footer[b-q5lv73xlv9] {
        padding: 0.375rem 0.125rem 0.375rem 0.125rem;
    }

/* 9·r3 — the header crowns the master control. It renders at the top
   of the active card (warm surface, inside ar-body) and falls back to
   the desk only in the fresh-idea state. Votes join grade + export in
   the right cluster: one metrics-and-actions row for the response
   below it. Card-context header sheds the shell paddings. */

.ar-body .ib-header[b-q5lv73xlv9] {
    padding: 0 0 1.125rem 0;
    min-height: 0;
}

/* 9·r4 — votes return beneath the response they judge; ar-meta's own
   top rule is the up/down separation. The card-era divider above the
   question (ar-enrichment::before) is noise in the white panel. */

.ar-meta--votes[b-q5lv73xlv9] {
    justify-content: flex-end;
}

.ib-ask .ar-enrichment[b-q5lv73xlv9]::before {
    content: none;
}

/* ═══ PASS 10 · polish — focus + collapsed history ═══
   Focus lands a quiet accent on the panel border. Collapsed history
   invites the click: expandable rows get the pointer and a chevron
   response; static rows and the pending bubble stay inert. (The desk's
   busy pulse and separator sweep retired with the turn choreography:
   progress is narrated in the card, where each result lands.) */

.ib:focus-within .ib-panel[b-q5lv73xlv9] {
    border-color: rgba(240, 12, 113, 0.32);
}

.message-card.collapsed:not(.message-card--pending)[b-q5lv73xlv9] {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .message-card.collapsed:not(.message-card--pending):hover[b-q5lv73xlv9] {
        border-color: rgba(200, 195, 187, 0.75);
        box-shadow: 0 2px 8px rgba(80, 60, 40, 0.06);
    }

.ai-history-card:not(.ai-history-card--static)[b-q5lv73xlv9] {
    cursor: pointer;
}

    .ai-history-card:not(.ai-history-card--static):hover .ai-history-expand i[b-q5lv73xlv9] {
        transform: translateY(1px);
        color: var(--accent);
    }

/* 10·r2 — empty-state honesty. With no Ask above it, the separator is
   the panel's first child dividing nothing — a stray line that reads
   as breakage. Structural rule: no content above, no rule. */

.ib-panel > .ib-separator:first-child[b-q5lv73xlv9] {
    display: none;
}

/* 10·r5 — the cap. With no card docked above, the slab IS the top of
   the master control and must carry the card-top treatment itself:
   full radius, top border, and the upward shadow component. When a
   card appears, the cap drops and the dock seam returns. */

.ib--capped[b-q5lv73xlv9] {
    border-top: 1px solid rgba(180, 160, 130, 0.22);
    border-radius: var(--radius-xl);
    box-shadow: 0 -1px 3px rgba(80, 60, 40, 0.03), 0 2px 10px rgba(80, 60, 40, 0.04), 0 6px 20px rgba(80, 60, 40, 0.03);
}

/* 10·r6 — the header arrives, never teleports. One entrance plays
   wherever it mounts (card top or desk fallback): a short fade and
   rise (the animation is declared on .ib-header). And the cap melts
   instead of snapping: the seam border is a solid transparent pixel,
   so capping eases its color in while the radius eases alongside via
   the transition list on .ib. */

@keyframes ibHeaderIn-b-q5lv73xlv9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══ PASS 11 · fully framed wears its phase ═══
   One 'Fully framed' remains — the header mark. The crossing shows
   in the surface itself: framed ideas carry a whisper of the accent
   in the warm, card and desk in continuity (card ends where the
   desk begins). Grade left the header; the scorecard owns it. The
   chips row is the CTA's future seat, milestone turns included. */

/* Framed: the product's own surface lilac — the agenda editor's panel
   colour (#f2eefb, line #e3d7fa), sampled, not approximated — so the
   framed card speaks the same language as the rest of the product.
   Deeper than the pre-framed whisper, same family: the phase is legible
   at a glance, and pink stays Ainna's alone. */
.ar--framed .ar-body[b-q5lv73xlv9] {
    --card-top: #f5f2fc;
    --card-bottom: #f2eefb;
    --card-line: #e3d7fa;
    --card-rule: rgba(120, 92, 190, 0.18);
}

.ib--framed[b-q5lv73xlv9] {
    background: linear-gradient(180deg, #f2eefb 0%, #efeaf9 100%);
    border-color: #e3d7fa;
}

/* 11·r3 — the seam, sealed. Every legacy, state, and media vector
   that could color the card↔desk seam has now been found twice; this
   guarantees there is no third time. The capped state is exempt —
   its top border is the designed cap. */

.ib:not(.ib--capped)[b-q5lv73xlv9] {
    border-top-color: transparent !important;
}

/* ═══ PASS 19 · the down indicator is the scroll-home overlay ═══
   A labeled pill, bottom-center over the stream, appearing through the
   same JS visibility toggle it always had. (The options grid lives in
   the active card, not the desk, so the desk needs no scroll cap.) */

.scroll-indicator--down[b-q5lv73xlv9] {
    top: auto;
    right: auto;
    bottom: 0.875rem;
    left: 50%; /* 22 — one column with the up indicator */
    transform: translateX(-50%) translateY(6px);
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    background: #ffffff;
    border: 1px solid rgba(180, 160, 130, 0.35);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(80, 60, 40, 0.14), 0 1px 3px rgba(80, 60, 40, 0.10);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .scroll-indicator--down.visible[b-q5lv73xlv9] {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .scroll-indicator--down:hover[b-q5lv73xlv9] {
        border-color: rgba(240, 12, 113, 0.4);
    }

.scroll-home-label[b-q5lv73xlv9] {
    line-height: 1;
}
/* /Components/AinnaSmartToolbar.razor.rz.scp.css */
/* AinnaSmartToolbar.razor.css — NAV RESTYLE per "Ainna Nav — dev handoff" (v1 · Aug 19 2026)
   v4 (Sep 2026): the light TOP BAR is retired. The brand and the plan live
   on the rail; the crumb became the ISLAND — a translucent glass pill,
   docked beside the rail at the top, present on every page.
   ═══════════════════════════════════════════════════════════════════════
   One coherent layer replaces the previous pass-stack. Same elements, same
   handlers, same data — only the visual + typographic contract changed:

     · ISLAND: see AinnaIsland — the active item, placed by the host.
     · PANEL goes dark (#1B3034, one tone up from the rail's #0A191D→#17292D), docked to the rail as one capsule half:
       seam on the left, radius + the single capsule shadow on the right.
       (The rail's own #28262C restyle lives in AinnaRail; when it lands,
       the pair reads as the handoff's fused capsule.)
     · Three voices: Space Grotesk = UI · JetBrains Mono = machine data
       (slugs, counts, dates, crumb) · Newsreader italic = human copy
       (pitches, hints, empty states). Never crossed.
     · One accent. Pink is reserved for: the selection, focus, links.
       Amber only for status. Fills/hairlines on dark are white-at-alpha.

   FONTS — add once to the host page <head> (App.razor / index.html):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&family=JetBrains+Mono:wght@500..800&family=Newsreader:ital,opsz,wght@1,16,400..500&display=swap" rel="stylesheet">
   Fallbacks below keep everything legible until they load.

   COUPLINGS: the panel spans the rail exactly (top 8px + safe-area,
   bottom 14px — AinnaRail literals). Its left edge follows the rail's
   --ainna-rail-w. The island sits BELOW the panel in z, so opening the
   rail covers it. */


/* ════════════════════ 1 · TOKENS ════════════════════ */
.sb2[b-3vnjiqk8ve], .sb2-exp[b-3vnjiqk8ve] {
    /* fonts — the three voices + the logo face */
    --font-ui: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
    --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --font-edit: 'Newsreader', Georgia, serif;
    /* chrome */
    --app-bg: #F7F4F6;
    --topbar-bg: #FFFFFF;
    --topbar-line: #EFE9EE;
    --rail-bg: #0E1F23;
    --panel-bg: #1B3034;
    --panel-bg-top: #1F3539;
    --chrome-seam: #142529;
    /* accent */
    --pink: #E0176B;
    --pink-hover: #CB1560;
    --pink-row-hover: #D31463;
    --pink-deep: #C71260; /* pink on LIGHT surfaces only */
    --pink-bright: #FF5C9E;
    --pink-link: #FF8FBB;
    --pink-plus: #FF7EB0;
    --pink-wash: rgba(224, 23, 107, 0.18);
    --amber: #E5A94F;
    --amber-wash: rgba(229, 169, 79, 0.16);
    /* text on dark, high → low */
    --ink-hi: #F5F0F4;
    --ink-row: #F0EAEF;
    --ink-head: #E8E1E7;
    --ink-mid: #CFC5CE;
    --ink-soft: #B4AAB3;
    --ink-edit: #B3A8B2;
    --ink-dim: #A99FA8;
    --ink-meta: #A79DA6;
    /* text on light (top bar) */
    --lt-ink: #221C21;
    --lt-logo: #1E1722;
    --lt-dim: #877E88;
    --lt-faint: #D5CCD4;
    /* fills + hairlines on dark: white at fixed alpha, never gray hexes */
    --line-strong: rgba(255,255,255,0.14);
    --line: rgba(255,255,255,0.08);
    --line-soft: rgba(255,255,255,0.07);
    --line-input: rgba(255,255,255,0.12);
    --fill-card: rgba(255,255,255,0.045);
    --fill-hover: rgba(255,255,255,0.06);
    --fill-hover2: rgba(255,255,255,0.08);
    --fill-badge: rgba(255,255,255,0.10);
    /* the search field is the one LIGHT surface in the panel: paper on slate */
    --fill-input: #ECEBEE;
    --fill-input-focus: #FFFFFF;
    --ink-on-input: #221C21;
    --ink-on-input-soft: #6E6773;
    /* grade dots — the handoff's status recipe ("?" neutral, "C" amber)
       extended to the four assessment tiers with the SAME wash formula;
       every pair holds ≥4.5:1 on the panel surface */
    --tier-great: #74D99F;
    --tier-great-wash: rgba(116, 217, 159, 0.16);
    --tier-good: #7FB2FF;
    --tier-good-wash: rgba(127, 178, 255, 0.16);
    --tier-poor: #F49B9B;
    --tier-poor-wash: rgba(244, 155, 155, 0.16);
    /* misc surfaces */
    --badge-chip: #2C4247;
    --avatar: #3A5055;
    --scrollbar: #3B5156;
    /* radii — nested: capsule 18 > card 14 > tile/input 12 > row 10 */
    --r-capsule: 18px;
    --r-card: 14px;
    --r-tile: 12px;
    --r-row: 10px;
    /* elevation — only two shadows exist in the whole component
       (capsule throw adapted rightward: the panel floats over content) */
    --shadow-capsule: 0 16px 40px rgba(18, 17, 22, 0.35);
    --shadow-pink: 0 3px 10px rgba(224, 23, 107, 0.28);
    --focus-ring: 0 0 0 3px rgba(255, 92, 158, 0.18);
    /* geometry couplings — literals mirrored by .backdrop and AinnaRail */
    --sb-top: calc(8px + env(safe-area-inset-top, 0px)); /* = AinnaRail top */
    --sb-t: 0.15s ease;
}


/* ════════════════════ 2 · BACKDROP ════════════════════ */
/* Click-to-close survives; the docked capsule needs no modal theatre, so
   the scrim is a whisper and the blur is reserved for the project menu.
   Full-viewport now that the bar is gone; the island (1250) and rail
   (1300) sit above it. */
.backdrop[b-3vnjiqk8ve] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(18, 17, 22, 0.14);
    cursor: default;
}

    .backdrop.with-blur[b-3vnjiqk8ve] {
        background: rgba(18, 17, 22, 0.20);
        backdrop-filter: blur(3px) saturate(0.96);
        -webkit-backdrop-filter: blur(3px) saturate(0.96);
    }


/* ════════════════════ 3 · (retired) ════════════════════ */
/* The top bar and the island both left this component: the brand and
   plan live on AinnaRail, the active item is AinnaIsland, placed by the
   host. */


/* ════════════════════ 4 · THE PANEL (the capsule's right half) ════════════════════ */
/* The capsule floats: 8px gap under the bar, 14px above the viewport
   bottom, radius 18, ONE downward shadow (spec token verbatim). This
   component owns the right half; AinnaRail supplies the left: width 80,
   margin 8px 0 14px 8px, radius 18 0 0 18, background #28262C, the same
   shadow token, and --ainna-rail-w: 88px (8 margin + 80 rail) so the
   panel docks flush against its right edge. */
.sb2-exp[b-3vnjiqk8ve] {
    position: fixed;
    top: var(--sb-top); /* = the rail's top: the panel is the rail, unfolded */
    left: var(--ainna-rail-w, 88px); /* fallback coupling: 8 margin + 80 rail (AinnaRail) */
    bottom: 14px; /* = the rail's bottom */
    width: min(620px, calc(100vw - var(--ainna-rail-w, 88px) - 56px)); /* content never fully hidden */
    box-sizing: border-box;
    z-index: 1205; /* above bar scrim, below rail (1300) */
    display: grid;
    grid-template-rows: auto 1fr auto; /* head · list · foot */
    background: var(--panel-bg);
    background-image: linear-gradient(180deg, var(--panel-bg-top) 0%, var(--panel-bg) 180px);
    color: var(--ink-mid);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    border-left: 1px solid var(--line-soft); /* the seam against the rail */
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0 var(--r-capsule) var(--r-capsule) 0;
    box-shadow: var(--shadow-capsule);
    overflow: hidden;
    animation: sb2-exp-in-b-3vnjiqk8ve 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    cursor: default;
}

@keyframes sb2-exp-in-b-3vnjiqk8ve {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── fixed top region: header · search · filters (§06) ── */
.sb2-exp-head[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.sb2-phead[b-3vnjiqk8ve] {
    position: relative;
    z-index: 6; /* above the busy veil: closing stays allowed */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
}

.sb2-pglyph[b-3vnjiqk8ve] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--pink-bright);
}

.sb2-ptitle[b-3vnjiqk8ve] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb2-close[b-3vnjiqk8ve] {
    margin-left: auto;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    transition: background var(--sb-t), color var(--sb-t);
}

    .sb2-close:hover[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        color: var(--ink-hi);
    }

    .sb2-close svg[b-3vnjiqk8ve] {
        width: 15px;
        height: 15px;
        display: block;
    }

.sb2-search[b-3vnjiqk8ve] {
    position: relative;
    margin: 0 18px;
}

.sb2-search-icon[b-3vnjiqk8ve] {
    position: absolute;
    left: 13px;
    top: 12px;
    width: 17px;
    height: 17px;
    color: var(--ink-on-input-soft);
    pointer-events: none;
}

.sb2-search-input[b-3vnjiqk8ve] {
    width: 100%;
    box-sizing: border-box;
    height: 41px;
    border-radius: var(--r-tile);
    border: 1px solid transparent;
    background: var(--fill-input);
    color: var(--ink-on-input);
    padding: 0 38px 0 40px;
    font-family: var(--font-ui);
    font-size: 14px;
    outline: none;
    transition: border-color var(--sb-t), background var(--sb-t), box-shadow var(--sb-t);
}

    .sb2-search-input[b-3vnjiqk8ve]::placeholder {
        color: var(--ink-on-input-soft);
    }

    .sb2-search-input:focus[b-3vnjiqk8ve] {
        background: var(--fill-input-focus);
        border-color: rgba(224, 23, 107, 0.55);
        box-shadow: none;
    }

/* the border above is the focus indicator; the a11y floor's outline
       would draw a second ring around it (selector matches the floor's
       specificity so it actually wins) */
.sb2-exp input.sb2-search-input:focus-visible[b-3vnjiqk8ve] {
    outline: none;
}

.sb2-search-clear[b-3vnjiqk8ve] {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-on-input-soft);
    cursor: pointer;
    transition: background var(--sb-t), color var(--sb-t);
    animation: sb2-pop-b-3vnjiqk8ve 0.12s ease both;
}

    .sb2-search-clear:hover[b-3vnjiqk8ve] {
        background: rgba(34, 28, 33, 0.08);
        color: var(--ink-on-input);
    }

@keyframes sb2-pop-b-3vnjiqk8ve {
    from {
        opacity: 0;
        scale: 0.8;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.sb2-filters[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    flex-wrap: nowrap;
    min-width: 0;
}

.sb2-scp[b-3vnjiqk8ve] {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-strong);
    color: var(--ink-mid);
    transition: background var(--sb-t), border-color var(--sb-t), color var(--sb-t);
}

    .sb2-scp i[b-3vnjiqk8ve] {
        font-size: 10px;
    }

    .sb2-scp:hover[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        color: var(--ink-hi);
    }

    .sb2-scp[aria-pressed="true"][b-3vnjiqk8ve] {
        background: var(--pink-wash);
        border-color: rgba(255, 143, 187, 0.5);
        color: var(--pink-link);
    }

/* meta line: whole-space totals at rest, "N matches" while filtering */
.sb2-count[b-3vnjiqk8ve] {
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-meta);
    font-variant-numeric: tabular-nums;
}

    .sb2-count.sb2-count-live[b-3vnjiqk8ve] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ink-soft);
    }

.sb2-count-live > span[b-3vnjiqk8ve] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb2-count-clear[b-3vnjiqk8ve] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pink-link);
    font-size: 9px;
    cursor: pointer;
    transition: background var(--sb-t);
}

    .sb2-count-clear:hover[b-3vnjiqk8ve] {
        background: var(--pink-wash);
    }


/* ════════════════════ 5 · GROUP CARDS & IDEA ROWS (§07) ════════════════════ */
.sb2-list[b-3vnjiqk8ve] {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}

    .sb2-list[b-3vnjiqk8ve]::-webkit-scrollbar {
        width: 10px;
    }

    .sb2-list[b-3vnjiqk8ve]::-webkit-scrollbar-thumb {
        background: var(--scrollbar);
        border-radius: 8px;
        border: 3px solid var(--panel-bg); /* inset look */
    }

    .sb2-list[b-3vnjiqk8ve]::-webkit-scrollbar-track {
        background: transparent;
    }

.sb2-groups[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
}

/* structure per problem: one card per space, ideas as rows inside.
   No entrance animation here: the list re-renders on every search commit,
   and replayed staggers read as loading time. The panel slide-in is the
   only theatre. */
.sb2-grp[b-3vnjiqk8ve] {
    margin: 4px 0 10px;
    padding: 6px 8px 8px;
    background: var(--fill-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
}

@keyframes sb2-fade-b-3vnjiqk8ve {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* card header: kind glyph · mono slug · plain right-aligned count. No pills. */
.sb2-ghead[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 6px;
    border-radius: var(--r-row);
    cursor: pointer;
    transition: background var(--sb-t);
}

    .sb2-ghead:hover[b-3vnjiqk8ve] {
        background: var(--fill-hover);
    }

    .sb2-ghead.is-hi[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    }

.sb2-gicon[b-3vnjiqk8ve] {
    flex: 0 0 auto;
    display: flex;
    color: var(--ink-soft);
}

    .sb2-gicon svg[b-3vnjiqk8ve] {
        width: 13px;
        height: 13px;
        display: block;
    }

.sb2-ghead .sb2-code[b-3vnjiqk8ve] {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-head);
    overflow-wrap: anywhere; /* long slugs wrap, never clip (QA) */
    min-width: 0;
}

.sb2-orphan[b-3vnjiqk8ve] {
    color: var(--amber);
    font-weight: 800;
    cursor: help;
    flex: 0 0 auto;
}

.sb2-gname[b-3vnjiqk8ve] {
    display: none; /* the slug speaks; the full name lives in the header tooltip */
}

.sb2-gcount[b-3vnjiqk8ve] {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-meta);
    font-variant-numeric: tabular-nums;
}

    .sb2-gcount.is-debt[b-3vnjiqk8ve] {
        color: var(--ink-meta); /* the amber pill is deleted: counts are plain text */
    }

/* the committed CONTAINER is the selection when no idea is open —
   same grammar as the selected row */
.sb2-grp.is-committed .sb2-ghead[b-3vnjiqk8ve] {
    position: relative;
    background: rgba(224, 23, 107, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 92, 158, 0.28);
}

    .sb2-grp.is-committed .sb2-ghead[b-3vnjiqk8ve]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 60%;
        border-radius: 0 3px 3px 0;
        background: var(--pink-bright);
        transform: translateY(-50%);
    }

    .sb2-grp.is-committed .sb2-ghead:hover[b-3vnjiqk8ve] {
        background: rgba(224, 23, 107, 0.24);
    }

    .sb2-grp.is-committed .sb2-ghead .sb2-code[b-3vnjiqk8ve] {
        color: var(--ink-hi);
    }

    .sb2-grp.is-committed .sb2-ghead .sb2-gicon[b-3vnjiqk8ve] {
        color: var(--pink-bright);
    }

    .sb2-grp.is-committed .sb2-ghead .sb2-gcount[b-3vnjiqk8ve] {
        color: var(--ink-soft);
    }

    .sb2-grp.is-committed .sb2-ghead .sb2-orphan[b-3vnjiqk8ve] {
        color: var(--ink-mid);
    }

    .sb2-grp.is-committed .sb2-ghead.is-hi[b-3vnjiqk8ve] {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
    }

.sb2-rows[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 0; /* breathing room under the group header */
    padding: 0;
    border: 0;
}

/* idea row: bulb · [slug + serif pitch] · status dot · age */
.sb2-row[b-3vnjiqk8ve] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-row);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background var(--sb-t);
}

    .sb2-row:hover[b-3vnjiqk8ve] {
        background: var(--fill-hover);
    }

    .sb2-row.is-hi[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    }

.sb2-ric[b-3vnjiqk8ve] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    color: var(--pink-bright);
}

svg.sb2-ric[b-3vnjiqk8ve] {
    display: block;
}

i.sb2-ric[b-3vnjiqk8ve] {
    width: 13px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

.sb2-ric-ev[b-3vnjiqk8ve] {
    color: var(--ink-soft);
}

.sb2-rmain[b-3vnjiqk8ve] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sb2-row .sb2-code[b-3vnjiqk8ve] {
    display: block;
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ink-row);
    overflow-wrap: anywhere;
    white-space: normal;
}

/* the human one-liner — always serif italic, never bold */
.sb2-rname[b-3vnjiqk8ve] {
    margin-top: 3px;
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-edit);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .sb2-rname:empty[b-3vnjiqk8ve] {
        display: none;
    }

.sb2-side[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* the status dot: 18px, scales to any glyph (A+ … F, "?" ungraded).
   Neutral by default; tiers wear the amber-recipe washes. Tooltip kept. */
.sb2-topgrade[b-3vnjiqk8ve] {
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fill-badge);
    color: var(--ink-soft);
}

    .sb2-topgrade.tier-great[b-3vnjiqk8ve] {
        background: var(--tier-great-wash);
        color: var(--tier-great);
    }

    .sb2-topgrade.tier-good[b-3vnjiqk8ve] {
        background: var(--tier-good-wash);
        color: var(--tier-good);
    }

    .sb2-topgrade.tier-moderate[b-3vnjiqk8ve] {
        background: var(--amber-wash);
        color: var(--amber);
    }

    .sb2-topgrade.tier-poor[b-3vnjiqk8ve] {
        background: var(--tier-poor-wash);
        color: var(--tier-poor);
    }

.sb2-right[b-3vnjiqk8ve] {
    min-width: 36px;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-meta);
    font-variant-numeric: tabular-nums;
}

/* SELECTED — the rail's grammar: pink wash, pink ink, a 3px indicator on
   the left edge. The mark is sticky through search and filters. */
.sb2-row.is-committed[b-3vnjiqk8ve] {
    position: relative;
    background: rgba(224, 23, 107, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 92, 158, 0.28);
}

    .sb2-row.is-committed[b-3vnjiqk8ve]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 60%;
        border-radius: 0 3px 3px 0;
        background: var(--pink-bright);
        transform: translateY(-50%);
    }

    .sb2-row.is-committed:hover[b-3vnjiqk8ve] {
        background: rgba(224, 23, 107, 0.24);
    }

    .sb2-row.is-committed .sb2-ric[b-3vnjiqk8ve] {
        color: var(--pink-bright);
    }

    .sb2-row.is-committed .sb2-code[b-3vnjiqk8ve] {
        color: var(--ink-hi);
    }

    .sb2-row.is-committed .sb2-rname[b-3vnjiqk8ve] {
        color: var(--ink-mid);
    }

    .sb2-row.is-committed .sb2-right[b-3vnjiqk8ve] {
        color: var(--ink-soft);
    }

    .sb2-row.is-committed .sb2-topgrade[b-3vnjiqk8ve] {
        background: rgba(255, 92, 158, 0.22);
        color: var(--ink-hi);
    }

    .sb2-row.is-committed.is-hi[b-3vnjiqk8ve] {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }

/* drafts: quiet, complete — dimmed bulb + slug, "unsaved" in the age slot */
.sb2-row.is-stub .sb2-ric[b-3vnjiqk8ve] {
    color: var(--ink-dim);
}

.sb2-row.is-stub .sb2-code[b-3vnjiqk8ve] {
    color: var(--ink-dim);
}

/* view-all — only on truncated groups, hidden while searching (existing logic) */
.sb2-viewall[b-3vnjiqk8ve] {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--r-row);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pink-link);
    cursor: pointer;
    transition: background var(--sb-t);
}

    .sb2-viewall.is-less[b-3vnjiqk8ve] {
        color: var(--ink-soft);
    }

.sb2-va-arrow.is-down[b-3vnjiqk8ve],
.sb2-va-arrow.is-up[b-3vnjiqk8ve] {
    width: 12px;
    height: 12px;
}

.sb2-viewall:hover:not(:disabled)[b-3vnjiqk8ve] {
    background: rgba(224, 23, 107, 0.14);
}

.sb2-viewall:disabled[b-3vnjiqk8ve] {
    opacity: 0.45;
    cursor: not-allowed;
}

.sb2-va-arrow[b-3vnjiqk8ve] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.sb2-row-empty[b-3vnjiqk8ve] {
    padding: 6px 10px 8px;
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-meta);
}

/* ── events: one more card at the tail, same anatomy ── */
.sb2-evband[b-3vnjiqk8ve] {
    margin: 14px 4px 6px;
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.sb2-evrows[b-3vnjiqk8ve] {
    margin: 4px 0 10px;
    padding: 6px 8px 8px;
    background: var(--fill-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
}


/* ════════════════════ 6 · WELCOME & EMPTY STATES ════════════════════ */

/* orientation: takes the room left under the (few) groups and centres in
   it — product voice, not editorial. Colours are set on every line: a
   global element rule must not win. Retires at four items. */
.sb2-orient[b-3vnjiqk8ve] {
    flex: 1 1 auto;
    align-self: center; /* h-centre inside the column list */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 12px 28px;
    text-align: center;
    animation: sb2-fade-b-3vnjiqk8ve 0.25s ease both;
}

.sb2-orient-t[b-3vnjiqk8ve] {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink-soft);
    margin: 0 0 6px;
}

.sb2-orient-l[b-3vnjiqk8ve] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-meta);
    margin: 0;
}

    .sb2-orient-l b[b-3vnjiqk8ve] {
        font-weight: 600;
        color: var(--ink-dim);
    }

.sb2-orient-cta[b-3vnjiqk8ve] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--ink-dim);
    font-size: 12px;
    font-weight: 500;
}

.sb2-orient-arrow[b-3vnjiqk8ve] {
    color: rgba(255, 92, 158, 0.7);
    font-size: 13px;
    line-height: 1;
}

.sb2-welcome[b-3vnjiqk8ve] {
    margin: 2px 0 14px;
    padding: 26px 24px 22px;
    text-align: center;
    background: var(--fill-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    animation: sb2-fade-b-3vnjiqk8ve 0.2s ease both;
}

.sb2-welcome-t[b-3vnjiqk8ve] {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-hi);
}

.sb2-welcome-b[b-3vnjiqk8ve] {
    margin-top: 6px;
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-edit);
}

.sb2-welcome-steps[b-3vnjiqk8ve] {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
}

.sb2-wstep[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 190px;
}

    .sb2-wstep em[b-3vnjiqk8ve] {
        font-family: var(--font-edit);
        font-style: italic;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ink-meta);
    }

/* the legend's kind chips — quiet on dark, glyphs carry the kind color */
.sb2-tpill[b-3vnjiqk8ve] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--fill-badge);
    color: var(--ink-mid);
}

    .sb2-tpill i[b-3vnjiqk8ve] {
        font-size: 9px;
    }

    .sb2-tpill span[b-3vnjiqk8ve] {
        font-family: var(--font-ui);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1;
    }

    .sb2-tpill.t-problem i[b-3vnjiqk8ve] {
        color: var(--amber);
    }

    .sb2-tpill.t-idea i[b-3vnjiqk8ve] {
        color: var(--pink-bright);
    }

    .sb2-tpill.t-portfolio i[b-3vnjiqk8ve] {
        color: var(--ink-mid);
    }

    .sb2-tpill.t-event i[b-3vnjiqk8ve] {
        color: var(--ink-mid);
    }

.sb2-warrow[b-3vnjiqk8ve] {
    margin-top: 7px;
    font-size: 12px;
    color: var(--ink-dim);
}

/* empty result: centered serif italic — no art, no glow */
.sb2-none[b-3vnjiqk8ve] {
    max-width: 380px;
    margin: 8vh auto 0;
    text-align: center;
    animation: sb2-fade-b-3vnjiqk8ve 0.2s ease both;
}

.sb2-none-t[b-3vnjiqk8ve] {
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-head);
}

.sb2-none-b[b-3vnjiqk8ve] {
    margin-top: 8px;
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-meta);
}

.sb2-none-acts[b-3vnjiqk8ve] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sb2-none-btn[b-3vnjiqk8ve] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 15px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-mid);
    background: var(--fill-input);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-tile);
    cursor: pointer;
    transition: background var(--sb-t), border-color var(--sb-t), color var(--sb-t);
}

    .sb2-none-btn i[b-3vnjiqk8ve] {
        font-size: 11px;
        color: var(--ink-dim);
    }

    .sb2-none-btn:hover:not(:disabled)[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        border-color: rgba(255, 255, 255, 0.22);
        color: var(--ink-hi);
    }

    .sb2-none-btn.is-primary[b-3vnjiqk8ve] {
        color: #FFFFFF;
        background: var(--pink);
        border-color: transparent;
        box-shadow: var(--shadow-pink);
    }

        .sb2-none-btn.is-primary i[b-3vnjiqk8ve] {
            color: #FFFFFF;
        }

        .sb2-none-btn.is-primary:hover:not(:disabled)[b-3vnjiqk8ve] {
            background: var(--pink-hover);
            color: #FFFFFF;
        }

    /* locked primary routes to pricing — brand stays loud; the lock glyph
       and tooltip signal the gate */
    .sb2-none-btn:disabled[b-3vnjiqk8ve] {
        opacity: 0.45;
        filter: grayscale(0.85);
        cursor: not-allowed;
    }


/* ════════════════════ 7 · FOOTER + BUSY VEIL ════════════════════ */
/* the footer exists only where the rail doesn't (≤640): the create doors
   with the rail's handlers. At desktop the rail owns creation and the
   panel keeps the row for browsing. */
.sb2-foot[b-3vnjiqk8ve] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
    color: var(--ink-meta);
}

.sb2-foot-doors[b-3vnjiqk8ve] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sb2-door[b-3vnjiqk8ve] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mid);
    background: var(--fill-input);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-tile);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sb-t), border-color var(--sb-t), color var(--sb-t);
}

    .sb2-door > i:first-child[b-3vnjiqk8ve] {
        font-size: 11px;
        color: var(--pink-bright);
    }

    .sb2-door:hover:not(:disabled)[b-3vnjiqk8ve] {
        background: var(--fill-hover2);
        border-color: rgba(255, 255, 255, 0.22);
        color: var(--ink-hi);
    }

    .sb2-door:disabled[b-3vnjiqk8ve] {
        opacity: 0.45;
        filter: grayscale(0.85);
        cursor: not-allowed;
    }

    .sb2-door.is-locked > i.fa-lock:first-child[b-3vnjiqk8ve] {
        color: var(--ink-dim);
    }

.sb2-lock[b-3vnjiqk8ve] {
    font-size: 8.5px;
    color: var(--ink-dim);
}

/* busy-card spinner + cancel (formerly in the bar section) */
.spinner-dots[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--pink-deep);
}

    .spinner-dots .dot[b-3vnjiqk8ve] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        animation: sb2-dot-b-3vnjiqk8ve 1s ease-in-out infinite;
    }

        .spinner-dots .dot:nth-child(2)[b-3vnjiqk8ve] {
            animation-delay: 0.15s;
        }

        .spinner-dots .dot:nth-child(3)[b-3vnjiqk8ve] {
            animation-delay: 0.3s;
        }

@keyframes sb2-dot-b-3vnjiqk8ve {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.cancel-btn[b-3vnjiqk8ve] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lt-dim);
    background: #FFFFFF;
    border: 1px solid var(--topbar-line);
    border-radius: 8px;
    cursor: pointer;
    transition: color var(--sb-t), border-color var(--sb-t);
}

    .cancel-btn:hover[b-3vnjiqk8ve] {
        color: var(--pink-deep);
        border-color: #F6C9DC;
    }

    .cancel-btn i[b-3vnjiqk8ve] {
        font-size: 10px;
    }

/* the wholesale lock while generation runs; close (in .sb2-phead, z6)
   stays above it, so escape is always possible */
.sb2-veil[b-3vnjiqk8ve] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(40, 38, 44, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sb2-fade-b-3vnjiqk8ve 0.2s ease both;
    cursor: default;
}

.sb2-veil-card[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 24px 30px;
    background: var(--chrome-seam);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

    .sb2-veil-card .spinner-dots[b-3vnjiqk8ve] {
        color: var(--pink-bright);
    }

    .sb2-veil-card .cancel-btn[b-3vnjiqk8ve] {
        background: var(--fill-input);
        border-color: var(--line-strong);
        color: var(--ink-mid);
    }

        .sb2-veil-card .cancel-btn:hover[b-3vnjiqk8ve] {
            color: var(--ink-hi);
            border-color: rgba(255, 255, 255, 0.22);
        }

.sb2-veil-t[b-3vnjiqk8ve] {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-hi);
}

.sb2-veil-b[b-3vnjiqk8ve] {
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 12.5px;
    color: var(--ink-meta);
}

/* legacy element-reference shims: real nodes, zero presence */
.sb2-shims[b-3vnjiqk8ve] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ════════════════════ 8 · DEAD-GRID SAFETY NET ════════════════════ */
/* .sb2-grid is unreachable since pass 23 (grouped-while-filtering hosts
   every non-empty state); minimal dark coverage so nothing renders
   illegible if it ever resurrects before the dead-code sweep. */
.sb2-grid[b-3vnjiqk8ve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.sb2-card[b-3vnjiqk8ve] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--fill-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    color: var(--ink-mid);
    cursor: pointer;
}

    .sb2-card:hover[b-3vnjiqk8ve] {
        background: var(--fill-hover);
    }

    .sb2-card.is-committed[b-3vnjiqk8ve] {
        background: var(--pink);
        color: #FFFFFF;
    }

    .sb2-card.is-stubcard[b-3vnjiqk8ve] {
        border-style: dashed;
    }

.sb2-tpill.is-draft[b-3vnjiqk8ve] {
    color: var(--ink-dim);
}

.sb2-r1[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sb2-card .sb2-code[b-3vnjiqk8ve] {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-row);
}

.sb2-name[b-3vnjiqk8ve] {
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-edit);
}

.sb2-r3[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-data);
    font-size: 10.5px;
    color: var(--ink-meta);
}

.sb2-auth[b-3vnjiqk8ve] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.sb2-auth-av[b-3vnjiqk8ve] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 7.5px;
    font-weight: 700;
}

.sb2-auth-nm[b-3vnjiqk8ve] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb2-mut[b-3vnjiqk8ve] {
    white-space: nowrap;
    color: var(--ink-meta);
}


/* ════════════════════ 9 · A11Y FLOOR ════════════════════ */
.sb2-exp button:focus-visible[b-3vnjiqk8ve],
.sb2-exp input:focus-visible[b-3vnjiqk8ve] {
    outline: 2px solid var(--pink-bright);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sb2 *[b-3vnjiqk8ve], .sb2-exp[b-3vnjiqk8ve], .sb2-exp *[b-3vnjiqk8ve] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ════════════════════ 10 · RESPONSIVE CONTRACT ════════════════════ */
/* ≤640 the rail hides and the panel becomes a full-bleed sheet; the
   create doors return in the footer. */
@media (max-width: 640px) {
    .sb2-foot[b-3vnjiqk8ve] {
        display: flex;
    }

    .sb2-exp[b-3vnjiqk8ve] {
        top: env(safe-area-inset-top, 0px);
        bottom: 0;
        left: 0;
        width: 100vw;
        border-radius: 0;
        border: 0;
        border-top: 1px solid var(--line);
        box-shadow: none;
    }

    .sb2-welcome-steps[b-3vnjiqk8ve] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .sb2-warrow[b-3vnjiqk8ve] {
        margin-top: 0;
        transform: rotate(90deg);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Full viewport */
html[b-oibdebzfhm], body[b-oibdebzfhm], #app[b-oibdebzfhm] {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* white background */
    color: #000000; /* default text color */
    font-family: Arial, sans-serif;
}

/* App container takes full height */
.app-container[b-oibdebzfhm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.app-header[b-oibdebzfhm] {
    background-color: #f5f5f5;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Main content grows */
.app-main[b-oibdebzfhm] {
    flex: 1;
    /*padding: 2rem;*/
    background-color: #ffffff; /* ensures content background is white */
}

/* Footer */
.app-footer[b-oibdebzfhm] {
    background-color: #f5f5f5;
    padding: 1rem 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #555555;
}
/* Mobile fix for chat interface - only when ainna-page-container is present */
@media (max-width: 900px) {
    .app-container:has(.ainna-page-container)[b-oibdebzfhm] {
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        overflow: hidden;
    }

        .app-container:has(.ainna-page-container) .app-main[b-oibdebzfhm] {
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   AINNA RECONNECT MODAL
   Warm, minimal, on-brand. Matches landing page palette.

   Blazor adds these classes to #components-reconnect-modal:
     components-reconnect-show     → first attempt
     components-reconnect-retrying → subsequent attempts
     components-reconnect-failed   → gave up
     components-reconnect-rejected → server refused
     components-reconnect-hide     → connected / hidden
   ══════════════════════════════════════════════════ */

/* ── Dialog reset + centering ── */

#components-reconnect-modal.ainna-reconnect[b-l27ghbjggc] {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    place-items: center;
    margin: auto;
}

    #components-reconnect-modal.ainna-reconnect[b-l27ghbjggc]::backdrop {
        background: rgba(30, 28, 26, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

/* ── Show modal when Blazor sets any active state ── */

#components-reconnect-modal.components-reconnect-show[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-retrying[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-failed[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-rejected[b-l27ghbjggc] {
    display: grid;
}

    /* ── Backdrop fallback (CSS-driven, no showModal needed) ── */

    #components-reconnect-modal.components-reconnect-show[b-l27ghbjggc]::before,
    #components-reconnect-modal.components-reconnect-retrying[b-l27ghbjggc]::before,
    #components-reconnect-modal.components-reconnect-failed[b-l27ghbjggc]::before,
    #components-reconnect-modal.components-reconnect-rejected[b-l27ghbjggc]::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(30, 28, 26, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: -1;
    }

/* ── Container ── */

.ainna-reconnect-container[b-l27ghbjggc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 48px;
    background: #faf8f6;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    box-shadow: 0 24px 80px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    text-align: center;
    min-width: 300px;
    max-width: 380px;
}

/* ── Logo / spinner ── */

.ainna-reconnect-logo[b-l27ghbjggc] {
    color: #f00c71;
    margin-bottom: 4px;
}

.ainna-reconnect-spinner[b-l27ghbjggc] {
    animation: ainnaReconnectSpin-b-l27ghbjggc 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: 50px 50px;
}

@keyframes ainnaReconnectSpin-b-l27ghbjggc {
    0% {
        stroke-dashoffset: 289;
        transform: rotate(0deg);
    }

    50% {
        stroke-dashoffset: 72;
    }

    100% {
        stroke-dashoffset: 289;
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════
   STATE VISIBILITY
   All states hidden by default.
   Each becomes visible only when Blazor sets the
   matching class on the parent #components-reconnect-modal.

   Blazor keeps earlier classes when adding new ones
   (e.g. show + retrying both present), so later
   states must explicitly hide earlier ones.
   ══════════════════════════════════════════════════ */

.ainna-reconnect-state[b-l27ghbjggc] {
    display: none;
}

/* First attempt */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-l27ghbjggc] {
    display: block;
}

/* Repeated attempts — hide first-attempt message */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-l27ghbjggc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-l27ghbjggc] {
    display: block;
}

/* Failed — hide earlier messages */
#components-reconnect-modal.components-reconnect-failed .components-reconnect-first-attempt-visible[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-repeated-attempt-visible[b-l27ghbjggc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-l27ghbjggc] {
    display: block;
}

/* Rejected — hide all earlier messages */
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-first-attempt-visible[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-repeated-attempt-visible[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-failed-visible[b-l27ghbjggc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-l27ghbjggc] {
    display: block;
}

/* Hide spinner on terminal states */
#components-reconnect-modal.components-reconnect-failed .ainna-reconnect-logo[b-l27ghbjggc],
#components-reconnect-modal.components-reconnect-rejected .ainna-reconnect-logo[b-l27ghbjggc] {
    display: none;
}

/* ── Typography ── */

.ainna-reconnect-title[b-l27ghbjggc] {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #2c3e50;
    margin: 0;
    line-height: 1.3;
}

.ainna-reconnect-body[b-l27ghbjggc] {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ── Reload button ── */

.ainna-reconnect-btn[b-l27ghbjggc] {
    margin-top: 8px;
    padding: 10px 28px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    background: #f00c71;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(240, 12, 113, 0.25);
}

    .ainna-reconnect-btn:hover[b-l27ghbjggc] {
        background: #d60a64;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(240, 12, 113, 0.35);
    }

    .ainna-reconnect-btn:active[b-l27ghbjggc] {
        transform: translateY(0);
    }

/* ── Mobile ── */

@media (max-width: 480px) {
    .ainna-reconnect-container[b-l27ghbjggc] {
        padding: 32px 28px;
        min-width: auto;
        margin: 0 16px;
        max-width: calc(100vw - 32px);
    }
}
/* /Components/PaymentForm.razor.rz.scp.css */
/* PaymentModal.razor.css — v2 migrated */
/* Already well-themed with foundation vars; migrated: accent refs, radius, typography */

/* ============================================================================
   MODAL FOUNDATION
   ============================================================================ */

/* Container */
.modal-container[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    z-index: 10000 !important;
    animation: fadeIn-b-5u41zk90xq 0.2s ease-out;
}

@keyframes fadeIn-b-5u41zk90xq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Enhanced Backdrop with Better Visibility */
.modal-backdrop[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--bg-rgb), 0.15) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999 !important;
}

/* Modal - Desktop Only */
.modal[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    z-index: 10001 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .modal.show[b-5u41zk90xq] {
        display: flex !important;
    }

.modal-wrapper[b-5u41zk90xq] {
    position: relative;
    width: 100%;
    max-width: 1180px;
    height: 88vh;
    max-height: 860px;
    animation: slideUp-b-5u41zk90xq 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp-b-5u41zk90xq {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Enhanced Modal Content with Theme-Aware Gradient Border */
.modal-content[b-5u41zk90xq] {
    position: relative;
    background: var(--background-primary) !important;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .modal-content[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1px;
        background: var(--gradient-primary);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.1;
        pointer-events: none;
    }

/* ============================================================================
   MODAL HEADER
   ============================================================================ */

.modal-header[b-5u41zk90xq] {
    padding: 1rem 1.875rem;
    background: var(--background-secondary) !important;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}

    .modal-header[b-5u41zk90xq]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--shadow-color-light), var(--shadow-color), transparent);
    }

.header-container[b-5u41zk90xq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.header-left[b-5u41zk90xq] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex: 1;
}

.header-logo[b-5u41zk90xq] {
    height: 32px;
    display: block;
}

.header-right[b-5u41zk90xq] {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.375rem;
}

    .header-right > span[b-5u41zk90xq] {
        font-size: var(--text-md);
        color: var(--text-tertiary);
        line-height: 1;
    }

.stripe-logo[b-5u41zk90xq] {
    height: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    display: block;
    align-self: flex-end;
    transform: translateY(2px);
}

    .stripe-logo:hover[b-5u41zk90xq] {
        opacity: 1;
    }

/* Enhanced Close Button with Theme Colors */
.close-button[b-5u41zk90xq] {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    color: var(--text-tertiary) !important;
    margin-left: 16px;
}

    .close-button:hover[b-5u41zk90xq] {
        background: var(--card-bg-subtle);
        border-color: var(--border-strong);
        color: var(--text-secondary) !important;
    }

    .close-button svg[b-5u41zk90xq] {
        color: inherit !important;
    }

/* ============================================================================
   MODAL BODY - PAYMENT FORM LAYOUT
   ============================================================================ */

.modal-body[b-5u41zk90xq] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    background: transparent !important;
}

/* Desktop Column Split 40:60 */
.content-columns[b-5u41zk90xq] {
    display: grid;
    grid-template-columns: minmax(380px, 40%) minmax(400px, 60%);
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Customer Panel - TRANSPARENT */
.customer-panel[b-5u41zk90xq] {
    background: transparent !important;
    border-right: 1px solid var(--border-color);
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 1.875rem 1.875rem 1.875rem 2.5rem;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--background-tertiary);
}

/* Enhanced Customer Card */
.customer-card[b-5u41zk90xq] {
    background: var(--background-primary);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px var(--shadow-color-light), 0 2px 4px -1px var(--shadow-color-light);
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
}

.card-header[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.375rem;
    background: var(--card-bg-subtle);
    border-bottom: 1px solid var(--border-color);
}

.card-icon[b-5u41zk90xq] {
    color: var(--color-accent-2);
    flex-shrink: 0;
}

.card-title[b-5u41zk90xq] {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading) !important;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.card-body[b-5u41zk90xq] {
    padding: 1.5rem 1.375rem;
}

/* ============================================================================
   FORM CONTROLS
   ============================================================================ */

.form-group-elegant[b-5u41zk90xq] {
    margin-bottom: 1.375rem;
    position: relative;
}

.form-label-elegant[b-5u41zk90xq] {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem;
    letter-spacing: var(--letter-spacing-normal);
}

    .form-label-elegant .required[b-5u41zk90xq] {
        color: var(--accent);
        margin-left: 2px;
    }

.input-wrapper[b-5u41zk90xq] {
    position: relative;
}

.form-control-elegant[b-5u41zk90xq] {
    width: 100%;
    padding: 0.75rem 0.9375rem;
    font-size: var(--text-md);
    line-height: 1.4;
    color: var(--text-primary) !important;
    background: var(--background-primary) !important;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    outline: none;
}

    .form-control-elegant:hover[b-5u41zk90xq] {
        border-color: var(--color-accent-2);
        background: var(--background-primary) !important;
    }

    .form-control-elegant:focus[b-5u41zk90xq] {
        border-color: #64748B;
        box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.16);
    }

    .form-control-elegant[b-5u41zk90xq]::placeholder {
        color: var(--text-tertiary) !important;
        font-size: var(--text-base);
    }

    .form-control-elegant.error[b-5u41zk90xq] {
        border-color: var(--color-error);
        background: linear-gradient(to right, rgba(234, 67, 53, 0.05), var(--background-primary)) !important;
        border-width: 2px;
    }

        .form-control-elegant.error:focus[b-5u41zk90xq] {
            border-color: var(--color-error);
            box-shadow: 0 0 0 4px rgba(234, 67, 53, 0.1);
        }

    .form-control-elegant:disabled[b-5u41zk90xq] {
        background: var(--background-secondary) !important;
        color: var(--text-tertiary) !important;
        cursor: not-allowed;
        opacity: 0.6;
        border-color: var(--border-color);
    }

        .form-control-elegant:disabled[b-5u41zk90xq]::placeholder {
            color: var(--text-tertiary) !important;
            opacity: 0.5;
        }

/* Validation Message */
.validation-message[b-5u41zk90xq] {
    display: none;
    margin-top: 0.375rem;
    font-size: var(--text-sm);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 0.375rem;
    animation: slideDown-b-5u41zk90xq 0.2s ease-out;
}

@keyframes slideDown-b-5u41zk90xq {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-message.error[b-5u41zk90xq] {
    display: flex;
    color: var(--color-error);
    background: rgba(234, 67, 53, 0.1);
    border-left: 3px solid var(--color-error);
}

.validation-message svg[b-5u41zk90xq] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Enhanced Security Note with Success Colors */
.security-note[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-success-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-success-light);
    box-shadow: 0 2px 8px rgba(34, 139, 34, 0.08);
}

.note-icon[b-5u41zk90xq] {
    color: var(--color-success);
    flex-shrink: 0;
}

.note-content[b-5u41zk90xq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.note-title[b-5u41zk90xq] {
    font-size: var(--text-base);
    color: var(--color-success-dark);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-normal);
}

.note-text[b-5u41zk90xq] {
    font-size: 0.6875rem;
    color: var(--color-success);
    opacity: 0.9;
}

/* ============================================================================
   PAYMENT PANEL
   ============================================================================ */

.payment-panel[b-5u41zk90xq] {
    background: transparent !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--background-secondary);
}

.payment-container[b-5u41zk90xq] {
    padding: 1.875rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Enhanced Order Summary with Theme Colors */
.order-summary-compact[b-5u41zk90xq] {
    background: var(--card-bg-subtle);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    min-height: 140px;
    box-shadow: 0 1px 2px 0 var(--shadow-color-light);
    position: relative;
    overflow: hidden;
}

    .order-summary-compact[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, var(--shadow-color-light) 0%, transparent 70%);
        border-radius: 50%;
        transform: translate(20px, -20px);
    }

.order-inner[b-5u41zk90xq] {
    display: flex;
    align-items: flex-start;
    gap: 1.125rem;
    position: relative;
}

.order-details[b-5u41zk90xq] {
    flex: 1;
    min-height: 100px;
}

.order-product[b-5u41zk90xq] {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading) !important;
    margin: 0 0 0.5rem 0;
    letter-spacing: var(--letter-spacing-normal);
}

.order-description[b-5u41zk90xq] {
    font-size: var(--text-base);
    color: var(--text-secondary) !important;
    margin: 0;
    line-height: 1.5;
}

.order-price[b-5u41zk90xq] {
    text-align: right;
    flex-shrink: 0;
    padding-left: 1rem;
}

.price-label[b-5u41zk90xq] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-tertiary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.price-amount[b-5u41zk90xq] {
    display: block;
    font-size: 1.625rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--text-heading);
    letter-spacing: var(--letter-spacing-tight);
}

/* ============================================================================
   PLAN SUMMARY (left panel) + FORM SECTIONS / CHECKLISTS (right panel)
   Consolidated from inline styles.
   ============================================================================ */

.plan-summary[b-5u41zk90xq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Plan icon inlined with the name (no box) */
.plan-header[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

    .plan-header .order-product[b-5u41zk90xq] {
        margin: 0;
    }

.plan-icon[b-5u41zk90xq] {
    font-size: 1.375rem;
    line-height: 1;
    color: var(--accent);
    flex-shrink: 0;
}

.plan-price-row[b-5u41zk90xq] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

    .plan-price-row .price-label[b-5u41zk90xq] {
        margin: 0;
    }

/* Small uppercase section label ("What you unlock", "Invoice details (optional)") */
.section-eyebrow[b-5u41zk90xq] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
}

/* Benefit and trust checklists */
.unlock-list[b-5u41zk90xq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .unlock-list li[b-5u41zk90xq] {
        display: flex;
        align-items: flex-start;
        line-height: 1.45;
        color: var(--text-secondary);
        gap: 0.625rem;
        font-size: 0.85rem;
    }

        .unlock-list li svg[b-5u41zk90xq] {
            flex-shrink: 0;
            margin-top: 1px;
            stroke: var(--accent);
        }

/* Optional invoice-details block within the form */
.invoice-details[b-5u41zk90xq] {
    margin-top: 0.75rem;
}

/* Company + Tax ID on a single row */
.invoice-fields-row[b-5u41zk90xq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

    .invoice-fields-row .form-group-elegant[b-5u41zk90xq] {
        margin-bottom: 0;
    }

/* Spacing: Address Element above the card; trust block above the button */
.address-element[b-5u41zk90xq] {
    margin-bottom: 0;
}

.security-note.security-top[b-5u41zk90xq] {
    margin: 0 0 1.25rem;
}

/* Payment section: transparent container (no card chrome) */
.payment-section-elegant[b-5u41zk90xq] {
    background: transparent !important;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/* Stripe Element */
.stripe-element-elegant[b-5u41zk90xq] {
    padding: 0.5rem 0;
    background: transparent !important;
    position: relative;
    flex: 0 0 auto;
}

/* Only the card element reserves height for the loading overlay; the address element
       sizes to its own fields, so there is no empty gap beneath it. */
.card-element[b-5u41zk90xq] {
    min-height: 140px;
}

/* Form body: relative wrapper so the loading overlay can cover the mounting Stripe elements. */
.form-body[b-5u41zk90xq] {
    position: relative;
}

    /* During load, reserve height so the overlay has room while the elements mount underneath. */
    .form-body.form-loading[b-5u41zk90xq] {
        min-height: 240px;
    }

    /* Elegant staggered reveal once the elements are ready: the Stripe elements come in first,
       then the invoice details, then the button and note, in stack order. */
    .form-body.form-revealed > *[b-5u41zk90xq] {
        animation: formReveal-b-5u41zk90xq 0.35s ease both;
    }

        .form-body.form-revealed > *:nth-child(2)[b-5u41zk90xq] {
            animation-delay: 0.07s;
        }

        .form-body.form-revealed > *:nth-child(3)[b-5u41zk90xq] {
            animation-delay: 0.14s;
        }

        .form-body.form-revealed > *:nth-child(4)[b-5u41zk90xq] {
            animation-delay: 0.21s;
        }

        .form-body.form-revealed > *:nth-child(5)[b-5u41zk90xq] {
            animation-delay: 0.28s;
        }

@keyframes formReveal-b-5u41zk90xq {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Full-cover loading state shown while Stripe mounts */
.form-loading-overlay[b-5u41zk90xq] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    background: var(--background-primary);
    border-radius: 12px;
    z-index: 2;
}

/* Loading State */
.loading-spinner[b-5u41zk90xq] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-5u41zk90xq 0.8s linear infinite;
}

@keyframes spin-b-5u41zk90xq {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-5u41zk90xq] {
    font-size: var(--text-md);
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium);
}

/* Alerts */
.alert[b-5u41zk90xq] {
    margin: 1rem 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--text-base);
}

.alert-error[b-5u41zk90xq] {
    background: rgba(234, 67, 53, 0.1) !important;
    border: 1px solid var(--color-error) !important;
    color: var(--color-error) !important;
}

.alert-icon[b-5u41zk90xq] {
    flex-shrink: 0;
}

/* Payment Button Container */
.payment-button-container[b-5u41zk90xq] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0;
    flex-shrink: 0;
    background: transparent;
    position: relative;
    z-index: 10;
}

/* Discrete reassurance line beneath the button */
.post-button-note[b-5u41zk90xq] {
    text-align: center;
    font-size: 0.75rem;
    color: #B8BEC7;
    margin: 0.75rem 0 0;
}

/* Enhanced Payment Button - NO ICON */
.btn-payment-elegant[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 1rem 1.75rem;
    background: var(--gradient-button) !important;
    color: var(--background-primary) !important;
    border: none;
    border-radius: 14px;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-normal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px -10px var(--shadow-color);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

    .btn-payment-elegant[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-payment-elegant:hover:not(:disabled)[b-5u41zk90xq] {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -10px var(--shadow-color);
        filter: brightness(1.05);
    }

        .btn-payment-elegant:hover:not(:disabled)[b-5u41zk90xq]::before {
            width: 400px;
            height: 400px;
        }

    .btn-payment-elegant:active:not(:disabled)[b-5u41zk90xq] {
        transform: translateY(0);
    }

    .btn-payment-elegant:disabled[b-5u41zk90xq] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-payment-elegant span[b-5u41zk90xq] {
        position: relative;
        z-index: 1;
        color: var(--background-primary);
    }

.btn-processing[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
}

.btn-spinner[b-5u41zk90xq] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--background-primary);
    border-radius: 50%;
    animation: spin-b-5u41zk90xq 0.8s linear infinite;
}

/* Empty State (for initialization) */
.empty-state[b-5u41zk90xq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--text-tertiary) !important;
}

.empty-state-icon[b-5u41zk90xq] {
    color: var(--border-color);
    margin-bottom: 1rem;
}

.empty-state-text[b-5u41zk90xq] {
    font-size: var(--text-md);
    margin: 0;
    color: var(--text-tertiary) !important;
}

/* ============================================================================
   PAYMENT STATE SCREENS (Processing, Success, Error)
   ============================================================================ */

/* State Container - Full Width/Height with Centered Content */
.state-container[b-5u41zk90xq] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--background-primary);
}

.state-card[b-5u41zk90xq] {
    width: 100%;
    max-width: 560px;
    background: transparent;
    padding: 1rem 0;
    text-align: center;
    position: relative;
}

.state-animation[b-5u41zk90xq] {
    margin-bottom: 2.25rem;
    display: flex;
    justify-content: center;
}

/* Processing State */
.payment-spinner[b-5u41zk90xq] {
    position: relative;
    width: 88px;
    height: 88px;
}

.spinner-ring[b-5u41zk90xq] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: spinRing-b-5u41zk90xq 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

    .spinner-ring:nth-child(1)[b-5u41zk90xq] {
        animation-delay: -0.45s;
        border-top-color: var(--accent);
        border-right-color: var(--accent);
    }

    .spinner-ring:nth-child(2)[b-5u41zk90xq] {
        animation-delay: -0.3s;
        border-top-color: var(--color-accent-2);
        opacity: 0.7;
    }

    .spinner-ring:nth-child(3)[b-5u41zk90xq] {
        animation-delay: -0.15s;
        border-top-color: var(--shadow-color);
        opacity: 0.4;
    }

@keyframes spinRing-b-5u41zk90xq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Success State */
.success-checkmark[b-5u41zk90xq] {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--color-success-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-5u41zk90xq 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

    .success-checkmark svg[b-5u41zk90xq] {
        color: var(--color-success);
        stroke: var(--color-success);
        width: 28px;
        height: 28px;
    }

@keyframes scaleIn-b-5u41zk90xq {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Success: re-present the purchased plan */
.success-plan[b-5u41zk90xq] {
    text-align: left;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}

.success-plan-head[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

    .success-plan-head:not(:only-child)[b-5u41zk90xq] {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }

.success-plan-id[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.success-plan-name[b-5u41zk90xq] {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
}

.success-plan-price[b-5u41zk90xq] {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    white-space: nowrap;
}

.success-unlock[b-5u41zk90xq] {
    margin-top: 1rem;
}

/* Success: "Where to start" quick-value copy */
.success-next[b-5u41zk90xq] {
    text-align: center;
    margin: 0 0 2rem;
}

    .success-next .section-eyebrow[b-5u41zk90xq] {
        margin-bottom: 0.5rem;
    }

.success-next-copy[b-5u41zk90xq] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Error State */
.error-icon[b-5u41zk90xq] {
    width: 60px;
    height: 60px;
    background: rgba(234, 67, 53, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInScale-b-5u41zk90xq 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

    .error-icon svg[b-5u41zk90xq] {
        color: var(--color-error);
        stroke: var(--color-error);
        width: 26px;
        height: 26px;
    }

@keyframes fadeInScale-b-5u41zk90xq {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.error-details[b-5u41zk90xq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.125rem 1.375rem;
    background: rgba(234, 67, 53, 0.06);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(234, 67, 53, 0.15);
    margin: 1.5rem 0;
    text-align: left;
    box-shadow: 0 2px 8px rgba(234, 67, 53, 0.05);
}

    .error-details svg[b-5u41zk90xq] {
        color: var(--color-error);
        flex-shrink: 0;
        margin-top: 2px;
        width: 16px;
        height: 16px;
    }

    .error-details span[b-5u41zk90xq] {
        font-size: var(--text-md);
        color: var(--color-error);
        line-height: 1.6;
        font-weight: var(--font-weight-medium);
    }

.help-note[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-md);
    color: var(--text-secondary) !important;
    line-height: 1.5;
}

    .help-note svg[b-5u41zk90xq] {
        color: var(--color-accent-2);
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }

    .help-note a[b-5u41zk90xq] {
        color: var(--accent);
        text-decoration: none;
        font-weight: var(--font-weight-bold);
        transition: all 0.2s ease;
    }

        .help-note a:hover[b-5u41zk90xq] {
            text-decoration: underline;
            color: var(--color-accent-2);
        }

/* State Typography */
.state-title[b-5u41zk90xq] {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading) !important;
    margin: 0 0 1.125rem 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.2;
}

.state-message[b-5u41zk90xq] {
    font-size: var(--text-lg);
    color: var(--text-secondary) !important;
    line-height: 1.65;
    margin: 0 0 2rem 0;
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-normal);
}

    .state-message strong[b-5u41zk90xq] {
        color: var(--text-primary) !important;
        font-weight: var(--font-weight-bold);
    }

/* State Details (Processing) */
.state-details[b-5u41zk90xq] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 2rem 0;
    padding: 1.375rem 1.5rem;
    background: var(--background-primary);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color-light);
}

.detail-item[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-size: var(--text-md);
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium);
}

.detail-icon[b-5u41zk90xq] {
    color: var(--color-success);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.stripe-badge[b-5u41zk90xq] {
    height: 20px;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.detail-item:hover .stripe-badge[b-5u41zk90xq] {
    opacity: 1;
}

/* State Buttons */
.btn-state[b-5u41zk90xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 2.25rem;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: var(--letter-spacing-normal);
    min-width: 200px;
    position: relative;
    overflow: hidden;
}

    .btn-state[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-state:hover[b-5u41zk90xq]::before {
        width: 400px;
        height: 400px;
    }

    .btn-state.primary[b-5u41zk90xq] {
        background: var(--gradient-button) !important;
        color: var(--background-primary) !important;
        box-shadow: 0 12px 28px -8px var(--shadow-color);
    }

        .btn-state.primary:hover[b-5u41zk90xq] {
            transform: translateY(-2px);
            box-shadow: 0 16px 32px -8px var(--shadow-color);
            filter: brightness(1.05);
        }

        .btn-state.primary:active[b-5u41zk90xq] {
            transform: translateY(0);
        }

    .btn-state.secondary[b-5u41zk90xq] {
        background: var(--background-primary) !important;
        color: var(--text-primary) !important;
        border: 2px solid var(--border-color);
        box-shadow: 0 2px 8px var(--shadow-color-light);
    }

        .btn-state.secondary:hover[b-5u41zk90xq] {
            background: var(--card-bg-subtle) !important;
            border-color: var(--border-strong);
        }

    .btn-state svg[b-5u41zk90xq],
    .btn-state i[b-5u41zk90xq] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .btn-state span[b-5u41zk90xq] {
        position: relative;
        z-index: 1;
    }

    .btn-state.primary svg[b-5u41zk90xq],
    .btn-state.primary i[b-5u41zk90xq],
    .btn-state.primary span[b-5u41zk90xq] {
        color: var(--background-primary) !important;
    }

/* State Actions (Multiple Buttons) */
.state-actions[b-5u41zk90xq] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ============================================================================
   UTILITY ELEMENTS
   ============================================================================ */

/* Scrollbar Styling */
.customer-panel[b-5u41zk90xq]::-webkit-scrollbar,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar {
    width: 6px;
}

.customer-panel[b-5u41zk90xq]::-webkit-scrollbar-track,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--radius-sm);
}

.customer-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-sm);
}

    .customer-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb:hover,
    .payment-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb:hover {
        background: var(--text-tertiary);
    }

/* Text Visibility */
.modal-content *[b-5u41zk90xq] {
    color: var(--text-primary);
}

.modal-content h1[b-5u41zk90xq],
.modal-content h2[b-5u41zk90xq],
.modal-content h3[b-5u41zk90xq],
.modal-content h4[b-5u41zk90xq],
.modal-content h5[b-5u41zk90xq],
.modal-content h6[b-5u41zk90xq] {
    color: var(--text-heading) !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - MOBILE & TABLET
   ============================================================================ */

@media (max-width: 1024px) {
    .modal[b-5u41zk90xq] {
        padding: 0;
        align-items: stretch;
    }

    .modal-wrapper[b-5u41zk90xq] {
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
    }

    .modal-content[b-5u41zk90xq] {
        border-radius: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

        .modal-content[b-5u41zk90xq]::before {
            display: none;
        }

    .modal-header[b-5u41zk90xq] {
        padding: 1.25rem 1.5rem;
        flex-shrink: 0;
    }

    /* CRITICAL: Make body scrollable */
    .modal-body[b-5u41zk90xq] {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        min-height: 0;
    }

    .content-columns[b-5u41zk90xq] {
        display: block;
        height: auto;
        min-height: 100%;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        max-height: none;
        height: auto;
        overflow: visible;
        padding: 1.5rem;
        border: none;
    }

    .customer-panel[b-5u41zk90xq] {
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }

    .payment-container[b-5u41zk90xq] {
        padding: 1.5rem;
        min-height: auto;
        height: auto;
        padding-bottom: 3rem;
    }

    .payment-section-elegant[b-5u41zk90xq] {
        flex: none;
        margin-bottom: 1rem;
        overflow: visible;
    }

    .form-control-elegant[b-5u41zk90xq] {
        font-size: 16px;
        padding: 0.875rem 1rem;
        min-height: 44px;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        max-height: none;
        padding: 1rem 1.25rem;
        flex: none;
    }

    .payment-button-container[b-5u41zk90xq] {
        padding: 1.5rem 1rem 2rem;
        margin-top: 1rem;
        position: relative;
        background: var(--background-primary);
        border-top: 1px solid var(--border-color);
    }

    .btn-payment-elegant[b-5u41zk90xq] {
        max-width: 100%;
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: var(--text-lg);
        min-height: 50px;
    }

    .order-summary-compact[b-5u41zk90xq] {
        min-height: 130px;
    }

    /* State Screens Mobile */
    .state-container[b-5u41zk90xq] {
        padding: 2rem 1.5rem;
        align-items: flex-start;
        padding-top: 3rem;
    }

    .state-card[b-5u41zk90xq] {
        padding: 2.5rem 2rem;
    }

    .state-title[b-5u41zk90xq] {
        font-size: 1.5rem;
    }

    .state-message[b-5u41zk90xq] {
        font-size: 0.9375rem;
    }

    .payment-spinner[b-5u41zk90xq],
    .success-checkmark[b-5u41zk90xq],
    .error-icon[b-5u41zk90xq] {
        width: 72px;
        height: 72px;
    }

        .success-checkmark i[b-5u41zk90xq] {
            font-size: 40px;
        }

        .error-icon i[b-5u41zk90xq] {
            font-size: 40px;
        }

        .error-icon svg[b-5u41zk90xq] {
            width: 40px;
            height: 40px;
        }

    .btn-state[b-5u41zk90xq] {
        width: 100%;
        min-width: auto;
        padding: 0.9375rem 2rem;
    }

    .state-actions[b-5u41zk90xq] {
        flex-direction: column;
        gap: 0.875rem;
    }

    .success-summary[b-5u41zk90xq] {
        padding: 1.5rem 1.25rem;
    }

    .summary-row[b-5u41zk90xq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .help-note[b-5u41zk90xq] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

/* Mobile-specific refinements */
@media (max-width: 640px) {
    .modal-header[b-5u41zk90xq] {
        padding: 1rem 1.25rem;
    }

    .header-right span[b-5u41zk90xq] {
        display: none;
    }

    .stripe-logo[b-5u41zk90xq] {
        display: none;
    }

    .close-button[b-5u41zk90xq] {
        width: 36px;
        height: 36px;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1.25rem;
    }

    .payment-container[b-5u41zk90xq] {
        padding: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        padding: 1rem 1.25rem;
    }

    .payment-button-container[b-5u41zk90xq] {
        padding: 1.25rem 1rem 2rem;
        margin-top: 0.75rem;
    }

    .order-inner[b-5u41zk90xq] {
        flex-direction: column;
        text-align: center;
    }

    .order-price[b-5u41zk90xq] {
        text-align: center;
        padding: 0;
        margin-top: 1rem;
    }

    .validation-message[b-5u41zk90xq] {
        font-size: 0.6875rem;
    }

    /* State screens mobile */
    .state-container[b-5u41zk90xq] {
        padding: 1.5rem 1.25rem;
        padding-top: 2rem;
    }

    .state-card[b-5u41zk90xq] {
        padding: 2rem 1.5rem;
        box-shadow: 0 10px 25px -10px var(--shadow-color-light);
    }

    .state-title[b-5u41zk90xq] {
        font-size: 1.375rem;
    }

    .state-message[b-5u41zk90xq] {
        font-size: var(--text-md);
        margin-bottom: 1.75rem;
    }

    .state-animation[b-5u41zk90xq] {
        margin-bottom: 1.75rem;
    }

    .payment-spinner[b-5u41zk90xq],
    .success-checkmark[b-5u41zk90xq],
    .error-icon[b-5u41zk90xq] {
        width: 64px;
        height: 64px;
    }

        .success-checkmark i[b-5u41zk90xq] {
            font-size: 36px;
        }

        .error-icon i[b-5u41zk90xq] {
            font-size: 36px;
        }

        .error-icon svg[b-5u41zk90xq] {
            width: 36px;
            height: 36px;
        }

    .btn-state[b-5u41zk90xq] {
        padding: 0.875rem 1.75rem;
        font-size: 0.9375rem;
        min-height: 50px;
    }

    .success-summary[b-5u41zk90xq] {
        padding: 1.25rem 1rem;
        margin: 1.5rem 0;
    }

    .summary-row[b-5u41zk90xq] {
        padding: 0.625rem 0;
    }

    .summary-label[b-5u41zk90xq] {
        font-size: var(--text-base);
    }

    .summary-value[b-5u41zk90xq] {
        font-size: 0.9375rem;
    }

    .state-details[b-5u41zk90xq] {
        padding: 1.125rem 1.25rem;
        margin: 1.5rem 0;
    }

    .error-details[b-5u41zk90xq] {
        padding: 1rem 1.125rem;
        margin: 1.25rem 0;
    }

    .help-note[b-5u41zk90xq] {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        font-size: var(--text-base);
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .modal-header[b-5u41zk90xq] {
        padding: 0.875rem 1rem;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1rem;
    }

    .payment-container[b-5u41zk90xq] {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .order-summary-compact[b-5u41zk90xq] {
        padding: 1.25rem 1rem;
    }

    .payment-button-container[b-5u41zk90xq] {
        padding: 1rem 0.75rem 1.5rem;
    }

    .btn-payment-elegant[b-5u41zk90xq] {
        min-height: 48px;
        padding: 0.875rem 1.25rem;
    }

    /* State screens very small */
    .state-container[b-5u41zk90xq] {
        padding: 1.25rem 1rem;
    }

    .state-card[b-5u41zk90xq] {
        padding: 1.75rem 1.25rem;
    }

    .state-title[b-5u41zk90xq] {
        font-size: 1.25rem;
    }

    .state-message[b-5u41zk90xq] {
        font-size: var(--text-base);
    }

    .btn-state[b-5u41zk90xq] {
        padding: 0.8125rem 1.5rem;
        font-size: var(--text-md);
        min-height: 48px;
    }

    .payment-spinner[b-5u41zk90xq],
    .success-checkmark[b-5u41zk90xq],
    .error-icon[b-5u41zk90xq] {
        width: 56px;
        height: 56px;
    }

        .success-checkmark i[b-5u41zk90xq] {
            font-size: 32px;
        }

        .error-icon i[b-5u41zk90xq] {
            font-size: 32px;
        }

        .error-icon svg[b-5u41zk90xq] {
            width: 32px;
            height: 32px;
        }
}

/* Landscape orientation on smaller devices */
@media (max-height: 600px) and (max-width: 1024px) {
    .modal-header[b-5u41zk90xq] {
        padding: 0.875rem 1.25rem;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1rem;
    }

    .payment-container[b-5u41zk90xq] {
        padding-bottom: 1.5rem;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        padding: 0.875rem 1rem;
    }

    .payment-button-container[b-5u41zk90xq] {
        padding: 1rem 1rem 1.5rem;
        margin-top: 0.5rem;
    }

    /* State screens landscape */
    .state-container[b-5u41zk90xq] {
        padding: 1rem;
        align-items: flex-start;
    }

    .state-card[b-5u41zk90xq] {
        padding: 1.5rem 1.25rem;
    }

    .state-animation[b-5u41zk90xq] {
        margin-bottom: 1.25rem;
    }

    .state-title[b-5u41zk90xq] {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .state-message[b-5u41zk90xq] {
        font-size: var(--text-base);
        margin-bottom: 1.25rem;
    }

    .payment-spinner[b-5u41zk90xq],
    .success-checkmark[b-5u41zk90xq],
    .error-icon[b-5u41zk90xq] {
        width: 56px;
        height: 56px;
    }

        .success-checkmark i[b-5u41zk90xq] {
            font-size: 32px;
        }

        .error-icon i[b-5u41zk90xq] {
            font-size: 32px;
        }

    .btn-state[b-5u41zk90xq] {
        padding: 0.75rem 1.5rem;
        min-height: 44px;
    }

    .state-details[b-5u41zk90xq],
    .success-summary[b-5u41zk90xq] {
        margin: 1.25rem 0;
        padding: 1rem;
    }
}

/* Ensure scrolling on very short screens */
@media (max-height: 700px) {
    .modal-wrapper[b-5u41zk90xq] {
        height: 100vh;
        max-height: 100vh;
    }

    .modal-body[b-5u41zk90xq] {
        overflow-y: auto !important;
    }

    .payment-section-elegant[b-5u41zk90xq] {
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   ACCESSIBILITY & PRINT
   ============================================================================ */

/* Accessibility */
*:focus-visible[b-5u41zk90xq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-control-elegant:focus-visible[b-5u41zk90xq] {
    outline: none;
}

.close-button:focus-visible[b-5u41zk90xq],
.btn-payment-elegant:focus-visible[b-5u41zk90xq],
.btn-state:focus-visible[b-5u41zk90xq] {
    outline-offset: 4px;
}

/* Print Styles */
@media print {
    .modal-backdrop[b-5u41zk90xq] {
        display: none;
    }

    .modal[b-5u41zk90xq] {
        position: static;
    }

    .modal-content[b-5u41zk90xq] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .close-button[b-5u41zk90xq],
    .btn-payment-elegant[b-5u41zk90xq],
    .btn-state[b-5u41zk90xq] {
        display: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-5u41zk90xq],
    *[b-5u41zk90xq]::before,
    *[b-5u41zk90xq]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Success: live plan-activation status. The webhook grants asynchronously; this line
   shows Checking (pulsing dot) -> Active (check) or, after ~10s, a reassuring
   "ready shortly" — never an error, the payment has already settled. */
.activation-status[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: -0.5rem 0 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    letter-spacing: var(--letter-spacing-normal);
}

    .activation-status.is-active[b-5u41zk90xq] {
        color: var(--color-success);
    }

.activation-dot[b-5u41zk90xq] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: activation-pulse-b-5u41zk90xq 1.1s ease-in-out infinite;
}

@keyframes activation-pulse-b-5u41zk90xq {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.activation-check[b-5u41zk90xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    flex-shrink: 0;
}

/* Price shimmer while the Stripe price string loads (first open only; the plan list is
   cached by the service afterwards, so reopens resolve instantly). */
.price-skeleton[b-5u41zk90xq] {
    display: inline-block;
    width: 76px;
    height: 1.25em;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--background-secondary) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: priceShimmer-b-5u41zk90xq 1.1s ease-in-out infinite;
}

@keyframes priceShimmer-b-5u41zk90xq {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: 0 0;
    }
}
/* /Components/ProdComponents/AinnaIsland.razor.rz.scp.css */
/* AinnaIsland — the floating pill. The host decides where it sits.
   Thin glass: little fill, moderate blur, no hard outline — the pill is
   defined by its shadow and a light top edge. Text only, near-black.
   Busy adds nothing to the width (sweep + dots in the trailing pad).
   TOKEN MIRROR (literals, source = toolbar token block): pink #E0176B ·
   pink-deep #C71260 · ink #1C1A1F · ink-dim #5E5862 · ink-word #4A444C. */

.isl[b-x6i1w4s88i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    max-width: 100%;
    padding: 0 16px 0 8px; /* trailing room for the busy dots — constant */
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 28px rgba(20, 18, 24, 0.12), 0 2px 6px rgba(20, 18, 24, 0.06);
    color: #1C1A1F;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    animation: isl-in-b-x6i1w4s88i 0.2s ease both;
}

@supports not (backdrop-filter: blur(1px)) {
    .isl[b-x6i1w4s88i] {
        background: rgba(255, 255, 255, 0.9);
    }
}

@keyframes isl-in-b-x6i1w4s88i {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.isl-back[b-x6i1w4s88i] {
    gap: 7px;
    color: #1C1A1F;
}

    .isl-back .isl-code[b-x6i1w4s88i] {
        font-weight: 700;
    }

    .isl-back:hover:not(:disabled)[b-x6i1w4s88i] {
        color: #C71260;
    }

.isl-arrow[b-x6i1w4s88i] {
    font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #C71260;
}

.isl-word[b-x6i1w4s88i] {
    font-family: 'Newsreader', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1;
    color: #5E5862;
    white-space: nowrap;
}

.isl-seg[b-x6i1w4s88i] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    min-width: 0;
    flex: 0 1 auto;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #5E5862;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .isl-seg:hover:not(:disabled)[b-x6i1w4s88i] {
        background: rgba(20, 18, 24, 0.06);
        color: #1C1A1F;
    }

    .isl-seg.is-cur[b-x6i1w4s88i] {
        color: #1C1A1F;
    }

        .isl-seg.is-cur .isl-code[b-x6i1w4s88i] {
            font-weight: 700;
        }

        .isl-seg.is-cur:hover:not(:disabled)[b-x6i1w4s88i] {
            color: #C71260;
        }

    .isl-seg:disabled[b-x6i1w4s88i] {
        cursor: default;
        opacity: 0.7;
    }

    .isl-seg.is-live[b-x6i1w4s88i] {
        color: #1C1A1F;
        cursor: default;
        gap: 6px;
    }

        .isl-seg.is-live i[b-x6i1w4s88i] {
            font-size: 10px;
            color: #C71260;
        }

.isl-code[b-x6i1w4s88i] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
}

.isl-seg.is-stub .isl-code[b-x6i1w4s88i] {
    font-weight: 500;
    font-style: italic;
    text-transform: none;
}

.isl-slash[b-x6i1w4s88i] {
    flex: 0 0 auto;
    color: rgba(20, 18, 24, 0.28);
    font-size: 12px;
    margin: 0 2px;
}

/* busy: reflection only — the work owns its Cancel. Nothing here adds
   width: the dots sit in the pill's constant trailing padding. */
.isl-dots[b-x6i1w4s88i] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

    .isl-dots i[b-x6i1w4s88i] {
        display: block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #C71260;
        animation: isl-dot-b-x6i1w4s88i 1.2s infinite;
    }

        .isl-dots i:nth-child(2)[b-x6i1w4s88i] {
            animation-delay: 0.2s;
        }

        .isl-dots i:nth-child(3)[b-x6i1w4s88i] {
            animation-delay: 0.4s;
        }

@keyframes isl-dot-b-x6i1w4s88i {
    0%, 80%, 100% {
        opacity: 0.2;
    }

    40% {
        opacity: 1;
    }
}

.isl-sweep[b-x6i1w4s88i] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

    .isl-sweep b[b-x6i1w4s88i] {
        position: absolute;
        top: 0;
        width: 40%;
        height: 2px;
        background: #E0176B;
        animation: isl-sweep-b-x6i1w4s88i 1.4s linear infinite;
    }

@keyframes isl-sweep-b-x6i1w4s88i {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

.isl button:focus-visible[b-x6i1w4s88i] {
    outline: 2px solid #C71260;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .isl[b-x6i1w4s88i], .isl *[b-x6i1w4s88i] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/ProdComponents/AinnaRail.razor.rz.scp.css */
/* AinnaRail — scoped styles. DARK CAPSULE (left half) per the Ainna Nav
   handoff. v4: the top bar is retired, so the rail starts at 8px and
   carries the brand; its surface is the idea-viewer header gradient
   (#15292C → #0A191D). Conservative syntax kept on purpose: no :root (dead under CSS
   isolation), no inset/place-items shorthands, no :is().

   THE CAPSULE: this nav is the left half of one floating object; the
   toolbar's discovery panel is the right half. Shared geometry, mirrored
   as literals (the codebase's fallback-coupling idiom — no variable
   crosses the component boundary):
     top gap 8 under the bar · bottom gap 14 · radius 18 · shadow
     0 16px 40px rgba(18,17,22,.35) · rail left 8 · rail width 80
     → content beside the rail anchors at 88px = var(--ainna-rail-w, 88px)
       fallback in BOTH this file (flyout) and the toolbar css (panel).
   When the panel is open the root carries is-docked: right corners
   square, right border off — the panel's border-left is the one seam.

   TOKEN MIRROR (literals; source of truth = toolbar token block):
     rail-bg #0A191D→#17292D · panel #1B3034 · seam #142529 · pink #E0176B · pink-hover #CB1560
     pink-deep #C71260 · pink-bright #FF5C9E · pink-link #FF8FBB
     pink-plus #FF7EB0 · amber #E5A94F · ink-hi #F5F0F4 · ink-mid #CFC5CE
     ink-soft #B4AAB3 · ink-dim #A99FA8 · ink-meta #A79DA6
     badge-chip #2C4247 · avatar #3A5055 · line rgba(255,255,255,.08)
     line-strong rgba(255,255,255,.14) · fill-hover rgba(255,255,255,.06)
     fill-hover2 rgba(255,255,255,.08) · fill-badge rgba(255,255,255,.10)

   STATE SEMANTICS (unchanged, restyled):
     is-on = Current section (family door) · is-pressed = panel open
     (primary only) · is-open = flyout open · +/›/↗/lock corner marks =
     the pass-20 species grammar · is-busy = the whisper lock. */

.arail[b-rr6dhqxy4n] {
    position: fixed;
    left: 8px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: 14px;
    width: 80px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 6px 12px;
    background: #0E1F23;
    background-image: linear-gradient(172deg, #17292D 0%, #0F2024 38%, #0A191D 72%, #0C1B1F 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(18, 17, 22, 0.35);
    box-sizing: border-box;
    font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: visible; /* tooltips and marks may cross the edge; the compact ladder keeps the stack inside the viewport */
    scrollbar-width: thin;
    scrollbar-color: #3B4E52 transparent;
}

    .arail[b-rr6dhqxy4n]::-webkit-scrollbar {
        width: 6px;
    }

    .arail[b-rr6dhqxy4n]::-webkit-scrollbar-thumb {
        background: #3B4E52;
        border-radius: 6px;
    }

    .arail[b-rr6dhqxy4n]::-webkit-scrollbar-track {
        background: transparent;
    }

    /* panel open: the rail is the capsule's left half — square right
       edge, no right border (the panel's border-left is the seam) */
    .arail.is-docked[b-rr6dhqxy4n] {
        border-radius: 18px 0 0 18px;
        border-right: 0;
    }

/* ── brand: the wordmark, sat at the top of the capsule ── */
.arail-brand[b-rr6dhqxy4n] {
    flex: 0 0 auto;
    height: 40px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    color: #F5F0F4;
    transition: background 0.15s ease;
}

    .arail-brand:hover[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.06);
    }

    .arail-brand img[b-rr6dhqxy4n] {
        display: block;
        height: 20px;
        width: auto;
        max-width: 62px;
    }

        /* light-bg asset on the dark rail: invert lifts the ink to white,
           the hue rotation brings the pink mark back round */
        .arail-brand img.is-inverted[b-rr6dhqxy4n] {
            filter: invert(1) hue-rotate(180deg);
        }

.arail-sep[b-rr6dhqxy4n] {
    height: 1px;
    width: 30px;
    margin: 6px auto;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 1px;
}

.arail-spacer[b-rr6dhqxy4n] {
    flex: 1 1 auto;
}

/* ── the tile: flat on dark; the card chrome died with the light theme ── */
.arail-btn[b-rr6dhqxy4n] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 54px;
    padding: 4px 3px;
    min-width: 0;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 17px;
    color: #CFC5CE;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .arail-btn > i.fas[b-rr6dhqxy4n] {
        line-height: 1;
    }

    .arail-btn svg[b-rr6dhqxy4n] {
        width: 20px;
        height: 20px;
        display: block;
    }

    .arail-btn em[b-rr6dhqxy4n] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-style: normal;
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #A99FA8;
    }

    .arail-btn:hover:not(:disabled)[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.08);
        color: #F5F0F4;
    }

        .arail-btn:hover:not(:disabled) em[b-rr6dhqxy4n] {
            color: #CFC5CE;
        }

    .arail-btn:disabled[b-rr6dhqxy4n] {
        /* busy tiles must LOOK dead, not merely be dead — the rail sits
           outside the section veil's cover. Declared early on purpose:
           .arail-port:disabled (later in the file) keeps winning the
           locked Portfolio tile at its own resting look. */
        opacity: 0.5;
        cursor: default;
    }

/* ── ONE selection grammar: pink wash, pink ink, pink edge indicator ── */
.arail-nav.is-on[b-rr6dhqxy4n],
.arail-cta-up.is-on[b-rr6dhqxy4n],
.arail-plan.is-on[b-rr6dhqxy4n],
.arail-cta-fb.is-on[b-rr6dhqxy4n],
.arail-cta-ag.is-on[b-rr6dhqxy4n],
.arail-acct.is-on[b-rr6dhqxy4n],
.arail-primary.is-pressed[b-rr6dhqxy4n] {
    background: rgba(224, 23, 107, 0.16);
    border-color: rgba(255, 92, 158, 0.28);
    color: #FF5C9E;
    box-shadow: none;
}

    .arail-nav.is-on em[b-rr6dhqxy4n],
    .arail-cta-up.is-on em[b-rr6dhqxy4n],
    .arail-cta-fb.is-on em[b-rr6dhqxy4n],
    .arail-cta-ag.is-on em[b-rr6dhqxy4n],
    .arail-acct.is-on em[b-rr6dhqxy4n],
    .arail-primary.is-pressed em[b-rr6dhqxy4n] {
        color: #FF8FBB;
    }

    .arail-nav.is-on[b-rr6dhqxy4n]::before,
    .arail-cta-up.is-on[b-rr6dhqxy4n]::before,
    .arail-plan.is-on[b-rr6dhqxy4n]::before,
    .arail-cta-fb.is-on[b-rr6dhqxy4n]::before,
    .arail-cta-ag.is-on[b-rr6dhqxy4n]::before,
    .arail-acct.is-on[b-rr6dhqxy4n]::before {
        content: "";
        position: absolute;
        left: -5px;
        top: 50%;
        width: 3px;
        height: 22px;
        border-radius: 3px;
        background: #FF5C9E;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .arail-nav.is-on:hover:not(:disabled)[b-rr6dhqxy4n],
    .arail-cta-up.is-on:hover:not(:disabled)[b-rr6dhqxy4n],
    .arail-cta-fb.is-on:hover:not(:disabled)[b-rr6dhqxy4n],
    .arail-cta-ag.is-on:hover:not(:disabled)[b-rr6dhqxy4n],
    .arail-acct.is-on:hover[b-rr6dhqxy4n],
    .arail-primary.is-pressed:hover:not(:disabled)[b-rr6dhqxy4n] {
        background: rgba(224, 23, 107, 0.24);
        border-color: rgba(255, 92, 158, 0.4);
        color: #FF5C9E;
    }

        .arail-nav.is-on:hover:not(:disabled) em[b-rr6dhqxy4n],
        .arail-cta-up.is-on:hover:not(:disabled) em[b-rr6dhqxy4n],
        .arail-cta-fb.is-on:hover:not(:disabled) em[b-rr6dhqxy4n],
        .arail-cta-ag.is-on:hover:not(:disabled) em[b-rr6dhqxy4n],
        .arail-acct.is-on:hover em[b-rr6dhqxy4n],
        .arail-primary.is-pressed:hover:not(:disabled) em[b-rr6dhqxy4n] {
            color: #FF8FBB;
        }

/* ── SPACE, the hub: pink-bright glyph at rest; selection grammar above
   covers is-on and is-pressed (panel open) ── */
.arail-primary[b-rr6dhqxy4n] {
    color: #FF5C9E;
}

    .arail-primary:hover:not(:disabled)[b-rr6dhqxy4n] {
        color: #FF5C9E;
    }

        .arail-primary:hover:not(:disabled) em[b-rr6dhqxy4n] {
            color: #CFC5CE;
        }

/* the loose-ideas count: white chip, pink-deep figure (only site: the
   primary tile — the amber non-primary variant died with the light rail) */
.arail-debt[b-rr6dhqxy4n] {
    position: absolute;
    right: 5px;
    top: 4px;
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 999px;
    text-align: center;
    font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 13px;
    color: #FFFFFF;
    background: #E0176B;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
}

/* ── CREATE tiles: the invitation lives in the "+" species mark now;
   the surfaces go flat like their siblings ── */
.arail-new[b-rr6dhqxy4n] {
    color: #CFC5CE;
}

.arail-prob[b-rr6dhqxy4n] {
    /* amber stays PROBLEM's ink — color as taxonomy, same as the
       panel's welcome legend */
    color: #CFC5CE;
}

    .arail-prob > i.fas:first-child[b-rr6dhqxy4n] {
        color: #E5A94F;
    }

    .arail-prob:hover:not(:disabled)[b-rr6dhqxy4n] {
        color: #F5F0F4;
    }

    /* locked Problem: dimmed like the locked Portfolio, inert — the tooltip
   says why; the plan tile is the door */
    .arail-prob.is-locked[b-rr6dhqxy4n] {
        opacity: 0.65;
        cursor: not-allowed;
    }

        .arail-prob.is-locked > i.fas[b-rr6dhqxy4n] {
            color: #A99FA8;
        }

        .arail-prob.is-locked:hover[b-rr6dhqxy4n] {
            background: rgba(255, 255, 255, 0.04);
            color: #A99FA8;
        }

.arail-port[b-rr6dhqxy4n] {
    color: #A99FA8;
}

    .arail-port[aria-disabled="true"][b-rr6dhqxy4n] {
        cursor: not-allowed;
        opacity: 0.65;
    }

        .arail-port[aria-disabled="true"]:hover[b-rr6dhqxy4n] {
            background: rgba(255, 255, 255, 0.04);
            color: #A99FA8;
        }

/* ── ONE corner mark. Every tile affordance — create, open, go, lock,
   external — is the same 14px chip in the same top-right slot; only the
   glyph and the emphasis differ. ── */
.arail-mark[b-rr6dhqxy4n] {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    box-sizing: border-box;
    color: #8F8894;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* lights up with its tile */
.arail-btn:hover:not(:disabled) .arail-mark[b-rr6dhqxy4n],
.arail-acct:hover .arail-mark[b-rr6dhqxy4n] {
    background: #2C4247;
    border-color: rgba(255, 255, 255, 0.22);
    color: #F5F0F4;
}

.arail-mark.is-plus[b-rr6dhqxy4n] {
    font-size: 11px;
    font-weight: 800;
}

.arail-new:hover:not(:disabled) .arail-mark.is-plus[b-rr6dhqxy4n] {
    color: #FF7EB0;
}

.arail-prob:hover:not(:disabled) .arail-mark.is-plus[b-rr6dhqxy4n] {
    color: #E5A94F;
}

.arail-mark.is-lock[b-rr6dhqxy4n],
.arail-mark.is-ext[b-rr6dhqxy4n] {
    font-size: 6.5px;
}

.arail-mark.is-open[b-rr6dhqxy4n] {
    font-size: 11px;
    font-weight: 600;
}

.arail-mark.is-go[b-rr6dhqxy4n] {
    font-size: 9px;
}

/* the invitation: free plan's mark is tinted at rest, solid on hover */
.arail-plan.is-free .arail-mark.is-go[b-rr6dhqxy4n] {
    background: rgba(224, 23, 107, 0.28);
    color: #FF8FBB;
}

.arail-plan.is-free:hover:not(:disabled) .arail-mark.is-go[b-rr6dhqxy4n] {
    background: #E0176B;
    border-color: transparent;
    color: #FFFFFF;
}

.arail-ghost.is-open .arail-mark.is-open[b-rr6dhqxy4n],
.arail-acct.is-open .arail-mark.is-open[b-rr6dhqxy4n] {
    color: #F5F0F4;
    border-color: rgba(255, 255, 255, 0.35);
}


/* ── promoted CTAs: invitation-weight, never ringed ── */
.arail-cta[b-rr6dhqxy4n] {
    height: 42px; /* compact vs the 54px nav tiles — a species marker */
}

/* ── plan tile: label = plan name, quiet like every other ghost tile.
   Free / trial: the tile IS the upgrade door — pink angles-up, → plans.
   Paid: a gem, amber, faint glow — a status badge that opens Account. ── */
.arail-plan[b-rr6dhqxy4n] {
    color: #B4AAB3;
    background: transparent;
    border-color: transparent;
}

    .arail-plan em[b-rr6dhqxy4n] {
        color: #A99FA8;
    }

    .arail-plan:hover:not(:disabled)[b-rr6dhqxy4n] {
        color: #F5F0F4;
        background: rgba(255, 255, 255, 0.06);
    }

        .arail-plan:hover:not(:disabled) em[b-rr6dhqxy4n] {
            color: #CFC5CE;
        }

    .arail-plan.is-free > i.fas[b-rr6dhqxy4n] {
        color: #FF5C9E;
    }

    .arail-plan.is-premium > i.fas[b-rr6dhqxy4n] {
        color: #E5C36A;
        text-shadow: 0 0 10px rgba(229, 195, 106, 0.45);
    }

    .arail-plan.is-premium em[b-rr6dhqxy4n] {
        color: #E8E1E7;
    }

    .arail-plan.is-warning em[b-rr6dhqxy4n],
    .arail-plan.is-critical em[b-rr6dhqxy4n] {
        color: #E5A94F;
    }

    .arail-plan.is-critical > i.fas[b-rr6dhqxy4n] {
        color: #E5A94F;
        text-shadow: none;
    }

    /* paid: a badge that opens Account — no chevron, no fill */
    .arail-plan.is-premium:hover:not(:disabled)[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.04);
    }

.arail-cta-up[b-rr6dhqxy4n] {
    color: #FF8FBB;
    background: rgba(224, 23, 107, 0.18);
    border-color: rgba(255, 143, 187, 0.5);
}

.arail-cta-fb[b-rr6dhqxy4n],
.arail-cta-ag[b-rr6dhqxy4n] {
    color: #A99FA8;
    background: transparent;
    border-color: transparent;
}

    .arail-cta-fb:hover:not(:disabled)[b-rr6dhqxy4n],
    .arail-cta-ag:hover:not(:disabled)[b-rr6dhqxy4n] {
        color: #F5F0F4;
        background: rgba(255, 255, 255, 0.06);
        border-color: transparent;
        box-shadow: none;
    }

/* ghost tiles: operational controls recede until touched */
.arail-ghost[b-rr6dhqxy4n] {
    background: transparent;
    border-color: transparent;
}

    .arail-ghost:hover:not(:disabled)[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.06);
        border-color: transparent;
        box-shadow: none;
    }

    .arail-ghost.is-open[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    }

/* ── account: avatar + label; flat tile, same door grammar ── */
.arail-acct[b-rr6dhqxy4n] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 58px;
    padding: 4px 3px;
    min-width: 0;
    flex: 0 0 auto;
    font-family: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .arail-acct em[b-rr6dhqxy4n] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-style: normal;
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #A99FA8;
    }

    .arail-acct:hover[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.08);
    }

    .arail-acct.is-open[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    }

.arail-av[b-rr6dhqxy4n] {
    width: 28px;
    height: 28px;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #FFFFFF;
    background: #3A5055;
}

    .arail-av img[b-rr6dhqxy4n] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

.arail-acct.is-on .arail-av[b-rr6dhqxy4n] {
    box-shadow: 0 0 0 2px #0B1A1E, 0 0 0 3.5px #FF5C9E;
}

/* ── flyouts: the rail's speech bubbles — panel-surface dark ── */
.arail-veilx[b-rr6dhqxy4n] {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1290;
    background: transparent;
}

.arail-flyout[b-rr6dhqxy4n] {
    position: fixed;
    left: calc(var(--ainna-rail-w, 88px) + 10px); /* fallback coupling: 8 margin + 80 rail */
    bottom: 14px;
    width: 264px;
    z-index: 1350;
    padding: 8px;
    background: #1B3034;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(18, 17, 22, 0.35);
    box-sizing: border-box;
    font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.arail-flyout-help[b-rr6dhqxy4n] {
    bottom: 78px;
}

.arail-fid i.is-warning[b-rr6dhqxy4n],
.arail-fid i.is-critical[b-rr6dhqxy4n] {
    color: #E5A94F;
}

.arail-frow[b-rr6dhqxy4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #CFC5CE;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

    .arail-frow:hover[b-rr6dhqxy4n] {
        background: rgba(255, 255, 255, 0.06);
        color: #F5F0F4;
    }

.arail-fhead[b-rr6dhqxy4n] {
    cursor: default;
    padding: 10px 10px 12px;
    min-width: 0;
}

    .arail-fhead:hover[b-rr6dhqxy4n] {
        background: transparent;
        color: #CFC5CE;
    }

.arail-fid[b-rr6dhqxy4n] {
    flex: 1 1 auto;
    min-width: 0;
}

    .arail-fid b[b-rr6dhqxy4n],
    .arail-fid i[b-rr6dhqxy4n] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .arail-fid b[b-rr6dhqxy4n] {
        font-size: 12.5px;
        color: #F5F0F4;
    }

    .arail-fid i[b-rr6dhqxy4n] {
        font-style: normal;
        font-size: 10.5px;
        color: #A79DA6;
        margin-top: 2px;
    }

.arail-fsep[b-rr6dhqxy4n] {
    height: 1px;
    margin: 5px 4px;
    background: rgba(255, 255, 255, 0.08);
}

.arail-fgroup[b-rr6dhqxy4n] {
    padding: 8px 10px 3px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A99FA8;
}

.arail-frow.is-here[b-rr6dhqxy4n] {
    color: #FF8FBB;
    font-weight: 700;
}

.arail-fchk[b-rr6dhqxy4n] {
    margin-left: auto;
    font-size: 9px;
    color: #FF8FBB;
}

.arail-fext[b-rr6dhqxy4n] {
    margin-left: auto;
    font-size: 9px;
    color: #A99FA8;
}

.arail-frow.is-locked[b-rr6dhqxy4n] {
    color: #7F7885;
    cursor: not-allowed;
}

    .arail-frow.is-locked:hover[b-rr6dhqxy4n] {
        background: transparent;
        color: #7F7885;
    }

.arail-flock[b-rr6dhqxy4n] {
    margin-left: auto;
    font-size: 9px;
    color: #7F7885;
}

.arail-frow.is-danger[b-rr6dhqxy4n] {
    color: #F49B9B;
}

    .arail-frow.is-danger:hover[b-rr6dhqxy4n] {
        background: rgba(244, 155, 155, 0.12);
        color: #F49B9B;
    }

/* ── a11y floor ── */
.arail-btn:focus-visible[b-rr6dhqxy4n],
.arail-acct:focus-visible[b-rr6dhqxy4n],
.arail-frow:focus-visible[b-rr6dhqxy4n] {
    outline: 2px solid #FF5C9E;
    outline-offset: 2px;
}

/* ─── the busy lock reads as a LOCK (pass 34) ────────────────────
   The busy-gated CREATE tiles adopt the whisper recipe; the
   permanently-locked Portfolio tile keeps its own resting look. */
.arail-new:disabled[b-rr6dhqxy4n],
.arail-prob:disabled[b-rr6dhqxy4n] {
    opacity: 0.85;
    filter: saturate(0.5);
    cursor: not-allowed;
}

.arail-btn:disabled em[b-rr6dhqxy4n],
.arail-btn:disabled .arail-mark[b-rr6dhqxy4n] {
    opacity: 0.8;
}

/* ─── the WHOLE rail locks while Ainna works (pass 35) ───────────
   One class on the root nav; pointer-events off for every surface
   inside it. The per-tile disabled attrs stay as the belt under
   these braces. */
.arail.is-busy[b-rr6dhqxy4n] {
    pointer-events: none;
}

    .arail.is-busy .arail-btn[b-rr6dhqxy4n],
    .arail.is-busy .arail-brand[b-rr6dhqxy4n],
    .arail.is-busy .arail-cta-up[b-rr6dhqxy4n],
    .arail.is-busy .arail-cta-fb[b-rr6dhqxy4n],
    .arail.is-busy .arail-acct[b-rr6dhqxy4n] {
        /* a WHISPER (pass 38) — the cursor, the disabled semantics and
           the full-strength spinner carry the meaning; the surfaces
           step back half a pace, no more. */
        opacity: 0.85;
        filter: saturate(0.5);
    }

/* ── responsive ladder: capsule width holds; labels yield first.
   Height branch: the full stack (≈590px, +60 with Portal) would scroll
   inside the rail and detach the fixed flyouts from their tiles ── */
@media (max-width: 1100px), (max-height: 720px) {
    .arail[b-rr6dhqxy4n] {
        gap: 4px;
    }

    .arail-btn[b-rr6dhqxy4n] {
        height: 44px;
        padding: 0;
    }

        .arail-btn em[b-rr6dhqxy4n] {
            display: none;
        }

    .arail-cta[b-rr6dhqxy4n] {
        height: 38px;
    }

    .arail-acct[b-rr6dhqxy4n] {
        height: 44px;
        justify-content: center;
        padding: 0;
    }

        .arail-acct em[b-rr6dhqxy4n] {
            display: none;
        }

    .arail-sep[b-rr6dhqxy4n] {
        margin: 5px auto;
    }

    .arail-flyout-help[b-rr6dhqxy4n] {
        bottom: 66px;
    }

    .arail-brand[b-rr6dhqxy4n] {
        height: 34px;
    }
}

/* tier 2: Feedback leaves the rail (it is a row in the Help menu) */
@media (max-height: 620px) {
    .arail-cta-fb[b-rr6dhqxy4n] {
        display: none;
    }
}

/* tier 3: Plan leaves the rail (Plans & upgrades is a row in the Account menu) */
@media (max-height: 560px) {
    .arail-plan[b-rr6dhqxy4n] {
        display: none;
    }
}

@media (max-width: 640px) {
    .arail[b-rr6dhqxy4n] {
        display: none;
    }

    .arail-flyout[b-rr6dhqxy4n] {
        left: 10px;
    }
}

/* ── tooltips: data-tip, right of the tile, same surface as the flyouts.
   Delayed so scanning the rail doesn't flicker; hidden while a flyout
   is open on that tile and while the shell is busy. ── */
.arail [data-tip][b-rr6dhqxy4n] {
    position: relative;
}

    .arail [data-tip][b-rr6dhqxy4n]::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        z-index: 5;
        padding: 7px 11px;
        border-radius: 9px;
        background: #1B3034;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        color: #F5F0F4;
        font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        width: max-content;
        max-width: 240px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease 0s, transform 0.12s ease 0s;
    }

    .arail [data-tip][b-rr6dhqxy4n]::before {
        content: "";
        position: absolute;
        left: calc(100% + 7px);
        top: 50%;
        z-index: 6;
        width: 8px;
        height: 8px;
        transform: translateY(-50%) rotate(45deg);
        background: #1B3034;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease 0s;
    }

    .arail [data-tip]:hover[b-rr6dhqxy4n]::after,
    .arail [data-tip]:focus-visible[b-rr6dhqxy4n]::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        transition-delay: 0.35s;
    }

    .arail [data-tip]:hover[b-rr6dhqxy4n]::before,
    .arail [data-tip]:focus-visible[b-rr6dhqxy4n]::before {
        opacity: 1;
        transition-delay: 0.35s;
    }

/* the Space tile is usually clicked straight away — a longer delay keeps
       the tip from flashing in the gap before the panel docks */
.arail .arail-primary[data-tip]:hover[b-rr6dhqxy4n]::after,
.arail .arail-primary[data-tip]:hover[b-rr6dhqxy4n]::before {
    transition-delay: 0.9s;
}

/* no tooltips while a menu is open on the tile, while the shell is
       busy, while the tile is being pressed, or while the panel is docked
       (every tooltip would land on top of it) */
.arail [data-tip].is-open[b-rr6dhqxy4n]::after,
.arail [data-tip].is-open[b-rr6dhqxy4n]::before,
.arail [data-tip]:active[b-rr6dhqxy4n]::after,
.arail [data-tip]:active[b-rr6dhqxy4n]::before,
.arail.is-busy [data-tip][b-rr6dhqxy4n]::after,
.arail.is-busy [data-tip][b-rr6dhqxy4n]::before,
.arail.is-docked [data-tip][b-rr6dhqxy4n]::after,
.arail.is-docked [data-tip][b-rr6dhqxy4n]::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .arail-btn[b-rr6dhqxy4n],
    .arail-acct[b-rr6dhqxy4n] {
        transition-duration: 0.01ms;
    }
}
/* /Components/ProdComponents/AinnaSmartBrandingEditor.razor.rz.scp.css */
/* ============================================
   BRANDING PAGE — v2 migrated
   Removed: html/body global, :root shadow block (16 vars),
   container background (AinnaPageContainer provides surface).
   var(--color-accent-1) → var(--accent).
   Stripped redundant fallback values from foundation vars.
   ============================================ */

/* ============================================
   Layout
   ============================================ */

.branding-container[b-xdjlib4pb3] {
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.branding-wrapper[b-xdjlib4pb3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

.page-header[b-xdjlib4pb3] {
    margin-bottom: 40px;
}

.page-title[b-xdjlib4pb3] {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 8px 0;
}

.page-subtitle[b-xdjlib4pb3] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.branding-layout[b-xdjlib4pb3] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

/* ============================================
   Right Sidebar
   ============================================ */

.right-column[b-xdjlib4pb3] {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.sticky-content[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.process-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 20px;
}

.process-title[b-xdjlib4pb3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.process-steps[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.process-step[b-xdjlib4pb3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Step number gradient — foundation var */
.step-number[b-xdjlib4pb3] {
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

    .step-number.inactive[b-xdjlib4pb3] {
        background: var(--background-secondary);
        color: var(--text-tertiary);
    }

.step-content[b-xdjlib4pb3] {
    flex: 1;
    min-width: 0;
}

.step-title[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.step-desc[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

/* Palette Swatches */
.palette-swatches[b-xdjlib4pb3] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.swatch[b-xdjlib4pb3] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s ease;
}

    .swatch:hover[b-xdjlib4pb3] {
        transform: scale(1.1);
    }

.swatch-label[b-xdjlib4pb3] {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Tips Card — primary-blue is info blue, not brand accent */
.tips-card[b-xdjlib4pb3] {
    background: rgba(236, 72, 153, 0.04);
    border-radius: 16px;
    padding: 20px;
}

.tips-title[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 0;
}

    .tips-title i[b-xdjlib4pb3] {
        font-size: 14px;
    }

.tips-list[b-xdjlib4pb3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .tips-list li[b-xdjlib4pb3] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: 8px;
    }

        .tips-list li:last-child[b-xdjlib4pb3] {
            margin-bottom: 0;
        }

        .tips-list li i[b-xdjlib4pb3] {
            color: var(--accent);
            font-size: 11px;
            margin-top: 4px;
            flex-shrink: 0;
        }

/* ============================================
   Main Content
   ============================================ */

.info-section[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.section-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 28px;
}

.card-header[b-xdjlib4pb3] {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.card-header-left[b-xdjlib4pb3] {
    flex: 1;
    min-width: 0;
}

.card-header-status[b-xdjlib4pb3] {
    flex-shrink: 0;
}

/* Header Status Indicator — status colors preserved */
.header-status[b-xdjlib4pb3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

    .header-status.pending[b-xdjlib4pb3] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .header-status.success[b-xdjlib4pb3] {
        background: rgba(74, 222, 128, 0.1);
        color: #16a34a;
    }

    .header-status.error[b-xdjlib4pb3] {
        background: rgba(234, 67, 53, 0.1);
        color: var(--primary-red);
    }

.header-status-icon[b-xdjlib4pb3] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.header-status.success .header-status-icon[b-xdjlib4pb3] {
    background: rgba(74, 222, 128, 0.2);
}

.header-status.error .header-status-icon[b-xdjlib4pb3] {
    background: rgba(234, 67, 53, 0.15);
}

.header-status .pending-dot[b-xdjlib4pb3] {
    width: 6px;
    height: 6px;
    background-color: #f59e0b;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@media (max-width: 640px) {
    .card-header[b-xdjlib4pb3] {
        flex-direction: column;
        align-items: stretch;
    }

    .card-header-status[b-xdjlib4pb3] {
        align-self: flex-start;
    }
}

.card-title[b-xdjlib4pb3] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 4px 0;
}

.card-description[b-xdjlib4pb3] {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
}

/* ============================================
   Signature Preview Cards
   ============================================ */

.signature-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .signature-card:hover[b-xdjlib4pb3] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

.signature-card-header[b-xdjlib4pb3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color);
}

.signature-card-title[b-xdjlib4pb3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signature-card-badge[b-xdjlib4pb3] {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(236, 72, 153, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.signature-card-progress[b-xdjlib4pb3] {
    font-size: 10px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
}

.signature-card-badge.complete[b-xdjlib4pb3] {
    color: #16a34a;
    background: rgba(74, 222, 128, 0.1);
}

/* Signature Preview - Filled State */
.signature-preview[b-xdjlib4pb3] {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

    .signature-preview.team[b-xdjlib4pb3] {
        background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    }

.signature-logo[b-xdjlib4pb3] {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    .signature-logo img[b-xdjlib4pb3] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .signature-logo.empty[b-xdjlib4pb3] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border: 2px dashed #cbd5e1;
    }

        .signature-logo.empty i[b-xdjlib4pb3] {
            font-size: 28px;
            color: #94a3b8;
        }

.signature-content[b-xdjlib4pb3] {
    width: 100%;
}

.signature-name[b-xdjlib4pb3] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
    line-height: 1.3;
}

.signature-tagline[b-xdjlib4pb3] {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.4;
}

.signature-location[b-xdjlib4pb3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

    .signature-location i[b-xdjlib4pb3] {
        font-size: 10px;
        color: var(--accent);
    }

.signature-links[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.signature-link[b-xdjlib4pb3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(236, 72, 153, 0.05);
}

    .signature-link:hover[b-xdjlib4pb3] {
        background: rgba(236, 72, 153, 0.1);
        text-decoration: none;
    }

    .signature-link i[b-xdjlib4pb3] {
        font-size: 10px;
    }

.signature-leader[b-xdjlib4pb3] {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.signature-leader-name[b-xdjlib4pb3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.signature-leader-message[b-xdjlib4pb3] {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
    line-height: 1.5;
    max-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Signature Empty State */
.signature-empty[b-xdjlib4pb3] {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
}

.signature-empty-icon[b-xdjlib4pb3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
}

    .signature-empty-icon[b-xdjlib4pb3]::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px dashed #cbd5e1;
        animation: rotate-border-b-xdjlib4pb3 20s linear infinite;
    }

@keyframes rotate-border-b-xdjlib4pb3 {
    to {
        transform: rotate(360deg);
    }
}

.signature-empty-icon i[b-xdjlib4pb3] {
    font-size: 24px;
    color: #64748b;
}

.signature-empty-title[b-xdjlib4pb3] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.signature-empty-desc[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 200px;
}

.signature-empty-hint[b-xdjlib4pb3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    padding: 8px 14px;
    background: rgba(236, 72, 153, 0.08);
    border-radius: 20px;
    transition: all 0.2s ease;
}

    .signature-empty-hint:hover[b-xdjlib4pb3] {
        background: rgba(236, 72, 153, 0.12);
    }

    .signature-empty-hint i[b-xdjlib4pb3] {
        font-size: 10px;
        animation: bounce-right-b-xdjlib4pb3 1.5s ease-in-out infinite;
    }

@keyframes bounce-right-b-xdjlib4pb3 {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

/* ── DARK MODE RETIRED ── Dark Theme — signature cards
:global(.dark-theme) .signature-card-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .signature-preview {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .signature-preview.team {
        background: linear-gradient(180deg, #1e293b 0%, #101827 100%);
    }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .signature-logo {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .signature-logo.empty {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #334155;
    }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
        :global(.dark-theme) .signature-logo.empty i {
            color: #64748b;
        }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .signature-empty {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .signature-empty-icon {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .signature-empty-icon::before {
        border-color: #475569;
    }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .signature-empty-icon i {
        color: #94a3b8;
    }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .signature-link {
    background: rgba(236, 72, 153, 0.1);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .signature-link:hover {
        background: rgba(236, 72, 153, 0.15);
    }
── END DARK MODE ── */

/* Responsive — signature cards */
@media (max-width: 900px) {
    .signature-card[b-xdjlib4pb3] {
        max-width: 320px;
    }
}

@media (max-width: 640px) {
    .signature-card[b-xdjlib4pb3] {
        max-width: 100%;
    }

    .signature-preview[b-xdjlib4pb3] {
        padding: 20px 16px;
    }

    .signature-logo[b-xdjlib4pb3] {
        width: 64px;
        height: 64px;
    }

    .signature-name[b-xdjlib4pb3] {
        font-size: 16px;
    }
}

/* ============================================
   Logo Panel — dark surface, preserved as-is
   ============================================ */

.logo-panel[b-xdjlib4pb3] {
    background: #1a1f2e;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.processing-overlay[b-xdjlib4pb3] {
    position: absolute;
    inset: 0;
    background: rgba(26, 31, 46, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 100;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.processing-spinner[b-xdjlib4pb3] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-xdjlib4pb3 0.8s linear infinite;
}

/* Stage and Crop Window */
.logo-stage[b-xdjlib4pb3] {
    width: 100%;
    height: 360px;
    position: relative;
    overflow: hidden;
    background: #0d1017;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-window[b-xdjlib4pb3] {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #252a3a 25%, transparent 25%), linear-gradient(-45deg, #252a3a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #252a3a 75%), linear-gradient(-45deg, transparent 75%, #252a3a 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-color: #1a1f2e;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    z-index: 5;
    overflow: hidden;
}

.logo-panel.editing .crop-window[b-xdjlib4pb3] {
    background: transparent;
    pointer-events: none;
    z-index: 25;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.crop-overlay[b-xdjlib4pb3] {
    position: absolute;
    background: rgba(15, 23, 42, 0.6);
    z-index: 12;
    pointer-events: none;
}

.logo-panel.editing .crop-overlay[b-xdjlib4pb3] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.logo-panel.locked .crop-overlay[b-xdjlib4pb3] {
    background: rgba(15, 23, 42, 0.85);
}

.crop-overlay-top[b-xdjlib4pb3] {
    top: 0;
    left: 0;
    right: 0;
    height: calc(50% - 50px);
}

.crop-overlay-bottom[b-xdjlib4pb3] {
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% - 50px);
}

.crop-overlay-left[b-xdjlib4pb3] {
    top: calc(50% - 50px);
    left: 0;
    width: calc(50% - 150px);
    height: 100px;
}

.crop-overlay-right[b-xdjlib4pb3] {
    top: calc(50% - 50px);
    right: 0;
    width: calc(50% - 150px);
    height: 100px;
}

.logo-stage #logoImage[b-xdjlib4pb3] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    cursor: grab;
    user-select: none;
    max-width: none;
    max-height: none;
    z-index: 10;
}

    .logo-stage #logoImage:active[b-xdjlib4pb3] {
        cursor: grabbing;
    }

.crop-window .locked-image[b-xdjlib4pb3] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

#logoImage.logo-loading[b-xdjlib4pb3] {
    opacity: 0;
    pointer-events: none;
}

#logoImage.locked-source[b-xdjlib4pb3] {
    pointer-events: none;
    cursor: default;
}

.logo-panel.locked .crop-window[b-xdjlib4pb3] {
    border-color: rgba(74, 222, 128, 0.3);
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Upload Prompt */
.upload-prompt[b-xdjlib4pb3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.5);
    transition: all 0.2s;
    cursor: pointer;
}

    .upload-prompt i[b-xdjlib4pb3] {
        font-size: 42px;
        opacity: 0.6;
    }

    .upload-prompt span[b-xdjlib4pb3] {
        font-size: 14px;
        font-weight: 500;
    }

    .upload-prompt:hover[b-xdjlib4pb3],
    .upload-prompt.dragging[b-xdjlib4pb3] {
        background: rgba(26, 115, 232, 0.1);
        color: rgba(255,255,255,0.8);
    }

    .upload-prompt.dragging[b-xdjlib4pb3] {
        border: 2px dashed var(--primary-blue);
        border-radius: 6px;
    }

    .upload-prompt .processing-spinner[b-xdjlib4pb3] {
        width: 36px;
        height: 36px;
        border-width: 3px;
    }

/* Panel Bar */
.panel-bar[b-xdjlib4pb3] {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    min-height: 60px;
}

.empty-hint[b-xdjlib4pb3] {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

/* Edit Controls */
.edit-controls[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zoom-row[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.5);
}

    .zoom-row i[b-xdjlib4pb3] {
        font-size: 12px;
        opacity: 0.7;
    }

.zoom-slider[b-xdjlib4pb3] {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: none;
}

    .zoom-slider[b-xdjlib4pb3]::-webkit-slider-runnable-track {
        height: 6px;
        background: rgba(255,255,255,0.12);
        border-radius: 3px;
        border: none;
    }

    .zoom-slider[b-xdjlib4pb3]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary-blue);
        border-radius: 50%;
        cursor: pointer;
        margin-top: -6px;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        transition: transform 0.15s;
    }

    .zoom-slider[b-xdjlib4pb3]::-moz-range-track {
        height: 6px;
        background: rgba(255,255,255,0.12);
        border-radius: 3px;
        border: none;
    }

    .zoom-slider[b-xdjlib4pb3]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--primary-blue);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .zoom-slider:hover[b-xdjlib4pb3]::-webkit-slider-thumb {
        transform: scale(1.1);
    }

    .zoom-slider:disabled[b-xdjlib4pb3] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.zoom-value[b-xdjlib4pb3] {
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums;
}

.action-buttons[b-xdjlib4pb3] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-panel[b-xdjlib4pb3] {
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

    .btn-panel:hover[b-xdjlib4pb3] {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
    }

    .btn-panel.primary[b-xdjlib4pb3] {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: #fff;
    }

        .btn-panel.primary:hover[b-xdjlib4pb3] {
            background: #1557b0;
        }

    .btn-panel:disabled[b-xdjlib4pb3] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.hint-text[b-xdjlib4pb3] {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
}

    .hint-text i[b-xdjlib4pb3] {
        margin-right: 6px;
    }

/* Locked Controls */
.locked-controls[b-xdjlib4pb3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saved-badge[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
    font-size: 14px;
    font-weight: 500;
}

    .saved-badge i[b-xdjlib4pb3] {
        font-size: 16px;
    }

.btn-change[b-xdjlib4pb3] {
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

    .btn-change:hover[b-xdjlib4pb3] {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
    }

/* ============================================
   Form Sections
   ============================================ */

.form-section-label[b-xdjlib4pb3] {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-top: 16px;
    margin-bottom: -8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

    .form-section-label:first-of-type[b-xdjlib4pb3] {
        margin-top: 0;
    }

/* Field Validation — primary-red preserved */
.form-input.invalid[b-xdjlib4pb3],
.form-textarea.invalid[b-xdjlib4pb3] {
    border-color: var(--primary-red);
    background-color: rgba(234, 67, 53, 0.04);
}

    .form-input.invalid:focus[b-xdjlib4pb3],
    .form-textarea.invalid:focus[b-xdjlib4pb3] {
        box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.1);
    }

.field-error[b-xdjlib4pb3] {
    display: block;
    color: var(--primary-red);
    font-size: 12px;
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(234, 67, 53, 0.06);
    border-radius: 4px;
    border-left: 2px solid var(--primary-red);
}

/* ============================================
   Alert Messages — status colors preserved
   ============================================ */

.alert[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success[b-xdjlib4pb3] {
    background-color: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #16a34a;
}

.alert-error[b-xdjlib4pb3] {
    background-color: rgba(234, 67, 53, 0.08);
    border: 1px solid rgba(234, 67, 53, 0.2);
    color: var(--primary-red);
}

.alert-warning[b-xdjlib4pb3] {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

    .alert-warning .alert-icon[b-xdjlib4pb3] {
        background: rgba(245, 158, 11, 0.2);
        color: #d97706;
        font-size: 10px;
    }

.alert-icon[b-xdjlib4pb3] {
    font-weight: bold;
    font-size: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-success .alert-icon[b-xdjlib4pb3] {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.alert-error .alert-icon[b-xdjlib4pb3] {
    background: rgba(234, 67, 53, 0.15);
    color: var(--primary-red);
}

.alert-close[b-xdjlib4pb3] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.5;
    color: inherit;
    padding: 0;
    line-height: 1;
}

    .alert-close:hover[b-xdjlib4pb3] {
        opacity: 1;
    }

/* ============================================
   Save Section
   ============================================ */

.save-section[b-xdjlib4pb3] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.save-section-left[b-xdjlib4pb3] {
    flex: 1;
    min-width: 0;
}

.save-section-right[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Footer Status Messages — status colors preserved */
.footer-status[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: fit-content;
}

    .footer-status.pending[b-xdjlib4pb3] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .footer-status.success[b-xdjlib4pb3] {
        background: rgba(74, 222, 128, 0.1);
        color: #16a34a;
    }

    .footer-status.error[b-xdjlib4pb3] {
        background: rgba(234, 67, 53, 0.1);
        color: var(--primary-red);
    }

.footer-status-icon[b-xdjlib4pb3] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.footer-status.success .footer-status-icon[b-xdjlib4pb3] {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.footer-status.error .footer-status-icon[b-xdjlib4pb3] {
    background: rgba(234, 67, 53, 0.15);
    color: var(--primary-red);
}

.footer-status .pending-dot[b-xdjlib4pb3] {
    width: 8px;
    height: 8px;
    background-color: #f59e0b;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Cancel Button */
.btn-cancel[b-xdjlib4pb3] {
    padding: 12px 24px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover:not(:disabled)[b-xdjlib4pb3] {
        background: var(--background-secondary);
        border-color: var(--text-tertiary);
        color: var(--text-primary);
    }

    .btn-cancel:disabled[b-xdjlib4pb3] {
        opacity: 0.5;
        cursor: not-allowed;
    }

@media (max-width: 640px) {
    .save-section[b-xdjlib4pb3] {
        flex-direction: column;
        align-items: stretch;
    }

    .save-section-left[b-xdjlib4pb3] {
        order: 2;
    }

    .save-section-right[b-xdjlib4pb3] {
        order: 1;
        width: 100%;
    }

        .save-section-right button[b-xdjlib4pb3] {
            flex: 1;
        }

    .footer-status[b-xdjlib4pb3] {
        justify-content: center;
        max-width: 100%;
    }
}

/* ============================================
   Spinner
   ============================================ */

.spinner-small[b-xdjlib4pb3] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-xdjlib4pb3 0.8s linear infinite;
}

/* Badge — discrete, theme-aware */
.badge-readonly[b-xdjlib4pb3] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--background-secondary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Locked form input */
.form-input.locked[b-xdjlib4pb3] {
    background-color: #e9ecef;
    color: #212529;
    font-weight: 600;
    border: 1px dashed #adb5bd;
    padding: 12px 16px;
    cursor: not-allowed;
}

/* ============================================
   Panel Status (Inline Feedback)
   ============================================ */

.panel-status[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.08);
}

    .panel-status.success[b-xdjlib4pb3] {
        background: rgba(74, 222, 128, 0.12);
        color: #4ade80;
    }

    .panel-status.error[b-xdjlib4pb3] {
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
    }

    .panel-status.info[b-xdjlib4pb3] {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
    }

    .panel-status i[b-xdjlib4pb3] {
        font-size: 14px;
        flex-shrink: 0;
    }

    .panel-status span[b-xdjlib4pb3] {
        flex: 1;
    }

.status-dismiss[b-xdjlib4pb3] {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    transition: opacity 0.15s;
}

    .status-dismiss:hover[b-xdjlib4pb3] {
        opacity: 1;
    }

/* ============================================
   Logo Preview Section
   ============================================ */

.logo-preview-section[b-xdjlib4pb3] {
    margin-top: 28px;
}

.preview-status[b-xdjlib4pb3] {
    margin-bottom: 16px;
}

.status-badge[b-xdjlib4pb3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
}

    .status-badge.success[b-xdjlib4pb3] {
        background: rgba(74, 222, 128, 0.08);
        border: 1px solid rgba(74, 222, 128, 0.2);
    }

        .status-badge.success i[b-xdjlib4pb3] {
            color: #22c55e;
            font-size: 18px;
            margin-top: 2px;
        }

    .status-badge.warning[b-xdjlib4pb3] {
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.2);
    }

        .status-badge.warning i[b-xdjlib4pb3] {
            color: #f59e0b;
            font-size: 18px;
            margin-top: 2px;
        }

.status-content[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-title[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.status-desc[b-xdjlib4pb3] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bg-selector[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bg-label[b-xdjlib4pb3] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.bg-options[b-xdjlib4pb3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bg-option[b-xdjlib4pb3] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    flex-shrink: 0;
}

    .bg-option:hover[b-xdjlib4pb3] {
        transform: scale(1.1);
        border-color: var(--text-tertiary);
    }

    .bg-option.active[b-xdjlib4pb3] {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.25);
    }

    .bg-option i[b-xdjlib4pb3] {
        font-size: 10px;
        color: var(--text-tertiary);
    }

.color-picker[b-xdjlib4pb3] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    overflow: hidden;
    flex-shrink: 0;
}

    .color-picker[b-xdjlib4pb3]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .color-picker[b-xdjlib4pb3]::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
    }

    .color-picker[b-xdjlib4pb3]::-moz-color-swatch {
        border: none;
        border-radius: 4px;
    }

    .color-picker:hover[b-xdjlib4pb3] {
        border-color: var(--text-tertiary);
    }

/* Preview Card */
.logo-preview-card[b-xdjlib4pb3] {
    position: relative;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    transition: background 0.2s;
}

    .logo-preview-card[b-xdjlib4pb3]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 16px;
        padding: 3px;
        background: linear-gradient(135deg, #1a73e8 0%, #9333ea 50%, #1a73e8 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.5;
    }

    .logo-preview-card.checkerboard[b-xdjlib4pb3] {
        background: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
        background-size: 16px 16px;
        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
        background-color: #f5f5f5;
    }

.preview-frame[b-xdjlib4pb3] {
    width: 100%;
    max-width: 400px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

    .preview-frame img[b-xdjlib4pb3] {
        max-width: 100%;
        height: 100px;
        width: auto;
        object-fit: contain;
    }

/* Preview Hints */
.preview-hints[b-xdjlib4pb3] {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.hint-item[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-tertiary);
}

    .hint-item i[b-xdjlib4pb3] {
        font-size: 16px;
        color: var(--accent);
        opacity: 0.6;
    }

/* ============================================
   Form Sections — accent renames
   ============================================ */

.form-section[b-xdjlib4pb3] {
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--background-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-section:last-of-type[b-xdjlib4pb3] {
        margin-bottom: 0;
    }

    .form-section:hover[b-xdjlib4pb3] {
        border-color: var(--accent);
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.05);
    }

/* Section Header */
.form-section-header[b-xdjlib4pb3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.form-section-icon[b-xdjlib4pb3] {
    width: 36px;
    height: 36px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .form-section-icon i[b-xdjlib4pb3] {
        color: white;
        font-size: 14px;
    }

.form-section-content[b-xdjlib4pb3] {
    flex: 1;
}

.form-section-title[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.form-section-desc[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Field Hints */
.field-hint[b-xdjlib4pb3] {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Field Footer */
.field-footer[b-xdjlib4pb3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

    .field-footer .field-hint[b-xdjlib4pb3] {
        margin-top: 0;
    }

    .field-footer .char-counter[b-xdjlib4pb3] {
        margin-top: 0;
    }

/* ── DARK MODE RETIRED ── Dark theme — form sections
:global(.dark-theme) .form-section {
    border-color: #4b5563;
    background: var(--background-primary);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    :global(.dark-theme) .form-section:hover {
        border-color: #60a5fa;
        box-shadow: 0 2px 8px rgba(96, 165, 250, 0.1);
    }
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .form-section-header {
    border-bottom-color: #374151;
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .form-section-icon {
    background: #60a5fa;
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
:global(.dark-theme) .form-section-title {
    color: #f3f4f6;
}
── END DARK MODE ── */

/* ============================================
   Forms
   ============================================ */

.form-grid[b-xdjlib4pb3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group.full-width[b-xdjlib4pb3] {
        grid-column: 1 / -1;
    }

.form-label[b-xdjlib4pb3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.required[b-xdjlib4pb3] {
    color: var(--primary-red);
}

.optional[b-xdjlib4pb3] {
    font-weight: 400;
    text-transform: none;
    color: var(--text-tertiary);
}

.form-input[b-xdjlib4pb3],
.form-select[b-xdjlib4pb3],
.form-textarea[b-xdjlib4pb3] {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.form-textarea[b-xdjlib4pb3] {
    resize: vertical;
    min-height: 100px;
    max-height: 120px;
    line-height: 1.5;
}

    .form-input:focus[b-xdjlib4pb3],
    .form-select:focus[b-xdjlib4pb3],
    .form-textarea:focus[b-xdjlib4pb3] {
        outline: none;
        border-color: var(--primary-blue);
        background: var(--background-primary);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
    }

    .form-input[b-xdjlib4pb3]::placeholder,
    .form-textarea[b-xdjlib4pb3]::placeholder {
        color: var(--text-tertiary);
    }

.char-counter[b-xdjlib4pb3] {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
}

    .char-counter.warning[b-xdjlib4pb3] {
        color: var(--primary-yellow);
        font-weight: 500;
    }

.validation-message[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--primary-red);
}

.signing-section[b-xdjlib4pb3] {
    margin-bottom: 28px;
}

    .signing-section:last-of-type[b-xdjlib4pb3] {
        margin-bottom: 0;
    }

.section-subtitle[b-xdjlib4pb3] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-subtitle i[b-xdjlib4pb3] {
        color: var(--primary-blue);
        font-size: 14px;
    }

/* ============================================
   Buttons
   ============================================ */

.btn-save[b-xdjlib4pb3] {
    padding: 12px 28px;
    background: var(--gradient-button);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-xdjlib4pb3] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px var(--shadow-color);
    }

    .btn-save:disabled[b-xdjlib4pb3] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ============================================
   Spinners
   ============================================ */

.spinner[b-xdjlib4pb3] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    width: 16px;
    height: 16px;
    animation: spin-b-xdjlib4pb3 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-xdjlib4pb3 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Responsive — preserved as-is
   ============================================ */

@media (max-width: 1024px) {
    .branding-wrapper[b-xdjlib4pb3] {
        padding: 24px;
    }

    .branding-layout[b-xdjlib4pb3] {
        grid-template-columns: 280px 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .branding-layout[b-xdjlib4pb3] {
        grid-template-columns: 1fr;
    }

    .right-column[b-xdjlib4pb3] {
        position: static;
    }

    .sticky-content[b-xdjlib4pb3] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .process-card[b-xdjlib4pb3] {
        flex: 1;
        min-width: 260px;
    }

    .tips-card[b-xdjlib4pb3] {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 640px) {
    .branding-wrapper[b-xdjlib4pb3] {
        padding: 16px;
    }

    .page-title[b-xdjlib4pb3] {
        font-size: 28px;
    }

    .section-card[b-xdjlib4pb3] {
        padding: 20px;
    }

    .form-grid[b-xdjlib4pb3] {
        grid-template-columns: 1fr;
    }

    .preview-header[b-xdjlib4pb3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-hints[b-xdjlib4pb3] {
        flex-direction: column;
        gap: 12px;
    }

    .sticky-content[b-xdjlib4pb3] {
        flex-direction: column;
    }

    .process-card[b-xdjlib4pb3],
    .tips-card[b-xdjlib4pb3] {
        min-width: 100%;
    }

    .zoom-row[b-xdjlib4pb3] {
        flex-wrap: wrap;
    }

    .action-buttons[b-xdjlib4pb3] {
        width: 100%;
        justify-content: space-between;
    }
}
/* /Components/ProdComponents/AinnaSmartFeedbackForm.razor.rz.scp.css */
/* ========================================
   FEEDBACK PAGE — v2 migrated
   Background removed (AinnaPageContainer provides surface).
   var(--color-accent-1) → var(--accent).
   Font-family → var(--font-family-primary).
   ======================================== */

/* Base Container */
.feedback-container[b-dy35yjfzzt] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.bg-pattern[b-dy35yjfzzt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ── DARK MODE RETIRED ──
body.dark-theme .bg-pattern {
    opacity: 0.2;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
── END DARK MODE ── */

/* Wrapper */
.feedback-wrapper[b-dy35yjfzzt] {
    flex: 1;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 40px 60px;
    position: relative;
    z-index: 1;
}

/* Page Header */
.page-header[b-dy35yjfzzt] {
    text-align: center;
    margin-bottom: 48px;
}

.page-title[b-dy35yjfzzt] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.page-subtitle[b-dy35yjfzzt] {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Feedback Sections */
.feedback-section[b-dy35yjfzzt] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px 40px;
    margin-bottom: 24px;
}

.section-title[b-dy35yjfzzt] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 6px;
}

.feedback-sections .feedback-section:first-child .section-title[b-dy35yjfzzt] {
    text-align: center;
}

.section-hint[b-dy35yjfzzt] {
    font-size: 15px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

/* Inactive state */
.feedback-sections.inactive[b-dy35yjfzzt] {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

    .feedback-sections.inactive[b-dy35yjfzzt]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        z-index: 10;
    }

.emoji-option.disabled[b-dy35yjfzzt],
.pill.disabled[b-dy35yjfzzt] {
    pointer-events: none;
    cursor: default;
}

/* ========================================
   FEEDBACK RECEIVED BANNER — green preserved
   ======================================== */
.feedback-received[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.08) 0%, rgba(52, 168, 83, 0.03) 100%);
    border: 1px solid rgba(52, 168, 83, 0.25);
    border-radius: 16px;
    margin-bottom: 32px;
    animation: slideIn-b-dy35yjfzzt 0.4s ease;
}

.received-icon[b-dy35yjfzzt] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #34a853 0%, #2d9248 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

    .received-icon i[b-dy35yjfzzt] {
        font-size: 22px;
        color: white;
    }

.received-content h3[b-dy35yjfzzt] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.received-content p[b-dy35yjfzzt] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── DARK MODE RETIRED ──
body.dark-theme .feedback-received {
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.12) 0%, rgba(52, 168, 83, 0.05) 100%);
}
── END DARK MODE ── */

/* ========================================
   EMOJI RATING
   ======================================== */
.emoji-container[b-dy35yjfzzt] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
}

.emoji-option[b-dy35yjfzzt] {
    width: 100px;
    padding: 20px 12px;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    background: var(--background-secondary);
}

    .emoji-option:hover[b-dy35yjfzzt] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--shadow-color-light);
        border-color: var(--accent);
    }

    .emoji-option.selected[b-dy35yjfzzt] {
        background: var(--gradient-primary);
        border-color: transparent;
        transform: scale(1.05);
        box-shadow: 0 8px 28px var(--shadow-color);
    }

    .emoji-option .emoji[b-dy35yjfzzt] {
        font-size: 40px;
        display: block;
        margin-bottom: 8px;
    }

    .emoji-option .label[b-dy35yjfzzt] {
        font-size: 12px;
        color: var(--text-tertiary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .emoji-option.selected .label[b-dy35yjfzzt] {
        color: white;
    }

/* ========================================
   CATEGORY PILLS
   ======================================== */
.category-pills[b-dy35yjfzzt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pill[b-dy35yjfzzt] {
    padding: 12px 20px;
    border-radius: 24px;
    border: 2px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 15px;
    font-weight: 600;
}

    .pill:hover[b-dy35yjfzzt] {
        border-color: var(--accent);
        transform: translateY(-2px);
    }

    .pill.selected[b-dy35yjfzzt] {
        background: var(--gradient-button);
        color: white;
        border-color: transparent;
    }

/* ========================================
   TEXTAREA
   ======================================== */
.textarea-wrapper[b-dy35yjfzzt] {
    position: relative;
}

.form-textarea[b-dy35yjfzzt] {
    width: 100%;
    min-height: 160px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-family: var(--font-family-primary);
    font-size: 16px;
    background: var(--background-secondary);
    color: var(--text-primary);
    resize: vertical;
    transition: all 0.2s ease;
    line-height: 1.6;
}

    .form-textarea:focus[b-dy35yjfzzt] {
        outline: none;
        border-color: var(--accent);
        background: var(--background-primary);
        box-shadow: 0 0 0 4px var(--shadow-color-light);
    }

    .form-textarea[b-dy35yjfzzt]::placeholder {
        color: var(--text-tertiary);
    }

    .form-textarea:disabled[b-dy35yjfzzt] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.char-counter[b-dy35yjfzzt] {
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: right;
    margin-top: 8px;
}

    .char-counter.warning[b-dy35yjfzzt] {
        color: var(--primary-yellow);
        font-weight: 500;
    }

/* ========================================
   TESTIMONIAL SECTION
   ======================================== */
.testimonial-wrapper[b-dy35yjfzzt] {
    animation: slideIn-b-dy35yjfzzt 0.5s ease;
}

@keyframes slideIn-b-dy35yjfzzt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-divider[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

    .testimonial-divider[b-dy35yjfzzt]::before,
    .testimonial-divider[b-dy35yjfzzt]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    }

    .testimonial-divider span[b-dy35yjfzzt] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 1px;
        white-space: nowrap;
    }

.testimonial-section[b-dy35yjfzzt] {
    padding: 40px 48px;
    margin-bottom: 24px;
}

.testimonial-header[b-dy35yjfzzt] {
    text-align: center;
    margin-bottom: 32px;
}

/* Testimonial badge — amber preserved */
.testimonial-badge[b-dy35yjfzzt] {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #b8860b;
    margin-bottom: 16px;
}

/* ── DARK MODE RETIRED ──
body.dark-theme .testimonial-badge {
    color: #ffc107;
}
── END DARK MODE ── */

.testimonial-header .section-title[b-dy35yjfzzt] {
    text-align: center;
    font-size: 24px;
    margin-bottom: 8px;
}

.testimonial-header .section-hint[b-dy35yjfzzt] {
    text-align: center;
    font-size: 16px;
    margin-bottom: 0;
}

/* Testimonial Form */
.testimonial-form[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.field-group[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label[b-dy35yjfzzt] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-input[b-dy35yjfzzt] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: var(--font-family-primary);
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .field-input:focus[b-dy35yjfzzt] {
        outline: none;
        border-color: var(--accent);
        background: var(--background-primary);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

    .field-input[b-dy35yjfzzt]::placeholder {
        color: var(--text-tertiary);
    }

    .field-input.title-input[b-dy35yjfzzt] {
        font-size: 20px;
        font-weight: 700;
        padding: 16px 18px;
    }

.field-textarea[b-dy35yjfzzt] {
    width: 100%;
    min-height: 120px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: var(--font-family-primary);
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    resize: vertical;
    transition: all 0.2s ease;
    line-height: 1.6;
}

    .field-textarea:focus[b-dy35yjfzzt] {
        outline: none;
        border-color: var(--accent);
        background: var(--background-primary);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

    .field-textarea[b-dy35yjfzzt]::placeholder {
        color: var(--text-tertiary);
    }

/* Signature Fields - 2x2 Grid */
.signature-fields[b-dy35yjfzzt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Consent Checkbox */
.consent-checkbox[b-dy35yjfzzt] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    padding: 16px 20px;
    background: var(--background-secondary);
    border-radius: 12px;
    transition: background 0.2s ease;
    margin-top: 4px;
}

    .consent-checkbox:hover[b-dy35yjfzzt] {
        background: var(--background-tertiary);
    }

    .consent-checkbox input[type="checkbox"][b-dy35yjfzzt] {
        position: absolute;
        opacity: 0;
    }

    .consent-checkbox .checkbox-custom[b-dy35yjfzzt] {
        width: 22px;
        height: 22px;
        border: 2px solid var(--border-color);
        border-radius: 5px;
        background: var(--background-primary);
        transition: all 0.2s ease;
        flex-shrink: 0;
        margin-top: 1px;
        position: relative;
    }

    .consent-checkbox input:checked ~ .checkbox-custom[b-dy35yjfzzt] {
        background: var(--accent);
        border-color: var(--accent);
    }

    .consent-checkbox .checkbox-custom[b-dy35yjfzzt]::after {
        content: '';
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .consent-checkbox input:checked ~ .checkbox-custom[b-dy35yjfzzt]::after {
        display: block;
    }

    .consent-checkbox .checkbox-label[b-dy35yjfzzt] {
        font-size: 15px;
        color: var(--text-secondary);
        line-height: 1.5;
    }

/* ========================================
   PREVIEW SECTION
   ======================================== */
.preview-section[b-dy35yjfzzt] {
    margin-top: 8px;
}

.preview-label[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

    .preview-label i[b-dy35yjfzzt] {
        font-size: 14px;
        color: var(--accent);
    }

.preview-card[b-dy35yjfzzt] {
    position: relative;
    background: var(--gradient-primary);
    border-radius: 24px;
    padding: 36px 40px;
    color: white;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-color);
}

    .preview-card[b-dy35yjfzzt]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        transform: translate(30%, -30%);
    }

.preview-quote-mark[b-dy35yjfzzt] {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 100px;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    pointer-events: none;
}

.preview-title[b-dy35yjfzzt] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    text-transform: capitalize;
    line-height: 1.2;
    position: relative;
}

.preview-quote[b-dy35yjfzzt] {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 24px;
    position: relative;
}

.preview-author[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.preview-avatar[b-dy35yjfzzt] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.preview-author-info[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-name[b-dy35yjfzzt] {
    font-size: 15px;
    font-weight: 700;
}

.preview-role[b-dy35yjfzzt] {
    font-size: 13px;
    opacity: 0.8;
}

/* ========================================
   SUBMIT SECTION
   ======================================== */
.submit-section[b-dy35yjfzzt] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
}

    .submit-section.centered[b-dy35yjfzzt] {
        justify-content: center;
    }

.testimonial-actions[b-dy35yjfzzt] {
    margin-top: 0;
}

.btn-primary[b-dy35yjfzzt],
.btn-secondary[b-dy35yjfzzt],
.btn-ghost[b-dy35yjfzzt] {
    padding: 16px 32px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-family-primary);
}

.btn-primary[b-dy35yjfzzt] {
    background: var(--gradient-button);
    color: white;
    min-width: 180px;
}

    .btn-primary:hover:not(:disabled)[b-dy35yjfzzt] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

    .btn-primary:disabled[b-dy35yjfzzt] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-primary.loading[b-dy35yjfzzt] {
        opacity: 0.8;
    }

.btn-secondary[b-dy35yjfzzt] {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

    .btn-secondary:hover[b-dy35yjfzzt] {
        background: var(--background-secondary);
        border-color: var(--border-strong);
    }

.btn-ghost[b-dy35yjfzzt] {
    background: transparent;
    color: var(--text-tertiary);
    padding: 16px 24px;
}

    .btn-ghost:hover[b-dy35yjfzzt] {
        color: var(--text-secondary);
        background: var(--background-secondary);
    }

/* ========================================
   THANK YOU STATE
   ======================================== */
.thank-you-state[b-dy35yjfzzt] {
    text-align: center;
    padding: 120px 20px;
}

.thank-you-icon[b-dy35yjfzzt] {
    width: 110px;
    height: 110px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 36px;
    animation: popIn-b-dy35yjfzzt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn-b-dy35yjfzzt {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.thank-you-icon i[b-dy35yjfzzt] {
    color: white;
    font-size: 50px;
}

.thank-you-title[b-dy35yjfzzt] {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.thank-you-message[b-dy35yjfzzt] {
    font-size: 19px;
    color: var(--text-secondary);
    margin-bottom: 44px;
    line-height: 1.5;
}

.thank-you-state .btn-primary[b-dy35yjfzzt] {
    display: inline-flex;
    padding: 18px 40px;
    font-size: 17px;
}

/* Spinner */
.spinner-small[b-dy35yjfzzt] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-dy35yjfzzt 0.8s linear infinite;
}

@keyframes spin-b-dy35yjfzzt {
    to {
        transform: rotate(360deg);
    }
}

/* Notification Toast */
.notification[b-dy35yjfzzt] {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 16px 20px;
    background: var(--background-primary);
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

    .notification.show[b-dy35yjfzzt] {
        transform: translateX(0);
    }

    .notification.success i[b-dy35yjfzzt] {
        color: var(--primary-green);
        font-size: 20px;
    }

    .notification.error i[b-dy35yjfzzt] {
        color: var(--primary-red);
        font-size: 20px;
    }

/* ========================================
   RESPONSIVE — preserved as-is
   ======================================== */
@media (max-width: 768px) {
    .feedback-wrapper[b-dy35yjfzzt] {
        padding: 40px 24px 60px;
    }

    .feedback-section[b-dy35yjfzzt] {
        padding: 28px 28px;
    }

    .testimonial-section[b-dy35yjfzzt] {
        padding: 32px 28px;
    }

    .signature-fields[b-dy35yjfzzt] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .emoji-container[b-dy35yjfzzt] {
        gap: 12px;
    }

    .emoji-option[b-dy35yjfzzt] {
        width: 80px;
        padding: 16px 10px;
    }

        .emoji-option .emoji[b-dy35yjfzzt] {
            font-size: 32px;
        }

        .emoji-option .label[b-dy35yjfzzt] {
            font-size: 10px;
        }

    .feedback-received[b-dy35yjfzzt] {
        padding: 20px 24px;
    }

    .received-icon[b-dy35yjfzzt] {
        width: 44px;
        height: 44px;
    }

        .received-icon i[b-dy35yjfzzt] {
            font-size: 18px;
        }

    .preview-card[b-dy35yjfzzt] {
        padding: 28px 32px;
    }

    .preview-title[b-dy35yjfzzt] {
        font-size: 24px;
    }

    .preview-quote[b-dy35yjfzzt] {
        font-size: 15px;
    }

    .preview-quote-mark[b-dy35yjfzzt] {
        font-size: 70px;
    }
}

@media (max-width: 480px) {
    .feedback-wrapper[b-dy35yjfzzt] {
        padding: 32px 16px 50px;
    }

    .page-title[b-dy35yjfzzt] {
        font-size: 28px;
    }

    .page-subtitle[b-dy35yjfzzt] {
        font-size: 16px;
    }

    .feedback-section[b-dy35yjfzzt] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .testimonial-section[b-dy35yjfzzt] {
        padding: 28px 20px;
    }

    .section-title[b-dy35yjfzzt] {
        font-size: 18px;
    }

    .testimonial-header .section-title[b-dy35yjfzzt] {
        font-size: 20px;
    }

    .signature-fields[b-dy35yjfzzt] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .emoji-container[b-dy35yjfzzt] {
        gap: 8px;
        flex-wrap: wrap;
    }

    .emoji-option[b-dy35yjfzzt] {
        width: 60px;
        padding: 12px 8px;
    }

        .emoji-option .emoji[b-dy35yjfzzt] {
            font-size: 24px;
        }

        .emoji-option .label[b-dy35yjfzzt] {
            font-size: 9px;
        }

    .form-textarea[b-dy35yjfzzt] {
        min-height: 140px;
        font-size: 15px;
        padding: 16px;
    }

    .field-input.title-input[b-dy35yjfzzt] {
        font-size: 18px;
    }

    .pill[b-dy35yjfzzt] {
        padding: 10px 16px;
        font-size: 14px;
    }

    .submit-section[b-dy35yjfzzt] {
        flex-direction: column;
    }

    .btn-primary[b-dy35yjfzzt],
    .btn-secondary[b-dy35yjfzzt],
    .btn-ghost[b-dy35yjfzzt] {
        width: 100%;
    }

    .btn-secondary[b-dy35yjfzzt],
    .btn-ghost[b-dy35yjfzzt] {
        order: 2;
    }

    .preview-card[b-dy35yjfzzt] {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .preview-title[b-dy35yjfzzt] {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .preview-quote[b-dy35yjfzzt] {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .preview-quote-mark[b-dy35yjfzzt] {
        font-size: 50px;
        top: 10px;
        left: 14px;
    }

    .preview-avatar[b-dy35yjfzzt] {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .preview-name[b-dy35yjfzzt] {
        font-size: 14px;
    }

    .preview-role[b-dy35yjfzzt] {
        font-size: 12px;
    }

    .thank-you-title[b-dy35yjfzzt] {
        font-size: 32px;
    }

    .thank-you-message[b-dy35yjfzzt] {
        font-size: 16px;
    }
}
/* /Components/ProdComponents/AinnaSmartPricingOptions.razor.rz.scp.css */
/* ============================================
   PRICING PAGE - v2 migrated
   var(--color-accent-1) → var(--accent) throughout.
   Root font-family → var(--font-family-primary).
   Removed .pricing-page * global reset.
   ============================================ */

/* ============================================
   PRICING PAGE - New Architecture
   1320px effective panel width
   Inter (display) + DM Sans (body)
   ============================================ */

.pricing-page[b-gvhu48j4k4] {
    --color-card: var(--text-heading);
    --color-pkg-bg: rgba(180, 160, 140, 0.04);
    --color-sub-bg: rgba(180, 160, 140, 0.04);
    --page-surface: var(--background-secondary);
    min-height: 100vh;
    background: var(--page-surface);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    font-family: var(--font-family-primary);
}


.bg-grain[b-gvhu48j4k4] {
    position: fixed;
    inset: 0;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(ellipse 800px 600px at 5% 12%, color-mix(in srgb, var(--accent) 4%, transparent), transparent), radial-gradient(ellipse 600px 500px at 92% 50%, color-mix(in srgb, var(--accent) 3%, transparent), transparent), radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 22px 22px;
}

.pricing-wrapper[b-gvhu48j4k4] {
    margin: 0;
    padding: 0 40px 80px;
    position: relative;
    z-index: 1;
}

/* ============================================
   HERO - unified panel
   ============================================ */
.pricing-hero[b-gvhu48j4k4] {
    position: relative;
    margin: 0 -40px;
    margin-bottom: 16px;
}

    .pricing-hero[b-gvhu48j4k4]::before {
        content: "";
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 60%);
        pointer-events: none;
        z-index: -1;
    }

.hero-inner[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    background: none;
    overflow: hidden;
}

.hero-headline[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 52px 64px 24px;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

.pricing-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 12px 0;
    letter-spacing: -1.6px;
    line-height: 1.08;
}


.pricing-subtitle[b-gvhu48j4k4] {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0 auto;
    line-height: 1.65;
    max-width: 680px;
    font-weight: 400;
    letter-spacing: -0.15px;
}

/* ---- Compact current-plan line (replaces the large pill) ---- */
.pricing-current[b-gvhu48j4k4] {
    margin: 14px 0 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
}

    .pricing-current strong[b-gvhu48j4k4] {
        color: var(--text-secondary);
        font-weight: 700;
    }

.pricing-current-state[b-gvhu48j4k4] {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, #10b981 13%, transparent);
    color: #059669;
    vertical-align: middle;
}

.pricing-current.is-expired .pricing-current-state[b-gvhu48j4k4] {
    background: color-mix(in srgb, var(--text-heading) 6%, transparent);
    color: var(--text-tertiary);
}

/* ---- Plan context pill ---- */








/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header[b-gvhu48j4k4] {
    text-align: center;
    margin-bottom: 52px;
}

.section-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -1.2px;
    margin: 0 0 14px 0;
    line-height: 1.15;
}

.section-title-pill[b-gvhu48j4k4] {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 50px;
    background: var(--background-primary);
    border: 1.5px solid color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    font-size: 18px;
    margin-bottom: 20px;
}


/* ---- Plan context bar (logged-in users) ---- */

/* ---- Fork connector ---- */


/* ---- Unified plans panel ---- */
.plans-section[b-gvhu48j4k4] {
    max-width: 1320px;
    margin: 0 auto 72px;
    padding: 8px 0 0;
}

.plans-panel[b-gvhu48j4k4] {
    padding-bottom: 64px;
}

/* ============================================
   PV2 SPRINT CARDS (ported from landing page)
   ============================================ */
.pv2-sprints[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pv2-sprint-card[b-gvhu48j4k4] {
    position: relative;
    padding: 36px 32px 32px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}

    .pv2-sprint-card:hover[b-gvhu48j4k4] {
        border-color: color-mix(in srgb, var(--text-heading) 25%, transparent);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }

.pv2-sprint-card--popular[b-gvhu48j4k4] {
    border-color: color-mix(in srgb, var(--text-heading) 25%, transparent);
}

    .pv2-sprint-card--popular:hover[b-gvhu48j4k4] {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    }

.pv2-card--current[b-gvhu48j4k4] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.pv2-sprint-popular-badge[b-gvhu48j4k4] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--text-heading);
    border-radius: 50px;
    white-space: nowrap;
}

.pv2-current-badge[b-gvhu48j4k4] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--background-primary);
    border: 2px solid var(--accent);
    border-radius: 50px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .pv2-current-badge i[b-gvhu48j4k4] {
        font-size: 9px;
    }

.pv2-sprint-watermark[b-gvhu48j4k4] {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s ease;
}

.pv2-sprint-card:hover .pv2-sprint-watermark[b-gvhu48j4k4] {
    color: rgba(0, 0, 0, 0.05);
    transform: scale(1.04);
}

.pv2-sprint-header[b-gvhu48j4k4] {
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    text-align: left;
}

.pv2-sprint-name[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.2;
    margin: 0 0 6px 0;
    letter-spacing: -0.03em;
}

.pv2-sprint-for[b-gvhu48j4k4] {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    display: block;
}

/* ---- Price stripe: amount + detail inline ---- */
.pv2-price-stripe[b-gvhu48j4k4] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.pv2-price-amount[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.04em;
    line-height: 1;
}

.pv2-price-detail[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pv2-price-qty[b-gvhu48j4k4] {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.pv2-price-period[b-gvhu48j4k4] {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1.2;
}

.pv2-annual-note[b-gvhu48j4k4] {
    width: 100%;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    line-height: 1;
    height: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    .pv2-annual-note.visible[b-gvhu48j4k4] {
        opacity: 1;
    }

.pv2-annual-save[b-gvhu48j4k4] {
    color: #059669;
    font-weight: 700;
}

.pv2-sprint-lists[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    margin-bottom: 0;
    padding-bottom: 20px;
    position: relative;
    z-index: 1;
}

.pv2-sprint-list-group[b-gvhu48j4k4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    align-content: flex-start;
}

    .pv2-sprint-list-group + .pv2-sprint-list-group[b-gvhu48j4k4] {
        margin-top: 6px;
    }

.pv2-sprint-list-label[b-gvhu48j4k4] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    width: 100%;
    margin-bottom: 4px;
}

/* ── Feature pills - neutral, calm ── */
.pv2-sprint-list-item[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 5px 12px;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    line-height: 1.3;
    transition: background 0.25s ease, transform 0.2s ease;
}

.pv2-pill-icon[b-gvhu48j4k4] {
    font-size: 9px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.pv2-sprint-list-item:hover[b-gvhu48j4k4] {
    background: color-mix(in srgb, var(--text-heading) 6%, transparent);
    transform: translateY(-1px);
}

/* ── Document pills - neutral outline ── */
.pv2-sprint-list-group:last-child .pv2-sprint-list-item[b-gvhu48j4k4] {
    color: var(--text-secondary);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
}

    .pv2-sprint-list-group:last-child .pv2-sprint-list-item:hover[b-gvhu48j4k4] {
        background: var(--background-secondary);
        transform: translateY(-1px);
    }

/* ---- Card CTA (pricing page only) ---- */
.pv2-card-cta[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.pv2-cta-btn[b-gvhu48j4k4] {
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: white;
}

    .pv2-cta-btn:hover[b-gvhu48j4k4] {
        transform: translateY(-1px);
        box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 40%, transparent);
        filter: brightness(1.08);
    }



    .pv2-cta-btn.pv2-cta-btn--current[b-gvhu48j4k4] {
        background: var(--background-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-tertiary);
        cursor: default;
    }

        .pv2-cta-btn.pv2-cta-btn--current:hover[b-gvhu48j4k4] {
            transform: none;
            filter: none;
            box-shadow: none;
        }

    .pv2-cta-btn:disabled[b-gvhu48j4k4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .pv2-cta-btn:disabled:hover[b-gvhu48j4k4] {
            transform: none;
            box-shadow: none;
        }

.pv2-cta-note[b-gvhu48j4k4] {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
    font-style: italic;
}

/* ── Opportunity explainer - what you're buying ── */




/* ---- Context strip inside panels ---- */





/* ---- Section visibility toggle ---- */

/* ---- Plans group strip ---- */





/* ---- Billing toggle row ---- */
.billing-toggle-row[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

    .billing-toggle-row .billing-toggle[b-gvhu48j4k4] {
        margin-top: 0;
    }

    .billing-toggle-row .toggle-btn[b-gvhu48j4k4] {
        padding: 8px 20px;
        font-size: 12px;
    }





/* ============================================
   SECTION CONTAINERS - 1320px effective
   ============================================ */

.enterprise-section[b-gvhu48j4k4] {
    max-width: 1320px;
    margin: 0 auto 72px;
    padding: 64px 64px 56px;
    background: var(--background-primary);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.03), 0 12px 24px rgba(0,0,0,0.03), 0 24px 48px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

/* ============================================
   SECTION MESSAGES
   ============================================ */











@keyframes msgSlideIn-b-gvhu48j4k4 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   BUTTONS & BILLING TOGGLE
   ============================================ */
.billing-toggle[b-gvhu48j4k4] {
    display: inline-flex;
    background: var(--background-secondary);
    border-radius: 14px;
    padding: 5px;
    margin-top: 32px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

.toggle-btn[b-gvhu48j4k4] {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-tertiary);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .toggle-btn:hover[b-gvhu48j4k4] {
        color: var(--text-primary);
    }

    .toggle-btn.active[b-gvhu48j4k4] {
        background: var(--background-primary);
        color: var(--text-heading);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    }

.save-tag[b-gvhu48j4k4] {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--accent);
    color: white;
    letter-spacing: 0.3px;
}

.pkg-btn[b-gvhu48j4k4] {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: white;
}

    .pkg-btn:hover[b-gvhu48j4k4] {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
        filter: brightness(1.06);
    }

    .pkg-btn.btn-accent[b-gvhu48j4k4] {
        background: var(--accent);
        color: white;
    }

        .pkg-btn.btn-accent:hover[b-gvhu48j4k4] {
            box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 40%, transparent);
            filter: brightness(1.08);
        }


    .pkg-btn:disabled[b-gvhu48j4k4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .pkg-btn:disabled:hover[b-gvhu48j4k4] {
            transform: none;
            filter: none;
            box-shadow: none;
        }

/* ============================================
   SUBSCRIPTIONS FOOTER
   ============================================ */






/* ============================================
   ENTERPRISE
   ============================================ */
.enterprise-two-col[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.enterprise-left[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
}

.enterprise-label[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 16px;
}

    .enterprise-label i[b-gvhu48j4k4] {
        font-size: 10px;
    }

.enterprise-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.enterprise-tagline[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 20px 0;
    letter-spacing: -0.2px;
}

.enterprise-subtitle[b-gvhu48j4k4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.7;
}

    .enterprise-subtitle:last-child[b-gvhu48j4k4] {
        margin-bottom: 0;
    }

.enterprise-right[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.enterprise-cap-group[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

    .enterprise-cap-group:first-of-type[b-gvhu48j4k4] {
        margin-top: 0;
    }

.enterprise-cap-label[b-gvhu48j4k4] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.enterprise-pills[b-gvhu48j4k4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.enterprise-pill[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-heading);
    padding: 5px 12px;
    background: var(--background-primary);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 50px;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .enterprise-pill i[b-gvhu48j4k4] {
        font-size: 9px;
        color: color-mix(in srgb, var(--accent) 70%, var(--text-heading));
    }

    .enterprise-pill:hover[b-gvhu48j4k4] {
        background: color-mix(in srgb, var(--accent) 5%, transparent);
        transform: translateY(-1px);
    }

/* ---- Enterprise contact form ---- */
.efc[b-gvhu48j4k4] {
    background: color-mix(in srgb, var(--text-heading) 2%, var(--background-primary));
    border: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
    border-radius: 16px;
    padding: 28px 24px 24px;
}

.efc-header[b-gvhu48j4k4] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
}

.efc-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.efc-desc[b-gvhu48j4k4] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

.efc-fields[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.efc-field[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.efc-label[b-gvhu48j4k4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.efc-pair[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

[b-gvhu48j4k4] .efc .efc-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid color-mix(in srgb, var(--text-heading) 12%, transparent);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-heading);
    background: var(--background-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}

    [b-gvhu48j4k4] .efc .efc-input::placeholder {
        color: var(--text-tertiary);
        font-weight: 400;
        opacity: 0.7;
    }

    [b-gvhu48j4k4] .efc .efc-input:hover {
        border-color: color-mix(in srgb, var(--text-heading) 22%, transparent);
    }

    [b-gvhu48j4k4] .efc .efc-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    }

[b-gvhu48j4k4] .efc .efc-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: var(--background-primary);
    padding-right: 32px;
}

    [b-gvhu48j4k4] .efc .efc-select:focus {
        background-color: var(--background-primary);
    }

    [b-gvhu48j4k4] .efc .efc-select option {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        padding: 8px;
    }

[b-gvhu48j4k4] .efc .efc-textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 72px;
    max-height: 144px;
    resize: vertical;
    line-height: 1.55;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.efc-submit[b-gvhu48j4k4] {
    width: 100%;
    padding: 11px 20px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: white;
}

    .efc-submit:hover[b-gvhu48j4k4] {
        filter: brightness(1.08);
        box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
        transform: translateY(-1px);
    }

    .efc-submit:disabled[b-gvhu48j4k4] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        filter: none;
        box-shadow: none;
    }

.efc-error[b-gvhu48j4k4] {
    font-size: 12px;
    color: #dc2626;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .efc-error i[b-gvhu48j4k4] {
        font-size: 11px;
    }

.efc-success[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 300px;
}

.success-icon[b-gvhu48j4k4] {
    width: 64px;
    height: 64px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ============================================
   AINNA FELLOWS
   ============================================ */
.referral-section[b-gvhu48j4k4] {
    max-width: 1320px;
    margin: 0 auto 72px;
    padding: 64px 64px 52px;
    background: color-mix(in srgb, var(--accent) 2%, var(--background-primary));
    border: 1.5px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.03), 0 12px 24px rgba(0,0,0,0.03), 0 24px 48px rgba(0,0,0,0.02);
}

    .referral-section[b-gvhu48j4k4]::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -80px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        pointer-events: none;
    }

.referral-inner[b-gvhu48j4k4] {
    padding: 0;
    max-width: 100%;
    margin: 0;
    position: relative;
}

.referral-headline[b-gvhu48j4k4] {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.referral-badge[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    margin-bottom: 16px;
}

    .referral-badge i[b-gvhu48j4k4] {
        font-size: 12px;
    }

.referral-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -1.5px;
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.referral-desc[b-gvhu48j4k4] {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 auto;
}

.referral-expand-btn[b-gvhu48j4k4] {
    margin: 24px auto 0;
    display: flex;
    width: auto;
    padding: 10px 24px;
    font-size: 13px;
    gap: 8px;
}

    .referral-expand-btn i[b-gvhu48j4k4] {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

.referral-expandable[b-gvhu48j4k4] {
    display: none;
}

    .referral-expandable.expanded[b-gvhu48j4k4] {
        display: block;
        animation: fadeSlideIn 0.3s ease;
    }

.referral-body[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: stretch;
    max-width: 880px;
    margin: 0 auto;
}

.referral-ladder-col[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 28px 32px;
}

.referral-ladder-label[b-gvhu48j4k4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

.referral-ladder[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
}

.ladder-step[b-gvhu48j4k4] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.ladder-marker[b-gvhu48j4k4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background-primary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

    .ladder-marker i[b-gvhu48j4k4] {
        font-size: 14px;
    }

    .ladder-marker span[b-gvhu48j4k4] {
        font-family: 'DM Sans', sans-serif;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .ladder-marker.ladder-m1[b-gvhu48j4k4] {
        border-color: color-mix(in srgb, var(--accent) 20%, var(--border-color));
    }

        .ladder-marker.ladder-m1 span[b-gvhu48j4k4] {
            color: color-mix(in srgb, var(--accent) 35%, var(--text-secondary));
        }

    .ladder-marker.ladder-m2[b-gvhu48j4k4] {
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
    }

        .ladder-marker.ladder-m2 span[b-gvhu48j4k4] {
            color: color-mix(in srgb, var(--accent) 40%, var(--text-secondary));
        }

    .ladder-marker.ladder-m3[b-gvhu48j4k4] {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
    }

        .ladder-marker.ladder-m3 span[b-gvhu48j4k4] {
            color: color-mix(in srgb, var(--accent) 55%, var(--text-heading));
        }

.ladder-content[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
}

.ladder-title[b-gvhu48j4k4] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
}

.ladder-reward[b-gvhu48j4k4] {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.2px;
}

.ladder-desc[b-gvhu48j4k4] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.55;
    margin-top: 2px;
}

.ladder-connector[b-gvhu48j4k4] {
    width: 2px;
    height: 20px;
    background: var(--border-color);
    margin-left: 19px;
    border-radius: 1px;
}

/* ---- Fellow card ---- */
.referral-fellow-col[b-gvhu48j4k4] {
    display: flex;
    align-items: stretch;
}

.fellow-card[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 32px 28px;
    border-radius: 20px;
    background: var(--background-primary);
    border: 1.5px solid color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 6%, transparent);
}

.fellow-card-header[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.fellow-icon[b-gvhu48j4k4] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

    .fellow-icon i[b-gvhu48j4k4] {
        font-size: 22px;
        color: var(--accent);
    }

.fellow-label[b-gvhu48j4k4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
}

.fellow-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.6px;
    margin: 0;
}

.fellow-discount[b-gvhu48j4k4] {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.5px;
}

.fellow-perks[b-gvhu48j4k4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

    .fellow-perks li[b-gvhu48j4k4] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 1.5;
    }

        .fellow-perks li i[b-gvhu48j4k4] {
            width: 16px;
            text-align: center;
            flex-shrink: 0;
            font-size: 12px;
            color: var(--accent);
            opacity: 0.7;
        }

.referral-action[b-gvhu48j4k4] {
    max-width: 880px;
    margin: 36px auto 0;
    padding: 24px 28px;
    border-radius: 14px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
}

.referral-code-row[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.referral-code-label[b-gvhu48j4k4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
}

.referral-code-box[b-gvhu48j4k4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.referral-code-url[b-gvhu48j4k4] {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.referral-copy-btn[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    background: var(--accent);
    color: white;
}

    .referral-copy-btn:hover[b-gvhu48j4k4] {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    .referral-copy-btn.copied[b-gvhu48j4k4] {
        background: var(--accent);
        color: white;
    }

    .referral-copy-btn i[b-gvhu48j4k4] {
        font-size: 11px;
    }

.referral-action-cta[b-gvhu48j4k4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    font-weight: 500;
}





.referral-footer[b-gvhu48j4k4] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 6%, transparent);
    text-align: center;
}

.referral-fine[b-gvhu48j4k4] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.55;
}

/* ============================================
   FAQ
   ============================================ */
.faq-section[b-gvhu48j4k4] {
    max-width: 1320px;
    margin: 0 auto 72px;
    padding: 48px 48px 40px;
    background: color-mix(in srgb, var(--text-heading) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-heading) 5%, transparent);
    border-radius: 24px;
}

    .faq-section .section-header[b-gvhu48j4k4] {
        margin-bottom: 28px;
    }

.faq-grid[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-items: start;
}

.faq-col[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
}

.faq-item[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
    transition: background 0.15s ease;
}

    .faq-item:first-child[b-gvhu48j4k4] {
        border-top: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
    }

    .faq-item:hover[b-gvhu48j4k4] {
        background: color-mix(in srgb, var(--text-heading) 2%, transparent);
    }

.faq-q[b-gvhu48j4k4] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    padding-right: 32px;
    cursor: pointer;
    appearance: none;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.4;
    position: relative;
    letter-spacing: -0.2px;
}

.faq-chevron[b-gvhu48j4k4] {
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
    transition: transform 0.25s ease, color 0.25s ease;
}

.faq-open .faq-chevron[b-gvhu48j4k4] {
    transform: rotate(180deg);
    color: var(--accent);
}

.faq-a[b-gvhu48j4k4] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.faq-open .faq-a[b-gvhu48j4k4] {
    max-height: 800px;
    opacity: 1;
    margin-top: 12px;
}

.faq-a .hl[b-gvhu48j4k4] {
    font-weight: 600;
    color: var(--text-primary);
}

.faq-doc-groups[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.faq-doc-group[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-doc-group-label[b-gvhu48j4k4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-heading);
    margin-bottom: 2px;
}

.faq-doc-entry[b-gvhu48j4k4] {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

    .faq-doc-entry strong[b-gvhu48j4k4] {
        font-weight: 600;
        color: var(--text-primary);
    }

/* ============================================
   COMING SOON MODAL
   ============================================ */
.cs-overlay[b-gvhu48j4k4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: csOverlayIn-b-gvhu48j4k4 0.2s ease;
    padding: 24px;
}

.cs-modal[b-gvhu48j4k4] {
    background: var(--background-primary);
    border: 1.5px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 24px;
    padding: 48px 40px 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    animation: csModalIn-b-gvhu48j4k4 0.25s ease;
}

.cs-modal-icon[b-gvhu48j4k4] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

    .cs-modal-icon i[b-gvhu48j4k4] {
        font-size: 22px;
        color: var(--accent);
    }

.cs-modal-title[b-gvhu48j4k4] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.5px;
    margin: 0 0 12px 0;
}

.cs-modal-desc[b-gvhu48j4k4] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 28px 0;
}

.cs-plan-name[b-gvhu48j4k4] {
    font-weight: 700;
    color: var(--text-heading);
}

.cs-modal-btn[b-gvhu48j4k4] {
    max-width: 200px;
    margin: 0 auto;
}

@keyframes csOverlayIn-b-gvhu48j4k4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes csModalIn-b-gvhu48j4k4 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   SPINNER
   ============================================ */
.spinner[b-gvhu48j4k4] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-gvhu48j4k4 0.8s linear infinite;
}

@keyframes spin-b-gvhu48j4k4 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   RESPONSIVE - 1200
   ============================================ */
@media (max-width: 1200px) {
    .pricing-wrapper[b-gvhu48j4k4] {
        padding: 0 32px 80px;
    }

    .pricing-hero[b-gvhu48j4k4] {
        margin-left: -32px;
        margin-right: -32px;
    }

    .plans-section[b-gvhu48j4k4], .enterprise-section[b-gvhu48j4k4], .referral-section[b-gvhu48j4k4], .faq-section[b-gvhu48j4k4] {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* ============================================
   RESPONSIVE - 968
   ============================================ */
@media (max-width: 968px) {
    .pricing-title[b-gvhu48j4k4] {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .hero-headline[b-gvhu48j4k4] {
        padding: 56px 40px 36px;
    }





    .pv2-sprints[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
        gap: 20px;
    }

    .enterprise-two-col[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .enterprise-title[b-gvhu48j4k4] {
        font-size: 21px;
    }

    .efc-pair[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
    }

    .referral-title[b-gvhu48j4k4] {
        font-size: 28px;
    }

    .referral-body[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 420px;
    }

    .referral-ladder-col[b-gvhu48j4k4] {
        padding: 24px 24px 28px;
    }

    .referral-code-box[b-gvhu48j4k4] {
        flex-direction: column;
        align-items: stretch;
    }

    .referral-code-url[b-gvhu48j4k4] {
        font-size: 14px;
    }

    .referral-copy-btn[b-gvhu48j4k4] {
        justify-content: center;
    }

    .faq-grid[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
    }

    .plans-section[b-gvhu48j4k4], .enterprise-section[b-gvhu48j4k4], .referral-section[b-gvhu48j4k4], .faq-section[b-gvhu48j4k4] {
        padding: 48px 28px;
        border-radius: 24px;
    }

    .plans-section[b-gvhu48j4k4] {
        padding-top: 32px;
        padding-bottom: 0;
    }
}

/* ============================================
   RESPONSIVE - 768
   ============================================ */
@media (max-width: 768px) {
    .pricing-wrapper[b-gvhu48j4k4] {
        padding: 0 16px 60px;
    }

    .pricing-hero[b-gvhu48j4k4] {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: 24px;
    }

    .hero-headline[b-gvhu48j4k4] {
        padding: 48px 24px 32px;
    }

    .pricing-hero[b-gvhu48j4k4]::before {
        width: 400px;
        height: 400px;
    }

    .pricing-title[b-gvhu48j4k4] {
        font-size: 36px;
        letter-spacing: -0.8px;
    }

    .pricing-subtitle[b-gvhu48j4k4] {
        font-size: 15px;
        max-width: 100%;
    }

    .section-title[b-gvhu48j4k4] {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .plans-section[b-gvhu48j4k4] {
        padding: 28px 20px 0;
        margin-bottom: 48px;
        border-radius: 20px;
    }

    .referral-section[b-gvhu48j4k4] {
        padding: 40px 20px;
        margin-bottom: 48px;
        border-radius: 20px;
    }

    .faq-section[b-gvhu48j4k4] {
        padding: 40px 20px;
    }

    .enterprise-section[b-gvhu48j4k4] {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .billing-toggle[b-gvhu48j4k4] {
        width: 100%;
        justify-content: center;
    }

    .toggle-btn[b-gvhu48j4k4] {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* ============================================
   RESPONSIVE - 480
   ============================================ */
@media (max-width: 480px) {
    .pricing-title[b-gvhu48j4k4] {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .section-title[b-gvhu48j4k4] {
        font-size: 24px;
    }

    .section-title-pill[b-gvhu48j4k4] {
        font-size: 15px !important;
        padding: 8px 20px;
    }

    .pv2-sprint-card[b-gvhu48j4k4] {
        padding: 28px 20px 24px;
    }

    .pv2-price-amount[b-gvhu48j4k4] {
        font-size: 1.8rem;
    }

    .pv2-price-qty[b-gvhu48j4k4] {
        font-size: 0.75rem;
    }

    .pv2-sprint-watermark[b-gvhu48j4k4] {
        font-size: 60px;
    }

    .faq-q[b-gvhu48j4k4] {
        font-size: 12.5px;
    }

    .faq-a[b-gvhu48j4k4] {
        font-size: 12px;
    }

    .enterprise-title[b-gvhu48j4k4] {
        font-size: 19px;
    }

    .enterprise-tagline[b-gvhu48j4k4] {
        font-size: 14px;
    }

    .enterprise-subtitle[b-gvhu48j4k4] {
        font-size: 13px;
    }

    .enterprise-pill[b-gvhu48j4k4] {
        font-size: 0.65rem;
        padding: 4px 10px;
    }

    .cs-modal[b-gvhu48j4k4] {
        padding: 36px 24px 32px;
    }

    .cs-modal-title[b-gvhu48j4k4] {
        font-size: 20px;
    }
}
/* /Components/ProdComponents/AinnaTermsAndConditions.razor.rz.scp.css */
/* ===================================
   LEGAL DOCUMENTS — v2 migrated
   var(--color-accent-1) → var(--accent).
   Font-family → var(--font-family-primary).
   =================================== */

/* ----- BASE ----- */
.legal-page[b-zn6ow1aao4] {
    font-family: var(--font-family-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --header-height: 0px;
}

    .legal-page.standalone-mode[b-zn6ow1aao4] {
        --header-height: 64px;
    }

    /* Standalone mode: full page scrolling context */
    .legal-page.standalone-mode[b-zn6ow1aao4] {
        height: auto;
        min-height: 100vh;
    }

/* ----- STANDALONE HEADER ----- */
.legal-header[b-zn6ow1aao4] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--bg-rgb), 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    padding: 0 40px;
    height: 64px;
    flex-shrink: 0;
}

.header-inner[b-zn6ow1aao4] {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo[b-zn6ow1aao4] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    text-decoration: none;
}

.header-logo-img[b-zn6ow1aao4] {
    height: 32px;
    width: auto;
    display: block;
}

.header-logo .logo-tagline[b-zn6ow1aao4] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.back-link[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .back-link:hover[b-zn6ow1aao4] {
        background: var(--background-primary);
        color: var(--text-primary);
        border-color: var(--border-strong);
        transform: translateX(-2px);
    }

    .back-link i[b-zn6ow1aao4] {
        font-size: 11px;
        transition: transform 0.2s ease;
    }

    .back-link:hover i[b-zn6ow1aao4] {
        transform: translateX(-3px);
    }

/* Hide header in embedded mode */
.embedded-mode .legal-header[b-zn6ow1aao4] {
    display: none;
}

/* ----- MAIN CONTAINER ----- */
.terms-container[b-zn6ow1aao4] {
    position: relative;
    flex: 1;
}

/* Embedded mode: enable internal scrolling */
.embedded-mode .terms-container[b-zn6ow1aao4] {
    overflow-y: auto;
}

/* Hide legacy bg-pattern element if still in markup */
.bg-pattern[b-zn6ow1aao4] {
    display: none;
}

/* ----- LOADING STATE ----- */
.loading-container[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    position: relative;
    z-index: 10;
}

.loading-spinner[b-zn6ow1aao4] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    animation: spin-b-zn6ow1aao4 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spin-b-zn6ow1aao4 {
    to {
        transform: rotate(360deg);
    }
}

/* ----- LAYOUT WRAPPER ----- */
.terms-wrapper[b-zn6ow1aao4] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 40px 80px;
    position: relative;
    z-index: 1;
}

.terms-layout[b-zn6ow1aao4] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
}

/* ----- LEFT SIDEBAR ----- */
.left-column[b-zn6ow1aao4] {
    position: sticky;
    top: calc(var(--header-height, 0px) + 24px);
    max-height: calc(100vh - var(--header-height, 0px) - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
    align-self: start;
    margin: 0;
    padding: 0;
}

    .left-column[b-zn6ow1aao4]::-webkit-scrollbar {
        width: 4px;
    }

    .left-column[b-zn6ow1aao4]::-webkit-scrollbar-track {
        background: transparent;
    }

    .left-column[b-zn6ow1aao4]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.08);
        border-radius: 2px;
    }

        .left-column[b-zn6ow1aao4]::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.14);
        }

/* ── DARK MODE RETIRED ──
body.theme-dark .left-column::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    body.theme-dark .left-column::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.18);
    }
── END DARK MODE ── */

.sticky-content[b-zn6ow1aao4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

    .sticky-content > *:first-child[b-zn6ow1aao4] {
        margin-top: 0;
    }

/* ----- CARD BASE STYLES ----- */
.tldr-card[b-zn6ow1aao4],
.highlights-card[b-zn6ow1aao4],
.contact-card[b-zn6ow1aao4],
.footer-links-card[b-zn6ow1aao4] {
    background: var(--background-primary);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.01);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin: 0;
}

    .tldr-card[b-zn6ow1aao4]::before,
    .highlights-card[b-zn6ow1aao4]::before,
    .contact-card[b-zn6ow1aao4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .tldr-card:hover[b-zn6ow1aao4]::before,
    .highlights-card:hover[b-zn6ow1aao4]::before,
    .contact-card:hover[b-zn6ow1aao4]::before {
        opacity: 1;
    }

    .tldr-card:hover[b-zn6ow1aao4],
    .highlights-card:hover[b-zn6ow1aao4],
    .contact-card:hover[b-zn6ow1aao4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 12px 28px rgba(0, 0, 0, 0.04);
        border-color: var(--border-strong);
    }

/* ── DARK MODE RETIRED ──
body.theme-dark .tldr-card,
body.theme-dark .highlights-card,
body.theme-dark .contact-card,
body.theme-dark .footer-links-card {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    body.theme-dark .tldr-card:hover,
    body.theme-dark .highlights-card:hover,
    body.theme-dark .contact-card:hover {
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
── END DARK MODE ── */

/* ----- TL;DR CARD ----- */
.tldr-icon-row[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tldr-icon[b-zn6ow1aao4] {
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--shadow-color);
}

    .tldr-icon i[b-zn6ow1aao4] {
        font-size: 18px;
        color: white;
    }

.tldr-badge[b-zn6ow1aao4] {
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--card-bg-subtle);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--shadow-color-light);
}

.tldr-title[b-zn6ow1aao4] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .tldr-title {
    color: #f1f5f9;
}
── END DARK MODE ── */

.tldr-statement[b-zn6ow1aao4] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.55;
    font-weight: 500;
    font-style: italic;
}

.tldr-text[b-zn6ow1aao4] {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-tertiary);
    margin: 0;
    font-weight: 420;
}

/* ----- HIGHLIGHTS CARD ----- */
.card-title[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 650;
    color: var(--text-tertiary);
    margin: 0 0 14px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

    .card-title i[b-zn6ow1aao4] {
        font-size: 10px;
        color: var(--accent);
        opacity: 0.7;
    }

.highlights-list[b-zn6ow1aao4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.highlight-item[b-zn6ow1aao4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin: 0 -12px;
}

    .highlight-item:hover[b-zn6ow1aao4] {
        background: var(--background-secondary);
    }

/* ── DARK MODE RETIRED ──
body.theme-dark .highlight-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
── END DARK MODE ── */

.highlight-icon[b-zn6ow1aao4] {
    width: 26px;
    height: 26px;
    background: var(--card-bg-subtle);
    border: 1px solid var(--shadow-color-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

    .highlight-icon i[b-zn6ow1aao4] {
        font-size: 10px;
        color: var(--accent);
        opacity: 0.85;
    }

/* ── DARK MODE RETIRED ──
body.theme-dark .highlight-icon {
    background: rgba(var(--bg-rgb), 0.3);
    border-color: var(--shadow-color-light);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    body.theme-dark .highlight-icon i {
        color: var(--accent);
    }
── END DARK MODE ── */

.highlight-text[b-zn6ow1aao4] {
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.5;
    /*font-weight: 480;*/
    padding-top: 4px;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .highlight-text {
    color: #e2e8f0;
}
── END DARK MODE ── */

/* ----- CONTACT CARD ----- */
.contact-items[b-zn6ow1aao4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.contact-link[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--background-secondary);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

    .contact-link:hover[b-zn6ow1aao4] {
        background: var(--background-primary);
        border-color: var(--border-color);
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* ── DARK MODE RETIRED ──
body.theme-dark .contact-link {
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
}
── END DARK MODE ── */

    /* ── DARK MODE RETIRED ──
    body.theme-dark .contact-link:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
    }
── END DARK MODE ── */

    .contact-link i[b-zn6ow1aao4] {
        width: 16px;
        color: var(--accent);
        font-size: 13px;
        opacity: 0.8;
    }

.contact-response[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-success-bg);
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 530;
    border: 1px dashed rgba(34, 139, 34, 0.25);
}

    .contact-response i[b-zn6ow1aao4] {
        color: var(--color-success);
        font-size: 11px;
    }

/* ----- FOOTER LINKS CARD (SIDEBAR) ----- */
.footer-links-card[b-zn6ow1aao4] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    padding: 20px;
}

    .footer-links-card:hover[b-zn6ow1aao4] {
        transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-links-card {
    background: rgba(255, 255, 255, 0.02);
}
── END DARK MODE ── */

.footer-brand[b-zn6ow1aao4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo-img[b-zn6ow1aao4] {
    height: 26px;
    width: auto;
    display: block;
}

.brand-tagline[b-zn6ow1aao4] {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.footer-links-inline[b-zn6ow1aao4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.footer-link-inline[b-zn6ow1aao4] {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

    .footer-link-inline:hover[b-zn6ow1aao4] {
        color: var(--text-primary);
    }

    .footer-link-inline.active[b-zn6ow1aao4] {
        color: var(--accent);
        font-weight: 600;
    }

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-link-inline:hover {
    color: #e2e8f0;
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-link-inline.active {
    color: var(--accent);
}
── END DARK MODE ── */

.link-separator[b-zn6ow1aao4] {
    font-size: 10px;
    color: var(--border-strong);
    font-weight: 400;
}

.footer-copyright-compact[b-zn6ow1aao4] {
    text-align: center;
}

.copyright-text[b-zn6ow1aao4] {
    font-size: 10px;
    color: var(--text-tertiary);
    margin: 0 0 2px 0;
    line-height: 1.5;
    font-weight: 480;
}

.copyright-meta[b-zn6ow1aao4] {
    font-size: 9px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
    font-weight: 420;
    opacity: 0.75;
}

/* ----- MAIN CONTENT COLUMN ----- */
.content-column[b-zn6ow1aao4] {
    min-width: 0;
    align-self: start;
    margin: 0;
    padding: 0;
}

.content-card[b-zn6ow1aao4] {
    background: var(--background-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 52px 60px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 6px 20px rgba(0, 0, 0, 0.02);
    margin: 0;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .content-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
── END DARK MODE ── */

/* ----- DOCUMENT HEADER ----- */
.document-header[b-zn6ow1aao4] {
    margin-bottom: 52px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border-color);
}

.document-meta[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 480;
}

.meta-badge[b-zn6ow1aao4] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--card-bg-subtle);
    border: 1px solid var(--shadow-color-light);
    border-radius: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 620;
    color: var(--accent);
}

/* ── DARK MODE RETIRED ──
body.theme-dark .meta-badge {
    background: rgba(var(--bg-rgb), 0.4);
    border-color: var(--shadow-color-light);
}
── END DARK MODE ── */

.meta-divider[b-zn6ow1aao4] {
    color: var(--border-strong);
    font-weight: 400;
    opacity: 0.6;
}

.meta-date[b-zn6ow1aao4],
.meta-updated[b-zn6ow1aao4] {
    font-weight: 480;
}

.page-title[b-zn6ow1aao4] {
    font-size: 42px;
    font-weight: 750;
    color: var(--text-heading);
    margin: 0 0 14px 0;
    letter-spacing: -0.035em;
    line-height: 1.1;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .page-title {
    color: #f8fafc;
}
── END DARK MODE ── */

.page-subtitle[b-zn6ow1aao4] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 420;
    margin: 0;
    letter-spacing: -0.01em;
    max-width: 90%;
}

/* ----- EXECUTIVE SUMMARY ----- */
.executive-summary[b-zn6ow1aao4] {
    background: var(--card-bg-subtle);
    border-left: 3px solid var(--accent);
    padding: 24px 28px;
    border-radius: 0 12px 12px 0;
    margin-top: 28px;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .executive-summary {
    background: rgba(var(--bg-rgb), 0.3);
}
── END DARK MODE ── */

.summary-label[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 650;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .summary-label i[b-zn6ow1aao4] {
        font-size: 12px;
        opacity: 0.85;
    }

.executive-summary p[b-zn6ow1aao4] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 430;
}

/* ----- DOCUMENT SECTIONS ----- */
.document-section[b-zn6ow1aao4] {
    margin-bottom: 52px;
    scroll-margin-top: 100px;
    position: relative;
}

    .document-section:last-of-type[b-zn6ow1aao4] {
        margin-bottom: 0;
    }

.section-title[b-zn6ow1aao4] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .section-title {
    color: #f1f5f9;
}
── END DARK MODE ── */

.section-subtitle[b-zn6ow1aao4] {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 22px 0;
    font-style: italic;
    line-height: 1.6;
    font-weight: 430;
}

.paragraph-block[b-zn6ow1aao4] {
    margin-bottom: 26px;
}

    .paragraph-block:last-child[b-zn6ow1aao4] {
        margin-bottom: 0;
    }

.section-text[b-zn6ow1aao4] {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
    font-weight: 410;
    letter-spacing: -0.008em;
}

    /* ── DARK MODE RETIRED ──
body.theme-dark .section-text {
    color: #94a3b8;
}
── END DARK MODE ── */

    .section-text:last-child[b-zn6ow1aao4] {
        margin-bottom: 0;
    }

    .section-text strong[b-zn6ow1aao4] {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* ── DARK MODE RETIRED ──
body.theme-dark .section-text strong {
    color: #e2e8f0;
}
── END DARK MODE ── */

    .section-text a[b-zn6ow1aao4] {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

        .section-text a:hover[b-zn6ow1aao4] {
            border-bottom-color: var(--accent);
        }

/* ----- STRUCTURED DATA ----- */
.structured-data[b-zn6ow1aao4] {
    background: var(--background-secondary);
    border-radius: 12px;
    padding: 22px 26px;
    margin: 22px 0;
    border: 1px solid var(--border-color);
}

/* ── DARK MODE RETIRED ──
body.theme-dark .structured-data {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}
── END DARK MODE ── */

.data-row[b-zn6ow1aao4] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

    .data-row:last-child[b-zn6ow1aao4] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-row:first-child[b-zn6ow1aao4] {
        padding-top: 0;
    }

.data-key[b-zn6ow1aao4] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .data-key {
    color: #e2e8f0;
}
── END DARK MODE ── */

.data-value[b-zn6ow1aao4] {
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.6;
}

/* ----- ENDING TEXT ----- */
.ending-text[b-zn6ow1aao4] {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-tertiary);
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    font-style: italic;
    font-weight: 420;
}

/* ----- DOCUMENT FOOTER (in content) ----- */
.document-footer[b-zn6ow1aao4] {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--border-color);
}

.footer-content[b-zn6ow1aao4] {
    background: var(--card-bg-subtle);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    border: 1px solid var(--shadow-color-light);
}

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-content {
    background: rgba(var(--bg-rgb), 0.3);
    border-color: var(--shadow-color-light);
}
── END DARK MODE ── */

.footer-icon[b-zn6ow1aao4] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--shadow-color);
}

    .footer-icon i[b-zn6ow1aao4] {
        font-size: 20px;
        color: white;
    }

.footer-text[b-zn6ow1aao4] {
    flex: 1;
}

.footer-statement[b-zn6ow1aao4] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 8px 0;
    font-weight: 430;
}

.footer-meta[b-zn6ow1aao4] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
    font-weight: 480;
    font-style: italic;
}

/* ----- COMPACT PAGE FOOTER ----- */
.legal-footer[b-zn6ow1aao4] {
    background: var(--background-primary);
    border-top: 1px solid var(--border-color);
    padding: 24px 40px;
    flex-shrink: 0;
}

/* ── DARK MODE RETIRED ──
body.theme-dark .legal-footer {
    background: rgba(10, 15, 30, 0.98);
    border-color: rgba(255, 255, 255, 0.06);
}
── END DARK MODE ── */

.footer-inner[b-zn6ow1aao4] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-brand-main[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-footer-logo-img[b-zn6ow1aao4] {
    height: 24px;
    width: auto;
    display: block;
}

.footer-company[b-zn6ow1aao4] {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 480;
    padding-left: 14px;
    border-left: 1px solid var(--border-color);
}

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-company {
    border-left-color: rgba(255, 255, 255, 0.08);
}
── END DARK MODE ── */

.footer-nav[b-zn6ow1aao4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .footer-nav a[b-zn6ow1aao4] {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .footer-nav a:hover[b-zn6ow1aao4] {
            color: var(--text-primary);
        }

/* ── DARK MODE RETIRED ──
body.theme-dark .footer-nav a:hover {
    color: #e2e8f0;
}
── END DARK MODE ── */

.footer-sep[b-zn6ow1aao4] {
    color: var(--border-strong);
    font-size: 10px;
    opacity: 0.5;
}

.footer-copy[b-zn6ow1aao4] {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 420;
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

@media (max-width: 1200px) {
    .terms-wrapper[b-zn6ow1aao4] {
        padding: 40px 32px 70px;
    }

    .terms-layout[b-zn6ow1aao4] {
        grid-template-columns: 280px 1fr;
        gap: 36px;
    }

    .content-card[b-zn6ow1aao4] {
        padding: 44px 48px;
    }

    .page-title[b-zn6ow1aao4] {
        font-size: 38px;
    }

    .section-title[b-zn6ow1aao4] {
        font-size: 22px;
    }

    .left-column[b-zn6ow1aao4] {
        top: calc(var(--header-height, 0px) + 20px);
        max-height: calc(100vh - var(--header-height, 0px) - 60px);
    }

    .header-logo-img[b-zn6ow1aao4] {
        height: 28px;
    }
}

@media (max-width: 968px) {
    .legal-header[b-zn6ow1aao4] {
        padding: 0 24px;
        height: 60px;
    }

    .header-logo-img[b-zn6ow1aao4] {
        height: 26px;
    }

    .terms-layout[b-zn6ow1aao4] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Mobile: disable sticky */
    .left-column[b-zn6ow1aao4] {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    .sticky-content[b-zn6ow1aao4] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tldr-card[b-zn6ow1aao4] {
        grid-column: 1 / -1;
    }

    .footer-links-card[b-zn6ow1aao4] {
        grid-column: 1 / -1;
    }

    .page-title[b-zn6ow1aao4] {
        font-size: 34px;
    }

    .page-subtitle[b-zn6ow1aao4] {
        font-size: 15px;
        max-width: 100%;
    }

    .section-title[b-zn6ow1aao4] {
        font-size: 20px;
    }

    .footer-inner[b-zn6ow1aao4] {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .footer-brand-main[b-zn6ow1aao4] {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .footer-company[b-zn6ow1aao4] {
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 768px) {
    .legal-header[b-zn6ow1aao4] {
        padding: 0 20px;
        height: 56px;
    }

    .header-logo-img[b-zn6ow1aao4] {
        height: 24px;
    }

    .header-logo .logo-tagline[b-zn6ow1aao4] {
        display: none;
    }

    .back-link span[b-zn6ow1aao4] {
        display: none;
    }

    .back-link[b-zn6ow1aao4] {
        padding: 10px 12px;
    }

    .terms-wrapper[b-zn6ow1aao4] {
        padding: 28px 20px 60px;
    }

    .sticky-content[b-zn6ow1aao4] {
        grid-template-columns: 1fr;
    }

    .content-card[b-zn6ow1aao4] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .document-header[b-zn6ow1aao4] {
        margin-bottom: 36px;
        padding-bottom: 28px;
    }

    .page-title[b-zn6ow1aao4] {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .page-subtitle[b-zn6ow1aao4] {
        font-size: 14px;
    }

    .executive-summary[b-zn6ow1aao4] {
        padding: 18px 20px;
        margin-top: 22px;
    }

        .executive-summary p[b-zn6ow1aao4] {
            font-size: 13px;
        }

    .section-title[b-zn6ow1aao4] {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .section-subtitle[b-zn6ow1aao4] {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .section-text[b-zn6ow1aao4] {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .document-section[b-zn6ow1aao4] {
        margin-bottom: 40px;
        scroll-margin-top: 80px;
    }

    .structured-data[b-zn6ow1aao4] {
        padding: 18px;
        margin: 18px 0;
    }

    .data-row[b-zn6ow1aao4] {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }

    .data-key[b-zn6ow1aao4] {
        font-size: 10px;
    }

    .data-value[b-zn6ow1aao4] {
        font-size: 13px;
    }

    .document-footer[b-zn6ow1aao4] {
        margin-top: 44px;
        padding-top: 32px;
    }

    .footer-content[b-zn6ow1aao4] {
        flex-direction: column;
        padding: 22px;
        gap: 14px;
    }

    .footer-icon[b-zn6ow1aao4] {
        width: 42px;
        height: 42px;
    }

        .footer-icon i[b-zn6ow1aao4] {
            font-size: 17px;
        }

    .footer-statement[b-zn6ow1aao4] {
        font-size: 13px;
    }

    .tldr-card[b-zn6ow1aao4],
    .highlights-card[b-zn6ow1aao4],
    .contact-card[b-zn6ow1aao4],
    .footer-links-card[b-zn6ow1aao4] {
        padding: 18px;
    }

    .tldr-icon[b-zn6ow1aao4] {
        width: 40px;
        height: 40px;
    }

        .tldr-icon i[b-zn6ow1aao4] {
            font-size: 16px;
        }

    .tldr-title[b-zn6ow1aao4] {
        font-size: 18px;
    }

    .sidebar-logo-img[b-zn6ow1aao4] {
        height: 22px;
    }

    .legal-footer[b-zn6ow1aao4] {
        padding: 20px;
    }

    .page-footer-logo-img[b-zn6ow1aao4] {
        height: 20px;
    }
}

@media (max-width: 480px) {
    .legal-header[b-zn6ow1aao4] {
        padding: 0 16px;
    }

    .header-logo-img[b-zn6ow1aao4] {
        height: 22px;
    }

    .terms-wrapper[b-zn6ow1aao4] {
        padding: 20px 16px 44px;
    }

    .content-card[b-zn6ow1aao4] {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .page-title[b-zn6ow1aao4] {
        font-size: 24px;
        line-height: 1.15;
    }

    .page-subtitle[b-zn6ow1aao4] {
        font-size: 13px;
    }

    .section-title[b-zn6ow1aao4] {
        font-size: 17px;
    }

    .section-text[b-zn6ow1aao4] {
        font-size: 13px;
    }

    .tldr-card[b-zn6ow1aao4],
    .highlights-card[b-zn6ow1aao4],
    .contact-card[b-zn6ow1aao4],
    .footer-links-card[b-zn6ow1aao4] {
        padding: 16px;
        border-radius: 12px;
    }

    .tldr-icon[b-zn6ow1aao4] {
        width: 38px;
        height: 38px;
    }

        .tldr-icon i[b-zn6ow1aao4] {
            font-size: 15px;
        }

    .tldr-title[b-zn6ow1aao4] {
        font-size: 17px;
    }

    .tldr-statement[b-zn6ow1aao4] {
        font-size: 12px;
    }

    .tldr-text[b-zn6ow1aao4] {
        font-size: 12px;
    }

    .highlight-icon[b-zn6ow1aao4] {
        width: 24px;
        height: 24px;
    }

        .highlight-icon i[b-zn6ow1aao4] {
            font-size: 9px;
        }

    .highlight-text[b-zn6ow1aao4] {
        font-size: 12px;
    }

    .sidebar-logo-img[b-zn6ow1aao4] {
        height: 20px;
    }

    .legal-footer[b-zn6ow1aao4] {
        padding: 18px 16px;
    }

    .page-footer-logo-img[b-zn6ow1aao4] {
        height: 18px;
    }

    .footer-nav[b-zn6ow1aao4] {
        gap: 8px;
    }

        .footer-nav a[b-zn6ow1aao4] {
            font-size: 11px;
        }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .legal-page[b-zn6ow1aao4] {
        background: white;
    }

    .legal-header[b-zn6ow1aao4],
    .legal-footer[b-zn6ow1aao4],
    .bg-pattern[b-zn6ow1aao4],
    .left-column[b-zn6ow1aao4] {
        display: none !important;
    }

    .terms-layout[b-zn6ow1aao4] {
        grid-template-columns: 1fr;
    }

    .content-card[b-zn6ow1aao4] {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .page-title[b-zn6ow1aao4] {
        font-size: 22px;
    }

    .section-title[b-zn6ow1aao4] {
        font-size: 16px;
        page-break-after: avoid;
    }

    .document-section[b-zn6ow1aao4] {
        page-break-inside: avoid;
    }
}

/* ===================================
   REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
    *[b-zn6ow1aao4],
    *[b-zn6ow1aao4]::before,
    *[b-zn6ow1aao4]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================
   FOCUS STATES (Accessibility)
   =================================== */

.contact-link:focus-visible[b-zn6ow1aao4],
.footer-link-inline:focus-visible[b-zn6ow1aao4],
.back-link:focus-visible[b-zn6ow1aao4],
.footer-nav a:focus-visible[b-zn6ow1aao4],
.header-logo:focus-visible[b-zn6ow1aao4] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}
/* /Components/ProdComponents/BrainstormingCanvas.razor.rz.scp.css */
/* ============================================================
   BRAINSTORMING SURFACE
   Four-column resizable layout that fills the area below the
   workspace shell.
     1. Left rail   — problem identity + idea generator (resizable)
     2. Splitter    — 6px drag handle (cursor: col-resize)
     3. Main        — tier cards work surface
     4. Right rail  — discussion timeline (collapsible to a 44px strip)
   When ProblemId is empty, the rail+splitter are not rendered;
   the main column fills the canvas with the empty state.
   ============================================================ */

.brainstorm-surface[b-9feqch52x5] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    background: var(--ws-bg, #f8fafc);
    position: relative;
}

.brainstorm-grid[b-9feqch52x5] {
    flex: 1;
    display: grid;
    grid-template-columns: var(--bs-left-rail-w, 380px) 6px 1fr 320px;
    min-height: 0;
    min-width: 0;
    transition: grid-template-columns 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ════════════════════════════════════════════════════════
   ARTICULATION WIZARD — creation workspace
   
   A workspace gesture, not an onboarding moment. Seen every
   time the user starts a problem. Fast, informative, confident.
   Two-column layout: input left, "what happens next" right.
   Stacks under 900px.
   
   Namespace: ainna-wiz-*
   ════════════════════════════════════════════════════════ */

.ainna-wizard[b-9feqch52x5] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfaf9 0%, #f6f4f1 100%);
    animation: ainna-wiz-fade-in-b-9feqch52x5 220ms ease-out both;
}

@keyframes ainna-wiz-fade-in-b-9feqch52x5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Ambient: kept subtle, no animation ── */

.ainna-wiz-blob[b-9feqch52x5] {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

.ainna-wiz-blob-pink[b-9feqch52x5] {
    width: 560px;
    height: 560px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle at 50% 50%, rgba(240, 12, 113, 0.18) 0%, rgba(240, 12, 113, 0.08) 45%, rgba(240, 12, 113, 0) 70%);
}

.ainna-wiz-blob-indigo[b-9feqch52x5] {
    width: 480px;
    height: 480px;
    bottom: -140px;
    right: -100px;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0.06) 45%, rgba(99, 102, 241, 0) 70%);
}

.ainna-wiz-grain[b-9feqch52x5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* ── Frame: centered content with comfortable padding ── */

.ainna-wiz-frame[b-9feqch52x5] {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── INTRO STAGE: two-column layout ── */

.ainna-wiz-stage[b-9feqch52x5] {
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
}

.ainna-wiz-stage-intro[b-9feqch52x5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 72px;
    align-items: start;
}

@media (max-width: 900px) {
    .ainna-wiz-stage-intro[b-9feqch52x5] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ── LEFT COLUMN: input ── */

.ainna-wiz-input-col[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ainna-wiz-headline[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.10;
    letter-spacing: -0.024em;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.ainna-wiz-subline[b-9feqch52x5] {
    margin: 0 0 28px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #475569;
    max-width: 480px;
}

/* ── Writebox: plate around the textarea.
   Submit button lives INSIDE the writebox, in its footer —
   the textarea and the submit are one composite control. ── */

.ainna-wiz-writebox[b-9feqch52x5] {
    position: relative;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 16px 18px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

    .ainna-wiz-writebox:focus-within[b-9feqch52x5] {
        border-color: rgba(240, 12, 113, 0.32);
        box-shadow: 0 1px 2px rgba(240, 12, 113, 0.06), 0 6px 18px rgba(240, 12, 113, 0.08);
    }

.ainna-wiz-textarea[b-9feqch52x5] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: #0f172a;
    outline: none;
    resize: none;
    padding: 0;
    min-height: 96px;
    field-sizing: content;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    caret-color: rgba(240, 12, 113, 0.95);
}

    .ainna-wiz-textarea[b-9feqch52x5]::placeholder {
        color: rgba(15, 23, 42, 0.34);
        font-weight: 400;
    }

    .ainna-wiz-textarea:disabled[b-9feqch52x5] {
        opacity: 0.55;
    }

/* Writebox footer: hint on the left, small submit on the right.
   The submit is secondary — it's the "iterate" button. The
   bigger commit action lives in the suggestion panel below. */

.ainna-wiz-writebox-foot[b-9feqch52x5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.ainna-wiz-hint[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.ainna-wiz-submit[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: transparent;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.003em;
    line-height: 1;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

    .ainna-wiz-submit:hover:not(:disabled)[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.04);
        border-color: rgba(15, 23, 42, 0.22);
    }

    .ainna-wiz-submit:disabled[b-9feqch52x5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ainna-wiz-submit .fa-spin[b-9feqch52x5] {
        color: rgba(240, 12, 113, 0.85);
        font-size: 12px;
    }

/* ── Nudge: italic margin note ── */

.ainna-wiz-nudge[b-9feqch52x5] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    padding: 6px 0 6px 12px;
    border-left: 2px solid rgba(240, 12, 113, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    font-style: italic;
    color: #334155;
    animation: ainna-wiz-nudge-in-b-9feqch52x5 240ms ease-out both;
}

@keyframes ainna-wiz-nudge-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ainna-wiz-nudge-cursor[b-9feqch52x5] {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: rgba(240, 12, 113, 0.9);
    animation: ainna-wiz-cursor-b-9feqch52x5 1.1s steps(1, end) infinite;
    transform: translateY(2px);
}

@keyframes ainna-wiz-cursor-b-9feqch52x5 {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}

.ainna-wiz-nudge-body[b-9feqch52x5] {
    flex: 1;
    min-width: 0;
}

/* ── Suggestion panel — appears when validator returns a
   SuggestedStatement. The big Proceed lives here. Going stale
   when the user edits the textarea: dims, Proceed disables. ── */

.ainna-wiz-suggestion[b-9feqch52x5] {
    margin-top: 24px;
    padding: 22px 24px 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(240, 12, 113, 0.18);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px rgba(240, 12, 113, 0.06);
    animation: ainna-wiz-suggestion-in-b-9feqch52x5 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: opacity 220ms ease, filter 220ms ease;
}

@keyframes ainna-wiz-suggestion-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ainna-wiz-suggestion.is-stale[b-9feqch52x5] {
    opacity: 0.55;
    filter: saturate(0.5);
}

.ainna-wiz-suggestion-eyebrow[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240, 12, 113, 0.9);
    margin: 0 0 12px 0;
}

.ainna-wiz-suggestion-text[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.012em;
    color: #0f172a;
    margin: 0;
    word-wrap: break-word;
}

/* ── Collapsed original input — small footnote shown above
   the suggestion in refinement mode. Reads as quiet metadata. ── */

.ainna-wiz-original-fold[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.03);
    border-left: 2px solid rgba(15, 23, 42, 0.10);
    border-radius: 0 8px 8px 0;
    margin-bottom: 16px;
    animation: ainna-wiz-fold-in-b-9feqch52x5 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ainna-wiz-fold-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ainna-wiz-original-tag[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ainna-wiz-original-body[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    font-style: italic;
    word-wrap: break-word;
}

/* ── Refinement hint — single-line input that takes a short
   natural-language instruction ("focus on European cities").
   Looks like a magic-prompt bar, NOT a textarea. ── */

.ainna-wiz-refine[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 8px 8px 8px 14px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(240, 12, 113, 0.24);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(240, 12, 113, 0.04);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

    .ainna-wiz-refine:focus-within[b-9feqch52x5] {
        border-color: rgba(240, 12, 113, 0.40);
        box-shadow: 0 1px 2px rgba(240, 12, 113, 0.08), 0 6px 18px rgba(240, 12, 113, 0.10);
    }

.ainna-wiz-refine-icon[b-9feqch52x5] {
    color: rgba(240, 12, 113, 0.7);
    font-size: 13px;
    flex-shrink: 0;
}

.ainna-wiz-refine-input[b-9feqch52x5] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #0f172a;
    padding: 6px 0;
    caret-color: rgba(240, 12, 113, 0.95);
}

    .ainna-wiz-refine-input[b-9feqch52x5]::placeholder {
        color: rgba(15, 23, 42, 0.52);
    }

    .ainna-wiz-refine-input:disabled[b-9feqch52x5] {
        opacity: 0.55;
    }

.ainna-wiz-refine-submit[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(240, 12, 113, 1);
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 160ms ease, opacity 160ms ease, transform 120ms ease;
}

    .ainna-wiz-refine-submit:hover:not(:disabled)[b-9feqch52x5] {
        background: rgba(220, 8, 100, 1);
    }

    .ainna-wiz-refine-submit:active:not(:disabled)[b-9feqch52x5] {
        transform: scale(0.95);
    }

    .ainna-wiz-refine-submit:disabled[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.08);
        color: rgba(15, 23, 42, 0.35);
        cursor: not-allowed;
    }

    .ainna-wiz-refine-submit .fa-spin[b-9feqch52x5] {
        font-size: 11px;
    }

/* ── Bottom action row: Reset on the left (escape hatch),
   Proceed on the right (primary commit). ── */

.ainna-wiz-proceed-row[b-9feqch52x5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

/* Reset — muted, secondary. Returns to initial input state. */

.ainna-wiz-reset[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: transparent;
    color: #64748b;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: color 160ms ease;
}

    .ainna-wiz-reset:hover:not(:disabled)[b-9feqch52x5] {
        color: #0f172a;
    }

    .ainna-wiz-reset:disabled[b-9feqch52x5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ainna-wiz-reset i[b-9feqch52x5] {
        font-size: 11px;
    }

/* The Proceed button — primary action. Brand pink, full presence,
   only operative when the suggestion is fresh. */

.ainna-wiz-proceed[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    background: rgba(240, 12, 113, 1);
    color: white;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(240, 12, 113, 0.24), 0 6px 16px rgba(240, 12, 113, 0.20);
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .ainna-wiz-proceed:hover:not(:disabled)[b-9feqch52x5] {
        background: rgba(220, 8, 100, 1);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(240, 12, 113, 0.28), 0 10px 22px rgba(240, 12, 113, 0.26);
    }

    .ainna-wiz-proceed:active:not(:disabled)[b-9feqch52x5] {
        transform: translateY(0);
    }

    .ainna-wiz-proceed:disabled[b-9feqch52x5] {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

.ainna-wiz-proceed-arrow[b-9feqch52x5] {
    font-size: 15px;
    line-height: 1;
    transition: transform 160ms ease;
}

.ainna-wiz-proceed:hover:not(:disabled) .ainna-wiz-proceed-arrow[b-9feqch52x5] {
    transform: translateX(3px);
}

/* ── RIGHT COLUMN: "what happens next" ──
   Three numbered rows. Brief titles, one-line explanations.
   The system, shown not hidden. ── */

.ainna-wiz-promise-col[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 8px;
}

.ainna-wiz-promise-eyebrow[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240, 12, 113, 0.85);
    margin: 0 0 24px 0;
}

.ainna-wiz-promise-list[b-9feqch52x5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ainna-wiz-promise[b-9feqch52x5] {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 20px 18px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    transition: border-color 200ms ease;
}

    .ainna-wiz-promise:last-child[b-9feqch52x5] {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    /* Subtle hover lift on each promise — invites the eye through. */
    .ainna-wiz-promise:hover[b-9feqch52x5] {
        border-top-color: rgba(240, 12, 113, 0.25);
    }

        .ainna-wiz-promise:hover + .ainna-wiz-promise[b-9feqch52x5],
        .ainna-wiz-promise:last-child:hover[b-9feqch52x5] {
            border-top-color: rgba(240, 12, 113, 0.25);
        }

.ainna-wiz-promise-num[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(240, 12, 113, 0.08);
    color: rgba(240, 12, 113, 0.95);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.ainna-wiz-promise-body[b-9feqch52x5] {
    min-width: 0;
}

.ainna-wiz-promise-title[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.ainna-wiz-promise-text[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}

/* ════════════════════════════════════════════════════════
   FRAMING-IN-FLIGHT — pedestal composition
   
   The user has committed (clicked Proceed). The framer takes
   10-30s. This screen must:
   - Show the work is real (motion + progression)
   - Keep the problem statement front and centre (the artifact)
   - Build anticipation for the board (without revealing it)
   ════════════════════════════════════════════════════════ */

.ainna-wiz-stage-framing[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

/* ── Status line: pulsing dot + small caps label ── */

.ainna-wiz-fram-status[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ainna-wiz-fram-dot[b-9feqch52x5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(240, 12, 113, 0.95);
    box-shadow: 0 0 0 0 rgba(240, 12, 113, 0.55);
    animation: ainna-wiz-fram-dot-pulse-b-9feqch52x5 1.6s ease-in-out infinite;
}

@keyframes ainna-wiz-fram-dot-pulse-b-9feqch52x5 {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.85);
        box-shadow: 0 0 0 0 rgba(240, 12, 113, 0.45);
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(240, 12, 113, 0);
    }
}

.ainna-wiz-fram-status-label[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240, 12, 113, 0.85);
}

/* ── Rotating context line: smaller than statement, italic ── */

.ainna-wiz-fram-rotator[b-9feqch52x5] {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0;
    color: #64748b;
    margin: 0;
    max-width: 480px;
    min-height: 1.5em;
    animation: ainna-wiz-fram-rotator-in-b-9feqch52x5 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ainna-wiz-fram-rotator-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ── Pedestal: the problem statement gets centre-stage.
   Soft white plate, hairline border, warm shadow. A scanning
   pink gradient passes left-to-right every 3.5s, implying
   Ainna is reading it. ── */

.ainna-wiz-fram-pedestal[b-9feqch52x5] {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(240, 12, 113, 0.04);
    overflow: hidden;
    text-align: left;
    animation: ainna-wiz-fram-pedestal-in-b-9feqch52x5 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ainna-wiz-fram-pedestal-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ainna-wiz-fram-statement[b-9feqch52x5] {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.014em;
    color: #0f172a;
    margin: 0;
    word-wrap: break-word;
}

/* Scanning highlight: a soft pink gradient that passes
   left-to-right across the pedestal every 3.5s. Slow, subtle,
   below the text (z-index 0). The effect is "something is
   actively reading this". */

.ainna-wiz-fram-scan[b-9feqch52x5] {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient( 90deg, rgba(240, 12, 113, 0) 0%, rgba(240, 12, 113, 0.04) 40%, rgba(240, 12, 113, 0.06) 50%, rgba(240, 12, 113, 0.04) 60%, rgba(240, 12, 113, 0) 100%);
    animation: ainna-wiz-fram-scan-sweep-b-9feqch52x5 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes ainna-wiz-fram-scan-sweep-b-9feqch52x5 {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* ── Progress: five dots that breathe with a stagger.
   Imply continuous activity without a misleading clock. ── */

.ainna-wiz-fram-progress[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.ainna-wiz-fram-pip[b-9feqch52x5] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(240, 12, 113, 0.55);
    animation: ainna-wiz-fram-pip-breathe-b-9feqch52x5 1.6s ease-in-out infinite;
    animation-delay: var(--pip-delay, 0ms);
}

@keyframes ainna-wiz-fram-pip-breathe-b-9feqch52x5 {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* Reduced motion: the framing stage goes still — no scan sweep, no
   pip breathing, no entry slides. Side benefit: clean static captures
   for decks when the OS-level setting is on. */
@media (prefers-reduced-motion: reduce) {
    .ainna-wiz-fram-scan[b-9feqch52x5] {
        display: none;
    }

    .ainna-wiz-fram-pip[b-9feqch52x5] {
        animation: none;
        opacity: 0.55;
        transform: none;
    }

    .ainna-wiz-fram-rotator[b-9feqch52x5],
    .ainna-wiz-fram-pedestal[b-9feqch52x5] {
        animation: none;
    }
}


/* No problem selected: rail+splitter don't render; main+timeline
       fill the canvas. Grid collapses the empty tracks. */
.brainstorm-grid.bs-grid-empty[b-9feqch52x5] {
    grid-template-columns: 1fr 320px;
}

/* Timeline collapsed: shrinks the right track to 44px. */
.brainstorm-grid.bs-timeline-is-collapsed[b-9feqch52x5] {
    grid-template-columns: var(--bs-left-rail-w, 380px) 6px 1fr 44px;
}

.brainstorm-grid.bs-grid-empty.bs-timeline-is-collapsed[b-9feqch52x5] {
    grid-template-columns: 1fr 44px;
}

/* Resize overlay: covers the viewport while a drag is active.
   Pointer-events: auto so it captures pointermove. cursor: col-resize
   to keep the resize affordance visible across the whole drag area. */
.bs-resize-overlay[b-9feqch52x5] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* ============================================================
   CARDS COLUMN — non-framed states (empty/loading/error/framing/failed)
   These states fill the column body when the problem isn't framed.
   ============================================================ */

/* ── States: empty / loading / error / framing / failed ── */

.bs-state-empty[b-9feqch52x5],
.bs-state-error[b-9feqch52x5],
.bs-state-framing[b-9feqch52x5],
.bs-state-failed[b-9feqch52x5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
    color: var(--ws-ink-3, #475569);
}

    .bs-state-empty i[b-9feqch52x5] {
        font-size: 24px;
        color: var(--ws-ink-5, #94a3b8);
        margin-bottom: 14px;
    }

.bs-state-empty-title[b-9feqch52x5] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    margin-bottom: 6px;
}

.bs-state-empty-body[b-9feqch52x5] {
    font-size: 13.5px;
    color: var(--ws-ink-4, #64748b);
    max-width: 320px;
}

.bs-state-error[b-9feqch52x5] {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 28px;
    max-width: 520px;
    margin: 32px auto;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-radius: var(--radius-md, 8px);
    text-align: left;
}

    .bs-state-error i[b-9feqch52x5] {
        font-size: 18px;
        color: #ef4444;
        margin-top: 2px;
        flex-shrink: 0;
    }

.bs-state-error-title[b-9feqch52x5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
    margin-bottom: 4px;
}

.bs-state-error-body[b-9feqch52x5] {
    font-size: 13px;
    color: var(--ws-ink-3, #475569);
    line-height: 1.5;
}


.bs-state-framing-icon i[b-9feqch52x5] {
    font-size: 28px;
    color: #6366f1;
    margin-bottom: 18px;
}

.bs-state-framing-title[b-9feqch52x5] {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--ws-ink-1, #0f172a);
}

.bs-state-framing-body[b-9feqch52x5] {
    font-size: 14px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 0 26px;
    color: var(--ws-ink-3, #475569);
}

.bs-state-framing-seed[b-9feqch52x5] {
    width: 100%;
    max-width: 540px;
    padding: 16px 18px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-md, 8px);
    text-align: left;
}

.bs-state-framing-seed-eyebrow[b-9feqch52x5] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6366f1;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.bs-state-framing-seed-body[b-9feqch52x5] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ws-ink-2, #334155);
    white-space: pre-wrap;
}

.bs-state-failed i[b-9feqch52x5] {
    font-size: 28px;
    color: #f59e0b;
    margin-bottom: 14px;
}

.bs-state-failed-title[b-9feqch52x5] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
    margin-bottom: 6px;
}

.bs-state-failed-body[b-9feqch52x5] {
    font-size: 13.5px;
    color: var(--ws-ink-3, #475569);
    margin-bottom: 18px;
    max-width: 380px;
    line-height: 1.5;
}

.bs-retry-btn[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: white;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    transition: all 0.15s ease;
}

    .bs-retry-btn:hover[b-9feqch52x5] {
        border-color: #6366f1;
        color: #6366f1;
        background: rgba(99, 102, 241, 0.04);
    }

    .bs-retry-btn i[b-9feqch52x5] {
        font-size: 11px;
    }


/* ============================================================
   TIERED BRAINSTORM BOARD
   Four tiers in a single scroll container. Each tier reads as
   a logical section: divider stripe, title row, descriptor.
   Section bg carries the semantic tint; cards keep neutral
   readability with a per-tier accent on the top edge.
   ============================================================ */

/* ── Tier stack — natural single-column scroll.
   Each tier sizes to its content; sections expand to hold as
   many cards as they need. The column scrolls as a whole.
   
   Bottom-fill: the LAST tier flex-grows to consume remaining
   space AND carries the cockpit clearance as bottom padding —
   so its wash extends all the way down to (under) the cockpit
   pill, with no white stripe. ── */

.bs-tiers[b-9feqch52x5] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.bs-tier[b-9feqch52x5] {
    padding: 0 18px 24px;
    /* flex-shrink: 0 is critical. Without it, the parent flex
       column shrinks tiers to fit available space, causing
       wrapped cards to spill outside their tier's wash. With it,
       tiers always grow to contain their content. */
    flex-shrink: 0;
    /* Minimum height per tier so when all four are empty (or
       lightly populated), each gets generous breathing room.
       33vh per tier means the user always sees the section
       boundaries clearly even with one or two cards. Tiers
       grow above this when content requires it. */
    min-height: 33vh;
}

    .bs-tier:last-child[b-9feqch52x5] {
        /* Extend the last tier's wash to fill whatever remains
           between the last cards and the cockpit pill. The 90px
           bottom padding carries the cockpit clearance INSIDE the
           tier so its wash covers it — no white stripe. */
        flex: 1 0 auto;
        padding-bottom: 90px;
    }

/* Section backgrounds: neutral. The state now lives in each card's
   pill, so the sections no longer carry the card hue - they sit on
   the white canvas and let the card's own border + shadow do the
   separating. (Killed matches below; the over-threshold amber on
   Working is a deliberate functional signal and is left intact.) */
.bs-tier-promoted[b-9feqch52x5] {
    background: transparent;
}

.bs-tier-working[b-9feqch52x5] {
    background: transparent;
}

.bs-tier-parked[b-9feqch52x5] {
    background: transparent;
}

/* ── Tier section header: eyebrow (icon + label + description)
   on the left, a 1px rule filling the remaining space, then
   the cap badge / threshold editor / count on the right.
   No more stripe-divider; the line IS the divider, broken by
   the eyebrow text. ── */

/* Centered editorial header. The label group (icon + label + cap)
   sits centered with subtle horizontal rules flanking it on both
   sides. Rules are drawn via ::before/::after pseudo-elements on
   the header itself; the previous bs-tier-rule span is retired. */
.bs-tier-header[b-9feqch52x5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 0 6px;
    user-select: none;
    position: relative;
}

    .bs-tier-header[b-9feqch52x5]::before,
    .bs-tier-header[b-9feqch52x5]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.10) 40%, rgba(15, 23, 42, 0.10) 60%, transparent 100%);
    }

    .bs-tier-header[b-9feqch52x5]::before {
        background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.10) 80%);
    }

    .bs-tier-header[b-9feqch52x5]::after {
        background: linear-gradient(90deg, rgba(15, 23, 42, 0.10) 20%, transparent 100%);
    }

/* Unified tier pill: icon + name + count fraction in one element.
   The flanking rules on .bs-tier-header (::before/::after) still
   give it the section-divider feel. Tier-specific accents apply
   to the icon and (subtly) the pill background. */
.bs-tier-pill[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 7px 14px;
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bs-tier-pill-icon[b-9feqch52x5] {
    font-size: 12px;
    color: var(--ws-ink-4, #94a3b8);
    flex-shrink: 0;
}

.bs-tier-pill-name[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-2, #334155);
    white-space: nowrap;
}

.bs-tier-pill-sep[b-9feqch52x5] {
    width: 1px;
    height: 12px;
    background: rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}

.bs-tier-pill-count[b-9feqch52x5] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ws-ink-1, #0f172a);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.bs-tier-pill-fraction[b-9feqch52x5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ws-ink-4, #94a3b8);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: -6px;
}

/* Descriptor: block element below the header row, centered.
   Discrete typography - not italic, no em-dash prefix, just
   a short sentence at small slate weight. */
.bs-tier-descriptor[b-9feqch52x5] {
    text-align: center;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ws-ink-4, #94a3b8);
    font-weight: 400;
    margin: 0 0 24px;
    padding: 0 12px;
}

/* Tier-specific accents — icon color, label color, rule tint */
.bs-tier-promoted .bs-tier-pill-icon[b-9feqch52x5] {
    color: #16a34a;
}

.bs-tier-working .bs-tier-pill-icon[b-9feqch52x5] {
    color: #6366f1;
}

.bs-tier-parked .bs-tier-pill-icon[b-9feqch52x5] {
    color: #64748b;
}

.bs-tier-killed .bs-tier-pill-icon[b-9feqch52x5] {
    color: #94a3b8;
}

/* Threshold-reached variant: warm tint on the pill body
   inherits the urgency without overwhelming the section. */
.bs-tier-pill-threshold[b-9feqch52x5] {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.40);
}

    .bs-tier-pill-threshold .bs-tier-pill-icon[b-9feqch52x5] {
        color: #c2410c;
    }

    .bs-tier-pill-threshold .bs-tier-pill-name[b-9feqch52x5],
    .bs-tier-pill-threshold .bs-tier-pill-count[b-9feqch52x5],
    .bs-tier-pill-threshold .bs-tier-pill-fraction[b-9feqch52x5] {
        color: #9a3412;
    }

/* ════════════════════════════════════════════════════════
   PILL ACTIVE STATE — generating
   ════════════════════════════════════════════════════════

   When _isGenerating is true, the working pill enters busy mode.
   Geometry does not change. Only:
   - icon pulses (signals activity without spinning chaos)
   - caption swaps to "Ideating" (driven by Razor)

   The pill stays the same pill. This is "active, not different". */

.bs-tier-pill-icon.is-generating[b-9feqch52x5] {
    animation: bs-tier-pill-icon-pulse-b-9feqch52x5 1.2s ease-in-out infinite;
}

@keyframes bs-tier-pill-icon-pulse-b-9feqch52x5 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.18);
    }
}

/* Pill breathing glow during generation. Subtle indigo outer ring
   pulses around the pill at a slower rhythm than the icon pulse
   inside it, and a slower rhythm than the line dots below. Three
   distinct motion sources during _isGenerating, each in a different
   visual register:
     - icon (object-level): scale + opacity pulse, 1.2s
     - pill (container-level): outer glow breathe, 1.8s
     - line dots (text-level): three dots pulse, 1.2s staggered
   No overlap in language, no rhythmic sync. */
.bs-tier-pill.is-generating[b-9feqch52x5] {
    animation: bs-tier-pill-breathe-b-9feqch52x5 1.8s ease-in-out infinite;
}

@keyframes bs-tier-pill-breathe-b-9feqch52x5 {
    0%, 100% {
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 0 rgba(99, 102, 241, 0);
    }

    50% {
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 5px rgba(99, 102, 241, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bs-tier-pill-icon.is-generating[b-9feqch52x5] {
        animation: none;
        opacity: 0.7;
    }

    .bs-tier-pill.is-generating[b-9feqch52x5] {
        animation: none;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(99, 102, 241, 0.10);
    }
}

/* ════════════════════════════════════════════════════════
   AINNA LINE — system voice surface
   ════════════════════════════════════════════════════════

   The line below the working tier header. Single state-aware
   slot replacing what used to be the static tier descriptor,
   the post-batch narrator card, and the inline ideate-error
   banner. One element, one job, one voice.

   Visual family: prose-with-icon. No card, no frame, no border.
   Same typographic foundation as the tier descriptor was — slate
   text at 12.5px — with the icon doing the state-signaling work.
   The user's eye learns: gray = ambient, darker + icon = something
   is true right now.

   Variants:
   - bs-ainna-line-ambient    static guidance, no icon
   - bs-ainna-line-progress   in-flight, animated dots before text
   - bs-ainna-line-success    completed, indigo sparkles icon
   - bs-ainna-line-actionable amber triangle, something went wrong
   - bs-ainna-line-prompt     amber hand, your turn to act

   The family extends naturally to other surfaces (graduation,
   validator preview) as Ainna's voice appears there. */

.bs-ainna-line[b-9feqch52x5] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 24px;
    padding: 0 16px;
    max-width: min(640px, calc(100% - 32px));
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    color: var(--ws-ink-3, #64748b);
    font-weight: 400;
}

.bs-ainna-line-icon[b-9feqch52x5] {
    flex-shrink: 0;
    font-size: 12.5px;
    margin-top: 2px;
}

.bs-ainna-line-text[b-9feqch52x5] {
    flex: 0 1 auto;
}

/* Ambient — same color/weight as the old static descriptor.
   No icon; this is background guidance, not a state signal. */
.bs-ainna-line-ambient[b-9feqch52x5] {
    color: var(--ws-ink-4, #94a3b8);
    justify-content: center;
    text-align: center;
}

    .bs-ainna-line-ambient .bs-ainna-line-text[b-9feqch52x5] {
        flex: 0 0 auto;
    }

/* In-progress — Ainna is thinking. Animated dots precede the
   text; same indigo accent the working tier carries. */
.bs-ainna-line-progress[b-9feqch52x5] {
    color: var(--ws-ink-2, #1e293b);
}

.bs-ainna-line-dots[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    flex-shrink: 0;
}

.bs-ainna-line-dot[b-9feqch52x5] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6366f1;
    opacity: 0.4;
    animation: bs-ainna-line-pulse-b-9feqch52x5 1.2s ease-in-out infinite;
}

    .bs-ainna-line-dot:nth-child(2)[b-9feqch52x5] {
        animation-delay: 0.22s;
    }

    .bs-ainna-line-dot:nth-child(3)[b-9feqch52x5] {
        animation-delay: 0.44s;
    }

@keyframes bs-ainna-line-pulse-b-9feqch52x5 {
    0%, 100% {
        opacity: 0.30;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* Success — Ainna observing what just happened. Indigo accent.
   Lead phrase is the headline; remainder is supporting prose. */
.bs-ainna-line-success[b-9feqch52x5] {
    color: var(--ws-ink-2, #1e293b);
}

    .bs-ainna-line-success .bs-ainna-line-icon[b-9feqch52x5] {
        color: #6366f1;
    }

.bs-ainna-line-lead[b-9feqch52x5] {
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
}

.bs-ainna-line-cta[b-9feqch52x5] {
    display: block;
    margin-top: 3px;
    color: var(--ws-ink-3, #475569);
    font-size: 12px;
}

/* Actionable — Ainna flagging that something went wrong and
   needs the user's attention. Amber, triangle icon. Reserved for
   genuine error/failure states (e.g. _lastError). */
.bs-ainna-line-actionable[b-9feqch52x5] {
    color: var(--ws-ink-2, #1e293b);
}

    .bs-ainna-line-actionable .bs-ainna-line-icon[b-9feqch52x5] {
        color: #d97706;
    }

/* Prompt — Ainna inviting the user to act. Same amber palette
   as actionable (both ask for attention) but the semantic is
   "your turn" not "something is wrong". Used for threshold-reached
   and other non-error moments where the user's next action is
   the natural unblock. */
.bs-ainna-line-prompt[b-9feqch52x5] {
    color: var(--ws-ink-2, #1e293b);
}

    .bs-ainna-line-prompt .bs-ainna-line-icon[b-9feqch52x5] {
        color: #d97706;
    }

@media (prefers-reduced-motion: reduce) {
    .bs-ainna-line-dot[b-9feqch52x5] {
        animation: none;
        opacity: 0.6;
    }
}


/* Tier body — empty state.
   Keeps presence (min-height) when no cards yet, and uses the
/* ── Tier empty hint — slim, single-line, no panel.
   When a tier has no cards yet, show one quiet line of italic
   orientation copy. No dashed box, no big icon, no minimum
   height — the hint takes only the space it needs (~36-44px),
   the tier collapses naturally toward its header. The section
   remains *present* (the header + this line) but doesn't
   dominate. The triage column scrolls naturally as cards
   accumulate in any tier. ── */

.bs-tier-empty[b-9feqch52x5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    opacity: 0.55;
}

/* Working tier empty state: a centered prompt inviting generation.
   Slightly larger but subtly colored - reads as ambient guidance,
   not a CTA. The opacity inherited from .bs-tier-empty (0.55)
   already softens it. */
.bs-tier-empty-working[b-9feqch52x5] {
    opacity: 1;
    flex: 1;
    min-height: 220px;
}

.bs-tier-empty-message[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--ws-ink-4, #94a3b8);
    text-align: center;
    margin: 0;
    max-width: 360px;
    padding: 0 24px;
}

.bs-tier-cards[b-9feqch52x5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
    /* Center cards within their rows. Last incomplete row stays
       centered too; full rows fill naturally. Doesn't break the
       wrap flow - rows still arrange L->R, just centered as a unit. */
    justify-content: center;
}

/* ============================================================
   TIER — KILL ZONE
   Distinct from Parked. Killed cards are explicit-rejection
   signal for the generator. Visually: darker section wash,
   muted accents, graveyard feel without going aggressive.
   ============================================================ */

.bs-tier-killed[b-9feqch52x5] {
    background: transparent;
}

/* ============================================================
   IDEA CARDS — sticky notes
   ============================================================ */

@keyframes bs-card-enter-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Reveal animation for freshly-generated cards: more dramatic than
   the default enter. Each card starts at scale 0.7 + rotated +14°
   off its resting tilt + opacity 0, then settles into its final
   sticky-note pose. The bs-idea-card-revealing class triggers this
   via animation-name override; per-card --reveal-delay (set inline
   from RevealDelayFor server-side) staggers the batch.

   Note: --card-rot still defines the resting tilt. The keyframes
   read it via calc() so each card's reveal rotation arrives at its
   own resting angle rather than 0deg. */
@keyframes bs-card-reveal-b-9feqch52x5 {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(calc(var(--card-rot, 0deg) + 14deg)) translateY(-12px);
    }

    60% {
        opacity: 1;
        transform: scale(1.04) rotate(calc(var(--card-rot, 0deg) - 1deg)) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--card-rot, 0deg)) translateY(0);
    }
}

/* Ghost card: skeleton placeholder during generation.
   Three things happen at once:
     1. The ghost itself appears via bs-ghost-enter (with its own
        --ghost-delay stagger so the 5 ghosts appear sequentially).
     2. The internal bs-ghost-shimmer sweeps a highlight gradient
        diagonally across the card continuously, signalling "live".
     3. The skeleton "lines" inside have a faint pulsing opacity
        so the ghost reads as breathing, not frozen. */
@keyframes bs-ghost-enter-b-9feqch52x5 {
    0% {
        opacity: 0;
        transform: scale(0.85) rotate(calc(var(--card-rot, 0deg) + 4deg)) translateY(8px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--card-rot, 0deg)) translateY(0);
    }
}

@keyframes bs-ghost-shimmer-sweep-b-9feqch52x5 {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(220%) skewX(-15deg);
    }
}

@keyframes bs-ghost-breathe-b-9feqch52x5 {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.85;
    }
}

/* ============================================================
   IDEA CARDS — sticky-note treatment
   Real-innovation-event aesthetic: each card is a sticky note
   on the workshop wall. Subtle per-card rotation (driven by
   --card-rot inline style, computed from the idea id), tier-
   based paper colors, and a soft drop shadow that suggests
   "stuck on a surface". Hover de-rotates and lifts so the
   card is easy to read.

   Tier → paper color:
     Working   = warm yellow (the classic Post-it)
     Promoted  = soft pink (brand)
     Parked    = soft blue
     Killed    = faded slate, struck through

   Selected state (indigo ring) and feedback-open state are
   preserved — they work on top of any paper color.
   ============================================================ */

.bs-idea-card[b-9feqch52x5] {
    flex: 0 0 auto;
    width: 360px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 16px;
    border-radius: 6px;
    border: none;
    background: #fff5b3; /* softer working-yellow default; tier classes override */
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease, min-height 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    transform: rotate(var(--card-rot, 0deg)) translateY(0);
    animation: bs-card-enter-b-9feqch52x5 0.26s ease both;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07), 0 4px 10px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

    /* Reveal mode: a freshly-generated card overrides the subtle
       enter animation with the dramatic reveal keyframe + a per-
       card delay (set inline). Cards arrive over ~400ms total
       across a batch of 5, each with its own bounce. */
    .bs-idea-card.bs-idea-card-revealing[b-9feqch52x5] {
        animation: bs-card-reveal-b-9feqch52x5 0.52s cubic-bezier(0.22, 1.2, 0.36, 1) both;
        animation-delay: var(--reveal-delay, 0ms);
    }

    /* Faint "paper" texture: diagonal hatch via repeating gradient.
       Very subtle (4% white) — sells the material without dominating. */
    .bs-idea-card[b-9feqch52x5]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 3px );
        pointer-events: none;
        z-index: 0;
    }

    .bs-idea-card > *[b-9feqch52x5] {
        position: relative;
        z-index: 1;
    }

    /* Hover: de-rotate to 0, lift slightly, deeper shadow */
    .bs-idea-card:hover[b-9feqch52x5] {
        transform: rotate(0deg) translateY(-2px);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        z-index: 2;
    }

    /* Move-out state: card fades before the tier flips */
    .bs-idea-card.bs-card-moving-out[b-9feqch52x5] {
        opacity: 0;
        transform: rotate(var(--card-rot, 0deg)) scale(0.94);
        pointer-events: none;
        box-shadow: none;
    }

    /* Selected state: indigo ring + de-rotate so the focused card
       sits flat and reads cleanly. Higher z-index over neighbors. */
    .bs-idea-card.bs-idea-card-selected[b-9feqch52x5] {
        z-index: 25;
        transform: rotate(0deg) translateY(-3px);
        box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.14);
    }

        .bs-idea-card.bs-idea-card-selected:hover[b-9feqch52x5] {
            transform: rotate(0deg) translateY(-3px);
        }

    /* Dimmed state: another card is selected, this one fades back */
    .bs-idea-card.bs-idea-card-dimmed[b-9feqch52x5] {
        opacity: 0.45;
    }

        .bs-idea-card.bs-idea-card-dimmed:hover[b-9feqch52x5] {
            opacity: 0.88;
        }

    /* Feedback-open state: card grows downward to accommodate the
       integrated feedback section. De-rotated for visual stability
       while typing. The height transition is already in the base
       .bs-idea-card rule (transition includes min-height). */
    .bs-idea-card.bs-idea-card-feedback-open[b-9feqch52x5] {
        min-height: 420px;
        transform: rotate(0deg) translateY(0);
    }

        .bs-idea-card.bs-idea-card-feedback-open:hover[b-9feqch52x5] {
            transform: rotate(0deg) translateY(-2px);
        }

/* ── Tier → paper color ──────────────────────────────────────
   Muted, workshop-paper tones. Hue intact (yellow / green /
   blue / gray) so semantic coding holds, but saturation pulled
   down so the wall feels calmer and reads on light AND dark
   tier backgrounds without clashing.
   ────────────────────────────────────────────────────────── */

/* Class name derives from the IdeaState enum value ("Pending"),
   not the product label ("Drafts") — the markup composes
   bs-idea-card-{enum}. The previous "-working" selector never
   matched at runtime, so this gradient silently never applied. */
.bs-idea-card-pending[b-9feqch52x5] {
    background: linear-gradient(180deg, #fff5b3 0%, #ffeb95 100%);
}

.bs-idea-card-promoted[b-9feqch52x5] {
    /* Promoted is its own category: leaves the paper for the neutral
       panel + a hairline edge (the stickies are borderless paper, so the
       neutral card needs a defined edge on the white canvas). The slate
       split pill (PROMOTED block at the end of this file) marks it. */
    background: #f7f7f7;
    border: 1px solid rgba(15, 23, 42, 0.07);
}

/* All three stickies share ONE identical yellow paper - the background
   no longer encodes state. State reads instead from a subtly muted text
   colour (working full ink, parked a step lighter, killed lighter still)
   plus the corner state tag in the markup. */
.bs-idea-card-parked[b-9feqch52x5] {
    background: linear-gradient(180deg, #fff5b3 0%, #ffeb95 100%);
}

.bs-idea-card-killed[b-9feqch52x5] {
    background: linear-gradient(180deg, #fff5b3 0%, #ffeb95 100%);
}

/* Parked: title + brief one step lighter on the ink scale. */
.bs-idea-card-parked .bs-idea-title[b-9feqch52x5] {
    color: var(--ws-ink-2, #334155);
}

.bs-idea-card-parked .bs-idea-brief[b-9feqch52x5],
.bs-idea-card-parked .bs-idea-formfactor[b-9feqch52x5] {
    color: var(--ws-ink-4, #64748b);
}

.bs-idea-card-killed .bs-idea-title[b-9feqch52x5] {
    color: var(--ws-ink-3, #475569);
    text-decoration: line-through;
    text-decoration-color: rgba(15, 23, 42, 0.30);
}

.bs-idea-card-killed .bs-idea-brief[b-9feqch52x5],
.bs-idea-card-killed .bs-idea-formfactor[b-9feqch52x5] {
    color: var(--ws-ink-5, #94a3b8);
}

/* ── Ghost (skeleton) cards: shown in the Working tier while the
   generator is in flight. Each ghost is a sticky-note-shaped
   placeholder with internal "lines" suggesting where the codename,
   title, form factor, and TLDR will land. A diagonal shimmer
   sweeps across continuously to signal "live, thinking". Ghosts
   appear in sequence via --ghost-delay (set inline by index) so
   the batch reads as the model placing each one in turn. ── */

.bs-idea-card-ghost[b-9feqch52x5] {
    flex: 0 0 auto;
    width: 360px;
    min-height: 400px;
    padding: 20px 22px 16px;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff8c8 0%, #fff0a3 100%);
    position: relative;
    transform: rotate(var(--card-rot, 0deg));
    cursor: default;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07), 0 4px 10px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: bs-ghost-enter-b-9feqch52x5 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--ghost-delay, 0ms);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    /* Same paper hatch as real cards — keeps the workshop aesthetic. */
    .bs-idea-card-ghost[b-9feqch52x5]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 3px );
        pointer-events: none;
        z-index: 0;
    }

/* Shimmer sweep: a soft diagonal highlight that crosses the ghost
   continuously while it's mounted. The skew + translate gives it
   the look of a light pass over paper rather than a loading bar. */
.bs-ghost-shimmer[b-9feqch52x5] {
    position: absolute;
    top: -10%;
    left: -50%;
    width: 60%;
    height: 120%;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100% );
    pointer-events: none;
    z-index: 1;
    animation: bs-ghost-shimmer-sweep-b-9feqch52x5 1.6s linear infinite;
    /* Start delay matches the ghost's appearance so the sweep doesn't
       run on an invisible card. */
    animation-delay: var(--ghost-delay, 0ms);
}

/* Skeleton lines: each one represents an upcoming field. Subtle
   slate fill, faint breathing animation, tier-specific widths. */
.bs-ghost-line[b-9feqch52x5] {
    position: relative;
    z-index: 2;
    background: rgba(15, 23, 42, 0.10);
    border-radius: 3px;
    height: 10px;
    animation: bs-ghost-breathe-b-9feqch52x5 1.8s ease-in-out infinite;
}

/* Codename pill stand-in — short, rounded, sits at the top. */
.bs-ghost-line-codename[b-9feqch52x5] {
    width: 36%;
    height: 13px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.14);
    margin-bottom: 4px;
}

/* Title placeholders — two lines, the second shorter, mimicking
       a 4-10 word title that wraps. Slightly taller than body. */
.bs-ghost-line-title[b-9feqch52x5] {
    width: 88%;
    height: 17px;
    background: rgba(15, 23, 42, 0.12);
}

.bs-ghost-line-title-short[b-9feqch52x5] {
    width: 60%;
    margin-bottom: 4px;
}

/* FormFactor stand-in — narrower, italic territory. */
.bs-ghost-line-formfactor[b-9feqch52x5] {
    width: 50%;
    height: 9px;
    background: rgba(15, 23, 42, 0.08);
    margin-bottom: 4px;
}

/* Body lines — the TLDR placeholder. Three lines, the last short. */
.bs-ghost-line-body[b-9feqch52x5] {
    width: 100%;
    height: 9px;
    background: rgba(15, 23, 42, 0.08);
}

.bs-ghost-line-body-short[b-9feqch52x5] {
    width: 66%;
}

/* ── Card top header ── */

.bs-idea-card-top[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.bs-idea-codename[b-9feqch52x5] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ws-ink-4, #64748b);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}


/* NEW badge — Drafts tier only, only for ideas in _newIdeaIds.
   Tracks the same lifecycle as the reveal animation: an idea is
   "new" from generation until the user triages it (MoveIdeaToTier
   removes the id from _newIdeaIds) or the next batch starts. Small
   indigo pill — quieter than the pink active-badge so it doesn't
   compete when both render on the same card. */
.bs-idea-new-badge[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.10);
    color: #4f46e5;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    flex-shrink: 0;
    cursor: default;
}

/* Active-in-toolbar: the card representing the idea currently
   open in the toolbar. Outline is dark slate (neutral on any tier
   card color - green/yellow/blue/grey all read clean) with a soft
   matching shadow halo. Replaces the previous pink which clashed
   on green Promoted cards. */
.bs-idea-title[b-9feqch52x5] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--ws-ink-1, #0f172a);
    margin: 0 0 6px;
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* FormFactor eyebrow: between title and TLDR. Italic slate text
   with a small chevron lead-in. Reads as "what shape this is"
   without competing with the codename pill at the top. Clipped to
   one line — the FormFactor field is capped at 120 chars in the
   service so this rarely truncates in practice. */
.bs-idea-formfactor[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ws-ink-3, #475569);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .bs-idea-formfactor i[b-9feqch52x5] {
        font-size: 10px;
        color: var(--ws-ink-4, #64748b);
        flex: 0 0 auto;
    }

    .bs-idea-formfactor span[b-9feqch52x5] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

.bs-idea-brief[b-9feqch52x5] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ws-ink-3, #475569);
    margin: 0 0 12px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

/* ── Footer: comment chip + action chips
   Bump removed — qualitative feedback (comments) only. ── */

.bs-idea-foot[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

/* Chips: bump + comment */
.bs-chip[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: var(--ws-ink-4, #64748b);
    transition: all 0.12s ease;
    line-height: 1.4;
    flex-shrink: 0;
}

    .bs-chip i[b-9feqch52x5] {
        font-size: 9.5px;
    }

.bs-chip-comment[b-9feqch52x5] {
    cursor: pointer;
}

    .bs-chip-comment:hover[b-9feqch52x5] {
        background: rgba(99, 102, 241, 0.08);
        border-color: rgba(99, 102, 241, 0.22);
        color: #4f46e5;
    }

    .bs-chip-comment.active[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.05);
        color: var(--ws-ink-2, #334155);
    }

        .bs-chip-comment.active:hover[b-9feqch52x5] {
            background: rgba(99, 102, 241, 0.10);
            border-color: rgba(99, 102, 241, 0.28);
            color: #4f46e5;
        }

    .bs-chip-comment.open[b-9feqch52x5] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.10));
        border-color: rgba(99, 102, 241, 0.40);
        color: #4338ca;
    }

/* ── Tier action chips: visible icon buttons in the card footer ──
   Each is contextual to the card's current tier. The kill chip
   has a distinct "pending" state during the confirm window. */

.bs-card-actions[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

/* State tag (foot): the only state marker now that all three stickies
   share one paper. Sits beside the comment chip; the action group keeps
   its margin-left:auto so the tag stays on the left. Working has none.
   Same chip vocabulary as the NEW badge. Parked = warm, killed = slate. */
.bs-idea-state-tag[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
    cursor: default;
}

.bs-idea-state-tag-parked[b-9feqch52x5] {
    background: rgba(120, 90, 0, 0.12);
    color: #7a6a1f;
}

.bs-idea-state-tag-killed[b-9feqch52x5] {
    background: rgba(15, 23, 42, 0.10);
    color: #5b6573;
}

.bs-card-action[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: white;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    font-size: 10.5px;
    transition: all 0.12s ease;
}

    .bs-card-action:hover[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.04);
        color: var(--ws-ink-1, #0f172a);
    }

    .bs-card-action.disabled[b-9feqch52x5],
    .bs-card-action:disabled[b-9feqch52x5] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* Semantic colors per action — hover only, baseline stays neutral
   so a busy card doesn't shout in four directions. */
.bs-card-action-promote:hover[b-9feqch52x5] {
    border-color: rgba(16, 185, 129, 0.50);
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}

.bs-card-action-park:hover[b-9feqch52x5] {
    border-color: rgba(100, 116, 139, 0.45);
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
}

.bs-card-action-reset:hover[b-9feqch52x5] {
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.bs-card-action-kill:hover[b-9feqch52x5] {
    border-color: rgba(185, 28, 28, 0.45);
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
}

/* Kill pending state: chip transforms to a confirm shape with
   "Sure?" text and a check icon. Red-tinted, attention-pulling. */
.bs-card-action-kill.pending[b-9feqch52x5] {
    width: auto;
    padding: 0 9px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border-color: transparent;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    gap: 5px;
    animation: bs-kill-pending-pulse-b-9feqch52x5 1.4s ease-in-out infinite;
}

    .bs-card-action-kill.pending:hover[b-9feqch52x5] {
        background: linear-gradient(135deg, #dc2626, #991b1b);
        color: white;
    }

    .bs-card-action-kill.pending .bs-card-action-confirm[b-9feqch52x5] {
        text-transform: uppercase;
    }

@keyframes bs-kill-pending-pulse-b-9feqch52x5 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* ── Graduate button — primary action on Promoted cards ──
   Sits below the brief, above the footer chips. Stronger visual
   weight than action chips because graduating is the climax move
   of the whole session loop. */

.bs-graduate-action[b-9feqch52x5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 12px;
    margin: 12px 0 4px;
    background: linear-gradient(135deg, #15803d, #166534);
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.28);
}

    .bs-graduate-action:hover[b-9feqch52x5] {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #166534, #14532d);
        box-shadow: 0 4px 12px rgba(21, 128, 61, 0.40);
    }

    .bs-graduate-action:active[b-9feqch52x5] {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(21, 128, 61, 0.30);
    }

    .bs-graduate-action i[b-9feqch52x5] {
        font-size: 11px;
    }


/* ============================================================
   SKELETONS — both columns
   ============================================================ */

@keyframes bs-skel-pulse-b-9feqch52x5 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.bs-skeleton-hero > div[b-9feqch52x5],
.bs-skeleton-element-card[b-9feqch52x5] {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.09) 50%, rgba(15, 23, 42, 0.05) 100%);
    border-radius: 6px;
    animation: bs-skel-pulse-b-9feqch52x5 1.4s ease-in-out infinite;
}

/* Left column skeleton */
.bs-skeleton-left[b-9feqch52x5] {
    padding: 32px 36px 28px;
}

.bs-skeleton-hero[b-9feqch52x5] {
    margin-bottom: 24px;
}

.bs-skeleton-eyebrow[b-9feqch52x5] {
    height: 11px;
    width: 60px;
    margin-bottom: 14px;
}

.bs-skeleton-title[b-9feqch52x5] {
    height: 28px;
    width: 80%;
    margin-bottom: 10px;
}

.bs-skeleton-subtitle[b-9feqch52x5] {
    height: 14px;
    width: 60%;
}

.bs-skeleton-element-grid[b-9feqch52x5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.bs-skeleton-element-card[b-9feqch52x5] {
    height: 90px;
}


/* ============================================================
   GENERATION THRESHOLD — visual cue on Working when over
   When Working count > threshold, the section gets a soft amber
   wash and a pill near the header. The cockpit reflects the
   gate; this is the secondary visual reminder on the board.
   ============================================================ */

.bs-tier-working.bs-tier-over-threshold[b-9feqch52x5] {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.02) 100%);
}


/* ============================================================
   CARDS COLUMN CONTAINER (.brainstorm-main)
   Vertical flex. Toolbar pinned at top, tiers scroll, cockpit
   pinned at bottom. When non-framed states render, they fill
   the column (toolbar + cockpit are gated by Framed branch).
   ============================================================ */

.brainstorm-main[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ws-bg-1, #ffffff);
    position: relative;
    overflow: hidden;
}

    /* When in non-framed state, center the state UI vertically */
    .brainstorm-main > .bs-state-empty[b-9feqch52x5],
    .brainstorm-main > .bs-state-error[b-9feqch52x5],
    .brainstorm-main > .bs-state-framing[b-9feqch52x5],
    .brainstorm-main > .bs-state-failed[b-9feqch52x5],
    .brainstorm-main > .bs-skeleton-left[b-9feqch52x5] {
        flex: 1;
        min-height: 0;
    }

/* ============================================================
   MINI-COCKPIT — floating glass island at the top of the cards
   column. NOT a toolbar — no solid background; the wrapper is
   transparent and pointer-event-passing so cards behind it
   remain reachable. The island itself is a frosted-glass pill
   with three control zones (slider · input · button), centered
   horizontally, with layered shadows for 3D lift and a soft
   pink ambient halo so it reads as "sitting on top of the
   content."

   Shares state with the full cockpit on the left rail:
     - slider binds the same _creativityLevel
     - input binds the same _inputText
     - button triggers the same OnGenerateMore handler
   Both surfaces stay in sync automatically.
   ============================================================ */

/* ============================================================
   MINI-COCKPIT — light frosted-glass pill that floats over the
   cards. Single row. Lives INSIDE .bs-tiers as the first child,
   so it shares the scroll context: position: sticky keeps it
   pinned to the top of the cards area, and tier content visibly
   scrolls past behind it through the backdrop blur.

   No outer wrapper, no toolbar stripe — the pill itself is the
   only structure on screen, with cards behind it.

   Shares state with the full cockpit on the left rail.
   ============================================================ */

.bs-mini-cockpit[b-9feqch52x5] {
    /* Absolutely positioned over .brainstorm-main (which has position:
       relative). Out of normal flow entirely — no container, no stripe,
       no spacer. The cards in .bs-tiers extend full-height behind the
       pill; the pill floats over them and the backdrop blur reveals
       them softened. Bottom-anchored so the action is always within
       thumb reach for trackpad/mouse users and the eye rests near the
       cards rather than the toolbar. */
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: calc(100% - 24px);
    min-width: 820px;
    padding: 8px 12px 8px 18px;
    /* Light frosted glass: white-tinted translucent base + heavy blur
       + saturation bump so colors behind read richer through the blur. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(248, 250, 252, 0.86) 100%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: var(--ws-ink-1, #0f172a);
    /* Multi-layered shadow for the floating 3D feel on a light surface:
       - inset top highlight (lit from above, very bright on light glass)
       - inset bottom shadow (subtle catch)
       - tight ambient shadow (object presence)
       - mid + far drop shadows projecting UPWARD (pill is bottom-
         anchored, so the drop shadow falls toward the cards above)
       - soft pink halo (signature color) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -2px 4px rgba(15, 23, 42, 0.06), 0 -12px 28px rgba(15, 23, 42, 0.14), 0 -24px 60px rgba(15, 23, 42, 0.10), 0 -16px 48px rgba(240, 12, 113, 0.08);
    transition: box-shadow 0.20s ease, background 0.20s ease;
}

    .bs-mini-cockpit:hover:not(.is-locked)[b-9feqch52x5] {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -2px 4px rgba(15, 23, 42, 0.08), 0 -14px 32px rgba(15, 23, 42, 0.16), 0 -28px 70px rgba(15, 23, 42, 0.12), 0 -18px 56px rgba(240, 12, 113, 0.14);
    }

    /* Busy state: opaquer bg + a breathing pink halo. The halo
       pulses on top of the existing inverse shadow stack — read
       as "the pill is thinking". Subtle, not a strobe. */
    .bs-mini-cockpit.is-busy[b-9feqch52x5] {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(248, 250, 252, 0.92) 100%);
        animation: bs-pill-thinking-b-9feqch52x5 2.2s ease-in-out infinite;
    }

@keyframes bs-pill-thinking-b-9feqch52x5 {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -2px 4px rgba(15, 23, 42, 0.06), 0 -12px 28px rgba(15, 23, 42, 0.14), 0 -24px 60px rgba(15, 23, 42, 0.10), 0 -16px 48px rgba(240, 12, 113, 0.12);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -2px 4px rgba(15, 23, 42, 0.08), 0 -14px 32px rgba(15, 23, 42, 0.18), 0 -28px 70px rgba(15, 23, 42, 0.14), 0 -22px 64px rgba(240, 12, 113, 0.28);
    }
}

/* ── Inline title ── */

.bs-mini-cockpit-title[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 2px;
    flex: 0 0 auto;
}

.bs-mini-cockpit-title-dot[b-9feqch52x5] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #f00c71);
    box-shadow: 0 0 6px rgba(240, 12, 113, 0.55);
    flex: 0 0 auto;
}

.bs-mini-cockpit-title-label[b-9feqch52x5] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ws-ink-2, #334155);
    white-space: nowrap;
}

/* ── Subtle vertical divider between zones ── */

.bs-mini-cockpit-divider[b-9feqch52x5] {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 10px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.10) 50%, rgba(15, 23, 42, 0) 100%);
}

/* ── Zone 1: creativity slider ── */

.bs-mini-cockpit-zone[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.bs-mini-cockpit-zone-slider[b-9feqch52x5] {
    gap: 8px;
}

.bs-mini-cockpit-zone-icon[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--accent, #f00c71);
    font-size: 11px;
}

/* "Creativity" caption — explains what the slider does at a glance */
.bs-mini-cockpit-zone-caption[b-9feqch52x5] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ws-ink-3, #475569);
    line-height: 1;
    white-space: nowrap;
    margin-left: -3px;
}

.bs-mini-cockpit.is-locked .bs-mini-cockpit-zone-caption[b-9feqch52x5] {
    color: var(--ws-ink-5, #94a3b8);
}

.bs-mini-cockpit-slider-track[b-9feqch52x5] {
    width: 110px;
    height: 22px;
}

/* Base track: slate at 35% on the light glass.
       
       Specificity is critical here. The generic .bs-generator-slider-track
       rule below (line ~3300) sets background: rgba(255,255,255,0.10)
       intended for the dark cockpit context. Source order means that rule
       would WIN on tied specificity. We pin specificity higher by
       chaining the parent class explicitly. */
.bs-mini-cockpit .bs-mini-cockpit-slider-track[b-9feqch52x5]::before {
    height: 4px;
    margin-top: -2px;
    background: rgba(15, 23, 42, 0.35);
    border-radius: 999px;
}

.bs-mini-cockpit .bs-mini-cockpit-slider-track .bs-generator-slider-fill[b-9feqch52x5] {
    height: 4px;
    margin-top: -2px;
    box-shadow: 0 0 8px rgba(240, 12, 113, 0.40);
}

/* Match the native runnable-track height to the visible track so the
       browser positions the thumb on the same y-axis as our custom fill */
.bs-mini-cockpit-slider-track .bs-generator-slider[b-9feqch52x5]::-webkit-slider-runnable-track {
    height: 4px;
}

.bs-mini-cockpit-slider-track .bs-generator-slider[b-9feqch52x5]::-moz-range-track {
    height: 4px;
}

/* Compact thumb with explicit recentering (margin-top compensates the
       webkit thumb-on-4px-track offset). full cockpit's thumb is 18px. */
.bs-mini-cockpit-slider-track .bs-generator-slider[b-9feqch52x5]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border-width: 2px;
    margin-top: -5px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
}

.bs-mini-cockpit-slider-track .bs-generator-slider[b-9feqch52x5]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.bs-mini-cockpit-zone-value[b-9feqch52x5] {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent, #f00c71);
    min-width: 84px;
    text-align: left;
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.bs-mini-cockpit.is-locked .bs-mini-cockpit-zone-icon[b-9feqch52x5],
.bs-mini-cockpit.is-locked .bs-mini-cockpit-zone-value[b-9feqch52x5] {
    color: var(--ws-ink-5, #94a3b8);
}

/* ── Zone 2: direction input ── */

.bs-mini-cockpit-input[b-9feqch52x5] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 320px;
    height: 30px;
    padding: 0 12px;
    /* Subtle inset darker bg on the light glass — the input reads as
       a field, distinct from the pill surface around it. */
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 7px;
    color: var(--ws-ink-1, #0f172a);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .bs-mini-cockpit-input[b-9feqch52x5]::placeholder {
        color: var(--ws-ink-5, #94a3b8);
        font-style: italic;
        font-weight: 400;
    }

    .bs-mini-cockpit-input:focus[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.06);
        border-color: var(--accent, #f00c71);
        box-shadow: 0 0 0 2px rgba(240, 12, 113, 0.14);
    }

    .bs-mini-cockpit-input:disabled[b-9feqch52x5] {
        color: var(--ws-ink-5, #94a3b8);
        cursor: not-allowed;
    }

        .bs-mini-cockpit-input:disabled[b-9feqch52x5]::placeholder {
            color: rgba(15, 23, 42, 0.22);
        }

/* ── Zone 3: action button — pill with label ── */

.bs-mini-cockpit-button[b-9feqch52x5] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 18px;
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b 0%, #c80670 100%));
    color: white;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(160, 5, 88, 0.30), 0 4px 10px rgba(240, 12, 113, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .bs-mini-cockpit-button:not(:disabled):hover[b-9feqch52x5] {
        background: linear-gradient(135deg, #ff2ba8 0%, #d80675 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(160, 5, 88, 0.40), 0 8px 18px rgba(240, 12, 113, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .bs-mini-cockpit-button:not(:disabled):active[b-9feqch52x5] {
        transform: translateY(0);
        background: linear-gradient(135deg, #c80670 0%, #a30558 100%);
    }

    .bs-mini-cockpit-button:disabled[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.08);
        color: var(--ws-ink-5, #94a3b8);
        box-shadow: none;
        cursor: not-allowed;
    }

.bs-mini-cockpit.is-busy .bs-mini-cockpit-button[b-9feqch52x5] {
    background: linear-gradient(135deg, #c80670 0%, #a30558 100%);
    color: white;
    cursor: progress;
}

.bs-mini-cockpit-button-label[b-9feqch52x5] {
    line-height: 1;
}

.bs-mini-cockpit-button i[b-9feqch52x5] {
    font-size: 13px;
    line-height: 1;
}

/* ── Responsive: narrow viewports ── */

@media (max-width: 1100px) {
    .bs-mini-cockpit[b-9feqch52x5] {
        min-width: 520px;
    }

    .bs-mini-cockpit-zone-caption[b-9feqch52x5] {
        display: none;
    }

    .bs-mini-cockpit-slider-track[b-9feqch52x5] {
        width: 88px;
    }

    .bs-mini-cockpit-zone-value[b-9feqch52x5] {
        min-width: 78px;
        font-size: 11px;
    }

    .bs-mini-cockpit-input[b-9feqch52x5] {
        flex-basis: 180px;
        min-width: 140px;
    }
}

@media (max-width: 900px) {
    .bs-mini-cockpit[b-9feqch52x5] {
        min-width: 340px;
    }

    .bs-mini-cockpit-zone-slider[b-9feqch52x5],
    .bs-mini-cockpit-divider:nth-of-type(2)[b-9feqch52x5] {
        display: none;
    }

    .bs-mini-cockpit-input[b-9feqch52x5] {
        flex-basis: 200px;
    }
}

/* ============================================================
   MAIN-COLUMN SCROLLBAR — discreet but present
   The tiers container scrolls vertically. Default scrollbar is
   noisy; we replace it with a slim slate one that fades into
   the canvas.
   ============================================================ */

.bs-tiers[b-9feqch52x5]::-webkit-scrollbar {
    width: 10px;
}

.bs-tiers[b-9feqch52x5]::-webkit-scrollbar-track {
    background: transparent;
}

.bs-tiers[b-9feqch52x5]::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.14);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    .bs-tiers[b-9feqch52x5]::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 23, 42, 0.26);
        background-clip: padding-box;
        border: 2px solid transparent;
    }

/* Firefox fallback */
.bs-tiers[b-9feqch52x5] {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

/* ============================================================
   LEFT RAIL — problem identity column
   Resizable via the .bs-splitter to its right. Width is driven
   by --bs-left-rail-w (clamped 260–560 in the C# handler).
   Holds the problem's identity: codename, title (Space Grotesk),
   tagline, executive summary, stats, edit button. Generation
   happens via the floating pill in the cards column.
   ============================================================ */

.brainstorm-rail-left[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    /* Slate gradient — darker than the canvas main area, lighter than
       the cockpit. Establishes visual continuity: light → mid-slate
       at the top, sliding into deep slate at the cockpit seam. */
    background: linear-gradient(180deg, #eef2f7 0%, #dde4ec 100%);
    border-right: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    position: relative;
}

/* Scrollable top section — identity, summary, stats, edit */
.bs-rail-content[b-9feqch52x5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .bs-rail-content[b-9feqch52x5]::-webkit-scrollbar {
        width: 8px;
    }

    .bs-rail-content[b-9feqch52x5]::-webkit-scrollbar-track {
        background: transparent;
    }

    .bs-rail-content[b-9feqch52x5]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.14);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .bs-rail-content[b-9feqch52x5]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.24);
            background-clip: padding-box;
            border: 2px solid transparent;
        }

/* ── Sticky footer ──
   Pinned to the bottom of the left rail. Holds the stats row + Edit
   framing button. Stays visible while .bs-rail-content scrolls long
   content above it. flex-shrink:0 keeps the footer's height even when
   content above is tall enough to fill the viewport. */
.bs-rail-footer[b-9feqch52x5] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 28px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.4) 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    /* Stats row inside the footer: same compact treatment as before
       but lives at the bottom of the rail now. */
    .bs-rail-footer .bs-rail-stats[b-9feqch52x5] {
        margin: 0;
    }



/* Narrow rail: tighten the footer padding so stats + button still
   sit comfortably above the cockpit. */
@media (max-width: 320px) {
    .bs-rail-footer[b-9feqch52x5] {
        padding: 12px 20px 14px;
    }
}

/* ── Codename pill — small, refined ── */
.bs-rail-codename[b-9feqch52x5] {
    align-self: flex-start;
    padding: 5px 11px 4px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-3, #475569);
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    line-height: 1;
    margin-bottom: -2px; /* close gap to title */
}

/* ── Problem name — the typographic anchor.
   Space Grotesk → Inter fallback. Larger and tighter than v1. ── */
.bs-rail-title[b-9feqch52x5] {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--ws-ink-1, #0f172a);
    word-break: break-word;
}

.bs-rail-title-pending[b-9feqch52x5] {
    color: var(--ws-ink-5, #94a3b8);
    font-style: italic;
}

.bs-rail-tagline[b-9feqch52x5] {
    margin-top: -4px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ws-ink-3, #475569);
    letter-spacing: -0.005em;
}

/* ── Executive summary paragraph ── */
.bs-rail-summary[b-9feqch52x5] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ws-ink-3, #475569);
    white-space: pre-wrap;
}

.bs-rail-summary-pending[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ws-ink-5, #94a3b8);
    font-style: italic;
}

    .bs-rail-summary-pending i[b-9feqch52x5] {
        color: #6366f1;
        font-size: 12px;
    }

.bs-rail-summary-failed[b-9feqch52x5] {
    color: #92400e;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.20);
    border-radius: 6px;
    padding: 10px 12px;
}

/* ── Stats row — created · ideas · contributors ── */
.bs-rail-stats[b-9feqch52x5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 4px;
    color: var(--ws-ink-4, #64748b);
    font-size: 11.5px;
}

.bs-rail-stat[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

    .bs-rail-stat i[b-9feqch52x5] {
        font-size: 10px;
        color: var(--ws-ink-5, #94a3b8);
    }

    .bs-rail-stat strong[b-9feqch52x5] {
        font-weight: 600;
        color: var(--ws-ink-2, #334155);
    }

.bs-rail-stat-dot[b-9feqch52x5] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
}


/* ============================================================
   FRAMING ASPECTS — pill strip + on-demand detail panel
   ============================================================

   Lives in the left rail below the executive summary block. The
   pill strip is a wrap-flex row of compact tab triggers; clicking
   one opens its corresponding aspect in the detail panel below.
   Clicking again closes. Pills with empty backing fields are
   not rendered server-side.

   Responsiveness: pills wrap naturally; detail panel scrolls
   internally on long content; container shrinks safely when the
   user drags the splitter narrower. */

.bs-rail-aspects[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.bs-rail-aspects-strip[b-9feqch52x5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.bs-rail-aspect-pill[b-9feqch52x5] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 9px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--ws-ink-3, #64748b);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
    user-select: none;
}

    .bs-rail-aspect-pill i[b-9feqch52x5] {
        font-size: 9.5px;
        opacity: 0.7;
    }

    .bs-rail-aspect-pill:hover[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.07);
        color: var(--ws-ink-2, #334155);
        border-color: rgba(15, 23, 42, 0.10);
    }

    .bs-rail-aspect-pill:focus-visible[b-9feqch52x5] {
        outline: 2px solid rgba(99, 102, 241, 0.45);
        outline-offset: 1px;
    }

    /* Active state: subtle filled pink, the same accent family used
       elsewhere on this canvas for selected/active controls. */
    .bs-rail-aspect-pill.is-active[b-9feqch52x5] {
        background: linear-gradient(135deg, rgba(240, 12, 113, 0.10) 0%, rgba(240, 12, 113, 0.06) 100%);
        color: var(--accent, #f00c71);
        border-color: rgba(240, 12, 113, 0.30);
        transform: translateY(-1px);
        box-shadow: 0 1px 2px rgba(240, 12, 113, 0.08);
    }

        .bs-rail-aspect-pill.is-active i[b-9feqch52x5] {
            opacity: 0.85;
        }

/* Detail panel: appears below the pill strip when an aspect is
   active. Constrained max-height so long content scrolls inside
   the panel rather than blowing out the rail. */
.bs-rail-aspect-panel[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(252, 250, 247, 0.55) 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    overflow: hidden;
    max-height: 50vh;
    animation: bs-rail-aspect-panel-in-b-9feqch52x5 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bs-rail-aspect-panel-in-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bs-rail-aspect-panel-head[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
}

.bs-rail-aspect-panel-icon[b-9feqch52x5] {
    font-size: 11px;
    color: var(--accent, #f00c71);
    flex-shrink: 0;
}

.bs-rail-aspect-panel-title[b-9feqch52x5] {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ws-ink-2, #334155);
    flex: 1 1 auto;
    min-width: 0;
}

.bs-rail-aspect-panel-close[b-9feqch52x5] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ws-ink-4, #94a3b8);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
    font-size: 11px;
}

    .bs-rail-aspect-panel-close:hover[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.06);
        color: var(--ws-ink-2, #334155);
    }

/* Panel body: internally scrollable for long content. Padding gives
   the prose breathing room. */
.bs-rail-aspect-panel-body[b-9feqch52x5] {
    padding: 12px 14px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

    .bs-rail-aspect-panel-body[b-9feqch52x5]::-webkit-scrollbar {
        width: 6px;
    }

    .bs-rail-aspect-panel-body[b-9feqch52x5]::-webkit-scrollbar-track {
        background: transparent;
    }

    .bs-rail-aspect-panel-body[b-9feqch52x5]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.10);
        border-radius: 3px;
    }

        .bs-rail-aspect-panel-body[b-9feqch52x5]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.18);
        }

.bs-rail-aspect-text[b-9feqch52x5] {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ws-ink-1, #0f172a);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Scores block: three labeled rows with mini bars + numeric value,
   then optional justification paragraph below. */
.bs-rail-aspect-scores[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bs-rail-aspect-score-row[b-9feqch52x5] {
    display: grid;
    grid-template-columns: 88px 1fr 22px;
    align-items: center;
    gap: 10px;
}

.bs-rail-aspect-score-label[b-9feqch52x5] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ws-ink-3, #64748b);
}

.bs-rail-aspect-score-bar[b-9feqch52x5] {
    height: 6px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.bs-rail-aspect-score-fill[b-9feqch52x5] {
    height: 100%;
    background: linear-gradient(90deg, rgba(240, 12, 113, 0.55) 0%, rgba(240, 12, 113, 0.85) 100%);
    border-radius: 3px;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.bs-rail-aspect-score-val[b-9feqch52x5] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bs-rail-aspect-score-justification[b-9feqch52x5] {
    margin: 8px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ws-ink-2, #334155);
    font-style: italic;
}

/* Narrow rail behavior: when the splitter pulls the rail under a
   threshold, pill labels shrink slightly and the panel head tightens.
   Pill icons keep their size so taps stay reliable. */
@media (max-width: 320px) {
    .bs-rail-aspect-pill[b-9feqch52x5] {
        padding: 4px 9px 4px 8px;
        font-size: 11px;
    }

    .bs-rail-aspect-panel-body[b-9feqch52x5] {
        padding: 10px 12px 12px;
    }

    .bs-rail-aspect-score-row[b-9feqch52x5] {
        grid-template-columns: 72px 1fr 22px;
    }
}


/* ── Rail state messages (load error fallback) ── */
.bs-rail-state-msg[b-9feqch52x5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 22px;
    font-size: 13px;
    color: var(--ws-ink-4, #64748b);
    line-height: 1.5;
}

    .bs-rail-state-msg i[b-9feqch52x5] {
        color: #ef4444;
        font-size: 14px;
        margin-top: 2px;
    }

/* ── Rail skeleton ── */
.bs-rail-skeleton[b-9feqch52x5] {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bs-rail-skel-pill[b-9feqch52x5] {
    width: 72px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.06));
    background-size: 200% 100%;
    animation: bs-skel-shimmer-b-9feqch52x5 1.4s ease-in-out infinite;
}

.bs-rail-skel-title[b-9feqch52x5] {
    width: 80%;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.06));
    background-size: 200% 100%;
    animation: bs-skel-shimmer-b-9feqch52x5 1.4s ease-in-out infinite;
    margin-top: 4px;
}

.bs-rail-skel-line[b-9feqch52x5] {
    width: 100%;
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.09), rgba(15, 23, 42, 0.05));
    background-size: 200% 100%;
    animation: bs-skel-shimmer-b-9feqch52x5 1.4s ease-in-out infinite;
}

.bs-rail-skel-line-short[b-9feqch52x5] {
    width: 60%;
}

@keyframes bs-skel-shimmer-b-9feqch52x5 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ============================================================
   SLIDER PRIMITIVES — shared by the mini-cockpit pill
   Track + fill + native input with custom thumb. The pill in
   the main column reuses these classes via overrides in the
   .bs-mini-cockpit-slider-track scope.
   ============================================================ */

.bs-generator-slider-track[b-9feqch52x5] {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

    /* Base track line under the fill — no border, just the line */
    .bs-generator-slider-track[b-9feqch52x5]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        background: rgba(255, 255, 255, 0.10);
        border-radius: 999px;
    }

.bs-generator-slider-fill[b-9feqch52x5] {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    width: var(--fill-pct, 0%);
    background: linear-gradient(90deg, #f00c71 0%, #ff4d94 60%, #ffa1c9 100%);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(240, 12, 113, 0.45);
    transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* Native input layered transparent over the track — owns pointer events.
   Several explicit suppressions here: some Chromium builds (especially
   on Windows) still render a default rounded track border despite
   appearance: none. Killing border, box-shadow, padding, the runnable
   track, and focus styles removes the visible frame around the slider. */
.bs-generator-slider[b-9feqch52x5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

    .bs-generator-slider:focus[b-9feqch52x5],
    .bs-generator-slider:focus-visible[b-9feqch52x5] {
        outline: none;
        box-shadow: none;
        border: none;
    }

    .bs-generator-slider[b-9feqch52x5]::-webkit-slider-runnable-track {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 4px;
    }

    .bs-generator-slider:disabled[b-9feqch52x5] {
        cursor: not-allowed;
    }

    .bs-generator-slider[b-9feqch52x5]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        border: 2.5px solid var(--accent, #f00c71);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40), 0 0 0 0 rgba(240, 12, 113, 0.0);
        cursor: grab;
        transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.12s ease;
    }

    .bs-generator-slider:not(:disabled):hover[b-9feqch52x5]::-webkit-slider-thumb {
        transform: scale(1.10);
        border-color: #ff4d94;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(240, 12, 113, 0.22);
    }

    .bs-generator-slider:not(:disabled):active[b-9feqch52x5]::-webkit-slider-thumb {
        cursor: grabbing;
        transform: scale(1.14);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.50), 0 0 0 10px rgba(240, 12, 113, 0.26);
    }

    .bs-generator-slider[b-9feqch52x5]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        border: 2.5px solid var(--accent, #f00c71);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
        cursor: grab;
    }

    .bs-generator-slider:not(:disabled):hover[b-9feqch52x5]::-moz-range-thumb {
        transform: scale(1.10);
        border-color: #ff4d94;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(240, 12, 113, 0.22);
    }

    .bs-generator-slider[b-9feqch52x5]::-moz-range-track {
        background: transparent;
        height: 4px;
    }

    .bs-generator-slider:disabled[b-9feqch52x5]::-webkit-slider-thumb {
        border-color: var(--on-dark-3, rgba(255, 255, 255, 0.40));
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    }

    .bs-generator-slider:disabled[b-9feqch52x5]::-moz-range-thumb {
        border-color: var(--on-dark-3, rgba(255, 255, 255, 0.40));
    }


/* ============================================================
   SPLITTER — drag handle between left rail and main column
   6px hit area, 1px visible line with a small grip in the middle.
   Pointer events handled in C# (no JS). cursor: col-resize.
   ============================================================ */

.bs-splitter[b-9feqch52x5] {
    position: relative;
    width: 6px;
    background: transparent;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
}

    .bs-splitter[b-9feqch52x5]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--border-color, #e2e8f0);
        transition: background-color 0.15s ease;
    }

    .bs-splitter:hover[b-9feqch52x5] {
        background: rgba(99, 102, 241, 0.06);
    }

        .bs-splitter:hover[b-9feqch52x5]::before {
            background: rgba(99, 102, 241, 0.45);
        }

    .bs-splitter.is-active[b-9feqch52x5] {
        background: rgba(99, 102, 241, 0.10);
    }

        .bs-splitter.is-active[b-9feqch52x5]::before {
            background: #6366f1;
        }

.bs-splitter-grip[b-9feqch52x5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.10);
    transition: background-color 0.15s ease, height 0.15s ease;
}

.bs-splitter:hover .bs-splitter-grip[b-9feqch52x5] {
    background: rgba(99, 102, 241, 0.55);
    height: 40px;
}

.bs-splitter.is-active .bs-splitter-grip[b-9feqch52x5] {
    background: #6366f1;
    height: 44px;
}


/* ============================================================
   TIMELINE COLUMN — discussion + system events
   Collapsible right column. Open state: header + scrollable body.
   Collapsed state: vertical rail button (44px) with a count badge.
   Width is grid-controlled (.bs-timeline-is-collapsed on the grid).
   ============================================================ */

.brainstorm-timeline[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(241, 245, 249, 0.5) 100%);
    border-left: 1px solid var(--border-color, #e2e8f0);
    position: relative;
    overflow: hidden;
}

    /* Collapsed: the column shrinks to 44px; rail button fills it */
    .brainstorm-timeline.is-collapsed[b-9feqch52x5] {
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.85) 0%, rgba(241, 245, 249, 0.95) 100%);
    }

.bs-timeline-collapsed-rail[b-9feqch52x5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 0;
    gap: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ws-ink-4, #64748b);
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .bs-timeline-collapsed-rail:hover[b-9feqch52x5] {
        background: rgba(99, 102, 241, 0.04);
        color: #4f46e5;
    }

    .bs-timeline-collapsed-rail i[b-9feqch52x5] {
        font-size: 11px;
    }

.bs-timeline-collapsed-label[b-9feqch52x5] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bs-timeline-collapsed-count[b-9feqch52x5] {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.bs-timeline-header[b-9feqch52x5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: white;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Toggle button: chevron pin to collapse the column */
.bs-timeline-toggle[b-9feqch52x5] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--ws-ink-5, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .bs-timeline-toggle:hover[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.05);
        color: var(--ws-ink-2, #334155);
        border-color: rgba(15, 23, 42, 0.06);
    }

    .bs-timeline-toggle i[b-9feqch52x5] {
        font-size: 10px;
    }

.bs-timeline-title[b-9feqch52x5] {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ws-ink-2, #334155);
}

.bs-timeline-filter[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 6px;
}

.bs-timeline-filter-btn[b-9feqch52x5] {
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ws-ink-4, #64748b);
    cursor: pointer;
    transition: all 0.12s ease;
}

    .bs-timeline-filter-btn:hover[b-9feqch52x5] {
        color: var(--ws-ink-2, #334155);
    }

    .bs-timeline-filter-btn.active[b-9feqch52x5] {
        background: white;
        color: var(--ws-ink-1, #0f172a);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

.bs-timeline-body[b-9feqch52x5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .bs-timeline-body[b-9feqch52x5]::-webkit-scrollbar {
        width: 6px;
    }

    .bs-timeline-body[b-9feqch52x5]::-webkit-scrollbar-track {
        background: transparent;
    }

    .bs-timeline-body[b-9feqch52x5]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.12);
        border-radius: 3px;
    }

        .bs-timeline-body[b-9feqch52x5]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.20);
        }

.bs-timeline-empty[b-9feqch52x5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ws-ink-4, #64748b);
    font-size: 13px;
}

    .bs-timeline-empty i[b-9feqch52x5] {
        font-size: 22px;
        color: var(--ws-ink-5, #94a3b8);
        margin-bottom: 4px;
    }

.bs-timeline-empty-hint[b-9feqch52x5] {
    font-size: 11.5px;
    color: var(--ws-ink-5, #94a3b8);
    font-style: italic;
    max-width: 240px;
    line-height: 1.45;
}

/* ── Timeline item base ── */

.bs-timeline-item[b-9feqch52x5] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px 9px 9px;
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.16s ease;
    position: relative;
    animation: bs-timeline-item-enter-b-9feqch52x5 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--enter-delay, 0ms);
}

/* Enter animation: subtle fade + slight rise + tiny scale settle.
   Plays once on first DOM creation via @key=item.Id - existing items
   keep their DOM across renders and never re-animate. New comments
   (from a fresh submit or a problem-switch reload) get the entrance. */
@keyframes bs-timeline-item-enter-b-9feqch52x5 {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bs-timeline-item:hover[b-9feqch52x5] {
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* System event variant — more muted, icon instead of avatar */
.bs-timeline-item-system[b-9feqch52x5] {
    background: rgba(248, 250, 252, 0.7);
    border-color: rgba(15, 23, 42, 0.04);
}

/* Selected — emphasized */
.bs-timeline-item.bs-timeline-item-selected[b-9feqch52x5] {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, white 100%);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

/* Dimmed — another item selected, this one fades */
.bs-timeline-item.bs-timeline-item-dimmed[b-9feqch52x5] {
    opacity: 0.4;
}

    .bs-timeline-item.bs-timeline-item-dimmed:hover[b-9feqch52x5] {
        opacity: 0.8;
    }

.bs-timeline-avatar[b-9feqch52x5] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.bs-timeline-event-icon[b-9feqch52x5] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.10);
    color: #6366f1;
    font-size: 11px;
}

.bs-timeline-content[b-9feqch52x5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bs-timeline-meta[b-9feqch52x5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1;
}

.bs-timeline-author[b-9feqch52x5] {
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
}

.bs-timeline-time[b-9feqch52x5] {
    color: var(--ws-ink-5, #94a3b8);
    font-size: 10.5px;
}

.bs-timeline-text[b-9feqch52x5] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ws-ink-2, #334155);
    letter-spacing: -0.003em;
    word-wrap: break-word;
}

.bs-timeline-event-text[b-9feqch52x5] {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ws-ink-2, #334155);
    font-weight: 500;
}

.bs-timeline-link[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 2px 7px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 4px;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ws-ink-3, #475569);
    align-self: flex-start;
}

    .bs-timeline-link i[b-9feqch52x5] {
        font-size: 8.5px;
        opacity: 0.7;
    }

.bs-timeline-link-inline[b-9feqch52x5] {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ws-ink-3, #475569);
    padding: 1px 5px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 3px;
}

/* ============================================================
   IN-CARD FEEDBACK INPUT
   Appears at the bottom of a card when its comment chip is
   clicked. Avatar + textarea + send button in one row.
   Submit lands the comment in the timeline (not in the card).
   ============================================================ */

/* Integrated feedback section: lives as the last child inside
   .bs-idea-card. Reaches the card's outer edges via negative
   horizontal + bottom margins that punch through the card's
   own padding (18/19/14). Hairline top border serves as the
   divider between card body and feedback zone. Translucent
   white-tinted background sits ON TOP of the tier's paper
   color, reading as a "different paper tone" rather than a
   separate box. The card's own border-radius + overflow:hidden
   carry the bottom corners. */
.bs-card-feedback[b-9feqch52x5] {
    flex-shrink: 0;
    margin: 14px -19px -14px;
    padding: 12px 14px 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.72) 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    animation: bs-card-feedback-enter-b-9feqch52x5 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    z-index: 1;
}

@keyframes bs-card-feedback-enter-b-9feqch52x5 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bs-comment-avatar[b-9feqch52x5] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.bs-comment-avatar-input[b-9feqch52x5] {
    width: 22px;
    height: 22px;
    font-size: 9px;
}

.bs-card-feedback-textarea[b-9feqch52x5] {
    /* The card ancestor sets user-select: none; re-assert text
       selection here so caret placement inside the textarea is
       never inherited away (WebKit is inconsistent about form
       fields under a none ancestor). */
    -webkit-user-select: text;
    user-select: text;
    flex: 1;
    min-width: 0;
    min-height: 28px;
    max-height: 72px;
    padding: 5px 7px;
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 5px;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ws-ink-1, #0f172a);
    resize: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

    .bs-card-feedback-textarea:focus[b-9feqch52x5] {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.14);
    }

    .bs-card-feedback-textarea[b-9feqch52x5]::placeholder {
        color: var(--ws-ink-5, #94a3b8);
        font-style: italic;
    }

.bs-card-feedback-send[b-9feqch52x5] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--ws-ink-5, #94a3b8);
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s ease;
}

    .bs-card-feedback-send:not(:disabled)[b-9feqch52x5] {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: white;
        box-shadow: 0 2px 5px rgba(99, 102, 241, 0.25);
    }

        .bs-card-feedback-send:not(:disabled):hover[b-9feqch52x5] {
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
        }

    .bs-card-feedback-send:disabled[b-9feqch52x5] {
        cursor: default;
    }

/* Comment chip open state */
.bs-chip.bs-chip-comment.open[b-9feqch52x5] {
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.28);
}

/* ============================================================
   RESPONSIVE
   The left rail and main column compress at narrower viewports;
   below 860px the rail hides; below 720px the layout stacks
   (main on top, timeline as drawer).
   KNOWN GAP: the "Edit framing modal" this fallback relied on
   was retired — below 860px the problem identity, framing
   aspects, and per-pill editing are currently unreachable. A
   drawer/sheet replacement is planned in the responsive pass.
   ============================================================ */

@media (max-width: 1280px) {
    .brainstorm-grid[b-9feqch52x5] {
        grid-template-columns: 340px 6px 1fr 300px;
    }

        .brainstorm-grid.bs-timeline-is-collapsed[b-9feqch52x5] {
            grid-template-columns: 340px 6px 1fr 44px;
        }
}

@media (max-width: 1024px) {
    .brainstorm-grid[b-9feqch52x5] {
        grid-template-columns: 300px 6px 1fr 280px;
    }

        .brainstorm-grid.bs-timeline-is-collapsed[b-9feqch52x5] {
            grid-template-columns: 300px 6px 1fr 44px;
        }

    .bs-rail-title[b-9feqch52x5] {
        font-size: 28px;
    }

    .bs-idea-card[b-9feqch52x5] {
        width: 270px;
        min-height: 340px;
    }

    .bs-idea-title[b-9feqch52x5] {
        font-size: 17px;
    }
}

@media (max-width: 860px) {
    /* Suppress the rail at narrow widths — canvas needs the room.
       Rail content is reachable via Edit framing modal; generator
       gets surfaced separately when this breakpoint matters. */
    .brainstorm-grid[b-9feqch52x5] {
        grid-template-columns: 1fr 280px;
    }

    .brainstorm-rail-left[b-9feqch52x5],
    .bs-splitter[b-9feqch52x5] {
        display: none;
    }

    .brainstorm-grid.bs-timeline-is-collapsed[b-9feqch52x5] {
        grid-template-columns: 1fr 44px;
    }
}

@media (max-width: 720px) {
    .brainstorm-grid[b-9feqch52x5] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

        .brainstorm-grid.bs-timeline-is-collapsed[b-9feqch52x5] {
            grid-template-columns: 1fr;
        }

    .brainstorm-timeline[b-9feqch52x5] {
        max-height: 280px;
        border-left: none;
        border-top: 1px solid var(--border-color, #e2e8f0);
    }

    .bs-idea-card[b-9feqch52x5] {
        width: 240px;
        min-height: 320px;
    }

    .bs-idea-title[b-9feqch52x5] {
        font-size: 16px;
    }



    .bs-tier[b-9feqch52x5] {
        padding: 0 12px 18px;
    }
}


/* ── Generate button shimmer ───────────────────────────────
   Pulses the generate button to invite the next iteration
   when the user is sitting on a fresh batch and hasn't yet
   made a triage decision. The keyframes preserve the button's
   base 3-layer box-shadow and add a breathing accent halo
   on top. Respects prefers-reduced-motion. */
.bs-mini-cockpit-button.is-shimmering[b-9feqch52x5] {
    animation: bs-cockpit-shimmer-b-9feqch52x5 2.6s ease-in-out infinite;
}

@keyframes bs-cockpit-shimmer-b-9feqch52x5 {
    0%, 100% {
        box-shadow: 0 1px 2px rgba(160, 5, 88, 0.30), 0 4px 10px rgba(240, 12, 113, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 0 rgba(240, 12, 113, 0);
    }

    50% {
        box-shadow: 0 1px 2px rgba(160, 5, 88, 0.30), 0 4px 10px rgba(240, 12, 113, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 6px rgba(240, 12, 113, 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bs-mini-cockpit-button.is-shimmering[b-9feqch52x5] {
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════
   FRAMING ASPECTS — inline edit + gates
   New states layered on top of the existing pill/panel
   chrome to support: locked core pills, ghost (empty)
   pills clustered separately, pill-disabled-while-editing,
   and the in-panel edit affordance / textarea / actions.
   ════════════════════════════════════════════════════════ */

/* Lock icon trailing the label on a locked core pill. Kept
   small so it reads as a quiet metadata mark, not a warning. */
.bs-rail-aspect-pill-lock[b-9feqch52x5] {
    font-size: 8.5px;
    opacity: 0.55;
    margin-left: 2px;
}

/* Locked pill: still readable, still clickable to view, just
   visually marked as immutable. The lock icon does the work;
   color shift stays subtle. */
.bs-rail-aspect-pill.is-locked[b-9feqch52x5] {
    color: var(--ws-ink-4, #94a3b8);
}

    .bs-rail-aspect-pill.is-locked:hover[b-9feqch52x5] {
        color: var(--ws-ink-3, #64748b);
    }

/* Disabled state: a pill is non-target while a different pill
   is in edit mode. Visually dimmed, pointer-events killed so
   stray clicks don't navigate away from unsaved changes. */
.bs-rail-aspect-pill.is-disabled[b-9feqch52x5] {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* Visual separator between populated and ghost pills. A faint
   vertical rule rather than a label — the cluster is self-
   explanatory in context. */
.bs-rail-aspects-divider[b-9feqch52x5] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(15, 23, 42, 0.12);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Ghost pill: a slot for an empty field the owner can still
   fill. Dotted border, muted ink, with a small "+" trailing
   the label. Hover lifts to the populated pill weight. */
.bs-rail-aspect-pill.is-ghost[b-9feqch52x5] {
    background: transparent;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    color: var(--ws-ink-4, #94a3b8);
}

    .bs-rail-aspect-pill.is-ghost:hover[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.03);
        border-color: rgba(15, 23, 42, 0.28);
        color: var(--ws-ink-3, #64748b);
    }

    .bs-rail-aspect-pill.is-ghost i[b-9feqch52x5] {
        opacity: 0.55;
    }

.bs-rail-aspect-pill-ghost-mark[b-9feqch52x5] {
    font-size: 13px;
    line-height: 1;
    margin-left: 1px;
    font-weight: 500;
    opacity: 0.7;
}

/* Edit pen in the panel header. Mirrors the close button's
   geometry so the two sit together as a tight cluster. */
.bs-rail-aspect-panel-edit[b-9feqch52x5] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ws-ink-4, #94a3b8);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
    font-size: 10.5px;
}

    .bs-rail-aspect-panel-edit:hover[b-9feqch52x5] {
        background: rgba(240, 12, 113, 0.08);
        color: var(--accent, #f00c71);
    }

/* Panel in edit mode: subtle accent on the head to signal the
   state shift. The body is the normal one — the inputs carry
   their own affordances. */
.bs-rail-aspect-panel.is-editing .bs-rail-aspect-panel-head[b-9feqch52x5] {
    background: linear-gradient(180deg, rgba(240, 12, 113, 0.05) 0%, rgba(255, 255, 255, 0.4) 100%);
    border-bottom-color: rgba(240, 12, 113, 0.18);
}

/* Edit input block: textarea or single-line input + label */
.bs-rail-aspect-edit-block[b-9feqch52x5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* No margin-top — the block must occupy the exact same starting
       position the read-only <p> would. Any margin here shifts the
       editor relative to the display state on toggle. */
}

.bs-rail-aspect-edit-label[b-9feqch52x5] {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ws-ink-4, #94a3b8);
}

/* Edit textarea and input — POSITION-NEUTRAL by design.
   The text inside the editor sits at the same pixel position the
   read-only <p class="bs-rail-aspect-text"> would occupy, so the
   panel doesn't shift on view/edit toggle. To achieve that:
     - padding: 0  (display <p> has zero padding too)
     - border: 0   (no border-pushed offset)
     - margin: 0   (block-level position handled by the parent)
   Edit-mode visual is signalled by background tint and an inset
   shadow — both layout-neutral. A subtle inner ring via inset
   box-shadow stands in for a border without taking up space.
   Manual resize is disabled: the surface mirrors the display
   footprint via field-sizing, not user drag. */
.bs-rail-aspect-edit-textarea[b-9feqch52x5] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    /* Typography mirrors .bs-rail-aspect-text exactly. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ws-ink-1, #0f172a);
    /* Edit signals: faint accent tint + soft inset depth.
       The inset shadow is set to spread inward from the top so the
       surface reads as gently recessed — the "depth" cue. */
    background: rgba(240, 12, 113, 0.05);
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05);
    outline: none;
    /* No manual resize handle. field-sizing controls vertical growth. */
    resize: none;
    field-sizing: content;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

.bs-rail-aspect-edit-textarea[b-9feqch52x5] {
    /* One-line floor so a single-line edit (e.g. a short HMW) renders
       at the same height as a one-line read-only paragraph. Beyond
       that, field-sizing: content grows the box to fit. Where
       field-sizing isn't supported, the textarea stays at this floor
       and content scrolls inside — an accepted degradation on
       browsers that aren't current. */
    min-height: 1.55em;
}


    .bs-rail-aspect-edit-textarea:focus[b-9feqch52x5] {
        background: rgba(240, 12, 113, 0.075);
        box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(240, 12, 113, 0.12);
    }

    .bs-rail-aspect-edit-textarea:disabled[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.03);
        color: var(--ws-ink-3, #64748b);
        cursor: not-allowed;
    }

/* Inline error: lives between the input and the actions row.
   Pulls the editor's attention without a modal-style alert. */
.bs-rail-aspect-edit-error[b-9feqch52x5] {
    margin-top: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    color: #92400e;
}

    .bs-rail-aspect-edit-error i[b-9feqch52x5] {
        font-size: 11px;
        color: #d97706;
    }

/* Action bar — Save + Cancel.
   Lives as a SIBLING of the panel (not inside its body) so the
   panel itself has identical dimensions in view and edit mode.
   When this bar appears, it slots into .bs-rail-aspects via the
   container's flex gap; no own margin-top is needed. Right-aligned
   so the eye lands on Save once the user finishes typing. */
.bs-rail-aspect-edit-actions[b-9feqch52x5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.bs-rail-aspect-edit-btn[b-9feqch52x5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.08s ease;
}

    .bs-rail-aspect-edit-btn:active:not(:disabled)[b-9feqch52x5] {
        transform: translateY(1px);
    }

    .bs-rail-aspect-edit-btn:disabled[b-9feqch52x5] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .bs-rail-aspect-edit-btn i[b-9feqch52x5] {
        font-size: 10.5px;
    }

.bs-rail-aspect-edit-btn-secondary[b-9feqch52x5] {
    background: white;
    color: var(--ws-ink-2, #334155);
    border-color: rgba(15, 23, 42, 0.14);
}

    .bs-rail-aspect-edit-btn-secondary:hover:not(:disabled)[b-9feqch52x5] {
        background: rgba(15, 23, 42, 0.04);
        border-color: rgba(15, 23, 42, 0.22);
    }

.bs-rail-aspect-edit-btn-primary[b-9feqch52x5] {
    background: var(--accent, #f00c71);
    color: white;
    border-color: var(--accent, #f00c71);
}

    .bs-rail-aspect-edit-btn-primary:hover:not(:disabled)[b-9feqch52x5] {
        background: #d80964;
        border-color: #d80964;
    }


/* =====================================================================
   CARD HEAD - contained state pill on a neutral body
   The body is the viewer's neutral panel colour in all four states; the
   state lives entirely in a contained, rounded pill (codename + title)
   floating on it, mirroring the viewer's floating header. Working =
   yellow, parked = blue, killed = grey, promoted = the viewer's slate
   (which also carries the score slot, reusing the viewer's awaiting "?"
   language until the concept is assessed). Moving a card recolors the
   pill rather than relaying the card out.
   ===================================================================== */
/* Resting states keep the sticky-note paper; the header is a dashed
   pill outline ON that paper (no fill), so the card structure is visible
   while the note still reads as a working draft. The dashed edge is
   tinted to each paper hue. Promotion keeps the same paper and only
   swaps the header to the slate pill (in the PROMOTED block below). */
.bs-idea-card-head[b-9feqch52x5] {
    position: relative;
    margin: 0 0 13px;
    padding: 10px 13px;
    border-radius: 11px;
    background: transparent;
    border: 1.5px dashed rgba(120, 90, 0, 0.34);
    transition: border-color 0.25s ease;
}

/* Pills identical across all three stickies (bg is identical now). */
.bs-idea-card-parked .bs-idea-card-head[b-9feqch52x5],
.bs-idea-card-killed .bs-idea-card-head[b-9feqch52x5] {
    border-color: rgba(120, 90, 0, 0.34);
}

.bs-idea-card-promoted .bs-idea-card-head[b-9feqch52x5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    background: linear-gradient(180deg, #1a212c 0%, #0e131b 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20);
    animation: bs-promote-settle-b-9feqch52x5 0.3s ease 0.06s both;
}

.bs-idea-card-promoted .bs-idea-card-top[b-9feqch52x5] {
    grid-column: 1;
    grid-row: 1;
}

.bs-idea-card-promoted .bs-idea-title[b-9feqch52x5] {
    grid-column: 1;
    grid-row: 2;
    color: #f5f3ee;
}

.bs-idea-card-promoted .bs-idea-codename[b-9feqch52x5] {
    color: rgba(255, 255, 255, 0.72);
}

.bs-idea-card-promoted .bs-idea-card-head[b-9feqch52x5]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(240, 12, 113, 0.4) 25%, rgba(240, 12, 113, 0.8) 50%, rgba(240, 12, 113, 0.4) 75%, transparent);
    pointer-events: none;
}

.bs-idea-grade[b-9feqch52x5] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
}

.bs-idea-card-promoted .bs-idea-grade[b-9feqch52x5] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.bs-idea-grade--awaiting[b-9feqch52x5] {
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px dashed rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.42);
}

@keyframes bs-promote-settle-b-9feqch52x5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Detailed view -> compact slate icon box (open-in-new). Promoted-only.
   The text label is dropped in the markup; this overrides the old
   full-width green CTA into a small square that sits at the bottom-right
   of the card, recolored to the same slate as the pill. */
.bs-graduate-action[b-9feqch52x5] {
    align-self: flex-end;
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
    margin: 10px 0 2px;
    background: linear-gradient(180deg, #1a212c 0%, #0e131b 100%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
}

    .bs-graduate-action i[b-9feqch52x5] {
        font-size: 13px;
    }

    .bs-graduate-action:hover[b-9feqch52x5] {
        background: linear-gradient(180deg, #222c3b 0%, #0f141e 100%);
        box-shadow: 0 3px 9px rgba(15, 23, 42, 0.32);
    }

    .bs-graduate-action:active[b-9feqch52x5] {
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    }
/* /Components/ProdComponents/BringAFriendPanel.razor.rz.scp.css */
/* ============================================
   INVITE KEY PANEL — v2 migrated
   Removed local --ainna-* shadow block (foundation tokens).
   --ainna-primary → var(--accent), --ainna-primary-dark → var(--color-accent-2).
   --ainna-text-* / --ainna-border → foundation vars.
   Font-family → var(--font-family-primary).
   Preserved: golden/amber palette, warning/urgent palette,
   responsive breakpoints.
   Success greens retired (Sep 2026): the copied and completed
   states use the accent token, matching the Profile page.
   ============================================ */

/* ========== PANEL CONTAINER ========== */
.invite-panel[b-sdgzcp8upx] {
    --golden-primary: #f59e0b;
    --golden-light: #fbbf24;
    --golden-dark: #d97706;
    --golden-text: #92400e;
    --warning-bg: #fef3c7;
    --warning-text: #d97706;
    background: linear-gradient(135deg, white 0%, #fafafa 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px 28px;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: var(--font-family-primary);
}

.invite-content-wrapper[b-sdgzcp8upx] {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ========== BADGE — subtle tag ========== */
.invite-badge[b-sdgzcp8upx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--golden-dark);
    background: var(--warning-bg);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    letter-spacing: 0.02em;
}

/* ========== CODE BOX ========== */
.invite-code-box[b-sdgzcp8upx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
}

.invite-code-display[b-sdgzcp8upx] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--golden-primary) 0%, var(--golden-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.1em;
    text-align: center;
    user-select: all;
    flex: 1 1 280px;
    min-width: 200px;
}

.button-group[b-sdgzcp8upx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    flex: 0 0 auto;
}

/* ========== BUTTONS ========== */
.copy-btn-primary[b-sdgzcp8upx] {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--color-accent-2) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(240, 12, 113, 0.25);
}

    .copy-btn-primary:hover[b-sdgzcp8upx] {
        background: linear-gradient(135deg, var(--color-accent-2) 0%, #b00550 100%);
    }

    .copy-btn-primary.copied[b-sdgzcp8upx] {
        background: var(--color-accent-2);
        box-shadow: none;
    }

.copy-btn-outline[b-sdgzcp8upx] {
    padding: 10px 18px;
    background: white;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
}

    .copy-btn-outline:hover[b-sdgzcp8upx] {
        background: rgba(240, 12, 113, 0.05);
    }

    .copy-btn-outline:disabled[b-sdgzcp8upx],
    .copy-btn-primary:disabled[b-sdgzcp8upx] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

/* ========== STATS ROW ========== */
.invite-stats[b-sdgzcp8upx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.stat-item[b-sdgzcp8upx] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .stat-item .stat-number[b-sdgzcp8upx] {
        font-weight: 700;
        font-size: 15px;
        color: var(--text-heading);
    }

    .stat-item .stat-label[b-sdgzcp8upx] {
        font-weight: 450;
    }

    .stat-item.warning[b-sdgzcp8upx] {
        background: var(--warning-bg);
        padding: 4px 12px;
        border-radius: 20px;
    }

        .stat-item.warning .stat-number[b-sdgzcp8upx],
        .stat-item.warning .stat-label[b-sdgzcp8upx] {
            color: var(--warning-text);
        }

    .stat-item.subtle .stat-label[b-sdgzcp8upx],
    .stat-item.subtle i[b-sdgzcp8upx] {
        color: var(--text-tertiary);
    }

    .stat-item.urgent[b-sdgzcp8upx] {
        background: #fef2f2;
        padding: 4px 10px;
        border-radius: 20px;
    }

        .stat-item.urgent .stat-label[b-sdgzcp8upx],
        .stat-item.urgent i[b-sdgzcp8upx] {
            color: #dc2626;
            font-weight: 600;
        }

.stat-divider[b-sdgzcp8upx] {
    width: 4px;
    height: 4px;
    background: #d1d5db;
    border-radius: 50%;
}

/* ========== EXPLANATION ========== */
.invite-explanation[b-sdgzcp8upx] {
    text-align: center;
}

    .invite-explanation p[b-sdgzcp8upx] {
        font-size: 12px;
        color: var(--text-tertiary);
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
    }

.request-link[b-sdgzcp8upx] {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

    .request-link:hover[b-sdgzcp8upx] {
        color: var(--color-accent-2);
    }

    .request-link i[b-sdgzcp8upx] {
        font-size: 11px;
        margin-left: 4px;
    }

/* ========== COMPLETED STATE ========== */
.invite-completed[b-sdgzcp8upx] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
    border-radius: 10px;
    width: 100%;
}

.completed-emoji[b-sdgzcp8upx] {
    font-size: 32px;
    line-height: 1;
}

.completed-text[b-sdgzcp8upx] {
    min-width: 0;
}

.completed-headline[b-sdgzcp8upx] {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 2px;
}

.completed-subtext[b-sdgzcp8upx] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
    .button-group[b-sdgzcp8upx] {
        width: 100%;
    }

    .copy-btn-primary[b-sdgzcp8upx],
    .copy-btn-outline[b-sdgzcp8upx] {
        flex: 1;
        justify-content: center;
        box-sizing: border-box;
    }
}

@media (max-width: 500px) {
    .invite-panel[b-sdgzcp8upx] {
        padding: 20px 16px;
    }

    .invite-code-box[b-sdgzcp8upx] {
        padding: 12px 12px;
        gap: 12px;
    }

    .invite-code-display[b-sdgzcp8upx] {
        font-size: 22px;
        flex: 1 1 100%;
        min-width: 0;
    }

    .invite-completed[b-sdgzcp8upx] {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .button-group[b-sdgzcp8upx] {
        flex-direction: column;
        width: 100%;
    }

    .copy-btn-primary[b-sdgzcp8upx],
    .copy-btn-outline[b-sdgzcp8upx] {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 400px) {
    .invite-badge[b-sdgzcp8upx] {
        font-size: 10px;
        padding: 4px 10px;
    }

    .invite-code-box[b-sdgzcp8upx] {
        padding: 10px 10px;
    }

    .invite-code-display[b-sdgzcp8upx] {
        font-size: 18px;
        letter-spacing: 0.05em;
    }

    .copy-btn-primary[b-sdgzcp8upx],
    .copy-btn-outline[b-sdgzcp8upx] {
        padding: 10px 14px;
    }

    .invite-stats[b-sdgzcp8upx] {
        font-size: 12px;
        gap: 8px;
    }

    .stat-item .stat-number[b-sdgzcp8upx] {
        font-size: 14px;
    }
}
/* /Components/ProdComponents/CompetitiveLandscape.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CompetitiveLandscape.razor.css — v7 (global tokens)
   ═══════════════════════════════════════════
   TOKEN MIGRATION
   Local vars REMOVED — all inherited from app.css :root.
   Hardcoded semantic hex → token vars where meaning matches.
   var(--color-accent-1) → var(--accent) throughout.

   PRESERVED (domain / data-viz):
   Quadrant gradients, stance gradient colors, legend dots,
   scale block colors, stone palette (status quo / failed),
   pulse animation rgba, feature gap/killer text colors,
   stalled outcome badge (#9333ea — distinct from --premium).
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════
   WRAPPER — matches ms-section
   ═══════════════════════════════ */
.cl-section[b-w4j5jok6fa] {
    position: relative;
    min-height: 400px;
    max-width: none;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: cl-up-b-w4j5jok6fa .5s ease .1s forwards;
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

@keyframes cl-up-b-w4j5jok6fa {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cl-content[b-w4j5jok6fa] {
    position: relative;
}

.cl-empty-hint[b-w4j5jok6fa] {
    font-size: var(--text-base);
    color: var(--ink-6);
    font-style: italic;
    padding: 0.75rem 0 0.25rem;
    margin: 0;
}


/* ═══════════════════════════════
   FOLD / COLLAPSE — matches ms-fold
   ═══════════════════════════════ */
.cl-fold[b-w4j5jok6fa] {
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.33,1,.68,1), opacity .3s ease;
}

.cl-section.collapsed .cl-hero-above .cl-hero-main[b-w4j5jok6fa] {
    margin-bottom: 0;
}

.cl-section.collapsed[b-w4j5jok6fa] {
    min-height: auto;
}


/* ═══════════════════════════════
   FOLD TOGGLE BUTTON — matches ms-fold-toggle
   ═══════════════════════════════ */
.cl-fold-toggle-wrap[b-w4j5jok6fa] {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.cl-fold-toggle[b-w4j5jok6fa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    animation: cl-hintPulse-b-w4j5jok6fa 2.5s ease-in-out infinite;
}

    .cl-fold-toggle:hover[b-w4j5jok6fa] {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    .cl-fold-toggle i[b-w4j5jok6fa] {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

    .cl-fold-toggle:hover i[b-w4j5jok6fa] {
        transform: translateY(1px);
    }

@keyframes cl-hintPulse-b-w4j5jok6fa {
    0%, 100% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }
}


/* ═══════════════════════════════
   PROCESSING STATE — matches ms-processing shimmer
   ═══════════════════════════════ */
.cl-processing[b-w4j5jok6fa] {
    font-style: italic;
    font-weight: var(--font-weight-regular);
    background: linear-gradient( 90deg, var(--ink-7) 0%, var(--ink-5) 40%, var(--accent) 50%, var(--ink-5) 60%, var(--ink-7) 100% );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cl-shimmer-b-w4j5jok6fa 2.5s ease-in-out infinite;
}

@keyframes cl-shimmer-b-w4j5jok6fa {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.cl-hero-card .cl-processing[b-w4j5jok6fa] {
    font-size: 12px;
}


/* ═══════════════════════════════
   ACTION BAR
   ═══════════════════════════════ */
.cl-action-bar[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.cl-action-fill[b-w4j5jok6fa] {
    flex: 1;
}

.cl-updating[b-w4j5jok6fa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--warning);
}

.cl-glow-dot[b-w4j5jok6fa] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
    animation: cl-glow-b-w4j5jok6fa 1.4s ease-in-out infinite;
}

@keyframes cl-glow-b-w4j5jok6fa {
    0%, 100% {
        box-shadow: 0 0 3px 1px rgba(245,158,11,0.3);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 10px 4px rgba(245,158,11,0.6);
        opacity: 0.8;
    }
}

.cl-update-done[b-w4j5jok6fa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--success);
    animation: cl-fade-in-b-w4j5jok6fa 0.3s ease;
}

    .cl-update-done i[b-w4j5jok6fa] {
        font-size: var(--text-xs);
    }

@keyframes cl-fade-in-b-w4j5jok6fa {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cl-btn[b-w4j5jok6fa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    letter-spacing: 0.005em;
}

.cl-btn-ghost[b-w4j5jok6fa] {
    background: var(--raised);
    border-color: var(--border);
    color: var(--ink-4);
}

    .cl-btn-ghost:hover[b-w4j5jok6fa] {
        background: var(--surface);
        border-color: var(--ink-7);
        color: var(--ink-2);
    }

    .cl-btn-ghost:disabled[b-w4j5jok6fa] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

.cl-btn-accent[b-w4j5jok6fa] {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #fff));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 4px var(--accent-shadow);
}

    .cl-btn-accent:hover[b-w4j5jok6fa] {
        box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 30%, transparent);
        transform: translateY(-1px);
    }


/* ═══════════════════════════════
   HERO INSIGHTS — aligned with ms-hero
   ═══════════════════════════════ */
.cl-hero-insights[b-w4j5jok6fa] {
    margin-bottom: 2.25rem;
}

/* Above-fold hero: sits between SectionHero and fold toggle */
.cl-hero-above[b-w4j5jok6fa] {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.cl-hero-main[b-w4j5jok6fa] {
    margin-bottom: 1.25rem;
}

/* Title: matches ms-hero-title exactly */
.cl-hero-title[b-w4j5jok6fa] {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: 1.45;
    margin: 0 0 0.375rem;
    letter-spacing: -0.01em;
    max-width: 52rem;
}

.cl-hero-title-empty[b-w4j5jok6fa] {
    color: var(--ink-6);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

    .cl-hero-title-empty i[b-w4j5jok6fa] {
        font-size: var(--text-lg);
        opacity: 0.5;
    }

/* Context: matches ms-hero-context */
.cl-hero-context[b-w4j5jok6fa] {
    font-size: var(--text-md);
    color: var(--ink-5);
    margin: 0;
    line-height: 1.5;
}

.cl-hero-context-empty[b-w4j5jok6fa] {
    color: var(--ink-6);
}


/* ═══════════════════════════════
   HERO CARDS (gap / angle / context)
   ═══════════════════════════════ */
.cl-hero-cards[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cl-hero-card[b-w4j5jok6fa] {
    display: flex;
    gap: 0.75rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 1rem;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

    .cl-hero-card[b-w4j5jok6fa]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        background: transparent;
    }

    .cl-hero-card:hover[b-w4j5jok6fa] {
        border-color: var(--ink-7);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }

        .cl-hero-card:hover[b-w4j5jok6fa]::before {
            background: transparent;
        }

.cl-hero-card-body[b-w4j5jok6fa] {
    flex: 1;
    min-width: 0;
}

.cl-hero-card-label[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    color: var(--ink-5);
}

    .cl-hero-card-label i[b-w4j5jok6fa] {
        font-size: 10px;
        color: var(--ink-6);
    }

.cl-hero-card-text[b-w4j5jok6fa] {
    font-size: var(--text-base);
    color: var(--ink-3);
    line-height: 1.55;
    margin: 0;
}

    .cl-hero-card-text.cl-empty-hint[b-w4j5jok6fa] {
        padding: 0;
        font-weight: var(--font-weight-regular);
    }

/* Wide card (context) — spans full width on medium breakpoints */
.cl-hero-card-wide[b-w4j5jok6fa]::before {
    background: transparent;
}


/* ═══════════════════════════════
   COMPETITIVE CONTEXT METRICS (Scale-based)
   ═══════════════════════════════ */
.cl-context-metrics[b-w4j5jok6fa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cl-context-metric[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--surface);
}

    .cl-context-metric:last-of-type[b-w4j5jok6fa] {
        border-bottom: none;
    }

.cl-context-metric-label[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-5);
    white-space: nowrap;
    min-width: 85px;
}

.cl-context-scale[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
}

.cl-scale-blocks[b-w4j5jok6fa] {
    display: flex;
    gap: 3px;
}

.cl-scale-block[b-w4j5jok6fa] {
    width: 14px;
    height: 6px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.15s ease;
}

    .cl-scale-block.filled[b-w4j5jok6fa] {
        background: var(--ink-4);
    }

/* Scale colors — data-viz, intentionally hardcoded */
.cl-scale-blocks.cl-scale-amber .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #f59e0b;
}

.cl-scale-blocks.cl-scale-red .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #ef4444;
}

.cl-scale-blocks.cl-scale-orange .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #f97316;
}

.cl-scale-blocks.cl-scale-blue .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #0284c7;
}

.cl-scale-blocks.cl-scale-pink .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #db2777;
}

.cl-scale-blocks.cl-scale-green .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #10b981;
}

.cl-scale-blocks.cl-scale-slate .cl-scale-block.filled[b-w4j5jok6fa] {
    background: #64748b;
}

.cl-scale-text[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
    min-width: 70px;
    text-align: right;
}

.cl-scale-sub[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
    color: var(--ink-6);
    margin-left: 0.125rem;
}

.cl-context-metric-value-only[b-w4j5jok6fa] {
    border-bottom: 1px solid var(--border-lt);
}

.cl-context-value[b-w4j5jok6fa] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.cl-value-amount[b-w4j5jok6fa] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--premium-light);
}

.cl-value-period[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
    background: var(--surface);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-xs);
}

.cl-context-trend[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.375rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-lt);
    font-size: var(--text-xs);
    color: var(--ink-4);
    line-height: 1.4;
}

    .cl-context-trend i[b-w4j5jok6fa] {
        color: var(--warning);
        flex-shrink: 0;
        margin-top: 0.0625rem;
        font-size: var(--text-xs);
    }


/* ═══════════════════════════════
   SHARED PANEL BAR
   ═══════════════════════════════ */
.cl-panel-bar[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-lt);
}

.cl-panel-label[b-w4j5jok6fa] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

    .cl-panel-label i[b-w4j5jok6fa] {
        margin-right: 0.375rem;
        font-size: var(--text-xs);
        opacity: 0.6;
    }

.cl-panel-meta[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-6);
    letter-spacing: 0.005em;
}


/* ═══════════════════════════════
   COMPETITIVE MAP
   ═══════════════════════════════ */
.cl-map-panel[b-w4j5jok6fa] {
    margin-bottom: 3.5rem;
}

.cl-map-legend[b-w4j5jok6fa] {
    display: flex;
    gap: 1rem;
}

.cl-legend-item[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    color: var(--ink-5);
}

.cl-legend-dot[b-w4j5jok6fa] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Legend dots — data-viz, hardcoded */
.cl-legend-established[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.cl-legend-startup[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-style: dashed;
}

.cl-chart-area[b-w4j5jok6fa] {
    margin-bottom: 1.5rem;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.cl-chart[b-w4j5jok6fa] {
    position: relative;
    width: 100%;
    aspect-ratio: 2.2 / 1;
    min-height: 340px;
    max-height: 480px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    background: var(--raised);
    margin-left: 36px;
    margin-bottom: 36px;
    width: calc(100% - 36px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ── Quadrants — data-viz gradients, hardcoded ── */
.cl-quadrants[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cl-quad[b-w4j5jok6fa] {
    transition: all 0.25s ease;
    pointer-events: auto;
    position: relative;
}

.cl-quad-tl[b-w4j5jok6fa] {
    border-right: 1px dashed rgba(0,0,0,0.1);
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.07) 0%, rgba(234, 179, 8, 0.13) 100%);
}

.cl-quad-tr[b-w4j5jok6fa] {
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.07) 0%, rgba(225, 29, 72, 0.13) 100%);
}

.cl-quad-bl[b-w4j5jok6fa] {
    border-right: 1px dashed rgba(0,0,0,0.1);
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.05) 0%, rgba(100, 116, 139, 0.10) 100%);
}

.cl-quad-br[b-w4j5jok6fa] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.07) 0%, rgba(13, 148, 136, 0.13) 100%);
}

.cl-quad.active-defend[b-w4j5jok6fa] {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.16) 0%, rgba(225, 29, 72, 0.24) 100%);
}

.cl-quad.active-monitor[b-w4j5jok6fa] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(234, 179, 8, 0.24) 100%);
}

.cl-quad.active-leverage[b-w4j5jok6fa] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.16) 0%, rgba(13, 148, 136, 0.24) 100%);
}

.cl-quad.active-ignore[b-w4j5jok6fa] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(100, 116, 139, 0.20) 100%);
}

/* Quadrant watermark labels — data-viz, hardcoded */
.cl-quad-watermark[b-w4j5jok6fa] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.25s ease;
}

.cl-quad-tl .cl-quad-watermark[b-w4j5jok6fa] {
    color: rgba(180, 83, 9, 0.14);
}

.cl-quad-tr .cl-quad-watermark[b-w4j5jok6fa] {
    color: rgba(225, 29, 72, 0.13);
}

.cl-quad-bl .cl-quad-watermark[b-w4j5jok6fa] {
    color: rgba(100, 116, 139, 0.11);
}

.cl-quad-br .cl-quad-watermark[b-w4j5jok6fa] {
    color: rgba(13, 148, 136, 0.13);
}

.cl-quad.active .cl-quad-watermark[b-w4j5jok6fa] {
    opacity: 0.8;
}

/* ── Quadrant labels ── */
.cl-quadrant-labels[b-w4j5jok6fa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.cl-qlabel-box[b-w4j5jok6fa] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

    .cl-qlabel-box.active[b-w4j5jok6fa] {
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.cl-qlabel-text[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cl-qlabel-count[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    padding: 0.125rem 0.375rem;
    border-radius: 2rem;
    min-width: 20px;
    text-align: center;
}

/* Quadrant label positions & colors — data-viz, hardcoded */
.cl-qlabel-tl[b-w4j5jok6fa] {
    top: 12px;
    left: 12px;
}

    .cl-qlabel-tl .cl-qlabel-text[b-w4j5jok6fa] {
        color: #92400e;
    }

    .cl-qlabel-tl .cl-qlabel-count[b-w4j5jok6fa] {
        background: var(--border-lt);
        color: var(--ink-4);
    }

.cl-qlabel-tr[b-w4j5jok6fa] {
    top: 12px;
    right: 12px;
}

    .cl-qlabel-tr .cl-qlabel-text[b-w4j5jok6fa] {
        color: #e11d48;
    }

    .cl-qlabel-tr .cl-qlabel-count[b-w4j5jok6fa] {
        background: var(--border-lt);
        color: var(--ink-4);
    }

.cl-qlabel-bl[b-w4j5jok6fa] {
    bottom: 12px;
    left: 12px;
}

    .cl-qlabel-bl .cl-qlabel-text[b-w4j5jok6fa] {
        color: var(--ink-5);
    }

    .cl-qlabel-bl .cl-qlabel-count[b-w4j5jok6fa] {
        background: var(--border-lt);
        color: var(--ink-5);
    }

.cl-qlabel-br[b-w4j5jok6fa] {
    bottom: 12px;
    right: 12px;
}

    .cl-qlabel-br .cl-qlabel-text[b-w4j5jok6fa] {
        color: var(--dv-teal);
    }

    .cl-qlabel-br .cl-qlabel-count[b-w4j5jok6fa] {
        background: var(--border-lt);
        color: var(--ink-4);
    }

/* ── Axis labels ── */
.cl-axis-wrapper[b-w4j5jok6fa] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.cl-axis-y-wrapper[b-w4j5jok6fa] {
    top: 0;
    bottom: 0;
    left: -32px;
    width: 24px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    flex-direction: row-reverse;
}

.cl-axis-x-wrapper[b-w4j5jok6fa] {
    left: 0;
    right: 0;
    bottom: -32px;
    height: 24px;
}

.cl-axis-name[b-w4j5jok6fa] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-5);
}

.cl-axis-label[b-w4j5jok6fa] {
    font-size: 0.5rem;
    color: var(--ink-6);
    white-space: nowrap;
}


/* ─── Dots — Expanding Panel ─── */
.cl-dot-anchor[b-w4j5jok6fa] {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    cursor: pointer;
}

    .cl-dot-anchor.dimmed[b-w4j5jok6fa] {
        opacity: 0.55;
        transition: opacity 0.2s ease;
    }

        .cl-dot-anchor.dimmed .cl-panel-logo[b-w4j5jok6fa] {
            box-shadow: none;
        }

    .cl-dot-anchor.hovered[b-w4j5jok6fa],
    .cl-dot-anchor.in-quadrant[b-w4j5jok6fa] {
        z-index: 100;
    }

    .cl-dot-anchor.hovered[b-w4j5jok6fa] {
        z-index: 1000;
    }

.cl-panel-logo[b-w4j5jok6fa] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: var(--font-weight-extrabold);
    border: 3px solid rgba(255,255,255,0.95);
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    position: relative;
    z-index: 2;
}

    .cl-panel-logo.has-favicon[b-w4j5jok6fa] {
        background: var(--raised) !important;
        border: 2px solid var(--border);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

.cl-dot-anchor.hovered .cl-panel-logo.has-favicon[b-w4j5jok6fa] {
    border-color: var(--ink-6);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.cl-panel-logo.cl-dot-startup[b-w4j5jok6fa] {
    border-style: dashed;
}

.cl-panel-favicon[b-w4j5jok6fa] {
    width: 60%;
    height: 60%;
    object-fit: contain;
    border-radius: 2px;
}

.cl-panel-initials[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.04em;
}

.cl-panel-content[b-w4j5jok6fa] {
    position: absolute;
    top: -16px;
    left: -12px;
    width: 360px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02);
    padding: 0.875rem 1.25rem 0.75rem 72px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 72px;
}

/* Flip panel left when dot is in the right half of the chart */
.cl-dot-anchor.flip-left .cl-panel-content[b-w4j5jok6fa] {
    left: auto;
    right: -12px;
    padding: 0.875rem 72px 0.75rem 1.25rem;
}

.cl-dot-anchor.flip-left .cl-panel-logo[b-w4j5jok6fa] {
    position: relative;
    z-index: 2;
}

/* Flip panel down when dot is near the top */
.cl-dot-anchor.flip-up .cl-panel-content[b-w4j5jok6fa] {
    top: auto;
    bottom: -16px;
}

.cl-panel-head[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-lt);
}

/* High threat pulse — animation rgba hardcoded */
.cl-dot-anchor.high-threat .cl-panel-logo:not(.has-favicon)[b-w4j5jok6fa] {
    animation: cl-pulse-threat-b-w4j5jok6fa 2s ease-in-out infinite;
}

.cl-dot-anchor.high-threat .cl-panel-logo.has-favicon[b-w4j5jok6fa] {
    animation: cl-pulse-threat-favicon-b-w4j5jok6fa 2s ease-in-out infinite;
}

@keyframes cl-pulse-threat-b-w4j5jok6fa {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4), 0 2px 10px rgba(0,0,0,0.14);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0), 0 2px 10px rgba(0,0,0,0.14);
    }
}

@keyframes cl-pulse-threat-favicon-b-w4j5jok6fa {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4), 0 2px 8px rgba(0,0,0,0.1);
        border-color: #fca5a5;
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0), 0 2px 8px rgba(0,0,0,0.1);
        border-color: #ef4444;
    }
}

/* ─── Stance colors — data-viz gradients, hardcoded ─── */
.cl-stance-differentiate[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}

.cl-stance-partner[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
}

.cl-stance-monitor[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
}

.cl-stance-learn[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.35);
}

.cl-stancebg-differentiate[b-w4j5jok6fa] {
    background: transparent;
    color: #e11d48;
}

.cl-stancebg-partner[b-w4j5jok6fa] {
    background: transparent;
    color: var(--dv-teal);
}

.cl-stancebg-monitor[b-w4j5jok6fa] {
    background: transparent;
    color: var(--warning);
}

.cl-stancebg-learn[b-w4j5jok6fa] {
    background: transparent;
    color: #4f46e5;
}

/* ─── Empty chart ─── */
.cl-chart-empty[b-w4j5jok6fa] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 3;
    pointer-events: none;
}

    .cl-chart-empty i[b-w4j5jok6fa] {
        font-size: 2.5rem;
        color: var(--border);
    }

    .cl-chart-empty span[b-w4j5jok6fa] {
        font-size: 0.9375rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-6);
    }

.cl-chart-empty-sub[b-w4j5jok6fa] {
    font-size: var(--text-base) !important;
    font-weight: 400 !important;
    color: var(--ink-6) !important;
}


/* ─── Card content (expanded panel) ─── */
.cl-card-name[b-w4j5jok6fa] {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.2;
}

.cl-card-domain[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-6);
    line-height: 1.3;
}

.cl-card-meta[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-6);
    margin-top: 2px;
}

.cl-card-badges[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cl-stance-pill[b-w4j5jok6fa] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.cl-card-strategy[b-w4j5jok6fa] {
    margin-bottom: 0.5rem;
}

.cl-card-target[b-w4j5jok6fa],
.cl-card-promise[b-w4j5jok6fa] {
    font-size: var(--text-sm);
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.cl-dim[b-w4j5jok6fa] {
    color: var(--ink-6);
}

.cl-card-swgrid[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-lt);
}

.cl-sw-label[b-w4j5jok6fa] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.125rem;
}

.cl-sw-text[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-4);
    line-height: 1.45;
}

.cl-color-str[b-w4j5jok6fa] {
    color: var(--success);
}

.cl-color-wk[b-w4j5jok6fa] {
    color: var(--danger);
}

/* Funding strip */
.cl-card-funding[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.4375rem 0;
    border-top: 1px dashed var(--border);
    font-size: var(--text-xs);
    color: var(--ink-5);
}

.cl-funding-icon[b-w4j5jok6fa] {
    color: var(--warning);
    font-size: var(--text-xs);
}

.cl-funding-stage[b-w4j5jok6fa] {
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
}

.cl-funding-raised[b-w4j5jok6fa] {
    color: var(--success);
    font-weight: var(--font-weight-medium);
}

.cl-funding-rev[b-w4j5jok6fa] {
    color: var(--ink-4);
}

.cl-funding-investors[b-w4j5jok6fa] {
    color: var(--ink-5);
    font-style: italic;
}

.cl-funding-round[b-w4j5jok6fa] {
    color: var(--ink-6);
}

.cl-card-feats[b-w4j5jok6fa] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-lt);
    margin-bottom: 0.4375rem;
}

.cl-card-feat[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    font-size: var(--text-xs);
    line-height: 1.45;
}

    .cl-card-feat i[b-w4j5jok6fa] {
        margin-top: 2px;
        font-size: var(--text-2xs);
    }

/* Feature colors — data-viz text, hardcoded */
.cl-color-killer[b-w4j5jok6fa] {
    color: var(--warning);
}

.cl-color-killer-t[b-w4j5jok6fa] {
    color: #92400e;
}

.cl-color-gap-i[b-w4j5jok6fa] {
    color: #0ea5e9;
    font-size: 0.375rem !important;
}

.cl-color-gap-t[b-w4j5jok6fa] {
    color: #0369a1;
}

.cl-card-foot[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.4375rem;
    border-top: 1px solid var(--border-lt);
}

.cl-card-scores[b-w4j5jok6fa] {
    display: flex;
    gap: 0.75rem;
    font-size: var(--text-xs);
    color: var(--ink-5);
}

.cl-card-btns[b-w4j5jok6fa] {
    display: flex;
    gap: 0.25rem;
}

.cl-card-btn[b-w4j5jok6fa] {
    width: 26px;
    height: 26px;
    border-radius: 0.3125rem;
    border: 1px solid var(--border);
    background: var(--raised);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--ink-5);
    transition: all 0.1s ease;
    pointer-events: auto;
}

    .cl-card-btn:hover[b-w4j5jok6fa] {
        background: var(--surface);
        border-color: var(--ink-7);
    }

    .cl-card-btn.watched[b-w4j5jok6fa] {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 12%, transparent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
    }

/* Threat level colors — semantic */
.cl-thr-high[b-w4j5jok6fa] {
    color: var(--danger);
}

.cl-thr-med[b-w4j5jok6fa] {
    color: var(--warning);
}

.cl-thr-low[b-w4j5jok6fa] {
    color: var(--success);
}


/* ═══════════════════════════════
   MAIN TABBED PANEL
   ═══════════════════════════════ */
.cl-main-panel[b-w4j5jok6fa] {
    margin-bottom: 2rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.cl-main-tabs[b-w4j5jok6fa] {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cl-main-tab[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-5);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

    .cl-main-tab:hover[b-w4j5jok6fa] {
        color: var(--ink-3);
        background: rgba(0, 0, 0, 0.02);
    }

    .cl-main-tab.active[b-w4j5jok6fa] {
        color: var(--ink);
        background: var(--surface);
    }

        .cl-main-tab.active[b-w4j5jok6fa]::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--ink);
        }

    .cl-main-tab i[b-w4j5jok6fa] {
        font-size: var(--text-base);
    }

.cl-main-tab-count[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    background: var(--border);
    color: var(--ink-4);
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    min-width: 22px;
    text-align: center;
}

.cl-main-tab.active .cl-main-tab-count[b-w4j5jok6fa] {
    background: var(--ink);
    color: var(--raised);
}

.cl-main-content[b-w4j5jok6fa] {
    padding: 1rem 1.25rem;
    background: var(--surface);
}

/* ── Competitor List ── */
.cl-list-cols[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cl-list-col[b-w4j5jok6fa] {
    min-width: 0;
}

.cl-col-header[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

    .cl-col-header i[b-w4j5jok6fa] {
        font-size: var(--text-xs);
        color: var(--ink-6);
    }

.cl-row[b-w4j5jok6fa] {
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border-lt);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
    transition: all 0.15s ease;
    cursor: default;
}

    .cl-row:hover[b-w4j5jok6fa],
    .cl-row.hovered[b-w4j5jok6fa] {
        background: var(--raised);
    }

.cl-row-main[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.cl-row-dot[b-w4j5jok6fa] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-extrabold);
    color: #fff;
    flex-shrink: 0;
}

    .cl-row-dot.cl-dot-watched[b-w4j5jok6fa] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    }

.cl-row-favicon-wrap[b-w4j5jok6fa] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.15s ease;
}

    .cl-row-favicon-wrap.cl-dot-watched[b-w4j5jok6fa] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    }

.cl-row:hover .cl-row-favicon-wrap[b-w4j5jok6fa] {
    border-color: var(--ink-6);
}

.cl-row-favicon[b-w4j5jok6fa] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cl-row-info[b-w4j5jok6fa] {
    flex: 1;
    min-width: 0;
}

.cl-row-top[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
}

.cl-row-name[b-w4j5jok6fa] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    white-space: nowrap;
}

.cl-row-bell[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--accent);
}

.cl-row-promise[b-w4j5jok6fa] {
    font-size: var(--text-sm);
    color: var(--ink-4);
    line-height: 1.45;
    margin-bottom: 0.125rem;
}

.cl-row-meta[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-6);
}

.cl-row-action[b-w4j5jok6fa] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--raised);
    color: var(--ink-6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
    transition: all 0.15s ease;
    opacity: 0;
}

.cl-row:hover .cl-row-action[b-w4j5jok6fa] {
    opacity: 1;
}

.cl-row-action:hover[b-w4j5jok6fa] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--raised);
    transform: translateX(2px);
}


/* ═══════════════════════════════
   FEATURE ANALYSIS
   ═══════════════════════════════ */
.cl-feat-grid[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 0;
    overflow: hidden;
}

.cl-feat-column[b-w4j5jok6fa] {
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    border-right: 1px solid var(--border-lt);
}

    .cl-feat-column:last-child[b-w4j5jok6fa] {
        border-right: none;
    }

.cl-feat-column-edge[b-w4j5jok6fa] {
    background: transparent;
}

.cl-feat-column-contested[b-w4j5jok6fa] {
    background: transparent;
}

.cl-feat-column-gaps[b-w4j5jok6fa] {
    background: transparent;
}

.cl-feat-column-header[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    border-bottom: 1px solid var(--border-lt);
    background: transparent;
}

    .cl-feat-column-header i[b-w4j5jok6fa] {
        font-size: var(--text-xs);
        color: var(--ink-6);
    }

.cl-feat-column-count[b-w4j5jok6fa] {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    min-width: 22px;
    text-align: center;
    background: rgba(0,0,0,0.05);
    color: var(--ink-5);
}

.cl-feat-column-items[b-w4j5jok6fa] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.08) transparent;
}

    .cl-feat-column-items[b-w4j5jok6fa]::-webkit-scrollbar {
        width: 5px;
    }

    .cl-feat-column-items[b-w4j5jok6fa]::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    .cl-feat-column-items[b-w4j5jok6fa]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.08);
        border-radius: 4px;
    }

        .cl-feat-column-items[b-w4j5jok6fa]::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.15);
        }

.cl-feat-column:hover .cl-feat-column-items[b-w4j5jok6fa] {
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

    .cl-feat-column:hover .cl-feat-column-items[b-w4j5jok6fa]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
    }

.cl-feat-item[b-w4j5jok6fa] {
    padding: 0.5rem 0.625rem;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-lt);
    transition: all 0.15s ease;
}

    .cl-feat-item:last-child[b-w4j5jok6fa] {
        border-bottom: none;
    }

    .cl-feat-item:hover[b-w4j5jok6fa] {
        background: rgba(0, 0, 0, 0.015);
    }

.cl-feat-item-name[b-w4j5jok6fa] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin-bottom: 0.125rem;
    line-height: 1.35;
}

.cl-feat-item-detail[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: var(--ink-4);
    line-height: 1.45;
    margin: 0;
}

/* Competitor chips */
.cl-feat-item-vs[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border-lt);
}

.cl-feat-chip-trigger[b-w4j5jok6fa] {
    cursor: pointer;
}

.cl-feat-vs-chip[b-w4j5jok6fa] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-feat-chip-trigger:hover .cl-feat-vs-chip[b-w4j5jok6fa] {
    border-color: var(--ink-6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.cl-feat-vs-favicon[b-w4j5jok6fa] {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 0 0 #fff);
}

.cl-feat-vs-chip-text[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: #fff;
}

.cl-feat-vs-more[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-6);
    margin-left: 0.25rem;
}

/* Empty column */
.cl-feat-empty-col[b-w4j5jok6fa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-7);
    flex: 1;
}

    .cl-feat-empty-col i[b-w4j5jok6fa] {
        font-size: 1.75rem;
        opacity: 0.5;
    }

    .cl-feat-empty-col span[b-w4j5jok6fa] {
        font-size: var(--text-sm);
        color: var(--ink-6);
    }


/* ═══════════════════════════════
   CONTEXT SIDEBARS
   ═══════════════════════════════ */
.cl-context-grid[b-w4j5jok6fa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cl-sidebar[b-w4j5jok6fa] {
    position: relative;
    padding: 0;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cl-sidebar-header[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-lt);
}

.cl-sidebar-icon[b-w4j5jok6fa] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.cl-sidebar-title[b-w4j5jok6fa] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.005em;
    color: var(--ink-2);
}

.cl-sidebar-badge[b-w4j5jok6fa] {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--ink-5);
    background: rgba(0,0,0,0.05);
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
}

.cl-sidebar-body[b-w4j5jok6fa] {
    padding: 0.75rem 1rem;
}

.cl-statusquo .cl-sidebar-body[b-w4j5jok6fa] {
    padding: 0.75rem 1rem;
}

/* Status Quo — warm amber accent (data-viz, hardcoded) */
.cl-statusquo .cl-sidebar-header[b-w4j5jok6fa] {
    background: var(--surface);
}

.cl-statusquo .cl-sidebar-icon[b-w4j5jok6fa] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.cl-statusquo .cl-sidebar-title[b-w4j5jok6fa] {
    color: var(--ink-2);
}

/* Failed Attempts — slate accent */
.cl-failed .cl-sidebar-header[b-w4j5jok6fa] {
    background: var(--surface);
}

.cl-failed .cl-sidebar-icon[b-w4j5jok6fa] {
    background: linear-gradient(135deg, var(--ink-4), var(--ink-3));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.25);
}

/* Status quo items — stone palette, intentionally warm */
.cl-sq-items[b-w4j5jok6fa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cl-sq-item[b-w4j5jok6fa] {
    position: relative;
}

.cl-sq-item-label[b-w4j5jok6fa] {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #a8a29e;
    margin-bottom: 0.1875rem;
}

.cl-sq-item-value[b-w4j5jok6fa] {
    display: block;
    font-size: var(--text-base);
    color: #57534e;
    line-height: 1.5;
}

.cl-sq-item-trigger .cl-sq-item-label[b-w4j5jok6fa] {
    color: var(--warning);
}

/* Failed attempts — stone palette, intentionally warm */
.cl-failed-items[b-w4j5jok6fa] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cl-failed-item[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-lt);
}

.cl-failed-marker[b-w4j5jok6fa] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6d3d1;
    flex-shrink: 0;
    margin-top: 0.4375rem;
}

/* Marker colors — data-viz, hardcoded */
.cl-failed-item[data-outcome="shut-down"] .cl-failed-marker[b-w4j5jok6fa] {
    background: #fca5a5;
}

.cl-failed-item[data-outcome="pivoted"] .cl-failed-marker[b-w4j5jok6fa] {
    background: #fcd34d;
}

.cl-failed-item[data-outcome="acquired"] .cl-failed-marker[b-w4j5jok6fa] {
    background: #93c5fd;
}

.cl-failed-content[b-w4j5jok6fa] {
    flex: 1;
    min-width: 0;
}

.cl-failed-top[b-w4j5jok6fa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.cl-failed-name[b-w4j5jok6fa] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: #57534e;
}

.cl-failed-year[b-w4j5jok6fa] {
    font-size: var(--text-xs);
    color: #a8a29e;
}

/* Outcome badges — semantic tokens */
.cl-failed-outcome[b-w4j5jok6fa] {
    margin-left: auto;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-xs);
    background: #f5f5f4;
    color: #78716c;
}

.cl-failed-item[data-outcome="shut-down"] .cl-failed-outcome[b-w4j5jok6fa] {
    background: var(--danger-surface);
    color: var(--danger);
}

.cl-failed-item[data-outcome="pivoted"] .cl-failed-outcome[b-w4j5jok6fa] {
    background: var(--warning-surface);
    color: var(--warning);
}

.cl-failed-item[data-outcome="acquired"] .cl-failed-outcome[b-w4j5jok6fa] {
    background: var(--success-surface);
    color: var(--success);
}

.cl-failed-item[data-outcome="merged"] .cl-failed-outcome[b-w4j5jok6fa] {
    background: var(--info-surface);
    color: var(--info);
}

/* Stalled — distinct purple, not --premium (intentional) */
.cl-failed-item[data-outcome="stalled"] .cl-failed-outcome[b-w4j5jok6fa] {
    background: #faf5ff;
    color: #9333ea;
}

.cl-failed-lesson[b-w4j5jok6fa] {
    font-size: var(--text-sm);
    color: #78716c;
    line-height: 1.5;
    margin: 0;
}

.cl-failed-arrow[b-w4j5jok6fa] {
    color: #d6d3d1;
    margin: 0 0.25rem;
}

.cl-failed-search[b-w4j5jok6fa] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    border: none;
    background: transparent;
    color: #d6d3d1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    transition: all 0.15s ease;
    margin-left: 0.25rem;
    flex-shrink: 0;
}

    .cl-failed-search:hover[b-w4j5jok6fa] {
        background: #fafaf9;
        color: #78716c;
    }

.cl-failed-item:hover .cl-failed-search[b-w4j5jok6fa] {
    color: #a8a29e;
}


/* ═══════════════════════════════
   DISCLAIMER — semantic warning tokens
   ═══════════════════════════════ */
.cl-disclaimer[b-w4j5jok6fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--warning-surface);
    border: 1px solid var(--warning-border);
    border-radius: 0.4375rem;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: #92400e;
}

    .cl-disclaimer i[b-w4j5jok6fa] {
        flex-shrink: 0;
        margin-top: 0.125rem;
        color: var(--warning);
        font-size: var(--text-xs);
    }


/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 1100px) {
    .cl-hero-cards[b-w4j5jok6fa] {
        grid-template-columns: 1fr 1fr;
    }

    .cl-hero-card-wide[b-w4j5jok6fa] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .cl-context-grid[b-w4j5jok6fa] {
        grid-template-columns: 1fr;
    }

    .cl-hero-cards[b-w4j5jok6fa] {
        grid-template-columns: 1fr;
    }

    .cl-list-cols[b-w4j5jok6fa] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cl-feat-grid[b-w4j5jok6fa] {
        grid-template-columns: 1fr;
    }

    .cl-feat-column[b-w4j5jok6fa] {
        min-height: 280px;
        border-right: none;
        border-bottom: 1px solid var(--border-lt);
    }

        .cl-feat-column:last-child[b-w4j5jok6fa] {
            border-bottom: none;
        }
}

@media (min-width: 641px) and (max-width: 960px) {
    .cl-feat-grid[b-w4j5jok6fa] {
        grid-template-columns: 1fr 1fr;
    }

    .cl-feat-column-gaps[b-w4j5jok6fa] {
        grid-column: 1 / -1;
    }

    .cl-feat-column[b-w4j5jok6fa] {
        border-right: none;
        border-bottom: 1px solid var(--border-lt);
    }

        .cl-feat-column:nth-child(odd)[b-w4j5jok6fa] {
            border-right: 1px solid var(--border-lt);
        }
}

@media (max-width: 640px) {
    .cl-action-bar[b-w4j5jok6fa] {
        flex-wrap: wrap;
    }

    .cl-action-fill[b-w4j5jok6fa] {
        display: none;
    }

    .cl-fold-toggle[b-w4j5jok6fa] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .cl-panel-content[b-w4j5jok6fa] {
        width: 300px;
        padding: 0.75rem 1rem 0.625rem 60px;
    }

    .cl-dot-anchor.flip-left .cl-panel-content[b-w4j5jok6fa] {
        padding: 0.75rem 60px 0.625rem 1rem;
    }

    .cl-panel-logo[b-w4j5jok6fa] {
        width: 38px;
        height: 38px;
    }

    .cl-hero-title[b-w4j5jok6fa] {
        font-size: var(--text-lg);
    }

    .cl-main-tabs[b-w4j5jok6fa] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cl-main-tab[b-w4j5jok6fa] {
        padding: 0.75rem 1rem;
        font-size: var(--text-base);
        white-space: nowrap;
    }

        .cl-main-tab span:not(.cl-main-tab-count)[b-w4j5jok6fa] {
            display: none;
        }

    .cl-main-content[b-w4j5jok6fa] {
        padding: 0.75rem;
        background: var(--surface);
    }

    .cl-feat-grid[b-w4j5jok6fa] {
        grid-template-columns: 1fr;
    }

    .cl-feat-column[b-w4j5jok6fa] {
        min-height: 240px;
        border-right: none;
        border-bottom: 1px solid var(--border-lt);
    }

    .cl-hero-card[b-w4j5jok6fa] {
        padding: 1rem;
    }

    .cl-row[b-w4j5jok6fa] {
        padding: 0.375rem 0;
    }

    .cl-row-dot[b-w4j5jok6fa] {
        width: 26px;
        height: 26px;
        font-size: var(--text-xs);
    }

    .cl-row-name[b-w4j5jok6fa] {
        font-size: var(--text-sm);
    }

    .cl-row-promise[b-w4j5jok6fa] {
        font-size: var(--text-xs);
    }

    .cl-row-action[b-w4j5jok6fa] {
        opacity: 1;
        width: 24px;
        height: 24px;
    }

    .cl-row-favicon-wrap[b-w4j5jok6fa],
    .cl-row-dot[b-w4j5jok6fa] {
        width: 26px;
        height: 26px;
    }

    .cl-row-favicon[b-w4j5jok6fa] {
        width: 16px;
        height: 16px;
    }

    .cl-quad-watermark[b-w4j5jok6fa] {
        font-size: var(--text-md);
    }

    .cl-sidebar-header[b-w4j5jok6fa] {
        padding: 0.75rem 1rem;
    }

    .cl-sidebar-icon[b-w4j5jok6fa] {
        width: 30px;
        height: 30px;
        font-size: var(--text-sm);
    }

    .cl-sidebar-title[b-w4j5jok6fa] {
        font-size: var(--text-base);
    }

    .cl-sidebar-body[b-w4j5jok6fa] {
        padding: 0.875rem 1rem;
    }
}


/* ═══════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cl-section[b-w4j5jok6fa] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .cl-glow-dot[b-w4j5jok6fa] {
        animation: none;
    }

    .cl-panel-logo[b-w4j5jok6fa] {
        animation: none;
    }

    .cl-fold-toggle[b-w4j5jok6fa] {
        animation: none;
        opacity: 1;
    }

    .cl-processing[b-w4j5jok6fa] {
        animation: none;
        -webkit-text-fill-color: var(--ink-6);
    }

    .cl-dot-anchor.high-threat .cl-panel-logo[b-w4j5jok6fa] {
        animation: none;
    }

        .cl-dot-anchor.high-threat .cl-panel-logo.has-favicon[b-w4j5jok6fa] {
            animation: none;
            border-color: #fca5a5;
        }
}
/* /Components/ProdComponents/ConfirmationBox.razor.rz.scp.css */
/* Variables */
.modal-dark[b-6mxdhndyso] {
    --modal-bg: linear-gradient(to bottom, #0f172a, #1e1921);
    --modal-text: #dccdd9;
    --modal-text-secondary: #cbd5e1;
    --modal-border: rgb(86, 55, 88, 0.12);
    --modal-shadow: rgba(0, 0, 0, 0.45);
    --modal-button-cancel: rgba(148, 163, 184, 0.1);
    --modal-button-cancel-hover: rgba(148, 163, 184, 0.2);
    --modal-button-confirm-delete: rgba( 103, 26, 26 ,.8);
    --modal-button-confirm-hover-delete: rgba( 103, 26, 26,.95 );
    --modal-button-confirm-general: rgba(149, 38, 138,0.85);
    --modal-button-confirm-hover-general: rgba(149, 38, 138,0.95);
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* Modal structure */
.modal[b-6mxdhndyso] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1050;
}

    .modal.show[b-6mxdhndyso] {
        display: block;
    }

.modal-dialog[b-6mxdhndyso] {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    min-height: calc(100% - 3.5rem);
    display: flex;
    align-items: center;
}

    .modal-dialog.centered[b-6mxdhndyso] {
        align-items: center;
    }

.modal-dark .modal-content[b-6mxdhndyso] {
    position: relative;
    width: 100%;
    pointer-events: auto;
    background: var(--modal-bg);
    border: 2px solid var(--modal-border);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 25px -5px var(--modal-shadow), 0 8px 10px -6px var(--modal-shadow);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
}

.modal-dark .modal-header[b-6mxdhndyso] {
    border-bottom: 1px solid var(--modal-border);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-dark .modal-title[b-6mxdhndyso] {
    font-family: var(--font-family-display);
    color: var(--modal-text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.5;
    margin: 0;
}

.modal-dark .close[b-6mxdhndyso] {
    background: none;
    border: none;
    color: var(--modal-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
}

.modal-dark .modal-body[b-6mxdhndyso] {
    font-family: var(--font-family-display);
    padding: 1.5rem;
    color: var(--modal-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.modal-dark .modal-footer[b-6mxdhndyso] {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--modal-border);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

/* Buttons */
.modal-dark .button[b-6mxdhndyso] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    outline: none;
}

    .modal-dark .button.cancel[b-6mxdhndyso] {
        background-color: var(--modal-button-cancel);
        color: var(--modal-text-secondary);
    }

        .modal-dark .button.cancel:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-cancel-hover);
            color: var(--modal-text);
        }

    .modal-dark .button.confirm-delete[b-6mxdhndyso] {
        background-color: var(--modal-button-confirm-delete);
        color: var(--modal-text);
    }

        .modal-dark .button.confirm-delete:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-confirm-hover-delete);
            transform: translateY(-1px);
        }

    .modal-dark .button.confirm-general[b-6mxdhndyso] {
        background-color: var(--modal-button-confirm-general);
        color: var(--modal-text);
    }

        .modal-dark .button.confirm-general:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-confirm-hover-general);
            transform: translateY(-1px);
        }

/* Icons */
.modal-dark .icon-warning[b-6mxdhndyso] {
    color: var(--modal-button-confirm-delete);
    font-size: 1.25rem;
    margin-right: 1rem;
}

.modal-dark .icon-information[b-6mxdhndyso] {
    color: var(--modal-button-confirm-general);
    font-size: 1.25rem;
    margin-right: 1rem;
}

.modal-dark .message-container[b-6mxdhndyso] {
    display: flex;
    align-items: flex-start;
}

/* Backdrop */
.modal-backdrop[b-6mxdhndyso] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.modal-dark .modal-backdrop.show[b-6mxdhndyso] {
    background-color: var(--modal-overlay);
    backdrop-filter: blur(4px);
    opacity: 1;
}
.modal-dark .close[b-6mxdhndyso] {
    background: none;
    border: none;
    color: var(--modal-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

    .modal-dark .close:hover[b-6mxdhndyso] {
        color: var(--modal-text);
    }
/* /Components/ProdComponents/DeleteConfirmationPanel.razor.rz.scp.css */
/* ============================================
   DELETE CONFIRMATION PANEL — v2 migrated
   Removed foundation token shadows from .delete-panel var block.
   Trimmed dark/sunset overrides (app.css handles these).
   var(--color-accent-1) → var(--accent).
   Font-family → var(--font-family-primary).
   ============================================ */

.delete-panel[b-6pjknya0q4] {
    font-family: var(--font-family-primary);
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 50px;
    border-radius: 20px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    margin-top: 50px;
}

    /* ============================================
   COLLAPSED STATE
   ============================================ */

    .delete-panel:not(.expanded)[b-6pjknya0q4] {
        background: var(--background-secondary);
        border: 1px solid var(--border-color);
    }

        .delete-panel:not(.expanded):hover[b-6pjknya0q4] {
            background: var(--border-light);
        }

.delete-trigger[b-6pjknya0q4] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
    font-family: inherit;
}

    .delete-trigger:hover[b-6pjknya0q4] {
        color: var(--text-secondary);
    }

    .delete-trigger i[b-6pjknya0q4] {
        font-size: 12px;
    }

.delete-confirm-section[b-6pjknya0q4] {
    padding: 24px;
    background: var(--background-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   EXPANDED STATE
   ============================================ */

.delete-panel.expanded[b-6pjknya0q4] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 40px 48px;
    max-width: 1360px;
    width: 100%;
    margin-top: 50px;
}

.delete-content[b-6pjknya0q4] {
    width: 100%;
}

/* ============================================
   HEADER
   ============================================ */

.delete-header[b-6pjknya0q4] {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.delete-header-text h3[b-6pjknya0q4] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.delete-subtitle[b-6pjknya0q4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

    .delete-subtitle strong[b-6pjknya0q4] {
        color: var(--text-heading);
        font-weight: 600;
    }

/* ============================================
   INFO SECTIONS
   ============================================ */

.delete-info-section[b-6pjknya0q4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

    .delete-info-section.single-column[b-6pjknya0q4] {
        grid-template-columns: 1fr;
    }

        .delete-info-section.single-column .info-block[b-6pjknya0q4] {
            max-width: 600px;
        }

.info-block[b-6pjknya0q4] {
    padding: 20px;
    border-radius: 12px;
    background: var(--background-secondary);
    border: 1px solid var(--border-light);
}

.info-header[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

    .info-header i[b-6pjknya0q4] {
        font-size: 13px;
        color: var(--text-tertiary);
    }

.info-list[b-6pjknya0q4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .info-list li[b-6pjknya0q4] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.4;
    }

        .info-list li i[b-6pjknya0q4] {
            font-size: 5px;
            color: var(--text-tertiary);
            margin-top: 6px;
            flex-shrink: 0;
        }

.info-note[b-6pjknya0q4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

    .info-note i[b-6pjknya0q4] {
        font-size: 11px;
        color: var(--text-tertiary);
        margin-top: 1px;
        flex-shrink: 0;
    }

/* ============================================
   SAVE COPY SECTION
   ============================================ */

.save-description[b-6pjknya0q4] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.save-clarification[b-6pjknya0q4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 16px 0;
    padding: 10px 12px;
    background: var(--border-light);
    border-radius: 6px;
}

    .save-clarification i[b-6pjknya0q4] {
        font-size: 10px;
        color: var(--text-tertiary);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .save-clarification strong[b-6pjknya0q4] {
        font-weight: 600;
    }

.save-actions[b-6pjknya0q4] {
    display: flex;
    gap: 8px;
}

.btn-save[b-6pjknya0q4],
.btn-email[b-6pjknya0q4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    font-family: inherit;
    background: var(--background-primary);
    color: var(--text-secondary);
}

    .btn-save:hover:not(:disabled)[b-6pjknya0q4],
    .btn-email:hover:not(:disabled)[b-6pjknya0q4] {
        background: var(--background-secondary);
        border-color: var(--text-tertiary);
        color: var(--text-heading);
    }

    .btn-save:disabled[b-6pjknya0q4],
    .btn-email:disabled[b-6pjknya0q4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-save i[b-6pjknya0q4],
    .btn-email i[b-6pjknya0q4] {
        font-size: 11px;
    }

.btn-spinner-sm[b-6pjknya0q4] {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--border-color);
    border-top-color: var(--text-tertiary);
    border-radius: 50%;
    animation: spin-b-6pjknya0q4 0.7s linear infinite;
}

/* ============================================
   ACCOUNT DISCLAIMER — amber preserved
   ============================================ */

.account-disclaimer[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.disclaimer-text[b-6pjknya0q4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
}

    /* ── DARK MODE RETIRED ──
::deep body.dark-theme .disclaimer-text {
    background: rgba(252, 211, 77, 0.12);
    border-color: rgba(252, 211, 77, 0.3);
    color: var(--text-primary);
}
── END DARK MODE ── */

    .disclaimer-text i[b-6pjknya0q4] {
        color: #d97706;
        font-size: 14px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    /* ── DARK MODE RETIRED ──
::deep body.dark-theme .disclaimer-text i {
    color: #fbbf24;
}
── END DARK MODE ── */

    .disclaimer-text strong[b-6pjknya0q4] {
        font-weight: 700;
    }

.disclaimer-note[b-6pjknya0q4] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

    .disclaimer-note strong[b-6pjknya0q4] {
        font-weight: 600;
        color: var(--text-heading);
    }

/* ============================================
   OTP REQUEST BLOCK
   ============================================ */

.otp-request-block[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 16px;
    gap: 16px;
}

.otp-request-text[b-6pjknya0q4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

    .otp-request-text strong[b-6pjknya0q4] {
        color: var(--text-heading);
        font-weight: 600;
    }

.btn-request-otp[b-6pjknya0q4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
}

    .btn-request-otp:hover:not(:disabled)[b-6pjknya0q4] {
        background: var(--color-accent-2);
    }

    .btn-request-otp:disabled[b-6pjknya0q4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-request-otp i[b-6pjknya0q4] {
        font-size: 13px;
    }

/* ============================================
   OTP VERIFY BLOCK
   ============================================ */

.otp-verify-block[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* OTP notice — green preserved */
.otp-sent-notice[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 13px;
    color: #166534;
}

    /* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-sent-notice {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
── END DARK MODE ── */

    .otp-sent-notice i[b-6pjknya0q4] {
        color: #22c55e;
        font-size: 14px;
    }

    .otp-sent-notice strong[b-6pjknya0q4] {
        font-weight: 600;
    }

/* OTP Input Row */
.otp-input-row[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.otp-input-title[b-6pjknya0q4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    text-align: center;
}

.otp-input-wrap[b-6pjknya0q4] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .otp-input-wrap .verify-input[b-6pjknya0q4] {
        width: 140px;
        padding: 10px 14px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.25em;
        text-align: center;
        color: var(--text-heading);
        background: var(--background-primary);
        border: 2px solid var(--border-color);
        border-radius: 10px;
        outline: none;
        transition: border-color 0.15s ease, background-color 0.15s ease;
        font-family: 'SF Mono', 'Consolas', monospace;
    }

        .otp-input-wrap .verify-input[b-6pjknya0q4]::placeholder {
            color: var(--text-tertiary);
            font-weight: 400;
            letter-spacing: 0.2em;
            font-size: 16px;
        }

        .otp-input-wrap .verify-input:focus[b-6pjknya0q4] {
            border-color: var(--accent);
        }

        /* Validation colors — preserved */
        .otp-input-wrap .verify-input.invalid[b-6pjknya0q4] {
            border-color: #f87171;
            background: #fef2f2;
        }

        .otp-input-wrap .verify-input.valid[b-6pjknya0q4] {
            border-color: #22c55e;
            background: #f0fdf4;
        }

        .otp-input-wrap .verify-input[readonly][b-6pjknya0q4] {
            cursor: default;
        }

    /* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-input-wrap .verify-input.invalid {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}
── END DARK MODE ── */

    /* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-input-wrap .verify-input.valid {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
── END DARK MODE ── */

    .otp-input-wrap .verify-check[b-6pjknya0q4] {
        position: absolute;
        right: -28px;
        font-size: 18px;
        color: #22c55e;
    }

/* Resend Row */
.otp-resend-row[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    min-height: 24px;
}

    .otp-resend-row .btn-resend[b-6pjknya0q4] {
        background: transparent;
        border: none;
        color: var(--accent);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.15s ease;
        font-family: inherit;
    }

        .otp-resend-row .btn-resend:hover:not(:disabled)[b-6pjknya0q4] {
            background: rgba(219, 39, 119, 0.08);
        }

        /* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-resend-row .btn-resend:hover:not(:disabled) {
    background: rgba(244, 114, 182, 0.12);
}
── END DARK MODE ── */

        .otp-resend-row .btn-resend:disabled[b-6pjknya0q4] {
            opacity: 0.5;
            cursor: not-allowed;
        }

    .otp-resend-row .resend-limit[b-6pjknya0q4] {
        font-size: 11px;
        color: var(--text-tertiary);
        font-style: italic;
    }

.otp-verified-text[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-weight: 500;
}

    .otp-verified-text i[b-6pjknya0q4] {
        font-size: 12px;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-verified-text {
    color: #4ade80;
}
── END DARK MODE ── */

.otp-error[b-6pjknya0q4] {
    font-size: 12px;
    color: #dc2626;
    margin: 0;
    text-align: center;
}

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .otp-error {
    color: #f87171;
}
── END DARK MODE ── */

/* ============================================
   STANDARD CONFIRM BLOCK
   ============================================ */

.standard-confirm-block[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.verify-group[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.verify-label[b-6pjknya0q4] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.verify-input-wrap[b-6pjknya0q4] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.verify-input[b-6pjknya0q4] {
    width: 160px;
    padding: 10px 32px 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    background: var(--background-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
}

    .verify-input[b-6pjknya0q4]::placeholder {
        color: var(--text-tertiary);
        font-weight: 400;
    }

    .verify-input:focus[b-6pjknya0q4] {
        border-color: var(--text-tertiary);
    }

    .verify-input.invalid[b-6pjknya0q4] {
        border-color: #f87171;
        background: #fef2f2;
    }

    .verify-input.valid[b-6pjknya0q4] {
        border-color: #4ade80;
        background: #f0fdf4;
    }

    .verify-input[readonly][b-6pjknya0q4] {
        cursor: default;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .verify-input.invalid {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .verify-input.valid {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}
── END DARK MODE ── */

.verify-check[b-6pjknya0q4] {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #22c55e;
}

/* ============================================
   ACTION AREA
   ============================================ */

.action-area[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

/* ============================================
   CONFIRM PANEL — amber preserved
   ============================================ */

.confirm-panel[b-6pjknya0q4] {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .confirm-panel.active[b-6pjknya0q4] {
        background: #fef9c3;
        border-color: #fde047;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .confirm-panel {
    background: rgba(254, 249, 195, 0.08);
    border-color: rgba(254, 240, 138, 0.2);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    ::deep body.dark-theme .confirm-panel.active {
        background: rgba(254, 249, 195, 0.15);
        border-color: rgba(253, 224, 71, 0.4);
    }
── END DARK MODE ── */

/* ============================================
   CHECKBOX
   ============================================ */

.confirm-check[b-6pjknya0q4] {
    display: inline-flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

    .confirm-check.disabled[b-6pjknya0q4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .confirm-check input[type="checkbox"][b-6pjknya0q4] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.check-box[b-6pjknya0q4] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2.5px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.15s ease;
}

    .check-box i[b-6pjknya0q4] {
        font-size: 13px;
        color: white;
        opacity: 0;
        transition: opacity 0.1s ease;
    }

.confirm-check:not(.disabled) input:not(:checked) ~ .check-box:hover[b-6pjknya0q4] {
    border-color: var(--accent);
}

.confirm-check input:checked ~ .check-box[b-6pjknya0q4] {
    background: var(--accent);
    border-color: var(--accent);
}

    .confirm-check input:checked ~ .check-box i[b-6pjknya0q4] {
        opacity: 1;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .check-box {
    background: var(--background-primary);
    border-color: var(--border-color);
}
── END DARK MODE ── */

.check-label[b-6pjknya0q4] {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    padding-top: 3px;
    max-width: 420px;
}

/* ============================================
   BUTTON ROW
   ============================================ */

.button-row[b-6pjknya0q4] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.btn-cancel[b-6pjknya0q4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

    .btn-cancel:hover[b-6pjknya0q4] {
        background: var(--background-secondary);
        color: var(--text-heading);
        border-color: var(--text-tertiary);
    }

    .btn-cancel i[b-6pjknya0q4] {
        font-size: 11px;
    }

/* Delete button — red preserved */
.btn-delete[b-6pjknya0q4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    background: #dc2626;
    color: white;
}

    .btn-delete:hover:not(:disabled)[b-6pjknya0q4] {
        background: #b91c1c;
    }

    .btn-delete:disabled[b-6pjknya0q4] {
        opacity: 0.35;
        cursor: not-allowed;
        background: #9ca3af;
    }

    .btn-delete i[b-6pjknya0q4] {
        font-size: 12px;
    }

/* ============================================
   STATE VIEWS
   ============================================ */

.state-view[b-6pjknya0q4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 24px;
}

    .state-view .state-text[b-6pjknya0q4] {
        margin-bottom: 20px;
    }

        .state-view .state-text h4[b-6pjknya0q4] {
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 6px 0;
            color: var(--text-heading);
        }

        .state-view .state-text p[b-6pjknya0q4] {
            font-size: 13px;
            color: var(--text-secondary);
            margin: 0;
            max-width: 340px;
            line-height: 1.5;
        }

            .state-view .state-text p strong[b-6pjknya0q4] {
                font-weight: 600;
            }

    .state-view.processing[b-6pjknya0q4] {
        gap: 16px;
    }

.simple-spinner[b-6pjknya0q4] {
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-6pjknya0q4 0.8s linear infinite;
}

@keyframes spin-b-6pjknya0q4 {
    to {
        transform: rotate(360deg);
    }
}

.processing-text[b-6pjknya0q4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Success — green preserved */
.state-view.success[b-6pjknya0q4] {
    gap: 16px;
}

.success-icon[b-6pjknya0q4] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    border-radius: 50%;
}

    .success-icon i[b-6pjknya0q4] {
        font-size: 22px;
        color: #16a34a;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .success-icon {
    background: rgba(34, 197, 94, 0.15);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    ::deep body.dark-theme .success-icon i {
        color: #4ade80;
    }
── END DARK MODE ── */

.state-view.success .state-text h4[b-6pjknya0q4] {
    color: #166534;
}

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .state-view.success .state-text h4 {
    color: #4ade80;
}
── END DARK MODE ── */

.redirect-notice[b-6pjknya0q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.redirect-spinner[b-6pjknya0q4] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-6pjknya0q4 0.8s linear infinite;
}

/* Failure — red preserved */
.state-view.failure[b-6pjknya0q4] {
    gap: 16px;
}

.failure-icon[b-6pjknya0q4] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border-radius: 50%;
}

    .failure-icon i[b-6pjknya0q4] {
        font-size: 22px;
        color: #dc2626;
    }

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .failure-icon {
    background: rgba(239, 68, 68, 0.15);
}
── END DARK MODE ── */

/* ── DARK MODE RETIRED ──
    ::deep body.dark-theme .failure-icon i {
        color: #f87171;
    }
── END DARK MODE ── */

.state-view.failure .state-text h4[b-6pjknya0q4] {
    color: #dc2626;
}

/* ── DARK MODE RETIRED ──
::deep body.dark-theme .state-view.failure .state-text h4 {
    color: #f87171;
}
── END DARK MODE ── */

.failure-actions[b-6pjknya0q4] {
    display: flex;
    gap: 12px;
}

.btn-retry[b-6pjknya0q4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    background: var(--text-secondary);
    color: white;
}

    .btn-retry:hover[b-6pjknya0q4] {
        background: var(--text-heading);
    }

    .btn-retry i[b-6pjknya0q4] {
        font-size: 10px;
    }

/* ============================================
   RESPONSIVE — preserved as-is
   ============================================ */

@media (max-width: 1100px) {
    .delete-panel.expanded[b-6pjknya0q4] {
        padding: 32px 36px;
    }

    .delete-info-section[b-6pjknya0q4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .button-row[b-6pjknya0q4] {
        flex-direction: column-reverse;
        width: 100%;
    }

    .btn-cancel[b-6pjknya0q4],
    .btn-delete[b-6pjknya0q4] {
        width: 100%;
    }

    .confirm-panel[b-6pjknya0q4] {
        padding: 14px 16px;
    }

    .check-label[b-6pjknya0q4] {
        max-width: none;
    }

    .verify-group[b-6pjknya0q4] {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .verify-input-wrap[b-6pjknya0q4] {
        width: 100%;
    }

    .verify-input[b-6pjknya0q4] {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .delete-panel.expanded[b-6pjknya0q4] {
        padding: 24px 20px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .delete-header[b-6pjknya0q4] {
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    .delete-header-text h3[b-6pjknya0q4] {
        font-size: 18px;
    }

    .info-block[b-6pjknya0q4] {
        padding: 16px;
    }

    .save-actions[b-6pjknya0q4] {
        flex-direction: column;
    }

    .btn-save[b-6pjknya0q4],
    .btn-email[b-6pjknya0q4] {
        width: 100%;
        justify-content: center;
    }

    .delete-confirm-section[b-6pjknya0q4] {
        padding: 20px 16px;
    }

    .otp-input-wrap .verify-input[b-6pjknya0q4] {
        width: 140px;
        font-size: 18px;
    }

    .state-view[b-6pjknya0q4] {
        padding: 28px 16px;
        min-height: 200px;
    }

    .failure-actions[b-6pjknya0q4] {
        flex-direction: column;
        width: 100%;
    }

        .failure-actions button[b-6pjknya0q4] {
            width: 100%;
        }

    .otp-request-block[b-6pjknya0q4] {
        padding: 8px 12px;
    }

    .btn-request-otp[b-6pjknya0q4] {
        width: 100%;
    }

    .otp-sent-notice[b-6pjknya0q4] {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }

    .check-box[b-6pjknya0q4] {
        width: 24px;
        height: 24px;
    }

        .check-box i[b-6pjknya0q4] {
            font-size: 12px;
        }

    .action-area[b-6pjknya0q4] {
        gap: 14px;
        margin-top: 18px;
        padding-top: 18px;
    }

    .confirm-panel[b-6pjknya0q4] {
        padding: 14px 16px;
    }
}

@media (max-width: 400px) {
    .delete-panel.expanded[b-6pjknya0q4] {
        padding: 20px 16px;
    }

    .otp-input-wrap .verify-input[b-6pjknya0q4] {
        width: 130px;
        font-size: 16px;
        padding: 8px 12px;
    }
}
/* /Components/ProdComponents/DocumentationHub.razor.rz.scp.css */
/* DocumentationHub.razor.css */
/* ────────────────────────────────────────────────────────────
   v15 — Picker-led, minimal
   ──────────────────────────────────────────────────────────────
   The card now contains exactly two elements:

     1. A modern, premium PICKER that displays the selected
        document (file-typed icon + title + chevron) AND is the
        trigger that opens the picker panel.
     2. A single ACTION BUTTON that adapts to the doc's state
        (Generate / Download / Regenerate / Upgrade / Unlock).

   The picker IS the label. No description in the selected
   display — that lives only in the dropdown rows where the user
   is exploring. Cold-start no longer exists as a separate state
   because EnsureDefaultSelection() ensures there's always
   something selected when features are present.

   Layouts:
   ▸ BOX (compact vertical):    picker on top, action below
   ▸ STRIPE (horizontal bar):   eyebrow · picker · action
   ──────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════
   SHELF WRAPPER
   ════════════════════════════════════════════ */

.docshelf[b-trzwm5zyma] {
    position: relative;
    display: block;
    font-family: var(--font);
    width: 100%;
}

/* In stripe mode, cap the root width — not just the card. The dropdown
   is `position: absolute` and sizes itself relative to the nearest
   positioned ancestor (this root). Without the cap here, the dropdown
   would span the full width of whatever container the hub is dropped
   into, ignoring the card's visual width. */
.docshelf--stripe[b-trzwm5zyma] {
    /* Shrink the stripe root to its content so the bordered field hugs
       the fixed-width selector + action (no trailing empty space) and
       right-aligns within the host. */
    width: max-content;
    max-width: 100%;
}


/* ════════════════════════════════════════════
   CARD — BOX layout
   Compact vertical card holding the picker and the action.
   ════════════════════════════════════════════ */

.docshelf-card[b-trzwm5zyma] {
    width: 420px;
    min-width: 420px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 70%, var(--surface)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: var(--font);
    position: relative;
    box-shadow: 0 1px 1px rgba(20, 18, 14, 0.04), 0 2px 6px -2px rgba(20, 18, 14, 0.06), 0 12px 32px -12px rgba(20, 18, 14, 0.18), 0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    padding: 0;
}

    /* Hover lifts whole card — subtle "this is alive" cue */
    .docshelf-card:hover[b-trzwm5zyma] {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
        box-shadow: 0 1px 1px rgba(20, 18, 14, 0.05), 0 4px 10px -4px rgba(20, 18, 14, 0.10), 0 18px 44px -14px rgba(20, 18, 14, 0.24), 0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
    }

/* When the dropdown is open, lock the lift and merge with the panel
   below. Gated on :not(.docshelf--measuring) so the card doesn't
   visually shift during the measurement window — the corner flatten
   only commits once direction is known. */
.docshelf--open:not(.docshelf--measuring) .docshelf-card[b-trzwm5zyma],
.docshelf--open:not(.docshelf--measuring) .docshelf-card:hover[b-trzwm5zyma] {
    transform: none;
    box-shadow: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.docshelf--busy .docshelf-card[b-trzwm5zyma] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.docshelf--disabled .docshelf-card[b-trzwm5zyma] {
    opacity: 1;
}


/* ════════════════════════════════════════════
   CARD HEAD — used only in the empty state now
   ════════════════════════════════════════════ */

.docshelf-card-head[b-trzwm5zyma] {
    padding: 0.875rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.docshelf-card-title[b-trzwm5zyma] {
    margin: 0;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    flex: 1;
}


/* ════════════════════════════════════════════
   PITCH — empty state copy
   ════════════════════════════════════════════ */

.docshelf-card-pitch[b-trzwm5zyma] {
    margin: 0.5rem 1rem 1rem;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
    line-height: 1.45;
    font-weight: var(--font-weight-regular);
}

.docshelf-card-pitch--muted[b-trzwm5zyma] {
    color: var(--ink-5);
    font-style: italic;
}


/* ════════════════════════════════════════════
   PROMO BLOCK — decorative Office trio + headline
   ────────────────────────────────────────────
   Vertical stack: icon trio centered on top, headline below,
   then the picker+action row. Generous v-space so the card
   feels premium rather than cramped.
   ════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   PROMO BLOCK
   ────────────────────────────────────────────
   Single tagline above the picker row. Same eyebrow position and
   typographic register as the original format wordmark — small,
   uppercase, letter-spaced — but carries the value pitch instead
   of a list of file types. Left-aligned so it shares its left
   edge with the picker row below.
   ════════════════════════════════════════════ */

.docshelf-card-promo[b-trzwm5zyma] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.125rem 1.125rem 1.25rem;
    text-align: left;
}


.docshelf-card-promo-tagline[b-trzwm5zyma] {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-5);
    line-height: 1.3;
    transition: color 0.18s ease;
}


.docshelf-card:hover .docshelf-card-promo-tagline[b-trzwm5zyma] {
    color: var(--ink-4);
}


/* ════════════════════════════════════════════
   CARD ROW — picker + inline action button
   ════════════════════════════════════════════ */

.docshelf-card-row[b-trzwm5zyma] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 0 1.125rem 1.125rem;
}

    /* Picker grows to fill available width */
    .docshelf-card-row .docshelf-selector[b-trzwm5zyma] {
        flex: 1 1 auto;
        margin: 0;
        width: auto;
        min-width: 0;
    }

    /* Compact inline action button — auto-width, height matches picker */
    .docshelf-card-row .docshelf-primary-action[b-trzwm5zyma] {
        flex: 0 0 auto;
        width: auto;
        min-width: 112px;
        height: auto;
        align-self: stretch;
        padding: 0 14px;
    }

        .docshelf-card-row .docshelf-primary-action i[b-trzwm5zyma] {
            font-size: 0.8125rem;
        }


/* ════════════════════════════════════════════
   STRIPE LAYOUT — single horizontal bar
   ════════════════════════════════════════════ */

.docshelf-card--stripe[b-trzwm5zyma] {
    width: 100%;
    max-width: 720px;
    min-width: 0;
    padding: 0;
    overflow: visible;
    /* Strip the outer panel chrome inherited from .docshelf-card.
       The stripe is a flat in-flow element, not a card. Lets the
       host header own the surface treatment. */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    /* Cancel the base card's hover lift in stripe mode */
    .docshelf-card--stripe:hover[b-trzwm5zyma] {
        transform: none;
        border-color: transparent;
        box-shadow: none;
    }

/* Cancel open/busy/disabled card-level chrome in stripe mode
   (no border / shadow to manipulate when the card has none). */
.docshelf--open:not(.docshelf--measuring) .docshelf-card--stripe[b-trzwm5zyma],
.docshelf--open:not(.docshelf--measuring) .docshelf-card--stripe:hover[b-trzwm5zyma] {
    border-bottom-color: transparent;
}

.docshelf--busy .docshelf-card--stripe[b-trzwm5zyma] {
    border-color: transparent;
}


.docshelf-stripe-bar[b-trzwm5zyma] {
    /* Single outlined field unifying selector + action as one component.
       The eyebrow notches into the top border (legend style). Border/fill
       are translucent white so they adapt to the dusk backdrop; the legend
       swatch must be OPAQUE to cut the border, driven by --docshelf-field-bg
       (set to the exact dusk header colour behind the widget for a clean
       notch). */
    position: relative;
    display: block;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: transparent;
}

/* Controls row inside the field: selector grows, action stays fixed. */
.docshelf-stripe-controls[b-trzwm5zyma] {
    display: flex;
    align-items: center;
    gap: 10px;
}



/* Empty-state stripe — only the eyebrow + the muted message */
.docshelf-stripe-bar--empty[b-trzwm5zyma] {
    min-height: 56px;
}


.docshelf-stripe-eyebrow[b-trzwm5zyma] {
    /* Legend on the top border. The opaque swatch (--docshelf-field-bg)
       covers the border line behind the text. Default dusk purple. */
    position: absolute;
    top: 0;
    left: 16px;
    transform: translateY(-50%);
    padding: 0 6px;
    background: var(--docshelf-field-bg, #221a37);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1;
}


.docshelf-stripe-empty-text[b-trzwm5zyma] {
    font-size: 0.8125rem;
    color: var(--ink-5);
    font-style: italic;
    flex: 1;
    min-width: 0;
}


.docshelf-stripe-action[b-trzwm5zyma] {
    flex-shrink: 0;
}


/* Stripe progress bar — sits at the bottom of the stripe-bar during busy */
/* (stripe progress line removed — busy now shows an inline
   "Processing" indicator with animated dots inside the selector.) */




/* ════════════════════════════════════════════
   THE PICKER — modern premium dropdown trigger
   ────────────────────────────────────────────
   This is the centerpiece. It displays the currently selected
   document (file-typed icon + title) and acts as the trigger to
   open the picker panel. A chevron on the right rotates 180°
   when open. Designed to feel like a polished select control
   from Linear/Stripe/Apple — substantial but never heavy.
   ════════════════════════════════════════════ */

.docshelf-selector[b-trzwm5zyma] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    margin: 0 1rem 0.5rem;
    width: calc(100% - 2rem);
    padding: 7px 12px 7px 7px;
    background: linear-gradient(180deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 92%, var(--surface)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s ease;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 rgba(20, 18, 14, 0.03), 0 1px 2px -1px rgba(20, 18, 14, 0.06);
    position: relative;
}

    .docshelf-selector:hover:not(:disabled)[b-trzwm5zyma] {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55), 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 4px 12px -4px color-mix(in srgb, var(--accent) 22%, rgba(20, 18, 14, 0.10));
        transform: translateY(-1px);
    }

    .docshelf-selector:active:not(:disabled)[b-trzwm5zyma] {
        transform: translateY(0);
        box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 1px 2px -1px rgba(20, 18, 14, 0.08);
    }

    .docshelf-selector:focus-visible[b-trzwm5zyma] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .docshelf-selector:disabled[b-trzwm5zyma] {
        cursor: default;
        opacity: 0.7;
    }


.docshelf-selector--open[b-trzwm5zyma] {
    border-color: var(--accent);
    background: var(--raised);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: none;
    transition: none;
}

    .docshelf-selector--open:hover:not(:disabled)[b-trzwm5zyma] {
        transform: none;
        border-color: var(--accent);
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }


/* Busy state — locked while generating */
.docshelf-selector--busy[b-trzwm5zyma] {
    cursor: progress;
    opacity: 0.85;
}

    .docshelf-selector--busy .docshelf-selector-caret[b-trzwm5zyma] {
        opacity: 0;
    }

    .docshelf-selector--busy:hover:not(:disabled)[b-trzwm5zyma] {
        transform: none;
        border-color: var(--border);
        box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.03), 0 1px 2px -1px rgba(20, 18, 14, 0.06);
    }


/* ── Picker icon ───────────────────────────────────────────
   File-typed colored badge with white file-icon glyph.
   Reuses the .docshelf-selected-icon--{file} color classes. */

.docshelf-selector-icon[b-trzwm5zyma] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9375rem;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.docshelf-selector:hover:not(:disabled) .docshelf-selector-icon[b-trzwm5zyma] {
    transform: scale(1.04);
}


/* File-type colors (shared with row icons) */
.docshelf-selected-icon--pptx[b-trzwm5zyma] {
    background: var(--file-pptx);
}

.docshelf-selected-icon--docx[b-trzwm5zyma] {
    background: var(--file-docx);
}

.docshelf-selected-icon--pdf[b-trzwm5zyma] {
    background: var(--file-pdf);
}

.docshelf-selected-icon--xlsx[b-trzwm5zyma] {
    background: var(--file-xlsx);
}

.docshelf-selected-icon--default[b-trzwm5zyma] {
    background: var(--ink-4);
}


/* ── Picker title ─────────────────────────────────────── */

.docshelf-selector-title[b-trzwm5zyma] {
    font-size: 0.875rem; /* 14px */
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Busy indicator shown in place of the title while generating. Lives in
   the roomy selector so the busy state needs no extra layout and the row
   never reflows. "Processing" + three dots that pulse in sequence. */
.docshelf-selector-processing[b-trzwm5zyma] {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.005em;
}

.docshelf-dots[b-trzwm5zyma] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    margin-left: 3px;
    padding-bottom: 1px;
}

    .docshelf-dots > span[b-trzwm5zyma] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.3;
        animation: docshelf-dot-b-trzwm5zyma 1.2s ease-in-out infinite;
    }

        .docshelf-dots > span:nth-child(2)[b-trzwm5zyma] {
            animation-delay: 0.2s;
        }

        .docshelf-dots > span:nth-child(3)[b-trzwm5zyma] {
            animation-delay: 0.4s;
        }

@keyframes docshelf-dot-b-trzwm5zyma {
    0%, 60%, 100% {
        opacity: 0.25;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}


/* ── Picker caret — animated chevron in a circular badge ── */

.docshelf-selector-caret[b-trzwm5zyma] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    background: var(--surface);
    border: 1px solid var(--border-lt);
    flex-shrink: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

    .docshelf-selector-caret i[b-trzwm5zyma] {
        font-size: 0.5625rem;
        line-height: 1;
    }

.docshelf-selector:hover:not(:disabled) .docshelf-selector-caret[b-trzwm5zyma] {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-lt));
    background: var(--raised);
}

.docshelf-selector--open .docshelf-selector-caret[b-trzwm5zyma] {
    transform: rotate(180deg);
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}


/* ── Stripe variant — compact horizontal picker ─────────── */

.docshelf-selector--stripe[b-trzwm5zyma] {
    /* Fixed width so the field never resizes with the title; long
       titles clamp to one line (ellipsis via the grid + title rule).
       Cool dark-glass surface that sits on the dusk field with
       high-contrast light text, rather than a bright white pill. */
    margin: 0;
    flex: 0 0 248px;
    width: 248px;
    height: 40px;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    column-gap: 9px;
    padding: 0 10px 0 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

    .docshelf-selector--stripe:hover:not(:disabled)[b-trzwm5zyma] {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.22);
        transform: none;
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    }

    .docshelf-selector--stripe.docshelf-selector--open[b-trzwm5zyma] {
        background: rgba(255, 255, 255, 0.11);
        border-color: rgba(255, 255, 255, 0.30);
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
        transform: none;
    }

    .docshelf-selector--stripe .docshelf-selector-icon[b-trzwm5zyma] {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        font-size: 0.625rem;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    .docshelf-selector--stripe .docshelf-selector-title[b-trzwm5zyma] {
        font-size: 0.8125rem; /* 13px in stripe */
        color: rgba(255, 255, 255, 0.95);
        font-weight: var(--font-weight-bold);
    }

    .docshelf-selector--stripe .docshelf-selector-caret[b-trzwm5zyma] {
        width: 16px;
        height: 16px;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, 0.50);
    }

    /* Hover/open: brighten the caret instead of the light-mode
       accent-fill badge (that clashes with the dark glass). */
    .docshelf-selector--stripe:hover:not(:disabled) .docshelf-selector-caret[b-trzwm5zyma] {
        color: rgba(255, 255, 255, 0.85);
        background: transparent;
        border: 0;
    }

    .docshelf-selector--stripe.docshelf-selector--open .docshelf-selector-caret[b-trzwm5zyma] {
        color: rgba(255, 255, 255, 0.95);
        background: transparent;
        border: 0;
    }


/* ════════════════════════════════════════════
   PRIMARY ACTION BUTTON — the hero CTA
   ────────────────────────────────────────────
   Color is keyed to the ACTION, not the document type:
   ▸ Generate / Regenerate — accent (brand creation color)
   ▸ Download             — ink (calm dark; "ready, take it")
   ▸ Upgrade / Renew      — gold gradient
   ▸ Premium one-time-buy — premium gradient
   ▸ Cancel (busy hover)  — danger red
   ════════════════════════════════════════════ */

.docshelf-primary-action[b-trzwm5zyma] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.005em;
    cursor: pointer;
    color: #fff;
    background: var(--ink);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.2s ease, transform 0.18s ease;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(20, 18, 14, 0.06), 0 6px 14px -6px rgba(20, 18, 14, 0.20);
    position: relative;
    overflow: hidden;
}

    .docshelf-primary-action i[b-trzwm5zyma] {
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .docshelf-primary-action:hover:not(:disabled)[b-trzwm5zyma] {
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(20, 18, 14, 0.08), 0 10px 22px -8px rgba(20, 18, 14, 0.28);
    }

    .docshelf-primary-action:active:not(:disabled)[b-trzwm5zyma] {
        transform: translateY(0);
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(20, 18, 14, 0.10);
    }

    .docshelf-primary-action:focus-visible[b-trzwm5zyma] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .docshelf-primary-action:disabled[b-trzwm5zyma] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }


.docshelf-primary-action-label[b-trzwm5zyma] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}


/* In stripe mode, the action matches the selector height (40px) so the
   two controls align exactly. Generate/Download/Regenerate collapse
   to icon-only (the verb is obvious); Upgrade/Premium keep their
   labels (the word carries commercial weight). */
.docshelf-stripe-action .docshelf-primary-action[b-trzwm5zyma] {
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

/* Icon-only collapse for the obvious actions. The label stays in
       the DOM for assistive tech but is visually removed; the button
       becomes a square 40x40 tile with a centred glyph. The native
       title attribute provides the hover tooltip. */
.docshelf-stripe-action .docshelf-primary-action--generate[b-trzwm5zyma],
.docshelf-stripe-action .docshelf-primary-action--regenerate[b-trzwm5zyma],
.docshelf-stripe-action .docshelf-primary-action--download[b-trzwm5zyma] {
    width: 40px;
    padding: 0;
    gap: 0;
}

    .docshelf-stripe-action .docshelf-primary-action--generate .docshelf-primary-action-label[b-trzwm5zyma],
    .docshelf-stripe-action .docshelf-primary-action--regenerate .docshelf-primary-action-label[b-trzwm5zyma],
    .docshelf-stripe-action .docshelf-primary-action--download .docshelf-primary-action-label[b-trzwm5zyma] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .docshelf-stripe-action .docshelf-primary-action--generate i[b-trzwm5zyma],
    .docshelf-stripe-action .docshelf-primary-action--regenerate i[b-trzwm5zyma],
    .docshelf-stripe-action .docshelf-primary-action--download i[b-trzwm5zyma] {
        font-size: 0.9375rem;
    }

/* Busy keeps the exact 40x40 footprint of the idle icon button so
       starting generation never reflows the row. The spinner sits where
       the bolt was; the cancel X swaps in on hover. Label is removed. */
.docshelf-stripe-action .docshelf-primary-action--busy[b-trzwm5zyma] {
    width: 40px;
    padding: 0;
    gap: 0;
}

/* The action button keeps the create/execute accent colour in every
       state, so it never changes colour between Generate, Download, and
       the busy/cancel state. Only the glyph changes. */
.docshelf-stripe-action .docshelf-primary-action--download[b-trzwm5zyma],
.docshelf-stripe-action .docshelf-primary-action--busy[b-trzwm5zyma] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

    .docshelf-stripe-action .docshelf-primary-action--download:hover:not(:disabled)[b-trzwm5zyma],
    .docshelf-stripe-action .docshelf-primary-action--busy:hover:not(:disabled)[b-trzwm5zyma] {
        background: color-mix(in srgb, var(--accent) 88%, black);
        border-color: color-mix(in srgb, var(--accent) 88%, black);
    }

    .docshelf-stripe-action .docshelf-primary-action--busy .docshelf-primary-action-label[b-trzwm5zyma] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

.docshelf-stripe-action .docshelf-primary-action i[b-trzwm5zyma] {
    font-size: 0.8125rem;
}


/* ── Generate / Regenerate — both are creation actions ──── */
.docshelf-primary-action--generate[b-trzwm5zyma],
.docshelf-primary-action--regenerate[b-trzwm5zyma] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

    .docshelf-primary-action--generate:hover:not(:disabled)[b-trzwm5zyma],
    .docshelf-primary-action--regenerate:hover:not(:disabled)[b-trzwm5zyma] {
        background: color-mix(in srgb, var(--accent) 88%, black);
        border-color: color-mix(in srgb, var(--accent) 88%, black);
    }


/* ── Download — neutral ink. "Artifact is ready" ───────── */
.docshelf-primary-action--download[b-trzwm5zyma] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

    .docshelf-primary-action--download:hover:not(:disabled)[b-trzwm5zyma] {
        background: #000;
        border-color: #000;
    }


/* ── Upgrade / Renew — gold/premium ──────────────────────── */
.docshelf-primary-action--upgrade[b-trzwm5zyma] {
    background: linear-gradient(135deg, var(--premium-gold, #c89b3c) 0%, color-mix(in srgb, var(--premium-gold, #c89b3c) 80%, black) 100%);
    border-color: color-mix(in srgb, var(--premium-gold, #c89b3c) 70%, black);
    color: #fff;
}

    .docshelf-primary-action--upgrade:hover:not(:disabled)[b-trzwm5zyma] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--premium-gold, #c89b3c) 95%, black) 0%, color-mix(in srgb, var(--premium-gold, #c89b3c) 70%, black) 100%);
        border-color: color-mix(in srgb, var(--premium-gold, #c89b3c) 60%, black);
    }


/* ── Premium (one-time purchase) ─────────────────────────── */
.docshelf-primary-action--premium[b-trzwm5zyma] {
    background: linear-gradient(135deg, var(--premium) 0%, var(--premium-dark) 100%);
    border-color: var(--premium-dark);
    color: #fff;
}

    .docshelf-primary-action--premium:hover:not(:disabled)[b-trzwm5zyma] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--premium) 92%, black) 0%, color-mix(in srgb, var(--premium-dark) 88%, black) 100%);
    }


/* ── Busy state — cancel-on-hover affordance ─────────────── */
.docshelf-primary-action--busy[b-trzwm5zyma] {
    background: color-mix(in srgb, var(--accent) 88%, var(--ink));
    border-color: color-mix(in srgb, var(--accent) 88%, var(--ink));
    color: #fff;
    cursor: pointer;
}

    .docshelf-primary-action--busy:hover:not(:disabled)[b-trzwm5zyma] {
        background: var(--danger);
        border-color: var(--danger);
        transform: none;
    }

    .docshelf-primary-action--busy:disabled[b-trzwm5zyma] {
        cursor: progress;
        opacity: 0.85;
    }

/* The "X" cancel icon hides until hover; spinner shows by default */
.docshelf-primary-action-cancel[b-trzwm5zyma] {
    display: none;
    font-size: 0.875rem;
}

.docshelf-primary-action--busy:hover:not(:disabled) .btn-spinner[b-trzwm5zyma] {
    display: none;
}

.docshelf-primary-action--busy:hover:not(:disabled) .docshelf-primary-action-cancel[b-trzwm5zyma] {
    display: inline-block;
}


/* ════════════════════════════════════════════
   SPINNER
   ════════════════════════════════════════════ */

.btn-spinner[b-trzwm5zyma] {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: docshelf-spin-b-trzwm5zyma 0.8s linear infinite;
    opacity: 0.85;
    flex-shrink: 0;
}

@keyframes docshelf-spin-b-trzwm5zyma {
    to {
        transform: rotate(360deg);
    }
}

@keyframes docshelf-indeterminate-b-trzwm5zyma {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(380%);
    }
}


/* ════════════════════════════════════════════
   BACKDROP
   ════════════════════════════════════════════ */

.docshelf-backdrop[b-trzwm5zyma] {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.04);
    z-index: 998;
    animation: docshelf-fade-b-trzwm5zyma 0.18s ease;
}

@keyframes docshelf-fade-b-trzwm5zyma {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ════════════════════════════════════════════
   DROPDOWN — flicker-proof merge
   ════════════════════════════════════════════ */

.docshelf-dropdown[b-trzwm5zyma] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: min(580px, calc(100vh - 160px));
    background: var(--raised);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 14px 32px -12px rgba(20, 18, 14, 0.22), 0 4px 10px -4px rgba(20, 18, 14, 0.10);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top center;
    /* Animation is applied by the post-measurement rule below. We don't
       set it on the base so the entrance animation only runs once we
       know which direction we're opening. */
}

    .docshelf-dropdown[b-trzwm5zyma]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        height: 2px;
        background: var(--raised);
        z-index: 1;
        pointer-events: none;
    }

/* ── Stripe mode: detached popover ──────────────────────────
   In box mode the dropdown merges flush under a full-width card,
   so it is square-topped and borderless on top. In stripe mode the
   trigger is a small pill floating in the host header, so the panel
   reads as a detached popover: full rounding on all four corners, a
   real top border, a small gap below the trigger, and no merge seam.

   It also gets an explicit width and a single right-anchor so the
   panel size no longer depends on the (often narrow, right-aligned)
   host container the selector sits in. Right-anchoring keeps it on
   screen when the host hugs the right edge of the header; it grows
   leftward into open space. */
.docshelf--stripe .docshelf-dropdown[b-trzwm5zyma] {
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: 440px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px -12px rgba(20, 18, 14, 0.30), 0 6px 16px -6px rgba(20, 18, 14, 0.14);
}

    /* No merge seam when detached. */
    .docshelf--stripe .docshelf-dropdown[b-trzwm5zyma]::before {
        display: none;
    }

/* Stripe + upward: gap above the trigger instead of below. */
.docshelf--stripe.docshelf--up .docshelf-dropdown[b-trzwm5zyma] {
    top: auto;
    bottom: calc(100% + 8px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}


/* Entrance animation — only fires after JS measurement confirms direction.
   The :not(.docshelf--measuring) gate is what makes this flicker-proof:
   while measuring, no animation rule matches, so the dropdown is in its
   default (visible) state but suppressed by the measuring rules below.
   Once measurement completes, the class is removed and this rule kicks
   in fresh, triggering the slide-down. */
.docshelf--open:not(.docshelf--measuring) .docshelf-dropdown[b-trzwm5zyma] {
    animation: docshelf-open-b-trzwm5zyma 0.18s ease-out;
}

@keyframes docshelf-open-b-trzwm5zyma {
    from {
        opacity: 0.01;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════
   MEASURING STATE — flicker-proof open
   ────────────────────────────────────────────
   While the JS module is computing whether to open up or down, the
   dropdown is rendered in DOM (so measurements work) but hidden from
   view. Once direction is known, the class is removed and the
   directional animation rule kicks in fresh.

   Hides:
   ▸ dropdown panel itself
   ▸ backdrop
   ▸ card-corner-flattening (so the card stays normal until commit)
   ════════════════════════════════════════════ */

.docshelf--measuring .docshelf-dropdown[b-trzwm5zyma] {
    visibility: hidden;
}

.docshelf--measuring .docshelf-backdrop[b-trzwm5zyma] {
    opacity: 0;
    /* Don't intercept clicks during the brief measurement window —
       a fast-clicking user could otherwise close the picker they
       just opened by clicking through an invisible backdrop. */
    pointer-events: none;
}


/* ════════════════════════════════════════════
   UPWARD VARIANT
   ────────────────────────────────────────────
   When the picker sits too close to the bottom of the viewport,
   the component flips so the dropdown expands upward instead of
   downward. JS measurement toggles `.docshelf--up` on the root.

   Visual flips:
   ▸ dropdown: positioned via `bottom: 100%` instead of `top: 100%`
   ▸ dropdown corners: rounded on top, square on bottom
   ▸ card corners: square on top (where it merges with the dropdown)
                   instead of square on bottom
   ▸ entrance animation reversed (slides up from below)
   ▸ flicker-proof seam moved from top edge to bottom edge
   ════════════════════════════════════════════ */

.docshelf--up .docshelf-dropdown[b-trzwm5zyma] {
    top: auto;
    bottom: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 0 -14px 32px -12px rgba(20, 18, 14, 0.22), 0 -4px 10px -4px rgba(20, 18, 14, 0.10);
    transform-origin: bottom center;
}

    /* Flicker-proof seam — overlap with the card top edge */
    .docshelf--up .docshelf-dropdown[b-trzwm5zyma]::before {
        top: auto;
        bottom: -1px;
    }

/* Upward entrance animation — also gated on :not(.docshelf--measuring) */
.docshelf--up.docshelf--open:not(.docshelf--measuring) .docshelf-dropdown[b-trzwm5zyma] {
    animation: docshelf-open-up-b-trzwm5zyma 0.18s ease-out;
}

@keyframes docshelf-open-up-b-trzwm5zyma {
    from {
        opacity: 0.01;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Card corner flattening — only after measurement commits ──
   Default downward: card flattens its BOTTOM corners (existing rule
   in this file already handles that). For the upward variant, we
   flatten the TOP corners instead. Both rules gate on
   `:not(.docshelf--measuring)` so the card doesn't visually shift
   during the measurement window. */

.docshelf--up.docshelf--open:not(.docshelf--measuring) .docshelf-card[b-trzwm5zyma],
.docshelf--up.docshelf--open:not(.docshelf--measuring) .docshelf-card:hover[b-trzwm5zyma] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-color: var(--border);
    border-top-color: transparent;
}


/* ════════════════════════════════════════════
   PANEL HEAD — sticky header inside the dropdown
   ════════════════════════════════════════════ */

.docshelf-panel-head[b-trzwm5zyma] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--border-lt);
    background: linear-gradient(180deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 92%, var(--surface)) 100%);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.docshelf-panel-head-text[b-trzwm5zyma] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docshelf-panel-title[b-trzwm5zyma] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.docshelf-panel-close[b-trzwm5zyma] {
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

    .docshelf-panel-close:hover[b-trzwm5zyma] {
        background: var(--surface);
        border-color: var(--border-lt);
        color: var(--ink);
    }

    .docshelf-panel-close:focus-visible[b-trzwm5zyma] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .docshelf-panel-close i[b-trzwm5zyma] {
        font-size: 0.75rem;
    }


.docshelf-dropdown-body[b-trzwm5zyma] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Stop scroll events from chaining to the underlying page when the
       inner list reaches its top/bottom boundary. Without this, the
       page jumps as soon as the dropdown stops scrolling. */
    overscroll-behavior: contain;
    padding: 8px 0 12px;
    position: relative;
    z-index: 0;
    /* Slim themed scrollbar — the default browser bar reads as heavy
       chrome against the panel. Firefox uses scrollbar-width/color;
       WebKit/Blink use the pseudo-elements below. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

    .docshelf-dropdown-body[b-trzwm5zyma]::-webkit-scrollbar {
        width: 10px;
    }

    .docshelf-dropdown-body[b-trzwm5zyma]::-webkit-scrollbar-track {
        background: transparent;
    }

    .docshelf-dropdown-body[b-trzwm5zyma]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 999px;
        /* Transparent border with background-clip creates inset padding
           so the thumb reads as a slim pill, not a full-width bar. */
        border: 3px solid transparent;
        background-clip: padding-box;
    }

        .docshelf-dropdown-body[b-trzwm5zyma]::-webkit-scrollbar-thumb:hover {
            background: var(--ink-5);
            background-clip: padding-box;
            border: 3px solid transparent;
        }


.docshelf-empty[b-trzwm5zyma] {
    padding: 36px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--ink-5);
    font-size: 0.8125rem;
}

    .docshelf-empty i[b-trzwm5zyma] {
        font-size: 22px;
        color: var(--ink-6);
        opacity: 0.5;
    }


/* ════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════ */

.docshelf-section[b-trzwm5zyma] {
    padding: 4px 0 6px;
}

    .docshelf-section + .docshelf-section[b-trzwm5zyma] {
        border-top: 1px solid var(--border-lt);
        margin-top: 6px;
        padding-top: 12px;
    }


.docshelf-section-head[b-trzwm5zyma] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px 8px;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-5);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.docshelf-section-label[b-trzwm5zyma] {
    flex: 1;
}

.docshelf-section-count[b-trzwm5zyma] {
    background: var(--surface);
    color: var(--ink-5);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    border: 1px solid var(--border-lt);
}

.docshelf-section-sub[b-trzwm5zyma] {
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
}


.docshelf-section--deepdive[b-trzwm5zyma] {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 8px;
}

.docshelf-section-head--deepdive[b-trzwm5zyma] {
    color: var(--premium-dark);
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 0.875rem;
    padding-bottom: 4px;
}

    .docshelf-section-head--deepdive .docshelf-section-label[b-trzwm5zyma] {
        font-size: 0.875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink);
    }


/* ════════════════════════════════════════════
   STRIPE — MULTI-COLUMN DROPDOWN
   In stripe mode the dropdown spans the viewport, so categories
   become side-by-side columns and collapse to a single stack on
   narrow screens. Activates at ≥720px.
   ════════════════════════════════════════════ */

@media (min-width: 720px) {
    .docshelf--stripe .docshelf-dropdown-body[b-trzwm5zyma] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        align-content: start;
        align-items: start;
        column-gap: 0;
        row-gap: 4px;
        padding: 6px 0 14px;
    }

        .docshelf--stripe .docshelf-dropdown-body > .hub-disabled-banner[b-trzwm5zyma],
        .docshelf--stripe .docshelf-dropdown-body > .docshelf-empty[b-trzwm5zyma] {
            grid-column: 1 / -1;
        }

    .docshelf--stripe .docshelf-section + .docshelf-section[b-trzwm5zyma] {
        border-top: none;
        margin-top: 0;
        padding-top: 6px;
    }

    /* Subtle vertical hairline at the start of each section column */
    .docshelf--stripe .docshelf-section[b-trzwm5zyma] {
        position: relative;
        padding-left: 4px;
    }

        .docshelf--stripe .docshelf-section[b-trzwm5zyma]::before {
            content: "";
            position: absolute;
            top: 14px;
            bottom: 14px;
            left: 0;
            width: 1px;
            background: var(--border-lt);
            pointer-events: none;
        }

    .docshelf--stripe .docshelf-dropdown-body > .docshelf-section:first-of-type[b-trzwm5zyma]::before {
        display: none;
    }

    /* Upgrade and deep-dive always span the full row */
    .docshelf--stripe .docshelf-section--upgrade[b-trzwm5zyma],
    .docshelf--stripe .docshelf-section--deepdive[b-trzwm5zyma] {
        grid-column: 1 / -1;
        padding-left: 0;
        border-top: 1px solid var(--border);
        margin-top: 6px;
        padding-top: 12px;
    }

        .docshelf--stripe .docshelf-section--upgrade[b-trzwm5zyma]::before,
        .docshelf--stripe .docshelf-section--deepdive[b-trzwm5zyma]::before {
            display: none;
        }

    .docshelf--stripe .docshelf-section--upgrade[b-trzwm5zyma] {
        background: linear-gradient(180deg, color-mix(in srgb, var(--premium) 6%, transparent) 0%, transparent 100%);
    }
}


/* ════════════════════════════════════════════
   ROWS — 3-column grid (icon · text · status pill)
   ────────────────────────────────────────────
   Click → select doc and close panel. Each row carries: a 28px
   file-typed icon, 2-line text (title + description), and a
   semantic status pill on the right. Selected row gets accent
   border + check pill.
   ════════════════════════════════════════════ */

.docshelf-rows[b-trzwm5zyma] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 14px;
}

.docshelf-row[b-trzwm5zyma] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--raised);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
    min-height: 56px;
    text-align: left;
    font-family: inherit;
    color: inherit;
    box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.03), 0 1px 2px -1px rgba(20, 18, 14, 0.06);
}

    .docshelf-row:hover:not(:disabled)[b-trzwm5zyma] {
        background: var(--raised);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 4px 12px -4px color-mix(in srgb, var(--accent) 22%, rgba(20, 18, 14, 0.10));
        transform: translateY(-1px);
    }

    .docshelf-row:active:not(:disabled)[b-trzwm5zyma] {
        transform: translateY(0);
        box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 1px 2px -1px rgba(20, 18, 14, 0.08);
    }

    .docshelf-row:focus-visible[b-trzwm5zyma] {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    .docshelf-row:disabled[b-trzwm5zyma] {
        cursor: not-allowed;
    }


/* Selected row — accent border + soft accent surface + a left accent
   rail so selection is unmistakable even when the row also carries
   a status badge (Ready / Outdated / Pro). */
.docshelf-row--selected[b-trzwm5zyma] {
    background: color-mix(in srgb, var(--accent) 9%, var(--raised));
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    box-shadow: inset 3px 0 0 0 var(--accent), 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 2px 8px -2px color-mix(in srgb, var(--accent) 28%, rgba(20, 18, 14, 0.10));
}

    .docshelf-row--selected:hover:not(:disabled)[b-trzwm5zyma] {
        background: color-mix(in srgb, var(--accent) 8%, var(--raised));
        border-color: var(--accent);
    }


/* Active (currently being generated/downloaded) */
.docshelf-row--active[b-trzwm5zyma] {
    background: color-mix(in srgb, var(--accent) 8%, var(--raised));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 1px 0 0 rgba(20, 18, 14, 0.04), 0 2px 6px -2px color-mix(in srgb, var(--accent) 25%, rgba(20, 18, 14, 0.10));
}

    .docshelf-row--active:hover:not(:disabled)[b-trzwm5zyma] {
        background: color-mix(in srgb, var(--accent) 8%, var(--raised));
        border-color: var(--accent);
    }


/* Disabled — used while another row is busy */
.docshelf-row--disabled[b-trzwm5zyma] {
    opacity: 0.5;
    pointer-events: none;
}


/* Status-tone left-edge tints — quiet, not loud */
.docshelf-row--ready[b-trzwm5zyma] {
    border-left-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.docshelf-row--warning[b-trzwm5zyma] {
    border-left-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.docshelf-row--locked[b-trzwm5zyma] {
    border-left-color: color-mix(in srgb, var(--ink-5) 35%, var(--border));
}

.docshelf-row--premium[b-trzwm5zyma] {
    border-left-color: color-mix(in srgb, var(--premium) 35%, var(--border));
}


/* ── Row icon — 28px file-typed badge ───────────────────── */

.docshelf-row-icon[b-trzwm5zyma] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}


/* ── Row text — title + description ─────────────────────── */

.docshelf-row-text[b-trzwm5zyma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.docshelf-row-title[b-trzwm5zyma] {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.docshelf-row-desc[b-trzwm5zyma] {
    font-size: 0.6875rem;
    color: var(--ink-4);
    line-height: 1.35;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docshelf-row--selected .docshelf-row-desc[b-trzwm5zyma] {
    color: var(--ink-3);
}


/* ── Row status pill — semantic right-aligned chip ──────── */

.docshelf-row-status[b-trzwm5zyma] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--surface);
    color: var(--ink-5);
    border: 1px solid var(--border-lt);
    flex-shrink: 0;
    white-space: nowrap;
}

    .docshelf-row-status i[b-trzwm5zyma] {
        font-size: 0.5625rem;
    }


.docshelf-row-status--ready[b-trzwm5zyma] {
    background: var(--success-surface);
    color: var(--success-dark);
    border-color: var(--success-border);
}

    .docshelf-row-status--ready i[b-trzwm5zyma] {
        color: var(--success);
    }


.docshelf-row-status--warning[b-trzwm5zyma] {
    background: var(--warning-surface);
    color: var(--warning-dark);
    border-color: var(--warning-border);
}

    .docshelf-row-status--warning i[b-trzwm5zyma] {
        color: var(--warning);
    }


.docshelf-row-status--locked[b-trzwm5zyma] {
    background: var(--surface);
    color: var(--ink-5);
    border-color: var(--border-lt);
}

    .docshelf-row-status--locked i[b-trzwm5zyma] {
        color: var(--ink-5);
    }


.docshelf-row-status--premium[b-trzwm5zyma] {
    background: color-mix(in srgb, var(--premium) 10%, var(--raised));
    color: var(--premium-text);
    border-color: var(--premium-border);
}

    .docshelf-row-status--premium i[b-trzwm5zyma] {
        color: var(--premium);
    }


.docshelf-row-status--neutral[b-trzwm5zyma] {
    background: var(--surface);
    color: var(--ink-4);
    border-color: var(--border-lt);
}


/* Trailing cell — holds an optional status badge AND the selected
   check, so a selected row that also has a badge shows both. */
.docshelf-row-trail[b-trzwm5zyma] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Selected check — solid accent circle. Always shown on the selected
   row regardless of badge presence (this is the fix for the prior
   behaviour where a badged row showed no selection mark). */
.docshelf-row-check[b-trzwm5zyma] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
}

    .docshelf-row-check i[b-trzwm5zyma] {
        font-size: 0.625rem;
    }


/* Active (busy) row — spinner pill */
.docshelf-row-status--active[b-trzwm5zyma] {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: var(--raised);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}


/* Row progress bar — sits inside row-text on busy state */
.docshelf-row-progress[b-trzwm5zyma] {
    height: 2px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
    margin-top: 4px;
}

.docshelf-row-progress-bar[b-trzwm5zyma] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--accent);
    border-radius: 1px;
    animation: docshelf-indeterminate-b-trzwm5zyma 1.4s ease-in-out infinite;
}


/* ════════════════════════════════════════════
   DISABLED BANNER
   ════════════════════════════════════════════ */

.hub-disabled-banner[b-trzwm5zyma] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    margin: 8px 18px 12px;
    background: var(--warning-surface);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--warning-text);
}

    .hub-disabled-banner i[b-trzwm5zyma] {
        font-size: 0.8125rem;
        color: var(--warning);
    }


/* ════════════════════════════════════════════
   UPGRADE SECTION
   ════════════════════════════════════════════ */

.docshelf-section--upgrade[b-trzwm5zyma] {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--premium) 6%, transparent) 0%, transparent 100%);
    scroll-margin-top: 12px;
}

.docshelf-section-head--upgrade[b-trzwm5zyma] {
    color: var(--premium-text);
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    padding: 12px 18px 6px;
    gap: 8px;
}

    .docshelf-section-head--upgrade .docshelf-section-icon[b-trzwm5zyma] {
        font-size: 11px;
        color: var(--premium);
        background: var(--raised);
        border: 1px solid var(--premium-border);
        border-radius: var(--radius-xs);
        padding: 3px 5px;
    }

    .docshelf-section-head--upgrade .docshelf-section-label[b-trzwm5zyma] {
        font-size: 0.875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink);
        text-transform: none;
        letter-spacing: -0.005em;
    }


.docshelf-section-count--upgrade[b-trzwm5zyma] {
    background: var(--raised);
    color: var(--premium-text);
    border-color: var(--premium-border);
    font-weight: var(--font-weight-bold);
}


.docshelf-section-blurb[b-trzwm5zyma] {
    margin: 0;
    padding: 0 18px 10px;
    font-size: 0.6875rem;
    color: var(--ink-5);
    line-height: 1.55;
    letter-spacing: -0.005em;
}


.docshelf-section-cta[b-trzwm5zyma] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 12px 18px 6px;
    margin-top: 4px;
    border-top: 1px dashed var(--premium-border);
}

.hub-upgrade-primary[b-trzwm5zyma] {
    width: 100%;
    justify-content: center;
}

.hub-upgrade-secondary[b-trzwm5zyma] {
    width: 100%;
    justify-content: center;
}


/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */

.docshelf-toast[b-trzwm5zyma] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    box-shadow: 0 10px 24px -10px rgba(20, 18, 14, 0.22);
    z-index: 1100;
    animation: docshelf-toast-slide-b-trzwm5zyma 0.25s var(--transition-spring);
    max-width: calc(100vw - 32px);
}

.docshelf-toast--success[b-trzwm5zyma] {
    background: var(--success-surface);
    border: 1px solid var(--success-border);
    color: var(--success-dark);
}

    .docshelf-toast--success i[b-trzwm5zyma] {
        color: var(--success);
    }

.docshelf-toast--error[b-trzwm5zyma] {
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    color: var(--danger-dark);
}

    .docshelf-toast--error i[b-trzwm5zyma] {
        color: var(--danger);
    }

@keyframes docshelf-toast-slide-b-trzwm5zyma {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

/* Stripe collapses to vertical at narrow widths */
@media (max-width: 640px) {
    .docshelf-stripe-bar[b-trzwm5zyma] {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .docshelf-selector--stripe[b-trzwm5zyma] {
        max-width: none;
        flex-basis: 100%;
        order: 2;
    }

    .docshelf-stripe-eyebrow[b-trzwm5zyma] {
        order: 1;
    }

    .docshelf-stripe-action[b-trzwm5zyma] {
        order: 3;
        margin-left: 0;
        flex: 1 1 auto;
    }

        .docshelf-stripe-action .docshelf-primary-action[b-trzwm5zyma] {
            width: 100%;
        }
}


/* Phone — bottom-sheet dropdown */
@media (max-width: 720px) {

    .docshelf-card[b-trzwm5zyma] {
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    .docshelf-card-title[b-trzwm5zyma] {
        font-size: 0.625rem;
    }

    .docshelf-dropdown[b-trzwm5zyma] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        max-height: 84vh;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: docshelf-slide-up-b-trzwm5zyma 0.28s var(--transition-spring);
    }

        .docshelf-dropdown[b-trzwm5zyma]::before {
            display: none;
        }

    .docshelf--open .docshelf-card[b-trzwm5zyma] {
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
        border-bottom-color: var(--border);
    }

    .docshelf-backdrop[b-trzwm5zyma] {
        background: rgba(20, 18, 14, 0.18);
    }

    .docshelf-dropdown[b-trzwm5zyma]::after {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        z-index: 2;
        pointer-events: none;
    }

    .docshelf-panel-head[b-trzwm5zyma] {
        padding-top: 18px;
    }

    .docshelf-dropdown-body[b-trzwm5zyma] {
        padding-top: 8px;
    }
}

@keyframes docshelf-slide-up-b-trzwm5zyma {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .docshelf-dropdown[b-trzwm5zyma],
    .docshelf-backdrop[b-trzwm5zyma],
    .docshelf-toast[b-trzwm5zyma] {
        animation: none;
    }

    .docshelf-row-progress-bar[b-trzwm5zyma],
    .docshelf-stripe-progress-bar[b-trzwm5zyma] {
        animation: none;
    }

    .btn-spinner[b-trzwm5zyma] {
        animation-duration: 1.6s;
    }

    .docshelf-selector-caret[b-trzwm5zyma] {
        transition: none !important;
    }

    .docshelf-card:hover[b-trzwm5zyma],
    .docshelf-row:hover[b-trzwm5zyma],
    .docshelf-primary-action:hover[b-trzwm5zyma],
    .docshelf-selector:hover[b-trzwm5zyma] {
        transform: none !important;
    }

        .docshelf-selector:hover .docshelf-selector-icon[b-trzwm5zyma] {
            transform: none !important;
        }
}

/* ═══ PASS 16 · minimal trigger — the shortcut register ═══ */

.docshelf-mini[b-trzwm5zyma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .docshelf-mini:hover[b-trzwm5zyma] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.28);
        color: #ffffff;
    }

.docshelf--open .docshelf-mini[b-trzwm5zyma] {
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
}

.docshelf-mini--busy[b-trzwm5zyma] {
    pointer-events: none;
    opacity: 0.85;
}

.docshelf-card:has(.docshelf-mini)[b-trzwm5zyma] {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 16·r3 — the dropdown sizes itself to the component root (left:0;
   right:0), which box and stripe make wide; the mini root is a 2.25rem
   square, so the panel collapsed to a sliver. In mini scope the panel
   takes its own width, anchors to the trigger's right edge (header
   corner — it grows leftward), rounds all corners, and gets a small
   gap since it no longer docks onto a card edge. Upward variant
   mirrors. Width is viewport-guarded for mobile. */

/* Mini: the panel opens to the RIGHT of the trigger — a side
   popover aligned to the trigger's top, growing rightward into
   open space (the header's actions row sits left with room to
   spare). The up-flip becomes a bottom-align in side mode. On
   narrow viewports, where rightward space is a lie, it falls back
   to opening below. The top merge-seam mask is a below-mode
   artifact and dies here; the shadow deepens for the dark host. */
.docshelf--mini .docshelf-dropdown[b-trzwm5zyma] {
    left: calc(100% + 10px);
    right: auto;
    top: 0;
    width: min(27.5rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transform-origin: left top;
    box-shadow: 0 18px 40px -14px rgba(10, 20, 22, 0.45), 0 6px 14px -6px rgba(10, 20, 22, 0.25);
}

    .docshelf--mini .docshelf-dropdown[b-trzwm5zyma]::before {
        display: none;
    }

.docshelf--mini.docshelf--up .docshelf-dropdown[b-trzwm5zyma] {
    top: auto;
    bottom: 0;
    transform-origin: left bottom;
}

@media (max-width: 720px) {
    .docshelf--mini .docshelf-dropdown[b-trzwm5zyma] {
        left: 0;
        right: auto;
        top: calc(100% + 0.5rem);
        transform-origin: top left;
    }

    .docshelf--mini.docshelf--up .docshelf-dropdown[b-trzwm5zyma] {
        top: auto;
        bottom: calc(100% + 0.5rem);
    }
}

/* ═══ PASS 17 · trigger character + panel noise diet ═══ */

.docshelf-mini[b-trzwm5zyma] {
    position: relative;
}

.docshelf-mini--busy i[b-trzwm5zyma] {
    opacity: 0.4;
}

.docshelf-mini--busy[b-trzwm5zyma]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    animation: dhMiniSpin-b-trzwm5zyma 0.8s linear infinite;
}

@keyframes dhMiniSpin-b-trzwm5zyma {
    to {
        transform: rotate(1turn);
    }
}

.docshelf-pricing-link[b-trzwm5zyma] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--ink-5, #8a8a92);
    cursor: pointer;
}

    .docshelf-pricing-link:hover[b-trzwm5zyma] {
        color: var(--ink, #1c1c22);
        text-decoration: underline;
    }

/* 17·r2 — panel aesthetics: with the pills gone, the rows tighten
   and the type quiets. Same-selector overrides, later wins. */

.docshelf-row[b-trzwm5zyma] {
    padding: 0.625rem 0.75rem;
    gap: 0.75rem;
}

.docshelf-row-desc[b-trzwm5zyma] {
    font-size: 0.75rem;
    opacity: 0.62;
}

.docshelf-section-label[b-trzwm5zyma] {
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    opacity: 0.55;
}

.docshelf-row:hover[b-trzwm5zyma] {
    border-color: rgba(240, 12, 113, 0.35);
}
/* /Components/ProdComponents/FooterInternal.razor.rz.scp.css */
/* ============================================
   APP FOOTER
   ============================================ */

.app-footer[b-2pokhwp8wt] {
    background: var(--background-primary);
    border-top: 1px solid var(--border-color);
    padding: 40px 0 120px 0;
    margin-top: 120px;
}

.footer-container[b-2pokhwp8wt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-content[b-2pokhwp8wt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Branding */
.footer-brand[b-2pokhwp8wt] {
    flex: 1;
}

.footer-logo[b-2pokhwp8wt] {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.footer-logo-link[b-2pokhwp8wt] {
    text-decoration: none;
    display: inline-block;
}

    .footer-logo-link:hover .footer-logo-img[b-2pokhwp8wt] {
        opacity: 0.8;
    }

.footer-logo-link[b-2pokhwp8wt] {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

    .footer-logo-link:hover[b-2pokhwp8wt] {
        opacity: 0.7;
    }

.footer-logo-img[b-2pokhwp8wt] {
    height: 32px;
    width: auto;
    margin-bottom: 4px;
}

.footer-tagline[b-2pokhwp8wt] {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
    letter-spacing: 0.01em;
}

/* Links */
.footer-links[b-2pokhwp8wt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 2;
    justify-content: center;
}

.footer-link[b-2pokhwp8wt] {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

    .footer-link:hover[b-2pokhwp8wt] {
        color: var(--accent);
    }

.footer-separator[b-2pokhwp8wt] {
    color: var(--text-tertiary);
    font-size: 10px;
    user-select: none;
    opacity: 0.5;
}

/* Right: Copyright & Social */
.footer-right[b-2pokhwp8wt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.footer-copyright[b-2pokhwp8wt] {
    text-align: right;
}

    .footer-copyright p[b-2pokhwp8wt] {
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        color: var(--text-tertiary);
        margin: 0;
        letter-spacing: 0.01em;
    }

/* Social */
.footer-social[b-2pokhwp8wt] {
    display: flex;
    gap: 12px;
}

.social-link[b-2pokhwp8wt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

    .social-link:hover[b-2pokhwp8wt] {
        background: var(--accent);
        border-color: var(--accent);
        color: white;
        transform: translateY(-1px);
    }

/* Responsive */
@media (max-width: 968px) {
    .app-footer[b-2pokhwp8wt] {
        margin-top: 80px;
        padding: 50px 0 60px 0;
    }

    .footer-content[b-2pokhwp8wt] {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .footer-brand[b-2pokhwp8wt] {
        order: 1;
    }

    .footer-links[b-2pokhwp8wt] {
        order: 2;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-right[b-2pokhwp8wt] {
        order: 3;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }

    .footer-copyright[b-2pokhwp8wt] {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .app-footer[b-2pokhwp8wt] {
        padding: 40px 0 50px 0;
        margin-top: 60px;
    }

    .footer-container[b-2pokhwp8wt] {
        padding: 0 24px;
    }

    .footer-content[b-2pokhwp8wt] {
        gap: 20px;
    }

    .footer-logo[b-2pokhwp8wt] {
        font-size: 20px;
    }

    .footer-logo-img[b-2pokhwp8wt] {
        height: 28px;
    }

    .footer-links[b-2pokhwp8wt] {
        gap: 10px;
    }

    .footer-link[b-2pokhwp8wt] {
        font-size: 12px;
    }

    .social-link[b-2pokhwp8wt] {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}
/* /Components/ProdComponents/IdeaComponentCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   IdeaComponentCard.razor.css — v7 (neutral-palette harmonization)
   ───────────────────────────────────────────────────────────────
   v7 CHANGES vs v6
   ────────────────
   Aligns card chromatics with the IdeaViewer's neutralized palette.
   The viewer made the grade tile the only chromatic event; cards
   were still painting brand pink everywhere — hover halos, complete-
   state left edges, hero borders, updating shimmer.

   Brand pink now used ONLY where it carries semantic weight:
     • New badge (announcement signal)
     • Pending-update sweep + pulsing dot (update-incoming signal)
     • Editing caret (direct micro-interaction)
     • Loading spinner

   Decorative brand-pink usage removed in favour of neutral tones.
   Per-type accent colours (red for problem, blue for personas, etc.)
   remain on the title icon and watermark icon — these provide quiet
   cognitive scaffolding without competing for attention.
   ═══════════════════════════════════════════════════════════════ */


/* ===========================
   BASE CARD
   =========================== */

.card[b-e8jthmzqt4] {
    /* SUBTLE 3D — filled cards are lifted objects on the workspace:
       a real surface, a hairline, and the header-card shadow family
       scaled down (inset top light sells the material). Empty stays a
       recessed slot (see EMPTY STATE); minimal stays flat by design. */
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    margin-bottom: 0.75rem;
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.25s ease, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 14px -8px rgba(15, 23, 42, 0.10), 0 14px 28px -18px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--border-lt);
    /* display was inline-block — that combined with the lack of
       box-sizing:border-box and a min-width:auto default meant cards
       refused to shrink below their intrinsic content width when the
       parent column shrank, causing content clipping on resize. Block
       + border-box + explicit min-width:0 lets the resize signal
       actually propagate from the column down into the card. */
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
    min-height: 0;
}

    /* Hover — firmer hairline, deeper shadow, NO transform: the file's
   no-hop column doctrine holds (cards in a column must not jump).
   Interactive filled cards only; every other state owns its look. */
    .card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty):not(.minimal)[b-e8jthmzqt4],
    .hero-card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty):not(.minimal)[b-e8jthmzqt4] {
        border-color: var(--border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 3px rgba(15, 23, 42, 0.06), 0 10px 22px -10px rgba(15, 23, 42, 0.14), 0 20px 40px -22px rgba(15, 23, 42, 0.16);
    }

.hero-card[b-e8jthmzqt4] {
    background: var(--surface);
    border-radius: var(--radius-lg);
    /* The hero's editorial right margin comes from the text measure cap below,
       not card padding (a transparent card shows no padding gutter). */
    padding: 1.25rem 1.375rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.25s ease, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Was: border-color: var(--accent-border); box-shadow with var(--accent-shadow).
       Hero card no longer carries brand-pink as a baseline — it's structurally
       distinguished from regular cards by size and layout, not by chromatic accent. */
    border: 1px solid transparent;
    /* Same shrink-fit fix as .card — without box-sizing the 1.25rem
       padding pushed the card past 100% of its parent. */
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 14px -8px rgba(15, 23, 42, 0.10), 0 14px 28px -18px rgba(15, 23, 42, 0.12);
}

/* Hero responsive: reclaim padding on narrow screens for full-width text. */
@media (max-width: 720px) {
    .hero-card[b-e8jthmzqt4] {
        padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    }
}


/* Internal flex/grid descendants — same min-width:0 / max-width:100%
   contract so resize signals propagate all the way down. The textarea
   in particular has its own intrinsic content width via `cols`; without
   this it can override its width:100% rule and force the card wider. */
.card *[b-e8jthmzqt4],
.hero-card *[b-e8jthmzqt4] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


/* ── Edit mode (textarea has focus) ── */
.card.editing[b-e8jthmzqt4],
.hero-card.editing[b-e8jthmzqt4] {
    background: var(--raised);
    box-shadow: none;
    border-color: var(--border);
    transform: none;
    position: relative;
    z-index: 5;
}

.card.loading[b-e8jthmzqt4], .card.updating[b-e8jthmzqt4] {
    cursor: wait;
}

/* ── Minimal variant ── */
.hero-card.minimal[b-e8jthmzqt4], .card.minimal[b-e8jthmzqt4] {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.5rem !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    cursor: text;
    animation: none;
}

    .hero-card.minimal:hover[b-e8jthmzqt4], .card.minimal:hover[b-e8jthmzqt4] {
        transform: none !important;
        box-shadow: none !important;
    }

    .hero-card.minimal.editing[b-e8jthmzqt4], .card.minimal.editing[b-e8jthmzqt4] {
        background: var(--surface) !important;
        border-color: var(--border) !important;
        padding: 0.75rem !important;
    }

    .hero-card.minimal .card-content[b-e8jthmzqt4], .card.minimal .card-content[b-e8jthmzqt4] {
        min-height: auto;
        padding-bottom: 0;
    }

    .hero-card.minimal .hero-text[b-e8jthmzqt4], .card.minimal .card-text[b-e8jthmzqt4] {
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--ink-3);
        font-weight: 420;
        min-height: auto;
        padding: 0;
    }

    .hero-card.minimal.empty[b-e8jthmzqt4], .card.minimal.empty[b-e8jthmzqt4] {
        padding: 0.5rem !important;
        cursor: default;
    }

    .hero-card.minimal .new-badge[b-e8jthmzqt4], .card.minimal .new-badge[b-e8jthmzqt4] {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 0.5rem;
        padding: 0.25rem 0.5rem;
    }


/* ===========================
   COLOR THEMES — per-type accent colours used on the title icon and
   the giant watermark icon, plus ONE scoped exception: the empty
   card's hover borrows the hue for its border and a faint wash (see
   the .empty:hover rule), so the card that lights up answers in its
   own colour family. Filled-state borders, shadows, and surfaces
   stay neutral.
   =========================== */

.card-problem[b-e8jthmzqt4] {
    --accent-color: #ef4444;
}

.card-solution[b-e8jthmzqt4] {
    --accent-color: #22c55e;
}

.card-market[b-e8jthmzqt4] {
    --accent-color: #f59e0b;
}

.card-business[b-e8jthmzqt4] {
    --accent-color: #3b82f6;
}

.card-forms[b-e8jthmzqt4] {
    --accent-color: #22c55e;
}

.card-personas[b-e8jthmzqt4] {
    --accent-color: #3b82f6;
}

.card-customers[b-e8jthmzqt4] {
    --accent-color: #f97316;
}

.card-competitors[b-e8jthmzqt4] {
    --accent-color: #ef4444;
}

.card-risks[b-e8jthmzqt4] {
    --accent-color: #ef4444;
}

.card-geography[b-e8jthmzqt4] {
    --accent-color: #14b8a6;
}

.card-businessintent[b-e8jthmzqt4] {
    --accent-color: #8b5cf6;
}

.card[class*="card-"][b-e8jthmzqt4] {
    /* Per-type accents stay off surfaces (doctrine above) — but the
       neutral is now the shared 3D surface, not transparent, or this
       higher-specificity rule would strip the lift from every typed card. */
    background: var(--surface);
}

.card.editing[class*="card-"][b-e8jthmzqt4] {
    background: var(--raised);
    border-color: var(--border);
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE — off-white, gray-bordered, recessed
   ══════════════════════════════════════════════════════════════ */

/* Empty state — when the card has no content yet.
   Was: solid border + warm-tinted background (read as filled card
   that happened to be empty). Now: dashed border + barely-tinted
   background that reads as "this slot is waiting for content".
   The dashed border is the universal empty-slot signal, and lifts
   the empty cards visually without making them louder than the
   filled ones around them. Hover lifts the dashed line into the
   border-strong tone to telegraph clickability. */
.card.empty[b-e8jthmzqt4],
.hero-card.empty[b-e8jthmzqt4] {
    /* A whisper of physicality — 45% surface + faint shadow — so the
       slot reads as a card too, while staying clearly recessed against
       the lifted filled cards. Dashed border remains the slot signal. */
    background: color-mix(in srgb, var(--surface) 45%, transparent);
    border-style: dashed;
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

    .card.empty .card-title[b-e8jthmzqt4],
    .hero-card.empty .hero-title[b-e8jthmzqt4] {
        opacity: 1;
        color: var(--ink-3);
    }

    /* Hover — promote the dashed border to the strong tone, lift the
       background a touch. No transform translate (cards in a column
       shouldn't visibly hop on hover); subtle elevation only. */
    /* Hover — the dashed line and the wash lean into the card's own
       hue (the scoped exception the colour-themes banner records).
       42% and 5% keep it a lean, not a paint job; cards without a
       type hue (hero, and any future type before its colour lands)
       degrade to the old neutral promote via the fallback chain. */
    .card.empty:hover[b-e8jthmzqt4],
    .hero-card.empty:hover[b-e8jthmzqt4] {
        transform: none;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        border-color: color-mix(in srgb, var(--accent-color, var(--border-strong)) 42%, var(--border-strong));
        border-style: dashed;
        background: color-mix(in srgb, var(--accent-color, transparent) 5%, color-mix(in srgb, var(--surface) 45%, transparent));
    }


/* ═══════════════════════════════════════════════════════════════
   PENDING UPDATE STATE — KEEPS brand pink (semantic signal of
   "update incoming"). Same role as the pulsing dot below.
   ══════════════════════════════════════════════════════════════ */

.card.pending-update[b-e8jthmzqt4],
.hero-card.pending-update[b-e8jthmzqt4] {
    border-color: var(--accent-border);
    border-style: solid;
    background: transparent;
}

    .card.pending-update[b-e8jthmzqt4]::before,
    .hero-card.pending-update[b-e8jthmzqt4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--accent) 40%, transparent) 20%, var(--accent) 50%, color-mix(in srgb, var(--accent) 40%, transparent) 80%, transparent 100% );
        background-size: 250% 100%;
        background-position: 200% 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        z-index: 3;
        animation: pendingSweep-b-e8jthmzqt4 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        pointer-events: none;
        opacity: 1;
    }

@keyframes pendingSweep-b-e8jthmzqt4 {
    0% {
        background-position: 200% 0;
        opacity: 0.5;
    }

    40% {
        background-position: -20% 0;
        opacity: 1;
    }

    60% {
        background-position: -80% 0;
        opacity: 1;
    }

    100% {
        background-position: -250% 0;
        opacity: 0.5;
    }
}

.card.pending-update .card-title[b-e8jthmzqt4]::after,
.hero-card.pending-update .hero-title[b-e8jthmzqt4]::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: 0.3rem;
    flex-shrink: 0;
    align-self: center;
    animation: pendingDot-b-e8jthmzqt4 1.1s ease-in-out infinite;
    vertical-align: middle;
    position: relative;
    top: -0.5px;
}

@keyframes pendingDot-b-e8jthmzqt4 {
    0%, 100% {
        opacity: 0.15;
        transform: scale(0.75);
        box-shadow: none;
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 4px var(--accent-shadow);
    }
}

.card.pending-update:hover[b-e8jthmzqt4],
.hero-card.pending-update:hover[b-e8jthmzqt4] {
    transform: none;
    box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════
   UPDATING STATE — neutral shimmer
   ──────────────────────────────────────────────────────────────
   Was: pink-tinted shimmer wash (color-mix with var(--accent-subtle)).
   Now: pure white wash. Updating is a process state, not a brand
   moment — neutral shimmer reads as "content refreshing."
   ═══════════════════════════════════════════════════════════════ */

.card.updating[b-e8jthmzqt4],
.hero-card.updating[b-e8jthmzqt4] {
    cursor: wait;
    border-color: rgba(15, 23, 42, 0.14);
}

    .card.updating[b-e8jthmzqt4]::after,
    .hero-card.updating[b-e8jthmzqt4]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65% );
        background-size: 250% 100%;
        animation: updateShimmer-b-e8jthmzqt4 1.6s ease-in-out infinite;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
    }

@keyframes updateShimmer-b-e8jthmzqt4 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ===========================
   TITLES
   =========================== */

/* Card title (regular + hero share identical treatment).
   Was: hero ran an editorial step-up (Space Grotesk, 1.0625rem, bold,
   mixed case) so the synthesis card had a real heading while the
   dimension cards used a label-style eyebrow. Now: both use the
   eyebrow treatment so the hero is differentiated only by its CONTENT
   typography (.hero-text), watermark, and structural padding — title
   reads the same as every other card. */
.card-title[b-e8jthmzqt4], .hero-title[b-e8jthmzqt4] {
    /* Density decision: the 11px eyebrow read as a caption, not a
       heading, and the 2px gap glued it to the body. 14px with eased
       tracking + real air below makes the card scannable. */
    font-size: 0.875rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-title[b-e8jthmzqt4] {
    display: none;
}

.title-icon[b-e8jthmzqt4] {
    font-size: var(--text-base);
    color: var(--accent-color, #3b82f6);
    opacity: 0.75;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

/* Hover slide on title — applies to both the regular card and the
   hero card; titles share typography (.card-title, .hero-title rule
   above) so the same micro-interaction lands on both. */
.card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty) .card-title[b-e8jthmzqt4],
.hero-card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty) .hero-title[b-e8jthmzqt4] {
    transform: translateX(2px);
}

/* Hover state on title-icon — was a brand-pink + scale celebration.
   Now: same per-type colour, full opacity, slight scale lift. The
   icon brightens but stays in its colour family. */
.card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty) .title-icon[b-e8jthmzqt4],
.hero-card:hover:not(.loading):not(.updating):not(.editing):not(.readonly):not(.empty) .title-icon[b-e8jthmzqt4] {
    opacity: 1;
    transform: scale(1.1);
}

.card.editing .title-icon[b-e8jthmzqt4], .hero-card.editing .title-icon[b-e8jthmzqt4] {
    color: var(--ink-6);
    opacity: 0.4;
}

.card.readonly .title-icon[b-e8jthmzqt4], .hero-card.readonly .title-icon[b-e8jthmzqt4] {
    opacity: 0.4;
}

/* Empty-state title icon — keeps the per-type accent-color at
   reduced opacity rather than washing to neutral grey. Cards in
   their dimension's colour family even when empty makes them
   recognisable as the "Problem" / "Market" / etc. card before
   the user reads the title. */
.card.empty .title-icon[b-e8jthmzqt4], .hero-card.empty .title-icon[b-e8jthmzqt4] {
    opacity: 0.55;
    color: var(--accent-color, var(--ink-7));
    animation: none;
}

.card.empty:hover .title-icon[b-e8jthmzqt4], .hero-card.empty:hover .title-icon[b-e8jthmzqt4] {
    opacity: 0.85;
    color: var(--accent-color, var(--ink-6));
}


/* ===========================
   CONTENT & TEXT
   =========================== */

.card-content[b-e8jthmzqt4] {
    position: relative;
    z-index: 1;
    min-height: 60px;
    padding-bottom: 0.625rem;
}

.card-text[b-e8jthmzqt4], .hero-text[b-e8jthmzqt4] {
    font-family: var(--font);
    outline: none;
    border: none;
    width: 100%;
    resize: none;
    background: transparent;
    overflow: hidden;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--radius-md);
    letter-spacing: 0.005em;
    /* Long unbroken strings (URLs, slugs, model names) would otherwise
       extend the textarea's intrinsic width and push the card wider
       than its parent column allows. break-word forces the wrap so
       resize behaves predictably. */
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 0; /* flush left so body text aligns with the footer meta */
}

.card-text[b-e8jthmzqt4] {
    font-size: var(--text-base);
    color: var(--ink-2);
    font-weight: 480;
    line-height: 1.65; /* the large-blocks case — filled cards must read, not pack */
    min-height: 60px;
}

/* Hero text: the synthesis paragraph, slightly larger and heavier than the
   body cards, with a compact line-height for an editorial read. */
.hero-text[b-e8jthmzqt4] {
    font-size: 1rem;
    font-weight: 540;
    line-height: 1.6;
    color: var(--ink-2);
    min-height: 80px;
    letter-spacing: -0.005em;
    max-width: 95ch; /* full-bleed synthesis — the hero spans the three-column width by design (pass 18 revert of the 75ch cap) */
}

/* Empty-state body copy — the placeholder is now the question the
   section answers, not a narration of the container, so it sits
   upright in a firmer ink. Italic was the apology register of the
   old "Ainna will ... here" copy; a question is content and holds
   the page on its own. Pairs with the dashed border above. */
.card.empty .card-text[b-e8jthmzqt4],
.hero-card.empty .hero-text[b-e8jthmzqt4] {
    color: var(--ink-4);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    /* Two lines of question, not a reserved essay: the empty canvas
       should fit one viewport and grow only when content lands. */
    min-height: 48px;
}

    .card.empty .card-text[b-e8jthmzqt4]::placeholder,
    .hero-card.empty .hero-text[b-e8jthmzqt4]::placeholder {
        color: var(--ink-4);
        font-style: normal;
        opacity: 1;
        transition: color 0.18s ease;
    }

/* Hover crossfade, half one: the question yields. The other half
       is .empty-reveal fading in below — together the card answers
       its own question. Chromium and Gecko both transition
       ::placeholder color; where a browser doesn't, the swap is a
       cut instead of a fade, which is acceptable. */
.card.empty:hover .card-text[b-e8jthmzqt4]::placeholder,
.hero-card.empty:hover .hero-text[b-e8jthmzqt4]::placeholder {
    color: transparent;
}

/* Hover crossfade, half two: what will actually land here. Overlaid
   on the text zone (card-content is the positioning context), so the
   card's height never changes on hover — the no-hop column doctrine
   extends to no-grow. pointer-events none: informational, never a
   click target. Scoped to .empty:hover below; inert in every other
   card state even though the element renders whenever EmptyHint is
   set. */
.empty-reveal[b-e8jthmzqt4] {
    position: absolute;
    inset: 0 0 auto 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.55;
    font-weight: 480;
    color: var(--ink-3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    overflow-wrap: break-word;
    z-index: 2;
}

.hero-card .empty-reveal[b-e8jthmzqt4] {
    font-size: 1rem;
    line-height: 1.6;
}

.card.empty:hover .empty-reveal[b-e8jthmzqt4],
.hero-card.empty:hover .empty-reveal[b-e8jthmzqt4] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .empty-reveal[b-e8jthmzqt4] {
        transition: none;
        transform: none;
    }
}

.card.empty .card-content[b-e8jthmzqt4],
.hero-card.empty .card-content[b-e8jthmzqt4] {
    min-height: 0;
}

.hero-card.empty .hero-text[b-e8jthmzqt4] {
    min-height: 52px;
}

/* Editing caret KEEPS brand pink — direct micro-interaction signal */
.card-text:focus[b-e8jthmzqt4], .hero-text:focus[b-e8jthmzqt4] {
    outline: none;
    caret-color: var(--accent);
}

/* Placeholder typography — explicit font-size + letter-spacing here
   so the hero card's placeholder doesn't inherit .hero-text's editorial
   step-up (1.0625rem, -0.005em). Both regular and hero placeholders
   share identical typography; only the typed content differs. */
.card-text[b-e8jthmzqt4]::placeholder, .hero-text[b-e8jthmzqt4]::placeholder {
    color: var(--ink-6);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    letter-spacing: 0.005em;
    opacity: 0.8;
}

/* Highlight number — was brand-pink gradient. Neutralized to ink
   so it doesn't compete with the grade tile. The number itself is
   the signal; gradient was decoration. */
.highlight-number[b-e8jthmzqt4] {
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
    letter-spacing: -0.03em;
    line-height: 1;
}


/* ===========================
   BACKGROUND ICONS (hidden)
   =========================== */

.card-icon-bg[b-e8jthmzqt4], .hero-icon[b-e8jthmzqt4] {
    display: none;
}


/* ===========================
   FOOTER
   =========================== */

.card-footer[b-e8jthmzqt4] {
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-card .card-footer[b-e8jthmzqt4] {
    padding: 0.25rem 1rem;
}

.footer-meta[b-e8jthmzqt4], .footer-edit-hint[b-e8jthmzqt4], .footer-editing[b-e8jthmzqt4], .footer-readonly[b-e8jthmzqt4], .footer-empty[b-e8jthmzqt4] {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(2rem);
    opacity: 0;
}

.hero-card .footer-meta[b-e8jthmzqt4], .hero-card .footer-edit-hint[b-e8jthmzqt4],
.hero-card .footer-editing[b-e8jthmzqt4], .hero-card .footer-readonly[b-e8jthmzqt4], .hero-card .footer-empty[b-e8jthmzqt4] {
    left: 1rem;
    right: 1rem;
}

.footer-meta[b-e8jthmzqt4] {
    color: var(--ink-6);
    transform: translateY(0);
    opacity: 1;
}

.footer-edit-hint[b-e8jthmzqt4] {
    color: var(--ink-6);
    font-weight: var(--font-weight-regular);
}

    .footer-edit-hint .hint-primary[b-e8jthmzqt4] {
        color: var(--ink-5);
    }

    .footer-edit-hint .hint-sep[b-e8jthmzqt4] {
        color: var(--ink-7);
        margin: 0 0.25rem;
    }

    .footer-edit-hint .hint-secondary[b-e8jthmzqt4] {
        color: var(--ink-7);
    }

.footer-editing[b-e8jthmzqt4] {
    color: var(--ink-4);
}

.footer-readonly[b-e8jthmzqt4] {
    color: var(--ink-6);
}

.footer-empty[b-e8jthmzqt4] {
    color: var(--ink-5);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.005em;
}

    .footer-edit-hint i[b-e8jthmzqt4], .footer-editing i[b-e8jthmzqt4], .footer-readonly i[b-e8jthmzqt4], .footer-empty i[b-e8jthmzqt4] {
        margin-right: 0.25rem;
    }

/* Hover → edit hint */
.card:hover:not(.editing):not(.readonly):not(.empty) .footer-meta[b-e8jthmzqt4],
.hero-card:hover:not(.editing):not(.readonly):not(.empty) .footer-meta[b-e8jthmzqt4] {
    transform: translateY(-2rem);
    opacity: 0;
}

.card:hover:not(.editing):not(.readonly):not(.empty) .footer-edit-hint[b-e8jthmzqt4],
.hero-card:hover:not(.editing):not(.readonly):not(.empty) .footer-edit-hint[b-e8jthmzqt4] {
    transform: translateY(0);
    opacity: 1;
}

/* Editing → editing label */
.card.editing .footer-meta[b-e8jthmzqt4], .hero-card.editing .footer-meta[b-e8jthmzqt4] {
    transform: translateY(-2rem);
    opacity: 0;
}

.card.editing .footer-editing[b-e8jthmzqt4], .hero-card.editing .footer-editing[b-e8jthmzqt4] {
    transform: translateY(0);
    opacity: 1;
}

/* Empty → footer hidden by default, revealed on hover */
.card.empty .footer-meta[b-e8jthmzqt4], .hero-card.empty .footer-meta[b-e8jthmzqt4] {
    transform: translateY(-2rem);
    opacity: 0;
}

.card.empty .footer-empty[b-e8jthmzqt4], .hero-card.empty .footer-empty[b-e8jthmzqt4] {
    transform: translateY(2rem);
    opacity: 0;
    color: var(--ink-5);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.empty:hover .footer-empty[b-e8jthmzqt4], .hero-card.empty:hover .footer-empty[b-e8jthmzqt4] {
    transform: translateY(0);
    opacity: 1;
    color: var(--ink-5);
}

.card.empty .footer-edit-hint[b-e8jthmzqt4], .card.empty .footer-editing[b-e8jthmzqt4], .card.empty .footer-readonly[b-e8jthmzqt4],
.hero-card.empty .footer-edit-hint[b-e8jthmzqt4], .hero-card.empty .footer-editing[b-e8jthmzqt4], .hero-card.empty .footer-readonly[b-e8jthmzqt4] {
    display: none !important;
}

/* Readonly → lock */
.card.readonly .footer-meta[b-e8jthmzqt4], .hero-card.readonly .footer-meta[b-e8jthmzqt4] {
    transform: translateY(0);
    opacity: 1;
}

.card.readonly .footer-readonly[b-e8jthmzqt4], .hero-card.readonly .footer-readonly[b-e8jthmzqt4] {
    transform: translateY(0);
    opacity: 1;
    position: absolute;
    right: 1.125rem;
    left: auto;
    width: auto;
}

.hero-card.readonly .footer-readonly[b-e8jthmzqt4] {
    right: 1.25rem;
}

.card.readonly .footer-edit-hint[b-e8jthmzqt4], .card.readonly .footer-editing[b-e8jthmzqt4], .card.readonly .footer-empty[b-e8jthmzqt4],
.hero-card.readonly .footer-edit-hint[b-e8jthmzqt4], .hero-card.readonly .footer-editing[b-e8jthmzqt4], .hero-card.readonly .footer-empty[b-e8jthmzqt4] {
    display: none !important;
}


/* ===========================
   EMPTY STATE
   =========================== */

.empty-state[b-e8jthmzqt4] {
    position: relative;
    z-index: 1;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.75rem 2.25rem;
}

.empty-state-icon[b-e8jthmzqt4] {
    font-size: 2rem;
    color: var(--ink-7);
    margin-bottom: 0.625rem;
    opacity: 0.5;
}

.empty-state-title[b-e8jthmzqt4] {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-4);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.empty-state-message[b-e8jthmzqt4] {
    font-size: var(--text-base);
    color: var(--ink-5);
    line-height: 1.5;
    font-weight: 450;
}

.empty-state-hint[b-e8jthmzqt4] {
    font-size: var(--text-xs);
    color: var(--ink-6);
    margin-top: 0.375rem;
}

.card.empty[b-e8jthmzqt4], .hero-card.empty[b-e8jthmzqt4] {
    cursor: default;
}

    .card.empty:hover .empty-state-title[b-e8jthmzqt4],
    .hero-card.empty:hover .empty-state-title[b-e8jthmzqt4] {
        color: var(--ink-3);
    }

    .card.empty:hover .empty-state-icon[b-e8jthmzqt4],
    .hero-card.empty:hover .empty-state-icon[b-e8jthmzqt4] {
        opacity: 0.5;
        color: var(--ink-6);
    }


/* ===========================
   READONLY STATE
   =========================== */

.card.readonly[b-e8jthmzqt4], .hero-card.readonly[b-e8jthmzqt4] {
    cursor: default;
    opacity: 0.92;
}

    .card.readonly:hover[b-e8jthmzqt4], .hero-card.readonly:hover[b-e8jthmzqt4] {
        /* No interaction cue on hover — but the surface must not flash
           away: readonly filled cards are still lifted objects. */
        transform: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 14px -8px rgba(15, 23, 42, 0.10), 0 14px 28px -18px rgba(15, 23, 42, 0.12);
        background: var(--surface);
    }

    .card.readonly .card-text[b-e8jthmzqt4], .hero-card.readonly .hero-text[b-e8jthmzqt4] {
        cursor: default;
        pointer-events: none;
        opacity: 0.9;
    }


/* ===========================
   LOADING & UPDATE
   =========================== */

.loading-overlay[b-e8jthmzqt4] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--raised) 97%, transparent);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    animation: fadeIn-b-e8jthmzqt4 0.2s ease-out forwards;
    backdrop-filter: blur(8px);
}

/* Loading spinner KEEPS brand pink — process indication signal */
.loading-spinner[b-e8jthmzqt4] {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    margin-bottom: 1rem;
}

    .loading-spinner[b-e8jthmzqt4]::before, .loading-spinner[b-e8jthmzqt4]::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid transparent;
    }

    .loading-spinner[b-e8jthmzqt4]::before {
        border-top-color: var(--accent);
        border-right-color: var(--accent);
        animation: spin-b-e8jthmzqt4 0.8s linear infinite;
    }

    .loading-spinner[b-e8jthmzqt4]::after {
        border-bottom-color: var(--accent-hover);
        border-left-color: var(--accent-hover);
        animation: spin-b-e8jthmzqt4 0.8s linear infinite reverse;
        width: 2rem;
        height: 2rem;
        top: 0.25rem;
        left: 0.25rem;
    }

@keyframes spin-b-e8jthmzqt4 {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-e8jthmzqt4] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink-4);
    text-align: center;
}

.loading-progress[b-e8jthmzqt4] {
    width: 3.75rem;
    height: 2px;
    background: var(--border-lt);
    border-radius: 2px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.loading-progress-bar[b-e8jthmzqt4] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 2px;
    animation: loadingProgress-b-e8jthmzqt4 1.5s ease-in-out infinite;
}

@keyframes loadingProgress-b-e8jthmzqt4 {
    0% {
        width: 0;
        transform: translateX(0);
    }

    50% {
        width: 100%;
        transform: translateX(0);
    }

    100% {
        width: 100%;
        transform: translateX(100%);
    }
}

/* Update dots KEEP brand pink — same role as the pending-update dot:
   "something is happening" signal. */
.update-dots[b-e8jthmzqt4] {
    display: inline-flex;
    gap: 0.375rem;
    padding: 0.5rem;
}

    .update-dots span[b-e8jthmzqt4] {
        width: 0.5rem;
        height: 0.5rem;
        background: var(--accent);
        border-radius: 50%;
        opacity: 0.3;
        animation: dotWave-b-e8jthmzqt4 1.4s ease-in-out infinite;
    }

        .update-dots span:nth-child(2)[b-e8jthmzqt4] {
            animation-delay: 0.15s;
        }

        .update-dots span:nth-child(3)[b-e8jthmzqt4] {
            animation-delay: 0.3s;
        }

@keyframes dotWave-b-e8jthmzqt4 {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }

    30% {
        transform: translateY(-0.5rem) scale(1.15);
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BADGE SYSTEM — KEEPS brand pink for the default badge.
   Announcement signal; the only place a card celebrates chromatically.
   ──────────────────────────────────────────────────────────────
   .new-badge              → Accent-pink (first appearance)
   .new-badge--updated     → Success green (AI content refresh, 4.5s)
   .new-badge--saved       → Neutral grey (user blur-commit, 2s)
   ═══════════════════════════════════════════════════════════════ */

.new-badge[b-e8jthmzqt4] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.5rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 10;
    opacity: 0;
    transform: scale(0.9) translateY(-4px);
    animation: newBadgeIn-b-e8jthmzqt4 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: 0 2px 8px var(--accent-shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}

    .new-badge i[b-e8jthmzqt4] {
        font-size: 0.45rem;
    }

@keyframes newBadgeIn-b-e8jthmzqt4 {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.new-badge.fade-out[b-e8jthmzqt4] {
    animation: newBadgeFadeOut-b-e8jthmzqt4 0.4s ease-out forwards;
}

@keyframes newBadgeFadeOut-b-e8jthmzqt4 {
    to {
        opacity: 0;
        transform: scale(0.85) translateY(-3px);
    }
}

/* AI "Updated" variant — warm success green */
.new-badge--updated[b-e8jthmzqt4] {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 18%, transparent);
    animation: newBadgeIn-b-e8jthmzqt4 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, updatedSettle-b-e8jthmzqt4 0.6s 0.35s ease-out forwards;
}

@keyframes updatedSettle-b-e8jthmzqt4 {
    0% {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 25%, transparent);
    }

    100% {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 10%, transparent);
    }
}

/* User "Saved" variant — neutral grey, calmer than the AI badge.
   Acknowledgment, not announcement. 2s lifetime in the C# timer. */
.new-badge--saved[b-e8jthmzqt4] {
    background: linear-gradient(135deg, var(--ink-5), var(--ink-4));
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    animation: newBadgeIn-b-e8jthmzqt4 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ===========================
   ENTRANCE ANIMATIONS
   =========================== */

.hero-card[b-e8jthmzqt4], .card[b-e8jthmzqt4] {
    animation: fadeInUp-b-e8jthmzqt4 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

    .card:nth-child(1)[b-e8jthmzqt4] {
        animation-delay: 0s;
    }

    .card:nth-child(2)[b-e8jthmzqt4] {
        animation-delay: 0.04s;
    }

    .card:nth-child(3)[b-e8jthmzqt4] {
        animation-delay: 0.08s;
    }

    .card:nth-child(4)[b-e8jthmzqt4] {
        animation-delay: 0.12s;
    }

    .card:nth-child(5)[b-e8jthmzqt4] {
        animation-delay: 0.16s;
    }

    .card:nth-child(6)[b-e8jthmzqt4] {
        animation-delay: 0.2s;
    }

@keyframes fadeIn-b-e8jthmzqt4 {
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp-b-e8jthmzqt4 {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
    .card[b-e8jthmzqt4], .hero-card[b-e8jthmzqt4],
    .card-icon-bg[b-e8jthmzqt4], .hero-icon[b-e8jthmzqt4], .title-icon[b-e8jthmzqt4],
    .footer-meta[b-e8jthmzqt4], .footer-edit-hint[b-e8jthmzqt4], .footer-editing[b-e8jthmzqt4], .footer-readonly[b-e8jthmzqt4], .footer-empty[b-e8jthmzqt4] {
        transition: none;
    }

        .card[b-e8jthmzqt4], .hero-card[b-e8jthmzqt4],
        .card-icon-bg[b-e8jthmzqt4], .hero-icon[b-e8jthmzqt4], .title-icon[b-e8jthmzqt4],
        .loading-spinner[b-e8jthmzqt4]::before, .loading-spinner[b-e8jthmzqt4]::after,
        .loading-progress-bar[b-e8jthmzqt4], .update-dots span[b-e8jthmzqt4],
        .card.pending-update[b-e8jthmzqt4]::before, .hero-card.pending-update[b-e8jthmzqt4]::before,
        .card.pending-update .card-title[b-e8jthmzqt4]::after, .hero-card.pending-update .hero-title[b-e8jthmzqt4]::after,
        .card.updating[b-e8jthmzqt4]::after, .hero-card.updating[b-e8jthmzqt4]::after {
            animation: none;
        }

            .card.pending-update .card-title[b-e8jthmzqt4]::after,
            .hero-card.pending-update .hero-title[b-e8jthmzqt4]::after {
                opacity: 0.7;
                transform: scale(1);
            }

            .card.pending-update[b-e8jthmzqt4]::before,
            .hero-card.pending-update[b-e8jthmzqt4]::before {
                background: linear-gradient( 90deg, transparent 0%, var(--accent) 40%, var(--accent) 60%, transparent 100% );
                opacity: 0.5;
            }
}


/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1300px) {
    .card[b-e8jthmzqt4] {
        padding: 1rem;
        min-height: 0;
    }

    .hero-card[b-e8jthmzqt4] {
        min-height: 0;
    }


    .hero-title[b-e8jthmzqt4], .card-title[b-e8jthmzqt4] {
        font-size: var(--text-xs);
    }

    .hero-text[b-e8jthmzqt4] {
        font-size: var(--text-md);
        min-height: 70px;
    }

    .card-text[b-e8jthmzqt4] {
        font-size: var(--text-base);
        min-height: 55px;
    }

    .card-content[b-e8jthmzqt4] {
        min-height: 50px;
    }
}

@media (max-width: 768px) {
    .card[b-e8jthmzqt4] {
        padding: 0.875rem;
        min-height: 0;
    }

    .hero-card[b-e8jthmzqt4] {
        padding: 1rem;
        min-height: 0;
    }

    .highlight-number[b-e8jthmzqt4] {
        font-size: 2.25rem;
    }

    .hero-text[b-e8jthmzqt4] {
        font-size: var(--text-base);
        min-height: 60px;
    }

    .card-text[b-e8jthmzqt4] {
        font-size: var(--text-sm);
        min-height: 50px;
    }

        /* Placeholder follows .card-text's mobile size so hero + regular
       placeholders stay identical at every breakpoint. */
        .card-text[b-e8jthmzqt4]::placeholder, .hero-text[b-e8jthmzqt4]::placeholder {
            font-size: var(--text-sm);
        }

    .hero-title[b-e8jthmzqt4], .card-title[b-e8jthmzqt4] {
        font-size: var(--text-2xs);
        margin-bottom: 0.25rem;
    }

    .card-footer[b-e8jthmzqt4], .hero-card .card-footer[b-e8jthmzqt4] {
        padding: 0.25rem 0.875rem;
        height: 1.5rem;
    }

    .footer-meta[b-e8jthmzqt4], .footer-edit-hint[b-e8jthmzqt4], .footer-editing[b-e8jthmzqt4], .footer-readonly[b-e8jthmzqt4], .footer-empty[b-e8jthmzqt4],
    .hero-card .footer-meta[b-e8jthmzqt4], .hero-card .footer-edit-hint[b-e8jthmzqt4], .hero-card .footer-editing[b-e8jthmzqt4],
    .hero-card .footer-readonly[b-e8jthmzqt4], .hero-card .footer-empty[b-e8jthmzqt4] {
        left: 0.875rem;
        right: 0.875rem;
        font-size: 0.5rem;
    }

    .card.readonly .footer-readonly[b-e8jthmzqt4], .hero-card.readonly .footer-readonly[b-e8jthmzqt4] {
        right: 0.875rem;
    }


    .card-content[b-e8jthmzqt4] {
        min-height: 45px;
        padding-bottom: 0.5rem;
    }

    .empty-state[b-e8jthmzqt4] {
        min-height: 55px;
        padding-bottom: 2rem;
    }

    .card.pending-update .card-title[b-e8jthmzqt4]::after,
    .hero-card.pending-update .hero-title[b-e8jthmzqt4]::after {
        width: 4px;
        height: 4px;
    }
}

@media (max-width: 480px) {
    .card[b-e8jthmzqt4] {
        padding: 0.875rem;
        min-height: 0;
    }

    .hero-card[b-e8jthmzqt4] {
        padding: 0.875rem;
        min-height: 0;
    }

    .card-text[b-e8jthmzqt4] {
        min-height: 45px;
    }

    .hero-text[b-e8jthmzqt4] {
        min-height: 50px;
    }

    .card-content[b-e8jthmzqt4] {
        min-height: 40px;
        padding-bottom: 0.5rem;
    }

    .empty-state[b-e8jthmzqt4] {
        min-height: 45px;
        padding: 0.5rem 0.75rem 1.75rem;
    }

    .empty-state-icon[b-e8jthmzqt4] {
        font-size: 1.5rem;
        margin-bottom: 0.375rem;
    }

    .empty-state-title[b-e8jthmzqt4] {
        font-size: var(--text-md);
    }

    .card-footer[b-e8jthmzqt4] {
        height: 1.25rem;
        padding: 0.25rem 0.875rem;
    }
}

/* ─── hero card width (pass 18): FULL-BLEED by design ────────────
   The pass-12 measure-hugging cap is reverted — the executive
   summary card spans the total width of the three columns; that is
   the layout's intent, stated by the owner. The text measure was
   restored to 95ch in the same pass (.hero-text). */
/* /Components/ProdComponents/InnovationAgendaPage.razor.rz.scp.css */
/* ============================================================
   INNOVATION AGENDA
   Restrained by design: one accent, three surface levels
   (page → card → field). The content carries the page.
   ============================================================ */

.agenda-page[b-171indli24] {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: var(--background-secondary);
}

    .agenda-page *[b-171indli24] {
        box-sizing: border-box;
    }

.agenda-aurora[b-171indli24] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}

.agenda-wrapper[b-171indli24] {
    max-width: 1360px;
    margin: 0 auto;
    padding: 64px 40px 96px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead[b-171indli24] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}

.masthead-eyebrow[b-171indli24] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}

.masthead-title[b-171indli24] {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.08;
    margin: 0 0 14px;
    color: var(--text-heading);
}

.masthead-sub[b-171indli24] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 62ch;
}

/* State tag inside an identity row (e.g. a lapsed period). */
.rail-tag[b-171indli24] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Past-version indicator: sits where the edit button would be, so opening
   history never pushes the page down. */
@keyframes mhFade-b-171indli24 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.masthead-history[b-171indli24],
.masthead > .btn-primary[b-171indli24] {
    animation: mhFade-b-171indli24 0.22s ease both;
}

.masthead-history[b-171indli24] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--background-primary);
    flex-shrink: 0;
}

.mh-text[b-171indli24] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mh-eyebrow[b-171indli24] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.mh-name[b-171indli24] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--text-heading);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.agenda-layout[b-171indli24] {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 28px;
    align-items: start;
}

.rail[b-171indli24] {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.main[b-171indli24] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   CONCEPT PANELS
   Same surface as everything else; only the mark carries colour.
   ============================================================ */
/* A barely-there violet wash separates guidance from the record cards above
   it, without introducing another accent. */
.concept[b-171indli24] {
    position: relative;
    background: #f2eefb;
    border: 1px solid rgba(124, 58, 237, 0.13);
    border-radius: 16px;
    padding: 22px 24px;
}

.concept-watermark[b-171indli24] {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 76px;
    line-height: 1;
    color: #7c3aed;
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
}

.concept-title[b-171indli24] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.25px;
    margin: 0 0 11px;
    color: var(--text-heading);
}

.concept-text[b-171indli24] {
    font-size: 13px;
    line-height: 1.68;
    color: var(--text-secondary);
    margin: 0 0 11px;
}

    .concept-text:last-of-type[b-171indli24] {
        margin-bottom: 0;
    }

    .concept-text strong[b-171indli24] {
        color: var(--text-heading);
        font-weight: 650;
    }

.concept-foot[b-171indli24] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
    font-size: 12px;
    font-style: italic;
    color: var(--text-tertiary);
}

.concept-split[b-171indli24] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.split-row[b-171indli24] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 12px;
    border-left: 2px solid rgba(124, 58, 237, 0.2);
}

.split-yes[b-171indli24] {
    border-left-color: var(--text-heading);
}

.split-tag[b-171indli24] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.split-body[b-171indli24] {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

    .split-body strong[b-171indli24] {
        color: var(--text-heading);
    }

/* ============================================================
   RAIL CARDS
   ============================================================ */
.rail-card[b-171indli24] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
}

.rail-title[b-171indli24] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.rail-row[b-171indli24] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

    .rail-row:last-of-type[b-171indli24] {
        border-bottom: none;
    }

.rail-label[b-171indli24] {
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.rail-value[b-171indli24] {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-heading);
    text-align: right;
}

.rail-note[b-171indli24] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .rail-note i[b-171indli24] {
        color: var(--text-tertiary);
        margin-top: 2px;
    }

.btn-rail[b-171indli24] {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.18s ease;
}

    .btn-rail:hover:not(:disabled)[b-171indli24] {
        border-color: var(--text-heading);
        color: var(--text-heading);
    }

/* ── Version timeline ── */
.timeline[b-171indli24] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.tl-item[b-171indli24] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

    .tl-item[b-171indli24]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 22px;
        bottom: -4px;
        width: 1px;
        background: var(--border-color);
    }

    .tl-item:last-child[b-171indli24]::before {
        display: none;
    }

.tl-dot[b-171indli24] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-color);
    margin-top: 5px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background 0.18s ease;
}

.tl-item.active .tl-dot[b-171indli24] {
    background: var(--accent);
}

.tl-item:hover .tl-dot[b-171indli24] {
    background: var(--text-tertiary);
}

.tl-body[b-171indli24] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tl-version[b-171indli24] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--text-heading);
    word-break: break-all;
}

/* Paging arrows keep the rail a fixed height however long history gets. */
.tl-page[b-171indli24] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.18s ease;
}

    .tl-page:hover[b-171indli24] {
        color: var(--text-heading);
    }

.tl-current[b-171indli24] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(244, 8, 155, 0.1);
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    vertical-align: middle;
}

.tl-date[b-171indli24] {
    font-size: 11.5px;
    color: var(--text-tertiary);
}

/* ============================================================
   PANELS
   ============================================================ */
.panel[b-171indli24] {
    position: relative;
    background: #eff0f4;
    border: 1px solid rgba(20, 15, 50, 0.06);
    border-radius: 20px;
    padding: 32px 34px;
}

/* Section mark as a large, near-invisible watermark: gives each section a
   silhouette without adding another coloured object to the page. */
.panel-watermark[b-171indli24] {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 150px;
    line-height: 1;
    color: var(--text-heading);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
}

.panel-head[b-171indli24] {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(20, 15, 50, 0.07);
}

.panel-title[b-171indli24] {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.4px;
    margin: 0 0 5px;
    color: var(--text-heading);
}

.panel-desc[b-171indli24] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 68ch;
}

/* ============================================================
   FIELDS
   ============================================================ */
.field[b-171indli24] {
    margin-bottom: 26px;
}

    .field:last-child[b-171indli24] {
        margin-bottom: 0;
    }

.field-row[b-171indli24] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 26px;
}

    .field-row .field[b-171indli24] {
        margin-bottom: 0;
    }

.field-label[b-171indli24] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--text-heading);
    margin-bottom: 9px;
}

.req[b-171indli24] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Info tooltip: one place for why-it-matters and the worked example, so the
   field itself stays a field. */
.info[b-171indli24] {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: var(--text-tertiary);
    cursor: help;
    outline: none;
}

.info-mark[b-171indli24] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.info:hover[b-171indli24],
.info:focus[b-171indli24] {
    color: var(--accent);
}

.tip[b-171indli24] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    width: 320px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--text-heading);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 40;
    pointer-events: none;
}

    /* Pointer */
    .tip[b-171indli24]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: var(--text-heading);
    }

.info:hover .tip[b-171indli24],
.info:focus .tip[b-171indli24] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tip-why[b-171indli24] {
    display: block;
    color: rgba(255, 255, 255, 0.9);
}

.tip-eg[b-171indli24] {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.62);
    font-style: italic;
}

.tip-eg-label[b-171indli24] {
    display: block;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 3px;
}

.field-note[b-171indli24] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 8px 0 0;
}

.field-error[b-171indli24] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    margin-top: 6px;
}

/* ── Data surfaces ──
   The third level: page → card → field. Recessed and inset so a value
   reads as content sitting IN the card, in both modes. Geometry is
   identical when editing; only the border and depth change. */
.input[b-171indli24] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(20, 15, 50, 0.07);
    border-radius: 11px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-heading);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 15, 50, 0.03);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.textarea[b-171indli24] {
    resize: vertical;
}

.input[b-171indli24]::placeholder {
    color: var(--text-tertiary);
}

.input:not([readonly]):hover[b-171indli24] {
    border-color: rgba(20, 15, 50, 0.16);
}

.input:focus[b-171indli24] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(244, 8, 155, 0.09);
}

/* Reading: still a light card, just without an editable edge. */
.input[readonly][b-171indli24] {
    border-color: transparent;
    box-shadow: none;
    cursor: default;
}

.input.invalid[b-171indli24] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.04);
}

/* ============================================================
   OPTION PILLS
   ============================================================ */
.options[b-171indli24] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opt[b-171indli24] {
    padding: 9px 16px;
    border: 1px solid rgba(20, 15, 50, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .opt:hover:not(:disabled)[b-171indli24] {
        border-color: var(--text-heading);
        color: var(--text-heading);
    }

    .opt.on[b-171indli24] {
        border-color: var(--text-heading);
        background: var(--text-heading);
        color: var(--background-primary);
    }

    .opt:disabled[b-171indli24] {
        cursor: default;
    }

.options.reading .opt:not(.on)[b-171indli24] {
    opacity: 0.35;
}

/* ============================================================
   CHIPS
   ============================================================ */
.chiplist[b-171indli24] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 10px 12px;
    border: 1px solid rgba(20, 15, 50, 0.07);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 15, 50, 0.03);
}

    .chiplist.editable[b-171indli24] {
        cursor: text;
    }

        .chiplist.editable:focus-within[b-171indli24] {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(244, 8, 155, 0.09);
        }

    .chiplist.reading[b-171indli24] {
        border-color: transparent;
        box-shadow: none;
    }

.chiplist-empty[b-171indli24] {
    font-size: 14px;
    color: var(--text-tertiary);
}

.chip[b-171indli24] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 13px;
    background: #f2f3f7;
    border: 1px solid rgba(20, 15, 50, 0.06);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

.chiplist.reading .chip[b-171indli24] {
    padding: 6px 13px;
}

.chip-x[b-171indli24] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 15, 50, 0.08);
    color: var(--text-secondary);
    font-size: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

    .chip-x:hover[b-171indli24] {
        background: var(--accent);
        color: #fff;
    }

.chip-entry[b-171indli24] {
    flex: 1;
    min-width: 150px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-heading);
    padding: 4px 2px;
}

    .chip-entry[b-171indli24]::placeholder {
        color: var(--text-tertiary);
    }

/* ============================================================
   BANNERS
   ============================================================ */
.banner[b-171indli24] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
}

.banner-success[b-171indli24] {
    background: rgba(15, 138, 94, 0.07);
    border: 1px solid rgba(15, 138, 94, 0.22);
    color: #0b6f4c;
}

.banner-error[b-171indli24] {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

.banner-guidance[b-171indli24] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.banner-close[b-171indli24] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    padding: 0 2px;
}

    .banner-close:hover[b-171indli24] {
        opacity: 1;
    }

/* ============================================================
   ACTIONS
   ============================================================ */
.actions[b-171indli24] {
    position: sticky;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 15px 20px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
}

.pending[b-171indli24] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-right: auto;
}

.pending-dot[b-171indli24] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.btn-primary[b-171indli24] {
    padding: 13px 26px;
    background: var(--text-heading);
    color: var(--background-primary);
    border: none;
    border-radius: 11px;
    font-family: inherit;
    font-weight: 650;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition: all 0.18s ease;
}

    .btn-primary:hover:not(:disabled)[b-171indli24] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .btn-primary:disabled[b-171indli24] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-ghost[b-171indli24] {
    padding: 13px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    font-family: inherit;
    font-weight: 650;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .btn-ghost:hover:not(:disabled)[b-171indli24] {
        color: var(--text-heading);
        border-color: var(--text-heading);
    }

.spinner[b-171indli24] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-171indli24 0.7s linear infinite;
}

.spinner-dark[b-171indli24] {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text-heading);
}

@keyframes spin-b-171indli24 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state[b-171indli24] {
    text-align: center;
    padding: 40px 24px;
}

.empty-icon[b-171indli24] {
    font-size: 30px;
    color: var(--text-tertiary);
    margin-bottom: 18px;
}

.empty-title[b-171indli24] {
    font-size: 20px;
    font-weight: 750;
    color: var(--text-heading);
    margin: 0 0 10px;
}

.empty-text[b-171indli24] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 52ch;
    margin: 0 auto 22px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .agenda-layout[b-171indli24] {
        grid-template-columns: 1fr;
    }

    .rail[b-171indli24] {
        position: static;
    }
}

@media (max-width: 768px) {
    .agenda-wrapper[b-171indli24] {
        padding: 40px 20px 72px;
    }

    .masthead[b-171indli24] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .masthead-title[b-171indli24] {
        font-size: 30px;
    }

    .panel[b-171indli24] {
        padding: 24px 20px;
    }

    .field-row[b-171indli24] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .masthead-history[b-171indli24],
    .masthead > .btn-primary[b-171indli24],
    .btn-primary[b-171indli24],
    .btn-ghost[b-171indli24],
    .btn-rail[b-171indli24],
    .opt[b-171indli24],
    .tip[b-171indli24],
    .chip-x[b-171indli24],
    .tl-dot[b-171indli24],
    .input[b-171indli24] {
        transition: none;
    }

        .btn-primary:hover:not(:disabled)[b-171indli24] {
            transform: none;
        }

    .spinner[b-171indli24] {
        animation: none;
    }

    .masthead-history[b-171indli24],
    .masthead > .btn-primary[b-171indli24] {
        animation: none;
    }
}
/* /Components/ProdComponents/MarketOutlook.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   MarketSizing — v15 (with story-clarity patches)
   ───────────────────────────────────────────
   Patches applied (vs v14):
     1. Strategy banner — brand-accent thesis treatment
     2. Market Layers heading — quieter (no bordered bar)
     3. Disclaimer — italic note, no warning chrome
     4. Hero context — slightly tighter, capped width
     5. Hero-below — margin tightened for continuity
   Responsive: strategy banner stacks with top-accent at <900px.
   ═══════════════════════════════════════════ */

/* ── Component-Scoped Vars ── */
.ms-section[b-vss47meowj] {
    /* Globals inherited from app.css :root (ink, surfaces, accent, font) */
    /* Tier progression — density not hue (funnel visualization) */
    --tier-1-bg: #f8fafc;
    --tier-1-border: rgba(51,65,85,0.08);
    --tier-2-bg: #f1f5f9;
    --tier-2-border: rgba(51,65,85,0.12);
    --tier-3-bg: #e2e8f0;
    --tier-3-border: rgba(51,65,85,0.18);
    --tier-deep-bg: #1e293b;
    --tier-deep-hover: #334155;
    --tier-deep-active: #0f172a;
    /* TAM/SAM/SOM — slate monochrome data-viz */
    --tam: #94a3b8;
    --tam-fill: rgba(148,163,184,0.16);
    --tam-stroke: rgba(148,163,175,0.45);
    --tam-accent: #64748b;
    --sam: #64748b;
    --sam-fill: rgba(100,116,139,0.14);
    --sam-stroke: rgba(100,116,139,0.4);
    --sam-accent: #475569;
    --som: #334155;
    --som-fill: rgba(51,65,85,0.90);
    --som-accent: #1e293b;
    /* Earned color — intentionally brighter than global status tokens */
    --green: #10b981;
    --green-bg: #ecfdf5;
    --green-lt: #6ee7b7;
    --amber: #f59e0b;
    --amber-bg: #fffbeb;
    --red: #ef4444;
    --red-lt: #fca5a5;
    --red-bg: #fef2f2;
    /* Interactive — component-specific accent opacities */
    --accent-bg: color-mix(in srgb, var(--accent) 5%, transparent);
    --accent-lt: color-mix(in srgb, var(--accent) 10%, transparent);
    /* Mono typeface for data labels */
    --mono: 'DM Mono', 'SF Mono', monospace;
    max-width: none;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: ms-up-b-vss47meowj .5s ease .1s forwards;
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

@keyframes ms-up-b-vss47meowj {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ms-fadeIn-b-vss47meowj {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ms-slideIn-b-vss47meowj {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ═══════════════════════════════
   FOLD / COLLAPSE
   ═══════════════════════════════ */
.ms-fold[b-vss47meowj] {
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.33,1,.68,1), opacity .3s ease;
}

.ms-section.collapsed .ms-hero-above .ms-hero-main[b-vss47meowj] {
    margin-bottom: 0;
}


/* ═══════════════════════════════
   FOLD TOGGLE BUTTON
   ═══════════════════════════════ */
.ms-fold-toggle-wrap[b-vss47meowj] {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.ms-fold-toggle[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .ms-fold-toggle:hover[b-vss47meowj] {
        background: var(--accent-lt);
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    .ms-fold-toggle i[b-vss47meowj] {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

    .ms-fold-toggle:hover i[b-vss47meowj] {
        transform: translateY(1px);
    }

.ms-fold-toggle[b-vss47meowj] {
    animation: ms-hintPulse-b-vss47meowj 2.5s ease-in-out infinite;
}

@keyframes ms-hintPulse-b-vss47meowj {
    0%, 100% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }
}


/* ═══════════════════════════════
   HERO CONTEXT WRAP
   ─────────────────────────────── */
/* PATCH 4: extra padding-bottom so the strategy banner below
   gets clear visual separation from the context paragraph. */
.ms-hero-context-wrap[b-vss47meowj] {
    padding: 0 0 1.25rem;
}


/* ═══════════════════════════════
   HERO INSIGHTS
   ═══════════════════════════════ */
.ms-hero-insights[b-vss47meowj] {
    margin-bottom: 2.25rem;
}

.ms-hero-above[b-vss47meowj] {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* PATCH 5: tighter bottom margin so hero cards → market layers
   reads as continuous story, not separated chunks. */
.ms-hero-below[b-vss47meowj] {
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.ms-hero-main[b-vss47meowj] {
    margin-bottom: 1.25rem;
}

.ms-hero-title[b-vss47meowj] {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: 1.45;
    margin: 0 0 0.375rem;
    letter-spacing: -0.01em;
    max-width: 52rem;
}

/* PATCH 4: slightly darker, capped width — reads as a weighted
   intro line rather than secondary supporting text. */
.ms-hero-context[b-vss47meowj] {
    font-size: var(--text-md);
    color: var(--ink-4);
    margin: 0;
    line-height: 1.55;
    max-width: 60rem;
}

.ms-hero-cards[b-vss47meowj] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.ms-hero-card[b-vss47meowj] {
    display: flex;
    gap: 1rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

    .ms-hero-card[b-vss47meowj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--border);
    }

    .ms-hero-card:hover[b-vss47meowj] {
        border-color: var(--ink-7);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }

        .ms-hero-card:hover[b-vss47meowj]::before {
            background: var(--ink-5);
        }

.ms-hero-card-body[b-vss47meowj] {
    flex: 1;
    min-width: 0;
}

.ms-hero-card-label[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    color: var(--ink-5);
}

    .ms-hero-card-label i[b-vss47meowj] {
        font-size: 10px;
        color: var(--ink-6);
    }

/* Driver / Risk items */
.ms-driver-list[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-driver-item[b-vss47meowj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ms-driver-dash[b-vss47meowj] {
    flex-shrink: 0;
    color: var(--ink-6);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    font-size: 12.5px;
}

.ms-driver-text[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

    .ms-driver-text strong[b-vss47meowj] {
        font-weight: var(--font-weight-semibold);
        color: var(--ink-2);
    }

.ms-risk-severity[b-vss47meowj] {
    display: inline;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    margin-left: 4px;
}

    .ms-risk-severity.sev-high[b-vss47meowj] {
        color: var(--danger);
    }

    .ms-risk-severity.sev-med[b-vss47meowj] {
        color: var(--warning-dark);
    }

    .ms-risk-severity.sev-low[b-vss47meowj] {
        color: #047857;
    }

/* Maturity inline */
.ms-maturity-inline[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-lt);
}

.ms-maturity-inline-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-6);
    white-space: nowrap;
}

.ms-maturity-inline-track[b-vss47meowj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ms-maturity-inline-seg[b-vss47meowj] {
    flex: 1;
    height: 5px;
    border-radius: 2.5px;
    background: var(--border);
    transition: background .3s;
}

    .ms-maturity-inline-seg.filled[b-vss47meowj] {
        background: var(--ink-4);
    }

    .ms-maturity-inline-seg.current[b-vss47meowj] {
        background: var(--green);
        box-shadow: 0 0 6px rgba(16,185,129,0.4);
    }

.ms-maturity-inline-value[b-vss47meowj] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--green);
    white-space: nowrap;
}


/* ═══════════════════════════════
   MARKET WINDOW CARD
   ═══════════════════════════════ */
.ms-hero-card-window[b-vss47meowj] {
    background: var(--raised);
    border-color: var(--border);
}

    .ms-hero-card-window[b-vss47meowj]::before {
        background: var(--amber);
    }

    .ms-hero-card-window:hover[b-vss47meowj] {
        border-color: var(--ink-7);
    }

        .ms-hero-card-window:hover[b-vss47meowj]::before {
            background: var(--amber);
        }

.ms-window-header[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ms-window-time[b-vss47meowj] {
    font-size: 20px;
    font-weight: var(--font-weight-extrabold);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ms-window-conf[b-vss47meowj] {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
}

    .ms-window-conf.conf-high[b-vss47meowj] {
        color: #047857;
    }

    .ms-window-conf.conf-medium[b-vss47meowj] {
        color: var(--warning-dark);
    }

    .ms-window-conf.conf-low[b-vss47meowj] {
        color: var(--danger);
    }

.ms-window-context[b-vss47meowj] {
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
    margin-bottom: 10px;
    line-height: 1.5;
}

.ms-window-triggers[b-vss47meowj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    max-width: 100%;
}

.ms-triggers-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-5);
    flex-shrink: 0;
}

.ms-trigger-chip[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    padding: 3px 8px;
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--ink-3);
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.ms-window-precedent[b-vss47meowj] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
    color: var(--ink-5);
    line-height: 1.4;
    padding-top: 8px;
    border-top: 1px solid rgba(161,98,7,0.15);
}

    .ms-window-precedent i[b-vss47meowj] {
        font-size: 10px;
        margin-top: 1px;
        opacity: 0.7;
    }


/* ═══════════════════════════════
   STRATEGIC POSTURE BANNER  (PATCH 1 — thesis treatment)
   ───────────────────────────────
   Now sits above the fold (component markup).
   Brand-accent left rule, slightly more weight, posture
   label in accent color so the recommendation pulls the eye.
   ═══════════════════════════════ */
.ms-strategy-banner[b-vss47meowj] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--raised);
    border: 1px solid var(--border);
    /* Brand-accent left rule — the thesis is the panel's anchor. */
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    /* Larger bottom margin signals "headline" weight. */
    margin: 0 0 28px;
    overflow: hidden;
}

.ms-strategy-posture[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 16px 24px;
    border-right: 1px solid var(--border-lt);
    /* Subtle accent-tinted fill paired with the left rule. */
    background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.ms-posture-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Accent color for the label — pulls the eye to the recommendation. */
    color: var(--accent);
}

.ms-posture-value[b-vss47meowj] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.ms-strategy-body[b-vss47meowj] {
    flex: 1;
    min-width: 0;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ms-strategy-headline[b-vss47meowj] {
    font-size: 14.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: 1.45;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.ms-strategy-rationale[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-4);
    line-height: 1.55;
    margin: 0;
}


/* ═══════════════════════════════
   MARKET LAYERS SECTION
   ═══════════════════════════════ */
.ms-map-section[b-vss47meowj] {
    margin-bottom: 2rem;
}

/* PATCH 2: quieter section header — no hard bottom border,
   normal letter-spacing, no uppercase transformation drama. */
.ms-panel-bar[b-vss47meowj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 12px;
    border-bottom: none;
}

.ms-panel-label[b-vss47meowj] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-5);
}

    .ms-panel-label i[b-vss47meowj] {
        margin-right: 0.5rem;
        font-size: 0.625rem;
        opacity: 0.5;
    }

/* Definitions toggle */
.ms-learn-btn[b-vss47meowj] {
    font-size: 11px;
    color: var(--ink-6);
    background: none;
    border: 1px solid var(--border);
    padding: 3px 10px 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all .15s;
}

    .ms-learn-btn:hover[b-vss47meowj] {
        border-color: var(--ink-7);
        color: var(--ink-4);
    }

    .ms-learn-btn.active[b-vss47meowj] {
        background: var(--ink-3);
        color: #fff;
        border-color: var(--ink-3);
    }

/* Definitions bar */
.ms-defs[b-vss47meowj] {
    display: none;
    padding: 14px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-lt);
}

    .ms-defs.show[b-vss47meowj] {
        display: flex;
        animation: ms-fadeIn-b-vss47meowj .2s ease;
    }

.ms-defs-i[b-vss47meowj] {
    flex: 1;
    padding: 0 20px;
    border-right: 1px solid var(--border-lt);
}

    .ms-defs-i:last-child[b-vss47meowj] {
        border-right: none;
    }

    .ms-defs-i:first-child[b-vss47meowj] {
        padding-left: 0;
    }

.ms-defs-acr[b-vss47meowj] {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    letter-spacing: .06em;
    margin-bottom: 2px;
}

    .ms-defs-acr.c-tam[b-vss47meowj] {
        color: var(--ink-5);
    }

    .ms-defs-acr.c-sam[b-vss47meowj] {
        color: var(--ink-4);
    }

    .ms-defs-acr.c-som[b-vss47meowj] {
        color: var(--ink-2);
    }

.ms-defs-nm[b-vss47meowj] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
    margin-bottom: 2px;
}

.ms-defs-d[b-vss47meowj] {
    font-size: 11px;
    color: var(--ink-5);
    line-height: 1.45;
}

.ms-defs-lk[b-vss47meowj] {
    font-size: 10px;
    color: var(--ink-4);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    transition: opacity .12s;
}

    .ms-defs-lk:hover[b-vss47meowj] {
        opacity: .65;
    }

/* Confidence bar */
.ms-conf[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
    cursor: default;
}

.ms-conf-t[b-vss47meowj] {
    font-size: 11px;
    color: var(--ink-6);
}

.ms-conf-bar[b-vss47meowj] {
    display: flex;
    gap: 2px;
}

.ms-conf-s[b-vss47meowj] {
    width: 14px;
    height: 5px;
    border-radius: 2.5px;
    background: var(--border);
}

    .ms-conf-s.on[b-vss47meowj] {
        background: var(--ink-3);
    }

.ms-conf-tip[b-vss47meowj] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--ink);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 6px;
    width: 220px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    transform: translateY(3px);
    z-index: 30;
}

    .ms-conf-tip[b-vss47meowj]::before {
        content: '';
        position: absolute;
        top: -4px;
        right: 20px;
        width: 8px;
        height: 8px;
        background: var(--ink);
        transform: rotate(45deg);
    }

.ms-conf:hover .ms-conf-tip[b-vss47meowj] {
    opacity: 1;
    transform: translateY(0);
}


/* ═══════════════════════════════
   FULL-WIDTH VISUALIZATION
   ═══════════════════════════════ */
.ms-viz-full[b-vss47meowj] {
    border: 1px solid var(--border);
    border-radius: 0.75rem 0.75rem 0 0;
    overflow: hidden;
}

/* ── TAM Host Container ── */
.ms-tam-host[b-vss47meowj] {
    background: var(--tier-1-bg);
    padding: 16px 20px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}

    .ms-tam-host[b-vss47meowj]::before {
        content: '';
        position: absolute;
        inset: 0;
        border: 2px solid transparent;
        border-radius: 0.75rem 0.75rem 0 0;
        pointer-events: none;
        transition: border-color .2s;
    }

    .ms-tam-host:hover[b-vss47meowj]::before {
        border-color: var(--tier-1-border);
    }

    .ms-tam-host.active[b-vss47meowj]::before {
        border-color: transparent;
    }

    .ms-tam-host.active[b-vss47meowj]::before {
        border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    }

    .ms-tam-host.active[b-vss47meowj] {
        background: color-mix(in srgb, var(--accent) 3%, var(--tier-1-bg));
    }

/* ── Tier Bar ── */
.ms-tam-bar[b-vss47meowj], .ms-sam-bar[b-vss47meowj], .ms-som-bar[b-vss47meowj], .ms-beachhead-bar[b-vss47meowj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ms-tier-id[b-vss47meowj] {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
}

.ms-tier-acr[b-vss47meowj] {
    font-family: var(--font);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.ms-tier-divider[b-vss47meowj] {
    margin: 0 6px;
    color: var(--ink-7);
    font-weight: 300;
}

.ms-tier-full[b-vss47meowj] {
    font-weight: var(--font-weight-regular);
    color: var(--ink-6);
}

.ms-tier-pct[b-vss47meowj] {
    font-family: var(--mono);
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
}

.ms-beachhead-bar .ms-tier-pct[b-vss47meowj] {
    color: rgba(255,255,255,0.7);
}

.ms-tier-pct-wrap[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.ms-pct-bar[b-vss47meowj] {
    width: 48px;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 2px;
    overflow: hidden;
}

    .ms-pct-bar.light[b-vss47meowj] {
        background: rgba(255,255,255,0.25);
    }

.ms-pct-fill[b-vss47meowj] {
    height: 100%;
    background: var(--ink-4);
    border-radius: 2px;
    transition: width .3s ease;
}

.ms-pct-bar.light .ms-pct-fill[b-vss47meowj] {
    background: #fff;
}

.ms-tier-stats[b-vss47meowj] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

.ms-tier-value[b-vss47meowj] {
    font-family: var(--font);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}

.ms-tier-cagr[b-vss47meowj] {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--green);
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Uniform font sizes per tier */
.ms-tam-bar[b-vss47meowj] {
    font-size: 14px;
}

    .ms-tam-bar .ms-tier-acr[b-vss47meowj], .ms-tam-bar .ms-tier-value[b-vss47meowj] {
        font-size: 14px;
        color: var(--ink);
    }

    .ms-tam-bar .ms-tier-cagr[b-vss47meowj] {
        font-size: 11px;
    }

.ms-sam-bar[b-vss47meowj] {
    font-size: 13px;
}

    .ms-sam-bar .ms-tier-acr[b-vss47meowj], .ms-sam-bar .ms-tier-value[b-vss47meowj] {
        font-size: 13px;
        color: var(--ink-2);
    }

.ms-som-bar[b-vss47meowj] {
    font-size: 12px;
}

    .ms-som-bar .ms-tier-acr[b-vss47meowj], .ms-som-bar .ms-tier-value[b-vss47meowj] {
        font-size: 12px;
        color: var(--ink-2);
    }

.ms-beachhead-bar[b-vss47meowj] {
    font-size: 11px;
}

    .ms-beachhead-bar .ms-tier-acr[b-vss47meowj], .ms-beachhead-bar .ms-tier-value[b-vss47meowj] {
        font-size: 11px;
        color: #fff;
    }

    .ms-beachhead-bar .ms-tier-full[b-vss47meowj] {
        color: rgba(255,255,255,0.6);
    }

    .ms-beachhead-bar .ms-tier-divider[b-vss47meowj] {
        color: rgba(255,255,255,0.3);
    }

/* ── Proportional Visualization Area ── */
.ms-proportion-area[b-vss47meowj] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 14px;
    padding: 12px 0 8px 0;
    min-height: 200px;
}

/* ── SAM Layer ── */
.ms-sam-layer[b-vss47meowj] {
    background: var(--tier-2-bg);
    border: 1px solid var(--tier-2-border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

    .ms-sam-layer:hover[b-vss47meowj] {
        border-color: var(--ink-6);
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .ms-sam-layer.active[b-vss47meowj] {
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        background: color-mix(in srgb, var(--accent) 4%, var(--tier-2-bg));
        box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 8%, transparent);
    }

    .ms-sam-layer > .ms-sam-bar[b-vss47meowj] {
        width: 100%;
    }

/* ── SOM Layer ── */
.ms-som-layer[b-vss47meowj] {
    background: var(--tier-3-bg);
    border: 1px solid var(--tier-3-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
}

    .ms-som-layer:hover[b-vss47meowj] {
        border-color: var(--ink-5);
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }

    .ms-som-layer.active[b-vss47meowj] {
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        background: color-mix(in srgb, var(--accent) 5%, var(--tier-3-bg));
        box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .ms-som-layer > .ms-som-bar[b-vss47meowj] {
        width: 100%;
    }

/* ── Beachhead Layer ── */
.ms-beachhead-layer[b-vss47meowj] {
    background: var(--tier-deep-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 10px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100px;
}

    .ms-beachhead-layer:hover[b-vss47meowj] {
        background: var(--tier-deep-hover);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

    .ms-beachhead-layer.active[b-vss47meowj] {
        background: var(--tier-deep-active);
        box-shadow: 0 0 0 1px var(--accent), 0 4px 20px color-mix(in srgb, var(--accent) 25%, transparent);
    }

.ms-beachhead-target[b-vss47meowj] {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

    .ms-beachhead-target .ms-target-ring[b-vss47meowj] {
        border-color: rgba(255,255,255,0.3);
    }

        .ms-beachhead-target .ms-target-ring[b-vss47meowj]::before {
            border-color: rgba(255,255,255,0.4);
        }

    .ms-beachhead-target .ms-target-dot[b-vss47meowj] {
        background: #fff;
        box-shadow: 0 0 8px rgba(255,255,255,0.5);
    }

/* ── Target Indicator ── */
.ms-target-ring[b-vss47meowj] {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    animation: ms-pulse-b-vss47meowj 2.5s ease-in-out infinite;
}

    .ms-target-ring[b-vss47meowj]::before {
        content: '';
        position: absolute;
        inset: 4px;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 50%;
    }

.ms-target-dot[b-vss47meowj] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

@keyframes ms-pulse-b-vss47meowj {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.08);
    }
}

/* ── Subset Bar ── */
.ms-subset-bar[b-vss47meowj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-lt);
    font-size: 11px;
    height: 32px;
}

.ms-click-hint[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-5);
    transition: opacity .2s;
}

    .ms-click-hint i[b-vss47meowj] {
        font-size: 10px;
        opacity: 0.5;
    }

    .ms-click-hint.dim[b-vss47meowj] {
        opacity: 0.3;
    }

.ms-subset-hint[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
}

    .ms-subset-hint i[b-vss47meowj] {
        font-size: 10px;
        opacity: 0.4;
    }


/* ═══════════════════════════════
   TWO-COLUMN INFO GRID
   ═══════════════════════════════ */
.ms-info-grid[b-vss47meowj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--raised);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 0.75rem 0.75rem;
    overflow: hidden;
    min-height: 340px;
}

.ms-info-col[b-vss47meowj] {
    padding: 24px;
}

.ms-info-profile[b-vss47meowj] {
    border-right: 1px solid var(--border-lt);
    background: var(--raised);
}

.ms-info-detail[b-vss47meowj] {
    background: var(--background-secondary);
}

.ms-info-header[b-vss47meowj] {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-bottom: 16px;
}

.ms-info-header-tier[b-vss47meowj] {
    margin-bottom: 12px;
}

/* Profile rows */
.ms-profile-grid[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ms-profile-row[b-vss47meowj] {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-lt);
}

    .ms-profile-row:last-child[b-vss47meowj] {
        border-bottom: none;
    }

.ms-profile-row-body[b-vss47meowj] {
    flex: 1;
    min-width: 0;
}

.ms-profile-row-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-5);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ms-profile-row-label[b-vss47meowj]::before {
        content: '—';
        color: var(--ink-6);
        font-weight: var(--font-weight-regular);
    }

.ms-profile-row-value[b-vss47meowj] {
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
    line-height: 1.5;
    padding-left: 18px;
}

.ms-structure-badge[b-vss47meowj] {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: 1px;
    letter-spacing: 0.02em;
    background: var(--tier-1-bg);
    color: var(--ink-3);
    border: 1px solid var(--border);
}

    .ms-structure-badge.badge-neutral[b-vss47meowj] {
        background: var(--tier-1-bg);
        color: var(--ink-3);
        border-color: var(--border);
    }

    .ms-structure-badge.badge-info[b-vss47meowj] {
        background: var(--info-surface);
        color: var(--info);
        border-color: var(--info-border);
    }

    .ms-structure-badge.badge-warn[b-vss47meowj] {
        background: var(--warning-surface);
        color: var(--warning-dark);
        border-color: var(--warning-border);
    }

    .ms-structure-badge.badge-danger[b-vss47meowj] {
        background: var(--danger-surface);
        color: var(--danger);
        border-color: var(--danger-border);
    }

    .ms-structure-badge.badge-success[b-vss47meowj] {
        background: var(--success-surface);
        color: var(--success);
        border-color: var(--success-border);
    }


/* ═══════════════════════════════
   TIER DETAIL PANEL (Unified)
   ═══════════════════════════════ */
.ms-tier-panel[b-vss47meowj] {
    animation: ms-slideIn-b-vss47meowj .25s cubic-bezier(.33,1,.68,1);
}

/* ── Panel Header with Badge ── */
.ms-panel-header[b-vss47meowj] {
    margin-bottom: 16px;
}

.ms-panel-badge[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.ms-badge-indicator[b-vss47meowj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ms-badge-label[b-vss47meowj] {
    line-height: 1;
}

/* Tier-specific badge colors — visualization semantics */
.ms-panel-badge.t-tam[b-vss47meowj] {
    background: var(--tier-1-bg);
    color: var(--ink-4);
}

    .ms-panel-badge.t-tam .ms-badge-indicator[b-vss47meowj] {
        background: var(--ink-7);
    }

.ms-panel-badge.t-sam[b-vss47meowj] {
    background: var(--tier-2-bg);
    color: var(--ink-3);
}

    .ms-panel-badge.t-sam .ms-badge-indicator[b-vss47meowj] {
        background: var(--ink-6);
    }

.ms-panel-badge.t-som[b-vss47meowj] {
    background: var(--tier-3-bg);
    color: var(--ink-2);
}

    .ms-panel-badge.t-som .ms-badge-indicator[b-vss47meowj] {
        background: var(--ink-4);
    }

.ms-panel-badge.t-beachhead[b-vss47meowj] {
    background: var(--tier-deep-bg);
    color: #fff;
}

    .ms-panel-badge.t-beachhead .ms-badge-indicator[b-vss47meowj] {
        background: #fff;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    }

/* ── Panel Headline ── */
.ms-panel-headline[b-vss47meowj] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ms-panel-value[b-vss47meowj] {
    font-size: 32px;
    font-weight: var(--font-weight-extrabold);
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}

.ms-panel-sub[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-5);
    font-weight: var(--font-weight-medium);
}

/* ── Panel Content ── */
.ms-panel-content[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ms-panel-definition[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
    margin: 0;
}

/* ── Insight Box ── */
.ms-panel-insight[b-vss47meowj] {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--raised);
    border: 1px solid var(--border-lt);
    border-radius: 8px;
}

.ms-insight-icon[b-vss47meowj] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tier-1-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ms-insight-icon i[b-vss47meowj] {
        font-size: 13px;
        color: var(--ink-4);
    }

.ms-insight-body[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ms-insight-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-4);
}

.ms-insight-text[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* ── Section (Assumptions, Expansion, etc.) ── */
.ms-panel-section[b-vss47meowj] {
    background: var(--raised);
    border: 1px solid var(--border-lt);
    border-radius: 8px;
    overflow: hidden;
}

.ms-section-header[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-lt);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-4);
}

    .ms-section-header i[b-vss47meowj] {
        font-size: 10px;
        opacity: 0.6;
    }

/* ── Expansion Path ── */
.ms-expansion-path[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px;
    flex-wrap: wrap;
}

.ms-expansion-step[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--tier-1-bg);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
}

    .ms-expansion-step i[b-vss47meowj] {
        font-size: 10px;
        color: var(--ink-5);
        opacity: 0.7;
    }

.ms-expansion-path .ms-expansion-step:not(:last-child)[b-vss47meowj]::after {
    content: '\2192';
    margin-left: 12px;
    color: var(--ink-6);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    opacity: 0.5;
}

/* ═══════════════════════════════
   SCOPE: Geographies × Segments
   ═══════════════════════════════ */
.ms-scope[b-vss47meowj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.ms-scope-row[b-vss47meowj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ms-scope-label[b-vss47meowj] {
    flex-shrink: 0;
    width: 80px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-5);
    padding-top: 3px;
}

.ms-scope-pills[b-vss47meowj] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ms-scope-pill[b-vss47meowj] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    padding: 5px 11px;
    border-radius: 6px;
    white-space: nowrap;
    background: var(--raised);
    color: var(--ink-2);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    letter-spacing: -0.01em;
}

    /* Category dot accent */
    .ms-scope-pill.geo[b-vss47meowj]::before,
    .ms-scope-pill.seg[b-vss47meowj]::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: 1px;
    }

    .ms-scope-pill.geo[b-vss47meowj]::before {
        background: var(--ink-5);
    }

    .ms-scope-pill.seg[b-vss47meowj]::before {
        background: var(--accent);
    }

    .ms-scope-pill:hover[b-vss47meowj] {
        border-color: var(--ink-6);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    }


/* ═══════════════════════════════
   ASSUMPTIONS — Compact Pill Style
   ═══════════════════════════════ */
.ms-assumptions-compact[b-vss47meowj] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-lt);
}

.ms-assumptions-label[b-vss47meowj] {
    display: block;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--ink-5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

    .ms-assumptions-label i[b-vss47meowj] {
        margin-right: 4px;
        font-size: 9px;
        opacity: 0.6;
    }

.ms-assumptions-pills[b-vss47meowj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ms-assumption-pill[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--raised);
    border: 1px solid var(--border);
    cursor: default;
    transition: border-color 0.2s;
}

    .ms-assumption-pill:hover[b-vss47meowj] {
        border-color: var(--ink-5);
    }

    /* Tier indicated by dot, not colored border */
    .ms-assumption-pill.t-tam[b-vss47meowj]::before,
    .ms-assumption-pill.t-sam[b-vss47meowj]::before,
    .ms-assumption-pill.t-som[b-vss47meowj]::before,
    .ms-assumption-pill.t-beachhead[b-vss47meowj]::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .ms-assumption-pill.t-tam[b-vss47meowj]::before {
        background: var(--ink-7);
    }

    .ms-assumption-pill.t-sam[b-vss47meowj]::before {
        background: var(--ink-6);
    }

    .ms-assumption-pill.t-som[b-vss47meowj]::before {
        background: var(--ink-4);
    }

    .ms-assumption-pill.t-beachhead[b-vss47meowj]::before {
        background: var(--ink-2);
    }

.ms-ap-key[b-vss47meowj] {
    font-weight: var(--font-weight-bold);
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 10px;
}

.ms-ap-val[b-vss47meowj] {
    font-weight: var(--font-weight-bold);
    color: var(--ink-2);
}


/* ═══════════════════════════════
   INTEL STRIP
   ═══════════════════════════════ */
.ms-intel-strip[b-vss47meowj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 1rem;
}

.ms-intel-cell[b-vss47meowj] {
    padding: 18px 24px;
}

    .ms-intel-cell + .ms-intel-cell[b-vss47meowj] {
        border-left: 1px solid var(--border-lt);
    }

.ms-signals-title[b-vss47meowj], .ms-method-title[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-6);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ms-signals-title i[b-vss47meowj], .ms-method-title i[b-vss47meowj] {
        font-size: 9px;
        opacity: 0.5;
    }

.ms-signal-chips[b-vss47meowj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ═══ UNIFIED CHIP STYLE ═══ */
.ms-signal-chip[b-vss47meowj],
.ms-method-src-chip[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    color: var(--ink-3);
    transition: all .15s;
}

    .ms-signal-chip:hover[b-vss47meowj],
    .ms-method-src-chip:hover[b-vss47meowj] {
        border-color: var(--ink-6);
        background: rgba(0,0,0,0.05);
    }

    .ms-signal-chip i[b-vss47meowj] {
        font-size: 9px;
    }

    .ms-signal-chip.sig-up i[b-vss47meowj] {
        color: var(--green);
    }

    .ms-signal-chip.sig-hot i[b-vss47meowj] {
        color: var(--amber);
    }

    .ms-signal-chip.sig-new i[b-vss47meowj] {
        color: var(--ink-4);
    }

a.ms-method-src-chip[b-vss47meowj] {
    text-decoration: none;
    cursor: pointer;
    color: var(--ink-3);
}

    a.ms-method-src-chip i[b-vss47meowj] {
        font-size: 8px;
        opacity: 0;
        color: var(--ink-5);
        transition: opacity .2s, transform .2s;
        margin-left: 1px;
    }

    a.ms-method-src-chip:hover[b-vss47meowj] {
        background: var(--border);
        color: var(--ink-2);
    }

        a.ms-method-src-chip:hover i[b-vss47meowj] {
            opacity: 1;
            transform: translateX(1px);
        }

.ms-method-summary[b-vss47meowj] {
    font-size: 12.5px;
    color: var(--ink-4);
    line-height: 1.5;
    margin-bottom: 10px;
}

.ms-method-sources[b-vss47meowj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ms-method-src-label[b-vss47meowj] {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 2px;
}


/* ═══════════════════════════════
   DEEP REPORT CTA
   ═══════════════════════════════ */
.ms-report-cta[b-vss47meowj] {
    margin-top: 1.5rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

    .ms-report-cta:hover[b-vss47meowj] {
        border-color: var(--ink-6);
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }

.ms-report-cta-content[b-vss47meowj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ms-report-cta-left[b-vss47meowj] {
    flex: 1;
    min-width: 0;
}

.ms-report-cta-badge[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-5);
    margin-bottom: 8px;
}

    .ms-report-cta-badge i[b-vss47meowj] {
        font-size: 11px;
    }

.ms-report-cta-title[b-vss47meowj] {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ms-report-cta-desc[b-vss47meowj] {
    font-size: var(--text-base);
    color: var(--ink-5);
    line-height: 1.55;
    margin: 0;
}

.ms-report-cta-right[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ms-report-cta-btn[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
    white-space: nowrap;
}

    .ms-report-cta-btn:hover[b-vss47meowj] {
        box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
        transform: translateY(-1px);
    }

    .ms-report-cta-btn:active[b-vss47meowj] {
        transform: translateY(0);
    }

    .ms-report-cta-btn:disabled[b-vss47meowj] {
        opacity: .7;
        cursor: default;
        transform: none;
    }

    .ms-report-cta-btn i[b-vss47meowj] {
        font-size: 13px;
    }

.ms-report-cta-meta[b-vss47meowj] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ms-report-cta-price[b-vss47meowj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--ink-3);
    background: var(--tier-1-bg);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

    .ms-report-cta-price i[b-vss47meowj] {
        font-size: 10px;
        opacity: 0.7;
    }

.ms-report-cta-time[b-vss47meowj] {
    font-size: 11px;
    color: var(--ink-6);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .ms-report-cta-time i[b-vss47meowj] {
        font-size: 10px;
    }


/* ═══════════════════════════════
   DISCLAIMER  (PATCH 3 — italic note, no warning chrome)
   ─────────────────────────────── */
.ms-disclaimer[b-vss47meowj] {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    margin-top: 1.25rem;
    padding: 0;
    padding-left: 2px;
    background: transparent;
    border: none;
    font-size: 11px;
    line-height: 1.55;
    color: var(--ink-5);
    font-style: italic;
}

    .ms-disclaimer i[b-vss47meowj] {
        flex-shrink: 0;
        margin-top: 0.1875rem;
        color: var(--ink-6);
        font-size: 10px;
        opacity: 0.7;
    }


/* ═══════════════════════════════
   PROCESSING STATE
   ═══════════════════════════════ */
.ms-processing[b-vss47meowj] {
    font-style: italic;
    font-weight: var(--font-weight-regular);
    background: linear-gradient( 90deg, var(--ink-7) 0%, var(--ink-5) 40%, var(--ink-3) 50%, var(--ink-5) 60%, var(--ink-7) 100% );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ms-shimmer-b-vss47meowj 2.5s ease-in-out infinite;
}

@keyframes ms-shimmer-b-vss47meowj {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.ms-hero-card .ms-processing[b-vss47meowj] {
    font-size: 12px;
}


/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 1100px) {
    .ms-panel-value[b-vss47meowj] {
        font-size: 28px;
    }

    .ms-sam-layer[b-vss47meowj] {
        min-width: 260px;
    }

    .ms-som-layer[b-vss47meowj] {
        min-width: 160px;
    }

    .ms-beachhead-layer[b-vss47meowj] {
        min-width: 100px;
    }
}

@media (max-width: 900px) {
    .ms-info-grid[b-vss47meowj] {
        grid-template-columns: 1fr;
    }

    .ms-info-profile[b-vss47meowj] {
        border-right: none;
        border-bottom: 1px solid var(--border-lt);
    }

    .ms-info-detail[b-vss47meowj] {
        min-height: 280px;
    }

    .ms-sam-layer[b-vss47meowj] {
        width: 70% !important;
        min-width: 220px;
    }

    .ms-som-layer[b-vss47meowj] {
        width: 70% !important;
        min-width: 160px;
    }

    .ms-beachhead-layer[b-vss47meowj] {
        width: 70% !important;
        min-width: 100px;
    }

    .ms-tier-full[b-vss47meowj] {
        display: none;
    }

    .ms-tier-divider[b-vss47meowj] {
        display: none;
    }

    .ms-tier-pct-wrap[b-vss47meowj] {
        margin-left: 0;
    }

    /* PATCH 1 (responsive): banner stacks; accent shifts to top rule */
    .ms-strategy-banner[b-vss47meowj] {
        flex-direction: column;
        border-left: 1px solid var(--border);
        border-top: 3px solid var(--accent);
        border-radius: 0 0 8px 8px;
    }

    .ms-strategy-posture[b-vss47meowj] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        border-right: none;
        border-bottom: 1px solid var(--border-lt);
    }

    .ms-strategy-body[b-vss47meowj] {
        padding: 14px 18px;
    }

    .ms-hero-cards[b-vss47meowj] {
        grid-template-columns: 1fr 1fr;
    }

    .ms-hero-card-window[b-vss47meowj] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .ms-defs.show[b-vss47meowj] {
        flex-direction: column;
        gap: 10px;
    }

    .ms-defs-i[b-vss47meowj] {
        border-right: none !important;
        border-bottom: 1px solid var(--border-lt);
        padding: 0 0 10px 0 !important;
    }

        .ms-defs-i:last-child[b-vss47meowj] {
            border-bottom: none;
        }

    .ms-hero-cards[b-vss47meowj] {
        grid-template-columns: 1fr;
    }

    .ms-intel-strip[b-vss47meowj] {
        grid-template-columns: 1fr;
    }

    .ms-intel-cell + .ms-intel-cell[b-vss47meowj] {
        border-left: none;
        border-top: 1px solid var(--border-lt);
    }

    .ms-tam-host[b-vss47meowj] {
        padding: 14px 16px;
    }

    .ms-tam-bar[b-vss47meowj], .ms-sam-bar[b-vss47meowj] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ms-tier-cagr[b-vss47meowj] {
        display: none;
    }

    .ms-pct-bar[b-vss47meowj] {
        display: none;
    }

    .ms-subset-bar[b-vss47meowj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        height: auto;
    }

    .ms-panel-value[b-vss47meowj] {
        font-size: 26px;
    }

    .ms-panel-insight[b-vss47meowj] {
        padding: 10px 12px;
    }

    .ms-beachhead-layer[b-vss47meowj] {
        min-width: 80px;
    }

    .ms-beachhead-target[b-vss47meowj] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 680px) {
    .ms-report-cta-content[b-vss47meowj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ms-report-cta-right[b-vss47meowj] {
        align-items: flex-start;
    }

    .ms-report-cta-meta[b-vss47meowj] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ms-sam-layer[b-vss47meowj] {
        width: 85% !important;
        min-width: unset;
    }

    .ms-som-layer[b-vss47meowj] {
        width: 80% !important;
        min-width: unset;
    }

    .ms-beachhead-layer[b-vss47meowj] {
        width: 75% !important;
        min-width: unset;
    }

    .ms-tier-pct-wrap[b-vss47meowj] {
        display: none;
    }

    .ms-strategy-posture[b-vss47meowj], .ms-strategy-body[b-vss47meowj] {
        padding: 12px 14px;
    }

    .ms-posture-value[b-vss47meowj] {
        font-size: 14px;
    }

    .ms-strategy-headline[b-vss47meowj] {
        font-size: 12.5px;
    }

    .ms-strategy-rationale[b-vss47meowj] {
        font-size: 11px;
    }

    .ms-hero-cards[b-vss47meowj] {
        grid-template-columns: 1fr;
    }

    .ms-hero-card-window[b-vss47meowj] {
        grid-column: auto;
    }

    .ms-window-time[b-vss47meowj] {
        font-size: 18px;
    }

    .ms-trigger-chip[b-vss47meowj] {
        font-size: 9px;
        padding: 2px 6px;
    }

    .ms-scope-pill[b-vss47meowj] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .ms-assumption-pill[b-vss47meowj] {
        font-size: 10px;
        padding: 4px 8px;
    }

    .ms-ap-key[b-vss47meowj] {
        font-size: 9px;
    }
}

@media (max-width: 520px) {
    .ms-tam-host[b-vss47meowj] {
        padding: 12px;
    }

    .ms-tam-bar[b-vss47meowj] {
        font-size: 12px;
    }

        .ms-tam-bar .ms-tier-acr[b-vss47meowj], .ms-tam-bar .ms-tier-value[b-vss47meowj] {
            font-size: 12px;
        }

    .ms-sam-bar[b-vss47meowj] {
        font-size: 11px;
    }

        .ms-sam-bar .ms-tier-acr[b-vss47meowj], .ms-sam-bar .ms-tier-value[b-vss47meowj] {
            font-size: 11px;
        }

    .ms-som-bar[b-vss47meowj] {
        font-size: 10px;
    }

        .ms-som-bar .ms-tier-acr[b-vss47meowj], .ms-som-bar .ms-tier-value[b-vss47meowj] {
            font-size: 10px;
        }

    .ms-beachhead-bar[b-vss47meowj] {
        font-size: 9px;
    }

        .ms-beachhead-bar .ms-tier-acr[b-vss47meowj], .ms-beachhead-bar .ms-tier-value[b-vss47meowj] {
            font-size: 9px;
        }

    .ms-subset-hint[b-vss47meowj] {
        display: none;
    }

    .ms-panel-value[b-vss47meowj] {
        font-size: 22px;
    }

    .ms-panel-badge[b-vss47meowj] {
        padding: 6px 10px;
        font-size: 10px;
    }

    .ms-panel-insight[b-vss47meowj] {
        gap: 10px;
    }

    .ms-insight-icon[b-vss47meowj] {
        width: 24px;
        height: 24px;
    }

        .ms-insight-icon i[b-vss47meowj] {
            font-size: 10px;
        }

    .ms-beachhead-target[b-vss47meowj] {
        display: none;
    }

    .ms-fold-toggle[b-vss47meowj] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .ms-proportion-area[b-vss47meowj] {
        min-height: 170px;
    }

    .ms-scope-label[b-vss47meowj] {
        font-size: 9px;
        width: 64px;
    }

    .ms-scope-pill[b-vss47meowj] {
        font-size: 9px;
        padding: 3px 7px;
    }

    .ms-scope[b-vss47meowj] {
        gap: 6px;
        margin-bottom: 10px;
    }

    .ms-assumptions-pills[b-vss47meowj] {
        gap: 4px;
    }

    .ms-assumption-pill[b-vss47meowj] {
        padding: 3px 7px;
        gap: 4px;
    }

    .ms-ap-key[b-vss47meowj] {
        font-size: 8px;
    }

    .ms-ap-val[b-vss47meowj] {
        font-size: 10px;
    }
}
/* /Components/ProdComponents/NewAinnaSmartIdeaViewer.razor.rz.scp.css */
/* ============================================
   RESERVED SEAMS — kept while markup-dead
   ────────────────────────────────────────────
   ihv-validation-prompt / -chip and the
   ihv-evaluators / ihv-strengthen families are
   not rendered by current markup, but the
   component reserves them (GetValidationPrompt
   awaiting wire-up; mock evaluator panel
   awaiting the aggregation backend). Their
   rules survive the dead-code sweep on purpose.
   ============================================ */

/* ===========================
   COMPONENT-SCOPED VARS
   =========================== */

.page-wrapper[b-6g4n0qxqta] {
    /* Component-scoped vars — not in global tokens */
    /* Section warm tones — alternating page rhythm */
    --section-warm: linear-gradient(180deg, #fcfbf9 0%, #f9f7f4 100%);
    --section-warm-border: #efece6;
    --section-warm-deep: linear-gradient(180deg, #faf8f5 0%, #f6f3ef 100%);
    /* Pill button surfaces */
    --pill-bg: linear-gradient(135deg, var(--raised) 0%, var(--surface) 100%);
    --pill-icon-bg: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--border) 30%, var(--surface)) 100%);
    --pill-hover-icon-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, white) 0%, color-mix(in srgb, var(--accent) 10%, white) 100%);
    /* Collapsed summary surface */
    --summary-bg: linear-gradient(135deg, color-mix(in srgb, var(--surface) 80%, white) 0%, var(--surface) 100%);
}

/* ===========================
   PAGE WRAPPER
   =========================== */

#page-top[b-6g4n0qxqta] {
    position: absolute;
    top: 0;
    left: 0;
}

.page-wrapper[b-6g4n0qxqta] {
    position: relative;
    min-height: 100vh;
}

    /* Viewer surface the header card floats on. Matches the workspace
   panel tint applied below via the dusk sibling selector, so the dark
   header card and the lighter panels below read as floating on one
   continuous surface. Scoped to the dusk header; the cream fallback
   theme is unaffected. */

    .page-wrapper:has(.section-header[data-theme="dark"])[b-6g4n0qxqta] {
        background: #ffffff;
    }

/* ===========================
   HEADER BYLINE + STATUS BADGES
   =========================== */

/* ===========================
   SECTIONS — Layout & Backgrounds
   =========================== */

.section[b-6g4n0qxqta] {
    width: 100%;
    padding: 0;
}

.section-inner[b-6g4n0qxqta] {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Shared gutter for the whole page card stack — header card and
   below-the-fold tab panels both inherit 2.5rem horizontal padding
   so their content edges line up vertically across the fold. The
   vertical values differ by section (header card holds 1.25rem top
   for breathing room above the title; tab panels override top to 0
   so the SectionHero hugs the tab strip). */

.section .section-inner[b-6g4n0qxqta] {
    padding: 1.25rem 2.5rem 1.5rem;
}

/* Tab panels: shared v-space between the tab strip and the panel
   content — empty states and filled content alike (the former
   hug-the-strip doctrine is retired by decision). Stacks on the
   bar's own margin-bottom. Horizontal padding inherits 2.5rem from
   the rule above — keeping below-the-fold content aligned with the
   header. ONE knob for every tab; per-panel top margins stay zero
   (see .iv-elements, reconciled in the same pass). */

.section.iv-tab-panel .section-inner[b-6g4n0qxqta] {
    padding-top: 2rem;
}

@media (max-width: 720px) {
    .section.iv-tab-panel .section-inner[b-6g4n0qxqta] {
        padding-top: 1.25rem;
    }
}

/* Tab panels fill the viewport vertically. With short content the
   panel still extends to the page bottom so the workspace doesn't
   feel cut off above empty page surface. The 240px offset accounts
   for the cream header card + the analysis-tabs strip; longer
   content (e.g., a personas panel with delete option at the bottom)
   exceeds the viewport and requires scrolling, which is intentional. */

.section.iv-tab-panel[b-6g4n0qxqta] {
    min-height: calc(100vh - 240px);
}

/* ─── Header zone — the contained command card ───────────────────
   The section IS the card. It no longer spans full width: a small
   all-around margin lets the viewer surface show around it, the
   radius + layered shadow lift it off that surface, and the brand
   top-edge spine sits inset within the rounded corners. The inner
   .ih-v3 wrapper carries no surface of its own — the section owns
   the elevation. */

.section-header[b-6g4n0qxqta] {
    position: relative;
    /* width:auto (NOT the .section width:100%): with width:100% plus the
       all-around margin, the card border-box equals the container width
       and the margins push the right edge past it, cropping the right
       corners. auto lets the margin inset the card symmetrically. */
    width: auto;
    background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 100% at 50% 0%, rgba(240, 12, 113, 0.04) 0%, transparent 60%), linear-gradient(180deg, #f9f6ef 0%, #efeadf 100%);
    padding-top: 1.5rem;
    /* Bottom padding zeroed so the tab rail sits flush on the card's
       bottom border (folder-tab baseline). Was 1rem. */
    padding-bottom: 0;
    /* CONTAINED CARD — the header is a self-contained card that floats
       on the viewer surface rather than a full-bleed band. A small
       all-around margin reveals the surface around it; the radius plus
       a layered shadow give it a lifted, contained feel so it reads as
       part of the viewer, not a detached section. The former full-bleed
       border-bottom "fold" is replaced by a hairline border wrapping
       the whole card. */
    margin: 0.875rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px -10px rgba(15, 23, 42, 0.14), 0 24px 48px -28px rgba(15, 23, 42, 0.18);
}

    /* Brand top-edge spine — inset to sit within the card's rounded
       corners instead of overrunning the radius. */

    .section-header[b-6g4n0qxqta]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(240, 12, 113, 0.32) 25%, rgba(240, 12, 113, 0.55) 50%, rgba(240, 12, 113, 0.32) 75%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

/* ─── Workspace zone boundary — single source of truth ───────────
   The pill strip starts the workspace. A hairline along its top
   plus a soft inner shadow at the very top edge sells "this is a
   distinct layer below the header." */

.section-assessment[b-6g4n0qxqta] {
    /* Now used only as a Judge tab panel; treat as workspace.
       Warm-neutral page tone — compatible with the cream header
       above, distinct enough that header reads as the lifted
       element, quiet enough that content cards lift cleanly. */
    background: #f4f2ed;
    padding: 0 0 2rem 0;
    border-bottom: none;
    box-shadow: none;
}

/* All four analytical section types share the workspace surface.
   The page reads as two zones: warm cream header above, warm-
   neutral workspace below. Same colour family, distinct tones —
   no temperature clash at the boundary. */

.section-elements[b-6g4n0qxqta],
.section-personas[b-6g4n0qxqta],
.section-market-outlook[b-6g4n0qxqta],
.section-competitive[b-6g4n0qxqta] {
    background: #f4f2ed;
    padding: 0 0 2rem 0;
    border-bottom: none;
    box-shadow: none;
}

/* ───────────────────────────────
   SECTION TITLE ROW (shared)
   ─────────────────────────────── */

.section-title-row[b-6g4n0qxqta] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.section-title-content[b-6g4n0qxqta] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.section-title[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 1.0175rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-7);
    margin: 0;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

/* Stale content flag */

.section-stale-flag[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--warning-surface);
    border: 1px solid var(--warning-border);
    border-radius: 1rem;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--warning-dark);
    cursor: help;
    animation: staleIn-b-6g4n0qxqta 0.3s ease-out;
    flex-shrink: 0;
}

    .section-stale-flag i[b-6g4n0qxqta] {
        font-size: var(--text-2xs);
        color: var(--warning);
    }

    .section-stale-flag:hover[b-6g4n0qxqta] {
        background: #fef3c7;
        border-color: #fcd34d;
    }

@keyframes staleIn-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ───────────────────────────────
   SECTION PILL BUTTONS (shared)
   Matches OpportunityAssessmentPanel
   expand-collapse-btn pill style
   ─────────────────────────────── */

.sh-pill-btn[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: var(--pill-bg);
    border: 1px solid var(--border);
    border-radius: 2rem;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

    .sh-pill-btn:hover[b-6g4n0qxqta] {
        background: var(--pill-bg);
        border-color: var(--ink-7);
        color: var(--ink-3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .sh-pill-btn:active[b-6g4n0qxqta] {
        transform: translateY(0);
    }

    .sh-pill-btn .pill-icon[b-6g4n0qxqta] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        background: var(--pill-icon-bg);
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .sh-pill-btn .pill-icon i[b-6g4n0qxqta] {
            font-size: 0.5rem;
            color: var(--ink-6);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
        }

    .sh-pill-btn:hover .pill-icon[b-6g4n0qxqta] {
        background: var(--pill-hover-icon-bg);
    }

        .sh-pill-btn:hover .pill-icon i[b-6g4n0qxqta] {
            color: var(--accent-deep);
        }

/* ═══════════════════════════════════════════════════════════════
   IDEA ELEMENTS — explicit-row column grid
   ───────────────────────────────────────────────────────────────
   Replaces the older masonry (CSS columns) layout. The masonry
   reflowed cards as content grew, which hurt every edit: a click
   into Card A could push Card B into a different column, breaking
   the user's spatial memory mid-task.

   New approach has two intentionally separate containers:

     .iv-elements-hero — executive summary, 75% width on desktop,
        100% on narrow. Editorial typography to read as the synthesis.

     .iv-elements-columns — 3-col CSS Grid with grid-auto-flow:
        column and 3 explicit rows. Markup order maps directly to
        column placement (1–3 → col 1, 4–6 → col 2, 7–9 → col 3).
        align-items: start so cards never stretch to row height —
        when a card grows, only its column extends downward; siblings
        stay put.

   Trade-off accepted: column heights can be visibly uneven once
   content fills in. That's the price of zero-reflow. Accepted.
   ═══════════════════════════════════════════════════════════════ */

.iv-elements[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    /* Top space comes from the SHARED tab-panel padding
       (.section.iv-tab-panel .section-inner) — uniform across every
       tab, empty or filled. gap separates the hero from the grid,
       ADDITIVE to the card's own bottom margin (card internals own
       their rhythm; the exact split is settled in the
       IdeaComponentCard pass). */
    gap: 0.5rem;
}

/* Hero band — exec summary container, full row width.
   Editorial-feel typography on the card itself (via the IsHero prop
   inside IdeaComponentCard plus the accent rail below) carries the
   "this is the synthesis" signal — it doesn't need a width constraint
   to read as distinct from the dimension cards beneath. */

.iv-elements-hero[b-6g4n0qxqta] {
    width: 100%;
}

    /* Hero card — visual emphasis on the outer card element.
   Uses the same multi-selector "shotgun" pattern as the original
   .elements-grid .card-executive rule so the styling lands on
   whichever class hook IdeaComponentCard happens to emit for a
   primary/executive card. The accent rail at top marks it as the
   synthesis above the dimensions. */

    .iv-elements-hero [data-card-type="executive"][b-6g4n0qxqta] {
        position: relative;
    }

        .iv-elements-hero [data-card-type="executive"][b-6g4n0qxqta]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, transparent) 50%, transparent 100%);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            pointer-events: none;
        }

/* The 3-col grid — outer is a 3-cell grid, each cell hosts a flex
   column. Putting the cards inside dedicated flex containers (rather
   than relying on grid-auto-flow: column) is what eliminates the
   variable vertical gap: with the old approach, every grid row
   stretched to its tallest item *across all three columns*, so a
   short card in column B would leave dead space below itself if
   column A's card in the same row was taller. Flex columns own their
   own internal rhythm — gap is consistent within each column, and
   columns are free to be different heights. */

.iv-elements-columns[b-6g4n0qxqta] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem; /* was 1.25 — the grid was reading dense; also the wrap-row gap at 2-col */
    align-items: start;
}

.iv-elements-column[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* ADDITIVE to the card's own margin — intra-column total = card-margin + 0.5rem */
    min-width: 0;
}

    /* Defensive shrink-to-fit for the card descendants.
   When the viewport shrinks, the grid track shrinks, .iv-elements-column
   shrinks (min-width: 0 set above), and the flex card children should
   in turn shrink — but by default flex/grid children have min-width: auto
   which means "intrinsic content size, not below". Any element inside the
   card that has its own intrinsic width (an input, an icon block, a long
   word) blocks the shrink and content gets clipped or overflows.

   This rule is a hammer: every direct child of a column gets min-width:0
   and max-width:100% with border-box sizing, so the chain of resize signals
   can actually propagate down. Doesn't fix everything inside IdeaComponentCard
   — long unbroken text or an input without width:100% will still overflow —
   but it covers the common case. The proper fix lives inside the card
   component itself. */

    .iv-elements-column > *[b-6g4n0qxqta] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

/* 3 → 2 cols. Columns wrap naturally: cols 1 + 2 fill row 1, col 3
   wraps to row 2.

   Known quirk: when cols 1 and 2 have different heights, the gap
   above col 3 is measured from the *taller* of the two — so visible
   whitespace under the shorter column is `(taller height − shorter
   height) + row gap`. This is intrinsic to wrapping grids/flexes
   with uneven children and there's no clean fix that preserves
   fixed column assignment. Acceptable trade-off: zero-reflow on
   edit (the original goal) outweighs occasionally uneven wrap gaps. */

@media (max-width: 1440px) {
    .iv-elements-columns[b-6g4n0qxqta] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 2 → 1 col. All three column wrappers stack vertically; cards
   inside each retain their internal stacking. Reading order becomes
   What → Who → Why top-to-bottom, which is the correct narrative
   sequence for a narrow viewport anyway. */

@media (max-width: 720px) {
    .iv-elements-columns[b-6g4n0qxqta] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .iv-elements-column[b-6g4n0qxqta] {
        gap: 0.375rem;
    }
}

/* ===========================
   PREMIUM LOCK STATE
   =========================== */

.premium-lock-card[b-6g4n0qxqta] {
    /* Aligned to .sh-ready -- same structural envelope so locked /
       not-ready / running / failed all share one visual container and
       differ only in content. Min-height comes from the shared rule
       further down the file (added .premium-lock-card to the list). */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    animation: shFadeIn-b-6g4n0qxqta 0.4s ease-out;
}

.premium-lock-watermark[b-6g4n0qxqta] {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14rem;
    color: var(--ink-7);
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
}

    .premium-lock-watermark i[b-6g4n0qxqta] {
        display: block;
    }

.premium-lock-content[b-6g4n0qxqta] {
    /* Match .sh-ready-body: same flex stack, same max-width so wrapped
       lines break at the same column across states. */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 540px;
}

.premium-lock-title[b-6g4n0qxqta] {
    /* Match .sh-ready-title exactly so locked headers read the same
       as not-ready / failed / etc. Editorial display font, fluid clamp,
       balanced wrapping for short multi-word titles. */
    font-family: 'Space Grotesk', var(--font);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.022em;
    line-height: 1.2;
    text-wrap: balance;
}

.premium-lock-text[b-6g4n0qxqta] {
    /* Match .sh-ready-text: same size, same ink-4 tone, same line-height. */
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-regular);
    color: var(--ink-4);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    max-width: 540px;
}

/* Spacing between stacked buttons in lock card */

.premium-lock-content .btn + .btn[b-6g4n0qxqta] {
    margin-top: 0.375rem;
}

/* ───────────────────────────────
   HEADER ACTIONS (Collapse + Re-analyze + Top)
   ─────────────────────────────── */

.sh-header-actions[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ───────────────────────────────
   BOTTOM EXPAND HINT (shared)
   Whisper-quiet "Show more ▾" at
   the foot of any collapsed section
   ─────────────────────────────── */

/* ───────────────────────────────
   READY STATE (Ready + Not Ready)
   ─────────────────────────────── */

.sh-ready[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    animation: shFadeIn-b-6g4n0qxqta 0.4s ease-out;
}

.sh-not-ready .sh-watermark[b-6g4n0qxqta] {
    opacity: 0.35;
}

.sh-not-ready .sh-ready-title[b-6g4n0qxqta] {
    color: var(--ink-3);
}

/* sh-not-ready--forming, sh-not-ready--awaiting, sh-watermark--forming,
   sh-forming-eyebrow, sh-forming-eyebrow-dot, and their keyframes were
   removed: both empty/forming sub-states now share the neutral base
   styling above, with only wording differences in the markup. */

.sh-watermark[b-6g4n0qxqta] {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14rem;
    color: var(--ink-7);
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
    transition: opacity 0.4s ease;
}

    .sh-watermark i[b-6g4n0qxqta] {
        display: block;
    }

.sh-ready-body[b-6g4n0qxqta] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 540px;
}

.sh-ready-title[b-6g4n0qxqta] {
    font-family: 'Space Grotesk', var(--font);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.022em;
    line-height: 1.2;
    text-wrap: balance;
}

.sh-ready-text[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-regular);
    color: var(--ink-4);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    max-width: 540px;
}

.sh-ready-capabilities[b-6g4n0qxqta] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.sh-ready-tag[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
}

    .sh-ready-tag i[b-6g4n0qxqta] {
        font-size: var(--text-2xs);
        color: var(--ink-6);
    }

/* ─── Maturity meter ───────────────────────────────────────
   Visual progress bar shown in NotReady empty states. Tells
   the user how close their idea is to unlocking the analysis,
   so they can see distance-to-value at a glance instead of
   parsing it out of a sentence. */

.sh-maturity-meter[b-6g4n0qxqta] {
    width: 100%;
    max-width: 360px;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sh-maturity-meter-track[b-6g4n0qxqta] {
    position: relative;
    width: 100%;
    height: 6px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.sh-maturity-meter-fill[b-6g4n0qxqta] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--accent-deep)) 0%, var(--accent) 100%);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sh-maturity-meter-row[b-6g4n0qxqta] {
    display: flex;
    /* Was space-between, which paired with a current/target two-child
       layout. Markup only renders the "current" span, so space-between
       leaves the caption flush-left under the bar. Centre keeps it
       aligned with the rest of the centred body. */
    justify-content: center;
    align-items: baseline;
    font-family: var(--font);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
}

.sh-maturity-meter-current[b-6g4n0qxqta] {
    color: var(--ink-3);
}

    .sh-maturity-meter-current strong[b-6g4n0qxqta] {
        font-family: var(--font-mono);
        font-size: 0.875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink);
        letter-spacing: -0.02em;
        text-transform: none;
        margin-right: 0.25rem;
    }

/* ─── Coach hint: animated cue back to the chat ─────────────────
   Sits where the CTA used to live in NotReady states. Not a button
   — a calm guide that draws the eye toward the conversation panel
   on the left, where the user picks up framing with Ainna. The
   arrow nudges leftward on a soft loop. */

.sh-coach-back[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 1rem 0.625rem 0.75rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--ink-5);
    max-width: 540px;
    /* Centre the wrapped text inside the span so the box reads as
       balanced. The leftward arrow keeps its flex-start position —
       it's a directional cue pointing back to the chat panel, so it
       belongs at the left of the box, not centred with the text. */
    text-align: center;
}

    .sh-coach-back i[b-6g4n0qxqta] {
        color: var(--accent);
        font-size: 1.125rem;
        flex-shrink: 0;
        animation: shCoachNudge-b-6g4n0qxqta 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .sh-coach-back strong[b-6g4n0qxqta] {
        color: var(--ink-3);
        font-weight: var(--font-weight-semibold);
    }

@keyframes shCoachNudge-b-6g4n0qxqta {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-6px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-coach-back i[b-6g4n0qxqta] {
        animation: none;
        opacity: 1;
    }
}

/* ───────────────────────────────
   RUNNING STATE — Minimal & Focused
   ─────────────────────────────── */

.sh-running[b-6g4n0qxqta] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 320px;
    animation: shFadeIn-b-6g4n0qxqta 0.4s ease-out;
}

    .sh-running .sh-watermark[b-6g4n0qxqta] {
        display: none;
    }

.sh-progress-hub[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.sh-main-spinner[b-6g4n0qxqta] {
    position: relative;
    width: 180px;
    height: 180px;
}

.sh-main-spinner-track[b-6g4n0qxqta] {
    position: absolute;
    inset: 0;
    border: 5px solid var(--surface);
    border-radius: 50%;
    background: var(--raised);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.03), 0 6px 30px rgba(0, 0, 0, 0.06);
}

.sh-main-spinner-fill[b-6g4n0qxqta] {
    position: absolute;
    inset: 0;
    border: 5px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    border-radius: 50%;
    animation: shMainSpin-b-6g4n0qxqta 2s linear infinite;
}

@keyframes shMainSpin-b-6g4n0qxqta {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.sh-main-spinner-glow[b-6g4n0qxqta] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
    animation: shGlowPulse-b-6g4n0qxqta 3s ease-in-out infinite;
}

@keyframes shGlowPulse-b-6g4n0qxqta {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

.sh-main-spinner-icon[b-6g4n0qxqta] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--border);
    animation: shIconColorPulse-b-6g4n0qxqta 2.5s ease-in-out infinite;
}

@keyframes shIconColorPulse-b-6g4n0qxqta {
    0%, 100% {
        color: var(--border);
        transform: scale(1);
    }

    50% {
        color: var(--accent-light);
        transform: scale(1.05);
    }
}

.sh-progress-status[b-6g4n0qxqta] {
    text-align: center;
    min-width: 280px;
}

.sh-progress-label[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
    margin-bottom: 0.5rem;
    min-height: 1.5em;
}

.sh-ellipsis[b-6g4n0qxqta] {
    display: inline-block;
    width: 1.5em;
    text-align: left;
}

    .sh-ellipsis[b-6g4n0qxqta]::after {
        content: '';
        animation: shDots-b-6g4n0qxqta 1.4s steps(4, end) infinite;
    }

@keyframes shDots-b-6g4n0qxqta {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}

.sh-progress-detail[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--ink-6);
}

/* Stage indicators */

.sh-stage-dots[b-6g4n0qxqta] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

.sh-stage-dot[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.sh-stage-dot-circle[b-6g4n0qxqta] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.4s ease;
}

.sh-stage-dot.active .sh-stage-dot-circle[b-6g4n0qxqta] {
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: shDotPulse-b-6g4n0qxqta 1s ease-in-out infinite;
}

.sh-stage-dot.done .sh-stage-dot-circle[b-6g4n0qxqta] {
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

.sh-stage-dot.pending .sh-stage-dot-circle[b-6g4n0qxqta] {
    background: var(--border);
}

@keyframes shDotPulse-b-6g4n0qxqta {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent);
    }

    50% {
        transform: scale(1.4);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 80%, transparent);
    }
}

.sh-stage-dot-label[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-6);
    transition: all 0.4s ease;
    white-space: nowrap;
}

.sh-stage-dot.active .sh-stage-dot-label[b-6g4n0qxqta] {
    color: var(--accent);
    font-weight: var(--font-weight-bold);
    animation: shLabelPulse-b-6g4n0qxqta 1s ease-in-out infinite;
}

@keyframes shLabelPulse-b-6g4n0qxqta {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.sh-stage-dot.done .sh-stage-dot-label[b-6g4n0qxqta] {
    color: var(--accent-deep);
    font-weight: var(--font-weight-semibold);
}

.sh-stage-connector[b-6g4n0qxqta] {
    width: 24px;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    margin: 0 0.25rem;
    margin-top: 5px;
}

    .sh-stage-connector.active[b-6g4n0qxqta]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--ink-7), var(--accent));
        animation: shConnectorFlow-b-6g4n0qxqta 1.5s ease-in-out infinite;
    }

@keyframes shConnectorFlow-b-6g4n0qxqta {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.sh-stage-connector.done[b-6g4n0qxqta] {
    background: var(--accent);
}

.sh-running.completing[b-6g4n0qxqta] {
    animation: shFadeOutUp-b-6g4n0qxqta 0.6s ease-out forwards;
}

@keyframes shFadeOutUp-b-6g4n0qxqta {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Partial reveal */

.sh-partial-reveal[b-6g4n0qxqta] {
    margin-top: 1.5rem;
    position: relative;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    max-height: 500px;
    overflow: hidden;
    opacity: 0.6;
    pointer-events: none;
    animation: shPartialIn-b-6g4n0qxqta 0.6s ease-out;
}

@keyframes shPartialIn-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 0.6;
        transform: translateY(0);
    }
}

.sh-running-partial .sh-partial-reveal[b-6g4n0qxqta] {
    margin-top: 32px;
    opacity: 0.85;
}

    .sh-running-partial .sh-partial-reveal[b-6g4n0qxqta]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent, var(--raised));
        pointer-events: none;
    }

/* ───────────────────────────────
   FAILED STATE
   ─────────────────────────────── */

.sh-failed[b-6g4n0qxqta] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    animation: shFadeIn-b-6g4n0qxqta 0.3s ease-out;
}

.sh-failed-icon[b-6g4n0qxqta] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
}

    .sh-failed-icon i[b-6g4n0qxqta] {
        font-size: var(--text-xl);
        color: var(--danger);
    }

.sh-failed-body[b-6g4n0qxqta] {
    flex: 1;
    min-width: 0;
}

.sh-failed-title[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.01em;
}

.sh-failed-text[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--ink-5);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    max-width: 480px;
}

/* Shared animation */

@keyframes shFadeIn-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure content sits above watermark */

.sh-ready-body[b-6g4n0qxqta],
.sh-partial-reveal[b-6g4n0qxqta],
.sh-failed-icon[b-6g4n0qxqta],
.sh-failed-body[b-6g4n0qxqta] {
    position: relative;
    z-index: 1;
}

/* Consistent panel height across states -- includes the locked variant
   so it occupies the same vertical envelope as not-ready / running. */

.sh-ready[b-6g4n0qxqta],
.sh-running[b-6g4n0qxqta],
.sh-failed[b-6g4n0qxqta],
.premium-lock-card[b-6g4n0qxqta] {
    min-height: 280px;
}

/* ===========================
   LEGACY CONTAINER
   =========================== */

.container[b-6g4n0qxqta] {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-radius: 1.25rem;
    max-width: 1360px;
    min-height: 100vh;
    margin: 0 auto;
}

/* ===========================
   PRODUCT TITLE — Hero + Compact + Shimmer
   =========================== */

.product-title[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-transform: capitalize;
    margin: 0.375rem 0 0.625rem;
    word-break: break-word;
    overflow-wrap: break-word;
    /* h1 reset */
    padding: 0;
    border: none;
    /* Smooth transition between hero ↔ compact */
    transition: font-size 0.4s ease, margin 0.3s ease, line-height 0.3s ease;
}

    .product-title.is-placeholder[b-6g4n0qxqta] {
        color: var(--ink-7);
    }

    /* Animating: subtle horizontal shimmer during busy states */

    .product-title.is-animating[b-6g4n0qxqta] {
        background: linear-gradient( 90deg, var(--ink) 0%, var(--ink) 40%, var(--ink-6) 50%, var(--ink) 60%, var(--ink) 100% );
        background-size: 400% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titleShimmer-b-6g4n0qxqta 3.5s ease-in-out infinite;
    }

@keyframes titleShimmer-b-6g4n0qxqta {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: -100% 50%;
    }
}

/* ===========================
   EXECUTIVE SUMMARY — Inline Read-Only
   =========================== */

/* Animating: subtle border glow during busy states */

/* Fresh: one-shot shine on content update */

/*.maturity-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 45%, #22c55e 100%);
    background-size: calc(10000% / var(--maturity)) 100%;
    background-position: left;
}*/

.maturity-bar-fill[b-6g4n0qxqta] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    /* Neutral — was a red→amber→green gradient that competed with
       the grade tile's tier colour. Secondary metrics stay quiet. */
    background: rgba(15, 23, 42, 0.32);
}

/* ===========================
   STATUS BAR
   =========================== */

/* ===========================
   READ-ONLY MODE
   =========================== */

.readonly-indicator[b-6g4n0qxqta] {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 1.5rem;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: none;
    align-items: center;
    gap: 0.5rem;
    z-index: 101;
    animation: slideDown-b-6g4n0qxqta 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px var(--accent-shadow);
}

@keyframes slideDown-b-6g4n0qxqta {
    from {
        transform: translateX(-50%) translateY(-120%);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* ===========================
   CTA CARD
   =========================== */

/* ─── Container ───────────────────────────────────────────────── */

.iv-empty[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    max-width: 18rem;
    margin: auto;
}

/* ─── Logo orb ────────────────────────────────────────────────── */

.iv-orb[b-6g4n0qxqta] {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(226, 228, 232, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.375rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    .iv-orb img[b-6g4n0qxqta] {
        width: 2rem;
        height: 2rem;
        object-fit: contain;
    }

    /* Bradycardia — idle, ~40bpm equivalent */

    .iv-orb.idle[b-6g4n0qxqta] {
        animation: iv-brady-b-6g4n0qxqta 6s ease-in-out infinite;
    }

@keyframes iv-brady-b-6g4n0qxqta {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    8% {
        transform: scale(1.025);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    16% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
}

/* Engaged — active conversation */

.iv-orb.active[b-6g4n0qxqta] {
    animation: iv-engaged-b-6g4n0qxqta 2.5s ease-in-out infinite;
}

@keyframes iv-engaged-b-6g4n0qxqta {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    12% {
        transform: scale(1.05);
        box-shadow: 0 4px 14px rgba(240, 12, 113, 0.12);
    }

    24% {
        transform: scale(1);
    }

    36% {
        transform: scale(1.03);
        box-shadow: 0 3px 10px rgba(240, 12, 113, 0.08);
    }

    48% {
        transform: scale(1);
    }
}

/* In love — processing, fast irregular pulse */

.iv-orb.thinking[b-6g4n0qxqta] {
    animation: iv-inlove-b-6g4n0qxqta 1.6s ease-in-out infinite;
}

@keyframes iv-inlove-b-6g4n0qxqta {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    8% {
        transform: scale(1.09);
        box-shadow: 0 6px 20px rgba(240, 12, 113, 0.18);
    }

    18% {
        transform: scale(0.97);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    28% {
        transform: scale(1.06);
        box-shadow: 0 5px 16px rgba(240, 12, 113, 0.15);
    }

    38% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    52% {
        transform: scale(1.04);
        box-shadow: 0 4px 12px rgba(240, 12, 113, 0.1);
    }

    62% {
        transform: scale(0.98);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    }

    75% {
        transform: scale(1.07);
        box-shadow: 0 5px 18px rgba(240, 12, 113, 0.16);
    }

    85% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
}

/* ─── Main line — with shimmer ────────────────────────────────── */

.iv-line[b-6g4n0qxqta] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-4);
    letter-spacing: -0.012em;
    line-height: 1.55;
}

    .iv-line em[b-6g4n0qxqta] {
        font-style: normal;
        font-weight: 700;
        color: var(--ink-3);
    }

/* ─── Left arrow nudge ────────────────────────────────────────── */

.iv-arrow[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 1.25rem;
    animation: iv-fadeUp-b-6g4n0qxqta 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.iv-arrow-pip[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: rgba(240, 12, 113, 0.05);
    color: var(--accent);
    font-size: 0.375rem;
    flex-shrink: 0;
    opacity: 0.6;
    animation: iv-drift-b-6g4n0qxqta 2.5s ease-in-out infinite;
}

@keyframes iv-drift-b-6g4n0qxqta {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(-3px);
        opacity: 0.8;
    }
}

.iv-arrow-text[b-6g4n0qxqta] {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--ink-6);
    position: relative;
}

    .iv-arrow-text[b-6g4n0qxqta]::after {
        content: '';
        position: absolute;
        inset: -2px -6px;
        background: linear-gradient( 270deg, transparent 0%, rgba(240, 12, 113, 0.04) 40%, rgba(240, 12, 113, 0.08) 50%, rgba(240, 12, 113, 0.04) 60%, transparent 100% );
        background-size: 200% 100%;
        border-radius: 3px;
        animation: iv-shimmer-rtl-b-6g4n0qxqta 4s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes iv-shimmer-rtl-b-6g4n0qxqta {
    0%, 100% {
        background-position: -200% center;
    }

    50% {
        background-position: 200% center;
    }
}

@keyframes iv-fadeUp-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .iv-orb.idle[b-6g4n0qxqta],
    .iv-orb.active[b-6g4n0qxqta],
    .iv-orb.thinking[b-6g4n0qxqta] {
        animation: none;
    }

    .iv-line[b-6g4n0qxqta]::after {
        animation: none;
        opacity: 0;
    }

    .iv-arrow-pip[b-6g4n0qxqta] {
        animation: none;
        opacity: 0.6;
    }

    .iv-arrow[b-6g4n0qxqta] {
        animation: none;
        opacity: 1;
    }

    .iv-arrow-text[b-6g4n0qxqta]::after {
        animation: none;
        opacity: 0;
    }
}

/* ─── Tablet ──────────────────────────────────────────────────── */

@media (min-width: 901px) and (max-width: 1600px) {
    .iv-orb[b-6g4n0qxqta] {
        width: 3.25rem;
        height: 3.25rem;
        margin-bottom: 1.125rem;
    }

        .iv-orb img[b-6g4n0qxqta] {
            width: 1.75rem;
            height: 1.75rem;
        }

    .iv-line[b-6g4n0qxqta] {
        font-size: 0.8125rem;
    }

    .iv-arrow-text[b-6g4n0qxqta] {
        font-size: 0.5rem;
    }
}

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .iv-empty[b-6g4n0qxqta] {
        padding: 1.5rem;
        max-width: 16rem;
    }

    .iv-orb[b-6g4n0qxqta] {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }

        .iv-orb img[b-6g4n0qxqta] {
            width: 1.5rem;
            height: 1.5rem;
        }

    .iv-line[b-6g4n0qxqta] {
        font-size: 0.75rem;
    }

    .iv-arrow-text[b-6g4n0qxqta] {
        font-size: 0.5rem;
    }

    .iv-arrow-pip[b-6g4n0qxqta] {
        width: 1rem;
        height: 1rem;
        font-size: 0.3125rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE — Maturity-aware cycling anticipation
   ═══════════════════════════════════════════════════════════════ */

.iv-empty[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 120px);
    padding: 3rem 2rem;
    opacity: 0;
    animation: ivEmptyIn-b-6g4n0qxqta 0.8s ease-out 0.3s forwards;
}

/* Cycling anticipation line */

@keyframes ivEmptyIn-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   PROGRESS INDICATOR
   =========================== */

/* ===========================
   ANIMATIONS
   =========================== */

/* ===========================
   TOAST NOTIFICATION
   =========================== */

.toast[b-6g4n0qxqta] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-2);
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    cursor: pointer;
    max-width: calc(100vw - 2rem);
    animation: toastSlideIn-b-6g4n0qxqta 0.3s ease forwards;
}

@keyframes toastSlideIn-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-icon[b-6g4n0qxqta] {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.toast-message[b-6g4n0qxqta] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast:hover[b-6g4n0qxqta] {
    background: var(--ink-3);
}

/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
    .container[b-6g4n0qxqta],
    .sh-stage-dot-circle[b-6g4n0qxqta],
    .sh-stage-connector[b-6g4n0qxqta],
    .sh-pill-btn[b-6g4n0qxqta],
    .sh-pill-btn .pill-icon[b-6g4n0qxqta],
    .sh-pill-btn .pill-icon i[b-6g4n0qxqta],
    .section-stale-flag[b-6g4n0qxqta],
    .product-title[b-6g4n0qxqta] {
        transition: none;
    }

    .readonly-indicator[b-6g4n0qxqta],
    .sh-ready[b-6g4n0qxqta],
    .sh-running[b-6g4n0qxqta],
    .sh-failed[b-6g4n0qxqta],
    .sh-partial-reveal[b-6g4n0qxqta],
    .section-stale-flag[b-6g4n0qxqta] {
        animation: none;
    }

    .product-title.is-animating[b-6g4n0qxqta] {
        animation: none;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: var(--ink-6);
    }

    .sh-main-spinner-fill[b-6g4n0qxqta] {
        animation: shMainSpin-b-6g4n0qxqta 3s linear infinite;
    }

    .sh-main-spinner-glow[b-6g4n0qxqta] {
        animation: none;
        opacity: 0.5;
    }

    .sh-main-spinner-icon[b-6g4n0qxqta] {
        animation: none;
        color: var(--accent-light);
    }

    .sh-stage-dot.active .sh-stage-dot-circle[b-6g4n0qxqta] {
        animation: none;
    }

    .sh-stage-connector.active[b-6g4n0qxqta]::after {
        animation: none;
        background: linear-gradient(90deg, var(--ink-7), var(--accent));
    }

    .maturity-bar-fill[b-6g4n0qxqta] {
        transition: none;
    }

    .iv-empty[b-6g4n0qxqta] {
        animation: none;
        opacity: 1;
    }
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 1600px) {
    .container[b-6g4n0qxqta],
    .section-inner[b-6g4n0qxqta] {
        max-width: 1200px;
    }
}

@media (max-width: 1280px) {
    .product-title[b-6g4n0qxqta] {
        font-size: clamp(1.875rem, 4vw, 2.75rem);
        margin: 0.25rem 0 0.5rem;
    }
}

@media (max-width: 960px) {
    .section-header[b-6g4n0qxqta] {
        padding-top: 32px;
    }

    .section-elements[b-6g4n0qxqta],
    .section-competitive[b-6g4n0qxqta],
    .section-personas[b-6g4n0qxqta],
    .section-market-outlook[b-6g4n0qxqta] {
        padding: 0 0 2rem 0;
    }
}

@media (max-width: 768px) {
    .container[b-6g4n0qxqta] {
        border-radius: 1rem;
    }

    .section-header[b-6g4n0qxqta] {
        padding-top: 28px;
    }

    .section-title[b-6g4n0qxqta] {
        font-size: var(--text-md);
        letter-spacing: 0.35em;
    }

    .section-title-row[b-6g4n0qxqta] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .section-title-content[b-6g4n0qxqta] {
        flex-direction: row;
        align-items: center;
    }

    .section-stale-flag[b-6g4n0qxqta] {
        font-size: var(--text-2xs);
        padding: 0.1875rem 0.5rem;
    }

        .section-stale-flag span[b-6g4n0qxqta] {
            display: none;
        }

    /* Pill buttons: icon-only on mobile */

    .sh-pill-btn span:not(.pill-icon)[b-6g4n0qxqta] {
        display: none;
    }

    .sh-pill-btn[b-6g4n0qxqta] {
        padding: 0.375rem;
        gap: 0;
    }

    .sh-header-actions[b-6g4n0qxqta] {
        gap: 0.375rem;
    }

    .product-title[b-6g4n0qxqta] {
        font-size: 1.75rem;
        margin: 0.25rem 0 0.5rem;
    }

    /* Locked-state container: mirror .sh-ready's mid-breakpoint padding
       so the locked panel and the not-ready panel are identical at this
       width. Watermark left-position aligned. Title and text font-sizes
       intentionally NOT overridden here -- .sh-ready-title's clamp handles
       this width, and .sh-ready-text has no mid override, so the locked
       equivalents should follow suit. */

    .premium-lock-card[b-6g4n0qxqta] {
        padding: 2rem 1.5rem;
    }

    .premium-lock-watermark[b-6g4n0qxqta] {
        font-size: 10rem;
        left: 1rem;
    }

    .sh-ready[b-6g4n0qxqta] {
        padding: 2rem 1.5rem;
    }

    .sh-ready-text[b-6g4n0qxqta] {
        max-width: 100%;
    }

    .sh-ready-capabilities[b-6g4n0qxqta] {
        justify-content: center;
    }

    .sh-watermark[b-6g4n0qxqta] {
        font-size: 10rem;
        left: 1rem;
    }

    .sh-running[b-6g4n0qxqta] {
        padding: 3rem 1.5rem;
        min-height: 300px;
    }

    .sh-main-spinner[b-6g4n0qxqta] {
        width: 150px;
        height: 150px;
    }

    .sh-main-spinner-track[b-6g4n0qxqta],
    .sh-main-spinner-fill[b-6g4n0qxqta] {
        border-width: 4px;
    }

    .sh-main-spinner-icon[b-6g4n0qxqta] {
        font-size: 3.25rem;
    }

    .sh-progress-status[b-6g4n0qxqta] {
        min-width: 240px;
    }

    .sh-progress-label[b-6g4n0qxqta] {
        font-size: 1rem;
    }

    .sh-progress-detail[b-6g4n0qxqta] {
        font-size: var(--text-sm);
    }

    .sh-stage-dots[b-6g4n0qxqta] {
        gap: 0;
    }

    .sh-stage-connector[b-6g4n0qxqta] {
        width: 16px;
        margin: 0 0.125rem;
    }

    .sh-stage-dot-label[b-6g4n0qxqta] {
        font-size: var(--text-2xs);
    }

    .sh-stage-dot-circle[b-6g4n0qxqta] {
        width: 10px;
        height: 10px;
    }

    .sh-failed[b-6g4n0qxqta] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .sh-failed-text[b-6g4n0qxqta] {
        max-width: 100%;
    }

    .toast[b-6g4n0qxqta] {
        bottom: 1rem;
        padding: 0.75rem 1rem;
        font-size: var(--text-base);
        border-radius: var(--radius-md);
    }

    .iv-empty[b-6g4n0qxqta] {
        min-height: calc(100vh - 160px);
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .product-title[b-6g4n0qxqta] {
        font-size: 1.5rem;
        margin: 0.125rem 0 0.375rem;
    }

    .section-header[b-6g4n0qxqta] {
        padding-top: 24px;
    }

    .section-title[b-6g4n0qxqta] {
        font-size: var(--text-sm);
        letter-spacing: 0.3em;
    }

    /* Locked-state container: mirror .sh-ready's small-breakpoint padding
       and let title/text sizes track .sh-ready-title (1.375rem) and
       .sh-ready-text (var(--text-md)) so the locked panel reads identical
       to not-ready at this width. */

    .premium-lock-card[b-6g4n0qxqta] {
        padding: 1.5rem 1rem;
    }

    .premium-lock-watermark[b-6g4n0qxqta] {
        font-size: 7rem;
        left: 0.5rem;
    }

    .premium-lock-content[b-6g4n0qxqta] {
        max-width: 100%;
    }

    .premium-lock-text[b-6g4n0qxqta] {
        max-width: 100%;
    }

    .premium-lock-title[b-6g4n0qxqta] {
        font-size: 1.375rem;
    }

    .premium-lock-text[b-6g4n0qxqta] {
        font-size: var(--text-md);
    }

    .sh-ready[b-6g4n0qxqta] {
        padding: 1.5rem 1rem;
    }

    .sh-ready-title[b-6g4n0qxqta] {
        font-size: 1.375rem;
    }

    .sh-ready-text[b-6g4n0qxqta] {
        font-size: var(--text-md);
    }

    .sh-ready-tag[b-6g4n0qxqta] {
        font-size: var(--text-xs);
        padding: 0.25rem 0.5rem;
    }

    .sh-running[b-6g4n0qxqta] {
        padding: 2.5rem 1rem;
        min-height: 280px;
    }

    .sh-main-spinner[b-6g4n0qxqta] {
        width: 120px;
        height: 120px;
    }

    .sh-main-spinner-track[b-6g4n0qxqta],
    .sh-main-spinner-fill[b-6g4n0qxqta] {
        border-width: 3px;
    }

    .sh-main-spinner-icon[b-6g4n0qxqta] {
        font-size: 2.5rem;
    }

    .sh-progress-hub[b-6g4n0qxqta] {
        gap: 2rem;
    }

    .sh-progress-status[b-6g4n0qxqta] {
        min-width: 200px;
    }

    .sh-progress-label[b-6g4n0qxqta] {
        font-size: 0.9375rem;
    }

    .sh-progress-detail[b-6g4n0qxqta] {
        font-size: 0.6875rem;
    }

    .sh-stage-dots[b-6g4n0qxqta] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0;
    }

    .sh-stage-connector[b-6g4n0qxqta] {
        width: 12px;
        margin: 0;
        margin-bottom: 1rem;
    }

    .sh-stage-dot[b-6g4n0qxqta] {
        gap: 0.25rem;
    }

    .sh-stage-dot-circle[b-6g4n0qxqta] {
        width: 8px;
        height: 8px;
    }

    .sh-stage-dot-label[b-6g4n0qxqta] {
        font-size: 0.5rem;
    }

    .sh-failed[b-6g4n0qxqta] {
        padding: 1.5rem 1rem;
    }

    .sh-watermark[b-6g4n0qxqta] {
        font-size: 7rem;
        left: 0.5rem;
    }

    .iv-empty[b-6g4n0qxqta] {
        padding: 1.5rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ANALYSIS TABS — Pill selectors + animated panel
   ───────────────────────────────────────────────────────────────
   Refined hierarchy of attention:
     Active pill (dark)        the anchor — always tells you where you are.
     Invite badge (accent)     reserved CTA pull on Run / Start.
     Operational               quiet, monochrome — content speaks, not colour.
     Warn / Failed             restrained, text-led with a faint wash.
     Locked                    deferential by design.
   ═══════════════════════════════════════════════════════════════ */

.section-tabs[b-6g4n0qxqta] {
    background: #f4f2ed;
    padding: 2rem 0 1.75rem;
    /* Legacy border-top + inset top shadow REMOVED. They served as
       header→workspace separators before we adopted the fold-line
       approach. With the fold now living on .section-header as a
       border-bottom, these would be redundant doubled lines and
       a soft "absorption" zone that masked the fold. */
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

/* ─── Tab strip — invisible container ────────────────────────────
   No surface, no border, no shadow. The strip is just a flex line.
   Structure comes entirely from the pills themselves: each pill
   carries a defined surface, all pills share a min-width floor
   so labels of different lengths don't produce wildly different
   sizes, and the active pill flips to white-and-lifted to claim
   foreground. */

.iv-pills-strip[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 0;
    /* Vertical padding gives the pill drop-shadows and the -1px hover
       lift room to render. Without this, overflow-x:auto coerces the
       cross-axis into clipping mode and box-shadows get cut off at
       the strip's content box -- which is why the hover ring looked
       chopped on top/bottom. Negative margin keeps the strip flush
       with surrounding flow so layout doesn't grow. */
    padding: 0.5rem 0.25rem;
    margin: -0.5rem -0.25rem;
    max-width: calc(100% + 0.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: none;
}

    .iv-pills-strip[b-6g4n0qxqta]::-webkit-scrollbar {
        display: none;
    }

/* ─── Tab rail — folder tabs on the card's bottom edge. The tabs sit
   on the card's bottom border (the baseline); the active tab is
   filled with the workspace colour in the dusk override below so it
   merges with the light surface that surrounds and follows the card. */

.ih-tabrail[b-6g4n0qxqta] {
    margin-top: 2.5rem;
    padding-top: 0;
    border-top: none;
}

    /* Tabs share a baseline at the very bottom edge. Margins/padding
       from the base strip (tuned for the old drop-shadows) are zeroed
       here so the tabs land cleanly on the card border. */

    .ih-tabrail .iv-pills-strip[b-6g4n0qxqta] {
        align-items: flex-end;
        gap: 4px;
        padding-top: 0.375rem;
        padding-bottom: 0;
        margin: 0;
    }

/* Zero the header card's inner bottom padding so the rail reaches the
   card's bottom border. Scoped to the header; other sections keep
   their padding. (The card's own padding-bottom is set to 0 above.) */

.section-header .section-inner[b-6g4n0qxqta] {
    padding-bottom: 0;
}

/* ─── Pill base — default state, white card ─────────────────
   Swapped from the previous "ink wash inactive / white active"
   model: now inactive pills carry the white card surface, and
   the active pill takes the deeper ink-tinted wash. The min-width
   floor evens out short and long labels (Core ≈ Market Outlook
   in width). */

.iv-pill[b-6g4n0qxqta] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 7.5rem;
    padding: 0.8125rem 1.125rem;
    border: none;
    /* Gradient gives the pill a physical light-from-above feel: the top
       reads slightly brighter than the bottom, like a key light overhead.
       Combined with the inset top highlight (first shadow layer) and the
       layered drop shadow (last two layers), the pill sits on the page
       rather than lying flat against it. */
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    border-radius: 10px;
    font-family: 'Space Grotesk', var(--font);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    /* Shadow stack -- inside-out:
         1. inset highlight at top edge (the 'rim light' that fakes 3D)
         2. hairline ring all the way around (definition against any bg)
         3. close drop shadow (contact shadow)
         4. far drop shadow (ambient elevation) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .iv-pill:hover:not(.is-active)[b-6g4n0qxqta] {
        /* Hover gradient deepens slightly at the bottom so the pill feels
           pressed-up from the surface. Combined with translateY(-1px) and
           a stronger drop shadow, the pill clearly responds to the cursor. */
        background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%);
        color: var(--ink-2);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.06);
    }

    .iv-pill:focus-visible[b-6g4n0qxqta] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Active pill: dark ink surface + white text gives an unambiguous
       "selected" signal, like a segmented control (iOS, Linear, Notion).
       Chosen over an accent-pink fill because brand pink is reserved for
       semantic signals (new badge, pending update, editing caret, loading
       spinner) under the v7 palette discipline; navigation state is not
       a semantic accent moment.

       Dark gradient (lighter at top, full ink at bottom) plus an inset
       1px white-at-12% rim light gives the same 3D button vocabulary as
       the inactive pills, just inverted. Without the rim light the active
       pill would read as a flat dark rectangle and lose its button feel. */

    .iv-pill.is-active[b-6g4n0qxqta] {
        background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, #ffffff) 0%, var(--ink) 100%);
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(15, 23, 42, 0.20), 0 2px 4px rgba(15, 23, 42, 0.14), 0 6px 14px rgba(15, 23, 42, 0.14);
        filter: none;
    }

        /* Active stays anchored on hover -- no lift, no big shift. It is
           already selected; the cursor doesn't need to encourage clicking
           it again. Just the faintest gradient nudge. */

        .iv-pill.is-active:hover[b-6g4n0qxqta] {
            background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, #ffffff) 0%, color-mix(in srgb, var(--ink) 96%, #ffffff) 100%);
        }

        /* Icon chip on active pill -- translucent white sits cleanly on
           the dark surface; glyph stays white. */

        .iv-pill.is-active .iv-pill-icon[b-6g4n0qxqta] {
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
        }

/* ─── Tab icon chip ────────────────────────────────────────────
   Each leading icon sits inside a small circular chip. Treats the
   icon as a designed section marker rather than a stock FontAwesome
   glyph floating next to text. The chip also lets the brand
   colour breathe in the active state without staining the whole
   pill. */

.iv-pill-icon[b-6g4n0qxqta] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.625rem;
    color: var(--ink-4);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.iv-pill:hover:not(.is-active) .iv-pill-icon[b-6g4n0qxqta] {
    background: rgba(15, 23, 42, 0.09);
    color: var(--ink-2);
}

/* ─── Pill label ───────────────────────────────────────────────── */

.iv-pill-label[b-6g4n0qxqta] {
    line-height: 1;
}

/* Animate intensity only — the dot holds its size and only fades
   the color in and out. Less attention-grabbing than a scaling
   pulse; matches the restraint of the rest of the nav. */

/* ===============================================================
   UNIFIED PILL STATUS INDICATOR
   ---------------------------------------------------------------
   Single visual language for EXECUTION state across all eligible
   tabs. The lock icon (rule above) remains separate for ELIGIBILITY
   (not in plan / blocked by prerequisite). The previous .iv-pill-
   badge, .iv-pill-bullet, and .iv-pill-pulse families are no longer
   emitted by the markup; their rules are kept further up so that
   any other surface reusing them keeps working.

   States:
     --idle    => eligible, not yet run. Empty grey ring.
     --running => analysis in progress. Animated rotating half-fill.
     --done    => completed. Solid green disc.
     --stale   => completed but the source has evolved. Solid amber.
     --failed  => last run errored. Static half-fill red plus ring,
                  visually distinct from --running (animation) and
                  --done (full).
   =============================================================== */

.iv-pill-status[b-6g4n0qxqta] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 0.125rem;
    box-sizing: border-box;
    /* Sub-pixel rendering hint -- crisps up small circles at
       fractional flex positions. Same trick used elsewhere. */
    transform: translateZ(0);
    backface-visibility: hidden;
    cursor: help;
}

/* Idle -- empty ring, neutral grey. */

.iv-pill-status--idle[b-6g4n0qxqta] {
    background: transparent;
    border: 1.5px solid var(--ink-6);
    opacity: 0.75;
}

/* Running -- rotating half-fill, green. Conic gradient renders the
   right hemisphere green; rotating the element sweeps it around. */

.iv-pill-status--running[b-6g4n0qxqta] {
    background: conic-gradient(from 0deg, #16a34a 0deg 180deg, transparent 180deg 360deg);
    animation: ivPillStatusRotate-b-6g4n0qxqta 1.4s linear infinite;
    will-change: transform;
}

@keyframes ivPillStatusRotate-b-6g4n0qxqta {
    from {
        transform: rotate(0deg) translateZ(0);
    }

    to {
        transform: rotate(360deg) translateZ(0);
    }
}

/* Done -- solid green. */

.iv-pill-status--done[b-6g4n0qxqta] {
    background: #16a34a;
}

/* Stale -- solid amber. Done, but the source has changed and a re-run
   is recommended. Distinct from --done (green) and --running (animated). */

.iv-pill-status--stale[b-6g4n0qxqta] {
    background: #ea580c;
}

/* Failed -- static red half-fill with a red ring. Same conic-gradient
   shape as --running but RED and NOT animated, so a glance distinguishes
   "in progress" from "broken". */

.iv-pill-status--failed[b-6g4n0qxqta] {
    background: conic-gradient(from 0deg, #dc2626 0deg 180deg, transparent 180deg 360deg);
    border: 1.5px solid #dc2626;
}

/* Active-pill overrides -- active surface is dark ink, so idle's grey ring
   and failed's red ring need to brighten / shift for legibility on the
   dark fill. Filled states (done green, stale amber, running green) read
   fine on dark without adjustment. */

.iv-pill.is-active .iv-pill-status--idle[b-6g4n0qxqta] {
    border-color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}

.iv-pill.is-active .iv-pill-status--failed[b-6g4n0qxqta] {
    background: conic-gradient(from 0deg, #ef4444 0deg 180deg, transparent 180deg 360deg);
    border-color: #ef4444;
}

/* Reduced motion -- freeze the rotation. The half-fill still reads as
   "in progress" via tooltip; we just stop the spin. */

@media (prefers-reduced-motion: reduce) {
    .iv-pill-status--running[b-6g4n0qxqta] {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — pills scroll horizontally on narrow viewports
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .section-tabs[b-6g4n0qxqta] {
        padding: 1.5rem 0 1.25rem;
    }

    .iv-pills-strip[b-6g4n0qxqta] {
        display: flex;
        max-width: 100%;
        gap: 4px;
        padding: 5px;
    }

    .iv-pill[b-6g4n0qxqta] {
        padding: 0.5625rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.4375rem;
    }
}

/* ─── Header content wrapper ──────────────────────────────────────
   The section itself is now the card surface (see .section-header).
   .ih-v3 is a transparent inner wrapper that holds the headline,
   stripe, and (when empty) coach hint. It keeps position:relative
   so the info button — positioned absolutely — anchors to the
   content column rather than the section's full-bleed edges. */

.ih-v3[b-6g4n0qxqta] {
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

    .ih-v3.is-empty[b-6g4n0qxqta] {
        /* Zeroed (was 0.75rem) so the docked tab rail sits flush on the
           card's bottom edge in the empty state too, matching the normal
           state. */
        padding-bottom: 0;
    }

/* ─── Status dot (used by meta panel status rows) ────────── */

.ih-status-dot[b-6g4n0qxqta] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: ihStatusPulse-b-6g4n0qxqta 1.4s ease-in-out infinite;
}

@keyframes ihStatusPulse-b-6g4n0qxqta {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

/* ─── Title row ────────────────────────────────────────────── */

.ih-title[b-6g4n0qxqta] {
    font-family: 'Space Grotesk', var(--font);
    font-size: 2.625rem; /* 42px */
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.08;
    max-width: 720px;
}

    .ih-title.is-placeholder[b-6g4n0qxqta] {
        color: var(--ink-5);
        font-weight: var(--font-weight-regular);
    }

    .ih-title.is-animating[b-6g4n0qxqta] {
        animation: ihTitleShimmer-b-6g4n0qxqta 1.8s ease-in-out infinite;
    }

@keyframes ihTitleShimmer-b-6g4n0qxqta {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Fresh-update pulse: when the exec summary changes, the icon
   pulses briefly to draw the user's attention to the tooltip. */

/* Maturity inline pill */

.ih-maturity-fill[b-6g4n0qxqta] {
    height: 100%;
    /* Neutral fill — maturity is a secondary metric. Brand-pink fill
       made it compete with the grade tile for attention; muted dark-
       neutral keeps it readable but quiet so the grade carries the
       primary semantic colour in the header. */
    background: rgba(15, 23, 42, 0.32);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ih-maturity-pct[b-6g4n0qxqta] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--ink-2);
    letter-spacing: -0.01em;
}

    .ih-maturity-pct small[b-6g4n0qxqta] {
        font-size: 0.6875rem;
        color: var(--ink-5);
        font-weight: var(--font-weight-bold);
        margin-left: 0.0625rem;
    }

/* Header empty-state coach hint — same pattern as panels, with
   top spacing tuned for the header's editorial scale. */

.sh-coach-back--header[b-6g4n0qxqta] {
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY-STATE HERO — header welcome block
   ───────────────────────────────────────────────────────────────
   Shown only when the idea has no input yet. Replaces the small
   sh-coach-back--header tile with a larger, calmer welcome that
   pairs with the title placeholder above to form the entire
   empty-state header: two main items, no card chrome, plenty of
   air. Disappears the moment any dimension parses (versionIsEmpty
   flips to false), and the full Score/Crux/Action row takes over.
   ═══════════════════════════════════════════════════════════════ */

/* Empty-state support line. Placed explicitly in the actions grid
   slot, directly under the title question, replacing the old
   auto-placed two-heading welcome block (auto-placement only landed
   it at the top because the metabar happens not to render when the
   idea is empty; explicit beats accidental). Single line, arrow
   first: the arrow is the wayfinding to the chat on the left and
   keeps its nudge. */
.iv-empty-hero[b-6g4n0qxqta] {
    grid-area: actions;
    margin-top: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    max-width: 640px;
}

.iv-empty-hero-arrow[b-6g4n0qxqta] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(240, 12, 113, 0.10);
    border: 1px solid rgba(240, 12, 113, 0.30);
    color: var(--accent);
    font-size: 0.8125rem;
    animation: ivEmptyHeroNudge-b-6g4n0qxqta 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ivEmptyHeroNudge-b-6g4n0qxqta {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }

    50% {
        transform: translateX(-7px);
        opacity: 1;
    }
}

.iv-empty-hero-sub[b-6g4n0qxqta] {
    margin: 0;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    color: var(--ink-4);
}

@media (prefers-reduced-motion: reduce) {
    .iv-empty-hero-arrow[b-6g4n0qxqta] {
        animation: none;
        opacity: 1;
    }
}

/* Genesis strip — the empty canvas's closing line, centered under the
   card grid. Numbers speak the header pills' mono register; the
   current step carries brand pink; CSS arrows serialize the sequence.
   Below the single-column card step the strip stacks left-aligned and
   the arrows yield to the vertical reading order. */
.iv-genesis[b-6g4n0qxqta] {
    list-style: none;
    margin: 2.25rem auto 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    column-gap: 2.5rem;
    row-gap: 0.75rem;
    flex-wrap: wrap;
}

    .iv-genesis li[b-6g4n0qxqta] {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 0.625rem;
    }

        .iv-genesis li + li[b-6g4n0qxqta]::before {
            content: '\2192';
            position: absolute;
            left: -1.625rem;
            color: var(--ink-7);
            font-size: 0.8125rem;
        }

.iv-genesis-num[b-6g4n0qxqta] {
    flex: 0 0 auto;
    font-family: 'IBM Plex Mono', var(--font-mono, monospace);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.09em;
    color: var(--ink-6);
}

.iv-genesis-text[b-6g4n0qxqta] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-4);
}

.iv-genesis li.is-now .iv-genesis-num[b-6g4n0qxqta] {
    color: var(--accent);
}

.iv-genesis li.is-now .iv-genesis-text[b-6g4n0qxqta] {
    color: var(--ink-2);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 720px) {
    .iv-genesis[b-6g4n0qxqta] {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 1.75rem;
    }

        .iv-genesis li + li[b-6g4n0qxqta]::before {
            display: none;
        }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Section card holds its surface on mobile; only typography
       and tooltip width need adjusting. .ih-v3 is a transparent
       wrapper at all viewports — no padding to override. */

    .ih-title[b-6g4n0qxqta] {
        font-size: 2rem; /* 32px */
        letter-spacing: -0.025em;
    }
}

@media (max-width: 480px) {
    .ih-title[b-6g4n0qxqta] {
        font-size: 1.625rem; /* 26px */
        line-height: 1.15;
    }
}

/* ─── Meta-bar — single top stripe (req: merge identity + meta into
   one line). Codename pill, exec-summary info button, then the
   metadata strip (version · updated · owner · maturity · status), all
   on one line at the very top of the card. Replaces the old split
   between an in-panel identity row and a separate foot-rail stripe:
   one compact line instead of two. Wraps gracefully when narrow. */

.ih-metabar[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem; /* the separator's spacing was tuned around the
                                   removed info button; the dot owns its room now */
    margin-bottom: 1.375rem; /* tier air: metabar → title */
}

    /* In the bar the meta strip is no longer the flex-grow element it
       was in the old foot-rail; it sits inline after the codename and
       info button, taking only the room it needs. */

    .ih-metabar .ih-meta-strip[b-6g4n0qxqta] {
        flex: 0 1 auto;
    }

/* ─── Headline (verdict) row — full width. The title moved up to
   .ih-titlerow (with the documents hub); the verdict panel runs the
   full width of the card here so the verdict and crux/action get the
   room they need. */

.ih-headline[b-6g4n0qxqta] {
    display: block;
    margin-bottom: 0;
}

/* ─── Title row — idea title on the left, documents hub on the right.
   Independent of the verdict so the verdict stretches full width
   below. Collapses to stacked below 960px. */

.ih-titlerow[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.625rem; /* tier air: title → verdict */
}

    /* Title grows to fill the row. The large full-width right-padding
       the title carried for the old single-column layout is zeroed
       here so it doesn't push the documents hub off to the edge. */

    .ih-titlerow > .ihv-title[b-6g4n0qxqta] {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 0;
    }

/* Documents hub pinned to the right end of the title row. margin-
       left:auto pushes it flush right; the inner flex right-aligns the
       control within the host. Capped width; full-width below 960px. */

.ih-headline-text[b-6g4n0qxqta] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .ih-headline-text .ih-title[b-6g4n0qxqta] {
        margin: 0;
        max-width: 100%;
    }

/* Inline meta strip — codename · version · updated · owner · maturity.
   Items separated by middle-dots, all on one line. Wraps as a unit
   only when there's no room. */

.ih-meta-strip[b-6g4n0qxqta] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem; /* even rhythm — every dot equidistant from both neighbours */
    font-family: var(--font);
    /* Reduced from 0.8125rem so the strip reads as meta info, not as
       a content line. Lines up with the existing icon (0.75rem),
       status pill (0.75rem) and maturity-pct (0.75rem) — the whole
       strip now sits at a single 12px tier. */
    font-size: 0.75rem;
    color: var(--ink-5);
    line-height: 1.3;
}

.ih-meta-strip-item[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--ink-3);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

    .ih-meta-strip-item i[b-6g4n0qxqta] {
        font-size: 0.75rem;
        color: var(--ink-5);
        opacity: 0.85;
    }

/* .ih-meta-strip-item--codename — RETIRED.
   The codename moved out of the meta strip and into the body
   column above the title (see .ihv-codename below). The strip
   now carries: version, updated, owner, maturity, status. */

.ih-meta-strip-item--status[b-6g4n0qxqta] {
    color: var(--accent);
    font-weight: var(--font-weight-bold);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ih-meta-strip-sep[b-6g4n0qxqta] {
    color: var(--ink-7);
    opacity: 0.5;
    user-select: none;
}

/* === SURFACE — DE-TUNED for Option A unified header card ===
   Surface, shadow stack, border, and brand accent have moved up
   to .ih-v3 (the outer card). This panel becomes content within
   the card: transparent surface, no border, no shadow, no own
   top-edge accent. The grade tile, title, verdict label, and
   crux/action pair retain their internal typography unchanged.
   The hover lift is replaced with a subtle background tint —
   appropriate for content that doesn't have its own card lift. */

.ih-verdict-panel[b-6g4n0qxqta] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: background 0.18s ease;
}

    /* Top-edge brand accent — RETIRED.
       The brand spine now lives at section level on
       .section-header::before, full-bleed across the page. */

    .ih-verdict-panel[b-6g4n0qxqta]::after {
        content: none;
    }

    /* Click affordance for graded / error states */

    .ih-verdict-panel.state-graded[b-6g4n0qxqta],
    .ih-verdict-panel.state-error[b-6g4n0qxqta] {
        cursor: pointer;
        margin: -0.5rem -0.625rem;
        padding: 0.5rem 0.625rem;
        border-radius: 12px;
    }

        /* Hover affordance — barely-there neutral wash. The panel
           is clickable on graded/error states; the cream cardstock
           below carries the warmth, so the hover signal is just a
           whisper of darker tone rather than a brand wash that
           would compete with the verdict label. */

        .ih-verdict-panel.state-graded:hover[b-6g4n0qxqta],
        .ih-verdict-panel.state-error:hover[b-6g4n0qxqta] {
            background: rgba(15, 23, 42, 0.025);
        }

    .ih-verdict-panel:focus-visible[b-6g4n0qxqta] {
        outline: 2px solid rgba(240, 12, 113, 0.55);
        outline-offset: 3px;
        border-radius: 12px;
    }

/* === LAYOUT === Verdict panel is a vertical stack: identity row,
   title, then assessment block (which holds the grade + verdict
   content as a horizontal pair). The grade-with-content flex layout
   that previously sat at panel level now lives on .ihv-assessment. */

.ih-verdict-panel[b-6g4n0qxqta] {
    display: block;
}

/* Assessment row — horizontal pair: grade tile on the left,
   crux/action stack on the right. Sits below the headline row
   (which is now a sibling above, not nested inside). The grade
   tile and the .ihv-pair-label inside the body share a horizontal
   baseline because both are the first element in their flex column.
   Margin-top adds a slim breath under the verdict before the
   grade row begins, on top of the body's tight gap. */

.ihv-score-column[b-6g4n0qxqta] {
    /* Mirrors .ihv-pair-block — flex column with the same gap so
       the Score label and grade tile align with the THE CRUX /
       ACTION labels and their text bodies in the columns beside. */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* === GRADE TILE — clone of .ar-headline-grade === */

.ihv-grade[b-6g4n0qxqta] {
    --tier-bg: rgba(15, 23, 42, 0.04);
    --tier-border: rgba(15, 23, 42, 0.12);
    --tier-fg: #2c3e50;
    flex-shrink: 0;
    position: relative;
    width: var(--grade-tile-size, 4.75rem);
    min-height: var(--grade-tile-size, 4.75rem);
    padding: 0.5rem 0.5rem 0.5rem;
    border-radius: 14px;
    background: var(--tier-bg);
    border: 1.5px solid var(--tier-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--tier-fg);
}

    .ihv-grade.tier-great[b-6g4n0qxqta] {
        --tier-bg: color-mix(in srgb, #16a34a 8%, #ffffff);
        --tier-border: rgba(22, 163, 74, 0.32);
        --tier-fg: #15803d;
    }

    .ihv-grade.tier-good[b-6g4n0qxqta] {
        --tier-bg: color-mix(in srgb, #65a30d 8%, #ffffff);
        --tier-border: rgba(101, 163, 13, 0.32);
        --tier-fg: #4d7c0f;
    }

    .ihv-grade.tier-moderate[b-6g4n0qxqta] {
        --tier-bg: color-mix(in srgb, #ea580c 8%, #ffffff);
        --tier-border: rgba(234, 88, 12, 0.32);
        --tier-fg: #c2410c;
    }

    .ihv-grade.tier-poor[b-6g4n0qxqta] {
        --tier-bg: color-mix(in srgb, #dc2626 8%, #ffffff);
        --tier-border: rgba(220, 38, 38, 0.32);
        --tier-fg: #b91c1c;
    }

.ihv-grade-letter-row[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}

.ihv-grade-letter[b-6g4n0qxqta] {
    position: relative;
    display: inline-block;
    width: 1.4em;
    height: 1em;
    font-family: 'Space Grotesk', var(--font);
    /* Fluid scale tracking the tile size. Ceiling 2.625rem matches
       the original big-screen ideal and binds from V≈1100 upward;
       smooth scale down to a 1.5rem floor on mobile. Per-breakpoint
       overrides removed — clamp covers the range. */
    font-size: clamp(1.5rem, 1.25rem + 2vw, 2.625rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--tier-fg);
    text-align: center;
}

/* Letter container: flap stage. Multiple letters stack absolutely
   inside this fixed-size box; only one is visible at a time as the
   cycle plays out (F → D → C → B → A). Container reserves the visual
   space so layout never shifts. Cloned from .ar-headline-grade-letter
   in the scorecard — animation values must stay identical. */

.ihv-grade-flap[b-6g4n0qxqta] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

    /* Non-final letters: cross-fade through. Each peaks then yields
       to the next one rising. 0.13s stagger matches the scorecard. */

    .ihv-grade-flap:not(.is-final)[b-6g4n0qxqta] {
        animation: ihvGradeFlapFade-b-6g4n0qxqta 0.26s ease-in-out forwards;
        animation-delay: calc(var(--i) * 0.13s);
    }

    /* Final letter: fade in with a 0.20s anticipation pause so the
       climax has weight before settling. */

    .ihv-grade-flap.is-final[b-6g4n0qxqta] {
        animation: ihvGradeFlapFinal-b-6g4n0qxqta 0.25s ease-out forwards;
        animation-delay: calc(var(--cycle-length, 0) * 0.13s + 0.20s);
    }

@keyframes ihvGradeFlapFade-b-6g4n0qxqta {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes ihvGradeFlapFinal-b-6g4n0qxqta {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modifier — fades in after the final letter has settled. Stays
   absolute-positioned in the top-right corner of the tile. */

.ihv-grade-modifier[b-6g4n0qxqta] {
    position: absolute;
    top: 0.4375rem;
    right: 0.5rem;
    font-family: var(--font);
    /* Tracks the grade-letter and tile scale. Ceiling 0.8125rem
       matches the original big-screen ideal; binds from V≈1100
       upward in step with .ihv-grade-letter. */
    font-size: clamp(0.625rem, 0.5rem + 0.5vw, 0.8125rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tier-fg);
    opacity: 0;
    pointer-events: none;
    animation: ihvGradeModifierFade-b-6g4n0qxqta 0.25s ease forwards;
    animation-delay: calc(var(--cycle-length, 0) * 0.13s + 0.40s);
}

@keyframes ihvGradeModifierFade-b-6g4n0qxqta {
    to {
        opacity: 0.9;
    }
}

/* Score row inside the grade tile — clone of .ar-headline-grade-score-row.
   The numeric score sits directly below the letter, same tier color. */

.ihv-grade-score-row[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3125rem;
    line-height: 1;
}

.ihv-grade-score[b-6g4n0qxqta] {
    font-family: var(--font-mono, var(--font));
    /* Tracks the grade-letter scale. Ceiling 0.8125rem matches the
       big-screen ideal; binds from V≈1100 upward. The %-unit child
       uses font-size: 0.85em so it auto-scales with this. */
    font-size: clamp(0.625rem, 0.5rem + 0.5vw, 0.8125rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tier-fg);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

    .ihv-grade-score .ihv-score-unit[b-6g4n0qxqta] {
        margin-left: 0.0625rem;
        font-size: 0.85em;
        opacity: 0.75;
    }

/* Non-graded grade tile variants (running / error / locked / empty / forming / awaiting)
   — the scorecard doesn't render these because the tile only appears
   when an assessment exists. Header needs them for state coverage. */

.ihv-grade--running[b-6g4n0qxqta],
.ihv-grade--error[b-6g4n0qxqta],
.ihv-grade--empty[b-6g4n0qxqta] {
    --tier-bg: rgba(15, 23, 42, 0.02);
    --tier-border: rgba(15, 23, 42, 0.20);
    border-style: dashed;
}

.ihv-grade--error[b-6g4n0qxqta] {
    --tier-border: rgba(220, 38, 38, 0.45);
}

.ihv-grade--running[b-6g4n0qxqta] {
    --tier-border: rgba(240, 12, 113, 0.40);
    /* Subtle pulse on the border and background — replaces the
       conic-gradient ring approach which produced corner artifacts
       across browsers. The pulse is simple keyframe animation on
       properties the tile already has; it works everywhere and
       cannot break visually.
       
       Two animations layered:
       - Border pulses brand-pink at two opacity stops
       - Background pulses brand-pink-tinted at a barely-visible level
       
       Combined they read as a calm "breathing" — alive, working,
       not shouting. The dashed border inherited from the non-graded
       base is overridden to solid so the pulse is continuous. */
    border-style: solid;
    animation: ihvGradeRunningPulse-b-6g4n0qxqta 1.8s ease-in-out infinite;
}

@keyframes ihvGradeRunningPulse-b-6g4n0qxqta {
    0%, 100% {
        background: rgba(240, 12, 113, 0.02);
        border-color: rgba(240, 12, 113, 0.30);
    }

    50% {
        background: rgba(240, 12, 113, 0.08);
        border-color: rgba(240, 12, 113, 0.65);
    }
}

/* Cycling letter inside the running tile — only used for first-ever
   assessments (no prior grade exists). Loops through F→D→C→B→A→…
   so the eye reads "the grade is being determined." Reuses the
   .ihv-grade-letter sizing infrastructure for visual continuity
   with the final reveal.

   On re-assessment, the cycling letter is NOT rendered — the prior
   grade tile content is shown instead (letter + modifier + score),
   uniformly dimmed via .ihv-grade--reassessing. */

.ihv-grade-cycle[b-6g4n0qxqta] {
    position: relative;
    font-size: clamp(1.75rem, 1.125rem + 1.875vw, 2.5rem);
    font-weight: var(--font-weight-black);
    color: rgba(240, 12, 113, 0.85);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ihv-grade-cycle-char[b-6g4n0qxqta] {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
}

    .ihv-grade-cycle-char[b-6g4n0qxqta]::before {
        content: "F";
        animation: ihvGradeLetterCycle-b-6g4n0qxqta 2.4s steps(1, end) infinite;
    }

@keyframes ihvGradeLetterCycle-b-6g4n0qxqta {
    0% {
        content: "F";
    }

    12.5% {
        content: "D";
    }

    25% {
        content: "C";
    }

    37.5% {
        content: "B";
    }

    50% {
        content: "A";
    }

    62.5% {
        content: "B";
    }

    75% {
        content: "C";
    }

    87.5% {
        content: "D";
    }
}

/* Re-assessment variant — the running tile shows the prior grade
   content (letter + modifier + percentage) at reduced opacity so
   the user reads "current grade, updating." The tier color is
   preserved (orange stays orange) so the user recognizes what they
   had; the pulse-on-border signals an update is in flight.

   The interior elements normally rely on entry animations to fade
   in (flap, modifier — both start at opacity 0 with delayed fades
   designed for the FIRST appearance of a grade). During re-
   assessment we want immediate visibility at the dimmed value, so
   we override the animations to "none" and set the target opacity
   directly. */

.ihv-grade--running.ihv-grade--reassessing .ihv-grade-flap.is-final[b-6g4n0qxqta] {
    animation: none;
    opacity: 0.55;
}

.ihv-grade--running.ihv-grade--reassessing .ihv-grade-modifier[b-6g4n0qxqta] {
    animation: none;
    opacity: 0.55;
}

.ihv-grade--running.ihv-grade--reassessing .ihv-grade-score-row[b-6g4n0qxqta] {
    opacity: 0.55;
}

.ihv-grade i[b-6g4n0qxqta] {
    font-size: 1.5rem;
    color: rgba(15, 23, 42, 0.45);
}

.ihv-grade--error i[b-6g4n0qxqta] {
    color: rgba(220, 38, 38, 0.7);
}

.ihv-grade--running i[b-6g4n0qxqta] {
    color: rgba(240, 12, 113, 0.75);
}

/* Forming variant — pending state for the header grade tile.
   Replaces the older 'locked' semantic (which carried a paywall feel
   it never actually had). The tile is dashed and accent-tinted at low
   opacity, with a slow breathe so the user reads it as "coming into
   focus" rather than "denied". The sparkles glyph mirrors the same
   cue used elsewhere for emerging-content moments. */

/* Question-mark in the letter slot — for both --awaiting and --forming.
   The mark sits in the same slot a real grade letter would, sized and
   weighted identically (inherits font from .ihv-grade-letter). The only
   difference from a real letter is colour: muted ink instead of tier-fg,
   so it reads as "placeholder, not graded". --forming gets a soft
   accent tint to telegraph that something is coming. */

.ihv-empty-dash[b-6g4n0qxqta] {
    /* Tracks the grade tile scale. Ceiling 2rem matches the original
       big-screen ideal; binds from V≈1100 upward. Floor 1.5rem keeps
       the dash visible on narrow viewports without overflowing the
       shrunken tile. */
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: rgba(15, 23, 42, 0.30);
    line-height: 1;
}

/* === BODY === */

.ihv-body[b-6g4n0qxqta] {
    /* Vertical rhythm. The body has four siblings: identity row,
       title, headline-row (assessment intro with hairline above),
       and assessment row. The default gap is tight (0.5rem) so the
       identity pill stays paired with the title — they together
       name the idea. Larger gaps before the headline-row are added
       explicitly via margin-top, creating a clear section break
       between the identity zone above and the assessment zone below. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Codename pill — short identifier kicker above the title.
   Sits as the first body element. Brand-tinted when set, dashed/
   muted when untitled. The mono font + uppercase + letter-spacing
   establish "this is the project's code-name" — distinct from the
   editorial title below it. */

.ihv-codename[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem;
    /* Neutral pill — was brand-tinted (pink wash and pink border).
       Now reads as a quiet typographic identifier rather than a brand
       decoration. Only the grade tile carries colour in the header. */
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

    .ihv-codename i[b-6g4n0qxqta] {
        font-size: 0.625rem;
        color: var(--ink-5);
        opacity: 0.9;
    }

    /* Untitled state — quieter, dashed border, no brand tint.
       Signals "this slot will hold your codename". */

    .ihv-codename.is-untitled[b-6g4n0qxqta] {
        background: transparent;
        border-style: dashed;
        border-color: rgba(15, 23, 42, 0.16);
        color: var(--ink-5);
    }

        .ihv-codename.is-untitled i[b-6g4n0qxqta] {
            color: var(--ink-5);
            opacity: 0.7;
        }

/* Title threaded in as the panel's first body element.
   Sized to fit inside the panel; the giant page-level .ih-title
   typography (42px) was for a stand-alone title and would dominate
   the panel here. The info button no longer sits absolute-
   positioned in the top-right (it now lives inline in the identity
   row), so the title spans the full body width. */

.ihv-title[b-6g4n0qxqta] {
    margin: 0;
    /* Responsive right-padding: caps at 40% of body width on large
       viewports, collapses to 0 on narrow viewports. The clamp()
       preserves a comfortable ~26rem minimum content width before
       padding starts to grow. */
    padding-right: clamp(0rem, calc(100% - 26rem), 40%);
    font-family: 'Space Grotesk', var(--font);
    /* Fluid title scale. Ceiling lowered to 2rem (req: compact header)
       from the former page-title size, which dominated the card. Scales
       from a 1.375rem floor on the narrowest viewports up to 2rem on
       desktop. clamp() covers the full range; the only per-breakpoint
       size override left is the 480px rule (1.75rem), still under the
       2rem cap. */
    font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--ink);
}

    .ihv-title.is-placeholder[b-6g4n0qxqta] {
        color: var(--ink-5);
        font-weight: var(--font-weight-regular);
    }

/* Inner section header — verdict label + confidence badge.
   Hairline above mirrors the foot-rail divider on .ih-stripe so
   the assessment region (headline + grade + crux + action) reads
   as a fenced block within the card, between two horizontal rules.
   Margin-top adds breathing room above the hairline (on top of the
   body's tight gap), creating a clear break between the identity
   zone above and the assessment zone below. */

.ihv-headline-row[b-6g4n0qxqta] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ihv-verdict-label[b-6g4n0qxqta] {
    font-family: var(--font);
    /* Fluid scale. Ceiling 0.9375rem matches the original big-screen
       ideal and binds from V≈800px upward (range is small so the
       cap engages early); floor 0.8125rem keeps it readable on
       narrow mobile. */
    font-size: clamp(0.8125rem, 0.6875rem + 0.5vw, 0.9375rem);
    font-weight: var(--font-weight-semibold);
    color: rgba(15, 23, 42, 0.80);
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.ihv-verdict-label--muted[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.50);
    font-weight: var(--font-weight-medium);
}

/* Awaiting variant — pending state when truly empty (no input yet).
   Distinct from --muted (transient status whisper) because this line
   is the headline of the empty state, not a passing status. Semibold
   weight + neutral ink at readable contrast. Pairs with the question
   mark in the grade tile. */

.ihv-verdict-label--awaiting[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.72);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.005em;
}

.ihv-verdict-label--error[b-6g4n0qxqta] {
    color: rgba(220, 38, 38, 0.85);
    font-weight: var(--font-weight-semibold);
}

/* Validation prompt — confidence-tiered surface that replaces the
   inline "Low/Medium Confidence" chip with an action-oriented
   message routing to the expert-review plan. Sits inside the
   verdict panel, below the assessment row, separated by a soft
   top hairline so it reads as enrichment to the assessment, not
   noise around it.

   Tier classes (.tier-low / .tier-medium) modulate the icon and
   border color. Layout: icon left, two-line message in the middle,
   CTA button right. Wraps on narrow viewports. */

.ihv-validation-prompt[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.08);
    flex-wrap: wrap;
    max-width: 640px;
}

.ihv-validation-prompt-icon[b-6g4n0qxqta] {
    font-size: 0.9375rem;
    color: rgba(15, 23, 42, 0.45);
    flex-shrink: 0;
}

.ihv-validation-prompt-body[b-6g4n0qxqta] {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ihv-validation-prompt-title[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(15, 23, 42, 0.72);
    line-height: 1.35;
}

.ihv-validation-prompt-text[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: rgba(15, 23, 42, 0.55);
    line-height: 1.4;
}

.ihv-validation-prompt-cta[b-6g4n0qxqta] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0;
    background: transparent;
    color: rgba(15, 23, 42, 0.65);
    border: 0;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: color 0.18s ease;
    flex-shrink: 0;
}

    .ihv-validation-prompt-cta:hover[b-6g4n0qxqta] {
        color: rgba(15, 23, 42, 0.90);
    }

        .ihv-validation-prompt-cta:hover i[b-6g4n0qxqta] {
            transform: translateX(2px);
        }

    .ihv-validation-prompt-cta:focus-visible[b-6g4n0qxqta] {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 2px;
    }

    .ihv-validation-prompt-cta i[b-6g4n0qxqta] {
        font-size: 0.6875rem;
        transition: transform 0.18s ease;
    }

/* Tier accents — low confidence reads as a soft warning; medium
   confidence reads as a quieter offer. Both stay within information-
   note register; neither uses alert-red, neither competes with the
   verdict label or the grade tile for attention. */

.ihv-validation-prompt.tier-low[b-6g4n0qxqta] {
    background: rgba(217, 119, 6, 0.03);
    border-color: rgba(217, 119, 6, 0.12);
}

    .ihv-validation-prompt.tier-low .ihv-validation-prompt-icon[b-6g4n0qxqta] {
        color: rgba(217, 119, 6, 0.60);
    }

.ihv-validation-prompt.tier-medium[b-6g4n0qxqta] {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.10);
}

    .ihv-validation-prompt.tier-medium .ihv-validation-prompt-icon[b-6g4n0qxqta] {
        color: rgba(15, 23, 42, 0.45);
    }

/* ─── Compact validation chip — a glance-level confidence flag in the
   headline row, tier-matched to the full .ihv-validation-prompt below.
   The prompt carries the action; this chip is just the at-a-glance tier
   signal beside the verdict. */

.ihv-validation-chip[b-6g4n0qxqta] {
    /* A button: tier signal + click-to-act. The explanation lives in
       the shared headline tooltip, so the pill carries no tooltip. */
    appearance: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

    .ihv-validation-chip i[b-6g4n0qxqta] {
        font-size: 0.75rem;
    }

    /* tier-low — amber attention (mirrors the prompt's low tier). */

    .ihv-validation-chip.tier-low[b-6g4n0qxqta] {
        background: rgba(217, 119, 6, 0.10);
        border-color: rgba(217, 119, 6, 0.30);
        color: #b45309;
    }

    /* tier-medium — quiet neutral (mirrors the prompt's medium tier). */

    .ihv-validation-chip.tier-medium[b-6g4n0qxqta] {
        background: rgba(15, 23, 42, 0.05);
        border-color: rgba(15, 23, 42, 0.14);
        color: var(--ink-3);
    }

    /* Hover lift on the tiers. */

    .ihv-validation-chip.tier-low:hover[b-6g4n0qxqta] {
        background: rgba(217, 119, 6, 0.16);
        border-color: rgba(217, 119, 6, 0.42);
    }

    .ihv-validation-chip.tier-medium:hover[b-6g4n0qxqta] {
        background: rgba(15, 23, 42, 0.08);
        border-color: rgba(15, 23, 42, 0.20);
    }

    .ihv-validation-chip:focus-visible[b-6g4n0qxqta] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* === SKELETON (running state) === */

.ihv-dots[b-6g4n0qxqta] {
    display: inline-flex;
    gap: 2px;
    margin-left: 0.25rem;
}

    .ihv-dots span[b-6g4n0qxqta] {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.4;
        animation: ihvDots-b-6g4n0qxqta 1.4s ease-in-out infinite;
    }

        .ihv-dots span:nth-child(2)[b-6g4n0qxqta] {
            animation-delay: 0.18s;
        }

        .ihv-dots span:nth-child(3)[b-6g4n0qxqta] {
            animation-delay: 0.36s;
        }

@keyframes ihvDots-b-6g4n0qxqta {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* === DISCUSS CTA — discrete ghost style with hover-reveal.
   Previously a solid brand-fill button; dialed back to a quiet
   outline link so it reads as a secondary affordance rather than
   a primary CTA. The verdict label and crux/action text are the
   foreground; this is the way INTO further conversation, offered
   gently. Still hover-revealed for graded states. */

.ihv-discuss-cta[b-6g4n0qxqta] {
    appearance: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    cursor: pointer;
    margin-top: 0.5rem;
    box-shadow: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

    .ihv-discuss-cta i[b-6g4n0qxqta] {
        font-size: 0.625rem;
        transition: transform 0.18s ease;
    }

    .ihv-discuss-cta:hover[b-6g4n0qxqta] {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    }

        .ihv-discuss-cta:hover i[b-6g4n0qxqta] {
            transform: translateX(2px);
        }

    .ihv-discuss-cta:focus-visible[b-6g4n0qxqta] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* Hover-reveal: visible only when panel is hovered or focused */

@media (hover: hover) {
    .ih-verdict-panel.state-graded:hover .ihv-discuss-cta[b-6g4n0qxqta],
    .ih-verdict-panel.state-graded:focus-within .ihv-discuss-cta[b-6g4n0qxqta] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* On touch devices keep CTA visible — affordance over animation */

@media (hover: none) {
    .ih-verdict-panel.state-graded .ihv-discuss-cta[b-6g4n0qxqta] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE — verdict panel ===
   Wide screens enjoy the full 15rem title right-padding so titles
   fold early, leaving generous breathing room around the info icon
   in the top-right. As width decreases, we shrink that padding
   progressively so titles get more horizontal room before wrapping,
   then reduce the pair-text and grade tile sizes for the narrowest
   viewports. */

@media (max-width: 1200px) {
    .ihv-title[b-6g4n0qxqta] {
        padding-right: 3rem;
    }
}

@media (max-width: 960px) {
    /* Per-breakpoint font/size overrides for .ihv-title, .ihv-grade,
       .ihv-grade-letter and .ihv-pair-text removed — they're handled
       by clamp() in the base rules now and scale smoothly from
       mobile up to desktop. */

    .ihv-title[b-6g4n0qxqta] {
        /* Title right-padding still needs explicit collapse — the
           clamp on font-size doesn't help with horizontal real-estate. */
        padding-right: 1.5rem;
    }
}

@media (max-width: 720px) {
    /* On narrow screens the assessment block stacks: grade above
       verdict content. Keeps both readable without horizontal squeeze.
       Per-breakpoint font/size overrides removed — clamp() in the
       base rules handles smooth scaling all the way down. */

    .ihv-title[b-6g4n0qxqta] {
        /* Tightest viewport — right-padding dropped entirely so the
           title gets full width. Font-size handled by clamp(). */
        padding-right: 0;
    }

    .ihv-grade[b-6g4n0qxqta] {
        /* Tile size is fluid; only the border-radius gets a tactile
           tweak at this breakpoint. */
        border-radius: 12px;
    }

    .ihv-discuss-cta[b-6g4n0qxqta] {
        font-size: 0.75rem;
        padding: 0.4375rem 0.75rem 0.4375rem 0.5625rem;
    }

    .ihv-headline-row[b-6g4n0qxqta] {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .ihv-title[b-6g4n0qxqta] {
        font-size: 1.75rem;
    }

    .ihv-grade[b-6g4n0qxqta] {
        width: 3.5rem;
        min-height: 3.5rem;
    }

    .ihv-grade-letter[b-6g4n0qxqta] {
        font-size: 1.75rem;
    }
}

/* ─── Responsive: collapse the headline row gracefully ───────
   Stack the doc widget below the title row before the layout has
   any chance to feel cramped. Above 1400px we have generous room
   in the left column; below that the title and judge line take
   the full row. Mobile-specific judge/badge tweaks stay at their
   own breakpoints. */

@media (max-width: 768px) {
    .ih-headline[b-6g4n0qxqta] {
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 480px) {
    .ih-headline-text[b-6g4n0qxqta] {
        gap: 0.75rem;
    }
}

/* Tiny sparkle wobble on the wand icon when widget is hovered.
   Suggests "magic about to happen" — restrained, fires once. */

/* ─── Generating state ──────────────────────────────────────── */

/* ─── Detail panel for selected layer ──────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   EXPERIMENT — Dark header theme
   ───────────────────────────────────────────────────────────────
   Activate by adding data-theme="dark" to .section-header:
       <section class="section section-header" data-theme="dark">

   Strategic intent: turn the header from "magazine masthead" into
   "command center." Dark surface lets the brand pink GLOW (it
   couldn't on cream). White-warm typography reads as authored.
   Confidence and verdict colours brighten to remain legible on
   dark. The grade tile flips to a luminous treatment.

   This is a self-contained override block. Every rule is scoped
   to .section-header[data-theme="dark"] descendant. Remove the
   attribute and the cream theme returns instantly — no rebuild
   of base rules required.
   ═══════════════════════════════════════════════════════════════ */

.section-header[data-theme="dark"][b-6g4n0qxqta] {
    /* DUSK tone — violet-slate. */
    /*background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(240, 12, 113, 0.09) 0%, transparent 60%), linear-gradient(180deg, #38314a 0%, #2c2638 100%);*/
    /*background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(240, 12, 113, 0.42) 0%, transparent 70%), linear-gradient(180deg, #320d24 0%, #1a0815 100%);*/
    /*background: radial-gradient(ellipse 75% 95% at 50% 0%, rgba(240, 12, 113, 0.40) 0%, transparent 65%), linear-gradient(180deg, #0a1430 0%, #050a1f 100%);*/
    /* SLATE — neutral near-black. Pink radial glow dropped so the white title and the tier letter grade carry the contrast instead of competing with a chromatic surface. Navy original kept commented above. */
    background: linear-gradient(180deg, #1a212c 0%, #0e131b 100%);
    /* No bottom border. The active tab is filled with the workspace
       colour and sits on the card's bottom edge; a line here would cut
       the tab off from the page surface below. Without it the active
       tab merges straight into the content area. (Was a 1px light line,
       a leftover from the old full-bleed fold.) */
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    color: #f5f3ee;
}

    /* Brand spine — brighter on dusk to glow rather than recede */

    .section-header[data-theme="dark"][b-6g4n0qxqta]::before {
        background: linear-gradient(90deg, transparent 0%, rgba(240, 12, 113, 0.45) 25%, rgba(240, 12, 113, 0.85) 50%, rgba(240, 12, 113, 0.45) 75%, transparent 100%);
    }

    /* ─── Identity row ───────────────────────────────────────────── */

    .section-header[data-theme="dark"] .ihv-codename[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.14);
        color: rgba(255, 255, 255, 0.70);
    }

        .section-header[data-theme="dark"] .ihv-codename i[b-6g4n0qxqta] {
            color: rgba(255, 255, 255, 0.50);
        }

        .section-header[data-theme="dark"] .ihv-codename.is-untitled[b-6g4n0qxqta] {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.20);
            color: rgba(255, 255, 255, 0.50);
        }

            .section-header[data-theme="dark"] .ihv-codename.is-untitled i[b-6g4n0qxqta] {
                color: rgba(255, 255, 255, 0.45);
            }

    /* ─── Title ──────────────────────────────────────────────────── */

    .section-header[data-theme="dark"] .ihv-title[b-6g4n0qxqta] {
        color: #f5f3ee;
    }

        .section-header[data-theme="dark"] .ihv-title.is-placeholder[b-6g4n0qxqta] {
            color: rgba(255, 255, 255, 0.40);
        }

    /* ─── Headline row (verdict + confidence) ────────────────────── */

    .section-header[data-theme="dark"] .ihv-headline-row[b-6g4n0qxqta] {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .section-header[data-theme="dark"] .ihv-verdict-label[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.85);
    }

    .section-header[data-theme="dark"] .ihv-verdict-label--muted[b-6g4n0qxqta] {
        color: rgba(255, 255, 255, 0.45);
    }

    /* Awaiting variant — empty-state headline. Solid soft-white at
       72% so it reads as a real line, not a placeholder ghost. The
       title above sits at 40% (placeholder) and this lands clearly
       above it in hierarchy without competing with the actual title
       once the user fills it in. */

    .section-header[data-theme="dark"] .ihv-verdict-label--awaiting[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.72);
    }

    /* Running tile cycling letter on dark — brand-pink at higher
       opacity for visibility against the dusk panel. Pairs with the
       border+background pulse on .ihv-grade--running. */

    .section-header[data-theme="dark"] .ihv-grade-cycle[b-6g4n0qxqta] {
        color: rgba(255, 105, 165, 0.92);
    }

    .section-header[data-theme="dark"] .ihv-verdict-label--error[b-6g4n0qxqta] {
        color: #fca5a5;
    }

    /* Validation prompt on dark — soft surface readable against the
       dusk backdrop, tier accents quieter than light theme but still
       distinct between low and medium. */

    .section-header[data-theme="dark"] .ihv-validation-prompt[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.10);
    }

    .section-header[data-theme="dark"] .ihv-validation-prompt-icon[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.55);
    }

    .section-header[data-theme="dark"] .ihv-validation-prompt-title[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.78);
    }

    .section-header[data-theme="dark"] .ihv-validation-prompt-text[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.55);
    }

    .section-header[data-theme="dark"] .ihv-validation-prompt-cta[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.65);
    }

        .section-header[data-theme="dark"] .ihv-validation-prompt-cta:hover[b-6g4n0qxqta] {
            color: rgba(245, 243, 238, 0.95);
        }

    .section-header[data-theme="dark"] .ihv-validation-prompt.tier-low[b-6g4n0qxqta] {
        background: rgba(217, 119, 6, 0.06);
        border-color: rgba(217, 119, 6, 0.20);
    }

        .section-header[data-theme="dark"] .ihv-validation-prompt.tier-low .ihv-validation-prompt-icon[b-6g4n0qxqta] {
            color: rgba(251, 191, 36, 0.65);
        }

    .section-header[data-theme="dark"] .ihv-validation-prompt.tier-medium[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
    }

        .section-header[data-theme="dark"] .ihv-validation-prompt.tier-medium .ihv-validation-prompt-icon[b-6g4n0qxqta] {
            color: rgba(245, 243, 238, 0.55);
        }

    /* Compact validation chip on the dusk header — tier-matched to the
       full prompt's dusk overrides. */

    .section-header[data-theme="dark"] .ihv-validation-chip.tier-low[b-6g4n0qxqta] {
        background: rgba(217, 119, 6, 0.16);
        border-color: rgba(251, 191, 36, 0.40);
        color: rgba(251, 191, 36, 0.92);
    }

    .section-header[data-theme="dark"] .ihv-validation-chip.tier-medium[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.16);
        color: rgba(245, 243, 238, 0.78);
    }

    /* Dusk hover — visible feedback on the dark card (the appearing
       tooltip is the primary cue; this adds a touch of surface). */

    .section-header[data-theme="dark"] .ihv-validation-chip.tier-low:hover[b-6g4n0qxqta] {
        background: rgba(217, 119, 6, 0.24);
        border-color: rgba(251, 191, 36, 0.55);
    }

    .section-header[data-theme="dark"] .ihv-validation-chip.tier-medium:hover[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.26);
    }

    /* ─── Discuss CTA — brighter ghost on dark ───────────────────── */

    .section-header[data-theme="dark"] .ihv-discuss-cta[b-6g4n0qxqta] {
        border-color: rgba(240, 12, 113, 0.40);
        color: #f9a8d4;
    }

        .section-header[data-theme="dark"] .ihv-discuss-cta:hover[b-6g4n0qxqta] {
            background: rgba(240, 12, 113, 0.12);
            border-color: rgba(240, 12, 113, 0.60);
            color: #fbcfe8;
        }

    /* ─── Grade tile — luminous treatment on dark ────────────────── */

    .section-header[data-theme="dark"] .ihv-grade[b-6g4n0qxqta] {
        --tier-bg: rgba(255, 255, 255, 0.04);
        --tier-border: rgba(255, 255, 255, 0.10);
        background: var(--tier-bg);
        border-color: var(--tier-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

    .section-header[data-theme="dark"] .ihv-grade-letter[b-6g4n0qxqta] {
        /* Default to brand pink — the letter is never white. Tier-specific
       overrides below take precedence when a known tier class is set
       (strong = green, mixed = amber, weak/failed = red). For any
       other tier value or unstyled state, the letter glows brand pink. */
        color: var(--accent);
    }

    /* Empty-state hero — dark theme. Title is bright (this is the
       directive the user reads first); sub is softer (supporting
       context); arrow keeps brand pink with a slightly stronger
       border on dark to read against the dusk backdrop. */

    .section-header[data-theme="dark"] .iv-empty-hero-sub[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.68);
    }

    .section-header[data-theme="dark"] .iv-empty-hero-arrow[b-6g4n0qxqta] {
        background: rgba(240, 12, 113, 0.14);
        border-color: rgba(240, 12, 113, 0.38);
        color: rgba(255, 105, 165, 0.95);
    }

    .section-header[data-theme="dark"] .ihv-grade-modifier[b-6g4n0qxqta] {
        color: rgba(255, 255, 255, 0.55);
    }

    /* Running tile pulse on dark — uses a brighter brand-pink than
       light theme since the dusk backdrop swallows weaker accents.
       The animation override keeps the timing identical (1.8s, ease
       in/out) but lifts the color values so the breathe reads at
       a comfortable intensity against the dark surface. */

    .section-header[data-theme="dark"] .ihv-grade--running[b-6g4n0qxqta] {
        animation: ihvGradeRunningPulseDark-b-6g4n0qxqta 1.8s ease-in-out infinite;
    }

@keyframes ihvGradeRunningPulseDark-b-6g4n0qxqta {
    0%, 100% {
        background: rgba(240, 12, 113, 0.05);
        border-color: rgba(240, 12, 113, 0.40);
    }

    50% {
        background: rgba(240, 12, 113, 0.14);
        border-color: rgba(255, 105, 165, 0.80);
    }
}

.section-header[data-theme="dark"] .ihv-grade-score[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.65);
}

.section-header[data-theme="dark"] .ihv-score-unit[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.40);
}

.section-header[data-theme="dark"] .ihv-empty-dash[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.35);
}

/* Tier-specific grade tile treatment — the whole tile is the stamp.
   Uses the actual tier class names from the codebase (great / good /
   moderate / poor — NOT strong / mixed / weak / failed which I had
   wrong earlier). Each tier gets a coordinated treatment:

       background wash        — tier colour at 14% alpha
       border                 — tier colour at 50% alpha
       outer glow halo        — tier colour at 26% alpha (zero-offset)
       letter                 — bright tier colour for legibility

   Together these read as a "stamp" pressed onto the dusk surface —
   the tile is the eye's first stop in the assessment row. */

.section-header[data-theme="dark"] .ihv-grade.tier-great[b-6g4n0qxqta] {
    --tier-bg: rgba(74, 222, 128, 0.14);
    --tier-border: rgba(74, 222, 128, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(74, 222, 128, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-great .ihv-grade-letter[b-6g4n0qxqta] {
        color: #86efac;
    }

.section-header[data-theme="dark"] .ihv-grade.tier-good[b-6g4n0qxqta] {
    --tier-bg: rgba(163, 230, 53, 0.14);
    --tier-border: rgba(163, 230, 53, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(163, 230, 53, 0.24), 0 8px 20px rgba(0, 0, 0, 0.30);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-good .ihv-grade-letter[b-6g4n0qxqta] {
        color: #bef264;
    }

.section-header[data-theme="dark"] .ihv-grade.tier-moderate[b-6g4n0qxqta] {
    --tier-bg: rgba(251, 146, 60, 0.14);
    --tier-border: rgba(251, 146, 60, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(251, 146, 60, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-moderate .ihv-grade-letter[b-6g4n0qxqta] {
        color: #fdba74;
    }

.section-header[data-theme="dark"] .ihv-grade.tier-poor[b-6g4n0qxqta] {
    --tier-bg: rgba(248, 113, 113, 0.14);
    --tier-border: rgba(248, 113, 113, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(248, 113, 113, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-poor .ihv-grade-letter[b-6g4n0qxqta] {
        color: #fca5a5;
    }

/* ─── Foot-rail (meta strip) ─────────────────────────────────── */

.section-header[data-theme="dark"] .ih-meta-strip[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.55);
}

.section-header[data-theme="dark"] .ih-meta-strip-item[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.55);
}

    .section-header[data-theme="dark"] .ih-meta-strip-item i[b-6g4n0qxqta] {
        color: rgba(255, 255, 255, 0.35);
    }

.section-header[data-theme="dark"] .ih-meta-strip-sep[b-6g4n0qxqta] {
    color: rgba(255, 255, 255, 0.20);
}

/* ═══════════════════════════════════════════════════════════════
   DUSK THEME — workspace tint
   ───────────────────────────────────────────────────────────────
   When the header uses data-theme="dark" (dusk violet-slate), the
   workspace below shifts from warm-neutral (#f4f2ed, paired with
   the cream theme) to a barely-violet white (#f5f3f8). The shift
   is subtle — the viewer reads as "same colour family as the
   header" without going dark or losing the light-reading surface.

   Applied to all workspace sections via sibling selector. Cream
   theme is unaffected — its workspace stays warm-neutral.
   ═══════════════════════════════════════════════════════════════ */

.section-header[data-theme="dark"] ~ .section-tabs[b-6g4n0qxqta],
.section-header[data-theme="dark"] ~ .section-assessment[b-6g4n0qxqta],
.section-header[data-theme="dark"] ~ .section-elements[b-6g4n0qxqta],
.section-header[data-theme="dark"] ~ .section-personas[b-6g4n0qxqta],
.section-header[data-theme="dark"] ~ .section-market-outlook[b-6g4n0qxqta],
.section-header[data-theme="dark"] ~ .section-competitive[b-6g4n0qxqta] {
    background: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
       COACH-BACK HINT — header variant on dark
       ───────────────────────────────────────────────────────────────
       The base .sh-coach-back uses a light surface (var(--surface))
       with a dashed border, which clashes badly when the panel sits
       inside the dark header. Override only the --header variant so
       the body-tab versions (Market, Competition, Personas) keep
       their light treatment. The arrow icon stays accent-pink (hand-
       off cue), but text shifts to soft white and the surface becomes
       a barely-there translucent wash that reads as a quiet card on
       the dusk backdrop rather than a foreign white tile.
       ═══════════════════════════════════════════════════════════════ */

.section-header[data-theme="dark"] .sh-coach-back--header[b-6g4n0qxqta] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(245, 243, 238, 0.78);
}

    .section-header[data-theme="dark"] .sh-coach-back--header strong[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.95);
    }

    .section-header[data-theme="dark"] .sh-coach-back--header i[b-6g4n0qxqta] {
        color: rgba(255, 105, 165, 0.92);
    }

/* ═══════════════════════════════════════════════════════════════
       DUSK THEME — folder tabs on the card's bottom edge
       ───────────────────────────────────────────────────────────────
       Self-contained override block, same pattern as the dusk header
       overrides above. The tabs sit on the card's bottom border.
       Inactive tabs are quiet text on the dark card; the active tab is
       filled with the workspace colour (#f7f7f7) and rounded at the top
       only, so it reads as a notch opening into the light surface that
       surrounds and follows the card — header and content as one piece.
       Remove this block and the tabs revert to light-band styling. */

.section-header[data-theme="dark"] .ih-tabrail[b-6g4n0qxqta] {
    border-top: none;
}

/* Inactive tab — a subtle glass fill + hairline border (top and
       sides, open at the bottom) signal it is a clickable tab rather
       than plain text. Extra top padding gives the icon/label room. */

.section-header[data-theme="dark"] .iv-pill[b-6g4n0qxqta] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: none;
    padding: 0.95rem 1rem 0.6rem;
}

    .section-header[data-theme="dark"] .iv-pill:hover:not(.is-active)[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.20);
        box-shadow: none;
    }

    /* Icon chip — translucent white on the dark card. */

    .section-header[data-theme="dark"] .iv-pill .iv-pill-icon[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.10);
        color: rgba(255, 255, 255, 0.85);
    }

    /* Active tab — filled with the workspace colour, dark text. Sits
       flush on the card's bottom border so the tab and the light
       surface below read as one continuous piece. */

    .section-header[data-theme="dark"] .iv-pill.is-active[b-6g4n0qxqta] {
        background: #ffffff;
        color: var(--ink);
        /* Transparent 1px border (bottom open) so the active tab keeps
           the exact same box as the bordered inactive tabs and their
           tops stay aligned. The fill shows through (border-box). */
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        box-shadow: none;
    }

        .section-header[data-theme="dark"] .iv-pill.is-active:hover[b-6g4n0qxqta] {
            background: #ffffff;
            color: var(--ink);
        }

        /* Icon chip on the light active tab — quiet dark-on-light. */

        .section-header[data-theme="dark"] .iv-pill.is-active .iv-pill-icon[b-6g4n0qxqta] {
            background: rgba(15, 23, 42, 0.06);
            color: var(--ink);
        }

    /* Status dots. Inactive tabs sit on the dark card → idle ring
       lifted to light. The active tab is light → idle ring reverts to
       the dark-grey default so it stays visible. */

    .section-header[data-theme="dark"] .iv-pill:not(.is-active) .iv-pill-status--idle[b-6g4n0qxqta] {
        border-color: rgba(255, 255, 255, 0.45);
        opacity: 0.9;
    }

    .section-header[data-theme="dark"] .iv-pill.is-active .iv-pill-status--idle[b-6g4n0qxqta] {
        border-color: var(--ink-6);
        opacity: 0.75;
    }

/* ─── Header surface → lifted light card on the grey page ───────── */

.section-header[data-theme="dark"][b-6g4n0qxqta] {
    margin: 0;
    width: 100%;
    border: none;
    border-radius: 16px 16px 0 0;
    background: #f8f6f1;
    color: var(--ink);
    /* Warm-frame header — the analytical canvas below is white; this band
       is the subtle warm frame. Soft downward seam onto the white content. */
    box-shadow: 0 6px 18px -14px rgba(40, 34, 24, 0.18);
}

    /* Brand spine removed — the full-bleed top line read as ambiguous
       (progress bar? brand mark?) and forced full-width positioning for
       no real gain. The header surface alone marks the top of the viewer. */

    .section-header[data-theme="dark"][b-6g4n0qxqta]::before {
        display: none;
    }

    /* ─── Chrome text → dark-on-light (overrides the dark-theme light text
   for everything that now sits on the white card, i.e. everything
   OUTSIDE the verdict panel). ──────────────────────────────────── */

    .section-header[data-theme="dark"] .ihv-title[b-6g4n0qxqta] {
        color: var(--ink);
    }

        .section-header[data-theme="dark"] .ihv-title.is-placeholder[b-6g4n0qxqta] {
            color: var(--ink-5);
        }

    .section-header[data-theme="dark"] .ihv-codename[b-6g4n0qxqta] {
        background: rgba(15, 23, 42, 0.06);
        border-color: rgba(15, 23, 42, 0.16);
        color: var(--ink-1);
    }

        .section-header[data-theme="dark"] .ihv-codename i[b-6g4n0qxqta] {
            color: var(--ink-5);
        }

        .section-header[data-theme="dark"] .ihv-codename.is-untitled[b-6g4n0qxqta] {
            background: transparent;
            border-color: rgba(15, 23, 42, 0.14);
            color: var(--ink-5);
        }

    .section-header[data-theme="dark"] .ih-meta-strip[b-6g4n0qxqta],
    .section-header[data-theme="dark"] .ih-meta-strip-item[b-6g4n0qxqta] {
        color: var(--ink-5);
    }

        .section-header[data-theme="dark"] .ih-meta-strip-item i[b-6g4n0qxqta] {
            color: var(--ink-6);
        }

    .section-header[data-theme="dark"] .ih-meta-strip-sep[b-6g4n0qxqta] {
        color: var(--ink-7);
    }

    /* Empty-state hero → dark-on-light (was bright-on-dusk). */

    .section-header[data-theme="dark"] .iv-empty-hero-sub[b-6g4n0qxqta] {
        color: var(--ink-5);
    }

    .section-header[data-theme="dark"] .iv-empty-hero-arrow[b-6g4n0qxqta] {
        background: rgba(240, 12, 113, 0.08);
        border-color: rgba(240, 12, 113, 0.30);
        color: var(--accent);
    }

    /* ─── The dark verdict object ───────────────────────────────────────
   The single dark element on the light header. Neutral-dark base; the
   score tier rides ONLY on the 4px left rim and a faint top glow, with
   the grade tile carrying the saturated hue (tile colours come from the
   existing dark-theme tier rules above, reused unchanged). The body
   stays neutral in every tier — authority, not alarm: a poor verdict is
   a red-edged panel, not a red panel. */

    .section-header[data-theme="dark"] .ih-verdict-panel[b-6g4n0qxqta] {
        /* --vp-* let the panel echo the score tier in a whisper (set by the
       tier :has() rules in §v4.2); white is the neutral default — a clean
       white card on the warm header band. */
        --vp-top: #ffffff;
        --vp-bot: #ffffff;
        --vp-edge: rgba(40, 34, 24, 0.10);
        position: relative;
        container-type: inline-size;
        background: linear-gradient(180deg, var(--vp-top) 0%, var(--vp-bot) 100%);
        border: 1px solid var(--vp-edge);
        border-radius: 16px;
        padding: 1.1rem 1.35rem;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(40, 34, 24, 0.05), 0 14px 34px -24px rgba(40, 34, 24, 0.16);
        transition: background 0.18s ease, border-color 0.18s ease;
    }

        /* Neutralise the base panel's negative-margin "hover hit-area" trick
       (it assumed a transparent panel); the panel is now a real card. */

        .section-header[data-theme="dark"] .ih-verdict-panel.state-graded[b-6g4n0qxqta],
        .section-header[data-theme="dark"] .ih-verdict-panel.state-error[b-6g4n0qxqta] {
            margin: 0;
            padding: 1.1rem 1.35rem;
            border-radius: 16px;
        }

            .section-header[data-theme="dark"] .ih-verdict-panel.state-graded:hover[b-6g4n0qxqta],
            .section-header[data-theme="dark"] .ih-verdict-panel.state-error:hover[b-6g4n0qxqta] {
                background: linear-gradient(180deg, color-mix(in srgb, var(--vp-top) 88%, #ffffff) 0%, color-mix(in srgb, var(--vp-bot) 89%, #ffffff) 100%);
            }

        .section-header[data-theme="dark"] .ih-verdict-panel:focus-visible[b-6g4n0qxqta] {
            outline: 2px solid rgba(240, 12, 113, 0.55);
            outline-offset: 3px;
            border-radius: 16px;
        }

/* ─── One avatar system — owner + evaluator stack share size + ring ──
   Defined once, reused for both contexts. Only the ring colour changes
   (to match the surface behind it) and the owner is a touch smaller;
   nothing else is restyled per-context, so the two never drift. Photo
   sets background-image; initials are the fallback child text. */

.ih-avatar[b-6g4n0qxqta] {
    --ih-av-size: 24px;
    --ih-av-ring: #ffffff;
    flex: 0 0 auto;
    width: var(--ih-av-size);
    height: var(--ih-av-size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    background-color: #CECBF6;
    color: #3C3489;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--ih-av-ring);
    user-select: none;
}

/* Owner avatar — in the meta line, on the white card. */

.ih-owner-avatar[b-6g4n0qxqta] {
    --ih-av-size: 26px;
    --ih-av-ring: #ffffff;
    cursor: default;
}

/* Evaluator stack — inside the dark panel; ring matches the panel so the
   overlap reads as stacked, not merged. Faces only appear once revealed
   (count >= threshold); below that the markup emits the count form, not
   this stack. */

.ihv-evaluators[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
}

    .ihv-evaluators .ih-avatar[b-6g4n0qxqta] {
        --ih-av-ring: #ffffff;
        margin-left: -8px;
    }

        .ihv-evaluators .ih-avatar:first-child[b-6g4n0qxqta] {
            margin-left: 0;
        }

/* Evaluator meta line inside the panel (faces/count + confidence word). */

.ihv-evaluator-line[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    font-size: 0.78rem;
    color: rgba(15, 23, 42, 0.55);
}

/* Quiet "Strengthen" action — the relocated enlist-more affordance. */

.ihv-strengthen[b-6g4n0qxqta] {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    font-size: 0.78rem;
    color: rgba(249, 168, 212, 0.85);
}

    .ihv-strengthen:hover[b-6g4n0qxqta] {
        color: #fbcfe8;
    }

/* Ready-state CTA — "Enlist for assessment". */

.ihv-enlist-cta[b-6g4n0qxqta] {
    appearance: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.82);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    padding: 0.5rem 0.875rem;
}

    .ihv-enlist-cta:hover[b-6g4n0qxqta] {
        background: rgba(240, 12, 113, 0.08);
        border-color: rgba(240, 12, 113, 0.40);
        color: var(--accent);
    }

/* ─── Tabs → light folder-tabs + status folded into the icon ─────────
   The dark-theme tab rules above style translucent-white pills for a
   dark card; on the white card they vanish. Repaint them as light
   folder-tabs, then encode each section's status ON the icon and hide
   the separate status dot (req #7: one indicator, not two). */

.section-header[data-theme="dark"] .iv-pill[b-6g4n0qxqta] {
    background: #ece7de;
    color: var(--ink-3);
    border: 1px solid rgba(40, 34, 24, 0.12);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: none;
    padding: 0.8rem 1rem 0.7rem;
}

    .section-header[data-theme="dark"] .iv-pill:hover:not(.is-active)[b-6g4n0qxqta] {
        background: #e3ddd1;
        color: var(--ink);
        border-color: rgba(40, 34, 24, 0.20);
        box-shadow: none;
    }

    .section-header[data-theme="dark"] .iv-pill .iv-pill-icon[b-6g4n0qxqta] {
        position: relative;
        background: rgba(15, 23, 42, 0.05);
        color: var(--ink-3);
    }

    /* Active tab — fills with the workspace colour and opens into the
       content below (folder notch). */

    .section-header[data-theme="dark"] .iv-pill.is-active[b-6g4n0qxqta] {
        background: #ffffff;
        color: var(--ink);
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        box-shadow: none;
    }

        .section-header[data-theme="dark"] .iv-pill.is-active:hover[b-6g4n0qxqta] {
            background: #ffffff;
            color: var(--ink);
        }

        .section-header[data-theme="dark"] .iv-pill.is-active .iv-pill-icon[b-6g4n0qxqta] {
            background: rgba(15, 23, 42, 0.06);
            color: var(--ink);
        }

/* Hide the standalone status dot — the icon now carries state. */

.section-header[data-theme="dark"] .iv-pill-status[b-6g4n0qxqta] {
    display: none;
}

/* done → success-tinted icon (no glyph needed; the tint reads as
       "complete"). */

.section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--done) .iv-pill-icon[b-6g4n0qxqta] {
    background: #EAF3DE;
    color: #3B6D11;
}

.section-header[data-theme="dark"] .iv-pill.is-active:has(.iv-pill-status--done) .iv-pill-icon[b-6g4n0qxqta] {
    background: #EAF3DE;
    color: #3B6D11;
}

/* running → spinner ring around the icon. */

.section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--running) .iv-pill-icon[b-6g4n0qxqta] {
    color: var(--accent);
}

    .section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--running) .iv-pill-icon[b-6g4n0qxqta]::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        border: 1.5px solid rgba(240, 12, 113, 0.22);
        border-top-color: var(--accent);
        animation: ivPillSpin-b-6g4n0qxqta 0.9s linear infinite;
    }

@keyframes ivPillSpin-b-6g4n0qxqta {
    to {
        transform: rotate(360deg);
    }
}

/* stale → dimmed icon + a single amber corner dot. */

.section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--stale) .iv-pill-icon[b-6g4n0qxqta] {
    opacity: 0.6;
}

    .section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--stale) .iv-pill-icon[b-6g4n0qxqta]::after {
        content: "";
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #BA7517;
        border: 1.5px solid #ffffff;
    }

/* failed → red-tinted icon. */

.section-header[data-theme="dark"] .iv-pill:has(.iv-pill-status--failed) .iv-pill-icon[b-6g4n0qxqta] {
    background: #FCEBEB;
    color: #A32D2D;
}

/* ─── Three-column composition (req: score | crux+meta | confidence+CTA) ─
   align-items:stretch so the hairline dividers span the panel height; each
   column vertically centres its own content. */

.section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
    display: flex;
    align-items: stretch;
}

/* Crux — bullseye + text, left aligned, fills the middle column width. */

.section-header[data-theme="dark"] .ihv-crux[b-6g4n0qxqta] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

    .section-header[data-theme="dark"] .ihv-crux i[b-6g4n0qxqta] {
        flex: 0 0 auto;
        margin-top: 0.15rem;
        font-size: 0.9rem;
        color: rgba(15, 23, 42, 0.42);
    }

    .section-header[data-theme="dark"] .ihv-crux p[b-6g4n0qxqta] {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.5;
        color: rgba(15, 23, 42, 0.72);
    }

/* Confidence line + tier dot. */

.section-header[data-theme="dark"] .ihv-conf-line[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.72);
}

.section-header[data-theme="dark"] .ihv-conf-dot[b-6g4n0qxqta] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.30);
}

.section-header[data-theme="dark"] .ihv-conf-dot--low[b-6g4n0qxqta] {
    background: #D85A30;
}

.section-header[data-theme="dark"] .ihv-conf-dot--medium[b-6g4n0qxqta] {
    background: #EF9F27;
}

.section-header[data-theme="dark"] .ihv-conf-dot--high[b-6g4n0qxqta] {
    background: #639922;
}

/* Evaluators row + count fallback (shown below the reveal threshold). */

.section-header[data-theme="dark"] .ihv-evaluators-row[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* explicit air — must not depend on margin-left:auto having room */
}

.section-header[data-theme="dark"] .ihv-eval-count[b-6g4n0qxqta] {
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.50);
}

/* Strengthen → premium pill (overrides the v4 text-link form above). */

.section-header[data-theme="dark"] .ihv-strengthen[b-6g4n0qxqta] {
    align-self: center;
    margin-left: auto;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 9px;
    padding: 0.4rem 0.8rem;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.82);
}

    .section-header[data-theme="dark"] .ihv-strengthen:hover[b-6g4n0qxqta] {
        background: rgba(240, 12, 113, 0.06);
        border-color: rgba(240, 12, 113, 0.38);
        color: var(--accent);
    }

/* Grade tile — saturated light fill, dark tier letter, soft lift (no glow). */

.section-header[data-theme="dark"] .ihv-grade[b-6g4n0qxqta] {
    --tier-bg: rgba(15, 23, 42, 0.04);
    --tier-border: rgba(15, 23, 42, 0.14);
    background: var(--tier-bg);
    border-color: var(--tier-border);
    box-shadow: 0 5px 14px -9px rgba(15, 23, 42, 0.30);
}

.section-header[data-theme="dark"] .ihv-grade-letter[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-grade-score[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-grade-modifier[b-6g4n0qxqta] {
    color: var(--tier-fg);
}

.section-header[data-theme="dark"] .ihv-grade.tier-great[b-6g4n0qxqta] {
    --tier-bg: color-mix(in srgb, #16a34a 22%, #ffffff);
    --tier-border: rgba(22, 163, 74, 0.42);
    box-shadow: 0 6px 16px -10px rgba(22, 163, 74, 0.45);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-great .ihv-grade-letter[b-6g4n0qxqta] {
        color: var(--tier-fg);
    }

.section-header[data-theme="dark"] .ihv-grade.tier-good[b-6g4n0qxqta] {
    --tier-bg: color-mix(in srgb, #65a30d 22%, #ffffff);
    --tier-border: rgba(101, 163, 13, 0.42);
    box-shadow: 0 6px 16px -10px rgba(101, 163, 13, 0.42);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-good .ihv-grade-letter[b-6g4n0qxqta] {
        color: var(--tier-fg);
    }

.section-header[data-theme="dark"] .ihv-grade.tier-moderate[b-6g4n0qxqta] {
    --tier-bg: color-mix(in srgb, #ea580c 22%, #ffffff);
    --tier-border: rgba(234, 88, 12, 0.42);
    box-shadow: 0 6px 16px -10px rgba(234, 88, 12, 0.48);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-moderate .ihv-grade-letter[b-6g4n0qxqta] {
        color: var(--tier-fg);
    }

.section-header[data-theme="dark"] .ihv-grade.tier-poor[b-6g4n0qxqta] {
    --tier-bg: color-mix(in srgb, #dc2626 20%, #ffffff);
    --tier-border: rgba(220, 38, 38, 0.42);
    box-shadow: 0 6px 16px -10px rgba(220, 38, 38, 0.45);
}

    .section-header[data-theme="dark"] .ihv-grade.tier-poor .ihv-grade-letter[b-6g4n0qxqta] {
        color: var(--tier-fg);
    }

/* Non-graded tile states → light. */

.section-header[data-theme="dark"] .ihv-grade--running[b-6g4n0qxqta] {
    animation: ihvGradeRunningPulse-b-6g4n0qxqta 1.8s ease-in-out infinite;
}

.section-header[data-theme="dark"] .ihv-grade-cycle[b-6g4n0qxqta] {
    color: rgba(240, 12, 113, 0.85);
}

/* Classification text → dark-on-light. */

.section-header[data-theme="dark"] .ihv-headline-row[b-6g4n0qxqta] {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.section-header[data-theme="dark"] .ihv-verdict-label[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.82);
}

.section-header[data-theme="dark"] .ihv-verdict-label--muted[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.50);
}

.section-header[data-theme="dark"] .ihv-verdict-label--awaiting[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.72);
}

.section-header[data-theme="dark"] .ihv-verdict-label--error[b-6g4n0qxqta] {
    color: rgba(220, 38, 38, 0.85);
}

/* ─── v4.2 — panel echoes the score tier in a whisper ───────────────
   A barely-there wash of the tier hue, set via :has() off the tile's
   tier class (no markup change). The tile stays the one saturated
   element; this only tilts the surface tone so it agrees with the
   grade. The negative tier is kept the faintest, so the panel reads as
   composed, never as an alarm. */

.section-header[data-theme="dark"] .ih-verdict-panel:has(.ihv-grade.tier-great)[b-6g4n0qxqta] {
    --vp-top: color-mix(in srgb, #16a34a 6%, #ffffff);
    --vp-bot: color-mix(in srgb, #16a34a 4%, #ffffff);
    --vp-edge: rgba(22, 163, 74, 0.22);
}

.section-header[data-theme="dark"] .ih-verdict-panel:has(.ihv-grade.tier-good)[b-6g4n0qxqta] {
    --vp-top: color-mix(in srgb, #65a30d 6%, #ffffff);
    --vp-bot: color-mix(in srgb, #65a30d 4%, #ffffff);
    --vp-edge: rgba(101, 163, 13, 0.22);
}

.section-header[data-theme="dark"] .ih-verdict-panel:has(.ihv-grade.tier-moderate)[b-6g4n0qxqta] {
    --vp-top: color-mix(in srgb, #ea580c 6%, #ffffff);
    --vp-bot: color-mix(in srgb, #ea580c 4%, #ffffff);
    --vp-edge: rgba(234, 88, 12, 0.22);
}

.section-header[data-theme="dark"] .ih-verdict-panel:has(.ihv-grade.tier-poor)[b-6g4n0qxqta] {
    --vp-top: color-mix(in srgb, #dc2626 4%, #ffffff);
    --vp-bot: color-mix(in srgb, #dc2626 3%, #ffffff);
    --vp-edge: rgba(220, 38, 38, 0.16);
}

/* Frame + light base colour for inherited chrome text */

.section-header[data-theme="dark"].iv-dark[b-6g4n0qxqta] {
    background: linear-gradient(180deg, #1a212c 0%, #0e131b 100%);
    color: rgba(245, 243, 238, 0.92);
    /* No downward seam: the canvas and the active tab are the same white,
       and a drop-shadow here would draw a line between them. The dark→white
       colour break carries the split on its own, so the active tab merges
       into the canvas as one surface. */
    box-shadow: none;
}

    /* Title + meta chrome → light */

    .section-header[data-theme="dark"].iv-dark .ih-title[b-6g4n0qxqta] {
        color: #f6f4ef;
    }

        .section-header[data-theme="dark"].iv-dark .ih-title.is-placeholder[b-6g4n0qxqta] {
            color: rgba(245, 243, 238, 0.5);
        }

    .section-header[data-theme="dark"].iv-dark .ih-meta-strip[b-6g4n0qxqta],
    .section-header[data-theme="dark"].iv-dark .ih-meta-strip-item[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.62);
    }

        .section-header[data-theme="dark"].iv-dark .ih-meta-strip-item i[b-6g4n0qxqta] {
            color: rgba(245, 243, 238, 0.5);
        }

    .section-header[data-theme="dark"].iv-dark .ih-meta-strip-sep[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.32);
    }

    .section-header[data-theme="dark"].iv-dark .ih-owner-avatar[b-6g4n0qxqta] {
        --ih-av-ring: #1a212c;
    }

    /* Codename is the idea's quick reference — the loudest element on the meta
   line. Bright text + a faint light chip lifts it clear of the muted strip. */

    .section-header[data-theme="dark"].iv-dark .ihv-codename[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.16);
        color: rgba(245, 243, 238, 0.96);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-codename i[b-6g4n0qxqta] {
            color: rgba(245, 243, 238, 0.72);
        }

    /* Verdict panel — elevated charcoal card */

    .section-header[data-theme="dark"].iv-dark .ih-verdict-panel[b-6g4n0qxqta] {
        --vp-top: #191f29;
        --vp-bot: #191f29;
        --vp-edge: rgba(255, 255, 255, 0.08);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -30px rgba(0, 0, 0, 0.7);
    }

        .section-header[data-theme="dark"].iv-dark .ih-verdict-panel:has(.ihv-grade.tier-great)[b-6g4n0qxqta],
        .section-header[data-theme="dark"].iv-dark .ih-verdict-panel:has(.ihv-grade.tier-good)[b-6g4n0qxqta],
        .section-header[data-theme="dark"].iv-dark .ih-verdict-panel:has(.ihv-grade.tier-moderate)[b-6g4n0qxqta],
        .section-header[data-theme="dark"].iv-dark .ih-verdict-panel:has(.ihv-grade.tier-poor)[b-6g4n0qxqta] {
            --vp-top: #191f29;
            --vp-bot: #191f29;
            --vp-edge: rgba(255, 255, 255, 0.08);
        }

    /* Score tile — the original dark treatment: translucent fill matching the
   panel, a tier-coloured border + outer glow, and a bright tier letter, so
   the tile reads as lit from within the chamber rather than a chip on top. */

    .section-header[data-theme="dark"].iv-dark .ihv-grade[b-6g4n0qxqta] {
        --tier-bg: rgba(255, 255, 255, 0.04);
        --tier-border: rgba(255, 255, 255, 0.10);
        background: var(--tier-bg);
        border-color: var(--tier-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-grade-letter[b-6g4n0qxqta] {
        color: var(--accent);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-grade-score[b-6g4n0qxqta] {
        color: rgba(255, 255, 255, 0.65);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-grade-modifier[b-6g4n0qxqta] {
        color: rgba(255, 255, 255, 0.55);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-great[b-6g4n0qxqta] {
        --tier-bg: rgba(74, 222, 128, 0.14);
        --tier-border: rgba(74, 222, 128, 0.50);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(74, 222, 128, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-great .ihv-grade-letter[b-6g4n0qxqta] {
            color: #86efac;
        }

    .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-good[b-6g4n0qxqta] {
        --tier-bg: rgba(163, 230, 53, 0.14);
        --tier-border: rgba(163, 230, 53, 0.50);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(163, 230, 53, 0.24), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-good .ihv-grade-letter[b-6g4n0qxqta] {
            color: #bef264;
        }

    .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-moderate[b-6g4n0qxqta] {
        --tier-bg: rgba(251, 146, 60, 0.14);
        --tier-border: rgba(251, 146, 60, 0.50);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(251, 146, 60, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-moderate .ihv-grade-letter[b-6g4n0qxqta] {
            color: #fdba74;
        }

    .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-poor[b-6g4n0qxqta] {
        --tier-bg: rgba(248, 113, 113, 0.14);
        --tier-border: rgba(248, 113, 113, 0.50);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 32px rgba(248, 113, 113, 0.26), 0 8px 20px rgba(0, 0, 0, 0.30);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-grade.tier-poor .ihv-grade-letter[b-6g4n0qxqta] {
            color: #fca5a5;
        }

    /* Classification text → light */

    .section-header[data-theme="dark"].iv-dark .ihv-verdict-label[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.92);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-verdict-label--muted[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.55);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-verdict-label--awaiting[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.72);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-verdict-label--error[b-6g4n0qxqta] {
        color: rgba(248, 113, 113, 0.9);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-headline-row[b-6g4n0qxqta] {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    /* Crux → light */

    .section-header[data-theme="dark"].iv-dark .ihv-crux i[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.5);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-crux p[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.78);
    }

    /* Confidence → light (bright dots on dark) */

    .section-header[data-theme="dark"].iv-dark .ihv-conf-line[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.8);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-conf-dot[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.4);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-conf-dot--low[b-6g4n0qxqta] {
        background: #fb923c;
    }

    .section-header[data-theme="dark"].iv-dark .ihv-conf-dot--medium[b-6g4n0qxqta] {
        background: #fbbf24;
    }

    .section-header[data-theme="dark"].iv-dark .ihv-conf-dot--high[b-6g4n0qxqta] {
        background: #86efac;
    }

    /* Evaluators → light */

    .section-header[data-theme="dark"].iv-dark .ihv-eval-count[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.55);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-evaluator-line[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.62);
    }

    .section-header[data-theme="dark"].iv-dark .ihv-evaluators .ih-avatar[b-6g4n0qxqta] {
        --ih-av-ring: #191f29;
    }

    /* CTAs → dark pills */

    .section-header[data-theme="dark"].iv-dark .ihv-strengthen[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.18);
        color: rgba(245, 243, 238, 0.9);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-strengthen:hover[b-6g4n0qxqta] {
            background: rgba(240, 12, 113, 0.16);
            border-color: rgba(240, 12, 113, 0.5);
            color: #fbcfe8;
        }

    .section-header[data-theme="dark"].iv-dark .ihv-enlist-cta[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.18);
        color: rgba(245, 243, 238, 0.9);
    }

        .section-header[data-theme="dark"].iv-dark .ihv-enlist-cta:hover[b-6g4n0qxqta] {
            background: rgba(240, 12, 113, 0.18);
            border-color: rgba(240, 12, 113, 0.55);
            color: #fbcfe8;
        }

    /* Tabs — active stays white (the bridge); inactive go dark elevated */

    .section-header[data-theme="dark"].iv-dark .iv-pill:not(.is-active)[b-6g4n0qxqta] {
        background: #1c2230;
        color: rgba(245, 243, 238, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .section-header[data-theme="dark"].iv-dark .iv-pill:hover:not(.is-active)[b-6g4n0qxqta] {
        background: #232b3b;
        color: rgba(245, 243, 238, 0.85);
        border-color: rgba(255, 255, 255, 0.14);
    }

    .section-header[data-theme="dark"].iv-dark .iv-pill:not(.is-active) .iv-pill-icon[b-6g4n0qxqta] {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(245, 243, 238, 0.7);
    }

/* ─── Responsive: the verdict panel sits in a flexible detail column, so its
   width is independent of the viewport — a container query keyed to the panel
   is the only thing that fires at the right moment. Below an ~780px panel the
   meta column drops to a full-width second row; its inner divider is hidden
   since it no longer sits beside a column. (container-type -> .ih-verdict-panel) */

@container (max-width: 780px) {
    .section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
        flex-wrap: wrap;
        row-gap: 1.25rem;
    }

    .section-header[data-theme="dark"] .ihv-col-score[b-6g4n0qxqta] {
        padding-right: 1rem;
    }

    .section-header[data-theme="dark"] .ihv-col-main[b-6g4n0qxqta] {
        padding: 0 0 0 1rem;
    }

    .section-header[data-theme="dark"] .ihv-col-meta[b-6g4n0qxqta] {
        flex-basis: 100%;
        padding-left: 0;
    }

        .section-header[data-theme="dark"] .ihv-col-meta[b-6g4n0qxqta]::before {
            display: none;
        }
}

/* "Request evaluation" gated → dim the pill and show a lock. */

.section-header[data-theme="dark"] .ihv-strengthen--locked[b-6g4n0qxqta] {
    opacity: 0.72;
}

    .section-header[data-theme="dark"] .ihv-strengthen--locked i[b-6g4n0qxqta] {
        margin-right: 0.35rem;
        font-size: 0.8em;
        opacity: 0.85;
    }

/* ─── v4.4 addendum — EMPTY STATE coverage (first-run experience) ─────
   The iv-dark wave re-specified the chrome explicitly but missed the
   empty-state hero; those elements fell through to the older
   dark-on-light block (var(--ink) on the dusk band ≈ 1.0:1 — invisible).
   Re-specified here at wave specificity, appended last so cascade order
   settles it. Measured on the band midpoint (#141a23):
     title 0.97 → 14.9:1 · sub 0.72 → 8.6:1 · placeholder 0.85 → 11.6:1 */

.section-header[data-theme="dark"].iv-dark .iv-empty-hero-title[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.97);
}

.section-header[data-theme="dark"].iv-dark .iv-empty-hero-sub[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.72);
}

.section-header[data-theme="dark"].iv-dark .iv-empty-hero-arrow[b-6g4n0qxqta] {
    background: rgba(240, 12, 113, 0.16);
    border-color: rgba(240, 12, 113, 0.45);
    color: rgba(255, 105, 165, 0.95);
}

/* The first-run prompt is the one line a new user must read — presence,
   not a 50% ghost. Still softer than a real title (#f6f4ef): the
   placeholder semantics survive. */

.section-header[data-theme="dark"].iv-dark .ih-title.is-placeholder[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.85);
}

/* The truly-empty panel hide that lived here (display:none on the
   verdict panel when .ih-v3.is-empty) is deleted: the V3 zone now
   folds the empty header to a single column and hides the whole
   headline area, divider included, which retires both this rule and
   the stray-rule bug it never quite covered. */

/* Move 1 — the glow is EARNED at tier-great; every other tier keeps
   its hue, border and letter but states the fact without a halo.
   A C at 53% must not read as a celebration. */

.section-header[data-theme="dark"].iv-dark .ihv-grade.tier-good[b-6g4n0qxqta] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.30);
}

.section-header[data-theme="dark"].iv-dark .ihv-grade.tier-moderate[b-6g4n0qxqta] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.30);
}

.section-header[data-theme="dark"].iv-dark .ihv-grade.tier-poor[b-6g4n0qxqta] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.30);
}

/* Move 2 — ONE pink, spent on the invitation. Request evaluation wears
   the rail's cta-up idiom, dusk-tuned; the locked variant stays the
   neutral pill. (The docs hub's violet eyebrow and pink download live
   inside DocumentationHub — quieted there when its files arrive.) */

.section-header[data-theme="dark"].iv-dark .ihv-strengthen[b-6g4n0qxqta] {
    background: rgba(240, 12, 113, 0.16);
    border-color: rgba(240, 12, 113, 0.50);
    color: rgba(255, 105, 165, 0.95);
}

    .section-header[data-theme="dark"].iv-dark .ihv-strengthen:hover[b-6g4n0qxqta] {
        background: linear-gradient(135deg, #ec4899, #db2777);
        border-color: #db2777;
        color: #ffffff;
        box-shadow: 0 3px 12px rgba(236, 72, 153, 0.35);
    }

/* Locked = the SAME invitation — the lock GLYPH signals the gate, per
   the shelf's own doctrine ("no desaturation"). The washed pill was two
   layers: pass 12's white override (removed with this edit) and a 0.72
   whole-button fade from the earlier dark block (restored to full here
   at iv-dark specificity). The existing glyph rule already spaces and
   sizes the icon — nothing duplicated. */

.section-header[data-theme="dark"].iv-dark .ihv-strengthen--locked[b-6g4n0qxqta] {
    opacity: 1;
}

/* Move 3 — measure: the verdict prose reads as sentences, not a wall. */

.ihv-crux[b-6g4n0qxqta] {
    max-width: 88ch;
}

/* Move 4 — small dignities. (The metabar info dot was ELIMINATED in
   pass 14 — the exec summary lives in the hero card; a tooltip
   duplicating it was redundant. Legacy .ihv-info-btn css blocks
   elsewhere in this file are dead selectors awaiting the sweep.)
   The assessment count lifts from subliminal to legible; the maturity
   number gets its name. */

.section-header[data-theme="dark"].iv-dark .ihv-eval-count[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.66);
    font-weight: var(--font-weight-medium);
}

/* Move 5 — meta WHISPERS: reference information, findable when sought,
   silent otherwise. Only the title speaks first; the verdict second.
   (The wave declared the codename "the loudest element on the meta
   line" — right within the line, but it was arguing with the H1.) */

.section-header[data-theme="dark"].iv-dark .ihv-codename[b-6g4n0qxqta] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(245, 243, 238, 0.78);
}

    .section-header[data-theme="dark"].iv-dark .ihv-codename i[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.52);
    }

/* ─── Req 2 · owner tip — one compact pattern for the whisper
   tier. Dark chip, centred under the item, hover/focus revealed.
   The metabar sits above every overflow guard, so downward tips
   are safe at section level. ─── */

.ih-meta-strip-item--owner[b-6g4n0qxqta] {
    position: relative;
    cursor: default;
}

.ih-meta-tip[b-6g4n0qxqta] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
    width: max-content;
    max-width: min(300px, calc(100vw - 2rem));
    padding: 0.375rem 0.625rem;
    background: #0a0a0c;
    border: 1px solid rgba(245, 243, 238, 0.20);
    border-radius: 8px;
    color: rgba(245, 243, 238, 0.92);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

.ih-meta-strip-item:hover > .ih-meta-tip[b-6g4n0qxqta],
.ih-meta-strip-item:focus-within > .ih-meta-tip[b-6g4n0qxqta] {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Req 2 · owner name — the avatar stops being an orphan. Whisper
   tier: a shade brighter than the strip so identity reads, capped
   so a long name never bullies the line. */

.ih-meta-owner-name[b-6g4n0qxqta] {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

.section-header[data-theme="dark"].iv-dark .ih-meta-owner-name[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.72);
}

/* The verdict card clipped every descendant tooltip. Nothing inside
   the card needs clipping (backgrounds respect the radius; the tier
   glow reads better unclipped), so the guard goes. container-type
   stays for the ≤780px wrap query — size containment never clips. */

.section-header[data-theme="dark"] .ih-verdict-panel[b-6g4n0qxqta] {
    overflow: visible;
}

/* One quiet readout line: confidence · count. */

.section-header[data-theme="dark"] .ihv-readout-line[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.section-header[data-theme="dark"] .ihv-readout-sep[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.30);
    user-select: none;
}

.section-header[data-theme="dark"].iv-dark .ihv-readout-sep[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.30);
}

/* Blocked/error note the share flow can raise — the scorecard's
   #E0447C left-rule idiom, dusk-tuned, so the two surfaces speak
   the same language. role=status; appears only on demand. */

.section-header[data-theme="dark"] .ihv-review-note[b-6g4n0qxqta] {
    font-family: var(--font);
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid rgba(224, 68, 124, 0.75);
    border-radius: 6px;
    background: rgba(224, 68, 124, 0.06);
    color: rgba(15, 23, 42, 0.78);
}

.section-header[data-theme="dark"].iv-dark .ihv-review-note[b-6g4n0qxqta] {
    background: rgba(224, 68, 124, 0.12);
    border-left-color: rgba(255, 105, 165, 0.75);
    color: rgba(245, 243, 238, 0.85);
}

/* ≤780px panel: col-main's left inset drops to 1rem — the sheet
   follows the text edge. */

@container (max-width: 780px) {
    .ihv-headline-info .ih-tooltip[b-6g4n0qxqta] {
        left: 1rem;
        right: 0;
    }
}

/* Small screens: centre-anchored tips could cross the left viewport
   edge; pin them to the item start instead. */

@media (max-width: 640px) {
    .ih-meta-tip[b-6g4n0qxqta] {
        left: 0;
        transform: translate(0, -4px);
    }

    .ih-meta-strip-item:hover > .ih-meta-tip[b-6g4n0qxqta],
    .ih-meta-strip-item:focus-within > .ih-meta-tip[b-6g4n0qxqta] {
        transform: translate(0, 0);
    }
}

/* 17 — the documents trigger rides the metabar's right edge: one
   utility line for identity, status, and tools. */

.ih-metabar-tools[b-6g4n0qxqta] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ─── Fix 2 · docs label — identity, gate, and status ───
   Lives inside .ih-metabar-tools, left of the DocumentationHub
   trigger. The busy dot reuses .ih-status-dot — the same status
   instrument this bar already uses for Capturing / Updating /
   Analyzing, so no new accent is introduced. */

.ih-docs-label[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-right: 0.625rem;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    line-height: 1;
    color: rgba(15, 23, 42, 0.55);
    white-space: nowrap;
    user-select: none;
}

    .ih-docs-label i[b-6g4n0qxqta] {
        font-size: 0.625rem;
        opacity: 0.8;
    }

    /* Gate closed: the pair (lock + extra-muted text) states the
       trigger's condition without hover. */

    .ih-docs-label.is-locked[b-6g4n0qxqta] {
        color: rgba(15, 23, 42, 0.38);
    }

    /* Busy: cap the text so a long document title never bullies
       the metabar; ellipsis past ~13rem. */

    .ih-docs-label.is-busy .ih-docs-label-text[b-6g4n0qxqta] {
        max-width: 13rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.section-header[data-theme="dark"].iv-dark .ih-docs-label[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.62);
}

    .section-header[data-theme="dark"].iv-dark .ih-docs-label.is-locked[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.34);
    }

/* ─── Invitation — resting state IS the accent, not a hover reward ─── */

.section-header[data-theme="dark"] .ihv-invite-cta[b-6g4n0qxqta] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.4375rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: 1px solid #db2777;
    border-radius: 10px;
    padding: 0.5625rem 0.875rem;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.22);
    transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

    .section-header[data-theme="dark"] .ihv-invite-cta i[b-6g4n0qxqta] {
        font-size: 0.7em;
        opacity: 0.9;
    }

    .section-header[data-theme="dark"] .ihv-invite-cta:hover:not(:disabled)[b-6g4n0qxqta] {
        box-shadow: 0 4px 16px rgba(236, 72, 153, 0.38);
        transform: translateY(-1px);
    }

    .section-header[data-theme="dark"] .ihv-invite-cta:disabled[b-6g4n0qxqta] {
        cursor: default;
        opacity: 0.7;
        box-shadow: none;
    }

/* ─── Team evaluation — a switch, not a pill. Neutral on purpose. ─── */

.section-header[data-theme="dark"] .ihv-teameval[b-6g4n0qxqta] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.125rem 0;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.66);
    transition: color 0.18s ease;
}

    .section-header[data-theme="dark"] .ihv-teameval:hover[b-6g4n0qxqta] {
        color: rgba(15, 23, 42, 0.92);
    }

    .section-header[data-theme="dark"] .ihv-teameval i[b-6g4n0qxqta] {
        font-size: 0.625rem;
        opacity: 0.8;
    }

.section-header[data-theme="dark"] .ihv-teameval-label[b-6g4n0qxqta] {
    margin-right: auto;
}

.section-header[data-theme="dark"] .ihv-teameval-switch[b-6g4n0qxqta] {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.30);
    background: transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.section-header[data-theme="dark"] .ihv-teameval-thumb[b-6g4n0qxqta] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.45);
    transition: transform 0.18s ease, background 0.18s ease;
}

.section-header[data-theme="dark"] .ihv-teameval[aria-checked="true"] .ihv-teameval-switch[b-6g4n0qxqta] {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(15, 23, 42, 0.78);
}

.section-header[data-theme="dark"] .ihv-teameval[aria-checked="true"] .ihv-teameval-thumb[b-6g4n0qxqta] {
    background: #ffffff;
    transform: translateX(14px);
}

/* Locked packs: the gate is the lock glyph + quieter text — same
   no-desaturation doctrine as the shelf; the switch stays hollow. */

.section-header[data-theme="dark"] .ihv-teameval--locked[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.42);
}

/* iv-dark voicings */

.section-header[data-theme="dark"].iv-dark .ihv-teameval[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.68);
}

    .section-header[data-theme="dark"].iv-dark .ihv-teameval:hover[b-6g4n0qxqta] {
        color: rgba(245, 243, 238, 0.95);
    }

.section-header[data-theme="dark"].iv-dark .ihv-teameval--locked[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.4);
}

.section-header[data-theme="dark"].iv-dark .ihv-teameval-switch[b-6g4n0qxqta] {
    border-color: rgba(245, 243, 238, 0.28);
}

.section-header[data-theme="dark"].iv-dark .ihv-teameval-thumb[b-6g4n0qxqta] {
    background: rgba(245, 243, 238, 0.55);
}

.section-header[data-theme="dark"].iv-dark .ihv-teameval[aria-checked="true"] .ihv-teameval-switch[b-6g4n0qxqta] {
    background: rgba(245, 243, 238, 0.88);
    border-color: rgba(245, 243, 238, 0.88);
}

.section-header[data-theme="dark"].iv-dark .ihv-teameval[aria-checked="true"] .ihv-teameval-thumb[b-6g4n0qxqta] {
    background: #16181d;
}

/* The invitation hugs its content; the row, not the button, owns width. */

.section-header[data-theme="dark"] .ihv-invite-cta[b-6g4n0qxqta] {
    width: auto;
}

/* The switch leaves full-width/space-between behaviour behind and
   rides the row's right edge. On wrap it drops below, still right. */

.section-header[data-theme="dark"] .ihv-teameval[b-6g4n0qxqta] {
    width: auto;
    margin-left: auto;
}

.section-header[data-theme="dark"] .ihv-teameval-label[b-6g4n0qxqta] {
    margin-right: 0;
}

/* ═══ 21 — three slots: Verdict · Assess internally · Assess externally ═══
   The two-column verdict panel becomes three named slots, each with a
   kicker, an optional subline, and per-state bodies (graded / pending
   / awaiting-verdict). Slot A re-seats the grade tile, headline, crux
   and readout; B holds the plan-gated evaluation switch; C holds the
   pink invitation. The ONE pink stays on the invitation. Retired from
   markup this pass (rules above now dead, sweep-listed): .ihv-col-*,
   .ihv-meta-locked*, .ihv-meta-promo, .ihv-action-row,
   .ihv-invite-whisper. Width overrides below re-tune .ihv-teameval and
   .ihv-invite-cta for slot geometry — later in source wins. */

.section-header[data-theme="dark"] .ihv-slot[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
    flex: 1 1 auto;
    padding-right: 1.25rem;
}

.section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta] {
    position: relative;
    flex: 0 0 clamp(11.5rem, 19%, 14.5rem);
    padding-left: 1.25rem;
}

    /* Hairline dividers at the inner edge of B and C — the same
       instrument-panel recipe the retired columns used. */

    .section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta]::before,
    .section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        bottom: 10%;
        width: 1px;
        background: linear-gradient(180deg, transparent 0%, rgba(40, 34, 24, 0.10) 22%, rgba(40, 34, 24, 0.10) 78%, transparent 100%);
    }

.section-header[data-theme="dark"].iv-dark .ihv-slot-internal[b-6g4n0qxqta]::before,
.section-header[data-theme="dark"].iv-dark .ihv-slot-external[b-6g4n0qxqta]::before {
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.10) 22%, rgba(255, 255, 255, 0.10) 78%, transparent 100%);
}

/* Slot head — kicker + optional subline. */

.section-header[data-theme="dark"] .ihv-slot-head[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.section-header[data-theme="dark"] .ihv-slot-kicker[b-6g4n0qxqta] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.5);
}

.section-header[data-theme="dark"].iv-dark .ihv-slot-kicker[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.48);
}

/* Slot A body — tile beside the main stack. */

.section-header[data-theme="dark"] .ihv-verdict-main[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

    .section-header[data-theme="dark"] .ihv-verdict-main .ihv-headline-row[b-6g4n0qxqta] {
        border-top: none;
        margin: 0;
        padding-top: 0;
    }

/* Slot B/C bodies — control + note stack. */

.section-header[data-theme="dark"] .ihv-slot-body[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    min-width: 0;
}

.section-header[data-theme="dark"] .ihv-slot-empty[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.6);
}

    .section-header[data-theme="dark"] .ihv-slot-empty i[b-6g4n0qxqta] {
        font-size: 0.625rem;
        opacity: 0.75;
    }

.section-header[data-theme="dark"].iv-dark .ihv-slot-empty[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.66);
}

/* Slot geometry re-tunes for the pair that moved in: full slot width. */

.section-header[data-theme="dark"] .ihv-teameval[b-6g4n0qxqta] {
    width: 100%;
    margin-left: 0;
}

.section-header[data-theme="dark"] .ihv-teameval-label[b-6g4n0qxqta] {
    margin-right: auto;
}

.section-header[data-theme="dark"] .ihv-invite-cta[b-6g4n0qxqta] {
    width: 100%;
}

/* Narrow panel: slots wrap — Verdict full width, B and C share a row. */

@container (max-width: 860px) {
    .section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
        flex-wrap: wrap;
        row-gap: 1.125rem;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta],
    .section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta] {
        flex: 1 1 12rem;
    }

        .section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta]::before {
            display: none;
        }

    .section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta] {
        padding-left: 0;
    }
}

/* Rebalance: the feature slots take a larger share of the row. */

.section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta] {
    flex-basis: clamp(13rem, 23%, 16.5rem);
}

/* The switch breathes before the next divider. */

.section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta] {
    padding-right: 1.25rem;
}

/* Quiet readout: whisper-size line, muted pieces, gesture arrow. */

.section-header[data-theme="dark"] .ihv-readout-line[b-6g4n0qxqta] {
    font-size: 0.71rem;
    gap: 0.4375rem;
}

.section-header[data-theme="dark"] .ihv-conf-line[b-6g4n0qxqta] {
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.55);
}

.section-header[data-theme="dark"] .ihv-eval-count[b-6g4n0qxqta] {
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    color: rgba(15, 23, 42, 0.55);
}

.section-header[data-theme="dark"] .ihv-readout-arrow[b-6g4n0qxqta] {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    color: rgba(15, 23, 42, 0.38);
}

.section-header[data-theme="dark"].iv-dark .ihv-conf-line[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.55);
}

.section-header[data-theme="dark"].iv-dark .ihv-eval-count[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.55);
    font-weight: var(--font-weight-medium);
}

.section-header[data-theme="dark"].iv-dark .ihv-readout-arrow[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.38);
}

/* ═══ 23 — shared rows: heads align, bodies align, the tile centers ═══
   The panel becomes a two-row grid: row 1 holds every slot head (the
   three kickers share one top line), row 2 holds every body (the
   verdict prose starts exactly where B/C content starts). Slots are
   row-subgrids; slot A adds a column axis so the grade tile spans
   both rows and vertically centers — its original posture — while the
   kicker stays with the prose. Requires subgrid (all evergreen
   browsers). .ihv-verdict-body left the markup this pass — its rules
   above are dead, sweep-listed. Later-in-source overrides the
   21/22-wave flex geometry, whose flex properties are inert under
   grid. */

.section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 23%, 16.5rem) clamp(13rem, 23%, 16.5rem);
    grid-template-rows: auto auto;
    row-gap: 0.625rem;
    align-items: stretch;
}

.section-header[data-theme="dark"] .ihv-slot[b-6g4n0qxqta] {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

/* Slot A — second axis: tile column + text column. */

.section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
}

    .section-header[data-theme="dark"] .ihv-slot-verdict .ihv-score-column[b-6g4n0qxqta] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict > .ihv-slot-head[b-6g4n0qxqta] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict .ihv-verdict-main[b-6g4n0qxqta] {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        justify-content: flex-start;
    }

/* B/C — single column; head auto-places to row 1, body to row 2. */

.section-header[data-theme="dark"] .ihv-slot-internal .ihv-slot-body[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external .ihv-slot-body[b-6g4n0qxqta] {
    align-self: start;
}

/* Narrow: verdict takes its own two rows full-width; B and C share
   rows 3–4 below, keeping their head/body lines aligned with each
   other. Pass-21's flex fallbacks are inert here; its ::before hide
   and padding trims still apply. */

@container (max-width: 860px) {
    .section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 0.875rem;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
        grid-column: 1 / -1;
        grid-row: 1 / 3;
    }

    .section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta] {
        grid-column: 1;
        grid-row: 3 / 5;
    }

    .section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta] {
        grid-column: 2;
        grid-row: 3 / 5;
    }
}

/* Panel: back to stretched flex columns. */

.section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
    display: flex;
    align-items: stretch;
    row-gap: 0;
}

/* Slots: top-aligned stacks again (23's subgrid display overridden). */

.section-header[data-theme="dark"] .ihv-slot[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

/* Slot A — its own axis pair: tile column spans head + main rows and
   centers against the slot's full height; the text column stacks. */

.section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 0.375rem;
}

    .section-header[data-theme="dark"] .ihv-slot-verdict .ihv-score-column[b-6g4n0qxqta] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict > .ihv-slot-head[b-6g4n0qxqta] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict .ihv-verdict-main[b-6g4n0qxqta] {
        grid-column: 2;
        grid-row: 2;
        align-self: stretch;
        justify-content: flex-start;
    }

/* Narrow: 23's grid placements are inert under flex; 21's wrap rules
   are live again. Verdict full-width, B and C sharing the row below —
   restated here so the stack order is explicit at this pass. */

@container (max-width: 860px) {
    .section-header[data-theme="dark"] .ihv-cols[b-6g4n0qxqta] {
        flex-wrap: wrap;
        row-gap: 1.125rem;
    }
}

/* ═══ 25 — one tier-2 line: sublines meet the verdict prose ═══
   The kicker→sub gap unifies with slot A's kicker→main row-gap, so
   "Ask your domain experts" / "Ask anyone you trust" start at exactly
   the offset the crux does. (The other half of the fix is markup: the
   graded state no longer emits an empty headline-row that spent a
   flex gap.) Later-in-source over the 21-wave 0.1875rem. */

.section-header[data-theme="dark"] .ihv-slot-head[b-6g4n0qxqta] {
    gap: 0.375rem;
}

/* ═══ 26 — VERDICT covers the grading; the label band breathes ═══
   The kicker spans both slot-A columns, sitting above tile and prose
   alike; the tile joins the content band (row 2) and centers against
   it. The kicker→content gap doubles to 0.75rem — applied to A's
   row-gap AND the B/C head gap together, so the shared tier-2 line
   moves down as one line rather than breaking apart. Later-in-source
   over the 24/25-wave values. */

.section-header[data-theme="dark"] .ihv-slot-verdict[b-6g4n0qxqta] {
    row-gap: 0.75rem;
}

    .section-header[data-theme="dark"] .ihv-slot-verdict > .ihv-slot-head[b-6g4n0qxqta] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .section-header[data-theme="dark"] .ihv-slot-verdict .ihv-score-column[b-6g4n0qxqta] {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

/* B/C: the sub drops to the same new tier-2 offset. */

.section-header[data-theme="dark"] .ihv-slot-head[b-6g4n0qxqta] {
    gap: 0.75rem;
}

/* ═══ 27 — content bands center: tile and text meet in the middle ═══
   Slot A's text stack stops pinning to the band top and centers
   against the tile (mutual v-center). B/C sublines joined their
   bodies in markup; each body centers in the leftover band via auto
   margins. Slots stretch to equal heights, so the three content
   blocks share a common optical center line. Later-in-source over
   the 24-wave stretch/flex-start. */

.section-header[data-theme="dark"] .ihv-slot-verdict .ihv-verdict-main[b-6g4n0qxqta] {
    align-self: center;
}

.section-header[data-theme="dark"] .ihv-slot-internal .ihv-slot-body[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external .ihv-slot-body[b-6g4n0qxqta] {
    margin-top: auto;
    margin-bottom: auto;
}

/* ═══ 28 — two shared edges beat three private centers ═══
   Per-slot centering (27) let each block find its own middle, so the
   crux, "Ask your domain experts", and "Ask anyone you trust" landed
   on three different lines. Replaced with edge anchoring: every
   content block stretches across the band and spreads — first line
   (crux / subs) on one shared TOP line, last line (readout / toggle /
   CTA+whisper) on one shared BOTTOM line. Slot A's stack now spans
   the tile's height, so the void that motivated the centering is
   gone as well. Later-in-source over the 27-wave. */

.section-header[data-theme="dark"] .ihv-slot-verdict .ihv-verdict-main[b-6g4n0qxqta] {
    align-self: stretch;
    justify-content: space-between;
}

.section-header[data-theme="dark"] .ihv-slot-internal .ihv-slot-body[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external .ihv-slot-body[b-6g4n0qxqta] {
    margin-top: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    justify-content: space-between;
}

/* ═══ 29 — one center line: controls meet the tile's middle ═══
   The sublines live in the kicker tooltips now; the 7-day whisper
   lives in the CTA's tooltip. Each feature body is exactly one
   control tall and centers in the band via auto margins, and slot A
   returns to mutual tile+text centering (the 28-wave spread is
   overridden) — toggle, invitation, and the verdict stack share the
   band's optical center. .ihv-slot-sub and .ihv-slot-note rules
   above are dead selectors now, sweep-listed. */

.section-header[data-theme="dark"] .ihv-slot-verdict .ihv-verdict-main[b-6g4n0qxqta] {
    align-self: center;
    justify-content: flex-start;
}

.section-header[data-theme="dark"] .ihv-slot-internal .ihv-slot-body[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external .ihv-slot-body[b-6g4n0qxqta] {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: auto;
}

/* ═══ 30 — the features tuck in: more inset, less width ═══
   Left inset grows to 1.75rem so B/C content sits clear of the
   dividers; each slot narrows to clamp(12rem, 20%, 15rem), and the
   verdict column (flex 1) reclaims the difference. Later-in-source
   over the 22-wave clamp and the 21-wave inset. */

.section-header[data-theme="dark"] .ihv-slot-internal[b-6g4n0qxqta],
.section-header[data-theme="dark"] .ihv-slot-external[b-6g4n0qxqta] {
    padding-left: 1.75rem;
    flex-basis: clamp(12rem, 20%, 15rem);
}

/* ── Header pending pill: the register diff surfaced beside the verdict
      readout. Dark-surface twin of the scorecard strip — brand accent,
      quiet glow, impossible to miss. ── */
.ihv-pending-pill[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent, #f00c71) 45%, transparent);
    background: color-mix(in srgb, var(--accent, #f00c71) 14%, transparent);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .ihv-pending-pill:hover[b-6g4n0qxqta] {
        background: color-mix(in srgb, var(--accent, #f00c71) 24%, transparent);
        border-color: color-mix(in srgb, var(--accent, #f00c71) 65%, transparent);
    }

.ihv-pending-dot[b-6g4n0qxqta] {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent, #f00c71);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent, #f00c71) 70%, transparent);
    animation: ihvPendingPulse-b-6g4n0qxqta 2s ease-in-out infinite;
}

@keyframes ihvPendingPulse-b-6g4n0qxqta {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* The readout arrow must stay visible whenever the pending pill is
   shown — the pill is an invitation, the arrow is the destination.
   The arrow's faintness lives in its COLOR alpha (0.38), not opacity,
   so forcing means raising the ink on both themes. */
.section-header[data-theme="dark"] .ihv-readout-arrow.is-forced[b-6g4n0qxqta] {
    color: rgba(15, 23, 42, 0.78);
}

.section-header[data-theme="dark"].iv-dark .ihv-readout-arrow.is-forced[b-6g4n0qxqta] {
    color: rgba(245, 243, 238, 0.9);
}

/* ── Share surface (R1): the card, its rows, the locked shape, the
      preview modal. Dark card in the header's family; the preview panel
      is LIGHT on purpose — it previews the recipient's surface. ── */
.ihv-share-wrap[b-6g4n0qxqta] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.ihv-invite-cta--locked[b-6g4n0qxqta] {
    filter: saturate(0.55);
    opacity: 0.85;
}

/* The share dialog lives in the browser TOP LAYER (showModal): above
   every stacking context by spec, transformed ancestors included — the
   fix z-index could never be. The dialog itself is a transparent
   viewport-filling shell so backdrop clicks close; the panel centers
   inside it. */
.ihv-preview-dialog[b-6g4n0qxqta] {
    border: 0;
    padding: 1.5rem;
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ihv-preview-dialog[b-6g4n0qxqta]::backdrop {
        background: rgba(8, 11, 20, 0.62);
        backdrop-filter: blur(3px);
    }

.ihv-preview-panel[b-6g4n0qxqta] {
    width: min(720px, 100%);
    max-height: 86vh;
    overflow: auto;
    border-radius: 1.1rem;
    background: #faf9f7;
    color: #1f2430;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    padding: 1.4rem 1.65rem 1.4rem;
}

.ihv-preview-head[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.ihv-preview-kicker[b-6g4n0qxqta] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a8f9e;
}

.ihv-preview-close[b-6g4n0qxqta] {
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    color: #8a8f9e;
    cursor: pointer;
}

.ihv-preview-owner[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.ihv-preview-avatar[b-6g4n0qxqta] {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, #f00c71) 14%, #ffffff);
    color: var(--accent, #f00c71);
    font-weight: 700;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.ihv-preview-inviteline[b-6g4n0qxqta] {
    font-size: 0.92rem;
    line-height: 1.4;
}

.ihv-preview-body[b-6g4n0qxqta] {
    font-size: 0.9rem;
    line-height: 1.65;
    white-space: pre-wrap;
    color: #2a3040;
    border-top: 1px solid #e8e6e1;
    padding-top: 0.9rem;
}

.ihv-preview-body--empty[b-6g4n0qxqta] {
    color: #8a8f9e;
    font-style: italic;
}

.ihv-preview-path[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: 0.8rem;
    border-top: 1px solid #e8e6e1;
    font-size: 0.74rem;
    color: #5a6172;
}

    .ihv-preview-path i[b-6g4n0qxqta] {
        color: var(--accent, #f00c71);
        margin-right: 0.3rem;
    }

.ihv-preview-path-note[b-6g4n0qxqta] {
    margin-left: auto;
    color: #8a8f9e;
}

/* Manual-copy fallback: when the clipboard API is guarded, the link
   arrives select-ready instead of failing. */
.ihv-share-reveal-wrap[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.15rem 0.25rem 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.6rem;
    background: rgba(245, 243, 238, 0.05);
}

.ihv-share-reveal-hint[b-6g4n0qxqta] {
    font-size: 0.66rem;
    color: rgba(245, 243, 238, 0.55);
    line-height: 1.35;
}

.ihv-share-reveal[b-6g4n0qxqta] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--accent, #f00c71) 35%, transparent);
    border-radius: 0.45rem;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(245, 243, 238, 0.95);
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
}

/* ── R1v2: the modal IS the share surface ── */
.ihv-preview-lede[b-6g4n0qxqta] {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #171b26;
    line-height: 1.3;
    margin: -0.2rem 0 0.4rem;
}

.ihv-preview-sub[b-6g4n0qxqta] {
    font-size: 0.87rem;
    line-height: 1.6;
    color: #5a6172;
    margin-bottom: 1.15rem;
    max-width: 58ch;
}

.ihv-preview-seclabel[b-6g4n0qxqta] {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8a8f9e;
    margin-bottom: 0.5rem;
}

.ihv-preview-recipient[b-6g4n0qxqta] {
    border: 1px solid #e8e6e1;
    border-radius: 0.85rem;
    padding: 1rem 1.15rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ihv-preview-note[b-6g4n0qxqta] {
    margin-top: 0.8rem;
    font-size: 0.78rem;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.6rem;
    padding: 0.5rem 0.7rem;
}

.ihv-preview-reveal-wrap[b-6g4n0qxqta] {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ihv-preview-reveal-hint[b-6g4n0qxqta] {
    font-size: 0.7rem;
    color: #8a8f9e;
}

.ihv-preview-reveal[b-6g4n0qxqta] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--accent, #f00c71) 40%, transparent);
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    color: #1f2430;
    background: #fff;
    font-family: inherit;
}

.ihv-preview-actions[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e6e1;
}

.ihv-preview-cta[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #d8d5cf;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: #ffffff;
    color: #1f2430;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease;
}

    .ihv-preview-cta:hover:not(:disabled)[b-6g4n0qxqta] {
        filter: brightness(0.98);
    }

    .ihv-preview-cta:active:not(:disabled)[b-6g4n0qxqta] {
        transform: translateY(1px);
    }

    .ihv-preview-cta:disabled[b-6g4n0qxqta] {
        opacity: 0.6;
        cursor: default;
    }

.ihv-preview-cta--primary[b-6g4n0qxqta] {
    background: var(--accent, #f00c71);
    border-color: var(--accent, #f00c71);
    color: #fff;
}

    .ihv-preview-cta--primary:hover:not(:disabled)[b-6g4n0qxqta] {
        filter: brightness(1.06);
    }

.ihv-preview-lockline[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: #5a6172;
}

    .ihv-preview-lockline > i[b-6g4n0qxqta] {
        color: var(--accent, #f00c71);
    }

.ihv-preview-about[b-6g4n0qxqta] {
    margin-left: auto;
    font-size: 0.74rem;
    color: #8a8f9e;
    text-decoration: none;
}

    .ihv-preview-about:hover[b-6g4n0qxqta] {
        color: #1f2430;
    }

/* ════════════════════════════════════════════
   Track 2 — verdict stance chip in the header readout
   ("Walk away · Low confidence · 4 assessments"). Palette
   reuses the readout's own hues (conf-dot low/medium/high)
   so stance and confidence speak one color vocabulary:
   build #639922, reframe #EF9F27, walk away #D85A30,
   park = the readout's neutral slate.
   ════════════════════════════════════════════ */

.section-header[data-theme="dark"] .ihv-stance-chip[b-6g4n0qxqta] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgba(15, 23, 42, 0.22);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.72);
    white-space: nowrap;
}

.section-header[data-theme="dark"] .ihv-stance--build[b-6g4n0qxqta] {
    border-color: rgba(99, 153, 34, 0.55);
    background: rgba(99, 153, 34, 0.10);
    color: #4d7a17;
}

.section-header[data-theme="dark"] .ihv-stance--reframe[b-6g4n0qxqta] {
    border-color: rgba(239, 159, 39, 0.60);
    background: rgba(239, 159, 39, 0.12);
    color: #a86a10;
}

.section-header[data-theme="dark"] .ihv-stance--park[b-6g4n0qxqta] {
    border-color: rgba(15, 23, 42, 0.22);
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.62);
}

.section-header[data-theme="dark"] .ihv-stance--walkaway[b-6g4n0qxqta] {
    border-color: rgba(216, 90, 48, 0.55);
    background: rgba(216, 90, 48, 0.10);
    color: #b6431e;
}

/* ════════════════════════════════════════════════════════════════
   PASS H3 — "Editorial petrol" (header-3a), spec-exact
   Translated value-for-value from the delivered reference
   (handoff/header-3a.css) onto the existing class names; H1 and
   H2 are superseded and removed. Tokens scoped to .ih-v3; the
   pill state machine, gates, and toggles untouched beneath.
   ════════════════════════════════════════════════════════════════ */

.ih-v3[b-6g4n0qxqta] {
    --petrol-900: #0A191D;
    --glow-teal: rgba(127, 183, 190, .13);
    --glow-pink: rgba(240, 45, 125, .07);
    --ink-high: #FAFEFE;
    --ink-body: #9DB6BA;
    --ink-muted: #6E8B90;
    --ink-faint: #5F797D;
    --ink-num: #3B5A61;
    --ink-btn: #E4EEEF;
    --ink-icon: #8FA9AD;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .10);
    --ghost-bg: rgba(255, 255, 255, .06);
    --ghost-bg-hover: rgba(255, 255, 255, .11);
    --ghost-border: rgba(255, 255, 255, .16);
    --track: rgba(255, 255, 255, .12);
    --teal-400: #7FB7BE;
    --pink-500: #F02D7D;
    --pink-600: #D91A6C;
    --pink-300: #FF6FA5;
    --pink-200: #FF9AC2;
    --pink-underline: rgba(240, 45, 125, .30);
    --grade-300: #ACDE62;
    --amber-400: #F5A524;
    --lavender-hi: #C7BEF7;
    --lavender-lo: #9F92EC;
    /* Resolved against the house's SELF-HOSTED fonts (App.razor):
       Space Grotesk — already served, variable weight, covers 700.
       Manrope — substituted by Inter (same grotesque family; at the
       design's 13–18px UI sizes the swap is near-indistinguishable,
       and one fewer font beats an external dependency).
       IBM Plex Mono — ladders: Plex if ever self-hosted, then the
       house --font-mono token if defined, then system monospace.
       No Google Fonts anywhere: self-hosting is the correct posture
       for the EU-residency trust story (Google Fonts serving
       transfers visitor IPs; German case law already objects). */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono-3a: 'IBM Plex Mono', var(--font-mono, monospace);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas:
        "metabar metabar"
        "title   panel"
        "actions panel"
        "tabs    tabs";
    column-gap: 52px;
    align-items: start;
    background: radial-gradient(900px 420px at 85% -10%, var(--glow-teal), transparent 60%), radial-gradient(700px 380px at -10% 110%, var(--glow-pink), transparent 55%), var(--petrol-900);
    color: var(--ink-body);
    font-family: var(--font-body);
    border-radius: 22px;
    padding: 34px 56px 0;
}

    .ih-v3 .ih-metabar[b-6g4n0qxqta] {
        grid-area: metabar;
    }

    .ih-v3 .ih-titlerow[b-6g4n0qxqta] {
        grid-area: title;
    }

    .ih-v3 .ih-actionsrow[b-6g4n0qxqta] {
        grid-area: actions;
    }

    .ih-v3 .ih-headline[b-6g4n0qxqta] {
        grid-area: panel;
    }

    .ih-v3 .ih-tabrail[b-6g4n0qxqta] {
        grid-area: tabs;
    }

    /* Truly-empty: no verdict, no panel column. The grid folds to one
       column so the question spans the header, and the headline area
       (divider rule included) leaves the DOM's render entirely rather
       than sitting as a stray frame around nothing. The genesis strip
       that briefly lived here now closes the empty canvas below the
       cards, where the eye lands after scanning them. */
    .ih-v3.is-empty[b-6g4n0qxqta] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "metabar"
            "title"
            "actions"
            "tabs";
    }

        .ih-v3.is-empty .ih-headline[b-6g4n0qxqta] {
            display: none;
        }

    /* ── Row 1: meta ── */
    .ih-v3 .ih-metabar[b-6g4n0qxqta] {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
    }

    .ih-v3 .ihv-codename[b-6g4n0qxqta],
    .ih-v3 .ih-meta-strip[b-6g4n0qxqta],
    .ih-v3 .ih-meta-strip-item[b-6g4n0qxqta] {
        font: 600 10.5px var(--font-mono-3a) !important;
        letter-spacing: 2px !important;
        color: var(--ink-muted) !important;
        text-transform: uppercase;
    }

    .ih-v3 .ih-meta-strip[b-6g4n0qxqta] {
        display: inline-flex;
        align-items: center;
        gap: 14px;
    }

    .ih-v3 .ih-meta-strip-sep[b-6g4n0qxqta] {
        color: var(--ink-muted);
        opacity: .7;
    }

    .ih-v3 .ihv-codename i[b-6g4n0qxqta], .ih-v3 .ih-meta-strip-item i[b-6g4n0qxqta] {
        font-size: 9px;
        opacity: .6;
    }

    .ih-v3 .ih-owner-avatar[b-6g4n0qxqta] {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px;
        background-color: transparent;
        background-image: linear-gradient(135deg, var(--lavender-hi), var(--lavender-lo));
    }

        .ih-v3 .ih-owner-avatar[style*="background-image"][b-6g4n0qxqta] {
            background-color: transparent;
        }

    .ih-v3 .ih-status-dot[b-6g4n0qxqta] {
        background: var(--pink-500);
    }

    .ih-v3 .ih-meta-strip-item--status[b-6g4n0qxqta] {
        color: var(--pink-300) !important;
    }

    /* ── Row 2 left: title + actions ── */
    .ih-v3 .ih-titlerow[b-6g4n0qxqta] {
        margin-top: 20px;
    }

    .ih-v3 .ihv-title[b-6g4n0qxqta] {
        margin: 0 !important;
        font: 700 54px/1.06 var(--font-display) !important;
        letter-spacing: -1.5px !important;
        color: var(--ink-high) !important;
        text-wrap: pretty;
        max-width: none;
    }

    .ih-v3 .ih-actionsrow[b-6g4n0qxqta] {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        padding-bottom: 22px;
    }

    .ih-v3 .ih-docs-label[b-6g4n0qxqta] {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 40px;
        padding: 0 16px !important;
        background: var(--ghost-bg) !important;
        border: 1px solid var(--ghost-border) !important;
        border-radius: 999px !important;
        color: var(--ink-btn) !important;
        font: 600 13px var(--font-body) !important;
        cursor: pointer;
    }

        .ih-v3 .ih-docs-label:hover[b-6g4n0qxqta] {
            background: var(--ghost-bg-hover) !important;
        }

        .ih-v3 .ih-docs-label.is-locked[b-6g4n0qxqta] {
            opacity: .55;
        }

        .ih-v3 .ih-docs-label i[b-6g4n0qxqta] {
            color: var(--ink-icon);
        }
    /* The hub trigger's pink circle: keyed to a stable class, never to
   bare `button` — a descendant selector here styles every option in
   the hub's picker popover (it broke exactly that way once).
   ADJUST: add class="hub-trigger" to the trigger button inside
   DocumentationHub; until then the trigger renders native. */
    .ih-v3 .ih-actionsrow[b-6g4n0qxqta]  .hub-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: var(--pink-500) !important;
        border: none !important;
        border-radius: 999px !important;
        color: #fff !important;
        cursor: pointer;
    }

        .ih-v3 .ih-actionsrow[b-6g4n0qxqta]  .hub-trigger:hover {
            background: var(--pink-600) !important;
        }

    /* ── Row 2 right: the assessment stamp ── */
    .ih-v3 .ih-headline[b-6g4n0qxqta],
    .ih-v3 .ih-headline-text[b-6g4n0qxqta],
    .ih-v3 .ih-verdict-panel[b-6g4n0qxqta],
    .ih-v3 .ihv-body[b-6g4n0qxqta],
    .ih-v3 .ihv-cols[b-6g4n0qxqta],
    .ih-v3 .ihv-slot[b-6g4n0qxqta] {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .ih-v3 .ih-headline[b-6g4n0qxqta] {
        margin-top: 28px !important;
        border-left: 1px solid var(--line-strong) !important;
        padding-left: 40px !important;
        align-self: stretch;
    }

    .ih-v3 .ihv-cols[b-6g4n0qxqta] {
        display: flex;
        flex-direction: column;
    }

    .ih-v3 .ihv-slot-verdict .ihv-slot-head[b-6g4n0qxqta] {
        display: none;
    }
    /* the stamp opens with the grade, per spec */

    /* The grade's colour is SEMANTIC, single-sourced: --tier-fg is
       set once per tier here and consumed by every glyph (letter,
       modifier, score, unit) below. These hues sit on the same ramps
       as the base (scorecard-cloned) light-surface tokens — green /
       lime / orange / red at the 400 step for petrol legibility,
       where the light surface uses the 700 step (#15803d / #4d7c0f /
       #c2410c / #b91c1c). They are also the exact hues this file's
       dark tier treatments already use for washes, borders and glows,
       so the stamp agrees with its own halo. No fixed decorative
       colour: an ungraded tile stays neutral ink per the
       no-silent-default doctrine — a colour implies a verdict. */
    .ih-v3 .ihv-grade[b-6g4n0qxqta] {
        --tier-fg: var(--ink-muted);
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 14px;
        width: auto !important;
        /* The retired card design's tile geometry (4.75rem min-height)
           dies here, not just where it happens to show: at desktop
           scale the 92px letter always exceeded it, but the compact
           line exposed it as 42px of phantom height. */
        min-height: 0 !important;
    }

        .ih-v3 .ihv-grade.tier-great[b-6g4n0qxqta] {
            --tier-fg: #4ade80;
        }

        .ih-v3 .ihv-grade.tier-good[b-6g4n0qxqta] {
            --tier-fg: #a3e635;
        }

        .ih-v3 .ihv-grade.tier-moderate[b-6g4n0qxqta] {
            --tier-fg: #fb923c;
        }

        .ih-v3 .ihv-grade.tier-poor[b-6g4n0qxqta] {
            --tier-fg: #f87171;
        }

    .ih-v3 .ihv-grade-flap[b-6g4n0qxqta],
    .ih-v3 .ihv-grade-letter[b-6g4n0qxqta] {
        font: 700 92px/0.9 var(--font-display) !important;
        letter-spacing: -3px !important;
        color: var(--tier-fg) !important;
    }

    .ih-v3 .ihv-grade-modifier[b-6g4n0qxqta] {
        font: 700 34px/1 var(--font-display) !important;
        color: var(--tier-fg) !important;
        align-self: flex-start;
        margin-top: 10px;
    }

    .ih-v3 .ihv-grade-score-row[b-6g4n0qxqta] {
        margin: 0 !important;
    }

    .ih-v3 .ihv-grade-score[b-6g4n0qxqta] {
        font: 600 14px var(--font-mono-3a) !important;
        color: color-mix(in srgb, var(--tier-fg) 72%, var(--petrol-900)) !important;
        background: none !important;
    }

    .ih-v3 .ihv-score-unit[b-6g4n0qxqta] {
        font-size: 12px;
        color: color-mix(in srgb, var(--tier-fg) 60%, var(--petrol-900));
    }

    .ih-v3 .ihv-readout-line[b-6g4n0qxqta] {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        margin: 14px 0 0 !important;
        font: 600 9.5px var(--font-mono-3a) !important;
        letter-spacing: 2px !important;
        color: var(--ink-faint) !important;
        text-transform: uppercase;
    }

    .ih-v3 .ihv-readout-word[b-6g4n0qxqta], .ih-v3 .ihv-eval-count[b-6g4n0qxqta], .ih-v3 .ihv-conf-line[b-6g4n0qxqta] {
        color: var(--ink-faint) !important;
    }

    .ih-v3 .ihv-readout-sep[b-6g4n0qxqta] {
        opacity: .8;
    }

    .ih-v3 .ihv-conf-dot[b-6g4n0qxqta] {
        width: 6px !important;
        height: 6px !important;
        border-radius: 999px;
    }

    .ih-v3 .ihv-conf-dot--low[b-6g4n0qxqta], .ih-v3 .ihv-conf-dot--medium[b-6g4n0qxqta] {
        background: var(--amber-400) !important;
    }

    .ih-v3 .ihv-conf-dot--high[b-6g4n0qxqta] {
        background: var(--grade-300) !important;
    }

    .ih-v3 .ihv-readout-arrow[b-6g4n0qxqta] {
        color: var(--ink-faint);
        font-size: 9px;
    }

        .ih-v3 .ihv-readout-arrow.is-forced[b-6g4n0qxqta] {
            color: var(--pink-300);
        }

    .ih-v3 .ihv-pending-pill[b-6g4n0qxqta] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: 1px solid var(--pink-300);
        border-radius: 999px;
        color: var(--pink-300);
        font: inherit;
        padding: 1px 8px;
        cursor: pointer;
    }

    .ih-v3 .ihv-pending-dot[b-6g4n0qxqta] {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: var(--pink-300);
    }

    .ih-v3 .ihv-stance-head[b-6g4n0qxqta] {
        margin-top: 13px !important;
        font: 700 18px/1.35 var(--font-body) !important;
        color: #F3FAFA !important;
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: block;
    }

        .ih-v3 .ihv-stance-head > span[b-6g4n0qxqta] {
            box-shadow: inset 0 -8px 0 var(--pink-underline);
        }

    .ih-v3 .ihv-move-preview[b-6g4n0qxqta] {
        margin: 10px 0 0 !important;
        font: 500 13.5px/1.55 var(--font-body) !important;
        color: #BFD2D6 !important; /* a step brighter than body: this is the line to act on */
        max-width: none;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    /* Internal / external controls as the spec's mono CTA language */
    .ih-v3 .ihv-slot-internal[b-6g4n0qxqta], .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
        margin-top: 14px !important;
    }

    .ih-v3 .ihv-slot-head .ihv-slot-kicker[b-6g4n0qxqta] {
        font: 600 9.5px var(--font-mono-3a);
        letter-spacing: 2px;
        color: var(--ink-faint);
        text-transform: uppercase;
    }

    .ih-v3 .ihv-slot-body[b-6g4n0qxqta] {
        margin-top: 6px;
    }

    .ih-v3 .ihv-teameval[b-6g4n0qxqta], .ih-v3 .ihv-invite-cta[b-6g4n0qxqta], .ih-v3 .ihv-enlist-cta[b-6g4n0qxqta] {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        font: 600 11.5px var(--font-mono-3a) !important;
        letter-spacing: 1.2px !important;
        color: var(--pink-300) !important;
        text-transform: uppercase;
        cursor: pointer;
    }

        .ih-v3 .ihv-teameval:hover[b-6g4n0qxqta], .ih-v3 .ihv-invite-cta:hover[b-6g4n0qxqta], .ih-v3 .ihv-enlist-cta:hover[b-6g4n0qxqta] {
            color: var(--pink-200) !important;
        }

    .ih-v3 .ihv-teameval-label[b-6g4n0qxqta] {
        color: inherit !important;
        font: inherit !important;
        letter-spacing: inherit !important;
    }

    .ih-v3 .ihv-teameval--locked[b-6g4n0qxqta], .ih-v3 .ihv-invite-cta--locked[b-6g4n0qxqta] {
        opacity: .6;
    }

    .ih-v3 .ihv-teameval-switch[b-6g4n0qxqta] {
        width: 30px;
        height: 16px;
        border-radius: 999px;
        border: 1px solid var(--pink-300) !important;
        background: none !important;
        position: relative;
        display: inline-block;
    }

    .ih-v3 .ihv-teameval-thumb[b-6g4n0qxqta] {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--pink-300) !important;
        transition: transform .15s ease;
    }

    .ih-v3 .ihv-teameval[aria-checked="true"] .ihv-teameval-thumb[b-6g4n0qxqta] {
        transform: translateX(14px);
    }

    .ih-v3 .ihv-slot-empty[b-6g4n0qxqta] {
        font: 600 9.5px var(--font-mono-3a);
        letter-spacing: 2px;
        color: var(--ink-faint);
        text-transform: uppercase;
    }

    .ih-v3 .ihv-review-note[b-6g4n0qxqta] {
        color: var(--ink-muted);
        font: 400 12px var(--font-body);
        margin-top: 6px;
    }

    /* ── Row 3: tabs ── */
    .ih-v3 .ih-tabrail[b-6g4n0qxqta] {
        margin-top: 24px;
        border-top: 1px solid var(--line);
        padding: 0;
    }

    .ih-v3 .iv-pills-strip[b-6g4n0qxqta] {
        display: flex;
        gap: 36px;
        padding: 0 2px;
        overflow-x: auto;
    }

    .ih-v3 .iv-pill[b-6g4n0qxqta], .ih-v3 .iv-pill.is-active[b-6g4n0qxqta] {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-height: 0 !important;
    }

    .ih-v3 .iv-pill[b-6g4n0qxqta] {
        padding: 17px 2px !important;
        font: 600 11px var(--font-mono-3a) !important;
        letter-spacing: 1.8px !important;
        color: var(--ink-muted) !important;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 0;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
    }

        .ih-v3 .iv-pill:hover[b-6g4n0qxqta] {
            color: #CDDEE0 !important;
        }

        .ih-v3 .iv-pill[b-6g4n0qxqta]::before {
            content: attr(data-num);
            color: var(--ink-num);
            margin-right: 8px;
        }

        .ih-v3 .iv-pill .iv-pill-icon[b-6g4n0qxqta] {
            display: none;
        }

        .ih-v3 .iv-pill .iv-pill-label[b-6g4n0qxqta] {
            color: inherit !important;
            font: inherit !important;
            letter-spacing: inherit !important;
        }

        .ih-v3 .iv-pill.is-active[b-6g4n0qxqta] {
            color: var(--ink-high) !important;
            box-shadow: inset 0 2px 0 var(--pink-500) !important;
        }

            .ih-v3 .iv-pill.is-active[b-6g4n0qxqta]::before {
                color: var(--pink-300);
            }

        .ih-v3 .iv-pill .iv-pill-status[b-6g4n0qxqta] {
            margin-left: 8px;
        }

    /* ── Below ~1200px: stamp wraps under, title steps to 40px ── */

    /* ════════════════════════════════════════════════════════════════
   PASS H4 — stamp geometry corrections (design vs implementation)
   1. The flap cycle's glyphs stack into one grid cell, so the
      letter element is one glyph wide — this was the gulf between
      the letter and its modifier (the element spanned the whole
      cycle). The animation is untouched: same spans, same vars,
      now layered instead of side by side.
   2. The stamp's internal order is enforced, not inherited:
      grade, meta line, verdict, summary, CTA — per the reference.
   3. The confidence phrase refuses to break mid-unit.
   ════════════════════════════════════════════════════════════════ */

    .ih-v3 .ihv-grade[b-6g4n0qxqta] {
        gap: 10px;
    }

    .ih-v3 .ihv-grade-letter-row[b-6g4n0qxqta],
    .ih-v3 .ihv-grade-letter[b-6g4n0qxqta] {
        display: inline-grid !important;
    }

        .ih-v3 .ihv-grade-letter .ihv-grade-flap[b-6g4n0qxqta] {
            grid-area: 1 / 1;
        }

    .ih-v3 .ihv-grade-modifier[b-6g4n0qxqta] {
        font: 700 44px/1 var(--font-display) !important;
        align-self: flex-start;
        margin: 6px 0 0 -2px;
    }

    .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta],
    .ih-v3 .ihv-slot-verdict .ihv-slot-body[b-6g4n0qxqta] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start;
    }

        .ih-v3 .ihv-slot-verdict .ihv-score-column[b-6g4n0qxqta] {
            order: 0;
        }

        .ih-v3 .ihv-slot-verdict .ihv-verdict-label[b-6g4n0qxqta] {
            order: 1;
        }

        .ih-v3 .ihv-slot-verdict .ihv-readout-line[b-6g4n0qxqta] {
            order: 1;
        }

        .ih-v3 .ihv-slot-verdict .ihv-stance-head[b-6g4n0qxqta] {
            order: 2;
        }

        .ih-v3 .ihv-slot-verdict .ihv-move-preview[b-6g4n0qxqta] {
            order: 3;
        }

        .ih-v3 .ihv-slot-verdict .ihv-enlist-cta[b-6g4n0qxqta] {
            order: 4;
        }

    .ih-v3 .ihv-conf-line[b-6g4n0qxqta] {
        white-space: nowrap;
    }

        .ih-v3 .ihv-conf-line span[b-6g4n0qxqta] {
            white-space: nowrap;
        }

    /* ════════════════════════════════════════════════════════════════
   PASS H5 — seven deviations, itemized and closed
   1. Grade glyph stack forced (!important + a child fallback) —
      the letter is one glyph wide, period. Cluster gaps to 8px,
      the modifier hugs at 40px.
   2. The actions row's rightward drift: my own doing — the moved
      ih-metabar-tools wrapper kept its old margin-left:auto job.
      Neutralized inside the actions row.
   3. Codename chip chrome stripped to the design's plain
      tracked text; decorative icons off.
   4. The tab strip starts on the left gutter, no inherited
      indent or centering.
   5. The evaluation switch forced to the outline language:
      transparent track, pink thumb.
   6. The readout arrow hides except in its functional pending
      state (the design carries none).
   7. The verdict highlighter matches the reference inset and
      wraps cleanly across lines.
   ════════════════════════════════════════════════════════════════ */

    /* 1 — grade cluster */
    .ih-v3 .ihv-grade[b-6g4n0qxqta] {
        gap: 8px !important;
    }

    .ih-v3 .ihv-grade-letter-row[b-6g4n0qxqta],
    .ih-v3 .ihv-grade-letter[b-6g4n0qxqta] {
        display: inline-grid !important;
    }

        .ih-v3 .ihv-grade-letter > *[b-6g4n0qxqta] {
            grid-area: 1 / 1 !important;
        }

        .ih-v3 .ihv-grade-letter-row > *[b-6g4n0qxqta] {
            grid-area: 1 / 1 !important;
        }

    .ih-v3 .ihv-grade-modifier[b-6g4n0qxqta] {
        font: 700 40px/1 var(--font-display) !important;
        align-self: flex-start !important;
        margin: 8px 0 0 2px !important;
    }

    /* 2 — actions row: the moved tools wrapper loses its metabar job */
    .ih-v3 .ih-actionsrow .ih-metabar-tools[b-6g4n0qxqta] {
        margin-left: 0 !important;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* 3 — codename: plain tracked text, no chip, no icons */
    .ih-v3 .ihv-codename[b-6g4n0qxqta] {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

        .ih-v3 .ihv-codename i[b-6g4n0qxqta],
        .ih-v3 .ih-meta-strip-item i[b-6g4n0qxqta] {
            display: none !important;
        }

    /* 4 — tabs on the left gutter */
    .ih-v3 .iv-pills-strip[b-6g4n0qxqta] {
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 2px !important;
        width: 100%;
    }

    /* 5 — the switch in outline language */
    .ih-v3 .ihv-teameval-switch[b-6g4n0qxqta] {
        width: 30px !important;
        height: 16px !important;
        background: transparent !important;
        border: 1.5px solid var(--pink-300) !important;
        border-radius: 999px !important;
        position: relative !important;
        display: inline-block !important;
        box-shadow: none !important;
    }

    .ih-v3 .ihv-teameval-thumb[b-6g4n0qxqta] {
        width: 10px !important;
        height: 10px !important;
        top: 1.5px !important;
        left: 2px !important;
        background: var(--pink-300) !important;
        border: 0 !important;
        border-radius: 999px !important;
        position: absolute !important;
        transition: transform .15s ease;
    }

    .ih-v3 .ihv-teameval[aria-checked="true"] .ihv-teameval-thumb[b-6g4n0qxqta] {
        transform: translateX(14px) !important;
    }

    /* 6 — the arrow only when it means something */
    .ih-v3 .ihv-readout-arrow[b-6g4n0qxqta] {
        display: none !important;
    }

        .ih-v3 .ihv-readout-arrow.is-forced[b-6g4n0qxqta] {
            display: inline !important;
        }

    /* 7 — the highlighter: the reference inset, wrapping per line */
    .ih-v3 .ihv-stance-head > span[b-6g4n0qxqta] {
        box-shadow: inset 0 -9px 0 var(--pink-underline) !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* ════════════════════════════════════════════════════════════════
   PASS H6 — responsiveness made structural
   The audit's three real holes, closed:
   1. A catch-all pins every un-area'd child of the grid to the
      full row (empty hero, error banners, anything future), at
      lower specificity than the five area assignments — so the
      empty and error states can never render half-width.
   2. min-width:0 on every grid child — the scrolling tab strip
      can no longer force page-level horizontal scroll.
   3. Two more title steps and word-breaking — 54 → 40 → 32 → 28,
      no overflow at 320.
   Plus the polish ring: owner-name ellipsis, touch scrolling on
   the tabs, a tasteful title measure on ultrawide.
   ════════════════════════════════════════════════════════════════ */

    /* 1 + 2 — structural: full-row default, shrinkable always */
    .ih-v3 > *[b-6g4n0qxqta] {
        grid-column: 1 / -1;
        min-width: 0;
    }
    /* (the five named areas out-rank this by specificity and re-pin themselves) */

    /* 3 — ultrawide measure; word safety at every size */
    .ih-v3 .ihv-title[b-6g4n0qxqta] {
        overflow-wrap: break-word;
    }

    /* Polish: the tab strip scrolls like it means it on touch */
    .ih-v3 .iv-pills-strip[b-6g4n0qxqta] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .ih-v3 .iv-pills-strip[b-6g4n0qxqta]::-webkit-scrollbar {
            display: none;
        }


/* ════════════════════════════════════════════════════════════════
   PASS H7 — container-true responsiveness; the grade made
   deterministic
   The viewport media queries were the wrong mechanism: the header
   is sized by the app shell, not the window, so a 900px component
   in a 1500px window never triggered them. The section becomes a
   container; every breakpoint keys to ITS width; type goes fluid
   on container units (cqi) so it scales continuously.
   The grade cluster resisted three structural passes against
   unseen flap markup — it goes deterministic: non-final glyphs
   hidden, the final one static. The flap animation is SACRIFICED
   on this header, explicitly; restore path: identify the base
   width source in the inspector, then re-enable the cycle.
   ════════════════════════════════════════════════════════════════ */

/* The header's wrapper is a NAMED container — and the only one.
   Unnamed queries bind to the nearest ancestor container, and a
   rogue container-type from global app CSS made the compact
   variant fire on a huge screen. Naming the container and binding
   every query to the name makes the condition unambiguous; the
   reset below forbids containers inside the header so the fluid
   cqi units resolve against this width and nothing else. */
.section-inner:has(> .ih-v3)[b-6g4n0qxqta] {
    container: ainna-header / inline-size;
}

.ih-v3[b-6g4n0qxqta], .ih-v3 *[b-6g4n0qxqta] {
    container-type: normal !important;
}

    /* ── The grade: deterministic, left-aligned, one glyph wide ── */
    .ih-v3 .ihv-score-column[b-6g4n0qxqta] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        flex: none !important;
    }

    .ih-v3 .ihv-grade[b-6g4n0qxqta] {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: fit-content !important;
        margin: 0 !important;
    }

    .ih-v3 .ihv-grade-letter-row[b-6g4n0qxqta],
    .ih-v3 .ihv-grade-letter[b-6g4n0qxqta] {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .ih-v3 .ihv-grade-flap[b-6g4n0qxqta] {
        display: none !important;
    }

        .ih-v3 .ihv-grade-flap.is-final[b-6g4n0qxqta] {
            display: inline-block !important;
            position: static !important;
            transform: none !important;
            opacity: 1 !important;
            animation: none !important;
        }

/* ═══ The responsive ladder, consolidated ═══
   Everything below replaces passes H7(type)/H8(stamp)/H10(640)/H12/
   H13v2 — five generations that fought each other by source order.
   The header now has exactly TWO presentations, bound to the grid:

       width > 940px  — two columns; the full editorial stamp
                        beside the title (grade, readout, stance,
                        crux, labelled assess slots).
       width ≤ 940px  — one column; the stamp compresses to a
                        compact line the moment it stacks under
                        the title. No intermediate state exists.

   The two scopes use range syntax and are mutually exclusive, so
   neither can leak into the other regardless of source order.
   Deleted, not parked: the H7/H8 duplicate type clamps (H12 held
   the final values), the 640-keyed compact stamp (the compact
   presentation now keys to the stacking seam itself), and H13v2
   (the tier→colour mapping lives on --tier-fg in the V3 grade
   block; per-element hex overrides are gone). */

/* ── Middle step: the stamp narrows before anything stacks, so the
   940–1120 band keeps a comfortable title column. ── */
@container ainna-header (max-width: 1120px) {
    .ih-v3[b-6g4n0qxqta] {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 40px;
    }

        .ih-v3 .ih-headline[b-6g4n0qxqta] {
            padding-left: 28px !important;
        }
}

/* ── Title: smaller ceiling, and a hard line ceiling — five lines,
   then an honest ellipsis (the full text rides the h1 tooltip). ── */
.ih-v3 .ih-titlerow .ihv-title[b-6g4n0qxqta] {
    font-size: clamp(24px, 4cqi, 40px) !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The framing panel disappears: the petrol card sits on the page */
.section:has(.ih-v3)[b-6g4n0qxqta],
.section-inner:has(> .ih-v3)[b-6g4n0qxqta] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The gap between the header card and every tab's content closes
   at the section seam — one rule pair, all tabs. */
.ih-v3[b-6g4n0qxqta] {
    margin-bottom: 0;
}

.iv-tab-panel > .section-inner[b-6g4n0qxqta] {
    padding-top: 10px !important;
}

.iv-tab-panel[b-6g4n0qxqta] {
    margin-top: 0 !important;
}

/* ═══ WIDE — the full editorial stamp, at the reference's own
   numbers: 92px letter cap, the 14-10-13-10 vertical rhythm, fonts
   pinned at 9.5 / 18 / 13 / 11.5. Scoped to the two-column state so
   it can never re-inflate the compact line below the seam. ═══ */
@container ainna-header (width > 940px) {
    .ih-v3 .ihv-grade-flap.is-final[b-6g4n0qxqta],
    .ih-v3 .ihv-grade-letter[b-6g4n0qxqta] {
        font-size: clamp(60px, 12.5cqi, 92px) !important;
    }

    .ih-v3 .ihv-grade-modifier[b-6g4n0qxqta] {
        font-size: clamp(24px, 5cqi, 38px) !important;
    }

    .ih-v3 .ihv-cols[b-6g4n0qxqta] {
        gap: 0 !important;
    }

    .ih-v3 .ihv-readout-line[b-6g4n0qxqta] {
        margin: 14px 0 0 !important;
        font-size: 9.5px !important;
        letter-spacing: 2px !important;
        gap: 7px !important;
    }

    .ih-v3 .ihv-stance-head[b-6g4n0qxqta] {
        margin-top: 10px !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .ih-v3 .ihv-move-preview[b-6g4n0qxqta] {
        margin-top: 8px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .ih-v3 .ihv-slot-internal[b-6g4n0qxqta],
    .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
        margin-top: 10px !important;
    }

    .ih-v3 .ihv-slot-body[b-6g4n0qxqta] {
        margin-top: 4px !important;
    }

    .ih-v3 .ihv-slot-head .ihv-slot-kicker[b-6g4n0qxqta] {
        font-size: 9.5px !important;
        letter-spacing: 2px !important;
    }
}

/* CTA language is size-stable across both presentations. */
.ih-v3 .ihv-teameval[b-6g4n0qxqta],
.ih-v3 .ihv-invite-cta[b-6g4n0qxqta],
.ih-v3 .ihv-enlist-cta[b-6g4n0qxqta] {
    font-size: 11.5px !important;
    letter-spacing: 1.2px !important;
}

.ih-v3 .ihv-review-note[b-6g4n0qxqta] {
    font-size: 11.5px !important;
    margin-top: 4px !important;
}

/* ═══ COMPACT — the single-column presentation. Fires at the
   stacking seam itself: the moment the panel drops under the title
   it becomes one inline line — grade cluster, stance, and the
   necessary-only metadata (count + confidence) on a shared
   baseline — with the two assess controls on one line beneath.
   Secondary content (crux, slot labels, the redundant "Grade"
   word) yields entirely. The whole line stays the panel's click
   target into the Assessment tab, exactly as the full stamp is. ═══ */
@container ainna-header (width <= 940px) {
    /* The stack (grid) */
    .ih-v3[b-6g4n0qxqta] {
        grid-template-columns: 1fr;
        grid-template-areas: "metabar" "title" "actions" "panel" "tabs";
        padding: 32px 28px 0;
        column-gap: 0;
    }

        .ih-v3 .ih-metabar[b-6g4n0qxqta] {
            flex-wrap: wrap;
            row-gap: 8px;
        }

        .ih-v3 .ih-headline[b-6g4n0qxqta] {
            border-left: 0 !important;
            border-top: 1px solid var(--line-strong) !important;
            padding: 14px 0 0 !important;
            margin-top: 10px !important;
        }

        .ih-v3 .ih-tabrail[b-6g4n0qxqta] {
            margin-top: 16px;
        }

        .ih-v3 .iv-pills-strip[b-6g4n0qxqta] {
            gap: 22px;
        }
        /* Secondary content yields — the move does not: it is the line to
           act on, and takes its own row under the stance. */
        .ih-v3 .ihv-slot-head[b-6g4n0qxqta] {
            display: none !important;
        }

        .ih-v3 .ihv-move-preview[b-6g4n0qxqta] {
            flex: 1 1 100% !important;
            margin: 4px 0 0 !important;
            font-size: 12.5px !important;
            line-height: 1.5 !important;
        }
        /* The line: grade cluster + verdict text share one baseline */
        .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
            flex-direction: row !important;
            align-items: baseline !important;
            flex-wrap: wrap !important;
            column-gap: 14px !important;
            row-gap: 4px !important;
        }

        .ih-v3 .ihv-score-column[b-6g4n0qxqta] {
            width: auto !important;
            flex: 0 0 auto !important;
        }

        .ih-v3 .ihv-verdict-main[b-6g4n0qxqta] {
            flex-direction: row !important;
            align-items: baseline !important;
            align-self: auto !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
            column-gap: 12px !important;
            row-gap: 4px !important;
        }
        /* Stance leads the text run; the readout trails as metadata.
           (Both live inside .ihv-verdict-main — order acts there.) */
        .ih-v3 .ihv-slot-verdict .ihv-stance-head[b-6g4n0qxqta] {
            order: -1 !important;
            margin: 0 !important;
            font-size: 15px !important;
            line-height: 1.3 !important;
        }

            .ih-v3 .ihv-slot-verdict .ihv-stance-head > span[b-6g4n0qxqta] {
                box-shadow: inset 0 -6px 0 var(--pink-underline) !important;
            }

        .ih-v3 .ihv-slot-verdict .ihv-readout-line[b-6g4n0qxqta] {
            margin: 0 !important;
        }
        /* Pre-verdict states ride the same line, without their divider */
        .ih-v3 .ihv-headline-row[b-6g4n0qxqta] {
            border-top: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .ih-v3 .ihv-verdict-label[b-6g4n0qxqta] {
            font-size: 13px !important;
        }
        /* The grade cluster, reduced: C ⁺ 49% as one inline run */
        .ih-v3 .ihv-grade[b-6g4n0qxqta] {
            gap: 6px !important;
        }

        .ih-v3 .ihv-grade-flap.is-final[b-6g4n0qxqta],
        .ih-v3 .ihv-grade-letter[b-6g4n0qxqta],
        .ih-v3 .ihv-grade-cycle-char[b-6g4n0qxqta],
        .ih-v3 .ihv-empty-dash[b-6g4n0qxqta] {
            font-size: 34px !important;
            letter-spacing: -1px !important;
        }

        .ih-v3 .ihv-grade-modifier[b-6g4n0qxqta] {
            position: static !important;
            font: 700 17px/1 var(--font-display) !important;
            align-self: flex-start !important;
            margin: 3px 0 0 -2px !important;
        }

        .ih-v3 .ihv-grade-score[b-6g4n0qxqta] {
            font-size: 11px !important;
        }

        .ih-v3 .ihv-score-unit[b-6g4n0qxqta] {
            font-size: 9px;
        }
        /* Both assess controls on one line beneath */
        .ih-v3 .ihv-cols[b-6g4n0qxqta] {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            align-items: baseline !important;
            column-gap: 22px !important;
            row-gap: 0 !important;
        }

        .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
            flex: 1 1 100% !important;
        }

        .ih-v3 .ihv-slot-internal[b-6g4n0qxqta],
        .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
            flex: 0 0 auto !important;
            margin-top: 10px !important;
        }

        .ih-v3 .ihv-slot-body[b-6g4n0qxqta] {
            margin-top: 0 !important;
        }
}

/* ── Phone: the metabar and the documents row are secondary and
   yield entirely; the card hugs its content. ── */
@container ainna-header (width <= 640px) {
    /* The phone card is four things, in order: the assessment status,
       the title, one tappable stamp line, the tabs. Everything else
       has a fuller home elsewhere and yields:
       - idea metadata + documents row: the Core tab and the chat;
       - the two assess controls + their seam: the Assessment tab's
         "Strengthen the verdict" section carries both, with room to
         explain them;
       - tab numbers: the five labels wrap onto two rows instead of
         scrolling off the edge. */
    .ih-v3[b-6g4n0qxqta] {
        padding: 18px 16px 0;
        border-radius: 16px;
    }

        .ih-v3 .ih-actionsrow[b-6g4n0qxqta],
        .ih-v3 .ih-metabar .ihv-codename[b-6g4n0qxqta],
        .ih-v3 .ih-metabar .ih-meta-strip[b-6g4n0qxqta] {
            display: none !important;
        }

        .ih-v3 .ih-meta-provenance[b-6g4n0qxqta] {
            margin-left: 0;
        }

        .ih-v3 .ih-titlerow[b-6g4n0qxqta] {
            margin-top: 12px;
        }

            .ih-v3 .ih-titlerow .ihv-title[b-6g4n0qxqta] {
                -webkit-line-clamp: 3;
                letter-spacing: -0.8px !important;
                margin-bottom: 12px !important;
            }

        .ih-v3 .ih-headline[b-6g4n0qxqta] {
            padding-top: 12px !important;
            margin-top: 0 !important;
        }

        .ih-v3 .ihv-slot-internal[b-6g4n0qxqta],
        .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
            display: none !important;
        }

        .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
            border-bottom: 0 !important;
            padding-bottom: 0 !important;
        }
        /* Provenance holds one line at phone widths. */
        .ih-v3 .ih-meta-provenance .ihv-readout-line[b-6g4n0qxqta] {
            font-size: 9.5px !important;
            letter-spacing: 1.5px !important;
            gap: 8px !important;
        }
        /* Tabs: the old pill base (min-width 120px, centred text) and
           the strip's inherited width both come back at phone widths —
           pinned here so the five labels wrap as plain text. */
        .ih-v3 .ih-tabrail[b-6g4n0qxqta] {
            margin-top: 14px;
            width: 100%;
            padding: 0;
        }

        .ih-v3 .iv-pills-strip[b-6g4n0qxqta] {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0 22px !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
        }

        .ih-v3 .iv-pill[b-6g4n0qxqta] {
            padding: 12px 2px !important;
            min-width: 0 !important;
            width: auto !important;
            flex: 0 0 auto !important;
            justify-content: flex-start !important;
        }

            .ih-v3 .iv-pill[b-6g4n0qxqta]::before {
                display: none;
            }
}

@container ainna-header (width <= 400px) {
    .ih-v3[b-6g4n0qxqta] {
        padding: 16px 14px 0;
    }
}

/* ════════════════════════════════════════════════════════════════
   PHONE = READ-ONLY (viewport ≤ 640px)
   On a phone the viewer is for reading — the verdict, the analyses,
   the personas. Everything that starts, re-runs, buys, shares or
   converses hides; navigation stays (tabs, the stamp tap, "show
   more", the panel expanders). Viewport-keyed: a phone is a
   viewport fact, not a container one. Child components' own
   buttons are outside this sheet's reach (CSS isolation) — see the
   delivery note.
   ════════════════════════════════════════════════════════════════ */
.ih-v3 .ih-readonly-note[b-6g4n0qxqta] {
    display: none;
}

@media (max-width: 640px) {
    /* header: the consented-update pill and the empty-state CTA */
    .ih-v3 .ihv-pending-pill[b-6g4n0qxqta],
    .ih-v3 .ihv-enlist-cta[b-6g4n0qxqta],
    /* tab panels: run, retry, re-analyze, upsell, discuss, coach-back */
    .sh-ready .btn[b-6g4n0qxqta],
    .sh-failed .btn[b-6g4n0qxqta],
    .sh-header-actions[b-6g4n0qxqta],
    .premium-lock-card .btn[b-6g4n0qxqta],
    .iv-judge-discuss[b-6g4n0qxqta],
    .sh-coach-back[b-6g4n0qxqta],
    .iv-empty-hero-arrow[b-6g4n0qxqta] {
        display: none !important;
    }

    .ih-v3 .ih-readonly-note[b-6g4n0qxqta] {
        display: block;
        padding: 2px 0 12px;
        font: 600 8.5px/1.4 var(--font-mono-3a);
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--ink-num);
    }
}

/* Phone viewports: the section's 40px side inset is the desktop frame;
   on a phone it spends a quarter of the width before the card's own
   padding. The card goes near full-bleed. Viewport-keyed on purpose —
   a phone is the one case the app shell doesn't decide. */
@media (max-width: 640px) {
    .section-inner:has(> .ih-v3)[b-6g4n0qxqta] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PASS H8 — the stamp, compacted (supersedes the un-scoped
   .ihv-band-mini block that stood here)
   1. The component mini-scores ride BESIDE the grade letter as three
      pills at the stamp's right edge, bottom-aligned to the letter's
      baseline — instead of stacking under it and pushing the readout,
      stance, crux and controls down. The agenda remark is the fit
      pill's tooltip.
   2. The two assess controls share one row (kickers above each,
      wrapping when the column is narrow) — the recipe the compact
      presentation already uses.
   3. The stray vertical hairline at the slots' left edge: pass-21
      pseudo-elements that outlived H3's border reset. Retired.
   4. Compact (≤940): the mini-scores yield with the crux; the
      one-line stamp is unchanged.
   Everything is scoped to .ih-v3 and, where H3–H7 forced values,
   forced back at the same specificity later in source.
   ════════════════════════════════════════════════════════════════ */

/* 3 — the hairline that survived H3 */
.ih-v3 .ihv-slot-internal[b-6g4n0qxqta]::before,
.ih-v3 .ihv-slot-external[b-6g4n0qxqta]::before,
.ih-v3 .ihv-slot-internal[b-6g4n0qxqta]::after,
.ih-v3 .ihv-slot-external[b-6g4n0qxqta]::after {
    content: none !important;
}

/* Shared: the mini-score pills (both presentations define them; only
   WIDE shows them). Three equal pills stacked at the stamp's right
   edge — label left, value right — so the values align down the
   stack. Ghost surface, the header's own button language. */
.ih-v3 .ihv-band-mini[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Each pill is tinted by its score band — the same 8.5 / 6.5 / 4.5
   bands the scorecard's dimension labels use, on the hues the grade
   letter uses for its tiers, so a 4.5 wears the same orange as the
   C+ it contributes to. --pill-fg is set once per tier and consumed
   by the value, the border and the wash. Unscored stays neutral ink. */
.ih-v3 .ihv-band-pill[b-6g4n0qxqta] {
    --pill-fg: var(--ink-muted);
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 122px;
    padding: 4px 11px 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill-fg) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill-fg) 38%, transparent);
    font: 600 9px/1.2 var(--font-mono-3a);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-muted);
}

    .ih-v3 .ihv-band-pill.tier-great[b-6g4n0qxqta] {
        --pill-fg: #4ade80;
    }

    .ih-v3 .ihv-band-pill.tier-good[b-6g4n0qxqta] {
        --pill-fg: #a3e635;
    }

    .ih-v3 .ihv-band-pill.tier-moderate[b-6g4n0qxqta] {
        --pill-fg: #fb923c;
    }

    .ih-v3 .ihv-band-pill.tier-poor[b-6g4n0qxqta] {
        --pill-fg: #f87171;
    }

.ih-v3 .ihv-band-v[b-6g4n0qxqta] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pill-fg);
    font-variant-numeric: tabular-nums;
}

/* Fit read-states: pending/stale ask for attention (amber overrides
       the band); inactive mutes. */
.ih-v3 .ihv-band-fit.fit-pending[b-6g4n0qxqta],
.ih-v3 .ihv-band-fit.fit-stale[b-6g4n0qxqta] {
    --pill-fg: var(--amber-400);
}

.ih-v3 .ihv-band-fit.fit-agendainactive[b-6g4n0qxqta] {
    opacity: .55;
}

/* Assessment provenance rides the metabar's right end — the same
   10.5px mono register as the idea's own metadata, a step brighter
   than the stamp's whispers, so the row reads as one line of meta:
   identity on the left, assessment status on the right. */
.ih-v3 .ih-meta-provenance[b-6g4n0qxqta] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

    .ih-v3 .ih-meta-provenance .ihv-readout-line[b-6g4n0qxqta] {
        margin: 0 !important;
        font-size: 10.5px !important;
        letter-spacing: 2px !important;
        gap: 9px !important;
        color: var(--ink-muted) !important;
    }

    .ih-v3 .ih-meta-provenance .ihv-eval-count[b-6g4n0qxqta],
    .ih-v3 .ih-meta-provenance .ihv-conf-line[b-6g4n0qxqta] {
        color: var(--ink-muted) !important;
    }

    .ih-v3 .ih-meta-provenance .ihv-readout-line--quiet[b-6g4n0qxqta] {
        color: var(--ink-faint) !important;
    }

    .ih-v3 .ih-meta-provenance .ihv-readout-line--error[b-6g4n0qxqta] {
        color: #f87171 !important;
    }

/* The diagnosis / actions seam: the verdict slot closes with a
   hairline and the two controls sit under it (the provenance line
   that used to head this group now lives in the metabar). */
.ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 14px !important;
}

/* Graded: the slot kickers go. "Team evaluation" and "Invite reviewers"
   say internal and external themselves, and the provenance line above
   is the group's header — two lines where there were four. Pre-verdict
   states keep the kickers: their bodies are the same "Unlocks at 100%"
   line twice and need the labels to mean anything. */
.ih-v3 .ih-verdict-panel.state-graded .ihv-slot-internal .ihv-slot-head[b-6g4n0qxqta],
.ih-v3 .ih-verdict-panel.state-graded .ihv-slot-external .ihv-slot-head[b-6g4n0qxqta] {
    display: none !important;
}

.ih-v3 .ih-verdict-panel.state-graded .ihv-slot-internal .ihv-slot-body[b-6g4n0qxqta],
.ih-v3 .ih-verdict-panel.state-graded .ihv-slot-external .ihv-slot-body[b-6g4n0qxqta] {
    margin-top: 0 !important;
}

/* Confidence on its own semantic scale — low coral, medium amber,
   high green — never the grade's tier hues (H3 had low and medium
   share one amber, which next to an orange C+ read as the letter's
   colour). */
.ih-v3 .ihv-conf-dot--low[b-6g4n0qxqta] {
    background: #f87171 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #f87171 18%, transparent);
}

.ih-v3 .ihv-conf-dot--medium[b-6g4n0qxqta] {
    background: var(--amber-400) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-400) 18%, transparent);
}

.ih-v3 .ihv-conf-dot--high[b-6g4n0qxqta] {
    background: #4ade80 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 18%, transparent);
}

.ih-v3 .ihv-conf-dot--error[b-6g4n0qxqta] {
    background: #f87171 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #f87171 18%, transparent);
}

/* ═══ WIDE — the panel column earns its width. H3 fixed it at 400px
   (360px inside the inset), which stacks the two assess controls no
   matter how wide the screen is; the title column is idle above
   ~1000px anyway (54px type wraps at three lines long before). Above
   the 1120 step the panel takes 30% of the header, 400–520px: the
   controls share a row from ~1330px up, the crux measure stays under
   ~75 characters, and the 340px step below 1120 is untouched. ═══ */
@container ainna-header (width > 1120px) {
    .ih-v3[b-6g4n0qxqta] {
        grid-template-columns: minmax(0, 1fr) clamp(400px, 30%, 520px);
    }
}

/* ═══ WIDE — the mini-scores beside the letter; controls on one row ═══ */
@container ainna-header (width > 940px) {
    /* 1 — the score column becomes a row: grade cluster | mini-scores.
       H7 made it block/100% so the cluster would be deterministic;
       the cluster keeps every one of those rules — only its parent
       changes shape. */
    .ih-v3 .ihv-score-column[b-6g4n0qxqta] {
        display: flex !important;
        flex-direction: row !important; /* the base layer's column direction comes back with display:flex — pin it */
        flex-wrap: nowrap !important;
        justify-content: space-between !important; /* cluster left, pills at the right edge */
        align-items: flex-end !important; /* fallback */
        align-items: last baseline !important; /* the bottom pill's text sits on the letter's baseline */
        gap: 18px !important;
        width: 100% !important;
    }
    /* 2 — the two assess controls share one row. .ihv-cols is the
       verdict slot's parent: the verdict takes the full row, B and C
       fill the next one and wrap under each other only when the
       column is too narrow for both. */
    .ih-v3 .ihv-cols[b-6g4n0qxqta] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
    }

    .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
        flex: 1 1 100% !important;
    }

    .ih-v3 .ihv-slot-internal[b-6g4n0qxqta],
    .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
        flex: 1 1 auto !important;
        margin-top: 12px !important;
    }
    /* The stance sits directly under the grade now: a little more air. */
    .ih-v3 .ihv-stance-head[b-6g4n0qxqta] {
        margin-top: 16px !important;
    }
}

/* ═══ COMPACT — secondary content yields, as the crux does ═══ */
@container ainna-header (width <= 940px) {
    .ih-v3 .ihv-band-mini[b-6g4n0qxqta] {
        display: none !important;
    }

    .ih-v3 .ihv-slot-verdict[b-6g4n0qxqta] {
        padding-bottom: 8px !important;
    }

    .ih-v3 .ihv-slot-internal[b-6g4n0qxqta],
    .ih-v3 .ihv-slot-external[b-6g4n0qxqta] {
        margin-top: 8px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PASS H9 — the pre-verdict stamp
   Before there is a grade the stamp was still dressed as one: a
   cycling pink letter that read as a real "D", a centred "Assessing"
   floating under it, and two labelled slots in the CTA register
   saying AFTER THE JUDGE'S VERDICT twice. Now it looks like a state:
   a quiet ring in the letter's place while the judge runs, the state
   line left-aligned with one plain sentence under it, and no slots
   until there is a verdict for them to strengthen.
   ════════════════════════════════════════════════════════════════ */

/* The ring: track in the header's own track tone, one teal arc. */
.ih-v3 .ihv-assess-ring[b-6g4n0qxqta] {
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--track);
    border-top-color: var(--teal-400);
    animation: ihvAssessSpin-b-6g4n0qxqta 1.1s linear infinite;
    margin: 14px 0 6px;
}

@keyframes ihvAssessSpin-b-6g4n0qxqta {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ih-v3 .ihv-assess-ring[b-6g4n0qxqta] {
        animation: none;
    }
}

/* Older layers pulse the running / empty tiles' border and background;
   H3 already zeroed both, so the animation only ever costs frames. */
.ih-v3 .ihv-grade--running[b-6g4n0qxqta],
.ih-v3 .ihv-grade--error[b-6g4n0qxqta],
.ih-v3 .ihv-grade--empty[b-6g4n0qxqta] {
    animation: none !important;
}

/* The pending / empty dash and the error mark: quiet, one glyph. */
.ih-v3 .ihv-empty-dash[b-6g4n0qxqta] {
    font: 700 56px/1 var(--font-display) !important;
    color: var(--ink-num) !important;
    letter-spacing: 0 !important;
}

.ih-v3 .ihv-grade--error i[b-6g4n0qxqta] {
    font-size: 40px !important;
    color: #f87171 !important;
}

/* The state line: label over one sentence, left-aligned — where the
   stance sits once there is a grade. */
.ih-v3 .ihv-headline-row[b-6g4n0qxqta] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 4px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.ih-v3 .ihv-verdict-label[b-6g4n0qxqta] {
    order: 0 !important; /* H4 ordered it after the score column; inside the row it must lead */
    margin: 0 !important;
    padding: 0 !important; /* the label was once a pill; its inset survived as an 11px indent */
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font: 600 16px/1.3 var(--font-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-high) !important;
    opacity: 1 !important;
}

.ih-v3 .ihv-verdict-label--error[b-6g4n0qxqta] {
    color: #f87171 !important;
}

.ih-v3 .ihv-verdict-sub[b-6g4n0qxqta] {
    order: 1;
    font: 400 12.5px/1.5 var(--font-body);
    color: var(--ink-muted);
    max-width: 36ch;
}

/* The state block sits close under the ring / dash / mark, on the
   stamp's left edge. Passes 27–30 centred .ihv-verdict-main ("content
   bands center"); the graded lines are full-width so it never showed,
   the shorter state block drifted to the middle. Pinned in the
   two-column presentation; the compact one has its own row rules. */
.ih-v3 .ih-verdict-panel:not(.state-graded) .ihv-verdict-main[b-6g4n0qxqta] {
    margin: 0 !important;
    padding: 0 !important;
}

@container ainna-header (width > 940px) {
    .ih-v3 .ihv-verdict-main[b-6g4n0qxqta] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        align-self: stretch !important;
        width: 100% !important;
        text-align: left !important;
    }
}

/* Re-assessment: the prior grade stays legible but steps back while
   it is being re-read — H3's tier colour was showing it at full
   strength, as if it were current. */
.ih-v3 .ihv-grade--reassessing[b-6g4n0qxqta] {
    opacity: .45 !important;
    filter: saturate(.7);
}

.ih-v3 .ih-verdict-panel:not(.state-graded) .ihv-headline-row[b-6g4n0qxqta] {
    margin: 6px 0 0 !important;
}

.ih-v3 .ihv-dots span[b-6g4n0qxqta] {
    background: var(--ink-muted) !important;
}

/* The verdict slot's own "Verdict" kicker never shows — an older layer
   re-shows it in pre-verdict states; H3's hide was not forced. */
.ih-v3 .ihv-slot-verdict .ihv-slot-head[b-6g4n0qxqta] {
    display: none !important;
}

/* No slots before the verdict: their only content was the wait itself. */
.ih-v3 .ih-verdict-panel:not(.state-graded) .ihv-slot-internal[b-6g4n0qxqta],
.ih-v3 .ih-verdict-panel:not(.state-graded) .ihv-slot-external[b-6g4n0qxqta] {
    display: none !important;
}

.ih-v3 .ih-verdict-panel:not(.state-graded) .ihv-slot-verdict[b-6g4n0qxqta] {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@container ainna-header (width <= 940px) {
    .ih-v3 .ihv-assess-ring[b-6g4n0qxqta] {
        width: 26px;
        height: 26px;
        border-width: 2.5px;
        margin: 0;
    }

    .ih-v3 .ihv-empty-dash[b-6g4n0qxqta] {
        font-size: 34px !important;
    }

    .ih-v3 .ihv-grade--error i[b-6g4n0qxqta] {
        font-size: 26px !important;
    }

    .ih-v3 .ihv-headline-row[b-6g4n0qxqta] {
        margin: 0 !important;
    }

    .ih-v3 .ihv-verdict-label[b-6g4n0qxqta] {
        font-size: 14px !important;
    }

    .ih-v3 .ihv-verdict-sub[b-6g4n0qxqta] {
        display: none;
    }
}
/* /Components/ProdComponents/OpportunityScorecard.razor.rz.scp.css */
/* ── Outer shell — unified 3D object ── */

.opportunity-assessment-panel[b-r9n2iif30r] {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

    .opportunity-assessment-panel.collapsed[b-r9n2iif30r] {
        background: transparent;
    }

/* ── Assessment section: transparent shell, no chrome ──
   The new .assessment-reasoning panel is fully self-contained
   and stands on the page surface. The legacy dark gradient
   only applies to the hero-thinking and hero-empty states. */

.assessment-section[b-r9n2iif30r] {
    position: relative;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: 1;
}

    /* Hero states (thinking / empty / error) match the primary panel
       surface so the panel doesn't change personality based on its
       state. */

    .assessment-section:has(.assessment-hero-thinking)[b-r9n2iif30r],
    .assessment-section:has(.assessment-hero-empty)[b-r9n2iif30r],
    .assessment-section:has(.assessment-hero-error)[b-r9n2iif30r] {
        padding: 1.75rem 2rem 1.5rem;
        min-height: 285px;
        background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.75) 0%, transparent 55%), radial-gradient(ellipse at top right, rgba(240, 12, 113, 0.05) 0%, transparent 50%), linear-gradient(180deg, #f9f6ef 0%, #efeadf 100%);
        border: 1px solid rgba(15, 23, 42, 0.10);
        border-radius: 18px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12), 0 32px 80px rgba(240, 12, 113, 0.04);
    }

.opportunity-assessment-panel.empty-state[b-r9n2iif30r] {
    background: transparent;
}

    .opportunity-assessment-panel.empty-state .assessment-section[b-r9n2iif30r] {
        background: transparent;
        box-shadow: none;
    }

/* ════════════════════════════════
   STATE A — Judge Thinking Hero (first assessment)
   Premium introduction of The Judge persona
   ════════════════════════════════ */

.assessment-hero-thinking[b-r9n2iif30r] {
    animation: judgeFocusIn-b-r9n2iif30r 0.5s ease-out both;
}

.judge-thinking-ring-icon[b-r9n2iif30r] {
    font-size: 1.75rem;
    color: var(--ink-5); /* was --on-dark-3: white 40% on the cream hero surface */
    animation: judgeIconPulse-b-r9n2iif30r 3s ease-in-out infinite;
}

@keyframes judgeIconPulse-b-r9n2iif30r {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }
}

.judge-thinking-headline[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--ink); /* was --on-dark: white 90% on cream — the headline was invisible */
    letter-spacing: var(--letter-spacing-tight);
    margin-top: 0.25rem;
}

/* ── Thinking state for os-judge-name — static text + dots ── */

.os-judge-name.os-judge-thinking[b-r9n2iif30r] {
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Inline dots for judge thinking — on-dark context */

.judge-dots[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

    .judge-dots span[b-r9n2iif30r] {
        display: inline-block;
        width: 3px;
        height: 3px;
        background: var(--ink-5); /* was --on-dark-3 (see the headline) */
        border-radius: 50%;
        animation: dotBounce-b-r9n2iif30r 1.2s ease-in-out infinite;
    }

        .judge-dots span:nth-child(2)[b-r9n2iif30r] {
            animation-delay: 0.15s;
        }

        .judge-dots span:nth-child(3)[b-r9n2iif30r] {
            animation-delay: 0.3s;
        }

/* ════════════════════════════════
   HERO — Layout grid (dark bg from section)
   ════════════════════════════════ */

.assessment-hero[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
}

@keyframes dotBounce-b-r9n2iif30r {
    0%, 60%, 100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    30% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* ═══════════════════════════════════
   SCORE RING — Inverted (filled ring,
   neutral center text on dark)
   ═══════════════════════════════════ */

.os-score-column[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.os-ring-wrap[b-r9n2iif30r] {
    position: relative;
    width: 136px;
    height: 136px;
    animation: osRingIn-b-r9n2iif30r 0.5s ease-out both;
}

@keyframes osRingIn-b-r9n2iif30r {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.os-ring-svg[b-r9n2iif30r] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}

/* Ring track — every hero state now sits on the cream surface
   (the :has() rule above), so the track is an ink hairline, not a
   white-alpha arc that vanished on it. */

.os-ring-track[b-r9n2iif30r] {
    stroke: var(--border-color);
    stroke-width: 8;
}

/* Ring fill — VIVID colored arc (the primary score signal) */

.computing-ring-hero[b-r9n2iif30r] {
    stroke: var(--ink-6); /* was white 15%: invisible on cream */
    stroke-linecap: round;
    animation: spinDashHero-b-r9n2iif30r 1.8s linear infinite;
}

@keyframes spinDashHero-b-r9n2iif30r {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -414.69;
    }
}

/* ── Ring center: color-filled disc with neutral letter ── */

.os-ring-center[b-r9n2iif30r] {
    position: absolute;
    /* Inset to sit inside the ring stroke */
    inset: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: var(--sc-center, transparent);
    border-radius: 50%;
    transition: background 0.3s ease;
}

/* ── Inverted: center text is neutral/white ── */

/* ── Empty Ring ── */

.os-ring-empty[b-r9n2iif30r] {
    width: 120px;
    height: 120px;
}

    .os-ring-empty .os-ring-track[b-r9n2iif30r] {
        stroke: var(--border-color);
    }

.os-empty-dash[b-r9n2iif30r] {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--border-color);
}

.assessment-hero-empty[b-r9n2iif30r] {
    opacity: 1; /* the muted read now comes from the ink tokens below, not a blanket fade that dropped the copy under AA */
}

    .assessment-hero-empty .os-meta[b-r9n2iif30r],
    .assessment-hero-thinking .os-meta[b-r9n2iif30r] {
        gap: 0.375rem;
        margin-right: 0;
    }

.os-empty-verdict[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3); /* --text-tertiary (#9aa0a6) read 2.4:1 on the cream surface */
    line-height: 1.35;
}

.os-empty-subtitle[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--ink-4); /* 7:1 on cream; was 2.4:1 */
    line-height: 1.5;
}

/* ════════════════════════════════
   ERROR HERO
   Same warm cream surface as other hero states (handled at the
   .assessment-section level via :has()), with a soft amber/red
   tint on the ring and a retry button. Color is deliberately
   warm (amber) rather than aggressive red — signals "needs
   attention" without alarming.
   ════════════════════════════════ */

.assessment-hero-error .os-meta[b-r9n2iif30r] {
    gap: 0.625rem;
    margin-right: 0;
}

.os-ring-wrap.os-ring-error .os-ring-track[b-r9n2iif30r] {
    stroke: rgba(220, 38, 38, 0.18);
}

.os-error-icon[b-r9n2iif30r] {
    font-size: 2.25rem;
    color: rgba(220, 38, 38, 0.7);
    line-height: 1;
}

.os-error-verdict[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: rgba(15, 23, 42, 0.85);
    line-height: 1.35;
}

.os-error-subtitle[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-tertiary);
    line-height: 1.5;
    max-width: 480px;
}

.os-error-retry[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5625rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(15, 23, 42, 0.85);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    align-self: flex-start;
}

    .os-error-retry:hover[b-r9n2iif30r] {
        border-color: rgba(15, 23, 42, 0.20);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    .os-error-retry:active[b-r9n2iif30r] {
        transform: translateY(1px);
    }

    .os-error-retry i[b-r9n2iif30r] {
        font-size: var(--text-xs);
        color: rgba(220, 38, 38, 0.7);
    }

/* ════════════════════════════════
   JUDGE ATTRIBUTION
   ════════════════════════════════ */

.os-judge-attr[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    animation: osMetaIn-b-r9n2iif30r 0.4s ease-out both;
}

.os-judge-icon[b-r9n2iif30r] {
    font-size: var(--text-2xs);
    color: var(--ink-5); /* was --on-dark-3 */
}

.os-judge-name[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-5); /* was --on-dark-3 */
}

/* ════════════════════════════════
   META STACK — On-dark adapted
   ════════════════════════════════ */

.os-meta[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding-top: 2px;
    margin-right: 5rem;
    animation: osMetaIn-b-r9n2iif30r 0.5s ease-out 0.1s both;
}

@keyframes osMetaIn-b-r9n2iif30r {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ════════════════════════════════
   JUDGE FOCUS — Gap + Question + Handoff
   Flows directly from verdict, no container
   ════════════════════════════════ */

@keyframes judgeFocusIn-b-r9n2iif30r {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── State B — Subtle skeleton bars for unlock area ── */

.jfs-subtle[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* State A skeleton groups — preview the layout that's coming */

.jfs-verdict[b-r9n2iif30r] {
    margin-top: 0.25rem;
}

.jfs-focus[b-r9n2iif30r] {
    margin-top: 0.375rem;
}

.skeleton-bar-soft[b-r9n2iif30r] {
    height: 10px;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.11) 40%, rgba(15,23,42,0.05) 80%); /* ink alphas; the white ones vanished on cream */
    background-size: 200% 100%;
    animation: jfsShimmer-b-r9n2iif30r 2.8s ease-in-out infinite;
}

@keyframes jfsShimmer-b-r9n2iif30r {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── Shimmer: brightness pulse ──
   Light bg (dark text): brightens
   Dark bg (light text): dims then restores
   ───────────────────────────────────────── */

.text-shimmer[b-r9n2iif30r] {
    animation: shimmerBrighten-b-r9n2iif30r 2.5s ease-in-out infinite;
}

.assessment-hero .text-shimmer[b-r9n2iif30r] {
    animation: shimmerDim-b-r9n2iif30r 2.5s ease-in-out infinite;
}

@keyframes shimmerBrighten-b-r9n2iif30r {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(2);
    }
}

@keyframes shimmerDim-b-r9n2iif30r {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ── Ainna brand mark — inline identity ── */

.ainna-mark[b-r9n2iif30r] {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.7;
    vertical-align: middle;
}

/* ── Gentle pulse — just opacity, not glow ── */

/* ════════════════════════════════
   TAB EMPTY STATES — Shared pattern
   For: Assessors, Feedback, any future tab
   ════════════════════════════════ */















/* ════════════════════════════════
   ASSESSMENT DETAIL — supporting block
   ───────────────────────────────────────────────
   Sits directly below the primary .assessment-reasoning panel
   and explains it: tabs (Overview / Feedback Intelligence) plus
   the dimensional breakdown and contributors.
   Visually recessive: tinted neutral surface, lighter border,
   no elevation. Same 16px radius for shape consistency, but
   the primary panel reads as floating; this one reads as the
   ground beneath it.
   ════════════════════════════════ */

.assessment-detail[b-r9n2iif30r] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
    background: rgba(15, 23, 42, 0.025);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: none;
    /* margin-top removed from base. The graded state (HasAnyAssessment)
       renders the detail panel as the FIRST element of .assessment-section
       — there is no hero above it — so any top margin shows as a white
       stripe of page background between the verdict panel above this
       component and the panel that holds the tabs. The conditional rule
       below restores the gap only when a hero is actually rendered above
       (loading / empty / error states), which is the only case that needs
       the visual separation. */
    overflow: hidden;
}

/* Restore the gap above .assessment-detail only when the preceding
   .assessment-section contains a hero block (loading / empty / error
   states). The graded state renders no hero, so the section above is
   visually empty and the gap is unnecessary. Uses :has() so the
   margin tracks the actual rendered content rather than a state flag.

   Note: .assessment-detail is a SIBLING of .assessment-section
   (not nested inside it), which is why the selector targets the
   detail directly when its preceding section has a hero. */

.assessment-section:has(.assessment-hero) + .assessment-detail[b-r9n2iif30r] {
    margin-top: 1rem;
}

.assessment-detail-inner[b-r9n2iif30r] {
    overflow: hidden;
    min-height: 0;
}

.assessment-detail.expanded .assessment-detail-inner[b-r9n2iif30r] {
    min-height: 520px;
}

.assessment-detail.expanded[b-r9n2iif30r] {
    grid-template-rows: 1fr;
    opacity: 1;
}



    .assessment-detail.expanded .intel-grid[b-r9n2iif30r] {
        animation: fadeSlideIn-b-r9n2iif30r 0.3s cubic-bezier(0.4,0,0.2,1) 0.08s both;
    }

    .assessment-detail.expanded .dimensions-section[b-r9n2iif30r] {
        animation: fadeSlideIn-b-r9n2iif30r 0.3s cubic-bezier(0.4,0,0.2,1) 0.14s both;
    }



@keyframes fadeSlideIn-b-r9n2iif30r {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════
   TAB BAR
   ════════════════════════════════ */















/* Overview tab — slightly bolder when inactive to signal "home" */





/* ════════════════════════════════════════════════════
   INTELLIGENCE GRID — Risks · Assumptions · Questions
   ════════════════════════════════════════════════════ */

.intel-grid[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0;
    min-width: 0;
}

.intel-card[b-r9n2iif30r] {
    padding: 1.125rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .intel-card:hover[b-r9n2iif30r] {
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        transform: translateY(-1px);
    }

/* Tier identity now lives entirely in the label (color + icon) and
   the subtle colored border. Background stays white so three cards
   side by side read as one quiet group, not three competing tints. */

.intel-risks[b-r9n2iif30r] {
    border-color: rgba(239, 68, 68, 0.22);
}

    .intel-risks:hover[b-r9n2iif30r] {
        border-color: rgba(239, 68, 68, 0.36);
    }

.intel-assumptions[b-r9n2iif30r] {
    border-color: rgba(245, 158, 11, 0.24);
}

    .intel-assumptions:hover[b-r9n2iif30r] {
        border-color: rgba(245, 158, 11, 0.38);
    }

.intel-recommendations[b-r9n2iif30r] {
    border-color: rgba(139, 92, 246, 0.24);
}

    .intel-recommendations:hover[b-r9n2iif30r] {
        border-color: rgba(139, 92, 246, 0.38);
    }

/* ── Label row ── */

.intel-label-row[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.intel-label[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font);
    font-size: 0.5rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.intel-label-icon[b-r9n2iif30r] {
    font-size: 0.4375rem;
    opacity: 0.7;
}

.intel-risks .intel-label[b-r9n2iif30r] {
    color: #ef4444;
}

.intel-assumptions .intel-label[b-r9n2iif30r] {
    color: #f59e0b;
}

.intel-recommendations .intel-label[b-r9n2iif30r] {
    color: #8b5cf6;
}

/* ── Title ── */

.intel-title[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: 1.35;
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 0.875rem;
    padding: 0;
}

/* ── Items ── */

.intel-items[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.intel-item[b-r9n2iif30r] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
    position: relative;
    transition: background 0.15s ease;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: var(--radius-sm);
}

    .intel-item:first-child[b-r9n2iif30r] {
        border-top: none;
    }

    .intel-item:hover[b-r9n2iif30r] {
        background: rgba(15, 23, 42, 0.08);
    }

/* ── Number circle — neutral, same across all cards ── */

.intel-item-num[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--ink-5);
    background: rgba(0,0,0,0.03);
    border: 1.5px solid rgba(0,0,0,0.06);
}

/* ── Body ── */

.intel-item-body[b-r9n2iif30r] {
    flex: 1;
    min-width: 0;
    line-height: 1.5;
    position: relative;
}

.intel-item-text[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── Item action — overlay CTA, no reflow.
   Anchored to the right edge of the item body. Hidden by default,
   fades in when the row is hovered (with the body-mask occluding
   the text behind it). The whole row stays a single line; the
   button never pushes layout around. */

.intel-item-cta[b-r9n2iif30r] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(4px);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem;
    font-family: var(--font);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    z-index: 1;
}

.intel-item:hover .intel-item-cta[b-r9n2iif30r] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.intel-item-cta:hover[b-r9n2iif30r] {
    color: var(--text-secondary);
    background: var(--background-tertiary);
    border-color: var(--border-strong);
}

.intel-item-cta i[b-r9n2iif30r] {
    font-size: 0.375rem;
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.intel-item-cta:hover i[b-r9n2iif30r] {
    transform: translateX(2px);
    opacity: 0.8;
}

/* ── Sent state ── */

.intel-item-sent .intel-item-text[b-r9n2iif30r] {
    color: var(--text-tertiary);
}

.intel-item-sent .intel-item-num[b-r9n2iif30r] {
    opacity: 0.4;
}

.intel-item-sent-badge[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    margin-top: 0.25rem;
    font-family: var(--font);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--success);
    white-space: nowrap;
    animation: sentFadeIn-b-r9n2iif30r 0.3s ease-out both;
}

    .intel-item-sent-badge i[b-r9n2iif30r] {
        font-size: 0.375rem;
    }

@keyframes sentFadeIn-b-r9n2iif30r {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Touch: always show CTA ── */

@media (hover: none) {
    .intel-item-cta[b-r9n2iif30r] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════
   EMPTY & SKELETON
   ════════════════════════════════ */

.intel-empty[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2rem 1rem;
    flex: 1;
    min-height: 120px;
}

.intel-empty-icon[b-r9n2iif30r] {
    font-size: 1.25rem;
    color: var(--border-strong);
}

.intel-empty-text[b-r9n2iif30r] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.5;
}

.intel-skeleton[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
}

.skeleton-bar[b-r9n2iif30r] {
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--background-tertiary);
    animation: skeletonPulse-b-r9n2iif30r 1.8s ease-in-out infinite;
    animation-delay: 0.15s;
}

@keyframes skeletonPulse-b-r9n2iif30r {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ════════════════════════════════
   DIMENSIONS
   ════════════════════════════════ */

.dimensions-section[b-r9n2iif30r] {
    padding: 0;
}

@keyframes spinDash-b-r9n2iif30r {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -114.67;
    }
}

.dimension-value[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--text-heading);
}

.dimension-value-computing[b-r9n2iif30r], .dimension-value-empty[b-r9n2iif30r] {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--border-strong);
}

.score-label-text[b-r9n2iif30r] {
    display: inline-block;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.25rem;
    animation: labelFadeIn-b-r9n2iif30r 0.3s ease-out both;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes labelFadeIn-b-r9n2iif30r {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.score-label-empty[b-r9n2iif30r] {
    color: var(--border-strong);
}

.score-label-processing[b-r9n2iif30r] {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    animation: processingFade-b-r9n2iif30r 1.8s ease-in-out infinite;
}

@keyframes processingFade-b-r9n2iif30r {
    0%,100% {
        color: var(--text-tertiary);
    }

    50% {
        color: var(--border-strong);
    }
}

/* Score label colors — driven by app.css score tokens */

.label-great[b-r9n2iif30r] {
    color: var(--score-great);
    background: color-mix(in srgb, var(--score-great) 8%, transparent);
}

.label-good[b-r9n2iif30r] {
    color: var(--score-good);
    background: color-mix(in srgb, var(--score-good) 8%, transparent);
}

.label-moderate[b-r9n2iif30r] {
    color: var(--score-moderate);
    background: color-mix(in srgb, var(--score-moderate) 8%, transparent);
}

.label-poor[b-r9n2iif30r] {
    color: var(--score-poor-vivid);
    background: color-mix(in srgb, var(--score-poor) 8%, transparent);
}

/* ─── Tabs metadata (right-side chips on the tab strip) ────────






/* Contributors variant — clickable, scrolls to the contributors
   strip below. The dotted underline appears on hover only, to
   avoid noise when the chip is sitting quietly at rest. */





/* Header + qualifier row wrap gracefully on narrow screens. */

/* Final letter: fade in with a 0.20s anticipation pause so the
   climax has weight before settling. */

/* Modifier: fades in after the final letter has settled. Stays
   absolute-positioned in the top-right corner of the tile. */

/* ──────────────────────────────────────────────────────────────
   Strip layout — 70 / 30 columns
   ──────────────────────────────
     ┌── 70% ──────────────────────────────┬── 30% ──────────┐
     │ [avatars] Just Ainna so far · ...   │  [Invite a r.]  │
     │                                     │      [⤴]        │
     │ Started · Mar 12   Latest · 3h ago  │                 │
     │                                     │                 │
     │ Confidence may rise as you add...   │                 │
     └─────────────────────────────────────┴─────────────────┘

   Text column carries state + instruction. Action column carries
   the buttons, vertically centered against the text block.
   Separator on top — divides this section from the dimensions above.
   ────────────────────────────────────────────────────────────── */

.contributors-strip[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: 70fr 30fr;
    align-items: center;
    column-gap: 2rem;
    margin: 1.5rem 1.5rem 1.5rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    scroll-margin-top: 1rem;
}

.cs-text-col[b-r9n2iif30r] {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    /* Right padding gives breathing room between the text and the divider. */
    padding-right: 2rem;
}

    /* Vertical divider that lives in the column gap. Subtle slate
       hairline that fades top + bottom for a refined edge. */

    .cs-text-col[b-r9n2iif30r]::after {
        content: "";
        position: absolute;
        top: 0.25rem;
        bottom: 0.25rem;
        right: 0;
        width: 1px;
        background: linear-gradient( 180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.12) 18%, rgba(15, 23, 42, 0.12) 82%, rgba(15, 23, 42, 0) 100% );
        pointer-events: none;
    }

.cs-row-left[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.cs-avatars[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Avatar pile - overlapping circles ── */

.cs-avatars[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.cs-avatar[b-r9n2iif30r] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin-left: -0.4375rem;
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
}

    .cs-avatar:first-child[b-r9n2iif30r] {
        margin-left: 0;
    }

.cs-avatar-ai[b-r9n2iif30r] {
    background: #0f172a;
    overflow: hidden;
}

    .cs-avatar-ai img[b-r9n2iif30r] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.cs-avatar-human[b-r9n2iif30r] {
    background: rgba(240, 12, 113, 0.10);
    color: #f00c71;
}

    .cs-avatar-human i[b-r9n2iif30r] {
        font-size: 0.75rem;
    }

.cs-avatar-more[b-r9n2iif30r] {
    background: rgba(15, 23, 42, 0.06);
    color: #5f6368;
    font-size: 0.625rem;
}

/* ── Meta column: primary line + stats line ── */

.cs-meta-line[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.35;
}

.cs-meta-line-primary[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: 0.875rem;
    color: #2c3e50;
}

    .cs-meta-line-primary strong[b-r9n2iif30r] {
        font-weight: var(--font-weight-bold);
        color: #2c3e50;
    }

.cs-meta-hint[b-r9n2iif30r] {
    color: #5f6368;
    font-weight: var(--font-weight-regular);
    font-size: 0.8125rem;
}

.cs-meta-stats[b-r9n2iif30r] {
    font-size: 0.75rem;
}

.cs-stat[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    color: #5f6368;
    font-family: var(--font);
}

    .cs-stat i[b-r9n2iif30r] {
        font-size: 0.6875rem;
        color: #94a3b8;
    }

.cs-stat-label[b-r9n2iif30r] {
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.cs-stat-value[b-r9n2iif30r] {
    color: #475569;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Subtle separator dot between stats. */

.cs-stat + .cs-stat[b-r9n2iif30r]::before {
    content: "·";
    color: #cbd5e1;
    margin: 0 0.4375rem 0 0;
}

/* ── Actions: primary Invite + secondary report icon ── */

.cs-action-primary[b-r9n2iif30r] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.5625rem 0.875rem;
    background: #f00c71;
    border: 1px solid #f00c71;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 2px rgba(240, 12, 113, 0.20);
}

    .cs-action-primary:hover:not(.disabled):not(:disabled)[b-r9n2iif30r] {
        background: #d10761;
        border-color: #d10761;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(240, 12, 113, 0.28);
    }

    .cs-action-primary:active:not(.disabled):not(:disabled)[b-r9n2iif30r] {
        transform: translateY(0);
    }

    .cs-action-primary i[b-r9n2iif30r] {
        font-size: 0.75rem;
    }

.cs-action-secondary[b-r9n2iif30r] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.5625rem 0.875rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

    .cs-action-secondary:hover:not(.disabled):not(:disabled)[b-r9n2iif30r] {
        background: rgba(15, 23, 42, 0.02);
        border-color: rgba(15, 23, 42, 0.28);
        color: #2c3e50;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    }

    .cs-action-secondary:active:not(.disabled):not(:disabled)[b-r9n2iif30r] {
        transform: translateY(0);
    }

    .cs-action-secondary i[b-r9n2iif30r] {
        font-size: 0.75rem;
    }

    .cs-action-primary.disabled[b-r9n2iif30r],
    .cs-action-secondary.disabled[b-r9n2iif30r],
    .cs-action-primary:disabled[b-r9n2iif30r],
    .cs-action-secondary:disabled[b-r9n2iif30r] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ── Mid-range: tighten gaps but keep the two columns ── */

@media (max-width: 1080px) {
    .contributors-strip[b-r9n2iif30r] {
        column-gap: 1.5rem;
    }

    .cs-text-col[b-r9n2iif30r] {
        padding-right: 1.5rem;
    }
}

/* ── Mobile: collapse to a single column, hide the divider ── */

@media (max-width: 720px) {
    .contributors-strip[b-r9n2iif30r] {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .cs-text-col[b-r9n2iif30r] {
        padding-right: 0;
    }

        .cs-text-col[b-r9n2iif30r]::after {
            display: none;
        }
}

/* ════════════════════════════════════════════════════════════════════
   DIMENSION PANELS - two-column wide layout, collapsed by default
   --------------------------------------------------------------------
   Replaces the dimensions horizontal strip with a stack of wide
   panels. Two columns on wide viewports collapsing to one under
   720px. Each panel shows ring + label + status while collapsed
   (96px); clicking expands to show the full justification.
   ════════════════════════════════════════════════════════════════════ */

.dim-panels[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    align-items: start;
}

.dim-panel[b-r9n2iif30r] {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

    .dim-panel:hover[b-r9n2iif30r] {
        border-color: color-mix(in srgb, #f00c71 22%, #e8eaed);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    }

    .dim-panel:focus-visible[b-r9n2iif30r] {
        outline: 2px solid #f00c71;
        outline-offset: 2px;
    }

/* ── Head: ring + label/status + chevron - always visible ── */

.dim-panel-head[b-r9n2iif30r] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem;
    min-height: 8rem;
}

.dim-panel-ring-wrap[b-r9n2iif30r] {
    position: relative;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
}

.dim-panel-ring[b-r9n2iif30r] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

    .dim-panel-ring .ring-track[b-r9n2iif30r] {
        fill: none;
        stroke: color-mix(in srgb, #2c3e50 7%, transparent);
        stroke-width: 3.7;
    }

    .dim-panel-ring .ring-fill[b-r9n2iif30r] {
        fill: none;
        stroke: #94a3b8;
        stroke-width: 3.7;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.8s ease-out, stroke 0.3s ease-out;
    }

.dim-panel.status-great .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #16a34a;
}

.dim-panel.status-good .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #65a30d;
}

.dim-panel.status-moderate .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #ea580c;
}

.dim-panel.status-poor .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #dc2626;
}

.dim-panel-ring .computing-ring-small[b-r9n2iif30r] {
    animation: spinDash-b-r9n2iif30r 1.2s linear infinite;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(180, 185, 195, 0.35));
}

.dim-panel-value-wrap[b-r9n2iif30r] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dim-panel-value-wrap .dimension-value[b-r9n2iif30r] {
        font-family: var(--font);
        font-size: 1.0625rem;
        font-weight: var(--font-weight-extrabold);
        color: #2c3e50;
    }

.dim-panel-meta[b-r9n2iif30r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dim-panel-title-row[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.dim-panel-label[b-r9n2iif30r] {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: #2c3e50;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dim-panel-status[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .dim-panel-status .score-label-text[b-r9n2iif30r] {
        margin: 0;
    }

.dim-panel-delta[b-r9n2iif30r] {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    padding: 0.0625rem 0.3125rem;
    border-radius: 4px;
}

.dim-panel.dim-improved .dim-panel-delta[b-r9n2iif30r] {
    color: #16a34a;
    background: #f0fdf4;
}

.dim-panel.dim-declined .dim-panel-delta[b-r9n2iif30r] {
    color: #dc2626;
    background: #fef2f2;
}

/* Expander affordance — shown only when opening reveals more: the
   justification overflows the 3-line clamp (JS adds .is-truncated
   after measuring) or a disagreement note waits (.has-more). */

.dim-panel-chevron[b-r9n2iif30r] {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.0625rem;
    display: none;
    width: 1.625rem;
    height: 1.625rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-size: 0.625rem;
    transition: transform 0.25s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.dim-panel.is-truncated .dim-panel-chevron[b-r9n2iif30r],
.dim-panel.has-more .dim-panel-chevron[b-r9n2iif30r] {
    display: inline-flex;
}

.dim-panel:hover .dim-panel-chevron[b-r9n2iif30r] {
    color: #2c3e50;
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.16);
}

.dim-panel.is-open .dim-panel-chevron[b-r9n2iif30r] {
    transform: rotate(180deg);
}

/* ── Justification: three lines when clamped, full when open ── */

.dim-panel-justification[b-r9n2iif30r] {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 0.875rem;
    line-height: 1.55;
    color: #5f6368;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dim-panel.is-open .dim-panel-justification[b-r9n2iif30r] {
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    display: block;
}

.dim-panel-justification-empty[b-r9n2iif30r] {
    color: #94a3b8;
    font-style: italic;
}

/* ── Responsive: collapse to single column on narrow viewports ── */

/* ════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .os-ring-wrap[b-r9n2iif30r],
    .os-meta[b-r9n2iif30r],
    .score-label-text[b-r9n2iif30r],
    .score-label-processing[b-r9n2iif30r],
    .computing-ring-small[b-r9n2iif30r],
    .computing-ring-hero[b-r9n2iif30r],
    .skeleton-bar[b-r9n2iif30r],
    .skeleton-bar-soft[b-r9n2iif30r],
    .judge-dots span[b-r9n2iif30r],
    .intel-item-cta[b-r9n2iif30r],
    .intel-item-cta i[b-r9n2iif30r],
    .judge-thinking-ring-icon[b-r9n2iif30r],
    .os-judge-name.os-judge-thinking[b-r9n2iif30r],
    .assessment-hero-thinking[b-r9n2iif30r],
    .text-shimmer[b-r9n2iif30r],
    .os-judge-attr[b-r9n2iif30r] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .opportunity-assessment-panel[b-r9n2iif30r],
    .ring-fill[b-r9n2iif30r],
    .assessment-detail[b-r9n2iif30r] {
        transition: none;
    }

    .text-shimmer[b-r9n2iif30r],
    .assessment-hero .text-shimmer[b-r9n2iif30r] {
        animation: none !important;
    }
}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */

@media (max-width: 1024px) {
    .os-meta[b-r9n2iif30r] {
        margin-right: 3.5rem;
    }
}

@media (max-width: 900px) {
    .assessment-section[b-r9n2iif30r] {
        padding: 1.5rem 1.5rem 1.25rem;
    }

    .assessment-hero[b-r9n2iif30r] {
        gap: 1.25rem;
    }

        .assessment-hero:not(.assessment-hero-empty):not(.assessment-hero-thinking):not(.assessment-hero-error)[b-r9n2iif30r] {
            padding: 1.5rem 1.25rem 1.25rem;
        }

    .os-ring-wrap[b-r9n2iif30r] {
        width: 120px;
        height: 120px;
    }

    .os-meta[b-r9n2iif30r] {
        margin-right: 2rem;
    }
}

@media (max-width: 768px) {
    .assessment-section[b-r9n2iif30r] {
        padding: 1.25rem 1.25rem 1.25rem;
        min-height: 260px;
    }

    .assessment-hero[b-r9n2iif30r] {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

        .assessment-hero:not(.assessment-hero-empty):not(.assessment-hero-thinking):not(.assessment-hero-error)[b-r9n2iif30r] {
            padding: 1.25rem 1rem 1rem;
        }

    .os-score-column[b-r9n2iif30r] {
        justify-self: center;
    }

    .os-meta[b-r9n2iif30r] {
        align-items: center;
        text-align: center;
        margin-right: 0;
    }

    .os-judge-attr[b-r9n2iif30r] {
        justify-content: center;
    }

    .os-ring-wrap[b-r9n2iif30r] {
        width: 116px;
        height: 116px;
    }









    .intel-grid[b-r9n2iif30r] {
        grid-template-columns: 1fr;
        padding: 1rem 1rem;
        gap: 0.5rem;
    }

    .dimensions-section[b-r9n2iif30r] {
        padding: 1rem 1rem 1.25rem;
    }

    .intel-item-cta[b-r9n2iif30r] {
        opacity: 1;
        transform: translateY(0);
    }

    .intel-item[b-r9n2iif30r] {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .assessment-section[b-r9n2iif30r] {
        padding: 1rem 0.75rem 0;
        min-height: 240px;
    }

    .assessment-hero:not(.assessment-hero-empty):not(.assessment-hero-thinking):not(.assessment-hero-error)[b-r9n2iif30r] {
        padding: 1rem 0.75rem 0.75rem;
    }

    .os-ring-wrap[b-r9n2iif30r] {
        width: 104px;
        height: 104px;
    }

    .dimensions-section[b-r9n2iif30r] {
        padding: 1rem 0.75rem 1.25rem;
    }

    .intel-grid[b-r9n2iif30r] {
        padding: 1rem 0.75rem;
    }

    .intel-card[b-r9n2iif30r] {
        padding: 1rem 1rem 0.875rem;
    }

    .intel-title[b-r9n2iif30r] {
        font-size: var(--text-base);
    }

    .intel-item-text[b-r9n2iif30r] {
        font-size: var(--text-sm);
    }

    .intel-item-num[b-r9n2iif30r] {
        width: 1.375rem;
        height: 1.375rem;
        font-size: var(--text-2xs);
        border-width: 1px;
    }
}

@media (max-width: 480px) {
    .assessment-section[b-r9n2iif30r] {
        padding: 0.875rem 0.625rem 0;
    }

    .assessment-hero:not(.assessment-hero-empty):not(.assessment-hero-thinking):not(.assessment-hero-error)[b-r9n2iif30r] {
        padding: 0.875rem 0.5rem 0.625rem;
    }

    .os-ring-wrap[b-r9n2iif30r] {
        width: 96px;
        height: 96px;
    }

    .dimension-value[b-r9n2iif30r] {
        font-size: var(--text-base);
    }
}

/* ════════════════════════════════════════════════════════════════════
   CONTRIBUTORS STRIP v2 — preview joins the action column
   The reviewer-edition preview graduates from an inline text link in
   the note to a proper secondary CTA between the invite and the
   (now explicitly disabled) export. cs-meta-link retired with its
   last usage; the preview-flow status note trades inline styles for
   a real class — the header's ihv-review-note idiom, light-tuned.
   ──────────────────────────────────────────────────────────────────── */

.cs-meta-status[b-r9n2iif30r] {
    margin-top: 0.625rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #E0447C;
    border-radius: 6px;
    background: rgba(224, 68, 124, 0.06);
    color: #475569;
}

/* ════════════════════════════════════════════
   PASS 31 — lens · quieter meta · dual-pane footer
   [a] .os-classification banner → .os-lens metadata row
   [b] trajectory chip retired (rules above now dead)
   [c] footer: identity row, then two evaluation panes,
       then a tertiary export row. The strip stacks.
   Old .os-classification*, .cs-actions-col, .cs-meta-note
   rules are dead selectors — sweep-listed, not excised.
   ════════════════════════════════════════════ */

/* ── [c] the strip stacks: identity, panes, tertiary ── */

.contributors-strip[b-r9n2iif30r] {
    flex-direction: column;
    align-items: stretch;
    gap: 1.125rem;
}

.cs-eval-panes[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.125rem;
}

.cs-eval-pane[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in srgb, currentColor 9%, transparent);
    border-radius: var(--radius-md, 8px);
}

.cs-eval-kicker[b-r9n2iif30r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.cs-eval-why[b-r9n2iif30r] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    opacity: 0.75;
}

/* Switch — the header's instrument, scorecard-scoped. */

.cs-teameval[b-r9n2iif30r] {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.125rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, currentColor 72%, transparent);
    transition: color 0.18s ease;
}

    .cs-teameval:hover[b-r9n2iif30r] {
        color: inherit;
    }

    .cs-teameval i[b-r9n2iif30r] {
        font-size: 0.625rem;
        opacity: 0.8;
    }

.cs-teameval-label[b-r9n2iif30r] {
    margin-right: auto;
}

.cs-teameval-switch[b-r9n2iif30r] {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.cs-teameval-thumb[b-r9n2iif30r] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 45%, transparent);
    transition: transform 0.18s ease, background 0.18s ease;
}

.cs-teameval[aria-checked="true"] .cs-teameval-switch[b-r9n2iif30r] {
    background: color-mix(in srgb, currentColor 78%, transparent);
    border-color: transparent;
}

.cs-teameval[aria-checked="true"] .cs-teameval-thumb[b-r9n2iif30r] {
    background: #ffffff;
    transform: translateX(14px);
}

.cs-teameval--locked[b-r9n2iif30r] {
    color: color-mix(in srgb, currentColor 45%, transparent);
}

/* The invitation hugs its content inside the pane. */

.cs-invite-cta[b-r9n2iif30r] {
    align-self: flex-start;
}

/* ════════════════════════════════════════════
   PASS 32 — the lens joins the card rhythm
   Same-selector override on the 31-wave padding: the lens
   adopts the tabs row's inset recipe, so its kicker aligns
   with Overview below instead of cramming the card edge.
   ════════════════════════════════════════════ */



/* ════════════════════════════════════════════
   PASS 33 — the section under the rule
   Root cause fixed: .contributors-strip is a GRID (70fr 30fr);
   the 31-wave flex override was inert and the panes auto-placed
   into the 30fr column. Re-templated: row 1 = identity | tools
   (Export docks right of the row it describes); row 2 = the
   full-width Strengthen-the-verdict section under its own rule.
   ════════════════════════════════════════════ */

.contributors-strip[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1.375rem;
}

.cs-text-col[b-r9n2iif30r] {
    grid-column: 1;
    grid-row: 1;
}

.cs-strip-tools[b-r9n2iif30r] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

.cs-eval-section[b-r9n2iif30r] {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.375rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.cs-eval-head[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cs-eval-title[b-r9n2iif30r] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.85);
}

.cs-eval-subtitle[b-r9n2iif30r] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.55);
}

/* ════════════════════════════════════════════
   PASS 34 — the footer opens properly
   A context head ("Perspectives") tops the strip; the strip
   gains a real white band above it; the avatar pile gains
   dashed empty seats. Row map: head r1 · identity|tools r2 ·
   Strengthen section r3. Same-selector over the 33-wave rows.
   ════════════════════════════════════════════ */

.contributors-strip[b-r9n2iif30r] {
    margin-top: 2.75rem;
    padding-top: 1.625rem;
    row-gap: 1.125rem;
}

.cs-strip-head[b-r9n2iif30r] {
    grid-column: 1 / -1;
    grid-row: 1;
}

.cs-strip-title[b-r9n2iif30r] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.85);
}

.cs-text-col[b-r9n2iif30r] {
    grid-row: 2;
}

.cs-strip-tools[b-r9n2iif30r] {
    grid-row: 2;
}

.cs-eval-section[b-r9n2iif30r] {
    grid-row: 3;
}

/* Empty seat: the base .cs-avatar geometry and pile overlap,
   with a dashed ring instead of the white one. */

.cs-avatar-ghost[b-r9n2iif30r] {
    border: 2px dashed rgba(15, 23, 42, 0.20);
    background: rgba(15, 23, 42, 0.02);
    color: rgba(15, 23, 42, 0.26);
    box-shadow: none;
    font-size: 0.625rem;
}

/* ════════════════════════════════════════════
   PASS 35 — visible avatar rings
   White gap ring (pile separation) + 1px ink hairline outside
   it, so every real avatar — Ainna's included — has a crisp
   edge on the card. Ghosts re-declared after the base so they
   keep the dashed ring only. Same-selector over 34's ghost.
   ════════════════════════════════════════════ */

.cs-avatar[b-r9n2iif30r] {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.cs-avatar-ghost[b-r9n2iif30r] {
    border: 2px dashed rgba(15, 23, 42, 0.22);
    box-shadow: none;
}

/* ════════════════════════════════════════════
   PASS 36 — the white h-separator
   A dedicated white rule with a soft under-shadow — the emboss
   idiom — marks the break above Perspectives. The strip hands
   its border-top duty (and most of its top spacing) to it.
   Same-selector over the 34-wave strip values.
   ════════════════════════════════════════════ */

.contributors-strip[b-r9n2iif30r] {
    border-top: 0;
    margin-top: 1.375rem;
    padding-top: 0;
}

/* ════════════════════════════════════════════
   PASS 37 — the action center panel
   Sibling of .assessment-detail inside the transparent root:
   the page background in the gap IS the white separation. A
   step brighter than the detail's ink tint, same radius family,
   faint lift. The strip's own margins pad the interior. The
   36-wave .cs-hsep rules are dead — element excised — sweep.
   ════════════════════════════════════════════ */

.cs-action-center[b-r9n2iif30r] {
    margin-top: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

    .cs-action-center .contributors-strip[b-r9n2iif30r] {
        margin-top: 1.5rem;
    }

/* ============================================
   NEW MODEL SURFACES — bands & consensus meta
   ────────────────────────────────────────────
   Added with the OverallAssessment rebuild:
   band labels (idea vs holder fit), the
   per-dimension consensus line, the contested
   flag, and the rapporteur's disagreement note.
   ============================================ */
.dim-band-label[b-r9n2iif30r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f6368;
    opacity: 0.7;
    margin: 1.125rem 0 0.4375rem;
}

.dim-panels + .dim-band-label[b-r9n2iif30r] {
    margin-top: 1.5rem;
}

.dim-panel-consensus[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    color: #5f6368;
    opacity: 0.85;
}

    .dim-panel-consensus.is-contested[b-r9n2iif30r] {
        color: var(--score-poor-vivid, #dc2626);
        opacity: 1;
    }

.dim-consensus-flag[b-r9n2iif30r] {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.625rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 4px;
    color: var(--score-poor-vivid, #dc2626);
    background: color-mix(in srgb, var(--score-poor) 10%, transparent);
}

.dim-panel-disagreement[b-r9n2iif30r] {
    /* Discrete but flagged (owner feedback): smaller type, muted ink,
       amber exclamation — quiet to read, impossible to miss. */
    margin-top: 0.45rem;
    font-style: italic;
    font-size: 0.72rem;
    line-height: 1.55;
    color: #6b7280;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.dim-disagreement-icon[b-r9n2iif30r] {
    color: #d97706;
    font-size: 0.8rem;
    margin-top: 0.14rem;
    flex: 0 0 auto;
}

.dim-panel.dim-contested[b-r9n2iif30r] {
    border-color: color-mix(in srgb, var(--score-poor) 30%, transparent);
}

/* ── Pending voices: the advisory register badge, design-system edition.
      Quiet elevated surface, accent chip, two-line text, solid CTA —
      an invitation, not an alert. ── */
.os-pending-strip[b-r9n2iif30r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.6rem 0 0.85rem;
    padding: 0.65rem 0.75rem 0.65rem 0.65rem;
    background: color-mix(in srgb, var(--accent, #f00c71) 6%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--accent, #f00c71) 30%, transparent);
    border-left: 3px solid var(--accent, #f00c71);
    border-radius: 0.85rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #f00c71) 10%, transparent);
}

.os-pending-chip[b-r9n2iif30r] {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--accent, #f00c71) 10%, transparent);
    color: var(--accent, #f00c71);
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.os-pending-text[b-r9n2iif30r] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.os-pending-headline[b-r9n2iif30r] {
    font-size: 0.84rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.os-pending-names[b-r9n2iif30r] {
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-pending-cta[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: var(--accent, #f00c71);
    color: #fff;
    flex: 0 0 auto;
    transition: filter 0.15s ease, transform 0.05s ease;
}

    .os-pending-cta:hover:not(:disabled)[b-r9n2iif30r] {
        filter: brightness(1.06);
    }

    .os-pending-cta:active:not(:disabled)[b-r9n2iif30r] {
        transform: translateY(1px);
    }

    .os-pending-cta:disabled[b-r9n2iif30r] {
        opacity: 0.55;
        cursor: default;
    }

/* (Card-header echo retired: with the strip carrying real contrast and
   the page header owning the pill, a third surface was noise.) */

/* ── Empty-state early reviewers (Phase C): reviews before the first pass ── */
.os-empty-reviewers[b-r9n2iif30r] {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #2563eb;
}

/* ════════════════════════════════════════════
   PASS 34v2 — the story's opening (Story batch)
   The move first, large and quiet-confident; beneath it one
   qualifier row (scale chip as an expandable toggle, verdict
   driver, envelope reading) in the mono kicker family. The
   stance chip is gone — conviction lives in the header, and
   the tab never restates it. Lens container and kicker rules
   retired with their markup; the chip and the why-prose are
   reused by the qualifier row.
   ════════════════════════════════════════════ */

.os-kicker[b-r9n2iif30r] {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 0.375rem;
}

.intel-empty-compact[b-r9n2iif30r] {
    min-height: 0;
    padding: 0.5rem 0 0.25rem;
    justify-content: flex-start;
    text-align: left;
    opacity: 0.75;
}

/* ════════════════════════════════════════════
   PASS 36 — the two-column stage (Story batch)
   Left, wide: the dimensions — the product's namesake, the
   working surface, the NUMBERS register (tabular, quiet labels,
   scores carry). Right: the triad stacked as one reading track —
   the PROSE register, a step smaller and lighter, headlines and
   the Move carry the voice. Sticky right so the reasoning stays
   present while the evidence scrolls. Mobile keeps the story
   order: triad first, then dimensions.
   ════════════════════════════════════════════ */

.os-overview-grid[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-areas: "dims triad";
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
    align-items: start;
}

.os-col-dims[b-r9n2iif30r] {
    grid-area: dims;
    min-width: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.os-col-triad[b-r9n2iif30r] {
    grid-area: triad;
    min-width: 0;
    position: sticky;
    top: 1rem;
}

    /* Prose register: the triad reads a step smaller and lighter. */
    .os-col-triad .intel-card[b-r9n2iif30r] {
        padding: 0.9375rem 1.0625rem 0.8125rem;
    }

    .os-col-triad .intel-title[b-r9n2iif30r] {
        font-size: 0.9375rem;
        line-height: 1.4;
        margin-bottom: 0.625rem;
    }

    .os-col-triad .intel-item-text[b-r9n2iif30r] {
        font-size: 0.8125rem;
        line-height: 1.55;
    }

    .os-col-triad .intel-item-num[b-r9n2iif30r] {
        transform: scale(0.85);
        opacity: 0.55;
    }

    .os-col-triad .intel-item[b-r9n2iif30r] {
        padding-top: 0.5625rem;
        padding-bottom: 0.5625rem;
    }


/* ════════════════════════════════════════════
   PASS 37 — the why, the anchors, the act layer (Story batch)
   The hero is the grade's justification ("Why C+ …"); two quiet
   anchors point down the page. The act layer closes the loop
   below the evidence: the Move and the Lens as real panels with
   a discuss affordance — a collaboration surface, never a
   static caption. One gutter, one kicker family, throughout.
   ════════════════════════════════════════════ */

.os-act-grid[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: minmax(0, 62rem); /* the lens alone now; the move moved to the header */
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem;
    align-items: start;
}

.os-panel[b-r9n2iif30r] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 1.0625rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    scroll-margin-top: 1rem;
}


/* ════════════════════════════════════════════
   PASS 38 — the card head (Story batch)
   The handshake row: the grade very small (tiers echo the
   stance hue family until header tokens are shared), the
   operational meta in the mono register, the lens as a real
   badge that jumps to its panel. The driver folds under the
   crux as a quiet line; the qualifier row and the anchor
   links are retired.
   ════════════════════════════════════════════ */

/* Inline figures: quiet boxes tinted by band (the dimension labels'
   --score-* hues; the grade its tier hues); the scale is the button
   it always was. Sized to the footnote; the solo lede's are a step up. */

.os-fig[b-r9n2iif30r] {
    --pill-fg: var(--ink-3);
    appearance: none;
    display: inline-block;
    padding: 0 0.3125rem 0.0625rem;
    margin: 0 0.1em;
    border-radius: 0.3125rem;
    border: 1px solid color-mix(in srgb, var(--pill-fg) 24%, transparent);
    background: color-mix(in srgb, var(--pill-fg) 4%, transparent);
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--pill-fg);
    font-variant-numeric: tabular-nums;
    vertical-align: 0.0625em;
    white-space: nowrap;
}


    .os-fig.status-great[b-r9n2iif30r] {
        --pill-fg: var(--score-great);
    }

    .os-fig.status-good[b-r9n2iif30r] {
        --pill-fg: var(--score-good);
    }

    .os-fig.status-moderate[b-r9n2iif30r] {
        --pill-fg: var(--score-moderate);
    }

    .os-fig.status-poor[b-r9n2iif30r] {
        --pill-fg: var(--score-poor-vivid);
    }

.os-fig-grade[b-r9n2iif30r] {
    font-weight: 700;
    letter-spacing: 0.04em;
}

    .os-fig-grade.tier-a[b-r9n2iif30r] {
        --pill-fg: #15803d;
    }

    .os-fig-grade.tier-b[b-r9n2iif30r] {
        --pill-fg: #4d7c0f;
    }

    .os-fig-grade.tier-c[b-r9n2iif30r] {
        --pill-fg: #c2410c;
    }

    .os-fig-grade.tier-df[b-r9n2iif30r] {
        --pill-fg: #b91c1c;
    }


/* The driver's dimension as a tag — its band tints it, the number stays
   with the panel below. */

.os-fig-dim[b-r9n2iif30r] {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The hint's verb is the share entry point, as an inline link. On phones
   (read-only) the static wording takes its place. */

.os-lede-link[b-r9n2iif30r] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-interactive);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
}

    .os-lede-link:hover[b-r9n2iif30r] {
        color: var(--color-interactive-hover);
        text-decoration-color: currentColor;
    }

.os-lede-link-static[b-r9n2iif30r] {
    display: none;
}

.os-lede-updated[b-r9n2iif30r] {
    color: var(--ink-6);
}

/* ════════════════════════════════════════════
   Phone = read-only (viewport ≤ 640px)
   The card is for reading on a phone: update / retry / Ask Ainna /
   discuss / export / strengthen-the-verdict hide. The pending notice
   keeps its text (it is information), the dimension expanders and
   the lens jump stay (they are navigation). Same policy as the
   viewer's header and panels.
   ════════════════════════════════════════════ */

@media (max-width: 640px) {
    .os-pending-cta[b-r9n2iif30r],
    .os-error-retry[b-r9n2iif30r],
    .intel-item-cta[b-r9n2iif30r],
    .cs-strip-tools[b-r9n2iif30r],
    .cs-eval-section[b-r9n2iif30r],
    .os-lede-link[b-r9n2iif30r],
    .os-lede-link-tail[b-r9n2iif30r] {
        display: none !important;
    }

    .os-lede-link-static[b-r9n2iif30r] {
        display: inline;
    }
}

/* ════════════════════════════════════════════
   PASS 38 — the row and the grid (PASS 36's two-column stage reverted)
   Reading order is the story's: the reasoning first — risks,
   assumptions, recommendations as one row of three — then the
   evidence, the dimension panels in two columns: half the scroll and
   a ~60-character measure per panel, instead of fifteen thousand-
   pixel cards beside a sticky sidebar. Triad 3 → 1 below 1100px,
   dimensions 2 → 1 below 900px. Same-selector over the 36-wave.
   ════════════════════════════════════════════ */

.os-overview-grid[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.os-col-triad[b-r9n2iif30r] {
    position: static;
    top: auto;
}

.intel-grid[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.dim-panels[b-r9n2iif30r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}


/* ════════════════════════════════════════════
   The lens notes
   Reference information about the reading frame as labelled entries;
   the panel frame and the row layout are in PASS 40.
   ════════════════════════════════════════════ */

.os-lens-notes[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--ink-4);
}

    .os-lens-notes dt[b-r9n2iif30r] {
        font-family: var(--font-mono, monospace);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-6);
        padding-top: 0.35em;
    }

    .os-lens-notes dd[b-r9n2iif30r] {
        margin: 0;
        min-width: 0;
    }

.os-note-lead[b-r9n2iif30r] {
    display: block;
}

.os-note-items[b-r9n2iif30r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 1.125rem;
    margin-top: 0.125rem;
    color: var(--ink-5);
}

.os-note-item b[b-r9n2iif30r] {
    font-weight: 600;
    color: var(--ink-4);
}

.os-note-item.is-current[b-r9n2iif30r] {
    color: var(--ink-3);
}

    .os-note-item.is-current b[b-r9n2iif30r] {
        color: var(--ink-2);
    }

@media (max-width: 640px) {
    .os-lens-notes[b-r9n2iif30r] {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }

        .os-lens-notes dt[b-r9n2iif30r] {
            padding-top: 0.5rem;
        }
}

/* ════════════════════════════════════════════
   PASS 40 — bands and the row
   Two idea bands (Problem, Solution) headed by their component
   reading; the card itself is unchanged (ring, title, badge, the
   reading at three lines, chevron), open shows it in full. Salience
   is said inside the card (kicker, ring colour, delta, consensus),
   never by card size. Holder fit is one card beside the framed
   lens, the row split like the grid. A foot note closes the card.
   ════════════════════════════════════════════ */

/* The overview column stretches its children: PASS 38 turned the grid
   into a flex column but kept the grid's align-items: start, which sizes
   each child to its content; compact tiles have nothing wide in them. */
.os-overview-grid[b-r9n2iif30r] {
    align-items: stretch;
}

/* ── Band head: label · reading · caption · toggle ── */
.dim-band-head[b-r9n2iif30r] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.125rem 0 0.5rem;
    min-width: 0;
}

.dim-panels + .dim-band-head[b-r9n2iif30r] {
    margin-top: 1.5rem;
}

.dim-band-head .dim-band-label[b-r9n2iif30r] {
    margin: 0;
}

.dim-band-fig[b-r9n2iif30r] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

/* ── Two independent columns per band ── */
.dim-panels[b-r9n2iif30r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.dim-col[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}


/* ── The card: driver kicker, hover and focus in the neutral family ── */
.dim-panel-kicker[b-r9n2iif30r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink-5, #6b7280);
    margin-bottom: -0.25rem;
}

.dim-panel.status-poor .dim-panel-kicker[b-r9n2iif30r] {
    color: #dc2626;
}

.dim-panel.status-moderate .dim-panel-kicker[b-r9n2iif30r] {
    color: #ea580c;
}

.dim-panel.dim-driver[b-r9n2iif30r] {
    border-color: color-mix(in srgb, #2c3e50 18%, transparent);
}

.dim-panel.is-open[b-r9n2iif30r] {
    border-color: color-mix(in srgb, #2c3e50 14%, transparent);
}

.dim-panel:hover[b-r9n2iif30r] {
    border-color: color-mix(in srgb, #2c3e50 22%, transparent);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.dim-panel:focus-visible[b-r9n2iif30r] {
    outline: 2px solid color-mix(in srgb, #2c3e50 35%, transparent);
    outline-offset: 2px;
}

/* ── The row: fit card beside the lens, both framed ── */
.os-act-grid.has-fit[b-r9n2iif30r] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 1.25rem 0.75rem;
}

#os-lens-panel.os-panel[b-r9n2iif30r] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 1.0625rem 1.25rem 1rem;
    max-width: 62rem;
}

.os-act-grid.has-fit #os-lens-panel.os-panel[b-r9n2iif30r] {
    max-width: none;
}

.os-act-grid.has-fit .os-note-items[b-r9n2iif30r] {
    flex-direction: column;
    gap: 0.125rem;
}

/* ── The fit card: the dimension card's parts, in a panel ──
   Padding matches the card head's so the ring and the text column
   sit where they do on the cards above; the angles are aligned to
   that text column and shown in full. ── */
.os-fit-card[b-r9n2iif30r] {
    gap: 0.75rem;
    padding: 1.0625rem 1.125rem 1rem;
}

.os-act-col[b-r9n2iif30r] {
    min-width: 0;
}

    .os-act-col > .dim-band-head[b-r9n2iif30r] {
        margin-top: 0;
    }

.os-fit-context[b-r9n2iif30r] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-5, #6b7280);
    white-space: nowrap;
}

.os-fig-code[b-r9n2iif30r] {
    --pill-fg: var(--ink-4, #4b5563);
    margin: 0;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

button.os-fig-code-link[b-r9n2iif30r] {
    cursor: pointer;
}

    button.os-fig-code-link:hover[b-r9n2iif30r] {
        --pill-fg: var(--color-interactive);
    }

.os-fit-lede[b-r9n2iif30r] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-right: 1.5rem;
}

    .os-fit-lede .dim-panel-meta[b-r9n2iif30r] {
        gap: 0.5rem;
    }

/* One ring size for the cards and the fit panel, pinned at both scopes
   so a rule outside this sheet cannot size one and not the other. */
.dim-panel .dim-panel-ring-wrap[b-r9n2iif30r],
.os-fit-card .dim-panel-ring-wrap[b-r9n2iif30r] {
    width: 3.5rem;
    height: 3.5rem;
}

/* The same hues the dimension rings use. */
.os-fit-card.status-great .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #16a34a;
}

.os-fit-card.status-good .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #65a30d;
}

.os-fit-card.status-moderate .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #ea580c;
}

.os-fit-card.status-poor .dim-panel-ring .ring-fill[b-r9n2iif30r] {
    stroke: #dc2626;
}

/* Readings in the fit card are never clamped. */
.os-fit-narrative[b-r9n2iif30r],
.os-fit-angle-full[b-r9n2iif30r] {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

.os-fit-angles[b-r9n2iif30r] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.os-fit-angle[b-r9n2iif30r] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 0;
    border-top: 1px solid color-mix(in srgb, #2c3e50 8%, transparent);
}

    .os-fit-angle:last-child[b-r9n2iif30r] {
        padding-bottom: 0.25rem;
    }

    .os-fit-angle .dim-panel-label[b-r9n2iif30r] {
        font-size: 0.875rem;
    }

    .os-fit-angle .dim-panel-consensus[b-r9n2iif30r] {
        margin-top: 0;
    }

.os-fit-door[b-r9n2iif30r] {
    appearance: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 0;
    padding: 0.125rem 0 0;
    margin: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-interactive);
    cursor: pointer;
}

    .os-fit-door i[b-r9n2iif30r] {
        font-size: 0.6875rem;
        transition: transform 0.18s ease;
    }

    .os-fit-door:hover i[b-r9n2iif30r] {
        transform: translateX(2px);
    }

/* Beside the fit card the lens takes the card's structure: each entry
   is a title row (label, chip) over its text, hairlines between. */
.os-act-grid.has-fit #os-lens-panel.os-panel[b-r9n2iif30r] {
    padding: 1.0625rem 1.5rem 1rem;
}

.os-act-grid.has-fit .os-lens-notes[b-r9n2iif30r] {
    grid-template-columns: 1fr;
    row-gap: 0.375rem;
}

    .os-act-grid.has-fit .os-lens-notes dt[b-r9n2iif30r] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.625rem;
        padding-top: 0.75rem;
        border-top: 1px solid color-mix(in srgb, #2c3e50 8%, transparent);
        font-family: var(--font);
        font-size: 0.875rem;
        font-weight: var(--font-weight-bold);
        letter-spacing: -0.01em;
        text-transform: none;
        color: #2c3e50;
    }

        .os-act-grid.has-fit .os-lens-notes dt:first-child[b-r9n2iif30r] {
            padding-top: 0;
            border-top: 0;
        }

        .os-act-grid.has-fit .os-lens-notes dt .os-fig[b-r9n2iif30r] {
            margin: 0;
        }

    .os-act-grid.has-fit .os-lens-notes dd[b-r9n2iif30r] {
        font-size: 0.875rem;
        line-height: 1.55;
        color: #5f6368;
        padding-bottom: 0.375rem;
    }

        .os-act-grid.has-fit .os-lens-notes dd:last-child[b-r9n2iif30r] {
            padding-bottom: 0;
        }

/* ── The verdict panel ──
   The reason as a framed note at the top of the card: the frame earns
   the attention the type size used to; the tier tints the surface,
   the hairline and the shadow, and a highlight along the top edge
   gives the panel a little glass. Meta in the footnote register. ── */
.os-verdict-block[b-r9n2iif30r] {
    padding: 1.25rem 1.5rem 0;
}

    .os-verdict-block .dim-band-head[b-r9n2iif30r] {
        margin-top: 0;
    }

.os-verdict[b-r9n2iif30r] {
    --tier: var(--ink-6, #9ca3af);
    position: relative;
    margin: 0;
    padding: 0.9375rem 1.25rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 7%, #ffffff), color-mix(in srgb, var(--tier) 3%, #ffffff));
    border: 1px solid color-mix(in srgb, var(--tier) 24%, rgba(15, 23, 42, 0.08));
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 14px -8px color-mix(in srgb, var(--tier) 18%, transparent);
    max-width: none;
}

    .os-verdict.tier-a[b-r9n2iif30r] {
        --tier: #15803d;
    }

    .os-verdict.tier-b[b-r9n2iif30r] {
        --tier: #4d7c0f;
    }

    .os-verdict.tier-c[b-r9n2iif30r] {
        --tier: #c2410c;
    }

    .os-verdict.tier-df[b-r9n2iif30r] {
        --tier: #b91c1c;
    }

.os-verdict-meta[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ink-5, #6b7280);
}

.os-fig-grade.dim-band-fig[b-r9n2iif30r] {
    font-size: 0.6875rem;
}

.os-verdict-sep[b-r9n2iif30r] {
    color: var(--ink-6, #9ca3af);
}

.os-verdict-conf[b-r9n2iif30r] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--ink-4, #4b5563);
}

/* Confidence as a three-step bar: one, two, three steps lit by tier. */
.os-conf-bar[b-r9n2iif30r] {
    display: inline-flex;
    gap: 2px;
}

    .os-conf-bar i[b-r9n2iif30r] {
        display: block;
        width: 0.5rem;
        height: 0.375rem;
        border-radius: 2px;
        background: color-mix(in srgb, #2c3e50 12%, transparent);
    }

.os-conf--low .os-conf-bar i:nth-child(1)[b-r9n2iif30r] {
    background: #dc2626;
}

.os-conf--medium .os-conf-bar i:nth-child(-n+2)[b-r9n2iif30r] {
    background: var(--warning, #b45309);
}

.os-conf--high .os-conf-bar i[b-r9n2iif30r] {
    background: var(--success, #16a34a);
}

.os-verdict-text[b-r9n2iif30r] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--ink-2, #1f2937);
    max-width: 60rem;
    text-wrap: pretty;
}

.os-verdict-foot[b-r9n2iif30r] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-5, #6b7280);
}

.os-verdict-driver[b-r9n2iif30r] {
    font-weight: 600;
    color: var(--ink-3, #374151);
}

/* Jumps and the invite: the driver into its card, the scale into the
   lens, the invite into the share door. Inherit the line's type and
   ink; the underline firms on hover. No link colour: the panel's tint
   is the only colour here. */
.os-verdict-jump[b-r9n2iif30r],
.os-verdict-foot .os-lede-link[b-r9n2iif30r] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
    text-underline-offset: 3px;
}

    .os-verdict-jump:hover[b-r9n2iif30r],
    .os-verdict-foot .os-lede-link:hover[b-r9n2iif30r] {
        color: var(--ink-1, #111827);
        text-decoration-color: currentColor;
    }

.os-verdict-invite[b-r9n2iif30r] {
    font-weight: 600;
    color: var(--ink-3, #374151);
}

    .os-verdict-invite i[b-r9n2iif30r] {
        font-size: 0.625rem;
        margin-left: 0.3125rem;
        transition: transform 0.18s ease;
    }

    .os-verdict-invite:hover i[b-r9n2iif30r] {
        transform: translateX(2px);
    }

.os-verdict-foot .os-verdict-sep[b-r9n2iif30r] {
    margin: 0 0.375rem;
}

.os-verdict-scale[b-r9n2iif30r] {
    color: var(--ink-4, #4b5563);
}

.dim-panel[b-r9n2iif30r] {
    scroll-margin-top: 5rem;
}

/* ── Responsive ladder: wide, medium, narrow; phone rules below ──
   Medium (≤1100): the triad stacks, padding tightens a step; the
   bands and the fit/lens row keep two columns. Narrow (≤960): bands
   and the row go to one column; the verdict meta drops the time, the
   fit head drops "Read under" and keeps the chip. */
@media (max-width: 1100px) {
    .intel-grid[b-r9n2iif30r] {
        grid-template-columns: 1fr;
    }

    .os-overview-grid[b-r9n2iif30r] {
        padding: 1rem 1.25rem 1.25rem;
    }

    .os-verdict-block[b-r9n2iif30r] {
        padding: 1rem 1.25rem 0;
    }

    .os-act-grid[b-r9n2iif30r] {
        padding: 0 1.25rem 1.25rem;
    }
}

@media (max-width: 960px) {
    .dim-panels[b-r9n2iif30r] {
        display: flex;
        flex-direction: column;
    }

    .dim-col[b-r9n2iif30r] {
        display: contents;
    }

    .os-act-grid.has-fit[b-r9n2iif30r] {
        grid-template-columns: 1fr;
    }

    .os-verdict-meta .os-verdict-sep:last-of-type[b-r9n2iif30r],
    .os-verdict-meta .os-lede-updated[b-r9n2iif30r] {
        display: none;
    }

    .os-fit-context-word[b-r9n2iif30r] {
        display: none;
    }
}

@media (max-width: 640px) {
    .os-verdict-block[b-r9n2iif30r] {
        padding: 1rem 1.25rem 0;
    }

    .os-verdict[b-r9n2iif30r] {
        padding: 0.875rem 1rem;
    }

    .os-verdict-text[b-r9n2iif30r] {
        font-size: 0.9375rem;
    }
}
/* /Components/ProdComponents/PersonaSpace.razor.rz.scp.css */
/* ============================================
   PERSONA VIEWER — v2 migrated
   var(--accent) → var(--accent) throughout.
   No var block changes needed (none present).
   Hardcoded monospace fonts preserved (data-viz).
   All fit/sentiment/provenance data-viz colors preserved.
   ============================================ */

/* ═══════════════════════════════
   ROOT
   ═══════════════════════════════ */
.pv-root[b-5rvrmrnbc6] {
    position: relative;
    font-family: var(--font-family-primary);
    color: var(--text-heading);
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .pv-root.entered[b-5rvrmrnbc6] {
        opacity: 1;
    }

.pv-inner[b-5rvrmrnbc6] {
    /* structural only — parent controls width */
}

.pv-root [b-5rvrmrnbc6]::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.pv-root [b-5rvrmrnbc6]::-webkit-scrollbar-track {
    background: var(--background-tertiary);
    border-radius: 3px;
}

.pv-root [b-5rvrmrnbc6]::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}


/* ═══════════════════════════════
   EMPTY STATE — No personas
   ═══════════════════════════════ */
.pv-empty[b-5rvrmrnbc6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 240px;
}

.pv-empty-icon[b-5rvrmrnbc6] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pv-empty-title[b-5rvrmrnbc6] {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.pv-empty-text[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    line-height: 1.6;
    max-width: 400px;
}


/* ═══════════════════════════════
   HEADER — Dark hero + common thread + avatar strip
   ═══════════════════════════════ */
.pv-header[b-5rvrmrnbc6] {
    padding: 0 0 0.75rem;
}

/* ─── Assumptions toggle + panel ─── */
.pv-assumptions-toggle[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-family-primary);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s;
}

    .pv-assumptions-toggle i[b-5rvrmrnbc6] {
        font-size: 0.4375rem;
    }

    .pv-assumptions-toggle:hover[b-5rvrmrnbc6] {
        color: var(--text-tertiary);
    }

.pv-assumptions-chevron[b-5rvrmrnbc6] {
    font-size: 0.375rem !important;
    opacity: 0.6;
}

/* ─── Assumptions panel ─── */
.pv-assumptions-panel[b-5rvrmrnbc6] {
    margin-top: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    animation: pvSlideDown-b-5rvrmrnbc6 0.2s ease-out;
}

@keyframes pvSlideDown-b-5rvrmrnbc6 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pv-assumptions-header[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.pv-assumptions-title[b-5rvrmrnbc6] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .pv-assumptions-title i[b-5rvrmrnbc6] {
        margin-right: 0.25rem;
        font-size: var(--text-2xs);
    }

.pv-assumptions-close[b-5rvrmrnbc6] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: var(--text-xs);
    padding: 0.125rem;
    transition: color 0.15s;
}

    .pv-assumptions-close:hover[b-5rvrmrnbc6] {
        color: var(--text-tertiary);
    }

.pv-assumptions-chain[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.pv-assumption-row[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}

.pv-assumption-label[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.pv-assumption-value[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    cursor: pointer;
    border-bottom: 1px dashed var(--border-strong);
    transition: border-color 0.15s, color 0.15s;
}

    .pv-assumption-value:hover[b-5rvrmrnbc6] {
        border-bottom-color: var(--accent);
        color: var(--accent);
    }

.pv-assumption-input[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    border: none;
    border-bottom: 1.5px solid var(--accent);
    background: transparent;
    outline: none;
    width: 5rem;
    padding: 0;
}

.pv-assumption-source[b-5rvrmrnbc6] {
    font-size: 0.4375rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--border-strong);
    white-space: nowrap;
}

.pv-assumption-op[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--border-strong);
    font-weight: var(--font-weight-semibold);
}

.pv-assumptions-result[b-5rvrmrnbc6] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 0.375rem;
}

    .pv-assumptions-result strong[b-5rvrmrnbc6] {
        font-family: 'SF Mono', ui-monospace, monospace;
        font-size: var(--text-md);
        color: var(--text-heading);
    }

.pv-assumptions-caveat[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    font-style: italic;
}

    .pv-assumptions-caveat i[b-5rvrmrnbc6] {
        margin-right: 0.1875rem;
        font-size: 0.5rem;
    }

/* ─── Narrative text — shared between strategy card and legacy positions ─── */
.pv-narrative-text[b-5rvrmrnbc6] {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.75;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    margin: 0;
}

.pv-name-link[b-5rvrmrnbc6] {
    font-weight: var(--font-weight-semibold);
    color: var(--name-color, var(--text-heading));
    cursor: default;
    padding-bottom: 1px;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    letter-spacing: -0.01em;
}

    .pv-name-link:hover[b-5rvrmrnbc6] {
        border-bottom-color: var(--name-color, var(--text-heading));
    }

/* ─── Avatar strip — always visible ─── */
.pv-avatar-strip[b-5rvrmrnbc6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pv-strip-persona[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .pv-strip-persona:hover[b-5rvrmrnbc6],
    .pv-strip-persona.highlighted[b-5rvrmrnbc6] {
        border-color: var(--strip-start, var(--border-color));
        box-shadow: 0 2px 12px color-mix(in srgb, var(--strip-start) 20%, transparent);
        transform: translateY(-1px);
    }

.pv-strip-avatar[b-5rvrmrnbc6] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--strip-start), var(--strip-end));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

    .pv-strip-avatar span[b-5rvrmrnbc6] {
        color: #fff;
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-bold);
        position: relative;
        z-index: 1;
    }

    .pv-strip-avatar img[b-5rvrmrnbc6] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .pv-strip-avatar img.loaded[b-5rvrmrnbc6] {
            opacity: 1;
        }

.pv-strip-info[b-5rvrmrnbc6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pv-strip-name[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-strip-role[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-strip-fit[b-5rvrmrnbc6] {
    font-size: 0.5rem;
    line-height: 1;
    color: var(--fit-color);
    flex-shrink: 0;
    margin-left: -0.125rem;
}


/* ═══════════════════════════════
   BODY
   ═══════════════════════════════ */
.pv-body[b-5rvrmrnbc6] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


/* ═══════════════════════════════
   CONTENT PANEL — visual container
   ═══════════════════════════════ */
.pv-content-panel[b-5rvrmrnbc6] {
    position: relative;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: visible;
    transition: border-color 0.15s ease;
}

@keyframes pvBusyScan-b-5rvrmrnbc6 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(350%);
    }
}

/* Busy text pulse */
.pv-busy-text[b-5rvrmrnbc6] {
    animation: pvBusyPulse-b-5rvrmrnbc6 2s ease-in-out infinite;
}

@keyframes pvBusyPulse-b-5rvrmrnbc6 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}


/* ═══════════════════════════════
   TOOLBAR (inside panel)
   ═══════════════════════════════ */
.pv-toolbar[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    background: var(--background-secondary);
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    transition: border-color 0.2s;
}

    .pv-toolbar.is-busy[b-5rvrmrnbc6] {
        border-top: 2px solid var(--accent);
        animation: pvToolbarBusyPulse-b-5rvrmrnbc6 2s ease-in-out infinite;
    }

@keyframes pvToolbarBusyPulse-b-5rvrmrnbc6 {
    0%, 100% {
        border-top-color: var(--accent);
    }

    50% {
        border-top-color: color-mix(in srgb, var(--accent) 50%, transparent);
    }
}

.pv-view-toggle[b-5rvrmrnbc6] {
    display: inline-flex;
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    padding: 0.1875rem;
    gap: 0.125rem;
}

.pv-view-btn[b-5rvrmrnbc6] {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    background: transparent;
    color: var(--text-tertiary);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

    .pv-view-btn.active[b-5rvrmrnbc6] {
        background: var(--text-heading);
        color: var(--background-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .pv-view-btn:not(.active):hover[b-5rvrmrnbc6] {
        background: var(--background-tertiary);
        color: var(--text-secondary);
    }

    .pv-view-btn i[b-5rvrmrnbc6] {
        font-size: var(--text-2xs);
    }

.pv-toolbar-right[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pv-action-btn[b-5rvrmrnbc6] {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    background: var(--background-primary);
    color: var(--text-tertiary);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .pv-action-btn:hover[b-5rvrmrnbc6] {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        border-color: color-mix(in srgb, var(--accent) 30%, transparent);
        color: var(--color-interactive);
    }

    .pv-action-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

/* ── Assess button disabled state ── */
.pv-assess-btn-toolbar:disabled[b-5rvrmrnbc6] {
    opacity: 0.4;
    cursor: default;
    border-color: var(--border-color);
    background: var(--background-secondary);
    color: var(--text-tertiary);
}

    .pv-assess-btn-toolbar:disabled:hover[b-5rvrmrnbc6] {
        background: var(--background-secondary);
        border-color: var(--border-color);
    }

/* ── Panel footer hint ── */
.pv-panel-footer-hint[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--text-tertiary) 70%, transparent);
    font-style: italic;
}

    .pv-panel-footer-hint i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-panel-footer-sep[b-5rvrmrnbc6] {
    color: var(--border-color);
    margin: 0 0.125rem;
}


/* ═══════════════════════════════
   VISUAL VIEW — Bubble avatars + Hover Card reveal
   ═══════════════════════════════ */
.pv-bubbles-row[b-5rvrmrnbc6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.5rem;
    padding: 1.25rem 1rem 2rem;
    overflow: visible;
}

.pv-bubble-wrapper[b-5rvrmrnbc6] {
    flex: 0 0 340px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.15s ease;
}

    .pv-bubble-wrapper:hover[b-5rvrmrnbc6] {
        z-index: 100;
    }

    .pv-bubble-wrapper.highlighted .pv-avatar-glow[b-5rvrmrnbc6] {
        opacity: 0.6;
        transform: scale(1.15);
    }

    .pv-bubble-wrapper.highlighted .pv-avatar-circle[b-5rvrmrnbc6] {
        transform: scale(1.06);
        transition: transform 0.2s ease;
    }

@keyframes bubbleEnter-b-5rvrmrnbc6 {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pv-bubble-container[b-5rvrmrnbc6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 0.75rem;
    opacity: 0;
    transform: translateY(24px) scale(0.92);
    animation: bubbleEnter-b-5rvrmrnbc6 0.55s var(--anim-delay, 140ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 20;
}

/* ─── Avatar ─── */
.pv-avatar-area[b-5rvrmrnbc6] {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 0.625rem;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.pv-bubble-wrapper:hover .pv-avatar-area[b-5rvrmrnbc6] {
    transform: scale(1.06);
}

.pv-avatar-glow[b-5rvrmrnbc6] {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 20deg, var(--grad-start), var(--grad-end), var(--grad-start), var(--grad-end), var(--grad-start));
    opacity: 0;
    transition: opacity 0.4s;
    filter: blur(4px);
}

.pv-bubble-wrapper:hover .pv-avatar-glow[b-5rvrmrnbc6] {
    opacity: 0.5;
}

.pv-avatar-circle[b-5rvrmrnbc6] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--grad-start), var(--grad-end));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--background-primary);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s ease;
}

.pv-bubble-wrapper:hover .pv-avatar-circle[b-5rvrmrnbc6] {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.pv-avatar-highlight[b-5rvrmrnbc6] {
    position: absolute;
    top: -25%;
    left: -15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.22), transparent 65%);
    pointer-events: none;
}

.pv-avatar-initials[b-5rvrmrnbc6] {
    color: #fff;
    font-weight: var(--font-weight-extrabold);
    font-size: 1.875rem;
    letter-spacing: -0.04em;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pv-avatar-img[b-5rvrmrnbc6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .pv-avatar-img.loaded[b-5rvrmrnbc6] {
        opacity: 1;
    }

.pv-avatar-check[b-5rvrmrnbc6] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22c55e;
    border: 3px solid var(--background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: #fff;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    z-index: 11;
}

/* ─── Bubble Identity (visible, hides on hover) ─── */
.pv-bubble-identity[b-5rvrmrnbc6] {
    text-align: center;
    max-width: 200px;
    padding: 0 0.25rem;
    transition: opacity 0.2s ease;
}

.pv-bubble-wrapper:hover .pv-bubble-identity[b-5rvrmrnbc6] {
    opacity: 0;
    pointer-events: none;
}

.pv-bubble-name[b-5rvrmrnbc6] {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.125rem;
}

.pv-bubble-role[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-bottom: 0.375rem;
}

.pv-bubble-moment[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--text-tertiary);
    font-style: italic;
    max-width: 220px;
}


/* ═══════════════════════════════
   HOVER CARD — reveals on wrapper hover
   ═══════════════════════════════ */
.pv-hover-card[b-5rvrmrnbc6] {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--background-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 5;
    overflow: hidden;
}

.pv-bubble-wrapper:hover .pv-hover-card[b-5rvrmrnbc6] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    border-color: var(--border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}

.pv-hc-gradient-space[b-5rvrmrnbc6] {
    height: 4rem;
}

.pv-hc-body[b-5rvrmrnbc6] {
    padding: 0.75rem 1rem 1rem;
}

.pv-hc-identity[b-5rvrmrnbc6] {
    margin-bottom: 0.5rem;
    text-align: center;
}

.pv-hc-name[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.pv-hc-role[b-5rvrmrnbc6] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-top: 0.125rem;
}

.pv-hc-context[b-5rvrmrnbc6] {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .pv-hc-context em[b-5rvrmrnbc6] {
        color: var(--text-tertiary);
    }

/* Competitive exposure */
.pv-hc-exposure[b-5rvrmrnbc6] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3125rem 0.4375rem;
    background: var(--background-secondary);
    border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-2xs);
    line-height: 1.4;
}

.pv-hc-exposure-label[b-5rvrmrnbc6] {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.5rem;
}

.pv-hc-exposure-tool[b-5rvrmrnbc6] {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.pv-hc-exposure-sentiment[b-5rvrmrnbc6] {
    font-size: 0.4375rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.0625rem 0.3125rem;
    border-radius: 1rem;
}

.pv-sentiment-frustrated[b-5rvrmrnbc6] {
    color: #dc2626;
    background: rgba(254, 202, 202, 0.3);
}

.pv-sentiment-dissatisfied[b-5rvrmrnbc6] {
    color: #ea580c;
    background: rgba(255, 237, 213, 0.4);
}

.pv-sentiment-searching[b-5rvrmrnbc6] {
    color: #2563eb;
    background: rgba(191, 219, 254, 0.3);
}

.pv-sentiment-resigned[b-5rvrmrnbc6] {
    color: var(--text-tertiary);
    background: rgba(229, 231, 235, 0.4);
}

.pv-sentiment-locked-in[b-5rvrmrnbc6] {
    color: #7c3aed;
    background: rgba(196, 181, 253, 0.2);
}

.pv-sentiment-underserved[b-5rvrmrnbc6] {
    color: #b45309;
    background: rgba(253, 230, 138, 0.3);
}

/* Market stats */
.pv-hc-market-row[b-5rvrmrnbc6] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pv-hc-market-stat[b-5rvrmrnbc6] {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.pv-hc-stat-label[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.0625rem;
    opacity: 0.7;
}

.pv-hc-stat-value[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

/* ─── Hover card data field blocks ─── */
.pv-hc-field-block[b-5rvrmrnbc6] {
    padding: 0.4375rem 0.625rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    border: 1px solid;
}

    .pv-hc-field-block p[b-5rvrmrnbc6] {
        margin: 0;
        font-size: var(--text-xs);
        line-height: 1.45;
        color: var(--text-tertiary);
    }

.pv-hc-field-label[b-5rvrmrnbc6] {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pv-hc-pain[b-5rvrmrnbc6] {
    background: var(--danger-surface);
    border-color: rgba(254, 202, 202, 0.31);
}

    .pv-hc-pain .pv-hc-field-label[b-5rvrmrnbc6] {
        color: #dc2626;
    }

.pv-hc-gain[b-5rvrmrnbc6] {
    background: var(--success-surface);
    border-color: rgba(167, 243, 208, 0.31);
}

    .pv-hc-gain .pv-hc-field-label[b-5rvrmrnbc6] {
        color: #22c55e;
    }

.pv-hc-trigger[b-5rvrmrnbc6] {
    background: var(--danger-surface);
    border-color: rgba(254, 202, 202, 0.2);
}

    .pv-hc-trigger .pv-hc-field-label[b-5rvrmrnbc6] {
        color: #b91c1c;
    }

.pv-hc-objection[b-5rvrmrnbc6] {
    background: #f5f3ff;
    border-color: rgba(196, 181, 253, 0.25);
}

    .pv-hc-objection .pv-hc-field-label[b-5rvrmrnbc6] {
        color: #7c3aed;
    }

.pv-hc-success[b-5rvrmrnbc6] {
    background: var(--info-surface);
    border-color: rgba(191, 219, 254, 0.4);
}

    .pv-hc-success .pv-hc-field-label[b-5rvrmrnbc6] {
        color: #2563eb;
    }

.pv-hc-field-pair[b-5rvrmrnbc6] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .pv-hc-field-pair > *[b-5rvrmrnbc6] {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    .pv-hc-field-pair > :only-child[b-5rvrmrnbc6] {
        flex: 1 1 100%;
    }

/* ─── Hover card verdict CTA button ─── */
.pv-hc-assess-btn[b-5rvrmrnbc6] {
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4375rem 0;
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    width: 100%;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

    .pv-hc-assess-btn:hover[b-5rvrmrnbc6] {
        transform: translateY(-1px);
    }

    .pv-hc-assess-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-hc-assessing[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
}

.pv-hc-spinner[b-5rvrmrnbc6] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    animation: pvSpin-b-5rvrmrnbc6 0.8s linear infinite;
}

@keyframes pvSpin-b-5rvrmrnbc6 {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Fit signal colours ─── */
.fit-strong[b-5rvrmrnbc6] {
    --fit-color: #22c55e;
}

.fit-moderate[b-5rvrmrnbc6] {
    --fit-color: #f59e0b;
}

.fit-weak[b-5rvrmrnbc6] {
    --fit-color: #f97316;
}

.fit-misaligned[b-5rvrmrnbc6] {
    --fit-color: #ef4444;
}

.pv-fit-signal[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    color: var(--fit-color);
}

.pv-fit-dot[b-5rvrmrnbc6] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fit-color);
}

/* ─── Provenance badges ─── */
.pv-provenance-badge[b-5rvrmrnbc6] {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    letter-spacing: 0.02em;
}

.pv-provenance-aisimulated[b-5rvrmrnbc6] {
    color: var(--text-tertiary);
    background: var(--background-tertiary);
    font-style: italic;
}

.pv-provenance-userinsight[b-5rvrmrnbc6] {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.pv-provenance-researchbacked[b-5rvrmrnbc6] {
    color: #15803d;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ─── Avatar check — fit-coloured ─── */
.pv-avatar-check[b-5rvrmrnbc6] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fit-color, #22c55e);
    border: 3px solid var(--background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    color: #fff;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 11;
    line-height: 1;
}

/* ─── Hover card verdict area ─── */
.pv-hc-verdict-area[b-5rvrmrnbc6] {
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

.pv-hc-verdict-cta[b-5rvrmrnbc6] {
    text-align: center;
}

.pv-hc-verdict-cta-label[b-5rvrmrnbc6] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    margin-bottom: 0.375rem;
}

.pv-hc-provenance[b-5rvrmrnbc6] {
    font-size: 0.5rem;
    color: color-mix(in srgb, var(--text-tertiary) 70%, transparent);
    font-style: italic;
    margin-top: 0.375rem;
}

.pv-hc-verdict-result[b-5rvrmrnbc6] {
    /* result container */
}

.pv-hc-verdict-header[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.pv-hc-verdict-rationale[b-5rvrmrnbc6] {
    margin: 0 0 0.375rem;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
}

.pv-hc-verdict-hesitation[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    line-height: 1.45;
    color: var(--text-tertiary);
    padding: 0.3125rem 0.4375rem;
    background: var(--background-primary);
    border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.pv-hc-hesitation-label[b-5rvrmrnbc6] {
    font-weight: var(--font-weight-bold);
    font-style: normal;
    color: var(--text-tertiary);
    margin-right: 0.25rem;
}

/* ─── Micro-bars ─── */
.pv-hc-micro-bars[b-5rvrmrnbc6] {
    display: flex;
    gap: 0.5rem;
}

.pv-micro-bar[b-5rvrmrnbc6] {
    flex: 1;
    min-width: 0;
}

.pv-micro-bar-label[b-5rvrmrnbc6] {
    font-size: 0.4375rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.1875rem;
}

.pv-micro-bar-track[b-5rvrmrnbc6] {
    height: 4px;
    background: var(--background-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.pv-micro-bar-fill[b-5rvrmrnbc6] {
    height: 100%;
    border-radius: 2px;
    background: var(--fit-color);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Empty field state (shared) ── */
.pv-field-empty[b-5rvrmrnbc6] {
    color: var(--border-strong);
    font-style: italic;
}


/* ═══════════════════════════════
   PRODUCT ROLE TAG
   ═══════════════════════════════ */
.pv-role-tag[b-5rvrmrnbc6] {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.0625rem 0.4375rem;
    border-radius: 1rem;
    font-size: 0.4375rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    white-space: nowrap;
    z-index: 12;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--background-primary);
    line-height: 1.4;
}

.pv-th-product-role[b-5rvrmrnbc6] {
    display: inline-block;
    margin-top: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.5rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
    line-height: 1.4;
}


/* ═══════════════════════════════
   SIGNAL FLAGS — Consensus & Tension
   ═══════════════════════════════ */
.pv-signal-flag[b-5rvrmrnbc6] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: 1.5;
}

.pv-signal-icon[b-5rvrmrnbc6] {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: 1.7;
    opacity: 0.7;
}

.pv-signal-text[b-5rvrmrnbc6] {
    flex: 1;
    min-width: 0;
}

.pv-signal-consensus[b-5rvrmrnbc6] {
    background: var(--info-surface);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #1e40af;
}

.pv-signal-tension[b-5rvrmrnbc6] {
    background: #fefce8;
    border: 1px solid rgba(253, 224, 71, 0.35);
    color: #854d0e;
}


/* ═══════════════════════════════
   TOOLBAR — Integrated controls
   ═══════════════════════════════ */
.pv-toolbar-left[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.pv-toolbar-busy[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
}

.pv-toolbar-busy-dot[b-5rvrmrnbc6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: pvThinkingPulse-b-5rvrmrnbc6 1s ease-in-out infinite;
}

.pv-assess-btn-toolbar[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    color: var(--accent);
    font-family: var(--font-family-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .pv-assess-btn-toolbar:hover[b-5rvrmrnbc6] {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border-color: var(--accent);
    }

    .pv-assess-btn-toolbar i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-toolbar-assessing[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
}

/* ═══════════════════════════════
   INLINE STATUS — Signals below toolbar
   ═══════════════════════════════ */
.pv-inline-status[b-5rvrmrnbc6] {
    padding: 0.5rem 1rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pv-fit-dot-inline[b-5rvrmrnbc6] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fit-color);
}

@keyframes pvThinkingPulse-b-5rvrmrnbc6 {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.pv-verdict-thinking-dot[b-5rvrmrnbc6] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: pvThinkingPulse-b-5rvrmrnbc6 1s ease-in-out infinite;
}

.pv-verdict-waiting-dot[b-5rvrmrnbc6] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-color);
}


/* ═══════════════════════════════
   TABLE VIEW
   ═══════════════════════════════ */
.pv-table-wrap[b-5rvrmrnbc6] {
    position: relative;
    overflow: hidden;
}

.pv-scroll-fade[b-5rvrmrnbc6] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

    .pv-scroll-fade.visible[b-5rvrmrnbc6] {
        opacity: 1;
    }

    .pv-scroll-fade.left[b-5rvrmrnbc6] {
        left: 0;
        width: 40px;
        background: linear-gradient(90deg, var(--background-primary), transparent);
    }

    .pv-scroll-fade.right[b-5rvrmrnbc6] {
        right: 0;
        width: 56px;
        background: linear-gradient(270deg, var(--background-primary) 8%, transparent);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 0.5rem;
    }

.pv-scroll-left-arrow[b-5rvrmrnbc6] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    z-index: 6;
}

.pv-scroll-arrow-btn[b-5rvrmrnbc6] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .pv-scroll-arrow-btn:hover[b-5rvrmrnbc6] {
        background: var(--background-secondary);
        border-color: var(--border-strong);
    }

    .pv-scroll-arrow-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
        color: var(--text-tertiary);
    }

.pv-table-scroll[b-5rvrmrnbc6] {
    overflow-x: auto;
}

.pv-table[b-5rvrmrnbc6] {
    border-collapse: collapse;
    min-width: calc(120px + 6 * 170px);
    width: 100%;
}

.pv-thead-row[b-5rvrmrnbc6] {
    border-bottom: 2px solid var(--border-color);
}

.pv-th-label[b-5rvrmrnbc6] {
    padding: 0.75rem 0.625rem 0.75rem 0.875rem;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--background-secondary);
    min-width: 110px;
    width: 120px;
    border-right: 1px solid var(--border-color);
}

.pv-th-persona[b-5rvrmrnbc6] {
    padding: 0.75rem 0.875rem;
    text-align: center;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    background: var(--background-secondary);
    transition: background 0.15s;
    min-width: 170px;
    vertical-align: middle;
}

    .pv-th-persona.hovered[b-5rvrmrnbc6] {
        background: color-mix(in srgb, var(--col-grad-start) 6%, var(--background-secondary));
    }

.pv-th-col-content[b-5rvrmrnbc6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
}

.pv-th-avatar[b-5rvrmrnbc6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .pv-th-avatar span[b-5rvrmrnbc6] {
        color: #fff;
        font-weight: var(--font-weight-bold);
        font-size: var(--text-sm);
    }

    .pv-th-avatar .pv-avatar-img[b-5rvrmrnbc6] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .pv-th-avatar .pv-avatar-img.loaded[b-5rvrmrnbc6] {
            opacity: 1;
        }

.pv-th-name[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
    line-height: 1.2;
}

.pv-th-role[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.pv-th-editable[b-5rvrmrnbc6] {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
    display: inline-block;
}

    .pv-th-editable:hover[b-5rvrmrnbc6] {
        border-bottom-color: var(--border-strong);
    }

.pv-th-edit-input[b-5rvrmrnbc6] {
    width: 100%;
    border: none;
    outline: none;
    background: var(--background-primary);
    border-radius: 0.25rem;
    padding: 0.25rem 0.375rem;
    font-family: var(--font-family-primary);
    text-align: center;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--col-grad-start) 40%, transparent);
}

    .pv-th-edit-input.edit-name[b-5rvrmrnbc6] {
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        color: var(--text-heading);
    }

    .pv-th-edit-input.edit-role[b-5rvrmrnbc6] {
        font-size: 0.6875rem;
        font-weight: var(--font-weight-semibold);
    }

/* Section dividers */
.pv-td-section-wrap[b-5rvrmrnbc6] {
    padding: 0;
    border: none;
}

.pv-section-divider-row[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 0.75rem 0.375rem;
}

.pv-section-line[b-5rvrmrnbc6] {
    height: 1px;
    flex: 1;
    border-radius: 1px;
}

.pv-section-text[b-5rvrmrnbc6] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    flex-shrink: 0;
}

    .pv-section-text i[b-5rvrmrnbc6] {
        font-size: var(--text-2xs);
        margin-right: 0.1875rem;
    }

/* Data rows */
.pv-data-row[b-5rvrmrnbc6] {
    background: var(--background-primary);
    transition: background 0.12s;
}

    .pv-data-row:hover[b-5rvrmrnbc6] {
        background: var(--background-secondary);
    }

        .pv-data-row:hover .pv-td-label[b-5rvrmrnbc6] {
            background: var(--background-tertiary);
        }

.pv-td-label[b-5rvrmrnbc6] {
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--background-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    border-right: 1px solid var(--border-color);
    vertical-align: top;
    transition: background 0.12s;
}

.pv-td-label-content[b-5rvrmrnbc6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
}

.pv-td-row-icon[b-5rvrmrnbc6] {
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    line-height: 1;
}

    .pv-td-row-icon i[b-5rvrmrnbc6] {
        font-size: inherit;
    }

.pv-td-row-text[b-5rvrmrnbc6] {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.pv-td-cell[b-5rvrmrnbc6] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    vertical-align: top;
    background: transparent;
    transition: background 0.15s;
}

    .pv-td-cell.hovered[b-5rvrmrnbc6] {
        background: color-mix(in srgb, var(--col-grad-start) 4%, var(--background-primary));
    }

.pv-data-row:hover .pv-td-cell.hovered[b-5rvrmrnbc6] {
    background: color-mix(in srgb, var(--col-grad-start) 8%, var(--background-tertiary));
}

.pv-cell-wrap[b-5rvrmrnbc6] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.pv-cell-provenance[b-5rvrmrnbc6] {
    flex-shrink: 0;
    font-size: 0.4375rem;
    color: #3b82f6;
    line-height: 1.5;
    margin-top: 0.125rem;
}

.pv-cell-text[b-5rvrmrnbc6] {
    margin: 0;
    cursor: default;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: var(--font-weight-regular);
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    flex: 1;
    min-width: 0;
}

.pv-cell-editable[b-5rvrmrnbc6] {
    cursor: text;
}

    .pv-cell-editable:hover[b-5rvrmrnbc6] {
        border-bottom-color: var(--border-strong);
        background: color-mix(in srgb, var(--accent) 3%, transparent);
    }

.pv-cell-empty[b-5rvrmrnbc6] {
    color: var(--border-strong);
    font-style: italic;
    border-bottom: none;
}

.pv-edit-textarea[b-5rvrmrnbc6] {
    width: 100%;
    resize: none;
    overflow: hidden;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    background: transparent;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
    border-bottom: 1.5px solid var(--accent);
    border-radius: 0;
}

/* ─── Edit mode toolbar buttons ─── */
.pv-edit-mode-btn[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .pv-edit-mode-btn:hover[b-5rvrmrnbc6] {
        border-color: var(--accent);
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 4%, transparent);
    }

    .pv-edit-mode-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-edit-save-btn[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

    .pv-edit-save-btn:hover[b-5rvrmrnbc6] {
        background: var(--color-interactive);
    }

    .pv-edit-save-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-edit-cancel-btn[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .pv-edit-cancel-btn:hover[b-5rvrmrnbc6] {
        border-color: #ef4444;
        color: #ef4444;
    }

    .pv-edit-cancel-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

.pv-edit-undo-btn[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .pv-edit-undo-btn:hover:not(:disabled)[b-5rvrmrnbc6] {
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .pv-edit-undo-btn:disabled[b-5rvrmrnbc6] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .pv-edit-undo-btn i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

/* ═══════════════════════════════
   INSIGHTS CARD
   ═══════════════════════════════ */
/* ═══════════════════════════════
   STRATEGY ROW — Narrative + Synthesis (60/40)
   ═══════════════════════════════ */
.pv-strategy-row[b-5rvrmrnbc6] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.5rem;
}

/* ─── Shared card base ─── */
.pv-strategy-card[b-5rvrmrnbc6] {
    background: var(--background-secondary);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.375rem 1.375rem;
    min-height: 0;
    overflow: hidden;
    transition: background 0.15s;
}

    .pv-strategy-card:hover[b-5rvrmrnbc6] {
        background: var(--background-tertiary);
    }

.pv-strategy-card-header[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.pv-strategy-card-icon[b-5rvrmrnbc6] {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.3125rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pv-strategy-card-icon i[b-5rvrmrnbc6] {
        font-size: var(--text-2xs);
        color: var(--text-tertiary);
    }

.pv-strategy-card-title[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.pv-strategy-card-empty[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    font-style: italic;
    margin: 0;
}

/* ─── Narrative Card — 60% ─── */
.pv-narrative-card[b-5rvrmrnbc6] {
    flex: 3;
    min-width: 0;
}

    .pv-narrative-card .pv-narrative-text[b-5rvrmrnbc6] {
        font-size: var(--text-md);
        line-height: 1.7;
    }

/* ─── Synthesis Card — 40% ─── */
.pv-synthesis-card[b-5rvrmrnbc6] {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pv-synthesis-body[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
    flex: 1;
}

    .pv-synthesis-body p[b-5rvrmrnbc6] {
        margin: 0 0 0.5rem;
    }

        .pv-synthesis-body p:last-child[b-5rvrmrnbc6] {
            margin-bottom: 0;
        }

.pv-synthesis-stats[b-5rvrmrnbc6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--background-tertiary);
}

.pv-synthesis-stat[b-5rvrmrnbc6] {
    flex: 1 1 auto;
    min-width: 90px;
    padding: 0.4375rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

    .pv-synthesis-stat.stat-amber[b-5rvrmrnbc6] {
        background: var(--warning-surface);
        border-color: rgba(253, 230, 138, 0.3);
    }

    .pv-synthesis-stat.stat-green[b-5rvrmrnbc6] {
        background: var(--success-surface);
        border-color: rgba(167, 243, 208, 0.25);
    }

.pv-synthesis-stat-num[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.stat-amber .pv-synthesis-stat-num[b-5rvrmrnbc6] {
    color: #f59e0b;
}

.stat-green .pv-synthesis-stat-num[b-5rvrmrnbc6] {
    color: #22c55e;
}

.pv-synthesis-stat-label[b-5rvrmrnbc6] {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
}


/* ═══════════════════════════════
   INLINE FOOTNOTES
   ═══════════════════════════════ */
.pv-footnotes[b-5rvrmrnbc6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 1.25rem;
    padding: 1.125rem 1.5rem 1.375rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.pv-footnotes-label[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-right: 0.375rem;
}

.pv-footnote[b-5rvrmrnbc6] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.pv-fn-num[b-5rvrmrnbc6] {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-tertiary);
}

.pv-fn-text[b-5rvrmrnbc6] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.5;
}

.pv-fn-link[b-5rvrmrnbc6] {
    font-size: 0.6875rem;
    color: var(--accent);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.15s;
}

    .pv-fn-link:hover[b-5rvrmrnbc6] {
        opacity: 1;
    }


/* ═══════════════════════════════
   INPUT BAR — Collapsed prompt → Expanded input
   ═══════════════════════════════ */

/* ── Collapsed prompt ── */
.pv-input-prompt[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: 0.375rem;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: color-mix(in srgb, var(--text-tertiary) 70%, transparent);
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pv-input-prompt i[b-5rvrmrnbc6] {
        font-size: var(--text-2xs);
    }

    .pv-input-prompt:hover[b-5rvrmrnbc6] {
        border-color: var(--border-strong);
        color: var(--text-tertiary);
        background: var(--background-secondary);
    }

/* ── Expanded input ── */
.pv-input-bar[b-5rvrmrnbc6] {
    margin-top: 0.375rem;
    animation: pvSlideDown-b-5rvrmrnbc6 0.2s ease-out;
}

.pv-input-bar-inner[b-5rvrmrnbc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 540px;
    margin: 0 auto;
    padding: 0.375rem 0.375rem 0.375rem 0.75rem;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .pv-input-bar-inner:focus-within[b-5rvrmrnbc6] {
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 6%, transparent);
    }

.pv-input-label[b-5rvrmrnbc6] {
    font-size: 0.4375rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--border-strong);
    flex-shrink: 0;
    transition: color 0.15s;
}

.pv-input-bar-inner:focus-within .pv-input-label[b-5rvrmrnbc6] {
    color: var(--accent);
}

.pv-input-field[b-5rvrmrnbc6] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family-primary);
    font-size: var(--text-sm);
    color: var(--text-heading);
    min-width: 0;
}

    .pv-input-field[b-5rvrmrnbc6]::placeholder {
        color: var(--border-strong);
        font-style: italic;
        font-size: 0.6875rem;
    }

.pv-input-submit[b-5rvrmrnbc6] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .pv-input-submit:hover:not(:disabled)[b-5rvrmrnbc6] {
        background: var(--color-interactive);
        transform: scale(1.05);
    }

    .pv-input-submit:disabled[b-5rvrmrnbc6] {
        background: var(--background-tertiary);
        color: var(--border-strong);
        cursor: default;
    }

    .pv-input-submit i[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }


/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 768px) {

    .pv-narrative-card .pv-narrative-text[b-5rvrmrnbc6] {
        font-size: var(--text-base);
        line-height: 1.65;
    }

    .pv-strategy-row[b-5rvrmrnbc6] {
        flex-direction: column;
    }

    .pv-avatar-strip[b-5rvrmrnbc6] {
        gap: 0.375rem;
    }

    .pv-strip-persona[b-5rvrmrnbc6] {
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    }

    .pv-strip-avatar[b-5rvrmrnbc6] {
        width: 22px;
        height: 22px;
    }

        .pv-strip-avatar span[b-5rvrmrnbc6] {
            font-size: 0.5rem;
        }

    .pv-strip-name[b-5rvrmrnbc6] {
        font-size: var(--text-xs);
    }

    .pv-strip-role[b-5rvrmrnbc6] {
        font-size: 0.5rem;
    }

    .pv-bubbles-row[b-5rvrmrnbc6] {
        gap: 0.5rem;
    }

    .pv-bubble-wrapper[b-5rvrmrnbc6] {
        flex: 0 0 260px;
    }

    .pv-toolbar[b-5rvrmrnbc6] {
        flex-wrap: wrap;
    }

    .pv-content-panel[b-5rvrmrnbc6] {
        border-radius: var(--radius-md);
    }
}

@media (max-width: 640px) {
    .pv-bubbles-row[b-5rvrmrnbc6] {
        gap: 0.75rem 0.5rem;
    }

    .pv-bubble-wrapper[b-5rvrmrnbc6] {
        flex: 0 0 260px;
    }
}

@media (max-width: 580px) {
    .pv-bubbles-row[b-5rvrmrnbc6] {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .pv-bubble-wrapper[b-5rvrmrnbc6] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 380px;
    }
}

@media (max-width: 480px) {

    .pv-narrative-card .pv-narrative-text[b-5rvrmrnbc6] {
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .pv-avatar-strip[b-5rvrmrnbc6] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .pv-strip-persona[b-5rvrmrnbc6] {
        max-width: 240px;
    }

    .pv-bubbles-row[b-5rvrmrnbc6] {
        padding: 1rem 0.5rem 1.5rem;
    }

    .pv-avatar-area[b-5rvrmrnbc6] {
        width: 80px;
        height: 80px;
    }

    .pv-avatar-circle[b-5rvrmrnbc6] {
        width: 80px;
        height: 80px;
    }

    .pv-avatar-initials[b-5rvrmrnbc6] {
        font-size: 1.5rem;
    }

    .pv-empty[b-5rvrmrnbc6] {
        padding: 3rem 1.5rem;
    }

    .pv-synthesis-stats[b-5rvrmrnbc6] {
        flex-direction: column;
    }

    .pv-synthesis-stat[b-5rvrmrnbc6] {
        max-width: 100%;
    }

    .pv-input-bar-inner[b-5rvrmrnbc6] {
        padding: 0.375rem 0.625rem;
    }

    .pv-input-field[b-5rvrmrnbc6] {
        font-size: var(--text-sm);
    }

    .pv-footnotes[b-5rvrmrnbc6] {
        flex-direction: column;
        gap: 0.375rem;
        padding: 1rem 1.125rem 1.125rem;
    }
}


/* ═══════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pv-bubble-container[b-5rvrmrnbc6] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .pv-hover-card[b-5rvrmrnbc6] {
        transition: none;
    }

    .pv-avatar-area[b-5rvrmrnbc6],
    .pv-avatar-glow[b-5rvrmrnbc6],
    .pv-avatar-circle[b-5rvrmrnbc6] {
        transition: none;
    }

    .pv-busy-text[b-5rvrmrnbc6] {
        animation: none;
        opacity: 0.6;
    }

    .pv-toolbar.is-busy[b-5rvrmrnbc6] {
        animation: none;
        border-top-color: var(--accent);
    }

    .pv-hc-spinner[b-5rvrmrnbc6] {
        animation: none;
    }

    .pv-root[b-5rvrmrnbc6],
    .pv-content-panel[b-5rvrmrnbc6],
    .pv-strip-persona[b-5rvrmrnbc6],
    .pv-view-btn[b-5rvrmrnbc6],
    .pv-action-btn[b-5rvrmrnbc6],
    .pv-hc-assess-btn[b-5rvrmrnbc6],
    .pv-scroll-arrow-btn[b-5rvrmrnbc6],
    .pv-input-bar-inner[b-5rvrmrnbc6],
    .pv-input-submit[b-5rvrmrnbc6] {
        transition: none;
    }
}
/* /Components/ProdComponents/PortfolioCanvas.razor.rz.scp.css */
/* ============================================================
   PORTFOLIO CANVAS

   Three-column resizable layout that fills the area below the
   workspace shell:
     1. Left rail   - portfolio identity + meta (resizable)
     2. Splitter    - 6px drag handle (cursor: col-resize)
     3. Main        - grade-banded card sections

   Visual language echoes BrainstormingCanvas (gradient rail,
   sticky-note cards, 1px section rules) so the two surfaces
   feel like one workspace. Read-only by design: no cockpit,
   no per-card action row, no scoring controls.

   Grade rendering uses the canonical .mini-grade markup
   (matches AinnaSmartToolbar). Band classes are app-wide:
   .grade-great / .grade-good / .grade-moderate / .grade-poor /
   .grade-empty - driven by --score-* tokens in app.css.

   The .mini-grade ring rules are duplicated below because
   Blazor scoping isolates them per component. Tokens remain
   global, so colors stay in sync with the rest of the app.

   Namespace: pc-* (portfolio canvas)
   ============================================================ */

.portfolio-surface[b-bpp81z4tkx] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    background: var(--ws-bg, #f8fafc);
    position: relative;
}

.portfolio-grid[b-bpp81z4tkx] {
    flex: 1;
    display: grid;
    grid-template-columns: var(--pc-left-rail-w, 360px) /* left rail */
    6px /* splitter */
    minmax(0, 1fr) /* main feed */
    360px; /* right rail (timeline) */
    min-height: 0;
    min-width: 0;
    transition: grid-template-columns 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pc-resize-overlay[b-bpp81z4tkx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: col-resize;
    background: transparent;
}

/* ============================================================
   LEFT RAIL
   ============================================================ */

.portfolio-rail-left[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, #eef2f7 0%, #dde4ec 100%);
    border-right: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    position: relative;
}

.pc-rail-content[b-bpp81z4tkx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .pc-rail-content[b-bpp81z4tkx]::-webkit-scrollbar {
        width: 8px;
    }

    .pc-rail-content[b-bpp81z4tkx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-rail-content[b-bpp81z4tkx]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.14);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .pc-rail-content[b-bpp81z4tkx]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.24);
            background-clip: padding-box;
            border: 2px solid transparent;
        }

.pc-rail-codename[b-bpp81z4tkx] {
    align-self: flex-start;
    padding: 5px 11px 4px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-3, #475569);
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    line-height: 1;
    margin-bottom: -2px;
}

.pc-rail-title[b-bpp81z4tkx] {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--ws-ink-1, #0f172a);
    word-break: break-word;
}

.pc-rail-tagline[b-bpp81z4tkx] {
    margin-top: -4px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ws-ink-3, #475569);
    letter-spacing: -0.005em;
}

.pc-rail-summary[b-bpp81z4tkx] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ws-ink-3, #475569);
    white-space: pre-wrap;
}

/* ── Stats row ── */
.pc-rail-stats[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 4px;
    color: var(--ws-ink-4, #64748b);
    font-size: 11.5px;
}

.pc-rail-stat[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

    .pc-rail-stat i[b-bpp81z4tkx] {
        font-size: 10px;
        color: var(--ws-ink-5, #94a3b8);
    }

    .pc-rail-stat strong[b-bpp81z4tkx] {
        font-weight: 600;
        color: var(--ws-ink-2, #334155);
    }

.pc-rail-stat-dot[b-bpp81z4tkx] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
}

/* ── Read-only notice (curated-view) ── */
.pc-rail-readonly[b-bpp81z4tkx] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px dashed rgba(15, 23, 42, 0.14);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ws-ink-4, #64748b);
}

    .pc-rail-readonly i[b-bpp81z4tkx] {
        font-size: 10px;
        color: var(--ws-ink-5, #94a3b8);
        flex: 0 0 auto;
    }

/* ── Rail skeleton ── */

.pc-rail-skeleton[b-bpp81z4tkx] {
    padding: 30px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@keyframes pc-skel-pulse-b-bpp81z4tkx {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.pc-rail-skel-pill[b-bpp81z4tkx] {
    width: 88px;
    height: 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-rail-skel-title[b-bpp81z4tkx] {
    width: 80%;
    height: 28px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.10);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-rail-skel-line[b-bpp81z4tkx] {
    width: 100%;
    height: 11px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.06);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-rail-skel-line-short[b-bpp81z4tkx] {
    width: 60%;
}

/* ============================================================
   PORTFOLIO RAIL - new sections

   Identity header, themes, people (owner / sponsors /
   reviewers), governance + timeline meta grids. Slots
   above the existing distribution / sources / verdict
   progress / readonly notice blocks so the rail reads
   top-to-bottom: who · what · who runs it · how it is
   governed · what is in it · your review state.
   ============================================================ */

/* ── Identity header ── */

.pc-rail-id[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-rail-id-meta[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Type tag - small uppercase pill next to codename.
   Standing portfolios get a quiet slate look; Campaign
   portfolios pick up the pink accent to read as
   "time-bounded, has a horizon." */

.pc-rail-type-tag[b-bpp81z4tkx] {
    padding: 2px 8px 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 3px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.04);
    color: var(--ws-ink-3, #475569);
}

.pc-rail-type-tag-campaign[b-bpp81z4tkx] {
    background: rgba(243, 26, 125, 0.08);
    border-color: rgba(243, 26, 125, 0.22);
    color: #c40858;
}

.pc-rail-type-tag-standing[b-bpp81z4tkx] {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.18);
    color: #15803d;
}

.pc-rail-description[b-bpp81z4tkx] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ws-ink-2, #334155);
}

/* Status dot + label. Dot tinted per state; label small. */

.pc-rail-status[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ws-ink-3, #475569);
    letter-spacing: 0.01em;
}

.pc-rail-status-dot[b-bpp81z4tkx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ws-ink-5, #94a3b8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

    .pc-rail-status-dot.status-active[b-bpp81z4tkx] {
        background: #16a34a;
        box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
    }

    .pc-rail-status-dot.status-draft[b-bpp81z4tkx] {
        background: #94a3b8;
    }

    .pc-rail-status-dot.status-paused[b-bpp81z4tkx] {
        background: #d97706;
        box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18);
    }

    .pc-rail-status-dot.status-archived[b-bpp81z4tkx] {
        background: #64748b;
    }

.pc-rail-status-label[b-bpp81z4tkx] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
    font-weight: 600;
}

/* ── Themes chip row ── */

.pc-rail-themes[b-bpp81z4tkx] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: -2px;
}

.pc-rail-theme-chip[b-bpp81z4tkx] {
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    letter-spacing: 0.01em;
}

/* ── Section block (shared) ── */

.pc-rail-section[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pc-rail-section-label[b-bpp81z4tkx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-3, #475569);
}

.pc-rail-section-count[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ws-ink-4, #64748b);
    letter-spacing: 0;
}

/* ── Person row ── */

.pc-rail-person-list[b-bpp81z4tkx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pc-rail-person[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.pc-rail-person-avatar[b-bpp81z4tkx] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 1px rgba(15, 23, 42, 0.10);
}

/* Owner gets a slightly larger, darker avatar - intentional
   visual weight. The portfolio lead is the named recipient of
   justifications; the rail should reflect that. */
.pc-rail-person-avatar-owner[b-bpp81z4tkx] {
    width: 34px;
    height: 34px;
    font-size: 12px;
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 23, 42, 0.18);
}

.pc-rail-person-detail[b-bpp81z4tkx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 1px;
}

.pc-rail-person-name[b-bpp81z4tkx] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ws-ink-1, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-rail-person-role[b-bpp81z4tkx] {
    font-size: 11px;
    font-style: italic;
    color: var(--ws-ink-4, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Reviewer avatars (compact row) ── */

/* ── Meta grid (Governance + Timeline blocks) ── */

/* ── Related products + initiatives ──
   Split into two subsections (Products + Initiatives)
   so the kind is legible. Items rendered as quiet list
   rows with a small icon. */

/* ============================================================
   SPLITTER
   ============================================================ */

.pc-splitter[b-bpp81z4tkx] {
    position: relative;
    width: 6px;
    background: transparent;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
}

    .pc-splitter[b-bpp81z4tkx]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--border-color, #e2e8f0);
        transition: background-color 0.15s ease;
    }

    .pc-splitter:hover[b-bpp81z4tkx] {
        background: rgba(99, 102, 241, 0.06);
    }

        .pc-splitter:hover[b-bpp81z4tkx]::before {
            background: rgba(99, 102, 241, 0.45);
        }

    .pc-splitter.is-active[b-bpp81z4tkx] {
        background: rgba(99, 102, 241, 0.10);
    }

        .pc-splitter.is-active[b-bpp81z4tkx]::before {
            background: #6366f1;
        }

.pc-splitter-grip[b-bpp81z4tkx] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.10);
    transition: background-color 0.15s ease, height 0.15s ease;
}

.pc-splitter:hover .pc-splitter-grip[b-bpp81z4tkx] {
    background: rgba(99, 102, 241, 0.55);
    height: 40px;
}

.pc-splitter.is-active .pc-splitter-grip[b-bpp81z4tkx] {
    background: #6366f1;
    height: 44px;
}

/* ============================================================
   MAIN COLUMN
   ============================================================ */

.portfolio-main[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ws-bg-1, #ffffff);
    position: relative;
    overflow: hidden;
}

    .portfolio-main > .pc-state-empty[b-bpp81z4tkx],
    .portfolio-main > .pc-skeleton-main[b-bpp81z4tkx] {
        flex: 1;
        min-height: 0;
    }

/* ============================================================
   GRADES SCROLL CONTAINER
   ============================================================ */

.pc-grades[b-bpp81z4tkx] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    .pc-grades[b-bpp81z4tkx]::-webkit-scrollbar {
        width: 10px;
    }

    .pc-grades[b-bpp81z4tkx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-grades[b-bpp81z4tkx]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.10);
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .pc-grades[b-bpp81z4tkx]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.20);
            background-clip: padding-box;
            border: 2px solid transparent;
        }

/* ============================================================
   GRADE SECTIONS

   Tinted background wash per band class. Header eyebrow color
   also picks up the band so each section reads as A / B / C /
   D-F / awaiting at a glance.
   ============================================================ */

.pc-grade[b-bpp81z4tkx] {
    padding: 0 24px 28px;
    flex-shrink: 0;
}

    .pc-grade:last-child[b-bpp81z4tkx] {
        flex: 1 0 auto;
        padding-bottom: 64px;
    }

    /* Section background washes - keyed off band class */
    .pc-grade.grade-great[b-bpp81z4tkx] {
        background: linear-gradient(180deg, rgba(22, 163, 74, 0.055) 0%, rgba(22, 163, 74, 0.025) 100%);
    }

    .pc-grade.grade-good[b-bpp81z4tkx] {
        background: var(--ws-bg-soft, #f8fafc);
    }

    .pc-grade.grade-moderate[b-bpp81z4tkx] {
        background: linear-gradient(180deg, rgba(217, 119, 6, 0.05) 0%, rgba(217, 119, 6, 0.02) 100%);
    }

    .pc-grade.grade-poor[b-bpp81z4tkx] {
        background: linear-gradient(180deg, rgba(148, 163, 184, 0.07) 0%, rgba(148, 163, 184, 0.03) 100%);
    }

    .pc-grade.grade-empty[b-bpp81z4tkx] {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.02) 100%);
    }

/* Section header rhythm */
.pc-grade-header[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 0 16px;
    user-select: none;
}

.pc-grade-eyebrow[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
}

    .pc-grade-eyebrow i[b-bpp81z4tkx] {
        font-size: 12px;
        color: var(--ws-ink-4, #64748b);
        align-self: center;
    }

.pc-grade-label[b-bpp81z4tkx] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ws-ink-2, #334155);
    white-space: nowrap;
    flex-shrink: 0;
}

.pc-grade-descriptor[b-bpp81z4tkx] {
    font-size: 11.5px;
    color: var(--ws-ink-4, #64748b);
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pc-grade-rule[b-bpp81z4tkx] {
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.10);
    min-width: 24px;
    align-self: center;
}

.pc-grade-count[b-bpp81z4tkx] {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ws-ink-3, #475569);
    line-height: 1.4;
}

/* Section header band tints */
.pc-grade.grade-great .pc-grade-eyebrow i[b-bpp81z4tkx] {
    color: var(--score-great-vivid, #16a34a);
}

.pc-grade.grade-great .pc-grade-label[b-bpp81z4tkx] {
    color: #15803d;
}

.pc-grade.grade-great .pc-grade-rule[b-bpp81z4tkx] {
    background: rgba(22, 163, 74, 0.22);
}

.pc-grade.grade-good .pc-grade-eyebrow i[b-bpp81z4tkx] {
    color: var(--score-good-vivid, #5a8a72);
}

.pc-grade.grade-good .pc-grade-label[b-bpp81z4tkx] {
    color: #1e293b;
}

.pc-grade.grade-good .pc-grade-rule[b-bpp81z4tkx] {
    background: rgba(90, 138, 114, 0.22);
}

.pc-grade.grade-moderate .pc-grade-eyebrow i[b-bpp81z4tkx] {
    color: var(--score-moderate-vivid, #d97706);
}

.pc-grade.grade-moderate .pc-grade-label[b-bpp81z4tkx] {
    color: #b45309;
}

.pc-grade.grade-moderate .pc-grade-rule[b-bpp81z4tkx] {
    background: rgba(217, 119, 6, 0.22);
}

.pc-grade.grade-poor .pc-grade-eyebrow i[b-bpp81z4tkx] {
    color: var(--ws-ink-4, #64748b);
}

.pc-grade.grade-poor .pc-grade-label[b-bpp81z4tkx] {
    color: var(--ws-ink-2, #334155);
}

.pc-grade.grade-poor .pc-grade-rule[b-bpp81z4tkx] {
    background: rgba(100, 116, 139, 0.20);
}

/* Cards grid */
.pc-grade-cards[b-bpp81z4tkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    align-content: flex-start;
}

/* ============================================================
   OPPORTUNITY CARD - new composition for the leader audience.

   - Left band stripe carries grade identity instead of paper tint.
   - Top row: status chip (needs-read or verdict) + grade ring.
   - Headline noun phrase as primary text.
   - Pain hook below.
   - Three pip indicators (Prize / Effort / Horizon).
   - Evidence trio (Persona / Market / Competitive).
   - Verdict bar (or recorded-verdict state).
   - Demoted provenance footer.
   ============================================================ */

@keyframes pc-card-enter-b-bpp81z4tkx {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pc-pulse-b-bpp81z4tkx {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(243, 26, 125, 0.55);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(243, 26, 125, 0);
    }
}

.pc-idea-card[b-bpp81z4tkx] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 14px 22px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.04);
    animation: pc-card-enter-b-bpp81z4tkx 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: transform 0.20s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.20s ease, border-color 0.20s ease, opacity 0.20s ease;
}

    .pc-idea-card:hover[b-bpp81z4tkx] {
        transform: translateY(-2px);
        border-color: rgba(15, 23, 42, 0.16);
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.12);
    }

/* Verdicted cards recede slightly - decision is recorded,
       the card is no longer asking for attention. */
/* Band stripe - carries grade identity along the left edge.
   Replaces the sticky-note paper-color tint. */

/* ── Top row: status chip + grade ring ── */

.pc-idea-status-chip[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    flex: 0 1 auto;
    min-width: 0;
}

    .pc-idea-status-chip i[b-bpp81z4tkx] {
        font-size: 10px;
    }

.pc-idea-status-pending[b-bpp81z4tkx] {
    background: rgba(243, 26, 125, 0.10);
    color: #c40858;
    border: 1px solid rgba(243, 26, 125, 0.24);
}

.pc-idea-status-pulse[b-bpp81z4tkx] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f31a7d;
    flex: 0 0 auto;
    animation: pc-pulse-b-bpp81z4tkx 1.8s ease-out infinite;
}

.pc-idea-status-verdicted[b-bpp81z4tkx] {
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.5);
}

    .pc-idea-status-verdicted.verdict-pursue[b-bpp81z4tkx] {
        color: #15803d;
        background: rgba(22, 163, 74, 0.10);
        border-color: rgba(22, 163, 74, 0.32);
    }

    .pc-idea-status-verdicted.verdict-explore[b-bpp81z4tkx] {
        color: #1d4ed8;
        background: rgba(37, 99, 235, 0.10);
        border-color: rgba(37, 99, 235, 0.32);
    }

    .pc-idea-status-verdicted.verdict-hold[b-bpp81z4tkx] {
        color: #b45309;
        background: rgba(217, 119, 6, 0.10);
        border-color: rgba(217, 119, 6, 0.32);
    }

    .pc-idea-status-verdicted.verdict-kill[b-bpp81z4tkx] {
        color: #b91c1c;
        background: rgba(220, 38, 38, 0.08);
        border-color: rgba(220, 38, 38, 0.30);
    }

/* Grade ring wrapper - no longer absolute; sits inline in the
   top row at the right end. */
.pc-card-grade[b-bpp81z4tkx] {
    flex: 0 0 auto;
    z-index: 1;
}

/* ── Mini-grade (replicated for Blazor scoping) ── */

.mini-grade[b-bpp81z4tkx] {
    --mg-pct: 0;
    --mg-color: transparent;
    --mg-tint: transparent;
    --mg-track: rgba(0, 0, 0, 0.12);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(var(--mg-color) calc(var(--mg-pct) * 3.6deg), var(--mg-track) calc(var(--mg-pct) * 3.6deg));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-grade-core[b-bpp81z4tkx] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--score-header, #1e293b);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
}

    .mini-grade-core[b-bpp81z4tkx]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--mg-tint);
    }

.mini-grade-letter[b-bpp81z4tkx] {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
}

.mini-grade-core.has-mod .mini-grade-letter[b-bpp81z4tkx] {
    font-size: 11px;
    margin-left: -1px;
}

.mini-grade-mod[b-bpp81z4tkx] {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    align-self: flex-start;
    margin-top: 3px;
    margin-left: -0.5px;
}

.mini-grade.grade-great[b-bpp81z4tkx] {
    --mg-color: var(--score-great-vivid, #16a34a);
    --mg-tint: rgba(22, 163, 74, 0.20);
}

.mini-grade.grade-good[b-bpp81z4tkx] {
    --mg-color: var(--score-good-vivid, #5a8a72);
    --mg-tint: rgba(90, 138, 114, 0.18);
}

.mini-grade.grade-moderate[b-bpp81z4tkx] {
    --mg-color: var(--score-moderate-vivid, #d97706);
    --mg-tint: rgba(217, 119, 6, 0.18);
}

.mini-grade.grade-poor[b-bpp81z4tkx] {
    --mg-color: var(--score-poor-vivid, #94a3b8);
    --mg-tint: rgba(148, 163, 184, 0.14);
}

.mini-grade.grade-empty[b-bpp81z4tkx] {
    --mg-tint: rgba(203, 213, 225, 0.10);
}

    .mini-grade.grade-empty .mini-grade-core[b-bpp81z4tkx] {
        background: #e2e8f0;
    }

        .mini-grade.grade-empty .mini-grade-core[b-bpp81z4tkx]::before {
            background: none;
        }

    .mini-grade.grade-empty .mini-grade-letter[b-bpp81z4tkx] {
        color: #64748b;
        font-weight: bold;
    }

/* ── Headline + Pain hook ── */

.pc-idea-painhook[b-bpp81z4tkx] {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.42;
    color: var(--ws-ink-3, #475569);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Pip row: Prize / Effort / Horizon ── */

.pc-idea-pips[b-bpp81z4tkx] {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pc-idea-pip[b-bpp81z4tkx] {
    flex: 1 1 0;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px 6px 9px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left-width: 3px;
    border-radius: 4px;
    line-height: 1.15;
}

.pc-idea-pip-label[b-bpp81z4tkx] {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ws-ink-4, #64748b);
}

.pc-idea-pip-value[b-bpp81z4tkx] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
    letter-spacing: -0.01em;
}

/* Prize intensity - Small -> Transformational */
.pip-prize-1[b-bpp81z4tkx] {
    border-left-color: #cbd5e1;
}

.pip-prize-2[b-bpp81z4tkx] {
    border-left-color: #94a3b8;
}

.pip-prize-3[b-bpp81z4tkx] {
    border-left-color: #16a34a;
    background: rgba(22, 163, 74, 0.045);
}

.pip-prize-4[b-bpp81z4tkx] {
    border-left-color: #15803d;
    background: rgba(22, 163, 74, 0.09);
}

    .pip-prize-4 .pc-idea-pip-value[b-bpp81z4tkx] {
        color: #15803d;
    }

/* Effort intensity - Low (good) -> High / Exploration (concerning) */
.pip-effort-1[b-bpp81z4tkx] {
    border-left-color: #16a34a;
    background: rgba(22, 163, 74, 0.04);
}

.pip-effort-2[b-bpp81z4tkx] {
    border-left-color: #94a3b8;
}

.pip-effort-3[b-bpp81z4tkx] {
    border-left-color: #d97706;
    background: rgba(217, 119, 6, 0.04);
}

.pip-effort-4[b-bpp81z4tkx] {
    border-left-color: #b45309;
    background: rgba(217, 119, 6, 0.09);
}

    .pip-effort-4 .pc-idea-pip-value[b-bpp81z4tkx] {
        color: #b45309;
    }

/* Horizon: Now (vivid) -> Next -> Later (muted) */
.pip-horizon-1[b-bpp81z4tkx] {
    border-left-color: #f31a7d;
    background: rgba(243, 26, 125, 0.05);
}

    .pip-horizon-1 .pc-idea-pip-value[b-bpp81z4tkx] {
        color: #c40858;
    }

.pip-horizon-2[b-bpp81z4tkx] {
    border-left-color: #94a3b8;
}

.pip-horizon-3[b-bpp81z4tkx] {
    border-left-color: #cbd5e1;
    opacity: 0.85;
}

/* ── Evidence trio ── */

.pc-idea-evidence[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

.pc-idea-evidence-label[b-bpp81z4tkx] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ws-ink-4, #64748b);
    flex: 0 0 auto;
}

.pc-idea-evidence-marks[b-bpp81z4tkx] {
    display: inline-flex;
    gap: 4px;
}

.pc-idea-evidence-mark[b-bpp81z4tkx] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: help;
    transition: transform 0.14s ease;
}

    .pc-idea-evidence-mark.is-on[b-bpp81z4tkx] {
        background: rgba(22, 163, 74, 0.14);
        color: #15803d;
        border: 1px solid rgba(22, 163, 74, 0.32);
    }

    .pc-idea-evidence-mark.is-off[b-bpp81z4tkx] {
        background: rgba(15, 23, 42, 0.04);
        color: var(--ws-ink-5, #94a3b8);
        border: 1px dashed rgba(15, 23, 42, 0.18);
    }

    .pc-idea-evidence-mark:hover[b-bpp81z4tkx] {
        transform: translateY(-1px);
    }

/* ── Verdict bar ── */

.pc-idea-verdict-strip[b-bpp81z4tkx] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 12px;
    cursor: default;
}

.pc-idea-verdict-btn[b-bpp81z4tkx] {
    flex: 1 1 0;
    appearance: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 6px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.10s ease;
}

    .pc-idea-verdict-btn i[b-bpp81z4tkx] {
        font-size: 11px;
        color: var(--ws-ink-4, #64748b);
        transition: color 0.14s ease;
    }

    .pc-idea-verdict-btn:hover[b-bpp81z4tkx] {
        transform: translateY(-1px);
    }

    .pc-idea-verdict-btn:active[b-bpp81z4tkx] {
        transform: translateY(0);
    }

.pc-idea-verdict-pursue:hover[b-bpp81z4tkx] {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.40);
    color: #15803d;
}

    .pc-idea-verdict-pursue:hover i[b-bpp81z4tkx] {
        color: #15803d;
    }

.pc-idea-verdict-explore:hover[b-bpp81z4tkx] {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.36);
    color: #1d4ed8;
}

    .pc-idea-verdict-explore:hover i[b-bpp81z4tkx] {
        color: #1d4ed8;
    }

.pc-idea-verdict-hold:hover[b-bpp81z4tkx] {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.36);
    color: #b45309;
}

    .pc-idea-verdict-hold:hover i[b-bpp81z4tkx] {
        color: #b45309;
    }

.pc-idea-verdict-kill:hover[b-bpp81z4tkx] {
    background: rgba(220, 38, 38, 0.07);
    border-color: rgba(220, 38, 38, 0.34);
    color: #b91c1c;
}

    .pc-idea-verdict-kill:hover i[b-bpp81z4tkx] {
        color: #b91c1c;
    }

/* Recorded state: replaces the four-button row with a quiet
   confirmation strip + a "Change" link. */
.pc-idea-verdict-recorded[b-bpp81z4tkx] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.025);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 6px;
}

.pc-idea-verdict-recorded-label[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ws-ink-3, #475569);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .pc-idea-verdict-recorded-label i[b-bpp81z4tkx] {
        font-size: 10px;
        color: var(--ws-ink-4, #64748b);
    }

.pc-idea-verdict-change[b-bpp81z4tkx] {
    appearance: none;
    background: transparent;
    border: none;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.25);
    text-underline-offset: 2px;
    transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

    .pc-idea-verdict-change:hover[b-bpp81z4tkx] {
        color: var(--ws-ink-1, #0f172a);
        text-decoration-color: currentColor;
    }

/* ── Footer: demoted provenance ── */

.pc-idea-foot[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
    font-size: 10.5px;
    color: var(--ws-ink-4, #64748b);
}

.pc-idea-foot-codename[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ws-ink-4, #64748b);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 120px;
}

.pc-idea-foot-dot[b-bpp81z4tkx] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
    flex: 0 0 auto;
}

.pc-idea-foot-source[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

    .pc-idea-foot-source i[b-bpp81z4tkx] {
        font-size: 8.5px;
        color: var(--ws-ink-5, #94a3b8);
        flex: 0 0 auto;
    }

.pc-idea-foot-source-orphan[b-bpp81z4tkx] {
    font-style: italic;
    color: var(--ws-ink-5, #94a3b8);
}

.pc-idea-foot-meta[b-bpp81z4tkx] {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ws-ink-5, #94a3b8);
}

/* ============================================================
   EMPTY / SKELETON
   ============================================================ */

.pc-state-empty[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    color: var(--ws-ink-4, #64748b);
    gap: 12px;
}

    .pc-state-empty i[b-bpp81z4tkx] {
        font-size: 32px;
        color: var(--ws-ink-6, #cbd5e1);
    }

.pc-state-empty-title[b-bpp81z4tkx] {
    font-size: 17px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    letter-spacing: -0.01em;
}

.pc-state-empty-body[b-bpp81z4tkx] {
    font-size: 13px;
    line-height: 1.55;
    max-width: 460px;
    color: var(--ws-ink-4, #64748b);
}

.pc-skeleton-main[b-bpp81z4tkx] {
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pc-skeleton-hero[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-skeleton-eyebrow[b-bpp81z4tkx] {
    width: 120px;
    height: 14px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.08);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-title[b-bpp81z4tkx] {
    width: 50%;
    height: 22px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.10);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-subtitle[b-bpp81z4tkx] {
    width: 70%;
    height: 12px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.06);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-card-grid[b-bpp81z4tkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.pc-skeleton-card[b-bpp81z4tkx] {
    height: 280px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

@keyframes pc-skel-pulse-b-bpp81z4tkx {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ============================================================
   RESPONSIVE: keep the canvas usable on narrow viewports.
   Below ~900px the rail folds, below ~640px the card grid
   collapses to a single column.
   ============================================================ */

@media (max-width: 900px) {
    .pc-grade-cards[b-bpp81z4tkx],
    .pc-skeleton-card-grid[b-bpp81z4tkx] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 640px) {
    .pc-grade-cards[b-bpp81z4tkx],
    .pc-skeleton-card-grid[b-bpp81z4tkx] {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   MAIN COLUMN
   ============================================================ */

.portfolio-main[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ws-bg-1, #ffffff);
    position: relative;
    overflow: hidden;
}

    .portfolio-main > .pc-state-empty[b-bpp81z4tkx],
    .portfolio-main > .pc-skeleton-main[b-bpp81z4tkx] {
        flex: 1;
        min-height: 0;
    }

/* ============================================================
   FEED - single flat ranked feed, with optional red cutline
   between the active set (above) and the backlog (below).
   ============================================================ */

.pc-feed[b-bpp81z4tkx] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 0 64px 0;
    gap: 0;
}

    .pc-feed[b-bpp81z4tkx]::-webkit-scrollbar {
        width: 10px;
    }

    .pc-feed[b-bpp81z4tkx]::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-feed[b-bpp81z4tkx]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.10);
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .pc-feed[b-bpp81z4tkx]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.20);
            background-clip: padding-box;
            border: 2px solid transparent;
        }

.pc-feed-grid[b-bpp81z4tkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
    align-content: flex-start;
}

/* ── Cutline: the red horizontal divider between active and
   backlog. Pink (Ainna brand) rather than literal red, with
   a small inline label. ── */

.pc-feed-cutline[b-bpp81z4tkx] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    /* Negative top/bottom margin pulls the cutline back so it
       sits ON TOP of the seam between the two zones. The amount
       matches the inner padding of the zones so the rule overlaps
       the seam without creating a gap. */
    margin: -16px 0 -16px 0;
    user-select: none;
    pointer-events: none;
}

    .pc-feed-cutline > *[b-bpp81z4tkx] {
        pointer-events: auto;
    }

.pc-feed-cutline-bar[b-bpp81z4tkx] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(243, 26, 125, 0.18) 12%, rgba(243, 26, 125, 0.55) 50%, rgba(243, 26, 125, 0.18) 88%, transparent 100%);
}

.pc-feed-cutline-label[b-bpp81z4tkx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    /* Opaque base so the pill reads cleanly when it overlaps
       either of the two tinted zones beneath it. */
    background: linear-gradient(rgba(243, 26, 125, 0.06), rgba(243, 26, 125, 0.06)), #ffffff;
    border: 1px solid rgba(243, 26, 125, 0.32);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c40858;
    box-shadow: 0 1px 2px rgba(243, 26, 125, 0.08);
}

    .pc-feed-cutline-label i[b-bpp81z4tkx] {
        font-size: 10px;
    }

    .pc-feed-cutline-label strong[b-bpp81z4tkx] {
        font-weight: 700;
        color: #a30649;
    }

/* Cards below the line - muted, slightly smaller in feel
   without being a different size. */

.pc-feed-grid-below .pc-idea-card[b-bpp81z4tkx] {
    opacity: 0.78;
    background: rgba(248, 250, 252, 0.7);
}

    .pc-feed-grid-below .pc-idea-card:hover[b-bpp81z4tkx] {
        opacity: 1;
        background: #ffffff;
    }

/* ============================================================
   OPPORTUNITY CARD - new editorial composition.

   Compact opportunity pitch with:
     - Large serif grade letter (top-left)
     - Lifecycle pill (top-right)
     - Headline noun phrase
     - 2-3 sentence narrative
     - Source / time / codename meta foot
     - Three-state endorsement strip
   ============================================================ */

@keyframes pc-card-enter-b-bpp81z4tkx {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pc-idea-card[b-bpp81z4tkx] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 16px 24px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
    animation: pc-card-enter-b-bpp81z4tkx 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: transform 0.20s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.20s ease, border-color 0.20s ease, opacity 0.20s ease, background 0.20s ease;
}

    .pc-idea-card:hover[b-bpp81z4tkx] {
        transform: translateY(-2px);
        border-color: rgba(15, 23, 42, 0.18);
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 22px rgba(15, 23, 42, 0.10);
    }

/* Verdicted cards keep full opacity but pick up a thin
       outline in the verdict color so the state reads at a
       glance from the section view. */

/* ── Grade tile — pixel-faithful clone of the canonical
   .ihv-grade tile (idea viewer), namespaced under
   .pc-idea-grade-tile so it doesn't collide with the
   viewer. Three layers stack inside:
     1. rounded square with tier border + tinted fill
     2. letter row with the letter centered, modifier
        absolute-positioned top-right
     3. score row with numeric % below, in tier color

   Tier color variables drive every color in the tile, so a
   single class swap recolors everything coherently. ── */

.pc-idea-grade-tile[b-bpp81z4tkx] {
    --tier-bg: rgba(15, 23, 42, 0.04);
    --tier-border: rgba(15, 23, 42, 0.12);
    --tier-fg: #2c3e50;
    --grade-tile-size: 4rem;
    flex-shrink: 0;
    position: relative;
    width: var(--grade-tile-size);
    min-height: var(--grade-tile-size);
    padding: 0.5rem 0.5rem;
    border-radius: 14px;
    background: var(--tier-bg);
    border: 1.5px solid var(--tier-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--tier-fg);
}

    .pc-idea-grade-tile.tier-great[b-bpp81z4tkx] {
        --tier-bg: color-mix(in srgb, #16a34a 8%, #ffffff);
        --tier-border: rgba(22, 163, 74, 0.32);
        --tier-fg: #15803d;
    }

    .pc-idea-grade-tile.tier-good[b-bpp81z4tkx] {
        --tier-bg: color-mix(in srgb, #65a30d 8%, #ffffff);
        --tier-border: rgba(101, 163, 13, 0.32);
        --tier-fg: #4d7c0f;
    }

    .pc-idea-grade-tile.tier-moderate[b-bpp81z4tkx] {
        --tier-bg: color-mix(in srgb, #ea580c 8%, #ffffff);
        --tier-border: rgba(234, 88, 12, 0.32);
        --tier-fg: #c2410c;
    }

    .pc-idea-grade-tile.tier-poor[b-bpp81z4tkx] {
        --tier-bg: color-mix(in srgb, #dc2626 8%, #ffffff);
        --tier-border: rgba(220, 38, 38, 0.32);
        --tier-fg: #b91c1c;
    }

    .pc-idea-grade-tile.tier-empty[b-bpp81z4tkx] {
        --tier-bg: rgba(15, 23, 42, 0.03);
        --tier-border: rgba(15, 23, 42, 0.10);
        --tier-fg: #94a3b8;
    }

.pc-idea-grade-letter-row[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}

.pc-idea-grade-letter[b-bpp81z4tkx] {
    position: relative;
    display: inline-block;
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--tier-fg);
    text-align: center;
}

/* Modifier sits absolute in the top-right of the tile, same
   tier color, slightly muted. Matches the canonical pattern. */
.pc-idea-grade-modifier[b-bpp81z4tkx] {
    position: absolute;
    top: 0.4375rem;
    right: 0.5rem;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tier-fg);
    opacity: 0.9;
    pointer-events: none;
}

/* Score row sits directly below the letter, same tier color.
   The %-unit child uses font-size: 0.85em so it auto-scales. */
.pc-idea-grade-score-row[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3125rem;
    line-height: 1;
}

.pc-idea-grade-score[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tier-fg);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

    .pc-idea-grade-score .pc-score-unit[b-bpp81z4tkx] {
        margin-left: 0.0625rem;
        font-size: 0.85em;
        opacity: 0.75;
    }


/* ============================================================
   EMPTY / SKELETON  (unchanged from prior version)
   ============================================================ */

.pc-state-empty[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    color: var(--ws-ink-4, #64748b);
    gap: 12px;
}

    .pc-state-empty i[b-bpp81z4tkx] {
        font-size: 32px;
        color: var(--ws-ink-6, #cbd5e1);
    }

.pc-state-empty-title[b-bpp81z4tkx] {
    font-size: 17px;
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
    letter-spacing: -0.01em;
}

.pc-state-empty-body[b-bpp81z4tkx] {
    font-size: 13px;
    line-height: 1.55;
    max-width: 460px;
    color: var(--ws-ink-4, #64748b);
}

.pc-skeleton-main[b-bpp81z4tkx] {
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pc-skeleton-hero[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-skeleton-eyebrow[b-bpp81z4tkx] {
    width: 120px;
    height: 14px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.08);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-title[b-bpp81z4tkx] {
    width: 50%;
    height: 22px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.10);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-subtitle[b-bpp81z4tkx] {
    width: 70%;
    height: 12px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.06);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

.pc-skeleton-card-grid[b-bpp81z4tkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
}

.pc-skeleton-card[b-bpp81z4tkx] {
    height: 280px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    animation: pc-skel-pulse-b-bpp81z4tkx 1.4s ease-in-out infinite;
}

@keyframes pc-skel-pulse-b-bpp81z4tkx {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .pc-feed-grid[b-bpp81z4tkx],
    .pc-skeleton-card-grid[b-bpp81z4tkx] {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }

    .pc-feed[b-bpp81z4tkx] {
        padding: 0 0 64px 0;
    }

    .pc-feed-grid[b-bpp81z4tkx],
    .pc-feed-grid-below[b-bpp81z4tkx] {
        padding: 18px 18px 22px;
    }

    .pc-feed-cutline[b-bpp81z4tkx] {
        padding: 0 18px;
    }
}

@media (max-width: 640px) {
    .pc-feed-grid[b-bpp81z4tkx],
    .pc-skeleton-card-grid[b-bpp81z4tkx] {
        grid-template-columns: 1fr;
    }

    .pc-feed[b-bpp81z4tkx] {
        padding: 0 0 64px 0;
    }

    .pc-feed-grid[b-bpp81z4tkx],
    .pc-feed-grid-below[b-bpp81z4tkx] {
        padding: 14px 16px 18px;
    }

    .pc-feed-cutline[b-bpp81z4tkx] {
        padding: 0 16px;
    }
}



/* ============================================================
   RIGHT RAIL — comments + decision timeline

   Composer at top, timeline list below. Selection state in
   the header reflects which card (if any) is currently
   filtering the timeline. Newest-first ordering.
   ============================================================ */

.portfolio-rail-right[b-bpp81z4tkx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    background: var(--ws-bg-1, #ffffff);
}

/* ── Header ── */

.pc-tl-header[b-bpp81z4tkx] {
    flex: 0 0 auto;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pc-tl-header-eyebrow[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-4, #64748b);
}

.pc-tl-header-title[b-bpp81z4tkx] {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: var(--ws-ink-1, #0f172a);
}

.pc-tl-header-sub[b-bpp81z4tkx] {
    font-size: 11.5px;
    color: var(--ws-ink-4, #64748b);
    line-height: 1.45;
    margin-top: 2px;
}

.pc-tl-clear[b-bpp81z4tkx] {
    appearance: none;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.10);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s ease, color 0.14s ease;
}

    .pc-tl-clear:hover[b-bpp81z4tkx] {
        background: rgba(15, 23, 42, 0.09);
        color: var(--ws-ink-1, #0f172a);
    }

    .pc-tl-clear i[b-bpp81z4tkx] {
        font-size: 10px;
    }

/* ── Timeline list ── */

.pc-tl-list[b-bpp81z4tkx] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 32px;
}

    .pc-tl-list[b-bpp81z4tkx]::-webkit-scrollbar {
        width: 8px;
    }

    .pc-tl-list[b-bpp81z4tkx]::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.10);
        border-radius: 4px;
    }

        .pc-tl-list[b-bpp81z4tkx]::-webkit-scrollbar-thumb:hover {
            background: rgba(15, 23, 42, 0.20);
        }

.pc-tl-empty[b-bpp81z4tkx] {
    padding: 36px 16px;
    text-align: center;
    color: var(--ws-ink-5, #94a3b8);
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    .pc-tl-empty i[b-bpp81z4tkx] {
        font-size: 22px;
        color: var(--ws-ink-6, #cbd5e1);
    }

/* Row: gutter (icon) + body (meta + text). */

.pc-tl-row[b-bpp81z4tkx] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .pc-tl-row:hover[b-bpp81z4tkx] {
        background: rgba(15, 23, 42, 0.025);
    }


.pc-tl-row-gutter[b-bpp81z4tkx] {
    display: flex;
    justify-content: center;
    padding-top: 1px;
}

.pc-tl-row-icon[b-bpp81z4tkx] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.06);
    color: var(--ws-ink-3, #475569);
    flex: 0 0 auto;
}

    .pc-tl-row-icon i[b-bpp81z4tkx] {
        font-size: 9.5px;
    }

/* Kind-specific accents on the icon */

.pc-tl-row-comment .pc-tl-row-icon[b-bpp81z4tkx] {
    background: rgba(15, 23, 42, 0.08);
    color: var(--ws-ink-1, #0f172a);
}

.pc-tl-row-cardcreated .pc-tl-row-icon[b-bpp81z4tkx] {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}

.pc-tl-row-lifecyclemove .pc-tl-row-icon[b-bpp81z4tkx] {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}

.pc-tl-row-statuschange .pc-tl-row-icon[b-bpp81z4tkx] {
    background: rgba(217, 119, 6, 0.10);
    color: #b45309;
}

.pc-tl-row-body[b-bpp81z4tkx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pc-tl-row-meta[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ws-ink-4, #64748b);
}

.pc-tl-row-author[b-bpp81z4tkx] {
    font-weight: 600;
    color: var(--ws-ink-2, #334155);
}

.pc-tl-row-dot[b-bpp81z4tkx] {
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
    flex: 0 0 auto;
}

.pc-tl-row-time[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--ws-ink-5, #94a3b8);
}

.pc-tl-row-text[b-bpp81z4tkx] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ws-ink-2, #334155);
}

.pc-tl-row-event[b-bpp81z4tkx] {
    color: var(--ws-ink-3, #475569);
    font-size: 12px;
}

    .pc-tl-row-event em[b-bpp81z4tkx] {
        font-style: normal;
        font-weight: 600;
        color: var(--ws-ink-2, #334155);
    }

.pc-tl-row-link[b-bpp81z4tkx] {
    font-style: italic;
    color: var(--ws-ink-2, #334155);
}

/* ============================================================
   CARD SELECTION HIGHLIGHT (drives two-way visual link with
   the timeline). Same rules apply above and below the cutline.
   ============================================================ */

.pc-idea-card.is-selected[b-bpp81z4tkx] {
    background: #ffffff;
    border-color: rgba(243, 26, 125, 0.45);
    box-shadow: 0 0 0 1px rgba(243, 26, 125, 0.18), 0 6px 18px rgba(243, 26, 125, 0.12);
    opacity: 1;
}

    .pc-idea-card.is-selected.is-below-line[b-bpp81z4tkx] {
        background: #ffffff;
        opacity: 1;
    }

/* ============================================================
   RESPONSIVE - right rail collapses on narrow viewports.
   Below 1100px the rail moves below the feed; below 740px
   it stacks fully.
   ============================================================ */

@media (max-width: 1180px) {
    .portfolio-grid[b-bpp81z4tkx] {
        grid-template-columns: var(--pc-left-rail-w, 320px) 6px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 960px) {
    .portfolio-grid[b-bpp81z4tkx] {
        grid-template-columns: var(--pc-left-rail-w, 300px) 6px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .portfolio-rail-right[b-bpp81z4tkx] {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.10);
        max-height: 320px;
    }
}


/* ============================================================
   COMMENT CHIP — now a button (was a div). Inherits the
   shape rules from the existing pc-idea-comment-chip block;
   here we add button-specific resets and an active state for
   when the popover is open.
   ============================================================ */

/* ============================================================
   TIMELINE — decision events get distinct styling

   Comments are flat conversation rows. Decision events
   (CardCreated / LifecycleMove / StatusChange) carry the
   durable record of what happened to the portfolio, so they
   pick up a thin colored left rule + bolder timestamp.
   ============================================================ */

.pc-tl-row-author-role[b-bpp81z4tkx] {
    font-style: italic;
    font-size: 10.5px;
    color: var(--ws-ink-4, #64748b);
    margin-left: -2px;
}

/* Decision events - colored left rule via box-shadow inset. */

.pc-tl-row-cardcreated[b-bpp81z4tkx],
.pc-tl-row-lifecyclemove[b-bpp81z4tkx],
.pc-tl-row-statuschange[b-bpp81z4tkx] {
    border-left: 2px solid transparent;
    border-radius: 4px;
    padding-left: 10px;
    margin-left: 0;
}

.pc-tl-row-cardcreated[b-bpp81z4tkx] {
    border-left-color: rgba(22, 163, 74, 0.45);
}

.pc-tl-row-lifecyclemove[b-bpp81z4tkx] {
    border-left-color: rgba(37, 99, 235, 0.45);
}

.pc-tl-row-statuschange[b-bpp81z4tkx] {
    border-left-color: rgba(217, 119, 6, 0.45);
}

    .pc-tl-row-cardcreated .pc-tl-row-time[b-bpp81z4tkx],
    .pc-tl-row-lifecyclemove .pc-tl-row-time[b-bpp81z4tkx],
    .pc-tl-row-statuschange .pc-tl-row-time[b-bpp81z4tkx] {
        font-weight: 600;
        color: var(--ws-ink-3, #475569);
    }

/* ============================================================
   REVIEWER NOTE — alignment-medium framing
   ============================================================ */


/* ============================================================
   CARD WRAP — positioning context for the inline composer
   overlay and the detail button.
   ============================================================ */

.pc-idea-card-wrap[b-bpp81z4tkx] {
    position: relative;
    min-width: 0;
}

    .pc-idea-card-wrap.is-popover-open[b-bpp81z4tkx] {
        z-index: 10;
    }

/* ============================================================
   DETAIL-VIEW BUTTON — top-right of card, hover-revealed.

   Reduces visual noise from a repeating control across many
   cards. Always present in the DOM (so it animates in/out
   smoothly), but fades in only when the card is hovered or
   focused. Click stops propagation so it does not also toggle
   the card selection.
   ============================================================ */

.pc-idea-detail-btn[b-bpp81z4tkx] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.95);
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

    .pc-idea-detail-btn i[b-bpp81z4tkx] {
        font-size: 10.5px;
    }

    .pc-idea-card:hover .pc-idea-detail-btn[b-bpp81z4tkx],
    .pc-idea-detail-btn:focus-visible[b-bpp81z4tkx] {
        opacity: 1;
        transform: translateY(0);
    }

    .pc-idea-detail-btn:hover[b-bpp81z4tkx] {
        background: #ffffff;
        color: var(--ws-ink-1, #0f172a);
        border-color: rgba(15, 23, 42, 0.22);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

/* When the card is selected, keep the detail button visible.
   Selection means the user is engaged with this card; the
   button should be reachable without re-hovering. */

.pc-idea-card.is-selected .pc-idea-detail-btn[b-bpp81z4tkx] {
    opacity: 1;
    transform: translateY(0);
}

@keyframes pc-overlay-in-b-bpp81z4tkx {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   TIMELINE HIGHLIGHT — selection dims non-matching rows,
   leaves matching rows accented.
   ============================================================ */

.pc-tl-row.is-match[b-bpp81z4tkx] {
    background: rgba(243, 26, 125, 0.06);
    outline: 1px solid rgba(243, 26, 125, 0.22);
    outline-offset: -1px;
}

    .pc-tl-row.is-match .pc-tl-row-author[b-bpp81z4tkx] {
        color: var(--ws-ink-1, #0f172a);
    }

.pc-tl-row.is-dimmed[b-bpp81z4tkx] {
    opacity: 0.42;
}

    .pc-tl-row.is-dimmed:hover[b-bpp81z4tkx] {
        opacity: 0.78;
    }


/* ============================================================
   CARD TYPOGRAPHY & STRUCTURE (refined)

   Layout, top to bottom:
     1. Top header — codename eyebrow + headline (left) / grade tile (right)
     2. Narrative
     3. People + state row — owner avatar + name + role + lifecycle pill
     4. Trailing meta — source problem + relative time
     5. Comment chip
   ============================================================ */

/* ── Card surface — slightly more generous padding for the new layout ── */

.pc-idea-card[b-bpp81z4tkx] {
    padding: 16px 18px 14px 18px;
    gap: 12px;
}

/* ── Top header ── */

.pc-idea-top[b-bpp81z4tkx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 64px;
}

.pc-idea-top-text[b-bpp81z4tkx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Codename — small mono eyebrow */
.pc-idea-codename[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ws-ink-5, #94a3b8);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pc-idea-headline[b-bpp81z4tkx] {
    margin: 0;
    padding-right: 12px;
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--ws-ink-1, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Narrative ── */

.pc-idea-narrative[b-bpp81z4tkx] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ws-ink-2, #334155);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-idea-narrative-fallback[b-bpp81z4tkx] {
    font-style: italic;
    color: var(--ws-ink-3, #475569);
    -webkit-line-clamp: 3;
}

/* ── People + state row ──
   Owner avatar (30px) + name (medium 13px) + role (italic 11px)
   on the left; lifecycle pill (small mono uppercase) on the
   right. Reads as "Joanna Park · PM Lead, CS  IN VALIDATION". */

.pc-idea-owner[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.pc-idea-owner-avatar[b-bpp81z4tkx] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #ffffff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 1px rgba(15, 23, 42, 0.10);
}

.pc-idea-owner-avatar-empty[b-bpp81z4tkx] {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ws-ink-5, #94a3b8);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}

.pc-idea-owner-detail[b-bpp81z4tkx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.pc-idea-owner-name[b-bpp81z4tkx] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ws-ink-1, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

.pc-idea-owner-name-empty[b-bpp81z4tkx] {
    font-weight: 500;
    color: var(--ws-ink-5, #94a3b8);
    font-style: italic;
}

.pc-idea-owner-role[b-bpp81z4tkx] {
    font-size: 10.5px;
    font-style: italic;
    color: var(--ws-ink-4, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.003em;
}

/* Lifecycle pill — now lives in the owner row. Small mono caps
   with a coloured border, no fill. Reads as a status badge. */

.pc-idea-lifecycle[b-bpp81z4tkx] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1.4;
    border-radius: 3px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

    .pc-idea-lifecycle.lifecycle-framed[b-bpp81z4tkx] {
        color: #64748b;
    }

    .pc-idea-lifecycle.lifecycle-validation[b-bpp81z4tkx] {
        color: #2563eb;
    }

    .pc-idea-lifecycle.lifecycle-prototyping[b-bpp81z4tkx] {
        color: #d97706;
    }

    .pc-idea-lifecycle.lifecycle-market[b-bpp81z4tkx] {
        color: #16a34a;
    }

    .pc-idea-lifecycle.lifecycle-scaling[b-bpp81z4tkx] {
        color: #15803d;
    }

/* ── Trailing meta — small slim row ── */

.pc-idea-meta[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--ws-ink-5, #94a3b8);
    flex-wrap: wrap;
}

.pc-idea-meta-source[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ws-ink-4, #64748b);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pc-idea-meta-source i[b-bpp81z4tkx] {
        font-size: 9px;
        color: var(--ws-ink-6, #cbd5e1);
        flex: 0 0 auto;
    }

.pc-idea-meta-source-orphan[b-bpp81z4tkx] {
    color: var(--ws-ink-5, #94a3b8);
    font-style: italic;
}

.pc-idea-meta-dot[b-bpp81z4tkx] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
    flex: 0 0 auto;
}

.pc-idea-meta-time[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--ws-ink-5, #94a3b8);
    flex: 0 0 auto;
}

/* ============================================================
   COMMENT CHIP — small footer affordance
   ============================================================ */

.pc-idea-comment-chip[b-bpp81z4tkx] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 10px;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 11.5px;
    color: var(--ws-ink-4, #64748b);
    align-self: flex-start;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .pc-idea-comment-chip i[b-bpp81z4tkx] {
        font-size: 9.5px;
    }

    .pc-idea-comment-chip.has-comments[b-bpp81z4tkx] {
        background: rgba(243, 26, 125, 0.06);
        border-color: rgba(243, 26, 125, 0.20);
        color: #c40858;
    }

.pc-idea-card:hover .pc-idea-comment-chip[b-bpp81z4tkx] {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ws-ink-2, #334155);
}

    .pc-idea-card:hover .pc-idea-comment-chip.has-comments[b-bpp81z4tkx] {
        background: rgba(243, 26, 125, 0.09);
        border-color: rgba(243, 26, 125, 0.32);
        color: #c40858;
    }

.pc-idea-comment-chip.is-active[b-bpp81z4tkx] {
    background: rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--ws-ink-1, #0f172a);
}

    .pc-idea-comment-chip.is-active.has-comments[b-bpp81z4tkx] {
        background: rgba(243, 26, 125, 0.14);
        border-color: rgba(243, 26, 125, 0.40);
        color: #c40858;
    }

/* Locked comment chip — comments are disabled for now. Listed alongside
   the card-hover selector so the hover lift can't re-tint it on card hover. */
.pc-idea-comment-chip.is-locked[b-bpp81z4tkx],
.pc-idea-card:hover .pc-idea-comment-chip.is-locked[b-bpp81z4tkx] {
    cursor: default;
    background: rgba(15, 23, 42, 0.02);
    border: 1px dashed rgba(15, 23, 42, 0.10);
    color: var(--ws-ink-5, #94a3b8);
    opacity: 0.7;
}

    .pc-idea-comment-chip.is-locked i[b-bpp81z4tkx] {
        font-size: 9px;
    }

.pc-idea-comment-count[b-bpp81z4tkx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 10.5px;
}

.pc-idea-comment-label[b-bpp81z4tkx] {
    font-weight: 500;
    font-size: 11px;
}

/* ============================================================
   COMMENT OVERLAY — frosted-glass inline composer

   Anchored to the card's bottom edge with a slight inset on
   the sides so it reads as floating inside the card frame.
   Semi-transparent white + backdrop blur over the card content
   below, soft shadow lifting it off the surface. Twin actions
   (Cancel ghost + Post primary) below the textarea — smaller,
   tighter than before.
   ============================================================ */

.pc-idea-comment-overlay[b-bpp81z4tkx] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 36px -10px rgba(15, 23, 42, 0.22);
    padding: 11px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: pc-overlay-in-b-bpp81z4tkx 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pc-overlay-in-b-bpp81z4tkx {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fallback if backdrop-filter is unsupported - bump opacity. */
@supports not (backdrop-filter: blur(1px)) {
    .pc-idea-comment-overlay[b-bpp81z4tkx] {
        background: rgba(255, 255, 255, 0.95);
    }
}

.pc-idea-comment-overlay-title[b-bpp81z4tkx] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-ink-4, #64748b);
}

    .pc-idea-comment-overlay-title strong[b-bpp81z4tkx] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        font-weight: 700;
        color: var(--ws-ink-1, #0f172a);
        margin-right: 2px;
    }

.pc-idea-comment-overlay-textarea[b-bpp81z4tkx] {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.65);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ws-ink-1, #0f172a);
    resize: none;
    min-height: 60px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

    .pc-idea-comment-overlay-textarea:focus[b-bpp81z4tkx] {
        outline: none;
        border-color: rgba(15, 23, 42, 0.36);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
    }

    .pc-idea-comment-overlay-textarea[b-bpp81z4tkx]::placeholder {
        color: var(--ws-ink-5, #94a3b8);
        font-style: italic;
    }

.pc-idea-comment-overlay-actions[b-bpp81z4tkx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Cancel — ghost / quiet */
.pc-idea-comment-overlay-cancel[b-bpp81z4tkx] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 11px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .pc-idea-comment-overlay-cancel:hover[b-bpp81z4tkx] {
        background: rgba(15, 23, 42, 0.06);
        color: var(--ws-ink-1, #0f172a);
    }

/* Post — primary dark */
.pc-idea-comment-overlay-post[b-bpp81z4tkx] {
    appearance: none;
    padding: 5px 12px;
    background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
    border: 1px solid #0f172a;
    border-radius: 5px;
    color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(15, 23, 42, 0.16);
    transition: background 0.14s ease, opacity 0.14s ease;
}

    .pc-idea-comment-overlay-post:hover:not(:disabled)[b-bpp81z4tkx] {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    }

    .pc-idea-comment-overlay-post:disabled[b-bpp81z4tkx] {
        opacity: 0.40;
        cursor: not-allowed;
    }


/* ============================================================
   COMPACT META LINE (rail)
   Replaces the Governance + Timeline dl blocks. Single inline
   row carrying cadence, capacity, dates, last review.
   ============================================================ */

.pc-rail-meta-line[b-bpp81z4tkx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.025);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--ws-ink-3, #475569);
    line-height: 1.4;
}

.pc-rail-meta-pair[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

    .pc-rail-meta-pair i[b-bpp81z4tkx] {
        font-size: 10px;
        color: var(--ws-ink-5, #94a3b8);
        width: 12px;
        text-align: center;
    }

    .pc-rail-meta-pair strong[b-bpp81z4tkx] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        color: var(--ws-ink-1, #0f172a);
    }

.pc-rail-meta-sep[b-bpp81z4tkx] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ws-ink-6, #cbd5e1);
    flex: 0 0 auto;
}

/* ============================================================
   RELATED LINE — single inline row, one icon, items
   separated by a middot. Replaces the Products/Initiatives
   subsection split.
   ============================================================ */

.pc-rail-related-line[b-bpp81z4tkx] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.45;
    font-size: 12px;
    color: var(--ws-ink-2, #334155);
}

.pc-rail-related-icon[b-bpp81z4tkx] {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--ws-ink-5, #94a3b8);
    margin-top: 3px;
}

.pc-rail-related-items[b-bpp81z4tkx] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
}

.pc-rail-related-item[b-bpp81z4tkx] {
    font-weight: 500;
    color: var(--ws-ink-1, #0f172a);
    cursor: default;
}

.pc-rail-related-sep[b-bpp81z4tkx] {
    color: var(--ws-ink-6, #cbd5e1);
    font-weight: 700;
    user-select: none;
}

/* ============================================================
   FEED SECTION BACKGROUNDS — above-the-line vs backlog

   Above-the-cutline gets a subtle warm-green wash signaling
   "committed" — the active set. Backlog below the line gets a
   very light cool gray wash signaling "parked, lower priority".
   Both are inset within their own padded section so the feed
   reads as two clearly distinct zones.
   ============================================================ */

/* Full-width section zones - the bg extends edge-to-edge
   across the feed column. Padding is internal to keep the
   cards inset from the section edges. No panel chrome
   (border-radius/border): the bg color IS the zone. */

.pc-feed-grid[b-bpp81z4tkx] {
    padding: 22px 24px 28px;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.055) 0%, rgba(22, 163, 74, 0.028) 100%);
}

.pc-feed-grid-below[b-bpp81z4tkx] {
    padding: 22px 24px 32px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.030) 0%, rgba(15, 23, 42, 0.018) 100%);
}

/* Whichever zone is last in the feed extends to fill the
   remaining scroll height. Prevents the awkward "green band
   then white canvas" when only the above-line zone renders. */
.pc-feed > .pc-feed-grid:last-child[b-bpp81z4tkx],
.pc-feed > .pc-feed-grid-below:last-child[b-bpp81z4tkx] {
    flex-grow: 1;
    align-content: flex-start;
}


/* ═══════════════════════════════════════════════════════
   RAIL EDIT BUTTON + TIMELINE COMMENT CONTEXT
   ═══════════════════════════════════════════════════════ */

.pc-rail-edit-btn[b-bpp81z4tkx] {
    appearance: none;
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.04);
    color: var(--ws-ink-3, #475569);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .pc-rail-edit-btn:hover[b-bpp81z4tkx] {
        background: #ffffff;
        color: var(--ws-ink-1, #0f172a);
        border-color: rgba(15, 23, 42, 0.22);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .pc-rail-edit-btn i[b-bpp81z4tkx] {
        font-size: 10.5px;
    }


.pc-tl-row-context[b-bpp81z4tkx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--ws-ink-4, #64748b);
    line-height: 1.4;
}

    .pc-tl-row-context i[b-bpp81z4tkx] {
        font-size: 8.5px;
        color: var(--ws-ink-5, #94a3b8);
    }

.pc-tl-row-context-target[b-bpp81z4tkx] {
    font-weight: 500;
    font-style: italic;
    color: var(--ws-ink-2, #334155);
}
/* /Components/ProdComponents/Profile.razor.rz.scp.css */
/* ============================================
   PROFILE PAGE
   Visual language matched to the Billing page
   (shared tokens, radii, spacing, forms, toast).
   Surface/background provided by the page container.
   ============================================ */

.profile-page[b-qb5fs0yj1z] {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: var(--background-secondary);
}

    .profile-page *[b-qb5fs0yj1z] {
        box-sizing: border-box;
    }

.bg-pattern[b-qb5fs0yj1z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}

.profile-wrapper[b-qb5fs0yj1z] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 72px 40px 80px;
    position: relative;
    z-index: 1;
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header[b-qb5fs0yj1z] {
    margin-bottom: 48px;
}

.page-title[b-qb5fs0yj1z] {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 12px 0;
    letter-spacing: -1px;
}

.page-subtitle[b-qb5fs0yj1z] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   LAYOUT
   ============================================ */
.profile-layout[b-qb5fs0yj1z] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
}

.left-column[b-qb5fs0yj1z] {
    position: sticky;
    top: 24px;
    z-index: 10;
}

.sticky-content[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-column[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   PHOTO CARD
   ============================================ */
.photo-card[b-qb5fs0yj1z] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.photo-frame[b-qb5fs0yj1z] {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px dashed var(--border-color);
    background: var(--background-secondary);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

    .photo-frame:hover[b-qb5fs0yj1z] {
        border-color: var(--accent);
    }

    .photo-frame.has-photo[b-qb5fs0yj1z] {
        border-style: solid;
    }

    .photo-frame.uploading[b-qb5fs0yj1z] {
        cursor: default;
    }

.photo-image[b-qb5fs0yj1z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .photo-image.loaded[b-qb5fs0yj1z] {
        opacity: 1;
    }

.photo-placeholder[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
}

    .photo-placeholder i[b-qb5fs0yj1z] {
        font-size: 30px;
    }

.photo-placeholder-text[b-qb5fs0yj1z] {
    font-size: 13px;
    font-weight: 500;
}

.upload-overlay[b-qb5fs0yj1z] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.upload-text[b-qb5fs0yj1z] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.photo-remove[b-qb5fs0yj1z] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

    .photo-remove:hover[b-qb5fs0yj1z] {
        color: #ea4335;
    }

.error-message[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ea4335;
    text-align: center;
}

/* ============================================
   STATS CARD (identity / engagement)
   ============================================ */
.stats-card[b-qb5fs0yj1z] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
}

.stats-title[b-qb5fs0yj1z] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.stat-item[b-qb5fs0yj1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

    /* last-of-type, not last-child: the plan button may follow the final row */
    .stat-item:last-of-type[b-qb5fs0yj1z] {
        border-bottom: none;
    }

.stat-label[b-qb5fs0yj1z] {
    font-size: 13px;
    color: var(--text-tertiary);
}

.stat-value[b-qb5fs0yj1z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.stat-badge[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

    .stat-badge i[b-qb5fs0yj1z] {
        font-size: 10px;
    }

.stat-badge-accent[b-qb5fs0yj1z] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.stat-badge-neutral[b-qb5fs0yj1z] {
    background: var(--background-secondary);
    color: var(--text-tertiary);
}

.btn-link-plan[b-qb5fs0yj1z] {
    width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-link-plan:hover[b-qb5fs0yj1z] {
        border-color: var(--text-tertiary);
        background: var(--background-secondary);
    }

    .btn-link-plan i[b-qb5fs0yj1z] {
        font-size: 11px;
        transition: transform 0.2s ease;
    }

    .btn-link-plan:hover i[b-qb5fs0yj1z] {
        transform: translateX(3px);
    }

/* ============================================
   PRIVACY CARD
   ============================================ */
.privacy-card[b-qb5fs0yj1z] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}

.privacy-notice-title[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

    .privacy-notice-title i[b-qb5fs0yj1z] {
        color: var(--text-tertiary);
        font-size: 14px;
    }

.privacy-notice-text[b-qb5fs0yj1z] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.privacy-link[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

    .privacy-link:hover[b-qb5fs0yj1z] {
        opacity: 0.8;
    }

    .privacy-link i[b-qb5fs0yj1z] {
        font-size: 11px;
    }

/* ============================================
   SECTION CARDS (right column)
   ============================================ */
.section-card[b-qb5fs0yj1z] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 32px;
}

.card-header[b-qb5fs0yj1z] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-title[b-qb5fs0yj1z] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.card-desc[b-qb5fs0yj1z] {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
}

.subsection-label[b-qb5fs0yj1z] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    margin: 28px 0 16px 0;
}

/* ============================================
   ALERT
   ============================================ */
.alert[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
}

.alert-success[b-qb5fs0yj1z] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.alert-error[b-qb5fs0yj1z] {
    background: rgba(234, 67, 53, 0.08);
    color: #ea4335;
}

.alert-icon[b-qb5fs0yj1z] {
    font-weight: 700;
}

.alert-close[b-qb5fs0yj1z] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}

    .alert-close:hover[b-qb5fs0yj1z] {
        opacity: 1;
    }

/* ============================================
   FORMS
   ============================================ */
.form-grid[b-qb5fs0yj1z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-field.full[b-qb5fs0yj1z] {
        grid-column: 1 / -1;
    }

.form-label[b-qb5fs0yj1z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.required[b-qb5fs0yj1z] {
    color: var(--accent);
    font-weight: 700;
}

.badge-readonly[b-qb5fs0yj1z] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    background: var(--background-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.4px;
}

.form-input[b-qb5fs0yj1z],
.form-textarea[b-qb5fs0yj1z] {
    padding: 14px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
    outline: none;
}

    .form-input[b-qb5fs0yj1z]::placeholder,
    .form-textarea[b-qb5fs0yj1z]::placeholder {
        color: var(--text-tertiary);
        opacity: 0.7;
    }

    .form-input:focus[b-qb5fs0yj1z],
    .form-textarea:focus[b-qb5fs0yj1z] {
        border-color: var(--accent);
        background: var(--background-primary);
    }

    .form-input:hover[b-qb5fs0yj1z],
    .form-textarea:hover[b-qb5fs0yj1z] {
        border-color: var(--text-tertiary);
    }

    .form-input.invalid[b-qb5fs0yj1z] {
        border-color: #ea4335;
    }

.form-textarea[b-qb5fs0yj1z] {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

/* Locked read-only value styled like a disabled input */
.form-input.locked[b-qb5fs0yj1z],
.readonly-value[b-qb5fs0yj1z] {
    background: var(--background-secondary);
    color: var(--text-secondary);
    cursor: default;
    display: flex;
    align-items: center;
    min-height: 48px;
}

.field-hint[b-qb5fs0yj1z] {
    font-size: 12px;
    color: var(--text-tertiary);
}

.field-error[b-qb5fs0yj1z] {
    font-size: 12px;
    color: #ea4335;
}

.char-counter[b-qb5fs0yj1z] {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
}

    .char-counter.warning[b-qb5fs0yj1z] {
        color: #f9a825;
    }

/* ============================================
   SAVE / ACTIONS
   ============================================ */
.form-actions[b-qb5fs0yj1z] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.pending-indicator[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-right: auto;
}

.pending-dot[b-qb5fs0yj1z] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f9a825;
}

.btn-save[b-qb5fs0yj1z] {
    padding: 14px 28px;
    background: var(--text-heading);
    color: var(--background-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-qb5fs0yj1z] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .btn-save:disabled[b-qb5fs0yj1z] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ============================================
   COMMUNICATION PREFERENCES
   ============================================ */
.comms-preferences[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comms-group[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
}

.comms-group-title[b-qb5fs0yj1z] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.comms-row[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

    .comms-row:last-child[b-qb5fs0yj1z] {
        border-bottom: none;
    }

    .comms-row.disabled[b-qb5fs0yj1z] {
        opacity: 0.5;
    }

.comms-info[b-qb5fs0yj1z] {
    min-width: 0;
}

.comms-title[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
}

    .comms-title strong[b-qb5fs0yj1z] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

.comms-frequency[b-qb5fs0yj1z] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-tertiary);
    background: var(--background-secondary);
    padding: 2px 8px;
    border-radius: 20px;
}

.comms-desc[b-qb5fs0yj1z] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.comms-toggle[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.comms-footer[b-qb5fs0yj1z] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.comms-footer-row[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.comms-footer-info[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comms-footer-title[b-qb5fs0yj1z] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.comms-footer-desc[b-qb5fs0yj1z] {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Toggle switch */
.toggle[b-qb5fs0yj1z] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle input[b-qb5fs0yj1z] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-qb5fs0yj1z] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--border-color);
    border-radius: 999px;
    transition: background 0.2s ease;
}

    .toggle-slider[b-qb5fs0yj1z]::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background: var(--background-primary);
        border-radius: 50%;
        transition: transform 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

.toggle input:checked + .toggle-slider[b-qb5fs0yj1z] {
    background: var(--accent);
}

    .toggle input:checked + .toggle-slider[b-qb5fs0yj1z]::before {
        transform: translateX(18px);
    }

.toggle input:disabled + .toggle-slider[b-qb5fs0yj1z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.saving-indicator[b-qb5fs0yj1z] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-qb5fs0yj1z 0.8s linear infinite;
}

/* Operational / occasional notices */
.email-preferences-footer[b-qb5fs0yj1z] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.operational-notice[b-qb5fs0yj1z],
.occasional-notice[b-qb5fs0yj1z] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--background-secondary);
}

    .operational-notice i[b-qb5fs0yj1z],
    .occasional-notice i[b-qb5fs0yj1z] {
        font-size: 16px;
        color: var(--text-tertiary);
        margin-top: 2px;
    }

    .operational-notice strong[b-qb5fs0yj1z],
    .occasional-notice strong[b-qb5fs0yj1z] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .operational-notice p[b-qb5fs0yj1z],
    .occasional-notice p[b-qb5fs0yj1z] {
        font-size: 12px;
        color: var(--text-tertiary);
        line-height: 1.5;
        margin: 0;
    }

/* ============================================
   SIGN-IN & SECURITY
   ============================================ */
.security-list[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
}

.security-row[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

    .security-row:last-child[b-qb5fs0yj1z] {
        border-bottom: none;
    }

    .security-row.is-locked[b-qb5fs0yj1z] {
        opacity: 0.75;
    }

.security-info[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.security-title[b-qb5fs0yj1z] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.security-desc[b-qb5fs0yj1z] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.method-badge[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 5px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

    .method-badge i[b-qb5fs0yj1z] {
        font-size: 11px;
    }

.security-actions[b-qb5fs0yj1z] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn-signout[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-signout:hover[b-qb5fs0yj1z] {
        color: #ea4335;
        border-color: rgba(234, 67, 53, 0.3);
        background: rgba(234, 67, 53, 0.05);
    }

/* Shared lock pill */
.lock-pill[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    background: var(--background-secondary);
    padding: 5px 12px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

    .lock-pill i[b-qb5fs0yj1z] {
        font-size: 10px;
    }

/* ============================================
   ORGANIZATION & TEAM (locked placeholder)
   ============================================ */
.org-card.is-locked[b-qb5fs0yj1z] {
    border-style: dashed;
}

.org-card-header[b-qb5fs0yj1z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.org-locked-copy[b-qb5fs0yj1z] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.org-preview[b-qb5fs0yj1z] {
    background: var(--background-secondary);
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 20px;
}

.org-preview-row[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

    .org-preview-row:last-child[b-qb5fs0yj1z] {
        border-bottom: none;
    }

.org-preview-label[b-qb5fs0yj1z] {
    font-size: 13px;
    color: var(--text-tertiary);
}

.org-preview-value[b-qb5fs0yj1z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

    .org-preview-value.muted[b-qb5fs0yj1z] {
        color: var(--text-tertiary);
        font-weight: 500;
    }

.org-actions[b-qb5fs0yj1z] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-org[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--text-heading);
    color: var(--background-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-org:disabled[b-qb5fs0yj1z] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-org-ghost[b-qb5fs0yj1z] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-org i[b-qb5fs0yj1z] {
    font-size: 12px;
}

/* ============================================
   YOUR DATA
   ============================================ */
.data-row[b-qb5fs0yj1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.data-info[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.data-title[b-qb5fs0yj1z] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.data-desc[b-qb5fs0yj1z] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.btn-export[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .btn-export:hover:not(:disabled)[b-qb5fs0yj1z] {
        border-color: var(--text-tertiary);
        background: var(--background-secondary);
    }

    .btn-export:disabled[b-qb5fs0yj1z] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-export i[b-qb5fs0yj1z] {
        font-size: 12px;
    }

/* ============================================
   SPINNER
   ============================================ */
.spinner[b-qb5fs0yj1z] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-qb5fs0yj1z 0.8s linear infinite;
}

.spinner-dark[b-qb5fs0yj1z] {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text-secondary);
}

@keyframes spin-b-qb5fs0yj1z {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   TOAST
   ============================================ */
.toast[b-qb5fs0yj1z] {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 14px 18px;
    background: var(--background-primary);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    max-width: 360px;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .toast.show[b-qb5fs0yj1z] {
        transform: translateX(0);
    }

    .toast.success i[b-qb5fs0yj1z] {
        color: var(--accent);
        font-size: 18px;
    }

    .toast.error i[b-qb5fs0yj1z] {
        color: #ea4335;
        font-size: 18px;
    }

.toast-content[b-qb5fs0yj1z] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .toast-content strong[b-qb5fs0yj1z] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .toast-content span[b-qb5fs0yj1z] {
        font-size: 12px;
        color: var(--text-secondary);
    }

.toast-close[b-qb5fs0yj1z] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    margin: -4px -4px -4px 0;
    transition: color 0.2s ease;
}

    .toast-close:hover[b-qb5fs0yj1z] {
        color: var(--text-primary);
    }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .profile-wrapper[b-qb5fs0yj1z] {
        padding: 56px 32px 80px;
    }

    .profile-layout[b-qb5fs0yj1z] {
        grid-template-columns: 300px 1fr;
        gap: 28px;
    }
}

@media (max-width: 968px) {
    .profile-layout[b-qb5fs0yj1z] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .left-column[b-qb5fs0yj1z] {
        position: static;
    }

    .form-grid[b-qb5fs0yj1z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-wrapper[b-qb5fs0yj1z] {
        padding: 40px 20px 60px;
    }

    .page-title[b-qb5fs0yj1z] {
        font-size: 28px;
    }

    .section-card[b-qb5fs0yj1z] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .toast[b-qb5fs0yj1z] {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .profile-wrapper[b-qb5fs0yj1z] {
        padding: 32px 16px 48px;
    }

    .page-header[b-qb5fs0yj1z] {
        margin-bottom: 32px;
    }

    .page-title[b-qb5fs0yj1z] {
        font-size: 24px;
    }

    .section-card[b-qb5fs0yj1z] {
        padding: 20px 16px;
    }

    .card-title[b-qb5fs0yj1z] {
        font-size: 18px;
    }

    .form-actions[b-qb5fs0yj1z] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pending-indicator[b-qb5fs0yj1z] {
        justify-content: center;
        margin-right: 0;
    }

    .btn-save[b-qb5fs0yj1z] {
        width: 100%;
        justify-content: center;
    }

    .data-row[b-qb5fs0yj1z],
    .comms-footer-row[b-qb5fs0yj1z],
    .security-row[b-qb5fs0yj1z] {
        flex-direction: column;
        align-items: flex-start;
    }

    .org-actions[b-qb5fs0yj1z] {
        flex-direction: column;
    }

    .btn-org[b-qb5fs0yj1z] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   QUALITY FLOOR
   ============================================ */
:focus-visible[b-qb5fs0yj1z] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *[b-qb5fs0yj1z] {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================
   SURFACE LIFT
   Page sits on --background-secondary; white cards
   lift off it with a soft shadow. Adjust the token
   globally to deepen or lighten the tint.
   ============================================ */
.photo-card[b-qb5fs0yj1z],
.stats-card[b-qb5fs0yj1z],
.privacy-card[b-qb5fs0yj1z],
.section-card[b-qb5fs0yj1z] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 16px rgba(0, 0, 0, 0.04);
}


/* ============================================
   INLINE CONFIRMATION (replaces browser confirm)
   ============================================ */
.inline-confirm[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, #ea4335 22%, var(--border-color));
    background: rgba(234, 67, 53, 0.04);
    border-radius: 10px;
}

.inline-confirm-compact[b-qb5fs0yj1z] {
    text-align: center;
}

    .inline-confirm-compact .inline-confirm-text[b-qb5fs0yj1z] {
        align-items: center;
    }

.inline-confirm-text[b-qb5fs0yj1z] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .inline-confirm-text strong[b-qb5fs0yj1z] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .inline-confirm-text span[b-qb5fs0yj1z] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.inline-confirm-actions[b-qb5fs0yj1z] {
    display: flex;
    gap: 8px;
}

.btn-confirm-danger[b-qb5fs0yj1z] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: #ea4335;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-confirm-danger:hover:not(:disabled)[b-qb5fs0yj1z] {
        background: #d33426;
    }

    .btn-confirm-danger:disabled[b-qb5fs0yj1z] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-confirm-ghost[b-qb5fs0yj1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-confirm-ghost:hover:not(:disabled)[b-qb5fs0yj1z] {
        background: var(--background-secondary);
        border-color: var(--text-tertiary);
    }

    .btn-confirm-ghost:disabled[b-qb5fs0yj1z] {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* /Components/ProdComponents/SectionHero.razor.rz.scp.css */
/* ═══════════════════════════════
   SectionHero V3: substantial editorial bar
   Scoped CSS · reused across Personas, Market,
   Competitive, etc.
   ───────────────────────────────
   DESIGN INTENT
   A real bar, not a hairline. The icon tile on
   the left carries the section's identity (the
   same glyph as its tab pill, on a grayscale
   slate ground). Metrics on the right are small
   data tiles, each its own component, separated
   by air rather than dividers. On tab change the
   bar fades and slides up so the section feels
   handed off, not re-painted.
   ═══════════════════════════════ */

.sh-hero[b-u23w6c6c8y] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 5.875rem;
    padding: 1.125rem 1.5rem;
    gap: 1.5rem;
    background: linear-gradient(180deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 94%, var(--surface)) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 2.5rem;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.035);
    animation: shHeroEnter-b-u23w6c6c8y 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── Left: icon + text ── */
.sh-hero-left[b-u23w6c6c8y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.sh-hero-icon[b-u23w6c6c8y] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sh-hero-title-group[b-u23w6c6c8y] {
    min-width: 0;
}

.sh-hero-title[b-u23w6c6c8y] {
    font-family: var(--font);
    font-size: 1.1875rem; /* 19px */
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.022em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-hero-subtitle[b-u23w6c6c8y] {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-5);
    line-height: 1.4;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Right: metric tiles, each its own small component ── */
.sh-hero-metrics[b-u23w6c6c8y] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sh-hero-metric[b-u23w6c6c8y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 78px;
    min-height: 3.5rem;
    padding: 0.625rem 0.9375rem;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    border-radius: 10px;
    text-align: center;
}

.sh-hero-metric-value[b-u23w6c6c8y] {
    font-family: var(--font-mono);
    font-size: 1.375rem; /* 22px */
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sh-hero-metric-label[b-u23w6c6c8y] {
    font-family: var(--font);
    font-size: 0.5625rem; /* 9px */
    font-weight: var(--font-weight-bold);
    color: var(--ink-5);
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

/* ── Busy state ──────────────────────────────────
   Subtitle becomes a status line with a small
   spinner; metric values become a muted dash with
   a staggered pulse. Section is thinking, not
   flashing. */

.sh-hero-busy-status[b-u23w6c6c8y] {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.sh-hero-busy-spinner[b-u23w6c6c8y] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: shHeroSpin-b-u23w6c6c8y 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes shHeroSpin-b-u23w6c6c8y {
    to {
        transform: rotate(360deg);
    }
}

.sh-busy-text[b-u23w6c6c8y] {
    color: var(--ink-6);
    animation: shHeroPulse-b-u23w6c6c8y 1.5s ease-in-out infinite;
}

.sh-hero-metric:nth-child(1) .sh-busy-text[b-u23w6c6c8y] {
    animation-delay: 0s;
}

.sh-hero-metric:nth-child(2) .sh-busy-text[b-u23w6c6c8y] {
    animation-delay: 0.15s;
}

.sh-hero-metric:nth-child(3) .sh-busy-text[b-u23w6c6c8y] {
    animation-delay: 0.30s;
}

.sh-hero-metric:nth-child(4) .sh-busy-text[b-u23w6c6c8y] {
    animation-delay: 0.45s;
}

@keyframes shHeroPulse-b-u23w6c6c8y {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ── Entrance ────────────────────────────────── */

@keyframes shHeroEnter-b-u23w6c6c8y {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sh-busy-text[b-u23w6c6c8y],
    .sh-hero-busy-spinner[b-u23w6c6c8y] {
        animation: none;
        opacity: 0.6;
    }

    .sh-hero[b-u23w6c6c8y] {
        animation: none;
    }
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 768px) {
    .sh-hero[b-u23w6c6c8y] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1.75rem;
    }

    .sh-hero-metrics[b-u23w6c6c8y] {
        justify-content: flex-start;
        padding-top: 1rem;
        border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
        flex-wrap: wrap;
    }

    .sh-hero-metric[b-u23w6c6c8y] {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .sh-hero-title[b-u23w6c6c8y] {
        font-size: 1rem;
    }

    .sh-hero-icon[b-u23w6c6c8y] {
        width: 44px;
        height: 44px;
    }

    .sh-hero-metric-value[b-u23w6c6c8y] {
        font-size: 1.25rem;
    }

    .sh-hero-metric[b-u23w6c6c8y] {
        min-width: 64px;
        padding: 0.5rem 0.75rem;
    }
}
/* /Components/ProdComponents/SignInVerifyResult.razor.rz.scp.css */
/* ========================================================================
   /signin/verify-result — scoped styles
   ------------------------------------------------------------------------
   Matches /signin/email exactly: same shell, same card, same logo
   treatment (bare on the white card, no panel), same button treatments,
   same entry animation. Two icon tints (warn, error) map to the three
   error states.
   ======================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────── */

.mlv-shell[b-y1dy16ijld] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: radial-gradient(ellipse at 20% 10%, rgba(244, 8, 155, 0.04) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(244, 8, 155, 0.03) 0%, transparent 60%), #f3f0ec;
    font-family: var(--font-family-primary, 'Inter', system-ui, sans-serif);
    color: var(--ink, #0f172a);
}

/* ── Card ──────────────────────────────────────────────────────────── */

.mlv-card[b-y1dy16ijld] {
    max-width: 440px;
    width: 100%;
    background: #ffffff;
    border-radius: var(--radius-xl, 1rem);
    padding: 48px 40px 40px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(15, 23, 42, 0.08);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mlv-card--entered[b-y1dy16ijld] {
    opacity: 1;
    transform: translateY(0);
}

/* ── Logo ──────────────────────────────────────────────────────────── */
/* Bare on the white card, matching /signin/email. No dark panel: the
   wordmark's dark element is unreadable on a dark fill, and the request
   page already renders this asset directly on white. */

.mlv-logo-link[b-y1dy16ijld] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    transition: transform 0.18s ease;
}

    .mlv-logo-link:hover[b-y1dy16ijld] {
        transform: translateY(-1px);
    }

    .mlv-logo-link:focus-visible[b-y1dy16ijld] {
        outline: 2px solid var(--accent, #f00c71);
        outline-offset: 3px;
    }

.mlv-logo[b-y1dy16ijld] {
    height: 32px;
    width: auto;
    display: block;
}

/* ── Icon badges ───────────────────────────────────────────────────── */

.mlv-icon[b-y1dy16ijld] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    position: relative;
}

    .mlv-icon[b-y1dy16ijld]::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0.5;
        z-index: -1;
    }

.mlv-icon--warn[b-y1dy16ijld] {
    background: #fef3c7;
    color: #b45309;
}

    .mlv-icon--warn[b-y1dy16ijld]::before {
        background: #fef9c3;
    }

.mlv-icon--error[b-y1dy16ijld] {
    background: #fef2f2;
    color: #dc2626;
}

    .mlv-icon--error[b-y1dy16ijld]::before {
        background: #fee2e2;
    }

/* ── Typography ────────────────────────────────────────────────────── */

.mlv-title[b-y1dy16ijld] {
    font-family: 'Space Grotesk', var(--font-family-primary), system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink, #0f172a);
}

.mlv-body[b-y1dy16ijld] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-4, #475569);
    margin: 0 auto 28px;
    max-width: 360px;
}

/* ── Actions ───────────────────────────────────────────────────────── */

.mlv-actions[b-y1dy16ijld] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.mlv-btn[b-y1dy16ijld] {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--font-family-primary, 'Inter', system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    appearance: none;
    border: none;
    outline: none;
    box-sizing: border-box;
    letter-spacing: -0.005em;
}

    .mlv-btn:focus-visible[b-y1dy16ijld] {
        outline: 2px solid var(--accent, #f00c71);
        outline-offset: 3px;
    }

    .mlv-btn i[b-y1dy16ijld] {
        font-size: 0.95em;
        opacity: 0.9;
    }

.mlv-btn--primary[b-y1dy16ijld] {
    color: #ffffff;
    background: linear-gradient(135deg, #f4089b 0%, #c80670 100%);
    box-shadow: 0 4px 14px rgba(240, 12, 113, 0.22);
}

    .mlv-btn--primary:hover[b-y1dy16ijld] {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(240, 12, 113, 0.32);
    }

    .mlv-btn--primary:active[b-y1dy16ijld] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(240, 12, 113, 0.24);
    }

.mlv-btn--ghost[b-y1dy16ijld] {
    color: var(--ink-2, #1e293b);
    background: transparent;
    border: 1.5px solid var(--border-strong, #d0d5dd);
}

    .mlv-btn--ghost:hover[b-y1dy16ijld] {
        border-color: var(--ink-3, #334155);
        background: var(--surface, #f8f9fa);
        transform: translateY(-1px);
    }

    .mlv-btn--ghost:active[b-y1dy16ijld] {
        transform: translateY(0);
    }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .mlv-shell[b-y1dy16ijld] {
        padding: 20px 16px;
    }

    .mlv-card[b-y1dy16ijld] {
        padding: 36px 24px 28px;
        border-radius: 12px;
    }

    .mlv-title[b-y1dy16ijld] {
        font-size: 1.45rem;
    }

    .mlv-body[b-y1dy16ijld] {
        font-size: 0.9rem;
    }

    .mlv-logo-link[b-y1dy16ijld] {
        margin-bottom: 24px;
    }
}
/* /Components/ProdComponents/ToastNotification.razor.rz.scp.css */
.toast-container[b-ru55i4rbgp] {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 90%;
    max-width: 480px;
    pointer-events: none;
}

.toast[b-ru55i4rbgp] {
    background: var(--background-primary);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px var(--shadow-color-light), 0 0 0 1px var(--border-color);
    pointer-events: auto;
    animation: fadeIn-b-ru55i4rbgp 0.2s ease-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.toast-removing[b-ru55i4rbgp] {
    animation: fadeOut-b-ru55i4rbgp 0.3s ease-out forwards;
}

.toast[b-ru55i4rbgp]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.15;
}

.toast-info[b-ru55i4rbgp]::after {
    background: var(--primary-blue);
}

.toast-success[b-ru55i4rbgp]::after {
    background: var(--color-success);
}

.toast-warning[b-ru55i4rbgp]::after {
    background: var(--primary-yellow);
}

.toast-error[b-ru55i4rbgp]::after {
    background: var(--primary-red);
}

.toast:hover[b-ru55i4rbgp] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 12px 48px var(--shadow-color), 0 0 0 1px var(--border-strong);
}

.toast-icon[b-ru55i4rbgp] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast:hover .toast-icon[b-ru55i4rbgp] {
    transform: scale(1.05);
}

.toast-info .toast-icon[b-ru55i4rbgp] {
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.08));
    color: var(--primary-blue);
}

.toast-success .toast-icon[b-ru55i4rbgp] {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.15), rgba(34, 139, 34, 0.08));
    color: var(--color-success);
}

.toast-warning .toast-icon[b-ru55i4rbgp] {
    background: linear-gradient(135deg, rgba(251, 188, 4, 0.15), rgba(251, 188, 4, 0.08));
    color: #e69500;
}

.toast-error .toast-icon[b-ru55i4rbgp] {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.15), rgba(234, 67, 53, 0.08));
    color: var(--primary-red);
}

.toast-content[b-ru55i4rbgp] {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.toast-title[b-ru55i4rbgp] {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 4px;
    letter-spacing: var(--letter-spacing-normal);
}

.toast-message[b-ru55i4rbgp] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.toast-close[b-ru55i4rbgp] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin-top: -2px;
    z-index: 2;
}

    .toast-close:hover[b-ru55i4rbgp] {
        background: var(--background-tertiary);
        color: var(--text-primary);
        transform: rotate(90deg);
    }

    .toast-close:active[b-ru55i4rbgp] {
        transform: rotate(90deg) scale(0.95);
    }

/* Circular progress ring */
.toast-progress-ring[b-ru55i4rbgp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.toast-progress-bg[b-ru55i4rbgp] {
    fill: none;
}

.toast-progress-bar[b-ru55i4rbgp] {
    fill: none;
    stroke-width: 3;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation-name: drawCircle-b-ru55i4rbgp;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 0.2;
}

.toast-info .toast-progress-bar[b-ru55i4rbgp] {
    stroke: var(--primary-blue);
}

.toast-success .toast-progress-bar[b-ru55i4rbgp] {
    stroke: var(--color-success);
}

.toast-warning .toast-progress-bar[b-ru55i4rbgp] {
    stroke: var(--primary-yellow);
}

.toast-error .toast-progress-bar[b-ru55i4rbgp] {
    stroke: var(--primary-red);
}

@keyframes fadeIn-b-ru55i4rbgp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut-b-ru55i4rbgp {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes drawCircle-b-ru55i4rbgp {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 1000;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .toast-container[b-ru55i4rbgp] {
        top: 16px;
        width: calc(100% - 32px);
        max-width: none;
    }

    .toast[b-ru55i4rbgp] {
        padding: 16px 18px;
    }

    .toast-icon[b-ru55i4rbgp] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/ProductPerformanceDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   AINNA PRODUCT ANALYTICS DASHBOARD — DARK THEME
   ═══════════════════════════════════════════════════ */

.analytics-dashboard[b-lyfk5u0dy2] {
    --bg: #0f1117;
    --card: #1a1d27;
    --card-border: #2a2d3a;
    --card-inner: #141720;
    --text: #e8eaed;
    --text2: #9498ad;
    --text3: #7a7f94;
    --accent: #6366f1;
    --green: #10b981;
    --amber: #f59e0b;
    --red: #ef4444;
    --font: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --toolbar-h: 48px; /* adjust to match your app's global nav height */

    height: 100%;
    overflow-y: auto;
    background: var(--bg);
    padding: 14px 20px;
    font-family: var(--font);
    color: var(--text);
}

.dashboard-inner[b-lyfk5u0dy2] {
    max-width: 1360px;
    margin: 0 auto;
}

/* ── HEADER ── */
.dashboard-header[b-lyfk5u0dy2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
}

.header-left[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .header-left h1[b-lyfk5u0dy2] {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: var(--text);
    }

.header-right[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tab-btn[b-lyfk5u0dy2] {
    padding: 5px 14px;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text2);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font);
}

    .tab-btn.active[b-lyfk5u0dy2] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .tab-btn:hover:not(.active)[b-lyfk5u0dy2] {
        background: var(--card);
    }

.refresh-btn[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--text2);
    cursor: pointer;
    font-size: 11px;
    margin-left: 6px;
}

    .refresh-btn:hover:not(:disabled)[b-lyfk5u0dy2] {
        background: var(--card-border);
    }

    .refresh-btn:disabled[b-lyfk5u0dy2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .refresh-btn.loading i[b-lyfk5u0dy2] {
        animation: spin-b-lyfk5u0dy2 1s linear infinite;
    }

@keyframes spin-b-lyfk5u0dy2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.last-updated[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
}

.loading-state[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text2);
    gap: 10px;
    font-size: 14px;
}

/* ── SHARED SECTION STYLES ── */
.section-card[b-lyfk5u0dy2] {
    padding: 8px 10px;
    background: var(--card);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    margin-bottom: 10px;
}

.section-label[b-lyfk5u0dy2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.click-hint[b-lyfk5u0dy2] {
    font-weight: 400;
    text-transform: none;
    margin-left: 8px;
    font-size: 10px;
}

/* ── TILE SYSTEM ── */
.tile-row[b-lyfk5u0dy2] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tile[b-lyfk5u0dy2] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: var(--card);
    border-radius: 5px;
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    min-width: 72px;
}

    .tile.success[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.05);
        border-color: rgba(16, 185, 129, 0.1);
    }

    .tile.warning[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.05);
        border-color: rgba(245, 158, 11, 0.1);
    }

    .tile.danger[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.05);
        border-color: rgba(239, 68, 68, 0.1);
    }

        /* Semantic dot indicator */
        .tile.success[b-lyfk5u0dy2]::after, .tile.warning[b-lyfk5u0dy2]::after, .tile.danger[b-lyfk5u0dy2]::after {
            content: '';
            position: absolute;
            top: 5px;
            right: 6px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            opacity: 0.6;
        }

    .tile.success[b-lyfk5u0dy2]::after {
        background: var(--green);
    }

    .tile.warning[b-lyfk5u0dy2]::after {
        background: var(--amber);
    }

    .tile.danger[b-lyfk5u0dy2]::after {
        background: var(--red);
    }

.tile-value[b-lyfk5u0dy2] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tile-label[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.tile-sub[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
}

/* ── HERO PANEL ── */
.hero-panel[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #141720, #1e2033);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.hero-number[b-lyfk5u0dy2] {
    flex-shrink: 0;
    text-align: center;
}

.hero-value[b-lyfk5u0dy2] {
    font-size: 54px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -2px;
}

.hero-label[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-paying[b-lyfk5u0dy2] {
    font-size: 20px;
    font-weight: 800;
    color: var(--green);
    margin-top: 4px;
    letter-spacing: -0.5px;
}

.hero-divider[b-lyfk5u0dy2] {
    width: 1px;
    height: 50px;
    background: var(--card-border);
    flex-shrink: 0;
}

.hero-tiles[b-lyfk5u0dy2] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
}

/* ── FUNNEL ── */
.funnel-section[b-lyfk5u0dy2] {
    margin-bottom: 12px;
    padding: 12px 14px;
}

.funnel-wrapper[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.funnel-top-labels[b-lyfk5u0dy2], .funnel-bottom-labels[b-lyfk5u0dy2] {
    display: flex;
    gap: 4px;
}

.funnel-top-cell[b-lyfk5u0dy2], .funnel-bottom-cell[b-lyfk5u0dy2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.funnel-top-cell[b-lyfk5u0dy2] {
    justify-content: flex-end;
    min-height: 40px;
}

.funnel-bottom-cell[b-lyfk5u0dy2] {
    justify-content: flex-start;
    min-height: 28px;
}

.funnel-count[b-lyfk5u0dy2] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.funnel-stage-label[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.funnel-pct[b-lyfk5u0dy2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

.funnel-drop[b-lyfk5u0dy2] {
    font-size: 9px;
    color: var(--text3);
}

.funnel-svg-wrap[b-lyfk5u0dy2] {
    height: 56px;
}

.funnel-svg[b-lyfk5u0dy2] {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── PERIOD TABS ── */
.hard-refresh-btn[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--text2);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    margin-left: 6px;
}

    .hard-refresh-btn:hover:not(:disabled)[b-lyfk5u0dy2] {
        background: var(--card-border);
        color: var(--text);
    }

    .hard-refresh-btn:disabled[b-lyfk5u0dy2] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .hard-refresh-btn.loading i[b-lyfk5u0dy2] {
        animation: spin-b-lyfk5u0dy2 1s linear infinite;
    }

/* ── TWO-COL LAYOUT ── */
.two-col-row[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* ── EMAIL BY PROGRAM ── */
.email-program-list[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.email-program-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    background: rgba(20, 23, 32, 0.4);
    border-radius: 3px;
    font-size: 11px;
}

.email-program-name[b-lyfk5u0dy2] {
    color: var(--text2);
}

.email-program-count[b-lyfk5u0dy2] {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    margin-right: 10px;
}

.email-program-lt[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
}

/* ── USERS PANEL: Split layout ── */
.users-panel[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    top: var(--toolbar-h);
    z-index: 10;
    height: calc(100vh - var(--toolbar-h) - 10px);
    min-height: 400px;
}

.users-list-col[b-lyfk5u0dy2], .users-detail-col[b-lyfk5u0dy2] {
    min-height: 0;
    overflow: hidden;
}

/* Search bar */
.user-search-bar[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: var(--card-inner);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin-bottom: 6px;
}

    .user-search-bar > i[b-lyfk5u0dy2] {
        color: var(--text3);
        font-size: 11px;
    }

.user-search-input[b-lyfk5u0dy2] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 5px 4px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    font-family: var(--font);
    min-width: 0;
}

    .user-search-input[b-lyfk5u0dy2]::placeholder {
        color: var(--text3);
    }

.user-search-clear[b-lyfk5u0dy2] {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
}

    .user-search-clear:hover[b-lyfk5u0dy2] {
        color: var(--text2);
    }

.user-sort-bar[b-lyfk5u0dy2] {
    display: flex;
    gap: 2px;
    padding: 0 0 6px 0;
}

.sort-btn[b-lyfk5u0dy2] {
    flex: 1;
    padding: 3px 6px;
    background: var(--card-inner);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    color: var(--text3);
    font-size: 9px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

    .sort-btn:hover[b-lyfk5u0dy2] {
        color: var(--text2);
        border-color: var(--text3);
    }

    .sort-btn.active[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.12);
        color: var(--accent);
        border-color: var(--accent);
    }

.user-search-go[b-lyfk5u0dy2] {
    padding: 4px 10px;
    background: var(--accent);
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}

    .user-search-go:disabled[b-lyfk5u0dy2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.user-table-scroll[b-lyfk5u0dy2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    .user-table-scroll[b-lyfk5u0dy2]::-webkit-scrollbar {
        width: 5px;
    }

    .user-table-scroll[b-lyfk5u0dy2]::-webkit-scrollbar-track {
        background: var(--card-inner);
    }

    .user-table-scroll[b-lyfk5u0dy2]::-webkit-scrollbar-thumb {
        background: var(--card-border);
        border-radius: 3px;
    }

/* USER TABLE */
.user-table-header[b-lyfk5u0dy2], .user-table-row[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: 24px 1.4fr 48px 64px 22px 36px 44px 24px 24px 36px 40px 18px;
    gap: 3px;
    align-items: center;
    padding: 4px 4px;
}

.user-table-header[b-lyfk5u0dy2] {
    font-size: 9px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    background: var(--card-inner);
    border-radius: 3px;
    margin-bottom: 2px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.user-table-row[b-lyfk5u0dy2] {
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--card-border);
    transition: background 0.12s;
}

    .user-table-row:hover[b-lyfk5u0dy2] {
        background: #1e2235;
    }

    .user-table-row.selected[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.12);
        border-left: 2px solid var(--accent);
    }

    .user-table-row.top-three[b-lyfk5u0dy2] {
        background: rgba(23, 25, 36, 0.18);
    }

.ucol[b-lyfk5u0dy2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucol-rank[b-lyfk5u0dy2] {
    text-align: center;
    font-size: 11px;
    color: var(--text3);
}

.ucol-name[b-lyfk5u0dy2] {
    font-weight: 600;
    font-size: 12px;
}

.ucol-joined[b-lyfk5u0dy2] {
    font-size: 11px;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

.ucol-plan[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
}

.ucol-last[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .ucol-last.stale[b-lyfk5u0dy2] {
        color: var(--red);
        opacity: 0.7;
    }

.last-seen-badge[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .last-seen-badge i[b-lyfk5u0dy2] {
        font-size: 8px;
        color: var(--green);
    }

    .last-seen-badge.stale[b-lyfk5u0dy2] {
        color: var(--text3);
    }

        .last-seen-badge.stale i[b-lyfk5u0dy2] {
            color: var(--red);
        }

.plan-cell[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .plan-cell[b-lyfk5u0dy2]::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .plan-cell.plan-active[b-lyfk5u0dy2]::before {
        background: var(--green);
    }

    .plan-cell.plan-expired[b-lyfk5u0dy2]::before {
        background: var(--red);
        opacity: 0.7;
    }

    .plan-cell.plan-expired[b-lyfk5u0dy2] {
        color: var(--text3);
    }

    .plan-cell.plan-inactive[b-lyfk5u0dy2]::before {
        background: var(--red);
        opacity: 0.5;
    }

    .plan-cell.plan-inactive[b-lyfk5u0dy2] {
        color: var(--text3);
        text-decoration: line-through;
        opacity: 0.6;
    }

    .plan-cell.plan-unknown[b-lyfk5u0dy2]::before {
        background: var(--text3);
        opacity: 0.4;
    }

.ucol-num[b-lyfk5u0dy2] {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

.ucol-score-val[b-lyfk5u0dy2] {
    font-weight: 600;
}

.ucol-ind[b-lyfk5u0dy2] {
    text-align: center;
}

.ucol-exp[b-lyfk5u0dy2] {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ucol-note[b-lyfk5u0dy2] {
    text-align: center;
    font-size: 10px;
}

.note-icon[b-lyfk5u0dy2] {
    color: var(--accent);
    opacity: 0.6;
    font-size: 10px;
    cursor: help;
}

    .note-icon:hover[b-lyfk5u0dy2] {
        opacity: 1;
    }

/* Detail empty state */
.detail-empty[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text3);
    gap: 12px;
    font-size: 13px;
}

    .detail-empty i[b-lyfk5u0dy2] {
        font-size: 32px;
        opacity: 0.3;
    }

.detail-empty-hint[b-lyfk5u0dy2] {
    font-size: 11px;
    color: var(--text3);
    opacity: 0.6;
}

/* Expiration coloring */
.exp-active[b-lyfk5u0dy2] {
    color: var(--green);
}

.exp-expiring[b-lyfk5u0dy2] {
    color: var(--amber);
}

.exp-expired[b-lyfk5u0dy2] {
    color: var(--red);
}

/* Peak Depth bars */
.depth-bars[b-lyfk5u0dy2] {
    display: inline-flex;
    gap: 1px;
    align-items: flex-end;
}

    .depth-bars .bar[b-lyfk5u0dy2] {
        width: 4px;
        border-radius: 1px;
        display: inline-block;
        background: var(--card-border);
    }

    .depth-bars .bar1[b-lyfk5u0dy2] {
        height: 5px;
    }

    .depth-bars .bar2[b-lyfk5u0dy2] {
        height: 9px;
    }

    .depth-bars .bar3[b-lyfk5u0dy2] {
        height: 13px;
    }

.depth-deep .bar1[b-lyfk5u0dy2], .depth-deep .bar2[b-lyfk5u0dy2], .depth-deep .bar3[b-lyfk5u0dy2] {
    background: var(--green);
}

.depth-moderate .bar1[b-lyfk5u0dy2], .depth-moderate .bar2[b-lyfk5u0dy2] {
    background: var(--amber);
}

.depth-shallow .bar1[b-lyfk5u0dy2] {
    background: #64748b;
}

/* Current State dot */
.state-dot[b-lyfk5u0dy2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.state-active[b-lyfk5u0dy2] {
    background: var(--green);
}

.state-idle[b-lyfk5u0dy2] {
    background: var(--amber);
}

.state-exploring[b-lyfk5u0dy2] {
    background: #3b82f6;
}

.state-abandoned[b-lyfk5u0dy2] {
    background: var(--red);
}

/* Tag badge */
.tag-badge[b-lyfk5u0dy2] {
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 9px;
    color: var(--accent);
}

.no-data[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text3);
    gap: 8px;
    font-size: 13px;
}

/* ── USER JOURNEY (inside detail column) ── */
.journey-search[b-lyfk5u0dy2] {
    margin-bottom: 14px;
}

.search-input-group[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-inner);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 4px 4px 4px 12px;
}

    .search-input-group > i[b-lyfk5u0dy2] {
        color: var(--text3);
        font-size: 13px;
    }

.journey-input[b-lyfk5u0dy2] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 13px;
    color: var(--text);
    outline: none;
    font-family: var(--font);
}

    .journey-input[b-lyfk5u0dy2]::placeholder {
        color: var(--text3);
    }

.journey-search-btn[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    font-family: var(--font);
}

    .journey-search-btn:hover:not(:disabled)[b-lyfk5u0dy2] {
        background: #5558e6;
    }

    .journey-search-btn:disabled[b-lyfk5u0dy2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.journey-error[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color: var(--red);
    font-size: 12px;
}

.journey-user-header[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, var(--card-inner), var(--card));
    border: 1px solid var(--card-border);
    border-radius: 6px;
    margin-bottom: 10px;
}

.journey-user-info[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.journey-user-avatar[b-lyfk5u0dy2] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.journey-user-name[b-lyfk5u0dy2] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.journey-user-meta[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text2);
    margin-top: 3px;
}

    .journey-user-meta span[b-lyfk5u0dy2] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .journey-user-meta i[b-lyfk5u0dy2] {
        font-size: 10px;
        color: var(--text3);
    }

.plan-badge[b-lyfk5u0dy2] {
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
    border-radius: 10px;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
}

.status-badge[b-lyfk5u0dy2] {
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 9px;
    text-transform: uppercase;
}

    .status-badge.active[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.15);
        color: var(--green);
    }

    .status-badge.idle[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.15);
        color: var(--amber);
    }

    .status-badge.exploring[b-lyfk5u0dy2] {
        background: rgba(100, 116, 139, 0.15);
        color: var(--text2);
    }

    .status-badge.abandoned[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.15);
        color: var(--red);
    }

.plan-status-badge[b-lyfk5u0dy2] {
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 9px;
    text-transform: uppercase;
}

    .plan-status-badge.plan-active[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.12);
        color: var(--green);
    }

    .plan-status-badge.plan-expired[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.12);
        color: var(--red);
    }

    .plan-status-badge.plan-inactive[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.12);
        color: var(--red);
    }

    .plan-status-badge.plan-unknown[b-lyfk5u0dy2] {
        background: rgba(100, 116, 139, 0.12);
        color: var(--text3);
    }

.journey-user-stats[b-lyfk5u0dy2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
}

.journey-stat[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
}

.journey-stat-value[b-lyfk5u0dy2] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.journey-stat-label[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text2);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Admin Tag Editor ── */
/* Admin PIN in header */
.admin-pin[b-lyfk5u0dy2] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    color: var(--amber);
    opacity: 0.6;
    letter-spacing: 3px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
    padding: 2px 6px;
    border: 1px dashed rgba(245, 158, 11, 0.25);
    border-radius: 3px;
}

/* Admin panel toggle */
.admin-panel-toggle[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
    cursor: pointer;
    border-bottom: 1px solid var(--card-border);
    transition: background 0.15s;
}

    .admin-panel-toggle:hover[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.06);
    }

    .admin-panel-toggle i:first-child[b-lyfk5u0dy2] {
        font-size: 10px;
        color: var(--amber);
    }

    .admin-panel-toggle .toggle-arrow[b-lyfk5u0dy2] {
        margin-left: auto;
        font-size: 9px;
        color: var(--text3);
    }

/* Admin panel container — responsive card grid */
.admin-panel[b-lyfk5u0dy2] {
    padding: 8px;
    border-bottom: 1px solid var(--card-border);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: rgba(245, 158, 11, 0.04);
    border-left: 2px solid rgba(245, 158, 11, 0.2);
}

/* ═══════════════════════════════════════════════════
   VISITORS TAB
   ═══════════════════════════════════════════════════ */

/* ── Visitor count badge in section label ── */
.visitor-count-badge[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

/* ── Visitor table ── */
.visitor-table-header[b-lyfk5u0dy2],
.visitor-table-row[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: 28px 1fr 60px 36px 64px minmax(60px, 90px) 40px 24px;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    font-size: 11px;
}

.visitor-table-header[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 6px 4px;
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
}

.visitor-table-row[b-lyfk5u0dy2] {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(42, 45, 58, 0.4);
    cursor: pointer;
    transition: background 0.15s;
}

    .visitor-table-row:hover[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.06);
    }

    .visitor-table-row.selected[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.12);
        border-left: 2px solid var(--accent);
    }

    .visitor-table-row.prospect-row[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.04);
    }

        .visitor-table-row.prospect-row:hover[b-lyfk5u0dy2] {
            background: rgba(245, 158, 11, 0.08);
        }

.vcol[b-lyfk5u0dy2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vcol-rank[b-lyfk5u0dy2] {
    text-align: center;
    color: var(--text3);
    font-size: 10px;
}

.vcol-id[b-lyfk5u0dy2] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    color: var(--text2);
}

.vcol-when[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
}

.vcol-events[b-lyfk5u0dy2] {
    text-align: center;
    font-weight: 600;
}

.vcol-depth[b-lyfk5u0dy2] {
    text-align: center;
}

.vcol-signals[b-lyfk5u0dy2] {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.vcol-dur[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    text-align: center;
}

.vcol-device[b-lyfk5u0dy2] {
    text-align: center;
    color: var(--text3);
    font-size: 11px;
}

.visitor-id-text[b-lyfk5u0dy2] {
    letter-spacing: -0.3px;
}

/* ── Depth badges ── */
.visitor-depth-badge[b-lyfk5u0dy2] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.depth-phantom[b-lyfk5u0dy2] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.depth-glancer[b-lyfk5u0dy2] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.depth-curious[b-lyfk5u0dy2] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.depth-prospect[b-lyfk5u0dy2] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* ── Anonymous row styling ── */
.anonymous-row[b-lyfk5u0dy2] {
    opacity: 0.8;
}

    .anonymous-row:hover[b-lyfk5u0dy2] {
        opacity: 1;
    }

    .anonymous-row.selected[b-lyfk5u0dy2] {
        opacity: 1;
    }

.anon-id-text[b-lyfk5u0dy2] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    color: var(--text3);
    letter-spacing: -0.3px;
}

.anon-icon[b-lyfk5u0dy2] {
    color: var(--text3);
    margin-right: 3px;
    font-size: 10px;
}

.anon-ghost[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 10px;
}

.anon-signals[b-lyfk5u0dy2] {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* ── Signal icons ── */
.signal-icon[b-lyfk5u0dy2] {
    font-size: 11px;
    opacity: 0.7;
}

.signal-pricing[b-lyfk5u0dy2] {
    color: var(--accent);
}

.signal-faq[b-lyfk5u0dy2] {
    color: #8b5cf6;
}

.signal-signup[b-lyfk5u0dy2] {
    color: #f59e0b;
}

.signal-enterprise[b-lyfk5u0dy2] {
    color: #10b981;
}

/* ── Copy analysis button ── */
.copy-analysis-btn[b-lyfk5u0dy2] {
    float: right;
    padding: 3px 10px;
    font-size: 10px;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .copy-analysis-btn:hover[b-lyfk5u0dy2] {
        background: var(--card-border);
        color: var(--text);
    }

    .copy-analysis-btn .fa-check[b-lyfk5u0dy2] {
        color: var(--green);
    }

/* ── Visitor depth bar (horizontal stacked) ── */
.visitor-depth-bar[b-lyfk5u0dy2] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    gap: 1px;
}

.depth-segment[b-lyfk5u0dy2] {
    min-width: 2px;
    transition: width 0.3s ease;
}

    .depth-segment.phantom[b-lyfk5u0dy2] {
        background: #64748b;
    }

    .depth-segment.glancer[b-lyfk5u0dy2] {
        background: #3b82f6;
    }

    .depth-segment.curious[b-lyfk5u0dy2] {
        background: #8b5cf6;
    }

    .depth-segment.prospect[b-lyfk5u0dy2] {
        background: #f59e0b;
    }

/* ── Signup abandonment note ── */
.signup-abandonment-note[b-lyfk5u0dy2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.06);
    border-left: 2px solid rgba(245, 158, 11, 0.3);
    font-size: 11px;
    color: var(--text2);
    line-height: 1.5;
}

    .signup-abandonment-note i[b-lyfk5u0dy2] {
        color: var(--amber);
        margin-top: 2px;
        flex-shrink: 0;
    }

/* ── Visitor journey header ── */
.visitor-journey-header[b-lyfk5u0dy2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid var(--card-border);
    gap: 12px;
}

.visitor-journey-info[b-lyfk5u0dy2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.visitor-avatar[b-lyfk5u0dy2] {
    background: rgba(100, 116, 139, 0.2) !important;
    color: var(--text3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.visitor-corr-id[b-lyfk5u0dy2] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    color: var(--text3);
}

.copy-corr-btn[b-lyfk5u0dy2] {
    padding: 1px 5px;
    margin-left: 3px;
    font-size: 9px;
    border-radius: 3px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
}

    .copy-corr-btn:hover[b-lyfk5u0dy2] {
        background: var(--card-border);
        color: var(--text);
    }

    .copy-corr-btn .fa-check[b-lyfk5u0dy2] {
        color: var(--green);
    }

/* ── User IDs row (userId + correlationId) ── */
.user-ids-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--card-border);
    background: var(--card-inner);
    font-size: 10px;
}

.user-id-item[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.user-id-label[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-id-value[b-lyfk5u0dy2] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text2);
    font-size: 10px;
    letter-spacing: -0.3px;
}

/* ── FAQ topic badges ── */
.visitor-faq-summary[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--card-border);
    font-size: 11px;
}

.faq-summary-label[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 10px;
    white-space: nowrap;
}

    .faq-summary-label i[b-lyfk5u0dy2] {
        color: #8b5cf6;
        margin-right: 3px;
    }

.faq-topic-badge[b-lyfk5u0dy2] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    font-size: 10px;
    font-weight: 500;
}

/* ── Visitor signal alerts ── */
.visitor-signal-alert[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    border-bottom: 1px solid var(--card-border);
}

.prospect-alert[b-lyfk5u0dy2] {
    background: rgba(245, 158, 11, 0.05);
    color: var(--amber);
}

    .prospect-alert span[b-lyfk5u0dy2] {
        color: var(--text2);
    }

/* ── Drop-off analysis ── */
.visitor-dropoff[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--card-border);
    background: rgba(239, 68, 68, 0.04);
    font-size: 11px;
}

.dropoff-label[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 10px;
    white-space: nowrap;
}

.dropoff-event[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--red);
    font-weight: 500;
}

    .dropoff-event .evt-path[b-lyfk5u0dy2] {
        color: var(--text2);
        font-weight: 400;
    }

.dropoff-time[b-lyfk5u0dy2] {
    margin-left: auto;
    color: var(--text3);
    font-size: 10px;
}

/* ── Drop-off highlight in timeline ── */
.evt-row.dropoff-highlight[b-lyfk5u0dy2] {
    background: rgba(239, 68, 68, 0.06);
    border-left: 2px solid var(--red);
}

/* ── Danger tile variant ── */
.tile.danger .tile-value[b-lyfk5u0dy2] {
    color: var(--red);
}

@media (max-width: 900px) {
    .admin-panel[b-lyfk5u0dy2] {
        grid-template-columns: 1fr;
    }
}

/* Action card — vertical mini-card */
.action-card[b-lyfk5u0dy2] {
    background: var(--card-inner);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s;
    min-width: 0;
}

    .action-card:hover[b-lyfk5u0dy2] {
        border-color: rgba(245, 158, 11, 0.3);
    }

    .action-card.warn[b-lyfk5u0dy2] {
        border-top: 2px solid rgba(239, 68, 68, 0.4);
    }

    .action-card.disabled[b-lyfk5u0dy2] {
        opacity: 0.35;
        pointer-events: none;
    }

.action-card-icon[b-lyfk5u0dy2] {
    font-size: 14px;
    color: var(--text3);
}

.action-card.warn .action-card-icon[b-lyfk5u0dy2] {
    color: var(--red);
}

.action-card-title[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.action-card-status[b-lyfk5u0dy2] {
    font-size: 9px;
    color: var(--text3);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-input[b-lyfk5u0dy2] {
    width: 100%;
    padding: 4px 6px;
    font-size: 10px;
    font-family: var(--font);
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    text-align: center;
}

    .action-input[b-lyfk5u0dy2]::placeholder {
        color: var(--text3);
    }

    .action-input:focus[b-lyfk5u0dy2] {
        border-color: var(--accent);
    }

    .action-input:disabled[b-lyfk5u0dy2] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* PIN input */
.pin-input[b-lyfk5u0dy2] {
    width: 52px;
    padding: 4px 4px;
    font-size: 11px;
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: 3px;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--amber);
    border-radius: 3px;
    color: var(--amber);
    outline: none;
}

    .pin-input:focus[b-lyfk5u0dy2] {
        border-color: var(--green);
        color: var(--green);
    }

.action-btn-row[b-lyfk5u0dy2] {
    display: flex;
    gap: 3px;
}

/* Trigger button */
.action-trigger[b-lyfk5u0dy2] {
    width: 100%;
    padding: 4px 8px;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

    .action-trigger:hover:not(:disabled)[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.2);
    }

    .action-trigger:disabled[b-lyfk5u0dy2] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .action-trigger.danger[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--red);
        border-color: rgba(239, 68, 68, 0.25);
    }

        .action-trigger.danger:hover:not(:disabled)[b-lyfk5u0dy2] {
            background: rgba(239, 68, 68, 0.18);
        }

    .action-trigger.warn[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--amber);
        border-color: rgba(245, 158, 11, 0.25);
    }

        .action-trigger.warn:hover:not(:disabled)[b-lyfk5u0dy2] {
            background: rgba(245, 158, 11, 0.18);
        }

/* Extend: day count input */
.action-day-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .action-day-row .action-days[b-lyfk5u0dy2] {
        width: 64px;
        text-align: center;
        font-family: 'SF Mono', 'Consolas', monospace;
    }

.action-day-unit[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
}

/* Op result banner */
.action-result[b-lyfk5u0dy2] {
    grid-column: 1 / -1;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid transparent;
}

    .action-result.ok[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--green);
        border-color: rgba(16, 185, 129, 0.25);
    }

    .action-result.fail[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--red);
        border-color: rgba(239, 68, 68, 0.25);
    }

/* Confirm / Cancel */
.action-confirm[b-lyfk5u0dy2] {
    padding: 4px 8px;
    font-size: 9px;
    font-family: var(--font);
    font-weight: 600;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

    .action-confirm:disabled[b-lyfk5u0dy2] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .action-confirm:hover:not(:disabled)[b-lyfk5u0dy2] {
        filter: brightness(1.15);
    }

    .action-confirm.danger[b-lyfk5u0dy2] {
        background: var(--red);
    }

.action-cancel[b-lyfk5u0dy2] {
    padding: 4px 6px;
    font-size: 9px;
    font-family: var(--font);
    background: transparent;
    color: var(--text3);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    cursor: pointer;
}

    .action-cancel:hover[b-lyfk5u0dy2] {
        color: var(--text2);
        background: var(--card-border);
    }

/* Plan timeline visual */
.plan-timeline[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0 2px;
    width: 100%;
}

.plan-tl-date[b-lyfk5u0dy2] {
    font-size: 9px;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--text3);
    white-space: nowrap;
    flex-shrink: 0;
}

    .plan-tl-date.expired[b-lyfk5u0dy2] {
        color: var(--red);
    }

.plan-tl-track[b-lyfk5u0dy2] {
    flex: 1;
    height: 4px;
    background: var(--card-border);
    border-radius: 2px;
    position: relative;
    min-width: 40px;
}

.plan-tl-fill[b-lyfk5u0dy2] {
    height: 100%;
    border-radius: 2px;
    background: var(--green);
    transition: width 0.3s;
}

    .plan-tl-fill.expiring[b-lyfk5u0dy2] {
        background: var(--amber);
    }

    .plan-tl-fill.expired[b-lyfk5u0dy2] {
        background: var(--red);
        opacity: 0.5;
    }

.plan-tl-now[b-lyfk5u0dy2] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--text);
    border: 1.5px solid var(--bg);
    border-radius: 1px;
    box-shadow: 0 0 0 1px var(--text3);
    z-index: 1;
}

.plan-tl-end[b-lyfk5u0dy2] {
    font-size: 8px;
    color: var(--text3);
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
}

/* ── Journey Filters ── */
.journey-filters[b-lyfk5u0dy2] {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.filter-btn[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
    cursor: pointer;
    font-family: var(--font);
}

    .filter-btn:hover[b-lyfk5u0dy2] {
        background: var(--card);
        border-color: var(--text3);
    }

    .filter-btn.active[b-lyfk5u0dy2] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .filter-btn i[b-lyfk5u0dy2] {
        font-size: 10px;
    }

/* ── Journey Timeline ── */
.journey-timeline[b-lyfk5u0dy2] {
    position: relative;
    flex: 1;
    overflow-y: auto;
}

    .journey-timeline[b-lyfk5u0dy2]::-webkit-scrollbar {
        width: 5px;
    }

    .journey-timeline[b-lyfk5u0dy2]::-webkit-scrollbar-track {
        background: var(--card-inner);
    }

    .journey-timeline[b-lyfk5u0dy2]::-webkit-scrollbar-thumb {
        background: var(--card-border);
        border-radius: 3px;
    }

        .journey-timeline[b-lyfk5u0dy2]::-webkit-scrollbar-thumb:hover {
            background: var(--text3);
        }

/* ── Compact event rows ── */
.evt-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin: 1px 0;
    border-radius: 3px;
    font-size: 11px;
    background: var(--card-inner);
    border-left: 3px solid var(--card-border);
    flex-wrap: wrap;
    min-height: 24px;
}

    .evt-row:hover[b-lyfk5u0dy2] {
        filter: brightness(1.15);
    }

    .evt-row.success[b-lyfk5u0dy2] {
        border-left-color: var(--green);
    }

    .evt-row.error[b-lyfk5u0dy2] {
        border-left-color: var(--red);
        background: rgba(239, 68, 68, 0.04);
    }

    .evt-row.creation[b-lyfk5u0dy2] {
        border-left-color: var(--text2);
    }

    .evt-row.generation[b-lyfk5u0dy2] {
        border-left-color: var(--accent);
    }

    .evt-row.deletion[b-lyfk5u0dy2] {
        border-left-color: var(--amber);
    }

    /* Email events — color-coded by program */
    .evt-row[class*="email-"][b-lyfk5u0dy2] {
        border-left-width: 3px;
    }

    .evt-row.email-onboard[b-lyfk5u0dy2] {
        border-left-color: #06b6d4;
        background: rgba(6, 182, 212, 0.05);
    }

        .evt-row.email-onboard .evt-icon[b-lyfk5u0dy2] {
            color: #06b6d4;
        }

        .evt-row.email-onboard .evt-type[b-lyfk5u0dy2] {
            color: #22d3ee;
        }

    .evt-row.email-marketing[b-lyfk5u0dy2] {
        border-left-color: #a78bfa;
        background: rgba(167, 139, 250, 0.05);
    }

        .evt-row.email-marketing .evt-icon[b-lyfk5u0dy2] {
            color: #a78bfa;
        }

        .evt-row.email-marketing .evt-type[b-lyfk5u0dy2] {
            color: #c4b5fd;
        }

    .evt-row.email-ops[b-lyfk5u0dy2] {
        border-left-color: #64748b;
        background: rgba(100, 116, 139, 0.05);
    }

        .evt-row.email-ops .evt-icon[b-lyfk5u0dy2] {
            color: #94a3b8;
        }

    .evt-row.email-invite[b-lyfk5u0dy2] {
        border-left-color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }

        .evt-row.email-invite .evt-icon[b-lyfk5u0dy2] {
            color: #3b82f6;
        }

        .evt-row.email-invite .evt-type[b-lyfk5u0dy2] {
            color: #60a5fa;
        }

    .evt-row.email-campaign[b-lyfk5u0dy2] {
        border-left-color: #a78bfa;
        background: rgba(167, 139, 250, 0.05);
    }

        .evt-row.email-campaign .evt-icon[b-lyfk5u0dy2] {
            color: #a78bfa;
        }

.evt-icon[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.evt-row.success .evt-icon[b-lyfk5u0dy2] {
    color: var(--green);
}

.evt-row.error .evt-icon[b-lyfk5u0dy2] {
    color: var(--red);
}

.evt-row.generation .evt-icon[b-lyfk5u0dy2] {
    color: var(--accent);
}

.evt-row.deletion .evt-icon[b-lyfk5u0dy2] {
    color: var(--amber);
}

.evt-type[b-lyfk5u0dy2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.evt-path[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text3);
}

.evt-sep[b-lyfk5u0dy2] {
    color: var(--card-border);
    font-weight: 300;
}

.evt-desc[b-lyfk5u0dy2] {
    font-size: 11px;
    color: var(--text2);
}

.evt-idea[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

    .evt-idea i[b-lyfk5u0dy2] {
        color: var(--amber);
        font-size: 9px;
    }

.evt-time[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.evt-device[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    opacity: 0.5;
    flex-shrink: 0;
}

    .evt-device:hover[b-lyfk5u0dy2] {
        opacity: 1;
    }

    .evt-device.fa-question-circle[b-lyfk5u0dy2] {
        opacity: 0.25;
    }

/* Inline badges (reused from before, tighter) */
.evt-row .content-badge[b-lyfk5u0dy2] {
    font-size: 10px;
    padding: 1px 5px;
}

.evt-row .meta-tag[b-lyfk5u0dy2] {
    font-size: 10px;
    padding: 1px 5px;
}

/* ── Timeline separators ── */
.timeline-sep[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    margin: 8px 0;
}

.sep-line[b-lyfk5u0dy2] {
    flex: 1;
    height: 1px;
}

.sep-label[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.day-sep[b-lyfk5u0dy2] {
    margin: 12px 0;
}

    .day-sep .sep-line[b-lyfk5u0dy2] {
        background: var(--card-border);
    }

    .day-sep .sep-label[b-lyfk5u0dy2] {
        color: var(--text2);
        text-transform: uppercase;
    }

.session-sep[b-lyfk5u0dy2] {
    margin: 6px 0;
}

    .session-sep .sep-line[b-lyfk5u0dy2] {
        background: rgba(99, 102, 241, 0.15);
        border-top: 1px dashed rgba(99, 102, 241, 0.25);
        height: 0;
    }

    .session-sep .sep-label[b-lyfk5u0dy2] {
        color: var(--text3);
        font-weight: 400;
        font-style: italic;
    }

/* ── Critical events ── */
.evt-row.critical[b-lyfk5u0dy2] {
    border-left-width: 4px;
    font-weight: 600;
}

    .evt-row.critical.success[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.1);
        border-left-color: var(--green);
        box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.06);
    }

        .evt-row.critical.success .evt-type[b-lyfk5u0dy2] {
            color: var(--green);
        }

    .evt-row.critical.error[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.1);
        border-left-color: var(--red);
        box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.06);
    }

        .evt-row.critical.error .evt-type[b-lyfk5u0dy2] {
            color: var(--red);
        }

/* Chat rows */
.chat-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    margin: 1px 0;
    border-radius: 3px;
    font-size: 11px;
    background: var(--card-inner);
    border-left: 3px solid var(--card-border);
    min-height: 22px;
}

    .chat-row:hover[b-lyfk5u0dy2] {
        filter: brightness(1.1);
    }

    .chat-row.user[b-lyfk5u0dy2] {
        border-left-color: var(--text2);
    }

    .chat-row.ai[b-lyfk5u0dy2] {
        border-left-color: #8b5cf6;
    }

    .chat-row.sentiment-very-positive[b-lyfk5u0dy2] {
        background: rgba(16, 185, 129, 0.08);
        border-left-color: var(--green);
    }

    .chat-row.sentiment-positive[b-lyfk5u0dy2] {
        background: rgba(34, 197, 94, 0.06);
        border-left-color: #22c55e;
    }

    .chat-row.sentiment-neutral[b-lyfk5u0dy2] {
        background: var(--card-inner);
    }

    .chat-row.sentiment-negative[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.06);
        border-left-color: var(--amber);
    }

    .chat-row.sentiment-very-negative[b-lyfk5u0dy2] {
        background: rgba(239, 68, 68, 0.06);
        border-left-color: var(--red);
    }


.chat-author-compact[b-lyfk5u0dy2] {
    font-weight: 600;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 48px;
    text-align: center;
}

    .chat-author-compact.user[b-lyfk5u0dy2] {
        background: rgba(100, 116, 139, 0.3);
        color: var(--text2);
    }

    .chat-author-compact.ai[b-lyfk5u0dy2] {
        background: rgba(139, 92, 246, 0.2);
        color: #a78bfa;
    }

.chat-sentiment[b-lyfk5u0dy2] {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
    cursor: help;
}

    .chat-sentiment.not-set[b-lyfk5u0dy2] {
        display: none;
    }

.chat-idea-label[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--card-border);
    color: var(--text2);
    border-radius: 3px;
    cursor: help;
}


/* Shared badge + meta styles */
.content-badge[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-family: 'SF Mono', 'Consolas', monospace;
}

    .content-badge.type[b-lyfk5u0dy2] {
        background: rgba(245, 158, 11, 0.15);
        color: var(--amber);
        font-weight: 600;
    }

    .content-badge.key[b-lyfk5u0dy2] {
        background: var(--card-border);
        color: var(--text2);
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.meta-tag[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    font-size: 10px;
}

.meta-key[b-lyfk5u0dy2] {
    color: var(--text3);
    font-weight: 500;
}

.meta-value[b-lyfk5u0dy2] {
    color: var(--text2);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.no-events[b-lyfk5u0dy2], .journey-empty[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text3);
    gap: 12px;
}

    .no-events i[b-lyfk5u0dy2], .journey-empty i[b-lyfk5u0dy2] {
        font-size: 28px;
        opacity: 0.4;
    }

    .no-events span[b-lyfk5u0dy2], .journey-empty span[b-lyfk5u0dy2] {
        font-size: 13px;
    }

/* ── ADMIN OPS ── */
.ops-section[b-lyfk5u0dy2] {
    max-width: 640px;
}

    .ops-section .section-label[b-lyfk5u0dy2] {
        margin-bottom: 10px;
    }

.ops-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card);
    border-radius: 5px;
    border: 1px solid var(--card-border);
    margin-bottom: 5px;
}

.ops-row-info[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ops-icon[b-lyfk5u0dy2] {
    font-size: 16px;
}

.ops-sent[b-lyfk5u0dy2] {
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
}

.ops-confirm-group[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ops-confirm-hint[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--amber);
}

.ops-confirm-input[b-lyfk5u0dy2] {
    width: 56px;
    padding: 3px 5px;
    font-size: 11px;
    font-family: monospace;
    background: var(--card-inner);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 3px;
    color: var(--text);
    outline: none;
}

.ops-go-btn[b-lyfk5u0dy2] {
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    border: none;
    background: var(--text3);
    color: #fff;
    cursor: not-allowed;
    font-family: var(--font);
}

    .ops-go-btn.ready[b-lyfk5u0dy2] {
        background: var(--green);
        cursor: pointer;
    }

.ops-cancel-btn[b-lyfk5u0dy2] {
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-family: var(--font);
}

.ops-send-btn[b-lyfk5u0dy2] {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-family: var(--font);
}

    .ops-send-btn:hover[b-lyfk5u0dy2] {
        background: var(--card-border);
    }

.ops-warning[b-lyfk5u0dy2] {
    margin-top: 16px;
    padding: 10px;
    background: var(--card-inner);
    border-radius: 5px;
    border: 1px solid rgba(245, 158, 11, 0.1);
    font-size: 11px;
    color: var(--text3);
}

.ops-warning-icon[b-lyfk5u0dy2] {
    color: var(--amber);
    margin-right: 4px;
}

.ops-warning code[b-lyfk5u0dy2] {
    font-family: monospace;
    color: var(--amber);
}

/* ── Paid Campaign Icon ── */
.paid-campaign-icon[b-lyfk5u0dy2] {
    color: var(--amber);
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.85;
    vertical-align: middle;
}

.journey-user-name .paid-campaign-icon[b-lyfk5u0dy2] {
    font-size: 12px;
}

/* ── Pre-Signup Intelligence Bar ── */
.presignup-bar[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 10px;
    margin: 6px 0 2px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 5px;
}

.presignup-label[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 2px;
    white-space: nowrap;
}

    .presignup-label i[b-lyfk5u0dy2] {
        margin-right: 3px;
        font-size: 10px;
    }

.presignup-chip[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

    .presignup-chip .chip-unit[b-lyfk5u0dy2] {
        font-weight: 400;
        color: var(--text3);
        font-size: 10px;
    }

    .presignup-chip i[b-lyfk5u0dy2] {
        font-size: 9px;
    }

    .presignup-chip.window[b-lyfk5u0dy2] {
        color: var(--accent);
        border-color: rgba(99, 102, 241, 0.25);
        background: rgba(99, 102, 241, 0.08);
    }

    .presignup-chip.instant[b-lyfk5u0dy2] {
        color: var(--amber);
        border-color: rgba(245, 158, 11, 0.25);
        background: rgba(245, 158, 11, 0.08);
    }

    .presignup-chip.signal[b-lyfk5u0dy2] {
        color: var(--green);
        border-color: rgba(16, 185, 129, 0.2);
        background: rgba(16, 185, 129, 0.06);
    }

    .presignup-chip.bounce[b-lyfk5u0dy2] {
        color: var(--amber);
        border-color: rgba(245, 158, 11, 0.2);
        background: rgba(245, 158, 11, 0.06);
    }

.presignup-date[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    margin-left: auto;
    font-style: italic;
}

/* Pre stat tile accent */
.journey-stat.presignup-stat[b-lyfk5u0dy2] {
    border-left: 2px solid var(--accent);
    padding-left: 6px;
}

    .journey-stat.presignup-stat .journey-stat-value[b-lyfk5u0dy2] {
        color: var(--accent);
    }

    .journey-stat.presignup-stat .journey-stat-label[b-lyfk5u0dy2] {
        color: var(--accent);
        opacity: 0.7;
    }

/* ── Deliverability Test ── */
.deliverability-controls[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deliverability-input[b-lyfk5u0dy2] {
    width: 220px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: var(--font);
    background: var(--card-inner);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--text);
    outline: none;
}

    .deliverability-input:focus[b-lyfk5u0dy2] {
        border-color: var(--accent);
    }

    .deliverability-input:disabled[b-lyfk5u0dy2] {
        opacity: 0.5;
    }

.test-fail[b-lyfk5u0dy2] {
    color: var(--red) !important;
}

.ops-note[b-lyfk5u0dy2] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text3);
    padding: 0 4px;
}

/* ── Article Performance Table ── */
.article-summary[b-lyfk5u0dy2] {
    font-weight: 400;
    color: var(--text3);
    font-size: 11px;
    margin-left: 6px;
}

.article-signups-summary[b-lyfk5u0dy2] {
    color: var(--green);
}

.article-overlap[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 10px;
    font-style: italic;
}

.article-table-scroll[b-lyfk5u0dy2] {
    max-height: 460px;
    overflow-y: auto;
}

.article-table-header[b-lyfk5u0dy2],
.article-table-row[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: 26px 1fr 56px 50px 56px 80px;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
}

.article-table-header[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
}

.article-table-row[b-lyfk5u0dy2] {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(42, 45, 58, 0.4);
    transition: background 0.15s;
}

    .article-table-row:hover[b-lyfk5u0dy2] {
        background: var(--card-inner);
    }

    .article-table-row.has-signups[b-lyfk5u0dy2] {
        border-left: 2px solid var(--green);
    }

.acol[b-lyfk5u0dy2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acol-rank[b-lyfk5u0dy2] {
    color: var(--text3);
    font-size: 10px;
    text-align: center;
}

.acol-title[b-lyfk5u0dy2] {
    font-weight: 500;
    color: var(--text);
}

.acol-num[b-lyfk5u0dy2] {
    text-align: right;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text2);
}

.acol-readers[b-lyfk5u0dy2] {
    font-weight: 600;
    color: var(--text);
}

.acol-signups[b-lyfk5u0dy2] {
    color: var(--green);
    font-weight: 600;
}

.acol-bar[b-lyfk5u0dy2] {
    padding-left: 4px;
}

.article-bar-track[b-lyfk5u0dy2] {
    height: 4px;
    background: var(--card-inner);
    border-radius: 2px;
    overflow: hidden;
}

.article-bar-fill[b-lyfk5u0dy2] {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.5;
    transition: width 0.3s ease;
}

    .article-bar-fill.has-conv[b-lyfk5u0dy2] {
        background: var(--green);
        opacity: 0.7;
    }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .user-table-header[b-lyfk5u0dy2], .user-table-row[b-lyfk5u0dy2] {
        grid-template-columns: 22px 1.4fr 44px 56px 20px 32px 40px 22px 22px 32px 36px 16px;
    }
}

@media (max-width: 900px) {
    .hero-panel[b-lyfk5u0dy2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .hero-number[b-lyfk5u0dy2] {
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .hero-divider[b-lyfk5u0dy2] {
        width: 100%;
        height: 1px;
    }

    .two-col-row[b-lyfk5u0dy2] {
        grid-template-columns: 1fr;
    }

    .users-panel[b-lyfk5u0dy2] {
        grid-template-columns: 1fr;
        height: auto;
        position: relative;
        max-height: none;
    }

    .users-list-col[b-lyfk5u0dy2] {
        max-height: 320px;
        overflow: hidden;
    }

        .users-list-col .section-card[b-lyfk5u0dy2] {
            max-height: 320px;
        }

    .users-detail-col[b-lyfk5u0dy2] {
        min-height: 400px;
        max-height: 70vh;
    }
}

@media (max-width: 768px) {
    .user-table-header[b-lyfk5u0dy2], .user-table-row[b-lyfk5u0dy2] {
        grid-template-columns: 22px 1fr 44px 56px 20px 32px 40px;
    }

    .ucol-ind[b-lyfk5u0dy2], .ucol-last[b-lyfk5u0dy2], .ucol-exp[b-lyfk5u0dy2], .ucol-note[b-lyfk5u0dy2] {
        display: none;
    }

    .journey-user-header[b-lyfk5u0dy2],
    .visitor-journey-header[b-lyfk5u0dy2] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .journey-user-stats[b-lyfk5u0dy2] {
        width: 100%;
        justify-content: space-around;
        padding-top: 12px;
        border-top: 1px solid var(--card-border);
    }

    .journey-user-meta[b-lyfk5u0dy2] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .journey-filters[b-lyfk5u0dy2] {
        gap: 4px;
    }

    .filter-btn[b-lyfk5u0dy2] {
        padding: 4px 8px;
        font-size: 9px;
    }

    .visitor-table-header[b-lyfk5u0dy2], .visitor-table-row[b-lyfk5u0dy2] {
        grid-template-columns: 22px 1fr 46px 30px 52px 50px;
    }

    .vcol-dur[b-lyfk5u0dy2], .vcol-device[b-lyfk5u0dy2] {
        display: none;
    }
}

@media (max-width: 600px) {
    .analytics-dashboard[b-lyfk5u0dy2] {
        padding: 10px;
    }

    .hero-value[b-lyfk5u0dy2] {
        font-size: 40px;
    }

    .user-table-header[b-lyfk5u0dy2], .user-table-row[b-lyfk5u0dy2] {
        grid-template-columns: 22px 1fr 36px 40px;
    }

    .ucol-plan[b-lyfk5u0dy2], .ucol-num[b-lyfk5u0dy2], .ucol-ind[b-lyfk5u0dy2], .ucol-last[b-lyfk5u0dy2], .ucol-exp[b-lyfk5u0dy2], .ucol-note[b-lyfk5u0dy2] {
        display: none;
    }

    .ucol-joined[b-lyfk5u0dy2] {
        display: none;
    }

    .funnel-count[b-lyfk5u0dy2] {
        font-size: 14px;
    }

    .funnel-stage-label[b-lyfk5u0dy2] {
        font-size: 7px;
    }

    .visitor-table-header[b-lyfk5u0dy2], .visitor-table-row[b-lyfk5u0dy2] {
        grid-template-columns: 22px 1fr 36px 52px;
    }

    .vcol-when[b-lyfk5u0dy2], .vcol-dur[b-lyfk5u0dy2], .vcol-device[b-lyfk5u0dy2], .vcol-events[b-lyfk5u0dy2] {
        display: none;
    }

    .signup-abandonment-note[b-lyfk5u0dy2] {
        font-size: 10px;
    }

    .visitor-dropoff[b-lyfk5u0dy2] {
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────
   Telemetry-health diagnostic strip (header)
   Surfaced next to the refresh timestamp. Visible only when
   the bundle reports orphans or unattributable events — i.e.
   silent when the underlying logging layer is healthy.
   ────────────────────────────────────────────────── */
.diag-strip[b-lyfk5u0dy2] {
    font-size: 10px;
    color: var(--text3);
    padding: 2px 6px;
    border: 1px dashed var(--card-border);
    border-radius: 3px;
    cursor: help;
    margin-left: 4px;
    user-select: none;
}

    .diag-strip i[b-lyfk5u0dy2] {
        color: var(--amber);
        margin-right: 3px;
        opacity: 0.7;
    }

    .diag-strip:hover[b-lyfk5u0dy2] {
        color: var(--text2);
        border-color: var(--text3);
    }

/* ═══════════════════════════════════════════════════
   ADMIN ACTIONS PANEL — grouped layout (added)
   ═══════════════════════════════════════════════════ */

/* Panel now stacks vertically; each group lays its cards out in a grid. */
.admin-panel[b-lyfk5u0dy2] {
    display: block;
}

.admin-context[b-lyfk5u0dy2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.78em;
    color: var(--text2);
    background: rgba(120, 130, 150, 0.06);
    border-radius: 6px;
}

.admin-context-k[b-lyfk5u0dy2] {
    margin-right: 4px;
    font-size: 0.82em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

.admin-group-label[b-lyfk5u0dy2] {
    margin: 12px 2px 6px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text3);
}

    .admin-group-label:first-of-type[b-lyfk5u0dy2] {
        margin-top: 4px;
    }

.admin-group[b-lyfk5u0dy2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    margin-bottom: 4px;
}

/* ── Newsletter sign-ups card ── */
.signup-recent-label[b-lyfk5u0dy2] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 10px 0 5px;
}

.signup-list[b-lyfk5u0dy2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
}

.signup-row[b-lyfk5u0dy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 6px;
    background: rgba(20, 23, 32, 0.4);
    border-radius: 3px;
    font-size: 11px;
}

.signup-email[b-lyfk5u0dy2] {
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.signup-date[b-lyfk5u0dy2] {
    color: var(--text3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Action center: busy lock + danger zone ── */
.admin-actions[b-lyfk5u0dy2] {
    position: relative;
}

    .admin-actions.busy[b-lyfk5u0dy2] {
        opacity: 0.55;
        pointer-events: none; /* blocks every action while an op is running */
    }

.admin-actions-lock[b-lyfk5u0dy2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.admin-spinner[b-lyfk5u0dy2] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--card-border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-lyfk5u0dy2 0.8s linear infinite;
}

.danger-label[b-lyfk5u0dy2] {
    color: #f87171;
}

.action-card.danger[b-lyfk5u0dy2] {
    border-color: color-mix(in srgb, #f87171 40%, var(--card-border));
}

.erase-warning[b-lyfk5u0dy2] {
    font-size: 10px;
    line-height: 1.35;
    color: #f87171;
    background: color-mix(in srgb, #f87171 10%, transparent);
    border-radius: 3px;
    padding: 4px 6px;
    margin: 4px 0;
}

/* ── Daily activity time-series chart ── */
.ts-legend[b-lyfk5u0dy2] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text2);
}

.ts-key[b-lyfk5u0dy2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ts-key i[b-lyfk5u0dy2] {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

.ts-chart[b-lyfk5u0dy2] {
    width: 100%;
}

.ts-svg[b-lyfk5u0dy2] {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

    .ts-svg rect:hover[b-lyfk5u0dy2] {
        fill: rgba(255, 255, 255, 0.03);
    }

/* ── North Star headline strip ── */
.northstar[b-lyfk5u0dy2] {
    border-top: 2px solid var(--accent);
}

    .northstar .tile-value[b-lyfk5u0dy2] {
        font-size: 26px;
        font-weight: 700;
    }

    .northstar .tile-label[b-lyfk5u0dy2] {
        font-size: 11px;
    }

/* ── Mock/preview note ── */
.mock-note[b-lyfk5u0dy2] {
    margin-top: 10px;
    font-size: 11px;
    font-style: italic;
    color: var(--text3);
}
/* /Components/SignInEmail.razor.rz.scp.css */
/* ========================================================================
   /signin/email — scoped styles (final)
   ------------------------------------------------------------------------
   - Logo is rendered as-is (no panel, no filter). Replace the asset if
     the provided one doesn't render cleanly on the white card.
   - Tagline sits directly under the logo, shared by all three states.
   - Fully centre-aligned card: label, input text, placeholder, and
     validation message included.
   - Colours reference the global design tokens; fallbacks mirror the
     canonical token values (accent #f00c71 = rgb 240 12 113).
   - Submit button has explicit margin-top to separate from input.
   - Three states share one visual language.
   ======================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────── */

.mle-shell[b-o1v6yavgf7] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: radial-gradient(ellipse at 20% 10%, rgba(240, 12, 113, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(240, 12, 113, 0.04) 0%, transparent 60%), #f3f0ec;
    font-family: var(--font-family-primary, 'Inter', system-ui, sans-serif);
    color: var(--ink, #0f172a);
}

/* ── Card ──────────────────────────────────────────────────────────── */

.mle-card[b-o1v6yavgf7] {
    max-width: 440px;
    width: 100%;
    background: #ffffff;
    border-radius: var(--radius-xl, 1rem);
    padding: 52px 44px 44px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 48px rgba(15, 23, 42, 0.09);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mle-card--entered[b-o1v6yavgf7] {
    opacity: 1;
    transform: translateY(0);
}

/* ── Logo ──────────────────────────────────────────────────────────── */

.mle-logo-link[b-o1v6yavgf7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, opacity 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

    .mle-logo-link:hover[b-o1v6yavgf7] {
        transform: translateY(-1px);
        opacity: 0.85;
    }

    .mle-logo-link:focus-visible[b-o1v6yavgf7] {
        outline: 2px solid var(--accent, #f00c71);
        outline-offset: 4px;
    }

.mle-logo[b-o1v6yavgf7] {
    height: 32px;
    width: auto;
    display: block;
}

/* ── Tagline ───────────────────────────────────────────────────────── */

.mle-tagline[b-o1v6yavgf7] {
    font-family: 'Space Grotesk', var(--font-family-primary), system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-5, #64748b);
    margin: 0 0 36px;
}

/* ── Icon badge (Sent, RateLimited states) ─────────────────────────── */

.mle-icon[b-o1v6yavgf7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    position: relative;
    z-index: 1;
}

    .mle-icon[b-o1v6yavgf7]::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0.5;
        z-index: -1;
    }

.mle-icon--success[b-o1v6yavgf7] {
    background: var(--success-surface, #f0fdf4);
    color: var(--success, #16a34a);
}

    .mle-icon--success[b-o1v6yavgf7]::before {
        background: var(--success-border, #dcfce7);
    }

.mle-icon--pause[b-o1v6yavgf7] {
    background: var(--warning-surface, #fffbeb);
    color: var(--warning-dark, #b45309);
}

    .mle-icon--pause[b-o1v6yavgf7]::before {
        background: var(--warning-border, #fde68a);
    }

/* ── Typography ────────────────────────────────────────────────────── */

.mle-title[b-o1v6yavgf7] {
    font-family: 'Space Grotesk', var(--font-family-primary), system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink, #0f172a);
}

.mle-body[b-o1v6yavgf7] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-4, #475569);
    margin: 0 auto 28px;
    max-width: 360px;
}

.mle-body-secondary[b-o1v6yavgf7] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-5, #64748b);
    margin: 0 auto 28px;
    max-width: 360px;
}

.mle-email-pill[b-o1v6yavgf7] {
    display: inline-block;
    font-family: 'Space Grotesk', var(--font-family-primary), system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink, #0f172a);
    background: var(--accent-subtle, rgba(240, 12, 113, 0.08));
    border: 1px solid var(--accent-border, rgba(240, 12, 113, 0.2));
    padding: 8px 16px;
    border-radius: 999px;
    margin: 4px 0 14px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .mle-email-pill strong[b-o1v6yavgf7] {
        font-weight: 500;
    }

/* ── Form ──────────────────────────────────────────────────────────── */

.mle-form[b-o1v6yavgf7] {
    display: block;
    margin-bottom: 24px;
    text-align: center;
}

.mle-field[b-o1v6yavgf7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.mle-label[b-o1v6yavgf7] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-5, #64748b);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.mle-input[b-o1v6yavgf7] {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Space Grotesk', var(--font-family-primary), system-ui, sans-serif;
    text-align: center;
    color: var(--ink, #0f172a);
    background: #ffffff;
    border: 1.5px solid var(--border-strong, #d0d5dd);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

    .mle-input[b-o1v6yavgf7]::placeholder {
        color: var(--ink-6, #94a3b8);
    }

    .mle-input:hover:not(:disabled):not(:focus)[b-o1v6yavgf7] {
        border-color: var(--ink-5, #64748b);
    }

    .mle-input:focus[b-o1v6yavgf7] {
        border-color: var(--accent, #f00c71);
        box-shadow: 0 0 0 4px var(--accent-shadow, rgba(240, 12, 113, 0.12));
    }

    .mle-input:disabled[b-o1v6yavgf7] {
        opacity: 0.55;
        cursor: not-allowed;
        background: #fafafa;
    }

.mle-input--error[b-o1v6yavgf7] {
    border-color: var(--danger, #dc2626);
}

    .mle-input--error:focus[b-o1v6yavgf7] {
        border-color: var(--danger, #dc2626);
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
    }

.mle-validation[b-o1v6yavgf7] {
    display: block;
    font-size: 0.8rem;
    color: var(--danger, #dc2626);
    margin-top: 6px;
    text-align: center;
}

/* ── Honeypot ──────────────────────────────────────────────────────── */
/* Off-canvas rather than display:none so naive automation that skips
   hidden fields still encounters it. Removed from flow (absolute), out
   of the tab order via tabindex on the input, and skipped by assistive
   tech via aria-hidden on the container. Humans never see or fill it. */
.mle-hp[b-o1v6yavgf7] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Divider ───────────────────────────────────────────────────────── */

.mle-divider[b-o1v6yavgf7] {
    position: relative;
    margin: 28px 0 16px;
    text-align: center;
    height: 1px;
    background: var(--border-color, #e8eaed);
}

    .mle-divider span[b-o1v6yavgf7] {
        position: relative;
        top: -10px;
        display: inline-block;
        padding: 0 14px;
        background: #ffffff;
        font-size: 0.7rem;
        color: var(--ink-5, #64748b);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-weight: 600;
    }

/* ── Buttons ───────────────────────────────────────────────────────── */

.mle-btn[b-o1v6yavgf7] {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--font-family-primary, 'Inter', system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
    appearance: none;
    border: none;
    outline: none;
    margin-bottom: 10px;
    box-sizing: border-box;
    letter-spacing: -0.005em;
}

    .mle-btn:last-child[b-o1v6yavgf7] {
        margin-bottom: 0;
    }

    .mle-btn:focus-visible[b-o1v6yavgf7] {
        outline: 2px solid var(--accent, #f00c71);
        outline-offset: 3px;
    }

    .mle-btn i[b-o1v6yavgf7] {
        font-size: 0.95em;
        opacity: 0.9;
    }

.mle-btn--primary[b-o1v6yavgf7] {
    color: #ffffff;
    background: var(--gradient-cta, linear-gradient(135deg, #f4089b 0%, #c80670 100%));
    box-shadow: var(--accent-glow-sm, 0 4px 16px rgba(240, 12, 113, 0.2));
}

    .mle-btn--primary:hover:not(:disabled)[b-o1v6yavgf7] {
        transform: translateY(-1px);
        box-shadow: var(--accent-glow, 0 4px 20px rgba(240, 12, 113, 0.3), 0 0 0 1px rgba(240, 12, 113, 0.1));
    }

    .mle-btn--primary:active:not(:disabled)[b-o1v6yavgf7] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(240, 12, 113, 0.24);
    }

    .mle-btn--primary:disabled[b-o1v6yavgf7] {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

.mle-btn--ghost[b-o1v6yavgf7] {
    color: var(--ink-2, #1e293b);
    background: transparent;
    border: 1.5px solid var(--border-strong, #d0d5dd);
}

    .mle-btn--ghost:hover:not(:disabled)[b-o1v6yavgf7] {
        border-color: var(--ink-3, #334155);
        background: var(--surface, #f8f9fa);
        transform: translateY(-1px);
    }

    .mle-btn--ghost:active:not(:disabled)[b-o1v6yavgf7] {
        transform: translateY(0);
    }

    .mle-btn--ghost:disabled[b-o1v6yavgf7] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Submit button — explicit margin-top for reliable spacing from input */
.mle-btn--submit[b-o1v6yavgf7] {
    margin-top: 22px;
}

.mle-btn-label[b-o1v6yavgf7] {
    display: inline-block;
}

/* ── Processing spinner ────────────────────────────────────────────── */

.mle-spinner[b-o1v6yavgf7] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mle-spin-b-o1v6yavgf7 0.7s linear infinite;
    flex-shrink: 0;
}

.mle-btn.is-processing[b-o1v6yavgf7] {
    cursor: wait;
}

@keyframes mle-spin-b-o1v6yavgf7 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Quiet link ────────────────────────────────────────────────────── */

.mle-link-quiet[b-o1v6yavgf7] {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--ink-5, #64748b);
    text-decoration: none;
    transition: color 0.2s ease;
}

    .mle-link-quiet:hover[b-o1v6yavgf7] {
        color: var(--accent, #f00c71);
    }

    .mle-link-quiet:focus-visible[b-o1v6yavgf7] {
        outline: 2px solid var(--accent, #f00c71);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .mle-shell[b-o1v6yavgf7] {
        padding: 20px 16px;
    }

    .mle-card[b-o1v6yavgf7] {
        padding: 40px 26px 32px;
        border-radius: 12px;
    }

    .mle-title[b-o1v6yavgf7] {
        font-size: 1.45rem;
    }

    .mle-body[b-o1v6yavgf7] {
        font-size: 0.9rem;
    }

    .mle-logo-link[b-o1v6yavgf7] {
        margin-bottom: 12px;
    }

    .mle-tagline[b-o1v6yavgf7] {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
        margin-bottom: 30px;
    }
}