/* input(126,39): run-time error CSS1060: Expected closing curly-brace, found '@keyframes'
input(126,128): run-time error CSS1019: Unexpected token, found '}' */
/* UW-461: home Sahel app story (.sahel-story / .ss-*). Delivered by design as sahel-promo-section.html; the only
   changes are the backdrop read from --ss-img (set inline from the band's image) and a generic pan distance
   (--pan-dist, written by bcfc-sahel-story.js from each screen's own ratio). Never link from a view: bundle-main. */
/* ───────────────────────── tokens ───────────────────────── */
.sahel-story{
  --ss-bg:#0c2d27;
  --ss-yellow:var(--bcfc-yellow,#f3db6e);
  --ss-yellow-hi:var(--bcfc-yellow-light,#f9e99a);
  --ss-sahel:#002719;
  --ss-hdr:var(--bcfc-header-height,104px);
  --ss-vh:1vh;
  --ss-step:58;                                   /* scroll distance per chapter, in vh */
  --ss-ph:clamp(400px,130vw,540px);               /* phone height (mobile / tabs mode) */
  --ss-pw:calc(var(--ss-ph)*.4767);
  --ss-bz:calc(var(--ss-pw)*.032);
  --ss-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;width:100%;isolation:isolate;
  background:var(--bcfc-surface-sunken,#f7f7f7);
  color:#fff;font-family:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@supports (height:100svh){.sahel-story{--ss-vh:1svh}}
.sahel-story *,.sahel-story *::before,.sahel-story *::after{box-sizing:border-box}
.sahel-story img{max-width:100%}
.sahel-story a,.sahel-story button,.sahel-story p{text-transform:none}

/* ───────────────────────── frame ───────────────────────── */
.ss-track{
  position:relative;background:var(--ss-bg);overflow:clip;
  }
.ss-stage{position:relative;overflow:clip;isolation:isolate;padding:32px 0 0}
.ss-bg{
  position:absolute;inset:-160px 0;z-index:-2;pointer-events:none;transform:translate3d(0,var(--bgy,0px),0);will-change:transform;
  background:
    linear-gradient(90deg,rgba(7,36,28,.34),rgba(7,36,28,.08) 55%,rgba(7,36,28,0)),
    var(--ss-img,none) center/cover no-repeat,
    var(--ss-bg);
}
.ss-grid{display:flex;flex-direction:column;align-items:flex-start;max-width:560px;margin:0 auto}

/* ───────────────────────── intro ───────────────────────── */
.ss-logo{display:block;width:clamp(150px,16vw,200px);height:auto}
.ss-title{
  margin:clamp(20px,2.4vw,30px) 0 0;font-weight:700;line-height:1.04;letter-spacing:-.012em;
  font-size:clamp(2.35rem,1.2rem + 3.2vw,3.7rem);
}
.ss-line{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.ss-line>span{display:block;will-change:transform}
.ss-line>span{text-wrap:balance}
.ss-line--accent{color:var(--ss-yellow);font-weight:800}
.ss-lede{
  margin:20px 0 0;max-width:30ch;line-height:1.55;color:rgba(255,255,255,.9);
  font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);
}
.ss-cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  border-radius:999px;background:var(--ss-yellow);color:var(--ss-sahel);
  font:800 1rem/1 "Almarai",system-ui,sans-serif;text-decoration:none;
  transition:transform .2s var(--ss-ease),box-shadow .2s var(--ss-ease),background-color .2s;
}
.ss-btn:hover{background:var(--ss-yellow-hi);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(0,0,0,.5)}
.ss-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* button outline that wipes around the pill, then wipes away, on a loop */
.ss-btn{position:relative}
.ss-btn__label{position:relative}
.ss-btn__ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.ss-btn__ring rect{
  fill:none;stroke:#fff;stroke-opacity:.9;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:ss-wipe 3.8s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes ss-wipe{
  0%{stroke-dashoffset:1}
  44%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-1}
}

/* ───────────────────────── device ───────────────────────── */
.ss-device{position:relative;display:grid;place-items:center;align-self:center;margin:46px auto 38px;touch-action:pan-y}
.ss-glow{
  position:absolute;left:50%;top:50%;width:calc(var(--ss-ph)*1.05);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(243,219,110,.2),rgba(169,219,200,.07) 55%,transparent);
  pointer-events:none;
}
.ss-ring{
  position:absolute;left:50%;top:50%;width:calc(var(--ss-ph)*1.38);aspect-ratio:1;translate:-50% -50%;
  overflow:visible;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.35) 70%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.35) 70%,transparent 100%);
}
.ss-ring g{transform-box:view-box;transform-origin:50% 50%}
.ss-ring .rotor{transform:rotate(calc(var(--p,0)*38deg))}
.ss-ring .rotor--far{transform:rotate(calc(var(--p,0)*-24deg)) scale(1.42)}
.ss-ring circle{
  fill:none;stroke:rgba(255,255,255,.2);stroke-width:.55;
  stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke .6s,fill .6s,stroke-width .6s,stroke-dashoffset 1.7s var(--ss-ease);
}
.ss-ring .rotor--far circle{stroke:rgba(255,255,255,.08);stroke-width:.4}
.ss-ring .petal.is-done{stroke:rgba(243,219,110,.5)}
.ss-ring .petal.is-on{stroke:var(--ss-yellow);stroke-width:.8;fill:rgba(243,219,110,.1)}
.sahel-story.has-js:not(.is-in) .ss-ring circle{stroke-dashoffset:1}

.ss-tilt{
  position:relative;transform-style:preserve-3d;
  transform:perspective(1500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ss-ease);
}
.ss-phone{
  position:relative;width:var(--ss-pw);padding:var(--ss-bz);
  border-radius:calc(var(--ss-pw)*.13 + var(--ss-bz));
  background:linear-gradient(150deg,#22332c 0%,#070d0a 45%,#1a2922 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 1.5px #09110d,
    0 60px 90px -28px rgba(0,0,0,.6),
    0 24px 40px -14px rgba(0,0,0,.4);
}
/* the phone floats gently, all the time */
.ss-phone{animation:ss-float 6.5s ease-in-out infinite;will-change:translate,rotate}
@keyframes ss-float{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 -14px;rotate:.7deg}
}
@media not all and (min-width:1000px){@keyframes ss-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:.5deg}}}
.ss-phone::before,.ss-phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#16221c}
.ss-phone::before{inset-inline-start:-3px;top:17%;height:7%;box-shadow:0 calc(var(--ss-pw)*.2) 0 #16221c}
.ss-phone::after{inset-inline-end:-3px;top:25%;height:12%}
.ss-screen{
  position:relative;aspect-ratio:620/1347;overflow:hidden;background:#fff;
  border-radius:calc(var(--ss-pw)*.13);
}
.ss-screen::after{                                    /* soft glass sheen */
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 32%);
}
.ss-island{
  position:absolute;z-index:5;left:50%;translate:-50% 0;top:calc(var(--ss-pw)*.034);
  width:calc(var(--ss-pw)*.27);height:calc(var(--ss-pw)*.078);border-radius:99px;background:#020403;
}
.ss-shot{
  position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transform:translate3d(0,3%,0);
  transition:opacity .55s var(--ss-ease),transform .7s var(--ss-ease),visibility 0s .7s;
}
.ss-shot.is-before{transform:translate3d(0,-3%,0)}
.ss-shot.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ss-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ss-shot--pan img{height:auto;transform:translate3d(0,calc(var(--pan,0)*var(--pan-dist,0%)),0);transition:transform .15s linear}

/* ───────────────────────── chapters ───────────────────────── */
.ss-chapters{position:relative;width:100%;max-width:440px;padding-inline-start:48px;margin:0}
.ss-chapters::before,.ss-chapters__fill{
  content:"";position:absolute;inset-inline-start:14px;top:var(--y0,24px);height:var(--span,100px);
  width:2px;border-radius:2px;background:rgba(255,255,255,.18);
}
.ss-chapters__fill{background:var(--ss-yellow);transform-origin:top;transform:scaleY(var(--fill,0));transition:transform .5s var(--ss-ease)}
.ss-chap{
  appearance:none;-webkit-appearance:none;position:relative;display:block;width:100%;margin:0;padding:12px 0;
  background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:pointer;opacity:.62;
  transition:opacity .4s;
}
.ss-chap:hover{opacity:.9}
.ss-chap[aria-current="true"]{opacity:1}
.ss-chap:focus-visible{outline:2px solid var(--ss-yellow);outline-offset:4px;border-radius:10px}
.ss-chap__dot{
  position:absolute;inset-inline-start:-48px;top:10px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:rgba(255,255,255,.7);
  background:var(--ss-bg);border:2px solid rgba(255,255,255,.34);
  transition:background-color .4s,border-color .4s,box-shadow .4s,color .4s;
}
.ss-chap__dot svg{display:block;width:15px;height:15px}
.ss-chap[aria-current="true"] .ss-chap__dot{background:var(--ss-yellow);border-color:var(--ss-yellow);color:var(--ss-sahel);box-shadow:0 0 0 6px rgba(243,219,110,.18)}
.ss-chap__title{display:block;font-weight:700;font-size:clamp(1.12rem,.9rem + .5vw,1.4rem);line-height:1.3}
.ss-chap__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ss-ease)}
.ss-chap[aria-current="true"] .ss-chap__more{grid-template-rows:1fr}
.ss-chap__text{display:block;margin:0;min-height:0;overflow:hidden;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.86)}
.ss-chap__text::before{content:"";display:block;height:8px}

/* ───────────────────────── entrance (plays once) ───────────────────────── */
.sahel-story.has-js:not(.is-in) .ss-line>span{transform:translate3d(0,108%,0)}
.sahel-story.has-js:not(.is-in) .ss-fade{opacity:0}
.sahel-story.has-js:not(.is-in) .ss-device{opacity:0;transform:translate3d(0,70px,0) scale(.95)}
.ss-line>span{transition:transform 1s var(--ss-ease) var(--d,0s)}
.ss-fade{transition:opacity .9s ease var(--d,0s)}
.ss-device{transition:opacity .9s ease .15s,transform 1.1s var(--ss-ease) .15s}

/* ───────────────────────── size: matches the old __inner footprint ───────────────────────── */
.ss-ring .rotor{transition:transform .6s var(--ss-ease)}
.ss-chapters{margin-inline-end:auto}
@media (min-width:700px){.ss-grid{max-width:600px}}
@media (min-width:1000px){
  .sahel-story{--ss-ph:468px}
  .ss-grid{
    display:grid;width:min(100%,1440px);max-width:none;min-height:540px;padding:36px 72px;
    align-content:center;align-items:center;
    grid-template-columns:minmax(0,1.08fr) auto minmax(0,1fr);
    grid-template-areas:"intro device chapters" "cta device chapters";
    column-gap:clamp(28px,3.5vw,64px);
  }
  .ss-intro{grid-area:intro;align-self:end}
  .ss-cta{grid-area:cta;align-self:start;margin-top:26px}
  .ss-device{grid-area:device;margin:0}
  .ss-chapters{grid-area:chapters;justify-self:end;width:min(100%,420px);margin-inline-end:0}
  .ss-ring{width:calc(var(--ss-ph)*1.55)}
  .ss-title{font-size:clamp(2.1rem,.7rem + 2.3vw,3.05rem)}
  }
@media not all and (min-width:1000px){
  .sahel-story{--ss-ph:clamp(380px,118vw,500px)}
  .ss-grid{padding:24px 20px 44px}
  .ss-device{margin:30px auto 26px}
}

/* ───────────────────────── mobile & tablet: centred, one screen, floating feature pills ───────────────────────── */
.ss-caption{display:none}
@media not all and (min-width:1000px){
  .sahel-story{--ss-ph:clamp(340px,98vw,440px)}
  .ss-stage{padding-top:20px}
  .ss-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:16px 20px 34px}
  .ss-intro{display:flex;flex-direction:column;align-items:center}
  .ss-logo{margin-inline:auto;width:clamp(140px,40vw,180px)}
  .ss-title{font-size:clamp(2rem,8.6vw,2.7rem)}
  .ss-line--accent{text-transform:uppercase;letter-spacing:.045em;font-size:1.14em}
  .ss-lede{max-width:30ch;margin-inline:auto;font-size:1.0625rem}
  .ss-device{grid-row:2;grid-column:1;margin:26px auto 22px}
  .ss-chapters{grid-row:2;grid-column:1;position:relative;width:100%;max-width:420px;margin:0;padding:0;align-self:stretch;pointer-events:none}
  .ss-chapters::before,.ss-chapters__fill{display:none}
  .ss-chap{
    position:absolute;display:flex;align-items:center;gap:7px;width:max-content;min-height:0;min-width:0;max-width:138px;padding:3px 13px 3px 3px;
    border-radius:999px;background:rgba(243,219,110,.93);color:var(--ss-sahel);opacity:1;pointer-events:auto;
    box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
    transition:transform .4s var(--ss-ease),box-shadow .4s var(--ss-ease),background-color .4s;
  }
  .ss-chap:hover{opacity:1}
  .ss-chap::after{content:"";position:absolute;inset:-7px -4px}   /* invisible, keeps a 44px touch area */
  /* pills are anchored to the phone's own edges, so they overlap it by the same amount at every width */
  .ss-chap:nth-of-type(1){top:5%;right:calc(50% + var(--ss-pw)/2 - 46px)}
  .ss-chap:nth-of-type(2){top:27%;left:calc(50% + var(--ss-pw)/2 - 34px)}
  .ss-chap:nth-of-type(3){bottom:27%;right:calc(50% + var(--ss-pw)/2 - 40px)}
  .ss-chap:nth-of-type(4){bottom:15%;left:calc(50% + var(--ss-pw)/2 - 30px)}
  .ss-chap[aria-current="true"]{background:var(--ss-yellow);transform:scale(1.08);box-shadow:0 0 0 3px rgba(243,219,110,.3),0 12px 24px -10px rgba(0,0,0,.6)}
  .ss-chap__dot{position:static;flex:none;width:22px;height:22px;display:grid;place-items:center;border:0;background:var(--ss-sahel);color:var(--ss-yellow);box-shadow:none}
  .ss-chap[aria-current="true"] .ss-chap__dot{background:var(--ss-sahel);border:0;box-shadow:none;color:var(--ss-yellow)}
  .ss-chap__dot svg{display:block;width:11px;height:11px}
  .ss-chap__title{font-size:.66rem;line-height:1.15;text-align:start;text-wrap:balance;max-width:7.2em}
  .ss-chap__more{display:none}
  .ss-caption{display:block;grid-row:3;margin:0 0 20px;max-width:40ch;min-height:4.7em;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.92)}
  .ss-cta{grid-row:4;align-items:center;margin-top:0;gap:14px}
}

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sahel-story *,.sahel-story *::before,.sahel-story *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}

/* UW-464: Arabic letters must stay joined - no case transform, no tracking on the headline or the chapter pills */
:where(html[lang^="ar"],[dir="rtl"]) .sahel-story :is(.ss-title,.ss-line,.ss-line--accent,.ss-chap){text-transform:none;letter-spacing:normal}