/* site/assets/css/main.css
   monoflo.tools site shell. Zero dependencies, no build step. */

/* ---------------------------------------------------------------------------
   1. Helvetica Neue LT Pro, Extended widths only.

   All sixteen shipped faces carry the `Ex` suffix. There is no normal-width
   cut anywhere in Monoflo's identity, and the extra width is the single most
   recognisable thing about their typography, so Arial is a fallback of last
   resort rather than an equivalent.

   Their own site declares UltraLight and Light both at 300, and Black and
   Heavy both at 900, which makes four of the sixteen faces unreachable. Each
   face below gets a distinct weight and style pair instead, so all sixteen can
   actually be selected. Weight 900 resolves to Black Extended, which is what
   their cascade ends up rendering for headings.
   --------------------------------------------------------------------------- */
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 100; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-ThEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 100; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-ThExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 200; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-UltLtEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 200; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-UltLtExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 300; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-LtEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 300; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-LtExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-Ex.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 400; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-ExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 500; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-MdEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 500; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-MdExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-BdEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 700; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-BdExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 800; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-HvEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 800; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-HvExO.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 900; font-style: normal;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-BlkEx.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 900; font-style: italic;
  font-display: swap; src: url("../fonts/HelveticaNeueLTPro-BlkExO.woff2") format("woff2"); }

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--mf-surface);
  color: var(--mf-on-surface);
  font-family: var(--mf-font);
  font-weight: 400;
  font-size: var(--mf-size-body);
  line-height: var(--mf-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: var(--mf-weight-heading);
  line-height: var(--mf-leading-head);
}
/* Medium Extended is already a wide face. At heading sizes it needs no extra
   tracking, and a touch of negative tracking keeps a long heading from running
   away from the column. */
h1, h2 { letter-spacing: -0.004em; }
h1 { font-size: var(--mf-size-h1); }
h2 { font-size: var(--mf-size-h2); }
h3 { font-size: var(--mf-size-h3); }

p { margin: 0 0 var(--mf-space-3); max-width: var(--mf-measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--mf-link); }

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

.u-shell {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--mf-gutter);
}

/* The label voice. Light Extended lowercase rather than tracked-out capitals:
   at this width, capitals run away from you and stop being a quiet label. */
.u-label {
  font-weight: 300;
  font-size: var(--mf-size-small);
  color: var(--mf-on-surface-dim);
}

/* A value the catalog does not publish. Rendered as words, never as a dash,
   a zero or an empty cell, because an empty cell reads as zero. */
.u-absent {
  font-weight: 300;
  font-style: italic;
  color: var(--mf-grey);
}

/* ---------------------------------------------------------------------------
   3. The pill button, with the circle-arrow whose circle fills green on hover.
      This is Monoflo's signature interaction and the detail people recognise.
      Their version is a Font Awesome fa-stack; this one is inline SVG, so the
      site carries no CDN dependency.
   --------------------------------------------------------------------------- */
/* Two centring defects, both measured rather than eyeballed, both fixed here.

   VERTICAL. The label sat high. The first diagnosis was that `font: inherit`
   pulls in the body's 1.5 leading and that an explicit `line-height: 1` would
   fix it. Measuring says otherwise, and the algebra says why: the ink's offset
   from the centre of its own line box is (A - D)/2 + (d - a)/2, where A and D
   are the font's ascent and descent and a and d the glyph ink's. The line
   height cancels out of that expression entirely, and since `align-items:
   center` centres the line box, changing the leading moves the button's edges
   and not one pixel of the type. Setting line-height: 1 on its own made it
   marginally worse: the capitals measured 2.21px high at 16px before, 2.71px
   high after.

   The real cause is this face's asymmetric vertical metrics: ascent 11 and
   descent 5 per 16px em, so the baseline sits well below the middle of the line
   box while the capitals sit above it. What a reader centres on is the
   capital-height box, not the line box and not the ink box a descender happens
   to extend. With line-height: 1 the capital box sits (ascent - capHeight/2)
   from the top of a 1em item, which is 0.331em against a centre at 0.5em: a
   fixed 0.169em too high, at every size. So the leading IS pinned to 1, which
   makes the box predictable, the vertical padding is raised to hold the button
   at the height it already had, and 0.169em is moved from the bottom padding to
   the top. The padding that restores the height is set against the 1.35em mark
   rather than against the label: once the leading is 1, the circle-arrow is the
   tallest thing on the flex line and it, not the type, is what the button's
   height is now measured from. Every .btn on this site carries one. The circle-arrow is optically centred as it is, so it is pulled back
   by the same amount and does not travel with the label.

   HORIZONTAL. letter-spacing is applied after the last character as well as
   between characters, so the label's advance box is one tracking unit wider
   than its ink and the gap to the mark reads as 0.70em rather than the 0.65em
   declared. Measured at 1.76px of slack on the 16px buttons and 0.91px on the
   13px one. The mark's inline-start margin takes that unit back.

   Padding travels through custom properties because three rules set it (here,
   the header button, and the narrow-screen header button) and the optical
   shift has to be applied to all of them in exactly one place. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  --mf-btn-pad-y: 0.775em;
  --mf-btn-pad-r: 1.1em;             /* asymmetric, as theirs is */
  --mf-btn-pad-l: 1.6em;
  --mf-btn-optical: 0.169em;
  padding:
    calc(var(--mf-btn-pad-y) + var(--mf-btn-optical))
    var(--mf-btn-pad-r)
    calc(var(--mf-btn-pad-y) - var(--mf-btn-optical))
    var(--mf-btn-pad-l);
  border: var(--mf-border-btn) solid currentColor;
  border-radius: var(--mf-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  /* After `font: inherit`, never before it. The shorthand resets line-height to
     the inherited 1.5, so a line-height declared above it is simply discarded:
     the first attempt at this fix left the leading at 1.5 and grew every button
     by half an em instead. */
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--mf-tracking-btn);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn__mark {
  flex: none;
  width: 1.35em;
  height: 1.35em;
  overflow: visible;
  /* Takes back the tracking the browser adds after the label's last character,
     and stays where it was when the label moved down. */
  margin-inline-start: calc(-1 * var(--mf-tracking-btn));
  transform: translateY(calc(-1 * var(--mf-btn-optical)));
}
.btn__mark circle {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill 140ms ease, stroke 140ms ease;
}
.btn__mark path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }

.btn--primary {
  border-color: var(--mf-bright-blue);
  background: var(--mf-bright-blue);
  color: #fff;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--mf-navy);
  border-color: var(--mf-navy);
}
.btn--quiet { border-color: var(--mf-rule); color: var(--mf-on-surface); }
.btn--quiet:hover, .btn--quiet:focus-visible { border-color: var(--mf-on-surface); }

.btn:hover .btn__mark circle,
.btn:focus-visible .btn__mark circle {
  fill: var(--mf-green);
  stroke: var(--mf-green);
}

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   4. The gate
   --------------------------------------------------------------------------- */
body.gate {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--mf-space-5) var(--mf-space-3);
  background: var(--mf-navy-deep);
  overflow: hidden;
}
body.gate::before {
  content: "";
  position: absolute;
  inset: 30% 0 -8% 0;
  background: url("../patterns/pattern-structure.svg") center bottom / 175% auto no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 88%);
  mask-image: linear-gradient(to top, #000 22%, transparent 88%);
  pointer-events: none;
}
body.gate > * { position: relative; }

.gate__panel { width: 100%; max-width: 28rem; margin-bottom: 4vh; }

.gate__logo { display: block; width: 201px; max-width: 100%; height: auto; }

.gate__form {
  margin-top: var(--mf-space-4);
  padding: var(--mf-space-4);
  background: rgba(0, 47, 93, 0.82);
  border-top: var(--mf-card-rule) solid var(--mf-blue);
  backdrop-filter: blur(2px);
}

.gate__label { display: block; margin-bottom: var(--mf-space-2); }

.gate__input {
  display: block;
  width: 100%;
  margin-bottom: var(--mf-space-4);
  padding: 0.7em 0.8em;
  border: 2px solid var(--mf-rule);
  border-radius: 0;
  background: rgba(0, 28, 55, 0.7);
  color: var(--mf-on-surface);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.gate__input:focus {
  outline: none;
  border-color: var(--mf-green);   /* their active form border is bright green */
  box-shadow: var(--mf-focus-ring);
}

.gate__error {
  margin: var(--mf-space-3) 0 0;
  padding-left: 0.75em;
  border-left: 3px solid #f04438;
  font-weight: 300;
}

.gate__foot {
  margin-top: var(--mf-space-4);
  padding-top: var(--mf-space-3);
  border-top: 1px solid var(--mf-rule);
}
/* ---------------------------------------------------------------------------
   5. Site header

   It rides over the hero photograph rather than sitting above it in a bar of
   its own, so the first thing on screen is the press floor and not chrome.
   The photograph's top edge is blown-out white, which would swallow a white
   wordmark, so the hero carries a scrim under this strip.
   --------------------------------------------------------------------------- */
.site-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mf-space-3);
  padding-block: var(--mf-space-3);
}
.site-head__logo { display: block; width: 168px; height: auto; }
.site-head__right { display: flex; align-items: center; gap: var(--mf-space-3); }
.site-head__right .btn { --mf-btn-pad-y: 0.525em; --mf-btn-pad-r: 0.9em; --mf-btn-pad-l: 1.2em; font-size: var(--mf-size-small); }

