/* ──────────────────────────────────────────────────────────────────────
   NIGHT — the whole page on the dark ground, rather than bands of it.

   landing.css is written light-first: white bands with `.dk` sections cut
   into them, and an ink scale that reads on both. A page loading this
   after it keeps every one of those rules and simply redefines the scale,
   so a band that was white is night, ink is near-white, and the hairlines
   are the ones that survive on a dark ground.

   It is a stylesheet rather than a block inside one page because two pages
   now want it — /pricing and /app — and "the same design" has to
   mean the same file, or it means the same design until somebody edits one
   of them.

   Load order is the whole contract: landing.css, then this, then the
   page's own sheet.
   ────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --ink:  #F5F6FA;
  --ink2: #C3C7D1;
  --ink3: #858B9C;

  --line:  #2A2E3A;
  --line2: #20242E;
  /* the one ground that is not --night: the band that was var(--soft) in
     the light scale, which has to stay a shade apart from its neighbours */
  --soft:  #0E1018;

  --dline: #292D3A;
  --dink:  #9298A8;
  --dink2: #D0D4DE;
}

/* every band, light or dark, is now the same ground */
body,
.w,
.w.dk {
  background: var(--night);
  color: var(--ink);
}

/* the dotted rule was drawn for a white ground and disappears on this one */
.prule { background-image: linear-gradient(90deg, #343946 4px, transparent 4px); }

/* The stepped shoulder marks where night begins and ends. On a page that is
   night throughout there is no edge for it to cut, and the teeth read as a
   stray bar across the page. */
.step { display: none; }

/* a card is a shade above the ground, not a white rectangle on it */
main .tier { background: var(--night2); border-color: var(--line); }

/* .b-dark was the button for a white band: ink on white. Inverted, it is
   the light button, and the ghost beside it already works on night. */
.b-dark { background: var(--ink); color: var(--night); }
.b-dark:hover { background: #DDE0EA; }

.qa p { color: var(--ink2); }