/* ==========================================
   Design Tokens
   ========================================== */
:root {
    /* Brand Palette — extracted from logo */
    --brand-navy:    #101040;
    --brand-primary: #1090e0;
    --brand-cyan:    #40c0f0;
    --brand-light:   #a0e0f0;
    --brand-gray:    #c0d0e0;
    --brand-coral:   #f05040;

    /* Semantic aliases */
    --color-primary:     var(--brand-primary);
    --color-primary-hover:#0d7bc2;
    --color-surface:     #ffffff;
    --color-surface-alt: #f8fafd;
    --color-text:        #101040;
    --color-text-muted:  #64748b;
    --color-border:      #e2e8f0;
    --color-border-focus:var(--brand-primary);

    /* Status — kept as-is per brand decision */
    --color-success:     #10b981;
    --color-success-bg:  #ecfdf5;
    --color-error:       #ef4444;
    --color-error-bg:    #fef2f2;

    /* Animation */
    --anim-duration-fast: 0.3s;
    --anim-duration-base: 0.5s;
    --anim-duration-slow: 0.6s;
    --anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-ease-shake: cubic-bezier(.36,.07,.19,.97);

    /* Elevation */
    --shadow-brand:    0 4px 14px 0 rgba(16,144,224,0.15);
    --shadow-brand-lg: 0 10px 28px 0 rgba(16,144,224,0.20);
    --shadow-brand-xl: 0 20px 50px 0 rgba(16,144,224,0.25);

    /* Spacing Scale (8dp rhythm) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Card */
    --card-padding: var(--space-6);
    --card-radius: 1.5rem;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

    /* Input */
    --input-radius: 0.75rem;
    --input-padding: 0.75rem 1rem;

    /* Button Elevation */
    --btn-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --btn-shadow-hover: 0 6px 20px rgba(0,0,0,0.12);
    --btn-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);

    /* Rule Category Accents */
    --rule-validation-accent: #ef4444;
    --rule-cleanser-accent: #6366f1;
    --rule-transformer-accent: #10b981;

    /* Toast */
    --toast-radius: 1rem;
    --toast-padding: 1rem 1.25rem;
}

/* ==========================================
   Animations (.anim--*)
   ========================================== */

.anim--fade-in {
    animation: fadeIn 0.5s ease-out;
}

.anim--slide-in-from-top-1 {
    animation: slideInFromTop 0.5s ease-out;
}

.anim--slide-in-from-top-2 {
    animation: slideInFromTop 0.5s ease-out;
}

.anim--slide-in-from-left-2 {
    animation: slideInFromLeft 0.5s ease-out;
}

.anim--slide-in-from-bottom-4 {
    animation: slideUp 0.6s ease-out forwards;
}

.anim--slide-in-from-bottom-full {
    animation: slideInFromBottom 0.3s ease-out;
}

.anim--slide-out-to-bottom-full {
    animation: slideOutToBottom 0.3s ease-out forwards;
}

.anim--zoom-in {
    animation: zoomIn 0.4s var(--anim-ease-bounce);
}

.anim--zoom-in-50 {
    animation: zoomIn 0.4s var(--anim-ease-bounce);
}

.anim--zoom-in-95 {
    animation: zoomIn 0.4s var(--anim-ease-bounce);
}

.anim--shake {
    animation: shake var(--anim-duration-fast) var(--anim-ease-shake) both;
    border: 2px solid var(--color-error) !important;
    background-color: var(--color-error-bg) !important;
}

.anim--pulse-soft {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.anim--fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* ==========================================
   Keyframes
   ========================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromBottom {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideOutToBottom {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%        { opacity: .5; }
}

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ==========================================
   Utilities (.u-*)
   ========================================== */
.u-hidden {
    display: none !important;
}

/* ==========================================
   Accessibility: Reduced Motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .anim--fade-in,
    .anim--slide-in-from-top-1,
    .anim--slide-in-from-top-2,
    .anim--slide-in-from-left-2,
    .anim--slide-in-from-bottom-4,
    .anim--slide-in-from-bottom-full,
    .anim--slide-out-to-bottom-full,
    .anim--zoom-in,
    .anim--zoom-in-50,
    .anim--zoom-in-95,
    .anim--shake,
    .anim--pulse-soft,
    .anim--fade-out {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   Components: Brand & Logo
   ========================================== */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;

    transition: transform var(--anim-duration-fast) var(--anim-ease-bounce);
}

.logo-container:hover {
    transform: scale(1.1);
}

.logo-image {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;

    transform: scale(2);
    transform-origin: center;

    filter: drop-shadow(0 4px 6px rgba(16, 144, 224, 0.1));
    transition: filter var(--anim-duration-fast) ease;
}

.logo-container:hover .logo-image {
    filter: drop-shadow(0 8px 12px rgba(16, 144, 224, 0.25));
}

/* ==========================================
   Components: Footer
   ========================================== */
.site-footer {
    background: var(--brand-navy);
    position: relative;
    overflow: hidden;
}

/* Top gradient accent line */
.footer-border {
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--brand-primary) 20%,
        var(--brand-cyan) 50%,
        var(--brand-primary) 80%,
        transparent 100%
    );
    opacity: 0.7;
}

