.elementor-8217 .elementor-element.elementor-element-c9281a6{--display:flex;}/* Start custom CSS for html, class: .elementor-element-2af208c */@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

:root {

    --primary: #6b3df5;
    --primary-dark: #40228f;

    --secondary: #e98952;
    --gold: #d8a947;

    --dark: ;
    --dark-2: #292441;

    --text: #3f3b4e;
    --muted: #777284;

    --light: #f8f7fb;
    --white: #ffffff;

    --border: #e8e5ef;

    --shadow:
        0 25px 70px rgba(30, 20, 70, .13);

    --radius: 24px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    background: #dddbe4;

    font-family:
        'Hind Siliguri',
        sans-serif;

    color: var(--text);

    font-size: 17px;

    line-height: 1.85;
}


a {
    text-decoration: none;
}


.ebook {

    width: 100%;

    max-width: 1000px;

    margin: 40px auto;
}


/* =====================================================
   PAGE
===================================================== */

.page {

    position: relative;

    width: 100%;

    min-height: 1414px;

    margin-bottom: 30px;

    padding:
        95px
        90px
        100px;

    background:

        radial-gradient(
            circle at 90% 5%,
            rgba(107,61,245,.07),
            transparent 20%
        ),

        #ffffff;

    overflow: hidden;

    box-shadow: var(--shadow);
}


.page::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 7px;

    background:

        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary),
            var(--gold)
        );
}


.page::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    bottom: -150px;

    border-radius: 50%;

    background:

        rgba(107,61,245,.035);
}


.page-number {

    position: absolute;

    right: 65px;
    top: 42px;

    font-size: 13px;

    color: #aaa6b4;

    font-weight: 600;
}


/* =====================================================
   COVER
===================================================== */

.cover {

    min-height: 1414px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.10),
            transparent 20%
        ),

        linear-gradient(
            145deg,
            #151126,
            #30205d 48%,
            #6b3df5
        );
}


.cover::before,
.cover::after {

    display: none;
}


.cover-content {

    position: relative;

    z-index: 5;

    max-width: 760px;
}


.brand-label {

    display: inline-block;

    padding:
        9px
        24px;

    border:

        1px solid
        rgba(255,255,255,.25);

    border-radius: 100px;

    letter-spacing: 3px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 28px;
}


.cover-small {

    display: block;

    color: #d7d0f5;

    letter-spacing: 2px;

    font-size: 13px;

    margin-bottom: 22px;
}


.cover h1 {

    font-size:
        clamp(
            55px,
            8vw,
            88px
        );

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 30px;
}


.cover-divider {

    width: 90px;

    height: 4px;

    margin: 0 auto 30px;

    border-radius: 20px;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            var(--secondary)
        );
}


.cover h2 {

    font-size: 25px;

    line-height: 1.5;

    font-weight: 500;

    color: #eeeaf8;

    margin-bottom: 22px;
}


.cover p {

    max-width: 650px;

    margin: auto;

    color: #d8d3e8;

    font-size: 18px;
}


.cover-author {

    margin-top: 55px;

    font-weight: 600;

    font-size: 17px;
}


.copyright {

    margin-top: 25px;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;
}


.cover-pattern {

    position: absolute;

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);
}


.pattern-1 {

    width: 500px;
    height: 500px;

    right: -230px;
    top: -200px;
}


.pattern-2 {

    width: 400px;
    height: 400px;

    left: -200px;
    bottom: -200px;

    background:
        rgba(216,169,71,.08);
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.eyebrow {

    display: inline-block;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 13px;
}


.page h2 {

    color: var(--dark);

    font-size: 43px;

    line-height: 1.25;

    margin-bottom: 28px;
}


.page h3 {

    color: var(--dark);

    font-size: 22px;

    line-height: 1.4;

    margin-bottom: 9px;
}


.page p {

    margin-bottom: 22px;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.highlight,
.tip,
.warning {

    padding: 28px 30px;

    margin: 35px 0;

    border-radius: var(--radius);

    background:

        linear-gradient(
            135deg,
            #f3efff,
            #fff5ee
        );

    border-left:
        5px solid
        var(--primary);
}


.highlight strong,
.tip strong,
.warning strong {

    display: block;

    color: var(--primary);

    font-size: 19px;

    margin-bottom: 5px;
}


.warning {

    background: #fff3ee;

    border-left-color:
        var(--secondary);
}


.warning strong {

    color:
        var(--secondary);
}


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

.card {

    padding: 30px;

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

    border-radius: var(--radius);

    background: white;

    box-shadow:
        0 12px 35px
        rgba(30,20,70,.05);

    transition: .3s ease;
}


.card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);
}


