/* The difference (#difference). Prefix: hd-
   Navy zone. "Not a dashboard. A decision engine."
   1. The morph. A traditional dashboard (every number equally loud, no next step) steps aside and dims;
      three quiet connectors carry its data into one Zimam decision card, which arrives with a soft ring.
      >= 1024px wide (and >= 700px tall): head and stage are held in view by CSS sticky while the page
      scrolls through an empty run (the ::after spacer); js/h-difference.js scrubs the morph across that run.
      Below: stacked (dashboard, connectors running down, the card), scrubbed as it passes.
   2. The comparison: a real table, built row by row. Traditional column muted with a quiet cross,
      Zimam column full strength with a blue check on a faint accent band. Phones: each feature heads its pair.
   The CSS below is the final frame: reduced motion and no JS show it as is. */

.hd {
  --hd-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  /* Dashboard width drives every size inside it (em). Wide screens: as wide as the height allows. */
  --hd-dw: clamp(420px, min(46vw, (100vh - var(--hd-top) - 330px) * 1.55), 620px);
  --hd-fs: calc(var(--hd-dw) / 44);
  --hd-dim: .42;                                                     /* the dashboard once the answer is in */
  --hd-hair: color-mix(in srgb, var(--page-ink) 13%, transparent);   /* table hairlines */
  --hd-tint: color-mix(in srgb, var(--accent) 10%, transparent);     /* the Zimam column band */
  --zl-word: var(--page-ink);                                        /* the real lockup reads white on navy */
}

/* ---------- Head ---------- */
.hd-head { margin-block-end: clamp(36px, 5vw, 64px); }
.hd-title__em { color: var(--accent); }
.hd-lead { max-width: 36rem; }

/* ---------- Stage: dashboard, connectors, decision ---------- */
.hd-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: clamp(88px, 22vw, 120px);          /* the connectors run down through this gap */
}
.hd-fig { position: relative; z-index: 1; margin: 0; min-width: 0; }

.hd-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hd-wire__rev { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: butt; }
.hd-port circle { fill: var(--page-bg); stroke: var(--rope-ring); stroke-width: 1.5; }
.hd-end__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .45; }
.hd-end__dot { fill: var(--accent); }
.hd-pk { opacity: 0; }
.hd-pk__halo { fill: var(--accent); opacity: .22; }
.hd-pk__dot { fill: var(--accent); }

/* Captions: what each side is */
.hd-cap {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px;
  margin-block-end: 12px;
  font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
  color: var(--page-ink-2);
}
.hd-cap__ico { width: 18px; height: 18px; color: var(--page-ink-3); }
:lang(ar) .hd-cap { letter-spacing: 0; }
.hd-cap--zim { gap: 12px; }
.hd-logo { --zl-h: 26px; }
.hd-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-size: .75rem; font-weight: 600; line-height: 1.3; letter-spacing: .01em;
  white-space: nowrap;
}
:lang(ar) .hd-tag { letter-spacing: 0; font-size: .8125rem; }

/* ---------- Before: the traditional dashboard (sizes in em, from --hd-fs) ---------- */
.hd-fig--dash { width: min(100%, 600px); }
.hd-dash {
  --hd-line: var(--c-blue);
  font-size: clamp(10.5px, 2.85vw, 13.5px);
  display: grid;
  gap: .85em;
  padding: 1em;
  border-radius: 1.3em;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 30px 60px -30px rgba(0, 0, 0, .55);
  opacity: var(--hd-dim);
}
.hd-dash__bar { display: flex; align-items: center; gap: .55em; min-width: 0; }
.hd-dash__title { flex: 1; min-width: 0; font-size: 1.1em; font-weight: 600; letter-spacing: -.01em; }
.hd-dash__range,
.hd-dash__tool {
  display: inline-flex; align-items: center; gap: .4em;
  height: 2.2em; padding-inline: .7em;
  border: 1px solid var(--g-150); border-radius: .7em;
  font-size: .85em; font-weight: 500; color: var(--g-600);
  white-space: nowrap;
}
.hd-dash__tool { width: 2.2em; padding: 0; justify-content: center; }
.hd-dash__range .ico, .hd-dash__tool .ico { width: 1.15em; height: 1.15em; color: var(--g-500); }

