/* ==========================================================================
   Pardot section 05: landscape cover variant
   --------------------------------------------------------------------------
   Opt-in modifier:
     <section class="pardot-landing-section-05-wrap pl-sect05-landscape">

   Load it AFTER pardot-landing-01.css. Every rule is scoped under the
   modifier, so a section 05 without the class renders exactly as before.

   The base section is built around a portrait book cover (444px at 1920)
   centred beside the copy. This variant carries:
     - a landscape cover (713 x 370 at 1920), top-aligned with the heading,
       that fills its column at every tier;
     - a benefits block (sub-heading + orange-dot list) under the copy;
     - its own placement for the cube line-art decoration;
     - Figma's spacing above and below the section.

   Figma: i2c Website Responsive > CB-3618 Generative AI Playbook Lander
     1920 9030:45292 | 1366 9030:54861 | 1024 9030:56756
     768 9030:58083  | 375 9030:59596

   Merging into pardot-landing-01.css later: each block below belongs after
   that file's section 05 rules for the same tier.
   ========================================================================== */

/* --- Section spacing ------------------------------------------------------- */
/* The section box keeps the base file's padding at 1920 (120px 149px) and
   1366 (80px 104px). Figma puts the same space below the content as above it
   (120 / 80 / 60 / 60 / 40px), so the brands section's 64px top margin would
   stack on top of it. */
.pl-sect05-landscape + .pardot-landing-section-06-wrap.leading-brands-section {
    margin-top: 0;
}

/* --- Row ------------------------------------------------------------------- */
.pl-sect05-landscape .pl-sect05-row {
    align-items: flex-start; /* Figma: the cover's top = the heading's top at every tier */
}

/* Two equal columns: (row - gap) / 2 = 715 / 492 / 373 / 348px, Figma's
   column width at 1920 / 1366 / 1024 / 768. This replaces the base file's
   max-width calc(50% - 16px / 12px), its <=1199 min-width and its <=991
   64% / 39.38% split, which were all sized for the portrait cover. Three
   classes outrank its `.pl-sect05-row>div.pl-sect05-left` (0,2,1). */
.pl-sect05-landscape .pl-sect05-row > .pl-sect05-left,
.pl-sect05-landscape .pl-sect05-row > .pl-sect05-right {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

/* --- Text column ----------------------------------------------------------- */
.pl-sect05-landscape .pl-sect05-left {
    padding-right: 0; /* Figma: the column is the full 715px; the copy is capped on .text-xl instead */
}

.pl-sect05-landscape .pl-sect05-left h2 {
    padding-right: 0;
    line-height: var(--lineheightH2);       /* cancels the base file's 1.1: Figma 56 / 52 / 34px is the .h2 token per tier */
    letter-spacing: var(--letterSpacingH2); /* cancels its <=1199 -1.49px: Figma -2 / -1px is the token */
}

/* Copy + benefits. Figma spaces them 32px at 1920 and 24px from 1366 down,
   while the column itself keeps 32px around the heading and the button at
   1366 (the base file's .pl-sect05-left gap: 32px, then 24px at <=1199). */
.pl-sect05-landscape .pl-sect05-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 2rem; /* 32px */
}

/* The two paragraphs. */
.pl-sect05-landscape .pl-sect05-content > .text-xl {
    max-width: 41.375rem; /* 662px: Figma's copy box at 1920 (column 715px); every narrower column is already below it */
    gap: 1.75rem;         /* 28px: Figma's blank line between the paragraphs, one 28px line */
    letter-spacing: var(--letterSpacingTextExtraLarge); /* cancels the base file's <=1600 -0.66px */
}

.pl-sect05-landscape .pl-sect05-benefits {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px: sub-heading to list */
}

.pl-sect05-landscape .pl-sect05-benefits > .pl-sect05-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px between items */
    margin: 0;
    padding: 0;
    list-style: none;
    letter-spacing: var(--letterSpacingTextExtraLarge); /* the base file's .pl-sect05-left .text-xl override reaches this list too */
}

.pl-sect05-landscape .pl-sect05-list li {
    position: relative;
    min-height: 1.625rem;  /* 26px: Figma's 8 x 26 dot frame sets the row height when the text is one 24px line (1366) */
    padding-left: 1.25rem; /* 20px: 8px dot + 12px gap */
}

/* Orange dot: decorative, so it sits outside the text flow. Figma draws it
   8px wide and 9px below the line's top at every tier. */
.pl-sect05-landscape .pl-sect05-list li::before {
    content: '';
    position: absolute;
    top: 0.5625rem; /* 9px */
    left: 0;
    width: 0.5rem;  /* 8px */
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--orange);
}

/* --- Cover ----------------------------------------------------------------- */
.pl-sect05-landscape .pl-sect05-right {
    justify-content: flex-start; /* Figma: the cover starts at the column's left edge (x 976 at 1920) */
}

.pl-sect05-landscape .pl-sect05-right img {
    width: 44.5625rem; /* 713px at 1920 (column 715 px); the base file's max-width: 100% makes it the column width below that */
    height: auto;
    margin: 0;
    /* 24px on the 713 x 370 cover, scaling with it the way Figma scales it:
       16.56 / 12.56 / 11.71 / 11.01px at 1366 / 1024 / 768 / 375. */
    border-radius: 24px;
    /* Figma 1920: -5.72 8.58 28.59 0 and 0 61.47 40.03 -22.87 */
    box-shadow: -0.3574rem 0.5361rem 1.787rem 0 rgba(63, 113, 255, 0.2), 0 3.8419rem 2.5017rem -1.4296rem rgba(20, 52, 203, 0.15);
}

/* --- Cube line-art --------------------------------------------------------- */
/* Above 1600 the <picture> keeps the base file's faded crop
   (book-cover-lottie.webp, 747px). Figma 1920 puts its top-left 245px right
   of and 243px below the cover's top-left. */
.pl-sect05-landscape .pl-sect05-lottie {
    top: 22.6875rem;   /* 363px = 120 padding + 243 */
    right: -8rem;      /* -128px: left edge 619px in from the box's right edge (x 1221 at 1920) */
    bottom: auto;
    width: 46.6875rem; /* 747px, the asset's natural width */
}

/* ==========================================================================
   <= 1600 (Figma 1366)
   ========================================================================== */
@media screen and (max-width: 1600px) {
    .pl-sect05-landscape .pl-sect05-row {
        gap: 2rem; /* 32px: Figma 1366 is 492 + 32 + 492 (the base file drops to 24px here) */
    }

    .pl-sect05-landscape .pl-sect05-content,
    .pl-sect05-landscape .pl-sect05-benefits {
        gap: 1.5rem; /* 24px */
    }

    .pl-sect05-landscape .pl-sect05-content > .text-xl {
        gap: 1.5rem; /* 24px: one 24px line */
    }

    .pl-sect05-landscape .pl-sect05-benefits > .pl-sect05-list {
        gap: 1rem; /* 16px */
    }

    .pl-sect05-landscape .pl-sect05-right img {
        /* Figma 1366: -3.95 5.92 19.73 0 and 0 42.42 27.62 -15.78 */
        box-shadow: -0.2466rem 0.3699rem 1.2331rem 0 rgba(63, 113, 255, 0.2), 0 2.6511rem 1.7263rem -0.9865rem rgba(20, 52, 203, 0.15);
    }

    /* From 1366 down Figma shows the whole grid without the white fades
       (book-cover-lottie-landscape.webp, 699 x 804, the grid at 1920 scale)
       and clips it at the content's bottom edge. */
    .pl-sect05-landscape .pl-sect05-lottie {
        top: 13.9569rem;   /* 223.31px = 80 padding + 143.31 */
        right: -7.1513rem; /* -114.42px */
        bottom: 5rem;      /* 80px: the clip line, with overflow hidden */
        width: 29.5206rem; /* 472.33px = 699px at Figma's 0.6757 scale */
        overflow: hidden;
    }
    .pl-sect05-landscape .pl-sect05-right img {
        border-radius: 16px;
    }
}

/* ==========================================================================
   <= 1199 (Figma 1024)
   ========================================================================== */
@media screen and (max-width: 1199px) {
    .pl-sect05-landscape .pardot-landing-section-05 {
        padding-inline: 4.9375rem; /* 79px: Figma 1024 is 79 + 373 + 24 + 373 + 79 (the base file has 80px) */
    }

    .pl-sect05-landscape .pl-sect05-row {
        gap: 1.5rem; /* 24px */
    }

    .pl-sect05-landscape .pl-sect05-content > .text-xl {
        gap: 1.25rem; /* 20px: one 20px line */
    }

    .pl-sect05-landscape .pl-sect05-right img {
        /* Figma 1024: -2.99 4.49 14.96 0 and 0 32.16 20.94 -11.97 */
        box-shadow: -0.187rem 0.2804rem 0.9348rem 0 rgba(63, 113, 255, 0.2), 0 2.0099rem 1.3088rem -0.7479rem rgba(20, 52, 203, 0.15);
    }

    .pl-sect05-landscape .pl-sect05-lottie {
        top: 10.025rem;    /* 160.4px = 60 padding + 100.4 */
        right: -9.6456rem; /* -154.33px */
        bottom: auto;      /* Figma 1024 does not clip it */
        overflow: visible;
    }
}

