/* =========================================================
   SMOKING CESSATION ASSESSMENT LANDING PAGE
   Uses the main Elah.io homepage palette
========================================================= */

.smoke-page {
    --smoke-bg: #09070f;
    --smoke-bg-soft: #100b19;
    --smoke-panel: rgba(26, 21, 33, 0.78);

    --smoke-text: #ffffff;
    --smoke-text-soft: #c6bece;
    --smoke-text-muted: #a99faf;
    --smoke-text-dark: #8f8599;

    --smoke-purple: #9b65dc;
    --smoke-purple-light: #c4a2f2;
    --smoke-lavender: #cbb9e7;
    --smoke-purple-deep: #5c2c93;

    --smoke-border: rgba(255, 255, 255, 0.10);
    --smoke-shell: 1440px;

    background: var(--smoke-bg);
    color: var(--smoke-text);
    overflow-x: hidden;
}


.smoke-page main {
    overflow: hidden;
}


.smoke-shell {
    width: min(
        calc(100% - 80px),
        var(--smoke-shell)
    );

    margin: 0 auto;
}


.smoke-eyebrow {
    margin: 0 0 19px;

    color: var(--smoke-purple-light);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.5;
}


.smoke-page h1,
.smoke-page h2,
.smoke-page h3,
.smoke-page p {
    text-wrap: pretty;
}


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

.smoke-hero {
    position: relative;

    min-height: 930px;

    overflow: hidden;

    background: #09070f;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.smoke-hero-image {
    position: absolute;

    top: 0;
    right: 0;

    width: auto;
    height: 100%;

    max-width: none;

    object-fit: cover;

    opacity: 0.94;

    filter:
        saturate(0.90)
        brightness(1.04)
        contrast(1.04);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,0.25) 10%,
            #000000 28%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,0.25) 10%,
            #000000 28%,
            #000000 100%
        );
}


.smoke-hero-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at 83% 37%,
            rgba(111, 53, 171, 0.08),
            transparent 25%
        ),
        linear-gradient(
            90deg,
            rgba(9, 7, 15, 1) 0%,
            rgba(9, 7, 15, 0.99) 30%,
            rgba(9, 7, 15, 0.90) 50%,
            rgba(9, 7, 15, 0.48) 70%,
            rgba(9, 7, 15, 0.10) 100%
        );
}


.smoke-hero-grid {
    position: relative;
    z-index: 3;

    min-height: 930px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.90fr)
        minmax(430px, 0.68fr);

    align-items: center;

    gap:
        clamp(
            60px,
            8vw,
            140px
        );

    padding:
        150px 0
        90px;
}


.smoke-hero-copy {
    max-width: 760px;
}


.smoke-hero h1 {
    margin: 0;

    max-width: 820px;

    color: #ffffff;

    font-size:
        clamp(
            58px,
            6.2vw,
            96px
        );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -4.2px;
}


.smoke-hero h1 span {
    display: block;

    margin-top: 10px;

    color: var(--smoke-lavender);

    font-weight: 400;
}


.smoke-hero-lead {
    max-width: 720px;

    margin:
        34px 0
        0;

    color: var(--smoke-text-soft);

    font-size: 20px;

    line-height: 1.72;
}


.smoke-hero-benefit {
    max-width: 690px;

    margin:
        20px 0
        0;

    color: #ffffff;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.55;
}


.smoke-hero-actions,
.smoke-final-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   ASSESSMENT CARD
========================================================= */

.smoke-assessment-card {
    position: relative;

    width: 100%;

    max-width: 540px;

    justify-self: end;

    padding:
        42px
        38px;

    border:
        1px solid
        rgba(180, 125, 232, 0.25);

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(26, 18, 39, 0.94),
            rgba(15, 12, 22, 0.96)
        );

    box-shadow:
        0 36px 90px
        rgba(0, 0, 0, 0.46),
        0 0 70px
        rgba(93, 48, 142, 0.12);

    backdrop-filter: blur(18px);
}


.smoke-orb-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 165px;

    margin-bottom: 12px;
}


.smoke-video-orb {
    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #000000;

    flex: 0 0 auto;

    margin: 0 auto;

    box-shadow:
        0 0 34px rgba(155, 101, 220, 0.18);
}


.smoke-video-orb video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.smoke-card-eyebrow {
    margin:
        8px 0
        16px;

    color: var(--smoke-purple-light);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-align: center;
}