/* ---------------------------------------------------------------------------
   6. Hero

   One photograph, full bleed, carrying the headline. It is a real Monoflo
   press: a moulded container held by the cell robot mid-cycle, the mould half
   still open behind it. The whole page is an argument that nothing here is
   invented, so it opens on the thing itself.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(90vh, 800px);
  background: var(--mf-navy-deep);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Directional, not a flat wash. The previous full-frame scrim dimmed the
   subject as hard as it dimmed the type, which is how a graded photograph
   turns back into grey mush.

   Two load-bearing layers. A wedge runs bottom-left to top-right and is gone
   by the time it reaches the robot head and the mould faces in the top right,
   so the part of the frame worth looking at keeps the contrast it was graded
   for. Over it sits an ellipse pinned to the headline block itself: the
   brightest thing in this photograph is the ceiling light directly behind the
   right-hand end of the first two headline lines, and darkening the whole
   wedge enough to cover it would have taken the subject down with it. The
   ellipse dies out well before the robot head, which is measured, not
   assumed: at that point it is past 100% of its own radius. The two thin
   linear strips only seat the wordmark and the credit line. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0, 28, 55, 0.70) 0%, rgba(0, 28, 55, 0.16) 11%, rgba(0, 28, 55, 0) 22%),
    linear-gradient(to top,
      rgba(0, 28, 55, 0.62) 0%, rgba(0, 28, 55, 0.14) 13%, rgba(0, 28, 55, 0) 26%),
    radial-gradient(68% 42% at 10% 62%,
      rgba(0, 28, 55, 0.80) 0%, rgba(0, 28, 55, 0.72) 50%,
      rgba(0, 28, 55, 0.40) 78%, rgba(0, 28, 55, 0) 100%),
    linear-gradient(to top right,
      rgba(0, 28, 55, 0.97) 0%, rgba(0, 28, 55, 0.94) 26%, rgba(0, 28, 55, 0.74) 44%,
      rgba(0, 28, 55, 0.34) 62%, rgba(0, 28, 55, 0.07) 78%, rgba(0, 28, 55, 0) 90%);
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-block: var(--mf-space-5) clamp(2rem, 4vw, 3.25rem);
}

/* The one place on the site that is loud, and the only surviving use of Black
   Extended outside the wordmark. It was clamped to 3.9rem, which at 1440 filled
   most of the frame; at 2.9rem it still reads as a width before it reads as a
   sentence, which is the point of the face, without dominating the photograph
   it is set on. */
.hero h1 {
  max-width: 20ch;
  font-weight: var(--mf-weight-display);
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.006em;
  color: #fff;
  text-wrap: balance;
}

.hero__lede {
  margin-top: var(--mf-space-4);
  max-width: 46ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.86);
}

.hero__cta { margin-top: var(--mf-space-4); }
.hero__cta .btn { font-size: 1rem; }

/* Named because an unattributed photograph on a page about not inventing
   things is a small contradiction. */
