/* Copied from the validated mock-up docs/ux/waitlist/waitlist.html (version 18, 9a537850, PLA-1863), review chrome and set-aside films removed.
   .frame became <body> (it keeps the container queries of the mock-up), and its dark theme is carried by <html data-theme="dark"> (head.js).
   Do not adjust a value here: a change goes through a new version of the mock-up. */
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Atelier chaleureux tokens, same values as home/home.html (validated) */
:root {
  color-scheme: light;
  --bg: #fbf6ef;
  --paper: #fffdf9;
  --sunk: #f3ebe0;
  --ink: #2b211c;
  --ink-2: #6b5d54;
  --rule: #e7ddd0;
  --field: #8f7f73;
  --act: #a8412a;
  --on-act: #fff;
  --act-soft: #fbe6dc;
  --sage: #3f6f55;
  --sage-soft: #e4efe7;
  --ok: #2f7a4b;
  --ok-soft: #e3f2e8;
  --warn: #8a5a00;
  --warn-soft: #fdf0d6;
  --err: #9b2c5a;
  --err-soft: #f8e6ee;
  --ph: #e3d9cc;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ui: 'Nunito', system-ui, sans-serif;
  --read: 'Source Serif 4', Georgia, serif;
  --r: 8px;
  --r-obj: 14px;
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --soft: cubic-bezier(0.16, 1, 0.3, 1);
  --sheet: 0 1px 2px rgb(43 33 28 / 0.06), 0 6px 18px rgb(43 33 28 / 0.07);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1b1613;
  --paper: #241d19;
  --sunk: #2f2621;
  --ink: #f1e8de;
  --ink-2: #bcaea0;
  --rule: #3d332c;
  --field: #8c7c6f;
  --act: #f08a6c;
  --on-act: #1b1613;
  --act-soft: #43261d;
  --sage: #8fc4a5;
  --sage-soft: #1f3128;
  --ok: #7fd3a0;
  --ok-soft: #1d3326;
  --warn: #f2c06b;
  --warn-soft: #3b2d12;
  --err: #f39cbf;
  --err-soft: #3f1f2d;
  --ph: #3a322d;
  --sheet: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
}
* {
  box-sizing: border-box;
}
body {
  container-type: inline-size;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
p {
  margin: 0;
}
button,
input {
  font: inherit;
  color: inherit;
}
a {
  color: var(--act);
}
:focus-visible {
  outline: 2px solid var(--act);
  outline-offset: 2px;
}
[tabindex='-1']:focus {
  outline: none;
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
svg.i {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ===== Header of the static site: logo only (no link to the application) ===== */
.head {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.6rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 20px var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo b {
  color: var(--act);
}
.soon {
  margin-left: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-weight: 800;
  font-size: 14px;
}

/* ===== Buttons, notes, messages (home/home.html) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: var(--r);
  border: 1.5px solid var(--field);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--ink);
}
.btn.pri {
  background: var(--act);
  color: var(--on-act);
  border-color: var(--act);
}
.btn.pri:hover {
  filter: brightness(1.06);
}
.btn.lg {
  min-height: 48px;
  padding: 0 1.3rem;
  font-size: 16px;
}
.btn[aria-busy='true'] {
  cursor: progress;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  color: var(--act);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.note {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.2rem 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r);
}
.note > svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}
.note > :not(svg) {
  grid-column: 2;
}
.note.err {
  background: var(--err-soft);
}
.note.err > svg {
  color: var(--err);
}
.note.warn {
  background: var(--warn-soft);
}
.note.warn > svg {
  color: var(--warn);
}
.note .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin-top: 0.3rem;
}
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 0.4);
  border-top-color: currentColor;
  animation: spin 900ms linear infinite;
  flex: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sunk);
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.badge svg {
  width: 26px;
  height: 26px;
}
.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

/* ===== Page ===== */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.6rem 3.5rem;
}
.wrap.home {
  --gut: clamp(20px, 6cqi, 80px);
  max-width: calc(1120px + 2 * var(--gut));
  padding: 0 var(--gut) 3.5rem;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 3rem 0 0;
}
.hero h1 {
  font-size: 44px;
  line-height: 1.15;
}
.hero > h2 {
  font-size: 28px;
}
.hero > h2 {
  margin-top: 1.6rem;
}
.sec.join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: 1.5rem 3rem;
  align-items: center;
  margin-top: 4.5rem;
  scroll-margin-top: 1rem;
}
.join-text .when {
  margin: 0;
  font: 650 28px/1.25 var(--display);
  letter-spacing: -0.02em;
}
.hero .lead {
  margin: 1rem 0 0;
  font-size: 18px;
  color: var(--ink-2);
  max-width: 56ch;
}
.when {
  margin-top: 0.9rem;
  font-weight: 700;
}
/* Sign-up form: the only call to action */
.signup {
  max-width: 30rem;
  scroll-margin-top: 1rem;
}
.card {
  padding: 1.3rem 1.3rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-obj);
  box-shadow: var(--sheet);
}
.card h2 {
  font-size: 20px;
}
.card > h2 {
  margin-bottom: 0.9rem;
}
.field {
  margin-bottom: 1rem;
}
.field > label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 15px;
}
.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1.5px solid var(--field);
  border-radius: var(--r);
  background: var(--paper);
  font-size: 16px;
}
.field.is-err .input {
  border-color: var(--err);
}
.input[readonly] {
  background: var(--sunk);
  border-color: var(--rule);
  color: var(--ink-2);
}
.ferr {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin-top: 0.4rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--err);
}
.ferr svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
}
.field:not(.is-err) > .ferr {
  display: none;
}
.check,
.field > label.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--act);
  flex: none;
}
.submit {
  width: 100%;
  margin-top: 0.2rem;
}
.mention {
  margin-top: 0.7rem;
  font-size: 13.5px;
  color: var(--ink-2);
}
.mention a {
  color: var(--ink-2);
  font-weight: 700;
}
.mention + .mention {
  margin-top: 0.3rem;
}
.state-box h2 {
  font-size: 22px;
}
.state-box p {
  margin-top: 0.6rem;
}
.state-box .badge {
  width: 48px;
  height: 48px;
  margin-bottom: 0.8rem;
}
.state-box .badge svg {
  width: 22px;
  height: 22px;
}
.state-box .acts {
  margin-top: 0.9rem;
}
.note + .field,
.card > .note {
  margin-bottom: 1rem;
}

