@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ============================================================ */
/* MIZ OKI Media — route-local design system for /media/* pages. */
/* Served only from /media/assets/; no classic-site page loads   */
/* this file and this file references no classic-site asset.     */
/* System font stacks only — no external font requests.          */
/* Component library: nav, hero, cards (decision/evidence/       */
/* policy), chips, labels, comparison tables, timeline blocks,   */
/* verdict rows, CTA bands, footer.                              */
/* ============================================================ */
:root {
  --mzm-bg: #0A1418;
  --mzm-bg-1: #0B1E26;
  --mzm-bg-2: #0F2530;
  --mzm-line: #223A44;
  --mzm-fg: #DBE7EB;
  --mzm-muted: #93A7AE;
  --mzm-cyan: #3FDCF2;
  --mzm-amber: #D9A83C;
  --mzm-rose: #FF6B7C;
  --mzm-emerald: #41D695;
  --mzm-purple: #9D7BE8;
  --mzm-blue: #5FA0DC;
  --mzm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mzm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mzm-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--mzm-bg);
  color: var(--mzm-fg);
  font-family: var(--mzm-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mzm-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mzm-cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--mzm-cyan); color: #06262C; }

.mzm-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--mzm-cyan); color: #06262C;
  padding: 10px 18px; font-family: var(--mzm-mono); font-size: 14px; z-index: 200;
}
.mzm-skip:focus { left: 12px; top: 12px; }
.mzm-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mzm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
.mzm-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 20, 24, 0.94);
  border-bottom: 2px solid var(--mzm-line);
  backdrop-filter: blur(6px);
}
.mzm-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mzm-brand { display: flex; flex-direction: column; line-height: 1.2; }
.mzm-brand a { color: inherit; }
.mzm-brand a:hover { text-decoration: none; }
.mzm-brand strong {
  font-family: var(--mzm-serif); font-size: 20px; font-weight: 700;
  color: var(--mzm-fg); letter-spacing: 0.01em;
}
.mzm-brand span {
  display: block; font-family: var(--mzm-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--mzm-cyan); text-transform: uppercase;
}
.mzm-nav-links { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.mzm-nav-links a {
  font-family: var(--mzm-mono); font-size: 12.5px; color: var(--mzm-muted);
  padding: 8px 9px; border: 2px solid transparent; white-space: nowrap;
}
.mzm-nav-links a:hover { color: var(--mzm-cyan); text-decoration: none; }
.mzm-nav-links a[aria-current="page"] { color: var(--mzm-fg); border-bottom-color: var(--mzm-cyan); }
.mzm-nav-links a.mzm-nav-cta { color: var(--mzm-cyan); border-color: var(--mzm-line); }

/* ---------- section chrome ---------- */
section { padding: 76px 0; border-bottom: 1px solid #12242C; }
.mzm-kicker {
  font-family: var(--mzm-mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mzm-cyan); margin-bottom: 14px;
}
h1, h2, h3 { font-family: var(--mzm-serif); font-weight: 700; color: var(--mzm-fg); }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; margin-bottom: 18px; }
h3 { font-size: 19px; margin-bottom: 8px; }
.mzm-lede { color: var(--mzm-muted); max-width: 760px; }
.mzm-footnote { margin-top: 18px; font-size: 13.5px; color: #7E939B; max-width: 760px; }

/* ---------- subpage hero ---------- */
.mzm-sub-hero { padding: 72px 0 60px; }
.mzm-sub-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin-bottom: 16px; max-width: 900px; }
.mzm-sub-hero .mzm-lede { font-size: 18px; }

/* ---------- cards ---------- */
.mzm-card { background: var(--mzm-bg-1); border: 2px solid var(--mzm-line); padding: 24px; }
.mzm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
.mzm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.mzm-card h3 { font-size: 18px; }
.mzm-card p { font-size: 14.5px; color: var(--mzm-muted); }
.mzm-card .idx { font-family: var(--mzm-mono); font-size: 12px; color: var(--mzm-cyan); margin-bottom: 6px; }

/* accent-topped capability / stage cards */
.mzm-cap { border-top-width: 3px; }
.mzm-cap.a1 { border-top-color: var(--mzm-cyan); }
.mzm-cap.a2 { border-top-color: var(--mzm-blue); }
.mzm-cap.a3 { border-top-color: var(--mzm-rose); }
.mzm-cap.a4 { border-top-color: var(--mzm-amber); }
.mzm-cap.a5 { border-top-color: var(--mzm-purple); }
.mzm-cap.a6 { border-top-color: var(--mzm-emerald); }
.mzm-cap.a7 { border-top-color: var(--mzm-cyan); }

/* ---------- labels & chips ---------- */
.mzm-label {
  display: inline-block; font-family: var(--mzm-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px;
  border: 1px solid var(--mzm-line); color: var(--mzm-muted); border-radius: 2px;
}
.mzm-label.live    { color: var(--mzm-emerald); border-color: var(--mzm-emerald); }
.mzm-label.pilot   { color: var(--mzm-cyan);    border-color: var(--mzm-cyan); }
.mzm-label.illus   { color: var(--mzm-amber);   border-color: var(--mzm-amber); }
.mzm-label.roadmap { color: var(--mzm-purple);  border-color: var(--mzm-purple); }
.mzm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mzm-chips span, .mzm-chips li {
  font-family: var(--mzm-mono); font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--mzm-line); color: var(--mzm-muted); border-radius: 2px;
  list-style: none;
}

/* ---------- buttons & CTA bands ---------- */
.mzm-btn {
  display: inline-block; font-family: var(--mzm-mono); font-size: 15px;
  padding: 14px 26px; border: 2px solid var(--mzm-cyan); color: var(--mzm-cyan);
  background: transparent; cursor: pointer;
}
.mzm-btn:hover { background: var(--mzm-cyan); color: #06262C; text-decoration: none; }
.mzm-btn.primary { background: var(--mzm-cyan); color: #06262C; }
.mzm-btn.primary:hover { background: #6ee7f7; border-color: #6ee7f7; }
.mzm-answer-band {
  border: 2px solid var(--mzm-cyan); background: var(--mzm-bg-1);
  padding: 22px 26px; font-family: var(--mzm-serif);
  font-size: clamp(19px, 2.4vw, 23px); text-align: center; line-height: 1.45;
}
.mzm-answer-band strong { color: var(--mzm-cyan); font-weight: 700; }

/* next-step conversion band: every page leads somewhere */
.mzm-next { border-bottom: 0; padding: 76px 0 90px; text-align: center; }
.mzm-next h2 { margin-bottom: 12px; }
.mzm-next p { color: var(--mzm-muted); max-width: 640px; margin: 0 auto 28px; }
.mzm-next .mzm-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- definition rows (use-case fields, stage fields) ---------- */
.mzm-fields { display: grid; gap: 10px; margin-top: 12px; }
.mzm-fields .row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: baseline; }
.mzm-fields .t {
  font-family: var(--mzm-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mzm-muted);
}
.mzm-fields p, .mzm-fields .d { font-size: 14.5px; color: var(--mzm-fg); }

/* ---------- comparison tables ---------- */
.mzm-table-wrap { position: relative; overflow-x: auto; margin-top: 30px; border: 2px solid var(--mzm-line); }
table.mzm-compare { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 14.5px; }
.mzm-compare th, .mzm-compare td { padding: 11px 14px; border-bottom: 1px solid #16303A; text-align: left; vertical-align: top; }
.mzm-compare tbody tr:last-child th, .mzm-compare tbody tr:last-child td { border-bottom: 0; }
.mzm-compare thead th {
  font-family: var(--mzm-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mzm-muted); background: var(--mzm-bg-1);
  border-bottom: 2px solid var(--mzm-line);
}
.mzm-compare tbody th { font-weight: 500; color: var(--mzm-fg); font-size: 14.5px; }
.mzm-compare td { color: var(--mzm-muted); }
.mzm-compare .miz { background: rgba(63, 220, 242, 0.05); color: var(--mzm-fg); }
.mzm-compare thead th.miz { color: var(--mzm-cyan); }

/* ---------- vertical timeline (lifecycle / pilot) ---------- */
.mzm-timeline { margin-top: 34px; display: grid; gap: 0; }
.mzm-tl-item { display: grid; grid-template-columns: 64px 1fr; gap: 0 22px; position: relative; padding-bottom: 34px; }
.mzm-tl-item:last-child { padding-bottom: 0; }
.mzm-tl-marker {
  width: 44px; height: 44px; border: 2px solid var(--mzm-line); border-radius: 50%;
  background: var(--mzm-bg-1); display: flex; align-items: center; justify-content: center;
  font-family: var(--mzm-mono); font-size: 14px; position: relative; z-index: 2;
}
.mzm-tl-item::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0;
  width: 2px; background: #1A3540; z-index: 1;
}
.mzm-tl-item:last-child::before { display: none; }
.mzm-tl-item.t1 .mzm-tl-marker { border-color: var(--mzm-cyan);    color: var(--mzm-cyan); }
.mzm-tl-item.t2 .mzm-tl-marker { border-color: var(--mzm-blue);    color: var(--mzm-blue); }
.mzm-tl-item.t3 .mzm-tl-marker { border-color: var(--mzm-rose);    color: var(--mzm-rose); }
.mzm-tl-item.t4 .mzm-tl-marker { border-color: var(--mzm-amber);   color: var(--mzm-amber); }
.mzm-tl-item.t5 .mzm-tl-marker { border-color: var(--mzm-purple);  color: var(--mzm-purple); }
.mzm-tl-item.t6 .mzm-tl-marker { border-color: var(--mzm-emerald); color: var(--mzm-emerald); }
.mzm-tl-item.t7 .mzm-tl-marker { border-color: var(--mzm-cyan);    color: var(--mzm-cyan); }
.mzm-tl-body h3 { font-size: 21px; margin-bottom: 4px; }
.mzm-tl-body .mzm-stage-obj { color: var(--mzm-muted); font-size: 15.5px; margin-bottom: 14px; }

/* ---------- pillars (decision-graph page) ---------- */
.mzm-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 30px; }

/* ---------- flow strip ---------- */
.mzm-flow-strip {
  margin-top: 26px; padding: 16px 18px; border: 2px solid var(--mzm-line);
  background: var(--mzm-bg-1); overflow-x: auto;
}
.mzm-flow-strip ol {
  display: flex; align-items: center; gap: 10px; list-style: none;
  font-family: var(--mzm-mono); font-size: 14px; white-space: nowrap;
}
.mzm-flow-strip li::after { content: "→"; margin-left: 10px; color: #46606A; }
.mzm-flow-strip li:last-child::after { content: ""; margin-left: 0; }

/* ---------- interactive demo (how-it-works) ---------- */
.mzm-demo { margin-top: 30px; border: 2px solid var(--mzm-line); background: var(--mzm-bg-1); padding: 26px; }
.mzm-demo-slider { display: grid; gap: 8px; max-width: 620px; }
.mzm-demo-slider label { font-family: var(--mzm-mono); font-size: 13px; color: var(--mzm-muted); letter-spacing: 0.06em; }
.mzm-demo-slider output { font-family: var(--mzm-mono); font-size: 22px; color: var(--mzm-fg); }
.mzm-demo input[type="range"] { width: 100%; accent-color: var(--mzm-cyan); height: 28px; }
.mzm-demo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.mzm-hypo-bars { display: grid; gap: 12px; }
.mzm-hypo-bar .nm { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.mzm-hypo-bar .nm .pct { font-family: var(--mzm-mono); font-size: 12.5px; color: var(--mzm-muted); }
.mzm-hypo-bar .track { height: 8px; background: #10262F; border: 1px solid #1A3540; }
.mzm-hypo-bar .fill { height: 100%; width: 0; background: var(--mzm-blue); }
.mzm-hypo-bar.lead .fill { background: var(--mzm-emerald); }
.mzm-hypo-bar.faded .nm { color: #5E747C; }
.mzm-hypo-bar.faded .fill { background: #2A4650; }
@media (prefers-reduced-motion: no-preference) {
  .mzm-hypo-bar .fill { transition: width 0.45s ease, background 0.3s ease; }
}
.mzm-demo-verdict { display: grid; gap: 12px; }
.mzm-demo-verdict .row { border-bottom: 1px solid #16303A; padding-bottom: 10px; }
.mzm-demo-verdict .row:last-child { border-bottom: 0; }
.mzm-demo-verdict .t {
  font-family: var(--mzm-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mzm-muted); margin-bottom: 3px;
}
.mzm-demo-verdict .d { font-size: 14.5px; }
.mzm-demo-verdict .d.ok { color: var(--mzm-emerald); }
.mzm-demo-verdict .d.warn { color: var(--mzm-amber); }
.mzm-demo-verdict .d.alert { color: var(--mzm-rose); }

/* ---------- verdict rows (shared) ---------- */
.mzm-verdict { display: grid; gap: 14px; }
.mzm-verdict .row { border-bottom: 1px solid #16303A; padding-bottom: 12px; }
.mzm-verdict .row:last-child { border-bottom: 0; }
.mzm-verdict .t {
  font-family: var(--mzm-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mzm-muted); margin-bottom: 4px;
}
.mzm-verdict .d { font-size: 15px; }

/* ---------- resource list ---------- */
.mzm-res-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 30px; }
.mzm-res-list .mzm-card { display: flex; flex-direction: column; gap: 8px; }
.mzm-res-list .mzm-card p { flex: 1; }
.mzm-res-list .fmt { font-family: var(--mzm-mono); font-size: 12px; color: #7E939B; }

/* ---------- FAQ ---------- */
details.mzm-faq { border: 2px solid var(--mzm-line); background: var(--mzm-bg-1); margin-top: -2px; }
details.mzm-faq:first-of-type { margin-top: 26px; }
.mzm-faq summary {
  cursor: pointer; list-style: none; padding: 16px 18px;
  font-family: var(--mzm-serif); font-size: 17.5px; color: var(--mzm-fg);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.mzm-faq summary::-webkit-details-marker { display: none; }
.mzm-faq summary::after { content: "+"; color: #46606A; font-family: var(--mzm-mono); }
.mzm-faq[open] summary::after { content: "–"; }
.mzm-faq .a { padding: 0 18px 18px; color: var(--mzm-muted); font-size: 15px; max-width: 820px; }

/* ---------- footer ---------- */
footer {
  border-top: 2px solid var(--mzm-line); padding: 26px 0 40px;
  font-size: 13.5px; color: #7E939B;
}
.mzm-foot-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .mzm-grid-3 { grid-template-columns: 1fr 1fr; }
  .mzm-demo-cols { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  section { padding: 58px 0; }
  .mzm-sub-hero { padding: 56px 0 48px; }
  .mzm-grid-2, .mzm-grid-3 { grid-template-columns: 1fr; }
  .mzm-fields .row { grid-template-columns: 1fr; gap: 3px; }
  .mzm-tl-item { grid-template-columns: 52px 1fr; gap: 0 14px; }
  .mzm-nav-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mzm-nav-links { justify-content: flex-start; }
}

/* ============================================================ */
/* Product-system editorial convergence — 2026-08-25            */
/* Brings /media/* into the same light-grid / dark-exhibit world */
/* as /intent while preserving every page's semantic structure.  */
/* ============================================================ */
:root {
  --mzm-bg: #F4F6F3;
  --mzm-bg-1: #FFFFFF;
  --mzm-bg-2: #E9EFEC;
  --mzm-line: #C9D4D0;
  --mzm-fg: #0B1E26;
  --mzm-muted: #53666D;
  --mzm-cyan: #008EA5;
  --mzm-amber: #A97812;
  --mzm-rose: #C7324A;
  --mzm-emerald: #087C54;
  --mzm-purple: #6652A8;
  --mzm-blue: #326B99;
  --mzm-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mzm-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mzm-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
body {
  background-color: var(--mzm-bg);
  background-image:
    linear-gradient(rgba(11,30,38,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,30,38,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--mzm-fg);
}
.mzm-wrap,.mzm-nav-inner { max-width: 1240px; }
.mzm-nav {
  background: rgba(244,246,243,.96);
  border-bottom: 1px solid var(--mzm-line);
  backdrop-filter: blur(12px);
}
.mzm-nav-inner { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.mzm-brand strong { color: var(--mzm-fg); font-family: var(--mzm-sans); font-size: 17px; letter-spacing: -.02em; }
.mzm-brand span { color: var(--mzm-muted); font-family: var(--mzm-mono); letter-spacing: .13em; text-transform: uppercase; }
.mzm-nav-links a { color: var(--mzm-fg); border-bottom: 1px solid transparent; }
.mzm-nav-links a[aria-current="page"] { color: var(--mzm-fg); }
.mzm-nav-links a.mzm-nav-cta { border: 1px solid var(--mzm-fg); color: var(--mzm-fg); padding: 10px 16px; }
.mzm-nav-links a.mzm-nav-cta:hover { background: #07161C; border-color: #07161C; color: #F4F6F3; }
.mzm-sub-hero {
  min-height: 520px;
  padding: 104px 0 86px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--mzm-line);
}
.mzm-sub-hero .mzm-wrap { width: 100%; }
.mzm-kicker { color: var(--mzm-cyan); letter-spacing: .22em; }
h1,h2,h3 { color: var(--mzm-fg); }
.mzm-sub-hero h1 {
  font-size: clamp(58px, 8.2vw, 116px);
  line-height: .9;
  letter-spacing: -.035em;
  max-width: 1000px;
  margin: 18px 0 30px;
}
.mzm-sub-hero .mzm-lede { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.65; max-width: 830px; color: var(--mzm-muted); }
section { border-bottom: 1px solid rgba(11,30,38,.11); }
.mzm-card,
details.mzm-faq,
details.mzm-rec,
.mzm-fields,
.mzm-comparison,
.mzm-timeline,
.mzm-res-list .mzm-card {
  background: rgba(255,255,255,.92);
  border-color: var(--mzm-line);
  border-width: 1px;
  border-radius: 0;
  box-shadow: none;
}
.mzm-card p,.mzm-faq .a,.mzm-rec summary .gist,.mzm-tl-body .mzm-stage-obj { color: var(--mzm-muted); }
.mzm-flow-strip,
.mzm-demo,
main figure {
  background: #07161C !important;
  color: #DCE9ED;
  border: 1px solid #24404A !important;
  box-shadow: 8px 8px 0 #DCE4E0;
}
.mzm-flow-strip { padding: 22px 24px; }
.mzm-flow-strip ol { color: #DCE9ED; }
.mzm-demo h2,.mzm-demo h3,.mzm-demo output { color: #F4F7F8; }
.mzm-demo p,.mzm-demo label { color: #9CB0B7; }
.mzm-btn { border: 1px solid var(--mzm-fg); color: var(--mzm-fg); border-radius: 0; }
.mzm-btn:hover,.mzm-btn.primary { background: #07161C; border-color: #07161C; color: #F4F6F3; }
.mzm-btn.primary:hover { background: var(--mzm-cyan); border-color: var(--mzm-cyan); color: #F4F6F3; }
.mzm-next { background: #07161C; color: #DCE9ED; border-top: 1px solid #24404A; border-bottom: 1px solid #24404A; }
.mzm-next h2 { color: #F4F7F8; }
.mzm-next p { color: #A8BAC0; }
.mzm-next .mzm-btn { border-color: #A8BAC0; color: #F4F7F8; }
.mzm-tl-marker { background: #F4F6F3; border-radius: 0; }
.mzm-tl-item::before { width: 1px; background: var(--mzm-line); }
.mzm-faq summary { color: var(--mzm-fg); }
footer { background: #07161C; color: #93A7AE; border-top: 1px solid #24404A; }
@media (max-width: 680px) {
  .mzm-sub-hero { min-height: 0; padding: 72px 0 58px; }
  .mzm-sub-hero h1 { font-size: clamp(50px, 16vw, 76px); }
  .mzm-nav { position: relative; }
  .mzm-nav-links { row-gap: 6px; }
}