/* THE PUBLIC PAGES — layer 19.
 *
 * WHAT THIS IS FOR
 * ----------------
 * On 28 August the app moved onto the readout language (layers 00 and 18). The
 * eleven public pages did not, and the gap was worse than "unfinished": they
 * had drifted into a THIRD visual system. FlowPulse was showing a stranger
 * three different products —
 *
 *   the app          instrument: left-origin, ruled, mono-labelled, no boxes
 *   home.html        a SaaS landing page: hero, STEP 01/02/03, feature cards
 *   the ten docs     a centred documentation site with a top nav bar
 *
 * — and the docs were pinned to the RETIRED blue-black palette by 112
 * hardcoded hex literals (`#071017`, `#050b10`, `#8e9aa5`, `#d7e2e9`), so they
 * did not even follow the ground colour. That is the exact failure the note at
 * the top of 00-tokens.css warns about: the moment a literal exists, "the
 * palette moves from one line" stops being true. The literals are gone; this
 * file is the language.
 *
 * THE ONE DESIGN DECISION IN HERE, AND IT IS DELIBERATE:
 * the documents are NOT forced onto the app's left-origin grid. A centred
 * measure is correct typography for something you read top to bottom, and
 * copying the instrument's layout onto a manual would be consistency for its
 * own sake. What they share is the VOCABULARY — the section rule with its
 * index mark, the two type voices, rules instead of boxes — and one detail
 * that does the most work of all: the nav, the content column and the footer
 * all start at the same x. Same instrument, different instrument panel.
 *
 * Loaded AFTER each page's own inline <style> block, which is the only
 * position from which it can win on equal specificity. index.html does not
 * load it — it has layer 18.
 */

:root {
  /* The document column. Every horizontal edge on a public page resolves from
     these two values, which is what makes the nav, the heading and the footer
     share one origin instead of three. */
  --fp-doc-w:   760px;
  --fp-doc-pad: 24px;
}

/* The gutter that puts a full-bleed element's content on the column edge.
   Percentages resolve against the body's width rather than the viewport, so
   this does not fight the scrollbar the way 100vw would. */
