
        /* General Styles */
        body {
            scroll-behavior: smooth;
        }

        /* Infographic Timeline Styles */
        .step-card {
            position: relative;
            padding-right: 2.5rem; /* Space for the line and icon */
        }
        .step-card:not(:last-child)::before {
            content: '';
            position: absolute;
            right: 18px; /* Center the line */
            top: 40px; /* Start below the icon */
            width: 4px;
            height: calc(100% + 4rem); /* card height + space between cards */
            border-radius: 2px;
        }
        .step-card:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 12px; /* Center the arrow on the line */
            top: calc(100% + 1.5rem); /* position it in the gap */
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid; /* Color will be set by the rules below */
        }
        #step1::before { background-color: #7dd3fc; }
        #step1::after { border-top-color: #7dd3fc; }
        #step2::before { background-color: #86efac; }
        #step2::after { border-top-color: #86efac; }
        #step3::before { background-color: #fde047; } /* No arrow for the last item */

        .step-icon {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid #ffffff; /* white */
            z-index: 10;
        }

        /* Content Toggle Styles */
        .toggle-arrow { display: inline-block; margin-right: 0.5rem; cursor: pointer; }
        .toggle-arrow svg { animation: blink 1.8s infinite ease-in-out; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        .rotate-180 { transform: rotate(180deg); }

        /* Custom Bullet Styles */
        .custom-bullets { list-style-type: none; padding-right: 0; }
        .custom-bullets li { position: relative; padding-right: 1.25rem; }
        .custom-bullets li::before { content: '•'; position: absolute; right: 0; top: 0; font-size: 1.25rem; line-height: 1.5rem; }
        .bullets-sky li::before { color: #0ea5e9; }
        .bullets-green li::before { color: #22c55e; }
        .bullets-yellow li::before { color: #eab308; }
        .bullets-amber li::before { color: #f59e0b; }

        /* Image Zoom Modal Styles (prefixed with fx- to avoid conflicts) */
        .fx-modal {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.85);
            display: none; /* Initially hidden */
            align-items: center;
            justify-content: center;
        }
        .fx-modal-content {
            position: relative;
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
            cursor: grab;
            transition: transform 0.2s ease-out;
        }
        .fx-modal-content.grabbing {
            cursor: grabbing;
        }
        .fx-close, .fx-zoom-controls {
            position: absolute;
            top: 15px;
            color: #f1f1f1;
            font-size: 30px;
            font-weight: bold;
            transition: 0.3s;
            z-index: 1001;
            -webkit-user-select: none; /* Safari */
            -ms-user-select: none; /* IE 10+ and Edge */
            user-select: none; /* Standard syntax */
        }
        .fx-close {
            right: 35px;
        }
        .fx-zoom-controls {
            left: 35px;
            display: flex;
            gap: 15px;
        }
        .fx-close:hover, .fx-close:focus, .fx-zoom-btn:hover, .fx-zoom-btn:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }