/* Problem (#problem). Prefix: hp-
   "More data. Fewer answers." Four problems, each a card with one quiet mini-visual and one focal point:
   1. four sources reach for the customer, and every line stops short (broken, still),
   2. bars rise one after another, then a question mark stands where the next step should be,
   3. a dim customer list where the best customer glows for a moment and sinks back in,
   4. a pair of dice, thrown and landing (a slow, weighty roll, then a long rest).
   Layouts: the default is a 2 x 2 grid (tablets, reduced motion, no JS); phones get a swipe row with a
   counter; desktop with motion gets the pinned deck (js/h-problem.js turns the cards as you scroll).
   Default CSS is the FINAL state of every visual; js/h-problem.js sets the calm starting states. */

.hp {
  overflow-x: clip;
  --hp-card-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px -16px rgba(16, 24, 40, .18), 0 40px 80px -44px rgba(30, 44, 80, .2);
  --hp-panel: #F6F6F3;                 /* the paper each visual sits on */
  --hp-line: #E4E4E8;                  /* quiet bars and skeleton lines */
  --hp-grid: rgba(10, 10, 30, .055);
  --hp-dash: #C6C6CD;
  --hp-shade: rgba(14, 14, 30, .07);   /* cards waiting in the deck sit a little darker */
  --hp-gold: #F6B51E;
  --hp-gold-soft: #FFF6DC;
  --hp-gold-line: #F1D07A;
  --hp-gold-glow: rgba(246, 181, 30, .3);
  --hp-pip: #18181B;
  --hp-die: #FFFFFF;
  --hp-die-edge: rgba(10, 10, 30, .13);
  --hp-floor: rgba(10, 10, 30, .2);    /* contact shadow under each die */
}
[data-theme="dark"] .hp {
  --hp-card-sh: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .85);
  --hp-panel: #1A1A21;
  --hp-line: #2D2D37;
  --hp-grid: rgba(255, 255, 255, .05);
  --hp-dash: #4E4E59;
  --hp-shade: rgba(0, 0, 0, .4);
  --hp-gold-soft: rgba(246, 181, 30, .1);
  --hp-gold-line: rgba(246, 181, 30, .42);
  --hp-gold-glow: rgba(246, 181, 30, .22);
  --hp-pip: #E9E9EF;
  --hp-die: #272730;
  --hp-die-edge: rgba(255, 255, 255, .13);
  --hp-floor: rgba(0, 0, 0, .6);
}

/* ---------- Head ---------- */
.hp-head { max-width: 46rem; }
.hp-lead { max-width: 36rem; }
:lang(ar) .hp-lead { max-width: 38rem; }

/* ---------- Cards: a white card, the visual on its own paper, then title and one line ---------- */
.hp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.hp-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 10px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--hp-card-sh);
  color: var(--ink);
}
.hp-vis {
  position: relative; flex: none;
  height: 232px;
  border-radius: 18px;
  background: var(--hp-panel);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.hp-card__txt { padding: 22px 16px 14px; }
.hp-card__title {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(1.25rem, 1.08rem + .45vw, 1.5rem); line-height: 1.25; letter-spacing: -.022em;
  color: var(--ink); text-wrap: balance;
}
.hp-card__line { margin-block-start: 10px; max-width: 34em; font-size: 1rem; line-height: 1.55; color: var(--g-600); text-wrap: pretty; }
:lang(ar) .hp-card__title { font-weight: 600; letter-spacing: 0; line-height: 1.5; }
:lang(ar) .hp-card__line { line-height: 1.85; }
.hp-card__shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--hp-shade); opacity: 0; pointer-events: none; }

/* The question mark: the one blue glyph (an Arabic question mark in Arabic) */
.hp-q {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--z-blue); color: #fff;
  font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 700; line-height: 1;
}
:lang(ar) .hp-q { font-size: 15px; padding-block-start: 2px; }