/* Wide film: the form stays a readable column in the middle */
/* Narrow film: one column, the cover goes on top */
@keyframes p1 {
  0%,
  16.54% {
    opacity: 0;
    transform: translate(84cqw, 94cqh);
  }
  17.69% {
    opacity: 1;
    transform: translate(84cqw, 94cqh);
  }
  22.69% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  23.54% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.86);
  }
  24.62% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  26.54%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
}
@keyframes o1 {
  0%,
  23.08% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.3);
  }
  23.65% {
    opacity: 0.55;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.6);
  }
  26.54%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(1.5);
  }
}
@keyframes f1b {
  0%,
  26.15% {
    opacity: 1;
    transform: translateY(101%);
  }
  31.15%,
  95.38% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes f1c {
  0%,
  48.85% {
    opacity: 1;
    transform: translateY(101%);
  }
  53.85%,
  95.38% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes r1a {
  0%,
  5.77% {
    transform: none;
  }
  15.77%,
  31.15% {
    transform: translateY(var(--sa));
  }
  31.23%,
  100% {
    transform: none;
  }
}
@keyframes r1b {
  0%,
  32.69% {
    transform: none;
  }
  48.46%,
  100% {
    transform: translateY(var(--sb));
  }
}
@keyframes r1c {
  0%,
  56.15% {
    transform: none;
  }
  76.92%,
  100% {
    transform: translateY(var(--sc));
  }
}
@keyframes p2 {
  0%,
  37% {
    opacity: 0;
    transform: translate(84cqw, 94cqh);
  }
  38.5% {
    opacity: 1;
    transform: translate(84cqw, 94cqh);
  }
  45% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  46.1% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.86);
  }
  47.5% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  50%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
}
@keyframes o2 {
  0%,
  45.5% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.3);
  }
  46.25% {
    opacity: 0.55;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.6);
  }
  50%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(1.5);
  }
}
@keyframes r2a {
  0%,
  7.5% {
    transform: none;
  }
  36%,
  55.5% {
    transform: translateY(var(--sa));
  }
  55.6%,
  100% {
    transform: none;
  }
}
@keyframes f2b {
  0%,
  49% {
    opacity: 1;
    transform: translateY(101%);
  }
  55.5%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes p3 {
  0%,
  14.29% {
    opacity: 0;
    transform: translate(84cqw, 94cqh);
  }
  16.43% {
    opacity: 1;
    transform: translate(84cqw, 94cqh);
  }
  26.43% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  28% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.86);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  33.57%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
}
@keyframes o3 {
  0%,
  27.14% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.3);
  }
  28.21% {
    opacity: 0.55;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.6);
  }
  33.57%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(1.5);
  }
}
@keyframes f3b {
  0%,
  32.86% {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  40.71%,
  91.43% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes f4b {
  0%,
  16.67% {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  22.78%,
  93.33% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes f4c {
  0%,
  51.67% {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  57.78%,
  93.33% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes p4 {
  0%,
  37.78% {
    opacity: 0;
    transform: translate(84cqw, 94cqh);
  }
  39.44% {
    opacity: 1;
    transform: translate(84cqw, 94cqh);
  }
  46.67% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  47.89% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.86);
  }
  49.44% {
    opacity: 1;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
  52.22%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh));
  }
}
@keyframes o4 {
  0%,
  47.22% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.3);
  }
  48.06% {
    opacity: 0.55;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(0.6);
  }
  52.22%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh)) scale(1.5);
  }
}
@keyframes r4b {
  0%,
  25.56% {
    transform: none;
  }
  37.22%,
  100% {
    transform: translateY(var(--sb));
  }
}
.play {
  position: absolute;
  z-index: 5;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.play:hover {
  background: var(--sunk);
  color: var(--ink);
}
.play svg {
  width: 18px;
  height: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .play {
    display: none;
  }
  .spin {
    animation-duration: 2.4s;
  }
}

/* Theme selector of the public site: visible, three choices, no menu to open */
.theme {
  display: flex;
  gap: 2px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
}
.theme legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.theme label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.55rem;
  border-radius: var(--r);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.theme label:hover {
  background: var(--sunk);
  color: var(--ink);
}
.theme input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.theme svg {
  width: 18px;
  height: 18px;
}
.theme label:has(:checked) {
  background: var(--sunk);
  color: var(--ink);
  font-weight: 800;
}
.theme label:has(:focus-visible) {
  outline: 2px solid var(--act);
  outline-offset: 2px;
}

/* Steps (home/landing-images.html, validated) */
.sec {
  margin-top: 4rem;
}
.sec > h2 {
  font-size: 28px;
}
.sec-lead {
  margin-top: 0.5rem;
  font-size: 18px;
  color: var(--ink-2);
  max-width: 62ch;
}
/* Guide cards (guides/guide-list.html, validated) */
.gcards {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.3rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-obj);
  box-shadow: var(--sheet);
  transition:
    transform 160ms var(--out),
    box-shadow 160ms var(--out);
}
.gcard:focus-within {
  outline: 2px solid var(--act);
  outline-offset: 2px;
}
.gcard .k {
  font: 800 12px var(--ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage);
}
.gcard h3 {
  margin-top: 0.35rem;
  font-size: 19px;
  line-height: 1.25;
}
.gcard h3 a {
  color: var(--ink);
  text-decoration: none;
}
.gcard h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-obj);
}
.gcard h3 a:focus-visible {
  outline: none;
}
.gcard p {
  margin-top: 0.6rem;
  color: var(--ink-2);
  font-size: 15px;
}
.gcard .meta {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 14px;
  color: var(--ink-2);
}
.gcard .meta svg {
  width: 16px;
  height: 16px;
}
.gcard .go {
  margin-left: auto;
  color: var(--act);
}
/* Page /guides (guides/guide-list.html, validated) */
.guide-list {
  padding-top: 2rem;
}
.guide-list > header {
  margin-top: 1rem;
}
.guide-list h1 {
  font-size: 40px;
}
.guide-list > header p {
  margin-top: 0.7rem;
  font-size: 18px;
  color: var(--ink-2);
  max-width: 56ch;
}
.guide-group {
  margin-top: 2.8rem;
}
.guide-group h2 {
  font-size: 24px;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.guide-group h2 small {
  font: 700 15px var(--ui);
  color: var(--ink-2);
  letter-spacing: 0;
}
.gcard .meta time {
  white-space: nowrap;
}
/* "Autres guides" (guides/guide-article.html, validated) */
.more {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.more h2 {
  font-size: 24px;
}
.more .gcards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
}
.more .gcard {
  padding: 1.2rem 1.2rem 1rem;
}
.more .gcard h3 {
  font-size: 18px;
  margin-top: 0;
}
/* Link pages (confirmed, expired, unsubscribed): centred message, then the guides */
.msg {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 0 0;
}
.msg h1 {
  font-size: 32px;
  margin: 0.3rem 0 0.6rem;
}
.msg p {
  color: var(--ink-2);
  font-size: 17px;
}
.msg p + p {
  margin-top: 0.5rem;
}
.msg .btn,
.msg .link {
  margin-top: 1.2rem;
}
.msg + .sec {
  margin-top: 3.5rem;
}
/* Guide and legal pages of the static site (guides/guide-article.html, legal/legal-document.html) */
.article {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.4rem 0 0;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 14px;
  color: var(--ink-2);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-weight: 700;
}
.crumbs svg {
  width: 14px;
  height: 14px;
}
.article h1 {
  font-size: 40px;
  line-height: 1.15;
  margin-top: 0.3rem;
}
.byline {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 15px;
  color: var(--ink-2);
}
.byline > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.byline svg {
  width: 16px;
  height: 16px;
}
.prose {
  margin-top: 2rem;
  font: 18px/1.7 var(--read);
  color: var(--ink);
}
.prose > * + * {
  margin-top: 1.1rem;
}
.prose h2 {
  font-size: 26px;
  margin-top: 2.6rem;
}
.prose h3 {
  font-size: 19px;
  margin-top: 1.6rem;
}
.prose ul {
  padding-left: 1.3rem;
}
.prose li + li {
  margin-top: 0.4rem;
}
.prose code {
  font:
    15px/1 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  background: var(--sunk);
  border-radius: 4px;
  padding: 0.12em 0.35em;
}
.prose pre {
  padding: 1rem 1.1rem;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--paper);
}
.prose pre code {
  background: none;
  padding: 0;
}
.legal .prose {
  font-size: 17px;
}
.legal h1 {
  font-size: 36px;
}
.article .signup {
  max-width: none;
  margin-top: 2.6rem;
}

