/*
 * Test landing page (Figma "Hakini Landing Page" > Final Design > Standard
 * Service Page and its Responsive frame). Scoped to .sPage; counselor cards
 * and the search field come from therapists-list.css.
 */

.sPage {
    --sp-font: Samim, sans-serif;
    --sp-font-600: Samim-m, Samim, sans-serif;
    --sp-font-700: Samim-b, Samim, sans-serif;
    --sp-ink: #0f172a;
    --sp-slate: #35405e;
    --sp-navy: #004492;
    --sp-coral: #d67a69;
    --sp-coral-text: #ca7e6d;
    --sp-peach: #ffdbcc;
    --sp-hero: #fdf2ec;
    --sp-line: #d5dde7;
    --sp-grey: #737373;
    overflow: hidden;
    background: #fff;
    color: var(--sp-ink);
    font-family: var(--sp-font);
    font-synthesis: none;
}
.sPage *,
.sPage *::before,
.sPage *::after {
    box-sizing: border-box;
}
html:lang(ar) .sPage {
    direction: rtl;
}
:where(.sPage) :is(h1, h2, h3, p, ul) {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
.sPage ul {
    list-style: none;
}
.sPage a:hover,
.sPage a:focus {
    text-decoration: none;
}
.sPage__wrap {
    width: 1140px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}
.sPage__h2 {
    color: var(--sp-ink);
    font-family: var(--sp-font-700);
    font-size: 48px;
    line-height: 58px;
}
.sPage__h2--center,
.sPage__lead--center {
    text-align: center;
}
.sPage__lead {
    max-width: 860px;
    margin-top: 12px !important;
    font-size: 24px;
    line-height: 32px;
}
.sPage__lead--center {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Shared chips and carousel arrows */
.sChips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.sChips--center {
    justify-content: center;
}
.sChip {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--sp-line);
    border-radius: 21px;
    background: #fff;
    color: var(--sp-slate);
    font-family: var(--sp-font);
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}
.sChip:hover {
    color: var(--sp-slate);
    border-color: #b8c3d3;
}
.sChip.is-active {
    border-color: #f9ccbb;
    background: #f9ccbb;
}
.sArrows {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}
.sArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    color: var(--sp-ink);
    cursor: pointer;
}
.sArrow::after {
    content: "";
    width: 8px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("../images/booking/chevron.svg") center / 13px 8px no-repeat;
    mask: url("../images/booking/chevron.svg") center / 13px 8px no-repeat;
}
.sArrow--prev::after { transform: rotate(90deg); }
.sArrow--next::after { transform: rotate(-90deg); }
html:lang(ar) .sArrow--prev::after { transform: rotate(-90deg); }
html:lang(ar) .sArrow--next::after { transform: rotate(90deg); }
.sArrow:disabled {
    opacity: 0.35;
    cursor: default;
}
.sArrows[hidden] {
    display: none;
}

/* ---- Hero -------------------------------------------------------------------- */

