/* ============================================================
   05-components.css
   Buttons, CTA variants, cards, nav, header, footer, mobile menu,
   FAQ accordion, badges, toast, eyebrow, chips, grid-bg, hover-dim.
   Mirrors src/app/globals.css utilities.
   ============================================================ */

/* ---------- Selection ---------- */
::selection { background: var(--ss-lime); color: var(--ss-black); }

/* ---------- Pill CTA base (Rayo-inspired) ---------- */
.ss-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: var(--ss-radius-pill);
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        font-size: var(--ss-fs-base);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        border: 1px solid transparent;
        transition: transform 0.18s var(--ss-ease),
                box-shadow 0.18s var(--ss-ease),
                background 0.18s var(--ss-ease),
                color 0.18s var(--ss-ease);
}

.ss-cta:active { transform: translateY(1px) scale(0.99); }
.ss-cta:focus-visible {
        outline: 2px solid var(--ss-black);
        outline-offset: 3px;
}

.ss-cta__icon,
.ss-cta__icon svg { width: 18px; height: 18px; display: inline-flex; }

.ss-cta--lg { padding: 1rem 1.75rem; font-size: var(--ss-fs-md); }
.ss-cta--sm { padding: 0.55rem 0.95rem; font-size: var(--ss-fs-sm); }

/* Variant A — violet pastel (default) */
.ss-cta--variant-a {
        background: var(--ss-violet);
        color: #1a1330;
        box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 18px -8px rgba(184,165,230,0.9);
}
.ss-cta--variant-a:hover {
        background: #cdb9f0;
        transform: translateY(-1px);
        color: #1a1330;
}

/* Variant B — turquoise soft */
.ss-cta--variant-b {
        background: var(--ss-turquoise);
        color: #08363a;
        box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 18px -8px rgba(167,227,231,0.9);
}
.ss-cta--variant-b:hover {
        background: #bdebee;
        transform: translateY(-1px);
        color: #08363a;
}

/* Variant C — lime soft with dark text */
.ss-cta--variant-c {
        background: var(--ss-lime);
        color: #1f2a06;
        box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 6px 18px -8px rgba(229,247,146,0.9);
}
.ss-cta--variant-c:hover {
        background: #eef9a8;
        transform: translateY(-1px);
        color: #1f2a06;
}

/* Dark CTA (secondary solid) */
.ss-cta--dark {
        background: var(--ss-black);
        color: var(--ss-offwhite);
        --ss-cta-bg: var(--ss-black);
        --ss-cta-fg: var(--ss-offwhite);
}
.ss-cta--dark:hover { background: #1f1f1f; transform: translateY(-1px); color: var(--ss-offwhite); }

/* Outline CTA */
.ss-cta--outline,
.ss-cta--ghost {
        background: transparent;
        color: var(--ss-black);
        border: 1.5px solid var(--ss-black);
        box-shadow: none;
}
.ss-cta--outline:hover,
.ss-cta--ghost:hover {
        background: var(--ss-black);
        color: var(--ss-offwhite);
}

/* WhatsApp-specific hook keeps .ss-cta--whatsapp class working with the variant colors */
.ss-cta--whatsapp { /* inherits from variant class on the same element */ }

/* ---------- Cards ---------- */
.ss-card {
        background: var(--card);
        border: 1px solid var(--ss-border);
        border-radius: 1.25rem;
        padding: var(--ss-space-5);
        box-shadow: var(--ss-shadow-sm);
        transition: transform 0.22s var(--ss-ease),
                box-shadow 0.22s var(--ss-ease),
                border-color 0.22s var(--ss-ease);
}

.ss-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 50px -28px rgba(12,12,12,0.22);
        border-color: #d6d2cc;
}

.ss-card__icon {
        width: 44px;
        height: 44px;
        border-radius: var(--ss-radius-md);
        background: var(--ss-gray-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ss-black);
        margin-bottom: var(--ss-space-4);
}

.ss-card__icon svg { width: 24px; height: 24px; }

