/* Generated by scripts/sync-crnl.mjs — do not edit. */

@layer crnl.reset, crnl.tokens, crnl.primitives, crnl.components, crnl.patterns, crnl.utilities, crnl.platform;

/* reset.css */
@layer crnl.reset {


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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

a {
  color: var(--color-interactive);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-active);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--border-weight-200) solid var(--color-interactive);
  outline-offset: var(--spacing-25);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
}

}

/* design-tokens-master.css */
@layer crnl.tokens {


:root {
  
  --white-100: rgba(255, 255, 255, 0.1);
  --white-200: rgba(255, 255, 255, 0.15);
  --white-300: rgba(255, 255, 255, 0.25);
  --white-500: rgba(255, 255, 255, 0.55);
  --white-700: rgba(255, 255, 255, 0.75);
  --white-900: rgba(255, 255, 255, 0.95);
  --white-1000: rgba(255, 255, 255, 1);
  
  
  --black-100: rgba(0, 0, 0, 0.04);
  --black-200: rgba(0, 0, 0, 0.1);
  --black-300: rgba(0, 0, 0, 0.15);
  --black-500: rgba(0, 0, 0, 0.4);
  --black-700: rgba(0, 0, 0, 0.65);
  --black-900: rgba(0, 0, 0, 0.85);
  --black-1000: rgba(0, 0, 0, 1);
  
  
  --status-warning-light: #D2811E;
  --status-warning-dark: #F6AF24;
  --status-success-light: #007A47;
  --status-success-dark: #00A96E;
  --status-error-light: #D42F21;
  --status-error-dark: #E43E2F;
  --status-info-light: #0671E5;
  --status-info-dark: #3892F3;

  
  --image-placeholder-bg: #F3F3F3;
}

:root,
[data-mode="light"] {
  
  --neutral-000: rgba(0, 0, 0, 0);
  --neutral-50: rgba(0, 0, 0, 0.03);
  --neutral-100: rgba(0, 0, 0, 0.04);
  --neutral-200: rgba(0, 0, 0, 0.1);
  --neutral-300: rgba(0, 0, 0, 0.15);
  --neutral-500: rgba(0, 0, 0, 0.4);
  --neutral-700: rgba(0, 0, 0, 0.65);
  --neutral-900: rgba(0, 0, 0, 0.85);
  --neutral-1000: rgba(0, 0, 0, 1);
  
  
  --inverted-000: rgba(255, 255, 255, 0);
  --inverted-50: rgba(255, 255, 255, 0.05);
  --inverted-100: rgba(255, 255, 255, 0.1);
  --inverted-200: rgba(255, 255, 255, 0.15);
  --inverted-300: rgba(255, 255, 255, 0.25);
  --inverted-500: rgba(255, 255, 255, 0.55);
  --inverted-700: rgba(255, 255, 255, 0.75);
  --inverted-900: rgba(255, 255, 255, 0.95);
  --inverted-1000: rgba(255, 255, 255, 1);
  
  
  --status-warning: var(--status-warning-light);
  --status-success: var(--status-success-light);
  --status-error: var(--status-error-light);
  --status-info: var(--status-info-light);

  
  --bg-input: #FFFFFF;

  
  --ios-nav-bg: rgba(252, 252, 252, 0.85);
  --ios-tab-bar-bg: rgba(252, 252, 252, 0.85);
  --ios-selected-tab-bg: #FFFFFF; 
  --ios-separator: rgba(0, 0, 0, 0.3);

  
  --lg-light-bg: #F7F7F7;
  --lg-dark-bg: rgba(0, 0, 0, 0.65);
  --lg-brand-text: #FFFFFF;
}

[data-mode="dark"] {
  
  --neutral-000: rgba(255, 255, 255, 0);
  --neutral-50: rgba(255, 255, 255, 0.05);
  --neutral-100: rgba(255, 255, 255, 0.1);
  --neutral-200: rgba(255, 255, 255, 0.15);
  --neutral-300: rgba(255, 255, 255, 0.25);
  --neutral-500: rgba(255, 255, 255, 0.55);
  --neutral-700: rgba(255, 255, 255, 0.75);
  --neutral-900: rgba(255, 255, 255, 0.95);
  --neutral-1000: rgba(255, 255, 255, 1);
  
  
  --inverted-000: rgba(0, 0, 0, 0);
  --inverted-50: rgba(0, 0, 0, 0.03);
  --inverted-100: rgba(0, 0, 0, 0.04);
  --inverted-200: rgba(0, 0, 0, 0.1);
  --inverted-300: rgba(0, 0, 0, 0.15);
  --inverted-500: rgba(0, 0, 0, 0.4);
  --inverted-700: rgba(0, 0, 0, 0.65);
  --inverted-900: rgba(0, 0, 0, 0.85);
  --inverted-1000: rgba(0, 0, 0, 1);
  
  
  --status-warning: var(--status-warning-dark);
  --status-success: var(--status-success-dark);
  --status-error: var(--status-error-dark);
  --status-info: var(--status-info-dark);

  
  --bg-input: transparent;

  
  --ios-nav-bg: rgba(28, 28, 28, 0.85);
  --ios-tab-bar-bg: rgba(23, 23, 23, 0.85);
  --ios-selected-tab-bg: var(--neutral-100); 
  --ios-separator: rgba(255, 255, 255, 0.15);
}

:root {
  
  --brand-core: #1A1A1A;
  --brand-light: #F0F0F0;
  --brand-dark: #0D0D0D;
  --brand-interactive: #1A1A1A;
  --brand-inverted: #FFFFFF;
  --brand-dark-surface: #222222;

  
  --display-font: 'Gantry', 'Inter', system-ui, sans-serif;
  --display-weight: 400;
  --display-letter-spacing: -0.02em;
  --display-size-900: 68px;
  --display-size-800: 61px;
  --display-size-700: 54px;
  --display-size-600: 47px;
  --display-size-500: 40px;
  --display-size-400: 33px;
  --display-size-300: 26px;
  --display-size-200: 22px;
  --display-size-100: 18px;

  
  --button-border-radius: 100px;
  --background-blur: 50px;

  
  --brand-logo-url: url('../images/placeholder-logo.svg');
}

:root,
[data-mode="light"] {
  
  --org-base: #FFFFFF;
  --org-surface: #F4F4F4;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);

  
  --org-transactional-button: #1A1A1A;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #1A1A1A;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;

  
  --color-interactive: #1A1A1A;
  --color-inverted: #FFFFFF;
  --ios-selected-tab: #1A1A1A;
}

[data-mode="dark"] {
  --org-base: #111111;
  --org-surface: #1F1F1F;
  --org-sheet: #292929;
  --org-nav: rgba(17, 17, 17, 0.7);

  --org-transactional-button: #FFFFFF;
  --org-transactional-button-text: #000000;
  --org-primary-button: #FFFFFF;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;

  --color-interactive: #FFFFFF;
  --color-inverted: #1A1A1A;
  --ios-selected-tab: #FFFFFF;
}

:root {
  
  --text-primary: var(--neutral-1000);
  --text-secondary: var(--neutral-700);
  --text-disabled: var(--neutral-300);
  --text-placeholder: var(--neutral-500);
  
  
  --bg-base: var(--org-base);
  --bg-surface: var(--org-surface);
  --bg-sheet: var(--org-sheet);
  --bg-nav: var(--org-nav);
  
  
  --border-default: var(--neutral-200);
  --border-hover: var(--neutral-500);
  --border-active: var(--neutral-1000);
  --border-disabled: var(--neutral-200);
  
  
  --interactive-primary: var(--org-primary-button);
  --interactive-primary-text: var(--org-primary-button-text);
  --interactive-secondary-text: var(--org-secondary-button-text);
  --interactive-tertiary-text: var(--org-tertiary-button-text);
  --interactive-transactional: var(--org-transactional-button);
  --interactive-transactional-text: var(--org-transactional-button-text);
  
  

  
}

}

/* themes.css */
@layer crnl.tokens {


[data-theme="ink"] {
  --brand-core: #121212;
  --brand-light: #F2EFE9;
  --brand-dark: #000000;
  --brand-interactive: #121212;
  --brand-inverted: #F2EFE9;
  --brand-dark-surface: #1C1C1C;

  --display-font: 'Chronicle', 'Inter', system-ui, sans-serif;
  --display-weight: 900;
  --display-letter-spacing: 0em;
  --display-size-900: 74px;
  --display-size-800: 66px;
  --display-size-700: 58px;
  --display-size-600: 51px;
  --display-size-500: 43px;
  --display-size-400: 35px;
  --display-size-300: 27px;
  --display-size-200: 23px;
  --display-size-100: 19px;

  --button-border-radius: 4px;
  --background-blur: 50px;
}

[data-theme="ink"][data-mode="light"] {
  --org-base: #FFFFFF;
  --org-surface: #F2EFE9;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);
  --org-transactional-button: #121212;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #121212;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;
  --color-interactive: #121212;
  --color-inverted: #F2EFE9;
  --ios-selected-tab: #121212;
}

[data-theme="ink"][data-mode="dark"] {
  --org-base: #0E0E0E;
  --org-surface: #1A1A1A;
  --org-sheet: #242424;
  --org-nav: rgba(14, 14, 14, 0.7);
  --org-transactional-button: #F2EFE9;
  --org-transactional-button-text: #000000;
  --org-primary-button: #F2EFE9;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;
  --color-interactive: #F2EFE9;
  --color-inverted: #121212;
  --ios-selected-tab: #F2EFE9;
}

[data-theme="signal"] {
  --brand-core: #0B4FD8;
  --brand-light: #FFB000;
  --brand-dark: #061B4A;
  --brand-interactive: #0B4FD8;
  --brand-inverted: #FFB000;
  --brand-dark-surface: #1B2233;

  --display-font: 'Grandstand', 'Inter', system-ui, sans-serif;
  --display-weight: 1000;
  --display-letter-spacing: -0.01em;
  --display-size-900: 76px;
  --display-size-800: 68px;
  --display-size-700: 60px;
  --display-size-600: 52px;
  --display-size-500: 44px;
  --display-size-400: 36px;
  --display-size-300: 28px;
  --display-size-200: 24px;
  --display-size-100: 20px;

  --button-border-radius: 100px;
  --background-blur: 50px;
}

[data-theme="signal"][data-mode="light"] {
  --org-base: #FFFFFF;
  --org-surface: #F1F4FA;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);
  --org-transactional-button: #0B4FD8;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #0B4FD8;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;
  --color-interactive: #0B4FD8;
  --color-inverted: #FFB000;
  --ios-selected-tab: #0B4FD8;
}

[data-theme="signal"][data-mode="dark"] {
  --org-base: #0C1118;
  --org-surface: #171E29;
  --org-sheet: #212A38;
  --org-nav: rgba(12, 17, 24, 0.7);
  --org-transactional-button: #FFB000;
  --org-transactional-button-text: #000000;
  --org-primary-button: #FFB000;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;
  --color-interactive: #FFB000;
  --color-inverted: #0B4FD8;
  --ios-selected-tab: #FFB000;
}

[data-theme="moss"] {
  --brand-core: #14502F;
  --brand-light: #C9F24D;
  --brand-dark: #071A10;
  --brand-interactive: #14502F;
  --brand-inverted: #C9F24D;
  --brand-dark-surface: #16211A;

  --display-font: 'Spire', 'Inter', system-ui, sans-serif;
  --display-weight: 700;
  --display-letter-spacing: 0em;
  --display-size-900: 74px;
  --display-size-800: 66px;
  --display-size-700: 58px;
  --display-size-600: 51px;
  --display-size-500: 43px;
  --display-size-400: 35px;
  --display-size-300: 27px;
  --display-size-200: 23px;
  --display-size-100: 19px;

  --button-border-radius: 12px;
  --background-blur: 50px;
}

[data-theme="moss"][data-mode="light"] {
  --org-base: #FFFFFF;
  --org-surface: #F1F5F0;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);
  --org-transactional-button: #14502F;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #14502F;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;
  --color-interactive: #14502F;
  --color-inverted: #C9F24D;
  --ios-selected-tab: #14502F;
}

[data-theme="moss"][data-mode="dark"] {
  --org-base: #0B120D;
  --org-surface: #151E18;
  --org-sheet: #1E2A21;
  --org-nav: rgba(11, 18, 13, 0.7);
  --org-transactional-button: #C9F24D;
  --org-transactional-button-text: #000000;
  --org-primary-button: #C9F24D;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;
  --color-interactive: #C9F24D;
  --color-inverted: #14502F;
  --ios-selected-tab: #C9F24D;
}

[data-theme="ember"] {
  --brand-core: #8E1F1B;
  --brand-light: #F0A030;
  --brand-dark: #2A0A08;
  --brand-interactive: #8E1F1B;
  --brand-inverted: #F0A030;
  --brand-dark-surface: #241716;

  --display-font: 'Register', 'Inter', system-ui, sans-serif;
  --display-weight: 900;
  --display-letter-spacing: 0em;
  --display-size-900: 74px;
  --display-size-800: 66px;
  --display-size-700: 58px;
  --display-size-600: 51px;
  --display-size-500: 43px;
  --display-size-400: 35px;
  --display-size-300: 27px;
  --display-size-200: 23px;
  --display-size-100: 19px;

  --button-border-radius: 6px;
  --background-blur: 50px;
}

[data-theme="ember"][data-mode="light"] {
  --org-base: #FFFFFF;
  --org-surface: #F7F1EC;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);
  --org-transactional-button: #8E1F1B;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #8E1F1B;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;
  --color-interactive: #8E1F1B;
  --color-inverted: #F0A030;
  --ios-selected-tab: #8E1F1B;
}

[data-theme="ember"][data-mode="dark"] {
  --org-base: #120D0C;
  --org-surface: #1E1716;
  --org-sheet: #282020;
  --org-nav: rgba(18, 13, 12, 0.7);
  --org-transactional-button: #F0A030;
  --org-transactional-button-text: #000000;
  --org-primary-button: #F0A030;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;
  --color-interactive: #F0A030;
  --color-inverted: #8E1F1B;
  --ios-selected-tab: #F0A030;
}

[data-theme="violet"] {
  --brand-core: #4A2A9E;
  --brand-light: #D9CCFF;
  --brand-dark: #150A33;
  --brand-interactive: #4A2A9E;
  --brand-inverted: #D9CCFF;
  --brand-dark-surface: #1F1A2E;

  --display-font: 'Marquee', 'Inter', system-ui, sans-serif;
  --display-weight: 400;
  --display-letter-spacing: -0.04em;
  --display-size-900: 70px;
  --display-size-800: 63px;
  --display-size-700: 55px;
  --display-size-600: 48px;
  --display-size-500: 41px;
  --display-size-400: 33px;
  --display-size-300: 26px;
  --display-size-200: 22px;
  --display-size-100: 18px;

  --button-border-radius: 100px;
  --background-blur: 50px;
}

[data-theme="violet"][data-mode="light"] {
  --org-base: #FFFFFF;
  --org-surface: #F4F1FB;
  --org-sheet: #FFFFFF;
  --org-nav: rgba(255, 255, 255, 0.75);
  --org-transactional-button: #4A2A9E;
  --org-transactional-button-text: #FFFFFF;
  --org-primary-button: #4A2A9E;
  --org-primary-button-text: #FFFFFF;
  --org-secondary-button-text: #000000;
  --org-tertiary-button-text: #000000;
  --color-interactive: #4A2A9E;
  --color-inverted: #D9CCFF;
  --ios-selected-tab: #4A2A9E;
}

[data-theme="violet"][data-mode="dark"] {
  --org-base: #0F0C16;
  --org-surface: #1A1523;
  --org-sheet: #241E30;
  --org-nav: rgba(15, 12, 22, 0.7);
  --org-transactional-button: #D9CCFF;
  --org-transactional-button-text: #000000;
  --org-primary-button: #D9CCFF;
  --org-primary-button-text: #000000;
  --org-secondary-button-text: #FFFFFF;
  --org-tertiary-button-text: #FFFFFF;
  --color-interactive: #D9CCFF;
  --color-inverted: #4A2A9E;
  --ios-selected-tab: #D9CCFF;
}

}

