/* ==========================================================================
   CODE-NATIVE MOCKUP ENGINE
   web-craft §7 / mape-saas-landing §7. Every mockup is real DOM: legible at
   any zoom, themable, and searchable. AI imagery is reserved for hero
   atmosphere only.

   ONE STAGE   every mockup sits in the identical frame
   ONE CLOCK   --t-primary 400ms · --t-react 250ms · --t-stagger 90ms
   ONE VOCAB   .mk-pill .mk-mono .mk-node .mk-cursor .mk-row
   THREAD      a single accent marker travels between snippets
   ========================================================================== */
:root{
  --t-primary:400ms; --t-react:250ms; --t-stagger:90ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

.mk{
  position:relative;background:var(--canvas);border:1px solid var(--ash);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-ring);
  container-type:inline-size;
}
.mk.mk-show{box-shadow:var(--sh-show)}

/* chrome — identical on every stage */
.mk-bar{display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-bottom:1px solid var(--ash);background:var(--canvas)}
.mk-dots{display:flex;gap:5px}
.mk-dots i{width:7px;height:7px;border-radius:var(--pill);background:var(--ash);display:block}
.mk-tabs{display:flex;gap:2px;min-width:0;overflow:hidden}
/* The window chrome is the one part of a mockup with real text in it, so it
   does not shrink with the card. Below ~430px of card the dots are the first
   thing to go — they carry no information. */
@container (max-width:430px){.mk-dots{display:none}.mk-bar{gap:8px;padding:9px 11px}}
.mk-tab{font-size:12px;font-weight:500;color:var(--fog);padding:5px 10px;border-radius:6px;
  white-space:nowrap}
.mk-tab[data-on="1"]{background:var(--charcoal);color:var(--canvas)}
.mk-meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--fog);
  letter-spacing:.04em;white-space:nowrap}
@container (max-width:520px){.mk-meta{display:none}}

.mk-body{padding:16px;display:grid;gap:8px}
.mk-split{display:grid;grid-template-columns:150px 1fr;min-height:250px}
@container (max-width:560px){.mk-split{grid-template-columns:1fr}.mk-side{display:none}}
.mk-side{border-right:1px solid var(--ash);padding:12px 9px;display:grid;gap:1px;align-content:start}
.mk-side a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--steel);
  text-decoration:none;padding:7px 10px;border-radius:var(--r-btn)}
.mk-side a[data-on="1"]{background:var(--paper);color:var(--charcoal);font-weight:500}
.mk-side i{width:5px;height:5px;border-radius:var(--pill);background:var(--smoke);flex:none}
.mk-side a[data-on="1"] i{background:var(--mape)}

/* vocabulary ------------------------------------------------------------- */
.mk-mono{font-family:var(--mono);font-size:11px;color:var(--fog);letter-spacing:.03em}
.mk-pill{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:var(--pill);
  background:var(--paper);color:var(--steel);border:1px solid var(--ash);white-space:nowrap;
  transition:background var(--t-react) var(--ease),color var(--t-react) var(--ease),
             border-color var(--t-react) var(--ease)}
.mk-pill[data-live="1"]{background:var(--tint);color:var(--tint-ink);border-color:transparent}
.mk-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:11px 12px;border:1px solid var(--ash);border-radius:var(--r-card);
  transition:border-color var(--t-react) var(--ease),background var(--t-react) var(--ease)}
.mk-row[data-hot="1"]{border-color:var(--mape);
  background:color-mix(in srgb,var(--mape) 6%,transparent)}
.mk-row .nm{font-size:13.5px;font-weight:500}
@container (max-width:520px){.mk-row{grid-template-columns:1fr auto}.mk-row .mk-mono{display:none}}

.mk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-tile{border:1px solid var(--ash);border-radius:var(--r-card);padding:11px 12px}
.mk-tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fog);display:block;margin-bottom:6px}
.mk-tile .v{font-family:var(--disp);font-size:20px;font-weight:500;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums}
@container (max-width:520px){.mk-tiles{grid-template-columns:1fr 1fr}.mk-tile:nth-child(3){display:none}}

/* check list (verification run) */
.mk-check{display:flex;align-items:center;gap:11px;padding:10px 12px;border-bottom:1px solid var(--ash)}
.mk-check:last-child{border-bottom:0}
.mk-check .g{width:16px;height:16px;border-radius:var(--pill);border:1.5px solid var(--smoke);
  flex:none;display:flex;align-items:center;justify-content:center;
  transition:border-color var(--t-react) var(--ease),background var(--t-react) var(--ease)}
.mk-check .g svg{opacity:0;transition:opacity var(--t-react) var(--ease)}
.mk-check[data-done="1"] .g{border-color:var(--mape-2);background:var(--tint)}
.mk-check[data-done="1"] .g svg{opacity:1}
.mk-check .lbl{font-size:13.5px;flex:1}
.mk-check[data-done="0"] .lbl{color:var(--fog)}
.mk-check .dur{font-family:var(--mono);font-size:11px;color:var(--fog);opacity:0;
  transition:opacity var(--t-react) var(--ease)}
.mk-check[data-done="1"] .dur{opacity:1}
.mk-spin{width:16px;height:16px;border-radius:var(--pill);border:1.5px solid var(--ash);
  border-top-color:var(--mape-2);animation:mkspin 900ms linear infinite;flex:none}
@keyframes mkspin{to{transform:rotate(360deg)}}

