/* ORBIT landing — shared by / (home.html), /ar/ and /en/.
   Plain CSS, no build step: these files are copied to the site as they are.
   Layout: one 1200px container; dark "ink" sections (hero, proof, guardrails,
   founding, footer) alternate with warm light ones (steps, booking site,
   contract, prices, FAQ). Every page renders fully without JavaScript. */

/* ── Tokens: palette "Riad" ─────────────────────────────────────────────── */
:root {
  --ink: #17120F;          /* espresso: dark sections, primary text */
  --ink-2: #211A16;        /* raised dark surface */
  --ink-3: #2E2520;        /* borders / cards on dark */
  --sand: #F2EADF;         /* tadelakt: light section background */
  --paper: #FBF7F1;        /* cards, page base (instead of white) */
  --clay: #B8573A;         /* terracotta: the one accent */
  --clay-strong: #A64E32;  /* same hue, AA contrast for small text and button fills (5.2:1 on paper) */
  --clay-soft: #EFD6C6;
  --brass: #C8A165;        /* highlight on dark: italic words, dots, seats */
  --olive: #7D8455;        /* success / valid only */
  --alert: #A8323A;        /* "Maintenant" line, refusals */
  --muted-dark: #A39486;   /* body text on dark (6.3:1 on ink) */
  --muted-light: #6F6359;  /* body text on light (4.9:1 on sand) */
  --line-dark: rgba(242, 234, 223, .10);
  --line-light: rgba(23, 18, 15, .09);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-label: "Archivo", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  /* Manrope right after Naskh: the Naskh file only covers Arabic letters, so
     digits, plates and brand names in Arabic text fall through to Manrope. */
  --f-ar: "Noto Naskh Arabic", "Manrope", "Geeza Pro", Tahoma, ui-sans-serif, system-ui, sans-serif;

  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(30px, 4vw, 48px);
  --fs-body: clamp(15px, 1.05vw + 11px, 17px);

  --container: 1200px;
  --gutter: 16px;
  --section-y: 96px;
  --hdr-h: 68px;
  --r-card: 16px;
  --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 48px -28px rgba(40, 25, 15, .55);
  --shadow-deep: 0 2px 0 rgba(0, 0, 0, .05), 0 40px 80px -40px rgba(20, 12, 8, .75);
  --glow-clay: radial-gradient(640px 420px at 78% 38%, rgba(184, 87, 58, .20), transparent 62%);
  --glow-brass: radial-gradient(420px 300px at 8% 100%, rgba(200, 161, 101, .10), transparent 60%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus: 0 0 0 2px var(--ink), 0 0 0 4px var(--brass);
}
@media (max-width: 760px) {
  :root { --section-y: 64px; --hdr-h: 60px; }
}

/* ── Fonts (self-hosted, latin + arabic subsets only; Fraunces pinned to weight 400 — the only weight used — keeping its opsz axis: 128 KB → 77 KB) ───────────────────── */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/site-fraunces-normal-400-latin.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: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/site-fraunces-italic-400-latin.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: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/site-manrope-normal-400-800-latin.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: "Archivo"; font-style: normal; font-weight: 600; font-stretch: 125%; font-display: swap;
  src: url("/fonts/site-archivo-normal-600-latin.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: "Noto Naskh Arabic"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/site-noto-naskh-arabic-normal-400-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* iOS paints the bands above and below the page with this colour. */
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--sand);
  font: 400 var(--fs-body) / 1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}
body:lang(ar) { font-family: var(--f-ar); line-height: 1.8; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}
@media (min-width: 761px) { :root { --gutter: 32px; } }
/* Big screens (or zoomed-out windows): the whole page widens a little so the
   sides never look abandoned. */
@media (min-width: 1800px) { :root { --container: 1360px; } }
@media (min-width: 2300px) { :root { --container: 1480px; } }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* ── Type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  font: 600 11px/1.3 var(--f-label);
  font-stretch: 125%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.is-light .eyebrow { color: var(--clay-strong); }
:lang(ar) .eyebrow { font-family: var(--f-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }

.h1, .h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
}
.h1 { font-size: var(--fs-h1); line-height: 1.02; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h1 em, .h2 em { font-style: italic; color: var(--brass); }
.is-light .h1 em, .is-light .h2 em { color: var(--clay); }
:lang(ar) .h1, :lang(ar) .h2 { font-family: var(--f-ar); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
:lang(ar) .h1 em, :lang(ar) .h2 em { font-style: normal; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 700 14px/1 var(--f-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
:lang(ar) .btn { font-family: var(--f-ar); font-size: 15px; }
.btn-clay {
  background: var(--clay-strong); color: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 24px -12px rgba(184, 87, 58, .9);
}
.btn-clay:hover { background: #943F27; }
.btn-line { border-color: rgba(242, 234, 223, .22); color: var(--sand); background: rgba(242, 234, 223, .02); }
.btn-line:hover { border-color: rgba(242, 234, 223, .45); background: rgba(242, 234, 223, .06); }
.is-light .btn-line { border-color: rgba(23, 18, 15, .18); color: var(--ink); background: transparent; }
.is-light .btn-line:hover { border-color: rgba(23, 18, 15, .4); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn-block { width: 100%; min-height: 50px; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: translateY(1px); }
}

/* ── Logo (the orbital mark IS the "O"; brass satellite) ────────────────── */
.brand { display: inline-flex; align-items: center; color: var(--sand); text-decoration: none; border-radius: 8px; }
.logo { height: 30px; width: auto; direction: ltr; }
.logo .sat { fill: var(--brass); }
.logo-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-spin { display: none; }
  .logo-still { display: block; }
}

/* ── 1 · Header ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(23, 18, 15, .86);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--line-dark);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* landing.js adds .at-top while the page sits at the top: the bar melts into
   the hero, then frosts over once the page moves. Without JS it stays frosted. */
.hdr.at-top { background: rgba(23, 18, 15, 0); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr.is-scrolled { box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .9); }

.hdr-in {
  height: var(--hdr-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.hdr .brand { justify-self: start; }
.nav { display: flex; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--muted-dark); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover { color: var(--sand); background: rgba(242, 234, 223, .05); }
.hdr-end { justify-self: end; display: flex; align-items: center; gap: 10px; }

/* Language switch: three real links, the current page marked. */
.lang {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line-dark); border-radius: var(--r-pill);
  background: rgba(242, 234, 223, .03);
}
.lang a {
  min-width: 34px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font: 700 12px/1 var(--f-body); letter-spacing: .04em;
  color: var(--muted-dark); text-decoration: none;
}
.lang a[lang="ar"] { font-family: var(--f-ar); font-size: 15px; letter-spacing: 0; padding-bottom: 2px; }
.lang a:hover { color: var(--sand); }
.lang a[aria-current="page"] { background: var(--sand); color: var(--ink); }

/* Menu (phones and tablets): <details>, so it opens with no JavaScript. */
.menu { display: none; position: static; }
.menu > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line-dark);
  color: var(--sand);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.menu .i-close { opacity: 0; transform: rotate(-45deg); }
.menu[open] .i-menu { opacity: 0; transform: rotate(45deg); }
.menu[open] .i-close { opacity: 1; transform: none; }
.menu[open] > summary { background: rgba(242, 234, 223, .06); }

.drawer {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-dark);
  /* The second shadow dims the page under the open menu. A fixed overlay
     can't do it: the header's backdrop-filter makes it the containing block
     for fixed children. clip-path keeps the dimming off the header itself. */
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 100vmax rgba(10, 7, 5, .55);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
  padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 20px;
  max-height: calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
}
.drawer-nav { display: grid; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; padding: 0 4px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--sand); text-decoration: none;
  font-size: 17px; font-weight: 600;
}
.drawer-nav a svg { width: 18px; height: 18px; color: var(--muted-dark); }
[dir="rtl"] .drawer-nav a svg { transform: scaleX(-1); }
.drawer-lang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 14px; }
.drawer-lang a {
  min-height: 46px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line-dark);
  color: var(--muted-dark); text-decoration: none; font-weight: 700; font-size: 14px;
}
.drawer-lang a[lang="ar"] { font-family: var(--f-ar); font-size: 16px; line-height: 1; padding-bottom: 3px; }
.drawer-lang a[aria-current="page"] { border-color: var(--brass); color: var(--sand); background: rgba(200, 161, 101, .08); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .drawer { animation: drawer-in .28s var(--ease) both; }
  @keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } }
}

@media (max-width: 1079px) {
  .hdr-in { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 639px) {
  .hdr-end > .lang, .hdr-end > .btn-clay { display: none; }
  .logo { height: 27px; }
}

/* ── Device: iPhone, CSS only ───────────────────────────────────────────────
   Desert-titanium band → black glass bezel → screen. The screen holds a real
   ORBIT screenshot (390 × 760 CSS px) between an iOS status bar and the home
   indicator strip, which together give the iPhone's 1 : 2.16 screen. Never
   mirrored in Arabic: a phone is a phone. --pw sets the whole device's width. */
.iphone {
  --pw: 300px;
  --sw: calc(var(--pw) - 16px);                 /* screen width */
  position: relative;
  width: var(--pw);
  padding: 2.5px;
  border-radius: 44px;
  direction: ltr;
  background: linear-gradient(135deg, #e3d0bd 0%, #8d7867 16%, #cdb6a0 33%, #6f5e51 54%, #b9a18b 76%, #e6d4c2 100%);
  box-shadow:
    inset 0 0 0 .75px rgba(255, 255, 255, .55),
    inset 0 0 0 1.5px rgba(40, 25, 15, .35),
    0 0 0 .5px rgba(0, 0, 0, .55),
    0 50px 90px -34px rgba(0, 0, 0, .92),
    0 26px 60px -26px rgba(184, 87, 58, .42);
}
/* Side buttons: action + volume on the left, power + camera control on the right. */
.iphone::before, .iphone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6f5e51, #c9b29c 60%, #8d7867);
}
.iphone::before {
  left: -2.5px; top: 17%; height: 25%;
  -webkit-mask: linear-gradient(#000 0 12%, transparent 12% 26%, #000 26% 56%, transparent 56% 64%, #000 64% 100%);
  mask: linear-gradient(#000 0 12%, transparent 12% 26%, #000 26% 56%, transparent 56% 64%, #000 64% 100%);
}
.iphone::after {
  right: -2.5px; top: 27%; height: 36%;
  -webkit-mask: linear-gradient(#000 0 34%, transparent 34% 74%, #000 74% 92%, transparent 92%);
  mask: linear-gradient(#000 0 34%, transparent 34% 74%, #000 74% 92%, transparent 92%);
}
.iphone-bezel { padding: 5.5px; border-radius: 41.5px; background: #050404; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.iphone-screen {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 36px; background: #fff;
  display: flex; flex-direction: column;
}
.iphone-screen::after {            /* glass: one soft reflection, no gloss */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%);
}
.sbar {
  position: relative; height: calc(var(--sw) * .137); flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sw) * .02) calc(var(--sw) * .085) 0 calc(var(--sw) * .11);
  background: #fff; color: #0b0b0c;
  font: 600 calc(var(--sw) * .042)/1 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}
.sbar-icons { display: flex; align-items: center; gap: calc(var(--sw) * .016); }
.sbar-icons svg { height: calc(var(--sw) * .03); width: auto; }
.island {
  position: absolute; left: 50%; top: calc(var(--sw) * .028); z-index: 2;
  width: calc(var(--sw) * .32); height: calc(var(--sw) * .094);
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.island::after {                    /* the front camera, a lens in the glass */
  content: ""; position: absolute; right: 18%; top: 50%; width: 22%; aspect-ratio: 1;
  max-width: calc(var(--sw) * .034); transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3550 0 18%, #0d1220 40%, #050608 70%);
}
.iphone-screen picture, .iphone-screen img { width: 100%; height: auto; display: block; }
.home-strip { height: calc(var(--sw) * .056); flex: none; background: #fff; position: relative; }
.home-strip::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--sw) * .02);
  width: 34%; height: 4px; transform: translateX(-50%); border-radius: 4px; background: #111;
}

/* Glass cards that float over the device edges. */
.float {
  position: absolute; z-index: 4;
  background: rgba(23, 18, 15, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid rgba(242, 234, 223, .12);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--sand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 28px 56px -22px rgba(0, 0, 0, .9);
}
.float-kicker {
  display: flex; align-items: center; gap: 7px;
  font: 600 10px/1.2 var(--f-label); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
}
:lang(ar) .float-kicker { font-family: var(--f-ar); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.float-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(200, 161, 101, .16); }

/* ── 2 · Hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glow-clay), var(--glow-brass);
}
[dir="rtl"] .hero::before { transform: scaleX(-1); }
.zellige {
  position: absolute; z-index: -1; inset-inline-end: -120px; top: -80px;
  width: 760px; height: 760px; max-width: none;
  color: var(--brass); opacity: .07;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 48px;
  padding-block: 72px var(--section-y);
}
.hero-copy { max-width: 600px; }
.hero .h1 { margin-top: 18px; }
.lead {
  margin-top: 22px; max-width: 33rem;
  color: var(--muted-dark);
  font-size: clamp(16px, .6vw + 13px, 18px); line-height: 1.6;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-ctas .btn { min-height: 52px; padding: 0 24px; font-size: 15px; }
.trust {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; padding: 0; list-style: none;
  font-size: 13px; color: var(--muted-dark);
}
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 15px; height: 15px; color: var(--brass); flex: none; }

.hero-device { position: relative; justify-self: center; margin: 8px 0; }
.hero-device .iphone { transform: rotate(-3deg); }
.float-req { inset-inline-start: -24%; bottom: 4%; width: 252px; }
.float-req b { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.float-req p { margin-top: 3px; font-size: 13px; color: var(--muted-dark); }
.doc-ok {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: rgba(125, 132, 85, .18); border: 1px solid rgba(125, 132, 85, .35);
  color: #CFD3B0; font-size: 12px; font-weight: 600;
}
.doc-ok svg { width: 14px; height: 14px; }
.float-cash { inset-inline-end: -22%; top: 16%; padding: 12px 16px; }
.float-cash span { display: block; font-size: 11.5px; color: var(--muted-dark); }
.float-cash b { display: block; margin-top: 2px; font: 400 26px/1.1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:lang(ar) .float-cash b { font-family: var(--f-display), var(--f-ar); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 40px; }
  .hero-copy { max-width: 640px; }
  .hero-device .iphone { --pw: 272px; }
  .float-req { inset-inline-start: -18%; width: 232px; }
  .float-cash { inset-inline-end: -16%; }
}
@media (max-width: 520px) {
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-device .iphone { --pw: 252px; transform: rotate(-2deg); }
  .float-req { inset-inline-start: -8%; width: 214px; padding: 12px 14px; bottom: 2%; }
  .float-cash { inset-inline-end: -6%; top: 9%; }
  .float-cash b { font-size: 22px; }
  .zellige { width: 520px; height: 520px; inset-inline-end: -180px; top: -40px; }
}
/* Both cards drift up and down for as long as the page is open, each at its
   own pace and phase so they never move together (asked for 2026-10-09).
   Transform only, so it runs on the compositor; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .float { will-change: transform; }
  .float-req { animation: drift 6.4s ease-in-out infinite; }
  .float-cash { animation: drift-sm 5.2s ease-in-out -2.1s infinite; }
  @keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes drift-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}

/* ── 3 · Proof strip ────────────────────────────────────────────────────── */
.proof {
  background: var(--ink-2);
  border-block: 1px solid var(--line-dark);
}
.proof-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.proof-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 24px;
  font-size: 14px; line-height: 1.45; color: var(--muted-dark);
}
.proof-list li + li { border-inline-start: 1px solid var(--line-dark); }
.proof-list li:first-child { padding-inline-start: 0; }
.proof-list li:last-child { padding-inline-end: 0; }
.proof-list b { color: var(--sand); font-weight: 700; }
.proof-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(200, 161, 101, .08); border: 1px solid rgba(200, 161, 101, .2);
  color: var(--brass);
}
.proof-ic svg { width: 20px; height: 20px; }
[lang="ar"] { font-family: var(--f-ar); }
@media (max-width: 960px) {
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-list li { padding: 22px 18px; }
  .proof-list li:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .proof-list li:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 520px) {
  .proof-list { grid-template-columns: minmax(0, 1fr); }
  .proof-list li, .proof-list li:nth-child(odd) { padding: 16px 0; border-inline-start: 0; }
  .proof-list li + li { border-top: 1px solid var(--line-dark); border-inline-start: 0; }
}

/* ── Light sections ─────────────────────────────────────────────────────── */
.is-light { background: var(--sand); color: var(--ink); }
.sec { padding-block: var(--section-y); }
.sec-head { max-width: 760px; }
.sec-head .h2 { margin-top: 14px; }
.sec-sub { margin-top: 16px; max-width: 36rem; color: var(--muted-light); font-size: clamp(15px, .5vw + 13px, 17px); }
.is-light .sec-sub { color: var(--muted-light); }

/* ── 4 · The six steps — a wheel you turn by scrolling ──────────────────────
   Without JS: every step is a card with its own phone, stacked.
   With JS (html.js): the section pins under the header; six cards sit on a 3D
   drum that turns with the scroll (landing.js writes --ty --tz --rx --sc --op
   on each card), and the phone screen moves in step. Each step pauses
   before the wheel turns on. Reduced motion: same scene, cards just swap. */
.step-list { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.step-copy { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; }
.step-num { font: 400 34px/1 var(--f-display); color: var(--clay); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 72; }
.step-kicker {
  display: block;
  font: 600 10.5px/1.3 var(--f-label); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay-strong);
}
:lang(ar) .step-kicker { font-family: var(--f-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.step h3 { margin: 6px 0 0; font: 700 19px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
:lang(ar) .step h3 { font-family: var(--f-ar); font-size: 20px; line-height: 1.5; }
.step p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--muted-light); }
.step-shot { position: relative; margin: 24px auto 4px; width: max-content; max-width: 100%; }
.step-shot .iphone { --pw: 236px; }
.step-shot .iphone, .step-stage .iphone { box-shadow:
  inset 0 0 0 .75px rgba(255, 255, 255, .55), inset 0 0 0 1.5px rgba(40, 25, 15, .35),
  0 0 0 .5px rgba(0, 0, 0, .35), 0 40px 70px -34px rgba(40, 25, 15, .7), 0 20px 50px -30px rgba(184, 87, 58, .35); }
.shot-frame { position: relative; }
.shot-frame picture, .shot-frame img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) {
  .step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 26px 28px; }
  .step-list { max-width: 880px; }
  .step-shot { margin: 0; }
  .step-shot .iphone { --pw: 220px; }
}

