/* /products/zunavi/ (loaded after home.css). Two parts:
   1. page layout helpers (split text + mockup, tick lists, indigo product palette)
   2. .zm = drawn mockups of the Zunavi app. They are illustrations, NOT screenshots: every name, number,
      customer and drawing is invented sample data (no real customer data may ever appear here).
      The whole mockup scales with its container: .zm-wrap is a size container and .zm sets
      font-size = width / 64, so every inner size is in em and the layout is identical at any width. */

/* ---------- Zunavi palette: cyan to indigo to violet ---------- */
body.home[data-product="zunavi"] {
  --hp-accent: #7f9bff;
  --hp-grad: linear-gradient(135deg, #74dff8 0%, #7f9bff 55%, #9eb4f7 100%);
  --hp-text-grad: linear-gradient(100deg, #74dff8 0%, #8fa8ff 50%, #aabdf8 100%);
}
html[data-theme="light"] body.home[data-product="zunavi"] {
  --hp-accent: #3b57d9;
  --hp-text-grad: linear-gradient(100deg, #0677ae 0%, #3b4fd8 55%, #3f63d0 100%);
}
body.home[data-product="zunavi"] canvas[data-flow-canvas] {
  --flow-s0: rgba(116, 223, 248, 0.95); --flow-s1: rgba(127, 155, 255, 0.95); --flow-s2: rgba(158, 180, 247, 0.9);
  --flow-b0: rgba(2, 177, 238, 0.09); --flow-b1: rgba(100, 120, 255, 0.11); --flow-b2: rgba(130, 159, 245, 0.08);
}
html[data-theme="light"] body.home[data-product="zunavi"] canvas[data-flow-canvas] {
  --flow-s0: rgba(6, 119, 174, 0.9); --flow-s1: rgba(59, 79, 216, 0.9); --flow-s2: rgba(63, 99, 208, 0.85);
}

/* ---------- page layout ---------- */
.zp-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; padding: 0.45rem 0.9rem; font-size: 0.8125rem; font-weight: 700; color: var(--c-ink-2); background: var(--c-tint); border: 1px solid var(--c-line-strong); border-radius: 999px; }
.zp-badge::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hp-accent); box-shadow: 0 0 0 0.25rem var(--c-tint); }
.zp-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .zp-split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 3.5rem; } .zp-split--rev { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); } .zp-split--rev > :first-child { order: 2; } }
.zp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.zp-list li { position: relative; padding-left: 2rem; font-size: 1.0625rem; line-height: 1.55; color: var(--c-ink-2); }
.zp-list li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--hp-grad); }
.zp-list li::after { content: ''; position: absolute; left: 0.42rem; top: 0.52em; width: 0.35rem; height: 0.6rem; border: solid var(--hp-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.zp-note { margin-top: 1.25rem; padding: 0.9rem 1.1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--c-ink-3); border-left: 3px solid var(--hp-accent); background: var(--c-tint); border-radius: 0 0.75rem 0.75rem 0; }
.zp-caption { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--c-ink-3); text-align: center; }
.zp-tilt { transform: perspective(1800px) rotateY(-9deg) rotateX(3deg); transform-origin: 30% 50%; transition: transform 0.6s var(--hp-ease); }
.zp-tilt:hover { transform: perspective(1800px) rotateY(-3deg) rotateX(1deg); }
@media (max-width: 1023.98px) { .zp-tilt { transform: none; } }
@media (prefers-reduced-motion: reduce) { .zp-tilt, .zp-tilt:hover { transform: none; transition: none; } }

/* ---------- mockup: shell ---------- */
.zm-wrap { container-type: inline-size; width: 100%; min-width: 0; }
.zm {
  --zm-font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zm-ink: #1a2340; --zm-mute: #586480; --zm-line: #dfe5f1; --zm-bg: #f3f6fc; --zm-card: #fff; --zm-blue: #3d5bdc; --zm-ok: #125970;
  font-size: calc(100cqw / 64); display: grid; grid-template-columns: 11em minmax(0, 1fr); width: 100%; overflow: hidden;
  font-family: var(--zm-font); font-weight: 500; line-height: 1.35; color: var(--zm-ink); background: var(--zm-bg);
  border-radius: 1.3em; border: 1px solid rgba(190, 215, 255, 0.3); text-align: left;
  box-shadow: 0 3em 6em -2em rgba(0, 10, 40, 0.75), 0 0 4em -1em var(--c-tint);
}
@supports not (width: 1cqw) { .zm { font-size: min(1.5vw, 10px); } }
.zm--plain { display: block; }
.zm * { box-sizing: border-box; }
.zm h4, .zm p { margin: 0; font-family: var(--zm-font); letter-spacing: 0; }
.zm b { font-weight: 800; } .zm .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--zm-blue); }

