/* ===== Muletto v2 - greyscale, two registers =====

   A separate sheet, so the live site is untouched.

   **No colour at all.** Black, white and grey. Everything a colour normally
   does has to be done by weight, size, rule and space instead, which is harder
   and much harder to fake - the generic look leans almost entirely on an accent
   hue and a tint. Take the hue away and the structure has to actually work.

   **Two registers.** Plain language on paper, then the specification on near
   black. The change of ground is the design, not decoration on top of it.

   ---- type ----

   Self-hosted, which is not a preference: the CSP sets font-src to 'self', and
   a stylesheet link to a font CDN would hand every visitor's IP address to a
   third party on a site whose entire claim is that nothing leaves the machine.
   41 KB for the whole range, served from our own origin.

   **Host Grotesk**, and nothing else. A uniwidth grotesque drawn for user
   interfaces: letter widths do not change between weights, so bolding a word in
   a table does not shift the column. One variable file covers 300-800, which is
   the whole reason one family is enough - headings get size and weight rather
   than a second typeface.

   A display serif sat here first and came off. High-contrast editorial serifs
   are the house style of generated landing pages now, which is the exact thing
   this page is trying not to look like.

   No monospace anywhere except real code. Small tracked-out uppercase mono, as
   an eyebrow label or a section number, is the single most recognisable tell of
   a page that was assembled from a template, and it was all over this one. */

