:root {
  color-scheme: dark;
  --cream: #EDE7DB;
  --muted: rgba(237, 231, 219, 0.72);
  --dim: rgba(237, 231, 219, 0.5);
  --hair: rgba(237, 231, 219, 0.2);
  --gold: #D4A15E;
  --gold-light: #E2B979;
  --navy: #052742;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --brand: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* One scale unit tied to the smaller of width and height,
     so the whole page fits one screen without scrolling */
  --u: min(1vw, 1.35dvh);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #080f17; }

body {
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Photo background, darkened at the top so the type reads cleanly */
.background { position: fixed; inset: 0; pointer-events: none; }
.background img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(6, 11, 18, 0.55), rgba(6, 11, 18, 0) 75%),
    linear-gradient(180deg, rgba(6, 11, 18, 0.35), rgba(6, 11, 18, 0.1) 55%, rgba(6, 11, 18, 0.45));
}

.page {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(calc(var(--u) * 3), env(safe-area-inset-top), 1.25rem)
    1.5rem
    max(calc(var(--u) * 3), env(safe-area-inset-bottom), 1.25rem);
  text-align: center;
}

/* Language toggle: a frosted-glass pill with a gold thumb under the
   current language. Top right in English, top left in Arabic. EN always
   sits on the left so the toggle looks the same on both pages. */
