/* D-054 bento cards, after the original white-label bento (/white-label-service, "Capacity without adding headcount").
   The warm #f6f5f3 feature cards keep their copy at the top and set the graphic on the card's bottom edge, running
   off it like a crop of the real app, instead of floating it in the middle of the card. Graphics in the bento family
   (lib/ui-cards.mjs: status, invoice, stat, orbit) use large UI type (17px rows), few rows, mint pills, forest chips
   and a green "done" line; the remaining product cards (tables, map, chart, code) keep their own type. Loads last. */

/* ── Card shell: graphic on the bottom edge ── */
html body .z5-card__art:has(> .zc:not(.zc--photo)) { display: flex; flex-direction: column; justify-content: flex-end; }
html body .z5-card--half .z5-card__art:has(> .zc:not(.zc--photo)) { margin: auto 0 0; padding: 8px 40px 0; }
html body .z5-card--full .z5-card__art:has(> .zc:not(.zc--photo)) { padding: 48px 48px 0 0; }
html body :is(.z5-card, .z-card-art) .zc:not(.zc--photo) { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: transparent; }
html body .z5-card .zc:not(.zc--photo):not(.zc--bento) > .zc-card { position: relative; inset: auto; height: auto; margin: 32px 0 0; box-shadow: 0 0 0 1px #ece8e2, 0 30px 80px -24px rgba(24, 62, 61, .2); }
html body .z5-card .zc:not(.zc--photo):not(.zc--bento) .zc-toast--tr { top: 0; right: -16px; }
html body .z5-card .zc-metric b { white-space: nowrap; }
html body .z5-card .zc:not(.zc--photo):not(.zc--bento) .zc-stamp { bottom: 24px; right: 24px; }
@media (max-width: 980px) {
  html body .z5-card--full .z5-card__art:has(> .zc:not(.zc--photo)), html body .z5-card--half .z5-card__art:has(> .zc:not(.zc--photo)) { margin: auto 0 0; padding: 8px 28px 0; }
}

html body :is(.z5-card, .z-card-art) .zc.zb--orbit { aspect-ratio: 600 / 340; overflow: visible; }

/* ── Bento family ── */
.zc--bento { font: 400 var(--g-text)/1.4 var(--z-font-body); color: #000; }
.zc--bento svg path, .zc--bento svg circle { stroke-linecap: round; stroke-linejoin: round; }
.zb-panel { position: relative; z-index: 1; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 30px 80px -24px rgba(24, 62, 61, .22); }
.zc--bento .zb-panel { margin-top: 24px; }

/* Rows: outline icon, label, pill right; hairlines between. */
.zb-list, .zb-items, .zb-rows { list-style: none; margin: 0; padding: 0 24px; }
.zb-list li, .zb-items li, .zb-rows li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid #ece8e2; }
.zb-list li > svg, .zb-items li > svg { flex: none; width: 20px; height: 20px; color: #183e3d; }
.zb-list li > span:not(.zb-pill), .zb-items li > span, .zb-rows li > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-rows li > b { flex: none; font-weight: 500; }
.zb-items li > span { white-space: normal; } .zb-items li b { display: block; font-weight: 400; } .zb-items li em { display: block; margin-top: 2px; font-style: normal; font-size: var(--g-sub); color: #6b6b6b; }
.zb-pill { flex: none; padding: 4px 10px; border-radius: 999px; font: 500 var(--g-meta)/1.3 var(--z-font-body); color: #183e3d; white-space: nowrap; }
.zb-pill--fill { background: #b5f2df; }
.zb-pill--line { background: #eaf8f3; box-shadow: inset 0 0 0 1.5px #a9dccd; }
.zb-pill--wait { background: #ffec72; color: #000; }
.zb-done { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 24px 22px; font-weight: 500; }
.zb-done svg { flex: none; width: 22px; height: 22px; color: #183e3d; }
.zb-done span { min-width: 0; }

/* Invoice: tile + title, caption, check items; forest chips overlapping the right edge. */
.zb--invoice .zb-panel { margin-right: 18%; }
.zb-doc { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid #ece8e2; background: linear-gradient(#fbfaf9, #fff); }
.zb-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: #183e3d; color: #fff; }
.zb-tile svg { width: 20px; height: 20px; }
.zb-doc b { display: block; font: 400 var(--g-head)/1.2 var(--z-font-heading); letter-spacing: -.01em; }
.zb-doc small { display: block; margin-top: 3px; font-size: var(--g-meta); color: #6b6b6b; }
.zb-cap { margin: 0; padding: 16px 24px 0; font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.zb-items li { min-height: 52px; border-bottom: 0; padding: 7px 0; }
.zb-items li > svg { color: #183e3d; }
.zb-items { padding-bottom: 16px; }
.zb-chips { position: absolute; z-index: 2; right: 0; top: 46%; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.zb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #183e3d; color: #fff; font: 400 var(--g-text)/1.25 var(--z-font-body); white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(24, 62, 61, .5); }
.zb-chip:nth-child(2) { margin-right: -12px; }
.zb-chip svg { flex: none; width: 18px; height: 18px; }

/* Stat: caption, one Mix figure, its parts. */
.zb--stat .zb-panel { margin-right: 14%; }
.zb--stat .zb-cap { padding-top: 28px; }
.zb-fig { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 8px 24px 16px; border-bottom: 1px solid #ece8e2; }
.zb-fig b { font: 400 var(--g-fig-l)/1 var(--z-font-heading); letter-spacing: -.02em; }
.zb-fig span { font-size: var(--g-text); color: #6b6b6b; }
.zb-rows li { min-height: 46px; }
.zb-rows li > b { color: #183e3d; }
.zb--stat .zb-panel { margin-top: 36px; }
.zb--stat .zb-chips { top: 0; }

/* Orbit: the half-wheel, chips on the rings, the hub at the foot. */
.zb--orbit { aspect-ratio: 600 / 340; margin-top: 24px; }
.zb-wheel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zb-wheel line, .zb-arc { fill: none; stroke: #8fd6c2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.zb-wheel line { stroke-opacity: .6; }
.zb-wheel text { font: 400 var(--g-meta) var(--z-font-body); fill: #183e3d; letter-spacing: .01em; }
.zb-node { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; background: #fff; color: #183e3d; font: 400 var(--g-text)/1.25 var(--z-font-body); white-space: nowrap; --tx: -50%; transform: translate(var(--tx), -50%); box-shadow: 0 0 0 1px rgba(24, 62, 61, .06), 0 14px 32px -12px rgba(24, 62, 61, .28); }
.zb-node svg { flex: none; width: 18px; height: 18px; }
.zb-node--e { left: calc(50% - 70px) !important; --tx: -100%; } .zb-node--f { left: calc(50% + 70px) !important; --tx: 0%; }
.zb-node img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.zb-hub { position: absolute; z-index: 2; left: 50%; bottom: 0; display: grid; place-items: center; align-content: center; gap: 4px; width: 112px; height: 112px; margin-left: -56px; margin-bottom: -10px; border-radius: 50%; background: #183e3d; color: #fff; font: 400 var(--g-meta)/1.2 var(--z-font-body); text-align: center; box-shadow: 0 0 0 14px rgba(175, 236, 219, .45), 0 0 0 1px rgba(143, 214, 194, .8); }
.zb-hub svg { width: 26px; height: 26px; }
.zb-hub img { width: 30px; height: 30px; object-fit: contain; background: #fff; padding: 4px; }
.zb-hub > span { max-width: 104px; }
.zb-hub img.zb-mark { width: 62px; height: auto; padding: 0; background: none; }

/* Narrow frames: smaller UI, fewer extras. */
@container (max-width: 520px) {
  
  .zb-list, .zb-items, .zb-rows { padding: 0 20px; }
  .zb-list li { min-height: 56px; gap: 12px; } .zb-list li > svg { width: 20px; height: 20px; }
  .zb-pill { padding: 5px 12px; }
  .zb-done { padding: 16px 20px 22px; } .zb-done svg { width: 22px; height: 22px; }
  .zb-doc { padding: 18px 20px; gap: 12px; } .zb-tile { width: 42px; height: 42px; } .zb-doc b { } .zb-doc small { }
  .zb-cap { padding: 16px 20px 0; } .zb-fig { padding: 8px 20px 14px; } .zb-fig b { } .zb-fig span { }
  .zb--invoice .zb-panel, .zb--stat .zb-panel { margin-right: 10%; }
  .zb-chip { padding: 10px 14px; gap: 8px; } .zb-chip svg { width: 18px; height: 18px; } .zb-chip:nth-child(2) { margin-right: 0; }
  .zb-list li > span:not(.zb-pill) { white-space: normal; }
  .zb--invoice .zb-panel { margin-top: 36px; } .zb--invoice .zb-chips { top: 0; }
  .zb-node--e { left: calc(50% - 60px) !important; } .zb-node--f { left: calc(50% + 60px) !important; }
  .zb-node { padding: 8px 12px; gap: 7px; border-radius: 10px; } .zb-node svg, .zb-node img { width: 16px; height: 16px; }
  .zb-hub { width: 96px; height: 96px; margin-left: -48px; box-shadow: 0 0 0 10px rgba(175, 236, 219, .45), 0 0 0 1px rgba(143, 214, 194, .8); } .zb-hub svg { width: 22px; height: 22px; } .zb-hub img.zb-mark { width: 54px; }
  .zb-wheel text { }
}
@container (max-width: 400px) {
  .zb--orbit { aspect-ratio: 600 / 400; }
  .zb-node { padding: 7px 10px; }
  .zb-list li .zb-pill--line { display: none; }
  .zb-chip:nth-child(n+2) { display: none; }
}

/* Phones: chips sit above the panel's top edge instead of over its rows; the orbit becomes a wrapped cluster of chips
   over the hub (the rings stay behind it); long status rows wrap. */
@media (max-width: 560px) {
  html body .zc--bento { display: flex; flex-direction: column; }
  html body .zc--bento .zb-chips { order: -1; position: relative; inset: auto; z-index: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 8px 0 -18px 16px; }
  html body .zc--bento .zb-chip:nth-child(2) { margin-right: 0; }
  html body .zc--bento .zb-panel { margin-right: 0; margin-top: 0; }
  html body .zc--bento .zb-panel:has(~ .zb-chips) :is(.zb-cap:first-child, .zb-doc) { padding-top: 30px; }
  html body .zc--bento .zb-list li > span:not(.zb-pill) { white-space: normal; }
  html body :is(.z5-card, .z-card-art) .zc.zb--orbit { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px; aspect-ratio: auto; padding: 16px 4px 136px; }
  html body .zc--bento .zb-node, html body .zc--bento.is-on .zb-node { position: relative; left: auto !important; top: auto !important; transform: none; }
  html body .zb-wheel text { display: none; }
}

/* Motion (play once, user 2026-10-31): rows, chips, nodes and arcs are all in place from first paint; nothing arrives.
   The only loop is the hub's breathing ring on the connection graphics (orbit, converge), an ambient "always
   connected" signal like the homepage integrations hub. Reduced motion and no-JS show the final, still frame. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .zc--bento.is-on .zb-hub { animation: zb-breathe 4.8s ease-in-out 2s infinite; }
}
@keyframes zb-breathe { 50% { box-shadow: 0 0 0 22px rgba(175, 236, 219, .28), 0 0 0 1px rgba(143, 214, 194, .8); } }

/* ── D-055 ── */
/* The white-label bento's 1px warm border on every gray feature card. */
html body :is(.z5-trio, .z-cta--light .z-cta__inner) { outline: 1px solid #e0dbd2; outline-offset: -1px; }
/* On feature cards the border is drawn above the graphic, so panels that run off the card's edge don't cut it. */
html body .z5-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 1px solid #e0dbd2; pointer-events: none; }

/* Softer card hovers (user, 2026-10-27: black borders on hover were too harsh). Cards that darkened their border or
   outline to ink now step to a warm mid-tone and lift slightly with the brand's soft shadow. Buttons are unchanged. */
html body :is(.z-feat__card, .z-integ__tile, .z-results__card, .z-show__feature, .z-show__card, .z-caps__item, .z-integ__logo, .z-integ__tool, a.z-flow__chip, .z-opt-c__paths a, .pricing_plan):hover { border-color: #c9c0b2; }
html body :is(.z3-feat__card, .z4-feat .z3-feat__card, a.z3-hub__tile, main a.press_card, main a.feature-card, main .resource_card:has(a)):hover { outline-color: #c9c0b2; }
html body a.z3-hub__tile:hover { color: inherit; }
html body :is(.z11-bento .z3-feat__card, .z-cq--featured, .press_card, .media-card, .event_item, .city-component .city-container):hover::after,
html body .z11-bento .z3-feat__card:focus-visible::after,
html body:not(:has(.z3-hero)) :is(.cards-component, .blog_card_wrap) .blog_item-link:hover::after { border-color: #c9c0b2; }
html body:not(:has(.z3-hero)) main .partners-card:hover { border-color: #c9c0b2 !important; }
html body :is(.z-feat__card, .z-results__card, .z-show__feature, .z-show__card, .z-caps__item, .z3-feat__card, .z-cq--featured, .pricing_plan, .partners-card, .press_card, .media-card, .event_item, main a.feature-card, .resource_card:has(a), .blog_item-link) { transition: border-color .25s, outline-color .25s, box-shadow .3s; }
html body :is(.z-feat__card, .z-results__card, .z-show__feature, .z-show__card, .z-caps__item, .z3-feat__card, .z-cq--featured, .pricing_plan, .partners-card, .press_card, .media-card, .event_item, main a.feature-card, .resource_card:has(a)):hover { box-shadow: 0 18px 40px -26px rgba(24, 62, 61, .28); }

/* Steps: a numbered path on a mint rail; the forest fill runs along it; the last stop is the outcome. */
.zb--steps { margin-top: 24px; padding: 44px 16px 52px; background: radial-gradient(70% 90% at 50% 110%, rgba(175, 236, 219, .5), transparent 70%), #fff; box-shadow: 0 0 0 1px #ece8e2, 0 30px 80px -24px rgba(24, 62, 61, .22); }
.zb-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.zb-steps::before, .zb-steps::after { content: ""; position: absolute; top: 25px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: #cdeee3; }
.zb-steps::after { background: #183e3d; transform-origin: left; }
.zb-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; text-align: center; }
.zb-dot { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: #fff; color: #183e3d; box-shadow: 0 0 0 1.5px #a9dccd, 0 14px 30px -14px rgba(24, 62, 61, .35); }
.zb-dot svg, .zb-dot img { width: 22px; height: 22px; object-fit: contain; }
.zb-steps li:last-child .zb-dot { background: #183e3d; color: #afecdb; box-shadow: 0 0 0 8px rgba(175, 236, 219, .5); }
.zb-steps b { font-weight: 500; font-size: var(--g-text); line-height: 1.3; }
.zb-steps small { font-size: var(--g-meta); line-height: 1.35; color: #6b6b6b; }
.zb-logos { display: flex; margin-top: 10px; }
.zb-logos i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 6px 14px -8px rgba(0, 0, 0, .25); }
.zb-logos i:first-child { margin-left: 0; } .zb-logos img { width: 18px; height: 18px; object-fit: contain; }

/* Handoff: your lane keeps its work; Zamp's forest lane takes the rest (leaving dashed outlines behind). */
.zb--handoff { padding-top: 24px; }
.zb-hand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zb-lane { padding: 22px 22px 40px; }
.zb-lane--you { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #e0dbd2; }
.zb-lane--zamp { background: #183e3d; color: #fff; box-shadow: 0 30px 60px -30px rgba(24, 62, 61, .6); }
.zb-lane__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.zb-lane--zamp .zb-lane__h { color: #afecdb; }
.zb-lane__h svg { width: 18px; height: 18px; color: #183e3d; } .zb-lane__h img { width: 52px; height: auto; }
.zb-lane ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.zb-lane li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: var(--g-text); line-height: 1.3; }
.zb-lane--you li { background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 8px 18px -12px rgba(0, 0, 0, .2); }
.zb-lane--you li.is-gone { background: transparent; box-shadow: none; outline: 1.5px dashed #d3cbbf; outline-offset: -1.5px; color: #a49b8d; text-decoration: line-through; text-decoration-color: #c9c0b2; }
.zb-lane--zamp li { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(175, 236, 219, .22); }
.zb-lane--zamp li svg { flex: none; width: 14px; height: 14px; color: #afecdb; }

/* Converge: systems on the left drawn into the Zamp hub; one answer out. */
.zb--converge { padding: 32px 0 40px; }
.zb-conv { display: grid; grid-template-columns: auto minmax(40px, 1fr) 84px 36px auto; align-items: center; }
.zb-conv__src { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.zb-conv__src li { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 10px; background: #fff; font-size: var(--g-text); white-space: nowrap; box-shadow: 0 0 0 1px rgba(24, 62, 61, .06), 0 12px 28px -14px rgba(24, 62, 61, .3); }
.zb-conv__src li svg, .zb-conv__src li img { flex: none; width: 18px; height: 18px; object-fit: contain; color: #183e3d; }
.zb-conv__lines { align-self: stretch; width: 100%; height: 100%; overflow: visible; }
.zb-conv__lines path { fill: none; stroke: #8fd6c2; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.zb-conv__hub { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #183e3d; box-shadow: 0 0 0 10px rgba(175, 236, 219, .45), 0 0 0 1px rgba(143, 214, 194, .8); }
.zb-conv__hub img { width: 50px; height: auto; }
.zb-conv__link { height: 2px; background: #183e3d; }
.zb-conv__out { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 24px 50px -24px rgba(24, 62, 61, .35); }
.zb-conv__out b { font: 400 var(--g-fig)/1 var(--z-font-heading); letter-spacing: -.02em; white-space: nowrap; }
.zb-conv__out span { max-width: 150px; font-size: var(--g-meta); line-height: 1.35; color: #6b6b6b; }

/* Gauges: each state's sales against its threshold. */
.zb--gauges { padding: 28px 0 40px; }
.zb-g__src { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; }
.zb-g__src span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: #fff; font-size: var(--g-meta); box-shadow: 0 0 0 1px #ece8e2; }
.zb-g__src svg { width: 16px; height: 16px; color: #183e3d; }
.zb-g__src i { font: 400 var(--g-meta) var(--z-font-body); color: #183e3d; } .zb-g__src i::before { content: "→ "; }
.zb-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.zb-gauges li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px 12px 22px; background: #fff; text-align: center; box-shadow: 0 0 0 1px #ece8e2, 0 24px 50px -28px rgba(24, 62, 61, .3); }
.zb-gauges svg { width: 100%; max-width: 150px; margin-bottom: -34px; }
.zb-gauges path { fill: none; stroke-width: 10; stroke-linecap: round; }
.zb-g__track { stroke: #eef6f3; }
.zb-g__val { stroke: #183e3d; stroke-dasharray: 1 1; stroke-dashoffset: var(--o); }
.zb-gauges li.is-attn .zb-g__val { stroke: #f5d43c; } .zb-gauges li.is-low .zb-g__val { stroke: #8fd6c2; }
.zb-gauges b { font: 400 var(--g-fig-s)/1 var(--z-font-heading); letter-spacing: -.02em; }
.zb-gauges span { margin-top: 10px; font-weight: 500; font-size: var(--g-text); }
.zb-gauges small { font-size: var(--g-meta); color: #6b6b6b; }
.zb-gauges em { margin-top: 10px; font-style: normal; }

/* Timeline: one matter, oldest first, the resolution last; where it is kept, as chips. */
.zb--timeline { padding: 28px 0 0; }
.zb-tl { position: relative; display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.zb-tl::before { content: ""; position: absolute; left: 83px; top: 20px; bottom: 20px; width: 2px; background: #cdeee3; }
.zb-tl li { position: relative; display: grid; grid-template-columns: 64px 40px minmax(0, 1fr); align-items: center; gap: 0 0; }
.zb-tl time { font-size: var(--g-meta); color: #6b6b6b; text-align: right; padding-right: 12px; }
.zb-tl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #183e3d; box-shadow: 0 0 0 1.5px #a9dccd; }
.zb-tl__dot svg { width: 18px; height: 18px; }
.zb-tl li.is-done .zb-tl__dot { background: #183e3d; color: #afecdb; box-shadow: 0 0 0 7px rgba(175, 236, 219, .5); }
.zb-tl__card { display: grid; gap: 2px; margin-left: 14px; padding: 11px 16px; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 18px 40px -24px rgba(24, 62, 61, .3); }
.zb-tl__card b { font-weight: 500; font-size: var(--g-text); } .zb-tl__card small { font-size: var(--g-meta); color: #6b6b6b; }
.zb-tl__end { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 28px 118px; }


/* Narrow frames */
@container (max-width: 560px) {
  .zb-lane { padding: 18px 16px 22px; }
  .zb-hand { gap: 10px; } .zb-lane li { padding: 8px 10px; }
}
/* Narrow half cards (D-058: ~390px at 1024): converge becomes two rows — the sources as a grid, then hub → answer —
   and only phone widths stack the handoff lanes. */
@container (max-width: 480px) {
  .zb-conv { grid-template-columns: 84px 28px minmax(0, 1fr); grid-template-areas: "src src src" "hub link out"; row-gap: 32px; }
  .zb-conv__src { grid-area: src; grid-template-columns: 1fr 1fr; }
  .zb-conv__lines { display: none; }
  .zb-conv__hub { grid-area: hub; position: relative; } .zb-conv__link { grid-area: link; } .zb-conv__out { grid-area: out; }
  .zb-conv__hub::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 22px; margin-bottom: 5px; background: #8fd6c2; }
  .zb-conv__src li { min-width: 0; } .zb-conv__src li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 360px) {
  .zb-hand { grid-template-columns: 1fr; }
  .zb-lane--you li.is-gone { display: none; }
  .zb-conv__src { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .zb-gauges { gap: 8px; } .zb-gauges li { padding: 14px 6px 16px; } .zb-gauges b { } .zb-gauges svg { margin-bottom: -26px; }
  .zb-gauges span { } .zb-gauges small { } .zb-gauges em { padding: 4px 9px; }
}
@container (max-width: 440px) {
  .zb-tl::before { left: 23px; } .zb-tl li { grid-template-columns: 48px minmax(0, 1fr); } .zb-tl time { grid-column: 2; grid-row: 1; justify-self: start; padding: 0 0 4px 16px; text-align: left; } .zb-tl__dot { grid-column: 1; grid-row: 1 / span 2; } .zb-tl__card { grid-column: 2; }
  .zb-tl__end { margin-left: 0; }
}
@container (max-width: 400px) { .zb-gauges small { display: none; } }
@container (max-width: 360px) {
  .zb-steps { grid-template-columns: 1fr; gap: 14px; }
  .zb-steps::before, .zb-steps::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .zb-steps::after { transform-origin: top; }
  .zb-steps li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 0; text-align: left; }
  .zb-steps li .zb-dot { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 0; }
  .zb-steps .zb-logos { margin-top: 4px; }
  .zb--steps { padding: 28px 20px 36px; }
}

/* Play once: steps, lanes, sources, gauges and timeline rows are present from first paint. Motion when in view: the
   progress line fills along its (visible) track, the hand-off strikes your old tasks, gauges fill to their value. The
   converge lines keep flowing into the hub (ambient data-sync loop, like the homepage integrations hub). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .zc--bento:not(.is-on) .zb-steps::after { transform: scaleX(0); }
  .zc--bento.is-on .zb-steps::after { transition: transform 1.6s cubic-bezier(.4, 0, .2, 1) .5s; }
  .zc--bento:not(.is-on) .zb-lane--you li.is-gone { outline-color: transparent; color: #000; text-decoration-color: transparent; background: #fff; }
  .zc--bento.is-on .zb-lane--you li.is-gone { transition: all .5s 1.1s; }
  .zc--bento .zb-conv__lines path { stroke-dasharray: 3 5; }
  .zc--bento.is-on .zb-conv__lines path { animation: zb-flow 1.6s linear infinite; }
  .zc--bento:not(.is-on) .zb-g__val { stroke-dashoffset: 1; }
  .zc--bento.is-on .zb-g__val { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(600ms + var(--i) * 200ms); }
  .zc--bento.is-on .zb-conv__hub { animation: zb-breathe 4.8s ease-in-out 2s infinite; }
}
@keyframes zb-flow { to { stroke-dashoffset: -16; } }
@container (max-width: 360px) { .zc--bento .zb-steps::after { transform: none; } }

/* ── D-057: homepage graphics on the same graphic type scale (layout and content unchanged) ── */
html body :is(.z4-panel__title, .z4-notice__title, .z4-api__res .z4-panel__title, .z11-cal__head .z4-panel__title) { font-size: var(--g-head); }
html body :is(.z4-rows li, .z4-rows b, .z4-calc__addr, .z4-calc__total, .z4-bars__top, .z4-status li, .z4-notice__reply b, .z4-code__steps li, .z4-handoff__team b, .z4-handoff__rows li, .z4-handoff__rows b, .z4-handoff__toast b, .z11-returns li, .z11-certs b, .z12-g2 b) { font-size: var(--g-text); }
html body :is(.z4-panel__meta, .z4-bars small, .z4-due, .z4-notice__reply small, .z4-notice__body, .z4-handoff__team small, .z4-handoff__k, .z4-handoff__note, .z4-handoff__toast small, .z11-returns__foot) { font-size: var(--g-sub); }
html body :is(.z4-notice__from, .z4-code__verb, .z4-code__steps li span, .z4-handoff__state > span, .z4-handoff figcaption, .z11-returns__th, .z11-certs small, .z11-rate small, .z11-rate span, .z11-meter small, .z12-g2 small, .z11-cal__grid span) { font-size: var(--g-meta); }
html body .z4-code__bar { font-size: var(--g-text); }
html body :is(.z11-returns__foot b, .z4-handoff__rows li.is-total b) { font-size: var(--g-fig-s); }
html body .z4-handoff__t { font-size: var(--g-fig); }
html body :is(.z4-calc__total strong, .z11-rate strong) { font-size: var(--g-fig-l); }
/* One green in graphics: the meter bars that used the secondary teal (#1b595a) take the brand green. */
html body :is(.z4-bars li.is-near .z4-bar i, .z11-meter .z4-bar i) { background: #183e3d; }

/* ── D-058: one stage for every feature-card graphic ──
   Desktop feature cards (full and half) give every graphic except photographs the same 440px stage, set on the card's
   bottom edge. Graphics were rebuilt to fill it with content (lib/ui-cards.mjs, data/graphics.mjs FILL), not padding;
   the stage is a floor, and any few pixels left over fall above the graphic, on the card's gray. */
:root { --g-stage: 440px; }
@media (min-width: 981px) {
  html body :is(.z5-card, .z-card-art) .zc:not(.zc--photo) { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--g-stage); }
  html body :is(.z5-card, .z-card-art) .zc.zb--orbit { height: var(--g-stage); aspect-ratio: auto; }
  /* Product tables: two-line rows (name and detail), four to a half card, five to a full one. */
  html body .z5-card .zc:not(.zc--photo):not(.zc--bento) > .zc-card { margin-top: 28px; }
  html body .z5-card .zc-table td { padding-top: 7px; padding-bottom: 7px; }
}
/* Small laptops: half cards are narrow, so their graphics take more of the card's width. */
@media (min-width: 981px) and (max-width: 1199px) {
  html body .z5-card--half .z5-card__art:has(> .zc:not(.zc--photo)) { padding: 8px 20px 0; }
}
.zb-lane { padding-bottom: 24px; }

/* Case panel (status): document header, steps as rows, the note from whoever handled it, the outcome. */
.zb-doc > span:not(.zb-tile, .zb-pill) { flex: 1; min-width: 0; }
.zb-doc > .zb-pill { margin-left: auto; }
.zb--status .zb-list li { min-height: 44px; padding: 7px 0; }
.zb--status .zb-doc { padding-top: 16px; padding-bottom: 16px; }
.zb-msg { display: flex; align-items: flex-start; gap: 12px; margin: 10px 24px 0; padding: 14px 16px; background: #f6f5f3; }
.zb-msg > span { display: grid; gap: 3px; min-width: 0; }
.zb-msg b { font-weight: 500; font-size: var(--g-sub); line-height: 1.3; }
.zb-msg > span > span { font-size: var(--g-text); line-height: 1.45; color: #323232; }
.zb-av { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.zb-tile--s { width: 36px; height: 36px; } .zb-tile--s img { width: 24px; height: auto; }
.zb--status .zb-done { padding-top: 14px; padding-bottom: 18px; }

/* Totals, source lines, small charts. */
.zb-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 24px; padding: 16px 0 22px; border-top: 1px solid #ece8e2; }
.zb-sum span { font-size: var(--g-sub); color: #6b6b6b; }
.zb-sum b { font: 400 var(--g-fig-s)/1 var(--z-font-heading); letter-spacing: -.01em; color: #183e3d; white-space: nowrap; }
.zb--invoice .zb-items { padding-bottom: 8px; }
.zb-foot { margin: 0; padding: 12px 24px 16px; font-size: var(--g-meta); color: #6b6b6b; background: #fafaf9; border-top: 1px solid #ece8e2; }
.zb-split { padding: 12px 24px 12px; border-bottom: 1px solid #ece8e2; }
.zb-split small { display: block; font-size: var(--g-meta); color: #6b6b6b; }
.zb-split > span { display: flex; gap: 2px; height: 30px; margin-top: 10px; }
.zb-split i { display: grid; place-items: center; min-width: 0; background: var(--c); font: 500 var(--g-meta)/1 var(--z-font-body); font-style: normal; color: #183e3d; }
.zb-split i.is-dark { color: #fff; }
.zb-sw { flex: none; width: 10px; height: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(24, 62, 61, .14); }
.zb-spark { padding: 14px 24px 12px; border-bottom: 1px solid #ece8e2; }
.zb-spark small { display: block; font-size: var(--g-meta); color: #6b6b6b; }
.zb-spark > span { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 8px; }
.zb-spark i { flex: 1; height: var(--h); background: #cdeee3; }
.zb-spark i.is-on { background: #183e3d; }
.zb--stat .zb-fig { border-bottom: 0; padding-bottom: 4px; }
.zb--stat .zb-split + .zb-rows, .zb--stat .zb-spark + .zb-rows { padding-top: 2px; }
.zb--stat .zb-rows li:last-child { border-bottom: 0; }
.zb--stat .zb-panel { margin-top: 28px; }
.zb--stat .zb-cap { padding-top: 22px; }
.zb--stat:has(.zb-spark) .zb-rows li { min-height: 42px; padding: 8px 0; }
.zb--stat .zb-foot { padding-top: 10px; padding-bottom: 14px; }

/* Steps: the path, then what came out of it. */
.zb--steps { padding: 0; background: #fff; }
.zb-path { padding: 32px 16px 28px; background: radial-gradient(70% 120% at 50% 120%, rgba(175, 236, 219, .45), transparent 70%); }
.zb-res { border-top: 1px solid #ece8e2; }
.zb-res .zb-cap { padding-top: 16px; }
.zb-rows li > svg { flex: none; width: 16px; height: 16px; color: #183e3d; }
.zb-res .zb-rows li { min-height: 42px; padding: 8px 0; }
.zb-res .zb-rows li:last-child { border-bottom: 0; }

/* Converge: sources with what each sends; the totals strip runs off the card's foot. */
.zb-conv__src li > span { display: grid; gap: 1px; }
.zb-conv__src li small { font-size: var(--g-meta); color: #6b6b6b; }
.zb--converge:has(.zb-kpis) { padding-bottom: 0; }
.zb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 24px 50px -28px rgba(24, 62, 61, .3); }
.zb-kpis div { display: grid; gap: 6px; padding: 16px 18px 22px; min-width: 0; }
.zb-kpis div + div { box-shadow: inset 1px 0 0 #ece8e2; }
.zb-kpis small { font-size: var(--g-meta); color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb--converge .zb-conv__src li { padding-top: 10px; padding-bottom: 10px; }
.zb-kpis b { font: 400 var(--g-fig-s)/1.05 var(--z-font-heading); letter-spacing: -.01em; color: #183e3d; white-space: nowrap; }

/* Gauges: the connected systems as a strip, four states, the alert that comes out of it on the card's foot. */
.zb--gauges .zb-g__src { justify-content: flex-start; margin: 0 0 14px; padding: 12px 16px; background: #fff; box-shadow: 0 0 0 1px #ece8e2; }
.zb-g__src em { margin-right: 4px; font: 500 var(--g-meta)/1.3 var(--z-font-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.zb--gauges .zb-g__src span { box-shadow: 0 0 0 1px #e0dbd2; }
.zb--gauges .zb-g__src i { margin-left: auto; }
.zb--gauges .zb-gauges { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; }
.zb--gauges .zb-gauges svg { max-width: 132px; }
.zb--gauges .zb-gauges li { padding: 16px 10px 18px; }
.zb-alert li { padding: 10px 0; }
.zb--gauges:has(.zb-alert) { padding-bottom: 0; }
.zb-alert { list-style: none; margin: 14px 0 0; padding: 4px 20px 6px; background: #fff; box-shadow: 0 0 0 1px #ece8e2, 0 24px 50px -28px rgba(24, 62, 61, .3); }
.zb-alert li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.zb-alert li + li { border-top: 1px solid #ece8e2; }
.zb-alert li > span:not(.zb-tile, .zb-pill) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.zb-tile--line { width: 40px; height: 40px; background: #eaf8f3; color: #183e3d; box-shadow: inset 0 0 0 1.5px #a9dccd; }
.zb-alert b { font-weight: 500; font-size: var(--g-text); } .zb-alert small { font-size: var(--g-meta); color: #6b6b6b; }
.zb-tile--wait { width: 40px; height: 40px; background: #ffec72; color: #000; }
.zb-alert .zb-tile svg { width: 18px; height: 18px; }

/* Code: the response body under the response line, on paper. */
html body .zc-code--resp { background: #fafaf9; color: #323232; border-top: 1px solid #f0ece6; }
html body .zc-code--resp em { color: #183e3d; }

@container (max-width: 560px) {
  .zb-msg { margin: 12px 20px 0; } .zb-sum { margin: 0 20px; } .zb-foot, .zb-spark, .zb-split { padding-left: 20px; padding-right: 20px; }
  .zb-kpis div { padding: 14px 14px 18px; }
}
@container (max-width: 360px) {
  .zb-kpis { grid-template-columns: 1fr; }
  .zb-kpis div { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; }
  .zb-kpis div + div { box-shadow: inset 0 1px 0 #ece8e2; }
}
@container (max-width: 440px) {
  .zb-path { padding: 24px 20px; }
  .zb-kpis div { padding: 12px 12px 16px; }
  .zb-alert li { flex-wrap: wrap; } .zb-alert .zb-pill { margin-left: 54px; }
  .zb-sum { flex-wrap: wrap; }
}

/* Play once: messages, summaries, KPI tiles and alerts are present from first paint; only the small bar charts grow
   (from a visible stub) to their values when the graphic comes into view. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .zc--bento:not(.is-on) :is(.zb-spark i, .zb-split i) { transform: scaleY(.25); transform-origin: bottom; }
  .zc--bento.is-on :is(.zb-spark i, .zb-split i) { transform-origin: bottom; transition: transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(500ms + var(--i) * 50ms); }
}
/* Phone-width feature cards: headers, result rows and code wrap instead of truncating or running out of the card. */
@container (max-width: 440px) {
  .z5-card .zc-h__t :is(b, small), :is(.z5-card, .z-card-art) .zb-rows li > span { white-space: normal; }
  .z5-card .zc-code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .z5-card .zc-table td.is-lead, .z5-card .zc-resp > span:nth-child(2) { white-space: normal; }
  .z5-card .zc-h__t { min-width: 55%; } .z5-card .zc-h__end { flex: 0 1 auto; min-width: 0; } .z5-card .zc-h__end .zc-pill { white-space: normal; }
}

/* ── D-059: every card graphic on the one stage ──
   Image cards outside the feature rows (integration overview trios, the white-label bento) carry live graphics too
   (data/graphics.mjs CARD_ART): copy at the top, the graphic on the card's bottom edge, the same 440px desktop stage.
   The trio's heading moves above its cards so each graphic has room for product-size type; under 1200px the cards
   stack and each sets its graphic beside its title. */
body:not(:has(.z3-hero)) main .z5-trio--art > .text-component.z5-trio__head, .z5-trio--art > .cards-component { grid-column: 1 / -1; }
html body .z-card--art { display: flex !important; flex-direction: column; overflow: hidden; }
html body :is(.z5-trio, .bento-grid) .z-card-art { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 0 auto; max-width: none; }
html body .z5-trio .z-card-art { margin: 20px -24px -24px !important; padding: 0 12px !important; }
html body .bento-grid .z-card-art { margin: 24px calc(-1 * var(--zb-pad, 32px)) calc(-1 * var(--zb-pad, 32px)) !important; padding: 0 var(--zb-pad, 32px) !important; }
/* The white-label invoice keeps its two chips over the rows, as in the original. */
html body .bento-grid .z-card-art .zb--invoice .zb-chips { top: 34%; }
html body .bento-grid .z-card-art .zb--invoice .zb-panel { margin-top: 0; }
/* No chips beside these panels: they take the card's full width, and their row values stay visible when narrow. */
.z-card-art .zb--stat .zb-panel, .z-card-art .zb--invoice .zb-panel:last-child { margin-right: 0; }
/* One top for every panel in a row (the art's own margin is the gap under the title); invoices with chips keep theirs. */
html body .z-card-art .zc--bento > .zb-panel:last-child { margin-top: 0; }
.z-card-art .zb-list li .zb-pill--line { display: inline-block; }
.zb-msg > span > span, .zb-done span { text-wrap: pretty; }
.zb-tile--logo { background: #fff; box-shadow: inset 0 0 0 1px #ece8e2; }
.zb-tile--logo img { width: 26px; height: 26px; object-fit: contain; }
.zb-av--l { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
@media (min-width: 768px) and (max-width: 1199px) {
  body:not(:has(.z3-hero)) main .z5-trio--art ._3col-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body:not(:has(.z3-hero)) main .z5-trio--art .cards-component .feature-card.z-card--art.z-card--art:not(.is-full):not(.is-horizontal) { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: start; }
  html body .z5-trio--art .z-card--art > :not(.z-card-art) { grid-column: 1; }
  html body .z5-trio--art .z-card-art { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; margin: 0 -24px -24px 0 !important; padding: 0 24px 0 0 !important; }
}
@media (max-width: 767px) {
  html body .z5-trio .z-card-art { margin: 16px -20px -20px !important; padding: 0 16px !important; }
}
/* One row, one height: titles (and the bento's lead) reserve two lines, cards in a row stretch to one height, and each
   panel fills its card's graphic area, so tops and bottoms line up; what little is left over sits inside the panel above
   its closing lines. (Not subgrid: container queries inside it measure an unresolved width while rows are sized.) */
@media (min-width: 981px) {
  html body .z5-trio .z-card--art :is(h2, h3) { min-height: 2lh; }
  html body .bento-grid .z-card--art > :first-child p { min-height: 2lh; }
}
@media (min-width: 981px) and (max-width: 1199px) {
  html body .bento-grid .z-card--art > :first-child p { min-height: 3lh; }
}
@media (min-width: 981px) {
  html body .z-card-art > .zc--bento:not(.zb--orbit) { flex: 1 0 auto; }
  html body .z-card-art > .zc.zb--orbit { flex: 1 0 auto; height: auto; min-height: var(--g-stage); margin-top: 0; }
  html body .z-card-art > .zc--bento > .zb-panel { flex: 1 0 auto; display: flex; flex-direction: column; }
  html body .z-card-art .zb-panel > :is(.zb-list + .zb-msg, .zb-list + .zb-done, .zb-items + .zb-sum, .zb-rows + .zb-sum, .zb-rows + .zb-foot) { margin-top: auto; }
  html body .z-card-art .zb-panel > .zb-list:has(+ .zb-msg) { padding-bottom: 10px; }
}
/* Below desktop the bento stacks, so each live graphic keeps a usable width; a small orbit drops its curved label. */
@media (max-width: 980px) {
  html body .bento-grid:has(.z-card--art) { grid-template-columns: minmax(0, 1fr) !important; }
}
@container (max-width: 420px) { .zb-wheel text { display: none; } }
/* Very narrow code cards: the response summary takes its own line under the label and pill. */
@container (max-width: 300px) {
  .z5-card .zc-resp { flex-wrap: wrap; row-gap: 6px; }
  .z5-card .zc-resp > span:nth-child(2) { order: 3; flex-basis: 100%; }
}