.problem-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.number {

    display: flex;

    width: 43px;
    height: 43px;

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

    border-radius: 13px;

    background:
        #eee9ff;

    color:
        var(--primary);

    font-weight: 700;

    margin-bottom: 18px;
}


/* =====================================================
   TRANSFORMATION
===================================================== */

.transformation {

    display: grid;

    grid-template-columns:
        1fr
        70px
        1fr;

    align-items: center;

    gap: 20px;

    margin: 45px 0;
}


.old,
.new {

    padding: 35px;

    border-radius: 24px;
}


.old {

    background:
        #f5f4f7;
}


.new {

    background:
        #eeeaff;

    border:
        1px solid
        #ddd3ff;
}


.old > span,
.new > span {

    display: inline-block;

    margin-bottom: 15px;

    font-size: 13px;

    font-weight: 700;

    color: var(--muted);
}


.new > span {

    color:
        var(--primary);
}


.old ul,
.new ul {

    padding-left: 20px;

    margin-top: 15px;
}


.transform-arrow {

    font-size: 40px;

    color:
        var(--primary);

    text-align: center;
}


.quote {

    padding: 32px;

    margin-top: 35px;

    background:
        var(--dark);

    color: white;

    text-align: center;

    border-radius: 22px;

    font-size: 21px;

    font-weight: 500;
}


.quote.large {

    font-size: 25px;

    margin-top: 45px;
}


/* =====================================================
   STAT
===================================================== */

.stat-grid {

    display: grid;

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

    gap: 18px;

    margin: 45px 0 30px;
}


.stat-card {

    padding: 35px 20px;

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f2edff,
            #fff7f1
        );
}


.stat-card strong {

    display: block;

    color:
        var(--primary);

    font-size: 34px;

    line-height: 1.2;

    margin-bottom: 12px;
}


.stat-card span {

    color:
        var(--muted);

    font-size: 14px;
}


.source-note {

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   BAR CHART
===================================================== */

.bar-chart {

    margin-top: 50px;
}


.bar-item {

    display: grid;

    grid-template-columns:
        100px
        1fr
        100px;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}


.bar-item > span {

    font-size: 14px;

    font-weight: 600;
}


.bar {

    height: 25px;

    border-radius: 50px;

    background:
        #eeeaf5;

    overflow: hidden;
}


.bar i {

    display: block;

    height: 100%;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #9b7cff
        );
}


/* =====================================================
   OPPORTUNITY
===================================================== */

.opportunity-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.opportunity-grid > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #faf9fd;

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


.opportunity-grid strong {

    display: flex;

    width: 40px;
    height: 40px;

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

    border-radius: 12px;

    background:
        var(--primary);

    color: white;

    margin-bottom: 18px;
}


/* =====================================================
   CUSTOMER
===================================================== */

.customer-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.customer {

    padding: 30px;

    border-radius: 20px;

    background:
        #f8f7fb;

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


.customer p {

    color:
        var(--muted);

    margin: 0;
}


/* =====================================================
   COLLECTION
===================================================== */

.collection-model {

    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    gap: 20px;

    margin: 45px 0;
}


.collection-main {

    padding: 50px;

    border-radius: 28px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #251942,
            #6b3df5
        );
}


.collection-main span {

    font-size: 12px;

    letter-spacing: 2px;

    color:
        #dcd3ff;
}


.collection-main h3 {

    color: white;

    font-size: 32px;

    margin-top: 20px;
}


.collection-main p {

    color:
        #e3def2;
}


.collection-side {

    display: grid;

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

    gap: 15px;
}


.collection-side div {

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    background:
        #f6f4fa;

    text-align: center;
}


.collection-side strong {

    color:
        var(--primary);

    font-size: 27px;
}


/* =====================================================
   DESIGN
===================================================== */

.design-pillars {

    display: grid;

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

    gap: 15px;

    margin-top: 40px;
}


.design-pillars > div {

    padding: 28px 18px;

    text-align: center;

    border-radius: 20px;

    background:
        #f7f5fb;
}


.design-pillars span {

    display: flex;

    width: 40px;
    height: 40px;

    margin:
        0 auto 15px;

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

    border-radius: 50%;

    background:
        var(--primary);

    color: white;
}


/* =====================================================
   YARN
===================================================== */

.yarn-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.yarn-grid > div {

    padding: 30px;

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

    border-radius: 20px;
}


.yarn-grid p {

    color:
        var(--muted);

    margin: 0;
}


/* =====================================================
   ARTISAN
===================================================== */

