/* ==========================================================================
   ORA COMMERCE — marketing site
   One stylesheet, two directions. Every offset is a logical property, so the
   Arabic pages under /ar mirror correctly from the same rules.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
/* ORA brand package v1.0 (docs/Brand Package V1.0/tokens.css) is the source of
   truth. Navy #061432 primary, teal #18C3B4 accent. The site is dark-only, so
   the values below are the DARK set from packages/portal-kit/src/portal.css —
   deliberately the same numbers, so the marketing site and the dashboard a
   visitor signs into are one system rather than two near-misses.
   Withdrawn and never to return: #5B8CFF / #8B6BFF / #2E5BD8 (Spark Blue and
   its violet), #4274D9, #F2C57C. */
:root {
  /* canvas — the brand's own navy layers: navy, navy-800, navy-700 */
  --bg:          #061432;
  --bg-2:        #0B1F45;
  --bg-3:        #12305F;
  --panel:       rgba(255, 255, 255, 0.035);
  --panel-2:     rgba(255, 255, 255, 0.06);
  --line:        rgba(255, 255, 255, 0.09);
  --line-2:      rgba(255, 255, 255, 0.16);

  /* ink */
  --ink:         #E9EEF7;
  --ink-2:       #C6D2E4;
  --muted:       #A8B6CC;
  --faint:       #7C8AA5;

  /* brand. TWO colours: navy and teal. `--brand-2` is the accent at a lighter
     tint (portal-kit's dark `--accent-strong`), not a second hue — it exists so
     a gradient has somewhere to travel. */
  --brand:       #18C3B4;
  --brand-2:     #3ED6C9;
  --brand-deep:  #12A899;
  --gold:        #E8A33D;   /* --ora-warning */
  /* The package sets success = the accent teal. Kept distinct here for the same
     reason portal.css diverged in light mode: this page is covered in teal call
     to action buttons, and a "yes" tick in the CTA colour stops meaning "yes".
     Flagged, not silently diverged — see the handoff's open questions. */
  --green:       #46CE85;
  --rose:        #E58877;   /* --danger, dark-mode tint */

  /* Alpha channels want the components, not the hex. One place to repaint. */
  --brand-rgb:   24 195 180;
  --brand-2-rgb: 62 214 201;
  --green-rgb:   70 206 133;
  --gold-rgb:    232 163 61;
  --rose-rgb:    229 136 119;
  /* Ink ON the accent is NAVY, not white: teal against white is ~2.1:1 and
     fails AA outright; against navy it is ~9:1. Every filled teal surface —
     button, pill, tab, toggle — therefore reads dark-on-teal. */
  --on-brand:    #061432;

  --grad:        linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  --grad-soft:   linear-gradient(135deg, rgb(var(--brand-rgb) / .16), rgb(var(--brand-2-rgb) / .16));

  /* type */
  --font-display: "Archivo", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Archivo", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;

  /* metrics */
  --shell:   1180px;
  --gutter:  clamp(20px, 5vw, 40px);
  --radius:  18px;
  --radius-s: 12px;
  --ease:    cubic-bezier(.22, 1, .36, 1);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 18px 50px -18px rgba(0,0,0,.75);
  --shadow-3: 0 40px 90px -30px rgba(0,0,0,.85);
  --glow:     0 0 0 1px rgb(var(--brand-rgb) / .35), 0 18px 60px -20px rgb(var(--brand-rgb) / .45);
}

/* Arabic pages get the Arabic face first in both stacks. */
:root:lang(ar), [dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Archivo", ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  /* `clip`, not `hidden`. Decorative layers (the aurora, the hero's orbit rings)
     deliberately extend past the viewport, and with `hidden` the document became
     a horizontal scroll container: in RTL that shifted the whole page sideways by
     the overflow amount. `clip` trims the same pixels without ever creating a
     scroll box, so nothing moves and nothing scrolls sideways. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: 0; line-height: 1.35; }

::selection { background: rgb(var(--brand-rgb) / .35); color: #fff; }

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

.sr {
  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: absolute; inset-inline-start: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--brand); color: var(--on-brand);
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  z-index: 200; transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* --------------------------------------------------------------- 3. layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 820px; }

.section { padding-block: clamp(64px, 9vw, 118px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 78px); }
.section--alt { background: var(--bg-2); }
.section--deep {
  background:
    radial-gradient(80% 120% at 50% 0%, rgb(var(--brand-rgb) / .10), transparent 60%),
    var(--bg-2);
}
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Atmosphere: three slow-drifting auroras behind the whole page.
   The alphas are roughly HALF what the blue identity used. Teal is far more
   saturated than #5B8CFF, and at the old .42/.34/.24 three blurred 60vw discs
   turned the whole canvas cyan — the navy stopped being the primary colour,
   which inverts the brand. Faint enough to read as atmosphere, not as ground. */
.aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  animation: drift 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(1) {
  width: 62vw; height: 62vw; inset-block-start: -22vw; inset-inline-start: -12vw;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / .22), transparent 68%);
}
.aurora i:nth-child(2) {
  width: 54vw; height: 54vw; inset-block-start: -8vw; inset-inline-end: -16vw;
  background: radial-gradient(circle, rgb(var(--brand-2-rgb) / .18), transparent 68%);
  animation-duration: 32s; animation-delay: -8s;
}
.aurora i:nth-child(3) {
  width: 48vw; height: 48vw; inset-block-start: 58vh; inset-inline-start: 30vw;
  background: radial-gradient(circle, rgb(var(--brand-2-rgb) / .14), transparent 70%);
  animation-duration: 38s; animation-delay: -16s;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4vw, 6vh, 0) scale(1.14); }
}

/* a faint engineering grid, faded out at the edges */
.grid-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
}

/* ------------------------------------------------------------------ 4. nav */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-block-end: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.nav[data-stuck="true"] {
  background: rgba(6,20,50,.82);
  backdrop-filter: blur(16px) saturate(1.3);
  border-block-end-color: var(--line);
}
.nav-in {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px;
}
/* The brand link is just a hit area — the lockup inside it comes from
   ora-motion.css, the brand package's own stylesheet. THE WORDMARK IS ONE INK:
   never colour ORA and COMMERCE differently, because the mark's three navy
   corners and one teal corner already carry that story. */
.brand { display: inline-flex; align-items: center; flex: none; }
/* This site is dark, so the lockup runs reversed everywhere: white corners, the
   teal accent corner unchanged. `--ora-sheen-ink` follows, or the nav wordmark
   fades to navy-on-navy when the sheen lands — see ora-motion.css. */
.brand .ora-logo { color: #fff; --ora-sheen-ink: #FFFFFF; }

/* The brand book's responsive lockup: primary horizontal at ≥1024, mark + ORA
   from 720, mark only below. Dropping parts is how the lockup gets narrower —
   the MARK never shrinks, so it never crosses its own 16px floor.
   Scoped to the nav. The footer is a full-width block with room for the primary
   lockup at any viewport; this rule is for a bar running out of width. */
@media (max-width: 1023px) { .nav .ora-logo__sub  { display: none; } }
@media (max-width: 719px)  { .nav .ora-logo__text { display: none; } }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin-inline-start: 22px; flex: 1 1 auto;
}
.nav-links a {
  padding: 9px 13px; border-radius: 9px; font-size: 14.5px;
  color: var(--ink-2); font-weight: 500;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--panel-2); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-side { display: flex; align-items: center; gap: 10px; flex: none; }
/* The "Start free" link that lives INSIDE the collapsed menu. Hidden on desktop,
   where the same call to action sits in the bar.
   Two class names on purpose: `.btn` also sets `display`, is declared later in
   this file, and at equal specificity later wins — a single-class rule here left
   a second "Start free" sitting in the middle of the desktop nav. */
/* The colour is here, not left to `.btn--primary`: `.nav-links a` is (0,2,1) and
   beats the button's (0,1,0), so the CTA inside the collapsed menu was drawing
   its label in `--ink-2`. Harmless when that was pale text on blue; not harmless
   now that the fill is teal, where anything but navy fails AA. */
.nav-links .nav-links-cta { display: none; color: var(--on-brand); }

.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  font-size: 13.5px; font-weight: 500;
  transition: border-color .2s, color .2s, background .2s;
}
.lang:hover { border-color: var(--line-2); color: var(--ink); background: var(--panel); }

/* The full primary glow leaks past the header edge and reads as a smudge on the
   band below. In the bar the button gets a contained shadow instead. */
.nav-cta.btn--primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 4px 14px -6px rgb(var(--brand-rgb) / .7);
}
.nav-cta.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px -8px rgb(var(--brand-rgb) / .85);
}

.burger {
  display: none; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel);
  align-items: center; justify-content: center; cursor: pointer;
}
.burger span {
  display: block; width: 17px; height: 1.6px; background: var(--ink);
  box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink);
}

/* --------------------------------------------------------------- 5. button */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 11px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad); color: var(--on-brand);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 32px -12px rgb(var(--brand-rgb) / .85);
}
.btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 20px 46px -14px rgb(var(--brand-rgb) / .95); }

.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--panel); }
.btn--ghost:hover { border-color: rgba(255,255,255,.3); background: var(--panel-2); }

.btn--quiet { color: var(--ink-2); padding-inline: 10px; }
.btn--quiet:hover { color: var(--ink); }

.btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 13px; }
.btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 9px; }
.btn--block { width: 100%; }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
[dir="rtl"] .btn .arw { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(3px); }

/* ----------------------------------------------------------------- 6. type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
  margin-block-end: 18px;
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.eyebrow::before {
  content: ""; width: 20px; height: 1px; background: currentColor; opacity: .6;
}

.h-xl { font-size: clamp(38px, 6.2vw, 70px); }
.h-lg { font-size: clamp(30px, 4.2vw, 47px); }
.h-md { font-size: clamp(23px, 2.6vw, 31px); }
.h-sm { font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; }

.lead {
  font-size: clamp(17px, 1.5vw, 19.5px);
  color: var(--ink-2); line-height: 1.62; max-width: 62ch;
}
.muted { color: var(--muted); }
.tiny { font-size: 13.5px; color: var(--faint); }

/* The highlight travels white → light teal → teal. Two stops of ONE hue, not
   two hues: the brand is navy and teal, and a headline is not the place to
   invent a third colour. */
.grad-text {
  background: linear-gradient(100deg, #fff 8%, var(--brand-2) 46%, var(--brand) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.head { max-width: 720px; margin-block-end: clamp(36px, 5vw, 60px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head .lead { margin-block-start: 18px; }

/* ----------------------------------------------------------------- 7. hero */
.hero { padding-block: clamp(56px, 9vw, 104px) clamp(50px, 7vw, 90px); position: relative; }
.hero-in { max-width: 860px; }
.hero h1 { margin-block-end: 22px; }
.hero .lead { font-size: clamp(17.5px, 1.7vw, 21px); }

.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-block-start: 34px;
}
.hero-note {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-block-start: 22px; font-size: 14px; color: var(--muted);
}
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }

/* On a wide screen the hero carries the product beside the promise. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 62px); align-items: center;
}
.hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.hero-grid .hero-in { max-width: 660px; }
/* The two-column hero gives the headline less room than a full-bleed one, so it
   gets its own ceiling rather than inheriting .h-xl's 70px. */
.hero-grid h1 { font-size: clamp(30px, 3.2vw, 44px); }
/* 44px, not 54: the positioning copy runs to three authored lines and at the
   larger size the last one wrapped, turning a three-line headline into five
   ragged ones. Three clean lines read bigger than five broken ones. */
.hero-media { position: relative; }
/* The badges hang OFF the frame, above and below it, rather than floating over
   the panel. Percentage positions were landing on the KPI figures, and the row
   they landed on moved between locales because the copy is a different height —
   anchoring to the frame edges is correct in both. */
.hero-media .float--a {
  inset-block-start: auto; inset-block-end: -20px;
  inset-inline-start: 4%; inset-inline-end: auto;
}
.hero-media .float--b {
  inset-block-start: -20px; inset-block-end: auto;
  inset-inline-end: 4%; inset-inline-start: auto;
}
.hero-media .mock { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
[dir="rtl"] .hero-media .mock { transform: perspective(1400px) rotateY(6deg) rotateX(2deg); }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .hero-in { max-width: 680px; }
  .hero-media .mock,
  [dir="rtl"] .hero-media .mock { transform: none; }
}

/* the ranked to-do list inside a mock */
.todo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.todo li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 13px 14px; background: var(--bg-3);
}
.todo-ico {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.todo b { display: block; font-size: 13.5px; font-weight: 600; }
.todo i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-block-start: 2px; }

/* trust strip */
.strip {
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  padding-block: 20px; overflow: hidden;
}
.strip-in { display: flex; gap: 44px; align-items: center; white-space: nowrap; }
.strip-track {
  display: flex; gap: 44px; align-items: center;
  animation: slide 34s linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .strip-track { animation-direction: reverse; }
.strip-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--muted); font-weight: 500;
}
.strip-item svg { color: var(--brand); opacity: .85; }

/* ---------------------------------------------------------------- 8. cards */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .35s var(--ease);
}
.card--hover:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--brand-rgb) / .35);
  box-shadow: var(--shadow-2);
}
.card h3 { margin-block-end: 9px; }
.card p { color: var(--ink-2); font-size: 15.5px; }

.ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid rgb(var(--brand-rgb) / .28);
  color: var(--brand);
  margin-block-end: 18px;
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.ticks { display: grid; gap: 11px; margin-block-start: 18px; }
.ticks li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; color: var(--ink-2);
}
.ticks svg { flex: none; margin-block-start: 4px; color: var(--green); }

/* value / outcome numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-2); padding: 26px 22px; }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em;
  background: linear-gradient(100deg, #fff, var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; font-size: 14px; color: var(--muted); margin-block-start: 6px; }

/* split feature rows */
.split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 70px); align-items: center;
}
.split--flip .split-media { order: -1; }