/* progress bar / rail */
.mk-bar-track{height:5px;border-radius:var(--pill);background:var(--ash);overflow:hidden;flex:1}
.mk-bar-track i{display:block;height:100%;background:var(--mape);width:0;
  transition:width var(--t-primary) var(--ease)}

/* node + edge (promotion path) */
.mk-flow{display:flex;align-items:center;gap:0;padding:6px 0}
.mk-node{flex:1;border:1px solid var(--ash);border-radius:var(--r-card);padding:12px 10px;
  text-align:center;transition:border-color var(--t-react) var(--ease)}
.mk-node .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog);display:block;margin-bottom:6px}
.mk-node .s{font-size:12.5px;font-weight:500}
.mk-node[data-on="1"]{border-color:var(--mape)}
.mk-edge{width:54px;height:2px;background:var(--ash);position:relative;flex:none;border-radius:2px}
.mk-edge b{position:absolute;inset:0 auto 0 0;width:0;background:var(--mape);border-radius:2px;
  transition:width var(--t-primary) var(--ease)}
.mk-edge[data-on="1"] b{width:100%}
@container (max-width:520px){.mk-edge{width:22px}}

/* log (audit trail) */
.mk-log{display:grid;gap:0}
.mk-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--ash);opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-line:last-child{border-bottom:0}
.mk-line[data-in="1"]{opacity:1;transform:none}
.mk-line .ev{font-size:13.5px;font-weight:500}
@container (max-width:520px){.mk-line{grid-template-columns:1fr auto}.mk-line .who{display:none}}

/* ring gauge */
.mk-ring{width:74px;height:74px;flex:none;position:relative}
.mk-ring svg{transform:rotate(-90deg);display:block}
.mk-ring circle{fill:none;stroke-width:6}
.mk-ring .trk{stroke:var(--ash)}
.mk-ring .val{stroke:var(--mape);stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--ease)}
.mk-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--charcoal);
  font-variant-numeric:tabular-nums}

/* comment bubble */
.mk-cmt{display:flex;gap:10px;padding:12px;border:1px solid var(--ash);border-radius:var(--r-card);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-cmt[data-in="1"]{opacity:1;transform:none}
/* the other side of the first conversation reads as ours, not the caller's */
.mk-cmt[data-who="us"]{background:var(--wash);border-color:color-mix(in srgb,var(--mape) 26%,var(--ash))}
.mk-cmt[data-who="us"] .av{border-color:color-mix(in srgb,var(--mape) 40%,var(--ash));color:var(--mape-2)}
.mk-cmt .av{width:26px;height:26px;border-radius:var(--pill);border:1px solid var(--ash);
  background:var(--paper);flex:none;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:600;color:var(--steel)}
.mk-cmt .tx{font-size:13px;line-height:1.45}

/* buttons inside mockups */
.mk-act{display:flex;gap:8px}
.mk-btn{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--pill);
  background:var(--mape);color:#04240f;border:1px solid transparent;white-space:nowrap;
  transition:transform 120ms var(--ease)}
.mk-btn.ghost{background:transparent;color:var(--charcoal);border-color:var(--ash);font-weight:500}

/* the scripted cursor + tap ring */
.mk-cursor{position:absolute;width:18px;height:18px;left:0;top:0;z-index:30;pointer-events:none;
  opacity:0;transition:opacity var(--t-react) var(--ease)}
.mk-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.mk-tap{position:absolute;width:32px;height:32px;border-radius:var(--pill);border:1px solid var(--mape);
  opacity:0;pointer-events:none;z-index:29}

/* the connective thread — one marker travelling between snippets */
.thread{position:relative;display:flex;justify-content:center;padding:0;margin:-6px 0 -6px}
.thread i{display:block;width:1px;height:56px;background:linear-gradient(var(--ash),var(--ash));
  position:relative;overflow:visible}
.thread i::after{content:"";position:absolute;left:-2.5px;top:0;width:6px;height:6px;
  border-radius:var(--pill);background:var(--mape);opacity:0}
.thread[data-on="1"] i::after{animation:threadrun 1.4s var(--ease) forwards}
@keyframes threadrun{0%{opacity:0;top:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:56px}}

@media (prefers-reduced-motion:reduce){
  .mk-cursor,.mk-tap{display:none!important}
  .mk-spin{animation:none}
  .thread i::after{display:none}
  .mk-line,.mk-cmt{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   DELIVERY-SYSTEM MOCKUPS — portal · signoff · extension · relay
   Shapes and labels sourced from Planning Agent (Group B).
   ========================================================================== */
.mk-callout{border:1px solid var(--ash);border-left:3px solid var(--amber);
  border-radius:var(--r-card);padding:15px 16px;background:var(--canvas);
  transition:border-left-color var(--t-primary) var(--ease)}
.mk-callout[data-state="signed"]{border-left-color:var(--mape)}
.mk-callout-h{font-size:14.5px;font-weight:600;margin:7px 0 4px}
.mk-callout-b{font-size:12.5px;color:var(--steel);line-height:1.5;margin:0 0 12px}
.mk-ticks{display:flex;gap:4px;align-items:center}
.mk-ticks i{width:9px;height:9px;border-radius:2px;background:var(--ash);display:block;
  transition:background var(--t-react) var(--ease)}
.mk-ticks i[data-on="1"]{background:var(--mape)}

.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@container (max-width:560px){.mk-two{grid-template-columns:1fr}}
.mk-deliv{margin:9px 0 0;padding:0;list-style:none}
.mk-deliv li{font-size:12.5px;color:var(--steel);padding:8px 0;border-top:1px solid var(--ash);
  padding-left:16px;position:relative;line-height:1.45}
.mk-deliv li:first-child{border-top:0}
.mk-deliv li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;
  border-radius:var(--pill);background:var(--mape)}
.mk-signoff{border:1px solid var(--ash);border-radius:var(--r-card);padding:13px 14px;
  position:relative}
.mk-sigmeta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:9px;
  font-size:12px;align-items:baseline}
