/* وصلة — the landing page's whole stylesheet.
   No framework, no build step: these files upload as they are.
   Colours are the app's own tokens (app_theme.dart), so the site and the
   product cannot drift apart. */

:root {
  --ink: #0e1621;          /* the dark sections */
  --ink-2: #141d2a;
  --ink-3: #1a2533;        /* a card on a dark section */
  --accent: #f58232;       /* AppColors.secondary — a fill, not an ink */
  --accent-ink: #ad520a;   /* the same hue, dark enough to read as text
                              on a light surface: #f58232 is 2.59:1 on
                              white, which fails even the 3:1 UI floor */
  --accent-2: #f89a4a;     /* AppColors.secondaryLight */
  --paper: #f2f5f8;        /* the light sections */
  --paper-2: #ffffff;
  --on-dark: #ffffff;
  --on-dark-2: #9aa6b6;
  --on-light: #111827;     /* AppColors.textPrimary */
  --on-light-2: #5f6673;   /* AppColors.textSecondary, darkened: the
                              app's own value is 4.42:1 here, just under
                              the 4.5 body-text threshold */
  --line-dark: rgba(255, 255, 255, .09);
  --line-light: #e4e8ee;
  --r: 14px;
  --max: 1320px;
}

@font-face {
  font-family: 'Cairo';
  src: url('assets/Cairo.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-light);
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; }
img { max-width: 100%; }
svg { display: block; }

/* ---------------------------------------------------------------- header */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 22, 33, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.bar { display: flex; align-items: center; gap: 28px; padding: 10px 0; }
.brand img { height: 32px; display: block; }
.bar nav { display: flex; gap: 22px; flex-wrap: wrap; margin-inline: auto; }
.bar nav a {
  color: #c7cfda; text-decoration: none;
  font-size: 14.5px; font-weight: 600; padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.bar nav a:hover { color: #fff; }
.bar nav a.on { color: #fff; border-bottom-color: var(--accent); }
.bar .actions { display: flex; gap: 10px; }
@media (max-width: 1120px) { .bar nav { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 22px; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: 15px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-outline { border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-2); }
.btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero .photo {
  position: absolute; inset: 0;
  background: url('assets/hero_truck.jpg') center/cover no-repeat;
}
/* Darkens the trailing edge the aside sits on and the leading edge the
   words sit on, leaving the truck itself in the clear middle. */
.hero .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(14, 22, 33, .92) 0%,
        rgba(14, 22, 33, .30) 22%, rgba(14, 22, 33, 0) 42%),
    linear-gradient(90deg, rgba(14, 22, 33, .88) 0%,
        rgba(14, 22, 33, .25) 34%, rgba(14, 22, 33, 0) 55%),
    linear-gradient(180deg, rgba(14, 22, 33, .35) 0%, transparent 40%);
}
.hero .wrap { position: relative; display: flex; align-items: center; }
.hero .inner { padding: 58px 0 62px; max-width: 520px; margin-inline-end: auto; }
.hero .mark {
  margin: 0 0 4px; display: flex; align-items: center; gap: 12px;
  font-size: clamp(34px, 4.6vw, 52px); font-weight: 900;
  line-height: 1.1; color: #fff; letter-spacing: -1px;
}
.hero .mark svg { width: 38px; height: 38px; color: var(--accent); flex: none; }
.hero h1 {
  font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: #fff;
  margin: 0 0 14px; line-height: 1.45; text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead {
  color: #cdd5e0; font-size: clamp(14.5px, 1.5vw, 16.5px);
  max-width: 42ch; margin: 0 0 26px;
}
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* The aside on the far trailing edge, behind its own orange rule. */
.hero .aside {
  color: #eef1f5; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700;
  line-height: 1.6; padding-inline-start: 20px;
  border-inline-start: 3px solid var(--accent);
  flex: none;
}
@media (max-width: 900px) { .hero .aside { display: none; } }

/* ------------------------------------------------------- the trust strip */
.strip { background: var(--ink-2); border-top: 1px solid var(--line-dark); }
.strip .row { display: grid; gap: 0; }
@media (min-width: 760px) {
  .strip .row { grid-template-columns: repeat(4, 1fr); }
  .strip .item + .item { border-inline-end: 1px solid var(--line-dark); }
}
.strip .item {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px; justify-content: center;
}
.strip .ic {
  order: -1;
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .12); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .22);
}
.strip .ic svg { width: 21px; height: 21px; }
.strip b { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.strip span { color: var(--on-dark-2); font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------------------- section */
section { padding: 60px 0; }
.light { background: var(--paper); }
.dark { background: var(--ink); color: var(--on-dark); }
.head { text-align: center; margin-bottom: 34px; }
.head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 0 0 6px; }
.head p { margin: 0; color: var(--on-light-2); font-size: 15.5px; }
.dark .head p { color: var(--on-dark-2); }

/* -------------------------------------------------- كيف تعمل: two tracks */
.tracks { display: grid; gap: 22px; }
@media (min-width: 1000px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: var(--r); padding: 22px 24px 26px;
}
.track .tophead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.track h3 {
  margin: 0; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
/* The orange double-chevron of the wordmark, reused as the section mark. */
.track h3 svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.track .sub { margin: 0; color: var(--on-light-2); font-size: 13.5px; }
@media (max-width: 560px) { .track .tophead { flex-direction: column; gap: 2px; } }

.steps { display: flex; align-items: flex-start; }
.step { flex: 1; text-align: center; }
.step .dot {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: #eef1f6; display: grid; place-items: center;
  position: relative; color: #2b3442;
}
.step .dot svg { width: 22px; height: 22px; }
/* The number hangs under the circle, half outside it. */
.step .n {
  position: absolute; bottom: -9px; inset-inline-start: 50%;
  transform: translateX(50%);
  width: 19px; height: 19px; border-radius: 50%;
  background: #eef1f6; border: 2px solid var(--paper-2);
  color: #5b6879; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.step p { margin: 0; font-size: 12.5px; color: #3d4756; line-height: 1.5; }
.arrow { flex: none; padding: 16px 4px 0; color: #ccd3dd; }
/* Mirrors under RTL like every directional glyph in the app. */
.arrow svg { width: 15px; height: 15px; }
@media (max-width: 680px) {
  .steps { flex-direction: column; gap: 18px; }
  .step { display: flex; align-items: center; gap: 14px; text-align: start; }
  .step .dot { margin: 0; flex: none; }
  .arrow { display: none; }
}

/* ------------------------------- لماذا وصلة: a grid beside a photo panel */
.split { display: grid; gap: 0; align-items: stretch; background: var(--ink); }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 460px; } }
.split .main { padding: 56px 0; }
.split .main .inner {
  width: min(100% - 48px, calc(var(--max) - 460px));
  margin-inline-start: auto; margin-inline-end: 0;
  padding-inline-end: 24px;
}
@media (max-width: 999px) {
  .split .main .inner { margin-inline: auto; padding-inline-end: 0; }
}

.whygrid { display: grid; gap: 14px; }
@media (min-width: 620px) { .whygrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .whygrid { grid-template-columns: repeat(3, 1fr); } }
.cell {
  display: flex; gap: 14px; align-items: center;
  background: var(--ink-3); border: 1px solid var(--line-dark);
  border-radius: var(--r); padding: 16px 18px;
}
/* The icon leads the row visually but is written last, so the text reads
   first to a screen reader. */
.cell .ic {
  order: -1;
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .12); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .22);
}
.cell .ic svg { width: 21px; height: 21px; }
.cell b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 2px; }
.cell span { color: var(--on-dark-2); font-size: 12.5px; line-height: 1.55; }

/* A photograph slot. Without a file it is a drawn wash rather than a stock
   photo of somebody else's truck, which would read as a claim. */
.ph {
  position: relative; min-height: 280px; overflow: hidden;
  background:
    radial-gradient(420px 220px at 30% 20%, rgba(245, 130, 50, .22), transparent 70%),
    linear-gradient(200deg, #1d2937, #0e1621 70%);
  background-size: cover; background-position: center;
  /* The slot inherits a two-layer gradient background, so the repeat
     default was never reset. It is invisible while `cover` fills the
     box and tiles the photograph the moment anything changes the
     slot's shape. */
  background-repeat: no-repeat;
}
.ph.has-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14, 22, 33, .82), rgba(14, 22, 33, .10));
}
.ph .cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: 26px 28px;
  color: #fff; font-size: clamp(17px, 2vw, 22px); font-weight: 800;
  line-height: 1.5; text-align: start;
}
.ph .cap em { font-style: normal; color: var(--accent); display: block; }