.smoke-question {
    max-width: 420px;

    margin:
        0 auto;

    color: #eee8f1;

    font-size: 22px;

    font-weight: 500;

    line-height: 1.48;

    letter-spacing: -0.7px;

    text-align: center;
}


.smoke-wave {
    height: 58px;

    margin:
        20px auto
        0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


.smoke-wave span {
    width: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #c4a2f2,
            #8d55ce
        );

    animation:
        smokeWave
        1.2s
        ease-in-out
        infinite alternate;
}


.smoke-wave span:nth-child(1),
.smoke-wave span:nth-child(9) {
    height: 16px;
}


.smoke-wave span:nth-child(2),
.smoke-wave span:nth-child(8) {
    height: 26px;

    animation-delay: 0.12s;
}


.smoke-wave span:nth-child(3),
.smoke-wave span:nth-child(7) {
    height: 38px;

    animation-delay: 0.24s;
}


.smoke-wave span:nth-child(4),
.smoke-wave span:nth-child(6) {
    height: 48px;

    animation-delay: 0.36s;
}


.smoke-wave span:nth-child(5) {
    height: 58px;

    animation-delay: 0.48s;
}


@keyframes smokeWave {

    from {
        transform:
            scaleY(0.60);

        opacity: 0.60;
    }

    to {
        transform:
            scaleY(1);

        opacity: 1;
    }

}


.smoke-listening {
    margin: 3px 0 0;

    color: #85798b;

    font-size: 12px;

    text-align: center;
}


.smoke-form-divider {
    height: 1px;

    margin:
        30px 0;

    background:
        rgba(255, 255, 255, 0.07);
}


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

.smoke-lead-form {
    position: relative;
}


.smoke-honeypot {
    position: absolute !important;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;
}


.smoke-form-heading {
    margin-bottom: 22px;
}


.smoke-form-heading strong {
    display: block;

    color: #ffffff;

    font-size: 23px;

    font-weight: 600;
}


.smoke-form-heading p {
    margin:
        7px 0
        0;

    color: #a79dac;

    font-size: 15px;

    line-height: 1.6;
}


.smoke-field {
    margin-bottom: 16px;
}


.smoke-field label {
    display: block;

    margin-bottom: 8px;

    color: #c6bece;

    font-size: 13px;
    font-weight: 500;
}


.smoke-field input {
    width: 100%;

    min-height: 50px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(180, 125, 232, 0.23);

    border-radius: 10px;

    outline: 0;

    background:
        rgba(7, 6, 11, 0.76);

    color: #ffffff;

    font: inherit;
}


.smoke-field input:focus {
    border-color:
        rgba(196, 162, 242, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(155, 101, 220, 0.08);
}


.smoke-submit {
    width: 100%;

    margin-top: 5px;
}


.smoke-form-note {
    margin:
        14px 0
        0;

    color: #796f7d;

    font-size: 11px;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   SHARED SECTION STYLES
========================================================= */

.smoke-section {
    padding:
        clamp(
            100px,
            10vw,
            160px
        )
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.smoke-page h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            46px,
            5vw,
            74px
        );

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -3.1px;
}


.smoke-page h2 span {
    color: var(--smoke-lavender);

    font-weight: 400;
}


.smoke-two-column {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(330px, 0.72fr);

    gap:
        clamp(
            60px,
            9vw,
            145px
        );
}


.smoke-copy {
    color: var(--smoke-text-soft);

    font-size: 18px;

    line-height: 1.85;
}


.smoke-copy p {
    margin:
        0 0
        24px;
}


.smoke-copy-lead {
    color: #d2c8d6;

    font-size: 22px;

    line-height: 1.72;
}


.smoke-section-heading {
    max-width: 860px;

    margin-bottom: 68px;
}


.smoke-section-heading > p:last-child {
    max-width: 680px;

    margin:
        26px 0
        0;

    color: var(--smoke-text-soft);

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================================
   CAPACITY
========================================================= */

.smoke-capacity {
    background: #09070f;
}


.smoke-compare-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 74px;
}


.smoke-compare-grid article {
    padding:
        38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.015);
}


.smoke-compare-highlight {
    border-color:
        rgba(180, 125, 232, 0.25) !important;

    background:
        linear-gradient(
            145deg,
            rgba(106, 59, 145, 0.08),
            rgba(255, 255, 255, 0.012)
        ) !important;
}


