@charset "utf-8";
/* ==========================================================================
   Tap2Wafa - public site stylesheet
   --------------------------------------------------------------------------
   Design law   : LOYALTY_FRONTEND_DESIGN_SPEC (tokens s1, logo s2, surfaces s3,
                  web standards s6) + the brand system (palette s3, type s4,
                  iconography s5, voice s6).
   Build law    : LOYALTY_WEBSITE_DEV_SPEC s4/s5 (static, near-zero JS,
                  self-hosted everything).
   CSP          : default-src 'self'; style-src 'self'; script-src 'self'.
                  No inline <style>, no style="" attributes, no CDN, no
                  external font origin. Every byte referenced here is
                  same-origin.
   Themes       : light is the brand's home; dark is an owner-ruled first-class
                  peer. System preference decides by default; the header toggle
                  overrides it and persists. Both palettes are brand-conformant
                  and every text pair below was contrast-computed, not guessed.
   ========================================================================== */

/* ==========================================================================
   1. FONTS - self-hosted WOFF2, Latin subset, font-display: swap
   The explicit Latin unicode-range is the belt-and-braces half of the design
   spec's stack-order law: these faces are structurally incapable of capturing
   non-Latin codepoints, so a future Arabic tree can never resolve Arabic script
   through them even if a font-family stack is edited carelessly.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600-normal.f4e80d9d.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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-700-normal.9338e65f.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.8909904a.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.f3779f1e.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;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- brand constants: identical in both themes (brand s3) --------------- */
  --t2w-violet: #6229e8;
  --t2w-orchid: #9e52f3;
  --t2w-navy:   #230f4e;
  --t2w-lilac:  #f3eefe;
  --t2w-white:  #ffffff;
  --t2w-slate:  #6b6b76;
  --t2w-ink:    #2b2b33;

  /* The brand gradient, 135deg, violet -> orchid. DECORATIVE / LARGE ONLY:
     white on #9e52f3 is 4.24:1, which clears the 3:1 large-text bar but NOT
     the 4.5:1 normal-text bar. */
  --grad: linear-gradient(135deg, var(--t2w-violet) 0%, var(--t2w-orchid) 100%);
  /* The same gradient held to an AA-safe end stop so white BUTTON LABELS clear
     4.5:1 at every point behind the text (worst point #8438ef = 5.54:1). Same
     hue family, same angle, same direction - this is the derived-tint pattern
     the estate already uses for the AA-passing orchid. */
  --grad-cta: linear-gradient(135deg, #6229e8 0%, #8438ef 100%);
  /* The gradient that is CLIPPED TO A GLYPH rather than painted behind one —
     the 404 numeral, the estate's only `background-clip` site. [CERT-1 F-H2-1]

     --grad and --grad-cta are both BACKGROUNDS behind white labels, so the pair
     that had to clear the floor was white-on-stop. Clipped to a glyph the roles
     invert: the STOP becomes the ink and the theme ground sits behind it, and
     the brand constants do not move between themes. Measured against --bg:
     light 6.996:1 / 4.238:1, dark 2.709:1 / 4.472:1 — the violet start is BELOW
     the 3:1 large-glyph floor on the Midnight-Navy ground, so the top-left of
     those numerals was the least readable part of the largest thing on the page.
     Light is therefore unchanged (both stops already clear the floor, and the
     brand's home is not restyled); dark runs between two stops the dark block
     ALREADY declares — the owner-blessed AA orchid #ae6ef5 (5.730:1) and the
     focus tint #c79bf8 (8.549:1). Same family, same 135deg, same direction,
     zero new colour literals. Named `-ink` because that is the role it plays,
     and because this file is content-hash-renamed on every edit — a suppression
     keyed to today's filename would rot at the next one. */
  --grad-ink: var(--grad);

  /* --- type ------------------------------------------------------------- */
  --font-head: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-display: clamp(2.15rem, 1.3rem + 3.1vw, 3.15rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 1.9vw, 2.4rem);
  --fs-h3:      clamp(1.15rem, 1.06rem + 0.35vw, 1.3rem);
  --fs-lead:    clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-cap:     0.8125rem;

  /* --- spacing (4px base, design spec s1.4) ------------------------------ */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s6: 1.5rem;   --s8: 2rem;     --s12: 3rem;    --s16: 4rem;
  --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  --measure: 1200px;

  /* --- radius (design spec s1.4) ----------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- motion ------------------------------------------------------------ */
  --dur: 200ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ================= LIGHT THEME (the brand's home) ====================== */
  color-scheme: light;
  --bg:          #ffffff;
  --bg-field:    #f7f4fe;   /* lilac wash, one step lighter than the tint */
  --bg-field-2:  var(--t2w-lilac);
  --surface:     #ffffff;
  --surface-2:   #fbf9ff;
  --ink:         var(--t2w-ink);      /* 14.04:1 on white */
  --heading:     var(--t2w-navy);     /* 16.80:1 on white */
  --muted:       var(--t2w-slate);    /*  5.26:1 on white */
  --muted-field: #5c5c68;             /*  5.80:1 on Lilac Tint - the brand
                                         slate is 4.63:1 there, which passes
                                         but the design spec calls the margin
                                         thin on a lilac ground */
  --accent:      var(--t2w-violet);   /*  7.00:1 on white, 6.15:1 on lilac */
  --accent-soft: rgba(98, 41, 232, 0.09);
  --accent-edge: rgba(98, 41, 232, 0.45);
  --border:      rgba(35, 15, 78, 0.10);
  --border-mid:  rgba(35, 15, 78, 0.16);
  --on-accent:   #ffffff;
  --focus:       #4a17c4;             /* deepened violet: 3:1+ vs both grounds */
  --shadow-sm:   0 1px 2px rgb(35 15 78 / 0.06);
  --shadow-md:   0 6px 18px rgb(35 15 78 / 0.09);
  --shadow-lg:   0 18px 44px rgb(35 15 78 / 0.14);
  --glow-a:      rgba(98, 41, 232, 0.16);
  --glow-b:      rgba(158, 82, 243, 0.18);
  --deco:        rgba(98, 41, 232, 0.16);
  --card-ink:    #ffffff;
  --logo-light:  block;
  --logo-dark:   none;
}

/* ================= DARK THEME =========================================== */
/* Ground = the Midnight Navy family, ink = Lilac Tint, accents = the ruled
   AA-passing orchid tint #AE6EF5. Declared twice on purpose: once for users
   whose system asks for dark (and who have not chosen), once for the explicit
   data-theme="dark" the toggle writes - so the toggle wins in BOTH directions
   and no colour is ever defined only inside a media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg:          #140a2b;
    --bg-field:    #190d34;
    --bg-field-2:  #1e1140;
    --surface:     #1e1140;
    --surface-2:   #241549;
    --ink:         #ede7fb;   /* 15.9:1 on #140a2b */
    --heading:     #f6f2ff;   /* 17.6:1 on #140a2b */
    --muted:       #b7aad8;   /*  8.80:1 on #140a2b, 8.07:1 on #1e1140 */
    --muted-field: #b7aad8;   /*  same on the dark footer ground */
    --accent:      #ae6ef5;   /*  5.73:1 on #140a2b, 5.25:1 on #1e1140 */
    --accent-soft: rgba(174, 110, 245, 0.10);
    --accent-edge: rgba(174, 110, 245, 0.48);
    --border:      rgba(243, 238, 254, 0.12);
    --border-mid:  rgba(243, 238, 254, 0.22);
    --on-accent:   #140a2b;  /* 5.73:1 on --accent; #fff was 3.31:1 */
    --focus:       #c79bf8;
    --shadow-sm:   0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md:   0 6px 20px rgb(0 0 0 / 0.45);
    --shadow-lg:   0 22px 52px rgb(0 0 0 / 0.55);
    --glow-a:      rgba(123, 58, 238, 0.30);
    --glow-b:      rgba(174, 110, 245, 0.24);
    --deco:        rgba(174, 110, 245, 0.20);
    --grad-ink:    linear-gradient(135deg, #ae6ef5 0%, #c79bf8 100%);
    --logo-light:  none;
    --logo-dark:   block;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg:          #140a2b;
  --bg-field:    #190d34;
  --bg-field-2:  #1e1140;
  --surface:     #1e1140;
  --surface-2:   #241549;
  --ink:         #ede7fb;
  --heading:     #f6f2ff;
  --muted:       #b7aad8;
  --muted-field: #b7aad8;
  --accent:      #ae6ef5;
  --accent-soft: rgba(174, 110, 245, 0.10);
  --accent-edge: rgba(174, 110, 245, 0.48);
  --border:      rgba(243, 238, 254, 0.12);
  --border-mid:  rgba(243, 238, 254, 0.22);
  --on-accent:   #140a2b;  /* 5.73:1 on --accent; #fff was 3.31:1 */
  --focus:       #c79bf8;
  --shadow-sm:   0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md:   0 6px 20px rgb(0 0 0 / 0.45);
  --shadow-lg:   0 22px 52px rgb(0 0 0 / 0.55);
  --glow-a:      rgba(123, 58, 238, 0.30);
  --glow-b:      rgba(174, 110, 245, 0.24);
  --deco:        rgba(174, 110, 245, 0.20);
  --grad-ink:    linear-gradient(135deg, #ae6ef5 0%, #c79bf8 100%);
  --logo-light:  none;
  --logo-dark:   block;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* sticky header clearance for anchor jumps */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--accent); letter-spacing: -0.01em; }
p  { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* [CERT-1 R11-A3 2026-09-17, F-R11A3-32] The underline runs straight through the descenders instead
   of breaking under them. The browser default (`auto`) interrupts the line at every p, g, @ and
   comma, which at 1px thickness with a 3px offset reads as a line cut into pieces — reported by the
   owner on the privacy page's support address. `none` draws it across the full length of the text. */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
a:hover { text-decoration-thickness: 2px; }

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

strong { font-weight: 600; color: var(--heading); }

::selection { background: var(--accent); color: var(--on-accent); }

/* Focus: one visible, high-contrast ring everywhere. Never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  /* Inline-start, not left: a keyboard user in the future RTL tree must find the
     skip link where reading starts, not stranded on the far side. */
  inset-inline-start: var(--s4); top: -100px;
  z-index: 100;
  padding: var(--s3) var(--s6);
  background: var(--surface);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--field { background: var(--bg-field); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section__head p:not([class]) { color: var(--muted); font-size: var(--fs-lead); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-cap);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);                       /* fallback first */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 4.5rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: 186px; height: 47px; flex: none; }
.brand .logo-l { display: var(--logo-light); }
.brand .logo-d { display: var(--logo-dark); }
.header-actions { display: flex; align-items: center; gap: var(--s2); }

/* Small screens: the lockup + toggle + CTA fill the bar edge to edge at 375px,
   so step the lockup down (still above the brand's 120px full-lockup minimum)
   and tighten the CTA rather than dropping either control. */
@media (max-width: 34rem) {
  .site-header__inner { min-height: 4rem; gap: var(--s2); }
  .brand img { width: 140px; height: 36px; }
  .header-actions .btn--sm { padding: 0.5rem 0.8rem; letter-spacing: 0; }
}
/* Narrowest phones: keep the lockup at its brand minimum and drop the header
   CTA rather than squashing the logo - the hero CTA is immediately below. */
@media (max-width: 23.5rem) {
  .header-actions .btn { display: none; }
}

/* [FE-LAUNCH F-FEL-1] THE HEADER WRAPS, SO THE LANGUAGE CLICK FITS ON A PHONE.

   PLAIN SENTENCE (law 26): on a phone the three language links ran off the side of the screen and
   `body { overflow-x: hidden }` cut them off silently, so the Kurdish link could not be seen or
   tapped on ANY phone and the Arabic one could not be tapped at 390px either - this lets the bar
   wrap and gives the language click a row of its own, on every page, in both directions.

   MEASURED before the fix, launch home page, Chromium, one row that never wrapped:
     320px  English ok      / العربية clipped / کوردی clipped + UNREACHABLE  (scrollWidth 436)
     360px  English ok      / العربية clipped / کوردی clipped + UNREACHABLE  (scrollWidth 436)
     390px  English clipped / العربية UNREACHABLE / کوردی UNREACHABLE        (scrollWidth 546)
     430px  English ok      / العربية clipped / کوردی UNREACHABLE            (scrollWidth 546)
   "UNREACHABLE" is `document.elementFromPoint` at the link's own centre returning something else,
   because the clip means the pixel is not there to hit. WCAG 2.2 SC 1.4.10 Reflow asks for no
   loss of content or functionality at 320 CSS px; a control that cannot be reached is both.

   WHY WRAPPING AND NOT SMALLER PILLS: the labels are ENDONYMS by ruling (grill Q21/AR-1/KU-1 -
   English / العربية / کوردی, never ISO codes), so they cannot be shortened, and the 44px target
   floor the a11y contracts pin cannot be traded away either. Two short rows is the only honest
   answer, so `.header-actions` keeps the lockup's row and only the switch takes a new one.

   The breakpoint is 48rem rather than the first collision because the longest header is the
   Kurdish waitlist page, not the English launch one, and a breakpoint measured on the shortest
   language fails in the other two. `scroll-padding-top` moves with it: the header is sticky, so
   an anchor jump must clear the taller bar rather than land behind it. */
@media (max-width: 48rem) {
  html { scroll-padding-top: 8.5rem; }
  .site-header__inner { flex-wrap: wrap; row-gap: var(--s2); padding-block: var(--s2); }
  /* Grow to fill the lockup's row so the switch below it has the full width to sit in. */
  .header-actions { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s2); }
  /* Its own line, at the end of the reading direction - `flex-end` follows `dir`, so the switch
     sits under the lockup in Arabic and Kurdish exactly as it does in English. */
  .site-langs { flex: 0 0 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s2); }
}

/* ==========================================================================
   6. BUTTONS + THEME TOGGLE
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn--primary {
  background-image: var(--grad-cta);
  color: #fff;
  box-shadow: 0 6px 18px rgb(98 41 232 / 0.28);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgb(98 41 232 / 0.38);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-mid);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.btn--sm { min-height: 42px; padding: 0.55rem 1.15rem; font-size: var(--fs-cap); }
.btn--block { width: 100%; }

.theme-toggle {
  display: none;                   /* progressive enhancement: shown by JS */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--heading);
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover {
  transform: translateY(-2px);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: block; }
.theme-toggle .i-sun  { display: none; }
:root[data-theme='dark'] .theme-toggle .i-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .i-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme='light']) .theme-toggle .i-sun  { display: block; }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2.4rem + 5vw, 7rem);
}
/* Atmosphere: two soft brand glows. Pure CSS - no image request, no layout
   cost, and they read as the same violet haze the campaign artwork uses. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 46rem; height: 46rem;
  top: -22rem; left: -16rem;
  background: radial-gradient(circle, var(--glow-a) 0%, transparent 68%);
}
.hero::after {
  width: 40rem; height: 40rem;
  right: -14rem; bottom: -20rem;
  background: radial-gradient(circle, var(--glow-b) 0%, transparent 68%);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.12fr 0.88fr; }
}
.hero h1 { margin-bottom: var(--s6); }
.hero h1 .accent { color: var(--accent); display: block; }
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: var(--s8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s8); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  margin-bottom: var(--s6);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-head);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--heading);
}
.badge__dot {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #fff;
}
.badge__dot svg { width: 13px; height: 13px; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  padding: 0; margin: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.trust li { display: inline-flex; align-items: center; gap: var(--s2); }
.trust svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* ==========================================================================
   8. THE WALLET-CARD MOCKUP (code-rendered, honest, zero images)
   ========================================================================== */