/* ------------------------------------------------ the two audience panels */
.panels { display: grid; gap: 22px; }
@media (min-width: 1000px) { .panels { grid-template-columns: 1fr 1fr; } }
/* **The photograph sits above the card, at its own proportions.** As a side
   column it had to be cropped to whatever shape the column happened to be,
   and the owner's objection was exactly that: the picture was never shown
   whole. Across the top it keeps its own aspect — `ph()` writes it from the
   file's header — so nothing is thrown away, and dropping in a differently
   proportioned photograph needs no change here.

   `column-reverse` rather than reordering the markup: the text stays first
   in the document, which is the order it should be read in. */
.panel {
  display: flex; flex-direction: column-reverse;
  background: var(--paper-2);
  border: 1px solid var(--line-light); border-radius: var(--r);
  overflow: hidden;
}
/* The two photographs have different proportions, so the two cards want
   different heights and the grid stretches both to the taller. The body
   takes that slack; without it the spare height landed above the shorter
   card's picture as a white band. */
.panel .body { flex: 1; padding: 18px 22px; min-width: 0; }
.panel .ph { flex: none; width: 100%; max-width: none; min-height: 0; }
.panel h3 {
  margin: 0 0 3px; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.panel h3 svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.panel .sub { margin: 0 0 14px; color: var(--on-light-2); font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.tile {
  text-align: center; padding: 10px 4px;
  border: 1px solid var(--line-light); border-radius: 10px;
  background: #fbfcfd;
}
.tile .ic {
  width: 30px; height: 30px; margin: 0 auto 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .10); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .20);
}
.tile .ic svg { width: 15px; height: 15px; }
.tile span { font-size: 10.5px; color: #47515f; line-height: 1.35; display: block; }
.more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  color: var(--accent-ink); text-decoration: none; font-weight: 700;
  font-size: 13px;
}
.more svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
}

