/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&family=SF+Pro+Display:wght@400;500;600&display=swap');

/* QR Code Modal Styles */
.qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.qr-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.qr-modal-content {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qr-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-modal-close:hover {
    color: #333;
}

.qr-modal-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.qr-modal-header p {
    margin: 0 0 2rem 0;
    color: #666;
    font-size: 0.95rem;
}

.qr-code-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 16px;
    display: inline-block;
}

.qr-code-container img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 8px;
}

.qr-modal-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.qr-modal-footer p {
    margin: 0 0 1rem 0;
    color: #666;
    font-size: 0.9rem;
}

.qr-continue-btn {
    display: inline-block;
    background: linear-gradient(135deg, #000 0%, #333 100%);
    color: white !important;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.qr-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* QR modal is controlled by JavaScript device detection - no CSS hiding */

/* General Styles */
:root {
    color-scheme: light;
}

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

html, body {
    background-color: #ffffff;
    overscroll-behavior: none; /* Prevent overscroll/bounce effect */
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: #000000;
    background-color: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none; /* Additional overscroll prevention for vertical scrolling */
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 11;
    padding-top: 0;
    margin-top: 326px; /* Adjusted to match new hero height of 350px */
    background-color: #ffffff;
    border-radius: 24px 24px 0 0;
    transition: margin-top 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: margin-top;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
}

/* Fix special page container margin */
body.research-page .container,
body.team-page .container,
body.demo-page .container,
body.contact-page .container,
body.blog-page .container,
body.content-page .container {
    margin-top: 0; /* Reset margin for these pages */
}

/* Added rule to handle hidden hero */
.hero-background.hidden + .container {
    margin-top: 0; /* No margin if hero is hidden */
}

/* Content pages should have no extra space at the top */
.content-page .container {
    margin-top: 0 !important;
}

/* Hero Background */
.hero-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 350px; /* Reduced by 30% from 500px */
    background-color: #000;
    z-index: 10;
    /* overflow: hidden; Remove this to allow container curve to overlap */
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform, opacity;
    transform: translateY(0);
}

/* Non-home pages should not display the hero background */
body:not(.home-page) .hero-background,
.content-page .hero-background {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%; /* Center horizontally */
    height: 100%; /* Fill container height */
    width: 100%; /* Maintain aspect ratio - changed to 100% */
    transform: translate(-50%, -50%); /* Center precisely */
    object-fit: cover; /* Ensure it covers the height */
}

.hero-background.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.hero-logo {
    position: absolute;
    top: 2rem;
    left: 3rem;
    z-index: 20;
    display: flex;
    align-items: center;
}

.hero-logo .logo-icon {
    width: 48px;
    height: 48px;
    filter: none;
    color: #ffffff;
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease;
    background-image: url('/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    margin-right: 1rem;
}

.hero-logo .company-name {
    display: block;
    color: #ffffff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

.hero-logo .symphony-text {
    color: white; /* Changed to blue */
    font-size: 3rem;
    letter-spacing: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Lexend Deca', sans-serif;
}

.hipaa-text {
    position: static;
    bottom: auto;
    right: auto;
    color: #ffffff;
    z-index: 30;
}

.compliance-section {
    position: absolute;
    bottom: 3rem;
    right: 2rem;
    color: #ffffff;
    z-index: 30;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: auto;
}

.compliance-row {
    display: flex;
    align-items: center;
    width: auto;
    margin-bottom: 0.5rem;
    justify-content: flex-end;
}

.compliance-row:last-child {
    margin-bottom: 0;
}

.lock-icon, .hipaa-logo {
    width: 24px;
    height: 1.25rem;
    margin-right: 0.4rem;
    color: #ffffff;
    flex: 0 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iso-text, .hipaa-text {
    font-size: 1.0rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Lexend Deca', sans-serif;
    display: block;
}

.hipaa-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.hero-background.hidden .hero-logo .logo-icon {
    opacity: 0;
    visibility: hidden;
}

/* Sidebar Styles */
.sidebar {
    width: 240px;
    padding: 3rem;
    position: fixed;
    height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    z-index: 100;
    justify-content: flex-start;
    border-right: none;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform, padding-top;
    max-height: calc(100vh - 200px); /* Added max-height to prevent overflow into footer */
}

/* Home page sidebar animation */
.home-page .sidebar {
    animation: fadeInSlideUp 1s ease-out forwards;
}

/* Fixed sidebar style for non-home pages */
body:not(.home-page) .sidebar {
    padding-top: 3rem;
    position: fixed;
    top: 0;
    transition: none;
    animation: none;
}

/* Only apply extra top padding on desktop when scrolled */
.sidebar.nav-hidden {
    padding-top: 3rem;
}

/* Adjust padding when hero is hidden or on specific pages */
.hero-background.hidden + .container .sidebar,
body.research-page .container .sidebar,
body.team-page .container .sidebar,
body.demo-page .container .sidebar,
body.contact-page .container .sidebar,
body.blog-page .container .sidebar {
    padding-top: 3rem;
}

.sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: calc(100vh - 300px); /* Fixed height that won't reach footer */
    max-height: 100%; /* Ensures it doesn't exceed sidebar height */
    background-color: #eaeaea;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    pointer-events: none;
    display: none; /* Hide the border completely */
}

/* Footer-specific adjustments */
body.footer-in-view .sidebar::after {
    height: calc(100vh - 400px); /* Shorter when footer in view */
    opacity: 0 !important; /* Hide line when footer in view */
}

/* Show sidebar border only when hero is hidden (desktop) */
.hero-background.hidden + .container .sidebar::after {
    opacity: 1;
    transition-delay: 0.1s;
}

.logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    position: relative;
    z-index: 101;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.logo-icon {
    width: 32px;
    height: 32px;
    background-color: transparent;
    margin-bottom: 0;
    position: relative;
    z-index: 102;
    background-image: url('/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.company-name {
    display: none;
}

.logo-text p {
    font-weight: 500;
    line-height: 1.2;
}

.nav-item {
    color: #666;
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: block;
    transition: color 0.2s;
}

.nav-item:hover {
    color: #000;
}

.nav-item.active {
    color: #000;
    font-weight: 600;
}

/* Main Content Styles */
main {
    margin-left: 240px;
    padding: 2rem 6rem;
    flex: 1;
    max-width: 1000px;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: padding-top;
}

/* Adjust padding when hero is hidden or on specific pages */
.hero-background.hidden + .container main,
body.research-page .container main,
body.team-page .container main,
body.demo-page .container main,
body.contact-page .container main,
body.blog-page .container main {
    padding-top: 3rem; /* Initial padding for these pages */
}

/* Adjust padding on home page after scroll */
.hero-background.hidden + .container main {
    padding-top: 15rem; /* Increased padding after scroll */
}

/* Prevent padding jump on specific pages when hero might get .hidden class */
body.research-page .hero-background.hidden + .container main,
body.team-page .hero-background.hidden + .container main,
body.demo-page .hero-background.hidden + .container main,
body.contact-page .hero-background.hidden + .container main,
body.blog-page .hero-background.hidden + .container main {
    padding-top: 3rem; /* Keep initial padding */
}

.hero {
    padding: 4rem 0 0 0;
    position: relative;
    z-index: 2;
    color: #000;
    margin-top: 0;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

h1 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

h2 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.intro-text {
    font-size: 1.25rem;
    max-width: 650px;
    margin-bottom: 1rem;
}

.divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 3rem 0;
}

/* Goal Section Styles */
.goal {
    margin-bottom: 4rem;
    position: relative;
}

.goal-number {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 1rem;
}

.goal p {
    font-size: 1.25rem;
    max-width: 650px;
    margin-bottom: 1.5rem;
}

.demo-link {
    text-decoration: underline;
}

/* Audio Visualization */
.audio-visualization {
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.waveform-container {
    padding: 2rem;
    position: relative;
}

.label {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.waveform {
    height: 80px;
    margin-bottom: 1rem;
    background-repeat: repeat-x;
    background-position: center;
}

.human-waveform {
    background-image: linear-gradient(to bottom, transparent 40%, #ffd700 40%, #ffd700 60%, transparent 60%);
    opacity: 0.6;
}

.sesame-waveform, .proton-waveform {
    background-image: linear-gradient(to bottom, transparent 40%, #4CAF50 40%, #4CAF50 60%, transparent 60%);
    opacity: 0.6;
}

.timeline {
    height: 20px;
    border-top: 1px solid #ccc;
    position: relative;
}

.timeline:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, #ccc, #ccc 10px, transparent 10px, transparent 50px);
}

.audio-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-top: 1px solid #ddd;
}

.arrow-icon {
    font-size: 1.5rem;
}

/* Image Styles */
.image-container {
    margin: 2rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.full-width-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Join Section */
.join-section {
    padding: 1rem 0 3rem;
}

.team-link {
    text-decoration: underline;
}

.team-images {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}

.team-image {
    width: calc(50% - 0.5rem);
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.careers-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background-color: #f5f5f5;
    border-radius: 0.5rem;
    margin-top: 2rem;
    transition: background-color 0.2s;
}

.careers-button:hover {
    background-color: #eee;
}

/* Footer Styles */
footer {
    margin-top: 3rem;
    background-color: #000;
    background-image: url('../background/background.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
    z-index: 1;
    width: 100%;
    clear: both;
    border-radius: 0 0 0 0;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background-color: #fff;
    border-radius: 0 0 24px 24px;
}

.footer-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.footer-logo {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.footer-logo .logo-icon {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 32px;
    height: 32px;
    margin-right: 1rem;
    margin-bottom: 0;
    background-image: url('/logo.svg');
    background-size: contain;
    filter: none;
}

.footer-nav {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.50rem;
}

.x-link, .linkedin-link {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: rgba(255,255,255,0.2);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.x-link:hover, .linkedin-link:hover {
    background-color: rgba(255,255,255,0.3);
}

.footer-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
}

.footer-legal {
    display: flex;
    gap: 1rem;
}

/* Research Paper Section Styles */
.paper-section {
    padding-top: 0;
}

.paper-section p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.term {
    font-weight: 600;
}

/* Research Content Styles */
.research-content {
    padding-top: 0;
    max-width: 800px;
}

.research-content h2:first-child {
    margin-top: 0;
}

.research-content p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.research-content .term {
    font-weight: 600;
    color: #000;
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(0,0,0,0.06) 60%, rgba(0,0,0,0.06) 100%);
    padding: 0 0.2em;
    transition: background 0.3s ease;
}

.research-content .term:hover {
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.1) 100%);
}

.research-content ol {
    margin: 2rem 0 2rem 1.5rem;
    padding-left: 1rem;
}

.research-content li {
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.research-content h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        padding: 1rem !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;
        z-index: 100;
        border-radius: 24px 24px 0 0;
        animation: none; /* Disable animation on mobile/tablet */
    }
    
    /* All non-home pages should have consistent padding in tablet view */
    body:not(.home-page) .sidebar {
        padding: 1rem !important;
        position: sticky;
    }
    
    /* Remove top padding transition for smaller screens */
    .sidebar.nav-hidden {
        padding-top: 1rem !important;
    }
    
    /* Reset padding when scrolled on mobile/tablet */
    .hero-background.hidden + .container .sidebar {
        padding-top: 1rem !important;
    }
    
    .logo {
        margin-bottom: 0;
        margin-right: 1rem;
        transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .logo-icon {
        margin-bottom: 0;
        width: 28px;
        height: 28px;
    }

    nav {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }

    .nav-item {
        margin-bottom: 0;
        font-size: 0.9rem;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        line-height: 1.2;
    }

    main {
        margin-left: 0;
        padding: 2rem;
        width: 100%;
        padding-top: 2rem;
        background-color: #fff;
    }
    
    /* Ensure content is below the fixed navbar on content pages */
    .content-page main {
        padding-top: 2rem !important;
    }

    .research-content {
        max-width: 100%;
    }

    .sidebar::after {
        display: none;
    }

    /* Reduce section spacing for mid-range viewports */
    section {
        margin-bottom: 3rem; /* Reduced from potential inheritance */
    }

    .highlight-quote {
        margin: 3rem 0; /* Reduced */
    }

    .highlight-quote.wide {
        margin: 3rem 0; /* Reduced */
    }

    .how-it-works {
        margin-bottom: 4rem; /* Reduced */
    }

    .integrations {
        margin-top: 4rem; /* Reduced */
        margin-bottom: 4rem; /* Reduced */
    }

    .use-cases {
        margin-top: 4rem; /* Reduced */
        margin-bottom: 4rem; /* Reduced */
    }

    .results {
        margin-top: 4rem; /* Reduced */
        margin-bottom: 4rem; /* Reduced */
    }

    /* Position step number within the padding for mid-range viewports */
    .work-steps::before,
    .work-steps-progress {
        left: calc(2.2rem / 2); /* Align with center of the number */
    }

    /* Convert case-cards from grid to vertical list for mid-range viewports */
    .case-cards {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }

    .case-card {
        width: 100%;
        margin-bottom: 0;
    }

    .content-page .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Added rule for stat-cards stacking earlier */
    .stat-cards {
        grid-template-columns: 1fr; /* Single column */
        gap: 1.5rem;
    }

    .case-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .case-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background-color: #f8f9fa;
        border-radius: 10px;
        margin-bottom: 0.75rem;
    }

    .case-card:hover .case-icon svg {
        transform: scale(1.1);
    }

    .case-card h3 {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 1.4rem;
        margin-bottom: 0.25rem;
        font-weight: 600;
        color: #111;
        padding: 0 0.25rem;
    }

    .case-card p {
        color: #555;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0;
        padding: 0 0.25rem;
    }

    .case-benefits {
        list-style: none;
        padding: 0;
        margin: 0;
        border-top: 1px solid #eaeaea;
        padding-top: 1rem;
    }

    .case-benefits li {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        padding-left: 1.5rem;
        position: relative;
    }

    .case-benefits li:before {
        content: "→";
        position: absolute;
        left: 0;
        color: #00b070;
        font-weight: 600;
    }

    .case-benefits li:last-child {
        margin-bottom: 0;
    }

    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .stat-card {
        background: linear-gradient(135deg, #000 0%, #333 100%);
        border-radius: 16px;
        padding: 2.5rem 2rem;
        color: white;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .stat-card:nth-child(1) .stat-number {
        background: linear-gradient(135deg, #FFFFFF 0%, #432B72 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card:nth-child(2) .stat-number {
        background: linear-gradient(135deg, #75A7C4 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-card:nth-child(3) .stat-number {
        background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-number {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        font-family: 'Lexend Deca', sans-serif;
    }

    .stat-card p {
        color: #E0E0E0;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .how-it-works h2, 
    .integrations h2, 
    .use-cases h2, 
    .results h2 {
        margin-bottom: 2rem;
        position: relative;
        display: inline-block;
        padding-bottom: 0.8rem;
    }

    .how-it-works h2::after, 
    .integrations h2::after, 
    .use-cases h2::after, 
    .results h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: #000;
    }

    /* Remove black bar from the integrations disjointed quote */
    .integrations.highlight-quote.wide.disjointed-quote h2::after {
        display: none;
    }

    .how-it-works {
        margin-bottom: 6rem;
    }

    .integrations {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .use-cases {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .results {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    /* Responsive adjustments for Symphony sections */
    @media (max-width: 768px) {
        .work-step {
            width: 100%;
            margin-bottom: 2rem;
            padding: 0;
        }

        .step-number {
            /* left: 1rem; <-- Remove this line */
        }

        .work-steps::before {
            display: none;
        }

        .work-steps-progress {
            display: none;
        }

        .integration-logos {
            justify-content: center;
        }

        .integration-logo {
            width: calc(50% - 1rem);
            margin: 0.5rem;
        }

        .highlight-quote {
            padding: 1.5rem 0.5rem;
            margin: 2.5rem 0; /* Increased equal margins */
        }

        .highlight-quote.wide {
            padding: 1.5rem 0.75rem;
            margin: 2.5rem 0; /* Increased equal margins */
        }

        /* Style specific for the physicians quote */
        section.highlight-quote.wide:not(.disjointed-quote) {
            margin: 2.5rem 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .highlight-quote.wide h2 {
            font-size: 1.8rem; /* Match section heading size */
        }

        .stat-number {
            font-size: 3rem;
        }

        .case-card, .stat-card {
            width: 100%;
            margin-bottom: 1.5rem;
        }

        .case-cards, .stat-cards {
            flex-direction: column;
            gap: 0;
        }

        section {
            padding: 1.5rem 0; /* Reduced padding */
            margin-bottom: 2rem; /* Adjusted from above */
        }

        /* Reduce specific section spacing */
        .how-it-works {
            margin-bottom: 3rem; /* Reduced */
            margin-top: 2.5rem; /* Match the highlight quote margin */
        }

        .integrations {
            margin-top: 3rem; /* Reduced */
            margin-bottom: 3rem; /* Reduced */
        }

        .use-cases {
            margin-top: 3rem; /* Reduced */
            margin-bottom: 3rem; /* Reduced */
        }

        .results {
            margin-top: 3rem; /* Reduced */
            margin-bottom: 3rem; /* Reduced */
        }

        .case-cards {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            grid-template-columns: repeat(2, 1fr); /* 2 columns */
        }

        .case-card {
            width: 100%;
            margin-bottom: 0;
        }
    }

    /* Blog Section Styles */
    .blog-section {
        padding-bottom: 4rem; /* Add some bottom padding */
    }

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .blog-card {
        border: 1px solid #eaeaea;
        border-radius: 8px;
        padding: 1.5rem;
        background-color: #fff;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
        position: relative; /* For potential absolute positioning inside */
        overflow: hidden; /* Ensures content stays within bounds */
    }

    .blog-card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
    }

    .blog-card h3 {
        margin-top: 0;
        font-size: 1.2rem;
        font-family: 'Lexend Deca', sans-serif;
        margin-bottom: 0.5rem; /* Spacing below title */
    }

    .blog-card p {
        font-size: 0.95rem;
        color: #555;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .blog-card a {
        text-decoration: none;
        color: #007bff; /* Using a standard blue for links */
        font-weight: bold;
        font-size: 0.9rem;
        display: inline-block; /* Allows margin */
        margin-top: auto; /* Push to bottom if needed */
    }

    .blog-card a:hover {
        text-decoration: underline;
    }

    .blog-card .date {
        font-size: 0.8rem;
        color: #888;
        margin-bottom: 0.5rem;
        display: block;
    }

    /* New rule for paragraph-based highlight quotes */
    .highlight-quote-text {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 2.5rem; /* Base size */
        font-weight: 600;
        line-height: 1.3;
        color: #333;
        margin: 0 auto;
        max-width: 800px; /* Default max-width */
        position: relative;
        text-align: center; /* Centering text */
    }

    /* Adjust max-width for disjointed quotes */
    .highlight-quote.disjointed-quote .highlight-quote-text {
        max-width: 650px;
    }

    /* Ensure text within the disjointed quote box is white */
    .highlight-quote.disjointed-quote .highlight-quote-text {
        color: white;
    }

    /* Apply gradient styles directly to the span within the new class */
    .highlight-quote-text .gradient-text {
        background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        display: inline;
    }

    /* Media query adjustments */
    @media (max-width: 768px) {
        .highlight-quote-text {
            font-size: 1.8rem; /* Mobile size */
        }
        /* Add any other mobile adjustments needed */
    }

    /* Additional content page fixes */
    .content-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .content-page .sidebar {
        top: 0 !important;
        z-index: 100 !important;
    }

    .content-page main {
        padding-top: 2rem !important;
    }

    .content-page .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Specific fixes for blog pages to ensure content is below header */
    .content-page .hero {
        margin-top: 1rem;
    }

    @media (max-width: 1024px) {
        .content-page .sidebar {
            position: sticky !important;
            top: 0 !important;
        }
        
        .content-page .hero {
            margin-top: 0.5rem;
        }
    }

    @media (max-width: 768px) {
        .content-page .hero {
            margin-top: 0;
            padding-top: 0.5rem;
        }
    }

    /* Blog pages specific styles */
    body.blog-page {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.blog-page .container {
        margin-top: 0 !important; /* Ensure no margin for blog pages */
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.blog-page main {
        opacity: 1 !important;
        visibility: visible !important;
        padding-top: 2rem !important; /* Consistent padding */
    }

    /* Fix special page container margin */
    body.research-page .container,
    body.team-page .container,
    body.demo-page .container,
    body.contact-page .container {
        margin-top: 0; /* Reset margin for these pages */
    }

    .ehr-carousel {
        margin: 2.5rem 0;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 2rem 0;
        background-color: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    }

    .ehr-carousel-track {
        display: flex;
        align-items: center;
        animation: scroll 40s linear infinite;
        width: fit-content;
    }

    .ehr-logo {
        height: 90px;
        margin: 0 1.5rem;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .ehr-logo:hover {
        transform: scale(1.05);
    }

    @media (max-width: 768px) {
        .ehr-carousel {
            padding: 1.5rem 0;
        }
        
        .ehr-carousel-track {
            animation: scroll 30s linear infinite;
        }
        
        .ehr-logo {
            height: 60px;
            margin: 0 1rem;
        }
    }

    /* Integrations section styling */
    .integrations {
        margin: 5rem 0;
        text-align: left;
    }

    .integrations .section-heading {
        margin-bottom: 2rem;
        text-align: left;
    }

    .carousel-logo {
        height: 70px;
        margin: 0 1rem;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .ehr-logo {
        height: 90px;
        margin: 0 1.5rem;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    @media (max-width: 768px) {
        .ehr-carousel {
            padding: 1.5rem 0;
        }
        
        .ehr-carousel-track {
            animation: scroll 30s linear infinite;
        }
        
        .ehr-logo {
            height: 60px;
            margin: 0 1rem;
        }
        
        .carousel-logo {
            height: 50px;
            margin: 0 0.75rem;
        }
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    .team-images {
        flex-direction: column;
    }
    
    .team-image {
        width: 100%;
    }

    .section-heading, 
    .how-it-works h2, 
    .integrations h2, 
    .use-cases h2, 
    .results h2 {
        font-size: 1.8rem; /* Larger section headings */
    }
    
    .work-step h3 {
        font-size: 1.4rem; /* Smaller step headings */
    }
    
    .highlight-quote {
        padding: 1.5rem 0.5rem; 
        margin: 2.5rem 0; /* Increased equal margins */
    }
    
    .highlight-quote.wide {
        padding: 1.5rem 0.75rem;
        margin: 2.5rem 0; /* Increased equal margins */
    }
    
    /* Style specific for the physicians quote */
    section.highlight-quote.wide:not(.disjointed-quote) {
        margin: 2.5rem 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .highlight-quote.wide h2 {
        font-size: 1.8rem; /* Match section heading size */
    }

    .hero-background {
        height: 210px; /* Reduced by 30% from 300px */
    }

    .hero-video {
        width: 100%;
    }

    .hero-logo {
        left: 1rem;
        top: 1rem;
    }

    .hero-logo .symphony-text {
        font-size: 1.6rem;
        letter-spacing: 0.15rem;
    }

    .hipaa-text {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .compliance-section {
        bottom: 0.8rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: auto;
    }
    
    .compliance-row {
        display: flex;
        align-items: center;
        width: auto;
        margin-bottom: 0.3rem;
        justify-content: flex-end;
    }
    
    .compliance-row:last-child {
        margin-bottom: 0;
    }
    
    .lock-icon, .hipaa-logo {
        width: 24px;
        height: 0.9rem;
        margin-right: 0.3rem;
        flex: 0 0 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .iso-text, .hipaa-text {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.8);
        position: static;
        bottom: auto;
        right: auto;
    }
    
    .container {
        flex-direction: column;
        margin-top: 210px; /* Updated to match new mobile hero height */
    }
    
    /* Reset margin for content pages */
    .content-page .container {
        margin-top: 0 !important;
    }

    .sidebar {
        display: flex;
        position: sticky;
        top: 0;
        width: 100%;
        padding: 1rem !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;
        z-index: 100;
        order: -1;
        border-radius: 24px 24px 0 0;
        animation: none; /* Disable animation on mobile */
    }
    
    /* Ensure all pages have consistent padding in mobile view */
    body:not(.home-page) .sidebar {
        padding: 1rem !important;
        position: sticky;
    }
    
    /* All content pages should have fixed padding */
    .content-page .sidebar {
        padding: 1rem !important;
    }
    
    /* Ensure no extra padding on mobile */
    .sidebar.nav-hidden, 
    .hero-background.hidden + .container .sidebar {
        padding-top: 1rem !important;
    }
    
    .logo {
        margin-right: 0.5rem;
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }

    nav {
        gap: 0.8rem;
    }

    .nav-item {
        font-size: 0.85rem;
        padding: 0.3rem 0;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        line-height: 1.2;
    }

    main {
        margin-left: 0;
        padding: 1.5rem 1rem;
        width: 100%;
        padding-top: 1.5rem;
        background-color: #fff;
    }
    
    /* Ensure content is below the fixed navbar on content pages */
    .content-page main {
        padding-top: 1.5rem !important;
        margin-top: 0 !important;
    }

    .hero {
        padding: 0;
        margin-top: 0;
    }

    h1 {
        margin-bottom: 1.5rem;
        margin-top: 0;
    }

    .intro-text {
        font-size: 1.1rem;
    }

    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 3rem 1rem;
    }

    .footer-logo {
        margin-bottom: 1.5rem;
        justify-content: center;
    }

    .footer-nav {
        margin: 1.5rem 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem;
        width: 100%;
    }

    .footer-nav a {
        margin: 0;
        padding: 0.5rem;
    }

    .social-links {
        margin: 1rem 0 1.5rem;
        justify-content: flex-start;
    }

    .footer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
        text-align: left;
    }

    .footer-info p {
        margin-bottom: 0.5rem;
    }

    .footer-legal {
        margin-top: 0.5rem;
        justify-content: flex-start;
        width: 100%;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .integration-logo {
        width: 100%;
        margin: 0.5rem 0;
    }

    .case-cards {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .case-card {
        width: 100%;
        margin-bottom: 0;
    }

    .stat-cards {
        /* grid-template-columns: 1fr; Ensure no grid override */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .stat-card {
        width: 100%;
        margin-bottom: 0;
        padding: 2rem 1.5rem;
    }

    .stat-number {
        font-size: 2.8rem;
    }

    .work-step {
        width: 100%;
        margin-bottom: 2rem;
        padding: 0;
    }

    .step-number {
        /* left: 1rem; <-- Remove this line */
    }

    .work-steps::before {
        display: none;
    }

    .work-steps-progress {
        display: none;
    }

    .integration-logos {
        justify-content: center;
    }

    .integration-logo {
        width: calc(50% - 1rem);
        margin: 0.5rem;
    }

    .highlight-quote {
        padding: 1.5rem 0.5rem;
        margin: 2.5rem 0; /* Increased equal margins */
    }

    .highlight-quote.wide {
        padding: 1.5rem 0.75rem;
        margin: 2.5rem 0; /* Increased equal margins */
    }

    /* Style specific for the physicians quote */
    section.highlight-quote.wide:not(.disjointed-quote) {
        margin: 2.5rem 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .highlight-quote.wide h2 {
        font-size: 1.8rem; /* Match section heading size */
    }

    .stat-number {
        font-size: 3rem;
    }

    .case-card, .stat-card {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .case-cards, .stat-cards {
        flex-direction: column;
        gap: 0;
    }

    section {
        padding: 1.5rem 0; /* Reduced padding */
        margin-bottom: 2rem; /* Adjusted from above */
    }

    /* Reduce specific section spacing */
    .how-it-works {
        margin-bottom: 3rem; /* Reduced */
        margin-top: 2.5rem; /* Match the highlight quote margin */
    }

    .integrations {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .use-cases {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .results {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .how-it-works h2::after,
    .integrations h2::after,
    .use-cases h2::after,
    .results h2::after {
        width: 40px;
        height: 2px;
    }

    /* Adjust the Solution section that comes before the quote */
    .goal:nth-of-type(2) {
        margin-bottom: 1.5rem;
    }
    
    /* The highlight quote with assembly-line workers text */
    section.highlight-quote.wide:not(.disjointed-quote) {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    /* How It Works section that follows the quote */
    .how-it-works {
        margin-top: 1.5rem;
    }

    /* Target the second goal section (Solution) with the humaninsm text */
    .goal + .goal {
        margin-bottom: 1rem !important;
    }
    
    /* Target the last paragraph in the Solution section */
    .goal + .goal p:last-child {
        margin-bottom: 0.5rem !important;
    }
    
    /* Target ONLY the specific physicians quote */
    .goal + .goal + .highlight-quote {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Target the How It Works section specifically */
    .goal + .goal + .highlight-quote + .how-it-works {
        margin-top: 0.5rem !important;
    }
    
    /* Target the heading in How It Works */
    .goal + .goal + .highlight-quote + .how-it-works h2 {
        margin-top: 1rem !important;
    }

    /* Apply these fixes with higher specificity for all content pages */
    body.team-page .sidebar,
    body.blog-page .sidebar,
    body.content-page .sidebar,
    body:not(.home-page) .sidebar {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
    }
}

/* Adjust container margin on specific pages (mobile) */
body.research-page .container,
body.team-page .container,
body.demo-page .container,
body.contact-page .container,
body.blog-page .container {
    margin-top: 0; /* Keep margin reset */
}

/* Sesame Research Page */
.research-content h2 {
    font-family: 'Lexend Deca', sans-serif;
    margin-top: 3rem;
}

.research-content .term {
    font-weight: 600;
}

.research-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.research-content li {
    margin-bottom: 0.5rem;
}

/* Hide hero background *entirely* on research, team, demo, and contact pages */
body.research-page .hero-background,
body.team-page .hero-background,
body.demo-page .hero-background,
body.contact-page .hero-background,
body.blog-page .hero-background {
    display: none !important;
}

/* Remove the rules that just hid the video and set background color */
/* 
body.research-page .hero-background .hero-video,
body.team-page .hero-background .hero-video,
body.demo-page .hero-background .hero-video,
body.contact-page .hero-background .hero-video {
    display: none !important;
}

body.research-page .hero-background,
body.team-page .hero-background,
body.demo-page .hero-background,
body.contact-page .hero-background {
    background-color: #000;
} 
*/

/* Symphony Specific Styles */
.logo-carousel {
    margin: 2rem 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo-carousel-track {
    display: flex;
    align-items: center;
    animation: scroll 30s linear infinite;
    width: fit-content;
}

.carousel-logo {
    height: 70px;
    margin: 0 1rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.carousel-logo:hover {
    transform: scale(1.05);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .logo-carousel {
        padding: 1rem 0;
    }
    
    .carousel-logo {
        height: 50px;
        margin: 0 0.75rem;
    }
    
    .logo-carousel-track {
        animation: scroll 20s linear infinite;
    }
}

.highlight-quote {
    text-align: left;
    padding: 3rem 0;
    position: relative;
    margin: 5rem 0;
}

.highlight-quote h3 {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    font-style: normal;
    position: relative;
    z-index: 1;
}

.highlight-quote.wide {
    margin: 4rem 0;
    color: #000;
    border-left: none;
    text-align: left;
}

.highlight-quote.wide h2 {
    font-size: 2.2rem;
    text-align: left;
    max-width: 800px;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Special styling for the "disjointed encounters" quote */
.highlight-quote.wide.disjointed-quote {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    padding: 4rem 3rem;
    color: white;
    border-radius: 12px;
    text-align: center;
}

.highlight-quote.wide.disjointed-quote h2 {
    text-align: center;
    margin: 0 auto;
}

.highlight-quote.wide::before {
    display: none;
}

.highlight-quote.wide h2 .gradient-text {
    background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

.work-steps {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 2rem 0;
    position: relative;
}

.work-steps::before {
    content: '';
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    width: 2px;
    height: calc(100% - 2.2rem);
    background-color: #eaeaea;
    transform: translateX(-50%);
    z-index: 0;
}

.work-step {
    position: relative;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.work-step.animate {
    opacity: 1;
    transform: translateY(0);
}

.work-step:nth-child(2) {
    transition-delay: 0.2s;
}

.work-step:nth-child(3) {
    transition-delay: 0.4s;
}

.work-step:nth-child(4) {
    transition-delay: 0.6s;
}

.step-number {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 600;
    background-color: #fff;
    z-index: 1;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.work-step.viewed .step-number {
    background-color: #00b070;
    color: white;
    border-color: #00b070;
}

.work-steps-progress {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    width: 2px;
    height: 0;
    background-color: #00b070;
    transform: translateX(-50%);
    z-index: 0;
    transition: height 0.5s ease;
}

.work-step h3 {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.step-content {
    flex: 1;
}

.step-video-container {
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.step-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background-color: #eee;
}

.step-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.integration-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.integration-logo {
    transition: transform 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
    height: 100px;
}

.integration-logo.modmed-logo img {
    max-width: 80%;
    height: auto;
    object-fit: contain;
    max-height: 60px;
}

.integration-logo:hover {
    transform: translateY(-2px);
}

.case-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.case-card .case-icon {
    background: none;
    box-shadow: none;
}

.case-card:nth-child(1) .case-icon svg {
    color: #432B72;
    background: linear-gradient(135deg, #432B72 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-card:nth-child(2) .case-icon svg {
    color: #915FA3;
    background: linear-gradient(135deg, #915FA3 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-card:nth-child(3) .case-icon svg {
    color: #75A7C4;
    background: linear-gradient(135deg, #75A7C4 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-card:nth-child(4) .case-icon svg {
    color: #EAB66C;
    background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2px;
}

.case-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 200px;
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.case-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.case-card:hover .case-icon svg {
    transform: scale(1.1);
}

.case-card h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: #111;
    padding: 0 0.25rem;
}

.case-card p {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 0 0.25rem;
}

.case-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eaeaea;
    padding-top: 1rem;
}

.case-benefits li {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.case-benefits li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00b070;
    font-weight: 600;
}

.case-benefits li:last-child {
    margin-bottom: 0;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    color: white;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-card:nth-child(1) .stat-number {
    background: linear-gradient(135deg, #FFFFFF 0%, #432B72 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card:nth-child(2) .stat-number {
    background: linear-gradient(135deg, #75A7C4 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card:nth-child(3) .stat-number {
    background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Lexend Deca', sans-serif;
}

.stat-card p {
    color: #E0E0E0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
}

.how-it-works h2, 
.integrations h2, 
.use-cases h2, 
.results h2 {
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.8rem;
}

.how-it-works h2::after, 
.integrations h2::after, 
.use-cases h2::after, 
.results h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #000;
}

/* Remove black bar from the integrations disjointed quote */
.integrations.highlight-quote.wide.disjointed-quote h2::after {
    display: none;
}

.how-it-works {
    margin-bottom: 6rem;
}

.integrations {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.use-cases {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.results {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

/* Responsive adjustments for Symphony sections */
@media (max-width: 768px) {
    .work-step {
        width: 100%;
        margin-bottom: 2rem;
        padding: 0;
    }

    .step-number {
        /* left: 1rem; <-- Remove this line */
    }

    .work-steps::before {
        display: none;
    }

    .work-steps-progress {
        display: none;
    }

    .integration-logos {
        justify-content: center;
    }

    .integration-logo {
        width: calc(50% - 1rem);
        margin: 0.5rem;
    }

    .highlight-quote {
        padding: 1.5rem 0.5rem;
        margin: 2.5rem 0; /* Increased equal margins */
    }

    .highlight-quote.wide {
        padding: 1.5rem 0.75rem;
        margin: 2.5rem 0; /* Increased equal margins */
    }

    /* Style specific for the physicians quote */
    section.highlight-quote.wide:not(.disjointed-quote) {
        margin: 2.5rem 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .highlight-quote.wide h2 {
        font-size: 1.8rem; /* Match section heading size */
    }

    .stat-number {
        font-size: 3rem;
    }

    .case-card, .stat-card {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .case-cards, .stat-cards {
        flex-direction: column;
        gap: 0;
    }

    section {
        padding: 1.5rem 0; /* Reduced padding */
        margin-bottom: 2rem; /* Adjusted from above */
    }

    /* Reduce specific section spacing */
    .how-it-works {
        margin-bottom: 3rem; /* Reduced */
        margin-top: 2.5rem; /* Match the highlight quote margin */
    }

    .integrations {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .use-cases {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .results {
        margin-top: 3rem; /* Reduced */
        margin-bottom: 3rem; /* Reduced */
    }

    .case-cards {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }

    .case-card {
        width: 100%;
        margin-bottom: 0;
    }

    /* Added rule for stat-cards stacking earlier */
    .stat-cards {
        grid-template-columns: 1fr; /* Single column */
        gap: 1.5rem;
    }
}

/* Blog Section Styles */
.blog-section {
    padding-bottom: 4rem; /* Add some bottom padding */
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.blog-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative; /* For potential absolute positioning inside */
    overflow: hidden; /* Ensures content stays within bounds */
}

.blog-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.blog-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    font-family: 'Lexend Deca', sans-serif;
    margin-bottom: 0.5rem; /* Spacing below title */
}

.blog-card p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.blog-card a {
    text-decoration: none;
    color: #007bff; /* Using a standard blue for links */
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block; /* Allows margin */
    margin-top: auto; /* Push to bottom if needed */
}

.blog-card a:hover {
    text-decoration: underline;
}

.blog-card .date {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
    display: block;
}

/* New rule for paragraph-based highlight quotes */
.highlight-quote-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 2.5rem; /* Base size */
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    margin: 0 auto;
    max-width: 800px; /* Default max-width */
    position: relative;
    text-align: center; /* Centering text */
}

/* Adjust max-width for disjointed quotes */
.highlight-quote.disjointed-quote .highlight-quote-text {
    max-width: 650px;
}

/* Ensure text within the disjointed quote box is white */
.highlight-quote.disjointed-quote .highlight-quote-text {
    color: white;
}

/* Apply gradient styles directly to the span within the new class */
.highlight-quote-text .gradient-text {
    background: linear-gradient(135deg, #EAB66C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: inline;
}

/* Media query adjustments */
@media (max-width: 768px) {
    .highlight-quote-text {
        font-size: 1.8rem; /* Mobile size */
    }
    /* Add any other mobile adjustments needed */
}

/* Additional content page fixes */
.content-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.content-page .sidebar {
    top: 0 !important;
    z-index: 100 !important;
}

.content-page main {
    padding-top: 2rem !important;
}

.content-page .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specific fixes for blog pages to ensure content is below header */
.content-page .hero {
    margin-top: 1rem;
}

@media (max-width: 1024px) {
    .content-page .sidebar {
        position: sticky !important;
        top: 0 !important;
    }
    
    .content-page .hero {
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .content-page .hero {
        margin-top: 0;
        padding-top: 0.5rem;
    }
}

/* Blog pages specific styles */
body.blog-page {
    opacity: 1 !important;
    visibility: visible !important;
}

body.blog-page .container {
    margin-top: 0 !important; /* Ensure no margin for blog pages */
    opacity: 1 !important;
    visibility: visible !important;
}

body.blog-page main {
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 2rem !important; /* Consistent padding */
}

/* Fix special page container margin */
body.research-page .container,
body.team-page .container,
body.demo-page .container,
body.contact-page .container {
    margin-top: 0; /* Reset margin for these pages */
}

.ehr-carousel {
    margin: 2.5rem 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.ehr-carousel-track {
    display: flex;
    align-items: center;
    animation: scroll 40s linear infinite;
    width: fit-content;
}

.ehr-logo {
    height: 90px;
    margin: 0 1.5rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ehr-logo:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .ehr-carousel {
        padding: 1.5rem 0;
    }
    
    .ehr-carousel-track {
        animation: scroll 30s linear infinite;
    }
    
    .ehr-logo {
        height: 60px;
        margin: 0 1rem;
    }
}

/* Integrations section styling */
.integrations {
    margin: 5rem 0;
    text-align: left;
}

.integrations .section-heading {
    margin-bottom: 2rem;
    text-align: left;
}

.carousel-logo {
    height: 70px;
    margin: 0 1rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ehr-logo {
    height: 90px;
    margin: 0 1.5rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .ehr-carousel {
        padding: 1.5rem 0;
    }
    
    .ehr-carousel-track {
        animation: scroll 30s linear infinite;
    }
    
    .ehr-logo {
        height: 60px;
        margin: 0 1rem;
    }
    
    .carousel-logo {
        height: 50px;
        margin: 0 0.75rem;
    }
}

/* ---------------------------------- */
/* Responsive tweak: narrow desktop   */
/* ---------------------------------- */
/*
   When the viewport is still in the desktop range but getting narrower,
   we want the gap between the sidebar and the main content to shrink
   instead of letting the content overflow past the right edge.  
   This query activates above the tablet breakpoint (1024px) and below
   1440px. It reduces the side-padding and lets the content area itself
   shrink so the total width (sidebar + padding + content) always fits
   inside the viewport.  
*/
@media (min-width: 1025px) and (max-width: 1439px) {
    main {
        /* tighter side padding */
        padding-left: 2rem;
        padding-right: 2rem;
        /* shrink the allowable content width so we never overflow */
        max-width: calc(100vw - 240px - 4rem); /* viewport − sidebar − padding */
    }
}