/* qkvm.com and docs.qkvm.com.
   Plain and quiet: the text in the typeface of the device it is read on, a console typeface
   for what is typed or measured, one accent colour, and the colours of the program where they
   mean what they mean in it (green is online, amber has no signal, red is offline). Light, dark,
   or as the device is set. Nothing moves, and nothing is loaded from elsewhere: the console
   typeface is in fonts/, and there are no pictures at all. */

@font-face { font-family: "QKVM Mono"; src: url("fonts/qkvm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QKVM Mono"; src: url("fonts/qkvm-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "QKVM Mono"; src: url("fonts/qkvm-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* --- colours: light, and dark for a device set to dark or a reader who chose it --- */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --panel: #ffffff;
  --line: #e1e6ed;
  --line-strong: #c8d0db;
  --text: #0f1620;
  --muted: #515e6f;
  --faint: #76828f;
  --accent: #1f5fd0;
  --accent-hover: #184eb0;
  --accent-text: #1a55c0;
  --accent-soft: rgba(31, 95, 208, .08);
  --ok: #17885a;
  --warn: #a86400;
  --bad: #c43838;
  --code-bg: #f3f5f8;
  --code-text: #17202b;
  --shadow: 0 1px 2px rgba(15, 22, 32, .05), 0 18px 40px -18px rgba(15, 22, 32, .22);
  --grid: rgba(15, 22, 32, .05);
  --glow: rgba(31, 95, 208, .11);
  --radius: 8px;
  --max: 1120px;
  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "QKVM Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0e13;
    --bg-soft: #0f131a;
    --panel: #131922;
    --line: #212a36;
    --line-strong: #323e4e;
    --text: #e9edf3;
    --muted: #9ba7b7;
    --faint: #6f7c8d;
    --accent: #3f7fe8;
    --accent-hover: #5a93f0;
    --accent-text: #82adf7;
    --accent-soft: rgba(90, 147, 240, .12);
    --ok: #3fcf8e;
    --warn: #f0b44a;
    --bad: #ff6b6b;
    --code-bg: #0f141c;
    --code-text: #dbe4f0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .7);
    --grid: rgba(233, 237, 243, .045);
    --glow: rgba(63, 127, 232, .17);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e13;
  --bg-soft: #0f131a;
  --panel: #131922;
  --line: #212a36;
  --line-strong: #323e4e;
  --text: #e9edf3;
  --muted: #9ba7b7;
  --faint: #6f7c8d;
  --accent: #3f7fe8;
  --accent-hover: #5a93f0;
  --accent-text: #82adf7;
  --accent-soft: rgba(90, 147, 240, .12);
  --ok: #3fcf8e;
  --warn: #f0b44a;
  --bad: #ff6b6b;
  --code-bg: #0f141c;
  --code-text: #dbe4f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .7);
  --grid: rgba(233, 237, 243, .045);
  --glow: rgba(63, 127, 232, .17);
}

/* --- the page --- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
code, pre, kbd { font-family: var(--mono); }
.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 30; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 8px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; stroke: none; }

/* --- top bar --- */

.nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.nav nav { display: flex; gap: 4px; margin-left: 10px; margin-right: auto; }
.nav nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.nav nav a:hover { color: var(--text); background: var(--accent-soft); }
.nav .wrap > .icon, .social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); }
.nav .wrap > .icon:hover, .social a:hover { border-color: var(--line-strong); color: var(--text); }
.nav .wrap > .icon, .nav .wrap > .btn { margin-left: -8px; }
.nav .wrap > .icon svg, .social svg { width: 17px; height: 17px; }
@media (max-width: 860px) { .nav nav .wide { display: none; } .nav nav { margin-left: 0; } }
@media (max-width: 640px) { .nav .btn.small { display: none; } }
@media (max-width: 520px) { .nav .wrap > .icon { display: none; } .nav .wrap { gap: 10px; } }

