/* 1.8.0 — ready-made blocks (patterns) in the theme's look. Works in the editor too. */
.ar180-extra{margin-block:34px}
.ar180-block{--ar180-navy:#0F2A5C;--ar180-blue:#1F55C7;--ar180-red:#D4183D;--ar180-soft:#F3F7FD;--ar180-line:#DCE5F4;margin-block:34px;color:#0F1F45;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.ar180-block h2{font-size:clamp(24px,3.2vw,34px);line-height:1.35;color:var(--ar180-navy);margin:0 0 10px;font-weight:800}
.ar180-block h3{font-size:20px;line-height:1.4;color:var(--ar180-navy);margin:10px 0 6px;font-weight:800}
.ar180-block p{line-height:1.9;margin:0 0 10px}
.ar180-tag{color:var(--ar180-red);font-weight:800;font-size:14px;letter-spacing:.2px}
.ar180-intro{padding:8px 0}
.ar180-btn .wp-block-button__link{background:var(--ar180-red);color:#fff;border-radius:999px;padding:13px 28px;font-weight:800;text-decoration:none;border:0}
.ar180-btn .wp-block-button__link:hover{filter:brightness(1.08)}
.ar180-media{gap:32px;align-items:center}
.ar180-media img{border-radius:22px;width:100%;height:auto;display:block}
.ar180-cards{gap:20px}
.ar180-card{background:#fff;border:1px solid var(--ar180-line);border-radius:22px;padding:24px 22px;box-shadow:0 10px 26px rgba(15,31,69,.06);height:100%}
.ar180-ic{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--ar180-soft);color:var(--ar180-blue)}
.ar180-stats{gap:14px;text-align:center}
.ar180-stats .wp-block-column{background:var(--ar180-soft);border-radius:20px;padding:22px 12px}
.ar180-num{font-size:clamp(30px,4vw,44px)!important;line-height:1.1!important;font-weight:800;color:var(--ar180-navy);direction:ltr;margin-bottom:6px!important}
.ar180-check ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ar180-check li{position:relative;padding:12px 52px 12px 14px;background:var(--ar180-soft);border-radius:14px;font-weight:700}
.ar180-check li::before{content:"";position:absolute;inset-inline-start:auto;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ar180-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.ar180-faq details{background:#fff;border:1px solid var(--ar180-line);border-radius:16px;padding:14px 18px;margin-bottom:10px}
.ar180-faq summary{cursor:pointer;font-weight:800;color:var(--ar180-navy)}
.ar180-faq details[open] summary{margin-bottom:8px}
.ar180-cta{background:linear-gradient(to left,#0F2A5C 25%,#1F55C7);color:#fff;border-radius:26px;padding:34px 30px;text-align:center}
.ar180-cta h2,.ar180-cta p{color:#fff}
.ar180-cta .wp-block-buttons{justify-content:center}
@media (max-width:781px){.ar180-media,.ar180-cards,.ar180-stats{gap:14px}.ar180-cta{padding:26px 20px}}
.ar180-extra{color:#4A5878}.ar180-extra h1,.ar180-extra h2,.ar180-extra h3,.ar180-extra h4{color:#0F2A5C}.ar180-extra p,.ar180-extra li{color:#4A5878}.ar180-extra strong{color:#0F2A5C}.ar180-extra a{color:#D4183D}

/* 1.8.1 — homepage results block: one main result + up to three short ones. */
.ar181-res{--n:#0F2A5C;--b:#1F55C7;--r:#D4183D;--line:#E3E9F4;display:grid;gap:14px;margin-top:20px;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.ar181-res img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.ar181-chip{display:inline-flex;align-self:flex-start;padding:5px 16px;border-radius:999px;background:#E8EEFC;color:var(--n);font-size:14px;font-weight:800;line-height:1.5}
.ar181-growth{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;padding:5px 14px;border-radius:999px;background:#E6F6EC;color:#0B7A3E;font-size:15px;font-weight:800;line-height:1.4}
.ar181-growth b{font-weight:900}
.ar181-main{display:grid;gap:14px;padding:20px 18px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 28px rgba(15,31,69,.07)}
.ar181-main-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.ar181-value{color:var(--n);font-size:clamp(30px,9vw,40px);font-weight:900;line-height:1.2}
.ar181-period{color:#4A5878;font-size:17px;font-weight:600}
.ar181-desc{margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line);color:#4A5878;font-size:15px;line-height:1.9}
.ar181-main-shot{background:#F4F7FD;border-radius:14px;padding:8px;aspect-ratio:16/10}
.ar181-more{justify-self:start;color:var(--b);font-size:16px;font-weight:800;text-decoration:none}
.ar181-side{display:grid;gap:12px}
.ar181-card{display:grid;grid-template-columns:auto minmax(0,1fr) 40%;align-items:center;gap:12px;padding:14px 12px 14px 12px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px rgba(15,31,69,.06);text-decoration:none}
.ar181-card-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.ar181-card-value{color:var(--n);font-size:24px;font-weight:900;line-height:1.25}
.ar181-card-label{color:#4A5878;font-size:14px;font-weight:600}
.ar181-card-shot{background:#F4F7FD;border-radius:10px;padding:4px;aspect-ratio:4/3}
.ar181-arrow{color:var(--r);font-size:34px;font-weight:700;line-height:1}
.ar181-card:not(:has(.ar181-card-shot)){grid-template-columns:auto minmax(0,1fr)}
.ar181-res.is-single{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
 .ar181-res{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);align-items:stretch;gap:18px;margin-top:26px}
 .ar181-res.is-single{grid-template-columns:minmax(0,1fr)}
 .ar181-side{grid-column:1;grid-row:1;grid-auto-rows:1fr;gap:12px}
 .ar181-main{grid-column:2;grid-row:1;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);grid-template-rows:1fr auto;align-items:center;gap:6px 22px;padding:22px 24px}
 .ar181-res.is-single .ar181-main{grid-column:1}
 .ar181-main-shot{grid-column:2;grid-row:1;aspect-ratio:1.6;padding:6px;align-self:center}
 .ar181-main-copy{grid-column:1;grid-row:1;gap:7px}
 .ar181-more{grid-column:2;grid-row:2;justify-self:end;align-self:end}
 .ar181-main:not(:has(.ar181-main-shot)){grid-template-columns:minmax(0,1fr)}
 .ar181-value{font-size:36px}
 .ar181-desc{font-size:14px;line-height:1.8}
}
}
.ar181-res .ar181-more{color:var(--r);justify-self:end}
.ar181-res .ar181-more:hover{text-decoration:underline}
.ar181-res .ar181-arrow{font-size:38px}

/* 1.8.1 — readable small text on phones. */
.ar160-footer .rail-nav a,.ar160-footer .rail-nav .current-menu-item>a{font-size:13px}
.ar160-footer-text{font-size:12px}
.ar160-dash-head small,.ar160-dash-mer small{font-size:12px}
/* 1.8.1 — compact side cards: chip, number, then metric + growth on one line. */
.ar181-card-copy{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:4px}
.ar181-card-copy>.ar181-chip{flex:0 0 100%;max-width:max-content}
.ar181-card-value{flex:0 0 100%;font-size:22px}
.ar181-card-label{flex:0 1 auto}
.ar181-card-copy>.ar181-growth{padding:3px 11px;font-size:14px}
.ar181-card{padding-block:10px}

.ar181-arrow{order:-1}.ar181-chip-plat{background:#F1F5FF;color:var(--b)}.ar181-card-copy>.ar181-chip{max-width:max-content}
.ar181-res a.ar181-more,.ar181-res a.ar181-more:visited{color:#D4183D!important;text-decoration:none}
/* 1.8.1 — exact look of the approved design. */
.ar181-chip,.ar181-chip-plat{background:#EAF0FF;color:var(--b);font-size:14.5px;font-weight:800;padding:5px 18px}
.ar181-growth{background:#E3F6EA;color:#0A8A45;font-size:15px;font-weight:800;padding:4px 14px;gap:6px}
.ar181-growth.is-both{font-size:19px;padding:8px 22px;gap:10px}
.ar181-growth b{font-weight:900}
.ar181-main{border:0;border-radius:20px;box-shadow:0 12px 34px rgba(15,31,69,.08)}
.ar181-main-shot{background:#fff;padding:0;border-radius:10px;box-shadow:0 6px 20px rgba(15,31,69,.14);overflow:hidden}
.ar181-main-shot img{border-radius:0;object-fit:contain}
.ar181-card{border:0;border-radius:18px;box-shadow:0 8px 26px rgba(15,31,69,.08)}
.ar181-card-shot{background:transparent;padding:0;box-shadow:0 4px 14px rgba(15,31,69,.14);border-radius:8px;overflow:hidden}
.ar181-card-shot img{border-radius:0}
.ar181-card-extra{flex:0 0 100%;color:#4A5878;font-size:14px;font-weight:600;text-align:start}
.ar181-card-value{color:#0F2A5C}
.ar181-card-copy>.ar181-growth{font-size:14.5px}
.ar181-arrow{font-size:40px;font-weight:600}
.ar181-desc{color:#4A5878}

/* 1.8.1 — main card and the three side cards are the same height; the screenshot sits centered at its own proportions. */
@media(min-width:900px){
 .ar181-main{grid-template-rows:auto;align-items:center;gap:20px;padding:22px 24px}
 .ar181-main-copy{align-self:center}
 .ar181-main-shot{grid-row:1;aspect-ratio:auto;align-self:center;min-height:0;position:static}
 .ar181-main-shot img{position:static;width:100%;height:auto;max-height:420px;object-fit:contain}
}
.ar181-card-copy>.ar181-chip{white-space:nowrap}
.ar181-card-extra{flex:0 1 auto}
@media(min-width:900px){.ar181-main{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}}
.ar181-value{white-space:nowrap}
@media(min-width:900px){.ar181-value{font-size:32px}}

/* 1.8.1 — results page: filters, featured block, one section per platform. */
.ar181-page{padding-block:6px 10px;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.ar181-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.ar181-fchip{padding:8px 18px;border:1px solid #E3E9F4;border-radius:999px;background:#fff;color:#0F2A5C;font:800 14px "IBM Plex Sans Arabic",system-ui,sans-serif;cursor:pointer}
.ar181-fchip.is-on{background:#0F2A5C;border-color:#0F2A5C;color:#fff}
.ar181-h{margin:26px 0 0;color:#0F2A5C;font-size:clamp(22px,3vw,28px);font-weight:900}
.ar181-featured .ar181-res{margin-top:14px}
.ar181-sec{margin-top:46px;padding:0}
.ar181-sec[hidden],.ar181-featured[hidden],.ar181-scard[hidden]{display:none}
.ar181-sec-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#0F2A5C;font-size:20px;font-weight:900}
.ar181-pic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.ar181-grid{display:grid;gap:12px}
.ar181-scard{display:grid;grid-template-columns:minmax(0,1fr) 44%;align-items:center;gap:12px;padding:12px 14px;background:#fff;border-radius:18px;box-shadow:0 8px 26px rgba(15,31,69,.08);text-decoration:none}
.ar181-scard-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.ar181-scard-value{color:#0F2A5C;font-size:22px;font-weight:900;line-height:1.25}
.ar181-scard-label{color:#4A5878;font-size:14px;font-weight:600}
.ar181-scard-label.is-soft{color:#6B7897}
.ar181-scard-shot{display:block;aspect-ratio:16/10;background:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(15,31,69,.14);overflow:hidden}
.ar181-scard-shot img{display:block;width:100%;height:100%;object-fit:contain}
@media(min-width:900px){.ar181-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* 1.8.1 — results page: one row of exactly three results, platform buttons above. */
.ar181-rowsec{margin-top:34px}
.ar181-rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ar181-h2{margin:2px 0 0;color:#0F2A5C;font-size:clamp(22px,3vw,30px);font-weight:900}
.ar181-rhead .ar160-sub{margin:4px 0 0}
.ar181-chips{margin:0}
.ar181-fchip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 12px}
.ar181-fchip[data-v=all]{padding:7px 22px}
.ar181-fchip .ar181-pic{width:24px;height:24px;border-radius:7px}
.ar181-fchip .ar181-pic svg{width:16px;height:16px}
.ar181-row[hidden]{display:none}
.ar181-row{display:grid;gap:14px}
.ar181-rcard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#fff;border-radius:18px;box-shadow:0 8px 26px rgba(15,31,69,.08);text-decoration:none;min-width:0}
.ar181-rtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ar181-rplat{display:inline-flex;align-items:center;gap:8px;color:#0F2A5C;font-weight:800;font-size:15px}
.ar181-rplat .ar181-pic{width:30px;height:30px;border-radius:9px}
.ar181-rshot{display:block;aspect-ratio:16/10;background:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(15,31,69,.14);overflow:hidden}
.ar181-rshot img{display:block;width:100%;height:100%;object-fit:contain}
.ar181-rbot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.ar181-rcopy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ar181-rcopy strong{color:#0F2A5C;font-size:22px;font-weight:900;line-height:1.25}
.ar181-rmeta{color:#4A5878;font-size:13.5px;font-weight:600}
.ar181-rdesc{color:#4A5878;font-size:13px;line-height:1.7}
@media(min-width:900px){.ar181-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* 1.8.1 — compact clients strip: small label, 56px rounded-square logos. */
.ar160-clients{padding-block:22px 4px}
.ar160-client-marquee{margin-top:8px;padding:4px 0}
.ar160-client-track{gap:14px}
.ar160-client-logo{width:56px;height:56px;border-radius:12px}

/* 1.8.1 — compact results block on the homepage: «all results» sits in the label row. */
#proof.ar160-results{padding-block:26px 20px}
.ar181-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ar181-all{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border:1px solid #DCE5F4;border-radius:999px;background:#fff;color:#0F2A5C;font-size:14px;font-weight:800;box-shadow:0 4px 12px rgba(15,31,69,.08);text-decoration:none;white-space:nowrap}
.ar181-all::after{content:"←";color:#D4183D;font-size:17px;font-weight:900}
#proof .ar160-sub{max-width:none;margin-top:4px}
#proof h2{margin-top:2px}
#proof .ar181-res{margin-top:12px}
@media(min-width:900px){#proof.ar160-results{padding-block:30px 24px}.ar181-main{padding:16px 20px}.ar181-card{padding-block:8px}}
@media(max-width:899px){
 .ar181-main{padding:14px;gap:10px}
 .ar181-main-copy{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px}
 .ar181-main-copy>.ar181-value,.ar181-main-copy>.ar181-desc{flex:0 0 100%}
 .ar181-value{font-size:28px}
 .ar181-main-shot{aspect-ratio:16/9}
 .ar181-desc{margin:2px 0 0;padding-top:8px;font-size:14px;line-height:1.7}
 .ar181-card{padding-block:8px}
}

/* 1.8.1 — homepage closing banner without the illustration: text and button only. */
.ar160-final-cta{display:block;padding:26px 22px}
.ar160-final-cta .ar160-btn{margin-top:4px}
@media(min-width:900px){
 .ar160-final-cta{display:block;padding:34px 48px}
 .ar160-final-cta>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:36px;align-items:center}
 .ar160-final-cta h2{grid-column:1;grid-row:1}
 .ar160-final-cta p{grid-column:1;grid-row:2;margin:8px 0 0}
 .ar160-final-cta .ar160-btn{grid-column:2;grid-row:1 / span 2;margin:0;width:auto;padding-inline:40px}
}

/* 1.8.1 — latest articles: the «all» link uses the same pill as the results block. */
.ar160-section-head .ar181-all{align-self:center}

.ar181-card-note{flex:0 0 100%;color:#4A5878;font-size:13.5px;font-weight:500;line-height:1.7}

@media(min-width:901px){.ar181-main-copy>.ar181-chip,.ar181-card-copy>.ar181-chip{font-size:12.5px;padding:3px 12px;line-height:1.5}}

/* 1.8.4 — match the approved reference: compact side cards, details link, button under the block. */
.ar181-more{display:inline-flex;align-items:center;gap:8px;color:#1F55C7;font-size:16px;font-weight:800;text-decoration:none}
.ar181-res a.ar181-more,.ar181-res a.ar181-more:visited{color:#1F55C7!important}
.ar181-all-wrap{display:flex;justify-content:center;margin-top:22px}
.ar181-all-big{padding:12px 34px;font-size:17px;border:1.5px solid #1F55C7;box-shadow:none}
.ar181-all-big::after{content:none}
.ar181-all-big::before{content:"←";order:2;color:#1F55C7;font-size:19px;font-weight:900}
@media(min-width:900px){
 .ar181-res{align-items:start}
 .ar181-side{grid-auto-rows:auto;gap:12px}
 .ar181-card{grid-template-columns:auto minmax(0,1fr) 44%;padding:12px 14px}
 .ar181-card-shot{aspect-ratio:auto;align-self:center}
 .ar181-card-shot img{height:auto;max-height:112px;width:100%}
 .ar181-main{grid-template-columns:minmax(0,.46fr) minmax(0,1.54fr);grid-template-rows:auto auto;align-items:center;padding:24px 26px;gap:12px 24px}
 .ar181-main-copy{grid-row:1}
 .ar181-main-shot{grid-row:1;aspect-ratio:auto}
 .ar181-main-shot img{max-height:none}
 .ar181-more{grid-column:2;grid-row:2;justify-self:end}
 .ar181-main:not(:has(.ar181-main-shot)) .ar181-more{grid-column:1}
}
@media(max-width:899px){.ar181-more{justify-self:start}}
@media(max-width:899px){.ar181-card-copy>.ar181-chip{white-space:normal;max-width:100%;font-size:13px;padding:4px 12px}}
@media(min-width:900px){.ar181-card-shot{height:112px;display:flex;align-items:center;justify-content:center;background:#fff}.ar181-card-shot img{width:100%;height:100%;max-height:none;object-fit:contain}}

/* 1.8.4 — block is one even rectangle: main card and the three side cards share the same height. */
@media(min-width:900px){
 .ar181-res{align-items:stretch}
 .ar181-res:not(.is-single) .ar181-main{height:100%;align-content:center}
 .ar181-side{grid-auto-rows:1fr;height:100%}
 .ar181-card{height:100%}
 .ar181-main-shot img{width:100%;height:auto}
}

/* 1.8.4 — exact proportions measured from the approved reference (1774px wide): main 1079 : side 578, gap 23, main shot 66%, side shot 46% at 2:1. */
@media(min-width:900px){
 .ar181-res{grid-template-columns:minmax(0,578fr) minmax(0,1079fr);gap:23px}
 .ar181-res.is-single{grid-template-columns:minmax(0,1fr)}
 .ar181-side{gap:21px}
 .ar181-main{grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);padding:32px 32px 28px;gap:14px 34px;align-items:center}
 .ar181-main-shot{aspect-ratio:1.78/1;display:flex;align-items:center;justify-content:center;background:#fff;padding:0}
 .ar181-main-shot img{width:100%;height:100%;object-fit:contain}
 .ar181-value{font-size:clamp(30px,3.1vw,46px)}
 .ar181-card{grid-template-columns:auto minmax(0,1fr) 46%;padding:14px 18px;gap:14px}
 .ar181-card-shot{height:auto;aspect-ratio:2/1}
 .ar181-card-shot img{height:100%}
 .ar181-card-value{font-size:clamp(20px,1.9vw,28px)}
}

/* 1.8.4 — type scaled to the card width so heights match the reference (main h/w ≈ .5, side cards ≈ .29). */
@media(min-width:900px){
 .ar181-card{padding:9px 16px;gap:12px}
 .ar181-card-copy{gap:3px;row-gap:3px}
 .ar181-card-copy>.ar181-chip{font-size:11.5px;padding:2px 10px}
 .ar181-card-value{font-size:19px;line-height:1.2;white-space:nowrap}
 .ar181-card-label,.ar181-card-extra,.ar181-card-note{font-size:12px;line-height:1.5}
 .ar181-card-copy>.ar181-growth{font-size:12px;padding:1px 9px}
 .ar181-arrow{font-size:28px}
 .ar181-main{padding:24px 26px 20px;gap:10px 26px}
 .ar181-main-copy{gap:5px}
 .ar181-main .ar181-chip{font-size:12px;padding:2px 12px}
 .ar181-value{font-size:30px}
 .ar181-period{font-size:14px}
 .ar181-growth.is-both{font-size:15px;padding:5px 16px}
 .ar181-desc{font-size:12.5px;line-height:1.7;padding-top:8px}
 .ar181-more{font-size:13px}
}

/* 1.8.4 — growth badge sits on the chip row (chip on the right, growth on the left) to save height. */
.ar181-toprow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 100%;width:100%}
.ar181-toprow>.ar181-chip,.ar181-toprow>.ar181-growth{align-self:center}
.ar181-card-copy>.ar181-toprow{flex:0 0 100%}
.ar181-toprow>.ar181-growth{font-size:12.5px;padding:2px 10px}
.ar181-toprow>.ar181-chip{white-space:nowrap}
.ar181-toprow>.ar181-growth{white-space:nowrap;flex:0 0 auto}
@media(min-width:900px){.ar181-card{grid-template-columns:auto minmax(0,1fr) 37%}.ar181-toprow{flex-wrap:wrap;row-gap:3px;gap:6px}.ar181-toprow>.ar181-chip{padding:2px 9px;font-size:11px}.ar181-toprow>.ar181-growth{font-size:11.5px;padding:1px 8px}}

/* 1.8.4 — side cards: growth badge goes back under the text so the screenshot keeps its width. */
@media(min-width:900px){
 .ar181-card{grid-template-columns:auto minmax(0,1fr) 44%}
 .ar181-card-copy>.ar181-chip{font-size:11.5px;padding:2px 10px}
 .ar181-card-copy>.ar181-growth{font-size:12px;padding:1px 9px;align-self:flex-start}
}

/* 1.8.4 — main card is the screenshot only: no text on it. */
.ar181-main.is-shot-only{display:flex;align-items:center;justify-content:center;padding:18px}
.ar181-main.is-shot-only .ar181-main-shot{display:block;width:100%;aspect-ratio:auto;background:transparent;box-shadow:none;padding:0;text-decoration:none}
.ar181-main.is-shot-only .ar181-main-shot img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:12px;box-shadow:0 6px 20px rgba(15,31,69,.14)}

/* 1.8.4 — tight spacing: small gaps between the three cards, almost no white around the main screenshot. */
@media(min-width:900px){
 .ar181-side{gap:8px}
 .ar181-card{padding:6px 14px}
 .ar181-card-copy{gap:2px;row-gap:2px}
 .ar181-card-copy>.ar181-chip{padding:1px 10px}
 .ar181-main.is-shot-only{padding:14px}
}

/* 1.8.4 — side card order, one item per line: sector, number, note, MER/ROAS, growth. */
.ar181-card-copy>.ar181-card-note,.ar181-card-copy>.ar181-card-extra{flex:0 0 100%}
.ar181-card-copy>.ar181-growth{flex:0 0 100%;max-width:max-content}

/* 1.8.4 — spacing measured from the latest reference (1774px): columns 534:1102, column gap 1.45%, card gap ~2.8% of the side width, main inner padding ~1.5%, card inner padding ~4.5%. */
@media(min-width:900px){
 .ar181-res{grid-template-columns:minmax(0,534fr) minmax(0,1102fr);column-gap:1.45%}
 .ar181-res.is-single{grid-template-columns:minmax(0,1fr)}
 .ar181-side{gap:10px}
 .ar181-main.is-shot-only{padding:11px}
 .ar181-card{padding:6px 4.5%}
}
@media(min-width:900px){.ar181-res{grid-template-columns:minmax(0,578fr) minmax(0,1079fr)}.ar181-res.is-single{grid-template-columns:minmax(0,1fr)}}

/* 1.8.6 — the store-type chip (فاشن / عطور وبخور…) is small everywhere: home, results block, platform row, mobile and desktop. */
.ar181-res .ar181-chip,.ar181-rcard .ar181-chip,.ar181-main .ar181-chip,.ar181-card-copy>.ar181-chip{font-size:11px!important;font-weight:700;padding:1px 9px!important;line-height:1.5}

/* 1.8.6 — homepage side cards: growth on the right, sector chip at the far left, bigger screenshot. */
#proof .ar181-card-copy>.ar181-toprow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex:0 0 100%;width:100%}
#proof .ar181-toprow>.ar181-growth{flex:0 0 auto}
@media(min-width:900px){#proof .ar181-card{grid-template-columns:auto minmax(0,1fr) 52%}#proof .ar181-card-shot{aspect-ratio:2/1;height:auto}}
/* results page block keeps the older order: chip first, growth last. */
.ar181-featured .ar181-card-copy>.ar181-toprow{display:contents}
.ar181-featured .ar181-card-copy>.ar181-toprow>.ar181-growth{order:9;flex:0 0 100%;max-width:max-content}
/* home side cards: chip pinned to the far left of the card, growth badge stays at the right of the text. */
#proof .ar181-card-copy>.ar181-toprow{flex-wrap:nowrap;justify-content:flex-start}
#proof .ar181-card{position:relative}
@media(min-width:900px){
 #proof .ar181-card{padding-top:26px}
 #proof .ar181-card .ar181-toprow>.ar181-chip{position:absolute;left:4.5%;top:7px}
}
/* home side cards: chip (far left) and growth badge (right) on one line; MER/ROAS aligned to the right like the other text. */
#proof .ar181-card-copy>.ar181-toprow{display:contents}
@media(min-width:900px){
 #proof .ar181-card .ar181-toprow>.ar181-chip,#proof .ar181-card .ar181-toprow>.ar181-growth{position:absolute;top:7px;height:20px;display:inline-flex;align-items:center;margin:0;padding-top:0;padding-bottom:0;line-height:1}
 #proof .ar181-card .ar181-toprow>.ar181-chip{left:4.5%}
 #proof .ar181-card .ar181-toprow>.ar181-growth{right:calc(4.5% + 26px);left:auto}
}
#proof .ar181-card-copy>.ar181-card-extra{flex:0 0 100%;text-align:right}

/* 1.8.6 — main card like the reference: white card, the whole screenshot inside a thin-bordered rounded frame with its own light background (no cropping). */
.ar181-main.is-shot-only{display:flex;padding:14px;overflow:visible;background:#fff}
.ar181-main.is-shot-only .ar181-main-shot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;background:#F1F7FD;border:1px solid #E1EAF6;border-radius:16px;overflow:hidden;box-shadow:none;padding:0}
.ar181-main.is-shot-only .ar181-main-shot img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:0;box-shadow:none}

/* 1.8.6 — homepage side cards: no store-type chip (it stays on the results page), growth badge under the MER/ROAS line, bigger screenshot. */
#proof .ar181-card .ar181-chip{display:none!important}
@media(min-width:900px){
 #proof .ar181-card{padding:8px 4.5%;grid-template-columns:auto minmax(0,1fr) 56%}
 #proof .ar181-card .ar181-toprow>.ar181-growth{position:static;order:9;flex:0 0 100%;max-width:max-content;height:auto;padding:1px 9px}
 #proof .ar181-card-shot{aspect-ratio:2/1}
}
@media(max-width:899px){#proof .ar181-card .ar181-toprow>.ar181-growth{order:9;flex:0 0 100%;max-width:max-content}}

/* 1.8.7 — results block text in IBM Plex Sans Arabic like the approved screenshot (headings stay Tajawal). Value 15px/700, labels 600, notes 400. */
.ar181-res,.ar181-row,.ar181-rcard{font-family:"IBM Plex Sans Arabic","IBM Plex Sans Arabic",system-ui,sans-serif}
.ar181-res .ar181-card-value,.ar181-rcopy strong{font-family:"IBM Plex Sans Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:700}
.ar181-res .ar181-chip,.ar181-res .ar181-card-extra,.ar181-res .ar181-growth,.ar181-rmeta{font-family:"IBM Plex Sans Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:600}
.ar181-res .ar181-card-note,.ar181-res .ar181-card-label{font-family:"IBM Plex Sans Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:400}
@media(min-width:900px){
 .ar181-side .ar181-card-value{font-size:15px}
 .ar181-side .ar181-card-note,.ar181-side .ar181-card-label{font-size:10.5px}
 .ar181-side .ar181-card-extra{font-size:10.5px}
 .ar181-side .ar181-card-copy>.ar181-growth,.ar181-side .ar181-toprow>.ar181-growth{font-size:10.5px}
}

/* 1.8.7 — the main screenshot already has its own blue frame: no extra frame/background, only a thin white margin; side cards a little tighter so the card height follows the image. */
.ar181-main.is-shot-only{padding:8px}
.ar181-main.is-shot-only .ar181-main-shot{background:transparent;border:0;border-radius:0}
@media(min-width:900px){.ar181-side{gap:8px}#proof .ar181-card{padding-top:4px;padding-bottom:4px}}

/* 1.8.7 — card text weight/colour like the labels inside the screenshot (المبيعات / الزيارات): Plex Arabic, heavy, navy. */
.ar181-res .ar181-card-note,.ar181-res .ar181-card-label,.ar181-res .ar181-card-extra{font-weight:700;color:#0F2A5C}

/* 1.8.7 — the unit (طلب / ريال) sits beside the number in a smaller size so the number stands out. */
.ar181-unit{font-size:.62em;font-weight:600;margin-inline-start:3px;letter-spacing:0}
.ar181-card-value .ar181-unit{font-size:11px}
.ar181-value .ar181-unit{font-size:16px}
.ar181-rcopy strong .ar181-unit{font-size:13px}

/* 1.8.7 — card number a little bigger (15 → 17px on desktop). */
@media(min-width:900px){.ar181-side .ar181-card-value{font-size:17px}}

/* 1.8.7 — results page block: sector chip (far left) and growth badge (right) share one top line, so the three cards are shorter and the main card has no empty white above/below the screenshot. */
@media(min-width:900px){
 .ar181-featured .ar181-card{position:relative;padding-top:26px;padding-bottom:6px}
 .ar181-featured .ar181-card-copy>.ar181-toprow{display:contents}
 .ar181-featured .ar181-card .ar181-toprow>.ar181-chip,.ar181-featured .ar181-card .ar181-toprow>.ar181-growth{position:absolute;top:7px;height:20px;display:inline-flex;align-items:center;margin:0;padding-top:0;padding-bottom:0;line-height:1;order:0;flex:none;max-width:none}
 .ar181-featured .ar181-card .ar181-toprow>.ar181-chip{left:4.5%}
 .ar181-featured .ar181-card .ar181-toprow>.ar181-growth{right:calc(4.5% + 26px);left:auto}
}

/* 1.8.7 — desktop number 20px (number only; the unit stays small); all card text starts from the right, MER/ROAS included, home + results page + mobile. */
@media(min-width:900px){.ar181-side .ar181-card-value{font-size:20px}}
.ar181-res .ar181-card-copy>.ar181-card-extra{text-align:right;direction:rtl;unicode-bidi:plaintext;align-self:flex-start}
.ar181-res .ar181-card-copy{align-items:flex-start}

/* 1.8.7 — results page «نتائج مختارة من عملائنا» = same look as the homepage block: no sector chip, growth under MER, same card sizes. (The platform rows below keep their chip.) */
:is(#proof,.ar181-featured) .ar181-card .ar181-chip{display:none!important}
:is(#proof,.ar181-featured) .ar181-card-copy>.ar181-toprow{display:contents}
@media(min-width:900px){
 :is(#proof,.ar181-featured) .ar181-card{position:relative;padding:4px 4.5%;grid-template-columns:auto minmax(0,1fr) 56%}
 :is(#proof,.ar181-featured) .ar181-card .ar181-toprow>.ar181-growth{position:static;order:9;flex:0 0 100%;max-width:max-content;height:auto;padding:1px 9px;font-size:10.5px;display:inline-flex}
 :is(#proof,.ar181-featured) .ar181-card-shot{aspect-ratio:2/1;height:auto}
}
@media(max-width:899px){:is(#proof,.ar181-featured) .ar181-card .ar181-toprow>.ar181-growth{order:9;flex:0 0 100%;max-width:max-content}}

/* 1.8.7 — results page: the main card hugs the screenshot (8px margin like the homepage) and the three cards fit exactly into the same height; long notes are cut to one line so they never push the cards taller. */
@media(min-width:900px){
 .ar181-featured .ar181-res:not(.is-single){align-items:stretch}
 .ar181-featured .ar181-main.is-shot-only{align-self:start;height:auto}
 .ar181-featured .ar181-side{height:0;min-height:100%;grid-auto-rows:minmax(0,1fr);overflow:hidden}
 .ar181-featured .ar181-card{height:auto;min-height:0;overflow:hidden}
 .ar181-featured .ar181-card-note{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 100%}
}
@media(min-width:900px){
 .ar181-featured .ar181-card{align-items:center}
 .ar181-featured .ar181-card-shot{aspect-ratio:auto;height:calc(100% - 4px);max-height:100%;align-self:center}
 .ar181-featured .ar181-card-shot img{height:100%;width:100%;object-fit:contain}
}

/* 1.8.7 (revised) — results page: the note text is free (any number of lines, like the homepage); the three cards take the height they need and the main card stretches to match, with its screenshot scaled up to fill it. */
@media(min-width:900px){
 .ar181-featured .ar181-main.is-shot-only{align-self:stretch;height:auto}
 .ar181-featured .ar181-side{height:auto;min-height:0;overflow:visible;grid-auto-rows:1fr}
 .ar181-featured .ar181-card{height:auto;min-height:0;overflow:visible;grid-template-columns:auto minmax(0,1fr) 42%}
 .ar181-featured .ar181-card-note{display:block;-webkit-line-clamp:unset;overflow:visible}
 .ar181-featured .ar181-card-shot{height:auto;max-height:none;aspect-ratio:2/1;align-self:center}
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot{height:100%}
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot img{height:100%;width:100%;object-fit:cover;object-position:center}
}
/* revised: no cropping of the screenshot — it scales to the card width. */
@media(min-width:900px){
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot{height:auto;align-self:center}
 .ar181-featured .ar181-main.is-shot-only{align-items:center}
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot img{height:auto;width:100%;object-fit:contain}
}

/* 1.8.7 (final) — results page block uses exactly the homepage measurements: main card 329px tall, three cards 104px each with 8px gaps, same 56% thumbnails, notes up to two lines. */
@media(min-width:900px){
 .ar181-featured .ar181-res:not(.is-single){align-items:start}
 .ar181-featured .ar181-main.is-shot-only{height:329px;align-self:start;align-items:center;padding:8px}
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot{height:auto;max-height:100%}
 .ar181-featured .ar181-main.is-shot-only .ar181-main-shot img{height:auto;max-height:313px;width:100%;object-fit:contain}
 .ar181-featured .ar181-side{height:329px;min-height:0;gap:8px;grid-auto-rows:minmax(0,1fr);overflow:visible}
 .ar181-featured .ar181-card{height:auto;min-height:0;padding:4px 4.5%;grid-template-columns:auto minmax(0,1fr) 56%;overflow:hidden;align-items:center}
 .ar181-featured .ar181-card-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 100%}
 .ar181-featured .ar181-card-shot{height:auto;max-height:none;aspect-ratio:2/1;align-self:center}
 .ar181-featured .ar181-card-shot img{height:100%;width:100%;object-fit:contain}
}

/* 1.8.7 — platform icons are real logo tiles (files in assets/img/platform-icons) instead of hand-drawn shapes. */
.ar181-pic img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.ar181-pic-dot{background:#0F2A5C}
.ar181-fchip .ar181-pic{width:28px;height:28px;border-radius:8px;overflow:hidden}

/* 1.8.8 — closing banner on the tool pages (same look as the results page banner). */
.ar181-closing-cta.ar162-results-cta-wrap{padding-block:34px 44px}
.ar181-closing-cta .ar162-results-cta{padding:26px 22px;display:grid;gap:16px;color:#fff;background:linear-gradient(to left,#0F2A5C 25%,#1F55C7);border-radius:26px}
.ar181-closing-cta .ar162-results-cta h2{margin:0;font-size:23px;font-weight:900;line-height:1.5;color:#fff}
.ar181-closing-cta .ar162-results-cta p{margin:6px 0 0;color:#DDE6FA;font-size:14px;line-height:1.8}
.ar181-closing-cta .ar160-btn{width:100%}
@media(min-width:900px){.ar181-closing-cta.ar162-results-cta-wrap{padding-block:50px 64px}.ar181-closing-cta .ar162-results-cta{grid-template-columns:1fr auto;align-items:center;padding:34px 40px}.ar181-closing-cta .ar160-btn{width:auto;padding-inline:34px}}

/* 1.8.9 — platform buttons on phones: one line, swipe sideways (no wrapping into rows). */
@media(max-width:899px){
 .ar181-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;gap:8px;padding:2px 2px 8px;margin-inline:-2px}
 .ar181-chips::-webkit-scrollbar{display:none}
 .ar181-chips .ar181-fchip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}
.home .ar160-footer .rail-nav .current-menu-item>a:not(.active){font-weight:700}

/* 1.8.16 (CMP-191) — mobile only: the «ريال» unit in result cards 11px → 12px (weight/colour unchanged). */
@media (max-width:899px){.ar181-card-value .ar181-unit{font-size:12px}}