/* Define colors based on class names */
        :root {
            --brand-blue: #0A192F; /* Example blue */
            --brand-gold: #FFD700; /* Example gold */
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --white: #ffffff;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--slate-100);
            margin: 0;
            padding: 0;
        }

        .containersx {
            max-width: 1200px;
            margin: 4rem auto; /* my-16 */
            padding: 0 1rem; /* px-4 */
        }

        .grid {
            display: grid;
            gap: 2.5rem; /* gap-10 */
        }

        @media (min-width: 1024px) {
            .lg\:grid-cols-3 {
                grid-template-columns: repeat(3, 1fr);
            }
            .lg\:col-span-2 {
                grid-column: span 2 / span 2;
            }
        }

        .space-y-8 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 2rem;
        }

        .space-y-4 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 1rem;
        }

        .space-y-3 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 0.75rem;
        }

        .space-y-1 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 0.25rem;
        }

        .bg-white { background-color: var(--white); }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
        .shadow-2xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
        .border { border: 1px solid; }
        .border-slate-200 { border-color: var(--slate-200); }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .font-bold { font-weight: 700; }
        .text-brand-blue { color: var(--brand-blue); }
        .mb-6 { margin-bottom: 1.5rem; }
        .flex { display: flex; }
        .items-center { align-items: center; }
        .border-b { border-bottom-width: 1px; }
        .pb-2 { padding-bottom: 0.5rem; }
        .mr-3 { margin-right: 0.75rem; }
        .text-brand-gold { color: var(--brand-gold); }
        .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
        @media (min-width: 768px) {
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .gap-8 { gap: 2rem; }
        .font-bold { font-weight: 700; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-slate-400 { color: var(--slate-400); }
        .uppercase { text-transform: uppercase; }
        .tracking-widest { letter-spacing: 0.1em; }
        .mb-3 { margin-bottom: 0.75rem; }
        .text-slate-500 { color: var(--slate-500); }
        .italic { font-style: italic; }
        .bg-brand-blue { background-color: var(--brand-blue); }
        .text-white { color: var(--white); }
        .h-fit { height: -moz-fit-content; height: fit-content; }
        .sticky { position: sticky; }
        .top-6 { top: 1.5rem; }
        .text-center { text-align: center; }
        .text-blue-200 { color: #bee3f8; } /* Example color */
        .w-full { width: 100%; }
        .p-3 { padding: 0.75rem; }
        .rounded-lg { border-radius: 0.5rem; }
        .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
        .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
        .placeholder-blue-200::placeholder { color: #bee3f8; }
        .outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
        .focus\:border-brand-gold:focus { border-color: var(--brand-gold); }
        .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
        .text-\[10px\] { font-size: 10px; }
        .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .max-h-40 { max-height: 10rem; }
        .overflow-y-auto { overflow-y: auto; }
        .pr-2 { padding-right: 0.5rem; }
        .text-blue-300\/50 { color: rgba(125, 211, 252, 0.5); }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        @media (min-width: 768px) {
            .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
        }
        .border-t { border-top-width: 1px; }
        .pt-4 { padding-top: 1rem; }
        .justify-between { justify-content: space-between; }
        .text-blue-100 { color: #ebf8ff; }
        .mt-1 { margin-top: 0.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-blue-300 { color: #7dd3fc; }
        .text-\[9px\] { font-size: 9px; }
        .text-blue-400 { color: #38b2ac; }
        .text-right { text-align: right; }
        .mt-4 { margin-top: 1rem; }
        .hover-gold:hover { background-color: #facc15; }
        .text-brand-blue { color: var(--brand-blue); }
        .font-black { font-weight: 900; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .active\:scale-95:active { transform: scale(0.95); }
        
        /* Custom service item styling to mimic the image checkboxes */
        .service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            background-color: var(--slate-100);
            border-radius: 0.5rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .service-item:hover {
            background-color: var(--slate-200);
        }

        .service-checkbox {
            width: 1.25rem;
            height: 1.25rem;
            border: 1px solid var(--slate-400);
            border-radius: 0.25rem;
        }

        .service-description {
            font-size: 0.875rem;
            color: var(--brand-blue);
        }

        .service-subtext {
            display: block;
            font-size: 0.625rem;
            color: var(--slate-500);
            margin-top: 0.125rem;
        }