.smoke-compare-label {
    color: #b894d2;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


.smoke-flow-list {
    margin-top: 34px;
}


.smoke-flow-list p {
    margin: 0;

    color: #d0c7d4;

    font-size: 18px;

    line-height: 1.55;
}


.smoke-flow-list i {
    display: block;

    width: 1px;
    height: 24px;

    margin:
        10px 0
        10px
        12px;

    background:
        rgba(196, 162, 242, 0.22);
}


/* =========================================================
   EXPLORE
========================================================= */

.smoke-explore-section {
    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(111, 53, 171, 0.08),
            transparent 28%
        ),
        #100b19;
}


.smoke-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1px;

    background:
        rgba(255, 255, 255, 0.06);
}


.smoke-feature-grid article {
    min-height: 300px;

    padding:
        32px;

    background:
        #0d0914;
}


.smoke-feature-grid article > span {
    color: #836e92;

    font-size: 11px;

    letter-spacing: 1.6px;
}


.smoke-feature-grid strong {
    display: block;

    margin-top: 52px;

    color: #e1dce4;

    font-size: 23px;

    font-weight: 600;
}


.smoke-feature-grid p {
    margin:
        14px 0
        0;

    color: #aaa0ae;

    font-size: 16px;

    line-height: 1.78;
}


.smoke-human-note {
    margin:
        32px 0
        0;

    color: #cbb9e7;

    font-size: 17px;

    font-weight: 500;
}


/* =========================================================
   SCENARIOS
========================================================= */

.smoke-scenario-section {
    background: #09070f;
}


.smoke-scenario-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--smoke-border);

    border-bottom:
        1px solid
        var(--smoke-border);
}


.smoke-scenario-grid article {
    min-height: 275px;

    padding:
        30px 25px;

    border-right:
        1px solid
        var(--smoke-border);
}


.smoke-scenario-grid article:last-child {
    border-right: 0;
}


.smoke-scenario-grid span {
    color: #856d91;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.6px;
}


.smoke-scenario-grid strong {
    display: block;

    margin-top: 48px;

    color: #dfd7e2;

    font-size: 20px;

    font-weight: 600;
}


.smoke-scenario-grid p {
    margin:
        14px 0
        0;

    color: #a69daa;

    font-size: 15px;

    line-height: 1.75;
}


.smoke-scenario-close {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 36px;
}


.smoke-scenario-close strong {
    color: #ffffff;

    font-size: 24px;
}


.smoke-scenario-close span {
    color: #c5b4df;

    font-size: 18px;
}


/* =========================================================
   CONNECTED WORKFLOW
========================================================= */

.smoke-workflow-section {
    background: #100b19;
}


.smoke-workflow-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.smoke-workflow-grid article {
    min-height: 295px;

    padding:
        32px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.015);
}


.smoke-workflow-grid span {
    color: #b28bc9;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.smoke-workflow-grid strong {
    display: block;

    margin-top: 50px;

    color: #e0d9e2;

    font-size: 22px;

    font-weight: 600;
}


.smoke-workflow-grid p {
    margin:
        14px 0
        0;

    color: #a99faf;

    font-size: 16px;

    line-height: 1.78;
}


/* =========================================================
   DIGITAL DIRECTION
========================================================= */

.smoke-digital-section {
    background:
        radial-gradient(
            circle at 18% 45%,
            rgba(87, 48, 126, 0.07),
            transparent 30%
        ),
        #09070f;
}


.smoke-callout-line {
    padding-top: 22px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    color:
        #cbb9e7 !important;

    font-weight: 500;
}


/* =========================================================
   FINAL CTA
========================================================= */

.smoke-final {
    position: relative;

    padding:
        clamp(
            110px,
            12vw,
            180px
        )
        0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(111, 53, 171, 0.13),
            transparent 34%
        ),
        #09070f;

    text-align: center;
}


.smoke-final-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        rgba(101, 56, 155, 0.06);

    filter: blur(90px);
}


.smoke-final-inner {
    position: relative;
    z-index: 2;

    max-width: 920px;
}


.smoke-final-inner > p:not(.smoke-eyebrow) {
    max-width: 690px;

    margin:
        30px auto
        0;

    color: var(--smoke-text-soft);

    font-size: 19px;

    line-height: 1.8;
}


