/* Getix Translate /clinics v3 (2026-10-31). The page is a copy of the main page (index.html): same sections,
   same markup, same pictures. Only the copy and the people change. Loaded after styles.css and niche.css,
   only on /clinics. This file holds only what the main page and niche.css do not have:
     .cl-fine ............ interpreter line under the hero buttons
     .cl-hero-scene ...... hero picture: the desk from above (.desk, .desk-phone, .desk-mid from niche.css; no tags, 31.10)
                           in place of the laptop of the main page; .cl-arms-olena / .cl-arms-marta colour the arms
     .cl-voice ........... faint sound rings behind the flat phone (.voice from niche.css)
     .pp-marta .pp-emma .pp-klaus .pp-teal .pp-navy .pp-lilac ... clinic people (colours for the sprite symbols
                           p-doctor, p-doctor-specs, p-scrubs, p-earbuds)
     .cl-slide ........... mode 03 slide: a dental implant in three steps
   The v2 version of this file (separate template, 27.10) is replaced; the v2 page and its CSS are kept as backups. */

/* ---------- hero ---------- */
.cl-fine{margin:14px 0 0;max-width:58ch;font-size:.85rem;line-height:1.5;color:var(--w-40)}
.cl-hero-scene .desk{margin-top:14px}
.cl-desk .panes.face .pane:first-child{transform:rotate(180deg)}
.cl-arms-olena{--sleeve:#c8973c;--cuff:#ad8232;--skin:#f1d2b8;--skin-dk:#dcb394}
.cl-arms-marta{--sleeve:#e9edf3;--cuff:#8ecae6;--skin:#c99470;--skin-dk:#b37f5d}
.cl-voice{--vs:74%}
.cl-voice i{border-width:1.5px;border-color:rgba(54,204,255,.34)}

/* ---------- modes ---------- */
/* clinic people: Marta (coat over light blue scrubs, headset), Emma (grey hoodie, earbuds),
   Klaus (coat, glasses, headset), assistants in teal, navy and lilac scrubs */
.tile .pp-marta{--skin:#c99470;--skin-dk:#b37f5d;--hair:#2b1f17;--coat:#f4f6f8;--coat-dk:#c9d2de;--scrub:#8ecae6;--gear:#2a3140}
.tile .pp-emma{--skin:#f1d2b8;--skin-dk:#dcb394;--hair:#8a5a2b;--shirt:#9aa3ad}
.ctile.u1 .pp.pp-klaus{--skin:#f0c9a8;--skin-dk:#dcb08f;--hair:#a39a90;--coat:#f4f6f8;--coat-dk:#c9d2de;--scrub:#1f3b63;--gear:#2a3140}
.ctile.u2 .pp.pp-teal{--shirt:#2a9d8f}
.ctile.u3 .pp.pp-navy{--shirt:#1f3b63}
.ctile.u4 .pp.pp-lilac{--shirt:#b8a1d9}

/* mode 03 slide: a dental implant in three steps (post, abutment, crown) instead of the bar chart */
.slide.cl-slide{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.cl-slide-t{display:block;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:5.4cqw;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#10151d}
.cl-implant{display:block;flex:none;width:100%;height:auto}
.cl-implant .bone rect{fill:#e2e8f1}
.cl-implant .gum rect{fill:#f3d2d8}
.cl-implant .post rect{fill:#8a97ab}
.cl-implant .thread path{fill:none;stroke:#5d6a80;stroke-width:1.6}
.cl-implant .abut path{fill:#c3cddb;stroke:#5d6a80;stroke-width:1.4;stroke-linejoin:round}
.cl-implant .crown{fill:#fff;stroke:#1c81e3;stroke-width:2.6;stroke-linejoin:round}
.cl-implant .arrow path{fill:none;stroke:#1c81e3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cl-implant .lbl text{font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:13px;font-weight:700;fill:#4a5568;text-anchor:middle}