[x-cloak] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: var(--color-text); background-color: var(--color-background); min-height: 100vh; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--spacing-sm)); }
.col { flex: 1; padding: 0 var(--spacing-sm); }
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%;  padding: 0 var(--spacing-sm); }
.col-2  { flex: 0 0 16.667%; max-width: 16.667%; padding: 0 var(--spacing-sm); }
.col-3  { flex: 0 0 25%;     max-width: 25%;     padding: 0 var(--spacing-sm); }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 var(--spacing-sm); }
.col-5  { flex: 0 0 41.667%; max-width: 41.667%; padding: 0 var(--spacing-sm); }
.col-6  { flex: 0 0 50%;     max-width: 50%;     padding: 0 var(--spacing-sm); }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; padding: 0 var(--spacing-sm); }
.col-8  { flex: 0 0 66.667%; max-width: 66.667%; padding: 0 var(--spacing-sm); }
.col-9  { flex: 0 0 75%;     max-width: 75%;     padding: 0 var(--spacing-sm); }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; padding: 0 var(--spacing-sm); }
.col-11 { flex: 0 0 91.667%; max-width: 91.667%; padding: 0 var(--spacing-sm); }
.col-12 { flex: 0 0 100%;    max-width: 100%;    padding: 0 var(--spacing-sm); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.p-sm  { padding: var(--spacing-sm); }
.p-md  { padding: var(--spacing-md); }
.p-lg  { padding: var(--spacing-lg); }
.hidden { display: none; }