/* ==========================================================================
   <= 991 (Figma 768)
   ========================================================================== */
@media screen and (max-width: 991px) {
    .pl-sect05-landscape .pardot-landing-section-05 {
        padding: 3.75rem 0; /* 60px 0: Figma 768 runs the row across the full 720px container */
    }

    .pl-sect05-landscape .pl-sect05-row {
        max-width: none; /* the base file caps it at 596px for the portrait cover */
    }

    .pl-sect05-landscape .pl-sect05-right img {
        /* Figma 768: -2.79 4.19 13.95 0 and 0 30 19.54 -11.16 */
        box-shadow: -0.1744rem 0.2616rem 0.8722rem 0 rgba(63, 113, 255, 0.2), 0 1.8752rem 1.221rem -0.6977rem rgba(20, 52, 203, 0.15);
    }

    .pl-sect05-landscape .pl-sect05-lottie {
        top: 13.3338rem;  /* 213.34px = 60 padding + 153.34 */
        right: -2.215rem; /* -35.44px */
        width: 21.59rem;  /* 345.44px = 699px at Figma's 0.4942 scale */
    }
}

/* ==========================================================================
   <= 767 (Figma 375)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .pl-sect05-landscape .pardot-landing-section-05 {
        padding: 2.5rem 0; /* 40px 0 */
    }

    .pl-sect05-landscape .pl-sect05-row {
        gap: 3rem; /* 48px copy to cover; the base file's value, restated because the <=1199 rule above outranks it */
    }

    /* Stacked: each column takes the full width and its own content height. */
    .pl-sect05-landscape .pl-sect05-row > .pl-sect05-left,
    .pl-sect05-landscape .pl-sect05-row > .pl-sect05-right {
        flex: none;
        width: 100%;
    }

    .pl-sect05-landscape .pl-sect05-right img {
        /* Figma 375: -2.62 3.93 13.11 0 and 0 28.19 18.36 -10.49 */
        box-shadow: -0.1639rem 0.2459rem 0.8195rem 0 rgba(63, 113, 255, 0.2), 0 1.762rem 1.1474rem -0.6556rem rgba(20, 52, 203, 0.15);
    }

    /* Figma 375 moves the accent lines below the grid
       (book-cover-lottie-landscape-sm.webp, 440 x 1000 at 1920 scale, holds
       only the part that is on screen). Anchored to the bottom, so it stays
       with the cover at the end of the stack whatever the copy's height. */
    .pl-sect05-landscape .pl-sect05-lottie {
        top: auto;
        bottom: -1.6275rem; /* -26.04px */
        right: -2.1581rem;  /* -34.53px */
        width: 11.7044rem;  /* 187.27px = 440px at Figma's 0.4256 scale */
    }
}

/* =============== */
.plhero-row-top-right-text{
    padding-bottom: 24px;
}
.cta-band .container-sm {
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.cta-band .section-title{
    margin-bottom: 28px;
}
.pl-sect07-info-left {
    max-width: 138px;
    height: auto;
}
.contact-form-sec .thankyou-text {
    display: none;
}
.contact-form-sec .thankyou-text + p.errors,
.contact-form-sec form.form p.errors {
    display: none;
}
.cta-band-lottie .cta-lottie-holder {
    transform: scale(1.2);
}
@media screen and (max-width: 1600px) {
    .cta-band .section-title{
        margin-bottom: 0;
    }
    .pl-sect07-info-left {
        max-width: 98px;
    }
    .cta-band-lottie .cta-lottie-holder {
        transform: scale(1.4);
    }
}
@media screen and (max-width: 991px) {
    .cta-band .container-sm {
        gap: 24px;
    }
    .pl-sect07-info-left {
        max-width: 72px;
    }
}
@media screen and (max-width: 767px) {
    .cta-band .container-sm {
        gap: 32px;
    } 
    .pl-sect07-info-left {
        max-width: 98px;
    }
    .pl-sect05-benefits .h5{
        font-size: 24px;
    }
}