/* Layout: one centred column. The logo and the name, then three big buttons side by side, one for each page, and the install button under them. */
:root {
  /* single night-sky look, by choice: the page stays dark in every viewer theme */
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
body {
  background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.app {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
button { font: inherit; color: inherit; cursor: pointer; }
.eyebrow { margin: 0; }
/* the logo and the name sit in the middle; the flag keeps the top right corner of the page */
.app.home { gap: 26px; }
/* the mark and the name share one width, and both sit on the page's centre line: the name by its letters,
   the mark by its weight (see .logo) */
.app.home > header { --mark-h: min(56vw, 220px); --mark-w: calc(var(--mark-h) * 0.65); position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 10px; }
.app.home .tools { position: absolute; top: 0; right: 0; float: none; margin: 0; }
/* the owner's mark (156 by 240), drawn straight onto the page's own background; it stays still */
/* The mark is heavier on its left (the bar and the straight ends of the bows) than on its right (the thin outer curve):
   half of its ink lies left of a line 6.1% of its width before the middle of its box. Centred by its box it looks
   pushed to the left, so it is moved right by that much and the line that halves its ink falls on the page's centre line. */
.logo { display: block; width: var(--mark-w); height: var(--mark-h); overflow: visible; transform: translateX(calc(var(--mark-w) * 0.061)); }   /* overflow: its edges fall on fractions of a pixel, nothing is trimmed */
h1 {
  margin: 0;
  /* sized so the letters measure exactly the mark's width (in this face the name's ink is 4.683 times its size),
     and nudged by the difference between the first and last letters' side spaces so the ink itself is centred */
  font-size: calc(var(--mark-w) * 0.21354);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-0.0193em);
}
/* three big buttons: a sign and the page's name (set side by side further down) */
.bigbtns { display: flex; flex-direction: column; gap: 14px; }
.bigbtn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 18px 24px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 30px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.bigbtn .ico { flex: none; width: 54px; height: 54px; }
.bigbtn .name { flex: 1; min-width: 0; font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }
.bigbtn .go { flex: none; width: 12px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bigbtn:hover { background: var(--surface-2); border-color: var(--line); }
.bigbtn:hover .go { stroke: var(--ink); }
.bigbtn:active { transform: scale(0.985); }
.bigbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 360px) { .bigbtn { gap: 14px; min-height: 92px; padding: 16px 18px; } .bigbtn .ico { width: 46px; height: 46px; } .bigbtn .name { font-size: 1.36rem; } }
@media (prefers-reduced-motion: reduce) { .bigbtn { transition: none; } }
.icodefs { position: absolute; width: 0; height: 0; }
/* installing: a quieter button of its own under the three, and a line that says how when the browser cannot do it by itself */
.get { display: flex; flex-direction: column; gap: 10px; }
.get[hidden] { display: none; }
.getbtn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 14px 24px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.getbtn .ico { flex: none; width: 34px; height: 34px; margin-inline: 10px; }
.getbtn .words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.getbtn .name { font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.getbtn .sub { font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.getbtn:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); border-color: var(--accent); }
.getbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gethow { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 0.92rem; color: var(--ink); }
@media (max-width: 360px) { .getbtn { gap: 12px; padding: 12px 18px; } .getbtn .ico { margin-inline: 6px; } }
.app.home .fineprint { margin-inline: auto; }
.fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   /* small enough that the longest translation stays clearly shorter than the company name */
  color: var(--muted);
  text-align: center;
}
.legal p { margin: 0; }
.legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* top of the page: beside the title, the language drop-down (a flag). The title and the text under it run alongside it.
   Moving between pages is done from the three buttons. */
.app > header { display: block; }
.app > header::after { content: ""; display: block; clear: both; }
.app > header h1 + .lede, .app > header .titleline + .lede { margin-top: 6px; }
.tools { float: right; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px 14px; }
.langpick { position: relative; }
.langbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.langbtn[aria-expanded="true"] { border-color: var(--accent); }
/* the one line at the bottom of every page sits in the middle, over the company name */
.fineprint, #awScreen .fineprint { max-width: none; margin-inline: auto; text-align: center; }
/* a short line set beside the title */
.titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.titleline .eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
.langpick svg { display: block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.langmenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.langmenu button {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.langmenu button:hover { background: var(--surface-2); }
.langmenu button[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* longer words in other languages still fit the tabs on narrow phones */
@media (max-width: 380px) { .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* ================= website format =================
   The flag sits in the top right corner of the page. The three pages stand side by side, each a sign over
   its name, and the install button runs under the three of them. */
.app.home { max-width: 940px; gap: 30px; }
.app.home > header { position: static; }
.app.home .tools { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; }
.bigbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bigbtn { flex-direction: column; justify-content: center; gap: 12px; min-height: 124px; padding: 18px 6px; border-radius: 22px; text-align: center; }
.bigbtn .ico { width: 42px; height: 42px; }
.bigbtn .name { flex: none; max-width: 100%; font-size: 1rem; }
.bigbtn .go { display: none; }
.get { align-items: stretch; }
.getbtn { justify-content: center; }
.gethow { text-align: center; }
@media (min-width: 600px) {
  .app.home { gap: 34px; padding-inline: 32px; }
  .app.home .tools { top: calc(env(safe-area-inset-top, 0px) + 20px); right: 28px; }
  .bigbtns { gap: 18px; }
  .bigbtn { gap: 18px; min-height: 176px; padding: 28px 16px; border-radius: 30px; }
  .bigbtn .ico { width: 58px; height: 58px; }
  .bigbtn .name { font-size: 1.45rem; }
  .bigbtn:hover { transform: translateY(-2px); }
  .bigbtn:active { transform: scale(0.985); }
}
@media (min-width: 900px) {
  .app.home { padding-block: 44px 36px; }
  .app.home > header { --mark-h: 240px; }
}

/* 16 Oct 2026 · Home now carries the main bar too (same rules as the other pages) */
:root { --nav-h: 56px; --tabbar-h: 60px; --dock-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
body { padding-top: var(--nav-h); padding-bottom: var(--tabbar-h); }

.topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.brandmark { display: block; width: auto; height: 28px; overflow: visible; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar .tools { flex: none; float: none; margin: 0 0 0 auto; }

/* the pages, along the bottom */
.navlinks {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) - 1px);   /* with its top line, the bar is --tabbar-h tall */
  padding: 0 max(6px, calc(50% - 280px)) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navlinks a[aria-current="page"] svg { stroke-width: 2.1; }
.navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* a dot on Account says someone is signed in */
.navlinks a[data-in="true"]::after { content: ""; position: absolute; top: 7px; left: calc(50% + 6px); width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok, #5FD3C0); }
/* six names side by side: smaller letters on narrower phones, so the longest (Générateur, Protocolos) still fit */
@media (max-width: 380px) { .navlinks { padding-inline: 2px; } .navlinks a { font-size: 0.64rem; letter-spacing: -0.01em; } }
@media (max-width: 340px) { .navlinks a { font-size: 0.58rem; } .navlinks a svg { width: 23px; height: 23px; } }

/* computers (a wide screen worked with a mouse or trackpad): the pages sit in the bar across the top */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --nav-h: 64px; --dock-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: 0; }
  .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .topbar-in { gap: 14px; padding-inline: 32px; }
  .brandmark { height: 30px; }
  .topbar .tools { margin-left: 0; }
  .navlinks { position: static; display: flex; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; }
  .navlinks a { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 0.93rem; }
  .navlinks a svg { display: none; }
  .navlinks a:hover { background: var(--surface); }
  .navlinks a[aria-current="page"] { background: var(--surface-2); }
  .navlinks a:focus-visible { outline-offset: 3px; }
  .navlinks a[data-in="true"]::after { position: static; border: 0; }
}
.app.home .topbar .tools { position: static; margin-left: auto; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .app.home .topbar .tools { margin-left: 0; } }