.qa-collapse-block { --qa-accent: #2563eb; --qa-accent-dark: #1d4ed8; --qa-tint: #eff6ff; box-sizing: border-box; position: relative; margin-block: 1.5rem; padding: clamp(1.1rem, 3vw, 1.7rem); border: 1px solid rgba(37, 99, 235, .16); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, var(--qa-tint) 180%); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); transition: transform .22s ease, box-shadow .22s ease; }
.qa-collapse-block:hover { transform: translateY(-2px); box-shadow: 0 15px 38px rgba(15, 23, 42, .12); }
.qa-collapse-block--answer { --qa-accent: #059669; --qa-accent-dark: #047857; --qa-tint: #ecfdf5; border-color: rgba(5, 150, 105, .18); }
.qa-collapse-block--joined-top { margin-bottom: 0; border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 8px 20px rgba(15, 23, 42, .06); }
.qa-collapse-block--joined-bottom { margin-top: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 12px 30px rgba(15, 23, 42, .10); }
.qa-collapse-block--joined-top:hover, .qa-collapse-block--joined-bottom:hover { transform: none; }
.qa-collapse-block--joined-top:hover + .qa-collapse-block--joined-bottom, .qa-collapse-block--joined-bottom:hover { box-shadow: 0 15px 38px rgba(15, 23, 42, .12); }
.qa-collapse-block__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.qa-collapse-block__badge { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .25rem .7rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--qa-accent), var(--qa-accent-dark)); box-shadow: 0 4px 12px color-mix(in srgb, var(--qa-accent) 30%, transparent); font-family: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
.qa-collapse-block--question .qa-collapse-block__number::before { counter-increment: qa-question; content: 'Question ' counter(qa-question); color: #334155; font-size: .87rem; font-weight: 700; }
body { counter-reset: qa-question; }
.qa-collapse-block__full, .qa-collapse-block__preview { color: #27364b; font-size: clamp(1rem, 1.8vw, 1.08rem); line-height: 1.75; }
.qa-collapse-block__full > :first-child, .qa-collapse-block__preview > :first-child { margin-top: 0; }
.qa-collapse-block__full > :last-child, .qa-collapse-block__preview > :last-child { margin-bottom: 0; }
.qa-collapse-block__preview { display: none; }
.qa-collapse-block__preview-label { color: var(--qa-accent-dark); font-weight: 800; }
.qa-collapse-block__preview p{ display: inline; margin: 0; }
.qa-collapse-block--ready.qa-collapse-block--collapsed .qa-collapse-block__preview { display: block; animation: qa-fade-in .24s ease; }
.qa-collapse-block--ready.qa-collapse-block--collapsed .qa-collapse-block__full { display: none; }
.qa-collapse-block--ready:not(.qa-collapse-block--collapsed) .qa-collapse-block__full { animation: qa-fade-in .24s ease; }
.qa-collapse-block__toggle { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.15rem; padding: .68rem 1rem; border: 1px solid color-mix(in srgb, var(--qa-accent) 32%, transparent); border-radius: 10px; color: var(--qa-accent-dark); background: rgba(255,255,255,.75); box-shadow: 0 2px 5px rgba(15,23,42,.04); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }
.qa-collapse-block__toggle:hover, .qa-collapse-block__toggle:focus-visible { color: #fff; background: var(--qa-accent); transform: translateY(-1px); outline: none; }
.qa-collapse-block__toggle:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .28); }
.qa-collapse-block__editor-note { color: #64748b; font-size: .8rem; font-style: italic; }
.qa-collapse-block--editor:hover { transform: none; }
@keyframes qa-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { .qa-collapse-block { border-radius: 14px; padding: 1rem; } .qa-collapse-block__header { align-items: flex-start; flex-direction: column; gap: .45rem; } .qa-collapse-block__toggle { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .qa-collapse-block, .qa-collapse-block__toggle { transition: none; } .qa-collapse-block__preview { animation: none; } }