/*
 * TSG App Pages v1.0.7
 */

body.tsg-app-page {
    overflow-x: hidden;
}

/*
 * Thrive Theme wrapper override. The active theme fixes .wrp at 1290px in
 * main_blue.css. Limit this override to enabled TSG App Pages only.
 */
body.tsg-app-page .theme-wrapper > .wrp.cnt {
    width: calc(100vw - 32px) !important;
    max-width: var(--tsg-app-max-width, 1800px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.tsg-app-page.tsg-app-spacing-none .theme-wrapper > .wrp.cnt {
    width: 100vw !important;
}

body.tsg-app-page.tsg-app-width-browser .theme-wrapper > .wrp.cnt {
    max-width: none !important;
}

body.tsg-app-page.tsg-app-hide-title .entry-title,
body.tsg-app-page.tsg-app-hide-title .page-title,
body.tsg-app-page.tsg-app-hide-title .tve-page-title,
body.tsg-app-page.tsg-app-hide-title header.entry-header > h1 {
    display: none !important;
}

/* Conservative sidebar removal for app-designated pages. */
body.tsg-app-page #sidebar,
body.tsg-app-page aside.sidebar,
body.tsg-app-page .main-sidebar,
body.tsg-app-page .widget-area.sidebar {
    display: none !important;
}

/* Allow common article/content wrappers to use the available width. */
body.tsg-app-page .site-content,
body.tsg-app-page .content-area,
body.tsg-app-page .main-content,
body.tsg-app-page main.site-main,
body.tsg-app-page article.page,
body.tsg-app-page .post-content,
body.tsg-app-page .entry-content,
body.tsg-app-page .tcb-post-content {
    max-width: none;
}

.tsg-app-breakout {
    width: 100%;
    max-width: none;
    margin: 0;
}

.tsg-app-canvas {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--tsg-app-max-width, 1800px);
    margin: 0 auto;
    min-width: 0;
}

body.tsg-app-width-1600 {
    --tsg-app-max-width: 1600px;
}

body.tsg-app-width-1800 {
    --tsg-app-max-width: 1800px;
}

body.tsg-app-width-browser {
    --tsg-app-max-width: none;
}

body.tsg-app-spacing-none .tsg-app-canvas {
    width: 100%;
}

.tsg-app-hero {
    width: 100%;
    max-width: var(--tsg-app-max-width, 1800px);
    margin: 36px auto 22px;
}

.tsg-app-hero-inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 26px;
    padding: 34px 38px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfb 100%);
    border: 1px solid #e2e8ee;
    border-radius: 28px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.tsg-app-hero-icon {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: #edf7f1;
    border: 1px solid #d8ebe0;
}

.tsg-app-hero-icon::before,
.tsg-app-hero-icon::after,
.tsg-app-hero-icon-mark::before,
.tsg-app-hero-icon-mark::after {
    content: "";
    position: absolute;
    background: #9ab8ab;
    border-radius: 2px;
}

.tsg-app-hero-icon::before {
    left: 18px;
    top: 18px;
    width: 3px;
    height: 32px;
    transform: rotate(0deg);
}

.tsg-app-hero-icon::after {
    left: 20px;
    top: 46px;
    width: 32px;
    height: 3px;
}

.tsg-app-hero-icon-mark::before {
    left: 18px;
    top: 48px;
    width: 30px;
    height: 3px;
    transform: rotate(-46deg);
    transform-origin: left center;
}

.tsg-app-hero-icon-mark::after {
    left: 31px;
    top: 18px;
    width: 3px;
    height: 31px;
    transform: rotate(46deg);
    transform-origin: center bottom;
}

.tsg-app-hero-copy {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    max-width: 820px;
}

.tsg-app-hero-eyebrow {
    margin: 4px 0 12px;
    color: #32875f;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tsg-app-hero-title {
    margin: 0;
    color: #162134;
    font-size: clamp(2.45rem, 4vw, 4.2rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.tsg-app-hero-accent {
    width: 68px;
    height: 4px;
    margin: 22px 0 20px;
    border-radius: 999px;
    background: #3aa165;
}

.tsg-app-hero-description {
    margin: 0;
    color: #5f6e7b;
    font-size: 1.08rem;
    line-height: 1.65;
    max-width: 760px;
}

.tsg-app-hero-blueprint {
    position: absolute;
    right: 24px;
    top: 10px;
    bottom: 10px;
    width: min(34%, 420px);
    opacity: 0.45;
    pointer-events: none;
    background-image:
        linear-gradient(#dbece3 1px, transparent 1px),
        linear-gradient(90deg, #dbece3 1px, transparent 1px),
        linear-gradient(90deg, transparent 0, transparent 12%, #c9e1d4 12%, #c9e1d4 13%, transparent 13%, transparent 26%, #c9e1d4 26%, #c9e1d4 27%, transparent 27%, transparent 40%, #c9e1d4 40%, #c9e1d4 41%, transparent 41%, transparent 54%, #c9e1d4 54%, #c9e1d4 55%, transparent 55%, transparent 68%, #c9e1d4 68%, #c9e1d4 69%, transparent 69%, transparent 82%, #c9e1d4 82%, #c9e1d4 83%, transparent 83%),
        linear-gradient(transparent 0, transparent 12%, #c9e1d4 12%, #c9e1d4 13%, transparent 13%, transparent 62%, #c9e1d4 62%, #c9e1d4 63%, transparent 63%),
        linear-gradient(106deg, transparent 0 22%, #c9e1d4 22% 22.8%, transparent 22.8% 100%);
    background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, center center, center center, center center;
    border-radius: 18px;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.35) 18%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 100%);
}

@media (max-width: 900px) {
    .tsg-app-hero {
        margin-top: 24px;
    }

    .tsg-app-hero-inner {
        padding: 24px;
        gap: 18px;
    }

    .tsg-app-hero-blueprint {
        width: 42%;
        opacity: 0.28;
    }
}

@media (max-width: 720px) {
    .tsg-app-hero-inner {
        display: block;
        padding: 22px 20px;
    }

    .tsg-app-hero-icon {
        margin-bottom: 16px;
    }

    .tsg-app-hero-blueprint {
        width: 54%;
        opacity: 0.18;
    }

    .tsg-app-hero-description {
        font-size: 1rem;
    }
}


/* Optional comments area for app pages. */
.tsg-app-comments-section {
    width: min(100% - 32px, 1000px);
    margin: 48px auto 24px;
}

.tsg-app-comments-section:empty {
    display: none;
}

@media (max-width: 720px) {
    .tsg-app-comments-section {
        width: min(100% - 24px, 1000px);
        margin-top: 32px;
    }
}