/* EV Alert Bot - Page-specific styles */

/* Browser mockup frame (reuses built-with-ai patterns) */
.browser-frame {
    border: 1px solid var(--color-black);
    background: var(--color-white);
    position: relative;
}

.browser-frame-bar {
    height: 40px;
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-surface-2);
    display: flex;
    align-items: center;
    padding: 0 var(--grid-2);
    gap: var(--grid-1);
}

.browser-frame-dot {
    width: 8px;
    height: 8px;
    background: var(--color-surface-2);
}

.browser-frame-url {
    flex: 1;
    text-align: center;
    font-size: var(--type-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}

.browser-frame img {
    width: 100%;
    display: block;
}

/* Screenshot placeholder */
.ev-screenshot-placeholder {
    width: 100%;
    min-height: 400px;
    background: var(--color-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-screenshot-placeholder-inner {
    text-align: center;
    color: var(--color-text-muted);
}

.ev-screenshot-placeholder-inner svg {
    margin-bottom: var(--grid-2);
    color: var(--color-text-muted);
}

.ev-screenshot-placeholder-inner p {
    font-size: var(--type-md);
    margin-bottom: var(--grid-1);
}

.ev-screenshot-placeholder-inner small {
    font-size: var(--type-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Manifesto text block (reuses built-with-ai pattern) */
.manifesto-text {
    max-width: 720px;
}

.manifesto-text p {
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: var(--grid-4);
}

.manifesto-text p:last-child {
    margin-bottom: 0;
}

.manifesto-text strong {
    color: var(--color-black);
}

/* Features grid - 4 items, 2x2 */
.ev-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-6);
}

.ev-feature-item {
    padding-left: var(--grid-8);
    position: relative;
}

.ev-feature-number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--type-xl);
    font-weight: 800;
    color: var(--color-accent);
    line-height: var(--leading-tight);
}

.ev-feature-title {
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: var(--grid-1);
    color: var(--color-black);
}

.ev-feature-desc {
    font-size: var(--type-md);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0;
}

/* Pipeline visualization */
.ev-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--grid-4);
}

.ev-pipeline-step {
    flex: 1;
    max-width: 280px;
    text-align: center;
}

.ev-pipeline-icon {
    width: 72px;
    height: 72px;
    border: 2px solid var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--grid-3);
    color: var(--color-black);
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

.ev-pipeline-step:hover .ev-pipeline-icon {
    background: var(--color-black);
    color: var(--color-white);
}

.ev-pipeline-step h3 {
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: var(--grid-1);
}

.ev-pipeline-step p {
    font-size: var(--type-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
}

.ev-pipeline-arrow {
    display: flex;
    align-items: center;
    padding-top: var(--grid-3);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Market context grid */
.ev-market-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-6);
}

.ev-market-card {
    padding: var(--space-card);
    background: var(--color-surface-1);
    position: relative;
}

.ev-market-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--color-accent);
    transition: width var(--transition-elegant);
}

.ev-market-card:hover::before {
    width: 100%;
}

.ev-market-card h3 {
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: var(--grid-2);
    color: var(--color-black);
}

.ev-market-card p {
    font-size: var(--type-md);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsibility list */
.ev-responsibility-list {
    line-height: 2;
    color: var(--color-text-muted);
    list-style: none;
    padding: 0;
}

.ev-responsibility-list li {
    padding-left: var(--grid-3);
    position: relative;
}

.ev-resp-marker {
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

/* Stack grid */
.ev-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-6);
}

.ev-stack-card {
    padding: var(--space-card);
    border: 1px solid var(--color-surface-2);
    background: var(--color-white);
}

.ev-stack-card h3 {
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: var(--grid-2);
    color: var(--color-black);
}

.ev-stack-card p {
    font-size: var(--type-md);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0;
}

/* Results grid */
.ev-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-6);
    padding-top: var(--grid-4);
    border-top: 2px solid var(--color-black);
}

.ev-result-item {
    text-align: left;
}

.ev-result-number {
    font-size: var(--type-4xl);
    font-weight: 800;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-black);
    margin-bottom: var(--grid-1);
}

.ev-result-label {
    font-size: var(--type-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--grid-2);
}

.ev-result-desc {
    font-size: var(--type-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
}

/* Links row */
.ev-links-row {
    display: flex;
    gap: var(--grid-3);
    flex-wrap: wrap;
}

/* Disabled button */
.btn-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
}

/* CTA block */
.ev-cta-block {
    max-width: 640px;
    margin: 0 auto;
}

.ev-cta-text {
    font-size: var(--type-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin-bottom: var(--grid-6);
    color: var(--color-black);
}

.ev-cta-buttons {
    display: flex;
    gap: var(--grid-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* EV Formula block */
.ev-formula-block {
    margin: var(--grid-6) 0;
    padding: var(--grid-6);
    background: var(--color-black);
    color: var(--color-white);
    max-width: 720px;
}

.ev-formula-label {
    font-size: var(--type-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--grid-2);
}

.ev-formula {
    font-size: var(--type-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
    margin-bottom: var(--grid-4);
    font-family: monospace;
}

.ev-formula-note {
    font-size: var(--type-sm);
    line-height: var(--leading-loose);
    color: rgba(255,255,255,0.65);
    margin: 0;
}

.ev-formula-note strong {
    color: var(--color-white);
}

/* MVP Scope / Limitations grid */
.ev-limits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-6);
}

.ev-limit-item {
    padding: var(--space-card);
    border: 1px solid var(--color-surface-2);
}

.ev-limit-tag {
    display: inline-block;
    font-size: var(--type-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--grid-2);
}

.ev-limit-item h3 {
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: var(--grid-2);
    color: var(--color-black);
}

.ev-limit-item p {
    font-size: var(--type-md);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ev-features-grid {
        grid-template-columns: 1fr;
    }

    .ev-pipeline {
        flex-direction: column;
        align-items: center;
    }

    .ev-pipeline-step {
        max-width: 100%;
    }

    .ev-pipeline-arrow {
        transform: rotate(90deg);
        padding-top: 0;
    }

    .ev-market-grid {
        grid-template-columns: 1fr;
    }

    .ev-stack-grid {
        grid-template-columns: 1fr;
    }

    .ev-results-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--grid-4);
    }

    .ev-limits-grid {
        grid-template-columns: 1fr;
    }

    .ev-links-row {
        flex-direction: column;
    }

    .ev-links-row .btn-secondary-glow {
        width: 100%;
    }

    .ev-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .ev-cta-buttons .btn-primary-glow,
    .ev-cta-buttons .btn-secondary-glow {
        width: 100%;
    }

    .browser-frame-bar {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .ev-results-grid {
        grid-template-columns: 1fr;
    }
}