/* OKLCH palettes generated for Tailwind-compatible CSS variables */
:root {

    --bg-opacity: 1;

    --brand-hue: 277; /* 277 is our purple blue */

    --brand-hue: 260;
    --accent-hue: 230;

    --gray-50: oklch(0.982 0.005 260); /* #F7F9FF */
    /* Changed --grey-50 from chroma 0.01 to 0.005 */
    --gray-100: oklch(0.950 0.005 var(--brand-hue) / var(--bg-opacity)); /*  #ECEEF5 */
    /* Changed --grey-100 from chroma 0.01 to 0.005 */
    --gray-200: oklch(0.875 0.005 var(--brand-hue)); /* #D4D5DD */
    --gray-300: oklch(0.800 0.005 var(--brand-hue)); /* #BCBDC4 */
    --gray-400: oklch(0.725 0.005 var(--brand-hue)); /* #A4A6AD */
    --gray-500: oklch(0.650 0.005 var(--brand-hue)); /* #8D8F95 */
    --gray-600: oklch(0.575 0.005 var(--brand-hue)); /* #77787F */
    --gray-700: oklch(0.500 0.005 var(--brand-hue)); /* #626369 */
    --gray-800: oklch(0.425 0.005 var(--brand-hue)); /* #4D4E54 */
    --gray-900: oklch(0.350 0.005 var(--brand-hue)); /* #393A40 */
    --gray-950: oklch(0.270 0.005 var(--brand-hue)); /* #25262B */

    --brand-50: oklch(0.982 0.015 var(--brand-hue) / var(--bg-opacity) ); /*  ##f3faff */  
    /* Changed --brand-50 from 0.040 to 0.015 */
    --brand-100: oklch(0.950 0.030 var(--brand-hue) / var(--bg-opacity) ); /* #e3efff */
    /* Changed --brand-100 from 0.060 to 0.030 */
    --brand-200: oklch(0.875 0.095 var(--brand-hue) / var(--bg-opacity) ); /* #b6d7ff */
    --brand-300: oklch(0.800 0.130 var(--brand-hue) / var(--bg-opacity) ); /* #8fbeff */

    --brand-400: oklch(0.725 0.153 var(--brand-hue) / var(--bg-opacity) ); /* #6ba5ff */
    --brand-500: oklch(0.650 0.177 var(--brand-hue) / var(--bg-opacity) ); /* #4a8bf9 */
    --brand-600: oklch(0.575 0.200 var(--brand-hue) / var(--bg-opacity) ); /* #2571ec */
    --brand-700: oklch(0.500 0.180 var(--brand-hue) / var(--bg-opacity) ); /* #195cc7 */
    --brand-800: oklch(0.425 0.160 var(--brand-hue) / var(--bg-opacity) ); /* #0c48a4 */
    --brand-900: oklch(0.300 0.130 var(--brand-hue) / var(--bg-opacity) ); /* #00276d */
    /* Changed --brand-900 from 0.l 0.350 to 0.300 */
    --brand-950: oklch(0.270 0.080 var(--brand-hue) / var(--bg-opacity) ); /* #0d254d */

    --accent-50: oklch(0.982 0.015 var(--accent-hue) / var(--bg-opacity) ); /*  #f0fbff */  
    --accent-100: oklch(0.950 0.030 var(--accent-hue) / var(--bg-opacity) ); /* #dbf3ff */
    --accent-200: oklch(0.875 0.095 var(--accent-hue) / var(--bg-opacity) ); /* #92e2ff */
    --accent-300: oklch(0.800 0.130 var(--accent-hue) / var(--bg-opacity) ); /* #53cdff */
    --accent-400: oklch(0.725 0.153 var(--accent-hue) / var(--bg-opacity) ); /* #00b6f3 */
    --accent-500: oklch(0.650 0.177 var(--accent-hue) / var(--bg-opacity) ); /* #009ed9 */
    --accent-600: oklch(0.575 0.200 var(--accent-hue) / var(--bg-opacity) ); /* #0086ba */
    --accent-700: oklch(0.500 0.180 var(--accent-hue) / var(--bg-opacity) ); /* #006e9b */
    --accent-800: oklch(0.425 0.160 var(--accent-hue) / var(--bg-opacity) ); /* #00577d */
    --accent-900: oklch(0.300 0.130 var(--accent-hue) / var(--bg-opacity) ); /* #00344f */
    /* Changed --brand-900 from 0.l 0.350 to 0.300 */
    --accent-950: oklch(0.270 0.080 var(--accent-hue) / var(--bg-opacity) ); /* #002c44 */

    --bg-opacity-50: 0.5;
    --bg-opacity-95: 0.95;
}
  /* Optional: dark mode remap (keeps contrast consistent) */
.dark {
    --gray-50: var(--gray-950); /* inverted */
    --gray-100: var(--gray-900); /* inverted */
    --gray-200: var(--gray-800); /* inverted */
    --gray-300: var(--gray-700); /* inverted */
    --gray-400: var(--gray-600); /* inverted */
    --gray-500: var(--gray-500); /* inverted */
    --gray-600: var(--gray-400); /* inverted */
    --gray-700: var(--gray-300); /* inverted */
    --gray-800: var(--gray-200); /* inverted */
    --gray-900: var(--gray-100); /* inverted */
    --gray-950: var(--gray-50); /* inverted */

    --brand-50: var(--brand-950); /* inverted */
    --brand-100: var(--brand-900); /* inverted */
    --brand-200: var(--brand-800); /* inverted */
    --brand-300: var(--brand-700); /* inverted */
    --brand-400: var(--brand-600); /* inverted */
    --brand-500: var(--brand-500); /* inverted */
    --brand-600: var(--brand-400); /* inverted */
    --brand-700: var(--brand-300); /* inverted */
    --brand-800: var(--brand-200); /* inverted */
    --brand-900: var(--brand-100); /* inverted */
    --brand-1000: var(--brand-0); /* inverted */
}

