/* Six services: desktop 6, tablet 3, phone 2. Arrow space is reserved. */
:root[data-theme] body #app .services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch}
:root[data-theme] body #app .services .service{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;min-width:0;max-width:100%;min-height:164px;padding:18px 18px 42px;box-sizing:border-box;text-align:start}
#app .services .service::after{content:none;display:none}
:root[data-theme] body #app .services .service .service-icon{position:static;flex:0 0 auto;width:36px;height:36px;margin:0;align-self:flex-start}
:root[data-theme] body #app .services .service h3{min-width:0;max-width:100%;width:100%;font-size:18px;line-height:1.8;margin:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty}
#app .services .service .service-arrow{position:absolute;left:16px;bottom:14px;display:grid;place-items:center;width:20px;height:20px;margin:0;padding:0;background:none;border:0;color:var(--ui-accent);pointer-events:none}
.service-arrow svg{display:block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1099px){
 :root[data-theme] body #app .services{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 :root[data-theme] body #app .services{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 :root[data-theme] body #app .services .service{min-height:156px;padding:16px 14px 40px;gap:10px;border-radius:16px}
 :root[data-theme] body #app .services .service .service-icon{width:32px;height:32px}
 :root[data-theme] body #app .services .service h3{font-size:16px;line-height:1.8}
 #app .services .service .service-arrow{left:14px;bottom:12px}
}