/* Shared product mockups. Rendered from markup rather than exported as images, so a
   reposition updates them everywhere at once and a test can assert what they say.
   Used by index, builders, propertymanagers and realtors. */
/* The four product shots used to be PNGs exported from a build that only knew about
   mechanical equipment. Every reposition made them wrong again and nobody noticed,
   because a picture does not fail a test. These are rendered from markup that mirrors
   the real report, so when the product moves these move with it, and a test can assert
   what they say. */
.mk{font-family:var(--font-body);background:#FFFDFA;padding:18px 18px 20px}
.mk-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.mk-addr{font-size:14px;font-weight:600;color:var(--ink)}
.mk-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
.mk-id{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-mute);text-align:right;white-space:nowrap}
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.mk-stat{border:1px solid var(--line-soft);border-radius:9px;padding:9px 10px}
.mk-stat b{display:block;font-family:var(--font-display,Georgia,serif);font-size:20px;line-height:1.1;color:var(--ink)}
.mk-stat span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.mk-ring{display:flex;align-items:center;gap:12px;border:1px solid var(--line-soft);border-radius:11px;padding:12px 14px;margin-bottom:10px}
.mk-ring i{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--font-display,Georgia,serif);font-size:19px;font-weight:600;color:#3F7A4F;
  background:conic-gradient(#5A8C3E 0 74%,#E5DFD0 74% 100%)}
.mk-ring i em{width:40px;height:40px;border-radius:50%;background:#FFFDFA;display:flex;align-items:center;justify-content:center;font-style:normal}
.mk-ring div b{display:block;font-size:13.5px;color:var(--ink)}
.mk-ring div span{font-size:11.5px;color:var(--ink-soft);line-height:1.45;display:block;margin-top:2px}
.mk-cls{margin-top:12px}
.mk-clsh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:3px;margin-bottom:7px}
.mk-clsh b{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mk-clsh span{font-size:9.5px;color:var(--ink-mute)}
.mk-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 0}
.mk-row b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.mk-row span{display:block;font-family:var(--font-mono);font-size:9px;color:var(--ink-mute);margin-top:1px;letter-spacing:.02em}
.mk-sc{font-family:var(--font-display,Georgia,serif);font-size:15px;font-weight:600;flex:none}
.mk-ev{display:inline-flex;gap:2.5px;align-items:center;margin-top:3px}
.mk-ev i{width:4px;height:4px;border-radius:50%;background:var(--line);display:block}
.mk-ev i.on{background:#5A8C3E}
.mk-ev em{font-style:normal;font-family:var(--font-mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin-left:4px}
.mk-sig{border:1px solid var(--line-soft);border-radius:11px;padding:13px 15px;background:#fff}
.mk-sig .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.mk-sig .h b{font-size:13px;color:var(--ink)}
.mk-sig .h span{font-family:var(--font-mono);font-size:9px;color:var(--ink-mute)}
.mk-read{display:grid;grid-template-columns:1fr auto auto;gap:5px 10px;font-size:11.5px;padding:8px 0;border-top:1px solid var(--line-soft)}
.mk-read u{text-decoration:none;color:var(--ink-soft)}
.mk-read b{font-family:var(--font-mono);font-size:11px;color:var(--ink);font-weight:500}
.mk-read i{font-style:normal;font-family:var(--font-mono);font-size:9.5px;color:#3F7A4F}
.mk-read i.warn{color:#8A5A2E}
.mk-by{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--ink-soft)}
.mk-by b{color:var(--ink);font-weight:600}
.mk-tr{border:1px solid var(--line-soft);border-radius:11px;padding:14px 15px;background:#fff}
.mk-tr .step{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.mk-tr .step i{width:16px;height:16px;border-radius:50%;flex:none;background:#5A8C3E;color:#fff;font-style:normal;
  font-family:var(--font-mono);font-size:9px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mk-tr .step i.next{background:var(--line);color:var(--ink-mute)}
.mk-tr .step b{display:block;font-size:12.5px;color:var(--ink)}
.mk-tr .step span{display:block;font-size:11px;color:var(--ink-soft);line-height:1.45;margin-top:1px}