/* the "5 tools vs 1" comparison */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.versus-col { border-radius: var(--radius); border: 1px solid var(--line); padding: 24px; }
.versus-col--old { background: rgb(var(--rose-rgb) / .05); border-color: rgb(var(--rose-rgb) / .2); }
.versus-col--new { background: linear-gradient(180deg, rgb(var(--brand-rgb) / .12), rgb(var(--brand-2-rgb) / .06)); border-color: rgb(var(--brand-rgb) / .4); box-shadow: var(--shadow-2); }
.versus-col h3 { font-size: 18px; }
.versus-col .tiny { margin-block-start: 4px; }
.versus-list { display: grid; gap: 10px; margin-block-start: 18px; }
.versus-list li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; color: var(--ink-2); padding-block: 8px; border-block-end: 1px dashed var(--line); }
.versus-list li:last-child { border: 0; }
.versus-list b { font-variant-numeric: tabular-nums; color: var(--ink); }
.versus-total { display: flex; justify-content: space-between; align-items: baseline; margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.versus-total b { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.versus-mid { display: grid; place-items: center; }
.versus-mid span {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--muted);
}

/* steps */
.steps { counter-reset: s; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.step { position: relative; padding-block-start: 30px; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--brand);
}
.step::after {
  content: ""; position: absolute; inset-block-start: 10px; inset-inline-start: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.step h3 { font-size: 19px; margin-block: 12px 8px; }
.step p { color: var(--ink-2); font-size: 15px; }

/* ------------------------------------------------------- 9. product mockup */
/* A browser-chrome frame that holds a hand-built UI, so the product visual
   stays crisp at any zoom instead of being a raster screenshot. */
.mock {
  /* The mock is a container, so its internals reflow to the frame's own width
     rather than to the viewport — the hero copy beside it makes the frame much
     narrower than the page. */
  container-type: inline-size;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  box-shadow: var(--shadow-3), 0 0 0 1px rgb(var(--brand-rgb) / .12);
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: rgba(255,255,255,.045);
  border-block-end: 1px solid var(--line);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mock-url {
  margin-inline-start: 10px; flex: 1;
  font-size: 11.5px; color: var(--faint);
  background: rgba(0,0,0,.3); border-radius: 6px;
  padding: 4px 10px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mock-body { padding: 18px; display: grid; gap: 14px; }

.m-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.m-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.m-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.m-kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 11px; padding: 13px; }
.m-kpi i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
:lang(ar) .m-kpi i { letter-spacing: 0; text-transform: none; }
.m-kpi b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-block-start: 5px; font-variant-numeric: tabular-nums; }
.m-kpi em { font-style: normal; font-size: 11.5px; color: var(--green); }
.m-kpi em.dn { color: var(--rose); }

.m-chart { height: 132px; display: flex; align-items: flex-end; gap: 7px; padding: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; }
.m-chart i {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--brand), rgb(var(--brand-rgb) / .25));
  transform-origin: bottom; animation: grow 1.1s var(--ease) backwards;
}
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.m-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.m-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-3); font-size: 13.5px; }
.m-item span:first-child { color: var(--brand); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.m-item .ch { color: var(--faint); font-size: 12px; }
.pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill--ok { background: rgb(var(--green-rgb) / .14); color: var(--green); }
.pill--wait { background: rgb(var(--gold-rgb) / .14); color: var(--gold); }
.pill--new { background: rgb(var(--brand-rgb) / .16); color: var(--brand); }

@container (max-width: 500px) {
  .mock-body { padding: 14px; gap: 12px; }
  .m-title { font-size: 15px; }
  .m-kpis { gap: 8px; }
  .m-kpi { padding: 10px; }
  .m-kpi i { font-size: 9px; }
  .m-kpi b { font-size: 16.5px; }
  .m-kpi em { font-size: 10.5px; }
  .m-chart { height: 104px; padding: 11px; gap: 5px; }
  .m-item { grid-template-columns: auto 1fr auto; gap: 9px; padding: 10px 12px; font-size: 12.5px; }
  .m-item .ch { display: none; }
  .pill { font-size: 10px; padding: 3px 7px; }
  .todo li { padding: 11px 12px; gap: 10px; }
  .todo b { font-size: 12.5px; }
  .todo i { font-size: 11.5px; }
}

/* channel badges floating over the mock */
.mock-wrap { position: relative; }
.float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(11,31,69,.9); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  font-size: 13.5px; font-weight: 500;
  animation: bob 5s var(--ease) infinite alternate;
}
.float svg { color: var(--brand); }
.float--a { inset-block-start: 16%; inset-inline-start: -22px; }
.float--b { inset-block-end: 22%; inset-inline-end: -26px; animation-delay: -2.5s; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ------------------------------------------------------------- 10. pricing */
.toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  margin-inline: auto; margin-block-end: 38px;
}
.toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background .25s var(--ease), color .25s;
}
.toggle button[aria-pressed="true"] { background: var(--grad); color: var(--on-brand); }
.toggle .save { font-size: 11.5px; color: var(--green); font-weight: 700; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .35s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.plan--best {
  border-color: rgb(var(--brand-rgb) / .55);
  background: linear-gradient(180deg, rgb(var(--brand-rgb) / .16), rgb(var(--brand-2-rgb) / .05));
  box-shadow: var(--glow);
}
.plan--best::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: var(--grad); opacity: .35; filter: blur(14px);
}
.plan-tag {
  position: absolute; inset-block-start: -11px; inset-inline-start: 22px;
  background: var(--grad); color: var(--on-brand);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
:lang(ar) .plan-tag { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.plan-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
:lang(ar) .plan-name { letter-spacing: 0; text-transform: none; font-size: 15px; }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin-block: 14px 4px; }
.plan-price b {
  font-family: var(--font-display); font-size: 42px; font-weight: 700;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: 14px; color: var(--muted); }
/* Descriptions run to three lines at some widths. A shared floor keeps the four
   call-to-action buttons on one line across the row, which is what makes the
   plans readable as a comparison rather than four unrelated cards. */
.plan-desc { font-size: 14.5px; color: var(--ink-2); min-height: 5.4em; }
@media (max-width: 1040px) { .plan-desc { min-height: 3.6em; } }
@media (max-width: 620px)  { .plan-desc { min-height: 0; } }
.plan .btn { margin-block: 20px 18px; }
.plan-feats { display: grid; gap: 10px; font-size: 14px; }
.plan-feats li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); }
.plan-feats svg { flex: none; margin-block-start: 4px; color: var(--brand); }
.plan-feats .from { color: var(--faint); }

