/* ==========================================================================
   GoNitaq — جو نطاق
   Design system + components. Single stylesheet, no framework, no build step.
   RTL-first: all directional values use logical properties.
   ========================================================================== */

/* ---------- Fonts (self-hosted, zero third-party requests) ----------
   Two weights only (400/700). A 600 cut would add ~50KB of woff2 for a
   difference that is barely visible at UI sizes. ------------------------ */
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-arabic-400.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: 'Plex Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-latin-400.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: 'Plex Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-arabic-arabic-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: 'Plex Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-arabic-latin-700.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;
}

/* ---------- Tokens ---------- */
:root {
  --bg:        #05080a;
  --bg-soft:   #080d10;
  --surface:   rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .062);
  --line:      rgba(255, 255, 255, .085);
  --line-2:    rgba(255, 255, 255, .16);

  --teal:      #14c8ce;
  --teal-deep: #0d7377;
  --amber:     #f2a93b;
  /* Amber as *text* needs its own value: the decorative amber fails contrast
     on the light theme's near-white background. */
  --amber-ink: #f2a93b;
  /* Text/icon colour that sits ON a teal fill. Must flip with the theme:
     the dark theme's teal is bright, the light theme's teal is dark. */
  --on-teal:   #04191a;
  /* "ink" = accent colour for small LABEL text, including on a tinted pill.
     The pill tint costs ~0.5 of contrast ratio, which pushed the light theme's
     accents under WCAG AA at 12–14px. Dark uses the plain accents; light
     overrides both darker. Pair: --teal-ink / --amber-ink. */
  --teal-ink:  var(--teal);

  --text:      #e9f1f2;
  --muted:     #93a6ab;
  /* Lightened from #62777d, which measured 3.88–4.14:1 on the card surfaces
     and failed WCAG AA (4.5:1) everywhere it was used at caption sizes. */
  --faint:     #7d949b;

  --glow: 0 0 0 1px rgba(20, 200, 206, .22), 0 18px 60px -18px rgba(20, 200, 206, .45);
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, .9);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shell: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section: clamp(3.75rem, 8vw, 6.75rem);

  /* Brand logo treatment. Every brand PNG is a dark logo drawn for light
     backgrounds (measured mean pixel brightness 58-81/255), so on the near-black
     canvas it has to be inverted to a white silhouette to read at all. */
  --logo-filter: grayscale(1) brightness(0) invert(1);
  --logo-rest: .42;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

[data-theme='light'] {
  --bg:        #f7fafa;
  --bg-soft:   #ffffff;
  --surface:   rgba(13, 115, 119, .035);
  --surface-2: rgba(13, 115, 119, .07);
  --line:      rgba(9, 60, 62, .11);
  --line-2:    rgba(9, 60, 62, .22);

  --teal:      #0d7377;
  --teal-deep: #095558;
  --amber:     #d98a12;
  /* Measured on the tinted pill, not on --bg — the pill costs ~0.5 of ratio.
     Earlier values (#7a4a02 / #06484b) were set from a buggy measurement and
     overshot to 6.5:1 and 8.6:1, which read as near-black rather than brand
     colour. These sit at 5.5:1 and 5.2:1 on the pill: AA with real margin,
     and recognisably teal and amber. */
  --amber-ink: #8a5403;
  --teal-ink:  #0d6b6f;
  --on-teal:   #ffffff;

  --text:      #0a1416;
  --muted:     #48605f;
  /* Darkened from #6d8382 (3.66:1 on the light canvas). The dark theme moves
     --faint lighter and the light theme moves it darker — same token, opposite
     directions, because contrast is measured against opposite surfaces. */
  --faint:     #5e7371;

  /* On white, the dark logos are legible as-is; only desaturate them. */
  --logo-filter: grayscale(1) contrast(.9);
  --logo-rest: .55;

  --glow: 0 0 0 1px rgba(13, 115, 119, .18), 0 18px 50px -20px rgba(13, 115, 119, .4);
  --shadow: 0 24px 60px -34px rgba(9, 60, 62, .45);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 92px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }

.skip {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 999;
  background: var(--teal);
  color: var(--on-teal);
  padding: .6rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
  padding: .38rem .85rem;
  border-radius: 999px;
  line-height: 1.4;
}
.eyebrow::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

h1, h2, h3, h4 { line-height: 1.24; font-weight: 700; text-wrap: balance; }

