/* Process (#process). Prefix: hw-
   "From data to decisions": five steps on one quiet connector. A small packet travels it from Collect to
   Grow (right to left in Arabic) and stops at every step: the node fills with Zimam blue, then that step's
   tiny visual plays once (js/h-process.js). The travelled part of the connector turns blue.
     1 Collect: four sources close ranks.          2 Analyze: a week's pattern resolves in the dots.
     3 Recommend: the decision card (.zrec--compact). 4 Execute: a tap, and the button confirms.
     5 Grow: the "came back" line rises (it only ever climbs), with its one label.
   Wide and tall enough (>= 1024 x 600): a horizontal timeline (visuals above the nodes, text below, one
   subgrid so they line up); with motion the frame pins while the steps play. Otherwise a vertical timeline.
   The markup and this file hold the final frame (every step lit): reduced motion and no JS show it as is.
   Motion uses transform and opacity only. */

.hw {
  --hw-node: 20px;
  --hw-dim: .42;               /* steps the packet has not reached yet */
  --hw-done: #15803D;          /* confirmed state behind white text (4.9:1 in both themes) */
}

.hw-lead { max-width: 36rem; }

/* ---------- Timeline ---------- */
.hw-flow { position: relative; }
.hw-rail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The travelled part: the same dashes, in blue (clipped from node 1 to the packet). */
.hw-rail__fill { stroke: var(--z-blue-text); opacity: .75; }

/* The packet: a small blue dot while it travels; at rest it sinks into its node. Placed by JS (physical px). */
.hw-pk, .hw-halo { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.hw--live .hw-pk, .hw--live .hw-halo { visibility: visible; }
.hw-pk { z-index: 3; }
.hw-pk__dot {
  position: absolute; left: -6px; top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--z-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--z-blue) 20%, transparent);
  opacity: 0; transform: scale(.4);
  transition: opacity .16s var(--ease-out), transform .3s var(--ease-out);
}
.hw-pk.is-moving .hw-pk__dot { opacity: 1; transform: none; transition: opacity .18s var(--ease-out), transform .35s var(--ease-spring); }

/* The halo: where the packet rests, a soft ring opens around the node (under it), with one ripple. */
.hw-halo { z-index: 1; }
.hw-halo__glow, .hw-halo__ping { position: absolute; border-radius: 50%; }
.hw-halo__glow {
  left: -22px; top: -22px; width: 44px; height: 44px;
  background: color-mix(in srgb, var(--z-blue) 13%, transparent);
  opacity: 0; transform: scale(.45);
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out);
}
.hw-halo.is-on .hw-halo__glow { opacity: 1; transform: none; transition: opacity .35s var(--ease-out) .05s, transform .6s var(--ease-spring) .05s; }
.hw-halo__ping {
  left: -12px; top: -12px; width: 24px; height: 24px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--z-blue) 60%, transparent);
  opacity: 0;
}

.hw-steps { position: relative; z-index: 2; }
.hw-step { position: relative; min-width: 0; }

/* Node: a quiet ring on the connector; lit, a blue disc grows in it, then its white centre. */
.hw-node {
  position: relative;
  display: block;
  width: var(--hw-node); height: var(--hw-node);
  border-radius: 50%;
  background: var(--page-bg);
  box-shadow: inset 0 0 0 2px var(--rope-c);
}
.hw-node::before, .hw-node::after { content: ""; position: absolute; border-radius: 50%; }
.hw-node::before {
  inset: 0;
  background: var(--z-blue);
  opacity: 0; transform: scale(.35);
  transition: opacity .2s var(--ease-out), transform .5s var(--ease-spring);
}
.hw-node::after {
  inset: 0; margin: auto; width: 6px; height: 6px;
  background: #fff;
  opacity: 0; transform: scale(.2);
  transition: opacity .25s var(--ease-out) .12s, transform .45s var(--ease-spring) .12s;
}
.hw-step.is-on .hw-node::before, .hw-step.is-on .hw-node::after { opacity: 1; transform: none; }

