/* Imda website · full single page (prototype) *
   Tokens follow design-system/website/DESIGN.md v1.2. One type family: IBM Plex. */

:root {
  /* Brand */
  --brand: #006EF5;
  --brand-hover: #005FD3;
  --brand-pressed: #00408E;
  --link: #005FD3;
  --focus: #078AF3;

  /* Ink and surfaces */
  --ink: #172B4D;
  --ink-2: #44546F;
  --ink-3: #626F86;
  --canvas: #FFFFFF;
  --soft: #F7F8F9;
  --navy: #062A47;
  --line: #091E4224;
  --line-input: #8590A2;
  --tint-blue: #E0EEFF;
  --tint-blue-2: #C7E0FF;
  --row-selected: #F2F8FF;

  /* Status (inside product visuals only) */
  --grey-bg: #091E420F;   --grey-tx: #44546F;
  --prog-bg: #E7EEFC;     --prog-tx: #1D4FB8;
  --yel-bg: #F8E6A0;      --yel-tx: #7F5F01;
  --ora-bg: #FEDEC8;      --ora-tx: #A54800;  --ora-bold: #F38A3F;
  --sig-bg: #F3F0FF;      --sig-tx: #5E4DB2;  --sig-bold: #6E5DC6; --sig-line: #8F7EE7;
  --ok-bg: #DCFFF1;       --ok-tx: #216E4E;   --ok-bold: #1F845A;
  --step-line: #758195;

  /* Type */
  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 16px;
  --nav-h: 64px;
  --section: 64px;

  /* Elevation and motion */
  --shadow-card: 0 1px 1px #091E4240, 0 0 1px #091E424F;
  --shadow-raise: 0 8px 12px #091E4226, 0 0 1px #091E424F;
  --shadow-window: 0 24px 48px -12px #091E4240, 0 0 1px #091E424F;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 150ms;
  --base: 250ms;
}

@media (min-width: 768px)  { :root { --gutter: 24px; --section: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --nav-h: 72px; --section: 112px; } }

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--link); }
i, em { font-style: normal; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.skip {
  position: absolute; inset-inline-start: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 4px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 4px;
  font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 20px; height: 20px; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-pressed); }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line-input); }