.h-xl { font-size: clamp(2.3rem, 6.1vw, 4.1rem); line-height: 1.12; }
.h-lg { font-size: clamp(1.85rem, 4.4vw, 3.05rem); }
.h-md { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.lead {
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Analogous ramp only — a teal→amber blend turns Arabic letterforms muddy
   at large sizes. Amber stays reserved for small accents. */
.grad {
  background: linear-gradient(100deg, #7ff0f3, var(--teal) 46%, var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme='light'] .grad {
  background: linear-gradient(100deg, #16a3a8, var(--teal) 48%, var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
}

.num { font-variant-numeric: tabular-nums; }
.en  { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.section-head { max-width: 700px; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.section-head .h-lg { margin-block: 1rem .9rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1;
  position: relative;
  isolation: isolate;
  background: var(--btn-bg);
  color: var(--on-teal);
  border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--teal) 75%, transparent);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px color-mix(in srgb, var(--teal) 88%, transparent);
}
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(-4px); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--teal);
  box-shadow: none;
}

.btn--sm { padding: .68rem 1.25rem; font-size: .9rem; }
.btn--full { inline-size: 100%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--teal-ink);
  font-weight: 700;
  border-block-end: 1px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.textlink:hover { border-color: currentColor; gap: .75rem; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-block-end: 1px solid transparent;
}
.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-block-end-color: var(--line);
}
/* Three columns with equal-width flanks, so the nav sits at the true centre of
   the header. A flex row with `margin-inline-start: auto` on the nav only ever
   pushes it up against the action buttons — it never centres it. */
.header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  block-size: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  justify-self: start; /* logical: right in RTL, left in LTR */
}
.brand svg, .brand img { block-size: 34px; inline-size: auto; }
.brand__mark {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--teal), var(--teal-deep));
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 20px -8px var(--teal);
}
.brand__mark::after {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.brand__name { font-weight: 700; font-size: 1.12rem; letter-spacing: 0; }

.nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  grid-column: 2;
  justify-self: center;
}
.nav a {
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  color: var(--muted);
  transition: color .22s var(--ease), background-color .22s var(--ease);
  position: relative;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--text); background: var(--surface); }

.header__act {
  display: flex;
  align-items: center;
  gap: .5rem;
  grid-column: 3;
  justify-self: end; /* logical: left in RTL, right in LTR */
}

.icon-btn {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: color .22s, border-color .22s, transform .22s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: scale(.94); }

/* Language switch — a real <a> to the translated URL, not a JS toggle, so
   crawlers follow it and the choice survives a hard reload. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  block-size: 40px;
  padding-inline: .85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
  transition: color .22s, border-color .22s, background-color .22s;
  white-space: nowrap;
}
.lang:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.lang svg { flex-shrink: 0; opacity: .75; }
.lang__code { direction: ltr; unicode-bidi: isolate; letter-spacing: .03em; }

.drawer__foot .btn,
.drawer .lang {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 52px;
  padding-block: 0;
  font-size: 1rem;
  margin-block-start: 0;
}
.drawer .lang { padding-inline: 1.1rem; }

.burger { display: none; }
.sun { display: none; }
[data-theme='light'] .sun  { display: block; }
[data-theme='light'] .moon { display: none; }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  /* Opaque for the same reason as the dropdown panel: the drawer covers the
     page, so letting 4% of a hero gradient through made its small print's
     contrast depend on which page you opened it from. */
  background: var(--bg);
  padding: 84px var(--gutter) max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
  min-block-size: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
/* Measured at 390x844 the old drawer's content ran to 1020px inside a
   non-scrolling fixed box, which left the matcher CTA and the language switch
   below the fold with no way to reach them. The links scroll and the actions
   are pinned, so both stay reachable at any viewport height. */
.drawer__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block-end: .25rem;
  /* A thin, quiet scrollbar rather than the platform default: on a short phone
     the list does overflow and the affordance has to stay, but the default grey
     bar ran the full height of the menu and dominated it. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.drawer__scroll::-webkit-scrollbar { inline-size: 3px; }
.drawer__scroll::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 3px;
}
.drawer__scroll::-webkit-scrollbar-track { background: transparent; }

.drawer__foot {
  flex-shrink: 0;
  display: grid;
  gap: .6rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line-2);
}

/* Unbuilt categories as chips. As full rows they read as equal in weight to
   real destinations, and the four of them were what overflowed the drawer. */
.drawer__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.drawer__chip {
  padding: .35rem .7rem;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--faint);
}

.drawer a {
  font-size: 1.12rem;
  font-weight: 700;
  padding: .7rem 0;
  border-block-end: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
}
.drawer a[aria-current='page'] { color: var(--teal-ink); }
.drawer__arw { flex-shrink: 0; color: var(--faint); font-weight: 400; }
.drawer a:hover { color: var(--teal); }

