/* The audience switch on a phone (Ben, 5.10.2026): five audiences no longer fit in one row, so on a
   narrow screen the bar above the page goes, and a button beside the menu button opens the list of
   Klinix systems. Built by /assets/aud-select.js from the links of the bar itself - a page without
   JavaScript keeps the bar. Above 760px nothing here applies. */
.audsel{display:none}
@media(max-width:760px){
  .js-aud .aud{display:none}
  .js-aud .nav .in>.btn-p{display:none}
  .js-aud .topbar{position:relative}
  .js-aud .topbar .in{display:flex;align-items:center}
  /* the landing pages: the bar's one visible item on a phone was "התחילו עכשיו" - the switch takes its place (Ben, 5.10) */
  .js-aud .topbar .in>nav{display:none}
  .audsel{display:block;margin-inline-start:auto;flex:none;min-width:0}
  .audsel-btn{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:38px;padding:6px 11px;border:1px solid #CFD8EE;border-radius:999px;
    background:var(--accsoft,#EDF4FF);color:var(--acc-ink,#3D6DC3);font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer}
  .audsel-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .audsel-btn svg.ch{width:12px;height:12px;stroke-width:2.4;transition:transform .15s}
  .audsel-btn[aria-expanded="true"] .ch{transform:rotate(180deg)}
  .audsel-btn:focus-visible{outline:2px solid var(--acc-ink,#3D6DC3);outline-offset:2px}
  .audsel-menu{position:absolute;top:calc(100% + 6px);inset-inline:10px;z-index:90;background:#fff;border:1px solid #CFD8EE;border-radius:18px;
    box-shadow:0 16px 34px rgba(22,53,126,.2);padding:8px}
  .audsel-menu[hidden]{display:none}
  .js-aud .audsel-menu a{display:flex;margin:0;border:0;background:none;box-shadow:none;min-height:0;white-space:normal;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--ink,#141A33);font-size:14px;font-weight:700;text-align:start}
  .js-aud .audsel-menu a .ic{width:32px;height:32px;border-radius:10px;background:var(--accsoft,#EDF4FF);color:var(--acc-ink,#3D6DC3);display:grid;place-items:center;flex:none}
  .js-aud .audsel-menu a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .js-aud .audsel-menu a.on{background:var(--accsoft,#EDF4FF)}
  .js-aud .audsel-menu a.on .ic{background:var(--acc-ink,#3D6DC3);color:#fff}
  .js-aud .audsel-menu a em{margin-inline-start:auto;font-style:normal;font-size:10.5px;font-weight:700;color:var(--acc-ink,#3D6DC3)}
  .js-aud .audsel-menu a:focus-visible{outline:2px solid var(--acc-ink,#3D6DC3);outline-offset:1px}
  /* the tag beside the logo says what the button now says - on a narrow phone only one of them fits */
  .js-aud .nav .logo .bt{white-space:nowrap}
  /* the menu button sits right beside it */
  .js-aud .nav .in{gap:12px}
  .js-aud .nav .burger{margin-inline-start:0}
}
@media(max-width:430px){
  .js-aud .nav .logo .bt{display:none}
}
@media(max-width:350px){
  .audsel-btn{font-size:11px;padding:6px 8px;gap:4px}
  .audsel-btn svg:not(.ch){display:none}
  .js-aud .nav .in{gap:8px;padding-inline:14px}
}

/* the phone menu: a coloured line icon beside every item (Ben, 5.10 - tools/site/menu_icons.py) */
.mnav a:not(.btn){display:flex;align-items:center;gap:12px}
.mnav .mi{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the menu's own sign-up button: ".mnav a" was painting its white label dark */
.mnav a.btn-p{color:#fff}

/* the phone: the bar above the page is gone, and the hero no longer needs the air that separated it from two rows of header (Ben, 5.10) */
@media(max-width:760px){header.hero{padding-top:20px}}