.mk-sigmeta span{color:var(--fog);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase}
.mk-sigmeta b{font-weight:500;font-size:12.5px}
.mk-fine{font-size:10.5px;color:var(--fog);line-height:1.5;margin:10px 0 0}
.mk-panelette{border:1px solid var(--ash);border-radius:var(--r-card);padding:13px 14px}

.mk-toast{position:absolute;top:10px;right:10px;background:var(--mape);color:#04240f;
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:var(--pill);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--t-react) var(--ease),transform var(--t-react) var(--ease)}
.mk-toast[data-in="1"]{opacity:1;transform:none}
.mk-toast span::before{content:"✓ "}

/* extension */
.mk-ext{display:grid;grid-template-columns:1fr 210px;min-height:236px}
@container (max-width:560px){.mk-ext{grid-template-columns:1fr}.mk-ext-page{display:none}}
.mk-ext-page{padding:18px;background:var(--paper);display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;position:relative}
.mk-ext-crumb{font-family:var(--mono);font-size:10.5px;color:var(--fog);letter-spacing:.05em}
.mk-ext-el{font-size:12.5px;padding:8px 15px;border-radius:var(--r-btn);
  border:1px solid var(--ash);background:var(--canvas);
  transition:outline-color var(--t-react) var(--ease),outline-width var(--t-react) var(--ease);
  outline:2px solid transparent;outline-offset:2px}
.mk-ext-el[data-picked="1"]{outline-color:var(--mape)}
.mk-ext-btn{font-size:12.5px;padding:8px 15px;border-radius:var(--r-btn);
  background:var(--charcoal);color:var(--canvas)}
.mk-ext-side{border-left:1px solid var(--ash);padding:13px;display:flex;flex-direction:column;
  gap:8px;position:relative;opacity:0;transform:translateX(14px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-ext-side[data-open="1"]{opacity:1;transform:none}
.mk-ext-proj{font-size:11px;color:var(--steel);border:1px solid var(--ash);
  border-radius:var(--r-btn);padding:6px 9px;line-height:1.35}
.mk-ext-note{font-size:12px;color:var(--charcoal);border:1px solid var(--ash);
  border-radius:var(--r-btn);padding:8px 9px;min-height:48px;margin:0;line-height:1.45}
.mk-ext-note[data-typed="0"]{color:transparent}
.mk-ext-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;padding:5px 8px;
  border-radius:var(--r-btn);background:var(--tint);color:var(--tint-ink);
  opacity:0;transition:opacity var(--t-react) var(--ease);line-height:1.3}
.mk-ext-chip[data-in="1"]{opacity:1}
.mk-ext-side .mk-btn{font-size:11px;padding:7px 10px;flex:1;text-align:center;
  justify-content:center;display:flex}

/* slack */
.mk-slack{border:1px solid var(--ash);border-radius:var(--r-card);padding:12px 13px;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-slack[data-in="1"]{opacity:1;transform:none}
.mk-slack-ch{font-family:var(--mono);font-size:10.5px;color:var(--fog);letter-spacing:.05em;
  display:block;margin-bottom:9px}
.mk-slack-msg{display:flex;gap:10px}
.mk-slack-av{width:26px;height:26px;border-radius:6px;background:var(--charcoal);
  color:var(--canvas);font-size:9.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex:none}
.mk-slack-who{font-size:12.5px;font-weight:600;display:block}
.mk-slack-who em{font-style:normal;font-weight:400;color:var(--fog);font-size:10.5px;
  margin-left:6px}
.mk-slack-tx{font-size:12.5px;color:var(--steel);line-height:1.5;display:block;margin-top:3px}
.mk-slack-tx b{color:var(--charcoal);font-weight:600}
.mk-slack-thumb{display:block;width:120px;height:66px;border-radius:6px;margin-top:8px;
  border:1px solid var(--ash);
  background:linear-gradient(135deg,var(--paper),var(--canvas) 60%,var(--paper))}

@media (prefers-reduced-motion:reduce){
  .mk-ext-side,.mk-slack,.mk-toast{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   TRIPLE-ENVIRONMENT PIPELINE · TOUR · PENCIL OVERLAY · LOOPBACK
   Each environment carries its own hue so the journey reads at a glance:
   development = violet (ours), staging = amber (yours to review),
   production = green (live). Colour here is semantic, not decoration.
   ========================================================================== */
.mk-envs{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:stretch}
@container (max-width:640px){.mk-envs{grid-template-columns:1fr}}
.mk-env{border:1px solid var(--ash);border-radius:var(--r-card);padding:15px 14px;
  position:relative;display:flex;flex-direction:column;gap:5px;
  transition:border-color var(--t-primary) var(--ease),box-shadow var(--t-primary) var(--ease)}
.mk-env-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.mk-env-t{font-size:14px;font-weight:600}
.mk-env-d{font-size:11.5px;color:var(--steel);line-height:1.5}
.mk-env[data-role="dev"] .mk-env-k{color:var(--violet)}
.mk-env[data-role="stg"] .mk-env-k{color:var(--amber)}
.mk-env[data-role="prd"] .mk-env-k{color:var(--mape-2)}
.mk-env[data-role="dev"][data-on="1"]{border-color:var(--violet);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 15%,transparent)}
.mk-env[data-role="stg"][data-on="1"]{border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent)}
.mk-env[data-role="prd"][data-on="1"]{border-color:var(--mape);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mape) 16%,transparent)}
.mk-env-pulse{display:flex;gap:3px;margin-top:2px}
.mk-env-pulse i{width:14px;height:3px;border-radius:2px;background:var(--violet);opacity:.25;
  animation:devpulse 1.6s ease-in-out infinite}
