/* Demo-conversion components: nexus check, calculator bridge, scroll bar, pricing quote. Zamp system, square geometry. */
.z-nexus { background: var(--z-color-warm, #f6f5f3); }
.z-nexus__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.z-nexus__intro h2 { margin: 24px 0 0; max-width: 16ch; }
.z-nexus__intro p { margin: 16px 0 0; max-width: 34rem; color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-nexus__how { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.z-nexus__how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; font: 400 15px/1.45 var(--z-font-body); color: var(--z-color-black, #000); }
.z-nexus__how span { display: grid; place-items: center; width: 28px; height: 28px; background: var(--z-color-green, #183e3d); color: #fff; font: 500 13px/1 var(--z-font-body); }
.z-nexus__form { background: var(--z-color-white, #fff); border: 1px solid var(--z-color-rule, #e6e1da); padding: 28px; display: grid; gap: 22px; }
.z-nexus__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.z-nexus__field { display: grid; gap: 8px; }
.z-nexus__field > span, .z-nexus__states legend { color: var(--z-primitives-neutral-colors-neutral-dark, #323232); font-weight: 500; }
.z-nexus__field select { height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1); border-radius: 0; background: var(--z-color-white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; font: 400 16px/1.4 var(--z-font-body); color: var(--z-color-black, #000); }
.z-nexus__field select:focus-visible, .z-nexus__state input:focus-visible + span { outline: 2px solid var(--z-color-green, #183e3d); outline-offset: 2px; }
.z-nexus__states { margin: 0; padding: 0; border: 0; min-width: 0; }
.z-nexus__states legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 10px; }
.z-nexus__count { font-weight: 400; }
.z-nexus__state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 232px; overflow: auto; padding: 2px; border: 1px solid var(--z-color-rule, #e6e1da); }
.z-nexus__state { position: relative; display: block; }
.z-nexus__state input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.z-nexus__state span { display: block; padding: 8px 10px; border: 1px solid transparent; font: 400 14px/1.3 var(--z-font-body); color: var(--z-color-black, #000); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-nexus__state span:hover { border-color: var(--z-color-rule, #e6e1da); }
.z-nexus__state input:checked + span { background: var(--z-color-green, #183e3d); color: #fff; border-color: var(--z-color-green, #183e3d); }
.z-nexus__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.z-nexus__submit span { color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-nexus__field.is-invalid select, .z-nexus__states.is-invalid .z-nexus__state-grid { border-color: #b32318; box-shadow: inset 0 0 0 1px #b32318; }
.z-nexus__result[hidden] { display: none; }
.z-nexus__result { margin-top: 40px; border-top: 1px solid var(--z-color-rule, #e6e1da); padding-top: 40px; display: grid; gap: 24px; }
.z-nexus__summary { display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.z-nexus__stat { display: grid; gap: 4px; }
.z-nexus__stat strong { font: 400 clamp(2.25rem, 1.875rem + 1.5vw, 3rem)/1.1 var(--z-font-heading); color: var(--z-color-black, #000); }
.z-nexus__assumption { margin: 0; max-width: 34rem; color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-nexus__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.z-nexus__item { display: grid; gap: 6px; padding: 18px 20px; background: var(--z-color-white, #fff); border: 1px solid var(--z-color-rule, #e6e1da); border-top: 3px solid var(--z-color-rule, #e6e1da); }
.z-nexus__item--over { border-top-color: var(--z-color-green, #183e3d); }
.z-nexus__item--near { border-top-color: var(--z-color-yellow, #ffec72); }
.z-nexus__item strong { font: 500 18px/1.3 var(--z-font-body); color: var(--z-color-black, #000); }
.z-nexus__chip { justify-self: start; padding: 3px 8px; font: 500 12px/1.4 var(--z-font-body); border: 1px solid var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1); color: var(--z-color-black, #000); }
.z-nexus__item--over .z-nexus__chip { background: var(--z-color-mint, #afecdb); border-color: var(--z-color-mint, #afecdb); color: var(--z-color-green, #183e3d); }
.z-nexus__item--near .z-nexus__chip { background: var(--z-color-yellow, #ffec72); border-color: var(--z-color-yellow, #ffec72); }
.z-nexus__rule, .z-nexus__action { font: 400 14px/1.5 var(--z-font-body); color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-nexus__action { color: var(--z-color-black, #000); }
.z-nexus__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; background: var(--z-color-green, #183e3d); color: #fff; --z-body-ink: currentColor; }
.z-nexus__cta h3 { margin: 0 0 6px; color: #fff; }
.z-nexus__cta p { margin: 0; color: #cfe3dc !important; max-width: 40rem; }
.z-nexus__cta .z-sec__btn { background: #fff; border-color: #fff; color: #000; }
.z-nexus__cta .z-sec__btn:hover { background: var(--z-color-mint, #afecdb); border-color: var(--z-color-mint, #afecdb); }
.z-nexus--compact .z-nexus__grid { grid-template-columns: 1fr; }
.z-nexus--compact .z-nexus__intro h2 { max-width: 22ch; }

/* Calculator bridge */
.z-bridge { background: var(--z-color-white, #fff); border-top: 1px solid var(--z-color-rule, #e6e1da); border-bottom: 1px solid var(--z-color-rule, #e6e1da); padding-top: 56px; padding-bottom: 56px; }
.z-bridge__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.z-bridge__copy h2 { margin: 20px 0 0; max-width: 24ch; }
.z-bridge__copy p { margin: 14px 0 0; max-width: 40rem; color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-bridge__actions { display: grid; gap: 14px; justify-items: start; }

/* Scroll bar */
.z-scrollbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; transform: translateY(100%); transition: transform .25s ease; background: var(--z-color-black, #000); color: #fff; --z-body-ink: currentColor; }
.z-scrollbar.is-visible { transform: translateY(0); }
.z-scrollbar__inner { max-width: 84rem; margin: 0 auto; padding: 12px clamp(20px, 4.2vw, 60px); display: flex; align-items: center; gap: 20px; }
.z-scrollbar__inner p { margin: 0; flex: 1 1 auto; color: #fff !important; }
.z-scrollbar__btn { background: #fff; border-color: #fff; color: #000; height: 40px; padding: 0 16px; font-size: 15px; }
.z-scrollbar__btn:hover { background: var(--z-color-mint, #afecdb); border-color: var(--z-color-mint, #afecdb); color: #000; }
.z-scrollbar__close { appearance: none; background: transparent; border: 1px solid #ffffff4d; color: #fff; width: 36px; height: 36px; font-size: 20px; line-height: 1; cursor: pointer; }
.z-scrollbar__close:hover { border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .z-scrollbar { transition: none; } }
/* Local preview only: keep the bar above the migration toolbar. */
body:has(.migration-toolbar) .z-scrollbar { bottom: 44px; }

/* Pricing quote */
.z-quote { background: var(--z-color-warm, #f6f5f3); padding-top: 56px; padding-bottom: 56px; }
.z-quote__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.z-quote h2 { margin: 0; max-width: 18ch; }
.z-quote p { margin: 14px 0 0; max-width: 38rem; color: var(--z-primitives-neutral-colors-neutral-dark, #323232); }
.z-quote__actions { display: grid; gap: 14px; justify-items: start; }

@media (max-width: 1100px) { .z-nexus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-nexus__summary { grid-template-columns: repeat(3, auto); } .z-nexus__assumption { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .z-nexus__grid, .z-bridge__inner, .z-quote__inner { grid-template-columns: 1fr; }
  .z-nexus__state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-nexus__cta { grid-template-columns: 1fr; }
  .z-scrollbar__inner { flex-wrap: wrap; gap: 12px; }
  .z-scrollbar__inner p { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .z-nexus__form { padding: 20px; }
  .z-nexus__row { grid-template-columns: 1fr; }
  .z-nexus__state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-nexus__list { grid-template-columns: 1fr; }
  .z-nexus__summary { grid-template-columns: 1fr 1fr; }
  .z-bridge, .z-quote { padding-top: 44px; padding-bottom: 44px; }
}