/* comparison table.
   `min-width: 0` is load-bearing: the table inside declares min-width 720px, and
   without this the wrapper's min-content width wins in a grid or flex parent —
   the legal pages' 240px + 1fr grid stretched to 720px and the page clipped. */
.tbl-wrap {
  overflow-x: auto; min-width: 0; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  overscroll-behavior-x: contain;
}
.legal-grid > *, .prose, .split > *, .shell > *, .contact-grid > * { min-width: 0; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
table.cmp th, table.cmp td { padding: 14px 16px; text-align: start; border-block-end: 1px solid var(--line); }
/* Not sticky: the wrapper scrolls horizontally, so a `top: 0` header sticks to
   the PAGE and slides underneath the fixed nav instead of staying with its table. */
table.cmp thead th {
  background: var(--bg-3); font-family: var(--font-display); font-size: 13px;
  font-weight: 600; color: var(--ink);
}
table.cmp tbody th { font-weight: 500; color: var(--ink-2); }
table.cmp td { text-align: center; color: var(--ink-2); }
table.cmp .grp td, table.cmp .grp th {
  background: rgba(255,255,255,.03); font-family: var(--font-display);
  font-weight: 600; color: var(--ink); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
:lang(ar) table.cmp .grp th { letter-spacing: 0; text-transform: none; }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-block-end: 0; }
table.cmp .yes { color: var(--green); }
table.cmp .no { color: var(--faint); }
table.cmp tbody tr:hover td, table.cmp tbody tr:hover th { background: rgb(var(--brand-rgb) / .05); }

/* add-ons / upsell row */
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.addon { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 22px; background: rgba(255,255,255,.02); }
.addon b { font-family: var(--font-display); font-size: 16px; }
.addon .price { color: var(--brand); font-weight: 600; font-size: 14px; margin-block-start: 3px; }
.addon p { font-size: 14.5px; color: var(--ink-2); margin-block-start: 10px; }

/* ----------------------------------------------------------------- 11. faq */
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
details.q {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--panel); overflow: hidden;
  transition: border-color .25s, background .25s;
}
details.q[open] { border-color: rgb(var(--brand-rgb) / .35); background: rgb(var(--brand-rgb) / .05); }
details.q summary {
  cursor: pointer; list-style: none; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-inline-end: 1.8px solid var(--muted); border-block-end: 1.8px solid var(--muted);
  transform: rotate(45deg); transition: transform .28s var(--ease); margin-block-start: -4px;
}
details.q[open] summary::after { transform: rotate(225deg); margin-block-start: 4px; }
details.q .a { padding: 0 20px 20px; color: var(--ink-2); font-size: 15.5px; max-width: 72ch; }