.mk-env-pulse i:nth-child(2){animation-delay:.2s}
.mk-env-pulse i:nth-child(3){animation-delay:.4s}
@keyframes devpulse{0%,100%{opacity:.2}50%{opacity:1}}
.mk-env-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;padding:3px 8px;
  border-radius:var(--pill);background:color-mix(in srgb,var(--amber) 18%,transparent);
  color:var(--amber);width:max-content;margin-top:2px;opacity:0;
  transition:opacity var(--t-react) var(--ease)}
.mk-env-badge[data-in="1"]{opacity:1}
.mk-env-lock{width:22px;height:22px;border-radius:var(--pill);border:1.5px solid var(--smoke);
  margin-top:2px;position:relative;transition:border-color var(--t-react) var(--ease)}
.mk-env-lock::after{content:"";position:absolute;inset:6px;border-radius:var(--pill);
  background:var(--smoke);transition:background var(--t-react) var(--ease)}
.mk-env-lock[data-open="1"]{border-color:var(--mape)}
.mk-env-lock[data-open="1"]::after{background:var(--mape)}
.mk-arrow{display:flex;align-items:center;justify-content:center;position:relative}
.mk-arrow::before{content:"";width:100%;height:2px;background:var(--ash);border-radius:2px}
.mk-arrow b{position:absolute;left:0;top:50%;transform:translateY(-50%);height:2px;width:0;
  background:var(--mape);border-radius:2px;transition:width var(--t-primary) var(--ease)}
.mk-arrow[data-on="1"] b{width:100%}
@container (max-width:640px){.mk-arrow{height:26px}.mk-arrow::before{width:2px;height:100%}}
.mk-pushbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--ash);border-radius:var(--r-card);padding:11px 13px;margin-top:10px}

/* guided tour */
.mk-tourstage{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;min-height:250px}
@container (max-width:600px){.mk-tourstage{grid-template-columns:1fr}.mk-tourui{display:none}}
.mk-tourui{border-right:1px solid var(--ash);padding:14px;display:flex;flex-direction:column;gap:7px}
.mk-tui-row{font-size:12px;padding:9px 11px;border-radius:var(--r-btn);border:1px solid var(--ash);
  color:var(--steel);position:relative;transition:border-color var(--t-primary) var(--ease)}
.mk-tui-row[data-mark="added"]{border-color:var(--mape);color:var(--charcoal)}
.mk-tui-row[data-mark="added"]::after{content:"+";position:absolute;right:9px;color:var(--mape-2);
  font-weight:700}
.mk-tui-row[data-mark="changed"]{border-color:var(--amber);color:var(--charcoal)}
.mk-tui-row[data-mark="changed"]::after{content:"~";position:absolute;right:9px;color:var(--amber);
  font-weight:700}
.mk-tui-row[data-mark="removed"]{border-color:var(--rose);color:var(--fog);
  text-decoration:line-through;text-decoration-color:var(--rose)}
.mk-tui-row[data-mark="removed"]::after{content:"–";position:absolute;right:9px;color:var(--rose);
  font-weight:700}
