/* =========================== rc7 site content: devices · contact · clients · articles =========================== */
/* devices: three cards — cashier wide, waiter + driver narrow */
.kp-dev-3 .kp-dv.w6{grid-column:span 6}
.kp-dev-3 .kp-dv.w3{grid-column:span 3}
.kp-dev-3 .kp-dv.w3 .kp-dv-b p{font-size:13.5px}
@media (max-width:1180px){.kp-dev-3 .kp-dv.w6{grid-column:span 12}.kp-dev-3 .kp-dv.w3{grid-column:span 6}}
@media (max-width:640px){.kp-dev-3 .kp-dv.w3,.kp-dev-3 .kp-dv.w6{grid-column:span 12}}

/* contact band with the «كلّمنا» form */
.kp-cta-form{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.kp-cta-side{position:sticky;top:24px}
.kp-cta-form .cta-row{margin-block:26px 0}
.kp-cf-why{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;color:var(--on-date-2);font-size:15px;line-height:1.7}
.kp-cf-why li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.kp-cf-why .ic{width:18px;height:18px;margin-top:4px;color:var(--gold-ink,var(--brass-hi));stroke-width:2.4;fill:none;stroke:currentColor}
.kp-wa dd a{text-decoration:none}
.kp-wa dd a:hover{text-decoration:underline;text-underline-offset:4px}
.btn-line-on-dark{border-color:rgba(201,164,92,.55);color:var(--on-date);background:transparent}
.btn-line-on-dark:hover{border-color:var(--brass-hi);color:var(--gold-ink,var(--brass-hi))}
.kp-cf{--focus:var(--brass);background:var(--surface);color:var(--ink);border-radius:16px;padding:clamp(18px,2.6vw,28px);display:grid;gap:14px;box-shadow:0 30px 50px -30px rgba(0,0,0,.6);min-width:0}
.kp-cta .kp-cf{border:1px solid rgba(201,164,92,.28)}
.kp-cf h3{margin:0;font-size:clamp(20px,2vw,24px);line-height:1.35}
.kp-cf-lead{margin:-6px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.kp-cf .form{gap:14px}
.kp-cf .callout ul{margin:4px 0 0;padding-inline-start:18px}
.kp-cf .field.has-err :is(.input,.select,.textarea){border-color:var(--bad)}
.kp-cf .btn-block{height:50px;font-size:16px}
.kp-cf button[aria-busy="true"]{opacity:.7;pointer-events:none}
.kp-cf-pills{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.kp-cf-pills legend{padding:0;margin-block-end:8px;font-size:13.5px;font-weight:500;color:var(--ink)}
.kp-pills{display:flex;flex-wrap:wrap;gap:8px}
.kp-pill{position:relative;display:inline-flex}
.kp-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kp-pill span{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:14px;line-height:1.4;cursor:pointer;transition:background .15s,border-color .15s}
.kp-pill:hover span{border-color:var(--ink-3);color:var(--ink)}
.kp-pill input:checked+span{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--on-brass);font-weight:600}
.kp-pill input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}
.kp-cf-done{display:grid;justify-items:start;gap:10px;padding-block:12px}
.kp-cf-done:focus{outline:none}
.kp-cf-done h3{font-size:22px}
.kp-cf-done p{margin:0;color:var(--ink-2);line-height:1.8}

/* inner pages: compact hero + breadcrumbs */
.kp-ph-in{padding-block:clamp(28px,4vw,48px) clamp(36px,5vw,60px);max-width:860px}
.kp-crumbs ol{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13.5px;color:var(--on-date-2)}
.kp-crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.kp-crumbs li+li::before{content:"/";opacity:.55}
.kp-crumbs a{color:var(--on-date-2);text-decoration:none}
.kp-crumbs a:hover{color:var(--on-date);text-decoration:underline;text-underline-offset:4px}
.kp-crumbs [aria-current]{color:var(--on-date);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.kp-ph-h{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.2vw,54px);line-height:1.35;margin:0 0 12px;text-wrap:balance;overflow-wrap:anywhere}
html:not([lang="ar"]) .kp .kp-ph-h{line-height:1.22;letter-spacing:-.01em}
html:is([lang="hi"],[lang="bn"]) .kp .kp-ph-h{line-height:1.4;letter-spacing:0}
html[lang="ur"] .kp .kp-ph-h{line-height:1.6;letter-spacing:0}
.kp-ph-h[lang="ar"]{font-family:var(--f-body);font-weight:700}
.kp-ph-lead{margin:0;color:var(--on-date-2);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.85;max-width:44em}
.kp-sec-tight{padding-block:clamp(36px,5vw,64px)}
.kp-empty-h{margin:0;font-size:18px;color:var(--ink)}

/* chip filters (clients types, article categories) */
.kp-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-block-end:22px;scrollbar-width:thin}
.kp-chips a{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:14.5px;white-space:nowrap}
.kp-chips a span{font-size:12px;font-family:var(--f-mono);color:var(--ink-3)}
.kp-chips a:hover{border-color:var(--ink-3);color:var(--ink)}
.kp-chips a[aria-current="page"]{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--on-brass);font-weight:600}
.kp-chips a[aria-current="page"] span{color:inherit}
.kp-chips a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* /contact page */
.kp-cpage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.kp-cpage-side h2{margin:0 0 18px;font-size:22px}
.kp-cpage .kp-cf{border:1px solid var(--line-2);box-shadow:0 24px 44px -32px rgba(0,0,0,.45)}
.kp-cdl{display:grid;gap:14px;margin:28px 0 0;padding-block-start:20px;border-block-start:1px solid var(--line-2)}
.kp-cdl dt{font-size:12.5px;color:var(--ink-3)}
.kp-cdl dd{margin:2px 0 0;font-size:16px}
.kp-cdl a{color:var(--ink)}