.lang-toggle {
  position: absolute;
  top: max(1.1rem, env(safe-area-inset-top));
  right: max(1.4rem, env(safe-area-inset-right));
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(237, 231, 219, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 24px rgba(0, 0, 0, 0.28);
  font-family: "IBM Plex Sans Arabic", var(--sans);
  animation: appear 1.2s ease-out 1.5s both;
}
html[dir="rtl"] .lang-toggle { right: auto; left: max(1.4rem, env(safe-area-inset-left)); }
.lang-toggle::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 192, 130, 0.95), rgba(212, 161, 94, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(5, 39, 66, 0.15), 0 2px 12px rgba(212, 161, 94, 0.35);
  transition: transform 0.32s cubic-bezier(.3, .7, .2, 1);
}
.lang-toggle[data-active="ar"]::before { transform: translateX(100%); }
.lang-toggle a {
  position: relative;
  min-width: 3.3rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: color 0.25s;
}
.lang-toggle a[lang="ar"] { letter-spacing: 0; }
.lang-toggle a:hover { color: var(--cream); }
.lang-toggle a[aria-current="page"] { color: var(--navy); cursor: default; }
.lang-toggle a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Logo lockup: mark centred on the name, tagline under the name */
.lockup {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: calc(var(--u) * 1.8);
  text-align: left;
}
.mark {
  grid-column: 1; grid-row: 1 / span 2;
  position: relative;
  display: block;
  /* Explicit width and height (logo is 559 x 320) so the mark never collapses */
  width: max(calc(var(--u) * 12.23), 5.59rem);
  height: max(calc(var(--u) * 7), 3.2rem);
  flex: none;
}
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Wordmark set like the logo files: LEADER bold, CAMP light */
.name {
  grid-column: 2; grid-row: 1;
  align-self: end;
  margin: 0;
  font-family: var(--brand);
  font-size: max(calc(var(--u) * 3.6), 1.55rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.name .bold { font-weight: 700; }
.name .light { font-weight: 300; }
.tagline {
  grid-column: 2; grid-row: 2;
  align-self: start;
  margin: calc(var(--u) * 0.8) 0 0 0.08em;
  font-family: var(--brand);
  font-weight: 400;
  font-size: max(calc(var(--u) * 1.5), 0.85rem);
  color: var(--muted);
}
.dot { color: var(--gold); }

main { width: min(100%, 62rem); margin-top: calc(var(--u) * 5); }

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: max(calc(var(--u) * 6), 2.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  font-variation-settings: "opsz" 72;
}

.support {
  margin: calc(var(--u) * 2) auto 0;
  max-width: 44rem;
  font-size: max(calc(var(--u) * 1.75), 1rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

/* Countdown */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, calc(var(--u) * 62));
  margin: calc(var(--u) * 4.2) auto 0;
}
.unit + .unit { border-inline-start: 1px solid var(--hair); }
.number {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: max(calc(var(--u) * 6), 2.2rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-variation-settings: "opsz" 72;
}
.label {
  display: block;
  margin-top: calc(var(--u) * 0.9);
  font-family: var(--serif);
  font-style: italic;
  font-size: max(calc(var(--u) * 1.45), 0.85rem);
  color: var(--muted);
}
.launch-status { margin: 0; font-family: var(--serif); font-style: italic; color: var(--cream); }
.launch-status:not(:empty) { margin-top: calc(var(--u) * 1.5); }

/* Email sign-up */
.capture { position: relative; width: min(100%, 34rem); margin: calc(var(--u) * 4.5) auto 0; }

form {
  display: flex;
  height: max(calc(var(--u) * 5.4), 3.1rem);
  border: 1px solid rgba(237, 231, 219, 0.32);
  border-radius: 6px;
  background: rgba(10, 16, 24, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
input, button { font: inherit; }
input[type=email] {
  flex: 1;
  min-width: 0;
  padding: 0 1.25rem;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 1rem;
  font-weight: 300;
}
input::placeholder { color: var(--dim); opacity: 1; }
button {
  flex: none;
  padding: 0 1.75rem;
  border: 0;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover { background: var(--gold-light); }
button:disabled { cursor: wait; opacity: 0.8; }
form:focus-within { border-color: rgba(237, 231, 219, 0.6); }
input:focus-visible { outline: none; }
button:focus-visible { outline: 2px solid var(--navy); outline-offset: -5px; }

.form-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--cream);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.form-status[data-kind="error"] { color: #FFC2A8; }

.sr-only, .trap {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Logo motion: the mark draws itself along its loop, the name follows,
   then a slow light passes over the mark every few seconds */
.draw {
  stroke-dasharray: 1360;
  animation: draw 2.4s cubic-bezier(.55, .05, .3, 1) 0.2s both;
}
@keyframes draw { from { stroke-dashoffset: 1360; } to { stroke-dashoffset: 0; } }

.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 228, 0.85) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask: url(/assets/leader-camp-mark.webp) center / 100% 100% no-repeat;
  mask: url(/assets/leader-camp-mark.webp) center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  animation: sheen 9s ease-in-out 3s infinite;
  pointer-events: none;
}
@keyframes sheen {
  0% { background-position: 150% 0; }
  22%, 100% { background-position: -50% 0; }
}

.name, .tagline { animation: rise 1s cubic-bezier(.2, .8, .3, 1) both; }
.name { animation-delay: 1.1s; }
.tagline { animation-delay: 1.35s; }
@keyframes rise { from { opacity: 0; transform: translateX(-0.4em); } to { opacity: 1; transform: none; } }

.reveal { animation: appear 1.2s ease-out 1.5s both; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .draw, .mark::after, .name, .tagline, .reveal, .lang-toggle { animation: none; }
  button, .lang-toggle::before, .lang-toggle a { transition: none; }
}

/* Arabic page (/ar/). The lockup uses the Arabic logo and reads right to
   left: mark on the right, the Arabic wordmark (an image cut from the brand
   files) beside it, tagline under it. Digits stay in Newsreader so the
   countdown matches the English page. Arabic script is never letter-spaced
   or set in italics. */
html[lang="ar"] {
  --serif-ar: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", Tahoma, serif;
  --sans-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;
}
html[lang="ar"] body { font-family: var(--sans-ar); }
html[lang="ar"] .lockup { text-align: right; }
/* Wordmark is 1045 x 230; set by height so it scales with the mark */
.wordmark { display: block; width: auto; height: max(calc(var(--u) * 3.3), 1.45rem); }
html[lang="ar"] .name { justify-self: start; }
html[lang="ar"] .tagline {
  justify-self: start;
  margin: calc(var(--u) * 0.9) 0.06em 0 0;
  font-family: var(--sans-ar);
}
html[lang="ar"] .name, html[lang="ar"] .tagline { animation-name: rise-rtl; }
@keyframes rise-rtl { from { opacity: 0; transform: translateX(0.4em); } to { opacity: 1; transform: none; } }
html[lang="ar"] h1 {
  font-family: var(--serif-ar);
  font-weight: 400;
  font-size: max(calc(var(--u) * 5.2), 1.9rem);
  line-height: 1.45;
  letter-spacing: 0;
}
html[lang="ar"] .support { line-height: 1.75; margin-top: calc(var(--u) * 1.6); }
html[lang="ar"] .label {
  font-family: var(--sans-ar);
  font-style: normal;
  font-weight: 400;
  margin-top: calc(var(--u) * 1.1);
}
html[lang="ar"] .launch-status { font-family: var(--serif-ar); font-style: normal; }
html[lang="ar"] button { font-family: var(--sans-ar); font-size: 1rem; letter-spacing: 0; }
html[lang="ar"] .form-status { line-height: 1.6; }
/* The email field types left-to-right; the Arabic hint reads from the right */
html[lang="ar"] input[type=email]:placeholder-shown { direction: rtl; }

/* Phones */
@media (max-width: 600px) {
  :root { --u: min(2.6vw, 1.15dvh); }
  .br { display: none; }
  .mark { width: 5.42rem; height: 3.1rem; }
  .name { font-size: 1.6rem; }
  .wordmark { height: 1.55rem; }
  .tagline { font-size: 0.85rem; }
  h1 { font-size: min(9.6vw, 2.6rem); line-height: 1.08; }
  html[lang="ar"] h1 { font-size: min(8.6vw, 2.3rem); line-height: 1.5; }
  .lang-toggle { top: max(0.8rem, env(safe-area-inset-top)); right: 1rem; }
  html[dir="rtl"] .lang-toggle { right: auto; left: 1rem; }
  .lang-toggle a { min-width: 3rem; padding: 0.38rem 0.8rem; font-size: 0.8rem; }
  .support { font-size: 1rem; max-width: 22rem; }
  .countdown { width: 100%; }
  .number { font-size: min(11vw, 3rem); }
  .label { font-size: 0.85rem; }
  form { flex-direction: column; height: auto; gap: 0.6rem; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
  input[type=email] {
    flex: none;
    width: 100%;
    height: 3.1rem;
    border: 1px solid rgba(237, 231, 219, 0.32);
    border-radius: 6px;
    background: rgba(10, 16, 24, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 16px; /* stops iOS zooming in */
  }
  input[type=email]:focus-visible { border-color: rgba(237, 231, 219, 0.6); }
  button { height: 3.1rem; border-radius: 6px; }
}

/* Short phones: tighten the support line */
@media (max-width: 600px) and (max-height: 700px) {
  .support { font-size: 0.92rem; }
  .name { font-size: 1.4rem; }
  .wordmark { height: 1.35rem; }
  .mark { width: 4.72rem; height: 2.7rem; }
}
/* Narrow phones (320px): keep the logo lockup on one line */
@media (max-width: 359px) {
  .mark { width: 4.54rem; height: 2.6rem; }
  .name { font-size: 1.3rem; }
  .wordmark { height: 1.3rem; }
  .tagline { font-size: 0.8rem; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .support { display: none; }
}

/* Short laptop windows and landscape phones */
@media (min-width: 601px) and (max-height: 560px) {
  .support { display: none; }
}