/* spacing-tokens.css */
@layer crnl.tokens {


:root {
  
  --spacing-unit: 8px;
  
  
  --spacing-25: 2px;    
  --spacing-50: 4px;    
  --spacing-75: 6px;    
  --spacing-100: 8px;   
  --spacing-150: 12px;  
  --spacing-200: 16px;  
  --spacing-250: 20px;  
  --spacing-300: 24px;  
  --spacing-400: 32px;  
  --spacing-500: 40px;  
  --spacing-600: 48px;  
  --spacing-700: 56px;  
  --spacing-800: 64px;  
  --spacing-900: 72px;  
  --spacing-1000: 80px; 
}

:root {
  
  --spacing-row: 8px;            
  --spacing-row-mobile: 8px;     
  --spacing-row-tablet: 12px;    
  --spacing-row-desktop: 16px;   
  
  
  --spacing-card: 16px;          
  --spacing-card-mobile: 16px;   
  --spacing-card-tablet: 20px;   
  --spacing-card-desktop: 24px;  
  
  
  --spacing-content: 32px;       
  --spacing-content-mobile: 32px;  
  --spacing-content-tablet: 40px;  
  --spacing-content-desktop: 48px; 
  
  
  --margin-small: 16px;          
  --margin-small-mobile: 16px;   
  --margin-small-tablet: 32px;   
  --margin-small-desktop: 48px;  
  
  
  --margin-large: 16px;          
  --margin-large-mobile: 16px;   
  --margin-large-tablet: 40px;   
  --margin-large-desktop: 64px;  
  
  
  --margin-landing: 24px;        
  --margin-landing-mobile: 24px;   
  --margin-landing-tablet: 48px;   
  --margin-landing-desktop: 80px;  
}

.section-padding {
  padding-top: var(--spacing-200);
  padding-bottom: var(--spacing-200);
}

.list-gap       { gap: var(--spacing-200); }  
.list-gap-tight { gap: var(--spacing-100); }  

@media (min-width: 500px) {
  .section-padding {
    padding-top: var(--spacing-400);
    padding-bottom: var(--spacing-400);
  }
}

@media (min-width: 500px) and (max-width: 1099px) {
  :root {
    --spacing-row: var(--spacing-row-tablet);
    --spacing-card: var(--spacing-card-tablet);
    --spacing-content: var(--spacing-content-tablet);
    --margin-small: var(--margin-small-tablet);
    --margin-large: var(--margin-large-tablet);
    --margin-landing: var(--margin-landing-tablet);
  }
}

@media (min-width: 1100px) {
  :root {
    --spacing-row: var(--spacing-row-desktop);
    --spacing-card: var(--spacing-card-desktop);
    --spacing-content: var(--spacing-content-desktop);
    --margin-small: var(--margin-small-desktop);
    --margin-large: var(--margin-large-desktop);
    --margin-landing: var(--margin-landing-desktop);
  }
}

[data-platform="app"] {
  --spacing-row: var(--spacing-row-mobile);         
  --spacing-card: var(--spacing-card-mobile);       
  --spacing-content: var(--spacing-content-mobile); 
  --margin-small: var(--margin-small-mobile);       
  --margin-large: var(--margin-large-mobile);       
  --margin-landing: var(--margin-landing-mobile);   
}

}

/* container-tokens.css */
@layer crnl.tokens {


:root {
  
  --container-maximum: 1600px;     
  --container-extra-wide: 1440px;  
  --container-wide: 1280px;        
  --container-medium: 1024px;      
  --container-narrow: 768px;       
  --container-compact: 640px;      
  
  
  --container-default: 1200px;
}

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-maximum {
  width: 100%;
  max-width: var(--container-maximum);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-extra-wide {
  width: 100%;
  max-width: var(--container-extra-wide);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-medium {
  width: 100%;
  max-width: var(--container-medium);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-compact {
  width: 100%;
  max-width: var(--container-compact);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.container-fluid {
  width: 100%;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

@media (max-width: 499px) {
  .container,
  .container-maximum,
  .container-extra-wide,
  .container-wide,
  .container-medium,
  .container-narrow,
  .container-compact,
  .container-fluid {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
}

@media (min-width: 500px) and (max-width: 1099px) {
  .container,
  .container-maximum,
  .container-extra-wide,
  .container-wide,
  .container-medium,
  .container-narrow,
  .container-compact,
  .container-fluid {
    padding-inline-start: 24px;
    padding-inline-end: 24px;
  }
}

@media (min-width: 1100px) {
  .container,
  .container-maximum,
  .container-extra-wide,
  .container-wide,
  .container-medium,
  .container-narrow,
  .container-compact,
  .container-fluid {
    padding-inline-start: 32px;
    padding-inline-end: 32px;
  }
}

@media (min-width: 1600px) {
  .container-maximum,
  .container-extra-wide {
    padding-inline-start: 48px;
    padding-inline-end: 48px;
  }
}


}

/* border-effects-tokens.css */
@layer crnl.tokens {


:root {
  
  --border-radius-50: 4px;
  --border-radius-100: 8px;
  --border-radius-200: 16px;
  
  
}

:root {
  
  --border-weight-50: 1px;    
  --border-weight-100: 1px;   
  --border-weight-200: 2px;   
}

:root {
  --shadow-sheet-a: 0px -8px 64px 0px rgba(0, 0, 0, 0.12);
  --shadow-sheet-b: 0px -4px 32px 0px rgba(0, 0, 0, 0.08);
}

:root {
  --shadow-modal-a: 0px 8px 64px 0px rgba(0, 0, 0, 0.16);
  --shadow-modal-b: 0px 4px 32px 0px rgba(0, 0, 0, 0.12);
}

:root {
  
  --shadow-sheet: var(--shadow-sheet-a), var(--shadow-sheet-b);
  --shadow-modal: var(--shadow-modal-a), var(--shadow-modal-b);
}

.rounded-50 { border-radius: var(--border-radius-50); }
.rounded-100 { border-radius: var(--border-radius-100); }
.rounded-200 { border-radius: var(--border-radius-200); }
.rounded-button { border-radius: var(--button-border-radius); }

.rounded-t-50 { 
  border-start-start-radius: var(--border-radius-50); 
  border-start-end-radius: var(--border-radius-50); 
}
.rounded-t-100 { 
  border-start-start-radius: var(--border-radius-100); 
  border-start-end-radius: var(--border-radius-100); 
}
.rounded-t-200 { 
  border-start-start-radius: var(--border-radius-200); 
  border-start-end-radius: var(--border-radius-200); 
}

.rounded-b-50 { 
  border-end-start-radius: var(--border-radius-50); 
  border-end-end-radius: var(--border-radius-50); 
}
.rounded-b-100 { 
  border-end-start-radius: var(--border-radius-100); 
  border-end-end-radius: var(--border-radius-100); 
}
.rounded-b-200 { 
  border-end-start-radius: var(--border-radius-200); 
  border-end-end-radius: var(--border-radius-200); 
}

.rounded-l-50 { 
  border-start-start-radius: var(--border-radius-50); 
  border-end-start-radius: var(--border-radius-50); 
}
.rounded-l-100 { 
  border-start-start-radius: var(--border-radius-100); 
  border-end-start-radius: var(--border-radius-100); 
}
.rounded-l-200 { 
  border-start-start-radius: var(--border-radius-200); 
  border-end-start-radius: var(--border-radius-200); 
}

.rounded-r-50 { 
  border-start-end-radius: var(--border-radius-50); 
  border-end-end-radius: var(--border-radius-50); 
}
.rounded-r-100 { 
  border-start-end-radius: var(--border-radius-100); 
  border-end-end-radius: var(--border-radius-100); 
}
.rounded-r-200 { 
  border-start-end-radius: var(--border-radius-200); 
  border-end-end-radius: var(--border-radius-200); 
}

.rounded-ss-50 { border-start-start-radius: var(--border-radius-50); }
.rounded-ss-100 { border-start-start-radius: var(--border-radius-100); }
.rounded-ss-200 { border-start-start-radius: var(--border-radius-200); }

.rounded-se-50 { border-start-end-radius: var(--border-radius-50); }
.rounded-se-100 { border-start-end-radius: var(--border-radius-100); }
.rounded-se-200 { border-start-end-radius: var(--border-radius-200); }

.rounded-es-50 { border-end-start-radius: var(--border-radius-50); }
.rounded-es-100 { border-end-start-radius: var(--border-radius-100); }
.rounded-es-200 { border-end-start-radius: var(--border-radius-200); }

.rounded-ee-50 { border-end-end-radius: var(--border-radius-50); }
.rounded-ee-100 { border-end-end-radius: var(--border-radius-100); }
.rounded-ee-200 { border-end-end-radius: var(--border-radius-200); }

.border-50 { border-width: var(--border-weight-50); }
.border-100 { border-width: var(--border-weight-100); }
.border-200 { border-width: var(--border-weight-200); }

.border-t-50 { border-top-width: var(--border-weight-50); }
.border-t-100 { border-top-width: var(--border-weight-100); }
.border-t-200 { border-top-width: var(--border-weight-200); }

.border-e-50 { border-inline-end-width: var(--border-weight-50); }
.border-e-100 { border-inline-end-width: var(--border-weight-100); }
.border-e-200 { border-inline-end-width: var(--border-weight-200); }

.border-b-50 { border-bottom-width: var(--border-weight-50); }
.border-b-100 { border-bottom-width: var(--border-weight-100); }
.border-b-200 { border-bottom-width: var(--border-weight-200); }

.border-s-50 { border-inline-start-width: var(--border-weight-50); }
.border-s-100 { border-inline-start-width: var(--border-weight-100); }
.border-s-200 { border-inline-start-width: var(--border-weight-200); }

.border-solid { border-style: solid; }
.border-none { border-style: none; }

.border-neutral-200 { border-color: var(--neutral-200); }
.border-neutral-500 { border-color: var(--neutral-500); }
.border-neutral-1000 { border-color: var(--neutral-1000); }
.border-brand-interactive { border-color: var(--color-interactive); }
.border-default { border-color: var(--border-default); }
.border-hover { border-color: var(--border-hover); }
.border-active { border-color: var(--border-active); }

.shadow-sheet { box-shadow: var(--shadow-sheet); }
.shadow-modal { box-shadow: var(--shadow-modal); }
.shadow-none { box-shadow: none; }

.shadow-sheet-a { box-shadow: var(--shadow-sheet-a); }
.shadow-sheet-b { box-shadow: var(--shadow-sheet-b); }
.shadow-modal-a { box-shadow: var(--shadow-modal-a); }
.shadow-modal-b { box-shadow: var(--shadow-modal-b); }

.border {
  border-width: var(--border-weight-100);
  border-style: solid;
  border-color: var(--border-default);
}

.border-thin {
  border-width: var(--border-weight-50);
  border-style: solid;
  border-color: var(--neutral-200);
}

.border-heavy {
  border-width: var(--border-weight-200);
  border-style: solid;
  border-color: var(--neutral-1000);
}

.border-interactive {
  border-width: var(--border-weight-200);
  border-style: solid;
  border-color: var(--color-interactive);
}

.border-top {
  border-top-width: var(--border-weight-100);
  border-top-style: solid;
  border-top-color: var(--border-default);
}

.border-end {
  border-inline-end-width: var(--border-weight-100);
  border-inline-end-style: solid;
  border-inline-end-color: var(--border-default);
}

.border-bottom {
  border-bottom-width: var(--border-weight-100);
  border-bottom-style: solid;
  border-bottom-color: var(--border-default);
}

.border-start {
  border-inline-start-width: var(--border-weight-100);
  border-inline-start-style: solid;
  border-inline-start-color: var(--border-default);
}

:root {
  
  --scrim-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.75) 100%
  );

  
  --scrim-brand-strong: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0) 29%,
    transparent 30%,
    color-mix(in srgb, var(--brand-dark) 70%, transparent) 85%,
    var(--brand-dark) 100%
  );

  
  --scrim-brand: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0) 29%,
    transparent 30%,
    color-mix(in srgb, var(--brand-dark) 70%, transparent) 100%
  );
}

.scrim-image {
  background: var(--scrim-image);
}

.scrim-brand {
  background: var(--scrim-brand);
}

.scrim-brand-strong {
  background: var(--scrim-brand-strong);
}

}

/* ui-fonts.css */
@layer crnl.tokens {


@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

}

