/* Strategic Sourcing. Logical properties throughout, so the Arabic page mirrors without a second stylesheet. */
:root { --ss-ease: cubic-bezier(0.45, 0, 0.1, 1); --gold: #E9C766; --deep: #0E1E7A; --navy: #0A1150; --strike: #1428CC; --ink2: #12141C; --peri: #8492FF; }
.ss-page { background: var(--navy); }
.face { display: block; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #E3E7FF; }
.face svg { display: block; width: 100%; height: 100%; }
.bar-lang { font-size: 15px; font-weight: 600; text-decoration: none; padding: 6px 2px; color: var(--strike); }
.ss-page .btn-light { background: #fff; color: var(--ink); }

/* Arabic: cursive script must never be tracked, and it needs more height */
html[lang="ar"] { --font-display: "Alexandria", "IBM Plex Sans Arabic", sans-serif; --font-text: "IBM Plex Sans Arabic", sans-serif; --font-ui: "IBM Plex Sans Arabic", sans-serif; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] .display, html[lang="ar"] .head { line-height: 1.24; font-weight: 600; }
html[lang="ar"] body, html[lang="ar"] p { line-height: 1.62; }
html[lang="ar"] .ss-hero .display { font-size: min(4.7vw, 9.6vh); line-height: 1.26; }
html[lang="ar"] .brand { font-family: "Albert Sans", sans-serif; }
html[lang="ar"] .brand span { letter-spacing: -0.03em !important; }
html[dir="rtl"] .menu-col h3 { padding-left: 0; padding-right: 12px; }
html[dir="rtl"] .burger { margin-right: 0; margin-left: -8px; }

html { scroll-padding-top: calc(var(--bar) + 12px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ss-page { background: #fff; color: var(--ink); }
.ss-page main { padding-top: var(--bar); }
.ss-page .bar { background: #fff; }

/* product frame: built to the platform's own design rules (flat, framed, exact numbers, colour on data only) */
.app { --frame: #E9EDF5; --sheet: #fff; --raised: #F5F6F9; --active: #DAE0EC; --bd: #E3E6EC; --rule: #EEF0F3; --control: #CDD2DA; --text: #121418; --mt: #555B66; --faint: #6A707B; --primary: #15171B; --acc: #1428CC; --acc-pale: #E9ECFB;
  container-type: inline-size; font: 400 14px/20px "IBM Plex Sans", "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; border-radius: 10px; overflow: hidden; background: var(--frame); text-align: start; }
.app-in { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); padding-inline-end: 8px; padding-block-end: 8px; }
.app-side { grid-row: 1 / span 2; padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.app-logo { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
.app-logo svg { width: 20px; height: 20px; color: var(--acc); }
.app-nav { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--mt); font-weight: 500; font-size: 13px; }
.app-nav.on { background: var(--active); color: var(--text); }
.app-nav small { font-size: 12px; font-weight: 400; color: var(--faint); }
.app-me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 18px 8px 0; font-size: 12px; line-height: 16px; color: var(--mt); }
.app-me b { display: block; font-weight: 500; font-size: 13px; color: var(--text); }
.av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font-size: 11px; font-weight: 600; flex: none; background: #E4ECFF; color: #1B3A8C; }
.av.t2 { background: #FDEBD8; color: #7A3A06; } .av.t3 { background: #DDF3EA; color: #14573A; } .av.t4 { background: #F1E3F6; color: #5E2A6E; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-search { width: min(320px, 60%); height: 32px; padding: 0 10px; border-radius: 6px; background: #fff; color: var(--faint); font-size: 13px; line-height: 32px; white-space: nowrap; overflow: hidden; }
.app-ai { color: var(--mt); font-weight: 500; font-size: 13px; padding-inline-end: 6px; }
.app-sheet { background: var(--sheet); border: 1px solid var(--bd); border-radius: 8px; padding: 20px 24px 22px; min-width: 0; }
.scr[hidden] { display: none; }
.ids { font: 400 12px/16px "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, Menlo, monospace; color: var(--mt); margin: 0; }
.hd { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.hd h4 { margin: 2px 0 0; font: 600 18px/24px "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; letter-spacing: -0.01em; }
.hd .find { margin: 2px 0 0; color: var(--mt); }
.pb { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px; background: var(--primary); color: #fff; font-weight: 500; font-size: 13px; white-space: nowrap; flex: none; }
.pb.ghost { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--control); }
.cl { display: flex; justify-content: space-between; gap: 6px; position: relative; margin: 16px 0 16px; }
.cl::before { content: ""; position: absolute; inset-inline: 4px; top: 4px; height: 1px; background: var(--control); }
.cl span { position: relative; flex: none; min-width: 9px; font-size: 12px; line-height: 16px; color: var(--faint); padding-top: 14px; white-space: nowrap; }
.cl span::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 9px; height: 9px; border-radius: 2px; background: #C5CBD6; }
.cl .done { color: var(--mt); } .cl .done::before { background: var(--text); }
.cl .now { color: var(--acc); font-weight: 500; } .cl .now::before { background: var(--acc); }
.kvs { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 8px 12px; background: var(--raised); border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.kvs b { font-weight: 500; }
.kvs span { color: var(--mt); margin-inline-end: 6px; }
.app h5 { margin: 0 0 8px; font: 600 14px/20px "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; }
.app table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.app th { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--mt); text-align: start; padding: 0 8px 8px; white-space: nowrap; }
.app td { padding: 0 8px; height: 42px; border-top: 1px solid var(--rule); vertical-align: middle; }
.app th:first-child, .app td:first-child { padding-inline-start: 0; }
.app th:last-child, .app td:last-child { padding-inline-end: 0; }
.app .r { text-align: end; }
.app td b { font-weight: 500; }
.mon { font-weight: 500; white-space: nowrap; }
.mon small, .un { font-size: 12px; font-weight: 400; color: var(--mt); margin-inline-start: 3px; }
.dash { color: var(--faint); }
.sub { display: block; font-size: 12px; line-height: 16px; color: var(--mt); font-weight: 400; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--raised); color: var(--mt); }
.tag.ok { background: #E1F5E9; color: #0E4D2E; } .tag.you { background: var(--acc-pale); color: var(--acc); } .tag.wait { background: #FFF8E6; color: #8A3F0C; }
.src { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 16px; color: var(--mt); }
.src i { width: 7px; height: 7px; border-radius: 999px; background: #1F7A4D; flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 20px; }
.tot { display: flex; justify-content: flex-end; gap: 28px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--mt); }
.tot b { display: block; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); }
.tot .acc b { color: var(--acc); }
.val.acc { color: var(--acc); font-weight: 500; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.figs p { margin: 0; font-size: 12px; line-height: 16px; color: var(--mt); }
.figs b { display: block; font-size: 20px; line-height: 26px; font-weight: 400; color: var(--text); white-space: nowrap; }
.figs b small { font-size: 12px; color: var(--mt); margin-inline-start: 3px; }
.figs .acc b { color: var(--acc); }
.log { font-size: 12.5px; line-height: 17px; color: var(--mt); min-width: 0; }
.log p { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule); }
.log b { font-weight: 500; color: var(--text); }
.log time { display: block; font-size: 12px; color: var(--faint); }
.auc-row { background: #fff; }
.auc-row.flash td { background: var(--acc-pale); }
.auc-row td { transition: background-color 700ms ease; }
.lock { display: inline-flex; align-items: center; gap: 6px; color: var(--mt); }
.lock svg { width: 13px; height: 13px; }
.note { margin: 10px 0 0; font-size: 12.5px; line-height: 17px; color: var(--mt); }
tr.total td { font-weight: 500; background: var(--raised); }
tr.total td:first-child { padding-inline-start: 8px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
tr.total td:last-child { padding-inline-end: 8px; border-start-end-radius: 6px; border-end-end-radius: 6px; }
.app tr.total .top1 { color: var(--acc); }
@container (max-width: 800px) {
  .app-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 8px; }
  .app-side, .app-top { display: none; }
  .app-sheet { padding: 16px; }
}
@container (max-width: 640px) {
  .x { display: none; }
  .app th, .app td { padding-inline: 4px; }
  .app table { font-size: 13px; }
  .mon small { margin-inline-start: 2px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .log { display: none; }
  .cl span { font-size: 0; padding-top: 10px; } .cl .now { font-size: 12px; }
  .figs { grid-template-columns: 1fr 1fr; }
  .hd { flex-direction: column; gap: 10px; }
  .kvs { gap: 2px 14px; }
  .tot { justify-content: space-between; }
}
@container (max-width: 340px) {
  .who .av { display: none; }
}

/* format tabs */
.ev-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ev-tabs::-webkit-scrollbar { display: none; }
.ev-tabs button { flex: none; height: 40px; padding: 0 14px; border: 0; background: transparent; color: inherit; font: 500 15px/1 var(--font-ui); cursor: pointer; opacity: 0.72; transition: background-color 160ms ease, opacity 160ms ease; }
.ev-tabs button.is-on { background: var(--ink); color: #fff; opacity: 1; }
.ev-desc { margin: 12px 0 16px; font-size: 17px; line-height: 1.4; min-height: 1.4em; }

/* compare */
.lv { font-family: var(--font-ui); }
.lv-h, .lv-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 0.8fr 0.9fr 0.8fr 0.7fr 0.9fr; gap: 8px; align-items: center; }
.lv-h { padding: 0 10px 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.lv-rows { position: relative; }
.lv-row { position: absolute; inset-inline: 0; top: 0; height: 58px; padding: 0 10px; background: #F1F3FB; border-radius: 10px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.lv.ready .lv-row { transition: transform 420ms cubic-bezier(0.25, 0.8, 0.25, 1), background-color 300ms ease, color 300ms ease; }
.lv-sup { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; font-weight: 600; line-height: 1.2; font-size: 14px; }
.lv-sup .face { display: block; width: 30px; height: 30px; border-radius: 999px; overflow: hidden; }
.lv-sup .face svg { display: block; width: 100%; height: 100%; }
.lv-sup small { display: none; }
.lv-q { font-weight: 600; }
.lv-m { color: var(--muted); font-size: 13.5px; }
.lv-d { font-weight: 600; white-space: nowrap; }
.lv:not(.is-d) .lv-row[data-id="o"], .lv.is-d .lv-row[data-id="n"] { background: var(--strike); color: #fff; }
.lv:not(.is-d) .lv-row[data-id="o"] .lv-m, .lv.is-d .lv-row[data-id="n"] .lv-m { color: #D5DAFF; }
.cmp { margin-top: 20px; max-width: 1100px; }
.sect-p { margin-top: 12px; max-width: 38em; font-size: 18px; line-height: 1.42; }
.cmp-tog { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--tone); border-radius: 10px; }
.cmp-tog button { padding: 8px 14px; border: 0; border-radius: 7px; background: none; font: 500 14.5px/1.2 var(--font-ui); color: var(--ink); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.cmp-tog button.is-on { background: var(--strike); color: #fff; }
.cmp-cap { margin-top: 12px; font: 400 14px/1.4 var(--font-ui); color: var(--muted); }

/* B: chapters in colour, type-led opening */
.b-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(32px, 5vw, 72px) var(--m) clamp(28px, 4vw, 52px); }
.b-top h1 { font-size: clamp(44px, 7.4vw, 116px); line-height: 0.96; letter-spacing: -0.04em; }
.b-idx { display: grid; font-family: var(--font-ui); }
.b-idx a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 6px; padding: 12px 0; border-top: 1px solid var(--tone-2); text-decoration: none; }
.b-idx a:last-child { border-bottom: 1px solid var(--tone-2); }
.b-idx i { font-style: normal; color: var(--muted); }
.b-idx b { font: 600 19px/1.2 var(--font-display); letter-spacing: -0.015em; }
.b-idx span { grid-column: 2; font-size: 15px; line-height: 1.3; color: var(--muted); }
.b-ch { padding-block-start: clamp(36px, 5vw, 76px); padding-inline-start: var(--m); overflow: hidden; }
.b-c1 { background: var(--peri); } .b-c2 { background: var(--gold); } .b-c3 { background: var(--navy); color: #fff; padding-bottom: clamp(36px, 5vw, 76px); padding-inline-end: var(--m); }
.b-txt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: end; padding-inline-end: var(--m); margin-bottom: clamp(22px, 3vw, 40px); }
.b-c3 .b-txt { padding-inline-end: 0; }
.b-txt h2 { font-size: clamp(32px, 4.4vw, 70px); }
.b-num { display: block; font: 500 16px/1 var(--font-ui); margin-bottom: 12px; }
.b-txt p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.38; }
.b-bleed { width: min(1240px, 100%); margin-inline-start: auto; }
.b-bleed .app { border-radius: 0; border-start-start-radius: 10px; }
.b-c3 .b-bleed { margin: 0; width: auto; } .b-c3 .b-bleed .app { border-radius: 10px; }
.b-c3 .ev-tabs button.is-on { background: #fff; color: var(--ink); }


.sect { padding: clamp(44px, 6vw, 88px) var(--m); }
.sect > .head { font-size: clamp(30px, 3.4vw, 54px); }
.ss-split > .head, .ss-next > .head { text-wrap: balance; }
.ss-split { background: var(--navy); color: #fff; padding: clamp(52px, 6vw, 90px) var(--m); }
.ss-split > .head { max-width: 16em; font-size: clamp(30px, 3.4vw, 54px); }
.sp-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px; margin-top: clamp(28px, 4vw, 52px); font-family: var(--font-ui); }
.sp-col { padding: clamp(20px, 2.4vw, 34px); border-radius: 16px; }
.sp-agent { background: var(--strike); }
.sp-team { background: var(--gold); color: var(--ink); }
.sp-t { display: flex; align-items: center; gap: 10px; font: 600 clamp(19px, 1.7vw, 26px)/1.2 var(--font-display); }
.sp-agent .sp-t img { filter: brightness(0) invert(1); }
.sp-faces { display: flex; }
.sp-faces .face { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--gold); }
.sp-faces .face + .face { margin-inline-start: -9px; }
.sp-col ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.32; }
.sp-agent ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.sp-col li { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.sp-team li { border-color: rgba(17, 19, 24, 0.2); }
.ss-next { background: var(--strike); color: #fff; padding: clamp(64px, 8vw, 110px) var(--m) clamp(36px, 4vw, 56px); }
.ss-next .head { font-size: clamp(38px, 6.2vw, 104px); }
.ss-next .demo-form input { background: #fff; color: var(--ink); }
.ss-next .demo-note { color: #E3E7FF; }
.nx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: clamp(36px, 5vw, 64px); font-family: var(--font-ui); }
.nx-pager a { display: block; padding: 16px 18px; background: #0E1E7A; color: #fff; border-radius: 14px; text-decoration: none; transition: background-color 180ms ease; }
.nx-pager a:last-child { text-align: end; }
.nx-pager span { display: block; font-size: 14px; color: #D5DAFF; }
.nx-pager strong { display: block; margin-top: 2px; font: 600 clamp(18px, 1.7vw, 25px)/1.2 var(--font-display); }
.ss-split { background: var(--navy); }
.ss-next .demo-form input { background: #fff; color: var(--ink); }
.ss-next .demo-note { color: #E3E7FF; }
@media (min-width: 768px) { .ss-page .foot-grid { grid-template-columns: repeat(3, 1fr); } }

/* Arabic: the display title needs room for its ascenders, and the bar sits on white here */
html[lang="ar"] .b-top h1 { font-size: clamp(40px, 6.2vw, 100px); line-height: 1.2; }
html[lang="ar"] .b-txt h2 { font-size: clamp(30px, 3.8vw, 60px); }
html[lang="ar"] .b-idx b { font-size: 18px; }
html[lang="ar"] .app, html[lang="ar"] .app p { line-height: 20px; }
html[lang="ar"] .app .sub, html[lang="ar"] .app .note { line-height: 18px; }

@media (prefers-reduced-motion: reduce) { .lv.ready .lv-row, .auc-row td { transition: none; } }
@media (max-width: 1000px) {
  .b-top, .b-txt { grid-template-columns: minmax(0, 1fr); }
  .sp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bar-lang { font-size: 14px; }
  .b-ch { padding-inline: var(--m); padding-block-end: 28px; }
  .b-bleed { margin: 0; width: auto; } .b-bleed .app { border-radius: 10px; }
  .lv-h, .lv-row { grid-template-columns: minmax(0, 1fr) 84px 88px; gap: 6px; }
  .lv-h { padding-inline: 8px; }
  .lv-x { display: none; }
  .lv-row { height: 62px; padding: 0 8px; font-size: 13px; }
  .lv-q, .lv-d { white-space: nowrap; font-size: 13px; }
  .lv-sup { font-size: 13px; }
  .lv-sup small { display: block; font-size: 11px; font-weight: 400; opacity: 0.8; }
  .cmp-tog { display: grid; grid-auto-flow: row; }
  .ss-split { padding: 40px var(--m); }
  .sp-agent ul { grid-template-columns: 1fr; }
  .sp-col li { padding: 8px 0; }
  .ss-next { padding: 40px var(--m) 28px; }
  .nx-pager { gap: 6px; }
  .nx-pager a { padding: 10px 12px; }
  .nx-pager span { font-size: 12px; }
  .nx-pager strong { font-size: 15px; }
}