:root {
  --color-bg: #0A1128;
  --color-surface: #1E293B;
  --color-text: #FEFCFD;
  --color-text-muted: #B7C1D6;
  --color-slate: #475569;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --unit: 4px;
  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-desktop: 64px;
  --max-width: 1440px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  min-width: 0;
}

html {
  overflow-x: hidden;
}

html, body {
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}

@media (min-width: 400px) {
  .container {
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
  }
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.site-header {
  border-bottom: 1px solid var(--color-slate);
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (min-width: 400px) {
  .site-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .site-header {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* Client portal link. Matches the operator app's primary button exactly
   (Montserrat 600, 14px on a 20px line, light fill, navy label, square corners,
   90% opacity on hover), so this page and the sign-in page it opens read as one
   product.

   The button is taller than the logo's line box. The negative block margins hold
   its layout height at 16px, below the logo's smallest line box (18px at a 320px
   viewport), so the header height is still set by the logo alone, exactly as it
   was before this link existed. The visible button extends evenly into the
   header's own padding without moving anything else on the page.

   Below 640px "Client Access" cannot sit beside a single-line logo, so the label
   switches to "Sign in" with the app's compact padding. */
.portal-link {
  flex-shrink: 0;
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-bg);
  background-color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  margin-top: -8px;
  margin-bottom: -8px;
}

.portal-link:hover {
  opacity: 0.9;
}

.portal-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.portal-link-full {
  display: none;
}

@media (min-width: 640px) {
  .portal-link {
    padding: 8px 16px;
    margin-top: -10px;
    margin-bottom: -10px;
  }

  .portal-link-full {
    display: inline;
  }

  .portal-link-short {
    display: none;
  }
}

.main {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.content {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

@media (min-width: 400px) {
  .content {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (min-width: 640px) {
  .content {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .content {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.lede {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(17px, 4.5vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-align: left;
  overflow-wrap: break-word;
  margin-bottom: 20px;
}

@media (min-width: 400px) {
  .lede {
    margin-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .lede {
    margin-bottom: 32px;
  }
}

.notice {
  background-color: var(--color-surface);
  border: 1px solid var(--color-slate);
  padding: 12px;
  margin-top: 16px;
}

@media (min-width: 400px) {
  .notice {
    padding: 16px;
  }
}

@media (min-width: 640px) {
  .notice {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .notice {
    padding: 24px;
  }
}

.notice-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 8px;
}

.notice-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.site-footer {
  border-top: 1px solid var(--color-slate);
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (min-width: 400px) {
  .site-footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.site-footer p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.4;
  color: var(--color-text);
  text-align: left;
  overflow-wrap: break-word;
}