@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
   [CERT-1 R18 F-R18A2-17] Four notes in this file spoke of a "future" Arabic or RTL tree that
   has been live since 2026-09-17, and named the wrong file for the beta-band flag; they now say
   what is true, and the file was renamed to its new hash by site/rehash.mjs.
   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 the Arabic and Kurdish pages can never resolve their 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 on the Arabic and Kurdish pages 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; }
  /* [UI-FIX F-UI-4] On a phone the language control is the globe alone: its name stays in the
     accessible name (visually hidden, never removed), so the theme, the two buttons and the
     language control fit ONE row under the lockup instead of three (measured at 390px). */
  .lang-toggle { padding: 0.35rem 0.6rem; }
  .lang-toggle__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* [UI-FIX F-UI-3] The 23.5rem rule that hid the header buttons on the narrowest phones is gone:
   the sign-in button must be reachable on every page at 320px, and the header wraps into short
   rows instead of hiding anything (SC 1.4.10 Reflow). */

/* [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); }
  /* [UI-FIX F-UI-4] The language control is one compact button now, so it wraps with the other
     actions instead of taking a row of its own; its list hangs from the control's inline-end edge. */
}

/* ==========================================================================
   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);
}
/* [UI-FIX F-UI-3] 44px, not 42: the header's two small buttons are the sign-in and the primary
   call to action, and 44px is the touch-target floor every other control on the site keeps. */
.btn--sm { min-height: 44px; 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; }
/* [CERT-1 R14 F-R14A2-60] A plan card's price is the number a reader came for, so the monthly
   figure is set at heading size in the heading colour, with the yearly line under it in the body
   size; and a card's second paragraph now stands a small step below its first instead of touching
   it (the margin:0 above had fused the price and the customer limit into one block). */
.card p + p { margin-top: var(--s3); }
.plan__price { color: var(--ink); }
.plan__price strong:first-child {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading);
  letter-spacing: -0.01em;
}

.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); }
/* [UI-FIX F-UI-16] The owner (2026-09-21): the "Create your account" button sits in the exact middle of the
   get-started panel, under the payment sentence; the sentence, the heading and the three steps keep their edge. */
.waitlist__panel .hero__cta { justify-content: center; }

/* `start`, not `left`: identical in LTR, correctly right-aligned on the Arabic and
   Kurdish pages 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; }
/* [CERT-1 R15-A2 F-R15A2-115] The FAQ switch hides the footer link by adding `hidden` (nginx
   sub_filter, while `t2w-site faq off` holds). This rule is what lets `hidden` win: the link's
   own `display: inline-flex` above would otherwise override the attribute and keep it showing. */
.foot-nav a[hidden] { display: 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);
}

/* [UI-FIX F-UI-11] THE GUARANTEE PANEL — the 30-day money-back promise, in the middle of the home
   page (the owner's word of 2026-09-21). One raised panel on the card tokens with the accent edge
   and the soft glow the feature cards bloom with, a badge that names the promise, three short
   facts with a check mark each, and the way to the plans. Centred, one column, and it wraps to a
   phone with no rule of its own because everything in it is a flex row with `flex-wrap`. */
.guarantee__panel {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  background: var(--surface);
  border: 1px solid var(--accent-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-edge), 0 18px 48px var(--glow-a);
  text-align: center;
}
.guarantee__panel .badge { margin-bottom: var(--s4); }
.guarantee__panel h2 { max-width: 30ch; margin-inline: auto; margin-bottom: var(--s4); }
.guarantee__panel > p:not([class]) { color: var(--muted); font-size: var(--fs-lead); max-width: 40rem; margin-inline: auto; }
.guarantee__points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6);
  margin: var(--s6) 0 0; padding: 0; list-style: none;
  color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
}
.guarantee__points li { display: inline-flex; align-items: center; gap: var(--s2); }
.guarantee__points svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.guarantee__cta { margin: var(--s6) 0 0; }

/* ==========================================================================
   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.

   [UI-FIX F-UI-4] THE MENU SHAPE. Grill addendum 340 supersedes 326(a)'s three side-by-side pills:
   one compact control — a globe and the name of the language you are reading — and a click slides
   down a short list of ONLY the other languages; one click on a name switches. The markup is
   native <details>/<summary> from `site/languages.mjs`, the one source every page shares (the FAQ
   included, F-FEL-8), so there is one control and one set of rules for it.

   THE PANEL HANGS FROM THE CONTROL'S INLINE-END EDGE: the control sits at the end of the header
   row, so the list opens INWARDS in English and in the two right-to-left languages alike and never
   runs off a phone; its width is capped at the viewport minus the page gutters. The drop is a
   short fade-and-slide (MDN: entry animations run when the content is rendered; the site's
   reduced-motion block below zeroes it). 44px is the touch-target floor the a11y contracts pin,
   for the control and for every name in the list. */
.site-langs { display: flex; align-items: center; }
.lang-menu { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; min-width: 44px; padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-mid); border-radius: var(--r-pill);
  background: transparent; color: var(--heading);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-cap);
  list-style: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.lang-toggle::-webkit-details-marker { display: none; }
.lang-toggle::marker { content: ""; }
.lang-toggle:hover,
.lang-menu[open] > .lang-toggle { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.i-globe, .i-chevron { width: 18px; height: 18px; flex: none; }
.i-chevron { transition: transform var(--dur) var(--ease); }
.lang-menu[open] .i-chevron { transform: rotate(180deg); }
.lang-menu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 40;
  margin: 0; padding: var(--s1); list-style: none;
  min-width: 11rem; max-width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
  animation: lang-drop var(--dur) var(--ease);
}
.lang-link {
  display: flex; align-items: center;
  min-height: 44px; min-width: 44px; padding: 0.5rem 0.85rem;
  border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  white-space: nowrap;
}
.lang-link:hover { background: var(--accent-soft); color: var(--accent); }
@keyframes lang-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; 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/beta-band.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;
}