/* `.drawer a` is more specific than `.btn`, so it was overriding the button's
   colour and padding — grey-on-teal text at ~1.5:1. Restate them here. */
.drawer a.btn,
.drawer a.btn:hover {
  margin-block-start: 0;
  color: var(--on-teal);
  padding: .95rem 1.7rem;
  border-block-end: 0;
  justify-content: center;
  font-size: 1rem;
}

/* ---------- Ambient background ---------- */
.aura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  /* Fade before the section edge — a blurred blob clipped by overflow:hidden
     leaves a visible horizontal seam on short sections. */
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
.aura__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
[data-theme='light'] .aura__blob { opacity: .34; filter: blur(80px); }
.aura__blob--1 {
  inline-size: 46vw; block-size: 46vw;
  min-inline-size: 320px; min-block-size: 320px;
  background: radial-gradient(circle, var(--teal), transparent 68%);
  inset-block-start: -14vw;
  inset-inline-end: -8vw;
  animation: drift1 22s var(--ease) infinite alternate;
}
.aura__blob--2 {
  inline-size: 36vw; block-size: 36vw;
  min-inline-size: 260px; min-block-size: 260px;
  background: radial-gradient(circle, var(--amber), transparent 70%);
  opacity: .26;
  inset-block-start: 24vh;
  inset-inline-start: -10vw;
  animation: drift2 26s var(--ease) infinite alternate;
}
@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, -10%, 0) scale(1.18); }
}

.grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to left, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 76% 58% at 50% 34%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 76% 58% at 50% 34%, #000 12%, transparent 72%);
  opacity: .8;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(7.5rem, 16vh, 11rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.hero__in { max-width: 900px; }
.hero h1 { margin-block: 1.4rem 1.5rem; }
.hero h1 .grad { display: inline; }
.hero .lead { font-size: clamp(1.05rem, 2.1vw, 1.28rem); max-width: 58ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-block-start: 2.4rem;
}
.hero__note {
  margin-block-start: 1.4rem;
  font-size: .9rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  animation: slide 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.marquee img {
  block-size: 26px;
  inline-size: auto;
  filter: var(--logo-filter);
  opacity: var(--logo-rest);
  transition: opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease);
  /* Deliberately no will-change: it would promote all 20 logos to their own
     compositor layers permanently, to buy nothing on a 0.28s hover. */
}

/* Hover only raises opacity and scale, so it wins in both themes without a
   specificity fight. The previous rule was `filter: none`, which un-inverted the
   silhouette back to the logo's own dark pixels — on this canvas that read as no
   change at all, which is the bug this replaces. */
.marquee img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Light theme can afford to reveal the real brand colour, because a dark logo
   stays perfectly legible on a near-white surface. */
[data-theme='light'] .marquee img:hover { filter: none; }

/* Dim the rest of the row so the hovered logo is the clear focus. */
@media (hover: hover) and (pointer: fine) {
  .marquee__track:hover img { opacity: calc(var(--logo-rest) * .55); }
  .marquee__track:hover img:hover { opacity: 1; }
}
.marquee__cap {
  text-align: center;
  font-size: .82rem;
  color: var(--faint);
  margin-block-end: clamp(1.4rem, 3vw, 2rem);
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
}
/* mouse-follow spotlight — vars set in JS on pointer:fine devices */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--teal) 13%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }

/* ---------- Recommender ---------- */
.rec { position: relative; }
.rec__box {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 6%, transparent), transparent 42%),
    var(--bg-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rec__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  border-block-end: 1px solid var(--line);
  font-size: .85rem;
  color: var(--faint);
}
.rec__label { min-inline-size: 0; }
.rec__dots { display: flex; gap: .4rem; margin-inline-start: auto; flex-shrink: 0; }
.rec__dot {
  inline-size: 26px;
  block-size: 4px;
  border-radius: 99px;
  background: var(--line-2);
  transition: background-color .4s var(--ease), inline-size .4s var(--ease);
}
.rec__dot.is-on { background: var(--teal); inline-size: 38px; }

/* min-height keeps the box from jumping between steps of different length */
.rec__body { padding: clamp(1.6rem, 4vw, 3rem); min-block-size: 372px; display: grid; }

.step {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  align-content: start;
}
.step.is-active { opacity: 1; visibility: visible; transform: none; }

.step__q {
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  font-weight: 700;
  margin-block: .5rem 0;
}
.step__hint { color: var(--faint); font-size: .92rem; margin-block-start: .5rem; }
.step__idx { font-size: .82rem; color: var(--teal-ink); font-weight: 700; }