.mockup { position: relative; display: grid; justify-items: center; gap: var(--s4); }
.mockup__deco { position: absolute; color: var(--deco); pointer-events: none; z-index: 0; }
.mockup__deco--a { width: 124px; top: -46px; right: 4px; }
.mockup__deco--b { width: 72px;  bottom: 44px; left: -6px; }
.pass { z-index: 1; }
.mockup__caption {
  font-size: var(--fs-cap);
  color: var(--muted);
  text-align: center;
  max-width: 26rem;
  margin: 0;
}
.pass {
  position: relative;
  width: min(100%, 26.5rem);
  padding: var(--s6);
  border-radius: var(--r-xl);
  background-image: var(--grad);
  color: var(--card-ink, #fff);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transform: rotate(-1.6deg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.pass:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 28px 64px rgb(35 15 78 / 0.3); }
.pass__top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.pass__mark { width: 34px; height: 34px; flex: none; color: #fff; }
.pass__mark svg { width: 100%; height: 100%; }
.pass__who { min-width: 0; }
.pass__shop {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff;
  line-height: 1.2;
}
.pass__sub { display: block; font-size: 0.75rem; color: rgb(255 255 255 / 0.82); letter-spacing: 0.06em; text-transform: uppercase; }
.pass__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
  margin-bottom: var(--s2);
}
.pass__count { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1; }
.pass__stamps {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: var(--s4) 0 var(--s6);
}
.pass__stamp {
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  border: 1.5px solid rgb(255 255 255 / 0.55);
  display: grid;
  place-items: center;
  color: var(--t2w-violet);
}
.pass__stamp svg { width: 62%; height: 62%; }
.pass__stamp--on { background: #fff; border-color: #fff; }
.pass__reward {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.16);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  margin-bottom: var(--s6);
}
.pass__reward svg { width: 17px; height: 17px; flex: none; }
.pass__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.pass__serial {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  color: rgb(255 255 255 / 0.9);
}
.pass__qr {
  width: 58px; height: 58px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
  flex: none;
}
.pass__qr svg { width: 100%; height: 100%; color: var(--t2w-navy); }


/* ==========================================================================
   9. CARD GRIDS (features / steps / value)
   ========================================================================== */
.grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.card {
  position: relative;
  padding: clamp(1.35rem, 1.1rem + 0.6vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Hover highlight: lift + violet edge + a layered brand bloom.
   Deliberately expressed as box-shadow rather than a blurred z-index:-1
   pseudo-element: .card:hover applies a transform, a transform creates a
   stacking context, and a negative-z-index child would then paint BEHIND the
   card's own opaque background and render the glow permanently invisible - a
   control that looks present in the stylesheet and does nothing. */
.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-edge);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-edge), 0 10px 34px var(--glow-a);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s4);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { background-image: var(--grad); color: #fff; }

/* the one grid-breaking card - stops the feature wall reading as a template */
.card--wide { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .card--wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s6);
    align-items: center;
    background: var(--surface-2);
  }
  .card--wide .card__icon { margin-bottom: 0; width: 56px; height: 56px; }
  .card--wide .card__icon svg { width: 27px; height: 27px; }
}

