/* Flow Animation Styles */
.flow-animation {
    width: 100%;
    height: 100%;
}

.flow-block {
    transition: opacity 0.3s ease, filter 0.3s ease;
    opacity: 0.5;
}

.flow-block.active {
    opacity: 1;
}

.flow-block-rect {
    transition: all 0.3s ease;
}

.flow-block-label {
    fill: #6b7280;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
}

.flow-block.active .flow-block-label {
    fill: #1f2937;
}

.block-logo {
    opacity: 0.7;
    transition: all 0.3s ease;
}

.flow-block.active .block-logo {
    filter: grayscale(0) opacity(1);
}

.flow-path {
    stroke: #d1d5db;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.flow-path.active {
    opacity: 1;
    stroke: #2563eb;
    stroke-width: 2.5;
    stroke-dasharray: 8 4;
    animation: flowAnimation 1s linear infinite;
}

@keyframes flowAnimation {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 12;
    }
}

.flow-bubble {
    transition: opacity 0.3s ease;
}

.flow-bubble.visible {
    opacity: 1;
}

/* Step Item Active States */
.step-item.active {
    background: linear-gradient(135deg, #ffffff 0%, #fdfcfb 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
}

.step-item.active .step-indicator {
    background-color: #2563eb;
}

/* Trust Logo Animation */
.trust-logo-item {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.trust-logo-item.fade-out {
    opacity: 0;
}

/* Prose Content Styling */
.prose {
    --tw-prose-body: #374151;
    --tw-prose-headings: #111827;
    --tw-prose-lead: #4b5563;
    --tw-prose-links: #2563eb;
    --tw-prose-bold: #111827;
    --tw-prose-counters: #6b7280;
    --tw-prose-bullets: #d1d5db;
    --tw-prose-hr: #e5e7eb;
    --tw-prose-quotes: #111827;
    --tw-prose-quote-borders: #e5e7eb;
    --tw-prose-captions: #6b7280;
    --tw-prose-code: #111827;
    --tw-prose-pre-code: #e5e7eb;
    --tw-prose-pre-bg: #1f2937;
    --tw-prose-th-borders: #d1d5db;
    --tw-prose-td-borders: #e5e7eb;
}

/* Inline Code Styling */
.prose code:not(pre code) {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-weight: 600;
    color: #dc2626;
}

/* Remove default backticks from Tailwind prose */
.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
    content: '' !important;
}

/* Table Styling */
.prose table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
}

.prose thead {
    border-bottom: 2px solid #e5e7eb;
}

.prose thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #111827;
    background-color: #f9fafb;
}

.prose tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.prose tbody td {
    padding: 0.75rem 1rem;
    vertical-align: top;
}

.prose tbody tr:hover {
    background-color: #f9fafb;
}

/* Pre/Code block styling */
.prose pre {
    background-color: #1f2937;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-weight: 400;
}