.hero-image-wrap{
    position:absolute;
    left: 65%;
    transform: translateX(-20%);   /* pulls image inside triangle */
    bottom: 0;
    width: min(750px, 55vw);
    max-height: 92%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    pointer-events:none;
}


.hero-image-wrap img{
    width:100%;
    height:auto;
    object-fit: contain;
    display:block;
    filter: drop-shadow(10px 20px 40px rgba(33,81,75,0.35));
}

/* --- USER PROVIDED STYLES --- */
        .field input::placeholder,
        .field select::placeholder {
            color: transparent;
        }

        :root{
            --ms-dark:#21514B;
            --ms-accent:#57BA91;
        }

        html { scroll-behavior: smooth; }
        
        /* Removed aggressive global resets that might disturb the parent site */
body {
            margin:0;
            background:#fff;
            color:var(--ms-dark);
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* Removed padding-top: 80px to avoid gaps when pasted */
        }

        /* --- HERO --- */
.hero{
            position:relative;
            width:100%;
            min-height:70vh;
            overflow:hidden;
            background:#fff;
            display:flex;
            align-items:stretch;
            z-index: 1; 
        }
        .triangle-layer,
        .triangle-objects{
            isolation: isolate;
        }

        .hero-left{
            width:55%;
            min-width: 520px;
            position:relative;
            z-index:3;
            padding:
                clamp(18px, 4vw, 56px)
                clamp(18px, 5.6vw, 96px)
                clamp(28px, 5.2vw, 84px);
            display:flex;
            flex-direction:column;
            justify-content:flex-start;
            gap: 14px;
        }

        .hero h1{
            margin:0;
            font-weight: 850;
            letter-spacing: -0.02em;
            font-size: clamp(34px, 3.25vw, 58px);
            line-height: 1.04;
            max-width: 22ch;
        }

        .hero .hook{
            margin:0;
            font-size: clamp(16px, 1.18vw, 20px);
            line-height: 1.7;
            max-width: 62ch;
        }

        .hero .value{
            margin:0;
            font-size: clamp(16px, 1.18vw, 20px);
            line-height: 1.7;
            max-width: 82ch;
            font-weight: 750;
        }

        .cta-row{
            display:flex;
            align-items:center;
            gap: 18px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .btn-primary{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding: 14px 20px;
            border-radius: 9999px;
            text-decoration:none;
            font-weight: 850;
            letter-spacing: 0.01em;
            border: 2px solid var(--ms-dark);
            background: var(--ms-dark);
            color: #fff;
            box-shadow: 0 14px 30px rgba(33,81,75,0.18);
            transition: transform 150ms ease, background 150ms ease, color 150ms ease;
        }
        .btn-primary:hover{ transform: translateY(-1px); background: transparent; color: var(--ms-dark); }
        .btn-primary:active{ transform: translateY(0px); }

        .link-secondary{
            display:inline-flex;
            align-items:center;
            gap: 10px;
            color: var(--ms-accent);
            font-weight: 850;
            text-decoration:none;
            border-bottom: 1px solid transparent;
            padding-bottom: 2px;
        }
        .link-secondary:hover{ border-bottom-color: var(--ms-accent); }

        .support{
            margin:0;
            font-size: 14.75px;
            line-height: 1.75;
            max-width: 86ch;
            opacity: 0.92;
        }

        /* --- TRIANGLE LAYER --- */
        .triangle-layer{
            position:absolute;
            inset:0;
            z-index:1;
            pointer-events:none;
        }
        .triangle-layer svg{
            width:100%;
            height:100%;
            display:block;
        }

        .triangle-objects{
            position:absolute;
            inset:0;
            z-index:2;
            pointer-events:none;
        }

        /* --- FORM STRIP --- */
        .form-strip{
            width:100%;
            background:#fff;
            position:relative;
            z-index:5; 
            border-top: 1px solid rgba(33,81,75,0.16);
            box-shadow: 0 18px 45px rgba(33,81,75,0.10);
        }

        .form-inner{
            max-width: 1240px;
            margin: 0 auto;
            padding: 22px 18px 14px;
        }

        .form-bar{
            display:grid;
            grid-template-columns: 1.15fr 1.55fr 1.05fr 1.05fr auto;
            gap: 12px;
            align-items:end;
        }

        @media (max-width: 1024px) {
            .form-bar {
                grid-template-columns: 1fr 1fr;
            }
            .submit-btn {
                grid-column: span 2;
            }
            .hero {
                flex-direction: column;
                min-height: auto;
            }
            .hero-left {
                width: 100%;
                min-width: auto;
                padding: 40px 20px;
            }
            .triangle-layer {
                position: relative;
                height: 300px;
                display: none;
            }
        }
        @media (max-width: 600px) {
            .form-bar {
                grid-template-columns: 1fr;
            }
            .submit-btn {
                grid-column: span 1;
            }
        }
        @media (max-width: 768px){
    .hero-image-wrap{
        display: none;
    }
}


        .field{ min-width: 0; }

        .field label{
            display:block;
            font-size: 12px;
            font-weight: 850;
            letter-spacing: 0.02em;
            margin: 0 0 6px;
            color: var(--ms-dark);
        }

        .field input, .field select{
            width:100%;
            height: 46px;
            padding: 0 14px;
            border-radius: 9999px;
            border: 1.5px solid rgba(33,81,75,0.28);
            outline: none;
            background: #fff;
            color: var(--ms-dark);
            font-size: 14px;
            line-height: 46px;
            transition: border-color 120ms ease, box-shadow 120ms ease;
            box-sizing: border-box;
        }

        .field select{
            line-height: normal;
            padding-right: 36px;
            appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, rgba(33,81,75,0.9) 50%),
                linear-gradient(135deg, rgba(33,81,75,0.9) 50%, transparent 50%);
            background-position:
                calc(100% - 18px) calc(50% - 2px),
                calc(100% - 12px) calc(50% - 2px);
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }

        .field input:focus, .field select:focus {
            border-color: var(--ms-accent);
            box-shadow: 0 0 0 4px rgba(87, 186, 145, 0.15);
        }

        .submit-btn {
            height: 46px;
            padding: 0 28px;
            background: var(--ms-dark);
            color: white;
            border: none;
            border-radius: 9999px;
            font-weight: 800;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }
        .submit-btn:hover {
    background: white;
    transform: translateY(-1px);
    color: #21514B;

    /* NEW OUTLINE */
    box-shadow: 0 0 0 2px #21514B;
}

        .submit-btn:active {
            transform: translateY(0);
        }

        .micro-trust {
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            font-size: 13px;
            color: var(--ms-dark);
            opacity: 0.8;
            font-weight: 500;
}

