@font-face{
  font-family:'AlinmaDisplay';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/AlinmaDisplay-Regular.ttf') format('truetype');
}

/* ============================================================
   alinma × Visa — «خلّك حاضر في الدوحة وأبوظبي»
   alinma.com product-page language: a deep-blue banner, warm
   off-white ground, white boxes, lavender pill buttons, copper
   highlights. Arabic-first: every block aligns to the reading
   start, and numbers sit in <bdi> so they never flip their units.
   ============================================================ */
:root{
  --blue:#0c2341; --blue-800:#153250; --navy:#002134; --navy-2:#023956;
  --lav:#837fd8; --lav-100:#cfccef; --lav-50:#ecebf9;
  --cop:#d78e7a; --cop-600:#c27a67; --cop-100:#f2e4df; --cop-50:#fcf4f1;
  --paper:#fdf8f5; --ink:#0c2341; --mute:#4a5568; --line:#e8e6ee;
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  --gutter:clamp(20px,5vw,72px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --display:'AlinmaDisplay','IBM Plex Sans Arabic','Jost',system-ui,sans-serif;
  --sans:'IBM Plex Sans Arabic','Jost',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  --shadow:0 10px 30px rgba(12,35,65,.06);
  --shadow-2:0 18px 40px rgba(12,35,65,.12);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;          /* hidden would turn body into a scroll container and stop sticky in Safari */
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
.n{ font-variant-numeric:tabular-nums lining-nums; }
.lc{ text-transform:lowercase; }

.eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--cop); }[dir="ltr"] .eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; }.cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 26px; border-radius:12px;
  background:var(--lav); color:var(--ink); border:2px solid var(--lav);
  text-decoration:none; font-size:15px; font-weight:700; white-space:nowrap;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}.cta:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(131,127,216,.4); }.cta:focus-visible,.race__replay:focus-visible{ outline:3px solid var(--cop); outline-offset:3px; }[dir="rtl"] .cta svg{ transform:scaleX(-1); }