/* sidebar */
.zm-side { background: #0c1b3a; color: #c9d5ee; padding: 1.1em 0.8em; display: flex; flex-direction: column; gap: 0.15em; }
.zm-brand { display: flex; align-items: center; gap: 0.7em; padding: 0 0.3em 1em; margin-bottom: 0.6em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.zm-logo { flex: none; width: 2.6em; height: 2.6em; border-radius: 0.7em; background: linear-gradient(135deg, #74dff8, #5470ff); position: relative; }
.zm-logo::after { content: ''; position: absolute; inset: 0.75em 0.85em; border: 0.18em solid #0c1b3a; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.zm-brand b { display: block; font-size: 1.15em; color: #fff; } .zm-brand span { font-size: 0.78em; color: #93a4c8; }
.zm-nav-h { margin: 0.9em 0 0.3em 0.4em; font-size: 0.72em; letter-spacing: 0.08em; color: #7f90b6; }
.zm-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.62em 0.7em; border-radius: 0.7em; font-size: 0.95em; font-weight: 700; color: #d6e0f5; }
.zm-nav small { font-size: 0.72em; font-weight: 500; color: #8193b9; }
.zm-nav.is-on { background: rgba(120, 150, 255, 0.2); color: #fff; }

/* main + top bar */
.zm-main { min-width: 0; display: flex; flex-direction: column; }
.zm-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 1.2em; background: #fff; border-bottom: 1px solid var(--zm-line); }
.zm-search { flex: 0 1 28em; display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.9em; font-size: 0.92em; color: var(--zm-mute); background: var(--zm-bg); border: 1px solid var(--zm-line); border-radius: 0.8em; white-space: nowrap; overflow: hidden; }
.zm-search::before { content: ''; flex: none; width: 0.9em; height: 0.9em; border: 0.17em solid var(--zm-blue); border-radius: 50%; }
.zm-user { display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; white-space: nowrap; } .zm-user i { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--zm-blue); }
.zm-body { padding: 1.2em; display: flex; flex-direction: column; gap: 1em; }
.zm-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.8em; } .zm-title h4 { font-size: 1.7em; font-weight: 800; } .zm-title em { font-style: normal; font-weight: 800; font-size: 1.05em; color: var(--zm-blue); }
.zm-sub { font-size: 0.9em; color: var(--zm-mute); }

/* stat cards, chips, drawing cards */
.zm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.zm-stat { background: var(--zm-card); border-radius: 0.9em; padding: 0.8em 1em; box-shadow: 0 0.1em 0.5em rgba(30, 50, 100, 0.08); }
.zm-stat b { display: block; font-size: 2em; line-height: 1.1; } .zm-stat span { font-size: 0.82em; color: var(--zm-mute); }
.zm-stat i { display: block; height: 0.3em; margin-top: 0.6em; border-radius: 1em; background: linear-gradient(90deg, var(--c1, #3d5bdc) var(--w, 60%), #e6ebf5 var(--w, 60%)); }
.zm-chips { display: flex; flex-wrap: wrap; gap: 0.6em; }
.zm-chip { padding: 0.45em 0.9em; font-size: 0.88em; font-weight: 700; border-radius: 2em; background: #fff; border: 1px solid var(--zm-line); color: var(--zm-ink); }
.zm-chip.is-on { background: var(--zm-blue); border-color: var(--zm-blue); color: #fff; }
.zm-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 0.9em; }
.zm-card { position: relative; background: var(--zm-card); border-radius: 1em; overflow: hidden; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); }
.zm-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background: #eef2fa; padding: 0.6em; }
.zm-thumb svg { width: 100%; height: 100%; display: block; }
.zm-ok { position: absolute; top: 0.6em; left: 0.6em; padding: 0.2em 0.6em; font-size: 0.72em; font-weight: 800; color: var(--zm-ok); background: #e3f1f6; border-radius: 2em; }
.zm-meta { padding: 0.7em 0.9em 0.9em; display: grid; gap: 0.2em; } .zm-meta .row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; }
.zm-meta strong { font-size: 1.1em; font-weight: 800; } .zm-meta small { font-size: 0.8em; color: var(--zm-mute); }
.zm-tag { padding: 0.15em 0.6em; font-size: 0.75em; font-weight: 800; color: var(--zm-blue); background: #e8edff; border-radius: 0.5em; }
.zm-pct { position: absolute; top: 0.5em; right: 0.5em; padding: 0.15em 0.55em; font-size: 0.78em; font-weight: 800; color: #0f4151; background: #b7dfec; border-radius: 0.6em; }
.zm-acts { display: flex; gap: 0.4em; margin-top: 0.5em; } .zm-acts span { flex: 1; padding: 0.4em 0; text-align: center; font-size: 0.78em; font-weight: 800; border: 1px solid var(--zm-line); border-radius: 0.5em; background: #fff; }
.zm-acts span:last-child { background: var(--zm-blue); border-color: var(--zm-blue); color: #fff; }
.zm-mat { display: inline-block; padding: 0.15em 0.6em; font-size: 0.78em; font-weight: 800; color: #3b4fd8; background: #fde8e6; border-radius: 2em; }

/* OCR sweep over the thumbnails (the line that "reads" the sheet) */
.zm-sweep { position: relative; overflow: hidden; }
.zm-sweep::after { content: ''; position: absolute; left: 0; right: 0; top: -2em; height: 2em; background: linear-gradient(180deg, transparent, rgba(61, 91, 220, 0.25), transparent); border-bottom: 0.12em solid rgba(61, 91, 220, 0.8); animation: zm-sweep 5s ease-in-out infinite; }
@keyframes zm-sweep { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(calc(100% * 14)); } }
html.flow-paused .zm-sweep::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .zm-sweep::after { display: none; } }

/* ---------- mockup: drawing detail ---------- */
.zm-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: #fff; }
.zm-dhead { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8em; padding: 1em 1.3em; border-bottom: 1px solid var(--zm-line); }
.zm-dhead h4 { font-size: 1.5em; font-weight: 800; } .zm-pill { padding: 0.25em 0.8em; font-size: 0.8em; font-weight: 800; color: var(--zm-ok); background: #e3f1f6; border-radius: 2em; }
.zm-tabs { display: flex; gap: 1.4em; padding: 0.8em 1.3em 0; font-size: 0.95em; font-weight: 700; color: var(--zm-mute); border-bottom: 1px solid var(--zm-line); }
.zm-tabs span { padding-bottom: 0.7em; } .zm-tabs .is-on { color: var(--zm-blue); border-bottom: 0.18em solid var(--zm-blue); }
.zm-sheet { background: #eef2fa; padding: 1em; display: block; } .zm-sheet svg { display: block; width: 100%; height: auto; box-shadow: 0 0.2em 1em rgba(30, 50, 100, 0.2); }
.zm-info { padding: 1em 1.3em; display: grid; gap: 0.9em; align-content: start; border-left: 1px solid var(--zm-line); }
.zm-info h5 { margin: 0; font-size: 0.75em; letter-spacing: 0.1em; color: var(--zm-mute); font-weight: 700; }
.zm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em 1em; } .zm-kv span { display: block; font-size: 0.75em; color: var(--zm-mute); } .zm-kv b { font-size: 1.05em; }
.zm-qr { display: flex; gap: 0.9em; align-items: center; } .zm-qr svg { flex: none; width: 6em; height: 6em; } .zm-qr p { font-size: 0.82em; color: var(--zm-mute); }
.zm-steps { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; padding: 0.8em; background: #f6f8fd; border-radius: 0.8em; font-size: 0.9em; font-weight: 800; color: var(--zm-ok); }
.zm-steps i { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 0.14em solid var(--zm-ok); border-radius: 50%; font-style: normal; font-size: 0.85em; }
.zm-btn { display: block; padding: 0.8em; text-align: center; font-weight: 800; color: #fff; background: var(--zm-blue); border-radius: 0.7em; }

/* ---------- mockup: compare ---------- */
.zm-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 1.1em; background: var(--zm-bg); }
.zm-pane { background: #fff; border-radius: 1em; overflow: hidden; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); }
.zm-pane header { display: flex; justify-content: space-between; align-items: center; padding: 0.7em 1em; font-size: 0.9em; font-weight: 700; border-bottom: 1px solid var(--zm-line); }
.zm-seg { display: inline-flex; gap: 0.2em; font-size: 0.85em; } .zm-seg span { padding: 0.25em 0.7em; border-radius: 2em; color: var(--zm-mute); } .zm-seg .is-on { background: var(--zm-blue); color: #fff; }
.zm-pane .zm-sheet { padding: 0.8em; }
.zm-overlay { grid-column: 1 / -1; background: #fff; border-radius: 1em; overflow: hidden; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); }
.zm-overlay header { padding: 0.7em 1em; font-size: 0.82em; font-weight: 800; letter-spacing: 0.08em; color: var(--zm-mute); }
.zm-overlay .stage { position: relative; background: #05070d; padding: 1em; } .zm-overlay svg { display: block; margin: 0 auto; width: 56%; height: auto; }
.zm-legend { display: flex; gap: 1.2em; padding: 0.7em 1em; font-size: 0.82em; font-weight: 700; } .zm-legend i { display: inline-block; width: 1.4em; height: 0.3em; border-radius: 1em; margin-right: 0.5em; vertical-align: middle; }

/* ---------- mockup: similar search ---------- */
.zm-src { display: flex; align-items: center; gap: 1em; padding: 0.9em 1em; background: #fff; border: 1px solid var(--zm-line); border-radius: 1em; }
.zm-src .zm-thumb { flex: none; width: 7em; aspect-ratio: 4 / 3; padding: 0.3em; border-radius: 0.6em; }
.zm-src h4 { font-size: 1.35em; font-weight: 800; margin: 0.15em 0 0.4em; }
.zm-note { padding: 0.35em 0.9em; font-size: 0.85em; font-weight: 700; color: var(--zm-blue); background: #e8edff; border-radius: 2em; }
.zm-h { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; } .zm-h b { font-size: 1.1em; }

@media (max-width: 640px) { .zm { font-size: calc(100cqw / 42); grid-template-columns: 0 minmax(0, 1fr); } .zm-side { display: none; } .zm-stats { grid-template-columns: repeat(2, 1fr); } .zm-cards { --cols: 2 !important; } .zm-card:nth-child(n+3) { display: none; } }

/* status dots are drawn, not typed (seo-check forbids pictograph characters in text) */
.zm-ok::before, .zm-pill::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; border-radius: 50%; background: currentColor; vertical-align: 0.04em; }

/* sidebar labels stay on one line; the sub-labels are dropped (they only added noise at this size) */
.zm-nav { white-space: nowrap; } .zm-nav small { display: none; }
body.home[data-product] .hp-h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); }
html[lang="ja"] body.home[data-product] .hp-h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }

/* ---------- mockup: title-block scan and 3D viewer ---------- */
.zm-scanbox { position: relative; } .zm-scanbox svg { display: block; width: 100%; height: auto; box-shadow: 0 0.2em 1em rgba(30, 50, 100, 0.2); }
.zm-tb { position: absolute; left: 61.5%; top: 76.5%; width: 36%; height: 20%; border: 0.22em solid var(--zm-blue); border-radius: 0.35em; background: rgba(61, 91, 220, 0.14); box-shadow: 0 0 0 0.3em rgba(61, 91, 220, 0.22); animation: zm-pulse 2.4s ease-in-out infinite; }
@keyframes zm-pulse { 0%, 100% { box-shadow: 0 0 0 0.2em rgba(61, 91, 220, 0.25); } 50% { box-shadow: 0 0 0 0.7em rgba(61, 91, 220, 0.05); } }
html.flow-paused .zm-tb { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .zm-tb { animation: none; } }
.zm-fields { display: grid; gap: 0.55em; padding: 0.9em; }
.zm-fields .f { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 0.7em; padding: 0.65em 0.85em; background: #f6f8fd; border-radius: 0.7em; }
.zm-fields .f span { font-size: 0.8em; color: var(--zm-mute); } .zm-fields .f b { font-size: 1.05em; }
.zm-fields .f i { font-style: normal; font-size: 0.72em; font-weight: 800; padding: 0.25em 0.8em; border-radius: 2em; }
.zm-fields .ok { color: #125970; background: #e3f1f6; } .zm-fields .chk { color: #065874; background: #caf0fc; }
.zm-3d { position: relative; background: linear-gradient(180deg, #e8ecf4, #f7f9fc); padding: 1.2em 1em 3.6em; }
.zm-3d > svg:first-child { display: block; width: 78%; height: auto; margin: 0 auto; }
.zm-3d .cube { position: absolute; top: 1.2em; right: 1.5em; width: 5em; height: 5em; }
.zm-3d .tools { position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%); display: flex; gap: 0.6em; padding: 0.5em 0.8em; background: #fff; border-radius: 1em; box-shadow: 0 0.2em 1em rgba(30, 50, 100, 0.18); }
.zm-3d .tools i { display: block; width: 2em; height: 2em; border: 0.18em solid var(--zm-blue); border-radius: 0.5em; opacity: 0.85; }
.zm-dhead .zm-seg { font-size: 0.85em; }

/* ---------- OpenVanning palette: amber to coral (shipping containers) ---------- */
body.home[data-product="openvanning"] {
  --hp-accent: #64d2f7;
  --hp-grad: linear-gradient(135deg, #81daf8 0%, #64d2f7 55%, #94b2ff 100%);
  --hp-text-grad: linear-gradient(100deg, #81daf8 0%, #72d6f8 50%, #94b2ff 100%);
  --c-link: #81daf8; --c-link-hover: #aae7fb; --c-focus: #81daf8; --c-tint: rgba(100, 210, 247, 0.14);
}
html[data-theme="light"] body.home[data-product="openvanning"] {
  --hp-accent: #0c94c2; --hp-text-grad: linear-gradient(100deg, #087092 0%, #0c94c2 55%, #3b4fd8 100%);
  --c-link: #087092; --c-link-hover: #065874; --c-focus: #087092; --c-tint: rgba(70, 201, 245, 0.14);
}
body.home[data-product="openvanning"] canvas[data-flow-canvas] {
  --flow-s0: rgba(129, 218, 248, 0.95); --flow-s1: rgba(100, 210, 247, 0.95); --flow-s2: rgba(148, 178, 255, 0.9);
  --flow-b0: rgba(98, 210, 247, 0.09); --flow-b1: rgba(79, 204, 246, 0.11); --flow-b2: rgba(130, 159, 245, 0.08);
  --flow-k0: rgba(174, 232, 251, 0.9); --flow-k1: rgba(98, 210, 247, 0.35); --flow-k2: rgba(79, 204, 246, 0);
}
html[data-theme="light"] body.home[data-product="openvanning"] canvas[data-flow-canvas] {
  --flow-s0: rgba(8, 112, 146, 0.9); --flow-s1: rgba(12, 148, 194, 0.9); --flow-s2: rgba(59, 79, 216, 0.85);
  --flow-k0: rgba(70, 201, 245, 0.6); --flow-k1: rgba(70, 201, 245, 0.22); --flow-k2: rgba(70, 201, 245, 0);
}

/* ---------- OpenVanning mockups: tables, selection bar, reconciliation, plans, documents ---------- */
.zm-tbl { background: #fff; border-radius: 1em; overflow: hidden; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); }
.zm-tbl .h, .zm-tbl .r { display: grid; grid-template-columns: 1.6em 5.2em 1fr 4.6em 1fr 4.4em 4.6em; align-items: center; gap: 0.6em; padding: 0.65em 0.9em; font-size: 0.86em; border-bottom: 1px solid var(--zm-line); }
.zm-tbl .h { background: #f6f8fd; color: var(--zm-mute); font-weight: 700; font-size: 0.78em; }
.zm-tbl .r.sel { background: #eef2ff; }
.zm-tbl .cb { width: 1.2em; height: 1.2em; border: 0.14em solid #b9c3dc; border-radius: 0.3em; background: #fff; }
.zm-tbl .cb.on { background: var(--zm-blue); border-color: var(--zm-blue); box-shadow: inset 0 0 0 0.2em #fff; }
.zm-tbl .st { justify-self: start; padding: 0.15em 0.7em; font-size: 0.82em; font-weight: 800; border-radius: 2em; }
.zm-tbl .st.ok { color: #125970; background: #e3f1f6; } .zm-tbl .st.wait { color: #065874; background: #caf0fc; }
.zm-tbl--lot .h, .zm-tbl--lot .r { grid-template-columns: 1.6em 8em 5em 1fr; }
.zm-tbl .r.off { opacity: 0.55; background: #f2f4f9; }
.zm-selbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 1.1em; font-size: 0.9em; font-weight: 700; color: #fff; background: #0c1b3a; border-radius: 1em; }
.zm-selbar b { padding: 0.5em 1em; font-size: 0.92em; color: #fff; background: var(--zm-blue); border-radius: 0.7em; }
.zm-recon { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; }
.zm-recon .col { background: #fff; border-radius: 1em; padding: 0.9em 1em; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); display: grid; gap: 0.5em; align-content: start; }
.zm-recon h5 { margin: 0 0 0.3em; font-size: 0.78em; letter-spacing: 0.08em; color: var(--zm-mute); }
.zm-recon .l { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7em; padding: 0.5em 0.7em; background: #f6f8fd; border-radius: 0.6em; font-size: 0.9em; } .zm-recon .l b { font-size: 1.05em; }
.zm-recon i { font-style: normal; font-size: 0.74em; font-weight: 800; padding: 0.2em 0.7em; border-radius: 2em; }
.zm-recon .ok { color: #125970; background: #e3f1f6; } .zm-recon .chk { color: #065874; background: #caf0fc; }
.zm-3d--ov { padding-bottom: 3.2em; background: linear-gradient(180deg, #eaeef6, #f8fafd); }
.zm-3d--ov .ov3d { display: block; width: 86%; height: auto; margin: 0 auto; }
.zm-3d--ov .legend { position: absolute; left: 1.2em; top: 1em; display: grid; gap: 0.4em; font-size: 0.82em; font-weight: 700; color: var(--zm-ink); }
.zm-3d--ov .legend i { display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; border-radius: 0.3em; vertical-align: -0.15em; }
.zm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 1em; background: var(--zm-bg); }
.zm-plans .p { display: grid; gap: 0.6em; justify-items: center; padding: 0.9em; background: #fff; border-radius: 1em; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); } .zm-plans .p b { justify-self: start; font-size: 1.05em; }
.zm-plans .ov3d { width: 100%; height: auto; } .zm-btn--ghost { color: var(--zm-blue); background: #fff; border: 0.12em solid var(--zm-blue); }
.zm-plans .zm-btn { width: 100%; font-size: 0.9em; padding: 0.6em; }
.zm-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 1.1em; background: var(--zm-bg); }
.zm-docs .d { display: grid; gap: 0.4em; justify-items: start; padding: 1em; background: #fff; border-radius: 1em; box-shadow: 0 0.1em 0.6em rgba(30, 50, 100, 0.1); }
.zm-docs .pg { width: 2.2em; height: 2.8em; border: 0.14em solid #9aa8c6; border-radius: 0.3em; background: linear-gradient(#e8edf8 0 0) 0.35em 0.7em / 1.2em 0.14em no-repeat, linear-gradient(#e8edf8 0 0) 0.35em 1.2em / 1.2em 0.14em no-repeat, #fff; }
.zm-docs b { font-size: 1.15em; } .zm-docs .d > span { font-size: 0.8em; color: var(--zm-mute); }
.zm-docs .fm { display: flex; gap: 0.4em; } .zm-docs .fm em { font-style: normal; font-size: 0.74em; font-weight: 800; padding: 0.2em 0.7em; border-radius: 2em; color: var(--zm-blue); background: #e8edff; }
@media (max-width: 640px) { .zm-tbl .h, .zm-tbl .r { grid-template-columns: 1.4em 5em 1fr 4em; } .zm-tbl .h span:nth-child(n+5), .zm-tbl .r span:nth-child(n+5) { display: none; } }

.zm-tbl .h span { white-space: nowrap; }