/* =====================================================================
   TEO Landing Page - Mobile Overrides (<= 768px)
   ---------------------------------------------------------------------
   Structure only — Figma 229:744 "TEO-Mobile Responsive" (375px).
   Content, images, and copy stay unchanged. Desktop landing.css is
   untouched; these rules only reposition existing nodes.
   ===================================================================== */

@media (max-width: 768px) {

    :root {
        --lp-art-w: 375px;
        --lp-s: var(--lp-art-scale, 1);
        --lp-pad: calc(20px * var(--lp-s));
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .lp-section {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        scroll-margin-top: 72px;
    }

    #fullpage {
        height: auto !important;
        overflow: visible !important;
    }

    .lp-video__menu,
    .lp-curriculum__logo,
    .lp-curriculum__menu,
    .lp-modules__logo,
    .lp-modules__menu,
    .lp-unique__logo,
    .lp-unique__menu,
    .lp-transform__logo,
    .lp-transform__menu,
    .lp-instructor__logo,
    .lp-instructor__menu,
    .lp-science__logo,
    .lp-science__menu,
    .lp-taleen__logo,
    .lp-taleen__menu,
    .lp-faq__logo,
    .lp-faq__menu {
        display: none !important;
    }

    .lp-header--on-hero .lp-header__logo,
    .lp-header--on-hero .lp-menu-btn,
    .lp-header .lp-header__logo,
    .lp-header .lp-menu-btn {
        opacity: 1 !important;
    }

    .lp-header__inner {
        padding: 16px 18px !important;
    }

    .lp-header__logo,
    .lp-header__logo img {
        height: 52px !important;
        width: auto !important;
    }

    .lp-header--on-hero,
    .lp-header__actions {
        display: none !important;
    }

    /* Global EN/AR + menu — Figma 229:2202 */
    .lp-hero__actions {
        display: flex !important;
        position: fixed !important;
        top: 16px !important;
        right: 18px !important;
        left: auto !important;
        width: auto !important;
        height: 32px !important;
        gap: 8px !important;
        padding: 0 !important;
        z-index: 110 !important;
    }

    .lp-hero__actions .lp-lang {
        display: inline-flex !important;
        height: 32px !important;
        padding: 4px !important;
    }

    .lp-hero__actions .lp-lang__btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
    }

    .lp-hero__menu {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0.341px solid #6d5f5a !important;
        border-radius: 340.479px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: 7 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .lp-hero__menu img {
        width: 13.91px !important;
        height: 13.91px !important;
    }

    /* =================================================================
       1. HERO — Figma 229:16  (375 × 812)
       ================================================================= */

    #hero,
    .lp-hero {
        --lp-art-w: 375px;
        --lp-art-h: 812px;
        position: relative;
        display: block !important;
        height: calc(var(--lp-art-h) * var(--lp-s)) !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        background: #f5f0eb !important;
    }

    .lp-hero__marble {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }

    .lp-hero__marble img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    #lp-hero-canvas {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        margin-left: calc(-187.5px * var(--lp-s)) !important;
        width: var(--lp-art-w) !important;
        height: var(--lp-art-h) !important;
        min-height: 0 !important;
        transform: scale(var(--lp-s)) !important;
        transform-origin: 0 0 !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .lp-hero__logo-t,
    .lp-hero__logo-e,
    .lp-hero__logo-sil {
        display: none !important;
    }

    .lp-hero__brand {
        display: block !important;
        position: absolute !important;
        left: 18px !important;
        top: 38px !important;
        width: 179px !important;
        height: 123.845px !important;
        max-width: none !important;
        object-fit: fill !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    .lp-hero__discover {
        position: absolute !important;
        left: 18px !important;
        top: 196px !important;
        width: 172.186px !important;
        margin: 0 !important;
        font-size: 33.394px !important;
        line-height: 20.871px !important;
        font-weight: 700 !important;
        color: #6d5f5a !important;
        z-index: 5 !important;
    }

    .lp-hero__elegance {
        position: absolute !important;
        left: 64.96px !important;
        top: 209.57px !important;
        font-size: 76.488px !important;
        line-height: 47.805px !important;
        white-space: nowrap !important;
        z-index: 6 !important;
    }

    .lp-hero__built {
        position: absolute !important;
        left: 18px !important;
        top: 257.57px !important;
        font-size: 22.958px !important;
        line-height: 20.871px !important;
        white-space: nowrap !important;
        z-index: 5 !important;
    }

    .lp-hero__cta {
        position: absolute !important;
        left: 18px !important;
        top: 313px !important;
        height: 42px !important;
        padding: 6.278px 16px !important;
        font-size: 18px !important;
        border-radius: 627.2px !important;
        z-index: 7 !important;
    }

    .lp-hero__model-blur,
    .lp-hero__model {
        position: absolute !important;
        width: 247.467px !important;
        height: 431px !important;
        left: calc(50% - 11.48px) !important;
        top: 381px !important;
        transform: translateX(-50%) !important;
        z-index: 2 !important;
    }

    .lp-hero__model-blur {
        opacity: 0.2 !important;
        filter: blur(9.375px) !important;
        z-index: 1 !important;
    }

    .lp-hero__model {
        filter: drop-shadow(-5.859px 9.961px 33.398px rgba(0, 0, 0, 0.13))
                drop-shadow(8.789px 9.961px 9.961px rgba(0, 0, 0, 0.09))
                drop-shadow(0 0 9.375px rgba(0, 0, 0, 0.25)) !important;
    }

    /* =================================================================
       2. VIDEO — Figma 229:38  (375 × 812)
       ================================================================= */

    .lp-video {
        height: calc(812px * var(--lp-s)) !important;
        min-height: calc(812px * var(--lp-s)) !important;
        background: #000 !important;
    }

    .lp-video__media,
    .lp-video__el {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .lp-video__gradient {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(378px * var(--lp-s)) !important;
        z-index: 1 !important;
    }

    .lp-video__bottom {
        position: absolute !important;
        left: calc(18px * var(--lp-s)) !important;
        top: calc(357px * var(--lp-s)) !important;
        width: calc(338px * var(--lp-s)) !important;
        max-width: calc(100% - 36px * var(--lp-s)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: calc(57px * var(--lp-s)) !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    .lp-video__text {
        width: 100% !important;
        max-width: none !important;
        font-size: calc(16px * var(--lp-s)) !important;
        line-height: 1.5 !important;
        pointer-events: auto !important;
    }

    .lp-video__brand {
        width: calc(248px * var(--lp-s)) !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: calc(15px * var(--lp-s)) !important;
        pointer-events: auto !important;
    }

    .lp-video__mark {
        width: calc(233px * var(--lp-s)) !important;
        height: calc(161px * var(--lp-s)) !important;
        aspect-ratio: auto !important;
    }

    .lp-video__cta {
        width: auto !important;
        height: calc(39.6px * var(--lp-s)) !important;
        padding: calc(6px * var(--lp-s)) calc(15px * var(--lp-s)) !important;
        font-size: calc(17px * var(--lp-s)) !important;
        border-radius: 591px !important;
    }

    /* =================================================================
       3. CURRICULUM — Figma 230:2299  (375 × 1132)
       ================================================================= */

    .lp-curriculum {
        background: #fff !important;
        padding-bottom: calc(40px * var(--lp-s)) !important;
    }

    .lp-curriculum__art {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: calc(563px * var(--lp-s)) !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }

    .lp-curriculum__marble {
        display: none !important;
    }

    .lp-curriculum__photo {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        right: auto !important;
        top: 0 !important;
    }

    .lp-curriculum__photo img {
        object-position: center top !important;
    }

    .lp-curriculum__fade {
        display: none !important;
    }

    .lp-curriculum__copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin: calc(18px * var(--lp-s)) calc(22px * var(--lp-s)) 0 !important;
        padding: 0 !important;
        gap: calc(32px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-curriculum__label {
        font-size: calc(20px * var(--lp-s)) !important;
        line-height: calc(42px * var(--lp-s)) !important;
    }

    .lp-curriculum__title {
        font-size: calc(32px * var(--lp-s)) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.6px !important;
    }

    .lp-curriculum__body {
        font-size: calc(15px * var(--lp-s)) !important;
        line-height: normal !important;
        text-align: justify !important;
    }

    /* =================================================================
       4. MODULES — Figma 230:2215  (376 × 1606)
       ================================================================= */

    .lp-modules {
        background: #4d4130 !important;
        padding-bottom: calc(40px * var(--lp-s)) !important;
    }

    .lp-modules__photo {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(563px * var(--lp-s)) !important;
        overflow: hidden !important;
        /* Figma 230:2212 — solid to y=265, fade to transparent at 563 */
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 47.07%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, #000 0%, #000 47.07%, transparent 100%) !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        mask-mode: alpha !important;
        z-index: 0 !important;
    }

    .lp-modules__photo img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        transform: none !important;
    }

    /* Desktop left-fade veil — hide so it cannot sit on the section bottom */
    .lp-modules__veil {
        display: none !important;
    }

    .lp-modules__heading {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: calc(333px * var(--lp-s)) !important;
        margin: calc(-88px * var(--lp-s)) var(--lp-pad) 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        z-index: 2 !important;
    }

    .lp-modules__label {
        font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif !important;
        font-size: calc(40px * var(--lp-s)) !important;
        line-height: calc(42px * var(--lp-s)) !important;
        color: #fff !important;
    }

    .lp-modules__subtitle {
        font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif !important;
        font-size: calc(20px * var(--lp-s)) !important;
        line-height: calc(26px * var(--lp-s)) !important;
        font-style: normal !important;
        color: #fff !important;
        max-width: 100% !important;
    }

    .lp-modules__list,
    .lp-modules__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: calc(18px * var(--lp-s)) !important;
        margin: calc(24px * var(--lp-s)) var(--lp-pad) 0 !important;
        padding: 0 !important;
        position: relative !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        overflow: visible !important;
        z-index: 2 !important;
    }

    .lp-modules__col {
        display: contents !important;
    }

    .lp-modules__item {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 0 0 calc(50px * var(--lp-s)) !important;
        gap: 0 !important;
    }

    .lp-modules__num {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: calc(36px * var(--lp-s)) !important;
        text-align: right !important;
        font-family: var(--lp-arabic) 'Instrument Serif', Georgia, serif !important;
        font-size: calc(40px * var(--lp-s)) !important;
        line-height: calc(42px * var(--lp-s)) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    .lp-modules__item p {
        margin: 0 !important;
        width: 100% !important;
        max-width: calc(283px * var(--lp-s)) !important;
        font-family: var(--lp-arabic) 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: calc(15px * var(--lp-s)) !important;
        line-height: normal !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .lp-modules__cta {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: calc(30px * var(--lp-s)) 0 0 var(--lp-pad) !important;
        width: auto !important;
        align-self: flex-start !important;
        height: calc(42px * var(--lp-s)) !important;
        padding: calc(6.278px * var(--lp-s)) calc(16px * var(--lp-s)) !important;
        border-radius: 627.2px !important;
        background: #cb1e31 !important;
        color: #fff !important;
        font-family: var(--lp-arabic) 'Geist', sans-serif !important;
        font-size: calc(18px * var(--lp-s)) !important;
        line-height: normal !important;
        white-space: nowrap !important;
        z-index: 2 !important;
    }

    /* =================================================================
       5. UNIQUE — Figma 230:2219  (375 × 1399)
       ================================================================= */

    .lp-unique {
        background: #603f22 !important;
        padding-bottom: calc(48px * var(--lp-s)) !important;
    }

    .lp-unique__photo {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(618px * var(--lp-s)) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        z-index: 0 !important;
    }

    .lp-unique__veil {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(120px * var(--lp-s)) !important;
        background: linear-gradient(to top, #603f22 0%, rgba(96, 63, 34, 0) 100%) !important;
        z-index: 1 !important;
    }

    .lp-unique__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: calc(15px * var(--lp-s)) var(--lp-pad) 0 !important;
        font-size: calc(48px * var(--lp-s)) !important;
        line-height: calc(47px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-unique__list {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: calc(31px * var(--lp-s)) var(--lp-pad) 0 !important;
        gap: calc(40px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-unique__item p {
        font-size: calc(18px * var(--lp-s)) !important;
        line-height: 1.5 !important;
        text-align: justify !important;
    }

    .lp-unique__bar {
        height: calc(122px * var(--lp-s)) !important;
    }

    .lp-unique__item--short .lp-unique__bar {
        height: calc(69px * var(--lp-s)) !important;
    }

    /* =================================================================
       6. TRANSFORM — Figma 230:2337  (375 × 881)
       Photo mask: Figma 230:2340 — fade from y=292.5 → 562
       ================================================================= */

    .lp-transform {
        background: #edeff4 !important;
        padding-bottom: calc(40px * var(--lp-s)) !important;
    }

    .lp-transform__photo {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(562px * var(--lp-s)) !important;
        /* Figma 230:2340 — solid to y=292.5, fade to transparent at 562 */
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52.03%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, #000 0%, #000 52.03%, transparent 100%) !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: center top !important;
        mask-position: center top !important;
        mask-mode: alpha !important;
        z-index: 0 !important;
    }

    .lp-transform__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: calc(-119px * var(--lp-s)) calc(19px * var(--lp-s)) 0 !important;
        font-size: calc(48px * var(--lp-s)) !important;
        line-height: calc(55px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-transform__copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: calc(32px * var(--lp-s)) calc(19px * var(--lp-s)) 0 !important;
        gap: calc(32px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-transform__body {
        font-size: calc(15px * var(--lp-s)) !important;
        line-height: normal !important;
    }

    .lp-transform__cta {
        width: auto !important;
        align-self: flex-start !important;
        height: calc(48px * var(--lp-s)) !important;
        padding: calc(10px * var(--lp-s)) calc(16px * var(--lp-s)) !important;
        font-size: calc(15px * var(--lp-s)) !important;
    }

    /* =================================================================
       7. INSTRUCTOR — Figma 230:2290  (376 × 1132)
       Photo mask: Figma 230:2222 — fade from y=465.5 → 753
       ================================================================= */

    .lp-instructor {
        background: #f3efe8 !important;
        min-height: calc(1132px * var(--lp-s)) !important;
        padding-bottom: calc(48px * var(--lp-s)) !important;
        overflow: hidden !important;
    }

    .lp-instructor__marble {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
    }

    .lp-instructor__marble img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .lp-instructor__photo {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        left: calc(-96px * var(--lp-s)) !important;
        transform: none !important;
        width: calc(500px * var(--lp-s)) !important;
        max-width: none !important;
        height: calc(753px * var(--lp-s)) !important;
        background: none !important;
        /* Figma 230:2222 — solid to y=465.5, fade to transparent at 753 */
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 61.82%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, #000 0%, #000 61.82%, transparent 100%) !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        mask-mode: alpha !important;
        z-index: 1 !important;
    }

    .lp-instructor__copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin: calc(41px * var(--lp-s)) var(--lp-pad) 0 !important;
        gap: calc(20px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-instructor__label {
        font-size: calc(20px * var(--lp-s)) !important;
        line-height: calc(26px * var(--lp-s)) !important;
    }

    .lp-instructor__title {
        font-size: calc(32px * var(--lp-s)) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.6px !important;
    }

    .lp-instructor__actions {
        width: calc(241px * var(--lp-s)) !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: calc(7.556px * var(--lp-s)) !important;
    }

    .lp-instructor__btn {
        width: 100% !important;
        height: calc(50.376px * var(--lp-s)) !important;
        min-height: calc(50.376px * var(--lp-s)) !important;
        font-size: calc(11.335px * var(--lp-s)) !important;
        gap: calc(19px * var(--lp-s)) !important;
        padding: calc(6.3px * var(--lp-s)) calc(24px * var(--lp-s)) calc(6.3px * var(--lp-s)) calc(11.3px * var(--lp-s)) !important;
        white-space: nowrap !important;
    }

    .lp-instructor__btn img {
        width: calc(26px * var(--lp-s)) !important;
        height: calc(26px * var(--lp-s)) !important;
    }

    /* =================================================================
       8. SCIENCE — Figma 229:483  (376 × 812)
       ================================================================= */

    .lp-science {
        min-height: calc(812px * var(--lp-s)) !important;
        padding: calc(80px * var(--lp-s)) 0 calc(40px * var(--lp-s)) !important;
        background: #f6f1ea !important;
    }

    .lp-science__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 calc(40px * var(--lp-s)) !important;
        font-size: calc(48px * var(--lp-s)) !important;
        line-height: calc(63px * var(--lp-s)) !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .lp-science__viewport {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        height: auto !important;
        align-items: stretch !important;
    }

    .lp-science__track {
        height: auto !important;
        padding: 0 calc(37.5px * var(--lp-s)) !important;
        gap: calc(24px * var(--lp-s)) !important;
        align-items: stretch !important;
    }

    .lp-science__card {
        width: calc(300px * var(--lp-s)) !important;
        height: auto !important;
        min-height: calc(430px * var(--lp-s)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: calc(32px * var(--lp-s)) !important;
        padding: calc(24px * var(--lp-s)) !important;
        border-radius: 40px !important;
    }

    .lp-science__media,
    .lp-science__pair {
        width: 100% !important;
        height: calc(210px * var(--lp-s)) !important;
    }

    .lp-science__pair img,
    .lp-science__pair--wide img,
    .lp-science__pair--xl img,
    .lp-science__media img,
    .lp-science__thumbs img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }

    .lp-science__body,
    .lp-science__quote {
        width: 100% !important;
        max-width: none !important;
        font-size: calc(20px * var(--lp-s)) !important;
        line-height: 1.1 !important;
    }

    /* =================================================================
       9. TALEEN — Figma 229:513  (376 × 843)
       Solid watermark sits behind the photo; outline sits on top.
       ================================================================= */

    .lp-taleen {
        position: relative !important;
        background: #4d4130 !important;
        height: calc(843px * var(--lp-s)) !important;
        min-height: calc(843px * var(--lp-s)) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .lp-taleen__portrait {
        position: absolute !important;
        left: calc(19px * var(--lp-s)) !important;
        top: calc(73px * var(--lp-s)) !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(336px * var(--lp-s)) !important;
        height: calc(440px * var(--lp-s)) !important;
        border-radius: 18.307px !important;
        overflow: hidden !important;
        transform: none !important;
        z-index: 2 !important;
        order: unset !important;
    }

    .lp-taleen__portrait img {
        position: absolute !important;
        left: 0 !important;
        top: -8.82% !important;
        width: 100% !important;
        height: 114.28% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .lp-taleen__watermark {
        position: absolute !important;
        left: calc(30px * var(--lp-s)) !important;
        top: calc(422px * var(--lp-s)) !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        font-size: calc(132.465px * var(--lp-s)) !important;
        line-height: normal !important;
        color: #fff !important;
        opacity: 1 !important;
        clip-path: none !important;
        z-index: 1 !important;
        order: unset !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    .lp-taleen__watermark-outline {
        color: #fff !important;
        -webkit-text-stroke: 0 !important;
    }

    /* Figma 229:516 — outline sits on top of the photo */
    .lp-taleen::after {
        content: 'Taleen';
        position: absolute;
        left: calc(30px * var(--lp-s));
        top: calc(422px * var(--lp-s));
        font-family: 'Instrument Serif', Georgia, serif;
        font-weight: 400;
        font-size: calc(132.465px * var(--lp-s));
        line-height: normal;
        color: transparent;
        -webkit-text-stroke: 1.2px #fff;
        white-space: nowrap;
        pointer-events: none;
        clip-path: none;
        z-index: 3;
    }

    .lp-taleen__copy {
        position: absolute !important;
        left: calc(30px * var(--lp-s)) !important;
        top: calc(589px * var(--lp-s)) !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(290px * var(--lp-s)) !important;
        margin: 0 !important;
        gap: calc(16px * var(--lp-s)) !important;
        z-index: 4 !important;
        order: unset !important;
    }

    .lp-taleen__label {
        font-size: calc(32px * var(--lp-s)) !important;
        letter-spacing: -0.96px !important;
    }

    .lp-taleen__body {
        font-size: calc(15px * var(--lp-s)) !important;
    }

    /* =================================================================
       10. FAQ — Figma 229:530  (376 × 832+)
       ================================================================= */

    .lp-faq {
        background: #f6f1ea !important;
        padding: 0 0 calc(40px * var(--lp-s)) !important;
    }

    .lp-faq__marble {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
    }

    .lp-faq__marble img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #lp-faq-canvas,
    .lp-faq__canvas {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: calc(80px * var(--lp-s)) calc(22px * var(--lp-s)) 0 !important;
        background: transparent !important;
        z-index: 2 !important;
    }

    .lp-faq__header {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 calc(24px * var(--lp-s)) !important;
        gap: calc(16px * var(--lp-s)) !important;
    }

    .lp-faq__title {
        font-size: calc(32px * var(--lp-s)) !important;
        line-height: calc(34px * var(--lp-s)) !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .lp-faq__grid {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: calc(17px * var(--lp-s)) !important;
    }

    .lp-faq__col {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: calc(17px * var(--lp-s)) !important;
    }

    .lp-faq__item {
        width: 100% !important;
        height: auto !important;
        min-height: calc(88px * var(--lp-s)) !important;
        padding: calc(20px * var(--lp-s)) !important;
        overflow: visible !important;
    }

    .lp-faq__item[open] {
        height: auto !important;
        overflow: visible !important;
    }

    .lp-faq__q {
        font-size: calc(16px * var(--lp-s)) !important;
        line-height: calc(28px * var(--lp-s)) !important;
        white-space: normal !important;
    }

    /* =================================================================
       11. TESTIMONIALS — Figma 229:590  (376 × 832)
       ================================================================= */

    .lp-testimonials {
        background: #fff !important;
        min-height: calc(832px * var(--lp-s)) !important;
        padding-bottom: calc(24px * var(--lp-s)) !important;
    }

    #lp-testimonials-canvas,
    .lp-testimonials__canvas {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(832px * var(--lp-s)) !important;
        overflow: hidden !important;
        padding: calc(111px * var(--lp-s)) 0 0 !important;
        background: #fff !important;
    }

    .lp-testimonials__rings {
        position: absolute !important;
        left: 50% !important;
        top: calc(-200px * var(--lp-s)) !important;
        width: min(1551px, 400vw) !important;
        height: auto !important;
        transform: translateX(-50%) !important;
        z-index: 0 !important;
    }

    .lp-testimonials__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(329px * var(--lp-s)) !important;
        margin: 0 auto !important;
        padding: 0 var(--lp-pad) !important;
        font-size: calc(48px * var(--lp-s)) !important;
        line-height: calc(63px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-testimonials__intro {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(333px * var(--lp-s)) !important;
        margin: calc(20px * var(--lp-s)) auto 0 !important;
        padding: 0 var(--lp-pad) !important;
        font-size: calc(15px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-testimonials__track {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: calc(16px * var(--lp-s)) !important;
        width: 100% !important;
        height: calc(385px * var(--lp-s)) !important;
        margin-top: calc(32px * var(--lp-s)) !important;
        padding: 0 calc(52px * var(--lp-s)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 3 !important;
    }

    .lp-testimonial,
    .lp-testimonial--a,
    .lp-testimonial--b,
    .lp-testimonial--c,
    .lp-testimonial--d,
    .lp-testimonial--e,
    .lp-testimonial--f,
    .lp-testimonial--g {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 calc(270px * var(--lp-s)) !important;
        width: calc(270px * var(--lp-s)) !important;
        height: calc(385px * var(--lp-s)) !important;
        border-radius: 26px !important;
        overflow: hidden !important;
        scroll-snap-align: center !important;
    }

    .lp-testimonial img,
    .lp-testimonial--a > img,
    .lp-testimonial--b > img,
    .lp-testimonial--d > img,
    .lp-testimonial--e > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Video 3 leads the mobile carousel; desktop positions stay unchanged */
    .lp-testimonial--c {
        order: -1 !important;
    }

    /* =================================================================
       12. FOOTER — Figma 230:2289  (375 × 1382)
       ================================================================= */

    .lp-footer {
        min-height: calc(1382px * var(--lp-s)) !important;
        background: #111 !important;
        overflow: hidden !important;
    }

    .lp-footer__bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
    }

    #lp-footer-bg-frame,
    .lp-footer__bg-frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    .lp-footer__bg-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .lp-footer__bg::after {
        background: rgba(0, 0, 0, 0.54) !important;
    }

    #lp-footer-canvas,
    .lp-footer__canvas {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(1382px * var(--lp-s)) !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: calc(89px * var(--lp-s)) calc(22px * var(--lp-s)) calc(40px * var(--lp-s)) !important;
        z-index: 2 !important;
    }

    .lp-footer__hero {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: calc(331px * var(--lp-s)) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        gap: calc(29.854px * var(--lp-s)) !important;
        align-items: center !important;
    }

    .lp-footer__logo {
        width: 100% !important;
        height: calc(209px * var(--lp-s)) !important;
        aspect-ratio: auto !important;
    }

    .lp-footer__logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .lp-footer__cta {
        width: 100% !important;
        height: calc(39.805px * var(--lp-s)) !important;
        font-size: calc(14.927px * var(--lp-s)) !important;
        padding: calc(8px * var(--lp-s)) calc(40px * var(--lp-s)) !important;
    }

    .lp-footer__bar {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: calc(297px * var(--lp-s)) !important;
        max-width: 100% !important;
        margin: calc(323px * var(--lp-s)) 0 0 calc(17px * var(--lp-s)) !important;
        gap: calc(16px * var(--lp-s)) !important;
        align-items: flex-start !important;
    }

    .lp-footer__row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: calc(24px * var(--lp-s)) !important;
        width: 100% !important;
    }

    .lp-footer__social,
    .lp-footer__payment {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .lp-footer__social {
        justify-content: flex-start !important;
    }

    .lp-footer__payment {
        justify-content: flex-end !important;
    }

    .lp-footer__thanks {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: calc(16px * var(--lp-s)) !important;
        width: 100% !important;
    }

    .lp-footer__credits {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: calc(31px * var(--lp-s)) !important;
        text-align: left !important;
        width: 100% !important;
    }

    .lp-footer__credit-item {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .lp-footer__bottom {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: calc(48px * var(--lp-s)) !important;
        width: 100% !important;
    }

    .lp-footer__links {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: calc(32px * var(--lp-s)) !important;
    }
}

/* RTL mobile: keep Figma stack, flip start edge only */
@media (max-width: 768px) {
    html[dir="rtl"] .lp-hero__actions {
        right: auto !important;
        left: 18px !important;
    }

    html[dir="rtl"] .lp-video__bottom,
    html[dir="rtl"] .lp-video__brand,
    html[dir="rtl"] .lp-modules__heading,
    html[dir="rtl"] .lp-modules__cta,
    html[dir="rtl"] .lp-transform__cta,
    html[dir="rtl"] .lp-instructor__actions,
    html[dir="rtl"] .lp-footer__row,
    html[dir="rtl"] .lp-footer__social,
    html[dir="rtl"] .lp-footer__payment,
    html[dir="rtl"] .lp-footer__credits,
    html[dir="rtl"] .lp-footer__bottom,
    html[dir="rtl"] .lp-footer__links {
        align-items: flex-start !important;
    }

    html[dir="rtl"] .lp-modules__item {
        padding: 0 calc(50px * var(--lp-s)) 0 0 !important;
    }

    html[dir="rtl"] .lp-modules__num {
        left: auto !important;
        right: 0 !important;
        text-align: right !important;
    }

    html[dir="rtl"] .lp-unique__item {
        flex-direction: row !important;
    }

    html[dir="rtl"] .lp-hero__cta {
        white-space: normal !important;
        text-align: center !important;
        max-width: calc(100% - 36px) !important;
        height: auto !important;
        min-height: 42px !important;
    }

    html[dir="rtl"] .lp-taleen__watermark,
    html[dir="rtl"] .lp-taleen::after {
        left: auto !important;
        right: calc(30px * var(--lp-s)) !important;
        margin: 0 !important;
    }

    html[dir="rtl"] .lp-taleen__copy {
        left: auto !important;
        right: calc(30px * var(--lp-s)) !important;
    }

    html[dir="rtl"] .lp-instructor__btn {
        white-space: normal !important;
        text-align: center !important;
        height: auto !important;
        min-height: calc(50.376px * var(--lp-s)) !important;
    }

    html[dir="rtl"] .lp-footer__bar,
    html[dir="rtl"] .lp-footer__credits,
    html[dir="rtl"] .lp-footer__credit-item {
        margin-left: 0 !important;
        margin-right: calc(17px * var(--lp-s)) !important;
        text-align: right !important;
        align-items: flex-start !important;
    }
}