/* Palette KnowStress (src/theme/colors.ts). */
:root {
  --brume: #f2f5f7;
  --white: #ffffff;
  --ecume: #d5e5ec;
  --lagon: #2c6e8a;
  --lagon-deep: #1f5268;
  --nuit: #13222e;
  --ardoise: #4a5a66;
  --body: #2e3e4a;
  --ciel: #eaf4f8;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--brume);
  color: var(--body);
  font-family:
    'Figtree',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

header {
  background: var(--nuit);
  color: var(--white);
  padding: 32px 16px 40px;
}

header .inner,
main {
  max-width: 720px;
  margin: 0 auto;
}

.brand {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  margin-bottom: 24px;
}

.brand em {
  font-style: italic;
}

h1,
h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  color: var(--nuit);
  line-height: 1.25;
}

header h1 {
  color: var(--white);
  font-size: 34px;
  margin: 0 0 8px;
}

header p {
  margin: 0;
  color: #b7c6d0;
}

main {
  padding: 32px 16px 64px;
}

h2 {
  font-size: 24px;
  margin: 40px 0 12px;
}

h3 {
  font-size: 17px;
  color: var(--nuit);
  margin: 24px 0 8px;
}

a {
  color: var(--lagon-deep);
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 6px;
}

.highlight {
  background: var(--ciel);
  border-left: 4px solid var(--lagon);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--nuit);
}

.highlight p {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ecume);
}

th {
  color: var(--nuit);
  font-weight: 600;
  background: var(--ciel);
}

.card {
  background: var(--white);
  border-radius: 20px;
  padding: 20px;
  margin: 16px 0;
}

.card h3 {
  margin-top: 0;
}

footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 48px;
  color: var(--ardoise);
  font-size: 14px;
}