/* A connector drawn on through a mask: the dashes stay put while the line grows (pathLength is 1).
   Final state: fully drawn. */
.hp-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ---------- 1. Sources: four chips reach for the customer; each line stops short ---------- */
.hp-src__ropes { z-index: 0; }
.hp-chip {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 16px -10px rgba(16, 24, 40, .2);
  font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--g-700); white-space: nowrap;
}
[dir="rtl"] .hp-chip { padding: 7px 10px 7px 13px; }
[data-theme="dark"] .hp-chip { background: #23232C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 16px -10px rgba(0, 0, 0, .6); }
.hp-chip__ico { width: 15px; height: 15px; color: var(--g-500); vertical-align: 0; }
.hp-chip--1 { top: 14%; inset-inline-start: 6%; }
.hp-chip--2 { top: 14%; inset-inline-end: 6%; }
.hp-chip--3 { bottom: 14%; inset-inline-start: 6%; }
.hp-chip--4 { bottom: 14%; inset-inline-end: 6%; }
.hp-who {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-radius: 50%;
  background: var(--hp-panel);
  color: var(--g-400);
}
.hp-who__ico { width: 50px; height: 50px; vertical-align: 0; }
.hp-who .hp-q { position: absolute; top: 3px; inset-inline-end: 1px; box-shadow: 0 0 0 3px var(--hp-panel); }

/* ---------- 2. Report: bars, and a "?" where the next step should be ---------- */
.hp-rep { display: grid; padding: 46px 28px 26px; }
.hp-rep__chart {
  position: relative;
  display: flex; align-items: flex-end; gap: clamp(6px, .8vw, 10px);
  width: 100%; max-width: 420px; height: 100%; margin-inline: auto;
  border-block-end: 1.5px solid var(--hp-dash);
  background: linear-gradient(var(--hp-grid) 1px, transparent 1px) 0 0 / 100% 25%;
}
.hp-rep__chart > i { flex: 1 1 0; min-width: 0; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: var(--hp-line); transform-origin: 50% 100%; }
.hp-rep__next {
  position: relative; flex: 1 1 0; min-width: 0;
  height: 80%;
  border: 1.5px dashed var(--hp-dash); border-block-end: 0;
  border-radius: 6px 6px 0 0;
}
.hp-rep__next .hp-q { position: absolute; left: 50%; top: -17px; margin-inline-start: -16px; }
[dir="rtl"] .hp-rep__next .hp-q { margin-inline-start: 0; margin-inline-end: -16px; left: auto; right: 50%; }
.hp-q--lg { width: 32px; height: 32px; font-size: 17px; box-shadow: 0 0 0 5px rgba(51, 92, 255, .14); }
:lang(ar) .hp-q--lg { font-size: 19px; }

/* ---------- 3. Customers: a dim list; the best one glows (gold layers that fade, so only opacity moves) ---------- */
.hp-list { display: grid; align-content: center; padding: 12px 22px; }
.hp-rows { display: grid; gap: 7px; width: 100%; max-width: 400px; margin-inline: auto; }
.hp-row { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; padding-inline: 10px; border-radius: 10px; }
.hp-row__av { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hp-line); }
.hp-row__bar { position: relative; height: 7px; width: calc(var(--w) * 100%); border-radius: 99px; background: var(--hp-line); }
.hp-row__val { position: relative; flex: none; width: 13%; height: 7px; margin-inline-start: auto; border-radius: 99px; background: var(--hp-line); }
.hp-row__glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--hp-gold-soft);
  box-shadow: 0 0 0 1px var(--hp-gold-line), 0 0 22px 0 var(--hp-gold-glow);
  pointer-events: none;
}
.hp-row__gold { position: absolute; inset: 0; border-radius: inherit; background: var(--hp-gold-line); }
.hp-row__av > .hp-row__gold { display: grid; place-items: center; background: var(--hp-gold); color: #5C3D00; }
.hp-row__crown { width: 13px; height: 13px; vertical-align: 0; }

/* ---------- 4. Guesswork: two dice on the floor, the throw drawn as a quiet still rope ----------
   Side view: a die rests flat on its face, so the rest pose has no tilt. Every face is the same turned
   half a circle, and nothing on a die is directional, so a half turn never shows. */
.hp-dice { display: grid; place-items: center; }
.hp-dice__stage { position: relative; width: 260px; height: 140px; }
[dir="rtl"] .hp-dice__stage { transform: scaleX(-1); }
.hp-dice__trail { z-index: 0; }
.hp-dice__shadow {
  position: absolute; top: 115px; height: 11px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hp-floor), transparent);
}
.hp-dice__shadow--a { left: 104px; width: 78px; }
.hp-dice__shadow--b { left: 180px; width: 62px; }
.hp-die {
  position: absolute;
  border-radius: 14px;
  background: var(--hp-die);
  box-shadow: 0 0 0 1px var(--hp-die-edge), 0 0 10px rgba(16, 24, 40, .06);
}
[data-theme="dark"] .hp-die { box-shadow: 0 0 0 1px var(--hp-die-edge), 0 0 12px rgba(0, 0, 0, .35); }
.hp-die--a { left: 112px; top: 58px; width: 62px; height: 62px; }
.hp-die--b { left: 186px; top: 70px; width: 50px; height: 50px; border-radius: 12px; }
/* seven pip spots: 1 top start, 2 top end, 3 middle start, 4 centre, 5 middle end, 6 bottom start, 7 bottom end */
.hp-die > i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--hp-pip); opacity: 0; }
.hp-die--b > i { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.hp-die > i:nth-child(1) { left: 28%; top: 28%; }
.hp-die > i:nth-child(2) { left: 72%; top: 28%; }
.hp-die > i:nth-child(3) { left: 28%; }
.hp-die > i:nth-child(5) { left: 72%; }
.hp-die > i:nth-child(6) { left: 28%; top: 72%; }
.hp-die > i:nth-child(7) { left: 72%; top: 72%; }
.hp-die[data-face="1"] > i:nth-child(4),
.hp-die[data-face="2"] > i:is(:nth-child(1), :nth-child(7)),
.hp-die[data-face="3"] > i:is(:nth-child(1), :nth-child(4), :nth-child(7)),
.hp-die[data-face="4"] > i:is(:nth-child(1), :nth-child(2), :nth-child(6), :nth-child(7)),
.hp-die[data-face="5"] > i:is(:nth-child(1), :nth-child(2), :nth-child(4), :nth-child(6), :nth-child(7)),
.hp-die[data-face="6"] > i:not(:nth-child(4)) { opacity: 1; }

/* ---------- Counter (deck and swipe row only) ---------- */
.hp-count {
  display: none; align-items: baseline; gap: 7px;
  direction: ltr; unicode-bidi: isolate;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--z-blue-text);
}
.hp-count::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; align-self: center; }
[dir="rtl"] .hp-count::before { order: 2; }
.hp-count__n { display: inline-block; min-width: 2ch; }
.hp-count__of { color: var(--g-500); font-weight: 500; }