/* clients: logo wall (home) + list (/clients). Logos sit on a fixed paper tile in both themes. */
.kp-logos{--n:6;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.kp-logos>li{flex:0 1 calc((100% - (var(--n) - 1) * 14px) / var(--n));min-width:0}
.kp-logo-t{display:grid;place-items:center;aspect-ratio:3/2;padding:14px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);overflow:hidden}
.kp-logo-t img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.kp-logo-t:hover img,.kp-ccard:hover .kp-logo-t img,.kp-ccard:focus-within .kp-logo-t img{filter:none;opacity:1}
.kp-logos-more{display:flex;justify-content:center;margin:26px 0 0}
.kp-clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kp-ccard{display:grid;gap:10px;align-content:start;min-width:0}
.kp-ccard-b{display:grid;gap:2px;padding-inline:4px}
.kp-ccard-b b{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.kp-ccard-b a{color:inherit;text-underline-offset:4px}
.kp-ccard-b small{color:var(--ink-3);font-size:13px}
.kp-cl-foot{margin-block-start:32px}

/* article cards (home teaser, hub, related) */
.kp-cards{--n:3;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.kp-cards>li{flex:0 1 calc((100% - (var(--n) - 1) * 20px) / var(--n));min-width:0;display:flex}
.kp-card{position:relative;display:flex;flex-direction:column;width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.kp-alt .kp-card{background:var(--ground)}
.kp-card:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:0 18px 30px -22px rgba(0,0,0,.5)}
.kp-card-img{display:block;aspect-ratio:16/9;background:var(--sunk);overflow:hidden}
.kp-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.kp-card-ph{display:grid;place-items:center;height:100%;background:radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--brass-hi) 30%,var(--date)),var(--date) 70%);color:var(--gold-ink,var(--brass-hi));font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.4vw,32px)}
html:not([lang="ar"]) .kp-card-ph{font-family:var(--f-body)}
.kp-card-b{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.kp-card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:12.5px;color:var(--ink-3)}
.kp-card-meta a{position:relative;z-index:2;color:var(--brass);font-weight:600;text-decoration:none}
.kp-card-meta a:hover{text-decoration:underline;text-underline-offset:3px}
.kp-card-t{margin:0;font-size:18px;line-height:1.5;font-weight:600}
.kp-card-t a{color:var(--ink);text-decoration:none}
.kp-card-t a::after{content:"";position:absolute;inset:0;z-index:1}
.kp-card-t a:focus-visible{outline:none}
.kp-card:focus-within{outline:2px solid var(--brass);outline-offset:2px}
.kp-card-x{margin:0;color:var(--ink-2);font-size:14px;line-height:1.75}
.kp-card-more{margin-block-start:auto;padding-block-start:6px;font-size:13.5px;font-weight:600;color:var(--brass)}
.kp-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-block-start:28px;font-size:14px;color:var(--ink-3)}