.ss-card--violet    .ss-card__icon { background: var(--ss-violet); }
.ss-card--turquoise .ss-card__icon { background: var(--ss-turquoise); }
.ss-card--lime      .ss-card__icon { background: var(--ss-lime); }
.ss-card--black     .ss-card__icon { background: var(--ss-black); color: var(--ss-white); }

.ss-card__title {
        font-size: var(--ss-fs-lg);
        margin-bottom: var(--ss-space-2);
}

.ss-card__text {
        color: var(--ss-gray);
        font-size: var(--ss-fs-sm);
}

.ss-card__benefit {
        font-size: var(--ss-fs-sm);
        color: var(--ss-ink-soft);
        margin-top: var(--ss-space-3);
        padding-top: var(--ss-space-3);
        border-top: 1px dashed var(--ss-line);
}

.ss-card__actions {
        display: flex;
        gap: var(--ss-space-2);
        margin-top: var(--ss-space-4);
        flex-wrap: wrap;
}

.ss-card--highlight {
        border: 2px solid var(--ss-black);
        box-shadow: var(--ss-shadow-md);
}

/* ---------- Chips & eyebrows ---------- */
.ss-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        padding: 0.3rem 0.7rem;
        border-radius: var(--ss-radius-pill);
        background: var(--ss-gray-light);
        color: var(--ss-gray);
}

.ss-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--ss-gray);
}

.ss-eyebrow::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: var(--ss-violet);
        display: inline-block;
}

/* ---------- Soft radial blurs (decorative) ---------- */
.ss-blur-violet    { background: radial-gradient(circle at center, rgba(184,165,230,0.55), transparent 70%); }
.ss-blur-turquoise { background: radial-gradient(circle at center, rgba(167,227,231,0.55), transparent 70%); }
.ss-blur-lime      { background: radial-gradient(circle at center, rgba(229,247,146,0.5),  transparent 70%); }

/* ---------- Subtle grid background ---------- */
.ss-grid-bg {
        background-image:
                linear-gradient(to right, rgba(12,12,12,0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(12,12,12,0.04) 1px, transparent 1px);
        background-size: 44px 44px;
}

/* ---------- Underline link on hover ---------- */
.ss-link-underline { position: relative; }
.ss-link-underline::after {
        content: "";
        position: absolute;
        left: 0; bottom: -2px;
        width: 100%; height: 1.5px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s var(--ss-ease);
}
.ss-link-underline:hover::after { transform: scaleX(1); }

/* ---------- Sibling-dim hover list ---------- */
.ss-list-hover-dim:hover .ss-list-hover-dim__item { opacity: 0.35; }
.ss-list-hover-dim .ss-list-hover-dim__item:hover { opacity: 1 !important; }

/* ---------- Custom scrollbar for long lists ---------- */
.ss-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ss-scroll::-webkit-scrollbar-track { background: transparent; }
.ss-scroll::-webkit-scrollbar-thumb { background: var(--ss-gray-light); border-radius: 9999px; }
.ss-scroll::-webkit-scrollbar-thumb:hover { background: #d6d2cc; }

/* ---------- Header ---------- */
.ss-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: var(--ss-z-header);
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: background var(--ss-dur) var(--ss-ease),
                border-color var(--ss-dur) var(--ss-ease),
                backdrop-filter var(--ss-dur) var(--ss-ease),
                -webkit-backdrop-filter var(--ss-dur) var(--ss-ease);
}

.ss-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ss-space-4);
        min-height: 84px;
        transition: min-height var(--ss-dur) var(--ss-ease);
}

.ss-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--ss-fs-md);
        letter-spacing: var(--ss-tracking-tight);
        text-decoration: none;
        color: var(--ss-black);
}

.ss-logo img {
        max-height: 32px;
        width: auto;
        display: block;
}

.ss-logo__symbol {
        height: 28px;
        width: auto;
        transition: transform var(--ss-dur) var(--ss-ease);
}

.ss-logo:hover .ss-logo__symbol { transform: scale(1.05); }

.ss-logo__img {
        height: 28px;
        width: auto;
}