.smoke-final-actions {
    justify-content: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .smoke-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, 0.78fr);

        gap: 45px;
    }


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


    .smoke-scenario-grid article {
        border-bottom:
            1px solid
            var(--smoke-border);
    }

}


@media (max-width: 820px) {

    .smoke-shell {
        width:
            min(
                calc(100% - 32px),
                var(--smoke-shell)
            );
    }


    .smoke-hero {
        min-height: auto;
    }


    .smoke-hero-image {
        top: 0;
        right: -10%;

        width: auto;
        height: 72%;

        opacity: 0.30;
    }


    .smoke-hero-shade {
        background:
            linear-gradient(
                180deg,
                rgba(9, 7, 15, 0.96) 0%,
                rgba(9, 7, 15, 0.90) 42%,
                rgba(9, 7, 15, 0.98) 100%
            );
    }


    .smoke-hero-grid,
    .smoke-two-column {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 54px;
    }


    .smoke-hero-grid {
        padding:
            145px 0
            75px;
    }


    .smoke-hero h1 {
        font-size:
            clamp(
                54px,
                13vw,
                78px
            );
    }


    .smoke-assessment-card {
        justify-self: stretch;

        max-width: none;
    }


    .smoke-compare-grid,
    .smoke-feature-grid,
    .smoke-workflow-grid {
        grid-template-columns: 1fr;
    }


    .smoke-scenario-grid {
        grid-template-columns: 1fr;
    }


    .smoke-scenario-grid article {
        min-height: auto;

        border-right: 0;
    }


    .smoke-scenario-close {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 520px) {

    .smoke-shell {
        width:
            min(
                calc(100% - 26px),
                var(--smoke-shell)
            );
    }


    .smoke-section {
        padding:
            90px 0;
    }


    .smoke-hero-grid {
        padding-top: 125px;
    }


    .smoke-eyebrow {
        font-size: 11px;
    }


    .smoke-hero h1 {
        font-size: 48px;

        letter-spacing: -2.8px;
    }


    .smoke-hero-lead {
        font-size: 18px;
    }


    .smoke-hero-benefit {
        font-size: 17px;
    }


    .smoke-hero-actions,
    .smoke-final-actions {
        flex-direction: column;
    }


    .smoke-hero-actions .button,
    .smoke-final-actions .button {
        width: 100%;
    }


    .smoke-assessment-card {
        padding:
            32px
            22px;

        border-radius: 20px;
    }


    .smoke-video-orb {
        width: 125px;
        height: 125px;
    }


    .smoke-question {
        font-size: 20px;
        line-height: 1.5;
    }


    .smoke-page h2 {
        font-size: 42px;

        letter-spacing: -2.2px;
    }


    .smoke-copy {
        font-size: 17px;
    }


    .smoke-copy-lead {
        font-size: 20px;
    }


    .smoke-compare-grid article,
    .smoke-feature-grid article,
    .smoke-workflow-grid article {
        padding: 27px 23px;
    }


    .smoke-flow-list p {
        font-size: 17px;
    }


    .smoke-feature-grid p,
    .smoke-workflow-grid p,
    .smoke-scenario-grid p {
        font-size: 16px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .smoke-wave span {
        animation: none !important;
    }

}


/* =========================================================
   FORM MOVED TO ASSESSMENT CAPACITY
========================================================= */

.smoke-capacity-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(430px, 0.68fr);

    align-items: start;

    gap:
        clamp(
            60px,
            8vw,
            130px
        );
}

.smoke-capacity-copy {
    padding-top: 28px;
}

.smoke-capacity-copy .smoke-copy-lead {
    max-width: 650px;

    margin:
        34px 0
        0;

    color: #d2c8d6;

    font-size: 22px;

    line-height: 1.72;
}

.smoke-capacity-body {
    max-width: 650px;

    margin:
        22px 0
        0;

    color: var(--smoke-text-soft);

    font-size: 18px;

    line-height: 1.85;
}

.smoke-capacity .smoke-assessment-card {
    justify-self: end;

    margin-top: 0;
}

@media (max-width: 820px) {

    .smoke-capacity-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .smoke-capacity-copy {
        padding-top: 0;
    }

    .smoke-capacity .smoke-assessment-card {
        justify-self: stretch;

        max-width: none;
    }
}