/* Always 2×2 — every question has exactly four options, and auto-fit would
   give an unbalanced 3+1 at mid widths. */
.opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-block-start: 1.75rem;
}
.opt {
  text-align: start;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.opt:hover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  transform: translateY(-2px);
}
.opt[aria-pressed='true'] {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.opt__ico {
  inline-size: 38px;
  block-size: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal);
}
.opt__t { font-weight: 700; font-size: .98rem; line-height: 1.4; }
.opt__s { font-size: .82rem; color: var(--faint); line-height: 1.45; }

.rec__back {
  margin-block-start: 1.5rem;
  font-size: .88rem;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}
.rec__back:hover { color: var(--text); }

/* thinking state */
.thinking { display: grid; place-content: center; justify-items: center; gap: 1.1rem; text-align: center; }
.thinking__ring {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-block-start-color: var(--teal);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.thinking p { color: var(--muted); font-size: .95rem; }

/* result */
.result__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 1.5rem;
}
.result__logo {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-teal);
  background: linear-gradient(140deg, var(--teal), var(--teal-deep));
  box-shadow: 0 10px 30px -10px var(--teal);
  flex-shrink: 0;
}
.result__name { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.2; }
.result__tag { color: var(--muted); font-size: .95rem; }
.result__why { color: var(--muted); max-width: 60ch; }
/* Shown when the matcher deliberately does not give you what you asked for. */
.result__why--caveat {
  margin-block-start: .9rem;
  padding-inline-start: .85rem;
  border-inline-start: 2px solid var(--amber);
  font-size: .93rem;
}

.result__list { display: grid; gap: .7rem; margin-block: 1.5rem; }
.result__list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .96rem;
  color: var(--muted);
}
.result__list svg { flex-shrink: 0; margin-block-start: .35rem; color: var(--teal); }
.result__list b { color: var(--text); font-weight: 700; }
/* Caveats read in amber, not teal — the honesty is the point. */
.result__list .is-note svg { color: var(--amber-ink); }
.result__list .is-note b { color: var(--amber-ink); }

.result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: 1.6rem;
}
.chip {
  font-size: .82rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.chip--amber {
  color: var(--amber-ink);
  border-color: color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.result__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.result__alt {
  margin-block-start: 1.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  font-size: .9rem;
  color: var(--faint);
}
.result__alt b { color: var(--muted); font-weight: 700; }

/* ---------- Categories ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.cat { display: flex; flex-direction: column; min-block-size: 216px; }
.cat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}
/* "٠١ / ٠٦" — Arabic-Indic digits are bidi class AN, so the RTL paragraph
   direction flips the two numbers around the slash. Isolate + force LTR so
   the counter always reads current-then-total. */
.cat__idx {
  font-size: .78rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--faint);
  white-space: nowrap;
}
.badge--live {
  color: var(--teal-ink);
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
  background: color-mix(in srgb, var(--teal) 11%, transparent);
}
.cat h3 { font-size: 1.14rem; margin-block-end: .6rem; }
.cat p { font-size: .93rem; color: var(--muted); line-height: 1.65; }
.cat__foot { margin-block-start: auto; padding-block-start: 1.4rem; font-size: .9rem; }
.cat--live { border-color: color-mix(in srgb, var(--teal) 26%, transparent); }
.cat--soon { opacity: .78; }
.cat--soon:hover { opacity: 1; }

/* ---------- Steps / methodology ---------- */
/* Explicit column counts, not auto-fit: there are exactly four steps and
   auto-fit produces an orphaned 3+1 row at desktop widths. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  position: relative;
}
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .steps { grid-template-columns: 1fr; } }

/* Connector line — only meaningful when all four sit on one row. */
.steps::before {
  content: '';
  position: absolute;
  inset-block-start: 21px;
  inset-inline: 6%;
  block-size: 1px;
  background: linear-gradient(to left, transparent, var(--line-2), transparent);
}
@media (max-width: 1000px) { .steps::before { display: none; } }
.stp { position: relative; }
.stp__n {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--teal);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--teal) 34%, transparent);
  margin-block-end: 1.25rem;
  position: relative;
  z-index: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.stp:hover .stp__n {
  background: var(--teal);
  color: var(--on-teal);
  box-shadow: 0 10px 26px -10px var(--teal);
}
.stp h3 { font-size: 1.05rem; margin-block-end: .55rem; }
.stp p { font-size: .92rem; color: var(--muted); line-height: 1.7; }

/* ---------- Proof / founder ---------- */
.proof {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } }

.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.quote blockquote {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  text-wrap: pretty;
}
.quote__who { display: flex; align-items: center; gap: .85rem; }
.quote__who img {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.quote__nm { font-weight: 700; font-size: .98rem; }
.quote__rl { font-size: .85rem; color: var(--faint); }

.stats { display: grid; gap: 1rem; grid-template-rows: repeat(3, 1fr); }
.stat { display: flex; align-items: center; gap: 1.25rem; }
.stat__n {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  min-inline-size: 3.6ch;
}
.stat__l { font-size: .92rem; color: var(--muted); line-height: 1.6; }

/* ---------- Lead magnet ---------- */
.lead-box {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 58%),
    var(--bg-soft);
  position: relative;
  overflow: hidden;
}
@media (max-width: 860px) { .lead-box { grid-template-columns: 1fr; } }
.lead-box h2 { margin-block: .9rem .8rem; }
.lead-box p { color: var(--muted); font-size: .97rem; }

.form { display: grid; gap: .7rem; }
.field {
  inline-size: 100%;
  padding: .95rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  transition: border-color .25s, background-color .25s;
  font-size: .97rem;
}
.field::placeholder { color: var(--faint); }
/* Emails and URLs are always Latin — typing them in an RTL field puts the
   caret and punctuation in the wrong place. */
input[type='email'].field,
input[type='url'].field,
input[type='tel'].field { direction: ltr; text-align: start; }
.field:focus {
  outline: none;
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
}
textarea.field { resize: vertical; min-block-size: 130px; line-height: 1.7; }
select.field { cursor: pointer; }
.form small { color: var(--faint); font-size: .82rem; }
.form__ok {
  padding: .9rem 1.15rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--teal) 34%, transparent);
  background: color-mix(in srgb, var(--teal) 11%, transparent);
  color: var(--teal);
  font-size: .93rem;
  font-weight: 700;
}
.label { font-size: .88rem; color: var(--muted); font-weight: 700; }

/* ---------- Footer ---------- */
.footer {
  border-block-start: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--bg-soft);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__h {
  font-size: .82rem;
  color: var(--faint);
  font-weight: 700;
  margin-block-end: 1rem;
}
.footer li { margin-block-end: .55rem; }
.footer li a { font-size: .93rem; color: var(--muted); transition: color .2s; }
.footer li a:hover { color: var(--teal); }
.footer__tag {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  margin-block: 1rem .7rem;
}
.footer__note { font-size: .92rem; color: var(--muted); max-width: 34ch; }
.footer__bar {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--faint);
}

/* ---------- WhatsApp FAB ---------- */
/* Physical `right`, not `inset-inline-start`: a chat button belongs bottom-right
   in both directions (the platform convention), rather than mirroring with the
   text direction and landing on top of body copy in LTR. */
.fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #05270f;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .8);
  transition: transform .3s var(--ease);
}
.fab:hover { transform: scale(1.08) translateY(-2px); }

/* ---------- Page hero (inner pages) ---------- */
.phero {
  position: relative;
  padding-block: clamp(7rem, 15vh, 9.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.phero h1 { margin-block: 1.2rem 1.1rem; }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem); margin-block: 2.5rem 1rem; }
