/* Shared cases section: approved square cards, ZTE layout, 1012 site tokens. */
html body #cases.fill-cases{padding-block:var(--wy-sec-pad)}
html body #cases.fill-cases .fill-cases__head{display:flex;justify-content:space-between;align-items:center;gap:var(--wy-s7);margin-block-end:var(--wy-gap-head)}
html body #cases.fill-cases .fill-cases__head .sec-label{margin:0 0 var(--wy-gap-title)}
html body #cases.fill-cases .fill-cases__head h2{margin:0;color:var(--wy-ink);font-size:var(--wy-fs-h1);line-height:var(--wy-lh-head);font-weight:500}
html body #cases.fill-cases .fill-cases__head>.btn{flex:none;align-self:center}
html body #cases.fill-cases .fill-cases__set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wy-s5);align-items:stretch}
html body #cases.fill-cases .fill-cases__set[hidden]{display:none!important}
html body #cases.fill-cases .fill-case{position:relative;isolation:isolate;min-width:0;min-height:0;aspect-ratio:1;overflow:hidden;border-radius:var(--wy-r-2xl);background:var(--wy-d0);color:var(--wy-g0)}
html body #cases.fill-cases .fill-case__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center;opacity:.36;z-index:-1;border-radius:0;display:block}
html body #cases.fill-cases .fill-case--sunseeker .fill-case__scene{object-position:76% center}
html body #cases.fill-cases .fill-case--zte .fill-case__scene{object-position:80% center}
html body #cases.fill-cases .fill-case__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--wy-s5);padding:var(--wy-s5);min-height:0;height:100%;min-width:0}
html body #cases.fill-cases .fill-case__logo{display:flex;align-items:center;width:100%;height:44px;flex:none}
html body #cases.fill-cases .fill-case__brand{width:auto;max-width:100%;height:26px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);border-radius:0;flex:none}
/* CFMOTO's wordmark occupies half the emblem height; match visible lettering. */
html body #cases.fill-cases .fill-case--cfmoto .fill-case__brand{height:44px}
html body #cases.fill-cases .fill-case--zte .fill-case__brand{height:22.4px}
html body #cases.fill-cases .fill-case__story{display:flex;flex-direction:column;gap:var(--wy-s4);width:100%;min-width:0}
html body #cases.fill-cases .fill-case__title{font-size:var(--wy-fs-h2)!important;line-height:var(--wy-lh-head)!important;font-weight:500!important;letter-spacing:0!important;color:var(--wy-g0);margin:0;text-wrap:balance}
html body #cases.fill-cases .fill-case__description{font-size:var(--wy-fs-body)!important;line-height:var(--wy-lh-body)!important;color:var(--wy-g0);margin:0;min-block-size:2lh;max-width:var(--wy-measure);text-wrap:pretty}
html body #cases.fill-cases .fill-case__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wy-s5);margin:0;padding:0;width:100%;background:none}
html body #cases.fill-cases .fill-case__metrics>div{display:flex;flex-direction:column;gap:var(--wy-s2);min-width:0}
html body #cases.fill-cases .fill-case__metrics dt{order:2;font-size:var(--wy-fs-small);line-height:var(--wy-lh-body);color:var(--wy-g0);margin:0;font-weight:400}
html body #cases.fill-cases .fill-case__metrics dd{order:1;font-size:var(--wy-fs-h2);line-height:1.1;color:var(--wy-g0);margin:0;font-weight:500;font-family:var(--wy-font-display);font-variant-numeric:tabular-nums;letter-spacing:var(--wy-ls-num)}
html body #cases.fill-cases .fill-case__more{display:inline-flex;align-items:center;justify-content:center;gap:var(--wy-s3);border:1px solid rgba(255,255,255,.75);border-radius:var(--wy-r-btn);padding:10px 16px;min-height:44px;color:var(--wy-g0);font-size:var(--wy-fs-small)!important;line-height:1!important;font-weight:500;white-space:nowrap;flex:none}
html body #cases.fill-cases .fill-case__more .arr{margin:0;width:14px;height:12px;color:var(--wy-g0)}

