/* =========================================================================
   style-website.css
   The site-wide stylesheet: design tokens, reset, header (navbar, mobile
   menu, hero), layout primitives, shared components and the homepage
   sections. Loaded by index.html and by the /privacy pages.

   Companion files, loaded after this one:
   - lang-switcher.css   language switcher (desktop dropdown + mobile row)
   - privacy-policy.css  /privacy pages only
   - site-footer.css     the footer shared by every page
   ========================================================================= */

/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --clr-primary: #4036a7;
  --clr-primary-light: #695ef5;
  --clr-primary-dark: #5046b7;
  --clr-accent: #028cff;
  --clr-white: #fff;
  --clr-black: #000;
  --clr-text-light: #fffc;
  --clr-text-light-hover: #e5e5e5;
  --clr-text-dark: #222;
  --clr-text-heading: #363853;
  --clr-text-body: #666;
  --clr-text-muted: #676767;
  --clr-white-10: #ffffff1a;
  --clr-white-30: #ffffff4d;
  --clr-white-60: #ffffff9a;
  --clr-black-10: #0000001a;
  --clr-black-20: #0003;
  --clr-black-25: #00000040;
  --clr-primary-light-00: #695ef500;
  --clr-primary-light-05: #695ef50d;
  --clr-primary-light-20: #695ef533;
  --clr-primary-light-40: #695ef566;
  --clr-accent-05: #028cff0d;
  --clr-accent-40: #028cff66;

  /* Latin pages; Arabic pages swap these below. */
  --font-primary: Roboto, sans-serif;
  --font-heading: Rubik, sans-serif;
  --font-ui: Quicksand, sans-serif;
  --font-secondary: "Nunito Sans", sans-serif;

  --fs-nav-mobile: 1.5rem;
  --fs-nav-desktop: 1rem;
  --fs-btn-mobile: 1.13rem;
  --fs-btn-desktop: 1rem;
  --fs-h1: clamp(1.5rem, 0.785rem + 3.5714vw, 3rem);
  --fs-h2: clamp(1.5rem, 0.32rem + 5.57vw, 2.8125rem);
  --fs-h2-alt: clamp(1.13rem, 0.75rem + 1.8vw, 1.625rem);
  --fs-p: clamp(0.81rem, 0.6rem + 0.98vw, 1rem);
  --fs-p-lg: clamp(0.76rem, -0.2rem + 4.57vw, 1.125rem);
  --fs-card-title: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  --fs-card-body: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  --fs-label: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  --container: 75rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --section-space: clamp(3rem, 2rem + 4vw, 5.5rem);

  --shadow-card: 0 4px 12px var(--clr-primary-light-20);
  --shadow-card-hover: 0 10px 20px var(--clr-primary-light-20),
    0 2px 6px var(--clr-primary-light-20);
  --shadow-soft: 3.35422px 3.35422px 20.1253px var(--clr-black-20);

  --duration-fast: 0.15s;
  --duration-medium: 0.3s;
  --duration-slow: 0.5s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Arabic: Tajawal first; the Latin fonts stay as fallbacks. */
html[lang="ar"] {
  --font-primary: Tajawal, Roboto, sans-serif;
  --font-heading: Tajawal, Rubik, sans-serif;
  --font-ui: Tajawal, Quicksand, sans-serif;
  --font-secondary: Tajawal, "Nunito Sans", sans-serif;
}

/* =========================================================
   Reset & base
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent !important;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  color: var(--clr-text-body);
  background-color: var(--clr-white);
}

img,
video,
audio,
canvas,
embed,
iframe,
object {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

button {
  all: unset;
  cursor: pointer;
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

*:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset var(--duration-fast) var(--ease-standard),
    outline var(--duration-fast) var(--ease-standard);
}

.skip-link {
  position: absolute;
  top: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 10;
  padding: var(--space-sm) var(--space-lg);
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-desktop);
  transform: translateY(calc(-100% - var(--space-xl)));
  transition: transform var(--duration-medium) var(--ease-standard);
}

.skip-link:focus {
  transform: none;
}

/* =========================================================
   Header — mobile menu
   ========================================================= */
.humburger-container {
  display: flex;
  justify-content: flex-end;
}

.outer-menu {
  position: relative;
  width: 45px;
  height: 45px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  color: var(--clr-text-light);
}

.outer-menu div {
  z-index: 1;
}

.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 45px;
  height: 45px;
  opacity: 0;
  cursor: pointer;
}

.outer-menu .checkbox-toggle:checked+.hamburger>div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div::before,
.outer-menu .checkbox-toggle:checked+.hamburger>div::after {
  top: 0;
  transform: rotate(90deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div::after {
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked~.menu {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}

.outer-menu .checkbox-toggle:checked~.menu>div {
  transform: scale(1);
  transition-duration: var(--duration-slow);
}

.outer-menu .checkbox-toggle:checked~.menu>div>div {
  opacity: 1;
  transition: opacity var(--duration-medium) var(--ease-standard) var(--duration-medium);
}

.outer-menu .checkbox-toggle:focus-visible~.hamburger {
  box-shadow: 0 0 0 3px var(--clr-accent-40);
  border-radius: 4px;
}

.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 45px;
  height: 45px;
  padding: 0.5em 0.75em;
  border-radius: 0 0.12em 0.12em 0;
  transition: box-shadow var(--duration-medium) var(--ease-standard);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger>div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--clr-white);
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger>div::before,
.outer-menu .hamburger>div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: top var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard),
    opacity var(--duration-medium) var(--ease-standard);
  will-change: top, transform, opacity;
}

.outer-menu .hamburger>div::after {
  top: 7.5px;
}

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: visibility 0s var(--duration-medium);
}

.outer-menu .menu>div {
  width: 300vw;
  height: 300vw;
  background: var(--clr-primary);
  border-radius: 50%;
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
  flex: none;
  transform: scale(0);
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .menu>div>div {
  text-align: center;
  width: 90vw;
  max-width: 90vw;
  max-height: 100vh;
  max-height: 100dvh;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
  will-change: opacity;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.outer-menu .menu>div>div>ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outer-menu .menu>div>div>ul>li {
  padding: 0;
  margin: var(--space-md);
  font-size: var(--fs-nav-mobile);
  display: block;
}

.outer-menu .menu>div>div>ul>li:empty {
  display: none;
}

.outer-menu .menu>div>div>ul>li:last-child {
  margin-top: var(--space-lg);
}

.outer-menu .menu>div>div>ul>li>a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color var(--duration-medium) var(--ease-standard);
}

.outer-menu .menu>div>div>ul>li>a:active {
  color: var(--clr-text-light-hover);
  outline: none;
}

.outer-menu .menu>div>div>ul>li>a:active::after {
  width: 100%;
}

.outer-menu .menu>div>div>ul>li>a::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--clr-text-light-hover);
  transition: width var(--duration-medium) var(--ease-standard);
}

.outer-menu .menu>div>div>ul>li:last-child>a::after {
  display: none;
}

.rahati-logo-hamburger {
  margin-bottom: 1rem;
}

.menu button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.63rem 1rem;
  gap: 0.63rem;
  background: var(--clr-white-10);
  color: var(--clr-white-60);
  border: 1px solid var(--clr-white-30);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px var(--clr-black-10);
}

.menu img {
  align-self: center;
  min-width: 45px;
  min-height: 45px;
}

/* =========================================================
   Header — navbar & hero
   (existing gradient kept intact: it belongs to the original header)
   ========================================================= */
header {
  background: linear-gradient(169.4deg,
      var(--clr-primary-light-05) -6.01%,
      var(--clr-accent-05) 36.87%,
      var(--clr-primary-light-05) 78.04%,
      var(--clr-primary-light-05) 103.77%);
  padding-top: var(--space-md);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--clr-primary);
  box-shadow: 0 4px 15px var(--clr-black-25);
  border-radius: 30px;
  height: 4.5rem;
  margin: 0 max(var(--space-sm), (100% - 914px) / 2) var(--space-xl);
  max-width: 914px;
}

.navbar img {
  max-height: 32px;
}

.navbar>img {
  min-width: 0;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.35;
  text-align: center;
  color: var(--clr-text-dark);
  margin: 0 var(--space-lg) var(--space-md);
  max-width: 600px;
}

.hero-content span {
  color: var(--clr-accent);
}

.hero-content p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-p);
  line-height: 1.7;
  text-align: center;
  color: var(--clr-text-body);
  margin: var(--space-lg);
  max-width: 450px;
}

.rahatipay-hero-mobile {
  --ph-ratio: 4 / 5;
  --ph-max-width: min(25rem, 100% - 2 * var(--space-md));
  --ph-max-height: max(300px, 60vh);
  margin: 0 auto;
}

.cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xxl);
}

.cta button {
  min-width: 170px;
}

.button-download {
  padding: var(--space-sm) var(--space-xxl);
  background: var(--clr-primary);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  color: var(--clr-white);
  transition: background-color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  will-change: transform, background-color;
}

.join-waiting-list {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--clr-primary);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  color: var(--clr-primary);
  max-height: 40px;
  transition: background-color var(--duration-medium) var(--ease-standard),
    color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  will-change: transform, background-color, color;
}

.desktop-nav-items,
.desktop-download-button,
.rahatipay-hero-desktop {
  display: none;
}

@media (min-width: 992px) {
  header {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-xxl);
  }

  .navbar {
    align-self: center;
    min-width: 914px;
    margin-bottom: 4%;
    z-index: 1;
  }

  .desktop-nav-items {
    display: flex;
    justify-content: space-between;
    width: 353px;
  }

  .desktop-nav-items a {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--fs-nav-desktop);
    color: var(--clr-text-light);
    transition: color var(--duration-medium) var(--ease-standard);
  }

  .desktop-nav-items a:hover {
    color: var(--clr-text-light-hover);
  }

  .desktop-download-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-btn-desktop);
    padding: 10px 30px;
    gap: 10px;
    background: var(--clr-white-10);
    border: 1px solid var(--clr-white-30);
    border-radius: 15px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px var(--clr-black-10);
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--clr-white-60);
    transition: background-color var(--duration-medium) var(--ease-standard),
      color var(--duration-medium) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .desktop-download-button:hover {
    background: var(--clr-white-30);
    color: var(--clr-white);
    transform: translateY(-2px);
  }

  .hero {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 0 clamp(2rem, 7vw, 8.5rem);
  }

  .hero-content {
    align-items: flex-start;
    gap: 1rem;
    justify-content: center;
    max-width: 600px;
    min-width: 0;
  }

  .hero-content h1 {
    font-family: var(--font-primary);
    font-weight: 900;
    text-align: start;
    margin: 0;
  }

  .hero-content p {
    font-family: var(--font-primary);
    text-align: start;
    font-weight: 400;
    margin: 0;
  }

  .cta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
  }

  .cta button {
    font-size: var(--fs-btn-desktop);
    font-weight: 400;
    padding: 0.75rem 2.5rem;
    border-radius: 10px;
    min-width: 0;
  }

  .cta .join-waiting-list {
    padding: 0.5rem 1.5rem;
  }

  .button-download:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-2px);
  }

  .join-waiting-list:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
    transform: translateY(-2px);
  }

  .rahatipay-hero-desktop {
    --ph-ratio: 4 / 5;
    --ph-max-width: min(38vw, 40rem);
    max-height: 65vh;
    display: grid;
    flex-shrink: 0;
  }

  .humburger-container,
  .rahatipay-hero-mobile {
    display: none;
  }
}

@media (min-width: 992px) and (orientation: landscape) {
  header {
    min-height: 110vh;
  }
}

.desktop-download-button:active,
.button-download:active,
.join-waiting-list:active {
  transform: scale(0.98);
}

/* =========================================================
   Navbar motion — entrance cascade that leads into the hero's,
   link underlines, and a staggered mobile menu.
   The navbar holds the fixed mobile menu, so it must never keep a
   transform (that would trap the overlay inside the bar): its
   entrance fills `backwards` only, leaving nothing behind once it
   ends. The language switcher's motion lives in lang-switcher.css.
   ========================================================= */

/* Desktop links: an underline grows in reading direction. */
.desktop-nav-items a {
  position: relative;
}

