/* Tobor Feature Section Widget — base defaults match Figma node 1768:24008 exactly. */

.tobor-fsec {
    background-color: #ffffff;
    padding: 64px 96px;
}

.tobor-fsec__inner {
    display: flex;
    gap: 98px;
    align-items: center;
    width: 100%;
}

.tobor-fsec__media {
    flex: 0 0 500px;
    width: 500px;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.tobor-fsec__media img,
.tobor-fsec__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.tobor-fsec__video-embed,
.tobor-fsec__video-embed > *,
.tobor-fsec__video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    display: block;
}

.tobor-fsec__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.tobor-fsec__title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #171717;
}

.tobor-fsec__desc {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

/* Accordion */

.tobor-fsec__accordion {
    width: 100%;
    max-width: 604px;
    display: flex;
    flex-direction: column;
}

.tobor-fsec__acc-header {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    text-align: left;
}

.tobor-fsec__acc-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #171717;
}

.tobor-fsec__acc-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.tobor-fsec__acc-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.tobor-fsec__acc-header.is-open .tobor-fsec__acc-icon {
    transform: rotate(180deg);
}

.tobor-fsec__acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    width: 100%;
}

.tobor-fsec__acc-body.is-collapsed {
    display: none;
}

.tobor-fsec__item-label {
    margin: 0;
    padding-right: 48px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #525252;
}

.tobor-fsec__item-text {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
}

/* Buttons */

.tobor-fsec__buttons {
    display: flex;
    gap: 17px;
    align-items: flex-start;
}

.tobor-fsec__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 128px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tobor-fsec__btn--primary {
    background-color: #99c300;
    /* Same 2px border as the secondary button so both are the same height. */
    border: 2px solid #99c300;
}

.tobor-fsec__btn--primary:hover {
    background-color: #7da300;
    color: #171717;
}

.tobor-fsec__btn--secondary {
    background: transparent;
    border: 2px solid #171717;
}

.tobor-fsec__btn--secondary:hover {
    color: #171717;
}

/* Responsive */

/* Tablet — Figma 1757:22211 (768px): stacked, full-width media. */
@media (max-width: 1024px) {
    .tobor-fsec {
        padding: 64px 32px;
    }

    .tobor-fsec__inner {
        flex-direction: column;
        gap: 32px;
    }

    .tobor-fsec__title {
        font-size: 40px;
        line-height: 48px;
    }

    .tobor-fsec__media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .tobor-fsec__accordion {
        max-width: none;
    }
}

/* Mobile — Figma 1757:21692 (390px). */
@media (max-width: 767px) {
    .tobor-fsec {
        padding: 32px 16px;
    }

    .tobor-fsec__title {
        font-size: 32px;
        line-height: 40px;
    }

    /* Stacked full-width CTAs on mobile, per design 1757-21724. The 17px base
       gap is the designed spacing; the section's 16px side padding makes each
       button span the content width. */
    .tobor-fsec__buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .tobor-fsec__btn {
        width: 100%;
    }
}

/* Wide screens: content capped at design width. */
.tobor-fsec__inner {
    max-width: 1248px;
    margin: 0 auto;
}