/* =========================================================================
   Partner & Investor landing page — hi-fi
   Built on /colors_and_type.css (Fraunces, Figtree, Amiri).
   Typography is the design here. Body min 19px, generous line-height.
   ========================================================================= */

:root {
  --max:        1280px;
  --max-wide:   1440px;
  --pad-x:      40px;
  --pad-y:      72px;
  --pad-y-lg:   72px;

  --text-body:    19px;
  --lh-body:      1.6;
  --text-lead:    23px;
  --lh-lead:      1.45;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }

/* Selection */
::selection { background: var(--terracotta); color: var(--cream); }

/* ---- Reusable shells ----------------------------------------------- */
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.container-wide { max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--pad-x); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--terracotta);
  display: inline-block;
}

/* Display headings — Fraunces */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display-ar {
  font-family: var(--font-display-ar);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  direction: rtl;
  color: var(--ink-soft);
}

/* Body lead paragraph */
.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 239, 221, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--paper-line);
}
.header-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.brand-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
  display: inline-block;
  margin-top: 12px;
}
.brand-ar {
  font-family: var(--font-display-ar);
  font-size: 22px;
  color: var(--ink-soft);
  margin-inline-start: 4px;
}
.nav {
  display: flex;
  gap: 28px;
  margin-inline-start: 160px;
}
.nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
}
.nav a:hover { color: var(--ink); }
.header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-toggle {
  background: var(--clay);
  border-radius: 9999px;
  padding: 3px;
  display: inline-flex;
}
.lang-toggle button {
  all: unset;
  padding: 7px 14px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-toggle button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-rest);
}

/* Header CTA pill */
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid var(--ink);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.cta-ghost:hover { background: var(--ink); color: var(--cream); }

/* ---- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.hero-inner {
  max-width: var(--max-wide);
  margin-inline: auto;
  padding: 80px var(--pad-x) 64px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 680px;
}
.hero-copy { max-width: 620px; }
.hero-headline {
  margin-top: 28px;
  display: grid;
  gap: 6px;
}
.hero-headline .en {
  font-size: 92px;
  line-height: 0.98;
}
.hero-headline .ar {
  font-size: 76px;
  line-height: 1.1;
}
.hero-headline .accent { color: var(--terracotta); }
.hero-sub {
  margin-top: 28px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 480px;
}
.hero-ctas {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast) var(--ease), transform 90ms var(--ease);
}
.cta:active { transform: scale(.97); }
.cta-primary { background: var(--terracotta); color: var(--cream); }
.cta-primary:hover { background: var(--terracotta-deep); }
.cta-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.cta-outline:hover { background: var(--ink); color: var(--cream); }
.cta .arrow {
  font-family: var(--font-display);
  transition: transform var(--dur-fast) var(--ease);
}
.cta:hover .arrow { transform: translateX(3px); }

/* Hero photo: real photo on a subtle stage */
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  align-self: start;
  margin-top: 40px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 75%, rgba(220, 201, 163, .8), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--clay) 100%);
  box-shadow: var(--shadow-raised);
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero-photo-tag {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(31, 26, 20, .82);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* ---- Audience bar (the pinned strip) ------------------------------- */
.audience-bar {
  background: var(--ink);
  color: var(--cream);
  padding: 22px var(--pad-x);
}
.audience-bar-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.audience-bar-text {
  font-size: 17px;
  line-height: 1.4;
  color: var(--cream);
  max-width: 620px;
}
.audience-bar-text b { color: var(--terracotta); font-weight: 700; }
.audience-bar-ctas { display: flex; gap: 12px; }
.audience-bar-ctas .cta { padding-inline: 40px; }
.audience-bar .cta-primary { background: var(--terracotta); }
.audience-bar .cta-primary:hover { background: var(--terracotta-deep); }
.audience-bar .cta-outline {
  border-color: var(--cream);
  color: var(--cream);
}
.audience-bar .cta-outline:hover { background: var(--cream); color: var(--ink); }

/* ---- Manifesto ----------------------------------------------------- */
.manifesto {
  padding: 64px var(--pad-x) calc(var(--pad-y) - 16px);
}
.manifesto-inner {
  max-width: var(--max);
  margin-inline: auto;
}
.manifesto-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 1000px;
  text-wrap: balance;
  margin: 24px 0 0;
}
.manifesto-quote em {
  font-style: italic;
  color: var(--terracotta);
}
.manifesto-footer {
  margin-top: 36px;
  font-size: 16px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---- How it works — stacked photo rows ---------------------------- */
.how {
  padding: var(--pad-y) var(--pad-x) 72px;
  background: var(--cream);
  border-top: 1px solid var(--paper-line);
}
.how-head {
  max-width: var(--max);
  margin: 0 auto 80px;
}
.how-head h2 {
  margin-top: 18px;
  font-size: 64px;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 780px;
  text-wrap: balance;
}

.how-rows {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 96px;
}
.how-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.how-row.flip .how-row-photo { order: 2; }
.how-row.flip .how-row-text  { order: 1; }

.how-row-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 75%, rgba(220, 201, 163, .6), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--clay) 100%);
  box-shadow: var(--shadow-rest);
}
.how-row-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.how-row-photo.illus {
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--clay) 100%);
  display: grid;
  place-items: center;
}