/* Full container width, original 24px gutter, square desktop cards. */
html body #cases.fill-cases .fill-cases__set{width:100%}
html body #cases.fill-cases .fill-case--lower .fill-case__story{margin-block-start:auto}
html body #cases.fill-cases .fill-case__more{align-self:flex-end}
/* Preserve the shared section padding instead of letting the tail overlap it. */
html body #cases.fill-cases + .tail{margin-block-start:0}
html body #cases.fill-cases .fill-case__more:focus-visible{outline:2px solid var(--wy-g0);outline-offset:5px}
@media(hover:hover){html body #cases.fill-cases .fill-case__more:hover{background:rgba(255,255,255,.12)}}
@media(max-width:1199px){html body #cases.fill-cases .fill-cases__set{grid-template-columns:repeat(2,minmax(0,1fr))}html body #cases.fill-cases .fill-case{aspect-ratio:auto;min-height:504px}html body #cases.fill-cases .fill-case__content{min-height:504px}}
@media(max-width:767px){
 html body #cases.fill-cases .fill-cases__head{flex-direction:column;align-items:flex-start;gap:var(--wy-s5)}
 html body #cases.fill-cases .fill-cases__head>.btn{align-self:flex-start;margin-block-start:0!important}
 html body #cases.fill-cases .fill-cases__head h2{max-width:none}
 html body #cases.fill-cases .fill-cases__set{grid-template-columns:1fr}
 html body #cases.fill-cases .fill-case,html body #cases.fill-cases .fill-case__content{min-height:504px}
 html body #cases.fill-cases .fill-case__content{padding:var(--wy-s5);gap:var(--wy-s5)}
 html body #cases.fill-cases .fill-case__story{gap:var(--wy-s4)}
 html body #cases.fill-cases .fill-case__metrics{gap:var(--wy-s4)}
}

html body #cases.fill-cases .fill-case__brand-text{font-size:var(--wy-fs-h3);line-height:var(--wy-lh-head);font-weight:500;color:var(--wy-g0)}
html body #cases.fill-cases .fill-case__metrics--three{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wy-s4)}
html body #cases.fill-cases .fill-case__metrics--three>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--wy-s4)}
html body #cases.fill-cases .fill-case__metrics--three>div:last-child dd{grid-column:1;grid-row:1}
html body #cases.fill-cases .fill-case__metrics--three>div:last-child dt{grid-column:2;grid-row:1}
html body #cases.fill-cases .fill-case__metrics dd{white-space:nowrap}
html body #cases.fill-cases .fill-case__brand[src$="nanguang-black.webp"]{height:56px;filter:grayscale(1) invert(1);mix-blend-mode:screen}
html body #cases.fill-cases .fill-case--midea .fill-case__brand{height:36px}
html body #cases.fill-cases .fill-case__metrics dd .kd{display:inline-block;width:.5em;height:.5em;margin-inline-start:.12em;vertical-align:.02em;color:inherit}
html body #cases.fill-cases .fill-case__metrics dd .kd svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html body #cases.fill-cases .fill-case--empty .fill-case__more{margin-block-start:auto}
html body #cases.fill-cases .fill-case[hidden]{display:none!important}
/* Motion changes only the paging track; each resting card keeps its layout. */
html body #cases.fill-cases .fill-cases__viewport{overflow:hidden;min-width:0;overflow-anchor:none}
html body #cases.fill-cases .fill-cases__track{display:flex;align-items:stretch;gap:var(--wy-s5);width:100%;transition:transform var(--wy-dur) var(--wy-ease)}
html body #cases.fill-cases .fill-cases__track.is-primed{will-change:transform}
html body #cases.fill-cases .fill-cases__track>.fill-cases__set{flex:0 0 100%;min-width:0}
html body #cases.fill-cases .fill-cases__track.is-instant{transition:none}
@media(prefers-reduced-motion:reduce){
 html body #cases.fill-cases .fill-cases__track{transition:none}
 html body #cases.fill-cases .fill-cases__track>.fill-cases__set{opacity:0;transition:opacity var(--wy-dur-fast) var(--wy-ease)}
 html body #cases.fill-cases .fill-cases__track>.fill-cases__set.is-active{opacity:1}
}
html body #cases.fill-cases .fill-cases__track.is-instant>.fill-cases__set{transition:none}
/* Canonical About / Milestone control: gray progress track + joined arrows. */
html body #cases.fill-cases .fill-cases__nav{display:grid;grid-template-columns:minmax(calc(88px + var(--wy-s4)),1fr) minmax(0,232px) minmax(calc(88px + var(--wy-s4)),1fr);align-items:center;gap:0!important;margin-top:var(--wy-s6)}
html body #cases.fill-cases .fill-cases__nav .wyprog{grid-column:2;justify-self:center;position:relative;width:100%;max-width:232px;height:2px;margin:0;border-radius:2px;background:var(--wy-g200);overflow:hidden}
html body #cases.fill-cases .fill-cases__arrows{grid-column:3;justify-self:end;display:flex;gap:0;align-items:center}
html body #cases.fill-cases .fill-cases__nav .wyprog i{position:absolute;inset-block:0;left:calc((100% - var(--pw,100%)) * var(--pp,0));width:var(--pw,100%);background:var(--wy-ink);border-radius:2px}
html body #cases.fill-cases .fill-cases__nav button{position:relative;display:grid;place-items:center;width:44px!important;height:44px!important;min-width:44px;padding:0;margin:0!important;border:0!important;border-radius:0!important;background:var(--wy-g50)!important;color:var(--wy-ink)!important;box-shadow:none!important;opacity:1!important;cursor:pointer}
html body #cases.fill-cases .fill-cases__nav button:first-of-type{border-radius:12px 0 0 12px!important}
html body #cases.fill-cases .fill-cases__nav button:last-of-type{border-radius:0 12px 12px 0!important}
html body #cases.fill-cases .fill-cases__nav button+button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--wy-g200)!important}
html body #cases.fill-cases .fill-cases__nav button:hover:not(:disabled){background:var(--wy-g100)!important}
html body #cases.fill-cases .fill-cases__nav button:disabled{color:var(--wy-g300)!important;cursor:default}
html body #cases.fill-cases .fill-cases__nav svg{display:block;width:20px;height:20px;stroke-width:1.8}
html body #cases.fill-cases .fill-cases__nav button:focus-visible{outline:2px solid var(--wy-primary);outline-offset:3px}