/* Max container width for consistent grid */
:root {
    --max-container-width: 1400px;
}

/* Manrope font for body text */
body, h1, h2, h3, h4, h5, h6, p, div, span, a, button {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* JetBrains Mono for monospace elements */
.font-mono, [class*="font-mono"] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* JetBrains Mono for code editors only */
.live-code-text, .live-code-text * {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* JetBrains Mono for logo */
svg text {
    font-family: 'JetBrains Mono', monospace !important;
}

/* JetBrains Mono for demo titles */
.demo-title h1 {
    font-family: 'JetBrains Mono', monospace !important;
}

/* Custom grid styling */
.bg-primary {
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04) 0px,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px,
            transparent 80px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.04) 0px,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px,
            transparent 80px
        );
    background-size: 80px 80px;
    background-position: 0 0;
}

/* Remove grid from header/nav bar */
header.bg-primary {
    background-image: none;
}

/* Initial hidden state for header (prevents flash on load) */
header {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-20px);
}

/* Remove grid from buttons */
button.bg-primary {
    background-image: none !important;
}

/* Hide section border lines */
.relative > div[class*="absolute"][class*="w-[1px]"] {
    display: none;
}

/* CTA Button custom styling */
.cta-button {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Nav button monospace override */
header button,
header button *,
header a[class*="font-mono"],
header a[class*="font-mono"] * {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Footer monospace font */
footer, footer * {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Typing animation cursor */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    font-weight: 200;
    font-size: 1.1em;
    line-height: 0.9;
}

/* Orange cursor for orange text */
.text-orange.typing-cursor::after {
    color: #f97316;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Orange color for highlighted text */
.text-orange {
    color: #f97316 !important;
}

/* Improved vertical spacing and h2 sizing */
section h2 {
    margin-bottom: 0 !important;
    font-size: 2.1rem !important;
}

section h3 {
    margin-bottom: 0.5rem !important;
}

section .flex.flex-col.gap-6 {
    gap: 1.5rem !important;
}

/* Feature cards spacing */
.lg\:col-span-4 .text-body-md.font-medium {
    margin-bottom: 0.5rem !important;
}

/* Impact section items spacing */
section .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 2.5rem !important;
}

/* Problem section branching lines */
@media (min-width: 1024px) {
    #problem-section .problem-header {
        position: relative;
    }

    #problem-section .problems-container {
        position: relative;
    }

    #problem-section .problem-item {
        position: relative;
    }

    #problem-branches-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
    }

    #problem-branches-svg path {
        fill: none;
        stroke: #e5e7eb;
        stroke-width: 2;
    }
}