.desktop-nav-items a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--duration-medium) var(--ease-emphasized);
}

[dir="rtl"] .desktop-nav-items a::after {
  transform-origin: right;
}

.desktop-nav-items a:hover::after,
.desktop-nav-items a:focus-visible::after {
  scale: 1 1;
}

@media (prefers-reduced-motion: no-preference) {
  .navbar {
    animation: nav-drop 0.7s var(--ease-emphasized) backwards;
  }

  .navbar>img,
  .desktop-nav-items a,
  .navbar .lang-switcher,
  .outer-menu .hamburger {
    animation: nav-item-in 0.6s var(--ease-emphasized) 0.15s backwards;
  }

  .desktop-nav-items a:nth-child(1) {
    animation-delay: 0.2s;
  }

  .desktop-nav-items a:nth-child(2) {
    animation-delay: 0.26s;
  }

  .desktop-nav-items a:nth-child(3) {
    animation-delay: 0.32s;
  }

  .navbar .lang-switcher {
    animation-delay: 0.38s;
  }

  .outer-menu .hamburger {
    animation-delay: 0.25s;
  }

  /* Mobile menu: items rise in one by one once the circle has opened
     (the content block itself fades in after --duration-medium). */
  .outer-menu .menu>div>div>ul>li {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity var(--duration-medium) var(--ease-standard),
      translate var(--duration-slow) var(--ease-emphasized);
  }

  .outer-menu .checkbox-toggle:checked~.menu>div>div>ul>li {
    opacity: 1;
    translate: none;
    transition-delay: calc(var(--duration-medium) + var(--i, 0) * 0.06s);
  }

  .outer-menu .menu>div>div>ul>li:nth-child(2) {
    --i: 1;
  }

  .outer-menu .menu>div>div>ul>li:nth-child(3) {
    --i: 2;
  }

  .outer-menu .menu>div>div>ul>li:nth-child(4) {
    --i: 3;
  }

  .outer-menu .menu>div>div>ul>li:nth-child(5) {
    --i: 4;
  }

  /* nth-child(6) is the empty, hidden item. */
  .outer-menu .menu>div>div>ul>li:nth-child(7) {
    --i: 5;
  }
}

@keyframes nav-drop {
  from {
    opacity: 0;
    translate: 0 -1.25rem;
  }
}

@keyframes nav-item-in {
  from {
    opacity: 0;
    translate: 0 -0.5rem;
  }
}

/* One-off sheen sweeps, shared by the navbar's glass controls. */
@keyframes sheen-sweep-ltr {
  from {
    translate: -100% 0;
  }

  to {
    translate: 100% 0;
  }
}

@keyframes sheen-sweep-rtl {
  from {
    translate: 100% 0;
  }

  to {
    translate: -100% 0;
  }
}

/* =========================================================
   Hero motion — staggered entrance, floating mockup with its
   glow, and a CTA sheen. All motion is opt-in through
   prefers-reduced-motion; without it the hero renders static.
   Only opacity, translate, scale and rotate are animated, and
   site.js sets .is-paused while the hero is off-screen.
   (The navbar is left still on purpose: a transform on it would
   trap the fixed mobile menu overlay inside it.)
   ========================================================= */

/* Soft brand glow behind the phones. It is the mockup's own
   background (the PNG is transparent around the phones), so it
   stays centred on them and scales with them at every breakpoint,
   with no positioning or clipping to keep in sync. */