/* ==========================================================================
   10. HOW IT WORKS
   ========================================================================== */
.tracks { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 54rem) { .tracks { grid-template-columns: 1fr 1fr; } }

.track {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.track:hover {
  transform: translateY(-4px);
  border-color: var(--accent-edge);
  box-shadow: var(--shadow-lg);
}
.track > h3 {
  display: flex; align-items: center; gap: var(--s3);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem;
}
.track > h3 svg { width: 21px; height: 21px; flex: none; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
/* Logical, not physical: the numbered marker sits at the INLINE START, so it
   moves to the right automatically when the /ar/ tree ships dir="rtl".
   In LTR this computes identically to padding-left (verified: 52px both). */
.steps li { position: relative; padding-inline-start: 3.25rem; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0; top: -2px;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
}
.steps b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading);
  margin-bottom: 2px;
}
.steps span { color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   11. WAITLIST
   ========================================================================== */
.waitlist { position: relative; overflow: hidden; }
.waitlist__panel {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.waitlist__panel h2 { margin-bottom: var(--s3); }
.waitlist__panel > p:not([class]) { color: var(--muted); font-size: var(--fs-lead); }

/* `start`, not `left`: identical in LTR, correctly right-aligned in the future
   RTL tree without a dir-specific override. */
.form { margin-top: var(--s8); text-align: start; }
.form__row { display: grid; gap: var(--s3); }
@media (min-width: 34rem) {
  .form__row { grid-template-columns: 1fr auto; align-items: end; }
}
/* Input and submit are the same height and share a baseline, so the pair reads
   as a single control rather than two stacked ones. */
.form__row .btn { min-height: 48px; height: 48px; padding-block: 0; }
.field label {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-cap);
  color: var(--heading);
}
.field input[type='email'] {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input[type='email']::placeholder { color: var(--muted); opacity: 0.8; }
.field input[type='email']:hover { border-color: var(--accent-edge); }
.field input[type='email']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field input[type='email']:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.form__note { margin: var(--s4) 0 0; font-size: var(--fs-cap); color: var(--muted); }
.form__note a { color: var(--accent); }

/* honeypot: a real, submittable field that is invisible to humans AND to
   assistive tech. Off-canvas rather than display:none so it stays in the
   submitted form data - that is the whole point of the trap. */
.t2w-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.offer {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-cap);
}
.offer svg { width: 16px; height: 16px; }

/* --- submission states (rendered from ?w=) ------------------------------- */
.status {
  display: none;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s6);
  padding: var(--s4) var(--s6);
  border-radius: var(--r-md);
  border: 1px solid;
  text-align: start;
  font-size: var(--fs-sm);
}
.status.is-on { display: flex; }
.status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
/* Both glyphs live in the markup so the JS only has to swap a class - so only
   the one matching the state may ever be visible. */
