/* rabih-app.com — one stylesheet for every public page.
 *
 * Every colour here is a value docs/design-system.md already names: the light
 * set is the mobile identity, the dark set is the dashboard's dark theme. Do
 * not add a hex that document does not carry; re-sync it first.
 *
 * Colour jobs, as the identity assigns them: green is only what earns money
 * (and the one primary action), blue is only prices and never a button, amber
 * is waiting, teal is navigation, ink is the dark money card.
 */

@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(fonts/plex-arabic-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-display:swap;src:url(fonts/plex-arabic-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/plex-mono-600.woff2) format("woff2")}

:root{
  color-scheme:light;
  --ground:#FBFAF6;--raised:#FFFFFF;--sunk:#F2F0EA;--subtle:#F4F2EC;
  --text:#101820;--text-2:#5B6672;--text-3:#8A9099;
  --line:#E6E3DC;--hair:#EFEDE6;--card-line:#F1EFE9;--divider:#EAE7DF;--seg:#EDEAE2;
  --ink-card:#101820;--ink-card-line:#101820;--on-ink:#FFFFFF;--on-ink-2:#C3C8CE;
  --green:#00B26A;--on-green:#04351F;--green-text:#00874F;--green-tint:rgba(0,178,106,.11);
  --blue:#2C55F0;
  --amber:#FFA51E;--amber-text:#A96500;--amber-tint:rgba(255,165,30,.16);
  --teal:#10B9C4;--teal-text:#0A6B72;--teal-tint:rgba(16,185,196,.14);
  --ship-text:#101820;--ship-tint:rgba(16,24,32,.07);
  --done-tint:rgba(0,178,106,.13);--stock-tint:rgba(0,178,106,.14);
  --cat-text:#0A8C95;--cat-tint:rgba(16,185,196,.13);
  --shadow:0 1px 2px rgba(16,24,32,.05),0 14px 30px -20px rgba(16,24,32,.45);
  --glow:0 10px 22px -10px rgba(0,178,106,.9);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#121921;--raised:#1A232E;--sunk:#0A0F15;--subtle:#18212B;
    --text:#E8EDF3;--text-2:#9AA6B2;--text-3:#77828D;
    --line:#29343F;--hair:#1E2833;--card-line:#1E2833;--divider:#222C37;--seg:#263039;
    --ink-card:#04080C;--ink-card-line:rgba(255,255,255,.12);
    --green-text:#3ED08F;--green-tint:rgba(0,178,106,.16);
    --blue:#6F8CFF;
    --amber-text:#FFB84D;--amber-tint:rgba(255,165,30,.18);
    --teal-text:#52D0DA;--teal-tint:rgba(16,185,196,.16);
    --ship-text:#E8EDF3;--ship-tint:rgba(255,255,255,.08);
    --done-tint:rgba(0,178,106,.16);--stock-tint:rgba(0,178,106,.17);
    --cat-text:#52D0DA;--cat-tint:rgba(16,185,196,.16);
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#121921;--raised:#1A232E;--sunk:#0A0F15;--subtle:#18212B;
  --text:#E8EDF3;--text-2:#9AA6B2;--text-3:#77828D;
  --line:#29343F;--hair:#1E2833;--card-line:#1E2833;--divider:#222C37;--seg:#263039;
  --ink-card:#04080C;--ink-card-line:rgba(255,255,255,.12);
  --green-text:#3ED08F;--green-tint:rgba(0,178,106,.16);
  --blue:#6F8CFF;
  --amber-text:#FFB84D;--amber-tint:rgba(255,165,30,.18);
  --teal-text:#52D0DA;--teal-tint:rgba(16,185,196,.16);
  --ship-text:#E8EDF3;--ship-tint:rgba(255,255,255,.08);
  --done-tint:rgba(0,178,106,.16);--stock-tint:rgba(0,178,106,.17);
  --cat-text:#52D0DA;--cat-tint:rgba(16,185,196,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--ground);color:var(--text);font:400 17px/1.8 "IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;overflow-wrap:break-word}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:24px}
/* Every number — prices, phones, versions, dates — is Latin digits, LTR, mono. */
.n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--text);color:var(--ground);padding:10px 16px;border-radius:12px;z-index:2}
.skip:focus{top:12px}

/* ——— header and footer ——— */
.top{border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:22px;line-height:1}
/* The mark mirrors so its arrow points into the reading direction (§05). */
.brand svg{width:30px;height:30px;transform:scaleX(-1)}
.nav{display:flex;align-items:center;gap:6px 26px;font-size:15px}
.nav a{color:var(--text-2);text-decoration:none;padding-block:8px}
.nav a:hover{color:var(--text)}
@media (max-width:760px){.nav a:not(.keep){display:none}}