/* Wordmark "smartsynergy" — matches Next.js preview */
.ss-logo__text {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.125rem;
        letter-spacing: -0.02em;
        color: var(--ss-black);
        line-height: 1;
}
.ss-logo__text-light { color: var(--ss-gray); font-weight: 300; }

/* Keep old classes for backward compat */
.ss-logo__wordmark {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.125rem;
        letter-spacing: -0.02em;
        color: var(--ss-black);
}
.ss-logo__wordmark-light { color: var(--ss-gray); font-weight: 300; }

.ss-logo__mark {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--ss-black);
        color: var(--ss-white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 800;
}

.ss-logo--footer img { max-height: 36px; filter: brightness(0) invert(1); }

.ss-header__actions {
        display: inline-flex;
        align-items: center;
        gap: var(--ss-space-3);
}

/* Primary nav */
.ss-nav {
        display: flex;
        align-items: center;
        gap: var(--ss-space-2);
}

.ss-nav ul {
        list-style: none;
        display: flex;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
}

.ss-nav a {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.9rem;
        border-radius: var(--ss-radius-pill);
        font-size: var(--ss-fs-sm);
        font-weight: 500;
        color: var(--ss-ink-soft);
        text-decoration: none;
        transition: background var(--ss-dur-fast) var(--ss-ease),
                color var(--ss-dur-fast) var(--ss-ease);
}

.ss-nav a:hover,
.ss-nav .current-menu-item > a {
        background: var(--ss-gray-light);
        color: var(--ss-black);
}

.ss-nav li { position: relative; }

.ss-nav .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--ss-white);
        border: 1px solid var(--ss-line);
        border-radius: var(--ss-radius-md);
        box-shadow: var(--ss-shadow-md);
        padding: 0.5rem;
        min-width: 220px;
        flex-direction: column;
        gap: 0;
}

.ss-nav li:focus-within > .sub-menu,
.ss-nav li:hover > .sub-menu {
        display: flex;
}

.ss-nav .sub-menu a { width: 100%; }

/* Mobile toggle */
.ss-nav-toggle {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border-radius: var(--ss-radius-pill);
        background: var(--ss-black);
        color: var(--ss-white);
        border: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform var(--ss-dur-fast) var(--ss-ease),
                background var(--ss-dur-fast) var(--ss-ease);
}
.ss-nav-toggle:hover { transform: scale(1.05); }
.ss-nav-toggle svg { width: 22px; height: 22px; }

/* ---------- Footer ---------- */
.ss-footer {
        background: var(--ss-black);
        color: var(--ss-white);
        padding-block: var(--ss-space-7) var(--ss-space-5);
}

.ss-footer a {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
}

.ss-footer a:hover { color: var(--ss-white); }

.ss-footer__grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--ss-space-5);
}

.ss-footer__col h4 {
        color: var(--ss-white);
        font-size: var(--ss-fs-sm);
        letter-spacing: var(--ss-tracking-wider);
        text-transform: uppercase;
        margin-bottom: var(--ss-space-3);
}

.ss-footer ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: var(--ss-fs-sm);
}

.ss-footer__bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: var(--ss-space-6);
        padding-top: var(--ss-space-4);
        display: flex;
        justify-content: space-between;
        gap: var(--ss-space-3);
        flex-wrap: wrap;
        font-size: var(--ss-fs-xs);
        color: rgba(255, 255, 255, 0.6);
}

/* ---------- FAQ accordion ---------- */
.ss-faq {
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-3);
        max-width: 820px;
        margin-inline: auto;
}

.ss-faq details,
.ss-faq__item {
        background: var(--ss-white);
        border: 1px solid var(--ss-line);
        border-radius: var(--ss-radius-md);
        box-shadow: var(--ss-shadow-xs);
        overflow: hidden;
}

.ss-faq summary {
        list-style: none;
        cursor: pointer;
        padding: var(--ss-space-4) var(--ss-space-5);
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--ss-space-3);
}

.ss-faq summary::-webkit-details-marker { display: none; }

.ss-faq summary::after {
        content: "+";
        font-size: 1.25rem;
        color: var(--ss-gray);
        transition: transform var(--ss-dur) var(--ss-ease);
}

