/* ==========================================================================
   MentalEvo home page
   Geometry mirrors the Figma frame "MentalEvo_NEW" (1512px wide).
   Content column is 1224px wide, i.e. 144px page gutters.
   ========================================================================== */

.solutions-adults > .container,
.solutions-kids > .container,
.blog-section > .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-section .container-grid {
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* ==========================================================================
   Hero — 1512x882
   ========================================================================== */

.hero-main {
    position: relative;
    height: 882px;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

/* The video still sits under the video element (transparent until its first
   frame), so the LCP image paints without waiting for any video bytes. */
.hero-bg-poster,
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Mobile-only crossfade slideshow that stands in for the video, each slide
   paired 1:1 with a bullet below via the shared heroFade animation. */
.hero-slideshow {
    display: none;
}

/* Matches the tone of the composited hero in Figma (measured against
   assets/images/hero-outdoor-meditation.webp, which is the design's own frame). */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1264px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* x=147, y=554, w=597 in the 1512 frame. Widened a bit past the English
   597px — uk/ru wrap to 4 cramped lines at that width instead of 3. */
.hero-text {
    position: absolute;
    left: 23px;
    top: 554px;
    width: 780px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-text h1 {
    font-family: var(--font-serif);
    font-size: 65px;
    font-weight: 400;
    line-height: 1.05;
    color: #FEFEFE;
}

.hero-text p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #E9E7E7;
}

/* x=984, y=174, w=384 */
.hero-bullets {
    position: absolute;
    top: 174px;
    right: 20px;
    width: 384px;
    display: flex;
    flex-direction: column;
}

.bullet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 80px;
    padding: 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.26);
}

.bullet-item span {
    flex: 1 0 0;
    min-width: 1px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #F8F6F7;
}

.bullet-item img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: block;
}

/* ==========================================================================
   Why MentalEvo — 1512x859, centred, 220px vertical padding
   ========================================================================== */

.why-mentalevo {
    position: relative;
    padding: 220px max(20px, calc((100% - 1224px) / 2));
    overflow: hidden;
}

/* The "For adults" photo below opens on flat #FEFEFE sky. Rather than dim the
   photo down to the page — which washes out the head sitting 25px under its
   top edge — bring the page up to the photo: the last stretch of this section
   ramps from the page ground to that same white, so the join has no edge.
   .why-inner already carries a z-index, so this stays behind the copy. */
.why-mentalevo::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 200px;
    background-image: linear-gradient(180deg, rgba(254, 254, 254, 0) 0%, #FEFEFE 100%);
    pointer-events: none;
}

/* 1358x776 lotus watermark, centred, 7% opacity */
.why-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1358px;
    height: 776px;
    transform: translate(-50%, -50%);
    opacity: 0.07;
    background-image: url('../assets/images/mentalevo-mark.webp');
    background-repeat: no-repeat;
    background-size: 1552px 1552px;
    background-position: -97px -388px;
    pointer-events: none;
}

.why-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.why-inner h2 {
    width: 600px;
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--black);
    text-align: center;
}

.why-text {
    width: 600px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 22px;
    line-height: 32px; /* Figma "1.45" resolves to a 32px line box */
    color: #3B3B3B;
    text-align: center;
}

/* ==========================================================================
   Section eyebrow + title ("Solutions / For adults")
   ========================================================================== */

.section-title-wrapper .sub-label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #3B3B3B;
}

.section-title-wrapper h2 {
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 400;
    line-height: 1;
    color: var(--black);
}

/* ==========================================================================
   App card — 600x372 Figma component
   ========================================================================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 600px);
    column-gap: 24px;
    row-gap: 40px;
}

/* Reserves the "Training Evo" card's old grid cell as blank space instead of
   letting the next card collapse into it. */
.cards-grid-spacer {
    height: 372px;
}

.app-card {
    position: relative;
    overflow: hidden;
    height: 372px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow: 0 0 24px 0 rgba(0, 20, 36, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.app-card--adults {
    background-image: linear-gradient(134.544deg, rgba(235, 236, 249, 0.68) 8.9423%, rgba(247, 233, 241, 0.68) 78.399%);
}

.app-card--kids {
    background-image: linear-gradient(134.544deg, rgba(237, 253, 233, 0.65) 8.9423%, rgba(173, 206, 104, 0.65) 78.399%);
}

/* --- header row: icon + titles + open button --- */

.app-card-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.app-card-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: block;
    object-fit: cover;
}

.app-card-titles {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-card-titles h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    color: var(--black);
    white-space: nowrap;
}

/* Long names shorten at the mobile breakpoint, as the mobile design does. */
.app-title-short {
    display: none;
}

.app-card-titles p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #4C4D59;
    opacity: 0.9;
}

