/* Feature-page product art (D-038) — the homepage bento graphic language as one shared family (src/lib/feature-art.mjs).
   Stage: a fixed 3:2 warm field (the ratio of the raster mockups it replaces) with the site's graph corner, a main panel
   upper-left and an accent card lower-right. Everything inside is sized in em off the stage width (container query), so
   every graphic keeps identical proportions at every width. Motion: the .is-live loops below are no longer switched on
   (user, 2026-10-31: graphics play once, never loop; motion.js only adds .is-on), so this art shows its final, static
   state. No live route rendered it at that date; give it play-once rules like site-ui.css before reusing it. */

.za-stage, .za-stage *, .za-hero, .za-hero * { box-sizing: border-box; }
.za-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; container-type: inline-size;
  background: #ede9e2; font-family: var(--z-font-body); color: #000; }
/* Plain warm field, as the homepage bento art (user: the texture made the side-by-sides too busy). */
/* One composition at every width: the graphic scales as a whole (no re-layout), so it never overlaps on phones. */
.za-stage__in { position: absolute; inset: 0; font-size: clamp(5px, 2.05cqw, 15px); }
.za-stage__in { display: flex; align-items: center; justify-content: center; padding: 6% 9%; }
.za-main { position: relative; width: 100%; max-width: 40em; }