.mk-tui-row[data-focus="1"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--mape) 16%,transparent)}
.mk-tourcard{padding:16px;display:flex;flex-direction:column;gap:8px}
.mk-tourtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--pill);width:max-content}
.mk-tourtag[data-kind="added"]{background:var(--tint);color:var(--tint-ink)}
.mk-tourtag[data-kind="changed"]{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.mk-tourtag[data-kind="removed"]{background:color-mix(in srgb,var(--rose) 16%,transparent);color:var(--rose)}
.mk-tourh{font-size:14.5px;font-weight:600;margin:0}
.mk-tourwhy,.mk-tourtest,.mk-tourrisk{font-size:11.5px;color:var(--steel);line-height:1.5;margin:0}
.mk-tourwhy b,.mk-tourtest b,.mk-tourrisk b{color:var(--charcoal);font-weight:600;
  display:inline-block;min-width:74px}
.mk-tourdots{display:flex;gap:5px;justify-content:center;padding:0 0 14px}
.mk-tourdots i{width:22px;height:3px;border-radius:2px;background:var(--ash);
  transition:background var(--t-react) var(--ease)}
.mk-tourdots i[data-on="1"]{background:var(--mape)}

/* pencil overlay */
.mk-frame-stage{position:relative;min-height:250px;padding:18px;background:var(--paper);
  transition:filter var(--t-primary) var(--ease)}
.mk-frame-stage[data-frozen="1"]{filter:saturate(.55)}
.mk-fake{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.mk-fake-h{font-size:13px;font-weight:600}
.mk-fake-row{width:210px;height:9px;border-radius:3px;background:var(--ash);display:block}
.mk-fake-row.short{width:130px}
.mk-fake-cta{font-size:12px;padding:8px 14px;border-radius:var(--r-btn);background:var(--charcoal);
  color:var(--canvas);transition:outline-color var(--t-react) var(--ease);
  outline:2px solid transparent;outline-offset:3px}
.mk-fake-cta[data-sel="1"]{outline-color:var(--mape)}
.mk-freeze{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);
  background:var(--charcoal);color:var(--canvas);opacity:0;
  transition:opacity var(--t-react) var(--ease)}
.mk-freeze[data-in="1"]{opacity:1}
.mk-marquee{position:absolute;border:1.5px dashed var(--mape);border-radius:5px;
  background:color-mix(in srgb,var(--mape) 8%,transparent);opacity:0;
  left:16px;top:126px;width:0;height:38px;
  transition:opacity var(--t-react) var(--ease),width var(--t-primary) var(--ease)}
.mk-marquee[data-in="1"]{opacity:1;width:132px}
.mk-note{position:absolute;right:14px;bottom:14px;width:200px;border:1px solid var(--ash);
  border-radius:var(--r-card);background:var(--canvas);padding:11px 12px;display:flex;
  flex-direction:column;gap:7px;opacity:0;transform:translateY(8px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-note[data-in="1"]{opacity:1;transform:none}
.mk-note-tx{font-size:12px;line-height:1.45;margin:0}
.mk-pen{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border-radius:var(--pill);
  background:var(--mape);color:#04240f;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-sat);opacity:0;transition:opacity var(--t-react) var(--ease)}
.mk-pen[data-in="1"]{opacity:1}

/* loopback thread */
.mk-thread{display:grid;gap:0}
.mk-tstep{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--ash);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-tstep:first-child{border-top:0}
.mk-tstep[data-in="1"]{opacity:1;transform:none}
.mk-tstep b{font-size:13px;display:block;margin-bottom:2px}
.mk-tstep span:last-child{font-size:11.5px;color:var(--steel);line-height:1.5;display:block}
.mk-tdot{width:10px;height:10px;border-radius:var(--pill);flex:none;margin-top:4px}
.mk-tdot[data-kind="open"]{background:var(--amber)}
.mk-tdot[data-kind="seen"]{background:var(--violet)}
.mk-tdot[data-kind="fix"]{background:var(--cyan)}
.mk-tdot[data-kind="done"]{background:var(--mape)}

@media (prefers-reduced-motion:reduce){
  .mk-env-pulse i{animation:none;opacity:.6}
  .mk-tstep,.mk-note,.mk-marquee,.mk-freeze,.mk-pen,.mk-env-badge{
    opacity:1!important;transform:none!important}
}

/* ---------- hero stage ---------- */
.hero-mk{border-radius:var(--r-lg)}
.hs-envs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ash)}
.hs-env{padding:13px 15px;border-right:1px solid var(--ash);display:flex;flex-direction:column;
  gap:5px;position:relative;transition:background var(--t-primary) var(--ease)}
.hs-env:last-child{border-right:0}
.hs-env[data-on="1"]{background:color-mix(in srgb,var(--mape) 5%,transparent)}
.hs-env[data-role="dev"][data-on="1"]{background:color-mix(in srgb,var(--violet) 7%,transparent)}
.hs-env[data-role="stg"][data-on="1"]{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.hs-k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.hs-env[data-role="dev"] .hs-k{color:var(--violet)}
.hs-env[data-role="stg"] .hs-k{color:var(--amber)}
.hs-env[data-role="prd"] .hs-k{color:var(--mape-2)}
.hs-v{font-size:12.5px;font-weight:600}
.hs-pulse{display:flex;gap:3px;margin-top:auto}
.hs-pulse i{width:9px;height:3px;border-radius:2px;background:var(--violet);opacity:.22;
  animation:hspulse 1.5s ease-in-out infinite}
.hs-pulse i:nth-child(2){animation-delay:.15s}.hs-pulse i:nth-child(3){animation-delay:.3s}
.hs-pulse i:nth-child(4){animation-delay:.45s}.hs-pulse i:nth-child(5){animation-delay:.6s}
@keyframes hspulse{0%,100%{opacity:.2}50%{opacity:1}}
.hs-badge{font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber);width:max-content;
  margin-top:auto;opacity:0;transition:opacity var(--t-react) var(--ease)}
.hs-badge[data-in="1"]{opacity:1}
.hs-lock{width:18px;height:18px;border-radius:var(--pill);border:1.5px solid var(--smoke);
  margin-top:auto;position:relative;transition:border-color var(--t-react) var(--ease)}
.hs-lock::after{content:"";position:absolute;inset:5px;border-radius:var(--pill);
  background:var(--smoke);transition:background var(--t-react) var(--ease)}
.hs-lock[data-open="1"]{border-color:var(--mape)}
.hs-lock[data-open="1"]::after{background:var(--mape)}
.hs-change{padding:15px;display:flex;flex-direction:column;gap:10px}
.hs-crow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hs-ct{font-size:14px;font-weight:600}
.hs-prog{display:flex;align-items:center;gap:12px}
.hs-why{font-size:12px;color:var(--steel);line-height:1.5}
.hs-why b{color:var(--charcoal);font-weight:600;margin-right:7px}
.hs-fb{display:flex;align-items:center;gap:10px;padding:11px 15px;border-top:1px solid var(--ash);
  background:var(--paper);opacity:0;transform:translateY(5px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.hs-fb[data-in="1"]{opacity:1;transform:none}
.hs-pen{width:22px;height:22px;border-radius:var(--pill);background:var(--mape);color:#04240f;
  display:flex;align-items:center;justify-content:center;flex:none}
.hs-fbt{font-size:12.5px;flex:1}
@container (max-width:520px){
  .hs-envs{grid-template-columns:1fr}
  .hs-env{border-right:0;border-bottom:1px solid var(--ash)}
  .hs-why{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hs-pulse i{animation:none;opacity:.6}
  .hs-fb,.hs-badge{opacity:1!important;transform:none!important}
}

/* ---------- tour overlay on the client's own app ---------- */
.to-stage{position:relative;min-height:320px;background:var(--paper);overflow:hidden}
.to-app{display:grid;grid-template-columns:82px 1fr;height:100%;min-height:320px;
  filter:saturate(.35) contrast(.92)}
@container (max-width:430px){.to-app{grid-template-columns:1fr}
  .to-side{display:none}.to-main{padding:11px 12px}
  .to-crumb{width:84px}.to-btn{width:56px}.to-btn.ghost{width:42px}}
.to-side{border-right:1px solid var(--ash);padding:12px 10px;display:flex;flex-direction:column;
  gap:8px;background:var(--canvas)}
.to-logo{height:14px;width:44px;border-radius:4px;background:var(--smoke);display:block}
.to-nav{height:9px;border-radius:4px;background:var(--ash);display:block}
.to-nav:nth-child(3){width:78%}.to-nav:nth-child(4){width:62%}.to-nav:nth-child(5){width:70%}
.to-main{padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--canvas)}
.to-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.to-crumb{height:9px;width:120px;border-radius:4px;background:var(--ash);display:block}
.to-actions{display:flex;gap:6px}
.to-btn{height:22px;width:74px;border-radius:6px;background:var(--charcoal);display:block}
.to-btn.ghost{background:transparent;border:1px solid var(--ash);width:56px}
.to-tablehead{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding-bottom:7px;
  border-bottom:1px solid var(--ash)}
.to-tablehead span{height:7px;border-radius:3px;background:var(--smoke);display:block}
.to-row{height:30px;border-radius:6px;background:var(--paper);border:1px solid var(--ash)}

/* the overlay: scrim + a spotlight that travels between elements */
.to-scrim{position:absolute;inset:0;background:rgba(8,10,9,.44);opacity:0;
  transition:opacity var(--t-primary) var(--ease);pointer-events:none}
.to-stage[data-live="1"] .to-scrim{opacity:1}
.to-spot{position:absolute;border-radius:8px;pointer-events:none;opacity:0;
  border:2px solid var(--mape);
  box-shadow:0 0 0 9999px rgba(8,10,9,.44), 0 0 0 4px color-mix(in srgb,var(--mape) 26%,transparent);
  transition:opacity var(--t-react) var(--ease),
    top var(--t-primary) var(--ease), left var(--t-primary) var(--ease),
    width var(--t-primary) var(--ease), height var(--t-primary) var(--ease)}
.to-stage[data-live="1"] .to-spot{opacity:1}
.to-stage[data-live="1"] .to-scrim{opacity:0}   /* the spotlight ring carries the scrim */

.to-card{position:absolute;right:14px;bottom:40px;width:min(310px,62%);background:var(--canvas);
  border:1px solid var(--ash);border-radius:var(--r-card);padding:14px;z-index:12;
  box-shadow:0 18px 44px -18px rgba(8,10,9,.5);display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.to-stage[data-live="1"] .to-card{opacity:1;transform:none}
.to-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.to-tag{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--pill)}
.to-tag[data-kind="added"]{background:var(--tint);color:var(--tint-ink)}
.to-tag[data-kind="changed"]{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.to-tag[data-kind="removed"]{background:color-mix(in srgb,var(--rose) 18%,transparent);color:var(--rose)}
.to-tag[data-kind="fixed"]{background:color-mix(in srgb,var(--cyan) 20%,transparent);color:var(--cyan)}
.to-title{font-size:13.5px;font-weight:600;margin:0;line-height:1.3}
.to-line{font-size:11.5px;color:var(--steel);line-height:1.5;margin:0}
.to-line b{color:var(--charcoal);font-weight:600;display:inline-block;min-width:76px}
.to-dots{position:absolute;left:14px;bottom:14px;display:flex;gap:5px;z-index:12}
.to-dots i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.34);display:block;
  transition:background var(--t-react) var(--ease)}
.to-dots i[data-on="1"]{background:var(--mape)}
@container (max-width:560px){
  .to-card{right:10px;left:10px;width:auto;bottom:34px}
  .to-line:nth-of-type(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .to-scrim,.to-spot,.to-card{transition:none}
}

/* loopback: who did what, at a glance */
.mk-twho{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--fog);
  display:block;margin-top:4px}
.mk-tdot[data-kind="work"]{background:var(--cyan)}
.mk-tdot[data-kind="check"]{background:var(--amber)}
.mk-tstep[data-in="1"] .mk-tdot[data-kind="done"]{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mape) 22%,transparent)}

/* ---------- hero: one frame, three products ---------- */
.flex-mk .mk-bar{gap:12px}
.fx-what{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.fx-dot{width:7px;height:7px;border-radius:var(--pill);background:var(--mape);flex:none}
.fx-rail{display:flex;align-items:center;gap:0;padding:11px 14px;border-bottom:1px solid var(--ash);
  background:var(--paper)}
.fx-env{display:flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:var(--r-btn);
  border:1px solid transparent;transition:border-color var(--t-react) var(--ease),
  background var(--t-react) var(--ease)}
.fx-env b{font-size:11.5px;font-weight:600}
.fx-env i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fog)}
.fx-env[data-role="dev"] b{color:var(--violet)}
.fx-env[data-role="stg"] b{color:var(--amber)}
.fx-env[data-role="prd"] b{color:var(--mape-2)}
.fx-env[data-on="1"]{background:var(--canvas);border-color:var(--ash)}
.fx-arrow{width:26px;height:1px;background:var(--smoke);flex:none;position:relative}
.fx-arrow::after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;
  border-top:1px solid var(--smoke);border-right:1px solid var(--smoke);transform:rotate(45deg)}