.app-card-open {
    flex-shrink: 0;
    display: block;
    width: 48px;
    height: 48px;
}

.app-card-open img {
    display: block;
    width: 48px;
    height: 48px;
}

/* --- store badges + QR --- */

.app-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.app-card-badges {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-card-badges a {
    display: block;
    transition: transform 0.2s ease;
}

.app-card-badges a:hover {
    transform: scale(1.04);
}

.app-card-badges img {
    display: block;
    width: 120px;
    height: 40px;
}

.app-card-qr {
    display: block;
    width: 96px;
    height: 96px;
}

/* --- phone screens: 194x400 slot at x=380.56 / y=104 inside the card --- */

/* The slot itself does not clip (only Sound Evo does in Figma); the card's
   own overflow:hidden is what crops the screens. */
.app-card-screen {
    position: absolute;
    left: 380.56px;
    top: 104px;
    width: 194px;
    height: 400px;
    z-index: 1;
}

.app-card-screen-inner {
    position: absolute;
    inset: 0;
    display: block;
}

.app-card-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-card-screen--vision img {
    position: absolute;
    left: 50%;
    top: 0;
    width: 193.56px;
    height: 400px;
    transform: translateX(calc(-50% - 0.22px));
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.app-card-screen--sound {
    left: 379.56px;
    top: 103px;
    overflow: hidden;
}

.app-card-screen--sound img {
    position: absolute;
    left: -1.56px;
    top: 0;
    width: 197px;
    height: 400px;
}

.app-card-screen--nutrition img {
    position: absolute;
    left: 0.44px;
    top: -0.4px;
    width: 194px;
    height: 394px;
}

/* rotated kid screens */
.app-card-screen--kids-puzzle .app-card-screen-inner,
.app-card-screen--kids-drawing .app-card-screen-inner {
    position: absolute;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-card-screen--kids-puzzle .app-card-screen-inner {
    left: -119.56px;
    top: -26px;
    width: 433.683px;
    height: 328.592px;
}

.app-card-screen--kids-puzzle img {
    flex: none;
    width: 191.857px;
    height: 389.725px;
    transform: rotate(-67.06deg);
}

.app-card-screen--kids-drawing .app-card-screen-inner {
    left: -116.56px;
    top: -38px;
    width: 427.609px;
    height: 299.468px;
}

.app-card-screen--kids-drawing img {
    flex: none;
    width: 191px;
    height: 388px;
    transform: rotate(-107.62deg);
}

/* ==========================================================================
   Solutions — For adults (1512x1429)
   title y=64 (h82) · cards y=530 (h784) · bottom padding 115
   ========================================================================== */

.solutions-adults {
    position: relative;
    padding: 64px 0 115px;
    /* Square top: the photo opens on flat #FEFEFE sky that carries its own
       fade, so the section only needs to run edge to edge for the join to
       disappear. Figma's 40px top radius would cut two notches into it. */
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    background-color: #FEFEFE;
}

/* Figma crops a 1662x2494 photo at (-70,-606) inside the 1512x1429 section.
   Both offsets are restated as a share of the section's width so the crop
   survives any viewport — including the vertical one, which is why this is an
   element with a percentage margin rather than a background-position: margin
   percentages resolve against the containing block's width, background
   positions do not. A percentage background-position drifted the crop down as
   the page widened, which pushed her head onto the section's very edge and put
   a coloured row where the flat white one has to meet the page above. */
.solutions-adults::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4.62961%;              /* (100% - 109.9206%) x 46.6667% */
    width: 109.9206%;             /* 1662 / 1512 */
    aspect-ratio: 2730 / 4096;    /* the source file, so height follows width */
    margin-top: -40.0838%;        /* 606 / 1512, against the section's width */
    background: url('../assets/images/adults-section-bg.webp') no-repeat 0 0 / 100% 100%;
    pointer-events: none;
}

.solutions-adults .section-title-wrapper {
    margin: 0 0 384px 2px;
}

/* ==========================================================================
   MentalEvo Blog (1512x936) — 120px padding, 61px gaps
   ========================================================================== */

.blog-section {
    padding: 120px 0;
}

.blog-header {
    width: 100%;
    margin: 0 0 61px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.blog-header h2 {
    width: 100%;
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 400;
    line-height: 1;
    color: var(--black);
}

.blog-header p {
    width: 600px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 22px;
    line-height: 32px; /* Figma "1.45" resolves to a 32px line box */
    color: #464C51;
}

.blog-swiper-zone {
    position: relative;
    padding-left: max(20px, calc(50% - 612px));
}

.blog-swiper-zone .blog-swiper {
    position: relative;
    margin: 0;
    padding-bottom: 40px;
    overflow: hidden;
}

.blog-swiper .swiper-slide.blog-card {
    position: relative;
    width: 352px !important;
    height: 248px !important;
    border-radius: 20px;
    overflow: hidden;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-media-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* object-fit does not reliably crop an <iframe> (YouTube embeds are not a
   standard "replaced element" for it), so the video preview is instead
   oversized to the card's aspect ratio and centered, letting the card's own
   overflow:hidden crop it the same way object-fit:cover crops the images. */
.card-media-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
    min-width: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}

/* Sits over the (non-interactive) video preview so the click opens the
   video on YouTube in a new tab instead of YouTube's own in-frame "watch
   on YouTube" fallback, which would navigate this tab away. Stops short of
   .card-meta-link's z-index so the title strip keeps going to the post. */
.card-video-link {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.card-meta-link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: block;
    text-decoration: none;
}

.card-meta {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(14, 19, 63, 0) 0%, rgba(14, 19, 63, 0.8) 100%);
}

.card-meta h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--white);
}