.rahatipay-hero-mobile,
.rahatipay-hero-desktop {
  background: radial-gradient(closest-side, var(--clr-primary-light-20), var(--clr-primary-light-00));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-content h1,
  .hero-content p,
  .hero .cta {
    animation: hero-rise 0.9s var(--ease-emphasized) both;
  }

  .hero-content h1 {
    animation-delay: 0.1s;
  }

  .hero-content p {
    animation-delay: 0.35s;
  }

  .hero .cta {
    animation-delay: 0.5s;
  }

  /* The float takes over `translate` once the entrance has settled. */
  .rahatipay-hero-mobile,
  .rahatipay-hero-desktop {
    animation: hero-media-in 1.2s var(--ease-emphasized) 0.15s both,
      hero-float 7s ease-in-out 1.35s infinite;
  }

  /* A light sweep across the accent line, in reading direction. */
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero-content h1 span {
      background: linear-gradient(100deg,
          var(--clr-accent) 42%,
          var(--clr-primary-light) 50%,
          var(--clr-accent) 58%) 0 0 / 250% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: hero-sheen-ltr 1.6s var(--ease-standard) 0.9s both;
    }

    [dir="rtl"] .hero-content h1 span {
      animation-name: hero-sheen-rtl;
    }
  }

  /* CTA: a sheen passes under the label every few seconds. */
  .hero .button-download {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .hero .button-download::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, var(--clr-white-30) 50%, transparent 65%);
    translate: -100% 0;
    pointer-events: none;
    animation: hero-cta-sheen-ltr 6s var(--ease-standard) 1.6s infinite;
  }

  [dir="rtl"] .hero .button-download::after {
    animation-name: hero-cta-sheen-rtl;
  }

  .hero.is-paused *,
  .hero.is-paused *::after {
    animation-play-state: paused;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
}

@keyframes hero-media-in {
  from {
    opacity: 0;
    translate: 0 2.5rem;
    scale: 0.92;
    rotate: 4deg;
  }
}

@keyframes hero-float {
  50% {
    translate: 0 -0.875rem;
  }
}

@keyframes hero-sheen-ltr {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes hero-sheen-rtl {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}

/* Sweep takes the first quarter; the rest is a pause. */
@keyframes hero-cta-sheen-ltr {
  from {
    translate: -100% 0;
  }

  25%,
  to {
    translate: 100% 0;
  }
}

@keyframes hero-cta-sheen-rtl {
  from {
    translate: 100% 0;
  }

  25%,
  to {
    translate: -100% 0;
  }
}

/* =========================================================
   Layout primitives
   ========================================================= */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section-header {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  max-width: 50rem;
  margin: 0 auto clamp(var(--space-xl), 1rem + 4vw, 3.75rem);
  text-align: center;
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.13rem;
  line-height: 1.3;
  color: var(--clr-black);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.35;
  color: var(--clr-text-dark);
  text-wrap: balance;
}

.section-title span {
  color: var(--clr-accent);
}

.section-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-p);
  line-height: 1.8;
  color: var(--clr-text-body);
  text-wrap: pretty;
}

/* Two-column section: flat DOM so the visual sits between the text
   and the call-to-action on mobile, and in its own column on desktop.
   Grid areas mirror automatically in RTL. */
.split {
  display: grid;
  grid-template-areas:
    "intro"
    "media"
    "body";
  justify-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.split__intro {
  grid-area: intro;
  display: grid;
  gap: var(--space-md);
  max-width: 40rem;
}

.split__media {
  grid-area: media;
}

.split__body {
  grid-area: body;
  display: grid;
  justify-items: inherit;
  gap: var(--space-lg);
  width: 100%;
}

@media (min-width: 992px) {
  .section-eyebrow {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .section-title {
    font-family: var(--font-primary);
    font-weight: 900;
    line-height: 1.35;
  }

  .section-text {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: var(--fs-p-lg);
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".     media"
      "intro media"
      "body  media"
      ".     media";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0;
    justify-items: start;
    align-items: start;
    text-align: start;
  }

  .split--reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "media ."
      "media intro"
      "media body"
      "media .";
  }

  .split__media {
    justify-self: center;
    align-self: center;
  }

  .split__body {
    margin-top: var(--space-xl);
  }
}

/* =========================================================
   Image placeholder — single treatment reused site-wide.
   Size is driven by --ph-ratio / --ph-max-width / --ph-max-height,
   so it never distorts and never exceeds the viewport height.
   ========================================================= */
/* :where() keeps these defaults at zero specificity, so context classes always win. */
:where(.img-placeholder) {
  --ph-ratio: 4 / 3;
  --ph-max-width: 100%;
  --ph-max-height: 70vh;
  --ph-bg: var(--clr-primary-light-05);
  --ph-border: var(--clr-primary-light-40);
  --ph-color: var(--clr-primary);
  --ph-icon: var(--clr-primary-light);

  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-xs);
  width: min(100%, var(--ph-max-width), calc(var(--ph-max-height) * var(--ph-ratio)));
  aspect-ratio: var(--ph-ratio);
  padding: var(--space-xs);
  overflow: hidden;
  background-color: var(--ph-bg);
  border: 2px dashed var(--ph-border);
  border-radius: 20px;
  color: var(--ph-color);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.3;
  /* No letter-spacing: it breaks the joining of Arabic letters. */
  letter-spacing: 0;
  text-align: center;
  user-select: none;
}

