:root {
    --border: #dedfe0;
    --radius: 12px;
    --pad: 14px;
    --gap: 10px;
    --focus: 1px solid #00677f;
    --shadow: 0 1px 2px rgba(16,24,32,.06);
}

/* --- Desktop tabs --- */
.caribou-faq .tabs {
    display: none;
    overflow: clip;
}
.caribou-faq .tablist {
    display: flex;
    padding: 0 6px;
}
.caribou-faq .tab {
    background: #f5f5f5;
    color: #444;
    border: 1px solid #c4c6c8;
    border-bottom: 1px solid #c4c6c8;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    z-index: 1;
}
.caribou-faq .tab:first-child {
    margin-left: 5px;
}
.caribou-faq .tab:hover, .caribou-faq .tab:focus {
    border: 1px solid #c4c6c8;
    border-bottom: 1px solid #c4c6c8;
}
.caribou-faq .tab[aria-selected="true"] {
    background: #fff;
    color: #293038;
    border-bottom: 1px solid #fff;
    z-index: 2;
    font-weight: bold;
}
.caribou-faq .tab:focus-visible { outline: var(--focus); outline-offset: 2px; }

.caribou-faq .tabpanel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
}
.caribou-faq .tabpanel[hidden] { display: none; }

/* --- Mobile cards / accordion --- */
.caribou-faq .cards {
    display: block;
    display: grid;
    gap: var(--gap);
}
.caribou-faq .card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: clip;
    box-shadow: var(--shadow);
    background: white;
}
.caribou-faq .card__header {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font: inherit;
    cursor: pointer;
    background: #f5f5f5;
    color: #434950;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.caribou-faq .card__header[aria-expanded="true"] {
    background: #fff;
    color: #293038;
}
.caribou-faq .card__header:focus-visible {
    outline: var(--focus);
    outline-offset: 2px;
}

.caribou-faq .chev {
    inline-size: 10px;
    block-size: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 150ms ease;
    flex: none;
    margin-right: 2px;
}
.caribou-faq .card__header[aria-expanded="true"] .chev {
    transform: rotate(-135deg);
}

.caribou-faq .card__panel {
    padding: 0 var(--pad) var(--pad);
}
.caribou-faq .card__panel[hidden] { display: none; }

/* --- Breakpoint: show tabs on desktop, cards on mobile --- */
@media (min-width: 1399px) {
    .caribou-faq .tabs { display: block; }
    .caribou-faq .cards { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .caribou-faq .chev { transition: none; }
}

.caribou-faq .question-and-answer {
    margin-bottom: 2rem;
}
.caribou-faq .question-and-answer h3 {
    cursor: pointer;
}