/* Centered exactly on the 1224px content column's edge (half the button
   sits before it, half over the first/last card), matching the shared
   button_round component used elsewhere rather than sitting flush-inside
   the column. */
.blog-swiper-zone .swiper-button-next,
.blog-swiper-zone .swiper-button-prev {
    position: absolute;
    right: auto;
    top: 100px;
    margin-top: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 20;
}

.blog-swiper-zone .swiper-button-prev {
    left: calc(max(20px, calc(50% - 612px)) - 24px);
    /* At the first slide there's nothing to go back to — Swiper marks the
       button .swiper-button-disabled itself, so it appears once you've
       advanced past the first slide (same treatment as Sound Evo's rail).
       !important because swiper-bundle.min.css ships its own same-specificity
       .swiper-button-disabled{opacity:.35} rule that would otherwise win. */
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.blog-swiper-zone .swiper-button-prev:not(.swiper-button-disabled) {
    opacity: 1 !important;
    pointer-events: auto;
}

.blog-swiper-zone .swiper-button-next {
    left: calc(max(20px, calc(50% - 612px)) + 1200px);
}

.blog-swiper-zone .swiper-button-next::after,
.blog-swiper-zone .swiper-button-prev::after {
    display: none;
}

.blog-swiper-zone .swiper-button-next img,
.blog-swiper-zone .swiper-button-prev img {
    width: 96px;
    height: 96px;
    max-width: none;
}

.blog-swiper-zone .swiper-button-prev img {
    transform: scaleX(-1);
}

.blog-swiper-zone .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.blog-swiper-zone .swiper-button-prev.swiper-button-disabled {
    cursor: default;
}

/* dot rail: 7 x 16px with 12px gaps = 184px, 24px under the cards */
.blog-swiper .swiper-pagination {
    bottom: 0 !important;
    left: 0 !important;
    width: 1224px !important;
    height: 16px;
    line-height: 0;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 6px !important;
    background: #D9D9D9;
    border-radius: 50%;
    opacity: 1;
    transition: background 0.2s ease;
}

.swiper-pagination-bullet-active {
    background: var(--primary-blue);
}

.blog-see-all {
    display: flex;
    justify-content: center;
    margin-top: 61px;
}

.see-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 182px;
    height: 48px;
    border: 1.5px solid var(--primary-blue);
    border-radius: 100px;
    box-shadow: 0 0 24px 0 rgba(0, 20, 36, 0.12);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: var(--primary-blue) !important;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.see-all-btn:hover {
    background-color: rgba(69, 86, 252, 0.06);
}

/* ==========================================================================
   Solutions — For kids (1512x1090)
   title y=58 (h82) · cards y=655 (h372) · bottom padding 63
   ========================================================================== */

.solutions-kids {
    position: relative;
    padding: 58px 0 63px;
    /* Square bottom for the same reason the adults section has a square top:
       that edge dissolves rather than being clipped, so there is no corner. */
    border-radius: 40px 40px 0 0;
    overflow: hidden;
    background-color: #FEFEFE;
    background-image: url('../assets/images/kids-section-bg.webp');
    background-repeat: no-repeat;
    /* same treatment: Figma's 1970x1335 at (-227,-245) in a 1512x1090 section */
    background-size: 130.291% auto;
    background-position: 49.5633% 100%;
}

/* The mirror of the adults section's opening fade. That one ramps the page
   above down to the photo's flat white sky; this photo ends on couch, floor and
   houseplants, so there is no colour to ramp to and the fade has to sit over
   the photo itself. It stays under .container's z-index, so the two app cards
   keep their own edges while the picture behind them dissolves. */
.solutions-kids::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 260px;
    background-image: linear-gradient(180deg, rgba(248, 246, 247, 0) 0%, var(--page-bg) 100%);
    pointer-events: none;
}

