/* BlackSig Systems — inline interface mockups for the /systems/* offer pages.
   THE shared primitive library. Every mockup on every system page is built from the
   classes below; nothing here is page-specific and no page defines its own mockup CSS.

   Loaded AFTER brand.css + capture.css, on the nine system pages only:
     <link rel="stylesheet" href="/mockups.css?v=...">

   Accent: each page sets --ac once on the .mkwrap (e.g. style="--ac:var(--cyan)").
   Same variable name the .card grid on /systems uses, so a page's mockup accent can
   match the card the visitor clicked to get here.

   Motion: reuses the sitewide .rv / .d1-.d5 reveal and the .stats count-up in
   chrome.js. No new JS, no looping animation.

   Specificity note: these sit inside .prose, whose element selectors are up to
   0,2,1 (.prose tbody td) and beat a single .mk-* class. Every rule targeting a
   bare element below is therefore prefixed to outrank .prose without depending on
   stylesheet order. See CLAUDE.md section 7. Mockup markup uses div/span/b/em
   only, never <p>/<li>/<a>/<blockquote>, so no other .prose rule can reach in. */

/* ── Reset: neutralise inherited .prose element styling inside a mockup ────── */
.mk.mk table{width:100%;min-width:0;border-collapse:collapse;font-size:inherit;line-height:inherit;margin:0}
.mk.mk th,.mk.mk td{background:none;vertical-align:middle}
.mk em{font-style:normal}

/* ── Container + eyebrow ──────────────────────────────────────────────────── */
.mkwrap{margin:44px 0}
.mkwrap .eyebrow{margin-bottom:14px;color:var(--ac,var(--cyan))}
.mkwrap .eyebrow::before{background:linear-gradient(90deg,var(--ac,var(--cyan)),transparent)}
.mk{border:1px solid var(--line2);border-radius:14px;background:linear-gradient(160deg,var(--bg3),var(--bg2));padding:18px;box-shadow:0 40px 90px -50px rgba(0,0,0,.85);overflow:hidden}
/* .hug: for mockups whose content is intrinsically narrow (a phone, a single doc),
   so the card wraps the content instead of stranding it in a prose-width box. */
.mk.hug{max-width:560px;margin-left:auto;margin-right:auto}

/* Mockup header strip: title left, live status right */
.mk-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.mk-hd .t{font-family:var(--fd);font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--white)}
.mk-hd .s{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2)}

/* Section label inside a mockup */
.mk-lab{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray2);margin-bottom:9px}

/* ── Pill / status badge ──────────────────────────────────────────────────── */
/* .mk .mk-pill wins over component rules that blanket-style bare spans (.mk-card span,
   .mk-slot span). Single-class .mk-pill would lose to those 0,1,1 selectors. */
.mk .mk-pill{display:inline-flex;width:auto;margin-top:0}
.mk-card .mk-pill,.mk-hd .mk-pill{margin-top:9px}
.mk-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--gray2);line-height:1.6;text-align:left}
.mk-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.mk-pill.ok{color:var(--cl);border-color:rgba(34,211,238,.38);background:rgba(34,211,238,.08)}
.mk-pill.warn{color:var(--al);border-color:rgba(245,177,75,.38);background:rgba(245,177,75,.08)}
.mk-pill.bad{color:var(--rose);border-color:rgba(244,113,168,.38);background:rgba(244,113,168,.08)}
.mk-pill.acc{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 42%,transparent);background:color-mix(in srgb,var(--ac) 9%,transparent)}
.mk-pill.flat::before{display:none}

/* ── PhoneFrame: iOS Messages, drawn to the real thing ────────────────────────
   This is the one mockup that is NOT in the site's visual language, on purpose:
   it is what the customer sees on their own phone, so it uses iOS colours, iOS
   type and real device proportions (393x852, the iPhone 15 logical screen).
   Anything the customer would not actually see (missed-call events, internal
   handoffs) belongs in the timeline strip beside it, never inside the thread.
   SMS from a business number renders GREEN on iOS, not iMessage blue. The green
   is nudged a shade darker than Apple's #34C759 so white text clears 3:1. */