.prose h3 { font-size: 1.1rem; margin-block: 1.75rem .6rem; }
.prose p, .prose li { color: var(--muted); margin-block-end: 1rem; }
.prose ul { display: grid; gap: .5rem; margin-block-end: 1.5rem; }
.prose ul li { position: relative; padding-inline-start: 1.4rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .72em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.prose a { color: var(--teal); border-block-end: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
.prose strong { color: var(--text); font-weight: 700; }

/* ---------- Hosting page bits ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.pick { display: flex; flex-direction: column; gap: .9rem; }
.pick--top {
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 9%, transparent), transparent 50%),
    var(--surface);
}
.pick__for { font-size: .82rem; color: var(--faint); }
.pick__nm { font-size: 1.45rem; font-weight: 700; }
.pick__ds { font-size: .92rem; color: var(--muted); line-height: 1.65; }

.answer {
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
}
.answer p { color: var(--muted); }
.answer strong { color: var(--text); }

.cmp { inline-size: 100%; border-collapse: collapse; font-size: .93rem; }
.cmp th, .cmp td { padding: .95rem 1rem; text-align: start; border-block-end: 1px solid var(--line); }
.cmp th { font-size: .82rem; color: var(--faint); font-weight: 700; }
.cmp td { color: var(--muted); }
.cmp tbody tr { transition: background-color .2s; }
.cmp tbody tr:hover { background: var(--surface); }
.cmp b { color: var(--text); font-weight: 700; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.faq { display: grid; gap: .7rem; }
.qa {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .25s;
}
.qa[open] { border-color: color-mix(in srgb, var(--teal) 32%, transparent); }
.qa summary {
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  color: var(--teal);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 1.3rem 1.3rem; color: var(--muted); font-size: .95rem; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.list-ok li, .list-no li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .94rem;
  color: var(--muted);
  margin-block-end: .8rem;
  line-height: 1.65;
}
.list-ok svg { color: var(--teal); flex-shrink: 0; margin-block-start: .35rem; }
.list-no svg { color: var(--faint); flex-shrink: 0; margin-block-start: .35rem; }

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   LTR (English) overrides
   Layout uses logical properties throughout, so direction is mostly free.
   These are the few places where a *physical* value is unavoidable.
   ========================================================================== */

/* The marquee track overflows toward the inline end, which flips with
   direction: leftward in RTL, rightward in LTR. Translating the wrong way
   would scroll empty space into view. */
@keyframes slide-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[dir='ltr'] .marquee__track { animation-name: slide-ltr; }

/* "Forward" is leftward in Arabic, rightward in English. */
[dir='ltr'] .btn:hover .arw { transform: translateX(4px); }

/* Latin text takes letter-spacing well; Arabic does not (it breaks the
   joins), which is why this is scoped to LTR rather than set globally. */
[dir='ltr'] .h-xl,
[dir='ltr'] .h-lg { letter-spacing: -.022em; }
[dir='ltr'] .eyebrow,
[dir='ltr'] .footer__h { letter-spacing: .04em; text-transform: uppercase; }

/* English runs longer than Arabic at the same point size — a touch more
   measure keeps the line length comfortable. */
[dir='ltr'] .lead { max-width: 66ch; }
[dir='ltr'] body { line-height: 1.7; }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Marks a number you still have to fill in from your own test data.
   Search the HTML for "todo" before you publish. */
.todo {
  display: inline-block;
  padding: .05em .5em;
  border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber-ink);
  font-size: .92em;
  font-weight: 700;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* Fallbacks — content must never be stuck invisible. */
.no-js [data-reveal],
.force-reveal [data-reveal] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  /* No stagger on phones: the delays sequence a section you can see all of at
     once. Scrolling a narrow screen you meet elements one by one, so the delay
     is time spent looking at nothing. */
  [data-reveal] { transition-duration: .35s; transition-delay: 0ms; }
}

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__act .btn { display: none; }
  /* No repositioning needed here: the header grid keeps the actions in column 3
     with `justify-self: end`, so hiding .nav leaves them pinned to the edge. */
}
@media (max-width: 560px) {
  .rec__body { padding: 1.35rem; min-block-size: 430px; }
  .opts { grid-template-columns: 1fr; }
  .fab { inline-size: 48px; block-size: 48px; bottom: 16px; right: 16px; }
  /* Full-bleed buttons read as tap targets, not as ragged inline links. */
  .hero__cta .btn,
  .result__cta .btn { flex: 1 1 100%; }
  /* The chrome label is decorative; the step dots carry the actual progress. */
  .rec__label { display: none; }
}

/* ---------- Motion preferences ---------- */
/* Brightness still changes for someone who asked for less motion — only the
   scale is dropped, since that is the part that actually moves. */
@media (prefers-reduced-motion: reduce) {
  .marquee img:hover { transform: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .header, .fab, .drawer, .aura, .grid-bg, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Full picks (static prose on the hosting page) ---------- */
/* One card per recommendation, rendered server-side from _source/tools_data.py.
   These verdicts used to live only in app.js, where no AI crawler could read
   them — this is the crawlable version, and the matcher reads the same data. */
.picks-full {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .picks-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pick-full { display: flex; flex-direction: column; }
.pick-full--top {
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 7%, transparent), transparent 46%),
    var(--surface);
}
.pick-full__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-block-end: 1.1rem;
}
.pick-full__rank {
  flex-shrink: 0;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
}
.pick-full__nm { font-size: 1.3rem; line-height: 1.2; }
.pick-full__tag { font-size: .84rem; color: var(--faint); line-height: 1.45; }
.pick-full__why {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.7;
  margin-block-end: 1.1rem;
}
.pick-full .result__list { margin-block: 0; }

/* ---------- Byline / freshness ---------- */
/* Carries a machine-readable <time datetime> next to the visible date, so the
   same "last updated" claim serves readers and answer engines. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  font-size: .88rem;
  color: var(--faint);
}
.byline strong { color: var(--muted); font-weight: 700; }
.byline__sep { opacity: .5; }
.byline__tested {
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
  padding: .18rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
}

/* Pending-category footnote: styled as a status, not a link, so it doesn't
   invite a click that goes nowhere. */
