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

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

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

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

:root {
  --color-background: #ffffff;
  --color-background-page: #faf9f6;
  --color-background-footer: #f4eee4;
  --color-foreground: #1a1714;
  --color-foreground-muted: #6f6a61;
  --color-foreground-quiet: #a09a8f;
  --color-border: rgb(26 23 20 / 8%);
  --color-border-strong: rgb(26 23 20 / 15%);
  --color-border-brand: #2b5c8a;
  --color-action: #25517a;
  --color-action-hover: #1d4060;
  --color-action-label: #ffffff;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-product:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-body-large: 16px;
  --font-size-heading-feature: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-root: 1.5;
  --line-height-caption: 18px;
  --line-height-body: 20px;
  --line-height-body-large: 24px;
  --line-height-heading-feature: 28px;
  --tracking-product: -0.2px;
  --tracking-button-small: -0.24px;
  --border-width-hairline: 1px;
  --outline-width-focus: 2px;
  --outline-offset-focus: 3px;
  --radius-panel: 10px;
  --radius-control: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-control-gap: 6px;
  --space-footer-top: 28px;
  --space-section-compact: 40px;
  --space-main-top: 56px;
  --size-body-min: 320px;
  --size-page-min-desktop: 925px;
  --size-header-min: 64px;
  --size-brand-mark: 40px;
  --size-control-small: 32px;
  --size-header-action-min: 128px;
  --size-main-max: 1181px;
  --size-faq-max: 900px;
  --size-footer-min: 198px;
  --size-footer-content-max: 1010px;
  --offset-skip-link-hidden: -80px;
  --layer-skip-link: 100;
  --motion-duration-fast: 120ms;
  --motion-duration-reduced: 0.01ms;
  --motion-easing-standard: ease;
  --breakpoint-compact-max: 760px;
  --breakpoint-tablet-min: 761px;
  --breakpoint-tablet-max: 900px;
  color-scheme: light;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-background-page);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-root);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

body {
  min-width: var(--size-body-min);
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
p,
dl,
dd {
  margin: 0;
}

img {
  display: block;
}

.skip-link {
  position: fixed;
  z-index: var(--layer-skip-link);
  top: var(--offset-skip-link-hidden);
  left: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-foreground);
  color: var(--color-action-label);
  font-family: var(--font-product);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
}

.skip-link:focus {
  top: var(--space-3);
}

.type-heading-feature,
.type-body-large,
.type-control-label-large,
.type-body-default,
.type-body-emphasis,
.type-navigation,
.type-caption,
.type-button-small {
  font-family: var(--font-product);
  font-style: normal;
  font-synthesis: none;
  text-transform: none;
}

.type-heading-feature {
  font-size: var(--font-size-heading-feature);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-feature);
  letter-spacing: var(--tracking-product);
}

.type-body-large {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--tracking-product);
}

.type-control-label-large {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--tracking-product);
}

.type-body-default {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-product);
}

.type-body-emphasis {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-product);
}

.type-navigation {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-product);
}

.type-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: var(--tracking-product);
}

.type-button-small {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
  letter-spacing: var(--tracking-button-small);
}

.support-page {
  min-height: max(100svh, var(--size-page-min-desktop));
  display: flex;
  flex-direction: column;
  background: var(--color-background-page);
  color: var(--color-foreground);
}

.support-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--size-header-min);
  padding: var(--space-3) var(--space-8);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark {
  width: var(--size-brand-mark);
  height: var(--size-brand-mark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  width: var(--size-brand-mark);
  height: var(--size-brand-mark);
  border-radius: var(--radius-control);
  object-fit: cover;
}

.brand-label {
  display: inline-flex;
  align-items: baseline;
}

.button {
  height: var(--size-control-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-control-gap);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-brand);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--color-action);
  color: var(--color-action-label);
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.button:hover {
  border-color: var(--color-action-hover);
  background: var(--color-action-hover);
}

.button:focus-visible,
.brand:focus-visible,
.support-footer-links a:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-action);
  outline-offset: var(--outline-offset-focus);
}

.support-header-action {
  min-width: var(--size-header-action-min);
}

.support-main {
  flex: 1 1 auto;
  width: min(100%, var(--size-main-max));
  margin: 0 auto;
  padding: var(--space-main-top) var(--space-8) var(--space-8);
}

.support-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.support-intro p {
  margin-top: var(--space-4);
  color: var(--color-foreground-muted);
}

.support-intro-action {
  margin-top: var(--space-4);
}

.support-faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-8);
}

.support-faq-sheet {
  width: min(100%, var(--size-faq-max));
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-background);
}

.support-faq-row {
  padding: var(--space-3) 0;
}

.support-faq-row + .support-faq-row {
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.support-faq-row dd {
  margin-top: var(--space-2);
  color: var(--color-foreground-muted);
}

.support-footer {
  flex: 0 0 auto;
  min-height: var(--size-footer-min);
  padding: var(--space-footer-top) var(--space-8) var(--space-4);
  border-top: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-background-footer);
}

.support-footer-content {
  max-width: var(--size-footer-content-max);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin: 0 auto;
}

.support-footer-brand p {
  margin-top: var(--space-4);
  color: var(--color-foreground-muted);
}

.support-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  padding-top: var(--space-6);
  color: var(--color-foreground-muted);
}

.support-footer-links a,
.support-footer-copyright {
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.support-footer-links a:hover,
.support-footer-links a:focus-visible {
  color: var(--color-foreground);
}

.support-footer-copyright {
  margin-top: var(--space-7);
  color: var(--color-foreground-quiet);
  text-align: center;
}

@media (min-width: 761px) and (max-width: 900px) {
  .support-footer-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: var(--space-4) var(--space-8);
  }
}

@media (max-width: 760px) {
  .support-page {
    min-height: 100svh;
  }

  .support-header {
    padding: var(--space-3) var(--space-5);
  }

  .support-main {
    padding: var(--space-8) var(--space-5) var(--space-section-compact);
  }

  .support-intro-break,
  .support-footer-copy-break {
    display: none;
  }

  .support-faq-section {
    margin-top: var(--space-section-compact);
  }

  .support-faq-sheet {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
  }

  .support-footer {
    min-height: auto;
    padding: var(--space-6) var(--space-5) var(--space-4);
  }

  .support-footer-content {
    flex-direction: column;
    gap: var(--space-6);
  }

  .support-footer-links {
    justify-content: flex-start;
    gap: var(--space-4) var(--space-6);
    padding-top: 0;
  }

  .support-footer-copyright {
    margin-top: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: var(--motion-duration-reduced) !important;
  }
}