.foot{border-top:1px solid var(--hair);padding-block:36px 44px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:15px}
.foot nav a{color:var(--text-2);text-decoration:none;padding-block:6px}
.foot nav a:hover{color:var(--text);text-decoration:underline}
.foot small{color:var(--text-2);font-size:14px}

/* ——— shared pieces ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:15px;font-weight:600;font-size:16px;line-height:1;text-decoration:none}
.btn svg{width:20px;height:20px;flex:none}
.btn-green{background:var(--green);color:var(--on-green);box-shadow:var(--glow)}
.btn-quiet{background:var(--subtle);color:var(--text)}
.btn-quiet:hover{background:var(--divider)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:500;line-height:1;white-space:nowrap}
.pill-cat{background:var(--cat-tint);color:var(--cat-text)}
.pill-stock{background:var(--stock-tint);color:var(--green-text)}
.pill-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-review{background:var(--amber-tint);color:var(--amber-text)}
.st-ok{background:var(--teal-tint);color:var(--teal-text)}
.st-ship{background:var(--ship-tint);color:var(--ship-text)}
.st-done{background:var(--done-tint);color:var(--green-text)}

.sec{padding-block:96px}
.sec h2{margin:0 0 16px;font-size:clamp(28px,3.4vw,40px);line-height:1.3;font-weight:700;text-wrap:balance}
.intro{margin:0;max-width:52ch;color:var(--text-2);font-size:18px}
/* Heading at the start edge, content beside it: the rhythm of every lower section. */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
@media (max-width:760px){.sec{padding-block:64px}}

/* ——— home: hero ——— */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-block:72px 96px}
.hero h1{margin:0 0 20px;font-size:clamp(40px,5.6vw,68px);line-height:1.15;font-weight:700;text-wrap:balance}
.lead{margin:0 0 32px;font-size:19px;line-height:1.85;color:var(--text-2);max-width:38ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0;font-size:15px;color:var(--text-2)}
.store{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--text);font-weight:500;font-size:14px;line-height:1.2}
.store svg{width:18px;height:18px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:48px;padding-block:48px 72px}}

/* The price demo: the app's own price control, with its ±250 step and band. */
.demo{margin:0}
.card{background:var(--raised);border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--shadow);padding:24px}
.prod{display:flex;align-items:center;gap:14px;padding-bottom:18px}
.tile{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--cat-tint);color:var(--cat-text)}
.tile svg{width:26px;height:26px}
.prod-name{display:block;font-weight:600;font-size:18px;line-height:1.35}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:16px;border-top:1px solid var(--subtle)}
.k{font-size:14px;font-weight:500;color:var(--text-2)}
.money{color:var(--blue);font-weight:600}
.cost{font-size:20px}
.cur{font-size:14px;font-weight:500;color:var(--text-2);margin-inline-start:6px}
.yours{padding-top:16px;border-top:1px solid var(--subtle)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--ground)}
.stepper button{width:48px;height:48px;border:0;border-radius:12px;background:var(--raised);color:var(--text);font:600 24px/1 "IBM Plex Mono",ui-monospace,monospace;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,32,.09)}
.stepper button:hover:not(:disabled){background:var(--subtle)}
.stepper button:disabled{background:transparent;box-shadow:none;color:var(--text-3);cursor:not-allowed}
.stepper button[hidden]{display:block;visibility:hidden}
.stepper output{flex:1;text-align:center;font-size:30px;letter-spacing:-.02em}
.band{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:13px;color:var(--text-2)}
.band span{display:grid;gap:2px}
.band span:nth-child(2){text-align:center}
.band span:last-child{text-align:end}
.band b{font-size:14px}
.profit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--green-tint);color:var(--green-text)}
.profit .k{color:inherit}
.profit output{font-size:32px;font-weight:600;letter-spacing:-.02em}
.profit .cur{color:inherit}
.demo figcaption{margin:14px 6px 0;font-size:14px;color:var(--text-2)}

/* ——— home: steps (a real sequence, so it is numbered) ——— */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
/* Each step wears the colour of its job: catalogue teal, price blue, order amber, profit green. */
.steps li:nth-child(1){--c:var(--teal)}.steps li:nth-child(2){--c:var(--blue)}.steps li:nth-child(3){--c:var(--amber)}.steps li:nth-child(4){--c:var(--green)}
.steps li::before{content:"";display:block;height:4px;border-radius:999px;background:var(--c);margin-bottom:22px}
.steps .n{font-size:14px;font-weight:500;color:var(--text-2)}
.steps h3{margin:6px 0 8px;font-size:21px;line-height:1.4;font-weight:700}
.steps p{margin:0;color:var(--text-2);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr;gap:28px}}