.solutions-kids .section-title-wrapper {
    margin: 0 0 515px 2px;
}

/* ==========================================================================
   FAQ (1512x864) — two 600px columns, 24px gap, 120px padding
   ========================================================================== */

.faq-section {
    padding: 120px 0;
}

.faq-section .col-title {
    width: 600px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.faq-section .col-title .faq-eyebrow {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #3B3B3B;
}

.faq-section .col-title h2.faq-heading {
    width: 100%;
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--black);
}

.col-faq {
    width: 600px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-item {
    border-bottom: 1px solid #E0E0E0;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 103px; /* + 1px item border = the 104px Figma row */
    padding: 0;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: var(--black);
}

/* Questions read flush left. Figma hangs them at 30px, which is invisible while
   every question is one line but pushes the second line of a longer uk/ru
   question in under the number. :first-child so this never matches .faq-arrow. */
.faq-question > span:first-child {
    flex: 1 0 0;
    min-width: 1px;
}

.faq-arrow {
    flex: 0 0 auto;
    display: block;
    width: 48px;
    height: 48px;
    background: url('../assets/icons/faq-chevron-toggle.svg') no-repeat center / contain;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}

.faq-answer p {
    padding: 0 0 24px 30px;
}

/* ==========================================================================
   YouTube facade — shared by the four app product pages. Each page's own
   .{prefix}-video-frame rule owns the box; these only fill it, so the frames
   keep the sizes Figma gives them (726 desktop, 209/228 mobile).
   ========================================================================== */

[data-video] {
    position: relative;
    cursor: pointer;
}

[data-video] .video-poster,
[data-video] iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

[data-video] .video-poster {
    /* Posters are 16:9, the frames are a little wider than tall — cover so the
       crop happens at the edges rather than letterboxing the box. */
    object-fit: cover;
}

/* .ve-play and .se-play are flex children, so they need a position of their
   own to sit above the absolutely positioned poster. .kc-play/.ne-play are
   already absolute and only need the stacking order. */
[data-video] > button {
    z-index: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1320px) {
    .why-mentalevo {
        padding: 220px 20px;
    }
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .solutions-adults::before {
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        background-size: cover;
        background-position: center top;
    }
    .solutions-kids {
        background-size: cover;
        background-position: center top;
    }
}

/* Tablet only — below 769px the mobile design takes over wholesale. */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-main {
        height: auto;
        min-height: 600px;
        padding: 140px 0 60px;
    }
    .hero-text {
        position: static;
        width: auto;
        max-width: 560px;
    }
    .hero-text h1 {
        font-size: 40px;
    }
    .hero-bullets {
        position: static;
        width: 100%;
        max-width: 384px;
        margin-top: 40px;
    }

    .why-mentalevo {
        padding: 80px 20px;
    }
    .why-inner h2,
    .why-text {
        width: 100%;
        max-width: 600px;
    }

    .faq-section .container-grid {
        flex-direction: column;
    }

    .cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Single-column layout has no empty cell to reserve — the spacer would
       otherwise render as a blank gap between the surrounding cards. */
    .cards-grid-spacer {
        display: none;
    }
    .app-card {
        height: auto;
        min-height: 372px;
    }

    .solutions-adults,
    .solutions-kids {
        padding: 64px 0;
    }
    .solutions-adults .section-title-wrapper,
    .solutions-kids .section-title-wrapper {
        margin: 0 0 50px;
    }

    .blog-section,
    .faq-section {
        padding: 80px 0;
    }
    .blog-header p {
        width: 100%;
        max-width: 600px;
    }
    .blog-swiper .swiper-pagination {
        width: 100% !important;
    }
    .blog-swiper-zone .swiper-button-next {
        left: auto;
        right: 20px;
    }
    .blog-swiper-zone .swiper-button-prev {
        left: 20px;
    }

    .faq-section .col-title,
    .col-faq {
        width: 100%;
    }
}