/* ===== Footer of the static site: guides, legal, contact (no link to the application) ===== */
.foot {
  padding: 2.4rem 1.6rem 1.2rem;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.fgrid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.7fr 1fr 1.1fr;
  gap: 1.6rem 2rem;
}
.fgrid h2 {
  font: 800 12px var(--ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.fgrid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fgrid li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink);
  text-decoration: none;
}
.fgrid li a:hover {
  color: var(--act);
  text-decoration: underline;
}
.fgrid li a[aria-current] {
  color: var(--act);
  font-weight: 800;
}
.fbrand p {
  margin-top: 0.3rem;
  color: var(--ink-2);
  max-width: 24ch;
}
.fcontact a {
  color: var(--ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.fbottom {
  max-width: 1120px;
  margin: 1.8rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 14px;
}
@container (max-width: 1023px) {
  .fgrid {
    grid-template-columns: 1fr 1fr;
  }
  .hero h1 {
    font-size: 38px;
  }
  .sec.join {
    column-gap: 2rem;
  }
}
@container (max-width: 767px) {
  .guide-list h1 {
    font-size: 34px;
  }
  .guide-list > header p {
    font-size: 17px;
  }
  .guide-group {
    margin-top: 2.2rem;
  }
  .guide-group h2 {
    font-size: 22px;
  }
  .more .gcards {
    grid-template-columns: minmax(0, 1fr);
  }
  .head {
    padding: 0 1rem;
  }
  .theme label {
    padding: 0;
  }
  .theme label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .wrap {
    padding: 0 1rem 2.5rem;
  }
  .hero {
    padding-top: 2rem;
  }
  .sec.join {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3.5rem;
  }
  .join-text .when {
    font-size: 24px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero .lead {
    font-size: 17px;
  }
  .signup {
    max-width: none;
  }
  .card {
    padding: 1.1rem 1rem 1rem;
  }
  .sec {
    margin-top: 3rem;
  }
  .sec > h2 {
    font-size: 24px;
  }
  .sec-lead {
    font-size: 17px;
  }
  .gcards {
    grid-template-columns: minmax(0, 1fr);
  }
  .msg .btn {
    width: 100%;
    white-space: normal;
  }
  .msg {
    padding-top: 2.2rem;
  }
  .msg h1 {
    font-size: 28px;
  }
  .article {
    padding-top: 1.2rem;
  }
  .article h1 {
    font-size: 30px;
  }
  .legal h1 {
    font-size: 28px;
  }
  .prose {
    font-size: 17px;
  }
  .prose h2 {
    font-size: 22px;
    margin-top: 2rem;
  }
  .foot {
    padding: 2rem 1rem 1rem;
  }
  .fgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
  .fgrid li a,
  .fcontact a {
    min-height: 44px;
  }
}

/* Spacing scale (board, 04/11): one gutter for header, pages and footer, aligned on the same 1120 px column; one rhythm between sections */
.head,
.wrap,
.wrap.home,
.foot {
  --gut: clamp(20px, 6cqi, 80px);
  --edge: max(var(--gut), calc((100cqi - 1120px) / 2));
  --gap: clamp(56px, 7cqi, 96px);
}
.head {
  padding: 0 var(--edge);
}
.wrap,
.wrap.home {
  max-width: none;
  padding: 0 var(--edge) var(--gap);
}
.foot {
  padding: 3rem var(--edge) 1.5rem;
}
.fgrid,
.fbottom {
  max-width: none;
}
.fbottom {
  margin-top: 2.5rem;
}
.hero {
  gap: 0;
  padding-top: clamp(2.5rem, 5cqi, 4rem);
}
.hero .lead {
  margin-top: 1rem;
}
.hero > h2 {
  margin-top: clamp(2.5rem, 5cqi, 3.5rem);
}
.hero > h2 {
  font: 800 14px/1.4 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.sec,
.sec.join,
.msg ~ .sec {
  margin-top: var(--gap);
}
.sec > h2 + .sec-lead {
  margin-top: 0.6rem;
}
.sec.join {
  column-gap: 4rem;
}
.card {
  padding: 1.5rem;
}
.gcards {
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.gcard {
  padding: 1.5rem;
}
.msg {
  padding-top: clamp(2.5rem, 6cqi, 4.5rem);
}
.msg .btn,
.msg .link {
  margin-top: 1.5rem;
}
.article {
  padding-top: clamp(2rem, 4cqi, 3.5rem);
}
.article .signup {
  margin-top: 3rem;
}
@container (max-width: 1023px) {
  .sec.join {
    column-gap: 2.5rem;
  }
}
@container (max-width: 767px) {
  .card {
    padding: 1.25rem;
  }
  .gcards {
    gap: 1rem;
  }
  .gcard {
    padding: 1.25rem;
  }
  .sec.join {
    row-gap: 1.25rem;
  }
}

/* Product page (board, 04/11): first screen, then one section per part of the product, each with a real screen */
.head-cta {
  min-height: 40px;
  margin-left: 0.4rem;
  padding: 0 0.9rem;
  font-size: 15px;
  white-space: nowrap;
}
.hero {
  padding-top: clamp(2rem, 4cqi, 3rem);
}
.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1rem 3.5rem;
  align-items: end;
}
.hero h1 {
  font-size: 48px;
  line-height: 1.1;
}
.hero .lead {
  margin: 0;
  font-size: 17px;
}
.hero-side .btn {
  margin-top: 1rem;
}
.group {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
}
.hero + .group {
  border-top: 0;
  padding-top: 0;
}
.kick {
  font: 800 15px/1.4 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.feat {
  margin-top: clamp(2.5rem, 5cqi, 4rem);
}
.kick + .feat {
  margin-top: 1.25rem;
}
.feat-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem 3.5rem;
  align-items: start;
}
.feat h3 {
  font-size: clamp(26px, 3.2cqi, 36px);
  line-height: 1.15;
}
.feat-text p {
  font-size: 17px;
  color: var(--ink-2);
}
.feat-text p + p {
  margin-top: 0.5rem;
}
.feat-text .fine {
  font-size: 13px;
}
.feat-text .fine a {
  color: var(--ink-2);
  font-weight: 700;
}
.sec.join {
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1rem;
}
@container (max-width: 1023px) {
  .hero h1 {
    font-size: 42px;
  }
  .hero-top {
    gap: 1rem 2rem;
  }
  .feat-text {
    column-gap: 2rem;
  }
}
@container (max-width: 767px) {
  .hero-top,
  .feat-text {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero h1 {
    font-size: 34px;
  }
  .head-cta {
    display: none;
  }
  .hero-side .btn {
    width: 100%;
  }
}

/* Real screens played as an animation: captures from validated mock-ups, scrolled and clicked by a pointer. Nothing reacts to the visitor. */
.live {
  position: relative;
  margin: 1.25rem 0 0;
}
.live.l1 {
  --T: 26s;
}
.live.l2 {
  --T: 20s;
}
.live.l3 {
  --T: 14s;
}
.live.l4 {
  --T: 18s;
}
.live-box {
  position: relative;
}
.live-view {
  position: relative;
  aspect-ratio: 5 / 3;
  container-type: size;
  overflow: hidden;
  border: 1px solid #e7ddd0;
  border-radius: var(--r-obj);
  background: #fbf6ef;
  box-shadow: var(--sheet);
}
.live-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 35%;
  animation: breathe 16s ease-in-out infinite alternate;
}
.fr {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}
.fr.first {
  opacity: 1;
}
.l1 .fr.s-b,
.l1 .fr.s-c,
.l2 .fr.s-b {
  background: #fbf6ef;
  box-shadow: 0 -10px 30px rgb(43 33 28 / 0.14);
}
.live-view img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}
/* One <picture> per theme: the hidden one is lazy and never rendered, so its image is not downloaded */
.live-view .dk {
  display: none;
}
:root[data-theme='dark'] .live-view .lt {
  display: none;
}
:root[data-theme='dark'] .live-view .dk {
  display: block;
}
.fr,
.fr img,
.live-view .ptr,
.live-view .ring {
  animation-duration: var(--T);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: both;
}
.live-view .ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgb(168 65 42 / 0.28);
  opacity: 0;
}
@keyframes breathe {
  from {
    transform: none;
  }
  to {
    transform: scale(1.022) translateY(-0.5%);
  }
}
.live.idle .live-view *,
.live.paused .live-view * {
  animation-play-state: paused !important;
}
.live-view .ptr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 28px;
  height: 28px;
  color: #2b211c;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: 0;
}
.live .play {
  background: rgb(43 33 28 / 0.72);
  color: #fff;
  right: 10px;
  top: auto;
  bottom: 10px;
}
.live .play:hover {
  background: rgb(43 33 28 / 0.9);
  color: #fff;
}
.live figcaption {
  margin-top: 0.6rem;
  font-size: 13px;
  color: var(--ink-2);
}
.l1 .ptr {
  animation-name: p1;
}
.l2 .ptr {
  animation-name: p2;
}
.l3 .ptr {
  animation-name: p3;
}
.l4 .ptr {
  animation-name: p4;
}
.l1 .ring {
  animation-name: o1;
}
.l2 .ring {
  animation-name: o2;
}
.l3 .ring {
  animation-name: o3;
}
.l4 .ring {
  animation-name: o4;
}
.l1 .s-a img {
  animation-name: r1a;
}
.l1 .fr.s-b {
  animation-name: f1b;
}
.l1 .s-b img {
  animation-name: r1b;
}
.l1 .fr.s-c {
  animation-name: f1c;
}
.l1 .s-c img {
  animation-name: r1c;
}
.l2 .s-a img {
  animation-name: r2a;
}
.l2 .fr.s-b {
  animation-name: f2b;
}
.l2 .s-b img {
  transform: translateY(var(--sb));
}
.l3 .fr.s-b {
  animation-name: f3b;
}
.l4 .fr.s-b {
  animation-name: f4b;
}
.l4 .s-b img {
  animation-name: r4b;
}
.l4 .fr.s-c {
  animation-name: f4c;
}
.l1 {
  --sa: -21.05%;
  --sb: -5.26%;
  --sc: -8.5%;
  --px: 30.8;
  --py: 86.7;
}
.l2 {
  --sa: -59.5%;
  --sb: -34.36%;
  --px: 62.5;
  --py: 36;
}
.l3 {
  --px: 89.2;
  --py: 33.6;
}
.l4 {
  --sb: -0%;
  --px: 66.4;
  --py: 71.1;
}
@media (prefers-reduced-motion: reduce) {
  .live-view img,
  .live-view * {
    animation: none !important;
  }
  .live .play {
    display: none;
  }
  .live-view .ptr,
  .live-view .ring {
    opacity: 0;
  }
}
@container (max-width: 599px) {
  .static-screens .l1 .live-view,
  .live-view {
    aspect-ratio: 3 / 4;
  }
  .l1 {
    --sa: -54.06%;
    --sb: -31.58%;
    --sc: -8.5%;
    --px: 50;
    --py: 84.8;
  }
  .l2 {
    --sa: -61.5%;
    --sb: -44.93%;
    --px: 50;
    --py: 53.7;
  }
  .l3 {
    --px: 64.1;
    --py: 64.2;
  }
  .l4 {
    --sb: -65.09%;
    --px: 82.3;
    --py: 52.3;
  }
}

/* Motion layer (board, 04/11; values in motion/page-entrance.html and motion/scroll-reveal.html). transform and opacity only. */
/* Entrance: CSS only, nothing hidden by JavaScript. It starts at .01 and not 0 so that the title and the first screen still count for LCP. */
@keyframes enter-fade {
  from {
    opacity: 0.01;
  }
}
@keyframes enter-up {
  from {
    opacity: 0.01;
    transform: translateY(18px);
  }
}
@keyframes enter-screen {
  from {
    opacity: 0.01;
    transform: translateY(24px) scale(0.985);
  }
}
.e-head {
  animation: enter-fade 700ms ease-out backwards;
}
.e-title {
  animation: enter-up 800ms var(--soft) 110ms backwards;
}
.e-sub {
  animation: enter-up 800ms var(--soft) 230ms backwards;
}
.e-cta {
  animation: enter-up 800ms var(--soft) 350ms backwards;
}
.e-visual {
  animation: enter-screen 900ms var(--soft) 470ms backwards;
}
.l1 .fr,
.l1 .fr img,
.l1 .ptr,
.l1 .ring {
  animation-delay: 1300ms;
}
.no-enter .e-head,
.no-enter .e-title,
.no-enter .e-sub,
.no-enter .e-cta,
.no-enter .e-visual {
  animation: none;
}
.no-enter .l1 .fr,
.no-enter .l1 .fr img,
.no-enter .l1 .ptr,
.no-enter .l1 .ring {
  animation-delay: 0s;
}
/* Scroll: the html.js-reveal class comes from waitlist-motion.js, so that without JavaScript everything stays visible. Each element reveals once. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--y, 20px));
  }
}
@keyframes rise-screen {
  from {
    opacity: 0;
    transform: translateY(var(--y, 24px)) scale(0.985);
  }
}
.js-reveal .reveal:not(.feat-text):not(.in) {
  opacity: 0;
}
.js-reveal .feat-text.reveal:not(.in) h3,
.js-reveal .feat-text.reveal:not(.in) > div {
  opacity: 0;
}
.js-reveal .reveal.in:not(.feat-text):not(.live) {
  animation: rise 900ms var(--soft) backwards;
}
.js-reveal .feat-text.in h3 {
  animation: rise 900ms var(--soft) backwards;
}
.js-reveal .feat-text.in > div {
  animation: rise 900ms var(--soft) 130ms backwards;
}
.js-reveal .live.reveal.in {
  animation: rise-screen 1000ms var(--soft) 220ms backwards;
}
.js-reveal .gcards li:nth-child(2).in {
  animation-delay: 130ms;
}
.js-reveal .gcards li:nth-child(3).in {
  animation-delay: 260ms;
}
/* Very light parallax, 1024 px and up, on the native scroll timeline only: browsers without it simply have no parallax */
@keyframes drift {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(-20px);
  }
}
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .l2 .live-box,
    .l3 .live-box,
    .l4 .live-box {
      animation: drift linear both;
      animation-timeline: view();
    }
  }
}
/* Micro-interactions: devices with a pointer only; focus keeps its outline; the form states are not animated */
.gcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 2px 4px rgb(43 33 28 / 0.08),
    0 12px 28px rgb(43 33 28 / 0.1);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn,
  .theme svg,
  .play,
  .gcard .go,
  .logo {
    transition:
      transform 260ms var(--soft),
      opacity 260ms var(--soft);
  }
  .gcard {
    transition: transform 320ms var(--soft);
  }
  .gcard::before {
    transition: opacity 320ms var(--soft);
  }
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn:focus-visible {
    transform: none;
  }
  .gcard:hover {
    transform: translateY(-2px);
  }
  .gcard:hover::before {
    opacity: 1;
  }
  .gcard:hover .go {
    transform: translateX(3px);
  }
  .theme label:hover svg {
    transform: scale(1.08);
  }
  .play:hover {
    transform: scale(1.06);
  }
  .logo:hover {
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .e-head,
  .e-title,
  .e-sub,
  .e-cta,
  .e-visual {
    animation: none;
  }
}
@container (max-width: 1023px) {
  .l2 .live-box,
  .l3 .live-box,
  .l4 .live-box {
    animation: none;
  }
}
@container (max-width: 767px) {
  .js-reveal .reveal,
  .js-reveal .feat-text {
    --y: 14px;
  }
}

/* First screen (board, 04/11): one big title, one or two sentences, a sober button, then the screens very large. Lots of air, few words. */
.hero {
  padding-top: clamp(3rem, 7cqi, 6rem);
}
.hero-top {
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.hero h1 {
  font-size: clamp(38px, 5.2cqi, 64px);
  line-height: 1.06;
}
.hero .lead {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  font-size: clamp(17px, 1.6cqi, 19px);
}
.hero-side .btn {
  margin-top: 1.75rem;
}
.hero-live {
  --wide: min(100cqi - 2 * var(--gut), 1360px);
  width: var(--wide);
  max-width: none;
  margin: clamp(2.5rem, 5cqi, 4rem) 0 0 calc((100% - var(--wide)) / 2);
}
@container (max-width: 767px) {
  .hero-side .btn {
    width: auto;
  }
}

/* Categories: one slow strip, right to left, faded at both edges. Same real reduced-motion rule: the list simply wraps. */
.feat.center .feat-text {
  display: block;
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.feat.center .feat-text p {
  margin-top: 0.6rem;
}
.mq {
  --wide: min(100cqi - 2 * var(--gut, 20px), 1360px);
  width: var(--wide);
  margin: 2rem 0 0 calc((100% - var(--wide)) / 2);
}
.mq-view {
  overflow: hidden;
  padding: 8px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mq-track {
  display: flex;
  width: max-content;
  animation: mq 72s linear infinite;
}
.mq ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}
.mq li {
  flex: none;
  width: 132px;
  height: 132px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-obj);
  background: var(--paper);
  box-shadow: var(--sheet);
  color: var(--ink);
  font: 800 15px/1.2 var(--ui);
}
.mq svg {
  width: 36px;
  height: 36px;
}
.mq .lang svg {
  color: var(--act);
}
.mq .code svg {
  color: var(--sage);
}
.mq .food svg {
  color: var(--warn);
}
.mq .song svg {
  color: var(--err);
}
.mq .lab svg {
  color: var(--ok);
}
.mq .play {
  top: auto;
  bottom: -38px;
  right: 0;
  background: transparent;
  color: var(--ink-2);
}
.live.mq.idle .mq-track,
.live.mq.paused .mq-track {
  animation-play-state: paused;
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track {
    animation: none;
    width: auto;
  }
  .mq ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .mq-clone {
    display: none !important;
  }
  .mq-view {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@container (max-width: 599px) {
  .mq ul {
    gap: 14px;
    padding: 0 7px;
  }
  .mq li {
    width: 108px;
    height: 108px;
    font-size: 14px;
  }
  .mq svg {
    width: 30px;
    height: 30px;
  }
  .mq-track {
    animation-duration: 60s;
  }
}

/* Screens stand out on a soft gradient panel and follow the theme of the site (board, 04/11) */
.live-box {
  --panel:
    radial-gradient(85% 120% at 12% 0%, #f6cdb8 0%, transparent 62%), radial-gradient(80% 120% at 100% 100%, #c6dccb 0%, transparent 60%),
    linear-gradient(160deg, #f1e4d3, #e9d8c4);
  --drop: 0 2px 6px rgb(43 33 28 / 0.1), 0 26px 60px rgb(74 42 26 / 0.28);
  padding: clamp(12px, 3.4cqi, 44px);
  border-radius: clamp(16px, 2.2cqi, 28px);
  background: var(--panel);
}
:root[data-theme='dark'] .live-box {
  --panel:
    radial-gradient(85% 120% at 12% 0%, #6a3524 0%, transparent 62%), radial-gradient(80% 120% at 100% 100%, #264536 0%, transparent 60%),
    linear-gradient(160deg, #2a211c, #1f1916);
  --drop: 0 2px 6px rgb(0 0 0 / 0.4), 0 26px 60px rgb(0 0 0 / 0.6);
}
.live-view {
  border-color: rgb(43 33 28 / 0.08);
  box-shadow: var(--drop);
}
:root[data-theme='dark'] .live-view {
  border-color: rgb(255 255 255 / 0.1);
  background: #1b1613;
}
:root[data-theme='dark'] .l1 .fr.s-b,
:root[data-theme='dark'] .l1 .fr.s-c,
:root[data-theme='dark'] .l2 .fr.s-b {
  background: #1b1613;
  box-shadow: 0 -10px 30px rgb(0 0 0 / 0.45);
}
.live-view .ptr {
  color: #2b211c;
}
.live .play {
  right: clamp(20px, 4.2cqi, 56px);
  bottom: clamp(20px, 4.2cqi, 56px);
}
.mq .play {
  right: 0;
  bottom: -38px;
}

/* Static screens (board, 04/11, to judge the page without motion). To bring the animated screens back, remove the class static-screens from <html>: nothing else changes. */
.static-screens .fr {
  display: none;
  animation: none;
}
.static-screens .fr.still-frame {
  display: block;
  opacity: 1;
  box-shadow: none;
}
.static-screens .fr img,
.static-screens .live-stage {
  animation: none;
}
.static-screens .live-view .ptr,
.static-screens .live-view .ring,
.static-screens .live:not(.mq) .play {
  display: none;
}
.static-screens .l2 .s-b img {
  transform: none;
}
.static-screens .l1 .live-view {
  aspect-ratio: 1200 / 912;
}
/* More air between the screens */
.feat {
  margin-top: clamp(5rem, 11cqi, 10rem);
}
.kick + .feat {
  margin-top: 1.5rem;
}
.feat .live {
  margin-top: 2rem;
}
.group {
  margin-top: clamp(5rem, 11cqi, 10rem);
  padding-top: clamp(5rem, 11cqi, 10rem);
}
.hero + .group {
  margin-top: clamp(5rem, 11cqi, 10rem);
}
.sec.join {
  margin-top: clamp(5rem, 11cqi, 10rem);
}
.hero-live {
  margin-top: clamp(3rem, 6cqi, 5rem);
}

/* The gradient panels run edge to edge, with no gap to the page sides (board, 04/11) */
.live:not(.mq),
.hero-live {
  --bleed: 100cqi;
  width: var(--bleed);
  max-width: none;
  margin-left: calc((100% - var(--bleed)) / 2);
}
.live:not(.mq) .live-box {
  padding: clamp(28px, 5cqi, 72px) max(20px, calc((100cqi - 1240px) / 2));
  border-radius: 0;
}
.static-screens .live .live-view {
  margin: 0 auto;
}

/* Bands (board, 04/11): no separator lines, one background; each text block is centred vertically in its band */
.wrap.home {
  --band: clamp(3.5rem, 7cqi, 6rem);
  padding-bottom: 0;
  isolation: isolate;
}
.group,
.hero + .group {
  margin: 0;
  padding: 0;
  border: 0;
}
.feat,
.kick + .feat {
  margin: 0;
}
.feat .live,
.hero-live {
  margin-top: 0;
}
.mq {
  margin-top: 2.25rem;
}
.hero {
  padding-bottom: 0;
}
.hero .hero-live {
  margin-top: clamp(4rem, 8cqi, 7rem);
}
.group > .kick {
  padding-top: var(--band);
}
.feat-text {
  padding: var(--band) 0;
}
.kick + .feat .feat-text {
  padding-top: 1.25rem;
}
.feat.center {
  padding: var(--band) 0;
}
.feat.center .feat-text {
  padding: 0;
}
.wrap.home > .sec,
.wrap.home > .sec.join {
  margin: 0;
  padding: var(--band) 0;
  border: 0;
}
@container (max-width: 599px) {
  .static-screens .l1 .live-view {
    aspect-ratio: 3 / 4;
  }
}

/* Same dark theme without JavaScript: head.js did not run, so <html> has no data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #1b1613;
    --paper: #241d19;
    --sunk: #2f2621;
    --ink: #f1e8de;
    --ink-2: #bcaea0;
    --rule: #3d332c;
    --field: #8c7c6f;
    --act: #f08a6c;
    --on-act: #1b1613;
    --act-soft: #43261d;
    --sage: #8fc4a5;
    --sage-soft: #1f3128;
    --ok: #7fd3a0;
    --ok-soft: #1d3326;
    --warn: #f2c06b;
    --warn-soft: #3b2d12;
    --err: #f39cbf;
    --err-soft: #3f1f2d;
    --ph: #3a322d;
    --sheet: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
  }
  :root:not([data-theme]) .live-box {
    --panel:
      radial-gradient(85% 120% at 12% 0%, #6a3524 0%, transparent 62%), radial-gradient(80% 120% at 100% 100%, #264536 0%, transparent 60%),
      linear-gradient(160deg, #2a211c, #1f1916);
    --drop: 0 2px 6px rgb(0 0 0 / 0.4), 0 26px 60px rgb(0 0 0 / 0.6);
  }
  :root:not([data-theme]) .live-view {
    border-color: rgb(255 255 255 / 0.1);
    background: #1b1613;
  }
  :root:not([data-theme]) .live-view .lt {
    display: none;
  }
  :root:not([data-theme]) .live-view .dk {
    display: block;
  }
  :root:not([data-theme]) .l1 .fr.s-b,
  :root:not([data-theme]) .l1 .fr.s-c,
  :root:not([data-theme]) .l2 .fr.s-b {
    background: #1b1613;
    box-shadow: 0 -10px 30px rgb(0 0 0 / 0.45);
  }
}

/* From docs/ux/assets/components.css (shared rules of the mock-ups) */
/* Checkbox in error: the box itself turns red, no red frame around it (board, 03/11, PLA-1524). The message below stays (colour is never alone). */
.field.is-err input[type='checkbox'],
input[type='checkbox'][aria-invalid='true'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  border: 2px solid var(--err);
  border-radius: 4px;
  background: var(--err-soft);
  outline: none;
  cursor: pointer;
}
.field.is-err input[type='checkbox']:focus-visible,
input[type='checkbox'][aria-invalid='true']:focus-visible {
  outline: 2px solid var(--act);
  outline-offset: 2px;
}
:is(
    input:not(
      [type='checkbox'],
      [type='radio'],
      [type='range'],
      [type='button'],
      [type='submit'],
      [type='reset'],
      [type='file'],
      [type='color'],
      [type='hidden'],
      [type='image']
    ),
    textarea,
    select
  ):not(.bare):focus,
.otp-box:focus,
.field-box:focus-within {
  outline: none !important;
  border-color: var(--act, var(--primary)) !important;
  box-shadow: inset 0 0 0 1px var(--act, var(--primary)) !important;
}
:is(input, textarea, select).bare:focus {
  outline: none !important;
  box-shadow: none !important;
}
:is(input, textarea, select)[aria-invalid='true']:not(.bare):focus,
.otp-box[aria-invalid='true']:focus,
:is(.is-err, .invalid) :is(input:not([type='checkbox'], [type='radio']), textarea, select):not(.bare):focus,
.field-box:is([aria-invalid='true'], .is-err):focus-within {
  border-color: var(--err, var(--destructive)) !important;
  box-shadow: inset 0 0 0 1.5px var(--err, var(--destructive)) !important;
}
.reassure {
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2, var(--muted-foreground));
}
.reassure p,
.reassure li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.reassure p + p {
  margin-top: 0.35rem;
}
.reassure a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reassure.center {
  text-align: center;
}
@media (max-width: 380px) {
  .reassure {
    font-size: 12px;
  }
}

/* Field height (components.css, board, 03/11, PLA-1527): 40 px on a desktop, 44 px on a phone */
:root {
  --field-h: 40px;
}
@media (max-width: 600px) {
  :root {
    --field-h: 44px;
  }
}
.input {
  min-height: var(--field-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* Static site additions: not visible in the mock-up */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--paper);
  border-radius: var(--r);
}
.skip-link:focus {
  top: 0.5rem;
}
.btn-busy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.captcha-slot.is-open {
  margin-bottom: 1rem;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font: 15px/1.5 var(--ui);
}
.prose .table-scroll {
  overflow-x: auto;
}
.prose th,
.prose td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--sunk);
}
.prose ol {
  padding-left: 1.3rem;
}
.prose blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-2);
}
.prose li:has(> .task-box) {
  list-style: none;
  margin-left: -1.3rem;
}

/* Under 768 px, each static screen is its 390 px version, whole and readable: the frame follows the image (board, 04/11, addition to version 18) */
@container (max-width: 767px) {
  .static-screens .live:not(.mq) .live-view {
    max-width: 430px;
    aspect-ratio: auto;
    container-type: normal;
  }
  .static-screens .live-stage,
  .static-screens .fr.still-frame,
  .static-screens .live-view img {
    position: static;
  }
}

/* The theme selector needs JavaScript: head.js sets .js on <html>, before the first paint */
html:not(.js) .theme {
  display: none;
}
html:not(.js) .head-cta {
  margin-left: auto;
}
/* Code of the guides, coloured at build time (markdown.mjs): theme tokens, so both themes and the AA contrast of the design system apply */
.tok-keyword {
  color: var(--act);
}
.tok-string {
  color: var(--sage);
}
.tok-constant {
  color: var(--warn);
}
.tok-function {
  color: var(--err);
}
.tok-comment {
  color: var(--ink-2);
  font-style: italic;
}