/* D-085 Rohit's Loom follow-ups, partners area (docs/feedback/rohit-loom-2026-10-29.md). Loaded last on every route except /book-call.
   Every rule is scoped by the page marker that lib/loom/partners.mjs puts on <main> (data-zl: accounting, agencies, cfo,
   platforms, referral, white-label, directory, solution), so no other route changes. */

/* ── 1. /partnership/accounting-firms "Grow your practice": a person in the orbit's empty centre (Loom 9:13).
   The orbit is drawn by lib/ui-cards.mjs (role="img", so these pseudo-elements are decorative, never read out).
   The person is a client of the firm: an approved generated prospect photo (IMAGERY.md, D-076), not a case-study customer. */
html body:not(#zl) main[data-zl="accounting"] .zb--orbit::before,
html body:not(#zl) main[data-zl="accounting"] .zb--orbit::after { position: absolute; left: 50%; pointer-events: none; }
html body:not(#zl) main[data-zl="accounting"] .zb--orbit::before {
  content: ""; z-index: 1; top: 41%; width: 80px; height: 80px; transform: translate(-50%, -50%); border-radius: 50%;
  background: #e6e1da url(/design-assets/people-heroes/wine-brand-controller.webp) -96px -32px / 340px auto no-repeat;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(24, 62, 61, .08), 0 18px 36px -14px rgba(24, 62, 61, .4);
}
html body:not(#zl) main[data-zl="accounting"] .zb--orbit::after {
  content: "Your clients"; z-index: 2; top: calc(41% + 50px); transform: translate(-50%, -50%); display: inline-flex;
  padding: 7px 13px; border-radius: 10px; background: #fff; color: #183e3d; font: 400 var(--g-text, 14px)/1.25 var(--z-font-body); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(24, 62, 61, .06), 0 14px 32px -12px rgba(24, 62, 61, .28);
}
/* Play once (user, 2026-10-31): the "Your clients" ring and label are present from first paint; no fade-in. */
/* Phones: the orbit is a chip cluster over the hub, so the person sits between the cluster and the hub. */
@media (max-width: 560px) {
  html body:not(#zl) main[data-zl="accounting"] :is(.z5-card, .z-card-art) .zc.zb--orbit { padding-bottom: 196px; }
  html body:not(#zl) main[data-zl="accounting"] .zb--orbit::before { top: auto; bottom: 118px; width: 56px; height: 56px; transform: translateX(-50%); background-position: -67px -22px; background-size: 238px auto; box-shadow: 0 0 0 3px #fff, 0 12px 28px -12px rgba(24, 62, 61, .4); }
  html body:not(#zl) main[data-zl="accounting"] .zb--orbit::after { top: auto; bottom: 76px; transform: translateX(-50%); }
}

/* ── 3. /white-label-service "Capacity without adding headcount": the wheel was cropped by an inner frame 32px inside
   the card, so the mint field and arcs stopped on a hard vertical line at the bottom right, "Powered by Zamp" was cut
   off and, at 1024px, "Nexus tracking" hung outside the frame (Loom 9:30).
   Desktop (half cards): the wheel keeps its height and bleeds cleanly to the card's own edges (no inner cut line);
   the curved label, which cannot fit a half card, is dropped; the chips sit inside the card on the rings.
   561–980px (the card spans the row): the whole half-wheel fits, so it is drawn whole. --u is one SVG unit in px. */
@media (min-width: 981px) {
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-wheel { left: -32px; width: calc(100% + 64px); }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-wheel text { display: none; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--a { top: 16% !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--b { left: 22% !important; top: 40% !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--c { left: 78% !important; top: 40% !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--d { top: 54% !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit :is(.zb-node--e, .zb-node--f) { top: 78% !important; }
}
@media (min-width: 561px) and (max-width: 980px) {
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit { --u: calc(((100cqw + 64px) / 2 - 16px) / 256); }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-wheel {
    top: auto; bottom: 0; left: calc(50% - 300 * var(--u)); width: calc(600 * var(--u)); height: auto; aspect-ratio: 600 / 340; overflow: visible;
    clip-path: circle(calc(262 * var(--u)) at 50% 100%);
  }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-wheel :is(.zb-arc:last-of-type, text) { display: none; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--a { top: calc(100% - 256 * var(--u)) !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--b { left: calc(50% - 181 * var(--u)) !important; top: calc(100% - 181 * var(--u)) !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--c { left: calc(50% + 181 * var(--u)) !important; top: calc(100% - 181 * var(--u)) !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit .zb-node--d { top: calc(100% - 176 * var(--u)) !important; }
  html body:not(#zl) main[data-zl="white-label"] .zb--orbit :is(.zb-node--e, .zb-node--f) { top: calc(100% - 80 * var(--u)) !important; }
}

/* ── 4. "Simple, predictable pricing" (white-label, e-commerce and every page here with an invoice graphic): the forest
   chips straddled the invoice's right edge and read as spilling out of it (Loom 9:43). The invoice now takes the
   graphic's full width and the chips sit inside it, on the empty right side of the line items. */
@media (min-width: 561px) {
  html body:not(#zl) main[data-zl] .zb--invoice .zb-panel { margin-right: 0 !important; }
  html body:not(#zl) main[data-zl] .zb--invoice .zb-chips { right: 24px; top: 34%; }
  html body:not(#zl) main[data-zl] .zb--invoice .zb-panel { margin-top: 0; }
  html body:not(#zl) main[data-zl] .zb--invoice .zb-chip:nth-child(2) { margin-right: 0; }
}
/* Narrow invoices (phones, and the 981–1199px half cards): there is no room beside the line items, so the chips sit
   as a row just above the invoice, clear of its edge, instead of straddling it or covering a line item. */
@container (max-width: 480px) {
  html body:not(#zl) main[data-zl] .zb--invoice > .zb-chips { order: -1; position: relative; inset: auto; top: auto; right: auto; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
  html body:not(#zl) main[data-zl] .zb--invoice > .zb-panel { margin-top: 0; }
  html body:not(#zl) main[data-zl] .zb--invoice .zb-panel:has(~ .zb-chips) :is(.zb-cap:first-child, .zb-doc) { padding-top: 18px; }
}

/* ── 5. /white-label-service "Custom-built infrastructure for partners": a product-tabs list with no tab behaviour on
   this page (pointer cursor, progress tracks, hidden descriptions) read as links that did nothing (Loom 10:01). It is
   now a plain feature list: each item's published description shows, the track is a quiet divider, no pointer. */
html body:not(#zl) main[data-zl] .products-tabs-item { cursor: default; }
html body:not(#zl) main[data-zl] .products-tabs-item-description { height: auto !important; overflow: visible; transition: none; }
html body:not(#zl) main[data-zl] .products-tabs-item-description p { margin: 4px 0 0 66px; }
html body:not(#zl) main[data-zl] .products-tabs-item-title { margin-bottom: 0; }
html body:not(#zl) main[data-zl] .products-tabs-item-track { margin-top: 20px; height: 1px; background: #e6e1da; }
html body:not(#zl) main[data-zl] .products-tabs-item-progress { display: none; }
html body:not(#zl) main[data-zl] .products-tabs-item-container { row-gap: 20px; }
@media (max-width: 767px) { html body:not(#zl) main[data-zl] .products-tabs-item-description p { margin-left: 0; margin-top: 8px; } }

/* ── 6a. Feature-card bento on solution and partner pages: a 300px minimum on the copy plus padding left dead space
   between the button and the graphic (Loom 8:24, "empty gaps"). The copy is now as tall as its text and the graphic
   follows the button at one 32px gap; a card's spare row height goes above its button. The D-058 440px graphic stage
   is kept, so a graphic drawn shorter than its stage still shows its own leftover above it. */
@media (min-width: 981px) {
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__copy { min-height: 0; flex: 1 0 auto; padding-bottom: 32px; }
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__art:has(> .zc:not(.zc--photo)) { margin-top: 0; padding-top: 0; }
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__art > .zb--converge { padding-top: 8px; }
  /* A photograph is a crop, not a graphic on the D-058 stage: it fills whatever its row leaves (never under 360px),
     so a 4:3 photo no longer sets the row height and pushes empty space into the card beside it. */
  html body:not(#zl) main[data-zl] .z5-card--half:has(.zc--photo) .z5-card__copy { flex: 0 0 auto; }
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__art:has(> .zc--photo) { flex: 1 1 auto; display: flex; min-height: 360px; margin-top: 0; }
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__art > .zc--photo { flex: 1 1 auto; height: auto; aspect-ratio: auto; }
  html body:not(#zl) main[data-zl] .z5-card--half .z5-card__art > .zc--photo .zc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* The specialist card on the photo keeps its own height (it stretched to fill the photo at 981–1199px). */
  html body:not(#zl) main[data-zl] .z5-card--half .zc--photo > .zc-card--float { top: auto; height: auto; }
}

/* ── 6b. "Integrations built for where you sell" (solution pages, white-label, referral): the diagram sat low in its
   panel (64px above, 32px below) and the panel started 16px off the card grid above (Loom 8:32). The panel's insets
   are now even, the diagram is centred in it, and the columns share the feature cards' 24px gutter. */
@media (min-width: 992px) {
  html body:not(#zl) main[data-zl] .z-hero-layout:has(> .z-hub-art) { column-gap: 24px; align-items: center; }
  html body:not(#zl) main[data-zl] .z-hub-art { align-items: center; padding: 40px; }
  html body:not(#zl) main[data-zl] .z-hub-art > .zb--converge { padding-top: 0; }
}

/* ── 7. /partners directory: the search row was a centred, mixed-height strip (48px field, 56px menus) floating 64px
   above a full-width grid (Loom 13:54). It now spans the grid, every control is 48px, and it sits 32px above the cards. */
html body:not(#zl) main[data-zl="directory"] .z-integrations-form-block { margin-bottom: 32px; }
html body:not(#zl) main[data-zl="directory"] .z-integrations-form { justify-content: stretch; }
html body:not(#zl) main[data-zl="directory"] .z-integrations-filters { width: 100%; align-items: stretch; gap: 12px; }
html body:not(#zl) main[data-zl="directory"] .z-integrations-filters > .z-is-search { flex: 1 1 auto; width: auto; max-width: none; height: 48px; margin: 0; }
html body:not(#zl) main[data-zl="directory"] .z-integrations-filters .w-dropdown-toggle { height: 48px; min-height: 48px; }
@media (max-width: 767px) {
  html body:not(#zl) main[data-zl="directory"] .z-integrations-form-block { margin-bottom: 24px; }
  html body:not(#zl) main[data-zl="directory"] .z-integrations-filters { flex-direction: column; gap: 8px; }
  html body:not(#zl) main[data-zl="directory"] .z-integrations-filters > * { width: 100%; }
}

/* ── 2. Partner logo banks (Loom 9:25, "mixed sizes and weights"): heights are evened in data/logo-sizes.mjs; here the
   heaviest solid marks step back and the hairline marks step forward, so the row reads as one grey. Hover still shows
   each logo in full colour. Assets and order are unchanged. */
html body:not(#zl) main[data-zl] .z-logo-bank__item:not(:hover) img:is([src*="cd6c146de47f00b9"], [src*="7f525bf8377c18c0"], [src*="712cc76171013a44"], [src*="82141a86bc181987"], [src*="5c31f62d0a2792fc"], [src*="74e2397826e6a0e4"], [src*="9e02e72c508abc64"]) { opacity: .74; }
html body:not(#zl) main[data-zl] .z-logo-bank__item:not(:hover) img:is([src*="343bb716cdb5074a"], [src*="0d98559e9d77c858"], [src*="1a20e3e06f522129"], [src*="ba5b2c25b7f947ce"], [src*="7a20b728ae8e831d"], [src*="5b59d652e2d5cd20"], [src*="93fb8dfaa2e89e33"]) { opacity: 1; }