.status .i-ok, .status .i-warn { display: none; }
.status--ok .i-ok { display: block; }
.status--warn .i-warn { display: block; }
.status b { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 2px; }
.status--ok {
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent-edge);
  color: var(--ink);
}
.status--ok b, .status--ok svg { color: var(--accent); }
.status--warn {
  background: rgba(179, 84, 30, 0.09);
  border-color: rgba(179, 84, 30, 0.42);
  color: var(--ink);
}
.status--warn b, .status--warn svg { color: #8a3f13; }
:root[data-theme='dark'] .status--warn b, :root[data-theme='dark'] .status--warn svg { color: #f0b48a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .status--warn b,
  :root:not([data-theme='light']) .status--warn svg { color: #f0b48a; }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: var(--section-y) var(--s12);
  background: var(--bg-field-2);
  border-top: 1px solid var(--border);
}
.site-footer__grid {
  display: grid;
  gap: var(--s8);
  align-items: start;
  margin-bottom: var(--s12);
}
@media (min-width: 46rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr; } }
.site-footer img { width: 186px; height: 47px; margin-bottom: var(--s4); }
.site-footer .logo-l { display: var(--logo-light); }
.site-footer .logo-d { display: var(--logo-dark); }
.site-footer p { color: var(--muted-field); font-size: var(--fs-sm); max-width: 28rem; }
.foot-nav { display: grid; gap: var(--s3); }
.foot-nav h2 {
  font-size: var(--fs-cap);
  font-family: var(--font-head);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-field);
  margin: 0 0 var(--s1);
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  width: fit-content;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot-nav a svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.foot-nav a:hover { color: var(--accent); transform: translateX(3px); text-decoration: underline; }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-cap);
  color: var(--muted-field);
}