.hd-dash__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65em; }
.hd-w {
  display: grid; align-content: start; gap: .5em;
  min-width: 0;
  padding: .75em .85em .85em;
  border: 1px solid var(--g-150);
  border-radius: .9em;
  background: var(--surface-2);
}
.hd-w--kpi { grid-column: span 2; }
.hd-w--line { grid-column: span 4; }
.hd-w--donut { grid-column: span 2; }
.hd-w--bars,
.hd-w--table { grid-column: span 3; }
.hd-w__label { font-size: .8em; font-weight: 500; line-height: 1.2; color: var(--g-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-w__row { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; }
.hd-w__val { font-size: 1.4em; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
.hd-w__of { font-size: .85em; font-weight: 500; color: var(--g-400); align-self: flex-end; }
.hd-w .delta { font-size: .72em; padding: .1em .45em; }
.hd-w .delta .ico { width: 1em; height: 1em; }

.hd-chart { width: 100%; height: 5.4em; overflow: visible; }
.hd-chart__grid { fill: none; stroke: var(--g-150); stroke-width: 1; }
.hd-chart__area { fill: color-mix(in srgb, var(--hd-line) 9%, transparent); }
.hd-chart__line { fill: none; stroke: var(--hd-line); stroke-width: 2; stroke-linejoin: round; }
[dir="rtl"] .hd-chart { transform: scaleX(-1); }   /* time runs with the reading direction */

.hd-w--donut { justify-items: center; }
.hd-w--donut .hd-w__label { justify-self: start; }
.hd-donut { width: 5.2em; height: 5.2em; transform: rotate(-90deg); }
.hd-donut circle { fill: none; stroke-width: 9; }
.hd-donut__track { stroke: var(--c-track); }
.hd-donut__s--1 { stroke: var(--c-blue); }
.hd-donut__s--2 { stroke: var(--c-sky); }
.hd-donut__s--3 { stroke: var(--c-yellow); }

.hd-bars { display: flex; align-items: flex-end; gap: .35em; height: 4.2em; }
.hd-bars i { flex: 1; height: 100%; border-radius: .25em .25em .1em .1em; background: var(--c-sky); opacity: .85; transform: scaleY(var(--h)); transform-origin: 50% 100%; }
.hd-bars i:nth-child(7) { background: var(--c-blue); opacity: 1; }

.hd-tbl { display: grid; gap: .5em; }
.hd-tbl__r { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: .6em; font-size: .82em; line-height: 1.2; color: var(--g-700); }
.hd-tbl__n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-tbl__r i { height: .45em; border-radius: 99px; background: var(--g-200); transform: scaleX(var(--w)); transform-origin: left center; }
[dir="rtl"] .hd-tbl__r i { transform-origin: right center; }
.hd-tbl__r b { font-weight: 600; color: var(--ink); }

/* The merchant's question, in the margin: written on the caption line, the arrow points down into the dashboard. */
.hd-note {
  position: absolute;
  z-index: 2;
  top: -4px;
  inset-inline-end: 2%;
  display: flex; align-items: flex-start; gap: 2px;
  color: var(--page-ink);
  rotate: -3deg;
  pointer-events: none;
  opacity: .9;
}
.hd-note__t { font-size: 1.625rem; line-height: 1; color: inherit; white-space: nowrap; padding-block-start: 4px; }
:lang(ar) .hd-note__t { font-size: 1.0625rem; line-height: 1.5; padding-block-start: 0; }
.hd-note__arw { width: 44px; height: 38px; margin-block-start: 14px; overflow: visible; }
.hd-note__arw path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .hd-note { rotate: 3deg; }

/* ---------- After: one decision ---------- */
.hd-fig--zim { width: min(100%, 340px); }
.hd-cap--zim { justify-content: flex-start; }
.hd-rec { width: 100%; }

/* ---------- Wide: side by side ---------- */
@media (min-width: 1024px) {
  .hd-stage {
    grid-template-columns: var(--hd-dw) minmax(96px, 220px) minmax(280px, 340px);
    justify-content: center;
    align-items: center;
    row-gap: 0;
  }
  .hd-fig--dash { grid-column: 1; width: 100%; }
  .hd-fig--zim { grid-column: 3; width: 100%; }   /* same caption height on both sides: the card centres on the dashboard */
  .hd-dash { font-size: var(--hd-fs); }
}
@media (min-width: 1280px) {
  .hd-fig--zim { scale: 1.08; transform-origin: 0 50%; }
  [dir="rtl"] .hd-fig--zim { transform-origin: 100% 50%; }
}

/* Held: head and stage stay in view under the nav while the run scrolls past. */
@media (min-width: 1024px) and (min-height: 700px) {
  html.js-motion .hd { padding-block-start: clamp(24px, 3vw, 48px); }
  html.js-motion .hd-morph::after { content: ""; display: block; height: var(--hd-run, 110vh); }
  html.js-motion .hd-hold {
    position: sticky;
    top: var(--hd-top);
    display: grid;
    align-content: center;
    height: calc(100vh - var(--hd-top));
  }
  html.js-motion .hd-head { margin-block-end: clamp(28px, 4.6vh, 56px); }
  html.js-motion .hd-title { font-size: min(var(--fs-h2), 7.2vh); }
}

/* ---------- Phones: the question gets its own line under the caption ---------- */
@media (max-width: 479px) {
  .hd-fig--dash { display: grid; }
  .hd-cap { margin-block-end: 0; }
  .hd-note { position: relative; top: auto; inset-inline-end: auto; justify-self: end; margin: -6px 6px 4px 0; }
  [dir="rtl"] .hd-note { margin: -6px 0 4px 6px; }
  .hd-note__t { font-size: 1.4375rem; }
  .hd-note__arw { width: 36px; height: 32px; margin-block-start: 10px; }
}

/* ---------- The comparison table ---------- */
.hd-cmp-wrap { max-width: 1040px; margin: clamp(64px, 9vw, 120px) auto 0; }
.hd-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hd-cmp th,
.hd-cmp td {
  padding: 22px clamp(14px, 2vw, 28px);
  border-block-end: 1px solid var(--hd-hair);
  text-align: start;
  vertical-align: middle;
  font-weight: inherit;
}
.hd-cmp__h--f { width: 26%; }
.hd-cmp__h--t,
.hd-cmp__h--z { width: 37%; }
.hd-cmp thead th { padding-block: 22px 20px; vertical-align: bottom; }
.hd-cmp__h--f {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--page-ink-3);
}
:lang(ar) .hd-cmp__h--f { letter-spacing: 0; text-transform: none; font-size: .9375rem; }
.hd-cmp__h--t { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--page-ink-2); }
.hd-cmp__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.hd-cmp__f { font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--page-ink-2); }
.hd-cmp__t,
.hd-cmp__z { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em; }
.hd-cmp__t { color: var(--page-ink-3); }
.hd-cmp__z { color: var(--page-ink); font-weight: 500; }
:lang(ar) .hd-cmp__t, :lang(ar) .hd-cmp__z { letter-spacing: 0; line-height: 1.6; }

