/* D-085 Rohit's Loom follow-ups, integrations area (docs/feedback/rohit-loom-2026-10-29.md). Loaded last on every route except /book-call. */

/* ── 1 · Integration hero mockups (Loom 6:22, 8:00) ─────────────────────────────────────────────────────────────────────
   The hero graphic is the platform's own admin with Zamp's sync data inside it (markup: lib/loom/integrations.mjs, data:
   data/integration-mockups.mjs). The D-066 hero stays: mark, H1, lead and form on one centred column, the graphic below
   it contained at 800px, and the toast on its lower-left corner. The connector card it replaces is hidden.
   Platform chrome uses each platform's colours and a system UI face; Zamp's own layer inside it (the sync panel, the
   status badges and the toast) stays in Season Sans / Season Mix and Zamp green. Type is on the D-057 graphic scale
   (12 / 13 / 14 / 15 / 20 / 24px) and never shrinks in narrow frames: narrow frames drop the sidebar and columns. */
html body:not(#zl) .z-hb--int:has(.zim) .header_image-wrapper.z-int-art { display: none !important; }

html body:not(#zl) .zim {
  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --top-bg: #fff; --top-fg: #303030; --top-line: #e3e3e3; --search-bg: #f1f1f1; --search-fg: #616161; --s-r: 6px;
  --side-w: 176px; --side-bg: #f7f7f7; --side-fg: #303030; --side-line: #e3e3e3; --on-bg: #fff; --on-fg: #000; --n-r: 6px;
  --main-bg: #fff; --card: #fff; --card-line: #e3e3e3; --card-sh: none; --r: 8px;
  --accent: #303030; --accent-fg: #fff; --b-r: 6px; --ink: #303030; --mute: #616161; --line: #ebebeb;
  --th-bg: transparent; --th-fg: #616161; --tab-on: #303030; --logo-bg: transparent; --logo-r: 4px; --av-bg: #e3e3e3; --av-fg: #303030; --av-r: 6px;
  position: relative; display: block; width: 100%; max-width: 800px; margin: 56px auto 48px; padding: 0;
  container-type: inline-size; font: 400 13px/1.4 var(--f); color: var(--ink); text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
html body:not(#zl) .zim * { box-sizing: border-box; }
html body:not(#zl) .zim svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
html body:not(#zl) .zim img { display: block; max-width: none; }
html body:not(#zl) .zim-win { overflow: hidden; background: var(--main-bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 0 #e6e1da, 0 24px 48px -20px rgba(12, 10, 8, .18); }

/* Top bar */
html body:not(#zl) .zim-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; background: var(--top-bg); color: var(--top-fg); border-bottom: 1px solid var(--top-line); }
html body:not(#zl) .zim-logo { flex: none; display: grid; place-items: center; height: 28px; min-width: 28px; padding: 0 5px; background: var(--logo-bg); border-radius: var(--logo-r); }
html body:not(#zl) .zim-top > .zim-logo--narrow { display: none; }
html body:not(#zl) .zim-logo img { height: 18px; width: auto; max-width: 84px; }
html body:not(#zl) .zim-brand { flex: none; font: 600 14px/1 var(--f); white-space: nowrap; }
html body:not(#zl) .zim-search { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 340px; height: 30px; margin: 0 auto; padding: 0 10px; background: var(--search-bg); color: var(--search-fg); border-radius: var(--s-r); font-size: 12px; white-space: nowrap; overflow: hidden; }
html body:not(#zl) .zim-search span { overflow: hidden; text-overflow: ellipsis; }
html body:not(#zl) .zim-store { flex: none; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; }
html body:not(#zl) .zim-store i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--av-r); background: var(--av-bg); color: var(--av-fg); font: 600 12px/1 var(--f); font-style: normal; }

/* Menu row (NetSuite, Business Central, Amazon) and in-bar menu (Xero) */
html body:not(#zl) .zim-tnav { display: flex; align-items: stretch; gap: 2px; height: 34px; padding: 0 10px; overflow: hidden; background: var(--tnav-bg, #fff); color: var(--tnav-fg, var(--ink)); border-bottom: 1px solid var(--line); }
html body:not(#zl) .zim-tnav .zim-nav__i { display: flex; align-items: center; padding: 0 10px; font-size: 13px; white-space: nowrap; }
html body:not(#zl) .zim-tnav .zim-nav__i.is-on { background: var(--tnav-on-bg, transparent); color: var(--tnav-on-fg, inherit); box-shadow: var(--tnav-on-sh, none); font-weight: 600; }

/* Body: sidebar + main */
html body:not(#zl) .zim-body { display: flex; align-items: stretch; }
html body:not(#zl) .zim-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--main-bg); }
html body:not(#zl) .zim-side { flex: none; display: flex; flex-direction: column; gap: 2px; width: var(--side-w); padding: 12px 8px; background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-line); }
html body:not(#zl) .zim-side__top { display: flex; align-items: center; gap: 8px; height: 36px; margin: -4px 0 8px; padding: 0 4px; }
html body:not(#zl) .zim-nav__i { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: var(--n-r); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
html body:not(#zl) .zim-nav__i > span { overflow: hidden; text-overflow: ellipsis; }
html body:not(#zl) .zim-side .zim-nav__i.is-on { background: var(--on-bg); color: var(--on-fg); font-weight: 600; box-shadow: var(--on-sh, none); }
html body:not(#zl) .zim-nav__h { margin: 12px 8px 2px; font-size: 12px; font-weight: 600; color: var(--side-h, var(--mute)); }
html body:not(#zl) .zim-nav__sub { display: flex; flex-direction: column; margin: 2px 0 4px; padding: 6px 0; background: var(--sub-bg, transparent); }
html body:not(#zl) .zim-nav__sub span { padding: 4px 12px 4px 32px; font-size: 13px; color: var(--sub-fg, var(--mute)); white-space: nowrap; }
html body:not(#zl) .zim-nav__sub span.is-on { color: var(--sub-on, #fff); font-weight: 600; }
html body:not(#zl) .zim-main { flex: 1 1 auto; min-width: 0; padding: 18px 18px 20px; background: var(--main-bg); }

/* Page head */
html body:not(#zl) .zim-crumbs { margin: 0 0 4px; font-size: 12px; color: var(--mute); }
html body:not(#zl) .zim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
html body:not(#zl) .zim-title { font: 600 20px/1.2 var(--f); color: var(--title, var(--ink)); white-space: nowrap; }
html body:not(#zl) .zim-title small { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--mute); }
html body:not(#zl) .zim-btn { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: var(--accent); color: var(--accent-fg); border: var(--btn-border, 0); border-radius: var(--b-r); font: 600 12px/1 var(--f); white-space: nowrap; }
html body:not(#zl) .zim-actions { display: flex; gap: 2px; margin: -6px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); overflow: hidden; }
html body:not(#zl) .zim-actions span { padding: 4px 10px; font-size: 13px; color: var(--act-fg, var(--accent)); white-space: nowrap; }

/* Zamp's layer: the sync panel */
html body:not(#zl) .zim-zamp { margin: 0 0 14px; padding: 12px 16px 14px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); box-shadow: var(--card-sh); font-family: var(--z-font-body); }
html body:not(#zl) .zim-zamp__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: #616161; white-space: nowrap; }
html body:not(#zl) .zim-zamp__h img { height: 13px; width: auto; }
html body:not(#zl) .zim-zamp__h span { overflow: hidden; text-overflow: ellipsis; }
html body:not(#zl) .zim-zamp__h em { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #afecdb; color: #183e3d; font: 500 12px/1.4 var(--z-font-body); font-style: normal; }
html body:not(#zl) .zim-zamp__h em i { width: 6px; height: 6px; border-radius: 50%; background: #183e3d; }
html body:not(#zl) .zim-zamp dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
html body:not(#zl) .zim-zamp dl > div + div { padding-left: 16px; border-left: 1px solid var(--card-line, #e3e3e3); }
html body:not(#zl) .zim-zamp dt { margin: 0 0 2px; font: 400 12px/1.3 var(--z-font-body); color: #616161; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body:not(#zl) .zim-zamp dd { margin: 0; font: 400 24px/1.15 var(--z-font-heading); color: #000; font-variant-numeric: tabular-nums; }

/* Record list */
html body:not(#zl) .zim-list { background: var(--list-bg, transparent); border: var(--list-border, 0); border-radius: var(--list-r, 0); box-shadow: var(--list-sh, none); overflow: hidden; }
html body:not(#zl) .zim-tabs { display: flex; gap: 18px; padding: 0 var(--list-pad, 0); border-bottom: 1px solid var(--line); overflow: hidden; }
html body:not(#zl) .zim-tabs span { padding: 8px 0; font-size: 13px; color: var(--mute); white-space: nowrap; }
html body:not(#zl) .zim-tabs span.is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tab-on); }
html body:not(#zl) .zim-filter { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); margin: 10px var(--list-pad, 0) 0; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--b-r); background: var(--main-bg); font-size: 12px; white-space: nowrap; overflow: hidden; }
html body:not(#zl) .zim-filter img { height: 14px; width: auto; max-width: 48px; }
html body:not(#zl) .zim-t { width: 100%; margin: 6px 0 0; border-collapse: collapse; border-spacing: 0; table-layout: auto; font: 400 13px/1.35 var(--f); color: var(--ink); background: transparent; }
html body:not(#zl) .zim-t th { padding: 8px 10px; background: var(--th-bg); color: var(--th-fg); border: 0; border-bottom: 1px solid var(--line); font: var(--th-font, 500 12px/1.3 var(--f)); text-transform: var(--th-case, none); letter-spacing: 0; text-align: left; white-space: nowrap; }
html body:not(#zl) .zim-t td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; font-size: 13px; }
html body:not(#zl) .zim-t tr:last-child td { border-bottom: 0; }
html body:not(#zl) .zim-t :is(th, td):first-child { padding-left: var(--list-pad, 10px); }
html body:not(#zl) .zim-t :is(th, td):last-child { padding-right: var(--list-pad, 10px); }
html body:not(#zl) .zim-t tbody tr:nth-child(even) td { background: var(--zebra, transparent); }
html body:not(#zl) .zim-t :is(.zim-c--total, .zim-c--tax) { text-align: right; font-variant-numeric: tabular-nums; }
html body:not(#zl) .zim-t td.zim-c--id b { font-weight: 600; color: var(--id-fg, inherit); }
html body:not(#zl) .zim-t td small { display: block; margin-top: 1px; font-size: 12px; color: var(--mute); }
html body:not(#zl) .zim-x { display: inline-block; font-size: 12px; color: var(--mute); }

/* Zamp's status badges: one colour per state on every platform */
html body:not(#zl) .zim-b { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font: 500 12px/1.4 var(--z-font-body); white-space: nowrap; }
html body:not(#zl) .zim-b svg { width: 12px; height: 12px; stroke-width: 2.2; }
html body:not(#zl) .zim-b i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body:not(#zl) .zim-b--ok { background: #afecdb; color: #183e3d; }
html body:not(#zl) .zim-b--mute { background: #f1efec; color: #4a4a4a; }
html body:not(#zl) .zim-b--info { background: #fff; color: #183e3d; box-shadow: inset 0 0 0 1px rgba(24, 62, 61, .35); }

/* Toast: the D-066 corner card */
html body:not(#zl) .zim-toast { position: absolute; left: -48px; bottom: -40px; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 10px 14px 10px 10px; background: #fff; box-shadow: 0 0 0 1.5px #e6e1da, 0 16px 40px -12px rgba(0, 0, 0, .18); font-family: var(--z-font-body); }
html body:not(#zl) .zim-toast i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: #183e3d; color: #fff; }
html body:not(#zl) .zim-toast i svg { width: 13px; height: 13px; stroke-width: 2; }
html body:not(#zl) .zim-toast b { display: block; font: 500 14px/1.3 var(--z-font-body); color: #000; white-space: nowrap; }
html body:not(#zl) .zim-toast small { display: block; font: 400 12px/1.3 var(--z-font-body); color: #6b6b6b; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html body:not(#zl) .zim-toast { animation: zim-toast .5s cubic-bezier(.2, .7, .2, 1) 1s both; }
  @keyframes zim-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Narrow frames: drop the sidebar, then columns. Type stays on the scale. */
@container (max-width: 780px) {
  html body:not(#zl) .zim .zim-n { display: none; }
}
@container (max-width: 640px) {
  html body:not(#zl) .zim-side, html body:not(#zl) .zim .zim-n, html body:not(#zl) .zim-store > span, html body:not(#zl) .zim-brand, html body:not(#zl) .zim-actions { display: none; }
  html body:not(#zl) .zim-top > .zim-logo--narrow { display: grid; }
  html body:not(#zl) .zim.zim .zim-search { flex: 0 0 30px; width: 30px; max-width: 30px; margin: 0 0 0 auto; padding: 0; justify-content: center; }
  html body:not(#zl) .zim-search span { display: none; }
  html body:not(#zl) .zim-main { padding: 14px 12px 12px; }
  html body:not(#zl) .zim-zamp { padding: 10px 12px 12px; }
  html body:not(#zl) .zim-zamp dl { gap: 10px; }
  html body:not(#zl) .zim-zamp dl > div + div { padding-left: 10px; }
  html body:not(#zl) .zim-zamp dd { font-size: 20px; }
  html body:not(#zl) .zim-zamp__h > span { display: none; }
  html body:not(#zl) .zim-tabs { gap: 14px; }
  html body:not(#zl) .zim-t .zim-c--total { display: none; }
}
@container (max-width: 440px) {
  html body:not(#zl) .zim-t .zim-c--who { display: none; }
  html body:not(#zl) .zim-t th { white-space: normal; vertical-align: bottom; }
  html body:not(#zl) .zim-t td.zim-c--id { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  html body:not(#zl) .zim--xero .zim-top .zim-tnav { display: none; }
  html body:not(#zl) .zim-tnav .zim-nav__i:not(.is-on) ~ .zim-nav__i:not(.is-on) { display: none; }
}
@media (max-width: 1023px) {
  html body:not(#zl) .zim-toast { left: -16px; }
}
@media (max-width: 767px) {
  html body:not(#zl) .zim { margin: 40px auto 48px; }
  html body:not(#zl) .zim-main { padding-bottom: 28px; }
  html body:not(#zl) .zim-toast { left: 12px; bottom: -36px; }
}

/* ── Platform themes ── */
/* Shopify: black top bar, grey sidebar, white cards on a grey canvas */
html body:not(#zl) .zim--shopify { --top-bg: #1a1a1a; --top-fg: #e3e3e3; --top-line: #1a1a1a; --search-bg: #303030; --search-fg: #b5b5b5; --s-r: 8px; --logo-bg: #fff; --logo-r: 6px;
  --side-bg: #ebebeb; --side-line: transparent; --on-bg: #fafafa; --on-sh: 0 1px 0 rgba(0, 0, 0, .06); --main-bg: #f1f1f1; --card-line: transparent; --card-sh: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(0, 0, 0, .06); --r: 12px;
  --list-bg: #fff; --list-r: 12px; --list-sh: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(0, 0, 0, .06); --list-pad: 12px; --th-bg: #f7f7f7; --b-r: 8px; --av-bg: #e3e3e3; --av-fg: #303030; --av-r: 8px; }
html body:not(#zl) .zim--shopify .zim-body { background: #ebebeb; }
html body:not(#zl) .zim--shopify .zim-main { border-top-left-radius: 12px; }
html body:not(#zl) .zim--shopify .zim-filter { border-radius: 8px; border-style: dashed; }

/* BigCommerce: dark navy sidebar, blue actions */
html body:not(#zl) .zim--bigcommerce { --side-bg: #313440; --side-fg: #c4c6cf; --side-line: transparent; --on-bg: #3c64f4; --on-fg: #fff; --n-r: 4px; --logo-bg: #fff; --main-bg: #f6f7f9; --top-bg: #fff;
  --accent: #3c64f4; --b-r: 4px; --r: 4px; --list-bg: #fff; --list-border: 1px solid #d9dce9; --list-r: 4px; --list-pad: 12px; --th-bg: #f6f7f9; --tab-on: #3c64f4; --card-line: #d9dce9; --av-bg: #3c64f4; --av-fg: #fff; --av-r: 50%; }

/* WooCommerce: WordPress admin, dark menu, blue current item */
html body:not(#zl) .zim--woocommerce { --top-bg: #1d2327; --top-fg: #f0f0f1; --top-line: #1d2327; --search-bg: #2c3338; --search-fg: #c3c4c7; --s-r: 2px; --logo-bg: #fff;
  --side-bg: #1d2327; --side-fg: #f0f0f1; --side-line: transparent; --on-bg: #2271b1; --on-fg: #fff; --n-r: 0; --sub-bg: #2c3338; --sub-fg: #c3c4c7; --sub-on: #fff;
  --main-bg: #f0f0f1; --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --accent: #f6f7f7; --accent-fg: #2271b1; --btn-border: 1px solid #2271b1; --b-r: 3px; --r: 0; --card-line: #c3c4c7;
  --list-bg: #fff; --list-border: 1px solid #c3c4c7; --list-pad: 10px; --tab-on: transparent; --av-bg: #50575e; --av-fg: #fff; --av-r: 0; }
html body:not(#zl) .zim--woocommerce .zim-top { height: 34px; }
html body:not(#zl) .zim--woocommerce .zim-side { padding: 8px 0; }
html body:not(#zl) .zim--woocommerce .zim-title { font-weight: 400; }
html body:not(#zl) .zim--woocommerce .zim-tabs { border: 0; gap: 0; background: #f0f0f1; }
html body:not(#zl) .zim--woocommerce .zim-tabs span { padding: 0 8px 8px 0; color: #2271b1; }
html body:not(#zl) .zim--woocommerce .zim-tabs span.is-on { color: #000; box-shadow: none; }
html body:not(#zl) .zim--woocommerce .zim-list { overflow: visible; background: transparent; border: 0; }
html body:not(#zl) .zim--woocommerce .zim-t { background: #fff; box-shadow: 0 0 0 1px #c3c4c7; margin: 0; }
html body:not(#zl) .zim--woocommerce .zim-t td.zim-c--id b { color: #2271b1; }
html body:not(#zl) .zim--woocommerce .zim-x { padding: 2px 8px; border-radius: 4px; background: #e5e5e5; color: #454545; }
html body:not(#zl) .zim--woocommerce .zim-x[data-v="processing"] { background: #c6e1c6; color: #2c4700; }
html body:not(#zl) .zim--woocommerce .zim-x[data-v="completed"] { background: #c8d7e1; color: #2e4453; }

/* Adobe Commerce / Magento: charcoal sidebar with stacked labels, orange action, dark grid header */
html body:not(#zl) .zim--magento { --side-w: 92px; --side-bg: #373330; --side-fg: #e0dcd8; --side-line: transparent; --on-bg: #524d49; --on-fg: #fff; --n-r: 0; --logo-bg: #fff;
  --f: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --main-bg: #fff; --title: #41362f;
  --accent: #c94400; --accent-fg: #fff; --b-r: 0; --r: 0; --card-line: #e3e3e3; --th-bg: #514943; --th-fg: #fff; --th-font: 600 12px/1.3 var(--f); --zebra: #f5f5f5; --line: #d6d6d6; --list-pad: 10px; --av-r: 0; }
html body:not(#zl) .zim--magento .zim-side { align-items: stretch; padding: 0; gap: 0; }
html body:not(#zl) .zim--magento .zim-side__top { justify-content: center; height: 56px; margin: 0; }
html body:not(#zl) .zim--magento .zim-nav__i { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 12px; text-transform: uppercase; text-align: center; }
html body:not(#zl) .zim--magento .zim-nav__i svg { width: 18px; height: 18px; }
html body:not(#zl) .zim--magento .zim-side .zim-nav__i.is-on { box-shadow: inset 3px 0 0 #eb5202; }
html body:not(#zl) .zim--magento .zim-title { font-weight: 300; font-size: 24px; }
html body:not(#zl) .zim--magento .zim-t td { border-bottom-color: #e3e3e3; }

/* NetSuite: white header, slate menu row, grey list header in caps */
html body:not(#zl) .zim--netsuite { --f: Arial, "Helvetica Neue", Helvetica, sans-serif; --search-bg: #fff; --s-r: 2px; --top-line: #d5d9de;
  --tnav-bg: #2d4a69; --tnav-fg: #fff; --tnav-on-bg: #4c6d93; --line: #dfe3e8; --accent: #2768c4; --b-r: 3px; --r: 3px; --card-line: #d5d9de; --mute: #5a6672;
  --th-bg: #e5e8ec; --th-fg: #3c4652; --th-font: 700 12px/1.3 var(--f); --th-case: uppercase; --zebra: #f6f7f9; --id-fg: #2768c4; --av-bg: #2d4a69; --av-fg: #fff; --av-r: 50%; }
html body:not(#zl) .zim--netsuite .zim-search { border: 1px solid #b9c1ca; }
html body:not(#zl) .zim--netsuite .zim-title { font-size: 20px; font-weight: 700; color: #3c4652; }
html body:not(#zl) .zim--netsuite .zim-filter { display: flex; margin: 0 0 8px; padding: 6px 10px; border: 0; border-radius: 0; background: #f0f2f5; color: #3c4652; font-weight: 700; white-space: pre; }
html body:not(#zl) .zim--netsuite .zim-btn { background-color: #2768c4; background-image: linear-gradient(#3a7bd5, #2768c4); }

/* QuickBooks Online: charcoal sidebar with the "+ New" button, green actions */
html body:not(#zl) .zim--qbo { --f: "Avenir Next", Avenir, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --side-bg: #393a3d; --side-fg: #d4d7dc; --side-line: transparent; --on-bg: #000; --on-fg: #fff; --n-r: 0;
  --main-bg: #f4f5f8; --top-bg: #fff; --search-bg: #fff; --s-r: 4px; --accent: #108000; --b-r: 4px; --r: 4px; --card-line: #dcdee2;
  --list-bg: #fff; --list-border: 1px solid #dcdee2; --list-r: 4px; --list-pad: 12px; --tab-on: #108000; --th-fg: #6b6c72; --th-font: 600 12px/1.3 var(--f); --th-case: uppercase; --av-bg: #108000; --av-fg: #fff; --av-r: 50%; }
html body:not(#zl) .zim--qbo .zim-side { padding: 12px 0; gap: 0; }
html body:not(#zl) .zim--qbo .zim-side__top { padding: 0 12px; }
html body:not(#zl) .zim--qbo .zim-side__top .zim-logo img { height: 24px; }
html body:not(#zl) .zim--qbo .zim-nav__i { padding: 0 14px; }
html body:not(#zl) .zim--qbo .zim-side .zim-nav__i.is-on { box-shadow: inset 4px 0 0 #2ca01c; }
html body:not(#zl) .zim--qbo .zim-nav__i--new { justify-content: center; margin: 0 12px 10px; border: 1px solid #fff; border-radius: 18px; color: #fff; font-weight: 600; }
html body:not(#zl) .zim--qbo .zim-search { border: 1px solid #babec5; }
html body:not(#zl) .zim--qbo .zim-tabs { background: transparent; }
html body:not(#zl) .zim--qbo .zim-list .zim-tabs { margin: 0; }

/* Xero: navy bar carrying the menu, blue actions */
html body:not(#zl) .zim--xero { --top-bg: #1f3c5c; --top-fg: #fff; --top-line: #1f3c5c; --search-bg: rgba(255, 255, 255, .14); --search-fg: #dfe8f1; --s-r: 4px; --logo-bg: #fff; --logo-r: 50%;
  --accent: #0078c8; --b-r: 4px; --r: 4px; --card-line: #d4dbe2; --tab-on: #0078c8; --th-fg: #59646f; --main-bg: #fff; --list-border: 1px solid #d4dbe2; --list-r: 4px; --list-pad: 12px; --id-fg: #0078c8; --av-bg: #13b5ea; --av-fg: #00294d; --av-r: 50%; }
html body:not(#zl) .zim--xero .zim-top .zim-tnav { height: 48px; padding: 0; background: transparent; color: #dfe8f1; border: 0; flex: 0 1 auto; }
html body:not(#zl) .zim--xero .zim-top .zim-tnav .zim-nav__i { padding: 0 8px; }
html body:not(#zl) .zim--xero .zim-top .zim-tnav .zim-nav__i.is-on { color: #fff; box-shadow: inset 0 -3px 0 #13b5ea; }
html body:not(#zl) .zim--xero .zim-search { flex: 0 1 180px; margin-left: auto; }

/* Business Central: dark app bar with the product name, role-centre links, teal action bar */
html body:not(#zl) .zim--bc { --f: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; --top-bg: #002050; --top-fg: #fff; --top-line: #002050; --search-bg: rgba(255, 255, 255, .12); --search-fg: #dfe6f0; --s-r: 2px; --logo-bg: #fff; --logo-r: 2px;
  --tnav-bg: #fff; --tnav-fg: #505050; --tnav-on-sh: inset 0 -2px 0 #008489; --tnav-on-fg: #000; --accent: #008489; --act-fg: #00676b; --b-r: 2px; --r: 2px; --card-line: #e1e1e1; --th-fg: #505050; --th-font: 600 12px/1.3 var(--f); --id-fg: #00676b; --av-bg: #008489; --av-fg: #fff; --av-r: 50%; }
html body:not(#zl) .zim--bc .zim-search { max-width: 220px; margin-left: auto; margin-right: 0; }
html body:not(#zl) .zim--bc .zim-btn { display: none; }

/* Stripe: white sidebar with the account at its top, purple actions */
html body:not(#zl) .zim--stripe { --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; --side-bg: #fff; --side-fg: #414552; --side-line: #ebeef1; --on-bg: transparent; --on-fg: #635bff;
  --top-line: transparent; --search-bg: #f6f8fa; --s-r: 6px; --ink: #1a1b25; --mute: #687385; --accent: #635bff; --b-r: 6px; --r: 8px; --card-line: #ebeef1; --tab-on: #635bff; --th-fg: #1a1b25; --th-font: 600 12px/1.3 var(--f); --line: #ebeef1; --av-bg: #635bff; --av-fg: #fff; --av-r: 4px; }
html body:not(#zl) .zim--stripe .zim-title { font-weight: 700; }
html body:not(#zl) .zim--stripe .zim-x { padding: 1px 6px; border-radius: 4px; background: #ebeef1; color: #545969; font-weight: 600; }
html body:not(#zl) .zim--stripe .zim-x[data-v="paid"] { background: #d7f7c2; color: #05690d; }
html body:not(#zl) .zim--stripe .zim-x[data-v="open"] { background: #cff5f6; color: #0055bc; }
html body:not(#zl) .zim--stripe .zim-t td.zim-c--total { font-weight: 600; text-align: left; }
html body:not(#zl) .zim--stripe .zim-t th.zim-c--total { text-align: left; }

/* Chargebee: deep indigo sidebar, orange action */
html body:not(#zl) .zim--chargebee { --side-bg: #15163a; --side-fg: #c3c5e4; --side-line: transparent; --on-bg: rgba(255, 255, 255, .1); --on-fg: #fff; --logo-bg: #fff; --side-w: 188px;
  --accent: #2b2d6e; --b-r: 4px; --r: 6px; --card-line: #e4e6ef; --tab-on: #15163a; --th-bg: #f6f7fb; --list-border: 1px solid #e4e6ef; --list-r: 6px; --av-bg: #2b2d6e; --av-fg: #fff; --av-r: 50%; }

/* Rillet: quiet light sidebar, black actions */
html body:not(#zl) .zim--rillet { --f: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --side-bg: #fafafa; --side-fg: #3f3f46; --side-line: #ececec; --on-bg: #ececec; --on-fg: #09090b;
  --accent: #18181b; --b-r: 6px; --r: 8px; --card-line: #e4e4e7; --tab-on: #18181b; --line: #ececec; --list-border: 1px solid #e4e4e7; --list-r: 8px; --list-pad: 12px; --av-bg: #18181b; --av-fg: #fff; --av-r: 6px; }

/* Checkout Champ: slate sidebar, red-orange current item */
html body:not(#zl) .zim--champ { --side-bg: #1f2937; --side-fg: #cbd5e1; --side-line: transparent; --on-bg: #c8411a; --on-fg: #fff; --logo-bg: #fff; --main-bg: #f3f4f6;
  --accent: #c8411a; --b-r: 4px; --r: 6px; --card-line: #e5e7eb; --list-bg: #fff; --list-border: 1px solid #e5e7eb; --list-r: 6px; --list-pad: 12px; --tab-on: #f15a29; --th-bg: #f9fafb; --av-bg: #1f2937; --av-fg: #fff; --av-r: 50%; }

/* Shopware: white sidebar, blue current item and actions */
html body:not(#zl) .zim--shopware { --side-bg: #fff; --side-fg: #52667a; --side-line: #d1d9e0; --on-bg: #e3f3ff; --on-fg: #0866b8; --main-bg: #f9fafb; --search-bg: #fff; --s-r: 4px;
  --accent: #0870cc; --b-r: 4px; --r: 4px; --card-line: #d1d9e0; --list-bg: #fff; --list-border: 1px solid #d1d9e0; --list-r: 4px; --list-pad: 12px; --th-fg: #52667a; --id-fg: #0870cc; --av-bg: #0870cc; --av-fg: #fff; --av-r: 50%; }
html body:not(#zl) .zim--shopware .zim-search { border: 1px solid #d1d9e0; }

/* Cin7: navy sidebar, teal actions */
html body:not(#zl) .zim--cin7 { --side-bg: #0f2b46; --side-fg: #b9c7d6; --side-line: transparent; --on-bg: #1d4a73; --on-fg: #fff; --logo-bg: #fff; --main-bg: #f5f7fa;
  --accent: #087683; --b-r: 4px; --r: 4px; --card-line: #dde3ea; --list-bg: #fff; --list-border: 1px solid #dde3ea; --list-r: 4px; --list-pad: 12px; --tab-on: #0b8a9a; --av-bg: #0f2b46; --av-fg: #fff; --av-r: 50%; }

/* Flawless POS: charcoal point-of-sale back office */
html body:not(#zl) .zim--flawless { --side-bg: #262626; --side-fg: #cfcfcf; --side-line: transparent; --on-bg: #3d3d3d; --on-fg: #fff; --logo-bg: #fff; --main-bg: #f5f5f5;
  --accent: #262626; --b-r: 4px; --r: 6px; --card-line: #e2e2e2; --list-bg: #fff; --list-border: 1px solid #e2e2e2; --list-r: 6px; --list-pad: 12px; --tab-on: #262626; --av-bg: #262626; --av-fg: #fff; --av-r: 50%; }

/* Amazon Seller Central: navy bar, white menu row, teal tab */
html body:not(#zl) .zim--amazon { --f: "Amazon Ember", Arial, sans-serif; --top-bg: #232f3e; --top-fg: #fff; --top-line: #232f3e; --search-bg: #fff; --search-fg: #565959; --s-r: 4px; --logo-bg: #fff;
  --tnav-bg: #fff; --tnav-fg: #002f36; --tnav-on-sh: inset 0 -2px 0 #008296; --accent: #fff; --accent-fg: #0f1111; --btn-border: 1px solid #8d9096; --b-r: 8px; --r: 4px; --card-line: #d5d9d9;
  --tab-on: #008296; --th-bg: #f0f2f2; --th-fg: #0f1111; --th-font: 700 12px/1.3 var(--f); --id-fg: #007185; --av-bg: #fff; --av-fg: #232f3e; --av-r: 50%; }
html body:not(#zl) .zim--amazon .zim-title { font-weight: 400; }

/* Zamp (Wayfair via the Zamp API): warm sidebar, black action, Zamp type throughout */
html body:not(#zl) .zim--zamp { --f: var(--z-font-body); --side-bg: #f6f5f3; --side-fg: #323232; --side-line: #e6e1da; --on-bg: #fff; --on-fg: #000; --on-sh: 0 0 0 1px #e6e1da; --n-r: 0; --logo-r: 0;
  --accent: #000; --b-r: 0; --r: 0; --card-line: #e6e1da; --tab-on: #000; --line: #ece8e2; --list-border: 1px solid #e6e1da; --list-pad: 12px; --s-r: 0; --av-bg: #183e3d; --av-fg: #fff; --av-r: 0; }
html body:not(#zl) .zim--zamp .zim-title { font: 400 20px/1.2 var(--z-font-heading); }
html body:not(#zl) .zim--zamp .zim-side__top .zim-logo img { height: 16px; }

/* Full-height sidebars are narrower so the record list keeps its columns */
html body:not(#zl) .zim--fullside:not(.zim--magento) { --side-w: 156px; }
html body:not(#zl) .zim-t :is(th, td) { padding-left: 8px; padding-right: 8px; }
html body:not(#zl) .zim--zamp .zim-zamp__h img { display: none; }
html body:not(#zl) .zim--netsuite .zim-filter { max-width: none; }

/* Logo tile in a dark sidebar header */
html body:not(#zl) .zim--fullside .zim-side__top .zim-logo { padding: 0 6px; }

/* ── 3 · Navigation menu icons (Loom 7:29) ──────────────────────────────────────────────────────────────────────────────
   QuickBooks now uses its square "qb" mark (lib/copy-fixes.mjs fixChrome). The Products menu icons are drawn on a 30×16
   canvas and were squeezed into a 24px box, so their glyphs read about 11px beside the 16px glyphs of every other menu;
   at their native size they match. */
html body:not(#zl) .navbar_component .navbar_icon-wrapper img.icon-embed-xsmall[src$=".svg"] { width: 30px !important; height: 16px !important; max-width: none; object-fit: contain; }

/* ── 4 · "Platforms we support" (Loom 6:57) ─────────────────────────────────────────────────────────────────────────────
   The directory mixed black marks with colour ones (Chargebee, Checkout Champ, Cin7, eBay, Etsy, QuickBooks). Every mark
   is greyscale at rest and shows its colour on hover, the site's rule for integration logos (DESIGN, D-026). */
html body:not(#zl) main .integrations-content .integrations-icon { filter: grayscale(1) contrast(1.1); transition: filter .2s ease; }
/* The added marks are full colour (the first ten are black), so they are also taken down to the black marks' weight. */
html body:not(#zl) main .integrations-content .integrations-icon[src*="/integration-marks/"]:not([src$="/cin7.svg"]) { filter: grayscale(1) brightness(.62) contrast(1.9); }
html body:not(#zl) main a.integrations-content:is(:hover, :focus-visible) .integrations-icon { filter: none; }

/* ── 5 · Menu flicker (Loom 8:11) ───────────────────────────────────────────────────────────────────────────────────────
   Reproduced 2026-10-29 (scratchpad screencast): moving across the menu left two panels open together for ~200ms
   (Webflow's 200ms hover-close delay), both fading through Webflow interactions (list opacity 0→1 over 200ms) while the
   toggle background ran a CSS .3s transition on top of the interaction's own 200ms tween; for ~100ms per switch two
   half-transparent panels overlapped with the page showing through. No yellow was found in any frame on the current
   build (the old hero card's yellow "Syncing" chips, since replaced, are the likeliest source of the colour Rohit saw).
   Panels now open at full opacity, a panel whose menu is no longer hovered hides as soon as another one is, and the
   toggle background follows the interaction alone. Desktop menu only (the mobile menu collapses at 991px). */
@media (min-width: 992px) {
  html body:not(#zl) .navbar_component .navbar_dropdwn-toggle { transition: none !important; }
  html body:not(#zl) .navbar_component .navbar_dropdown-list.w--open { opacity: 1 !important; }
  html body:not(#zl) .navbar_menu:has(> .navbar_menu-dropdown:hover) > .navbar_menu-dropdown:not(:hover) > .navbar_dropdown-list.w--open { visibility: hidden !important; }
  html body:not(#zl) .navbar_menu:has(> .navbar_menu-dropdown:hover) > .navbar_menu-dropdown:not(:hover) > .navbar_dropdwn-toggle { background-color: #fff !important; }
}