/* ==========================================================================
   Round13 — Launch page (single bundle, theo mô hình Round11 homepage.css)
   Figma file: Website Design - Phase 2 (w.Harley) — frame launch/desktop 10384:20782
   Token: dùng thẳng token của assets/css/global.css (--color-*, --fs-*, --var-*,
   --section-*, --container-max). Global đã tự override --fs-* / --section-*
   ở max-width:1024 nên trang này không khai báo lại. Giá trị nào global không
   có thì viết cứng tại chỗ (kèm comment lý do), không tạo token mới.
   Breakpoint rule: > 1024px = desktop; <= 1024px = tablet + mobile dùng chung.
   ========================================================================== */

.r13-launch {
    font-family: var(--font-body); /* DM Sans — global.css */
    background: var(--color-2nd-bg);
}

/* ==========================================================================
   Shared — section wrapper + headings block (Figma component "section-wrapper",
   "section-headings" dùng lại ở mọi section)
   ========================================================================== */

.r13-section {
    display: flex;
    justify-content: center;
    padding: var(--var-140) 20px;
    /* Toàn bộ section đang render (hero → testimonials) dùng chung một nền
       --color-2nd-bg; không còn xen kẽ nền như bản Figma gốc. */
    background: var(--color-2nd-bg);
}

.r13-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
    width: 100%;
    max-width: var(--container-max);
}

.r13-headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-28);
    width: 100%;
}

.r13-headings__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-12);
    width: 100%;
}

.r13-headings__subheading {
    max-width: 800px;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(90deg, var(--color-1st-brd) 0%, var(--color-2nd-brd) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hero badges (Figma 4003:5974 section-headings/badges 4204:2357) */
.r13-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6);
}

.r13-badge {
    display: flex;
    align-items: center;
    gap: var(--var-4);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    color: var(--color-1st-fg);
    white-space: nowrap;
}

.r13-badge img {
    display: block;
    flex-shrink: 0;
}

.r13-badge--bfs {
    padding: var(--var-4);
    background: var(--color-semantic-shopify-bg);
    color: var(--color-semantic-shopify-fg);
}

.r13-badges__divider {
    align-self: stretch;
    width: 1px;
    background: var(--color-stroke);
}

.r13-headings__title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-40);
    width: 100%;
}

.r13-headings__heading {
    max-width: 800px;
    font-weight: 600;
    color: var(--color-1st-fg);
    line-height: 1.15;
    text-align: center;
    font-family: var(--font-body);
}

.r13-headings__heading--h1 {
    font-size: var(--fs-h1);
}

.r13-headings__heading--h2 {
    font-size: var(--fs-h2);
}

.r13-headings__desc {
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
    text-align: center;
}

.r13-headings__buttons {
    display: flex;
    align-items: center;
    gap: var(--var-12);
}

.r13-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6);
    padding: var(--var-14) var(--var-28);
    border-radius: 100px;
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    transition: opacity 0.2s ease;
}

.r13-btn:hover {
    opacity: 0.85;
}

.r13-btn--primary {
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
}

/* Figma button/text secondary: nền trắng + stroke #d3d3d3 (trừ 1px border khỏi padding để giữ đúng 42px) */
.r13-btn--secondary {
    padding: 13px 27px;
    border: 1px solid var(--color-stroke);
    background: var(--color-2nd-btn-bg);
    color: var(--color-2nd-btn-fg);
}

/* ==========================================================================
   Section 1 — Hero (Figma 10384:20791)
   ========================================================================== */

