:root{--legacy-0e3f6c:#0e3f6c;--legacy-45b5c7:#45b5c7;--legacy-4b5563:#4b5563;--legacy-e5e7eb:#e5e7eb}
.faq-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }</p>
<p>        .faq-item {
            background: var(--color-background, #ffffff);
            margin-bottom: 1rem;
            border-radius:var(--radius-md, 10px);
            border: 1px solid var(--legacy-e5e7eb, #E5E7EB);
            transition: all 0.3s ease;
            overflow: hidden;
        }</p>
<p>        .faq-item[open] {
            border-color: var(--legacy-45b5c7, #45B5C7);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        }</p>
<p>        summary {
            padding: 1.25rem;
            font-weight: 700;
            color: var(--legacy-0e3f6c, #0E3F6C);
            cursor: pointer;
            list-style: none;
            position: relative;
            outline: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }</p>
<p>        summary::-webkit-details-marker {
            display: none;
        }</p>
<p>        summary::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--legacy-45b5c7, #45B5C7);
            font-weight: 400;
        }</p>
<p>        .faq-item[open] summary::after {
            content: '−';
        }</p>
<p>        .faq-content {
            padding: 0 1.25rem 1.25rem 1.25rem;
            color: var(--legacy-4b5563, #4B5563);
            line-height: 1.6;
            font-size: 0.95rem;
        }</p>
<p>        @media (max-width: 768px) {
            .faq-wrapper {
                grid-template-columns: 1fr;
            }
            .faq-content {
                font-size: 0.9rem;
            }
        }