/* text-styles-system.css */
@layer crnl.primitives {


.display900 {
  font-family: var(--display-font);
  font-size: var(--display-size-900);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 76px;
  color: var(--neutral-1000);
}

.display800 {
  font-family: var(--display-font);
  font-size: var(--display-size-800);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 68px;
  color: var(--neutral-1000);
}

.display700 {
  font-family: var(--display-font);
  font-size: var(--display-size-700);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 60px;
  color: var(--neutral-1000);
}

.display600 {
  font-family: var(--display-font);
  font-size: var(--display-size-600);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 52px;
  color: var(--neutral-1000);
}

.display500 {
  font-family: var(--display-font);
  font-size: var(--display-size-500);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 44px;
  color: var(--neutral-1000);
}

.display400 {
  font-family: var(--display-font);
  font-size: var(--display-size-400);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 36px;
  color: var(--neutral-1000);
}

.display300 {
  font-family: var(--display-font);
  font-size: var(--display-size-300);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 28px;
  color: var(--neutral-1000);
}

.display200 {
  font-family: var(--display-font);
  font-size: var(--display-size-200);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 24px;
  color: var(--neutral-1000);
}

.display100 {
  font-family: var(--display-font);
  font-size: var(--display-size-100);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter-spacing);
  font-stretch: var(--display-width, 100%);
  font-variation-settings: 'slnt' var(--display-slant, 0);
  line-height: 20px;
  color: var(--neutral-1000);
}

.title90 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.title80 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.title70 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.title60 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.title50 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold50 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.25rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold40 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold30 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold20 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold10 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelBold5 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.625rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular50 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.25rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular40 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular30 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular20 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular10 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.labelRegular5 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.625rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
  text-transform: none;
}

.bodyBold40 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.bodyBold30 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.bodyBold20 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.bodyRegular40 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.bodyRegular30 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.bodyRegular20 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; 
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.idealRegular40 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--text-primary);
  text-transform: none;
}

.title50-r {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.21;
  color: var(--text-primary);
}

.labelRegular20-r {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.21;
  color: var(--text-primary);
}

@media (max-width: 499px) {
  .title50-r {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .labelRegular20-r {
    font-size: 0.75rem;
  }
}

}

/* icons.css */
@layer crnl.primitives {


:root {
  
  --icon-size-50:  12px;   
  --icon-size-100: 16px;   
  --icon-size-200: 20px;   
  --icon-size-300: 24px;   
  --icon-size-400: 32px;   
  --icon-size-500: 40px;   
  --icon-size-600: 48px;   
  --icon-size-700: 64px;   
}

.icon {
  font-family: 'Material Symbols Rounded';
  font-size: var(--icon-size-300);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  
  
  color: inherit;
  
  
  
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  
  
  user-select: none;
  
  
  vertical-align: middle;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.icon-50 {
  font-size: var(--icon-size-50);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.icon-100 {
  font-size: var(--icon-size-100);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.icon-200 {
  font-size: var(--icon-size-200);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.icon-300 {
  font-size: var(--icon-size-300);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-400 {
  font-size: var(--icon-size-400);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

.icon-500 {
  font-size: var(--icon-size-500);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

.icon-600 {
  font-size: var(--icon-size-600);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.icon-700 {
  font-size: var(--icon-size-700);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.icon-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.icon-50.icon-outlined  { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon-100.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon-200.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon-300.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-400.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.icon-500.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.icon-600.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.icon-700.icon-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }


}

/* card-components.css */
@layer crnl.components {


.card-closed {
  background: var(--bg-surface);
  border-radius: var(--border-radius-200); 
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.card-closed-header {
  padding: var(--spacing-250); 
  border-bottom: var(--border-weight-100) solid var(--neutral-200);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-200); 
}

.card-closed-header > *:first-child {
  flex: 1;
  min-width: 0;
}

.card-closed-body {
  padding: var(--spacing-300); 
  border-bottom: var(--border-weight-100) solid var(--neutral-200);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200); 
}

.card-closed-footer {
  padding: var(--spacing-300); 
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.card-closed-body:last-child,
.card-closed-footer:last-child {
  border-bottom: none;
}

[data-platform="app"] .card-closed-header,
[data-platform="app"] .card-closed-body,
[data-platform="app"] .card-closed-footer {
  padding: var(--spacing-200); 
}

.card-open {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-250); 
  width: 100%;
}

.card-open-header {
  width: 100%;
}

.card-open-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150); 
  width: 100%;
}

.card-open-section {
  background: var(--bg-surface);
  border-radius: var(--border-radius-200); 
  padding: var(--spacing-300); 
  width: 100%;
}

.card-closed-interactive {
  background: var(--bg-surface);
  border-radius: var(--border-radius-200);
  overflow: hidden; 
  width: 100%;
  display: flex;
  flex-direction: column;
}

.card-open-section-interactive {
  background: var(--bg-surface);
  border-radius: var(--border-radius-200);
  padding: var(--spacing-300);
  width: 100%;
  
  display: block;
}

.card-text-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.card-actions {
  display: flex;
  gap: var(--spacing-150); 
  align-items: center;
}

.card-actions-horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-150);
  align-items: center;
}

.card-actions-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); 
}

.card-grid {
  display: grid;
  gap: var(--spacing-card); 
  width: 100%;
}

.card-grid-closed {
  display: grid;
  gap: var(--spacing-row); 
  width: 100%;
}

.card-grid-open {
  display: grid;
  gap: var(--spacing-content); 
  width: 100%;
}

.card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;             
  overflow: hidden;              
  background-color: var(--image-placeholder-bg);
  border-radius: 0;              
}

.card-media > * {
  width: 100%;
  height: 100%;
}

.card-media-tall   { aspect-ratio: 4 / 3; }
.card-media-square { aspect-ratio: 1 / 1; }

.logo-block {
  position: relative;
  overflow: hidden;
  background: var(--badge-bg, var(--brand-core));
  border-radius: var(--border-radius-100); 
  width: 100%;
  height: 100%;
}

.logo-block img {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.logo-block-sm img { width: 64px;  height: 64px;  }
.logo-block-md img { width: 80px;  height: 80px;  }
.logo-block-lg img { width: 104px; height: 104px; }

.tile {
  background: var(--bg-surface);
  border-radius: var(--border-radius-100); 
  overflow: hidden;
  position: relative;
}

.tile-info {
  padding: var(--spacing-200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); 
}

.tile-info .btn {
  margin-top: var(--spacing-100); 
}

.tile-tag {
  position: absolute;
  top: var(--spacing-100);                  
  inset-inline-start: var(--spacing-100);   
  display: flex;
  align-items: center;
  height: 32px;
  padding: var(--spacing-50) var(--spacing-150); 
  border-radius: var(--border-radius-50);        
  backdrop-filter: blur(25px);
  background: var(--black-100);
}


}

/* interactive-tokens.css */
@layer crnl.components {


.surface-fillNeutral {
  background: var(--neutral-1000);
  border: none;
  color: var(--inverted-1000);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-fillNeutral:hover {
  background:
    linear-gradient(var(--inverted-200), var(--inverted-200)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}
.surface-fillNeutral:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}
.surface-fillNeutral:active > * { opacity: 0.6; }

.surface-fillColor {
  background: var(--brand-core);
  border: none;
  color: var(--white-1000);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-fillColor:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--brand-core), var(--brand-core));
}
.surface-fillColor:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--brand-core), var(--brand-core));
}
.surface-fillColor:active > * { opacity: 0.6; }

.surface-fillInverted {
  background: var(--inverted-1000);
  border: none;
  color: var(--neutral-1000);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-fillInverted:hover {
  background:
    linear-gradient(var(--neutral-200), var(--neutral-200)),
    linear-gradient(var(--inverted-1000), var(--inverted-1000));
}
.surface-fillInverted:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--inverted-1000), var(--inverted-1000));
}
.surface-fillInverted:active > * { opacity: 0.6; }

.surface-fillBlack {
  background: var(--black-1000);
  border: none;
  color: var(--white-1000);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-fillBlack:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--black-1000), var(--black-1000));
}
.surface-fillBlack:active {
  background: var(--black-1000);
}
.surface-fillBlack:active > * { opacity: 0.6; }

.surface-fillWhite {
  background: var(--white-1000);
  border: none;
  color: var(--black-1000);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-fillWhite:hover {
  background:
    linear-gradient(var(--black-200), var(--black-200)),
    linear-gradient(var(--white-1000), var(--white-1000));
}
.surface-fillWhite:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--white-1000), var(--white-1000));
}
.surface-fillWhite:active > * { opacity: 0.6; }

.surface-borderNeutral {
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  color: var(--text-primary);
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.surface-borderNeutral:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--neutral-200);
}
.surface-borderNeutral:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--neutral-200);
}
.surface-borderNeutral:active > * { opacity: 0.6; }

.surface-borderInverted {
  background: var(--neutral-000);
  border: 1px solid var(--inverted-300);
  color: var(--text-primary);
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.surface-borderInverted:hover {
  background:
    linear-gradient(var(--inverted-100), var(--inverted-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--inverted-200);
}
.surface-borderInverted:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--inverted-200);
}
.surface-borderInverted:active > * { opacity: 0.6; }

.surface-borderBlack {
  background: var(--neutral-000);
  border: 1px solid var(--black-300);
  color: var(--text-primary);
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.surface-borderBlack:hover {
  background:
    linear-gradient(var(--black-100), var(--black-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--black-200);
}
.surface-borderBlack:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--black-200);
}
.surface-borderBlack:active > * { opacity: 0.6; }

.surface-borderWhite {
  background: var(--neutral-000);
  border: 1px solid var(--black-300);
  color: var(--text-primary);
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.surface-borderWhite:hover {
  background:
    linear-gradient(var(--white-200), var(--white-200)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--white-200);
}
.surface-borderWhite:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--white-200);
}
.surface-borderWhite:active > * { opacity: 0.6; }

.surface-washNeutral {
  background: var(--neutral-100);
  border: none;
  color: var(--text-primary);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-washNeutral:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-100), var(--neutral-100));
}
.surface-washNeutral:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-100), var(--neutral-100));
}
.surface-washNeutral:active > * { opacity: 0.6; }

.surface-ghost {
  background: var(--neutral-000);
  border: none;
  color: var(--text-primary);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-ghost:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.surface-ghost:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.surface-ghost:active > * { opacity: 0.6; }

.surface-card {
  background: var(--org-surface);
  border: none;
  color: var(--text-primary);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-card:hover {
  background:
    linear-gradient(var(--white-100), var(--white-100)),
    linear-gradient(var(--org-surface), var(--org-surface));
}
.surface-card:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--org-surface), var(--org-surface));
}
.surface-card:active > * { opacity: 0.6; }

.surface-section {
  background: transparent;
  border: none;
  color: var(--text-primary);
  transition: background 120ms ease;
  cursor: pointer;
}
.surface-section:hover {
  background: linear-gradient(var(--white-100), var(--white-100));
}
.surface-section:active {
  background: linear-gradient(var(--black-300), var(--black-300));
}
.surface-section:active > * { opacity: 0.6; }

.scale-700 {
  transition: transform 180ms ease-out;
  transform: scale(1);
}
.scale-700:hover {
  transform: scale(1.01);
}
.scale-700:active {
  transform: scale(0.99);
}

.scale-500 {
  transition: transform 180ms ease-out;
  transform: scale(1);
}
.scale-500:hover {
  transform: scale(1.025);
}
.scale-500:active {
  transform: scale(0.975);
}

.scale-300 {
  transition: transform 180ms ease-out;
  transform: scale(1);
}
.scale-300:hover {
  transform: scale(1.035);
}
.scale-300:active {
  transform: scale(0.965);
}

.surface-fillNeutral:focus-visible,
.surface-fillColor:focus-visible,
.surface-fillInverted:focus-visible,
.surface-fillBlack:focus-visible,
.surface-fillWhite:focus-visible,
.surface-borderNeutral:focus-visible,
.surface-borderInverted:focus-visible,
.surface-borderBlack:focus-visible,
.surface-borderWhite:focus-visible,
.surface-washNeutral:focus-visible,
.surface-ghost:focus-visible,
.surface-card:focus-visible,
.surface-section:focus-visible {
  outline: var(--border-weight-200) solid var(--color-interactive);
  outline-offset: var(--spacing-25);
}

.surface-section:focus-visible {
  outline-offset: calc(-1 * var(--border-weight-200));
}

}

/* button-components.css */
@layer crnl.components {


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--button-border-radius);
  transition: background 120ms ease, transform 180ms ease-out, border-color 120ms ease;
  transform: scale(1);
  position: relative;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.btn:hover {
  transform: scale(1.025);
}
.btn:active {
  transform: scale(0.975);
}

.btn:active > * {
  opacity: 0.6;
}

.btn:focus-visible,
.btn-circle:focus-visible {
  outline: var(--border-weight-200) solid var(--color-interactive);
  outline-offset: var(--spacing-25);
}

.btn * {
  color: inherit;
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  transform: scale(1);
  pointer-events: auto;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: scale(1);
}
.btn:disabled:active > *,
.btn[disabled]:active > * {
  opacity: 1;
}

.btn-700 {
  height: 56px;
  padding: 0 var(--spacing-400);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.02em;
}

.btn-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.btn-700 .btn-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;   
  flex-shrink: 0;
}

.btn-300 {
  height: 40px;
  padding: 0 var(--spacing-300);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.02em;
}
.btn-300 .btn-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;   
  flex-shrink: 0;
}

.btn-100 {
  height: 32px;
  padding: 0 var(--spacing-200);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.02em;
}
.btn-100 .btn-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;   
  flex-shrink: 0;
}

.btn-700.btn-icon-leading { padding-inline-start: 28px; }
.btn-300.btn-icon-leading { padding-inline-start: 20px; }
.btn-100.btn-icon-leading { padding-inline-start: 14px; }

.btn-700.btn-icon-trailing { padding-inline-end: 28px; }
.btn-300.btn-icon-trailing { padding-inline-end: 20px; }
.btn-100.btn-icon-trailing { padding-inline-end: 14px; }