.sHero {
    position: relative;
    min-height: 705px;
    padding: 92px 0 80px;
    overflow: hidden;
    background: var(--sp-hero);
}
.sHero__arc {
    position: absolute;
    top: -425px;
    left: -6px;
    width: 1587px;
    max-width: none;
    opacity: 0.9;
    pointer-events: none;
}
html:lang(ar) .sHero__arc {
    right: -6px;
    left: auto;
    transform: scaleX(-1);
}
.sHero__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
}
.sHero__text {
    position: relative;
    z-index: 1;
    flex: 0 1 620px;
    min-width: 0;
}
.sHero__title {
    font-family: var(--sp-font-700);
    font-size: 52px;
    line-height: 63px;
}
.sHero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.sHero__chips a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 40px;
    background: #fefbf9;
    color: var(--sp-navy);
    font-family: var(--sp-font-600);
    font-size: 18px;
}
.sHero__chips a:hover {
    color: var(--sp-navy);
    background: #fff;
}
.sHero__lead {
    max-width: 520px;
    margin-top: 20px !important;
    font-size: 24px;
    line-height: 32px;
}
.sHero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px !important;
}
.sHero__badges li {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 8px 12px 8px 10px;
    border: 1px solid #faccb9;
    border-radius: 12px;
    font-size: 16px;
    line-height: 19px;
}
.sHero__badges img {
    width: 24px;
    height: 24px;
}
.sHero__badges span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sHero__badges strong {
    color: #000;
    font-family: var(--sp-font-600);
    font-weight: normal;
}
.sHero__start,
.sInfo__start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 369px;
    max-width: 100%;
    height: 56px;
    margin-top: 42px;
    border-radius: 100px;
    background: var(--sp-peach);
    color: var(--sp-slate);
    font-family: var(--sp-font-700);
    font-size: 20px;
}
.sHero__start:hover,
.sHero__start:focus,
.sInfo__start:hover,
.sInfo__start:focus {
    background: #ffcdb8;
    color: var(--sp-slate);
}
.sHero__art {
    position: relative;
    flex: 0 0 520px;
    height: 460px;
}
.sHero__circle {
    position: absolute;
    top: 150px;
    left: -40px;
    width: 618px;
    height: 618px;
    border-radius: 50%;
    background: var(--sp-peach);
}
.sHero__art img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- About and disclaimer ------------------------------------------------------- */

.sAbout {
    padding-top: 100px;
}
.sAbout__text {
    max-width: 760px;
    margin-top: 16px;
    font-size: 24px;
    line-height: 32px;
}
.sDisclaimer {
    margin-top: 56px;
    padding-inline-start: 32px;
    border-inline-start: 1px solid #000;
    font-family: var(--sp-font-600);
    font-size: 20px;
    line-height: 28px;
}
.sDisclaimer__label {
    margin-bottom: 8px !important;
    color: #bc171f;
}

/* ---- Info accordion -------------------------------------------------------------- */

.sInfo {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 72px;
}
.sInfo__panel {
    width: calc(100% - 100px);
    min-height: 610px;
    padding: 90px 420px 60px 54px;
    border-radius: 30px;
    background: #fff5e6;
}
html:lang(ar) .sInfo__panel {
    padding: 90px 54px 60px 420px;
}
.sInfo__art {
    position: absolute;
    top: 30px;
    right: 0;
    width: 440px;
    height: 550px;
    border-radius: 30px;
    object-fit: cover;
}
html:lang(ar) .sInfo__art {
    right: auto;
    left: 0;
}
.sInfo__item {
    max-width: 592px;
    padding: 12px 0;
}
.sInfo__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--sp-font-700);
    font-size: 30px;
    line-height: 32px;
    list-style: none;
    cursor: pointer;
}
.sInfo__item summary::-webkit-details-marker,
.sFaq__item summary::-webkit-details-marker {
    display: none;
}
.sInfo__item summary::after,
.sFaq__item summary::after {
    content: "";
    flex: none;
    width: 13px;
    height: 8px;
    background: #737373;
    -webkit-mask: url("../images/booking/chevron.svg") center / contain no-repeat;
    mask: url("../images/booking/chevron.svg") center / contain no-repeat;
    transition: transform 0.2s ease;
}
.sInfo__item[open] summary::after,
.sFaq__item[open] summary::after {
    transform: rotate(180deg);
}
.sInfo__item p {
    margin-top: 12px !important;
    font-size: 24px;
    line-height: 32px;
}
.sInfo__bands {
    margin-top: 10px !important;
}
.sInfo__bands li {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    font-size: 20px;
    line-height: 28px;
}
.sInfo__bands span {
    flex: none;
    min-width: 72px;
    font-family: var(--sp-font-700);
}
.sInfo__start {
    width: auto;
    margin-top: 28px;
    padding: 0 36px;
}

/* ---- Counselors --------------------------------------------------------------------- */

