
:root {
  --primary: #1A1A17;
  --secondary: #71717B;
  --base: #F5F5F5;
  --neutral: #0B0D0F;
  --white: #fff;
  --black: #000;

  --primary-l-1: color-mix(in oklab, var(--primary), white 9%);
  --primary-l-2: color-mix(in oklab, var(--primary), white 18%);
  --primary-l-3: color-mix(in oklab, var(--primary), white 27%);
  --primary-l-4: color-mix(in oklab, var(--primary), white 36%);
  --primary-l-5: color-mix(in oklab, var(--primary), white 45%);
  --primary-l-6: color-mix(in oklab, var(--primary), white 54%);
  --primary-l-7: color-mix(in oklab, var(--primary), white 63%);
  --primary-l-8: color-mix(in oklab, var(--primary), white 72%);
  --primary-l-9: color-mix(in oklab, var(--primary), white 81%);
  --primary-l-10: color-mix(in oklab, var(--primary), white 90%);
  --primary-d-1: color-mix(in oklab, var(--primary), black 16%);
  --primary-d-2: color-mix(in oklab, var(--primary), black 32%);
  --primary-d-3: color-mix(in oklab, var(--primary), black 48%);
  --primary-d-4: color-mix(in oklab, var(--primary), black 64%);
  --primary-d-5: color-mix(in oklab, var(--primary), black 80%);
  --secondary-l-1: color-mix(in oklab, var(--secondary), white 9%);
  --secondary-l-2: color-mix(in oklab, var(--secondary), white 18%);
  --secondary-l-3: color-mix(in oklab, var(--secondary), white 27%);
  --secondary-l-4: color-mix(in oklab, var(--secondary), white 36%);
  --secondary-l-5: color-mix(in oklab, var(--secondary), white 45%);
  --secondary-l-6: color-mix(in oklab, var(--secondary), white 54%);
  --secondary-l-7: color-mix(in oklab, var(--secondary), white 63%);
  --secondary-l-8: color-mix(in oklab, var(--secondary), white 72%);
  --secondary-l-9: color-mix(in oklab, var(--secondary), white 81%);
  --secondary-l-10: color-mix(in oklab, var(--secondary), white 90%);
  --base-d-1: color-mix(in oklab, var(--base), black 9%);
  --base-d-2: color-mix(in oklab, var(--base), black 18%);
  --base-d-3: color-mix(in oklab, var(--base), black 27%);
  --base-d-4: color-mix(in oklab, var(--base), black 36%);
  --base-d-5: color-mix(in oklab, var(--base), black 45%);
  --base-d-6: color-mix(in oklab, var(--base), black 54%);
  --base-d-7: color-mix(in oklab, var(--base), black 63%);
  --base-d-8: color-mix(in oklab, var(--base), black 72%);
  --base-d-9: color-mix(in oklab, var(--base), black 81%);
  --base-d-10: color-mix(in oklab, var(--base), black 90%);
  --neutral-l-1: color-mix(in oklab, var(--neutral), white 9%);
  --neutral-l-2: color-mix(in oklab, var(--neutral), white 18%);
  --neutral-l-3: color-mix(in oklab, var(--neutral), white 27%);
  --neutral-l-4: color-mix(in oklab, var(--neutral), white 36%);
  --neutral-l-5: color-mix(in oklab, var(--neutral), white 45%);
  --neutral-l-6: color-mix(in oklab, var(--neutral), white 54%);
  --neutral-l-7: color-mix(in oklab, var(--neutral), white 63%);
  --neutral-l-8: color-mix(in oklab, var(--neutral), white 72%);
  --neutral-l-9: color-mix(in oklab, var(--neutral), white 81%);
  --neutral-l-10: color-mix(in oklab, var(--neutral), white 90%);

  --light-1: var(--white);
  --light-2: var(--base);
  --light-3: var(--base-d-1);
  --dark-1: var(--neutral);
  --dark-2: var(--neutral-l-3);
  --dark-3: var(--neutral-l-5);
  --primary-hover: var(--primary-l-1);
  --secondary-hover: color-mix(in oklab, var(--secondary), black 16%);
  --accent: var(--secondary);
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --success-text: color-mix(in oklab, var(--success), black 32%);
  --warning-text: color-mix(in oklab, var(--warning), black 32%);
  --danger-text: color-mix(in oklab, var(--danger), black 16%);
  --focus-ring: color-mix(in srgb, var(--primary) 40%, transparent);
  --bg-none: transparent;

  --surface: var(--light-1);
  --surface-raised: var(--white);   
  --heading-color: var(--dark-1);
  --body-color: var(--dark-2);
  --muted-color: var(--dark-3);
  --border-color: var(--light-3);
  --link-color: var(--dark-1);
  --link-hover-color: var(--primary);

  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --title-1: clamp(3rem, 2.6087rem + 1.7391vw, 4rem);         
  --title-2: clamp(2.4rem, 2.1652rem + 1.0435vw, 3rem);       
  --title-3: clamp(2.1rem, 1.9435rem + 0.6957vw, 2.5rem);     
  --title-4: clamp(1.8rem, 1.7217rem + 0.3478vw, 2rem);       
  --title-5: clamp(1.6rem, 1.5413rem + 0.2609vw, 1.75rem);    
  --title-6: clamp(1.4rem, 1.3609rem + 0.1739vw, 1.5rem);     
  --title-7: clamp(1.2rem, 1.1804rem + 0.0870vw, 1.25rem);    
  --title-1-weight: 700;
  --title-2-weight: 700;
  --title-3-weight: 700;
  --title-4-weight: 600;
  --title-5-weight: 600;
  --title-6-weight: 500;
  --title-7-weight: 500;
  --h1: var(--title-1);
  --h2: var(--title-2);
  --h3: var(--title-3);
  --h4: var(--title-4);
  --h5: var(--title-5);
  --h6: var(--title-6);
  --heading-line-height: 1.2;
  --body-line-height: 1.5;
  --tracking-tight: -0.01em;
  --measure: 65ch;

  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);      
  --text-xl: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);  

  --space-none: 0;
  --space-xs: clamp(0.84rem, 0.8204rem + 0.0870vw, 0.89rem);  
  --space-s: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);       
  --space-m: clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);       
  --space-l: clamp(2rem, 1.6087rem + 1.7391vw, 3rem);         
  --space-xl: clamp(2.67rem, 1.9539rem + 3.1826vw, 4.5rem);   
  --space-2xl: clamp(3.55rem, 2.2978rem + 5.5652vw, 6.75rem); 
  --section-space-xs: clamp(1.5rem, 1.1087rem + 1.7391vw, 2.5rem); 
  --section-space-s: clamp(2.5rem, 2.1087rem + 1.7391vw, 3.5rem);  
  --section-space-m: clamp(4rem, 3.6087rem + 1.7391vw, 5rem);      
  --section-space-l: clamp(7rem, 6.6087rem + 1.7391vw, 8rem);      
  --gutter: clamp(1rem, -0.5652rem + 6.9565vw, 5rem);              
  --content-gap: var(--space-m);
  --grid-gap: var(--space-xl);
  --container-gap: var(--space-xl);

  --content-width: 80rem;
  --content-width-narrow: 62.5rem;
  --content-width-prose: 45rem;
  --w-fit: fit-content;
  --w-min: min-content;
  --w-max: max-content;
  --w-full: 100%;
  --width-10: calc(var(--content-width) * 0.1);
  --width-20: calc(var(--content-width) * 0.2);
  --width-30: calc(var(--content-width) * 0.3);
  --width-40: calc(var(--content-width) * 0.4);
  --width-50: calc(var(--content-width) * 0.5);
  --width-60: calc(var(--content-width) * 0.6);
  --width-70: calc(var(--content-width) * 0.7);
  --width-80: calc(var(--content-width) * 0.8);
  --width-90: calc(var(--content-width) * 0.9);
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 2rem;
  --radius-xl: 4rem;
  --radius-full: 999rem;
  --border-width: 1px;
  --border-style: solid;

  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-m: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-l: 0 12px 32px rgb(0 0 0 / 0.12);
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --transition: 0.3s;
  --transition-fast: 0.15s ease;

  --touch-target: 2.75rem;
  --focus-width: 2px;
  --focus-offset: 2px;
  --logo-height: 2.5rem;
  --header-height: 4.5rem;
  --avatar-size: 4rem;
  --btn-pad-y: 0.75rem;
  --btn-pad-x: 1.5rem;
  --btn-scale-s: 0.667;
  --btn-scale-l: 1.333;
  --btn-line-height: 1.4;
  --field-pad: 0.75rem;
  --label-gap: 0.5rem;
  --underline-offset: 0.15em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --disabled-opacity: 0.5;

  --btn-primary-label: var(--primary-l-10);
  --btn-outline-color: var(--primary);
  --focus-color: var(--primary);
  --field-border-color: var(--neutral-l-6);
  --tagline-bg: var(--primary-l-10);
  --tagline-color: var(--primary);
}