/* Glass notes beside the phone. */
.step-note { position: absolute; z-index: 4; width: 210px; padding: 12px 14px; }
.step-note .float-kicker { font-size: 9.5px; }
.step-note svg.sig { display: block; width: 100%; height: 40px; margin: 6px 0 4px; color: var(--sand); }
.step-note .doc-ok { margin-top: 6px; }
.note-refuse { inset-inline-start: -34%; top: 40%; }
.note-refuse .float-kicker { color: #E9A7A0; }
.note-refuse .float-kicker i { background: #E25471; box-shadow: 0 0 0 4px rgba(226, 84, 113, .18); }
.refused {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(168, 50, 58, .18); border: 1px solid rgba(168, 50, 58, .38);
  color: #F2C4BE; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.refused svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #F08A8A; }
.note-sign { inset-inline-start: -34%; bottom: 10%; }
.note-invoice { inset-inline-end: -26%; top: 30%; width: auto; }
.note-invoice b { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.note-invoice b svg { width: 18px; height: 18px; color: var(--brass); }
@media (max-width: 520px) {
  .step-note { width: 182px; padding: 10px 12px; }
  .note-refuse, .note-sign { inset-inline-start: -10%; }
  .note-invoice { inset-inline-end: -8%; }
}

/* Pieces that only exist with JS. */
.step-stage, .orbit, .orbit-hub, .pin-title, .wheel-nav { display: none; }
.swipe-hint { display: none; }

/* ── With JS: the wheel ─────────────────────────────────────────────────────
   Simple on purpose: a dark hub on the page edge, two quiet rings, the steps
   hugging the ring as plain text; only the active one is a card, with its
   sentence. The phone sits close on the other side, one glass note beside it.
   landing.js glides a position p toward the scroll and writes --x --y on the
   cards and --stage-l / --stage-t on the phone. Phone layout: the same wheel
   turned 90°, hub on the bottom edge, phone on top. */
.js .steps-scroll { --n: 6; --stop: 62svh; position: relative; height: calc(100svh - var(--hdr-h) + (var(--n) - 1) * var(--stop)); margin-top: 20px; }
.js .steps-pin {
  position: sticky; top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  height: calc(100svh - var(--hdr-h) - env(safe-area-inset-top, 0px));
  overflow: hidden;
}
.js .steps-pin > .steps-grid { position: absolute; inset: 0; max-width: none; padding: 0; margin: 0; }
.js .wheel { position: absolute; inset: 0; }
.js .orbit { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit-ring { fill: none; stroke: rgba(184, 87, 58, .28); stroke-width: 1.25; }
.orbit-ring-out { fill: none; stroke: rgba(23, 18, 15, .13); stroke-width: 1; stroke-dasharray: 3 9; }

@media (min-width: 1024px) {
  .js .pin-title {
    display: flex; flex-direction: column; gap: 8px;
    position: absolute; z-index: 5; top: 0; left: 0; right: 0; max-width: none;
    padding-top: 28px; padding-bottom: 44px;
    padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
    pointer-events: none; opacity: var(--title-op, 0);
    background: linear-gradient(var(--sand) 0, var(--sand) 64%, rgba(242, 234, 223, 0) 100%);
  }
  .pin-title .pin-h { font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 96; }
  .pin-title .pin-h em { font-style: italic; color: var(--clay); }
  :lang(ar) .pin-title .pin-h { font-family: var(--f-ar); font-weight: 700; letter-spacing: 0; line-height: 1.4; }
  :lang(ar) .pin-title .pin-h em { font-style: normal; }
}

/* The hub: half a dark disc on the edge; the number sits in the half that shows. */
.js .orbit-hub {
  display: block; position: absolute; z-index: 3;
  width: calc(var(--hub) * 2); height: calc(var(--hub) * 2);
  left: calc(var(--ax) - var(--hub)); top: calc(var(--ay) - var(--hub));
  border-radius: 50%;
  background: radial-gradient(circle at 62% 40%, #3a2e27 0%, var(--ink-2) 46%, var(--ink) 100%);
  box-shadow: 0 0 0 1px rgba(242, 234, 223, .06) inset, 0 30px 60px -22px rgba(20, 12, 8, .55);
  color: var(--sand);
}
.hub-label {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  left: var(--hub-lx, 50%); top: var(--hub-ly, 50%); translate: -50% -50%;
  font-variant-numeric: tabular-nums; direction: ltr; line-height: 1;
}
.hub-num { display: block; font: 400 calc(var(--hub) * .42)/1 var(--f-display); letter-spacing: -.02em; }
.hub-of { display: block; font: 600 calc(var(--hub) * .08)/1 var(--f-label); font-stretch: 125%; letter-spacing: .14em; color: var(--muted-dark); }
@media (prefers-reduced-motion: no-preference) {
  .hub-num.flip { animation: hub-flip .5s var(--ease) both; }
  @keyframes hub-flip { from { opacity: 0; transform: translateY(30%); } }
}

/* The steps along the ring. Plain text; the active one becomes a card. */
.js .wheel .step-list { position: absolute; inset: 0; margin: 0; display: block; max-width: none; z-index: 2; }
.js .wheel .step {
  position: absolute; left: 0; top: 0; width: var(--cw, 340px);
  padding: 14px 18px;
  background: transparent; border-color: transparent; box-shadow: none;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(var(--anchor, 0%), -50%);
  opacity: var(--op, 0);
  will-change: transform, opacity;
  contain: layout style;
  display: block; cursor: pointer;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
[dir="rtl"] .js .wheel .step, .js[dir="rtl"] .wheel .step { --anchor: -100%; }
.js .wheel .step.is-on {
  background: var(--paper); border-color: var(--line-light);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 28px 56px -30px rgba(70, 35, 15, .5);
}
.js .wheel .step-shot { display: none; }
.js .wheel .step-copy { grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; }
.js .wheel .step-num { font-size: 32px; opacity: .7; transition: opacity .45s var(--ease), font-size .45s var(--ease); }
.js .wheel .step.is-on .step-num { opacity: 1; font-size: 42px; }
.js .wheel .step-kicker { opacity: 1; }   /* full clay-strong: .85 fell to 3.95:1 on paper (Lighthouse) */
.js .wheel .step h3 { font-size: 16px; font-weight: 600; margin-top: 4px; transition: font-size .45s var(--ease); }
.js .wheel .step.is-on h3 { font-size: 19px; font-weight: 700; }
.js .wheel .step-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .3s var(--ease); }
.js .wheel .step-more > p { overflow: hidden; min-height: 0; font-size: 14px; }
.js .wheel .step.is-on .step-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease) .12s; }

/* The phone, placed by the script close to the wheel. */
.js .step-stage {
  display: block; position: absolute; z-index: 3;
  left: var(--stage-l, 60%); top: var(--stage-t, 50%); translate: 0 -50%;
}
.js .step-stage .iphone { --pw: var(--stage-pw, 300px); }
/* The line from the active card to the phone. A bead runs along it on every
   step change, then keeps flowing gently: the card "feeding" the phone. */
.orbit-link { display: none; }
@media (min-width: 1024px) {
  .js .orbit-link {
    display: block; position: absolute; z-index: 1; height: 1.5px;
    left: var(--lx, 0px); top: var(--ly-link, 50%); width: var(--lw, 0px);
    background: linear-gradient(90deg, rgba(184, 87, 58, .6), rgba(184, 87, 58, .18));
  }
  .js[dir="rtl"] .orbit-link { background: linear-gradient(270deg, rgba(184, 87, 58, .6), rgba(184, 87, 58, .18)); }
  .orbit-link::before, .orbit-link::after {
    content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--clay);
  }
  .orbit-link::before { left: -3px; }
  .orbit-link::after { right: -3px; opacity: .5; }
  .orbit-link i {
    position: absolute; top: 50%; left: 0; width: 38px; height: 3px; margin-top: -1.5px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--clay), transparent); opacity: 0;
  }
  .js[dir="rtl"] .orbit-link i { left: auto; right: 0; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .orbit-link i { animation: bead 2.8s var(--ease) .2s infinite; }
  .js[dir="rtl"] .orbit-link i { animation-name: bead-rtl; }
  @keyframes bead { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(calc(var(--lw, 200px) - 38px)); } }
  @keyframes bead-rtl { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(calc(38px - var(--lw, 200px))); } }
}
.stage-screen { position: relative; overflow: hidden; }
.stage-layer {
  position: absolute; inset: 0;
  transform: translate3d(0, var(--ly, 0%), 0) scale(var(--ls, 1));
  opacity: var(--lo, 0);
  transform-origin: 50% 0;
  background: #fff;
  will-change: transform;
}
.stage-layer:first-child { position: relative; }
.stage-layer.is-next { box-shadow: 0 -18px 30px -18px rgba(0, 0, 0, .35); }

/* One glass note per step, beside the phone on its free side. */
.stage-note {
  transform: translate3d(var(--nx, 0px), 0, 0); opacity: var(--no, 0); pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(23, 18, 15, .95);
  will-change: transform, opacity; width: 228px;
}
.step-stage.notes-out .stage-note { inset-inline-start: calc(100% + 26px); inset-inline-end: auto; bottom: auto; }
.step-stage.notes-out .note-req { top: 16%; }
.step-stage.notes-out .note-ai { top: 34%; }
.step-stage.notes-out .note-refuse { top: 22%; }
.step-stage.notes-out .note-sign { top: 46%; }
.step-stage.notes-out .note-fee { top: 30%; }
.step-stage.notes-out .note-invoice { top: 40%; }
.step-stage:not(.notes-out) .stage-note { inset-inline-start: 50%; inset-inline-end: auto; top: auto; bottom: 9%; margin-inline-start: -114px; }
.note-line { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.note-big { display: block; margin-top: 6px; font: 400 30px/1.05 var(--f-display); color: var(--sand); }
:lang(ar) .note-big { font-family: var(--f-display), var(--f-ar); }
.note-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-dark); }

/* Step bars under the phone: where you are, and a way to jump. */
.js .wheel-nav {
  display: flex; gap: 8px; align-items: center; position: absolute; z-index: 4;
  left: var(--nav-l, 70%); bottom: 22px; translate: -50% 0;
}
.wheel-nav button {
  all: unset; cursor: pointer; width: 26px; height: 4px; border-radius: 2px;
  background: rgba(23, 18, 15, .14);
  transition: width .35s var(--ease), background-color .35s var(--ease);
}
.wheel-nav button:hover { background: rgba(23, 18, 15, .3); }
.wheel-nav button:focus-visible { box-shadow: var(--focus); }
.wheel-nav button.is-on { width: 46px; background: var(--clay); }