/* ==========================================================================
   Mobile — Figma frame "MentalEvo_NEW" mobile (393px wide, node 6435:15418)
   Content column is 353px, i.e. 20px gutters. Sections sit 8px apart.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- Hero (828) ---- */

    .hero-main {
        height: 828px;
        padding: 0;
    }

    /* The mobile Figma frame swaps the video for a static photo; we go one
       further and crossfade the four hero photos, one per bullet below. */
    .hero-bg-poster,
    .hero-bg-video {
        display: none;
    }

    .hero-slideshow {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: heroFade 16s infinite;
    }

    .hero-slide--eye {
        animation-delay: 0s;
    }

    .hero-slide--habits {
        animation-delay: 4s;
    }

    .hero-slide--safe {
        animation-delay: 8s;
    }

    .hero-slide--stress {
        animation-delay: 12s;
    }

    /* Each slide's fade-out (25%->30%) overlaps the next slide's fade-in
       (0%->5%, delayed 4s later) over the same real-time window, so one is
       always fading in exactly as the other fades out — no bare gap. */
    @keyframes heroFade {
        0%, 100% {
            opacity: 0;
        }
        5%, 25% {
            opacity: 1;
        }
        30% {
            opacity: 0;
        }
    }

    .hero-container {
        max-width: none;
        padding: 0 20px;
    }

    .hero-text {
        left: 20px;
        right: 20px;
        /* 590 in Figma's English frame; raised so uk/ru's 4-line heading still
           clears the card's bottom edge instead of crowding it. */
        top: 545px;
        width: auto;
        gap: 16px;
    }

    .hero-text h1 {
        font-size: 38px;
        line-height: 1.1;
    }

    .hero-text p {
        font-size: 18px;
    }

    .hero-bullets {
        left: 20px;
        right: 20px;
        top: 125px;
        width: auto;
        height: 80px;
    }

    /* Only one value prop is shown at a time, matching the Figma mobile frame,
       synced to the hero-slide crossfade above via the shared heroFade keyframes. */
    .bullet-item {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation: heroFade 16s infinite;
    }

    .bullet-item--eye {
        animation-delay: 0s;
    }

    .bullet-item--habits {
        animation-delay: 4s;
    }

    .bullet-item--safe {
        animation-delay: 8s;
    }

    .bullet-item--stress {
        animation-delay: 12s;
    }

    /* ---- Why MentalEvo (565) ---- */

    .why-mentalevo {
        padding: 120px 20px;
    }

    /* keep the ramp inside this section's own padding */
    .why-mentalevo::after {
        height: 120px;
    }

    .why-inner {
        align-items: flex-start;
        gap: 32px;
    }

    .why-inner h2 {
        width: 100%;
        font-size: 34px;
        line-height: 1.15;
        text-align: left;
    }

    .why-text {
        width: 100%;
        font-size: 16px;
        line-height: 1.45;
        text-align: left;
    }

    .why-watermark {
        width: 510px;
        height: 291px;
        background-size: 582.9px 582px;
        background-position: -36.4px -145.5px;
    }

    /* ---- Section eyebrow + title ---- */

    .section-title-wrapper h2 {
        font-size: 34px;
    }

    /* ---- App card (351x372 mobile variant) ---- */

    .cards-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
    .cards-grid-spacer {
        display: none;
    }

    .app-card--adults,
    .app-card--kids {
        background-image: linear-gradient(119.932deg, rgba(235, 236, 249, 0.68) 8.9423%, rgba(247, 233, 241, 0.68) 78.399%);
    }

    .app-card--kids {
        background-image: linear-gradient(119.932deg, rgba(237, 253, 233, 0.65) 8.9423%, rgba(173, 206, 104, 0.65) 78.399%);
    }

    .app-card-icon {
        width: 48px;
        height: 48px;
    }

    .app-card-titles h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    .app-title-full {
        display: none;
    }

    .app-title-short {
        display: inline;
    }

    .app-card-titles p {
        font-size: 14px;
        line-height: 1.4;
    }

    .app-card-qr {
        display: none;
    }

    /* phone screens: 170x400 slot, right edge 24px inside the card */
    .app-card-screen {
        left: auto;
        right: 24px;
        top: 137px;
        width: 170px;
        height: 400px;
    }

    .app-card-screen--vision img {
        width: 170px;
        height: 351px;
    }

    .app-card-screen--sound {
        right: 24px;
        top: 137px;
    }

    .app-card-screen--sound img,
    .app-card-screen--nutrition img {
        left: 0;
        top: 0;
        width: 170px;
        height: 345px;
    }

    .app-card-screen--kids-puzzle .app-card-screen-inner {
        left: -25px;
        top: -41.24px;
        width: 339.067px;
        height: 256.903px;
    }

    .app-card-screen--kids-puzzle img {
        width: 150px;
        height: 304.699px;
    }

    .app-card-screen--kids-drawing .app-card-screen-inner {
        left: -24px;
        top: -57px;
        width: 335.806px;
        height: 235.18px;
    }

    .app-card-screen--kids-drawing img {
        width: 150px;
        height: 304.699px;
    }

    /* ---- For adults (1926) ---- */

    /* The photo only covers the top ~1047px of this 1926px section, so the
       frame's own fill carries the rest (Figma: bg-[#887b3e]). The image is
       centred horizontally, hence the 50% x-position. */
    .solutions-adults {
        padding: 24px 0;
        background-color: #887B3E;
    }

    .solutions-adults::before {
        left: 50%;
        width: 840px;
        height: 1261px;
        aspect-ratio: auto;
        margin-top: -214px;
        transform: translateX(-50%);
        background-size: 100% 100%;
        background-position: 0 0;
    }

    .solutions-adults > .container,
    .solutions-kids > .container,
    .blog-section > .container {
        max-width: none;
    }

    .solutions-adults .section-title-wrapper {
        margin: 0 0 227px 2px;
    }

    .solutions-adults .section-title-wrapper h2 {
        line-height: 1.15;
    }

    /* ---- Blog (822) ---- */

    .blog-section {
        padding: 120px 0;
    }

    .blog-header {
        margin: 0 0 48px;
        align-items: flex-start;
        text-align: left;
    }

    .blog-header h2 {
        font-size: 34px;
    }

    .blog-header p {
        width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    /* the mobile design drops the closing line */
    .blog-intro-tail {
        display: none;
    }

    .blog-swiper-zone {
        padding-left: 20px;
    }

    .blog-swiper .swiper-pagination {
        left: 0 !important;
        width: calc(100% - 20px) !important;
    }

    .blog-swiper-zone .swiper-button-next,
    .blog-swiper-zone .swiper-button-prev {
        display: none;
    }

    .blog-see-all {
        margin-top: 48px;
        padding: 0 20px;
    }

    .see-all-btn {
        width: 100%;
    }

    /* ---- For kids (1415) ---- */

    .solutions-kids {
        padding: 41px 0 14px;
        background-color: #FFFFFF;
        background-size: 1192px 807px;
        background-position: calc(50% - 63px) 0;
    }

    .solutions-kids .section-title-wrapper {
        margin: 0 0 522px 5px;
    }

    .solutions-kids .section-title-wrapper h2 {
        line-height: 1;
    }

    /* ---- FAQ (1108) ---- */

    .faq-section {
        padding: 120px 0;
    }

    .faq-section .container-grid {
        flex-direction: column;
        gap: 40px;
    }

    .faq-section .col-title {
        width: 100%;
    }

    .faq-section .col-title .faq-eyebrow {
        color: #4C4D59;
    }

    .faq-section .col-title h2.faq-heading {
        font-size: 40px;
        line-height: 1.1;
    }

    .faq-heading .faq-accent {
        color: var(--primary-blue);
    }

    .col-faq {
        width: 100%;
    }

    .faq-item {
        border-bottom-color: #D7D7E3;
    }

    .faq-question {
        line-height: 1.4;
    }

    .faq-arrow {
        width: 40px;
        height: 40px;
        background-image: url('../assets/icons/faq-chevron-toggle.svg');
    }
}