.btn-700.btn-icon-leading.btn-icon-trailing { padding-inline-start: 28px; padding-inline-end: 28px; }
.btn-300.btn-icon-leading.btn-icon-trailing { padding-inline-start: 20px; padding-inline-end: 20px; }
.btn-100.btn-icon-leading.btn-icon-trailing { padding-inline-start: 14px; padding-inline-end: 14px; }

.btn-fill {
  width: 100%;
}

.btn-transactional {
  background: var(--interactive-transactional);
  color: var(--interactive-transactional-text);
}
.btn-transactional:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--interactive-transactional), var(--interactive-transactional));
}
.btn-transactional:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--interactive-transactional), var(--interactive-transactional));
}
.btn-transactional:disabled {
  background: var(--interactive-transactional);
  opacity: 0.4;
}

.btn-primary {
  background: var(--interactive-primary);
  color: var(--interactive-primary-text);
}
.btn-primary:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--interactive-primary), var(--interactive-primary));
}
.btn-primary:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--interactive-primary), var(--interactive-primary));
}
.btn-primary:disabled {
  background: var(--interactive-primary);
  opacity: 0.4;
}

.btn-neutral {
  background: var(--neutral-1000);
  color: var(--inverted-1000);
}
.btn-neutral:hover {
  background:
    linear-gradient(var(--inverted-200), var(--inverted-200)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}
.btn-neutral:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}
.btn-neutral:disabled {
  background: var(--neutral-1000);
  opacity: 0.4;
}

.btn-secondary {
  background: var(--neutral-000);
  border: var(--border-weight-100) solid var(--neutral-300);
  color: var(--interactive-secondary-text);
}
.btn-secondary:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--neutral-200);
}
.btn-secondary:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-color: var(--neutral-200);
}
.btn-secondary:disabled {
  background: var(--neutral-000);
  border-color: var(--neutral-300);
  opacity: 0.4;
}

.btn-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--interactive-tertiary-text);
}
.btn-tertiary:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.btn-tertiary:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.btn-tertiary:disabled {
  background: var(--neutral-000);
  opacity: 0.4;
}

.btn-destructive {
  background: var(--status-error);
  color: var(--white-1000);
}
.btn-destructive:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--status-error), var(--status-error));
}
.btn-destructive:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--status-error), var(--status-error));
}
.btn-destructive:disabled {
  background: var(--status-error);
  opacity: 0.4;
}

.btn-white {
  background: var(--white-1000);
  color: var(--black-1000);
}
.btn-white:hover {
  background:
    linear-gradient(var(--black-200), var(--black-200)),
    linear-gradient(var(--white-1000), var(--white-1000));
}
.btn-white:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--white-1000), var(--white-1000));
}
.btn-white:disabled {
  background: var(--white-1000);
  opacity: 0.4;
}

.btn-white-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--white-1000);
}
.btn-white-tertiary:hover {
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.btn-white-tertiary:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--neutral-000), var(--neutral-000));
}
.btn-white-tertiary:disabled {
  background: var(--neutral-000);
  opacity: 0.4;
}

.btn-black {
  background: var(--black-1000);
  color: var(--white-1000);
}
.btn-black:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--black-1000), var(--black-1000));
}
.btn-black:active {
  background:
    linear-gradient(var(--white-500), var(--white-500)),
    linear-gradient(var(--black-1000), var(--black-1000));
}
.btn-black:disabled {
  background: var(--black-1000);
  opacity: 0.4;
}

.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 120ms ease, transform 180ms ease-out;
  transform: scale(1);
  box-sizing: border-box;
}

.btn-circle:hover {
  transform: scale(1.035);
}
.btn-circle:active {
  transform: scale(0.965);
}
.btn-circle:active > * {
  opacity: 0.6;
}
.btn-circle * {
  color: inherit;
}

.btn-circle span:not(.icon) {
  line-height: 1;
  display: block;
}

.btn-circle .btn-circle-letter {
  width: auto;
  height: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1;
  display: block;
}
.btn-circle-700 .btn-circle-letter { font-size: 20px; }
.btn-circle-300 .btn-circle-letter { font-size: 16px; }

.btn-circle-700 {
  width: 56px;
  height: 56px;
}
.btn-circle-700 .btn-icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.btn-circle-300 {
  width: 40px;
  height: 40px;
}
.btn-circle-300 .btn-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.btn-circle.btn-circle-brand {
  background: var(--interactive-primary);
  color: var(--interactive-primary-text);
}
.btn-circle.btn-circle-brand:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--interactive-primary), var(--interactive-primary));
}
.btn-circle.btn-circle-brand:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--interactive-primary), var(--interactive-primary));
}

.btn-circle.btn-circle-neutral {
  background: var(--neutral-1000);
  color: var(--inverted-1000);
}
.btn-circle.btn-circle-neutral:hover {
  background:
    linear-gradient(var(--inverted-200), var(--inverted-200)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}
.btn-circle.btn-circle-neutral:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--neutral-1000), var(--neutral-1000));
}

.btn-circle.btn-circle-inverted {
  background: var(--inverted-1000);
  color: var(--neutral-1000);
}
.btn-circle.btn-circle-inverted:hover {
  background:
    linear-gradient(var(--neutral-200), var(--neutral-200)),
    linear-gradient(var(--inverted-1000), var(--inverted-1000));
}
.btn-circle.btn-circle-inverted:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--inverted-1000), var(--inverted-1000));
}

.btn-circle.btn-circle-black {
  background: var(--black-1000);
  color: var(--white-1000);
}
.btn-circle.btn-circle-black:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--black-1000), var(--black-1000));
}
.btn-circle.btn-circle-black:active {
  background: var(--black-1000);
}

.btn-circle.btn-circle-white {
  background: var(--white-1000);
  color: var(--black-1000);
}
.btn-circle.btn-circle-white:hover {
  background:
    linear-gradient(var(--black-200), var(--black-200)),
    linear-gradient(var(--white-1000), var(--white-1000));
}
.btn-circle.btn-circle-white:active {
  background:
    linear-gradient(var(--black-500), var(--black-500)),
    linear-gradient(var(--white-1000), var(--white-1000));
}

.btn-circle.btn-circle-destructive {
  background: var(--status-error);
  color: var(--white-1000);
}
.btn-circle.btn-circle-destructive:hover {
  background:
    linear-gradient(var(--white-300), var(--white-300)),
    linear-gradient(var(--status-error), var(--status-error));
}
.btn-circle.btn-circle-destructive:active {
  background:
    linear-gradient(var(--black-300), var(--black-300)),
    linear-gradient(var(--status-error), var(--status-error));
}

.btn-circle.btn-circle-brand-secondary {
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  color: var(--interactive-primary);
}
.btn-circle.btn-circle-neutral-secondary {
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  color: var(--text-primary);
}
.btn-circle.btn-circle-destructive-secondary {
  background: var(--neutral-000);
  border: 1px solid var(--neutral-300);
  color: var(--status-error);
}

.btn-circle.btn-circle-brand-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--interactive-primary);
}
.btn-circle.btn-circle-neutral-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--text-primary);
}
.btn-circle.btn-circle-destructive-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--status-error);
}
.btn-circle.btn-circle-white-tertiary {
  background: var(--neutral-000);
  border: none;
  color: var(--white-1000);
}

.btn-circle:disabled,
.btn-circle[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: scale(1);
}

.btn-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
}

.btn-group-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
}

.btn-group-stack .btn {
  width: 100%;
}


}

/* system-ui.css */
@layer crnl.components {


.wallet-btn-wrapper {
  margin-top: var(--spacing-150);
}

.wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-150);
  width: 100%;
  height: 48px;
  padding: var(--spacing-100) var(--spacing-200);
  border-radius: var(--border-radius-100);
  cursor: pointer;
  box-sizing: border-box;

  
  background: #1d1e1e;
  border: 0.33px solid #808080;
}

.wallet-btn-label {
  
  font-family: -apple-system, 'SF Pro', 'Inter', sans-serif;
  font-weight: 590;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.wallet-icon {
  width: 26px;
  height: 18px;
  object-fit: contain;
}

}

/* list-row-components.css */
@layer crnl.components {


.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 48px;
  background-color: var(--status-info);
  flex-shrink: 0;
}

.status-dot.read {
  background-color: var(--neutral-200);
}

.info-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.info-item.has-label {
  gap: var(--spacing-50); 
}

.info-block {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--spacing-100); 
}

.tag.tag-brand-color {
  background:
    linear-gradient(var(--inverted-900), var(--inverted-900)),
    linear-gradient(var(--color-interactive), var(--color-interactive));
  color: var(--color-interactive);
}

.tag.tag-brand-color * {
  color: inherit;
}

.tag-group {
  display: flex;
  align-items: start;
  gap: var(--spacing-100); 
}

.switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch label {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: var(--neutral-200);
  cursor: pointer;
  transition: background 200ms ease;
}

.switch label::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 27px;
  height: 27px;
  border-radius: 100px;
  background: var(--white-1000);
  box-shadow: 0 0 0 0 var(--black-100),
              0 3px 8px 0 var(--black-300),
              0 3px 1px 0 rgba(0,0,0,0.06);
  transition: left 200ms ease;
}

.switch input:checked + label {
  background: var(--color-interactive);
}

.switch input:checked + label::after {
  inset-inline-start: 22px; 
}

.switch input:disabled + label {
  background: var(--neutral-100);
  cursor: not-allowed;
}

.switch input:disabled + label::after {
  background: var(--white-200);
}

.leading {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.leading-gap-sm  { padding-inline-end: 8px; }
.leading-gap-md  { padding-inline-end: 12px; }
.leading-gap-lg  { padding-inline-end: 16px; }
.leading-gap-xl  { padding-inline-end: 24px; }

.circle-container {
  width: 40px;
  height: 40px;
  border-radius: 48px;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.select-box {
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-50); 
  border: 1px solid var(--neutral-300);
  flex-shrink: 0;
}

.leading-image-square {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-100); 
  object-fit: cover;
  flex-shrink: 0;
}

.leading-image-small {
  width: 136px;
  height: 80px;
  border-radius: var(--border-radius-100); 
  object-fit: cover;
  flex-shrink: 0;
}

.leading-image-large {
  width: 244px;
  height: 124px;
  border-radius: var(--border-radius-100); 
  object-fit: cover;
  flex-shrink: 0;
}

.leading-logo {
  width: 48px;
  height: 48px;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.leading-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leading-payment {
  width: 33px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.trailing-gap-xs  { padding-inline-start: 2px; }
.trailing-gap-sm  { padding-inline-start: 4px; }
.trailing-gap-md  { padding-inline-start: 8px; }
.trailing-gap-lg  { padding-inline-start: 12px; }

.trailing-text-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--border-radius-50); 
  background: transparent;
  cursor: pointer;
}

.trailing-text-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: end;
  white-space: nowrap;
}

.stepper {
  display: flex;
  align-items: center;
  gap: var(--spacing-100); 
}

.stepper-btn {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid var(--neutral-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  flex-shrink: 0;
}

.stepper-btn.disabled {
  border-color: var(--neutral-100);
  cursor: not-allowed;
  pointer-events: none;
}

.stepper-btn.disabled .icon {
  opacity: 0.3;
}

.stepper-count {
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.list-row {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.list-row.not-tappable {
  cursor: default;
}

.list-divided {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list-divided > .list-row {
  padding: var(--spacing-200); 
  border-bottom: var(--border-weight-100) solid var(--neutral-200);
}

.list-divided > .list-row:last-child {
  border-bottom: none;
}

.list-row.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.list-row.disabled .select-box {
  background: var(--neutral-200);
}

.list-row > .leading,
.list-row > .trailing {
  align-self: stretch;
}

.list-row-content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); 
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.list-row-text-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.selector {
  border-radius: var(--border-radius-200);   
  padding: var(--spacing-200);               
  box-sizing: border-box;
  
  display: block;
  width: 100%;
}

.selector.is-selected,
.selector.is-selected:hover,
.selector.is-selected:active {
  background: var(--neutral-1000);
  color: var(--inverted-1000);
  
  --text-secondary: var(--inverted-700);
}

.selector.is-selected * {
  color: inherit;
}

.selector.is-selected:active * {
  opacity: 1;
}

.selector.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

.split-row-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.split-row {
  background: var(--org-surface); 
  border-radius: var(--border-radius-200); 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split-row-top {
  padding: var(--spacing-200); 
}

.split-row-bottom {
  padding: var(--spacing-150) var(--spacing-200); 
  border-top: 0.33px solid var(--border-default);
}

@media (min-width: 500px) {
  .split-row-top,
  .split-row-bottom {
    padding: var(--spacing-200) var(--spacing-300); 
  }
}

.split-row-note {
  text-align: end;
  white-space: normal;
  max-width: var(--spacing-800); 
}

.split-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); 
  padding: var(--spacing-200); 
  width: 100%;
  max-width: 499px;
  box-sizing: border-box;
}

@media (min-width: 500px) {
  .split-row-list {
    max-width: 672px;
  }
}

}

/* table-components.css */
@layer crnl.components {


.stat-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

.stat-table {
  --stat-table-entity-width: 224px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.stat-table-title {
  display: flex;
  align-items: flex-start;
  background-color: var(--bg-surface);
  border-bottom: var(--border-weight-50) solid var(--neutral-300);
  color: var(--text-primary);
  padding-top: var(--spacing-200);    
  padding-bottom: var(--spacing-150); 
  padding-inline-start: var(--spacing-200);
  padding-inline-end: var(--spacing-200);
}

.stat-table-title.is-plain {
  background-color: transparent;
}

.stat-table thead tr {
  height: var(--spacing-500); 
}

.stat-table thead .stat-table-entity,
.stat-table thead .stat-table-attr {
  border-bottom: var(--border-weight-50) solid var(--neutral-300);
}

.stat-table-entity {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  width: var(--stat-table-entity-width);
  min-width: var(--spacing-900); 
  box-sizing: border-box;
  background-color: var(--bg-base);
  border-inline-end: var(--border-weight-50) solid var(--neutral-300);
  color: var(--text-secondary);
  text-align: start;
  padding: var(--spacing-100) var(--spacing-200); 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-table thead .stat-table-entity {
  z-index: 2;
}

.stat-table-entity.is-title {
  color: var(--text-primary);
}

.stat-table-attr {
  width: var(--spacing-600); 
  box-sizing: border-box;
  padding: var(--spacing-100);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.stat-table thead .stat-table-attr {
  color: var(--text-placeholder);
}

.stat-table-attr.is-text {
  text-align: start;
  padding-inline-start: var(--spacing-200);
  padding-inline-end: var(--spacing-200);
  
  white-space: normal;
  overflow-wrap: break-word;
}

.stat-table-attr.is-sorted {
  color: var(--text-primary);
  font-weight: 600;
}

.stat-table thead .stat-table-attr.is-sorted {
  color: var(--text-primary);
  border-bottom: var(--border-weight-200) solid var(--text-primary);
}

.stat-table-attr.is-win {
  color: var(--status-success);
}

.stat-table-attr.is-loss {
  color: var(--status-error);
}

.stat-table-attr.is-empty {
  color: var(--text-secondary);
}

.stat-table-row {
  height: var(--spacing-600); 
}

.stat-table-row.is-tinted .stat-table-attr {
  background-color: var(--neutral-50);
}

.stat-table-row.is-tinted .stat-table-entity {
  background-image: linear-gradient(var(--neutral-50), var(--neutral-50));
}

.stat-table-row.is-featured .stat-table-entity,
.stat-table-row.is-featured .stat-table-attr {
  background-color: var(--brand-core);
  background-image: none;
  color: var(--white-700);
}

.stat-table-row.is-featured .stat-table-entity,
.stat-table-row.is-featured .stat-table-attr.is-sorted,
.stat-table-row.is-featured .stat-table-entity-block {
  color: var(--white-1000);
}

.stat-table-row.is-featured .stat-table-entity *,
.stat-table-row.is-featured .stat-table-attr * {
  color: inherit;
}

.stat-table-row.is-featured .stat-table-attr.is-win,
.stat-table-row.is-featured .stat-table-attr.is-loss,
.stat-table-row.is-featured .stat-table-attr.is-empty {
  color: var(--white-700);
}

.stat-table-entity-block {
  display: flex;
  align-items: center;
  gap: var(--spacing-50); 
  min-width: 0;
  color: var(--text-primary);
}

.stat-table-entity-block img,
.stat-table-entity-block svg {
  flex-shrink: 0;
  width: var(--spacing-400);  
  height: var(--spacing-400);
  object-fit: contain;
}

.stat-table-entity-block > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-table-rank {
  flex-shrink: 0;
  width: var(--spacing-200); 
  color: var(--text-secondary);
  text-align: center;
}

.stat-table-row.is-featured .stat-table-rank {
  color: var(--white-700);
}

}

/* input-components.css */
@layer crnl.components {


.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-25);             
  width: 100%;
  box-sizing: border-box;
}

.input-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-100);            
  padding-inline-start: var(--spacing-100);   
  padding-bottom: var(--spacing-100); 
}

.input-label {
  flex: 1;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  transition: color 150ms ease;
}

.input-field:focus-within .input-label {
  color: var(--org-primary-button);
}

.input-field.is-error .input-label {
  color: var(--text-primary);
}

.input-field.is-disabled .input-label {
  opacity: 0.25;
}

.input-link {
  flex-shrink: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-interactive);
  cursor: pointer;
  padding: var(--spacing-50) var(--spacing-150); 
  border-radius: var(--border-radius-50);
  text-decoration: none;
  transition: opacity 120ms ease;
}