.hero__credit {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-bottom: var(--mf-space-3);
  color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------------
   6b. The statement band

   A full-width break in the page rhythm, on a macro of regrind flakes moving
   up a conveyor: the material this catalog is actually made of. Duotoned
   toward the deep navy at encode time rather than by a blend mode, so the
   contrast under the type is fixed and cannot drift with a browser.
   --------------------------------------------------------------------------- */
.band {
  position: relative;
  border-top: var(--mf-card-rule) solid var(--mf-bright-blue);
  background:
    linear-gradient(rgba(0, 28, 55, 0.34), rgba(0, 28, 55, 0.46)),
    url("../img/band-regrind-2200.avif") center / cover no-repeat;
}
.band__inner { padding-block: clamp(3rem, 8vw, 5.5rem); }

.band .statement {
  max-width: 24ch;
  margin: 0;
  font-weight: var(--mf-weight-heading);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.004em;
  color: #fff;
}
.band .statement + .statement {
  margin-top: var(--mf-space-4);
  max-width: 52ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: var(--mf-leading-body);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------------
   7. Sections and the 7px coded rule
   --------------------------------------------------------------------------- */
.section { padding-block: var(--mf-space-5); border-top: 1px solid var(--mf-rule); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mf-space-3); flex-wrap: wrap; }
.section__head h2 { color: #fff; }
.section__note { margin-top: var(--mf-space-3); font-weight: 300; color: var(--mf-on-surface-dim); }

.section__state { color: var(--mf-green); font-weight: 500; }

/* ---------------------------------------------------------------------------
   8. Keystone product cards

   The rule encodes how much of a record the catalog actually publishes, which
   is the thing an engineer needs to know before trusting it:
     blue  full outside dimensions
     slate dimensions plus static and dynamic load ratings
     grey  geometry not published
   --------------------------------------------------------------------------- */
/* Explicit column counts rather than auto-fill. Every card in a row has to be
   exactly as wide as every other one, because the elevations inside them are
   drawn at a shared scale and a row of unequal cards would silently rescale
   them against each other. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mf-space-3);
  margin-top: var(--mf-space-4);
}
/* Three and five, never four: fifteen keystones divide exactly into both, so
   the block ends square instead of trailing an orphan row. */
@media (min-width: 34rem) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .grid { grid-template-columns: repeat(5, 1fr); } }

.product {
  display: flex;
  flex-direction: column;
  padding: var(--mf-space-3);
  background: rgba(0, 47, 93, 0.42);
  border-top: var(--mf-card-rule) solid var(--mf-blue);
}
.product[data-rule="rated"]  { border-top-color: var(--mf-slate); }
.product[data-rule="absent"] { border-top-color: var(--mf-grey-dark); }

.product__sku {
  margin: 0;
  font-weight: var(--mf-weight-heading);
  font-size: 0.9375rem;
  line-height: 1.15;
  color: #fff;
}
.product__cat { display: block; margin-top: var(--mf-space-1); }

/* The outside dimension is the one spec that stays on the face of the card,
   because it is the one the drawing above it is made of. When it is not
   published the card says so here, in the open, rather than behind the
   disclosure. */
.product__dims {
  margin: var(--mf-space-2) 0 var(--mf-space-3);
  font-weight: var(--mf-weight-body);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* The elevation. Every product is drawn at one shared scale on one ground
   line, so a flat pallet reads flat beside a bulk container that reads tall.
   Nothing here is drawn unless the dimensions exist. It leads the card so the
   ground lines run straight across a row. */
.product__figure {
  margin: 0 0 var(--mf-space-3);
  padding-bottom: var(--mf-space-2);
  border-bottom: 1px solid var(--mf-rule);
}
.product__figure svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Specs on demand. Fifteen six-row tables opened at once was the single
   biggest block on the page and the least interesting thing on it; the
   drawings are what this section is for. Every cell is still in the document,
   including all thirty-five that read "not published". */
.product__more { margin-top: auto; }
.product__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mf-space-2);
  padding-top: var(--mf-space-2);
  border-top: 1px solid var(--mf-rule);
  font-weight: 500;
  font-size: var(--mf-size-small);
  color: var(--mf-slate);
  cursor: pointer;
  list-style: none;
}
.product__more > summary::-webkit-details-marker { display: none; }
.product__more > summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 140ms ease;
}
.product__more[open] > summary::after { transform: rotate(45deg); }
.product__more > summary:hover { color: #fff; }

.product__name {
  display: block;
  margin-top: var(--mf-space-3);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--mf-on-surface-dim);
}
.elev__face  { fill: rgba(255, 255, 255, 0.07); stroke: var(--mf-slate); stroke-width: 1; }
.elev__top   { fill: rgba(255, 255, 255, 0.13); stroke: var(--mf-slate); stroke-width: 1; }
.elev__side  { fill: rgba(255, 255, 255, 0.03); stroke: var(--mf-slate); stroke-width: 1; }
.elev__ground { stroke: var(--mf-rule); stroke-width: 1; }
.elev__none {
  fill: none;
  stroke: var(--mf-grey-dark);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.specs { margin: var(--mf-space-2) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--mf-space-2); }
