/* 5000 — support site.
   Colours and spacing are taken from the app's own theme (src/theme.ts) so the
   site reads as the same product. Dark only, on purpose: the app is dark only. */

:root {
  --ink: #0b0b0f;
  --slab: #16161d;
  --slab-alt: #1f1f2a;
  --edge: #2a2a38;
  --chalk: #f5f5f7;
  --ash: #9b9bab;
  --dim: #6b6b7c;
  --signal: #4f8cff;
  --gold: #facc15;

  --display: 'Archivo', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- Language switching -------------------------------------------------
   With no JS, html has no lang-* class and both languages render. */
.lang-en [lang='fr'], .lang-fr [lang='en'] { display: none; }

/* ---- Masthead ----------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
  border-bottom: 1px solid var(--edge);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--chalk);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand:hover, .brand:focus-visible, .brand:active { text-decoration: none; }
.brand img { border-radius: 8px; display: block; }

.langs { display: flex; gap: 0.25rem; }
.langs button {
  min-width: 2.75rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ash);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.langs button:hover { color: var(--chalk); border-color: var(--dim); }
.lang-en .langs button[data-lang='en'],
.lang-fr .langs button[data-lang='fr'] {
  background: var(--slab-alt);
  color: var(--chalk);
  border-color: var(--slab-alt);
}

/* ---- Hero --------------------------------------------------------------- */
main { display: block; }

.hero {
  padding: clamp(3rem, 12vw, 6rem) var(--gutter) clamp(2.5rem, 8vw, 4rem);
  max-width: calc(var(--measure) + 8rem);
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5rem, 26vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--gold);
}

.page-title {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.875rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.tagline {
  margin: 1.25rem 0 0;
  font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  font-weight: 600;
  color: var(--chalk);
}

.lede {
  margin: 1rem 0 0;
  max-width: var(--measure);
  color: var(--ash);
}

.cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 1.5rem;
  border-radius: 10px;
  background: var(--signal);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.cta:hover, .cta:focus-visible, .cta:active {
  text-decoration: none;
  background: #6b9dff;
}

/* ---- Sections ----------------------------------------------------------- */
section:not(.hero) {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter);
  border-top: 1px solid var(--edge);
  max-width: calc(var(--measure) + 12rem);
}

section:not(.hero) .body { max-width: var(--measure); }

section h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

section p { margin: 0 0 1rem; color: var(--ash); }
section p:last-child { margin-bottom: 0; }

section .body > ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--ash);
}
section .body > ul li { margin-bottom: 0.4rem; }

code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--slab-alt);
  color: var(--chalk);
  font-size: 0.9em;
}

a { color: var(--signal); }
a:hover { color: #82afff; }

.link-out {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 140, 255, 0.4);
}
.link-out:hover, .link-out:focus-visible, .link-out:active {
  text-decoration: none;
  border-bottom-color: var(--signal);
}

/* ---- Dice markers -------------------------------------------------------
   The sections are a real sequence, so they are numbered — with dice, because
   that is what the app is for. */
.marker { padding-top: 0.35rem; }

.die {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.3rem;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--slab);
}
.die i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--gold);
  align-self: center;
  justify-self: center;
}
.die-1 i { grid-area: 2 / 2; }
.die-2 i:nth-child(1) { grid-area: 1 / 1; }
.die-2 i:nth-child(2) { grid-area: 3 / 3; }
.die-3 i:nth-child(1) { grid-area: 1 / 1; }
.die-3 i:nth-child(2) { grid-area: 2 / 2; }
.die-3 i:nth-child(3) { grid-area: 3 / 3; }
.die-4 i:nth-child(1) { grid-area: 1 / 1; }
.die-4 i:nth-child(2) { grid-area: 1 / 3; }
.die-4 i:nth-child(3) { grid-area: 3 / 1; }
.die-4 i:nth-child(4) { grid-area: 3 / 3; }
.die-5 i:nth-child(1) { grid-area: 1 / 1; }
.die-5 i:nth-child(2) { grid-area: 1 / 3; }
.die-5 i:nth-child(3) { grid-area: 2 / 2; }
.die-5 i:nth-child(4) { grid-area: 3 / 1; }
.die-5 i:nth-child(5) { grid-area: 3 / 3; }

/* ---- Panel -------------------------------------------------------------- */
.panel {
  margin-top: 1.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--slab);
  border: 1px solid var(--edge);
  border-radius: 12px;
}
.panel ul { margin: 0; padding-left: 1.1rem; color: var(--ash); }
.panel li { margin-bottom: 0.35rem; }
.panel li:last-child { margin-bottom: 0; }

/* ---- FAQ ---------------------------------------------------------------- */
details {
  border-top: 1px solid var(--edge);
  padding: 0.25rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--edge); }

summary {
  padding: 0.9rem 2rem 0.9rem 0;
  font-weight: 600;
  color: var(--chalk);
  cursor: pointer;
  list-style: none;
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
details[open] summary::after { content: '–'; }
summary:hover { color: var(--gold); }

details p {
  margin: 0 0 1rem;
  padding-right: 2rem;
}

/* ---- Footer ------------------------------------------------------------- */
footer {
  padding: clamp(2.5rem, 7vw, 3.5rem) var(--gutter) 3rem;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 0.9375rem;
}
.foot-name {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 800;
  color: var(--ash);
  letter-spacing: -0.01em;
}
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
footer nav a { text-decoration: none; }
footer nav a:hover, footer nav a:focus-visible, footer nav a:active {
  text-decoration: none;
  color: #82afff;
}
.foot-legal { margin: 1.5rem 0 0; font-size: 0.875rem; }

/* ---- Baseline ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 32rem) {
  section:not(.hero) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .marker { padding-top: 0; }
}