.faq-back, .faq-share {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.faq-back { margin-bottom: 1.5rem; }
.faq-item { scroll-margin-top: 1.5rem; }
.faq-item summary { cursor: pointer; line-height: 1.5; }
.faq-item summary::marker { color: #3b82f6; }
.faq-item[open] summary { padding-bottom: 1rem; }
.faq-item:target { outline: 2px solid #3b82f6; outline-offset: 3px; }
.faq-answer { line-height: 1.7; }
.faq-answer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .25rem 0 1rem;
}
.faq-answer-top .faq-answer-label { margin-top: 0; }
.faq-share { justify-content: flex-end; font-size: .875rem; }
.faq-share button { cursor: pointer; }
.faq-intro {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(120deg, rgba(219,234,254,.9), rgba(240,253,250,.8));
    border: 1px solid rgba(0,90,143,.12);
}
.faq-eyebrow, .faq-answer-label {
    display: block;
    color: #005a8f;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .65rem;
}
#faq-heading { letter-spacing: -.035em; line-height: 1.15; margin-bottom: .75rem; }
.faq-lead { font-size: 1.1rem; line-height: 1.65; }
.faq-lead strong { color: #005a8f; font-weight: 600; }
.faq-hint { margin-top: .35rem; line-height: 1.5; max-width: none; white-space: nowrap; }
.faq-keep-together { white-space: nowrap; }
.faq-back { width: fit-content; transition: gap .2s ease; }
.faq-back:hover { gap: 1rem; }
.faq-item { border: 1px solid transparent; transition: border-color .2s ease; }
.faq-item:hover, .faq-item[open] { border-color: #93c5fd; }
.faq-item summary { display: flex; align-items: center; gap: .9rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-number {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    background: #eff6ff;
    color: #005a8f;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.faq-question { flex: 1; }
.faq-toggle { font-size: 1.5rem; color: #005a8f; transition: transform .2s ease; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-answer-label { margin-top: .25rem; }
.faq-answer > p { padding-left: 1rem; border-left: 3px solid #93c5fd; }
.faq-answer-intro { margin-bottom: 1.25rem; }
.faq-steps { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.faq-step {
    min-width: 0;
    max-width: 100%;
    padding: 1.25rem;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    background: #f8fafc;
}
.faq-step-copy { min-width: 0; margin-bottom: 1rem; overflow-wrap: anywhere; }
.faq-step-badge {
    display: inline-block;
    margin-bottom: .45rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    color: #075985;
    background: #e0f2fe;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.faq-step h3 { margin: 0 0 .4rem; color: #0f172a; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.faq-step p { margin: 0; color: #475569; line-height: 1.65; }
.faq-step figure { min-width: 0; max-width: 100%; margin: 0; }
.faq-step img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 34rem;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: white;
}
.faq-figure-medium { max-width: 42rem; }
.faq-figure-small { max-width: 22rem; }
.faq-step figcaption { margin-top: .55rem; color: #64748b; font-size: .82rem; line-height: 1.5; }
.faq-success {
    margin-top: 1.25rem;
    padding: 1rem !important;
    border: 1px solid #86efac !important;
    border-left-width: 4px !important;
    border-radius: .75rem;
    background: #f0fdf4;
    color: #166534;
}
.faq-item[open] .faq-answer { animation: faq-reveal .2s ease-out; }
.faq-share button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    background: #eff6ff;
    border-radius: .5rem;
    text-decoration: none;
    color: #005a8f;
}
.faq-share button svg { width: 1rem; height: 1rem; }
.faq-share button:hover { background: #dbeafe; }
.dark .faq-intro { background: linear-gradient(120deg, #17334b, #183c40); border-color: #33556d; }
.dark .faq-eyebrow, .dark .faq-answer-label, .dark .faq-lead strong,
.dark .faq-toggle { color: #7dd3fc; }
.dark .faq-number, .dark .faq-share button { background: #243e55; color: #bae6fd; }
.dark .faq-share button:hover { background: #31536e; }
.dark .faq-step { border-color: #334155; background: #172033; }
.dark .faq-step-badge { color: #bae6fd; background: #243e55; }
.dark .faq-step h3 { color: #f8fafc; }
.dark .faq-step p, .dark .faq-step figcaption { color: #cbd5e1; }
.dark .faq-step img { border-color: #475569; background: #f8fafc; }
.dark .faq-success { border-color: #166534 !important; background: #052e16; color: #bbf7d0; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
    .faq-intro { padding: 1.25rem; }
    .faq-hint { white-space: normal; }
    .faq-item summary { gap: .65rem; }
    .faq-answer { padding-left: 1rem !important; padding-right: 1rem !important; }
    .faq-answer-top { align-items: flex-start; }
    .faq-share button { padding: .3rem .5rem; }
    .faq-step { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-back, .faq-item, .faq-toggle { transition: none; }
    .faq-item[open] .faq-answer { animation: none; }
}
.faq-back:focus-visible, .faq-item summary:focus-visible,
.faq-share button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 3px;
}
main .page-layout { min-width: 0; align-items: flex-start; flex-direction: row; }
.page-sidebar { width: 20rem; flex-shrink: 0; }
.page-sidebar .faq-back { margin-bottom: 1rem; }
body > .min-h-screen, body > .min-h-screen > .flex-1 { min-width: 0; }
@media (max-width: 767px) {
    main .page-layout { flex-direction: column; align-items: stretch; }
    .page-sidebar { width: 100%; }
    .page-sidebar .faq-back { margin-bottom: 0; }
}

@media (min-width: 768px) {
 .page-sidebar { position: relative; margin-top: 15.45rem; }
 .page-sidebar > .faq-back { position: absolute; bottom: 100%; left: 0; margin-bottom: 1rem; }
}

@media (max-width: 767px) {
 main .page-layout > section { width: 100%; flex: none; min-width: 0; }
 .page-sidebar { margin-top: 0 !important; }
 .faq-question, .faq-answer { overflow-wrap: anywhere; min-width: 0; }
}