/* ---------------------------------------------------- الأمان والثقة */
.trust { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 1000px) { .trust { grid-template-columns: 380px 1fr; } }
.trust .head { text-align: start; margin-bottom: 22px; }
.tcards { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tcards { grid-template-columns: repeat(4, 1fr); } }
.tcard {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: var(--r); padding: 18px 16px;
  display: flex; align-items: center; gap: 12px;
}
.tcard .ic {
  order: -1;
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .10); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .20);
}
.tcard .ic svg { width: 19px; height: 19px; }
.tcard b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.tcard span { font-size: 11.5px; color: var(--on-light-2); line-height: 1.5; }

.pledge {
  background: var(--ink); color: #fff; border-radius: var(--r);
  padding: 28px 26px; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
}
.pledge .glow {
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 76% 26%,
      rgba(245, 130, 50, .26), transparent 70%);
}
.pledge .ic {
  order: -1;
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .14); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .26);
}
.pledge .ic svg { width: 23px; height: 23px; }
.pledge .t { position: relative; }
.pledge h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.pledge p { margin: 0; color: var(--on-dark-2); font-size: 13.5px; line-height: 1.6; }

/* -------------------------------------------------------------- contact */
.contact { background: var(--paper); padding: 0 0 60px; }
.contact .pledge { display: block; text-align: center; padding: 34px 26px; }
.contact .pledge p { max-width: 58ch; margin-inline: auto; font-size: 15px; }
.contact .pledge .btn { margin-top: 16px; }