@supports (width: max(1px, 1%)) {
  nav, .fp-doc-bleed {
    padding-left:  max(var(--fp-doc-pad), calc((100% - var(--fp-doc-w)) / 2 + var(--fp-doc-pad)));
    padding-right: max(var(--fp-doc-pad), calc((100% - var(--fp-doc-w)) / 2 + var(--fp-doc-pad)));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1. THE PAGE.
 * ════════════════════════════════════════════════════════════════════ */
body {
  /* Was `linear-gradient(180deg, bg-deep, bg)` on every document — a vertical
     wash down a page of prose, which is the same ambient-atmosphere habit the
     app pass removed. One flat ground. */
  background: var(--fp-bg);
  color: var(--fp-text-body);
  /* The pages named their own `-apple-system, BlinkMacSystemFont, "Segoe UI"`
     stack, so a font change in 00-tokens.css reached the app and stopped at
     the front door. */
  font-family: var(--fp-font);
}

main {
  max-width: var(--fp-doc-w);
  margin: 0 auto;
  padding: var(--fp-6) var(--fp-doc-pad) var(--fp-8);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. THE NAV — a rule, not a bar.
 *
 * It was a full-width strip of eight centred links with a hairline under it,
 * which is the header every documentation template ships with. The links are
 * destinations, so they are set the way every other label in FlowPulse is set:
 * mono, small, letterspaced. The current page is marked the way the app rail
 * marks the current view — brand green — rather than by being a different
 * weight, and the wordmark keeps the accent because it is the wordmark.
 * ════════════════════════════════════════════════════════════════════ */
nav {
  border-bottom: 1px solid var(--fp-rule);
  padding-top: var(--fp-3);
  padding-bottom: var(--fp-3);
  gap: var(--fp-4);
}
/* `:not(.btn)` is load-bearing, and it is here because I broke the front page
   without it. home.html's header is `<nav class="hdr__actions">` holding two
   `.btn` links, so this rule set the primary call to action in letterspaced
   mono capitals — about 30% wider — and at 390px it pushed "Sign up free" off
   the right edge of the screen. The markup even carries a comment saying that
   button is the one thing on the page that must never be clipped, and the
   short-phrase fallback beside it exists for exactly that reason.
   A nav LINK is a destination and takes the label voice. A button inside a nav
   is a control and keeps the button's. */
nav a:not(.btn) {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
nav a:not(.btn):hover { color: var(--fp-text); }
nav a.here { color: var(--fp-brand); }
/* TAP TARGET. The nav labels are 10px mono, which is a 17px-tall hit area —
   under the 24px WCAG 2.2 AA 2.5.8 floor this project already set itself, and
   it was that on all eleven public pages at once. The 7 August accessibility
   pass measured the DASHBOARD over the DevTools Protocol and never saw these.
   Growing the TARGET, not the text: the label keeps its size, its face and its
   position, and only the box around it reaches 24px. inline-flex rather than
   vertical padding because <nav> is already a flex row with align-items
   centre, so the taller box centres on the same baseline it sat on before and
   nothing moves visually.
   .brand is excluded: it is a 17px wordmark with a 26px image beside it and
   already clears the floor. .btn is excluded for the same reason the rule
   above excludes it — it owns its own padding, and home.html's header depends
   on that. The footer's legal links stay as they are: 2.5.8 exempts a link
   inline in a sentence, and padding those would damage the prose to satisfy a
   rule that does not apply — the same call the 7 August pass made for the
   inline Cookie Policy and Privacy Policy links. */
nav a:not(.btn):not(.brand) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* NO min-width HERE, and that is a measured decision rather than an oversight.
   Every nav label clears 24px wide except "FAQ", which is 22. Setting
   min-width: 24px to buy those two pixels pushed the flex line over its wrap
   point and cost a WHOLE EXTRA ROW at 390px — the nav went 102px to 142px on
   the most common phone width, on all eleven public pages, to move one link by
   two pixels.
   It is also unnecessary. 2.5.8 is satisfied either by size OR by spacing, and
   the spacing clause asks that a 24px circle centred on each target not reach
   another target. The nav's column gap is 24px, so FAQ clears its neighbours
   with room to spare and passes on the second clause. The height is the part
   that was genuinely failing — every label was 17px tall — and that is what
   this rule fixes. */

/* `nav a.brand`, not `nav .brand`, and the difference is load-bearing.
   When `nav a` became `nav a:not(.btn)` to stop the header buttons being set
   as labels, that selector went from (0,1,1) to (0,1,2) and started beating
   `nav .brand` at (0,1,1) — so the wordmark itself rendered as a 10px
   letterspaced mono capital. Invisible until the real logo went in beside it
   and made the mismatch obvious. Matching the specificity puts it back.
   The wordmark is a name, not a label: it keeps the reading face. */
nav a.brand {
  font-family: var(--fp-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--fp-track-tight);
  text-transform: none;
  color: var(--fp-brand);
}
nav a.brand:hover { color: var(--fp-brand); }

/* ═══════════════════════════════════════════════════════════════════════
 * 3. THE PAGE TITLE AND THE SECTION RULE.
 *
 * `h2` carried `color: var(--fp-brand)` on every document — green section
 * headings down a page of prose, which spends the accent on furniture and
 * leaves nothing to mark the thing that matters. A section heading is a name,
 * so it gets the same treatment it gets in the app: the rule, the index mark,
 * and a mono label. Identical device, so the manual and the instrument are
 * legibly the same product.
 * ════════════════════════════════════════════════════════════════════ */
main h1 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: var(--fp-track-tight);
  color: var(--fp-text);
  margin: 0 0 var(--fp-2) 0;
}
main .sub {
  color: var(--fp-text-muted);
  font-size: 15px;
  margin: 0 0 var(--fp-7) 0;
  max-width: 62ch;
}

/* SCOPED AWAY FROM THE FRONT PAGE, and this was caught by looking at the
 * render rather than by reasoning about it.
 *
 * On the ten documents an `h2` is a section NAME — "The basics", "Who we are"
 * — so the label treatment is right. On home.html an `h2` is a HEADLINE:
 * "Everybody is shouting. Nobody is explaining." at 40px. The rule below set
 * the family, the caps and the .14em tracking; `.sec h2` still won on
 * font-size because it is the more specific selector — so three headlines
 * rendered as enormous letterspaced monospace capitals.
 *
 * The lesson is the one this codebase keeps re-teaching: a selector as broad
 * as `main h2` is a bet that every h2 in the product plays the same role, and
 * on a page you have not looked at, it will not. Home is excluded by class;
 * its section names are `.sec__kicker`, which is styled further down. */
body:not(.fp-doc-full) main h2 {
  position: relative;
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin: var(--fp-7) 0 var(--fp-4) 0;
  padding-top: var(--fp-2);
  /* One gradient, not a border plus a ::before — see the note in layer 18 for
     why those two cannot be relied on to land on the same physical row. */
  background-image: linear-gradient(
    to right,
    var(--fp-brand) 0,
    var(--fp-brand) var(--fp-rule-index-w),
    var(--fp-rule) var(--fp-rule-index-w),
    var(--fp-rule) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
main h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--fp-track-tight);
  color: var(--fp-text);
  margin: var(--fp-5) 0 var(--fp-2) 0;
}
main p { max-width: 68ch; }

/* ═══════════════════════════════════════════════════════════════════════
 * 4. THE FAQ — a list of questions, not a stack of cards.
 *
 * Each question was a bordered, tinted, rounded box with a green `+` parked in
 * the corner: eighteen containers down one page, and the container told you
 * nothing the question had not already said. They share one rule now and the
 * marker is a thin mono glyph that turns into a minus, which is the whole of
 * what a disclosure control has to communicate.
 * ════════════════════════════════════════════════════════════════════ */
main details {
  border: 0;
  border-bottom: 1px solid var(--fp-rule-soft);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
}
main details[open] { border-color: var(--fp-rule); }
main summary {
  padding: var(--fp-3) 40px var(--fp-3) 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-text-body);
}
main summary:hover { color: var(--fp-text); }
main details[open] summary { color: var(--fp-text); }
main summary::after {
  right: 4px;
  font-family: var(--fp-font-num);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-text-faint);
}
main details[open] summary::after { color: var(--fp-brand); }
main details p {
  padding: 0 40px var(--fp-4) 0;
  font-size: 14.5px;
  color: var(--fp-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. THE FOOTER — metadata, set as metadata.
 * ════════════════════════════════════════════════════════════════════ */
footer {
  max-width: var(--fp-doc-w);
  margin: 0 auto;
  padding: var(--fp-4) var(--fp-doc-pad) var(--fp-6);
  border-top: 1px solid var(--fp-rule-soft);
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: .04em;
  line-height: 1.8;
  color: var(--fp-text-faint);
}
footer a { color: var(--fp-text-muted); }
footer a:hover { color: var(--fp-text); }

/* Links in prose take the accent and say so on hover. */
main a { color: var(--fp-brand); }
main a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
 * 6. NARROW SCREENS.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --fp-doc-pad: 18px; }
  main { padding-top: var(--fp-5); }
  main h1 { font-size: 24px; }
  main .sub { margin-bottom: var(--fp-5); }
  main h2 { margin-top: var(--fp-6); }
  /* ROW gap 8px, not 16. It was tuned when nav links were 17px tall; now
     that each link carries its own 24px tap box (see the nav a rule above),
     the old 16px row gap stacked on top of the new height and made the nav
     TALLER than before the accessibility fix — buying a bigger target with a
     smaller screen. 8 + 24 = 32px per row against the previous 16 + 17 = 33,
     so the targets grew and the nav did not. The COLUMN gap is untouched: it
     is what lets "FAQ" pass 2.5.8 on the spacing clause. */
  nav { gap: 8px var(--fp-4); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. LEARN — the numbered circles go.
 *
 * `.step .num` was a 34px brand-tinted disc with a brand border and a bold
 * brand numeral, five of them down the page. That is the STEP 01 / 02 / 03
 * device wearing a different hat, and the circle carries nothing the numeral
 * does not: an ordinal is already an ordinal.
 *
 * The number moves into the margin as a mono figure, right-aligned so 1 and 5
 * share an edge, and the steps hang off one column. This is the *one* place in
 * the product where a numbered sequence is genuinely warranted — it is a
 * pipeline, and step 3 cannot happen before step 2 — so the numbers stay and
 * only the decoration goes.
 * ════════════════════════════════════════════════════════════════════ */
main .step { gap: var(--fp-4); margin-bottom: var(--fp-5); }
main .step .num {
  flex: 0 0 22px;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: 0;
  display: block;
  text-align: right;
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fp-text-faint);
  padding-top: 3px;
}
main .step h3 { margin-top: 0; }

/* The pull-quote and the metric rule blocks were both tinted, bordered,
   rounded panels. A rule down the left edge says "this is set apart" without
   drawing a container round it — the same treatment the app gives the welcome
   card and the signal explanation. */
main .pull,
main .metric .rule,
main blockquote {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--fp-brand);
  border-radius: 0;
  padding: 2px 0 2px var(--fp-3);
  margin: var(--fp-3) 0;
}
main .metric .rule {
  border-left-color: var(--fp-rule);
  font-family: var(--fp-font-num);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fp-text-body);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. ROADMAP — a list, not thirty boxes.
 *
 * Every item was a bordered tinted rectangle, so a page whose whole job is
 * "here is a long list of things" read as a long list of containers. They
 * share one hairline now.
 *
 * The status heading keeps its colour, because on this page the colour IS the
 * status — released, in progress, planned — and it is the only page where a
 * green heading earns itself. The glowing dot beside it does not: a 10px disc
 * with a 10px halo is the status said twice, the second time as decoration.
 * ════════════════════════════════════════════════════════════════════ */
main ul { list-style: none; }
main li {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fp-rule-soft);
  border-radius: 0;
  padding: var(--fp-3) 0;
}
main h2 .dot {
  box-shadow: none;
  width: 5px;
  height: 5px;
}
main .released h2,
main .progress h2,
main .planned h2 { color: var(--fp-text-muted); }
main .released .dot  { background: var(--fp-brand); }
main .progress .dot  { background: var(--fp-warn); }
main .planned .dot   { background: var(--fp-text-faint); }
main .note {
  background: transparent;
  border-left: 1px solid var(--fp-brand);
  border-radius: 0;
  padding: 2px 0 2px var(--fp-3);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. THREE COLUMN WIDTHS, ONE MECHANISM.
 *
 * Most public pages are prose and take the 760px measure. Pricing is a
 * comparison and needs three columns; home and community lay out their own
 * full-bleed sections. Rather than let each page re-declare `main`, the column
 * WIDTH is a variable those pages override — so the nav, the content and the
 * footer still resolve from one number and still share one left edge, which is
 * the whole point of the mechanism.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-wide { --fp-doc-w: 1040px; }
body.fp-doc-full main { max-width: none; padding-left: 0; padding-right: 0; }
body.fp-doc-full footer { max-width: none; }

/* ═══════════════════════════════════════════════════════════════════════
 * 10. PRICING — one comparison, not three products.
 *
 * It was three bordered cards, the middle one tinted and outlined in brand
 * green with a solid green "Most useful" pill, and twenty-five green ticks
 * across them. That is the canonical SaaS pricing page, and it does the reader
 * a disservice as well: three boxes say "three things to choose between", when
 * what is actually on offer is one product at three depths.
 *
 * Three columns of one table now, divided by hairlines. The featured column is
 * marked by its rule going brand green — the same index mark the rest of the
 * product uses to say "this one" — instead of by a fill, a border and a pill.
 *
 * NOTHING FUNCTIONAL MOVED. The billing toggle, the four CTA states and the
 * JS that swaps them are untouched; every selector below is a repaint.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-wide main h1,
body.fp-doc-wide main .sub {
  /* Every other page's title is left-aligned to the column. A centred title on
     one page is not emphasis, it is an inconsistency. */
  text-align: left;
  margin-left: 0;
}
body.fp-doc-wide main .sub { margin-bottom: var(--fp-6); }