.ss-faq details[open] summary::after,
.ss-faq__item[open] summary::after {
        content: "−";
}

.ss-faq__answer {
        padding: 0 var(--ss-space-5) var(--ss-space-5);
        color: var(--ss-gray);
}

/* ---------- Toast / status ---------- */
.ss-toast {
        position: fixed;
        bottom: var(--ss-space-5);
        left: 50%;
        transform: translateX(-50%) translateY(120%);
        background: var(--ss-black);
        color: var(--ss-white);
        padding: var(--ss-space-3) var(--ss-space-5);
        border-radius: var(--ss-radius-pill);
        box-shadow: var(--ss-shadow-lg);
        font-size: var(--ss-fs-sm);
        z-index: var(--ss-z-toast);
        transition: transform var(--ss-dur) var(--ss-ease);
}

.ss-toast.is-visible { transform: translateX(-50%) translateY(0); }

/* ============================================================
   v2.4.0 — Header glass scroll state + CTA block variant
   ============================================================ */

/* Header scrolled state */
.ss-header--scrolled {
        background: rgba(247, 245, 242, 0.88) !important;
        backdrop-filter: saturate(180%) blur(16px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
        border-bottom-color: rgba(12, 12, 12, 0.08) !important;
        box-shadow: 0 1px 12px rgba(12, 12, 12, 0.04);
}

.ss-header--scrolled .ss-header__inner {
        min-height: 68px;
}

/* Home: transparent header at top */
.ss-front .ss-header:not(.ss-header--scrolled) {
        background: transparent;
        border-bottom-color: transparent;
}

.admin-bar .ss-header {
        top: 32px;
}

.ss-theme:not(.ss-front) .ss-main {
        padding-top: calc(var(--ss-space-7) + 84px);
}

/* Header pill effect */
.ss-header__inner {
        background: transparent;
        transition: all 0.3s var(--ss-ease);
}

.ss-front .ss-header--scrolled .ss-header__inner,
.ss-header--scrolled .ss-header__inner {
        /* Optional: add subtle pill background on scroll */
}

/* Mobile menu — full-screen split layout v2.4.0 */
.ss-mobile-menu {
        position: fixed;
        inset: 0;
        z-index: var(--ss-z-mobile-menu);
        background: rgba(12, 12, 12, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        color: var(--ss-offwhite);
        display: flex;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s var(--ss-ease), visibility 0.4s var(--ss-ease);
        transform: none;
        padding: 0;
}

.ss-mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
}

.ss-mobile-menu__panel-left {
        flex: 0 0 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--ss-space-5);
        border-right: 1px solid rgba(247, 245, 242, 0.1);
        overflow-y: auto;
}

.ss-mobile-menu__panel-right {
        flex: 0 0 40%;
        background: rgba(12, 12, 12, 0.6);
        padding: var(--ss-space-5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

.ss-mobile-menu__nav-item {
        display: flex;
        align-items: center;
        gap: var(--ss-space-4);
        padding: var(--ss-space-2) 0;
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.4s var(--ss-ease), transform 0.4s var(--ss-ease);
}

.ss-mobile-menu.is-open .ss-mobile-menu__nav-item {
        opacity: 1;
        transform: translateX(0);
}

.ss-mobile-menu__nav-idx {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--ss-violet);
        opacity: 0;
        transition: opacity 0.2s;
        min-width: 2.5rem;
}

.ss-mobile-menu__nav-item:hover .ss-mobile-menu__nav-idx {
        opacity: 1;
}

.ss-mobile-menu__nav-link {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        color: var(--ss-offwhite);
        text-decoration: none;
        transition: color 0.2s var(--ss-ease);
        line-height: 1.2;
}

.ss-mobile-menu__nav-link:hover {
        color: var(--ss-violet);
}

.ss-mobile-menu__status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.7rem;
        font-family: var(--font-mono);
        text-transform: uppercase;
        color: rgba(247, 245, 242, 0.5);
}

.ss-mobile-menu__status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #34d399;
        position: relative;
}

.ss-mobile-menu__status-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: #34d399;
        animation: ss-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ss-ping {
        75%, 100% { transform: scale(2.2); opacity: 0; }
}

