/* ==========================================================================
   Vazari landing page
   Neutral, image-led layout. Logical properties throughout so Arabic (RTL)
   mirrors cleanly. Motion is limited to hover states and tab fades.
   ========================================================================== */

/* Self-hosted fonts (OFL), Latin and Arabic subsets only. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #FFFFFF;
  --gray: #F1EFEB;
  --gray-2: #E8E5E0;
  --line: #E2DED8;
  --ink: #1E1A17;
  --ink-2: #5B5550;
  --ink-3: #8F8983;
  --dark: #3A2E29;
  --dark-hover: #2A211D;

  --manar: #E39A35;
  --hala: #EC6E68;
  --basira: #2D4A98;

  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Inter Tight", "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --head-weight: 450;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[lang="ar"] {
  --font: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-head: "IBM Plex Sans Arabic", "Inter Tight", system-ui, sans-serif;
  --head-weight: 500;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, blockquote { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Arabic letters must never be tracked: it breaks joining. */
:lang(ar) { letter-spacing: 0 !important; }

.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .i--dir { transform: scaleX(-1); }

.wrap { width: min(1360px, 100% - 80px); margin-inline: auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s, scale .15s;
}
.pill:active { scale: .97; }
/* Arrows lean the way they point. `translate` stacks with the RTL flip on .i--dir. */
.i--dir { transition: translate .3s cubic-bezier(.16, 1, .3, 1); }
:is(.pill, .announce a):hover .i--dir { translate: 3px 0; }
[dir="rtl"] :is(.pill, .announce a):hover .i--dir { translate: -3px 0; }
.pill--lg { height: 60px; padding: 0 30px; font-size: 17px; }
.pill--dark { background: var(--dark); color: #fff; }
.pill--dark:hover { background: var(--dark-hover); }
.pill--gray { background: var(--gray); }
.pill--gray:hover { background: var(--gray-2); }
.pill--white { background: #fff; }
.pill--white:hover { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .25); }
.pill--glass {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(30, 26, 23, .18);
  backdrop-filter: blur(8px);
}
.pill--glass:hover { background: rgba(255, 255, 255, .7); }

.circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  transition: background-color .2s;
}
.circle:hover { background: var(--gray-2); }
.circle--line { width: 64px; height: 64px; background: #fff; border: 1px solid var(--line); }
.circle--line:hover { background: var(--gray); }
.circle--line:disabled { opacity: .4; cursor: default; }

/* ---------- Top bar (news + header): sticky, slides away on scroll down ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Coming back: slow, eased glide with a fade. */
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.topbar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  /* Going away: quicker, so it gets out of the way. */
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .1s;
}