.fx-push{margin-left:auto;font-size:11.5px;padding:7px 13px}
.fx-body{position:relative;min-height:196px;padding:14px}
.fx-screen{position:absolute;inset:14px;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.fx-screen[data-on="1"]{opacity:1;transform:none;pointer-events:auto}
.fx-cols{display:grid;grid-template-columns:1.7fr 1fr auto;gap:12px;padding:0 12px 6px;
  border-bottom:1px solid var(--ash)}
.fx-cols span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fog)}
.fx-row{display:grid;grid-template-columns:1.7fr 1fr auto;gap:12px;align-items:center;
  padding:9px 12px;border:1px solid var(--ash);border-radius:var(--r-card);font-size:12.5px}
.fx-row > span:first-child{font-weight:500}
.fx-foot{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--ash);
  background:var(--paper);flex-wrap:wrap}
.fx-label,.fx-const{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fog)}
.fx-const{margin-left:auto}
.fx-tabs{display:flex;gap:4px}
.fx-tab{font:inherit;font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:var(--pill);
  border:1px solid var(--ash);background:var(--canvas);color:var(--steel);cursor:pointer;
  transition:all var(--t-react) var(--ease)}
.fx-tab[data-on="1"]{background:var(--charcoal);color:var(--canvas);border-color:transparent}
@container (max-width:600px){
  .fx-rail{flex-wrap:wrap;gap:6px}.fx-arrow{display:none}
  .fx-push{margin-left:0}.fx-const{display:none}
  .fx-cols,.fx-row{grid-template-columns:1.4fr auto}
  .fx-cols span:nth-child(2),.fx-row > span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){.fx-screen{transition:none}}