.artisan-process {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.artisan-process > div {

    padding: 30px;

    border-radius: 20px;

    background:
        #faf9fd;

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


.artisan-process span {

    display: flex;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background:
        var(--primary);

    color: white;

    margin-bottom: 15px;
}


.artisan-process p {

    color:
        var(--muted);

    margin: 0;
}


/* =====================================================
   PRODUCTION
===================================================== */

.production-flow {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 45px 0;

    padding: 30px;

    border-radius: 22px;

    background:
        #f6f4fb;
}


.production-flow div {

    padding:
        10px
        17px;

    border-radius: 50px;

    background: white;

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

    font-size: 13px;

    font-weight: 600;
}


.production-flow b {

    color:
        var(--primary);
}


.check-list {

    columns: 2;

    padding-left: 25px;

    margin-top: 25px;
}


.check-list li {

    margin-bottom: 9px;
}


/* =====================================================
   COST TABLE
===================================================== */

.cost-table {

    margin-top: 40px;

    padding: 15px 30px;

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

    border-radius: 22px;
}


.cost-table > div {

    display: flex;

    justify-content: space-between;

    padding: 18px 0;

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


.cost-table > div:last-child {

    border-bottom: none;
}


.cost-table strong {

    color:
        var(--primary);
}


.cost-table .total {

    font-size: 21px;

    font-weight: 700;
}


/* =====================================================
   PRICING
===================================================== */

.pricing-stack {

    display: grid;

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

    gap: 18px;

    margin: 40px 0;
}


.pricing-stack > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #f8f7fb;

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


.pricing-stack span {

    display: inline-flex;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    background:
        var(--primary);

    color: white;

    margin-right: 8px;
}


.pricing-stack p {

    margin:
        12px 0 0;

    color:
        var(--muted);

    font-size: 14px;
}


.formula {

    padding: 32px;

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #eee8ff,
            #fff2eb
        );
}


.formula strong {

    display: block;

    color:
        var(--primary);

    font-size: 21px;

    margin-bottom: 10px;
}


.formula p {

    margin: 0;

    font-size: 18px;

    font-weight: 600;
}


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

.cta-page {

    min-height: 700px;

    margin-bottom: 30px;

    padding: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    color: white;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.12),
            transparent 25%
        ),

        linear-gradient(
            145deg,
            #18122f,
            #6b3df5
        );

    box-shadow: var(--shadow);
}


.cta-page .eyebrow {

    color:
        #d9d1ff;
}


.cta-page h2 {

    max-width: 700px;

    color: white;

    font-size: 44px;

    line-height: 1.3;

    margin-bottom: 25px;
}


.cta-page p {

    max-width: 650px;

    color:
        #e4def2;

    font-size: 18px;
}


.cta-button {

    position: relative;

    z-index: 5;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-width: 180px;

    padding:
        14px
        36px;

    margin-top: 20px;

    border-radius: 100px;

    background: white;

    color:
        var(--primary);

    font-size: 18px;

    font-weight: 700;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.2);

    transition: .3s ease;
}


.cta-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.28);
}


.cta-button.big {

    padding:
        17px
        48px;

    min-width: 220px;

    font-size: 20px;
}


/* =====================================================
   PHOTO
===================================================== */

.photo-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}


.photo-grid > div {

    padding: 30px;

    border-radius: 20px;

    background:
        #f7f5fb;
}


.photo-grid strong {

    display: flex;

    width: 40px;
    height: 40px;

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

    margin-bottom: 15px;

    border-radius: 12px;

    background:
        var(--primary);

    color: white;
}


/* =====================================================
   CONTENT PILLARS
===================================================== */

.content-pillars {

    display: grid;

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

    gap: 12px;

    margin: 40px 0;
}


.content-pillars > div {

    padding: 25px 10px;

    text-align: center;

    border-radius: 18px;

    background:
        #f6f4fb;
}


.content-pillars strong {

    display: block;

    color:
        var(--primary);

    font-size: 27px;
}


.content-pillars span {

    color:
        var(--muted);

    font-size: 12px;
}


/* =====================================================
   CONTENT LIST
===================================================== */

.content-list {

    list-style: none;

    counter-reset: item;

    margin-top: 30px;
}