.specs dt { font-weight: 300; font-size: var(--mf-size-small); color: var(--mf-on-surface-dim); }
.specs dd { margin: 0; text-align: right; font-weight: var(--mf-weight-body); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.specs dd .u-absent { font-weight: 300; font-size: 0.75rem; }

/* One orchestrated moment: the grid arrives when the hub answers. */
.grid[data-state="ready"] { animation: mf-arrive 320ms ease-out both; }
@keyframes mf-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.status { margin-top: var(--mf-space-3); font-weight: 300; }
.status--error { padding-left: 0.75em; border-left: 3px solid #f04438; }
/* ---------------------------------------------------------------------------
   9. What this does

   This was seven greyed-out cards reading "Phase 2". A grid of things that do
   not work is not a feature list, it is a list of absences, and it sat directly
   above a catalog that does work. It is now three panels, each describing
   something on this site you can use right now, each linking straight to it.
   Nothing here is future tense and nothing here is a roadmap.

   Deliberately typographic rather than photographic: the page already opens on
   a photograph and the catalog below is entirely photographs, so a third block
   of images would flatten both.
   --------------------------------------------------------------------------- */
.does {
  display: grid;
  gap: var(--mf-space-3);
  margin-top: var(--mf-space-4);
}
@media (min-width: 46rem) { .does { grid-template-columns: repeat(3, 1fr); } }

.does__item {
  display: flex;
  flex-direction: column;
  padding: var(--mf-space-4) var(--mf-space-3) var(--mf-space-3);
  background: rgba(0, 47, 93, 0.42);
  border-top: var(--mf-card-rule) solid var(--mf-green);
}
.does__item h3 { color: #fff; }
.does__item p {
  margin: var(--mf-space-3) 0 0;
  max-width: 42ch;
  font-weight: var(--mf-weight-quiet);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}
.does__go { margin-top: auto; padding-top: var(--mf-space-3); }
.does__item .does__go {
  margin-top: auto;
  font-weight: var(--mf-weight-body);
  font-size: var(--mf-size-small);
}
.does__go a { color: var(--mf-slate); text-decoration: none; }
.does__go a:hover { color: var(--mf-green); }

/* ---------------------------------------------------------------------------
   10. The count band

   Four numbers, three of which are the catalog's own coverage and one of
   which is counted off this page after it renders: how many spec cells above
   had to say "not published". That last one is the honest measure of the
   catalog, so it is printed at the same size as the flattering ones.
   --------------------------------------------------------------------------- */
.counts {
  border-top: var(--mf-card-rule) solid var(--mf-blue);
  background: var(--mf-navy);
}
.counts__inner {
  display: grid;
  /* Explicitly four, not auto-fit: auto-fit fits five tracks at this width and
     left the band with a dead column on the right. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mf-space-4) var(--mf-gutter);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 48rem) { .counts__inner { grid-template-columns: repeat(4, 1fr); } }
.counts__n {
  display: block;
  font-weight: var(--mf-weight-heading);
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.counts__cell .u-label {
  display: block;
  margin-top: var(--mf-space-2);
  max-width: 24ch;
  color: rgba(255, 255, 255, 0.72);
}
.counts__source {
  grid-column: 1 / -1;
  margin-top: var(--mf-space-2);
  /* 0.5 alpha measured 4.44:1 on this band at 13px Light Extended, which is
     under AA for normal text. 0.58 measures 5.3:1 and is the only run on the
     site that moved when the weights came down. */
  color: rgba(255, 255, 255, 0.58);
}

/* ---------------------------------------------------------------------------
   11. Footer

   The wordmark ghosted at a size it never gets anywhere else, bleeding off
   the right edge. It was centred, which put it directly behind the monogram
   and the tagline: three lockups of the same mark stacked on each other. It
   now occupies the empty right half instead, and the copy column is capped
   well short of it, so the two never meet.
   --------------------------------------------------------------------------- */
.site-foot {
  position: relative;
  overflow: hidden;
  background: var(--mf-navy-deep);
}
.site-foot__ghost {
  position: absolute;
  right: -6%;
  bottom: 12%;
  width: 56%;
  max-width: none;
  height: auto;
  opacity: 0.06;
  pointer-events: none;
}
.site-foot__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}
.site-foot__inner > * { max-width: 30rem; }
.site-foot__mark { display: block; width: 62px; height: auto; margin-bottom: var(--mf-space-4); }

/* One column has no empty right half, so the ghost drops to a strip along the
   very bottom edge and the copy is given the room to clear it. */
@media (max-width: 47.99rem) {
  .site-foot__ghost { right: -8%; bottom: 0.75rem; width: 104%; opacity: 0.055; }
  .site-foot__inner { padding-bottom: 7.5rem; }
}
.site-foot .site-foot__line {
  margin: 0 0 var(--mf-space-3);
  font-weight: var(--mf-weight-lockup);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  color: #fff;
}
.site-foot p { font-weight: 300; font-size: var(--mf-size-small); color: var(--mf-on-surface-dim); }

/* ---------------------------------------------------------------------------
   12. Site navigation

   The landing page had no nav because it had nowhere to go. There are now three
   places, so the header carries them. Set in Medium Extended at small size
   rather than tracked-out capitals: at this width capitals stop reading as
   quiet chrome and start competing with the wordmark.
   --------------------------------------------------------------------------- */
.site-nav { display: flex; align-items: center; gap: var(--mf-space-3); }
.site-nav a {
  font-weight: 500;
  font-size: var(--mf-size-small);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--mf-green); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--mf-bright-blue); }

/* Three destinations plus the sign-out button do not fit beside the wordmark on
   a phone. They used to wrap inside .site-head__right, which pushed the button
   off the right edge and cost two lines. Below this width the nav drops to its
   own full-width row under the wordmark and scrolls sideways if it has to, so
   every link stays reachable and the button stays on screen. */