.mk-ios{--ios-green:#2FA84F;--ios-rx:#2C2C2E;--ios-gray:#8E8E93;--ios-chrome:#1C1C1E;--ios-bg:#000;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.mk-phone{max-width:308px;margin:0 auto;border-radius:44px;background:#0A0A0C;padding:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 0 1px rgba(255,255,255,.22),0 26px 60px -22px #000}
.mk-screen{aspect-ratio:393/852;border-radius:37px;background:var(--ios-bg);overflow:hidden;display:flex;flex-direction:column;position:relative}

/* status bar + Dynamic Island */
.mk-ios-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:11px 22px 5px;position:relative;z-index:2}
.mk-ios-top .t{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.01em}
.mk-ios-top .ind{display:flex;align-items:center;gap:4px;color:#fff}
.mk-ios-top .ind svg{display:block}
.mk-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:78px;height:22px;border-radius:99px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);z-index:3}

/* conversation header: back chevron, avatar, name, FaceTime */
.mk-ios-hd{flex:0 0 auto;display:grid;grid-template-columns:34px 1fr 34px;align-items:center;padding:3px 8px 9px;
  background:rgba(28,28,30,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:.5px solid rgba(255,255,255,.13);z-index:2}
.mk-ios-hd .nav{display:flex;align-items:center;color:#0A84FF}
.mk-ios-hd .nav.r{justify-content:flex-end}
.mk-ios-hd .who{text-align:center;min-width:0}
.mk-ios-hd .av{width:32px;height:32px;border-radius:50%;margin:0 auto 3px;display:grid;place-items:center;
  background:linear-gradient(180deg,#8E8E93,#636366);color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em}
.mk-ios-hd .nm{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:#fff;line-height:1.2}
.mk-ios-hd .nm svg{flex:0 0 auto;color:var(--ios-gray)}

/* thread: sits at the bottom of the screen like a real conversation. Anything
   taller than the screen is clipped at the top under a fade, exactly as it
   would be in a screenshot. The full text stays in the DOM for crawlers. */
.mk-thread{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px 12px 6px;position:relative;overflow:hidden}
.mk-thread::before{content:'';position:absolute;top:0;left:0;right:0;height:26px;background:linear-gradient(180deg,var(--ios-bg),transparent);pointer-events:none;z-index:1}
.mk-thread .mk-day{align-self:center;font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ios-gray);margin:4px 0 8px}
.mk-thread .mk-day em{font-weight:400}
.mk-thread .mk-b{position:relative;max-width:74%;padding:7px 12px 8px;border-radius:17px;font-size:13px;font-weight:400;line-height:1.34;color:#fff;border:none;margin-bottom:6px}
.mk-thread .mk-b.them{align-self:flex-start;background:var(--ios-rx)}
.mk-thread .mk-b.us{align-self:flex-end;background:var(--ios-green)}
/* the iOS bubble tail: a rounded square behind the corner, masked by a second
   square in the thread background colour */
.mk-thread .mk-b::before,.mk-thread .mk-b::after{content:'';position:absolute;bottom:0;width:16px;height:16px}
.mk-thread .mk-b.us::before{right:-6px;background:var(--ios-green);border-bottom-left-radius:15px}
.mk-thread .mk-b.us::after{right:-16px;background:var(--ios-bg);border-bottom-left-radius:11px}
.mk-thread .mk-b.them::before{left:-6px;background:var(--ios-rx);border-bottom-right-radius:15px}
.mk-thread .mk-b.them::after{left:-16px;background:var(--ios-bg);border-bottom-right-radius:11px}
.mk-rcpt{align-self:flex-end;font-size:8.5px;color:var(--ios-gray);letter-spacing:.01em;margin:-2px 3px 2px}

/* input bar + home indicator */
.mk-ios-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 11px 3px;color:var(--ios-gray)}
.mk-ios-bar .field{flex:1;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 4px 0 12px;
  border:.5px solid rgba(255,255,255,.2);border-radius:99px;font-size:11.5px;color:var(--ios-gray)}
.mk-ios-bar .send{width:22px;height:22px;border-radius:50%;background:#2C2C2E;display:grid;place-items:center;color:var(--ios-gray)}
.mk-home{flex:0 0 auto;width:112px;height:4px;border-radius:99px;background:rgba(255,255,255,.32);margin:6px auto 7px}
/* Under 560px there isn't the width to hold a device at real proportions without
   shrinking the type past readable, and a phone frame inside a phone is silly
   anyway. Drop the hardware, keep the Messages sheet at full size and let it run
   to its natural height, so every message stays visible. */
@media(max-width:560px){
  .mk-phone{max-width:none;padding:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  .mk-screen{aspect-ratio:auto;border-radius:16px}
  .mk-ios-top,.mk-island,.mk-home{display:none}
  .mk-ios-hd{padding-top:10px}
  .mk-thread{overflow:visible;justify-content:flex-start;padding:14px 12px 4px}
  .mk-thread::before{display:none}
  .mk-thread .mk-b{max-width:82%}
}

/* ── SMSThread + SMSBubble (in-dashboard view: brand language, not iOS) ────── */
/* ── SMSThread + SMSBubble ────────────────────────────────────────────────── */
.mk-sms{display:flex;flex-direction:column;gap:9px;padding:13px 6px 0}
.mk-sms.wide{padding:0;gap:11px}
.mk-day{align-self:center;font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray2);margin:7px 0 1px;text-align:center}
.mk-b{max-width:84%;padding:9px 13px;border-radius:16px;font-size:13px;font-weight:300;line-height:1.55;color:var(--white);position:relative}
.mk-sms.wide .mk-b{max-width:74%;font-size:13.5px}
.mk-b.them{align-self:flex-start;background:#181b28;border:1px solid var(--line);border-bottom-left-radius:5px}
.mk-b.us{align-self:flex-end;background:color-mix(in srgb,var(--ac) 22%,#101423);border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);border-bottom-right-radius:5px}
.mk-who{display:block;font-family:var(--fm);font-weight:500;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:5px}
.mk-b.them .mk-who{color:var(--gray2)}
.mk-tm{display:block;font-family:var(--fm);font-size:8.5px;letter-spacing:.06em;color:var(--gray2);margin-top:6px}
.mk-b.us .mk-tm{text-align:right}
/* system note in the thread: missed call, handoff, booked */
.mk-note{align-self:center;display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);border:1px dashed color-mix(in srgb,var(--ac) 34%,transparent);border-radius:99px;padding:4px 12px;text-align:center;line-height:1.5}
.mk-note.mute{color:var(--gray2);border-color:var(--line2)}

/* ── CallPanel ────────────────────────────────────────────────────────────── */
.mk-call{display:grid;grid-template-columns:1fr;gap:14px}
.mk-callhd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mk-callhd .who b{display:block;font-family:var(--fd);font-weight:600;font-size:15px;color:var(--white)}
.mk-callhd .who em{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.08em;color:var(--gray2);margin-top:4px}
.mk-answer{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ac);text-align:right;line-height:1}
.mk-answer em{display:block;font-family:var(--fm);font-weight:400;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2);margin-top:5px}
.mk-wave{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:12px 13px;position:relative;overflow:hidden}
.mk-wave svg{display:block;width:100%;height:44px;animation:mkwave 2.6s ease-in-out infinite;transform-origin:center}
.mk-wave svg rect{fill:var(--ac)}
/* Live-audio feel: bars breathe + a soft playhead sweeps across (disabled under
   prefers-reduced-motion by the .mk * rule below). */
.mk-wave::after{content:'';position:absolute;top:0;bottom:0;left:-56px;width:56px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 22%,transparent),transparent);animation:mkscrub 2.4s linear infinite;pointer-events:none}
@keyframes mkwave{0%,100%{transform:scaleY(.78)}50%{transform:scaleY(1)}}
@keyframes mkscrub{to{left:100%}}
.mk-transcript{display:flex;flex-direction:column;gap:11px;max-height:none}
.mk-line{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.mk-line .sp{font-family:var(--fm);font-weight:500;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);line-height:1.7}
.mk-line.caller .sp{color:var(--gray2)}
.mk-line .tx{font-size:13px;font-weight:300;line-height:1.6;color:var(--gray)}
.mk-line.desk .tx{color:var(--white)}
.mk-line .tx .at{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;color:var(--gray2);margin-right:8px}
@media(max-width:520px){
  .mk-line{grid-template-columns:1fr;gap:3px}
}

/* ── DataTable ────────────────────────────────────────────────────────────── */
.mk .mk-table thead th{font-family:var(--fm);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2);text-align:left;padding:0 10px 9px;border-bottom:1px solid var(--line2)}
.mk .mk-table tbody td{padding:11px 10px;font-size:12.5px;font-weight:300;color:var(--gray);border-bottom:1px solid var(--line)}
.mk .mk-table tbody tr:last-child td{border-bottom:none}
.mk .mk-table tbody td b{font-family:var(--ff);font-weight:500;color:var(--white)}
.mk .mk-table tbody td.num{font-family:var(--fm);font-size:12px;color:var(--white);white-space:nowrap}
.mk .mk-table tbody tr.new td{background:color-mix(in srgb,var(--ac) 7%,transparent)}
.mk .mk-table tbody tr.new td:first-child{box-shadow:inset 2px 0 0 var(--ac)}
/* Stacked card rows on narrow screens: the header label rides along in data-l. */
@media(max-width:600px){
  .mk .mk-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mk .mk-table tbody tr{display:block;border:1px solid var(--line);border-radius:9px;padding:4px 2px;margin-bottom:9px;background:var(--panel)}
  .mk .mk-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:none;padding:6px 11px;text-align:right}
  .mk .mk-table tbody td::before{content:attr(data-l);font-family:var(--fm);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2);text-align:left;flex:0 0 auto}
  .mk .mk-table tbody tr.new td:first-child{box-shadow:none}
  .mk .mk-table tbody tr.new{border-color:color-mix(in srgb,var(--ac) 42%,transparent)}
}