/* ---------------------------------------------------------------- footer */
footer { background: var(--ink); color: var(--on-dark-2); padding: 26px 0 20px; }
.foot { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot > img { height: 30px; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; margin-inline: auto; }
.foot nav a, .foot .mail {
  color: #c7cfda; text-decoration: none; font-size: 13.5px;
}
.foot nav a:hover, .foot .mail:hover { color: var(--accent-2); }
.foot .mail { display: inline-flex; align-items: center; gap: 8px; }
.foot .mail svg { width: 16px; height: 16px; }
.copy {
  border-top: 1px solid var(--line-dark); margin-top: 18px; padding-top: 14px;
  font-size: 12.5px; color: #8b95a4;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ------------------------------------------------------------ legal page */
.doc { padding: 46px 0 76px; background: var(--paper); }
.doc .sheet {
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: var(--r); padding: 36px clamp(20px, 4vw, 52px);
  max-width: 900px; margin-inline: auto;
}
.doc h1 { font-size: clamp(25px, 4vw, 33px); margin: 0 0 6px; }
.doc .updated { color: var(--on-light-2); margin: 0 0 30px; font-size: 14.5px; }
.doc h2 { font-size: 18px; margin: 30px 0 10px; color: var(--accent-ink); font-weight: 800; }
.doc p { margin: 0 0 12px; color: #33393f; font-size: 15.5px; }
.doc .back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px;
  color: var(--accent-ink); text-decoration: none; font-weight: 700;
}
.doc .back svg { width: 15px; height: 15px; }

/* A printed copy is a real use here: a carrier or a lawyer may want one. */
@media print {
  header, footer, .back { display: none; }
  body, .doc, .doc .sheet { background: #fff; }
  .doc .sheet { border: 0; padding: 0; }
  .doc h2, .doc p { color: #000; }
}

/* A drawn panel, for the three slots we have no photograph for. Same call
   the app makes for WaslaActionBanner's route lines: a path costs nothing
   to license, adds no weight, and stays sharp at any size. */
/* **`background-color`, not the `background` shorthand.** The shorthand
   resets every longhand it does not mention, so this one line was silently
   undoing the `background-size: cover` and the repeat default set on `.ph`
   above — the photographs were being painted at their native size and
   clipped by the box, and tiled the moment the box grew larger than them. */
.ph { background-color: var(--ink); }
.ph .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph .cap {
  background: linear-gradient(0deg, rgba(14, 22, 33, .92) 30%, transparent);
}

/* The footer's social marks. They carry no href yet — the accounts have not
   been given, and an icon that links to a guessed handle can land a reader
   on a stranger's profile. Add the URLs to SOCIAL in build_site.py and they
   become links with no other change. */
.social { display: flex; gap: 9px; }
.social span, .social a {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); color: #c7cfda;
  border: 1px solid var(--line-dark);
}
.social svg { width: 15px; height: 15px; }
.social a:hover { color: var(--accent-2); border-color: var(--accent); }
.foot .end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }

/* ------------------------------------------------------------ phone width */
/* The bar and the hero both held their width open at 400px and pushed a
   horizontal scrollbar under the whole page: the bar's two buttons plus the
   wordmark do not fit one row, and a flex item's default min-width is its
   content, so the hero's nowrap buttons refused to shrink. */
@media (max-width: 720px) {
  .wrap { width: min(100% - 32px, var(--max)); }
  .bar { flex-wrap: wrap; gap: 10px 14px; }
  .bar .actions { margin-inline-start: auto; }
  .btn { padding: 9px 16px; font-size: 14px; }
  .hero .inner { max-width: none; padding: 40px 0 44px; }
  .hero .cta .btn { flex: 1 1 auto; justify-content: center; }
  .strip .item { padding: 16px 0; justify-content: flex-start; }
  .split .main { padding: 40px 0; }
  section { padding: 44px 0; }
}
.hero .inner, .track, .panel .body, .cell, .tcard, .pledge { min-width: 0; }
.cell b, .cell span, .tcard b, .tcard span, .strip b, .strip span,
.tile span, .step p { overflow-wrap: anywhere; }

/* --------------------------------------------------------- keyboard focus */
/* Nothing marked the focused element, so a keyboard or screen-reader user
   moving through the header had no way to tell where they were. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.dark :focus-visible, header :focus-visible, footer :focus-visible,
.hero :focus-visible, .pledge :focus-visible {
  outline-color: var(--accent-2);
}

/* The one link that only appears when it is reached by keyboard. */
.skip {
  position: absolute; inset-inline-start: 50%; top: 0;
  transform: translate(50%, -120%);
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 10px 20px; border-radius: 0 0 10px 10px; text-decoration: none;
  z-index: 100;
}
.skip:focus-visible { transform: translate(50%, 0); }

/* --------------------------------------------------------- reduced motion */
/* `scroll-behavior: smooth` is set on <html> above; an animated jump down a
   long page is exactly what someone with a vestibular disorder turns off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* The panel carries a sentence now rather than a tile row: the tiles were
   «كيف تعمل وصلة» a third time, in shorter words. */
.panel .lede { margin: 0; color: #3d4756; font-size: 13.5px; line-height: 1.7; }

/* «ابدأ الآن» promises something nobody can do yet — the app is not on the
   stores. This says so where the button is, not at the foot of the page. */
.hero .soon {
  margin: 16px 0 0; font-size: 13px; color: #c3cbd6;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero .soon::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* --------------------------------------------- the bar, and reaching a link */
/* An anchor click puts the section's top at y=0, which is *behind* the sticky
   bar — the heading you clicked toward is the one thing it covers. */
section[id], div[id].split { scroll-margin-top: 66px; }

/* The last section was short enough that the page ran out of scroll before it
   could pass under the bar: its top sat at 2826px against a maximum scroll of
   2627, so «الأمان والثقة» could never be the current section and clicking it
   lit «تواصل معنا» instead. This is the room that makes every section
   reachable — not padding for its own sake, and `tool/nav_test.js` fails if it
   is taken away again. */
.contact { padding-bottom: 210px; }

/* The menu button, shown only where the nav is not. */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; margin-inline-start: auto; color: #fff; border-radius: 8px;
}
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle .x, header.open .menu-toggle .bars { display: none; }
header.open .menu-toggle .x { display: block; }

@media (max-width: 1120px) {
  /* The bar has to be allowed to wrap here, not only at phone width: the
     open nav is a full-width row, and without wrapping it stays on the same
     line as the logo and squeezes everything — it opened *above* the bar. */
  .bar { flex-wrap: wrap; }
  .menu-toggle { display: block; }
  .bar .actions { margin-inline-start: 0; }
  /* Below this width the bar simply hid its nav and nothing replaced it —
     on every phone and most tablets the site had no navigation at all. */
  .bar nav {
    display: none;
    order: 3; flex-basis: 100%; flex-direction: column; gap: 0;
    margin-inline: 0; padding-top: 6px;
    border-top: 1px solid var(--line-dark);
  }
  header.open .bar nav { display: flex; }
  .bar nav a {
    padding: 11px 2px; border-bottom: 1px solid var(--line-dark);
    border-inline-start: 3px solid transparent;
  }
  .bar nav a.on {
    border-bottom-color: var(--line-dark);
    border-inline-start-color: var(--accent);
    padding-inline-start: 10px;
  }
}

/* ------------------------------------------------------- direction, and the
   language switch */
/* Every arrow on the page points *forward* — toward the next step, toward
   the page it opens. Forward is leftward in Arabic and rightward in English,
   so the mirror belongs to the direction, not to the glyph. It was applied
   unconditionally while the site was Arabic only, which would have pointed
   every arrow backwards in English. Same rule the app states for
   `matchTextDirection`. */
[dir="rtl"] .arrow svg,
[dir="rtl"] .more svg,
[dir="rtl"] .doc .back svg { transform: scaleX(-1); }

.lang {
  display: inline-flex; align-items: center; gap: 7px;
  color: #c7cfda; text-decoration: none; font-size: 14px; font-weight: 700;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.lang:hover { color: #fff; border-color: var(--accent); }
.lang svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .lang span { display: none; } }

/* ---------------------------------------------------- how matching decides */
/* **Deliberately not numbered.** The five axes are weighed at the same time,
   not walked in order — and this project's own rule is that numbering has to
   encode something true. «كيف تعمل وصلة» above is a real sequence and is
   numbered; this is not, and is not. */
.criteria {
  display: grid; gap: 0; max-width: 780px; margin-inline: auto;
  background: var(--paper-2); border: 1px solid var(--line-light);
  border-radius: var(--r); overflow: hidden;
}
.crit {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border-inline-start: 3px solid var(--accent);
}
.crit + .crit { border-top: 1px solid var(--line-light); }
.crit .ic {
  order: -1; flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(245, 130, 50, .10); color: var(--accent);
  border: 1px solid rgba(245, 130, 50, .20);
}
.crit .ic svg { width: 20px; height: 20px; }
.crit b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.crit span span { color: var(--on-light-2); font-size: 13.5px; line-height: 1.6; }

.matching .gate {
  display: flex; align-items: center; gap: 14px;
  max-width: 780px; margin: 16px auto 0; padding: 16px 22px;
  border: 1px dashed var(--line-light); border-radius: var(--r);
  background: transparent;
}
.matching .gate .ic { order: -1; flex: none; color: var(--on-light-2); }
.matching .gate .ic svg { width: 22px; height: 22px; }
.matching .gate b { display: block; font-size: 14px; margin-bottom: 2px; }
.matching .gate span span { color: var(--on-light-2); font-size: 13px; line-height: 1.6; }

.verdict {
  max-width: 780px; margin: 30px auto 0; text-align: center;
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; line-height: 1.6;
}
.verdict em { font-style: normal; color: var(--accent-ink); display: block; }

/* The one link inside the pre-launch note — it was inheriting the dim note
   colour and did not read as something you could press. */
.hero .soon a {
  color: var(--accent-2); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  /* It is one label; at phone width it was breaking across two lines in the
     middle of itself. */
  white-space: nowrap;
}
.hero .soon a:hover { color: #fff; }

/* The registration number is an identifier, so it keeps the certificate's own
   Latin digits and its own direction inside Arabic text. <bdi> isolates it so
   the surrounding RTL run cannot reorder it — a reordered registration number
   is a wrong one. */
.cr { font-variant-numeric: tabular-nums; letter-spacing: .3px; color: #a3adbb; }

/* ------------------------------------------------------------ phone header */
/* At 390px the logo, the language switch, the call to action and the menu
   button do not fit one row, so the bar wrapped and left the wordmark alone
   on the first line with everything crowded onto the second. On a phone the
   first row is the logo and the button that opens the menu — the rest goes
   inside the menu, which is what the menu is for. */
@media (max-width: 620px) {
  .bar .actions {
    order: 4; flex-basis: 100%; display: none;
    gap: 10px; padding-top: 10px;
  }
  header.open .bar .actions { display: flex; }
  header.open .bar nav { border-bottom: 1px solid var(--line-dark); }
  .bar .actions .btn, .bar .actions .lang { flex: 1; justify-content: center; }
  .menu-toggle { margin-inline-start: auto; }
  /* The switch keeps its label here: with the bar collapsed there is room,
     and a bare globe does not say which language it leads to. */
  .lang span { display: inline; }
}