.sTherapists {
    margin-top: 72px;
    padding: 50px 0 60px;
    background: #fbfbfb;
}
.sTherapists__search {
    width: 551px;
    max-width: 100%;
    height: 48px;
    margin: 42px auto 0;
    border-color: var(--sp-line);
}
.sTherapists .sChips {
    justify-content: center;
    margin-top: 24px;
}
.sTherapists__results {
    margin-top: 42px;
    transition: opacity 0.2s ease;
}
.sTherapists__results.is-loading {
    opacity: 0.55;
}

/* ---- Urgent help -------------------------------------------------------------------- */

.sHelp {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0 20px;
    margin-top: 70px;
    padding: 27px 56px 20px 25px;
    border-radius: 10px;
    background: #fef1f2;
}
.sHelp__icon {
    width: 43px;
    height: 43px;
}
.sHelp__text h2 {
    color: #682821;
    font-family: var(--sp-font-700);
    font-size: 34px;
    line-height: 41px;
}
.sHelp__text p {
    max-width: 566px;
    margin-top: 8px !important;
    font-size: 18px;
    line-height: 28px;
}
.sHelp__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    height: 48px;
    padding: 0 30px;
    border-radius: 100px;
    background: #e66b5d;
    color: #fff;
    font-family: var(--sp-font-700);
    font-size: 20px;
    white-space: nowrap;
}
.sHelp__button:hover,
.sHelp__button:focus {
    background: #d95b4d;
    color: #fff;
}
.sHelp__button img {
    width: 24px;
    height: 24px;
}
.sHelp__note {
    grid-column: 1 / -1;
    margin-top: 20px !important;
    padding-top: 20px;
    border-top: 1px solid #f4e6e7;
    font-size: 16px;
    text-align: center;
}

/* ---- FAQs ------------------------------------------------------------------------- */

.sFaq {
    display: grid;
    grid-template-columns: 513px 1fr;
    gap: 52px;
    margin-top: 100px;
}
.sFaq__card {
    position: relative;
    min-height: 450px;
    padding: 24px 24px 0;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, #fef1e4 0%, #fdf2ec 55%, #fbe3d9 100%);
}
.sFaq__kicker {
    color: var(--sp-coral-text);
    font-size: 14px;
}
.sFaq__big {
    max-width: 380px;
    margin-top: 16px !important;
    color: var(--sp-coral-text);
    font-family: var(--sp-font-700);
    font-size: 48px;
    line-height: 58px;
}
.sFaq__card img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 332px;
}
html:lang(ar) .sFaq__card img {
    right: auto;
    left: 0;
}
.sFaq__title {
    margin-bottom: 18px !important;
    font-family: var(--sp-font-700);
    font-size: 38px;
    line-height: 46px;
}
.sFaq__item {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
}
.sFaq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--sp-font-600);
    font-size: 16px;
    line-height: 24px;
    list-style: none;
    cursor: pointer;
}
.sFaq__item p {
    margin-top: 12px !important;
    color: var(--sp-grey);
    font-size: 16px;
    line-height: 24px;
}

/* ---- Articles ----------------------------------------------------------------------- */

