/* easyqbr.com -- the public apex.
   No webfont, no script, no inline style: the Content-Security-Policy on this
   distribution is default-src 'none' with img-src 'self' and style-src 'self',
   so anything third-party is blocked rather than merely discouraged.
   There is no animation anywhere, so prefers-reduced-motion has nothing to
   undo. */

:root {
  --midnight: #161826;
  --slate: #232532;
  --paper: #e9e9ed;
  --mist: #cfd3e5;
  --steel: #75798c;
  --blurple: #9184d9;

  --gutter: clamp(20px, 8vw, 220px);
  --stack: clamp(56px, 10vh, 108px);

  /* Steel measures 4.08:1 on Midnight, so it is a BORDER colour here and never
     a text colour. Body copy is Mist (11.8:1) and the accent line is Blurple
     (5.5:1). */
  --hairline: rgba(117, 121, 140, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  /* Two rows: the content takes the slack and sits a little above the optical
     centre of it, the footer stays on the floor. */
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--stack) var(--gutter) clamp(28px, 5vh, 48px);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper);

  background-color: var(--midnight);
  /* Blurple as a glow, not a flood: two very low-alpha radials, one off the top
     centre, behind the logo, and one far off the bottom right, over the Midnight ground.
     The alphas are CAPPED BY MEASUREMENT, not by eye. At full strength they
     lighten the ground to #25253b and #212138, where the lightest text colour
     in use -- Blurple, on the "Coming soon." line -- still measures 4.63:1 and
     4.86:1. Raising either alpha puts a text colour under 4.5:1 somewhere on
     the page, and the peak of each gradient is off-canvas so nothing on screen
     would show it. */
  background-image:
    radial-gradient(
      900px 560px at 50% -10%,
      rgba(145, 132, 217, 0.12),
      rgba(145, 132, 217, 0) 62%
    ),
    radial-gradient(
      620px 460px at 108% 112%,
      rgba(93, 82, 148, 0.16),
      rgba(93, 82, 148, 0) 58%
    );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

main {
  align-self: center;
  justify-self: center;
  text-align: center;
  margin-bottom: clamp(0px, 8vh, 96px);
  max-width: 52rem;
}

img {
  max-width: 100%;
}

/* The artwork carries its own clear space inside the viewBox, so no padding is
   added on top of it. 1200x344 at this height stays well above the 90px
   minimum width the brand README sets for the full logo. */
.logo {
  display: block;
  /* Front and centre (the owner, 2026-09-18). The source is 344px tall, so
     it stays sharp on a 2x screen up to 172px; 128px is the ceiling here. */
  height: clamp(60px, 11vw, 128px);
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(44px, 7vh, 76px);
}

h1 {
  margin: 0 auto;
  max-width: 19ch;
  font-size: clamp(2.05rem, 5.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.021em;
  color: var(--paper);
}

.lede {
  margin: clamp(26px, 4vh, 38px) auto 0;
  max-width: 55ch;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.68;
  color: var(--mist);
}

.soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: clamp(40px, 6vh, 64px) 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.035em;
  color: var(--blurple);
}

.soon .rule,
.soon::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(28px, 6vw, 56px);
  height: 1px;
  background: var(--blurple);
}

footer {
  text-align: center;
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--mist);
}

footer p {
  margin: 0;
}

a {
  color: var(--blurple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--paper);
  text-decoration-color: var(--blurple);
}

a:focus-visible {
  outline: 2px solid var(--blurple);
  outline-offset: 3px;
  border-radius: 2px;
}

.back {
  display: inline-block;
  margin: clamp(30px, 4.5vh, 42px) 0 0;
  font-size: 1rem;
}

.site-links {
  margin: 10px 0 0;
}

.site-links a {
  /* Quiet: the footer is not where anyone is being sent, it is where the two
     documents can always be found. */
  text-decoration-color: var(--hairline);
}

@media (max-width: 560px) {
  :root {
    --gutter: 20px;
    --stack: 56px;
  }

  body {
    background-attachment: scroll;
  }

  h1 {
    max-width: none;
  }
}

/* ------------------------------------------------------------------------
   THE READING PAGES -- /terms and /privacy, generated by build_legal.py.

   Everything below is scoped to `body.doc`, so the coming-soon page and the
   404 are untouched: those two were approved by eye and their rules above are
   not to be disturbed. The ground, the ramp and the hairline are shared -- a
   legal page on a different background would read as a different site.

   Colours: Paper for headings, Mist for body copy (11.8:1 on Midnight),
   Blurple for links and rules only. ⚠ Steel measures 4.08:1 and is a BORDER
   colour here, never text -- which is why the table's own hairlines are Steel
   and every word in it is Mist or Paper.
   ------------------------------------------------------------------------ */

/* ⚠⚠ MEASURED AT 360px, AND THE MEASURE IS ON THE TRACK RATHER THAN ON `main`
   ON PURPOSE. Two ways of writing this both scroll the page sideways:
     - `max-width: 70ch` on a `justify-self: center` item, because a centred
       grid item is shrink-to-fit and shrink-to-fit floors at the content's
       MIN-content -- which the sub-processor table's `min-width` pins at
       544px, dragging every paragraph on the privacy page off a 345px screen;
     - `justify-self: stretch` plus `margin-inline: auto` to re-centre it,
       because an auto margin CANCELS stretch and returns it to shrink-to-fit.
   A `minmax(0, 70ch)` track has both halves: its 0 minimum lets it shrink to
   the viewport, its 70ch maximum is the reading measure, and `justify-content`
   centres the track itself. The item then simply fills it. */
.doc {
  grid-template-columns: minmax(0, 70ch);
  justify-content: center;
}

.doc main {
  /* Reading, not landing: the column starts at the top of the page and its
     text is left-aligned. The measure is the track's, above. */
  align-self: start;
  justify-self: stretch;
  text-align: left;
  max-width: none;
  margin-bottom: 0;
}

.doc-home {
  display: inline-block;
  text-decoration: none;
  margin-bottom: clamp(32px, 5vh, 48px);
}

.doc-logo {
  display: block;
  /* Smaller than the landing page's: here it is a way back, not the subject. */
  height: clamp(34px, 5vw, 46px);
  width: auto;
  margin: 0;
}

.doc h1 {
  /* The landing h1 is display-sized and clamped to 19ch; a document title is
     neither. Weight stays 500 -- hierarchy here is size and space. */
  margin: 0 0 clamp(26px, 4vh, 38px);
  max-width: none;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.doc h2 {
  margin: clamp(38px, 5vh, 52px) 0 12px;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--paper);
}

.doc h3 {
  margin: clamp(26px, 3.5vh, 34px) 0 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--paper);
}

.doc p {
  margin: 0 0 16px;
  line-height: 1.72;
  color: var(--mist);
  /* A long address or e-mail must wrap rather than widen the page. */
  overflow-wrap: break-word;
}

.doc strong {
  font-weight: 600;
  color: var(--paper);
}

.doc ul {
  margin: 0 0 16px;
  padding-left: 1.25em;
  color: var(--mist);
}

.doc li {
  margin-bottom: 10px;
  line-height: 1.72;
}

.doc li::marker {
  color: var(--blurple);
}

/* ⚠ The sub-processor table scrolls INSIDE this box. Letting it widen the page
   instead would give every narrow screen a horizontal scrollbar on a document
   whose text fits perfectly well. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}

.doc thead th {
  font-weight: 500;
  color: var(--paper);
  background-color: var(--slate);
}

.doc td {
  color: var(--mist);
}

.doc tbody tr:last-child th,
.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc footer {
  margin-top: clamp(56px, 9vh, 96px);
}