/* Zemash visual panels and flat-band patterns. Loads after zm-additions.css. Added in patch 2.
   Rules are scoped to new classes (.zm-vp*, .zm-hero--vp, .zm-sec--vp) or to pseudo elements nothing else uses.
   The only !important is on one base rule that is itself !important (marked "Base is !important"). */

/* ---------- tokens ---------- */
.zm-vp{--vp-bg1:#E6F4F5;--vp-bg2:#FFFFFF;--vp-bd:#CFE8EA;--vp-line:rgba(14,124,134,.34);--vp-acc:#0E7C86;--vp-acc2:#3DBAC4;--vp-ink:#0B1D33;--vp-soft:rgba(14,124,134,.12);--vp-chip-bg:#fff;--vp-chip-ink:#0A6169;--vp-card:#fff;--vp-card-ink:#0E7C86}
.zm-vp--dark{--vp-bg1:#16385F;--vp-bg2:#0B1D33;--vp-bd:rgba(255,255,255,.16);--vp-line:rgba(61,186,196,.42);--vp-acc:#3DBAC4;--vp-acc2:#0E7C86;--vp-ink:#FFFFFF;--vp-soft:rgba(61,186,196,.16);--vp-chip-bg:rgba(255,255,255,.10);--vp-chip-ink:#E6F4F5;--vp-card:rgba(255,255,255,.10);--vp-card-ink:#3DBAC4}
.zm-sec--mist .zm-vp:not(.zm-vp--dark){--vp-bg1:#FFFFFF;--vp-bg2:#E6F4F5}
.zm-sec--tint .zm-vp:not(.zm-vp--dark){--vp-bg1:#FFFFFF;--vp-bg2:#F2FAFA}

/* ---------- the panel ---------- */
.zm-vp{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:6/5;max-height:440px;min-height:300px;border:1px solid var(--vp-bd);border-radius:20px;background:linear-gradient(150deg,var(--vp-bg1),var(--vp-bg2));box-shadow:var(--zm-shadow);color:var(--vp-ink);contain:layout paint}
.zm-vp__art,.zm-vp__ui{position:absolute;inset:0}
.zm-vp__art svg{display:block;width:100%;height:100%}
.zm-vp__ui{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:12px;padding:28px;pointer-events:none}
.zm-vp__ic{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:var(--vp-card);color:var(--vp-card-ink);box-shadow:0 1px 2px rgba(11,29,51,.06),0 14px 28px -14px rgba(11,29,51,.35);border:1px solid var(--vp-bd)}
.zm-vp__ic svg{width:36px;height:36px}
.zm-vp__stat{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.zm-vp__stat b{font:700 44px/1 var(--zm-font-head);letter-spacing:-.02em;color:var(--vp-ink)}
.zm-vp__stat i{font:600 16px/1.3 var(--zm-font-body);font-style:normal;color:var(--vp-chip-ink)}
.zm-vp__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.zm-vp__stat+.zm-vp__chips{margin-top:0}
.zm-vp__chips li{padding:8px 14px;border-radius:999px;background:var(--vp-chip-bg);border:1px solid var(--vp-bd);font:600 15px/1.2 var(--zm-font-body);color:var(--vp-chip-ink);box-shadow:0 1px 2px rgba(11,29,51,.05)}
/* readable text over the drawing: a soft fade at the foot of the panel when a stat or chips are shown */
.zm-vp--txt .zm-vp__art::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(0deg,var(--vp-bg2) 8%,transparent)}
/* icon sits in the middle for the concentric variants */
.zm-vp--rings .zm-vp__ui,.zm-vp--orbit .zm-vp__ui{align-items:center;justify-content:center}
.zm-vp--rings .zm-vp__stat,.zm-vp--orbit .zm-vp__stat,.zm-vp--rings .zm-vp__chips,.zm-vp--orbit .zm-vp__chips{position:absolute;left:28px;bottom:28px;margin:0}
.zm-vp--rings .zm-vp__stat+.zm-vp__chips,.zm-vp--orbit .zm-vp__stat+.zm-vp__chips{display:none}

/* ---------- art: shared drawing classes (colours come from the tokens) ---------- */
.zm-vp__r{fill:none;stroke:var(--vp-line);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.zm-vp__r1{stroke-dasharray:2 9;stroke-linecap:round}
.zm-vp__r2{opacity:.7}
.zm-vp__dash{fill:none;stroke:var(--vp-acc);stroke-width:1.5;stroke-dasharray:3 14;stroke-linecap:round;opacity:.7;transform-box:fill-box;transform-origin:center}
.zm-vp__dot{fill:var(--vp-acc)}.zm-vp__dot2{fill:var(--vp-acc2)}
.zm-vp__spin{transform-origin:240px 200px}
.zm-vp__ln{stroke:var(--vp-line);stroke-width:1.5;stroke-dasharray:4 7}
.zm-vp__halo{fill:var(--vp-soft);transform-box:fill-box;transform-origin:center}
.zm-vp__nd{fill:var(--vp-card);stroke:var(--vp-acc);stroke-width:2}
.zm-vp__nd--a{fill:var(--vp-acc);stroke:var(--vp-card)}
.zm-vp__base{stroke:var(--vp-line);stroke-width:1.5}
.zm-vp__bar{fill:var(--vp-soft);stroke:var(--vp-line);stroke-width:1.25;transform-box:fill-box;transform-origin:50% 100%}
.zm-vp__bar--a{fill:var(--vp-acc);stroke:none}
.zm-vp__trend{stroke:var(--vp-acc);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 8;opacity:.85}
.zm-vp__w{stroke:var(--vp-line);stroke-width:2;stroke-linecap:round}
.zm-vp__w1{stroke:var(--vp-acc);opacity:.55}.zm-vp__w2{opacity:.8}.zm-vp__w3{stroke:var(--vp-acc2);opacity:.5}
/* mesh: three soft blobs */
.zm-vp__b{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(2px);opacity:.9;will-change:transform}
.zm-vp__b1{left:-12%;top:-18%;background:radial-gradient(circle,rgba(61,186,196,.55),rgba(61,186,196,0) 68%)}
.zm-vp__b2{right:-18%;top:22%;background:radial-gradient(circle,rgba(27,58,92,.34),rgba(27,58,92,0) 68%)}
.zm-vp__b3{left:14%;bottom:-34%;background:radial-gradient(circle,rgba(14,124,134,.42),rgba(14,124,134,0) 68%)}
.zm-vp--dark .zm-vp__b2{background:radial-gradient(circle,rgba(14,124,134,.55),rgba(14,124,134,0) 68%)}
.zm-vp__fine{position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--vp-soft) 0 1px,transparent 1px 28px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);opacity:.7}
/* grid: dotted field with a brighter band that travels across */
.zm-vp__dots{position:absolute;inset:0;background-image:radial-gradient(circle,var(--vp-line) 1.6px,transparent 2px);background-size:26px 26px;background-position:13px 13px}
.zm-vp__dots--hot{background-image:radial-gradient(circle,var(--vp-acc) 2.2px,transparent 2.6px);-webkit-mask-image:linear-gradient(105deg,transparent 35%,#000 50%,transparent 65%);mask-image:linear-gradient(105deg,transparent 35%,#000 50%,transparent 65%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------- motion: only when the visitor has not asked for less, and only while the panel is on screen ---------- */
@media(prefers-reduced-motion:no-preference){
  .zm-vp__b1{animation:zm-vp-b1 26s ease-in-out infinite alternate}
  .zm-vp__b2{animation:zm-vp-b2 32s ease-in-out infinite alternate}
  .zm-vp__b3{animation:zm-vp-b3 29s ease-in-out infinite alternate}
  .zm-vp__dots--hot{animation:zm-vp-sweep 9s linear infinite}
  .zm-vp__r{animation:zm-vp-pulse 9s ease-in-out infinite;animation-delay:var(--d,0s)}
  .zm-vp__dash{animation:zm-vp-rot 80s linear infinite}
  .zm-vp__spin{animation:zm-vp-rot 46s linear infinite}
  .zm-vp__spin--b{animation-duration:70s;animation-direction:reverse}
  .zm-vp__ln{animation:zm-vp-flow 7s linear infinite;animation-delay:var(--d,0s)}
  .zm-vp__halo{animation:zm-vp-halo 6s ease-in-out infinite;animation-delay:var(--d,0s)}
  .zm-vp__bar{animation:zm-vp-bar 7s ease-in-out infinite;animation-delay:var(--d,0s)}
  .zm-vp__trend{animation:zm-vp-flow 9s linear infinite}
  .zm-vp__w{animation:zm-vp-wave 22s linear infinite}
  .zm-vp__w1{animation-duration:30s;animation-direction:reverse}.zm-vp__w2{animation-duration:38s}.zm-vp__w3{animation-duration:26s;animation-direction:reverse}
}
@media(prefers-reduced-motion:no-preference){.zm-vp:not(.is-on) *{animation-play-state:paused}}
@keyframes zm-vp-b1{to{transform:translate3d(18%,14%,0) scale(1.15)}}
@keyframes zm-vp-b2{to{transform:translate3d(-22%,10%,0) scale(.9)}}
@keyframes zm-vp-b3{to{transform:translate3d(20%,-16%,0) scale(1.12)}}
@keyframes zm-vp-sweep{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes zm-vp-pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.035);opacity:1}}
@keyframes zm-vp-rot{to{transform:rotate(360deg)}}
@keyframes zm-vp-flow{to{stroke-dashoffset:-110}}
@keyframes zm-vp-halo{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.25);opacity:1}}
@keyframes zm-vp-bar{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
@keyframes zm-vp-wave{to{transform:translateX(-480px)}}

/* ---------- split: the panel is the second grid cell (zm.css sets the two columns) ---------- */
.e-con.zm-split>.zm-vp{align-self:center}

/* ---------- hero: panel stands on the right, drawn straight on the hero background ---------- */
.e-con.zm-hero.zm-hero--vp>.zm-wrap{position:static}
.zm-vp--hero{position:absolute;z-index:1;right:max(24px,calc((100% - 1200px)/2));top:50%;transform:translateY(-50%);width:min(40%,470px);aspect-ratio:1/.86;min-height:0;max-height:none;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border-color:rgba(255,255,255,.14);box-shadow:none;backdrop-filter:none}
.zm-hero--white .zm-vp--hero{background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(230,244,245,.55));border-color:#CFE8EA;box-shadow:var(--zm-shadow)}
.zm-vp--hero .zm-vp__ui{justify-content:flex-end}
.zm-vp--hero.zm-vp--rings .zm-vp__ui,.zm-vp--hero.zm-vp--orbit .zm-vp__ui{justify-content:center}
/* copy keeps clear of the panel. Base is !important: .e-con.zm-hero__solo{max-width:860px!important} */
@media(min-width:1101px){.e-con.zm-hero--vp .zm-hero__solo{max-width:min(660px,56%)!important}}
@media(max-width:1100px){.zm-vp--hero{display:none}}

/* ---------- short answer: slim panel beside the paragraph ---------- */
.zm-vp--answer{position:absolute;right:0;top:0;bottom:0;width:calc(100% - 820px - 56px);min-width:260px;aspect-ratio:auto;min-height:0;max-height:none;border-radius:16px}
.zm-vp--answer .zm-vp__ui{padding:20px;justify-content:center;align-items:center}
.zm-vp--answer .zm-vp__ic{width:64px;height:64px;border-radius:18px}
@media(max-width:1199px){.zm-vp--answer{display:none}}

/* ---------- tablet and phone: the panel becomes a band, never a tall empty block ---------- */
@media(max-width:1024px){
  .zm-vp--split{aspect-ratio:auto;min-height:0;height:220px;max-height:none}
  .zm-vp--split .zm-vp__ui{flex-direction:row;align-items:center;justify-content:flex-start;padding:20px 28px}
  .zm-vp--split.zm-vp--rings .zm-vp__ui,.zm-vp--split.zm-vp--orbit .zm-vp__ui{justify-content:center}
  .zm-vp--split .zm-vp__stat,.zm-vp--split .zm-vp__chips{margin:0}
  .zm-vp--split.zm-vp--rings .zm-vp__stat,.zm-vp--split.zm-vp--orbit .zm-vp__stat,.zm-vp--split.zm-vp--rings .zm-vp__chips,.zm-vp--split.zm-vp--orbit .zm-vp__chips{position:static}
}
@media(max-width:767px){
  .zm-vp--split{height:96px;border-radius:16px}
  .zm-vp--split .zm-vp__ui{padding:12px 16px;gap:12px}
  .zm-vp--split .zm-vp__ic{width:56px;height:56px;border-radius:16px}.zm-vp--split .zm-vp__ic svg{width:28px;height:28px}
  .zm-vp--split .zm-vp__stat,.zm-vp--split .zm-vp__chips{display:none}
  .zm-vp--split.zm-vp--rings .zm-vp__stat,.zm-vp--split.zm-vp--orbit .zm-vp__stat{display:none}
}

/* ---------- flat bands: quiet patterns on pseudo elements nothing else uses ---------- */
/* navy hero without the "lines" option (zm-additions.css owns that pattern): dotted field with a slow glow */
.zm-hero--navy:not(.zm-hero--lines)::after{content:"";position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(61,186,196,.26) 1.3px,transparent 1.8px) 0 0/30px 30px;-webkit-mask-image:radial-gradient(60% 80% at 82% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 82% 30%,#000,transparent 75%)}
.zm-hero--navy:not(.zm-hero--lines)>*{position:relative;z-index:1}
/* white hero: faint arcs */
.zm-hero--white::after{content:"";position:absolute;right:-8%;top:-40%;width:620px;aspect-ratio:1;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,transparent 52%,rgba(14,124,134,.09) 52.4%,transparent 53.4%,transparent 63%,rgba(14,124,134,.07) 63.4%,transparent 64.4%,transparent 74%,rgba(14,124,134,.05) 74.4%,transparent 75.4%)}
.zm-hero--white>*{position:relative;z-index:1}
/* navy band */
.e-con.zm-sec--navy{overflow:hidden}
.e-con.zm-sec--navy::after{content:"";position:absolute;inset:-10% -6%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(61,186,196,.2) 1.3px,transparent 1.8px) 0 0/32px 32px;-webkit-mask-image:radial-gradient(55% 90% at 90% 20%,#000,transparent 75%);mask-image:radial-gradient(55% 90% at 90% 20%,#000,transparent 75%)}
.e-con.zm-sec--navy>*{position:relative;z-index:1}
/* mist and tint bands: a very soft dot field in one corner */
.e-con.zm-sec--mist::after,.e-con.zm-sec--tint::after{content:"";position:absolute;right:0;top:0;width:min(46%,560px);height:min(100%,420px);z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(14,124,134,.16) 1.3px,transparent 1.8px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 72%);mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 72%)}
.e-con.zm-sec--mist>*,.e-con.zm-sec--tint>*{position:relative;z-index:1}
/* call to action card: a sweep of dots across the existing gradient */
.zm-cta__in::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(61,186,196,.28) 1.3px,transparent 1.8px) 0 0/30px 30px;-webkit-mask-image:linear-gradient(105deg,transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(105deg,transparent 30%,#000 50%,transparent 70%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(prefers-reduced-motion:no-preference){
  .zm-hero--navy:not(.zm-hero--lines)::after{animation:zm-bg-drift 70s linear infinite alternate}
  .zm-hero--white::after{animation:zm-bg-turn 120s linear infinite}
  .e-con.zm-sec--navy::after{animation:zm-bg-drift 80s linear infinite alternate}
  .zm-cta__in::after{animation:zm-vp-sweep 14s linear infinite}
  .is-off::after,.is-off::before{animation-play-state:paused}
}
@keyframes zm-bg-drift{to{transform:translate3d(-30px,18px,0)}}
@keyframes zm-bg-turn{to{transform:rotate(360deg)}}

/* ---------- grids that would leave a column empty: two cards fill the row ---------- */
.e-con.zm-grid.zm-cols-3:has(>:nth-child(2):last-child),.e-con.zm-grid.zm-cols-4:has(>:nth-child(2):last-child){--zm-cols:2}

@media print{.zm-vp,.zm-hero--vp .zm-vp--hero{display:none}}

/* split sections on the navy theme: copy colours (the base sheet only styles cards and headings there) */
.zm-sec--navy .zm-split__copy .zm-p,.zm-sec--navy .zm-split__copy .zm-p p,.zm-sec--navy .zm-split__copy .zm-checks li{color:#BFD3E4}
.zm-sec--navy .zm-split__copy .zm-p a{color:var(--zm-teal-400)}