/* ——— home: orders and earnings ——— */
.earn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:56px;border-radius:32px;background:var(--sunk)}
.status-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
.status-list li{display:flex;align-items:baseline;gap:16px}
.status-list .pill{flex:none;min-width:118px;justify-content:center;padding-block:8px}
.status-list span:last-child{color:var(--text-2);font-size:16px;line-height:1.7}
.push{margin:28px 0 0;color:var(--text-2);font-size:16px}
.ink{background:var(--ink-card);border:1px solid var(--ink-card-line);color:var(--on-ink);border-radius:24px;padding:28px}
.ink .k{color:var(--on-ink-2)}
.balance{display:block;margin:12px 0 14px;font-size:clamp(34px,4vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1}
.balance .cur{color:var(--on-ink-2);font-size:16px}
.delta{display:inline-flex;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(0,178,106,.16);color:var(--green);font-size:13px;font-weight:500;line-height:1.2}
.ink hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:24px 0 18px}
.methods{display:grid;gap:10px;margin-top:12px}
.method{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08)}
.method b{font-weight:600}
.method span{color:var(--on-ink-2);font-size:14px}
.earn figure{margin:0}
.earn figcaption{margin:12px 6px 0;font-size:14px;color:var(--text-2)}
@media (max-width:900px){.earn{grid-template-columns:1fr;gap:40px;padding:36px 20px;border-radius:24px}}

/* ——— home: coverage, questions, support ——— */
.gov{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gov li{padding:8px 15px;border-radius:12px;border:1px solid var(--line);background:var(--raised);font-size:15px;font-weight:500}
.fee{margin:24px 0 0;color:var(--text-2);font-size:16px}

.qa{border-top:1px solid var(--divider)}
.qa details{border-bottom:1px solid var(--divider)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-weight:600;font-size:18px;line-height:1.55;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:10px;height:10px;margin-bottom:4px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .18s}
.qa details[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.qa .a{margin:0 0 22px;color:var(--text-2);max-width:62ch}
.qa .a a{color:var(--text)}

.contacts{display:grid;gap:14px}
.contact{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--card-line);border-radius:20px;background:var(--raised);box-shadow:var(--shadow);text-decoration:none}
.contact:hover{border-color:var(--line)}
.contact .ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--teal-tint);color:var(--teal-text)}
.contact .ic svg{width:24px;height:24px}
.contact b{display:block;font-weight:600;font-size:17px;line-height:1.4}
.contact span{color:var(--text-2);font-size:15px}
.hint{margin:20px 0 0;color:var(--text-2);font-size:16px}

/* ——— legal and help pages ——— */
.doc .wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px 72px;padding-block:56px 96px;align-items:start}
.solo .wrap{grid-template-columns:minmax(0,1fr)}
.doc-head{grid-column:1/-1;max-width:68ch}
.doc h1{margin:0 0 14px;font-size:clamp(32px,4.4vw,46px);line-height:1.25;font-weight:700}
.doc-head .lead{margin:0 0 18px;max-width:none}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;color:var(--text-2);font-size:15px}
.toc{grid-column:2;grid-row:2;position:sticky;top:24px;font-size:15px}
.toc b{display:block;margin:0 0 8px;padding-inline:12px;font-weight:600}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:flex;gap:10px;padding:6px 12px;border-radius:10px;color:var(--text-2);text-decoration:none;line-height:1.5}
.toc a:hover{background:var(--subtle);color:var(--text)}
.prose{grid-column:1;grid-row:2;max-width:68ch}
.prose h2{margin:36px 0 10px;font-size:21px;line-height:1.5;font-weight:700}
.prose section:first-of-type h2{margin-top:8px}
.prose h2 .n{color:var(--text-2);font-weight:500}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-inline-start:24px}
.prose li{margin:0 0 6px}
.prose li p{margin:0}
.prose a{color:var(--text)}
.gist{margin:0 0 8px;padding:20px 24px;border-radius:20px;background:var(--sunk);list-style:none;display:grid;gap:8px}
.gist li{position:relative;margin:0;padding-inline-start:18px}
.gist li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.howto{list-style:none;counter-reset:s;padding:0!important;display:grid;gap:12px}
.howto li{counter-increment:s;position:relative;margin:0;padding:14px 18px;padding-inline-start:48px;border:1px solid var(--card-line);border-radius:16px;background:var(--raised)}
.howto li::before{content:counter(s);position:absolute;inset-inline-start:20px;top:22px;font:600 15px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--text-2)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:36px 0 0}
.pair section{padding:22px 24px 10px;border:1px solid var(--card-line);border-radius:20px;background:var(--raised)}
.pair h2{margin-top:0!important}
@media (max-width:900px){
  .doc .wrap{grid-template-columns:1fr;padding-block:40px 72px}
  .toc,.prose{grid-column:1;grid-row:auto}
  .toc{position:static;padding:16px 8px;border:1px solid var(--line);border-radius:16px}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pair{grid-template-columns:1fr}
}
@media (max-width:480px){.toc ol{grid-template-columns:1fr}}