/* Light, dark, or as the device is set. Shown once the script that works it has run. */
.theme { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
.theme[hidden] { display: none; }
.theme button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; }
.theme button:hover { color: var(--text); }
.theme button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
.theme svg { width: 15px; height: 15px; }
.theme span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- buttons and links that lead on --- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--faint); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.btn.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; }
.btn svg { width: 17px; height: 17px; stroke-width: 2; }
.more { font-size: 15px; font-weight: 600; text-decoration: none; }
.more::after { content: " \2192"; }
.more:hover { text-decoration: underline; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* --- the first screen --- */

.hero { position: relative; isolation: isolate; padding: 88px 0 0; overflow: hidden; text-align: center; background: linear-gradient(var(--bg) 40%, var(--bg-soft)); }
/* Behind it, at the top only: squared paper and a little light, both fading out. They do not move. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 520px;
  background:
    radial-gradient(52% 62% at 50% 0%, var(--glow), transparent 72%),
    linear-gradient(var(--grid) 1px, transparent 1px) 50% -1px / 56px 56px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 50% 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(62% 100% at 50% 0%, #000 25%, transparent 76%);
  mask-image: radial-gradient(62% 100% at 50% 0%, #000 25%, transparent 76%);
}
.eyebrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; color: var(--accent-text); font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span + span::before { content: "\00b7"; margin: 0 12px; }
.hero h1 { margin: 26px auto 0; font-size: clamp(38px, 6.2vw, 68px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.hero h1 span { display: block; }
@media (max-width: 600px) { .hero h1 span { display: inline; } }
.lede { max-width: 62ch; margin: 22px auto 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; text-wrap: pretty; }
.hero .cta { justify-content: center; margin-top: 34px; }
.hero .cta .btn { height: 48px; padding: 0 22px; font-size: 16px; }
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; margin-top: 30px; padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 1px 2px rgba(15, 22, 32, .05); color: var(--muted); font: 400 13px var(--mono); }
.meta b { color: var(--text); font-weight: 600; }
.meta span::before { content: "\00b7"; margin: 0 10px; color: var(--faint); }
.fine { margin-top: 18px; color: var(--muted); font-size: 14px; }
/* On a phone the three words stay on one line, and what is in the box goes one under the other. */
@media (max-width: 600px) {
  .hero { padding-top: 60px; }
  .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .eyebrow span + span::before { margin: 0 8px; }
  .meta { flex-direction: column; gap: 2px; padding: 10px 20px; }
  .meta span::before { content: none; }
}
.fine a { margin-left: 4px; font-weight: 600; text-decoration: none; }
.fine a:hover { text-decoration: underline; }

/* What the program looks like, drawn with what a stylesheet has. The screens in it are dark in
   both themes, as they are in the program: they are video, not part of the page. */
.product { margin: 60px 0 0; }
.product figcaption { padding: 14px 0 0; color: var(--faint); font-size: 13.5px; }
.app-chrome { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.app-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.app-chrome span { position: absolute; left: 50%; translate: -50%; padding: 2px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--faint); font: 400 11.5px var(--mono); }
.app { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.app-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.app-bar > b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.app-bar p { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.app-bar p span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 5px; }
.app-bar p .on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line-strong); }
.app-bar em { margin-left: auto; width: 170px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--faint); font-style: normal; }
.app-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; background: var(--bg-soft); }
.tile { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; }
.tile > p { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; font-size: 12px; white-space: nowrap; }
.tile > p b { font-weight: 600; }
.tile > p span { margin-left: auto; overflow: hidden; color: var(--faint); font: 400 11px var(--mono); text-overflow: ellipsis; }
.tile > p i, .app-bar p i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
[data-state="no_signal"] > p i, .app-bar [data-state="no_signal"] i { background: var(--warn); }
[data-state="offline"] > p i, .app-bar [data-state="offline"] i { background: var(--bad); }
.scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0f18; color: #e8eef7; }
.scr.cli { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 9%; }
.scr.cli i { height: 3px; border-radius: 2px; background: #5b6b84; }
.scr.cli i:nth-child(1) { width: 46%; background: #3fcf8e; } .scr.cli i:nth-child(2) { width: 78%; } .scr.cli i:nth-child(3) { width: 61%; }
.scr.cli i:nth-child(4) { width: 84%; } .scr.cli i:nth-child(5) { width: 37%; } .scr.cli i:nth-child(6) { width: 12%; background: #e8eef7; }
.scr.dash { display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 8px; padding: 12px 14px; background: #111827; }
.scr.dash i { border-radius: 3px; background: linear-gradient(to top, #2f6fe0 var(--fill, 40%), #1c2536 var(--fill, 40%)); }
.scr.dash i:nth-child(2) { --fill: 72%; } .scr.dash i:nth-child(3) { --fill: 24%; } .scr.dash i:nth-child(4) { --fill: 58%; }
.scr.desk { background: linear-gradient(135deg, #1d4f9c, #5b3aa8 70%, #8a3f9c); }
.scr.desk i { position: absolute; inset: 16% 34% 30% 10%; border-radius: 3px; background: #f4f6fa; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.scr.desk u { position: absolute; inset: auto 0 0 0; height: 9%; background: rgba(10, 15, 24, .7); }
.scr.lock { display: grid; place-content: center; gap: 4%; background: linear-gradient(160deg, #16233b, #0a0f18); text-align: center; }
.scr.lock strong { font-size: clamp(14px, 2.4vw, 26px); font-weight: 300; line-height: 1; }
.scr.lock span { color: #9fb0c8; font-size: clamp(7px, .9vw, 10px); }
.scr.veil { display: grid; place-content: center; gap: 4px; background: #0d121b; text-align: center; }
.scr.veil strong { font-size: clamp(10px, 1.2vw, 13px); font-weight: 600; }
.scr.veil span { color: #8493a8; font-size: clamp(7px, .85vw, 10px); }
.scr.srv { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-content: center; gap: 6% 9%; padding: 0 9%; background: linear-gradient(120deg, rgba(63, 207, 142, .13), transparent 55%), #0a0f18; }
.scr.srv.off { background: linear-gradient(120deg, rgba(255, 107, 107, .16), transparent 55%), #0a0f18; }
.scr.srv strong { grid-column: 1 / -1; font-size: clamp(14px, 2.2vw, 24px); font-weight: 650; line-height: 1; }
.scr.srv strong::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .35em; border-radius: 50%; background: #3fcf8e; vertical-align: .12em; }
.scr.srv span { display: grid; gap: 1px; color: #8493a8; font-size: clamp(6px, .68vw, 8.5px); letter-spacing: .06em; text-transform: uppercase; }
.scr.srv b { color: #e8eef7; font-size: clamp(8px, .95vw, 11.5px); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.scr.srv b.bad { color: #ff7b7b; } .scr.srv b.warn { color: #f0b44a; }
.proof { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px 36px; padding: 40px 0 52px; }
.proof p { color: var(--faint); font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.proof ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; margin: 0; padding: 0; list-style: none; }
.proof li { color: var(--muted); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
@media (max-width: 860px) {
  .app-wall { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(n+7) { display: none; }
  .app-bar em, .app-bar p span:nth-child(n+3) { display: none; }
}

/* --- in short --- */

.facts { border-top: 1px solid var(--line); background: var(--bg); }
.facts dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts dl > div { padding: 30px 26px; border-left: 1px solid var(--line); }
.facts dl > div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font-size: 15px; font-weight: 700; }
.facts dd { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .facts dl { grid-template-columns: 1fr 1fr; }
  .facts dl > div { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .facts dl > div:nth-child(-n+2) { border-top: 0; }
  .facts dl > div:nth-child(odd) { padding-right: 20px; }
}
@media (max-width: 520px) { .facts dl { grid-template-columns: 1fr; } .facts dl > div:nth-child(2) { border-top: 1px solid var(--line); } }

/* --- sections --- */

section { padding: 88px 0; border-top: 1px solid var(--line); }
section.hero { padding-bottom: 0; border-top: 0; }
section.facts { padding: 0; }
section.soft { background: var(--bg-soft); }
.kicker { color: var(--accent-text); font: 600 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
h2 { max-width: 22ch; margin-top: 12px; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; }
.intro { max-width: 64ch; margin-top: 16px; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.after { margin-top: 28px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.cards article { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cards svg { width: 36px; height: 36px; padding: 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
.cards h3 { margin-top: 16px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.cards p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* --- how it is protected: what somebody gets --- */

.threats { margin: 44px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.threats > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 28px; padding: 20px 24px; border-top: 1px solid var(--line); }
.threats > div:first-child { border-top: 0; }
.threats dt { font-size: 16px; font-weight: 650; line-height: 1.4; }
.threats dt span { display: block; color: var(--faint); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.threats dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.threats dd b { color: var(--ok); font-weight: 650; }
@media (max-width: 760px) { .threats > div { grid-template-columns: 1fr; gap: 8px; } }

/* --- install --- */

.term { max-width: 760px; margin-top: 40px; }
.tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
.tabs[hidden] { display: none; }
.tabs button { padding: 6px 14px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
pre { position: relative; margin: 12px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--code-bg); color: var(--code-text); font-size: 14px; line-height: 1.75; tab-size: 2; }
pre[hidden] { display: none; }
pre .cmd::before { content: "$ "; color: var(--faint); user-select: none; }
pre .note { color: var(--faint); }
pre .note::before { content: "# "; }
pre .copy { position: absolute; top: 9px; right: 9px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--muted); font: 600 12px var(--sans); cursor: pointer; }
pre .copy:hover { color: var(--text); border-color: var(--faint); }
:not(pre) > code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--code-bg); font-size: .9em; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 980px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { padding: 0 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); font: 600 12.5px var(--mono); }
.steps strong { display: block; color: var(--text); font-weight: 650; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 24px 0; } }

/* --- what it works with --- */

.fits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 44px 0 0; padding: 0; list-style: none; }
.fits li { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.fits b { display: block; font-size: 15.5px; font-weight: 650; }
.fits span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) { .fits { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .fits { grid-template-columns: 1fr 1fr; } }
.minor { margin-top: 40px; color: var(--text); font-size: 15px; font-weight: 650; }
.limits { max-width: 78ch; margin: 12px 0 0; padding: 0 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.limits li { margin: 8px 0; }

/* --- the way out --- */

.closing { text-align: center; }
.closing h2, .closing .intro { margin-inline: auto; }
.closing .cta { justify-content: center; margin-top: 30px; }

/* --- the foot of the page, laid out as on the other sites of the house --- */

.foot { border-top: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); font-size: 14.5px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding: 56px 0 46px; }
.foot-brand p { max-width: 36ch; margin-top: 14px; line-height: 1.6; }
.foot-brand .social { display: flex; gap: 8px; margin-top: 18px; }
.foot nav { display: grid; align-content: start; gap: 11px; }
.foot h3 { margin-bottom: 5px; color: var(--text); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
.foot-legal { padding: 24px 0 30px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; }
.foot-legal > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 18px; }
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--text); }
.foot-legal b { font-weight: 650; white-space: nowrap; }
.foot-legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; padding: 44px 0 36px; } .foot-brand { grid-column: 1 / -1; } }

/* --- a page that is not there --- */

.lost { display: grid; place-items: center; min-height: 62vh; padding: 60px 0; text-align: center; }
.lost h1 { margin-top: 14px; font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -.03em; }
.lost .lede { margin-top: 14px; }
.lost .cta { justify-content: center; margin-top: 28px; }