@media (max-width: 767px) {
  :root { --logo-height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0.01s; --transition-fast: 0.01s; }
  * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background: var(--surface);
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: var(--heading-line-height);
  color: var(--heading-color);
  text-wrap: balance;
}
h1 { font-size: var(--h1); font-weight: var(--title-1-weight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--h2); font-weight: var(--title-2-weight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--h3); font-weight: var(--title-3-weight); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--h4); font-weight: var(--title-4-weight); }
h5 { font-size: var(--h5); font-weight: var(--title-5-weight); }
h6 { font-size: var(--h6); font-weight: var(--title-6-weight); }

p, ul, ol, blockquote, figure { margin: 0; }
:where(p, ul, ol, blockquote, figure, h1, h2, h3, h4, h5, h6):last-child { margin-block-end: 0; }

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

a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  transition: color var(--transition);
}
a:hover { color: var(--link-hover-color); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: var(--space-s);
  z-index: var(--z-modal);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--surface);
  color: var(--heading-color);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.section {
  padding: var(--section-space-m) var(--gutter);
  background: var(--surface);
  color: var(--body-color);
}
.section--xs { padding-block: var(--section-space-xs); }
.section--s { padding-block: var(--section-space-s); }
.section--l { padding-block: var(--section-space-l); }
.section__inner {
  width: var(--w-full);
  max-width: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}