/* [grill addendum 294 item 1] The two footer notes that must NOT share the row above.
   `.site-footer__base` is a space-between flex row built for two short items; a sentence
   dropped into it would squeeze the copyright against the edge and wrap raggedly. A
   `flex-basis: 100%` item takes its own line inside the same container, so the row keeps the
   layout it already had and the notes inherit its caption size and muted colour.

   The trademark credit is English by design (it is a legal credit line, not body copy) and
   these pages are the LTR half of an estate whose product surfaces are Arabic-first. The
   markup carries `dir="ltr"` on that paragraph so the sentence reads correctly even when an
   ancestor is RTL; this rule only sizes it, and the measure is capped so a wide desktop does
   not stretch one sentence across the whole viewport. */
.site-footer__identity,
.site-footer__legal {
  flex-basis: 100%;
  margin: 0;
}

.site-footer__legal {
  max-width: 78ch;
  line-height: 1.55;
}

/* ==========================================================================
   13. LEGAL / PROSE PAGES
   ========================================================================== */
.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: var(--s12);
  margin-bottom: var(--s3);
}
.prose h2:first-of-type { margin-top: var(--s8); }
.prose p { color: var(--ink); }
.prose .lead { font-size: var(--fs-lead); color: var(--muted); }
/* Logical inline-start padding keeps the list markers on the correct side when
   the privacy page is translated to Arabic. Identical to padding-left in LTR. */
