/* The install page, in every language it is published in.
 *
 * Until 18/09/2026 this block lived INSIDE each language's HTML file, which meant every fix had to
 * be made twice and the file said so out loud ("the reason both needed it is that each page carries
 * its own copy of this style block"). A contrast fix in September was indeed applied twice. One
 * stylesheet, so a third language costs text and nothing else.
 */
  /* One page, read once, on the device being set up: the design system, and nothing extra. */
  body { background:var(--wash); }
  .page { max-width:760px; margin:0 auto; padding:26px 18px 60px; }
  .top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
  .top img { height:42px; width:auto; display:block; }
  .top a { font-size:14px; color:var(--muted); text-decoration:none; }
  .top a:hover { color:var(--ink); }
  .hero h1 { font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
  .hero p { margin-top:10px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:60ch; }
  .get { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 34px; }
  .get .btn { min-height:52px; padding:12px 26px; font-size:17px; border-radius:var(--r); }
  .get .btn[aria-disabled="true"] { background:var(--wash-3); color:var(--muted); pointer-events:none; box-shadow:none; }
  .ver { font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
  h2 { font-size:19px; font-weight:600; letter-spacing:-.014em; margin-bottom:4px; }
  .card > .lead { font-size:14.5px; color:var(--muted); margin-bottom:14px; }
  /* the steps really are a sequence, so they are numbered */
  ol.steps { list-style:none; counter-reset:s; }
  ol.steps li { counter-increment:s; position:relative; padding-inline-start:38px; padding-block:9px; line-height:1.6; font-size:15px; }
  ol.steps li + li { border-top:1px solid var(--line); }
  ol.steps li::before { content:counter(s); position:absolute; inset-inline-start:0; top:10px; width:25px; height:25px;
    display:grid; place-items:center; border-radius:50%; background:var(--brand-tint); border:1px solid var(--brand-line);
    color:var(--brand-deep); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
  code { background:var(--wash-2); border:1px solid var(--line); padding:2px 7px; border-radius:var(--r-xs);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; direction:ltr; unicode-bidi:embed; display:inline-block; }
  /* .help is a block note everywhere else in the admin, but inside a step it is a <span>, so its
     padding was painting over the line above it — visible in both languages on step 7. */
  ol.steps .help { display:block; margin:10px 0 2px; }
  .card.quiet { background:transparent; border-style:dashed; }
  .card.quiet code { background:var(--paper); }
  /* the desktop shortcut: the icon at the size it will really be on a desktop */
  .dsk { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
  .dsk img { width:56px; height:56px; }
  .dsk .nm { font-size:15px; font-weight:600; }
  .dsk .sub { font-size:13.5px; color:var(--muted); margin-top:2px; }
  h3.sub-h { font-size:14px; font-weight:600; color:var(--ink-2); margin:16px 0 2px; }
  /* one action row per platform, so no platform is left as prose while another gets a button */
  .acts { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 2px; }
  .acts-note { font-size:13.5px; color:var(--muted); line-height:1.65; margin:8px 0 2px; }
  /* 🔴 1.4.3 contrast (AA), audit 17/09/2026: var(--faint) on this background measured 4.24:1 and the
     criterion asks 4.5:1. The token is left alone — it is used where the text is larger or the ground
     is different — and only this line is darkened. */
  .foot-note { margin-top:26px; font-size:13.5px; color:var(--muted); text-align:center; }