.section__inner--narrow { max-width: var(--content-width-narrow); }
.section__inner--prose { max-width: var(--content-width-prose); }

.is-dark {
  --surface: var(--dark-1);
  --heading-color: var(--light-1);
  --body-color: var(--light-2);
  --muted-color: var(--neutral-l-7);
  --border-color: var(--dark-3);
  --link-color: var(--light-1);
  --link-hover-color: var(--primary-l-8);
  --focus-color: var(--light-1);
  --btn-outline-color: var(--light-1);
  --success-text: color-mix(in oklab, var(--success), white 30%);
  --warning-text: color-mix(in oklab, var(--warning), white 30%);
  --danger-text: color-mix(in oklab, var(--danger), white 45%);
  background: var(--surface);
  color: var(--body-color);
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--label-gap);
  min-height: var(--touch-target);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  line-height: var(--btn-line-height);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: var(--btn-primary-label);
  background: var(--primary);
  border: var(--border-width) var(--border-style) var(--primary);
  border-radius: var(--radius-s);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--btn-primary-label); }
.btn--s { padding: calc(var(--btn-pad-y) * var(--btn-scale-s)) calc(var(--btn-pad-x) * var(--btn-scale-s)); font-size: var(--text-s); }
.btn--l { padding: calc(var(--btn-pad-y) * var(--btn-scale-l)) calc(var(--btn-pad-x) * var(--btn-scale-l)); font-size: var(--text-l); }
.btn--secondary { background: var(--secondary); border-color: var(--secondary); color: var(--white); }
.btn--secondary:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--white); }
.btn--outline { background: var(--bg-none); border-color: var(--btn-outline-color); color: var(--btn-outline-color); }
.btn--outline:hover { background: var(--primary); border-color: var(--primary); color: var(--btn-primary-label); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--light:hover { background: var(--bg-none); color: var(--white); }
.btn--dark { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--neutral-l-2); border-color: var(--neutral-l-2); color: var(--white); }
.btn--link {
  min-height: 0;
  padding: 0;
  background: var(--bg-none);
  border-color: var(--bg-none);
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}
.btn--link:hover { background: var(--bg-none); border-color: var(--bg-none); color: var(--link-hover-color); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; }
.btn__icon { width: 1em; height: 1em; flex-shrink: 0; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.form-field { display: flex; flex-direction: column; }
.form-field__label {
  margin-block-end: var(--label-gap);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  line-height: var(--btn-line-height);
  color: var(--heading-color);
}
.form-field__input {
  width: var(--w-full);
  min-height: var(--touch-target);
  padding: var(--field-pad);
  font: inherit;
  color: var(--dark-1);
  background: var(--surface-raised);
  border: var(--border-width) var(--border-style) var(--field-border-color);
  border-radius: var(--radius-s);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__input::placeholder { color: var(--neutral-l-5); }
.form-field__input:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--border-width)) var(--focus-ring);
}
.form-field__help, .form-field__message { margin-block-start: var(--label-gap); font-size: var(--text-s); color: var(--muted-color); }
.form-field--error .form-field__input { border-color: var(--danger-text); }
.form-field--error .form-field__message { color: var(--danger-text); }
.form-field--success .form-field__input { border-color: var(--success-text); }
.form-field--success .form-field__message { color: var(--success-text); }
.form-field--disabled { opacity: var(--disabled-opacity); }
.form-field--disabled .form-field__input { cursor: not-allowed; }

