@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root {
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --color-surface: #f7f9ff;
    --color-surface-dim: #d8dae0;
    --color-surface-bright: #f7f9ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f1f3f9;
    --color-surface-container: #eceef4;
    --color-surface-container-high: #e6e8ee;
    --color-surface-container-highest: #e0e2e8;
    --color-on-surface: #181c20;
    --color-on-surface-variant: #454652;
    --color-inverse-surface: #2d3135;
    --color-inverse-on-surface: #eff1f7;
    --color-outline: #757683;
    --color-outline-variant: #c5c5d4;
    --color-surface-tint: #4657b1;
    --color-primary: #31429b;
    --color-on-primary: #ffffff;
    --color-primary-container: #4a5bb5;
    --color-on-primary-container: #d9ddff;
    --color-inverse-primary: #bac3ff;
    --color-secondary: #b32051;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fe5c87;
    --color-on-secondary-container: #630026;
    --color-tertiary: #404778;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #585f91;
    --color-on-tertiary-container: #daddff;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-primary-fixed: #dee0ff;
    --color-primary-fixed-dim: #bac3ff;
    --color-on-primary-fixed: #00115a;
    --color-on-primary-fixed-variant: #2c3e97;
    --color-secondary-fixed: #ffd9de;
    --color-secondary-fixed-dim: #ffb2bf;
    --color-on-secondary-fixed: #3f0016;
    --color-on-secondary-fixed-variant: #90003b;
    --color-tertiary-fixed: #dfe0ff;
    --color-tertiary-fixed-dim: #bcc3fc;
    --color-on-tertiary-fixed: #0f1646;
    --color-on-tertiary-fixed-variant: #3c4374;
    --color-background: #f7f9ff;
    --color-on-background: #181c20;
    --color-surface-variant: #e0e2e8;
    --radius-sm: 0.25rem;
    --radius-DEFAULT: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    --spacing-gutter: 1.5rem;
    --spacing-gutter-mobile: 1rem;
    --spacing-margin: 2rem;
    --spacing-margin-mobile: 1.25rem;
    --spacing-space-xs: 0.375rem;
    --spacing-space-sm: 0.75rem;
    --spacing-space-md: 1.25rem;
    --spacing-space-lg: 2rem;
    --spacing-space-xl: 3.5rem;
}

.shadow-surface-0 { box-shadow: none; }
.shadow-surface-1 { box-shadow: 0 4px 16px -2px rgba(30, 37, 84, 0.05); }
.shadow-surface-2 { box-shadow: 0 10px 25px -4px rgba(74, 91, 181, 0.10), 0 4px 10px -2px rgba(30, 37, 84, 0.04); }
.shadow-surface-3 { box-shadow: 0 20px 40px -10px rgba(30, 37, 84, 0.16); }