.input-link:hover {
  opacity: 0.75;
}

.input-field.is-disabled .input-link {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.input-and-message {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);            
  width: 100%;
}

.input-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);            
  height: 56px;
  padding-inline-start: var(--spacing-200);   
  padding-inline-end: var(--spacing-200);  
  border-radius: var(--border-radius-100); 
  border: var(--border-weight-50) solid var(--neutral-300);
  background-color: var(--bg-input);
  box-sizing: border-box;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    border-width 120ms ease;
  cursor: text;
}

.input-control:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
}

.input-control:focus-within {
  border-width: var(--border-weight-200); 
  border-color: var(--org-primary-button);
  background-color: var(--bg-input);
}

.input-control:focus-within:hover {
  background-color: var(--neutral-100);
}

.input-control:active {
  background-color: var(--black-300);
}

.input-field.is-error .input-control {
  border-color: var(--status-error);
}

.input-field.is-error .input-control:hover {
  background-color: var(--neutral-100);
  border-color: var(--status-error);
}

.input-field.is-error .input-control:focus-within {
  border-width: var(--border-weight-200);
  border-color: var(--status-error);
}

.input-field.is-disabled .input-control {
  border-color: var(--neutral-100);
  background-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.25;
}

.input-control input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: text;
}

.input-control input::placeholder {
  color: var(--text-placeholder);
  opacity: 1; 
}

.input-field.is-disabled .input-control input {
  cursor: not-allowed;
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color 150ms ease;
}

.input-icon.material-symbols-rounded {
  font-size: 24px;
}

.input-control:focus-within .input-icon {
  color: var(--org-primary-button);
}

.input-field.is-error .input-control:focus-within .input-icon {
  color: var(--text-secondary);
}

.input-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, transform 180ms ease-out;
  transform: scale(1);
}

.input-clear:hover {
  background-color: var(--neutral-100);
  transform: scale(1.035);
}

.input-clear:active {
  background-color: var(--neutral-200);
  transform: scale(0.965);
}

.input-clear.material-symbols-rounded {
  font-size: 24px;
}

.input-field:not(.has-value) .input-clear {
  display: none;
}

.input-field.is-disabled .input-clear {
  pointer-events: none;
}

.input-message {
  padding-inline-start: var(--spacing-100);   
  padding-inline-end: var(--spacing-100);  
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  transition: color 150ms ease;
}

.input-field.is-error .input-message {
  color: var(--status-error);
}

.input-field.is-disabled .input-message {
  opacity: 0.25;
}

@keyframes input-error-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.input-field.is-error .input-control {
  animation: input-error-shake 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .input-field.is-error .input-control {
    animation: none;
  }
}

.input-select .input-control {
  position: relative; 
  cursor: pointer;
}

.input-select-display {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none; 
  transition: color 150ms ease;
}

.input-select-display.is-placeholder {
  color: var(--text-secondary);
}

.input-select-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 24px; 
  transition: color 150ms ease, transform 200ms ease;
}

.input-select .input-control:focus-within .input-select-chevron {
  color: var(--org-primary-button);
}

.input-select.is-error .input-control:focus-within .input-select-chevron {
  color: var(--text-secondary);
}

.input-select.is-open .input-select-chevron {
  transform: rotate(180deg);
}

.input-select .input-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  z-index: 1; 
  -webkit-appearance: none;
  appearance: none;
}

.input-select.is-disabled .input-control {
  cursor: not-allowed;
}

.input-select.is-disabled .input-control select {
  pointer-events: none;
}

}

/* tag-chip-components.css */
@layer crnl.components {


.tag,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 4px;
  gap: var(--spacing-50); 
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
  
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-sizing: border-box;
}

.tag .material-symbols-rounded,
.chip .material-symbols-rounded {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.tag {
  background-color: var(--neutral-100); 
  color: var(--text-primary);
  padding-top: var(--spacing-50);    
  padding-bottom: var(--spacing-50); 
  padding-inline-start: var(--spacing-150);  
  padding-inline-end: var(--spacing-150); 
}

.tag.tag-icon-leading {
  padding-inline-start: var(--spacing-100);  
  padding-inline-end: var(--spacing-150); 
}

.tag.tag-icon-trailing {
  padding-inline-start: var(--spacing-150);  
  padding-inline-end: var(--spacing-100); 
}

.chip {
  
  padding-inline-start: var(--spacing-150);  
  padding-inline-end: var(--spacing-150); 
}

.chip.chip-brand-color {
  color: var(--color-interactive);
}

.chip.chip-brand-color * {
  color: inherit;
}

.chip.is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.25;
}

.chip.chip-icon-leading {
  padding-inline-start: var(--spacing-100);  
  padding-inline-end: var(--spacing-150); 
}

.chip.chip-icon-trailing {
  padding-inline-start: var(--spacing-150);  
  padding-inline-end: var(--spacing-100); 
}

}

/* nav-components.css */
@layer crnl.components {


.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  backdrop-filter: blur(var(--background-blur));
  -webkit-backdrop-filter: blur(var(--background-blur));
  border-bottom: var(--border-weight-100) solid var(--border-default);
  padding: var(--spacing-100) var(--spacing-200); 
}

@media (min-width: 768px) {
  .top-bar {
    padding: var(--spacing-100) var(--spacing-600); 
  }
}

@media (min-width: 1280px) {
  .top-bar {
    padding: var(--spacing-100) var(--spacing-800); 
  }
}

.top-bar-inner {
  display: flex;
  align-items: center;
  min-height: 64px; 
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-150); 
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.1s;
}

.top-bar-brand:hover {
  opacity: 0.85;
}

.top-bar-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.top-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.top-bar-name-short { display: block; }
.top-bar-name-full  { display: none;  }

@media (min-width: 768px) {
  .top-bar-name-short { display: none;  }
  .top-bar-name-full  { display: block; }
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-100); 
  flex-shrink: 0;
}

.tabs {
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  scrollbar-width: none; 
  border-bottom: var(--border-weight-100) solid var(--border-default);
}

.tabs::-webkit-scrollbar {
  display: none; 
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-150) var(--spacing-200); 
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  outline: none;
  border-bottom: 4px solid transparent;
  margin-bottom: -1px; 
  font-size: 16px;     
  font-weight: 400;    
  line-height: 1.5;
  font-family: inherit;
  color: var(--text-primary);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: color 0.1s, opacity 0.1s;
}

.tab:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: -2px;
}

.tab:not(.is-active):not([aria-selected="true"]):hover {
  opacity: 0.75;
}

.tab.is-active,
.tab[aria-selected="true"] {
  color: var(--interactive-primary);
  border-bottom-color: var(--interactive-primary);
  font-weight: 600; 
}

.tabs-neutral .tab.is-active,
.tabs-neutral .tab[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--neutral-1000);
  font-weight: 600;
}

.steps {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--spacing-100); 
  flex-shrink: 0;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-number {
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
}

.step-label {
  font-size: 14px;    
  line-height: 1.43;
  white-space: nowrap;
  font-family: inherit;
}

.step-connector {
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-inline: var(--spacing-50); 
}

.step-completed .step-circle {
  background: var(--status-success);
}
.step-completed .step-circle .icon {
  color: var(--white-1000);
}
.step-completed .step-label {
  font-weight: 400;
  color: var(--text-secondary);
}

.step-active .step-circle {
  background: var(--neutral-1000);
}
.step-active .step-number {
  color: var(--white-1000);
  font-weight: 600;
}
.step-active .step-label {
  font-weight: 600;
  color: var(--text-primary);
}

.step-pending .step-circle {
  background: transparent;
  border: var(--border-weight-100) solid var(--neutral-300); 
}
.step-pending .step-number {
  color: var(--text-secondary); 
  font-weight: 400;
}
.step-pending .step-label {
  font-weight: 400;
  color: var(--text-secondary);
}

.steps-brand .step-completed .step-circle {
  background: var(--interactive-primary);
}
.steps-brand .step-completed .step-circle .icon {
  color: var(--interactive-primary-text);
}

@media (max-width: 499px) {
  .step-label {
    display: none;
  }
}

.page-header {
  background: var(--bg-base);
  padding-top: var(--spacing-800);    
  padding-inline: 0;                  
  border-bottom: var(--border-weight-100) solid var(--border-default);
}

@media (min-width: 768px) {
  .page-header {
    padding-inline: var(--spacing-400); 
  }
}

@media (min-width: 1280px) {
  .page-header {
    padding-inline: var(--spacing-600); 
  }
}

.page-header-content {
  padding-inline: var(--spacing-200); 
  padding-bottom: var(--spacing-500); 
}

.page-header.has-tabs .page-header-content {
  padding-bottom: var(--spacing-300); 
}

.page-header .tabs {
  border-bottom: none;
}

.page-header.has-steps {
  padding-top: var(--spacing-500); 
}

.page-header.has-steps .page-header-content {
  padding-bottom: var(--spacing-300); 
}

@media (min-width: 1280px) {
  .page-header.has-steps .page-header-content {
    padding-bottom: var(--spacing-500); 
  }
}

.page-header .steps {
  padding-inline: var(--spacing-200); 
  padding-bottom: var(--spacing-400); 
}

@media (min-width: 1280px) {
  .page-header .steps {
    padding-bottom: var(--spacing-500); 
  }
}

}

/* ios-nav-components.css */
@layer crnl.components {


:root {
  
  --ios-modal-stack-bg: linear-gradient(
    to bottom,
    rgba(100, 100, 100, 0.5),
    rgba(70, 70, 70, 0.35)
  );
}

:root { --brand-tab-icon: url('../images/placeholder-logo.svg'); }

.ios-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  color: var(--text-primary);
  transition: opacity 0.15s;
  
}

.ios-nav-btn:hover  { opacity: 0.8; }
.ios-nav-btn:active { opacity: 0.6; }

.ios-nav-btn.ios-glass {
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s;
}
.ios-nav-btn.ios-glass:hover {
  opacity: 1;
}
.ios-nav-btn.ios-glass:active {
  opacity: 1;
  transform: scale(1.15);
}

.ios-nav-btn.ios-glass:active::before {
  background: linear-gradient(
    to bottom,
    var(--white-300),
    var(--white-100)
  );
}

.ios-nav-btn .icon {
  font-size: 24px;
}

.ios-nav-btn-brand {
  background: var(--interactive-primary);
  color: var(--interactive-primary-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0.5px 1px 3px var(--white-300),
    inset -0.5px -1px 2px rgba(0, 0, 0, 0.2),
    0px 2px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s;
}

.ios-nav-btn-brand:hover { opacity: 1; }
.ios-nav-btn-brand:active {
  opacity: 1;
  transform: scale(1.15);
}

.ios-nav-btn-brand::before,
.ios-nav-btn-brand::after {
  display: none;
}

.ios-nav-btn-brand > span:not(.icon) {
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.32px;
}

.ios-nav-maintab {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 52px;
  padding: 0 var(--spacing-200) 6px;
  box-sizing: border-box;
}

.ios-nav-maintab::before,
.ios-nav-maintab::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(-1 * var(--safe-area-top)); 
  bottom: -36px; 
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top,
    transparent 0%,
    var(--black-300) 15%,
    rgba(0,0,0,0.35) 30%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.8) 60%,
    rgba(0,0,0,0.95) 78%,
    black 100%
  );
  mask-image: linear-gradient(to top,
    transparent 0%,
    var(--black-300) 15%,
    rgba(0,0,0,0.35) 30%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.8) 60%,
    rgba(0,0,0,0.95) 78%,
    black 100%
  );
}