.prose ul { color: var(--ink); padding-inline-start: 1.25rem; }
.prose li { margin-bottom: var(--s2); }
.updated {
  display: inline-block;
  margin-top: var(--s12);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-cap);
  font-weight: 500;
}

/* 404 */
.center-page { display: grid; place-items: center; text-align: center; min-height: 62vh; }
.center-page .code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
  line-height: 1;
  /* --grad-ink, not --grad: clipped to the glyph the stop IS the ink, and the
     brand violet start is 2.709:1 on the dark ground. [CERT-1 F-H2-1] */
  background-image: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s4);
}

/* ==========================================================================
   14. MOTION PREFERENCE - the same information, motionless
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .track:hover, .btn:hover, .theme-toggle:hover,
  .pass:hover, .foot-nav a:hover { transform: none; }
  .pass { transform: none; }
}

/* Windows high-contrast / forced colours: keep every boundary visible. */
@media (forced-colors: active) {
  .card, .track, .waitlist__panel, .btn, .theme-toggle { border: 1px solid CanvasText; }
  .card__icon, .badge__dot { forced-color-adjust: none; }
}

/* [CERT-1 R11A3 F-R11A3-37] THE LANGUAGE CLICK — the one control that switches English, Arabic
   and Kurdish, sitting in the header beside the theme toggle on every page.

   Grill addendum 326 ruling (a): one control, ONE CLICK PER LANGUAGE, the same control everywhere,
   never a second one. The current language is FILLED rather than outlined so you can see which one
   you are on without reading, and 44px is the touch-target floor the a11y contracts pin.

   [FE-LAUNCH F-FEL-8] The FAQ page now wears these same rules instead of a near-identical pair of
   its own: one control, one set of rules for it, so the two pages cannot drift apart. */
.site-langs { display: flex; gap: 0.4rem; align-items: center; }
.lang-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0.35rem 0.75rem;
  border: 1px solid var(--accent-edge); border-radius: var(--r-pill);
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  white-space: nowrap;
}
.lang-link[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
.lang-link:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .lang-link:active { transform: none; }
}

/* [CERT-1 R12-A1 F-R12A1-54] THE BETA BAND — the owner's own instruction, 2026-09-17: "WRITE on
   top of website we are in beta phase so everyon knows its not ready yet".

   It sits ABOVE the header on every public page, in the language that page is served in. It is a
   band rather than a dismissible toast on purpose: a notice somebody can close is a notice half
   the visitors never see, and the point is that nobody mistakes an unfinished platform for a
   finished one.

   It is REMOVED by one flag in `site/build-pages.mjs` (BETA_BAND) and one rebuild — the styles can
   stay behind harmlessly, because nothing emits the element once the flag is off.

   Colours come from the same tokens the rest of the site uses, so it follows the light and dark
   themes without a second rule; `--accent-soft` on `--surface-2` keeps it visibly a notice rather
   than a warning. Contrast is the page's own ink on the page's own surface, which the brand-token
   gate already measures. */
.beta-band {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-edge);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.6rem 1rem;
  text-align: center;
}