.plans { gap: 0; }
.plan {
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
  background: transparent;
  padding: var(--fp-3) var(--fp-4) 0 0;
}
.plan + .plan { border-left: 1px solid var(--fp-rule-soft); padding-left: var(--fp-4); }
/* "This one" — said once, with the mark the product already uses. */
.plan.featured {
  border-top-color: var(--fp-brand);
  background: transparent;
}
.plan .name {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.plan.featured .name { color: var(--fp-text); }
.plan .tag {
  margin-left: var(--fp-2);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fp-brand);
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  vertical-align: baseline;
}
.plan .price { margin: var(--fp-3) 0 var(--fp-1); }
.plan .price .amount {
  font-family: var(--fp-font-num);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.plan .price .per,
.plan .billed {
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  font-weight: 500;
}
.plan .billed { color: var(--fp-brand); }
.plan .blurb { color: var(--fp-text-muted); margin-bottom: var(--fp-4); }

/* THE TWENTY-FIVE GREEN TICKS.
   A tick means "included", and on a page where every line in every column is
   included, it means nothing — twenty-five accents marking nothing, on a
   product whose palette rule is that the accent marks one thing. The list is
   set with a hanging indent and a hairline dash, so the shape still reads as a
   list and the green goes back to marking the action. */
.plan li { padding: 5px 0 5px var(--fp-3); color: var(--fp-text-body); }
.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 7px; height: 1px;
  border: 0;
  transform: none;
  background: var(--fp-text-faint);
}
.plan li.carry { font-style: normal; color: var(--fp-text-faint); }
.plan li.carry::before {
  top: 15px; left: 0;
  width: 7px; height: 1px;
  background: var(--fp-text-faint);
}

