:root {
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1920,16,1.163,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Typefaces */
  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-heading: Inter, Georgia, "Times New Roman", Times, serif;
  --bw-font-body: Inter;
  --bw-font-head: Inter;
  /* Responsive Clamp Sizes: 320px - 1920px */
  /* --base-xxs: clamp(0.6356rem, 0.7159rem + -0.0669vw, 0.7025rem);
  --base-xs: clamp(0.7394rem, 0.8001rem + -0.0506vw, 0.79rem);
  --base-sm: clamp(0.86rem, 0.8945rem + -0.0287vw, 0.8888rem); */
  --base-xxs: clamp(0.6356rem, 0.6223rem + 0.0669vw, 0.7025rem);
  --base-xs: clamp(0.7394rem, 0.7293rem + 0.0506vw, 0.79rem);
  --base-sm: clamp(0.86rem, 0.8543rem + 0.0288vw, 0.8888rem);
  --base-md: clamp(1rem, 1rem + 0vw, 1rem);
  --base-lg: clamp(1.125rem, 1.1174rem + 0.0381vw, 1.1631rem);
  --heading-6: clamp(1.2656rem, 1.2483rem + 0.0869vw, 1.3525rem);
  --heading-5: clamp(1.4238rem, 1.3939rem + 0.1494vw, 1.5731rem);
  --heading-4: clamp(1.6019rem, 1.5564rem + 0.2275vw, 1.8294rem);
  --heading-3: clamp(1.8019rem, 1.7368rem + 0.3256vw, 2.1275rem);
  --heading-2: clamp(2.0275rem, 1.9381rem + 0.4469vw, 2.4744rem);
  --heading-1: clamp(2.2806rem, 2.1613rem + 0.5969vw, 2.8775rem);
  --display-3: clamp(2.5656rem, 2.4094rem + 0.7813vw, 3.3469rem);
  --display-2: clamp(2.8863rem, 2.685rem + 1.0063vw, 3.8925rem);
  --display-1: clamp(3.2475rem, 2.9916rem + 1.2794vw, 4.5269rem);
  /* Gray */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  /* Blue Gray */
  --blue-gray-50: #eceff1;
  --blue-gray-100: #cfd8dc;
  --blue-gray-200: #b0bec5;
  --blue-gray-300: #90a4ae;
  --blue-gray-400: #78909c;
  --blue-gray-500: #607d8b;
  --blue-gray-600: #546e7a;
  --blue-gray-700: #455a64;
  --blue-gray-800: #37474f;
  --blue-gray-900: #263238;
  /* Red */
  --red-50: #ffebee;
  --red-100: #ffcdd2;
  --red-200: #ef9a9a;
  --red-300: #e57373;
  --red-400: #ef5350;
  --red-500: #f44336;
  --red-600: #e53935;
  --red-700: #d32f2f;
  --red-800: #c62828;
  --red-900: #b71c1c;
  /* Pink */
  --pink-50: #fce4ec;
  --pink-100: #f8bbd0;
  --pink-200: #f48fb1;
  --pink-300: #f06292;
  --pink-400: #ec407a;
  --pink-500: #e91e63;
  --pink-600: #d81b60;
  --pink-700: #c2185b;
  --pink-800: #ad1457;
  --pink-900: #880e4f;
  /* Purple */
  --purple-50: #f3e5f5;
  --purple-100: #e1bee7;
  --purple-200: #ce93d8;
  --purple-300: #ba68c8;
  --purple-400: #ab47bc;
  --purple-500: #9c27b0;
  --purple-600: #8e24aa;
  --purple-700: #7b1fa2;
  --purple-800: #6a1b9a;
  --purple-900: #4a148c;
  /* Deep Purple */
  --deep-purple-50: #ede7f6;
  --deep-purple-100: #d1c4e9;
  --deep-purple-200: #b39ddb;
  --deep-purple-300: #9575cd;
  --deep-purple-400: #7e57c2;
  --deep-purple-500: #673ab7;
  --deep-purple-600: #5e35b1;
  --deep-purple-700: #512da8;
  --deep-purple-800: #4527a0;
  --deep-purple-900: #311b92;
  /* Indigo */
  --indigo-50: #e8eaf6;
  --indigo-100: #c5cae9;
  --indigo-200: #9fa8da;
  --indigo-300: #7986cb;
  --indigo-400: #5c6bc0;
  --indigo-500: #3f51b5;
  --indigo-600: #3949ab;
  --indigo-700: #303f9f;
  --indigo-800: #283593;
  --indigo-900: #1a237e;
  /* Blue */
  --blue-50: #e3f2fd;
  --blue-100: #bbdefb;
  --blue-200: #90caf9;
  --blue-300: #64b5f6;
  --blue-400: #42a5f5;
  --blue-500: #2196f3;
  --blue-600: #1e88e5;
  --blue-700: #1976d2;
  --blue-800: #1565c0;
  --blue-900: #0d47a1;
  /* Light Blue */
  --light-blue-50: #e1f5fe;
  --light-blue-100: #b3e5fc;
  --light-blue-200: #81d4fa;
  --light-blue-300: #4fc3f7;
  --light-blue-400: #29b6f6;
  --light-blue-500: #03a9f4;
  --light-blue-600: #039be5;
  --light-blue-700: #0288d1;
  --light-blue-800: #0277bd;
  --light-blue-900: #01579b;
  /* Cyan */
  --cyan-50: #e0f7fa;
  --cyan-100: #b2ebf2;
  --cyan-200: #80deea;
  --cyan-300: #4dd0e1;
  --cyan-400: #26c6da;
  --cyan-500: #00bcd4;
  --cyan-600: #00acc1;
  --cyan-700: #0097a7;
  --cyan-800: #00838f;
  --cyan-900: #006064;
  /* Teal */
  --teal-50: #e0f2f1;
  --teal-100: #b2dfdb;
  --teal-200: #80cbc4;
  --teal-300: #4db6ac;
  --teal-400: #26a69a;
  --teal-500: #009688;
  --teal-600: #00897b;
  --teal-700: #00796b;
  --teal-800: #00695c;
  --teal-900: #004d40;
  /* Green */
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-300: #81c784;
  --green-400: #66bb6a;
  --green-500: #4caf50;
  --green-600: #43a047;
  --green-700: #388e3c;
  --green-800: #2e7d32;
  --green-900: #1b5e20;
  /* Light Green */
  --light-green-50: #f1f8e9;
  --light-green-100: #dcedc8;
  --light-green-200: #c5e1a5;
  --light-green-300: #aed581;
  --light-green-400: #9ccc65;
  --light-green-500: #8bc34a;
  --light-green-600: #7cb342;
  --light-green-700: #689f38;
  --light-green-800: #558b2f;
  --light-green-900: #33691e;
  /* Lime */
  --lime-50: #f9fbe7;
  --lime-100: #f0f4c3;
  --lime-200: #e6ee9c;
  --lime-300: #dce775;
  --lime-400: #d4e157;
  --lime-500: #cddc39;
  --lime-600: #c0ca33;
  --lime-700: #afb42b;
  --lime-800: #9e9d24;
  --lime-900: #827717;
  /* Yellow */
  --yellow-50: #fffde7;
  --yellow-100: #fff9c4;
  --yellow-200: #fff59d;
  --yellow-300: #fff176;
  --yellow-400: #ffee58;
  --yellow-500: #ffeb3b;
  --yellow-600: #fdd835;
  --yellow-700: #fbc02d;
  --yellow-800: #f9a825;
  --yellow-900: #f57f17;
  /* Amber */
  --amber-50: #fff8e1;
  --amber-100: #ffecb3;
  --amber-200: #ffe082;
  --amber-300: #ffd54f;
  --amber-400: #ffca28;
  --amber-500: #ffc107;
  --amber-600: #ffb300;
  --amber-700: #ffa000;
  --amber-800: #ff8f00;
  --amber-900: #ff6f00;
  /* Orange */
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-200: #ffcc80;
  --orange-300: #ffb74d;
  --orange-400: #ffa726;
  --orange-500: #ff9800;
  --orange-600: #fb8c00;
  --orange-700: #f57c00;
  --orange-800: #ef6c00;
  --orange-900: #e65100;
  /* Deep Orange */
  --deep-orange-50: #fbe9e7;
  --deep-orange-100: #ffccbc;
  --deep-orange-200: #ffab91;
  --deep-orange-300: #ff8a65;
  --deep-orange-400: #ff7043;
  --deep-orange-500: #ff5722;
  --deep-orange-600: #f4511e;
  --deep-orange-700: #e64a19;
  --deep-orange-800: #d84315;
  --deep-orange-900: #bf360c;
  /* Brown */
  --brown-50: #efebe9;
  --brown-100: #d7ccc8;
  --brown-200: #bcaaa4;
  --brown-300: #a1887f;
  --brown-400: #8d6e63;
  --brown-500: #795548;
  --brown-600: #6d4c41;
  --brown-700: #5d4037;
  --brown-800: #4e342e;
  --brown-900: #3e2723;
  /* System */
  --info: #17a2b8;
  --error: #d43535;
  --warning: #ffc107;
  --success: #2e8a3d;
  /* Dark */
  --dark-primary-text: rgba(0, 0, 0, 0.87);
  --dark-medhigh-text: rgba(0, 0, 0, 0.74);
  --dark-secondary-text: rgba(0, 0, 0, 0.65);
  --dark-disabled-text: rgba(0, 0, 0, 0.38);
  --dark-dividers: rgba(0, 0, 0, 0.12);
  --dark-focused: rgba(0, 0, 0, 0.12);
  --dark-hover: rgba(0, 0, 0, 0.04);
  --dark-surface: #f1f4f5;
  /* Light */
  --light-primary-text: rgba(255, 255, 255, 1);
  --light-secondary-text: rgba(255, 255, 255, 0.7);
  --light-disabled-text: rgba(255, 255, 255, 0.5);
  --light-dividers: rgba(255, 255, 255, 0.12);
  --light-focused: rgba(255, 255, 255, 0.12);
  --light-hover: rgba(255, 255, 255, 0.04);
  --light-surface: white;
  /* Box Shadows */
  --elevation-0dp: 0 0px 0px -1px rgba(0, 0, 0, 0.2), 0 0.5px 1px 0 rgba(0, 0, 0, 0.14), 0 0.5px 1px 0 rgba(0, 0, 0, 0.12);
  --elevation-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  --elevation-2dp: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --elevation-3dp: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  --elevation-4dp: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --elevation-5dp: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
  --elevation-6dp: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  --elevation-7dp: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 16px 1px rgba(0, 0, 0, 0.12);
  --elevation-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  --elevation-9dp: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12);
  --elevation-10dp: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 4px 18px 3px rgba(0, 0, 0, 0.12);
  --elevation-11p: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14), 0 4px 20px 3px rgba(0, 0, 0, 0.12);
  --elevation-12dp: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
  --elevation-13dp: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
  --elevation-14dp: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  --elevation-15dp: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14), 0 6px 28px 5px rgba(0, 0, 0, 0.12);
  --elevation-16dp: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  --elevation-17dp: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14), 0 6px 32px 5px rgba(0, 0, 0, 0.12);
  --elevation-18dp: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14), 0 7px 34px 6px rgba(0, 0, 0, 0.12);
  --elevation-19dp: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14), 0 7px 36px 6px rgba(0, 0, 0, 0.12);
  --elevation-20dp: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14), 0 8px 38px 7px rgba(0, 0, 0, 0.12);
  --elevation-21dp: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14), 0 8px 40px 7px rgba(0, 0, 0, 0.12);
  --elevation-22dp: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14), 0 8px 42px 7px rgba(0, 0, 0, 0.12);
  --elevation-23dp: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14), 0 9px 44px 8px rgba(0, 0, 0, 0.12);
  --elevation-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  /* Easing */
  --standard-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --decelerate-easing: cubic-bezier(0, 0, 0.2, 1);
  --accelerate-easing: cubic-bezier(0.4, 0, 1, 1);
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  /* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1920,16,1.163,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Space */
  --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  --space-2xs: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
  --space-xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  --space-s: clamp(1rem, 1rem + 0vw, 1rem);
  --space-m: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
  --space-l: clamp(2rem, 2rem + 0vw, 2rem);
  --space-xl: clamp(3rem, 3rem + 0vw, 3rem);
  --space-2xl: clamp(4rem, 4rem + 0vw, 4rem);
  --space-3xl: clamp(6rem, 6rem + 0vw, 6rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-2xs-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-xs-s: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-s-m: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-m-l: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  --space-l-xl: clamp(2rem, 1.8rem + 1vw, 3rem);
  --space-xl-2xl: clamp(3rem, 2.8rem + 1vw, 4rem);
  --space-2xl-3xl: clamp(4rem, 3.6rem + 2vw, 6rem);
  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.8rem + 1vw, 2rem);
  /* Grid */
  /* @link https://utopia.fyi/grid/calculator?c=320,16,1.125,1920,16,1.163,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,2xl,2xl,12 */
  --grid-max-width: 100rem;
  --grid-gutter: var(--space-s-2xl, clamp(1rem, 0.25rem + 3.75vw, 4rem));
  --grid-columns: 12;
  /* Fluid Values */
  /* @link https://utopia.fyi/clamp/calculator?a=320,1920,24—28|28—32|32—36|36—40|40—48|44—56|48—64|56—72|64—88 */
  --fluid-24-28: clamp(1.5rem, 1.45rem + 0.25vw, 1.75rem);
  --fluid-28-32: clamp(1.75rem, 1.7rem + 0.25vw, 2rem);
  --fluid-32-36: clamp(2rem, 1.95rem + 0.25vw, 2.25rem);
  --fluid-36-40: clamp(2.25rem, 2.2rem + 0.25vw, 2.5rem);
  --fluid-40-48: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
  --fluid-44-56: clamp(2.75rem, 2.6rem + 0.75vw, 3.5rem);
  --fluid-48-64: clamp(3rem, 2.8rem + 1vw, 4rem);
  --fluid-56-72: clamp(3.5rem, 3.3rem + 1vw, 4.5rem);
  --fluid-64-88: clamp(4rem, 3.7rem + 1.5vw, 5.5rem);
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