.ios-nav-maintab::before {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.ios-nav-maintab::after {
  background: var(--bg-base);
  opacity: 0.9;
}

.ios-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px; 
  flex-shrink: 0;
}

.ios-chrome-top,
.ios-chrome-bottom {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 100;
  
  pointer-events: none;
}

.ios-chrome-top > *,
.ios-chrome-bottom > * {
  pointer-events: auto;
}

.ios-chrome-bottom {
  bottom: 0;
}

.ios-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
}

.ios-scroll::-webkit-scrollbar {
  display: none;
}

.ios-scroll-inner {
  padding-bottom: var(--ios-tab-bar-clearance);
}

.ios-status-bar {
  transition: color 0.3s;
}

.ios-chrome-top {
  top: 0;
  padding-bottom: 8px;
}

.ios-nav-subtabs-container {
  padding: 8px 12px 8px;
}

.ios-nav-subtabs {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 100px;
  height: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ios-nav-subtabs::-webkit-scrollbar { display: none; }
.ios-nav-subtab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 3px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.ios-nav-subtab.is-active {
  color: var(--interactive-primary);
  background: var(--ios-selected-tab-bg);
  border-radius: 20px;
  margin: 0 -4px;
  padding: 3px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ios-nav-subtab-sep {
  width: 1px;
  height: 16px;
  background: var(--border-default);
  flex-shrink: 0;
  align-self: center;
}

.ios-nav-subtab.is-active + .ios-nav-subtab-sep,
.ios-nav-subtab-sep:has(+ .ios-nav-subtab.is-active) {
  visibility: hidden;
}

.ios-nav-page {
  position: sticky;
  top: var(--safe-area-top);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.ios-nav-page-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.ios-nav-page::before,
.ios-nav-page::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(-1 * var(--safe-area-top)); 
  bottom: -36px; 
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top,
    transparent 0%,
    rgba(0,0,0,0.2) 20%,
    rgba(0,0,0,0.7) 32%,
    rgba(0,0,0,0.95) 42%,
    rgba(0,0,0,0.95) 52%
  );
  mask-image: linear-gradient(to top,
    transparent 0%,
    rgba(0,0,0,0.2) 20%,
    rgba(0,0,0,0.7) 32%,
    rgba(0,0,0,0.95) 42%,
    rgba(0,0,0,0.95) 52%
  );
}

.ios-nav-page::before {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.ios-nav-page::after {
  background: var(--bg-base);
  opacity: 0.9;
}

.ios-nav-page-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--spacing-600); 
  pointer-events: none; 
}

.ios-nav-page-left,
.ios-nav-page .ios-nav-page-left {
  position: absolute;
  inset-inline-start: var(--spacing-200);
}

.ios-nav-page-right,
.ios-nav-page .ios-nav-page-right {
  position: absolute;
  inset-inline-end: var(--spacing-200);
}

.ios-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 9995; 
  display: flex;
  flex-direction: column;
  background: black;
  padding-top: var(--safe-area-top); 
}

.ios-modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.ios-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ios-modal-backdrop[hidden] {
  display: none;
}

.ios-status-bar.ios-status-bar-modal {
  background: transparent;
  color: white;
}

.ios-modal-stack {
  flex-shrink: 0;
  height: 60px;
  margin: 0 16px -50px;
  background: var(--ios-modal-stack-bg);
  border-radius: 38px 38px 0 0;
  box-shadow: none;
}

.ios-modal-backdrop .ios-modal-stack {
  transform: scaleX(0.85) scaleY(0.5);
  transform-origin: bottom center;
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) 0.3s,
    opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1) 0.3s;
}

.ios-modal-backdrop.is-open .ios-modal-stack {
  transform: scaleX(1) scaleY(1);
  opacity: 1;
}

.ios-modal-backdrop .ios-modal-sheet {
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.ios-modal-backdrop.is-open .ios-modal-sheet {
  transform: translateY(0);
}

.ios-modal-sheet {
  flex: 1;
  min-height: 0; 
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow:
    0 -4px 32px rgba(0, 0, 0, 0.08),
    0 -8px 64px rgba(0, 0, 0, 0.12);
}

.ios-nav-modal {
  position: relative;
  z-index: 1; 
  display: flex;
  flex-direction: column;
  padding: 16px 0 10px;
  flex-shrink: 0;
}

.ios-nav-modal::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  bottom: -36px;
  pointer-events: none;
  z-index: -1;
  background: var(--bg-base);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to top,
    transparent 0%,
    rgba(0,0,0,0.2) 10%,
    rgba(0,0,0,0.7) 20%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.95) 100%
  );
  mask-image: linear-gradient(to top,
    transparent 0%,
    rgba(0,0,0,0.2) 10%,
    rgba(0,0,0,0.7) 20%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.95) 100%
  );
}

.ios-nav-modal-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spacing-200);
}

.ios-nav-modal::before {
  content: '';
  position: absolute;
  top: 6px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 100px;
  background: var(--neutral-300);
}

.ios-nav-modal .ios-nav-btn,
.ios-nav-modal-row .ios-nav-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.ios-nav-modal .ios-nav-page-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0; 
  pointer-events: auto; 
}

.ios-nav-modal .ios-nav-page-left,
.ios-nav-modal .ios-nav-page-right {
  position: relative;
  inset-inline-start: auto;
  inset-inline-end: auto;
}

.ios-modal-content {
  flex: 1;
  overflow-y: auto;
}

.ios-tab-bar {
  position: relative;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 20px 24px;
  background: transparent;
  pointer-events: none; 
}

.ios-tab-bar-inner {
  pointer-events: auto;
}

.ios-tab-bar::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  top: -120px; 
  background: var(--bg-base);
  opacity: 0.9;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.03) 15%,
    rgba(0,0,0,0.1) 30%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.5) 60%,
    rgba(0,0,0,0.8) 78%,
    black 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.03) 15%,
    rgba(0,0,0,0.1) 30%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.5) 60%,
    rgba(0,0,0,0.8) 78%,
    black 100%
  );
  pointer-events: none;
  z-index: -1;
}

.ios-glass {
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  background:
    var(--neutral-200),
    var(--inverted-300),
    var(--black-200);
  background-blend-mode: luminosity;
}

.ios-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    var(--neutral-100),
    var(--black-200)
  );
  mix-blend-mode: hard-light;
  box-shadow:
    inset 0.5px 1px 3px var(--white-200),
    inset -0.5px -1px 2px var(--white-100);
  pointer-events: none;
}

.ios-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(175deg,
    var(--white-300) 20.81%,
    var(--white-200) 26.66%,
    var(--white-100) 40.87%,
    var(--black-200) 49.78%,
    var(--white-100) 58.41%,
    var(--white-100) 67.16%,
    var(--white-200) 78.75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.ios-tab-bar-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 4px;
  border-radius: 100px;
  min-height: 58px; 
}

.ios-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 0 6px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 100px;
  position: relative;
  color: var(--neutral-1000);
  font-family: inherit;
  transition: color 0.15s;
}

.ios-tab:active { opacity: 0.6; }

.ios-tab .icon {
  font-variation-settings: 'FILL' 0;
}

.ios-tab.is-active {
  color: var(--ios-selected-tab);
}

.ios-tab.is-active .icon {
  font-variation-settings: 'FILL' 1;
}

.ios-tab.is-active {
  isolation: isolate;
}

.ios-tab.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: var(--ios-selected-tab-bg);
  z-index: -1;
}

.ios-tab .icon {
  font-size: 28px;
  line-height: 1;
}

.ios-tab-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.ios-tab-brand-icon {
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-image: var(--brand-tab-icon);
  mask-image: var(--brand-tab-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

[data-platform="app"] .ios-content.has-ios-tab-bar {
  padding-bottom: 95px; 
}

}

/* web-footer-components.css */
@layer crnl.components {


.web-footer {
  background: var(--brand-dark);
  padding: var(--spacing-800) var(--spacing-400) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-500);
  margin-top: auto;
}

.web-footer-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
}

.web-footer-logo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: var(--border-radius-200);
  overflow: hidden;
}

.web-footer-logo .leading-logo {
  width: 120px;
  height: 120px;
}

.web-footer-app {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  flex-shrink: 0;
}

.web-footer-app-title {
  color: white;
}

.web-footer-badges {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  padding-top: var(--spacing-100);
}

.web-footer-badge {
  display: block;
  height: 40px;
  width: auto;
}

.web-footer-badge img {
  height: 40px;
  width: auto;
  display: block;
}

.web-footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.web-footer-column-heading {
  color: white;
}

.web-footer-link {
  display: block;
  color: var(--white-700);
  text-decoration: none;
  transition: color 0.15s ease;
  cursor: pointer;
}

.web-footer-link:hover {
  color: white;
}

.web-footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-200) 0;
  border-top: var(--border-weight-50) solid var(--white-200);
  gap: var(--spacing-400);
}

.web-footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.web-footer-copyright {
  color: white;
}

.web-footer-legal-links {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-200);
  flex-wrap: wrap;
}

.web-footer-legal-links a {
  color: var(--white-700);
  text-decoration: none;
  transition: color 0.15s ease;
}

.web-footer-legal-links a:hover {
  color: white;
}

.web-footer-powered {
  display: flex;
  align-items: center;
  gap: var(--spacing-25);
  flex-shrink: 0;
}

.web-footer-powered span {
  color: white;
}

.web-footer-powered img {
  height: 19px;
  width: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 1100px) {
  .web-footer {
    padding: var(--spacing-800) var(--spacing-800) 0;
  }

  .web-footer-main {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-500);
  }

  .web-footer-main::after {
    content: '';
  }

  .web-footer-bottom {
    flex-direction: row;
    align-items: center;
  }

  .web-footer-legal {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 500px) {
  .web-footer-legal-links {
    flex-direction: column;
    gap: var(--spacing-100);
  }
}

}

/* product-patterns.css */
@layer crnl.patterns {


.context-header {
  padding-top: var(--spacing-800);
  background: var(--bg-base);
  border-bottom: var(--border-weight-100) solid var(--neutral-200);
}

@media (max-width: 768px) {
  .context-header {
    padding-top: var(--spacing-200);
  }

  .context-header .header-inner {
    padding-bottom: var(--spacing-200);
  }
}

.circle-icon {
  width: var(--spacing-700);
  height: var(--spacing-700);
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-row {
  display: flex;
  gap: var(--spacing-200);
  align-items: center;
}

.action-row .btn {
  flex: 1;
}

.row-card {
  border-radius: var(--border-radius-200);
  padding: var(--spacing-300);
  overflow: hidden;
}

.row-card-media {
  padding: 0;
}

.row-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.action-tile-row {
  display: flex;
  gap: var(--spacing-25);
  width: 100%;
}

.action-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) 0;
  border-radius: var(--border-radius-100);
  background: none;
  border: none;
  cursor: pointer;
}

.action-tile-circle {
  width: var(--spacing-700);
  height: var(--spacing-700);
  border-radius: 50%;
  background: var(--interactive-transactional);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.action-tile-circle .icon {
  color: var(--interactive-transactional-text);
}

.heading-select {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-50);
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-25);
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-25);
}

.link {
  font-weight: 600;
  color: var(--color-interactive);
  text-decoration: none;
  cursor: pointer;
}

}