.r13-hero__media {
    /* Figma: image 1 w=1920 full-bleed, tràn khỏi content-wrapper 1400 */
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.r13-hero__media img {
    /* 529.219 là số THẬT của Figma (box graphic 1920×529.219), không phải số làm tròn hỏng.
       Cố định height + object-cover ⇒ hero giữ nguyên chiều cao ở mọi bề rộng desktop, chỉ crop
       ngang. Figma không có spec cho desktop ≠ 1920 nên chưa đổi sang aspect-ratio (sẽ làm hero
       co lại ở màn hẹp) — cần design chốt trước. Ảnh nguồn 4096×1728 có padding trong suốt. */
    display: block;
    width: 100%;
    height: 529.219px;
    object-fit: cover;
}

/* Graphic ≤1024 (image 38) ẩn ở desktop */
.r13-hero__media-mobile {
    display: none;
}

/* ==========================================================================
   Section 2 — Skip the guesswork with AI (Figma 10384:20797)
   ========================================================================== */

.r13-ai,
.r13-control,
.r13-signup,
.r13-touchpoint {
    padding-top: 0;
}

/* Nền đã gộp về --color-2nd-bg ở .r13-section, nên modifier này giờ chỉ còn tác
   dụng đổi padding ngang (giữ tên --white để không phải sửa markup 3 section). */
.r13-section--white {
    /* Figma mode section nền trắng: section-horizontal-padding = 32 desktop / 20 ≤1024 (global token) */
    padding-inline: var(--section-horizontal-padding);
}

.r13-headings--left {
    align-items: flex-start;
}

.r13-headings--left .r13-headings__heading,
.r13-headings--left .r13-headings__desc {
    text-align: left;
}

/* --- Graphic element 1400×680 (Figma 4003:5977) — Lottie, scale theo bề rộng content.
       Figma tablet 4003:6076 cho 794×385.657 = 794 × (680/1400) ⇒ đúng aspect, không reflow.
       aspect-ratio giữ chỗ sẵn để không CLS trong lúc JSON còn đang tải. --- */

.r13-ai__graphic {
    width: 100%;
    max-width: 1400px;
    aspect-ratio: 1400 / 680;
}

.r13-ai__graphic svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Feature items --- */

.r13-features {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--var-40);
    width: 100%;
}

.r13-feature {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: var(--var-20);
}

.r13-feature__icon-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-3rd-bg);
}

.r13-feature__icon {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.r13-feature__icon--affiliate img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25%;
    bottom: 18.75%;
    width: 30px;
    height: 56.25%;
}

.r13-feature__icon-ai-main {
    position: absolute;
    inset: 8.32%;
    width: 83.36%;
    height: 83.36%;
}

.r13-feature__icon-ai-spark {
    position: absolute;
    inset: 3.13% 3.13% 71.88% 71.88%;
    width: 24.99%;
    height: 24.99%;
}

.r13-feature__icon--feedback img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
}

.r13-feature__text {
    display: flex;
    flex-direction: column;
    gap: var(--var-16);
    width: 100%;
}

.r13-feature__title {
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: 1.15;
    color: var(--color-1st-fg);
    font-family: var(--font-body);
}

.r13-feature__desc {
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* ==========================================================================
   Section 3 — Take full program control (Figma 10384:20802)
   ========================================================================== */

.r13-section--pt-only {
    padding-bottom: 0;
}

.r13-control__rows {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.r13-control__row {
    display: flex;
    align-items: center;
    gap: var(--var-80);
    width: 100%;
    /* Figma py=40; stroke Figma không chiếm layout nên trừ 1px border vào padding-bottom */
    padding: var(--var-40) 0 39px;
    border-bottom: 1px solid var(--color-stroke);
}

.r13-control__num {
    width: 32px;
    flex-shrink: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-reverse-stroke);
}

.r13-control__title {
    flex: 1 0 0;
    min-width: 1px;
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: 1.15;
    color: var(--color-1st-fg);
    font-family: var(--font-body);
}

.r13-control__desc {
    flex: 1 0 0;
    min-width: 1px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* ==========================================================================
   Section 6 — Testimonials carousel (Figma 4003:6000)
   ========================================================================== */
/* ==========================================================================
   Section 6 — Testimonials carousel.
   Carousel do component dung chung [sc_cinematic_slider] render (giong
   homepage/section-switch); style cua no o
   template-parts/compound/cinematic-slider/assets/styles.css. O day chi la wrapper.

   Geometry copy tu .switch-inner cua home: variant-switch dat
   --cs-card-width: min(1300px, 80vw) nen card luon 1300, phan "peek" hai ben chinh la
   (be rong wrapper - 1300)/2. Home de 1560 va padding-inline 0 -> peek 130px.
   Heading van nam trong --container-max, chi rieng slider duoc rong toi 1560.
   ========================================================================== */

/* Section nay giu nen goc --color-1st-bg (cac section phia tren da gop ve
   --color-2nd-bg o .r13-section), nho do card 2nd-bg van noi tren nen. */
.r13-section.r13-testimonial {
    padding-inline: 0;
    background: var(--color-1st-bg);
    overflow-x: clip;
}

.r13-testimonial__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
    width: 100%;
    max-width: 1560px; /* hard_code: 1560px - bang .switch-inner cua home */
}

.r13-testimonial .r13-headings {
    max-width: var(--container-max);
    padding-inline: 20px; /* hard_code: 20px - bu lai padding-inline cua .r13-section */
}

.r13-testimonial__slider {
    width: 100%;
}

@media (max-width: 1024px) {
    .r13-section.r13-testimonial {
        padding-block: var(--var-72) 0;
    }
}

/* ==========================================================================
   Section 4 — Control how new partners join (Figma 4003:5991/6177/6225)
   Sticky-scrub: [progress 28] gap40 [text] | [mockup 600x450 xếp dọc].
   Cột trái dính giữa viewport, cột phải cuộn qua — cùng cơ chế với
   section service-intro-scrub của page Switch To UpPromote.
   Slide 1 = ảnh form; slide 2 = review list; slide 3 = auto-approval fan.
   ========================================================================== */

.r13-signup__scrub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    column-gap: var(--var-40);
    align-items: start;
    width: 100%;
}

