/* ===========================================================================
 * Serialised stock, graded stock, compatibility and the knowledge base.
 *
 * A SEPARATE STYLESHEET, ON PURPOSE
 *
 * optikmash.css is what every page loads and what half the site's components
 * depend on. These are features that are still being reviewed, so keeping their
 * styles in one file means dropping any of them is deleting a file rather than
 * unpicking a merge. Loaded by catalogue-page.html and injected by seo.php into
 * product pages that actually render one of these blocks.
 *
 * Tokens come from optikmash.css :root and nothing here redefines one.
 *
 * THE SHAPE EVERYTHING SHARES
 *
 * Three of these blocks are the same problem — a set of things a visitor is
 * choosing between — so they are one component wearing three names: .om-stock-row
 * (machines), .om-option (accessory stock lines), .om-compat-card (parts).
 * Media left, what-it-is in the middle, price and action right, restacking at
 * the same two breakpoints. Learning the pattern once should be enough.
 * ======================================================================== */

/* Visually-hidden label for the stretched links below, which have no visible
   text of their own. */
.om-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────── */
.om-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}
.om-crumbs a { color: var(--muted); text-decoration: none; }
.om-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.om-crumbs span[aria-hidden] { opacity: .45; }

/* ── Grade chip ─────────────────────────────────────────────────────────
   The letter carries the weight; the word beside it is for the reader who has
   not learned the letters yet. Deliberately not a red/amber/green scale: C is
   not a fault, it is a working machine sold as-is, and a red chip would sell it
   as a defect. */