.sArticles {
    margin-top: 120px;
}
.sArticles .sPage__h2 {
    font-size: 52px;
    line-height: 63px;
}
.sArticles__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}
.sArticles__search {
    width: 331px;
    height: 42px;
    margin: 0;
}
.sArticles__all {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 30px;
    border-radius: 100px;
    background: var(--sp-navy);
    color: #fff;
    font-family: var(--sp-font-700);
    font-size: 18px;
}
.sArticles__all:hover,
.sArticles__all:focus {
    color: #fff;
    background: #003876;
}
.sArticles__grid {
    display: grid;
    grid-auto-columns: calc((100% - 46px) / 3);
    grid-auto-flow: column;
    gap: 23px;
    margin-top: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.sArticles__grid::-webkit-scrollbar {
    display: none;
}
.sArticle {
    position: relative;
    min-height: 400px;
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    background: #fff;
    scroll-snap-align: start;
}
.sArticle__image img {
    width: 100%;
    height: 164px;
    border-radius: 14px;
    object-fit: cover;
}
.sArticle__share {
    position: absolute;
    top: 34px;
    right: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    padding: 0 10px;
    border: 0;
    border-radius: 40px;
    background: #fff;
    color: var(--sp-ink);
    font-family: var(--sp-font-600);
    font-size: 14px;
    cursor: pointer;
}
html:lang(ar) .sArticle__share {
    right: auto;
    left: 34px;
}
.sArticle__share img {
    width: 16px;
}
.sArticle__date {
    margin-top: 24px !important;
    color: var(--sp-grey);
    font-size: 14px;
    line-height: 20px;
}
.sArticle__title {
    margin-top: 12px !important;
    font-family: var(--sp-font-600);
    font-size: 20px;
    line-height: 28px;
}
.sArticle__title a {
    color: var(--sp-ink);
}
.sArticle__text {
    margin-top: 8px !important;
    color: var(--sp-grey);
    font-size: 16px;
    line-height: 24px;
}

/* ---- App -------------------------------------------------------------------------- */

.sApp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 120px;
}
.sApp__text {
    flex: 0 1 504px;
}
.sApp__logo {
    width: 129px;
}
.sApp__title {
    margin-top: 6px !important;
    font-family: var(--sp-font-700);
    font-size: 52px;
    line-height: 63px;
}
.sApp__subtitle {
    margin-top: 12px !important;
    font-size: 24px;
    line-height: 32px;
}
.sApp__body {
    margin-top: 24px !important;
    font-size: 18px;
    line-height: 28px;
}
.sApp__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 66px;
}
.sApp__stores img {
    height: 64px;
}
.sApp__art {
    position: relative;
    flex: 0 0 620px;
    height: 616px;
}
.sApp__bg {
    position: absolute;
    top: 0;
    right: -150px;
    width: 491px;
    height: 616px;
    object-fit: cover;
}
html:lang(ar) .sApp__bg {
    right: auto;
    left: -150px;
}
.sApp__phone {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 621px;
}
.sApp__pill {
    position: absolute;
    padding: 6px 20px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    font-family: var(--sp-font-600);
    font-size: 18px;
    line-height: 32px;
    white-space: nowrap;
}
.sApp__pill--track { top: 65px; left: -98px; }
.sApp__pill--extra { top: 234px; left: 198px; }
.sApp__pill--manage { top: 511px; left: 49px; }

/* ---- Additional information ----------------------------------------------------- */

.sMore {
    margin-top: 120px;
    background: #fff2de;
}
.sMore__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    min-height: 550px;
    padding-top: 45px;
}
.sMore__text {
    flex: 0 1 581px;
    padding-bottom: 45px;
}
.sMore__text .sPage__h2 {
    font-size: 52px;
    line-height: 63px;
}
.sMore__body {
    margin-top: 16px !important;
    font-size: 20px;
    line-height: 32px;
}
.sMore__art {
    flex: none;
    width: 342px;
}

/* ---- Programs --------------------------------------------------------------------- */

