@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --bg: #0c0c0d;
  --bg-panel: #131314;
  --ink: #f2ede4;
  --ink-dim: #a39d92;
  --line: #2c2a27;
  --accent: #d6432f;
  --accent-ink: #0c0c0d;

  --display: 'Anton', 'Archivo Black', var(--sans);
  --sans: 'Archivo', system-ui, 'Segoe UI', sans-serif;

  color-scheme: dark;
  font: 16px/1.6 var(--sans);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

a {
  color: inherit;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* faint halftone screentone, manga texture without anime cliche */
.tone {
  background-image: radial-gradient(circle, rgba(214, 67, 47, 0.5) 1px, transparent 1.4px);
  background-size: 14px 14px;
}

/* ---------- header ---------- */

header.site {
  padding: 22px 0;
  border-bottom: 3px solid var(--ink);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.logo .accent {
  color: var(--accent);
}

.stamp {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 6px 12px;
  transform: rotate(-3deg);
  display: inline-block;
  border: 2px solid var(--ink);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 84px 0 96px;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(214, 67, 47, 0.35) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent);
  pointer-events: none;
  z-index: 1;
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 0.98;
  letter-spacing: 0.5px;
  margin: 0 0 28px;
  max-width: 780px;
}

.hero h1 span {
  color: var(--accent);
}

.hero p.lead {
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--ink-dim);
  max-width: 520px;
  margin: 0 0 40px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
}

/* The page's ONE primary action, in full accent — this style dates from the
   pre-release era, when .btn-primary was the DISABLED "Bientôt" button and
   was deliberately dimmed. Once the download became real, the hierarchy
   stayed inverted: the main CTA was the least visible button on the page
   (caught by the first real-browser pass). */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  position: relative;
  border-color: var(--ink);
}

.btn-primary:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.btn-primary .stamp {
  position: absolute;
  top: -14px;
  right: -18px;
  font-size: 10px;
  padding: 4px 8px;
  /* Ink stamp on an accent button — an accent stamp would blend into it. */
  background: var(--ink);
  color: var(--bg);
}

.btn-secondary {
  background: var(--ink);
  color: var(--bg);
}

.btn-secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- how it works ---------- */

section.how {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

section.how h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 44px;
  max-width: 620px;
  line-height: 1.05;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--line);
}

.step {
  padding: 28px 26px;
  border-right: 2px solid var(--line);
}

.step:last-child {
  border-right: none;
}

.step .num {
  font-family: var(--display);
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}

.step h3 {
  font-size: 16px;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.step p {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.6;
}

/* ---------- what you keep ---------- */

/* The grid lives on .wrap (which carries the max-width + side padding), not
   on the section: the previous shape (grid on the section + an inline
   display:contents on .wrap) dissolved the wrapper entirely, so "TES
   FICHIERS. TES RÈGLES." sat flush against the viewport's left edge on
   desktop (caught by the first real-browser pass). */
section.keep {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.keep .wrap {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}

section.keep .col {
  padding: 0 40px;
}

section.keep .col:first-child {
  padding-left: 0;
}

section.keep .divider {
  background: var(--line);
}

section.keep blockquote {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  margin: 0;
}

section.keep blockquote span {
  color: var(--accent);
}

section.keep ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

section.keep li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-dim);
}

section.keep li:last-child {
  border-bottom: none;
}

section.keep li strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- mobile roadmap ---------- */

section.mobile {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.mobile h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 12px;
}

section.mobile > .wrap > p {
  color: var(--ink-dim);
  max-width: 560px;
  margin: 0 0 40px;
  font-size: 15px;
}

.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.platform {
  border: 2px solid var(--line);
  padding: 24px;
}

.platform.confirmed {
  border-color: var(--accent);
}

.platform .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 14px;
  border: 1px solid currentColor;
}

.platform.confirmed .tag {
  color: var(--accent);
}

.platform.unsure .tag {
  color: var(--ink-dim);
}

.platform h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 22px;
  margin: 0 0 10px;
}

.platform p {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.6;
}

/* ---------- téléchargement page ---------- */

.meta {
  color: var(--ink-dim);
  font-size: 13px;
}

.meta-note {
  color: var(--ink-dim);
  font-size: 13px;
  margin-top: 14px;
}

.explainer {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
}

section.changelog {
  padding: 72px 0;
}

section.changelog h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 32px;
}