.cta {
  border-radius: var(--fp-radius);
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  padding: 11px 16px;
}
.cta.soon {
  background: transparent;
  border: 1px solid var(--fp-border-control);
  color: var(--fp-text-faint);
}
.soon-note, .save-line {
  font-family: var(--fp-font-num);
  font-size: 10px;
  letter-spacing: .04em;
  text-align: left;
}
.billing-toggle { border-radius: var(--fp-radius); margin-left: 0; }
.billing-toggle button { border-radius: var(--fp-radius-sm); font-family: var(--fp-font-num); font-size: 10px; letter-spacing: var(--fp-track-label); text-transform: uppercase; }
.billing-toggle .save { border-radius: var(--fp-radius-sm); }

/* The two blocks under the plans. Both were tinted, bordered boxes; both are
   simply sections of the page, so they take the section rule. */
.promise, .manage {
  max-width: none;
  margin: var(--fp-7) 0 0;
  padding: var(--fp-3) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
}
.manage h2 {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  background: none;
  padding-top: 0;
  margin: 0 0 var(--fp-2) 0;
}

@media (max-width: 820px) {
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. THE FRONT PAGE.
 *
 * The one surface where a stranger forms their opinion, and it was the most
 * templated thing in the product: a centred hero over a masked graph-paper
 * grid and a green radial wash, a fake-3D phone tilting on pointer-move inside
 * two orbiting rings above a blurred floor glow, three problem cards each with
 * a decorative glyph, three more cards labelled STEP 01 / 02 / 03, and the one
 * genuinely distinctive thing on the page — the firing rule, written down
 * before the result — wrapped in a brand-tinted gradient panel.
 *
 * THE DECISION THAT SHAPED THE REST: the phone was NOT deleted, because what
 * was inside it is real. It reads `/prices` and shows live breadth, live coin
 * prices and a live plain-English sentence — the thing this product is, on the
 * page, already. What was wrong was the packaging: a picture of a phone
 * containing a picture of the instrument. The frame, the rings, the floor, the
 * notch, the fake iOS status bar, the fake in-app header and the fake tab bar
 * are gone; every live element and every id survived untouched, so
 * loadMarket() is unchanged. The front page now shows the instrument itself.
 *
 * The donut inside it became the same breadth tape the app uses, by the same
 * arithmetic: the page's own ARC_LENGTH is 276.5, and a path declared
 * `M0 3 H276.5` has a length of exactly that.
 * ════════════════════════════════════════════════════════════════════ */

/* --- The hero ---------------------------------------------------------- */
body.fp-doc-full .hero {
  text-align: left;
  overflow: visible;
  padding: var(--fp-7) 0 var(--fp-6);
}
/* The masked grid and the radial green wash. Both are texture, and the app
   pass removed the identical pair from the Markets hero on 28 August. */
body.fp-doc-full .hero::before,
body.fp-doc-full .hero::after { content: none; }

body.fp-doc-full .hero .wrap { text-align: left; }

/* The eyebrow loses its two flanking hairlines. A rule either side of a label
   is the decoration that says "this is a label" to a reader who could already
   see that, and it is the badge shape one step removed. */
body.fp-doc-full .hero__label::before,
body.fp-doc-full .hero__label::after { content: none; }
body.fp-doc-full .hero__label {
  color: var(--fp-text-muted);
  letter-spacing: var(--fp-track-label);
}
body.fp-doc-full .hero__label b { color: var(--fp-brand); font-weight: 500; }

body.fp-doc-full .hero h1 {
  margin: var(--fp-4) 0 0;
  max-width: 18ch;
  font-size: clamp(32px, 4.4vw, 46px);
  letter-spacing: -.035em;
  font-weight: 600;
}
/* "Not predicted." was the second line of a two-line hero, set in the accent.
   Giant coloured display type is the template move, and the accent is spent
   here on a phrase rather than on the one thing a visitor can do. The line
   break already gives the sentence its weight; the green goes back to the
   button. */
body.fp-doc-full .hero h1 em { color: var(--fp-text); }
body.fp-doc-full .hero__sub  { margin: var(--fp-3) 0 0; max-width: 52ch; }
body.fp-doc-full .hero__cta  { justify-content: flex-start; margin-top: var(--fp-5); }
body.fp-doc-full .hero__note { text-align: left; }

/* --- The readout, at phone scale ---------------------------------------
 *
 * SUPERSEDES an earlier version of this block. When the 3D scene was removed,
 * this layer unwound `.phone` and `.phone__screen` to a flat full-width block
 * — right at the time, because there was no phone.
 *
 * The device is back and rebuilt (home.html owns its frame and its ring), so
 * the unwinding is gone: it was overriding the frame from a later layer and
 * scattering the ring marks across the readout. What is left here is the one
 * thing this layer should have been doing all along — setting the live
 * readout at the size a 212px screen needs, in the product's own two voices.
 *
 * The content is identical to the app's Market Health card: a mono label, the
 * breadth figure, the tape, the ruled coin rows and the plain-English read.
 * That is the point. The phone shows the product, not a drawing of it.
 * ─────────────────────────────────────────────────────────────────────── */
body.fp-doc-full .ph-label {
  font-family: var(--fp-font-num);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin: 0;
}
body.fp-doc-full .ph-ring {
  position: static;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 0;
  margin: 6px 0 0;
}
/* The figure first, then the scale it sits on — the tape is drawn before the
   number in the markup because a ring wraps its label and a tape does not. */
body.fp-doc-full .ph-ring__mid {
  order: 1;
  position: static;
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
  transform: none;
}
body.fp-doc-full .ph-ring__num {
  font-family: var(--fp-font-num);
  font-size: 30px;
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fp-text);
}
body.fp-doc-full .ph-ring__cap {
  font-family: var(--fp-font-num);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
body.fp-doc-full .ph-tape {
  order: 2;
  display: block;
  width: 100%;
  height: 4px;
  margin: 8px 0 10px;
  transform: none;
}
body.fp-doc-full .ph-tape .trk,
body.fp-doc-full .ph-tape .arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: butt;
  filter: none;
}
body.fp-doc-full .ph-tape .trk { stroke: rgba(255,255,255,.08); }
body.fp-doc-full .ph-tape .arc {
  stroke: var(--fp-brand);
  stroke-dasharray: 276.5;
  stroke-dashoffset: 276.5;
  transition: stroke-dashoffset var(--fp-motion) var(--fp-ease);
}

