/* ===========================================================================
   Nkawrou — lime/black redesign (2026-08-10)
   ---------------------------------------------------------------------------
   Shared stylesheet for the redesigned surface: the 5 locale homepages
   (/, /ar/, /en/, /de/, /it/) and the 4 subpages (/courts, /faq,
   /court-partners, /city/). Those pages do NOT load styles.css any more:
   every class here is namespaced `nk-` and the file owns its own reset, so
   the pages still on the old theme (blog, investors, partnerships, contact,
   download, legal, the per-court and per-city pages) keep styles.css
   untouched. One file means one cache entry across the whole redesign, and
   no chance of the tokens drifting between homepage and subpages.

   Identity comes from the app: lime #d3f338 on ink #111 over a warm paper
   background — replacing the site's old dark-green theme.

   Fonts are self-hosted (landing/fonts/): the CSP has no font-src/style-src
   entry for Google Fonts, and self-hosting avoids a third-party render-block
   on the critical path. Manrope covers latin; Tajawal covers the Arabic
   range and is fetched only when Arabic glyphs actually render (unicode-range).
   =========================================================================== */

/* --- Manrope (variable 500–800), latin + latin-ext ---------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tajawal, Arabic subset only (the /ar/ homepage + the Arabic caption
       that appears on every locale) ------------------------------------- */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-ar-500.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: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-ar-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: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/tajawal-ar-800.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;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --lime: #d3f338;
  --ink: #111111;
  --bg: #f7f6f2;
  --card: #ffffff;
  --line: #e2e1db;

  --dark-bg: #111111;
  --dark-card: #1e1f19;
  --dark-line: #3a3b33;
  --dark-rule: #26271f;
  --dark-link: #d9dad2;

  --t1: #111111;      /* primary   */
  --t2: #5c5f58;      /* secondary */
  --t3: #8a8a84;      /* muted     */
  --t3b: #8b8c82;     /* muted, on dark */
  --t4: #b8b9b2;      /* faint     */
  --dark-body: #a2a39a;

  --acc: #4a6b00;     /* eyebrow / link on light */
  --on-lime: #3a5200; /* deep green ON the lime block */
  --amber: #f5a800;   /* "complet · liste d'attente" */

  --container: 1200px;
  --pad: 48px;        /* section side padding — shrinks on narrow screens */
  --inset: 24px;      /* full-bleed band inset from the page edges */
  --r-band: 28px;
  --r-card: 20px;
  --r-tile: 18px;

  --shadow-card: 0 12px 32px rgba(0, 0, 0, .14);
  --shadow-dark: 0 12px 32px rgba(0, 0, 0, .2);
  --shadow-phone: 0 30px 60px rgba(0, 0, 0, .22);
}

/* --- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: Manrope, Tajawal, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[dir="rtl"] body { font-family: Manrope, Tajawal, system-ui, 'Segoe UI', sans-serif; }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
  border-radius: 6px;
}

.nk-wrap {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--bg);
}

/* Screen-reader-only (skip link, redundant labels). */
.nk-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nk-skip:focus {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  width: auto; height: auto;
  clip: auto;
  z-index: 100;
  background: var(--ink);
  color: var(--lime);
  padding: 12px 20px;
  border-radius: 999px;
  font: 800 13px/1 Manrope, sans-serif;
}

/* Lime highlighter — the one type flourish, used on the last phrase of the
   H1 and of the Explore H2. box-decoration-break keeps it correct when the
   phrase wraps to a second line. */
.nk-hl {
  background: linear-gradient(180deg, transparent 60%, var(--lime) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Shared section furniture ------------------------------------------- */
.nk-sec { padding: 64px var(--pad); }
.nk-sec--tight { padding-block: 24px 64px; }
.nk-sec--split { padding-block: 0 64px; }

.nk-head { display: flex; flex-direction: column; gap: 8px; }
.nk-eyebrow {
  font: 800 12px/1 Manrope, sans-serif;
  color: var(--acc);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.nk-eyebrow--lime { color: var(--lime); }
.nk-eyebrow--onlime { color: var(--on-lime); }
.nk-h2 {
  font: 800 34px/1.15 Manrope, sans-serif;
  color: var(--t1);
  letter-spacing: -.8px;
  text-wrap: balance;
}
.nk-sub { font: 500 15px/1.5 Manrope, sans-serif; color: var(--t2); }
.nk-sub--dark { color: var(--dark-body); }

/* Pills ------------------------------------------------------------------ */
.nk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font: 800 13.5px/1 Manrope, sans-serif;
  padding: 14px 24px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.nk-pill--ink { background: var(--ink); color: var(--lime); }
.nk-pill--ink:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 17, 17, .26); }
.nk-pill--lime { background: var(--lime); color: var(--ink); }
.nk-pill--lime:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 17, 17, .2); }
.nk-pill--ghost { border: 1.5px solid var(--dark-line); color: #fff; padding: 13px 22px; font-size: 13px; }
.nk-pill--ghost:hover { background: var(--dark-card); }
.nk-pill--lg { font-size: 15px; padding: 17px 32px; }

/* --- Scroll reveal ------------------------------------------------------
   Hide-states are gated on html.js (set inline before this file loads) so a
   no-JS visitor — or a JS error — never ends up with an invisible page. */
html.js .nk-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
html.js .nk-reveal.in > * { opacity: 1; transform: none; }
html.js .nk-reveal.in > :nth-child(2) { transition-delay: .07s; }
html.js .nk-reveal.in > :nth-child(3) { transition-delay: .14s; }
html.js .nk-reveal.in > :nth-child(4) { transition-delay: .21s; }
html.js .nk-reveal.in > :nth-child(5) { transition-delay: .28s; }
html.js .nk-reveal.in > :nth-child(6) { transition-delay: .35s; }

/* ===========================================================================
   1. Sticky nav
   =========================================================================== */
.nk-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad);
  background: rgba(247, 246, 242, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nk-nav-left { display: flex; align-items: center; gap: 36px; }
/* The wordmark is the badge, not bare type — it is the mark people recognise
   in the app and the stores, so it stays on every page of the site. */
.nk-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 44px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font: 800 17px/1 Manrope, sans-serif;
  letter-spacing: -.4px;
  white-space: nowrap;
  transition: transform .15s ease;
}
.nk-brand:hover { transform: translateY(-1px); }
.nk-nav-links { display: flex; gap: 24px; font: 700 13px/1 Manrope, sans-serif; color: var(--t2); }
.nk-nav-links a { transition: color .15s ease; }
.nk-nav-links a:hover { color: var(--t1); }
.nk-nav-right { display: flex; align-items: center; gap: 16px; }