.changelog-entry {
  border-left: 3px solid var(--accent);
  padding: 4px 0 20px 20px;
  margin-bottom: 20px;
}

.changelog-entry:last-child {
  margin-bottom: 0;
}

.changelog-entry-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.changelog-version {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
}

.changelog-date {
  font-size: 12px;
  color: var(--ink-dim);
}

.changelog-entry p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 640px;
}

/* ---------- footer ---------- */

footer.site {
  padding: 28px 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
}

footer.site a {
  color: var(--ink);
  text-decoration: underline;
}



/* ---------- screenshots ---------- */

section.shots {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.shots h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 16px;
  line-height: 1.18;
}

.shots-lead {
  max-width: 68ch;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 40px;
}

.shot {
  margin: 0 0 32px;
}

/* A 2px frame rather than a browser chrome mockup: the app is not a website,
   and faking a title bar would misrepresent what it is. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--line);
  background: var(--bg-panel);
}

.shot figcaption {
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.shot figcaption strong {
  color: var(--ink);
}

.shot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.shot-pair .shot {
  margin-bottom: 0;
}

/* Phone screenshots are portrait and would tower over everything at full
   width; capped and centred so the pair stays balanced. */
.shot-phone img {
  max-width: 340px;
  margin: 0 auto;
}

.shot-phone figcaption {
  text-align: center;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 780px) {
  .shot-pair {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- remote access ---------- */

section.remote {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.remote h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 22px;
  max-width: 620px;
  /* 1.05 elsewhere on the page, but those headings all fit one line. This
     one wraps, and at 1.05 the display face's descenders were clipped by
     the line box — "TOI." rendered as "TOL". */
  line-height: 1.18;
}

.remote-lead {
  max-width: 68ch;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 18px;
}

.remote-lead strong {
  color: var(--ink);
}

.remote-once {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 0 0 32px;
}

/* Four steps here against the three of "comment ça marche" — same cells,
   one more column. */
.steps-four {
  grid-template-columns: repeat(4, 1fr);
}

.faq {
  margin: 36px 0 0;
  max-width: 68ch;
}

.faq dt {
  font-weight: 700;
  margin-top: 22px;
  font-size: 15px;
}

.faq dd {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
}


/* ---------- per-platform instructions ---------- */

/* iOS and Android side by side rather than stacked: the reader only cares
   about one of the two columns, and having to scroll past the wrong one to
   find theirs is exactly the friction this page exists to remove. */
.platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 2px solid var(--line);
  margin: 24px 0;
}

.platform-col {
  padding: 22px 24px;
  border-right: 2px solid var(--line);
}

.platform-col:last-child {
  border-right: none;
}

.platform-col h4 {
  margin: 0 0 10px;
}

.plat-tag {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 5px 12px;
}

.plat-note {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0 0 4px;
  line-height: 1.6;
}

/* Inside a column the steps are narrower, so they get tighter spacing and a
   smaller number than the full-width walkthroughs. */
.walk-tight {
  margin: 8px 0 0;
}

.walk-tight > li {
  padding: 14px 0 14px 42px;
}

.walk-tight > li::before {
  font-size: 20px;
  top: 13px;
}

.walk-tight h3 {
  font-size: 14px;
}

.walk-tight p {
  font-size: 14px;
}

@media (max-width: 820px) {
  .platforms {
    grid-template-columns: 1fr;
  }

  .platform-col {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }

  .platform-col:last-child {
    border-bottom: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* Four columns get too narrow before the 720px breakpoint the rest of the
     page uses, so this grid steps down to two first. */
  .steps-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-four .step:nth-child(2) {
    border-right: none;
  }
  .steps-four .step:nth-child(-n + 2) {
    border-bottom: 2px solid var(--line);
  }
}

@media (max-width: 720px) {
  .steps,
  .steps-four {
    grid-template-columns: 1fr;
  }
  .step {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }
  .step:last-child {
    border-bottom: none;
  }
  section.keep .wrap {
    grid-template-columns: 1fr;
  }
  section.keep .divider {
    display: none;
  }
  section.keep .col {
    padding: 0 0 32px;
  }
  section.keep .col:last-child {
    padding-bottom: 0;
  }
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- site navigation ---------- */

/* The header carried only a logo, so every page was a dead end: the FAQ,
   the help pages and the download all existed with no way to reach one
   from another. */
header.site .wrap {
  gap: 20px;
  flex-wrap: wrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 8px 12px;
  border: 2px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-color: var(--line);
}

.nav a.current {
  color: var(--accent);
  border-color: var(--accent);
}

.nav a.nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.nav a.nav-cta:hover {
  color: var(--accent-ink);
  filter: brightness(1.12);
}

/* Burger: a checkbox rather than script, so navigation never depends on JS
   having loaded. */
.nav-toggle,
.nav-burger {
  display: none;
}

/* ---------- documentation-style pages ---------- */

section.doc {
  padding: 56px 0 72px;
}

.doc h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
}

.doc .lead {
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 68ch;
  margin: 0 0 8px;
}

.doc h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(20px, 3vw, 26px);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}

.doc h3 {
  font-size: 16px;
  margin: 28px 0 8px;
}

.doc p,
.doc li {
  color: var(--ink-dim);
  max-width: 68ch;
}

.doc strong {
  color: var(--ink);
}

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* Table of contents: these pages are long, and a wall of prose with no map
   is where people give up. */
.toc {
  border: 2px solid var(--line);
  background: var(--bg-panel);
  padding: 18px 22px;
  margin: 28px 0 8px;
  max-width: 68ch;
}

.toc p {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
}

.toc li {
  margin-bottom: 5px;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.toc a:hover {
  border-bottom-color: var(--accent);
}

/* Numbered walkthrough steps, heavier than a plain list because these are
   things to DO, in order. */
.walk {
  counter-reset: walk;
  padding: 0;
  list-style: none;
  margin: 24px 0;
  max-width: 74ch;
}

.walk > li {
  counter-increment: walk;
  position: relative;
  padding: 20px 0 20px 62px;
  border-bottom: 2px solid var(--line);
}

.walk > li:last-child {
  border-bottom: none;
}

.walk > li::before {
  content: counter(walk, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--display);
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
}

.walk h3 {
  margin: 0 0 6px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink);
}

.walk p {
  margin: 0 0 8px;
}

.walk p:last-child {
  margin-bottom: 0;
}

/* Callout for the things people get wrong. */
.note {
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  padding: 14px 18px;
  margin: 18px 0;
  max-width: 68ch;
}

.note p {
  margin: 0;
}

.note p + p {
  margin-top: 8px;
}

.note.warn {
  border-left-color: #d6a12f;
}

/* FAQ: <details> so the page is scannable as a list of questions first. */
.qa {
  max-width: 74ch;
  margin-top: 8px;
}

.qa details {
  border-bottom: 2px solid var(--line);
}

.qa summary {
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  /* Centred on the row rather than pinned to a fixed offset: questions that
     wrap to two lines pushed the marker visually out of line with the text.
     The minus glyph also sits higher than the plus in this face, so both are
     centred in a fixed box instead of aligned by baseline. */
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}

.qa details[open] summary::after {
  content: '\2212';
}

.qa summary:hover {
  color: var(--accent);
}

.qa .answer {
  padding: 0 0 18px;
}

.qa .answer p {
  margin: 0 0 10px;
}

.qa .answer p:last-child {
  margin-bottom: 0;
}

/* Cross-page footer navigation, so a page never ends in a dead end. */
.next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 2px solid var(--line);
  margin-top: 56px;
}