/* Text: steps not reached yet wait, dimmed. */
.hw-text { display: grid; align-content: start; gap: 6px; min-width: 0; transition: opacity .45s var(--ease-out); }
.hw-step:not(.is-on) .hw-text { opacity: var(--hw-dim); }
.hw-num {
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.hw-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + .7vw, 1.75rem);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--page-ink);
}
:lang(ar) .hw-name { letter-spacing: 0; line-height: 1.35; }
.hw-line { font-size: .9375rem; line-height: 1.55; color: var(--page-ink-2); text-wrap: pretty; }
:lang(ar) .hw-line { line-height: 1.75; }

/* A state set in one go (load, resize) lands without transitions. */
.hw--snap .hw-node::before, .hw--snap .hw-node::after, .hw--snap .hw-text,
.hw--snap .hw-pk__dot, .hw--snap .hw-halo__glow { transition: none !important; }

/* ---------- Visuals (aria-hidden; one idea each; final states here, JS plays them in) ---------- */
.hw-vis { position: relative; min-width: 0; }

/* 1. Collect: four sources, together; each one's dot is blue (connected) */
.hw-vis--collect { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 6px; width: min(100%, 212px); }
.hw-src {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: 9px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong), 0 6px 14px -8px rgba(16, 24, 40, .22);
  font-size: .75rem; font-weight: 500; line-height: 1; color: var(--g-700);
  white-space: nowrap;
}
:lang(ar) .hw-src { font-size: .8125rem; }
.hw-src::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rope-c); }
.hw-src__dot { position: absolute; inset-inline-start: 9px; top: 50%; width: 6px; height: 6px; margin-block-start: -3px; border-radius: 50%; background: var(--z-blue); }

/* 2. Analyze: a week of mornings, afternoons and evenings; the pattern in blue, strongest on Thursday evening */
.hw-dots { display: grid; grid-template-columns: repeat(7, 14px); gap: 8px; }
.hw-dots i { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--g-150); }
.hw-dots b {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--z-blue);
  opacity: calc(.12 + .88 * var(--k));
  transform: scale(calc(.6 + .4 * var(--k)));
}

/* 3. Recommend: the decision card itself */
.hw-vis--recommend { width: min(100%, 232px); }
.hw-rec { width: 100%; }

/* 4. Execute: the finger has tapped; the button is now its confirmation. Both states keep their natural
   width (they share one grid cell). */
.hw-tap { position: relative; display: inline-grid; place-items: center; margin-block-end: 26px; }
.hw-tap__btn,
.hw-tap__done {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 15px;
  border-radius: 11px;
  color: #fff;
  font-size: .8125rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}
.hw-tap__btn { background: var(--z-blue); opacity: 0; }
.hw-tap__done { background: var(--hw-done); padding-inline: 12px 15px; }
.hw-tap__ok { width: 15px; height: 15px; }
/* The fingertip of the Phosphor hand sits at (45%, 19%) of its box: it rests on the button's lower edge. */
.hw-tap__hand {
  position: absolute; z-index: 2;
  inset-inline-start: calc(50% + 18px);
  top: calc(100% - 11px);
  width: 28px; height: 28px;
  margin-inline-start: -12.6px;
  color: var(--ink);
  transform-origin: 45% 19%;
}
.hw-tap__ico { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .18)); }
.hw-tap__ring {
  position: absolute; z-index: 1;
  inset-inline-start: calc(50% + 18px); top: calc(100% - 5.7px);
  width: 22px; height: 22px; margin-block-start: -11px; margin-inline-start: -11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--z-blue) 55%, transparent);
  opacity: 0;
}

