/* Lush Fiction — How It Works — concept matched desktop composition */
body.marketing.how-page {
    background: #0b0707;
    color: #f8ebe6
}

.how-page .m-shell {
    max-width: none;
    overflow: hidden
}

.how-page .how-wrap {
    width: min(calc(100% - 96px), 1440px);
    margin: 0 auto
}

/* HERO — matched to Create page geometry */
.how-page .how-hero {
    position: relative;
    height: auto;
    min-height: 520px;
    display: flex;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    background: #0b0707;
}

.how-page .how-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    right: max(32px, calc((100% - 1480px)/2));
    background: url('/images/how_it_works_background_hero.jpeg') right center/auto 100% no-repeat;
    transform: scale(.90);
    transform-origin: top right;
    pointer-events: none;
}

.how-page .how-hero:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg,
        #090505 0%,
        #090505 27%,
        rgba(9,5,5,.94) 35%,
        rgba(9,5,5,.62) 44%,
        rgba(9,5,5,.20) 53%,
        transparent 62%);
    pointer-events: none;
}

.how-page .how-hero-copy {
    position: relative;
    z-index: 2;
    width: 720px;
    padding: 165px 0 70px;
}

.how-page .kicker {
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: #e9a39b;
    margin-bottom: 18px;
}

.how-page .how-hero h1 {
    font: 400 60px/1.02 'Libre Baskerville', Georgia, serif;
    letter-spacing: -2.2px;
    margin: 18px 0 30px;
    color: #fff1ec;
}

.how-page .how-hero h1 em, .how-page .closing h2 em {
    font-weight: 500;
    color: #f4aaa0;
}

.how-page .how-hero h1 em {
    font-style: normal;
}

.how-page .how-hero p {
    max-width: 510px;
    font-size: 16px;
    line-height: 1.55;
    color: #ddceca;
    margin: 0 0 22px;
}

.how-page .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 34px;     /* was 12px 20px */
    border-radius: 28px;     /* was 10px */
    background: #f2a09a;
    color: #160c0b;
    text-decoration: none;
    font-size: 16px;         /* was 13px */
    font-weight: 700;
}

.how-page .trust-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 22px;
    color: #d9aaa3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.how-page .process {
    position: relative;
    z-index: 2;
    padding: 38px 0 38px;
    margin-top: -70px;
    background: linear-gradient(#0b0707, #100909);
}

.how-page .process-card {
    position: relative;
    display: grid;
    height: 340px;
    min-height: 340px;
    border: 1px solid rgba(236, 159, 149, .22);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 38px;

    background: #130b0b;
    box-shadow: none
}

.how-page .process-card:last-child {
    margin-bottom: 0
}

.how-page .process-copy {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
    background: transparent
}

.how-page .step-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 13px
}

.how-page .step-no {
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 1;
    color: #f2a09a
}

.how-page .step-line {
    height: 1px;
    width: 72px;
    background: #d98d85
}

.how-page .step-label {
    font-size: 10px;
    letter-spacing: .30em;
    color: #e8a49c;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px
}

.how-page .process-copy h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.03;
    letter-spacing: -.025em;
    margin: 0 0 16px;
    color: #fff0eb
}

.how-page .process-copy p {
    font-size: 14px;
    line-height: 1.58;
    color: #d6c5c1;
    margin: 0;
    max-width: 390px
}

/* STEP 1 — concept proportions: copy / narrow portrait / compact UI cards */
.how-page .step-one {
    grid-template-columns: 36% 64%;
    height: 350px
}

