/* ============================================================
   Ordex OS — visual system.
   One spacing scale, one radius, one shadow, one accent.
   Everything inside a section is centred: eyebrow → title →
   rule → lede → cards. Nothing hugs a side.
   Loaded after site.css and overrides it where they disagree.
   ============================================================ */

:root {
    --section: 104px;
    --gap: 24px;
    --radius: 20px;
    --card-pad: 32px;
    --measure: 640px;
    --shadow-soft: 0 1px 2px rgba(11, 23, 51, .04), 0 10px 30px rgba(11, 23, 51, .06);
}

/* ============================================================
   TYPOGRAPHY — the brand face.
   IBM Plex Sans Arabic for everything, IBM Plex Mono for the
   numbers and the eyebrows. Chosen deliberately over the
   Tajawal/Cairo/Inter set that every Arabic template ships with:
   Plex is an engineering typeface (it was drawn for IBM), it has a
   matching Arabic and Latin design so both scripts sit on the same
   skeleton, and its figures stay legible at table sizes — which is
   what an operations system is actually made of.
   NOTE: Plex Arabic tops out at 700. Never ask for 800/900 or the
   browser fakes the bold and the whole page looks smeared.
   ============================================================ */
:root {
    --font-ui: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --font-num: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
body.rtl, body.ltr, body { font-family: var(--font-ui); }
body { font-size: 16px; line-height: 1.7; letter-spacing: 0; }

/* every 900 in site.css becomes 700 — that is the heaviest real cut */
.hero h1, .sec-head h2, .section-title, .page-head h1,
.card h3, .num b, .plan-price b, .disc b, .steps h3,
.note-box h3, .cta-band h2, .footer-col h4, .acc-q,
table.compare thead th, table.compare tbody th,
.eyebrow, .plan-flag, .fit-tag, .chips .chip, .btn { font-weight: 700; }

.hero h1, .page-head h1, .sec-head h2, .section-title { letter-spacing: -.015em; }
body.rtl .hero h1, body.rtl .page-head h1,
body.rtl .sec-head h2, body.rtl .section-title { letter-spacing: 0; }

/* figures carry the system's voice — monospaced, tabular, tight */
.num b, .plan-price b, .disc b, .steps > li::before {
    font-family: var(--font-num);
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    /* mono cells make the thousands comma float; pull it back in */
    letter-spacing: -.045em;
}

/* eyebrow in mono reads as a label on an instrument, not a marketing kicker */
.eyebrow {
    font-family: var(--font-num);
    font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
}
body.rtl .eyebrow { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .02em; font-weight: 700; }

/* latin names (carriers, platforms) keep the Latin cut of the same family */
.chips .chip[dir="ltr"] { font-family: var(--font-ui); letter-spacing: -.005em; }

/* ---------- rhythm ---------- */
.section { padding: var(--section) 0; }
.section + .section { padding-top: var(--section); }
.container { max-width: 1140px; }
.narrow { max-width: 860px; }

/* ---------- section header (eyebrow → title → rule → lede) ---------- */
.sec-head { text-align: center; margin-bottom: 56px; }
.eyebrow {
    display: block; font-size: 12.5px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 14px;
}
body.rtl .eyebrow { letter-spacing: .04em; }
.sec-head h2, .section-title {
    font-size: clamp(25px, 3vw, 34px); font-weight: 900;
    color: var(--navy); line-height: 1.35; margin: 0; text-align: center;
}
.sec-head .rule, .rule {
    display: block; width: 46px; height: 3px; border-radius: 2px;
    background: var(--blue); margin: 18px auto 0;
}
.sec-head p, .section-sub {
    max-width: var(--measure); margin: 20px auto 0;
    text-align: center; color: var(--muted); font-size: 17px; line-height: 1.75;
}
.section-title { margin-bottom: 0; }
.section-title.left { text-align: center; }

/* ---------- hero ---------- */
.hero-in { padding: 104px 20px 112px; }
.hero h1 { letter-spacing: -.01em; }
.hero-sub { font-size: 18px; line-height: 1.8; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 26px; color: #8FA3C8; font-size: 14.5px; }

/* ---------- stats ---------- */
.numbers-in { grid-template-columns: repeat(3, 1fr); padding: 44px 20px; gap: var(--gap); }
.num b { font-size: 32px; letter-spacing: -.02em; }
.num span { font-size: 14px; }

/* ---------- cards: one card, everywhere ---------- */
.card {
    padding: var(--card-pad);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: none;
    text-align: center;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.section-alt .card { background: #fff; }
.card:hover { border-color: #CBD9F2; box-shadow: var(--shadow-soft); }
.grid { gap: var(--gap); }

.ic { width: 32px; height: 32px; margin: 0 auto 18px; color: var(--blue); display: block; }
.ic.sm { width: 26px; height: 26px; margin-bottom: 14px; }

.card h3 {
    font-size: 18.5px; font-weight: 800; color: var(--navy);
    margin-bottom: 10px; line-height: 1.5;
}
.card > p { color: var(--muted); font-size: 15.5px; line-height: 1.75; }

/* orphan on the last row centres itself — never stuck to a side */
.grid-3 > .card:last-of-type:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(33.333% - 16px); }
.grid-3 > .card:last-of-type:nth-child(3n + 2) { grid-column: 2 / 4; justify-self: center; width: calc(33.333% - 16px); }
.grid-2 > .card:last-of-type:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }

/* ---------- module card: title, lede, then the detail lines ---------- */
.mod-card { display: flex; flex-direction: column; }
.mod-card .lines {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
    display: grid; gap: 9px; text-align: center;
}
.mod-card .lines li { color: var(--ink); font-size: 14.5px; line-height: 1.65; }
.mod-card .lines li + li { padding-top: 9px; border-top: 1px dashed #EDF1F8; }

/* ---------- plain centred list (fit / not-fit, plan features) ---------- */
.feat-list { display: grid; gap: 10px; text-align: center; }
.feat-list li { color: var(--ink); font-size: 15px; line-height: 1.7; }
.feat-list li + li { padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips .chip {
    display: inline-block; padding: 8px 18px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    font-size: 14.5px; font-weight: 700; color: var(--navy);
}
.chips.big .chip { padding: 9px 20px; font-size: 15px; }
.logo-note { margin-top: 18px; color: var(--muted); font-size: 14.5px; text-align: center; }

/* ---------- comparison table ---------- */
/* No horizontal scroller on this site: the table fits, or it stacks (below). */
.compare-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; max-width: 980px; margin: 0 auto;
}
table.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.compare th, table.compare td { overflow-wrap: anywhere; }
/* fixed layout takes column widths from the first row: keep the label column narrow. */
table.compare thead th:first-child { width: 170px; }
table.compare th, table.compare td {
    padding: 18px 20px; text-align: center; vertical-align: middle;
    border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6;
}
table.compare thead th { background: #FAFCFF; font-weight: 800; color: var(--navy); font-size: 14.5px; }
table.compare tbody th { font-weight: 800; color: var(--navy); width: 150px; font-size: 14.5px; }
table.compare td { color: var(--muted); }
table.compare .us { background: var(--blue-soft); color: var(--navy); font-weight: 600; }
table.compare thead th.us { background: var(--blue); color: #fff; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }

/* ---------- plans ---------- */
.plan-card { position: relative; display: flex; flex-direction: column; text-align: center; }
.plan-pop { border-color: var(--blue); }
.plan-flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--blue); color: #fff; font-size: 12px; font-weight: 800;
    padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 8px; justify-content: center; }
.plan-price b { font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.plan-price span { font-size: 14.5px; color: var(--muted); font-weight: 600; }
.plan-tag { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; min-height: 44px; }
.plan-card .feat-list { flex: 1; margin-bottom: 26px; }

/* ---------- numbered steps as a centred grid ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.steps > li {
    counter-increment: s; list-style: none; text-align: center;
    padding: var(--card-pad); border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff;
}
.steps > li::before {
    content: counter(s); display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--blue-soft); color: var(--blue); font-weight: 900; font-size: 16px;
}
.steps h3 { font-size: 17.5px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 14.5px; line-height: 1.75; }
.steps > li:last-of-type:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(33.333% - 16px); }
.steps > li:last-of-type:nth-child(3n + 2) { grid-column: 2 / 4; justify-self: center; width: calc(33.333% - 16px); }

/* ---------- discounts ---------- */
.disc-row { display: flex; gap: var(--gap); justify-content: center; flex-wrap: wrap; }
.disc {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 34px; text-align: center; min-width: 150px;
}
.disc b { display: block; font-size: 32px; font-weight: 900; color: var(--blue); letter-spacing: -.02em; }
.disc span { font-size: 14.5px; color: var(--muted); font-weight: 600; }

/* ---------- fit / not fit ---------- */
.ok-card { border-color: #CBE7D8; }
.no-card { border-color: #EFD6D3; }
.ok-card .ic, .no-card .ic { display: none; }
.fit-tag {
    display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.ok-card .fit-tag { background: var(--ok-bg); color: var(--ok); }
.no-card .fit-tag { background: var(--err-bg); color: var(--err); }

/* ---------- note box ---------- */
.note-box {
    background: #FAFCFF; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 44px 40px; text-align: center;
    max-width: 760px; margin: 0 auto;
}
.note-box h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.note-box p { color: var(--muted); margin-bottom: 24px; max-width: var(--measure); margin-inline: auto; }

/* ---------- accordion ---------- */
.acc { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.acc-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.acc-q {
    width: 100%; text-align: center; background: none; border: 0; cursor: pointer;
    padding: 20px 24px; font: inherit; font-weight: 700; color: var(--navy); font-size: 16px;
    position: relative;
}
.acc-q::after {
    content: '+'; position: absolute; inset-inline-end: 22px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 400; color: var(--blue);
}
.acc-item.open { border-color: #CBD9F2; }
.acc-item.open .acc-q::after { content: '−'; }
.acc-a { display: none; padding: 0 28px 24px; }
.acc-item.open .acc-a { display: block; }
.acc-a p { color: var(--muted); text-align: center; font-size: 15px; line-height: 1.8; max-width: var(--measure); margin: 0 auto; }

/* ---------- cta band ---------- */
.cta-band { padding: 84px 0; }
.cta-band-in { flex-direction: column; text-align: center; gap: 24px; }
.cta-band h2 { font-size: clamp(23px, 2.6vw, 30px); font-weight: 900; }
.cta-band p { margin-top: 10px; opacity: .85; }

/* ---------- page head ---------- */
.page-head { padding: 72px 0 60px; text-align: center; }
.page-head h1 {
    font-size: clamp(28px, 4vw, 42px); font-weight: 900; color: var(--navy);
    line-height: 1.35; letter-spacing: -.01em;
}
.page-head p {
    max-width: var(--measure); margin: 20px auto 0;
    color: var(--muted); font-size: 17px; line-height: 1.8; text-align: center;
}

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start; max-width: 1000px; margin: 0 auto; }
.contact-side { display: grid; gap: var(--gap); }
.contact-side p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.form { text-align: start; }
.form label { display: block; margin-bottom: 18px; }
.form label > span { display: block; font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 7px; }
.form input, .form textarea {
    width: 100%; padding: 13px 15px; font: inherit; font-size: 15px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--blue); }
.form textarea { resize: vertical; }
.form em { display: block; color: var(--err); font-size: 13px; font-style: normal; margin-top: 6px; }
.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 22px; font-weight: 600; text-align: center; }
.alert.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #CBE7D8; }

/* ---------- misc ---------- */
.btn { border-radius: 12px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.nav-cta { white-space: nowrap; }
.center-cta { text-align: center; margin-top: 48px; }
.small { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.small a { color: var(--blue); font-weight: 600; }
/* four columns now (System / Start / Company + brand) — site.css only had three */
.footer-in { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding: 64px 20px 40px; text-align: center; }
.footer-col { text-align: center; display: flex; flex-direction: column; align-items: center; }
.footer-brand { align-items: center; }
.footer-brand p { max-width: 300px; margin-inline: auto; }
.footer-contact { margin-top: 6px; font-size: 14px; }
.footer-col h4 { margin-bottom: 14px; }
.footer-brand .brand-logo-light { margin: 0 auto 14px; }
.footer-brand p { margin-bottom: 8px; }
.footer-bottom { text-align: center; }

@media (max-width: 1000px) {
    .contact-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps > li:last-of-type:nth-child(3n + 1),
    .steps > li:last-of-type:nth-child(3n + 2) { grid-column: auto; width: auto; }
    .steps > li:last-of-type:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}

@media (max-width: 960px) {
    :root { --section: 72px; --card-pad: 28px; }
    .numbers-in { grid-template-columns: repeat(2, 1fr); }
    /* a lone stat on the last row centres itself instead of hugging a side */
    .numbers-in > .num:last-of-type:nth-child(2n + 1) { grid-column: 1 / -1; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 > .card:last-of-type:nth-child(3n + 1),
    .grid-3 > .card:last-of-type:nth-child(3n + 2) { grid-column: auto; width: auto; }
    .grid-3 > .card:last-of-type:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
    .hero-in { padding: 76px 20px 84px; }
}

@media (max-width: 960px) { .footer-in { grid-template-columns: 1fr 1fr; gap: 36px; } }

@media (max-width: 720px) {
    :root { --section: 64px; --card-pad: 26px; --radius: 18px; }
    .footer-in { grid-template-columns: 1fr; gap: 30px; }
    .nav-cta { display: none; }
    .grid-2, .grid-3, .steps { grid-template-columns: 1fr; }
    /* the stats stay two-up on the phone — four numbers under each other
       is a column of empty screens, and the stores band below is already 2x2 */
    .numbers-in { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; padding: 36px 16px; }
    .num b { font-size: 27px; }
    .num span { font-size: 13px; line-height: 1.5; display: block; }
    .grid-2 > .card:last-of-type:nth-child(2n + 1),
    .grid-3 > .card:last-of-type:nth-child(2n + 1),
    .steps > li:last-of-type:nth-child(2n + 1) { grid-column: auto; justify-self: stretch; width: auto; }
    .plan-price b { font-size: 34px; }
    .plan-tag { min-height: 0; }
    .sec-head { margin-bottom: 40px; }
    .note-box { padding: 32px 24px; }
    .footer-col { text-align: center; }

    /* the comparison table becomes stacked rows instead of a sideways scroll:
       row label on top, then the two answers, each carrying its column name. */
    table.compare { table-layout: auto; }
    table.compare thead { display: none; }
    table.compare, table.compare tbody, table.compare tr,
    table.compare tbody th, table.compare tbody td { display: block; width: auto; }
    table.compare tbody tr { padding: 20px 18px; border-bottom: 1px solid var(--line); }
    table.compare tbody tr:last-child { border-bottom: 0; }
    table.compare tbody th { padding: 0 0 12px; border: 0; font-size: 16px; }
    table.compare tbody td {
        padding: 12px 14px; border: 0; border-radius: 12px;
        background: var(--bg-alt); font-size: 14.5px;
    }
    table.compare tbody td + td { margin-top: 8px; }
    table.compare tbody td.us { background: var(--blue-soft); }
    table.compare tbody td::before {
        content: attr(data-l); display: block; margin-bottom: 4px;
        font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted);
    }
    table.compare tbody td.us::before { color: var(--blue); }
}

/* ============================================================
   PRICING — one base, three add-ons.
   The base is a wide slab (it is the product); each add-on is a
   full-width block led by the question it answers, so a price
   never appears without the reason for it.
   ============================================================ */
.base-card {
    max-width: 920px; margin: 0 auto; position: relative;
    border: 1.5px solid var(--blue); border-radius: var(--radius);
    background: #fff; padding: 46px 44px 40px; text-align: center;
}
.base-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
    padding: 6px 18px; border-radius: 999px; white-space: nowrap;
}
.base-card h2 { font-size: 24px; font-weight: 700; color: var(--navy); }
.base-card .plan-tag { font-size: 16px; margin-bottom: 30px; min-height: 0; }
.base-card .btn { margin-top: 32px; }

.feat-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; text-align: center; }
.feat-list.two li { padding: 11px 0; border-top: 1px solid var(--line); }
.feat-list.two li:first-child, .feat-list.two li:nth-child(2) { border-top: 0; }
/* odd item out: centre it across both columns instead of leaving it hanging */
.feat-list.two li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.addon {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 40px; text-align: center; max-width: 920px; margin: 0 auto var(--gap);
}
.addon-head .ic { color: var(--blue); }
.addon-q {
    display: block; font-size: 19px; font-weight: 700; color: var(--navy);
    max-width: var(--measure); margin: 0 auto 6px;
}
.addon h3 {
    font-size: 13px; font-weight: 700; color: var(--blue);
    letter-spacing: .06em; margin-bottom: 14px;
}
.addon .plan-price { margin: 0 0 16px; }
.addon .plan-price b { font-size: 34px; }
.plan-price .plus { font-size: 22px; font-weight: 700; color: var(--muted); align-self: center; }
.addon-d { color: var(--muted); max-width: var(--measure); margin: 0 auto 28px; line-height: 1.8; }
.addon-who {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
    color: var(--navy); font-size: 14.5px; font-weight: 600;
}

/* home summary row */
.price-row { display: grid; gap: var(--gap); }
.base-mini { position: relative; border-color: var(--blue); }
.base-mini h3 { margin-top: 6px; }
.addon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.addon-mini h3 { font-size: 17px; }
.addon-mini p { color: var(--muted); font-size: 14.5px; }
.plan-price.sm { margin: 10px 0 12px; }
.plan-price.sm b { font-size: 26px; }

/* label on the modules page */
.in-base {
    display: inline-block; margin-top: 22px; padding: 7px 18px; border-radius: 999px;
    background: var(--blue-soft); color: var(--blue); font-size: 13.5px; font-weight: 700;
}
.addon-q-inline { color: var(--navy); font-weight: 700; font-size: 15px; }

@media (max-width: 960px) {
    .addon-row { grid-template-columns: 1fr; }
    .base-card { padding: 40px 28px 34px; }
    .addon { padding: 32px 26px; }
}
@media (max-width: 720px) {
    .feat-list.two { grid-template-columns: 1fr; }
    .feat-list.two li:nth-child(2) { border-top: 1px solid var(--line); }
    .addon-q { font-size: 17.5px; }
    .addon .plan-price b { font-size: 29px; }
}

/* ---------- the setup month: the real entry point, so it leads ---------- */
.onboard {
    max-width: 920px; margin: 0 auto; text-align: center;
    border: 1.5px solid var(--navy); border-radius: var(--radius);
    background: #fff; padding: 46px 44px 38px;
}
.onboard h2 { font-size: 26px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.onboard .plan-price { margin: 14px 0 10px; }
.onboard .plan-price b { color: var(--navy); }
.onboard-t { color: var(--muted); max-width: var(--measure); margin: 0 auto 30px; line-height: 1.8; }
.onboard-after {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
    color: var(--navy); font-weight: 700; font-size: 15.5px;
}
.onboard-floor {
    margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.75;
    max-width: 620px; margin-inline: auto;
}
@media (max-width: 960px) { .onboard { padding: 38px 26px 32px; } }


/* ---------- the stores this system actually runs ---------- */
.stores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.store {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 30px 20px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); transition: box-shadow .15s, border-color .15s;
}
.store:hover { box-shadow: var(--shadow); border-color: #CBD9F2; }
.store img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }
.store b { font-size: 16.5px; font-weight: 700; color: var(--navy); }
.store span { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.store em {
    font-style: normal; font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; color: var(--blue); margin-top: 12px;
}

/* ---------- setup month, week by week ---------- */
.weeks {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
    margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--line);
}
.week { text-align: center; }
.week-n {
    display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
    font-weight: 600; letter-spacing: .06em; color: var(--blue);
    background: var(--blue-soft); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.week b { display: block; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.week p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ---------- two CTAs under the base plan ---------- */
.base-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- floating WhatsApp (Ordex Support) ---------- */
.wa-float {
    position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 60;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #25D366; color: #fff; box-shadow: 0 6px 20px rgba(11, 23, 51, .22);
    transition: transform .15s;
}
.wa-float:hover { transform: scale(1.06); }

@media (max-width: 960px) {
    .stores { grid-template-columns: repeat(2, 1fr); }
    .weeks { grid-template-columns: repeat(2, 1fr); gap: 28px var(--gap); }
}
@media (max-width: 720px) {
    .stores { grid-template-columns: repeat(2, 1fr); }
    .store { padding: 22px 12px; }
    .store img { width: 46px; height: 46px; }
    .weeks { grid-template-columns: 1fr; }
    .wa-float { width: 50px; height: 50px; inset-block-end: 16px; inset-inline-end: 16px; }
}

@media (max-width: 400px) {
    .num b { font-size: 24px; }
}

/* ---------- compact rows: short items side by side, not a column of cards ----
   Musab 15/10: four short items under a centred heading should read as one row
   so the page does not turn into scrolling for nothing. Four across on desktop,
   two across on the phone — never one under the other. */
.mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 8px; }
.mini-row.four { grid-template-columns: repeat(4, 1fr); }
.mini { text-align: center; padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mini b { display: block; font-size: 26px; font-weight: 800; color: var(--blue); letter-spacing: -.02em; }
.mini span { display: block; margin: 8px 0 8px; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.mini p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.extras { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.extras-h { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--muted); }

@media (max-width: 720px) {
    .mini-row, .mini-row.four { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mini { padding: 18px 12px; }
    .mini b { font-size: 22px; }
    .mini span { font-size: 14.5px; }
    .mini p { font-size: 13px; line-height: 1.6; }
    /* the four setup weeks keep two-up on the phone for the same reason */
    .weeks { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px; }
}

/* ---------- integrations: four cards as one row, two-up on the phone -------
   Musab 15/10: "الأربع عناصر يبقوا في سطر واحد مش تحت بعض" — the page should not be
   scrolling for nothing. */
.grid-int { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-int .card { padding: 26px 18px; }
.grid-int .chips { gap: 7px; }
.grid-int .chips .chip, .grid-int .chips.big .chip { padding: 6px 12px; font-size: 13px; }
.grid-int .logo-note { font-size: 13.5px; line-height: 1.7; }
@media (max-width: 960px) { .grid-int { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
    .grid-int { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grid-int .card { padding: 20px 12px; }
    .grid-int .card h3 { font-size: 16px; }
    .grid-int .chips .chip, .grid-int .chips.big .chip { padding: 5px 10px; font-size: 12px; }
    .grid-int .logo-note { font-size: 12.5px; line-height: 1.65; }
    .grid-int .ic { width: 24px; height: 24px; margin-bottom: 12px; }
}

/* ---------- more air, less copy (Musab 15/10) -------------------------------
   The page should breathe like a product page, not a brochure: wider rhythm
   between sections, a calmer lede, and card text that stays one or two lines. */
:root { --section: 92px; --gap: 24px; --measure: 600px; }
.sec-head { margin-bottom: 40px; }
.sec-head p, .page-head p { max-width: var(--measure); margin-inline: auto; font-size: 17px; line-height: 1.8; }
.card > p { font-size: 15px; line-height: 1.75; }
.hero-sub { max-width: 620px; }
@media (max-width: 960px) { :root { --section: 76px; } }
@media (max-width: 720px) {
    :root { --section: 56px; }
    .sec-head { margin-bottom: 28px; }
    .sec-head p, .page-head p { font-size: 15.5px; line-height: 1.75; }
}

/* ---------- trust strip: the names we run with, under the hero --------------
   Benchmarks (Katana, Veeqo, Fulfil, Stripe) all put proof directly under the
   hero. We have no customer logos we are allowed to publish, so the proof is
   the carriers and platforms that are actually wired. */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust .container { padding: 26px 20px; text-align: center; }
.trust-l {
    display: block; margin-bottom: 14px; font-family: var(--font-num);
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #9AA8C2;
}
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.trust-n { font-size: 15px; font-weight: 700; color: #8795AF; white-space: nowrap; }
@media (max-width: 720px) {
    .trust .container { padding: 20px 14px; }
    .trust-row { gap: 8px 16px; }
    .trust-n { font-size: 13px; }
}

/* ---------- denser fold -----------------------------------------------------
   Measured on a real screenshot: the hero was 530px tall on desktop and most of
   it was empty, and the trust strip wrapped onto three lines on the phone. */
.hero-in { padding: 72px 20px 80px; }
.hero-note { margin-top: 18px; font-size: 13.5px; max-width: 520px; margin-inline: auto; }
.hero-ctas { margin-top: 30px; }
.numbers-in { padding: 36px 20px; }
.trust .container { padding: 22px 20px; }
.trust-row { gap: 10px 22px; }
.trust-n { font-size: 14px; }
@media (max-width: 960px) { .hero-in { padding: 56px 20px 64px; } }
@media (max-width: 720px) {
    .hero-in { padding: 44px 18px 52px; }
    .hero-ctas { margin-top: 24px; gap: 10px; }
    .hero-ctas .btn { width: 100%; }
    .hero-note { margin-top: 16px; font-size: 12.5px; }
    .trust .container { padding: 18px 12px; }
    .trust-row { gap: 6px 14px; }
    .trust-n { font-size: 12.5px; }
}

/* ---------- WhatsApp CTA: the channel's own colour and mark ------------------
   Musab 15/10: the contact button is WhatsApp, so it should look like WhatsApp
   and read "تواصل معنا" — not a generic blue button that says "call us". */
.btn-wa {
    display: inline-flex; align-items: center; gap: 9px;
    background: #25D366; color: #fff;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
}
.btn-wa:hover { background: #1DB954; color: #fff; }
.btn-wa .ic-wa { width: 20px; height: 20px; flex: none; }
.btn-wa.btn-sm .ic-wa { width: 17px; height: 17px; }
.cta-band .btn-wa { box-shadow: none; }

/* ---------- a lone element in any row centres itself ------------------------
   House rule: nothing on this site hugs a side. The three-step row goes two-up
   on the phone, so the third step has to sit in the middle underneath. */
.mini-row > .mini:last-of-type:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(33.333% - 18px); }
.mini-row.four > .mini:last-of-type:nth-child(4n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(25% - 20px); }
@media (max-width: 720px) {
    .mini-row > .mini:last-of-type:nth-child(3n + 1),
    .mini-row.four > .mini:last-of-type:nth-child(4n + 1) { grid-column: auto; width: auto; }
    .mini-row > .mini:last-of-type:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

/* ---------- the two prices a merchant has to see before anything else ------ */
.plan-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .plan-two { grid-template-columns: 1fr; } }

/* ---------- footer: one row of links on the phone, not four blocks --------- */
@media (max-width: 720px) {
    .footer-in { grid-template-columns: repeat(3, 1fr); gap: 26px 12px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-col h4 { font-size: 13.5px; margin-bottom: 10px; }
    .footer-col a { font-size: 13px; line-height: 2; }
}

/* the nav CTA stays hidden on the phone — .btn-wa sets a display, so it has to be forced */
@media (max-width: 720px) { .nav-cta { display: none !important; } }

/* ---------- less empty air on the phone (measured on a 390px screenshot) ---- */
@media (max-width: 720px) {
    .cta-band { padding: 40px 0; }
    .cta-band-in { padding: 24px 18px; gap: 18px; }
    .center-cta { margin-top: 28px; }
    .footer-brand p { margin-bottom: 4px; }
    .footer-contact { margin-top: 2px; }
    .footer-in { padding: 44px 16px 28px; }
}

/* ---------- house rule, applied to every grid on the site -------------------
   A lone element at the end of a row centres itself. Nothing hugs a side,
   in any section, at any width (Musab, repeatedly). */
.disc-row > *:last-child:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; }
.grid-int > *:last-child:nth-child(4n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(25% - 20px); }
.weeks > *:last-child:nth-child(4n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(25% - 20px); }
.steps > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(33.333% - 18px); }
@media (max-width: 960px) {
    .addon-row > *:last-child:nth-child(3n + 1),
    .addon-row > *:last-child:nth-child(3n + 2),
    .grid-int > *:last-child:nth-child(4n + 1),
    .weeks > *:last-child:nth-child(4n + 1),
    .steps > li:last-child:nth-child(3n + 1) { grid-column: auto; width: auto; }
    .addon-row > *:last-child:nth-child(2n + 1),
    .grid-int > *:last-child:nth-child(2n + 1),
    .weeks > *:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
@media (max-width: 720px) {
    .addon-row > *:last-child:nth-child(2n + 1) { grid-column: auto; justify-self: stretch; width: auto; }
    .grid-int > *:last-child:nth-child(2n + 1),
    .weeks > *:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

/* ---------- the closing CTA is centred like everything else ----------------
   It used to sit text-left / button-right on wide screens. Nothing on this
   site hugs a side (Musab 15/10). */
.cta-band-in { flex-direction: column; text-align: center; justify-content: center; }
.cta-band-in > div { width: 100%; }
.cta-band p { margin-inline: auto; }

/* ---------- contact page: one centred column -------------------------------
   It used to be form-on-one-side / cards-on-the-other. Nothing on this site
   is left or right (Musab 15/10). */
.contact-grid { grid-template-columns: 1fr; max-width: 660px; }
.contact-side { grid-template-columns: repeat(2, 1fr); }
.contact-form-card, .contact-form-card .form { text-align: center; }
.contact-form-card .form label span { display: block; text-align: center; }
.contact-form-card .form textarea { text-align: center; }
@media (max-width: 720px) { .contact-side { grid-template-columns: 1fr; } }

/* ---------- hero: one centred button, the second action as a quiet link ---- */
.hero-link {
    display: inline-block; margin-top: 18px; color: #A9BCDC;
    font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(169, 188, 220, .35);
    padding-bottom: 2px;
}
.hero-link:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-wa { justify-content: center; }

/* ---------- top bar: logo in the middle on desktop too --------------------
   The phone header already had lang / logo / burger with the logo centred;
   on desktop the logo hugged the start edge (Musab 15/10). */
@media (min-width: 961px) {
    .topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
    .nav { grid-column: 1; grid-row: 1; justify-content: flex-start; flex: none; }
    .brand { grid-column: 2; grid-row: 1; justify-self: center; }
    .topbar-actions { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* the open menu on the phone is centred like the rest of the site */
@media (max-width: 720px) { .nav a { text-align: center; } }

/* ---------- four add-ons now, so the mini row goes four across ------------- */
@media (min-width: 961px) { .addon-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .addon-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .addon-row { grid-template-columns: 1fr; } }

/* a lone add-on centres itself at whatever the row width is */
@media (min-width: 961px) {
    .addon-row > *:last-child:nth-child(4n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(25% - 20px); }
    .addon-row > *:last-child:nth-child(4n + 2) { grid-column: 2 / 4; justify-self: center; width: calc(25% - 20px); }
    .addon-row > *:last-child:nth-child(4n + 3) { grid-column: 2 / 5; justify-self: center; width: calc(25% - 20px); }
}
@media (max-width: 960px) and (min-width: 721px) {
    .addon-row > *:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}

/* ---------- stats band: centre whatever number of stats there are -----------
   The grid was fixed at three columns; with two real numbers the pair sat in
   two of three columns and looked pushed to one side on desktop (Musab 15/10). */
.numbers-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 80px; }
.numbers-in .num { flex: 0 1 260px; text-align: center; }
@media (max-width: 720px) { .numbers-in { gap: 24px 28px; } .numbers-in .num { flex: 0 1 140px; } }

/* ---------- FAQ answers follow the same centring as everything else -------- */
.acc-a, .acc-a p { text-align: center; }
.acc-a p { max-width: var(--measure); margin-inline: auto; }