/* See it work (#see-it-work). Prefix: ht-.
   A compact band on the sky zone. On the start side, the invitation: eyebrow, H2, one line and a
   link to the How it works page. On the end side, a still from the story's first chapter on its
   warm set (the same set the How it works page uses): Faisal's Zimam card with Sara's first visit at
   the top of his live list, Sara's phone with the points toast, and the quiet rope between them.
   Who is who, as in the story: Faisal is blue, Sara is violet.
   >= 1024px: two columns; the card sits high on the start side, the phone stands on the end side,
   and the rope runs from the phone's toast up to Sara's row.
   < 1024px: copy first, then the still. < 768px: the card overlaps the phone's top corner and the
   rope drops from the card's foot to the toast.
   Default CSS is the final frame; js/h-teaser.js draws the rope and runs the gentle loop. */

.ht {
  padding-block: clamp(72px, 8vw, 128px);
  --ht-tone: #FBEDE3;                  /* the story's warm set */
  --ht-f-bg: var(--z-blue-50);
  --ht-f-ink: var(--z-blue-text);
  --ht-s-bg: var(--b-lilac-100);
  --ht-s-ink: var(--b-violet-600);
  --ht-s-solid: var(--b-violet);
}
[data-theme="dark"] .ht { --ht-tone: #271C17; --ht-s-bg: rgba(203, 173, 235, .16); --ht-s-ink: #D9C4F2; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .ht { --ht-tone: #271C17; --ht-s-bg: rgba(203, 173, 235, .16); --ht-s-ink: #D9C4F2; }
}

/* ---------- Layout ---------- */
.ht-band { display: grid; gap: clamp(40px, 7vw, 56px); align-items: center; }
@media (min-width: 1024px) {
  .ht-band { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); column-gap: clamp(48px, 5.4vw, 96px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ht-copy, .ht-still { width: 100%; max-width: 640px; margin-inline: auto; }
}

/* ---------- Copy ---------- */
.ht-head { margin-block-end: 0; max-width: 31rem; }
.ht-line { max-width: 29rem; }
.ht-btn { margin-block-start: clamp(26px, 2.8vw, 36px); }

/* ---------- The still: one warm set, two screens, one rope ----------
   The set is a size container: the card and the phone scale with it (cqw, resolved on the children),
   and the phone stands in the flow, so it sets the set's height. */
.ht-still {
  --ht-pw: clamp(150px, 27.5cqw, 186px);           /* phone width */
  --ht-cw: clamp(236px, 45cqw, 300px);             /* Zimam card width */
  --ht-my: 30px;                                   /* air above and below the phone */
  --ht-mx: 7cqw;                                   /* air beside the phone */
  --ht-anchor: side;                               /* where the rope meets the card (read by JS) */
  position: relative;
  display: flex;
  container-type: inline-size;
  border-radius: var(--r-xl);
  background: var(--ht-tone);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
[data-theme="dark"] .ht-still { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* The rope sits over both screens so its rings can sit on their edges. */
.ht-rope { z-index: 3; }
.ht-rope__reveal { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ht-rope__ring { fill: var(--ht-tone); stroke: var(--rope-ring); stroke-width: 2.5; }
.ht-rope__dot { fill: var(--ht-s-solid); stroke: var(--ht-tone); stroke-width: 2.5; opacity: 0; }
.ht-rope:not(.is-set) .ht-rope__ring { visibility: hidden; }

/* Who is who: a small avatar on each screen's top corner, as in the story */
.ht-who {
  position: absolute; z-index: 4; top: -12px; inset-inline-start: -12px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif; font-size: 12px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 3px var(--ht-tone);
}
.ht-who--f { background: var(--ht-f-bg); color: var(--ht-f-ink); }
.ht-who--s { background: var(--ht-s-bg); color: var(--ht-s-ink); }
:lang(ar) .ht-who { font-size: 14px; }

/* ---------- Faisal: the Zimam card ---------- */
.ht-zimam { position: absolute; z-index: 2; inset-inline-start: 6.5cqw; top: 26%; width: var(--ht-cw); }
.ht-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--g-150);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 22px 44px -22px rgba(16, 24, 40, .22);
  overflow: hidden;
}
[data-theme="dark"] .ht-card { box-shadow: var(--sh-card); }
.ht-card__bar { display: flex; align-items: center; gap: 9px; height: 46px; padding-inline: 14px; border-block-end: 1px solid var(--g-150); }
.ht-card__mark { width: 22px; height: 22px; }
.ht-card__store { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--up-text); white-space: nowrap; }
.ht-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }

.ht-rows { padding: 6px; }
.ht-row { position: relative; display: flex; align-items: center; gap: 11px; height: 54px; padding-inline: 10px; border-radius: 12px; }
.ht-row > :not(.ht-row__flash) { position: relative; }
.ht-row--sara { background: var(--ht-s-bg); }
.ht-row--ctx { opacity: .38; }                       /* context sits back so Sara's row leads */
.ht-row__flash { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ht-s-solid); opacity: 0; }
.ht-av {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--peach-bg); color: var(--peach-ink);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.ht-av--s { background: var(--surface); color: var(--ht-s-ink); font-weight: 700; }
:lang(ar) .ht-av { font-size: 14px; letter-spacing: 0; }
.ht-row__who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ht-row__who b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ht-row__who small { font-size: 12.5px; color: var(--g-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-row--sara .ht-row__who small { color: var(--g-700); }
.ht-pts { flex: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--up-bg); color: var(--up-text); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ht-visits { flex: none; font-size: 12.5px; font-weight: 500; color: var(--g-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
:lang(ar) .ht-row__who { line-height: 1.45; }

/* ---------- Sara: the Bonat app on her phone ---------- */
.ht-bonat { position: relative; z-index: 1; margin-block: var(--ht-my); margin-inline: auto var(--ht-mx); }
.ht-phone { --pw: var(--ht-pw); }
/* Spotlight, as in the story: the store page sits back so the toast leads */
.ht-shot { opacity: .4; }
:lang(ar) .ht-phone .phone__screen { background: var(--b-dark); }   /* the Arabic screen is the app's dark theme */
:lang(ar) .ht-shot { opacity: .5; }

/* The points toast: the app's bottom sheet, sized to the screen (cqw) */
.ht-toast {
  position: absolute; z-index: 4; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 5cqw;
  padding: 7.5cqw 6.5cqw 12.5cqw;
  border-radius: 8cqw 8cqw 0 0;
  background: #fff;
  box-shadow: 0 -4cqw 10cqw rgba(17, 10, 30, .16);
}
.ht-toast::after { content: ""; position: absolute; left: 50%; bottom: 3.2cqw; width: 36cqw; height: 1.4cqw; margin-left: -18cqw; border-radius: 99px; background: #111; opacity: .85; }
.ht-toast__coin { width: 25cqw; flex: none; }
.ht-toast__txt { display: grid; min-width: 0; line-height: 1.15; }
.ht-toast__txt small { font-size: 5.3cqw; font-weight: 700; color: #1E9E6E; white-space: nowrap; }
.ht-toast__txt b { margin-block-start: .8cqw; font-size: 11.8cqw; color: #111; white-space: nowrap; }
:lang(ar) .ht-toast { background: #1A2232; box-shadow: 0 -4cqw 10cqw rgba(0, 0, 0, .4); --ill-ink: #F3F4F6; --ill-paper: #1A2232; }
:lang(ar) .ht-toast::after { background: #E5E7EB; }
:lang(ar) .ht-toast__txt small { color: #4ADE80; font-size: 5.8cqw; }
:lang(ar) .ht-toast__txt b { color: #fff; line-height: 1.3; }

.ht-ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; }

/* ---------- Tablet ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ht-still { --ht-my: 28px; }
}

/* ---------- Phones: the card overlaps the phone's top corner, the rope drops to the toast ---------- */
@media (max-width: 767px) {
  .ht-still {
    --ht-pw: clamp(124px, 38cqw, 152px);
    --ht-my: 22px;
    --ht-mx: 16px;
    --ht-cw: min(236px, 66cqw);
    --ht-anchor: below;
    border-radius: 22px;
  }
  .ht-zimam { inset-inline-start: 16px; top: 46px; }
  .ht-card { border-radius: 16px; }
  .ht-card__bar { height: 42px; padding-inline: 12px; gap: 8px; }
  .ht-card__mark { width: 20px; height: 20px; }
  .ht-card__store { font-size: 13px; }
  .ht-rows { padding: 5px; }
  .ht-row { height: 50px; gap: 9px; padding-inline: 8px; }
  .ht-av { width: 30px; height: 30px; font-size: 11px; }
  .ht-row__who b { font-size: 13px; }
  .ht-row__who small { font-size: 12px; }
  .ht-pts { padding: 2px 8px; font-size: 12px; }
  .ht-visits { font-size: 12px; }
  .ht-who { width: 26px; height: 26px; top: -11px; inset-inline-start: -10px; font-size: 11px; }
  .ht-who--s { inset-inline-start: auto; inset-inline-end: -10px; }   /* the card covers the phone's inner corner */
  :lang(ar) .ht-who { font-size: 13px; }
}