/* 3-column grid: 2:1:1 ratio with generous gap */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0 2rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 2rem 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* Column wrapper */
.footer-col {
    min-width: 0;
}

/* Column titles — thin uppercase labels */
.footer-col-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-light);
    margin-bottom: 0.875rem;
}

/* Navigation list */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Link style */
.footer-link {
    font-size: 0.875rem;
    font-weight: 450;
    color: #8492a6;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    transition: color 0.2s ease, transform 0.15s ease;
    position: relative;
}

.footer-link:hover {
    color: var(--brand-cyan);
    transform: translateX(2px);
}

.footer-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 4px;
    border-radius: 2px;
    color: var(--brand-cyan);
}

@media (prefers-reduced-motion: reduce) {
    .footer-link:hover {
        transform: none;
    }
}

/* Contact link — icon + text */
.footer-link--contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.footer-link-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--brand-primary);
}

/* Status badge */
.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    margin-bottom: 0.5rem;
    transition: background 0.3s ease;
}

.footer-status:hover {
    background: rgba(16, 185, 129, 0.12);
}

/* Pulsing dot */
.status-dot {
    position: relative;
    display: flex;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
}

.status-dot::before,
.status-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.status-dot::before {
    background: #10b981;
    z-index: 1;
}

.status-dot::after {
    background: #10b981;
    animation: footerPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.6;
}

@keyframes footerPing {
    0%   { transform: scale(1); opacity: 0.6; }
    75%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot::after {
        animation: none;
    }
}

.status-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6ee7b7;
    line-height: 1;
    white-space: nowrap;
}

/* Subtle separator */
.footer-separator {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(148, 163, 184, 0.12) 20%,
        rgba(148, 163, 184, 0.18) 50%,
        rgba(148, 163, 184, 0.12) 80%,
        transparent 100%
    );
}

/* Bottom bar */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0 1.25rem;
}

@media (max-width: 480px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Copyright */
.footer-copyright {
    font-size: 0.8125rem;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #8492a6;
}



/* ==========================================
   Components: Toast Notifications
   ========================================== */
.toast-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--toast-radius) var(--toast-radius);
    animation: toastProgress 4s linear forwards;
}