/* The three live coin rows — the app's ruled row, at phone scale. */
body.fp-doc-full .ph-rows { display: block; padding: 0; margin: 0; }
body.fp-doc-full .ph-row {
  display: grid;
  grid-template-columns: 15px 30px 1fr 22px;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--fp-rule-soft);
  border-radius: 0;
  background: transparent;
}
body.fp-doc-full .ph-row:last-child { border-bottom: 0; }
body.fp-doc-full .ph-row__tic {
  font-family: var(--fp-font-num);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--fp-text-muted);
}
body.fp-doc-full .ph-row__px {
  font-family: var(--fp-font-num);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--fp-text);
  text-align: right;
}
body.fp-doc-full .ph-row__spk { width: 22px; height: 9px; }

/* The plain-English sentence: the product's actual output, set as prose. */
body.fp-doc-full .ph-ai {
  margin: 10px 0 0;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
}
body.fp-doc-full .ph-ai__h {
  font-family: var(--fp-font-num);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  gap: 5px;
}
body.fp-doc-full .ph-ai__h svg { display: none; }
body.fp-doc-full .ph-ai__b {
  margin-top: 5px;
  font-family: var(--fp-font);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fp-text-body);
}

/* Two columns on a wide screen: the claim on the left, the device on the
   right. On a phone the claim comes first and the device follows it, which is
   the same order. */
