/* The platform (#platform). Prefix: pf-. */

.pf { padding-block-start: 0; }

/* ---------- Bridge: the rope drops in from the story ---------- */
.pf-bridge { position: relative; display: grid; justify-items: center; height: clamp(150px, 15vw, 190px); margin-block-end: clamp(8px, 1.5vw, 20px); }
.pf-bridge__rope { width: 120px; height: 100%; overflow: visible; }
.pf-bridge__line { stroke-width: 2; }
.pf-bridge__note {
  position: absolute; inset-block-start: 38%; inset-inline-start: calc(50% + 34px);
  display: flex; align-items: flex-end; gap: 6px; margin: 0;
  white-space: nowrap; rotate: -4deg; color: var(--z-blue);
}
[dir="rtl"] .pf-bridge__note { rotate: 3deg; }
.pf-bridge__arrow { width: 40px; height: 26px; overflow: visible; flex: none; transform: translateY(10px); }
.pf-bridge__arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .pf-bridge__arrow { transform: translateY(10px) scaleX(-1); }

.pf-head__sub { max-width: 40rem; }

/* ---------- Bento ---------- */
.pf-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "ret rev rev"
    "rwd gift gift"
    "rwd pick rvw"
    "ptn ptn ptn";
  gap: 24px;
}
.pf-ret { grid-area: ret; }
.pf-rev { grid-area: rev; }
.pf-rwd { grid-area: rwd; }
.pf-gift { grid-area: gift; }
.pf-pick { grid-area: pick; }
.pf-rev6 { grid-area: rvw; }
.pf-ptn { grid-area: ptn; }

.pf-card { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pf-card.card--white { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -24px rgba(16, 24, 40, .12); }
.pf-copy { display: grid; align-content: start; gap: 8px; margin-block-start: auto; }
.pf-copy--top { margin-block-start: 0; gap: 8px; }
.pf-copy--top .icon-tile { margin-block-end: 16px; }
.pf-title { font-family: var(--font-ui); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.pf-text { font-size: 18px; line-height: 28px; color: rgba(10, 10, 10, .72); text-wrap: pretty; max-width: 34em; }
:lang(ar) .pf-title { letter-spacing: 0; line-height: 1.45; }
:lang(ar) .pf-text { line-height: 1.75; }

/* Widget card (PulseBoard white widget with feather shadow) */
.pf-w { position: relative; background: #fff; border: 1px solid var(--g-150); border-radius: var(--r-ui); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -14px rgba(120, 140, 170, .28); }
.pf-w__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; }
.pf-w__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Tooltip (follows the pointer) */
.pf-tip {
  position: absolute; top: 0; left: 0; z-index: 6;
  padding: 8px 11px; border-radius: 10px;
  background: #fff; border: 1px solid var(--g-150); box-shadow: var(--sh-pop);
  font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--g-600);
  white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
}
.pf-tip b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-tip .amt { font-weight: 600; color: var(--ink); }
.pf-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; background: var(--c, var(--z-blue)); }

/* Shared sticker */
.pf-sticker { position: absolute; z-index: 3; pointer-events: none; }

/* ---------- 1. Retention ---------- */
.pf-ret__gauge { position: relative; width: min(100%, 300px); margin-inline: auto; margin-block-start: 6px; border-radius: 12px; outline-offset: 6px; }
.pf-gauge { width: 100%; height: auto; overflow: visible; }
[dir="rtl"] .pf-gauge { transform: scaleX(-1); }
.pf-gauge path { fill: none; stroke-width: 16; stroke-linecap: round; }
.pf-gauge__track path { stroke: var(--g-150); }
.pf-gauge__fill path { stroke: var(--z-blue); }
.pf-gauge__knob circle { fill: #fff; stroke: var(--z-blue); stroke-width: 4; filter: drop-shadow(0 2px 3px rgba(51, 92, 255, .35)); }
.pf-ret__readout { position: absolute; inset-inline: 0; bottom: 0; display: grid; justify-items: center; gap: 2px; text-align: center; }
.pf-ret__value { display: flex; align-items: center; gap: 8px; }
.pf-ret__num { font-family: "Inter", sans-serif; font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.pf-ret__value .delta { font-size: 12px; padding: 2px 7px; }
.pf-ret__of { font-size: 13px; color: var(--g-500); }
.pf-ret__stats { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--g-150); }
.pf-ret__stat { padding: 14px 4px; display: grid; gap: 4px; }
.pf-ret__stat + .pf-ret__stat { padding-inline-start: 18px; border-inline-start: 1px solid var(--g-150); }
.pf-ret__stat dt { font-size: 13px; color: var(--g-500); }
.pf-ret__stat dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }

/* ---------- 2. Revenue by channel ---------- */
.pf-rev { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 32px; overflow: visible; }
.pf-rev__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pf-sticker--rev { --size: 88px; inset-block-start: -40px; inset-inline-end: -18px; rotate: 8deg; }
.pf-rings { position: relative; width: min(100%, 220px); margin-inline: auto; }
.pf-rings svg { width: 100%; height: auto; overflow: visible; }
[dir="rtl"] .pf-rings svg { transform: scaleX(-1); }
.pf-rings path { fill: none; stroke-width: 11; stroke-linecap: round; }
.pf-rings__track path { stroke: var(--g-150); }
.pf-rings__val path { stroke: var(--c); transition: opacity var(--t-base) var(--ease-out); cursor: default; }
.pf-rings.is-hover .pf-rings__val path:not(.is-on) { opacity: .28; }

.pf-rev__w { align-self: center; padding-block-end: 18px; }
.pf-seg > button { cursor: pointer; font-size: 12px; padding: 5px 12px; }
.pf-seg > button:hover:not([aria-pressed="true"]) { border-color: var(--g-300); color: var(--ink); }
.pf-rev__total { display: flex; align-items: center; gap: 10px; padding: 18px 18px 0; }
.pf-rev__amt { font-family: "Inter", sans-serif; font-size: 40px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.pf-rev__amt .sar { width: .62em; height: .7em; }
.pf-rev__delta { font-size: 12px; padding: 2px 7px; }
.pf-rev__note { padding: 4px 18px 0; font-size: 13px; color: var(--g-500); min-height: 1.45em; }

.pf-chart { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 172px auto; column-gap: 8px; row-gap: 10px; padding: 22px 18px 0; }
.pf-chart__axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--g-400); text-align: end; }
.pf-chart__axis li { height: 0; display: flex; align-items: center; justify-content: flex-end; }
.pf-chart__plot {
  position: relative; display: flex; justify-content: space-around; align-items: stretch;
  background: linear-gradient(to bottom, var(--g-150) 1px, transparent 1px) 0 0 / 100% 25% repeat-y;
  border-block-end: 1px solid var(--g-200);
}
.pf-bar { position: relative; width: 17%; max-width: 54px; height: 100%; overflow: hidden; border-radius: 9px 9px 0 0; cursor: pointer; outline-offset: 4px; }
.pf-bar i { position: absolute; inset: 0; border-radius: 9px 9px 0 0; background: var(--c); transform: translateY(var(--y, 100%)); transition: opacity var(--t-base) var(--ease-out); }
.pf-chart.is-hover .pf-bar:not(.is-on) i { opacity: .32; }
.pf-chart__x { grid-column: 2; display: flex; justify-content: space-around; font-size: 12px; color: var(--g-600); }
.pf-chart__x li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.pf-chart__x .zdot { width: 7px; height: 7px; }

/* ---------- 3. Reward feasibility ---------- */
.pf-rwd { gap: 32px; }
.pf-w__head--step { padding-block-end: 14px; border-block-end: 1px solid var(--g-150); }
.pf-step { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--z-blue); color: #fff; font-size: 11px; font-weight: 600; flex: none; }
.pf-rwd__body { display: grid; gap: 18px; padding: 16px 18px 18px; }
.pf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-field { display: grid; gap: 6px; min-width: 0; }
.pf-field--wide { grid-column: 1 / -1; }
.pf-field__label { font-size: 12px; font-weight: 500; color: var(--g-700); }
.pf-field__box { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--g-200); border-radius: 10px; background: #fff; font-size: 14px; color: var(--ink); }
.pf-field__unit { font-size: 12px; color: var(--g-400); white-space: nowrap; }
.pf-field__prod { font-weight: 500; }
.pf-field__caret { width: 14px; height: 14px; color: var(--g-400); }
.pf-field__cost { font-size: 12px; color: var(--g-500); white-space: nowrap; }
.pf-strat { display: grid; gap: 8px; }
.pf-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-chip {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 1px;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--g-200); background: #fff;
  text-align: start; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast) var(--ease-out);
}
.pf-chip::before { content: ""; grid-row: 1 / 3; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--g-300); background: #fff; transition: border-color var(--t-base), border-width var(--t-base); }
.pf-chip__name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.pf-chip__pts { font-size: 11.5px; color: var(--g-500); line-height: 1.3; }
.pf-chip__name, .pf-chip__pts { grid-column: 2; min-width: 0; }
.pf-chip[data-s="0"] { --sc: var(--c-green); }
.pf-chip[data-s="1"] { --sc: var(--z-blue); }
.pf-chip[data-s="2"] { --sc: var(--c-orange); }
.pf-chip[data-s="3"] { --sc: var(--down); }
.pf-chip:hover { border-color: var(--g-300); }
.pf-chip:active { transform: scale(.97); }
.pf-chip[aria-pressed="true"] { border-color: var(--z-blue); background: #FAFBFF; box-shadow: 0 0 0 3px var(--z-blue-50); }
.pf-chip[aria-pressed="true"]::before { border-color: var(--z-blue); border-width: 4.5px; }

.pf-hint { display: flex; align-items: flex-start; gap: 4px; align-self: flex-end; margin-block: auto -14px; margin-inline-end: 34px; rotate: -3deg; color: var(--z-blue); }
.pf-hint__arrow { width: 34px; height: 38px; margin-block-start: 10px; overflow: visible; flex: none; }
.pf-hint__arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .pf-hint { rotate: 2deg; }
[dir="rtl"] .pf-hint__arrow { transform: scaleX(-1); }
.pf-rwd .pf-rwd__w { margin-block-start: 0; }

.pf-score { --sc: var(--z-blue); --sc-bg: var(--z-blue-50); padding: 14px; border-radius: 12px; background: var(--g-50); border: 1px solid var(--g-150); display: grid; gap: 12px; }
.pf-score[data-s="0"] { --sc: var(--c-green); --sc-bg: var(--up-bg); }
.pf-score[data-s="2"] { --sc: var(--c-orange); --sc-bg: #FFF1E7; }
.pf-score[data-s="3"] { --sc: var(--down); --sc-bg: var(--down-bg); }
.pf-score__head { display: flex; align-items: center; gap: 10px; }
.pf-score__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sc-bg); color: var(--sc); flex: none; transition: background-color var(--t-base), color var(--t-base); }
.pf-score__ico .ico { width: 18px; height: 18px; }
.pf-score__txt { flex: 1; min-width: 0; }
.pf-score__title { font-size: 14px; font-weight: 500; color: var(--ink); }
.pf-score__desc { font-size: 12px; color: var(--g-500); }
.pf-score__pts { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pf-stripes { display: flex; gap: 3px; height: 26px; direction: inherit; }
.pf-stripes i { flex: 1 1 0; border-radius: 2px; background: var(--g-200); }
.pf-stripes i.is-on { background: var(--sc); }
.pf-rwd__visits { font-size: 13px; color: var(--g-600); }
.pf-rwd__vis { color: var(--ink); font-weight: 600; }

/* ---------- 4. Gifts and campaigns ---------- */
.pf-gift { padding: 0; gap: 0; }
.pf-gift__chart { position: relative; overflow: hidden; height: 300px; border-radius: var(--r-lg) var(--r-lg) 0 0; outline-offset: -4px; }
.pf-gift__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[dir="rtl"] .pf-gift__svg { transform: scaleX(-1); }
.pf-gift__line { fill: none; stroke: var(--z-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-gift__guide { position: absolute; top: 0; left: 0; width: 0; height: 100%; transform-origin: 50% 0; border-inline-start: 2px dotted rgba(51, 92, 255, .55); pointer-events: none; }
.pf-gift__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3.5px solid var(--z-blue); box-shadow: 0 2px 6px rgba(51, 92, 255, .35); pointer-events: none; }
.pf-tip--card { padding: 10px 14px; border-radius: 14px; border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 32px -12px rgba(30, 50, 110, .22); display: grid; gap: 2px; }
.pf-tip__k { display: flex; gap: 8px; font-size: 13px; color: var(--g-500); }
.pf-gift__tipday:empty { display: none; }
.pf-gift__tipday { color: var(--g-400); }
.pf-tip__v { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
:lang(ar) .pf-tip__v { letter-spacing: 0; }
.pf-tip__s { font-size: 13px; color: var(--g-600); }
.pf-tip__s .amt { font-weight: 600; color: var(--up); }
.pf-gift__days { position: absolute; inset-inline: 40px; bottom: 12px; display: flex; justify-content: space-between; font-size: 11px; color: rgba(29, 56, 184, .55); pointer-events: none; }
.pf-gift__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 32px; padding: 8px 32px 32px; }
.pf-gift__foot .pf-copy { margin: 0; }
.pf-gift__stats { display: flex; gap: 10px; }
.pf-gift__stats li { display: grid; gap: 2px; min-width: 96px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.pf-gift__big { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.pf-gift__lbl { font-size: 12px; color: var(--g-500); line-height: 1.35; }

/* ---------- 5. Pickup ---------- */
.pf-pick__w { padding: 18px; display: grid; gap: 18px; container-type: inline-size; }
.pf-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-flow li { position: relative; display: flex; justify-content: center; }
.pf-flow li::before { content: ""; position: absolute; top: 9px; inset-inline-start: calc(-50% + 9px); inset-inline-end: calc(50% + 9px); height: 2px; border-radius: 2px; background: var(--g-200); }
.pf-flow li:first-child::before { display: none; }
.pf-flow li.is-done::before, .pf-flow li.is-now::before { background: var(--z-blue); }
.pf-flow__step { position: relative; display: grid; justify-items: center; gap: 7px; padding: 0 2px; font-size: 11.5px; line-height: 1.25; font-weight: 500; color: var(--g-500); text-align: center; cursor: pointer; border-radius: 8px; }
.pf-flow__step i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--g-300); transition: background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base); }
.pf-flow__step:hover { color: var(--ink); }
.is-done > .pf-flow__step i { background: var(--z-blue); border-color: var(--z-blue); }
.is-done > .pf-flow__step i::after { content: ""; width: 7px; height: 4px; margin-block-start: -2px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; }
.is-now > .pf-flow__step { color: var(--ink); }
.is-now > .pf-flow__step i { border-color: var(--z-blue); border-width: 5px; box-shadow: 0 0 0 4px var(--z-blue-50); }

.pf-order { border: 1px solid var(--g-150); border-radius: 14px; background: var(--g-50); padding: 14px; display: grid; gap: 12px; }
.pf-order__top { display: flex; align-items: center; gap: 10px; }
.pf-order__av, .pf-q__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--b-lilac-100); color: var(--b-plum-700); font-size: 12px; font-weight: 600; flex: none; letter-spacing: .02em; }
:lang(ar) .pf-order__av, :lang(ar) .pf-q__av { font-size: 14px; letter-spacing: 0; }
.pf-order__who { flex: 1; min-width: 0; }
.pf-order__name { font-weight: 600; font-size: 14px; }
.pf-order__where { font-size: 12px; color: var(--g-500); }
.pf-order__pill { padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--info-bg); color: var(--z-blue-700); white-space: nowrap; transition: background-color var(--t-base), color var(--t-base); }
.pf-order[data-st="0"] .pf-order__pill { background: var(--warn-bg); color: #8A5A00; }
.pf-order[data-st="3"] .pf-order__pill, .pf-order[data-st="4"] .pf-order__pill { background: var(--up-bg); color: #15803D; }
.pf-order__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--g-150); }
.pf-order__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--z-blue-50); color: var(--z-blue); flex: none; }
.pf-order__ico .ico { width: 17px; height: 17px; }
.pf-order__prod { flex: 1; font-size: 13.5px; font-weight: 500; }
.pf-order__qty { display: inline-block; color: var(--g-500); font-weight: 400; direction: ltr; unicode-bidi: isolate; }
.pf-order__price { font-weight: 600; font-size: 14px; }
.pf-order__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-order__eta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--g-700); min-width: 0; }
.pf-order__eta .ico { width: 16px; height: 16px; color: var(--z-blue); }
.pf-order__btn { white-space: nowrap; transition: background-color var(--t-base), transform var(--t-fast) var(--ease-out); }
.pf-order__btn:hover { background: var(--z-blue-600); }
.pf-order__btn:active { transform: scale(.97); }

.pf-next { display: grid; gap: 8px; }
.pf-next__head { font-size: 12px; font-weight: 500; color: var(--g-500); }
.pf-next__list { display: grid; gap: 6px; }
.pf-next__list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--g-200); font-size: 12.5px; color: var(--g-600); }
.pf-next__no { font-weight: 600; color: var(--ink); }
.pf-next__what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-next__st { padding: 2px 8px; border-radius: var(--r-pill); background: var(--warn-bg); color: #8A5A00; font-size: 11px; font-weight: 600; }

/* ---------- 6. Reviews ---------- */
.pf-rvw__w { padding: 18px; display: grid; gap: 14px; container-type: inline-size; }
.pf-rvw__score { display: flex; align-items: center; gap: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--g-150); }
.pf-rvw__big { font-family: "Inter", sans-serif; font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.pf-rvw__of { font-size: 18px; color: var(--g-500); letter-spacing: 0; }
.pf-rvw__split { flex: 1; display: grid; gap: 8px; min-width: 0; }
.pf-rvw__bar { height: 7px; }
.pf-rvw__bar i { transform-origin: left center; }
[dir="rtl"] .pf-rvw__bar i { transform-origin: right center; }
.pf-rvw__counts { font-size: 12px; color: var(--g-500); }
.pf-rvw__qhead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pf-rvw__count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--down-bg); color: var(--down); font-size: 12px; font-weight: 600; transition: background-color var(--t-base), color var(--t-base); }
.pf-rvw__count.is-zero { background: var(--up-bg); color: var(--up); }
.pf-queue { display: grid; gap: 6px; }
.pf-q { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #FFF7F7; border: 1px solid #FBE4E5; transition: background-color var(--t-base), border-color var(--t-base), opacity var(--t-base); }
.pf-q .pf-q__av { width: 30px; height: 30px; font-size: 11px; background: #fff; color: var(--g-700); border: 1px solid var(--g-150); }
.pf-q__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pf-q__stars { display: flex; gap: 1px; color: var(--down); }
.pf-q__stars .ico { width: 12px; height: 12px; }
.pf-q__stars--gold { color: var(--b-gold); }
.pf-q__txt { font-size: 12.5px; color: var(--g-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-q__btn { padding: 5px 11px; border-radius: 8px; background: var(--z-blue); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-out); }
.pf-q__btn:hover { background: var(--z-blue-600); }
.pf-q__btn:active { transform: scale(.96); }
.pf-q.is-resolved { background: #fff; border-color: var(--g-150); }
.pf-q.is-resolved .pf-q__main { opacity: .5; }
.pf-q.is-resolved .pf-q__btn { background: var(--up-bg); color: #15803D; cursor: default; }
.pf-q--good { background: #fff; border-color: var(--g-150); opacity: .62; }

/* ---------- 7. Partner loyalty ---------- */
.pf-ptn {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 40px;
  background: var(--z-blue); color: #fff; overflow: visible; padding: 40px;
}
.pf-ptn .pf-copy { margin: 0; }
.pf-ptn .pf-title { color: #fff; }
.pf-ptn .pf-text { color: rgba(255, 255, 255, .82); }
.pf-ptn__tile { background: #fff; color: var(--z-blue); margin-block-end: 16px; }
.pf-ptn :focus-visible { outline-color: #fff; }
.pf-ptn__ill { display: block; width: 84px; margin-block-end: 18px; rotate: -6deg; filter: drop-shadow(0 10px 14px rgba(10, 20, 80, .28)); }
[dir="rtl"] .pf-ptn__ill { rotate: 6deg; }
.pf-ptn__coins { width: 100%; height: auto; }
.pf-ptn__tiles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.pf-pt { display: grid; gap: 4px; padding: 22px 22px 18px; border-radius: 18px; background: #fff; color: var(--ink); min-width: 0; }
.pf-pt__name { font-family: var(--font-ui); font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
:lang(ar) .pf-pt__name { letter-spacing: 0; line-height: 1.35; }
.pf-pt__kind { font-size: 13px; color: var(--g-500); }
.pf-pt__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px dashed var(--g-200); font-size: 13px; color: var(--g-700); }
.pf-pt__pts { padding: 2px 9px; border-radius: var(--r-pill); background: var(--g-100); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.pf-pt__pts--up { background: var(--up-bg); color: #15803D; }
.pf-ptn__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--z-blue-600); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pf-ptn__link .ico { width: 18px; height: 18px; }

/* Narrow widgets: smaller step labels, review text wraps instead of truncating. */
@container (max-width: 330px) {
  .pf-flow__step { font-size: 10.5px; letter-spacing: -.01em; }
}
@container (max-width: 350px) {
  .pf-q__txt { white-space: normal; line-height: 1.35; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .pf-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "ret ret"
      "rev rev"
      "rwd rwd"
      "gift gift"
      "pick rvw"
      "ptn ptn";
  }
  .pf-ptn { grid-template-columns: 1fr; gap: 28px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Retention and rewards go wide: widget on one side, copy on the other. */
  .pf-ret { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gauge stats" "gauge copy"; align-items: center; column-gap: 40px; row-gap: 24px; }
  .pf-ret__gauge { grid-area: gauge; }
  .pf-ret__stats { grid-area: stats; align-self: end; }
  .pf-ret .pf-copy { grid-area: copy; align-self: start; margin: 0; }
  .pf-rwd { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy w" "hint w"; column-gap: 40px; row-gap: 0; }
  .pf-rwd .pf-copy { grid-area: copy; align-self: start; }
  .pf-rwd .pf-rwd__w { grid-area: w; }
  .pf-hint { grid-area: hint; align-self: end; justify-self: end; margin: 0 0 120px; }
  .pf-hint__arrow { rotate: -90deg; margin-block-start: 0; }
  [dir="rtl"] .pf-hint__arrow { rotate: 90deg; }
}
@media (max-width: 760px) {
  .pf-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ret" "rev" "rwd" "gift" "pick" "rvw" "ptn"; gap: 16px; }
  .pf-hint { margin-inline-end: 12px; }
  .pf-card { padding: 24px 20px; gap: 24px; }
  .pf-title { font-size: 21px; line-height: 28px; }
  .pf-text { font-size: 16px; line-height: 25px; }
  .pf-rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pf-rev__side { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tile rings" "copy copy"; align-items: start; gap: 20px; }
  .pf-rev__side .icon-tile { grid-area: tile; }
  .pf-rings { grid-area: rings; width: 132px; margin: 0; justify-self: end; }
  .pf-rev__side .pf-copy { grid-area: copy; }
  .pf-sticker--rev { --size: 70px; inset-block-start: -26px; inset-inline-end: 8px; }
  .pf-rev__amt { font-size: 34px; }
  .pf-gift { padding: 0; }
  .pf-gift__chart { height: 230px; }
  .pf-gift__foot { grid-template-columns: 1fr; padding: 4px 20px 24px; }
  .pf-gift__stats li { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .pf-gift__big { font-size: 22px; }
  .pf-ptn { padding: 28px 20px 20px; }
  .pf-ptn__ill { width: 68px; margin-block-end: 14px; }
  .pf-ptn__tiles { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .pf-ptn__link { justify-self: center; rotate: 90deg; margin-block: -4px; }
  .pf-bridge__note { inset-inline-start: calc(50% + 22px); inset-block-start: 26%; white-space: normal; width: min(9em, calc(50% - 30px)); font-size: 1.25rem; align-items: flex-start; }
  .pf-bridge__arrow { width: 30px; transform: translateY(14px); }
  [dir="rtl"] .pf-bridge__arrow { transform: translateY(14px) scaleX(-1); }
  .pf-w__label { white-space: nowrap; }
  .pf-seg > button { padding: 4px 10px; }
  .pf-chart__x { font-size: 11px; }
  .pf-chart__x .zdot { display: none; }
}
@media (max-width: 380px) {
  .pf-card { padding-inline: 16px; }
  .pf-chart { padding-inline: 12px; grid-template-columns: 30px minmax(0, 1fr); }
  .pf-rev__total, .pf-rev__note { padding-inline: 12px; }
  .pf-w__head { padding-inline: 12px; }
  .pf-pick__w, .pf-rvw__w { padding: 14px; }
  .pf-flow__step { font-size: 10.5px; }
}

/* Reduced motion: no interpolation on interactive state changes */
@media (prefers-reduced-motion: reduce) {
  .pf-bar i { transition: none; }
}