.ss-mobile-menu__service-chip {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border: 1px solid rgba(247, 245, 242, 0.15);
        color: rgba(247, 245, 242, 0.6);
        padding: 0.35rem 0.75rem;
        border-radius: var(--ss-radius-pill);
        text-decoration: none;
        transition: border-color 0.2s, color 0.2s;
}

.ss-mobile-menu__service-chip:hover {
        border-color: var(--ss-violet);
        color: var(--ss-violet);
}

.ss-mobile-menu__top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--ss-space-5);
}

.ss-mobile-menu__mono {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(247, 245, 242, 0.4);
}

.ss-mobile-menu__mono--accent {
        color: var(--ss-violet);
        margin-bottom: var(--ss-space-3);
        display: block;
}

.ss-mobile-menu__brand-desc {
        font-size: var(--ss-fs-sm);
        color: rgba(247, 245, 242, 0.6);
        line-height: var(--ss-lh-base);
        margin: 0;
}

.ss-mobile-menu__services-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
}

.ss-mobile-menu__cta-wrap {
        margin-top: var(--ss-space-4);
}

.ss-mobile-menu__bottom-bar {
        display: flex;
        justify-content: space-between;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(247, 245, 242, 0.3);
}

.ss-mobile-menu__close {
        width: 44px;
        height: 44px;
        border-radius: var(--ss-radius-md);
        border: 0;
        color: var(--ss-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-offwhite);
        cursor: pointer;
        transition: transform var(--ss-dur-fast) var(--ss-ease);
}

.ss-mobile-menu__close:hover { transform: scale(1.05); }

/* CTA block variant */
.ss-cta--block {
        display: flex;
        width: 100%;
        justify-content: center;
}

/* Mobile menu responsive: stack on mobile */
@media (max-width: 767px) {
        .ss-mobile-menu {
                flex-direction: column;
        }
        .ss-mobile-menu__panel-left {
                flex: none;
                height: 60%;
                border-right: none;
                border-bottom: 1px solid rgba(247, 245, 242, 0.1);
        }
        .ss-mobile-menu__panel-right {
                flex: none;
                height: 40%;
        }
}

@media (max-width: 480px) {
        .ss-header__inner {
                min-height: 72px;
        }

        .ss-header__cta {
                display: none;
        }
}

@media (max-width: 782px) {
        .admin-bar .ss-header {
                top: 46px;
        }
}

/* FAQ parity with src/site/journal-section.tsx */
.ss-faq-section {
        border-top: 1px solid rgba(12, 12, 12, 0.1);
        background: rgba(238, 234, 228, 0.4);
}

.ss-faq-section__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        align-items: start;
}

@media (min-width: 1024px) {
        .ss-faq-section__grid {
                grid-template-columns: 0.8fr 1.2fr;
        }
}

.ss-faq__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
}

.ss-faq__eyebrow svg {
        width: 16px;
        height: 16px;
}

.ss-faq__cta {
        margin-top: 1.5rem;
}

.ss-faq {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
        margin-inline: 0;
        width: 100%;
        border-top: 1px solid rgba(12, 12, 12, 0.1);
}

.ss-faq details,
.ss-faq__item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(12, 12, 12, 0.1);
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
}

.ss-faq summary {
        list-style: none;
        cursor: pointer;
        padding: 1.25rem 0;
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.2vw, 1.125rem);
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--ss-space-3);
        color: var(--ss-black);
}

.ss-faq summary::-webkit-details-marker { display: none; }

.ss-faq summary::after {
        content: "+";
        font-size: 1.25rem;
        color: var(--ss-gray);
        transition: transform var(--ss-dur) var(--ss-ease);
        flex-shrink: 0;
}

.ss-faq details[open] summary::after,
.ss-faq__item[open] summary::after {
        content: "-";
        transform: rotate(180deg);
}

.ss-faq__answer {
        padding: 0 0 1.25rem;
        color: var(--ss-gray);
        font-size: clamp(0.925rem, 1vw, 1rem);
        line-height: var(--ss-lh-base);
}