.card-icon-img{
  width: 50px;
  height: 50px;
  fill: #57BA91;
}

        

        /* Scoped Reset - Only affects elements inside .ar-section */
        .ar-section,
        .ar-section *,
        .ar-section *::before,
        .ar-section *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Section Container */
        .ar-section {
            width: 100%;
            background: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
            padding: 60px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .ar-section .container {
            max-width: 1200px;
            width: 100%;
        }

        /* Heading */
        .ar-section .ar-heading {
            color: #ffffff;
            font-size: 2.2rem;
            text-align: center;
            margin-bottom: 40px;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Main Content Layout */
        .ar-section .content-grid {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
            align-items: stretch;
        }

        /* Left Column - Problem Cards */
        .ar-section .left-column {
            flex: 1.3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .ar-section .problem-card {
            background: #ffffff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border: 1px solid rgba(33, 81, 75, 0.15);
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .ar-section .problem-card:hover {
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
            border-color: rgba(33, 81, 75, 0.3);
        }

        /* Card Icon */
        .ar-section .card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #21514B 0%, #3a7a6f 100%);
    border-radius: 10px;   /* ✅ square */
}


        .ar-section .card-icon svg {
            width: 24px;
            height: 24px;
            fill: #ffffff;
        }

        .ar-section .card-text {
            font-size: 0.92rem;
            color: #555;
            line-height: 1.55;
        }

        .ar-section .card-highlight {
            font-weight: 700;
            color: #21514B;
            display: block;
            margin-bottom: 10px;
            font-size: 1rem;
            line-height: 1.35;
        }

        /* Right Column - Comparison Panel */
        .ar-section .right-column {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .ar-section .comparison-header {
            background: rgba(255,255,255,0.95);
            padding: 14px 20px;
            border-radius: 8px 8px 0 0;
            text-align: center;
            border: 1px solid rgba(33, 81, 75, 0.15);
            border-bottom: none;
        }

        .ar-section .comparison-header h3 {
            font-size: 1rem;
            font-weight: 700;
            color: #21514B;
            margin: 0;
            letter-spacing: -0.3px;
        }

        .ar-section .comparison-panel {
            background: #ffffff;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            display: flex;
            flex: 1;
            overflow: hidden;
            border: 1px solid rgba(33, 81, 75, 0.15);
            border-top: none;
        }

        .ar-section .comparison-half {
            flex: 1;
            padding: 24px 18px;
            display: flex;
            flex-direction: column;
        }

        .ar-section .comp-left {
            background-color: #fef8f8;
            border-right: 1px solid rgba(0,0,0,0.06);
        }

        .ar-section .comp-right {
            background-color: #f6fdf9;
        }

        .ar-section .comp-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 14px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .ar-section .comp-left .comp-icon {
            background-color: rgba(192, 57, 43, 0.1);
        }

        .ar-section .comp-right .comp-icon {
            background-color: rgba(39, 174, 96, 0.1);
        }

        .ar-section .comp-icon svg {
            width: 22px;
            height: 22px;
        }

        .ar-section .comp-left .comp-icon svg {
            fill: #c0392b;
        }

        .ar-section .comp-right .comp-icon svg {
            fill: #27ae60;
        }

        .ar-section .comp-title {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 18px;
            text-align: center;
            line-height: 1.3;
            min-height: 2.6em;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .ar-section .comp-left .comp-title { color: #a83226; }
        .ar-section .comp-right .comp-title { color: #1e8449; }

        .ar-section .comp-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ar-section .comp-list li {
            margin-bottom: 0;
            font-size: 0.88rem;
            position: relative;
            padding-left: 22px;
            color: #555;
            line-height: 1.35;
            min-height: 52px;
            display: flex;
            align-items: center;
        }

        .ar-section .comp-list li:last-child {
            min-height: 52px;
        }

        /* Icons for comparison lists */
        .ar-section .comp-left .comp-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0392b'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

        .ar-section .comp-right .comp-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327ae60'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

        /* CTA */
        .ar-section .cta-container {
            text-align: center;
            margin-top: 10px;
        }

        .ar-section .cta-button {
            display: inline-block;
            background-color: #ffffff;
            color: #21514B;
            font-weight: 700;
            padding: 16px 38px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 1.05rem;
            box-shadow: 0 4px 14px rgba(0,0,0,0.18);
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
            border: 2px solid rgba(33, 81, 75, 0.1);
            position: relative;
            overflow: hidden;
        }

        .ar-section .cta-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(33, 81, 75, 0.05), transparent);
            transition: left 0.6s ease;
        }

        .ar-section .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 81, 75, 0.25);
            background-color: #21514B;
            color: #ffffff;
            border-color: rgba(33, 81, 75, 0.2);
        }

        .ar-section .cta-button:hover::before {
            left: 100%;
        }

        /* Subtle pulse animation for CTA */
        @keyframes subtlePulse {
            0%, 100% {
                box-shadow: 0 4px 14px rgba(0,0,0,0.18);
            }
            50% {
                box-shadow: 0 4px 20px rgba(33, 81, 75, 0.22);
            }
        }

        .ar-section .cta-button {
            animation: subtlePulse 3s ease-in-out infinite;
        }

        .ar-section .cta-button:hover {
            animation: none;
        }

        /* Responsive Design */
        /* Tablet: Tighter two-column layout */
        @media (max-width: 1024px) {
            .ar-section .content-grid {
                gap: 18px;
            }
            
            .ar-section .problem-card {
                padding: 20px;
            }

            .ar-section .card-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 14px;
            }

            .ar-section .card-icon svg {
                width: 22px;
                height: 22px;
            }
            
            .ar-section .comparison-half {
                padding: 20px 14px;
            }

            .ar-section .comp-list li {
                font-size: 0.85rem;
                min-height: 72px; 
            }
            
            .ar-section .comp-title {
                min-height: 3.2em;
            }
        }

        /* Mobile: Stacked layout */
        @media (max-width: 768px) {
            .ar-section {
                padding: 50px 16px;
            }

            .ar-section .ar-heading {
                font-size: 1.7rem;
                padding: 0 10px;
                margin-bottom: 32px;
            }

            .ar-section .content-grid {
                flex-direction: column;
                gap: 24px;
            }

            .ar-section .left-column {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .ar-section .problem-card {
                min-height: auto;
                padding: 22px;
            }

            .ar-section .comparison-header {
                border-radius: 8px 8px 0 0;
            }
            
            .ar-section .comparison-panel {
                flex-direction: column;
                min-height: auto;
            }
            
            .ar-section .comp-left {
                border-right: none;
                border-bottom: 1px solid rgba(0,0,0,0.06);
            }

            .ar-section .comparison-half {
                padding: 22px 18px;
            }

            .ar-section .comp-list li {
                min-height: auto;
                margin-bottom: 12px;
                display: block;
                padding-left: 26px;
            }
            
            .ar-section .comp-list li::before {
                top: 4px;
                transform: none;
            }

            .ar-section .comp-title {
                min-height: auto;
            }

            .ar-section .cta-button {
                padding: 14px 28px;
                font-size: 0.95rem;
            }
}

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #ffffff;
            color: #1a1a1a;
            line-height: 1.6;
        }

        /* Section Container - Fully Isolated */
        .kpi-section {
            background-color: #ffffff;
            padding: 80px 24px;
            position: relative;
            z-index: 1;
            isolation: isolate;
            overflow: visible;
            /* Ensure no interference with header/footer */
            margin: 0;
            clear: both;
        }
        
        .kpi-section * {
            /* Prevent any child from escaping section bounds unexpectedly */
            max-width: 100%;
        }

        .kpi-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Section Header */
        .section-header {
            text-align: center;
            margin-bottom: 48px;
        }

        .section-header h2 {
            font-size: 2.25rem;
            font-weight: 700;
            color: #21514B;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .section-header p {
            font-size: 1.1rem;
            color: #4a4a4a;
            max-width: 750px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* KPI Grid Wrapper with Border */
        .kpi-grid-wrapper {
            background: linear-gradient(to right, #21514B, #57BA91);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            border: 2px solid #57BA91;
            position: relative;
            margin-bottom: 48px;
        }

        .kpi-grid-wrapper::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 18px;
            background: linear-gradient(135deg, #21514B, #57BA91);
            z-index: -1;
        }

        /* KPI Grid */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        /* KPI Card */
        .kpi-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 32px 28px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            border: 1px solid #e8e8e8;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: flex-start;
        }

        .kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            border-color: #57BA91;
        }

        /* KPI Number */
        .kpi-number {
            font-size: 2.75rem;
            font-weight: 700;
            color: #21514B;
            line-height: 1.1;
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }

        .kpi-number .suffix {
            font-size: 2rem;
        }

        /* KPI Label */
        .kpi-label {
            font-size: 1rem;
            font-weight: 600;
            color: #21514B;
            margin-bottom: 12px;
            letter-spacing: -0.01em;
            min-height: 48px;
        }

        /* KPI Description */
        .kpi-description {
            font-size: 0.875rem;
            color: #5a5a5a;
            line-height: 1.6;
            margin: 0;
        }

        /* Micro Trust Line */
        .micro-trust {
            text-align: center;
            margin-bottom: 32px;
        }

        .micro-trust p {
            font-size: 1rem;
            color: #4a4a4a;
            font-weight: 500;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* CTA Card - SHARP TECHNICAL DESIGN */
        .cta-card-wrapper {
            border-radius: 0; /* Sharp 90-degree corners */
            padding: 14px; /* Distance from corner markers to create outline effect */
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            border: 2px solid rgba(87, 186, 145, 0.28); /* Outline wrapping from corner markers */
        }

        /* Corner Square Markers - Anchored Design Elements */
        .cta-corner-marker {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #21514B;
            z-index: 10;
        }

        /* White dot in center of corner markers */
        .cta-corner-marker::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background-color: #ffffff;
            border-radius: 50%;
        }

        .cta-corner-marker.top-left {
            top: -2px;
            left: -2px;
        }

        .cta-corner-marker.bottom-right {
            bottom: -2px;
            right: -2px;
        }

        .cta-card {
            background: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
            border-radius: 0; /* Sharp corners */
            padding: 20px 32px;
            text-align: center;
            position: relative;
            overflow: visible;
            color: #ffffff;
            border: none; /* Remove inner border, outline is now on wrapper */
        }

        .cta-card h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
            position: relative;
            z-index: 2;
        }

        .cta-card p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 12px;
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }
        .cta-card .cta-button{
          margin-top: -8px;   /* ← adjust: -4px to -10px if needed */
        }


        .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background-color: #57BA91;
            color: #ffffff;
            font-size: 1rem;
            font-weight: 600;
            padding: 8px 15px;
            border-radius: 6px; /* Slightly rounded button only */
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 2;
            box-shadow: 0 4px 12px rgba(33, 81, 75, 0.25);
        }

        .cta-button:hover {
          background-color: #ffffff;
          color: #21514B; /* MedSole dark teal */
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(33, 81, 75, 0.4);
          border-color: #21514B; /* clean outline on hover */
        }

        
        .cta-button i {
            font-size: 1.1em;
        }

        /* Tablet: 2x2 grid */
        @media (max-width: 1024px) {
            .kpi-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .kpi-section {
                padding: 60px 20px;
            }

            .kpi-number {
                font-size: 2.25rem;
            }

            .section-header h2 {
                font-size: 1.875rem;
            }

            .section-header p {
                font-size: 1rem;
            }

            .cta-card {
                padding: 36px 40px;
            }

            .cta-card h3 {
                font-size: 1.5rem;
            }
        }

        /* Mobile: 1 column */
        @media (max-width: 640px) {
            .kpi-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .kpi-section {
                padding: 48px 16px;
            }

            .kpi-grid-wrapper {
                padding: 16px;
            }

            .kpi-card {
                padding: 28px 24px;
            }

            .kpi-number {
                font-size: 2.5rem;
            }

            .kpi-label {
                font-size: 0.95rem;
                min-height: auto;
            }

            .section-header {
                margin-bottom: 32px;
            }

            .section-header h2 {
                font-size: 1.625rem;
            }

            .section-header p {
                font-size: 0.95rem;
            }

            .micro-trust p {
                font-size: 0.95rem;
            }

            .cta-card {
                padding: 32px 24px;
            }

            .cta-card h3 {
                font-size: 1.35rem;
            }

            .cta-card p {
                font-size: 0.95rem;
            }

            .cta-button {
                padding: 14px 28px;
                font-size: 0.95rem;
                width: 100%;
            }
            
            .cta-card-wrapper {
                padding: 10px;
            }
            
            .cta-corner-marker {
                width: 16px;
                height: 16px;
            }
            
            /* Smaller white dot on mobile */
            .cta-corner-marker::after {
                width: 5px;
                height: 5px;
            }
            
            .cta-corner-marker.top-left {
                top: -2px;
                left: -2px;
            }
            
            .cta-corner-marker.bottom-right {
                bottom: -2px;
                right: -2px;
            }
        }
        


        .section-header.animate-in {
            animation: fadeSlideUp 0.6s ease forwards;
        }

        .kpi-grid-wrapper.animate-in {
            animation: fadeSlideUp 0.6s ease forwards;
            animation-delay: 0.2s;
        }

        .kpi-card.animate-in {
            animation: fadeSlideUp 0.6s ease forwards;
        }

        .kpi-card:nth-child(1).animate-in { animation-delay: 0.3s; }
        .kpi-card:nth-child(2).animate-in { animation-delay: 0.4s; }
        .kpi-card:nth-child(3).animate-in { animation-delay: 0.5s; }
        .kpi-card:nth-child(4).animate-in { animation-delay: 0.6s; }

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

        .micro-trust, .cta-card-wrapper {
    opacity: 1;
    transform: none;
}


        .micro-trust.animate-in {
            animation: fadeSlideUp 0.5s ease forwards;
            animation-delay: 0.7s;
        }

        .cta-card-wrapper.animate-in {
            animation: fadeSlideUp 0.5s ease forwards;
            animation-delay: 0.8s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --dark-teal: #21514B;
            --light-green: #57BA91;
            /* Updated per request: thicker lines, more gap, white color */
            --line-gap: 20;
            --line-stroke: 6;
            --line-color-light: #ffffff;
            --line-color-dark: #ffffff;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #ffffff;
            min-height: 100vh;
            /* Prevent horizontal scroll from large numbers */
            overflow-x: hidden;
        }
        .step-icon{
      display:flex;
      align-items:center;
      justify-content:center;
        }

