/* =========================================
   ELAH.FM CREATE
========================================= */

.create-page {
    color: #f3edf5;
}

.create-shell {
    width: min(
        1220px,
        calc(100% - 64px)
    );
    margin: 0 auto;
}


/* =========================================
   HERO
========================================= */

.create-hero {
    padding:
        125px
        0
        105px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.create-hero h1 {
    margin:
        18px
        0
        28px;
    max-width: 950px;
    font-size:
        clamp(
            68px,
            8vw,
            112px
        );
    line-height: 0.93;
    letter-spacing: -0.06em;
    font-weight: 450;
}

.create-hero h1 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #e746bb,
            #a45fcd
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.create-hero-copy {
    max-width: 760px;
    color: #95889a;
    font-size: 19px;
    line-height: 1.75;
}

.create-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 38px;
}

.create-hero-meta span {
    padding:
        10px
        15px;
    border:
        1px solid
        rgba(255, 255, 255, 0.07);
    border-radius: 100px;
    color: #837687;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* =========================================
   GOALS
========================================= */

.goal-section {
    padding:
        110px
        0
        125px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.goal-heading {
    max-width: 850px;
    margin-bottom: 58px;
}

.goal-heading h2,
.process-heading h2,
.repeat-section h2 {
    margin:
        15px
        0
        24px;
    color: #eee6f0;
    font-size:
        clamp(
            43px,
            5vw,
            68px
        );
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 450;
}

.goal-heading h2 span,
.process-heading h2 span,
.repeat-section h2 span {
    display: block;
    color: #c56cb6;
}

.goal-heading > p:not(.eyebrow) {
    color: #877a8b;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================
   GOAL CARDS
========================================= */

.goal-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.goal-card {
    position: relative;
    min-height: 195px;
    padding:
        25px
        24px;
    border:
        1px solid
        rgba(255, 255, 255, 0.065);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            rgba(212, 51, 166, 0.018)
        );
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.goal-card:hover {
    transform: translateY(-3px);
    border-color:
        rgba(220, 79, 180, 0.20);
}

.goal-card.active {
    border-color:
        rgba(226, 69, 180, 0.42);
    background:
        linear-gradient(
            145deg,
            rgba(225, 61, 179, 0.09),
            rgba(141, 76, 195, 0.04)
        );
    box-shadow:
        0 18px 55px
        rgba(137, 41, 126, 0.08);
}

.goal-number {
    display: block;
    margin-bottom: 42px;
    color: #6e526d;
    font-size: 9px;
    letter-spacing: 0.15em;
}

.goal-card.active .goal-number {
    color: #c46aae;
}

.goal-title {
    display: block;
    margin-bottom: 9px;
    color: #ded5e1;
    font-size: 18px;
    font-weight: 500;
}

.goal-short {
    display: block;
    color: #716575;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================
   SELECTED OFFER
========================================= */

.selection-section {
    padding:
        125px
        0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.selection-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        430px;
    gap: 90px;
    align-items: center;
}

.selection-copy h2 {
    margin:
        15px
        0
        25px;
    color: #ede5ef;
    font-size:
        clamp(
            50px,
            5vw,
            74px
        );
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 450;
}

.selection-description {
    max-width: 660px;
    color: #97899a;
    font-size: 18px;
    line-height: 1.8;
}

.selection-message {
    max-width: 620px;
    margin-top: 50px;
    padding:
        27px
        0
        0;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.selection-message p {
    margin:
        0
        0
        9px;
    color: #d4cad6;
    font-size: 20px;
    line-height: 1.55;
}

.selection-message span {
    color: #716675;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   OFFER CARD
========================================= */

.offer-card {
    padding:
        37px
        35px;
    border:
        1px solid
        rgba(230, 68, 184, 0.20);
    border-radius: 22px;
    background:
        linear-gradient(
            150deg,
            rgba(224, 58, 177, 0.08),
            rgba(91, 53, 116, 0.04)
        );
    box-shadow:
        0 30px 90px
        rgba(81, 25, 78, 0.10);
}

.offer-eyebrow {
    margin-bottom: 25px;
    color: #9b7198;
    font-size: 9px;
    letter-spacing: 0.16em;
}

.offer-price {
    color: #f0e8f2;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.offer-price-note {
    margin:
        7px
        0
        30px;
    color: #6d6271;
    font-size: 11px;
}

.offer-list {
    padding:
        23px
        0;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.065);
}

.offer-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding:
        9px
        0;
    color: #918494;
    font-size: 13px;
    line-height: 1.55;
}

.offer-number {
    flex: 0 0 25px;
    color: #d26bbc;
    font-size: 14px;
    font-weight: 600;
}

.offer-mark {
    flex:
        0
        0
        6px;
    width: 6px;
    height: 6px;
    margin:
        7px
        9px
        0
        2px;
    border-radius: 50%;
    background: #bf5cac;
}

.purchase-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 55px;
    margin-top: 28px;
    border:
        1px solid
        rgba(240, 71, 192, 0.36);
    border-radius: 100px;
    background:
        linear-gradient(
            135deg,
            #df3eaf,
            #9150c6
        );
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.purchase-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 45px
        rgba(217, 54, 169, 0.20);
}

.offer-fine-print {
    margin:
        18px
        0
        0;
    color: #63586a;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}


/* =========================================
   PROCESS
========================================= */

.create-process {
    padding:
        120px
        0
        130px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.process-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.process-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.process-step {
    min-height: 270px;
    padding:
        27px
        23px;
    border:
        1px solid
        rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background:
        rgba(255, 255, 255, 0.012);
}

.process-step > span {
    display: block;
    margin-bottom: 65px;
    color: #775875;
    font-size: 9px;
    letter-spacing: 0.15em;
}

.process-step h3 {
    margin-bottom: 12px;
    color: #d9cfdc;
    font-size: 17px;
    font-weight: 500;
}

.process-step p {
    margin: 0;
    color: #776b7a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   REPETITION
========================================= */

.repeat-section {
    padding:
        140px
        0
        150px;
    text-align: center;
}

.repeat-section h2 {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.repeat-section > .create-shell > p:not(.eyebrow) {
    max-width: 730px;
    margin:
        30px
        auto
        0;
    color: #918496;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .goal-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .selection-panel {
        grid-template-columns:
            minmax(0, 1fr)
            390px;
        gap: 55px;
    }

    .process-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

    .create-shell {
        width:
            calc(100% - 30px);
    }

    .create-hero {
        padding:
            85px
            0
            75px;
    }

    .create-hero h1 {
        font-size: 58px;
    }

    .create-hero-copy {
        font-size: 16px;
    }

    .create-hero-meta {
        gap: 7px;
    }

    .create-hero-meta span {
        font-size: 8px;
    }

    .goal-section {
        padding:
            80px
            0
            90px;
    }

    .goal-heading h2,
    .process-heading h2,
    .repeat-section h2 {
        font-size: 42px;
    }

    .goal-grid {
        grid-template-columns: 1fr;
    }

    .goal-card {
        min-height: auto;
    }

    .goal-number {
        margin-bottom: 30px;
    }

    .selection-section {
        padding:
            85px
            0;
    }

    .selection-panel {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .selection-copy h2 {
        font-size: 52px;
    }

    .selection-description {
        font-size: 16px;
    }

    .offer-card {
        padding:
            31px
            23px;
    }

    .create-process {
        padding:
            85px
            0
            95px;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-step {
        min-height: auto;
    }

    .process-step > span {
        margin-bottom: 38px;
    }

    .repeat-section {
        padding:
            100px
            0
            115px;
    }

}
/* =========================================
   CREATE PAGE WAITLIST
========================================= */

.create-waitlist {
    margin-top: 28px;
    padding-top: 28px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.create-waitlist-status {
    margin:
        0
        0
        24px;
    color: #cfc3d2;
    font-size: 14px;
    line-height: 1.55;
}

.create-waitlist h3 {
    margin:
        0
        0
        10px;
    color: #eee6f0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.create-waitlist-copy {
    margin:
        0
        0
        22px;
    color: #887b8c;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   WAITLIST FORM
========================================= */

.create-waitlist-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.create-waitlist-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding:
        0
        17px;
    border:
        1px solid
        rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    outline: none;
    background:
        rgba(255, 255, 255, 0.025);
    color: #eee6f0;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.create-waitlist-form input::placeholder {
    color: #655a69;
}

.create-waitlist-form input:focus {
    border-color:
        rgba(225, 68, 180, 0.42);
    background:
        rgba(220, 54, 173, 0.035);
    box-shadow:
        0 0 0 3px
        rgba(220, 54, 173, 0.04);
}


/* =========================================
   WAITLIST BUTTON
========================================= */

.create-waitlist-form .purchase-button {
    width: 100%;
    min-height: 54px;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}


/* =========================================
   PRIVACY NOTE
========================================= */

.create-waitlist .offer-fine-print {
    max-width: 330px;
    margin:
        20px
        auto
        0;
    color: #655a69;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}


/* =========================================
   HONEYPOT
========================================= */

.waitlist-honeypot {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

    .create-waitlist {
        margin-top: 25px;
        padding-top: 25px;
    }

    .create-waitlist h3 {
        font-size: 21px;
    }

    .create-waitlist-form input {
        min-height: 52px;
    }

}
/* =========================================
   YOUR SOUND
========================================= */

.sound-section {
    padding:
        115px
        0
        125px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.sound-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: 90px;
    align-items: start;
}

.sound-layout h2 {
    margin:
        15px
        0
        0;
    color: #eee6f0;
    font-size:
        clamp(
            43px,
            5vw,
            68px
        );
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 450;
}

.sound-layout h2 span {
    display: block;
    color: #c56cb6;
}

.sound-copy p {
    margin:
        0
        0
        19px;
    color: #918497;
    font-size: 17px;
    line-height: 1.8;
}

.genre-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 55px;
}

.genre-strip span {
    padding:
        10px
        15px;
    border:
        1px solid
        rgba(255, 255, 255, 0.075);
    border-radius: 100px;
    color: #807384;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 760px) {

    .sound-section {
        padding:
            85px
            0
            95px;
    }

    .sound-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .sound-layout h2 {
        font-size: 42px;
    }

    .sound-copy p {
        font-size: 16px;
    }

    .genre-strip {
        margin-top: 40px;
    }

}