@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Theme Colors */
    --primary-gradient: linear-gradient(332deg, #8127FF 0%, #2D5FF6 100%);
    --primary-purple: #8127FF;
    --secondary-purple: #6466f1;
    --accent-blue: #2463eb;
    --bg-light: #f7f9fb;
    --bg-hero: #eaecff;
    --white: #ffffff;
    --black: #000000;

    /* Text Colors */
    --text-main: #1a1a1a;
    --text-muted: #64758b;
    --text-white: #ffffff;

    /* Layout */
    --container-max-width: 1280px;
    --section-padding: 80px 20px;
    --border-radius: 20px;

    /* Transitions */
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-light);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3 {
    text-transform: capitalize;
    line-height: 1.2;
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Components */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    padding: 14px 28px;
    border-radius: 1000px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.btn-primary {
    background: var(--black);
    color: var(--white);
}

.btn-primary:hover {
    opacity: 0.8;
}

.btn-gradient {
    background: var(--primary-gradient);
    color: var(--white);
}

.btn-gradient:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(129, 39, 255, 0.3);
}

.btn-white {
    background: var(--white);
    color: var(--primary-purple);
}

/* Header */
.main-header {
    background: var(--white);
    padding: 16px 0;
    position: sticky;
    top: 20px;
    z-index: 1000;
    margin: 20px 20px 0;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links li {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-cta {
    display: flex;
    gap: 12px;
}

/* Hero Section */
.hero {
    background: linear-gradient(332deg, rgba(111.22, 142.20, 236.03, 0.98) 0%, #B178FF 100%);
    padding: 80px 40px;
    margin: 20px;
    border-radius: var(--border-radius);
    overflow: hidden;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hero-title {
    font-size: 60px;
    line-height: 72px;
    font-weight: 400;
    text-transform: capitalize;
}

.hero-title span {
    color: #8127FF;
}

.hero-desc {
    max-width: 1156px;
    font-size: 18px;
    line-height: 25.2px;
    color: var(--white);
    margin: 0;
}

.hero-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.hero-features-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.hero-feature-tag {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    border: 1px solid #4775FF;
    font-size: 16px;
}

.hero-arrow {
    width: 44px;
    height: 44px;
    position: relative;
}

/* Hero Mockup */
.hero-mockup-container {
    align-self: stretch;
    height: 630px;
    position: relative;
    overflow: hidden;
}

.mockup-main {
    width: 1008px;
    height: 535px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    background: #F7F9FB;
    border-radius: 24.6px;
    outline: 1px solid #E2E8F0;
    box-shadow: 0px 20px 60px -15px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mockup-header {
    background: linear-gradient(135deg, white 0%, rgba(248, 250, 251, 0.5) 100%);
    padding: 24px 32px;
    border-bottom: 1px solid #F7F9FB;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mockup-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mockup-tabs {
    display: flex;
    gap: 8px;
}

.mockup-tab {
    padding: 6px 12px;
    background: #F7F9FB;
    border-radius: 10px;
    font-size: 14px;
}

.mockup-body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mockup-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #94A3B8;
}

.mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-orange {
    background: #FF8904;
}

.dot-green {
    background: #05DF72;
    opacity: 0.5;
}

.mockup-card {
    padding: 25px;
    border-radius: 14.3px;
    outline: 1px solid #E2E8F0;
    background: #F7F9FB;
}

.card-ai {
    background: linear-gradient(135deg, #EFF6FF 0%, #FAF5FF 100%);
    outline-color: #80B0FF;
}

/* Floating Elements */
.floating-card {
    position: absolute;
    background: white;
    box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.12);
    border-radius: 15px;
    outline: 1px solid #E2E8F0;
    padding: 16px;
}

.card-role {
    width: 385px;
    left: 100px;
    top: 0;
}

.card-team {
    width: 375px;
    left: 600px;
    top: 80px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-status {
    width: 382px;
    left: 48px;
    bottom: 20px;
}

.card-updated {
    width: 178px;
    right: 50px;
    top: 300px;
}

.card-language {
    width: 310px;
    right: 50px;
    bottom: 20px;
}

.avatar-stack {
    display: flex;
    position: relative;
    width: 116px;
    height: 38px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: white;
    position: absolute;
}

.feature-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 24px;
    border-radius: 100px;
    border: 1px solid rgba(71, 117, 255, 0.5);
    color: var(--white);
    font-size: 16px;
}

/* Loop Section */
.closed-loop-section .loop-card {
    background: var(--secondary-purple);
    padding: 80px;
    border-radius: var(--border-radius);
    align-items: center;
}

.loop-diagonal-image {
    max-width: 110%;
    height: auto;
    transform: translateX(10%);
}

/* Feature Grid */
.grid-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feature-card {
    padding: 60px;
    align-items: center;
}

.feature-video video {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-info h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.feature-info p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.learn-more {
    color: var(--primary-purple);
    font-weight: 700;
    text-decoration: none;
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.team-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
}

.team-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
}

.team-card h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

.team-card p {
    font-size: 14px;
    color: var(--text-muted);
}

/* Final CTA */
.gradient-card {
    background: var(--primary-gradient);
    padding: 100px 40px;
    position: relative;
    overflow: hidden;
}

.cta-image {
    max-width: 400px;
    margin-bottom: 40px;
}

/* Security Section */
.security-section {
    background: #fcfdfe;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.security-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: #f7f9fb;
    border: 1px solid #e2e8f0;
}

.security-card img {
    width: 64px;
    height: 64px;
    background: var(--secondary-purple);
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.security-info h4 {
    font-size: 20px;
    margin-bottom: 4px;
}

.security-info p {
    color: var(--text-muted);
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.tag {
    display: inline-flex;
    padding: 8px 20px;
    background: var(--white);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    color: var(--accent-blue);
    margin-bottom: 20px;
}

.tag-gradient {
    background: var(--primary-gradient);
    color: var(--white);
}

/* Sections */
section {
    padding: var(--section-padding);
}

.section-title {
    font-size: 48px;
    text-align: center;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Responsive */
@media (max-width: 1200px) {
    .mockup-main {
        width: 90%;
        height: 450px;
    }

    .card-role {
        left: 20px;
        width: 300px;
    }

    .card-team {
        right: 20px;
        left: auto;
        width: 320px;
    }

    .card-status {
        left: 10px;
        width: 320px;
    }

    .card-language {
        right: 10px;
        width: 280px;
    }
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 48px;
        line-height: 56px;
    }

    .mockup-main {
        height: 400px;
    }

    .floating-card {
        display: none;
    }

    .hero-mockup-container {
        height: 450px;
    }

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

/* Fresh Reconstruction Phase */
/* Fresh Reconstruction Phase */
.fresh-container {
    background: #EAECFF;
    padding: 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    min-height: 100vh;
}

/* Fresh Reconstruction: Refined Hero */
.refined-hero {
    width: 100%;
    padding: 80px 40px;
    background: linear-gradient(332deg, rgba(111, 142, 236, 0.98) 0%, #B178FF 100%);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    overflow: hidden;
    color: var(--white);
}

.hero-text-inner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hero-title-main {
    font-size: 60px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: capitalize;
}

.hero-title-main .accent {
    color: var(--primary-purple);
}

.hero-description-text {
    max-width: 1156px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.hero-cta-wrapper {
    display: flex;
    justify-content: center;
}

.btn-request-demo {
    width: 250px;
    padding: 14px 22px;
    background: var(--white);
    border-radius: 1000px;
    color: var(--primary-purple);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-request-demo:hover {
    transform: translateY(-2px);
}

.demo-indicator {
    display: none;
    /* Removed in favor of SVG */
}

.btn-request-demo svg {
    transition: transform 0.2s ease;
}

.btn-request-demo:hover svg {
    transform: translate(2px, -2px);
}

.hero-feature-tags-row {
    display: flex;
    flex-direction: row;
    /* Forced horizontal */
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.feat-tag {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    outline: 1px solid #4775FF;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    /* Prevent wrapping */
}

.hero-main-mockup {
    width: 80%;
    height: auto;
    /* box-shadow: 0px 20px 60px -15px rgba(0, 0, 0, 0.12); */
    /* border-radius: 24.6px; */
    /* border: 1px solid #E2E8F0; */
}

.feat-separator-circle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-purple);
}

.feat-separator-circle svg {
    width: 100%;
    height: 100%;
}

/* Fresh Reconstruction: Refined Header */
.refined-header {
    width: 100%;
    background: var(--white);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.header-inner {
    width: 100%;
    max-width: 1500px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-item {
    padding: 3px 12px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    font-size: 14px;
    cursor: pointer;
}

.nav-dot {
    width: 6px;
    height: 6px;
    background: var(--black);
    border-radius: 50%;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-demo-black {
    padding: 14px 22px;
    background: var(--black);
    border-radius: 1000px;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.btn-try-gradient {
    padding: 14px 22px;
    background: var(--primary-gradient);
    border-radius: 1000px;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.white-dot {
    width: 6px;
    height: 6px;
    background: var(--white);
}

.nav-arrow {
    width: 10px;
    height: 5px;
    border: 1px solid black;
    border-top: none;
    position: relative;
    transform: rotate(45deg);
    /* Simple representation of the arrow */
}

/* Interactive Header Dropdown Styles */
.nav-item {
    position: relative;
}

.nav-item.has-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    padding-top: 16px;
}

.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-inner {
    width: 320px;
    background: white;
    box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.10);
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}

.dropdown-header {
    align-self: stretch;
    padding-bottom: 10px;
    border-bottom: 1px #E2E8F0 solid;
    color: #64758B;
    font-size: 16px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 22px;
}

.dropdown-list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.dropdown-link {
    align-self: stretch;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s, outline 0.2s;
}

.dropdown-link span {
    color: #64758B;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 19.6px;
    transition: color 0.2s;
}

.dropdown-link i.ph-arrow-right {
    font-size: 18px;
    color: black;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.2s, transform 0.2s;
}

.dropdown-link:hover {
    background: #F8FAFC;
}

.dropdown-link:hover span {
    color: black;
}

.dropdown-link:hover i.ph-arrow-right {
    opacity: 1;
    transform: translateX(0);
}

/* Selected/Active Dropdown Link Style */
.dropdown-link.active-item,
.dropdown-link:active {
    background: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.10);
    outline: 1px #6F8EEC solid;
    outline-offset: -1px;
}

.dropdown-link.active-item span {
    color: black;
}

.dropdown-link.active-item i.ph-arrow-right {
    opacity: 1;
    transform: translateX(0);
}

/* Fresh Reconstruction: Insights Reveal Section */
.insights-reveal {
    width: 100%;
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.insights-reveal h2 {
    font-size: 60px;
    line-height: 72px;
    font-weight: 400;
    color: var(--black);
    text-transform: capitalize;
}

.insights-reveal p {
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    color: var(--black);
}

.insights-reveal p .accent-blue {
    color: #5581F1;
}

/* Fresh Reconstruction: Closed Loop Section */
.closed-loop-container {
    width: 100%;
    padding: 40px;
    background: var(--white);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.closed-loop-card {
    align-self: stretch;
    padding: 40px;
    background: #6466F1;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.loop-layout-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.loop-text-content {
    flex: 1;
    min-width: 300px;
    max-width: 485px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.loop-tag {
    height: 40px;
    padding: 0 24px;
    background: var(--white);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4775FF;
    font-size: 16px;
    font-weight: 400;
    width: fit-content;
}

.loop-title {
    color: var(--white);
    font-size: 60px;
    line-height: 72px;
    font-weight: 400;
    text-transform: capitalize;
}

.loop-desc {
    color: var(--white);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 400;
}

.loop-italic-verified {
    color: var(--white);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 600;
}

.loop-visual-side {
    flex: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loop-visual-side img {
    width: 100%;
    height: auto;
    max-width: 800px;
}

.loop-bottom-text {
    align-self: stretch;
    text-align: center;
}

.loop-bottom-text p {
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    color: var(--black);
}

.loop-bottom-text p .accent-blue {
    color: #4775FF;
}

/* Fresh Reconstruction: Feature Detail Sections */
.feature-grid-container {
    width: 100%;
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feature-detail-card {
    align-self: stretch;
    padding: 40px;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.feature-detail-card:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-detail-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.feature-detail-badge {
    height: 40px;
    padding: 0 24px;
    background: linear-gradient(332deg, rgba(71, 117, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
}

.feature-detail-title {
    color: var(--black);
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
}

.feature-detail-desc {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

.feature-highlight-box {
    align-self: stretch;
    padding: 10px;
    background: linear-gradient(332deg, #EEF3FF 3%, #EEE8FF 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-highlight-text {
    color: var(--black);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.feature-learn-more {
    color: var(--primary-purple);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.feature-detail-visual {
    width: 650px;
    max-width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-detail-visual video,
.feature-detail-visual img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0px 20px 60px -15px rgba(0, 0, 0, 0.12);
}

/* Fresh Reconstruction: Who It's For Section */
.who-its-for-container {
    width: 100%;
    padding: 120px 40px;
    background: var(--white);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.who-its-for-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.who-its-for-badge {
    height: 40px;
    padding: 0 24px;
    background: #94A3B8;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
}

.who-its-for-title {
    color: var(--black);
    font-size: 60px;
    line-height: 72px;
    font-weight: 400;
    text-transform: capitalize;
}

.who-its-for-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.who-grid-row-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}

.who-grid-row-bottom {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.who-card {
    flex: 1;
    max-width: 400px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--white);
}

/* Specific size for bottom row cards to match top row */
.who-grid-row-bottom .who-card {
    flex: 0 1 384px;
}

.who-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.who-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.who-card-title {
    color: var(--black);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.who-card-visual {
    width: 100%;
    height: 140px;
    background: #F7F9FB;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.who-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.who-card-desc {
    color: var(--black);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

/* Fresh Reconstruction: Why TabyGen Section (Comparison) */
.comparison-container {
    width: 100%;
    padding: 80px 40px;
    margin-top: 80px;
    background: #6466F1;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.comparison-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.comparison-badge {
    height: 40px;
    padding: 0 24px;
    background: var(--white);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64758B;
    font-size: 16px;
    font-weight: 400;
}

.comparison-title {
    color: var(--white);
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400;
}

.comparison-subtitle {
    max-width: 900px;
    color: var(--white);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.comparison-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    flex-wrap: wrap;
}

.comp-card {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comp-card.others {
    border: 1px solid #929CFF;
    background: transparent;
}

.comp-card.tabygen {
    background: var(--white);
}

.comp-section-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
}

.others .comp-section-title {
    color: var(--white);
}

.tabygen .comp-section-title {
    color: #4775FF;
}

.comp-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.comp-item {
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.others .comp-item {
    cursor: pointer;
}

.comp-item:not(:last-child) {
    border-bottom: 1px solid rgba(146, 156, 255, 0.5);
}

.tabygen .comp-item:not(:last-child) {
    border-bottom: 1px solid #E2E8F0;
}

.comp-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.others .comp-icon i {
    color: #929CFF;
    font-size: 32px;
    transform: rotate(90deg);
}

.comp-text {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.others .comp-text {
    color: var(--white);
}

.tabygen .comp-text {
    color: var(--black);
}

.comp-check-box {
    width: 20px;
    height: 20px;
    background: #6466F1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Fresh Reconstruction: Loop Outro Section */
.loop-outro {
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.loop-outro-title {
    font-size: 80px;
    line-height: 1;
    font-weight: 400;
    color: var(--black);
}

.loop-outro-title .accent-blue {
    color: #2463EB;
}

/* Fresh Reconstruction: Refined Footer Wrapper */
.footer-outer-wrapper {
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Refined CTA Box */
.refined-cta-box {
    width: 100%;
    background: linear-gradient(332deg, rgba(111, 142, 236, 0.98) 0%, #B178FF 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-top-visual {
    width: 100%;
    /* max-width: 1312px; */
}

.cta-top-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.cta-bottom-content {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.cta-main-title {
    max-width: 852px;
    color: white;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400;
}

.cta-sub-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cta-sub-title {
    color: #E9EDFF;
    font-size: 24px;
    font-weight: 500;
}

.cta-description {
    color: white;
    font-size: 18px;
    max-width: 800px;
    line-height: 1.4;
}

.cta-demo-btn {
    width: 207px;
    margin-top: 10px;
    padding: 14px 22px;
    border-radius: 1000px;
    border: 1px solid white;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cta-demo-btn:hover {
    background: white;
    color: #6466F1;
}

/* Refined Security Section */
.refined-security-box {
    width: 100%;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.security-main-title {
    font-size: 40px;
    font-weight: 400;
    color: black;
}

.security-cards-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
}

.sec-card {
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 320px;
    padding: 24px;
    background: #F7F9FB;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.sec-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sec-card-info h4 {
    font-size: 24px;
    font-weight: 500;
    color: black;
}

.sec-card-info p {
    font-size: 18px;
    color: black;
}

/* Site Footer */
.site-footer {
    width: 100%;
    padding: 120px 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    cursor: pointer;
    transition: var(--transition);
}

.footer-social-icon:hover {
    color: var(--primary-purple);
}

.site-logo {
    width: 104px;
    height: 36px;
    display: block;
}

.footer-social-icon.white {
    color: var(--white);
}

/* Main Card shared across TabyLearn */
.tl-main-card {
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Part 1: Hero */
.tl-combo-hero {
    align-self: stretch;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tl-hero-glow-effect {
    width: 890px;
    height: 250px;
    left: 185px;
    top: 471px;
    position: absolute;
    transform: rotate(6deg);
    transform-origin: top left;
    box-shadow: 120px 120px 120px;
    border-radius: 53px;
    outline: 173px rgba(175, 153, 236, 0.2) solid;
    outline-offset: -86.50px;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.tl-hero-header-box {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 1;
    text-align: center;
}

.tl-hero-title-container {
    width: 652px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tl-hero-title-black {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-hero-title-purple {
    color: #8127FF;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-hero-secondary-text {
    width: 100%;
    max-width: 1156px;
    font-size: 18px;
    line-height: 25.2px;
    color: var(--black);
}

.tl-hero-cta-box {
    display: flex;
    justify-content: center;
}

.tl-btn-wide {
    width: 250px;
    background: linear-gradient(332deg, rgba(71, 117, 255, 0.98) 0%, #A86AFF 100%) !important;
    padding-left: 22px;
    padding-right: 22px;
}

.tl-btn-dot {
    width: 6px;
    height: 6px;
    background: white;
    margin-left: 8px;
}

.tl-hero-visual-box {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.tl-hero-main-asset {
    width: 100%;
    max-width: 1192px;
    height: auto;
}

/* Part 2: Who It's For */
.tl-combo-who {
    align-self: stretch;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.tl-who-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tl-who-title-container {
    width: 960px;
    text-align: center;
}

.tl-who-title-blue {
    color: #4775FF;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-who-title-black {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-who-split-container {
    width: 100%;
    max-width: 1200px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    overflow: hidden;
}

.tl-who-text-side {
    width: 505px;
    padding: 32px;
    border-right: 1px #E2E8F0 solid;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tl-checklist-v3 {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tl-checklist-v3 li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 22.4px;
}

.tl-check-bubble {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #202026;
    font-size: 12px;
}

.tl-who-visual-side {
    flex: 1;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-who-split-asset {
    width: 100%;
    max-width: 631px;
    height: auto;
    border-radius: 20px;
}

.tl-who-quote-container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.tl-quote-black {
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    word-wrap: break-word;
}

.tl-quote-blue {
    color: #4775FF;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    word-wrap: break-word;
}

/* Helper Utilities */
.tl-tag {
    height: 40px;
    padding: 0 24px;
    border-radius: 167px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
}

.tl-tag.gray {
    background: #94A3B8;
    color: var(--white);
}

.tl-p-large {
    font-size: 18px;
    line-height: 1.4;
}

.tl-p-medium {
    font-size: 16px;
    line-height: 1.4;
}

.shadow-sm {
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
}

/* Global Content Card */
.tl-content-card {
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Micro-Learning Generation Section */
.tl-generation-container {
    width: 100%;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.tl-generation-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.tl-tag-gradient {
    height: 40px;
    padding: 0 24px;
    background: linear-gradient(332deg, rgba(71, 117, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.tl-gen-title-black {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
}

.tl-gen-title-blue {
    color: #4775FF;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
}

.tl-gen-desc {
    color: #475569;
    font-size: 18px;
    line-height: 25.2px;
    max-width: 800px;
}

.tl-tabs-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tl-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    border-bottom: 1px solid #E2E8F0;
}

.tl-tab-item {
    padding: 10px 20px;
    border-bottom: 4px solid transparent;
    color: #94A3B8;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
}

.tl-tab-item.active {
    border-bottom-color: #6466F1;
    color: black;
}

.tl-tab-content-box {
    display: flex;
    align-items: center;
    gap: 40px;
}

.tl-tab-visual-side {
    flex: 1.2;
    display: flex;
    justify-content: center;
}

.tl-tab-img {
    width: 100%;
    height: auto;
}

.tl-tab-info-side {
    flex: 1;
    padding: 40px;
    background: #80B0FF;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    color: white;
}

.tl-info-number {
    font-size: 60px;
    line-height: 1;
}

.tl-info-title {
    font-size: 28px;
    font-weight: 500;
}

.tl-info-text {
    font-size: 17px;
    line-height: 1.5;
}

/* Skill Tracking & Progression Section */
.tl-tracking-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.tl-tracking-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.tl-tracking-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
}

.tl-tracking-desc {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
}

.tl-tracking-grid {
    width: 100%;
    max-width: 1200px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
}

.tl-tracking-col {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tl-tracking-col:first-child {
    border-right: 1px solid #E2E8F0;
    flex: 1.5;
}

.tl-tracking-col-title {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
}

.tl-tracking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tl-tracking-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: black;
    font-size: 16px;
    line-height: 22.4px;
}

.tl-check-bubble-small {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202026;
    font-size: 12px;
}

.tl-tracking-visual {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tl-tracking-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.tl-tracking-footer-text {
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}

/* What Makes TabyLearn Different Section */
.tl-different-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.tl-different-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.tl-different-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
}

.tl-different-desc {
    color: black;
    font-size: 18px;
    line-height: 25.2px;
}

.tl-different-grid {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 40px;
}

.tl-diff-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tl-diff-right-col {
    flex: 1;
}

.tl-diff-card {
    padding: 40px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tl-diff-card.tall {
    height: 100%;
}

.tl-diff-card-title {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}

.tl-diff-card-text {
    color: #64758B;
    font-size: 16px;
    line-height: 22.4px;
}

.tl-diff-card-visual {
    width: 100%;
    height: 106px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-diff-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-diff-card-visual-tall {
    width: 100%;
    flex: 1;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.tl-diff-img-tall {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* LMS Comparison Section */
.tl-lms-section {
    width: 100%;
}

.tl-lms-header {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tl-tag-white {
    padding: 8px 24px;
    background: white;
    border-radius: 100px;
    color: #4775FF;
    font-size: 16px;
    font-weight: 400;
}

.tl-lms-title {
    color: white;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-align: center;
}

/* Use Case Section */
.tl-usecase-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tl-usecase-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tl-usecase-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-align: center;
}

.tl-usecase-main-card {
    width: 100%;
    padding: 40px;
    border: 1px solid #6466F1;
    border-radius: 20px;
}

.tl-usecase-grid {
    display: flex;
    gap: 40px;
}

.tl-usecase-left {
    flex: 0 0 400px;
}

.tl-usecase-highlight {
    color: #2463EB;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
}

.tl-usecase-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tl-usecase-subtitle {
    color: black;
    font-size: 24px;
    font-weight: 500;
}

.tl-usecase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tl-usecase-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #64758B;
    font-size: 18px;
    line-height: 1.4;
}

.tl-usecase-list i {
    color: #6466F1;
    font-size: 24px;
}

.tl-usecase-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tl-result-label {
    color: #64758B;
    font-size: 24px;
    font-weight: 500;
}

.tl-result-text {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: black;
}

.tl-result-text .blue-text {
    color: #4775FF;
}

/* What You Get Section */
.tl-get-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.tl-get-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.tl-tag-gray {
    padding: 8px 24px;
    background: #94A3B8;
    border-radius: 100px;
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.tl-get-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-get-grid {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.tl-get-card {
    flex: 1;
    padding: 20px;
    border: 1px solid #929CFF;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.tl-get-card.tall-card {
    flex: 1.2;
}

.tl-get-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-get-card-header i {
    font-size: 32px;
    color: #4775FF;
}

.tl-get-card-header h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.tl-get-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tl-get-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tl-bullet-bubble {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-bullet-bubble::after {
    content: '';
    width: 10px;
    height: 8px;
    background: #202026;
    clip-path: polygon(25% 50%, 0% 50%, 50% 100%, 100% 0%, 75% 0%, 50% 60%);
    /* Custom check icon clip-path */
}

.tl-get-list span {
    color: black;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

/* The Closed Loop Section */
.tl-loop-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.tl-loop-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.tl-loop-title.blue {
    color: #4775FF;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    text-transform: capitalize;
}

.tl-loop-visual {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
}

.tl-loop-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tl-loop-footer {
    width: 100%;
    text-align: center;
}

.tl-loop-footer-text {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
}

.tl-loop-footer-text .blue-text {
    color: #4775FF;
}

/* AI Strategy Page Styles */
.ai-strategy-page {
    background: #EAECFF;
}

/* Hero Section */
.as-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 80px;
}

.as-hero-main {
    align-self: stretch;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.as-hero-header-box {
    align-self: stretch;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.as-hero-title-box {
    width: 100%;
    max-width: 1124px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.as-hero-title-box .title-black {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.as-hero-title-box .title-blue {
    color: #4775FF;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.as-hero-body-box {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.as-hero-desc-box {
    width: 100%;
    max-width: 1156px;
    text-align: center;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
}

.as-hero-desc-item {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.as-hero-desc-item.bold {
    font-weight: 600;
}

.as-hero-cta-wrapper {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.as-btn-wide {
    width: 250px;
    padding: 14px 22px;
    background: linear-gradient(332deg, rgba(71.26, 116.86, 255, 0.98) 0%, #A86AFF 100%);
    border-radius: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.as-btn-text {
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 19.60px;
}

.as-btn-icon {
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.as-hero-asset {
    align-self: stretch;
    height: auto;
    max-height: 606px;
    width: 100%;
    object-fit: contain;
}

/* Feature Grid Containers */
.as-section-card {
    background: white;
    border-radius: 20px;
    padding: 80px 40px;
    margin-top: 40px;
}

.as-section-transparent {
    background: transparent;
    padding: 80px 40px;
}

/* Problem Section */
.as-section-tag {
    width: 100%;
}

.as-section-tag .tl-tag-gray {
    display: inline-flex;
    width: auto;
    background: #94A3B8;
    color: white;
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
    text-transform: uppercase;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.as-problem-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 40px;
}

.as-problem-title {
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    color: var(--black);
    text-align: left;
}

.as-problem-description {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
}

.as-problem-description p {
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    color: #64758B;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.as-problem-solution {
    color: #4775FF;
    font-size: 80px;
    font-weight: 400;
    line-height: 80px;
    margin-top: 0;
    align-self: stretch;
}

/* Assets Section */
.as-assets-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.as-assets-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 60px;
}

.as-assets-title {
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    align-self: stretch;
}

.as-assets-title .blue-text {
    color: #4775FF;
}

.as-assets-subtitle {
    font-size: 18px;
    color: var(--black);
}

.as-assets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.as-asset-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px solid #E2E8F0;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-asset-visual {
    width: 100%;
    height: 238px;
    background: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border-radius: 14px;
    outline: 1px solid #80B0FF;
    outline-offset: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-asset-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
}

.as-asset-content h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    color: black;
}

.as-asset-content p {
    font-size: 16px;
    color: #64758B;
    line-height: 22.4px;
}

/* Living Playbooks v2 and Analytics Section */
.as-combined-analytics {
    display: flex;
    flex-direction: column;
    gap: 120px;
    width: 100%;
}

.as-living-v2 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-self: stretch;
}

.as-living-v2-container {
    padding: 40px;
    border-radius: 20px;
    outline: 1px solid #929CFF;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}

.as-living-v2-grid {
    display: flex;
    gap: 40px;
    align-self: stretch;
}

.as-living-v2-intro {
    width: 451px;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    color: black;
}

.as-living-v2-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-living-v2-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.as-living-v2-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-living-v2-bullet {
    width: 20px;
    height: 20px;
    background: #929CFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-living-v2-bullet-inner {
    width: 12px;
    height: 12px;
    border: 1px solid #F7F9FB;
    box-sizing: border-box;
}

.as-living-v2-item-content h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    color: black;
    display: inline;
}

.as-living-v2-item-content p {
    font-size: 18px;
    color: #64758B;
    line-height: 25.2px;
    display: inline;
}

.as-living-v2-footer {
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    color: black;
    text-align: center;
}

/* Asset Analytics Grid */
.as-analytics-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.as-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-self: stretch;
}

.as-analytics-card {
    height: auto;
    min-height: 350px;
}

/* Version History Visual */
.as-visual-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    outline: 1.5px solid #E6EAF0;
    outline-offset: -1.5px;
}

.as-timeline-row {
    display: flex;
    gap: 10px;
    position: relative;
}

.as-timeline-line {
    width: 2px;
    background: #E5E7EB;
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: -10px;
}

.as-timeline-row:last-child .as-timeline-line {
    display: none;
}

.as-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #D1D5DC;
    border: 3px solid #F3F4F6;
    flex-shrink: 0;
    z-index: 1;
}

.as-timeline-dot.active {
    background: #155DFC;
    border-color: #DBEAFE;
}

.as-timeline-content {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    background: white;
    outline: 1px solid #E6EAF0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.as-timeline-row.active .as-timeline-content {
    background: #EFF6FF;
    outline: 1.5px solid #2B7FFF;
}

.as-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.as-v-tag {
    font-size: 11px;
    font-weight: 500;
    color: #101828;
}

.as-status-tag {
    font-size: 9px;
    padding: 2px 6px;
    background: #DBEAFE;
    color: #155DFC;
    border-radius: 12px;
}

.as-timeline-desc {
    font-size: 11px;
    color: #364153;
}

.as-timeline-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: #6A7282;
}

/* Confidence Gauge Visual */
.as-visual-confidence {
    padding: 26px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    outline: 1.5px solid #E6EAF0;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.as-confidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.as-gauge-box {
    width: 92px;
    height: 92px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-gauge-bg {
    width: 80px;
    height: 80px;
    border: 6px solid #E6EAF0;
    border-radius: 50%;
}

.as-gauge-fill {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 6px solid #3B82F6;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 20%, 50% 50%);
}

.as-gauge-text {
    position: absolute;
    font-size: 22px;
    font-weight: 600;
    color: #101828;
}

.as-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.as-metric-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #364153;
}

.as-metric-bar {
    height: 6px;
    background: #F3F4F6;
    border-radius: 12px;
    overflow: hidden;
}

.as-bar-fill {
    height: 100%;
    background: #00C950;
    border-radius: 12px;
}

.as-bar-fill.medium {
    background: #F0B100;
}

.as-confidence-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #F0FDF4;
    border-radius: 7px;
    padding: 8px;
    outline: 1px solid #B9F8CF;
    font-size: 10px;
    font-weight: 500;
}

.as-trend-up {
    color: #00A63E;
}

/* Coverage Visual */
.as-visual-coverage {
    padding: 26px;
    background: white;
    border-radius: 14px;
    outline: 2px solid #E6EAF0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-coverage-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-coverage-title {
    font-size: 12px;
    font-weight: 500;
    color: #6A7282;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.as-coverage-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-coverage-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    color: #364153;
}

.as-coverage-footer {
    padding-top: 17px;
    border-top: 1px solid #E6EAF0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #4A5565;
}

.as-coverage-stats {
    display: flex;
    gap: 8px;
}

.as-stat-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.as-dot-green {
    width: 8px;
    height: 8px;
    background: #00C950;
    border-radius: 50%;
}

.as-dot-orange {
    width: 8px;
    height: 8px;
    background: #FF6900;
    border-radius: 50%;
}

/* Incremental AI Strategy Section */
.as-incremental-section {
    width: 100%;
    background: #F8FAFC;
    padding: 80px 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 120px;
}

.as-incremental-container {
    width: 100%;
    max-width: 1500px;
}

.as-incremental-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.as-incremental-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.as-incremental-pill {
    height: 40px;
    padding: 0 24px;
    background: linear-gradient(332deg, rgba(71, 117, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.as-incremental-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.2;
}

.as-incremental-box {
    align-self: stretch;
    padding: 40px;
    border-radius: 20px;
    outline: 1px solid #929CFF;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-incremental-row {
    align-self: stretch;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.as-incremental-intro {
    width: 451px;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.as-incremental-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.as-incremental-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.as-incremental-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-incremental-check-bg {
    width: 20px;
    height: 20px;
    background: #929CFF;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-incremental-check-inner {
    width: 12px;
    height: 12px;
    position: relative;
}

.as-incremental-check-mark {
    width: 8px;
    height: 5.5px;
    position: absolute;
    left: 2px;
    top: 3px;
    outline: 1px solid #F7F9FB;
}

.as-incremental-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.as-incremental-item-title {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.as-incremental-item-desc {
    color: #64758B;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.as-incremental-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 20px;
}

.as-final-assets-section {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    display: inline-flex;
}

.as-final-assets-header {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: flex;
}

.as-final-assets-pill {
    height: 40px;
    padding-left: 24px;
    padding-right: 24px;
    background: linear-gradient(332deg, rgba(71.26, 116.86, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.as-final-assets-pill-text {
    color: white;
    font-size: 16px;
    font-family: Inter;
    font-weight: 400;
    line-height: 22.40px;
    word-wrap: break-word;
}

.as-final-assets-title {
    align-self: stretch;
    color: black;
    font-size: 60px;
    font-family: Inter;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
    word-wrap: break-word;
}

.as-final-assets-title span.blue-accent {
    color: #4775FF;
}

.as-final-assets-subtitle {
    align-self: stretch;
    color: black;
    font-size: 18px;
    font-family: Inter;
    font-weight: 400;
    line-height: 25.20px;
    word-wrap: break-word;
}

.as-final-assets-footer {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: black;
    font-size: 24px;
    font-family: Inter;
    font-weight: 500;
    line-height: 33.60px;
    word-wrap: break-word;
}

.as-final-assets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    margin: 40px 0;
}

.as-final-assets-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-final-assets-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Manager Approval Workflows */
.as-mgmt-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
}

.as-mgmt-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.as-mgmt-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.as-mgmt-pill {
    height: 40px;
    padding-left: 24px;
    padding-right: 24px;
    background: linear-gradient(332deg, rgba(71.26, 116.86, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-mgmt-pill-text {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.as-mgmt-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.as-mgmt-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.as-mgmt-grid {
    align-self: stretch;
    overflow: hidden;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.as-mgmt-col {
    flex: 1 1 0;
    align-self: stretch;
    padding: 32px;
    overflow: hidden;
    border-right: 1px #E2E8F0 solid;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
}

.as-mgmt-col:last-child {
    border-right: none;
}

.as-mgmt-col-title {
    align-self: stretch;
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.as-mgmt-checklist {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
}

.as-mgmt-item {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.as-mgmt-check-box {
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.as-mgmt-check-bg {
    width: 24px;
    height: 24px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
}

.as-mgmt-check-mark {
    width: 8.96px;
    height: 6.91px;
    position: relative;
    background: #202026;
}

.as-mgmt-item-text {
    flex: 1 1 0;
    color: black;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.as-mgmt-icon-check {
    font-size: 24px;
    color: #4775FF;
    flex-shrink: 0;
}

/* Organizational Learning */
.as-org-section {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.as-org-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.as-org-title {
    width: 770px;
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.as-org-card {
    align-self: stretch;
    min-width: 200px;
    padding: 40px;
    overflow: hidden;
    border-radius: 20px;
    outline: 1px #929CFF solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.as-org-content {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.as-org-intro {
    width: 451px;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.as-org-list {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.as-org-item {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.as-org-icon-arrow {
    font-size: 24px;
    color: #6466F1;
    flex-shrink: 0;
}

.as-org-item-text {
    flex: 1 1 0;
    color: #64758B;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.as-org-footer {
    width: 1133px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Deal Intelligence Page */
.di-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.di-hero-content {
    align-self: stretch;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    display: flex;
}

.di-hero-text-box {
    align-self: stretch;
    border-radius: 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex;
    text-align: center;
}

.di-hero-title {
    max-width: 1124px;
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
    margin-bottom: 0;
}

.di-hero-title span.blue-accent {
    color: #4775FF;
}

.di-hero-subtitle {
    max-width: 1156px;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.di-hero-cta-wrapper {
    align-self: stretch;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
    margin-top: 4px;
}

.di-hero-visual {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
}

.di-hero-image {
    width: 100%;
    max-width: 1152px;
    height: auto;
    border-radius: 12px;
}

/* Deal Intelligence - The Problem Section */
.di-problem-section {
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 80px;
}

.di-problem-header {
    align-self: stretch;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.di-problem-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.di-problem-pill {
    height: 40px;
    padding: 0 24px;
    background: #94A3B8;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.di-problem-pill-text {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.di-problem-title {
    width: 1268px;
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.2;
}

.di-problem-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.di-problem-quote {
    align-self: stretch;
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
}

.di-problem-quote.gray {
    color: #64758B;
}

.di-problem-resolution {
    align-self: stretch;
    color: #4775FF;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.2;
}

/* Conversation Intelligence Page Styles */
.conversation-intelligence-page {
    background: #EAECFF;
}

.ci-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ci-hero-content {
    align-self: stretch;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    display: flex;
}

.ci-hero-text-box {
    align-self: stretch;
    border-radius: 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex;
    text-align: center;
}

.ci-hero-title {
    max-width: 1124px;
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
    margin-bottom: 0;
}

.ci-hero-title span.blue-accent {
    color: #4775FF;
}

.ci-hero-subtitle {
    max-width: 1156px;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-hero-cta-wrapper {
    align-self: stretch;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
    margin-top: 4px;
}

.ci-hero-visual {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-hero-image {
    width: 100%;
    max-width: 1152px;
    height: auto;
    border-radius: 12px;
}

/* Problem Section */
.ci-problem-section {
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 80px;
}

.ci-problem-header {
    align-self: stretch;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ci-problem-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ci-problem-pill {
    height: 40px;
    padding: 0 24px;
    background: #94A3B8;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-problem-pill-text {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.ci-problem-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.2;
}

.ci-problem-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ci-problem-quote {
    align-self: stretch;
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
}

.ci-problem-quote.gray {
    color: #64758B;
}

.ci-problem-resolution {
    align-self: stretch;
    color: #4775FF;
    font-size: 80px;
    font-weight: 400;
    line-height: 80px;
}

/* What You Get Features Section */
.ci-features-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ci-features-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ci-features-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ci-features-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ci-features-title span.blue-accent {
    color: #4775FF;
}

.ci-features-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-features-list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}

.ci-feature-row {
    align-self: stretch;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.ci-feature-row.reverse {
    flex-direction: row-reverse;
}

.ci-feature-text-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.ci-feature-item-title {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.ci-feature-item-desc {
    color: #64758B;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.ci-feature-visual-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-feature-card-wrapper {
    width: 100%;
    max-width: 800px;
    height: 400px;
    background: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-feature-card-wrapper.border-blue {
    border: 1px solid #80B0FF;
}

.ci-feature-card-wrapper.border-purple {
    border: 1px solid #929CFF;
}

.ci-feature-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Connected to Action Section */
.ci-action-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ci-action-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ci-action-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ci-action-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ci-action-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-action-content {
    width: 100%;
    max-width: 1200px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ci-action-text-list {
    padding: 32px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ci-action-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ci-action-icon-box {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.ci-action-item-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-action-visual {
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8FAFC;
}

.ci-action-img {
    width: 100%;
    max-width: 1136px;
    height: auto;
}

.ci-action-footer {
    align-self: stretch;
    text-align: left;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    color: black;
}

.ci-action-footer span.blue-accent {
    color: #4775FF;
}

/* For the Whole Team Section */
.ci-team-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ci-team-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ci-team-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ci-team-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ci-team-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-team-grid {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.ci-team-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
}

.ci-team-card.full-width {
    grid-column: span 2;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.ci-team-card-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ci-team-card-text h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.ci-team-card-text p {
    color: #64758B;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.ci-team-card-visual {
    flex: 1;
    background: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid #E6EAF0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.ci-team-card-visual img {
    width: 100%;
    height: auto;
    max-height: 328px;
    object-fit: contain;
}

/* Manager Approval & Organizational Learning */
.ci-mgmt-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
}

.ci-mgmt-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.ci-mgmt-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ci-mgmt-pill {
    height: 40px;
    padding-left: 24px;
    padding-right: 24px;
    background: linear-gradient(332deg, rgba(71.26, 116.86, 255, 0.98) 0%, #A86AFF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-mgmt-pill-text {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.ci-mgmt-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ci-mgmt-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-mgmt-grid {
    align-self: stretch;
    overflow: hidden;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.ci-mgmt-col {
    flex: 1 1 0;
    align-self: stretch;
    padding: 32px;
    overflow: hidden;
    border-right: 1px #E2E8F0 solid;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
}

.ci-mgmt-col:last-child {
    border-right: none;
}

.ci-mgmt-col-title {
    align-self: stretch;
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.ci-mgmt-checklist {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
}

.ci-mgmt-item {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.ci-mgmt-check-box {
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.ci-mgmt-check-bg {
    width: 24px;
    height: 24px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
}

.ci-mgmt-item-text {
    flex: 1 1 0;
    color: black;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
}

.ci-mgmt-icon-check {
    font-size: 24px;
    color: #4775FF;
    flex-shrink: 0;
}

/* Organizational Learning */
.ci-org-section {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.ci-org-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ci-org-title {
    width: 770px;
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ci-org-card {
    align-self: stretch;
    min-width: 200px;
    padding: 40px;
    overflow: hidden;
    border-radius: 20px;
    outline: 1px #929CFF solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ci-org-content {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.ci-org-intro {
    width: 451px;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.ci-org-list {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.ci-org-item {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.ci-org-icon-arrow {
    font-size: 24px;
    color: #6466F1;
    flex-shrink: 0;
}

.ci-org-item-text {
    flex: 1 1 0;
    color: #64758B;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ci-org-footer {
    width: 100%;
    max-width: 1133px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Responsive adjustments */
@media (max-width: 991px) {

    .ci-feature-row,
    .ci-feature-row.reverse {
        flex-direction: column;
    }

    .ci-team-grid {
        grid-template-columns: 1fr;
    }

    .ci-team-card.full-width {
        grid-column: span 1;
    }

    .ci-problem-resolution {
        font-size: 50px;
        line-height: 55px;
    }

    .ci-hero-title,
    .ci-problem-title,
    .ci-features-title,
    .ci-action-title,
    .ci-team-title {
        font-size: 40px;
        line-height: 48px;
    }

    .ci-mgmt-grid {
        flex-direction: column;
    }

    .ci-mgmt-col {
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .ci-mgmt-col:last-child {
        border-bottom: none;
    }

    .ci-org-content {
        flex-direction: column;
        gap: 20px;
    }

    .ci-org-intro {
        width: 100%;
    }
}

/* Sales Leadership Page Styles */
.sales-leadership-page {
    background: #EAECFF;
}

.sl-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.sl-hero-content {
    align-self: stretch;
    padding: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.sl-hero-text-box {
    flex: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.sl-hero-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.sl-hero-title span.blue-accent {
    color: #4775FF;
}

.sl-hero-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.sl-hero-cta-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.sl-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sl-hero-image {
    width: 100%;
    max-width: 556px;
    height: auto;
    border-radius: 20px;
}

/* Care Section */
.sl-care-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.sl-care-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.sl-care-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.sl-care-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.sl-care-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.sl-care-grid {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.sl-care-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.sl-care-item {
    align-self: stretch;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.sl-care-icon {
    font-size: 32px;
    color: #929CFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-care-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.sl-care-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Pipeline Section & Visibility Section & Development Section */
.sl-pipeline-section,
.sl-visibility-section,
.sl-development-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.sl-pipeline-container,
.sl-visibility-container,
.sl-development-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.sl-pipeline-header,
.sl-visibility-header,
.sl-development-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.sl-pipeline-title,
.sl-visibility-title,
.sl-development-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.sl-visibility-title span.blue-accent,
.sl-development-title span.blue-accent {
    color: #4775FF;
}

.sl-pipeline-subtitle,
.sl-visibility-subtitle,
.sl-development-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.sl-pipeline-content,
.sl-visibility-content,
.sl-development-content {
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sl-pipeline-cards,
.sl-visibility-cards,
.sl-development-cards {
    padding: 40px;
    border-bottom: 1px solid #E2E8F0;
    border-right: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
}

.sl-pipeline-card,
.sl-visibility-card,
.sl-development-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sl-pipeline-icon-box,
.sl-visibility-icon-box,
.sl-development-icon-box {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.sl-pipeline-card-text,
.sl-visibility-card-text,
.sl-development-card-text {
    flex: 1;
    color: black;
    font-size: 18px;
    line-height: 25.20px;
}

.sl-pipeline-visual,
.sl-visibility-visual,
.sl-development-visual {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background: #F8FAFC; */
}

.sl-pipeline-img,
.sl-visibility-img,
.sl-development-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

.sl-pipeline-footer,
.sl-visibility-footer,
.sl-development-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Continuous Development Banners */
.sl-development-banners {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.sl-banner-box {
    flex: 1;
    padding: 10px 20px;
    background: linear-gradient(332deg, #F6EFFF 0%, #FAF6FF 100%);
    border-radius: 20px;
    text-align: center;
    color: #64758B;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.60px;
}

.sl-banner-separator {
    font-size: 18px;
    color: #80B0FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Features Grid */
.sl-features-grid-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.sl-features-grid-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.sl-features-grid-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.sl-features-grid-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.sl-features-grid {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.sl-feature-grid-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    background: white;
}

.sl-grid-card-img {
    width: 100%;
    max-width: 344px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: contain;
}

.sl-grid-card-text {
    width: 100%;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* Sales Leadership Responsive Adjustments */
@media (max-width: 991px) {
    .sl-hero-content {
        flex-direction: column;
    }

    .sl-care-grid {
        flex-direction: column;
    }

    .sl-pipeline-content,
    .sl-visibility-content,
    .sl-development-content {
        flex-direction: column;
    }

    .sl-pipeline-cards,
    .sl-visibility-cards,
    .sl-development-cards {
        grid-template-columns: 1fr;
    }

    .sl-features-grid {
        grid-template-columns: 1fr;
    }

    .sl-development-banners {
        flex-direction: column;
        gap: 15px;
    }

    .sl-banner-separator {
        transform: rotate(90deg);
    }

    .sl-hero-title,
    .sl-care-title,
    .sl-pipeline-title,
    .sl-visibility-title,
    .sl-development-title,
    .sl-features-grid-title {
        font-size: 40px;
        line-height: 48px;
    }
}

/* ==========================================================================
   Sales Enablement Page Styles
   ========================================================================== */

.se-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.se-hero-content {
    align-self: stretch;
    padding: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.se-hero-text-box {
    flex: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.se-hero-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.se-hero-title span.blue-accent {
    color: #4775FF;
}

.se-hero-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.se-hero-cta-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.se-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.se-hero-image {
    width: 100%;
    max-width: 556px;
    height: auto;
    border-radius: 20px;
}

/* Care Section */
.se-care-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.se-care-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.se-care-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.se-care-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.se-care-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.se-care-grid {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.se-care-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.se-care-item {
    align-self: stretch;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.se-care-icon {
    font-size: 32px;
    color: #929CFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se-care-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.se-care-challenge {
    align-self: stretch;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.se-care-challenge .challenge-label {
    color: #4775FF;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.se-care-challenge .challenge-text {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Features Alternating Section */
.se-features-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.se-features-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
}

.se-feature-block {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.se-feature-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.se-feature-block-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.se-feature-block-title span.blue-accent {
    color: #4775FF;
}

.se-feature-block-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    max-width: 900px;
}

.se-feature-card {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.se-feature-pane-left {
    width: 355px;
    flex-shrink: 0;
    padding: 20px;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.se-pane-title {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.se-pane-extra-desc {
    color: black;
    font-size: 16px;
    line-height: 22.40px;
    margin-top: 20px;
}

.se-feature-bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.se-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.se-bullet-icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.se-bullet-text {
    flex: 1;
    color: black;
    font-size: 16px;
    line-height: 22.40px;
}

.se-feature-pane-right {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.se-feature-img {
    width: 100%;
    height: auto;
    max-height: 525px;
    object-fit: contain;
    border-radius: 20px;
}

.se-feature-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* What You Get Section (5 Cards layout) */
.se-what-you-get-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.se-wyg-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.se-wyg-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.se-wyg-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.se-wyg-grid {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.se-wyg-card {
    width: calc(33.333% - 27px);
    /* default 3 items per row */
    min-width: 280px;
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    background: white;
}

.se-wyg-card-img {
    width: 100%;
    height: auto;
    max-height: 317px;
    border-radius: 12px;
    object-fit: contain;
}

.se-wyg-card-text {
    width: 100%;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    text-align: left;
}

/* Security Section */
.se-security-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.se-security-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.se-security-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
}

.se-security-grid {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
}

.se-security-card {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    padding: 20px;
    background: #F7F9FB;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.se-security-icon-box {
    width: 64px;
    height: 64px;
    background: #6466F1;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px;
}

.se-security-card-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.se-security-card-content h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
    margin: 0;
}

.se-security-card-content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    margin: 0;
}

/* Responsive Rules */
@media (max-width: 991px) {
    .se-hero-content {
        flex-direction: column;
    }

    .se-care-grid {
        flex-direction: column;
    }

    .se-feature-card {
        flex-direction: column;
    }

    .se-feature-pane-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .se-wyg-card {
        width: 100%;
    }

    .se-security-grid {
        flex-direction: column;
        align-items: center;
    }

    .se-security-card {
        width: 100%;
    }

    .se-hero-title,
    .se-care-title,
    .se-wyg-title,
    .se-feature-block-title {
        font-size: 40px;
        line-height: 48px;
    }
}

/* ==========================================================================
   RevOps Page Styles
   ========================================================================== */

.ro-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ro-hero-content {
    align-self: stretch;
    padding: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-hero-text-box {
    flex: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ro-hero-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ro-hero-title span.blue-accent {
    color: #4775FF;
}

.ro-hero-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ro-hero-cta-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.ro-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ro-hero-image {
    width: 100%;
    max-width: 556px;
    height: auto;
    border-radius: 20px;
}

/* Challenge Section */
.ro-challenge-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ro-challenge-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-challenge-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ro-challenge-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ro-challenge-content {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-challenge-text-side {
    width: 606px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ro-challenge-main-text {
    color: #64758B;
    font-size: 18px;
    line-height: 25.20px;
}

.ro-challenge-main-text span.bold-text {
    color: black;
    font-weight: 600;
}

.ro-challenge-result-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ro-result-label {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.ro-result-text {
    color: #64758B;
    font-size: 18px;
    line-height: 25.20px;
}

.ro-challenge-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ro-challenge-img {
    width: 100%;
    height: auto;
    max-width: 606px;
    border-radius: 20px;
}

/* Features Block & Alternating Section */
.ro-features-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ro-features-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
}

.ro-feature-block {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-feature-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ro-feature-block-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ro-feature-block-title span.blue-accent {
    color: #4775FF;
}

.ro-feature-block-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    max-width: 900px;
}

.ro-feature-card {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.ro-feature-pane-left {
    width: 355px;
    flex-shrink: 0;
    padding: 20px;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ro-pane-title {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.ro-feature-bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ro-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ro-bullet-icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.ro-bullet-text {
    flex: 1;
    color: black;
    font-size: 16px;
    line-height: 22.40px;
}

.ro-feature-pane-right {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.ro-feature-img {
    width: 100%;
    height: auto;
    max-height: 525px;
    object-fit: contain;
    border-radius: 20px;
}

.ro-feature-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* Grids for Cards (4-Grid Block layout) */
.ro-grid-cards {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.ro-grid-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: white;
}

.ro-grid-card-title {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.ro-grid-card-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}

.ro-grid-card-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* What You Get Section (2 Column layout) */
.ro-what-you-get-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ro-wyg-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-wyg-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ro-wyg-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.ro-wyg-grid {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.ro-wyg-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ro-wyg-item {
    align-self: stretch;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.ro-wyg-icon {
    font-size: 32px;
    color: #6466F1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ro-wyg-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* Security Section */
.ro-security-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ro-security-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.ro-security-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
}

.ro-security-grid {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
}

.ro-security-card {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    padding: 20px;
    background: #F7F9FB;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.ro-security-icon-box {
    width: 64px;
    height: 64px;
    background: #6466F1;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px;
}

.ro-security-card-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.ro-security-card-content h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
    margin: 0;
}

.ro-security-card-content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    margin: 0;
}

/* Responsive Rules */
@media (max-width: 991px) {
    .ro-hero-content {
        flex-direction: column;
    }

    .ro-challenge-content {
        flex-direction: column;
    }

    .ro-challenge-text-side {
        width: 100%;
    }

    .ro-feature-card {
        flex-direction: column;
    }

    .ro-feature-pane-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .ro-grid-cards {
        grid-template-columns: 1fr;
    }

    .ro-wyg-grid {
        flex-direction: column;
    }

    .ro-security-grid {
        flex-direction: column;
        align-items: center;
    }

    .ro-security-card {
        width: 100%;
    }

    .ro-hero-title,
    .ro-challenge-title,
    .ro-wyg-title,
    .ro-feature-block-title {}
}

/* ==========================================================================
   Marketing Page Styles
   ========================================================================== */

.mk-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mk-hero-content {
    align-self: stretch;
    padding: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-hero-text-box {
    flex: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.mk-hero-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.mk-hero-title span.blue-accent {
    color: #4775FF;
}

.mk-hero-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.mk-hero-cta-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.mk-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mk-hero-image {
    width: 100%;
    max-width: 556px;
    height: auto;
    border-radius: 20px;
}

/* Challenge Section */
.mk-challenge-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mk-challenge-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-challenge-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.mk-challenge-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.mk-challenge-content {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-challenge-text-side {
    width: 606px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mk-challenge-main-text {
    color: #64758B;
    font-size: 18px;
    line-height: 25.20px;
}

.mk-challenge-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mk-challenge-img {
    width: 100%;
    height: auto;
    max-width: 606px;
    border-radius: 20px;
}

/* Features Alternating Section */
.mk-features-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mk-features-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
}

.mk-feature-block {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-feature-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.mk-feature-block-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.mk-feature-block-title span.blue-accent {
    color: #4775FF;
}

.mk-feature-block-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    max-width: 900px;
}

/* Voice of Customer scale (2x2 Grid block) */
.mk-voc-grid {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.mk-voc-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: white;
}

.mk-voc-icon-box {
    width: 57px;
    height: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.mk-voc-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mk-voc-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.mk-voc-card-content h3 {
    color: #0F172B;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
    margin: 0;
}

.mk-voc-card-content p {
    color: #45556C;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.40px;
    margin: 0;
}

/* Standard Grids for Cards (4-Grid Block layout) */
.mk-grid-cards {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.mk-grid-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: white;
}

.mk-grid-card-title {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.mk-grid-card-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}

.mk-grid-card-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Feature Card (Bordered Box) */
.mk-feature-card {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.mk-feature-pane-left {
    width: 355px;
    flex-shrink: 0;
    padding: 20px;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.mk-pane-title {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.mk-feature-bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mk-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mk-bullet-icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.mk-bullet-text {
    flex: 1;
    color: black;
    font-size: 16px;
    line-height: 22.40px;
}

.mk-feature-pane-right {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.mk-feature-img {
    width: 100%;
    height: auto;
    max-height: 525px;
    object-fit: contain;
    border-radius: 20px;
}

.mk-feature-footer {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

/* What You Get Section (2 Column layout) */
.mk-what-you-get-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mk-wyg-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-wyg-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.mk-wyg-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.mk-wyg-grid {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.mk-wyg-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.mk-wyg-item {
    align-self: stretch;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.mk-wyg-icon {
    font-size: 32px;
    color: #6466F1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mk-wyg-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* Security Section */
.mk-security-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.mk-security-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.mk-security-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
}

.mk-security-grid {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
}

.mk-security-card {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    padding: 20px;
    background: #F7F9FB;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.mk-security-icon-box {
    width: 64px;
    height: 64px;
    background: #6466F1;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px;
}

.mk-security-card-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.mk-security-card-content h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
    margin: 0;
}

.mk-security-card-content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    margin: 0;
}

/* Responsive Rules */
@media (max-width: 991px) {
    .mk-hero-content {
        flex-direction: column;
    }

    .mk-challenge-content {
        flex-direction: column;
    }

    .mk-challenge-text-side {
        width: 100%;
    }

    .mk-voc-grid {
        grid-template-columns: 1fr;
    }

    .mk-feature-card {
        flex-direction: column;
    }

    .mk-feature-pane-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .mk-grid-cards {
        grid-template-columns: 1fr;
    }

    .mk-wyg-grid {
        flex-direction: column;
    }

    .mk-security-grid {
        flex-direction: column;
        align-items: center;
    }

    .mk-security-card {
        width: 100%;
    }

    .mk-hero-title,
    .mk-challenge-title,
    .mk-wyg-title,
    .mk-feature-block-title {
        font-size: 40px;
        line-height: 48px;
    }
}

/* ==========================================
   Research Page Styles (.rs-)
   ========================================== */
.rs-hero-wrapper {
    width: 100%;
    padding: 40px;
    background: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.rs-hero-content {
    align-self: stretch;
    padding: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.rs-hero-text-box {
    flex: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.rs-hero-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.rs-hero-title span.blue-accent {
    color: #4775FF;
}

.rs-hero-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.rs-hero-cta-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.rs-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rs-hero-image {
    width: 100%;
    max-width: 556px;
    height: auto;
    border-radius: 20px;
}

/* Challenge Section */
.rs-challenge-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.rs-challenge-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.rs-challenge-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.rs-challenge-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
    text-align: center;
}

.rs-challenge-content {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.rs-challenge-text-side {
    width: 606px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.rs-challenge-main-text {
    color: #64758B;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

.rs-challenge-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rs-challenge-img {
    width: 100%;
    max-width: 409px;
    height: auto;
}

/* Features Sections */
.rs-features-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.rs-features-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 120px;
}

.rs-feature-block {
    align-self: stretch;
    padding: 40px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.rs-feature-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.rs-feature-block-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.rs-feature-block-title span.blue-accent {
    color: #4775FF;
}

.rs-feature-block-subtitle {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* Grids for Cards */
.rs-grid-3-cards {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.rs-grid-4-cards {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.rs-grid-5-cards {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
}

.rs-grid-5-cards .rs-grid-card {
    width: calc((100% - 80px) / 3);
    flex-grow: 0;
    flex-shrink: 0;
}

.rs-grid-card {
    padding: 20px;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: white;
}

.rs-grid-card-title {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    align-self: stretch;
}

.rs-grid-card-visual {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    flex: 1;
}

.rs-grid-card-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Feature Card (Bordered Box) */
.rs-feature-card {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.rs-feature-pane-left {
    width: 355px;
    flex-shrink: 0;
    padding: 20px;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.rs-pane-title {
    color: black;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.20px;
}

.rs-feature-bullets {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rs-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rs-bullet-icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(332deg, #E9EDFF 3%, #C8CEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: black;
    font-size: 12px;
}

.rs-bullet-text {
    flex: 1;
    color: black;
    font-size: 16px;
    line-height: 22.40px;
}

.rs-feature-pane-right {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.rs-feature-img {
    width: 100%;
    height: auto;
    max-height: 525px;
    object-fit: contain;
    border-radius: 20px;
}

.rs-feature-footer {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
    text-align: center;
}

.rs-feature-footer.text-primary {
    color: #4775FF;
}

.rs-feature-footer.font-semibold {
    font-weight: 600;
}

/* Business ROI Card Style */
.rs-roi-card {
    align-self: stretch;
    padding: 40px;
    border-radius: 20px;
    outline: 1px #929CFF solid;
    outline-offset: -1px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.rs-roi-card-inner {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.rs-roi-card-title {
    width: 451px;
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
}

.rs-roi-bullets {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.rs-roi-bullet {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.rs-roi-bullet-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6466F1;
}

.rs-roi-bullet-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* What You Get Section */
.rs-what-you-get-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.rs-wyg-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 80px;
}

.rs-wyg-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.rs-wyg-title {
    color: black;
    font-size: 60px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 72px;
}

.rs-wyg-grid {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.rs-wyg-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.rs-wyg-item {
    align-self: stretch;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.rs-wyg-icon {
    font-size: 32px;
    color: #6466F1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-wyg-text {
    flex: 1;
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
}

/* Security Section */
.rs-security-section {
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.rs-security-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.rs-security-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
}

.rs-security-grid {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
}

.rs-security-card {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    padding: 20px;
    background: #F7F9FB;
    border-radius: 20px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.rs-security-icon-box {
    width: 64px;
    height: 64px;
    background: #6466F1;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.10), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px;
}

.rs-security-card-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.rs-security-card-content h3 {
    color: black;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.60px;
    margin: 0;
}

.rs-security-card-content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.20px;
    margin: 0;
}

/* Responsive Rules for Research Page */
@media (max-width: 991px) {
    .rs-hero-content {
        flex-direction: column;
        padding: 20px;
    }

    .rs-challenge-content {
        flex-direction: column;
    }

    .rs-challenge-text-side {
        width: 100%;
    }

    .rs-grid-3-cards,
    .rs-grid-4-cards {
        grid-template-columns: 1fr;
    }

    .rs-grid-5-cards {
        flex-direction: column;
        align-items: center;
    }

    .rs-grid-5-cards .rs-grid-card {
        width: 100%;
    }

    .rs-feature-card {
        flex-direction: column;
    }

    .rs-feature-pane-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .rs-roi-card-inner {
        flex-direction: column;
        gap: 20px;
    }

    .rs-roi-card-title {
        width: 100%;
    }

    .rs-wyg-grid {
        flex-direction: column;
    }

    .rs-security-grid {
        flex-direction: column;
        align-items: center;
    }

    .rs-security-card {
        width: 100%;
    }

    .rs-hero-title,
    .rs-challenge-title,
    .rs-wyg-title,
    .rs-feature-block-title {
        font-size: 40px;
        line-height: 48px;
    }

    .rs-feature-footer {
        font-size: 18px;
        line-height: 25px;
    }
}