/* «وادي · كوبالت» — the mujib.ai marketing stylesheet. Generated by scripts/landing/port-wadi.cjs from the
   design workspace (design-wadi/cobalt/assets/site.css) plus scripts/landing/site-additions.css. Light canvas;
   colours are the Meridian tokens (cobalt, ink, paper, emerald); the logo dot is A2 (--mk-dot). */

:root {
  --bg: #F6F7F9;
  --bg-2: #EDF1F7;
  --card: #FFFFFF;
  --ink: #0E1116;
  --mk-dot: #0F2280;   /* A2 (adopted 2026-10-06): the logo dot is deep cobalt, not ink */
  --ink-2: #3B4252;
  --muted: #646E82;
  --line: #E7E9EE;
  --line-2: #DCE0E8;
  --cu-50: #F2F5FF;
  --cu-100: #EAEFFF;
  --cu-200: #C9D5FF;
  --cu-300: #9DB1FF;
  --cu-500: #2E5CFF;
  --cu-600: #1E43D8;
  --cu-700: #1A39B8;
  --cu-900: #0F2280;
  --teal: #10B981;
  --teal-700: #067A55;
  --teal-50: #E7F8F1;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --sh-1: 0 1px 2px rgba(16, 22, 40, .05), 0 6px 18px rgba(16, 22, 40, .06);
  --sh-2: 0 2px 6px rgba(16, 24, 48, .08), 0 22px 48px rgba(16, 24, 48, .16);
  --f-d: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --f-l: "Inter", system-ui, sans-serif;
  --wrap: 1200px;
  --gut: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.75 var(--f-b);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cu-500); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.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; }
.skip { position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 15px/1.4 var(--f-b); }
.skip:focus { inset-block-start: 16px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Type ── */
.display { margin: 0; font: 800 clamp(40px, 5.4vw, 76px)/1.22 var(--f-d); }
.h2 { margin: 0; font: 800 clamp(32px, 4.3vw, 58px)/1.24 var(--f-d); }
.h3 { margin: 0; font: 700 clamp(19px, 1.7vw, 23px)/1.45 var(--f-d); }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.8; color: var(--ink-2); }
.accent { color: var(--cu-500); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  font: 500 16px/1.5 var(--f-b); color: var(--ink);
}
.sec { padding-block: clamp(80px, 10vw, 140px); }
.sec-head {
  display: grid; justify-items: center; gap: 22px; text-align: center;
  max-width: 840px; margin-inline: auto; margin-bottom: clamp(44px, 6vw, 76px);
}
.sec-head .lead { max-width: 640px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding-inline: 22px; border-radius: 14px;
  font: 600 17px/1 var(--f-b); white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--cu-500); color: #fff; }