/* boilerplate.css */
@layer crnl.utilities {


.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.gap-xs { gap: var(--spacing-100); }
.gap-sm { gap: var(--spacing-150); }
.gap-md { gap: var(--spacing-200); }
.gap-lg { gap: var(--spacing-300); }
.gap-xl { gap: var(--spacing-400); }

.m-25 { margin: var(--spacing-25); }
.m-50 { margin: var(--spacing-50); }
.m-100 { margin: var(--spacing-100); }
.m-150 { margin: var(--spacing-150); }
.m-200 { margin: var(--spacing-200); }
.m-250 { margin: var(--spacing-250); }
.m-300 { margin: var(--spacing-300); }
.m-400 { margin: var(--spacing-400); }
.m-500 { margin: var(--spacing-500); }
.m-600 { margin: var(--spacing-600); }
.m-700 { margin: var(--spacing-700); }
.m-800 { margin: var(--spacing-800); }
.m-900 { margin: var(--spacing-900); }

.mt-25 { margin-top: var(--spacing-25); }
.mt-50 { margin-top: var(--spacing-50); }
.mt-100 { margin-top: var(--spacing-100); }
.mt-150 { margin-top: var(--spacing-150); }
.mt-200 { margin-top: var(--spacing-200); }
.mt-250 { margin-top: var(--spacing-250); }
.mt-300 { margin-top: var(--spacing-300); }
.mt-400 { margin-top: var(--spacing-400); }
.mt-500 { margin-top: var(--spacing-500); }
.mt-600 { margin-top: var(--spacing-600); }
.mt-700 { margin-top: var(--spacing-700); }
.mt-800 { margin-top: var(--spacing-800); }
.mt-900 { margin-top: var(--spacing-900); }

.mb-25 { margin-bottom: var(--spacing-25); }
.mb-50 { margin-bottom: var(--spacing-50); }
.mb-100 { margin-bottom: var(--spacing-100); }
.mb-150 { margin-bottom: var(--spacing-150); }
.mb-200 { margin-bottom: var(--spacing-200); }
.mb-250 { margin-bottom: var(--spacing-250); }
.mb-300 { margin-bottom: var(--spacing-300); }
.mb-400 { margin-bottom: var(--spacing-400); }
.mb-500 { margin-bottom: var(--spacing-500); }
.mb-600 { margin-bottom: var(--spacing-600); }
.mb-700 { margin-bottom: var(--spacing-700); }
.mb-800 { margin-bottom: var(--spacing-800); }
.mb-900 { margin-bottom: var(--spacing-900); }

.ms-25 { margin-inline-start: var(--spacing-25); }
.ms-50 { margin-inline-start: var(--spacing-50); }
.ms-100 { margin-inline-start: var(--spacing-100); }
.ms-150 { margin-inline-start: var(--spacing-150); }
.ms-200 { margin-inline-start: var(--spacing-200); }
.ms-250 { margin-inline-start: var(--spacing-250); }
.ms-300 { margin-inline-start: var(--spacing-300); }
.ms-400 { margin-inline-start: var(--spacing-400); }
.ms-500 { margin-inline-start: var(--spacing-500); }
.ms-600 { margin-inline-start: var(--spacing-600); }
.ms-700 { margin-inline-start: var(--spacing-700); }
.ms-800 { margin-inline-start: var(--spacing-800); }
.ms-900 { margin-inline-start: var(--spacing-900); }

.me-25 { margin-inline-end: var(--spacing-25); }
.me-50 { margin-inline-end: var(--spacing-50); }
.me-100 { margin-inline-end: var(--spacing-100); }
.me-150 { margin-inline-end: var(--spacing-150); }
.me-200 { margin-inline-end: var(--spacing-200); }
.me-250 { margin-inline-end: var(--spacing-250); }
.me-300 { margin-inline-end: var(--spacing-300); }
.me-400 { margin-inline-end: var(--spacing-400); }
.me-500 { margin-inline-end: var(--spacing-500); }
.me-600 { margin-inline-end: var(--spacing-600); }
.me-700 { margin-inline-end: var(--spacing-700); }
.me-800 { margin-inline-end: var(--spacing-800); }
.me-900 { margin-inline-end: var(--spacing-900); }

.mx-25 { margin-inline-start: var(--spacing-25); margin-inline-end: var(--spacing-25); }
.mx-50 { margin-inline-start: var(--spacing-50); margin-inline-end: var(--spacing-50); }
.mx-100 { margin-inline-start: var(--spacing-100); margin-inline-end: var(--spacing-100); }
.mx-150 { margin-inline-start: var(--spacing-150); margin-inline-end: var(--spacing-150); }
.mx-200 { margin-inline-start: var(--spacing-200); margin-inline-end: var(--spacing-200); }
.mx-250 { margin-inline-start: var(--spacing-250); margin-inline-end: var(--spacing-250); }
.mx-300 { margin-inline-start: var(--spacing-300); margin-inline-end: var(--spacing-300); }
.mx-400 { margin-inline-start: var(--spacing-400); margin-inline-end: var(--spacing-400); }
.mx-500 { margin-inline-start: var(--spacing-500); margin-inline-end: var(--spacing-500); }
.mx-600 { margin-inline-start: var(--spacing-600); margin-inline-end: var(--spacing-600); }
.mx-700 { margin-inline-start: var(--spacing-700); margin-inline-end: var(--spacing-700); }
.mx-800 { margin-inline-start: var(--spacing-800); margin-inline-end: var(--spacing-800); }
.mx-900 { margin-inline-start: var(--spacing-900); margin-inline-end: var(--spacing-900); }

.my-25 { margin-top: var(--spacing-25); margin-bottom: var(--spacing-25); }
.my-50 { margin-top: var(--spacing-50); margin-bottom: var(--spacing-50); }
.my-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
.my-150 { margin-top: var(--spacing-150); margin-bottom: var(--spacing-150); }
.my-200 { margin-top: var(--spacing-200); margin-bottom: var(--spacing-200); }
.my-250 { margin-top: var(--spacing-250); margin-bottom: var(--spacing-250); }
.my-300 { margin-top: var(--spacing-300); margin-bottom: var(--spacing-300); }
.my-400 { margin-top: var(--spacing-400); margin-bottom: var(--spacing-400); }
.my-500 { margin-top: var(--spacing-500); margin-bottom: var(--spacing-500); }
.my-600 { margin-top: var(--spacing-600); margin-bottom: var(--spacing-600); }
.my-700 { margin-top: var(--spacing-700); margin-bottom: var(--spacing-700); }
.my-800 { margin-top: var(--spacing-800); margin-bottom: var(--spacing-800); }
.my-900 { margin-top: var(--spacing-900); margin-bottom: var(--spacing-900); }

.mx-auto { margin-inline-start: auto; margin-inline-end: auto; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }

.p-25 { padding: var(--spacing-25); }
.p-50 { padding: var(--spacing-50); }
.p-100 { padding: var(--spacing-100); }
.p-150 { padding: var(--spacing-150); }
.p-200 { padding: var(--spacing-200); }
.p-250 { padding: var(--spacing-250); }
.p-300 { padding: var(--spacing-300); }
.p-400 { padding: var(--spacing-400); }
.p-500 { padding: var(--spacing-500); }
.p-600 { padding: var(--spacing-600); }
.p-700 { padding: var(--spacing-700); }
.p-800 { padding: var(--spacing-800); }
.p-900 { padding: var(--spacing-900); }

.pt-25 { padding-top: var(--spacing-25); }
.pt-50 { padding-top: var(--spacing-50); }
.pt-100 { padding-top: var(--spacing-100); }
.pt-150 { padding-top: var(--spacing-150); }
.pt-200 { padding-top: var(--spacing-200); }
.pt-250 { padding-top: var(--spacing-250); }
.pt-300 { padding-top: var(--spacing-300); }
.pt-400 { padding-top: var(--spacing-400); }
.pt-500 { padding-top: var(--spacing-500); }
.pt-600 { padding-top: var(--spacing-600); }
.pt-700 { padding-top: var(--spacing-700); }
.pt-800 { padding-top: var(--spacing-800); }
.pt-900 { padding-top: var(--spacing-900); }

.pb-25 { padding-bottom: var(--spacing-25); }
.pb-50 { padding-bottom: var(--spacing-50); }
.pb-100 { padding-bottom: var(--spacing-100); }
.pb-150 { padding-bottom: var(--spacing-150); }
.pb-200 { padding-bottom: var(--spacing-200); }
.pb-250 { padding-bottom: var(--spacing-250); }
.pb-300 { padding-bottom: var(--spacing-300); }
.pb-400 { padding-bottom: var(--spacing-400); }
.pb-500 { padding-bottom: var(--spacing-500); }
.pb-600 { padding-bottom: var(--spacing-600); }
.pb-700 { padding-bottom: var(--spacing-700); }
.pb-800 { padding-bottom: var(--spacing-800); }
.pb-900 { padding-bottom: var(--spacing-900); }

.ps-25 { padding-inline-start: var(--spacing-25); }
.ps-50 { padding-inline-start: var(--spacing-50); }
.ps-100 { padding-inline-start: var(--spacing-100); }
.ps-150 { padding-inline-start: var(--spacing-150); }
.ps-200 { padding-inline-start: var(--spacing-200); }
.ps-250 { padding-inline-start: var(--spacing-250); }
.ps-300 { padding-inline-start: var(--spacing-300); }
.ps-400 { padding-inline-start: var(--spacing-400); }
.ps-500 { padding-inline-start: var(--spacing-500); }
.ps-600 { padding-inline-start: var(--spacing-600); }
.ps-700 { padding-inline-start: var(--spacing-700); }
.ps-800 { padding-inline-start: var(--spacing-800); }
.ps-900 { padding-inline-start: var(--spacing-900); }

.pe-25 { padding-inline-end: var(--spacing-25); }
.pe-50 { padding-inline-end: var(--spacing-50); }
.pe-100 { padding-inline-end: var(--spacing-100); }
.pe-150 { padding-inline-end: var(--spacing-150); }
.pe-200 { padding-inline-end: var(--spacing-200); }
.pe-250 { padding-inline-end: var(--spacing-250); }
.pe-300 { padding-inline-end: var(--spacing-300); }
.pe-400 { padding-inline-end: var(--spacing-400); }
.pe-500 { padding-inline-end: var(--spacing-500); }
.pe-600 { padding-inline-end: var(--spacing-600); }
.pe-700 { padding-inline-end: var(--spacing-700); }
.pe-800 { padding-inline-end: var(--spacing-800); }
.pe-900 { padding-inline-end: var(--spacing-900); }

.px-25 { padding-inline-start: var(--spacing-25); padding-inline-end: var(--spacing-25); }
.px-50 { padding-inline-start: var(--spacing-50); padding-inline-end: var(--spacing-50); }
.px-100 { padding-inline-start: var(--spacing-100); padding-inline-end: var(--spacing-100); }
.px-150 { padding-inline-start: var(--spacing-150); padding-inline-end: var(--spacing-150); }
.px-200 { padding-inline-start: var(--spacing-200); padding-inline-end: var(--spacing-200); }
.px-250 { padding-inline-start: var(--spacing-250); padding-inline-end: var(--spacing-250); }
.px-300 { padding-inline-start: var(--spacing-300); padding-inline-end: var(--spacing-300); }
.px-400 { padding-inline-start: var(--spacing-400); padding-inline-end: var(--spacing-400); }
.px-500 { padding-inline-start: var(--spacing-500); padding-inline-end: var(--spacing-500); }
.px-600 { padding-inline-start: var(--spacing-600); padding-inline-end: var(--spacing-600); }
.px-700 { padding-inline-start: var(--spacing-700); padding-inline-end: var(--spacing-700); }
.px-800 { padding-inline-start: var(--spacing-800); padding-inline-end: var(--spacing-800); }
.px-900 { padding-inline-start: var(--spacing-900); padding-inline-end: var(--spacing-900); }

.py-25 { padding-top: var(--spacing-25); padding-bottom: var(--spacing-25); }
.py-50 { padding-top: var(--spacing-50); padding-bottom: var(--spacing-50); }
.py-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
.py-150 { padding-top: var(--spacing-150); padding-bottom: var(--spacing-150); }
.py-200 { padding-top: var(--spacing-200); padding-bottom: var(--spacing-200); }
.py-250 { padding-top: var(--spacing-250); padding-bottom: var(--spacing-250); }
.py-300 { padding-top: var(--spacing-300); padding-bottom: var(--spacing-300); }
.py-400 { padding-top: var(--spacing-400); padding-bottom: var(--spacing-400); }
.py-500 { padding-top: var(--spacing-500); padding-bottom: var(--spacing-500); }
.py-600 { padding-top: var(--spacing-600); padding-bottom: var(--spacing-600); }
.py-700 { padding-top: var(--spacing-700); padding-bottom: var(--spacing-700); }
.py-800 { padding-top: var(--spacing-800); padding-bottom: var(--spacing-800); }
.py-900 { padding-top: var(--spacing-900); padding-bottom: var(--spacing-900); }

.gap-25 { gap: var(--spacing-25); }
.gap-50 { gap: var(--spacing-50); }
.gap-100 { gap: var(--spacing-100); }
.gap-150 { gap: var(--spacing-150); }
.gap-200 { gap: var(--spacing-200); }
.gap-250 { gap: var(--spacing-250); }
.gap-300 { gap: var(--spacing-300); }
.gap-400 { gap: var(--spacing-400); }
.gap-500 { gap: var(--spacing-500); }
.gap-600 { gap: var(--spacing-600); }
.gap-700 { gap: var(--spacing-700); }
.gap-800 { gap: var(--spacing-800); }
.gap-900 { gap: var(--spacing-900); }

.gap-y-25 { row-gap: var(--spacing-25); }
.gap-y-50 { row-gap: var(--spacing-50); }
.gap-y-100 { row-gap: var(--spacing-100); }
.gap-y-150 { row-gap: var(--spacing-150); }
.gap-y-200 { row-gap: var(--spacing-200); }
.gap-y-250 { row-gap: var(--spacing-250); }
.gap-y-300 { row-gap: var(--spacing-300); }
.gap-y-400 { row-gap: var(--spacing-400); }
.gap-y-500 { row-gap: var(--spacing-500); }
.gap-y-600 { row-gap: var(--spacing-600); }
.gap-y-700 { row-gap: var(--spacing-700); }
.gap-y-800 { row-gap: var(--spacing-800); }
.gap-y-900 { row-gap: var(--spacing-900); }

.gap-x-25 { column-gap: var(--spacing-25); }
.gap-x-50 { column-gap: var(--spacing-50); }
.gap-x-100 { column-gap: var(--spacing-100); }
.gap-x-150 { column-gap: var(--spacing-150); }
.gap-x-200 { column-gap: var(--spacing-200); }
.gap-x-250 { column-gap: var(--spacing-250); }
.gap-x-300 { column-gap: var(--spacing-300); }
.gap-x-400 { column-gap: var(--spacing-400); }
.gap-x-500 { column-gap: var(--spacing-500); }
.gap-x-600 { column-gap: var(--spacing-600); }
.gap-x-700 { column-gap: var(--spacing-700); }
.gap-x-800 { column-gap: var(--spacing-800); }
.gap-x-900 { column-gap: var(--spacing-900); }

.spacing-row { gap: var(--spacing-row); }
.gap-row { gap: var(--spacing-row); }
.gap-y-row { row-gap: var(--spacing-row); }
.gap-x-row { column-gap: var(--spacing-row); }
.mb-row { margin-bottom: var(--spacing-row); }
.mt-row { margin-top: var(--spacing-row); }
.my-row { margin-top: var(--spacing-row); margin-bottom: var(--spacing-row); }
.pb-row { padding-bottom: var(--spacing-row); }
.pt-row { padding-top: var(--spacing-row); }
.py-row { padding-top: var(--spacing-row); padding-bottom: var(--spacing-row); }

.spacing-card { gap: var(--spacing-card); }
.gap-card { gap: var(--spacing-card); }
.gap-y-card { row-gap: var(--spacing-card); }
.gap-x-card { column-gap: var(--spacing-card); }
.mb-card { margin-bottom: var(--spacing-card); }
.mt-card { margin-top: var(--spacing-card); }
.my-card { margin-top: var(--spacing-card); margin-bottom: var(--spacing-card); }
.pb-card { padding-bottom: var(--spacing-card); }
.pt-card { padding-top: var(--spacing-card); }
.py-card { padding-top: var(--spacing-card); padding-bottom: var(--spacing-card); }

.spacing-content { gap: var(--spacing-content); }
.gap-content { gap: var(--spacing-content); }
.gap-y-content { row-gap: var(--spacing-content); }
.gap-x-content { column-gap: var(--spacing-content); }
.mb-content { margin-bottom: var(--spacing-content); }
.mt-content { margin-top: var(--spacing-content); }
.my-content { margin-top: var(--spacing-content); margin-bottom: var(--spacing-content); }
.pb-content { padding-bottom: var(--spacing-content); }
.pt-content { padding-top: var(--spacing-content); }
.py-content { padding-top: var(--spacing-content); padding-bottom: var(--spacing-content); }

.margin-small { margin: var(--margin-small); }
.mx-small { margin-inline-start: var(--margin-small); margin-inline-end: var(--margin-small); }
.my-small { margin-top: var(--margin-small); margin-bottom: var(--margin-small); }
.mt-small { margin-top: var(--margin-small); }
.mb-small { margin-bottom: var(--margin-small); }
.ms-small { margin-inline-start: var(--margin-small); }
.me-small { margin-inline-end: var(--margin-small); }
.px-small { padding-inline-start: var(--margin-small); padding-inline-end: var(--margin-small); }
.py-small { padding-top: var(--margin-small); padding-bottom: var(--margin-small); }
.pt-small { padding-top: var(--margin-small); }
.pb-small { padding-bottom: var(--margin-small); }
.ps-small { padding-inline-start: var(--margin-small); }
.pe-small { padding-inline-end: var(--margin-small); }

.margin-large { margin: var(--margin-large); }
.mx-large { margin-inline-start: var(--margin-large); margin-inline-end: var(--margin-large); }
.my-large { margin-top: var(--margin-large); margin-bottom: var(--margin-large); }
.mt-large { margin-top: var(--margin-large); }
.mb-large { margin-bottom: var(--margin-large); }
.ms-large { margin-inline-start: var(--margin-large); }
.me-large { margin-inline-end: var(--margin-large); }
.px-large { padding-inline-start: var(--margin-large); padding-inline-end: var(--margin-large); }
.py-large { padding-top: var(--margin-large); padding-bottom: var(--margin-large); }
.pt-large { padding-top: var(--margin-large); }
.pb-large { padding-bottom: var(--margin-large); }
.ps-large { padding-inline-start: var(--margin-large); }
.pe-large { padding-inline-end: var(--margin-large); }

.margin-landing { margin: var(--margin-landing); }
.mx-landing { margin-inline-start: var(--margin-landing); margin-inline-end: var(--margin-landing); }
.my-landing { margin-top: var(--margin-landing); margin-bottom: var(--margin-landing); }
.mt-landing { margin-top: var(--margin-landing); }
.mb-landing { margin-bottom: var(--margin-landing); }
.ms-landing { margin-inline-start: var(--margin-landing); }
.me-landing { margin-inline-end: var(--margin-landing); }
.px-landing { padding-inline-start: var(--margin-landing); padding-inline-end: var(--margin-landing); }
.py-landing { padding-top: var(--margin-landing); padding-bottom: var(--margin-landing); }
.pt-landing { padding-top: var(--margin-landing); }
.pb-landing { padding-bottom: var(--margin-landing); }
.ps-landing { padding-inline-start: var(--margin-landing); }
.pe-landing { padding-inline-end: var(--margin-landing); }

.grid {
  display: grid;
  gap: var(--spacing-300);
}

@media (max-width: 499px) {
  .grid-cols-1-mobile {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 500px) and (max-width: 1099px) {
  .grid-cols-2-tablet {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-3-tablet {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .grid-cols-2-desktop {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-3-desktop {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cols-4-desktop {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-auto-fit {
  display: grid;
  gap: var(--spacing-300);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

@media (max-width: 499px) {
  .grid-auto-fit {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 499px) {
  .hide-mobile {
    display: none;
  }
  
  .show-mobile {
    display: block;
  }
}

@media (min-width: 500px) and (max-width: 1099px) {
  .hide-tablet {
    display: none;
  }
  
  .show-tablet {
    display: block;
  }
}

@media (min-width: 1100px) {
  .hide-desktop {
    display: none;
  }
  
  .show-desktop {
    display: block;
  }
}

@media (max-width: 1099px) {
  .hide-mobile-tablet {
    display: none;
  }
}

@media (min-width: 500px) {
  .hide-tablet-desktop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    
    animation-duration: 0.01ms !important;
    
    animation-iteration-count: 1 !important;
    
    transition-duration: 0.01ms !important;
    
    scroll-behavior: auto !important;
  }

  
  .scale-300,
  .scale-500,
  .scale-700 {
    transform: none;
  }
  
  .scale-300:hover, .scale-300:active, .scale-500:hover, .scale-500:active, .scale-700:hover, .scale-700:active {
    transform: none;
  }
}

.text-primary {
  color: var(--neutral-1000);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-disabled {
  color: var(--neutral-300);
}

.text-placeholder {
  color: var(--neutral-500);
}

.text-brand-core {
  color: var(--brand-core);
}

.text-brand-light {
  color: var(--brand-light);
}

.text-brand-interactive {
  color: var(--color-interactive);
}

.text-brand-inverted {
  color: var(--color-inverted);
}

.text-interactive-tertiary {
  color: var(--interactive-tertiary-text);
}

.text-inverted {
  color: var(--inverted-1000);
}

.text-success {
  color: var(--status-success);
}

.text-warning {
  color: var(--status-warning);
}

.text-error {
  color: var(--status-error);
}

.text-info {
  color: var(--status-info);
}

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

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

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

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

.text-underline {
  text-decoration: underline;
}

.text-line-through {
  text-decoration: line-through;
}

.text-no-underline {
  text-decoration: none;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

}

/* platform-tokens.css */
@layer crnl.platform {


:root {
  --safe-area-top: 0px;
  --ios-tab-bar-clearance: 0px;
  --safe-area-bottom: 0px;
}

[data-platform="app"] {
  --safe-area-top: 59px;
  --ios-tab-bar-clearance: 95px;   
  --safe-area-bottom: 34px;
}

[data-platform="app"] {
  background: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

[data-platform="app"] body {
  width: 393px;
  max-width: 393px;
  min-width: 393px;
  height: 852px;
  max-height: 852px;
  min-height: 852px;
  overflow: hidden;
  position: relative;
  border-radius: 44px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.ios-status-bar {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 9999;
  height: var(--safe-area-top);
  background: transparent;
  color: var(--text-primary);
  pointer-events: none;
}

.ios-safe-area-top {
  height: var(--safe-area-top);
  flex-shrink: 0;
}

.ios-status-bar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ios-home-indicator {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 34px;
  padding-bottom: 8px;
  background: transparent;
  pointer-events: none;
}

.ios-home-indicator::after {
  content: '';
  width: 134px;
  height: 5px;
  border-radius: 100px;
  background: var(--neutral-1000);
  animation: ios-home-indicator-fade 1.2s ease-out forwards;
}

@keyframes ios-home-indicator-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

[data-platform="app"] .ios-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  min-height: 0; 
}

[data-platform="app"] .ios-content::-webkit-scrollbar {
  display: none;
}

[data-platform="app"] .split-row-top {
  padding: var(--spacing-200); 
}
[data-platform="app"] .split-row-bottom {
  padding: var(--spacing-150) var(--spacing-200); 
}

.app-device-controls {
  display: none;
}

[data-platform="app"] .app-device-controls {
  display: flex;
  position: absolute;
  top: 11px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  
  min-width: 125px;
  height: 37px;
  justify-content: center;
  gap: 0;
  align-items: center;
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
  background: #000;
  border: 1px solid var(--white-100);
  border-radius: 19px;
  padding: 0 4px;
}

[data-platform="app"] .app-device-controls label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  border-radius: 0;
  padding: 0 8px 0 10px;
  cursor: pointer;
  background: transparent;
  height: 100%;
  flex: 0 1 auto; 
  min-width: 0;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

[data-platform="app"] .app-device-controls label:hover select,
[data-platform="app"] .app-device-controls label:hover .material-symbols-rounded,
[data-platform="app"] .app-device-controls label:hover .device-control-label {
  color: var(--white-1000);
}

[data-platform="app"] .app-device-controls select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--white-300);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  padding: 0;
  width: auto;
}

[data-platform="app"] .app-device-controls select:focus-visible {
  outline: var(--border-weight-200) solid currentColor;
  outline-offset: var(--spacing-25);
}

[data-platform="app"] .app-device-controls .material-symbols-rounded {
  font-size: 16px;
  color: var(--white-300);
}

[data-platform="app"] .app-device-controls .mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  padding: 0 8px;
  cursor: pointer;
  background: transparent;
  color: var(--white-300);
  font-family: inherit;
  height: 100%;
}

[data-platform="app"] .app-device-controls .mode-toggle .material-symbols-rounded {
  font-size: 16px;
  color: inherit;
}

[data-platform="app"] .app-device-controls:hover {
  border-color: var(--white-200);
}

[data-platform="app"] .app-device-controls .mode-toggle:hover {
  color: var(--white-1000);
}

[data-platform="app"] .app-device-controls .mode-toggle + label::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--white-200);
}

[data-platform="app"] .app-device-controls label select {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; 
}
[data-platform="app"] .app-device-controls label .device-control-label {
  color: var(--white-300);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 500px) {
  [data-platform="app"] {
    --safe-area-top: 8px;
    --safe-area-bottom: 0px;
    background: none;
    display: block;
    padding: 0;
    overflow: visible;
  }

  [data-platform="app"] body {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    max-height: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  [data-platform="app"] .ios-content {
    position: static;
    overflow: visible;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
  }

  
  [data-platform="app"] .ios-status-bar {
    height: 8px;
    overflow: hidden;
  }
  [data-platform="app"] .ios-status-bar svg {
    display: none;
  }

  [data-platform="app"] .ios-home-indicator {
    display: none;
  }

  
  [data-platform="app"] .app-device-controls {
    all: unset;
    display: flex;
    position: fixed;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 0;
    height: 44px;
    border-radius: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-200);
    z-index: 999999;
    font-family: system-ui, -apple-system, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  [data-platform="app"] .app-device-controls.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  
  [data-platform="app"] .app-device-controls .mode-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 100%;
    cursor: pointer;
    color: var(--white-300);
  }
  [data-platform="app"] .app-device-controls .mode-toggle .material-symbols-rounded {
    font-size: 20px;
    color: inherit;
  }

  
  [data-platform="app"] .app-device-controls label {
    all: unset;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  [data-platform="app"] .app-device-controls label .device-control-label {
    color: var(--white-300);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
  }
  [data-platform="app"] .app-device-controls label .material-symbols-rounded {
    font-size: 18px;
    color: var(--white-300);
  }
  [data-platform="app"] .app-device-controls label select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  [data-platform="app"] .app-device-controls.is-open label select {
    pointer-events: auto;
  }

  
  [data-platform="app"] .app-device-controls .mode-toggle + label::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--white-200);
  }

  
  [data-platform="app"] .ios-chrome-top {
    position: sticky;
    top: 0;
    z-index: 100;
    pointer-events: none;
  }
  [data-platform="app"] .ios-chrome-top > * {
    pointer-events: auto;
  }

  [data-platform="app"] .ios-chrome-bottom {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 100;
    pointer-events: none;
  }
  [data-platform="app"] .ios-chrome-bottom > * {
    pointer-events: auto;
  }

  [data-platform="app"] .ios-scroll {
    position: static;
    overflow: visible;
    height: auto;
  }

  
  
  [data-platform="app"] .ios-scroll-inner {
    
    margin-top: 0 !important;
    
    padding-bottom: 0 !important;
  }

  
  [data-platform="app"] .ios-nav-page {
    top: 8px;
  }

  [data-platform="app"] .ios-nav-page::before,
  [data-platform="app"] .ios-nav-page::after {
    top: -8px;
  }
}

.template-fab {
  position: fixed;
  bottom: var(--spacing-300);
  inset-inline-end: var(--spacing-300);
  z-index: 99999;
}

.template-fab-trigger {
  width: 48px;   
  height: 48px;
  border-radius: 50%;
  border: var(--border-weight-100) solid var(--neutral-200);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.template-fab-trigger:hover {
  border-color: var(--neutral-300);
  color: var(--text-primary);
}

.template-fab-trigger:focus-visible {
  outline: var(--border-weight-200) solid var(--color-interactive);
  outline-offset: var(--spacing-25);
}

.template-fab-trigger .material-symbols-rounded {
  font-size: 22px;   
}

.template-fab-panel {
  display: none;
  flex-direction: column;
  gap: var(--spacing-100);
  position: absolute;
  bottom: var(--spacing-700);
  inset-inline-end: 0;
  min-width: 180px;
  padding: var(--spacing-150);
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-weight-100) solid var(--neutral-200);
  border-radius: var(--border-radius-200);
}

.template-fab.open .template-fab-panel {
  display: flex;
}

.template-fab-panel label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-100);
}

.template-fab-panel label > span {
  color: var(--text-secondary);
  white-space: nowrap;
}

.template-fab-panel select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-base);
  border: var(--border-weight-100) solid var(--neutral-200);
  border-radius: var(--border-radius-50);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 100px;
  padding: var(--spacing-50) var(--spacing-100);
}

.template-fab-panel select:hover {
  border-color: var(--neutral-300);
}

.template-fab-panel select:focus-visible {
  border-color: var(--color-interactive);
  outline: var(--border-weight-200) solid var(--color-interactive);
  outline-offset: var(--spacing-25);
}

.template-fab-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-100);
  margin-top: var(--spacing-50);
  padding-top: var(--spacing-75);
  border-top: var(--border-weight-100) solid var(--neutral-200);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.template-fab-link:hover {
  color: var(--text-primary);
}

.template-fab-link .material-symbols-rounded {
  font-size: 16px;   
}

.template-platform-link {
  position: fixed;
  bottom: var(--spacing-300);
  inset-inline-end: var(--spacing-300);
  display: flex;
  align-items: center;
  gap: var(--spacing-75);
  padding: var(--spacing-100) var(--spacing-200);
  background: var(--bg-surface);
  border: var(--border-weight-100) solid var(--neutral-200);
  border-radius: 100px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  z-index: 99999;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.template-platform-link:hover {
  color: var(--text-primary);
  border-color: var(--neutral-300);
}

.template-platform-link .material-symbols-rounded {
  font-size: 16px;   
}

@media (max-width: 500px) {
  .template-fab,
  .template-platform-link {
    display: none;
  }
}

}