/* 5. Grow: the running total of customers who came back (0 to 21 over 14 days; it only ever climbs) */
.hw-grow { position: relative; display: block; width: min(100%, 200px); height: 76px; margin-block-start: 38px; }
.hw-grow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .hw-grow__svg { transform: scaleX(-1); }   /* time runs with the reading direction */
.hw-grow__base { fill: none; stroke: var(--g-200); stroke-width: 1; }
.hw-grow__area { fill: color-mix(in srgb, var(--z-blue) 9%, transparent); }
.hw-grow__line { fill: none; stroke: var(--z-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.hw-grow__dot {
  position: absolute; inset-inline-start: 96%; top: 0;
  width: 12px; height: 12px; margin-block-start: -6px; margin-inline-start: -6px;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--z-blue);
}
.hw-grow__tip {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 12px);
  padding: 5px 9px; border-radius: 8px;
  background: var(--surface-inverse); color: var(--on-inverse);
  font-size: .75rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
:lang(ar) .hw-grow__tip { font-size: .8125rem; }

/* ---------- Wide and tall enough: horizontal timeline; visuals, nodes and text each share one row ---------- */
@media (min-width: 1024px) and (min-height: 600px) {
  .hw-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: clamp(16px, 2.2vw, 36px);
  }
  .hw-step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    text-align: center;
  }
  .hw-vis { grid-row: 1; align-self: end; display: grid; justify-items: center; width: 100%; margin-block-end: 26px; }
  .hw-vis--collect { display: flex; width: min(100%, 212px); }
  .hw-node { grid-row: 2; }
  .hw-text { grid-row: 3; justify-items: center; padding-block-start: 22px; max-width: 15.5rem; }

  /* With motion, the frame fills the screen and pins: the page stands still while the steps play. */
  html.js-motion .hw { padding-block: 0; }
  html.js-motion .hw-pin {
    display: grid; align-content: center;
    min-height: 100vh; min-height: 100svh;
    padding-block: calc(var(--nav-h) + 12px) 20px;
  }
  html.js-motion .hw-head { margin-block-end: clamp(32px, 6.5vh, 64px); }
  html.js-motion .hw-more { margin-block-start: clamp(32px, 6vh, 64px); }
}
/* Laptop heights: the same frame, a little tighter, so it fits under the menu bar. */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 800px) {
  html.js-motion .hw-head { gap: 12px; }
  .hw-vis { margin-block-end: 20px; }
  .hw-text { padding-block-start: 16px; }
}

/* ---------- Narrow or short: vertical timeline (node on the start side, text, then the visual) ---------- */
@media (max-width: 1023px), (max-height: 599px) {
  .hw-steps { display: grid; max-width: 560px; margin-inline: auto; }
  .hw-step {
    display: grid;
    grid-template-columns: var(--hw-node) minmax(0, 1fr);
    grid-template-areas: "node text" ". vis";
    column-gap: 18px;
    padding-block-end: 44px;
  }
  .hw-step:last-child { padding-block-end: 0; }
  .hw-node { grid-area: node; margin-block-start: 1px; }
  .hw-text { grid-area: text; }
  .hw-vis { grid-area: vis; display: flex; justify-content: flex-start; margin-block-start: 18px; }
  .hw-vis--collect { justify-content: flex-start; width: min(100%, 230px); }
  .hw-vis--recommend { width: min(100%, 260px); }
  .hw-grow { margin-block-start: 34px; }
}

/* ---------- The way into How it works ---------- */
.hw-more { display: flex; justify-content: center; margin-block-start: clamp(48px, 6vw, 80px); }
.hw-link__ico { width: 1.05em; height: 1.05em; transition: transform var(--t-base) var(--ease-out); }
[dir="rtl"] .hw-link__ico { transform: scaleX(-1); }
@media (hover: hover) {
  .hw-link:hover .hw-link__ico { transform: translateX(3px); }
  [dir="rtl"] .hw-link:hover .hw-link__ico { transform: scaleX(-1) translateX(3px); }
}

/* Scroll-scrubbed (wide pin): the state follows the scrollbar, so the small CSS transitions are short and undelayed. */
.hw--scrub .hw-node::before { transition: opacity .12s linear, transform .22s var(--ease-out); }
.hw--scrub .hw-node::after { transition: opacity .12s linear, transform .22s var(--ease-out); }
.hw--scrub .hw-text { transition: opacity .15s linear; }
.hw--scrub .hw-pk__dot, .hw--scrub .hw-halo__glow { transition-delay: 0s; transition-duration: .18s; }