/* The platform (#pillars). Prefix: hb-
   A bento of five cards (three, then two). Each card is a small product moment on dot paper, a title and one
   line. All five scenes are drawn from one kit:
   - .hb-panel  a white scene card (13px radius, hairline, soft shadow), with an optional .hb-panel__head
   - .hb-tag    a source or signal pill (icon tile + label)
   - .hb-toast  a floating moment (a sticker or icon, a small caption, a bold line)
   - .hb-key    the dark key (the Zimam AI core); the loyalty tooltip is the only other dark piece
   - .hb-wires  quiet grey dashes, drawn toward the scene's one focal piece, which alone carries a faint
                blue glow (--hb-glow). The scene clips only its sides, so that glow fades out below it.
   Blue is the only accent, green only means good news, gold only means points and tiers. One exception:
   the revenue split keeps the four channel colours of Zimam's own revenue card (as on How it works).
   Wires use a 0 to 100 viewBox stretched over the scene: a point (x, y) in a path is the point at x% and y%
   of the scene, so wires start inside one piece and end inside another and stay attached at any size; RTL
   mirrors them. Every scene is a size container and rearranges itself by its own width (small cards run
   from about 280 to 390px, the wide ones from 300 to 920px).
   Scenes are still; on hover they come alive very slightly: wires flow toward the focal piece, floating
   pieces drift 2 to 3px, the focal piece sends out a soft ring. Every loop starts from the resting pose
   (positive delays only) so nothing jumps, its size eases in and out with the hover (--hb-amp), and it all
   stops under reduced motion. */

.hb-head__lead { max-width: 40rem; }

.hb-bento {
  --hb-dot: rgba(10, 10, 30, .11);
  --hb-wire: #C4C5CE;
  --hb-paper: var(--surface);
  --hb-hair: rgba(16, 24, 40, .08);
  --hb-sh: 0 0 0 1px var(--hb-hair), 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(20, 30, 80, .3);
  --hb-sh-float: 0 0 0 1px var(--hb-hair), 0 2px 5px -1px rgba(16, 24, 40, .06), 0 16px 30px -14px rgba(20, 30, 80, .34);
  --hb-sh-tag: 0 0 0 1px var(--hb-hair), 0 1px 2px rgba(16, 24, 40, .05), 0 6px 14px -8px rgba(20, 30, 80, .3);
  --hb-glow: 0 14px 26px -14px rgba(51, 92, 255, .36);   /* fades out about 26px below its piece */
  --hb-tile: var(--g-100);
  --hb-key: #12131A;
  --hb-star: #FF9F43;
  --hb-tip-up: #4ADE80;
  --hb-area-a: rgba(51, 92, 255, .16);
  --hb-area-b: rgba(51, 92, 255, 0);
  /* Revenue: Zimam's four channel colours, mapped as on the How it works hero (both themes) */
  --hb-c1: #F5B71F; --hb-c2: var(--c-green); --hb-c3: var(--b-violet); --hb-c4: var(--c-sky);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
[data-theme="dark"] .hb-bento {
  --hb-dot: rgba(255, 255, 255, .1);
  --hb-wire: #4A4B58;
  --hb-paper: #1C1C25;
  --hb-hair: rgba(255, 255, 255, .085);
  --hb-sh: 0 0 0 1px var(--hb-hair), 0 16px 32px -18px rgba(0, 0, 0, .85);
  --hb-sh-float: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 34px -14px rgba(0, 0, 0, .9);
  --hb-sh-tag: 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 16px -8px rgba(0, 0, 0, .75);
  --hb-glow: 0 14px 26px -14px rgba(91, 123, 255, .4);
  --hb-tile: rgba(255, 255, 255, .07);
  --hb-key: #F2F2F5;   /* the key turns light so it stays the strongest contrast in the scene */
  --hb-star: #F2780F;
  --hb-tip-up: #166534;   /* on the light tooltip: 6.4:1 */
  --hb-area-a: rgba(111, 137, 255, .2);
  --hb-area-b: rgba(111, 137, 255, 0);
}

.hb-card {
  grid-column: span 2;
  display: grid; grid-template-rows: auto auto 1fr; align-content: start;
  padding: 12px 12px 26px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -30px rgba(20, 30, 80, .22);
  color: var(--ink);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), --hb-amp .6s var(--ease-out);
}
.hb-card--rv, .hb-card--op { grid-column: span 3; }
.hb-card:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 26px 52px -30px rgba(20, 30, 80, .3); }
[data-theme="dark"] .hb-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 24px 48px -30px rgba(0, 0, 0, .8); }