.sPrograms {
    margin: 120px auto 100px;
}
.sPrograms .sPage__h2 {
    font-size: 44px;
    line-height: 54px;
}
.sPrograms__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 20px;
    margin-top: 48px;
}
.sProgram {
    display: flex;
    flex-direction: column;
    min-height: 370px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    color: var(--sp-ink);
}
.sProgram:hover {
    color: var(--sp-ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.sProgram__image {
    position: relative;
    display: block;
    height: 261px;
}
.sProgram__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sProgram__counts {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 40px 16px 12px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
    color: #fff;
    font-size: 13px;
}
.sProgram__title {
    padding: 16px 16px 0;
    font-family: var(--sp-font-700);
    font-size: 16px;
    line-height: 20px;
}
.sProgram__type {
    padding: 6px 16px 16px;
    color: var(--sp-grey);
    font-size: 14px;
}

/* ---- Tablet ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
    .sHero__art {
        flex-basis: 420px;
        height: 380px;
    }
    .sInfo__panel {
        width: 100%;
        padding-inline-end: 54px;
    }
    html:lang(ar) .sInfo__panel {
        padding: 90px 54px 60px;
    }
    .sInfo__art {
        display: none;
    }
    .sFaq {
        grid-template-columns: 400px 1fr;
    }
    .sApp__art {
        flex-basis: 460px;
        transform: scale(0.8);
        transform-origin: center;
    }
    .sPrograms__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Phone ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .sPage__wrap {
        max-width: calc(100% - 40px);
    }
    .sPage__h2,
    .sArticles .sPage__h2,
    .sMore__text .sPage__h2 {
        font-size: 32px;
        line-height: 39px;
    }
    .sPrograms .sPage__h2 {
        font-size: 24px;
        line-height: 29px;
    }
    .sPage__lead {
        font-size: 18px;
        line-height: 28px;
    }

    .sHero {
        min-height: 0;
        padding: 30px 0 48px;
    }
    .sHero__arc {
        top: -199px;
        left: -593px;
        width: 1186px;
    }
    .sHero__inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 28px;
    }
    .sHero__art {
        flex: none;
        height: 268px;
        margin: 0 -20px;
        overflow: hidden;
    }
    .sHero__circle {
        top: 110px;
        left: 50%;
        width: 500px;
        height: 500px;
        transform: translateX(-50%);
    }
    .sHero__title {
        font-size: 32px;
        line-height: 39px;
    }
    .sHero__chips a {
        font-size: 15px;
    }
    .sHero__lead {
        font-size: 18px;
        line-height: 28px;
    }
    .sHero__badges {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.6);
    }
    .sHero__start {
        width: 100%;
        margin-top: 32px;
    }

    .sAbout {
        padding-top: 48px;
    }
    .sAbout__text {
        font-size: 18px;
        line-height: 28px;
    }
    .sDisclaimer {
        margin-top: 32px;
        padding-inline-start: 18px;
        font-size: 16px;
        line-height: 24px;
    }

    .sInfo {
        margin-top: 48px;
    }
    .sInfo__panel,
    html:lang(ar) .sInfo__panel {
        min-height: 0;
        padding: 28px 22px;
    }
    .sInfo__item summary {
        font-size: 22px;
    }
    .sInfo__item p,
    .sInfo__bands li {
        font-size: 16px;
        line-height: 24px;
    }
    .sInfo__start {
        width: 100%;
    }

    .sTherapists {
        margin-top: 48px;
        padding: 40px 0;
    }
    .sTherapists__search {
        margin-top: 24px;
    }
    .sChips,
    .sTherapists .sChips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-right: -20px;
        margin-left: -20px;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .sChips::-webkit-scrollbar {
        display: none;
    }
    .sTherapists .cList__grid {
        margin: 0 -20px;
        padding: 0 20px 6px;
        grid-template-rows: auto;
    }

    .sHelp {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 48px;
        padding: 24px 20px;
        text-align: center;
    }
    .sHelp__icon {
        justify-self: center;
    }
    .sHelp__text p {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .sHelp__button {
        justify-self: center;
        font-size: 18px;
    }
    .sHelp__note {
        grid-row: 3;
        margin-top: 4px !important;
        padding-top: 16px;
    }

    .sFaq {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 64px;
    }
    .sFaq__card {
        min-height: 360px;
    }
    .sFaq__big {
        font-size: 36px;
        line-height: 44px;
    }
    .sFaq__card img {
        width: 260px;
    }
    .sFaq__title {
        font-size: 32px;
        line-height: 39px;
    }
    .sFaq__item {
        padding: 14px 4px;
    }

    .sArticles {
        margin-top: 72px;
    }
    .sArticles__tools {
        flex-direction: column;
        align-items: stretch;
    }
    .sArticles__search {
        width: 100%;
    }
    .sArticles__all {
        justify-content: center;
    }
    .sArticles__grid {
        grid-auto-columns: min(320px, calc(100vw - 60px));
        margin: 24px -20px 0;
        padding: 0 20px;
        scroll-padding-inline: 20px;
    }

    .sApp {
        flex-direction: column;
        align-items: stretch;
        margin-top: 72px;
    }
    .sApp__text,
    .sMore__text {
        flex: none;
    }
    .sApp__title {
        font-size: 32px;
        line-height: 39px;
    }
    .sApp__subtitle {
        font-size: 18px;
    }
    .sApp__body {
        font-size: 16px;
        line-height: 26px;
    }
    .sApp__stores {
        gap: 12px;
        margin-top: 28px;
    }
    .sApp__stores img {
        height: 48px;
    }
    .sApp__art {
        flex: none;
        height: 380px;
        margin: 0 -20px;
        transform: none;
    }
    .sApp__bg,
    html:lang(ar) .sApp__bg {
        right: 0;
        left: auto;
        width: 60%;
        height: 100%;
    }
    html:lang(ar) .sApp__bg {
        right: auto;
        left: 0;
    }
    .sApp__phone {
        width: 100%;
    }
    .sApp__pill {
        font-size: 13px;
        line-height: 22px;
        padding: 4px 12px;
    }
    .sApp__pill--track { top: 24px; left: 16px; }
    .sApp__pill--extra { top: 150px; left: auto; right: 16px; }
    .sApp__pill--manage { top: auto; bottom: 18px; left: 30px; }

    .sMore {
        margin-top: 72px;
    }
    .sMore__inner {
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
    }
    .sMore__text {
        padding-bottom: 0;
    }
    .sMore__body {
        font-size: 18px;
        line-height: 28px;
    }
    .sMore__art {
        width: 260px;
    }

    .sPrograms {
        margin: 72px auto 64px;
    }
    .sPrograms__grid {
        grid-auto-columns: 270px;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 20px;
        margin: 28px -20px 0;
        padding: 0 20px 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .sPrograms__grid::-webkit-scrollbar {
        display: none;
    }
    .sProgram {
        scroll-snap-align: start;
    }
}

/* ==== Tests hub (Figma "Test Page" and "Test Page Responsive") ================= */

.sHub__hero {
    padding-bottom: 0;
}
.sHub__hero .sHero__inner {
    align-items: flex-end;
}
.sHub__hero .sHero__text {
    flex-basis: 600px;
    padding-bottom: 80px;
}
.sHub__lead {
    max-width: 600px;
}
.sHub__browse {
    width: auto;
    padding: 0 36px;
}
.sHub__art {
    flex: 0 0 521px;
    margin-inline-start: auto;
    line-height: 0;
}
.sHub__art img {
    width: 100%;
}
html:lang(ar) .sHub__art img {
    transform: scaleX(-1);
}

.sHub__choose {
    margin-top: 65px;
}
.sHub__panel {
    width: 1280px;
    max-width: calc(100% - 40px);
    margin: 24px auto 0;
    padding: 42px 70px 40px;
    border-radius: 32px;
    background: #fff2de;
}
.sHub__pickTitle {
    font-family: var(--sp-font-700);
    font-size: 40px;
    line-height: 49px;
}
.sHub__pickTitle a {
    color: var(--sp-ink);
}
.sHub__pickText {
    max-width: 763px;
    margin-top: 12px !important;
    font-size: 20px;
    line-height: 32px;
}
.sHub__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px !important;
}
.sHub__badges li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 20px 12px 16px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.sHub__badges img {
    width: 32px;
    height: 32px;
}
.sHub__badges span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 20px;
    line-height: 24px;
}
.sHub__badges strong {
    color: #000;
    font-family: var(--sp-font-600);
    font-weight: normal;
}
.sHub__take {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 60px;
    margin: 42px auto 0;
    padding: 0 36px;
    border-radius: 100px;
    background: var(--sp-navy);
    color: #fff;
    font-family: var(--sp-font-700);
    font-size: 20px;
}
.sHub__take:hover,
.sHub__take:focus {
    background: #003876;
    color: #fff;
}