.card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--content-gap) * 0.75);
  padding: var(--space-m);
  background: var(--surface-raised);
  color: var(--dark-2);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--radius-s);
}
.card__media { border-radius: var(--radius-s); overflow: hidden; }
.card__body { display: flex; flex-direction: column; gap: var(--space-xs); }
.card__title { font-size: var(--title-6); font-weight: var(--title-6-weight); color: var(--dark-1); }
.card__text { font-size: var(--text-m); }
.card__footer { margin-block-start: auto; }
.card--raised { border-color: var(--bg-none); box-shadow: var(--shadow-m); }
.card--flat { border-color: var(--bg-none); padding: 0; background: var(--bg-none); }
.card--link { position: relative; transition: box-shadow var(--transition); }
.card--link:hover { box-shadow: var(--shadow-m); }
.card--link:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.card--link .card__title a { text-decoration: none; color: inherit; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; }
.card--link .card__title a:focus-visible { outline: none; }

.tagline {
  width: var(--w-fit);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  line-height: var(--btn-line-height);
}
.tagline--pill {
  padding: calc(var(--space-m) / 6) calc(var(--space-m) / 2);
  background: var(--tagline-bg);
  color: var(--tagline-color);
  border-radius: var(--radius-full);
}
.tagline--plain { color: var(--muted-color); }

.prose { max-width: var(--content-width-prose); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose > :where(h2, h3, h4) { margin-block-start: var(--content-gap); }
.prose h2 { font-size: var(--title-4); font-weight: var(--title-4-weight); letter-spacing: 0; }
.prose h3 { font-size: var(--title-5); font-weight: var(--title-5-weight); letter-spacing: 0; }
.prose h4 { font-size: var(--title-6); font-weight: var(--title-6-weight); }
.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-inline-start: calc(var(--space-m) * 0.75); }
.prose li + li { margin-block-start: var(--space-xs); }
.prose blockquote {
  padding: var(--content-gap);
  border-inline-start: calc(var(--border-width) * 3) var(--border-style) var(--primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--heading-color);
}
.prose figure { margin-block: var(--space-m); }
.prose figcaption { margin-block-start: var(--label-gap); font-size: var(--text-s); color: var(--muted-color); }
.prose hr { border: 0; border-block-start: var(--border-width) var(--border-style) var(--border-color); margin-block: var(--content-gap); }
.prose code { padding: 0 var(--radius-xs); font-size: var(--text-s); background: var(--light-2); border-radius: var(--radius-xs); }

.site-header { padding: var(--space-s) var(--gutter); background: var(--surface); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  max-width: var(--content-width);
  margin-inline: auto;
  min-height: calc(var(--header-height) - (var(--space-s) * 2));
}
.site-header__logo img, .site-header__logo svg { height: var(--logo-height); width: auto; max-width: var(--w-full); object-fit: contain; object-position: left center; }   
.site-header__logo { min-width: 0; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-s); }
.site-header__toggle {
  display: none;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  background: var(--bg-none);
  border: 0;
  color: var(--heading-color);
  cursor: pointer;
}
.site-header--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.site-header--sticky.site-header--scrolled { box-shadow: var(--shadow-s); }
.site-header--overlay { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: var(--z-sticky); background: var(--bg-none); }

.nav__list { display: flex; align-items: center; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--heading-color);
  text-decoration: none;
}
.nav__link:hover, .nav__link--current, .nav__link[aria-current="page"] { color: var(--link-hover-color); }
.nav__submenu {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  min-width: max-content;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--surface-raised);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
}
.nav__submenu .nav__link { color: var(--dark-1); }
.nav__item--open > .nav__submenu { display: block; }

@media (max-width: 991px) {
  .site-header__toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: var(--z-modal); }
  .site-header__logo { position: relative; z-index: var(--z-modal); }
  .site-header__nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    padding: var(--header-height) var(--gutter) var(--space-l);
    background: var(--surface);
    overflow-y: auto;
  }
  .site-header__nav--open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__submenu { position: static; box-shadow: none; padding-inline-start: var(--space-s); background: var(--bg-none); }
  .nav__submenu .nav__link { color: var(--heading-color); }
}

