/* ==========================================================================
   MAIN SCREEN — Mobile (360px – 440px)
   Design reference: 393x5509 (the body below hero, footer excluded —
   that gets its own pass later, same as hero's footer). Elements
   added to main_screen.desktop.css get a matching hide-rule here as
   they're introduced, same isolation principle as hero.
   ========================================================================== */

.main-screen {
    position: relative;
    width: 100%;
    height: calc(550.9rem + var(--faq-extra, 0rem));
    background-color: #000000;
    overflow: hidden;
    transition: height 0.4s ease;
}

/* Zero-size scroll target — same element as desktop (.main-screen__anchor
   base rule lives in main_screen.desktop.css, but that file doesn't
   load at mobile widths), so it needs its own position here too. */
.main-screen__anchor {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
}

.main-screen__anchor--services { top: 153.6rem; }
.main-screen__anchor--faq { top: 339.8rem; }

/* Reveal-on-scroll — js/main_screen.js adds .is-revealed to the group
   (once, via IntersectionObserver) the first time it enters the
   viewport: the two labels fade/drop in, the cards slide in from the
   left with a slight stagger per card. */
.main-screen-mobile__scroll-now,
.main-screen-mobile__concept-label {
    position: absolute;
    top: 1.5rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0;
    transform: translateY(-0.8rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__cases-group.is-revealed .main-screen-mobile__scroll-now,
.main-screen-mobile__cases-group.is-revealed .main-screen-mobile__concept-label {
    opacity: 1;
    transform: translateY(0);
}

.main-screen-mobile__scroll-now { left: 2rem; }
.main-screen-mobile__concept-label { right: 2rem; }

/* Horizontal card carousel — plain scroll + snap (no JS), with a
   deliberate "sliver of the next card" peek at rest: card(35.3rem) +
   left inset(2rem) = 37.3rem, leaving 2rem of the 39.3rem-wide
   viewport (see the hero background's own width note in
   hero.mobile.css for why 39.3rem = 100vw here) for the next card's
   edge to show through — exactly the nudge the client asked for, so
   it stays consistent across the whole 360-440 fluid range instead of
   being tuned for one specific width. */
.main-screen-mobile__cases {
    position: absolute;
    left: 0;
    top: 4rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2rem;
    scroll-padding-right: 2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.main-screen-mobile__cases::-webkit-scrollbar {
    display: none;
}

.main-screen-mobile__cases-track {
    display: flex;
    gap: 0.5rem;
    width: max-content;
    padding: 0 2rem;
}

/* No scroll-snap-align here on purpose — see .is-snap-ready below.
   A card only BECOMES a snap target once its own reveal transition
   has actually finished (added by js/main_screen.js on transitionend);
   while it doesn't have one yet, the browser has nothing to
   "correct" mid-animation (that's what caused cards to jolt/overshoot
   when the card itself carried both the transform animation AND
   scroll-snap-align at the same time). */
.main-screen-mobile__case-card {
    display: block;
    flex-shrink: 0;
    width: 35.3rem;
    height: 43.6rem;
    overflow: hidden;
    opacity: 0;
    transform: translateX(6rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__case-card.is-snap-ready {
    scroll-snap-align: start;
}

.main-screen-mobile__cases-group.is-revealed .main-screen-mobile__case-card {
    opacity: 1;
    transform: translateX(0);
}

.main-screen-mobile__case-card:nth-child(1) { transition-delay: 0s; }
.main-screen-mobile__case-card:nth-child(2) { transition-delay: 0.08s; }
.main-screen-mobile__case-card:nth-child(3) { transition-delay: 0.16s; }
.main-screen-mobile__case-card:nth-child(4) { transition-delay: 0.24s; }
.main-screen-mobile__case-card:nth-child(5) { transition-delay: 0.32s; }
.main-screen-mobile__case-card:nth-child(6) { transition-delay: 0.4s; }
.main-screen-mobile__case-card:nth-child(7) { transition-delay: 0.48s; }
.main-screen-mobile__case-card:nth-child(8) { transition-delay: 0.56s; }
.main-screen-mobile__case-card:nth-child(9) { transition-delay: 0.64s; }

/* The one wide card — same height, double-ish width. */
.main-screen-mobile__case-card--4 {
    width: 70.6rem;
}

/* "See more" — same slot size as a case card; the graphic is a plain
   SVG mark, not a photo, so it's contained (not cropped) on its own
   dark fill instead of stretched via object-fit: cover. */
.main-screen-mobile__case-card--see-more {
    background-color: #111111;
}

.main-screen-mobile__case-card--see-more img {
    object-fit: contain;
}

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

/* Heading + subheading + text block, below the case carousel.
   Reveal-on-scroll: js/main_screen.js adds .is-revealed to the group
   (via IntersectionObserver, since — unlike the cards right under the
   hero — this block is far enough down the page that entering the
   viewport IS the moment the client scrolls to it) and each line
   slides in from the left with a stagger. */
.main-screen-mobile__text-group {
    position: relative;
}

.main-screen-mobile__heading,
.main-screen-mobile__subheading,
.main-screen-mobile__text {
    opacity: 0;
    transform: translateX(-6rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__text-group.is-revealed .main-screen-mobile__heading,
.main-screen-mobile__text-group.is-revealed .main-screen-mobile__subheading,
.main-screen-mobile__text-group.is-revealed .main-screen-mobile__text {
    opacity: 1;
    transform: translateX(0);
}

.main-screen-mobile__text-group.is-revealed .main-screen-mobile__heading { transition-delay: 0s; }
.main-screen-mobile__text-group.is-revealed .main-screen-mobile__subheading { transition-delay: 0.15s; }
.main-screen-mobile__text-group.is-revealed .main-screen-mobile__text { transition-delay: 0.3s; }

.main-screen-mobile__heading {
    position: absolute;
    left: 2rem;
    top: 51.5rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 5rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    white-space: pre-line;
    z-index: 1;
}

/* Ukrainian copy is 2 lines, not 3 — shift down by one line-height so
   its bottom still lines up with the subheading below, same as the
   other languages' 3-line version. */
html[data-lang="uk"] .main-screen-mobile__heading {
    top: 55.5rem;
}

.main-screen-mobile__subheading {
    position: absolute;
    left: 2rem;
    top: 66rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    white-space: pre-line;
    z-index: 1;
}

.main-screen-mobile__text {
    position: absolute;
    left: 2rem;
    top: 72rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    white-space: pre-line;
    z-index: 1;
}

.main-screen-mobile__text-group.is-revealed .main-screen-mobile__text {
    opacity: 0.5;
}

/* Black section below the text block — same adaptive-background trick
   as the hero (39.3rem width = 100vw throughout the 360-440 range),
   height:auto keeps the 393x768 image proportional. */
.main-screen-mobile__section-bg {
    position: absolute;
    left: 0;
    top: 76.8rem;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 0;
}

/* Second copy of the same background, further down for the FAQ area. */
.main-screen-mobile__section-bg--2 {
    top: 278.5rem;
}

/* White screen starts here — overlaps 2rem (20px) into the tail end
   of the second black background (278.5 + 76.8 - 2 = 353.3rem) to
   hide any seam, then runs all the way to the bottom of .main-screen. */
.main-screen-mobile__white-bg {
    position: absolute;
    left: 0;
    top: 353.3rem;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 0;
}

/* Thin static baseline — 353x0.3 in the mockup, centered with a
   permanent 2rem inset on each side (35.3 + 2*2 = 39.3rem = 100vw,
   same invariant as everywhere else in the mobile system), so it
   scales in lockstep with the viewport instead of staying pinned to
   one width. */
.main-screen-mobile__section-line {
    position: absolute;
    left: 50%;
    top: 83rem;
    width: 35.3rem;
    height: 0.03rem;
    background-color: #ffffff;
    opacity: 0.7;
    transform: translateX(-50%);
    z-index: 1;
}

/* Thicker "scanner" line, exactly a quarter of the baseline's length,
   stepping across its 4 quarters — moves to the next quarter every 2s,
   8s per full loop. Positioned with the same left anchor as the
   baseline (not centered via transform) so its left offset can be
   animated directly; top is shifted up so its (thicker) box is
   vertically centered on the thin baseline instead of sharing its top. */
.main-screen-mobile__section-line-active {
    position: absolute;
    left: calc(50% - 17.65rem);
    top: 82.865rem;
    width: 8.825rem;
    height: 0.3rem;
    background-color: #ffffff;
    opacity: 1;
    z-index: 2;
    animation: section-line-scan 8s ease-in-out infinite;
}

@keyframes section-line-scan {
    0%, 20%   { transform: translateX(0); }
    25%, 45%  { transform: translateX(8.825rem); }
    50%, 70%  { transform: translateX(17.65rem); }
    75%, 95%  { transform: translateX(26.475rem); }
    100%      { transform: translateX(0); }
}

/* Step labels — one per quarter, each fading in only while the
   scanner line is over its slot, synced to the exact same keyframe
   timing above. Left-aligned to that slot's own left edge, sitting
   0.5rem above the scanner line. */
.main-screen-mobile__step-label {
    position: absolute;
    top: 80.765rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0;
    z-index: 2;
}

.main-screen-mobile__step-label--1 { left: calc(50% - 17.65rem); animation: section-step-1 8s ease-in-out infinite; }
.main-screen-mobile__step-label--2 { left: calc(50% - 8.825rem); animation: section-step-2 8s ease-in-out infinite; }
.main-screen-mobile__step-label--3 { left: 50%; animation: section-step-3 8s ease-in-out infinite; }
.main-screen-mobile__step-label--4 { left: calc(50% + 8.825rem); animation: section-step-4 8s ease-in-out infinite; }

@keyframes section-step-1 {
    0%, 20%   { opacity: 1; }
    25%, 100% { opacity: 0; }
}

@keyframes section-step-2 {
    0%, 20%   { opacity: 0; }
    25%, 45%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes section-step-3 {
    0%, 45%   { opacity: 0; }
    50%, 70%  { opacity: 1; }
    75%, 100% { opacity: 0; }
}

@keyframes section-step-4 {
    0%, 70%   { opacity: 0; }
    75%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* Decorative lines/circles — pre-built SVG, same centered-with-2rem-
   inset pattern as the section baseline above (35.3 + 2*2 = 39.3rem
   = 100vw throughout the range). */
.main-screen-mobile__lines {
    position: absolute;
    left: 50%;
    top: 86.4rem;
    width: 35.3rem;
    height: 20.6rem;
    max-width: none;
    transform: translateX(-50%);
    z-index: 1;
}

/* Stats group — result/statistics/reviews-intro texts slide in from
   the left (opacity, like the heading block above), avatars + review
   button scale in one after another right after. Triggered once the
   case carousel has scrolled entirely past the top of the screen. */
.main-screen-mobile__result,
.main-screen-mobile__statistics-link,
.main-screen-mobile__reviews-intro {
    opacity: 0;
    transform: translateX(-6rem);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__result,
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__statistics-link,
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-intro {
    opacity: 1;
    transform: translateX(0);
}

.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__result { transition-delay: 0s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__statistics-link { transition-delay: 0.15s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-intro { transition-delay: 0.3s; }

.main-screen-mobile__reviews-avatar,
.main-screen-mobile__reviews-btn {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar,
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-btn {
    opacity: 1;
    transform: scale(1);
}

.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar--1 { transition-delay: 0.45s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar--2 { transition-delay: 0.55s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar--3 { transition-delay: 0.65s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar--4 { transition-delay: 0.75s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-avatar--5 { transition-delay: 0.85s; }
.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__reviews-btn { transition-delay: 0.95s; }

.main-screen-mobile__result {
    position: absolute;
    left: 2rem;
    top: 87rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    z-index: 2;
}

.main-screen-mobile__stats-group.is-revealed .main-screen-mobile__result {
    opacity: 0.5;
}

.main-screen-mobile__statistics-link {
    position: absolute;
    left: 2rem;
    top: 98.1rem;
    display: block;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    text-transform: lowercase;
    text-decoration: underline;
    color: #ffffff;
    z-index: 2;
}

.main-screen-mobile__reviews-intro {
    position: absolute;
    left: 2rem;
    top: 101.3rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    z-index: 2;
}

.main-screen-mobile__reviews-avatar {
    position: absolute;
    top: 103.5rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    z-index: 2;
}

.main-screen-mobile__reviews-avatar--1 { left: 2rem; z-index: 5; }
.main-screen-mobile__reviews-avatar--2 { left: 4.7rem; z-index: 4; }
.main-screen-mobile__reviews-avatar--3 { left: 7.4rem; z-index: 3; }
.main-screen-mobile__reviews-avatar--4 { left: 10.1rem; z-index: 2; }
.main-screen-mobile__reviews-avatar--5 { left: 12.8rem; z-index: 1; }

.main-screen-mobile__reviews-btn {
    position: absolute;
    left: 15.5rem;
    top: 103.5rem;
    display: block;
    width: 13.8rem;
    height: 4rem;
    z-index: 2;
}

.main-screen-mobile__reviews-btn-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Second heading, same style as the first — reveals (slide from left
   via opacity) once the first heading has scrolled past the top of
   the screen (see js/main_screen.js). */
.main-screen-mobile__heading-2 {
    position: absolute;
    left: 2rem;
    top: 116.6rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 5rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    white-space: pre-line;
    opacity: 0;
    transform: translateX(-6rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.main-screen-mobile__heading-2.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Grid/client-logo marquee — same infinite-scroll technique as the
   hero ribbons and the partners row: two copies of the track,
   translateX(-50%) loop, right-to-left. */
.main-screen-mobile__greed {
    position: absolute;
    left: 0;
    top: 130rem;
    width: 100%;
    height: 20rem;
    overflow: hidden;
    z-index: 1;
}

.main-screen-mobile__greed-track {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    animation: main-screen-mobile-greed-scroll 30s linear infinite;
}

@keyframes main-screen-mobile-greed-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.main-screen-mobile__greed-logo {
    flex-shrink: 0;
    width: 16rem;
    height: 20rem;
    object-fit: cover;
}

/* Services block banner — marks where the services section starts
   (see .main-screen__anchor--services above), full-bleed like the
   hero/section backgrounds. */
.main-screen-mobile__services-banner {
    position: absolute;
    left: 0;
    top: 153.6rem;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 1;
}

/* Service cards — full-bleed, each 393x280 stacked with a 20px gap
   (28rem tall + 2rem gap = 30rem between each card's top). Reveal is
   per-card (IntersectionObserver in js/main_screen.js), not a single
   group trigger — they're spaced far enough apart down the page that
   one shared trigger would finish most of them off-screen before the
   client actually scrolls to see them. */
.main-screen-mobile__service-card {
    position: absolute;
    left: 0;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 1;
    opacity: 0;
    transform: translateY(6rem);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-screen-mobile__service-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.main-screen-mobile__service-card--1 { top: 156.6rem; }
.main-screen-mobile__service-card--2 { top: 186.6rem; }
.main-screen-mobile__service-card--3 { top: 216.6rem; }
.main-screen-mobile__service-card--4 { top: 246.6rem; }
.main-screen-mobile__service-card--5 { top: 276.6rem; }

.main-screen-mobile__faq-heading {
    position: absolute;
    left: 2rem;
    top: 339.8rem;
    width: 21.3rem;
    height: 12.5rem;
    max-width: none;
    z-index: 1;
}

/* Same centered-with-inset pattern as the earlier section lines,
   just black instead of white, sitting 1.5rem (15px) below the
   heading's own bottom edge (339.8 + 12.5 + 1.5 = 353.8rem). */
.main-screen-mobile__faq-divider {
    position: absolute;
    left: 50%;
    top: 353.8rem;
    width: 35.3rem;
    height: 0.05rem;
    background-color: #000000;
    opacity: 0.5;
    transform: translateX(-50%);
    z-index: 1;
}

/* FAQ accordion — the list is a normal (in-flow) stack, not absolute
   per block, so opening one block naturally pushes the ones below it
   down without any JS math. The "rubber screen" part (everything
   below the whole list, i.e. the footer once it exists) comes from
   .main-screen's own height growing/shrinking with --faq-extra,
   updated in js/main_screen.js on every open/close. */
.main-screen-mobile__faq-list {
    position: absolute;
    left: 2rem;
    top: 357.3rem;
    width: 35.3rem;
    z-index: 1;
}

.main-screen-mobile__faq-block {
    position: relative;
    background-color: #ffffff;
    border: 0.05rem solid rgba(0, 0, 0, 0.2);
    border-radius: 2rem;
    box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 11.4rem;
    margin-bottom: 1rem;
    transition: height 0.4s ease;
}

/* Open height is set inline by js/main_screen.js (measured from the
   answer's own rendered content), not hardcoded here — a fixed rem
   number per block only holds for the exact text it was measured
   against, and drifts on every other language's line count. Measuring
   guarantees the same 30px (3rem) gap under the answer everywhere. */

/* 3-line questions sit higher (less top inset) so all three lines fit
   comfortably in the same 114-tall closed card; the answer below
   shifts down to match, same 24px (2.4rem) gap-after-question rule
   as the 2-line blocks. */
.main-screen-mobile__faq-block--3 .main-screen-mobile__faq-question,
.main-screen-mobile__faq-block--6 .main-screen-mobile__faq-question {
    top: 2.4rem;
}

.main-screen-mobile__faq-block--3 .main-screen-mobile__faq-answer,
.main-screen-mobile__faq-block--6 .main-screen-mobile__faq-answer {
    top: 11.2rem;
}

.main-screen-mobile__faq-trigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 9rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    z-index: 1;
}

.main-screen-mobile__faq-question {
    position: absolute;
    left: 3rem;
    top: 3.4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 1;
    white-space: pre-line;
}

.main-screen-mobile__faq-arrow {
    position: absolute;
    right: 3rem;
    top: 5.1rem;
    width: 2.4rem;
    height: 1.2rem;
    transition: transform 0.4s ease;
}

.main-screen-mobile__faq-block.is-open .main-screen-mobile__faq-arrow {
    transform: scaleY(-1);
}

.main-screen-mobile__faq-answer {
    position: absolute;
    left: 3rem;
    top: 10.2rem;
    width: 29.3rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0;
    text-align: justify;
    transition: opacity 0.3s ease;
}

.main-screen-mobile__faq-block.is-open .main-screen-mobile__faq-answer {
    opacity: 0.7;
}

/* "Still have questions?" heading — same font metrics as
   .main-screen-mobile__heading-2 ("Promote your brand"), but black
   (this part of the page is on the white background) and split into
   two lines via separate elements instead of white-space:pre-line so
   each line can carry its own opacity. */
.main-screen-mobile__faq-cta-heading {
    position: absolute;
    left: 2rem;
    top: 441.7rem;
    margin: 0;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

.main-screen-mobile__faq-cta-heading-line {
    display: block;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 5rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
}

.main-screen-mobile__faq-cta-heading-line--dim {
    opacity: 0.5;
}

.main-screen-mobile__faq-cta-subheading {
    position: absolute;
    left: 2rem;
    top: 451.7rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 1;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

/* FAQ contact form — email input, question textarea, char counter,
   send button. All below the CTA heading/subheading, so they carry
   the same --faq-extra shift to stay put relative to the (possibly
   expanded) FAQ list above. Submission logic is in js/faq.js,
   shared with the desktop form via the same Telegram relay. */
.main-screen-mobile__faq-email {
    position: absolute;
    left: 2rem;
    top: 454.2rem;
    width: 35.3rem;
    height: 4.5rem;
    padding: 1.3rem 1.5rem 1.6rem;
    margin: 0;
    background-color: #ffffff;
    border: 0.05rem solid rgba(0, 0, 0, 0.2);
    border-radius: 2rem 2rem 2rem 0.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

.main-screen-mobile__faq-email::placeholder {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.2);
}

.main-screen-mobile__faq-question-input {
    position: absolute;
    left: 2rem;
    top: 459.4rem;
    width: 35.3rem;
    height: 10.5rem;
    padding: 1.2rem 1.5rem 0;
    margin: 0;
    resize: none;
    background-color: #ffffff;
    border: 0.05rem solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem 2rem 2rem 2rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

.main-screen-mobile__faq-question-input::placeholder {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.2);
}

.main-screen-mobile__faq-counter {
    position: absolute;
    right: 3.5rem;
    top: 460.6rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    text-align: right;
    color: rgba(0, 0, 0, 0.2);
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.main-screen-mobile__faq-send {
    position: absolute;
    right: 3.5rem;
    top: 466.7rem;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    background: none;
    border: none;
    opacity: 0.3;
    cursor: pointer;
    transform: translateY(var(--faq-extra, 0rem));
    transition: opacity 0.2s ease, transform 0.4s ease;
    z-index: 2;
}

.main-screen-mobile__faq-send.is-active {
    opacity: 1;
}

.main-screen-mobile__faq-send img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Social icons row + CTA text, below the FAQ form — same --faq-extra
   shift as everything else down here so it stays put relative to the
   (possibly expanded) FAQ list above. */
.main-screen-mobile__contact-social-icon {
    position: absolute;
    top: 475.3rem;
    display: block;
    width: 5rem;
    height: 5rem;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

.main-screen-mobile__contact-social-icon--1 { left: 2rem; }
.main-screen-mobile__contact-social-icon--2 { left: 8rem; }
.main-screen-mobile__contact-social-icon--3 { left: 14rem; }

.main-screen-mobile__contact-social-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.main-screen-mobile__contact-social-heading {
    position: absolute;
    left: 2rem;
    top: 481.8rem;
    width: 35.3rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
    white-space: pre-line;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

.main-screen-mobile__contact-social-subheading {
    position: absolute;
    left: 2rem;
    top: 487.3rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    transform: translateY(var(--faq-extra, 0rem));
    transition: transform 0.4s ease;
    z-index: 1;
}

/* Same background/logo pair as the hero, duplicated at the very
   bottom of the page — same adaptive-width trick (39.3rem = 100vw)
   and same bottom-anchored logo placement as hero.mobile.css. */
.main-screen-mobile__bottom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 0;
}

.main-screen-mobile__bottom-logo {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    width: 35.3rem;
    height: 8.2rem;
    transform: translateX(-50%);
    max-width: none;
    z-index: 1;
}

.main-screen__partners,
.main-screen__fade,
.main-screen__logo,
.main-screen__intro,
.main-screen__heading,
.main-screen__subheading,
.main-screen__case,
.main-screen__bottom-logo,
.main-screen__footer-link,
.main-screen__reviews-bg,
.main-screen__reviews-intro,
.main-screen__reviews-avatar,
.main-screen__reviews-btn,
.main-screen__white-bg,
.main-screen__greed,
.main-screen__greed-fade,
.main-screen__more-cases,
.main-screen__services-heading,
.main-screen__services-text,
.main-screen__service-card,
.main-screen__faq-graphic,
.main-screen__faq-prompt,
.main-screen__faq-email,
.main-screen__faq-question,
.main-screen__faq-counter,
.main-screen__faq-send,
.main-screen__faq-divider,
.main-screen__faq-btn,
.main-screen__faq-answer,
.main-screen__faq-logo {
    display: none;
}