/* Language menu — native <details>, so it works without JS. */
.nk-lang { position: relative; }
.nk-lang > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 13px/1 Manrope, sans-serif;
  color: var(--t2);
  cursor: pointer;
  padding: 6px 2px;
}
.nk-lang > summary::-webkit-details-marker { display: none; }
.nk-lang > summary:hover { color: var(--t1); }
.nk-lang-caret { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.nk-lang-list {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 150px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.nk-lang-list a {
  padding: 9px 12px;
  border-radius: 9px;
  font: 700 13px/1 Manrope, sans-serif;
  color: var(--t2);
}
.nk-lang-list a:hover { background: var(--bg); color: var(--t1); }
.nk-lang-list a[aria-current="page"] { background: var(--ink); color: var(--lime); }

.nk-nav-cta {
  background: var(--ink);
  color: var(--lime);
  font: 800 13px/1 Manrope, sans-serif;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .15s ease;
}
.nk-nav-cta:hover { transform: translateY(-1px); }

/* Burger — desktop-hidden, revealed under 1024px by the media query. */
.nk-burger {
  display: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  cursor: pointer;
  color: var(--t1);
}
.nk-burger svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ===========================================================================
   2. Hero
   =========================================================================== */
.nk-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px var(--pad) 72px;
  align-items: center;
}
.nk-hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.nk-announce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 12px/1.35 Manrope, sans-serif;
  color: var(--t1);
  transition: border-color .15s ease, transform .15s ease;
}
.nk-announce:hover { border-color: var(--lime); transform: translateY(-1px); }
.nk-announce b {
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.nk-h1 {
  font: 800 54px/1.04 Manrope, sans-serif;
  color: var(--t1);
  letter-spacing: -1.6px;
  text-wrap: balance;
}
.nk-lead { font: 500 16.5px/1.6 Manrope, sans-serif; color: var(--t2); max-width: 480px; }

.nk-stores { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nk-store {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nk-store:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 17, 17, .24); }
.nk-store svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.nk-store span { display: flex; flex-direction: column; gap: 2px; }
.nk-store small { font: 500 9.5px/1 Manrope, sans-serif; color: var(--t4); }
.nk-store b { font: 800 14px/1 Manrope, sans-serif; }
.nk-stores-note { font: 600 13px/1.4 Manrope, sans-serif; color: var(--t2); margin-inline-start: 6px; }

.nk-proof { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.nk-proof span:last-child { font: 600 13px/1.4 Manrope, sans-serif; color: var(--t2); }
.nk-avatars { display: flex; flex: none; }
.nk-avatars i {
  width: 30px; height: 30px;
  border-radius: 15px;
  border: 2px solid var(--bg);
  font: 800 10.5px/26px Manrope, sans-serif;
  color: #fff;
  text-align: center;
  font-style: normal;
}
.nk-avatars i + i { margin-inline-start: -9px; }
.nk-avatars i:nth-child(1) { background: var(--lime); color: var(--ink); }
.nk-avatars i:nth-child(2) { background: #5a7a00; }
.nk-avatars i:nth-child(3) { background: #3a3a36; }
.nk-avatars i:nth-child(4) { background: var(--t3); }

/* Hero stage: phone mock + two floating proof cards ---------------------- */
.nk-stage { position: relative; height: 480px; }

.nk-phone {
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  transform: translateX(-72%);
  width: 250px;
  height: 480px;
  background: var(--ink);
  border-radius: 32px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
}
html[dir="rtl"] .nk-phone { transform: translateX(72%); }
.nk-screen {
  width: 100%; height: 100%;
  background: #f2f1ed;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nk-screen-bar {
  padding: 14px 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nk-screen-bar b { font: 800 13px/1 Manrope, sans-serif; color: var(--t1); }
.nk-screen-bar span {
  background: var(--card);
  font: 800 9px/1 Manrope, sans-serif;
  color: var(--t1);
  padding: 5px 8px;
  border-radius: 999px;
}
.nk-screen-title { padding: 12px 12px 0; font: 800 14px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-mini {
  margin: 10px 12px 0;
  background: var(--card);
  border-radius: 14px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nk-mini + .nk-mini { margin-top: 8px; }
.nk-mini-top { display: flex; justify-content: space-between; }
.nk-mini-top b { font: 800 13px/1 Manrope, sans-serif; color: var(--t1); }
.nk-mini-top span { background: var(--lime); font: 800 9px/1 Manrope, sans-serif; color: var(--ink); padding: 4px 7px; border-radius: 999px; }
.nk-mini-sub { font: 700 10.5px/1.3 Manrope, sans-serif; color: #6b6b66; }
.nk-mini-cta {
  font: 800 9.5px/1 Manrope, sans-serif;
  padding: 7px 0;
  border-radius: 999px;
  text-align: center;
}
.nk-mini-cta--wait { background: var(--ink); color: var(--lime); }
.nk-mini-cta--join { background: var(--lime); color: var(--ink); }

.nk-float-live {
  position: absolute;
  inset-inline-end: 0;
  top: 56px;
  width: 140px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nk-float-live b:first-child { font: 800 10.5px/1 Manrope, sans-serif; color: var(--acc); }
.nk-float-live b + b { font: 800 12px/1.3 Manrope, sans-serif; color: var(--t1); }
.nk-float-live span { font: 600 10.5px/1.35 Manrope, sans-serif; color: var(--t3); }

.nk-float-rep {
  position: absolute;
  inset-inline-end: 24px;
  bottom: 36px;
  background: var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-dark);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nk-float-rep i {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 17px;
  background: var(--lime);
  font: 800 13px/34px Manrope, sans-serif;
  font-style: normal;
  color: var(--ink);
  text-align: center;
}
.nk-float-rep span { font: 700 11px/1.4 Manrope, sans-serif; color: #fff; }
.nk-float-rep span small { display: block; font: 600 11px/1.4 Manrope, sans-serif; color: var(--t3b); }

/* Live dot on the two "En direct" eyebrows. */
.nk-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-inline-end: 5px;
  vertical-align: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .nk-dot { animation: nk-pulse 2.4s ease-in-out infinite; }
}
@keyframes nk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ===========================================================================
   3. "3 étapes"
   =========================================================================== */
.nk-sec-body { display: flex; flex-direction: column; gap: 36px; }

.nk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nk-step {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nk-step-top { display: flex; align-items: center; justify-content: space-between; }
.nk-step-ic {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nk-step-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nk-step-idx { font: 800 11px/1 Manrope, sans-serif; color: var(--t4); letter-spacing: 2px; }
.nk-step h3 { font: 800 17px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-step p { font: 500 13.5px/1.6 Manrope, sans-serif; color: var(--t2); }
/* Card 3 is the dark punchline the sequence lands on. */
.nk-step--ink { background: var(--ink); }
.nk-step--ink h3 { color: #fff; }
.nk-step--ink p { color: var(--dark-body); }
.nk-step--ink .nk-step-idx { color: var(--t2); }

/* ===========================================================================
   4. "Les 3 galères"
   =========================================================================== */
.nk-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nk-pain {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nk-pain h3 { font: 800 18px/1.3 Manrope, sans-serif; color: var(--t1); }
.nk-pain p { font: 500 13.5px/1.6 Manrope, sans-serif; color: var(--t2); }

/* ===========================================================================
   5. "En direct" — dark inset band (live data)
   =========================================================================== */
.nk-live {
  margin: 0 var(--inset);
  background: var(--dark-bg);
  border-radius: var(--r-band);
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.nk-live-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.nk-live-head .nk-h2 { color: #fff; }
.nk-live-label {
  font: 800 12px/1 Manrope, sans-serif;
  color: var(--t3b);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nk-live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nk-live-block { display: flex; flex-direction: column; gap: 14px; }

/* Cards injected by home-preview.js (matches + partner venues). */
.pcard {
  background: var(--dark-card);
  border-radius: var(--r-tile);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .15s ease, background-color .15s ease;
}
a.pcard:hover { transform: translateY(-3px); background: #24261e; }
.pcard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pcard-when { font: 800 20px/1 Manrope, sans-serif; color: var(--lime); font-variant-numeric: tabular-nums; }
.pcard-when--sm { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.pcard-chip {
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pcard-chip.muted { background: var(--dark-line); color: var(--dark-link); }
.pcard-title { font: 800 14px/1.3 Manrope, sans-serif; color: #fff; }
.pcard-sub { font: 600 12px/1.4 Manrope, sans-serif; color: var(--t3b); }
.pcard-status { font: 700 11.5px/1 Manrope, sans-serif; color: var(--lime); }
.pcard-status.is-full { color: var(--amber); }

/* Loading skeleton + empty/error states. */
.pcard-skel { min-height: 118px; position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .pcard-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
    animation: nk-shimmer 1.4s linear infinite;
  }
}
@keyframes nk-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.preview-state {
  grid-column: 1 / -1;
  background: var(--dark-card);
  border-radius: var(--r-tile);
  padding: 18px;
  font: 600 13px/1.5 Manrope, sans-serif;
  color: var(--t3b);
}
a.preview-state { color: var(--lime); }

/* Live ticker (real match + venue rows, decorative marquee). */
.live-ticker {
  overflow: hidden;
  border-block: 1px solid var(--dark-rule);
  padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; gap: 10px; width: max-content; animation: nk-drift 46s linear infinite; }
html[dir="rtl"] .ticker-track { animation-direction: reverse; }
@keyframes nk-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font: 600 11.5px/1 Manrope, sans-serif;
  color: var(--t3b);
  background: var(--dark-card);
  border-radius: 999px;
  padding: 8px 14px;
}
.tick-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }

/* ===========================================================================
   6. "Explore"
   =========================================================================== */
.nk-explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nk-tile {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nk-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.nk-tile-ic { font: 400 26px/1 system-ui, 'Segoe UI Emoji', sans-serif; }
.nk-tile b { font: 800 15.5px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-tile span { font: 500 12.5px/1.4 Manrope, sans-serif; color: var(--t3); }

/* ===========================================================================
   7. + 8. Split sections (Ta bande / Padel)
   =========================================================================== */
.nk-split {
  padding: 0 var(--pad) 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.nk-split-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.nk-split-copy p { font: 500 15px/1.65 Manrope, sans-serif; color: var(--t2); }
.nk-split-media { position: relative; }

/* Image slot. Swapping in a new photo means changing src/srcset only — the
   frame, radius and overlapping card hold the 2:1 crop in place. Background
   colour shows through until the (lazy, below-the-fold) image decodes. */
.nk-frame { height: 300px; border-radius: 22px; overflow: hidden; background: var(--ink); }
.nk-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.nk-overlay {
  position: absolute;
  bottom: -20px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 40px);
}
.nk-overlay--start { inset-inline-start: 20px; }
.nk-overlay--end { inset-inline-end: 20px; }
.nk-overlay--ink {
  background: var(--ink);
  box-shadow: var(--shadow-dark);
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.nk-overlay b { font: 800 13px/1.3 Manrope, sans-serif; color: var(--t1); }
.nk-overlay small { display: block; font: 600 11px/1.35 Manrope, sans-serif; color: var(--t3); }
.nk-overlay--ink b { color: #fff; }
.nk-overlay--ink small { font-size: 11.5px; color: var(--t3b); }
.nk-overlay--ink .nk-pill { font-size: 11px; padding: 8px 14px; margin-top: 2px; }

.nk-avatars--sm i {
  width: 28px; height: 28px;
  border-radius: 14px;
  border: 2px solid var(--card);
  font: 800 9.5px/24px Manrope, sans-serif;
}
.nk-avatars--sm i + i { margin-inline-start: -8px; }
.nk-avatars--sm i:nth-child(2) { background: #5a7a00; }

/* ===========================================================================
   9. "Couverture" — city chips
   =========================================================================== */
.nk-cover { padding: 0 var(--pad) 64px; display: flex; flex-direction: column; gap: 24px; }
.nk-cover .nk-sub { max-width: 640px; }
.nk-cities { display: flex; flex-wrap: wrap; gap: 10px; }
.nk-chip {
  background: var(--card);
  font: 700 13px/1 Manrope, sans-serif;
  color: var(--t1);
  padding: 11px 16px;
  border-radius: 999px;
}
.nk-chip--add {
  background: var(--lime);
  font-weight: 800;
  transition: transform .15s ease;
}
.nk-chip--add:hover { transform: translateY(-2px); }

/* ===========================================================================
   10. "La communauté" — stats
   =========================================================================== */
.nk-community { padding: 0 var(--pad) 64px; display: flex; flex-direction: column; gap: 28px; }
.nk-community .nk-sub strong { font-weight: 800; color: var(--t1); }
.nk-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.nk-stat {
  background: var(--card);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num { font: 800 24px/1 Manrope, sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.nk-stat span { font: 600 11.5px/1.35 Manrope, sans-serif; color: var(--t3); }
/* The accent goes to the strongest claim only — small counts stay quiet. */
.nk-stat--lime { background: var(--lime); }
.nk-stat--lime span { color: var(--on-lime); }

/* ===========================================================================
   11. Owner banner
   =========================================================================== */
.nk-owner {
  margin: 0 var(--inset);
  background: var(--card);
  border-radius: var(--r-band);
  padding: 48px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.nk-owner div { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.nk-owner h2 { font: 800 30px/1.15 Manrope, sans-serif; color: var(--t1); letter-spacing: -.7px; }
.nk-owner p { font: 500 14.5px/1.6 Manrope, sans-serif; color: var(--t2); }
.nk-owner .nk-pill { flex: none; font-size: 14px; padding: 16px 28px; }

/* ===========================================================================
   12. "Coup d'envoi" — final CTA
   =========================================================================== */
.nk-kickoff {
  margin: var(--inset);
  background: var(--lime);
  border-radius: var(--r-band);
  padding: 72px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.nk-kickoff h2 { font: 800 44px/1.08 Manrope, sans-serif; color: var(--t1); letter-spacing: -1.2px; text-wrap: balance; }
.nk-kickoff p { font: 500 16px/1.5 Manrope, sans-serif; color: var(--on-lime); }
.nk-kickoff .nk-pill { margin-top: 6px; }

/* ===========================================================================
   13. Footer
   =========================================================================== */
.nk-foot {
  background: var(--dark-bg);
  border-radius: var(--r-band) var(--r-band) 0 0;
  margin: 0 var(--inset);
  padding: 56px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nk-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.nk-foot-id { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* Same badge, inverted — a black mark on the black footer would disappear. */
.nk-foot-id > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  background: var(--bg);
  color: var(--ink);
  border-radius: 12px;
  font: 800 17px/1 Manrope, sans-serif;
  letter-spacing: -.4px;
}
.nk-foot-tag { font: 500 13px/1.5 Manrope, sans-serif; color: var(--t3b); }
.nk-foot-id .nk-pill { font-size: 12.5px; padding: 11px 18px; margin-top: 4px; }

.nk-foot-social { display: flex; gap: 12px; margin-top: 6px; }
.nk-foot-social a { color: var(--t3b); transition: color .15s ease, transform .15s ease; }
.nk-foot-social a:hover { color: #fff; transform: translateY(-2px); }
.nk-foot-social svg { display: block; width: 18px; height: 18px; fill: currentColor; }

.nk-foot-badges { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.nk-foot-badges a {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  color: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: border-color .15s ease;
}
.nk-foot-badges a:hover { border-color: var(--lime); }
.nk-foot-badges svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.nk-foot-badges span { display: flex; flex-direction: column; gap: 2px; }
.nk-foot-badges small { font: 500 8.5px/1 Manrope, sans-serif; color: var(--t3b); }
.nk-foot-badges b { font: 800 12.5px/1 Manrope, sans-serif; }

.nk-foot-col { display: flex; flex-direction: column; gap: 10px; }
.nk-foot-head {
  font: 800 12px/1 Manrope, sans-serif;
  color: var(--t3b);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nk-foot-col a { font: 600 13px/1.35 Manrope, sans-serif; color: var(--dark-link); transition: color .15s ease; }
.nk-foot-col a:hover { color: var(--lime); }

.nk-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--dark-rule);
  padding-top: 24px;
  gap: 16px;
  flex-wrap: wrap;
  font: 600 12px/1.4 Manrope, sans-serif;
  color: var(--t3b);
}
.nk-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.nk-foot-legal a:hover { color: #fff; }
.nk-foot-langs { display: flex; gap: 8px; color: var(--dark-link); }
.nk-foot-langs a[aria-current="page"] { color: var(--lime); }
.nk-foot-langs a:hover { color: #fff; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1100px) {
  :root { --pad: 32px; --inset: 20px; }
  .nk-h1 { font-size: 46px; letter-spacing: -1.2px; }
  .nk-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) {
  /* Nav collapses to a burger; the "Ouvrir l'app" CTA stays visible. */
  .nk-burger { display: block; order: 2; }
  .nk-nav { flex-wrap: wrap; padding-block: 14px; }
  .nk-nav-left { gap: 16px; }
  .nk-nav-links {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 6px;
  }
  .nk-nav.is-open .nk-nav-links { display: flex; }
  .nk-nav-links a { padding: 12px 2px; font-size: 15px; }
  .nk-nav-left { flex: 1; }

  /* Hero stacks: copy above the product shot. */
  .nk-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; }
  .nk-hero-copy { gap: 18px; }
  .nk-stage { height: 500px; max-width: 430px; margin-inline: auto; width: 100%; }
  .nk-phone { inset-inline-start: 0; transform: none; }
  html[dir="rtl"] .nk-phone { transform: none; }
  .nk-float-live { top: 40px; }
  .nk-float-rep { inset-inline-end: 0; bottom: 20px; }

  .nk-steps, .nk-pains, .nk-live-grid { grid-template-columns: 1fr; }
  .nk-explore { grid-template-columns: repeat(2, 1fr); }
  .nk-split { grid-template-columns: 1fr; gap: 44px; }
  /* Mirrored (image-first) split reverts to image-under-text when stacked. */
  .nk-split--mirror .nk-split-media { order: 2; }
  .nk-split--mirror .nk-split-copy { order: 1; }
  .nk-owner { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .nk-live { padding: 40px 24px; }
  .nk-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .nk-foot { padding: 44px 28px 28px; }
}

@media (max-width: 767px) {
  :root { --pad: 18px; --inset: 12px; --r-band: 22px; }
  .nk-sec { padding-block: 44px; }
  .nk-h1 { font-size: 36px; letter-spacing: -.9px; }
  .nk-lead { font-size: 15.5px; }
  .nk-h2 { font-size: 27px; letter-spacing: -.5px; }
  .nk-kickoff { padding: 48px 24px; }
  .nk-kickoff h2 { font-size: 32px; letter-spacing: -.7px; }
  .nk-owner h2 { font-size: 25px; }

  /* Below 768px the floating cards stop overlapping the phone and become a
     plain proof row underneath it — the design's gutter can't survive here. */
  .nk-stage {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: none;
  }
  .nk-phone, .nk-float-live, .nk-float-rep { position: static; }
  .nk-phone { transform: none; }
  .nk-float-live { width: 100%; max-width: 320px; }
  .nk-float-rep { width: 100%; max-width: 320px; }

  .nk-stats { grid-template-columns: repeat(2, 1fr); }
  .nk-stores-note { margin-inline-start: 0; width: 100%; }
  .nk-live { padding: 32px 18px; }
  .nk-live-head { align-items: flex-start; }
  .nk-foot { padding: 36px 20px 24px; }
  .nk-foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  .nk-explore { grid-template-columns: 1fr; }
  .nk-foot-grid { grid-template-columns: 1fr; }
  .nk-stores { gap: 10px; }
  .nk-store { padding: 12px 16px; }
  .nk-overlay { position: static; margin-top: 14px; max-width: none; }
  .nk-split { gap: 24px; }
}

/* ===========================================================================
   RTL — the Arabic homepage
   =========================================================================== */
html[dir="rtl"] .nk-step-idx,
html[dir="rtl"] .nk-eyebrow { letter-spacing: 0; }
html[dir="rtl"] .nk-h1,
html[dir="rtl"] .nk-h2,
html[dir="rtl"] .nk-kickoff h2,
html[dir="rtl"] .nk-owner h2 { letter-spacing: 0; }
html[dir="rtl"] .nk-store svg,
html[dir="rtl"] .nk-foot-badges svg { transform: none; }

/* Latin-only runs (clock times, "5 TND", store names) must not be reordered
   by the bidi algorithm inside the Arabic page — "18:00 – 19:00" was coming
   out as "19:00 – 18:00". Isolate them so only their placement mirrors. */
html[dir="rtl"] .nk-mini-top b,
html[dir="rtl"] .nk-mini-top span,
html[dir="rtl"] .nk-float-rep i,
html[dir="rtl"] .pcard-when,
html[dir="rtl"] .stat-num,
html[dir="rtl"] .nk-store b,
html[dir="rtl"] .nk-foot-badges b,
html[dir="rtl"] .nk-foot-langs {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ===========================================================================
   Motion / print
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js .nk-reveal > * { opacity: 1; transform: none; }
}

@media print {
  .nk-nav, .nk-stage, .live-ticker { display: none; }
  body { background: #fff; }
}

/* ###########################################################################
   SUBPAGES — /courts, /faq, /court-partners, /city/
   ###########################################################################
   Same tokens and furniture as the homepage above; what follows is only the
   blocks those four pages add. Their nav is the slim variant (wordmark +
   language + "Ouvrir l'app", no link row) and their footer is one muted line.
   ######################################################################### */

/* --- Slim page chrome ---------------------------------------------------- */
.nk-nav--slim .nk-nav-left { gap: 0; }

/* The subpage language switcher flips locale in place (client-side) instead
   of navigating, so its items are <button>s — styled as the homepage's menu. */
.nk-lang-list button {
  appearance: none;
  border: 0;
  background: none;
  text-align: start;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  font: 700 13px/1 Manrope, sans-serif;
  color: var(--t2);
  cursor: pointer;
}
.nk-lang-list button:hover { background: var(--bg); color: var(--t1); }
.nk-lang-list button[aria-pressed="true"] { background: var(--ink); color: var(--lime); }

.nk-subfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 20px var(--pad) 26px;
  border-top: 1px solid var(--line);
  font: 600 12px/1.5 Manrope, sans-serif;
  color: var(--t3);
}
.nk-subfoot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nk-subfoot a:hover { color: var(--t1); }

/* Subpage hero: a single measured column, not the homepage's two. */
.nk-sub-hero {
  padding: 36px var(--pad) 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  max-width: 800px;
}
.nk-sub-hero .nk-h1 { font-size: 46px; letter-spacing: -1.3px; line-height: 1.06; }
.nk-sub-hero p { font: 500 16px/1.6 Manrope, sans-serif; color: var(--t2); }
.nk-sub-hero--narrow { padding-block: 32px 8px; gap: 12px; }
.nk-sub-hero--narrow .nk-h1 { font-size: 44px; letter-spacing: -1.2px; line-height: 1.08; }
.nk-sub-hero--narrow p { font-size: 15.5px; }

.nk-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.nk-pill--outline {
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--t1);
  padding: 15px 26px;
  font-size: 14px;
}
.nk-pill--outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.nk-pill--ink.nk-pill--md, .nk-pill--lime.nk-pill--md { padding: 15px 26px; font-size: 14px; }

/* Section block: eyebrow + h2 + optional lead, then content. */
.nk-block { padding: 0 var(--pad) 40px; display: flex; flex-direction: column; gap: 20px; }
.nk-block-head { display: flex; flex-direction: column; gap: 6px; }
.nk-block-head h2 { font: 800 28px/1.15 Manrope, sans-serif; color: var(--t1); letter-spacing: -.6px; }
.nk-block-head p { font: 500 14px/1.5 Manrope, sans-serif; color: var(--t2); max-width: 680px; }
.nk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Dark call-out band, shared by /courts and /city/. */
.nk-darkband {
  margin: 0 var(--inset) var(--inset);
  background: var(--dark-bg);
  border-radius: var(--r-band);
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.nk-darkband div { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.nk-darkband h2 { font: 800 26px/1.15 Manrope, sans-serif; color: #fff; letter-spacing: -.5px; }
.nk-darkband p { font: 500 14px/1.6 Manrope, sans-serif; color: var(--dark-body); }
.nk-darkband .nk-pill { flex: none; font-size: 14px; padding: 16px 26px; }
.nk-darkband--tight { padding: 36px 40px; }
.nk-darkband--tight h2 { font-size: 22px; line-height: 1.2; letter-spacing: 0; }
.nk-darkband--tight h2 span { color: var(--t3b); font-weight: 600; }

/* ===========================================================================
   P1 · /courts — match + venue cards (live data)
   =========================================================================== */
.nk-city-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.nk-city-head h3 { font: 800 17px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-city-head span { font: 700 12px/1 Manrope, sans-serif; color: var(--t3); }

.mcard {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.mcard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mcard-time { font: 800 20px/1 Manrope, sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.mcard-chip {
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.mcard-title { font: 800 14px/1.3 Manrope, sans-serif; color: var(--t1); }
.mcard-meta { font: 600 12px/1.4 Manrope, sans-serif; color: var(--t3); }
/* Status: amber when the match is full, deep lime when seats remain. The
   amber is darkened from the dark band's #f5a800 — it has to clear AA on
   white, which the dark-band value does not. */
.mcard-status { font: 700 11.5px/1.35 Manrope, sans-serif; color: var(--acc); }
.mcard-status.is-full { color: #b58900; }

.vcard {
  background: var(--card);
  border-radius: var(--r-tile);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.vcard-media { height: 130px; background: var(--ink); flex: none; position: relative; }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vcard-name { font: 800 15px/1.2 Manrope, sans-serif; color: var(--t1); }
.vcard-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vcard-verified {
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 5px 8px;
  border-radius: 999px;
}
.vcard-rating { font: 800 12px/1 Manrope, sans-serif; color: var(--t1); }
.vcard-city { font: 600 11.5px/1 Manrope, sans-serif; color: var(--t3); }
.vcard-specs { font: 600 12px/1.4 Manrope, sans-serif; color: var(--t3); }

/* Loading / empty / error states for both grids. */
.nk-skel { background: var(--card); border-radius: var(--r-tile); min-height: 116px; position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .nk-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, .05), transparent);
    animation: nk-shimmer 1.4s linear infinite;
  }
}
.nk-state {
  grid-column: 1 / -1;
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 20px 22px;
  font: 600 13.5px/1.6 Manrope, sans-serif;
  color: var(--t2);
}
.nk-state.is-error { color: #9a3412; }

/* ===========================================================================
   P2 · /faq — category rail + accordions
   =========================================================================== */
.nk-faq {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px var(--pad) 44px;
  align-items: start;
}
.nk-faq-rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 84px; }
.nk-faq-rail a {
  font: 700 13px/1.3 Manrope, sans-serif;
  color: var(--t2);
  padding: 12px 16px;
  border-radius: 12px;
  transition: background-color .15s ease, color .15s ease;
}
.nk-faq-rail a:hover { background: var(--card); color: var(--t1); }
.nk-faq-rail a.is-active { background: var(--ink); color: var(--lime); font-weight: 800; }

.nk-faq-list { display: flex; flex-direction: column; gap: 10px; }
.nk-faq-cat {
  font: 800 12px/1 Manrope, sans-serif;
  color: var(--acc);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 18px;
  scroll-margin-top: 90px;
}
.nk-faq-cat:first-child { margin-top: 0; }

/* <details>/<summary> so the accordion works with JS off; the JS only adds
   "one open at a time" and the rail highlight. */
.nk-acc {
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 20px 22px;
  transition: border-color .15s ease;
}
.nk-acc[open] { border-color: var(--lime); }
.nk-acc > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  font: 800 15.5px/1.35 Manrope, sans-serif;
  color: var(--t1);
}
.nk-acc > summary::-webkit-details-marker { display: none; }
.nk-acc > summary::after {
  content: '+';
  flex: none;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: #f2f1ed;
  font: 800 15px/28px Manrope, sans-serif;
  color: var(--t1);
  text-align: center;
}
.nk-acc[open] > summary::after { content: '−'; background: var(--lime); }
.nk-acc > p {
  margin-top: 10px;
  font: 500 13.5px/1.65 Manrope, sans-serif;
  color: var(--t2);
}
.nk-acc > p a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.nk-faq-ctas { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.nk-faq-ctas .nk-pill { font-size: 13.5px; padding: 14px 24px; }

/* ===========================================================================
   P3 · /court-partners
   =========================================================================== */
.nk-phero {
  padding: 36px var(--pad) 40px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 44px;
  align-items: center;
}
.nk-phero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.nk-phero-copy .nk-h1 { font-size: 46px; letter-spacing: -1.3px; line-height: 1.06; }
.nk-phero-copy > p { font: 500 15.5px/1.65 Manrope, sans-serif; color: var(--t2); }
.nk-trust { display: flex; gap: 8px; flex-wrap: wrap; }
.nk-trust span {
  background: var(--card);
  font: 700 12px/1 Manrope, sans-serif;
  color: var(--t1);
  padding: 9px 14px;
  border-radius: 999px;
}
.nk-phero-media { position: relative; }
.nk-phero-media .nk-frame { height: 320px; }
.nk-phero-card {
  position: absolute;
  inset-inline-start: -14px;
  bottom: 22px;
  background: var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-dark);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 20px);
}
.nk-phero-card b:first-child { font: 800 11px/1.3 Manrope, sans-serif; color: var(--lime); }
.nk-phero-card b + b { font: 800 14px/1.3 Manrope, sans-serif; color: #fff; }
.nk-phero-card span { font: 600 11px/1.35 Manrope, sans-serif; color: var(--t3b); }

.nk-prop {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nk-prop-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nk-prop-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nk-prop h3 { font: 800 15.5px/1.25 Manrope, sans-serif; color: var(--t1); }
.nk-prop p { font: 500 13px/1.6 Manrope, sans-serif; color: var(--t2); }
.nk-prop-top { display: flex; align-items: center; justify-content: space-between; }
.nk-prop-idx { font: 800 11px/1 Manrope, sans-serif; color: var(--t4); letter-spacing: 2px; }
/* Third step is the dark punchline card — same convention as the homepage. */
.nk-prop--ink { background: var(--ink); }
.nk-prop--ink h3 { color: #fff; }
.nk-prop--ink p { color: var(--dark-body); }
.nk-prop--ink .nk-prop-idx { color: var(--t2); }

.nk-two { padding: 0 var(--pad) 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.nk-check {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nk-check h3 { font: 800 18px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nk-check li { display: flex; gap: 10px; font: 500 13.5px/1.5 Manrope, sans-serif; color: var(--t2); }
.nk-check li::before {
  content: '✓';
  flex: none;
  width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--lime);
  font: 800 12px/20px Manrope, sans-serif;
  color: var(--ink);
  text-align: center;
}
.nk-quote {
  background: var(--ink);
  border-radius: var(--r-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.nk-quote-badge {
  align-self: flex-start;
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 5px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.nk-quote blockquote { margin: 0; font: 600 16px/1.55 Manrope, sans-serif; color: #fff; }
.nk-quote cite { font: 600 12.5px/1.4 Manrope, sans-serif; color: var(--t3b); font-style: normal; }

/* Lime form band. */
.nk-formband {
  margin: 0 var(--inset) var(--inset);
  background: var(--lime);
  border-radius: var(--r-band);
  padding: 44px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.nk-formband-copy { display: flex; flex-direction: column; gap: 12px; }
.nk-formband-copy h2 { font: 800 32px/1.1 Manrope, sans-serif; color: var(--t1); letter-spacing: -.8px; }
.nk-formband-copy p { font: 500 14px/1.6 Manrope, sans-serif; color: var(--on-lime); }
.nk-form {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nk-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nk-field { display: flex; flex-direction: column; gap: 5px; }
.nk-field label { font: 700 11.5px/1.3 Manrope, sans-serif; color: var(--t1); }
.nk-field label small { color: #9a9a94; font-weight: 600; }
.nk-field input, .nk-field textarea {
  font: 500 13px/1.4 Manrope, sans-serif;
  color: var(--t1);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
}
.nk-field textarea { min-height: 64px; resize: vertical; }
.nk-field input::placeholder, .nk-field textarea::placeholder { color: #9a9a94; }
.nk-field input:focus-visible, .nk-field textarea:focus-visible { outline: none; border-color: var(--ink); }
.nk-field input:user-invalid, .nk-field textarea:user-invalid { border-color: #b91c1c; }
.nk-form button.nk-submit {
  appearance: none;
  border: 0;
  background: var(--ink);
  color: var(--lime);
  font: 800 14px/1 Manrope, sans-serif;
  padding: 15px 0;
  border-radius: 999px;
  cursor: pointer;
  width: 100%;
  transition: transform .15s ease;
}
.nk-form button.nk-submit:hover:not(:disabled) { transform: translateY(-2px); }
.nk-form button.nk-submit:disabled { opacity: .6; cursor: default; }
.nk-form-note { font: 500 10.5px/1.5 Manrope, sans-serif; color: var(--t3); }
.nk-form-note a { color: var(--acc); text-decoration: underline; }
.nk-status { font: 600 12px/1.4 Manrope, sans-serif; color: var(--t3); min-height: 1em; }
.nk-status.is-error { color: #b91c1c; }
/* Honeypot: hidden from people but still in the layout for bots to fill.
   Clipped in place rather than parked at left:-9999px — an off-screen offset
   is inline-direction-dependent and blew the page out to 10 000px wide on
   the RTL (Arabic) locale. */
.nk-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.nk-success {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.nk-success .nk-check-mark {
  width: 44px; height: 44px;
  border-radius: 22px;
  background: var(--lime);
  font: 800 20px/44px Manrope, sans-serif;
  color: var(--ink);
  text-align: center;
}
.nk-success h2 { font: 800 18px/1.35 Manrope, sans-serif; color: var(--t1); }

/* ===========================================================================
   P4 · /city/ — governorate cards
   =========================================================================== */
.nk-crumbs { font: 600 12px/1.5 Manrope, sans-serif; color: var(--t3); }
.nk-crumbs a:hover { color: var(--t1); }
.nk-crumbs strong { color: var(--t1); font-weight: 700; }
.nk-statpills { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.nk-statpills span {
  background: var(--card);
  font: 700 12.5px/1 Manrope, sans-serif;
  color: var(--t1);
  padding: 10px 15px;
  border-radius: 999px;
}
.nk-govs {
  padding: 24px var(--pad) 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.nk-gov {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nk-gov h2 { font: 800 15px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-gov-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nk-gov-chips a {
  background: #f2f1ed;
  font: 700 12px/1 Manrope, sans-serif;
  color: var(--t1);
  padding: 8px 12px;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.nk-gov-chips a:hover { background: var(--lime); }
.nk-gov-chips a span { color: var(--acc); }
.nk-gov-chips a:hover span { color: var(--on-lime); }

/* ===========================================================================
   P5 · /city/{slug} — the per-city template (×102)
   =========================================================================== */
.nk-citychips { display: flex; gap: 8px; flex-wrap: wrap; }
.nk-citychips span {
  background: var(--card);
  color: var(--t1);
  font: 700 11.5px/1 Manrope, sans-serif;
  padding: 8px 12px;
  border-radius: 999px;
}
.nk-citychips span.is-lime { background: var(--lime); font-weight: 800; }
.nk-cityloc { font: 700 14px/1.4 Manrope, sans-serif; color: var(--t2); }

/* Match card: a time block, a hairline, then the match. */
.nk-cards--two { grid-template-columns: 1fr 1fr; }
.nk-gcard {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nk-gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.nk-gcard-when { display: flex; flex-direction: column; flex: none; width: 70px; }
.nk-gcard-when b { font: 800 20px/1 Manrope, sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.nk-gcard-when span { font: 600 11px/1.4 Manrope, sans-serif; color: var(--t3); }
.nk-gcard-rule { width: 1px; align-self: stretch; background: #efeeea; flex: none; }
.nk-gcard-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nk-gcard-title { font: 800 14px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-gcard-meta { font: 600 12px/1.4 Manrope, sans-serif; color: var(--t3); }
.nk-gcard-status { font: 700 11.5px/1.35 Manrope, sans-serif; color: var(--acc); }
.nk-gcard-status.is-full { color: #b58900; }

/* Venue card — like /courts' .vcard but shorter, and it is an <a> of spans. */
.nk-vcard {
  background: var(--card);
  border-radius: var(--r-tile);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nk-vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.nk-vcard-media { height: 120px; background: var(--ink); flex: none; display: block; }
.nk-vcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nk-vcard-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.nk-vcard-name { font: 800 14px/1.25 Manrope, sans-serif; color: var(--t1); }
.nk-vcard-meta { font: 600 11.5px/1.5 Manrope, sans-serif; color: var(--t3); }
.nk-vcard-meta em { font-style: normal; color: var(--acc); font-weight: 800; }
.nk-vc-ok { color: var(--acc); font-weight: 800; }

.nk-partnerline { font: 600 13px/1.5 Manrope, sans-serif; color: var(--t2); }
.nk-partnerline a { color: var(--acc); font-weight: 800; }
.nk-partnerline a:hover { text-decoration: underline; }

.nk-sidecard {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nk-sidecard b { font: 800 16px/1.3 Manrope, sans-serif; color: var(--t1); }
.nk-sidecard > a { font: 700 13px/1.4 Manrope, sans-serif; color: var(--acc); }
.nk-sidecard > a:hover { text-decoration: underline; }
.nk-gov-chips a.is-lime { background: var(--lime); font-weight: 800; }

/* ===========================================================================
   P6 · /investors
   =========================================================================== */
.nk-sub-hero--wide { max-width: 840px; padding-block: 36px; }
.nk-sub-hero--wide .nk-h1 { font-size: 48px; letter-spacing: -1.4px; }
.nk-sub-hero--wide > p { font: 500 16px/1.65 Manrope, sans-serif; color: var(--t2); }

.nk-itiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nk-itile {
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nk-itile b { font: 800 14.5px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-itile span { font: 500 12.5px/1.55 Manrope, sans-serif; color: var(--t2); }

.nk-two--why { grid-template-columns: 1.15fr .85fr; }
.nk-why {
  background: var(--ink);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nk-why h2 { font: 800 26px/1.15 Manrope, sans-serif; color: #fff; letter-spacing: -.5px; }
.nk-why-list { display: flex; flex-direction: column; gap: 12px; }
.nk-why-row { display: flex; gap: 12px; }
.nk-why-row > span {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 11px;
  background: var(--lime);
  font: 800 12px/22px Manrope, sans-serif;
  color: var(--ink);
  text-align: center;
}
.nk-why-row p { font: 500 13px/1.55 Manrope, sans-serif; color: var(--dark-body); }
.nk-why-row strong { color: #fff; font-weight: 800; }

.nk-traction { display: flex; flex-direction: column; gap: 14px; }
.nk-traction h2 { font: 800 22px/1.15 Manrope, sans-serif; color: var(--t1); letter-spacing: -.4px; }
.nk-itstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.nk-itstat {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.nk-itstat b { font: 800 26px/1 Manrope, sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.nk-itstat span { font: 600 11.5px/1.3 Manrope, sans-serif; color: var(--t3); }
.nk-itstat.is-lime { background: var(--lime); }
.nk-itstat.is-lime span { color: var(--on-lime); }

.nk-leadlist { display: flex; flex-direction: column; gap: 10px; }
.nk-leadlist p { font: 500 13px/1.55 Manrope, sans-serif; color: var(--t2); }
.nk-leadlist strong { color: var(--t1); font-weight: 800; }

/* Sponsor tiers. The featured one is the dark card, with its badge riding
   the top edge — so the row needs padding-top for the badge to hang into. */
.nk-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
  padding-top: 10px;
}
.nk-tier {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.nk-tier > b { font: 800 16px/1.2 Manrope, sans-serif; color: var(--t1); }
.nk-tier-reach { font: 600 11.5px/1.3 Manrope, sans-serif; color: var(--t3); }
.nk-tier-rule { height: 1px; background: #efeeea; display: block; }
.nk-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nk-tier li { font: 500 12px/1.6 Manrope, sans-serif; color: var(--t2); }
.nk-tier li::before { content: '· '; }
.nk-tier.is-feat { background: var(--ink); }
.nk-tier.is-feat > b { color: #fff; }
.nk-tier.is-feat .nk-tier-reach { color: var(--t3b); }
.nk-tier.is-feat .nk-tier-rule { background: var(--dark-rule); }
.nk-tier.is-feat li { color: var(--dark-body); }
/* The differentiator of the recommended tier gets the lime. */
.nk-tier.is-feat li:nth-child(2) { color: var(--lime); font-weight: 700; }
.nk-tier-badge {
  position: absolute;
  top: -10px;
  inset-inline-start: 20px;
  background: var(--lime);
  color: var(--ink);
  font: 800 10px/1 Manrope, sans-serif;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nk-crosslink { font: 600 13px/1.5 Manrope, sans-serif; color: var(--t1); }
.nk-crosslink a { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.nk-field select {
  font: 500 13px/1.4 Manrope, sans-serif;
  color: var(--t1);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9a9a94 50%), linear-gradient(135deg, #9a9a94 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[dir="rtl"] .nk-field select {
  background-position: 11px calc(50% + 2px), 16px calc(50% + 2px);
}
.nk-field select:focus-visible { outline: none; border-color: var(--ink); }

/* ===========================================================================
   Subpage responsive
   =========================================================================== */
@media (max-width: 1100px) {
  .nk-sub-hero .nk-h1, .nk-phero-copy .nk-h1 { font-size: 40px; letter-spacing: -1px; }
  .nk-sub-hero--narrow .nk-h1 { font-size: 38px; }
  .nk-govs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
  .nk-cards, .nk-cards--two, .nk-two, .nk-two--why, .nk-govs { grid-template-columns: 1fr; }
  .nk-itiles { grid-template-columns: repeat(2, 1fr); }
  /* Sponsor tiers stack with the recommended one first. */
  .nk-tiers { grid-template-columns: 1fr; }
  .nk-tier.is-feat { order: -1; }
  .nk-sub-hero--wide .nk-h1 { font-size: 38px; letter-spacing: -1px; }
  .nk-phero { grid-template-columns: 1fr; gap: 32px; }
  .nk-phero-card { inset-inline-start: 16px; }
  .nk-formband { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .nk-darkband { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .nk-block, .nk-two { padding-inline: var(--pad); }

  /* The FAQ rail becomes a horizontal chip row above the accordions. */
  .nk-faq { grid-template-columns: 1fr; gap: 20px; }
  .nk-faq-rail {
    position: static;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .nk-faq-rail::-webkit-scrollbar { display: none; }
  .nk-faq-rail a { white-space: nowrap; background: var(--card); }
}

@media (max-width: 767px) {
  .nk-sub-hero { padding-block: 24px 32px; }
  .nk-sub-hero .nk-h1, .nk-phero-copy .nk-h1, .nk-sub-hero--narrow .nk-h1 { font-size: 32px; letter-spacing: -.7px; }
  .nk-block-head h2 { font-size: 24px; }
  .nk-formband-copy h2 { font-size: 26px; }
  .nk-form-row { grid-template-columns: 1fr; }
  .nk-acc { padding: 16px 18px; }
  .nk-acc > summary { font-size: 14.5px; }
  .nk-subfoot { flex-direction: column; align-items: flex-start; }
  .nk-phero-media .nk-frame { height: 240px; }
  .nk-phero-card { position: static; margin-top: 12px; max-width: none; }
}