/* site-header.css — the marketing site header (2026-10-14).
   The same rules landing.html carries in its own header block, for the pages that carry none:
   the product pages, the blog, and the pages site-shared.js builds a header for.
   Phone menu at max-width:900px; the approved design (centred links, flat buttons) above it. */
  .rbnav{position:sticky;top:0;z-index:99999;background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid #C6E7ED;font-family:'Tajawal',Tahoma,sans-serif}
  .rbnav *{box-sizing:border-box}
  header.rbnav{padding:0;margin:0}
  .rbnav-in{padding:8px 6%}
  .rbnav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px}
  .rbnav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
  .rbnav-logo img{height:38px;width:auto;display:block}
  .rbnav-burger{display:none;margin-inline-start:auto;background:#fff;border:1px solid #C6E7ED;
    border-radius:10px;padding:6px;cursor:pointer;color:#013A42;line-height:0;transition:border-color .15s,background .15s}
  .rbnav-burger:hover{border-color:#036B77;background:#ECF7F9}
  .rbnav-burger svg{width:24px;height:24px;display:block}
  .rbnav-burger .rbnav-x{display:none}
  .rbnav.open .rbnav-burger .rbnav-menu{display:none}
  .rbnav.open .rbnav-burger .rbnav-x{display:block}
  .rbnav-links{display:flex;align-items:center;gap:22px;flex:1;justify-content:flex-end}
  .rbnav-links>a{font-size:14px;color:#587C84;text-decoration:none;font-weight:600;
    transition:color .15s;white-space:nowrap}
  .rbnav-links>a:hover,.rbnav-links>a.rbnav-active{color:#036B77}
  .rbnav-actions{display:flex;gap:10px;align-items:center}
  .rbnav-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;
    border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;font-family:inherit;
    transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;white-space:nowrap;cursor:pointer}
  .rbnav-btn-g{background:#fff;color:#013A42;border:1.5px solid #C6E7ED}
  .rbnav-btn-g:hover{border-color:#036B77;background:#ECF7F9}
  .rbnav-btn-p{background:linear-gradient(135deg,#036B77,#013A42);color:#fff;box-shadow:0 4px 14px rgba(3,107,119,.25)}
  .rbnav-btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(3,107,119,.35)}
  .rbnav-lang{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;
    border:1.5px solid #C6E7ED;color:#036B77;font-size:12.5px;font-weight:800;text-decoration:none;
    letter-spacing:.2px;line-height:1;white-space:nowrap;transition:border-color .15s,background .15s}
  .rbnav-lang:hover{border-color:#036B77;background:#ECF7F9}
  .rbnav-lang-ic{flex-shrink:0;display:block}
  .rbnav-lang-code{letter-spacing:.6px}
  @media (max-width:900px){
    .rbnav-burger{display:inline-flex}
    .rbnav-links{position:absolute;top:100%;inset-inline-start:0;inset-inline-end:0;flex-direction:column;align-items:stretch;
      gap:0;background:#fff;border-bottom:1px solid #C6E7ED;box-shadow:0 14px 34px rgba(1,58,66,.12);
      padding:6px 18px 18px;display:none}
    .rbnav.open .rbnav-links{display:flex}
    .rbnav-links>a{padding:14px 4px;border-bottom:1px solid #ECF7F9;font-size:15.5px}
    .rbnav-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
    .rbnav-btn{padding:13px 18px;font-size:15px}
    .rbnav-lang{justify-content:center;padding:12px;font-size:14px}
  }
  .rbnav-btn-p{background:#014650;border:1px solid #014650;color:#fff;box-shadow:none}
  .rbnav-btn-g{background:#fff;border:1px solid #013A42;color:#013A42}
  @media (min-width:901px){
    .rbnav{border-bottom:0}
    .rbnav-in{padding:20px 5%}
    .rbnav-inner{max-width:none;display:grid;grid-template-columns:1fr repeat(6,auto) 1fr;align-items:center;column-gap:22.5px}
    .rbnav-links{display:contents}
    .rbnav-logo{justify-self:start}
    .rbnav-links>a{font-size:16px;font-weight:700}
    .rbnav-actions{justify-self:end;gap:12px}
    .rbnav-btn{min-width:112px;height:40px;padding:0 16px;border-radius:8px;font-size:14px;display:block;text-align:center;line-height:0}
    /* label on a fixed baseline 24px under the top edge (1px border + 23px strut): it sits in the middle the same
       way on Windows, mac and phones, whatever line height the font reports on each system */
    .rbnav-btn::before{content:'';display:inline-block;height:23px;vertical-align:baseline}
    .rbnav-btn-p{order:1}
    .rbnav-btn-g{order:2}
    .rbnav-actions:has(.rbnav-lang) .rbnav-btn-g{margin-inline-end:12px}
    .rbnav-lang{order:3;margin:0;padding:0;border:0;border-radius:0;color:#014650}
    .rbnav-lang:hover{background:transparent;color:#036B77}
    .rbnav-lang-code{position:relative;top:1px}
  }