@media (min-width: 1000px) {
  body.fp-doc-full .hero {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    width: min(1140px, 100% - 40px);
    margin-inline: auto;
  }
  body.fp-doc-full .hero > .wrap { width: auto; margin-inline: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. THE PROOF BAR — four facts, not four tiles.
 *
 * `30 / 1,167 / 24h / ±2%` sat in a four-up grid of centred cells divided by
 * vertical rules: the big-number-over-small-label row that every generated
 * landing page opens with. The numbers are real and they are the best content
 * above the fold, so they stay — they just stop being tiles. Left-aligned on
 * the page's own column, one hairline over the row, and the figures in the
 * numeric face so they line up with every other figure in the product.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .proof {
  border-top: 1px solid var(--fp-rule);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  padding-top: var(--fp-4);
  gap: var(--fp-5);
}
body.fp-doc-full .proof > div,
body.fp-doc-full .proof__item {
  border: 0;
  padding: 0;
  text-align: left;
}
body.fp-doc-full .proof dt {
  font-family: var(--fp-font-num);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 500;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--fp-text);
  text-align: left;
}
body.fp-doc-full .proof dd {
  margin: var(--fp-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fp-text-muted);
  text-align: left;
  max-width: 30ch;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 13. THE FRONT PAGE'S SECTIONS.
 *
 * Every section opened with a brand-green uppercase kicker, and every section
 * body was a grid of bordered, filled, rounded cards. Two devices, repeated
 * eight times, doing the work that a rule and a column of type should do.
 *
 * The kicker becomes the section rule — the same hairline with the same 22px
 * index mark the app and the documents use, so a visitor who signs up meets a
 * page they have already learned to read. The cards become columns divided by
 * hairlines. Neither change removes a word.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .sec { border-top: 0; }
body.fp-doc-full .sec__kicker {
  position: relative;
  display: block;
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  padding-top: var(--fp-2);
  margin: 0;
  background-image: linear-gradient(
    to right,
    var(--fp-brand) 0,
    var(--fp-brand) var(--fp-rule-index-w),
    var(--fp-rule) var(--fp-rule-index-w),
    var(--fp-rule) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
body.fp-doc-full .sec h2 {
  margin-top: var(--fp-4);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.03em;
  max-width: 24ch;
}
/* One left edge for the whole page. A centred section in the middle of a
   left-aligned page is not a change of pace, it is a wobble. */
body.fp-doc-full .sec--centre { text-align: left; }
body.fp-doc-full .sec--centre h2,
body.fp-doc-full .sec--centre .sec__lede { margin-inline: 0; }

/* --- The cards become columns ------------------------------------------ */
body.fp-doc-full .grid { gap: 0; }
body.fp-doc-full .card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
  padding: var(--fp-3) var(--fp-4) var(--fp-5) 0;
}
body.fp-doc-full .card:hover { background: transparent; border-color: var(--fp-rule); }
body.fp-doc-full .grid--3 > .card + .card,
body.fp-doc-full .grid--2 > .card + .card {
  border-left: 1px solid var(--fp-rule-soft);
  padding-left: var(--fp-4);
}
body.fp-doc-full .card--muted { border-top-color: var(--fp-rule-soft); }
body.fp-doc-full .card h3 { font-size: 16px; font-weight: 600; letter-spacing: var(--fp-track-tight); }
body.fp-doc-full .card p  { color: var(--fp-text-muted); }
/* The 01/02/03 counter in the corner of every indexed card. The cards are not
   a sequence — they are three things the product does at once — so a running
   index on them is a number that means nothing. */
body.fp-doc-full .grid--indexed .card::after { content: none; }

@media (max-width: 660px) {
  body.fp-doc-full .grid--3 > .card + .card,
  body.fp-doc-full .grid--2 > .card + .card { border-left: 0; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 14. THE RULE PANEL — the best content on the page, finally set like it.
 *
 * "A signal is only logged when all four of these are true at once" is the
 * single most distinctive thing FlowPulse can say, and nothing else in crypto
 * says it. It was in a brand-tinted gradient box with a brand border — the
 * treatment a generated page gives its least distinctive content.
 *
 * It gets scale and space instead of a fill: the section rule above it, the
 * four conditions as a ruled list, and the thresholds in the numeric face
 * because they are the numbers the whole claim rests on. The green ticks go —
 * four accents to say "and this one too" on a list that is entirely
 * conditions.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .panel {
  padding: var(--fp-3) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: linear-gradient(
    to right,
    var(--fp-brand) 0,
    var(--fp-brand) var(--fp-rule-index-w),
    var(--fp-rule) var(--fp-rule-index-w),
    var(--fp-rule) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
body.fp-doc-full .panel h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-top: var(--fp-3);
  max-width: 26ch;
}
body.fp-doc-full .rules { gap: 0; margin-top: var(--fp-4); }
body.fp-doc-full .rules li {
  gap: 0;
  padding: var(--fp-3) 0;
  border-bottom: 1px solid var(--fp-rule-soft);
  font-size: 15px;
  max-width: 76ch;
}
body.fp-doc-full .rules li:last-child { border-bottom: 0; }
body.fp-doc-full .rules li svg { display: none; }
body.fp-doc-full .rules b { color: var(--fp-text); font-weight: 500; }
body.fp-doc-full .panel__foot { border-top: 1px solid var(--fp-rule); }

/* A two-column rule panel was tried here and taken out again.
 *
 * The idea was sound — put the four conditions in one measure and let "Then
 * it gets marked" sit beside them as a marginal note — but .panel__foot is a
 * plain sibling of the heading and the list, so placing it took explicit
 * grid-row arithmetic, and the arithmetic put the footnote above the heading.
 * It could be forced to work with more rules on top of it.
 *
 * It is not worth it. The single-column panel already reads as the most
 * important thing on the page, which was the whole objective, and the second
 * column only filled space that did not need filling. Left as one column on
 * purpose. */

/* ═══════════════════════════════════════════════════════════════════════
 * 15. THE SECOND DONUT.
 *
 * The "see it working" section carries a second live reading — the same
 * breadth number as the hero, with a ranked mover list beside it — and it was
 * a second ring, in a second bordered panel. Found by scrolling, not by
 * grepping: it is 2,500px down the page.
 *
 * It becomes the same tape by the same arithmetic (the page's own LIVE_ARC is
 * 427; `M0 3 H427` has a length of exactly that), and the panel it sits in
 * becomes a ruled block. The section is kept rather than merged into the hero
 * because it earns its place: the hero states the reading, this one shows the
 * ranked movers underneath it, which is what "see it working" means.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .live {
  border: 0;
  border-top: 1px solid var(--fp-rule);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body.fp-doc-full .live__bar {
  padding: var(--fp-2) 0 var(--fp-4);
  border-bottom: 0;
  background: transparent;
}
/* The pulsing dot was the only perpetual animation left on any public page.
   The timestamp beside it already says how fresh the reading is, in words,
   and a blinking light is the decoration version of that sentence. */
body.fp-doc-full .live__dot {
  box-shadow: none;
  animation: none;
  width: 5px;
  height: 5px;
}
body.fp-doc-full .live__body {
  grid-template-columns: 300px 1fr;
  gap: 0 var(--fp-6);
}
body.fp-doc-full .live__gauge {
  display: block;
  padding: 0;
  border-right: 0;
}
body.fp-doc-full .live__tape {
  display: block;
  width: 100%;
  height: 6px;
  margin: var(--fp-3) 0;
  transform: none;
}
body.fp-doc-full .live__tape .trk,
body.fp-doc-full .live__tape .arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: butt;
  filter: none;
}
body.fp-doc-full .live__mid {
  position: static;
  height: auto;
  display: flex;
  align-items: baseline;
  gap: var(--fp-3);
  text-align: left;
}
body.fp-doc-full .live__num {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .92;
}
body.fp-doc-full .live__cap {
  margin-top: 0;
  font-family: var(--fp-font-num);
  font-size: 11px;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
body.fp-doc-full .live__gaugelab { margin-top: var(--fp-3); max-width: 34ch; }
body.fp-doc-full .live__rows { padding: 0; }
body.fp-doc-full .live__row { padding-left: 0; padding-right: 0; }
body.fp-doc-full .live__read {
  border-top: 1px solid var(--fp-rule-soft);
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 800px) {
  body.fp-doc-full .live__body { grid-template-columns: 1fr; }
  body.fp-doc-full .live__gauge { border-bottom: 0; padding-bottom: var(--fp-4); }
}

/* `.live__gauge` was `place-items:center`, so its children still centred after
   the grid came off. The page has one left edge. */
body.fp-doc-full .live__gauge,
body.fp-doc-full .live__gaugelab { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════
 * 16. THE LAST OF THE ATMOSPHERE — found by a sweep of my own work.
 *
 * After the visible passes were done I grepped every public page for the
 * signatures this project keeps removing: blur(), backdrop-filter,
 * radial-gradient, translateY(-, and `infinite`. home.html still had five
 * blurs, two backdrop-filters, seven radial gradients and four looping
 * animations. Most belonged to the deleted 3D scene and went with it. These
 * five were live and are the reason for this block.
 * ════════════════════════════════════════════════════════════════════ */

/* (a) THE GLASS HEADER. `backdrop-filter: blur(14px) saturate(1.3)` over a
   colour-mixed translucent ground — glassmorphism, on the first 64px a visitor
   sees. A header sits on the page; it does not need to be frosted glass
   floating above it. */
body.fp-doc-full .hdr {
  background: var(--fp-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--fp-rule);
}
/* (b) THE FLOATING PILL. On scroll the header became a rounded, gradient-filled
   bar detached from the top of the page — the shrinking floating nav, which is
   the single most recognisable landing-page interaction of the last two years.
   It marks the scroll with a rule instead, which is what a rule is for. */
body.fp-doc-full .hdr[data-scrolled="1"] {
  border-radius: 0;
  background: var(--fp-bg);
  border: 0;
  border-bottom: 1px solid var(--fp-rule);
}

/* (c) THE CLOSING GLOW. A radial brand wash behind the final call to action —
   the same ambient haze removed from the app, kept for the last screen. */
body.fp-doc-full .close::before { content: none; }
body.fp-doc-full .close h2,
body.fp-doc-full .close p { margin-inline: 0; }
body.fp-doc-full .close { text-align: left; }

/* (d) THE BUTTON LIFT. `translateY(-1px)` plus a 26px green bloom on hover.
   The button is already solid brand green on a near-black page; it does not
   need to rise and glow to be found. Brightness answers the pointer. */
body.fp-doc-full .btn--primary:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.08);
}

/* (e) THE COOKIE BAR. Blurred glass, a brand-tinted border and a 32px shadow,
   for a strip of small print. It is the one element on the page that genuinely
   floats over content, so it keeps a fill and an edge — a flat one. */
.cc {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--fp-surface-raised);
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow-lift);
}

/* (f) The wordmark at weight 800 on every document. The app's is 700; two
   weights of one wordmark across one product is the kind of drift that only
   shows up when you put the pages side by side. */
nav .brand { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
 * 17. THE LAST OF THE GREEN TICKS — found on the second read-through.
 *
 * `.trust p svg` and `.rules li svg` are brand-green checkmarks, one per item.
 * The pricing page's twenty-five went earlier for the reason that applies here
 * too: a tick on every line of a list where every line is included is an
 * accent marking nothing, and it is four more green marks competing with the
 * one green thing a visitor can act on.
 *
 * The bold lead-in ("No wallet connection.") already opens each item, so the
 * list keeps its shape without them.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .trust p svg { display: none; }
body.fp-doc-full .trust p { gap: 0; }
body.fp-doc-full .trust p b { color: var(--fp-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
 * 18. THE PAGE STOPPED BEING TOO TIGHT AND STARTED BEING TOO EMPTY.
 *
 * `.sec` carries `clamp(56px, 8vw, 104px)` of vertical padding. That was
 * measured for sections whose content sat inside filled cards — the card's own
 * padding held the content up and the section padding separated the blocks.
 * With the cards gone the two gaps stack: at 1440px a three-column row ended
 * and 200px of nothing followed before the next rule. Deliberate whitespace
 * reads as composure; an unexplained void reads as an unfinished page, and the
 * difference is entirely in the amount.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .sec { padding: clamp(44px, 5.5vw, 72px) 0; }
body.fp-doc-full .card { padding-bottom: var(--fp-4); }
body.fp-doc-full .sec__lede { margin-top: var(--fp-3); }

/* THE SECTION RULE WAS ONLY SPANNING 40% OF THE COLUMN, and the cause was one
   of my own rules two hundred lines up: `main p { max-width: 68ch }`, which is
   right for prose and wrong for `.sec__kicker`, because the kicker is a <p>.
   Its box was capped, so the hairline it paints as a background stopped where
   the box did — a section rule that reaches four tenths of the way across is
   not a section rule, it is a stray dash. The measure cap is for text people
   read in lines, not for a label that paints a rule. */
body.fp-doc-full .sec__kicker { max-width: none; }

/* ═══════════════════════════════════════════════════════════════════════
 * PHASE 3 — CLOSING THE SEAM.
 *
 * The one measured disconnect from the Phase 2 journey audit, and it sat at
 * the exact moment a visitor crosses from the marketing page into the product:
 *
 *   home.html   .btn    system-ui, 15px, sentence case
 *   the app     .fp-btn ui-monospace, 10px, uppercase
 *   pricing     .cta    ui-monospace, 10px, uppercase
 *
 * home.html declared its own `.btn` and never joined the label voice, so
 * someone clicked a 15px sentence-case "Sign up free" and landed one
 * navigation later in a product where every control is a mono label. Two
 * products, one click apart.
 *
 * The height stays at 44px — that is the tap target, and it is not the thing
 * that was inconsistent.
 * ════════════════════════════════════════════════════════════════════ */
body.fp-doc-full .btn {
  font-family: var(--fp-font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fp-track-label);
  text-transform: uppercase;
  padding: 0 var(--fp-4);
}
/* The 18px green bloom under the primary button is the last glow on any
   public page. The button is solid brand green on near-black; it is not
   struggling to be seen. */
body.fp-doc-full .btn--primary { box-shadow: none; }
body.fp-doc-full .btn--lg { font-size: 12px; }

/* THE HEADER BUTTONS AT NARROW WIDTHS — and this is the SECOND time the same
 * mistake has been made in this file, which is why it now has its own note.
 *
 * Phase 2 set `nav a` to the mono label voice and pushed "Sign up free" off a
 * 390px screen; the fix was `nav a:not(.btn)`. Phase 3 then set `.btn` itself
 * to that voice — legitimately, to close the seam between the marketing page
 * and the product — and clipped the same button again, at 320px and 390px.
 * Measured: two 146px buttons plus a gap in 290px of space.
 *
 * The voice is right and stays. What has to give is the padding, which is
 * generous for a 15px sentence-case label and unnecessary for a 10px
 * letterspaced one. The 44px height is untouched: that is the tap target.
 *
 * THE STANDING LESSON: any change to control typography on this page has to be
 * re-measured at 320px before it is called done. The header has the least
 * horizontal room and the most important button in the product.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body.fp-doc-full .hdr .btn {
    font-size: 10px;
    letter-spacing: .08em;
    padding: 0 var(--fp-3);
    gap: 6px;
  }
  /* The escape hatch stops being a bordered button on a phone. Measured: the
     wordmark is ~132px, the header's inner width at 390px is 362px, and two
     bordered buttons plus their gap came to 232px — 12px more than fits. It is
     the SECONDARY path; a bordered box was always overstating it, and dropping
     the border is what makes the primary button fit rather than shrinking the
     primary button until it stops looking like the primary button. */
  body.fp-doc-full .hdr .btn--quiet {
    border: 0;
    background: transparent;
    padding: 0 var(--fp-1);
    color: var(--fp-text-muted);
  }
  body.fp-doc-full .hdr .btn--quiet:hover { background: transparent; color: var(--fp-text); }
}

/* THE MARK IS THE MARK, ON EVERY PAGE.
 *
 * The ten content pages drew their wordmark as an inline SVG polyline — a
 * heartbeat/pulse line. It is the most generic mark in this category and it
 * appears on thousands of health and fintech sites; it is also not FlowPulse's
 * logo. The dashboard, home.html and landing.html all use /logo-64.png, so the
 * product was showing two different marks depending which page you were on.
 *
 * All ten now carry the real one. Circular crop for the same reason home.html
 * gives: the logo is a green mark on a black square with clear margin outside
 * its ring, so a 50% radius removes the square and leaves the mark sitting on
 * the page with no visible edge.
 * ═════════════════════════════════════════════════════════════════════════ */
nav .brand img {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: block;
}