/* ============================================================================
   وصيني / Waseni — marketing site.

   Every colour, radius and type role below is transcribed from the app's own
   tokens so the site and the product cannot drift apart:
     app/lib/theme/brand.dart  — the blue identity
     app/lib/theme/type.dart   — Cairo display / IBM Plex Sans Arabic body

   AMBER DISCIPLINE. brand.dart says amber is "the parcel, the landing flash,
   and the rule under a headline — nothing else. It is the one warm thing in
   the product and it stops meaning anything the moment it becomes decoration."
   In this stylesheet that leaves exactly one amber thing, .rule-amber under the
   h1. The only other amber on the page is the parcel inside the hero artwork,
   which is painted into the image. If you are about to add a third, don't.

   Fonts come from Google's subsetted woff2 (~40KB) rather than the TTFs in
   app/fonts (~836KB). The audience is on cheap phones and mobile data; the
   TTFs are same-origin but twenty times the bytes. To self-host instead, drop
   the <link> in the HTML and declare @font-face against app/fonts here.
   ============================================================================ */

:root {
  /* Action */
  --blue: #0a5af9;
  --blue-deep: #0847c6;
  --blue-tint: #f1f6ff;

  /* Surfaces, light */
  --page: #f5f7fb;
  --card: #ffffff;
  --line: #e4e9f5;

  /* Text on light */
  --ink: #101a33;
  --muted: #69718c;

  /* The splash's sky */
  --sky-0: #2e9bff;
  --sky-1: #0f6bf7;
  --sky-2: #0a55e6;
  --sky-3: #0847c6;

  /* Amber — the parcel, and one rule. Nothing else. */
  --amber: #ffba28;

  /* Corners, from Round in brand.dart */
  --r-card: 20px;
  --r-btn: 16px;
  --r-chip: 12px;
  --r-pill: 999px;

  /* Type */
  --display: "Cairo", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Space, 4px base */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;

  /* Motion, from Motion in tokens.dart — fast and decisive, no bounce */
  --fast: 120ms;
  --medium: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --shell: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Arabic needs more leading than the 1.15 in tokens.dart. That value is tuned for
   the app's short one-line labels; here a 62px Cairo headline wraps to two lines
   and the tashkeel on the upper line collides with the ascenders on the lower.
   No negative tracking either — Arabic is joined, and tightening it fights the
   letterforms instead of the gaps. Latin keeps both. */
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
  letter-spacing: normal;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s6);
}

/* The masthead is sticky and 68px tall, so an anchor jump would otherwise park
   the heading it targeted directly underneath it. */
[id] {
  scroll-margin-block-start: 88px;
}

/* Defensive, not a fix for an observed bug: measured overflow at 390px is 0.
   Grid and flex children default to min-width:auto, so an item's intrinsic width
   can push a 1fr track wider than the track — the hero SVG's viewBox is 560 wide.
   The page must never scroll sideways, so every track child may shrink. */
.hero__grid > *,
.trust > *,
.steps > *,
.sides > *,
.rides > *,
.footer__grid > * {
  min-width: 0;
}

/* Money and any figure that must align in a column. tokens.dart: Western
   digits everywhere, tabular figures, no exceptions. */
.num {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The skip link is the one hidden thing that has to come back — a keyboard user
   who cannot see it has no way to use it. */
.visually-hidden:focus {
  position: fixed;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  z-index: 40;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-btn);
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 247, 251, 0.86);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
}

.brand:hover {
  text-decoration: none;
}

/* The real logo mark, cropped from the app icon rather than redrawn. The full
   lockup carries وصيني beneath the mark; at 34px that word would be four pixels
   tall, so the header pairs the mark with live Cairo text instead. */
.brand__tile {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: block;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(8, 71, 198, 0.32);
}

.masthead__nav {
  display: flex;
  gap: var(--s6);
  margin-inline-start: auto;
  font-size: 15px;
}

.masthead__nav a {
  color: var(--muted);
  font-weight: 500;
}

.masthead__nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.lang {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  background: var(--card);
}

.lang:hover {
  color: var(--ink);
  border-color: #c9d4ea;
  text-decoration: none;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 90, 249, 0.26);
}

.btn--primary:hover {
  background: var(--blue-deep);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.btn--quiet:hover {
  border-color: #c9d4ea;
  background: var(--blue-tint);
}

.btn--sm {
  padding: 10px 16px;
  font-size: 14px;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--s16) var(--s24);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid #dce8ff;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-block-end: var(--s6);
}

.hero h1 {
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 800;
  margin-block-end: var(--s6);
}

/* The one amber rule. See the header of this file before adding another. */
.rule-amber {
  width: 62px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--amber);
  margin-block-end: var(--s6);
}

.hero__lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 46ch;
  margin-block-end: var(--s8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-end: var(--s4);
}

.hero__note {
  font-size: 14px;
  color: var(--muted);
}

/* The hero illustration — the signature.
   No panel behind it. The artwork carries its own near-white ground, so it sits
   directly on --page and reads as drawn onto the page rather than pasted into a
   box. A gradient card here would fight it. */
.hero__art {
  margin: 0;
}

.hero__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.hero__art figcaption {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin-block-start: var(--s3);
}

/* ---------------------------------------------------------------- sections */

.band {
  padding-block: var(--s24);
}

.band--tint {
  background: var(--card);
  border-block: 1px solid var(--line);
}

.band__head {
  max-width: 60ch;
  margin-block-end: var(--s16);
}

.band__head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-block-end: var(--s4);
}

.band__head p {
  color: var(--muted);
  font-size: 17px;
}

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-block-end: var(--s3);
}