.site-footer { padding: var(--section-space-s) var(--gutter); background: var(--surface); color: var(--body-color); }
.site-footer__inner {
  display: grid;
  grid-template-columns: var(--grid-4);
  gap: var(--grid-gap);
  max-width: var(--content-width);
  margin-inline: auto;
}
.site-footer__brand, .site-footer__nav { display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer__legal {
  grid-column: 1 / -1;
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) var(--border-style) var(--border-color);
  font-size: var(--text-s);
}
@media (max-width: 991px) { .site-footer__inner { grid-template-columns: var(--grid-2); } }
@media (max-width: 478px) { .site-footer__inner { grid-template-columns: var(--grid-1); } }

.table-wrap { overflow-x: auto; }
.table { width: var(--w-full); border-collapse: collapse; font-size: var(--text-m); }
.table__cell {
  padding: var(--space-xs) var(--space-s);
  text-align: start;
  border-block-end: var(--border-width) var(--border-style) var(--border-color);
}
.table__head .table__cell { font-weight: var(--weight-semibold); color: var(--heading-color); background: var(--light-2); }
.is-dark .table__head .table__cell { background: var(--dark-2); }
.table--striped .table__row:nth-child(even) { background: var(--light-2); }
.is-dark .table--striped .table__row:nth-child(even) { background: var(--dark-2); }
.table--compact .table__cell { padding: calc(var(--space-xs) / 2) var(--space-xs); font-size: var(--text-s); }

.accordion__item { border-block-end: var(--border-width) var(--border-style) var(--border-color); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: var(--w-full);
  min-height: var(--touch-target);
  padding: var(--space-s) 0;
  font-family: var(--font-heading);
  font-size: var(--title-7);
  font-weight: var(--title-7-weight);
  line-height: var(--heading-line-height);
  text-align: start;
  color: var(--heading-color);
  background: var(--bg-none);
  border: 0;
  cursor: pointer;
  list-style: none;
}
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__icon { flex-shrink: 0; width: 1em; height: 1em; transition: transform var(--transition); }
.accordion__item--open .accordion__icon, .accordion__item[open] .accordion__icon { transform: rotate(180deg); }
.accordion__panel { padding-block-end: var(--space-s); color: var(--body-color); }

.media { overflow: hidden; border-radius: var(--radius-s); }
.media > img, .media > video { width: var(--w-full); height: 100%; object-fit: cover; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--avatar { width: var(--avatar-size); aspect-ratio: 1 / 1; border-radius: var(--radius-full); }

.pad-s { padding: var(--space-s); }
.pad-m { padding: var(--space-m); }
.pad-l { padding: var(--space-l); }
.pad-tb-xs { padding-block: var(--section-space-xs); }
.pad-t-xs { padding-block-start: var(--section-space-xs); }
.pad-b-xs { padding-block-end: var(--section-space-xs); }
.pad-tb-s { padding-block: var(--section-space-s); }
.pad-t-s { padding-block-start: var(--section-space-s); }
.pad-b-s { padding-block-end: var(--section-space-s); }
.pad-tb-m { padding-block: var(--section-space-m); }
.pad-t-m { padding-block-start: var(--section-space-m); }
.pad-b-m { padding-block-end: var(--section-space-m); }
.pad-tb-l { padding-block: var(--section-space-l); }
.pad-t-l { padding-block-start: var(--section-space-l); }
.pad-b-l { padding-block-end: var(--section-space-l); }
.title-1 { font-size: var(--title-1); font-weight: var(--title-1-weight); line-height: var(--heading-line-height); }
.title-2 { font-size: var(--title-2); font-weight: var(--title-2-weight); line-height: var(--heading-line-height); }
.title-3 { font-size: var(--title-3); font-weight: var(--title-3-weight); line-height: var(--heading-line-height); }
.title-4 { font-size: var(--title-4); font-weight: var(--title-4-weight); line-height: var(--heading-line-height); }
.title-5 { font-size: var(--title-5); font-weight: var(--title-5-weight); line-height: var(--heading-line-height); }
.title-6 { font-size: var(--title-6); font-weight: var(--title-6-weight); line-height: var(--heading-line-height); }
.title-7 { font-size: var(--title-7); font-weight: var(--title-7-weight); line-height: var(--heading-line-height); }
.title-1, .title-2, .title-3 { letter-spacing: var(--tracking-tight); }
.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-m { font-size: var(--text-m); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }

@media (max-width: 767px) {
  :is(h1, h2, h3, h4, h5, h6, p, .tagline):not(.keep-align *) { text-align: start; }
  .btn:not(.btn--link):not(.keep-align *) { width: var(--w-full); white-space: normal; }
  .btn-group:not(.keep-align *) { flex-direction: column; align-items: stretch; }
  .site-header .btn { width: auto; white-space: nowrap; }
}