.bg-surface { background-color: var(--color-surface); }
.text-surface { color: var(--color-surface); }
.border-surface { border-color: var(--color-surface); }
.bg-surface-dim { background-color: var(--color-surface-dim); }
.text-surface-dim { color: var(--color-surface-dim); }
.border-surface-dim { border-color: var(--color-surface-dim); }
.bg-surface-bright { background-color: var(--color-surface-bright); }
.text-surface-bright { color: var(--color-surface-bright); }
.border-surface-bright { border-color: var(--color-surface-bright); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.text-surface-container-lowest { color: var(--color-surface-container-lowest); }
.border-surface-container-lowest { border-color: var(--color-surface-container-lowest); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.text-surface-container-low { color: var(--color-surface-container-low); }
.border-surface-container-low { border-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.text-surface-container { color: var(--color-surface-container); }
.border-surface-container { border-color: var(--color-surface-container); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.text-surface-container-high { color: var(--color-surface-container-high); }
.border-surface-container-high { border-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.text-surface-container-highest { color: var(--color-surface-container-highest); }
.border-surface-container-highest { border-color: var(--color-surface-container-highest); }
.bg-on-surface { background-color: var(--color-on-surface); }
.text-on-surface { color: var(--color-on-surface); }
.border-on-surface { border-color: var(--color-on-surface); }
.bg-on-surface-variant { background-color: var(--color-on-surface-variant); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.border-on-surface-variant { border-color: var(--color-on-surface-variant); }
.bg-inverse-surface { background-color: var(--color-inverse-surface); }
.text-inverse-surface { color: var(--color-inverse-surface); }
.border-inverse-surface { border-color: var(--color-inverse-surface); }
.bg-inverse-on-surface { background-color: var(--color-inverse-on-surface); }
.text-inverse-on-surface { color: var(--color-inverse-on-surface); }
.border-inverse-on-surface { border-color: var(--color-inverse-on-surface); }
.bg-outline { background-color: var(--color-outline); }
.text-outline { color: var(--color-outline); }
.border-outline { border-color: var(--color-outline); }
.bg-outline-variant { background-color: var(--color-outline-variant); }
.text-outline-variant { color: var(--color-outline-variant); }
.border-outline-variant { border-color: var(--color-outline-variant); }
.bg-surface-tint { background-color: var(--color-surface-tint); }
.text-surface-tint { color: var(--color-surface-tint); }
.border-surface-tint { border-color: var(--color-surface-tint); }
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.bg-on-primary { background-color: var(--color-on-primary); }
.text-on-primary { color: var(--color-on-primary); }
.border-on-primary { border-color: var(--color-on-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.text-primary-container { color: var(--color-primary-container); }
.border-primary-container { border-color: var(--color-primary-container); }
.bg-on-primary-container { background-color: var(--color-on-primary-container); }
.text-on-primary-container { color: var(--color-on-primary-container); }
.border-on-primary-container { border-color: var(--color-on-primary-container); }
.bg-inverse-primary { background-color: var(--color-inverse-primary); }
.text-inverse-primary { color: var(--color-inverse-primary); }
.border-inverse-primary { border-color: var(--color-inverse-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.border-secondary { border-color: var(--color-secondary); }
.bg-on-secondary { background-color: var(--color-on-secondary); }
.text-on-secondary { color: var(--color-on-secondary); }
.border-on-secondary { border-color: var(--color-on-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); }
.text-secondary-container { color: var(--color-secondary-container); }
.border-secondary-container { border-color: var(--color-secondary-container); }
.bg-on-secondary-container { background-color: var(--color-on-secondary-container); }
.text-on-secondary-container { color: var(--color-on-secondary-container); }
.border-on-secondary-container { border-color: var(--color-on-secondary-container); }
.bg-tertiary { background-color: var(--color-tertiary); }
.text-tertiary { color: var(--color-tertiary); }
.border-tertiary { border-color: var(--color-tertiary); }
.bg-on-tertiary { background-color: var(--color-on-tertiary); }
.text-on-tertiary { color: var(--color-on-tertiary); }
.border-on-tertiary { border-color: var(--color-on-tertiary); }
.bg-tertiary-container { background-color: var(--color-tertiary-container); }
.text-tertiary-container { color: var(--color-tertiary-container); }
.border-tertiary-container { border-color: var(--color-tertiary-container); }
.bg-on-tertiary-container { background-color: var(--color-on-tertiary-container); }
.text-on-tertiary-container { color: var(--color-on-tertiary-container); }
.border-on-tertiary-container { border-color: var(--color-on-tertiary-container); }
.bg-error { background-color: var(--color-error); }
.text-error { color: var(--color-error); }
.border-error { border-color: var(--color-error); }
.bg-on-error { background-color: var(--color-on-error); }
.text-on-error { color: var(--color-on-error); }
.border-on-error { border-color: var(--color-on-error); }
.bg-error-container { background-color: var(--color-error-container); }
.text-error-container { color: var(--color-error-container); }
.border-error-container { border-color: var(--color-error-container); }
.bg-on-error-container { background-color: var(--color-on-error-container); }
.text-on-error-container { color: var(--color-on-error-container); }
.border-on-error-container { border-color: var(--color-on-error-container); }
.bg-primary-fixed { background-color: var(--color-primary-fixed); }
.text-primary-fixed { color: var(--color-primary-fixed); }
.border-primary-fixed { border-color: var(--color-primary-fixed); }
.bg-primary-fixed-dim { background-color: var(--color-primary-fixed-dim); }
.text-primary-fixed-dim { color: var(--color-primary-fixed-dim); }
.border-primary-fixed-dim { border-color: var(--color-primary-fixed-dim); }
.bg-on-primary-fixed { background-color: var(--color-on-primary-fixed); }
.text-on-primary-fixed { color: var(--color-on-primary-fixed); }
.border-on-primary-fixed { border-color: var(--color-on-primary-fixed); }
.bg-on-primary-fixed-variant { background-color: var(--color-on-primary-fixed-variant); }
.text-on-primary-fixed-variant { color: var(--color-on-primary-fixed-variant); }
.border-on-primary-fixed-variant { border-color: var(--color-on-primary-fixed-variant); }
.bg-secondary-fixed { background-color: var(--color-secondary-fixed); }
.text-secondary-fixed { color: var(--color-secondary-fixed); }
.border-secondary-fixed { border-color: var(--color-secondary-fixed); }
.bg-secondary-fixed-dim { background-color: var(--color-secondary-fixed-dim); }
.text-secondary-fixed-dim { color: var(--color-secondary-fixed-dim); }
.border-secondary-fixed-dim { border-color: var(--color-secondary-fixed-dim); }
.bg-on-secondary-fixed { background-color: var(--color-on-secondary-fixed); }
.text-on-secondary-fixed { color: var(--color-on-secondary-fixed); }
.border-on-secondary-fixed { border-color: var(--color-on-secondary-fixed); }
.bg-on-secondary-fixed-variant { background-color: var(--color-on-secondary-fixed-variant); }
.text-on-secondary-fixed-variant { color: var(--color-on-secondary-fixed-variant); }
.border-on-secondary-fixed-variant { border-color: var(--color-on-secondary-fixed-variant); }
.bg-tertiary-fixed { background-color: var(--color-tertiary-fixed); }
.text-tertiary-fixed { color: var(--color-tertiary-fixed); }
.border-tertiary-fixed { border-color: var(--color-tertiary-fixed); }
.bg-tertiary-fixed-dim { background-color: var(--color-tertiary-fixed-dim); }
.text-tertiary-fixed-dim { color: var(--color-tertiary-fixed-dim); }
.border-tertiary-fixed-dim { border-color: var(--color-tertiary-fixed-dim); }
.bg-on-tertiary-fixed { background-color: var(--color-on-tertiary-fixed); }
.text-on-tertiary-fixed { color: var(--color-on-tertiary-fixed); }
.border-on-tertiary-fixed { border-color: var(--color-on-tertiary-fixed); }
.bg-on-tertiary-fixed-variant { background-color: var(--color-on-tertiary-fixed-variant); }
.text-on-tertiary-fixed-variant { color: var(--color-on-tertiary-fixed-variant); }
.border-on-tertiary-fixed-variant { border-color: var(--color-on-tertiary-fixed-variant); }
.bg-background { background-color: var(--color-background); }
.text-background { color: var(--color-background); }
.border-background { border-color: var(--color-background); }
.bg-on-background { background-color: var(--color-on-background); }
.text-on-background { color: var(--color-on-background); }
.border-on-background { border-color: var(--color-on-background); }
.bg-surface-variant { background-color: var(--color-surface-variant); }
.text-surface-variant { color: var(--color-surface-variant); }
.border-surface-variant { border-color: var(--color-surface-variant); }

.type-display-hero {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 3.75rem;
    letter-spacing: -0.025em;
}
.type-headline-xl {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.02em;
}
.type-headline-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.25rem;
    letter-spacing: -0.015em;
}
.type-headline-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.875rem;
    letter-spacing: -0.01em;
}
.type-headline-sm {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.625rem;
}
.type-body-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.75rem;
}
.type-body-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625rem;
}
.type-body-sm {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
}
.type-label-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
}
.type-label-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: 0.015em;
}
.type-label-badge {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    .type-display-hero {
        font-size: 2.125rem;
        font-weight: 800;
        line-height: 2.5rem;
        letter-spacing: -0.02em;
    }
    .type-headline-xl {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 2.125rem;
        letter-spacing: -0.015em;
    }
}

/* Custom Theme Rules */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Agentic Design System (ADS) Colors */
    --color-surface: #f7f9ff;
    --color-surface-dim: #d8dae0;
    --color-surface-bright: #f7f9ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f1f3f9;
    --color-surface-container: #eceef4;
    --color-surface-container-high: #e6e8ee;
    --color-surface-container-highest: #e0e2e8;
    --color-on-surface: #181c20;
    --color-on-surface-variant: #454652;
    --color-inverse-surface: #2d3135;
    --color-inverse-on-surface: #eff1f7;
    --color-outline: #757683;
    --color-outline-variant: #c5c5d4;
    --color-surface-tint: #4657b1;
    --color-primary: #31429b;
    --color-on-primary: #ffffff;
    --color-primary-container: #4a5bb5;
    --color-on-primary-container: #d9ddff;
    --color-inverse-primary: #bac3ff;
    --color-secondary: #b32051;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fe5c87;
    --color-on-secondary-container: #630026;
    --color-tertiary: #404778;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #585f91;
    --color-on-tertiary-container: #daddff;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-primary-fixed: #dee0ff;
    --color-primary-fixed-dim: #bac3ff;
    --color-on-primary-fixed: #00115a;
    --color-on-primary-fixed-variant: #2c3e97;
    --color-secondary-fixed: #ffd9de;
    --color-secondary-fixed-dim: #ffb2bf;
    --color-on-secondary-fixed: #3f0016;
    --color-on-secondary-fixed-variant: #90003b;
    --color-tertiary-fixed: #dfe0ff;
    --color-tertiary-fixed-dim: #bcc3fc;
    --color-on-tertiary-fixed: #0f1646;
    --color-on-tertiary-fixed-variant: #3c4374;
    --color-background: #f7f9ff;
    --color-on-background: #181c20;
    --color-surface-variant: #e0e2e8;
    /* Agentic Design System (ADS) Radii */
    --radius-sm: 0.25rem;
    --radius-DEFAULT: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    /* Agentic Design System (ADS) Spacing */
    --spacing-gutter: 1.5rem;
    --spacing-gutter-mobile: 1rem;
    --spacing-margin: 2rem;
    --spacing-margin-mobile: 1.25rem;
    --spacing-space-xs: 0.375rem;
    --spacing-space-sm: 0.75rem;
    --spacing-space-md: 1.25rem;
    --spacing-space-lg: 2rem;
    --spacing-space-xl: 3.5rem;
}

/* Agentic Design System (ADS) Elevation & Surface Shadows */
.shadow-surface-0 { box-shadow: none; }
.shadow-surface-1 { box-shadow: 0 4px 16px -2px rgba(30, 37, 84, 0.05); }
.shadow-surface-2 { box-shadow: 0 10px 25px -4px rgba(74, 91, 181, 0.10), 0 4px 10px -2px rgba(30, 37, 84, 0.04); }
.shadow-surface-3 { box-shadow: 0 20px 40px -10px rgba(30, 37, 84, 0.16); }

/* Agentic Design System (ADS) Typography Scale */
.type-display-hero {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 3.75rem;
    letter-spacing: -0.025em;
}
.type-headline-xl {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.02em;
}
.type-headline-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 2.25rem;
    letter-spacing: -0.015em;
}
.type-headline-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.875rem;
    letter-spacing: -0.01em;
}
.type-headline-sm {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.625rem;
}
.type-body-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.75rem;
}
.type-body-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625rem;
}
.type-body-sm {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
}
.type-label-lg {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
}
.type-label-md {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: 0.015em;
}
.type-label-badge {
    font-family: 'Plus Jakarta Sans', var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    .type-display-hero {
        font-size: 2.125rem;
        font-weight: 800;
        line-height: 2.5rem;
        letter-spacing: -0.02em;
    }
    .type-headline-xl {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 2.125rem;
        letter-spacing: -0.015em;
    }
}