/* -------------------------------------------------------------- 12. quotes */
.quote {
  border-inline-start: 2px solid var(--brand);
  padding-inline-start: 22px; max-width: 64ch;
}
.quote p { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 25px); font-weight: 500; line-height: 1.45; }
.quote cite { display: block; margin-block-start: 14px; font-style: normal; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ 13. cta */
.cta {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: clamp(38px, 6vw, 68px);
  text-align: center;
  border: 1px solid rgb(var(--brand-rgb) / .35);
  background:
    radial-gradient(90% 140% at 50% 0%, rgb(var(--brand-rgb) / .28), transparent 62%),
    linear-gradient(180deg, rgb(var(--brand-2-rgb) / .12), rgba(6,20,50,.5));
  box-shadow: var(--shadow-3);
}
.cta h2 { margin-block-end: 16px; }
.cta .lead { margin-inline: auto; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-block-start: 30px; }
.cta::after {
  content: ""; position: absolute; inset-block-start: -50%; inset-inline-start: -20%;
  width: 60%; height: 200%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: rotate(18deg); animation: sweep 7s var(--ease) infinite;
}
@keyframes sweep {
  0%, 62% { transform: translateX(-40%) rotate(18deg); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}

/* --------------------------------------------------------------- 14. footer */
.footer { border-block-start: 1px solid var(--line); background: var(--bg-2); padding-block: 56px 30px; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-block-start: 14px; max-width: 34ch; }
.footer h4 {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-block-end: 14px; font-weight: 600;
}
:lang(ar) .footer h4 { letter-spacing: 0; text-transform: none; font-size: 14px; }
.footer nav { display: grid; gap: 10px; }
.footer nav a { color: var(--ink-2); font-size: 14.5px; transition: color .2s; }
.footer nav a:hover { color: var(--brand); }
.footer-mail {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 18px; color: var(--brand);
  font-size: 14.5px; font-weight: 500;
  transition: opacity .2s;
}
.footer-mail:hover { opacity: .8; }

.social { display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 18px; }
.social a {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  transition: color .2s, background .25s, border-color .2s, transform .2s var(--ease);
}
.social a:hover {
  color: var(--on-brand); background: var(--grad);
  border-color: transparent; transform: translateY(-2px);
}

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  margin-block-start: 44px; padding-block-start: 24px; border-block-start: 1px solid var(--line);
  font-size: 13.5px; color: var(--faint);
}
.footer-bottom nav { display: flex; gap: 18px; }

/* ---- the capability grid: ten small tiles, read as one system ---- */
.caps {
  display: grid; gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cap {
  /* `start`, not the default stretch: the tiles are equal height but their body
     copy is not, and stretching distributed the slack between the rows — every
     title landed on a different baseline across the row. */
  display: grid; gap: 7px; align-content: start; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: transform .28s var(--ease), border-color .25s, background .25s;
}
.cap:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--brand-rgb) / .38);
  background: linear-gradient(180deg, rgb(var(--brand-rgb) / .13), rgb(var(--brand-2-rgb) / .04));
}
.cap-ico { color: var(--brand); }
.cap b { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.cap-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

@media (max-width: 1100px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .caps { grid-template-columns: 1fr; } }

/* ---- the scale narrative: first store on the left, fifth market on the right ---- */
.scale {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  align-items: start;
}
.scale-col {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.scale-col--big {
  border-color: rgb(var(--brand-rgb) / .4);
  background: linear-gradient(180deg, rgb(var(--brand-rgb) / .13), rgb(var(--brand-2-rgb) / .04));
  box-shadow: var(--shadow-2);
}
.scale-tag {
  display: inline-block; margin-block-end: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); padding: 4px 10px; border-radius: 999px;
  background: rgb(var(--brand-rgb) / .14); border: 1px solid rgb(var(--brand-rgb) / .28);
}
:lang(ar) .scale-tag { letter-spacing: 0; text-transform: none; font-size: 13px; }
.scale-col > p { margin-block-start: 10px; font-size: 15px; color: var(--ink-2); }
/* The dashed arrow between the two states reads left-to-right, so it flips in RTL. */
.scale-arrow {
  position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  transform: translate(-50%, -50%); width: 74px; color: var(--faint);
  z-index: 2; pointer-events: none;
}
[dir="rtl"] .scale-arrow { transform: translate(50%, -50%) scaleX(-1); }
@media (max-width: 900px) {
  .scale { grid-template-columns: 1fr; }
  .scale-arrow { display: none; }
}

/* ------------------------------------------------- 14b. added components */

/* scroll progress — a hairline that reports how far down the page you are */
.scroll-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px;
  z-index: 120; pointer-events: none;
}
.scroll-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--grad);
  box-shadow: 0 0 12px rgb(var(--brand-rgb) / .8);
  transition: width .1s linear;
}

/* the small green tick beside a hero note */
.tick-dot { display: inline-grid; place-items: center; color: var(--green); }