/* --------------------------------------------------------------- the steps */

/* Numbered because the run genuinely is a sequence — the driver cannot deliver
   before collecting. Nowhere else on this page is numbered. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  counter-reset: step;
  position: relative;
}

.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s8) var(--s6) var(--s6);
}

.band--tint .step {
  background: var(--page);
}

.step__n {
  counter-increment: step;
  position: absolute;
  inset-block-start: calc(var(--s6) * -1);
  inset-inline-start: var(--s6);
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(10, 90, 249, 0.3);
}

.step__n::after {
  content: counter(step);
}

.step h3 {
  font-size: 20px;
  margin-block-end: var(--s3);
}

.step p {
  color: var(--muted);
  font-size: 15px;
}

/* --------------------------------------------------------------- the sides */

.sides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

.side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: border-color var(--medium) var(--ease), transform var(--medium) var(--ease);
}

.side:hover {
  border-color: #c9d4ea;
  transform: translateY(-3px);
}

.side__art {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  margin-inline-end: auto;
}

.side h3 {
  font-size: 21px;
}

.side p {
  color: var(--muted);
  font-size: 15px;
}

.side ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  font-size: 15px;
}

.side li {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  color: var(--ink);
}

.side li svg {
  flex: none;
  margin-block-start: 5px;
  color: var(--blue);
}

/* --------------------------------------------------------------- the trust */

.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.proofs {
  display: grid;
  gap: var(--s4);
}

.proof {
  display: flex;
  gap: var(--s4);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
}

.proof__photo {
  width: 168px;
  height: 112px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-chip);
  background: var(--blue-tint);
}

.proof h3 {
  font-size: 17px;
  margin-block-end: 4px;
}

.proof p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.strike {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-block-start: var(--s6);
}

.strike svg {
  color: #d9614c;
  flex: none;
}

/* ------------------------------------------------------------- the vehicles */

.rides {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.ride {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
  text-align: center;
  color: var(--blue);
}

.band--tint .ride {
  background: var(--page);
}

.ride img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
  margin-inline: auto;
}

.ride span {
  display: block;
  margin-block-start: var(--s3);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

/* ------------------------------------------------------------------ the cta */

.cta {
  background: linear-gradient(158deg, #52a9ff 0%, #1274f8 46%, #0b58ec 100%);
  border-radius: var(--r-card);
  padding: var(--s16);
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 70px rgba(4, 38, 110, 0.3);
}

.cta h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-block-end: var(--s4);
}

.cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  max-width: 48ch;
  margin-inline: auto;
  margin-block-end: var(--s8);
}

.cta__actions {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
}

.cta .btn--primary {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 8px 24px rgba(4, 38, 110, 0.28);
}

.cta .btn--primary:hover {
  background: #eaf1ff;
}

.cta .btn--quiet {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta .btn--quiet:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* --------------------------------------------------------------- the footer */

.footer {
  border-block-start: 1px solid var(--line);
  padding-block: var(--s12);
  margin-block-start: var(--s24);
  font-size: 14px;
  color: var(--muted);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  justify-content: space-between;
  align-items: flex-start;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}

.footer nav a {
  color: var(--muted);
}

.footer nav a:hover {
  color: var(--ink);
}

.footer__legal {
  margin-block-start: var(--s6);
  font-size: 13px;
}

/* ------------------------------------------------------------- legal pages */

.doc {
  max-width: 74ch;
  margin-inline: auto;
  padding-block: var(--s16);
}

.doc h1 {
  font-size: clamp(32px, 5vw, 46px);
  margin-block-end: var(--s4);
}

.doc__meta {
  color: var(--muted);
  font-size: 14px;
  margin-block-end: var(--s12);
  padding-block-end: var(--s6);
  border-block-end: 1px solid var(--line);
}

.doc h2 {
  font-size: 24px;
  margin-block: var(--s12) var(--s4);
}

.doc h3 {
  font-size: 18px;
  margin-block: var(--s8) var(--s3);
}

.doc p,
.doc li {
  color: #2c3654;
  margin-block-end: var(--s4);
}

.doc ul,
.doc ol {
  padding-inline-start: var(--s6);
  margin-block-end: var(--s4);
}

.doc li {
  margin-block-end: var(--s2);
}

.doc__note {
  background: var(--blue-tint);
  border: 1px solid #dce8ff;
  border-radius: var(--r-card);
  padding: var(--s6);
  margin-block-end: var(--s8);
}

.doc__note p {
  margin: 0;
  font-size: 15px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--s6);
  font-size: 15px;
}

.doc th,
.doc td {
  text-align: start;
  padding: var(--s3);
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}

.doc th {
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
}

.doc td {
  color: #2c3654;
}

/* ------------------------------------------------------------------ motion */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .side {
    transition: none;
  }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .hero__grid,
  .trust {
    grid-template-columns: 1fr;
    gap: var(--s12);
  }

  .steps,
  .sides {
    grid-template-columns: 1fr;
    gap: var(--s12);
  }

  .rides {
    grid-template-columns: repeat(2, 1fr);
  }

  .masthead__nav {
    display: none;
  }

  .masthead__end {
    margin-inline-start: auto;
  }

  .band,
  .hero {
    padding-block: var(--s16);
  }

  .cta {
    padding: var(--s12) var(--s6);
  }
}

@media (max-width: 480px) {
  .shell {
    padding-inline: var(--s4);
  }

  .hero__actions .btn,
  .cta__actions .btn {
    flex: 1 1 100%;
  }

  .proof {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }
}