/* padding 30% trên/dưới: nới quãng sticky để text đầu/cuối vẫn kịp dính giữa
   viewport trước khi cột phải hết ảnh (giống .scrub-left của page Switch). */
.r13-signup__scrub-left {
    position: relative;
    height: 100%;
    min-width: 0;
    padding-block: 30%;
}

.r13-signup__scrub-sticky {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--var-40);
}

@supports (top: 50dvh) {
    .r13-signup__scrub-sticky {
        top: 50dvh;
    }
}

/* 3 text nằm chồng cùng 1 ô grid, chỉ text active hiện — cross-fade khi đổi slide */
.r13-signup__text-stack {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
}

.r13-signup__text-stack > .r13-signup__text {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.r13-signup__text-stack > .r13-signup__text.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.r13-signup__scrub-right {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Progress 28x96: p8 gap8 radius999 bg #f6f5f4 — pill trượt top/middle/bottom */
.r13-signup__progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--var-8);
    padding: var(--var-8);
    border-radius: 999px;
    background: var(--color-1st-bg);
    flex-shrink: 0;
}

.r13-signup__progress-slot {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: var(--color-stroke);
    flex-shrink: 0;
    transition:
        height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.5s ease;
}

.r13-signup__progress-slot.is-active {
    height: 40px;
    background: var(--color-1st-fg);
}

.r13-signup__text {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: var(--var-16);
}

.r13-signup__title {
    font-weight: 600;
    font-size: var(--fs-h5); /* Figma heading-5 = 25px (variable h5) */
    line-height: 1.15;
    color: var(--color-1st-fg);
    font-family: var(--font-body);
}

.r13-signup__desc {
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-1st-fg); /* Figma: description dùng 1st-fg #050505 */
}

.r13-signup__mockup-box {
    width: 600px;
    flex-shrink: 0;
}

/* Mockup 600×450 — cả 3 slide đều là ảnh phẳng @2x */
.r13-signup__mockup {
    width: 600px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-3rd-bg);
}

.r13-signup__mockup img {
    display: block;
    width: 100%;
    height: auto;
}

/* Reduced motion: bỏ sticky, hiện đủ 3 text, rail đứng yên ở trạng thái active.
   sticky-scrub.js chỉ tự set [data-reduced-motion] khi có module Migrator.reducedMotion
   (page Switch enqueue riêng) — trang này không nạp module đó nên chặn bằng media query. */
@media (prefers-reduced-motion: reduce) {

    .r13-signup__scrub-left {
        padding-block: 0;
    }

    .r13-signup__scrub-sticky {
        position: static;
        transform: none;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--section-gap);
    }

    .r13-signup__text-stack {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
    }

    .r13-signup__text-stack > .r13-signup__text {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }

    .r13-signup__progress-slot {
        transition: none;
    }
}

/* ==========================================================================
   Section 5 — ..with brand in every touchpoint (Figma 4003:5996)
   Layout lồng: item1 (flex-1) | group(item2 + item3) (flex-1); media dùng aspect-ratio
   ========================================================================== */

.r13-touchpoint__grid {
    display: flex;
    align-items: flex-start;
    gap: var(--var-40);
    width: 100%;
}

.r13-touchpoint__group {
    display: flex;
    align-items: flex-start;
    gap: var(--var-40);
    flex: 1 0 0;
    min-width: 1px;
}

.r13-touchpoint__item {
    display: flex;
    flex-direction: column;
    gap: var(--var-40);
    flex: 1 0 0;
    min-width: 1px;
}