/* ── PipelineBoard ────────────────────────────────────────────────────────── */
.mk-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.mk-board.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-col{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 10px;min-width:0}
.mk-colh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--fm);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2);padding-bottom:9px;border-bottom:1px solid var(--line)}
.mk-colh .n{color:var(--gray3)}
.mk-col.win .mk-colh{color:var(--ac)}
.mk-card{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:10px 11px;margin-top:9px}
.mk-card b{display:block;font-family:var(--ff);font-weight:500;font-size:12.5px;color:var(--white);margin-bottom:3px}
.mk-card span{display:block;font-size:11.5px;font-weight:300;color:var(--gray);line-height:1.5}
.mk-card .amt{font-family:var(--fm);font-size:12px;color:var(--white);margin-top:7px}
.mk-card .age{font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray2);margin-top:6px}
.mk-card.hot{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 11%,var(--bg3)),var(--bg3))}
.mk-card.hot .amt{color:var(--ac)}
.mk-card.risk{border-color:rgba(245,177,75,.4)}
@media(max-width:760px){
  .mk-board,.mk-board.three{grid-template-columns:1fr;gap:9px}
  .mk-col{padding:10px}
}

/* ── MetricStrip (count-up driven by chrome.js: .stats + .stat-n[data-target]) */
.mk .stats.mk-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0}
.mk .stats.mk-metrics.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk .stats.mk-metrics.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-m{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 13px}
.mk .mk-m .stat-n{font-family:var(--fd);font-weight:700;font-size:clamp(21px,3.4vw,27px);letter-spacing:-.02em;line-height:1;color:var(--ac);margin-bottom:7px}
/* Currency prefix as ::before, not markup: chrome.js's counter overwrites the
   .stat-n textContent every frame, so a nested <span>$</span> would be wiped. */