.om-grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}
.om-grade-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--accent);
}
.om-grade-a .om-grade-letter { background: #0e7a4a; }
.om-grade-b .om-grade-letter { background: #0275b2; }
.om-grade-c .om-grade-letter { background: #6b6b6b; }
.om-grade-name { color: var(--muted); white-space: nowrap; }
a.om-grade-chip:hover .om-grade-name { color: var(--accent); }

/* The free-text differentiator — "with fluorescein module", "2 m". Reads before
   the grade because it is the thing somebody actually wrote about this unit. */
.om-unit-variant {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 3px;
  background: rgba(2, 117, 178, .09);
  color: #01517c;
  white-space: nowrap;
}

/* ── Missing-image placeholder ──────────────────────────────────────── */
.om-stock-noimg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 64px;
  background:
    repeating-linear-gradient(-45deg, #f2f4f5 0 6px, #edf0f1 6px 12px);
}

/* ═══ Stock blocks: machines, and accessory options ═══════════════════ */
.om-stock {
  margin: 44px 0 8px;
  padding-top: 34px;
  border-top: 1px solid #e6e9eb;
}
.om-stock-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 6px;
}
.om-stock-title {
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.01em;
}
.om-stock-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* The price block. A RANGE, not a "from" — see om_price_summary_html(). */
.om-stock-pricebox { text-align: right; flex-shrink: 0; }
.om-stock-pricelabel {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.om-stock-range {
  display: block;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.om-stock-dash { margin: 0 5px; font-weight: 400; color: var(--muted); }

.om-stock-note {
  margin: 12px 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 74ch;
}
.om-stock-empty { margin: 16px 0 24px; font-size: 15px; }

.om-stock-list { display: flex; flex-direction: column; gap: 10px; }

/* One machine. Grid rather than flex so the three tracks line up down the
   column — the whole point of a row over a tile is that the eye can compare
   the same figure across machines without travelling sideways. */
.om-stock-row {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.om-stock-row:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 26px -18px rgba(2, 117, 178, .55);
}
.om-stock-row:focus-within { border-color: var(--accent); }
.om-stock-row.is-sold { opacity: .62; }
.om-stock-row.is-sold:hover { opacity: .85; }

.om-stock-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fafbfb;
}
.om-stock-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.om-stock-main { min-width: 0; }
.om-stock-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.om-stock-head {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.om-stock-facts {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.om-stock-flag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.om-stock-flag.is-sold     { background: #eef0f1; color: #5f6c74; }
.om-stock-flag.is-reserved { background: #fdf1d8; color: #7a5c00; }

.om-stock-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  flex-shrink: 0;
}
.om-stock-price {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.om-stock-price.is-muted { color: var(--muted); font-weight: 400; }

/* The row's only link, stretched over the whole row. One anchor per card is not
   a style choice: an <a> nested inside another <a> makes the parser close the
   outer one, and the card comes apart into separate grid items. */
.om-stock-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.om-stock-go::after { content: ""; position: absolute; inset: 0; }
.om-stock-go svg { transition: transform .18s; }
.om-stock-row:hover .om-stock-go svg { transform: translateX(3px); }
.om-stock-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sold machines, folded away but kept. */
.om-stock-sold { margin-top: 18px; }
.om-stock-sold > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.om-stock-sold > summary::-webkit-details-marker { display: none; }
.om-stock-sold > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
}
.om-stock-sold[open] > summary::before { transform: rotate(45deg); }
.om-stock-sold > summary:hover { color: var(--accent); }

/* ── Accessory stock lines ──────────────────────────────────────────── */
.om-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.om-option {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
}
.om-option.is-out { opacity: .62; }
.om-option-media { aspect-ratio: 1; overflow: hidden; background: #fafbfb; }
.om-option-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-option-body { min-width: 0; }
.om-option-title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.om-option-qual { margin-top: 5px; }
.om-option-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.om-option-buy {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.om-option-price { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.om-option-qty {
  font-size: 12px;
  font-weight: 600;
  color: #0e7a4a;
  background: #e7f3ec;
  padding: 3px 8px;
  border-radius: 3px;
}
.om-option-qty.is-out { color: #6b7a84; background: #eef0f1; }

/* ── Compatibility ──────────────────────────────────────────────────── */
.om-compat {
  margin: 44px 0;
  padding-top: 34px;
  border-top: 1px solid #e6e9eb;
}
.om-compat-header { margin-bottom: 22px; }
.om-compat-title {
  font-size: clamp(20px, 2.4vw, 25px);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.om-compat-intro { margin: 0; color: var(--muted); font-size: 15px; max-width: 70ch; }

.om-compat-group { margin-bottom: 26px; }
.om-compat-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.om-compat-count {
  font-size: 11px;
  background: #eef1f3;
  color: #5f6c74;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0;
}

.om-compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.om-compat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.om-compat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 26px -18px rgba(2, 117, 178, .55);
}
.om-compat-media { aspect-ratio: 4 / 3; background: #fafbfb; overflow: hidden; }
.om-compat-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.om-compat-card:hover .om-compat-media img { transform: scale(1.04); }
.om-compat-body {
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.om-compat-brand {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.om-compat-name { font-size: 14.5px; font-weight: 600; margin: 0; line-height: 1.35; }
/* Fitment is a caveat that costs a return when it is missed. It is styled to be
   read, not to be tidy. */
.om-compat-fitment {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  background: #fdf1d8;
  color: #7a5c00;
  padding: 3px 8px;
  border-radius: 3px;
}
.om-compat-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.om-compat-price {
  margin-top: auto;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.om-compat-link::after { content: ""; position: absolute; inset: 0; }
.om-compat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Model card on a listing page ───────────────────────────────────── */
.om-model-card .om-product-image { position: relative; display: block; }
.om-model-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(2, 117, 178, .95);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 3px;
}
.om-model-badge-out  { background: rgba(0, 0, 0, .6); }
.om-model-badge-best { background: #0e7a4a; }
.om-model-spread { font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
.om-model-dash { margin: 0 3px; color: var(--muted); font-weight: 400; }
.om-model-specs {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}
.om-model-specs li { display: flex; gap: 6px; }
.om-model-specs span { font-weight: 600; color: var(--text); }
.om-premium-card { border-color: var(--accent); }
.om-premium-meta { font-size: 13px; color: var(--muted); }

/* ═══ Unit page ═══════════════════════════════════════════════════════ */
.om-um { padding: 28px 0 60px; }
.om-um-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
  align-items: start;
}
.om-um-main {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid #e6e9eb;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.om-um-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-um-stamp {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(16, 23, 29, .82);
  color: #fff;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 7px 14px;
}
.om-um-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.om-um-thumb {
  width: 74px; height: 74px;
  border: 2px solid transparent;
  outline: 1px solid #e6e9eb;
  display: block;
  flex-shrink: 0;
}
.om-um-thumb.is-active { border-color: var(--accent); outline-color: var(--accent); }
.om-um-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.om-um-eyebrow {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.om-um-title {
  font-size: clamp(24px, 3.4vw, 33px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.om-um-marks { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }

/* The figures a buyer compares between two tabs — same place on every unit. */
.om-um-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin: 0 0 24px;
  background: #e6e9eb;
  border: 1px solid #e6e9eb;
}
.om-um-facts > div { background: var(--card-bg); padding: 12px 14px; }
.om-um-facts dt {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.om-um-facts dd {
  margin: 4px 0 0;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.om-um-buy {
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  border-left: 3px solid var(--accent);
  padding: 22px;
}
.om-um-buy.is-sold { border-left-color: #9aa6ad; background: #fafbfb; }
.om-um-status {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.om-um-status.is-reserved {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #fdf1d8;
  color: #7a5c00;
  padding: 4px 9px;
  border-radius: 3px;
}
.om-um-pricelabel {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.om-um-price {
  display: block;
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 10px;
  font-variant-numeric: tabular-nums;
}
.om-um-status-note {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 46ch;
}
.om-um-buy .btn-om { width: 100%; text-align: center; }
.om-um-secondary {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  text-align: center;
}

.om-um-section { margin: 52px 0 0; padding-top: 34px; border-top: 1px solid #e6e9eb; }
.om-um-section h2 {
  font-size: clamp(19px, 2.2vw, 23px);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.om-um-prose { max-width: 72ch; line-height: 1.75; font-size: 15.5px; }
/* Prose at a readable measure, with the grade's promise beside it rather than
   half a page of white. */
.om-um-split {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(220px, 1fr);
  gap: 44px;
  align-items: start;
}
.om-um-gradecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #f5f8fa;
  border-left: 3px solid var(--accent);
  position: sticky;
  top: 92px;
}
.om-um-gradecard p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.om-um-gradecard strong { color: var(--text); }
.om-um-gradecard a { font-size: 13.5px; font-weight: 600; }
@media (max-width: 900px) {
  .om-um-split { grid-template-columns: 1fr; gap: 22px; }
  .om-um-gradecard { position: static; }
}

/* ═══ Condition grades page ═══════════════════════════════════════════ */
.om-gp { padding: 28px 0 64px; }
.om-gp-head { max-width: 68ch; margin-bottom: 40px; }
.om-gp-head h1 {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.om-gp-lead { font-size: 17px; line-height: 1.7; margin: 0; }

.om-gp-grades { display: flex; flex-direction: column; gap: 18px; }
.om-gp-grade {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
}
.om-gp-shot { margin: 0; }
.om-gp-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid #e6e9eb;
}
.om-gp-shot figcaption { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.om-gp-shot.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(-45deg, #f2f4f5 0 6px, #edf0f1 6px 12px);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 12px;
}
.om-gp-chip { margin-bottom: 10px; }
.om-gp-chip .om-grade-letter { width: 30px; height: 30px; font-size: 15px; }
.om-gp-chip .om-grade-name { font-size: 19px; font-weight: 600; color: var(--text); }
.om-gp-summary { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.om-gp-todo { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0; }
.om-gp-count { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.om-gp-count strong { color: var(--text); }
.om-gp-foot {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e6e9eb;
  max-width: 68ch;
}
.om-gp-foot h2 { font-size: 21px; margin: 0 0 12px; }
.om-gp-foot p { line-height: 1.7; margin: 0 0 20px; }

/* ═══ Knowledge base ══════════════════════════════════════════════════ */
.om-kb { padding: 28px 0 64px; }
.om-kb-head, .om-kb-modelhead { margin-bottom: 36px; }
.om-kb-h1 {
  font-size: clamp(26px, 3.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  text-wrap: balance;
  max-width: 22ch;
}
.om-kb-lead { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 62ch; }
.om-kb-sec {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e9eb;
}
.om-kb-empty { color: var(--muted); font-size: 15px; }

.om-kb-modelhead {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.om-kb-modelhead-media {
  width: 132px; height: 132px;
  flex-shrink: 0;
}
.om-kb-modelhead-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-kb-modellink { font-size: 14px; font-weight: 600; }

.om-kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 48px;
  align-items: start;
}

/* Article rows: thumbnail, title, one line of the answer. Nothing else — a
   knowledge index that carries dates, tags and read-times buries the only thing
   the reader is scanning for, which is whether their question is on the list. */
.om-kb-list { display: flex; flex-direction: column; gap: 10px; }
.om-kb-row {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  transition: border-color .18s, box-shadow .18s;
}
.om-kb-row:only-child, .om-kb-row:hover {
  border-color: var(--accent);
}
.om-kb-row:hover { box-shadow: 0 8px 26px -18px rgba(2, 117, 178, .55); }
/* Two kinds of picture, opposite treatment.
   `cover` is gone from both: cropping a product shot cuts the instrument and
   cropping a screenshot cuts the menu it exists to show. Nothing here is ever
   cropped again. */
.om-kb-row-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.om-kb-row-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* A screenshot is a rectangular photograph and wants an edge. */
.om-kb-row-media.is-shot {
  background: #fafbfb;
  border: 1px solid #eef1f2;
}

/* A product photo is a cut-out on transparency. A box around it turns an
   instrument floating on the page into a stamp of a grey square — so there is
   no box, no fill and no border, and the height alone sets the size. Slightly
   inset so the machine does not touch the title beside it. */
.om-kb-row-media.is-product {
  background: none;
  border: 0;
  padding: 2px 6px 2px 0;
  box-sizing: border-box;
}
.om-kb-row-body { min-width: 0; }
.om-kb-row-model {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.om-kb-row-title { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.35; letter-spacing: -.01em; }
.om-kb-row-teaser {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.om-kb-row-link::after { content: ""; position: absolute; inset: 0; }
.om-kb-row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.om-kb-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
}
.om-kb-model {
  position: relative;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.om-kb-model:hover { border-color: var(--accent); box-shadow: 0 8px 26px -18px rgba(2, 117, 178, .55); }
.om-kb-model-media { aspect-ratio: 4 / 3; overflow: hidden; padding: 8px; box-sizing: border-box; }
.om-kb-model-media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s; }
.om-kb-model:hover .om-kb-model-media img { transform: scale(1.04); }
.om-kb-model-body { padding: 13px; }
.om-kb-model-body h3 { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.35; }
.om-kb-model-body span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* The article itself. */
.om-kb-article { max-width: 72ch; }
.om-kb-article .om-kb-h1 { max-width: none; }
/* The answer. Set apart because it is what the visitor was promised by the
   result they clicked and what a featured snippet is lifted from — and because
   a visual break is what stops it drifting into a preamble as it is edited. */
.om-kb-answer {
  padding: 20px 22px;
  background: #f2f8fc;
  border-left: 3px solid var(--accent);
  margin: 0 0 26px;
}
.om-kb-answer-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
.om-kb-answer p { margin: 0; font-size: 18px; line-height: 1.6; }

/* The screenshot of the actual menu screen — the part nobody can copy. Full
   column width, directly under the answer, never floated beside the text. */
.om-kb-shot { margin: 0 0 26px; }
.om-kb-shot img { width: 100%; height: auto; display: block; border: 1px solid #e6e9eb; }
.om-kb-shot figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

.om-kb-body { line-height: 1.78; font-size: 16px; }
.om-kb-body h2 { font-size: 20px; margin: 30px 0 10px; }
.om-kb-body ol, .om-kb-body ul { padding-left: 22px; margin: 16px 0; }
.om-kb-body li { margin: 8px 0; }
.om-kb-body ol { counter-reset: kbstep; list-style: none; padding-left: 0; }
.om-kb-body ol > li {
  counter-increment: kbstep;
  position: relative;
  padding-left: 40px;
  margin: 14px 0;
}
.om-kb-body ol > li::before {
  content: counter(kbstep);
  position: absolute;
  left: 0; top: 1px;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
}
.om-kb-reviewed {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #e6e9eb;
  font-size: 13px;
  color: var(--muted);
}
.om-kb-more { margin-top: 48px; padding-top: 30px; border-top: 1px solid #e6e9eb; }
.om-kb-more h2 { font-size: 20px; margin: 0 0 16px; }

/* The commercial block. Beside the article, never inside it. */
.om-kb-stock {
  position: sticky;
  top: 92px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  overflow: hidden;
}
/* Always a product photo — the machine the article is about. Unboxed for the
   same reason as the rows: it is a cut-out, and the card already has an edge. */
.om-kb-stock-media { aspect-ratio: 4 / 3; padding: 14px 14px 4px; box-sizing: border-box; }
.om-kb-stock-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-kb-stock-body { padding: 16px; display: flex; flex-direction: column; gap: 3px; }
.om-kb-stock-model {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.om-kb-stock-line { font-size: 17px; font-weight: 700; }
.om-kb-stock-sub { font-size: 14px; color: var(--muted); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.om-kb-stock .btn-om { text-align: center; }

/* ── Listing sidebar: machine filters ───────────────────────────────── */
.om-unit-filters { margin-bottom: 4px; }
#om-unit-mode-notice {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  padding: 11px 15px;
  background: #f2f8fc;
  border-left: 3px solid var(--accent);
  font-size: 14px;
}

/* ═══ Responsive ══════════════════════════════════════════════════════
   Two breakpoints, shared by every block above, so the whole feature set
   restacks at the same two widths rather than each piece choosing its own. */
@media (max-width: 900px) {
  .om-um-top    { grid-template-columns: 1fr; gap: 28px; }
  .om-kb-layout { grid-template-columns: 1fr; gap: 32px; }
  .om-kb-stock  { position: static; display: grid; grid-template-columns: 132px 1fr; }
  .om-kb-stock-media { aspect-ratio: 1; }
  .om-gp-grade  { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  /* Rows become cards: media and text side by side, price and action on their
     own line underneath, so nothing is squeezed to three characters wide. */
  .om-stock-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
  }
  .om-stock-buy {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 11px;
    border-top: 1px solid #eef1f2;
  }
  .om-stock-header { flex-direction: column; align-items: flex-start; }
  .om-stock-pricebox { text-align: left; }
  .om-stock-head { font-size: 16px; }

  .om-options { grid-template-columns: 1fr; }
  .om-option  { grid-template-columns: 72px minmax(0, 1fr); }

  .om-compat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  .om-kb-row { grid-template-columns: 84px minmax(0, 1fr); gap: 13px; padding: 12px; }
  .om-kb-row-title { font-size: 15.5px; }
  .om-kb-models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .om-kb-answer p { font-size: 16.5px; }
  .om-kb-modelhead-media { width: 92px; height: 92px; }

  .om-gp-grade { grid-template-columns: 1fr; gap: 16px; }
  .om-um-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .om-stock-row, .om-compat-card, .om-kb-row, .om-kb-model,
  .om-compat-media img, .om-kb-model-media img, .om-stock-go svg {
    transition: none;
  }
}

/* Options with no photographs anywhere in the block: one column, no reserved
   media track. See the note in om_grade_table_html(). */
.om-options.is-textonly .om-option { grid-template-columns: minmax(0, 1fr); }
.om-options.is-textonly .om-option-buy { grid-column: 1; }

/* Rows and cards without a picture: one column, not an empty media track with
   the text crushed into it. */
.om-kb-row.is-noimg { grid-template-columns: minmax(0, 1fr); }
.om-kb-model.is-noimg { display: flex; align-items: center; min-height: 104px; }
.om-kb-model.is-noimg .om-kb-model-body { padding: 16px; }

/* No stock block to put beside the article — one column rather than a page
   with an empty right third. */
.om-kb-layout.is-solo { grid-template-columns: minmax(0, 1fr); }

/* ── Knowledge snippets on a machine page ───────────────────────────────
   Cards, because the block sits between a stock list and a compatibility grid
   and a third visual idiom on one page is one too many. */
.om-kbp {
  margin: 44px 0;
  padding-top: 34px;
  border-top: 1px solid #e6e9eb;
}
.om-kbp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.om-kbp-title {
  font-size: clamp(20px, 2.4vw, 25px);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.om-kbp-sub { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
.om-kbp-all { font-size: 14px; font-weight: 600; white-space: nowrap; }

.om-kbp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.om-kbp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.om-kbp-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 26px -18px rgba(2, 117, 178, .55);
}
.om-kbp-media { aspect-ratio: 16 / 10; overflow: hidden; }
.om-kbp-media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s; }
.om-kbp-media.is-shot { background: #fafbfb; }
/* A cut-out on transparency: no tile behind it, and inset so the machine has
   air rather than butting against the card's edge. */
.om-kbp-media.is-product { padding: 10px 10px 0; box-sizing: border-box; }
.om-kbp-card:hover .om-kbp-media img { transform: scale(1.04); }
.om-kbp-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.om-kbp-name { font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.35; }
.om-kbp-teaser { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.om-kbp-read {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.om-kbp-link::after { content: ""; position: absolute; inset: 0; }
.om-kbp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The machine, under the hero on a knowledge model hub. */
.om-kb-modelstrip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 28px;
  background: var(--card-bg);
  border: 1px solid #e6e9eb;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s;
}
.om-kb-modelstrip:hover { border-color: var(--accent); }
/* Always the machine itself, always a cut-out. Unboxed, uncropped, and a shade
   larger than it was — without the tile behind it the photo is the only thing
   occupying the slot. */
.om-kb-modelstrip-media {
  width: 76px; height: 76px;
  flex-shrink: 0;
}
.om-kb-modelstrip-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-kb-modelstrip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.om-kb-modelstrip-body strong { font-size: 15.5px; }
.om-kb-modelstrip-body span { font-size: 13.5px; color: var(--accent); }

/* Breadcrumbs sit inside the shared hero band now. */
.om-page-title-section .om-crumbs { margin-bottom: 10px; }

@media (max-width: 640px) {
  .om-kbp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}

/* Sparse relations collapse into one grid — see om_compat_block_html(). The
   relation moves onto the card, where it replaces the brand line rather than
   stacking above it: two uppercase labels on one card is what made the headed
   version look busy in the first place. */
.om-compat-group-flat { margin-bottom: 0; }
.om-compat-rel {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5f6c74;
  background: #eef1f3;
  padding: 2px 7px;
  border-radius: 10px;
}

/* ========================================================================
   KNOWLEDGE BASE — index
   ========================================================================
   A reference work, and it is set like one. The catalogue pages sell; this
   page answers, and the two should not look the same.

   The Wikipedia debt is deliberate and specific: a centred masthead with the
   search directly under the title, a serif face for headings only, thin rules
   instead of boxes, and rows of text rather than cards. What is NOT borrowed is
   the density — this has ten articles, not six million, so it breathes.
   ======================================================================== */

.om-kbx { background: #fff; }

.om-kbx-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.om-kbx-masthead {
  text-align: center;
  padding: 54px 0 38px;
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 100%);
  border-bottom: 1px solid #e6e9eb;
}
.om-kbx-title {
  /* The one serif on the site. It marks this section as reference material
     before a word of it is read, which is the whole job of a display face. */
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.015em;
  margin: 0 0 10px;
  color: #1a1a1a;
}
.om-kbx-lede {
  margin: 0 auto 26px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

/* The search box is the largest thing on the masthead on purpose: somebody
   arriving here has a question, not a desire to browse. */
.om-kbx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccd4d9;
  border-radius: 3px;
  padding: 4px 4px 4px 14px;
  transition: border-color .16s, box-shadow .16s;
}
.om-kbx-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(2, 117, 178, .13);
}
.om-kbx-search-icon { width: 19px; height: 19px; fill: #97a4ac; flex: none; }
.om-kbx-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16px;      /* 16px so iOS does not zoom the page on focus */
  padding: 11px 0;
  color: var(--text);
}
.om-kbx-search input::-webkit-search-cancel-button { display: none; }
.om-kbx-search-go {
  flex: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 2px;
  cursor: pointer;
}
.om-kbx-search-go:hover { background: var(--accent-d); }

.om-kbx-hints {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.om-kbx-hints span { margin-right: 4px; }
.om-kbx-hints a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(2, 117, 178, .3);
  margin: 0 3px;
}
.om-kbx-hints a:hover { border-bottom-color: var(--accent); }

.om-kbx-body { padding: 34px 0 60px; }

/* Section heads are a rule with a word on it — the lightest possible divider,
   and the reason the page reads as one column rather than a stack of panels. */
.om-kbx-sec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e2e6e9;
  color: #1a1a1a;
}
.om-kbx-sec + * { margin-top: 0; }
.om-kbx-list + .om-kbx-sec,
.om-kbx-models + .om-kbx-sec { margin-top: 40px; }
.om-kbx-count { font-family: inherit; font-size: 14px; color: var(--muted); }
.om-kbx-clear {
  margin-left: auto;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.om-kbx-clear:hover { text-decoration: underline; }

.om-kbx-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.om-kbx-model {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e6e9eb;
  border-radius: 3px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
.om-kbx-model:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px -14px rgba(2, 117, 178, .5);
}
/* Always a product photo. A little taller than it was, because without the
   grey tile behind it the machine is the only thing occupying the space and
   58px of cut-out reads as a speck. */
.om-kbx-model-media {
  width: 66px; height: 66px;
  flex: none;
  overflow: hidden;
}
.om-kbx-model-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-kbx-model-body h3 { font-size: 14.5px; margin: 0 0 2px; line-height: 1.3; font-weight: 600; }
.om-kbx-model-body span { font-size: 12.5px; color: var(--muted); }

/* Article rows: text first, thumbnail second, no card. A list of answers is
   read by scanning the titles, and a border around each one slows that down. */
.om-kbx-list .om-kb-row {
  border: 0;
  border-bottom: 1px solid #edf0f2;
  border-radius: 0;
  background: none;
  padding: 16px 4px;
  box-shadow: none;
}
.om-kbx-list .om-kb-row:last-child { border-bottom: 0; }
.om-kbx-list .om-kb-row:hover { background: #fafbfc; box-shadow: none; }
.om-kbx-list .om-kb-row-title {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: #14507c;
}
.om-kbx-list .om-kb-row:hover .om-kb-row-title { text-decoration: underline; }

.om-kbx-results:not([hidden]) + #om-kbx-browse { display: none; }

/* A hit inside a live result, marked in the answer extract. */
.om-kbx-hit { background: #fff3c4; color: inherit; border-radius: 2px; padding: 0 1px; }

@media (max-width: 640px) {
  .om-kbx-masthead { padding: 34px 0 26px; }
  .om-kbx-search { flex-wrap: wrap; padding-left: 12px; }
  .om-kbx-search-go { width: 100%; margin-top: 4px; }
}

/* ── Two columns on wide ────────────────────────────────────────────────
   The wide column is what somebody came for — machines and answers. The narrow
   one is what they did not know to ask for: the themes, what is new, and what
   this place is.

   The sidebar is SECOND in the source and pulled into place by the grid, so on
   a phone it falls under the articles rather than between the reader and them.
   Below 1000px it is one column and the order is already correct. */
.om-kbx-cols { display: block; }
.om-kbx-side { margin-top: 40px; }

@media (min-width: 1000px) {
  .om-kbx-inner.om-kbx-cols { max-width: 1120px; }
  .om-kbx-cols {
    display: grid;
    /* A fixed sidebar rather than a fraction: its content is short labels and
       counts, and letting it grow with the viewport only stretches the gap
       between a theme and its number. */
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 48px;
    align-items: start;
  }
  .om-kbx-side {
    margin-top: 0;
    position: sticky;
    /* Clears the sticky site header. */
    top: 96px;
  }
}

.om-kbx-panel {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e6e9eb;
}
.om-kbx-panel:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.om-kbx-panel-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8d99a1;
  margin: 0 0 10px;
}

/* Themes: a table of contents, so it is a list of rows with counts and not a
   row of pills. Rows are scannable at a glance and stay put as the list grows;
   pills reflow every time an article is written. */
.om-kbx-themes { list-style: none; margin: 0; padding: 0; }
.om-kbx-themes li { margin: 0; }
.om-kbx-themes a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 3px;
  font-size: 14px;
  color: #14507c;
  text-decoration: none;
  line-height: 1.35;
}
.om-kbx-themes a:hover { background: #f2f6f9; }
.om-kbx-themes a.is-on {
  background: #eaf3f9;
  color: #0b3d61;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.om-kbx-themes em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.om-kbx-new { list-style: none; margin: 0; padding: 0; }
.om-kbx-new li { margin: 0 0 9px; line-height: 1.4; }
.om-kbx-new li:last-child { margin-bottom: 0; }
.om-kbx-new a {
  font-size: 13.5px;
  color: #14507c;
  text-decoration: none;
}
.om-kbx-new a:hover { text-decoration: underline; }

.om-kbx-about p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.om-kbx-about p:last-child { margin-bottom: 0; }
.om-kbx-about a { color: var(--accent); }
.om-kbx-about-stats { color: var(--text) !important; }
.om-kbx-about-stats strong { font-size: 15px; }

/* A theme's own landing page opens by saying what it is a list of — it is a
   page somebody can arrive on cold from a search engine. */
.om-kbx-topichead { margin-bottom: 26px; }
.om-kbx-topicblurb {
  margin: -6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* The theme link on an article. Small, under the answer, never above it. */
.om-kb-topic {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.om-kb-topic span { margin-right: 4px; }
.om-kb-topic a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(2, 117, 178, .3);
}
.om-kb-topic a:hover { border-bottom-color: var(--accent); }

/* The way back up, above a theme's own H1. Small and quiet: it is orientation,
   not a call to action, and it sits where a breadcrumb would. */
.om-kbx-up {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.om-kbx-up:hover { color: var(--accent); }

/* ── Questions on an article ────────────────────────────────────────────
   Answered ones first, the box underneath — somebody still stuck after reading
   the article is about to type a question that has often already been asked,
   and showing those is the cheapest possible deflection. */
.om-kb-qa {
  margin: 48px 0 0;
  padding-top: 34px;
  border-top: 1px solid #e6e9eb;
}
.om-kb-qa-title, .om-kb-ask-title {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 18px;
  color: #1a1a1a;
}
.om-kb-qa-item { margin-bottom: 26px; }
.om-kb-qa-q {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 4px;
  color: #1a1a1a;
}
.om-kb-qa-who { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }

/* The answer is set apart and signed. The entire value of the page is that it
   is US saying it, so the attribution is not a footnote. */
.om-kb-qa-a {
  border-left: 3px solid var(--accent);
  background: #f7fafc;
  padding: 12px 16px;
  border-radius: 0 3px 3px 0;
}
.om-kb-qa-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.om-kb-qa-body { font-size: 15px; line-height: 1.65; color: var(--text); }

.om-kb-ask { margin-top: 34px; }
.om-kb-ask-lede { margin: -8px 0 16px; font-size: 14.5px; color: var(--muted); max-width: 62ch; }
.om-kb-ask-form textarea,
.om-kb-ask-form input[type="text"],
.om-kb-ask-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccd4d9;
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
}
.om-kb-ask-form textarea { resize: vertical; margin-bottom: 10px; }
.om-kb-ask-form textarea:focus,
.om-kb-ask-form input:focus { outline: none; border-color: var(--accent); }

.om-kb-ask-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.om-kb-ask-row input { flex: 1 1 180px; min-width: 0; }
.om-kb-ask-row button { flex: 0 0 auto; }

.om-kb-ask-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.om-kb-ask-msg { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.om-kb-ask-msg.is-ok  { color: #0e7a4a; }
.om-kb-ask-msg.is-err { color: #c0392b; }

/* The honeypot. Off-screen rather than display:none — some bots skip anything
   hidden the obvious way, and this one is meant to be filled in. */
.om-kb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}