.cat__foot--soon { color: var(--faint); font-size: .86rem; }

/* ---------- Article furniture ---------- */
/* Breadcrumb: mirrors the BreadcrumbList schema already emitted per page, so the
   visible trail and the machine-readable one agree. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--faint);
  margin-block-end: 1.2rem;
}
.crumbs a { color: var(--muted); border-block-end: 1px solid transparent; }
.crumbs a:hover { color: var(--teal-ink); border-color: currentColor; }
.crumbs span[aria-current] { color: var(--faint); }

/* Inline source attribution under a claim. Citing a named source is one of the
   strongest levers for getting a page cited in turn. */
.src {
  font-size: .84rem;
  color: var(--faint);
  margin-block-start: 1.1rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line);
}
.src a { color: var(--teal-ink); border-block-end: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }

/* Numbered steps in prose — counter rather than list-style so the marker can be
   styled and stays on the correct side in RTL.
   `list-style: none` is load-bearing, not tidying: the global reset above covers
   `ul` but not `ol`, so without it the browser drew its own marker as well as the
   counter and every step was numbered twice ("1." next to the "01" chip). The
   padding reset goes with it, because suppressing the marker leaves the `ol`'s
   default indent behind and the chips would sit inset from the prose edge. */
.steps-list {
  counter-reset: s;
  display: grid;
  gap: .9rem;
  margin-block-end: 1.5rem;
  list-style: none;
  padding-inline-start: 0;
}
.steps-list li {
  counter-increment: s;
  position: relative;
  padding-inline-start: 2.4rem;
  color: var(--muted);
  line-height: 1.7;
}
.steps-list li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .12em;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
  border-radius: 7px;
  padding: .1rem .4rem;
}
.steps-list li b { color: var(--text); font-weight: 700; }

/* The evidence badge is teal only when we actually paid for and ran the test.
   Research-based pages get a neutral treatment so the two are never confused. */
.byline__tested--research {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--line-2);
}

/* ---------- Nav dropdown ---------- */
/* A button + panel, not a :hover menu. Hover-only menus can't be reached by
   keyboard and misfire on touch, where the first tap only triggers hover. */
.nav__group { position: relative; }

.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 400;
  color: var(--muted);
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] { color: var(--text); background: var(--surface); }
.nav__chev { transition: transform .25s var(--ease); }
.nav__btn[aria-expanded='true'] .nav__chev { transform: rotate(180deg); }

/* Anchored to the trigger's inline-start edge.
   The previous rule paired `inset-inline-start: 50%` with `translate: -50% 0`.
   The inset is logical and flips in RTL; `translate` is physical and does not,
   so the two disagreed and in Arabic the panel opened a full panel-width away
   from the button.

   Centring on the trigger is not worth chasing here: the panel is always wider
   than `.nav__group`, which shrink-wraps the button, and for an absolutely
   positioned box wider than its containing block CSS resolves auto inline
   margins by zeroing the start margin rather than splitting the negative free
   space — so `inset-inline: 0; margin-inline: auto` silently start-aligns
   anyway. Doing it deliberately with a single logical inset is honest about
   what happens, needs no per-direction override, and leaves `transform` free
   for the open animation. */
.nav__panel {
  position: absolute;
  inset-block-start: calc(100% + .55rem);
  inset-inline-start: 0;
  inline-size: min(580px, calc(100vw - 2 * var(--gutter)));
  z-index: 60;
  padding: .9rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  /* Opaque on purpose. This was `color-mix(... 97%, transparent)` with a
     backdrop blur, which let 3% of the page bleed through — enough that the
     small print inside measured 5.03:1 over a plain background but 4.37:1 when
     the hero's aura gradient sat behind it, i.e. below AA depending on which
     page you opened the menu on. A menu floats over arbitrary content, so its
     contrast has to be a property of the menu and not of the scroll position.
     Dropping the blur also removes a compositing layer we were paying for on
     every open. */
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  /* `hidden` is the source of truth for state; this only animates the reveal. */
  animation: dropIn .22s var(--ease);
}
.nav__panel[hidden] { display: none; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.nav__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.nav__col--new { border-inline-start: 1px solid var(--line); padding-inline-start: .9rem; }

.nav__ch {
  margin: .1rem 0 .45rem;
  padding-inline: .3rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--faint);
}
[dir='ltr'] .nav__ch { letter-spacing: .07em; text-transform: uppercase; }
.nav__ch--soon { margin-block-start: .9rem; }

.nav__list, .nav__soons { display: grid; gap: 2px; }