@media (max-width: 34rem) {
  .site-head { flex-wrap: wrap; row-gap: var(--mf-space-2); }
  /* The wordmark keeps row one to itself; the nav and the button share row two,
     which is what stops the button being pushed off the right edge. */
  .site-head__right { flex: 1 1 100%; justify-content: space-between; gap: var(--mf-space-2); }
  .site-head__right .btn { --mf-btn-pad-y: 0.475em; --mf-btn-pad-r: 0.7em; --mf-btn-pad-l: 0.9em; }
  .site-head__right .btn span { display: none; }
  .site-nav {
    min-width: 0;
    gap: var(--mf-space-3);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   13. Interior page head

   The landing page opens on a photograph of the press floor. An interior page
   opens on what it is an index of, so the head is typographic: the count, then
   the title, then the one sentence saying where the data came from. The
   structure pattern sits behind it at low opacity, which is the same device the
   gate page uses, so the two read as one site.
   --------------------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--mf-navy-deep);
  border-bottom: var(--mf-card-rule) solid var(--mf-bright-blue);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -20% -10% -35% 40%;
  background: url("../patterns/pattern-double.svg") right center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head__body { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 {
  max-width: 20ch;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #fff;
}
.page-head__lede {
  margin-top: var(--mf-space-3);
  max-width: 58ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: rgba(255, 255, 255, 0.82);
}
.page-head__back {
  display: inline-block;
  margin-bottom: var(--mf-space-3);
  font-weight: 500;
  font-size: var(--mf-size-small);
  color: var(--mf-slate);
  text-decoration: none;
}
.page-head__back:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   14. The photograph

   Monoflo's own 3000x2000 RGBA renders, mirrored and re-encoded. The contact
   shadow is baked into the alpha, so they seat on the navy with no plate behind
   them and no background removal. Every frame is the same size, because a
   photograph cannot carry scale: see .product__scale below for where scale
   actually lives.
   --------------------------------------------------------------------------- */
.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--mf-space-2);
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(77, 163, 210, 0.13), rgba(0, 28, 55, 0) 72%),
    var(--mf-navy-deep);
}
.shot__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Never a grey rectangle where a product would be: a rectangle at product size
   reads as the product. This is an outlined field that says what is missing. */
/* The absence panel is the frame, not a box inside it, so the flag band below
   lines up with its edge instead of overhanging a smaller rectangle. */
.shot:has(.shot__gap) { padding: 0; }
.shot__gap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--mf-space-2);
  border: 1px dashed var(--mf-grey-dark);
}
.shot__gap-word {
  max-width: 14ch;
  font-weight: 300;
  font-style: italic;
  font-size: var(--mf-size-small);
  line-height: 1.3;
  text-align: center;
  color: var(--mf-grey);
}

.shot__flag {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: var(--mf-space-2);
  background: rgba(0, 28, 55, 0.94);
  border-top: 2px solid #f0a438;
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}
.shot__flag-mark {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0a438;
  color: var(--mf-navy-deep);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
}
/* On a grid card the flag is a short label, printed in full on the product
   page the card links to. Nothing is clamped mid-word. */
.grid .shot__flag { align-items: center; padding: var(--mf-space-1) var(--mf-space-2); }

/* ---------------------------------------------------------------------------
   15. The scale strip

   This is where true scale lives now. One shared scale for every product on the
   page, one ground line, drawn from the published outside dimensions. It sits
   directly under the photograph so the eye reads the product and then its real
   size, and it is the same drawing the first catalog pass shipped.
   --------------------------------------------------------------------------- */
.product__scale {
  padding: var(--mf-space-2) var(--mf-space-3) 0;
  border-top: 1px solid var(--mf-rule);
  background: rgba(0, 28, 55, 0.35);
}
.elev { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------------------------------------------------------------------------
   16. Catalog page: the filter rail
   --------------------------------------------------------------------------- */
.rail {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: var(--mf-space-3);
  background: rgba(0, 28, 55, 0.94);
  border-bottom: 1px solid var(--mf-rule);
  backdrop-filter: blur(6px);
}
.rail__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-3); }

.rail__search { flex: 1 1 15rem; min-width: 12rem; }
.rail__search label { display: block; margin-bottom: var(--mf-space-1); }
.rail__search input {
  display: block;
  width: 100%;
  padding: 0.5em 0.7em;
  border: 2px solid var(--mf-rule);
  border-radius: 0;
  background: rgba(0, 28, 55, 0.8);
  color: var(--mf-on-surface);
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}
.rail__search input:focus { outline: none; border-color: var(--mf-green); box-shadow: var(--mf-focus-ring); }