.hb-card__t {
  margin-block-start: 22px; padding-inline: 14px;
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.3; letter-spacing: -.012em;
}
:lang(ar) .hb-card__t { letter-spacing: 0; line-height: 1.5; }
.hb-card__line { margin-block-start: 8px; padding-inline: 14px; max-width: 34rem; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
:lang(ar) .hb-card__line { line-height: 1.75; }

/* ---------- The scene ---------- */
.hb-vis {
  --s: 1;                             /* -1 in RTL: centring nudges flip with the reading direction */
  position: relative;
  overflow: hidden;                   /* fallback where overflow: clip is not supported */
  overflow: clip visible;             /* clip the sides only: the focal glow fades out below the scene */
  height: clamp(236px, 19vw, 260px);
  border-radius: 16px;
  container-type: inline-size;
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 12px; line-height: 1.3; letter-spacing: -.003em;
  color: var(--ink);
  isolation: isolate;
}
[dir="rtl"] .hb-vis { --s: -1; }
:lang(ar) .hb-vis { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; letter-spacing: 0; }
.hb-vis::before {                   /* dot paper, fading toward the edges */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(var(--hb-dot) 1px, transparent 1.4px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(72% 74% at 50% 48%, #000 30%, transparent 94%);
  mask-image: radial-gradient(72% 74% at 50% 48%, #000 30%, transparent 94%);
}
.hb-vis b { font-weight: 600; }
/* Tabular figures where numbers are read as numbers (Inter's tnum also widens hyphens and colons in words) */
:is(.hb-toast__txt b, .hb-ci__stat b, .hb-lo__tip, .hb-op__v, .hb-op__r, .hb-rv__amt) { font-variant-numeric: tabular-nums; }
.hb-op__alert .hb-toast__txt b { font-variant-numeric: normal; }

/* ---------- The kit ---------- */
.hb-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hb-wires path { fill: none; stroke: var(--hb-wire); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[dir="rtl"] .hb-wires { transform: scaleX(-1); }

.hb-panel { position: absolute; z-index: 1; border-radius: 13px; background: var(--hb-paper); box-shadow: var(--hb-sh); }
.hb-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 36px; padding-block: 6px; padding-inline: 12px 8px;
  border-block-end: 1px solid var(--line);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
:lang(ar) .hb-panel__head { font-size: 12.5px; }

.hb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding-inline: 7px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 10.5px; font-weight: 500; color: var(--g-600); white-space: nowrap;
}
.hb-chip .ico { width: 12px; height: 12px; color: var(--g-500); }

.hb-tag {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: 4px 11px; border-radius: 99px;
  background: var(--hb-paper); box-shadow: var(--hb-sh-tag);
  font-size: 11.5px; font-weight: 500; color: var(--g-800); white-space: nowrap;
}
:lang(ar) .hb-tag { font-size: 12px; }
.hb-tag__ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--hb-tile); color: var(--g-600); }
.hb-tag__ico .ico { width: 12px; height: 12px; }
.hb-tag__ico--up { background: var(--up-bg); color: var(--up); }
.hb-tag__ico--blue { background: var(--z-blue-50); color: var(--z-blue-text); }

.hb-toast {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding-block: 7px; padding-inline: 7px 12px; border-radius: 12px;
  background: var(--hb-paper); box-shadow: var(--hb-sh-float);
  white-space: nowrap;
}
.hb-toast__txt { display: grid; gap: 2px; line-height: 1.2; }
.hb-toast__txt small { font-size: 10.5px; font-weight: 500; color: var(--g-500); }
.hb-toast__txt b { font-size: 12.5px; letter-spacing: -.01em; color: var(--ink); }
:lang(ar) .hb-toast__txt { line-height: 1.35; gap: 0; }
:lang(ar) .hb-toast__txt small { font-size: 11px; }
:lang(ar) .hb-toast__txt b { letter-spacing: 0; }

.hb-btn {
  display: inline-flex; align-items: center; flex: none;
  height: 26px; padding-inline: 11px; border-radius: 8px;
  background: var(--z-blue); color: #fff;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(51, 92, 255, .7);
}

.hb-key {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--hb-key);
  box-shadow: 0 0 0 5px var(--hb-paper), 0 0 0 6px var(--hb-hair), 0 14px 26px -10px rgba(10, 12, 30, .55);
}
.hb-star { width: 20px; height: 20px; fill: var(--hb-star); }

.hb-av {
  position: relative; display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, #EEE6FC 0%, #FCE6DB 100%);
  color: #5B2DB5; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
[data-theme="dark"] .hb-av { background: linear-gradient(140deg, rgba(203, 173, 235, .3), rgba(244, 183, 160, .24)); color: #E9DCF8; }
:lang(ar) .hb-av { font-size: 15px; letter-spacing: 0; }

.hb-ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.hb-dot { position: relative; display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }

/* Stickers (Bonat's hand-drawn set) join the blue family, as on How it works */
.hb-stk { flex: none; --ill-accent: #B9C8FF; --ill-mute: #EEF1FA; }
[data-theme="dark"] .hb-stk { --ill-accent: #5068D0; --ill-mute: #3A3D4E; }

.hb-cursor {                         /* the tip rests in the button's end padding, clear of the label */
  position: absolute; z-index: 3;
  inset-inline-start: calc(100% - 8px); top: calc(100% - 9px);
  width: 15px; height: 21px; overflow: visible;
  fill: #12131A; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}
/* Pointers are not mirrored in Arabic: the same arrow, tucked into the button's end (left) corner */
[dir="rtl"] .hb-cursor { inset-inline-start: auto; inset-inline-end: 3px; top: calc(100% - 6px); }

/* ---------- 1. AI decision engine ----------
   Two signals (busy mornings, more takeaway) feed the Zimam AI key; one decision drops out of it, a tap away.
   Wide (single-column phones from about 440px): the signals flank the key. Every small card (up to 399px):
   they stack on the start side and the key moves to the end, so both wires have room to run into it. */
.hb-ai__sig--1 { inset-inline-start: 5%; top: 11%; }
.hb-ai__sig--2 { inset-inline-end: 5%; top: 22%; }
.hb-ai__core { inset-inline-start: 50%; top: 21%; transform: translate(calc(-50% * var(--s)), -50%); }
.hb-ai__card {
  inset-inline-start: 50%; bottom: 7%; transform: translateX(calc(-50% * var(--s)));
  width: min(86%, 256px);
  display: grid; justify-items: start; gap: 7px;
  padding: 11px 13px 12px;
  box-shadow: var(--hb-sh), var(--hb-glow);
}
.hb-ai__label {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding-inline: 6px 8px; border-radius: 99px;
  background: var(--z-blue-50); color: var(--z-blue-text);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.hb-ai__label .ico { width: 12px; height: 12px; }
:lang(ar) .hb-ai__label { font-size: 11px; }
.hb-ai__text { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
:lang(ar) .hb-ai__text { font-size: 13.5px; line-height: 1.6; letter-spacing: 0; }
.hb-ai__act { position: relative; display: inline-flex; margin-block-start: 1px; }
.hb-vis--ai .hb-w-col { display: none; }

@container (max-width: 399px) {
  .hb-ai__sig--1 { top: 6%; }
  .hb-ai__sig--2 { inset-inline: 5% auto; top: 22%; }
  .hb-ai__core { inset-inline-start: 74%; top: 19%; width: 42px; height: 42px; }
  .hb-ai__card { bottom: 6%; }
  .hb-vis--ai .hb-w-row { display: none; }
  .hb-vis--ai .hb-w-col { display: inline; }
}

/* ---------- 2. Customer intelligence ----------
   Branch visits, loyalty, online orders and payments meet in one profile: Sara A., Gold, 14 visits. */
.hb-ci__src--1 { inset-inline-start: 5%; top: 4%; }   /* a light stagger; the wires start at these chips */
.hb-ci__src--2 { inset-inline-end: 6%; top: 7%; }
.hb-ci__src--3 { inset-inline-start: 7%; bottom: 4%; }
.hb-ci__src--4 { inset-inline-end: 4%; bottom: 7%; }
.hb-ci__card {
  inset-inline-start: 50%; top: 50%; transform: translate(calc(-50% * var(--s)), -50%);
  width: min(66%, 236px);
  padding: 12px;
  box-shadow: var(--hb-sh), var(--hb-glow);
}
.hb-ci__who { display: flex; align-items: center; gap: 9px; }
.hb-ci__id { display: grid; gap: 3px; flex: 1; min-width: 0; }
.hb-ci__id b { font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
:lang(ar) .hb-ci__id b { font-size: 13.5px; letter-spacing: 0; }
.hb-ci__seen { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--g-500); white-space: nowrap; }
.hb-ci__seen .hb-dot { width: 5px; height: 5px; box-shadow: 0 0 0 2px var(--up-bg); }
.hb-ci__tier {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding-inline: 5px 7px; border-radius: 99px;
  background: var(--gold-bg); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-line);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.hb-ci__tier .ico { width: 11px; height: 11px; }
.hb-ci__stats { display: grid; grid-template-columns: 1fr 1fr; margin-block-start: 11px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.hb-ci__stat { display: grid; gap: 2px; }
.hb-ci__stat + .hb-ci__stat { padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.hb-ci__stat small { font-size: 10.5px; font-weight: 500; color: var(--g-500); }
.hb-ci__stat b { font-size: 15px; letter-spacing: -.02em; }

/* ---------- 3. Loyalty and retention ----------
   A visit earns points (Bonat's gold coins); over the month redemptions climb to 658, +12%. The line is a
   running total, so it can only climb; time runs with the reading direction. */
.hb-lo__chart { inset-block: 9% 8%; inset-inline: 9% 6%; display: flex; flex-direction: column; }
.hb-lo__plot { position: relative; flex: 1; margin: 14px 12px 12px; }
.hb-lo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .hb-lo__svg { transform: scaleX(-1); }
.hb-lo__area { fill: url(#hb-lo-fade); }
.hb-lo__fade-a { stop-color: var(--hb-area-a); }
.hb-lo__fade-b { stop-color: var(--hb-area-b); }
.hb-lo__line { fill: none; stroke: var(--z-blue); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-theme="dark"] .hb-lo__line { stroke: #6F89FF; }
[data-theme="dark"] .hb-lo__dot { border-color: #6F89FF; }
.hb-lo__guide { position: absolute; inset-inline-start: 93.33%; top: 24%; bottom: 0; border-inline-start: 1.5px dashed var(--z-blue); opacity: .3; }
.hb-lo__dot {
  position: absolute; z-index: 1; inset-inline-start: 93.33%; top: 24%;
  width: 11px; height: 11px; margin-block-start: -5.5px; margin-inline-start: -5.5px; border-radius: 50%;
  background: var(--hb-paper); border: 2.5px solid var(--z-blue);
  box-shadow: 0 0 0 4px rgba(51, 92, 255, .14);
}
.hb-lo__tip {                        /* just above the dot, so the line runs cleanly into it */
  position: absolute; z-index: 1; inset-inline-end: calc(6.67% - 13px); top: 24%; transform: translateY(calc(-100% - 11px));
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding-inline: 9px; border-radius: 8px;
  background: var(--surface-inverse); color: var(--on-inverse);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(10, 12, 30, .6);
}
.hb-lo__tip::after {                 /* the tooltip's nib, pointing down at the dot (13px in from the end) */
  content: ""; position: absolute; inset-inline-end: 9.5px; bottom: -3px;
  width: 7px; height: 7px; border-radius: 1.5px;
  background: inherit; transform: rotate(45deg);
}
.hb-lo__tip .hb-lo__up { color: var(--hb-tip-up); }
:lang(ar) .hb-lo__tip { font-size: 12px; }
.hb-lo__pts { inset-inline-start: 4%; top: 50%; }
.hb-lo__coin { width: 28px; rotate: -8deg; }
/* Bonat's coin stack in the gold of its points coin (both themes): a quarter of the gold coin's weight */
.hb-vis .hb-stk.hb-lo__coin { --ill-accent: #F2B42E; }

@container (max-width: 339px) {
  .hb-lo__unit { display: none; }
  .hb-lo__pts { top: 40%; }          /* clear of the climbing line; the tooltip sits far off at the end */
}

/* ---------- 4. Revenue growth (wide) ----------
   New money arrives (a gift card sold, a pickup order) and flows into this month's total, split by channel
   (the How it works split). Wide: the moments wait on the end side and their wires run into the card, whose
   legend lists each channel's amount. Narrow: both moments wait above the card and drop into it. */
.hb-rv__card { inset-inline-start: 5%; top: 50%; transform: translateY(-50%); width: min(55%, 320px); box-shadow: var(--hb-sh), var(--hb-glow); }
.hb-rv__chip .ico { width: 11px; height: 11px; }
.hb-rv__body { padding: 12px 13px 13px; }
.hb-rv__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-rv__num { display: flex; align-items: center; gap: 7px; font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; }
.hb-rv__num .delta { font-size: 10.5px; letter-spacing: 0; }
.hb-rv__num .delta--up { color: #166534; }                 /* 6.4:1 on the pill; base green is 3:1 at this size */
[data-theme="dark"] .hb-rv__num .delta--up { color: var(--up); }
.hb-sign { margin-inline-end: -.1em; }                     /* keeps "+" tight to the riyal (.amt is a spaced flex row) */
.hb-rv__spark { flex: none; width: 64px; height: 24px; overflow: visible; }
[dir="rtl"] .hb-rv__spark { transform: scaleX(-1); }
.hb-rv__sarea { fill: var(--z-blue); opacity: .1; }
.hb-rv__sline { fill: none; stroke: var(--z-blue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-theme="dark"] :is(.hb-rv__sarea, .hb-rv__sline) { fill: #6F89FF; stroke: #6F89FF; }
[data-theme="dark"] .hb-rv__sline { fill: none; }
.hb-rv__bar { display: flex; gap: 3px; height: 8px; margin-block-start: 13px; }
.hb-rv__bar i { flex: var(--f) 1 0; min-width: 0; border-radius: 2px; background: var(--c); }
.hb-rv__bar i:first-child { border-start-start-radius: 99px; border-end-start-radius: 99px; }
.hb-rv__bar i:last-child { border-start-end-radius: 99px; border-end-end-radius: 99px; }
.hb-rv__legend { display: grid; gap: 6px; margin-block-start: 12px; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--g-500); }
.hb-rv__legend > span { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; white-space: nowrap; }
.hb-rv__legend i { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.hb-rv__amt { font-weight: 600; color: var(--g-700); }
:lang(ar) .hb-rv__legend { font-size: 11px; }
.hb-rv__gift { inset-inline-end: 6%; top: 30%; transform: translateY(-50%); }
.hb-rv__pick { inset-inline-end: 11%; top: 70%; transform: translateY(-50%); }
.hb-rv__ill { width: 34px; rotate: -6deg; }
.hb-rv__pick .hb-tag__ico { width: 32px; height: 32px; border-radius: 10px; }
.hb-rv__pick .hb-tag__ico .ico { width: 16px; height: 16px; }
.hb-vis--rv .hb-toast { gap: 10px; padding-block: 8px; padding-inline: 8px 14px; }
.hb-vis--rv .hb-toast__txt small { font-size: 11px; }
.hb-vis--rv .hb-toast__txt b { font-size: 13px; }
.hb-vis .hb-up { color: var(--up-text); }

.hb-vis--rv .hb-w-col { display: none; }

@container (max-width: 519px) {
  .hb-rv__card { inset-inline: 6%; top: auto; bottom: 6%; transform: none; width: auto; }
  .hb-rv__legend { grid-template-columns: repeat(2, auto); justify-content: start; gap: 5px 14px; margin-block-start: 11px; font-size: 10.5px; }
  .hb-rv__legend > span { display: flex; gap: 6px; }
  .hb-rv__amt { display: none; }
  .hb-rv__ill { width: 30px; }
  .hb-rv__pick .hb-tag__ico { width: 28px; height: 28px; border-radius: 9px; }
  .hb-vis--rv .hb-toast { gap: 9px; padding-block: 7px; padding-inline: 7px 12px; }
  .hb-vis--rv .hb-toast__txt small { font-size: 10.5px; }
  .hb-vis--rv .hb-toast__txt b { font-size: 12.5px; }
  .hb-rv__gift { inset-inline: 6% auto; top: 5%; transform: none; }
  .hb-rv__pick { inset-inline: auto 6%; top: 5%; transform: none; }
  .hb-vis--rv .hb-w-row { display: none; }
  .hb-vis--rv .hb-w-col { display: inline; }
}
@container (max-width: 339px) {
  .hb-rv__spark { display: none; }
}

/* ---------- 5. Merchant operations (wide) ----------
   Every branch, live, with today's visits and rating; one of them needs you, and the alert says why.
   Wide: the alert waits on the end side, wired to its row. Narrow: it sits under the list. */
.hb-op__list { inset-inline-start: 5%; top: 50%; transform: translateY(-50%); width: 47%; }
.hb-live { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 4px; font-size: 11px; font-weight: 600; color: var(--up-text); }
.hb-op__rows { padding-block: 2px; }
.hb-op__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 12px;
  height: 32px; padding-inline: 12px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.hb-op__row + .hb-op__row { border-block-start: 1px solid var(--line); }
:lang(ar) .hb-op__row { font-size: 12px; }
.hb-op__name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.hb-op__name .hb-dot { width: 6px; height: 6px; box-shadow: none; }
.hb-op__v, .hb-op__r { display: inline-flex; align-items: center; gap: 4px; color: var(--g-600); }
.hb-op__v .ico { width: 12px; height: 12px; color: var(--g-400); }
.hb-op__r .ico { width: 11px; height: 11px; color: var(--z-blue-text); }
.hb-op__row.is-flag { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.hb-op__row.is-flag:last-child { border-end-start-radius: 11px; border-end-end-radius: 11px; }
.hb-op__row.is-flag .hb-dot { background: var(--warn); }
.hb-op__alert {
  inset-inline-end: 5%; top: 50%; transform: translateY(-50%);
  width: 36%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 9px;
  padding-block: 10px 11px; padding-inline: 10px 12px;
  white-space: normal;
  box-shadow: var(--hb-sh-float), var(--hb-glow);
}
.hb-op__bell { width: 34px; grid-row: span 2; margin-block-start: -2px; }
.hb-op__alert .hb-toast__txt b { font-size: 12.5px; white-space: nowrap; }
.hb-op__alert .hb-toast__txt small { font-size: 11px; }
.hb-op__alert .hb-btn { grid-column: 2; justify-self: start; height: 24px; padding-inline: 10px; font-size: 11px; }
.hb-vis--op :is(.hb-w-col, .hb-w-xl) { display: none; }

@container (min-width: 700px) {
  .hb-op__list { inset-inline-start: calc(50% - 300px); width: 316px; }
  .hb-op__alert { inset-inline-end: calc(50% - 300px); width: 214px; }
  .hb-vis--op .hb-w-row { display: none; }
  .hb-vis--op .hb-w-xl { display: inline; }
}

@container (max-width: 519px) {
  .hb-op__list { inset-inline: 6%; top: 7%; transform: none; width: auto; }
  .hb-op__row { height: 30px; }
  .hb-op__row--opt { display: none; }
  .hb-op__alert { inset-inline: 6%; top: auto; bottom: 7%; transform: none; width: auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .hb-op__bell { grid-row: auto; margin: 0; width: 28px; }
  .hb-op__alert .hb-btn { grid-column: auto; }
  .hb-vis--op .hb-w-row { display: none; }
  .hb-vis--op .hb-w-col { display: inline; }
}

/* ---------- Hover: very slight loops, starting from the resting pose ----------
   Wires keep their place when the pointer leaves (paused, so the dashes never run backward). Every other
   loop is attached at rest but paused, and hovering runs it. Its size is scaled by --hb-amp, which is 0 at
   rest, 1 on hover and eases between the two over .6s, so pieces glide back to rest when the pointer leaves
   instead of snapping. Delays are positive, so each piece waits at rest before it first moves.
   (Where @property is unsupported, --hb-amp simply switches: the loops still run, they just stop sharply.) */
@property --hb-amp { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes hb-flow { to { stroke-dashoffset: -20; } }
@keyframes hb-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-2.5px * var(--hb-amp)); } }
@keyframes hb-ripple { 0% { opacity: 0; scale: 1; } 12% { opacity: calc(.55 * var(--hb-amp)); } 80%, 100% { opacity: 0; scale: var(--rs, 1.9); } }
@keyframes hb-lean { 0%, 100% { translate: 0 0; } 50% { translate: calc(-2px * var(--s) * var(--hb-amp)) calc(-2px * var(--hb-amp)); } }
@keyframes hb-tilt { 0%, 100% { rotate: var(--r, 0deg); } 50% { rotate: calc(var(--r, 0deg) + 5deg * var(--hb-amp)); } }
@keyframes hb-ring {                 /* a short, small ring (about 2px at the bell's rim), then a rest */
  0%, 58%, 100% { rotate: 0deg; }
  68% { rotate: calc(4deg * var(--hb-amp)); } 78% { rotate: calc(-3deg * var(--hb-amp)); } 88% { rotate: calc(1.5deg * var(--hb-amp)); }
}

.hb-card { --hb-amp: 0; }
.hb-card:is(:hover, :focus-within) { --hb-amp: 1; }

/* Ripples: rings round the focal pieces, invisible at rest */
.hb-key::after, .hb-lo__dot::after, .hb-ci__card .hb-av::after, .hb-live .hb-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--z-blue); opacity: 0; pointer-events: none;
}
.hb-key::after { --rs: 1.4; inset: -6px; border-color: var(--hb-wire); }
.hb-lo__dot::after { --rs: 2.6; }
.hb-live .hb-dot::after { inset: -2px; border-color: var(--up); }

.hb-wires path { animation: hb-flow 3.2s linear infinite paused; }

.hb-ai__sig--2, .hb-ci__src--2, .hb-rv__pick { --d: .7s; }
.hb-ci__src--3 { --d: 1.3s; }
.hb-ci__src--4, .hb-op__alert, .hb-ci__card .hb-av { --d: .4s; }
.hb-lo__coin { --r: -8deg; transform-origin: 50% 60%; }
.hb-rv__ill { --r: -6deg; }
.hb-op__bell { transform-origin: 50% 12%; }

.hb-tag, .hb-toast { animation: hb-drift 3.6s var(--ease-in-out) var(--d, 0s) infinite paused; }
:is(.hb-key, .hb-lo__dot, .hb-ci__card .hb-av, .hb-live .hb-dot)::after { animation: hb-ripple 3s var(--ease-out) var(--d, .2s) infinite paused; }
.hb-cursor { animation: hb-lean 2.8s var(--ease-in-out) .3s infinite paused; }
.hb-lo__coin { animation: hb-tilt 3.6s var(--ease-in-out) .5s infinite paused; }
.hb-rv__ill { animation: hb-tilt 3.6s var(--ease-in-out) .9s infinite paused; }
.hb-op__bell { animation: hb-ring 3.2s var(--ease-out) .6s infinite paused; }

.hb-card:is(:hover, :focus-within) :is(.hb-wires path, .hb-tag, .hb-toast, .hb-cursor, .hb-lo__coin, .hb-rv__ill, .hb-op__bell),
.hb-card:is(:hover, :focus-within) :is(.hb-key, .hb-lo__dot, .hb-ci__card .hb-av, .hb-live .hb-dot)::after { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .hb-bento *, .hb-bento *::after { animation: none !important; transition: none !important; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .hb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-card, .hb-card--rv { grid-column: span 1; }
  .hb-card--op { grid-column: span 2; }
}
@media (max-width: 767px) {
  .hb-bento { grid-template-columns: minmax(0, 1fr); }
  .hb-card, .hb-card--rv, .hb-card--op { grid-column: auto; }
  .hb-vis { height: 240px; }
}