.btn:hover { filter: brightness(1.05); }
.btn-success:hover { background: rgb(22, 24, 60); } /* darker blue tone */
.btn-ghost:hover { background: rgb(235, 236, 245); } /* pale blue-grey */

/* Base */
:root {
  /* Light theme */
  --bg: rgb(242, 243, 250);         /* very light blue-grey background */
  --surface: rgb(255, 255, 255);    /* main surfaces */
  --card: rgb(250, 250, 253);       /* subtle contrast for cards */
  --muted: rgb(90, 92, 125);        /* muted text, mid-blue-grey */
  --text: rgb(15, 17, 45);          /* strong readable dark blue text */
  /* Branding: dark blue primary */
  --brand: rgb(28, 30, 75);         /* core brand color */
  --accent: rgb(79, 82, 145);       /* lighter accent blue */
  --border: rgb(220, 222, 240);     /* soft cool border */
  --shadow: 0 6px 24px rgba(28, 30, 75, 0.12);
}

/* ICON ADDITIONS */

.grid-icons {
    display: flex;
    flex-direction: column;
}
@media (min-width: 640px) {
    .grid-icons {
        flex-direction: row;
    }
}


.illustration img {
    width:192px;
    aspect-ratio: 1 / 1;
}

/* TAILWIND LIKE UTILS JUST WHAT WE NEED FOR NOW */

:root {
    --radius-xs: 0.125rem; /* 2px */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-2xl: 1rem; /* 16px */
    --radius-3xl: 1.5rem; /* 24px */
    --radius-4xl: 2rem; /* 32px */
}

/* Usage examples:
    background-color: var(--gray-50);
    color: var(--brand-900);
    border-color: var(--gray-300);
*/
.bg-opacity-50 {
    --bg-opacity: var(--bg-opacity-50);
}
.bg-opacity-95 {
    --bg-opacity: var(--bg-opacity-95);
}
.bg-white {background: rgba(255,255,255, var(--bg-opacity) );}
.bg-brand-50 { background: var(--brand-50); }
.bg-brand-100 { background: var(--brand-100) !important; }
.bg-brand-200 { background: var(--brand-200) !important;}
.bg-brand-300 { background: var(--brand-300) !important;}
.bg-brand-400 { background: var(--brand-400) !important;}
.bg-brand-500 { background: var(--brand-500) !important;}
.bg-brand-600 { background: var(--brand-600) !important;}
.bg-brand-700 { background: var(--brand-700) !important;}
.bg-brand-800 { background: var(--brand-800) !important;}
.bg-brand-900 { background: var(--brand-900) !important;}
.bg-brand-950 { background: var(--brand-950) !important;}

.bg-accent-50 { background: var(--accent-50) !important; }
.bg-accent-100 { background: var(--accent-100) !important; }
.bg-accent-200 { background: var(--accent-200) !important;}
.bg-accent-300 { background: var(--accent-300) !important;}
.bg-accent-400 { background: var(--accent-400) !important;}
.bg-accent-500 { background: var(--accent-500) !important;}
.bg-accent-600 { background: var(--accent-600) !important;}
.bg-accent-700 { background: var(--accent-700) !important;}
.bg-accent-800 { background: var(--accent-800) !important;}
.bg-accent-900 { background: var(--accent-900) !important;}
.bg-accent-950 { background: var(--accent-950) !important;}


.border {border-width: 1px;border-style:solid;}
.border-brand-50 { border-color: var(--brand-50); }
.border-brand-100 { border-color: var(--brand-100); }
.border-brand-200 { border-color: var(--brand-200);}
.border-brand-300 { border-color: var(--brand-300);}
.border-brand-400 { border-color: var(--brand-400);}
.border-brand-500 { border-color: var(--brand-500);}
.border-brand-600 { border-color: var(--brand-600);}
.border-brand-700 { border-color: var(--brand-700);}
.border-brand-800 { border-color: var(--brand-800);}
.border-brand-900 { border-color: var(--brand-900);}
.border-brand-950 { border-color: var(--brand-950);}

.border-accent-50 { border-color: var(--accent-50); }
.border-accent-100 { border-color: var(--accent-100); }
.border-accent-200 { border-color: var(--accent-200);}
.border-accent-300 { border-color: var(--accent-300);}
.border-accent-400 { border-color: var(--accent-400);}
.border-accent-500 { border-color: var(--accent-500);}
.border-accent-600 { border-color: var(--accent-600);}
.border-accent-700 { border-color: var(--accent-700);}
.border-accent-800 { border-color: var(--accent-800);}
.border-accent-900 { border-color: var(--accent-900);}
.border-accent-950 { border-color: var(--accent-950);}

.bg-gray-50 { background: var(--gray-50); }
.bg-gray-100 { background: var(--gray-100); }
.bg-gray-200 { background: var(--gray-200) ;}

.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }
.text-gray-950 { color: var(--gray-950); }

