/* ==========================================================================
   Pearl Run — shared by the phones and the big screen.
   The أحسن سوية / Better Together system (brand deck; the site's DESIGN.md):
   grape leads, emerald and burnt sienna answer, ink grounds, paper breathes.
   Square corners, colour in full fields, diamond geometry.
   Contrast rules kept from the site: white on grape, ink on emerald, ink on
   sienna (never white on sienna), emerald on grape for large display only.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plex-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/plex-arabic-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plex-latin-400.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/plex-latin-700.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;
}
/* English display only, as on the brand's posters. */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/raleway-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 {
  --grape: #7a37b9;
  --grape-600: #5b2491;
  --grape-800: #3a1560;
  --grape-900: #24103b;
  --grape-300: #a77fd6;
  --grape-100: #efe7f8;
  --emerald: #40cd7e;
  --emerald-700: #0f7a45;
  --sienna: #f27043;
  --sienna-700: #b3421a;
  /* Pink October: a deep, saturated rose, at the team's request. */
  --pink: #e4458f;
  --pink-700: #a82266;
  --pink-900: #5e0f3a;
  --pink-950: #3d0a26;
  --pink-200: #ffd6e8;
  --ink: #1c1921;
  --ink-800: #2a2531;
  --ink-700: #4a4452;
  --ink-600: #625b6b;
  --paper: #f3f2f5;
  --line: #ddd9e2;
  --white: #fff;

  --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', system-ui, sans-serif;
  --font-display: var(--font);
  --radius: 2px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-s: env(safe-area-inset-left, 0px);
  --safe-e: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

:root:lang(en) {
  --font-display: 'Raleway', var(--font);
}

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

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

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

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums tabular-nums;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding: 0.55em 1.4em;
  border: 0;
  border-radius: var(--radius);
  background: var(--grape);
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
  touch-action: manipulation;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn--emerald {
  background: var(--emerald);
  color: var(--ink);
}

.btn--white {
  background: var(--white);
  color: var(--grape-600);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* A diamond, for bullets and badges. */
.dia {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* Names others typed, shown safely next to each other. */
.name {
  unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}