/* Layout: one reading column on narrow screens (the name, centered, then the text); two columns from 820px (see the end of this sheet). */
: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; }
h1 {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
}
/* the text: one thought to a paragraph */
.story { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; margin-inline: auto; }
.story p { margin: 0; font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.app.about .fineprint { margin-inline: auto; }
/* the text ends on two centred lines */
.story h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.story ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; }
.story li { font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.story li::marker { color: var(--accent); }
.story li strong { color: var(--ink); font-weight: 600; }
.story .verse { margin-top: 6px; text-align: center; font-size: 1.06rem; color: var(--ink); }
.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);
}

/* the language drop-down (a flag) sits in the bar across the top. Moving between pages is done from the bar along the bottom
   on phones and tablets, and from the bar across the top on computers (see the end of this sheet). */
.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 =================
   A bar across the top of every page: the mark and the name on the left, the flag in the right corner.
   On phones and tablets the pages run along the bottom, each a sign over its name; a play bar that sticks
   to the bottom of a page rests on top of them (--dock-bottom). On computers the pages move up into the
   bar across the top. */
: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; }
}

/* the opening words of the page: the name, then the first thought, a little larger than the text that follows */
.app.about > header { display: flex; flex-direction: column; gap: 20px; margin-bottom: -6px; }
.app.about > header::after { content: none; }
.app.about .lead { margin: 0 auto; max-width: 60ch; font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
.kicker, .wave { display: none; }

/* Below 820px the same opening as on a computer, stacked: the label, the name, the first thought and the wave,
   then the text, all aligned to the left. */
@media (max-width: 819.98px) {
  body { background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app.about { padding-top: 34px; }
  .app.about > header { gap: 0; margin: 0 0 6px; }
  .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .kicker::before { content: ""; flex: none; width: 24px; height: 1px; background: currentColor; }
  .app.about h1 { font-size: clamp(2.5rem, 11vw, 3rem); letter-spacing: -0.025em; text-align: left; }
  .app.about .lead { max-width: 30ch; margin: 18px 0 0; font-size: clamp(1.22rem, 5.4vw, 1.4rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
  .wave { display: block; width: 100%; max-width: 460px; height: auto; margin: 28px 0 0; overflow: visible; }
  .app.about .story { margin: 0; gap: 18px; }
  .app.about .story .verse br { display: none; }
  .app.about .story .verse .l2::before { content: " "; }
  .app.about .story p { font-size: 1.02rem; line-height: 1.7; }
  .app.about .story .verse { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; font-size: 1.14rem; line-height: 1.5; color: var(--ink); }
  .app.about > .fineprint { margin-top: 36px; }
}

/* From 820px the page opens into two columns: the name, the first thought and a wave on the left;
   the text on the right. */
@media (min-width: 820px) {
  body { background: radial-gradient(1400px 520px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app.about { max-width: 1200px; padding-inline: clamp(20px, 3vw, 32px); padding-block: 64px 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(36px, 6vw, 88px); row-gap: 0; align-items: start; }
  .app.about > header { grid-column: 1; grid-row: 1; gap: 0; margin: 0; }
  .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--accent); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .kicker::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
  .app.about h1 { font-size: clamp(2.8rem, 5.2vw, 3.8rem); letter-spacing: -0.025em; text-align: left; }
  .app.about .lead { max-width: 26ch; margin: 26px 0 0; font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
  .wave { display: block; width: 100%; max-width: 460px; height: auto; margin-top: 44px; overflow: visible; }
  .app.about .story { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding-top: 14px; gap: 20px; }
  .app.about .story p { font-size: 1.08rem; line-height: 1.7; }
  .app.about .story .verse { margin-top: 10px; padding-top: 28px; border-top: 1px solid var(--line); text-align: left; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
  .app.about > .fineprint { grid-column: 1 / -1; grid-row: 2; margin-top: 72px; }
  .app.about > .legal { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
}
/* the left column stays in view while the text scrolls (on screens tall enough to hold it) */
@media (min-width: 820px) and (min-height: 700px) {
  .app.about > header { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px); }
}

/* the tagline under the wave */
.app.about .tagline { width: 100%; max-width: 460px; text-align: center; margin: 22px 0 0; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 820px) { .app.about .tagline { margin-top: 30px; font-size: 0.86rem; } }