/* New look (approved 2026-10-26): night + red primary + mint secondary, Almarai. Loaded after style.css. */
:root{
  --red:#DE3E38;--red-dark:#B52F2A;--purple:#3E9C7A;--mint:#BFE8D7;--mint2:#E8F6EF;--mint-ink:#2E7D61;
  --ink:#14121A;--ink2:#3d3a45;--night:#0C0A10;--bg:#FFF8EF;--lemon:#BFE8D7;--muted:#6f6b78;--line:#EDE6DA;
  --grad:linear-gradient(135deg,#DE3E38,#B52F2A);
  --r:24px;--r-sm:14px;
  --shadow:0 10px 30px -12px rgba(20,18,26,.14);--shadow-lg:0 24px 60px -20px rgba(20,18,26,.28);
  --f-head:"Almarai",system-ui,sans-serif;--f-body:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[lang="en"]{--f-head:"Almarai",system-ui,sans-serif;--f-body:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,html[lang] h1,html[lang] h2,html[lang] h3{font-weight:800;letter-spacing:0;text-wrap:balance}
.container{max-width:1220px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.section{padding:72px 0}
.section-head{margin-bottom:40px}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.section-head p{color:var(--ink2);font-size:1.05rem}

/* header */
.site-header{background:rgba(12,10,16,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{height:72px;gap:28px}
.brand{background:none;padding:0;border-radius:0}
.brand img{height:26px}
.nav-links{gap:22px}
.nav-links a{padding:6px 0;border-radius:0;font-weight:600;font-size:.95rem;opacity:.85;position:relative;background:none!important}
.nav-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;height:2px;width:0;background:var(--mint);transition:width .3s}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-end{gap:14px}
.lang{border:0;padding:4px 2px;font-family:inherit;font-weight:600;opacity:.8}
.lang:hover{background:none;color:#fff;opacity:1}
.nav-cta{display:none;height:42px;align-items:center;padding:0 20px;border-radius:999px;background:var(--mint);color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:none;transition:transform .2s}
.nav-cta:hover{transform:translateY(-2px)}
.mobile-menu{background:var(--night);border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu a{border-color:rgba(255,255,255,.08)}
.menu-btn:active{background:rgba(255,255,255,.1)}
@media(min-width:900px){.nav-cta{display:inline-flex}.nav{height:76px}.brand img{height:26px}}

/* buttons */
.btn{border-radius:999px;font-family:inherit}
.btn-primary{background:var(--red);box-shadow:0 14px 34px -10px rgba(222,62,56,.65)}
.btn-primary:active{background:var(--red-dark)}
.btn-white{background:var(--mint);color:var(--ink)}
.btn-white:active{background:#a9dcc6}
.btn-line{color:var(--red);border-color:var(--red)}

/* hero */
.hero{background:var(--night);padding:64px 0 96px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 70% at 85% 10%,rgba(222,62,56,.45),transparent 70%),radial-gradient(45% 60% at 5% 95%,rgba(191,232,215,.16),transparent 70%)}
.hero::after{width:520px;height:520px;background:none;border:1px solid rgba(191,232,215,.14);inset-inline-end:-200px;top:-200px}
.hero .tag{background:rgba(255,255,255,.05);border-color:rgba(191,232,215,.5);color:var(--mint);padding:6px 16px;backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.15}
.hero .lead{color:rgba(255,255,255,.75);opacity:1}
.hero-media::before{background:var(--mint);opacity:.9}
.hm-shot{outline-color:rgba(255,255,255,.08);box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
.hm-badge{border-radius:18px}
.hm-ico{background:#FAD1CE}
.hm-b2 .hm-ico,.cr-av{background:var(--mint)}
.hm-cut::before{background:rgba(191,232,215,.14)}

/* founding offer */
.promo{background:var(--mint);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.promo .badge{background:var(--ink);color:var(--mint)}
.promo li::before{color:var(--red)}

/* cards */
.card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ico,.card:nth-child(odd) .ico{background:var(--mint);border-radius:16px}
.card:nth-child(even) .ico{background:#FAD1CE}
.card p{color:var(--ink2)}
.job .meta{color:var(--mint-ink)}
.job .apply{border-color:var(--red);color:var(--red)}
.job .apply:hover,.job .apply:active{background:var(--red);color:#fff}

/* forms */
.form-card{border-radius:32px;border-top:0;box-shadow:var(--shadow-lg);padding:36px 22px;position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--red),var(--mint))}
.form-card h2{font-size:clamp(1.6rem,3vw,2rem)}
.field input[type=text],.field input[type=tel],.field input[type=url],.field input[type=email],.field input[data-email],.field select,.field textarea{border-color:#E4DED3;border-radius:var(--r-sm);background-color:#FFFDF9}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mint-ink);box-shadow:0 0 0 4px rgba(191,232,215,.6)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DE3E38' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.pills span{border-color:#E4DED3;border-radius:var(--r-sm);background-color:#FFFDF9}
.pills input:checked+span{border-color:var(--mint-ink);background:var(--mint);color:var(--ink)}
.pills input:focus-visible+span{box-shadow:0 0 0 3px rgba(62,156,122,.35)}
.file{border-color:#9FD9C2;background:var(--mint2)}
.form-error{background:#FDECEB;color:var(--red-dark)}
.privacy a,.legal a{color:var(--mint-ink)}
.success .check{background:var(--mint);color:var(--ink)}
.success h3{color:var(--ink)}
.share{background:var(--mint2);border-color:#9FD9C2}
.fs-h{border-color:var(--line)}
.fs-h span{background:var(--red)}
@media(min-width:700px){.form-card{padding:44px 40px}}

/* faq (same as homepage) */
.faq{max-width:840px;gap:0}
.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.faq summary{padding:22px 0;font-size:1.08rem}
.faq summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-size:1.3rem;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--red);color:#fff}
.faq details p{padding:0 0 22px;color:var(--ink2)}

/* steps, checklist, chips */
.steps li{border-radius:var(--r)}
.steps li::before{background:var(--red)}
.steps li:nth-child(even)::before{background:var(--mint);color:var(--ink)}
.checklist li{border-radius:var(--r-sm)}
.checklist li::before{background:var(--mint);color:var(--ink)}
.cr-who span{border-color:var(--line)}
.cr-cap{background:var(--mint)}
.cr-av{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--red)}
.legal h2{color:var(--red)}

/* footer (same as homepage) */
.site-footer{background:var(--night);color:#cfc9d8;padding:70px 0 34px;margin-top:40px}
.site-footer .fg{display:grid;gap:32px;grid-template-columns:1fr 1fr}
.site-footer .fg>div:first-child{grid-column:1/-1}
.site-footer p{font-size:.93rem;max-width:34ch;margin-top:14px}
.site-footer h4{color:var(--mint);font-size:.95rem;margin-bottom:14px;font-family:inherit}
.site-footer ul{gap:10px;font-size:.93rem}
.site-footer a{color:inherit}
.site-footer a:hover{color:#fff}
.site-footer .logo{height:26px;margin:0}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:40px;height:40px;border-radius:12px;background:rgba(191,232,215,.14);color:var(--mint);display:grid;place-items:center;transition:background .25s,color .25s}
.soc a:hover{background:var(--red);color:#fff}
.soc svg{width:18px;height:18px}
.site-footer .copy{margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;display:flex;flex-direction:column;gap:8px;color:#9b98a8}
@media(min-width:900px){.site-footer .fg{grid-template-columns:1.6fr 1fr 1fr 1fr}.site-footer .fg>div:first-child{grid-column:auto}.site-footer .copy{flex-direction:row;justify-content:space-between}}
.brand img,.site-footer .logo{filter:brightness(0) invert(1)}

/* merchant portal link (header) */
.nav-portal{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.nav-portal:hover,.nav-portal[aria-current="page"]{background:rgba(191,232,215,.12);border-color:var(--mint)}
.nav-portal .ico{flex:none}
.nav-portal{background:rgba(255,255,255,.06)}.nav-portal .pl-s{display:none}
@media(max-width:1280px){.nav-portal .pl-l{display:none}.nav-portal .pl-s{display:inline}}
@media(max-width:600px){.nav-end{gap:8px}.nav-portal{height:38px;padding:0 10px;gap:5px;font-size:.78rem}.lang{font-size:.82rem}}
@media(max-width:350px){.nav-portal .pl-s{display:none}}

/* help center */
.help-search{display:flex;align-items:center;gap:10px;max-width:620px;margin:28px auto 0;height:60px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg)}
.help-search .ico{flex:none;color:var(--muted)}
.help-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:1rem;color:var(--ink)}
.help-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:48px}
.ht{display:grid;gap:4px;padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .2s,border-color .2s}
.ht:hover{transform:translateY(-4px);border-color:var(--mint)}
.ht-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--mint2);font-size:1.4rem;margin-bottom:8px}
.ht b{font-size:1.08rem}.ht small{color:var(--muted);font-size:.88rem;line-height:1.5}
.help-groups{display:grid;gap:44px}
.hg{scroll-margin-top:96px}.hg h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:6px}
.hg .faq{margin:0;max-width:none}
.help-empty{text-align:center;color:var(--muted);padding:24px 0}
.help-contact{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:36px;border-radius:32px;background:var(--night);color:#fff}
.help-contact h2{font-size:clamp(1.4rem,3vw,2rem)}.help-contact p{color:rgba(255,255,255,.7);margin-top:4px}
.help-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.help-actions .btn-line{color:#fff;border-color:rgba(255,255,255,.35)}
.help-mail{color:var(--mint);font-weight:700}
@media(max-width:900px){.help-topics{grid-template-columns:1fr 1fr}.ht{padding:16px}.help-contact{padding:26px 20px}}

/* merchant portal placeholder */
.portal-hero{padding-top:120px}
.portal-card{max-width:480px;text-align:start}
.portal-card .tag{display:inline-flex;align-items:center;gap:8px;background:var(--mint2);border-color:var(--mint);color:var(--mint-ink);margin-bottom:14px}
.portal-card h1{font-size:clamp(1.7rem,4vw,2.3rem);color:var(--ink)}
.portal-card .sub{color:var(--ink2);margin:8px 0 20px}
.portal-card form{display:grid;gap:4px}
.portal-note{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--mint2);color:var(--mint-ink);font-weight:700;font-size:.92rem}
.portal-feat{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--ink2);font-size:.94rem}
.portal-feat li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-inline-end:8px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:.72rem}
.portal-alt{margin-top:18px;font-size:.94rem;color:var(--ink2)}.portal-alt a{color:var(--red);font-weight:700}
.portal-card .field label{color:var(--ink)}
.portal-card .field input[type=password]{width:100%;min-height:50px;border:1.5px solid #E4DED3;border-radius:var(--r-sm);padding:10px 14px;font:inherit;background:#FFFDF9;color:var(--ink);direction:ltr;text-align:start}
html[dir="rtl"] .portal-card .field input{text-align:right}