/* ---------- Desktop with motion: the pinned deck ---------- */
@media (min-width: 1024px) {
  html.js-motion .hp { padding-block: 0; }
  html.js-motion .hp-pin { height: 100vh; height: 100svh; min-height: 660px; overflow-x: clip; }
  html.js-motion .hp-frame {
    height: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); align-items: center;
    column-gap: clamp(48px, 6vw, 112px);
    padding-block: calc(var(--nav-h) + 12px) 12px;
  }
  html.js-motion .hp-head { margin: 0; max-width: 32rem; }
  html.js-motion .hp-deck { display: grid; justify-items: start; width: 100%; max-width: 620px; justify-self: center; }
  html.js-motion .hp-vis { height: 252px; }
  html.js-motion .hp-dice__stage { scale: 1.16; }
  html.js-motion .hp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
  html.js-motion .hp-card { grid-area: 1 / 1; transform-origin: 50% 100%; }
  html.js-motion .hp-card:nth-child(1) { z-index: 4; }
  html.js-motion .hp-card:nth-child(2) { z-index: 3; transform: translateY(18px) scale(.95); }
  html.js-motion .hp-card:nth-child(3) { z-index: 2; transform: translateY(36px) scale(.9); }
  html.js-motion .hp-card:nth-child(4) { z-index: 1; transform: translateY(36px) scale(.9); opacity: 0; }
  html.js-motion .hp-card:nth-child(2) .hp-card__shade { opacity: .55; }
  html.js-motion .hp-card:nth-child(n+3) .hp-card__shade { opacity: 1; }
  html.js-motion .hp-count { display: inline-flex; margin-block-start: 60px; margin-inline-start: 6px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  html.js-motion .hp-vis { height: 196px; }
  html.js-motion .hp-dice__stage { scale: 1; }
  html.js-motion .hp-card__txt { padding-block: 18px 10px; }
  html.js-motion .hp-count { margin-block-start: 52px; }
}