/* rotating rings behind the hero mock */
.orbit { position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none; }
.orbit i {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  border: 1px solid rgb(var(--brand-rgb) / .16);
  animation: spin 34s linear infinite;
}
.orbit i:nth-child(2) {
  inset: 12%; border-color: rgb(var(--brand-2-rgb) / .14);
  animation-duration: 46s; animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* page-top band on every page that is not the home page */
.page-hero { padding-block: clamp(52px, 8vw, 92px) clamp(20px, 3vw, 34px); }
.page-hero-title { max-width: 18ch; }
.page-hero-lead { margin-block-start: 20px; }
:lang(ar) .page-hero-title { max-width: 22ch; }

/* two-column tick list, for the long channel feature lists */
.ticks--two { grid-template-columns: 1fr 1fr; gap: 11px 26px; }
@media (max-width: 720px) { .ticks--two { grid-template-columns: 1fr; } }

/* the Ora pull-quote on the home page */
.ai-quote {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-block-start: 26px; padding: 22px 26px;
  border: 1px solid rgb(var(--brand-rgb) / .28); border-radius: var(--radius);
  background: linear-gradient(100deg, rgb(var(--brand-rgb) / .10), rgb(var(--brand-2-rgb) / .04));
}
.ai-quote p {
  flex: 1 1 320px; margin: 0;
  font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500; line-height: 1.45;
}
.ai-quote-mark { color: var(--brand); flex: none; }

/* mirrored language cards */
.mirror-card { padding: 20px; }
.mirror-label { margin-block-end: 14px; }
.m-item.mirror-row { grid-template-columns: 1fr auto; }
.m-item.mirror-row > span:first-child {
  color: var(--ink-2); font-family: var(--font-body); font-size: 13.5px;
}
.m-item.mirror-row b { font-variant-numeric: tabular-nums; }

/* ---- tabs (platform page) ---- */
.tabs { --tab-pad: 22px; }
.tablist {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); margin-block-end: 22px;
}
.tab {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  padding: 11px 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--muted);
  transition: background .25s var(--ease), color .2s;
  flex: 1 1 auto; justify-content: center;
}
.tab:hover { color: var(--ink); background: var(--panel-2); }
.tab[aria-selected="true"] { background: var(--grad); color: var(--on-brand); box-shadow: 0 10px 26px -12px rgb(var(--brand-rgb) / .8); }
.tabpanel { animation: fadeUp .45s var(--ease); }
.tabpanel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tabpanel-in {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 38px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
@media (max-width: 860px) { .tabpanel-in { grid-template-columns: 1fr; } }

/* ---- Ora page ---- */
.pillar {
  display: grid; gap: 8px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  transition: transform .3s var(--ease), border-color .25s, background .25s;
}
.pillar:hover { transform: translateY(-4px); border-color: rgb(var(--brand-rgb) / .4); background: rgb(var(--brand-rgb) / .07); }
.pillar .ico { margin-block-end: 6px; }
.pillar b { font-family: var(--font-display); font-size: 16.5px; }
.pillar > span:last-child { font-size: 14px; color: var(--ink-2); }

.ask { gap: 16px; }
.ask-q {
  align-self: flex-end; margin-inline-start: auto;
  max-width: 84%; padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--grad); color: var(--on-brand); font-size: 14.5px; font-weight: 500;
}
[dir="rtl"] .ask-q { border-radius: 14px 14px 14px 4px; }
.ask-a { display: flex; gap: 12px; align-items: flex-start; }
.ask-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: var(--brand);
  background: var(--grad-soft); border: 1px solid rgb(var(--brand-rgb) / .3);
}
.ask-a p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.ask-src {
  margin-block-start: 10px; font-size: 12px; color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* the answer types itself in once, then stays put */
.ask-typing {
  overflow: hidden;
  animation: reveal-text 2.4s steps(90, end) .3s backwards;
}
@keyframes reveal-text { from { max-height: 0; opacity: .2; } to { max-height: 400px; opacity: 1; } }

.rank { display: grid; gap: 2px; }
.rank-row {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px 0; border-block-end: 1px solid var(--line);
}
.rank-row:last-child { border: 0; }
.rank-n {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--brand); letter-spacing: .08em; padding-block-start: 3px;
}
.rank-row b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.rank-row p { font-size: 14.5px; color: var(--ink-2); margin-block-start: 5px; }

.risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .risks { grid-template-columns: 1fr; } }
.risk {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.risk b { display: block; font-family: var(--font-display); font-size: 17px; margin-block: 14px 8px; }
.risk p { font-size: 14.5px; color: var(--ink-2); }
.risk-tag {
  display: inline-block; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 6px;
}
.risk-tag--r0 { background: rgb(var(--green-rgb) / .15); color: var(--green); }
.risk-tag--r1 { background: rgb(var(--brand-rgb) / .16); color: var(--brand); }
.risk-tag--r2 { background: rgb(var(--gold-rgb) / .16); color: var(--gold); }
.risk-note { max-width: 68ch; margin-block-start: 22px; }

.log-tbl td, .log-tbl th { text-align: start; }
.log-tbl code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--brand);
}
.log-detail { color: var(--muted); font-size: 13.5px; }

.dial-card {
  border: 1px solid rgb(var(--brand-rgb) / .3); border-radius: var(--radius);
  padding: 28px; text-align: center;
  background: radial-gradient(80% 100% at 50% 0%, rgb(var(--brand-rgb) / .16), transparent 65%), var(--bg-3);
}
.dial-card .ico { margin-inline: auto; }
.dial-card b { display: block; font-family: var(--font-display); font-size: 17px; margin-block-end: 18px; }
.dial {
  display: inline-flex; gap: 4px; padding: 5px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.3);
}
.dial-step {
  border: 0; cursor: pointer; background: transparent;
  padding: 9px 18px; border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700;
  color: var(--muted); transition: background .25s var(--ease), color .2s;
}
.dial-step[aria-pressed="true"] { background: var(--grad); color: var(--on-brand); }
.dial-card p { margin-block-start: 18px; min-height: 60px; max-width: 42ch; margin-inline: auto; }