/* ---------- suite modules ---------- */
.mk-split2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@container (max-width:520px){.mk-split2{grid-template-columns:1fr}}
.mk-half{border:1px solid var(--ash);border-radius:var(--r-card);padding:12px}
.mk-half[data-accent="1"]{border-color:color-mix(in srgb,var(--mape) 34%,var(--ash));
  background:color-mix(in srgb,var(--mape) 5%,transparent)}
.mk-halfk{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fog);display:block;margin-bottom:9px}
.mk-line2{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;border-top:1px solid var(--ash);font-size:12px;color:var(--steel)}
.mk-line2:first-of-type{border-top:0}
.mk-line2 b{font-weight:600;color:var(--charcoal);font-variant-numeric:tabular-nums}
.mk-half[data-accent="1"] .mk-line2 b{color:var(--mape-2)}
.mk-none{color:var(--fog)!important;font-weight:400!important;font-style:italic}
.mk-foot2{font-size:11.5px;color:var(--steel);line-height:1.5;margin:4px 0 0}
.mk-soon{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px;border:1px dashed var(--ash);border-radius:var(--r-card)}
.mk-soonk{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fog)}
.mk-soon b{font-size:13.5px;font-weight:600}
.mk-soon > span:nth-child(3){font-size:11.5px;color:var(--steel);line-height:1.45;
  grid-column:2;grid-row:2}
@container (max-width:520px){.mk-soon{grid-template-columns:1fr auto}
  .mk-soon > span:nth-child(3){grid-column:1/-1;grid-row:auto}}

/* ---------- hero: health strip + activity rail ---------- */
.fx-health{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ash)}
.fx-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-right:1px solid var(--ash);
  font-size:11.5px;min-width:0}
.fx-h:last-child{border-right:0}
.fx-h i{width:7px;height:7px;border-radius:var(--pill);flex:none}
.fx-h i.ok{background:var(--mape)}
.fx-h i.warn{background:var(--amber)}
.fx-h b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-h em{font-family:var(--mono);font-style:normal;font-size:9.5px;color:var(--fog);
  margin-left:auto;white-space:nowrap}
.fx-h-act{background:color-mix(in srgb,var(--amber) 9%,transparent)}
@container (max-width:760px){.fx-health{grid-template-columns:1fr 1fr}
  .fx-h:nth-child(2){border-right:0}.fx-h:nth-child(n+3){border-top:1px solid var(--ash)}
  .fx-h em{display:none}}
.fx-activity{display:flex;align-items:center;gap:16px;padding:9px 14px;
  border-top:1px solid var(--ash);background:var(--paper);flex-wrap:wrap}
.fx-ak{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fog)}
.fx-al{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--steel)}
.fx-al i{width:5px;height:5px;border-radius:var(--pill);background:var(--mape);flex:none}
.fx-al em{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--fog)}
@container (max-width:640px){.fx-hide-sm{display:none}}
.fx-body{min-height:238px}