/* ---------- Announcement ---------- */
.announce {
  background: var(--dark);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
/* Items share one grid cell, so the bar is as tall as the longest message and never jumps. */
.announce__list { display: grid; margin: 0; padding: 0; list-style: none; }
.announce__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
.announce__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease, transform .45s ease;
}
.announce__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  text-align: center;
}
.announce img { flex: none; border-radius: 50%; }
.announce__mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--dark); }
.announce__mark svg { width: 13px; height: auto; }
.announce__more {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 4px;
  color: rgba(255, 255, 255, .72);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce a:hover .announce__more { color: #fff; }
.announce .i { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.header {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  transition: box-shadow .2s;
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header__bar { display: flex; align-items: center; gap: 8px; height: 96px; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 60px;
  padding-inline: 24px 6px;
  border-radius: 999px;
  background: var(--gray);
}
.nav-pill .logo { margin-inline-end: 20px; }
/* Each link is a full-height pill, so hovering anywhere around the word works. */
.nav-link {
  display: flex;
  align-items: center;
  height: 48px;
  padding-inline: 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .2s, color .2s;
}
.nav-link:hover { background: #fff; }

/* Brand lockup (mark + traced wordmark, see #vz-word). Never mirrored in Arabic. */
.logo { display: inline-flex; align-items: center; color: var(--ink); }
.logo__svg { display: block; width: auto; height: 24px; aspect-ratio: 268.6 / 64; }
/* The mark's two halves draw toward each other, like listening in (logo hover, Engine hub). */
.mark-l { --dx: 5px; }
.mark-r { --dx: -5px; }
@keyframes mark-listen { to { transform: translateX(var(--dx)); } }

.header__right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
/* Language switch: both options visible, a white thumb slides to the active one.
   Kept LTR in both languages so the thumb always travels the same way. */
.lang {
  --pad: 5px;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  height: 60px;
  padding: var(--pad);
  border: 0;
  border-radius: 999px;
  background: var(--gray);
  cursor: pointer;
  direction: ltr;
  isolation: isolate;
  transition: background-color .2s;
}
.lang:hover { background: var(--gray-2); }
.lang__thumb {
  position: absolute;
  inset-block: var(--pad);
  left: var(--pad);
  z-index: -1;
  width: calc(50% - var(--pad));
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(30, 26, 23, .35);
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
html[lang="ar"] .lang__thumb { transform: translateX(100%); }
.lang__opt {
  display: grid;
  place-items: center;
  min-width: 54px;
  padding-inline: 12px;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 600;
  transition: color .3s;
}
.lang__opt:lang(en) { font-family: "Inter", sans-serif; letter-spacing: .04em; }
.lang__opt:lang(ar) { font-family: "IBM Plex Sans Arabic", sans-serif; }
.lang:hover .lang__opt { color: var(--ink-2); }
html:not([lang="ar"]) .lang__opt:lang(en),
html[lang="ar"] .lang__opt:lang(ar) { color: var(--ink); }

/* Language change (View Transitions, started in main.js). The layout mirrors, so instead of
   jumping, the page fades through: the old one is gone before the new one drifts in a few
   pixels the way the switch travels (no double exposure), and the switch glides to its new
   spot while its thumb slides. The dark news bar crossfades on its own so it never blinks.
   The pseudo-elements read the new dir. */
:root { --lang-drift: 10px; }
:root[dir="rtl"] { --lang-drift: -10px; }
::view-transition-old(root) { animation: lang-out .15s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: lang-in .3s cubic-bezier(0, 0, .2, 1) .12s both; }
::view-transition-old(lang-news),
::view-transition-new(lang-news) { animation-duration: .3s; }
::view-transition-group(lang-switch),
::view-transition-old(lang-switch),
::view-transition-new(lang-switch) { animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes lang-out { to { opacity: 0; transform: translateX(var(--lang-drift)); } }
@keyframes lang-in { from { opacity: 0; transform: translateX(calc(var(--lang-drift) * -1)); } }
.header .pill { height: 60px; padding: 0 26px; }

.burger { display: none; }
.burger .i { width: 22px; height: 22px; }
.burger .i--close { display: none; }
.burger[aria-expanded="true"] .i--open { display: none; }
.burger[aria-expanded="true"] .i--close { display: block; }

.menu {
  display: grid;
  padding: 8px 20px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.menu[hidden] { display: none; }
.menu a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; }
.menu a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero { padding-top: 4px; }
.hero__card {
  position: relative;
  height: 680px;
  overflow: hidden;
  border-radius: 40px;
  background:
    radial-gradient(42% 60% at 76% 62%, rgba(255, 244, 230, .9), transparent 70%),
    linear-gradient(165deg, #EFE8DE 0%, #E7D9C7 55%, #DEC9B2 100%);
  isolation: isolate;
}
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .14;
  pointer-events: none;
}

.hero__text {
  position: absolute;
  inset-inline-start: 48px;
  bottom: 48px;
  z-index: 2;
  max-width: 540px;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: 60px;
  font-weight: var(--head-weight);
  line-height: 1.04;
  letter-spacing: -.035em;
}
html[lang="ar"] .hero h1 { max-width: 440px; font-size: 50px; line-height: 1.3; }
.hero__text p { max-width: 480px; margin-top: 18px; color: var(--ink-2); font-size: 20px; line-height: 1.4; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Who does what: the coworkers stand on the right, and a glass card above them plays one scene
   per coworker in turn (main.js moves it over whoever's turn it is). */
.hero__show {
  position: absolute;
  inset-inline-end: 56px;
  bottom: 0;
}
.hero__people { display: flex; align-items: flex-end; }
.person { position: relative; flex: none; }
.person + .person { margin-inline-start: -34px; }
.person::before {
  content: "";
  position: absolute;
  inset: 18% -18% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  opacity: .35;
}
.person img { width: auto; }
.person--basira { --glow: var(--basira); }
.person--manar  { --glow: var(--manar); }
.person--hala   { --glow: var(--hala); }
/* Same scale for all three so they keep the proportions of the original artwork. */
.hero__people .person--basira img { height: 418px; }
.hero__people .person--manar img  { height: 450px; }
.hero__people .person--hala img   { height: 421px; }

/* The coworkers are buttons: whoever's turn it is steps forward, the others wait a little behind. */
.hero__people .person {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__people .person img { transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .6s ease, opacity .6s ease; }
.hero__people .person:not(.is-active) img { opacity: .74; filter: saturate(.55); }
.hero__people .person:not(.is-active):hover img { opacity: .92; filter: saturate(.85); }
.hero__people .person.is-active img { transform: translateY(-8px); }
.hero__people .person::before { opacity: .18; transition: opacity .6s ease; }
.hero__people .person.is-active::before { opacity: .5; }
.hero__people .person:focus-visible { outline: none; }
.hero__people .person:focus-visible .person__tag { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Liquid glass: a frosted, slightly saturated backdrop with a bright rim on top and a soft sheen. */
.lglass {
  border: 1px solid rgba(255, 255, 255, .6);
  background: linear-gradient(145deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .46) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    inset 0 0 22px rgba(255, 255, 255, .22),
    0 24px 50px -24px rgba(70, 45, 25, .5);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
}
.lglass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 15% 0%, rgba(255, 255, 255, .55), transparent 60%);
  opacity: .7;
  pointer-events: none;
}

/* Name tag on each coworker */
.person__tag {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  translate: -50% 0;
  transition: background-color .5s ease, color .5s ease, translate .8s cubic-bezier(.16, 1, .3, 1);
}
.person__tag b { position: relative; color: var(--ink); font-size: 14px; font-weight: 600; transition: color .5s ease; }
.person__tag > span { position: relative; }
.hero__people .person.is-active .person__tag { background: rgba(33, 26, 22, .84); color: rgba(255, 255, 255, .75); translate: -50% -8px; }
.hero__people .person.is-active .person__tag b { color: #fff; }

/* The scene card */
.hero__stage {
  --x: 0px;
  position: absolute;
  left: 0;
  bottom: calc(100% - 18px);
  z-index: 3;
  display: grid;
  width: 330px;
  padding: 16px 16px 24px;
  border-radius: 28px;
  font-size: 14px;
  line-height: 1.45;
  transform: translateX(var(--x));
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.hero__stage::after {
  content: "";
  position: absolute;
  left: calc(var(--tail, 50%) - 8px);
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-right: 1px solid rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  border-radius: 0 0 4px;
  background: rgba(255, 255, 255, .5);
  transform: rotate(45deg);
  transition: left .9s cubic-bezier(.65, 0, .35, 1);
}
.hero__scene {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .5s ease, visibility 0s .35s;
}
.hero__scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease .25s, transform .7s cubic-bezier(.16, 1, .3, 1) .25s;
}
.scene-head { display: flex; align-items: center; gap: 10px; }
.scene-head__av { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.scene-head > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.scene-head b { font-size: 15px; font-weight: 600; }
.scene-head small { color: var(--ink-2); font-size: 12px; }
.scene-head__app {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-inline-start: auto;
  border-radius: 50%;
  color: #fff;
}
.scene-head__app svg { width: 15px; height: 15px; fill: currentColor; }
.scene-head__app--ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.scene-head__app--maps { background: #fff; color: #EA4335; }
.scene-head__app--wa { background: #25D366; }
.scene-msg {
  justify-self: start;
  max-width: 92%;
  padding: 9px 13px;
  border-radius: 16px;
  border-end-start-radius: 5px;
  background: rgba(255, 255, 255, .74);
}
.scene-msg--out {
  justify-self: end;
  border-radius: 16px;
  border-end-end-radius: 5px;
  background: rgba(33, 26, 22, .86);
  color: #fff;
}
.scene-msg__who { font-weight: 600; }
.scene-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--ink-2);
}
.scene-search .i { width: 16px; height: 16px; }
.scene-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scene-rank li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .56); }
.scene-rank b { width: 14px; color: var(--ink-3); font-weight: 600; }
.scene-rank span { flex: 1; }
.scene-rank small { color: var(--ink-2); font-size: 12px; }
.scene-rank em { padding: 2px 8px; border-radius: 999px; background: #2F7D4F; color: #fff; font-size: 12px; font-style: normal; font-weight: 600; }
.scene-rank .is-you { background: rgba(33, 26, 22, .86); color: #fff; }
.scene-rank .is-you b { color: rgba(255, 255, 255, .7); }
.scene-done { display: flex; align-items: center; gap: 8px; color: #2F7D4F; font-size: 13px; font-weight: 600; }
.scene-done .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #2F7D4F; color: #fff; stroke-width: 3; }

/* Autoplay progress: the bar fills, and when it's full main.js moves on to the next coworker. */
.hero__timer {
  position: absolute;
  inset-inline: 20px;
  bottom: 10px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(33, 26, 22, .1);
}
.hero__timer i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c, var(--dark));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[dir="rtl"] .hero__timer i { transform-origin: 100% 50%; }
@keyframes hero-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Channels ---------- */
.channels { padding: 56px 0 8px; text-align: center; }
.channels p { margin-bottom: 26px; color: var(--ink-3); font-size: 15px; }
.channels ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.channels li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #A39D97;
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.channels svg { width: 24px; height: 24px; fill: currentColor; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; }
.section--gray { background: var(--gray); }

.sec-head { max-width: 860px; margin: 0 auto 48px; text-align: center; }
.sec-head h2 {
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: var(--head-weight);
  line-height: 1.08;
  letter-spacing: -.03em;
}
html[lang="ar"] .sec-head h2 { font-size: 46px; line-height: 1.35; }
.sec-head p { max-width: 620px; margin: 16px auto 0; color: var(--ink-2); font-size: 17px; }
.sec-head .pill { margin-top: 26px; }

/* Segmented tabs */
.seg {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 6px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--gray);
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px -12px rgba(30, 26, 23, .3);
}
.seg--wide { width: 100%; justify-content: space-between; }

/* Sliding marker: one white pill glides between tabs instead of each tab lighting up on its own. */
.seg.has-thumb { position: relative; }
.seg.has-thumb button { position: relative; z-index: 1; transition: color .35s ease; }
.seg.has-thumb button[aria-selected="true"] { background: transparent; box-shadow: none; }
.seg.has-thumb button:not([aria-selected="true"]):hover { color: var(--ink); background: rgba(255, 255, 255, .45); }
.seg.has-thumb button:focus-visible { outline: 2px solid rgba(30, 26, 23, .22); outline-offset: -3px; }
.seg__thumb {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px -12px rgba(30, 26, 23, .3);
  pointer-events: none;
}
.seg__thumb.is-ready { transition: transform .55s cubic-bezier(.32, .72, 0, 1), width .55s cubic-bezier(.32, .72, 0, 1); }
/* Coworker tabs switch more slowly and softly than the industry tabs. */
.seg--people .seg__thumb.is-ready { transition-duration: .9s; transition-timing-function: cubic-bezier(.45, 0, .2, 1); }
.seg--people.has-thumb button { transition-duration: .6s; }

.seg--people button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 296px;
  padding: 10px;
  padding-inline-end: 40px;
  text-align: start;
}
.seg--people img { width: 56px; height: 56px; border-radius: 50%; }
.seg--people span { display: flex; flex-direction: column; line-height: 1.3; }
.seg--people b { font-size: 20px; font-weight: 500; color: var(--ink); }
.seg--people small { color: var(--ink-3); font-size: 15px; }
.seg--people button:not([aria-selected="true"]) b { color: var(--ink-2); }

/* ---------- Coworker panels ---------- */
.cw {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--gray);
  isolation: isolate;
  animation: fade .7s ease;
}
.cw[hidden] { display: none; }
.cw::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(24% 50% at 78% 45%, var(--glow), transparent 70%);
  opacity: .22;
}
[dir="rtl"] .cw::before { transform: scaleX(-1); }
.cw--basira { --glow: var(--basira); }
.cw--manar  { --glow: var(--manar); }
.cw--hala   { --glow: var(--hala); }

.cw__copy { position: relative; z-index: 2; max-width: 588px; padding: 44px 0 0; padding-inline-start: 48px; }
.cw__copy h3 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: var(--head-weight);
  line-height: 1.15;
  letter-spacing: -.025em;
}
html[lang="ar"] .cw__copy h3 { font-size: 28px; line-height: 1.4; }
.cw__copy p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cw__copy .pill { margin-top: 18px; height: 44px; }

.cw__person {
  position: absolute;
  bottom: -40px;
  inset-inline-end: 12%;
  height: 560px;
  width: auto;
}

.cw__cards {
  position: absolute;
  inset-inline: 48px;
  bottom: 32px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw__cards li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 112px;
  padding: 18px 20px;
  border: 1px solid rgba(30, 26, 23, .1);
  border-radius: 20px;
  background: rgba(241, 239, 235, .62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 17px;
  line-height: 1.25;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.cw__cards li:hover {
  border-color: var(--glow);
  background: var(--glow);
  color: #fff;
  box-shadow: 0 14px 30px -14px var(--glow);
  transform: translateY(-3px);
}
.cw__cards .i { width: 20px; height: 20px; }

/* Value-card popovers: a live example of the work above a card (a review reply, a call, a ranking).
   With a mouse on the wide layout they wait for a hover on their card. Basira's post idea (.cw__post)
   is the one that also stays on show where there's no hover; the rest only exist as hovers. */
.cw__pop {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 12px;
  width: 272px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(30, 26, 23, .35);
  font-size: 14px;
  line-height: 1.45;
}
.cw__pop:not(.cw__post) { display: none; }
.cw__post {
  inset-inline-start: 660px;
  bottom: 168px;
  z-index: 2;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cw__pop-head { display: flex; align-items: center; gap: 10px; }
.cw__pop-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cw__pop-head b { font-weight: 600; }
.cw__pop-head small { color: var(--ink-3); font-size: 12px; }
.cw__pop-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
}
.cw__pop-icon svg { width: 17px; height: 17px; }
.cw__pop-icon svg:not(.i) { fill: currentColor; }
.cw__pop-icon--ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.cw__pop-icon--wa { background: #25D366; }
.cw__pop-icon--green { background: #2F7D4F; }
.cw__pop-icon--alert { background: #C2413C; }
.cw__pop-icon--avatar { background: var(--hala); }
.cw__pop-icon--light,
.cw__pop-icon--maps { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.cw__pop-icon--maps { color: #EA4335; }

.cw__pop-text { padding: 10px 12px; border-radius: 14px; background: var(--gray); font-size: 15px; }
.cw__pop-handle { font-weight: 600; }
.cw__pop-reply {
  padding: 10px 12px;
  border-radius: 14px;
  border-start-end-radius: 4px;
  background: var(--dark);
  color: #fff;
}
.cw__pop-answer { color: var(--ink-2); }
.cw__pop-note { color: var(--ink-3); font-size: 12px; }
.cw__pop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cw__pop-actions span { padding: 7px 12px; border-radius: 999px; background: var(--gray); font-size: 13px; font-weight: 500; }
.cw__pop-actions .cw__pop-go { background: var(--dark); color: #fff; }
.cw__pop-actions .cw__pop-ok { background: #E3F1E7; color: #2F7D4F; }
.cw__pop-stars { color: #E39A35; letter-spacing: 1px; }
.cw__pop-stars i { color: #D9D3CC; font-style: normal; }
.cw__pop-stars--big { display: block; margin-top: 6px; font-size: 20px; letter-spacing: 4px; }

/* Crisis radar: the spike and the last hours as bars */
.cw__pop-spike { display: flex; align-items: flex-end; gap: 10px; }
.cw__pop-spike b { color: #C2413C; font-family: "Inter Tight", sans-serif; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.cw__pop-spike > span:not(.cw__pop-bars) { max-width: 76px; color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.cw__pop-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-inline-start: auto; }
.cw__pop-bars i { width: 7px; height: var(--h); border-radius: 2px; background: #EBCBC7; }
.cw__pop-bars i:nth-last-child(-n + 3) { background: #C2413C; }

/* Map rankings */
.cw__pop-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cw__pop-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--gray); font-size: 13px; }
.cw__pop-rank b { width: 14px; color: var(--ink-3); font-weight: 600; }
.cw__pop-rank span { flex: 1; }
.cw__pop-rank small { color: var(--ink-2); font-size: 12px; }
.cw__pop-rank em { margin-inline-start: 4px; color: #2F7D4F; font-style: normal; font-weight: 600; }
.cw__pop-rank .is-you { background: var(--dark); color: #fff; }
.cw__pop-rank .is-you :is(b, small) { color: rgba(255, 255, 255, .75); }
.cw__pop-rank .is-you em { color: #8FE0A8; }

/* Competitor watch: share of mentions as bars */
.cw__pop-share { display: grid; gap: 6px; margin: -4px 0 0; padding: 0; list-style: none; }
.cw__pop-share li {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gray);
  font-size: 13px;
  isolation: isolate;
}
.cw__pop-share li::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: var(--w);
  background: #E2DCD4;
}
.cw__pop-share b { font-weight: 600; }
.cw__pop-share .is-you { background: #DDE1EE; }
.cw__pop-share .is-you::before { background: var(--basira); }
.cw__pop-share .is-you span { color: #fff; font-weight: 600; }

.cw__pop-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 13px; }
.cw__pop-rows li { display: flex; align-items: center; gap: 8px; }
.cw__pop-rows svg { flex: none; width: 16px; height: 16px; color: var(--ink); }
.cw__pop-rows svg:not(.i) { fill: currentColor; }

/* Call waveform */
.cw__pop-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.cw__pop-wave i { flex: 1; height: 40%; border-radius: 2px; background: #2F7D4F; }
.cw__pop-wave i:nth-child(3n) { height: 75%; }
.cw__pop-wave i:nth-child(4n + 1) { height: 100%; }
.cw__pop-wave i:nth-child(5n + 2) { height: 55%; }

/* Cards with an example behind them get a small dot, so people know there's more on hover. */
@media (hover: hover) and (min-width: 1025px) {
  .cw__cards li[data-pop] { position: relative; }
  .cw__cards li[data-pop]::after {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--glow);
    transition: background-color .25s;
  }
  .cw__cards li[data-pop]:hover::after { background: #fff; }

  /* Each popover sits centred over its card: --n is the card's position (0 to 4) in the row of five. */
  .cw__pop,
  .cw__pop:not(.cw__post) {
    display: grid;
    inset-inline-start: calc(48px + var(--n) * ((100% - 176px) / 5 + 20px) + ((100% - 176px) / 5 - 272px) / 2);
    bottom: 160px;
    z-index: 3;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s .2s;
  }
  .cw:has(.cw__cards li:nth-child(1)[data-pop]:hover) .cw__pop[data-card="1"],
  .cw:has(.cw__cards li:nth-child(2)[data-pop]:hover) .cw__pop[data-card="2"],
  .cw:has(.cw__cards li:nth-child(3)[data-pop]:hover) .cw__pop[data-card="3"],
  .cw:has(.cw__cards li:nth-child(4)[data-pop]:hover) .cw__pop[data-card="4"],
  .cw:has(.cw__cards li:nth-child(5)[data-pop]:hover) .cw__pop[data-card="5"],
  .cw__pop:hover {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
  }
  /* Tail pointing at the card, and an invisible bridge so the pointer can travel onto the popover. */
  .cw__pop::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - 7px);
    bottom: -7px;
    width: 14px;
    height: 14px;
    border-radius: 0 0 4px;
    background: #fff;
    transform: rotate(45deg);
  }
  .cw__pop::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 32px; }
}
@media (hover: hover) and (min-width: 1025px) and (max-width: 1240px) {
  .cw__pop { bottom: 152px; } /* cards are 8px shorter here */
}
@media (hover: hover) and (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .cw__pop {
    transform: translateY(10px) scale(.94);
    transform-origin: 50% 100%;
    transition: opacity .2s ease, visibility 0s .2s, transform .3s ease;
  }
  .cw:has(.cw__cards li:nth-child(1)[data-pop]:hover) .cw__pop[data-card="1"],
  .cw:has(.cw__cards li:nth-child(2)[data-pop]:hover) .cw__pop[data-card="2"],
  .cw:has(.cw__cards li:nth-child(3)[data-pop]:hover) .cw__pop[data-card="3"],
  .cw:has(.cw__cards li:nth-child(4)[data-pop]:hover) .cw__pop[data-card="4"],
  .cw:has(.cw__cards li:nth-child(5)[data-pop]:hover) .cw__pop[data-card="5"],
  .cw__pop:hover {
    transform: none;
    transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
  }
  /* The call waveform moves while its popover is open. */
  .cw__pop-wave i { transform-origin: 50% 50%; animation: pop-wave .9s ease-in-out infinite alternate; }
  .cw__pop-wave i:nth-child(2n) { animation-delay: -.3s; }
  .cw__pop-wave i:nth-child(3n) { animation-delay: -.6s; }
}
@keyframes pop-wave { to { transform: scaleY(.35); } }

/* ---------- Vazari Engine (customer cycle) ---------- */
.os {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.os__steps { display: grid; gap: 8px; }
.os__step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding: 22px 28px;
  border: 0;
  border-radius: 28px;
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color .45s ease, box-shadow .45s ease;
}
.os__step:focus-visible { outline-color: rgba(30, 26, 23, .3); outline-offset: 2px; }
.os__step img { width: 30px; height: 30px; margin-top: 5px; border-radius: 50%; opacity: .55; filter: grayscale(1); transition: opacity .45s ease, filter .45s ease; }
.os__step > span { display: flex; flex-direction: column; }
.os__step b {
  color: var(--ink-3);
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: var(--head-weight);
  line-height: 1.2;
  letter-spacing: -.02em;
  transition: color .45s ease;
}
/* Description unfolds smoothly: the row animates from 0fr to 1fr. */
.os__desc {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  opacity: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.45;
  transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1), padding-top .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
.os__desc > span { min-height: 0; overflow: hidden; }
.os__step:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .45); }
.os__step:hover b { color: var(--ink-2); }
.os__step[aria-selected="true"] { background: #fff; box-shadow: 0 24px 48px -28px rgba(30, 26, 23, .35); }
.os__step[aria-selected="true"] b { color: var(--ink); }
.os__step[aria-selected="true"] .os__desc { grid-template-rows: 1fr; padding-top: 8px; opacity: 1; transition-delay: 0s, 0s, .1s; }
.os__step[aria-selected="true"] img { opacity: 1; filter: none; }

.os__stage {
  position: relative;
  height: 690px;
  overflow: hidden;
  border-radius: 40px;
  background:
    radial-gradient(38% 46% at 16% 12%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(30% 40% at 64% 4%, rgba(40, 34, 30, .32), transparent 70%),
    radial-gradient(26% 34% at 92% 30%, rgba(40, 34, 30, .22), transparent 70%),
    radial-gradient(46% 50% at 82% 92%, rgba(255, 255, 255, .26), transparent 70%),
    radial-gradient(34% 40% at 6% 88%, rgba(40, 34, 30, .2), transparent 70%),
    linear-gradient(160deg, #9C968F 0%, #ADA79F 45%, #948E87 100%);
  isolation: isolate;
}
.os__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .22;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  --scene-gap: 36px;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  column-gap: var(--scene-gap);
  align-items: center;
  padding: 48px;
}
.scene[hidden] { display: none; }
/* Cards rise in one after another: input card, engine, result card. */
.scene > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.scene > :nth-child(2) { animation-delay: .08s; }
.scene > :nth-child(3) { animation-delay: .16s; }
.scene__col { position: relative; display: grid; gap: 14px; }

/* Desktop: the cycle pins mid-screen and scrolling walks through the steps
   (main.js picks the step). The section gets half a screen of scroll per step;
   the line under the active step fills as you go. */
@media (min-width: 1025px) and (min-height: 760px) {
  .os { --os-h: 690px; align-items: start; height: calc(var(--os-h) + 4 * 50vh); }
  .os__steps, .os__stage { position: sticky; top: calc(50vh - var(--os-h) / 2); }
  .os__steps { height: var(--os-h); align-content: center; }
  .os__step { position: relative; }
  .os__step[aria-selected="true"] { padding-bottom: 34px; }
  .os__step[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 74px 28px;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--ink) calc(var(--p, 0) * 100%), var(--gray-2) 0);
  }
  [dir="rtl"] .os__step[aria-selected="true"]::after {
    background: linear-gradient(to left, var(--ink) calc(var(--p, 0) * 100%), var(--gray-2) 0);
  }
}

.glass {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 24px;
  background: rgba(238, 236, 232, .74);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5);
}
.glass__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 17px; font-weight: 500; }
.glass__title svg { width: 18px; height: 18px; fill: currentColor; }
.glass__title small { margin-inline-start: auto; color: var(--ink-3); font-size: 12px; font-weight: 400; }

.q {
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  font-size: 15px;
}
.a { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.a b { color: var(--ink); font-weight: 600; }

.rank { display: flex; align-items: center; gap: 14px; }
.rank > b { font-family: "Inter Tight", sans-serif; font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.rank > span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; }
.rank small { color: #2F7D4F; font-size: 13px; font-weight: 600; }

.answers { display: grid; gap: 8px; }
.answers > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
  font-size: 14px;
}
.answers .stars { color: var(--dark); letter-spacing: 1px; }
.answers .stars i { color: var(--ink-3); font-style: normal; }

.chat { display: grid; gap: 8px; }

.hub {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(232, 229, 224, .8);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5);
  color: var(--dark);
}
.hub svg { width: 50px; height: auto; }
/* Connectors span only the gap between the circle and each card, never the cards themselves. */
.hub::before,
.hub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--scene-gap);
  height: 1px;
  background: rgba(255, 255, 255, .75);
}
.hub::before { inset-inline-end: 100%; }
.hub::after { inset-inline-start: 100%; }

.rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rows li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.4;
}
.rows li > span:nth-child(2) { display: flex; flex-direction: column; }
.rows b { font-weight: 600; }
.rows time { color: var(--ink-3); font-size: 12px; }
.rows__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.rows__icon svg:not(.i) { width: 15px; height: 15px; fill: currentColor; }
.rows__icon .i { width: 15px; height: 15px; }
.rows--check .rows__icon { background: var(--dark); color: #fff; }
.rows--check .rows__icon .i { stroke-width: 2.6; }

.msg {
  justify-self: start;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px;
  border-start-start-radius: 6px;
  background: rgba(255, 255, 255, .8);
  font-size: 15px;
  line-height: 1.5;
}
.msg--out { justify-self: end; border-radius: 18px; border-start-end-radius: 6px; background: var(--dark); color: #fff; }

/* ---------- Industries ---------- */
.seg--wide button { padding-inline: 28px; }

.ind {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: 40px;
  background-color: #2A211D;
  color: #fff;
  isolation: isolate;
}
/* Two stacked layers: the incoming photo fades in on top and settles from a slight zoom. */
.ind__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0s .9s;
}
.ind__bg.is-active {
  z-index: -2;
  opacity: 1;
  transition: opacity .9s ease;
  animation: ind-settle 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
.ind::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .16;
}
/* Darken the text side of the photo so white copy stays readable on bright shots. */
.ind.has-photo::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .12) 70%, transparent 88%);
  opacity: 1;
}
[dir="rtl"] .ind.has-photo::before { background: linear-gradient(270deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .12) 70%, transparent 88%); }
.ind.has-photo .ind__person { display: none; }

.ind__text { position: absolute; top: 64px; inset-inline-start: 64px; z-index: 2; max-width: 460px; }
.ind__kicker { margin-bottom: 18px; color: rgba(255, 255, 255, .7); font-size: 15px; }
.ind__statement {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: var(--head-weight);
  line-height: 1.25;
  letter-spacing: -.02em;
}
html[lang="ar"] .ind__statement { line-height: 1.55; }

.ind__person {
  position: absolute;
  bottom: -24px;
  inset-inline-end: 16%;
  height: 440px;
  width: auto;
  filter: drop-shadow(0 0 60px var(--glow, rgba(255, 255, 255, .2)));
}

.ind__connects {
  position: absolute;
  inset-inline-start: 64px;
  bottom: 44px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.ind__logos { display: flex; align-items: center; gap: 22px; }
.ind__logos svg { width: 26px; height: 26px; fill: #fff; }

/* Text swap: old copy drops out quickly, new copy rises in, one line after another. */
.ind__kicker, .ind__statement, .ind__connects, .ind__person {
  transition: opacity .5s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}
.ind__statement { transition-delay: .06s; }
.ind__person { transition-delay: .1s; }
.ind__connects { transition-delay: .14s; }
.ind.is-swapping :is(.ind__kicker, .ind__statement, .ind__connects, .ind__person) {
  opacity: 0;
  transform: translateY(12px);
  transition-duration: .22s;
  transition-delay: 0s;
}

/* ---------- Customer results ---------- */
.results {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(40% 60% at 15% 20%, rgba(214, 150, 110, .55), transparent 70%),
    radial-gradient(40% 60% at 85% 80%, rgba(150, 70, 60, .45), transparent 70%),
    linear-gradient(150deg, #C17E66 0%, #B36A57 50%, #A65D4E 100%);
  isolation: isolate;
}
.results::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .42;
}

.results__card {
  --terra: #B9644B;
  position: relative;
  padding: 56px 48px 48px;
  border-radius: 40px;
  background: #fff;
  touch-action: pan-y; /* horizontal swipes go to the carousel, vertical ones still scroll */
}
.results__kicker { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* Card height follows the content; min-height only keeps short quotes from making the card jump. */
.slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto auto;
  gap: 40px 64px;
  min-height: 384px; /* tallest slide, so switching never changes the card height */
  margin-top: 32px;
  animation: fade .35s ease;
}
.slide[hidden] { display: none; }
.slide blockquote {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
}
/* Decorative opening quote, drawn so it works the same in English and Arabic. */
.slide blockquote::before {
  content: "";
  display: block;
  width: 44px;
  height: 34px;
  margin-bottom: 20px;
  background: var(--terra);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20.4C0 8.9 6 2.1 17.4 0l2 4.6C12.8 6.6 9.8 10.4 9.4 16H18v18H0Zm26 0V20.4C26 8.9 32 2.1 43.4 0l2 4.6c-6.6 2-9.6 5.8-10 11.4H44v18H26Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20.4C0 8.9 6 2.1 17.4 0l2 4.6C12.8 6.6 9.8 10.4 9.4 16H18v18H0Zm26 0V20.4C26 8.9 32 2.1 43.4 0l2 4.6c-6.6 2-9.6 5.8-10 11.4H44v18H26Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .slide blockquote::before { transform: scaleX(-1); }
html[lang="ar"] .slide blockquote { font-size: 32px; line-height: 1.6; }
.slide__stat { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.slide__stat b {
  font-family: "Inter Tight", sans-serif;
  font-size: 112px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  direction: ltr; /* "+0.4★" reads the same way in Arabic */
  unicode-bidi: isolate;
}
.slide__stat b .slide__star { margin-inline-start: 4px; color: var(--terra); font-size: .45em; vertical-align: .9em; }
.slide__stat > span { max-width: 290px; margin-top: 18px; font-size: 16px; }
/* Which coworkers produced the result */
.slide__stat > .slide__team {
  display: flex;
  align-items: center;
  max-width: none;
  margin-top: 22px;
  padding: 5px 14px 5px 5px;
  padding-inline: 5px 14px;
  border-radius: 999px;
  background: var(--gray);
  color: var(--ink-2);
  font-size: 14px;
}
.slide__team img { width: 28px; height: 28px; border: 2px solid var(--gray); border-radius: 50%; }
.slide__team img + img { margin-inline-start: -10px; }
.slide__team span { margin-inline-start: 10px; }

/* Author row runs the full width under a hairline; the arrows sit on the same line. */
.slide figcaption {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.slide figcaption > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.slide figcaption b { font-weight: 500; }
.slide figcaption b + span { color: var(--ink-3); }
.slide__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gray) center / cover no-repeat;
}

.results__nav { position: absolute; inset-inline-end: 48px; bottom: 48px; display: flex; align-items: center; gap: 16px; }
.results__count {
  display: flex;
  gap: 6px;
  margin-inline-end: 8px;
  color: var(--ink-3);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.results__count b { color: var(--ink); font-weight: 500; }

/* ---------- Trust ---------- */
/* Commitments we control, not certifications: add real SOC 2 / ISO badges only once the reports exist. */
.trust {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 32px 28px 36px;
  border-radius: 28px;
  background: var(--gray);
  transition: background-color .35s, box-shadow .35s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.trust li:hover { background: #fff; box-shadow: 0 26px 50px -30px rgba(30, 26, 23, .4); transform: translateY(-4px); }
.trust__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  transition: background-color .3s, color .3s;
}
.trust__icon .i { width: 24px; height: 24px; }
.trust li:hover .trust__icon { background: var(--dark); color: #fff; }
.trust li > span:last-child { display: flex; flex-direction: column; gap: 8px; }
.trust b {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: var(--head-weight);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.trust b + span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.trust__note { margin-top: 48px; color: var(--ink-2); font-size: 15px; text-align: center; }
.trust__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA ---------- */
.cta .sec-head { margin-bottom: 32px; }
.cta__form {
  display: flex;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(30, 26, 23, .4);
}
.cta__form input {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.cta__form input::placeholder { color: var(--ink-3); }
.cta__form { transition: box-shadow .3s; }
.cta__form:focus-within { box-shadow: 0 0 0 4px rgba(30, 26, 23, .08), 0 22px 44px -26px rgba(30, 26, 23, .45); }
.cta__form.is-invalid { box-shadow: 0 0 0 2px #C2413C; }
.cta__form .pill { height: 52px; }
.cta__thanks { margin-top: 8px; font-size: 18px; text-align: center; }
/* Try Hala: the live demo line, by phone or WhatsApp. The green is WhatsApp's own, with dark
   text as on whatsapp.com (white text on that green is hard to read). */
.cta__try { display: grid; justify-items: center; gap: 14px; margin-top: 40px; }
.cta__try-label { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.cta__avatar { position: relative; flex: none; }
.cta__avatar img { width: 28px; height: 28px; border-radius: 50%; }
/* "Online" dot with a soft pulse */
.cta__avatar::before,
.cta__avatar::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #25D366;
}
.cta__avatar::after { border: 2px solid var(--gray); }
.cta__avatar::before { animation: online 2.4s ease-out infinite; }
@keyframes online { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.cta__try-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cta__try .pill { height: 52px; padding: 0 24px; font-size: 16px; }
.cta__try .pill svg { width: 20px; height: 20px; }
.pill--wa { background: #25D366; color: #0B141A; font-weight: 600; }
.pill--wa:hover { background: #1FC15C; }
.pill--wa svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .cta__avatar::before { animation: none; opacity: 0; }
}

/* ---------- Footer ---------- */
/* A dark card that bookends the page with the news bar on top. The CTA's gray runs into it,
   and an oversized wordmark sits cropped along the bottom edge. */
.footer { padding: 0 0 16px; background: var(--gray); }
.footer__card {
  position: relative;
  overflow: hidden;
  padding: 64px 56px 0;
  border-radius: 40px;
  background: var(--dark);
  color: #fff;
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px; }

.footer__brand { display: grid; align-content: start; justify-items: start; gap: 20px; max-width: 340px; }
.footer .logo { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .footer .logo:hover :is(.mark-l, .mark-r) { animation: mark-listen .7s ease-in-out infinite alternate; }
}
.footer__tagline { color: rgba(255, 255, 255, .66); font-size: 16px; line-height: 1.5; }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.footer__made {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
/* Flags never mirror in RTL; the hairline keeps the black stripe visible on the dark card. */
.flag { flex: none; width: 20px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.footer__social { display: flex; gap: 6px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .72);
  transition: background-color .2s, color .2s;
}
.footer__social a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; }

.footer h3 { margin-bottom: 18px; color: rgba(255, 255, 255, .5); font-size: 14px; font-weight: 500; }
.footer ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer li { display: flex; }
/* Every link is a 24px row, so the avatar rows line up with the plain ones next door. */
.footer ul a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  transition: color .2s;
}
.footer ul a:hover { color: #fff; }
.footer__cw img { width: 22px; height: 22px; border-radius: 50%; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
}
.footer__bottom > a { transition: color .2s; }
.footer__bottom > a:hover { color: #fff; }
.footer__totop { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.footer__totop .i { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .25s; }
.footer__totop:hover .i { transform: rotate(-90deg) translateX(2px); }

/* The traced wordmark, fading out downwards; the negative bottom margin crops its foot on the card edge. */
.footer__word {
  display: block;
  width: 86%;
  height: auto;
  margin: 32px auto -4.3%;
}

/* ---------- Sign in dialog ---------- */
html:has(.signin[open]) { overflow: hidden; }
.signin {
  width: min(960px, 100% - 48px);
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 36px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 50px 120px -40px rgba(30, 26, 23, .55);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.signin:focus-visible { outline: none; }
.signin[open] { animation: pop .45s cubic-bezier(.16, 1, .3, 1); }
.signin::backdrop {
  background: rgba(30, 26, 23, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.signin[open]::backdrop { animation: fade .3s ease; }
.signin__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.signin__form { display: flex; flex-direction: column; padding: 40px 56px 32px; }
.signin__form .logo { margin-bottom: 32px; }
.signin h2 {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: var(--head-weight);
  line-height: 1.1;
  letter-spacing: -.03em;
}
html[lang="ar"] .signin h2 { font-size: 32px; line-height: 1.4; }
.signin__sub { margin-top: 10px; color: var(--ink-2); font-size: 16px; }

.signin__sso { display: grid; gap: 10px; margin-top: 28px; }
.signin__provider { gap: 12px; height: 52px; border: 1px solid var(--line); background: #fff; }
.signin__provider:hover { background: var(--gray); }
.signin__provider svg { width: 18px; height: 18px; }
.signin__or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--ink-3); font-size: 14px; }
.signin__or::before, .signin__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.field { display: grid; gap: 8px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 500; }
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__head a { color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.field__head a:hover { color: var(--ink); }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gray);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--ink-3); }
.field input:hover { background: var(--gray-2); }
.field input:focus { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(30, 26, 23, .08); }
.field input[aria-invalid="true"] { border-color: #C2413C; box-shadow: 0 0 0 4px rgba(194, 65, 60, .12); }
/* Emails are typed LTR, but sit on the right like the rest of an Arabic form. */
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field__pw { position: relative; display: block; }
.field__pw input { padding-inline-end: 56px; }
.field__pw button {
  position: absolute;
  inset-block: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.field__pw button:hover { background: rgba(30, 26, 23, .06); color: var(--ink); }
.field__pw .i--hide,
.field__pw [aria-pressed="true"] .i--show { display: none; }
.field__pw [aria-pressed="true"] .i--hide { display: block; }

.signin__submit { width: 100%; height: 56px; margin-top: 8px; font-size: 16px; }
.signin__note { margin-top: 12px; padding: 10px 16px; border-radius: 14px; background: var(--gray); color: var(--ink-2); font-size: 14px; text-align: center; }
.signin__foot { margin-top: auto; padding-top: 24px; color: var(--ink-2); font-size: 14px; text-align: center; }
.signin__foot a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Same warm backdrop as the hero, with the three coworkers and what they did meanwhile. */
.signin__art {
  position: relative;
  min-height: 600px;
  margin: 10px;
  margin-inline-start: 0;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(60% 50% at 50% 78%, rgba(255, 244, 230, .9), transparent 70%),
    linear-gradient(165deg, #EFE8DE 0%, #E7D9C7 55%, #DEC9B2 100%);
  isolation: isolate;
}
.signin__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .14;
}
.signin__away { position: absolute; top: 76px; inset-inline: 28px; z-index: 2; }
.signin__away .rows__icon { object-fit: cover; }
.signin__people { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; }
.signin__people .person + .person { margin-inline-start: -40px; }
.signin__people .person--basira img { height: 290px; }
.signin__people .person--manar img  { height: 312px; }
.signin__people .person--hala img   { height: 292px; }
.signin__close {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 3;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.signin__close:hover { background: #fff; }

/* ---------- Motion ---------- */
/* Everything here is for people who haven't asked their system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero on load: copy rises line by line, the coworkers step up one after another,
     then the chat pops in like a real exchange and keeps floating gently. */
  .hero__text > * { animation: rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero__text > :nth-child(2) { animation-delay: .08s; }
  .hero__text > :nth-child(3) { animation-delay: .16s; }
  .hero__people .person { animation: step-up 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero__people .person:nth-child(1) { animation-delay: .2s; }
  .hero__people .person:nth-child(2) { animation-delay: .3s; }
  .hero__people .person:nth-child(3) { animation-delay: .4s; }
  /* Hero scenes: the timer runs (and pauses while you look), messages arrive one after another. */
  .hero__timer i { animation: hero-timer 6s linear forwards; }
  .hero__show:is(:hover, :focus-within) .hero__timer i { animation-play-state: paused; }
  .hero__scene.is-active > :not(.scene-head) { animation: rise .55s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero__scene.is-active > :nth-child(2) { animation-delay: .5s; }
  .hero__scene.is-active > :nth-child(3) { animation-delay: 1.1s; }
  .hero__scene.is-active > :nth-child(4) { animation-delay: 1.7s; }

  /* Scroll reveal: main.js gives .reveal to [data-reveal] blocks that start below the fold
     and adds .is-in as each scrolls into view; "stagger" lists bring their children in turn.
     It animates `translate`, so hover transforms keep working once it's done. */
  .reveal:not(.is-in):not([data-reveal="stagger"]),
  .reveal[data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }
  .reveal.is-in:not([data-reveal="stagger"]),
  .reveal.is-in[data-reveal="stagger"] > * {
    animation: reveal .9s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
  .cw { --reveal-y: 16px; }
  .footer__word { --reveal-y: 30%; }

  /* Coworker panel: copy, person and cards come in one after another each time a panel shows
     (and, for the first one, once it scrolls into view). */
  .cw:is(.is-in, :not(.reveal)) :is(.cw__copy > *, .cw__cards li) { animation: rise 1.15s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
  .cw:is(.is-in, :not(.reveal)) .cw__person { animation: step-up 1.4s cubic-bezier(.16, 1, .3, 1) .12s backwards; }
  .cw__copy > :nth-child(2) { --d: .1s; }
  .cw__copy > :nth-child(3) { --d: .2s; }
  .cw__cards li:nth-child(1) { --d: .28s; }
  .cw__cards li:nth-child(2) { --d: .36s; }
  .cw__cards li:nth-child(3) { --d: .44s; }
  .cw__cards li:nth-child(4) { --d: .52s; }
  .cw__cards li:nth-child(5) { --d: .6s; }
  /* Where Basira's post idea is always on show (touch, narrow layouts), it pops in last and
     floats like the hero chat. With a mouse it waits for a hover instead (see .cw__post). */
  @media (hover: none), (max-width: 1024px) {
    .cw:is(.is-in, :not(.reveal)) .cw__post {
      transform-origin: 100% 100%;
      animation: bubble-in .6s cubic-bezier(.34, 1.56, .64, 1) .8s backwards, float 5s ease-in-out 1.5s infinite alternate;
    }
    [dir="rtl"] .cw__post { transform-origin: 0 100%; }
  }

  /* The engine at work: light runs along the connectors (input, engine, result)
     and the mark's halves draw in and out. */
  .hub::before,
  .hub::after {
    background: rgba(255, 255, 255, .45) linear-gradient(90deg, transparent, #fff, transparent) no-repeat;
    background-size: 40% 100%;
    animation: flow 1.8s linear infinite;
  }
  .hub::after { animation-delay: .9s; }
  [dir="rtl"] .hub::before,
  [dir="rtl"] .hub::after { animation-direction: reverse; }
  .hub :is(.mark-l, .mark-r) { animation: mark-listen 1.1s ease-in-out infinite alternate; }

  /* Carousel: the next quote comes in from the side you're heading to. */
  .slide > * { animation: slide-in .6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .slide > :nth-child(2) { animation-delay: .05s; }
  .slide > :nth-child(3) { animation-delay: .1s; }

  /* Mobile menu and burger icon */
  .menu:not([hidden]) { animation: drop .35s cubic-bezier(.16, 1, .3, 1); }
  .menu:not([hidden]) a { animation: rise .45s cubic-bezier(.16, 1, .3, 1) backwards; }
  .menu a:nth-child(2) { animation-delay: .03s; }
  .menu a:nth-child(3) { animation-delay: .06s; }
  .menu a:nth-child(4) { animation-delay: .09s; }
  .menu a:nth-child(5) { animation-delay: .12s; }
  .menu a:nth-child(6) { animation-delay: .15s; }
  .burger .i { animation: icon-in .3s cubic-bezier(.16, 1, .3, 1); }
}
.results__card { --slide-from: 40px; }
.results__card[data-dir="prev"],
[dir="rtl"] .results__card { --slide-from: -40px; }
[dir="rtl"] .results__card[data-dir="prev"] { --slide-from: 40px; }

@keyframes reveal { from { opacity: 0; translate: 0 var(--reveal-y, 28px); } }
@keyframes step-up { from { opacity: 0; transform: translateY(60px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.8); } }
@keyframes float { to { transform: translateY(-5px); } }
@keyframes flow { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes slide-in { from { opacity: 0; translate: var(--slide-from) 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes icon-in { from { opacity: 0; transform: rotate(-90deg) scale(.6); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ind-settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav-pill .logo { margin-inline-end: 8px; }
  .nav-link { padding-inline: 12px; }
  .header__signin { display: none; }
  .hero__people .person--basira img { height: 378px; }
  .hero__people .person--manar img  { height: 407px; }
  .hero__people .person--hala img   { height: 381px; }
  .hero__stage { width: 300px; }
  .hero__text { max-width: 480px; }
  .hero h1 { font-size: 54px; }
  .cw__cards li { height: 104px; font-size: 16px; }
  .os { grid-template-columns: 320px minmax(0, 1fr); }
  .seg--wide { justify-content: flex-start; }
}

@media (max-width: 1024px) {
  .wrap { width: min(1360px, 100% - 40px); }
  .nav-pill { gap: 0; padding-inline: 20px; background: transparent; }
  .nav-pill .logo { margin-inline-end: 0; }
  .nav-link { display: none; }
  .burger { display: inline-grid; }
  .header__bar { height: 80px; }
  .header .circle, .header .pill { height: 48px; }
  .header .circle { width: 48px; }
  .lang { --pad: 4px; height: 48px; }
  .lang__opt { min-width: 46px; padding-inline: 8px; font-size: 14px; }

  /* Hero: text on top, coworkers standing underneath */
  .hero__card { display: flex; flex-direction: column; height: auto; }
  .hero__text { position: static; max-width: none; padding: 40px 32px 0; }
  .hero__show { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; align-self: center; margin-top: 28px; }
  .hero__stage { position: relative; left: auto; bottom: auto; width: min(340px, 100vw - 72px); margin-bottom: 18px; transform: none; }

  .cw { display: flex; flex-direction: column; height: auto; }
  .cw::before, [dir="rtl"] .cw::before { background: radial-gradient(45% 28% at 50% 72%, var(--glow), transparent 70%); transform: none; }
  .cw__copy { max-width: 560px; padding: 36px 32px 0; }
  .cw__person { position: relative; inset: auto; align-self: center; height: 340px; margin: 8px 0 -110px; }
  .cw__cards {
    position: relative;
    inset: auto;
    display: flex;
    gap: 12px;
    margin: 0 20px 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cw__cards li { flex: 0 0 168px; height: 104px; padding: 16px 18px; font-size: 16px; }
  .cw__post { position: relative; inset: auto; z-index: 3; width: auto; max-width: 340px; margin: 24px 32px 0; }

  .os { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .os__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os__step { padding: 20px; }
  .os__step b { font-size: 24px; }
  .os__desc { font-size: 15px; }
  .os__stage { height: auto; }
  .scene { position: relative; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); --scene-gap: 20px; padding: 28px; min-height: 560px; }
  .hub { width: 84px; height: 84px; }
  .hub svg { width: 36px; height: auto; }

  .ind { display: flex; flex-direction: column; height: auto; min-height: 480px; }
  .ind__text { position: relative; inset: auto; padding: 48px 40px 0; max-width: 560px; }
  .ind__connects { position: relative; inset: auto; flex-wrap: wrap; gap: 12px 24px; padding: 20px 40px 0; }
  .ind__person { position: relative; inset: auto; order: 1; align-self: center; height: 360px; margin-top: auto; margin-bottom: -24px; }
  .ind.has-photo .ind__connects { margin-top: auto; padding-bottom: 40px; }
  /* Stacked layout: text sits on top and the logos at the bottom, so shade top and bottom instead. */
  .ind.has-photo::before,
  [dir="rtl"] .ind.has-photo::before { background: linear-gradient(180deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .4) 42%, rgba(0, 0, 0, .15) 62%, rgba(0, 0, 0, .7) 100%); }

  .slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .slide__stat { align-items: flex-start; text-align: start; order: -1; }
  .slide { min-height: 0; }
  .results__nav { position: static; margin-top: 32px; }

  .footer__card { padding: 48px 32px 0; border-radius: 32px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .footer__brand { grid-column: 1 / -1; max-width: 420px; }

  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; }

  .signin { width: min(480px, 100% - 32px); }
  .signin__body { grid-template-columns: minmax(0, 1fr); }
  .signin__art { display: none; }
  .signin__close { background: var(--gray); }
  .signin__close:hover { background: var(--gray-2); }
}

@media (max-width: 720px) {
  .wrap { width: min(1360px, 100% - 32px); }
  .announce { font-size: 13px; }
  .announce img, .announce__mark { display: none; }
  .header__bar { gap: 6px; }
  .nav-pill { padding-inline: 0; }
  .header .pill--dark { padding: 0 16px; font-size: 14px; }
  .lang__opt { min-width: 38px; padding-inline: 6px; font-size: 13px; }

  .signin { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 28px; }
  .signin__form { padding: 28px 24px 24px; }
  .signin__form .logo { margin-bottom: 24px; }
  .signin h2, html[lang="ar"] .signin h2 { font-size: 30px; }
  .signin__close { top: 20px; inset-inline-end: 20px; }

  .hero__card { border-radius: 28px; }
  .hero__text { padding: 32px 24px 0; }
  .hero h1, html[lang="ar"] .hero h1 { font-size: 40px; }
  .hero__text p { font-size: 17px; }
  .hero__ctas .pill { flex: 1 1 auto; height: 52px; font-size: 16px; }
  .hero__people .person--basira img   { height: 248px; }
  .hero__people .person--manar img { height: 266px; }
  .hero__people .person--hala img  { height: 250px; }
  .person + .person { margin-inline-start: -20px; }
  .person__tag { padding: 5px 10px; font-size: 11px; }
  .person__tag b { font-size: 12px; }

  .channels { padding-top: 40px; }
  .channels ul { gap: 14px 28px; }
  .channels li { font-size: 16px; }
  .channels svg { width: 20px; height: 20px; }

  .section { padding: 80px 0; }
  .sec-head h2, html[lang="ar"] .sec-head h2 { font-size: 34px; }
  .sec-head p { font-size: 16px; }

  .seg { margin-bottom: 20px; }
  .seg button { padding: 10px 18px; font-size: 15px; }
  .seg--people button { min-width: 0; padding-inline: 6px 16px; gap: 10px; }
  .seg--people img { width: 40px; height: 40px; }
  .seg--people b { font-size: 16px; }
  .seg--people small { display: none; }

  .cw, .os__stage, .ind, .results__card { border-radius: 28px; }
  .cw__copy { padding: 24px 24px 0; }
  .cw__post { margin: 20px 24px 0; }
  .cw__copy h3, html[lang="ar"] .cw__copy h3 { font-size: 26px; }
  .cw__person { height: 250px; margin-bottom: -82px; }
  .cw__cards { margin: 0 12px 12px; }
  .cw__cards li { flex-basis: 140px; height: 88px; padding: 14px 16px; border-radius: 18px; font-size: 15px; }

  .os__steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .os__step { padding: 16px 18px; border-radius: 22px; }
  .os__step b { font-size: 22px; }
  .scene { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 0; }
  .hub { display: none; }
  .scene__col { width: 100%; }

  .ind__text { padding: 36px 24px 0; }
  .ind__statement { font-size: 24px; }
  .ind__person { height: 300px; }
  .ind__connects { padding: 16px 24px 0; }
  .ind.has-photo .ind__connects { padding-bottom: 24px; }

  .results { padding: 48px 0; }
  .results__card { padding: 32px 24px; }
  .slide blockquote, html[lang="ar"] .slide blockquote { font-size: 24px; }
  .slide__stat b { font-size: 76px; }

  .trust { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .trust li, .trust li:first-child { flex-direction: row; align-items: center; gap: 20px; padding: 24px; }
  .trust__icon { flex: none; width: 48px; height: 48px; }
  .trust b { font-size: 20px; }

  .cta__form { flex-direction: column; border-radius: 28px; }
  .cta__form input { height: 52px; }

  .footer { padding-bottom: 12px; }
  .footer__card { padding: 40px 24px 0; border-radius: 28px; }
  .footer__bottom { gap: 10px 18px; margin-top: 48px; }
  .footer__totop { width: 100%; margin-inline-start: 0; }
}

/* Phones: no room for both options, so the switch becomes a circle naming the other language. */
@media (max-width: 480px) {
  .lang { grid-template-columns: 1fr; width: 48px; padding: 0; }
  .lang__thumb,
  html:not([lang="ar"]) .lang__opt:lang(en),
  html[lang="ar"] .lang__opt:lang(ar) { display: none; }
  .lang__opt { min-width: 0; padding: 0; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__timer { display: none; } /* no autoplay: the coworkers switch only when clicked */
  .hero__stage, .hero__stage::after, .hero__scene, .hero__people .person img, .person__tag { transition: none; }
  .cw, .slide, .scene > * { animation: none; }
  .os__step, .os__step b, .os__step img, .os__desc { transition: none; }
  .topbar, .announce__item { transition: none; }
  .seg__thumb.is-ready, .ind__bg, .ind__bg.is-active,
  .ind__kicker, .ind__statement, .ind__connects, .ind__person { transition: none; animation: none; }
  .cw__cards li { transition: none; }
  .cw__cards li:hover { transform: none; }
  .lang__thumb { transition: none; }
  .signin[open], .signin[open]::backdrop { animation: none; }
  .trust li, .i--dir, .cta__form { transition: none; }
  .trust li:hover { transform: none; }
}

/* ==========================================================================
   Language switch, news bar on phones, channel logos, floating WhatsApp
   ========================================================================== */

/* Switching language is a link to the other page. Same-origin navigations get a view
   transition (rules above): the page fades and drifts, the switch glides to its mirrored
   spot and the news bar crossfades in place. */
.lang { view-transition-name: lang-switch; }
.announce { view-transition-name: lang-news; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* Arriving through the switch: the thumb starts on the old side and slides over. */
  .lang-arrived .lang__thumb { animation: thumb-to-en .5s cubic-bezier(.65, 0, .35, 1) .05s backwards; }
  html[lang="ar"].lang-arrived .lang__thumb { animation-name: thumb-to-ar; }
}
@keyframes thumb-to-en { from { transform: translateX(100%); } }
@keyframes thumb-to-ar { from { transform: translateX(0); } }

/* Numbers like "+0.4" stay left-to-right inside Arabic text. */
.slide__stat b { direction: ltr; unicode-bidi: isolate; }

/* Channel row: names readable at 4.5:1 on white. */
.channels p, .channels li { color: #7A746F; }

/* News bar: phones get the one-line version of each message. */
.announce__short { display: none; }
@media (max-width: 720px) {
  .announce__long { display: none; }
  .announce__short { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .announce__item a { min-height: 36px; padding: 6px 12px; gap: 8px; }
  .announce__item a > span:not(.announce__more) { min-width: 0; }
  .header__bar { height: 68px; }
}

/* ---------- Floating WhatsApp (phones) ---------- */
.wa-fab { display: none; }
@media (max-width: 720px) {
  .wa-fab {
    position: fixed;
    z-index: 45;
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #0B141A;
    box-shadow: 0 10px 24px -8px rgba(11, 20, 26, .45);
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
    transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  .wa-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
}

/* ==========================================================================
   Pricing page (pricing/, built from pages/pricing.html by scripts/build.mjs)
   ========================================================================== */
/* Between 1025 and 1180px the English nav runs out of room: Security (also in the footer) steps out. */
@media (max-width: 1180px) { .nav-link--wide { display: none; } }

/* The page you are on is marked in the nav. */
.nav-link[aria-current="page"] { background: #fff; }

.pricing-hero { padding: 72px 0 40px; text-align: center; }
.pricing-hero__kicker { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.pricing-hero h1 {
  max-width: 780px;
  margin: 12px auto 0;
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: var(--head-weight);
  line-height: 1.05;
  letter-spacing: -.035em;
}
html[lang="ar"] .pricing-hero h1 { font-size: 46px; line-height: 1.35; }
.pricing-hero__sub { max-width: 560px; margin: 18px auto 0; color: var(--ink-2); font-size: 18px; }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px 24px 24px; border-radius: 28px; background: var(--gray); }
.plan--all { background: var(--dark); color: #fff; }
/* Sits on the card's top edge, centred, so it never crowds the title. */
.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  background: #AE5E46; /* the results card's terracotta, a shade darker for 4.5:1 contrast */
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}
.plan__head { display: flex; align-items: center; gap: 12px; }
.plan__head img { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.plan__head h2 { font-family: var(--font-head); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.plan__head p { color: var(--ink-2); font-size: 14px; }
.plan--all .plan__head p { color: rgba(255, 255, 255, .66); }
.plan__trio { display: flex; flex: none; }
.plan__trio img { width: 40px; height: 40px; border: 2px solid var(--dark); }
.plan__trio img + img { margin-inline-start: -12px; }
.plan__price { display: flex; flex-direction: column; gap: 2px; }
.plan__price b { font-family: var(--font-head); font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.plan__price span { color: var(--ink-2); font-size: 14px; }
.plan--all .plan__price span { color: rgba(255, 255, 255, .66); }
.plan__desc { color: var(--ink-2); font-size: 15px; }
.plan--all .plan__desc { color: rgba(255, 255, 255, .8); }
.plan__list { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 15px; }
.plan--all .plan__list { border-top-color: rgba(255, 255, 255, .14); }
.plan__list li { display: flex; align-items: baseline; gap: 10px; }
/* Checkmark drawn with two borders */
.plan__list li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  opacity: .55;
  transform: translateY(-3px) rotate(-45deg);
}
.plan__cta { align-self: stretch; margin-top: auto; }
.plan__cta.pill--gray { background: #fff; }
.plan__cta.pill--gray:hover { background: var(--gray-2); }
.plan--all .plan__cta { background: #fff; color: var(--ink); }

.included { padding-top: 64px; text-align: center; }
.included h2, .faq h2 { font-family: var(--font-head); font-size: 32px; font-weight: var(--head-weight); letter-spacing: -.03em; }
.included ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.included li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }

.faq { max-width: 820px; padding-top: 80px; }
.faq h2 { margin-bottom: 16px; text-align: center; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ink-2); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 680px; padding-bottom: 20px; color: var(--ink-2); font-size: 16px; }

.pricing-cta { margin-block: 96px; padding: 56px 24px; border-radius: 40px; background: var(--gray); text-align: center; }
.pricing-cta h2 { font-family: var(--font-head); font-size: 40px; font-weight: var(--head-weight); letter-spacing: -.03em; }
.pricing-cta p { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.pricing-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pricing-cta .pill svg { width: 20px; height: 20px; }

@media (max-width: 1240px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pricing-hero { padding: 40px 0 24px; }
  .pricing-hero h1, html[lang="ar"] .pricing-hero h1 { font-size: 36px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .faq { padding-top: 56px; }
  .faq summary { font-size: 17px; }
  .pricing-cta { margin-block: 64px; padding: 40px 20px; border-radius: 28px; }
  .pricing-cta h2 { font-size: 30px; }
}