/* article page */
.kp-read{max-width:820px}
.kp-read-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px;color:var(--ink-3);margin-block-end:18px}
.kp-tag{display:inline-flex;align-items:center;height:30px;padding-inline:12px;border-radius:99px;background:var(--brass-wash);color:var(--brass);font-weight:600;text-decoration:none}
.kp-tag:hover{text-decoration:underline;text-underline-offset:3px}
.kp-read-note{display:flex;gap:8px;align-items:center;margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--sunk);color:var(--ink-2);font-size:14px}
.kp-read-note :is(.ic,.ui-icon){width:16px;height:16px;flex:none}
.kp-read-lede{margin:0 0 24px;font-size:clamp(17px,1.5vw,19.5px);line-height:1.85;color:var(--ink);font-weight:500}
.kp-read-cover{margin:0 0 30px;border-radius:14px;overflow:hidden;background:var(--sunk);aspect-ratio:16/9}
.kp-read-cover img{display:block;width:100%;height:100%;object-fit:cover}
.kp-story{display:grid;gap:28px;font-size:16.5px;line-height:1.95;color:var(--ink)}
.kp-story h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(20px,2vw,23px);line-height:1.4}
.kp-step-n{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--date);color:var(--brass-hi);font-family:var(--f-mono);font-size:14px;font-weight:500}
.kp-step-s{padding-block-start:4px}
.kp-step-s+.kp-step-s,.kp-tip+.kp-step-s{border-block-start:1px solid var(--line-2);padding-block-start:26px}
.kp-s-problem .kp-step-n{background:var(--bad-wash);color:var(--bad)}
.kp-s-solution .kp-step-n{background:var(--ok-wash);color:var(--ok)}
.kp-prose{overflow-wrap:anywhere}
.kp-prose p{margin:0 0 14px}
.kp-prose p:last-child{margin-block-end:0}
.kp-prose h3{font-size:18.5px;margin:22px 0 8px;line-height:1.5}
.kp-prose h4{font-size:16.5px;margin:18px 0 6px}
.kp-prose :is(ul,ol){margin:0 0 14px;padding-inline-start:24px;display:grid;gap:6px}
.kp-prose li::marker{color:var(--brass)}
.kp-prose strong{font-weight:700;color:var(--ink)}
.kp-tip{position:relative;padding:22px clamp(18px,3vw,28px);border-radius:16px;background:var(--date);color:var(--on-date);isolation:isolate;overflow:hidden}
.kp-tip::before{content:"";position:absolute;z-index:-1;inset-block-start:-120px;inset-inline-end:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,168,92,.2),transparent)}
.kp-tip h2{color:var(--gold-ink,var(--brass-hi))}
.kp-tip .kp-step-n{background:var(--brass-hi);color:var(--on-brass)}
.kp-tip .kp-prose strong{color:var(--gold-ink,var(--brass-hi))}
.kp-tip .kp-prose li::marker{color:var(--gold-ink,var(--brass-hi))}
.kp-tip-by{margin:16px 0 0;padding-block-start:12px;border-block-start:1px solid rgba(201,164,92,.3);font-size:14px;color:var(--on-date-2);font-weight:600}
.kp-read-foot{margin-block-start:34px;padding-block-start:20px;border-block-start:1px solid var(--line-2)}
.kp-read-foot .txt-link{color:var(--brass);font-weight:600}
.kp-rel-h{margin:0 0 22px;font-size:clamp(22px,2.4vw,28px)}
.kp-ar-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 36px;padding-block:clamp(40px,5vw,64px)}
.kp-ar-cta-h{margin:0 0 8px;font-size:clamp(22px,2.6vw,32px);line-height:1.35}
.kp-ar-cta .kp-cta-p{margin:0}
.kp-ar-cta .btn{height:50px;padding-inline:28px;font-size:16px}

@media (prefers-reduced-motion:reduce){.kp-logo-t img,.kp-card{transition:none}.kp-card:hover{transform:none}}
@media (max-width:1180px){.kp-logos{--n:4}.kp-clist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .kp-cta-form,.kp-cpage{grid-template-columns:minmax(0,1fr)}
  .kp-cta-side{position:static}
  .kp-cards{--n:2}
}
@media (max-width:640px){
  .kp-logos{--n:2;gap:10px}
  .kp-logos>li{flex-basis:calc((100% - 10px) / 2)}
  .kp-clist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kp-cards{--n:1}
  .kp-cf .form-2{grid-template-columns:minmax(0,1fr)}
  .kp-story{font-size:16px}
  .kp-ar-cta .btn{width:100%}
  .kp-crumbs [aria-current]{max-width:52vw}
}


.kp-ph{--on-date:#092154;--on-date-2:#425777;--brass-hi:#004fe8;background:#f4f7ff;color:#092154}.kp-ph-lead,.kp-crumbs{color:#425777}.kp-cf input,.kp-cf select,.kp-cf textarea{font:inherit}.kp-ph .lh{color:#092154}.kp-cf .btn-brass{background:#004fe8;border-color:#004fe8;color:#fff}