/* Toast entry — spring slide-up */
.anim--toast-enter {
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast exit — fast slide-down */
.anim--toast-exit {
    animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* Toast stack gap */
#toast-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================
   Rule List Items
   ========================================== */

/* Rule item — thin, clean, category left accent ( !important to beat Tailwind CDN ) */
.rule-item {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid transparent !important;
    border-radius: 0.75rem;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rule-item[data-rule-type="validation"] {
    border-left-color: var(--rule-validation-accent) !important;
}

.rule-item[data-rule-type="cleanser"] {
    border-left-color: var(--rule-cleanser-accent) !important;
}

.rule-item[data-rule-type="transformer"] {
    border-left-color: var(--rule-transformer-accent) !important;
}

/* Zebra striping via pure CSS — visible slate-100 alternate */
.rule-list .rule-item:nth-child(even) {
    background-color: #f1f5f9 !important;
}

/* Reorder / remove buttons */
.rule-item .move-btn,
.rule-item .remove-rule-btn {
    min-width: 26px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rule-item .move-btn:hover {
    background-color: #f0f8ff;
    color: var(--brand-primary);
}

.rule-item .remove-rule-btn:hover {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

/* ==========================================
   Custom Searchable Select
   ========================================== */

.custom-select-wrapper {
    position: relative;
    min-width: 0;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    text-align: left;
}

.custom-select-trigger:hover {
    background-color: #f0f8ff;
}

.custom-select-trigger:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.custom-select-placeholder {
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-value {
    color: #334155;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-chevron {
    transform: rotate(180deg);
}

.custom-select-wrapper.open .custom-select-dropdown {
    display: block !important;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 22rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
    z-index: 50;
    overflow: hidden;
    animation: dropdownEnter 0.15s ease-out;
}

@keyframes dropdownEnter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.custom-select-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.custom-select-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.8125rem;
    background: transparent;
    color: #334155;
}

.custom-select-search-input::placeholder {
    color: #94a3b8;
}

.custom-select-options {
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
    overscroll-behavior: contain;
}

.custom-select-group-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0.5rem;
    margin-top: 0.125rem;
}

.custom-select-group-header.validation {
    color: #ef4444;
    background-color: #fef2f2;
}

.custom-select-group-header.cleanser {
    color: #1090e0;
    background-color: #eff6ff;
}

.custom-select-group-header.transformer {
    color: #10b981;
    background-color: #ecfdf5;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    margin: 0 0.125rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: #334155;
    transition: background-color 0.1s ease;
}

.custom-select-option:hover,
.custom-select-option.kb-active {
    background-color: #eff6ff;
}

.custom-select-option.selected {
    background-color: #e0f2fe;
    font-weight: 600;
}

.custom-select-option .option-type-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.custom-select-option.validation .option-type-dot { background-color: #ef4444; }
.custom-select-option.cleanser   .option-type-dot { background-color: #1090e0; }
.custom-select-option.transformer .option-type-dot { background-color: #10b981; }

.custom-select-no-results {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ==========================================
   Buttons — unified hover/focus
   ========================================== */
button:not(:disabled),
a.btn-primary {
    transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
}

button:not(:disabled):hover,
a.btn-primary:hover {
    box-shadow: var(--btn-shadow-hover);
}

button:not(:disabled):active,
a.btn-primary:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .toast-progress-bar {
        animation: none !important;
    }

    .anim--toast-enter,
    .anim--toast-exit {
        animation: none !important;
    }

    .rule-item {
        transition: none;
    }

    #toast-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================
   Components: Help Icon Link
   ========================================== */

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.help-icon:hover,
.help-icon:focus-visible {
    color: var(--brand-primary);
    background: var(--brand-light);
}

.help-icon svg {
    width: 14px;
    height: 14px;
}

/* ==========================================
   Pages: Blog Post Content
   ========================================== */

.blog-post-body {
    max-width: 72ch;
}

.blog-post-body > p {
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #334155;
}

.blog-post-body > p:first-child {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 2.5rem;
}

.blog-post-body h2 {
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--brand-navy);
    letter-spacing: -0.02em;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid #e2e8f0;
}

.blog-post-body h2:first-of-type {
    margin-top: 2rem;
}

.blog-post-body h3 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.blog-post-body ul,
.blog-post-body ol {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.blog-post-body li {
    margin-bottom: 0.625rem;
    line-height: 1.75;
    color: #334155;
    font-size: 1rem;
}

.blog-post-body li strong {
    color: #1e293b;
}

.blog-post-body strong {
    color: #1e293b;
}

/* Inline Code — subtle pill */
.blog-post-body :not(pre) > code {
    background: #f1f5f9;
    color: #0d7bc2;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.375rem;
    font-size: 0.875em;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

/* Standalone Code Block — terminal aesthetic */
.blog-code-block {
    margin: 2.25rem 0;
    border-radius: 0.875rem;
    overflow: hidden;
    border: 1px solid #1e293b;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    background: #0b1121;
}

.blog-code-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #1a2332;
    border-bottom: 1px solid #1e3a5f;
}

.blog-code-block-dots {
    display: flex;
    gap: 0.4375rem;
}

.blog-code-block-dot {
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 50%;
    opacity: 0.9;
}

.blog-code-block-dot--red    { background: #ff5f56; }
.blog-code-block-dot--yellow { background: #ffbd2e; }
.blog-code-block-dot--green  { background: #27ca40; }

.blog-code-block-label {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-code-block pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.75;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.blog-code-block pre code {
    color: #e2e8f0;
    display: block;
    font-family: inherit;
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    border-radius: 0;
    white-space: pre;
}

/* Callout / Highlight Box */
.blog-callout {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 0.875rem;
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border-left: 4px solid var(--brand-primary);
}

.blog-callout-title {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-primary);
    margin-bottom: 0.375rem;
}

.blog-callout p {
    margin: 0;
    font-size: 0.9375rem;
    color: #1e293b;
    line-height: 1.7;
}

/* ==========================================
   Pages: FAQ
   ========================================== */
.faq-page {
    padding: 0.5rem 0;
}

.faq-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.5rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

/* FAQ accordion item — light page variant */
.faq-list .faq-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 0;
}

.faq-list .faq-item:last-child {
    border-bottom: none;
}

.faq-list .faq-item[open] {
    padding-bottom: 1.25rem;
}

.faq-list .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    padding: 0.125rem 0;
    list-style: none;
    transition: color 0.2s ease;
}

.faq-list .faq-question::-webkit-details-marker {
    display: none;
}

.faq-list .faq-question:hover {
    color: var(--brand-primary);
}

.faq-list .faq-question:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

.faq-list .faq-chevron {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.25s ease, color 0.2s ease;
}

.faq-list .faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

.faq-list .faq-answer {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #475569;
    padding: 0.625rem 0 0;
    margin: 0;
    max-width: 36rem;
}

@media (prefers-reduced-motion: reduce) {
    .faq-list .faq-chevron {
        transition: none;
    }
}