@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/almarai-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/almarai-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/almarai-800.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/ibm-plex-mono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/ibm-plex-mono-500.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/ibm-plex-mono-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/noto-kufi-arabic-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/noto-kufi-arabic-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/noto-kufi-arabic-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/ecommerce-ar/noto-kufi-arabic-900.ttf') format('truetype');
}

/* Sfere LP v10: a character-free signal system. Scattered numbers, orders and platform claims become one readable formation through native SVG and coded motion. */
:root{
  --sf:#764ff6;
  --ink:#181430;
  --paper:#fff;
  --panel:#f1f0f4;
  --page:#e6e4ec;
  --grey:#6f6a80;
  --grey-2:#a5a0b8;
  --grey-3:#cbc7d8;
  --gold:#d9ac42;
  --gold-hi:#f8e293;
  --gold-lo:#b98a2e;
  --bad:#c0533f;
  --ez:cubic-bezier(.22,.8,.28,1);
  --px:52px;
  --pin:56px;
  --rad:36px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.sfere-ecommerce-ar{display:block;min-height:0;margin:0;background:var(--page) radial-gradient(circle,#d8d5e0 1.3px,transparent 1.4px) 0 0/30px 30px;font-family:Almarai,system-ui,sans-serif;line-height:normal;color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block}
/* Tailwind's global responsive-image reset sets height:auto. Restore the
   approved fixed slots that use HTML width/height attributes in this page. */
img[width="112"][height="36"]{width:112px;height:36px}
img[width="58"][height="27"]{width:58px;height:27px}
img[width="47"][height="27"]{width:47px;height:27px}
img[width="22"][height="25"]{width:22px;height:25px}
img[width="22"][height="20"]{width:22px;height:20px}
img[width="13"][height="14"]{width:13px;height:14px}
img[width="19"][height="21"]{width:19px;height:21px}
img[width="24"][height="27"]{width:24px;height:27px}
a{color:inherit}
::selection{background:var(--sf);color:#fff}
:focus-visible{outline:2px solid var(--sf);outline-offset:3px}
[id]{scroll-margin-top:92px}

.skip-link{position:absolute;top:-60px;inset-inline-start:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

.page{background:var(--paper);max-width:1440px;margin:0 auto;position:relative;box-shadow:0 0 0 1px rgba(24,20,48,.06)}

/* ---------- buttons & links ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;transition:transform .2s var(--ez),box-shadow .24s ease,background-color .24s ease}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:translateY(0) scale(.986);transition-duration:.08s}
.bt-p{background:var(--sf);color:#fff}
.bt-p:hover{box-shadow:inset 0 0 0 200px rgba(24,20,48,.14),0 13px 26px -17px rgba(24,20,48,.62)}
.bt-p:active{box-shadow:inset 0 0 0 200px rgba(24,20,48,.24)}
.bt-d{background:var(--ink);color:#fff}
.bt-d:hover{box-shadow:inset 0 0 0 200px rgba(255,255,255,.13),0 14px 28px -18px rgba(24,20,48,.75)}

.nl{position:relative;cursor:pointer;color:inherit;text-decoration:none;transition:color .2s ease}
.nl::after{content:"";position:absolute;right:0;left:0;bottom:-7px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .34s var(--ez)}
.nl:hover{color:var(--ink)}
.nl:hover::after{transform:scaleX(1)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:18px var(--px);border-bottom:1px solid #f0eff4;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.nav-brand{display:inline-flex}
.nav-brand img{width:112px;height:36px}
.nav-links{display:flex;gap:26px;flex:1;font-size:14.5px;color:var(--grey);font-weight:700}
.nav-cta{padding:13px 24px;border-radius:12px;font-size:14.5px;font-weight:800}

/* ---------- side rail ---------- */
.rail{position:fixed;inset-inline-start:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:8px;padding:14px 9px;border-radius:26px;background:#fff;box-shadow:0 14px 38px -20px rgba(24,20,48,.34),0 0 0 1px rgba(24,20,48,.05);width:46px;box-sizing:border-box}
.rail a{display:block;text-decoration:none;text-align:center;font:500 11px 'IBM Plex Mono',Almarai,sans-serif;color:#c6c2d4;border-radius:9px;padding:5px 0;transition:background-color .25s ease,color .25s ease}
.rail a.on{background:var(--sf);color:#fff;font-weight:600}

/* ---------- section head ---------- */
.sec-head{text-align:center;padding:0 var(--px)}
.sec-num{display:inline-block;font:500 12px 'IBM Plex Mono',Almarai,sans-serif;color:#b8b3c8;margin-bottom:14px}
.sec-head h2{margin:0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(29px,5.5vw,58px);line-height:1.32;font-weight:900;letter-spacing:-.01em}
.sec-head.light h2{color:#fff}
.sec-head.light .sec-num{color:#5c5680}
.sec-note{margin:14px auto 0;max-width:560px;color:var(--grey);font-size:clamp(14px,1.6vw,17px);line-height:1.8}
.sec-marks{display:inline-flex;align-items:center;gap:14px;margin-top:18px;background:#fff;border:1px solid #eceaf2;border-radius:14px;padding:10px 16px;box-shadow:0 10px 24px -18px rgba(24,20,48,.4)}

/* ---------- reveals (JS-gated) ---------- */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .38s cubic-bezier(.23,1,.32,1),transform .48s var(--ez)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv-kids]>*{opacity:0;transform:translateY(22px);transition:opacity .38s cubic-bezier(.23,1,.32,1),transform .48s var(--ez)}
.js [data-rv-kids].in>*{opacity:1;transform:none}
.js [data-rv-kids].in>*:nth-child(2){transition-delay:.05s}
.js [data-rv-kids].in>*:nth-child(3){transition-delay:.1s}
.js [data-rv-kids].in>*:nth-child(4){transition-delay:.15s}
.js [data-rv-kids].in>*:nth-child(5){transition-delay:.2s}
.js [data-rv-kids].in>*:nth-child(6){transition-delay:.25s}

/* ---------- 01 · hero: the statement + the press ---------- */
.hero{position:relative;min-height:calc(100svh - 77px);display:flex;align-items:center;overflow:hidden;background:#fff radial-gradient(circle,#eceaf2 1.4px,transparent 1.5px) 0 0/30px 30px}
.hero-glow{position:absolute;inset:0;background:radial-gradient(44% 40% at 7% 16%,rgba(118,79,246,.14),transparent 70%),linear-gradient(232deg,transparent 30%,rgba(217,172,66,.1) 50%,rgba(217,172,66,.04) 64%,transparent 80%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(rgba(255,255,255,0),#fff 84%);pointer-events:none;z-index:2}
/* the hero press: shared shell for the artwork column */
.hero-press{position:relative;z-index:2;align-self:center;width:min(100%,600px);margin-inline:auto;padding-top:10px}
.press-plates{position:relative;aspect-ratio:1000/720}
.press-cap{margin:16px 0 0;text-align:center;font:700 13px/1.7 Almarai,sans-serif;color:var(--grey)}
.js .hero-press{animation:press-in .6s ease .1s both}
.js .press-cap{opacity:0;transform:translateY(12px);animation:hero-rise .7s var(--ez) 2.3s both}
@keyframes press-in{from{opacity:0}to{opacity:1}}
/* hero v1: the gather. Real tiles/chips from the page's own mess become the mark's 13 dots. */
.g1s{position:relative}
.g1{position:absolute;left:var(--tx);top:var(--ty);translate:-50% -50%;z-index:var(--z,3);display:grid;place-items:center}
.g1-face{grid-area:1/1;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:22%;box-shadow:0 16px 32px -14px rgba(24,20,48,.3),0 2px 6px rgba(24,20,48,.06);width:calc(var(--fw,56px)*var(--k,1));height:calc(var(--fh,var(--fw,56px))*var(--k,1));opacity:0}
.g1-face img{width:56%;height:56%;object-fit:contain}
.g1-face.store{border-radius:16px}
.g1-face.store img{width:62%;height:46%}
.g1-face.bare{background:none;box-shadow:none}
.g1-face.bare img{width:100%;height:100%}
.g1-face.chipface{width:max-content;height:auto;padding:10px 14px;border-radius:14px;gap:6px;align-items:baseline;font:600 14px 'IBM Plex Mono',Almarai,sans-serif;color:var(--ink);white-space:nowrap}
.g1-face.chipface small{font:700 10.5px Almarai,sans-serif;color:var(--grey-2)}
.g1-dot{grid-area:1/1;width:calc(var(--ds)*var(--k,1));height:calc(var(--ds)*var(--k,1));border-radius:50%;background:var(--dc)}
.js .g1s .g1{animation:g1-move 7s infinite both;animation-delay:var(--ad,0s)}
.js .g1s .g1-face{animation:g1-face 7s infinite both;animation-delay:var(--ad,0s)}
.js .g1s .g1-dot{animation:g1-dot 7s infinite both;animation-delay:var(--ad,0s)}
@keyframes g1-move{0%,15%{transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg));animation-timing-function:cubic-bezier(.6,.04,.28,1.08)}29%,86%{transform:translate(0px,0px) rotate(0deg);animation-timing-function:cubic-bezier(.5,.06,.7,.3)}96%,100%{transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg))}}
@keyframes g1-face{0%,18%{opacity:1;transform:scale(1)}30%,88%{opacity:0;transform:scale(.35)}97%,100%{opacity:1;transform:scale(1)}}
@keyframes g1-dot{0%,21%{opacity:0;transform:scale(.25)}31%{opacity:1;transform:scale(1.16)}36%,90%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.25)}}
/* the tangle layer: grey threads joining the scattered tiles, gone once they fly */
.g1-tangle{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0}
.g1-tangle path{fill:none;stroke:#b9b0cf;stroke-width:3;stroke-linecap:round;opacity:.75}
.g1-aux{position:absolute;left:var(--tx);top:var(--ty);translate:-50% -50%;z-index:2;display:grid;place-items:center;width:calc(30px*var(--k,1));height:calc(30px*var(--k,1));border-radius:50%;background:#fff;box-shadow:0 10px 22px -10px rgba(24,20,48,.25);font:700 calc(15px*var(--k,1)) Almarai,sans-serif;color:var(--grey-2);opacity:0}
.g1-aux2{color:var(--bad)}
.js .g1s .g1-tangle,.js .g1s .g1-aux{animation:g1-tg 7s infinite both}
@keyframes g1-tg{0%,15%{opacity:1}24%,88%{opacity:0}97%,100%{opacity:1}}

.press-plates{--k:1}
@media (max-width:1000px){.press-plates{--k:.72}}
@media (max-width:520px){.press-plates{--k:.55}}
@media (prefers-reduced-motion:reduce){
  .js .g1,.js .g1-face,.js .g1-dot,.js .g1-tangle,.js .g1-aux,.js .f2-t,.js .f2-core,.js .f2-st,.js .f2-out,.js .w3-tangle,.js .w3-tangle path,.js .w3-clean path,.js .w3-dots circle,.js .w3-aux{animation:none !important}
}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);width:26px;height:42px;border-radius:14px;border:2px solid rgba(24,20,48,.2);background:rgba(255,255,255,.55)}
.scroll-cue i{position:absolute;left:50%;top:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold-lo)}
.js .scroll-cue{opacity:0;transition:opacity .6s ease 1.2s}
.js .hero.in .scroll-cue{opacity:1}
.js .hero.in .scroll-cue i{animation:cuedot 1.9s ease-in-out 1.5s infinite}
@keyframes cuedot{0%{transform:translateY(0);opacity:0}18%{opacity:1}70%{transform:translateY(19px);opacity:1}100%{transform:translateY(23px);opacity:0}}
.hero-inner{position:relative;z-index:3;width:100%;max-width:1336px;margin:0 auto;padding:0 var(--px) 60px;display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
@media (min-width:1101px){.hero-inner{padding-inline-start:calc(var(--px) + 70px)}}
.hero-copy{position:relative;max-width:640px}
.hero-copy::before{content:"";position:absolute;inset:-10% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.93),rgba(255,255,255,.62) 55%,transparent 80%)}
.hero-chip{display:inline-flex;align-items:center;padding:10px 19px;border-radius:30px;background:var(--ink);color:#fff;font:700 12.5px Almarai,sans-serif;margin-bottom:24px}
.hero h1{margin:0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(42px,5.9vw,80px);line-height:1.26;font-weight:900;letter-spacing:-.01em}
.hero h1 .l1{white-space:nowrap}
.hl-50{display:inline-block;direction:ltr;margin-top:.06em;font:700 1.5em/1 'IBM Plex Mono',monospace;letter-spacing:-.03em;background:linear-gradient(180deg,var(--gold-hi) 5%,var(--gold) 48%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-1.6deg);filter:drop-shadow(0 12px 22px rgba(185,138,46,.3))}
.sq{display:inline-block;width:.6em;height:1.04em;vertical-align:-.2em;margin-inline-start:.16em;overflow:visible}
.sq path{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ez)}
.sq-up path{stroke:var(--gold-lo)}
.js .hero .sq path{stroke-dashoffset:100}
.js .hero.in .sq path{stroke-dashoffset:0}
.js .hero.in .sq-up path:nth-of-type(1){transition-delay:.4s}
.js .hero.in .sq-up path:nth-of-type(2){transition-delay:.62s}
.hero-sub{margin:20px 0 0;font-size:clamp(16px,1.7vw,20px);line-height:1.75;color:var(--grey);max-width:34ch}
.hero-actions{margin-top:34px}
.hero-actions .bt{padding:19px 38px;border-radius:14px;font-size:17px;font-weight:800}
/* hero copy enters on its own CSS clock: no JS dependency, no blank hero */
.js .hero-copy>*{opacity:0;transform:translateY(26px);animation:hero-rise .8s var(--ez) both}
.js .hero-copy>*:nth-child(2){animation-delay:.08s}
.js .hero-copy>*:nth-child(3){animation-delay:.16s}
.js .hero-copy>*:nth-child(4){animation-delay:.26s}
.js .hero-copy>*:nth-child(5){animation-delay:.36s}
.js .hero-copy>*:nth-child(6){animation-delay:.46s}
@keyframes hero-rise{to{opacity:1;transform:none}}
.hero-proof{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:30px 0 0;padding:0}
.hero-proof li{position:relative;font:700 13.5px Almarai,sans-serif;color:var(--grey);padding-inline-start:16px}
.hero-proof li::before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero-proof li:last-child::before{background:var(--sf)}
.hero-trust{display:flex;flex-direction:column;align-items:stretch;gap:11px;margin-top:26px;max-width:620px}
.hero-trust-label{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font:800 11.5px Almarai,sans-serif;color:var(--grey-2);white-space:nowrap}
.hero-trust-label::before,.hero-trust-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(116,79,246,0),rgba(116,79,246,.2))}
.hero-trust-label::after{background:linear-gradient(270deg,rgba(116,79,246,0),rgba(116,79,246,.2))}
.hero-trust-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;min-width:0}
.hero-trust-logo{display:flex;align-items:center;justify-content:center;height:56px;min-width:0;padding:10px 13px;border-radius:12px;background:#fff;box-shadow:0 12px 26px -19px rgba(24,20,48,.52),inset 0 0 0 1px #e8e5ef;overflow:hidden}
.hero-trust-logo img{display:block;width:100%;height:100%;object-fit:contain}
.hero-trust-logo--rewaa img{max-width:104px;max-height:35px}
.hero-trust-logo--ejari{padding:0;background:#0e626c;box-shadow:0 10px 24px -18px rgba(24,20,48,.46)}
.hero-trust-logo--ejari img{object-fit:cover}
.hero-trust-logo--umx{background:#15151a;box-shadow:0 10px 24px -18px rgba(24,20,48,.46)}
.hero-trust-logo--umx img{max-width:112px;max-height:24px}
.hero-trust-logo--sukuk{background:#15151a;box-shadow:0 10px 24px -18px rgba(24,20,48,.46)}
.hero-trust-logo--sukuk img{max-width:88px;max-height:36px}
.hero-trust-logo--sweater img{max-width:102px;max-height:38px}
.hero-trust-logo--rheef img{max-width:78px;max-height:40px}
.hero-trust-backing{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:1px;padding-top:12px;border-top:1px solid #ece9f2}
.hero-trust-note{font:600 10.5px Almarai,sans-serif;color:var(--grey-2);white-space:nowrap}
.hero-trust-logo--sanabil{width:190px;height:42px;padding:9px 14px;background:#15151a;border-radius:10px;box-shadow:none}
.hero-trust-logo--sanabil img{max-width:164px;max-height:25px}


/* ---------- 02 · problem heap ---------- */
.problems{padding:86px 0 0}
/* ---------- 02 · the problem story: six symbolic pressure states ---------- */
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:48px var(--px) 96px;max-width:1336px;margin:0 auto}
.v-light{background:var(--panel)}
.v-ink{background:var(--ink);color:#fff}
.v-ink h3{color:#fff}
.v-purple{background:var(--sf);color:#fff}
/* --p is how far into the pressure story this scene is (0 = first, 1 = last). */
.stc{position:relative;border-radius:28px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:4px;box-shadow:0 24px 46px -28px rgba(24,20,48,calc(.34 + var(--p,0)*.3));transform:rotate(var(--r,0deg));transition:transform .34s var(--ez),box-shadow .34s ease;overflow:hidden}
.stc:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 30px 54px -28px rgba(24,20,48,calc(.44 + var(--p,0)*.3))}
.stc h3{position:relative;z-index:2;margin:0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(19px,1.9vw,23px);line-height:1.5;font-weight:900;text-wrap:balance}

/* entrance: the scenes get dealt onto the table one after another */
.js .story>*{opacity:0;transform:translateY(34px) rotate(calc(var(--r,0deg)*3.2)) scale(.96);transition:opacity .55s ease,transform .8s var(--ez)}
.js .story.in>*{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
.js .story.in>*:nth-child(2){transition-delay:.09s}
.js .story.in>*:nth-child(3){transition-delay:.18s}
.js .story.in>*:nth-child(4){transition-delay:.27s}
.js .story.in>*:nth-child(5){transition-delay:.36s}
.js .story.in>*:nth-child(6){transition-delay:.45s}

/* each scene is a small stage: one base drawing, separate moving props */
.stc-art{display:flex;align-items:center;justify-content:center;margin:-4px -6px 12px}
.stc-canvas{position:relative;display:block;width:min(104%,436px);aspect-ratio:3/2;container-type:inline-size;transform:perspective(760px) rotateX(var(--pry,0deg)) rotateY(var(--prx,0deg));transition:transform .3s cubic-bezier(.23,1,.32,1)}
/* A contact shadow anchors every symbolic object to one shared visual stage;
   it grows heavier as the problem sequence advances. */
.stc-art--1{--sl:27%;--sr:34%}
.stc-art--2{--sl:20%;--sr:37%}
.stc-art--3{--sl:5%;--sr:4%;--sb:9%}
.stc-art--4{--sl:6%;--sr:6%}
.stc-art--5{--sl:18%;--sr:18%}
.stc-art--6{--sl:5%;--sr:4%;--sb:10%}
.stc-canvas::before{content:"";position:absolute;z-index:0;left:var(--sl,7%);right:var(--sr,7%);bottom:var(--sb,4%);height:9%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(24,20,48,calc(.2 + var(--p,0)*.2)),rgba(24,20,48,calc(.07 + var(--p,0)*.07)) 50%,rgba(24,20,48,0) 74%)}
/* The vignette closes in scene by scene as pressure increases. */
.stc-canvas::after{content:"";position:absolute;z-index:0;inset:-9% -6% -4%;pointer-events:none;
  background:radial-gradient(110% 86% at 50% 20%,rgba(24,20,48,0) 40%,rgba(24,20,48,calc(var(--p,0)*.17)) 100%)}
.v-ink .stc-canvas::before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.18) 50%,rgba(0,0,0,0) 74%)}
.v-ink .stc-canvas::after{background:radial-gradient(110% 86% at 50% 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,.34) 100%)}
.v-purple .stc-canvas::before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(35,16,92,.56),rgba(35,16,92,.2) 50%,rgba(35,16,92,0) 74%)}
.v-purple .stc-canvas::after{background:radial-gradient(110% 86% at 50% 20%,rgba(35,16,92,0) 40%,rgba(35,16,92,.4) 100%)}
.motion-base{position:absolute;inset:0;z-index:1;width:100% !important;height:100% !important;object-fit:contain;pointer-events:none}
.motion-layer{position:absolute;z-index:4;display:block;object-fit:contain;pointer-events:none}

/* scene 1: three platforms circle the same payment */
.brand-orbit--g1{left:18.333%;top:17.5%;width:14.167%;height:18.125%}
.brand-orbit--s1{left:60.833%;top:15%;width:15%;height:20%}
.brand-orbit--m1{left:65.833%;top:42.5%;width:15%;height:16.25%}
.money-pressure{position:absolute;z-index:3;left:41.5%;top:38%;width:20%;aspect-ratio:1;border:2px solid rgba(118,79,246,.34);border-radius:50%;opacity:0}
.stc.is-active .brand-orbit--g1{animation:brand-orbit-a 3.4s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .brand-orbit--s1{animation:brand-orbit-b 3.1s cubic-bezier(.77,0,.175,1) -.8s infinite}
.stc.is-active .brand-orbit--m1{animation:brand-orbit-c 3.7s cubic-bezier(.77,0,.175,1) -1.45s infinite}
.stc.is-active .money-pressure{animation:pressure-ring 2.7s cubic-bezier(.23,1,.32,1) infinite}

/* scene 2: every platform physically jabs toward the same order */
.brand-claim--g2{left:17.5%;top:15%;width:15.833%;height:25%}
.brand-claim--s2{left:63.333%;top:17.5%;width:17.917%;height:31.25%}
.brand-claim--m2{left:61.667%;top:50%;width:20%;height:26.25%}
.claim-impact{position:absolute;z-index:3;left:45.5%;top:39%;width:12%;height:14%;opacity:0}
.claim-impact i{position:absolute;left:48%;top:48%;width:28%;height:3px;border-radius:4px;background:var(--sf);transform-origin:0 50%}
.claim-impact i:nth-child(1){transform:rotate(18deg) translateX(18px)}
.claim-impact i:nth-child(2){transform:rotate(150deg) translateX(18px)}
.claim-impact i:nth-child(3){transform:rotate(270deg) translateX(18px)}
.stc.is-active .brand-claim--g2{animation:claim-jab-right 2.4s cubic-bezier(.23,1,.32,1) infinite}
.stc.is-active .brand-claim--s2{animation:claim-jab-left 2.4s cubic-bezier(.23,1,.32,1) -.8s infinite}
.stc.is-active .brand-claim--m2{animation:claim-jab-up 2.4s cubic-bezier(.23,1,.32,1) -1.6s infinite}
.stc.is-active .claim-impact{animation:impact-pop 2.4s cubic-bezier(.23,1,.32,1) infinite}

/* scene 3: coins keep disappearing into ads while one tiny order survives */
.coin-stream{position:absolute;z-index:5;left:29%;top:42%;width:clamp(16px,2.1cqw,25px);aspect-ratio:1;border-radius:50%;border:2px solid #9d6500;background:radial-gradient(circle at 36% 32%,#fff0a8 0 13%,#ffc83d 14% 52%,#e99a00 53% 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);opacity:0}
.coin-stream--2{left:33%;top:38%;animation-delay:-.65s !important}
.coin-stream--3{left:36%;top:45%;animation-delay:-1.3s !important}
.coin-stream--4{left:40%;top:40%;animation-delay:-1.95s !important}
.machine-lights{position:absolute;z-index:5;left:43%;top:63%;display:flex;gap:4px}
.machine-lights i{width:clamp(5px,.9cqw,9px);aspect-ratio:1;border-radius:50%;background:#ffca3a;opacity:.35}
.machine-lights i:nth-child(2){background:#5fd185}.machine-lights i:nth-child(3){background:#ff6b5f}
.tiny-order-ping{position:absolute;z-index:3;left:83.2%;top:68%;width:8%;aspect-ratio:1;border:2px solid rgba(255,210,65,.78);border-radius:50%;opacity:0}
.stc.is-active .coin-stream{animation:coin-feed 2.6s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .machine-lights i{animation:machine-light 1.2s cubic-bezier(.23,1,.32,1) infinite}
.stc.is-active .machine-lights i:nth-child(2){animation-delay:-.4s}.stc.is-active .machine-lights i:nth-child(3){animation-delay:-.8s}
.stc.is-active .tiny-order-ping{animation:order-ping 2.6s cubic-bezier(.23,1,.32,1) .95s infinite}

/* scene 4: the checkout stays still while the customer walks out */
.terminal-ping{position:absolute;z-index:5;left:63.5%;top:55%;width:5.8%;height:4.8%;border-radius:4px;background:rgba(116,200,255,.68);opacity:.25}
.footstep{position:absolute;z-index:5;width:3.2%;height:1.9%;border-radius:70% 40% 65% 38%;background:var(--sf);opacity:0}
.footstep--1{left:75%;top:82%;--step-rot:-24deg}
.footstep--2{left:79%;top:74%;--step-rot:24deg}
.footstep--3{left:82.5%;top:66%;--step-rot:-24deg}
.footstep--4{left:86%;top:58%;--step-rot:24deg}
.footstep--5{left:89%;top:50%;--step-rot:-24deg}
.footstep--6{left:92%;top:43%;--step-rot:24deg}
.stc.is-active .terminal-ping{animation:terminal-wait 2.2s cubic-bezier(.23,1,.32,1) infinite}
.stc.is-active .footstep{animation:step-away 3s cubic-bezier(.23,1,.32,1) infinite}
.stc.is-active .footstep--2{animation-delay:.25s}.stc.is-active .footstep--3{animation-delay:.5s}.stc.is-active .footstep--4{animation-delay:.75s}.stc.is-active .footstep--5{animation-delay:1s}.stc.is-active .footstep--6{animation-delay:1.25s}

/* scene 5: the customer keeps moving through the broken repeat loop */
.departing-customer{left:60%;top:33.75%;width:16.667%;height:43.75%;transform-origin:50% 100%}
.crack-flash{position:absolute;z-index:3;left:62%;top:7%;width:15%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(255,220,91,.74),rgba(255,220,91,0) 68%);opacity:0}
.loop-shard{position:absolute;z-index:5;left:65%;top:84%;width:2.3%;aspect-ratio:1;background:#2693de;border:1.5px solid #102a43;transform:rotate(24deg);opacity:0}
.loop-shard--2{left:69%;top:86%;width:1.8%;animation-delay:-.65s !important}.loop-shard--3{left:73%;top:83%;width:1.5%;animation-delay:-1.3s !important}
.stc.is-active .departing-customer{animation:customer-leaves 2.9s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .crack-flash{animation:crack-pulse 2.9s cubic-bezier(.23,1,.32,1) infinite}
.stc.is-active .loop-shard{animation:shard-fall 2.1s cubic-bezier(.23,1,.32,1) infinite}

/* scene 6: the contradictory figures count up independently */
.live-counter{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;background:#151c2a;color:#ffd626;font-family:Almarai,sans-serif;font-weight:900;line-height:1;overflow:hidden}
.live-counter bdi,.live-counter b{font:inherit}
.live-counter b{direction:ltr;font-variant-numeric:tabular-nums}
.live-counter--ads{left:7.2%;top:49%;width:21.5%;height:21%;font-size:clamp(33px,11.5cqw,58px);clip-path:polygon(2% 3%,98% 8%,96% 95%,4% 90%);transform:rotate(2.2deg)}
.live-counter--bank{left:80.6%;top:53.4%;width:10.5%;height:8.8%;border-radius:3px;color:#77f133;font-size:clamp(18px,5.3cqw,30px)}
.mismatch-zap{position:absolute;z-index:5;left:48.5%;top:49%;width:6%;height:18%;opacity:0}
.mismatch-zap i{display:block;width:100%;height:100%;background:#ffcf37;clip-path:polygon(44% 0,100% 0,63% 38%,90% 38%,18% 100%,39% 55%,8% 55%)}
.stc.is-active .live-counter--ads{animation:number-disagree-a 2.8s cubic-bezier(.77,0,.175,1) 1.15s infinite}
.stc.is-active .live-counter--bank{animation:number-disagree-b 2.8s cubic-bezier(.77,0,.175,1) 1.15s infinite}
.stc.is-active .mismatch-zap{animation:zap-flash 2.8s cubic-bezier(.23,1,.32,1) 1.15s infinite}

/* Legacy whole-scene motion; v10's external SVGs animate their individual objects instead. */
.stc.is-active .stc-art--1 .motion-base{animation:merchant-breathe 4.2s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .stc-art--2 .motion-base{animation:merchant-tense 4.5s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .stc-art--3 .motion-base{animation:merchant-heavy 5.1s cubic-bezier(.77,0,.175,1) infinite}
.stc.is-active .stc-art--4 .motion-base{animation:merchant-heavy 5.7s cubic-bezier(.77,0,.175,1) -.8s infinite}
.stc.is-active .stc-art--5 .motion-base{animation:merchant-heavy 6.1s cubic-bezier(.77,0,.175,1) -1.3s infinite}
.stc.is-active .stc-art--6 .motion-base{animation:merchant-drained 6.8s cubic-bezier(.77,0,.175,1) infinite}

@keyframes brand-orbit-a{0%,100%{transform:translate3d(0,0,0) rotate(0)}28%{transform:translate3d(7px,-5px,0) rotate(3deg)}63%{transform:translate3d(-4px,4px,0) rotate(-2deg)}}
@keyframes brand-orbit-b{0%,100%{transform:translate3d(0,0,0) rotate(0)}35%{transform:translate3d(-6px,-4px,0) rotate(-3deg)}70%{transform:translate3d(4px,5px,0) rotate(2deg)}}
@keyframes brand-orbit-c{0%,100%{transform:translate3d(0,0,0) rotate(0)}32%{transform:translate3d(-7px,3px,0) rotate(-2deg)}68%{transform:translate3d(5px,-5px,0) rotate(3deg)}}
@keyframes pressure-ring{0%{opacity:0;transform:scale(.82)}26%{opacity:.55}76%,100%{opacity:0;transform:scale(1.16)}}
@keyframes claim-jab-right{0%,58%,100%{transform:translate3d(0,0,0) rotate(0)}70%{transform:translate3d(8px,1px,0) rotate(2deg)}82%{transform:translate3d(2px,0,0)}}
@keyframes claim-jab-left{0%,58%,100%{transform:translate3d(0,0,0) rotate(0)}70%{transform:translate3d(-8px,1px,0) rotate(-2deg)}82%{transform:translate3d(-2px,0,0)}}
@keyframes claim-jab-up{0%,58%,100%{transform:translate3d(0,0,0) rotate(0)}70%{transform:translate3d(-5px,-7px,0) rotate(2deg)}82%{transform:translate3d(-1px,-2px,0)}}
@keyframes impact-pop{0%,55%,100%{opacity:0;transform:scale(.72)}67%{opacity:.8;transform:scale(1)}84%{opacity:0;transform:scale(1.08)}}
@keyframes coin-feed{0%{opacity:0;transform:translate3d(-12px,-22px,0) rotate(-35deg) scale(.74)}18%,68%{opacity:1}100%{opacity:0;transform:translate3d(clamp(42px,5vw,72px),clamp(28px,3vw,43px),0) rotate(260deg) scale(.88)}}
@keyframes machine-light{0%,100%{opacity:.28;transform:scale(.82)}45%{opacity:1;transform:scale(1.14)}}
@keyframes order-ping{0%,38%{opacity:0;transform:scale(.78)}58%{opacity:.9}100%{opacity:0;transform:scale(1.34)}}
@keyframes terminal-wait{0%,100%{opacity:.22;transform:scale(.96)}50%{opacity:.78;transform:scale(1.06)}}
@keyframes step-away{0%,18%{opacity:0;transform:translate3d(-4px,4px,0) scale(.76) rotate(var(--step-rot,0deg))}38%,62%{opacity:.88;transform:translate3d(0,0,0) scale(1) rotate(var(--step-rot,0deg))}84%,100%{opacity:0;transform:translate3d(3px,-3px,0) scale(1.08) rotate(var(--step-rot,0deg))}}
@keyframes customer-leaves{0%,100%{transform:translate3d(0,0,0) rotate(0)}22%{transform:translate3d(4px,-1px,0) rotate(1.5deg)}48%{transform:translate3d(11px,-3px,0) rotate(-1deg)}76%{transform:translate3d(18px,-6px,0) rotate(1.5deg)}}
@keyframes crack-pulse{0%,55%,100%{opacity:0;transform:scale(.82)}68%{opacity:.58;transform:scale(1.08)}}
@keyframes shard-fall{0%{opacity:0;transform:translate3d(-4px,-8px,0) rotate(0) scale(.75)}22%,62%{opacity:.9}100%{opacity:0;transform:translate3d(8px,18px,0) rotate(150deg) scale(.92)}}
@keyframes number-disagree-a{0%,100%{transform:rotate(2.2deg) translate3d(0,0,0)}50%{transform:rotate(2.2deg) translate3d(-3px,0,0)}}
@keyframes number-disagree-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3px,0,0)}}
@keyframes zap-flash{0%,42%,100%{opacity:0;transform:scale(.76) rotate(-5deg)}52%{opacity:.9;transform:scale(1.05) rotate(2deg)}64%{opacity:0;transform:scale(1.13) rotate(4deg)}}
@keyframes merchant-breathe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
@keyframes merchant-tense{0%,100%{transform:translate3d(0,0,0) rotate(0)}46%{transform:translate3d(0,1px,0) rotate(-.22deg)}52%{transform:translate3d(1px,0,0) rotate(.22deg)}}
@keyframes merchant-heavy{0%,100%{transform:translate3d(0,0,0)}52%{transform:translate3d(0,2px,0)}}
@keyframes merchant-drained{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,2px,0) rotate(.18deg)}}

/* art: dashboard vs bank mini panels (shared with compare) */
.mini-panel{display:flex;flex-direction:column;align-items:center;gap:11px}
.mp-card{width:108px;box-sizing:border-box;padding:14px 14px 15px;border-radius:16px;background:#fff;box-shadow:0 12px 26px -18px rgba(24,20,48,.5);display:flex;flex-direction:column;align-items:center;gap:12px}
.mp-card b{font:800 27px 'IBM Plex Mono',Almarai,sans-serif;color:var(--ink);line-height:1;letter-spacing:-.02em}
.mp-card.dark{background:var(--ink)}
.mp-card.dark b{color:#fff}
.mp-bars{display:flex;align-items:flex-end;gap:5px;height:30px}
.mp-bars i{width:8px;border-radius:2px 2px 0 0;background:#d6d2e0}
.mp-bars i.hot{background:var(--ink)}
.mp-riyal{height:30px;display:flex;align-items:center}
.mp-riyal img{filter:brightness(0) invert(1)}
.mp-cap{font:700 11.5px Almarai,sans-serif;font-style:normal;color:#8a84a6}
.x-mark{width:22px;height:22px;flex:none}
.x-mark path{fill:none;stroke:#d0555a;stroke-width:3;stroke-linecap:round}

/* ---------- 03 · why: the pile (chaos crushing the real signal) ---------- */
.why{padding:96px 0 0}
/* The pile is a space under load: daylight at the top where the tools live,
   crushing gloom at the bottom where the useful signal is buried. Grain, not gradient polish:
   the room is worn. */
.pile{position:relative;margin:44px var(--px) 0;border-radius:var(--rad);height:680px;overflow:hidden;
  background-color:#12101f;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#f6f4f9 0%,#efedf5 24%,#ded9e9 42%,#bbb2cf 55%,#8a809f 66%,#514a6b 76%,#2c2549 86%,#171231 94%,#0c0a19 100%);
  background-size:180px 180px,100% 100%;
  background-blend-mode:overlay,normal}
.pile.in{animation:quake 9.5s ease-in-out 2.4s infinite}
@keyframes quake{0%,90.4%,100%{transform:translate(0,0)}91.3%{transform:translate(2.4px,1.1px)}92.3%{transform:translate(-2px,-.7px)}93.3%{transform:translate(1.4px,.5px)}94.3%{transform:translate(-.7px,-.2px)}95.3%{transform:translate(0,0)}}
/* the ground the heap is sinking into: full width so it never reads as a shape,
   and a share of the height so it lands in the same place at every breakpoint.
   The bottom row of tiles sinks into it; the caption gets a floor to sit on. */
.pile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;z-index:28;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,4,14,.93) 0%,rgba(6,4,14,.82) 26%,rgba(6,4,14,.5) 58%,rgba(6,4,14,.18) 82%,rgba(6,4,14,0) 100%)}
/* when the heap shifts, the floor flares red for a beat */
.pile::after{content:"";position:absolute;inset:0;z-index:29;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(0deg,rgba(178,60,42,.55),rgba(178,60,42,.16) 24%,rgba(178,60,42,0) 50%)}
.pile.in::after{animation:overload 9.5s ease-in-out 2.4s infinite}
@keyframes overload{0%,88.6%,100%{opacity:0}90.6%{opacity:.9}91.8%{opacity:.28}93.2%{opacity:.72}96.5%{opacity:0}}
.pile-backdrop{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.js .pile-backdrop{opacity:0}
.js .pile.in .pile-backdrop{opacity:1;transition:opacity .5s ease .12s}
.recon-sheet{position:absolute;width:252px;padding:17px 18px 20px;background:#fffdf8;border:1px solid #d8d3c8;clip-path:polygon(0 3%,9% 1%,18% 3%,28% 1%,38% 3%,48% 1%,58% 3%,68% 1%,79% 3%,89% 1%,100% 3%,99% 97%,91% 99%,82% 97%,73% 99%,64% 97%,54% 99%,44% 97%,34% 99%,24% 97%,14% 99%,1% 97%);box-shadow:8px 10px 0 rgba(24,20,48,.1),0 24px 38px -24px rgba(24,20,48,.55);color:#6a6577;font:700 10px/1.4 Almarai,sans-serif;opacity:.94}
.recon-sheet--platforms{left:3.4%;top:7.5%;transform:rotate(-5.5deg)}
.recon-sheet--bank{right:3.2%;top:8%;transform:rotate(5deg)}
.recon-sheet>b{display:block;padding-bottom:9px;border-bottom:2px solid var(--ink);color:var(--ink);font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;font-weight:800}
.recon-sheet i{display:flex;align-items:center;justify-content:space-between;padding:7px 2px 5px;border-bottom:1px dashed #ccc6d2;font-style:normal}
.recon-sheet em{font-style:normal}
.recon-sheet strong{color:var(--ink);font:700 11px 'IBM Plex Mono',Almarai,sans-serif}
.recon-sheet .recon-miss{margin-top:4px;border:1px solid #db8e7f;background:#fff5f1;padding:7px 8px;color:var(--bad)}
.recon-sheet .recon-miss strong{color:var(--bad);font-family:Almarai,sans-serif;font-size:9px}
.stress-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stress-web path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* the feeds drag down into the dark, so the stroke lightens as it sinks */
.stress-routes path{stroke:url(#pileRoute);stroke-width:2.1;stroke-dasharray:9 8;opacity:.62}
.pile.in .stress-routes path{animation:route-pressure 2.8s linear infinite}
.pile.in .stress-routes path:nth-child(even){animation-direction:reverse;animation-duration:3.4s}
@keyframes route-pressure{to{stroke-dashoffset:-68}}
.stress-rift path{stroke:#bc4a39;stroke-width:3.6;opacity:.62}
.stress-rift path:first-child{stroke-dasharray:4 6}
.stress-marks path{stroke:#4c4463;stroke-width:2.8;opacity:.44}
.pile.in .stress-marks{transform-origin:48% 72%;animation:pressure-ticks 2.4s steps(2,end) infinite}
@keyframes pressure-ticks{0%,76%,100%{opacity:.4}82%{opacity:1}88%{opacity:.2}94%{opacity:.86}}

/* the split floor: a dark opening with the coin light burning inside it */
.floor-break{position:absolute;inset:0;width:100%;height:100%}
.floor-break path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* the opening itself: wide and black where the ground gave way, narrowing into
   hairline spurs as it runs out of the epicentre */
.fb-gap path{stroke:#07050e;stroke-width:14;opacity:.95}
.fb-gap path:nth-child(n+3){stroke-width:8}
.fb-gap path:nth-child(n+5){stroke-width:5;opacity:.8}
/* the money burning inside the gap, throwing light back up onto the heap */
.fb-light path{stroke:#f0cf7c;stroke-width:2.6;opacity:.8;
  filter:drop-shadow(0 0 3px rgba(240,207,124,.95)) drop-shadow(0 0 13px rgba(217,172,66,.7)) drop-shadow(0 -9px 26px rgba(217,172,66,.42))}
.fb-light path:nth-child(n+3){stroke-width:1.7;opacity:.62}
.pile.in .fb-light path{animation:fissure 5.2s ease-in-out infinite}
.pile.in .fb-light path:nth-child(even){animation-delay:-2.1s}
@keyframes fissure{0%,100%{opacity:.46}50%{opacity:.95}}

.recon-stamp{position:absolute;padding:7px 11px;border:2px solid currentColor;color:#a8483a;font:800 10.5px Almarai,sans-serif;line-height:1;letter-spacing:.01em;opacity:.78}
.recon-stamp--a{left:8%;top:45%;transform:rotate(-10deg)}
.recon-stamp--b{right:7%;top:44%;transform:rotate(8deg);color:#5f576f}
.recon-deadline{position:absolute;left:50%;top:2.2%;transform:translateX(-50%) rotate(-1.5deg);display:flex;align-items:center;gap:10px;padding:8px 15px 9px;border:1px solid #b84d3f;border-top-width:5px;background:#fff9f5;color:#8e3d32;box-shadow:6px 6px 0 rgba(184,77,63,.2),0 20px 32px -22px rgba(24,20,48,.5)}
.recon-deadline small{font:800 9.5px Almarai,sans-serif}
.recon-deadline b{font:900 13px 'Noto Kufi Arabic',sans-serif;color:#a83b2c}
.pile.in .recon-deadline{animation:deadline-knock 4.8s steps(1,end) 2s infinite}
@keyframes deadline-knock{0%,82%,100%{transform:translateX(-50%) rotate(-1.5deg)}86%{transform:translateX(-50%) rotate(1deg) translateY(2px)}90%{transform:translateX(-50%) rotate(-2.5deg)}}

/* the walls close in */
.pile-shade{position:absolute;inset:0;background:radial-gradient(118% 80% at 50% 72%,rgba(24,20,48,0) 32%,rgba(24,20,48,.15) 66%,rgba(10,8,22,.46) 100%);pointer-events:none;z-index:1}
/* the coin light spilling out of the split floor is the only light down there */
.pile-floor{position:absolute;left:51%;bottom:34px;transform:translateX(-50%);width:58%;height:104px;background:radial-gradient(ellipse 50% 46% at 50% 62%,rgba(232,190,90,.34),rgba(226,180,74,.1) 44%,rgba(226,180,74,0) 74%);z-index:1;pointer-events:none}

.pi{position:absolute;z-index:var(--z,5)}
.pi-in{display:block}
/* entrance: everything rains in and stacks, base first */
.js .pi{opacity:0;transform:translateY(-780px) rotate(calc(var(--rt,0deg) * 3))}
.js .pile.in .pi{opacity:1;transform:translateY(0) rotate(var(--rt,0deg));transition:transform .85s cubic-bezier(.3,1.38,.42,1) var(--dd,0s),opacity .42s ease var(--dd,0s)}

/* idle: the pile settles nervously, piece by piece */
.pi-in{animation:settle var(--st,7.5s) ease-in-out var(--sd,0s) infinite}
@keyframes settle{0%,86%,100%{transform:translate(0,0)}90%{transform:translate(var(--jx,1.5px),var(--jy,-2px))}94%{transform:translate(calc(var(--jx,1.5px) * -.7),.5px)}}
.ptile.hv .pi-in{animation:none}

.ptile .pi-in{width:84px;height:84px;border-radius:24%;background:#fff;box-shadow:0 26px 34px -18px rgba(8,6,18,.6),0 5px 11px rgba(8,6,18,.22),inset 0 0 0 1px rgba(24,20,48,.05);display:flex;align-items:center;justify-content:center}
.ptile .pi-in img{width:56%;height:56%;object-fit:contain}
.ptile.sm .pi-in{width:60px;height:60px;border-radius:18px}
.ptile.lg .pi-in{width:98px;height:98px;border-radius:28px}
.ptile.store .pi-in{width:104px;height:62px;border-radius:18px}
.ptile.store .pi-in img{width:60%;height:44%}

.pchip .pi-in{display:inline-flex;align-items:baseline;gap:7px;width:auto;padding:12px 16px;border-radius:15px;background:#fff;box-shadow:0 20px 30px -16px rgba(8,6,18,.5);white-space:nowrap;font:600 18px 'IBM Plex Mono',Almarai,sans-serif;color:var(--ink)}
.pchip .pi-in small{font:700 11.5px Almarai,sans-serif;color:var(--grey-2)}
.pchip .pi-in b{font-weight:800}
.pchip.ink .pi-in{background:var(--ink);color:#fff}
.pchip.ink .pi-in small{color:#8a84a6}
.problem-chip{--ticket:#5949bd;--ticket-line:#b9afe8;--ticket-shadow:rgba(89,73,189,.15)}
.problem-chip .pi-in{position:relative;border:1.5px solid var(--ticket-line);border-radius:5px 14px 14px 14px;box-shadow:4px 5px 0 var(--ticket-shadow),0 20px 30px -16px rgba(8,6,18,.5)}
.problem-chip .pi-in::before{content:attr(data-code);position:absolute;inset-inline-start:10px;top:-9px;padding:3px 7px 2px;border-radius:3px;background:var(--ticket);color:#fff;font:800 8px/1 Almarai,sans-serif;letter-spacing:.02em;box-shadow:2px 2px 0 rgba(24,20,48,.13)}
.problem-chip.problem-behavior{--ticket:#181430;--ticket-line:#9f99ad;--ticket-shadow:rgba(24,20,48,.14)}
.problem-chip.problem-cost{--ticket:#a77312;--ticket-line:#d9b96f;--ticket-shadow:rgba(167,115,18,.17)}
.problem-chip.problem-alert{--ticket:#b64e3e;--ticket-line:#dc9b90;--ticket-shadow:rgba(182,78,62,.17)}
.problem-chip.problem-cost:not(.ink) .pi-in{background:#fffdf6}
.problem-chip.problem-alert .pi-in{background:#fff9f7}
.problem-chip.ink .pi-in::before{color:#fff}
.pchip.alert .pi-in{font:700 12.5px Almarai,sans-serif;color:var(--bad);animation:settle var(--st,7.5s) ease-in-out var(--sd,0s) infinite,nerv 2.2s ease-in-out infinite}
@keyframes nerv{0%,100%{box-shadow:4px 5px 0 rgba(182,78,62,.17),0 20px 30px -16px rgba(8,6,18,.5)}50%{box-shadow:7px 8px 0 rgba(182,78,62,.3),0 18px 32px -12px rgba(198,72,52,.7),0 0 0 1.5px rgba(198,72,52,.62)}}

.pghost .pi-in{display:inline-flex;align-items:center;gap:7px;width:auto;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 14px 24px -12px rgba(8,6,18,.55),0 0 0 2px var(--gc,#ccc);white-space:nowrap;font:600 13px 'IBM Plex Mono',Almarai,sans-serif;color:var(--ink)}
.pghost .pi-in svg{width:15px;height:15px}
.pghost svg circle,.pghost svg path{fill:none;stroke:var(--gc);stroke-width:2.6;stroke-linecap:round}

.pplate .pi-in{width:82px;height:84px;border:2px solid #8f88a0;border-radius:11px;background:#fff;box-shadow:5px 6px 0 rgba(24,20,48,.14),0 22px 34px -16px rgba(8,6,18,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:800 27px 'IBM Plex Mono',Almarai,sans-serif;color:var(--ink);letter-spacing:-.02em}
.pplate .pi-in small{font:800 8px Almarai,sans-serif;letter-spacing:0;color:#746e83}
.pplate.dark .pi-in{background:var(--ink);color:#fff}
.pplate.dark .pi-in small{color:#b8b2cb}
.pplate.source-platform .pi-in{border-color:#6d5ac8}
.pplate.source-bank .pi-in{border-color:#b74d3e;box-shadow:5px 6px 0 rgba(183,77,62,.18),0 22px 34px -16px rgba(8,6,18,.55)}
/* the two figures shove at each other and the X between them keeps landing */
.pile.in .pplate.source-platform .pi-in{animation:disagree-a 3.6s cubic-bezier(.23,1,.32,1) infinite}
.pile.in .pplate.source-bank .pi-in{animation:disagree-b 3.6s cubic-bezier(.23,1,.32,1) infinite}
@keyframes disagree-a{0%,64%,100%{transform:translate(0,0)}74%{transform:translate(-5px,1px)}84%{transform:translate(2px,0)}}
@keyframes disagree-b{0%,64%,100%{transform:translate(0,0)}74%{transform:translate(5px,1px)}84%{transform:translate(-2px,0)}}
.px .pi-in{width:30px;height:30px}
.px svg{width:30px;height:30px}
.px path{fill:none;stroke:#e2564b;stroke-width:3.4;stroke-linecap:round}
.pile.in .px .pi-in{animation:xhit 3.6s cubic-bezier(.23,1,.32,1) infinite;filter:drop-shadow(0 3px 7px rgba(226,86,75,.5))}
@keyframes xhit{0%,64%,100%{transform:scale(1) rotate(0);opacity:.85}74%{transform:scale(1.32) rotate(-7deg);opacity:1}86%{transform:scale(1.04) rotate(2deg)}}

/* The same merchant from the problem story is visibly pinned beneath the pile. */
.pmerchant .pi-in{width:220px;animation:struggle 4.6s ease-in-out infinite}
.pmerchant img{width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(6,4,14,.62)) drop-shadow(0 6px 12px rgba(232,190,90,.38)) drop-shadow(0 0 34px rgba(226,180,74,.26))}
@keyframes struggle{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(4px) rotate(1.2deg)}}

.pcry{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(40px,6vw,80px);font-weight:900;color:var(--ink);white-space:nowrap;text-shadow:0 3px 0 #fff,0 0 26px #fff,0 0 62px rgba(255,255,255,.96);pointer-events:none;transform:translateX(-50%) rotate(-3deg)}
.pcry-in{display:block;animation:crysway 5.6s ease-in-out 2s infinite}
@keyframes crysway{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.js .pcry{opacity:0;transform:translate(-50%,-260px) rotate(-3deg) scale(.8)}
.js .pile.in .pcry{opacity:1;transform:translate(-50%,0) rotate(-3deg) scale(1);transition:transform .8s cubic-bezier(.3,1.4,.42,1) var(--dd,0s),opacity .5s ease var(--dd,0s)}

.pcrack{position:absolute;width:100px;height:24px;z-index:6}
.pcrack::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 42%,#0d0a1c,#181430 64%,rgba(24,20,48,0) 80%)}
.pcrack i{position:absolute;left:50%;top:4px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--gold-hi),var(--gold) 58%,var(--gold-lo));box-shadow:0 0 8px rgba(217,172,66,.5);animation:leak var(--ld,3s) cubic-bezier(.55,.08,.9,.55) var(--ldel,0s) infinite}
@keyframes leak{0%{transform:translate(0,-170px) scale(.9);opacity:0}10%{opacity:1}84%{opacity:1}100%{transform:translate(var(--lx,6px),4px) scale(.55);opacity:0}}
.pcrack b{position:absolute;bottom:2px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--gold-hi),var(--gold) 58%,var(--gold-lo));opacity:.85}
.js .pcrack{opacity:0;transition:opacity .8s ease var(--dd,0s)}
.js .pile.in .pcrack{opacity:1}

/* the caption sits under the evidence photo. Printed across it, the bottom row of
   logo tiles cut through the words at every width; under it, it always reads. */
.pcap{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px var(--px) 0;
  color:#5c5478;font-family:'Noto Kufi Arabic',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.04em;text-align:center}
.pcap::before,.pcap::after{content:"";flex:0 0 38px;height:1px;background:linear-gradient(90deg,rgba(92,84,120,0),rgba(92,84,120,.5))}
.pcap::after{background:linear-gradient(270deg,rgba(92,84,120,0),rgba(92,84,120,.5))}

/* ---------- 04 · solution: the mound unravels into the mark ---------- */
.solution{padding:96px 0 0}
.solution-panel{position:relative;margin:0 var(--px);border-radius:var(--rad);background:var(--sf);padding:clamp(44px,6vw,74px) var(--pin) clamp(48px,6vw,80px);overflow:hidden}
.solution-panel>.sec-head,.snap-stage,.outcomes{position:relative;z-index:3}
.snap-stage{max-width:1060px;margin:28px auto 0;aspect-ratio:1060/500;--tk:1.12}
.stage-glow{position:absolute;left:47%;top:46%;transform:translate(-50%,-50%);width:min(640px,92%);height:88%;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.2),rgba(255,255,255,0) 66%);opacity:.35;transition:opacity 1.8s ease;pointer-events:none;z-index:1}
.snap-stage.formed .stage-glow{opacity:1}
.stage-floor{position:absolute;left:47%;bottom:4%;transform:translateX(-50%);width:52%;height:46px;background:radial-gradient(ellipse,rgba(24,20,48,.22),rgba(24,20,48,0) 68%);opacity:0;transition:opacity 1.4s ease .3s;z-index:1;pointer-events:none}
.snap-stage.formed .stage-floor{opacity:1}
.sghost i{position:absolute;left:var(--tx);top:var(--ty);width:calc(var(--sz)*var(--tk,1));height:calc(var(--sz)*var(--tk,1));border-radius:50%;background:#fff;opacity:.14;transform:translate(-50%,-50%);z-index:1}

/* default (no-js) state: already formed. js state: a heaped tile in the mound. */
.snp{position:absolute;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%);z-index:var(--z,5)}
.snp-in{display:flex;align-items:center;justify-content:center;width:calc(var(--ds)*var(--tk,1));height:calc(var(--ds)*var(--tk,1));border-radius:50%;background:var(--tc);box-shadow:0 8px 22px -10px rgba(24,20,48,.45)}
.snp-in img{display:none}
.js .snp{left:var(--sx);top:var(--sy)}
.js .snp-in{width:calc(var(--w,54px)*var(--tk,1));height:calc(var(--w,54px)*var(--tk,1));border-radius:26%;background:#fff;animation:jit 1.6s ease-in-out var(--jd,0s) infinite}
.js .snp-in img{display:block;width:56%;height:56%;object-fit:contain;transition:opacity .28s ease}
@keyframes jit{0%,100%{transform:translate(0,0) rotate(var(--rt,0deg))}50%{transform:translate(1.6px,-2.2px) rotate(calc(var(--rt,0deg) + 1.6deg))}}
.js .snp.fly .snp-in{animation:none;transform:rotate(0deg);width:calc(var(--ds)*var(--tk,1));height:calc(var(--ds)*var(--tk,1));border-radius:50%;background:var(--tc);transition:width .95s cubic-bezier(.6,.05,.3,1),height .95s cubic-bezier(.6,.05,.3,1),border-radius .85s ease,background-color .75s ease .1s,transform .45s ease,box-shadow .9s ease}
.js .snp.fly .snp-in img{opacity:0}
.js .snp.landed .snp-in{animation:pop .5s var(--ez)}
@keyframes pop{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.snap-stage.formed .snp:not(.aux){animation:breathe 6.5s ease-in-out var(--bd,0s) infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045)}}
.snap-stage.formed .snp.hot .snp-in{box-shadow:0 0 40px rgba(248,226,147,.6),0 8px 22px -10px rgba(24,20,48,.45);animation:wake .6s ease .52s 1,goldpulse 4.5s ease-in-out 1.3s infinite}
@keyframes goldpulse{0%,100%{box-shadow:0 0 32px rgba(248,226,147,.45),0 8px 22px -10px rgba(24,20,48,.45)}50%{box-shadow:0 0 54px rgba(248,226,147,.78),0 8px 22px -10px rgba(24,20,48,.45)}}

/* noise pieces: hidden when resolved, crumbling when js runs the scene */
.snp.aux{display:none}
.js .snp.aux{display:block}
.snp.aux .snp-in{width:auto;height:auto;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.82);box-shadow:0 8px 18px -10px rgba(24,20,48,.4);font:800 13px Almarai,sans-serif;color:#6f6a80}
.snp.aux.red .snp-in{background:#e0685a;color:#fff}
.js .snp.aux .snp-in{animation:jit 1.4s ease-in-out var(--jd,0s) infinite}
.snp.aux.gone .snp-in{animation:none;transition:transform .8s cubic-bezier(.55,.06,.68,.19),opacity .65s ease;transform:translateY(64px) rotate(24deg);opacity:0}

.trails{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.trail{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .4s ease}
.trail.hot{stroke:var(--gold-hi);stroke-width:4.5}
.snap-beat{position:absolute;left:65.7%;top:50%;width:calc(100px*var(--tk,1));height:calc(100px*var(--tk,1));transform:translate(-50%,-50%);border-radius:50%;border:3px solid rgba(255,255,255,.8);opacity:0;z-index:2;pointer-events:none}
.snap-stage.beat-hit .snap-beat{animation:beat 1.1s ease-out both}
.snap-stage.beat-hit{animation:thud .5s ease .06s}
@keyframes thud{0%,100%{translate:0 0}28%{translate:0 5px}62%{translate:0 -1px}}
@keyframes beat{0%{opacity:.9;transform:translate(-50%,-50%) scale(.9)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
/* once the mark is formed, one pulse of energy runs from the small dots into the riyal */
.snap-stage.formed .snp:not(.aux):not(.hot) .snp-in{animation:wake .55s ease var(--wd,0s) 1}
@keyframes wake{0%,100%{filter:brightness(1)}45%{transform:rotate(0deg) scale(1.24);filter:brightness(1.5)}}
/* the mound sits tangled in grey-white threads until the pieces fly (drawn by JS) */
.snap-tangle{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible;transition:opacity .45s ease}
.snap-tangle path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round}
.snap-tangle.off{opacity:0}

/* the wordmark signs the formation: wipes in left-to-right once the mark lands */
.snap-word{position:absolute;left:calc(65.7% + 58px*var(--tk,1));top:50%;width:calc(120px*var(--tk,1));height:auto;transform:translateY(-50%);z-index:5}
.js .snap-word{opacity:0;clip-path:inset(-25% 103% -25% -6%);transition:opacity .45s ease .6s,clip-path .95s cubic-bezier(.6,.05,.3,1) .6s}
.snap-stage.formed .snap-word{opacity:1;clip-path:inset(-25% -6% -25% -6%)}

.one-card{position:absolute;left:47%;bottom:1%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:14px;background:#fff;border-radius:20px;padding:16px 26px;box-shadow:0 26px 52px -22px rgba(24,20,48,.55)}
.one-card b{font-family:'Noto Kufi Arabic',sans-serif;font-size:19px;font-weight:800}
.one-card i{font:700 12.5px Almarai,sans-serif;font-style:normal;color:var(--grey-2);border-inline-start:1px solid #eceaf2;padding-inline-start:14px}
.oc-person{width:26px;height:26px}
.oc-person circle,.oc-person path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.js .one-card{opacity:0;transform:translateX(-50%) translateY(18px) scale(.9);transition:opacity .5s ease .35s,transform .7s var(--ez) .35s}
.snap-stage.formed .one-card{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

.calm{position:absolute;left:78%;bottom:-2%;z-index:6;width:160px}
.calm img{width:100%;height:auto;filter:drop-shadow(0 12px 22px rgba(24,20,48,.4))}
.js .calm{opacity:0;transform:translateY(16px) scale(.85);transition:opacity .55s ease .6s,transform .7s var(--ez) .6s}
.snap-stage.formed .calm{opacity:1;transform:none}
.calm-in{display:block;animation:calmbob 5.2s ease-in-out 1.4s infinite}
@keyframes calmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* The mark does not merely finish. It distributes one gold signal into each
   commercial outcome, making the cards read as effects of the same system. */
.outcome-links{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.outcome-link-track,.outcome-link-energy{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.outcome-link-track{stroke:rgba(255,255,255,.34);stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100}
.outcome-link-energy{stroke:var(--gold-hi);stroke-width:4;stroke-dasharray:9 91;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 7px rgba(248,226,147,.82))}
.outcome-source-ring{fill:none;stroke:var(--gold-hi);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.snap-stage.formed ~ .outcome-links .outcome-link-track{animation:outcome-link-draw .92s cubic-bezier(.23,1,.32,1) var(--link-delay) both}
.snap-stage.formed ~ .outcome-links .outcome-link-energy{animation:outcome-link-pulse 1.02s cubic-bezier(.2,.72,.25,1) var(--link-delay) both}
.snap-stage.formed ~ .outcome-links .outcome-source-ring{animation:outcome-source-burst .78s ease-out .04s both}
@keyframes outcome-link-draw{to{stroke-dashoffset:0}}
@keyframes outcome-link-pulse{0%{opacity:0;stroke-dashoffset:100}12%{opacity:1}82%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes outcome-source-burst{0%{opacity:.95;transform:scale(.35)}100%{opacity:0;transform:scale(3.4)}}

/* relief follows the signal: each card arrives as its own branch reaches it */
.js .outcomes>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s var(--ez)}
.snap-stage.formed ~ .outcomes>*{opacity:1;transform:none;transition-delay:.82s}
.snap-stage.formed ~ .outcomes>*:nth-child(2){transition-delay:.99s}
.snap-stage.formed ~ .outcomes>*:nth-child(3){transition-delay:1.16s}
.snap-stage.formed ~ .outcomes>*:nth-child(4){transition-delay:1.33s}

.outcomes{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.outcomes li{position:relative;border-radius:28px;padding:28px 26px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:190px}
.outcomes li::before{content:"";position:absolute;z-index:3;left:50%;top:0;width:12px;height:12px;border:3px solid var(--sf);border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 5px rgba(248,226,147,.18),0 0 19px rgba(248,226,147,.72);transform:translate(-50%,-50%)}
.js .outcomes li::before{opacity:0;scale:.45}
.snap-stage.formed ~ .outcomes li::before{animation:outcome-receive .62s cubic-bezier(.2,1.55,.42,1) .82s both}
.snap-stage.formed ~ .outcomes li:nth-child(2)::before{animation-delay:.99s}
.snap-stage.formed ~ .outcomes li:nth-child(3)::before{animation-delay:1.16s}
.snap-stage.formed ~ .outcomes li:nth-child(4)::before{animation-delay:1.33s}
@keyframes outcome-receive{0%{opacity:0;scale:.45}58%{opacity:1;scale:1.42}100%{opacity:1;scale:1}}
.oc-ink{background:var(--ink);color:#fff}
.oc-purple{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.oc-light{background:#fff;color:var(--ink)}
.oc-word{display:flex;align-items:center;gap:12px;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(24px,2.6vw,32px);font-weight:900;line-height:1.3}
.oc-word img{width:36px;height:41px}
.oc-word.mono bdi{font-family:'IBM Plex Mono',Almarai,sans-serif;font-weight:600;letter-spacing:-.02em}

/* the four outcome scenes: one shared stage, filling the card so the drawing
   is big enough to read on a phone at arm's length */
.oc-art{display:block;width:100%;max-width:320px;aspect-ratio:200/92;flex:none}
.oc-art svg{display:block;width:100%;height:100%}
.outcome-imagegen{height:106px;object-fit:contain;object-position:center bottom;aspect-ratio:auto;filter:drop-shadow(0 12px 14px rgba(16,12,38,.18));transform-origin:50% 100%}
.oc-ink .outcome-imagegen,.oc-purple .outcome-imagegen{filter:drop-shadow(0 14px 17px rgba(8,5,24,.34))}
.oc-cash{height:114px}
.oc-cac{height:92px;margin-top:12px}
.snap-stage.formed ~ .outcomes .outcome-imagegen{animation:outcome-imagegen-in .72s var(--ez) .82s both,outcome-imagegen-drift 4.8s ease-in-out 1.82s infinite alternate}
.snap-stage.formed ~ .outcomes li:nth-child(2) .outcome-imagegen{animation-delay:.99s,1.99s}
.snap-stage.formed ~ .outcomes li:nth-child(3) .outcome-imagegen{animation-delay:1.16s,2.16s}
@keyframes outcome-imagegen-in{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes outcome-imagegen-drift{from{translate:0 0}to{translate:0 -3px}}
/* the drawn arrows (gold rising, purple falling) trace themselves once the
   mark has snapped together, so the card reads before it moves */
.js .oc-art .rise,.js .oc-art .drop{stroke-dasharray:100}
.snap-stage.formed ~ .outcomes .oc-art .rise,
.snap-stage.formed ~ .outcomes .oc-art .drop{animation:oc-trace .75s var(--ez) .5s both}
.snap-stage.formed ~ .outcomes .oc-art .rise-h,
.snap-stage.formed ~ .outcomes .oc-art .drop-h{animation-duration:.3s;animation-delay:1.15s}
@keyframes oc-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* one riyal into the channels, three back out */
.oc-roas .rout{transform-box:fill-box;transform-origin:50% 50%}
.snap-stage.formed ~ .outcomes .oc-roas .rout{animation:oc-pop .5s var(--ez) both;animation-delay:calc(.55s + var(--rd))}
@keyframes oc-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
/* The report-and-finjan still life stays calm while the data flow does the work. */
.oc-calm .flow{opacity:.35}
.js .snap-stage.formed ~ .outcomes .oc-calm .flow{animation:oc-flow 2.4s ease-in-out infinite;animation-delay:var(--fd)}
@keyframes oc-flow{0%,100%{opacity:.35}45%{opacity:1}}

/* ---------- 05 · compare ---------- */
.compare{position:relative;padding:110px 0 0}
.cr-list{display:flex;flex-direction:column;gap:14px;padding:44px var(--px) 96px}
.cr{display:grid;grid-template-columns:1fr 76px 1fr;border-radius:28px;overflow:hidden;border:1px solid #eceaf2}
.cr-cell{padding:clamp(20px,2.6vw,30px) clamp(17px,2.8vw,32px);display:flex;align-items:center;justify-content:space-between;gap:22px}
.cr-cell.before{background:var(--panel)}
.cr-cell.after{background:var(--sf);color:#fff}
.js .cr .after{clip-path:inset(0 0 0 100%);transition:clip-path .58s var(--ez) .06s}
.js .cr.in .after{clip-path:inset(0 0 0 0)}
.cr-mid{background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cr-mid span{font:500 11px 'IBM Plex Mono',Almarai,sans-serif;color:#5c5680}
.cr-mid svg{width:18px;height:12px}
.cr-mid path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cr-txt{display:flex;flex-direction:column;gap:5px;text-align:start}
.cr-txt i{font-style:normal;font:700 11.5px Almarai,sans-serif;color:var(--grey)}
.cr-txt b{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(17px,2.1vw,22px);font-weight:900}
.cr-txt b.bad{color:#c07a7a}
.cr-txt b.dim{color:var(--grey-2)}
.after .cr-txt i{color:rgba(255,255,255,.94)}
.after .cr-txt b{color:#fff}
.cr-art{display:flex;align-items:center;gap:10px}
/* the same customer card, paid for over and over: they stack on each other */
.pc-mini{width:44px;height:53px;box-sizing:border-box;border-radius:12px;background:#fff;box-shadow:0 10px 22px -14px rgba(24,20,48,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}
.pc-mini svg{width:24px;height:24px}
.pc-mini circle,.pc-mini path{fill:none;stroke:#8f89a5;stroke-width:2.4;stroke-linecap:round}
.pc-mini+.pc-mini{margin-inline-start:-14px}
.pc-mini.r1{transform:rotate(-5deg);z-index:1}
.pc-mini.r2{transform:rotate(3.5deg);z-index:2}
.pc-mini.r3{transform:rotate(-1.5deg);z-index:3}
.pc-mini.solo{transform:none;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 12px 24px -14px rgba(0,0,0,.5)}
.pc-mini.solo circle,.pc-mini.solo path{stroke:var(--sf)}
/* eleven dashboards he really logs into, eleven separate windows */
.dash-grid{display:grid;grid-template-columns:repeat(4,38px);gap:6px}
.dash-grid i{position:relative;width:38px;height:28px;border-radius:7px;background:#fff;box-shadow:0 5px 12px -8px rgba(24,20,48,.45);display:flex;align-items:center;justify-content:center}
.dash-grid img{display:block;width:18px;height:18px;object-fit:contain}
.dash-grid i.wide img{width:29px;height:15px}
.dash-grid i:nth-child(odd){transform:rotate(-2deg)}
.dash-grid i:nth-child(3n){transform:rotate(2.5deg)}
/* and the one report that replaces all eleven: solid, ours, one number to read */
.report-card{width:168px;box-sizing:border-box;padding:11px 14px;border-radius:14px;background:#fff;box-shadow:0 16px 30px -18px rgba(24,20,48,.7);display:flex;flex-direction:column;gap:7px}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-top img{display:block;flex:none}
.rc-top b{display:block;height:6px;width:74px;border-radius:3px;background:#e3dff0}
.rc-bars{display:flex;align-items:flex-end;gap:6px;height:23px}
.rc-bars i{width:16px;border-radius:3px 3px 0 0;background:#ded9ef}
.rc-bars i:nth-child(2){background:#cfc7ea}
.rc-bars i:nth-child(3){background:#b8ade1}
.rc-bars i:last-child{background:var(--gold)}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;border-top:1px solid #ece9f4}
.rc-foot b{display:block;height:5px;width:52px;border-radius:3px;background:#ebe8f3}
.rc-foot img{display:block;flex:none}
.mini-panel.sm .mp-card{width:78px;padding:10px 10px 11px;border-radius:13px;gap:8px}
.mini-panel.sm .mp-bars{height:21px;gap:4px}
.mini-panel.sm .mp-bars i{width:6px}
.mini-panel.sm .mp-card b{font-size:18px}
.mini-panel.sm .mp-riyal{height:21px}
.mini-panel.sm .mp-cap{font-size:10.5px}
.mp-card.lite{background:#fff}
.mp-card.one{flex-direction:row;align-items:flex-end;gap:9px;width:auto;padding:12px 14px}
.mp-card.one .mp-riyal img{filter:none}
.mp-card.ghost{background:rgba(255,255,255,.18)}
.mp-card.ghost b{color:#fff}
.after .mp-cap{color:rgba(255,255,255,.72)}
.mp-card.lite .mp-bars i{background:#d3c2ff}
.mp-card.lite .mp-bars i.hot{background:var(--sf)}
.eq{font:800 20px Almarai,sans-serif;color:#fff}
/* one purchase, then three empty slots where the repeats should have been */
.ret{display:block;height:52px}
.ret svg{display:block;height:100%;width:auto}
/* the spend: falling off a broken rail, then running along a solid one */
.coins-mess{position:relative;width:154px;height:60px}
.coins-mess::before,.coins-mess::after{content:"";position:absolute;top:27px;height:3px;border-radius:2px;background:#bcb6cd}
.coins-mess::before{inset-inline-start:0;width:34%;transform-origin:100% 50%;transform:rotate(-5deg)}
.coins-mess::after{inset-inline-end:0;width:22%;transform-origin:0 50%;transform:rotate(7deg)}
.coins-mess img{position:absolute}
.coins-mess .m1{inset-inline-start:4px;top:2px;transform:rotate(-11deg)}
.coins-mess .m2{inset-inline-start:48px;top:31px;transform:rotate(26deg)}
.coins-mess .m3{inset-inline-start:84px;top:33px;transform:rotate(-21deg)}
.coins-mess .m4{inset-inline-start:124px;top:3px;transform:rotate(9deg)}
.coins-line{position:relative;display:flex;align-items:center;gap:11px;padding-bottom:13px}
.coins-line::before{content:"";position:absolute;inset-inline:-5px;bottom:2px;height:3px;border-radius:2px;background:rgba(255,255,255,.6)}
/* one loyal-customer token escapes the broken cycle, then returns inside a closed one */
.loyal-art{display:block;width:154px;height:96px;object-fit:contain;flex:none;filter:drop-shadow(0 9px 7px rgba(24,20,48,.12))}
.after .loyal-art{filter:drop-shadow(0 10px 8px rgba(24,20,48,.24))}

/* ---------- 06 · service ---------- */
.service{padding:96px 0 0}
.service-panel{margin:0 var(--px);border-radius:var(--rad);background:var(--ink);padding:clamp(40px,5.6vw,70px) var(--pin)}
.steps{position:relative;display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;margin-top:52px}
.step{border-radius:26px;background:#221d40;padding:32px 30px 34px;display:flex;flex-direction:column;gap:22px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:var(--sf);font:800 16px Almarai,sans-serif;color:#fff}
.step-art{height:96px;display:flex;align-items:center;gap:9px}
/* the three steps are drawn scenes on one shared stage */
.step-art.scene{display:block;height:auto}
/* the scene scales with the card and sits at the inline start, so it lines
   up under the heading instead of floating in the middle of a wide card */
.step-art.scene svg{display:block;width:100%;max-width:360px;height:auto;overflow:visible}
/* step 1: nine real sources join one trunk, and the trunk thickens at every
   junction on its way into the mark. The thickening carries the sentence: the
   more of your channels are connected, the stronger the one signal gets. */
.sv-wire .wires path{fill:none;stroke:#5d5590;stroke-width:1.7;stroke-linecap:round}
.sv-wire .trunk path{fill:none;stroke-linecap:round}
.sv-wire .trunk .t1{stroke:#5d5590;stroke-width:1.7}
.sv-wire .trunk .t2{stroke:#6d61ac;stroke-width:2.5}
.sv-wire .trunk .t3{stroke:var(--sf);stroke-width:3.6}
.sv-wire .joins circle{fill:#8578cf}
.sv-wire .chips rect{fill:#fff}
.sv-wire .chips,.sv-wire .hub{filter:drop-shadow(0 8px 14px rgba(9,6,26,.5))}
.sv-wire .pulses path{fill:none;stroke:var(--gold-hi);stroke-width:2;stroke-linecap:round;stroke-dasharray:9 400;stroke-dashoffset:9;opacity:0}
.js .steps.in .sv-wire .pulses path{animation:sv-pulse 3.4s linear infinite;animation-delay:var(--wd,0s)}
@keyframes sv-pulse{0%{stroke-dashoffset:9;opacity:1}96%{opacity:1}100%{stroke-dashoffset:-400;opacity:0}}
.js .sv-wire .chips>g{opacity:0;transform-box:fill-box;transform-origin:center}
.js .steps.in .sv-wire .chips>g{animation:sv-chip .42s var(--ez) both;animation-delay:var(--cd,0s)}
@keyframes sv-chip{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
/* step 2: the scattered customers arrive, then the sorted groups slide in */
.sv-sort .funnel path{fill:none;stroke:#5d5590;stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.sv-sort .funnel path.tip{stroke-dasharray:none;stroke-width:2.4;stroke-linejoin:round}
.sv-sort .funnel .src{fill:#8578cf}
.js .steps.in .sv-sort .scatter{animation:sv-fade .38s cubic-bezier(.23,1,.32,1) both}
.js .steps.in .sv-sort .funnel{animation:sv-fade .38s cubic-bezier(.23,1,.32,1) .08s both}
.js .steps.in .sv-sort .order{animation:sv-arrive .52s var(--ez) .16s both}
@keyframes sv-fade{from{opacity:0}to{opacity:1}}
@keyframes sv-arrive{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.step h3{margin:0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(20px,2.2vw,24px);line-height:1.45;font-weight:800;color:#fff}
.step-arw{display:flex;align-items:center;justify-content:center}
.step-arw svg{width:24px;height:14px}
.step-arw path{fill:none;stroke:#403a5e;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* step 3: the result passes the line that was agreed, and the Sfere stamp lands
   on top of it. Same ring, rules and dots as the section 07 seal, drawn small,
   so the promise reads as one mark used twice and not as two separate ideas. */
.sv-seal{filter:drop-shadow(0 14px 26px rgba(0,0,0,.4))}
.sv-seal .grid path{fill:none;stroke:#efecf6;stroke-width:1}
.sv-seal .target{fill:none;stroke:var(--gold-lo);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;opacity:.7}
.sv-seal .rise{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sv-seal .tipring{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.42}
.sv-seal .stamp .edge{fill:none;stroke:#4f41bd;stroke-width:3;stroke-linejoin:round}
.sv-seal .stamp{transform-box:fill-box;transform-origin:center;transform:rotate(-7deg)}
.js .sv-seal .rise{stroke-dasharray:240;stroke-dashoffset:240}
.js .steps.in .sv-seal .rise{animation:sv-draw .9s var(--ez) .3s both}
@keyframes sv-draw{to{stroke-dashoffset:0}}
.js .sv-seal .stamp{opacity:0}
.js .steps.in .sv-seal .stamp{animation:sv-stamp .52s cubic-bezier(.3,1.32,.4,1) .8s both}
@keyframes sv-stamp{0%{opacity:0;transform:scale(1.85) rotate(5deg)}62%{opacity:1;transform:scale(.95) rotate(-8.6deg)}100%{opacity:1;transform:scale(1) rotate(-7deg)}}

/* ---------- 07 · faq ---------- */
.faq{padding:96px 0}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:900px;margin:36px auto 0;padding:0 var(--px)}
.fq{background:var(--panel);border-radius:20px;padding:24px 28px;transition:background-color .24s ease}
.fq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;font-family:'Noto Kufi Arabic',sans-serif;font-size:19px;font-weight:700}
.fq summary::-webkit-details-marker{display:none}
.fq:hover{background:#eae8f0}
.fq[open]{background:#eae8f0}
.fq-p{font-size:24px;font-weight:300;color:var(--grey-2);transition:color .24s ease,transform .34s var(--ez);line-height:1}
.fq[open] .fq-p{color:var(--ink);transform:rotate(45deg)}
.fq-a{margin:17px 0 0;max-width:64ch;font-size:15.5px;line-height:1.95;color:var(--grey)}
@supports (interpolate-size: allow-keywords){.fq::details-content{block-size:0;overflow:hidden;opacity:0;transition:content-visibility .42s allow-discrete,block-size .42s var(--ez),opacity .3s ease}.fq[open]::details-content{block-size:auto;opacity:1}}

/* ---------- 08 · pledge: the ink stamp ---------- */
.pledge{padding:0 0 96px}
.pledge-panel{position:relative;overflow:hidden;margin:48px var(--px) 0;border-radius:var(--rad);background:#fbf7ec;padding:clamp(40px,4.8vw,64px) var(--pin);display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(28px,4vw,72px);box-shadow:0 34px 64px -32px rgba(122,90,27,.38),inset 0 0 0 2px #e9d9a8,inset 0 0 0 10px #fbf7ec,inset 0 0 0 11.5px rgba(185,138,46,.5)}
.pl-kicker{display:inline-block;font:800 13px Almarai,sans-serif;color:#8a651f;background:#f4e8c3;border:1px solid #e2ce93;border-radius:999px;padding:9px 18px;margin-bottom:28px}
.pl-body{justify-self:center}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.pl-item{display:flex;align-items:center;gap:16px}
.pl-item b{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(19px,2.1vw,25px);font-weight:800;line-height:1.55}
.pl-check{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fdf0b8,#d9ac42 68%,#b98a2e);box-shadow:0 7px 14px -6px rgba(138,101,31,.65),inset 0 0 0 1.5px rgba(138,101,31,.35);display:flex;align-items:center;justify-content:center}
.pl-check svg{width:16px;height:12px}
.pl-check path{fill:none;stroke:#5f4610;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pl-faza{margin:32px 0 0;padding-inline-start:16px;border-inline-start:3px solid var(--gold);font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(17px,1.8vw,21px);font-weight:800;color:#8a651f}

.seal-zone{position:relative;width:clamp(220px,23vw,300px)}
.seal-tilt{position:relative;transform:rotate(-8deg)}
/* multiply lets the ink sit in the cream paper instead of on top of it.
   Arabic stays on a straight SVG baseline because Safari/WebKit corrupts
   Arabic shaping on textPath. The Latin wordmark keeps the remaining arc. */
.seal{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.seal-pulse{position:absolute;left:3.8%;top:3.8%;width:92.4%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(79,65,189,.55);opacity:0;pointer-events:none}

/* the stamp slams down once the panel is in view; items seal the deal after */
.js .pledge-panel .seal-tilt{opacity:0}
.pledge-panel.in .seal-tilt{opacity:1;animation:stamp .48s cubic-bezier(.3,1.35,.4,1) .06s both}
@keyframes stamp{0%{opacity:0;transform:scale(2.05) rotate(6deg)}55%{opacity:1;transform:scale(.94) rotate(-9.5deg)}78%{transform:scale(1.03) rotate(-7.3deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.pledge-panel.in .seal-pulse{animation:sealpulse .82s cubic-bezier(.23,1,.32,1) .22s both}
@keyframes sealpulse{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(2.6)}}
.pledge-panel.in{animation:pshake .34s cubic-bezier(.23,1,.32,1) .25s both}
@keyframes pshake{0%,100%{transform:none}28%{transform:translateY(2.5px)}58%{transform:translateY(-1.2px)}82%{transform:translateY(.5px)}}
.js .pledge-panel .pl-item{opacity:0;transform:translateY(16px);transition:opacity .34s cubic-bezier(.23,1,.32,1),transform .42s var(--ez)}
.pledge-panel.in .pl-item{opacity:1;transform:none}
.pledge-panel.in .pl-item:nth-child(1){transition-delay:.32s}
.pledge-panel.in .pl-item:nth-child(2){transition-delay:.4s}
.pledge-panel.in .pl-item:nth-child(3){transition-delay:.48s}
.js .pledge-panel .pl-faza{opacity:0;transform:translateY(10px);transition:opacity .34s cubic-bezier(.23,1,.32,1),transform .42s var(--ez)}
.pledge-panel.in .pl-faza{opacity:1;transform:none;transition-delay:.62s}

/* ---------- final cta: the button completes the mark ---------- */
.final{padding:0 0 90px}
.final-panel{margin:0 var(--px);border-radius:var(--rad);background:var(--sf);padding:clamp(48px,7vw,84px) var(--pin);text-align:center;overflow:hidden;position:relative}
.final-panel h2{margin:0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(29px,5.9vw,64px);line-height:1.32;font-weight:900;letter-spacing:-.02em;color:#fff;max-width:20ch;margin-inline:auto;text-wrap:balance}
.final-act{position:relative;display:inline-block;margin-top:38px}
.fmark{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none}
.fmark i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;background:var(--c);opacity:var(--o,.9);transform:translate(var(--fx),var(--fy));animation:ftwink 3.6s ease-in-out var(--bd,0s) infinite}
.js .fmark i{animation:none;opacity:0}
.js .final-panel.in .fmark i{animation:ftwink 3.6s ease-in-out var(--bd,0s) infinite}
@keyframes ftwink{0%{opacity:0}14%{opacity:var(--o,.9)}52%{opacity:.42}78%{opacity:var(--o,.9)}100%{opacity:var(--o,.9)}}
.final-bt{position:relative;z-index:2;padding:20px 44px;border-radius:14px;font-size:18px;font-weight:800}
.final-note{margin:22px 0 0;font-size:15.5px;color:rgba(255,255,255,.82)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:52px var(--px) 24px}
.footer-tag{font-size:14px;color:#8a84a6}
.footer-base{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px var(--px) 26px;border-top:1px solid rgba(255,255,255,.08);color:#8a84a6;font:400 13px Almarai,sans-serif}

/* ---------- responsive ---------- */
/* below 1200 the rail sits on top of the content column and clips card headlines,
   so it steps out one breakpoint earlier than the padding change */
@media (max-width:1200px){.rail{display:none}}
@media (max-width:1180px){
  :root{--px:38px;--pin:44px;--rad:32px}
  .pile{height:620px}
}
@media (max-width:1000px){
  .outcomes{grid-template-columns:repeat(2,1fr)}
  .story{grid-template-columns:repeat(2,1fr)}
  .pile{height:550px}
  .recon-sheet{width:210px;padding:14px 15px 17px;opacity:.62}
  .recon-stamp{opacity:.42}
  .hero{min-height:calc(96svh - 70px);align-items:flex-start}
  .hero-inner{grid-template-columns:1fr;padding-top:46px;padding-bottom:80px}
  .hero-copy{text-align:center;max-width:none;margin:0 auto}
  .hero-sub{margin-inline:auto}
  .hero-proof{justify-content:center}
  .hero-trust{justify-content:center;margin-inline:auto}
  .hero-press{width:min(78vw,440px);padding-top:30px}
}
@media (max-width:860px){
  :root{--px:26px;--pin:30px;--rad:26px}
  .nav-links{display:none}
  .steps{grid-template-columns:1fr;gap:14px}
  .step-arw svg{transform:rotate(-90deg)}
  .pile{height:490px}
  .recon-sheet{width:176px;padding:12px 13px 14px;opacity:.5}
  .recon-sheet i:nth-of-type(2){display:none}
  .recon-stamp{display:none}
  .recon-deadline{top:1%;padding:5px 9px 6px;box-shadow:3px 3px 0 rgba(184,77,63,.12)}
  .pledge-panel{grid-template-columns:1fr;padding:clamp(30px,6vw,44px) clamp(20px,5vw,36px) clamp(38px,7vw,52px)}
  .seal-zone{order:-1;margin-inline:auto;width:min(230px,56vw)}
  .pl-kicker{margin-bottom:22px}
}
@media (max-width:720px){
  .outcomes{grid-template-columns:1fr}
  .story{grid-template-columns:1fr;padding:36px var(--px) 78px}
  .stc-canvas{width:min(106%,460px)}
  .cr{grid-template-columns:1fr}
  .cr-mid{flex-direction:row;padding:10px 0}
  .cr-mid svg{transform:rotate(-90deg)}
  .js .cr .after{clip-path:inset(0 0 0 0)}
  .js .cr .after .cr-txt,.js .cr .after .cr-art{opacity:0;transform:translateY(14px);transition:opacity .3s cubic-bezier(.23,1,.32,1) .06s,transform .4s var(--ez) .06s}
  .js .cr.in .after .cr-txt,.js .cr.in .after .cr-art{opacity:1;transform:none}
  /* Keep the story moving on phones without changing any section content. */
  .service{padding-top:68px}
  .faq{padding-bottom:68px}
  .pledge{padding-bottom:68px}
}
/* below this the pile stops reading as a scene: it becomes the heap's spill, item by item */
@media (max-width:640px){
  .pile{height:auto;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:10px;padding:28px 16px 30px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"),
      linear-gradient(180deg,#f3f1f7 0%,#e6e3ee 24%,#c8c1da 44%,#8d84a5 62%,#4a4168 78%,#221c3c 91%,#120f21 100%)}
  .pile-backdrop{display:none}
  /* the list already ends on dark ground, so it needs no shadow band under it */
  .pile::before{display:none}
  .pile-floor{display:block;inset:auto 0 0;left:0;width:100%;height:150px;transform:none}
  .pile-shade{background:radial-gradient(120% 74% at 50% 76%,rgba(24,20,48,0) 36%,rgba(10,8,22,.34) 100%)}
  .pcrack,.px{display:none}
  .pi{position:static;z-index:auto}
  .pi:not(.mobok){display:none}
  .js .pi{transform:translateY(-160px) rotate(calc(var(--rt,0deg) * 2))}
  .js .pile.in .pi{transform:translateY(0) rotate(var(--rt,0deg))}
  .pi-in{animation:none !important}
  .ptile .pi-in,.ptile.sm .pi-in,.ptile.lg .pi-in{width:56px;height:56px;border-radius:16px}
  .ptile .pi-in img{width:58%;height:58%}
  .ptile.store .pi-in{width:76px;height:46px}
  .pplate .pi-in{width:52px;height:56px;border-radius:9px;font-size:19px;gap:1px}
  .pplate .pi-in small{font-size:6.5px}
  .pchip .pi-in{font-size:11.5px;padding:10px 13px;border-radius:12px}
  .pchip .pi-in small{font-size:9.5px}
  .problem-chip .pi-in{border-radius:4px 11px 11px 11px;box-shadow:3px 4px 0 var(--ticket-shadow),0 12px 22px -16px rgba(24,20,48,.28)}
  .problem-chip .pi-in::before{inset-inline-start:7px;top:-7px;padding:2px 5px;font-size:6.5px}
  .pmerchant{flex:0 0 100%;display:flex;justify-content:center;order:2;margin-top:8px}
  .pmerchant .pi-in{width:150px}
  .pcry{position:static;flex:0 0 100%;order:-1;text-align:center;font-size:clamp(34px,10vw,52px);margin-bottom:14px;text-shadow:none;transform:none}
  .js .pcry{transform:translateY(-60px) scale(.9)}
  .js .pile.in .pcry{transform:none}
  .pcap{margin-top:18px;line-height:1.7}
  .pcap::before,.pcap::after{flex-basis:24px}
  .snap-stage{aspect-ratio:900/550;margin-top:16px;--tk:.58}
  .js .snp.aux{display:none}
  .one-card{left:50%;bottom:0;padding:12px 18px;gap:10px}
  .one-card b,.one-card i{white-space:nowrap}
  .calm{width:92px;left:auto;right:-2%;bottom:-1%}
  .fmark{display:none}
}
@media (max-width:520px){
  :root{--px:16px;--pin:20px;--rad:20px}
  .hero{min-height:calc(100svh - 73px)}
  .hero-actions .bt{width:100%}
  .hero-inner{padding-top:38px}
  .hero-copy::before{inset:-6% -8%}
  .hero-press{width:min(88vw,340px);padding-top:24px}
  .press-cap{font-size:12px;margin-top:12px}
  .hero-trust{gap:9px;margin-top:22px}
  .hero-trust-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .hero-trust-logos .hero-trust-logo{grid-column:span 2}
  .hero-trust-logo{height:48px;padding:8px}
  .hero-trust-logo--ejari{padding:0}
  .hero-trust-logo--umx img{max-width:96px;max-height:21px}
  .hero-trust-backing{gap:8px;padding-top:10px}
  .hero-trust-logo--sanabil{width:174px;height:40px;padding:8px 12px}
  .hero-trust-note{text-align:center}
  .footer-base{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .hero-copy>*{opacity:1 !important;transform:none !important}
  .js .hero .sq path{stroke-dashoffset:0 !important}
  .js .hero-press{animation:none !important}
  .js .press-cap{opacity:1 !important;transform:none !important;animation:none !important}
  .js .scroll-cue{opacity:1 !important}
  .js .hero.in .scroll-cue i{animation:none !important;opacity:1}
  .js [data-rv],.js [data-rv-kids]>*,.js .heap-card{opacity:1;transform:none}
  .js .pi{opacity:1;transform:none}
  .js .pcry{opacity:1;transform:translate(-50%,0) rotate(-3deg)}
  .pcrack i{display:none}
  .js .cr .after{clip-path:inset(0 0 0 0)}
  .js .cr .after .cr-txt,.js .cr .after .cr-art{opacity:1;transform:none}
  .js .snp{left:var(--tx);top:var(--ty)}
  .js .snp-in{animation:none !important;width:calc(var(--ds)*var(--tk,1));height:calc(var(--ds)*var(--tk,1));border-radius:50%;background:var(--tc)}
  .js .snp-in img{display:none}
  .snp.aux,.snap-beat{display:none}
  .stage-floor{opacity:1}
  .js .one-card,.js .calm{opacity:1;transform:none}
  .js .one-card{transform:translateX(-50%)}
  .js .snap-word{opacity:1;clip-path:inset(0 0 0 0)}
  .calm-in{animation:none !important}
  .js .outcomes>*{opacity:1;transform:none}
  .outcome-link-track{stroke-dashoffset:0;opacity:.34}
  .outcome-link-energy,.outcome-source-ring{display:none}
  .js .outcomes li::before{opacity:1;scale:1}
  /* the outcome and step scenes rest in their finished, readable state */
  .js .oc-art .rise,.js .oc-art .drop{stroke-dashoffset:0 !important}
  .js .oc-roas .rout{opacity:1;transform:none}
  .js .oc-calm .flow{animation:none !important}
  .js .oc-calm .flow{opacity:.7}
  .js .sv-wire .pulses{display:none}
  .js .sv-sort .scatter,.js .sv-sort .funnel,.js .sv-sort .order{opacity:1;transform:none}
  .js .sv-wire .chips>g{opacity:1;transform:none;animation:none !important}
  .js .sv-seal .rise{stroke-dasharray:none;stroke-dashoffset:0;animation:none !important}
  .js .sv-seal .stamp{opacity:1;transform:rotate(-7deg);animation:none !important}
  .js .fmark i{animation:none !important;opacity:var(--o,.9)}
  .js .story>*{opacity:1;transform:rotate(var(--r,0deg))}
  .money-pressure,.claim-impact,.coin-stream,.tiny-order-ping,.footstep,.crack-flash,.loop-shard,.mismatch-zap{opacity:0 !important}
}

/* ---------- v10 · signal iconography, no character art ---------- */
.symbolic-v10 .sec-marks img,
.symbolic-v10 .g1-face img:not([src*="riyal"]),
.symbolic-v10 .pile .ptile img,
.symbolic-v10 .dash-grid img,
.symbolic-v10 .snap-stage .snp-in img:not([src*="riyal"]),
.symbolic-v10 .sv-wire image:not([href*="brand"]){filter:grayscale(1) saturate(0) contrast(1.32) brightness(.62)}
.symbolic-v10 .symbol-scene{filter:none;object-fit:cover;border-radius:18px}
.symbolic-v10 .symbol-scene.supplied-scene{object-fit:contain}
.symbolic-v10 .stc.is-active .imagegen-scene{animation:imagegen-float 5.8s cubic-bezier(.45,.05,.2,1) infinite !important}
.symbolic-v10 .stc:nth-child(2) .imagegen-scene{animation-delay:-1.4s !important}
.symbolic-v10 .stc:nth-child(3) .imagegen-scene{animation-delay:-2.8s !important}
.symbolic-v10 .stc:nth-child(4) .imagegen-scene{animation-delay:-.9s !important}
.symbolic-v10 .stc:nth-child(5) .imagegen-scene{animation-delay:-2.1s !important}
.symbolic-v10 .stc:nth-child(6) .imagegen-scene{animation-delay:-3.5s !important}
@keyframes imagegen-float{0%,100%{transform:translate3d(0,0,0) scale(1.01)}50%{transform:translate3d(0,-3px,0) scale(1.018)}}
.symbolic-v10 .stc-canvas::before{left:8%;right:8%;bottom:4%;height:8%;opacity:.55}
.symbolic-v10 .stc-art--1,.symbolic-v10 .stc-art--2,.symbolic-v10 .stc-art--3,.symbolic-v10 .stc-art--4,.symbolic-v10 .stc-art--5,.symbolic-v10 .stc-art--6{--sl:8%;--sr:8%;--sb:4%}
.symbolic-v10 .stc-art--6 .live-counter{background:transparent;clip-path:none;transform:none;animation:none !important}
.symbolic-v10 .stc-art--6 .live-counter--ads{left:9.8%;top:49.6%;width:23.4%;height:19.4%;font-size:clamp(30px,10cqw,52px)}
.symbolic-v10 .stc-art--6 .live-counter--bank{left:65.4%;top:50.8%;width:23.3%;height:19.1%;font-size:clamp(25px,8cqw,44px)}
.symbolic-v10 .stc-art--6 .scene-label{position:absolute;z-index:7;padding:3px 6px;border:1px solid rgba(33,28,63,.12);border-radius:6px;background:rgba(255,255,255,.94);box-shadow:0 4px 10px -7px rgba(24,20,48,.7);font-family:'Noto Kufi Arabic',Almarai,sans-serif;font-weight:800;line-height:1;color:#211c3f;white-space:nowrap}
.symbolic-v10 .stc-art--6 .scene-label--sales{left:12%;top:44%;font-size:clamp(10px,3.1cqw,16px)}
.symbolic-v10 .stc-art--6 .scene-label--bank{left:68.5%;top:21%;font:800 clamp(9px,2.75cqw,14px)/1 'IBM Plex Mono',monospace;letter-spacing:.04em}
.symbolic-v10 .stc-art--6 .scene-label--money{left:68.5%;top:44%;font-size:clamp(10px,3.1cqw,16px)}
.symbolic-v10 .stc-art--6 .mismatch-zap{display:none}
.symbolic-v10 .pghost .pi-in svg rect,
.symbolic-v10 .pghost .pi-in svg path{fill:none;stroke:var(--gc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.symbolic-v10 .psignal-core .pi-in{width:164px;animation:signal-strain 4.6s ease-in-out infinite}
.symbolic-v10 .psignal-core img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 21px rgba(6,4,14,.62)) drop-shadow(0 0 30px rgba(217,172,66,.28))}
@keyframes signal-strain{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(5px) scaleY(.97)}}
.symbolic-v10 .oc-order-token{width:28px;height:28px;flex:none}
.symbolic-v10 .oc-order-token rect,.symbolic-v10 .oc-order-token path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.symbolic-v10 .calm{width:132px;left:77%;bottom:-3%}
.symbolic-v10 .calm img{filter:drop-shadow(0 13px 20px rgba(24,20,48,.3))}
.symbolic-v10 .oc-calm .calm-still-life{transform-box:fill-box;transform-origin:50% 100%}
.symbolic-v10 .snap-stage.formed ~ .outcomes .oc-calm .calm-still-life{animation:still-life-settle .75s var(--ez) .35s both}
@keyframes still-life-settle{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}
.symbolic-v10 .pc-mini rect,.symbolic-v10 .pc-mini path{fill:none;stroke:#8f89a5;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.symbolic-v10 .pc-mini.solo rect,.symbolic-v10 .pc-mini.solo path{stroke:var(--sf)}
.symbolic-v10 .sv-sort .scatter,.symbolic-v10 .sv-sort .order{color:#211c3f}

@media (max-width:640px){
  .symbolic-v10 .psignal-core{flex:0 0 100%;display:flex;justify-content:center;order:2;margin-top:6px}
  .symbolic-v10 .psignal-core .pi-in{width:128px}
  .symbolic-v10 .calm{width:92px;left:auto;right:0;bottom:-2%}
}

@media (prefers-reduced-motion:reduce){
  .symbolic-v10 .psignal-core .pi-in,
  .symbolic-v10 .oc-calm .calm-still-life,
  .symbolic-v10 .outcome-imagegen{animation:none !important;translate:none !important;transform:none !important}
}

/* ---------- v11 · Arabic visual reading direction ----------
   Every problem-card asset is authored in its final orientation and must remain
   exactly as supplied. RTL layout must never mirror the artwork itself. */
.rtl-story-v11 .story .symbol-scene{
  scale:1 1;
  transform-origin:50% 50%;
}

/* This separate outcome illustration still uses its original directional treatment. */
.rtl-story-v11 .loyal-art{
  scale:-1 1;
  transform-origin:50% 50%;
}

/* Keep the live values and their labels readable after the sixth scene reverses. */
.rtl-story-v11 .stc-art--6 .live-counter--ads{left:66.8%}
.rtl-story-v11 .stc-art--6 .live-counter--bank{left:11.3%}
.rtl-story-v11 .stc-art--6 .scene-label--sales{left:70%}
.rtl-story-v11 .stc-art--6 .scene-label--bank,
.rtl-story-v11 .stc-art--6 .scene-label--money{left:12%}

/* ---------- v12 · PDF hybrid: the campaign analysis room ----------
   The reference contributes clearer questions and a five-stage analytical
   story. The approved page contributes the merchant, platform choreography,
   Sfere formation, connected outcomes and service promise. */
body.sfere-ecommerce-ar.hybrid-v12{
  --hy-paper:#fbfaf7;
  --hy-lilac:#f2effd;
  --hy-line:#ded9ef;
  --hy-ink:#17132e;
  background:#17132e;
}
.hybrid-v12 .page{max-width:1600px;background:var(--hy-paper);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.hybrid-v12 .nav{padding-block:16px;border-color:rgba(24,20,48,.08);background:rgba(251,250,247,.9)}
.hybrid-v12 .nav-links{gap:30px;color:#5d5870}
.hybrid-v12 .nav-cta{border-radius:999px;padding-inline:25px}
.hybrid-v12 .rail{background:rgba(251,250,247,.94);box-shadow:0 18px 44px -25px rgba(24,20,48,.42),0 0 0 1px rgba(24,20,48,.06)}

/* hero: an editorial question facing a living campaign signal field */
.hybrid-v12 .hero{min-height:calc(100svh - 69px);align-items:center;background-color:var(--hy-paper);background-image:
  linear-gradient(rgba(118,79,246,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(118,79,246,.045) 1px,transparent 1px),
  radial-gradient(circle at 12% 14%,rgba(118,79,246,.13),transparent 27%),
  radial-gradient(circle at 82% 88%,rgba(217,172,66,.12),transparent 24%);
  background-size:56px 56px,56px 56px,auto,auto}
.hybrid-v12 .hero-glow{background:linear-gradient(115deg,transparent 42%,rgba(118,79,246,.06) 42.2%,rgba(118,79,246,.06) 57.8%,transparent 58%);opacity:.9}
.hybrid-v12 .hero::after{height:72px;background:linear-gradient(rgba(251,250,247,0),var(--hy-paper) 88%)}
.hybrid-v12 .hero-inner{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(36px,5vw,78px);align-items:center;padding-top:54px;padding-bottom:86px}
.hybrid-v12 .hero-copy{max-width:690px}
.hybrid-v12 .hero-copy::before{display:none}
.hybrid-v12 .hero-chip{margin-bottom:26px;padding:9px 15px;border:1px solid #d9d1fb;border-radius:8px;background:var(--hy-lilac);color:var(--sf);font-size:12px}
.hybrid-v12 .hero h1{font-size:clamp(48px,6.2vw,88px);line-height:1.28;letter-spacing:-.025em}
.hybrid-v12 .hero-question{display:inline;color:var(--hy-ink)}
.hybrid-v12 .hero-highlight{position:relative;display:inline-block;color:var(--sf)}
.hybrid-v12 .hero-highlight::after{content:"";position:absolute;right:2%;left:0;bottom:.06em;height:.16em;z-index:-1;border-radius:999px;background:var(--gold-hi);transform:rotate(-1.5deg)}
.hybrid-v12 .hero-sub{max-width:48ch;margin-top:24px;color:#514b66;font-size:clamp(16px,1.55vw,19px);line-height:1.95}
.hybrid-v12 .hero-actions{margin-top:30px}
.hybrid-v12 .hero-actions .bt{border-radius:999px;padding:18px 34px}
.hybrid-v12 .hero-proof{gap:9px;margin-top:24px}
.hybrid-v12 .hero-proof li{padding:9px 13px 9px 14px;border:1px solid var(--hy-line);border-radius:999px;background:rgba(255,255,255,.72);color:#4f4962;font-size:12px}
.hybrid-v12 .hero-proof li::before{position:static;display:inline-block;margin-inline-end:8px;transform:none;background:var(--sf);vertical-align:1px}
.hybrid-v12 .hero-trust{margin-top:28px;padding-top:18px;border-top:1px solid rgba(24,20,48,.08)}
.hybrid-v12 .hero-trust-logo{background:#fff;border-color:#e8e5ef;box-shadow:0 12px 24px -22px rgba(24,20,48,.6)}

.hybrid-v12 .hero-press{width:min(100%,610px);padding:18px 24px 20px;border:1px solid rgba(255,255,255,.1);border-radius:38px;background:
  linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
  radial-gradient(circle at 62% 42%,rgba(118,79,246,.46),transparent 42%),
  var(--hy-ink);
  background-size:34px 34px,34px 34px,auto,auto;box-shadow:0 48px 90px -48px rgba(24,20,48,.78);transform:rotate(-1.1deg)}
.hybrid-v12 .hero-press::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.08);border-radius:29px;pointer-events:none}
.hybrid-v12 .press-hud{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 5px 10px;color:#fff;font:800 12px Almarai,sans-serif}
.hybrid-v12 .press-hud b{display:flex;align-items:center;gap:7px;color:#a8a1bf;font-size:10px}
.hybrid-v12 .press-hud i{width:7px;height:7px;border-radius:50%;background:#59d986;box-shadow:0 0 0 5px rgba(89,217,134,.12);animation:hy-live 1.8s ease-in-out infinite}
@keyframes hy-live{50%{box-shadow:0 0 0 9px rgba(89,217,134,0)}}
.hybrid-v12 .press-plates{z-index:2;aspect-ratio:1000/710}
.hybrid-v12 .press-cap{position:relative;z-index:3;margin-top:4px;color:#c5bfd7}
.hybrid-v12 .g1-tangle path{stroke:#766d93}
.hybrid-v12 .g1-face{box-shadow:0 17px 34px -15px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.12)}

/* problem evidence: the current scenes become a clean editorial evidence wall */
.hybrid-v12 .problems{padding-top:112px;background:var(--hy-lilac)}
.hybrid-v12 .problems .sec-note{max-width:620px}
.hybrid-v12 .story{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:44px;padding-bottom:112px}
.hybrid-v12 .stc{border:1px solid rgba(24,20,48,.1);border-radius:18px;padding:24px 22px 26px;box-shadow:0 22px 42px -36px rgba(24,20,48,.55);transform:none}
.hybrid-v12 .stc:hover{transform:translateY(-5px);box-shadow:0 30px 48px -34px rgba(24,20,48,.58)}
.hybrid-v12 .stc:nth-child(1),.hybrid-v12 .stc:nth-child(6){border-top:4px solid var(--gold)}
.hybrid-v12 .stc:nth-child(2),.hybrid-v12 .stc:nth-child(5){border-top:4px solid var(--sf)}
.hybrid-v12 .stc:nth-child(3),.hybrid-v12 .stc:nth-child(4){border-top:4px solid var(--hy-ink)}
.hybrid-v12 .stc h3{font-size:clamp(18px,1.7vw,22px)}

/* diagnosis strip: five concrete reasons from the reference, expressed as
   authored little mechanisms instead of generic icon cards */
.hybrid-v12 .why{padding-top:112px;background:#fff}
.diagnosis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:1336px;margin:42px auto 0;padding:0 var(--px)}
.dx{position:relative;min-height:230px;padding:18px 18px 22px;border:1px solid var(--hy-line);border-radius:16px;background:#f8f7fb;overflow:hidden}
.dx:nth-child(4){background:var(--hy-ink);color:#fff;border-color:var(--hy-ink)}
.dx:nth-child(5){background:var(--hy-lilac)}
.dx-num{font:600 11px 'IBM Plex Mono',Almarai,sans-serif;color:#aaa4bc}
.dx h3{margin:22px 0 0;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(16px,1.45vw,19px);line-height:1.55;font-weight:900}
.dx:nth-child(4) h3{color:#fff}
.dx p{margin:9px 0 0;color:#706a80;font-size:12.5px;line-height:1.75}
.dx:nth-child(4) p{color:#afa9c1}
.dx-glyph{position:relative;display:block;width:76px;height:64px;margin-top:24px;color:var(--sf)}
.dx-glyph i{position:absolute;display:block}
.dx-glyph--track{border-bottom:2px dashed #c9c3d9}
.dx-glyph--track i{bottom:-6px;width:12px;height:12px;border:3px solid currentColor;border-radius:50%;background:#fff}
.dx-glyph--track i:nth-child(1){right:3px}.dx-glyph--track i:nth-child(2){right:31px;opacity:.55}.dx-glyph--track i:nth-child(3){right:61px;opacity:.2}
.dx-glyph--pixel i{width:21px;height:21px;border:2px solid currentColor;background:#fff}
.dx-glyph--pixel i:nth-child(1){right:0;top:0}.dx-glyph--pixel i:nth-child(2){right:25px;top:0}.dx-glyph--pixel i:nth-child(3){right:0;top:25px}.dx-glyph--pixel i:nth-child(4){right:25px;top:25px;border-style:dashed;opacity:.35}
.dx-glyph--duplicate i{width:47px;height:47px;border:2px solid currentColor;border-radius:10px;background:#fff}
.dx-glyph--duplicate i:nth-child(1){right:0;top:0}.dx-glyph--duplicate i:nth-child(2){right:19px;top:15px;background:rgba(118,79,246,.12)}
.dx-glyph--routes{color:var(--gold-hi)}
.dx-glyph--routes::before,.dx-glyph--routes::after{content:"";position:absolute;right:8px;width:58px;height:25px;border:2px solid currentColor;border-right:0;border-radius:18px 0 0 18px}
.dx-glyph--routes::before{top:3px}.dx-glyph--routes::after{top:33px;transform:scaleX(.75);transform-origin:right}
.dx-glyph--routes i{right:0;width:11px;height:11px;border-radius:50%;background:currentColor}.dx-glyph--routes i:nth-child(1){top:0}.dx-glyph--routes i:nth-child(2){top:25px}.dx-glyph--routes i:nth-child(3){top:54px}
.dx-glyph--scatter i{width:25px;height:25px;border-radius:50%;background:currentColor}
.dx-glyph--scatter i:nth-child(1){right:2px;top:3px}.dx-glyph--scatter i:nth-child(2){right:39px;top:15px;opacity:.55}.dx-glyph--scatter i:nth-child(3){right:13px;top:39px;width:18px;height:18px;opacity:.25}
.hybrid-v12 .pile{max-width:1336px;height:640px;margin-top:18px;margin-inline:auto;border-radius:24px;border:1px solid rgba(24,20,48,.08)}
.hybrid-v12 .pcap{margin-bottom:104px}

/* solution: a dark analytical chamber with a five-stage rail, followed by the
   retained high-impact formation and its four connected outcomes */
.hybrid-v12 .solution{padding-top:0;background:#fff}
.hybrid-v12 .solution-panel{margin-inline:0;border-radius:0;padding:106px max(var(--pin),calc((100% - 1336px)/2 + 52px)) 104px;background-color:var(--hy-ink);background-image:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
  radial-gradient(circle at 50% 46%,rgba(118,79,246,.32),transparent 38%);
  background-size:48px 48px,48px 48px,auto}
.hybrid-v12 .solution-panel .sec-head{position:relative;z-index:4}
.hybrid-v12 .solution-panel .sec-head h2{max-width:19ch;margin-inline:auto;font-size:clamp(34px,5.2vw,66px)}
.hybrid-v12 .solution-panel .sec-head .sec-note{color:#b9b2ca}
.solution-kicker{display:inline-flex;margin-bottom:15px;padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(118,79,246,.2);color:#d8ccff;font:800 11px Almarai,sans-serif}
.method-rail{position:relative;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-width:1230px;margin:50px auto 8px}
.method-rail::before{content:"";position:absolute;right:6%;left:6%;top:38px;height:1px;background:linear-gradient(90deg,rgba(248,226,147,.2),rgba(118,79,246,.75),rgba(248,226,147,.2))}
.method-step{position:relative;min-height:244px;padding:18px 17px 20px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(255,255,255,.06);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.method-step::before{content:"";position:absolute;right:50%;top:34px;width:13px;height:13px;border:3px solid var(--hy-ink);border-radius:50%;background:var(--sf);transform:translate(50%,-50%);box-shadow:0 0 0 4px rgba(118,79,246,.18)}
.method-num{display:block;font:600 10px 'IBM Plex Mono',monospace;color:#8f88a7}
.method-step svg{display:block;width:44px;height:44px;margin:42px 0 18px;fill:none;stroke:#bfaeff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.method-step h3{margin:0;color:#fff;font-family:'Noto Kufi Arabic',sans-serif;font-size:17px;line-height:1.55;font-weight:900}
.method-step p{margin:8px 0 0;color:#aaa3bd;font-size:12px;line-height:1.8}
.method-step--decision{border-color:rgba(248,226,147,.42);background:rgba(217,172,66,.12)}
.method-step--decision::before{background:var(--gold-hi);box-shadow:0 0 0 4px rgba(248,226,147,.12),0 0 22px rgba(248,226,147,.38)}
.method-step--decision svg{stroke:var(--gold-hi)}
.hybrid-v12 .snap-stage{margin-top:30px}
.hybrid-v12 .outcomes{margin-top:44px}
.hybrid-v12 .outcomes li{border:1px solid rgba(255,255,255,.15);border-radius:20px}
.hybrid-v12 .outcomes .oc-ink{background:#fff;color:var(--hy-ink)}
.hybrid-v12 .outcomes .oc-purple{background:var(--sf)}
.hybrid-v12 .outcomes .oc-light{background:#f4f1fc}
.hybrid-v12 .outcome-link-track{stroke:rgba(255,255,255,.48);stroke-width:1.9}

/* full picture: preserve the truthful before/after instruments, but present
   them as one measured campaign dossier rather than six disconnected rows */
.hybrid-v12 .compare{padding-top:112px;background:var(--hy-paper)}
.hybrid-v12 .compare .sec-head h2{max-width:20ch;margin-inline:auto}
.hybrid-v12 .cr-list{max-width:1210px;margin-inline:auto;padding-top:50px;padding-bottom:112px;gap:10px}
.hybrid-v12 .cr{grid-template-columns:1fr 64px 1fr;border-color:var(--hy-line);border-radius:16px;background:#fff;box-shadow:0 14px 30px -28px rgba(24,20,48,.44)}
.hybrid-v12 .cr-cell.before{background:#f4f2f7}
.hybrid-v12 .cr-cell.after{background:#fff;color:var(--hy-ink)}
.hybrid-v12 .after .cr-txt i{color:#716a83}
.hybrid-v12 .after .cr-txt b{color:var(--hy-ink)}
.hybrid-v12 .cr-mid{background:var(--sf)}
.hybrid-v12 .cr-mid span{color:#dcd2ff}

/* service: audience-specific value from the reference, followed by the
   retained managed-service process so the page never implies self-service. */
.hybrid-v12 .service{padding-top:0;background:var(--hy-paper)}
.hybrid-v12 .service-panel{margin-inline:0;border-radius:0;padding:104px max(var(--pin),calc((100% - 1336px)/2 + 52px));background:var(--sf)}
.hybrid-v12 .service-panel .solution-kicker{background:rgba(24,20,48,.18);color:#fff}
.audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1160px;margin:48px auto 0}
.audience-card{min-height:220px;padding:26px 24px;border:1px solid rgba(255,255,255,.35);border-radius:18px;background:rgba(255,255,255,.12);color:#fff}
.audience-card>span{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(24,20,48,.18);font:800 10.5px Almarai,sans-serif}
.audience-card h3{margin:34px 0 0;color:#fff;font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(21px,2.1vw,27px);line-height:1.5;font-weight:900}
.audience-card p{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:13px;line-height:1.8}
.audience-card--marketing{background:#fff;color:var(--hy-ink)}
.audience-card--marketing>span{background:var(--hy-lilac);color:var(--sf)}
.audience-card--marketing h3{color:var(--hy-ink)}
.audience-card--marketing p{color:#6e687f}
.audience-card--growth{border-color:rgba(248,226,147,.5);background:var(--hy-ink)}
.hybrid-v12 .steps{max-width:1160px;margin:18px auto 0}
.hybrid-v12 .step{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(24,20,48,.76)}
.hybrid-v12 .step-arw path{stroke:rgba(255,255,255,.42)}
.hybrid-v12 .faq{padding-block:112px;background:#fff}
.hybrid-v12 .fq{border:1px solid var(--hy-line);border-radius:14px;background:#f7f6fa}
.hybrid-v12 .pledge{background:var(--hy-paper)}
.hybrid-v12 .final{padding-bottom:0;background:var(--hy-paper)}
.hybrid-v12 .final-panel{margin-inline:0;border-radius:0;padding-block:94px;background:var(--hy-ink)}

@media (max-width:1100px){
  .hybrid-v12 .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:56px}
  .hybrid-v12 .hero-copy{margin-inline:auto;text-align:center}
  .hybrid-v12 .hero-sub{margin-inline:auto}
  .hybrid-v12 .hero-proof,.hybrid-v12 .hero-trust{justify-content:center}
  .hybrid-v12 .hero-press{width:min(82vw,610px)}
  .diagnosis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dx:nth-child(4),.dx:nth-child(5){grid-column:span 1}
  .method-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method-rail::before{display:none}
  .method-step::before{right:24px;top:27px}
  .method-step--decision{grid-column:1/-1;min-height:200px}
  .method-step svg{margin-top:28px}
}

@media (max-width:800px){
  .hybrid-v12 .story{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagnosis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagnosis .dx:last-child{grid-column:1/-1;min-height:190px}
  .hybrid-v12 .solution-panel,.hybrid-v12 .service-panel{padding-inline:30px}
  .audiences{grid-template-columns:1fr}
  .audience-card{min-height:190px}
  .hybrid-v12 .cr{grid-template-columns:1fr}
  .hybrid-v12 .cr-mid{padding-block:9px}
}

@media (max-width:560px){
  .hybrid-v12 .nav{padding-inline:16px}
  .hybrid-v12 .hero-inner{padding:42px 20px 78px}
  .hybrid-v12 .hero h1{font-size:clamp(40px,13vw,54px)}
  .hybrid-v12 .hero-sub{font-size:15px;line-height:1.9}
  .hybrid-v12 .hero-proof{justify-content:center}
  .hybrid-v12 .hero-press{width:100%;padding:15px 14px 17px;border-radius:24px;transform:none}
  .hybrid-v12 .hero-press::after{inset:8px;border-radius:18px}
  .hybrid-v12 .press-hud{padding-inline:4px}
  .hybrid-v12 .story{grid-template-columns:1fr;padding-inline:16px}
  .diagnosis{grid-template-columns:1fr;padding-inline:16px}
  .diagnosis .dx:last-child{grid-column:auto}
  .dx{min-height:190px}
  .hybrid-v12 .pile{margin-inline:16px;border-radius:18px}
  .hybrid-v12 .pcap{margin-inline:16px}
  .hybrid-v12 .solution-panel,.hybrid-v12 .service-panel{padding:78px 20px}
  .method-rail{grid-template-columns:1fr;margin-top:38px}
  .method-step,.method-step--decision{grid-column:auto;min-height:190px;padding:18px 20px}
  .method-step svg{margin-top:24px}
  .hybrid-v12 .outcomes{margin-top:34px}
  .hybrid-v12 .cr-list{padding-inline:16px}
  .hybrid-v12 .faq-list{padding-inline:16px}
  .hybrid-v12 .fq{padding:20px}
}

@media (max-width:380px){
  .hybrid-v12 .nav{gap:12px}
  .hybrid-v12 .nav-brand{flex:0 0 auto}
  .hybrid-v12 .nav-brand img{width:96px;height:auto}
  .hybrid-v12 .nav-cta{flex:0 0 auto;padding-inline:15px;font-size:13.5px;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .hybrid-v12 .press-hud i{animation:none !important}
}

/* ---------- v13 · legacy layout scaffold ----------
   Kept only for neutral formation/layout properties that v14 safely inherits.
   The v13 body class is inactive and no proposal screenshot is rendered. */
body.sfere-ecommerce-ar.pdf-fusion-v13{
  --rf-paper:#fbfaff;
  --rf-lilac:#f5f2ff;
  --rf-line:#e3ddf8;
  --rf-ink:#17132e;
  --rf-purple:#6743ef;
  background:#f3f0fb;
}

/* Five real proposal panels, retained at a readable editorial scale. */
.pdf-fusion-v13 .solution{
  padding-top:0;
  background:var(--rf-paper);
}
.pdf-fusion-v13 .solution-panel{
  margin:0;
  padding:112px max(var(--pin),calc((100% - 1336px)/2 + 52px)) 106px;
  border-radius:0;
  overflow:visible;
  color:var(--rf-ink);
  background:
    radial-gradient(circle at 8% 8%,rgba(118,79,246,.09),transparent 25%),
    radial-gradient(circle at 92% 28%,rgba(214,199,252,.24),transparent 22%),
    var(--rf-paper);
}
.pdf-fusion-v13 .solution-panel>.sec-head{
  color:var(--rf-ink);
}
.pdf-fusion-v13 .solution-panel>.sec-head h2{
  color:var(--rf-ink);
}
.pdf-fusion-v13 .solution-panel>.sec-head .sec-note{
  color:#655e7d;
}
.pdf-fusion-v13 .solution-kicker{
  border-color:#ded6ff;
  background:#eee9ff;
  color:var(--rf-purple);
}
.reference-method{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:15px;
  width:min(100%,1000px);
  margin:58px auto 0;
}
.reference-method figure{
  margin:0;
  border:1px solid var(--rf-line);
  border-radius:25px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 48px -38px rgba(32,23,79,.48);
}
.reference-method img{
  width:100%;
  height:auto;
}

/* The original animation is preserved as the one high-contrast reveal. */
.formation-chamber{
  position:relative;
  z-index:3;
  isolation:isolate;
  width:min(100%,1280px);
  margin:82px auto 0;
  padding:62px 56px 68px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:38px;
  overflow:hidden;
  color:#fff;
  background-color:var(--rf-ink);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% 39%,rgba(118,79,246,.42),transparent 41%);
  background-size:46px 46px,46px 46px,auto;
  box-shadow:0 48px 90px -60px rgba(18,12,48,.9);
}
.formation-head{
  position:relative;
  z-index:4;
  text-align:center;
}
.formation-head span{
  display:inline-flex;
  padding:7px 12px;
  border:1px solid rgba(214,199,252,.22);
  border-radius:999px;
  background:rgba(118,79,246,.2);
  color:#d9d0fb;
  font:800 11px Almarai,sans-serif;
}
.formation-head h3{
  max-width:18ch;
  margin:18px auto 0;
  color:#fff;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:clamp(29px,4.2vw,52px);
  line-height:1.48;
  font-weight:900;
}
.pdf-fusion-v13 .formation-chamber .snap-stage{
  margin-top:18px;
}
.pdf-fusion-v13 .formation-chamber .outcome-link-track{
  stroke:rgba(255,255,255,.54);
  stroke-width:1.9;
}
.reference-outcomes{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-top:48px;
}
.reference-outcomes li{
  min-height:0;
  padding:0;
  gap:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 46px -34px rgba(0,0,0,.76);
}
.reference-outcomes li>img:not(.oc-decision-mark):not(.oc-decision-copy){
  width:100%;
  height:auto;
}
.reference-outcomes .oc-decision{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  align-items:center;
  min-height:150px;
  padding:0;
  direction:ltr;
  background:#30208f;
}
.reference-outcomes .oc-decision-mark{
  grid-column:1;
  justify-self:center;
  width:84px;
  height:84px;
  padding:15px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 20px 32px -22px rgba(4,2,20,.8);
}
.reference-outcomes .oc-decision-copy{
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  transform:scale(1.04);
  transform-origin:right center;
}
.oc-decision-live{
  display:none;
}

/* The missing full-picture section from the proposal, now responsive and
   keyboard operable instead of being flattened into one tall screenshot. */
.pdf-fusion-v13 .compare{
  padding-top:112px;
  padding-bottom:112px;
  background:#fff;
}
.reference-picture{
  width:min(calc(100% - (2 * var(--px))),1336px);
  margin:52px auto 0;
  padding:34px 34px 28px;
  border:1px solid var(--rf-line);
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 0,rgba(118,79,246,.08),transparent 30%),
    var(--rf-paper);
  box-shadow:0 34px 72px -58px rgba(32,23,79,.62);
}
.picture-flow{
  width:min(100%,970px);
  height:auto;
  margin:0 auto 28px;
}
.picture-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  direction:ltr;
  width:min(100%,810px);
  margin:0 auto 26px;
  padding:5px;
  border:1px solid var(--rf-line);
  border-radius:16px;
  background:#fff;
}
.picture-tabs button{
  min-height:48px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#5d5675;
  font:800 13px Almarai,sans-serif;
  direction:rtl;
  cursor:pointer;
  transition:background-color .24s ease,color .24s ease,box-shadow .24s ease;
}
.picture-tabs button:hover,
.picture-tabs button:focus-visible{
  color:var(--rf-purple);
  outline:2px solid rgba(118,79,246,.35);
  outline-offset:2px;
}
.picture-tabs button.is-active{
  color:#fff;
  background:linear-gradient(135deg,#734fff,#5833dc);
  box-shadow:0 13px 24px -17px rgba(81,47,208,.85);
}
.picture-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  direction:ltr;
  align-items:start;
  gap:15px;
}
.picture-card{
  margin:0;
  border:1px solid var(--rf-line);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  opacity:.82;
  transform:translateY(3px);
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;
}
.picture-card.is-active{
  opacity:1;
  transform:none;
  box-shadow:0 26px 48px -38px rgba(56,36,142,.62);
}
.picture-card img{
  width:100%;
  height:auto;
}
.reference-disclaimer{
  margin:20px 0 0;
  color:#837c94;
  text-align:center;
  font:700 11px Almarai,sans-serif;
}
.pdf-fusion-v13 .cr-list{
  display:none;
}

/* The audience visual from the proposal is used directly, then the existing
   managed-service steps explain what Sfere does around that report. */
.pdf-fusion-v13 .service{
  padding-top:0;
  background:var(--rf-lilac);
}
.pdf-fusion-v13 .service-panel{
  margin:0;
  padding:110px max(var(--pin),calc((100% - 1336px)/2 + 52px));
  border-radius:0;
  color:var(--rf-ink);
  background:
    radial-gradient(circle at 92% 8%,rgba(118,79,246,.1),transparent 26%),
    var(--rf-lilac);
}
.pdf-fusion-v13 .service-panel>.sec-head h2{
  color:var(--rf-ink);
}
.pdf-fusion-v13 .service-panel>.sec-head .sec-note{
  color:#655e7d;
}
.audience-reference{
  width:min(100%,1336px);
  margin:50px auto 0;
}
.audience-visual{
  display:grid;
  grid-template-columns:minmax(0,2.91fr) minmax(0,1fr);
  align-items:start;
  gap:18px;
  width:100%;
  direction:ltr;
}
.audience-device{
  position:relative;
  border:1px solid var(--rf-line);
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 32px 70px -52px rgba(46,29,128,.64);
}
.audience-device img{
  width:100%;
  height:auto;
}
.audience-image-cta{
  position:absolute;
  z-index:3;
  border-radius:13px;
  cursor:pointer;
}
.audience-image-cta--desktop{
  left:63.6%;
  top:88.7%;
  width:31.3%;
  height:6.7%;
}
.audience-image-cta--phone{
  left:10.2%;
  bottom:6.3%;
  width:80.5%;
  height:4.7%;
}
.audience-image-cta:focus-visible{
  outline:3px solid var(--gold-hi);
  outline-offset:4px;
}
.managed-head{
  width:min(100%,1160px);
  margin:78px auto 28px;
  text-align:center;
}
.managed-head span{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:#e9e2ff;
  color:var(--rf-purple);
  font:800 11px Almarai,sans-serif;
}
.managed-head h3{
  max-width:20ch;
  margin:16px auto 0;
  color:var(--rf-ink);
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:clamp(28px,4vw,46px);
  line-height:1.55;
  font-weight:900;
}
.pdf-fusion-v13 .steps{
  margin-top:0;
}
.pdf-fusion-v13 .step{
  border-color:rgba(255,255,255,.12);
  background:var(--rf-ink);
  box-shadow:0 24px 50px -42px rgba(23,19,46,.92);
}

@media (max-width:1000px){
  .pdf-fusion-v13 .solution-panel,
  .pdf-fusion-v13 .service-panel{
    padding-inline:32px;
  }
  .formation-chamber{
    padding-inline:30px;
  }
  .reference-outcomes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .reference-outcomes .oc-cac-source{
    grid-column:1/-1;
    width:calc(50% - 8px);
    justify-self:center;
  }
  .reference-outcomes .oc-decision{
    grid-column:1/-1;
  }
  .picture-grid{
    grid-template-columns:minmax(0,560px);
    justify-content:center;
  }
  .picture-card{
    display:none;
  }
  .picture-card.is-active{
    display:block;
  }
}

@media (max-width:640px){
  .pdf-fusion-v13 .solution-panel,
  .pdf-fusion-v13 .service-panel{
    padding:78px 16px;
  }
  .reference-method{
    gap:10px;
    margin-top:38px;
  }
  .reference-method figure{
    border-radius:15px;
  }
  .formation-chamber{
    width:100%;
    margin-top:52px;
    padding:42px 14px 36px;
    border-radius:25px;
  }
  .formation-head h3{
    font-size:clamp(27px,9vw,38px);
  }
  .pdf-fusion-v13 .formation-chamber .snap-stage{
    margin-top:8px;
  }
  .pdf-fusion-v13 .formation-chamber .snap-word{
    top:38%;
  }
  .reference-outcomes{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:34px;
  }
  .reference-outcomes .oc-cac-source,
  .reference-outcomes .oc-decision{
    grid-column:auto;
    width:100%;
  }
  .reference-outcomes .oc-decision{
    display:block;
    min-height:132px;
    direction:rtl;
  }
  .reference-outcomes .oc-decision-mark{
    position:absolute;
    left:14px;
    top:50%;
    width:54px;
    height:54px;
    padding:10px;
    border-radius:16px;
    transform:translateY(-50%);
  }
  .reference-outcomes .oc-decision-copy{
    display:none !important;
  }
  .reference-outcomes .oc-decision-live{
    display:block;
    box-sizing:border-box;
    min-height:132px;
    margin:0;
    padding:20px 18px 20px 88px;
    color:#fff;
    direction:rtl;
    text-align:right;
    font:800 15.5px/1.65 Almarai,sans-serif;
  }
  .reference-outcomes .oc-decision-live strong{
    display:block;
    color:#b9a3ff;
    font-weight:900;
  }
  .pdf-fusion-v13 .compare{
    padding-block:78px;
  }
  .reference-picture{
    width:calc(100% - 24px);
    margin-top:38px;
    padding:18px 12px 18px;
    border-radius:22px;
  }
  .picture-flow{
    margin-bottom:18px;
  }
  .picture-tabs{
    gap:3px;
    margin-bottom:18px;
    border-radius:13px;
  }
  .picture-tabs button{
    min-height:43px;
    padding-inline:5px;
    font-size:11px;
    line-height:1.45;
  }
  .picture-card{
    border-radius:16px;
  }
  .audience-reference{
    margin-top:38px;
  }
  .audience-visual{
    display:block;
    width:min(100%,384px);
    margin-inline:auto;
  }
  .audience-device--desktop{
    display:none;
  }
  .audience-device--phone{
    border-radius:24px;
  }
  .audience-image-cta--phone{
    border-radius:12px;
  }
  .managed-head{
    margin-top:58px;
  }
  .managed-head h3{
    font-size:clamp(27px,8vw,37px);
  }
}

@media (prefers-reduced-motion:reduce){
  .pdf-fusion-v13 .picture-tabs button,
  .pdf-fusion-v13 .picture-card{
    transition:none !important;
  }
}

/* ---------- v14 · coded solution ----------
   The proposal is a reference for information architecture only. Every visible
   step, report, outcome and audience view below is native HTML/CSS/JS. Brand
   marks remain real assets, and the current Sfere dot mark replaces the old S. */
body.sfere-ecommerce-ar.coded-solution-v14{
  --cs-paper:#f7f5fb;
  --cs-surface:#fff;
  --cs-ink:#17132e;
  --cs-muted:#6f6880;
  --cs-line:#ddd8e8;
  --cs-soft:#eeeaf8;
  --cs-purple:#764ff6;
  --cs-green:#168a62;
  --cs-amber:#a86c00;
  --cs-red:#b94545;
  background:#efedf4;
}

/* Five-step method */
.coded-solution-v14 .solution{
  padding:0;
  background:var(--cs-paper);
}
.coded-solution-v14 .solution-panel{
  margin:0;
  padding:108px max(36px,calc((100% - 1336px)/2 + 52px)) 104px;
  border-radius:0;
  overflow:hidden;
  color:var(--cs-ink);
  background:var(--cs-paper);
}
.coded-solution-v14 .solution-panel>.sec-head{
  position:relative;
  z-index:4;
}
.coded-solution-v14 .solution-panel>.sec-head h2{
  max-width:19ch;
  margin-inline:auto;
  color:var(--cs-ink);
  font-size:clamp(34px,5.2vw,66px);
}
.coded-solution-v14 .solution-panel>.sec-head .sec-note{
  color:var(--cs-muted);
}
.coded-solution-v14 .solution-kicker{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--cs-purple);
  font-size:12px;
  letter-spacing:.01em;
}
.method-sequence{
  position:relative;
  z-index:4;
  display:grid;
  gap:16px;
  width:min(100%,1230px);
  margin:58px auto 0;
  padding:0;
  list-style:none;
  counter-reset:method;
}
.method-sequence::before{
  content:"";
  position:absolute;
  top:34px;
  right:27px;
  bottom:34px;
  width:2px;
  background:#c8c0df;
}
.method-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,.86fr) minmax(460px,1.25fr);
  align-items:center;
  gap:42px;
  min-height:260px;
  padding:26px 84px 26px 28px;
  border:1px solid var(--cs-line);
  border-radius:24px;
  background:var(--cs-surface);
  box-shadow:0 24px 58px -52px rgba(24,20,48,.55);
}
.method-row::after{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:16px;
  height:16px;
  border:5px solid var(--cs-paper);
  border-radius:50%;
  background:var(--cs-purple);
  transform:translateY(-50%);
  box-shadow:0 0 0 1px #b7abd8;
}
.method-row--decision{
  border-color:#cfb86e;
  background:#fffdf6;
}
.method-row.is-current{
  border-color:#b8a9ed;
  box-shadow:0 28px 64px -50px rgba(85,58,180,.55);
}
.method-row--decision.is-current{border-color:#c69a2d}
.method-row--decision::after{
  background:#d9ac42;
}
.method-copy{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:16px;
}
.method-index{
  position:absolute;
  right:-4px;
  top:50%;
  z-index:2;
  display:grid;
  width:64px;
  height:42px;
  place-items:center;
  border:1px solid var(--cs-purple);
  border-radius:12px 0 0 12px;
  color:#fff;
  background:var(--cs-purple);
  transform:translateY(-50%);
  font:600 12px 'IBM Plex Mono',monospace;
}
.method-row--decision .method-index{
  border-color:#d9ac42;
  color:var(--cs-ink);
  background:#f8e293;
}
.method-icon{
  grid-row:1/3;
  display:block;
  width:50px;
  height:50px;
  color:var(--cs-purple);
}
.method-row--decision .method-icon{color:#9a6d00}
.method-icon-svg{width:50px;height:50px}
.method-copy h3{
  margin:0;
  color:var(--cs-ink);
  font:900 clamp(23px,2.2vw,31px)/1.48 'Noto Kufi Arabic',sans-serif;
}
.method-copy p{
  margin:9px 0 0;
  color:var(--cs-muted);
  font-size:14px;
  line-height:1.9;
}
.method-demo{
  min-width:0;
  padding:22px;
  border:1px solid #e6e2ed;
  border-radius:18px;
  background:#fbfaff;
}

/* Step 1: actual platform marks flow into the current Sfere mark. */
.method-demo--sources{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(160px,.55fr);
  align-items:center;
  gap:14px;
}
.source-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.source-logo,.source-more{
  display:flex;
  min-width:0;
  min-height:84px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  border:1px solid #e1ddea;
  border-radius:14px;
  background:#fff;
  color:#595269;
  font:700 10px/1.2 Almarai,sans-serif;
  text-align:center;
}
.source-logo img{width:34px;height:34px;object-fit:contain}
.source-more{border-style:dashed;color:var(--cs-purple)}
.source-merge{
  position:relative;
  height:2px;
  background:#bdb1df;
}
.source-merge::before,.source-merge::after{
  content:"";
  position:absolute;
  top:50%;
  border-radius:50%;
  transform:translateY(-50%);
}
.source-merge::before{right:-1px;width:8px;height:8px;background:var(--cs-purple)}
.source-merge::after{left:-1px;width:10px;height:10px;border:2px solid var(--cs-purple);background:#fff}
.sfere-receiver{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--cs-muted);
  font-size:12px;
  line-height:1.7;
}
.sfere-receiver img{width:78px;height:72px;object-fit:contain;flex:none}
.sfere-receiver strong{color:var(--cs-ink);font-weight:800}

/* Step 2 */
.audit-head,.decision-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  padding-bottom:12px;
  border-bottom:1px solid #e7e3ed;
}
.audit-head span,.decision-head span{font-weight:800;color:var(--cs-ink)}
.audit-head b,.decision-head b{color:#8a8298;font:600 10px 'IBM Plex Mono',monospace}
.audit-results{display:grid;gap:0;margin:0;padding:0;list-style:none}
.audit-results li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:42px;
  border-bottom:1px solid #eeeaf2;
  color:#50495f;
  font-size:12px;
}
.audit-results li:last-child{border-bottom:0}
.audit-results strong{display:flex;align-items:center;gap:6px;font-size:11px}
.audit-status-icon{width:16px;height:16px}
.audit-pass{color:var(--cs-green)}
.audit-review{color:var(--cs-red)}
.audit-warning{color:var(--cs-amber)}

/* Step 3 */
.sales-pair{
  display:grid;
  grid-template-columns:1fr 50px 1fr;
  align-items:center;
  gap:12px;
}
.signal-card{
  min-width:0;
  padding:18px;
  border:1px solid #ded9e9;
  border-radius:16px;
  background:#fff;
  text-align:center;
}
.signal-card span{display:block;color:#6f6880;font-size:11px}
.signal-card strong{display:block;margin-top:6px;color:var(--cs-ink);font:800 30px/1 'IBM Plex Mono',monospace}
.signal-card small{display:block;margin-top:8px;color:#8a8298;font-size:10px}
.signal-card--store{border-color:#c8bcf2;background:#f4f0ff}
.pair-link{display:grid;width:44px;height:44px;place-items:center;color:var(--cs-purple)}
.pair-link-svg{width:30px;height:30px}
.match-note{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px solid #e5e1eb;
  color:#746d81;
  font-size:11px;
  text-align:center;
}
.match-note strong{color:var(--cs-purple);font-family:'IBM Plex Mono',monospace;font-size:14px}

/* Step 4 */
.method-demo--performance{padding:16px 18px}
.performance-head,.performance-row{
  display:grid;
  grid-template-columns:minmax(140px,1.2fr) 70px 82px;
  align-items:center;
  gap:12px;
}
.performance-head{
  min-height:34px;
  padding-inline:8px;
  color:#8c8499;
  font-size:9px;
}
.performance-row{
  min-height:43px;
  padding-inline:8px;
  border-top:1px solid #ece8f0;
  color:#5e576b;
  font-size:11px;
}
.performance-row>span:first-child{display:flex;align-items:center;gap:9px;direction:ltr;justify-self:end}
.performance-row img{width:24px;height:24px;object-fit:contain}
.performance-row strong{color:var(--cs-ink);font:600 12px 'IBM Plex Mono',monospace}
.performance-row>b{justify-self:start;font-size:10px}
.performance-good{color:var(--cs-green)}
.performance-mid{color:var(--cs-amber)}
.performance-low{color:var(--cs-red)}
.illustrative-note{display:block;margin-top:10px;color:#9991a6;font-size:9px;text-align:left}

/* Step 5 */
.method-demo--decision{background:#fffdf7;border-color:#e5d6a7}
.decision-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.decision-action{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:13px;
  border:1px solid #e7dfca;
  border-radius:14px;
  background:#fff;
}
.decision-action>span{display:grid;width:34px;height:34px;place-items:center;color:var(--cs-purple)}
.decision-action-icon{width:25px;height:25px}
.decision-action div{min-width:0}
.decision-action b{display:block;color:var(--cs-ink);font-size:11px}
.decision-action small{display:block;overflow:hidden;margin-top:5px;color:#81798c;font:500 9px 'IBM Plex Mono',monospace;text-overflow:ellipsis;white-space:nowrap}
.decision-action--grow>span{color:var(--cs-green)}
.decision-action--improve>span{color:var(--cs-amber)}
.decision-action--review>span{color:var(--cs-red)}

/* The existing scatter-to-Sfere animation remains the visual climax. */
.coded-solution-v14 .formation-chamber{
  position:relative;
  z-index:3;
  width:min(100%,1230px);
  margin:84px auto 0;
  padding:58px 42px 44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:32px;
  overflow:hidden;
  color:#fff;
  background:#17132e;
  box-shadow:0 40px 88px -68px rgba(24,20,48,.9);
}
.coded-solution-v14 .formation-head{text-align:center}
.coded-solution-v14 .formation-head>span{color:#b9a9ef;font-size:12px;font-weight:800}
.coded-solution-v14 .formation-head h3{
  margin:12px 0 0;
  color:#fff;
  font:900 clamp(28px,4vw,47px)/1.48 'Noto Kufi Arabic',sans-serif;
}
.coded-solution-v14 .formation-chamber .snap-stage{
  width:100%;
  margin:28px auto 0;
}
.coded-solution-v14 .outcome-links{inset:0;z-index:1}
.coded-solution-v14 .outcome-link-track{stroke:rgba(255,255,255,.42);stroke-width:1.8}
.coded-solution-v14 .outcome-link-energy{stroke:#f8e293}

/* Three outcomes: one icon and one clear business result each. */
.coded-outcomes{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:38px 0 0;
  padding:0;
  list-style:none;
}
.coded-outcomes .outcome-card{
  display:block;
  min-width:0;
  min-height:0;
  padding:0;
  border:1px solid #dcd7e6;
  border-radius:20px;
  overflow:hidden;
  gap:0;
  color:var(--cs-ink);
  background:#fff;
  text-align:right;
  box-shadow:none;
}
.js .coded-outcomes>*{opacity:1;transform:none}
.coded-outcomes .outcome-card::before{display:none}
.coded-outcomes .outcome-card--decision{
  grid-column:1/-1;
  border-color:rgba(248,226,147,.5);
  color:#fff;
  background:#251d4a;
}
.outcome-summary{
  display:grid;
  grid-template-columns:54px 1fr;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:136px;
  padding:22px;
  color:inherit;
  background:transparent;
  text-align:right;
}
.outcome-icon{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  color:var(--cs-purple);
}
.outcome-card--sales .outcome-icon{color:#a66b00}
.outcome-card--cac .outcome-icon{color:var(--cs-green)}
.outcome-icon-svg{width:48px;height:48px}
.outcome-title strong{
  display:block;
  color:inherit;
  font:900 clamp(19px,2vw,25px)/1.5 'Noto Kufi Arabic',sans-serif;
}
.outcome-title small{display:block;margin-top:8px;color:#6e667c;font-size:12px;line-height:1.75}
.outcome-card--decision .outcome-title small{color:#c8bfdd}
.outcome-control{display:grid;width:24px;height:24px;place-items:center;color:#9188a0;transition:transform .2s ease}
.outcome-control-svg{width:18px;height:18px}
.outcome-toggle[aria-expanded="true"] .outcome-control{transform:rotate(180deg)}
.outcome-detail{
  padding:0 22px 22px;
  border-top:1px solid #ece8f1;
}
.outcome-toggle[aria-expanded="false"] + .outcome-detail{display:none}
.outcome-detail ul{display:grid;gap:8px;margin:16px 0 0;padding:0 18px 0 0;color:#5f586b;font-size:11.5px;line-height:1.7}
.coded-outcomes .outcome-detail li{
  display:list-item;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
  text-align:right;
}
.coded-outcomes .outcome-detail li::before{display:none}
.outcome-detail li::marker{color:var(--cs-purple)}
.outcome-sfere-mark{width:58px;height:54px;object-fit:contain}
.outcome-card--decision .outcome-detail{border-color:rgba(255,255,255,.15)}
.outcome-detail--actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:0;background:rgba(255,255,255,.12)}
.outcome-detail--actions span{padding:16px 12px;color:#fff;background:#251d4a;font-size:12px;font-weight:800;text-align:center}

/* Full picture: coded monthly report */
.coded-solution-v14 .compare{
  padding:112px max(24px,calc((100% - 1336px)/2 + 52px));
  background:#fff;
}
.coded-solution-v14 .compare .sec-head h2{max-width:20ch;margin-inline:auto}
.coded-picture{
  width:min(100%,1210px);
  margin:54px auto 0;
  padding:24px;
  border:1px solid var(--cs-line);
  border-radius:28px;
  background:var(--cs-paper);
  box-shadow:0 36px 70px -62px rgba(24,20,48,.55);
}
.picture-journey{
  display:grid;
  grid-template-columns:1fr 54px 1fr 54px 1fr;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid #ded9e8;
  border-radius:18px;
  background:#fff;
}
.journey-node{display:grid;grid-template-columns:46px 1fr;column-gap:12px;align-items:center;min-width:0}
.journey-node>span{grid-row:1/3;display:grid;width:46px;height:46px;place-items:center;color:var(--cs-purple)}
.journey-icon{width:34px;height:34px}
.journey-node strong{color:var(--cs-ink);font-size:14px}
.journey-node small{margin-top:3px;color:#81798d;font-size:10px}
.journey-arrow{display:grid;place-items:center;color:#b4a8da;transform:rotate(180deg)}
.journey-arrow-svg{width:28px;height:28px}
.coded-solution-v14 .picture-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:18px 0 0;
  padding:0;
  border:1px solid #dcd6e8;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.coded-solution-v14 .picture-tabs button{
  min-height:58px;
  padding:12px;
  border:0;
  border-left:1px solid #e4e0ea;
  border-radius:0;
  color:#716a7e;
  background:#fff;
  font:800 12px Almarai,sans-serif;
  cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.coded-solution-v14 .picture-tabs button:last-child{border-left:0}
.coded-solution-v14 .picture-tabs button.is-active{color:#fff;background:var(--cs-purple)}
.coded-solution-v14 .picture-grid{display:block;margin-top:18px;direction:rtl}
.coded-solution-v14 .picture-card{
  display:none;
  min-height:560px;
  padding:30px;
  border:1px solid #dfdae8;
  border-radius:20px;
  background:#fff;
  box-shadow:none;
}
.coded-solution-v14 .picture-card.is-active{display:block;animation:report-panel-in .36s var(--ez) both}
@keyframes report-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.report-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid #e9e5ed}
.report-heading>div{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center}
.report-heading>div>span{grid-row:1/3;display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:#fff;background:var(--cs-purple);font:600 11px 'IBM Plex Mono',monospace}
.report-heading h3{margin:0;color:var(--cs-ink);font:900 25px/1.5 'Noto Kufi Arabic',sans-serif}
.report-heading p{margin:5px 0 0;color:#746d80;font-size:12px;line-height:1.7}
.report-heading>small{color:#938ba0;font-size:9px;white-space:nowrap}
.report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.report-metrics>div{min-width:0;padding:17px;border:1px solid #e4e0e9;border-radius:14px;background:#faf9fc}
.report-metrics span{display:block;color:#766f82;font-size:10px}
.report-metrics strong{display:block;overflow:hidden;margin-top:8px;color:var(--cs-ink);font:700 clamp(17px,2vw,25px)/1 'IBM Plex Mono',monospace;text-overflow:ellipsis}
.report-metrics small{display:block;margin-top:7px;color:#9991a5;font-size:9px}
.report-metrics--customers{grid-template-columns:repeat(3,minmax(0,1fr))}
.report-section{margin-top:18px;padding:20px;border:1px solid #e4e0e9;border-radius:16px;background:#fff}
.report-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.report-section-title strong{font-size:12px;color:var(--cs-ink)}
.report-section-title span{color:#9991a5;font-size:9px}
.channel-share{display:grid;gap:12px}
.channel-share>div{display:grid;grid-template-columns:150px minmax(100px,1fr) 42px;align-items:center;gap:12px}
.channel-share>div>span{display:flex;align-items:center;gap:9px;color:#554e61;font-size:10px;direction:ltr;justify-self:end}
.channel-share img{width:24px;height:24px;object-fit:contain}
.channel-share strong{color:var(--cs-ink);font:600 10px 'IBM Plex Mono',monospace}
progress{overflow:hidden;border:0;border-radius:8px;background:#ece8f2;color:var(--cs-purple)}
progress::-webkit-progress-bar{border-radius:8px;background:#ece8f2}
progress::-webkit-progress-value{border-radius:8px;background:var(--cs-purple)}
progress::-moz-progress-bar{border-radius:8px;background:var(--cs-purple)}
.channel-share progress{width:100%;height:8px}
.report-result{margin:18px 0 0;padding:17px 20px;border-right:4px solid var(--cs-purple);color:#4f485b;background:#f3f0fa;font-size:12px;font-weight:700;line-height:1.8}
.campaign-table{margin-top:20px;border:1px solid #e4e0e9;border-radius:16px;overflow:hidden}
.campaign-row{display:grid;grid-template-columns:minmax(150px,1.2fr) 1fr 1fr .65fr 76px;align-items:center;gap:12px;min-height:58px;padding:0 18px;border-top:1px solid #ece8f0;color:#5c5568;font-size:10px}
.campaign-row--head{min-height:40px;border-top:0;color:#91899d;background:#f8f7fa;font-size:9px}
.campaign-row>span:first-child{display:flex;align-items:center;gap:9px;direction:ltr;justify-self:end}
.campaign-row img{width:24px;height:24px;object-fit:contain}
.campaign-row strong{color:var(--cs-ink);font:600 11px 'IBM Plex Mono',monospace}
.campaign-row>b{font-size:10px}
.campaign-grow{color:var(--cs-green)}
.campaign-review{color:var(--cs-amber)}
.lifecycle-bars{display:grid;gap:13px}
.lifecycle-bars label{display:grid;grid-template-columns:110px minmax(120px,1fr) 54px;align-items:center;gap:12px;color:#5f586b;font-size:10px}
.lifecycle-bars progress{width:100%;height:10px}
.lifecycle-bars bdi{color:#81798d;font:500 9px 'IBM Plex Mono',monospace}
.coded-picture-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:18px 4px 2px}
.coded-picture-footer p{max-width:610px;margin:0;color:#81798d;font-size:10px;line-height:1.7}
.picture-cta{padding:14px 20px;border-radius:12px;font-size:12px;font-weight:800;white-space:nowrap}

/* Audience switcher: one coded report, three decision lenses. */
.coded-solution-v14 .service-panel{
  padding:104px max(36px,calc((100% - 1336px)/2 + 52px));
}
.coded-solution-v14 .service-panel>.sec-head .solution-kicker{color:#e6ddff}
.coded-solution-v14 .service-panel>.sec-head h2{color:#fff}
.coded-solution-v14 .service-panel>.sec-head .sec-note{color:rgba(255,255,255,.78)}
.coded-audience{width:min(100%,1210px);margin:50px auto 0;padding:18px;border:1px solid rgba(255,255,255,.35);border-radius:28px;background:#fff;color:var(--cs-ink)}
.audience-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #dcd6e8;border-radius:16px;overflow:hidden}
.audience-tabs button{display:flex;min-height:66px;align-items:center;justify-content:center;gap:10px;padding:12px;border:0;border-left:1px solid #e3dfea;color:#615a6e;background:#fff;font:800 12px Almarai,sans-serif;cursor:pointer}
.audience-tabs button:last-child{border-left:0}
.audience-tabs button.is-active{color:#fff;background:var(--cs-ink)}
.audience-tab-icon{width:24px;height:24px}
.audience-panels{margin-top:16px}
.audience-panel{display:none;grid-template-columns:minmax(280px,.78fr) minmax(500px,1.35fr);align-items:stretch;gap:18px}
.audience-panel.is-active{display:grid;animation:report-panel-in .36s var(--ez) both}
.audience-copy{padding:34px 28px;border:1px solid #ded9e7;border-radius:18px;background:#f8f6fc}
.audience-copy>span{color:var(--cs-purple);font-size:11px;font-weight:800}
.audience-copy h3{margin:17px 0 0;color:var(--cs-ink);font:900 clamp(25px,3vw,37px)/1.5 'Noto Kufi Arabic',sans-serif}
.audience-copy p{margin:14px 0 0;color:#6d6679;font-size:13px;line-height:1.9}
.audience-copy ul{display:grid;gap:12px;margin:25px 0 0;padding:0;list-style:none}
.audience-copy li{display:flex;align-items:flex-start;gap:9px;color:#50495b;font-size:11.5px;line-height:1.7}
.audience-check{width:18px;height:18px;flex:none;color:var(--cs-purple)}
.audience-board{padding:22px;border:1px solid #ded9e7;border-radius:18px;background:#fff}
.audience-board>header{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #e8e4ec}
.audience-board>header img{width:48px;height:44px;object-fit:contain}
.audience-board>header strong{display:block;color:var(--cs-ink);font-size:13px}
.audience-board>header span{display:block;margin-top:4px;color:#857d91;font-size:9px}
.audience-board>header>small{color:#948ca0;font-size:8px}
.audience-kpis,.growth-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.audience-kpis>div,.growth-summary>div{min-width:0;padding:14px;border:1px solid #e4e0e9;border-radius:12px;background:#faf9fc}
.audience-kpis span,.growth-summary span{display:block;color:#777080;font-size:9px}
.audience-kpis strong,.growth-summary strong{display:block;overflow:hidden;margin-top:7px;color:var(--cs-ink);font:700 20px/1 'IBM Plex Mono',monospace;text-overflow:ellipsis}
.audience-kpis small,.growth-summary small{display:block;margin-top:6px;color:#938b9e;font-size:8px}
.audience-decision-list{display:grid;margin-top:15px;border:1px solid #e5e1e9;border-radius:13px;overflow:hidden}
.audience-decision-list>div{display:grid;grid-template-columns:minmax(135px,1fr) 100px 86px;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-top:1px solid #ece8f0;color:#706979;font-size:9px}
.audience-decision-list>div:first-child{border-top:0}
.audience-decision-list span{display:flex;align-items:center;gap:9px;direction:ltr;justify-self:end;font-size:10px}
.audience-decision-list img{width:26px;height:26px;object-fit:contain}
.audience-decision-list strong{color:var(--cs-purple);font-size:10px}
.audience-decision-list>bdi{font:500 9px 'IBM Plex Mono',monospace}
.marketer-priority{display:grid;gap:9px;margin-top:16px}
.marketer-priority>div{display:grid;grid-template-columns:28px 34px 1fr 52px;align-items:center;gap:10px;min-height:68px;padding:12px;border:1px solid #e4e0e9;border-radius:13px;background:#faf9fc}
.marketer-priority>div>span{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;color:#fff;background:var(--cs-purple);font:600 9px 'IBM Plex Mono',monospace}
.marketer-priority img{width:30px;height:30px;object-fit:contain}
.marketer-priority div div{min-width:0}
.marketer-priority strong{display:block;overflow:hidden;color:var(--cs-ink);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.marketer-priority small{display:block;margin-top:5px;color:#867f90;font:500 8px 'IBM Plex Mono',monospace}
.marketer-priority>div>b{color:var(--cs-green);font-size:9px}
.growth-funnel{display:grid;gap:12px;margin-top:16px;padding:16px;border:1px solid #e4e0e9;border-radius:13px}
.growth-funnel label{display:grid;grid-template-columns:90px minmax(100px,1fr) 48px;align-items:center;gap:10px;color:#5f586b;font-size:9px}
.growth-funnel progress{width:100%;height:8px}
.growth-funnel bdi{color:#837b8f;font:500 8px 'IBM Plex Mono',monospace}
.audience-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:18px 6px 4px}
.audience-footer p{margin:0;color:#726b7d;font-size:11px}
.audience-cta{padding:14px 22px;border-radius:12px;color:#fff;background:var(--cs-purple);font-size:12px;font-weight:800;white-space:nowrap}

/* Role-specific service workbench. The former owner/marketer panels looked
   like a product dashboard. This is a hands-on intervention path instead:
   the visitor chooses the role, then actively steps through what Sfere does
   with that team. No sample metrics or pretend product controls. */
.audience-copy{display:flex;min-width:0;flex-direction:column}
.audience-role-line{margin-top:auto;padding-top:28px;border-top:1px solid #ded9e7}
.audience-role-line span{display:block;color:#8a8296;font-size:9px;font-weight:800}
.audience-role-line strong{display:block;margin-top:7px;color:var(--cs-ink);font-size:13px;line-height:1.75}
.service-workbench{
  --route-position:83.333%;
  --route-position-mobile:16.667%;
  min-width:0;
  padding:20px;
  overflow:hidden;
  border:1px solid #2f294f;
  border-radius:18px;
  color:#fff;
  background:var(--cs-ink);
}
.service-workbench-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.service-workbench-head span{color:#fff;font-size:12px;font-weight:800}
.service-workbench-head strong{color:#9e96b6;font-size:9px;font-weight:700}
.service-action-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:17px;border-block:1px solid rgba(255,255,255,.14)}
.service-action-rail button{
  position:relative;
  display:grid;
  min-width:0;
  min-height:76px;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:8px;
  align-content:center;
  padding:12px 14px;
  border:0;
  border-inline-start:1px solid rgba(255,255,255,.1);
  color:#b7b0c8;
  background:transparent;
  text-align:right;
  cursor:pointer;
  transition:color .24s var(--ez),background-color .24s var(--ez);
}
.service-action-rail button:first-child{border-inline-start:0}
.service-action-rail button::after{content:"";position:absolute;right:14px;left:14px;bottom:-1px;height:2px;background:#dcb04a;transform:scaleX(0);transform-origin:right center;transition:transform .34s var(--ez)}
.service-action-rail button:hover{color:#fff;background:rgba(255,255,255,.045)}
.service-action-rail button:focus-visible{outline:2px solid #dcb04a;outline-offset:-3px}
.service-action-rail button.is-active{color:#fff;background:#211b40}
.service-action-rail button.is-active::after{transform:scaleX(1)}
.service-action-rail button>span{grid-row:1/3;align-self:center;color:#77708f;font:700 9px 'IBM Plex Mono',monospace;transition:color .24s var(--ez)}
.service-action-rail button.is-active>span{color:#dcb04a}
.service-action-rail button strong{overflow:hidden;font-size:10.5px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.service-action-rail button small{overflow:hidden;margin-top:2px;color:#8f87a4;font-size:8px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.service-action-rail button.is-active small{color:#c1b9d4}
.audience-footer p{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.audience-footer p>span{color:#877f92;font-size:9px;font-weight:800}
.audience-footer p>strong{color:var(--cs-ink);font:900 clamp(17px,2vw,22px)/1.55 'Noto Kufi Arabic',sans-serif}
.audience-footer p bdi:first-of-type{color:var(--cs-green)}
.audience-footer p bdi:last-of-type{color:var(--cs-purple)}

@media (max-width:700px){
  .service-workbench{padding:14px}
  .service-workbench-head{align-items:flex-start;flex-direction:column;gap:4px}
  .service-action-rail button{min-height:82px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:0;padding:10px 6px;text-align:center}
  .service-action-rail button>span{grid-row:auto;line-height:1.3}
  .service-action-rail button strong{margin-top:5px;font-size:9.5px}
  .service-action-rail button small{margin-top:3px;font-size:7.5px;white-space:normal}
  .service-action-rail button::after{right:8px;left:8px}
  .audience-footer p{grid-template-columns:1fr;gap:5px}
}

@media (prefers-reduced-motion:reduce){
  .service-action-rail button,.service-action-rail button::after{transition:none !important}
}
.coded-solution-v14 .managed-head{max-width:800px;margin:72px auto 0;text-align:center}
.coded-solution-v14 .managed-head>span{color:#e1d7ff}
.coded-solution-v14 .managed-head h3{color:#fff}

@media (max-width:1100px){
  .method-row{grid-template-columns:1fr;gap:22px;padding-inline-start:24px}
  .method-demo--sources{grid-template-columns:minmax(0,1fr) 42px minmax(150px,.5fr)}
  .coded-solution-v14 .formation-chamber{padding-inline:28px}
  .coded-outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .coded-outcomes .outcome-card--cac{grid-column:auto}
  .coded-outcomes .outcome-card--decision{grid-column:1/-1}
  .audience-panel{grid-template-columns:1fr}
}

@media (max-width:800px){
  .coded-solution-v14 .solution-panel,.coded-solution-v14 .service-panel{padding-inline:24px}
  .method-sequence::before{right:24px}
  .method-row{padding:24px 74px 24px 20px}
  .method-index{right:-4px;width:58px}
  .method-demo--sources{grid-template-columns:1fr}
  .source-merge{width:2px;height:34px;margin:auto}
  .source-merge::before{right:50%;top:-1px;transform:translate(50%,0)}
  .source-merge::after{left:50%;top:auto;bottom:-1px;transform:translate(-50%,0)}
  .sfere-receiver{justify-content:center;text-align:right}
  .decision-actions{grid-template-columns:1fr}
  .coded-solution-v14 .formation-chamber{margin-top:64px;padding:46px 20px 28px;border-radius:24px}
  .coded-outcomes{grid-template-columns:1fr}
  .coded-outcomes .outcome-card--cac{grid-column:auto}
  .coded-outcomes .outcome-card--decision{grid-column:auto}
  .coded-solution-v14 .compare{padding-inline:18px}
  .coded-picture{padding:14px;border-radius:22px}
  .picture-journey{grid-template-columns:1fr;gap:8px}
  .journey-arrow{transform:rotate(90deg)}
  .journey-node{width:min(100%,300px);margin-inline:auto}
  .coded-solution-v14 .picture-card{min-height:0;padding:22px}
  .report-metrics{grid-template-columns:1fr 1fr}
  .report-metrics--customers{grid-template-columns:1fr 1fr}
  .report-metrics--customers>div:last-child{grid-column:1/-1}
  .channel-share>div{grid-template-columns:120px minmax(70px,1fr) 40px}
  .campaign-row{grid-template-columns:minmax(120px,1fr) .6fr 70px}
  .campaign-row>*:nth-child(2),.campaign-row>*:nth-child(3){display:none}
  .coded-picture-footer{align-items:stretch;flex-direction:column}
  .picture-cta{width:100%}
  .audience-tabs button{gap:7px;font-size:10px}
  .audience-tab-icon{width:20px;height:20px}
  .audience-panel{grid-template-columns:1fr}
  .audience-footer{align-items:stretch;flex-direction:column}
  .audience-cta{width:100%}
}

@media (max-width:560px){
  .coded-solution-v14 .solution-panel,.coded-solution-v14 .service-panel{padding:76px 16px}
  .method-sequence{margin-top:38px;gap:12px}
  .method-sequence::before{right:18px}
  .method-row{min-height:0;padding:24px 64px 18px 14px;border-radius:18px}
  .method-row::after{right:12px;width:14px;height:14px}
  .method-index{right:-4px;width:48px;height:36px;font-size:10px}
  .method-copy{grid-template-columns:38px 1fr;gap:11px}
  .method-icon,.method-icon-svg{width:38px;height:38px}
  .method-copy h3{font-size:21px}
  .method-copy p{font-size:12px}
  .method-demo{padding:14px;border-radius:14px}
  .source-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .source-logo,.source-more{min-height:72px}
  .source-logo:nth-child(4),.source-more{grid-column:span 1}
  .source-more{grid-column:span 2}
  .sales-pair{grid-template-columns:1fr;gap:8px}
  .pair-link{margin:auto;transform:rotate(90deg)}
  .performance-head,.performance-row{grid-template-columns:minmax(105px,1fr) 48px 64px;gap:7px}
  .performance-row{padding-inline:2px}
  .performance-row>span:first-child{gap:6px;font-size:9px}
  .coded-solution-v14 .formation-chamber{margin-inline:-2px;padding-inline:12px}
  .coded-solution-v14 .formation-head h3{font-size:27px}
  .coded-solution-v14 .formation-chamber .snap-stage{margin-top:18px}
  .outcome-toggle{grid-template-columns:46px 1fr 22px;min-height:120px;padding:18px;gap:10px}
  .outcome-icon{width:44px;height:44px}
  .outcome-icon-svg{width:42px;height:42px}
  .outcome-title strong{font-size:18px}
  .outcome-title small{font-size:11px}
  .outcome-detail{padding:0 18px 18px}
  .outcome-detail--actions{grid-template-columns:1fr 1fr;padding:0}
  .coded-solution-v14 .compare{padding-block:78px;padding-inline:12px}
  .coded-picture{margin-top:38px;padding:10px}
  .coded-solution-v14 .picture-tabs button{min-height:50px;padding:8px 4px;font-size:10px;line-height:1.5}
  .coded-solution-v14 .picture-card{padding:17px;border-radius:16px}
  .report-heading{gap:10px}
  .report-heading>div{grid-template-columns:36px 1fr;column-gap:9px}
  .report-heading>div>span{width:34px;height:34px;font-size:9px}
  .report-heading h3{font-size:19px}
  .report-heading p{font-size:10px}
  .report-heading>small{font-size:7px}
  .report-metrics{gap:7px}
  .report-metrics>div{padding:12px}
  .report-metrics strong{font-size:16px}
  .report-section{padding:14px}
  .channel-share>div{grid-template-columns:96px minmax(50px,1fr) 34px;gap:7px}
  .channel-share>div>span{gap:5px;font-size:8px}
  .channel-share img{width:19px;height:19px}
  .campaign-row{grid-template-columns:minmax(96px,1fr) 42px 52px;gap:6px;min-height:52px;padding-inline:8px}
  .campaign-row>span:first-child{gap:6px;font-size:8px}
  .campaign-row img{width:19px;height:19px}
  .lifecycle-bars label{grid-template-columns:80px minmax(60px,1fr) 42px;gap:7px;font-size:8px}
  .coded-audience{margin-top:38px;padding:9px;border-radius:20px}
  .audience-tabs button{min-height:58px;flex-direction:column;font-size:9px}
  .audience-panel{gap:10px}
  .audience-copy{padding:24px 18px}
  .audience-copy h3{font-size:25px}
  .audience-board{padding:14px}
  .audience-board>header{grid-template-columns:40px 1fr;gap:8px}
  .audience-board>header img{width:40px;height:37px}
  .audience-board>header>small{grid-column:2}
  .audience-kpis,.growth-summary{grid-template-columns:1fr 1fr;gap:7px}
  .audience-kpis>div:last-child,.growth-summary>div:last-child{grid-column:1/-1}
  .audience-decision-list>div{grid-template-columns:minmax(100px,1fr) 76px;gap:8px;padding-inline:8px}
  .audience-decision-list>div>bdi{display:none}
  .marketer-priority>div{grid-template-columns:22px 28px 1fr;gap:7px;padding:9px}
  .marketer-priority>div>b{grid-column:3}
  .marketer-priority img{width:26px;height:26px}
  .growth-funnel label{grid-template-columns:74px minmax(55px,1fr) 38px;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .coded-solution-v14 .picture-card.is-active,
  .coded-solution-v14 .audience-panel.is-active,
  .coded-solution-v14 .outcome-control{animation:none !important;transition:none !important}
}

/* ============================================================================
   refine-v15 — cohesion + motion pass.

   The page had grown through five stacked override layers (v10 → v14), and the
   result read as five different pages: three radius families, two tab
   components, two full-bleed purple slabs, section headers that were sometimes
   a bare numeral and sometimes a numeral plus a label, and one reveal
   animation reused for every element regardless of its size.

   This layer does not add sections. It imposes one system on what is already
   there: one radius ramp, one border and elevation ramp, one section rhythm,
   one chapter header, one tab, one dark beat, and a reveal choreography that
   moves large blocks differently from small ones.
   ========================================================================== */

body.sfere-ecommerce-ar.refine-v15{
  /* radius ramp: outer panel → card → inner block → chip */
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  /* one border and one elevation ramp for every surface on the page */
  --line:#e4e0ec;
  --line-2:#d6d0e4;
  --line-dark:rgba(255,255,255,.14);
  --sh-card:0 1px 1px rgba(24,20,48,.03),0 18px 40px -34px rgba(24,20,48,.5);
  --sh-panel:0 2px 3px rgba(24,20,48,.03),0 46px 90px -66px rgba(24,20,48,.62);
  /* section rhythm */
  --sec-pad:clamp(76px,7.2vw,116px);
  --head-gap:clamp(34px,3.6vw,52px);
  /* motion */
  --ez-out:cubic-bezier(.19,.72,.2,1);
  --ez-back:cubic-bezier(.2,1.1,.3,1);
}

/* ---------------------------------------------------------------- rhythm --
   Every section entered on its own padding value (86 / 96 / 96 / 110 / 96 /
   112 / 104). Scrolling the page felt uneven for no reason. One value now. */
.refine-v15 .problems,
.refine-v15 .why,
.refine-v15 .faq{padding-block:var(--sec-pad) 0}
.refine-v15 .faq{padding-bottom:var(--sec-pad)}
.refine-v15 .solution-panel,
.refine-v15 .service-panel{padding-block:var(--sec-pad)}
.refine-v15 .compare{padding-block:var(--sec-pad)}
.refine-v15 .pledge{padding-bottom:var(--sec-pad)}
.refine-v15 .diagnosis,
.refine-v15 .story,
.refine-v15 .faq-list,
.refine-v15 .coded-picture,
.refine-v15 .coded-audience,
.refine-v15 .method-sequence{margin-top:var(--head-gap)}

/* ------------------------------------------------------------- surfaces --
   Deliberate light/dark alternation instead of two competing purple slabs.
   #service becomes the page's single dark beat; the closing CTA keeps purple,
   so the brand colour lands once, at the moment it asks for the meeting. */
.refine-v15 .why{background:#fff}
.refine-v15 .faq{background:var(--hy-paper)}
.refine-v15 .service{background:var(--hy-paper)}
/* one flat ink surface, no accent wash bleeding out of the top edge */
.refine-v15 .service-panel{background:#1a1533;position:relative;overflow:hidden}
.refine-v15 .service-panel::before{display:none}
.refine-v15 .service-panel>*{position:relative;z-index:2}

/* --------------------------------------------------------- chapter head --
   Was: a bare numeral on six sections, numeral + label on two. Now one
   element everywhere: numeral, hairline, chapter name. No pill, no uppercase
   Latin label, and the numeral matches the index rail on the left edge. */
.refine-v15 .sec-head .sec-num{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
  color:#a49dba;
  font:500 12px 'IBM Plex Mono',Almarai,sans-serif;
  letter-spacing:.04em;
}
.refine-v15 .sec-head .sec-num::after{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.55;
}
.refine-v15 .sec-head h2{
  max-width:23ch;
  margin-inline:auto;
  font-size:clamp(30px,4.1vw,52px);
  line-height:1.34;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.refine-v15 .solution-panel>.sec-head h2,
.refine-v15 .service-panel>.sec-head h2{max-width:23ch}
.refine-v15 .sec-note{margin-top:16px;max-width:52ch;font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.85}
.refine-v15 .service-panel>.sec-head .sec-num{color:#9d93c4}
.refine-v15 .service-panel>.sec-head .sec-note{color:#b3abcb}

/* ---------------------------------------------------------------- cards --
   One radius ramp and one border/elevation ramp, applied to every panel that
   previously invented its own (28 / 24 / 20 / 18 / 16 px, four shadows). */
.refine-v15 .coded-picture,
.refine-v15 .coded-audience{
  padding:20px;
  border-radius:var(--r-xl);
  border-color:var(--line);
  box-shadow:var(--sh-panel);
}
.refine-v15 .coded-audience{border-color:rgba(255,255,255,.18)}
.refine-v15 .picture-card,
.refine-v15 .method-row,
.refine-v15 .audience-board,
.refine-v15 .audience-copy{border-radius:var(--r-lg);border-color:var(--line)}
.refine-v15 .picture-journey,
.refine-v15 .method-demo,
.refine-v15 .report-section{border-radius:var(--r-md);border-color:var(--line)}
.refine-v15 .picture-card{box-shadow:none}
.refine-v15 .method-row{box-shadow:var(--sh-card)}

/* the five method cards were 260px tall around ~110px of content, so each one
   read as an unfinished box. Height now follows the content. */
/* the copy column was wider than the copy, and in RTL the slack collects on
   the inner edge, so every row had a dead corridor down its middle */
.refine-v15 .method-row{
  min-height:0;
  grid-template-columns:minmax(240px,.66fr) minmax(500px,1.34fr);
  gap:clamp(20px,2.4vw,34px);
  padding:22px 74px 22px 22px;
  align-items:center;
  transition:border-color .3s var(--ez-out),box-shadow .3s var(--ez-out),transform .3s var(--ez-out);
}
.refine-v15 .method-row .method-demo{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:18px}
.refine-v15 .method-copy h3{font-size:clamp(21px,1.9vw,27px);line-height:1.5}
.refine-v15 .method-copy p{font-size:13.5px;line-height:1.85}
.refine-v15 .method-icon,
.refine-v15 .method-icon-svg{width:40px;height:40px}
/* the numeral was a half-tab hanging off the card edge; it now sits on the
   spine line that already runs down the sequence, which is what it marks */
.refine-v15 .method-index{
  right:-3px;
  width:56px;
  height:38px;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  font-size:11.5px;
}

/* ----------------------------------------------------------------- tabs --
   #compare and #service shipped two different tab bars (purple active vs ink
   active, 58px vs 66px tall). One component, used twice. */
.refine-v15 .picture-tabs,
.refine-v15 .audience-tabs{
  border-radius:var(--r-md);
  border-color:var(--line);
  background:var(--hy-paper);
}
.refine-v15 .picture-tabs button,
.refine-v15 .audience-tabs button{
  min-height:56px;
  border-left-color:var(--line);
  color:#6b6480;
  background:transparent;
  font:800 12.5px Almarai,sans-serif;
  transition:color .24s var(--ez-out),background-color .24s var(--ez-out);
}
.refine-v15 .picture-tabs button:hover,
.refine-v15 .audience-tabs button:hover{color:var(--cs-ink);background:rgba(118,79,246,.06)}
.refine-v15 .picture-tabs button.is-active,
.refine-v15 .audience-tabs button.is-active{color:#fff;background:var(--cs-ink)}

/* ----------------------------------------------------------------- why --
   Five cards for five causes, but card 4 was inked and card 5 lilac for no
   reason, and their titles wrapped to different line counts, so the row read
   as ragged. Equal cards, equal weight, one accent that means "this is the
   one that costs you money". */
.refine-v15 .diagnosis{gap:12px}
.refine-v15 .dx,
.refine-v15 .dx:nth-child(4),
.refine-v15 .dx:nth-child(5){
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:20px 20px 22px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  color:var(--cs-ink);
  background:#fff;
  transition:border-color .3s var(--ez-out),transform .35s var(--ez-out),box-shadow .35s var(--ez-out);
}
.refine-v15 .dx:hover{
  border-color:#c5b8f0;
  transform:translateY(-3px);
  box-shadow:var(--sh-card);
}
.refine-v15 .dx-glyph{margin-top:20px;margin-bottom:auto}
.refine-v15 .dx h3,
.refine-v15 .dx:nth-child(4) h3{
  margin-top:22px;
  min-height:2.9em;
  display:flex;
  align-items:flex-end;
  color:var(--cs-ink);
  font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.45;
}
.refine-v15 .dx p,
.refine-v15 .dx:nth-child(4) p{margin-top:8px;min-height:3.5em;color:var(--cs-muted);font-size:12.5px;line-height:1.75}
.refine-v15 .dx-glyph--routes{color:var(--gold-lo)}
/* the track glyph drew its dashed line as the box's bottom border, so its ink
   sat ~30px below the other four in the same row and the five stopped reading
   as one set. The line moves to the middle of the box and the dots follow. */
.refine-v15 .dx-glyph--track{border-bottom:0}
.refine-v15 .dx-glyph--track::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:31px;
  border-top:2px dashed #c9c3d9;
}
.refine-v15 .dx-glyph--track i{bottom:auto;top:26px}

/* ---------------------------------------------------------------- hero --
   Removed: the graph-paper grid behind the headline (a default backdrop, and
   it fought the dot texture on the panel), and the eyebrow pill, which the
   sticky header clipped at the top of the viewport. */
/* Flat paper. The headline, the live signal card and the partner plates are
   the hero; atmosphere washes behind them are decoration standing in for
   content, and the v12 declaration also set background-size:56px for its grid,
   which tiles any replacement image into a checkerboard. Shorthand resets it. */
.refine-v15 .hero{background:var(--hy-paper)}
/* the v12 glow drew a hard-edged diagonal band across the hero. */
.refine-v15 .hero-glow{background:none;opacity:0}
/* the signal card carried the same two decorations the hero just lost: a
   34px graph-paper tile and a heavy purple wash. The grid goes. The light
   stays but drops to a quarter of its strength, because it sits exactly where
   the scattered signals converge and reads as that, not as atmosphere. The
   plate itself keeps its tilt, hairline and drop shadow. */
.refine-v15 .hero-press{
  background:
    radial-gradient(circle at 62% 42%,rgba(118,79,246,.2),transparent 46%),
    var(--hy-ink);
}
.refine-v15 .hero-eyebrow{
  display:block;
  margin-bottom:20px;
  color:#7a7290;
  font:800 12.5px/1.6 Almarai,sans-serif;
}
.refine-v15 .hero-eyebrow::before{
  content:"";
  display:inline-block;
  width:18px;
  height:1px;
  margin-inline-end:10px;
  background:var(--sf);
  vertical-align:middle;
}
.refine-v15 .hero-inner{grid-template-columns:minmax(0,50fr) minmax(0,50fr)}
.refine-v15 .hero-copy{max-width:640px}
/* sized so "اعرف وش يصير" holds one line: the forced break is the only break */
.refine-v15 .hero h1{font-size:clamp(38px,4.2vw,58px);line-height:1.3;letter-spacing:-.02em}
.refine-v15 .hero-sub{margin-top:22px;max-width:38ch;font-size:clamp(15.5px,1.5vw,18.5px)}
.refine-v15 .hero-actions .bt{border-radius:var(--r-md);padding:18px 34px;font-size:16.5px}
.refine-v15 .press-cap{margin-top:16px}
.refine-v15 .hero-trust{margin-top:38px}
.refine-v15 .hero-trust-logo{border-radius:var(--r-md);box-shadow:none;border:1px solid var(--line)}
.refine-v15 .hero-trust-logo--ejari{background:#0e626c;border-color:transparent}
.refine-v15 .hero-trust-logo--umx,
.refine-v15 .hero-trust-logo--sukuk,
.refine-v15 .hero-trust-logo--sanabil{background:#15151a;border-color:transparent}
.refine-v15 .hero-trust-logo--sanabil{border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- final --
   The closer is the one purple surface on the page: the brand colour lands
   once, on the only action the page asks for. It is full bleed, so it must
   not carry a card radius, and it is flat: a white radial bloom over the
   brand colour reads as atmosphere, and the headline does not need help. */
.refine-v15 .final-panel{border-radius:0;background:var(--sf)}
.refine-v15 .final-panel::before{display:none}
.refine-v15 .final-panel>*{position:relative;z-index:2}
.refine-v15 .final-panel h2{font-size:clamp(29px,4.6vw,56px);letter-spacing:-.02em}
.refine-v15 .final-bt{border-radius:var(--r-md);padding:19px 40px;font-size:17px}
.refine-v15 .pledge-panel{
  border-radius:var(--r-xl);
  grid-template-columns:minmax(0,auto) auto;
  justify-content:center;
  gap:clamp(28px,4vw,80px);
}
.refine-v15 .pl-body{justify-self:auto}
/* the last capsule label on the page. The hero eyebrow already reads as a rule
   plus a line of text, so this one matches it and the seal beside it stops
   competing with a second bordered shape. */
.refine-v15 .pl-kicker{
  display:block;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin-bottom:26px;
  color:#8a651f;
  font:800 12.5px/1.6 Almarai,sans-serif;
}
.refine-v15 .pl-kicker::before{
  content:"";
  display:inline-block;
  width:18px;
  height:1px;
  margin-inline-end:10px;
  background:#c9a338;
  vertical-align:middle;
}

/* ------------------------------------------------------------------ nav --
   Every other button on the page carries the shared radius ramp. The header
   CTA was the last pill left, which made the first control a reader meets the
   one that belongs to a different design. */
.refine-v15 .nav-cta{border-radius:var(--r-sm)}

/* ----------------------------------------------------------------- rail --
   A moving indicator instead of eight independent background swaps: the pill
   travels to the active chapter, so the rail reads as one object. */
.refine-v15 .rail{position:fixed;border-radius:22px}
.refine-v15 .rail-thumb{
  position:absolute;
  inset-inline-start:9px;
  top:0;
  width:28px;
  height:24px;
  border-radius:var(--r-sm);
  background:var(--sf);
  opacity:0;
  pointer-events:none;
  transition:transform .42s var(--ez-back),opacity .3s ease;
}
.refine-v15 .rail-thumb.on{opacity:1}
.refine-v15 .rail a{position:relative;z-index:2;transition:color .28s var(--ez-out)}
.refine-v15 .rail a.on{background:transparent;color:#fff}
.refine-v15 .rail a:hover{color:var(--cs-ink)}
.refine-v15 .rail a.on:hover{color:#fff}

/* ------------------------------------------------------------- motion --
   One reveal was used for everything: 22px up, 380ms, same easing, whatever
   the element was. Distance now scales with the size of the thing moving, and
   headings rise out of their own baseline instead of fading in place. */
.js.refine-v15 [data-rv]{
  transform:translateY(28px);
  transition:opacity .5s var(--ez-out),transform .72s var(--ez-out);
}
.js.refine-v15 [data-rv-kids]>*{
  transform:translateY(20px) scale(.988);
  transition:opacity .46s var(--ez-out),transform .62s var(--ez-out);
}
.js.refine-v15 [data-rv-kids].in>*{transform:none}
.js.refine-v15 [data-rv-kids].in>*:nth-child(1){transition-delay:0s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(2){transition-delay:.07s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(3){transition-delay:.14s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(4){transition-delay:.21s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(5){transition-delay:.28s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(6){transition-delay:.35s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(7){transition-delay:.42s}
.js.refine-v15 [data-rv-kids].in>*:nth-child(8){transition-delay:.49s}

/* headings clip up from the baseline; the numeral and note follow it */
.js.refine-v15 .sec-head h2{
  clip-path:inset(-25% -12% 102% -12%);
  transform:translateY(14px);
  transition:clip-path .82s var(--ez-out) .06s,transform .82s var(--ez-out) .06s;
}
.js.refine-v15 .sec-head.in h2{clip-path:inset(-25% -12% -25% -12%);transform:none}
.js.refine-v15 .sec-head .sec-num{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ez-out),transform .45s var(--ez-out)}
.js.refine-v15 .sec-head.in .sec-num{opacity:1;transform:none}
.js.refine-v15 .sec-head .sec-note{transition-delay:.24s}

/* the numeral rule draws itself in rather than appearing */
.js.refine-v15 .sec-head .sec-num::after{transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--ez-out) .22s}
.js.refine-v15 .sec-head.in .sec-num::after{transform:scaleX(1)}

/* method rows: the active step lifts and its spine dot grows, so the sequence
   reads as something advancing rather than five identical cards */
.refine-v15 .method-row.is-current{transform:translateX(-4px)}
.refine-v15 .method-row::after{transition:transform .4s var(--ez-back),background-color .3s ease}
.refine-v15 .method-row.is-current::after{transform:translateY(-50%) scale(1.28)}

/* hero: the platform marks were readable for 2 of every 7 seconds and showed
   as anonymous dots for the other 5. Rebalanced so the state that carries the
   meaning holds longest, and the formation is the payoff beat, not the rest
   position. */
.js.refine-v15 .g1s .g1,
.js.refine-v15 .g1s .g1-face,
.js.refine-v15 .g1s .g1-dot,
.js.refine-v15 .g1s .g1-tangle,
.js.refine-v15 .g1s .g1-aux{animation-duration:9s}
.js.refine-v15 .g1s .g1{animation-name:v15-move}
.js.refine-v15 .g1s .g1-face{animation-name:v15-face}
.js.refine-v15 .g1s .g1-dot{animation-name:v15-dot}
.js.refine-v15 .g1s .g1-tangle,
.js.refine-v15 .g1s .g1-aux{animation-name:v15-tangle}
@keyframes v15-move{
  0%,38%{transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg));animation-timing-function:cubic-bezier(.58,.02,.24,1.05)}
  52%,72%{transform:translate(0px,0px) rotate(0deg);animation-timing-function:cubic-bezier(.5,.06,.7,.3)}
  90%,100%{transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg))}
}
@keyframes v15-face{
  0%,40%{opacity:1;transform:scale(1)}
  52%,71%{opacity:0;transform:scale(.35)}
  88%,100%{opacity:1;transform:scale(1)}
}
@keyframes v15-dot{
  0%,45%{opacity:0;transform:scale(.25)}
  53%{opacity:1;transform:scale(1.14)}
  57%,72%{opacity:1;transform:scale(1)}
  85%,100%{opacity:0;transform:scale(.25)}
}
@keyframes v15-tangle{
  0%,38%{opacity:1}
  48%,70%{opacity:0}
  88%,100%{opacity:1}
}

/* ---------------------------------------------------------------------------
   Hero press variants, previewed with ?press=a|b|c. The default is press-mark
   below. Each keeps the same contract: the scattered tiles and the Sfere
   mark are the same pieces, and with animations off the rest state stays the
   formed mark. Scoped under .page because .js lives on <html> while the v-*
   classes live on <body>. The riyal tile carries .g1--hot so the mark's heart
   can be addressed on its own.
   ------------------------------------------------------------------------- */

/* A · gather once, then hold. The mess is readable for a beat, every tile
   makes one smooth flight (no overshoot, no return trip), the noise sinks,
   and the mark holds with only a slow breath on the big dot. */
.js .page.press-a .g1s .g1{animation-name:pa-move;animation-duration:3s;animation-iteration-count:1}
.js .page.press-a .g1s .g1-face{animation-name:pa-face;animation-duration:3s;animation-iteration-count:1}
.js .page.press-a .g1s .g1-dot{animation-name:pa-dot;animation-duration:3s;animation-iteration-count:1}
.js .page.press-a .g1s .g1-tangle{animation-name:pa-tangle;animation-duration:3s;animation-iteration-count:1}
.js .page.press-a .g1s .g1-aux{animation-name:pa-aux;animation-duration:3s;animation-iteration-count:1}
@keyframes pa-move{
  0%,40%{transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg));animation-timing-function:cubic-bezier(.33,.02,.2,1)}
  76%,100%{transform:translate(0px,0px) rotate(0deg)}
}
@keyframes pa-face{
  0%,44%{opacity:1;transform:scale(1)}
  64%,100%{opacity:0;transform:scale(.5)}
}
@keyframes pa-dot{
  0%,56%{opacity:0;transform:scale(.3)}
  70%{opacity:1;transform:scale(1.12)}
  80%,100%{opacity:1;transform:scale(1)}
}
@keyframes pa-tangle{0%,38%{opacity:1}56%,100%{opacity:0}}
@keyframes pa-aux{
  0%,38%{opacity:1;transform:translateY(0px)}
  62%,100%{opacity:0;transform:translateY(calc(16px*var(--k,1)))}
}
.js .page.press-a .g1--hot .g1-dot{animation-name:pa-dot,pa-breathe;animation-duration:3s,4.8s;animation-delay:var(--ad,0s),3.4s;animation-iteration-count:1,infinite;animation-timing-function:ease,ease-in-out}
@keyframes pa-breathe{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(146,107,247,0))}
  50%{transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(146,107,247,.45))}
}

/* B · signal pulse. The mark never breaks up. Each platform card opens in
   place of its dot for a moment, in a shuffled order (the existing --ad
   values scaled into slots), then the big dot answers once per cycle.
   The panel reads as live, not as loading. */
.js .page.press-b .g1s .g1{animation-name:none}
.js .page.press-b .g1s .g1-tangle,
.js .page.press-b .g1s .g1-aux{animation-name:none}
.js .page.press-b .g1s .g1-face{z-index:2;animation-name:pb-face;animation-duration:18s;animation-delay:calc(var(--ad,0s)*30)}
.js .page.press-b .g1s .g1-dot{animation-name:pb-dot;animation-duration:18s;animation-delay:calc(var(--ad,0s)*30)}
@keyframes pb-face{
  0%{opacity:0;transform:scale(.45)}
  1.7%{opacity:1;transform:scale(1)}
  6.6%{opacity:1;transform:scale(1)}
  8.4%,100%{opacity:0;transform:scale(.45)}
}
@keyframes pb-dot{
  0%,1.2%{transform:scale(1)}
  2.4%,6.4%{transform:scale(.18)}
  8.6%,100%{transform:scale(1)}
}
.js .page.press-b .g1--hot .g1-dot{animation-name:pb-hot;animation-duration:18s;animation-delay:0s}
@keyframes pb-hot{
  0%,84%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(146,107,247,0))}
  90%{transform:scale(1.07);filter:drop-shadow(0 0 18px rgba(146,107,247,.55))}
  97%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(146,107,247,0))}
}

/* C · focus pull. Nothing travels. The scattered mess is readable, then it
   sinks out of focus while the mark fades into focus inside the same frame,
   holds, and drifts back out. The chaos and the answer stay visibly the same
   pieces; only the reading changes. */
.js .page.press-c .g1s .g1{animation-name:none}
.js .page.press-c .g1s .g1-face{animation-name:pc-face;animation-duration:13s;animation-delay:0s}
.js .page.press-c .g1s .g1-dot{animation-name:pc-dot;animation-duration:13s;animation-delay:0s}
.js .page.press-c .g1s .g1-tangle{animation-name:pc-tangle;animation-duration:13s}
.js .page.press-c .g1s .g1-aux{animation-name:pc-aux;animation-duration:13s}
@keyframes pc-face{
  0%,18%{opacity:1;transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg)) scale(1);filter:blur(0px)}
  36%,82%{opacity:.12;transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg)) scale(.94);filter:blur(3px)}
  96%,100%{opacity:1;transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg)) scale(1);filter:blur(0px)}
}
@keyframes pc-dot{
  0%,22%{opacity:0;transform:scale(.55)}
  34%{opacity:1;transform:scale(1.07)}
  40%,82%{opacity:1;transform:scale(1)}
  94%,100%{opacity:0;transform:scale(.55)}
}
@keyframes pc-tangle{0%,20%{opacity:1}34%,82%{opacity:0}94%,100%{opacity:1}}
@keyframes pc-aux{0%,20%{opacity:1}36%,82%{opacity:0}94%,100%{opacity:1}}
.js .page.press-c .g1--hot .g1-dot{animation-name:pc-dot,pc-hot;animation-duration:13s,13s;animation-delay:0s,0s}
@keyframes pc-hot{
  0%,44%{filter:drop-shadow(0 0 0 rgba(146,107,247,0))}
  58%,74%{filter:drop-shadow(0 0 13px rgba(146,107,247,.42))}
  88%,100%{filter:drop-shadow(0 0 0 rgba(146,107,247,0))}
}

/* ---------------------------------------------------------------------------
   Default hero press (press-mark, applied by JS unless ?press=a|b|c): the
   من كل المنصات grammar adapted to the hero. The scattered mess sits over a
   faint ghost of the Sfere mark, every tile arcs onto its dot once on load
   (JS draws the trails), the noise crumbles, the riyal lands last with a
   beat, and the mark holds with a slow breath. No loop, no spin.
   ------------------------------------------------------------------------- */

/* scatter state: static from first paint, so there is no formed-mark flash.
   No transition on the tile itself: JS pins left/top to the measured scatter
   point when .fly clears the chaos transform, and a transitioning transform
   would double-offset the piece off-panel. The face fade covers the un-rotate. */
.js .page.press-mark .g1s .g1{animation-name:none;transform:translate(calc(var(--cx)*var(--k,1)),calc(var(--cy)*var(--k,1))) rotate(var(--crt,0deg))}
.js .page.press-mark .g1s .g1-face{opacity:1;animation-name:jit;animation-duration:1.7s;animation-timing-function:ease-in-out}
.js .page.press-mark .g1s .g1-dot{animation-name:none;opacity:0;transform:scale(.3)}
.js .page.press-mark .g1s .g1-tangle{animation-name:none;opacity:1}
.js .page.press-mark .g1s .g1-aux{animation-name:none;opacity:1}

/* the ghost: the mark was always there, under the noise */
.pghost{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease}
.js .page.press-mark .pghost{opacity:1}
.pghost i{position:absolute;left:var(--tx);top:var(--ty);width:calc(var(--sz)*var(--k,1));height:calc(var(--sz)*var(--k,1));border-radius:50%;background:#fff;opacity:.13;transform:translate(-50%,-50%)}
.page.press-mark .press-plates.formed .pghost{opacity:0;transition-delay:.3s}

/* flight start: the threads dissolve, the noise crumbles out */
.js .page.press-mark .press-plates.flying .g1-tangle{opacity:0;transition:opacity .45s ease}
.js .page.press-mark .press-plates.flying .g1-aux{opacity:0;transform:translateY(calc(48px*var(--k,1))) rotate(18deg);transition:transform .7s cubic-bezier(.55,.06,.68,.19),opacity .55s ease}
.js .page.press-mark .press-plates.flying .g1-aux2{transition-delay:.09s}

/* in flight the tile collapses into its dot; the trail carries the eye */
.js .page.press-mark .g1s .g1.fly{transform:none}
.js .page.press-mark .g1s .g1.fly .g1-face{animation-name:none;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .5s ease}
.js .page.press-mark .g1s .g1.fly .g1-dot{opacity:1;transform:scale(.5);transition:opacity .25s ease,transform .55s cubic-bezier(.34,1.25,.44,1)}
.js .page.press-mark .g1s .g1.landed .g1-dot{transform:scale(1)}

/* the beat when the riyal lands, scaled to stay inside the panel */
.press-beat{position:absolute;left:78.33%;top:50%;width:calc(150px*var(--k,1));height:calc(150px*var(--k,1));transform:translate(-50%,-50%);border-radius:50%;border:3px solid rgba(214,199,252,.85);opacity:0;z-index:9;pointer-events:none}
.press-plates.beat-hit .press-beat{animation:pm-beat 1.05s ease-out both}
@keyframes pm-beat{
  0%{opacity:.85;transform:translate(-50%,-50%) scale(.45)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}
}

/* the hold: every dot breathes slowly, the riyal glows */
.js .page.press-mark .press-plates.formed .g1-dot{animation:pm-dot-breathe 6.5s ease-in-out calc(var(--ad,0s)*2) infinite}
@keyframes pm-dot-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.js .page.press-mark .press-plates.formed .g1--hot .g1-dot{animation:pa-breathe 4.8s ease-in-out .9s infinite}

/* section 02 question hub: the note is the source node of a signal tree.
   Trunk, spine, column drops, threaded cards, and socket studs grow out of
   each card's own top edge. */
.problems{position:relative}
.qnode{display:flex;width:max-content;max-width:100%;margin-inline:auto;padding:11px 22px;align-items:center;border:1px solid rgba(118,79,246,.38);border-radius:999px;background:#fff;box-shadow:0 14px 30px -20px rgba(24,20,48,.45);color:var(--ink);font-weight:800;position:relative;z-index:4}
.qlinks{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.qlinks path{fill:none;stroke:url(#qhub-grad);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qlinks path.qtrunk{stroke-width:2.6}
.qlinks circle{fill:#764ff6}
.qlinks circle.qstart{fill:var(--gold)}
.qlinks circle.qj{fill:#8f6bf2}
.qlinks circle.qstud-d{fill:var(--gold)}
.qlinks path.qstud-f{stroke:none}
.qlinks circle.qstart-halo{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.js .qlinks path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) var(--qd,0s)}
.js .qlinks circle:not(.qstart-halo){opacity:0;transition:opacity .35s ease var(--qd,0s)}
.js .qlinks .qstud-f{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .3s ease var(--qd,0s),transform .4s cubic-bezier(.2,.9,.3,1.35) var(--qd,0s)}
.js .qlinks.draw path{stroke-dashoffset:0}
.js .qlinks.draw circle:not(.qstart-halo){opacity:1}
.js .qlinks.draw .qstud-f{opacity:1;transform:scale(1)}
.js .qlinks.draw .qstart-halo{animation:qhub-ping 3.6s ease-out 1.8s infinite}
@keyframes qhub-ping{0%{transform:scale(.55);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.js .qlinks path,.js .qlinks circle{transition:none!important;animation:none!important}}

/* section 02 card 01: the pain as a Snapchat Ads campaign view — dark bar
   with the yellow ghost, metric blocks, the red cost line climbing past the
   green purchases line, and a live campaign row with the yellow toggle.
   Lines draw when the card activates; axis lettering stays in HTML (SVG
   text mis-renders Arabic). */
.snapchart{position:absolute;z-index:2;inset:0 1% 2%;display:flex;flex-direction:column;border:1px solid rgba(33,28,63,.14);border-radius:14px;background:#fff;box-shadow:0 18px 34px -26px rgba(24,20,48,.4);overflow:hidden}
.sc2-topbar{display:flex;align-items:center;gap:7px;padding:2.8% 4.6%;background:#15151c}
.sc2-ghost{width:clamp(13px,4.6cqw,19px);height:auto;flex:0 0 auto;fill:#fffc00}
.sc2-brand{font-weight:800;font-size:clamp(9.5px,3.1cqw,13px);color:#fff;white-space:nowrap}
.sc2-brand bdi{font-family:'IBM Plex Mono',Almarai,sans-serif;font-weight:700}
.sc2-create{margin-inline-start:auto;padding:2.5px 8px;border-radius:999px;background:#fffc00;color:#15151c;font-weight:800;font-size:clamp(7.5px,2.4cqw,10px);white-space:nowrap}
.sc2-metrics{display:flex;align-items:flex-end;gap:14px;padding:3% 4.6% 0}
.sc2-mt em{display:block;font-style:normal;font-weight:700;font-size:clamp(7.5px,2.4cqw,10px);color:#a5a1b8}
.sc2-mt b{display:flex;align-items:baseline;gap:5px;font-weight:900;font-size:clamp(13px,4.6cqw,20px);color:#211c3f}
.sc2-mt b bdi{font-family:'IBM Plex Mono',Almarai,sans-serif;font-variant-numeric:tabular-nums}
.sc2-cur{font-size:.55em;font-weight:800;color:#a5a1b8}
.sc2-delta{font-size:.52em;font-weight:800;color:#d43d43;white-space:nowrap}
.sc2-range{margin-inline-start:auto;padding-bottom:2px;font-weight:700;font-size:clamp(7.5px,2.4cqw,10px);color:#a5a1b8;white-space:nowrap}
.sc-plot{display:block;position:relative;flex:1;min-height:0;margin:2.4% 4.6% 0}
.sc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-grid{fill:none;stroke:#eceaf3;stroke-width:1}
.sc-line{fill:none;stroke-width:3;stroke-linecap:round}
.sc-line--red{stroke:#e5484d}
.sc-line--green{stroke:#1f9d63}
.sc-area--red{fill:url(#sc-red)}
.sc-area--green{fill:url(#sc-green)}
.sc-dot{stroke:#fff;stroke-width:2.5}
.sc-dot--red{fill:#e5484d}
.sc-dot--green{fill:#1f9d63}
.sc-ping{fill:none;stroke:#e5484d;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.sc-y{position:absolute;left:0;top:var(--y);transform:translateY(-50%);font:700 clamp(7px,2.1cqw,9.5px)/1 'IBM Plex Mono',monospace;color:#b3afc4}
.sc-y bdi{font:inherit}
.sc-x{display:block;position:relative;height:1.2em;margin:1.2% 4.6% 0;font:700 clamp(7.5px,2.3cqw,10px)/1.2 Almarai,sans-serif;color:#a5a1b8}
.sc-x span{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap}
.sc2-table{margin:2% 4.6% 0;border-top:1px solid #eceaf3}
.sc2-th,.sc2-tr{display:grid;grid-template-columns:auto minmax(0,1.3fr) repeat(3,minmax(0,1fr));align-items:center;gap:7px}
.sc2-th{padding:2.2% 0 1%}
.sc2-th em{font-style:normal;font-weight:700;font-size:clamp(6.5px,2.1cqw,9px);color:#a5a1b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc2-tr{padding:1% 0 2.6%}
.sc2-tr em{font-style:normal;font-weight:800;font-size:clamp(8px,2.5cqw,11px);color:#211c3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc2-num bdi{font-family:'IBM Plex Mono',Almarai,sans-serif;font-weight:700}
.sc2-bad{color:#d43d43}
.sc2-toggle{position:relative;display:inline-block;width:clamp(19px,6.2cqw,26px);height:clamp(10px,3.4cqw,14px);border-radius:999px;background:#fffc00;transition:background-color .3s ease .85s}
.sc2-toggle b{position:absolute;top:50%;left:64%;width:26%;aspect-ratio:1;border-radius:50%;background:#15151c;transform:translateY(-50%);transition:left .3s ease .85s}
@container (max-width:360px){.sc2-th,.sc2-tr{grid-template-columns:auto minmax(0,1.3fr) repeat(2,minmax(0,1fr))}.sc2-col-p{display:none}}
.js .stc .sc2-toggle{background:#e6e4ee}
.js .stc .sc2-toggle b{left:8%}
.js .stc.is-active .sc2-toggle{background:#fffc00}
.js .stc.is-active .sc2-toggle b{left:64%}
.js .stc .sc-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.js .stc .sc-area{opacity:0;transition:opacity .7s ease 1s}
.js .stc .sc-dot{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.js .stc .sc-dot--red{transition-delay:1.2s}
.js .stc .sc-dot--green{transition-delay:1.35s}
.js .stc .sc2-topbar,.js .stc .sc2-metrics,.js .stc .sc-x,.js .stc .sc-y,.js .stc .sc2-table{opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .45s ease}
.js .stc .sc2-metrics{transition-delay:.15s}
.js .stc .sc-x,.js .stc .sc-y{transition-delay:.5s}
.js .stc .sc2-table{transition-delay:.6s}
.js .stc.is-active .sc-line{stroke-dashoffset:0}
.js .stc.is-active .sc-line--green{transition-delay:.35s}
.js .stc.is-active .sc-area{opacity:1}
.js .stc.is-active .sc-dot{transform:scale(1)}
.js .stc.is-active .sc2-topbar,.js .stc.is-active .sc2-metrics,.js .stc.is-active .sc-x,.js .stc.is-active .sc-y,.js .stc.is-active .sc2-table{opacity:1;transform:none}
.js .stc.is-active .sc-ping{animation:sc-ping 3.2s ease-out 1.7s infinite}
@keyframes sc-ping{0%{transform:scale(1);opacity:.55}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.js .stc .sc-line,.js .stc .sc-area,.js .stc .sc-dot,.js .stc .sc2-topbar,.js .stc .sc2-metrics,.js .stc .sc-x,.js .stc .sc-y,.js .stc .sc2-table,.js .stc .sc2-toggle,.js .stc .sc2-toggle b{transition:none}.js .stc .sc-ping{animation:none}}

/* section 02 cards: cards 02-06 use one consistent screen-printed illustration
   family with no HTML artwork layered over it. */

/* faq: four floating lilac slabs were a card language nothing else on the page
   speaks, and every short question sat alone in its own box. One bordered list
   with hairline dividers matches the rest of the page, and the plus becomes an
   actual control instead of a stray glyph on the far edge. */
.refine-v15 .faq-list{
  width:min(840px,calc(100% - 2 * var(--px)));
  max-width:none;
  margin-inline:auto;
  padding:0;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.refine-v15 .fq{
  border-radius:0;
  background:transparent;
  padding:0 clamp(20px,2.4vw,30px);
  transition:background-color .26s var(--ez-out);
}
.refine-v15 .fq + .fq{border-top:1px solid var(--line)}
.refine-v15 .fq:hover,
.refine-v15 .fq[open]{background:#faf9fd}
.refine-v15 .fq summary{
  padding-block:24px;
  gap:24px;
  font-size:clamp(16.5px,1.55vw,19px);
  line-height:1.6;
}
.refine-v15 .fq-p{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border:1px solid var(--line-2);border-radius:50%;
  color:#6b6480;font-size:19px;font-weight:400;
  transition:color .26s var(--ez-out),border-color .26s var(--ez-out),
    background-color .26s var(--ez-out),transform .38s var(--ez-back);
}
.refine-v15 .fq:hover .fq-p{border-color:#c5b8f0;color:var(--cs-ink)}
.refine-v15 .fq[open] .fq-p{border-color:transparent;background:var(--cs-ink);color:#fff}
.refine-v15 .fq-a{margin-top:0;padding-bottom:26px;max-width:62ch;font-size:15px;line-height:1.95}

/* the two-column method row is a desktop layout only. Its minmax floors add up
   to 760px, so it has to hand back to the base single-column stack at the same
   1100px breakpoint the base uses, not a narrower one. */
@media (max-width:1100px){
  .refine-v15 .method-row{
    grid-template-columns:1fr;
    gap:22px;
    padding:24px 74px 24px 24px;
    align-items:stretch;
  }
  .refine-v15 .method-row .method-demo{padding:16px}
  /* same hand-back for the other two-column blocks: the base stacks them here
     and the v15 proportions must not hold the columns open at phone width. */
  .refine-v15 .hero-inner{grid-template-columns:1fr}
  .refine-v15 .hero-copy{max-width:none}
}
@media (max-width:860px){
  .refine-v15 .pledge-panel{grid-template-columns:1fr;justify-content:stretch}
}
@media (max-width:1000px){
  .refine-v15 .diagnosis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .refine-v15 .dx h3{min-height:0}
}
@media (max-width:640px){
  .refine-v15 .diagnosis{grid-template-columns:1fr}
  .refine-v15 .sec-head h2{max-width:none}
  .refine-v15 .picture-tabs button,
  .refine-v15 .audience-tabs button{min-height:52px;font-size:11.5px}
  .refine-v15 .fq{padding-inline:18px}
  .refine-v15 .fq summary{gap:14px;padding-block:20px}
  .refine-v15 .fq-p{width:28px;height:28px;font-size:17px}
  .refine-v15 .fq-a{padding-bottom:22px}
}
@media (max-width:560px){
  .refine-v15 .method-row{padding:24px 64px 18px 14px}
  .refine-v15 .method-row .method-demo{padding:14px}
  .refine-v15 .method-copy h3{font-size:21px}
  .refine-v15 .method-copy p{font-size:12.5px}
  .refine-v15 .method-icon,
  .refine-v15 .method-icon-svg{width:38px;height:38px}
  .refine-v15 .method-index{right:-4px;width:48px;height:36px;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .js.refine-v15 .sec-head h2{clip-path:none !important;transform:none !important}
  .js.refine-v15 .sec-head .sec-num{opacity:1 !important;transform:none !important}
  .js.refine-v15 .sec-head .sec-num::after{transform:scaleX(1) !important}
  .refine-v15 .rail-thumb{transition:none !important}
  .refine-v15 .method-row.is-current{transform:none !important}
}

/* ----------------------------------------------------------------- seal --
   The stamp's lettering moved out of the SVG and into HTML. As SVG <text> it
   was mis-rendered by two independent engines: the layout boxes measured
   correct, but Safari and Chrome's raster path both drew the Arabic
   half-formed and piled on itself. HTML text is set correctly everywhere, so
   the four lines are positioned over the rings as a share of the 260 unit
   artwork box and scale with it through container units. The rough-ink filter
   stays on the rings, where the texture reads without touching a glyph.
   S F E R E used to ride an arc across the top, directly over the title; on a
   straight baseline under the second rule it stops colliding and the stamp
   reads top to bottom: what it is, the word, the brand, the year. */
.refine-v15 .seal-tilt{container-type:inline-size}
.refine-v15 .seal-face{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:#4f41bd;
  opacity:.97;
  mix-blend-mode:multiply;
}
.refine-v15 .seal-face span{
  position:absolute;
  inset-inline:0;
  display:block;
  text-align:center;
  line-height:1;
  transform:translateY(-50%);
  white-space:nowrap;
}
.refine-v15 .seal-l1{
  top:22.5%;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(19px,1.95vw,26px);
  font-size:8.6cqw;
}
.refine-v15 .seal-l2{
  top:51.5%;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:900;
  font-size:clamp(37px,3.9vw,51px);
  font-size:16.92cqw;
}
.refine-v15 .seal-l3{
  top:72%;
  font-family:Almarai,sans-serif;
  font-weight:800;
  font-size:clamp(15px,1.6vw,21px);
  font-size:7cqw;
}
.refine-v15 .seal-l4{
  top:83%;
  font-family:Almarai,sans-serif;
  font-weight:700;
  font-size:clamp(13px,1.35vw,17px);
  font-size:5.77cqw;
}
/* letter-spacing leaves a trailing gap that pulls centred text off centre.
   The negative end margin takes exactly that gap back. */
.refine-v15 .seal-l3 bdi{letter-spacing:2.73cqw;margin-inline-end:-2.73cqw}
.refine-v15 .seal-l4 bdi{letter-spacing:1.92cqw;margin-inline-end:-1.92cqw}

/* ------------------------------------------------- managed-service header --
   .managed-head was authored for the light layout: an ink heading over a pale
   purple capsule. refine-v15 repaints .service-panel to #1a1533, so on the dark
   panel the heading read ink on ink and the label sat on an alien light chip.
   Only the colours change here; the layout is the one that already shipped. */
.refine-v15 .service-panel .managed-head h3{color:#fff}
.refine-v15 .service-panel .managed-head span{
  background:rgba(118,79,246,.28);
  color:#d3c8ff;
}

/* ===== method demos v4: five showpieces (19 Aug) =====
   Each step is its own small story, built to the homepage-brief level:
   01 the merge — scattered source cards fly in and fuse into the Sfere core
   02 the x-ray — a scan beam reveals the defects hidden inside "clean" data
   03 the snap — orders pair up magnetically, the unexplained fall into a bin
   04 the race — six months of ROAS, lanes swap, the 3.0 goal line waits
   05 the tanks — budget drains out of the weak channel into the strong one
   Base styles are the FINAL state (no-JS shows everything complete). .js
   sets the opening frame; .was-current plays the story once. Reduced motion
   forces the final state. */

.method-demo--sources,.method-demo--audit,.method-demo--match,.method-demo--performance,.method-demo--decision{
  background:radial-gradient(120% 130% at 85% 0%,#1d1640 0%,#151030 45%,#0f0b22 100%);
  border:1px solid rgba(143,107,242,.28);
  box-shadow:0 24px 50px -30px rgba(10,6,30,.8), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 60px rgba(118,79,246,.08);
}
.method-demo--sources{display:block;padding:20px 22px}
.method-demo--audit,.method-demo--match{padding:18px 20px}
.method-demo--performance,.method-demo--decision{padding:16px 18px}
.method-demo--audit .audit-head span,.method-demo--decision .decision-head span{color:#fff}
.method-demo--audit .audit-head b,.method-demo--decision .decision-head b{color:#a99ec7}
.method-demo--match .match-note{color:#a99ec7;border-top-color:rgba(255,255,255,.09)}
.method-demo--match .match-note strong{color:#f2c14e}
.method-demo--performance .illustrative-note{color:#7d7498}

/* ---------- 01: the merge ---------- */
.merge-field{position:relative;height:300px}
.mg-card{position:absolute;left:50%;top:50%;width:112px;height:42px;margin:-21px 0 0 -56px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cdc6e6;font:700 10px/1 Almarai,sans-serif;box-shadow:0 8px 20px -10px rgba(0,0,0,.7);opacity:0}
.mg-card img{width:24px;height:24px;object-fit:contain}
.mg-c1{--sx:-250px;--sy:-95px;--sr:-8deg;--gd:0s}
.mg-c2{--sx:0px;--sy:-118px;--sr:5deg;--gd:.08s}
.mg-c3{--sx:250px;--sy:-95px;--sr:9deg;--gd:.16s}
.mg-c4{--sx:-150px;--sy:100px;--sr:-6deg;--gd:.24s}
.mg-c5{--sx:150px;--sy:100px;--sr:7deg;--gd:.32s;width:auto;padding:0 14px}
.js .mg-card{opacity:1;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}
.js .method-row--unify.was-current .mg-card{animation:mg-gather .95s cubic-bezier(.55,.06,.35,1) var(--gd) both}
@keyframes mg-gather{
  0%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1);opacity:1}
  70%{opacity:1}
  100%{transform:translate(0,0) rotate(0deg) scale(.14);opacity:0}
}
.mg-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:14px;text-align:center}
.mg-mark{position:relative;display:grid;place-items:center;width:104px;height:104px}
.mg-halo{position:absolute;inset:-24px;border-radius:50%;background:radial-gradient(circle,rgba(143,107,242,.5),rgba(143,107,242,0) 66%)}
.mg-orbit{position:absolute;inset:0;width:100%;height:100%;animation:uf-spin 26s linear infinite}
.mg-orbit circle{fill:none;stroke:rgba(180,160,255,.55);stroke-width:1.4;stroke-dasharray:2 7;stroke-linecap:round}
@keyframes uf-spin{to{transform:rotate(360deg)}}
.mg-mark img{width:56px;height:52px;object-fit:contain;position:relative;filter:drop-shadow(0 0 14px rgba(143,107,242,.55))}
.mg-cap{color:#b3aacd;font-size:12px}
.mg-cap strong{display:block;margin-top:3px;color:#fff;font-weight:800;font-size:14px}
.mg-flash{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:2px solid rgba(242,193,78,.9);border-radius:50%;opacity:0;pointer-events:none}
.js .mg-core{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.js .method-row--unify.was-current .mg-core{animation:mg-core-in .7s cubic-bezier(.2,.9,.3,1.35) .95s both}
@keyframes mg-core-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.js .method-row--unify.was-current .mg-flash{animation:mg-flash 1s ease-out 1.05s both}
@keyframes mg-flash{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2)}}

/* ---------- 02: the x-ray ---------- */
.audit-live{display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:#a78bfa;animation:audit-live 1.6s ease-in-out infinite;vertical-align:1px}
@keyframes audit-live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(167,139,250,.4)}50%{opacity:.55;box-shadow:0 0 0 4px rgba(167,139,250,0)}}
.audit-scan{position:relative;border-radius:12px;padding:8px 6px;background-image:linear-gradient(rgba(143,107,242,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(143,107,242,.1) 1px,transparent 1px);background-size:22px 22px}
.vf{position:absolute;width:16px;height:16px;border:2px solid #a78bfa;opacity:.85;pointer-events:none;filter:drop-shadow(0 0 4px rgba(167,139,250,.7))}
.vf--tl{top:4px;left:4px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.vf--tr{top:4px;right:4px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.vf--bl{bottom:4px;left:4px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.vf--br{bottom:4px;right:4px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.method-demo--audit .audit-results li{border-bottom-color:rgba(255,255,255,.08)}
.method-demo--audit .audit-results li span{color:#d6cff0}
.xr-line{position:relative;flex:1;height:9px;margin-inline:14px;align-self:center}
.xc{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.13)}
.xt{position:absolute;inset:0;border-radius:99px}
.xt--ok{background:linear-gradient(90deg,#2bbd77,#1f9d63);box-shadow:0 0 8px rgba(43,189,119,.55)}
.xt--dup{display:grid;align-content:center;gap:2px;background:none}
.xt--dup u{display:block;height:3.5px;border-radius:99px;background:linear-gradient(90deg,#f26368,#e5484d);box-shadow:0 0 6px rgba(242,99,104,.5)}
.xt--hole{background:linear-gradient(90deg,#f26368 0 32%,rgba(242,99,104,.14) 32% 58%,#f26368 58% 100%);box-shadow:0 0 6px rgba(242,99,104,.35)}
.xt--short{inset:0 auto 0 0;width:58%;background:linear-gradient(90deg,#f2c14e,#d9ac42);box-shadow:0 0 8px rgba(242,193,78,.5)}
[dir="rtl"] .xt--short{inset:0 0 0 auto}
.audit-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:10px}
.audit-pill--pass{background:rgba(31,157,99,.16);color:#5ee79a;border:1px solid rgba(94,231,154,.3)}
.audit-pill--fail{background:rgba(229,72,77,.14);color:#ff8a8e;border:1px solid rgba(255,138,142,.3)}
.audit-pill--warn{background:rgba(217,172,66,.14);color:#f2c14e;border:1px solid rgba(242,193,78,.3)}
.audit-beam{display:none}
.js .audit-beam{display:block;position:absolute;inset-inline:0;top:-10%;height:28px;background:linear-gradient(180deg,transparent,rgba(143,107,242,.14) 32%,rgba(143,107,242,.14) 68%,transparent);opacity:0;pointer-events:none}
.js .audit-beam::after{content:"";position:absolute;inset-inline:0;top:50%;height:2px;margin-top:-1px;background:#a78bfa;box-shadow:0 0 14px 3px rgba(167,139,250,.75)}
.js .method-row--audit.was-current .audit-beam{animation:audit-sweep 1.5s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes audit-sweep{0%{top:-10%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:101%;opacity:0}}
.js .method-row--audit .xt{clip-path:inset(0 0 100% 0);transition:clip-path .45s ease var(--xd,0s)}
.js .method-row--audit .audit-results li:nth-child(1) .xt{--xd:.55s}
.js .method-row--audit .audit-results li:nth-child(2) .xt{--xd:.95s}
.js .method-row--audit .audit-results li:nth-child(3) .xt{--xd:1.35s}
.js .method-row--audit .audit-results li:nth-child(4) .xt{--xd:1.75s}
.js .method-row--audit.was-current .xt{clip-path:inset(0 0 0 0)}
.js .method-row--audit .audit-pill{opacity:.25;filter:grayscale(.85);transform:scale(.9);transition:opacity .4s ease var(--ad,0s),filter .4s ease var(--ad,0s),transform .45s cubic-bezier(.2,.9,.3,1.35) var(--ad,0s)}
.js .method-row--audit .audit-results li:nth-child(1) .audit-pill{--ad:.8s}
.js .method-row--audit .audit-results li:nth-child(2) .audit-pill{--ad:1.2s}
.js .method-row--audit .audit-results li:nth-child(3) .audit-pill{--ad:1.6s}
.js .method-row--audit .audit-results li:nth-child(4) .audit-pill{--ad:2s}
.js .method-row--audit.was-current .audit-pill{opacity:1;filter:none;transform:none}
.js .method-row--audit .vf{opacity:0;transition:opacity .5s ease 2.15s}
.js .method-row--audit.was-current .vf{opacity:.85}
.audit-meter{display:flex;gap:5px;margin-top:14px}
.am-s{height:9px;flex:1;border-radius:99px}
.am-g{background:#2bbd77;box-shadow:0 0 10px -1px rgba(43,189,119,.8)}
.am-r{background:#f26368;box-shadow:0 0 10px -1px rgba(242,99,104,.8)}
.am-a{background:#f2c14e;box-shadow:0 0 10px -1px rgba(242,193,78,.8)}
.js .method-row--audit .am-s{transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.js .method-row--audit .am-s:nth-child(1){transition-delay:2s}
.js .method-row--audit .am-s:nth-child(2){transition-delay:2.1s}
.js .method-row--audit .am-s:nth-child(3){transition-delay:2.2s}
.js .method-row--audit .am-s:nth-child(4){transition-delay:2.3s}
.js .method-row--audit.was-current .am-s{transform:none}

/* ---------- 03: the snap ---------- */
.pair-stats{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.pair-stat{display:grid;gap:3px;justify-items:start}
.pair-stat--store{justify-items:end;text-align:end}
.pair-stat b{font-size:12px;font-weight:800;color:#fff}
.pair-stat small{font-size:10px;font-weight:600;color:#a99ec7}
.mb-num{font:800 24px/1.15 'IBM Plex Mono',monospace}
.pair-stat .mb-num{color:#b9b1cf;text-shadow:0 0 18px rgba(185,177,207,.35)}
.pair-stat--store .mb-num{color:#b9a8ff;text-shadow:0 0 18px rgba(143,107,242,.6)}
.snap-field{display:grid;gap:14px;margin-top:10px}
.snap-grid{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:440px;margin-inline:auto}
.snap-pair{position:relative;width:48px;height:23px}
.sp-s,.sp-p{position:absolute;top:0;bottom:0}
.sp-s{left:0;width:56%;border-radius:99px 0 0 99px;background:linear-gradient(90deg,#8f6bf2,#764ff6);box-shadow:0 0 10px -2px rgba(143,107,242,.8)}
.sp-p{right:0;width:48%;border-radius:0 99px 99px 0;background:#5b517e;border-left:1.5px dashed rgba(255,255,255,.4)}
.snap-pair::after{content:"";position:absolute;inset:-4px;border-radius:99px;border:1.5px solid rgba(242,193,78,.9);opacity:0;transform:scale(.7);pointer-events:none}
.js .method-row--match .sp-s{transform:translateX(-26px);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.35) var(--sd,0s),opacity .3s ease var(--sd,0s)}
.js .method-row--match .sp-p{transform:translateX(26px);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.35) var(--sd,0s),opacity .3s ease var(--sd,0s)}
.js .method-row--match.was-current .sp-s,.js .method-row--match.was-current .sp-p{transform:none;opacity:1}
.js .method-row--match.was-current .snap-pair::after{animation:snap-flash .6s ease-out calc(var(--sd,0s) + .4s) both}
@keyframes snap-flash{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}}
.gap-zone{position:relative;height:64px}
.gap-bin{position:absolute;left:6%;bottom:0;width:120px;height:54px;display:grid;place-items:center;border:1.5px dashed rgba(242,193,78,.6);border-radius:12px;background:rgba(242,193,78,.07);color:#f2c14e;font:800 13px/1 'IBM Plex Mono',monospace}
.js .method-row--match.was-current .gap-bin{animation:bin-pulse 2.6s ease-in-out 2s infinite}
@keyframes bin-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,193,78,0)}50%{box-shadow:0 0 18px 1px rgba(242,193,78,.35)}}
.fall-chip{position:absolute;width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#f2c14e,#d9ac42);box-shadow:0 0 8px rgba(242,193,78,.7);transform:rotate(var(--fr,0deg))}
.fc1{left:calc(6% + 18px);bottom:9px}
.fc2{left:calc(6% + 50px);bottom:22px}
.fc3{left:calc(6% + 82px);bottom:7px}
.js .method-row--match .fall-chip{opacity:0;transform:translate(var(--fx0,0),var(--fy0,-140px)) rotate(0deg);transition:transform .8s cubic-bezier(.3,.55,.45,1.15) var(--fd,0s),opacity .3s ease var(--fd,0s)}
.js .method-row--match.was-current .fall-chip{opacity:1;transform:translate(0,0) rotate(var(--fr,0deg))}

/* ---------- 04: the race ---------- */
.race-track{display:grid;grid-auto-rows:var(--lane-h,44px);--lane-h:44px}
.race-lane{display:grid;grid-template-columns:100px minmax(0,1fr) 38px 62px;align-items:center;gap:10px}
.rcl-chip{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:7px;color:#cdc6e6;font:700 10px/1 Almarai,sans-serif;white-space:nowrap}
.rcl-chip img{width:20px;height:20px;object-fit:contain;flex:none}
.rcl-track{position:relative;height:14px}
.rcl-track::before{content:"";position:absolute;top:-6px;bottom:-6px;right:60%;border-right:1.8px dashed rgba(242,193,78,.5)}
.rcl-bar{position:absolute;top:0;bottom:0;right:0;border-radius:99px}
.rcl--meta .rcl-bar{width:84%;background:linear-gradient(90deg,#38a1ff,#1b7fe0);box-shadow:0 0 10px rgba(56,161,255,.55)}
.rcl--tt .rcl-bar{width:72%;background:linear-gradient(90deg,#f4f4fa,#b9b9c9);box-shadow:0 0 10px rgba(232,232,240,.45)}
.rcl--snap .rcl-bar{width:42%;background:linear-gradient(90deg,#f2c14e,#d9ac42);box-shadow:0 0 10px rgba(242,193,78,.55)}
.rcl--google .rcl-bar{width:26%;background:linear-gradient(90deg,#f26368,#e5484d);box-shadow:0 0 10px rgba(242,99,104,.55)}
.rcl-goal-chip{position:absolute;top:-16px;right:60%;transform:translateX(50%);z-index:2;padding:2px 8px;border-radius:99px;background:#f2c14e;color:#2b1d05;font:800 8.5px/1.6 Almarai,sans-serif;font-style:normal;white-space:nowrap}
.rcl-val{font:800 12px/1 'IBM Plex Mono',monospace;color:#fff;text-align:center}
.rcl-tag{justify-self:center;padding:3px 8px;border-radius:99px;font-size:9px;font-weight:800;font-style:normal}
.race-lane .performance-good{background:rgba(31,157,99,.16);color:#5ee79a}
.race-lane .performance-mid{background:rgba(217,172,66,.14);color:#f2c14e}
.race-lane .performance-low{background:rgba(229,72,77,.14);color:#ff8a8e}
.rcl--tt{transform:translateY(calc(var(--lane-h) * -1))}
.rcl--snap{transform:translateY(var(--lane-h))}
.race-months{position:relative;display:flex;justify-content:space-between;margin-top:8px;padding:0 2px 8px;font:600 9px/1 Almarai,sans-serif;color:#8f86ad}
.race-cursor{position:absolute;bottom:0;top:auto;width:8px;height:8px;border-radius:50%;background:#f2c14e;box-shadow:0 0 8px rgba(242,193,78,.8);right:8.3%;transform:translateX(50%)}
.js .method-row--performance .rcl--meta .rcl-bar{width:68%}
.js .method-row--performance .rcl--snap .rcl-bar{width:62%}
.js .method-row--performance .rcl--tt .rcl-bar{width:58%}
.js .method-row--performance .rcl--google .rcl-bar{width:36%}
.js .method-row--performance .rcl--tt,.js .method-row--performance .rcl--snap{transform:none}
.js .method-row--performance .race-cursor{right:91.7%}
.js .method-row--performance.was-current .rcl--meta .rcl-bar{animation:rcb-meta 3s ease-in-out .35s both}
.js .method-row--performance.was-current .rcl--snap .rcl-bar{animation:rcb-snap 3s ease-in-out .35s both}
.js .method-row--performance.was-current .rcl--tt .rcl-bar{animation:rcb-tt 3s ease-in-out .35s both}
.js .method-row--performance.was-current .rcl--google .rcl-bar{animation:rcb-google 3s ease-in-out .35s both}
@keyframes rcb-meta{0%{width:68%}20%{width:72%}40%{width:74%}60%{width:78%}80%{width:80%}100%{width:84%}}
@keyframes rcb-snap{0%{width:62%}20%{width:60%}40%{width:52%}60%{width:48%}80%{width:44%}100%{width:42%}}
@keyframes rcb-tt{0%{width:58%}20%{width:60%}40%{width:64%}60%{width:66%}80%{width:70%}100%{width:72%}}
@keyframes rcb-google{0%{width:36%}20%{width:34%}40%{width:32%}60%{width:30%}80%{width:28%}100%{width:26%}}
.js .method-row--performance.was-current .rcl--tt{animation:rcl-up 3s ease-in-out .35s both}
.js .method-row--performance.was-current .rcl--snap{animation:rcl-down 3s ease-in-out .35s both}
@keyframes rcl-up{0%,42%{transform:translateY(0)}58%,100%{transform:translateY(calc(var(--lane-h) * -1))}}
@keyframes rcl-down{0%,42%{transform:translateY(0)}58%,100%{transform:translateY(var(--lane-h))}}
.js .method-row--performance.was-current .race-cursor{animation:race-cursor 3s linear .35s both}
@keyframes race-cursor{
  0%{right:91.7%;animation-timing-function:steps(1,end)}
  20%{right:75%;animation-timing-function:steps(1,end)}
  40%{right:58.3%;animation-timing-function:steps(1,end)}
  60%{right:41.7%;animation-timing-function:steps(1,end)}
  80%{right:25%;animation-timing-function:steps(1,end)}
  100%{right:8.3%}
}
.js .method-row--performance .rcl-val,.js .method-row--performance .rcl-tag,.js .method-row--performance .rcl-goal-chip{opacity:0;transition:opacity .5s ease 3.1s}
.js .method-row--performance.was-current .rcl-val,.js .method-row--performance.was-current .rcl-tag,.js .method-row--performance.was-current .rcl-goal-chip{opacity:1}

/* ---------- 05: the tanks ---------- */
.tank-field{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:62px}
.tank-pipe{position:absolute;top:0;left:0;width:100%;height:56px;overflow:visible}
.tp-path{fill:none;stroke:url(#tpg);stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(242,193,78,.5))}
.tp-coin{opacity:0;visibility:hidden;filter:drop-shadow(0 0 5px rgba(242,193,78,.8))}
.tank{display:grid;justify-items:center;gap:9px}
.tk-body{position:relative;width:36px;height:100px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.045);overflow:hidden}
.tk-body::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(255,255,255,.09) 19px 20px)}
.tk-fill{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 12px 12px}
.tk--meta .tk-fill{height:84%;background:linear-gradient(0deg,#1f9d63,#3dd68c);box-shadow:0 0 14px rgba(61,214,140,.5)}
.tk--snap .tk-fill{height:42%;background:linear-gradient(0deg,#d9ac42,#f5cd68);box-shadow:0 0 14px rgba(242,193,78,.5)}
.tk--google .tk-fill{height:26%;background:linear-gradient(0deg,#e5484d,#f58a8f);box-shadow:0 0 14px rgba(242,99,104,.5)}
.tk-ext{position:absolute;bottom:84%;left:0;right:0;height:13%;background:repeating-linear-gradient(-45deg,rgba(61,214,140,.6) 0 5px,rgba(61,214,140,.2) 5px 10px)}
.tk-chip{display:flex;align-items:center;gap:6px;color:#cdc6e6;font:700 10px/1 Almarai,sans-serif;white-space:nowrap}
.tk-chip img{width:20px;height:20px;object-fit:contain}
.tk-roas{font:600 9px/1 'IBM Plex Mono',monospace;color:#a99ec7}
.tk-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:9.5px;font-weight:800;white-space:nowrap}
.tk-pill-icon{width:12px;height:12px}
.tk-pill--grow{background:rgba(31,157,99,.16);color:#5ee79a;border:1px solid rgba(94,231,154,.3)}
.tk-pill--fix{background:rgba(217,172,66,.14);color:#f2c14e;border:1px solid rgba(242,193,78,.3)}
.tk-pill--stop{background:rgba(229,72,77,.14);color:#ff8a8e;border:1px solid rgba(255,138,142,.3)}
.js .method-row--decision .tank{opacity:0;transform:translateY(10px);transition:opacity .45s ease var(--td,0s),transform .45s cubic-bezier(.23,1,.32,1) var(--td,0s)}
.js .method-row--decision.was-current .tank{opacity:1;transform:none}
.js .method-row--decision .tp-path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .7s ease .9s}
.js .method-row--decision.was-current .tp-path{stroke-dashoffset:0}
.js .method-row--decision.was-current .tp-coin{visibility:visible;transition:visibility 0s 1.4s}
.js .method-row--decision .tk--meta .tk-fill{height:58%;transition:height .9s cubic-bezier(.4,0,.2,1) 2.15s}
.js .method-row--decision .tk--snap .tk-fill{height:30%;transition:height .8s cubic-bezier(.4,0,.2,1) 1.7s}
.js .method-row--decision .tk--google .tk-fill{height:60%;transition:height 1s cubic-bezier(.4,0,.2,1) 1.4s}
.js .method-row--decision.was-current .tk--meta .tk-fill{height:84%}
.js .method-row--decision.was-current .tk--snap .tk-fill{height:42%}
.js .method-row--decision.was-current .tk--google .tk-fill{height:26%}
.js .method-row--decision .tk-ext{opacity:0;transition:opacity .5s ease 2.8s}
.js .method-row--decision.was-current .tk-ext{opacity:1}
.js .method-row--decision .tk-pill{opacity:0;transform:translateY(-4px);transition:opacity .4s ease calc(var(--td,0s) + 2.6s),transform .4s ease calc(var(--td,0s) + 2.6s)}
.js .method-row--decision.was-current .tk-pill{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media (max-width:700px){
  .merge-field{height:272px}
  .mg-card{width:88px;height:38px;margin:-19px 0 0 -44px}
  .mg-card img{width:20px;height:20px}
  .mg-c1{--sx:-108px;--sy:-88px}
  .mg-c2{--sy:-104px}
  .mg-c3{--sx:108px;--sy:-88px}
  .mg-c4{--sx:-74px;--sy:88px}
  .mg-c5{--sx:74px;--sy:88px}
  .pair-stats .mb-num{font-size:19px}
  .snap-grid{max-width:100%}
  .gap-bin{left:2%}
  .fc1{left:calc(2% + 16px)}
  .fc2{left:calc(2% + 48px)}
  .fc3{left:calc(2% + 80px)}
  .race-track{--lane-h:40px}
  .race-lane{grid-template-columns:84px minmax(0,1fr) 32px 54px;gap:8px}
  .tank-field{padding-top:54px}
  .tank-pipe{height:50px}
  .tk-body{width:31px;height:86px}
  .tk-pill{font-size:8.5px;padding:3px 8px}
}
@media (max-width:480px){
  .rcl-chip bdi{display:none}
  .rcl-chip{justify-content:center}
  .race-lane{grid-template-columns:36px minmax(0,1fr) 30px 50px;gap:7px}
  .race-months span:nth-child(even){display:none}
  .race-months{justify-content:space-around}
  .race-cursor{display:none}
}

/* ---------- reduced motion: everything lands complete ---------- */
@media (prefers-reduced-motion:reduce){
  .js .method-row .xt,.js .method-row .audit-pill,.js .method-row .vf,.js .method-row .am-s,
  .js .method-row .sp-s,.js .method-row .sp-p,.js .method-row .fall-chip,
  .js .method-row .rcl-val,.js .method-row .rcl-tag,.js .method-row .rcl-goal-chip,
  .js .method-row .tank,.js .method-row .tp-path,.js .method-row .tk-fill,.js .method-row .tk-ext,.js .method-row .tk-pill{transition:none}
  .js .method-row .mg-card,.js .method-row .mg-core,.js .method-row .mg-flash,.js .method-row .snap-pair::after,
  .js .method-row .rcl-bar,.js .method-row .race-lane,.js .method-row .race-cursor,
  .js .method-row .audit-beam,.js .method-row .gap-bin,.js .method-row .mg-orbit,.js .method-row .audit-live{animation:none}
  .js .method-row--unify .mg-card{opacity:0}
  .js .method-row--unify .mg-core{opacity:1;transform:translate(-50%,-50%)}
  .js .method-row--performance .rcl--meta .rcl-bar{width:84%}
  .js .method-row--performance .rcl--tt .rcl-bar{width:72%}
  .js .method-row--performance .rcl--snap .rcl-bar{width:42%}
  .js .method-row--performance .rcl--google .rcl-bar{width:26%}
  .js .method-row--performance .rcl--tt{transform:translateY(calc(var(--lane-h) * -1))}
  .js .method-row--performance .rcl--snap{transform:translateY(var(--lane-h))}
  .js .method-row--performance .race-cursor{right:8.3%}
  .js .method-row--match .fall-chip{opacity:1;transform:rotate(var(--fr,0deg))}
  .tp-coin{display:none}
}

/* Supplied V2 light-mode diagrams. The previous coded demos remain in the
   source as a recoverable fallback, but only the selected V2 iframe is shown. */
.method-demo--v2,
.refine-v15 .method-row .method-demo--v2{
  display:block;
  align-self:center;
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  border-radius:20px;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  container-type:inline-size;
}
.method-demo--v2>:not(.method-flow-frame){display:none!important}
.method-flow-frame{
  display:block;
  width:100%;
  border:0;
  border-radius:20px;
  background:#fff;
  color-scheme:light;
}
.method-demo--v2-m1 .method-flow-frame{height:250px;height:clamp(190px,38cqw,260px)}
.method-demo--v2-m2 .method-flow-frame{height:310px;height:clamp(190px,44cqw,310px)}
.method-demo--v2-m3 .method-flow-frame{height:320px;height:clamp(220px,50cqw,350px)}
.method-demo--v2-m4 .method-flow-frame{height:280px;height:clamp(205px,43cqw,300px)}
.method-demo--v2-m5 .method-flow-frame{height:330px;height:clamp(225px,51cqw,350px)}
@container (max-width:640px){
  /* Embedded diagrams switch to their compact caption + 44px replay control.
     Reserve that footer below the fitted artwork so it cannot be clipped at
     tablet widths, where the old cqw-only heights were too short. */
  .method-demo--v2-m1 .method-flow-frame{height:clamp(190px,calc(34.4cqw + 60px),276px)}
  .method-demo--v2-m2 .method-flow-frame{height:clamp(190px,calc(38.4cqw + 60px),302px)}
  .method-demo--v2-m3 .method-flow-frame{height:clamp(220px,calc(47cqw + 60px),356px)}
  .method-demo--v2-m4 .method-flow-frame{height:clamp(205px,calc(39.4cqw + 60px),308px)}
  .method-demo--v2-m5 .method-flow-frame{height:clamp(225px,calc(47.4cqw + 60px),358px)}
}
@media (max-width:700px){
  .method-demo--v2{border-radius:16px}
  .method-flow-frame{border-radius:16px}
}
@media (max-width:560px){
  /* The copy keeps a small rail pocket, while the artwork uses the full card
     width. The old 64px row inset forced a 1000px diagram into only 278px. */
  .refine-v15 .method-row{padding:20px 14px 18px}
  .refine-v15 .method-copy{padding-inline-start:54px}
  .refine-v15 .method-index{
    right:14px;
    top:22px;
    transform:none;
    border-radius:var(--r-sm)
  }
}

/* ============================================================================
   05 · وش نشتغل عليه معك؟: the two role boards (svc-*)
   One instrument per role that changes state as the visitor steps through the
   three actions, so the argument is carried by the picture and not by three
   captions.

     owner    : one row per channel on a shared 20,000 ر.س scale, cut into
                blocks of 1,000 ر.س so spend can be counted and not only
                compared. Colour carries cost per order. Step 02 shaves five
                blocks off the dearest channel and grows five on the cheapest,
                a dashed mark keeps the old tip visible, and step 03 settles
                the moved money into its new channel.
     marketer : the people who interacted and did not buy, splitting into
                three return segments, then one message test on the largest.

   Driven entirely by [data-action-state] on .service-workbench, which the
   existing rail controller already sets. No JS changes.
   Every figure is illustrative and is labelled as such in the board header.
   ========================================================================= */

/* ---- panel layout -------------------------------------------------------- */
/* The copy used to sit in a column beside the instrument: about 200px of text
   against a 430px instrument, so a third of the panel was empty on both tabs.
   The copy now runs as a band across the top and the instrument takes the full
   width, which is also the room the chart needed. */
.refine-v15 .audience-panel{grid-template-columns:minmax(0,1fr);gap:14px;}
.refine-v15 .audience-copy{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.2fr) minmax(0,.82fr);
  align-items:center;
  padding:24px 26px;
  column-gap:30px;
}
.refine-v15 .audience-copy>span{grid-area:1/1/2/2;align-self:end;}
.refine-v15 .audience-copy h3{grid-area:2/1/3/2;margin:9px 0 0;font-size:clamp(22px,2.15vw,30px);line-height:1.5;}
.refine-v15 .audience-copy p{grid-area:1/2/3/3;align-self:center;margin:0;font-size:12.5px;line-height:1.95;}
.refine-v15 .audience-role-line{
  grid-area:1/3/3/4;
  align-self:center;
  margin-top:0;
  padding:2px 0;
  padding-inline-start:30px;
  border-top:0;
  border-inline-start:1px solid var(--line);
}

/* ---- board shell --------------------------------------------------------- */
.svc-board{margin-top:18px;padding:16px 16px 0;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#1c1738;}
.svc-board-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09);}
.svc-board-head strong{color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.005em;}
.svc-illus{padding:3px 7px;border:1px solid rgba(255,255,255,.14);border-radius:4px;color:#8d85a6;font-size:8.5px;font-weight:800;white-space:nowrap;}
.svc-stage{display:grid;grid-template-columns:minmax(0,1fr) 276px;align-items:stretch;gap:18px;margin-top:16px;}

/* ---- owner: the money board ---------------------------------------------- */
/* A channel per row reads the way the sentence does in Arabic: name, then the
   spend, then what it cost. Columns wasted the space above the short channels
   and squeezed the scale; rows use the full width of the board. */
.svc-money{
  --g:3px;
  --bh:16px;
  --idw:clamp(124px,15vw,182px);
  --fw:clamp(92px,10vw,124px);
  --colgap:clamp(12px,1.5vw,18px);
  --unit:calc((100% - 19 * var(--g)) / 20);
  --step:calc(var(--unit) + var(--g));
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:12px;
}
.svc-rows{position:relative;display:grid;flex:1;grid-template-rows:repeat(3,minmax(min-content,1fr));}
.svc-row,
.svc-ruler{display:grid;grid-template-columns:var(--idw) minmax(0,1fr) var(--fw);align-items:center;column-gap:var(--colgap);}
.svc-row{border-top:1px solid rgba(255,255,255,.08);}
.svc-row:first-of-type{border-top:0;}

.svc-id{display:grid;min-width:0;gap:7px;}
.svc-name{display:flex;min-width:0;align-items:center;gap:8px;}
.svc-name img{width:20px;height:20px;flex:none;object-fit:contain;opacity:.92;}
.svc-name b{overflow:hidden;color:#fff;font-size:10.5px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.svc-cost{display:flex;align-items:baseline;gap:4px;color:#8d85a6;font-size:8.5px;font-weight:800;white-space:nowrap;}
.svc-cost b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:16px;font-weight:600;line-height:1;}
.svc-row[data-eff="high"] .svc-cost b{color:#e8798c;}
.svc-row[data-eff="mid"] .svc-cost b{color:#b3a7e6;}
.svc-row[data-eff="low"] .svc-cost b{color:#46c397;}

/* the trough is the whole 20,000 ر.س scale, so an unspent channel reads as
   headroom instead of as a short bar with nothing to measure it against. */
.svc-track{position:relative;height:var(--bh);border-radius:3px;background:rgba(255,255,255,.05);}
.svc-ticks{position:absolute;inset:0;}
.svc-ticks i{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--v) * var(--step) - var(--g));width:0;border-inline-start:1px solid rgba(255,255,255,.17);}
.svc-stack{position:absolute;z-index:1;display:flex;inset:0;gap:var(--g);}
.svc-stack > i{height:100%;flex:0 0 var(--unit);border-radius:2px;background:#453c72;transition:flex-basis .55s var(--ez),margin-inline-end .55s var(--ez),opacity .3s var(--ez),background-color .45s var(--ez);}
.svc-row[data-eff="high"] .svc-stack > i{background:#8e3a48;}
.svc-row[data-eff="low"] .svc-stack > i{background:#1c7a5b;}
.svc-row[data-eff] .svc-stack > i[data-move],
.svc-row[data-eff] .svc-stack > i[data-gain]{background:#dcb04a;}
.svc-stack > i[data-gain]{flex-basis:0;margin-inline-end:calc(var(--g) * -1);opacity:0;}
/* the tip moves first, so the transfer reads as the end of the bar being
   shaved off rather than the whole bar shrinking at once. */
.svc-stack > i[data-move]:nth-last-of-type(2),.svc-stack > i[data-gain]:nth-last-of-type(2){transition-delay:.07s;}
.svc-stack > i[data-move]:nth-last-of-type(3),.svc-stack > i[data-gain]:nth-last-of-type(3){transition-delay:.14s;}
.svc-stack > i[data-move]:nth-last-of-type(4),.svc-stack > i[data-gain]:nth-last-of-type(4){transition-delay:.21s;}
.svc-stack > i[data-move]:nth-last-of-type(5),.svc-stack > i[data-gain]:nth-last-of-type(5){transition-delay:.28s;}

[data-action-state="owner-direct"] .svc-stack > i[data-move],
[data-action-state="owner-measure"] .svc-stack > i[data-move]{flex-basis:0;margin-inline-end:calc(var(--g) * -1);opacity:0;}
[data-action-state="owner-direct"] .svc-stack > i[data-gain],
[data-action-state="owner-measure"] .svc-stack > i[data-gain]{flex-basis:var(--unit);margin-inline-end:0;opacity:1;}
/* once the money has landed it stops reading as "in transit" and joins the
   channel it moved to. Cost per order is unchanged: only the mix moved. */
[data-action-state="owner-measure"] .svc-row[data-eff] .svc-stack > i[data-gain]{background:#1c7a5b;}

/* where each channel stood before the budget moved, so the change is legible
   instead of having to be remembered. */
.svc-prev{position:absolute;z-index:2;top:-4px;bottom:-4px;inset-inline-start:calc(var(--v) * var(--step) - var(--g));width:0;border-inline-start:1px dashed rgba(220,176,74,.8);opacity:0;transition:opacity .4s var(--ez) .35s;}
.svc-prev em{position:absolute;top:calc(100% + 3px);inset-inline-start:0;color:#c9a557;font-size:7.5px;font-style:normal;font-weight:800;transform:translateX(50%);}
[data-action-state="owner-direct"] .svc-prev,
[data-action-state="owner-measure"] .svc-prev{opacity:1;}

.svc-figs{display:grid;justify-items:end;gap:5px;}
.svc-sum{display:grid;color:#fff;font-size:8.5px;font-weight:800;}
.svc-sum > span{grid-area:1/1;justify-self:end;white-space:nowrap;transition:opacity .45s var(--ez);}
.svc-sum bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600;}
.svc-sum > span:last-child{opacity:0;}
.svc-ord{display:grid;color:#847ca1;font-size:8.5px;font-weight:800;}
.svc-ord > span{grid-area:1/1;justify-self:end;white-space:nowrap;transition:opacity .45s var(--ez);}
.svc-ord > span:last-child{opacity:0;}
[data-action-state="owner-direct"] .svc-sum > span:first-child,
[data-action-state="owner-measure"] .svc-sum > span:first-child,
[data-action-state="owner-measure"] .svc-ord > span:first-child{opacity:0;}
[data-action-state="owner-direct"] .svc-sum > span:last-child,
[data-action-state="owner-measure"] .svc-sum > span:last-child,
[data-action-state="owner-measure"] .svc-ord > span:last-child{opacity:1;}

/* the scale the three rows are read against, aligned to the track column */
.svc-ruler{color:#6c6489;font-size:8px;font-weight:800;}
.svc-ruler-track{position:relative;height:11px;border-top:1px solid rgba(255,255,255,.09);padding-top:4px;}
.svc-ruler-track i{position:absolute;top:4px;inset-inline-start:calc(var(--v) * var(--step) - var(--g));font-style:normal;transform:translateX(50%);}
.svc-ruler-track bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;}
.svc-ruler-unit{align-self:end;text-align:end;}

.svc-coin{
  --barw:calc(100% - var(--idw) - var(--fw) - 2 * var(--colgap));
  position:absolute;
  z-index:3;
  top:16.67%;
  inset-inline-start:calc(var(--idw) + var(--colgap) + var(--barw) * .9);
  width:19px;
  margin-top:-10px;
  margin-inline-start:-9.5px;
  opacity:0;
  pointer-events:none;
}
.svc-coin img{display:block;width:19px;height:21px;}
[data-action-state="owner-direct"] .svc-coin{animation:svc-coin-drop 1.05s var(--ez) .12s both;}
[data-action-state="owner-direct"] .svc-coin img{animation:svc-coin-bow 1.05s var(--ez) .12s both;}
@keyframes svc-coin-drop{
  0%{top:16.67%;inset-inline-start:calc(var(--idw) + var(--colgap) + var(--barw) * .9);opacity:0;}
  16%{opacity:1;}
  84%{opacity:1;}
  100%{top:83.33%;inset-inline-start:calc(var(--idw) + var(--colgap) + var(--barw) * .65);opacity:0;}
}
@keyframes svc-coin-bow{0%{transform:translateX(0);}50%{transform:translateX(-15px);}100%{transform:translateX(0);}}

/* ---- marketer: the people board ------------------------------------------ */
.svc-people{display:flex;min-width:0;flex-direction:column;gap:18px;}
/* the month in one proportional band: what the store actually got out of its
   traffic, with the group this section is about held in gold. */
.svc-flow-total{display:block;margin-bottom:10px;color:#847ca1;font-size:9px;font-weight:800;}
.svc-flow-total em{color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:17px;font-style:normal;font-weight:600;}
.svc-flow-bar{display:flex;overflow:hidden;height:20px;gap:2px;border-radius:3px;}
.svc-flow-bar b{width:var(--w);border-radius:2px;transition:opacity .45s var(--ez);}
.svc-flow-bar b[data-part="buy"]{background:#1c7a5b;}
.svc-flow-bar b[data-part="warm"]{background:#dcb04a;}
.svc-flow-bar b[data-part="rest"]{background:#413a6d;}
[data-action-state="marketer-identify"] .svc-flow-bar b:not([data-part="warm"]){opacity:.5;}
.svc-flow-keys{display:flex;flex-wrap:wrap;gap:5px 22px;margin-top:12px;}
.svc-flow-keys i{display:inline-flex;align-items:center;gap:7px;color:#847ca1;font-size:9px;font-style:normal;font-weight:800;}
.svc-flow-keys i::before{width:12px;height:12px;flex:none;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;content:"";}
.svc-flow-keys i[data-part="buy"]::before{background:#2ea87e;}
.svc-flow-keys i[data-part="warm"]::before{background:#dcb04a;}
.svc-flow-keys i[data-part="rest"]::before{background:#6f6790;}
.svc-flow-keys em{color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-style:normal;font-weight:600;}
.svc-flow-keys i[data-part="warm"] em{color:#dcb04a;}

.svc-field{display:flex;flex:1;align-items:center;gap:12px;transition:gap .5s var(--ez);}
.svc-group{display:flex;min-width:0;flex-direction:column;gap:13px;transition:opacity .45s var(--ez);}
/* the weights are the dot counts, so the three groups read as one row of forty
   and every dot stays the same size when the field splits. */
.svc-group[data-seg="cart"]{flex:14 1 0;}
.svc-group[data-seg="viewed"]{flex:13 1 0;}
.svc-group[data-seg="once"]{flex:4 1 0;}
.svc-dots{display:flex;justify-content:space-between;gap:clamp(4px,.6vw,9px);}
.svc-dots i{width:auto;height:auto;max-width:15px;flex:1 1 0;aspect-ratio:1;border-radius:50%;background:#453c72;transition:background-color .4s var(--ez),box-shadow .4s var(--ez);}
[data-action-state="marketer-identify"] .svc-dots i{background:#dcb04a;}
[data-action-state="marketer-segment"] .svc-group[data-seg="cart"] .svc-dots i,
[data-action-state="marketer-retarget"] .svc-group[data-seg="cart"] .svc-dots i{background:#8b74ff;}
/* the three segments are told apart by shape as well as colour, so they stay
   readable side by side and without relying on hue alone. */
[data-action-state="marketer-segment"] .svc-group[data-seg="viewed"] .svc-dots i,
[data-action-state="marketer-retarget"] .svc-group[data-seg="viewed"] .svc-dots i{background:transparent;box-shadow:inset 0 0 0 2px #8b74ff;}
[data-action-state="marketer-segment"] .svc-group[data-seg="once"] .svc-dots i,
[data-action-state="marketer-retarget"] .svc-group[data-seg="once"] .svc-dots i{background:#dcb04a;}
[data-action-state="marketer-segment"] .svc-field,
[data-action-state="marketer-retarget"] .svc-field{gap:24px;}
[data-action-state="marketer-retarget"] .svc-group:not([data-seg="cart"]){opacity:.28;}

.svc-seg{display:grid;gap:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.13);opacity:0;transform:translateY(5px);transition:opacity .45s var(--ez),transform .45s var(--ez);}
.svc-seg b{color:#fff;font-size:9.5px;font-weight:800;line-height:1.5;}
.svc-seg i{color:#c3b9e2;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-style:normal;font-weight:600;}
[data-action-state="marketer-segment"] .svc-seg,
[data-action-state="marketer-retarget"] .svc-seg{opacity:1;transform:none;}
[data-action-state="marketer-segment"] .svc-group[data-seg="viewed"] .svc-seg{transition-delay:.08s;}
[data-action-state="marketer-segment"] .svc-group[data-seg="once"] .svc-seg{transition-delay:.16s;}

.svc-test{display:grid;gap:10px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);opacity:.34;transition:opacity .45s var(--ez);}
.svc-test-head{margin-bottom:2px;color:#847ca1;font-size:9px;font-weight:800;}
[data-action-state="marketer-retarget"] .svc-test{opacity:1;}
.svc-msg{display:grid;grid-template-columns:74px minmax(0,1fr) 38px;align-items:center;gap:12px;}
.svc-msg b{color:#a79fbe;font-size:9px;font-weight:800;white-space:nowrap;}
.svc-msg.is-win b{color:#fff;}
.svc-bar{position:relative;height:14px;border-radius:3px;background:rgba(255,255,255,.07);}
.svc-bar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:var(--fill);border-radius:3px;background:#4d4470;transform:scaleX(0);transform-origin:right center;}
.svc-msg.is-win .svc-bar::after{background:#8b74ff;}
[data-action-state="marketer-retarget"] .svc-bar::after{transform:scaleX(1);transition:transform .75s var(--ez) .2s;}
[data-action-state="marketer-retarget"] .svc-msg.is-win .svc-bar::after{transition-delay:.42s;}
.svc-msg i{color:#a79fbe;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-style:normal;font-weight:600;text-align:left;opacity:0;transition:opacity .4s var(--ez);}
.svc-msg.is-win i{color:#46c397;}
[data-action-state="marketer-retarget"] .svc-msg i{opacity:1;transition-delay:.55s;}

/* ---- the readout, shared by both boards ---------------------------------- */
/* All three readings stay on the panel so the visitor can see the whole plan
   at once. The rail does not swap the text, it moves the emphasis. */
.svc-readout{display:grid;min-width:0;grid-template-rows:repeat(3,1fr);border:1px solid rgba(255,255,255,.11);border-radius:12px;background:#231d44;}
.svc-read{position:relative;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:15px 16px;opacity:.32;transition:opacity .45s var(--ez);}
.svc-read + .svc-read{border-top:1px solid rgba(255,255,255,.09);}
.svc-read.is-active{opacity:1;}
.svc-read-tag{display:inline-flex;align-items:center;gap:6px;color:#8d85a6;font-size:8.5px;font-weight:800;}
.svc-read-tag::before{width:6px;height:6px;border-radius:1px;background:currentcolor;content:"";}
.svc-read-tag[data-tone="bad"]{color:#e8798c;}
.svc-read-tag[data-tone="move"]{color:#dcb04a;}
.svc-read-tag[data-tone="good"]{color:#46c397;}
.svc-read strong{display:block;margin-top:9px;color:#fff;font-family:'Noto Kufi Arabic',sans-serif;font-size:12.5px;font-weight:800;line-height:1.75;}
.svc-read p{margin:8px 0 0;color:#a79fbe;font-size:10px;line-height:1.85;}
.svc-read bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;}

/* ---- the ledger strip, shared by both boards ----------------------------- */
/* the three figures the whole board exists to move, kept in one place so the
   payoff is not buried inside the chart. */
.svc-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px -16px 0;border-top:1px solid rgba(255,255,255,.09);}
.svc-total{display:grid;min-width:0;align-content:center;gap:6px;padding:14px 16px;border-inline-start:1px solid rgba(255,255,255,.09);}
.svc-total:first-child{border-inline-start:0;}
.svc-total > b{color:#847ca1;font-size:8.5px;font-weight:800;}
.svc-total > strong{display:block;color:#fff;font-size:9.5px;font-weight:800;}
.svc-total bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:17px;font-weight:600;}
.svc-total > em{color:#6f6790;font-size:8.5px;font-style:normal;font-weight:800;}
.svc-swap{display:grid;}
.svc-swap > span{grid-area:1/1;white-space:nowrap;transition:opacity .45s var(--ez);}
.svc-swap > span:last-child{opacity:0;}
[data-action-state="owner-measure"] .svc-swap > span:first-child,
[data-action-state="marketer-retarget"] .svc-swap > span:first-child{opacity:0;}
[data-action-state="owner-measure"] .svc-swap > span:last-child,
[data-action-state="marketer-retarget"] .svc-swap > span:last-child{opacity:1;}
[data-action-state="owner-measure"] .svc-swap > span:last-child bdi,
[data-action-state="marketer-retarget"] .svc-swap > span:last-child bdi{color:#46c397;}
/* the caption swaps with the figure, so step 03 says what changed without
   adding a line and shifting the strip. */
.svc-up{color:#46c397;}
.svc-up bdi{font-size:9.5px;}


/* ---- unit marks ----------------------------------------------------------
   Every glyph on these two boards is the unit of the number it sits beside:
   note = riyals, bag = orders, tag = cost per order, cart / eye / exit = what
   the visitor actually did, note-bubble = a message sent back. They are drawn
   as masks so each one takes the colour of the figure it belongs to, which is
   how the verdict colour reaches the small type. None of them is decoration
   and none of them sits in a tile. */
.svc-ic{display:inline-block;width:1em;height:1em;flex:none;background:currentcolor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
[data-ic="cash"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M.9 3.3h14.2a.9.9 0 0 1 .9.9v7.6a.9.9 0 0 1-.9.9H.9a.9.9 0 0 1-.9-.9V4.2a.9.9 0 0 1 .9-.9Zm7.1 2.4a2.3 2.3 0 1 0 0 4.6 2.3 2.3 0 0 0 0-4.6Z'/%3E%3C/svg%3E");}
[data-ic="bag"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .4A3.1 3.1 0 0 0 4.9 3.5v.9H2.4a.8.8 0 0 0-.8.73l-.85 9.8a.8.8 0 0 0 .8.87h12.9a.8.8 0 0 0 .8-.87l-.85-9.8a.8.8 0 0 0-.8-.73h-2.5v-.9A3.1 3.1 0 0 0 8 .4Zm1.6 4v-.9a1.6 1.6 0 1 0-3.2 0v.9h3.2Z'/%3E%3C/svg%3E");}
[data-ic="tag"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.2.9H8.05a1.5 1.5 0 0 0-1.06.44L.66 7.66a1.5 1.5 0 0 0 0 2.12l5.56 5.56a1.5 1.5 0 0 0 2.12 0l6.32-6.33a1.5 1.5 0 0 0 .44-1.06V1.8a.9.9 0 0 0-.9-.9Zm-2.6 2.3a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Z'/%3E%3C/svg%3E");}
[data-ic="cart"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M.75.7h2.05a.75.75 0 0 1 .74.62l.3 1.68H15.1a.75.75 0 0 1 .73.92l-1.36 6.1a.75.75 0 0 1-.73.59H5.3a.75.75 0 0 1-.74-.62L2.6 2.2H.75a.75.75 0 0 1 0-1.5Z M5.9 12.7a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Z M12.6 12.7a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Z'/%3E%3C/svg%3E");}
[data-ic="eye"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2.5C4.3 2.5 1.4 5.2.25 7.55a1 1 0 0 0 0 .9C1.4 10.8 4.3 13.5 8 13.5s6.6-2.7 7.75-5.05a1 1 0 0 0 0-.9C14.6 5.2 11.7 2.5 8 2.5Zm0 2.9a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2Z'/%3E%3C/svg%3E");}
[data-ic="exit"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M14.5 1.1H8.3v1.8h4.4v10.2H8.3v1.8h6.2a.9.9 0 0 0 .9-.9V2a.9.9 0 0 0-.9-.9Z M5.35 4.35.75 7.4a.7.7 0 0 0 0 1.2l4.6 3.05a.65.65 0 0 0 1.01-.54V9.05h3.36V6.95H6.36V4.89a.65.65 0 0 0-1.01-.54Z'/%3E%3C/svg%3E");}
[data-ic="person"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M8 .9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 8.3c3.7 0 6.7 2 6.7 4.4v.9a.6.6 0 0 1-.6.6H1.9a.6.6 0 0 1-.6-.6v-.9c0-2.4 3-4.4 6.7-4.4Z'/%3E%3C/svg%3E");}
[data-ic="chat"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M1.4 1.3h13.2a1.2 1.2 0 0 1 1.2 1.2v7.9a1.2 1.2 0 0 1-1.2 1.2h-1.1v2.9l-3.9-2.9H1.4A1.2 1.2 0 0 1 .2 10.4V2.5a1.2 1.2 0 0 1 1.2-1.2Z'/%3E%3C/svg%3E");}
[data-ic="check"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Zm3.98 4.9a.95.95 0 0 0-1.34.06L7.04 9.4 5.38 7.83a.95.95 0 1 0-1.3 1.38l2.36 2.23a.95.95 0 0 0 1.35-.04l4.25-4.66a.95.95 0 0 0-.06-1.34Z'/%3E%3C/svg%3E");}
[data-ic="up"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M8 2.9 15 12.4H1Z'/%3E%3C/svg%3E");}
[data-ic="down"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M8 13.1 1 3.6h14Z'/%3E%3C/svg%3E");}
[data-ic="flat"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='nonzero' d='M1.6 6.9h12.8v2.2H1.6Z'/%3E%3C/svg%3E");}

/* the board header states the unit of the picture, so nothing has to be
   guessed from the axis. */
.svc-unit{display:inline-flex;align-items:center;margin-inline-end:auto;gap:7px;color:#a79fbe;font-size:9px;font-weight:800;white-space:nowrap;}
.svc-unit bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;}
.svc-unit-sq,.svc-unit-dot{width:9px;height:9px;flex:none;background:#6f6790;}
.svc-unit-sq{border-radius:2px;}
.svc-unit-dot{border-radius:50%;}

.svc-cost .svc-ic{width:11px;height:11px;align-self:center;color:#6f6790;}
.svc-row[data-eff="high"] .svc-cost .svc-ic{color:#e8798c;}
.svc-row[data-eff="mid"] .svc-cost .svc-ic{color:#b3a7e6;}
.svc-row[data-eff="low"] .svc-cost .svc-ic{color:#46c397;}

.svc-fig{display:flex;align-items:center;gap:6px;}
.svc-fig .svc-ic{width:11px;height:11px;color:#6f6790;}
.svc-fig:first-child .svc-ic{color:#8d85a6;}

/* what the move did to this one channel, in orders. Held in the layout from
   the first step so the rows do not jump when it is answered. */
.svc-delta{display:flex;align-items:center;gap:5px;color:#6f6790;font-size:8.5px;font-style:normal;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .4s var(--ez) .45s;}
.svc-delta .svc-ic{width:9px;height:9px;}
.svc-delta bdi{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;}
.svc-delta[data-dir="up"]{color:#46c397;}
.svc-delta[data-dir="down"]{color:#c98598;}
[data-action-state="owner-measure"] .svc-delta{opacity:1;}

.svc-seg b,.svc-total > b,.svc-msg b{display:flex;align-items:center;gap:6px;}
.svc-seg b .svc-ic{width:11px;height:11px;color:#8d85a6;}
.svc-group[data-seg="cart"] .svc-seg b .svc-ic{color:#dcb04a;}
.svc-total > b .svc-ic{width:10px;height:10px;}
.svc-msg b .svc-ic{width:11px;height:11px;}
.svc-msg.is-win b .svc-ic{color:#46c397;}

@media (max-width:1080px){
  .svc-stage{grid-template-columns:minmax(0,1fr) 250px;gap:14px;}
  .svc-money{--idw:clamp(112px,14vw,150px);--fw:clamp(86px,9vw,110px);}
}
@media (max-width:900px){
  .refine-v15 .audience-copy{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .refine-v15 .audience-copy>span{grid-area:auto;align-self:auto;}
  .refine-v15 .audience-copy h3{grid-area:auto;}
  .refine-v15 .audience-copy p{grid-area:auto;margin-top:13px;}
  .refine-v15 .audience-role-line{grid-area:auto;margin-top:22px;padding:18px 0 0;border-top:1px solid var(--line);border-inline-start:0;}
  .svc-stage{grid-template-columns:1fr;gap:14px;}
  /* stacked stage: the three readings sit side by side under the chart so the
     band stays a legend strip instead of three near-empty full-width cards. */
  .svc-readout{grid-template-rows:auto;grid-template-columns:repeat(3,minmax(0,1fr));}
  .svc-read{justify-content:flex-start;padding:14px 15px;}
  .svc-read + .svc-read{border-top:0;border-inline-start:1px solid rgba(255,255,255,.09);}
  .svc-read strong{margin-top:8px;font-size:12px;}
  .svc-read p{margin-top:7px;}
  .svc-row{padding:14px 0;}
  .svc-row:first-of-type{padding-top:4px;}
}
@media (max-width:700px){
  .svc-board{margin-top:15px;padding:13px 13px 0;}
  /* the row folds: identity and figures on one line, the full-width track
     under them, so the scale keeps enough room to be counted on a phone. */
  .svc-money{--g:2px;--bh:14px;--idw:auto;--fw:auto;--colgap:12px;gap:10px;}
  .svc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id figs" "track track";row-gap:11px;padding:13px 0;}
  .svc-row:first-of-type{padding-top:2px;}
  .svc-id{grid-area:id;gap:6px;}
  .svc-track{grid-area:track;}
  .svc-figs{grid-area:figs;}
  .svc-name img{width:16px;height:16px;}
  .svc-name b{font-size:9.5px;}
  .svc-cost{font-size:7.5px;}
  .svc-cost b{font-size:13px;}
  .svc-sum bdi{font-size:11.5px;}
  .svc-sum,.svc-ord{font-size:8px;}
  .svc-ruler{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;}
  .svc-ruler > span:first-child{display:none;}
  .svc-coin{display:none;}
  .svc-flow-total em{font-size:14px;}
  .svc-flow-bar{height:16px;}
  .svc-flow-keys{gap:5px 12px;}
  .svc-group{min-width:76px;gap:9px;}
  .svc-dots{flex-wrap:wrap;justify-content:flex-start;gap:5px;}
  .svc-dots i{width:8px;height:8px;flex:none;max-width:none;}
  .svc-people{gap:16px;}
  /* the dot rows wrap at these widths, so the groups stretch and every segment
     label sits on the same baseline instead of floating with its own height. */
  .svc-field{gap:6px;align-items:stretch;}
  .svc-dots{align-content:flex-start;}
  .svc-seg{margin-top:auto;}
  [data-action-state="marketer-segment"] .svc-field,
  [data-action-state="marketer-retarget"] .svc-field{gap:12px;}
  .svc-msg{grid-template-columns:66px minmax(0,1fr) 32px;gap:9px;}
  .svc-readout{grid-template-columns:minmax(0,1fr);}
  .svc-read strong{font-size:12px;}
  .svc-read{padding:13px 14px;}
  .svc-read + .svc-read{border-top:1px solid rgba(255,255,255,.09);border-inline-start:0;}
  .svc-totals{grid-template-columns:minmax(0,1fr);margin:14px -13px 0;}
  .svc-total{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 13px;border-inline-start:0;border-top:1px solid rgba(255,255,255,.09);}
  .svc-total:first-child{border-top:0;}
  .svc-total > b{grid-area:1/1;}
  .svc-total > strong{grid-area:1/2/3/3;justify-self:end;}
  .svc-total > em{grid-area:2/1;}
  .svc-total bdi{font-size:14px;}
}
@media (max-width:420px){
  .svc-money{--bh:12px;}
  .svc-board-head strong{font-size:10.5px;}
  .svc-cost b{font-size:11.5px;}
  .svc-name b{font-size:8.5px;}
  .svc-sum bdi{font-size:10.5px;}
  .svc-seg b{font-size:8.5px;}
}
@media (prefers-reduced-motion:reduce){
  .svc-stack > i,
  .svc-sum > span,
  .svc-ord > span,
  .svc-swap > span,
  .svc-seg,
  .svc-test,
  .svc-msg i,
  .svc-dots i,
  .svc-field,
  .svc-group,
  .svc-prev,
  .svc-delta,
  .svc-read{transition:none;}
  .svc-coin,
  [data-action-state="owner-direct"] .svc-coin{display:none;animation:none;}
  .svc-bar::after,
  [data-action-state="marketer-retarget"] .svc-bar::after{transition:none;}
  [data-action-state="marketer-retarget"] .svc-bar::after{transform:scaleX(1);}
}

/* ===== 07 · the undertaking sheet (19 Aug) =================================
   The section used to be a kicker, three ticks and a stamp on an empty cream
   field. The promise it now carries is a money promise, so the panel is set as
   the document that promise would actually live in: letterhead, two numbered
   clauses, the inclusions the agreement covers, and an authorisation line the
   stamp lands on. Section 04's m5 frame is the illustrative version of the same
   idea, so nothing of its vocabulary is reused here: no rosette, no corner
   brackets, no progress track, no ghost word behind the type, no handwriting.
   What both share is only the house stock, the gold rule work and the ink
   stamp, which is what makes them read as two documents from one company. */
.refine-v15 .pledge .sec-head{max-width:none}
.refine-v15 .pl-sub{
  margin-top:16px;
  max-width:760px;
  color:#8a651f;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(16px,1.9vw,22px);
  line-height:1.7;
}

.refine-v15 .pledge-panel{
  display:block;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3.6vw,52px) clamp(28px,3.2vw,42px);
  max-width:880px;
  margin-inline:auto;
}
/* laid stock. The tile is one turbulence field, so the grain does not repeat on
   a visible pitch the way a hand-placed speckle layer does. */
.refine-v15 .pledge-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
}
.refine-v15 .pledge-panel>*{position:relative;z-index:1}

/* --- letterhead --- */
.refine-v15 .pl-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.refine-v15 .pl-mark{display:inline-flex;align-items:center;gap:11px}
.refine-v15 .pl-mark img{display:block;width:32px;height:29px}
.refine-v15 .pl-mark b{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(15px,1.6vw,19px);
  color:var(--ink);
  letter-spacing:-.01em;
}
.refine-v15 .pl-ref{
  font:700 12px/1 Almarai,sans-serif;
  color:#a08a5c;
}
/* the double rule under a letterhead is two weights, not one line twice: the
   heavy one carries the eye, the hair under it is what makes it read engraved */
.refine-v15 .pl-rule{display:block;margin:16px 0 clamp(26px,3vw,38px)}
.refine-v15 .pl-rule i{
  display:block;
  height:1.5px;
  background:rgba(185,138,46,.62);
  transform-origin:right center;
}
.refine-v15 .pl-rule i+i{margin-top:3.5px;height:1px;background:rgba(185,138,46,.28)}

/* --- clauses --- */
.refine-v15 .pl-clauses{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(32px,3.6vw,46px);
}
.refine-v15 .pl-clause{
  display:block;
}
/* a written undertaking numbers its clauses in words, not in circled badges:
   the ordinal is set as inked type with a short rule running off it */
.refine-v15 .pl-n{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(10px,1.1vw,14px);
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(13px,1.3vw,15.5px);
  line-height:1;
  letter-spacing:.01em;
  color:#8a651f;
}
.refine-v15 .pl-n::after{
  content:"";
  flex:0 0 auto;
  width:clamp(40px,5.4vw,72px);
  height:1.5px;
  background:rgba(185,138,46,.5);
}
.refine-v15 .pl-clause b{
  display:block;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(21px,2.5vw,30px);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink);
}
.refine-v15 .pl-clause div span{
  display:block;
  margin-top:9px;
  font:400 clamp(14.5px,1.5vw,17px)/1.85 Almarai,sans-serif;
  color:#5f5a6e;
}

/* --- what the agreement covers --- */
.refine-v15 .pl-incl{margin-top:clamp(28px,3.2vw,40px)}
.refine-v15 .pl-incl-lab{
  display:flex;
  align-items:center;
  gap:14px;
  font:700 12px/1 Almarai,sans-serif;
  color:#a08a5c;
  white-space:nowrap;
}
.refine-v15 .pl-incl-lab::before,
.refine-v15 .pl-incl-lab::after{
  content:"";
  height:1px;
  background:rgba(185,138,46,.3);
}
.refine-v15 .pl-incl-lab::before{width:0;flex:0 0 auto}
.refine-v15 .pl-incl-lab::after{flex:1 1 auto}
.refine-v15 .pl-incl .pl-list{
  /* a schedule of inclusions is a list, not a three-up grid: at this measure
     the three-column version broke every line mid-phrase */
  margin-top:clamp(16px,1.8vw,22px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(11px,1.2vw,15px);
}
.refine-v15 .pl-incl .pl-item{align-items:center;gap:13px}
.refine-v15 .pl-incl .pl-item b{
  font-family:Almarai,sans-serif;
  font-weight:700;
  font-size:clamp(14.5px,1.5vw,17px);
  line-height:1.65;
  color:#3d3854;
}
/* the tick was a filled gold ball with its own drop shadow, which on a paper
   panel read as a button. On a document it is a checked box: a hairline ring
   and an ink mark. */
.refine-v15 .pl-check{
  width:25px;
  height:25px;
  margin-top:2px;
  background:none;
  border:1.4px solid rgba(185,138,46,.62);
  box-shadow:none;
}
.refine-v15 .pl-check svg{width:13px;height:10px}
.refine-v15 .pl-check path{stroke:#8a651f;stroke-width:2.4}

/* --- authorisation --- */
.refine-v15 .pl-sign{
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid rgba(185,138,46,.24);
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:clamp(16px,2.2vw,32px);
}
.refine-v15 .pl-auth{flex:1 1 auto;min-width:0;padding-bottom:4px}
.refine-v15 .pledge-panel .pl-faza{
  margin:0 0 16px;
  padding:0;
  border:0;
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:clamp(16px,1.7vw,20px);
  font-weight:800;
  color:#8a651f;
}
.refine-v15 .pl-authline{
  display:block;
  width:100%;
  height:1.5px;
  background:rgba(24,20,48,.42);
  transform-origin:right center;
}
.refine-v15 .pl-authby{
  display:block;
  margin-top:9px;
  font:700 12.5px/1 Almarai,sans-serif;
  color:#6f6a80;
}
.refine-v15 .pl-authby i{
  display:inline-block;
  width:3px;
  height:3px;
  margin:0 7px;
  border-radius:50%;
  background:#c9a338;
  vertical-align:middle;
}
.refine-v15 .pl-sign .seal-zone{
  position:absolute;
  inset-inline-end:0;
  bottom:clamp(-42px,-3.2vw,-26px);
  width:clamp(128px,12.8vw,164px);
}

/* fine print. A document that promises money back says where the numbers are
   written down, and the dashed rule is the convention for it. */
.refine-v15 .pl-fine{
  margin:clamp(54px,5.2vw,68px) 0 0;
  /* the rule runs the full sheet and the stamp sits over its far end; the text
     stops short of the stamp so nothing is read through ink */
  padding:13px 0 0 clamp(150px,14.4vw,186px);
  border-top:1px dashed rgba(185,138,46,.34);
  font:400 12.5px/1.8 Almarai,sans-serif;
  color:#8d879c;
}

/* --- reveal: the sheet is written, then signed, then stamped --- */
.js .refine-v15 .pl-rule i,
.js .refine-v15 .pl-authline{transform:scaleX(0)}
.refine-v15 .pledge-panel.in .pl-rule i{transition:transform .72s var(--ez) .08s;transform:none}
.refine-v15 .pledge-panel.in .pl-rule i+i{transition-delay:.2s}
.refine-v15 .pledge-panel.in .pl-authline{transition:transform .6s var(--ez) .74s;transform:none}
.js .refine-v15 .pl-clause{opacity:0;transform:translateY(16px)}
.refine-v15 .pledge-panel.in .pl-clause{
  opacity:1;
  transform:none;
  transition:opacity .38s cubic-bezier(.23,1,.32,1),transform .46s var(--ez);
}
.refine-v15 .pledge-panel.in .pl-clause:nth-child(1){transition-delay:.26s}
.refine-v15 .pledge-panel.in .pl-clause:nth-child(2){transition-delay:.38s}
.js .refine-v15 .pl-incl-lab{opacity:0}
.refine-v15 .pledge-panel.in .pl-incl-lab{opacity:1;transition:opacity .4s ease .5s}
.refine-v15 .pledge-panel.in .pl-item:nth-child(1){transition-delay:.54s}
.refine-v15 .pledge-panel.in .pl-item:nth-child(2){transition-delay:.62s}
.refine-v15 .pledge-panel.in .pl-item:nth-child(3){transition-delay:.7s}
.refine-v15 .pledge-panel.in .pl-faza{transition-delay:.66s}
/* the stamp lands last, after the line it is stamped over has been drawn */
.refine-v15 .pledge-panel.in .seal-tilt{animation-delay:1.02s}
.refine-v15 .pledge-panel.in .seal-pulse{animation-delay:1.18s}
.js .refine-v15 .pl-fine{opacity:0}
.refine-v15 .pledge-panel.in .pl-fine{opacity:1;transition:opacity .5s ease 1.32s}
.refine-v15 .seal-knurl{stroke:#4f41bd;stroke-width:2.2;stroke-linecap:butt}

@media (max-width:860px){
  .refine-v15 .pledge-panel{max-width:none}
  .refine-v15 .pl-sign{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  /* the stacked seal used to open the panel, so it kept order:-1 and auto
     side margins from the old two-column layout. It now belongs to the
     signature, so it follows the line and lands on its far end. */
  .refine-v15 .pl-sign .seal-zone{
    position:static;
    order:0;
    align-self:flex-end;
    margin-inline:0 clamp(6px,2.4vw,14px);
    margin-top:clamp(-58px,-12vw,-38px);
    width:min(142px,38vw);
  }
  .refine-v15 .pl-fine{margin-top:clamp(24px,4vw,32px);padding-inline:0}
}
@media (max-width:520px){
  .refine-v15 .pl-head{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .js .refine-v15 .pl-rule i,
  .js .refine-v15 .pl-authline{transform:none}
  .js .refine-v15 .pl-clause{opacity:1;transform:none}
  .js .refine-v15 .pl-incl-lab{opacity:1}
  .js .refine-v15 .pl-fine{opacity:1}
}

/* Final responsive guardrails: keep the compact appearance, but make the two
   primary actions real touch targets and prevent the hero question from
   acquiring an extra line on the narrowest supported phone. */
.refine-v15 .nav-cta,
.refine-v15 .audience-cta{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
}
@media (max-width:340px){
  .refine-v15 .hero h1{font-size:34px;letter-spacing:-.03em}
}