/* You control icon size here */
      .step-icon-img{
      width: 70px;   /* ← adjust if needed */
      height: 70px;
      object-fit: contain;
      display:block;
      }


        /* Section 4 Container */
        .ar-section {
            background: linear-gradient(to right, var(--dark-teal), var(--light-green));
            padding: 80px 20px 100px;
            min-height: 100vh;
            overflow-x: hidden; /* Ensure no horizontal scroll within section */
        }

        /* Section Heading */
        .section-heading {
            text-align: center;
            margin-bottom: 60px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-heading h2 {
            color: #ffffff;
            font-size: 42px;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
        }

        .section-heading p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 18px;
            line-height: 1.7;
            font-weight: 400;
            max-width: 750px;
            margin: 0 auto;
        }

        .steps-container {
            position: relative;
            max-width: 1000px; /* Increased to accommodate numbers */
            width: 100%;
            margin: 0 auto;
            overflow: visible;
        }

        /* Step Wrapper - Modified for Flex layout to hold Number + Card */
        .step-wrapper {
            position: relative;
            margin-bottom: 50px;
            padding: 20px 0;
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            overflow: visible;
        }

        /* Alternating Flex Direction for Odd/Even numbers */
        /* Odd (1, 3, 5): Number Left, Card Right */
        .step-wrapper:not(.flip-x) {
            flex-direction: row;
        }

        /* Even (2, 4, 6): Card Left, Number Right */
        .step-wrapper.flip-x {
            flex-direction: row-reverse;
        }

        .step-wrapper:last-child { margin-bottom: 0; }

        /* Big Number Styling */
        .big-number {
            font-size: 100px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1;
            opacity: 0.9;
            flex-shrink: 0;
            width: 120px;
            text-align: center;
            /* Optional: Add a slight shadow if needed for contrast, but user asked for white */
            text-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* Capsule Card */
        .step-card {
            position: relative;
            display: flex;
            align-items: stretch;
            padding: 35px 45px;
            border-radius: 9999px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            z-index: 2;
            min-height: 140px;
            flex: 1; /* Take remaining space */
            max-width: 800px;
        }

        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* Capsule Colors - Alternating */
        .step-card.dark-teal {
            background: var(--dark-teal);
        }

        .step-card.white-card {
            background: #ffffff;
        }

        /* Text colors based on capsule */
        .step-card.dark-teal .step-title,
        .step-card.dark-teal .step-content,
        .step-card.dark-teal .why-matters,
        .step-card.dark-teal .why-label {
            color: #ffffff;
        }

        .step-card.white-card .step-title,
        .step-card.white-card .step-content {
            color: var(--dark-teal);
        }

        .step-card.white-card .why-matters,
        .step-card.white-card .why-label {
            color: #3d6b65;
        }

        /* Left Section - Icon */
        .step-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            padding-right: 30px;
            border-right: 1px solid rgba(255, 255, 255, 0.25);
        }

        .step-card.white-card .step-left {
            border-right: 1px solid rgba(33, 81, 75, 0.2);
        }

        .step-icon {
            font-size: 36px;
            line-height: 1;
        }

        .step-card.dark-teal .step-icon {
            color: var(--light-green);
        }

        .step-card.white-card .step-icon {
            color: var(--dark-teal);
        }

        /* Right Section - Content */
        .step-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 30px;
            flex: 1;
            min-width: 0;
        }

        .step-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .step-content {
            font-size: 15px;
            line-height: 1.6;
            font-weight: 400;
            margin-bottom: 12px;
        }

        /* Why Matters Section with Top Border */
        .why-matters {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-style: italic;
            /* Added dividing line above microcopy */
            border-top: 1px solid rgba(255, 255, 255, 0.25);
            padding-top: 10px;
            margin-top: 5px;
            width: 100%;
        }
        
        /* Dark border for white cards */
        .step-card.white-card .why-matters {
            border-top: 1px solid rgba(33, 81, 75, 0.15);
        }

        .why-label {
            font-weight: 500;
            font-style: normal;
            opacity: 0.85;
            flex-shrink: 0;
        }

        /* Outer line SVG */
        .outer-line {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            overflow: visible;
        }

        .outer-line svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .outer-line path {
            fill: none;
            stroke-width: var(--line-stroke);
            stroke-linecap: round;
            stroke-linejoin: round;
            vector-effect: non-scaling-stroke;
            stroke: #ffffff; /* Forced white for all lines */
        }

        /* Invert logic handled in JS now to ensure correct positioning relative to flex items */
        .step-wrapper.flip-x .outer-line svg {
            transform: none;
        }

        /* Entry animation */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .step-wrapper:nth-child(1) { animation-delay: 0.1s; }
        .step-wrapper:nth-child(2) { animation-delay: 0.2s; }
        .step-wrapper:nth-child(3) { animation-delay: 0.3s; }
        .step-wrapper:nth-child(4) { animation-delay: 0.4s; }
        .step-wrapper:nth-child(5) { animation-delay: 0.5s; }
        .step-wrapper:nth-child(6) { animation-delay: 0.6s; }

        /* CTA Section */
        .cta-container {
            text-align: center;
            margin-top: 70px;
        }

        .cta-button {
            display: inline-block;
            margin-top: 80px;
            background: var(--light-green);
            color: #ffffff;
            font-size: 18px;
            font-weight: 600;
            padding: 18px 50px;
            border-radius: 9999px;
            text-decoration: none;
            box-shadow: 0 8px 30px rgba(87, 186, 145, 0.4);
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            background: #3fa876;
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(87, 186, 145, 0.5);
        }

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

    /* Force mobile layout into vertical flow */
    .step-wrapper,
    .step-wrapper * {
        position: static !important;
        transform: none !important;
    }

    /* Ensure each step is its own block */
    .step-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin-bottom: 24px;
    }

    /* Big number should not float */
    .big-number {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 0 8px 0 !important;
        text-align: center;
        width: 100%;
    }

    /* Cards must stay inside screen */
    .step-card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Kill desktop capsule connectors */
    .outer-line,
    .outer-line-svg {
        display: none !important;
    }

    /* Prevent horizontal bleed */
    .ar-section,
    .steps-container {
        overflow-x: hidden !important;
    }
}
        @media (max-width: 480px) {
            .section-heading h2 {
                font-size: 22px;
            }

            .section-heading p {
                font-size: 14px;
            }

            .big-number {
                font-size: 40px;
            }

            /* More rectangular on small mobile */
            .step-card {
                padding: 24px 18px;
                border-radius: 16px;
            }

            .step-title { font-size: 16px; }
            .step-content { font-size: 13px; }
            .step-icon { font-size: 28px; }

            .cta-button {
                font-size: 15px;
                padding: 14px 35px;
            }
}

  .card-icon-img{
    width: 50px;   /* ← adjust if needed */
    height: 50px;
    object-fit: contain;
    display:block;
}
    :root{
      --ms-dark: #21514B;
      --ms-green: #57BA91;
      --ms-white: #ffffff;
      --ms-grad: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
    }

    /* Scope EVERYTHING to this section to avoid impacting site header/footer */
    #section6{
      color: var(--ms-dark);
      background: var(--ms-white); /* Reverted to white as requested */
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      position: relative;
      isolation: isolate;
    }

    /* Removed overlay since background is white */
    #section6::before{
      display: none;
    }

    #section6 .s6-wrap{
      position: relative;
      z-index: 1;
      max-width: 1120px;
      margin: 0 auto;
      padding: 56px 18px;
    }

    /* Top area (title + tabs) gets a calm surface so text stays readable on gradient */
    #section6 .s6-top{
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(87, 186, 145, 0.40);
      border-radius: 14px;
      box-shadow: 0 10px 24px rgba(33, 81, 75, 0.10);
      padding: 22px 16px 14px;
    }

    #section6 h2{
      font-size: clamp(1.35rem, 1.2rem + 1vw, 2.05rem);
      line-height: 1.15;
      font-weight: 760;
      letter-spacing: -0.02em;
      margin: 0;
      text-align: center;
      color: var(--ms-dark);
    }

    #section6 .s6-sub{
      margin-top: 10px;
      text-align: center;
      font-size: 0.98rem;
      line-height: 1.45;
      opacity: 0.92;
      color: var(--ms-dark);
    }

    #section6 .s6-tabs{
      margin-top: 18px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      overflow-x: auto;
      padding: 10px 10px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.7) transparent;

      /* requested gradient across tabs area */
      background: var(--ms-grad);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.45);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.20),
        0 10px 18px rgba(33, 81, 75, 0.10);
    }

    #section6 .s6-tabs::-webkit-scrollbar{ height: 8px; }
    #section6 .s6-tabs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.65); border-radius: 999px; }
    #section6 .s6-tabs::-webkit-scrollbar-track{ background: transparent; }

    /* Tabs: controlled states */
    #section6 .s6-tab{
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,0.70);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 0.92rem;
      line-height: 1;
      font-weight: 660;
      color: var(--ms-dark);
      background: var(--ms-white);
      cursor: pointer;
      outline: none;
      transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
      white-space: nowrap;
    }

    #section6 .s6-tab:hover{ transform: translateY(-1px); }

    #section6 .s6-tab[aria-selected="true"]{
      background: var(--ms-green);
      color: var(--ms-white);
      border-color: var(--ms-green);
      box-shadow: 0 10px 20px rgba(33, 81, 75, 0.18);
    }

    #section6 .s6-tab:focus-visible{
      box-shadow: 0 0 0 3px rgba(87, 186, 145, 0.35), 0 10px 20px rgba(33, 81, 75, 0.16);
    }

    /* Panel container: dashboard feel */
    #section6 .s6-panel{
      margin-top: 16px;
      background: var(--ms-white);
      border: 1px solid rgba(87, 186, 145, 0.45);
      border-radius: 12px;
      box-shadow:
        inset 0 0 0 1px rgba(87, 186, 145, 0.20),
        0 16px 34px rgba(33, 81, 75, 0.14);
      overflow: hidden;
      position: relative;
    }

    /* subtle gradient strip at the top - Removed to standardize outline */
    #section6 .s6-panel::before{
      display: none;
    }

    #section6 .s6-panel-inner{
      padding: 18px 18px 16px;
    }

    /* Specialty header strip (visual anchor) */
    /* UPDATED: Centered text and gradient background */
    #section6 .s6-panel-header{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 12px;
      background: var(--ms-grad); /* Updated to gradient */
      border: 1px solid rgba(87, 186, 145, 0.38);
      border-radius: 10px;
      padding: 20px 24px;
      margin: 0 0 18px;
    }

    #section6 .s6-panel-title{
      font-size: 1.12rem;
      font-weight: 800;
      letter-spacing: -0.015em;
      margin: 0;
      color: var(--ms-white); /* Updated to white */
    }

    #section6 .s6-panel-note{
      font-size: 0.95rem;
      opacity: 0.95;
      margin: 0;
      max-width: 78ch;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.95); /* Updated to white */
    }

    #section6 .s6-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 14px;
      row-gap: 14px;
    }

    #section6 .s6-col{
      border: 1px solid rgba(33, 81, 75, 0.10);
      border-radius: 10px;
      padding: 12px 12px 12px; /* tightened top padding */
      background: var(--ms-white);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Visual flow: subtle left-to-right cue between columns */
    #section6 .s6-col:not(:last-child)::after{
      content: "";
      position: absolute;
      top: 50%;
      right: -8px;
      width: 16px;
      height: 1px;
      background: rgba(87, 186, 145, 0.55);
      transform: translateY(-50%);
      pointer-events: none;
    }
    #section6 .s6-col:not(:last-child)::before{
      content: "";
      position: absolute;
      top: 50%;
      right: -8px;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 6px solid rgba(87, 186, 145, 0.55);
      transform: translate(10px, -50%);
      pointer-events: none;
    }

    /* Column emphasis (solution + outcomes) */
    #section6 .s6-col:nth-child(3){
      background: rgba(33, 81, 75, 0.045);
      border-color: rgba(33, 81, 75, 0.16);
    }
    #section6 .s6-col:nth-child(4){
      background: rgba(87, 186, 145, 0.10);
      border-color: rgba(87, 186, 145, 0.45);
    }

    #section6 .s6-col h4{
      margin: 0 0 9px;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ms-dark);
      font-weight: 820;
      opacity: 0.75;
    }

    #section6 ul{
      margin: 0;
      padding-left: 0;
      list-style: none;
    }

    #section6 li{
      margin: 3px 0; /* tightened vertical rhythm */
      line-height: 1.25;
      font-size: 0.9rem;
      padding-left: 18px;
      position: relative;
      max-width: 56ch; /* shorter line lengths */
    }

    /* Icons */
    #section6 li::before{
      position: absolute;
      left: 0;
      top: 0px;
      font-weight: 900;
      color: var(--ms-green);
      line-height: 1.25;
    }

    /* Default arrow for cols 1-3 */
    #section6 .s6-col:not(:nth-child(4)) li::before {
      content: "→";
      font-size: 1.05em;
    }

    /* Checkmark for col 4 */
    #section6 .s6-col:nth-child(4) li::before {
      content: "✓";
      font-size: 1.05em;
    }

    /* CTA bar (inside panel): requested gradient + centered */
    #section6 .s6-cta{
      margin-top: 16px;
      padding: 14px 12px;
      border-radius: 12px;
      background: var(--ms-grad);
      border: 1px solid rgba(255,255,255,0.45);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #section6 .s6-cta-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    #section6 .s6-cta-micro{
      margin: 0;
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.92);
      text-align: center;
      font-weight: 500;
    }

    /* UPDATED: White capsule button */
    #section6 .s6-btn{
      appearance: none;
      border: 1px solid var(--ms-white);
      background: var(--ms-white); /* Updated to white */
      color: var(--ms-dark); /* Updated text color to dark for contrast */
      font-weight: 800;
      font-size: 0.95rem;
      border-radius: 12px;
      padding: 11px 16px;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(33, 81, 75, 0.18);
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
      text-align: center;
      line-height: 1.1;
    }

    #section6 .s6-btn:hover{
      transform: translateY(-1px);
      background: #21514B;
      color: #ffffff;
      box-shadow: 0 16px 32px rgba(33, 81, 75, 0.20);
      filter: brightness(0.98); /* Slightly dim white on hover */
    }

    #section6 .s6-btn:active{
      transform: translateY(0);
      box-shadow: 0 12px 26px rgba(33, 81, 75, 0.18);
    }

    #section6 .s6-btn:focus-visible{
      outline: none;
      box-shadow: 0 0 0 3px rgba(33, 81, 75, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.35);
    }

    /* Super-premium tab content transition */
    #section6 .s6-animate-in{
      animation: s6In 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
      will-change: transform, opacity, filter;
    }

    #section6 .s6-animate-in .s6-panel-header{
      animation: s6HeaderIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #section6 .s6-animate-in .s6-col{
      animation: s6ColIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
      will-change: transform, opacity, filter;
    }
    #section6 .s6-animate-in .s6-col:nth-child(1){ animation-delay: 40ms; }
    #section6 .s6-animate-in .s6-col:nth-child(2){ animation-delay: 80ms; }
    #section6 .s6-animate-in .s6-col:nth-child(3){ animation-delay: 120ms; }
    #section6 .s6-animate-in .s6-col:nth-child(4){ animation-delay: 160ms; }

    @keyframes s6In{
      from{ opacity: 0; transform: translateY(10px); filter: blur(2px); }
      to{ opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    @keyframes s6HeaderIn{
      from{ opacity: 0; transform: translateY(6px); }
      to{ opacity: 1; transform: translateY(0); }
    }

    @keyframes s6ColIn{
      from{ opacity: 0; transform: translateY(10px); filter: blur(1px); }
      to{ opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    /* Responsive */
    @media (max-width: 980px){
      #section6 .s6-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #section6 .s6-tabs{ justify-content: flex-start; }

      /* remove arrows between columns when grid wraps */
      #section6 .s6-col::before,
      #section6 .s6-col::after{ display: none; }
    }

    @media (max-width: 640px){
      #section6 .s6-wrap{ padding: 42px 14px; }
      #section6 .s6-top{ padding: 18px 12px 12px; }
      #section6 .s6-grid{ grid-template-columns: 1fr; }
      #section6 .s6-panel-inner{ padding: 16px 14px 14px; }

      #section6 .s6-col::before,
      #section6 .s6-col::after{ display: none; }

      #section6 .s6-btn{ width: 100%; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      #section6 .s6-tab{ transition: none; }
      #section6 .s6-tab:hover{ transform: none; }
      #section6 .s6-btn{ transition: none; }
      #section6 .s6-btn:hover{ transform: none; }
      #section6 .s6-animate-in{ animation: none; }
      #section6 .s6-animate-in .s6-col,
      #section6 .s6-animate-in .s6-panel-header{ animation: none; }
    }

    /* Utility for screen readers */
    #section6 .sr-only{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
}


        /* Custom Font Setup (System Fonts used as requested, but ensuring good fallbacks) */
body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
       
        /* Custom Gradient for Section with Dotted Pattern Overlay */
        .bg-medsole-gradient {
            background: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
            position: relative;
        }
       
        /* Dotted pattern overlay for section background */
        .bg-medsole-gradient::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }


        /* Smooth Scrolling */
        html {
            scroll-behavior: smooth;
        }


        /* Focus styles for accessibility */
        :focus-visible {
            outline: 3px solid rgba(87,186,145,0.25);
            outline-offset: 2px;
        }


        /* Premium Glass Card Effect */
        .glass-card {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(87,186,145,0.12);
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
       
        /* Gradient Orb - Top Left */
        .glass-card::before {
            content: '';
            position: absolute;
            top: -120px;
            left: -80px;
            width: 380px;
            height: 380px;
            background: radial-gradient(circle, rgba(87,186,145,0.25) 0%, transparent 70%);
            filter: blur(70px);
            pointer-events: none;
            z-index: 0;
        }
       
        /* Gradient Orb - Bottom Right */
        .glass-card::after {
            content: '';
            position: absolute;
            bottom: -140px;
            right: -100px;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(87,186,145,0.22) 0%, transparent 70%);
            filter: blur(90px);
            pointer-events: none;
            z-index: 0;
        }
       
        /* AR Motif Pattern - Subtle Flow Lines */
        .ar-motif {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 180 Q60 140 100 160 T180 120' stroke='%2357BA91' stroke-opacity='0.06' stroke-width='2' fill='none'/%3E%3Cpath d='M0 140 Q50 100 100 120 T200 80' stroke='%2357BA91' stroke-opacity='0.04' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='40' cy='160' r='3' fill='%2357BA91' fill-opacity='0.05'/%3E%3Ccircle cx='100' cy='140' r='2' fill='%2357BA91' fill-opacity='0.06'/%3E%3Ccircle cx='160' cy='110' r='3' fill='%2357BA91' fill-opacity='0.05'/%3E%3C/svg%3E");
            background-position: bottom right;
            background-repeat: no-repeat;
            background-size: 280px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.8;
        }
       
        /* Decision Divider */
        .decision-divider {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(87,186,145,0.6) 20%, rgba(87,186,145,0.6) 80%, transparent 100%);
            margin: 24px auto;
        }
       
        /* Subtle Dotted Pattern for cards */
        .bg-grid-pattern {
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%2321514B' fill-opacity='0.07'/%3E%3C/svg%3E");
}

        /* Section Background */
        .ehr-section-bg {
            background: linear-gradient(to right, #21514B, #57BA91) !important;
        }

        /* Heading Styles */
        .ehr-section-bg h2,
        .ehr-section-bg h2 span {
            color: #ffffff !important;
            font-family: 'Poppins', sans-serif !important;
        }

        /* Logo Carousel Container */
        .logo-carousel {
            width: 100%;
            overflow: hidden;
            padding: 20px 0 40px;
        }

        .carousel-row {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin: 20px 0;
        }

        .carousel-track {
            display: flex;
            width: max-content;
            gap: 24px;
            animation: scroll-left 60s linear infinite;
        }

        .right-to-left .carousel-track {
            animation: scroll-right 60s linear infinite;
        }

        /* Hover pause per row */
        .carousel-row:hover .carousel-track {
            animation-play-state: paused;
        }

        /* Premium logo cards */
        .logo-card {
            width: 200px;
            height: 110px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 18px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 2px solid #22c55e;
        }

        .logo-card:hover {
            transform: scale(1.08);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
        }

        /* Image fitting */
        .logo-card img {
            max-width: 150%;
            max-height: 150%;
            object-fit: cover;
            filter: saturate(1.1);
            transform: scale(1.1);
        }

        /* Animations */
        @keyframes scroll-left {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        @keyframes scroll-right {
            from { transform: translateX(-50%); }
            to { transform: translateX(0); }
        }

        /* Fade edges for premium look */
        .carousel-row::before,
        .carousel-row::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 10;
            pointer-events: none;
        }

        .carousel-row::before {
            left: 0;
            background: linear-gradient(to right, rgba(33, 81, 75, 0.9), transparent);
        }

        .carousel-row::after {
            right: 0;
            background: linear-gradient(to left, rgba(87, 186, 145, 0.9), transparent);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .logo-card {
                width: 160px;
                height: 90px;
                padding: 14px;
            }
            
            .carousel-track {
                gap: 16px;
            }
            
            .carousel-row::before,
            .carousel-row::after {
                width: 50px;
            }
        }

        @media (max-width: 480px) {
            .logo-card {
                width: 130px;
                height: 75px;
                padding: 10px;
            }
}
    :root{
      --ms-dark-teal:#21514B;
      --ms-green:#57BA91;
      --ms-gradient: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
      --ms-ink:#0f172a;
      --ms-surface:#ffffff;
      --ms-muted: rgba(15,23,42,.70);
    }

    /* -------------------- Demo page scaffold (fully namespaced) -------------------- */
    /* Only for this standalone file; does not impact the MedSole CTA components which are independently scoped. */
    body.ms-demo-page{
      margin:0;
      background: radial-gradient(1200px 520px at 10% 0%, rgba(87,186,145,.10), transparent 60%),
                  radial-gradient(900px 480px at 90% 10%, rgba(33,81,75,.10), transparent 55%),
                  #F7FBFA;
      color: var(--ms-ink);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }
    .ms-demo-wrap{
    max-width: 1000px; /* Increased slightly for side-by-side layout */
    margin: 0 auto;
    padding: 40px 20px 50px; /* Reduced vertical padding */
    }
    .ms-content-header{ text-align: center; margin-bottom: 32px; }
    .ms-demo-kicker{ 
            display:inline-flex; align-items:center; gap:8px; padding: 6px 14px; 
            background: rgba(33,81,75,.07); border: 1px solid rgba(33,81,75,.12); 
            border-radius: 999px; color: rgba(33,81,75,.92); font-weight: 800; 
            letter-spacing: .02em; font-size: 11px; text-transform: uppercase; margin-bottom: 12px; 
        }
    .ms-demo-title{ 
            margin: 0 0 12px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; 
            font-size: clamp(28px, 3.5vw, 44px); /* Reduced max size */
            color: var(--ms-ink); text-wrap: balance; 
        }
    .ms-demo-lede{ 
            margin: 0 auto; max-width: 68ch; color: var(--ms-muted); line-height: 1.6; 
            font-size: clamp(16px, 2vw, 18px); /* Compacted font size */
            text-wrap: pretty; 
        }

    .ms-pro-section{ margin-bottom: 32px; } /* Reduced from 60px */
        
    .ms-pro-section h2{ 
            font-size: clamp(20px, 2.5vw, 26px); /* Compacted header */
            font-weight: 800; color: var(--ms-ink); margin: 0 0 12px; letter-spacing: -0.02em; 
        }
        
    .ms-pro-section p{ 
            font-size: 15px; line-height: 1.6; color: rgba(15,23,42,.80); margin: 0 0 16px; 
        }
    
    .ms-content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }
      @media (min-width: 768px) {
            .ms-content-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                align-items: start;
            }
        }
    .ms-check-list{ list-style: none; padding: 0; margin: 16px 0; }
    .ms-check-list li{ position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 15px; color: var(--ms-ink); font-weight: 500; }
    .ms-check-list li::before{ 
            content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; 
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357BA91' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 
            background-size: contain; background-repeat: no-repeat; 
        }

    /* Cards for emphasis */
    .ms-pro-card{
      background: #fff;
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 12px 32px rgba(15,23,42,.04);
      margin: 30px 0;
    }
    
    .ms-pro-card-alert{
      border-left: 4px solid #E11D48;
      background: linear-gradient(90deg, #FFF1F2 0%, #FFFFFF 100%);
    }
    
    .ms-pro-card h3{
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 800;
      color: #9F1239;
    }
    
    .ms-pro-card p{ margin: 0; }

    /* List grids */
    .ms-pro-grid-list{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin: 24px 0;
    }

    .ms-pro-grid-item{
  background: #fff;
  border: 1.5px solid #57BA91;   /* MedSole green outline */
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ms-dark-teal);
  display: flex;
  align-items: center;
  gap: 10px;

  box-shadow: 0 6px 18px rgba(87,186,145,0.12); /* subtle premium lift */
}
    
    .ms-pro-grid-item::before{
      content: "";
      width: 8px;
      height: 8px;
      background: var(--ms-green);
      border-radius: 50%;
    }
    
    .ms-highlight-box{
      background: var(--ms-dark-teal);
      color: #fff;
      padding: 24px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      margin-top: 30px;
      box-shadow: 0 12px 30px rgba(33,81,75,.2);
    }

    .ms-demo-spacer{
      height: 5px;
    }

    /* -------------------- FINAL CONVERSION SECTION (scoped + safe) -------------------- */
    /* IMPORTANT: All CTA styles are scoped under .ms-final-conversion-wrap */

    .ms-final-conversion-wrap{
      width:100%;
      isolation:isolate;
    }

    .ms-final-conversion-inner{
      max-width: 1120px;
      margin: 0 auto;
      /* bottom padding tuned so next section (if any) has breathing room */
      padding: 22px 20px 34px;
    }

    .ms-cta-banner{
      background: var(--ms-gradient);
      border-radius: 26px;
      padding: clamp(24px, 3.2vw, 34px);
      color: rgba(255,255,255,.92);
      position: relative;
      overflow: hidden;
      box-shadow:
        0 22px 60px rgba(33,81,75,.22),
        0 10px 24px rgba(0,0,0,.14);
      border: 1px solid rgba(255,255,255,.14);
    }

    /* Premium light shaping (calm, controlled) */
    .ms-cta-banner::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(900px 340px at 12% 0%, rgba(255,255,255,.22), transparent 62%),
        radial-gradient(700px 320px at 92% 18%, rgba(255,255,255,.14), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
      pointer-events:none;
    }

    .ms-cta-banner::after{
      /* subtle texture to prevent "flat" gradient feel */
      content:"";
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(1px 1px at 16% 22%, rgba(255,255,255,.12), transparent 55%),
        radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,.10), transparent 55%),
        radial-gradient(1px 1px at 86% 62%, rgba(255,255,255,.10), transparent 55%),
        radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.08), transparent 55%);
      opacity:.55;
      pointer-events:none;
      mix-blend-mode: overlay;
    }

    .ms-cta-content{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      /* tighter, more premium vertical rhythm */
      gap: 14px;
    }

    .ms-cta-head{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
    }

    .ms-cta-title{
      margin:0;
      font-weight: 900;
      letter-spacing:-0.03em;
      color:#fff;
      font-size: clamp(22px, 2.25vw, 36px);
      line-height: 1.10;
      text-wrap: balance;
    }

    .ms-cta-subline{
      margin:0;
      max-width: 920px;
      font-size: clamp(14px, 1.15vw, 18px);
      line-height: 1.62;
      color: rgba(255,255,255,.86);
      text-wrap: pretty;
    }

    .ms-cta-actions{
      width:100%;
      display:flex;
      align-items:stretch;
      justify-content:center;
      gap: 14px;
      /* optimum distance from headline to CTAs */
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .ms-primary-stack{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      min-width: min(540px, 100%);
    }

    .ms-secondary-stack{
      display:flex;
      align-items:stretch;
      justify-content:center;
      gap: 12px;
      flex: 0 0 auto;
      min-width: min(420px, 100%);
    }

    .ms-btn{
      -webkit-tap-highlight-color: transparent;
      appearance:none;
      border:0;
      background:none;
      color:inherit;
      font: inherit;
      text-decoration:none;
      cursor:pointer;
      user-select:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease, filter .14s ease;
      white-space:nowrap;
      will-change: transform;
    }

    .ms-btn:focus-visible{
      outline: 3px solid rgba(255,255,255,.58);
      outline-offset: 3px;
    }

    .ms-btn-primary{
      width:100%;
      height: 58px;
      border-radius: 14px;
      background: var(--ms-green);
      color:#fff;
      font-weight: 900;
      letter-spacing: -0.01em;
      font-size: 17px;
      box-shadow: 0 10px 30px rgba(87,186,145,0.35);
      border: 1px solid rgba(255,255,255,.18);
    }

    .ms-btn-primary:hover{
      background: #4FAE89;
      transform: translateY(-1px);
      box-shadow: 0 14px 40px rgba(87,186,145,0.45);
      filter: saturate(1.02);
    }

    .ms-btn-primary:active{
      background: #3E9D79;
      transform: translateY(0);
    }

    .ms-btn-secondary{
      height: 48px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,0.55);
      color:#fff;
      font-weight: 800;
      letter-spacing: -0.01em;
      font-size: 14.5px;
      background: transparent;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
    }

    .ms-btn-secondary:visited{ color:#fff; }

    .ms-btn-secondary:hover{
      background: rgba(87,186,145,0.15);
      border-color: var(--ms-green);
      color: var(--ms-green);
      transform: translateY(-1px);
      box-shadow: 0 14px 34px rgba(0,0,0,.10);
    }

    .ms-btn-secondary:active{ transform: translateY(0); }

    .ms-btn-icon{
      width: 18px;
      height: 18px;
      display:inline-block;
      opacity:.95;
    }

    .ms-caption{
      margin:0;
      font-size: 13px;
      color: rgba(255,255,255,.86);
      font-weight: 650;
      letter-spacing: -0.005em;
    }

    .ms-micro-line{
      margin:0;
      font-size: 12.6px;
      color: rgba(255,255,255,.74);
    }

    .ms-subcaption{
      margin:0;
      font-size: 12.5px;
      color: rgba(255,255,255,.78);
    }

    /* Tooltips / helper microcopy */
    .ms-tooltip{
      position:relative;
      display:inline-flex;
      flex-direction:column;
      align-items:center;
      gap: 8px;
      flex: 1 1 0;
      min-width: 0;
    }

    .ms-tooltip[data-tip] .ms-tip-mobile{ display:none; }
    

    @media (hover:hover) and (pointer:fine){
      .ms-tooltip[data-tip]:hover::after,
      .ms-tooltip[data-tip]:focus-within::after{
        content: attr(data-tip);
        position:absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 280px;
        background: rgba(12,18,28,.94);
        color: rgba(255,255,255,.96);
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 12.5px;
        line-height: 1.35;
        box-shadow: 0 18px 44px rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.14);
        z-index: 3;
        white-space: normal;
        text-align:center;
      }
      .ms-tooltip[data-tip]:hover::before,
      .ms-tooltip[data-tip]:focus-within::before{
        content:"";
        position:absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        width: 10px;
        height: 10px;
        background: rgba(12,18,28,.94);
        border-left: 1px solid rgba(255,255,255,.14);
        border-bottom: 1px solid rgba(255,255,255,.14);
        transform: translateX(-50%) rotate(-45deg);
        z-index: 3;
      }
    }

    @media (max-width: 640px){
      .ms-tooltip[data-tip] .ms-tip-mobile{
        display:block;
        margin-top:-2px;
        font-size: 12.5px;
        line-height:1.35;
        color: rgba(255,255,255,.78);
        text-align:center;
      }
    }

    /* Trust strip (White Cards, no icons) */
    .ms-trust-strip{
      width:100%;
      margin-top: 18px;
      padding-top: 6px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      align-items:stretch;
      gap: 14px;
    }

    .ms-trust-item{
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding: 16px 18px;
      min-height: 104px;
      align-items:center;
      text-align: center;
      background: #FFFFFF;
      border-radius: 14px;
      border: 1px solid rgba(33,81,75,.10);
      box-shadow:
        0 10px 24px rgba(0,0,0,0.10),
        0 2px 0 rgba(255,255,255,0.6) inset;
    }

    .ms-trust-title{
      margin:0;
      font-weight: 900;
      color: var(--ms-dark-teal);
      font-size: 14.5px;
      letter-spacing: -0.012em;
      line-height: 1.2;
    }

    .ms-trust-desc{
      margin:0;
      font-size: 13px;
      color: rgba(33,81,75,.84);
      line-height:1.45;
    }

    .ms-trust-desc strong{
      font-weight: 900;
      color: rgba(33,81,75,.98);
    }

    @media (max-width: 900px){
      .ms-trust-strip{ grid-template-columns: 1fr; gap: 12px; }
      .ms-trust-item + .ms-trust-item{ border-top: none; }
    }

    /* Testimonial */
    .ms-testimonial{
      width:100%;
      margin-top: 18px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.78);
      font-style: italic;
      font-size: clamp(13px, 1.05vw, 15px);
      line-height: 1.65;
      text-align:center;
      text-wrap: balance;
    }

    /* Action layout responsiveness */
    @media (max-width: 920px){
      .ms-secondary-stack{ min-width: min(540px, 100%); }
    }

    @media (max-width: 640px){
      .ms-cta-content{ gap: 12px; }
      .ms-cta-head{ gap: 9px; }
      .ms-cta-actions{ gap: 12px; margin-top: 8px; }
      .ms-primary-stack{ min-width: 100%; }
      .ms-secondary-stack{
        min-width: 100%;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .ms-trust-strip{ margin-top: 14px; gap: 12px; }
      .ms-btn-secondary{ height: 48px; font-size: 14.5px; border-radius: 12px; }
      .ms-btn-primary{ height: 60px; font-size: 17px; border-radius: 14px; }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .ms-btn{ transition:none !important; }
}

/* SCOPED CSS to prevent conflicts with Header/Footer/Upper Sections */
#rcm-testimonials-wrapper {
    /* Define variables only within this ID */
    --rcm-primary: #21514B;
    --rcm-accent: #57BA91;
    --rcm-white: #ffffff;
    --rcm-shadow: rgba(33, 81, 75, 0.12);
    --rcm-shadow-deep: rgba(33, 81, 75, 0.2);
    --rcm-text-dark: #2d3748;
    --rcm-text-muted: #718096;
    
    width: 100%;
    position: relative;
    /* Clear float and ensure block formatting context */
    display: block;
    clear: both;
    z-index: 1; 
    background: linear-gradient(135deg, #f8fafa 0%, #e8f0ef 100%);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

#rcm-testimonials-wrapper * {
    box-sizing: border-box;
}

/* Main Section Styling */
.rcm-testimonial-section {
    padding: 80px 20px 120px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* Headers */
.rcm-section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.rcm-section-label {
    display: inline-block;
    background: linear-gradient(135deg, var(--rcm-primary), var(--rcm-accent));
    color: var(--rcm-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.rcm-section-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--rcm-primary);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.rcm-text-gradient {
    background: linear-gradient(to right, #21514B, #57BA91);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rcm-section-subtitle {
    font-size: 18px;
    color: var(--rcm-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Coverflow Logic */
.rcm-coverflow-container {
    perspective: 1200px;
    perspective-origin: 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 580px; /* Reserves space */
    position: relative;
    z-index: 2;
}

.rcm-coverflow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 1400px;
}

/* Cards */
.rcm-testimonial-card {
    position: absolute;
    width: 380px;
    background: var(--rcm-white);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 20px 60px var(--rcm-shadow), 0 8px 20px var(--rcm-shadow);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Card 3D Positions */
.rcm-card-pos-0 { transform: translateX(-520px) translateZ(-150px) rotateY(35deg) scale(0.75); opacity: 0.6; z-index: 1; }
.rcm-card-pos-1 { transform: translateX(-280px) translateZ(-50px) rotateY(18deg) scale(0.88); opacity: 0.85; z-index: 2; }
.rcm-card-pos-2 { transform: translateX(0) translateZ(100px) rotateY(0deg) scale(1.05); opacity: 1; z-index: 5; }
.rcm-card-pos-3 { transform: translateX(280px) translateZ(-50px) rotateY(-18deg) scale(0.88); opacity: 0.85; z-index: 2; }
.rcm-card-pos-4 { transform: translateX(520px) translateZ(-150px) rotateY(-35deg) scale(0.75); opacity: 0.6; z-index: 1; }

/* Active Glow */
.rcm-card-pos-2::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    background: linear-gradient(135deg, var(--rcm-accent), var(--rcm-primary));
    border-radius: 18px;
    z-index: -1;
    opacity: 0.3;
}

/* Card Content Details */
.rcm-profile-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.rcm-profile-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rcm-primary), var(--rcm-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rcm-white);
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.rcm-profile-image img { width: 100%; height: 100%; object-fit: cover; }

.rcm-profile-info { flex: 1; }
.rcm-profile-name { font-size: 18px; font-weight: 700; color: var(--rcm-primary); margin: 0 0 4px 0; }
.rcm-profile-role { font-size: 13px; color: var(--rcm-text-muted); margin: 0; }
.rcm-profile-org { font-size: 12px; color: var(--rcm-accent); font-weight: 600; margin-top: 2px; }

.rcm-star-rating { display: flex; gap: 4px; margin-bottom: 20px; }
.rcm-star-rating .star { color: var(--rcm-accent); font-size: 20px; }

.rcm-quote-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--rcm-primary);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.rcm-quote-text {
    font-size: 14px;
    color: var(--rcm-text-dark);
    line-height: 1.7;
    position: relative;
    margin: 0;
}

/* Nav Dots */
.rcm-nav-dots { display: flex; justify-content: center; gap: 12px; margin-top: 50px; }
.rcm-nav-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--rcm-primary); opacity: 0.3;
    cursor: pointer; border: none; padding: 0;
    transition: all 0.3s ease;
}
.rcm-nav-dot.rcm-active { opacity: 1; background: var(--rcm-accent); transform: scale(1.3); }

/* Trust Badge */
.rcm-trust-badge {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 40px; color: var(--rcm-text-muted);
    font-size: 14px;
}
.rcm-trust-badge svg { width: 20px; height: 20px; fill: var(--rcm-accent); }

/* Decorations */
.rcm-bg-decoration {
    position: absolute;
    width: 400px; height: 400px; border-radius: 50%;
    background: linear-gradient(135deg, var(--rcm-accent), var(--rcm-primary));
    opacity: 0.03; z-index: 0; pointer-events: none;
}
.rcm-bg-decoration-1 { top: -200px; left: -100px; }
.rcm-bg-decoration-2 { bottom: -200px; right: -100px; }

/* Responsive */
@media (max-width: 1200px) {
    .rcm-card-pos-0, .rcm-card-pos-4 { display: none; }
    .rcm-card-pos-1 { transform: translateX(-220px) translateZ(-30px) rotateY(15deg) scale(0.9); }
    .rcm-card-pos-3 { transform: translateX(220px) translateZ(-30px) rotateY(-15deg) scale(0.9); }
    .rcm-testimonial-card { width: 340px; }
}

@media (max-width: 768px) {
    .rcm-section-title { font-size: 32px; }
    .rcm-coverflow-container { min-height: auto; perspective: none; }
    .rcm-coverflow-wrapper { flex-direction: column; gap: 20px; padding: 20px; transform-style: flat; }
    .rcm-testimonial-card {
        position: relative; width: 100%; max-width: 400px;
        transform: none !important; opacity: 1 !important; display: none;
    }
    .rcm-testimonial-card.rcm-mobile-active { display: block; animation: rcmFadeInUp 0.5s ease; }
    .rcm-card-pos-2::before { display: none; }
}

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

:root{
      --ms-bg:#21514B;
      --ms-accent:#57BA91;
      --ms-line:rgba(87, 186, 145, 0.35);
      --ms-card:#275e58; /* slightly lighter than --ms-bg */
      --ms-card-open:#2b6a63;
      --ms-text:rgba(255,255,255,0.95);
      --ms-muted:rgba(255,255,255,0.75);
      --ms-muted2:rgba(255,255,255,0.62);
    }

    /* Self-contained section styling only (does not affect global page flow) */
    .ms-faq-section{
      background: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
      color: var(--ms-text);
      overflow: clip; /* avoids glow overflow creating scrollbars */
    }

    .ms-glass{
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.90);
      box-shadow:
        0 10px 30px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 18px;
    }

    .ms-pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--ms-line);
      background: rgba(0,0,0,0.12);
      color: var(--ms-muted);
      font-weight: 600;
      letter-spacing: .2px;
      font-size: .85rem;
      width: fit-content;
    }

    .ms-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.85rem 1rem;
      border-radius: 12px;
      background: var(--ms-accent);
      color: #0b251f;
      font-weight: 800;
      box-shadow: 0 10px 22px rgba(87,186,145,0.22);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
      will-change: transform;
    }
    .ms-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 28px rgba(87,186,145,0.28); }
    .ms-cta:active{ transform: translateY(0px); }
    .ms-cta:focus-visible{ outline: 3px solid rgba(87,186,145,0.45); outline-offset: 3px; }

    .ms-support{
      background: #ffffff;
      border: 1px solid var(--ms-line);
      border-radius: 16px;
      padding: 1rem;
      color: #0b251f;
      box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    }
    .ms-support p{ color: rgba(11,37,31,0.80); }
    .ms-support .text-xs{ color: rgba(11,37,31,0.62); }

    /* Accordion cards */
    .ms-faq-card{
      position: relative;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 16px;
      padding: 1.05rem 1.05rem;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .ms-faq-card::before{
      content:"";
      position:absolute;
      left:0;
      top: 12px;
      bottom: 12px;
      width: 4px;
      border-radius: 999px;
      background: transparent;
      transition: background .18s ease;
    }

    .ms-faq-card:hover{
      border-color: rgba(87,186,145,0.35);
      box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 1px rgba(87,186,145,0.10);
      cursor: pointer;
    }

    .ms-faq-card.is-open{
      background: rgba(87,186,145,0.10);
      border-color: rgba(87,186,145,0.42);
      box-shadow: 0 18px 38px rgba(0,0,0,0.28), 0 0 0 1px rgba(87,186,145,0.16);
    }

    .ms-faq-card.is-open::before{ background: var(--ms-accent); }

    .ms-q-btn{
      width: 100%;
      text-align: left;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 1rem;
      padding: 0.2rem 0.25rem;
      user-select:none;
    }
    .ms-q-title{
      font-size: 1.05rem;
      line-height: 1.3;
      font-weight: 800;
      color: var(--ms-text);
    }

    .ms-arrow{
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      margin-top: 2px;
      opacity: .92;
      transform: rotate(0deg);
      transition: transform .18s ease;
    }
    .ms-faq-card.is-open .ms-arrow{ transform: rotate(180deg); }

    .ms-answer-wrap{
      height: 0px;
      overflow: hidden;
      transition: height .26s ease;
    }
    .ms-answer{
      padding: .65rem .25rem .2rem;
      color: var(--ms-muted);
      line-height: 1.75;
      font-size: 0.98rem;
    }

    .ms-divider{
      height: 1px;
      background: rgba(87,186,145,0.22);
      margin-top: .8rem;
      margin-bottom: .75rem;
    }

    .ms-feedback{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .8rem;
      padding: 0 .25rem .65rem;
      color: var(--ms-muted2);
      font-size: .92rem;
      opacity: 0;
      transform: translateY(-2px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .ms-faq-card.is-open .ms-feedback{
      opacity: 1;
      transform: translateY(0);
    }

    .ms-feedback-actions{
      display:flex;
      gap: .5rem;
    }

    .ms-icon-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      padding: .45rem .6rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.10);
      color: var(--ms-text);
      transition: border-color .15s ease, transform .12s ease, background .15s ease;
    }
    .ms-icon-btn:hover{ border-color: rgba(87,186,145,0.35); background: rgba(87,186,145,0.10); transform: translateY(-1px); }
    .ms-icon-btn:active{ transform: translateY(0); }
    .ms-icon-btn:focus-visible{ outline: 3px solid rgba(87,186,145,0.45); outline-offset: 2px; }

    .ms-vote-status{
      padding: 0 .25rem 0.9rem;
      color: rgba(255,255,255,0.72);
      font-size: .92rem;
      display:none;
    }

    .ms-faq-card.voted .ms-vote-status{ display:block; }

    /* Sticky left column on desktop, but never overlaps header because it’s inside section flow */
    @media (min-width: 1024px){
      .ms-sticky{ position: sticky; top: 2rem; }
    }

    /* White cards (support + questions) while keeping the same premium behavior */
    .ms-faq-card{
      background: #ffffff;
      border: 1px solid rgba(33,81,75,0.16);
    }
    .ms-faq-card.is-open{
      background: #ffffff;
      border-color: rgba(87,186,145,0.55);
      box-shadow: 0 18px 38px rgba(0,0,0,0.18), 0 0 0 1px rgba(87,186,145,0.18);
    }
    .ms-faq-card .ms-q-title{ color: #0b251f; }
    .ms-faq-card .ms-answer{ color: rgba(11,37,31,0.82); }
    .ms-faq-card .ms-feedback{ color: rgba(11,37,31,0.68); }
    .ms-faq-card .ms-divider{ background: rgba(87,186,145,0.30); }
    .ms-faq-card .ms-vote-status{ color: rgba(11,37,31,0.72); }
    .ms-faq-card .ms-arrow path{ stroke: rgba(11,37,31,0.80); }
    .ms-faq-card .ms-icon-btn{
      border: 1px solid rgba(33,81,75,0.18);
      background: rgba(33,81,75,0.06);
      color: #0b251f;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .ms-answer-wrap{ transition: none; }
      .ms-arrow{ transition: none; }
      .ms-faq-card{ transition: none; }
      .ms-cta{ transition: none; }
}