/* Shared visual language: the resource cards are the reference composition. */
.sd-premium-card {
  position: relative;
  padding: 24px;
  min-height: 248px;
  border: 1px solid #ccd6c8;
  border-radius: 15px;
  text-decoration: none;
}
.sd-premium-card h2, .sd-premium-card h3 { color: var(--card-ink); font-size: 22px; line-height: 1.25; letter-spacing: -.025em; margin: 12px 0; max-width: 29ch; }
.sd-premium-card :is(p,li) { color: var(--card-muted); font-size: 14px; line-height: 1.65; }
.sd-premium-card .sd-checks { position: relative; z-index: 1; margin-top: 18px; }
.sd-premium-card .sd-checks li { color: var(--card-muted); }
.sd-premium-card .sd-card-backdrop svg { opacity: .42; }
.sd-premium-card:focus-visible { outline: 2px solid #22785c; outline-offset: 4px; }
.sd-content-grid:has(.sd-premium-card) { gap: 16px; }
.sd-resource-integration > .sd-premium-card { padding: 24px; background: linear-gradient(125deg,var(--card-start),var(--card-end)); }
.sd-resource-integration .sd-premium-card h3 { color: var(--card-ink); }
.sd-guide { background: #eef0e7; }
.sd-guide aside { border-radius: 15px; background: #faf8f0; border: 1px solid #ccd6c8; }
.sd-resource-example, .sd-resource-toc, .sd-legal-title aside, .sd-legal-summary { border-radius: 15px; border-color: #ccd6c8; background: linear-gradient(125deg,#f8f6ee,#e9eee1); }
.sd-tool-panel { border-radius: 15px; border-color: #ccd6c8; box-shadow: 0 1px 0 #fff inset; }
.sd-tool-result { background: linear-gradient(145deg,#204b3b,#102f26); }
.sd-tool-result :is(h3,p,b,small,span) { color: #f5f5e9; }

/* Home: existing screens, prices and interactions keep their DOM contracts. */
.sd-site .business-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.sd-site .business-links > .sd-business-card {
  --home-card-start: #f3f5eb; --home-card-end: #e0eadb;
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0; min-height: 126px; padding: 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 15px;
  background: linear-gradient(125deg,var(--home-card-start),var(--home-card-end));
  border: 1px solid #ccd6c8; border-radius: 15px; color: #193f30;
  font-size: 17px; transition: transform .2s, border-color .2s;
}
.sd-site .business-links > .sd-business-card:nth-child(3n+2) { --home-card-start:#faf6ed; --home-card-end:#eee4d2; }
.sd-site .business-links > .sd-business-card:nth-child(3n) { --home-card-start:#f8f3ef; --home-card-end:#eddfd6; }
.sd-business-card::before, .sd-site .plan-card::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 155px; height: 135px; inset-inline-end: -15px; bottom: -15px;
  background: #46715a; opacity: .13;
  -webkit-mask: var(--sd-surface-art,url('/brand/illustrations/storefront.svg')) center/contain no-repeat;
  mask: var(--sd-surface-art,url('/brand/illustrations/storefront.svg')) center/contain no-repeat;
}
.sd-business-card[data-art=inventory] { --sd-surface-art:url('/brand/illustrations/inventory.svg'); }
.sd-business-card[data-art=receiving] { --sd-surface-art:url('/brand/illustrations/receiving.svg'); }
.sd-business-card > span { position: relative; z-index: 1; }
.sd-business-card > span:first-child { max-width: 20ch; }
.sd-site .business-links > .sd-business-card:hover { transform: translateY(-3px); border-color:#74977b; }
.sd-site #forfaits .plan-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 15px; border-color: #ccd6c8; background: linear-gradient(135deg,#faf8f1,#edf0e5); box-shadow: inset 0 1px 0 #fff; }
.sd-site #forfaits .plan-card::after { width: 210px; height: 190px; bottom: 10px; opacity: .09; --sd-surface-art:url('/brand/illustrations/documents.svg'); }
.sd-site #forfaits .plan-card--popular { background: linear-gradient(145deg,#204b3b,#102f26); border-color:#54765b; }
.sd-site #forfaits .plan-card--popular::after { background:#c2d6b8; opacity:.12; }
.sd-site #forfaits .plan-card--popular :is(.plan-name,.plan-description,.plan-price,.plan-price small,.plan-features li,.plan-yearly-bonus,.plan-stage) { color:#f4f5e8; }
.sd-site #forfaits .plan-card--gold-tier { background:linear-gradient(135deg,#faf5e8,#ede3ca); border-color:#d7c99d; }
.sd-site .faq-grid details { border:1px solid #ccd6c8; border-radius:14px; background:#fbfaf5; }
.sd-site .faq-grid summary { color:#193f30; }

/* Native app announcement. The platform badges are informational, not links. */
.hero-app-badges { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-top:22px; }
.hero-app-stores { display:flex; align-items:center; gap:10px; direction:ltr; }
.hero-app-stores img { display:block; flex-shrink:0; object-fit:contain; }
.hero-app-store { width:120px; height:40px; }
.hero-google-play { width:155px; height:60px; margin:-10px -10px -10px -7px; }
.hero-app-soon { font-size:10px; line-height:1.5; letter-spacing:.025em; color:#acc5b5; }
.editorial-hero:has(.hero-app-badges) .hero-footnote { margin-top:24px; }
[dir=rtl] .hero-app-badges { align-items:flex-end; }
@media(max-width:760px) { .hero-app-badges { margin-top:18px; gap:5px; }.hero-app-soon { font-size:9px; } }
.sd-apps { padding:64px 0; border-block:1px solid #cbd7c9; background:linear-gradient(115deg,#e5eddf,#f7f5ea 60%,#e1eadb); color:#193f30; overflow:hidden; }
.sd-apps-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; gap:48px; }
.sd-apps-copy { max-width:560px; }
.sd-apps-copy h2 { margin:16px 0!important; font-size:clamp(30px,3.5vw,46px)!important; line-height:1.12!important; letter-spacing:-.04em; }
.sd-apps-copy > p { font-size:15px; line-height:1.75; max-width:48ch; color:#425d4c; }
.sd-app-platforms { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 16px; }
.sd-platform { min-width:170px; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #a8bfa9; border-radius:13px; background:#fcfbf4d9; box-shadow:inset 0 1px 0 #fff; }
.sd-platform strong,.sd-platform small { display:block; line-height:1.5; }
.sd-platform strong { font-size:16px; font-weight:600; }
.sd-platform small { font-size:11px; color:#4b6552; }
.sd-apps-copy > .sd-apps-note { font-size:12px; line-height:1.7; }
.sd-apps-access { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:12px; font-size:13px; font-weight:600; color:#193f30; border-bottom:1px solid #8aa48d; }
.sd-apps-art { position:relative; min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; isolation:isolate; }
.sd-app-orbit { position:absolute; width:340px; height:340px; border:1px solid #97b18e66; border-radius:50%; z-index:-1; }
.sd-app-orbit::before { content:''; position:absolute; inset:23px; border:1px solid #97b18e4d; border-radius:50%; }
.sd-app-phone { width:205px; padding:7px; border-radius:32px; background:#0c2c23; border:1px solid #456c50; transform:rotate(7deg); box-shadow:18px 22px 42px #173e2f20,0 1px 0 #b0c5a7 inset; }
.sd-app-phone-top { padding:12px 12px 13px; color:#c2e2c4; display:grid; justify-items:center; gap:12px; }
.sd-app-phone-top > span { width:45px; height:6px; border-radius:20px; background:#031d17; }
.sd-app-phone-top b { font-size:12px; letter-spacing:-.02em; }
.sd-app-phone-body { min-height:230px; padding:15px 12px; border-radius:10px 10px 26px 26px; background:#f7f6ee; }
.sd-app-phone-shop { display:block; font-size:11px; font-weight:600; margin-bottom:13px; }
.sd-app-phone-metric { padding:13px 12px 5px; border-radius:11px; background:#173f30; color:#edf3e4; }
.sd-app-phone-metric small { display:block; font-size:9px; opacity:.85; }
.sd-app-phone-metric b { display:block; font-size:23px; font-weight:600; }
.sd-app-phone-metric em { font-size:8px; font-style:normal; }
.sd-app-phone-metric svg { width:100%; height:32px; opacity:.7; margin-top:7px; }
.sd-app-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.sd-app-mini-grid > div { background:#edf1e5; border:1px solid #dce4d5; padding:9px; border-radius:9px; }
.sd-app-mini-grid small { display:block; font-size:8px; line-height:1.4; }
.sd-app-mini-grid b { display:block; font-size:16px; margin-top:3px; }
.sd-app-phone-lines { display:grid; gap:7px; margin:16px 4px; }
.sd-app-phone-lines i { width:90%; height:4px; background:#d6e1d0; border-radius:5px; }
.sd-app-phone-lines i:nth-child(2) { width:65%; }.sd-app-phone-lines i:nth-child(3) { width:78%; }
.sd-apps-preview { position:relative; font-size:10px; color:#59735d; }

/* Shop workspace: subtle surfaces on summaries, readable white working areas. */
[data-souq-workspace] { --sq-surface-art:url('/brand/illustrations/documents.svg'); }
[data-souq-workspace][data-sq-art=inventory] { --sq-surface-art:url('/brand/illustrations/inventory.svg'); }
[data-souq-workspace][data-sq-art=receiving] { --sq-surface-art:url('/brand/illustrations/receiving.svg'); }
[data-souq-workspace][data-sq-art=delivery] { --sq-surface-art:url('/brand/illustrations/delivery.svg'); }
[data-souq-workspace][data-sq-art=returns] { --sq-surface-art:url('/brand/illustrations/returns.svg'); }
[data-souq-workspace][data-sq-art=storefront] { --sq-surface-art:url('/brand/illustrations/storefront.svg'); }
[data-souq-workspace][data-sq-art=zakat] { --sq-surface-art:url('/brand/illustrations/zakat.svg'); }
[data-souq-workspace] [data-sq-card].bg-card:not([class*="bg-gradient"]):not([class*="from-"]) { border-color:#d0dacd; background-image:linear-gradient(135deg,#fffefa,#f5f6ed); box-shadow:0 1px 2px #153c2c09,inset 0 1px 0 #fff; }
[data-souq-workspace] [data-sq-card].bg-card:not([class*="bg-gradient"]):not([class*="from-"]):not(:has(table,form,input,textarea,select,[role=grid],[role=listbox],button[aria-haspopup],.recharts-wrapper,canvas)) { position:relative; isolation:isolate; }
[data-souq-workspace] [data-sq-card].bg-card:not([class*="bg-gradient"]):not([class*="from-"]):not(:has(table,form,input,textarea,select,[role=grid],[role=listbox],button[aria-haspopup],.recharts-wrapper,canvas))::after {
  content:''; position:absolute; z-index:-1; pointer-events:none; inset-inline-end:0; bottom:0; width:145px; height:115px; max-width:100%; max-height:100%; border-radius:inherit;
  background:#557a5d; opacity:.09; -webkit-mask:var(--sq-surface-art) center/contain no-repeat; mask:var(--sq-surface-art) center/contain no-repeat;
}
[data-souq-workspace] [data-sq-metrics] [data-sq-card].bg-card:not([class*="bg-gradient"]):not([class*="from-"]) { background-image:linear-gradient(130deg,#f6f8ef,#eaf1e3); }

@media(max-width:1000px) { .sd-site .business-links { grid-template-columns:repeat(2,minmax(0,1fr)); }.sd-apps-layout { gap:28px; } }
@media(max-width:760px) {
  .sd-premium-card { padding:21px; min-height:228px; }.sd-premium-card h2 { font-size:23px; }
  .sd-site .business-links > .sd-business-card { min-height:116px; padding:17px; font-size:15px; }
  .sd-apps { padding-block:36px; }.sd-apps-layout { grid-template-columns:1fr; gap:22px; }.sd-apps-copy h2 { max-width:14ch; }
  .sd-apps-art { min-height:375px; }.sd-app-phone { width:190px; }.sd-app-orbit { width:290px; height:290px; }
  .sd-app-platforms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.sd-platform { min-width:0; padding:11px; gap:9px; }
  .sd-platform small { font-size:10px; }.sd-apps-copy > p { font-size:14px; }.sd-site .plan-card { scroll-margin-top:84px; }
}
@media(prefers-reduced-motion:reduce) { .sd-site .business-links > .sd-business-card { transition:none; }.sd-site .business-links > .sd-business-card:hover { transform:none; } }