/* ===== Final version: responsive, alignment and spacing fixes (2026-10-14) =====
   Layout-only overrides. No colors, copy, content or design changes.
   Inlined into every live page by shared/finalize.py (after the page CSS, so it wins at equal specificity). */

/* --- Line breaking: no single word left alone on a heading/lead line (all pages, AR + EN) --- */
h1,h2,h3,.h2,.sp-h1{text-wrap:balance}
p,.sp-lead,.kc>p{text-wrap:pretty}

/* --- Horizontal scrollers keep the page gutter when snapping (industries carousel, homepage + industries) --- */
@media (max-width:760px){.inds{scroll-padding-inline:var(--gutter)}}

/* --- Tablet: odd last card no longer sits alone in half a row --- */
@media (min-width:641px) and (max-width:1020px){
  .kgrid.k3>li:last-child:nth-child(odd),
  .in-flow.n5 .ksteps>li:last-child,
  .ft-flow>li:last-child:nth-child(odd),
  .hp-tips>li:last-child:nth-child(odd),
  .hp-contact>li:last-child:nth-child(odd),
  .ar-rel>li:last-child:nth-child(odd),
  .ar-rel>article:last-child:nth-child(odd),
  .vgrid>.vf:last-child:nth-child(odd):not(.w2){grid-column:1/-1}
  /* four steps: 2 + 2 instead of 3 + 1 */
  .ksteps:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Homepage: sector cards 761–900px stay in one row of three --- */
@media (min-width:761px) and (max-width:900px){.inds{grid-template-columns:repeat(3,1fr)}}

/* --- Homepage pillars: «كل حلول …» link aligned with the demo button --- */
.pl-btn,.pl-more{vertical-align:middle}
.pl-btn{margin-inline-end:20px}
.pl-more{margin-inline-start:0}

/* --- Homepage customer-profile orbit (mobile): longer EN label stays inside, caption aligned with its dot --- */
@media (max-width:560px){
  html[lang="en"] .cx{--R1:40%}
  .cx-msg{text-align:start}
}

/* --- Homepage mock UIs (mobile/tablet): schedule labels readable, phone no longer covers the schedule --- */
.who{white-space:nowrap}
@media (max-width:560px){
  .staff{grid-template-columns:72px 1fr}
  .staff .track span{text-overflow:ellipsis}
}
@media (min-width:641px) and (max-width:960px){.pl .ops-board{margin-inline-end:0}.pl .ops{padding-bottom:0}.pl .phone{display:none}}

/* --- Demo page --- */
@media (min-width:601px) and (max-width:900px){.rec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.rec-grid li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:640px){.dm-hero h1,.hero-copy h1,main>section:first-of-type h1{max-width:20ch}}

/* --- Thanks page: three short cards stay side by side on tablet --- */
@media (min-width:641px) and (max-width:800px){.steps,.links{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- Industry pages: hero buttons line up on mobile; no double padding under the last step --- */
@media (max-width:640px){
  .sp-hero .cta-row .btn{flex:1 1 100%;justify-content:center}
  .in-flow .ksteps>li:last-child{padding-bottom:0}
}

/* --- Industries directory: cards in a row share one height --- */
.more-inds a{height:100%}

/* --- Integrations: filter chips --- */
@media (min-width:641px){.ig-filter{flex-wrap:wrap;overflow:visible}}
@media (max-width:640px){.ig-filter{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}

/* --- Pricing --- */
@media (max-width:1020px){.pr-cards{max-width:none}}
@media (max-width:640px){
  .pr-y{flex-direction:column;gap:2px}
  .pr-cmp .ktable thead th{font-size:13px}
}

/* --- Developer: tables fit the screen on mobile --- */
@media (max-width:640px){
  .ktable{min-width:0}
  .ktable th,.ktable td{padding:12px 10px}
  .ktable code{white-space:normal;overflow-wrap:normal}
}

/* --- Solution pages (sell / operate / engage / grow) --- */
@media (min-width:641px){.vf-art{height:270px}}             /* taller mocks were cut at the bottom */
.o-cal .dv-b{height:190px}                                   /* short calendar events were clipped */
html[lang="en"] .gpr-b{left:auto;right:12px}                    /* EN: badge covered the service name */
.e-ib{grid-template-columns:minmax(0,1fr)}.ei-r{min-width:0}  /* EN inbox rows overflowed the card */
.e-note small{display:block}                                 /* note lines were spaced too far apart */
.oh-ap b,.op-u b{white-space:nowrap}
@media (max-width:640px){.oh-board{width:min(300px,100%)}}
.qnav ul{scroll-padding-inline:16px}