@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/host-grotesk-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/host-grotesk-var-italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --g-paper: #ffffff;
  --g-paper-2: #f6f6f6;
  --g-ink: #0c0c0c;
  --g-body: #3c3c3c;
  --g-mute: #767676;
  --g-faint: #9a9a9a;
  --g-line: #e0e0e0;
  --g-line-2: #eeeeee;
  --g-dark: #111111;
  --g-dark-2: #1b1b1b;
  --g-dark-line: #2e2e2e;
  --g-dark-mute: #909090;
  --g-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Real code only. Never a label, a number or a table cell. */
  --g-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.v2 { margin: 0; background: var(--g-paper); color: var(--g-body);
  font-family: var(--g-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
.v2 * { box-sizing: border-box; }
/* One family, so headings separate from body by weight and size alone. Host
   Grotesk holds its widths across weights, so 700 at display size stays as
   even as the 400 underneath it and can take real negative tracking. */
.v2 h1, .v2 h2, .v2 h3 { color: var(--g-ink); margin: 0; line-height: 1.06;
  font-weight: 700; letter-spacing: -.032em; }
.v2 h3 { font-weight: 620; letter-spacing: -.02em; }
.v2 p { margin: 0; }
.v2 a { color: inherit; }
.v2 ::selection { background: #e2e2e2; }
.v2 :focus-visible { outline: 2px solid var(--g-ink); outline-offset: 2px; }
.v2 code { font-family: var(--g-mono); font-size: .92em; background: var(--g-paper-2);
  padding: 1px 5px; border-radius: 2px; color: var(--g-ink); }

/* Three measures, used deliberately. */
.g-wide { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.g-prose { max-width: 640px; margin: 0 auto; padding: 0 28px; }
.g-rule { border: 0; border-top: 1px solid var(--g-line); margin: 0; }

/* .v2 a beat the old .g-btn on specificity, so the primary button's label was
   inheriting body grey on a near-black fill and all but disappeared. */
.v2 .g-btn { display: inline-block; padding: 11px 20px; border-radius: var(--radius, 6px);
  background: var(--g-ink); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 540; border: 1px solid var(--g-ink); }
.v2 .g-btn:hover { background: #000; color: #fff; }
.v2 .g-btn.line { background: none; color: var(--g-ink); border-color: var(--g-line); }
.v2 .g-btn.line:hover { border-color: var(--g-ink); background: none; color: var(--g-ink); }

/* ---------- nav ---------- */
.g-nav { border-bottom: 1px solid var(--g-line); }
.g-nav .g-wide { display: flex; align-items: center; gap: 28px; height: 56px; }
.g-nav .wordmark { height: 20px; background-color: var(--g-ink); }
.g-nav nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.g-nav nav a { color: var(--g-mute); text-decoration: none; }
.g-nav nav a:hover, .g-nav nav a.on { color: var(--g-ink); }

/* ---------- 1. the summary ----------

   Headline left, prose right, on a shared baseline. A single centred column of
   heading-then-paragraph-then-buttons is the default arrangement of every
   generated landing page; two columns of unequal width read as laid out. */
.g-top { padding: 76px 0 46px; }
.g-top .g-wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 30px 64px; align-items: start; }
.g-top h1 { font-size: clamp(34px, 4.8vw, 58px); letter-spacing: -.022em; }
.g-top h1 em { font-style: normal; font-weight: 400; color: var(--g-mute); }
.g-top .say { padding-top: 9px; }
.g-top .lede { font-size: 17.5px; line-height: 1.6; }
.g-top .lede + .lede { margin-top: 14px; }
.g-top .cta { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.g-top .cta .fine { font-size: 13.5px; color: var(--g-mute); }

.g-inline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 44px;
  margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--g-line); }
.g-inline div { font-size: 13.5px; color: var(--g-mute); }
.g-inline b { color: var(--g-ink); font-weight: 560; }

@media (max-width: 860px) {
  .g-top .g-wide { grid-template-columns: 1fr; gap: 22px; }
  .g-top .say { padding-top: 0; }
}

/* ---------- what you get, in place of the demo ---------- */
.g-get { padding: 0 0 84px; }
.g-get ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-line); }
.g-get li { display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: 8px 40px; padding: 18px 0; border-bottom: 1px solid var(--g-line-2);
  font-size: 15.5px; line-height: 1.6; }
.g-get b { color: var(--g-ink); font-weight: 560; }
@media (max-width: 700px) { .g-get li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 3. the few unique things ----------

   Two columns, no leading number. "01 / 02 / 03" down the left edge is
   decoration standing in for structure, and it is the same tell as the mono
   labels: it announces a list rather than making one read as a list. */
.g-uniques { border-top: 1px solid var(--g-ink); }
.g-unique { display: grid; grid-template-columns: minmax(0, 27ch) minmax(0, 1fr);
  gap: 12px 48px; padding: 32px 0; border-bottom: 1px solid var(--g-line); align-items: start; }
.g-unique h3 { font-size: 21px; }
.g-unique p { font-size: 15.5px; line-height: 1.65; color: var(--g-body); }
.g-unique p + p { margin-top: 12px; }
@media (max-width: 860px) {
  .g-unique { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
}

/* ---------- the seam ----------

   Paper to near-black used to happen on one hard edge, which read as two pages
   stuck together. Now the ground darkens through a band before the datasheet
   starts, and a hairline ladder thins out across it, so the register changes
   over a screen's worth of scrolling rather than at a line. */
.g-seam { background: var(--g-paper-2); padding: 74px 0 0; }
.g-seam .g-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 26px 56px; align-items: end; }
.g-seam h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--g-ink); }
.g-seam p { font-size: 15px; line-height: 1.6; color: #4a4a4a; }

/* A step wedge, the strip a printer uses to check tone: six flat blocks
   walking from the paper to the datasheet's black. One idea, no texture, and
   not a fade - a gradient is what every builder reaches for, and the halftone
   that replaced it turned out to be a wall of noise across the whole page.

   The first block is the paper and the last is the section below, so the strip
   reads as the page stepping down rather than as a band laid over it. */
.g-steps { display: flex; flex-direction: column; margin-top: 54px; }
.g-steps i { display: block; height: 26px; }
.g-steps i:nth-child(1) { background: var(--g-paper-2); }
.g-steps i:nth-child(2) { background: #d2d2d2; }
.g-steps i:nth-child(3) { background: #a2a2a2; }
.g-steps i:nth-child(4) { background: #6e6e6e; }
.g-steps i:nth-child(5) { background: #3d3d3d; }
.g-steps i:nth-child(6) { background: var(--g-dark); }

@media (max-width: 760px) {
  .g-seam .g-wide { grid-template-columns: 1fr; }
  .g-steps i { height: 20px; }
}

/* ---------- 4. the specification ---------- */
.g-spec { background: var(--g-dark); color: var(--g-dark-mute); padding: 8px 0 96px; }
.g-spec h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.g-spec a { color: #fff; }

.g-lede { margin-top: 16px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; }

/* ---------- the use cycle ----------

   A line down the page with each step hanging off it. The rule is drawn on the
   list, not on each item, so it is continuous through the gaps rather than a
   stack of separate borders that happen to line up - and the last step's node
   ends it, so the line stops where the process does instead of running on into
   the footer.

   Two registers inside each step: what happens, then why it is done that way.
   The second is the point of the section; a list of steps without it is a
   feature list with numbers on. */
.g-flow { list-style: none; margin: 40px 0 0; padding: 0 0 0 34px; position: relative; }
.g-flow::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--g-dark-line); }
.g-flow > li { position: relative; padding: 0 0 34px; }
.g-flow > li:last-child { padding-bottom: 0; }
/* The node. Hollow, filled on the last step so the line reads as finished. */
.g-flow > li::before { content: ""; position: absolute; left: -34px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--g-dark); border: 1px solid #6a6a6a; }
.g-flow > li:last-child::before { background: #fff; border-color: #fff; }
.g-flow h3 { color: #fff; font-size: 17px; letter-spacing: -.015em; }
.g-flow p { margin-top: 8px; font-size: 14.5px; line-height: 1.62; max-width: 68ch; }
/* The reason, set apart from the description without another colour to use. */
.g-flow .g-why { padding-left: 14px; border-left: 1px solid var(--g-dark-line);
  color: var(--g-dark-mute); }

@media (max-width: 600px) {
  .g-flow { padding-left: 24px; }
  .g-flow::before { left: 3px; }
  .g-flow > li::before { left: -24px; width: 9px; height: 9px; }
}

.g-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 30px; }
.g-matrix th, .g-matrix td { text-align: left; padding: 12px 18px 12px 0; vertical-align: top; }
.g-matrix thead th { font-size: 13px; color: var(--g-faint); font-weight: 500;
  border-bottom: 1px solid #fff; }
.g-matrix tbody tr { border-bottom: 1px solid var(--g-dark-line); }
.g-matrix tbody th { color: #fff; font-weight: 560; white-space: nowrap; }
.g-matrix td.m { white-space: nowrap; }
.g-tablewrap { overflow-x: auto; }

.g-caveat { margin-top: 30px; padding-left: 18px; border-left: 2px solid var(--g-dark-line);
  font-size: 14px; }

.g-foot { background: var(--g-dark); border-top: 1px solid var(--g-dark-line);
  padding: 30px 0 56px; color: var(--g-dark-mute); }
.g-foot .g-wide { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: baseline; }
.g-foot a { color: var(--g-dark-mute); text-decoration: none; font-size: 14px; }
.g-foot a:hover { color: #fff; }
.g-foot .wordmark { height: 18px; background-color: var(--g-dark-mute); }
.g-foot .small { margin-left: auto; font-size: 12.5px; }

.g-s-lg { padding: 88px 0; }
.g-s-md { padding: 56px 0; }
@media (max-width: 700px) {
  .g-s-lg { padding: 52px 0; }
  .g-top { padding-top: 48px; }
  .g-get { padding-bottom: 56px; }
  .g-seam { padding: 52px 0 40px; }
}

/* ---------- the standing privacy note ----------

   Top left, out of the way of the nav on the right, and it stays until it is
   closed. Deliberately quiet: a big coloured banner insisting on its own
   trustworthiness is what an untrustworthy site looks like. */
.g-vow { position: fixed; top: 68px; left: 16px; z-index: 60;
  display: flex; align-items: flex-start; gap: 10px;
  width: min(330px, calc(100vw - 32px)); padding: 12px 12px 12px 14px;
  border: 1px solid var(--g-line); border-radius: 4px;
  background: var(--g-paper); box-shadow: 0 6px 22px rgba(0, 0, 0, .07); }
.g-vow[hidden] { display: none; }
.g-vow p { font-size: 12.5px; line-height: 1.55; color: var(--g-mute); }
.g-vow b { color: var(--g-ink); font-weight: 600; display: block; }
.g-vow a { color: var(--g-ink); text-decoration: underline; }
.g-vow button { flex: none; width: 22px; height: 22px; margin: -2px -2px 0 0;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  border: 0; border-radius: 3px; background: none; color: var(--g-faint); }
.g-vow button:hover { color: var(--g-ink); background: var(--g-paper-2); }

/* On a narrow screen it goes to the foot, where it cannot cover the heading. */
@media (max-width: 900px) {
  .g-vow { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
}

/* Code on the dark ground. The light theme's near-white chip is invisible
   against near-black, which is what showDirectoryPicker was wearing. */
.v2 .g-spec code, .v2 .g-seam code { background: var(--g-dark-2); color: #e6e6e6;
  border: 1px solid var(--g-dark-line); }

/* The one place the front page mentions money. Underlined rather than made a
   button: it should read as a sentence someone can ignore. */
.g-tip { color: var(--g-ink); text-decoration: underline; text-underline-offset: 2px; }