/* ============================================================
   Launch announcement bar (launch day, 2026-10-07). One slim,
   dismissible line above the site header on every page and locale:
   the static pages link this file, the React pages import it from
   the [locale] layout (words from the locale's dictionary). Logical
   properties throughout, so /fnb/ar mirrors it.

   Second version (owner, 7 Oct: the first was "boring"): a deep ivy
   ink bar, so it reads as news and not as a cookie notice. Lina's orb
   breathes at the start, a soft light passes over the bar now and
   then (the light that runs round her capsule on /start), and the
   whole line is one link ending in a pill that fills white on hover.
   Reduced motion: everything still, nothing lost.

   A dismissal is remembered in localStorage; an inline head script
   adds html.uh-launch-off before the first paint, so a returning
   visitor never sees it flash.
   ------------------------------------------------------------ */

.uh-launch{
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  height:var(--uh-launch-h);margin:0;padding:0 56px;
  background:#0c1510;
  color:#eef4ef;
  font:500 14px/1.3 var(--font-sans, "Schibsted Grotesk"), system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}
/* A quiet green glow under the words, and the passing light. */
.uh-launch::before{
  content:"";position:absolute;z-index:-1;inset:-140% 14%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(92,182,124,.38), rgba(92,182,124,0) 72%);
  pointer-events:none;
}
/* A hairline of light along the bottom edge, brightest in the middle. */
.uh-launch{
  background:
    linear-gradient(90deg, rgba(166,226,184,0), rgba(166,226,184,.45) 50%, rgba(166,226,184,0)) bottom / 100% 1px no-repeat,
    #0c1510;
}
.uh-launch::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(214,245,224,.10) 48%, rgba(214,245,224,.16) 50%, rgba(214,245,224,.10) 52%, transparent 65%);
  transform:translateX(-100%);
  animation:uh-launch-sweep 9s cubic-bezier(.45,0,.2,1) 1.4s infinite;
  pointer-events:none;
}
@keyframes uh-launch-sweep{
  0%{transform:translateX(-100%)}
  32%,100%{transform:translateX(100%)}
}
:root{--uh-launch-h:42px}
html.uh-launch-off{--uh-launch-h:0px}
html.uh-launch-off .uh-launch{display:none}

.uh-launch-link{
  display:inline-flex;align-items:center;gap:10px;
  min-height:36px;color:inherit;text-decoration:none;
  border-radius:999px;
}
/* Lina's orb: the /start orb's palette, small, breathing. */
.uh-launch-orb{
  position:relative;flex:none;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #f2fff5 0, #a6e2b8 30%, #4f9e6c 65%, #2a6342 100%);
  box-shadow:0 0 10px rgba(134,214,160,.55);
  animation:uh-launch-breathe 2.6s ease-in-out infinite;
}
.uh-launch-orb::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(166,226,184,.45);
  animation:uh-launch-ring 2.6s ease-out infinite;
}
@keyframes uh-launch-breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
@keyframes uh-launch-ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.9);opacity:0}}

.uh-launch-lead{color:#fff;font-weight:600;letter-spacing:-.005em}
.uh-launch-body{
  position:relative;padding-inline-start:12px;color:rgba(238,244,239,.72);
}
.uh-launch-body::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;
  width:1px;height:14px;transform:translateY(-50%);
  background:rgba(238,244,239,.22);
}
.uh-launch-cta{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  height:28px;padding-inline:12px 10px;margin-inline-start:4px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20), 0 1px 0 rgba(255,255,255,.06);
  color:#fff;font-size:13px;font-weight:600;white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.uh-launch-cta svg{display:block;flex:none;transition:transform .2s ease}
.uh-launch-link:hover .uh-launch-cta{background:#fff;color:#0c1510;box-shadow:inset 0 0 0 1px #fff}
.uh-launch-link:hover .uh-launch-cta svg{transform:translateX(2px)}
[dir="rtl"] .uh-launch-cta svg{transform:scaleX(-1)}
[dir="rtl"] .uh-launch-link:hover .uh-launch-cta svg{transform:scaleX(-1) translateX(2px)}
/* /fnb/ar: the page's Arabic face (rtl.css sets --sans). */
[dir="rtl"] .uh-launch{font-family:var(--sans, system-ui), system-ui, sans-serif}

.uh-launch-close{
  position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:0;border-radius:999px;background:transparent;color:rgba(238,244,239,.55);cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.uh-launch-close:hover{background:rgba(255,255,255,.08);color:#fff}
.uh-launch-close svg{display:block}
.uh-launch a:focus-visible,.uh-launch button:focus-visible{outline:2px solid #a6e2b8;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .uh-launch::after,.uh-launch-orb,.uh-launch-orb::after{animation:none}
  .uh-launch-orb::after{opacity:0}
  .uh-launch-cta,.uh-launch-cta svg,.uh-launch-close{transition:none}
}

/* The static pages' header is fixed at the top: while the page sits at
   its top it rests under the bar, then floats up as it already does. */
body:has(> .uh-launch) .site-nav:not(.is-scrolled){top:var(--uh-launch-h)}
body:has(> .uh-launch) .site-nav.menu-open:not(.is-scrolled) nav{max-height:calc(100dvh - 122px - var(--uh-launch-h))}

/* Phones: the orb, the offer and an arrow-only pill on one line
   (the lead is the bar's colour already saying "news"). A longer
   locale line on an app page, whose header is sticky, may wrap and
   the bar grows with it; the static pages' fixed header rests under
   the --uh-launch-h floor. */
@media (max-width:700px){
  :root{--uh-launch-h:48px}
  html.uh-launch-off{--uh-launch-h:0px}
  .uh-launch{justify-content:flex-start;height:auto;min-height:var(--uh-launch-h);padding-block:6px;padding-inline:16px 48px;font-size:13.5px;text-align:start}
  .uh-launch::before{inset:-120% -10% -120% 30%}
  .uh-launch-link{gap:10px;width:100%}
  .uh-launch-lead{display:none}
  .uh-launch-body{flex:1;min-width:0;padding-inline-start:0;color:#fff;font-weight:600}
  .uh-launch-body::before{display:none}
  .uh-launch-cta{width:28px;padding:0;justify-content:center;font-size:0;gap:0;margin-inline-start:auto}
  .uh-launch-close{inset-inline-end:4px;width:40px;height:40px}
}
@media (max-width:360px){
  .uh-launch{font-size:13px}
}

/* Header "Try free" link (desktop): the quiet .nav-studio look. */
.nav-try{white-space:nowrap}