body {
  margin: 0;
  line-height: 1.25rem;
}

:not(:defined) {
  transform: translate(0, 16px);
  opacity: 0;
}

.container {
  display: flex;
  flex-direction: column;
  /* gap: clamp(24px, 5dvh, 80px); */
  gap: 120px;
  padding: clamp(16px, 2dvw, 64px);
}

.overline-container {
  display: flex;
  flex-direction: row;
  gap: 80px;
}

.button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bw-font-head), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-transform: capitalize;
  font-style: normal;
}

h1 {
  font-size: 80px;
  line-height: 88px; /* 110% */
}

h2 {
  font-size: 48px;
  line-height: 56px; /* 125% */
}

h3 {
  font-size: 40px;
  line-height: 48px; /* 133.333% */
}

h4 {
  font-size: 24px;
  line-height: 28px; /* 130% */
}

h5 {
  font-size: 22px;
  line-height: 28px; /* 133.333% */
}

h6 {
  font-size: 17px;
  line-height: 24px; /* 141.176% */
}

.fh1 {
  font-size: var(--heading-1);
  line-height: var(--fluid-44-56);
}

.fh2 {
  font-size: var(--heading-2);
  line-height: var(--fluid-36-40);
}

.fh3 {
  font-size: var(--heading-3);
  line-height: var(--fluid-32-36);
}

.fh4 {
  font-size: var(--heading-4);
  line-height: var(--fluid-44-56);
}

.fh5 {
  font-size: var(--heading-5);
  line-height: var(--fluid-28-32);
}

.fh6 {
  font-size: var(--heading-6);
  line-height: var(--fluid-24-28);
}