.btn-ink:hover { background: var(--cu-600); }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.btn-white:hover { background: var(--cu-50); }
.btn-lg { min-height: 58px; padding-inline: 26px 10px; font-size: 18px; border-radius: 16px; }
.btn-sm { min-height: 40px; padding-inline: 16px; font-size: 15px; border-radius: 12px; }
.btn .arr {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink); flex: none;
}
.btn-white .arr { background: var(--cu-500); color: #fff; }
.btn .arr svg { width: 18px; height: 18px; }

/* ── Brand ── */
.mark { width: 30px; height: 30px; flex: none; }
.wordmark {
  font: 800 26px/1.3 var(--f-d);
  background-image: url(grain.png), linear-gradient(to left, #2E5CFF 0%, #1E43D8 45%, var(--mk-dot) 100%);
  background-size: 180px, 100% 100%;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: 2px;
}

/* ── Nav (floating glass pill) ── */
.nav {
  position: fixed; inset-block-start: 18px; inset-inline: 0; z-index: 50;
  display: flex; justify-content: center; padding-inline: 16px; pointer-events: none;
}
.nav-pill {
  pointer-events: auto; position: relative;
  width: min(940px, 100%); height: 64px;
  display: flex; align-items: center; gap: 6px; padding-inline: 18px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 2px rgba(16, 22, 40, .06), 0 12px 32px rgba(16, 22, 40, .10);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.scrolled .nav-pill { background: rgba(255, 255, 255, .9); }
.brand { display: flex; align-items: center; gap: 9px; padding-inline-end: 12px; }
.nav-sep { width: 1px; height: 26px; background: var(--line-2); }
.nav-links { display: flex; gap: 2px; margin-inline-start: 6px; }
.nav-links > a { padding: 8px 14px; border-radius: 10px; font: 500 15.5px/1.4 var(--f-b); color: var(--ink-2); transition: background .15s, color .15s; }
.nav-links > a:hover { background: rgba(18, 36, 63, .06); color: var(--ink); }
.nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.nav-login { padding: 8px 14px; border-radius: 10px; font: 600 15.5px/1.4 var(--f-b); }
.nav-login:hover { background: rgba(18, 36, 63, .06); }
.nav-cta { transition: opacity .25s ease, transform .25s ease; }
.js .nav:not(.past-hero) .nav-cta { opacity: 0; transform: scale(.94); pointer-events: none; visibility: hidden; }
.m-menu { display: none; }

/* ── Hero ── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #E4EBFA;
  border-end-start-radius: 44px; border-end-end-radius: 44px;
}
.hero-art { position: absolute; inset: 0; z-index: -2; background: url(dawn.svg) center bottom / cover no-repeat; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(grain.png); opacity: .42; mix-blend-mode: overlay;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 20px; text-align: center;
  padding-block-start: clamp(118px, 12vw, 146px);
}
.hero-sub { max-width: 640px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.8; color: var(--ink-2); }
.hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 6px; }
.hero-note { font-size: 15px; color: var(--ink-2); }

.stage {
  position: relative; width: min(1240px, 100%); margin-inline: auto;
  height: clamp(520px, 44vw, 600px); margin-top: clamp(22px, 2.6vw, 32px);
}

/* Phone: the owner's lock screen the morning after */
.phone {
  position: absolute; left: 50%; bottom: -112px; z-index: 2;
  width: 292px; height: 610px; transform: translateX(-50%);
  border-radius: 50px; padding: 11px;
  background: linear-gradient(150deg, #2B3242, #0E1116 60%, #1A2030);
  box-shadow: 0 40px 80px rgba(14, 22, 52, .38), 0 6px 18px rgba(14, 22, 52, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.phone-screen {
  position: relative; height: 100%; border-radius: 40px; overflow: hidden; color: #fff;
  background-image: linear-gradient(180deg, rgba(8, 14, 36, .35), rgba(6, 10, 28, .8) 70%), url(strata.webp);
  background-size: cover; background-position: center;
}
.island { position: absolute; top: 11px; left: 50%; width: 98px; height: 29px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.ls-status { display: flex; justify-content: space-between; align-items: center; padding: 15px 26px 0; direction: ltr; }
.ls-status svg { width: 46px; height: 12px; }
.ls-date { margin-top: 42px; text-align: center; font: 500 15px/1.3 var(--f-b); color: rgba(255, 255, 255, .88); }
.ls-time { text-align: center; font: 600 80px/1.05 var(--f-l); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; direction: ltr; }
.ls-notifs { position: absolute; inset-inline: 10px; top: 206px; display: grid; gap: 8px; }
.notif {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border-radius: 20px; background: rgba(246, 248, 255, .84); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.n-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, #5B82FF, #2E5CFF 60%, #1E43D8); }
.n-ic svg { width: 22px; height: 22px; }
.n-ic.n-wa { background: #25D366; }
.n-ic.n-wa svg { width: 21px; height: 21px; }
.n-body { min-width: 0; flex: 1; }
.n-h { display: flex; justify-content: space-between; gap: 8px; font: 600 13px/1.4 var(--f-b); }
.n-h span { font-weight: 400; color: #6A6A6A; font-size: 12px; }
.n-body p { margin-top: 1px; font-size: 13px; line-height: 1.5; }
.n-body b { font-weight: 600; }

/* Story cards — the mechanic, told in three steps */
.story { position: absolute; z-index: 3; width: 330px; margin: 0; transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1); }
.s1 { left: calc(50% + 178px); top: 34px; }
.s2 { right: calc(50% + 178px); top: 132px; width: 364px; }
.s3 { left: calc(50% + 196px); top: 300px; width: 300px; }
.lbl {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px;
  padding-block: 5px; padding-inline: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--sh-1); font: 600 15px/1.35 var(--f-b); color: var(--ink);
}
.step-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 13px/1 var(--f-l); }
.card-msg { position: relative; background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: var(--sh-2); text-align: start; }
.who { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 600 14px/1.3 var(--f-b); }
.who time, .who .meta { margin-inline-start: auto; font: 400 12.5px/1 var(--f-b); color: var(--muted); }
.av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f-d); color: #fff; }
.av-r { background: #C9765B; }
.av-l { background: #5B7FA6; }
.av-d { background: #7C6A9E; }
.av-m { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cu-50); border: 1px solid var(--cu-100); }
.av-m svg { width: 19px; height: 19px; }
.ch { width: 16px; height: 16px; flex: none; border-radius: 5px; display: grid; place-items: center; }
.ch svg { width: 11px; height: 11px; }
.msg-text { font-size: 15px; line-height: 1.7; color: var(--ink); }
.src {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 4px 10px; border-radius: 999px; background: var(--cu-50); border: 1px solid var(--cu-100);
  font: 500 12.5px/1.4 var(--f-b); color: var(--cu-700);
}
.src svg { width: 13px; height: 13px; }
.typing { display: none; position: absolute; inset-block-start: 52px; inset-inline-start: 16px; gap: 5px; align-items: center; height: 26px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #B8C2D6; animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.booked { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.booked .ok { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); }
.booked .ok svg { width: 22px; height: 22px; }
.booked b { font: 700 16px/1.4 var(--f-d); }
.booked > span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.booked ul { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: 2px; font-size: 14px; color: var(--ink-2); }

.stat-glass {
  position: absolute; right: calc(50% + 206px); bottom: 56px; z-index: 4;
  display: grid; justify-items: center; gap: 0; padding: 12px 28px 12px; min-width: 260px;
  border-radius: 24px; background: rgba(248, 250, 255, .68);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--sh-2); text-align: center;
}
.stat-glass b { font: 800 46px/1.15 var(--f-d); direction: ltr; }
.stat-glass > span { font: 500 14.5px/1.5 var(--f-b); color: var(--ink-2); }
.stat-glass small { font-size: 12.5px; color: var(--ink-2); }

/* Hero sequence (only when JS enables it; without JS everything is simply visible) */
.stage.anim .story { opacity: 0; transform: translateY(18px) scale(.98); }
.stage.anim.st-s1 .s1, .stage.anim.st-s2t .s2, .stage.anim.st-s3 .s3 { opacity: 1; transform: none; }
.stage.anim .s2 .msg-text, .stage.anim .s2 .src { visibility: hidden; }
.stage.anim .s2 .typing { display: inline-flex; }
.stage.anim.st-s2 .s2 .msg-text { visibility: visible; animation: fadein .4s ease; }
.stage.anim.st-s2 .s2 .src { visibility: visible; animation: fadein .4s ease .15s both; }
.stage.anim.st-s2 .s2 .typing { display: none; }
.stage.anim .notif.fresh { opacity: 0; transform: translateY(-14px) scale(.97); }
.stage.anim.st-n .notif.fresh { opacity: 1; transform: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ── Channels strip ── */
.channels { padding-block: 64px 0; text-align: center; }
.channels p { color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.ch-row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px clamp(32px, 7vw, 96px); }
.ch-row li { display: flex; align-items: center; gap: 12px; font: 700 21px/1.3 var(--f-d); }
.ch-tile { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.ch-tile svg { width: 27px; height: 27px; }
.t-wa { background: #25D366; }
.t-ms { background: #0A7CFF; }
.t-ig { background: #E1306C; }

/* ── Bento (Gains) ── */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); }
.card-copy p { margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.8; }
.c-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 40px; padding: 48px; }
.c-half { display: flex; flex-direction: column; gap: 30px; padding: 40px 40px 0; }
.c-half .vis-in { margin-top: auto; }

.chart { position: relative; padding-top: 46px; }
.chart24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 5px; height: 210px; }
.chart24 i { display: block; height: calc(var(--h) * 1%); min-height: 6px; border-radius: 7px 7px 3px 3px; background: #E1E6F0; transform-origin: bottom; transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 22ms); }
.chart24 i.off { background: var(--cu-500); }
.chart24.grow i { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; font: 500 13px/1 var(--f-b); color: var(--muted); }
.chart-brk { position: absolute; top: 0; height: 36px; display: flex; align-items: flex-start; justify-content: center; text-align: center; font: 600 13.5px/1.2 var(--f-b); color: var(--cu-700); border-top: 2px solid var(--cu-300); padding-top: 8px; }
.chart-brk.b-start { inset-inline-start: 0; width: calc(10 / 24 * 100% - 3px); }
.chart-brk.b-end { inset-inline-end: 0; width: calc(4 / 24 * 100% - 3px); }
.chart-brk.b-mid { inset-inline-start: calc(10 / 24 * 100% + 3px); width: calc(10 / 24 * 100% - 6px); color: var(--muted); border-top-color: var(--line-2); font-weight: 500; }
.chart-key { display: flex; gap: 18px; margin-top: 18px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.chart-key span { display: inline-flex; align-items: center; gap: 8px; }
.chart-key i { width: 12px; height: 12px; border-radius: 4px; background: #E1E6F0; }
.chart-key i.off { background: var(--cu-500); }

.agenda { border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: #FFFFFF; padding: 18px 18px 6px; box-shadow: 0 -6px 30px rgba(16, 24, 48, .06); }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 15px/1.4 var(--f-d); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 500 13px/1.4 var(--f-b); color: var(--ink-2); }
.chip svg { width: 13px; height: 13px; }
.agenda ul { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--line); font-size: 14.5px; }
.agenda time { font: 600 13.5px/1 var(--f-b); color: var(--muted); }
.agenda .who-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda li.free .who-s { color: var(--muted); }
.agenda li.free .slot { height: 26px; border-radius: 8px; border: 1.5px dashed var(--line-2); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.4 var(--f-b); white-space: nowrap; }
.tag-agent { background: var(--teal-50); color: var(--teal-700); }
.tag-staff { background: #EEF1F6; color: #4A5A72; }
.tag-human { background: var(--cu-50); color: var(--cu-700); }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agenda li.new { background: linear-gradient(to left, rgba(16, 185, 129, .08), transparent); border-radius: 10px; }
.agenda li.new.flash { animation: newrow 1.8s ease; }
@keyframes newrow { 0%, 35% { background-color: color-mix(in srgb, var(--teal) 22%, transparent); } 100% { background-color: transparent; } }
.agenda li.new { transition: opacity .5s ease .2s, transform .5s ease .2s; }

.kb { display: grid; gap: 12px; padding-bottom: 36px; }
.kb-row { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: #FBFCFE; }
.kb-k { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1.4 var(--f-b); color: var(--muted); margin-bottom: 8px; }
.kb-k svg { width: 14px; height: 14px; }
.kb-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; font-size: 15px; }
.kb-line b { font-weight: 600; }
.kb-line span { color: var(--ink-2); }
.kb-link { width: 2px; height: 22px; margin-inline-start: 34px; background: repeating-linear-gradient(to bottom, var(--cu-300) 0 4px, transparent 4px 8px); }
.bubble-a { max-width: 88%; padding: 12px 15px; border-radius: 18px; border-start-start-radius: 6px; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.7; }
.bubble-a .src { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #DCE5FF; }
.kb-miss { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 14.5px; color: var(--ink-2); }
.kb-miss svg { width: 18px; height: 18px; color: var(--cu-600); flex: none; }

/* ── Big number ── */
.bignum { text-align: center; padding-bottom: clamp(56px, 7vw, 96px); }
.giant {
  width: fit-content; margin: 22px auto 0; padding-inline: .04em; direction: ltr;
  font: 800 min(clamp(150px, 27vw, 400px), 38vw)/1 var(--f-d);
  background-image: url(grain.png), url(strata.webp);
  background-size: 180px, cover; background-position: 0 0, center;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bignum .h2 { margin-top: 6px; }
.bignum .lead { margin: 22px auto 0; max-width: 560px; }
.mini-stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 72px); margin-top: 44px; flex-wrap: wrap; }
.mini-stats div { display: grid; gap: 2px; }
.mini-stats b { font: 800 clamp(30px, 3.4vw, 42px)/1.2 var(--f-d); direction: ltr; }
.mini-stats div > span { color: var(--ink-2); font-size: 16px; }
.fine { max-width: 620px; margin: 30px auto 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* ── Product (sticky list + changing visual) ── */
.industries { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.industries span { padding: 6px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font: 500 14.5px/1.4 var(--f-b); color: var(--ink-2); }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-item { padding-block: 30px; border-top: 1px solid var(--line-2); }
.feat-item:last-child { border-bottom: 1px solid var(--line-2); }
.feat-item .h3 { display: flex; align-items: center; gap: 12px; }
.feat-item .h3 .fi { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); border: 1px solid var(--cu-100); }
.feat-item .h3 .fi svg { width: 20px; height: 20px; }
.feat-item > p { margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.8; max-width: 520px; }
.feat-item .vis { margin-top: 24px; height: 440px; }
.feat-stage { display: none; }
@media (min-width: 1024px) {
  .feat.js-sticky .feat-stage { display: block; position: sticky; top: 108px; height: min(640px, calc(100vh - 140px)); }
  .feat.js-sticky .feat-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
  .feat.js-sticky .feat-item .h3, .feat.js-sticky .feat-item > p { color: var(--muted); transition: color .35s ease; }
  .feat.js-sticky .feat-item .fi { filter: grayscale(1); opacity: .55; transition: filter .35s ease, opacity .35s ease; }
  .feat.js-sticky .feat-item.is-active .h3 { color: var(--ink); }
  .feat.js-sticky .feat-item.is-active > p { color: var(--ink-2); }
  .feat.js-sticky .feat-item.is-active .fi { filter: none; opacity: 1; }
  .feat.js-sticky .feat-item .vis { display: none; }
}
.feat-stage .vis { position: absolute; inset: 0; height: auto; margin: 0; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.feat-stage .vis.is-active { opacity: 1; transform: none; }

.vis {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background-image: linear-gradient(180deg, rgba(242, 245, 255, .6), rgba(234, 239, 255, .3)), url(strata.webp);
  background-size: cover; background-position: center;
  display: grid; place-items: center; padding: 28px;
}
.vis::after { content: ""; position: absolute; inset: 0; background: url(grain.png); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
.vis > * { position: relative; z-index: 1; }
.ui { width: min(100%, 430px); background: #fff; border-radius: 22px; box-shadow: var(--sh-2); padding: 20px; text-align: start; }
/* A second, smaller card floating over the first: product layered over stone. */
.fl {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px; background: #FFFFFF;
  box-shadow: var(--sh-2); text-align: start; font-size: 13.5px; line-height: 1.5; max-width: 270px;
}
.fl b { display: block; font: 600 13.5px/1.4 var(--f-b); }
.fl span { color: var(--ink-2); }
.fl-a { inset-block-start: 34px; inset-inline-end: 30px; }
.fl-b { inset-block-end: 40px; inset-inline-start: 30px; }
.fl .n-ic { width: 32px; height: 32px; }
.fl .n-ic svg { width: 20px; height: 20px; }
.fl-ch { display: flex; gap: 6px; }
.fl-ch .ch { width: 26px; height: 26px; border-radius: 8px; }
.fl-ch .ch svg { width: 16px; height: 16px; }
.fl .ok { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); flex: none; }
.fl .ok svg { width: 18px; height: 18px; }
.photo { width: 120px; height: 92px; border-radius: 12px; flex: none; background-image: linear-gradient(160deg, #E9EEFA, #D5DEF3); position: relative; overflow: hidden; }
.photo::before { content: ""; position: absolute; inset-inline-start: 38px; top: 18px; width: 30px; height: 58px; border-radius: 8px 8px 6px 6px; background: linear-gradient(180deg, #FFFFFF, #EFE6DE); box-shadow: 0 4px 10px rgba(14, 22, 52, .18); }
.photo::after { content: ""; position: absolute; inset-inline-start: 44px; top: 10px; width: 18px; height: 12px; border-radius: 4px; background: var(--cu-500); }
.ui-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font: 700 15px/1.4 var(--f-d); }
.ui-sub { font: 400 13px/1.5 var(--f-b); color: var(--muted); }
.demo-tag { position: absolute; inset-block-end: 14px; inset-inline-start: 16px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .78); font: 500 12px/1.5 var(--f-b); color: var(--ink-2); }

.inbox-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); }
.ui-h + .inbox-row { border-top: 0; }
.inbox-row .av { position: relative; }
.inbox-row .av .ch { position: absolute; inset-block-end: -3px; inset-inline-end: -4px; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 6px; }
.inbox-row .ib-t { min-width: 0; }
.inbox-row .ib-t b { display: block; font: 600 14px/1.4 var(--f-b); }
.inbox-row .ib-t span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row .ib-m { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--muted); }

.thread { display: grid; gap: 8px; }
.b-in, .b-out, .b-staff { max-width: 84%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.65; }
.b-in { justify-self: start; background: #F1F3F7; border-start-start-radius: 5px; }
.b-out { justify-self: end; background: var(--cu-50); border: 1px solid var(--cu-100); border-start-end-radius: 5px; }
.b-staff { justify-self: end; background: var(--ink); color: #fff; border-start-end-radius: 5px; }
.b-staff small, .b-out small { display: block; margin-top: 3px; font-size: 11.5px; opacity: .75; }
.ev { justify-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #F1F3F7; color: #44536B; font: 500 12.5px/1.4 var(--f-b); }
.ev svg { width: 13px; height: 13px; }
.paused-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: var(--teal-50); color: var(--teal-700); font: 500 13px/1.5 var(--f-b); }
.paused-note svg { width: 15px; height: 15px; flex: none; }
.voice { display: flex; align-items: center; gap: 10px; }
.voice .play { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.voice .play svg { width: 12px; height: 12px; }
.wave { display: flex; align-items: center; gap: 2.5px; height: 26px; flex: 1; direction: ltr; }
.wave i { width: 3px; border-radius: 3px; background: #9A8C80; height: calc(var(--h) * 1%); }
.transcript { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #D5DCE8; font-size: 13px; color: var(--ink-2); }
.transcript em { font-style: normal; color: var(--muted); font-size: 12px; display: block; }
.camp-meter { height: 10px; border-radius: 999px; background: #E6EBF5; overflow: hidden; margin: 12px 0 8px; }
.camp-meter i { display: block; height: 100%; width: 28%; background: var(--cu-500); border-radius: inherit; }
/* One message at a time with irregular gaps (the product's random delay), not batches. */
.pace { display: flex; align-items: center; height: 34px; margin-top: 14px; padding-inline: 6px; border-radius: 10px; background: #F5F7FC; overflow: hidden; }
.pace i { flex: none; width: 5px; height: 20px; border-radius: 3px; background: var(--cu-200); margin-inline-end: calc(var(--g, 16) * 1px); }
.pace i.now { height: 26px; background: var(--cu-500); }
.pace i.next { width: 7px; height: 20px; background: transparent; border: 1.5px dashed var(--cu-300); }
.camp-k { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ── Process (stories-style stepper) ── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 40px; }
.step { position: relative; display: grid; gap: 8px; align-content: start; padding-bottom: 22px; text-align: start; color: var(--muted); transition: color .3s ease; }
.step:hover, .step.is-active { color: var(--ink); }
.step .si { transition: filter .3s ease, opacity .3s ease; }
.step:not(.is-active):not(:hover) .si { filter: grayscale(1); opacity: .6; }
.step .si { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); border: 1px solid var(--cu-100); }
.step .si svg { width: 19px; height: 19px; }
.step b { font: 700 19px/1.4 var(--f-d); }
.step span { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.step.is-active span, .step:hover span { color: var(--ink-2); }
.step .bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.step .bar i { display: block; height: 100%; width: 0; background: var(--cu-500); border-radius: inherit; }
.step.is-active .bar i { width: 100%; }
.js .step.is-active .bar i { width: 0; animation: fill var(--dur, 7s) linear forwards; }
.how.paused .step.is-active .bar i, .motion-off .step.is-active .bar i { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.how-frame { position: relative; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 460px; }
.panel + .panel { border-top: 1px solid var(--line); }
.js .panel { display: none; }
.js .panel + .panel { border-top: 0; }
.js .panel.is-active { display: grid; animation: fadein .35s ease; }
.p-copy { padding: 44px; display: grid; align-content: center; gap: 16px; border-inline-end: 1px solid var(--line); background: #FBFCFE; }
.p-copy .k { font: 600 14px/1.4 var(--f-b); color: var(--cu-600); }
.p-copy h3 { margin: 0; font: 800 clamp(24px, 2.4vw, 32px)/1.35 var(--f-d); }
.p-copy p { color: var(--ink-2); line-height: 1.8; }
.p-copy ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15.5px; }
.p-vis { position: relative; display: grid; place-items: center; padding: 36px; background: linear-gradient(180deg, #F7F9FD, #EEF2FA); }
.qr-cap { margin-top: 16px; text-align: center; font-size: 14px; color: var(--ink-2); }
.field { display: flex; align-items: center; gap: 10px; height: 46px; padding-inline: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 14.5px; color: var(--ink-2); }
.field svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.facts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #F7F9FC; border: 1px solid var(--line); font-size: 14px; }
.facts li .tick { width: 20px; height: 20px; border-radius: 6px; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; }
.facts li .tick svg { width: 13px; height: 13px; }
.facts li span:last-child { margin-inline-start: auto; color: var(--muted); font-size: 12.5px; }
.toggle-big { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.toggle-big b { font: 700 17px/1.4 var(--f-d); display: block; }
.toggle-big span { font-size: 13.5px; color: var(--muted); }
.switch { width: 54px; height: 32px; border-radius: 999px; background: var(--teal); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.4 var(--f-b); color: var(--teal-700); }
.live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: pulse 2s infinite ease-out; }
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.motion-off .live i::after { animation-play-state: paused; opacity: 0; }

/* ── Wall (living columns of real-life questions) ── */
.wall-sec { padding-block: 0 clamp(80px, 10vw, 140px); }
.wall {
  position: relative; overflow: hidden; isolation: isolate;
  margin-inline: clamp(0px, 1.4vw, 20px); border-radius: 44px;
  background: var(--bg-2); border: 1px solid var(--line);
  height: 940px;
}
.wall-cols {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 200px)) minmax(0, 1fr) repeat(2, minmax(0, 200px)); gap: 20px;
  padding-inline: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.wall-cols .c1 { grid-column: 1; } .wall-cols .c2 { grid-column: 2; } .wall-cols .gap { grid-column: 3; } .wall-cols .c3 { grid-column: 4; } .wall-cols .c4 { grid-column: 5; }
.col { display: flex; flex-direction: column; gap: 16px; animation: up 70s linear infinite; }
.col.down { animation-name: down; animation-duration: 80s; }
/* The columns keep moving under the pointer, under a finger and while the page scrolls (owner 2026-10-06:
   a hover pause froze the wall on phones, where :hover sticks after a tap). Only the «إيقاف الحركة» switch
   (WCAG 2.2.2) and prefers-reduced-motion stop them. */
.motion-off .col { animation-play-state: paused; }
@keyframes up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes down { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }
.q { background: #fff; border-radius: 20px; padding: 14px 15px; box-shadow: var(--sh-1); border: 1px solid rgba(220, 224, 232, .8); text-align: start; }
.q .qh { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font: 500 12px/1.4 var(--f-b); color: var(--muted); }
.q .qh .ch { width: 15px; height: 15px; }
.q .qh time { margin-inline-start: auto; }
.q p { font-size: 14.5px; line-height: 1.65; }
.q .ans { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 600 12px/1.4 var(--f-b); color: var(--teal-700); }
.q .ans svg { width: 14px; height: 14px; }
.q.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.q.dark .qh { color: rgba(255, 255, 255, .7); }
.wall-center {
  position: relative; z-index: 1; height: 100%; width: min(440px, 100% - 32px); margin-inline: auto;
  display: grid; align-content: center; justify-items: center; gap: 20px; text-align: center;
}
.deck { position: relative; width: 100%; height: 250px; margin-top: 18px; }
.qa {
  position: absolute; inset: 0; display: grid; align-content: start; gap: 12px;
  padding: 26px; border-radius: 28px; background: #FFFFFF;
  border: 1px solid var(--line); box-shadow: var(--sh-2); text-align: start;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.qa[data-pos="1"] { transform: translateY(-14px) scale(.955); opacity: .85; }
.qa[data-pos="2"] { transform: translateY(-27px) scale(.91); opacity: .6; }
.qa[data-pos="3"] { transform: translateY(-38px) scale(.865); opacity: 0; }
.qa[data-pos="0"] { z-index: 4; } .qa[data-pos="1"] { z-index: 3; } .qa[data-pos="2"] { z-index: 2; } .qa[data-pos="3"] { z-index: 1; }
.qa .qa-k { display: flex; align-items: center; gap: 8px; font: 600 13px/1.4 var(--f-b); color: var(--cu-700); }
.qa .thread { gap: 10px; }
.qa .b-in, .qa .b-out { font-size: 15px; max-width: 92%; }
.deck-next { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-1); font: 600 15px/1.2 var(--f-b); }
.deck-next svg { width: 16px; height: 16px; }
.deck-tools { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.motion-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .8); font: 500 14px/1.2 var(--f-b); color: var(--ink-2); }
.motion-btn:hover { background: #fff; color: var(--ink); }
/* On the wall the columns run behind the controls (phones): opaque, like .deck-next, so no card text shows through. */
.wall .motion-btn { background: #fff; }
.motion-btn svg { width: 16px; height: 16px; }
.motion-btn .ic-play, .motion-btn[aria-pressed="true"] .ic-pause { display: none; }
.motion-btn[aria-pressed="true"] .ic-play { display: block; }
.how-tools { display: flex; justify-content: flex-end; margin: -24px 0 18px; }
html:not(.js) .motion-btn, html:not(.js) .deck-next { display: none; }
html:not(.js) .qa:not([data-pos="0"]) { display: none; }
.deck-note { font-size: 13px; color: var(--muted); }

/* ── Pricing ── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1080px; margin-inline: auto; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 32px 30px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); }
.plan.rec { border: 2px solid var(--cu-500); box-shadow: var(--sh-2); }
.plan .rec-chip { position: absolute; inset-block-start: -15px; inset-inline-start: 28px; padding: 4px 14px; border-radius: 999px; background: var(--cu-500); color: #fff; font: 600 13px/1.5 var(--f-b); }
.plan h3 { margin: 0; font: 700 21px/1.4 var(--f-d); }
.plan .price { display: flex; align-items: baseline; gap: 8px; }
.plan .price b { font: 800 54px/1 var(--f-d); }
.plan .price span { font-size: 16px; color: var(--muted); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; color: var(--ink-2); }
.plan li { display: flex; align-items: center; gap: 10px; }
.plan li svg { width: 18px; height: 18px; color: var(--teal-700); flex: none; }
.plan .btn { margin-top: auto; }
.plan-note { margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.plan-note a { color: var(--cu-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── FAQ ── */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 120px; display: grid; justify-items: start; gap: 22px; }
.faq-head p { color: var(--ink-2); }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 14px; transition: border-color .2s; }
.faq-list details[open] { border-color: var(--line-2); box-shadow: var(--sh-1); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font: 600 18px/1.55 var(--f-b); cursor: pointer; border-radius: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); transition: transform .25s ease, background .2s; }
.faq-list summary .pm svg { width: 15px; height: 15px; }
.faq-list details[open] summary .pm { transform: rotate(45deg); background: var(--cu-50); color: var(--cu-700); }
.faq-list details p { padding: 0 22px 22px; color: var(--ink-2); line-height: 1.85; }

/* ── Finale + footer ── */
.finale { position: relative; text-align: center; padding-block: clamp(90px, 11vw, 150px) 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%); overflow: hidden; }
.finale .h2 { font-size: clamp(36px, 5vw, 66px); }
.finale .lead { max-width: 580px; margin: 22px auto 0; }
.finale .btn { margin-top: 32px; }
.made { margin-top: 18px; font-size: 14.5px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.made svg { width: 15px; height: 15px; color: var(--cu-500); }
.giant-word {
  position: relative; z-index: 0; width: fit-content; margin: 30px auto -0.02em; padding: .12em .05em .2em;
  font: 800 min(clamp(130px, 27vw, 400px), 30vw)/1 var(--f-d);
  background-image: url(grain.png), url(strata.webp);
  background-size: 180px, cover; background-position: 0 0, center 30%;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.site-footer {
  position: relative; z-index: 1; width: min(1320px, 100% - 32px); margin-inline: auto;
  padding: 56px clamp(24px, 5vw, 64px) 0; border-radius: 36px 36px 0 0;
  background: rgba(250, 251, 253, .93); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-bottom: 0; text-align: start;
}
.f-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.f-brand { display: grid; gap: 14px; align-content: start; }
.f-brand .brand { padding: 0; }
.f-brand p { font-size: 14.5px; color: var(--ink-2); line-height: 1.8; max-width: 300px; }
.f-col h3 { margin: 0 0 14px; font: 700 16px/1.4 var(--f-d); }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.f-col a:hover { color: var(--cu-700); }
.f-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 44px; padding-block: 22px 26px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.f-legal nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; } /* baseline: «العربية» / English in the other script's font line up with the legal links */
.f-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .s1 { left: calc(50% + 150px); width: min(300px, calc(50% - 166px)); }
  .s2 { right: calc(50% + 150px); top: 100px; width: min(330px, calc(50% - 160px)); }
  .s3 { left: calc(50% + 160px); width: min(280px, calc(50% - 176px)); }
  .stat-glass { right: calc(50% + 168px); bottom: 30px; min-width: 0; max-width: calc(50% - 184px); }
}
/* ≤ 900px: the story reads top-down like a chat — 1 (start), 2 (end), 3 (start) — then the phone rises
   from the bottom edge. Flow layout instead of absolute positions, so nothing covers the phone. */
@media (max-width: 900px) {
  .stage { height: auto; margin-top: 28px; display: grid; padding-inline: 16px; max-width: 640px; }
  .story { position: relative; inset: auto; width: min(88%, 340px); }
  .s1 { justify-self: start; }
  .s2 { justify-self: end; margin-top: 10px; }
  .s3 { justify-self: start; margin-top: 10px; width: min(78%, 290px); }
  .phone { position: relative; left: auto; bottom: auto; transform: none; justify-self: center; margin-top: 22px; margin-bottom: -250px; }
  .stat-glass { display: none; }
}
@media (max-width: 1023px) {
  .nav-links, .nav-sep { display: none; }
  .m-menu { display: block; }
  .m-menu > summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
  .m-menu > summary::-webkit-details-marker { display: none; }
  .m-menu > summary svg { width: 22px; height: 22px; }
  .m-menu[open] > summary { background: rgba(18, 36, 63, .06); }
  .m-panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); display: grid; }
  .m-panel a { padding: 13px 14px; border-radius: 12px; font: 600 16px/1.4 var(--f-b); }
  .m-panel a:hover { background: var(--bg-2); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .c-wide { grid-template-columns: minmax(0, 1fr); padding: 36px; }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .p-copy { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-head { position: static; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-brand { grid-column: 1 / -1; }
  .wall-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-cols .c1 { grid-column: 1; } .wall-cols .c4 { grid-column: 2; }
  .wall-cols .gap, .wall-cols .c2, .wall-cols .c3 { display: none; }
  .wall-cols .col { opacity: .4; }
  .wall-cols .q.dark { background: #fff; color: var(--ink); border-color: rgba(220, 224, 232, .8); }
  .wall-cols .q.dark .qh { color: var(--muted); }
  .wall-center .h2 { background: var(--bg-2); border-radius: 22px; padding: 4px 16px; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .nav { inset-block-start: 12px; padding-inline: 12px; }
  .nav-pill { height: 58px; padding-inline: 14px 6px; }
  .wordmark { font-size: 23px; }
  .nav-login { display: none; }
  .js .nav:not(.past-hero) .nav-cta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .hero { border-end-start-radius: 30px; border-end-end-radius: 30px; }
  .hero-inner { padding-block-start: 112px; gap: 16px; padding-inline: 16px; }
  .display { font-size: clamp(36px, 10.5vw, 46px); }
  .stage { padding-inline: 12px; }
  .phone { width: 236px; height: 492px; margin-bottom: -232px; border-radius: 42px; padding: 9px; }
  .phone-screen { border-radius: 34px; }
  .island { width: 80px; height: 24px; top: 9px; }
  .ls-date { margin-top: 34px; font-size: 13px; }
  .ls-time { font-size: 62px; }
  .ls-notifs { top: 160px; inset-inline: 8px; gap: 6px; }
  .notif { padding: 8px 9px; border-radius: 16px; gap: 8px; }
  .notif .n-ic { width: 28px; height: 28px; border-radius: 8px; }
  .notif .n-ic svg { width: 18px; height: 18px; }
  .n-h { font-size: 11.5px; } .n-h span { font-size: 10.5px; }
  .n-body p { font-size: 11.5px; }
  .lbl { font-size: 13px; padding-inline: 4px 11px; margin-bottom: 7px; }
  .btn-sm, .deck-next, .motion-btn { min-height: 44px; }
  .brand { min-height: 44px; }
  .step-n { width: 22px; height: 22px; font-size: 12px; }
  .card-msg { padding: 11px 12px; border-radius: 16px; }
  .msg-text { font-size: 13.5px; line-height: 1.65; }
  .who { font-size: 13px; margin-bottom: 6px; }
  .av, .av-m { width: 26px; height: 26px; font-size: 12px; }
  .src { font-size: 11.5px; margin-top: 8px; }
  .booked .ok { width: 34px; height: 34px; }
  .booked b { font-size: 14.5px; } .booked > span, .booked ul { font-size: 12.5px; }
  .c-wide, .c-half { padding: 26px 22px; }
  .c-half { padding-bottom: 0; }
  .chart24 { gap: 3px; height: 170px; }
  .chart-brk { font-size: 12px; }
  .chart-brk.b-mid { font-size: 11.5px; }
  .channels { padding-top: 52px; }
  .ch-row { gap: 12px 30px; }
  .ch-row li { flex-direction: column; gap: 8px; font-size: 16px; }
  .ch-tile { width: 42px; height: 42px; border-radius: 13px; }
  .feat-item .vis { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 14px 16px; }
  .vis .fl { position: relative; inset: auto; max-width: none; align-self: flex-start; }
  .vis .fl-b { order: 3; align-self: flex-end; }
  .vis .demo-tag { position: relative; inset: auto; order: 4; align-self: center; }
  .vis .ui { width: 100%; padding: 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step { padding-bottom: 16px; }
  .p-copy { padding: 28px 22px; }
  .p-vis { padding: 26px 18px; }
  .wall { height: 860px; border-radius: 30px; margin-inline: 8px; }
  .deck { height: 262px; }
  .qa { padding: 20px; }
  .plan { padding: 28px 24px 26px; }
  .faq-list summary { font-size: 16.5px; padding: 18px; }
  .faq-list details p { padding: 0 18px 18px; }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer { border-radius: 26px 26px 0 0; }
}
@media (max-width: 480px) {
  .agenda li { grid-template-columns: 58px minmax(0, 1fr); row-gap: 6px; }
  .agenda li .tag, .agenda li .slot { grid-column: 2; justify-self: start; }
  .agenda li.free .slot { width: 100%; }
}
/* Mobile menu: grouped like the desktop panels */
.m-panel { max-height: calc(100vh - 110px); overflow-y: auto; }
.m-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 12px; font: 600 16px/1.4 var(--f-b); cursor: pointer; }
.m-group > summary::-webkit-details-marker { display: none; }
.m-group[open] > summary { background: var(--bg-2); }
.m-group[open] > summary .dd-chev { transform: rotate(180deg); }
.m-panel .m-group > a { display: block; padding: 10px 14px; padding-inline-start: 26px; font: 500 15px/1.5 var(--f-b); color: var(--ink-2); border-radius: 10px; }

/* ── v3 · Trust strip ── */
.trust { list-style: none; margin: 34px auto 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.trust li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: start; }
.trust-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); border: 1px solid var(--cu-100); }
.trust-ic svg { width: 20px; height: 20px; }
.trust-tx { display: grid; gap: 1px; min-width: 0; }
.trust-tx b { font: 600 15px/1.45 var(--f-b); color: var(--ink); }
.trust-tx small { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── v3 · Sales cards: the visual is a sheet anchored to the card's bottom edge ── */
.sheet { border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--card); padding: 18px 18px 16px; box-shadow: 0 -6px 30px color-mix(in srgb, var(--ink) 6%, transparent); }
.sheet .ui-h { margin-bottom: 6px; }
.cm { display: grid; gap: 12px; }
.cm-post { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.cm-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cm-h b { font: 600 14px/1.4 var(--f-b); color: var(--ink); }
.cm-h > span:last-child:not(.ch) { margin-inline-start: auto; font-size: 12.5px; }
.cm-fb { width: 22px; height: 22px; flex: none; }
.cm-c { display: flex; align-items: flex-start; gap: 10px; }
.cm-cb { min-width: 0; padding: 8px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cm-cb b { display: block; font: 600 13px/1.4 var(--f-b); }
.cm-cb p { font-size: 14.5px; line-height: 1.6; }
.cm-ok { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.4 var(--f-b); color: var(--teal-700); }
.cm-ok svg { width: 14px; height: 14px; }
.cm-dm { display: grid; gap: 8px; padding-inline-start: 16px; border-inline-start: 2px dashed var(--line-2); }
.cm-dm .ch { width: 20px; height: 20px; border-radius: 6px; }
.cm-dm .ch svg { width: 13px; height: 13px; }
.cm-bubble { justify-self: start; max-width: 94%; padding: 10px 13px; border-radius: 16px; border-start-start-radius: 5px; background: var(--cu-50); border: 1px solid var(--cu-100); font-size: 14px; line-height: 1.65; }
.pipe { display: grid; gap: 12px; }
.pipe-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pipe-cols li { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); text-align: start; }
.pipe-cols span { font-size: 12.5px; color: var(--muted); }
.pipe-cols b { font: 800 22px/1.2 var(--f-d); color: var(--ink); }
.pipe-cols li.won { background: var(--teal-50); border-color: transparent; }
.pipe-cols li.won b { color: var(--teal-700); }
.pipe-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pipe-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.pipe-list li:first-child { border-top: 0; }
.pl-n { min-width: 0; display: grid; }
.pl-n b { font: 600 14px/1.4 var(--f-b); }
.pl-n span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-qual { background: color-mix(in srgb, var(--cu-500) 11%, transparent); color: var(--cu-700); }
.score { min-width: 34px; height: 26px; padding-inline: 6px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--f-l); background: var(--bg-2); color: var(--ink-2); }
.score.hot { background: #FFEDD5; color: #C2410C; }
.pipe-note { justify-self: end; font: 500 12px/1.4 var(--f-b); color: var(--muted); }
.ui .kb { padding-bottom: 0; }
@media (max-width: 760px) {
  .trust { gap: 10px; }
  .trust li { width: 100%; }
  .pipe-cols b { font-size: 19px; }
  .pipe-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pipe-list li .tag { display: none; }
}

.camp-msg { margin: 2px 0 10px; padding: 10px 13px; border-radius: 16px; border-start-start-radius: 5px; background: var(--cu-50); border: 1px solid var(--cu-100); font-size: 14px; line-height: 1.65; color: var(--ink); }
/* Meta Verified Tech Provider badge: Meta's own blue mark on white, never recoloured */
.trust-meta, .dd-ic-meta { background: #FFFFFF; border-color: var(--line); }
.trust-meta svg { width: 26px; height: 26px; }
.dd-ic-meta svg { width: 22px; height: 22px; }
.meta-t { font-family: var(--f-l); font-weight: 600; letter-spacing: 0; }
.trust-lead { border-color: var(--line-2); }
.meta-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); justify-self: start; }
.meta-badge svg { width: 24px; height: 24px; flex: none; }
.meta-badge > span { display: grid; }
.meta-badge b { font: 600 13.5px/1.35 var(--f-l); color: var(--ink); }
.meta-badge small { font-size: 12px; color: var(--muted); }
/* ── Navigation and inner pages ── */
/* ── Nav: the wordmark folds into the mark on scroll, the trial button slides in, and the menus grow
   down out of the same glass pill. ── */
.mk-dot { fill: var(--mk-dot, var(--ink)); }
.nav-pill { display: block; height: auto; padding: 0; gap: 0; width: min(900px, 100%); overflow: hidden; overflow: clip; transition: background .25s ease, box-shadow .3s ease, border-radius .3s ease; }
.nav-row { display: flex; align-items: center; gap: 6px; height: 64px; padding-inline: 18px 8px; }
.brand { gap: 9px; transition: gap .35s cubic-bezier(.2, .8, .2, 1), padding .35s cubic-bezier(.2, .8, .2, 1); }
.brand .wordmark { display: inline-block; max-width: 110px; overflow: hidden; white-space: nowrap; transition: max-width .38s cubic-bezier(.2, .8, .2, 1), opacity .22s ease; }
.nav.past-hero .brand { gap: 0; padding-inline-end: 6px; }
.nav.past-hero .brand .wordmark { max-width: 0; opacity: 0; }
.nav-links { align-self: stretch; align-items: center; }
.nav-links > a, .dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font: 500 15.5px/1.4 var(--f-b); color: var(--ink-2); transition: background .15s, color .15s; }
.nav-links > a:hover, .dd-btn:hover, .dd.open .dd-btn, .nav-links [aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.dd { display: flex; align-items: center; align-self: stretch; }
.dd-chev { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.dd.open .dd-chev { transform: rotate(180deg); }
.nav-end { gap: 6px; }
.nav-login { border: 1px solid var(--line-2); background: var(--card); padding: 7px 16px; transition: background .25s, border-color .25s; }
.nav.past-hero .nav-login { border-color: transparent; background: transparent; }
.cta-slot { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .42s cubic-bezier(.2, .8, .2, 1); }
.cta-in { min-width: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .42s; }
.nav-cta { white-space: nowrap; opacity: 0; transform: translateX(-14px); transition: opacity .3s ease .08s, transform .42s cubic-bezier(.2, .8, .2, 1); }
.js .nav:not(.past-hero) .nav-cta { visibility: inherit; } /* follow .cta-in, so the hidden button is out of the tab order */
.nav.past-hero .cta-slot { grid-template-columns: 1fr; }
.nav.past-hero .cta-in { visibility: visible; transition-delay: 0s; }
.nav.past-hero .nav-cta { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .cta-slot { grid-template-columns: 1fr; }
html:not(.js) .cta-in { visibility: visible; }
html:not(.js) .nav-cta { opacity: 1; transform: none; }

/* The drop: one glass surface, grows from 0 to its tallest panel; panels share one grid cell and cross-fade. */
.nav-drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.12, .6, .36, .98); contain: inline-size; }
.drop-in { min-height: 0; overflow: hidden; overflow: clip; display: grid; } /* clip, not hidden: a focused link must never scroll the drop */
.nav.open .nav-drop { grid-template-rows: 1fr; }
.nav.open .nav-pill { background: color-mix(in srgb, var(--card) 95%, transparent); border-radius: 24px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 28px 64px color-mix(in srgb, var(--ink) 18%, transparent); }
.dd-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 224px) minmax(0, 1fr) minmax(0, 178px); gap: 12px;
  padding: 2px 10px 12px; text-align: start;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
}
.dd-panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not(.js) .nav-pill:has(.dd[data-dd="product"]:hover, #dd-product:hover) .nav-drop,
html:not(.js) .nav-pill:has(.dd[data-dd="who"]:hover, #dd-who:hover) .nav-drop,
html:not(.js) .nav-pill:has(.dd[data-dd="about"]:hover, #dd-about:hover) .nav-drop { grid-template-rows: 1fr; }
html:not(.js) .nav-pill:has(.dd[data-dd="product"]:hover, #dd-product:hover) #dd-product,
html:not(.js) .nav-pill:has(.dd[data-dd="who"]:hover, #dd-who:hover) #dd-who,
html:not(.js) .nav-pill:has(.dd[data-dd="about"]:hover, #dd-about:hover) #dd-about { opacity: 1; visibility: visible; transform: none; }

/* Preview card: stone, with the hovered item's details on white chips. */
.dd-prev { position: relative; isolation: isolate; overflow: hidden; min-height: 236px; border-radius: 18px; background-image: linear-gradient(180deg, rgba(0, 0, 0, .04) 30%, rgba(0, 0, 0, .34)), url(strata.webp); background-size: cover; background-position: center; }
.dd-prev::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(grain.png); opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.pv { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 14px; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.pv.is-on { opacity: 1; transform: none; }
.pv-cap { margin: 0; color: #FFFFFF; font: 600 13.5px/1.5 var(--f-b); text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.pv-bub { margin: 0; align-self: flex-start; max-width: 92%; padding: 8px 11px; border-radius: 14px; border-start-start-radius: 4px; background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 12.5px; line-height: 1.55; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); }
.pv-bub.out { align-self: flex-end; border-start-start-radius: 14px; border-start-end-radius: 4px; background: var(--cu-50); }
.pv-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink-2); font: 600 11.5px/1.5 var(--f-b); }
.pv-chip.ok { color: var(--teal-700); }
.pv-rows, .pv-slots { display: grid; gap: 6px; }
.pv-rows span, .pv-slots span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--ink); font: 600 12.5px/1.4 var(--f-b); }
.pv-rows em, .pv-slots b { margin-inline-start: auto; font-style: normal; font: 600 11px/1.4 var(--f-b); }
.pv-slots b { margin-inline-start: 0; color: var(--muted); }
.pv-slots span.on { box-shadow: inset 0 0 0 1.5px var(--teal); }
.pv-ok { color: var(--teal-700); } .pv-wait { color: var(--cu-700); }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pv-dot.wa { background: #25D366; } .pv-dot.ms { background: #0A7CFF; } .pv-dot.ig { background: #E1306C; }
.pv-kpis, .pv-stages, .pv-tags { display: grid; gap: 6px; }
.pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-kpis span, .pv-stages span { display: grid; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--muted); font-size: 11.5px; }
.pv-kpis b, .pv-stages b { font: 800 20px/1.2 var(--f-d); color: var(--ink); }
.pv-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-stages .won b { color: var(--teal-700); }
.pv-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-tags span { padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--ink); font: 600 12.5px/1.4 var(--f-b); text-align: center; }
.pv-kb { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 12px; }
.pv-kb b { font: 700 13.5px/1.4 var(--f-b); }
.pv-kb span { color: var(--muted); }
.pv-wave { display: flex; align-items: center; gap: 3px; height: 54px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .95); direction: ltr; }
.pv-wave i { flex: 1; border-radius: 3px; background: var(--cu-500); height: calc(var(--h) * 1%); opacity: .75; }
.pv-meter { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.pv-meter i { display: block; height: 100%; border-radius: inherit; background: #FFFFFF; }
.pv-mark { align-self: flex-start; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 20px; background: rgba(255, 255, 255, .96); }
.pv-svg { width: 44px; height: 44px; }
.pv-meta { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #FFFFFF; }
.pv-meta svg { width: 28px; height: 28px; }
.pv-meta b { font: 600 13px/1.3 var(--f-l); color: #0E1116; }

.dd-mid { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.dd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; }
.dd-list.one { grid-template-columns: minmax(0, 1fr); }
.dd-list a { display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 14px; color: var(--ink); transition: background .15s; }
.dd-list a:hover, .dd-list a:focus-visible { background: var(--bg-2); }
.dd-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); border: 1px solid var(--cu-100); transition: transform .2s ease; }
.dd-list a:hover .dd-ic { transform: scale(1.06); }
.dd-ic svg { width: 18px; height: 18px; }
.dd-ic-meta { background: #FFFFFF; border-color: var(--line); }
.dd-ic-meta svg { width: 22px; height: 22px; }
.dd-tx { min-width: 0; display: grid; gap: 1px; }
.dd-tx b { font: 600 14.5px/1.45 var(--f-b); }
.dd-tx > span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dd-all { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 0; padding: 6px 4px; font: 600 13.5px/1.4 var(--f-b); color: var(--cu-600); }
.dd-all svg { width: 15px; height: 15px; }
.dd-all:hover { color: var(--cu-700); }
.dd-promo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 16px; border-radius: 18px; color: #FFFFFF; text-align: start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cu-500) 55%, var(--ink)) 0%, var(--ink) 75%);
}
.dd-promo::before { content: ""; position: absolute; inset: 0; background: url(strata.webp) center / cover; opacity: .16; mix-blend-mode: screen; pointer-events: none; }
.dd-promo > * { position: relative; }
.dd-promo-k { font: 600 12px/1.5 var(--f-b); color: rgba(255, 255, 255, .78); }
.dd-promo b { font: 800 22px/1.3 var(--f-d); }
.dd-promo > span:not(.dd-promo-k):not(.dd-promo-cta) { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.dd-promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; align-self: flex-start; padding: 6px 12px; border-radius: 10px; background: #FFFFFF; color: var(--ink); font: 600 13px/1.4 var(--f-b); transition: transform .2s ease; }
.dd-promo:hover .dd-promo-cta { transform: translateX(-3px); }
.dd-promo-cta svg { width: 15px; height: 15px; }
@media (max-width: 1023px) {
  .nav-drop { display: none; }
  .nav-pill { width: 100%; overflow: visible; } /* the mobile menu hangs below the pill */
  .cta-slot { grid-template-columns: 1fr; }
  .cta-in { visibility: visible; }
  .nav-cta { opacity: 1; transform: none; pointer-events: auto; }
  .nav.past-hero .brand .wordmark { max-width: 110px; opacity: 1; }
  .nav.past-hero .brand { gap: 9px; }
  .nav-login { display: none; }
}
@media (max-width: 760px) {
  .nav-row { height: 58px; padding-inline: 14px 6px; }
}

/* ── Inner pages (products, use cases, pricing, about, Meta, FAQ) + landing de-boxing ── */
.page-main { padding-block-start: clamp(104px, 11vw, 132px); }
.ph { position: relative; text-align: center; display: grid; justify-items: center; gap: 18px; padding-block-end: 8px; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font: 600 13.5px/1.5 var(--f-b); color: var(--ink-2); }
.ph-eyebrow svg { width: 18px; height: 18px; color: var(--cu-600); }
.ph h1 { margin: 0; font: 800 clamp(36px, 5vw, 64px)/1.22 var(--f-d); text-wrap: balance; max-width: 16ch; }
.ph-sub { max-width: 60ch; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.8; color: var(--ink-2); }
.ph-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 4px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1.4 var(--f-b); color: var(--cu-600); }
.lnk svg { width: 16px; height: 16px; }
.lnk:hover { color: var(--cu-700); }
.ph-vis {
  position: relative; isolation: isolate; overflow: hidden; width: min(1080px, 100%); margin: 36px auto 0;
  min-height: 420px; border-radius: 32px; display: grid; place-items: center; padding: 40px 24px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 60%), url(strata.webp); background-size: cover; background-position: center 40%;
}
.ph-vis::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(grain.png); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
.ph-vis > * { position: relative; }
.ph-vis .ui { width: min(100%, 460px); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); gap: 22px; align-items: start; justify-content: center; width: 100%; }
.duo .ui { width: 100%; }
.badges { list-style: none; margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--ink-2); font: 500 15px/1.5 var(--f-b); }
.badges li { display: inline-flex; align-items: center; gap: 8px; }
.badges svg { width: 18px; height: 18px; color: var(--teal-700); }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.psec { padding-block: clamp(64px, 8vw, 112px); }
.psec-head { display: grid; justify-items: center; gap: 16px; text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 52px); }
.psec-head .lead { max-width: 60ch; }
.k { font: 600 13px/1.5 var(--f-b); letter-spacing: 0; color: var(--cu-600); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; max-width: 900px; margin: 0 auto; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.flow-step { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font: 600 14.5px/1.45 var(--f-b); text-align: center; }
.flow-step svg { width: 20px; height: 20px; flex: none; color: var(--cu-600); }
.flow-step.mid { background: var(--cu-50); color: var(--cu-700); }
.flow-arr { width: 22px; height: 22px; color: var(--muted); transform: scaleX(-1); }

.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.frow + .frow { margin-top: clamp(56px, 7vw, 96px); }
.frow.flip .frow-vis { order: -1; }
.frow-copy { display: grid; gap: 14px; justify-items: start; }
.frow-copy h3 { margin: 0; font: 800 clamp(26px, 2.8vw, 38px)/1.3 var(--f-d); text-wrap: balance; }
.frow-copy h3 span { color: var(--cu-500); display: block; }
.frow-copy > p { color: var(--ink-2); font-size: 17px; line-height: 1.85; max-width: 52ch; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.65; }
.checks svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--teal-700); }
.frow-vis { position: relative; isolation: isolate; overflow: hidden; min-height: 400px; border-radius: 30px; display: grid; place-items: center; padding: 28px 22px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)), url(strata.webp); background-size: cover; background-position: center; }
.frow-vis::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(grain.png); opacity: .25; mix-blend-mode: overlay; pointer-events: none; }
.frow-vis > * { position: relative; }
.frow-vis .ui { width: min(100%, 420px); }

.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: st; }
.steps3 li { counter-increment: st; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.steps3 li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: #FFFFFF; font: 700 15px/1 var(--f-l); }
.steps3 b { font: 700 19px/1.4 var(--f-d); }
.steps3 span { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }

.pfaq { max-width: 820px; margin: 0 auto; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Cards (products index, use cases, related) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 1180px) { .cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 8 items fill two full rows */
.pcard { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
.pcard:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-1); }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-k { font: 600 12px/1.5 var(--f-b); color: var(--muted); }
.pcard-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); border: 1px solid var(--cu-100); }
.pcard-ic svg { width: 20px; height: 20px; }
.pcard h2, .pcard h3 { margin: 0; font: 700 20px/1.4 var(--f-d); }
.pcard p { color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.pcard-more { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font: 600 14px/1.4 var(--f-b); color: var(--cu-600); }
.pcard-more svg { width: 16px; height: 16px; }
.pcard-tags { font-size: 13px; color: var(--muted); }
/* minmax(0, 1fr): an auto track grew to the search input's intrinsic width (Arabic font: 3px past a 360px screen) */
.finder { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; margin: 0 auto 30px; }
.finder-in { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); height: 48px; padding-inline: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); }
.finder-in svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.finder-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15.5px/1.4 var(--f-b); color: var(--ink); }
.chips-f { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips-f button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font: 600 14px/1.4 var(--f-b); color: var(--ink-2); }
.chips-f button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.finder-count { font-size: 13.5px; color: var(--muted); }
.pcard[hidden] { display: none; }

/* Document pages (Meta, about) */
.doc { max-width: 780px; margin: 0 auto; }
.doc h2 { margin: 48px 0 12px; font: 800 clamp(22px, 2.4vw, 28px)/1.4 var(--f-d); }
.doc p { color: var(--ink-2); font-size: 17px; line-height: 1.9; }
.doc p + p { margin-top: 10px; }
.doc ol, .doc ul { margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 16.5px; line-height: 1.8; }
.doc ol li::marker { color: var(--cu-600); font-weight: 700; }
.doc .note-box { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--cu-50); border: 1px solid var(--cu-100); color: var(--ink); font-size: 15.5px; line-height: 1.8; }
.doc hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line-2); }
.doc .links { list-style: none; padding: 0; }
.doc .links a { color: var(--cu-600); font-weight: 600; }
/* Inline, not flex: when a link wraps, its arrow follows the last word instead of floating at the column's end. */
.doc .links svg { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-inline-start: 7px; }
.meta-hero { display: grid; justify-items: center; gap: 16px; text-align: center; }
.meta-lock { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.meta-lock svg { width: 34px; height: 34px; }
.meta-lock b { font: 700 18px/1.3 var(--f-l); color: #0E1116; }

/* Ask AI */
.ask { max-width: 780px; margin: 32px auto 0; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); text-align: start; }
.ask-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ask-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cu-50); color: var(--cu-600); }
.ask-ic svg { width: 20px; height: 20px; }
.ask h2 { margin: 0; font: 700 18px/1.4 var(--f-d); }
.ask p { margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.ask-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ask-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); font: 600 15px/1.2 var(--f-l); color: var(--ink); transition: border-color .15s, background .15s, transform .2s; }
.ask-btn:hover { border-color: var(--cu-300); background: var(--card); transform: translateY(-1px); }
.ask-btn svg { width: 14px; height: 14px; color: var(--muted); }
.ask-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ask-dot.gpt { background: #0E1116; } .ask-dot.claude { background: #D97757; } .ask-dot.gemini { background: #4285F4; } .ask-dot.pplx { background: #20808D; }

/* CTA band */
.band { padding-block: 0 clamp(80px, 9vw, 120px); }
.band-in { width: min(1200px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: clamp(28px, 4vw, 44px); border-radius: 30px; background: var(--ink); color: #FFFFFF; }
.band-in h2 { margin: 0; font: 800 clamp(26px, 3vw, 38px)/1.3 var(--f-d); }
.band-in p { margin-top: 6px; color: rgba(255, 255, 255, .8); }
.band-in .btn-ink { background: #FFFFFF; color: var(--ink); }
.band-in .btn-ink .arr { background: var(--ink); color: #FFFFFF; }

/* Pricing page */
.ptable-wrap { overflow-x: auto; contain: paint; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.ptable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.ptable th, .ptable td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.ptable thead th { font: 700 16px/1.4 var(--f-d); background: var(--bg); }
.ptable tbody th { font-weight: 600; color: var(--ink); }
.ptable td { color: var(--ink-2); }
.ptable .yes svg { width: 18px; height: 18px; color: var(--teal-700); }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: 0; }
.ptable .rec { background: color-mix(in srgb, var(--cu-500) 5%, transparent); }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
.terms div { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.terms b { display: block; font: 700 17px/1.4 var(--f-d); margin-bottom: 6px; }
.terms p { color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }

/* Industry pages */
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qcard { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.qcard .b-in, .qcard .b-out { max-width: 100%; }

/* Landing: fewer boxes */
#sales .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sales .card { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 30px 26px 0; } /* .c-wide centres its children: the chart then shrinks to min-content */
#sales .card-copy p { font-size: 16px; }
#sales .c-wide { grid-column: auto; padding-bottom: 26px; }
#sales .c-wide .chart { margin-top: auto; padding-top: 44px; }
#sales .c-wide .chart24 { height: 170px; gap: 3px; }
#sales .c-wide .chart-brk { font-size: 12px; }
#sales .c-wide .chart-brk.b-mid { font-size: 11.5px; }
#sales .vis-in { margin-top: auto; }
.trust { gap: 0; }
.trust li { border: 0; background: transparent; padding: 6px 20px; border-radius: 0; }
.trust li + li { border-inline-start: 1px solid var(--line-2); }
.trust-lead { border-color: transparent; }
.faq-list details { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; margin: 0; }
.faq-list details:first-child { border-top: 1px solid var(--line-2); }
.faq-list details[open] { box-shadow: none; border-color: var(--line-2); }
.faq-list summary { padding: 20px 4px; border-radius: 0; }
.faq-list details p { padding: 0 4px 22px; }
.feat-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 15px/1.4 var(--f-b); color: var(--cu-600); }
.feat-more svg { width: 15px; height: 15px; }
.industries a { padding: 6px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font: 500 14.5px/1.4 var(--f-b); color: var(--ink-2); transition: border-color .15s, color .15s; }
.industries a:hover { border-color: var(--line-2); color: var(--ink); }

@media (max-width: 1023px) {
  .frow { grid-template-columns: minmax(0, 1fr); }
  .frow.flip .frow-vis { order: 0; }
  .cards, .related, .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  #sales .bento { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-arr { transform: rotate(90deg); justify-self: center; }
  .duo { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  /* tablet: the three trust items stay one row (their text wraps) — wrapped onto a second line, the third one led
     with a stray separator */
  .trust { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: center; }
  .trust li { padding-inline: 14px; }
}
@media (max-width: 760px) {
  .cards, .related, .qgrid, .terms { grid-template-columns: minmax(0, 1fr); }
  .ask-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-vis { min-height: 0; padding: 22px 14px; border-radius: 24px; }
  .frow-vis { min-height: 0; padding: 20px 14px; border-radius: 24px; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust li { padding: 8px 4px; width: 100%; }
  .trust li + li { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .band-in .btn { width: 100%; }
}

/* Components used by the inner-page vignettes */
.faq-group + .faq-group { margin-top: 44px; }
.faq-g { max-width: 820px; margin: 0 auto 10px; font: 800 22px/1.4 var(--f-d); }
.seg-row { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 12px; background: var(--bg-2); font: 600 12.5px/1.4 var(--f-b); color: var(--ink-2); overflow: hidden; }
.seg-row span { flex: 1; padding: 6px 8px; border-radius: 9px; text-align: center; white-space: nowrap; }
.seg-row span.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.seg-row b { color: var(--cu-700); }
.push-card { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.push-card b { display: block; font: 600 13.5px/1.4 var(--f-b); }
.push-card span:not(.n-ic) { font-size: 12.5px; color: var(--muted); }
.ag-list { list-style: none; margin: 0; padding: 0; }
.ag-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--line); font-size: 14.5px; }
.ag-list time { font: 600 13.5px/1 var(--f-b); color: var(--muted); }
.ag-list .who-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-list li.free .who-s { color: var(--muted); }
.ag-list li.free .slot { height: 26px; border-radius: 8px; border: 1.5px dashed var(--line-2); }
.ag-list li.hl { background: color-mix(in srgb, var(--teal) 8%, transparent); border-radius: 10px; }
.rem-k { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.rem-k span { display: inline-flex; align-items: center; gap: 6px; }
.rem-k svg { width: 15px; height: 15px; color: var(--teal-700); }
.quote-note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.corr { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.corr + .corr { margin-top: 8px; }
.corr b { font: 600 14px/1.5 var(--f-b); }
.corr span { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.corr em { font-style: normal; font-size: 12px; color: var(--muted); }
.switch.off { background: var(--line-2); }
.switch.off::after { inset-inline-end: auto; inset-inline-start: 4px; }
.aud { display: flex; gap: 6px; margin-bottom: 10px; }
.aud span { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); font: 600 12.5px/1.4 var(--f-b); color: var(--ink-2); }
.aud span.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.aud-f { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aud-f span { padding: 4px 10px; border-radius: 999px; background: var(--cu-50); color: var(--cu-700); font: 500 12px/1.5 var(--f-b); }
.pace-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pace-set div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.pace-set b { font: 600 12.5px/1.4 var(--f-b); color: var(--muted); }
.pace-set span { font: 700 15px/1.4 var(--f-d); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li { position: relative; display: grid; gap: 2px; padding: 10px 0; padding-inline-start: 18px; border-top: 1px solid var(--line); }
.tl li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--cu-500); }
.tl li:first-child { border-top: 0; }
.tl b { font: 600 13.5px/1.5 var(--f-b); }
.tl span { font-size: 12.5px; color: var(--muted); }
.ph-vis .demo-tag, .frow-vis .demo-tag { position: absolute; inset-block-end: 14px; inset-inline-start: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .col { animation: none !important; }
}

/* ── Production additions (mujib.ai) ──────────────────────────────────────────────────────────────
   Appended to the design stylesheet by scripts/landing/port-wadi.cjs. Everything below exists only
   on the live site: the language link, the contact row landing.js fills, struck list prices, the
   Enterprise band, the fair-use footnote, multi-paragraph FAQ answers and the affiliate page. */

/* An element hidden by the HTML attribute stays hidden, whatever display a component gives it
   (landing.js and the affiliate form only ever toggle `hidden`). */
[hidden] { display: none !important; }

/* Language link (one URL per language: the English twin, or /en/) */
.nav-end .lang-toggle { display: inline-flex; }
.nav-lang { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 10px; font: 600 13.5px/1 var(--f-l); letter-spacing: .02em; color: var(--ink-2); transition: background .15s, color .15s; }
.nav-lang:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.m-panel .lang-toggle { display: grid; }
/* At menu widths the row's own EN link goes; the menu's «English» (inside .m-menu, so not a direct
   child of .nav-end) stays — it is the phone's only language switch above the footer. */
@media (max-width: 1023px) {
  .nav-end > .lang-toggle { display: none; }
}

/* Footer contact row (filled by landing.js from its CONTACT constant; hidden while it is empty).
   landing.js renders an .en/.ar pair; the Arabic pages show only the Arabic half. */
html[lang="ar"] [data-contact-row] .en { display: none; }
.f-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; }
.f-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--cu-700); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.f-contact svg { width: 18px; height: 18px; flex: none; }
.f-legal .lang-toggle a { text-decoration: none; font-family: var(--f-l); font-weight: 600; }

/* Plans: list price struck through when the founding offer is on (hidden otherwise) */
.plan .plan-for { margin: -8px 0 0; font-size: 14.5px; color: var(--muted); }
.plan .price s { font: 700 22px/1 var(--f-d); color: var(--muted); }
.plan .fig { font-weight: 700; color: var(--ink); }
.ptable s { margin-inline-start: 6px; font-size: 13px; color: var(--muted); }
.ptable small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.ptable .cta-row td { padding-block: 16px; }
.ptable .cta-row .btn { min-height: 40px; padding-inline: 14px; font-size: 14.5px; border-radius: 12px; }
.ptable .cta-row .btn-white { border: 1px solid var(--line-2); box-shadow: none; }
.plan-ent { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; max-width: 1080px; margin: 22px auto 0; padding: 26px 32px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.plan-ent h3 { margin: 0 0 4px; font: 700 21px/1.4 var(--f-d); }
.plan-ent p { max-width: 62ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.plan-ent-end { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.plan-ent-price { font: 800 24px/1.2 var(--f-d); }
.trial-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; max-width: 860px; margin: 26px auto 0; padding: 14px 20px; border-radius: 16px; background: var(--cu-50); border: 1px solid var(--cu-100); color: var(--ink); font-size: 15.5px; line-height: 1.7; text-align: center; }
.trial-note svg { width: 18px; height: 18px; flex: none; color: var(--cu-600); }
.fair-note { max-width: 780px; margin: 14px auto 0; text-align: center; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.fair-note a { color: var(--cu-700); text-decoration: underline; text-underline-offset: 3px; }
a.fn { color: var(--cu-700); font-weight: 700; padding-inline: 1px; }
.ph-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ph-chip { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font: 600 13.5px/1.5 var(--f-b); color: var(--ink-2); }
.ph-chip.on { border-color: var(--cu-200); color: var(--cu-700); }
@media (max-width: 760px) {
  .plan-ent { padding: 24px 22px; }
  .plan-ent-end, .plan-ent-end .btn { width: 100%; }
}

/* FAQ answers with more than one paragraph */
.faq-list .faq-a p:not(:last-child) { padding-bottom: 10px; }
.faq-head a { color: var(--cu-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Affiliate programme ── */
.ph-note { font-size: 14.5px; color: var(--muted); }
.bounty { display: grid; justify-items: center; gap: 10px; max-width: 640px; margin: 0 auto; padding: clamp(28px, 4vw, 40px); border-radius: var(--r-xl); background: var(--card); border: 2px solid var(--cu-500); box-shadow: var(--sh-2); text-align: center; }
.bounty-k { font: 600 14px/1.5 var(--f-b); color: var(--cu-700); }
.bounty-n { display: flex; align-items: baseline; gap: 10px; }
.bounty-n b { font: 800 clamp(56px, 7vw, 76px)/1 var(--f-d); }
.bounty-n span { font-size: 18px; color: var(--muted); }
.bounty p { max-width: 52ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.aff-how { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.aff-how .steps3 { grid-template-columns: minmax(0, 1fr); }
.aff-link { display: grid; gap: 14px; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.aff-link .k { color: var(--muted); }
.link-demo { padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line-2); font: 600 15px/1.4 var(--f-l); color: var(--ink-2); text-align: left; overflow-wrap: anywhere; }
.link-demo b { color: var(--cu-600); }
.aff-flow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--teal-50); color: var(--teal-700); font: 600 13.5px/1.5 var(--f-b); }
.aff-flow i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.aff-link p { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.aff-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.aff-who article { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.aff-who h3 { margin: 0; font: 700 18px/1.45 var(--f-d); }
.aff-who p { color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pay .psec-head { justify-items: start; text-align: start; margin: 0; }
.pay .h2 { font-size: clamp(30px, 3.4vw, 46px); }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pay-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.pay-list svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--teal-700); }
.pay-list b { color: var(--ink); }
.aff-form-wrap { max-width: 620px; margin: 0 auto; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.aff-form { display: grid; gap: 18px; }
.fld { display: grid; gap: 6px; }
.fld label { font: 600 15px/1.5 var(--f-b); color: var(--ink); }
.fld label small { font-weight: 500; color: var(--muted); }
.fld input, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); font: 500 16px/1.5 var(--f-b); color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input[dir="ltr"] { text-align: left; }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--cu-500); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cu-500) 18%, transparent); }
.fld[data-invalid] input, .fld[data-invalid] textarea { border-color: #C2410C; }
.fld .hint { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.fld .hint a { color: var(--cu-700); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.fld .err { font: 600 13.5px/1.6 var(--f-b); color: #B42318; }
.form-alert { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; font: 600 14.5px/1.7 var(--f-b); }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aff-form .btn { width: 100%; }
.aff-form .btn[disabled] { opacity: .6; cursor: progress; }
.form-legal { font-size: 13.5px; line-height: 1.7; color: var(--muted); text-align: center; }
.form-legal a { color: var(--cu-700); font-weight: 600; }
.aff-done { display: grid; justify-items: center; gap: 12px; padding: 12px 0; text-align: center; }
.aff-done:focus { outline: 0; }
.aff-done .tick-round { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); }
.aff-done .tick-round svg { width: 28px; height: 28px; }
.aff-done h3 { margin: 0; font: 800 24px/1.4 var(--f-d); }
.aff-done p { max-width: 46ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.aff-done a { color: var(--cu-700); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
@media (max-width: 1023px) {
  .aff-how, .pay { grid-template-columns: minmax(0, 1fr); }
  .aff-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .aff-who { grid-template-columns: minmax(0, 1fr); }
}

/* ── Review fixes (2026-10-06): focus, the question wall, the phone table, demo labels ── */

/* The trial button sits in a clipper (.cta-in, overflow:hidden for its slide-in) that cuts off the global
   focus ring, which is drawn outside the element — so this one is drawn inside the button. */
.nav-cta:focus-visible { outline: 3px solid var(--cu-500); outline-offset: -3px; box-shadow: inset 0 0 0 5px #fff; }

/* Use-case search: the input drops its own outline, so the field's frame shows the focus. */
.finder-in:focus-within { border-color: var(--cu-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cu-500) 18%, transparent); }

/* Question wall, 1024–1399px: with two 200px card columns a side the centre track is narrower than the
   heading and the deck (440px), which then sit on the cards. 1260–1399px: narrower columns (centre ≥ 455px);
   1024–1259px: one column a side (centre ≥ 500px). */
@media (min-width: 1260px) and (max-width: 1399px) {
  .wall-cols { grid-template-columns: repeat(2, minmax(0, 160px)) minmax(0, 1fr) repeat(2, minmax(0, 160px)); }
}
@media (min-width: 1024px) and (max-width: 1259px) {
  .wall-cols { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px); }
  .wall-cols .c1 { grid-column: 1; } .wall-cols .gap { grid-column: 2; } .wall-cols .c4 { grid-column: 3; }
  .wall-cols .c2, .wall-cols .c3 { display: none; }
}

/* Pricing table on a phone: wider than the screen, so a line says so and the edge that still has
   columns behind it is shaded (the shade scrolls away at that end: background-attachment local). */
.ptable-hint { display: none; }
.ptable-wrap:focus-visible { outline-offset: 2px; }
@media (max-width: 760px) {
  .ptable-hint { display: block; margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-align: center; }
  .ptable-wrap {
    background:
      linear-gradient(to right, var(--card) 40%, transparent) left center / 44px 100% no-repeat local,
      linear-gradient(to left, var(--card) 40%, transparent) right center / 44px 100% no-repeat local,
      linear-gradient(to right, rgba(16, 24, 48, .18), transparent) left center / 16px 100% no-repeat scroll,
      linear-gradient(to left, rgba(16, 24, 48, .18), transparent) right center / 16px 100% no-repeat scroll,
      var(--card);
  }
}

/* Agenda mocks: the booking the mock exists to show wraps instead of being cut mid-word. */
.agenda .who-s, .ag-list .who-s { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }

/* «عرض توضيحي» on the fictional scenes that had no label (hero story, bento vignettes, nav previews). */
.demo-chip { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line); font: 500 12px/1.5 var(--f-b); color: var(--ink-2); white-space: nowrap; }
.vis-in > .demo-chip { display: flex; margin: 0 0 10px; margin-inline-start: auto; }
/* Above the phone, never on its status bar: the phone's top is the stage height − 498px (height clamp(520px, 44vw,
   600px), bottom −112px, 610px tall), so below ~1290px the note rises with it, into the stage's top margin. */
.stage > .stage-note { position: absolute; top: min(40px, calc(clamp(520px, 44vw, 600px) - 534px)); left: 50%; z-index: 4; transform: translateX(-50%); }
.dd-prev-note { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; }
@media (max-width: 900px) {
  .stage > .stage-note { position: static; transform: none; justify-self: center; margin-bottom: 14px; }
}
.chart-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: start; }

/* Founding offer on the home hero: hidden unless the admin switches the offer on (landing.js). */
.hero-offer { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--cu-50); border: 1px solid var(--cu-200); color: var(--cu-700); font: 600 14px/1.5 var(--f-b); }
.hero-offer svg { width: 14px; height: 14px; }
.mini-stats b.rtl { direction: rtl; }

/* App icon = the owner's pick №8 «ورقة بيضا وكوبالت» (2026-10-06): a paper tile carrying the full-colour A2
   mark, so the notification mocks show the same icon the phone shows. The markup still says fill="#fff";
   CSS beats the presentation attribute, and #cuG is the page's A2 gradient. */
.n-ic:not(.n-wa) { background: linear-gradient(170deg, #FFFFFF 0%, #F4F6FC 55%, #E5EBFA 100%); box-shadow: inset 0 0 0 1px rgba(15, 34, 128, .12); }
.n-ic:not(.n-wa) svg use { fill: url(#cuG); }

/* ── «اربط رقمك» (how-it-works step 1): the two real ways in, side by side (2026-10-06) ──
   The phone shows the 8-character link code (typed into WhatsApp on that same phone), the computer shows
   the QR — the same order as the steps beside it, so in RTL the phone comes first. The QR is a real, valid
   code for https://mujib.ai/ (scripts/landing/make-pair-qr.cjs), drawn at a whole number of pixels per
   module (41 modules with the quiet zone: 4px → 164, 3px → 123) so every module is the same crisp size.
   On desktop the figure stays inside the panel's 460px min-height: changing step never moves the page. */
.pair { --ph-w: 150px; --ph-h: 284px; --qr: 164px; --or: 32px; --gap: 14px; margin: 0; display: grid; justify-items: center; gap: 14px; }
.pair-row {
  display: grid; grid-template-columns: var(--ph-w) var(--or) auto; grid-template-areas: "ph or win" "lp . lw";
  align-items: center; justify-content: center; column-gap: var(--gap); row-gap: 12px;
}
.pair-phone {
  grid-area: ph; width: var(--ph-w); height: var(--ph-h); padding: 6px; border-radius: 34px;
  background: linear-gradient(150deg, #2B3242, #0E1116 60%, #1A2030);
  box-shadow: 0 24px 48px rgba(14, 22, 52, .24), 0 4px 12px rgba(14, 22, 52, .16), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.pp-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 34px 10px 14px;
  background: linear-gradient(180deg, #FFFFFF, #F3F6FC); text-align: center;
}
.pp-island { position: absolute; top: 8px; left: 50%; width: 46px; height: 14px; transform: translateX(-50%); border-radius: 10px; background: #0E1116; }
.pp-head { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1.3 var(--f-d); color: var(--ink); }
.pp-head svg { width: 16px; height: 16px; flex: none; }
.pp-k { margin-top: 10px; font: 500 11.5px/1.4 var(--f-b); color: var(--muted); }
.pp-code { direction: ltr; display: grid; grid-template-columns: repeat(4, auto); gap: 5px 4px; }
.pp-code span {
  width: 26px; height: 33px; display: grid; place-items: center; border-radius: 8px;
  background: #fff; border: 1.5px solid var(--cu-200); box-shadow: 0 1px 2px rgba(16, 22, 40, .06);
  font: 700 16px/1 var(--f-l); color: var(--cu-900);
}
.pp-demo { padding: 1px 8px; border-radius: 999px; background: #EEF1F6; font: 500 10.5px/1.6 var(--f-b); color: var(--ink-2); }
.pp-hint { margin-top: auto; font: 500 11px/1.6 var(--f-b); color: var(--muted); }
.pp-hint b { display: block; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pair-or {
  grid-area: or; justify-self: center; width: var(--or); height: var(--or); border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  font: 600 12.5px/1 var(--f-b); color: var(--muted);
}
.pair-win { grid-area: win; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.pw-bar { position: relative; display: flex; align-items: center; gap: 5px; height: 28px; padding-inline: 10px; direction: ltr; background: #F4F6FA; border-bottom: 1px solid var(--line); }
.pw-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pw-url { position: absolute; left: 50%; transform: translateX(-50%); padding: 0 9px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font: 500 10.5px/16px var(--f-l); color: var(--muted); white-space: nowrap; }
.pw-body { display: grid; justify-items: center; gap: 10px; padding: 14px 20px 13px; }
.pair-qr { width: var(--qr); height: var(--qr); }
.pw-wait { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.4 var(--f-b); color: var(--cu-700); }
.pw-wait i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--cu-500); }
.pw-wait i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cu-500); animation: pulse 2s infinite ease-out; }
.motion-off .pw-wait i::after { animation: none; opacity: 0; }
.pair-lbl { align-self: start; display: grid; justify-items: center; gap: 1px; font: 400 12.5px/1.5 var(--f-b); color: var(--muted); text-align: center; }
.pair-lbl b { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1.5 var(--f-b); color: var(--ink); white-space: nowrap; }
.pair-lbl svg { width: 15px; height: 15px; flex: none; color: var(--cu-600); }
.pl-phone { grid-area: lp; }
.pl-win { grid-area: lw; }
.pair .qr-cap { margin: 0; }
/* Phone widths: the same scene, one step smaller (3px a module). Below 1024px the panel is one column and
   the visual's content box is the viewport minus 70px, so these are media queries on purpose (same result
   as container queries, in every browser): the desktop scene is 416px wide, so it needs a 486px viewport;
   the phone step is 313px, so it needs 383px. */
@media (max-width: 485px) {
  .pair { --ph-w: 122px; --ph-h: 244px; --qr: 123px; --or: 26px; --gap: 8px; }
  .pair-phone { padding: 5px; border-radius: 28px; }
  .pp-screen { border-radius: 23px; gap: 6px; padding: 28px 7px 11px; }
  .pp-island { top: 7px; width: 38px; height: 12px; }
  .pp-head { font-size: 11px; gap: 5px; }
  .pp-head svg { width: 13px; height: 13px; }
  .pp-k { margin-top: 4px; font-size: 10.5px; }
  .pp-code { gap: 4px; }
  .pp-code span { width: 21px; height: 27px; border-radius: 6px; font-size: 13.5px; }
  .pp-demo { font-size: 10px; }
  .pp-hint { font-size: 10px; line-height: 1.55; }
  .pair-or { font-size: 11.5px; }
  .pw-bar { height: 22px; padding-inline: 8px; gap: 4px; }
  .pw-bar i { width: 6px; height: 6px; }
  .pw-url { font-size: 9.5px; line-height: 14px; padding: 0 6px; }
  .pw-body { gap: 8px; padding: 10px 12px; }
  .pw-wait { font-size: 11px; }
  .pair-lbl { font-size: 12px; }
  .pair-lbl b { font-size: 12.5px; }
}
/* Narrowest phones (iPhone SE / mini, 360px Androids): the «أو» chip gives its column back. */
@media (max-width: 382px) {
  .pair { --ph-w: 108px; --ph-h: 228px; --or: 0px; --gap: 10px; }
  .pair-or { display: none; }
  .pp-code { gap: 4px 3px; }
  .pp-code span { width: 19px; height: 25px; font-size: 12.5px; }
  .pw-body { padding: 10px; }
}

/* ── English (LTR) layer — landing/en/** (2026-10-06) ─────────────────────────────────────────────────
   The design is authored right-to-left. Nearly all of it is already written in logical properties (inline-start/
   end, text-align: start, grid and flex order), so it mirrors by itself under <html lang="en" dir="ltr">. What is
   left lives here, scoped to html[dir="ltr"] / html[lang="en"] so the Arabic pages are untouched:
     · type: Inter for text (Latin, with IBM Plex Sans Arabic behind it for the odd Arabic word), Alexandria for
       headings, figures and the wordmark — the brand's display face, whose Latin cut is the same geometry;
       Latin gets tighter leading and slight negative tracking where Arabic gets none;
     · the few physical left/right placements (the hero story around the phone, its stat card);
     · gradients and nudges that run toward the reading end (the wordmark starts bright at the reading start);
     · the arrow: the English sprite (scripts/landing/en-parts.cjs) draws #i-arrow pointing right, so only the
       #i-flow arrow, which the Arabic CSS mirrors, needs un-mirroring here. */
html[lang="en"] {
  --f-b: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-d: "Alexandria", "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-l: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[lang="en"] body { line-height: 1.65; }
html[lang="en"] .display { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.07; letter-spacing: -.03em; text-wrap: balance; }
html[lang="en"] .h2 { line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
html[lang="en"] .finale .h2 { line-height: 1.08; }
html[lang="en"] .h3 { line-height: 1.32; letter-spacing: -.01em; }
html[lang="en"] :is(.ph h1, .p-copy h3, .frow-copy h3, .band-in h2, .doc h2, .aff-done h3, .faq-g) { line-height: 1.14; letter-spacing: -.022em; }
html[lang="en"] :is(.step b, .plan h3, .plan-ent h3, .terms b, .pcard h2, .pcard h3, .steps3 b, .aff-who h3, .f-col h3, .ui-h, .toggle-big b, .booked b, .dd-promo b) { letter-spacing: -.01em; }
html[lang="en"] :is(.plan .price b, .stat-glass b, .mini-stats b, .pv-kpis b, .pv-stages b, .pipe-cols b, .bounty-n b, .plan-ent-price) { letter-spacing: -.02em; }
html[lang="en"] :is(.lead, .hero-sub, .ph-sub, .card-copy p, .feat-item > p, .p-copy p, .frow-copy > p, .doc p, .faq-list details p,
  .terms p, .plan-ent p, .plan-note, .fair-note, .trial-note, .bounty p, .aff-who p, .aff-link p, .pay-list li, .aff-done p, .f-brand p,
  .steps3 span, .step span, .pcard p, .checks li, .msg-text, .q p, .b-in, .b-out, .b-staff, .bubble-a, .cm-bubble, .camp-msg, .fine) { line-height: 1.6; }
html[lang="en"] .faq-list summary { line-height: 1.45; }
html[lang="en"] .wordmark { letter-spacing: -.01em; }
html[dir="ltr"] .wordmark { background-image: url(grain.png), linear-gradient(to right, #2E5CFF 0%, #1E43D8 45%, var(--mk-dot) 100%); }
html[dir="ltr"] .ph-eyebrow { padding: 6px 16px 6px 14px; }
/* The odd Arabic word on an English page (the language link, a bilingual demo bubble) */
html[lang="en"] :lang(ar) { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: 0; }
html[lang="en"] [data-contact-row] .ar { display: none; }

/* The hero story: 1 and 3 on the reading-start side of the phone, 2 and the stat card on the other */
html[dir="ltr"] .s1 { left: auto; right: calc(50% + 178px); }
html[dir="ltr"] .s2 { right: auto; left: calc(50% + 178px); }
html[dir="ltr"] .s3 { left: auto; right: calc(50% + 196px); }
html[dir="ltr"] .stat-glass { right: auto; left: calc(50% + 206px); }
/* English runs longer: step 2 starts higher, so its taller reply clears the stat card below it */
html[lang="en"] .s2 { top: 104px; }
@media (max-width: 1180px) {
  html[dir="ltr"] .s1 { right: calc(50% + 150px); }
  html[dir="ltr"] .s2 { left: calc(50% + 150px); }
  html[lang="en"] .s2 { top: 72px; }
  html[dir="ltr"] .s3 { right: calc(50% + 160px); }
  /* the card shrinks to fit the space beside the phone: keep a 16px gutter inside the hero's rounded edge */
  html[dir="ltr"] .stat-glass { left: calc(50% + 168px); max-width: calc(50% - 184px); }
}
/* Below 1100px the English stat card no longer fits beside step 2 (its caption is a third longer than the Arabic) */
@media (max-width: 1100px) {
  html[lang="en"] .stat-glass { display: none; }
}
@media (max-width: 900px) {
  html[dir="ltr"] .story { inset: auto; }
}

/* Gradients and hover nudges toward the reading end */
html[dir="ltr"] .agenda li.new { background: linear-gradient(to right, rgba(16, 185, 129, .08), transparent); }
html[dir="ltr"] .dd-promo:hover .dd-promo-cta { transform: translateX(3px); }
html[dir="ltr"] .flow-arr { transform: none; }
@media (max-width: 1023px) {
  html[dir="ltr"] .flow-arr { transform: rotate(90deg); }
}

/* Latin runs longer than Arabic at the same size: headings a step smaller, paragraphs without orphans */
html[lang="en"] .h2 { font-size: clamp(30px, 4vw, 54px); }
html[lang="en"] .finale .h2 { font-size: clamp(34px, 4.6vw, 62px); }
html[lang="en"] .wall-center .h2 { font-size: clamp(30px, 3.6vw, 48px); }
html[lang="en"] :is(p, .lead, .hero-sub, .ph-sub) { text-wrap: pretty; }

/* «Link your number»: the WhatsApp menu name is longer in English, so the hint may wrap; the head stays one line */
html[lang="en"] .pp-head { font-size: 12px; white-space: nowrap; letter-spacing: -.005em; }
html[lang="en"] .pp-hint b { white-space: normal; }
@media (max-width: 485px) {
  html[lang="en"] .pp-head { font-size: 10.5px; }
}
@media (max-width: 382px) {
  /* the 84px screen: the words alone, clear of the bezel */
  html[lang="en"] .pp-head { font-size: 10.5px; }
  html[lang="en"] .pp-head svg { display: none; }
  /* one line each, a step smaller, centred on its column even where it is wider than the 108px phone */
  html[lang="en"] .pair-lbl { justify-self: center; font-size: 11.5px; }
  html[lang="en"] .pair-lbl b { font-size: 11.5px; gap: 5px; }
}
/* The trial note runs to two lines in English: the tick stays beside the text instead of above it */
html[lang="en"] .trial-note { flex-wrap: nowrap; text-align: start; }
html[lang="en"] .trial-note > span { min-width: 0; }
/* The hero story labels: Latin at 15px would wrap step 2 onto two lines in its 330px card */
html[lang="en"] .lbl { font-size: 14px; }
@media (max-width: 760px) {
  html[lang="en"] .lbl { font-size: 13px; }
}

/* The question wall: the business type ellipsizes before it can push the time onto two lines */
html[lang="en"] .q .qk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="en"] .q .qh time { flex: none; white-space: nowrap; }
/* In the two-column phone wall the time would leave the business type three letters ("Nutr…"): the type wins */
@media (max-width: 760px) {
  html[lang="en"] .q .qh time { display: none; }
}
/* The evening band of the 24-hour chart is 4 hours wide: "After hours" a step smaller, on two lines where needed */
html[lang="en"] .chart-brk.b-end { font-size: 11.5px; line-height: 1.15; }

/* The menus share the height of the tallest (Product, two columns): the one-column lists of the shorter ones spread
   their rows over it instead of leaving an empty band above "All industries" / "About the company". */
html[lang="en"] .dd-list.one { align-content: space-between; }

/* Three plan cards side by side: the one-line and two-line «for whom» lines keep the prices level */
@media (min-width: 1024px) {
  html[lang="en"] .plans .plan-for { min-height: 3em; line-height: 1.5; }
  /* The booking card in the three-up sales row is narrow: the tags sit under the name (in Arabic too — beside it,
     the name column shrank to one word a line between 1024 and ~1300px) */
  #sales .agenda li { grid-template-columns: 70px minmax(0, 1fr); row-gap: 5px; }
  #sales .agenda li .tag, #sales .agenda li .slot { grid-column: 2; justify-self: start; }
  #sales .agenda li.free .slot { width: 100%; }
}

/* The agenda mocks (.ag-list, /en/products/bookings): "Booked by the agent" is about twice as wide as «حجزها الوكيل»,
   so in the 330px hero card the tag sits under the name and the free slot's dashed box fills the row beside "Free". */
html[lang="en"] .ag-list li { grid-template-columns: 74px minmax(0, 1fr); row-gap: 6px; }
html[lang="en"] .ag-list li .tag { grid-column: 2; justify-self: start; }
html[lang="en"] .ag-list li.free { grid-template-columns: 74px auto minmax(0, 1fr); }

/* The inbox tabs mock (.seg-row: All · Needs human 3 · Open 17 · Closed, on /en/products/inbox and /handoff) is wider
   in English than in Arabic; below 400px a tighter row keeps its card inside the frame. */
@media (max-width: 400px) {
  html[lang="en"] .seg-row { font-size: 11.5px; }
  html[lang="en"] .seg-row span { padding-inline: 5px; }
}