.img-placeholder::before,
.img-placeholder::after {
  content: "";
  grid-area: 1 / 1;
  width: 2.5rem;
  aspect-ratio: 5 / 4;
}

.img-placeholder::before {
  border: 2px solid var(--ph-icon);
  border-radius: 0.5rem;
}

.img-placeholder::after {
  background-color: var(--ph-icon);
  clip-path: polygon(14% 80%, 38% 46%, 54% 66%, 68% 52%, 86% 80%, 14% 80%,
      62% 28%, 66% 20%, 74% 20%, 78% 28%, 74% 36%, 66% 36%, 62% 28%);
}

/* Icon-sized slot: text only, fixed square. */
.img-placeholder--sm {
  --ph-ratio: 1;
  width: var(--ph-size, 2.75rem);
  flex-shrink: 0;
  padding: 2px;
  border-width: 1.5px;
  border-radius: 10px;
  font-size: 0.625rem;
  letter-spacing: 0;
}

.img-placeholder--sm::before,
.img-placeholder--sm::after {
  content: none;
}

/* Same treatment for placement on the primary colour. */
.img-placeholder--inverse {
  --ph-bg: var(--clr-white-10);
  --ph-border: var(--clr-white-60);
  --ph-color: var(--clr-white);
  --ph-icon: var(--clr-white);
}

/* =========================================================
   Utilities
   ========================================================= */
[hidden] {
  display: none !important;
}

/* =========================================================
   Section variants
   Two plain sections in a row share one gap; tinted and
   brand-coloured bands keep full padding inside their colour.
   ========================================================= */
.section:not(.section--tint, .section--brand)+.section:not(.section--tint, .section--brand) {
  padding-top: 0;
}

.section--tint {
  background-color: var(--clr-primary-light-05);
}

.section--brand {
  background-color: var(--clr-primary);
}

.section--brand :focus-visible {
  outline-color: var(--clr-white);
}

.section--brand .section-title,
.section--brand .section-text {
  color: var(--clr-white);
}

.section-title--compact {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);
}

/* Tinted panel with the heavy bottom edge of the page's CTA panel. */
.panel {
  padding: clamp(1.75rem, 1rem + 3.5vw, 4rem) clamp(1.25rem, 0.25rem + 4.5vw, 4.5rem);
  background-color: var(--clr-accent-05);
  border-bottom: 7px solid #2d2d2d59;
  border-radius: clamp(24px, 0.75rem + 3vw, 50px);
}

/* Placeholder sizes per context. */
.media-phone {
  --ph-ratio: 1 / 2;
  --ph-max-width: 16rem;
  max-height: 75vh;
}

.media-invoice {
  --ph-ratio: 5 / 4;
  --ph-max-width: 36rem;
  --ph-max-height: 60vh;
}

.media-dashboard {
  --ph-ratio: 4 / 3;
  --ph-max-width: 40rem;
  --ph-max-height: 65vh;
}

/* =========================================================
   Card — the original service-card treatment, shared by
   the steps, the payout flow and the profession tiles.
   ========================================================= */
.card {
  --card-gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  background-color: var(--clr-white);
  border-inline-end: 0.5px solid var(--clr-black-25);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--duration-medium) var(--ease-standard),
    box-shadow var(--duration-medium) var(--ease-standard);
}

.card__icon {
  --ph-size: clamp(2.5rem, 2rem + 1.5vw, 3.75rem);
}

.card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-card-title);
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: var(--clr-primary);
  text-wrap: balance;
}

.card__text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-card-body);
  line-height: 1.6;
  color: var(--clr-text-muted);
  text-wrap: pretty;
}

/* Chevron between sequential cards (points right; down in the stacked flow).
   Mirrored in RTL so it follows the reading direction. */
.connector {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
  color: var(--clr-primary-light);
}

[dir="rtl"] .connector {
  scale: -1 1;
}

.connector::before {
  content: "";
  width: 0.75rem;
  aspect-ratio: 1;
  border-top: 2px solid;
  border-right: 2px solid;
  translate: -0.25rem 0;
  rotate: 45deg;
}

/* =========================================================
   Buttons & links
   ========================================================= */
.button-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--clr-primary-light);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  line-height: 1.3;
  color: var(--clr-white);
  transition: background-color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: 0.25rem;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-desktop);
  color: var(--clr-primary);
}

.text-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width var(--duration-medium) var(--ease-standard);
}

.icon-arrow {
  display: inline-block;
  transition: transform var(--duration-medium) var(--ease-standard);
}

/* App-store badges */
.download-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.81rem;
}

html[lang="ar"] .download-buttons {
  direction: ltr;
}

.download-buttons button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.81rem;
  background-color: var(--clr-white);
  border-radius: 6.44px;
  box-shadow: 1.29px 7.09px 19.33px #33333314;
  transition: transform var(--duration-medium) var(--ease-standard);
}

.store-icon {
  --ph-size: 2.25rem;
}

.store-text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.73rem;
  line-height: 1.3;
  color: var(--clr-black);
  text-align: start;
}

.store-text span {
  font-weight: 500;
  font-size: 0.97rem;
  color: #1a1919;
}

@media (min-width: 992px) {
  .button-cta {
    padding: 0.9375rem 1.875rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.3125rem;
  }
}

/* =========================================================
   Check list — green check, matching the original feature icons
   ========================================================= */
.check-list {
  --clr-check: #34b233;
  display: grid;
  gap: var(--space-sm);
  width: fit-content;
  max-width: 100%;
  text-align: start;
}

.check-list li {
  position: relative;
  padding-inline-start: 2rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-p);
  line-height: 1.6;
  color: var(--clr-text-heading);
}

.check-list li::before,
.check-list li::after {
  content: "";
  position: absolute;
}

.check-list li::before {
  top: calc(0.8em - 0.625rem);
  inset-inline-start: 0;
  width: 1.25rem;
  aspect-ratio: 1;
  border: 2px solid var(--clr-check);
  border-radius: 50%;
}

.check-list li::after {
  top: calc(0.8em - 0.375rem);
  inset-inline-start: 0.45rem;
  width: 0.32rem;
  height: 0.6rem;
  border: solid var(--clr-check);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

/* =========================================================
   Steps
   ========================================================= */
.steps__list {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
}

.steps__list .connector {
  display: none;
}

.step-card__media {
  --ph-ratio: 1 / 2;
  --ph-max-width: 12rem;
  max-height: 70vh;
  flex-shrink: 0;
}

/* Number badge sits on the bottom edge of the screenshot. */
.step-card__number {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  margin-top: calc(-1.375rem - var(--card-gap));
  background-color: var(--clr-primary);
  border: 3px solid var(--clr-white);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--clr-white);
}

/* Centre the digits, not the font's line box. Tajawal's line metrics differ
   by platform (Windows reads usWin*, iOS/Android/macOS read hhea), which left
   the numbers ~2.5px high on phones. Trimming the line to cap height and
   baseline makes it hug the numerals everywhere. text-box only trims a block
   container's own lines (not a grid item's), hence block + align-content.
   Browsers without text-box keep the grid centring above. */
@supports (text-box: trim-both cap alphabetic) {
  .step-card__number {
    display: block;
    align-content: center;
    text-align: center;
    text-box: trim-both cap alphabetic;
  }
}

@media (min-width: 340px) {
  .steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px),
(min-width: 720px) and (orientation: landscape) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
    column-gap: var(--space-sm);
  }

  .steps__list .connector {
    display: grid;
  }
}

/* =========================================================
   Payout flow
   ========================================================= */
.payout__layout {
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}

.payout__intro {
  display: grid;
  justify-items: inherit;
  gap: var(--space-md);
  max-width: 40rem;
}

.flow {
  display: grid;
  gap: var(--space-sm);
  width: min(100%, 22rem);
}

.flow .card {
  padding: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

.flow .connector::before {
  translate: 0 -0.25rem;
  rotate: 135deg;
}

@media (min-width: 640px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(100%, 52rem);
  }

  .flow .connector::before {
    translate: -0.25rem 0;
    rotate: 45deg;
  }
}

@media (min-width: 1200px) {
  .payout__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
    align-items: center;
    justify-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    text-align: start;
  }

  .flow {
    width: 100%;
  }
}

/* =========================================================
   Professionals — columns follow the space the grid gets
   ========================================================= */
.professions {
  container-type: inline-size;
  width: 100%;
}

.profession-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.flow .card,
.profession-grid .card {
  justify-content: center;
}

.profession-grid .card {
  padding-inline: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

@container (max-width: 17.5rem) {
  .profession-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (min-width: 32rem) {
  .profession-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   FAQ answers & closing CTA — kept from the original page and
   still switched off with [hidden], ready to be re-enabled.
   ========================================================= */
.line {
  width: min(85vw, 100% - 2 * var(--gutter));
  margin: 4rem auto;
  border-top: 0.5px solid #738999;
}

.faq-answers {
  display: grid;
  justify-items: center;
  gap: var(--space-xl);
}

.faq-answers__media {
  display: none;
}

.faq-cards {
  display: grid;
  gap: var(--space-sm);
  width: min(100%, 37.5rem);
}

.faq-collapsible-card {
  padding: 0.7rem clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-white);
  border-radius: 16.7711px;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--duration-medium) var(--ease-standard),
    background-color var(--duration-medium) var(--ease-standard);
}

.faq-collapsible-card[open] {
  padding-top: 1.5rem;
  background-color: #00000005;
  border-color: var(--clr-primary);
}

.faq-collapsible-card summary {
  padding: 0.5rem 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.81rem;
  line-height: 1.5rem;
  color: var(--clr-text-heading);
  cursor: pointer;
}

.faq-collapsible-card summary::-webkit-details-marker {
  display: none;
}

.faq-collapsible-card summary span {
  font-weight: 700;
}

.faq-collapsible-card ul {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0 1rem;
}

.faq-collapsible-card li {
  position: relative;
  padding-inline-start: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--clr-text-heading);
}

.faq-collapsible-card li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
}

.bottom-cta__panel {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.bottom-cta .section-title {
  color: var(--clr-primary);
}

.bottom-cta .section-text {
  max-width: 40rem;
}

.bottom-cta .download-buttons button {
  border: 1px solid var(--clr-primary);
}

@media (min-width: 992px) {
  .faq-answers {
    grid-template-columns: minmax(0, 16rem) minmax(0, 37.5rem);
    justify-content: center;
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .faq-answers__media {
    display: grid;
  }
}

/* =========================================================
   Interaction states (hover only where a pointer can hover)
   ========================================================= */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
  }

  .button-cta:hover {
    background-color: var(--clr-primary-dark);
    transform: translateY(-2px);
  }

  .download-buttons button:hover {
    transform: translateY(-2px);
  }

  .text-link:hover::after {
    width: 100%;
  }

  .button-cta:hover .icon-arrow,
  .text-link:hover .icon-arrow {
    transform: translateX(4px);
  }

  /* In RTL the arrow points left, so it nudges left. */
  [dir="rtl"] .button-cta:hover .icon-arrow,
  [dir="rtl"] .text-link:hover .icon-arrow {
    transform: translateX(-4px);
  }
}

.button-cta:active,
.download-buttons button:active {
  transform: scale(0.98);
}

/* =========================================================
   Scroll reveal — only with JS, and only when motion is welcome
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity var(--duration-slow) var(--ease-standard),
      translate var(--duration-slow) var(--ease-standard);
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Print — show everything the scroll reveal may still hide
   ========================================================= */
@media print {
  .js .reveal {
    opacity: 1;
    translate: none;
  }
}