/* Global Styles */
    /* latin-ext */
    
    /* latin */
    
    /* cyrillic-ext */
    
    /* cyrillic */
    
    /* greek-ext */
    
    /* greek */
    
    /* hebrew */
    
    /* math */
    
    /* symbols */
    
    /* vietnamese */
    
    /* latin-ext */
    
    /* latin */
    
    /* cyrillic-ext */
    
    /* cyrillic */
    
    /* greek-ext */
    
    /* greek */
    
    /* hebrew */
    
    /* math */
    
    /* symbols */
    
    /* vietnamese */
    
    /* latin-ext */
    
    /* latin */
    
    /* cyrillic-ext */
    
    /* cyrillic */
    
    /* greek-ext */
    
    /* greek */
    
    /* hebrew */
    
    /* math */
    
    /* symbols */
    
    /* vietnamese */
    
    /* latin-ext */
    
    /* latin */
    
    /* devanagari */
    
    /* latin-ext */
    
    /* latin */
    
    /* devanagari */
    
    /* latin-ext */
    
    /* latin */
    
    /* devanagari */
    
    /* latin-ext */
    
    /* latin */
    
    /* devanagari */
    
    /* latin-ext */
    
    /* latin */
    

    body {
        font-family: "Poppins", sans-serif;
        color: #0f0f0f;
        background-color: #fff;
        margin: 0;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    .container {
        max-width: 1440px; /* Keeping a reasonable max-width for large screens */
        margin: 0 auto;
        position: relative;
        padding-left: 45px;
        padding-right: 45px;
        box-sizing: border-box;
    }
    .container2 {
        max-width: 1640px;
    }
    body .webToAppHeader .header {
        width: auto;
        max-width: 1640px;
        padding-left: 45px;
        padding-right: 45px;
        box-sizing: border-box;
    }
    .mainBody1 {
        max-width: 1700px;
        padding: 0 30px;
        box-sizing: border-box;
    }
    
    /* Small screen optimization - Better margins for smaller displays */
    @media (max-width: 1024px) and (min-width: 769px) {
        .container {
            padding-left: 30px;
            padding-right: 30px;
        }
        body .webToAppHeader .header {
            padding-left: 30px;
            padding-right: 30px;
        }
        .mainBody1 {
            padding: 0 20px;
        }
    }
    
    @media (max-width: 900px) and (min-width: 769px) {
        .container {
            padding-left: 25px;
            padding-right: 25px;
        }
        body .webToAppHeader .header {
            padding-left: 25px;
            padding-right: 25px;
        }
    }
    /* --- Screen 1 --- */
    .screen-1 {
        width: 100%;
        padding-top: 60px;
        position: relative;
        padding-bottom: 80px;
    }

    /* Header */
    .top-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 40px;
        position: relative;
        z-index: 10;
    }

    /* Banner replacement */
    .has_bg {
        background-image: url("/assets/c7cef9e85947702e6e0b.webp") !important;
        background-size: cover; /* Changed from 100% auto to cover for better fit */
        background-repeat: no-repeat;
        background-position: center;
        position: relative; /* Ensure absolute children position relative to this */
        min-height: 900px; /* Give it a height for desktop */
        display: flex; /* Flex to manage children if needed, or block */
        flex-direction: column;
        background-color: transparent;
    }
    .mobile-menu-icon {
        display: none;
    }

    .main-header {
        max-width: 50%;
        position: relative;
        z-index: 5;
        flex: 1;
        margin-right: 40px;
    }

    /* Hide Learn More on Desktop */
    .learn-more-link {
        display: none;
    }

    .main-header h1 {
        font-family: "Poppins", sans-serif;
        font-weight: 600; /* SemiBold */
        font-size: 48px;
        line-height: 1.2;
        color: #0f0f0f;
        margin-bottom: 24px;
        margin-top: 0;
    }

    .main-header .subtitle {
        font-family: "Poppins", sans-serif;
        font-weight: 400; /* Regular */
        font-size: 32px;
        color: #0f0f0f;
        margin: 0;
    }

    /* Charts */
    .charts-wrapper {
        display: flex;
        position: relative;
        right: auto;
        top: auto;
        width: auto;
        z-index: 10;
        gap: 0;
        box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
        border-radius: 24px;
        flex-shrink: 0;
    }

    .chart-card {
        width: 331px;
        height: 386px;
        padding: 32px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .chart-card.hsv-1 {
        background-color: #eef1f8;
        border-radius: 24px;
    }

    .chart-card.hsv-2 {
        background-color: #4281f5;
        color: #fff;
        border-radius: 24px;
    }

    .chart-header {
        margin-bottom: 24px;
    }

    .chart-header .label {
        display: block;
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 4px;
        opacity: 1;
    }

    .chart-card.hsv-1 .chart-header .label {
        color: #0f0f0f;
    }

    .chart-card.hsv-2 .chart-header .label {
        color: #ffffff;
    }

    .chart-header h3 {
        font-family: "Poppins", sans-serif;
        font-weight: 600; /* SemiBold */
        font-size: 40px;
        margin: 0;
        line-height: 1.2;
    }

    .chart-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
        justify-content: flex-start;
    }

    .chart-row {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-size: 16px;
        height: 48px;
    }

    .chart-row .age {
        width: 45px;
        text-align: left;
    }

    .chart-row .value {
        width: 50px;
        text-align: left;
        padding-left: 8px;
    }

    .bar-track {
        flex: 1;
        height: 48px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    /* Track Colors */
    .hsv-1 .bar-track {
        background-color: #f3f7ff; /* White track for HSV-1 */
    }

    .hsv-2 .bar-track {
        background-color: rgba(
                255,
                255,
                255,
                0.2
        ); /* Semi-transparent white for HSV-2 */
    }

    /* Bar Styles */
    .bar {
        height: 100%;
        border-radius: 8px;
        position: relative;
    }

    /* HSV-1 Bars (Orange with Stripes) */
    .hsv-1 .bar {
        background-color: #ff7a3c;
        background-image: repeating-linear-gradient(
                150deg,
                #ff7a3c,
                #ff7a3c 6px,
                #ff4800 1px,
                #ff4800 8px
        );
    }
    /* HSV-2 Bars (White/Transparent Stripes) */
    .hsv-2 .bar {
        background-color: #ffffff;
        background-image: repeating-linear-gradient(
                150deg,
                #fff,
                #fff 6px,
                #c6d1e6 1px,
                #c6d1e6 8px
        );
    }

    .hsv-2 .chart-row .age,
    .hsv-2 .chart-row .value {
        color: #fff;
    }

    /* Middle Section (Banner) */
    .middle-section {
        position: absolute; /* Changed to absolute to overlay on banner */
        top: 450px; /* Position it correctly over the blue area */
        right: 40px; /* Align to right */
        width: 450px;
        height: auto;
        margin-top: 0;
        display: block;
        z-index: 10;
    }

    /* The Blue Background Shape */
    .blue-background-card {
        width: 100%;
        height: auto;
        display: block;
        background: transparent; /* Rely on banner image or inner styling */
    }

    /* Cutout effect simulation - simplified as CSS shape */
    /* To perfectly match the design, we'd need the exact SVG path.
       For "100%还原" without SVG asset, we overlap the image carefully. */

    .people-image-wrapper {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        width: 55%;
        max-width: 800px;
    }

    .people-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
    }

    .risk-factors {
        width: 450px;
        color: #fff;
        position: relative;
        z-index: 3;
    }

    .risk-factors h3 {
        font-family: "Poppins", sans-serif;
        font-weight: 700; /* Bold */
        font-size: 36px;
        margin-bottom: 30px;
    }

    .risk-factors ul {
        list-style: none;
        padding: 0;
    }

    .risk-factors ul li {
        font-family: "Poppins", sans-serif;
        font-weight: 400; /* Regular */
        font-size: 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    .risk-factors ul li::before {
        content: "•";
        margin-right: 15px;
        font-size: 30px;
        line-height: 0;
        position: relative;
        top: 2px;
    }

    /* Symptoms Section */
    .symptoms-section {
        margin-top: 80px;
        display: flex;
        gap: 60px;
    }

    .symptoms-section h2 {
        font-family: "Poppins", sans-serif;
        font-weight: 600; /* SemiBold */
        font-size: 40px;
        line-height: 1.2;
        flex: 0 0 250px;
        margin: 0;
    }

    .symptoms-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .symptom-card {
        background-color: #eef1f8; /* From DSL screen 2 bg, assuming consistency */
        border-radius: 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .symptom-card .icon {
        width: 48px;
        height: 48px;
    }

    .symptom-card .icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .symptom-card p {
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        margin: 0;
    }

    /* --- Screen 2 --- */
    .screen-2 {
        background-color: #f9f9f9; /* paint_69:04418 */
        padding: 100px 0;
    }

    .screen-2 .section-title {
        text-align: center;
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-bottom: 80px;
        margin-top: 0;
    }

    .types-wrapper {
        display: flex;
        flex-direction: column;
        gap: 42px; /* 467 - (125+300) approx */
        align-items: center;
    }

    .type-card {
        width: 100%;
        max-width: 1400px;
        height: 300px;
        background-color: #f1f6ff; /* paint_69:04316 */
        border-radius: 53px; /* Fixed border-radius */
        display: flex;
        overflow: hidden;
        position: relative;
    }

    .card-image {
        width: 453px;
        height: 300px;
        position: relative;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hsv-1-bg {
        background-image: url("/assets/c195e9b0f7f97746d6e5.webp");
    }

    .hsv-2-bg {
        background-image: url("/assets/8780910474c5753a24e0.webp");
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none; /* Hide img tag since we use background */
    }

    .image-overlay-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #ffffff;
        text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); /* effect_69:04601 */
        white-space: nowrap;
    }

    .card-content {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 80px;
    }

    .card-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .card-content ul li {
        font-family: "Open Sans", sans-serif;
        font-size: 32px;
        color: #0f0f0f; /* paint_69:01117 */
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        line-height: 1.3;
    }

    .card-content ul li:last-child {
        margin-bottom: 0;
    }

    /* Custom Checkmark from DSL path */
    .card-content ul li::before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 20px;
        margin-right: 24px;
        /* SVG Data from DSL: M28.9... */
        /* Simplified checkmark shape */
        background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.37366 9.54636L9.96017 16.7114L27.085 -0.41346' stroke='%2350A5FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex-shrink: 0;
    }

    /* --- Screen 3: Who Should Get Tested --- */
    .screen-3 {
        background-color: #fff;
        padding: 80px 0;
    }

    .screen-3 .section-title {
        text-align: center;
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .screen-3 .section-subtitle {
        text-align: center;
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #3d3d3d;
        margin-bottom: 60px;
        margin-top: 0;
    }

    .test-reasons-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto 100px;
    }

    .reason-card {
        background-color: #f1f6ff;
        border-radius: 24px; /* From DSL path or standard */
        padding: 30px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .reason-card .icon {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .reason-card .icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .reason-card p {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        margin: 0;
        line-height: 1.4;
    }

    /* Test Types Section */
    .test-types-section {
        max-width: 1400px;
        margin: 0 auto;
    }

    .test-types-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-top: 60px;
    }

    .test-type-card {
        background-color: #fff;
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0px 4px 25px 0px rgba(21, 96, 175, 0.1); /* effect_69:04263 */
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .test-type-card h3 {
        font-family: "Open Sans", sans-serif;
        font-weight: 700; /* Bold */
        font-size: 42px;
        color: #061e3b;
        margin: 0 0 30px 0;
        text-align: center;
    }

    .test-type-card .badge {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(270deg, #e340eb 0%, #769bff 100%);
        color: #fff;
        padding: 8px 20px;
        border-radius: 20px;
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-weight: 600;
    }

    .test-type-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .test-type-card ul li {
        font-family: "Open Sans", sans-serif;
        font-size: 20px; /* Adjusted slightly for fit */
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start;
        line-height: 1.5;
    }

    /* Custom Checkmark for test types */
    .test-type-card ul li::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 16px;
        margin-top: 4px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex-shrink: 0;
        background-image: url("/assets/30b8b28cc33b2646c36e.webp");
    }

    /* Custom X icon for negative items */
    .test-type-card ul li.negative::before {
        background-image: url("/assets/98dc431bcaba98b626c0.webp");
    }

    /* --- Screen 4: When & Where to Get Tested --- */
    .screen-4 {
        background-color: #f9f9f9;
        padding: 100px 0;
    }

    .screen-4 .content-wrapper {
        display: flex;
        justify-content: space-between;
        gap: 60px;
        align-items: flex-start;
    }

    .screen-4 .left-content {
        flex: 0 0 800px;
    }

    .screen-4 .section-title {
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-bottom: 40px;
        margin-top: 0;
    }

    .blue-bullet-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .blue-bullet-list li {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        margin-bottom: 30px;
        padding-left: 36px;
        position: relative;
        line-height: 1.4;
    }

    .blue-bullet-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 12px;
        height: 12px;
        background-color: #50a5ff;
        border-radius: 50%;
    }

    .when-to-test {
        margin-bottom: 80px;
    }

    .locations-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .location-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .location-item .icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .location-item .icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .location-item span {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        line-height: 1.3;
    }

    .right-image {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .image-container {
        width: 100%;
        max-width: 617px;
        border-radius: 54px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .fourth-screen-bg {
        background-image: url("/assets/a864433a025d3dff6771.webp");
        height: 600px;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

    /* --- Screen 5: Test Results --- */
    .screen-5 {
        padding: 100px 0;
        background-color: #fff;
    }

    .results-section {
        margin-bottom: 100px;
    }
    .results-section .section-title {
        text-align: center;
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .results-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .result-card {
        background-color: #fff;
        border-radius: 24px;
        padding: 40px 30px;
        box-shadow: 0px 4px 25px 0px rgba(21, 96, 175, 0.1);
    }

    .result-card .icon-wrapper {
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }

    .result-card .icon-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .result-card h3 {
        display: inline-block;
        vertical-align: middle;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 38px;
        color: #214f87;
        margin: 0;
    }

    .result-card p {
        margin-top: 30px;
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        line-height: 1.4;
    }

    /* Diagnosed Section */
    .diagnosed-section .section-title {
        text-align: center;
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .diagnosed-section .section-subtitle {
        text-align: center;
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #3d3d3d;
        max-width: 1200px;
        margin: 0 auto 60px;
    }

    .action-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .action-card {
        background-color: #f1f6ff;
        border-radius: 24px;
        height: 130px;
        display: flex;
        align-items: center;
        padding: 0 30px;
    }

    .action-card.center-text {
        justify-content: center;
        text-align: center;
    }

    .action-card.left-text {
        justify-content: flex-start;
        text-align: left;
        padding-left: 50px; /* Indent for left-aligned items */
    }

    .action-card p {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        margin: 0;
        line-height: 1.3;
    }

    /* --- Screen 6: Support Community --- */
    .screen-6 {
        padding: 80px 0;
        background-color: #fff;
    }

    .support-card {
        background:
                linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
                rgba(244, 244, 244, 0.1);
        box-shadow: 0px 4px 25px 0px rgba(21, 96, 175, 0.1);
        border-radius: 53px; /* As per DSL */
        padding: 60px;
        text-align: center;
        position: relative;
        overflow: hidden;
        /* Adding a subtle border/background to make it visible against white if needed,
             but DSL suggests gradient/shadow is main style.
             Let's ensure it has dimensions or fits container */
    }

    .support-card .section-title {
        font-family: "Archivo Black", sans-serif;
        font-size: 60px;
        color: #4281f5;
        margin-bottom: 24px;
        margin-top: 0;
    }

    .support-card .section-description {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #3d3d3d;
        line-height: 1.5;
        max-width: 1246px;
        margin: 0 auto 60px;
        text-align: left; /* DSL says left aligned for description text */
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-bottom: 80px;
    }

    .feature-item {
        background-color: #f1f6ff;
        border-radius: 24px;
        padding: 32px 24px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        text-align: center;
        transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
    }

    .feature-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(66, 129, 245, 0.1);
    }

    .feature-item .icon-box {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-item .icon-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .feature-item span {
        font-family: "Open Sans", sans-serif;
        font-size: 24px;
        color: #0f0f0f;
        text-align: center;
        line-height: 1.3;
    }

    .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        background-color: #50a5ff;
        border-radius: 30px;
        padding: 13px 50px;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .cta-button:hover {
        background-color: #4281f5;
    }

    .cta-button span {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-size: 24px;
        color: #ffffff;
    }

    .cta-button svg {
        width: 24px;
        height: 24px;
    }

    .mobile-hero-image {
        display: none;
    }
    .pc-charts-wrapper {
        display: flex;
    }
    .mobile-charts-wrapper {
        display: none;
    }

    .learn-more .feature-item {
        background-color: #50a5ff;
    }
    .learn-more .features-grid {
        margin-top: 6rem;
    }
    .learn-more .feature-item span {
        color: white;
    }
    /* Responsive */
    /* Small screen optimization for better spacing */
    @media (max-width: 1024px) and (min-width: 769px) {
        .main-header h1 {
            font-size: 38px;
        }
        .main-header .subtitle {
            font-size: 24px;
        }
        .chart-card {
            width: 240px;
            height: 290px;
            padding: 22px 16px;
        }
        .chart-header h3 {
            font-size: 28px;
        }
        .chart-header .label {
            font-size: 13px;
        }
        .chart-row {
            font-size: 12px;
            height: 32px;
        }
        .bar-track {
            height: 32px;
        }
        .section-title {
            font-size: 28px;
        }
        .card-content ul li {
            font-size: 18px;
        }
    }
    
    @media (max-width: 900px) and (min-width: 769px) {
        .main-header h1 {
            font-size: 32px;
        }
        .main-header .subtitle {
            font-size: 20px;
        }
        .chart-card {
            width: 210px;
            height: 260px;
            padding: 18px 14px;
        }
        .chart-header h3 {
            font-size: 24px;
        }
        .chart-header .label {
            font-size: 12px;
        }
        .chart-row {
            font-size: 11px;
            height: 28px;
            gap: 5px;
        }
        .bar-track {
            height: 28px;
        }
        .chart-body {
            gap: 7px;
        }
        .section-title {
            font-size: 26px;
        }
        .card-content {
            padding: 30px;
        }
        .card-content ul li {
            font-size: 17px;
        }
    }
    
    @media (max-width: 1600px) {
        .main-header h1 {
            font-size: 48px;
        }
        .main-header .subtitle {
            font-size: 28px;
        }
    }
    @media (max-width: 1400px) {
        .main-header h1 {
            font-size: 36px;
        }
        .main-header .subtitle {
            font-size: 22px;
        }
        .middle-section {
            top: auto;
            bottom: 1px;
        }
        .chart-card {
            width: 260px;
            height: 310px;
            padding: 24px 18px;
        }
        .chart-header h3 {
            font-size: 30px;
        }
        .chart-header .label {
            font-size: 13px;
        }
        .chart-header {
            margin-bottom: 16px;
        }
        .chart-row {
            font-size: 13px;
            height: 36px;
            gap: 8px;
        }
        .bar-track {
            height: 36px;
        }
        .chart-body {
            gap: 8px;
        }
    }
    @media (max-width: 1200px) {
        .has_bg {
            min-height: 700px;
        }
        .main-header h1 {
            font-size: 30px;
        }
        .main-header .subtitle {
            font-size: 20px;
        }
        .chart-card {
            width: 220px;
            height: 270px;
            padding: 20px 14px;
        }
        .chart-header h3 {
            font-size: 26px;
        }
        .chart-header .label {
            font-size: 12px;
        }
        .chart-header {
            margin-bottom: 12px;
        }
        .chart-row {
            font-size: 12px;
            height: 30px;
            gap: 6px;
        }
        .bar-track {
            height: 30px;
        }
        .chart-body {
            gap: 6px;
        }
        .people-image-wrapper {
            width: 50%;
        }
        .blue-background-card {
            width: 90%;
            padding-right: 60px;
        }
        .type-card {
            height: auto;
            flex-direction: column;
            border-radius: 30px;
        }
        .card-image {
            width: 100%;
            height: 250px;
        }
        .card-content {
            padding: 40px;
        }
        .card-content ul li {
            font-size: 20px;
        }

        /* Screen 4 Responsive 1200px */
        .screen-4 .content-wrapper {
            flex-direction: column-reverse;
            gap: 40px;
        }
        .screen-4 .left-content {
            flex: auto;
            width: 100%;
            max-width: none;
        }
        .right-image {
            width: 100%;
            justify-content: center;
        }
    }
    /* Mobile Responsive - Screen Width 375px Target */
    @media (max-width: 768px) {
        body {
            background-color: #f9f9f9;
        }

        .container,
        .container2 {
            max-width: 100%;
            width: auto;
            padding: 0 16px;
        }
        .learn-more-link {
            display: block;
            color: #fff;
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            margin-top: 3rem;
        }

        /* Screen 1 */
        .screen-1 {
            padding-top: 0;
            padding-bottom: 40px;
            background-color: #f9f9f9;
        }

        /* Screen 2 */
        .type-card {
            max-width: 100%;
            border-radius: 24px;
            background-color: #f1f6ff;
            padding-bottom: 24px;
            height: auto;
            background: #fff;
            overflow: hidden;
            flex-direction: column;
        }

        .card-image {
            width: 100%;
            height: 140px;
            border-radius: 24px 24px 0 0;
        }

        .hsv-1-bg {
            background-image: none;
        }

        .hsv-2-bg {
            background-image: none;
        }

        .image-overlay-text {
            font-size: 32px; /* Smaller font for mobile */
        }

        .card-content {
            padding: 24px;
        }

        .card-content ul li {
            font-size: 16px;
            margin-bottom: 16px;
        }

        .card-content ul li::before {
            width: 20px;
            height: 16px;
            margin-right: 12px;
        }

        /* Top Section (Blue Header + Image + Chart) */
        .top-section {
            background-color: #4281f5;
            flex-direction: column;
            margin-bottom: 0;
            padding: 60px 16px 20px 16px;
            position: relative;
            width: 100vw;
            margin-left: -16px;
            box-sizing: border-box;
            align-items: center;
            background-image: none !important;
            background-repeat: no-repeat;
            background-position: 45% 42%;
            background-size: 147%;
            height: calc(100dvh - 112px);
            min-height: 500px;
        }

        /* Banner replacement - Hide Desktop */
        .has_bg {
            background: none !important;
            min-height: auto;
            display: block;
            margin: 0;
            padding: 0; 
        }

        /* Mobile Menu Icon */
        .mobile-menu-icon {
            display: flex;
            width: 24px;
            height: 18px;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            top: 20px;
            right: 16px;
            z-index: 20;
        }

        .mobile-menu-icon span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #ffffff;
            border-radius: 2px;
        }

        /* Header Text */
        .main-header {
            max-width: 100%;
            margin-top: 0;
            position: relative;
            z-index: 5;
            text-align: left;
            padding-right: 20px;
        }

        .main-header h1 {
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            font-size: 28px;
            line-height: 1.2;
            margin-bottom: 8px;
            color: #ffffff;
        }

        .main-header .subtitle {
            font-family: "Poppins", sans-serif;
            font-size: 15px;
            color: #ffffff;
            opacity: 0.9;
            line-height: 1.4;
        }

        /* Mobile Hero Image */
        .mobile-hero-image {
            display: block;
            width: 100%;
            margin-top: 20px;
            position: relative;
            z-index: 1;
            text-align: center;
            background-image: none;
        }

        .mobile-hero-image img {
            width: 100%;
            max-width: 343px;
            height: auto;
            display: inline-block;
        }

        /* Charts Wrapper - Below image */
        .charts-wrapper {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            width: 100%;
            box-shadow: none;
            background: transparent;
            z-index: 10;
            margin-top: auto;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 7px; /* DSL gap between cards */
            border-radius: 0;
        }
        .pc-charts-wrapper {
            display: none;
        }
        .mobile-charts-wrapper {
            display: flex;
        }
        .mobile-charts-wrapper .bar-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        /* HSV-1 Chart - Mobile Style */
        .chart-card.hsv-1 {
            width: 168px; /* DSL Width */
            height: 231px; /* DSL Height */
            min-height: 231px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 6px 20px 0px rgba(5, 30, 56, 0.1);
            padding: 12px; /* Estimate based on content */
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        /* HSV-2 Chart - Mobile Style (If visible) */
        .chart-card.hsv-2 {
            width: 168px; /* DSL Width */
            height: 231px; /* DSL Height */
            min-height: 231px;
            border-radius: 8px;
            padding: 12px;
            background-color: #ffffff; /* DSL paint_71:04184 */
            box-shadow: 0px 6px 20px 0px rgba(5, 30, 56, 0.1); /* DSL effect_117:02650 */
            display: flex;
            flex-direction: column;
            margin: 0;
        }

        .chart-header {
            margin-bottom: 12px;
        }

        .chart-header h3 {
            font-family: "Open Sans", sans-serif;
            font-weight: 700;
            font-size: 18px; /* DSL font_117:02490 */
            margin-bottom: 2px;
            color: #051a31; /* DSL paint_71:13443 */
            line-height: 1.2;
        }

        .chart-header .label {
            font-family: "Open Sans", sans-serif;
            font-weight: 400;
            font-size: 14px; /* DSL font_117:02794 */
            color: #a5a5a5; /* DSL paint_71:02458 */
            margin-bottom: 2px;
            opacity: 1;
        }

        /* HSV-2 Specific Overrides for Mobile */
        .chart-card.hsv-2 .chart-header h3 {
            color: #051a31; /* Override desktop white */
        }

        .chart-card.hsv-2 .chart-header .label {
            color: #a5a5a5; /* Override desktop white */
        }

        .chart-body {
            gap: 10px;
        }

        .chart-row {
            height: 30px; /* Adjusted for mobile */
            font-family: "Open Sans", sans-serif;
            font-weight: 400;
            font-size: 12px; /* DSL font_117:02819 */
            gap: 4px;
            color: #0f0f0f; /* DSL paint_11:4210 */
            flex-direction: column;
        }

        .chart-card.hsv-2 .chart-row .age,
        .chart-card.hsv-2 .chart-row .value {
            color: #0f0f0f; /* Override desktop white */
        }

        .chart-row .age {
            width: 38px; /* DSL width */
            text-align: left;
        }

        .chart-row .value {
            width: 34px; /* DSL width approx */
            padding-left: 2px;
            text-align: right;
        }

        .bar-track {
            height: 10px;
            border-radius: 5px;
            background-color: #f3f7ff; /* DSL paint_117:13356 */
            width: 100%;
        }

        /* Override HSV-2 Track Color on Mobile */
        .hsv-2 .bar-track {
            background-color: #f3f7ff; /* Use same as HSV-1 for visibility on white bg */
        }

        .bar {
            border-radius: 5px;
        }

        /* Override HSV-2 Bar Color on Mobile */
        .hsv-2 .bar {
            background-color: #4281f5; /* DSL paint_117:13742 */
            background-image: none; /* Remove desktop stripes if not in DSL? DSL shows solid fill in path data? */
            /* DSL just says fill paint_117:13742. Desktop had stripes. Let's keep stripes but change base color if needed.
               Actually DSL doesn't mention stripes image for mobile bars, just fill color.
               Let's stick to solid color or stripes with this color.
               For now, just setting background-color is enough, stripes might overlay.
               Let's remove background-image for clean look if DSL implies solid. */
            background-image: none;
        }

        .hsv-1 .bar {
            /* DSL paint_117:03023 #FF7A3C */
            background-color: #ff7a3c;
            background-image: none; /* Remove stripes for mobile fidelity if needed */
        }

        /* Middle Section - Risk Factors */
        .middle-section {
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            margin-top: 20px;
            padding: 0;
            background: transparent;
            z-index: 15;
            display: block;
        }

        .blue-background-card {
            width: 100%;
            background: transparent;
            padding: 0;
        }

        .risk-factors {
            width: 100%;
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
            color: #0f0f0f;
            box-shadow: none; /* Flat on mobile? */
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
        }

        .risk-factors h3 {
            font-size: 18px;
            font-weight: 700;
            color: #0f0f0f;
            margin-bottom: 16px;
        }

        .risk-factors ul li {
            font-size: 16px;
            color: #0f0f0f;
            margin-bottom: 12px;
        }

        .risk-factors ul li::before {
            color: #0f0f0f;
            font-size: 18px;
            top: 2px;
            margin-right: 8px;
        }

        /* Symptoms Section */
        .symptoms-section {
            display: flex;
            flex-direction: column;
            margin-top: 40px;
            gap: 16px;
        }

        .symptoms-section h2 {
            font-size: 20px;
            color: #0f0f0f;
            margin-bottom: 0;
            text-align: left;
            flex: auto;
        }

        .symptoms-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .symptom-card {
            width: 100%;
            height: auto; /* Allow growth */
            min-height: 120px;
            padding: 16px;
            background-color: #eef1f8; /* Light blueish gray */
            border-radius: 12px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            text-align: center;
        }

        .symptom-card .icon {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
        }

        .symptom-card p {
            font-size: 16px;
            font-weight: 400;
            color: #000;
        }

        /* Screen 2: Types of Herpes */
        .screen-2 {
            padding: 40px 0;
            background: #f9f9f9;
        }

        .screen-2 .section-title {
            font-size: 24px;
            margin-bottom: 30px;
            text-align: left;
            padding-left: 10px;
        }

        .types-wrapper {
            gap: 20px;
        }

        /* Screen 3: Who Should Get Tested */
        .screen-3 {
            padding: 40px 0;
        }

        .screen-3 .section-title {
            font-size: 24px;
            margin-bottom: 10px;
            text-align: left;
        }

        .screen-3 .section-subtitle {
            font-size: 16px;
            margin-bottom: 30px;
            text-align: left;
        }

        .test-reasons-grid {
            grid-template-columns: 1fr;
            gap: 16px;
            margin-bottom: 40px;
        }

        .reason-card {
            padding: 16px;
            border-radius: 12px;
            background: #f3f7ff;
        }

        .reason-card .icon {
            width: 40px;
            height: 40px;
        }

        .reason-card p {
            font-size: 16px;
        }

        /* Test Types */
        .test-types-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .test-type-card {
            padding: 24px;
            border-radius: 16px;
        }

        .test-type-card h3 {
            font-size: 20px;
            margin-bottom: 20px;
            text-align: left; /* Left align on mobile? */
        }

        .test-type-card .badge {
            font-size: 16px;
            padding: 6px 16px;
        }

        .test-type-card ul li {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .test-type-card ul li::before {
            width: 18px;
            height: 18px;
            margin-right: 12px;
        }

        /* Screen 4: When & Where */
        .screen-4 {
            padding: 40px 0;
        }

        .screen-4 .section-title {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .blue-bullet-list li {
            font-size: 16px;
            margin-bottom: 20px;
            padding-left: 24px;
        }

        .blue-bullet-list li::before {
            width: 8px;
            height: 8px;
            top: 6px;
        }

        .locations-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .location-item {
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: #fff;
            padding: 16px;
            border-radius: 12px;
            gap: 12px;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); /* Add subtle shadow */
        }

        .location-item .icon {
            width: 40px;
            height: 40px;
        }

        .location-item span {
            font-size: 16px;
        }

        .image-container {
            border-radius: 20px;
        }

        .fourth-screen-bg {
            background-image: url("/assets/8abdcf35ea1e157227d1.webp");
            height: 300px;
        }

        /* Screen 5: Results */
        .screen-5 {
            padding: 40px 0;
        }

        .results-section .section-title,
        .diagnosed-section .section-title {
            font-size: 24px;
            text-align: left;
        }

        .diagnosed-section .section-subtitle {
            font-size: 16px;
            text-align: left;
            margin-bottom: 30px;
        }

        .results-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .result-card {
            padding: 24px;
            border-radius: 16px;
        }

        .result-card h3 {
            font-size: 20px;
        }

        .result-card p {
            font-size: 16px;
            margin-top: 16px;
        }

        .action-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 cols for actions? */
            gap: 12px;
        }

        .action-card {
            height: 80px;
            padding: 0 12px;
            border-radius: 12px;
        }

        .action-card p {
            font-size: 16px;
            line-height: 1.3;
        }

        .action-card.left-text {
            padding-left: 12px; /* Reset padding */
            justify-content: center;
            text-align: center;
        }

        /* Screen 6: Support */
        .screen-6 {
            padding: 40px 0;
        }

        .support-card {
            padding: 0;
            border-radius: 0;
            background: none;
            box-shadow: none;
        }

        .support-card .section-title {
            font-size: 24px;
            text-align: left;
        }

        .support-card .section-description {
            font-size: 16px;
            margin-bottom: 40px;
        }

        .features-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .feature-item {
            padding: 16px;
            border-radius: 12px;
            justify-content: flex-start;
            text-align: left;
        }

        .feature-item span {
            font-size: 16px;
            text-align: left;
        }

        .cta-button {
            width: 100%;
            box-sizing: border-box;
            padding: 16px;
            font-size: 16px;
        }

        .cta-button span {
            font-size: 16px;
        }

        /* Mobile Header */
        body .webToAppHeaderBox {
            z-index: 99;
            background-color: #4281f5;;
        }
        body .webToAppHeaderBox .webToAppHeader {
            justify-content: space-between;
        }
        body .webToAppHeaderBox .webToAppHeader .listBtn {
            align-self: center;
        }
        body .webToAppHeaderBox .webToAppHeader .listBtn i {
            background-color: #fff;
            align-self: center;
        }
        .mobileSignUp {
            color: #fff;
            font-size: 1.4rem;
            text-decoration: none;
            white-space: nowrap;
            align-self: center;
        }
        .learn-more .feature-item {
            background-color: #50a5ff;
        }
        .learn-more .features-grid {
            margin-top: 6rem;
        }
        .learn-more .feature-item span {
            color: white;
        }
    }

    /* --- Feedback Module --- */
    .htg-feedback {
        padding: 40px 0;
        text-align: center;
    }
    .htg-feedback__card {
        max-width: 480px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        padding: 32px 24px;
    }
    .htg-feedback__title {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: #0f0f0f;
        margin: 0 0 20px;
    }
    .htg-feedback__buttons {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-bottom: 16px;
    }
    .htg-feedback__btn {
        display: inline-block;
        min-width: 100px;
        padding: 10px 32px;
        border: 1px solid #dadce0;
        border-radius: 8px;
        background: #fff;
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #0f0f0f;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }
    .htg-feedback__btn:hover {
        background: #f1f3f4;
        border-color: #bdc1c6;
    }
    .htg-feedback__link {
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #4281f5;
        text-decoration: none;
        cursor: pointer;
    }
    .htg-feedback__link:hover {
        text-decoration: underline;
    }
    @media (max-width: 768px) {
        .htg-feedback {
            padding: 24px 16px;
        }
        .htg-feedback__card {
            padding: 24px 16px;
        }
        .htg-feedback__btn {
            min-width: 80px;
            padding: 8px 24px;
        }
    }