/* Media = ảnh phẳng bo góc 12; portal aspect 695/440, item còn lại 312.5/299 */
.r13-touchpoint__media {
    width: 100%;
    aspect-ratio: 312.5 / 299;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-3rd-bg);
}

.r13-touchpoint__media--portal {
    aspect-ratio: 695 / 440;
}

.r13-touchpoint__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r13-touchpoint__text {
    display: flex;
    flex-direction: column;
    gap: var(--var-16);
}

.r13-touchpoint__title {
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: 1.15;
    color: var(--color-1st-fg);
    font-family: var(--font-body);
}

.r13-touchpoint__desc {
    max-width: 600px; /* Figma section-headings/description max-w 600 → desc item1 wrap 2 dòng */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* ==========================================================================
   Section 6 — CTA: Get your program off the ground (Figma 10384:20836)
   ========================================================================== */

.r13-cta {
    padding: var(--var-140) 20px var(--var-80);
    border-top: 1px solid var(--color-stroke); /* Figma: Line 3 tại đỉnh footer+cta */
}

.r13-headings__title-group--gap16 {
    gap: var(--var-16);
}

/* ==========================================================================
   Tablet + Mobile (<= 1024px) — 2 breakpoint rule
   ========================================================================== */

@media (max-width: 1024px) {
    /* Typography/spacing ≤1024 (Figma 4003:60xx/61xx) đã khớp override sẵn của
       global.css (--fs-h1 32, --fs-h2 28, --fs-h5 20, --fs-label-lg 14,
       --fs-label-md 12, --section-gap 40, --section-horizontal-padding 20)
       nên không khai báo lại ở đây. */

    /* Nhịp dọc ≤1024: các section body bỏ padding-top, chỉ giữ 72px dưới;
       testimonial ngược lại (72px trên, 0 dưới) để không cộng dồn với section kế. */
    .r13-ai,
    .r13-control,
    .r13-signup,
    .r13-touchpoint {
        padding-block: 0 var(--var-72);
    }

    /* Hero ≤1024: đổi graphic full-bleed → image 38 contained (aspect 2547/1587) */
    .r13-hero__media {
        display: none;
    }

    .r13-hero__media-mobile {
        display: block;
        width: 100%;
    }

    .r13-hero__media-mobile img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Section 2 — graphic là ảnh nên tự scale theo bề rộng, không cần override; feature xếp dọc */
    .r13-features {
        flex-direction: column;
        gap: var(--var-32);
    }

    /* Section 3 — rows xếp dọc */
    .r13-control__row {
        flex-wrap: wrap;
        gap: var(--var-16);
        padding: var(--var-24) 0;
    }

    .r13-control__title {
        flex: 1 0 calc(100% - 48px);
    }

    .r13-control__desc {
        flex: 1 0 100%;
    }

    /* Section 4 — signup ≤1024: tắt sticky-scrub, về 3 item xếp dọc tĩnh
       (mockup trên, text dưới), ẩn progress (Figma 6087/6157).
       display:contents làm 3 text + 3 mockup thành con trực tiếp của .r13-signup__scrub,
       nhờ đó `order` xen kẽ được chúng thành 1 cột: mockup i = 2i+1, text i = 2i+2.
       --i do PHP in ra trên từng phần tử nên số slide đổi vẫn đúng. */
    .r13-signup__scrub {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
    }

    .r13-signup__scrub-left,
    .r13-signup__scrub-sticky,
    .r13-signup__text-stack,
    .r13-signup__scrub-right {
        display: contents;
    }

    .r13-signup__mockup-box {
        order: calc(var(--i) * 2 + 1);
        width: 100%;
    }

    .r13-signup__text-stack > .r13-signup__text {
        order: calc(var(--i) * 2 + 2);
        width: 100%;
        /* huỷ trạng thái chỉ-hiện-slide-active của desktop */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
        /* mockup ở trên, text ngay dưới → khoảng cách 40 thay vì --section-gap */
        margin-top: calc(var(--var-40) - var(--section-gap));
    }

    .r13-signup__progress {
        display: none;
    }

    /* ≤1024: mockup là ảnh nên co theo bề rộng box, không cần JS scale */
    .r13-signup__mockup {
        width: 100%;
    }

    /* Section 5 — touchpoint items xếp dọc (item1 + group cùng 1 cột) */
    .r13-touchpoint__grid,
    .r13-touchpoint__group {
        flex-direction: column;
        gap: var(--var-40);
    }

    .r13-touchpoint__item,
    .r13-touchpoint__group {
        width: 100%;
        flex: none;
    }
}