/* A row's own image in the stage: mockups contained with breathing room; photographs cover. */
.za-stage--img > img { position: absolute; inset: 7% 8%; width: 84%; height: 86%; object-fit: contain; }
.za-stage--photo > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Panel */
.za-panel { background: #fff; box-shadow: 0 1px 0 #e6e1da, 0 1.6em 3.2em -1.4em rgba(12, 10, 8, .2); }
.za-head { display: flex; align-items: center; gap: .8em; padding: 1.05em 1.25em; border-bottom: 1px solid #e6e1da; }
.za-ico { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; background: #183e3d; color: #fff; }
.za-ico svg { width: 1.3em; height: 1.3em; }
.za-head__t { flex: 1 1 auto; min-width: 0; }
.za-head__t b { display: block; font: 400 1.36em/1.15 var(--z-font-heading); letter-spacing: -.01em; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.za-head__t small { display: block; margin-top: .25em; font-size: .8em; line-height: 1.3; color: #5b5b5b; }
.za-body { padding: .35em 1.25em 1em; }
.za-kicker { margin: 0; padding: 1em 1.25em 0; font: 500 .7em/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #5b5b5b; }
.za-kicker + .za-head { padding-top: .45em; border-bottom: 0; }

/* Accent card tones */
.za-tone-dark { background: #183e3d; color: #fff; box-shadow: 0 1.6em 3.2em -1.4em rgba(12, 10, 8, .35); }
.za-tone-dark .za-head { border-color: rgba(255, 255, 255, .18); }
.za-tone-dark .za-head__t b { color: #fff; }
.za-tone-dark .za-head__t small, .za-tone-dark .za-kicker { color: rgba(255, 255, 255, .72); }
.za-tone-dark .za-ico { background: #afecdb; color: #183e3d; }
.za-tone-dark .za-list li { border-color: rgba(255, 255, 255, .14); color: #fff; }
.za-tone-dark .za-check { background: #afecdb; color: #183e3d; }
.za-tone-dark .za-li-m, .za-tone-dark .za-li-t small { color: rgba(255, 255, 255, .72); }
.za-tone-dark .za-kv dt { color: rgba(255, 255, 255, .72); }
.za-tone-dark .za-kv dd { color: #fff; }
.za-tone-dark .za-kv > div { border-color: rgba(255, 255, 255, .14); }
.za-tone-mint { background: #afecdb; }
.za-tone-mint .za-head { border-color: rgba(24, 62, 61, .15); }

/* Chips */
.za-chip { display: inline-flex; align-items: center; gap: .35em; flex: none; padding: .3em .6em; background: #afecdb; color: #183e3d; font: 500 .74em/1.2 var(--z-font-body); white-space: nowrap; }
.za-chip svg { width: 1em; height: 1em; }
.za-chip--wait { background: #f1eee9; color: #323232; }
.za-chip--dark { background: #183e3d; color: #fff; }
.za-chip--dark svg { color: #afecdb; }
.za-chip--flag { background: #fde7e2; color: #a2321c; }
.za-chip--line { background: transparent; box-shadow: inset 0 0 0 1px #c8bfb1; color: #323232; }
.za-tone-dark .za-chip { background: #afecdb; color: #183e3d; }
.za-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.za-flip { position: relative; display: inline-grid; justify-items: end; }
.za-flip > * { grid-area: 1 / 1; }
.za-flip__a { opacity: 0; visibility: hidden; }

/* Table */
.za-table { font-size: .9em; }
.za-table__th, .za-row { display: grid; grid-template-columns: 1.15fr repeat(calc(var(--n) - 1), minmax(0, 1fr)); align-items: center; gap: .6em; }
.za-table__th { padding: .65em 0 .55em; font: 500 .72em/1.2 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #5b5b5b; }
.za-table__th > *, .za-row > * { justify-self: start; }
.za-table__th > :last-child, .za-row > :last-child { justify-self: end; }
.za-row { padding: .7em 0; border-top: 1px solid #e6e1da; color: #323232; }
.za-row > :first-child { color: #000; font-weight: 500; }
.za-row--hl { margin: 0 -.6em; padding-left: .6em; padding-right: .6em; background: rgba(175, 236, 219, .32); }

/* Check list */
.za-list { list-style: none; margin: 0; padding: 0; font-size: .9em; }
.za-stage li, .za-hero li { font-size: inherit; }
.za-list li { display: flex; align-items: center; gap: .7em; padding: .62em 0; border-top: 1px solid #e6e1da; color: #000; }
.za-list li:first-child { border-top: 0; }
.za-list li.za-hl { margin: 0 -.6em; padding-left: .6em; padding-right: .6em; background: rgba(175, 236, 219, .32); }
.za-check { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #183e3d; color: #afecdb; }
.za-check svg { width: .85em; height: .85em; }
.za-li-ico { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; background: #f6f5f3; color: #183e3d; }
.za-li-ico svg { width: 1.1em; height: 1.1em; }
.za-tone-dark .za-li-ico { background: rgba(255, 255, 255, .1); color: #afecdb; }
.za-li-t { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.za-li-t small { display: block; font-size: .82em; font-weight: 400; color: #5b5b5b; }
.za-li-m { flex: none; font-size: .86em; color: #5b5b5b; }

/* Steps tracker */
.za-steps { position: relative; list-style: none; margin: 0; padding: 1em 0 .4em; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.za-steps::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(1em + .75em); height: 2px; background: #183e3d; transform-origin: left; }
.za-steps li { position: relative; display: grid; justify-items: center; gap: .55em; text-align: center; }
.za-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #183e3d; color: #afecdb; box-shadow: 0 0 0 .3em #fff; }
.za-steps i svg { width: .85em; height: .85em; }
.za-steps span { font: 500 .78em/1.25 var(--z-font-body); color: #000; }
.za-tone-dark .za-steps i { background: #afecdb; color: #183e3d; box-shadow: 0 0 0 .3em #183e3d; }
.za-tone-dark .za-steps::before { background: #afecdb; }
.za-tone-dark .za-steps span { color: #fff; }

/* Meters */
.za-meters { display: grid; gap: .9em; padding: .6em 0 .2em; }
.za-meter__top { display: flex; justify-content: space-between; gap: 1em; font-size: .88em; }
.za-meter__top span { font-weight: 500; }
.za-meter__top b { font-weight: 500; color: #183e3d; }
.za-bar { height: .55em; margin-top: .45em; background: #eee9e1; overflow: hidden; }
.za-bar i { display: block; height: 100%; width: var(--v); background: #183e3d; }
.za-meter small { display: block; margin-top: .35em; font-size: .74em; color: #5b5b5b; }
.za-tone-dark .za-bar { background: rgba(255, 255, 255, .14); }
.za-tone-dark .za-bar i { background: #afecdb; }
.za-tone-dark .za-meter__top b { color: #afecdb; }

/* Key–value */
.za-kv { margin: 0; font-size: .88em; }
.za-kv > div { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-top: 1px solid #e6e1da; }
.za-kv > div:first-child { border-top: 0; }
.za-kv dt { color: #5b5b5b; }
.za-kv dd { margin: 0; font-weight: 500; color: #000; text-align: right; }

/* Code */
.za-code { position: relative; margin: .5em 0 .2em; padding: .9em 1em; background: #0c0a08; color: #e6e1da; font: 400 .78em/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; }
.za-code span { display: block; }
.za-code em { font-style: normal; color: #afecdb; }
.za-code u { text-decoration: none; color: #c8bfb1; }
.za-caret { display: none; }

/* Stat */
.za-stat { padding: .4em 0 .2em; }
.za-stat small { display: block; font: 500 .7em/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #5b5b5b; }
.za-stat strong { display: block; margin-top: .15em; font: 400 2.9em/1 var(--z-font-heading); letter-spacing: -.02em; color: #000; }
.za-stat span { display: block; margin-top: .35em; font-size: .8em; color: #5b5b5b; }
.za-tone-dark .za-stat strong { color: #fff; }
.za-tone-dark .za-stat small, .za-tone-dark .za-stat span { color: rgba(255, 255, 255, .72); }

/* Tags */
.za-tags { display: flex; flex-wrap: wrap; gap: .4em; padding: .7em 0 .2em; }
.za-tags span { padding: .32em .6em; background: #f1eee9; font: 500 .74em/1.2 var(--z-font-body); color: #323232; }
.za-tags span.is-on { background: #183e3d; color: #fff; }

/* Footer row + note */
.za-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .3em; padding-top: .75em; border-top: 1px solid #e6e1da; font-size: .82em; color: #5b5b5b; }
.za-foot b { font-weight: 500; color: #000; font-variant-numeric: tabular-nums; }
.za-tone-dark .za-foot { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); }
.za-tone-dark .za-foot b { color: #fff; }
.za-note { margin: .6em 0 0; font-size: .78em; color: #5b5b5b; }
.za-tone-dark .za-note { color: rgba(255, 255, 255, .72); }

/* Result strip: the panel foot, deep green (or warm when light) — replaces the old overlapping accent card. */
.za-strip { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 1em; padding: 1em 1.25em; background: #183e3d; color: #fff; }
.za-strip--light { background: #f6f5f3; color: #000; border-top: 1px solid #e6e1da; }
.za-strip__t small { display: block; margin-bottom: .3em; font: 500 .66em/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.za-strip--light .za-strip__t small { color: #5b5b5b; }
.za-strip__t b { display: block; font: 400 1.12em/1.2 var(--z-font-heading); letter-spacing: -.005em; }
.za-strip__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-size: .8em; }
.za-strip__checks li { display: flex; align-items: center; gap: .55em; padding: 0; border: 0; font-weight: 500; }
.za-strip .za-check { width: 1.35em; height: 1.35em; background: #afecdb; color: #183e3d; }
.za-strip--light .za-check { background: #183e3d; color: #afecdb; }
.za-strip__stat { display: flex; align-items: baseline; justify-content: flex-end; gap: .6em; }
.za-strip__stat strong { font: 400 2.1em/1 var(--z-font-heading); letter-spacing: -.02em; }
.za-strip__stat span { font-size: .74em; color: rgba(255, 255, 255, .72); max-width: 9em; }
.za-strip--light .za-strip__stat span { color: #5b5b5b; }
.za-strip__kv { margin: 0; display: grid; gap: .35em; font-size: .8em; }
.za-strip__kv > div { display: flex; justify-content: space-between; gap: 1em; }
.za-strip__kv dt { color: rgba(255, 255, 255, .72); }
.za-strip--light .za-strip__kv dt { color: #5b5b5b; }
.za-strip__kv dd { margin: 0; font-weight: 500; }
.za-strip .za-steps { padding: .3em 0 0; }
.za-strip .za-steps i { background: #afecdb; color: #183e3d; box-shadow: 0 0 0 .3em #183e3d; }
.za-strip .za-steps::before { background: #afecdb; }
.za-strip .za-steps span { color: #fff; font-size: .7em; }
.za-strip--light .za-steps i { background: #183e3d; color: #afecdb; box-shadow: 0 0 0 .3em #f6f5f3; }
.za-strip--light .za-steps::before { background: #183e3d; }
.za-strip--light .za-steps span { color: #000; }
.za-strip .za-meters { padding: 0; gap: .5em; }
.za-strip .za-meter__top { font-size: .78em; }
.za-strip .za-meter__top b { color: #afecdb; }
.za-strip .za-bar { background: rgba(255, 255, 255, .16); margin-top: .3em; }
.za-strip .za-bar i { background: #afecdb; }
.za-strip .za-note, .za-strip .za-foot { margin: 0; padding: 0; border: 0; color: rgba(255, 255, 255, .78); }
.za-strip--light .za-note, .za-strip--light .za-foot { color: #323232; }

/* ── Hero media: the page photograph (old baked panels removed) with the same card family over its foot ── */
.za-hero { position: absolute; inset: 0; container-type: inline-size; font-family: var(--z-font-body); color: #000; }
.za-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; }
/* One card at a readable size, hanging off the photo's lower-left corner (the homepage hero card pattern), clear of the
   subject, who sits right of centre. */
.za-hero__card { position: absolute; left: -7%; bottom: -6%; width: 60%; font-size: clamp(10px, 2.45cqw, 16px); z-index: 2; }
@media (max-width: 991px) { .za-hero__card { left: 4%; bottom: 4%; width: 64%; } }

/* ── Integration hero (D-042): co-brand lockup on the deep-green field + one connected card ── */
.za-int { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9%;
  background-color: #183e3d;
  background-image: url('/migrated/a60a1871d4168ba74f983123d6f8d4d2a87f5d21a73421725e4cd298127d640a.svg'), url('/migrated/8b6ea4d6c59e8ac356e1049068cdfe7a3eb1b6702539167645ce405547f74948.svg');
  background-position: 0 0, 100% 100%; background-repeat: no-repeat; background-size: 34% auto, 36% auto; font-family: var(--z-font-body); color: #000; }
.za-int > * { font-size: clamp(9px, 2.3cqw, 15px); }
.za-int__lockup { display: flex; align-items: center; }
.za-int__tile { display: grid; place-items: center; width: 30cqw; height: 30cqw; background: #fff; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, .45); }
.za-int__tile img { width: 54%; height: 46%; object-fit: contain; display: block; filter: none !important; opacity: 1 !important; }
.za-int__tile img[src*='zamp-black'] { width: 50%; height: 30%; }
.za-int__tile--glyph { align-content: center; gap: .2em; }
.za-int__code { font: 400 2.2em/1 ui-monospace, Menlo, monospace; color: #183e3d; }
.za-int__tile--glyph b { font: 400 1.6em/1 var(--z-font-heading); color: #000; }
.za-int__join { position: relative; width: 12cqw; height: 2px; background: #afecdb; }
.za-int__join i { position: absolute; left: 50%; top: 50%; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%; background: #afecdb; box-shadow: 0 0 0 .9cqw rgba(175, 236, 219, .25); }
.za-int__card { width: 72cqw; background: #fff; box-shadow: 0 2cqw 4.4cqw -2cqw rgba(0, 0, 0, .45); }
.za-int__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.05em 1.3em; border-bottom: 1px solid #e6e1da; }
.za-int__card-head b { font: 400 1.3em/1.2 var(--z-font-heading); letter-spacing: -.01em; color: #000; }
.za-int__card-head b span { color: #8c8273; padding: 0 .15em; }
.za-int__facts { margin: 0; padding: .4em 1.3em .7em; font-size: .9em; }
.za-int__facts > div { display: flex; justify-content: space-between; gap: 1.5em; padding: .6em 0; border-top: 1px solid #e6e1da; }
.za-int__facts > div:first-child { border-top: 0; }
.za-int__facts dt { color: #5b5b5b; }
.za-int__facts dd { margin: 0; font-weight: 500; text-align: right; }
/* Copy side: the platform's logo tile above the H1 (identifies the page at a glance). */
.z-int-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 28px; background: #fff; box-shadow: 0 1px 0 #e6e1da, 0 12px 24px -14px rgba(12, 10, 8, .25); }
.z-int-mark img { width: 60%; height: 60%; object-fit: contain; }
@media (max-width: 767px) { .z-int-mark { width: 52px; height: 52px; margin-bottom: 20px; } }

/* ── Motion (only on screen, only without reduced motion) ── */
@media (prefers-reduced-motion: no-preference) {
  /* Status flips play forward once per visit (a status never reverts on screen); the outgoing pill is hidden before
     the incoming one appears, so only one pill is ever visible. */
  .is-live .za-flip__a { animation: za-a 8s 1 both; animation-delay: calc(var(--i, 0) * .5s); }
  .is-live .za-flip__b { animation: za-b 8s 1 both; animation-delay: calc(var(--i, 0) * .5s); }
  .is-live .za-row, .is-live .za-list li { animation: za-row 8s infinite; animation-delay: calc(var(--i, 0) * .5s); }
  .is-live .za-row--hl, .is-live .za-list li.za-hl { animation: none; }
  .is-live .za-check { animation: za-tick 8s infinite; animation-delay: calc(var(--i, 0) * .45s); }
  .is-live .za-steps i { animation: za-step 8s infinite; animation-delay: calc(var(--i, 0) * .7s); }
  .is-live .za-steps::before { animation: za-line 8s infinite; }
  .is-live .za-bar i { animation: za-fill 8s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--i, 0) * .3s); }
  .is-live .za-int__join i { animation: za-join 2.4s ease-in-out infinite; }
  .is-live .za-int__join { animation: za-joinline 2.4s ease-in-out infinite; }
  .is-live .za-strip { animation: za-strip 8s infinite; }
  .is-live .za-strip__checks .za-check { animation: za-tick 8s infinite; animation-delay: calc(.9s + var(--i, 0) * .45s); }
  .is-live .za-code span { animation: za-type 8s steps(1) infinite; animation-delay: calc(var(--i, 0) * .25s); }
  .is-live .za-caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: #afecdb; animation: za-blink 1s steps(1) infinite; }
  .is-live .za-tags span.is-on { animation: za-tagon 8s infinite; }
  .is-live .za-chip--dark .za-dot, .is-live .za-chip .za-dot { animation: za-pulse 2.4s ease-in-out infinite; }
}
@keyframes za-a { 0%, 10% { opacity: 1; visibility: visible; } 12%, 100% { opacity: 0; visibility: hidden; } }
@keyframes za-b { 0%, 12% { opacity: 0; visibility: hidden; transform: scale(.9); } 12.1% { visibility: visible; } 15% { opacity: 1; transform: scale(1.06); } 18%, 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes za-row { 0%, 8% { background-color: transparent; } 13% { background-color: rgba(175, 236, 219, .35); } 26%, 100% { background-color: transparent; } }
@keyframes za-tick { 0%, 6% { transform: scale(.4); opacity: .25; } 12% { transform: scale(1.12); opacity: 1; } 16%, 92% { transform: none; opacity: 1; } 100% { transform: scale(.4); opacity: .25; } }
@keyframes za-step { 0%, 5% { background: #fff; box-shadow: 0 0 0 .3em #fff, inset 0 0 0 1.5px #c8bfb1; color: transparent; } 11%, 92% { background: #183e3d; box-shadow: 0 0 0 .3em #fff; color: #afecdb; } 100% { background: #fff; box-shadow: 0 0 0 .3em #fff, inset 0 0 0 1.5px #c8bfb1; color: transparent; } }
@keyframes za-line { 0% { transform: scaleX(0); } 32%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes za-fill { 0% { width: 0; } 40%, 92% { width: var(--v); } 100% { width: 0; } }
@keyframes za-join { 0%, 100% { box-shadow: 0 0 0 .9cqw rgba(175, 236, 219, .25); } 50% { box-shadow: 0 0 0 2.2cqw rgba(175, 236, 219, 0); } }
@keyframes za-joinline { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes za-strip { 0%, 12% { opacity: .0; transform: translateY(.6em); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes za-pop { 0%, 14% { opacity: 0; transform: translateY(.9em); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(.4em); } }
@keyframes za-type { 0% { opacity: 0; } 4%, 100% { opacity: 1; } }
@keyframes za-blink { 50% { opacity: 0; } }
@keyframes za-tagon { 0%, 20% { background: #f1eee9; color: #323232; } 28%, 92% { background: #183e3d; color: #fff; } 100% { background: #f1eee9; color: #323232; } }
@keyframes za-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Feature rows (the "how it works" side-by-sides): one structure on every feature page ── */
.zf-rows { display: grid; gap: clamp(64px, 7vw, 112px); margin-top: var(--z4-head-gap, 64px); }
.zf-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.zf-row__copy { grid-column: 1 / span 5; }
.zf-row__art { grid-column: 7 / -1; margin: 0; }
.zf-row:nth-child(even) .zf-row__copy { grid-column: 8 / -1; grid-row: 1; }
.zf-row:nth-child(even) .zf-row__art { grid-column: 1 / span 6; grid-row: 1; }
.zf-row__n { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #183e3d; }
.zf-row__n::after { content: ""; flex: 0 0 48px; height: 1px; background: #c8bfb1; }
.zf-row__copy h3 { margin: 0; font-size: var(--z-type-subsection-size) !important; line-height: 1.2 !important; letter-spacing: -.01em; color: #000; text-wrap: balance; }
.zf-row__copy p { margin: 16px 0 0; max-width: 30rem; font: 400 18px/1.6 var(--z-font-body); color: #323232; text-wrap: pretty; }
@media (max-width: 980px) {
  .zf-row__copy, .zf-row__art, .zf-row:nth-child(even) .zf-row__copy, .zf-row:nth-child(even) .zf-row__art { grid-column: 1 / -1; grid-row: auto; }
  .zf-row__copy { order: -1; }
  .zf-rows { gap: 64px; }
}