/* One flex item per side. Labels carry a nested <span class="en"> for mixed
   Arabic/Latin text; without the `.nav__t` wrapper that span became a second
   flex item and space-between drove the two halves of a single label to
   opposite ends of the row ("استضافة" ... "WordPress"). */
.nav__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--muted);
  transition: color .2s, background-color .2s;
}
.nav__t { min-inline-size: 0; }
.nav__panel a:hover,
.nav__panel a:focus-visible { color: var(--text); background: var(--surface-2); }
.nav__panel a[aria-current='page'] {
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}
/* The current row is tinted, and --faint against that tint measured 4.38:1 in
   the light theme — below AA. Same trap as --faint on the tinted count pill.
   The row is already highlighted, so its sub-label takes the row's own ink. */
.nav__panel a[aria-current='page'] .nav__in { color: var(--teal-ink); }

/* Unbuilt categories: chips, not full rows. As rows they read as equal in
   weight to things you can actually click, and on mobile the four of them were
   what pushed the drawer past the fold. */
.nav__soons { display: flex; flex-wrap: wrap; gap: .35rem; }
.nav__soons li { display: contents; }
.nav__soon {
  display: inline-block;
  padding: .3rem .6rem;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--faint);
  cursor: default;
}

/* Qualified with `.nav__panel a` deliberately: that selector is (0,1,1) and a
   bare `.nav__guide` is (0,1,0), so the row kept `align-items: center` and
   `justify-content: space-between` from it — which in a column flex box centred
   each title and pushed its category label to the bottom of the row. */
.nav__panel a.nav__guide {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .15rem;
}
.nav__guide .nav__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  color: var(--text);
}
.nav__guide:hover .nav__t { color: var(--teal); }
.nav__in { font-size: .74rem; color: var(--faint); }

.nav__count {
  flex-shrink: 0;
  font-size: .74rem;
  /* --muted, not --faint: at 12px on the tinted pill --faint measured 4.18:1,
     just under WCAG AA. */
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: .8rem;
  padding-block-start: .7rem;
  border-block-start: 1px solid var(--line);
}
.nav__foot a {
  padding: .3rem .3rem;
  font-size: .84rem;
  color: var(--teal-ink);
  background: none;
}
.nav__foot a:hover { text-decoration: underline; background: none; }
.nav__foot-all { font-weight: 700; }

/* Below this the panel is wider than it is useful; stack the two columns. */
@media (max-width: 1040px) {
  .nav__panel { inline-size: min(340px, calc(100vw - 2 * var(--gutter))); }
  .nav__cols { grid-template-columns: 1fr; gap: .2rem; }
  .nav__col--new {
    border-inline-start: 0;
    padding-inline-start: 0;
    margin-block-start: .9rem;
    padding-block-start: .8rem;
    border-block-start: 1px solid var(--line);
  }
}

/* ---------- Drawer: categories block ---------- */
.drawer__label {
  margin-block: .85rem .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--faint);
}
[dir='ltr'] .drawer__label { letter-spacing: .05em; text-transform: uppercase; }
/* ---------- Guides index ---------- */
.guides__cat { margin-block-end: 1.25rem; }
.guides__cat h2 { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.guides__n {
  font-size: .8rem;
  font-weight: 400;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Guide card date. Deliberately NOT .cat__idx: that class forces direction:ltr
   for the "01 / 06" counters, which reorders an Arabic month name. */
.guide__date { font-size: .78rem; color: var(--faint); }

/* One flex item per side, so a label containing a Latin <span class="en"> word
   stays whole instead of splitting and drifting to the centre. */
.drawer__t { min-inline-size: 0; }
.drawer__badge {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 400;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .12rem .55rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Renewal-price emphasis in comparison tables. The renewal column is the point
   of the table, so it is the only coloured cell. */
.cmp td.warn { color: var(--amber-ink); font-weight: 700; }
.cmp td.ok   { color: var(--teal-ink); font-weight: 700; }

/* Affiliate disclosure that sits directly beside a monetised link, not only in
   the footer — the placement regulators and readers both expect. */
.aff-note {
  font-size: .82rem;
  color: var(--faint);
  line-height: 1.6;
  margin-block-start: .8rem;
}
.aff-note a { color: var(--teal-ink); border-block-end: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }

/* Outbound CTA band: an affiliate button plus its disclosure, kept together so
   the two can never be separated by a later edit. */
.cta-band {
  margin-block-start: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 60%),
    var(--surface);
}
.cta-band .aff-note { margin-block-start: .9rem; margin-block-end: 0; }

/* Affiliate CTA inside a generated pick card */
.pick-full__cta { margin-block-start: 1.25rem; }