.chips { display: flex; flex-wrap: wrap; gap: var(--mf-space-2); flex: 2 1 28rem; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.4em 0.85em;
  border: 2px solid var(--mf-rule);
  border-radius: var(--mf-radius-pill);
  background: transparent;
  color: var(--mf-on-surface-dim);
  font: inherit;
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.chip:hover { color: #fff; border-color: var(--mf-on-surface); }
.chip[aria-pressed="true"] {
  background: var(--mf-bright-blue);
  border-color: var(--mf-bright-blue);
  color: #fff;
}
.chip__n { font-weight: 300; font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* On a phone the eight category chips wrap to four rows, and a sticky bar that
   tall eats more than half the viewport. Below this width the chips run as one
   horizontally scrollable row and the rail stops sticking, so the catalog gets
   the screen back. The negative inline margin lets the row bleed to the screen
   edges while its own padding keeps the first and last chip off them. */
@media (max-width: 47.99rem) {
  .rail { position: static; }
  .rail__inner { gap: var(--mf-space-3); }
  .chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--mf-gutter) * -1);
    padding-inline: var(--mf-gutter);
    padding-bottom: 2px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* ---------------------------------------------------------------------------
   17. Catalog page: the grid

   Explicit column counts, not auto-fill, for the same reason the keystone grid
   uses them: the drawings inside the cards share one scale, and a row of
   unequal cards would silently rescale them against each other.
   --------------------------------------------------------------------------- */
.catalog { padding-block: var(--mf-space-4) var(--mf-space-5); }
.catalog .grid { margin-top: var(--mf-space-3); }
@media (min-width: 34rem) { .catalog .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .catalog .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .catalog .grid { grid-template-columns: repeat(4, 1fr); } }

/* The card is a link target on the catalog page, so its padding moves inward
   and the photograph goes edge to edge. */
.grid .product { padding: 0 0 var(--mf-space-3); }
.grid .product > :not(.shot):not(.product__scale) { margin-inline: var(--mf-space-3); }
.grid .product__sku { margin-top: var(--mf-space-3); }
.product__link { color: #fff; text-decoration: none; }
.product__link:hover { color: var(--mf-green); }
.product:has(.product__link:hover) { background: rgba(0, 47, 93, 0.62); }

.empty {
  grid-column: 1 / -1;
  padding: var(--mf-space-5) 0;
  font-weight: 300;
  color: var(--mf-on-surface-dim);
}

/* ---------------------------------------------------------------------------
   18. Product page
   --------------------------------------------------------------------------- */
.detail { padding-block: var(--mf-space-5); }
.detail__cols { display: grid; gap: var(--mf-space-5); align-items: start; }
@media (min-width: 58rem) { .detail__cols { grid-template-columns: 1.05fr 1fr; } }

.shot--large { aspect-ratio: 3 / 2; padding: var(--mf-space-3); }
.shot--large .shot__gap-word { max-width: 22ch; font-size: var(--mf-size-body); }

.views { display: flex; flex-wrap: wrap; gap: var(--mf-space-2); margin-top: var(--mf-space-2); }
.views__btn {
  width: 76px;
  padding: 4px;
  border: 2px solid var(--mf-rule);
  background: var(--mf-navy-deep);
  cursor: pointer;
}
.views__btn img { display: block; width: 100%; height: 56px; object-fit: contain; }
.views__btn[aria-pressed="true"] { border-color: var(--mf-bright-blue); }
.views__btn:hover { border-color: var(--mf-on-surface); }

.shot-note {
  margin-top: var(--mf-space-3);
  padding-left: 0.75em;
  border-left: 3px solid var(--mf-grey-dark);
  font-weight: 300;
  font-size: var(--mf-size-small);
  color: var(--mf-on-surface-dim);
}
.shot-note--flag { border-left-color: #f0a438; }

.detail h1 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); color: #fff; }
.detail__name { margin-top: var(--mf-space-2); font-weight: 300; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.8); }

.detail__specs { margin-top: var(--mf-space-4); border-top: 1px solid var(--mf-rule); }
.detail__specs .specs { gap: 0; }
.detail__specs .specs dt,
.detail__specs .specs dd {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--mf-rule);
  font-size: 0.9375rem;
}
.detail__specs .specs dt { font-weight: 300; color: var(--mf-on-surface-dim); }

.detail__block { margin-top: var(--mf-space-4); }
.detail__block h2 { font-size: 1.0625rem; color: #fff; }
.detail__block ul { margin: var(--mf-space-2) 0 0; padding-left: 1.1em; }
.detail__block li { margin-bottom: var(--mf-space-2); font-weight: 300; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.82); max-width: 58ch; }
.detail__desc { margin-top: var(--mf-space-2); font-weight: 300; max-width: 62ch; color: rgba(255, 255, 255, 0.82); }

.badges { display: flex; flex-wrap: wrap; gap: var(--mf-space-2); margin-top: var(--mf-space-3); }
.badge {
  padding: 0.3em 0.7em;
  border: 1px solid var(--mf-rule);
  border-radius: var(--mf-radius-pill);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--mf-slate);
}

/* The scale figure on the product page carries a real reference: a 12 inch bar
   drawn at the same scale as the product beside it. */
.scale-fig { margin: var(--mf-space-4) 0 0; padding: var(--mf-space-3); background: rgba(0, 28, 55, 0.5); border-top: var(--mf-card-rule) solid var(--mf-slate); }
.scale-fig figcaption { margin-top: var(--mf-space-3); font-weight: 300; font-size: var(--mf-size-small); color: var(--mf-on-surface-dim); max-width: 46ch; }
/* Capped so the drawing stays a diagram rather than filling the column. The
   ruler beside it is what makes it readable, not its size on screen. */
.scale-fig svg { display: block; width: 100%; max-width: 20rem; height: auto; overflow: visible; }
.elev__ruler { stroke: var(--mf-green); stroke-width: 1.5; }
.elev__ruler-tick { stroke: var(--mf-green); stroke-width: 1.5; }
.elev__ruler-label { fill: var(--mf-green); font-family: var(--mf-font); font-weight: 500; font-size: 9px; }

