:root {
  --font-family: Inter, sans-serif;
  --font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  --green: #238636;
  --green-1: #26933B;
  --secondary: #e5e7eb;
  --secondary-1: #000;
  --font-size: max(1.375rem, 2.225vw);
  --font-size-xxxx-small: max(0.875rem, 50%);
  --font-size-xxx-small: max(0.9375rem, 60%);
  --font-size-xx-small: max(1rem, 65%);
  --font-size-x-small: max(1.0625rem, 75%);
  --font-size-small: 1.4rem;
  --font-size-medium: 1.75rem;
  --font-size-large: 2rem;
  --font-size-x-large: 2.2rem;
  --font-size-xx-large: 2.75rem;
  --letter-spacing-loose: -0.0175em;
  --letter-spacing: -0.025em;
  --letter-spacing-tight: -0.03375em;
  --letter-spacing-x-tight: -0.04125em;
  --color-gray-200: #e5e7eb;
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: #1d293d;
  --color-white: #ffffff;
  --color-offwhite: #f8fafc;
  --color-qmaps-blue: #7FDEF0;
  --color-qmaps-blue-dark: #67B4C2;
  --color-qmaps-blue-light: #ccf2f9;
  --color-purple: hsl(264.8, 76.7%, 76.5%);
  --color-purple-20: hsl(255, 9.2%, 25.5%);
  --color-green: hsl(135, 76.7%, 76.5%);
  --color-green-20: hsl(135, 20%, 88%);
  --color-white: hsl(0, 0%, 100%);
  --color-body: hsl(202.5, 42.1%, 7.5%);
  --color-canvas: hsl(200, 28%, 15%);
  --color-card: hsl(200, 28%, 14.7%);
  --color-blue: hsl(200, 100%, 50%);
  --color-blue-hover: hsl(200, 100%, 40%);
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}
body {
    font-size: 16px;
    background: var(--color-body);
    color: var(--blue);
}
.container {
  max-width: 640px; /* Constrain width for centering */
  margin: 0 auto;
  padding: 0 16px; /* Smaller padding for <640px screens */
  /* border: 1px solid red; */
}
.header-logo {
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.header-logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap; /* Prevents wrapping */
}
.header-logo svg {
  margin: 0 6px 0 0;
}
h1 {
  font-size: var(--font-size-x-large);
  font-weight: 900;
  letter-spacing: var(--letter-spacing-x-tight);
  color: #fff;
}
h3 {
  color: var(--color-blue);
}