.content-list li {

    counter-increment: item;

    position: relative;

    padding:
        14px
        15px
        14px
        52px;

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


.content-list li::before {

    content:
        counter(item);

    position: absolute;

    left: 0;

    top: 11px;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 10px;

    background:
        #eee9ff;

    color:
        var(--primary);

    font-weight: 700;
}


/* =====================================================
   SALES
===================================================== */

.sales-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.sales-grid > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #faf9fd;

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


.sales-grid p {

    color:
        var(--muted);

    font-size: 14px;

    margin: 0;
}


/* =====================================================
   CUSTOM
===================================================== */

.custom-grid {

    display: grid;

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

    gap: 12px;

    margin: 45px 0;
}


.custom-grid > div {

    padding: 25px 10px;

    text-align: center;

    border-radius: 18px;

    background:
        #f7f5fb;
}


.custom-grid strong {

    display: block;

    color:
        var(--primary);

    font-size: 18px;
}


.custom-grid span {

    display: block;

    color:
        var(--muted);

    font-size: 12px;

    margin-top: 7px;
}


/* =====================================================
   UNIT ECONOMICS
===================================================== */

.unit-economics {

    padding:
        10px
        30px;

    margin-top: 40px;

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

    border-radius: 22px;
}


.unit-economics > div {

    display: flex;

    justify-content: space-between;

    padding: 18px 0;

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


.unit-economics > div:last-child {

    border-bottom: none;
}


.unit-economics strong {

    color:
        var(--primary);
}


.unit-economics .selling {

    font-size: 20px;

    font-weight: 700;
}


.unit-economics .profit {

    font-size: 21px;

    font-weight: 700;

    color:
        var(--primary);
}


/* =====================================================
   BREAK EVEN
===================================================== */

.formula-box {

    padding: 35px;

    margin: 40px 0;

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f0eaff,
            #fff2eb
        );
}


.formula-box strong {

    display: block;

    color:
        var(--primary);

    font-size: 22px;

    margin-bottom: 8px;
}


.formula-box p {

    margin: 0;

    font-size: 20px;

    font-weight: 600;
}


.break-even {

    padding:
        10px
        30px;

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

    border-radius: 22px;
}


.break-even > div {

    display: flex;

    justify-content: space-between;

    padding: 18px 0;

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


.break-even > div:last-child {

    border-bottom: none;
}


.break-even strong {

    color:
        var(--primary);
}


.break-even .result {

    font-size: 21px;

    font-weight: 700;
}


/* =====================================================
   SEASON CHART
===================================================== */

.season-chart {

    height: 300px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin: 50px 0;

    padding:
        20px;

    border-bottom:
        2px solid
        var(--border);
}


.season-chart > div {

    height: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;
}


.season-chart i {

    width: 100%;

    max-width: 55px;

    border-radius:
        10px 10px 0 0;

    background:
        linear-gradient(
            to top,
            var(--primary),
            #a88aff
        );
}


.season-chart span {

    font-size: 10px;

    color:
        var(--muted);

    text-align: center;
}


/* =====================================================
   RISK
===================================================== */

.risk-table {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.risk-table > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #fff8f5;

    border:
        1px solid
        #f2ded7;
}


.risk-table strong {

    color:
        var(--secondary);

    font-size: 19px;
}


.risk-table p {

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size: 14px;
}


/* =====================================================
   THIRTY DAYS
===================================================== */

.thirty-days {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.thirty-days > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #faf9fd;

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


.thirty-days span {

    color:
        var(--primary);

    font-weight: 700;

    font-size: 13px;
}


.thirty-days strong {

    display: block;

    font-size: 23px;

    color:
        var(--dark);
}


.thirty-days p {

    color:
        var(--muted);

    margin: 5px 0 0;
}


/* =====================================================
   GROWTH
===================================================== */

.growth-ladder {

    margin-top: 40px;
}


.growth-ladder > div {

    display: grid;

    grid-template-columns:
        100px
        200px
        1fr;

    gap: 20px;

    align-items: center;

    padding: 20px;

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


.growth-ladder span {

    color:
        var(--primary);

    font-weight: 700;
}


.growth-ladder strong {

    font-size: 20px;

    color:
        var(--dark);
}


.growth-ladder p {

    margin: 0;

    color:
        var(--muted);
}


/* =====================================================
   OUTCOME
===================================================== */

.outcome-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}


.outcome-grid > div {

    padding: 28px;

    border-radius: 20px;

    background:
        #f7f5fb;

    text-align: center;
}


.outcome-grid strong {

    display: block;

    color:
        var(--primary);

    font-size: 18px;

    margin-bottom: 7px;
}


.outcome-grid p {

    color:
        var(--muted);

    font-size: 14px;

    margin: 0;
}


/* =====================================================
   FINAL FRAMEWORK
===================================================== */

.final-insight {

    text-align: center;
}


.final-insight > p {

    max-width: 750px;

    margin-left: auto;

    margin-right: auto;
}


.framework {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin: 50px 0;
}


.framework > div {

    padding:
        20px;

    border-radius: 18px;

    background:
        #f5f2fc;

    min-width: 100px;
}


.framework span {

    display: flex;

    width: 35px;
    height: 35px;

    margin:
        0 auto 8px;

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

    border-radius: 50%;

    background:
        var(--primary);

    color: white;
}


.framework strong {

    font-size: 14px;
}


.framework b {

    color:
        var(--primary);

    font-size: 25px;
}


.framework .result {

    background:
        var(--primary);

    color: white;
}


.framework .result span {

    background:
        white;

    color:
        var(--primary);
}


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

.final-cta {

    min-height: 1414px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    position: relative;

    background:

        radial-gradient(
            circle at 80% 15%,
            rgba(255,255,255,.13),
            transparent 20%
        ),

        linear-gradient(
            145deg,
            #141026,
            #40258d 50%,
            #6b3df5
        );
}


.final-cta::before,
.final-cta::after {

    display: none;
}


.final-cta .eyebrow {

    color:
        #d8d0ff;
}


.final-cta h1 {

    color: white;

    font-size:
        clamp(
            50px,
            7vw,
            80px
        );

    line-height: 1.1;

    margin:
        20px 0 30px;
}


.final-cta > p {

    max-width: 700px;

    color:
        #e5e0f0;

    font-size: 20px;
}


.final-brand {

    margin-top: 80px;

    letter-spacing: 4px;

    font-weight: 700;
}


.final-cta .copyright {

    color:
        rgba(255,255,255,.5);
}


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

@media(max-width:850px) {

    .ebook {

        margin: 0;
    }


    .page,
    .cta-page {

        padding:
            70px
            45px;

        min-height:
            auto;

        margin-bottom:
            15px;
    }


    .problem-grid,
    .customer-grid,
    .yarn-grid,
    .artisan-process,
    .pricing-stack,
    .photo-grid,
    .risk-table,
    .thirty-days {

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


    .opportunity-grid,
    .sales-grid,
    .outcome-grid {

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


    .design-pillars {

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


    .stat-grid {

        grid-template-columns:
            1fr;
    }


    .content-pillars,
    .custom-grid {

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


    .collection-model {

        grid-template-columns:
            1fr;
    }


    .transformation {

        grid-template-columns:
            1fr;
    }


    .transform-arrow {

        transform:
            rotate(90deg);
    }
}


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

@media(max-width:600px) {

    body {

        font-size:
            16px;
    }


    .page,
    .cta-page {

        padding:
            60px
            25px;
    }


    .page h2 {

        font-size:
            32px;
    }


    .cover h1 {

        font-size:
            50px;
    }


    .cover h2 {

        font-size:
            21px;
    }


    .problem-grid,
    .customer-grid,
    .yarn-grid,
    .artisan-process,
    .pricing-stack,
    .photo-grid,
    .risk-table,
    .thirty-days,
    .opportunity-grid,
    .sales-grid,
    .outcome-grid {

        grid-template-columns:
            1fr;
    }


    .design-pillars {

        grid-template-columns:
            1fr 1fr;
    }


    .production-flow {

        flex-direction:
            column;
    }


    .production-flow b {

        transform:
            rotate(90deg);
    }


    .check-list {

        columns:
            1;
    }


    .growth-ladder > div {

        grid-template-columns:
            70px 1fr;
    }


    .growth-ladder p {

        grid-column:
            2;
    }


    .bar-item {

        grid-template-columns:
            75px 1fr 65px;
    }


    .custom-grid,
    .content-pillars {

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


    .season-chart {

        gap: 5px;
    }


    .season-chart span {

        font-size:
            8px;
    }


    .framework {

        flex-direction:
            column;
    }


    .framework b {

        transform:
            rotate(90deg);
    }


    .page-number {

        right:
            25px;
    }


    .final-cta h1 {

        font-size:
            50px;
    }

}


/* =====================================================
   PRINT / PDF
===================================================== */

@media print {

    @page {

        size:
            A4;

        margin:
            0;
    }


    body {

        background:
            white;
    }


    .ebook {

        max-width:
            none;

        margin:
            0;
    }


    .page,
    .cta-page {

        width:
            210mm;

        min-height:
            297mm;

        margin:
            0;

        box-shadow:
            none;

        page-break-after:
            always;

        break-after:
            page;
    }


    .page:last-child {

        page-break-after:
            auto;
    }


    .cta-button {

        color:
            var(--primary);

        border:
            1px solid
            var(--primary);
    }
}/* End custom CSS */