.catalog-more { margin-top: var(--mf-space-4); }
.section__head a.u-label { text-decoration: none; }
.section__head a.u-label:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   19. Quality floor
   --------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  :root { --mf-gutter: 1.25rem; }
  .hero { min-height: min(86vh, 640px); }
  .site-head__logo { width: 132px; }
  .specs dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   20. OEM cross-reference

   Six automotive approvals, searchable from either end. The three states a
   Monoflo SKU can be in are colour-coded on the left rule, the same 7px system
   the product cards use, because "approved but not in the published catalog" is
   the finding this page exists to surface and it has to be visible at a glance.
   --------------------------------------------------------------------------- */
.xrefs { margin-top: var(--mf-space-4); display: grid; gap: 1px; background: var(--mf-rule); }

.xref {
  display: grid;
  gap: 0.2rem var(--mf-space-3);
  padding: var(--mf-space-3);
  background: var(--mf-surface);
  border-left: var(--mf-card-rule) solid var(--mf-slate);
}
.xref[data-state="variant-of-catalog"] { border-left-color: var(--mf-grey-dark); }
.xref[data-state="not-in-catalog"] { border-left-color: #f0a438; }
.xref[data-state="no-cross-reference-published"] { border-left-color: var(--mf-grey-dark); }
@media (min-width: 52rem) {
  .xref {
    grid-template-columns: 8rem 12rem 11rem 1fr;
    align-items: baseline;
  }
}

.xref__oem { color: var(--mf-slate); }
.xref__monoflo { font-weight: 500; font-size: 1rem; color: #fff; font-variant-numeric: tabular-nums; }
.xref__monoflo a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.xref__monoflo a:hover { color: var(--mf-green); border-bottom-color: var(--mf-green); }
.xref__part { font-weight: 500; font-size: 1rem; color: var(--mf-green); font-variant-numeric: tabular-nums; }
.xref__part .xref__lead { display: block; font-weight: 300; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mf-on-surface-dim); }
.xref__state { font-weight: 300; font-size: var(--mf-size-small); color: var(--mf-on-surface-dim); }
.xref__state a { color: var(--mf-slate); }
.xref__family { display: block; font-weight: 300; font-size: 0.75rem; color: var(--mf-grey-dark); }

/* The per-OEM panels under the results: the approval statement verbatim, and
   the colour and decoration requirements the document sets per family. */
.oems { display: grid; gap: var(--mf-space-3); margin-top: var(--mf-space-4); }
@media (min-width: 46rem) { .oems { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .oems { grid-template-columns: repeat(3, 1fr); } }

.oem {
  padding: var(--mf-space-3);
  background: rgba(0, 47, 93, 0.42);
  border-top: var(--mf-card-rule) solid var(--mf-blue);
}
.oem h3 { color: #fff; }
.oem__quote {
  margin-top: var(--mf-space-2);
  padding-left: 0.75em;
  border-left: 2px solid var(--mf-green);
  font-weight: 300;
  font-size: var(--mf-size-small);
  color: rgba(255, 255, 255, 0.82);
}
.oem__counts { margin-top: var(--mf-space-3); font-weight: 300; font-size: var(--mf-size-small); color: var(--mf-on-surface-dim); }
.oem__fams { margin: var(--mf-space-3) 0 0; padding: 0; list-style: none; }
.oem__fam { padding-top: var(--mf-space-2); border-top: 1px solid var(--mf-rule); margin-top: var(--mf-space-2); }
.oem__fam b { font-weight: 500; font-size: var(--mf-size-small); color: #fff; }
.oem__fam span { display: block; font-weight: 300; font-size: 0.75rem; line-height: 1.4; color: var(--mf-on-surface-dim); }
.oem__src { margin-top: var(--mf-space-3); font-size: 0.75rem; }
.oem__src a { color: var(--mf-slate); }

/* The one-line answer to "who has approved this part", shown when a search
   resolves to a single Monoflo SKU. */
.verdict {
  margin-top: var(--mf-space-4);
  padding: var(--mf-space-3);
  border-left: var(--mf-card-rule) solid var(--mf-green);
  background: rgba(0, 47, 93, 0.5);
}
.verdict strong { font-weight: 500; color: #fff; }
.verdict p { font-weight: 300; color: rgba(255, 255, 255, 0.82); }
.verdict p + p { margin-top: var(--mf-space-2); }

/* ---------------------------------------------------------------------------
   21. The spec sheet button on the product page
   --------------------------------------------------------------------------- */
.sheet { margin-top: var(--mf-space-4); padding-top: var(--mf-space-4); border-top: 1px solid var(--mf-rule); }
.sheet__note {
  margin-top: var(--mf-space-2);
  font-weight: 300;
  font-size: var(--mf-size-small);
  color: var(--mf-on-surface-dim);
  max-width: 46ch;
}