/* Standalone styles for the three static support pages.
   These pages ship no script and cannot reference the hashed application
   bundle, so they restate the SplitSleeperCalc palette and type steps here.
   Every colour value matches tokens.css. */

:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: oklch(96.5% 0.012 86);
  color: oklch(24% 0.021 254);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.supporthead {
  background: linear-gradient(180deg, oklch(29% 0.032 254), oklch(23% 0.028 254));
  border-bottom: 2px solid oklch(82% 0.155 80);
  color: oklch(95% 0.01 86);
  padding: 1.5rem clamp(1rem, 0.55rem + 2.2vw, 2.25rem) 2rem;
}

.supporthead > * {
  max-width: 46rem;
  margin-inline: auto;
}

.supporthead .wordmark {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.supporthead .wordmark a {
  color: inherit;
  text-decoration: none;
}

.supporthead .boundary {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: oklch(80% 0.013 86);
  max-width: 42rem;
}

main {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2rem clamp(1rem, 0.55rem + 2.2vw, 2.25rem) 3.75rem;
}

h1 {
  font-size: clamp(1.9rem, 1.35rem + 2.9vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.28;
  border-top: 1px solid oklch(84% 0.014 86);
  padding-top: 2rem;
  margin: 2.75rem 0 0.75rem;
}

p,
ul,
ol {
  margin: 0.75rem 0 0;
}

ul,
ol {
  padding-left: 1.4rem;
}

li + li {
  margin-top: 0.35rem;
}

a {
  color: oklch(35% 0.1 70);
}

a:hover,
a:focus-visible {
  color: oklch(25% 0.055 70);
}

.cite {
  list-style: none;
  padding: 0;
  counter-reset: cite;
}

.cite li {
  counter-increment: cite;
  border-left: 2px solid oklch(82% 0.155 80);
  padding: 0.5rem 0 0.5rem 1rem;
  margin-top: 0.75rem;
}

.cite li::before {
  content: counter(cite) '. ';
  font-weight: 600;
}

.cite .cite__marker {
  display: block;
  font-size: 0.8125rem;
  color: oklch(50% 0.015 254);
}

.cite .cite__url {
  display: block;
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 0.8125rem;
  color: oklch(50% 0.015 254);
  word-break: break-all;
}

.cta {
  border: 2px solid oklch(66% 0.145 70);
  border-radius: 6px;
  background: oklch(82% 0.155 80 / 0.22);
  padding: 1rem 1.25rem;
  margin-top: 2.75rem;
}

.supportfoot {
  border-top: 2px solid oklch(82% 0.155 80);
  background: oklch(23% 0.028 254);
  color: oklch(80% 0.013 86);
  padding: 2rem clamp(1rem, 0.55rem + 2.2vw, 2.25rem) 2.75rem;
  font-size: 0.9375rem;
}

.supportfoot > * {
  max-width: 46rem;
  margin-inline: auto;
}

.supportfoot a {
  color: oklch(95% 0.01 86);
}

.supportfoot nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.supportfoot nav a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid oklch(44% 0.03 256);
  border-radius: 3px;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

.supportfoot nav a:hover,
.supportfoot nav a:focus-visible {
  background: oklch(36% 0.038 256);
}

.supportfoot nav a[aria-current='page'] {
  border-color: oklch(82% 0.155 80);
  color: oklch(82% 0.155 80);
}

.supportfoot .boundary {
  color: oklch(82% 0.155 80);
  font-weight: 500;
}