/* The Zimam column sits on one faint band, from its header to the last row. */
.hd-cmp__h--z,
.hd-cmp__z { background: var(--hd-tint); }
.hd-cmp__h--z { border-start-start-radius: 20px; border-start-end-radius: 20px; }
.hd-cmp__row:last-child .hd-cmp__z { border-end-start-radius: 20px; border-end-end-radius: 20px; }
.hd-cmp__row:last-child > * { border-block-end-color: transparent; }

.hd-cell { display: flex; align-items: center; gap: 12px; }
.hd-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.hd-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-mark--x { color: var(--page-ink-3); box-shadow: inset 0 0 0 1.5px var(--hd-hair); }
.hd-mark--x svg { width: 12px; height: 12px; stroke-width: 1.75; }
.hd-mark--ok { background: var(--z-blue); color: #fff; }

/* ---------- Phones and small tablets: each feature heads its pair ---------- */
@media (max-width: 767px) {
  .hd-cmp, .hd-cmp thead, .hd-cmp tbody { display: block; }
  .hd-cmp__head,
  .hd-cmp__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .hd-cmp th, .hd-cmp td { padding: 14px 14px; }
  .hd-cmp__h--f { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hd-cmp__head > * { border-block-end: 0; }
  .hd-cmp thead th { padding-block: 16px 14px; }
  .hd-cmp__h--t { font-size: .9375rem; align-self: end; }
  .hd-cmp__brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hd-cmp__row { padding-block: 4px 0; }
  .hd-cmp__f {
    grid-column: 1 / -1;
    padding: 18px 2px 8px;
    border-block-end: 0;
    font-size: .8125rem; font-weight: 600; color: var(--page-ink-3);
  }
  .hd-cmp__t, .hd-cmp__z { font-size: .9375rem; align-self: stretch; }
  .hd-cmp__t { border-block-end: 0; padding-inline-start: 2px; }
  .hd-cmp__z { border-block-end: 0; border-radius: 14px; }
  .hd-cmp__h--z { border-radius: 14px; }
  .hd-cmp__row { border-block-end: 1px solid var(--hd-hair); padding-block-end: 14px; }
  .hd-cmp__row:last-child { border-block-end: 0; }
  .hd-cell { align-items: flex-start; gap: 10px; }
  .hd-mark { width: 22px; height: 22px; margin-block-start: 1px; }
  :lang(ar) .hd-mark { margin-block-start: 4px; }
}