/* ---------- drawing overlay: the full round trip ---------- */
.pn-stage{position:relative;padding:16px;min-height:290px;background:var(--paper)}
.pn-wire{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pn-el{display:block;height:13px;width:150px;border-radius:4px;background:var(--ash);
  border:1.5px solid transparent;transition:border-color var(--t-react) var(--ease),
  background var(--t-react) var(--ease),transform var(--t-react) var(--ease)}
.pn-el.pn-wide{width:250px}
.pn-el.pn-cta{width:auto;height:auto;padding:8px 15px;background:var(--charcoal);
  color:var(--canvas);font-size:12px;border-radius:var(--r-btn)}
.pn-el[data-hover="1"]{border-color:color-mix(in srgb,var(--mape) 60%,transparent);
  background:color-mix(in srgb,var(--mape) 12%,var(--ash))}
.pn-el.pn-cta[data-hover="1"]{background:var(--charcoal);
  border-color:color-mix(in srgb,var(--mape) 70%,transparent)}
.pn-el[data-picked="1"]{border-color:var(--mape);transform:translateX(2px);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mape) 20%,transparent)}
.pn-note{position:absolute;right:16px;top:52px;width:min(238px,52%);background:var(--canvas);
  border:1px solid var(--ash);border-radius:var(--r-card);padding:12px;display:flex;
  flex-direction:column;gap:8px;opacity:0;transform:translateY(6px);z-index:8;
  box-shadow:0 14px 34px -16px rgba(8,10,9,.4);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.pn-note[data-in="1"]{opacity:1;transform:none}
.pn-text{font-size:12.5px;line-height:1.45;margin:0;min-height:34px}
.pn-text::after{content:"";display:inline-block;width:6px;height:12px;background:var(--mape);
  vertical-align:-2px;margin-left:1px;animation:pncaret 1s steps(2) infinite}
.pn-note[data-done="1"] .pn-text::after{display:none}
@keyframes pncaret{50%{opacity:0}}
.pn-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:18px;
  border-top:1px solid var(--ash);padding-top:12px}
.pn-step{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-right:8px;
  opacity:.34;transition:opacity var(--t-primary) var(--ease)}
.pn-step[data-on="1"]{opacity:1}
.pn-step i{width:100%;height:3px;border-radius:2px;background:var(--ash);display:block;
  transition:background var(--t-primary) var(--ease)}
.pn-step[data-on="1"] i{background:var(--mape)}
.pn-step b{font-size:10.5px;font-weight:600;line-height:1.3}
.pn-step[data-side="mape"] b{color:var(--violet)}
.pn-step[data-side="mape"][data-on="1"] i{background:var(--violet)}
.pn-pen{position:absolute;left:16px;bottom:74px;width:26px;height:26px;border-radius:var(--pill);
  background:var(--mape);color:#04240f;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--t-react) var(--ease);z-index:9}
.pn-pen[data-in="1"]{opacity:1}
@container (max-width:560px){
  .pn-note{position:static;width:auto;margin-top:12px}
  .pn-rail{grid-template-columns:repeat(2,1fr);gap:8px}
  .pn-step b{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .pn-text::after{animation:none;display:none}
  .pn-note,.pn-pen{opacity:1!important;transform:none!important}
  .pn-step{opacity:1}
}

/* ---------- how we work: intake + shaping ---------- */
.mk-arrowdown{height:20px;position:relative;margin:2px 0}
.mk-arrowdown::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;
  background:var(--ash)}
.mk-arrowdown::after{content:"";position:absolute;left:17px;bottom:0;width:7px;height:7px;
  border-right:1px solid var(--ash);border-bottom:1px solid var(--ash);transform:rotate(45deg)}
.mk-restate{border:1px solid var(--ash);border-left:2px solid var(--violet);
  border-radius:var(--r-card);padding:12px 13px;display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-restate[data-in="1"]{opacity:1;transform:none}
.mk-restate b{font-size:13px;line-height:1.35}
.mk-restate span:last-child{font-size:11.5px;color:var(--steel);line-height:1.5}
.mk-sizing{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px;
  opacity:0;transition:opacity var(--t-primary) var(--ease)}
.mk-sizing[data-in="1"]{opacity:1}
.mk-size{border:1px solid var(--ash);border-radius:var(--r-card);padding:9px 10px;
  display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600}
.mk-size i{width:18px;height:3px;border-radius:2px;display:block}
.mk-size[data-k="build"] i{background:var(--smoke)}
.mk-size[data-k="better"] i{background:var(--mape)}
.mk-size[data-k="no"] i{background:var(--amber)}
.mk-size[data-k="better"]{border-color:color-mix(in srgb,var(--mape) 40%,var(--ash));
  background:color-mix(in srgb,var(--mape) 5%,transparent)}
.mk-size em{font-family:var(--mono);font-style:normal;font-size:9.5px;color:var(--fog);
  font-weight:400}
@container (max-width:520px){.mk-sizing{grid-template-columns:1fr}}
.mk-prio{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:11px 12px;border:1px solid var(--ash);border-radius:var(--r-card);margin-bottom:6px;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-primary) var(--ease),transform var(--t-primary) var(--ease)}
.mk-prio[data-in="1"]{opacity:1;transform:none}
.mk-prio:last-child{margin-bottom:0;border-style:dashed}
.mk-pnum{font-family:var(--mono);font-size:11px;color:var(--fog);width:14px}
.mk-pn{font-size:13px;font-weight:500}
@container (max-width:520px){.mk-prio{grid-template-columns:auto 1fr auto}
  .mk-prio .mk-mono{display:none}}