.limits { display: grid; gap: 12px; }
.limits li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--panel);
  font-size: 15.5px; color: var(--ink-2);
}
.limits li span { flex: none; color: var(--brand); }

/* ---- about facts ---- */
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; }
.facts > div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 18px 22px; background: var(--bg-2); }
.facts dt { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
:lang(ar) .facts dt { letter-spacing: 0; text-transform: none; font-size: 14px; }
.facts dd { margin: 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 620px) { .facts > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---- code card ---- */
.code-card {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; background: #030B1F; box-shadow: var(--shadow-3);
}
.code-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: rgba(255,255,255,.04);
  border-block-end: 1px solid var(--line); color: var(--brand);
}
.code-card pre { margin: 0; padding: 18px; overflow-x: auto; }
.code-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  white-space: pre; direction: ltr; text-align: left; display: block;
}
.c-k { color: var(--brand); } .c-s { color: var(--green); }
.c-p { color: var(--gold); }  .c-n { color: var(--brand-2); }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 34px); align-items: start; }
.contact-form-card { padding: clamp(24px, 3vw, 34px); }
.contact-side { display: grid; gap: 18px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card .row span a { color: var(--brand); }

/* best-value column in the comparison table */
table.cmp th.col-best { color: var(--brand); }
table.cmp .cookie-tbl th { white-space: nowrap; }
.cookie-tbl td, .cookie-tbl th { text-align: start; font-size: 14px; }
.cookie-tbl code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--brand); }

/* ------------------------------------------------------------- 15. prose */
.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(22px, 2.4vw, 27px); margin-block: 44px 14px; }
.prose h3 { font-size: 18.5px; margin-block: 28px 10px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; }
.prose p { margin-block-end: 14px; }
.prose ul { list-style: none; display: grid; gap: 9px; margin-block-end: 18px; }
.prose ul li { padding-inline-start: 20px; position: relative; }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding: 16px 20px; margin-block-end: 34px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--panel); font-size: 14px; color: var(--muted);
}

/* table of contents for legal pages */
.legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.toc { position: sticky; top: 100px; display: grid; gap: 8px; }
.toc b { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-block-end: 6px; }
:lang(ar) .toc b { letter-spacing: 0; text-transform: none; }
.toc a { font-size: 14px; color: var(--ink-2); padding: 5px 0; transition: color .2s, padding-inline-start .2s; }
.toc a:hover { color: var(--brand); padding-inline-start: 5px; }

/* ------------------------------------------------------------ 16. contact */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px; width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18);
  background: rgba(0,0,0,.4);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.consent input { width: 17px; height: 17px; margin-block-start: 3px; accent-color: var(--brand); flex: none; }
.form-note {
  border-radius: var(--radius-s); border: 1px solid rgb(var(--green-rgb) / .3);
  background: rgb(var(--green-rgb) / .08); color: var(--green);
  padding: 13px 16px; font-size: 14.5px; display: none;
}
.form-note[data-on="true"] { display: block; }

.contact-card { display: grid; gap: 18px; }
.contact-card .row { display: flex; gap: 13px; align-items: flex-start; }
.contact-card .row svg { flex: none; margin-block-start: 3px; color: var(--brand); }
.contact-card b { display: block; font-size: 14.5px; }
.contact-card span { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------- 17. reveal motion */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* ------------------------------------------------------------ 18. responsive */
@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .legal-grid { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .toc b { width: 100%; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav[data-open="true"] .nav-links {
    display: grid; position: absolute; inset-inline: var(--gutter); top: 78px;
    background: rgba(6,20,50,.97); backdrop-filter: blur(18px);
    border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow-3); margin: 0;
  }
  .nav[data-open="true"] .nav-links a { padding: 12px 14px; font-size: 15.5px; }
  .nav-links-cta { display: flex !important; margin-block-start: 6px; }
  .split, .versus { grid-template-columns: 1fr; }
  .versus-mid { display: none; }
  .split--flip .split-media { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .addons { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* Pure decoration, and at this width the orbit rings are wider than the screen. */
  .float, .orbit { display: none; }
}

/* Below this the bar cannot hold brand + language + CTA + menu button, and the
   menu button is the one that must never be the thing that falls off the edge.
   The CTA moves into the menu; the language control keeps its globe only. */
@media (max-width: 660px) {
  .nav-cta { display: none; }
  .lang span { display: none; }
  .lang { padding: 10px 12px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-4, .plans, .stats { grid-template-columns: 1fr; }
  .m-kpis { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .m-item { grid-template-columns: auto 1fr auto; }
  .m-item .ch { display: none; }
}

/* --------------------------------------------------------- 19. reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 20. printing */
@media print {
  .nav, .footer, .aurora, .grid-veil, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #222; }
}