.next-steps a {
  padding: 20px 22px;
  border-right: 2px solid var(--line);
  text-decoration: none;
  display: block;
}

.next-steps a:last-child {
  border-right: none;
}

.next-steps a:hover {
  background: var(--bg-panel);
}

.next-steps .k {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.next-steps .t {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
}

@media (max-width: 860px) {
  /* Below this the five links no longer fit beside the logo, so they fold
     into a burger rather than wrapping into an unreadable second row. */
  .nav-burger {
    display: block;
    margin-left: auto;
    padding: 8px 12px;
    border: 2px solid var(--line);
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
  }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 2px solid var(--line);
    padding-top: 8px;
  }

  .nav-toggle:checked ~ .nav {
    display: flex;
  }

  .nav a {
    padding: 13px 4px;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }

  .nav a.nav-cta {
    margin-top: 10px;
    text-align: center;
    border: 2px solid var(--accent);
  }

  .next-steps a {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }

  .next-steps a:last-child {
    border-bottom: none;
  }
}

/* ---------- help call-to-action ---------- */

/* The guide existed but only in the navbar, competing with four other links.
   A visitor who has just read "three steps, no technical knowledge" and
   isn't convinced needs the guide offered to them, not hunted for. */
section.help-cta {
  padding: 56px 0;
  border-bottom: 3px solid var(--ink);
  background: var(--bg-panel);
}

.help-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.help-cta h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 30px);
  margin: 0 0 12px;
  line-height: 1.15;
}

.help-cta p {
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0;
  line-height: 1.65;
}

.help-cta-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.help-cta-links .btn {
  text-align: center;
}

/* A third hero action needs to read as the quietest of the three. */
.btn-ghost {
  border: 2px solid var(--line);
  color: var(--ink-dim);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}

@media (max-width: 780px) {
  .help-cta-inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- hero illustration ---------- */

/* Full-bleed on the right rather than a box in a grid column. Contained, it
   read as a rectangle pasted onto the page: the hero paints a red halftone
   across its whole surface and the picture covered it with a hard edge.
   Bleeding it to the viewport edge, UNDER the halftone, leaves no boundary
   to notice. */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  /* Anchored left so the laptop and phone — the subject — stay in frame
     whatever the viewport does to the crop. */
  object-position: left center;
  z-index: 0;
  mask-image: linear-gradient(to right, transparent 0%, transparent 8%, #000 46%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 8%, #000 46%);
  pointer-events: none;
}

/* The copy must never run under the artwork. */
.hero-copy {
  max-width: 560px;
}

.hero-link {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}

.hero-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 900px) {
  /* No room for side-by-side: the art becomes a faint backdrop the text sits
     on, keeping the atmosphere without fighting for legibility. */
  .hero-art {
    width: 100%;
    opacity: 0.28;
    object-position: center;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  }

  .hero-copy {
    max-width: none;
  }
}

/* ---------- screenshots ---------- */

section.shots {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.shots h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 16px;
  line-height: 1.18;
}

.shots-lead {
  max-width: 68ch;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 40px;
}

.shot {
  margin: 0 0 32px;
}

/* A 2px frame rather than a browser chrome mockup: the app is not a website,
   and faking a title bar would misrepresent what it is. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--line);
  background: var(--bg-panel);
}

.shot figcaption {
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.shot figcaption strong {
  color: var(--ink);
}

.shot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.shot-pair .shot {
  margin-bottom: 0;
}

/* Phone screenshots are portrait and would tower over everything at full
   width; capped and centred so the pair stays balanced. */
.shot-phone img {
  max-width: 340px;
  margin: 0 auto;
}

.shot-phone figcaption {
  text-align: center;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 780px) {
  .shot-pair {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- remote access ---------- */

section.remote {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
}

section.remote h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 22px;
  max-width: 620px;
  /* 1.05 elsewhere on the page, but those headings all fit one line. This
     one wraps, and at 1.05 the display face's descenders were clipped by
     the line box — "TOI." rendered as "TOL". */
  line-height: 1.18;
}

.remote-lead {
  max-width: 68ch;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 18px;
}

.remote-lead strong {
  color: var(--ink);
}

.remote-once {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 0 0 32px;
}

/* Four steps here against the three of "comment ça marche" — same cells,
   one more column. */
.steps-four {
  grid-template-columns: repeat(4, 1fr);
}

.faq {
  margin: 36px 0 0;
  max-width: 68ch;
}

.faq dt {
  font-weight: 700;
  margin-top: 22px;
  font-size: 15px;
}

.faq dd {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
}


/* ---------- per-platform instructions ---------- */

/* iOS and Android side by side rather than stacked: the reader only cares
   about one of the two columns, and having to scroll past the wrong one to
   find theirs is exactly the friction this page exists to remove. */
.platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 2px solid var(--line);
  margin: 24px 0;
}

.platform-col {
  padding: 22px 24px;
  border-right: 2px solid var(--line);
}

.platform-col:last-child {
  border-right: none;
}

.platform-col h4 {
  margin: 0 0 10px;
}

.plat-tag {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 5px 12px;
}

.plat-note {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0 0 4px;
  line-height: 1.6;
}

/* Inside a column the steps are narrower, so they get tighter spacing and a
   smaller number than the full-width walkthroughs. */
.walk-tight {
  margin: 8px 0 0;
}

.walk-tight > li {
  padding: 14px 0 14px 42px;
}

.walk-tight > li::before {
  font-size: 20px;
  top: 13px;
}

.walk-tight h3 {
  font-size: 14px;
}

.walk-tight p {
  font-size: 14px;
}

@media (max-width: 820px) {
  .platforms {
    grid-template-columns: 1fr;
  }

  .platform-col {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }

  .platform-col:last-child {
    border-bottom: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* Four columns get too narrow before the 720px breakpoint the rest of the
     page uses, so this grid steps down to two first. */
  .steps-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-four .step:nth-child(2) {
    border-right: none;
  }
  .steps-four .step:nth-child(-n + 2) {
    border-bottom: 2px solid var(--line);
  }
}

@media (max-width: 720px) {
  .steps,
  .steps-four {
    grid-template-columns: 1fr;
  }
  .step {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }
  .step:last-child {
    border-bottom: none;
  }
  section.keep .wrap {
    grid-template-columns: 1fr;
  }
  section.keep .divider {
    display: none;
  }
  section.keep .col {
    padding: 0 0 32px;
  }
  section.keep .col:last-child {
    padding-bottom: 0;
  }
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- site navigation ---------- */

/* The header carried only a logo, so every page was a dead end: the FAQ,
   the help pages and the download all existed with no way to reach one
   from another. */
header.site .wrap {
  gap: 20px;
  flex-wrap: wrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 8px 12px;
  border: 2px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-color: var(--line);
}

.nav a.current {
  color: var(--accent);
  border-color: var(--accent);
}

.nav a.nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.nav a.nav-cta:hover {
  color: var(--accent-ink);
  filter: brightness(1.12);
}

/* Burger: a checkbox rather than script, so navigation never depends on JS
   having loaded. */
.nav-toggle,
.nav-burger {
  display: none;
}

/* ---------- documentation-style pages ---------- */

section.doc {
  padding: 56px 0 72px;
}

.doc h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
}

.doc .lead {
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 68ch;
  margin: 0 0 8px;
}

.doc h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(20px, 3vw, 26px);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}

.doc h3 {
  font-size: 16px;
  margin: 28px 0 8px;
}

.doc p,
.doc li {
  color: var(--ink-dim);
  max-width: 68ch;
}

.doc strong {
  color: var(--ink);
}

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* Table of contents: these pages are long, and a wall of prose with no map
   is where people give up. */
.toc {
  border: 2px solid var(--line);
  background: var(--bg-panel);
  padding: 18px 22px;
  margin: 28px 0 8px;
  max-width: 68ch;
}

.toc p {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
}

.toc li {
  margin-bottom: 5px;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.toc a:hover {
  border-bottom-color: var(--accent);
}

/* Numbered walkthrough steps, heavier than a plain list because these are
   things to DO, in order. */
.walk {
  counter-reset: walk;
  padding: 0;
  list-style: none;
  margin: 24px 0;
  max-width: 74ch;
}

.walk > li {
  counter-increment: walk;
  position: relative;
  padding: 20px 0 20px 62px;
  border-bottom: 2px solid var(--line);
}

.walk > li:last-child {
  border-bottom: none;
}

.walk > li::before {
  content: counter(walk, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--display);
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
}

.walk h3 {
  margin: 0 0 6px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink);
}

.walk p {
  margin: 0 0 8px;
}

.walk p:last-child {
  margin-bottom: 0;
}

/* Callout for the things people get wrong. */
.note {
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  padding: 14px 18px;
  margin: 18px 0;
  max-width: 68ch;
}

.note p {
  margin: 0;
}

.note p + p {
  margin-top: 8px;
}

.note.warn {
  border-left-color: #d6a12f;
}

/* FAQ: <details> so the page is scannable as a list of questions first. */
.qa {
  max-width: 74ch;
  margin-top: 8px;
}

.qa details {
  border-bottom: 2px solid var(--line);
}

.qa summary {
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  /* Centred on the row rather than pinned to a fixed offset: questions that
     wrap to two lines pushed the marker visually out of line with the text.
     The minus glyph also sits higher than the plus in this face, so both are
     centred in a fixed box instead of aligned by baseline. */
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}

.qa details[open] summary::after {
  content: '\2212';
}

.qa summary:hover {
  color: var(--accent);
}

.qa .answer {
  padding: 0 0 18px;
}

.qa .answer p {
  margin: 0 0 10px;
}

.qa .answer p:last-child {
  margin-bottom: 0;
}

/* Cross-page footer navigation, so a page never ends in a dead end. */
.next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 2px solid var(--line);
  margin-top: 56px;
}

.next-steps a {
  padding: 20px 22px;
  border-right: 2px solid var(--line);
  text-decoration: none;
  display: block;
}

.next-steps a:last-child {
  border-right: none;
}

.next-steps a:hover {
  background: var(--bg-panel);
}

.next-steps .k {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.next-steps .t {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
}

@media (max-width: 860px) {
  /* Below this the five links no longer fit beside the logo, so they fold
     into a burger rather than wrapping into an unreadable second row. */
  .nav-burger {
    display: block;
    margin-left: auto;
    padding: 8px 12px;
    border: 2px solid var(--line);
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
  }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 2px solid var(--line);
    padding-top: 8px;
  }

  .nav-toggle:checked ~ .nav {
    display: flex;
  }

  .nav a {
    padding: 13px 4px;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }

  .nav a.nav-cta {
    margin-top: 10px;
    text-align: center;
    border: 2px solid var(--accent);
  }

  .next-steps a {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }

  .next-steps a:last-child {
    border-bottom: none;
  }
}

/* ---------- help call-to-action ---------- */

/* The guide existed but only in the navbar, competing with four other links.
   A visitor who has just read "three steps, no technical knowledge" and
   isn't convinced needs the guide offered to them, not hunted for. */
section.help-cta {
  padding: 56px 0;
  border-bottom: 3px solid var(--ink);
  background: var(--bg-panel);
}

.help-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.help-cta h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 30px);
  margin: 0 0 12px;
  line-height: 1.15;
}

.help-cta p {
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0;
  line-height: 1.65;
}

.help-cta-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.help-cta-links .btn {
  text-align: center;
}

/* A third hero action needs to read as the quietest of the three. */
.btn-ghost {
  border: 2px solid var(--line);
  color: var(--ink-dim);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}

@media (max-width: 780px) {
  .help-cta-inner {
    grid-template-columns: 1fr;
  }
}

/* Liens légaux du pied de page : discrets, mais présents sur chaque page —
   Discord exige de pouvoir les atteindre, et un lien légal introuvable ne
   vaut guère mieux qu'un lien absent. */
.footer-legal {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-dim);
}

.footer-legal a {
  color: var(--ink-dim);
}

.footer-legal a:hover {
  color: var(--accent);
}

/* ---------- community / discord ---------- */

/* Le Discord dans la navigation : une destination, pas une note de bas de
   page. Distinct du bouton de téléchargement pour ne pas lui faire
   concurrence — l'un installe, l'autre accompagne. */
.nav-discord {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.nav-discord:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

section.community {
  padding: 72px 0;
  border-bottom: 3px solid var(--ink);
  background: var(--bg-panel);
}

section.community h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 16px;
  line-height: 1.18;
}

.community-lead {
  max-width: 68ch;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 32px;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--line);
  margin-bottom: 28px;
}

.community-item {
  padding: 22px 24px;
  border-right: 2px solid var(--line);
}

.community-item:last-child {
  border-right: none;
}

.community-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
}

.community-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.btn-discord {
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
  margin-top: 8px;
}

.btn-discord:hover {
  filter: brightness(1.12);
  color: #fff;
}

@media (max-width: 820px) {
  .community-grid {
    grid-template-columns: 1fr;
  }

  .community-item {
    border-right: none;
    border-bottom: 2px solid var(--line);
  }

  .community-item:last-child {
    border-bottom: none;
  }

  .btn-discord {
    display: block;
    text-align: center;
  }
}


/* ---------- footer ---------- */

/* Trois blocs sur une ligne, empilés sur mobile. L ancien pied de page mêlait
   crédit et lien de contact dans une seule phrase, ce qui rendait le lien
   Discord invisible. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.footer-credit {
  color: var(--ink-dim);
}

/* Le logo hérite de currentColor : il suit la couleur du lien au survol sans
   qu il faille deux fichiers. */
.discord-icon {
  width: 20px;
  height: 15px;
  flex-shrink: 0;
}

.footer-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.footer-discord:hover {
  color: #5865f2;
}

.footer-legal {
  display: block;
  margin-top: 0;
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-dim);
}

@media (max-width: 720px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    margin-left: 0;
  }
}