.how-page .step-one .process-copy {
    background: linear-gradient(90deg, #211111 0%, #180d0d 86%, rgba(24, 13, 13, .90) 100%)
}

.how-page .step-one-visual {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 34.375% 65.625%;
    background: #120a0a
}

.how-page .step-one-photo {
    min-height: 350px;
   background: url('/images/section_1.png') 51% 0%/cover no-repeat
}

.how-page .character-stack {
    padding: 14px 26px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(90deg, rgba(15, 8, 8, .35), #120a0a 22%)
}

.how-page .character-card {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid rgba(239, 161, 151, .24);
    border-radius: 13px;
    overflow: hidden;
    background: rgba(12, 7, 7, .72);
    box-shadow: none
}

.how-page .character-card:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 76px;
    border-radius: 9px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.how-page .character-one:before {
    background-image: url('/images/characterOne.jpeg')
}

.how-page .character-two:before {
    background-image: url('/images/characterTwo.jpeg')
}

.how-page .character-card:after {
    content: none
}

.how-page .character-card-copy {
    position: absolute;
    z-index: 2;
    left: 108px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.how-page .character-card-copy span {
    font-size: 9px;
    letter-spacing: .24em;
    color: #efa39b;
    font-weight: 700
}

.how-page .character-card-copy strong {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 400;
    color: #fff0eb
}

.how-page .character-card-copy small {
    font-size: 11px;
    line-height: 1.38;
    color: #d4c1bd
}

/* STEP 2 — one continuous background composition fading into copy */
.how-page .step-two {
    grid-template-columns: 58% 42%;
    background-color: #140b0b;
    background-image: linear-gradient(90deg, rgba(18, 10, 10, 0) 0%, rgba(18, 10, 10, 0) 42%, rgba(18, 10, 10, .34) 54%, #180d0d 67%, #180d0d 100%), url('/images/section2.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%, 64% auto
}

.how-page .step-two-art {
    min-height: 340px;
    height: 100%;
    background: url('/images/section2.png') center center/cover no-repeat;
}

.how-page .step-two .process-copy {
    background: #180d0d;
    padding-left: 54px
}

/* STEP 3 — same seamless treatment, image anchored right */
.how-page .step-three {
    grid-template-columns: 36% 64%;
    background-color: #140b0b;
    background-image: linear-gradient(90deg, #180d0d 0%, #180d0d 31%, rgba(24, 13, 13, .76) 40%, rgba(18, 10, 10, .18) 52%, rgba(18, 10, 10, 0) 66%), url('/images/section3.jpeg');
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: 100% 100%, auto 100%
}

.how-page .step-three-art {
    min-height: 340px;
    height: 100%;
    background: none
}

.how-page .step-three .process-copy {
   background: linear-gradient(90deg, #180d0d 0%, #180d0d 72%, rgba(24,13,13,.88) 84%, rgba(24,13,13,.45) 94%, transparent 100%);
    padding: 38px 28px 38px 40px
}

.how-page .step-three .step-no {
  font-size: 44px
}

.how-page .step-three .step-label {
    font-size: 10px
}

.how-page .step-three .process-copy h2 {
    font-size: 40px;
    line-height: 1.02;
    margin-bottom: 18px
}

.how-page .step-three .process-copy p {
    font-size: 13.5px;
    line-height: 1.62;
    max-width: 390px
}

/* CLOSING — same width as process, text in clean upper space, books below */
.how-page .closing {
    position: relative;
    height: 800px;
    margin-top: 0;
    margin-bottom: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(236, 159, 149, .22);
    border-radius: 16px;
    background-color: #050303;
    background-image: url('/images/bottom_section.png');
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden
}

.how-page .closing:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
            #050303 0%,
            #050303 20%,
            rgba(5, 3, 3, .98) 27%,
            rgba(5, 3, 3, .82) 34%,
            rgba(5, 3, 3, .45) 41%,
            rgba(5, 3, 3, .12) 47%,
            rgba(5, 3, 3, 0) 48%);
    pointer-events: none
}

.how-page .closing-copy {
    position: relative;
    z-index: 2;
    padding: 48px 24px 0;
    max-width: 760px
}

.how-page .closing .kicker {
    margin-bottom: 10px
}

.how-page .closing h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 43px;
    line-height: .98;
    letter-spacing: -.03em;
    margin: 0 0 10px;
    color: #fff1ec
}

.how-page .closing p {
    font-size: 12px;
    color: #ead9d4;
    margin: 0 0 16px
}

.how-page .closing .hero-cta {
    padding: 11px 20px
}

@media(min-width:1500px) {
    .how-page .how-hero {
        min-height: 520px;
    }

    .how-page .how-hero-copy {
        padding-top: 165px;
        padding-bottom: 88px;
    }
}

@media(max-width:1100px) {
    .how-page .how-wrap {
        width: calc(100% - 40px)
    }

    .how-page .process-copy {
        padding: 32px 30px
    }

    .how-page .step-one-visual {
        grid-template-columns: 40% 60%
    }

    .how-page .character-card-copy small {
        display: none
    }

    .how-page .step-two .process-copy {
        padding-left: 36px
    }
}

@media(max-width:850px) {
    .how-page .how-wrap {
        width: calc(100% - 28px)
    }

    .how-page .how-hero {
        height: auto;
        min-height: 620px;
    }

    .how-page .how-hero::after {
        left: 32%;
        right: 18px;
        transform: none;
        background-size: auto 100%;
        background-position: right center;
    }

    .how-page .how-hero:before {
        background: linear-gradient(90deg, rgba(8, 5, 5, .98), rgba(8, 5, 5, .80) 68%, rgba(8, 5, 5, .40))
    }

    .how-page .how-hero-copy {
        width: 76%
    }

    .how-page .process-card, .how-page .step-one, .how-page .step-two, .how-page .step-three {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr
    }

    .how-page .step-one-visual {
        grid-template-columns: 42% 58%;
        min-height: 420px
    }

    .how-page .step-one-photo {
        min-height: 420px
    }

    .how-page .step-two, .how-page .step-three {
        background-image: none
    }

    .how-page .step-two-art {
        min-height: 360px;
        background: url('/images/section2.png') center/cover no-repeat
    }

    .how-page .step-three-art {
        min-height: 360px;
        background: url('/images/section3.png') center/cover no-repeat
    }

    .how-page .step-two .process-copy {
        order: -1;
        background: #180d0d;
        padding-left: 30px
    }

    .how-page .step-three .process-copy {
        background: #180d0d
    }

    .how-page .closing {
        height: 520px;
        margin-bottom: 28px;
        background-size: auto 78%;
        background-position: center bottom
    }
}

@media(max-width:600px) {
    .how-page .how-wrap {
        width: calc(100% - 20px)
    }

    .how-page .how-hero {
        margin-top: 0;
        min-height: 640px;
        padding-top: 0;
    }

    .how-page .how-hero::after {
        left: 20%;
        right: 12px;
    }

    .how-page .how-hero-copy {
        width: 100%
    }

    .how-page .how-hero h1 {
        font-size: 46px
    }

    .how-page .step-one-visual {
        grid-template-columns: 1fr
    }

    .how-page .step-one-photo {
        min-height: 330px
    }

    .how-page .character-stack {
        padding: 16px
    }

    .how-page .character-card {
        min-height: 118px
    }

    .how-page .closing {
        height: 470px;
        margin-bottom: 22px;
        background-size: auto 76%;
        background-position: center bottom
    }

    .how-page .closing h2 {
        font-size: 36px
    }
}