/* ============================================================
   SHIPNEX — shared website styles (internal pages)
   ============================================================ */
:root{
  /* Navy is locked at #16213A. lib/site.css carried #0F1B33, so the three pages driven by
     this file rendered a different navy chip from the homepage — invisible until the header
     was measured rather than looked at. */
  /* Brand display face. Was defined inline on the homepage only, so any shared rule using
     it fell back to the body font on every other page. */
  --display:'Fredoka','IBM Plex Sans Arabic',sans-serif;
  /* ب٥ (owner, 08-21): these three were an off-brand template blue (#2563EB → indigo), used as
     the "primary accent" on about / help / partners — the only pages that load this sheet. The
     brand palette is navy + orange only (taken from the logos, and index calls it out inline);
     the blue never belonged, and the blue download button was already caught once. Remapped to
     the brand navy in ONE place, so every eyebrow, icon chip, step number, primary button, and
     partners' inline var(--blue) pick up the brand colour. Navy fills blue's primary-accent
     role and matches the homepage's default .kicker.navy; orange stays the pop. Names kept as
     legacy aliases to avoid churning ~10 call sites — --accent is the intent. */
  --blue:#16213A; --blue-press:#0F1A30; --blue-tint:#E9ECF3;
  --orange:#F97316; --orange-tint:#FFF3EA;
  --navy:#16213A; --ink:#101626; --ink-2:#4B5567; --ink-3:#646e7d;
  --bg:#FFFFFF; --surface:#F6F8FB; --surface-2:#EEF2F8; --line:#E6EAF1;
  --r:22px; --r-sm:14px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow-md:0 12px 30px rgba(16,24,40,.09);
  --shadow-lg:0 30px 60px rgba(16,24,40,.14);
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:var(--r-pill);padding:14px 26px;transition:transform .15s,box-shadow .2s,background .15s;white-space:nowrap;}
.btn svg{width:19px;height:19px;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(22,33,58,.24);}
.btn-primary:hover{background:var(--blue-press);transform:translateY(-2px);}
.btn-ghost{background:var(--surface-2);color:var(--ink);}
.btn-ghost:hover{background:var(--line);}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{transform:translateY(-2px);}
.btn-outline-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue);background:var(--blue-tint);padding:7px 14px;border-radius:var(--r-pill);}
.eyebrow.orange{color:var(--orange);background:var(--orange-tint);}
h1,h2,h3{letter-spacing:-.02em;margin:0;}
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.15;}
.sec-sub{font-size:17px;color:var(--ink-2);max-width:600px;}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line);}
/* The header component moved to lib/chrome.css, which every page loads. What
   was here ran at its own measurements — 72px tall instead of 78, links at
   weight 500 instead of 600 — so these three pages wore a slightly different
   header from the other four. `.logo` and `.nav-cta .login` went with it: no
   page carries either class any more. */

/* page hero */
.page-hero{position:relative;padding:64px 0 30px;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset-inline-start:50%;transform:translateX(50%);top:-40%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(22,33,58,.08),transparent);z-index:0;}
.page-hero .wrap{position:relative;z-index:1;}

section.block{padding:80px 0;}
.center-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:50px;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 36px;background:var(--navy);border-radius:var(--r);color:#fff;}
.stat b{font-size:32px;font-weight:700;display:block;}
.stat span{font-size:14px;opacity:.7;}
.stat .nx{color:var(--orange);}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.vals{display:flex;flex-direction:column;gap:18px;margin-top:26px;}
.val-row{display:flex;gap:14px;align-items:flex-start;}
.val-row .vic{width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;}
.val-row .vic svg{width:22px;height:22px;}
.val-row b{font-size:16px;}
.val-row p{margin:3px 0 0;color:var(--ink-2);font-size:14.5px;}
.img-side{background:var(--surface-2);background-image:repeating-linear-gradient(135deg,rgba(16,24,40,.04) 0 12px,transparent 12px 24px);display:grid;place-items:center;color:var(--ink-3);}

/* features grid */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .2s,box-shadow .2s;}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.fcard .ic{width:48px;height:48px;border-radius:14px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;margin-bottom:16px;}
.fcard .ic svg{width:23px;height:23px;}
.fcard h3{font-size:18px;font-weight:700;margin-bottom:7px;}
.fcard p{color:var(--ink-2);font-size:14.5px;margin:0;}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--blue),#0B1422);border-radius:var(--r);padding:54px;text-align:center;color:#fff;}
.cta-band h2{font-size:clamp(26px,3.6vw,36px);font-weight:700;margin-bottom:12px;}
.cta-band p{font-size:17px;opacity:.92;margin:0 0 26px;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* partner cards */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pcard{border:1px solid var(--line);border-radius:var(--r);padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .2s,box-shadow .2s;}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.pcard .pic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;}
.pcard .pic svg{width:30px;height:30px;}
.pcard h3{font-size:20px;font-weight:700;}
.pcard p{color:var(--ink-2);font-size:15px;margin:0;}
.pcard .plink{font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:auto;}

/* steps */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{text-align:center;padding:14px;}
.step .n{width:60px;height:60px;border-radius:18px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;margin:0 auto 16px;font-weight:700;font-size:22px;font-family:'Fredoka';}
.step .n svg{width:26px;height:26px;}
.step h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.step p{color:var(--ink-2);font-size:15px;margin:0;}

/* help / faq */
.help-search{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 6px 6px 22px;}
.help-search input{flex:1;border:none;background:transparent;font-family:var(--font);font-size:16px;color:var(--ink);outline:none;}
.help-search svg{width:20px;height:20px;color:var(--ink-3);}
.help-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hcat{border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.hcat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.hcat .ic{width:52px;height:52px;border-radius:15px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px;}
.hcat .ic svg{width:24px;height:24px;}
.hcat b{font-size:15px;}
.hcat span{display:block;color:var(--ink-3);font-size:13px;margin-top:4px;}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;background:var(--bg);}
.faq-item .q{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;font-size:16px;cursor:pointer;}
.faq-item .q svg{width:20px;height:20px;color:var(--ink-3);flex:0 0 20px;}
.faq-item .a{color:var(--ink-2);font-size:14.5px;margin-top:12px;}

/* FOOTER — lib/chrome.css. This copy was on a different navy, a different
   grid, links a half-pixel smaller and a hover that went white where every
   other page went orange. */

@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .feat,.pcards,.help-cats,.how,.stats{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .feat,.pcards,.help-cats,.how,.stats{grid-template-columns:1fr;} }


/* ── Brand lockup — moved to lib/chrome.css, alongside the header and footer it
   appears in. Keeping it here left the lockup shared across three pages while
   the bar around it was not, which is how the two drifted apart in the first
   place. ─────────────────────────────────────────────────────────────────── */