.how-row-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 84px;
  line-height: 1;
  color: var(--terracotta);
  letter-spacing: -0.03em;
}
.how-row-text h3 {
  margin: 18px 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.how-row-text p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}
.how-row-detail {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--terracotta);
}

/* ---- Rules sheet — "No / Yes" -------------------------------------- */
.rules {
  padding: var(--pad-y-lg) var(--pad-x);
}
.rules-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.rules-aside h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.rules-aside p {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
}
.rules-list {
  display: grid;
  gap: 0;
}
.rules-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-line);
}
.rules-item:first-child { padding-top: 0; }
.rules-item .key {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rules-item.no .key { color: var(--ink); }
.rules-item.yes .key { color: var(--terracotta); }
.rules-item .val {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.rules-item .desc {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  line-height: 1.5;
}
/* No trailing separator below the final rule */
.rules-item:last-child { border-bottom: none; }

/* ---- Two ways in --------------------------------------------------- */
.ways {
  padding: var(--pad-y-lg) var(--pad-x);
  background: var(--cream);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.ways-head {
  max-width: var(--max);
  margin: 0 auto 48px;
  text-align: center;
}
.ways-head h2 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 760px;
  margin-inline: auto;
  text-wrap: balance;
}
.ways-head p {
  margin: 22px auto 0;
  font-size: 20px;
  color: var(--ink-soft);
  max-width: 56ch;
}
.ways-grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.way-card {
  background: var(--surface);
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow: var(--shadow-rest);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.way-card.featured {
  background: var(--ink);
  color: var(--cream);
}
.way-card.featured .eyebrow { color: var(--terracotta); }
.way-card.featured .eyebrow::before { background: var(--terracotta); }
.way-card.featured .way-card-h3 { color: var(--cream); }
.way-card.featured .way-card-body { color: rgba(246, 239, 221, .82); }
.way-card .way-card-h3 {
  margin: 18px 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.way-card .way-card-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
  flex-grow: 1;
}
.way-card-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 0;
}
.way-card-tag {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(31, 26, 20, .06);
  color: var(--ink-soft);
}
.way-card.featured .way-card-tag {
  background: rgba(246, 239, 221, .12);
  color: var(--cream);
}
.way-card-cta {
  margin-top: 36px;
  align-self: flex-start;
}
.way-card-bullets {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.way-card-bullets li {
  font-size: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.way-card-bullets li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ---- Contact ------------------------------------------------------- */
.contact {
  padding: var(--pad-y-lg) var(--pad-x);
  text-align: center;
  background: var(--sand);
}
.contact-inner {
  max-width: 880px;
  margin-inline: auto;
}
.contact h2 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 68px;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.contact h2 em {
  font-style: italic;
  color: var(--terracotta);
}
.contact-emails {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 32px;
  text-align: start;
  box-shadow: var(--shadow-rest);
}
.contact-card .eyebrow { margin-bottom: 12px; }
.contact-card a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: -0.02em;
  border-bottom: 1.5px solid var(--paper-line);
  margin-top: 8px;
  text-decoration: none;
}
.contact-card a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.contact-card p {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 38ch;
}

/* ---- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 64px var(--pad-x) 32px;
}
.footer-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .brand { color: var(--cream); font-size: 32px; }
.footer-brand .brand-ar { color: rgba(246, 239, 221, .8); }
.footer-brand .brand-dot { background: var(--terracotta); }
.footer-brand p {
  margin: 20px 0 0;
  font-size: 16px;
  color: rgba(246, 239, 221, .7);
  max-width: 36ch;
  line-height: 1.55;
}
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(246, 239, 221, .55);
  margin: 0 0 14px;
}
.footer-col a {
  display: block;
  color: var(--cream);
  font-size: 15px;
  margin-bottom: 8px;
  text-decoration: none;
  opacity: .85;
  border-bottom: none;
}
.footer-col a:hover { opacity: 1; }
.footer-col p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.footer-bottom {
  max-width: var(--max);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(246, 239, 221, .12);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(246, 239, 221, .55);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- RTL adjustments ---------------------------------------------- */
[dir="rtl"] .eyebrow::before { margin-inline-end: 0; }

/* ---- Bilingual hero subtle separator ------------------------------ */
.hero-headline-rule {
  width: 60px;
  height: 1.5px;
  background: var(--paper-line);
  margin: 14px 0;
}

/* ---- Decorative paper texture overlay (very subtle) --------------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture-paper.svg");
  background-size: 480px 480px;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- Small responsive concessions (1024 and below) --------------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-headline .en { font-size: 68px; }
  .hero-headline .ar { font-size: 56px; }
  .how-row, .how-row.flip { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .how-row.flip .how-row-photo { order: 0; }
  .how-row.flip .how-row-text  { order: 1; }
  .rules-inner { grid-template-columns: 1fr; gap: 32px; }
  .ways-grid, .contact-emails { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   MOBILE (≤640px) — phones
   Self-contained block. Desktop layout above is untouched.
   A few rules use !important to defeat hardcoded inline styles in index.html
   (manifesto height:520px, ways-head p width:600px, etc).
   ========================================================================= */
@media (max-width: 640px) {
  :root {
    --pad-x: 20px;
    --pad-y: 56px;
    --pad-y-lg: 56px;
  }

  /* ---- Header: drop in-page nav, keep brand + lang toggle + CTA --- */
  .header-inner {
    padding: 12px var(--pad-x);
    gap: 10px;
  }
  .brand { font-size: 20px; gap: 4px; }
  .brand img { height: 10px !important; margin: 0 4px !important; }
  .brand-ar { font-size: 16px; margin-inline-start: 2px; }
  .nav { display: none; }              /* footer carries the same links */
  .lang-toggle { padding: 2px; }
  .lang-toggle button { padding: 6px 10px; font-size: 12px; }
  .cta-ghost { padding: 8px 14px; font-size: 13px; border-width: 1px; }

  /* ---- Hero -------------------------------------------------------- */
  .hero-inner {
    padding: 32px var(--pad-x) 28px;
    gap: 28px;
    min-height: 0;
  }
  .hero-copy { max-width: 100%; }
  .hero-headline { margin-top: 14px; gap: 4px; }
  .hero-headline .en { font-size: 48px; line-height: 1.02; }
  .hero-headline .ar { font-size: 38px; line-height: 1.1; }
  .hero-headline-rule { margin: 8px 0; width: 44px; }
  /* Tame the inline padding-top:20px/30px on the Arabic hero lines */
  .hero-headline .display-ar[style] { padding-top: 10px !important; }
  .hero-sub { font-size: 17px; line-height: 1.45; margin-top: 18px; max-width: 100%; }
  .hero-photo { margin-top: 8px; border-radius: 16px !important; }

  /* ---- Audience bar: stack copy and full-width CTA ---------------- */
  .audience-bar { padding: 18px var(--pad-x); }
  .audience-bar-inner { gap: 14px; }
  .audience-bar-text { font-size: 15px; line-height: 1.45; }
  .audience-bar-ctas { width: 100%; }
  .audience-bar-ctas .cta {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* ---- Manifesto: kill the inline height:520px & 40px side pad ---- */
  .manifesto[style] {
    height: auto !important;
    padding: 44px var(--pad-x) 32px !important;
  }
  .manifesto-quote {
    font-size: 28px;
    line-height: 1.22;
    margin-top: 14px;
  }
  .manifesto-footer { margin-top: 22px; font-size: 13px; }

  /* ---- How it works ----------------------------------------------- */
  .how { padding: var(--pad-y) var(--pad-x) 40px; }
  .how-head { margin: 0 auto 36px; }
  .how-head h2 { font-size: 32px; margin-top: 10px; line-height: 1.1; }
  .how-rows { gap: 48px !important; }   /* defeat the inline gap:48px no-op + provide a phone value */
  .how-row, .how-row.flip { gap: 20px; }
  /* Numeral inline with heading: text container becomes a 2-col grid */
  .how-row-text {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    row-gap: 14px;
    align-items: center;
  }
  .how-row-num { grid-column: 1; font-size: 44px; line-height: 1; margin: 0; }
  .how-row-text h3 {
    grid-column: 2;
    font-size: 24px;
    line-height: 1.1;
    margin: 0;
  }
  .how-row-text p {
    grid-column: 1 / -1;
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    margin: 0;
  }
  .how-row-text .how-row-detail {
    grid-column: 1 / -1;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    margin-top: 0;
  }
  .how-row-photo { border-radius: 14px !important; }

  /* ---- Rules ("No / Yes") ----------------------------------------- */
  .rules-inner { gap: 24px; }
  .rules-aside h2 { font-size: 32px; margin-top: 10px; line-height: 1.08; }
  .rules-aside p { font-size: 16px; margin-top: 14px; max-width: 100%; }
  .rules-item {
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .rules-item .key { font-size: 26px; }
  .rules-item .val { font-size: 21px; line-height: 1.2; }
  .rules-item .desc { font-size: 14px; line-height: 1.45; margin-top: 4px; }
  /* Tighten the last item so the section transition lands midway between
     "...sibling inherits." and the "Get in touch" eyebrow */
  .rules-item:last-child { padding-bottom: 0; }

  /* ---- Two ways in (partner card) --------------------------------- */
  .ways { border-radius: 0; }
  .ways-head { margin: 0 auto 28px; }
  .ways-head h2 { font-size: 32px; line-height: 1.1; margin-top: 10px; }
  .ways-head p { font-size: 16px; }
  /* The empty ways-head <p> has inline width:600px which forces overflow */
  .ways-head p[style] { width: auto !important; max-width: 100% !important; }
  .ways-grid { gap: 20px; }
  .way-card { padding: 26px 20px !important; border-radius: 20px; }
  .way-card .way-card-h3 { font-size: 22px; margin: 12px 0 12px; line-height: 1.15; }
  .way-card .way-card-body { font-size: 16px; line-height: 1.5; max-width: 100%; }
  .way-card-bullets { margin-top: 18px; gap: 8px; }
  .way-card-bullets li { font-size: 15px; }
  .way-card-tags { margin-top: 18px; }
  .way-card-tag { font-size: 11.5px; padding: 5px 10px; }
  .way-card-cta {
    margin-top: 24px;
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* ---- Contact ---------------------------------------------------- */
  .contact { padding: var(--pad-y-lg) var(--pad-x); }
  .contact h2 { font-size: 38px; margin-top: 14px; line-height: 1.05; }
  .contact-emails { margin-top: 32px; gap: 16px; }
  .contact-card { padding: 24px 20px; border-radius: 18px; }
  .contact-card a { font-size: 22px; }
  .contact-card p { font-size: 14px; }

  /* ---- Footer ----------------------------------------------------- */
  .site-footer { padding: 44px var(--pad-x) 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand .brand { font-size: 24px !important; }
  .footer-brand .brand img { height: 12px !important; margin: 0 6px !important; }
  .footer-brand p { font-size: 14px; max-width: 100%; }
  .footer-col h5 { margin-bottom: 10px; }
  .footer-col a, .footer-col p { font-size: 15px; }
  .footer-bottom {
    margin-top: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
  }
}

/* ---- Tiny phones (≤380px) — small extra trim --------------------- */
@media (max-width: 380px) {
  .hero-headline .en { font-size: 42px; }
  .hero-headline .ar { font-size: 34px; }
  .manifesto-quote { font-size: 25px; }
  .how-head h2,
  .rules-aside h2,
  .ways-head h2 { font-size: 28px; }
  .contact h2 { font-size: 34px; }
  .cta-ghost { padding: 7px 12px; font-size: 12px; }
}