/* ---------- Tablet: the 2 x 2 grid, a little tighter ---------- */
@media (max-width: 1023px) {
  .hp-vis { height: 208px; }
  .hp-card__txt { padding: 20px 14px 12px; }
}

/* ---------- Phone: a swipe row with a counter ---------- */
@media (max-width: 767px) {
  /* a shorter shadow, so the swipe row (which clips) never cuts it */
  .hp { --hp-card-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 22px -12px rgba(16, 24, 40, .2); }
  [data-theme="dark"] .hp { --hp-card-sh: 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 24px -14px rgba(0, 0, 0, .8); }
  .hp-head { margin-block-end: 32px; }
  .hp-cards {
    display: flex; gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 30px;
    margin-block: -6px -20px;
    scroll-padding-inline: var(--gutter);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-cards::-webkit-scrollbar { display: none; }
  .hp-cards:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
  .hp-card { flex: 0 0 84%; padding: 8px; border-radius: 22px; scroll-snap-align: start; }
  .hp-vis { height: 176px; border-radius: 15px; }
  .hp-card__txt { padding: 16px 10px 8px; }
  .hp-card__title { font-size: 1.1875rem; }
  .hp-card__line { margin-block-start: 8px; font-size: .9375rem; }
  .hp-count { display: inline-flex; margin-block-start: 14px; }

  .hp-chip { gap: 5px; padding: 6px 10px 6px 8px; font-size: 12px; }
  [dir="rtl"] .hp-chip { padding: 6px 8px 6px 10px; }
  .hp-chip__ico { width: 13px; height: 13px; }
  .hp-chip--1, .hp-chip--2 { top: 10%; }
  .hp-chip--3, .hp-chip--4 { bottom: 10%; }
  .hp-chip--1, .hp-chip--3 { inset-inline-start: 5%; }
  .hp-chip--2, .hp-chip--4 { inset-inline-end: 5%; }
  .hp-who { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .hp-who__ico { width: 42px; height: 42px; }
  .hp-who .hp-q { width: 19px; height: 19px; font-size: 11.5px; top: 1px; inset-inline-end: 0; }

  .hp-rep { padding: 34px 18px 18px; }
  .hp-list { padding: 8px 12px; }
  .hp-rows { gap: 5px; }
  .hp-row { height: 27px; gap: 10px; }
  .hp-row__av { width: 19px; height: 19px; }
  .hp-row__crown { width: 11px; height: 11px; }
  .hp-dice__stage { scale: .9; }
}
@media (max-width: 374px) {
  .hp-card { flex-basis: 86%; }
  .hp-chip__ico { display: none; }
}