.sHub__stats {
    margin-top: 65px;
    padding: 0 0 40px;
    background:
        linear-gradient(to bottom, transparent 97px, transparent 97px),
        linear-gradient(#fdf2ec 1px, transparent 1px) 0 97px / 39px 39px,
        linear-gradient(90deg, #fdf2ec 1px, transparent 1px) 0 97px / 39px 39px;
    background-repeat: no-repeat, repeat-x, repeat-x;
}
.sHub__statsRow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.sHub__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 89px 32px 25px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.sHub__statIcon {
    position: absolute;
    top: 0;
    inset-inline-start: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.sHub__statIcon img {
    width: 38px;
    height: 38px;
}
.sHub__stat strong {
    font-family: var(--sp-font-700);
    font-weight: normal;
    font-size: 32px;
    line-height: 32px;
}
.sHub__stat span:last-child {
    font-size: 20px;
    line-height: 24px;
}

.sHub__tests {
    margin-top: 72px;
}
.sHub__testsHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.sHub__tests .sPage__h2 {
    font-size: 45px;
    line-height: 55px;
}
.sHub__search {
    width: 334px;
    height: 42px;
    margin: 0;
}
.sHub__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.sTest {
    display: flex;
    gap: 20px;
    min-height: 228px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    background: #fff;
}
.sTest.is-extra,
.sTest.is-hidden {
    display: none;
}
.sHub__grid.is-expanded .sTest.is-extra:not(.is-hidden) {
    display: flex;
}
.sTest__image {
    flex: none;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
    background: #fae5dc;
}
.sTest__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sTest__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 16px 6px 2px 0;
}
.sTest__title {
    font-family: var(--sp-font-700);
    font-size: 20px;
    line-height: 24px;
}
.sTest__title a {
    color: var(--sp-ink);
}
.sTest__text {
    display: -webkit-box;
    margin-top: 8px !important;
    overflow: hidden;
    color: var(--sp-grey);
    font-size: 16px;
    line-height: 21px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.sTest__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}
.sTest__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.sTest__time img {
    width: 18px;
}
.sTest__start {
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin-inline-start: auto;
    padding: 0 30px;
    border-radius: 100px;
    background: var(--sp-peach);
    color: var(--sp-slate);
    font-family: var(--sp-font-700);
    font-size: 18px;
}
.sTest__start:hover,
.sTest__start:focus {
    background: #ffcdb8;
    color: var(--sp-slate);
}
.sHub__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.sHub__more[hidden] {
    display: none;
}
.sHub__more .sArticles__all {
    border: 0;
    cursor: pointer;
}
.sHub__empty {
    margin-top: 24px !important;
    color: var(--sp-grey);
    text-align: center;
}

.sHub__know {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 100px;
}
.sHub__knowText {
    flex: 0 1 600px;
}
.sHub__checks {
    margin-top: 25px !important;
}
.sHub__checks li {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    padding: 6px 0;
    font-size: 18px;
    line-height: 28px;
}
.sHub__checks img {
    flex: none;
    width: 28px;
}
.sHub__checks strong {
    font-family: var(--sp-font-700);
    font-weight: normal;
}
.sHub__knowBody {
    margin-top: 24px !important;
    font-size: 20px;
    line-height: 32px;
}
.sHub__knowArt {
    position: relative;
    flex: 0 0 501px;
    height: 501px;
}
.sHub__knowArt img {
    position: absolute;
    width: 296px;
    height: 296px;
    border-radius: 50px;
}
.sHub__knowOne {
    top: 0;
    right: 0;
}
.sHub__knowTwo {
    bottom: 0;
    left: 0;
}

.sHub .sTherapists {
    margin-top: 100px;
}

.sHub__benefit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 100px;
}
.sHub__benefitText {
    flex: 0 1 600px;
}
.sHub__benefitText .sHero__start {
    width: auto;
    padding: 0 36px;
}
.sHub__benefitArt {
    position: relative;
    z-index: 1;
    width: 454px;
    border-radius: 24px;
}
.sHub__benefit::after {
    content: "";
    position: absolute;
    top: -50px;
    inset-inline-end: -300px;
    width: 640px;
    height: 600px;
    border-radius: 120px 0 0 120px;
    background: #eef5fe;
}
html:lang(ar) .sHub__benefit::after {
    border-radius: 0 120px 120px 0;
}
.sHub .sApp {
    margin-top: 140px;
}
.sHub .sFaq {
    margin-bottom: 100px;
}

@media (max-width: 1199px) {
    .sHub__art {
        flex-basis: 400px;
    }
    .sHub__panel {
        padding: 36px 40px;
    }
    .sHub__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sHub__knowArt {
        flex-basis: 400px;
        height: 400px;
    }
    .sHub__knowArt img {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 767px) {
    .sHub__hero .sHero__inner {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .sHub__hero .sHero__text {
        padding-bottom: 48px;
    }
    .sHub__art {
        flex: none;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .sHub__browse {
        width: 100%;
    }
    .sHub__choose {
        margin-top: 48px;
    }
    .sHub__panel {
        max-width: calc(100% - 40px);
        padding: 28px 20px;
    }
    .sHub__pickTitle {
        font-size: 28px;
        line-height: 34px;
    }
    .sHub__pickText {
        font-size: 16px;
        line-height: 26px;
    }
    .sHub__badges {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .sHub__badges li {
        min-height: 64px;
    }
    .sHub__badges span {
        font-size: 16px;
        line-height: 20px;
    }
    .sHub__take {
        width: 100%;
        height: 54px;
        font-size: 18px;
    }
    .sHub__stats {
        margin-top: 56px;
    }
    .sHub__statsRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .sHub__stat {
        padding-top: 72px;
    }
    .sHub__tests .sPage__h2 {
        font-size: 28px;
        line-height: 34px;
    }
    .sHub__testsHead {
        flex-direction: column;
        align-items: stretch;
    }
    .sHub__search {
        width: 100%;
    }
    .sHub__grid {
        margin-top: 24px;
    }
    .sTest {
        gap: 14px;
        min-height: 0;
        padding: 12px;
    }
    .sTest__image {
        width: 110px;
        height: 140px;
    }
    .sTest__body {
        padding: 4px 0 0;
    }
    .sTest__title {
        font-size: 17px;
        line-height: 22px;
    }
    .sTest__text {
        font-size: 14px;
        line-height: 19px;
    }
    .sTest__foot {
        flex-wrap: wrap;
    }
    .sTest__start {
        height: 34px;
        padding: 0 18px;
        font-size: 15px;
    }
    .sHub__know,
    .sHub__benefit {
        flex-direction: column;
        align-items: stretch;
        margin-top: 64px;
    }
    .sHub__knowText,
    .sHub__benefitText {
        flex: none;
    }
    .sHub__checks li {
        font-size: 16px;
        line-height: 24px;
    }
    .sHub__knowBody {
        font-size: 16px;
        line-height: 26px;
    }
    .sHub__knowArt {
        flex: none;
        width: 100%;
        max-width: 400px;
        height: 380px;
        margin: 0 auto;
    }
    .sHub__knowArt img {
        width: 221px;
        height: 221px;
        border-radius: 39px;
    }
    .sHub__benefitText .sHero__start {
        width: 100%;
    }
    .sHub__benefitArt {
        width: 100%;
    }
    .sHub__benefit::after {
        top: auto;
        bottom: -30px;
        inset-inline-end: -20px;
        width: 70%;
        height: 60%;
    }
    .sHub .sTherapists {
        margin-top: 64px;
    }
    .sHub .sApp {
        margin-top: 72px;
    }
}