.btn--secondary:hover { background: var(--soft); }
.btn--secondary:active { background: #F1F2F4; }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--icon { padding: 0; width: 48px; }
@media (pointer: coarse) { .btn--small { min-height: 44px; } }

/* ── Navigation ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.nav__logo { display: flex; margin-inline-end: auto; border-radius: 4px; }
.nav__logo svg { display: block; width: 112px; height: auto; }
.nav__links { display: none; }
.nav__inner > .btn { display: none; }
.nav__links a {
  font: 500 15px/1 var(--font); color: var(--ink-2); text-decoration: none;
  padding: 10px 4px; border-radius: 4px;
}
.nav__links a:hover { color: var(--ink); }
.nav__lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font: 500 15px/1 var(--font); color: var(--ink-2); text-decoration: none; border-radius: 4px;
}
.nav__lang:lang(ar) { font-family: "IBM Plex Sans Arabic", var(--font); font-size: 16px; }
.nav__lang:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .nav__inner > .btn { display: inline-flex; }
  .nav__logo svg { width: 124px; }
}

@media (min-width: 1024px) { .nav__links { display: flex; gap: 28px; } }

/* ── 1 · Hero ─────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: 48px;
  overflow: clip;
  background:
    radial-gradient(60% 70% at 85% 10%, #C7E0FF 0%, rgba(199, 224, 255, 0) 70%),
    radial-gradient(50% 60% at 5% 95%, #E0EEFF 0%, rgba(224, 238, 255, 0) 70%),
    #FFFFFF;
}
@media (min-width: 1024px) { .hero { padding-top: 88px; } }
.hero::before { /* a quiet field of qalam dots, fading out from the top end */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 11.6 16.4 14 14 16.4 11.6 14Z' fill='%23006EF5' fill-opacity='.22'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(70% 60% at 88% 12%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 60% at 88% 12%, #000 0%, transparent 70%);
}
[dir="rtl"] .hero::before { -webkit-mask-position: 0 0; -webkit-mask-image: radial-gradient(70% 60% at 12% 12%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 60% at 12% 12%, #000 0%, transparent 70%); }
.hero__seal {
  position: absolute; pointer-events: none;
  width: 340px; inset-inline-end: -150px; top: 12px;
}
@media (min-width: 768px)  { .hero__seal { width: 460px; inset-inline-end: -120px; top: 0; } }
@media (min-width: 1024px) { .hero__seal { width: 600px; inset-inline-end: max(-40px, calc(50vw - 720px)); top: -24px; } }
.seal-line { fill: none; stroke: #B5D5FF; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.seal-line--inner { stroke: #D3E6FF; }
.seal-dot { fill: #E0EEFF; stroke: #C7E0FF; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero__wrap, .hero__stage { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .seal-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) 200ms forwards; }
  .seal-line--inner { animation-delay: 450ms; }
  .seal-dot { animation: fade 900ms var(--ease) 900ms both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

.hero__text { max-width: 760px; }
.hero__kicker {
  font: 600 15px/1.3 var(--font); color: var(--link);
  margin-bottom: 16px;
}
.hero .hero__title {
  font: 700 clamp(2.25rem, 3.6vw + 1.1rem, 4rem)/1.06 var(--font);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero .hero__title .hl { color: var(--brand); }
.hero__lead {
  margin-top: 20px; max-width: 36em;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.55;
  color: var(--ink-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}
/* Product window, cropped by the bottom of the hero */
.hero__stage { margin-top: 40px; height: 360px; }
@media (min-width: 768px)  { .hero__stage { margin-top: 56px; height: 420px; } }
@media (min-width: 1024px) { .hero__stage { height: 452px; } }

.window {
  position: relative; height: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-window);
}
@media (min-width: 1024px) { .window { border-radius: 24px 24px 0 0; } }
.window__bar {
  display: flex; align-items: center; gap: 6px; height: 36px; padding-inline: 16px;
  background: var(--soft); border-bottom: 1px solid var(--line);
  border-radius: inherit;
}
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: #DCDFE4; }
.window__url {
  margin-inline: auto; transform: translateX(-24px);
  font: 400 12px/1 var(--font); color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
}

/* App, drawn from the app design system */
.app { display: flex; height: calc(100% - 36px); overflow: hidden; font-size: 13px; line-height: 1.4; }
.app__side { display: none; }
@media (min-width: 1024px) {
  .app__side {
    display: flex; flex-direction: column; gap: 2px; flex: none; width: 208px;
    background: var(--soft); border-inline-end: 1px solid var(--line); padding: 16px 12px;
  }
}
.app__org { font: 600 12px/16px var(--font); color: var(--ink-3); padding: 0 8px 10px; }
.app__nav {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 4px;
  color: var(--ink-2); font-size: 14px;
}
.app__nav b { margin-inline-start: auto; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.app__nav.is-active { background: var(--tint-blue); color: var(--brand-pressed); box-shadow: inset 2px 0 0 var(--brand); }
.app__main { flex: 1; min-width: 0; padding: 16px 16px 0; }
@media (min-width: 768px) { .app__main { padding: 24px 28px 0; } }
.app__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app__title { font: 600 18px/24px var(--font); }
@media (min-width: 768px) { .app__title { font-size: 22px; line-height: 28px; } }
.app__search {
  display: none; align-items: center; gap: 8px; width: 240px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-input); border-radius: 4px; color: var(--ink-3);
}
@media (min-width: 768px) { .app__search { display: flex; } }
.app__tabs { display: flex; gap: 20px; margin-top: 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.app__tabs span { padding: 6px 0 8px; }
.app__tabs .is-active { color: var(--brand-pressed); box-shadow: inset 0 -2px 0 var(--brand); }

.table { margin-top: 4px; }
.tr {
  position: relative;
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 56px; padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.th { min-height: 36px; font: 600 12px/16px var(--font); color: var(--ink-2); background: var(--soft); }
.c-type, .c-with, .c-upd { display: none; }
@media (min-width: 768px) {
  .tr { grid-template-columns: minmax(0, 1fr) 140px 164px 64px 92px; }
  .c-type, .c-with, .c-upd { display: block; }
  .c-type, .c-upd { color: var(--ink-2); }
}
.c-name { display: flex; flex-direction: column; min-width: 0; }
.c-name b { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-name small { font-size: 12px; color: var(--ink-3); }
.c-name em { font-size: 12px; }
.tr.is-followed { background: var(--row-selected); box-shadow: inset 0 0 0 2px var(--brand); border-radius: 4px; border-bottom-color: transparent; }
.tag-follow {
  position: absolute; inset-inline-end: 8px; top: 8px;
  font: 600 11px/16px var(--font); color: var(--brand-pressed); background: var(--tint-blue);
  padding: 0 6px; border-radius: 3px;
}
.tr.is-followed .loz { margin-top: 18px; }
@media (min-width: 768px) {
  .tag-follow { display: none; }
  .tr.is-followed .loz { margin-top: 0; }
}

/* Lozenges and avatars (shared with the app) */
.loz {
  display: inline-block; max-width: 100%;
  font: 700 11px/16px var(--font); text-transform: uppercase; letter-spacing: 0.2px;
  padding: 0 4px; border-radius: 3px; white-space: nowrap; vertical-align: middle;
}
.loz--grey { background: var(--grey-bg); color: var(--grey-tx); }
.loz--progress { background: var(--prog-bg); color: var(--prog-tx); }
.loz--yellow { background: var(--yel-bg); color: var(--yel-tx); }
.loz--orange { background: var(--ora-bg); color: var(--ora-tx); }
.loz--purple { background: var(--sig-bg); color: var(--sig-tx); }
.loz--green { background: var(--ok-bg); color: var(--ok-tx); }
.av {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 600 10px/1 var(--font);
}
.av--blue { background: #CCE0FF; color: #09326C; }
.av--green { background: #BAF3DB; color: #164B35; }
.av--purple { background: #DFD8FD; color: #352C63; }
.av--orange { background: #FEDEC8; color: #702E00; }

/* Callout pinned to the followed row (tablet and up) */
.callout { display: none; }
@media (min-width: 768px) {
  .callout {
    position: absolute; z-index: 2;
    right: 40px; top: 236px; /* physical: the product window is always LTR */
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; background: #fff; border-radius: 8px;
    box-shadow: var(--shadow-raise); text-decoration: none;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  }
  .callout::before { /* connector up to the row */
    content: ""; position: absolute; left: 24px; bottom: 100%;
    width: 1px; height: 28px; background: var(--brand);
  }
  .callout::after { /* dot on the row */
    content: ""; position: absolute; left: 21px; bottom: calc(100% + 26px);
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  }
  .callout:hover { transform: translateY(-2px); }
  .callout__text { font: 600 14px/20px var(--font); color: var(--ink); }
  .callout__link { display: flex; align-items: center; gap: 4px; font: 500 14px/20px var(--font); color: var(--link); }
}
@media (min-width: 1024px) { .callout { top: 248px; right: 56px; } }

/* Hero entrance */
@media (prefers-reduced-motion: no-preference) {
  .window { animation: rise 700ms var(--ease) 300ms both; }
  .callout { animation: fade 400ms var(--ease) 1100ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ── Header (final) ───────────────────────────────────── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav__inner { gap: 16px; }
.nav__inner > .nav__wa { display: inline-flex; }
.nav__wa .ic { width: 18px; height: 18px; }
.nav__toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-start: -8px;
  border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
}
.nav__toggle .ic { width: 22px; height: 22px; }
.nav__toggle .ic--close, .nav.is-open .nav__toggle .ic--menu { display: none; }
.nav.is-open .nav__toggle .ic--close { display: block; }
.nav__toggle:hover { background: var(--soft); }
.nav__links a { position: relative; }
.nav__links a.is-current { color: var(--ink); }
@media (min-width: 1024px) {
  .nav__toggle { display: none; }
  .nav__links a::after { /* current-section underline */
    content: ""; position: absolute; inset-inline: 4px; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--brand); transform: scaleX(0); transition: transform var(--base) var(--ease);
  }
  .nav__links a.is-current::after { transform: scaleX(1); }
}
@media (max-width: 1023px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
    display: grid; gap: 0; padding: 8px var(--gutter) 24px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-raise);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility 0s linear var(--base);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; visibility: visible; transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility 0s; }
  .nav__links a { display: flex; align-items: center; min-height: 52px; padding: 0; font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a.is-current { color: var(--brand-hover); }
}
@media (max-width: 479px) { .nav__lang { padding-inline: 2px; } .nav__inner { gap: 10px; } }

/* ── Buttons (additions) ──────────────────────────────── */
.btn--ghost { background: transparent; color: var(--ink); padding-inline: 12px; }
.btn--ghost:hover { background: #091E420F; }
.btn--ghost .ic { width: 18px; height: 18px; transition: transform var(--fast) var(--ease); }
.btn--ghost:hover .ic { transform: translateY(2px); }
.btn--wa .ic { transition: transform var(--base) var(--ease); }
.btn--wa:hover .ic { transform: rotate(-12deg); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #F7F8F9; }
.btn--light:active { background: #DCDFE4; }

/* ── Hero (additions) ─────────────────────────────────── */
.hero__pilot { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.hero__pilot::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: var(--brand); transform: rotate(45deg); flex: none; }
@media (max-width: 479px) { .hero__actions .btn--ghost { width: auto; align-self: center; } }

/* ── Shared ───────────────────────────────────────────── */
.product, .flows, .record, .it, .faq, .close { position: relative; padding-block: var(--section); }
.sec-head { max-width: 720px; margin-bottom: 40px; }
@media (min-width: 768px) { .sec-head { margin-bottom: 56px; } }
.sec-head h2, .record__text h2, .it h2 {
  font: 700 clamp(1.875rem, 2.2vw + 1.1rem, 3rem)/1.12 var(--font); letter-spacing: -0.02em;
}
.hl { color: var(--brand); }
.sec-lead { margin-top: 16px; font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 4px; background: var(--soft); font-size: 12px; color: var(--ink-2); }
.loz--blue { background: var(--tint-blue); color: var(--brand-pressed); }
.doc__type { font-size: 12px; color: var(--ink-3); }
.doc__title { margin-top: 2px; font: 600 16px/1.35 var(--font); color: var(--ink); }
.doc__title .mono { font-weight: 500; margin-inline-end: 4px; }
.soon-unused { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 3px; font: 700 11px/1 var(--font); letter-spacing: .2px; text-transform: uppercase; background: #FFFFFF1F; color: #9CCFFA; }
html[lang="ar"] .soon { text-transform: none; font-size: 12px; }

/* ── 2 · Product pillars ──────────────────────────────── */
.product { background: #fff; }
.pillars { display: grid; gap: 20px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.pillar { padding: 12px 12px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); outline: none; }
.pillar h3 { margin: 24px 16px 0; font: 600 22px/1.3 var(--font); }
.pillar p { margin: 8px 16px 0; color: var(--ink-2); line-height: 1.55; }
.pillar__art {
  position: relative; height: 188px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(80% 90% at 50% 100%, #E7F0FF 0%, #F6F9FF 55%, #FBFCFE 100%);
}
.pillar--sign .pillar__art { background: radial-gradient(80% 90% at 50% 100%, #EEEAFD 0%, #F8F6FF 55%, #FCFBFF 100%); }
.pa { position: relative; width: 100%; height: 100%; font-size: 13px; color: var(--ink-2); }

/* Workflows: roles in the template resolve to real people */
.pa--roles { display: grid; align-content: center; gap: 12px; padding: 0 28px 0 52px; }
.pa-line { position: absolute; left: 33px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: linear-gradient(#006EF5, #3D7CF0 60%, #6E5DC6); transform-origin: top; }
.pa-step { position: relative; display: flex; align-items: center; min-height: 32px; }
.pa-node { position: absolute; left: -25px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand); }
.pa-step.is-sign .pa-node { box-shadow: 0 0 0 2px var(--sig-bold); }
.pa-swap { position: relative; display: grid; }
.pa-role, .pa-person { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pa-role { justify-self: start; padding: 4px 10px; border-radius: 999px; border: 1px dashed #9FB8DD; color: var(--ink-3); font-weight: 500; }
.pa-role::before { content: "Role"; font: 600 10px/1 var(--font); letter-spacing: .4px; text-transform: uppercase; color: #8FA5C6; }
.pa-person { font-weight: 600; color: var(--ink); }
.pa-person .av { width: 26px; height: 26px; }
.pa-name { display: grid; line-height: 1.25; }
.pa-name small { font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* Approvals: on leave, the deputy approves */
.pa--approve { display: grid; place-items: center; padding: 0 20px; }
.pa-doc { width: 100%; max-width: 300px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px #091E4214, 0 12px 28px -14px #091E4240; display: grid; gap: 8px; }
.pa-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.pa-status { display: grid; justify-items: end; }
.pa-status .loz { grid-area: 1 / 1; }
.pa-who { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.pa-who .loz { margin-inline-start: auto; }
.pa-tick { margin-inline-start: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bold); color: #fff; }
.pa-tick .ic { width: 13px; height: 13px; stroke-width: 2.5; }

/* E-signature: signed on a phone, confirmed by OTP */
.pa--sign { display: grid; place-items: center; }
.pa-phone { width: 184px; padding: 10px 14px 14px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1.5px #DCD5F7, 0 18px 36px -18px #352C6359; display: grid; align-content: start; gap: 7px; }
.pa-phone__bar { justify-self: center; width: 44px; height: 5px; border-radius: 5px; background: #EDEAF7; }
.pa-phone__t { font: 600 12px/1.3 var(--font); color: var(--ink); }
.pa-pad { width: 100%; height: 34px; overflow: visible; }
.pa-ink { fill: none; stroke: #352C63; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa-base { stroke: #DFD8FD; stroke-width: 1.2; }
.pa-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pa-otp i { display: grid; place-items: center; height: 20px; border-radius: 5px; border: 1px solid #DCD5F7; font: 500 12px/1 var(--mono); color: var(--ink); }
.pa-ok { display: inline-flex; align-items: center; gap: 6px; justify-self: start; white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-tx); font: 600 11px/1.3 var(--font); }
.pa-ok .ic { width: 12px; height: 12px; stroke-width: 2.5; }

/* E-signature card motion */
@media (prefers-reduced-motion: no-preference) {
  .io .pillar:not(.is-in) .pa-otp i, .io .pillar:not(.is-in) .pa-ok { opacity: 0; }
  .io .pillar:not(.is-in) .pa-ink { stroke-dashoffset: 1; }
  .pillar.is-in .pa-ink { animation: pa-draw 1.4s cubic-bezier(.45,0,.2,1) 300ms both; }
  .pillar.is-in .pa-otp i { animation: pa-fade 250ms linear both; }
  .pillar.is-in .pa-otp i:nth-child(1) { animation-delay: 1800ms; } .pillar.is-in .pa-otp i:nth-child(2) { animation-delay: 1900ms; }
  .pillar.is-in .pa-otp i:nth-child(3) { animation-delay: 2000ms; } .pillar.is-in .pa-otp i:nth-child(4) { animation-delay: 2100ms; }
  .pillar.is-in .pa-otp i:nth-child(5) { animation-delay: 2200ms; } .pillar.is-in .pa-otp i:nth-child(6) { animation-delay: 2300ms; }
  .pillar.is-in .pa-ok { animation: pa-in 500ms var(--ease) 2600ms both; }
  @keyframes pa-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes pa-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ── 3 · Workflows: one template, built up chapter by chapter ── */
.flows { background: #fff; overflow: clip; }
.flows::before { content: ""; position: absolute; inset: 20% -10% 0; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 55%, #E0EEFF 0%, transparent 70%), radial-gradient(30% 45% at 75% 60%, #F1EEFF 0%, transparent 70%); }
.flows > .wrap { position: relative; }
.tpl { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .tpl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }

.tpl__ui { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px #091E4214, 0 30px 60px -24px #091E4238; }
@media (min-width: 768px) { .tpl__ui { padding: 28px; } }
.tpl__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tpl__kicker { font-size: 12px; color: var(--ink-3); }
.tpl__name { font: 600 18px/1.3 var(--font); color: var(--ink); }
.tpl__type { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--ink-3); }
.tpl__type b { padding: 5px 12px; border-radius: 999px; background: var(--tint-blue); color: var(--brand-pressed); font: 600 13px/1.3 var(--font); white-space: nowrap; }
.tpl__type.is-swap b { animation: flip 420ms var(--ease) both; }

.tpl__steps { position: relative; display: grid; margin-top: 18px; }
.tpl__steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: linear-gradient(#006EF5, #3D7CF0 55%, #6E5DC6 85%, #22A06B); opacity: .35; }
.ts { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 8px 0; }
.ts__n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font: 600 13px/1 var(--font); box-shadow: 0 0 0 4px #fff; }
.ts__n .ic { width: 16px; height: 16px; }
.ts--sign .ts__n { background: var(--sig-bold); }
.ts--done .ts__n { background: #1F845A; }
.ts__n--rule { width: 26px; height: 26px; margin: 3px; border-radius: 7px; transform: rotate(45deg); background: #fff; color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 5px #fff; }
.ts__n--rule .ic { transform: rotate(-45deg); width: 14px; height: 14px; }
.ts__body { display: grid; gap: 8px; min-width: 0; }
.ts__cards { display: grid; grid-template-columns: 1fr; gap: 8px; transition: grid-template-columns 600ms var(--ease); }
.ts__card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #F7F9FC; border: 1px solid #E6ECF4; transition: background-color 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.ts__card > .ic { flex: none; width: 18px; height: 18px; color: var(--brand); }
.ts--sign .ts__card > .ic { color: var(--sig-bold); }
.ts__card span { display: grid; gap: 1px; min-width: 0; }
.ts__card b { font: 600 14px/1.3 var(--font); color: var(--ink); }
.ts__card small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts__otp { margin-inline-start: auto; padding: 2px 8px; border-radius: 4px; font: 700 11px/16px var(--font); background: var(--sig-bg); color: var(--sig-tx); }
.ts__end { padding: 6px 0; font: 600 14px/1.3 var(--font); color: #216E4E; }
.ts__tag { justify-self: start; font: 600 11px/1 var(--font); letter-spacing: .3px; text-transform: uppercase; color: var(--brand-hover); }
.ts__rule { display: grid; gap: 1px; padding: 10px 14px; border-radius: 12px; border: 1px dashed #9FB8DD; background: #F5F9FF; }
.ts__rule b { font: 600 14px/1.3 var(--font); color: var(--ink); }
.ts__rule small { font-size: 12px; color: var(--brand-hover); }
.ts__extras { display: flex; flex-wrap: wrap; gap: 6px; }
.ts__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tint-blue); color: var(--brand-pressed); font: 500 12px/1.3 var(--font); }
.ts__chip .ic { width: 13px; height: 13px; }

/* chapter states: each adds to the last */
.ts__card--par, .ts__tag { display: none; }
.ts--rule { display: none; }
.ts__extras { display: none; }
.tpl:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .ts__cards { grid-template-columns: 1fr 1fr; }
.tpl:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .ts__card--par,
.tpl:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .ts__tag { display: flex; }
.tpl:is([data-step="2"], [data-step="3"], [data-step="4"]) .ts--rule { display: grid; }
.tpl:is([data-step="3"], [data-step="4"]) .ts__extras { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .tpl[data-step="1"] .ts__card--par, .tpl[data-step="1"] .ts__tag { animation: grow-in 600ms var(--ease) both; }
  .tpl[data-step="2"] .ts--rule { animation: grow-in 600ms var(--ease) both; }
  .tpl[data-step="3"] .ts__chip { animation: grow-in 500ms var(--ease) both; }
  .tpl[data-step="3"] .ts__chip + .ts__chip { animation-delay: 250ms; }
  .tpl[data-step="0"] .ts__card small { animation: role-hl 1.6s var(--ease) both; }
  @keyframes grow-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes role-hl { 0%, 40% { color: var(--brand); } 100% { color: var(--ink-3); } }
}
/* the newest addition is highlighted */
.tpl[data-step="1"] .ts--par .ts__card, .tpl[data-step="3"] .ts--mgr .ts__card { border-color: #9FC5FF; background: #F2F8FF; }
.tpl[data-step="2"] .ts__rule { border-color: var(--brand); box-shadow: 0 0 0 4px #006EF51A; }
.tpl[data-step="4"] .tpl__type b { box-shadow: 0 0 0 4px #006EF51A; }

.chaps { display: grid; gap: 4px; }
.chap {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; width: 100%;
  padding: 14px 16px 16px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: start; overflow: hidden;
  font: inherit; color: var(--ink-3); transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.chap__n { grid-row: span 2; padding-top: 3px; font: 500 13px/1 var(--mono); color: #A5B1C2; transition: color 300ms var(--ease); }
.chap__t { font: 600 18px/1.35 var(--font); color: var(--ink-2); transition: color 300ms var(--ease); }
.chap__d { font-size: 15px; line-height: 1.5; color: var(--ink-3); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 450ms var(--ease), opacity 350ms var(--ease); }
.chap:hover .chap__t { color: var(--ink); }
.chap.is-done .chap__n { color: var(--brand); }
.chap.is-active { background: #fff; box-shadow: 0 1px 2px #091E4214, 0 10px 24px -12px #091E4233; }
.chap.is-active .chap__n { color: var(--brand); }
.chap.is-active .chap__t { color: var(--ink); }
.chap.is-active .chap__d { max-height: 4.5em; opacity: 1; }
.chap__bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .chap__bar { transform-origin: right; }
.chap.is-playing .chap__bar { animation: beatbar var(--ch, 2600ms) linear forwards; }
html[lang="ar"] .chap__t { font-family: "IBM Plex Sans Arabic", var(--font); }
@media (max-width: 1023px) { .chap__d { max-height: none; opacity: 1; } .tpl { gap: 24px; } }

/* ── 4 · Proof: the signed PDF builds itself ──────────── */
.record { background: var(--soft); overflow: clip; }
.record__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .record__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }
.beats { display: grid; gap: 4px; margin-top: 32px; }
.beats button {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: baseline;
  width: 100%; padding: 14px 16px 16px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: start;
  font: 500 17px/1.45 var(--font); color: var(--ink-3); overflow: hidden;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}
.beats__n { font: 500 13px/1 var(--mono); color: #A5B1C2; transition: color 300ms var(--ease); }
.beats button:hover { color: var(--ink-2); }
.beats button.is-done { color: var(--ink-2); }
.beats button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px #091E4214, 0 8px 20px -10px #091E4233; }
.beats button.is-active .beats__n, .beats button.is-done .beats__n { color: var(--brand); }
.beats__bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .beats__bar { transform-origin: right; }
.beats button.is-playing .beats__bar { animation: beatbar var(--beat, 2200ms) linear forwards; }
@keyframes beatbar { to { transform: scaleX(1); } }
html[lang="ar"] .beats button { font-family: "IBM Plex Sans Arabic", var(--font); }

.paper { position: relative; height: 470px; max-width: 560px; width: 100%; justify-self: center; }
@media (max-width: 479px) { .paper { height: 420px; } }
.sheet {
  position: absolute; background: #fff; border-radius: 14px; padding: 22px;
  box-shadow: 0 1px 2px #091E4214, 0 24px 48px -16px #091E4233;
  transition: transform 700ms cubic-bezier(.3,1.1,.4,1), opacity 500ms var(--ease);
}
.sheet--doc { left: 6%; top: 18px; width: 64%; height: 430px; z-index: 3; display: grid; align-content: start; gap: 10px; }
@media (max-width: 479px) { .sheet--doc { width: 74%; left: 2%; height: 390px; padding: 18px; } }
.sheet--cert { right: 0; top: 64px; width: 56%; z-index: 2; padding: 20px; transform: translateX(-30%) rotate(0deg); opacity: 0; }
.sheet--old { left: 0; top: 0; width: 56%; height: 300px; z-index: 1; opacity: 0; transform: translate(6%, 10px) rotate(0deg); display: grid; align-content: start; gap: 10px; padding-top: 44px; background: #FBFCFE; }
.sheet__tab { position: absolute; top: -12px; left: 18px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--mono); background: #EEF3FA; color: var(--ink-3); opacity: 0; transition: opacity 400ms var(--ease); }
.sheet__tab--now { background: var(--brand); color: #fff; }
.bar { display: block; height: 8px; border-radius: 4px; background: #EEF2F7; }
.w60 { width: 60%; } .w70 { width: 70%; } .w75 { width: 75%; } .w85 { width: 85%; } .w90 { width: 90%; }
.doc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.doc__type { font-size: 12px; color: var(--ink-3); }
.doc__title { margin-top: 2px; font: 600 15px/1.3 var(--font); color: var(--ink); }
.doc__title .mono { font-weight: 500; margin-inline-end: 4px; }
.idchip { flex: none; padding: 4px 8px; border-radius: 6px; font-size: 11px; background: #F3F6FA; color: var(--ink-2); transition: background-color 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease); }
.doc__table { display: grid; grid-template-columns: 2fr 1fr; gap: 6px 10px; margin: 6px 0; padding: 10px; border-radius: 8px; background: #F8FAFC; }
.doc__table i { height: 7px; border-radius: 4px; background: #E3E9F1; }
.doc__sign { margin-top: auto; padding-top: 10px; display: grid; justify-items: start; gap: 6px; position: absolute; left: 22px; right: 22px; bottom: 22px; }
.sigline { width: 70%; height: 56px; overflow: visible; }
.sigline__ink { fill: none; stroke: #352C63; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1); }
.sigline__base { stroke: #DFD8FD; stroke-width: 1.5; }
.doc__signer { font-size: 12px; color: var(--ink-3); }
.otp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.3 var(--font); background: var(--sig-bg); color: var(--sig-tx); opacity: 0; transform: translateY(6px) scale(.95); transition: opacity 360ms var(--ease) 1.1s, transform 360ms cubic-bezier(.3,1.5,.5,1) 1.1s; }
.otp-pill .ic { width: 13px; height: 13px; }
.cert__title { font: 600 14px/1.3 var(--font); color: var(--ink); }
.cert__sub { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.cert__rows { display: grid; gap: 10px; margin-top: 14px; }
.cert__rows li { position: relative; display: grid; gap: 1px; padding-left: 16px; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.cert__rows li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #1F845A; }
.cert__rows li.is-sign::before { background: var(--sig-bold); }
.cert__rows b { font-weight: 600; color: var(--ink); }
.cert__rows span { color: var(--ink-2); }
.cert__rows time { font-size: 11px; color: var(--ink-3); }

/* states: each one adds to the last */
.paper[data-state] .idchip { background: var(--tint-blue); color: var(--brand-pressed); box-shadow: 0 0 0 4px #006EF51A; }
.paper[data-state="1"] .idchip, .paper[data-state="2"] .idchip, .paper[data-state="3"] .idchip { box-shadow: none; }
.paper:is([data-state="1"], [data-state="2"], [data-state="3"]) .sigline__ink { stroke-dashoffset: 0; }
.paper:is([data-state="1"], [data-state="2"], [data-state="3"]) .otp-pill { opacity: 1; transform: none; }
.paper:is([data-state="2"], [data-state="3"]) .sheet--cert { opacity: 1; z-index: 4; transform: translateX(4%) rotate(2.5deg); box-shadow: 0 1px 2px #091E4214, 0 30px 60px -18px #091E4247; }
.paper:is([data-state="2"], [data-state="3"]) .cert__rows li { opacity: 1; transform: none; }
.paper:is([data-state="2"], [data-state="3"]) .cert__rows li:nth-child(1) { transition-delay: 500ms; }
.paper:is([data-state="2"], [data-state="3"]) .cert__rows li:nth-child(2) { transition-delay: 700ms; }
.paper:is([data-state="2"], [data-state="3"]) .cert__rows li:nth-child(3) { transition-delay: 900ms; }
.paper:is([data-state="2"], [data-state="3"]) .cert__rows li:nth-child(4) { transition-delay: 1100ms; }
.paper[data-state="3"] .sheet--old { opacity: 1; transform: translate(-4%, 0) rotate(-5deg); }
.paper[data-state="3"] .sheet__tab { opacity: 1; }
.paper[data-state="-1"] .idchip { background: #F3F6FA; color: var(--ink-2); box-shadow: none; }
.paper[data-state="2"] .sheet--doc, .paper[data-state="3"] .sheet--doc { transform: translateX(-6%) rotate(-2deg); }

/* ── 5 · Integrations and security (gradient band) ──── */
.it { color: #fff; overflow: clip; background: linear-gradient(135deg, #062A47 0%, #00408E 45%, #006EF5 100%); }
.it__seal { position: absolute; width: 760px; right: -220px; top: -180px; pointer-events: none; }
.it__seal rect, .it__seal path { fill: none; stroke: #fff; stroke-opacity: .1; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
[dir="rtl"] .it__seal { right: auto; left: -220px; }
.it__grid { position: relative; display: grid; gap: 64px; }
@media (min-width: 1024px) { .it__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.it__half { scroll-margin-top: calc(var(--nav-h) + 24px); }
.it h2 { font: 700 clamp(1.625rem, 1.6vw + 1.1rem, 2.375rem)/1.15 var(--font); letter-spacing: -0.02em; }
.it__lead { margin-top: 12px; color: #FFFFFFD1; line-height: 1.55; max-width: 32em; }

.beam { position: relative; margin-top: 36px; aspect-ratio: 460 / 300; max-width: 480px; }
.beam__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beam__base { fill: none; stroke: #FFFFFF2E; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.beam__pulse { fill: none; stroke: #CFE6FF; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.12 1.2; stroke-dashoffset: 0.12; opacity: 0; filter: drop-shadow(0 0 6px #9CCFFA); }
.beam__src {
  position: absolute; left: 0; transform: translateY(-50%); min-width: 31%;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: #FFFFFF1A; border: 1px solid #FFFFFF33; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 14px/1 var(--font); white-space: nowrap;
}
.beam__src .ic { color: #CFE6FF; }
.s1 { top: 15%; } .s2 { top: 38.3%; } .s3 { top: 61.7%; } .s4 { top: 85%; }
.beam__core { position: absolute; left: 76.5%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 0; z-index: 2; display: grid; place-items: center; border-radius: 24px; background: #fff; box-shadow: 0 0 0 10px #FFFFFF14, 0 20px 40px -12px #00000059; }
.beam__core svg { width: 54px; height: 54px; }
.beam__core rect { fill: none; stroke: var(--brand); stroke-width: 5.5; }
.beam__core path { fill: var(--brand); }
html[lang="ar"] .beam__src { font-family: "IBM Plex Sans Arabic", var(--font); }
/* Each block builds as you reach it: text first, then its visual, left to right */
@media (prefers-reduced-motion: no-preference) {
  .io .itb:not(.is-in) :is(.itb__n, h2, .it__lead, .beam__src, .beam__core, .opt, .guards li) { opacity: 0; translate: 0 12px; }
  .itb.is-in :is(.itb__n, h2, .it__lead, .beam__src, .beam__core, .opt, .guards li) { transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
  .itb.is-in h2 { transition-delay: 80ms; }
  .itb.is-in .it__lead { transition-delay: 180ms; }
  .itb.is-in .s1 { transition-delay: 350ms; } .itb.is-in .s2 { transition-delay: 470ms; } .itb.is-in .s3 { transition-delay: 590ms; } .itb.is-in .s4 { transition-delay: 710ms; }
  .itb.is-in .beam__pulse { animation: pulse-run 1.6s cubic-bezier(.45,0,.25,1) both; }
  .itb.is-in .beam__core { transition-delay: 800ms; animation: core-take 900ms var(--ease) 2.5s both; }
  .itb.is-in .opt:nth-child(1) { transition-delay: 350ms; } .itb.is-in .opt:nth-child(2) { transition-delay: 520ms; }
  .itb.is-in .guards li:nth-child(1) { transition-delay: 350ms; } .itb.is-in .guards li:nth-child(2) { transition-delay: 470ms; }
  .itb.is-in .guards li:nth-child(3) { transition-delay: 590ms; } .itb.is-in .guards li:nth-child(4) { transition-delay: 710ms; }
  @keyframes pulse-run { 0% { opacity: 0; stroke-dashoffset: 0.14; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
  @keyframes core-take { 0%, 100% { box-shadow: 0 0 0 10px #FFFFFF14, 0 20px 40px -12px #00000059; } 45% { box-shadow: 0 0 0 20px #FFFFFF2E, 0 20px 40px -12px #00000059; } }
}

/* Three blocks, one after another */
.itb { position: relative; display: grid; gap: 36px; padding-block: 72px; border-top: 1px solid #FFFFFF1F; scroll-margin-top: var(--nav-h); }
.itb:first-child { padding-top: 0; border-top: 0; }
.itb:last-child { padding-bottom: 0; }
.itb__n { display: inline-block; margin-bottom: 14px; padding: 3px 9px; border-radius: 999px; background: #FFFFFF1F; font: 500 12px/1.3 var(--mono); color: #CFE6FF; }
.itb__text { max-width: 560px; }
@media (min-width: 1024px) {
  .itb--int { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .itb--int .beam { margin-top: 0; justify-self: end; width: 100%; }
}
.itb--dep .opts { margin-top: 0; }
@media (min-width: 768px) { .itb--dep .opts { grid-template-columns: 1fr 1fr; gap: 20px; } }
.guards { display: grid; gap: 16px; }
@media (min-width: 600px) { .guards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .guards { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.guards li { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 18px; background: #FFFFFF14; border: 1px solid #FFFFFF2E; }
.guards__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: #fff; color: var(--brand); box-shadow: 0 10px 22px -12px #00000059; }
.guards__ic .ic { width: 22px; height: 22px; stroke-width: 1.9; }
.guards b { font: 600 17px/1.3 var(--font); color: #fff; }
.guards span:last-child { color: #FFFFFFD6; line-height: 1.5; font-size: 15px; }
html[lang="ar"] .guards b { font-family: "IBM Plex Sans Arabic", var(--font); }

/* Runs where you need it: Imda inside your network, or in the managed cloud */
.zone { position: relative; margin-top: 20px; aspect-ratio: 460 / 260; }
.zone .beam__svg { z-index: 1; }
.zone__box {
  position: absolute; top: 4%; bottom: 4%; left: 0; width: 100%;
  border-radius: 20px; border: 1.5px dashed #FFFFFF59; background: #FFFFFF0D;
  transition: left 800ms cubic-bezier(.5,0,.2,1), width 800ms cubic-bezier(.5,0,.2,1);
}
.zone[data-mode="cloud"] .zone__box { left: 46%; width: 54%; }
.zone__label { position: absolute; top: 12px; left: 16px; font: 600 12px/1 var(--font); letter-spacing: .3px; text-transform: uppercase; color: #CFE6FF; white-space: nowrap; }
html[lang="ar"] .zone__label { text-transform: none; font-family: "IBM Plex Sans Arabic", var(--font); font-size: 13px; }
.zone__team { left: 6%; top: 50%; width: auto; z-index: 2; }
.zone__core { left: 70%; top: 44%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 2; }
.zone__core svg { width: 48px; height: 48px; }
.zone__host { position: absolute; left: 70%; top: 82%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font); color: #FFFFFFE6; white-space: nowrap; z-index: 2; }
.zone__host .ic { width: 15px; height: 15px; color: #CFE6FF; }
.zone__lock {
  position: absolute; left: 46%; top: 50%; z-index: 3; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: #fff; color: var(--ink); font: 600 12px/1 var(--font); box-shadow: 0 8px 20px -8px #00000059;
  transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(.3,1.4,.5,1);
}
.zone__lock .ic { width: 13px; height: 13px; color: var(--brand); }
.zone[data-mode="cloud"] .zone__lock { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 500ms; }
html[lang="ar"] .zone__host, html[lang="ar"] .zone__lock { font-family: "IBM Plex Sans Arabic", var(--font); }
[dir="rtl"] .zone__box { left: auto; right: 0; transition-property: right, width; }
[dir="rtl"] .zone[data-mode="cloud"] .zone__box { left: auto; right: 46%; }
[dir="rtl"] .zone__team { left: auto; right: 6%; transform: translateY(-50%); }
[dir="rtl"] .zone__core { left: 30%; }
[dir="rtl"] .zone__host { left: 30%; }
[dir="rtl"] .zone__lock { left: 54%; }
[dir="rtl"] .zone__label { left: auto; right: 16px; }

.deploy { margin-top: 36px; padding: 20px 20px 16px; border-radius: 20px; background: #FFFFFF14; border: 1px solid #FFFFFF2E; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #0000002E; }
.seg button { position: relative; z-index: 1; min-height: 42px; border: 0; background: none; cursor: pointer; border-radius: 999px; font: 600 14px/1 var(--font); color: #FFFFFFC2; transition: color var(--base) var(--ease); }
.seg button[aria-checked="true"] { color: var(--ink); }
.seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -4px #00000040; transition: transform 420ms cubic-bezier(.3,1.25,.4,1); }
.deploy[data-mode="cloud"] .seg__thumb { transform: translateX(100%); }
[dir="rtl"] .seg__thumb { left: auto; right: 4px; }
[dir="rtl"] .deploy[data-mode="cloud"] .seg__thumb { transform: translateX(-100%); }
html[lang="ar"] .seg button { font-family: "IBM Plex Sans Arabic", var(--font); }
.deploy__stage { position: relative; height: 150px; margin-top: 16px; }
.deploy__art { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.deploy__art--cloud { opacity: 0; transform: translateY(10px); }
.deploy[data-mode="cloud"] .deploy__art--prem { opacity: 0; transform: translateY(-10px); }
.deploy[data-mode="cloud"] .deploy__art--cloud { opacity: 1; transform: none; }
.bld { fill: none; stroke: #DCEBFF; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rack { fill: #FFFFFF1F; stroke: #FFFFFF66; stroke-width: 1.25; }
.led { fill: #7EE2B8; }
.mini-seal { fill: none; stroke: #fff; stroke-width: 2; }
.deploy__text { margin-top: 12px; min-height: 3em; color: #FFFFFFEB; line-height: 1.5; }
.it__list { display: grid; gap: 12px; margin-top: 20px; }
.it__list li { display: flex; gap: 12px; align-items: flex-start; color: #FFFFFFEB; line-height: 1.45; }
.it__list .ic { width: 20px; height: 20px; color: #CFE6FF; margin-top: 1px; }

/* ── 6 · FAQ ──────────────────────────────────────────── */
.faq { background: #fff; }
.faq__grid { display: grid; gap: 8px; }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .faq .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); } }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font: 600 18px/1.4 var(--font); color: var(--ink); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23006EF5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat; box-shadow: var(--shadow-card); transition: transform var(--base) var(--ease); }
.faq__list details[open] summary::after { transform: rotate(135deg); }
.faq__list summary:hover { color: var(--brand-hover); }
.faq__a p { padding: 0 48px 20px 0; color: var(--ink-2); line-height: 1.6; max-width: 40em; }
[dir="rtl"] .faq__a p { padding: 0 0 20px 48px; }
html[lang="ar"] .faq__list summary { font-family: "IBM Plex Sans Arabic", var(--font); }
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content { height: 0; overflow: clip; transition: height 320ms var(--ease), content-visibility 320ms allow-discrete; }
  .faq__list details[open]::details-content { height: auto; }
}

/* ── 7 · Closing band ─────────────────────────────────── */
.close { background: #fff; padding-top: 0; }
.band {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: 64px 24px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, #062A47 0%, #00408E 45%, #006EF5 100%);
}
@media (min-width: 768px) { .band { padding: 88px 48px; } }
.band__seal { position: absolute; z-index: -1; width: 520px; right: -140px; top: -120px; }
.band__seal rect, .band__seal path { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
[dir="rtl"] .band__seal { right: auto; left: -140px; }
.band h2 { font: 700 clamp(1.75rem, 2vw + 1rem, 2.75rem)/1.15 var(--font); letter-spacing: -0.02em; }
.band > p { margin: 14px auto 0; max-width: 34em; color: #FFFFFFD9; font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem); line-height: 1.55; }
.band .btn { margin-top: 32px; }
.band__alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 20px; font-size: 14px; color: #FFFFFFB3; }
.band__alt a { color: #FFFFFFE6; text-decoration: none; }
.band__alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .band .btn--wa { box-shadow: 0 0 0 0 #FFFFFF59; }
  .band.is-in .btn--wa { animation: invite 1.2s var(--ease) 400ms 1 both; }
  @keyframes invite { 0% { box-shadow: 0 0 0 0 #FFFFFF59; } 100% { box-shadow: 0 0 0 18px #FFFFFF00; } }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Footer (light) ───────────────────────────────────── */
.footer { position: relative; overflow: clip; background: var(--soft); color: var(--ink-2); padding-block: 48px; font-size: 14px; border-top: 1px solid var(--line); }
.footer__seal { position: absolute; width: 360px; inset-inline-end: -90px; bottom: -150px; pointer-events: none; }
.footer__seal rect, .footer__seal path { fill: none; stroke: var(--brand); stroke-opacity: 0.08; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.footer__inner { position: relative; display: grid; gap: 28px; }
.footer__brand svg { display: block; width: 124px; height: auto; }
.footer__brand p { margin-top: 12px; max-width: 30em; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.footer .ic { color: var(--brand); }
.footer__legal { color: var(--ink-3); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .footer { padding-block: 64px 40px; }
  .footer__inner { grid-template-columns: 1fr auto; align-items: end; row-gap: 40px; }
  .footer__legal { grid-column: 1 / -1; }
}

/* ── Arabic ───────────────────────────────────────────── */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", var(--font); font-size: 17px; line-height: 1.75; }
html[lang="ar"] h1, html[lang="ar"] .hero__title, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; font-family: "IBM Plex Sans Arabic", var(--font); }
html[lang="ar"] .hero__lead, html[lang="ar"] .sec-lead { line-height: 1.75; }
html[lang="ar"] .btn, html[lang="ar"] .nav__links a, html[lang="ar"] .hero__kicker, html[lang="ar"] .callout__text, html[lang="ar"] .callout__link { font-family: "IBM Plex Sans Arabic", var(--font); }
.nav__logo svg, .footer__brand svg { direction: ltr; unicode-bidi: isolate; }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

[dir="rtl"] .beam__src { left: auto; right: 0; }
[dir="rtl"] .beam__core { left: 23.5%; margin: -46px 0 0 -92px; }

/* ── Scroll-driven scenes (class set by script on wide screens) ── */
.hero__stage { --tilt: 0; perspective: 1600px; }
.hero__stage .window { transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__stage > .window { rotate: x calc(var(--tilt) * 5deg); scale: calc(1 - var(--tilt) * 0.015); }
}
.hero__seal, .band__seal { will-change: transform; }

.scroll-hint { display: none; }
.scrolly .scroll-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* Runs where you need it: both options, always visible */
.opts { display: grid; gap: 14px; margin-top: 32px; }
.opt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border-radius: 20px; background: #FFFFFF1A; border: 1px solid #FFFFFF33; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease); }
.opt:hover { background: #FFFFFF24; border-color: #FFFFFF4D; }
.opt__tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--brand); box-shadow: 0 0 0 6px #FFFFFF14, 0 14px 28px -12px #00000059; }
.opt__tile .ic { width: 26px; height: 26px; stroke-width: 1.9; }
.opt h3 { font: 600 20px/1.3 var(--font); }
.opt__body > p:not(.opt__tags) { margin-top: 6px; color: #FFFFFFE0; line-height: 1.55; }
.opt__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.opt__tags span { padding: 4px 10px; border-radius: 999px; background: #FFFFFF1F; font: 600 12px/1.3 var(--font); color: #fff; }
html[lang="ar"] .opt h3, html[lang="ar"] .opt__tags span { font-family: "IBM Plex Sans Arabic", var(--font); }

/* Hero story inside the app window */
.app__main { position: relative; }
.c-status { display: grid; }
.c-status .loz { grid-area: 1 / 1; justify-self: start; }
.tr.is-followed { transition: background-color 600ms var(--ease), box-shadow 600ms var(--ease); }
.tr.is-followed.is-entering { animation: row-in 450ms var(--ease) both; }
.tr.is-followed.is-done { box-shadow: inset 0 0 0 2px #22A06B; background: #F5FFFA; }
.c-status .is-in { animation: flip 250ms var(--ease) both; }
.c-status .is-out { animation: st-out 200ms var(--ease) both; }
.c-with .av { transition: opacity 300ms var(--ease); }
@keyframes row-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes st-out { to { opacity: 0; transform: translateY(6px); } }
.app__toast {
  position: absolute; right: 24px; top: 62px; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px #091E4214, 0 12px 28px -10px #091E4240; font-size: 13px; color: var(--ink);
  opacity: 0; transform: translateY(-8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); pointer-events: none;
}
.app__toast.is-shown { opacity: 1; transform: none; }
.app__toast-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bold); color: #fff; }
.app__toast-ic.is-sign { background: var(--sig-bold); }
.app__toast-ic .ic { width: 13px; height: 13px; stroke-width: 2.5; }
@media (max-width: 767px) { .app__toast { left: 16px; right: 16px; top: 52px; } }
@keyframes flip { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ── 6 · Security (light) ─────────────────────────────── */
.secure { position: relative; padding-block: var(--section); background: #fff; }
.secure .guards li { background: var(--soft); border: 1px solid var(--line); }
.secure .guards__ic { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px #006EF5B3; }
.secure .guards b { color: var(--ink); }
.secure .guards span:last-child { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .io .guards:not(.is-in) li { opacity: 0; translate: 0 12px; }
  .guards.is-in li { transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
  .guards.is-in li:nth-child(2) { transition-delay: 120ms; } .guards.is-in li:nth-child(3) { transition-delay: 240ms; } .guards.is-in li:nth-child(4) { transition-delay: 360ms; }
}
.faq { background: var(--soft); }

/* Language switch: a pill, not a menu link */
.nav__lang { gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: 999px; color: var(--ink); font-weight: 500; }
.nav__lang .ic { width: 15px; height: 15px; color: var(--brand); }
.nav__lang:hover { text-decoration: none; background: var(--soft); border-color: var(--ink-3); }
@media (pointer: coarse) { .nav__lang { min-height: 44px; } }
@media (max-width: 479px) { .nav__lang { padding: 0 10px; } .nav__lang .ic { display: none; } }

/* ── Pillar stories in frames ─────────────────────────── */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }
.pillar__art { height: 228px; }
.pa--frames { position: relative; width: 100%; height: 100%; }
.pf { position: absolute; inset: 0 0 38px; display: grid; place-items: center; padding: 14px 18px 0; opacity: 0; transform: translateX(18px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); pointer-events: none; }
.pf.is-on { opacity: 1; transform: none; }
.pf.is-past { transform: translateX(-18px); }
.pf-nav { position: absolute; left: 18px; right: 18px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
.pf-nav button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; pointer-events: auto; }
.pf-nav i { width: 7px; height: 7px; border-radius: 50%; background: #C9D6EA; transition: width 300ms var(--ease-out), background-color 300ms; }
.pf-nav button.is-on i { width: 20px; border-radius: 4px; background: var(--brand); }
.pf-cap { margin-inline-start: 6px; font: 600 12px/1.3 var(--font); color: var(--ink-2); }
.pt-card { width: 100%; max-width: 300px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px #091E4214, 0 12px 28px -14px #091E4240; display: grid; gap: 7px; font-size: 12px; }
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.pt-head b { font: 600 13px/1.3 var(--font); color: var(--ink); }
.pt-badge { padding: 2px 8px; border-radius: 999px; background: var(--tint-blue); color: var(--brand-pressed); font: 600 11px/1.4 var(--font); }
.pt-badge--ok { background: var(--ok-bg); color: var(--ok-tx); }
.pt-row, .pt-map { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.pt-n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font: 600 11px/1 var(--font); }
.pt-row.is-sign .pt-n { background: var(--sig-bold); }
.pt-step { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pt-role { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; border: 1px dashed #9FB8DD; color: var(--ink-2); white-space: nowrap; font-size: 11px; }
.pt-map .pt-role { margin-inline-start: 0; }
.pt-arrow { width: 13px; height: 13px; color: var(--brand); flex: none; }
.pt-person { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pt-person .av { width: 22px; height: 22px; font-size: 9px; }
.pt-doc { display: grid; gap: 5px; padding: 4px 0; }
.pt-doc i { height: 6px; border-radius: 3px; background: #EEF2F7; }
.pt-doc i:nth-child(2) { width: 80%; } .pt-doc i:nth-child(3) { width: 60%; }
.pt-actions { display: flex; gap: 6px; }
.pt-btn { padding: 5px 10px; border-radius: 6px; background: #091E420F; color: var(--ink-2); font: 600 12px/1.2 var(--font); }
.pt-btn--primary { background: var(--brand); color: #fff; }
.pt-q, .pt-a { display: flex; align-items: flex-end; gap: 6px; }
.pt-a { justify-content: flex-end; }
.pt-q span, .pt-a span { padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: #F3F6FA; color: var(--ink); }
.pt-a span { border-radius: 10px 10px 3px 10px; background: var(--tint-blue); color: var(--brand-pressed); }
.pf .av { width: 22px; height: 22px; font-size: 9px; flex: none; }

/* What happens inside each frame when it comes on */
@media (prefers-reduced-motion: no-preference) {
  .pf.is-on.pf--build .pt-row { animation: f-in 500ms var(--ease-out) both; }
  .pf.is-on.pf--build .r1 { animation-delay: 250ms; } .pf.is-on.pf--build .r2 { animation-delay: 650ms; } .pf.is-on.pf--build .r3 { animation-delay: 1050ms; }
  .pf.is-on.pf--build .pt-role { animation: f-fade 400ms var(--ease-out) both; }
  .pf.is-on.pf--build .r1 .pt-role { animation-delay: 550ms; } .pf.is-on.pf--build .r2 .pt-role { animation-delay: 950ms; } .pf.is-on.pf--build .r3 .pt-role { animation-delay: 1350ms; }
  .pf.is-on.pf--map .pt-role { animation: f-fade 300ms var(--ease-out) both; }
  .pf.is-on.pf--map .pt-arrow { animation: f-arrow 450ms var(--ease-out) both; }
  .pf.is-on.pf--map .pt-person { animation: f-slide 500ms var(--ease-out) both; }
  .pf.is-on.pf--map .m1 .pt-arrow { animation-delay: 300ms; } .pf.is-on.pf--map .m1 .pt-person { animation-delay: 500ms; }
  .pf.is-on.pf--map .m2 .pt-arrow { animation-delay: 700ms; } .pf.is-on.pf--map .m2 .pt-person { animation-delay: 900ms; }
  .pf.is-on.pf--map .m3 .pt-arrow { animation-delay: 1100ms; } .pf.is-on.pf--map .m3 .pt-person { animation-delay: 1300ms; }
  .pf.is-on.pf--decide .pt-btn--primary { animation: f-press 500ms var(--ease-io) 900ms both; }
  .pf.is-on.pf--decide .st1 { animation: pa-out 300ms var(--ease-out) 1300ms both; }
  .pf.is-on.pf--decide .st2 { animation: pa-in 400ms var(--ease-out) 1400ms both; }
  .pf--decide .st2 { opacity: 0; }
  .pf.is-on.pf--ask .pt-q { animation: f-in 450ms var(--ease-out) 300ms both; }
  .pf.is-on.pf--ask .pt-a { animation: f-in 450ms var(--ease-out) 1200ms both; }
  .pf.is-on.pf--leave .a1 .loz { animation: f-fade 400ms var(--ease-out) 300ms both; }
  .pf.is-on.pf--leave .a2 { animation: f-slide 500ms var(--ease-out) 900ms both; }
  .pf.is-on.pf--leave .pa-tick { animation: f-fade 300ms var(--ease-out) 1500ms both; }
  .pf.is-on.pf--leave .pt-head .loz { animation: f-fade 400ms var(--ease-out) 1700ms both; }
  @keyframes f-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes f-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes f-slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
  @keyframes f-arrow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  @keyframes f-press { 0% { transform: none; box-shadow: none; } 40% { transform: scale(.94); box-shadow: 0 0 0 4px #006EF533; } 100% { transform: none; box-shadow: 0 0 0 0 #006EF500; } }
  @keyframes pa-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes pa-out { from { opacity: 1; } to { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .pf--decide .st1 { opacity: 0; } }

/* ── Pillar stories: one continuous cause-and-effect each ── */
.pillar__art { height: 250px; }
.st { position: relative; display: grid; place-items: center; padding: 0 18px; }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.swap > .s-a { opacity: 0; transform: translateY(-4px); }
.st.is-run .swap:not(.on) > .s-a { opacity: 1; transform: none; }
.st.is-run .swap:not(.on) > .s-b { opacity: 0; transform: translateY(4px); }

/* Workflows: build the template, apply it, roles become people */
.wf-card { gap: 6px; }
.wf-card .pt-head b { font: 600 13px/1.3 var(--font); color: var(--ink); }
.wf-row { display: flex; align-items: center; gap: 8px; max-height: 30px; min-height: 0; overflow: hidden; transition: max-height 450ms var(--ease-out), opacity 350ms var(--ease-out), transform 450ms var(--ease-out); }
.st.is-run .wf-row:not(.on) { max-height: 0; opacity: 0; transform: translateY(-6px); }
.wf-who { margin-inline-start: auto; justify-items: end; }
.wf-role { padding: 2px 8px; border-radius: 999px; border: 1px dashed #9FB8DD; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.wf-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wf-person .av { width: 22px; height: 22px; font-size: 9px; }
.wf-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; border-radius: 8px; border: 1px dashed #9FB8DD; color: var(--brand-hover); font: 600 12px/1 var(--font); transition: max-height 350ms var(--ease-out), opacity 300ms var(--ease-out), padding 350ms var(--ease-out); }
.wf-add .ic { width: 13px; height: 13px; }
.st.is-run .wf-add:not(.gone) { max-height: 32px; opacity: 1; padding: 7px 0; }
.wf-doc { position: absolute; left: 6px; top: 58%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -10px #091E4259; color: var(--ink); font-size: 12px; opacity: 0; pointer-events: none; }
.wf-doc .ic { width: 14px; height: 14px; color: var(--brand); }
.wf-doc b { font-weight: 500; }

/* Approvals: leave, deputy, question, approve, it moves on */
.st--ap { align-content: center; gap: 12px; }
.ap-card { gap: 7px; }
.ap-row { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; transition: opacity 400ms var(--ease-out); }
.ap-row .av { width: 22px; height: 22px; font-size: 9px; }
.ap-row > .loz, .ap-row > .pa-tick { margin-inline-start: auto; }
.ap-k.dim, .ap-k { opacity: .5; }
.st.is-run .ap-k:not(.dim) { opacity: 1; }
.ap-leave { transition: opacity 300ms var(--ease-out), transform 350ms var(--ease-out); }
.st.is-run .ap-leave:not(.on) { opacity: 0; transform: scale(.85); }
.ap-s { max-height: 30px; overflow: hidden; transition: max-height 450ms var(--ease-out), opacity 350ms var(--ease-out), transform 450ms var(--ease-out); }
.st.is-run .ap-s:not(.on) { max-height: 0; opacity: 0; transform: translateX(10px); }
.st.is-run .pa-tick:not(.on) { opacity: 0; transform: scale(.6); }
.pa-tick { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.ap-bubble { justify-self: start; max-height: 0; opacity: 0; overflow: hidden; border-radius: 10px 10px 10px 3px; background: #F3F6FA; color: var(--ink); font-size: 12px; transition: max-height 400ms var(--ease-out), opacity 300ms var(--ease-out), padding 400ms var(--ease-out), background-color 300ms; }
.ap-bubble > * { padding: 0; }
.st.is-run .ap-bubble.on:not(.gone) { max-height: 34px; opacity: 1; padding: 7px 10px; }
.ap-bubble > .s-a { opacity: 1; transform: none; }
.ap-bubble > .s-b { opacity: 0; }
.ap-bubble.ans { background: var(--tint-blue); color: var(--brand-pressed); }
.ap-bubble.ans > .s-a { opacity: 0; transform: translateY(-4px); }
.ap-bubble.ans > .s-b { opacity: 1; transform: none; }
.ap-token { position: absolute; left: 50%; top: 66%; z-index: 3; padding: 4px 9px; border-radius: 8px; background: var(--ok-bold); color: #fff; font-size: 11px; translate: -50% 0; opacity: 0; pointer-events: none; }
.ap-next { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sig-bold); color: #fff; font: 600 12px/1.2 var(--font); box-shadow: 0 8px 18px -8px #6E5DC6B3; transition: background-color 400ms var(--ease-out), color 400ms, box-shadow 400ms, border-color 400ms; border: 1px solid transparent; }
.ap-next .ic { width: 13px; height: 13px; }
.st.is-run .ap-next:not(.on) { background: transparent; color: var(--ink-3); border: 1px dashed #C9D2E0; box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .press { animation: st-press 420ms var(--ease-io) both; }
  .wf-doc.fly { animation: doc-fly 900ms var(--ease-io) both; }
  .ap-token.fly { animation: token-fly 700ms var(--ease-io) both; }
  @keyframes st-press { 0% { transform: none; } 40% { transform: scale(.94); box-shadow: 0 0 0 4px #006EF533; } 100% { transform: none; box-shadow: 0 0 0 0 #006EF500; } }
  @keyframes doc-fly { 0% { opacity: 0; transform: translate(-12px, 0); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translate(70px, -96px) scale(.85); } 100% { opacity: 0; transform: translate(80px, -104px) scale(.7); } }
  @keyframes token-fly { 0% { opacity: 0; transform: translateY(0) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1); } 85% { opacity: 1; transform: translateY(52px) scale(.9); } 100% { opacity: 0; transform: translateY(58px) scale(.7); } }
}

/* Workflows card: a mode label and a pointer make the story self-explanatory */
.st--wf { align-content: center; gap: 10px; }
.st-label { justify-self: center; }
.st-label > * { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px #091E4214, 0 4px 12px -6px #091E4233; font: 600 12px/1.3 var(--font); color: var(--ink-2); white-space: nowrap; }
.st-label .ic { width: 13px; height: 13px; color: var(--brand); }
.st-label .s-b { color: var(--brand-pressed); }
.st-label b { font-weight: 500; }
.wf-card { position: relative; }
.wf-add { position: relative; overflow: hidden; }
.wf-cursor { position: absolute; left: 58%; bottom: 2px; width: 22px; height: 22px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); filter: drop-shadow(0 2px 3px #091E4240); }
.wf-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.st.is-run .wf-cursor:not(.gone) { opacity: 1; }
.wf-cursor.gone { transform: translate(6px, 6px); }
@media (prefers-reduced-motion: no-preference) {
  .wf-cursor.press { animation: cur-tap 380ms var(--ease-io) both; }
  .wf-add.press::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #006EF540; animation: ripple 600ms var(--ease-out) both; }
  @keyframes cur-tap { 0%, 100% { transform: none; } 45% { transform: scale(.82) translate(1px, 1px); } }
  @keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(18); opacity: 0; } }
}

/* Proof sheet: sized by its content; the signature spot waits until signed */
.sheet--doc { height: auto; min-height: 0; padding-bottom: 22px; }
@media (max-width: 479px) { .sheet--doc { height: auto; } }
.doc__sign { position: static; margin-top: 18px; padding-top: 0; }
.paper { height: 440px; }
.sig-wait { display: inline-flex; align-items: center; gap: 8px; width: 78%; height: 56px; padding: 0 14px; border-radius: 10px; border: 1.5px dashed var(--sig-line); background: var(--sig-bg); color: var(--sig-tx); font: 600 13px/1 var(--font); transition: opacity 300ms var(--ease-out); }
.sig-wait .ic { width: 15px; height: 15px; }
.sigline { display: none; }
.paper:is([data-state="1"], [data-state="2"], [data-state="3"]) .sig-wait { display: none; }
.paper:is([data-state="1"], [data-state="2"], [data-state="3"]) .sigline { display: block; }
html:not(.io) .sig-wait { display: none; } html:not(.io) .sigline { display: block; }
@media (prefers-reduced-motion: reduce) { .sig-wait { display: none; } .sigline { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .paper[data-state="1"] .sigline { animation: f-fade 200ms var(--ease-out) both; }
  .paper[data-state="1"] .sigline__ink { animation: pa-draw 1.2s cubic-bezier(.45,0,.2,1) 150ms both; }
}

/* Proof step 1: the unique ID is generated */
.id-note { display: flex; align-items: center; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; margin: -4px 0 0; font: 600 12px/1.3 var(--font); color: var(--brand-pressed); transition: max-height 400ms var(--ease-out), opacity 300ms var(--ease-out), margin 400ms var(--ease-out); }
.id-note .ic { width: 13px; height: 13px; }
.paper[data-state="0"] .id-note { max-height: 24px; opacity: 1; margin: 0 0 6px; }
.paper[data-state="0"] .idchip { font-size: 13px; padding: 6px 10px; }
@media (prefers-reduced-motion: no-preference) {
  .paper[data-state="0"] .idchip { animation: id-ring 1.2s var(--ease-out) 500ms both; }
  @keyframes id-ring { 0% { box-shadow: 0 0 0 0 #006EF566; } 100% { box-shadow: 0 0 0 10px #006EF500; } }
}

/* Relay: one card at a time, the active one in focus */
.pillar { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out); }
.pillars.is-relay .pillar:not(.is-active) { opacity: .55; }
.pillars.is-relay .pillar.is-active { transform: translateY(-4px); border-color: #B5D5FF; box-shadow: 0 0 0 4px #006EF514, 0 18px 36px -18px #091E4240; }
@media (prefers-reduced-motion: reduce) { .pillars.is-relay .pillar:not(.is-active) { opacity: 1; } }

/* Calmer header: quiet language link, divider before the one button */
.nav__lang { min-height: 44px; padding: 0 4px; border: 0; border-radius: 4px; background: none; color: var(--ink-2); font-weight: 500; }
.nav__lang:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav__wa { position: relative; margin-inline-start: 8px; }
.nav__wa::before { content: ""; position: absolute; inset-inline-start: -13px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
@media (min-width: 1024px) { .nav__links { gap: 32px; margin-inline-end: 8px; } }

/* Cards arrive one after another */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .io .pillars .pillar { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
  .io .pillars .pillar.is-shown { opacity: 1; transform: none; }
}

/* ── Calm cards: the card stays still, only the information changes softly ── */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .io .pillars .pillar { transform: none !important; transition: opacity 900ms var(--ease-out); }
}
.pillars .pillar:hover { transform: none; }
.st .swap > * { transition: opacity 600ms ease; transform: none !important; }
.st.is-run .swap:not(.on) > .s-b { transform: none; }
/* rows keep their place; they only fade in */
.wf-row, .ap-s { max-height: none !important; transform: none !important; transition: opacity 600ms ease; }
.st.is-run .wf-row:not(.on), .st.is-run .ap-s:not(.on) { opacity: 0; }
.wf-add { max-height: 32px; padding: 7px 0; transition: opacity 600ms ease; }
.st .wf-add.gone, .wf-add { opacity: 0; }
.st.is-run .wf-add:not(.gone) { opacity: 1; }
.ap-bubble { max-height: none; padding: 7px 10px; transition: opacity 600ms ease, background-color 600ms ease; }
.ap-bubble > * { transition: opacity 600ms ease; transform: none !important; }
.st.is-run .ap-bubble:not(.on), .st.is-run .ap-bubble.gone, .ap-bubble { opacity: 0; }
.st.is-run .ap-bubble.on:not(.gone) { opacity: 1; }
.ap-leave, .pa-tick { transform: none !important; transition: opacity 600ms ease; }
.ap-k { transition: opacity 600ms ease; }
.ap-next { transition: background-color 700ms ease, color 700ms ease, border-color 700ms ease, box-shadow 700ms ease; }
/* no flying, pointing or pressing */
.wf-doc, .ap-token, .wf-cursor { display: none !important; }
.press, .wf-add.press::after { animation: none !important; }
.ap-approve { transition: background-color 500ms ease, box-shadow 500ms ease; }
.ap-approve.press { background: var(--brand-pressed); box-shadow: 0 0 0 3px #006EF526; }
.st-label > * { transition: opacity 600ms ease; }

.ap-s .ap-re { margin-inline-start: auto; }
.ap-s .ap-re + .pa-tick { margin-inline-start: 6px; }


/* Workflows card: a role is set, and the right person is assigned */
.st--wf .wf-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.wf-field { margin-inline-start: auto; display: inline-grid; padding: 3px 10px; border-radius: 6px; border: 1px solid #C9D2E0; background: #fff; font-size: 12px; color: var(--ink); white-space: nowrap; transition: border-color 500ms ease, box-shadow 500ms ease; }
.wf-f2 > .s-a { color: #8590A2; }
.wf-f2.focus:not(.unfocus) { border-color: var(--brand); box-shadow: 0 0 0 3px #006EF526; }
.wf-result { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); transition: opacity 600ms ease; }
.wf-result .ic { width: 13px; height: 13px; color: var(--brand); }
.wf-result .av { width: 20px; height: 20px; font-size: 9px; }
.wf-result b { color: var(--ink); font-weight: 600; }
.st.is-run .wf-result:not(.on) { opacity: 0; }
.st.is-run.st--wf .wf-row:not(.on) { opacity: 1; }

/* ── 3 · Workflows: one document, four stops ──────────── */
.wfs { background: #fff; padding-block: var(--section); }
.wfs::before { display: none; }
.wfs__head { max-width: 640px; margin: 0 auto; text-align: center; }
.wfs__eyebrow { font: 600 13px/1.3 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--link); margin-bottom: 14px; }
html[lang="ar"] .wfs__eyebrow { text-transform: none; letter-spacing: 0; }
.wfs__head h2 { font: 700 clamp(1.875rem, 2.2vw + 1.1rem, 3rem)/1.12 var(--font); letter-spacing: -0.02em; }
.wfs__head .sec-lead { margin-inline: auto; }
.wfs__story { display: grid; gap: 32px; align-items: center; max-width: 1080px; margin: 48px auto 0; }
@media (min-width: 900px) { .wfs__story { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 40px; } }

.wfs__scene { position: relative; height: 340px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 45%, #EAF2FF 0%, #F6F9FF 55%, #fff 100%); }
.wfs__scene > * { position: absolute; }


.wfs__copy { padding-inline: 4px; }
.wfs__count { text-align: start; unicode-bidi: plaintext; font-size: 12px; color: var(--brand); letter-spacing: 1px; }
.wfs__copy h3 { margin-top: 14px; font: 700 clamp(1.5rem, 1.2vw + 1.1rem, 2rem)/1.2 var(--font); letter-spacing: -0.015em; }
.wfs__copy p:last-child { margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 26em; min-height: 3.2em; }
.wfs__copy.is-swap > * { animation: f-fade 400ms ease both; }

.wfs__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1080px; margin: 36px auto 0; }
.wfs-step { display: grid; gap: 10px; width: 100%; padding: 0 0 6px; border: 0; background: none; cursor: pointer; text-align: start; font: 500 14px/1.2 var(--font); color: var(--ink-3); }
.wfs-step .mono { margin-inline-end: 8px; font-size: 12px; }
.wfs-step > span:not(.wfs-bar) { display: inline; }
.wfs-bar { display: block; height: 3px; border-radius: 3px; background: #E6EDF6; overflow: hidden; }
.wfs-bar b { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .wfs-bar b { transform-origin: right; }
.wfs-step--sign .wfs-bar b { background: var(--sig-bold); }
.wfs-step.is-on { color: var(--ink); }
.wfs-step:hover { color: var(--ink); }
html[lang="ar"] .wfs-step { font-family: "IBM Plex Sans Arabic", var(--font); }
.wfs__hint { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-3); display: none; }

/* pinned scroll on wide, tall screens */
.scrolly .wfs { height: 400vh; padding-block: 0; }
.scrolly .wfs__pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
.scrolly .wfs__pin > .wrap { width: 100%; }
.scrolly .wfs__story { margin-top: 20px; }
.scrolly .wfs__hint { display: block; }

@media (max-width: 899px) {
  .wfs__scene { height: 300px; }
  .wfs__rail { gap: 8px; } .wfs-step { font-size: 12px; } .wfs-step .mono { display: block; margin: 0 0 2px; }
}
[dir="rtl"] .wfs__count { text-align: right; }

/* step 2: parallel review details */
@keyframes wfs-pulse { 50% { opacity: .3; } }
@media (max-width: 899px) {
}


/* Workflows scene: the Imda app behind, the person's card in front, one token between them */
.wfs__scene { height: 420px; }
.wb { left: 16px; right: -40px; top: 18px; height: 290px; z-index: 1; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid #DCE6F3; box-shadow: 0 1px 2px #091E4214, 0 24px 48px -20px #091E4247; }
.wb__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F7F8F9; border-bottom: 1px solid #091E4214; }
.wb__bar i { width: 8px; height: 8px; border-radius: 50%; background: #DCDFE4; }
.wb__bar span { margin-inline-start: 10px; font-size: 11px; color: var(--ink-3); }
.wb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 56px 0 16px; border-bottom: 1px solid #EEF2F7; }
.wb__doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--tint-blue); color: var(--brand); }
.wb__ic .ic { width: 15px; height: 15px; }
.wb__doc b { display: block; font: 600 14px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.wb__doc small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.wb.is-empty .wb__doc b { color: var(--ink-3); font-weight: 500; }
.wb-chip { flex: none; padding: 3px 9px; border-radius: 999px; background: #F1F2F4; color: var(--ink-2); font: 600 11px/1.4 var(--font); white-space: nowrap; transition: background-color 400ms ease, color 400ms ease; }
.wb-chip.is-blue { background: var(--tint-blue); color: var(--brand-pressed); }
.wb-chip.is-ok { background: var(--ok-bg); color: var(--ok-tx); }
.wb-chip.is-sign { background: var(--sig-bg); color: var(--sig-tx); }
.wb__rows { position: relative; padding: 6px 56px 0 16px; }
.wb-row { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) 132px 118px; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 14px; border-radius: 8px; font-size: 12px; color: var(--ink-2); transition: background-color 500ms ease; }
.wb-row + .wb-row { margin-top: 2px; }
.wb-row.is-on { background: #F0F6FF; }
.wb-row--sign.is-on { background: #F6F3FF; }
.wb-step { font-weight: 600; color: var(--ink); }
.wb-who { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink); font-weight: 500; }
.wb-who.is-empty { color: #8590A2; font-weight: 400; }
.wb-av { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tint-blue); color: var(--brand-pressed); font: 600 9px/1 var(--font); font-style: normal; }
.wb-who.is-empty .wb-av { background: #F1F2F4; color: #8590A2; }
.wb-row--sign .wb-av { background: var(--sig-bg); color: var(--sig-tx); }
.wb-state { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-3); }
.wb-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #C1C7D0; transition: background-color 400ms ease; }
.wb-state.is-live { color: var(--brand-pressed); } .wb-state.is-live i { background: var(--brand); animation: wfs-pulse 1.4s ease-in-out infinite; }
.wb-state.is-late { color: #7F5F01; } .wb-state.is-late i { background: #E2B203; }
.wb-state.is-ok { color: var(--ok-tx); } .wb-state.is-ok i { background: #1F845A; }
.wb-state.is-sign { color: var(--sig-tx); } .wb-state.is-sign i { background: var(--sig-bold); animation: wfs-pulse 1.4s ease-in-out infinite; }
.wb-bracket { position: absolute; left: 4px; top: 10px; width: 8px; height: 82px; border: 2px solid var(--brand); border-right: 0; border-radius: 6px 0 0 6px; opacity: 0; }

.wc { right: 36px; top: 284px; z-index: 3; width: 244px; border-radius: 16px; background: #fff; overflow: hidden;
  border: 1px solid #DCE6F3; box-shadow: 0 1px 2px #091E4214, 0 28px 56px -18px #091E4259; }
.wc__body { padding: 14px 16px 18px; }
.wc__body.is-swap > * { animation: f-fade 400ms ease both; }
.wc__who { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.wc__who .wb-av { width: 20px; height: 20px; }
.wc__who .ic { width: 13px; height: 13px; color: var(--brand); }
.wc__title { margin-top: 8px; font: 600 14px/1.3 var(--font); color: var(--ink); }
.wc__meta { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.wc__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 8px; background: var(--brand); color: #fff; font: 600 12px/1 var(--font); transition: transform 200ms ease, background-color 300ms ease; }
.wc__btn .ic { width: 13px; height: 13px; }
.wc__btn.is-press { transform: scale(.94); background: var(--brand-pressed); }
.wc__btn.is-done { background: var(--ok-bg); color: var(--ok-tx); }
.wc__btn--sign { background: var(--sig-bold); }
.wc__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--ink-3); }
.wc__foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.wc__foot.is-ok { color: var(--ok-tx); } .wc__foot.is-ok i { background: #1F845A; }
.wc__days { display: block; width: 150px; margin-top: 7px; height: 4px; border-radius: 4px; background: #F8E6A0; overflow: hidden; }
.wc__days i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #E2B203; }

.wt { left: 0; top: 0; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 6px 16px -4px #006EF580; opacity: 0; pointer-events: none; }
.wt .ic { width: 14px; height: 14px; }
.wt.is-bell { background: #E2B203; box-shadow: 0 6px 16px -4px #E2B20380; }
.wt.is-ok { background: #1F845A; box-shadow: 0 6px 16px -4px #1F845A80; }
.wt.is-sign { background: var(--sig-bold); box-shadow: 0 6px 16px -4px #6E5DC680; }

@media (max-width: 899px) {
  .wfs__scene { height: 436px; }
  .wb { left: 10px; right: -30px; }
  .wb__head { padding-right: 40px; }
  .wb__rows { padding: 6px 36px 0 10px; }
  .wb-row { grid-template-columns: 52px minmax(0, 1fr) 96px; padding: 0 6px 0 12px; }
  .wc { right: 12px; width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .wb-state i { animation: none !important; } }

/* Step 1 layout: the document card on the left, a dotted line into the app's documents list */
.wc { left: 12px; right: auto; top: 150px; width: 224px; }
.wb { left: 176px; right: -40px; top: 16px; height: 388px; }
.wb__view { position: absolute; inset: 30px 0 0 0; }
.wb__list { padding: 18px 56px 0 64px; }
.wb__detail { opacity: 0; }
.wb__head { padding-left: 64px; }
.wb__rows { padding-left: 52px; }
.wl-title { margin-bottom: 8px; font: 600 15px/1.2 var(--font); color: var(--ink); }
.wl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; padding: 0 10px; border-bottom: 1px solid #EEF2F7; border-radius: 6px; }
.wl-row b { display: block; font: 600 13px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.wl-row small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.wl-new { height: 0; overflow: hidden; opacity: 0; transition: background-color 600ms ease; }
.wl-new.is-new { background: #F0F6FF; }
.wb-chip.is-late { background: #FFF7D6; color: #7F5F01; }
.wl-line { left: 0; top: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.wl-line path { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.wt--pill { width: auto; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }

.wb-row { grid-template-columns: 56px minmax(0, 1fr) 112px; }
.wb-who__t { display: grid; gap: 2px; min-width: 0; }
.wb-who__t b { font: 500 12px/1.2 var(--font); color: var(--ink); }
.wb-who__t small { font-size: 11px; line-height: 1.2; color: var(--ink-3); }
.wb-who.is-empty .wb-who__t b:empty, .wb-who .wb-who__t small:empty { display: block; height: 7px; border-radius: 4px; background: #EEF1F5; }
.wb-who.is-empty .wb-who__t b:empty { width: 72px; }
.wb-who .wb-who__t small:empty { width: 52px; }
.wb-who.is-role .wb-who__t b { color: #8590A2; font-weight: 400; }
.wb-who.is-empty .wb-av, .wb-who.is-role .wb-av { background: #F1F2F4; color: #8590A2; }
.wb-who__t b, .wb-who__t small { transition: color 400ms ease; }
.wb-av { transition: color 400ms ease, background-color 400ms ease; }

@media (max-width: 899px) {
  .wfs__scene { height: 470px; }
  .wc { left: 12px; top: 10px; width: 236px; }
  .wb { left: 10px; right: -30px; top: 168px; height: 320px; }
  .wb__list { padding: 14px 40px 0 14px; }
  .wb__head { padding-left: 14px; }
  .wb__rows { padding-left: 4px; }
  .wb-row { grid-template-columns: 52px minmax(0, 1fr) 100px; }
}
.wb-row { grid-template-columns: 56px minmax(0, 1fr) 104px; }
.wb-who__t b, .wb-who__t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb__doc { flex: 1; } .wb__doc > div { min-width: 0; } .wb__doc b, .wb__doc small { overflow: hidden; text-overflow: ellipsis; }
.wt--pill { gap: 5px; grid-auto-flow: column; }
.wt--pill .ic { width: 12px; height: 12px; }
.wb__head { padding-right: 46px; gap: 8px; } .wb__doc b { font-size: 13px; }

/* Two reviewers: cards stacked on the left, one dotted line forking to both */
.wb { left: 210px; }
.wb__list, .wb__head { padding-left: 30px; }
.wb__rows { padding-left: 22px; }
.wc { left: 10px; right: auto; width: 196px; }
.wc--a { top: 250px; opacity: 0; }
.wc--b { top: 40px; transition: opacity 500ms ease; }
.wc--b.is-done { opacity: .6; }
.wc__body { padding: 14px 14px 16px; }
.wc__title { font-size: 13px; }
@media (max-width: 899px) {
  .wfs__scene { height: 480px; }
  .wb { left: 10px; top: 168px; }
  .wb__list, .wb__head { padding-left: 14px; }
  .wb__rows { padding-left: 4px; }
  .wc { width: calc(50% - 14px); top: 10px; }
  .wc--b { left: 10px; }
  .wc--a { left: auto; right: 10px; }
  .wc__body { padding: 10px 10px 12px; }
  .wc__who { font-size: 10px; } .wc__title { font-size: 12px; } .wc__meta { font-size: 10px; }
  .wc__btn { padding: 6px 8px; font-size: 11px; }
}

/* Wider scene so the lines have room between the cards and the app */
@media (min-width: 900px) { .wfs__story { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.wb { left: 236px; }
.wc { width: 180px; }
.wc--a { z-index: 2; }
.wc--b { z-index: 3; }
.wl-line path { transition: none; }
@media (max-width: 899px) { .wb { left: 10px; } .wc { width: calc(50% - 14px); } }

/* Cards sit lower so each line can leave the app, run left, then drop into the card */
.wc--b { top: 104px; }
.wc--a { top: 276px; }
@media (max-width: 899px) { .wc--a, .wc--b { top: 10px; } }
/* Mid widths: give the scene the full row and put the copy underneath */
@media (min-width: 900px) and (max-width: 1099px) {
  .wfs__story { grid-template-columns: 1fr; max-width: 760px; }
  .wfs__copy { text-align: center; } .wfs__copy p:last-child { margin-inline: auto; }
}

/* Reminder shown as the card's own content, not an overlay */
.wc__who--late { color: #7F5F01; font-weight: 600; }
.wc__who--late .ic { color: #B38600; }
.wc .wc__days { width: 100%; margin-top: 8px; background: #F8E6A0; }
.wc__meta--late { margin-top: 5px; color: #7F5F01; }
.wc--a .wc__body { min-height: 118px; }

/* Step 4: signing is the one purple moment */
.wb-av--sig { background: var(--sig-bg) !important; color: var(--sig-tx) !important; }
.wc__sig { display: block; width: 120px; height: 34px; margin-top: 6px; border-bottom: 1px dashed #DCD5F7; }
.wc__sig path { fill: none; stroke: #352C63; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.wc__sig.is-done path { stroke-dashoffset: 0; }
.wc__code { margin-top: 8px; font-size: 16px; letter-spacing: 2px; color: var(--sig-tx); }
.wc__who--ok { color: var(--ok-tx); font-weight: 600; }
.wc__who--ok .ic { color: #1F845A; }

/* ── Pilot: three steps, one action ───────────────────── */
.pilot { padding-block: var(--section); background: var(--soft); }
.pilot__steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 900px) { .pilot__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilot__steps li { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.pilot__day { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--tint-blue); color: var(--brand-pressed); font-size: 12px; }
.pilot__steps b { margin-top: 6px; font: 600 18px/1.3 var(--font); color: var(--ink); }
.pilot__steps li > span:last-child { color: var(--ink-2); line-height: 1.55; }
.pilot__cta { margin-top: 28px; }
html[lang="ar"] .pilot__day { font-family: "IBM Plex Sans Arabic", var(--font); }

/* ── Footer legal links ───────────────────────────────── */
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.footer__links a:hover { color: var(--ink); }

/* ── Cookie notice: small, bottom, one button ────────── */
.cookie { position: fixed; z-index: 60; inset-inline: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 560px; margin-inline: auto; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px #091E4214, 0 20px 40px -16px #091E4247; font-size: 14px; color: var(--ink-2); }
.cookie[hidden] { display: none; }
.cookie p { flex: 1 1 260px; margin: 0; line-height: 1.5; }
.cookie__actions { display: flex; align-items: center; gap: 16px; }
.cookie__actions a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Made with love in Oman, by MTS: a quiet line under the hero call to action */
.hero__made { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 22px; font-size: 13px; line-height: 1.4; color: #8590A2; }
.hero__made .made__heart { flex: none; }
.hero__made a { display: inline-flex; align-items: center; gap: 6px; color: #6B778C; text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.hero__made a:hover { color: #030073; border-bottom-color: #03007333; }
.hero__made .made__mark { width: 16px; height: 16px; color: #030073; opacity: .85; }
.hero__made .made__mark path { fill: currentColor; }
.footer__mts { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #030073; text-decoration: none; }
.footer__mts:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__mark { width: 22px; height: 22px; color: #030073; } .footer__mark path { fill: currentColor; }
[dir="rtl"] .hero__made a, [dir="rtl"] .footer__mts { direction: ltr; }
.footer__brand .footer__mts svg.footer__mark { width: 22px !important; height: 22px !important; flex: none; }

/* ── Motion, touch and focus pass ─────────────────────── */
/* Micro-interactions share one easing: menu, current-section underline, FAQ, button icons */
@media (max-width: 1023px) {
  .nav__links { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s linear 300ms; }
  .nav.is-open .nav__links { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
}
@media (min-width: 1024px) { .nav__links a::after { transition: transform 400ms var(--ease-out); } }
.faq__list summary::after { transition: transform 300ms var(--ease-out); }
@supports (interpolate-size: allow-keywords) {
  .faq__list details::details-content { transition: height 400ms var(--ease-out), content-visibility 400ms allow-discrete; }
}
.btn--ghost .ic, .btn--wa .ic { transition: transform 300ms var(--ease-out); }
.wfs__copy.is-swap > *, .wc__body.is-swap > * { animation-timing-function: var(--ease-out); }

/* Touch: no hover nudges left stuck after a tap; tap targets at least 44px */
@media (hover: none) {
  .btn--ghost:hover .ic, .btn--wa:hover .ic { transform: none; }
  .nav__toggle:hover { background: none; }
}
.nav__toggle { flex: none; }
@media (max-width: 479px) { .nav__wa { margin-inline-start: 4px; } .nav__wa::before { inset-inline-start: -8px; } } /* room for the full 44px menu button */
@media (max-width: 374px) { .nav__inner { gap: 6px; } .nav__wa { padding-inline: 12px; } }
@media (pointer: coarse) {
  .nav__logo { align-items: center; min-height: 44px; }
  .nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .band__alt a, .cookie__actions a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 1023px) { .nav__links a { display: flex; min-height: 52px; } }

/* Keyboard focus stays visible on the blue band */
.band :focus-visible { outline-color: #fff; }

/* Pinned workflows: a little tighter so the rail fits the screen; the hint drops out when space is short */
.scrolly .wfs__rail { margin-top: 24px; }
.scrolly .wfs__hint { margin-top: 12px; }
.scrolly-tight .wfs__hint { display: none !important; }

/* Hero manager's view: a changed row glows once */
.tr.is-flash { animation: row-flash 1200ms cubic-bezier(0.16,1,0.3,1) 1; }
@keyframes row-flash { 0% { background-color: #E9F2FF; } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .tr.is-flash { animation: none; } }