/* How I Land, information pages: the app's document style (as on its privacy page), kept in its own file so the app
   and these pages can be deployed apart. The booth's enamel blue on top, the plate below.
   Type: Barlow and Barlow Semi Condensed (SIL OFL, served from /info/fonts). Two sizes a page, 34 and 17; two styles,
   plate type (Barlow Semi Condensed 700) for what names or acts, text (Barlow 500) for the rest. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2"); }

:root {
  --booth: #1e4b94;          /* enamel blue: white text 8.4:1 */
  --booth-deep: #163a74;
  --booth-ink: #c9d6ee;      /* quiet text on blue: 5.8:1 */
  --plate: #f5f6f8;
  --plate-line: rgba(18, 20, 23, 0.12);
  --ink: #121417;            /* 17:1 on a plate */
  --ink-2: #4a5468;          /* 7:1 */
  --r: 10px;
  --side: 16px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-plate: "Barlow Semi Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--plate); }
body {
  margin: 0;
  font-family: var(--font); font-weight: 500; font-size: 17px;
  background: var(--plate); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, strong, b, dt { font-family: var(--font-plate); font-weight: 700; }
::selection { background: rgba(30, 75, 148, 0.24); }
:focus-visible { outline: 2px solid var(--booth); outline-offset: 2px; border-radius: 4px; }

.doc__mast { background: var(--booth); color: #fff; padding: calc(var(--safe-top) + 18px) var(--side) 26px; }
.doc__mast-in, .doc main { max-width: 37rem; margin: 0 auto; }
.doc__mast-in { max-width: calc(37rem - 2 * var(--side)); }
.doc .doc__name { display: inline-block; margin-bottom: 18px; font-family: var(--font-plate); font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; }
.doc h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.doc .doc__meta { margin: 0; color: var(--booth-ink); line-height: 1.45; text-wrap: pretty; }
.doc__mast, .doc main { font-size: 17px; }
.doc main { padding: 8px var(--side) calc(var(--safe-bottom) + 48px); line-height: 1.55; }
.doc h2 { margin: 32px 0 8px; font-size: 17px; line-height: 1.3; }
.doc h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.4; }
.doc p, .doc li { margin: 0 0 10px; }
.doc main > p:first-child { margin-top: 18px; }
.doc ul, .doc ol { margin: 0 0 10px; padding-left: 1.3em; }
.doc li::marker { color: var(--ink-2); }
.doc ol > li::marker { font-family: var(--font-plate); font-weight: 700; color: var(--ink); }

/* One block per item, as the privacy page stacks its data. */
.doc__data { margin: 8px 0 14px; }
.doc main > .doc__data:first-child { margin-top: 18px; }
.doc__item { padding: 12px 0; border-bottom: 1px solid var(--plate-line); }
.doc__item:first-child { border-top: 1px solid var(--plate-line); }
.doc__item p:last-child { margin-bottom: 0; }
.doc__item p + p { color: var(--ink-2); }
.doc__item ul { margin: 6px 0 0; }
.doc__item li:last-child { margin-bottom: 0; }
.doc__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; }
.doc__facts dd { margin: 0; }

.doc a { color: var(--booth); text-underline-offset: 3px; }
.doc__mast a:focus-visible, .doc__mast :focus-visible { outline-color: #fff; }

/* The one thing to do: open the app. A plate button in the booth's blue. */
.doc .doc__go {
  display: block; margin: 20px 0 8px; padding: 0 16px; height: 56px; line-height: 56px; border-radius: var(--r);
  background: var(--booth); color: #fff; text-align: center; text-decoration: none;
  font-family: var(--font-plate); font-size: 17px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.doc .doc__go:hover { background: var(--booth-deep); }
.doc .doc__note { color: var(--ink-2); text-align: center; }

.doc .doc__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 40px 0 0; padding: 16px 0 0; border-top: 1px solid var(--plate-line); list-style: none; }
.doc .doc__nav li { margin: 0; }
.nowrap { white-space: nowrap; }