.text-brand-50 { color: var(--brand-50) !important; }
.text-brand-100 { color: var(--brand-100) !important; }
.text-brand-200 { color: var(--brand-200) !important; }
.text-brand-300 { color: var(--brand-300) !important; }
.text-brand-400 { color: var(--brand-400) !important; }
.text-brand-500 { color: var(--brand-500) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.text-brand-800 { color: var(--brand-800) !important; }
.text-brand-900 { color: var(--brand-900) !important; }
.text-brand-950 { color: var(--brand-950) !important; }

.text-accent-50 { color: var(--accent-50) !important; }
.text-accent-100 { color: var(--accent-100) !important; }
.text-accent-200 { color: var(--accent-200) !important; }
.text-accent-300 { color: var(--accent-300) !important; }
.text-accent-400 { color: var(--accent-400) !important; }
.text-accent-500 { color: var(--accent-500) !important; }
.text-accent-600 { color: var(--accent-600) !important; }
.text-accent-700 { color: var(--accent-700) !important; }
.text-accent-800 { color: var(--accent-800) !important; }
.text-accent-900 { color: var(--accent-900) !important; }
.text-accent-950 { color: var(--accent-950) !important; }

/* Tailwind spacing scale */
:root {
    --spacing: 4px;
    --space-0: 0px;
    --space-0_5: 0.125rem; /* 2px */
    --space-1: 0.25rem;    /* 4px */
    --space-1_5: 0.375rem; /* 6px */
    --space-2: 0.5rem;     /* 8px */
    --space-2_5: 0.625rem; /* 10px */
    --space-3: 0.75rem;    /* 12px */
    --space-3_5: 0.875rem; /* 14px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-9: 2.25rem;    /* 36px */
    --space-10: 2.5rem;    /* 40px */
    --space-11: 2.75rem;   /* 44px */
    --space-12: 3rem;      /* 48px */
    --space-14: 3.5rem;    /* 56px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-28: 7rem;      /* 112px */
    --space-32: 8rem;      /* 128px */
    --space-36: 9rem;      /* 144px */
    --space-40: 10rem;     /* 160px */
    --space-44: 11rem;     /* 176px */
    --space-48: 12rem;     /* 192px */
    --space-52: 13rem;     /* 208px */
    --space-56: 14rem;     /* 224px */
    --space-60: 15rem;     /* 240px */
    --space-64: 16rem;     /* 256px */
    --space-72: 18rem;     /* 288px */
    --space-80: 20rem;     /* 320px */
    --space-96: 24rem;     /* 384px */
}

.w-0_5 { width: var(--space-0_5); }
.w-1   { width: var(--space-1); }
.w-1_5 { width: var(--space-1_5); }
.w-2   { width: var(--space-2); }
.w-2_5 { width: var(--space-2_5); }
.w-3   { width: var(--space-3); }
.w-3_5 { width: var(--space-3_5); }
.w-4   { width: var(--space-4); }
.w-5   { width: var(--space-5); }
.w-6   { width: var(--space-6); }
.w-7   { width: var(--space-7); }
.w-8   { width: var(--space-8); }
.w-9   { width: var(--space-9); }
.w-10  { width: var(--space-10); }
.w-11  { width: var(--space-11); }
.w-12  { width: var(--space-12); }
.w-14  { width: var(--space-14); }
.w-16  { width: var(--space-16); }
.w-20  { width: var(--space-20); }
.w-24  { width: var(--space-24); }
.w-28  { width: var(--space-28); }
.w-32  { width: var(--space-32); }
.w-36  { width: var(--space-36); }
.w-40  { width: var(--space-40); }
.w-44  { width: var(--space-44); }
.w-48  { width: var(--space-48); }
.w-52  { width: var(--space-52); }
.w-56  { width: var(--space-56); }
.w-60  { width: var(--space-60); }
.w-64  { width: var(--space-64); }
.w-72  { width: var(--space-72); }
.w-80  { width: var(--space-80); }
.w-96  { width: var(--space-96); }
.w-full { width: 100%; }


.w-1\/2 {width: calc(100% / 2 * 1); }
.w-2\/3 {width: calc(100% / 3 * 2); }
.w-10\/12 {width: calc(100% / 12 * 10); }

@media (width >= 48rem) {
    .md\:w-2\/3 {width: calc(100% / 3 * 2); }
    .md\:w-10\/12 {width: calc(100% / 12 * 10); }
}

.h-0_5 { height: var(--space-0_5); }
.h-1   { height: var(--space-1); }
.h-1_5 { height: var(--space-1_5); }
.h-2   { height: var(--space-2); }
.h-2_5 { height: var(--space-2_5); }
.h-3   { height: var(--space-3); }
.h-3_5 { height: var(--space-3_5); }
.h-4   { height: var(--space-4); }
.h-5   { height: var(--space-5); }
.h-6   { height: var(--space-6); }
.h-7   { height: var(--space-7); }
.h-8   { height: var(--space-8);  }
.h-9   { height: var(--space-9); }
.h-10  { height: var(--space-10); }
/* */

@media (width >= 48rem) {

        .md\:w-0_5 { width: var(--space-0_5); }
        .md\:w-1   { width: var(--space-1); }
        .md\:w-1_5 { width: var(--space-1_5); }
        .md\:w-2   { width: var(--space-2); }
        .md\:w-2_5 { width: var(--space-2_5); }
        .md\:w-3   { width: var(--space-3); }
        .md\:w-3_5 { width: var(--space-3_5); }
        .md\:w-4   { width: var(--space-4); }
        .md\:w-5   { width: var(--space-5); }
        .md\:w-6   { width: var(--space-6); }
        .md\:w-7   { width: var(--space-7); }
        .md\:w-8   { width: var(--space-8); }
        .md\:w-9   { width: var(--space-9); }
        .md\:w-10  { width: var(--space-10); }
        .md\:w-11  { width: var(--space-11); }
        .md\:w-12  { width: var(--space-12); }
        .md\:w-14  { width: var(--space-14); }
        .md\:w-16  { width: var(--space-16); }
        .md\:w-20  { width: var(--space-20); }
        .md\:w-24  { width: var(--space-24); }
        .md\:w-28  { width: var(--space-28); }
        .md\:w-32  { width: var(--space-32); }
        .md\:w-36  { width: var(--space-36); }
        .md\:w-40  { width: var(--space-40); }
        .md\:w-44  { width: var(--space-44); }
        .md\:w-48  { width: var(--space-48); }
        .md\:w-52  { width: var(--space-52); }
        .md\:w-56  { width: var(--space-56); }
        .md\:w-60  { width: var(--space-60); }
        .md\:w-64  { width: var(--space-64); }
        .md\:w-72  { width: var(--space-72); }
        .md\:w-80  { width: var(--space-80); }
        .md\:w-96  { width: var(--space-96); }

        .md\:h-0_5 { height: var(--space-0_5); }
        .md\:h-1   { height: var(--space-1); }
        .md\:h-1_5 { height: var(--space-1_5); }
        .md\:h-2   { height: var(--space-2); }
        .md\:h-2_5 { height: var(--space-2_5); }
        .md\:h-3   { height: var(--space-3); }
        .md\:h-3_5 { height: var(--space-3_5); }
        .md\:h-4   { height: var(--space-4); }
        .md\:h-5   { height: var(--space-5); }
        .md\:h-6   { height: var(--space-6); }
        .md\:h-7   { height: var(--space-7); }
        .md\:h-8   { height: var(--space-8); }
        .md\:h-9   { height: var(--space-9); }
        .md\:h-10  { height: var(--space-10); }

}

/* Margin utility classes */
.m-0   { margin: var(--space-0); }
.m-0_5 { margin: var(--space-0_5); }
.m-1   { margin: var(--space-1); }
.m-1_5 { margin: var(--space-1_5); }
.m-2   { margin: var(--space-2); }
.m-2_5 { margin: var(--space-2_5); }
.m-3   { margin: var(--space-3); }
.m-3_5 { margin: var(--space-3_5); }
.m-4   { margin: var(--space-4); }
.m-5   { margin: var(--space-5); }
.m-6   { margin: var(--space-6); }
.m-7   { margin: var(--space-7); }
.m-8   { margin: var(--space-8); }
.m-9   { margin: var(--space-9); }
.m-10  { margin: var(--space-10); }
.m-11  { margin: var(--space-11); }
.m-12  { margin: var(--space-12); }
.m-14  { margin: var(--space-14); }
.m-16  { margin: var(--space-16); }
.m-20  { margin: var(--space-20); }
.m-24  { margin: var(--space-24); }
.m-28  { margin: var(--space-28); }
.m-32  { margin: var(--space-32); }
.m-36  { margin: var(--space-36); }
.m-40  { margin: var(--space-40); }
.m-44  { margin: var(--space-44); }
.m-48  { margin: var(--space-48); }
.m-52  { margin: var(--space-52); }
.m-56  { margin: var(--space-56); }
.m-60  { margin: var(--space-60); }
.m-64  { margin: var(--space-64); }
.m-72  { margin: var(--space-72); }
.m-80  { margin: var(--space-80); }
.m-96  { margin: var(--space-96); }

.mr-2   { margin-right: var(--space-2); }
.mr-3   { margin-right: var(--space-3); }
.mr-4   { margin-right: var(--space-4); }

/* margin-bottom utility classes */
.mb-0   { margin-bottom: var(--space-0); }
.mb-0_5 { margin-bottom: var(--space-0_5); }
.mb-1   { margin-bottom: var(--space-1); }
.mb-1_5 { margin-bottom: var(--space-1_5); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-2_5 { margin-bottom: var(--space-2_5); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-3_5 { margin-bottom: var(--space-3_5); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-5   { margin-bottom: var(--space-5); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-7   { margin-bottom: var(--space-7); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-9   { margin-bottom: var(--space-9); }
.mb-10  { margin-bottom: var(--space-10); }
.mb-11  { margin-bottom: var(--space-11); }
.mb-12  { margin-bottom: var(--space-12); }
.mb-14  { margin-bottom: var(--space-14); }
.mb-16  { margin-bottom: var(--space-16); }
.mb-20  { margin-bottom: var(--space-20); }
.mb-24  { margin-bottom: var(--space-24); }
.mb-28  { margin-bottom: var(--space-28); }
.mb-32  { margin-bottom: var(--space-32); }
.mb-36  { margin-bottom: var(--space-36); }
.mb-40  { margin-bottom: var(--space-40); }
.mb-44  { margin-bottom: var(--space-44); }
.mb-48  { margin-bottom: var(--space-48); }
.mb-52  { margin-bottom: var(--space-52); }
.mb-56  { margin-bottom: var(--space-56); }
.mb-60  { margin-bottom: var(--space-60); }
.mb-64  { margin-bottom: var(--space-64); }
.mb-72  { margin-bottom: var(--space-72); }
.mb-80  { margin-bottom: var(--space-80); }
.mb-96  { margin-bottom: var(--space-96); }

/* padding utility classes */
.p-0   { padding: var(--space-0); }
.p-0_5 { padding: var(--space-0_5); }
.p-1   { padding: var(--space-1); }
.p-1_5 { padding: var(--space-1_5); }
.p-2   { padding: var(--space-2); }
.p-2_5 { padding: var(--space-2_5); }
.p-3   { padding: var(--space-3); }
.p-3_5 { padding: var(--space-3_5); }
.p-4   { padding: var(--space-4); }
.p-5   { padding: var(--space-5); }
.p-6   { padding: var(--space-6); }
.p-7   { padding: var(--space-7); }
.p-8   { padding: var(--space-8); }
.p-9   { padding: var(--space-9); }
.p-10  { padding: var(--space-10); }
.p-11  { padding: var(--space-11); }
.p-12  { padding: var(--space-12); }
.p-14  { padding: var(--space-14); }
.p-16  { padding: var(--space-16); }
.p-20  { padding: var(--space-20); }
.p-24  { padding: var(--space-24); }
.p-28  { padding: var(--space-28); }
.p-32  { padding: var(--space-32); }
.p-36  { padding: var(--space-36); }
.p-40  { padding: var(--space-40); }
.p-44  { padding: var(--space-44); }
.p-48  { padding: var(--space-48); }
.p-52  { padding: var(--space-52); }
.p-56  { padding: var(--space-56); }
.p-60  { padding: var(--space-60); }
.p-64  { padding: var(--space-64); }
.p-72  { padding: var(--space-72); }
.p-80  { padding: var(--space-80); }
.p-96  { padding: var(--space-96); }

/* padding-vertical utility classes */
.py-0   { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-0_5 { padding-top: var(--space-0_5); padding-bottom: var(--space-0_5);}
.py-1   { padding-top: var(--space-1);padding-bottom: var(--space-1); }
.py-1_5 { padding-top: var(--space-1_5); padding-bottom: var(--space-1_5);}
.py-2   { padding-top: var(--space-2);padding-bottom: var(--space-2); }
.py-2_5 { padding-top: var(--space-2_5); padding-bottom: var(--space-2_5); }
.py-3   { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-3_5 { padding-top: var(--space-3_5); padding-bottom: var(--space-3_5); }
.py-4   { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5   { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6   { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7   { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-8   { padding-top: var(--space-8);padding-bottom: var(--space-8); }
.py-9   { padding-top: var(--space-9); padding-bottom: var(--space-9);}
.py-10  { padding-top: var(--space-10); padding-bottom: var(--space-10);}
.py-11  { padding-top: var(--space-11); padding-bottom: var(--space-11);}
.py-12  { padding-top: var(--space-12); padding-bottom: var(--space-12);}
.py-14  { padding-top: var(--space-14); padding-bottom: var(--space-14);}
.py-16  { padding-top: var(--space-16); padding-bottom: var(--space-16);}
.py-20  { padding-top: var(--space-20); padding-bottom: var(--space-20);}

.pt-8   { padding-top: var(--space-8);}
.pt-9   { padding-top: var(--space-9); }
.pt-10  { padding-top: var(--space-10); }
.pt-11  { padding-top: var(--space-11); }
.pt-12  { padding-top: var(--space-12); }
.pt-14  { padding-top: var(--space-14); }
.pt-16  { padding-top: var(--space-16); }
.pt-20  { padding-top: var(--space-20); }

.pb-8   { padding-bottom: var(--space-8);}
.pb-9   { padding-bottom: var(--space-9); }
.pb-10  { padding-bottom: var(--space-10); }
.pb-11  { padding-bottom: var(--space-11); }
.pb-12  { padding-bottom: var(--space-12); }
.pb-14  { padding-bottom: var(--space-14); }
.pb-16  { padding-bottom: var(--space-16); }
.pb-20  { padding-bottom: var(--space-20); }


/* padding-horizontal utility classes */
.px-0   { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-0_5 { padding-left: var(--space-0_5); padding-right: var(--space-0_5);}
.px-1   { padding-left: var(--space-1);padding-right: var(--space-1); }
.px-1_5 { padding-left: var(--space-1_5); padding-right: var(--space-1_5);}
.px-2   { padding-left: var(--space-2);padding-right: var(--space-2); }
.px-2_5 { padding-left: var(--space-2_5); padding-right: var(--space-2_5); }
.px-3   { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-3_5 { padding-left: var(--space-3_5); padding-right: var(--space-3_5); }
.px-4   { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5   { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6   { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7   { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-8   { padding-left: var(--space-8);padding-right: var(--space-8); }
.px-9   { padding-left: var(--space-9); padding-right: var(--space-9);}
.px-10  { padding-left: var(--space-10); padding-right: var(--space-10);}
.px-11  { padding-left: var(--space-11); padding-right: var(--space-11);}
.px-12  { padding-left: var(--space-12); padding-right: var(--space-12);}
.px-14  { padding-left: var(--space-14); padding-right: var(--space-14);}
.px-16  { padding-left: var(--space-16); padding-right: var(--space-16);}
.px-20  { padding-left: var(--space-20); padding-right: var(--space-20);}

@media (min-width: 768px) {
.md\:py-0   { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.md\:py-0_5 { padding-top: var(--space-0_5); padding-bottom: var(--space-0_5);}
.md\:py-1   { padding-top: var(--space-1);padding-bottom: var(--space-1); }
.md\:py-1_5 { padding-top: var(--space-1_5); padding-bottom: var(--space-1_5);}
.md\:py-2   { padding-top: var(--space-2);padding-bottom: var(--space-2); }
.md\:py-2_5 { padding-top: var(--space-2_5); padding-bottom: var(--space-2_5); }
.md\:py-3   { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.md\:py-3_5 { padding-top: var(--space-3_5); padding-bottom: var(--space-3_5); }
.md\:py-4   { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.md\:py-5   { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.md\:py-6   { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.md\:py-7   { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.md\:py-8   { padding-top: var(--space-8);padding-bottom: var(--space-8); }
.md\:py-9   { padding-top: var(--space-9); padding-bottom: var(--space-9);}
.md\:py-10  { padding-top: var(--space-10); padding-bottom: var(--space-10);}
.md\:py-11  { padding-top: var(--space-11); padding-bottom: var(--space-11);}
.md\:py-12  { padding-top: var(--space-12); padding-bottom: var(--space-12);}
.md\:py-14  { padding-top: var(--space-14); padding-bottom: var(--space-14);}
.md\:py-16  { padding-top: var(--space-16); padding-bottom: var(--space-16);}
.md\:py-20  { padding-top: var(--space-20); padding-bottom: var(--space-20);}
}

.pl-0   { padding-left: var(--space-0); }
.pl-0_5 { padding-left: var(--space-0_5); }
.pl-1   { padding-left: var(--space-1); }
.pl-1_5 { padding-left: var(--space-1_5); }
.pl-2   { padding-left: var(--space-2); }
.pl-2_5 { padding-left: var(--space-2_5); }
.pl-3   { padding-left: var(--space-3); }
.pl-3_5 { padding-left: var(--space-3_5); }
.pl-4   { padding-left: var(--space-4); }


@media (min-width: 768px) {
    .md\:pl-0   { padding-left: var(--space-0); }
    .md\:pl-0_5 { padding-left: var(--space-0_5); }
    .md\:pl-1   { padding-left: var(--space-1); }
    .md\:pl-1_5 { padding-left: var(--space-1_5); }
    .md\:pl-2   { padding-left: var(--space-2); }
    .md\:pl-2_5 { padding-left: var(--space-2_5); }
    .md\:pl-3   { padding-left: var(--space-3); }
    .md\:pl-3_5 { padding-left: var(--space-3_5); }
    .md\:pl-4   { padding-left: var(--space-4); }

    .md\:pl-14   { padding-left: var(--space-14); }
}

/* gap utility classes */
.gap-0   { gap: var(--space-0); }
.gap-0_5 { gap: var(--space-0_5); }
.gap-1   { gap: var(--space-1); }
.gap-1_5 { gap: var(--space-1_5); }
.gap-2   { gap: var(--space-2); }
.gap-2_5 { gap: var(--space-2_5); }
.gap-3   { gap: var(--space-3); }
.gap-3_5 { gap: var(--space-3_5); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-7   { gap: var(--space-7); }
.gap-8   { gap: var(--space-8); }
.gap-9   { gap: var(--space-9); }
.gap-10  { gap: var(--space-10); }
.gap-11  { gap: var(--space-11); }
.gap-12  { gap: var(--space-12); }
.gap-14  { gap: var(--space-14); }
.gap-16  { gap: var(--space-16); }
.gap-20  { gap: var(--space-20); }
.gap-24  { gap: var(--space-24); }
.gap-28  { gap: var(--space-28); }
.gap-32  { gap: var(--space-32); }
.gap-36  { gap: var(--space-36); }
.gap-40  { gap: var(--space-40); }
.gap-44  { gap: var(--space-44); }
.gap-48  { gap: var(--space-48); }
.gap-52  { gap: var(--space-52); }
.gap-56  { gap: var(--space-56); }
.gap-60  { gap: var(--space-60); }
.gap-64  { gap: var(--space-64); }
.gap-72  { gap: var(--space-72); }
.gap-80  { gap: var(--space-80); }
.gap-96  { gap: var(--space-96); }

.rounded-xs { border-radius: var(--radius-xs); /* 0.125rem (2px) */ }
.rounded-sm { border-radius: var(--radius-sm); /* 0.25rem (4px) */ }
.rounded-md { border-radius: var(--radius-md); /* 0.375rem (6px) */ }
.rounded-lg { border-radius: var(--radius-lg); /* 0.5rem (8px) */ }
.rounded-xl { border-radius: var(--radius-xl); /* 0.75rem (12px) */ }
.rounded-2xl { border-radius: var(--radius-2xl); /* 1rem (16px) */ }
.rounded-3xl { border-radius: var(--radius-3xl); /* 1.5rem (24px) */ }
.rounded-4xl { border-radius: var(--radius-4xl); /* 2rem (32px) */ }
.rounded-none { border-radius: 0; }
.rounded-full { border-radius: calc(infinity * 1px); }

.aspect-square { aspect-ratio: 1 / 1; }

.basis-1\/3 {
    flex-basis: calc(1/3 * 100%);
}
.basis-192px {

}
.basis-144px {
    flex-basis: 144px;
}
.basis-content {
    flex-basis: content;
}


/* tailwind display */
.float-left {float:left;}
.flex { display: flex;}
.inline-block {display: inline-block;}
.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}
.flex-none { flex: none;}
.items-center {align-items: center;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.grid { display: grid;}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr));}

@media (min-width: 768px) {
    .md\:flex {display: flex;}
    .md\:flex-row {flex-direction: row;}
    .md\:flex-col {flex-direction: column;}
    .md\:grid { display: grid;}
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr));}
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}
    .md\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr));}
}
:root {
    /* Font sizes */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem;  /* 36px */
    --text-5xl: 3rem;     /* 48px */
    --text-6xl: 3.75rem;  /* 60px */
    --text-7xl: 4.5rem;   /* 72px */
    --text-8xl: 6rem;     /* 96px */
    --text-9xl: 8rem;     /* 128px */

    /* Line-height ratios */
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base--line-height: calc(1.5 / 1);
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl--line-height: 1;
    --text-6xl--line-height: 1;
    --text-7xl--line-height: 1;
    --text-8xl--line-height: 1;
    --text-9xl--line-height: 1;

    /* Font weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
}

/* Font size utility classes */
.text-xs {
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
}

.text-sm {
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
}

.text-base {
font-size: var(--text-base) !important;
line-height: var(--text-base--line-height) !important;
}

.text-lg {
font-size: var(--text-lg) !important;
line-height: var(--text-lg--line-height) !important;
}

.text-xl {
font-size: var(--text-xl) !important;
line-height: var(--text-xl--line-height) !important;
}

.text-2xl {
font-size: var(--text-2xl) !important;
line-height: var(--text-2xl--line-height) !important;
}

.text-3xl {
font-size: var(--text-3xl) !important;
line-height: var(--text-3xl--line-height) !important;
}

.text-4xl {
font-size: var(--text-4xl) !important;
line-height: var(--text-4xl--line-height) !important;
}

.text-5xl {
font-size: var(--text-5xl) !important;
line-height: var(--text-5xl--line-height) !important;
}

.text-6xl {
font-size: var(--text-6xl) !important;
line-height: var(--text-6xl--line-height) !important;
}

.text-7xl {
font-size: var(--text-7xl) !important;
line-height: var(--text-7xl--line-height) !important;
}

.text-8xl {
font-size: var(--text-8xl) !important;
line-height: var(--text-8xl--line-height) !important;
}

.text-9xl {
font-size: var(--text-9xl) !important;
line-height: var(--text-9xl--line-height) !important;
}

@media (min-width: 768px) {
    .md\:text-sm {
        font-size: var(--text-sm) !important;
        line-height: var(--text-sm--line-height) !important;
    }
    .md\:text-md {
        font-size: var(--text-md) !important;
        line-height: var(--text-md--line-height) !important;
    }
    .md\:text-lg {
        font-size: var(--text-lg) !important;
        line-height: var(--text-lg--line-height) !important;
    }
    .md\:text-xl {
        font-size: var(--text-xl) !important;
        line-height: var(--text-xl--line-height) !important;
    }
    .md\:text-2xl {
        font-size: var(--text-2xl) !important;
        line-height: var(--text-2xl--line-height) !important;
    }
    .md\:text-3xl {
        font-size: var(--text-3xl) !important;
        line-height: var(--text-3xl--line-height) !important;
    }
    .md\:text-4xl {
        font-size: var(--text-4xl) !important;
        line-height: var(--text-4xl--line-height) !important;
    }
    .md\:text-5xl {
        font-size: var(--text-5xl) !important;
        line-height: var(--text-5xl--line-height) !important;
    }
    .md\:text-6xl {
        font-size: var(--text-6xl) !important;
        line-height: var(--text-6xl--line-height) !important;
    }
}

.text-wrap {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-balance {
text-wrap: balance;
}
.text-pretty {
text-wrap: pretty;
}
.text-readable-max-width {
    max-width: 70ch;
}
/* Font weight utility classes */
.font-thin {
font-weight: var(--font-thin); /* 100 */
}

.font-extralight {
font-weight: var(--font-extralight); /* 200 */
}

.font-light {
font-weight: var(--font-light); /* 300 */
}

.font-normal {
font-weight: var(--font-normal); /* 400 */
}

.font-medium {
font-weight: var(--font-medium); /* 500 */
}

.font-semibold {
font-weight: var(--font-semibold); /* 600 */
}

.font-bold {
font-weight: var(--font-bold); /* 700 */
}

.font-extrabold {
font-weight: var(--font-extrabold); /* 800 */
}

.font-black {
font-weight: var(--font-black); /* 900 */
}

.text-center {
    text-align: center;
}

@media (min-width: 768px) {
    .md\:text-center {text-align: center;}
}

/* list */
.list-none {
list-style-type: none;
}
/* STOP NASTY CSS SPECIFICY */
.sitemap a {
    color: inherit !important;
}



/* UPDATE 23 OCT */
h1,h2,h3,h4 {
    font-family: "Open Sans", "Inter", sans-serif;
}

h1 {
    font-weight: 500 !important;

    b {
        font-weight: 700 !important;
    }
}

h2, h3 {
    font-weight: 600 !important;
    color: var(--brand-900) !important;
    b {
        font-weight: 800 !important;
    }
}



.nav .brand a { margin-left: 0px;opacity: 1;}
.logo {
    opacity: 1;
}
/* Inside SVG */
.logoColor {
    fill: var(--brand-950);
}
.logo:hover .logoColor {
    fill: var(--brand-900);
}

/*
.illustration-wrapper svg rect {
    stroke: var(--brand-800);
}
.illustration-wrapper svg path {
    stroke: var(--brand-800);
}
.illustration-wrapper svg line {
    stroke: var(--brand-800);
}
    */


/* target specific fills and strokes to theme our illustrations - These are reliant on the figma colors assigned (these are the current ones_ */

.illustration-wrapper svg * {
    stroke: var(--brand-800);
}

.illustration-wrapper svg path[fill="#F2F7FF"] {
    fill: var(--brand-50);
}

.illustration-wrapper svg *[fill="#E4ECFF"] {
    fill: var(--brand-100);
}
.illustration-wrapper svg *[fill="#C6D1FF"] {
    fill: var(--brand-200);
}
.illustration-wrapper svg *[fill="#3D3DA3"] {
    fill: var(--brand-800);
}

.illustration-wrapper.accent svg * {
    stroke: var(--accent-800);
}


.illustration-wrapper.accent svg path[fill="#F2F7FF"] {
    fill: var(--accent-50);
}

.illustration-wrapper.accent svg *[fill="#E4ECFF"] {
    fill: var(--accent-100);
}
.illustration-wrapper.accent svg *[fill="#C6D1FF"] {
    fill: var(--accent-200);
}
.illustration-wrapper.accent svg *[fill="#3D3DA3"] {
    fill: var(--accent-800);
}

/* Force sone styles on global elements as easier than applying tailwind for now */

.footer {
    background: var(--brand-50);
    color: var(--brand-900);

}

.footer .sitemap h4 {
    font-size:20px;
    font-weight:500;
    color: var(--brand-800);
}
.hero {
    background: var(--brand-50);
}
.hero-copy h1 {
    color: var(--brand-800);
}
.hero-copy p {
    color: var(--brand-800);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
}

.home.hero {
    background: var(--brand-900);
 }

.home.hero-copy h1 {
    color: var(--brand-100);
}

.home.hero-copy {
    color: var(--brand-100);
}

.cta {
    //background: linear-gradient(180deg, rgb(242, 243, 250), rgb(230, 232, 245));
    
    //border-top: 1px solid var(--border);
    //border-bottom: 1px solid var(--border);
    border-width:0px !important;
}

.cta h2 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
}

.cta p {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
}

/* NAV COLORING */
.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(20px);
    //background: rgba(255, 255, 255, 0.8);
    border-bottom: 0px solid var(--border);
}

.nav nav {
    gap:10px;
}
header.nav {

    --bg-opacity: var(--bg-opacity-95);
    background-color: rgba(255,255,255, var(--bg-opacity) );
}

header.nav.home {
    background-color: var(--brand-900);
}

nav a {
    margin-left: 0px;
}

header.nav nav a {
    margin-left: 0px;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    padding: 4px 8px;
    color: var(--brand-900);
    font-weight:500;
}
header.nav a {
    font-weight:500;
}
.nav nav a:not(#cta).active {
    font-weight:500;
    color: var(--brand-700) !important;
    border-bottom-color: var(--brand-700) !important;
}

header.home nav a {
    color: var(--brand-200);
}

header.nav a:not(#cta):hover {
    border-bottom-color: var(--brand-600) !important;
}

header.home nav a:not(#cta):hover {
    border-bottom-color: var(--brand-600);
}

header.home nav a#cta:hover {
    background-color: var(--brand-600);
}

.brand a {
    background:transparent;
}

.nav nav a.active::after {
display: none;
}
/* CUSTOM GRADIENTS HERE, OUTSIDE OF TAILWIND UTILS */

.linear-gradient-regpass-01, .cta {
    background: linear-gradient(0deg, var(--brand-100), var(--brand-50));
    border-top: 1px solid var(--brand-200);
    border-bottom: 0px solid var(--border);
}

.btn-primary {
    background: linear-gradient(var(--brand-800), var(--brand-900));
    color: #ffffff !important;
    border: none;
    font-weight: 600;
}

.btn-primary-flat {
    background:var(--brand-800);
    color: #ffffff !important;
    border: none;
    font-weight: 600;
}

p a {
    color: var(--brand-800);
}

hr {
    border-width: 0px;
    color: transparent;
    height:1px;
}
/*
<div class="hero-copy">
<h1 class="text-5xl text-brand-950">Solutions</h1>
<p class="lead text-xl text-balance">From alert to assurance: one platform to scan, interpret, map, and evidence regulatory compliance.</p>
</div>
*/

section {
    padding: 24px 0;
}

/* Nav open - Mobile */
.nav-open .nav-inner {

}

.nav.nav-open .nav-inner {

    background:transparent;
    align-items: start;
    flex-direction: column;
    display:flex;

}

.nav.nav-open .nav-inner nav{
    background:transparent;
}
.nav.nav-open .nav-inner nav #main_nav_sections{
    width:100%;
    background:transparent;
    align-items: start;
    flex-direction: column;
}

/* outside tailwind fix */
@media (min-width: 640px) and (max-width:900px){
    #brand_menu {
        width: 100%;
    }
}
/* */
.drop-shadow-brand-950-alpha {
box-shadow: 0 1px 6px 2px rgba(13, 37, 77, 0.06);
}