:root {
    --platform-ink: #102a2a;
    --platform-muted: #5a6a6a;
    --platform-teal: #0f766e;
    --platform-mint: #dff8ef;
    --platform-gold: #f5a524;
    --platform-bg: #f8fbfa;
    --platform-border: #dce8e4;
    --platform-card: #ffffff;
    --platform-radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.platform-body { margin: 0; background: var(--platform-bg); color: var(--platform-ink); font-family: "Cairo", Arial, sans-serif; font-size: 17px; line-height: 1.7; }
.platform-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.platform-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(220,232,228,.9); background: rgba(248,251,250,.94); backdrop-filter: blur(13px); }
.platform-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.platform-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--platform-ink); font-size: 1.35rem; font-weight: 900; text-decoration: none; }
.platform-brand small { display: block; color: var(--platform-muted); font-size: .68rem; font-weight: 600; }
.platform-brand__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--platform-teal); color: #fff; }
.platform-nav nav { display: flex; align-items: center; gap: 7px; }
.platform-nav nav > a:not(.platform-button) { padding: 9px 11px; color: var(--platform-ink); font-weight: 800; font-size: .91rem; text-decoration: none; }
.platform-nav nav > a:not(.platform-button):hover { color: var(--platform-teal); }
.platform-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 11px 22px; border: 0; border-radius: 13px; background: var(--platform-teal); color: #fff; font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.platform-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 18px rgba(15,118,110,.22); }
.platform-button--small { min-height: 42px; padding: 7px 14px; border-radius: 10px; font-size: .9rem; }
.platform-button--light { background: #fff; color: var(--platform-teal); }
.platform-button--light:hover, .platform-button--light:focus-visible { background: #fff; color: var(--platform-teal); }
.platform-button--outline { border: 1px solid var(--platform-teal); background: transparent; color: var(--platform-teal); }
.platform-button--outline:hover, .platform-button--outline:focus-visible { background: var(--platform-teal); color: #fff; }
.platform-button:disabled { opacity: .6; transform: none; cursor: not-allowed; }
.platform-hero { position: relative; overflow: hidden; padding: 82px 0 90px; background: linear-gradient(132deg, #e5fcf4 0%, #f8fbfa 53%, #f9f0dc 100%); }
.platform-hero::after { content: ""; position: absolute; width: 550px; height: 550px; border-radius: 50%; background: rgba(15,118,110,.12); left: -260px; bottom: -320px; }
.platform-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; }
.platform-eyebrow { display: inline-flex; margin-bottom: 14px; padding: 6px 12px; border-radius: 99px; background: rgba(15,118,110,.12); color: var(--platform-teal); font-size: .86rem; font-weight: 900; }
.platform-hero h1 { max-width: 710px; margin: 0; font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.18; }
.platform-hero h1 em { color: var(--platform-teal); font-style: normal; }
.platform-hero p { max-width: 630px; margin: 21px 0 28px; color: var(--platform-muted); font-size: clamp(1rem, 2vw, 1.21rem); }
.platform-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.platform-dashboard-preview { position: relative; transform: rotate(-2deg); overflow: hidden; min-height: 330px; padding: 22px; border: 8px solid #fff; border-radius: 28px; background: #123737; box-shadow: 0 25px 45px rgba(13,52,48,.22); color: #edfdf8; }
.platform-dashboard-preview::before { content: "لوحة التحكم"; display: block; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.17); font-weight: 900; }
.platform-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; padding-top: 20px; }
.platform-preview-card { min-height: 105px; padding: 15px; border-radius: 16px; background: rgba(255,255,255,.10); }
.platform-preview-card span { display: block; margin-top: 9px; color: #6ddec7; font-size: 1.7rem; font-weight: 900; }
.platform-section { padding: 76px 0; }
.platform-section--muted { background: #edf7f3; }
.platform-section__heading { max-width: 680px; margin-bottom: 34px; }
.platform-section__heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 900; line-height: 1.3; }
.platform-section__heading p { margin: 11px 0 0; color: var(--platform-muted); }
.platform-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.platform-feature { padding: 24px; border: 1px solid var(--platform-border); border-radius: var(--platform-radius); background: var(--platform-card); }
.platform-feature__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--platform-mint); color: var(--platform-teal); font-size: 1.35rem; font-weight: 900; }
.platform-feature h3 { margin: 0 0 8px; font-size: 1.17rem; font-weight: 900; }
.platform-feature p { margin: 0; color: var(--platform-muted); font-size: .92rem; }
.platform-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; }
.platform-plan { display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--platform-border); border-radius: var(--platform-radius); background: #fff; }
.platform-plan--featured { position: relative; border: 2px solid var(--platform-teal); box-shadow: 0 18px 32px rgba(15,118,110,.12); }
.platform-plan--featured::before { content: "مناسب للنمو"; position: absolute; top: -13px; right: 23px; padding: 4px 11px; border-radius: 99px; background: var(--platform-teal); color: #fff; font-size: .75rem; font-weight: 900; }
.platform-plan h3 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.platform-plan p { min-height: 55px; margin: 8px 0 16px; color: var(--platform-muted); font-size: .9rem; }
.platform-price { margin-bottom: 16px; color: var(--platform-teal); font-size: 2rem; font-weight: 900; }
.platform-price small { color: var(--platform-muted); font-size: .8rem; }
.platform-plan ul { flex: 1; margin: 0 0 22px; padding: 0; list-style: none; }
.platform-plan li { margin: 8px 0; color: var(--platform-ink); font-size: .9rem; }
.platform-plan li::before { content: "✓"; margin-left: 8px; color: var(--platform-teal); font-weight: 900; }
.platform-store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.platform-store { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--platform-border); border-radius: 18px; background: #fff; color: var(--platform-ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.platform-store:hover { color: var(--platform-ink); transform: translateY(-3px); box-shadow: 0 14px 25px rgba(15,42,42,.09); }
.platform-store__logo { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; overflow: hidden; border-radius: 15px; background: var(--platform-mint); color: var(--platform-teal); font-size: 1.2rem; font-weight: 900; }
.platform-store__logo img { width: 100%; height: 100%; object-fit: cover; }
.platform-store h3 { margin: 0; font-size: 1.03rem; font-weight: 900; }
.platform-store p { display: -webkit-box; overflow: hidden; margin: 4px 0 0; color: var(--platform-muted); font-size: .82rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.platform-cta { padding: 44px; border-radius: 28px; background: var(--platform-ink); color: #fff; text-align: center; }
.platform-cta h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; }
.platform-cta p { max-width: 640px; margin: 10px auto 24px; color: #c9e3dd; }
.platform-page { padding: 48px 0 80px; }
.platform-page__title { max-width: 780px; margin: 0 0 28px; }
.platform-page__title h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 900; line-height: 1.22; }
.platform-page__title p { color: var(--platform-muted); }
.platform-registration { width: min(800px, 100%); padding: 30px; border: 1px solid var(--platform-border); border-radius: 24px; background: #fff; box-shadow: 0 18px 36px rgba(15,42,42,.07); }
.platform-field { margin-bottom: 18px; }
.platform-field label { display: block; margin-bottom: 7px; font-weight: 900; }
.platform-input { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #cbd9d4; border-radius: 12px; background: #fff; color: var(--platform-ink); font: inherit; }
.platform-input:focus { border-color: var(--platform-teal); outline: 3px solid rgba(15,118,110,.15); }
.platform-plan-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.platform-plan-select label { position: relative; display: block; padding: 15px; border: 1px solid var(--platform-border); border-radius: 14px; cursor: pointer; }
.platform-plan-select input { position: absolute; opacity: 0; }
.platform-plan-select label:has(input:checked) { border: 2px solid var(--platform-teal); background: #effbf7; }
.platform-plan-select strong, .platform-plan-select small { display: block; }
.platform-plan-select small { color: var(--platform-muted); }
.platform-alert { margin: 18px 0; padding: 13px 15px; border-radius: 12px; background: #fff0f0; color: #9b1c1c; }
.platform-success { width: min(680px, 100%); padding: 36px; border: 1px solid var(--platform-border); border-radius: 24px; background: #fff; box-shadow: 0 18px 36px rgba(15,42,42,.07); }
.platform-success__mark { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: var(--platform-mint); color: var(--platform-teal); font-size: 1.8rem; font-weight: 900; }
.platform-footer { padding: 34px 0; background: #0c2726; color: #edf6f4; }
.platform-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.platform-footer p { max-width: 500px; margin: 7px 0 0; color: #bfd5d0; font-size: .9rem; }
.platform-footer__links { display: flex; gap: 18px; }
.platform-footer a { color: #fff; text-decoration: none; }
@media (max-width: 900px) { .platform-hero__grid { grid-template-columns: 1fr; gap: 34px; } .platform-dashboard-preview { max-width: 560px; transform: none; } .platform-feature-grid, .platform-plan-grid { grid-template-columns: 1fr 1fr; } .platform-store-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { body.platform-body { font-size: 16px; } .platform-container { width: min(100% - 22px, 1180px); } .platform-nav { min-height: 70px; gap: 8px; } .platform-brand { font-size: 1.1rem; } .platform-brand small { display: none; } .platform-nav nav > a:not(.platform-button) { display: none; } .platform-hero { padding: 52px 0 58px; } .platform-section { padding: 54px 0; } .platform-feature-grid, .platform-plan-grid, .platform-store-grid, .platform-plan-select { grid-template-columns: 1fr; } .platform-dashboard-preview { min-height: 280px; } .platform-registration, .platform-success { padding: 22px; } .platform-footer__inner { flex-direction: column; } }

/* Responsive typography: landing/public platform */
body.platform-body { font-size: clamp(.94rem, .86rem + .3vw, 1.08rem); }
.platform-body h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 4.4rem); }
.platform-body h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 2.2rem); }
.platform-body h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.5rem); }
.platform-body .platform-button { font-size: clamp(.88rem, .82rem + .22vw, 1rem); }
@media (max-width: 575.98px) {
    body.platform-body { font-size: .92rem; }
}

/* Public store directory: compact logo/name/business-type rows */
.platform-store-filter { display:flex; align-items:end; gap:12px; max-width:680px; margin:0 0 28px; padding:16px; border:1px solid var(--platform-border); border-radius:16px; background:#fff; }
.platform-store-filter label { flex:1 1 180px; font-weight:900; }
.platform-store-filter select { flex:2 1 260px; min-height:48px; }
.platform-store-directory { display:grid; gap:10px; }
.platform-store-row { display:grid; grid-template-columns:56px minmax(150px,1.5fr) minmax(160px,1fr) 32px; align-items:center; gap:15px; min-height:78px; padding:11px 16px; border:1px solid var(--platform-border); border-radius:16px; background:#fff; color:var(--platform-ink); text-decoration:none; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.platform-store-row:hover { color:var(--platform-ink); transform:translateY(-2px); border-color:var(--platform-teal); box-shadow:0 10px 22px rgba(15,42,42,.08); }
.platform-store-row__logo { display:grid; place-items:center; width:52px; height:52px; overflow:hidden; border-radius:14px; background:var(--platform-mint); color:var(--platform-teal); font-size:1.25rem; font-weight:900; }
.platform-store-row__logo img { width:100%; height:100%; object-fit:cover; }
.platform-store-row__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.05rem; font-weight:900; }
.platform-store-row__type { overflow:hidden; color:var(--platform-muted); text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; font-weight:800; }
.platform-store-row__type i { color:var(--platform-teal); margin-left:5px; }
.platform-store-row__arrow { color:var(--platform-teal); font-size:1.1rem; text-align:center; }
@media (max-width:650px) {
    .platform-store-filter { display:grid; gap:8px; }
    .platform-store-filter select { width:100%; }
    .platform-store-row { grid-template-columns:46px minmax(0,1fr) 24px; gap:11px; min-height:68px; padding:9px 11px; }
    .platform-store-row__logo { width:43px; height:43px; border-radius:11px; }
    .platform-store-row__type { grid-column:2; grid-row:2; font-size:.78rem; margin-top:-8px; }
    .platform-store-row__arrow { grid-column:3; grid-row:1 / span 2; }
}

.platform-store-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; transition:opacity .18s ease; }
.platform-store-grid.is-loading, #platformStoreDirectory.is-loading { opacity:.52; }
.platform-store-tile { display:flex; align-items:center; gap:12px; min-width:0; min-height:88px; padding:14px; border:1px solid var(--platform-border); border-radius:18px; background:#fff; color:var(--platform-ink); text-decoration:none; box-shadow:0 5px 16px rgba(15,42,42,.04); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.platform-store-tile:hover { color:var(--platform-ink); transform:translateY(-3px); border-color:var(--platform-teal); box-shadow:0 12px 24px rgba(15,42,42,.1); }
.platform-store-tile__logo { display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; overflow:hidden; border-radius:14px; background:var(--platform-mint); color:var(--platform-teal); font-size:1.35rem; font-weight:900; }
.platform-store-tile__logo img { width:100%; height:100%; object-fit:contain; background:#fff; }
.platform-store-tile__content { display:flex; flex:1 1 auto; min-width:0; flex-direction:column; gap:5px; }
.platform-store-tile__content strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; font-weight:900; }
.platform-store-tile__content small { overflow:hidden; color:var(--platform-muted); text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; font-weight:700; }
.platform-store-tile__arrow { flex:0 0 auto; color:var(--platform-teal); }
.platform-store-filter__status { min-height:1.25em; color:var(--platform-muted); font-size:.82rem; font-weight:700; }
.platform-store-pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; color:var(--platform-muted); font-weight:800; }
.platform-page-button { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:8px 14px; border:1px solid var(--platform-border); border-radius:12px; background:#fff; color:var(--platform-ink); font-weight:800; cursor:pointer; }
.platform-page-button:hover:not(:disabled), .platform-page-button:focus-visible { border-color:var(--platform-teal); color:var(--platform-teal); background:#fff; }
.platform-page-button:disabled { cursor:not-allowed; opacity:.45; }
@media (max-width: 1000px) { .platform-store-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .platform-store-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .platform-store-grid { grid-template-columns:1fr; } .platform-store-tile { min-height:76px; } .platform-store-tile__logo { flex-basis:48px; width:48px; height:48px; } .platform-store-pagination { gap:9px; font-size:.82rem; } .platform-page-button { padding:7px 9px; } }

/* v18 selected subscription plan */
.platform-plan-option{display:flex!important;align-items:flex-start;gap:10px;min-height:116px}
.platform-plan-option input{position:absolute;opacity:0;pointer-events:none}
.platform-plan-option__body{display:block;min-width:0;width:100%}
.platform-plan-option__body strong{font-size:clamp(1rem,.92rem + .3vw,1.2rem)}
.platform-plan-option__body small{margin-top:5px;font-size:clamp(.76rem,.72rem + .12vw,.88rem)}
.platform-plan-option:focus-within{outline:3px solid rgba(15,118,110,.18);outline-offset:2px}
@media(max-width:650px){.platform-registration{padding:clamp(16px,5vw,22px)}.platform-plan-option{min-height:108px;padding:13px!important}.platform-plan-option__body strong{font-size:1rem}.platform-plan-option__body small{font-size:.78rem}}