.mk .mk-m .stat-n.money::before{content:'$';font-size:.62em;vertical-align:.18em;margin-right:1px}
.mk .mk-m .stat-d{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray2);line-height:1.5}
.mk-m .spark{display:block;width:100%;height:28px;margin-top:10px}
.mk-m .spark path{fill:none;stroke:var(--ac);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
@media(max-width:600px){
  .mk .stats.mk-metrics,.mk .stats.mk-metrics.three{grid-template-columns:1fr 1fr}
}

/* ── TimelineStrip ────────────────────────────────────────────────────────── */
.mk-tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mk-tl.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.mk-tli{position:relative;padding-top:24px}
.mk-tli::before{content:'';position:absolute;top:2px;left:0;width:9px;height:9px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px color-mix(in srgb,var(--ac) 70%,transparent)}
.mk-tli::after{content:'';position:absolute;top:6px;left:11px;right:-16px;height:1px;background:var(--line2)}
.mk-tli:last-child::after{display:none}
.mk-tli .t{display:block;font-family:var(--fm);font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--ac);margin-bottom:5px}
.mk-tli .l{display:block;font-family:var(--ff);font-weight:500;font-size:12.5px;color:var(--white);margin-bottom:4px;line-height:1.35}
.mk-tli .d{display:block;font-size:11.5px;font-weight:300;color:var(--gray);line-height:1.55}
@media(max-width:640px){
  .mk-tl,.mk-tl.five{grid-template-columns:1fr;gap:0}
  .mk-tli{padding:0 0 18px 22px}
  .mk-tli::before{top:4px}
  .mk-tli::after{top:14px;left:4px;right:auto;bottom:2px;width:1px;height:auto}
  .mk-tli:last-child{padding-bottom:0}
}