@media (max-width: 1023px) {
  /* Phone + tablet: hub on the bottom edge, phone on top. */
  .js .steps-scroll { --stop: 70svh; }
  .js .step-stage { left: 50%; top: 12px; translate: -50% 0; }
  .js .step-stage::before { display: none; }
  .js .wheel .step { padding: 10px 14px; }
  [dir="rtl"] .js .wheel .step, .js[dir="rtl"] .wheel .step { --anchor: -50%; }
  .js .wheel .step { --anchor: -50%; }
  .js .wheel .step-copy { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .js .wheel .step-num { font-size: 24px; }
  .js .wheel .step.is-on .step-num { font-size: 30px; }
  .js .wheel .step h3 { font-size: 15px; margin-top: 2px; }
  .js .wheel .step.is-on h3 { font-size: 16px; }
  .js .wheel .step-more > p { font-size: 13px; line-height: 1.45; margin-top: 3px; }
  .js .wheel-nav { display: none; }
  .stage-note { width: 176px; }
  .step-stage:not(.notes-out) .stage-note { margin-inline-start: -88px; bottom: 6%; }
  .stage-note .refused { font-size: 11.5px; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  .js .wheel .step-more { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .step-shot .step-note { animation: drift-sm 5.6s ease-in-out -1.3s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .js .wheel .step, .js .wheel .step-more, .js .wheel .step-num, .js .wheel .step h3 { transition: none; }
}

/* Without JS each step shows its own note under its phone; keep them in place. */
.step-shot .note-req, .step-shot .note-ai, .step-shot .note-fee { inset-inline-start: -30%; bottom: 12%; }
@media (max-width: 520px) {
  .step-shot .note-req, .step-shot .note-ai, .step-shot .note-fee { inset-inline-start: -10%; }
}

/* ── 4 · Filling the scene (computer only): a date stamp that walks through
   the story, a giant faint step number behind the phone, a warm glow and the
   zellige, a tinted ring, and a scroll hint that leaves after step 1. ── */
.pin-deco, .pin-when, .pin-hint { display: none; }
.orbit-ring { fill: rgba(184, 87, 58, .035); }
@media (min-width: 1024px) {
  .js .pin-deco { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .pin-zellige {
    position: absolute; width: 640px; height: 640px; max-width: none;
    left: calc(var(--deco-x, 70%) - 320px); top: calc(var(--deco-y, 50%) - 320px);
    color: var(--clay); opacity: .07;
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%);
    mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  }
  .pin-glow {
    position: absolute; width: 720px; height: 720px; border-radius: 50%;
    left: calc(var(--deco-x, 70%) - 360px); top: calc(var(--deco-y, 50%) - 360px);
    background: radial-gradient(closest-side, rgba(184, 87, 58, .16), rgba(184, 87, 58, .05) 55%, transparent);
  }
  .deco-num {
    position: absolute; left: var(--deco-x, 70%); top: var(--deco-y, 50%);
    translate: -12% -58%;
    font: italic 400 min(52vh, 460px)/1 var(--f-display);
    letter-spacing: -.04em; color: rgba(184, 87, 58, .075);
    font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap;
  }
  .js[dir="rtl"] .deco-num { translate: -88% -58%; }

  .js .pin-when {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    position: absolute; z-index: 6; top: 30px;
    inset-inline-end: max(var(--gutter), calc((100vw - var(--container)) / 2));
    text-align: end; pointer-events: none; opacity: var(--title-op, 0);
  }
  .when-k {
    font: 600 10.5px/1.3 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-strong);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .when-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(125, 132, 85, .18); }
  :lang(ar) .when-k { font-family: var(--f-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
  .when-v { display: block; font: 400 clamp(22px, 2vw, 28px)/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  :lang(ar) .when-v { font-family: var(--f-ar), var(--f-display); font-weight: 700; }

  .js .pin-hint {
    display: flex; align-items: center; gap: 10px;
    position: absolute; z-index: 6; bottom: 26px;
    inset-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2));
    font-size: 13px; font-weight: 600; color: var(--muted-light);
    opacity: var(--hint-op, 1); pointer-events: none;
  }
  .pin-hint svg { width: 22px; height: 22px; color: var(--clay); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pin-hint svg path { animation: wheel-dot 1.8s var(--ease) infinite; }
  @keyframes wheel-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(4px); opacity: 0; } 100% { opacity: 0; } }
  .when-v.flip, .deco-num.flip { animation: when-flip .55s var(--ease) both; }
  @keyframes when-flip { from { opacity: 0; transform: translateY(14px); } }
}

/* Computer + JS: the pinned title IS the heading (visible from the first
   frame); the section's own heading stays for screen readers only. */
@media (min-width: 1024px) {
  .js .steps .sec-head {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .js .steps.sec { padding-top: 0; }
  .js .steps-scroll { margin-top: 0; }
  .js .pin-title, .js .pin-when { opacity: 1; }
}

/* Phone: the glass notes stay small over the small phone. */
@media (max-width: 1023px) {
  .step-stage:not(.notes-out) .stage-note { width: 158px; margin-inline-start: -79px; bottom: 3%; padding: 8px 10px; border-radius: 12px; }
  .step-stage:not(.notes-out) .stage-note .float-kicker { font-size: 8.5px; gap: 5px; }
  .step-stage:not(.notes-out) .stage-note .float-kicker i { width: 5px; height: 5px; box-shadow: 0 0 0 3px rgba(200, 161, 101, .16); }
  .step-stage:not(.notes-out) .stage-note .note-line { font-size: 12.5px; margin-top: 4px; }
  .step-stage:not(.notes-out) .stage-note .note-big { font-size: 22px; }
  .step-stage:not(.notes-out) .stage-note .doc-ok,
  .step-stage:not(.notes-out) .stage-note .refused { font-size: 10.5px; padding: 4px 7px; margin-top: 5px; }
  .step-stage:not(.notes-out) .stage-note svg.sig { height: 26px; margin: 4px 0 2px; }
  .step-stage:not(.notes-out) .stage-note .note-sub { font-size: 10.5px; }
}

/* ── 5 · Your booking site ──────────────────────────────────────────────────
   Paper background. Copy on one side; on the other a Safari window showing the
   REAL agency site (it pans from the search to the cars as you scroll), a
   small phone overlapping its corner, one glass chip. Three colour dots switch
   the screenshots with radio inputs + CSS: works without JavaScript. */
.bk { background: var(--paper); color: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
.bk::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(760px 520px at 76% 52%, rgba(184, 87, 58, .09), transparent 64%);
}
[dir="rtl"] .bk::before { transform: scaleX(-1); }
.bk .eyebrow { color: var(--clay-strong); }
.bk .h2 em { color: var(--clay); }
.bk .h2 { margin-top: 14px; }
.bk-grid {
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 660px);
  justify-content: space-between; column-gap: clamp(40px, 6vw, 96px); align-items: center;
}
.bk-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-copy { grid-column: 1; grid-row: 1; }
.bk-media { grid-column: 2; grid-row: 1; }

.bk-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.bk-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.bk-ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sand); border: 1px solid var(--line-light); color: var(--clay);
}
.bk-ic svg { width: 19px; height: 19px; }

.bk-try { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-light); }
.bk-try-k {
  display: block; font: 600 10.5px/1.3 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light);
}
:lang(ar) .bk-try-k { font-family: var(--f-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.bk-sws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk-sw {
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line-light); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.bk-sw:hover { border-color: rgba(23, 18, 15, .25); }
.bk-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
#bk-1:checked ~ .bk-copy label[for="bk-1"],
#bk-2:checked ~ .bk-copy label[for="bk-2"],
#bk-3:checked ~ .bk-copy label[for="bk-3"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
#bk-1:focus-visible ~ .bk-copy label[for="bk-1"],
#bk-2:focus-visible ~ .bk-copy label[for="bk-2"],
#bk-3:focus-visible ~ .bk-copy label[for="bk-3"] { box-shadow: var(--focus); }
.bk-cta { margin-top: 26px; background: var(--ink); color: var(--sand); min-height: 50px; padding: 0 22px; font-size: 15px; }
.bk-cta:hover { background: #2a201b; }

/* The media: browser + phone + chip. */
.bk-media { position: relative; margin: 0; padding: 0 0 56px; }
.bk-browser {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 18, 15, .08), 0 2px 0 rgba(0, 0, 0, .03), 0 50px 90px -46px rgba(40, 25, 15, .65);
}
.bk-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px; background: #F4EFE8; border-bottom: 1px solid rgba(23, 18, 15, .07);
  direction: ltr;
}
.bk-lights { display: flex; gap: 7px; }
.bk-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.bk-lights i:nth-child(1) { background: #EC6A5E; } .bk-lights i:nth-child(2) { background: #F4BF4F; } .bk-lights i:nth-child(3) { background: #61C554; }
.bk-url {
  justify-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 6px 16px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 15, .06);
  font: 500 12.5px/1 var(--f-body); color: #4A4038; white-space: nowrap; overflow: hidden;
}
.bk-url svg { width: 12px; height: 12px; flex: none; color: #7a6e64; }
.bk-reload svg { width: 15px; height: 15px; color: #8a7f75; display: block; }
.bk-view { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; background: #0d1222; }
.bk-pan { will-change: transform; transform: translate3d(0, calc(var(--pan, 0) * -52.94%), 0); }
.bk-pan img, .bk-phone-shots img { display: block; width: 100%; height: auto; }

/* Only the chosen colour is displayed (the others are not even downloaded). */
.bk-media .bk-v { display: none; }
#bk-1:checked ~ .bk-media .bk-v1,
#bk-2:checked ~ .bk-media .bk-v2,
#bk-3:checked ~ .bk-media .bk-v3 { display: block; }
@media (prefers-reduced-motion: no-preference) {
  #bk-1:checked ~ .bk-media .bk-v1,
  #bk-2:checked ~ .bk-media .bk-v2,
  #bk-3:checked ~ .bk-media .bk-v3 { animation: bk-in .5s var(--ease) both; }
  @keyframes bk-in { from { opacity: 0; filter: saturate(.6); } }
}

.bk-phone { position: absolute; z-index: 3; inset-inline-end: -30px; bottom: -18px; }
.bk-phone .iphone { --pw: 176px; }
.bk-phone-shots { position: relative; overflow: hidden; }

.bk-chip { inset-inline-start: -34px; bottom: 4px; z-index: 4; padding: 12px 16px; }
.bk-chip .float-kicker { color: #A9C98E; }
.bk-chip .float-kicker i { background: #7FBF5B; box-shadow: 0 0 0 4px rgba(127, 191, 91, .2); }
.bk-chip b { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .bk-chip { animation: drift-sm 5.4s ease-in-out -.8s infinite; }
}

@media (max-width: 1023px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-copy, .bk-media { grid-column: 1; }
  .bk-media { grid-row: 2; padding-bottom: 70px; margin-top: 8px; }
  .bk-phone { inset-inline-end: -6px; }
  .bk-phone .iphone { --pw: 150px; }
  .bk-chip { inset-inline-start: -6px; top: auto; bottom: 0; padding: 10px 13px; }
  .bk-chip b { font-size: 12.5px; }
  .bk-url { font-size: 11px; padding: 5px 10px; }
  .bk-bar { height: 36px; gap: 10px; }
  .bk-lights i { width: 9px; height: 9px; }
}
@media (max-width: 520px) {
  .bk-sw { padding: 0 13px 0 8px; font-size: 13px; min-height: 40px; }
  .bk-reload { display: none; }
  .bk-bar { grid-template-columns: auto minmax(0, 1fr); }
  .bk-phone .iphone { --pw: 128px; }
  .bk-chip { bottom: 0; max-width: 58%; }
}


/* ── 6 · Guardrails ─────────────────────────────────────────────────────────
   Dark. A two-column header, then four cards across the full content width;
   each card ends on a small app panel (light, like the app) that "plays" its
   moment once when the section comes into view (html.js + .is-in). Without
   JavaScript every panel shows its final state. */
.gd { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--sand); }
.gd::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(820px 520px at 85% 0%, rgba(184, 87, 58, .18), transparent 62%), radial-gradient(600px 420px at 0% 100%, rgba(200, 161, 101, .08), transparent 60%);
}
[dir="rtl"] .gd::before { transform: scaleX(-1); }
.gd-zellige {
  position: absolute; z-index: -1; width: 760px; height: 760px; max-width: none;
  inset-inline-end: -160px; top: -220px; color: var(--brass); opacity: .06;
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.gd-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.gd .h2 { margin-top: 14px; color: var(--sand); }
.gd-sub { color: var(--muted-dark); font-size: clamp(15px, .4vw + 13px, 17px); line-height: 1.65; max-width: 30rem; justify-self: end; padding-bottom: 6px; }

.gd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.gd-card {
  --tone: #F08A8A; --tone-bg: rgba(168, 50, 58, .16); --tone-line: rgba(168, 50, 58, .38);
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px 20px; border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-2) 0%, #19130f 100%);
  border: 1px solid var(--line-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -40px rgba(0, 0, 0, .9);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.gd-card::after {               /* a thin coloured line on top: the card's verdict */
  content: ""; position: absolute; top: -1px; inset-inline: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tone), transparent); opacity: .7;
}
.gd-amber { --tone: #E8C27A; --tone-bg: rgba(200, 161, 101, .14); --tone-line: rgba(200, 161, 101, .36); }
.gd-brass { --tone: var(--brass); --tone-bg: rgba(200, 161, 101, .12); --tone-line: rgba(200, 161, 101, .32); }
@media (hover: hover) { .gd-card:hover { transform: translateY(-4px); border-color: rgba(242, 234, 223, .18); } }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-label {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px;
  background: var(--tone-bg); border: 1px solid var(--tone-line); color: var(--tone);
  font: 600 10.5px/1.2 var(--f-label); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase;
}
:lang(ar) .gd-label { font-family: var(--f-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.gd-label svg { width: 14px; height: 14px; }
.gd-n { font: 400 26px/1 var(--f-display); color: rgba(242, 234, 223, .16); font-variant-numeric: tabular-nums; }
.gd-card h3 { margin: 18px 0 0; font: 700 19px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--sand); }
:lang(ar) .gd-card h3 { font-family: var(--f-ar); font-size: 20px; line-height: 1.5; }
.gd-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted-dark); }

/* The app panel at the bottom of each card. */
.gm {
  margin-top: auto; position: relative;
  border-radius: 14px; background: #FBF8F4; color: #17120F;
  padding: 14px; font: 500 12.5px/1.35 var(--f-body);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 34px -24px rgba(0, 0, 0, .9);
  display: grid; gap: 9px;
}
:lang(ar) .gm { font-family: var(--f-ar); }
.gd-card > p { margin-bottom: 18px; }
.gm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gm-head b { font-weight: 700; font-size: 13px; }
.gm-plate { font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #6F6359; }
.gm-chip, .gm-btn, .gm-note, .gm-flag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.gm svg { width: 14px; height: 14px; flex: none; }

/* 1 · the clash */
.gm-days { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; font: 600 10px/1 var(--f-body); color: #8a7f75; font-variant-numeric: tabular-nums; }
.gm-track { position: relative; height: 60px; border-radius: 9px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), rgba(23, 18, 15, .07) calc(100% / 6 - 1px) calc(100% / 6)); }
.gm-bar { position: absolute; height: 24px; display: flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.gm-booked { top: 4px; left: calc(100% / 6 * 1 + 2px); width: calc(100% / 6 * 4 - 4px); background: #2E2520; color: #F2EADF; }
.gm-ghost { top: 32px; left: calc(100% / 6 * 2 + 2px); width: calc(100% / 6 * 2 - 4px); background: #FDECEC; color: #B4233F; border: 1.5px dashed #E25471; }
.gm-chip-red { padding: 5px 9px; border-radius: 8px; background: #FDECEC; color: #B4233F; font-weight: 700; font-size: 11.5px; }

/* 2 · the papers */
.gm-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #F1ECE5; }
.gm-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #4F6B3A; }
.gm-state svg { width: 12px; height: 12px; }
.gm-bad { background: #FDECEC; }
.gm-bad .gm-state { color: #B4233F; }
.gm-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(23, 18, 15, .16); font-weight: 700; font-size: 11.5px; }
.gm-note { font-size: 11px; color: #6F6359; }
.gm-note svg { width: 12px; height: 12px; }

/* 3 · the flagged client */
.gm-person { display: flex; align-items: center; gap: 10px; }
.gm-person b { display: block; font-size: 13px; }
.gm-person small { display: block; font: 500 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #6F6359; }
.gm-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #F4E3C4; color: #7A5520; font-weight: 800; font-size: 12px; flex: none; }
.gm-flag { position: relative; padding: 5px 10px; border-radius: 999px; background: #FDF1DC; color: #94570A; font-weight: 700; font-size: 11.5px; }
.gm-reason { font-size: 12px; color: #4A4038; }
.gm-case { display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 10px; background: #FDF6EA; border: 1px solid #F1DDB8; }
.gm-case .gm-reason { font-weight: 700; color: #17120F; }
.gm-when { font-size: 11px; color: #8a7f75; }
.gm-meter { display: grid; gap: 6px; }
.gm-meter-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: #EDE6DD; }
.gm-meter-in { flex: 600 0 0; background: #7D8455; }
.gm-meter-out { flex: 312 0 0; background: repeating-linear-gradient(135deg, #B8573A 0 4px, #CF7656 4px 8px); }
.gm-meter-lg { display: flex; justify-content: space-between; font-size: 10.5px; color: #8a7f75; }
.gm-meter-lg b { color: #A64E32; font-weight: 800; }
.gm-reason-bad { font-weight: 700; color: #A64E32; }

/* 4 · the kilometres */
.gm-kms { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gm-kms > span:not(.gm-arrow) { display: grid; gap: 2px; }
.gm-kms small { font-size: 10.5px; color: #8a7f75; }
.gm-kms b { font-size: 15px; font-weight: 800; }
.gm-arrow { color: #B8573A; }
[dir="rtl"] .gm-arrow svg { transform: scaleX(-1); }
.gm-fee { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px dashed rgba(23, 18, 15, .14); }
.gm-calc { font-size: 11.5px; color: #6F6359; }
.gm-total { font: 400 26px/1 var(--f-display); color: #A64E32; white-space: nowrap; }
:lang(ar) .gm-total { font-family: var(--f-display), var(--f-ar); }

@media (max-width: 1100px) {
  .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gd-head { grid-template-columns: minmax(0, 1fr); }
  .gd-sub { justify-self: start; padding-bottom: 0; }
  .gd-grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .gd-zellige { width: 520px; height: 520px; inset-inline-end: -200px; top: -160px; }
}

/* The played moments: once, when the section comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .gd-card { opacity: 0; transform: translateY(14px); }
  .js .gd.is-in .gd-card { animation: gd-in .6s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
  @keyframes gd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .js .gm-ghost { opacity: 0; }
  .js .gd.is-in .gm-ghost { animation: gm-ghost 1s var(--ease) .55s both; }
  @keyframes gm-ghost {
    0% { opacity: 0; transform: translateX(70%); }
    55% { opacity: 1; transform: translateX(0); }
    65% { transform: translateX(-4px); } 75% { transform: translateX(4px); } 85% { transform: translateX(-2px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .js .gm-chip-red { opacity: 0; }
  .js .gd.is-in .gm-chip-red { animation: gm-pop .4s var(--ease) 1.45s both; }
  @keyframes gm-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

  .js .gd.is-in .gm-bad { animation: gm-flash 1.1s var(--ease) .8s both; }
  @keyframes gm-flash { 0% { background: #F1ECE5; } 40% { background: #F9C9CF; } 100% { background: #FDECEC; } }
  .js .gm-btn, .js .gm-docs .gm-note { opacity: 0; }
  .js .gd.is-in .gm-btn { animation: gm-pop .4s var(--ease) 1.35s both; }
  .js .gd.is-in .gm-docs .gm-note { animation: gm-pop .4s var(--ease) 1.55s both; }
  .js .gd.is-in .gm-km .gm-btn { animation-delay: 2.1s; }
  .js .gm-acts, .js .gm-plan .gm-note { opacity: 0; }
  .js .gd.is-in .gm-acts { animation: gm-pop .4s var(--ease) 1.7s both; }
  .js .gd.is-in .gm-plan .gm-note { animation: gm-pop .4s var(--ease) 1.75s both; }
  .js .gm-meter-bar { clip-path: inset(0 100% 0 0); }
  .js[dir="rtl"] .gm-meter-bar { clip-path: inset(0 0 0 100%); }
  .js .gd.is-in .gm-meter-bar { animation: gm-fill 1s var(--ease) .7s both; }
  @keyframes gm-fill { to { clip-path: inset(0 0 0 0); } }

  .js .gd.is-in .gm-flag::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #E8B55E;
    animation: gm-ring 1.2s var(--ease) 1s both;
  }
  @keyframes gm-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
}

/* Guardrails: every card on one grid of rows (label, title, text, panel), so
   the four app panels start on the same line and end on the same line. */
.gd-grid { grid-template-rows: auto auto auto 1fr; }
.gd-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.gd-card h3 { align-self: start; }
.gd-card > p { margin-bottom: 20px; }
.gm { margin-top: 0; align-content: space-between; }
.gm-acts { display: flex; gap: 6px; }
.gm-act { flex: 1; text-align: center; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(23, 18, 15, .16); font-weight: 700; font-size: 11.5px; }
.gm-act-no { background: #17120F; color: #FBF8F4; border-color: #17120F; }
.gm-btn-dark { background: #17120F; color: #FBF8F4; border-color: #17120F; }
.gm-btn-dark svg { width: 13px; height: 13px; }
.gm-bar { justify-content: center; }
@media (max-width: 1100px) { .gd-card { grid-row: span 4; } }
@media (max-width: 760px) { .gd-grid { grid-template-rows: none; } .gd-card { display: flex; grid-row: auto; } .gd-card .gm { margin-top: auto; } }
@supports not (grid-template-rows: subgrid) {
  .gd-card { display: flex; grid-row: auto; }
  .gd-card .gm { margin-top: auto; }
}
.gm-acts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.gm-act { white-space: nowrap; padding-inline: 6px; font-size: 11px; }


/* ── 7 · The contract in two languages ───────────────────────────────────────
   Light (sand). The two sheets copy ORBIT's real PDF (ContractDocument.jsx):
   agency header, accent bar, section titles, the price box, "Fait à …", the
   signature boxes. Each sheet is a size container, so everything inside is in
   em and scales with the sheet. Two radios (no JS) decide which sheet is in
   front. html.js + .is-in plays the fan-out and the signatures once. */
.ct { position: relative; overflow: hidden; isolation: isolate; background: var(--sand); color: var(--ink); }
.ct::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 520px at 30% 55%, rgba(184, 87, 58, .12), transparent 65%), radial-gradient(520px 380px at 100% 0%, rgba(200, 161, 101, .14), transparent 60%);
}
.ct .eyebrow { color: var(--clay-strong); }
.ct .h2 { margin-top: 14px; }
.ct .h2 em { color: var(--clay); }
.ct-grid {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-areas: "stage copy";
  gap: 56px; align-items: center;
}
.ct-copy { grid-area: copy; }
.ct-stage { grid-area: stage; }
.ct-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ct-points { display: grid; gap: 12px; margin-top: 24px; }
.ct-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: #3B312A; }
:lang(ar) .ct-points li { font-size: 16px; line-height: 1.7; }
.ct-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--clay-strong); box-shadow: 0 0 0 1px var(--line-light), 0 6px 14px -10px rgba(40, 25, 15, .5); }
.ct-ic svg { width: 18px; height: 18px; }

.ct-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px; }
.ct-switch-k { font: 600 11px/1.2 var(--f-label); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
:lang(ar) .ct-switch-k { font-family: var(--f-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.ct-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-light); }
.ct-seg label { cursor: pointer; padding: 8px 16px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted-light); transition: background .25s var(--ease), color .25s var(--ease); }
.ct-seg label:lang(ar) { font-family: var(--f-ar); font-size: 15px; }
#ct-a:checked ~ .ct-copy label[for="ct-a"], #ct-b:checked ~ .ct-copy label[for="ct-b"] { background: var(--ink); color: var(--sand); }
#ct-a:focus-visible ~ .ct-copy label[for="ct-a"], #ct-b:focus-visible ~ .ct-copy label[for="ct-b"] { box-shadow: var(--focus); }

/* The stage: two sheets on a 20-column grid, overlapping by two columns. */
.ct-stage { position: relative; margin: 0; padding-bottom: 44px; }
.ct-sheets { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); align-items: start; padding-top: 22px; }
.ct-sheet { grid-row: 1; container-type: inline-size; position: relative; transition: transform .45s var(--ease), filter .45s var(--ease); }
.ct-sheet.ct-a { grid-column: 1 / 11; z-index: 2; transform: rotate(-2deg); }
.ct-sheet.ct-b { grid-column: 11 / 21; z-index: 1; margin-top: 34px; transform: rotate(2.4deg); }
#ct-b:checked ~ .ct-stage .ct-b { z-index: 3; }
#ct-b:checked ~ .ct-stage .ct-a { filter: brightness(.97); }
#ct-a:checked ~ .ct-stage .ct-b { filter: brightness(.97); }
@media (hover: hover) {
  .ct-sheet:hover { transform: rotate(0deg) translateY(-6px); }
}

/* The page: real document styling, sized in em from the sheet's width. */
.ct-page {
  --acc: #9F1239; --hair: #E7E2DA; --soft: #F5F2ED; --gray: #6B7280; --light: #9CA3AF; --txt: #111827;
  font-size: 10px; font-size: calc(100cqi / 40);
  aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; gap: .85em;
  padding: 2.2em 2.2em 1.4em; border-radius: .45em;
  background: linear-gradient(180deg, #FFFDF9, #FDFAF4);
  color: #1F2937; font-family: var(--f-body); line-height: 1.35; text-align: start;
  box-shadow: 0 0 0 1px rgba(23, 18, 15, .06), 0 2px 0 rgba(0, 0, 0, .03), 0 30px 60px -30px rgba(40, 25, 15, .55), 0 60px 90px -60px rgba(184, 87, 58, .45);
}
.ct-page:lang(ar) { font-family: var(--f-ar); line-height: 1.5; }
.ct-page b { font-weight: 800; color: var(--txt); }
.ct-page small { display: block; color: var(--gray); }
.ct-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.ct-ag { display: flex; gap: .8em; align-items: center; min-width: 0; }
.ct-ag b { display: block; font-size: 1.3em; line-height: 1.2; }
.ct-ag small { font-size: .82em; line-height: 1.35; }
.ct-logo { flex: none; width: 3.3em; height: 3.3em; border-radius: .9em; display: grid; place-items: center; background: var(--acc); color: #FFF8F2; font: 800 1.15em/1 var(--f-body); }
.ct-ttl { text-align: end; flex: none; }
.ct-ttl b { display: block; font-size: 1.5em; letter-spacing: -.01em; line-height: 1.15; }
.ct-page:lang(ar) .ct-ttl b { font-size: 1.6em; letter-spacing: 0; }
.ct-no { display: inline-block; margin-top: .55em; padding: .3em .75em; border-radius: .6em; background: var(--soft); font-weight: 800; font-size: .95em; color: var(--txt); font-family: var(--f-body); }
.ct-bar { height: .3em; border-radius: .3em; background: var(--acc); margin-top: -.1em; }
.ct-st { display: flex; align-items: center; gap: .7em; margin-bottom: .55em; font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); white-space: nowrap; }
.ct-st::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.ct-page:lang(ar) .ct-st { font-size: .9em; letter-spacing: 0; text-transform: none; }
.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; }
.ct-kv { display: grid; gap: .05em; padding: .26em 0; border-bottom: 1px dashed var(--hair); }
.ct-kv:last-child { border-bottom: 0; }
.ct-kv span { font-size: .74em; color: var(--gray); }
.ct-kv b { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-page:lang(ar) .ct-kv span { font-size: .84em; }
.ct-period { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6em; align-items: center; }
.ct-when { border-radius: .8em; background: var(--soft); padding: .65em .8em; display: grid; gap: .1em; }
.ct-when small { font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.ct-page:lang(ar) .ct-when small { font-size: .84em; letter-spacing: 0; text-transform: none; }
.ct-when b { font-size: 1.02em; }
.ct-when span { font-size: .82em; color: var(--gray); }
.ct-arr { color: var(--light); font-size: 1.3em; }
.ct-money { border: 1px solid var(--hair); border-radius: .8em; overflow: hidden; }
.ct-pr { display: flex; justify-content: space-between; gap: 1em; padding: .45em .8em; font-size: .92em; }
.ct-pr b { white-space: nowrap; }
.ct-tot { background: var(--soft); border-top: 1px solid var(--hair); padding: .25em 0; }
.ct-pr-soft { color: var(--gray); }
.ct-pr-soft b { color: var(--gray); font-weight: 700; }
.ct-pr-due span, .ct-pr-due b { color: var(--acc); font-weight: 800; }
.ct-pr-due b { font-size: 1.25em; line-height: 1; }
.ct-terms { margin-top: .5em; font-size: .78em; color: var(--gray); }
.ct-obs { flex: 1 1 auto; min-height: 4.2em; display: flex; flex-direction: column; gap: .7em; overflow: hidden; }
.ct-obs .ct-st { margin-bottom: 0; }
.ct-obs span { font-size: .8em; color: var(--gray); }
.ct-obs i { display: block; height: 0; border-top: 1px dotted #C9C2B8; margin-top: .6em; }
.ct-made { font-size: .8em; color: var(--gray); text-align: end; font-style: italic; }
.ct-page:lang(ar) .ct-made { font-style: normal; font-size: .9em; }
.ct-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.ct-box { position: relative; min-height: 6.8em; border: 1px solid var(--hair); border-radius: .8em; padding: .65em .8em; }
.ct-box b { display: block; font-size: .88em; }
.ct-box small { font-size: .72em; margin-top: .15em; }
.ct-page:lang(ar) .ct-box small { font-size: .82em; }
.ct-sig { position: absolute; inset-inline: .8em; bottom: .35em; width: auto; height: 3.6em; fill: none; stroke: #1E2A5A; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ct-sig-2 { inset-inline-start: 2.2em; }
.ct-stamp { position: absolute; width: 4.9em; height: 4.9em; inset-inline-end: .5em; bottom: .4em; color: var(--acc); opacity: .7; transform: rotate(-14deg); mix-blend-mode: multiply; font-family: var(--f-body); }
.ct-ft { display: flex; justify-content: space-between; gap: 1em; padding-top: .7em; border-top: 1px solid var(--hair); font-size: .72em; color: var(--light); }

/* Floating glass cards over the sheet edges. */
.ct-chip {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px; max-width: 260px;
  background: rgba(23, 18, 15, .84); color: var(--sand);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(242, 234, 223, .08), 0 20px 40px -18px rgba(20, 12, 8, .7);
  font-size: 13px; line-height: 1.3;
}
.ct-chip b { display: block; font-weight: 700; color: var(--sand); }
.ct-chip small { display: block; font-size: 11.5px; color: var(--muted-dark); white-space: nowrap; }
.ct-chip[dir="rtl"] b { font-family: var(--f-ar); font-size: 14px; }
.ct-chip-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(200, 161, 101, .16); color: var(--brass); }
.ct-chip-ic svg { width: 17px; height: 17px; }
.ct-chip-ok { background: rgba(125, 132, 85, .22); color: #B9C08A; }
.ct-chip-sign { left: -18px; bottom: 6px; }
.ct-chip-send { right: 3%; top: 0; }
.ct-note { position: absolute; bottom: 0; right: 0; font-size: 12px; color: var(--muted-light); }

@media (max-width: 1100px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage"; gap: 40px; }
  .ct-copy { max-width: 640px; }
  .ct-stage { max-width: 820px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
  /* Phone: one sheet in front, the other fanned behind it; the switch swaps them. */
  .ct-sheet.ct-a { grid-column: 1 / 19; }
  .ct-sheet.ct-b { grid-column: 3 / 21; margin-top: 26px; }
  .ct-chip { padding: 8px 12px 8px 8px; font-size: 12px; }
  .ct-chip small { font-size: 11px; }
  .ct-chip-ic { width: 28px; height: 28px; }
  .ct-chip-sign { left: -6px; bottom: 30px; }
  .ct-sheets { padding-top: 58px; }
  .ct-chip-send { right: 0; top: 0; }
  .ct-note { right: 0; }
  .ct-stage { padding-bottom: 40px; }
}

/* Played once: the sheets fan out from a stack, then the signatures are
   drawn, the stamp lands, and the two cards arrive. */
@media (prefers-reduced-motion: no-preference) {
  /* both start as one stack in the middle, then part into the two languages */
  .js .ct-stage:not(.is-in) .ct-a { transform: translate(50%, 17px) rotate(-1deg); }
  .js .ct-stage:not(.is-in) .ct-b { transform: translate(-50%, -17px) rotate(1deg); }
  .js .ct-stage.is-in .ct-sheet { transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .15s, filter .45s var(--ease); }
  .js .ct-sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ct-stage.is-in .ct-sig path { animation: ct-draw .9s ease-in-out forwards; }
  .js .ct-stage.is-in .ct-a .ct-box:first-child .ct-sig path { animation-delay: 1.15s; }
  .js .ct-stage.is-in .ct-a .ct-sig-2 path { animation-delay: 1.8s; }
  .js .ct-stage.is-in .ct-b .ct-box:first-child .ct-sig path { animation-delay: 1.45s; }
  .js .ct-stage.is-in .ct-b .ct-sig-2 path { animation-delay: 2.05s; }
  .js .ct-stage.is-in .ct-sig path + path { animation-duration: .45s; }
  @keyframes ct-draw { to { stroke-dashoffset: 0; } }
  .js .ct-stamp { opacity: 0; }
  .js .ct-stage.is-in .ct-stamp { animation: ct-stamp .45s cubic-bezier(.3, 1.4, .5, 1) 2.55s forwards; }
  @keyframes ct-stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.5); } to { opacity: .7; transform: rotate(-14deg) scale(1); } }
  .js .ct-chip { opacity: 0; transform: translateY(10px); }
  .js .ct-stage.is-in .ct-chip { transition: opacity .5s var(--ease), transform .5s var(--ease); opacity: 1; transform: none; }
  .js .ct-stage.is-in .ct-chip-sign { transition-delay: 1.9s; }
  .js .ct-stage.is-in .ct-chip-send { transition-delay: 2.9s; }
}


/* ── 8 · Prices ───────────────────────────────────────────────────────────────
   Light (paper). Two radios (no JS) switch monthly / yearly: both prices sit in
   the same grid cell and the hidden one is visibility:hidden, so screen readers
   only meet the visible one. The middle plan is dark and raised 8px. The AI-read
   quota is the meter, drawn as a bar. A band lists what every plan includes. */
.pr { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink); }
.pr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(760px 460px at 50% 62%, rgba(184, 87, 58, .10), transparent 65%), radial-gradient(520px 360px at 0% 0%, rgba(200, 161, 101, .12), transparent 60%);
}
.pr .eyebrow { color: var(--clay-strong); }
.pr .h2 { margin-top: 14px; }
.pr .h2 em { color: var(--clay); }
.pr-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pr-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.pr-side { display: grid; gap: 18px; justify-items: start; }
.pr-sub { color: var(--muted-light); font-size: clamp(15px, .4vw + 13px, 17px); line-height: 1.6; max-width: 32rem; }
.pr-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sand); box-shadow: 0 0 0 1px var(--line-light); }
.pr-toggle label {
  cursor: pointer; min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted-light);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pr-gift { padding: 3px 8px; border-radius: 999px; background: var(--clay-soft); color: var(--clay-strong); font-size: 11.5px; font-weight: 800; }
#pr-m:checked ~ .pr-head label[for="pr-m"], #pr-y:checked ~ .pr-head label[for="pr-y"] { background: var(--ink); color: var(--sand); }
#pr-y:checked ~ .pr-head label[for="pr-y"] .pr-gift { background: var(--clay); color: var(--paper); }
#pr-m:focus-visible ~ .pr-head label[for="pr-m"], #pr-y:focus-visible ~ .pr-head label[for="pr-y"] { box-shadow: var(--focus); }

.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 52px 0 0; padding: 0; list-style: none; align-items: stretch; }
.pc {
  position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  padding: 28px 26px 26px; border-radius: 20px;
  background: #FFFDF9; border: 1px solid var(--line-light); box-shadow: var(--shadow-card);
}
.pc-dark {
  transform: translateY(-8px); color: var(--sand); border-color: rgba(242, 234, 223, .08);
  background: linear-gradient(180deg, #211A16, #17120F);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 44px 80px -40px rgba(20, 12, 8, .85), 0 30px 70px -50px rgba(184, 87, 58, .9);
}
.pc-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(360px 260px at 100% 0%, rgba(184, 87, 58, .32), transparent 70%), radial-gradient(300px 220px at 0% 100%, rgba(200, 161, 101, .12), transparent 70%);
}
[dir="rtl"] .pc-dark::before { transform: scaleX(-1); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.pc-name { font: 600 13px/1.2 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-strong); }
.pc-dark .pc-name { color: var(--brass); }
.pc-badge { padding: 5px 11px; border-radius: 999px; background: rgba(200, 161, 101, .14); border: 1px solid rgba(200, 161, 101, .35); color: var(--brass); font-size: 12px; font-weight: 800; }
.pc-for { margin-top: 6px; font-size: 15px; color: var(--muted-light); }
.pc-dark .pc-for { color: var(--muted-dark); }
.pc-price { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pc-n { display: inline-grid; }
.pc-n b, .pc-bill span { grid-area: 1 / 1; }
.pc-n b { font: 400 58px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.pc-dark .pc-n b { color: var(--sand); }
.pc-u { font-size: 14px; font-weight: 600; color: var(--muted-light); }
.pc-dark .pc-u { color: var(--muted-dark); }
.pc-bill { margin-top: 8px; display: grid; font-size: 13px; color: var(--muted-light); }
.pc-dark .pc-bill { color: var(--muted-dark); }
.pr .pr-y, .pr .pr-m { transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.pr .pr-y { opacity: 0; visibility: hidden; transform: translateY(8px); }
#pr-y:checked ~ .pr-grid .pr-m { opacity: 0; visibility: hidden; transform: translateY(-8px); }
#pr-y:checked ~ .pr-grid .pr-y { opacity: 1; visibility: visible; transform: none; }

.pc-scan {
  margin-top: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 14px; border-radius: 14px; background: var(--sand);
}
.pc-dark .pc-scan { background: rgba(242, 234, 223, .05); box-shadow: 0 0 0 1px rgba(242, 234, 223, .07) inset; }
.pc-scan-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--clay-strong); box-shadow: 0 0 0 1px var(--line-light); }
.pc-dark .pc-scan-ic { background: rgba(200, 161, 101, .14); color: var(--brass); box-shadow: none; }
.pc-scan-ic svg { width: 21px; height: 21px; }
.pc-scan-t { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; font-weight: 600; }
.pc-scan-t b { font: 400 26px/1 var(--f-display); color: var(--clay-strong); margin-inline-end: 3px; }
.pc-dark .pc-scan-t b { color: var(--brass); }
.pc-scan-t small { font-size: 12px; font-weight: 500; color: var(--muted-light); }
.pc-dark .pc-scan-t small { color: var(--muted-dark); }
.pc-meter { grid-column: 1 / -1; height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(23, 18, 15, .08); overflow: hidden; }
.pc-dark .pc-meter { background: rgba(242, 234, 223, .10); }
.pc-meter i { display: block; height: 100%; width: var(--w); min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, var(--clay), #D98A66); }
.pc-dark .pc-meter i { background: linear-gradient(90deg, #A9824C, var(--brass)); }
[dir="rtl"] .pc-meter i { background: linear-gradient(270deg, var(--clay), #D98A66); }
[dir="rtl"] .pc-dark .pc-meter i { background: linear-gradient(270deg, #A9824C, var(--brass)); }

.pc-list { display: grid; gap: 12px; margin: 22px 0 26px; }
.pc-list li { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.pc-list svg { flex: none; width: 20px; height: 20px; color: var(--clay-strong); }
.pc-dark .pc-list li { color: var(--sand); }
.pc-dark .pc-list svg { color: var(--brass); }
.pc .btn { margin-top: auto; }

.pr-inc {
  margin-top: 28px; padding: 22px 28px; border-radius: 20px; background: var(--sand); border: 1px solid var(--line-light);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 36px; align-items: center;
}
.pr-inc-t { max-width: 11em; font: 600 11px/1.5 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-strong); }
:lang(ar) .pr-inc-t { font-family: var(--f-ar); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.pr-inc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; }
.pr-inc-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; color: #3B312A; }
.pr-inc-list svg { flex: none; width: 16px; height: 16px; color: var(--olive); }
.pr-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted-light); }

@media (max-width: 1100px) {
  .pr-inc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pr-head { grid-template-columns: minmax(0, 1fr); }
  .pr-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 16px; }
  .pc-dark { transform: none; }
  .pr-inc { grid-template-columns: minmax(0, 1fr); }
  .pr-inc-t { max-width: none; }
}
@media (max-width: 760px) {
  .pr-grid { margin-top: 36px; }
  .pc { padding: 24px 20px 20px; }
  .pr-inc { padding: 20px; }
  .pr-inc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .pr-inc-list li { font-size: 13.5px; }
  .pr-toggle label { padding: 0 14px; }
}

/* Played once: the cards rise in turn, then each meter fills. */
@media (prefers-reduced-motion: no-preference) {
  .js .pr-grid .pc { opacity: 0; translate: 0 16px; }
  .js .pr-grid.is-in .pc { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--i) * 120ms); }
  .js .pr-grid .pc-meter i { width: 0; }
  .js .pr-grid.is-in .pc-meter i { width: var(--w); transition: width 1.1s var(--ease); transition-delay: calc(.55s + var(--i) * 120ms); }
}
.pc-scan { align-items: start; }
.pc-scan-t { gap: 3px; }
.pc-scan-t b { font-size: 30px; margin: 0 0 2px; }
.pc-scan-t span { font-size: 14px; font-weight: 700; }


/* ── 9 · Founding agencies ────────────────────────────────────────────────────
   A dark rounded panel with a brass glow on the sand page. FOUNDING_TAKEN is
   the one constant below: it fills the seats (each seat knows its --n) and
   prints "N / 10" through a CSS counter, on all three pages, without JS. */
:root { --founding-taken: 1; }   /* FOUNDING_TAKEN — places already taken (0–10) */

.fd { background: var(--sand); color: var(--sand); }
.fd-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px 56px; align-items: center;
  padding: 56px; border-radius: 28px;
  background: var(--ink); border: 1px solid rgba(200, 161, 101, .22);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 50px 90px -50px rgba(40, 25, 15, .8);
}
.fd-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(620px 380px at 78% 0%, rgba(200, 161, 101, .26), transparent 64%), radial-gradient(560px 380px at 0% 100%, rgba(184, 87, 58, .20), transparent 62%);
}
[dir="rtl"] .fd-panel::before { transform: scaleX(-1); }
.fd-zellige {
  position: absolute; z-index: -1; width: 640px; height: 640px; max-width: none;
  inset-inline-end: -120px; top: -200px; color: var(--brass); opacity: .07;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.fd .h2 { margin-top: 14px; color: var(--sand); }
.fd-sub { margin-top: 16px; max-width: 34rem; color: var(--muted-dark); font-size: clamp(15px, .4vw + 13px, 17px); line-height: 1.65; }
.fd-perks { display: grid; gap: 18px; margin-top: 30px; }
.fd-perks li { display: flex; align-items: flex-start; gap: 14px; }
.fd-perks b { display: block; font-size: 16px; font-weight: 700; color: var(--sand); }
.fd-perks li > span:last-child > span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--muted-dark); }
:lang(ar) .fd-perks b { font-size: 17px; }
.fd-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(200, 161, 101, .12); border: 1px solid rgba(200, 161, 101, .28); color: var(--brass); }
.fd-ic svg { width: 20px; height: 20px; }

/* The seats card */
.fd-card {
  position: relative; display: grid; gap: 16px; padding: 26px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(242, 234, 223, .06), rgba(242, 234, 223, .025));
  border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.fd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fd-k { font: 600 11px/1.3 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
:lang(ar) .fd-k { font-family: var(--f-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.fd-count { font: 400 44px/1 var(--f-display); color: var(--sand); white-space: nowrap; }
.fd-count span { font-size: .5em; color: var(--muted-dark); margin-inline-start: 6px; }
.fd-n::before { counter-reset: fd var(--founding-taken); content: counter(fd); color: var(--brass); }
.fd-seats { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fd-seats li {
  --on: clamp(0, calc(var(--founding-taken) - var(--n) + 1), 1);
  --next: calc(clamp(0, calc(var(--founding-taken) - var(--n) + 2), 1) - var(--on));
  position: relative; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(200, 161, 101, .38);
}
.fd-seats li::before {          /* a taken seat: filled brass with a check */
  content: ""; position: absolute; inset: 3px; border-radius: 50%; opacity: var(--on);
  box-shadow: 0 0 18px -2px rgba(200, 161, 101, .55);
}
.fd-seats li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 55% no-repeat, radial-gradient(circle at 35% 30%, #E2C38D, var(--brass) 55%, #A9824C);
}
.fd-seats li::after {           /* the next free seat: a clay ring */
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; opacity: var(--next);
  border: 2px solid var(--clay); background: rgba(184, 87, 58, .14);
}
.fd-next { margin-top: -4px; font-size: 13.5px; color: var(--muted-dark); }

.fd-msg { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(23, 18, 15, .55); border: 1px solid var(--line-dark); }
.fd-msg-k { font-size: 12px; font-weight: 700; color: var(--muted-dark); }
.fd-bubble {
  position: relative; justify-self: end; max-width: 92%;
  padding: 10px 12px 18px; border-radius: 14px 14px 4px 14px;
  background: #EFE3CF; color: #2A211B; font-size: 14px; line-height: 1.5;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .8);
}
[dir="rtl"] .fd-bubble { border-radius: 14px 14px 14px 4px; }
:lang(ar) .fd-bubble { font-size: 15px; line-height: 1.7; }
.fd-bubble i { font-style: normal; display: inline-block; min-width: 2.2em; text-align: center; border-bottom: 2px solid var(--clay); color: var(--clay-strong); font-weight: 800; line-height: 1.1; }
.fd-time { position: absolute; bottom: 4px; inset-inline-end: 10px; font-size: 10.5px; letter-spacing: -.1em; color: #7D8455; }
.fd-cta svg { width: 18px; height: 18px; }
.fd-alt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--muted-dark); }
.fd-alt a { color: var(--sand); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(242, 234, 223, .25); padding-block: 4px; }
.fd-alt a:hover { border-color: var(--brass); }

@media (max-width: 1000px) {
  .fd-panel { grid-template-columns: minmax(0, 1fr); padding: 44px 36px; }
}
@media (max-width: 760px) {
  .fd-panel { padding: 32px 20px 20px; border-radius: 22px; gap: 32px; }
  .fd-card { padding: 18px; }
  .fd-seats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 280px; }
  .fd-count { font-size: 38px; }
  .fd-zellige { width: 460px; height: 460px; inset-inline-end: -180px; top: -140px; }
}

/* Played once: the seats appear one after another, the taken ones fill,
   then the next free seat pulses three times. */
@media (prefers-reduced-motion: no-preference) {
  .js .fd-seats li { opacity: 0; transform: scale(.6); }
  .js .fd-panel.is-in .fd-seats li { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .55s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(.25s + var(--n) * 70ms); }
  .js .fd-panel.is-in .fd-seats li::after { animation: fd-pulse 1.6s ease-out 1.3s 3; }
  @keyframes fd-pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 87, 58, .55); } 100% { box-shadow: 0 0 0 12px rgba(184, 87, 58, 0); } }
  .js .fd-bubble { opacity: 0; transform: translateY(10px) scale(.97); transform-origin: 100% 100%; }
  .js[dir="rtl"] .fd-bubble { transform-origin: 0 100%; }
  .js .fd-panel.is-in .fd-bubble { opacity: 1; transform: none; transition: opacity .5s var(--ease) 1.1s, transform .6s var(--ease) 1.1s; }
}


/* ── 10 · FAQ ─────────────────────────────────────────────────────────────────
   Light (paper). Left: the title and a "write to us" card, sticky on desktop.
   Right: eight <details> cards (no JS); the clay "+" turns into a "×". */
.fq { position: relative; isolation: isolate; background: var(--paper); color: var(--ink); }   /* no overflow:hidden: it would trap the sticky side column */
.fq::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px 420px at 0% 30%, rgba(200, 161, 101, .12), transparent 62%); }
[dir="rtl"] .fq::before { transform: scaleX(-1); }
.fq .eyebrow { color: var(--clay-strong); }
.fq .h2 { margin-top: 14px; }
.fq .h2 em { color: var(--clay); }
.fq-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.fq-sub { color: var(--muted-light); font-size: clamp(15px, .4vw + 13px, 17px); line-height: 1.6; max-width: 30rem; justify-self: end; padding-bottom: 6px; }
.fq-ask {
  margin-top: 20px; padding: 18px 20px; border-radius: 20px; background: var(--sand); border: 1px solid var(--line-light);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px 24px; align-items: center;
}
.fq-ask-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--brass); }
.fq-ask-ic svg { width: 22px; height: 22px; }
.fq-ask-t b { display: block; font-size: 17px; font-weight: 800; }
.fq-ask-t p { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--muted-light); }
.fq-wa { margin: 0; }
.fq-wa svg { width: 18px; height: 18px; }
.fq-mail { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted-light); }
.fq-mail svg { flex: none; width: 16px; height: 16px; color: var(--clay-strong); }
.fq-mail bdi { color: var(--ink); font-weight: 700; user-select: all; }

.fq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 44px; align-items: start; }
.fq-col { display: grid; gap: 10px; }

.fq-item {
  position: relative; border-radius: 16px; background: #FFFDF9; border: 1px solid var(--line-light);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02); transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.fq-item[open] { border-color: rgba(184, 87, 58, .28); box-shadow: var(--shadow-card); }
.fq-item[open]::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--clay); }
.fq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px; border-radius: 16px;
}
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:focus-visible { box-shadow: var(--focus); }
@media (hover: hover) { .fq-item summary:hover .fq-q { color: var(--clay-strong); } }
.fq-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sand); color: var(--clay-strong); }
.fq-ic svg { width: 19px; height: 19px; }
.fq-q { flex: 1; font-size: 16.5px; font-weight: 700; line-height: 1.4; transition: color .2s var(--ease); }
:lang(ar) .fq-q { font-size: 17px; line-height: 1.6; }
.fq-plus { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--clay-soft); transition: transform .35s var(--ease), background .3s var(--ease); }
.fq-plus::before, .fq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--clay-strong); transition: background .3s var(--ease); }
.fq-plus::after { transform: rotate(90deg); }
.fq-item[open] .fq-plus { transform: rotate(45deg); background: var(--clay); }
.fq-item[open] .fq-plus::before, .fq-item[open] .fq-plus::after { background: var(--paper); }
.fq-a { padding: 0 20px 20px calc(16px + 38px + 14px); font-size: 15.5px; line-height: 1.7; color: #4A4038; }
[dir="rtl"] .fq-a { padding: 0 calc(16px + 38px + 14px) 20px 20px; }
:lang(ar) .fq-a { font-size: 16px; line-height: 1.85; }

@media (max-width: 1100px) {
  .fq-ask { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fq-mail { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 960px) {
  .fq-head { grid-template-columns: minmax(0, 1fr); }
  .fq-sub { justify-self: start; padding-bottom: 0; }
  .fq-list { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
}
@media (max-width: 640px) {
  .fq-ask { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .fq-wa { grid-column: 1 / -1; width: 100%; }
  .fq-mail { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .fq-item summary { gap: 12px; padding: 12px; min-height: 60px; }
  .fq-ic { width: 34px; height: 34px; }
  .fq-q { font-size: 15.5px; }
  .fq-a, [dir="rtl"] .fq-a { padding: 0 16px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fq-item[open] .fq-a { animation: fq-in .4s var(--ease); }
  @keyframes fq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}


/* ── 11 · Footer ──────────────────────────────────────────────────────────────
   Dark. Desktop: four columns (brand + contact card | product | cities | legal).
   Phone: brand and its contact card, then Produit | Légal side by side, then the
   cities as a row of tags. Bottom: © and a language pill. Last, the fused ORBIT
   mark drawn whole and faint, its thin rings orbiting slowly (SMIL like the
   header logo; the still copy shows under reduced motion via .logo-spin/.logo-still). */
.ft { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--sand); padding-top: 72px; border-top: 1px solid var(--line-dark); }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 50% 0%, rgba(184, 87, 58, .15), transparent 65%), radial-gradient(640px 300px at 50% 100%, rgba(200, 161, 101, .08), transparent 70%); }
.ft a { text-decoration: none; }
.ft-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px;
  grid-template-areas: "brand prod city legal";
}
.ft-brand { grid-area: brand; }
.ft-prod { grid-area: prod; }
.ft-city { grid-area: city; }
.ft-legal { grid-area: legal; }
.ft-home { display: inline-block; border-radius: 8px; }
.ft-logo { height: 32px; width: auto; direction: ltr; color: var(--sand); }
.ft-logo .sat { fill: var(--brass); }
.ft-tag { margin-top: 14px; max-width: 26rem; font-size: 14.5px; line-height: 1.65; color: var(--muted-dark); }

.ft-contact { margin-top: 22px; max-width: 24rem; border-radius: 16px; background: rgba(242, 234, 223, .035); border: 1px solid var(--line-dark); overflow: hidden; }
.ft-contact li + li { border-top: 1px solid var(--line-dark); }
.ft-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--sand); }
a.ft-row { transition: background .2s var(--ease); }
a.ft-row:hover { background: rgba(242, 234, 223, .04); }
.ft-ci { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(200, 161, 101, .12); color: var(--brass); }
.ft-ci svg { width: 17px; height: 17px; }
.ft-cv { flex: 1; min-width: 0; display: grid; line-height: 1.35; font-size: 14.5px; font-weight: 600; }
.ft-cv small { font-size: 11.5px; font-weight: 500; color: var(--muted-dark); }
:lang(ar) .ft-cv small { font-size: 12.5px; }
.ft-mail { user-select: all; overflow-wrap: anywhere; }
.ft-go { flex: none; color: var(--muted-dark); }
.ft-go svg { width: 16px; height: 16px; }
[dir="rtl"] .ft-go svg { transform: scaleX(-1); }

.ft-h { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 16px; font: 600 11px/1.3 var(--f-label); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
:lang(ar) .ft-h { font-family: var(--f-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.ft-pill { padding: 2px 8px; border-radius: 999px; background: rgba(242, 234, 223, .06); border: 1px solid var(--line-dark); font: 600 10.5px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted-dark); }
:lang(ar) .ft-pill { font-family: var(--f-ar); font-size: 12px; }
.ft-col ul { display: grid; gap: 12px; }
.ft-col li { font-size: 14.5px; line-height: 1.4; }
.ft-col a { color: var(--sand); opacity: .84; transition: opacity .2s var(--ease), color .2s var(--ease); }
.ft-col a:hover { opacity: 1; color: var(--brass); }
.ft-city li span { color: var(--muted-dark); }
.ft-law { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 7px 12px; border-radius: 999px; background: rgba(125, 132, 85, .14); border: 1px solid rgba(125, 132, 85, .3); color: #C3C99A; font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.ft-law svg { flex: none; width: 15px; height: 15px; }

.ft-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.ft-copy { font-size: 13px; color: var(--muted-dark); }
.ft-langs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(242, 234, 223, .05); border: 1px solid var(--line-dark); }
.ft-langs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted-dark); transition: color .2s var(--ease), background .2s var(--ease); }
.ft-langs a:hover { color: var(--sand); }
.ft-langs a[aria-current="page"] { background: var(--sand); color: var(--ink); }
.ft-langs a[lang="ar"] { font-family: var(--f-ar); font-size: 14px; }

/* The signature: whole, centred, faint, never cropped. */
.ft-markwrap { display: flex; justify-content: center; padding: 36px 0 calc(28px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.ft-mark { width: min(560px, 80vw); height: auto; direction: ltr; overflow: visible; }

@media (max-width: 960px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand brand" "prod legal" "city city"; gap: 36px 24px; }
  .ft-contact { max-width: none; }
  /* the cities become one row of tags */
  .ft-city { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
  .ft-city .ft-h { margin: 0; }
  .ft-city ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .ft-city li span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(242, 234, 223, .05); border: 1px solid var(--line-dark); font-size: 13.5px; }
}
@media (max-width: 760px) {
  .ft { padding-top: 52px; }
  .ft-bar { margin-top: 32px; flex-direction: column-reverse; align-items: center; text-align: center; gap: 14px; }
  .ft-markwrap { padding-top: 28px; }
}
@media (max-width: 960px) {
  .ft-law { border-radius: 12px; padding: 8px 12px; align-items: flex-start; }
  .ft-law span { text-wrap: balance; }
  .ft-law svg { margin-top: 1px; }
}

/* §9 at 360 px: the nowrap button widened the card past the screen (seats and "1 / 10" cut). */
.fd-copy, .fd-card { min-width: 0; }
.fd-cta { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }