/* ========================================================================
   Loyana — multi-page additions.
   site.css holds the original landing-page design system unchanged; this
   file adds the chrome and page types the multi-page site introduced.
   ======================================================================== */

/* ---------------- nav ----------------
   Page links live in the full-screen menu only — never in this bar. The
   wordmark is the way back to the home page from anywhere. */
.pill-mid{text-decoration:none;border-radius:100px;transition:opacity .25s}
.pill-mid:hover{opacity:.62}
.pill-mid:active{opacity:.5}
.pill-mid:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* keep the brand mark visible on small screens (site.css hides it at 960)
   and thin the pill out so everything fits without crowding */
@media(max-width:960px){
  .pill{max-width:none;gap:10px}
  .pill-mid{display:flex}
}
@media(max-width:600px){
  /* the bar keeps its original breathing room — the padding and gaps are
     the desktop ratios untouched. Only the sizes of the things inside come
     down, so it reads as a smaller bar rather than a squeezed one, and the
     nav gutter keeps it off the screen edges. */
  .nav{top:14px;padding:0 20px}
  /* 12px of vertical padding at the merchant's request — 7 made a 49px bar
     that read as a thin line under a shortened hero. Horizontal stays tight:
     the narrow widths need every pixel for the buttons. */
  .pill{padding:12px 7px 12px 15px;gap:8px}
  .pill .soc{display:none}          /* both socials are in the menu */
  .contact-btn{padding:9px 16px;font-size:12.5px}
  .pill-name{font-size:15.5px}
  .pill-logo{width:23px;height:23px}
  .langbtn{padding:5px 10px;font-size:11px}
  .menu-btn{width:30px;height:34px}
}

/* ---- hero on phone and tablet ----
   It ran 1060px on a 375px screen — 1.31 screens tall before you reached
   anything else. The copy block and the device were each about a third of
   it, and the two wallet badges stacked into 114px on their own. */
@media(max-width:960px){
  .hero-in{padding-top:100px}
  .h-copy{padding-bottom:24px}
  .mark{margin-bottom:14px}
  .mark span{font-size:22px}
  .mark svg{width:32px;height:32px}
  h1{font-size:clamp(1.75rem,7.2vw,2.3rem)}
  .h-sub{margin-top:13px;font-size:.94rem;line-height:1.65;max-width:none}
  .h-cta{margin-top:20px;gap:9px}
  .h-cta .btn{padding:12px 22px;font-size:14.5px}

  /* badges side by side instead of stacked */
  .wallets{margin-top:14px;flex-wrap:nowrap;gap:8px}
  .wbadge{flex:1 1 0;min-width:0;padding:7px 10px;gap:7px;border-radius:13px}
  .wbadge .wi{width:21px;height:21px}
  .wbadge small{font-size:9.5px}
  .wbadge b{font-size:12.5px}

  /* scale() shrinks the picture but not the box it reserves, so the pull-up
     has to absorb the leftover space by hand */
  .h-vis{padding-bottom:52px}
  .hero .devwrap{transform:scale(.58);margin-top:-256px}
}

/* a tablet has the room for a bigger device than a phone does */
@media(min-width:601px) and (max-width:960px){
  .hero-in{padding-top:120px}
  h1{font-size:clamp(2rem,4.8vw,2.7rem)}
  .h-sub{font-size:1.02rem;max-width:46ch}
  .h-cta .btn{padding:14px 28px;font-size:15.5px}
  .wallets{max-width:420px}
  .wbadge{padding:9px 14px}
  .wbadge .wi{width:24px;height:24px}
  .wbadge small{font-size:10.5px}
  .wbadge b{font-size:14px}
  .h-vis{padding-bottom:70px}
  .hero .devwrap{transform:scale(.76);margin-top:-182px}
}

/* landing page: grids that site.css never collapsed for small screens —
   .tcards stayed 4-up (66px slivers on a phone) and .pgrid stayed 2-up */
@media(max-width:1000px){
  .tcards{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .pgrid{grid-template-columns:1fr}
  .tcards{grid-template-columns:1fr}
  .demo{padding:40px 26px}
  .qrbox{width:100%;max-width:210px;height:auto;aspect-ratio:1;margin:0 auto}
}

/* ---- "why it matters" carousel on phone and tablet ----
   Three things were broken below 960px: the 01/04 badge floated on top of
   the heading, the card was too narrow, and the three-step flow collapsed
   to a single 685px column inside a fixed 268px window — losing 417px of
   itself to the crop. */
@media(max-width:960px){
  /* card fills the screen width and stays short, so it reads as a wide
     panel rather than a tall narrow strip */
  /* stretch, not flex-start — otherwise each card takes the height of its
     own paragraph and the row comes out ragged. The text block absorbs the
     difference so every card ends up the same height. */
  .dcards{gap:10px;align-items:stretch;
    padding-inline:14px;scroll-padding-inline:14px}
  .dcard{flex:0 0 94%;display:flex;flex-direction:column}
  .dcard-t{flex:1 1 auto}
  .dcard-v{flex:0 0 auto}

  /* badge joins the flow above the title instead of covering it */
  .dnum{position:relative;top:auto;inset-inline-start:auto;display:inline-block;
    align-self:flex-start;margin:16px 20px 0;z-index:6;padding:4px 11px;font-size:10.5px}
  .dcard-t{padding:10px 20px 16px}
  .dcard-t .hd{gap:8px;margin-bottom:7px}
  .dcard-t h3{font-size:1.02rem;letter-spacing:-.3px}
  .dcard-t p{font-size:12.8px;line-height:1.7}

  .dcard-v{height:185px}
  .dcard-v .dev{transform:scale(.35)!important;margin:-190px 0}
  .dcard-v .mac{transform:scale(.44)!important;margin:-150px 0}

  /* keep the three steps side by side and drop their captions — the
     paragraph above already explains them, and stacking made the card
     three screens tall */
  .dcard-v .flow{grid-template-columns:repeat(3,1fr)!important;
    transform:scale(.5)!important;margin:0;width:560px;max-width:none;padding:0;gap:8px}
  .dcard-v .fstep{padding:14px 8px}
  .dcard-v .fstep p{display:none}
  .dcard-v .fstep .vz{min-height:200px;margin-bottom:0}
}

/* The pill bar's action is a link now, not a button, so it needs the bits a
   <button> got for free. */
a.contact-btn{display:inline-block;text-decoration:none;line-height:1.35}
a.contact-btn:hover{color:#fff}

/* No visible scrollbar anywhere — desktop included, not just phone and tablet.
   Scrolling itself is untouched: wheel, trackpad swipe, touch drag, keyboard
   and programmatic scrolling all behave exactly as before; only the painted
   bar is gone. Applied to every element, because a scrollbar inside a card or
   a menu looks just as out of place as one down the side of the page. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

/* Android paints a blue box over whatever you tap — a selection the user did
   not make, unstylable, and only removable. Our own :active states already
   give the feedback it was standing in for. */
*{-webkit-tap-highlight-color:transparent}

/* The wordmark takes the brand colour on hover and nothing else. Behind a
   hover query so a phone does not leave it stuck red after a tap. */
/* The mark and the wordmark move together. Colouring only the text left the
   triangle looking greyed-out beside a red word, which reads as disabled
   rather than as hovered. Opacity is pinned at 1 in every state so nothing
   can fade it — a logo that dims on press looks like a broken button. */
.pill-name,.pill-logo{transition:color .2s}
.pill-mid,.pill-mid:hover,.pill-mid:active,.pill-mid:focus{
  text-decoration:none;opacity:1;
}
.pill-mid:active .pill-name,.pill-mid:active .pill-logo{color:var(--red);opacity:1}
@media (hover:hover){
  .pill-mid:hover .pill-name,.pill-mid:hover .pill-logo{color:var(--red);opacity:1}
}

/* The bar overflows on very narrow screens, and the cause is one measurement:
   "تسجيل الدخول" is about 45px wider than the "تواصل معنا" button it replaced.
   Below 360px the pieces need 312px and have 279px.

   So only the label shrinks, and only there. An earlier attempt resized the
   whole bar under 430px — that covers nearly every phone, changed how the site
   looks for everyone, and was reverted. Both labels are real text so the
   English dictionary still finds them. */
/* Only the rail reaches the glass — the sections stay in their frame.

   The frame insets the whole page by 10px and clips with overflow:hidden, so
   nothing inside can touch the screen edge. Removing it outright did let the
   rail bleed, but it also flattened every section against both edges and their
   designs lost the margin they were drawn with. So the frame keeps its inset
   and simply stops clipping; the rail then reaches the edge on its own by
   pulling out past both the wrap's gutter and the frame's margin. Horizontal
   overflow is already contained by body{overflow-x:hidden}. */
@media(max-width:900px){
  .frame{overflow:visible}
  /* Both side-scrolling rails pull out to the glass. The fan sits inside
     .wrap so it clears 26px of gutter plus the frame's 10px; .dcards is a
     direct child of its section so it only has the frame's 10px to clear.
     The inner padding keeps the same visual gutter the cards had before. */
  .fan{margin-inline:-36px;padding-inline:36px}
  .dcards{margin-inline:-10px;padding-inline:36px;scroll-padding-inline:36px}
}

.lbl-short{display:none}
@media(max-width:360px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
  /* the last few pixels: measured 245 needed against 239 available */
  .pill{padding-left:11px;gap:7px}
}

/* ---------------- full-screen menu ---------------- */
.navmenu{position:fixed;inset:0;z-index:500;display:none}
.navmenu.on{display:block}
.nm-bg{position:absolute;inset:0;background:rgba(6,4,6,.55);backdrop-filter:blur(5px);animation:fadeIn .3s ease}
.nm-card{position:absolute;inset:10px;background:var(--blk);border-radius:36px;overflow:auto;
  animation:nmIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes nmIn{from{opacity:0;transform:translateY(-16px) scale(.985)}to{opacity:1;transform:none}}
.nm-x{position:absolute;top:26px;inset-inline-end:26px;width:46px;height:46px;border:1.5px solid #262626;
  background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;z-index:3;
  transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.nm-x:hover{border-color:#fff;transform:rotate(90deg)}
.nm-x svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.nm-in{min-height:100%;max-width:1120px;margin:0 auto;padding:120px 40px 60px;
  display:grid;grid-template-columns:1.7fr 1fr;gap:50px;align-items:center}
.nm-primary{display:flex;flex-direction:column;gap:4px}
.nm-link{display:flex;align-items:baseline;gap:18px;color:#fff;text-decoration:none;
  font-size:clamp(1.9rem,5vw,3.3rem);font-weight:800;letter-spacing:-1.4px;line-height:1.5;
  opacity:.62;transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.nm-link:hover{opacity:1;transform:translateX(-10px)}
[dir="ltr"] .nm-link:hover{transform:translateX(10px)}
.nm-n{font-size:12px;font-weight:500;color:var(--red);letter-spacing:1.6px;flex-shrink:0}
.nm-side{border-inline-start:1px solid #1E1E1E;padding-inline-start:40px}
.nm-lab{font-family:'Poppins',sans-serif;font-size:10.5px;letter-spacing:2.6px;color:#5E5E68;
  margin:26px 0 10px}
.nm-lab:first-child{margin-top:0}
.nm-side a{display:block;color:#9A9AA2;text-decoration:none;font-size:14.5px;padding:5px 0;
  transition:color .25s}
.nm-side a:hover{color:#fff}
body[data-page="home"]    .nm-link[data-nav="home"],
body[data-page="pricing"] .nm-link[data-nav="pricing"],
body[data-page="faq"]     .nm-link[data-nav="faq"],
body[data-page="contact"] .nm-link[data-nav="contact"]{opacity:1}
body[data-page="privacy"] .nm-side [data-nav="privacy"],
body[data-page="terms"]   .nm-side [data-nav="terms"]{color:#fff}
@media(max-width:820px){
  .nm-in{grid-template-columns:1fr;gap:34px;padding:104px 30px 50px;align-items:start}
  .nm-side{border-inline-start:0;border-top:1px solid #1E1E1E;padding-inline-start:0;padding-top:26px}
}

/* ---------------- page hero (inner pages) ---------------- */
.phero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:14px;
  background:#3A0810;padding:178px 0 84px;text-align:center}
.phero .ph{position:absolute;inset:0;background-size:cover;background-position:center}
/* The brand red over the photo, not the old maroon (29 Sep 2026) — the same
   shade as the closing section. The dark layer that deepened it is off. */
.phero .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,41,79,.8),rgba(250,41,79,.9))}
.phero .dark{display:none}
.phero .wrap{position:relative}
.phero .peyebrow{font-family:'Poppins',sans-serif;font-size:11.5px;letter-spacing:3.4px;
  color:rgba(255,255,255,.6);margin-bottom:18px}
.phero h1{max-width:20ch;margin:0 auto;text-align:center}
.phero .psub{margin:20px auto 0;max-width:52ch;color:rgba(255,255,255,.92);font-weight:300;
  font-size:1.04rem;line-height:1.8}
.phero .h-cta{justify-content:center;margin-top:30px}
@media(max-width:960px){.phero{padding:150px 0 64px}}

/* section heading aligned to the start rather than centred */
.h-start{text-align:start;max-width:none;margin:0}

/* ---------------- billing period toggle ---------------- */
.billing-wrap{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:38px}
.billing{display:inline-flex;background:var(--gray);border-radius:100px;padding:5px;gap:3px}
.bill-opt{border:0;background:none;border-radius:100px;padding:11px 24px;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink2);
  white-space:nowrap;transition:background .35s cubic-bezier(.16,1,.3,1),color .3s,box-shadow .35s}
body.lang-en .bill-opt{font-family:'Poppins',sans-serif;font-weight:500}
.bill-opt:hover{color:var(--ink)}
.bill-opt.on{background:var(--white);color:var(--ink);box-shadow:0 5px 16px -5px rgba(0,0,0,.3)}
.bill-opt:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bill-hint{font-size:13.5px;font-weight:700;color:var(--red);text-align:center}
@media(max-width:520px){
  .billing{width:100%;justify-content:stretch}
  .bill-opt{flex:1;padding:11px 10px;font-size:13.5px}
}

/* the single plan card the toggle drives */
.planbox{background:var(--blk);border-radius:26px;padding:34px 32px 30px;color:#fff;position:relative;
  max-width:400px;margin:26px auto 0}
.planbox .plabel{color:#9A9AA2;font-size:13px}
.planbox .pamount{display:flex;align-items:baseline;gap:8px;direction:ltr;justify-content:center;margin:8px 0 6px}
.planbox .pamount span{font-family:'Poppins',sans-serif;font-size:3.1rem;font-weight:600;
  letter-spacing:-2.2px;line-height:1;color:var(--amber)}
.planbox .pamount small{color:#9A9AA2;font-size:13px}
.planbox .pnote{color:#9A9AA2;font-size:13.5px;font-weight:300;min-height:22px}
.planbox .btn{width:100%;margin-top:22px}
.planbox,.planbox .plabel,.planbox .pnote{text-align:center}
.planbox .plan-save{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--amber);color:#2A1A00;border-radius:100px;padding:4px 14px;font-size:11.5px;font-weight:700}
[dir="ltr"] .planbox .plan-save{transform:translateX(-50%)}

/* ---------------- pricing page ---------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:48px;align-items:stretch}
.plan{position:relative;background:var(--white);border:1px solid var(--line);border-radius:26px;
  padding:32px 28px 28px;display:flex;flex-direction:column;
  transition:border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.plan:hover{border-color:#C9CDD4;transform:translateY(-5px)}
.plan.best{background:var(--blk);border-color:var(--blk)}
.plan.best:hover{border-color:var(--blk)}
.plan-term{font-size:13px;color:var(--ink3);font-weight:500}
.plan.best .plan-term{color:#9A9AA2}
.plan-amt{display:flex;align-items:baseline;gap:8px;direction:ltr;justify-content:flex-end;margin:10px 0 4px}
[dir="ltr"] .plan-amt{justify-content:flex-start}
.plan-amt span{font-family:'Poppins',sans-serif;font-size:2.85rem;font-weight:600;letter-spacing:-2px;
  line-height:1;color:var(--ink)}
.plan.best .plan-amt span{color:var(--amber)}
.plan-amt small{color:var(--ink3);font-size:13px}
.plan.best .plan-amt small{color:#9A9AA2}
.plan-note{color:var(--ink2);font-size:13.5px;font-weight:300;min-height:38px}
.plan.best .plan-note{color:#9A9AA2}
.plan .btn{margin-top:22px;width:100%;padding:12px 20px;font-size:14px}
.plan-save{position:absolute;top:-11px;inset-inline-start:24px;background:var(--amber);color:#2A1A00;
  border-radius:100px;padding:4px 13px;font-size:11.5px;font-weight:700}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

.incl{margin-top:14px;background:var(--white);border:1px solid var(--line);border-radius:26px;padding:36px 34px}
.incl h3{font-size:1.15rem;font-weight:800;letter-spacing:-.5px;margin-bottom:20px}
.incl ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
.incl li{display:flex;align-items:flex-start;gap:10px;color:var(--ink2);font-size:14.5px;
  font-weight:300;line-height:1.6}
.incl svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;flex-shrink:0;margin-top:4px}
@media(max-width:760px){.incl ul{grid-template-columns:1fr}}

/* ---------------- FAQ ---------------- */
.faq-list{max-width:840px;margin:40px auto 0;display:grid;gap:9px}
.faq-cat{max-width:840px;margin:52px auto 0;font-family:'Poppins',sans-serif;font-size:11px;
  letter-spacing:3px;color:var(--ink3);text-align:start}
.faq-cat:first-of-type{margin-top:44px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:border-color .35s}
.faq-item.on{border-color:#C9CDD4}
.faq-q{width:100%;background:none;border:0;text-align:start;padding:19px 24px;cursor:pointer;
  display:flex;align-items:center;gap:16px;font-family:'Tajawal',sans-serif;font-size:1.01rem;
  font-weight:700;color:var(--ink);line-height:1.6}
body.lang-en .faq-q{font-family:'Poppins',sans-serif;font-weight:600}
.faq-q .fic{margin-inline-start:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--gray);display:grid;place-items:center;transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.faq-q .fic svg{width:12px;height:12px;stroke:var(--ink2);fill:none;stroke-width:2.4;stroke-linecap:round}
.faq-item.on .fic{background:var(--red);transform:rotate(45deg)}
.faq-item.on .fic svg{stroke:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.faq-item.on .faq-a{max-height:620px}
.faq-a p{padding:0 24px 21px;color:var(--ink2);font-size:15px;font-weight:300;line-height:1.9;margin:0}
.faq-a p + p{padding-top:0;margin-top:-8px}

/* ---------------- legal pages (privacy / terms) ---------------- */
.legal{max-width:840px;margin:0 auto}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.legal-meta span{background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:7px 16px;font-size:12.5px;color:var(--ink2)}
.legal-intro{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px 28px;
  color:var(--ink2);font-size:15.5px;font-weight:300;line-height:1.9;margin-bottom:14px}
.toc{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px 28px;margin-bottom:40px}
.toc p{font-family:'Poppins',sans-serif;font-size:10.5px;letter-spacing:2.4px;color:var(--ink3);margin-bottom:12px}
.toc ol{margin:0;padding-inline-start:20px;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.toc a{color:var(--ink2);text-decoration:none;font-size:14px;transition:color .25s}
.toc a:hover{color:var(--red)}
@media(max-width:700px){.toc ol{grid-template-columns:1fr}}
.legal section{scroll-margin-top:110px}
.legal h2{text-align:start;max-width:none;margin:40px 0 14px;font-size:1.32rem;font-weight:800;
  letter-spacing:-.6px;line-height:1.45;display:flex;gap:12px;align-items:baseline}
.legal h2 i{font-style:normal;font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;
  color:var(--red);flex-shrink:0}
.legal h3{font-size:1.02rem;font-weight:700;margin:22px 0 8px}
.legal p{color:var(--ink2);font-size:15.5px;font-weight:300;line-height:1.95;margin-bottom:13px}
.legal ul{margin:0 0 13px;padding-inline-start:20px;display:grid;gap:7px}
.legal li{color:var(--ink2);font-size:15.5px;font-weight:300;line-height:1.85}
.legal li b,.legal p b{color:var(--ink);font-weight:700}
.legal .callout{background:var(--white);border:1px solid var(--line);border-inline-start:3px solid var(--red);
  border-radius:16px;padding:18px 22px;margin:18px 0}
.legal .callout p{margin:0;font-size:14.5px}

/* ---------------- contact page ---------------- */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;margin-top:48px;align-items:start}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
.cform{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:34px 32px;
  scroll-margin-top:110px}
.cform h3{font-size:1.25rem;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.cform > p{color:var(--ink2);font-size:14.5px;font-weight:300;margin-bottom:22px}
.cform label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:14px}
.cform input,.cform textarea{width:100%;margin-top:7px;background:var(--soft);border:1.5px solid var(--line);
  border-radius:13px;padding:11px 14px;font-family:'Tajawal',sans-serif;font-size:14.5px;font-weight:400;
  color:var(--ink);outline:0;transition:border-color .25s,background .25s}
body.lang-en .cform input,body.lang-en .cform textarea{font-family:'Poppins',sans-serif}
.cform input:focus,.cform textarea:focus{border-color:var(--ink);background:var(--white)}
.cform input.bad,.cform textarea.bad{border-color:var(--red)}
.cform textarea{resize:vertical;min-height:118px;line-height:1.7}
.cform .modal-err{margin-bottom:10px}
.cform .modal-send{font-size:15px;padding:13px}
.cform .modal-to{margin-top:12px;font-size:12.5px}
.cchan{display:grid;gap:11px}
.chan{display:flex;align-items:center;gap:15px;background:var(--white);border:1px solid var(--line);
  border-radius:20px;padding:20px 22px;text-decoration:none;
  transition:border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.chan:hover{border-color:#C9CDD4;transform:translateY(-4px)}
.chan .ci{width:44px;height:44px;border-radius:13px;background:var(--gray);display:grid;place-items:center;
  flex-shrink:0;color:var(--ink)}
.chan .ci svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chan .ci.wa{background:#25D366;color:#0A2E17}
.chan .ci.wa svg{fill:currentColor;stroke:none;width:22px;height:22px}
.chan b{display:block;font-size:15px;font-weight:700;letter-spacing:-.2px}
.chan small{display:block;color:var(--ink3);font-size:13px;font-weight:300;margin-top:2px}
.chan .cv{min-width:0}
.chan .cv span{display:block;color:var(--ink2);font-size:13px;margin-top:3px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:48px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px 26px}
.step .sn{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:1.8px;color:var(--red);margin-bottom:14px}
.step h3{font-size:1.08rem;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.step p{color:var(--ink2);font-size:14.5px;font-weight:300;line-height:1.75}

/* footer stays the original centred block — site navigation lives in the
   nav menu only, not duplicated into footer link columns */

/* ---------------- shared small bits ---------------- */
.morelink{text-align:center;margin-top:30px}
.morelink a{color:var(--ink2);font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:3px;transition:color .25s,border-color .25s}
.morelink a:hover{color:var(--red);border-color:var(--red)}
.block.black .morelink a{color:#9A9AA2;border-color:#242424}
.block.black .morelink a:hover{color:#fff;border-color:#fff}

.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:46px}
@media(max-width:820px){.mini{grid-template-columns:1fr}}
.mini .m{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px 26px}
.mini .m .ic{width:42px;height:42px;border-radius:12px;background:var(--gray);display:grid;place-items:center;margin-bottom:16px}
.mini .m .ic svg{width:20px;height:20px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini .m h3{font-size:1.06rem;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.mini .m p{color:var(--ink2);font-size:14.5px;font-weight:300;line-height:1.75}


/* --------------------------------------------------------------------------
   Arabic letters JOIN.

   Any positive letter-spacing prises them apart, so a label styled like a
   Latin eyebrow — Poppins, 3.4px of tracking — arrives on an Arabic page as
   «ب ل ا  ت ك ا ل ي ف  م خ ف ي ة». Poppins carries no Arabic either, so the
   text was also falling back to whatever the system offered.

   These labels keep their tracking and their Latin face ONLY in English.
   Loaded from pages.css because it comes after site.css and one of the
   selectors is a compound that would otherwise win on specificity.
   -------------------------------------------------------------------------- */
.eyebrow,.pbiz-tag,.nm-lab,.awp-lab,.phero .peyebrow,.faq-cat,.toc p,
.pstrip-h,.ind-bd small,.mac-side p,.trow.hd{
  font-family:'Tajawal',system-ui,sans-serif;letter-spacing:0}
body.lang-en .eyebrow,body.lang-en .pbiz-tag,body.lang-en .nm-lab,
body.lang-en .awp-lab,body.lang-en .phero .peyebrow,body.lang-en .faq-cat,
body.lang-en .toc p,body.lang-en .ind-bd small,body.lang-en .mac-side p,
body.lang-en .trow.hd{
  font-family:'Poppins',sans-serif}
body.lang-en .faq-cat{letter-spacing:3px}
body.lang-en .toc p{letter-spacing:2.4px}
body.lang-en .ind-bd small{letter-spacing:.6px}
body.lang-en .trow.hd{letter-spacing:.5px}
body.lang-en .eyebrow,body.lang-en .phero .peyebrow{letter-spacing:3.4px}
body.lang-en .nm-lab{letter-spacing:2.6px}
body.lang-en .awp-lab{letter-spacing:1.5px}
body.lang-en .pbiz-tag{letter-spacing:1.3px}