/* ── ReviewCard ───────────────────────────────────────────────────────────── */
.mk-review{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.mk-review .rhd{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.mk-review .av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--fd);font-weight:600;font-size:12px;color:var(--bg);background:var(--ac)}
.mk-review .rw b{display:block;font-family:var(--ff);font-weight:500;font-size:13px;color:var(--white)}
.mk-review .rw em{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray2);margin-top:3px}
.mk-review .src{margin-left:auto}
.mk-stars{font-size:13px;letter-spacing:2px;color:var(--amber);line-height:1;margin-bottom:9px}
.mk-review .body{font-size:13px;font-weight:300;color:var(--gray);line-height:1.65}

/* ── CalendarSlot ─────────────────────────────────────────────────────────── */
.mk-cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mk-slot{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:11px 10px}
.mk-slot b{display:block;font-family:var(--fm);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--white);margin-bottom:6px}
.mk-slot span{display:block;font-size:11px;font-weight:300;color:var(--gray);line-height:1.45}
.mk-slot.open{border-style:dashed;border-color:var(--gray3)}
.mk-slot.open span{color:var(--gray2)}
.mk-slot.taken{border-color:color-mix(in srgb,var(--ac) 48%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 13%,transparent),transparent)}
.mk-slot.taken b{color:var(--ac)}
@media(max-width:600px){.mk-cal{grid-template-columns:1fr 1fr}}

/* ── Document panel (spec sheets, photographed invoices, filed records) ───── */
.mk-doc{border:1px solid var(--line);border-radius:9px;background:#0C0F1C;padding:15px 16px;font-family:var(--fm);font-size:11px;line-height:1.95;color:var(--gray);overflow-wrap:anywhere}
.mk-doc.paper{background:#12131B;border-color:var(--gray3);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.mk-doc .dt{display:block;font-family:var(--fd);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--white);margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line);line-height:1.4}
.mk-doc .r{display:flex;justify-content:space-between;gap:14px}
.mk-doc .r em{color:var(--gray2)}
.mk-hl{background:color-mix(in srgb,var(--ac) 20%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent);border-radius:3px;padding:1px 4px;color:var(--white)}
.mk-doc .sig{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2)}

/* ── Flow: panel → arrow → panel → arrow → panel ──────────────────────────── */
.mk-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.mk-flow.two{grid-template-columns:1fr auto 1fr}
.mk-arrow{width:18px;height:18px;color:var(--gray3);flex:0 0 auto;justify-self:center}
.mk-step{min-width:0}
/* A table used as a flow step gets the same card treatment as the doc panels
   either side of it, so the three steps read as one row. */
.mk .mk-flow .mk-table{border:1px solid var(--line);border-radius:9px;border-collapse:separate;border-spacing:0;background:var(--panel);padding:12px 6px 4px}
@media(max-width:760px){
  .mk-flow,.mk-flow.two{grid-template-columns:1fr;gap:10px}
  .mk-arrow{transform:rotate(90deg);margin:0 auto}
}

/* ── Trend chart ──────────────────────────────────────────────────────────── */
.mk-chart{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:13px 14px 9px}
.mk-chart svg{display:block;width:100%;height:96px}
.mk-chart .ln{fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-chart .fl{stroke:none}
.mk-chart .gd{stroke:var(--line);stroke-width:1}
.mk-chart text{font-family:var(--fm);font-size:8.5px;letter-spacing:.06em;fill:var(--gray2)}
.mk-chart .pt{fill:var(--ac)}
/* Sparkline, for a per-system row in a table or a metric tile */
.mk-spark{display:block;width:100%;min-width:64px;height:28px}
.mk-spark path{fill:none;stroke:var(--ac);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.mk-xax{display:flex;justify-content:space-between;font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray2);margin-top:8px}

/* ── Two-up layout for a primary/secondary pair inside one container ──────── */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:760px){.mk-split{grid-template-columns:1fr;gap:14px}}

/* ── Motion ───────────────────────────────────────────────────────────────── */
/* Bubbles and rows reveal on scroll via the sitewide .rv/.d1-.d5. Nothing loops.
   Reduced motion: everything is present and static, immediately. */
@media(prefers-reduced-motion:reduce){
  .mkwrap .rv{opacity:1;transform:none;transition:none}
  .mk *{animation:none;transition:none}
}

/* ── Narrow-screen container trims (380px target) ─────────────────────────── */
@media(max-width:560px){
  .mk{padding:14px;border-radius:12px}
  .mkwrap{margin:34px 0}
  .mk-sms.wide .mk-b{max-width:88%}
  .mk-b{font-size:12.5px}
}